Membangun Website Penjualan Dinamis dengan Menggabungkan PHP dan Jquery pada El Shaddai Cloth Yogyakarta
Naskah Publikasi
diajukan oleh Edy Kristianto 10.21.0494
JURUSAN TEKNIK INFORMATIKA SEKOLAH TINGGI MANAJEMEN INFORMATIKA DAN KOMPUTER AMIKOM YOGYAKARTA 2011
BUILDING A DYNAMIC WEBSITE SALES BY COMBINING PHP AND JQUERY IN EL SHADDAI CLOTH YOGYAKARTA MEMBANGUN WEBSITE PENJUALAN DINAMIS DENGAN MENGGABUNGKAN PHP DAN JQUERY PADA EL SHADDAI CLOTH YOGYAKARTA Edy Kristianto Jurusan Teknik Informatika STMIK AMIKOM YOGYAKARTA ABSTRACT
Development of Internet technology is so rapid, it is also directly proportional to the development of the website, this led to the exchange of information between one party with another party more quickly and efficiently. Thesis title is taken ": Building a Dynamic Website Sales by Combining PHP and JQuery in EL Shaddai Cloth YOGYAKARTA ". The technology used among other uses sabagai programming language PHP, My SQL databases, CSS, Javascript and JQuery. Its features include merging PHP and JQuery makes the website more interesting and interactive charts and the use of shopping that allows visitors to make an order if a particular item Keyword: EL Shaddai Cloth YOGYAKARTA, PHP, jQuery.
1. Pendahuluan Perkembangan teknologi internet di Indonesia dapat dilihat dari maraknya pemakaian teknologi ini pada berbagai bidang, salah satu contohnya adalah bidang usaha atau bisnis. El Shaddai Cloth Yogyakarta merupakan salah satu instansi di bidang usaha clothing atau lebih dikenal sabagai distro. El Shaddai Cloth selama ini dalam memberikan informasi kepada masyarakat masih menggunakan cara lama, yaitu dengan memberikan brosur atau selebaran. Berdasarkan hal itu kami berminat untuk menerapkan teknologi internet tersebut pada El Shaddai Cloth Yogyakarta yaitu dengan membangun sebuah website. Website yang didukung dengan aplikasi keranjang belanja yang dapat memudahkan pengunjung untuk melakukan pembelian secara online, serta pemakaian JQuery untuk mendukung tampilan website agar lebih menarik. Website ini diharapakan dapat memberikan informasi lebih efisien, efektif dan sesuai tuntutan kemajuan teknologi. 2. Landasan Teori 2.1 Pengertian Sistem Informasi Informasi merupakan hal yang sangat penting didalam manajemen sebuah keputusan. Sebuah informasi tidak terlepas dari sebuah sistem informasi. Sistem informasi dapat didefinisikan sabagai suatu sistem di dalam suatu organisasi yang merupakan kombinasi dari orang-orang, fasilitas, teknologi, media, prosedurprosedur, dan pengendalian yang ditujukan untuk mendapatkan jalur komunikasi penting, memproses tipe transaksi rutin tertentu, memberi sinyal kepada manajemen dan yang lainnya terhadap kejadian-kejadian internal dan eksternal yang penting dan menyediakan suatu dasar informasi untuk pengambilan keputusan yang cerdik.
1
2.2 Pengertian Website Website disebut juga situs web atau portal, merupakan kumpulan halaman web yang saling berhubungan antara satu sama lainnya. Halaman pertama sebuah
1
Jogiyanto Hartono. Pengenalan Komputer Dasar Ilmu Komputer, Pemrograman, Sistem Informasi dan Intelegensi Buatan. Hal. 697.
website adalah homepage. Sedangkan, halaman demi halamannya secara mandiri disebut web page. Website merupakan keseluruhan isi web server yang dimiliki oleh seseorang atau lembaga tertentu. 2.3 Konsep Database Database merupakan sekumpulan data yang saling terintegrasi satu sama lain dan terorganisasi berdasarkan sebuah skema atau struktur tertentu dan tersimpan pada sebuah hardware komputer. 2 Database memiliki bagian penting, misalnya tabel yang digunakan untuk menyimpan data sedangkan tabel itu sendiri memiliki bagian field atau kolom dan record atau data per baris. Dalam pemrograman database, salah satu bahasa yang harus kita kuasai adalah SQL (Structured Query Language). Pada dasarnya SQL merupakan bahasa komputer standar yang ditetapkan oleh ANSI (American National Standart Institute) untuk mengakses dan memanipulasi sistem database. 2.4 Teknologi Pemrograman Web 2.4.1 PHP PHP (Hypertext Preprocessor) dikembangkan pertama kali tahun 1995 oleh Rasmus Lerdorf yang merupakan salah satu anggota group Apache, PHP pertama kali didesain sebagai alat tracking pengunjung website Lerdorf. Kemudian, fungsinya diperlebar dan dihubungkan dengan Apache. PHP dikembangkan sepenuhnya untuk bahasa skrip side-server programming. PHP bersifat open-source dan dapat digabungkan dengan berbagai server yang berbeda-beda. PHP mempunyai
kemampuan
dapat
mengakses
database
dan
diintegrasikan dengan HTML. 2.4.2 JavaScript Javascript diperkenalkan pertama kali oleh Netscape pada tahun 1995. Pada awalnya bahasa ini dinamakan “LiveScript” yang berfungsi sebagai bahasa sederhana untuk browser Netscape Navigator 2. Pada masa itu bahasa ini banyak di kritik karena kurang aman, pengembangannya yang terkesan buru buru dan tidak ada
2
Rudyanto Arief. Pemrograman Basis Data Menggunakan Transact-SQL dengan Microsoft SQL Server 2000.Hal 33.
pesan kesalahan yang di tampilkan setiap kali kita membuat kesalahan pada saat menyusun suatu program.. 2.4.3 CSS CSS (cascading Style Sheet) adalah salah satu fiture dalam html yang memungkinkan untuk mengatur tampilan halaman web yang dibangun. Suatu CSS merupakan tempat dimana anda mengontrol dan mengatur style-style yang ada. CSS mendeskripsikan bagaimana tampilan dokumen HTML di layar. Anda juga bisa menyebutnya sebagai template dari documents HTML yang menggunakanya. Anda juga. 2.4.4 Jquery JQuery adalah Javasript Library atau kumpulan kode / fungsi Javascript siap pakai, sehingga mempermudah dan mempercepat dalam membuat kode Javascript. Secara standar, apabila membuat kode Javascript, maka diperlukan kode yang cukup panjang dan bahkan kadang lebih sulit. Oleh sebab itu disinilah peran JQuery dibutuhkan. Kesimpulanya adalah JQuery menyederhanakan kode Javascript. 3. Analisis dan Perancangan Sistem 3.1 Analisis Langkah pertama yang dilakukan dalam menganalisa sebuah sistem, adalah mengidentifikasi masalah yang ada dalam sistem tersebut. Sedangkan subjek permasalahan yang terjadi pada “El Shaddai Cloth Yogyakarta” adalah, masih kurangnya ruang lingkup promosi yang hanya terpaku di Kota Yogyakarta saja dan kesulitan dalam penjualan produk ke luar daerah, karena usia usaha yang masih baru, dan masih sangat sedikitnya rekanan yang mau memasarkan produk ke luar daerah Yogyakarta. Oleh karena itu, untuk mengetahui kelayakan sebuah sistem baru, sebelum diterapkan, perlu di analisa terlebih dahulu apa saja kelemahan yang terdapat pada sistem yang sudah dan sedang berjalan saat ini, dan apa kelebihan sistem baru jika dibandingkan dengan sistem yang lama. Salah satu metode yang bisa digunakan dalam melakukan analisa terhadap sebuah sistem adalah metode analisis PIECES. Analisis PIECES adalah sebuah metode analisis yang mengacu kepada 6 faktor penting yang
terdiri dari Performance Analysis, Information Analysis, Economy Analysis, Control Analysis, Eficiency Analysis, dan Service Analysis. 3.1.1 Analisis Sistem Berikut adalah hasil analisis terhadap sistem lama dan perbandingannya dengan sistem baru yang ditawarkan pada “El Shaddai Cloth Yogyakarta”: 1. Analisis Kinerja ( Performance Analysis ) Tabel 3.1 Analisis Kinerja ( Performance Analysis ) Sistem Lama
Sistem Baru
Banyak menghabiskan waktu Jumlah
Informasi
yang
Lebih menghemat waktu
disampaikan Jumlah penyampaian informasi dapat lebih
hanya sedikit
banyak dalam satu waktu.
Area penyampaian informasi (promosi) Area penyampaian informasi (promosi) sangat terbatas Ruang
luas lingkup
pemasaran
produk Ruang lingkup pemasaran produk semakin
terbatas
luas
2. Analisis Informasi ( Information Analysis ) Tabel 3.2 Analisis Informasi ( Information Analysis ) Sistem Lama Penyampaian
informasi
baru
Sistem Baru tidak
bisa
langsung, karena harus menyesuaikan dengan
Penyampaian informasi baru dapat langsung diberikan ( “up to date “ )
jadwal promosi (tidak “up to date”) Informasi
yang
disampaikan
terkadang
Informasi lebih akurat, karena berasal
berbeda antara sumber yang satu dengan
dari satu sumber, dan tidak ada
yang lain ( tidak akurat )
campur tangan pihak lain
Informasi yang diberikan terkadang tidak
Informasi yang disampaikan berguna
berguna, bahkan sia-sia (tidak relevan)
bagi calon konsumen maupan pihak lain.
3. Analisis Ekonomi ( Economy Analysis ) Tabel 3.3 Analisis Ekonomi (Economy Analysis ) Sistem Lama
Sistem Baru
Dana promosi yang besar.
Dana promosi yang lebih sedikit.
Sebagai contoh dalam setahun dana yang dibutuhkan untuk promosi sebesar Rp.800.000, sedangkan dengan sistem baru hanya membutuhkan Rp.400.000 saja. 4. Analisis Kontrol ( Control Analysis )
Tabel 3.4 Analisis Kontrol ( Control Analysis ) Sistem Lama
Sistem Baru
Tidak adanya proteksi
Adanya penggunaan password dalam mengolah data
terhadap data yang ada.
sehingga tidak dapat diakses orang lain.
Kontrol terhadap data tidak
Kontrol terhadap data terjamin
terjamin
5. Analisis Efisiensi ( Eficiency Analysis ) Tabel 3.5 Analisis Efisiensi ( Efficiency Analysis ) Sistem Lama
Sistem Baru
Menggunakan kertas dan alat tulis.
Menggunakan sistem komputerisasi.
Sumber daya manusia yang dipakai
Sumber daya manusia yang dibutuhkan lebih
lebih banyak
sedikit
6. Analisis Service ( Service Analysis )
Tabel 3.6 Analisis Servis ( Service Analysis ) Sistem Lama Penyampain
masih
Informasi mengenai El Shaddai Cloth Yogyakarta
menggunakan metode “person
dapat disampaikan secara langsung kepada
to person “
siapa saja dan dimana saja.
3.1.2
informasi
Sistem Baru
Perancangan Sistem
3.1.2.1. Data Flow Diagram (DFD) •
DFD Level 0 Pada level ini menunjukkan dua proses yang terjadi yaitu proses
pengunjung melakukan akses data pada halaman utama dan halaman admin. akses halaman utama Order produk/pemesanan
Login
0 A
Tampilan laporan
B
Sistem Informasi El Shaddai Tampilan produk
Isi/edit/hapus produk
Tapmpilan News
Isi/edit/hapus kategori
Tampilan produk Akses halaman utama
Tapmpilan News C
Gambar 3.1 DFD level 0 Sistem Informasi El Shaddai Cloth Yogyakarta •
DFD Level 1 Untuk Proses Input Data Pada level ini, menunjukkan proses input data yang dilakukan oleh admin yaitu menyimpan, mengedit dan menghapus data dalam database.
Gambar 3.2 DFD level 1 proses 1.1 Sistem Informasi El Shaddai Cloth Yogyakarta •
DFD Level 1 untuk Proses Fasilitas yang Dipilih Pada level ini menunjukkan terjadinya proses input data dari user yang berupa pemasukan data, kemudian data akan disimpan dalam tempat penyimpanan dan user dapat melihat informasi data tersebut sesuai menu yang dipilih.
Gambar 3.3 DFD level 1 proses 1.2 Sistem Informasi El Shaddai Cloth Yogyakarta
3.1.2.2 Perancangan Basis Data 3.1.2.2.1 Entity Relationship Diagram (ERD) Berikut ini akan digambarkan ERD dari website yang akan dibuat.
N membaca
Berita
N N menulis pengunjung
N
Admin
Memesan N N Produk Mengupdate mengisi
N N Buku tamu Produk
Gambar 3.4 Penggambaran ERD 3.1.2.2.2 Perancangan Tabel Di dalam sebuah website dinamis, tentu memerlukan database sebagai penyimpanan data. Database tersebut mempunyai tabel-tabel untuk menyimpan record-record data kita. Oleh Karena itu perancangan tabel penting untuk mengetahui kebutuhan atribut-atribut dari suatu entitas. Berkut adalah rancangan tabel yang hendak disusun pada website : •
Gambar Tabel
Keterangan : *primary key
Produk id_produk* id_kategori** nama_produk deskripsi harga stok berat tgl_masuk jam gambar
** foreign key
kategori id_kategori* nama_kategori
orders id_orders* id_kustomer** status_order tgl_order jam_order
Order_detail id_order** id_produk** jumlah kota id_kota* nama_kota ongkos_kirim kustomer id_kustomer* id_kota** password nama_lengkap alamat telepon email
Gambar 3.5 Relasi Tabel 3.1.2.3 Perancangan Interface/ Antarmuka Perancangan antarmuka digunakan untuk memudahkan dalam perancangan website. Dalam antarmuka digambarkan menu menu yang ada di dalam website yang akan dibuat. 3.1.2.3.1 Struktur Menu Halaman Pengunjung
Home
Profil
Menu kategori
Cara
Produ k
Keranjan g belanja
Gallery
berita
Hubungi
Halaman Publik Pencarian Form pencarian Hasil pencarian
Produk terbaru atau best seller
Statistik User
Customer service (YM) Banner Link / Banner
Footer Gambar 3.7 Struktur Menu Halaman Pengunjung 3.1.2.3.2 Struktur Menu Halaman Administrator Gambar di bawah adalah struktur menu untuk halaman admin:
Login
Logout
Halaman Administrator
Modul
Produk
admin
View modul
Tambak produk
Tambah modul edit
Ganti Password
edit hapus
hapus
Banner
Galeri Buku tamu
Tambah Banner
View galeri
Edit
View buku tamu
Tambah photo
hapus
hapus
edit hapus
Order
Laporan
Ongkos kirim
Detail order View laporan
View Tambah
edit Kategori
footer
Cara Pembelian
hapus
YM tamba hapus edit
View file
Tambah
edit
Edit
hapus
hapus
Gambar 3.8 Struktur Menu Manajemen Admin
3.1.2.3.3
Rancangan Halaman Publik dan Halaman Admin
Halaman pengunjung atau publik merupakan tampilan di mana user/ pengunjung berinteraksi dengan sistem. Sedangkan halaman untuk administrator akan dibuat sesuai kebutuhan administrator untuk kemudahan mengatur konten yang ada di dalam website nanti.
Menu Pengunjung Left content
Isi dari website (semua proses terjadi pada kolom ini)
Right content
Footer
Gambar 3.9 Desain Halaman Publik
Header Menu admin
Isi dari menu
footer Gambar 3.10 Desain Halaman Admin 4.
Implementasi dan Pembahasan 4.1 Implementasi Implementasi
sistem
(implementation
system)
merupakan
tahap
meletakkan sistem supaya siap untuk dapat dioperasikan sesuai dengan yang diharapkan. Tujuan dari implementasi adalah menyiapkan semua kegiatan penerapan sistem sesuai dengan rancangan yang telah ditentukan.
4.2 Pembahasan Program Pembahasan dibagi menjadi dua bagian yaitu halaman pengunjung dan halaman admin. 4.2.1
Halaman Pengunjung
1. Halaman Home Halaman home menampilkan semua menu dan fitur yang meliputi: Berita terkini, produk terbaru, pencarian, menu utama, link banner, link produk best seller, dan statistik user.
Gambar 4.15 Halaman Home 4.2.2
Halaman Admin
1. Halaman Login Admin Halaman Login Admin adalah sebagai pintu masuk Admin sebelum melakukan input, edit, dan hapus data. Pada saat login, Admin wajib menuliskan username dan password dengan benar..
Gambar 4.28 Halaman Login Admin Untuk melakukan proses login menggunakan kode perintah: $login=mysql_query("SELECT * FROM admins WHERE username='$username' AND password='$pass' AND blokir='N'"); $ketemu=mysql_num_rows($login); $r=mysql_fetch_array($login); 4.3 Hasil Pengujian Sistem Setelah dilakukan pengujian web pada halaman pengunjung, maka didapatkan hasil pengujian seperti yang tercantum dalam table dibawah ini. Tabel 4.1 Hasil Uji Coba Halaman Pengunjung Halaman
Hasil Tes
Home
baik
News
baik
How to Buy
baik
Product
baik
Shoping Cart
baik
Download Katalog
baik
About
baik
Contact Us
baik
Link Banner
baik
Setelah dilakukan pengujian web pada halaman admin mengenai fungsifungsi setiap menu, maka didapatkan hasil uji coba seperti tercantum pada table dibawah ini. Tabel 4.2 Hasil Uji Coba Halaman Admin Menu
Menampilkan
Tambah
Edit
Hapus
Detail
Admin
baik
-
-
-
-
Berita
baik
baik
baik
baik
-
Produk
baik
baik
baik
baik
-
Download
baik
baik
baik
baik
-
Order
baik
-
-
-
baik
Manajemen Modul
baik
baik
baik
baik
Banner
baik
baik
baik
baik
Profil
baik
-
-
-
Ongkos Kirim
baik
baik
baik
baik
Hubungi Kami
baik
-
-
baik
Kategori Produk
baik
baik
baik
baik
Cara Pembelian
baik
-
-
-
Laporan Penjualan
baik
baik
baik
baik
YM
baik
baik
baik
baik
-
5. Kesimpulan Dengan adanya penelitian di El Shaddai Cloth dan dilakukan analisa secara mendalam pada sistem informasi untuk pejualan, maka didapat beberapa kesimpulan: •
Aplikasi web merupakan salah satu media yang tepat untuk memberikan informasi mengenai El Shaddai Cloth Yogyakarta, dan sebagai media pemasaran.
•
Dengan adanya website ini, siapa saja yang hendak mendapatkan informasi mengenai El Shaddai Cloth Yogyakarta maupun untuk membeli produk dari El Shaddai Cloth tersebut, bisa melalui web site tanpa harus mendatangi langsung UKM tersebut, hal ini akan lebih menguntungkan bagi masyarakat atau calon konsumen dan konsumen yang berada di luar Yogyakarta.
•
Apilkasi web El Shaddai Cloth Yogyakarta menjadi lebih dinamis dan animasi yang lebih menarik dengan menggabungkan PHP dan jQuery.
•
Penempatan informasi pada website ini akan mempunyai nilai informasi yang relevan karena informasi yang disampaikan bersifat up to date.
DAFTAR PUSTAKA Al Fatta Hanif.2007. Analisis & Perancangan Sistem Informasi untuk Keunggulan Bersaing Perusahaan & Organisasi Modern. Yogyakarta: Penerbit Andi. Arief Rudyanto.2006. Pemrograman Basis Data Menggunakan Transact-SQL dengan Microsoft SQL Server 2000. Yogyakarta: Penerbit Andi. Ema Utami dan Sukrisno.2007. Konsep Database dengan SQL Server, Ms. Acces, dan Ms. Visual basic. Yogyakarta: Penerbist Andi. Hartono Jogianto.1999. Pengenalan Komputer Dasar Ilmu Komputer, Pemrograman, Sistem Informasi dan Intelegensi Buatan. Yogyakarta: Penerbit Andi. Kusrini.2006.Strategi Perancangan dan Pengelolaan Basis Data. Yogyakarta: Penerbit Andi. Sunyoto Andi. 2007. Membangun Web dengan Teknologi Asyncronouse Javascript & XML.Yogyakarta: Penerbit Andi.
