membangun website penjualan dinamis dengan...

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, prosedur-

prosedur, 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 Lebih menghemat waktu

Jumlah Informasi yang disampaikan

hanya sedikit

Jumlah penyampaian informasi dapat lebih

banyak dalam satu waktu.

Area penyampaian informasi (promosi)

terbatas

Area penyampaian informasi (promosi) sangat

luas

Ruang lingkup pemasaran produk

terbatas

Ruang lingkup pemasaran produk semakin

luas

2. Analisis Informasi ( Information Analysis )

Tabel 3.2 Analisis Informasi ( Information Analysis )


Penyampaian informasi baru tidak bisa

langsung, karena harus menyesuaikan dengan

jadwal promosi (tidak “up to date”)

Penyampaian informasi baru dapat

langsung diberikan ( “up to date “ )

Informasi yang disampaikan terkadang

berbeda antara sumber yang satu dengan

yang lain ( tidak akurat )

Informasi lebih akurat, karena berasal

dari satu sumber, dan tidak ada

campur tangan pihak lain

Informasi yang diberikan terkadang tidak

berguna, bahkan sia-sia (tidak relevan)

Informasi yang disampaikan berguna

bagi calon konsumen maupan pihak

lain.

3. Analisis Ekonomi ( Economy Analysis )

Tabel 3.3 Analisis Ekonomi (Economy Analysis )


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 )


Tidak adanya proteksi

terhadap data yang ada.

Adanya penggunaan password dalam mengolah data

sehingga tidak dapat diakses orang lain.

Kontrol terhadap data tidak

terjamin

Kontrol terhadap data terjamin

5. Analisis Efisiensi ( Eficiency Analysis )

Tabel 3.5 Analisis Efisiensi ( Efficiency Analysis )


Menggunakan kertas dan alat tulis. Menggunakan sistem komputerisasi.

Sumber daya manusia yang dipakai

lebih banyak

Sumber daya manusia yang dibutuhkan lebih

sedikit

6. Analisis Service ( Service Analysis )

Tabel 3.6 Analisis Servis ( Service Analysis )


Penyampain informasi masih

menggunakan metode “person

to person “

Informasi mengenai El Shaddai Cloth Yogyakarta

dapat disampaikan secara langsung kepada

siapa saja dan dimana saja.

3.1.2 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.

A B

0

Sistem Informasi

El Shaddai

akses halaman utama

Order produk/pemesanan

Tampilan produk

Tapmpilan News

Login

Tampilan laporan

Isi/edit/hapus produk

Isi/edit/hapus kategori

C

Tampilan produk

Tapmpilan NewsAkses halaman utama

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.

Gambar 3.4 Penggambaran ERD

Berita

pengunjung

membaca

Memesan

Produk N

mengisi

N

Buku tamu

N

N

N menulis

N

Admin

Produk

Mengupdate

N

N

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 ** foreign key

Produk

id_produk* id_kategori** nama_produk deskripsi harga stok berat tgl_masuk jam gambar

id_kategori* nama_kategori

Order_detail id_order** id_produk** jumlah

kota id_kota* nama_kota ongkos_kirim

password nama_lengkap alamat telepon email

kustomer id_kustomer* id_kota**

orders id_orders* id_kustomer** status_order tgl_order jam_order

kategori

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

Gambar 3.7 Struktur Menu Halaman Pengunjung

Home Profil

Menu kategori Halaman Publik

Produk

berita

Pencarian

Produk terbaru atau best seller

Keranjang belanja

Form pencarian

Cara Gallery

Hasil pencarian

Statistik User

Banner

Hubungi

Footer

Customer service (YM)

Link / Banner

3.1.2.3.2 Struktur Menu Halaman Administrator Gambar di bawah adalah struktur menu untuk halaman admin:

Halaman Administrator

Laporan

Galeri

Buku tamu

Modul

YM

Banner

Produk

Login Logout

Tambak produk

edit

hapus

View laporan

Tambah Banner

Edit

hapus

Tambah

hapus

Edit

View buku tamu

hapus

View modul

Tambah modul

edit

hapus

View galeri

Tambah photo

edit

Cara Pembelian

View file

edit

admin

Ganti Password

hapus

hapus

Order

Detail order Ongkos kirim

View

Tambah

edit

hapusKategori

hapus

tamba

edit

footer

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.

Gambar 3.9 Desain Halaman Publik

Right content

Menu Pengunjung

Left content

Isi dari website (semua proses terjadi pada kolom ini)

Footer

Menu admin

footer

Header

Isi dari menu

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 fungsi-

fungsi 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.

membangun website penjualan dinamis dengan...

Documents