PERANCANGAN DAN PEMBANGUNAN APLIKASI ELECTRONIC MALL.

(1)

SKRIPSI

Oleh :

ALFIAH NURUL SARTIKA

0834010184

PROGRAM STUDI TEKNIK INFORMATIKA

FAKULTAS TEKNOLOGI INDUSTRI

UNIVERSITAS PEMBANGUNAN NASIONAL

(2)

SKRIPSI

Diajukan Untuk Memenuhi Sebagai Persyaratan Dalam Memperoleh Gelar Sarjana Komputer

Program Studi Teknik Informatika

Oleh :

ALFIAH NURUL SARTIKA

0834010184

PROGRAM STUDI TEKNIK INFORMATIKA

FAKULTAS TEKNOLOGI INDUSTRI

UNIVERSITAS PEMBANGUNAN NASIONAL

(3)

PERANCANGAN DAN PEMBANGUNAN APLIKASI

ELECTRONIC MALL

Disusun oleh :

ALFIAH NURUL SARTIKA

0834010184

Telah disetujui mengikuti Ujian Negara Lisan Gelombang VI Tahun Akademik 2011 / 2012

Pembimbing I

Rinci Kembang Hapsar i, S.Si, M.Kom NPT. 712 127 701

Pembimbing II

Doddy Ridwandono, S.Kom NPT. 3 7805 07 02181

Mengetahui,

Ketua Program Studi Teknik Informatika Fakultas Teknologi Industri

Universitas Pembangunan Nasional ”Veteran” Jawa Timur

(4)

PERANCANGAN DAN PEMBANGUNAN APLIKASI

ELECTRONIC MALL

Disusun Oleh :

ALFIAH NURUL SARTIKA

0834010184

Telah dipertahankan dan diterima oleh Tim Penguji Skripsi Program Studi Teknik Informatika Fakultas Teknologi Industri

Universitas Pembangunan Nasional ”Veteran” Jawa Timur Pada Tanggal 15 Juni 2012

Pembimbing : 1.

Rinci Kembang Hapsari, S.Si, M.Kom NPT. 712 127 701

Tim Penguji : 1.

Dr. Ir. Ni Ketut Sari, M.T NPT. 19650731 199203 2001

2.

Doddy Ridwandono, S.Kom NPT. 3 7805 07 02181

2.

Basuki Rahmat, S.Si, MT NPT. 36907 06 02 09 1

3.

Dian Puspita Hapsari, S.Kom, M.Kom NIP. 0729057801

Mengetahui,

Dekan Fakultas Teknologi Industri

Universitas Pembangunan Nasional ”Veteran” Jawa Timur

(5)

KETERANGAN REVISI

Kami yang bertanda tangan di bawah ini menyatakan bahwa mahasiswa berikut :

Nama : ALFIAH NURUL SARTIKA

NPM : 0834010184

Jurusan : Teknik Informatika

Telah mengerjakan revisi / tidak ada revisi*) pra rencana (design) / skripsi ujian lisan gelombang V , TA 2011/2012 dengan judul:

“PERANCANGAN DAN PEMBANGUNAN APLIKASI ELECTRONIC MALL” Surabaya, 20 juni 2012 Dosen Penguji yang memeriksa revisi

1) Intan Yuniar Purbasari, S.Kom, MSc

NPT. 3800 6040 198

{ }

2) Ir. Moch. Rochmad, MT

NIDN. 19620304 1991031 002

{ }

3) Ir. Sutiyono, MT

NIP. 19600713 198703 1001

{ }

Mengetahui, Dosen Pembimbing

Pembimbing I

Rinci Kembang Hapsar i, S.si, M.Kom. NPT. 712 127 701

Pembimbing II

(6)

PENYUSUN : ALFIAH NURUL SARTIKA

ABSTRAK

Era sekarang ini menuntut seseorang untuk serba cepat. Terutama dalam proses jual beli.Terkadang seseorang mempunyai keinginan untuk membeli sesuatu, tapi malas untuk keluar rumah membeli barang tersebut. Kemajuan era internet sekarang ini semakin mempermudah proses jual beli. Salah satunya dengan adanya mall elektronik.proses jual beli. Sehingga seseorang tidak perlu keluar rumah untuk membeli barang kebutuhannya.

Mall Elektronik ini dirancang sebagai upaya untuk mengumpulkan toko-toko individu di bawah sebuah alamat internet tunggal. Ide yang mendasari dari sebuah mal elektronik adalah sama seperti pusat perbelanjaan biasa yang menyediakan suatu tempat belanja dengan menawarkan banyak produk dan jasa. Hasil dari proses implementasi yaitu Mal Elektronik dapat digunakan sebagai pihak ketiga bagi bertemunya para penjual dan para pembeli untuk melakukan pemesanan dan transaksi penjualan maupun hanya tukar menukar informasi produk dan jasa secara online. Sehingga baik para penjual dan para pembeli tidak terikat waktu dan tempat yang berbeda. Selain itu, sistem ini juga memiliki keunggulan dalam memberikan kepercayaan kepada pembeli bahwa beberapa penjual yang sudah melakukan verifikasi maka alamat kantornya sudah valid dan benar berada di dunia nyata.

Bahasa pemrograman PHP digunakan dalam mengimplementasikan keseluruhan sistem emall ini karena memberikan kemudahan dalam membuat aplikasi web yang merupakan jembatan komunikasi antara e-mall dengan toko maupun member.

(7)

Syukur Alhamdulillaahi rabbil ‘alamin terucap ke hadirat Allah SWT atas segala limpahan Rahmat-Nya sehingga dengan segala keterbatasan waktu, tenaga, pikiran dan keberuntungan yang dimiliki, akhirnya penulis dapat menyelesaikan Tugas Akhir yang berjudul “Per a ncangan dan Pembangunan Aplikasi Electr onic Mall ” tepat waktu.

Tugas Akhir ini disusun guna diajukan sebagai salah satu syarat untuk menyelesaikan program Strata Satu (S1) pada jurusan Teknik Informatika, Fakultas Teknologi Industri, UPN ”VETERAN” Jawa Timur.

Dalam penyusunan Tugas akhir ini, Penulis berusaha untuk menerapkan ilmu yang telah didapat selama menjalani perkuliahan dengan tidak terlepas dari petunjuk, bimbingan, bantuan, dan dukungan berbagai pihak.

Dengan tidak lupa akan kodratnya sebagai manusia, Penulis menyadari bahwa dalam karya tugas akhir ini masih mengandung kekurangan sehingga dengan segala kerendahan hati, Penulis masih akan tetap terus mengharapkan saran serta kritik yang membangun dari rekan-rekan pembaca.

Surabaya, 5 Juni 2012

(8)

Puji syukur ke hadirat Allah SWT yang telah memberikan rahmat dan karunia-Nya, sehingga dapat terselesaikannya Tugas Akhir ini.

Dengan selesainya tugas akhir ini tidak terlepas dari bantuan banyak pihak yang telah memberikan masukan-masukan. Untuk itu penyusun mengucapkan terima kasih sebagai perwujudan rasa syukur atas terselesaikannya tugas akhir ini dengan lancar. Ucapan terima kasih ini saya tujukan kepada :

1. Bapak Prof. Dr. Ir. Teguh Soedarto, MP selaku Rektor Universitas Pembangunan Nasional “Veteran” Jawa Timur.

2. Bapak Sutiyono, MT selaku Dekan Fakultas Teknologi Industri UPN “Veteran” Jawa Timur.

3. Dr. Ir. Ni Ketut Sari, MT selaku Ketua Jurusan Teknik Informatika UPN “Veteran” Jawa Timur.

4. Ibu Rinci Kembang Hapsari, S.Si, M.Kom selaku dosen pembimbing I pada Tugas Akhir ini, yang telah banyak memberikan petunjuk, masukan, bimbingan, dorongan serta kritik yang bermanfaat sejak awal hingga terselesainya Tugas Akhir ini. Sekali lagi terima kasih banyak dan tidak akan saya lupkan jasa - jasa ibu rinci.

5. Bapak Doddy Ridwandono, S.Kom selaku dosen pembimbing II yang telah banyak memberikan petunjuk, masukan serta kritik yang bermanfaat hingga terselesainya Tugas Akhir ini.

(9)

aku bisa membuat kalian bangga denganku. Terimakasih buat mbak nofi dan mbak chusnul yang paling aku sayangi (meskipun aku sadar terkadang suka nyebelin kalian.hehehehe…), terima kasih selalu memberi support dan sudah sayang sekali denganku. Terima kasih juga buat mbah, om, tante, mas baruku (mas harun), sepupu-sepupuku, dan keluarga besarku terima kasih banyak sudah mau direpotkan selama aku di Surabaya.

(10)

kebaikan dan bantuan tersebut.

Surabaya, 5 Juni 2012

(11)

Halaman LEMBAR PENGESAHAN

ABSTRAK ... i

KATA PENGANTAR ... ii

UCAPAN TERIMA KASIH ... iii

DAFTAR ISI ... vi

DAFTAR GAMBAR ... x

DAFTAR TABEL ... xvi

BAB I PENDAHULUAN ... 1

1.1 Latar Belakang... 1

1.2 Perumusan Masalah ... 2

1.3 Batasan Masalah ... 3

1.4 Tujuan ... 3

1.5 Manfaat ... 4

1.6 Metodologi ... 4

1.7 Sistematika Penulisan ... 5

BAB II TINJAUAN PUSTAKA ... 7

2.1 Electronic Mall (E-Mall) ... 7

2.1.1 Kategori Electronic Mall ... 7

2.1.2 Kelemahan dan Kelebihan E-Mall... 8

2.2 Konsep Dasar Sistem Informasi ... 9

2.3 Pengertian Penjualan ... 9

(12)

2.6.1 Alir Dokumen (Document Flowchart)... 12

2.6.2 Sistem Flowchart (Flowchart System) ... 13

2.6.3 Diagram Berjenjang ... 15

2.6.4 Kontek Diagram ... 16

2.6.5 Data Flow Diagram (DFD)... 17

2.6.6 Cardinality Ratio... 20

2.7 Bahasa Pemrograman PHP... 21

2.8 Server Web Apache ... 23

BAB III ANALISA DAN PERANCANGAN SISTEM ... 25

3.1 Analisa Sistem ... 25

3.2 Perancangan Sistem ... 27

3.2.1 Deskripsi Umum Sistem ... 27

3.2.2 Flowchart... 28

3.2.3 Diagram Berjenjang ... 31

3.2.4 Diagram Konteks ... 32

3.2.5 Data Flow Diagram (DFD) Level 1 ... 33

3.2.6 Data Flow Diagram (DFD) Level 2 ... 35

3.3 Perancangan Database ... 38

3.3.1 CDM (Conceptual Data Model) ... 38

3.3.2 PDM (Physical Data Model) ... 38

3.4 Perancangan Antarmuka ... 41

3.4.1 Desain Halaman Utama ... 41

(13)

4.1 Implementasi Tabel... 44

4.2 Implementasi WEB ... 50

4.3 Interface ... 51

4.3.1 Halaman Registrasi ... 52

4.3.2 Halaman Login ... 54

4.4 Toko Interface ... 57

4.4.1 Halaman Daftar Produk ... 57

4.4.2 Lihat Order ... 61

4.4.3 Halaman Pengaturan Akun... 63

4.5 Member Interface... 63

4.5.1 Halaman Shopping Cart ... 64

4.5.2 Halaman Checkout Order ... 65

4.5.3 Halaman History Pembelanjaan ... 66

4.5.4 Halaman Pengaturan Akun... 68

4.6 Admin Interface ... 68

4.6.1 Halaman Login ... 68

4.6.2 Halaman Utama Administrator... 71

4.6.3 Halaman Kategori ... 71

4.6.4 Halaman Sub Kategori ... 73

4.6.5 Halaman Lihat Order ... 76

4.6.6 Halaman Ongkos Kirim ... 76

4.6.7 Halaman Data Toko ... 78

(14)

5.1 Pengujian Member Interface ... 86

5.2 Pengujian Toko Interface ... 92

5.3 Pengujian Admin Interface... 97

5.3.1 Menu Kategori ... 98

5.3.2 Menu Sub Kategori ... 100

5.3.3 Menu Lihat Order ... 102

5.3.4 Menu Ongkos Kirim ... 103

5.3.5 Menu Data Toko ... 105

5.3.6 Menu Data Member ... 107

5.3.7 Menu Data Admin ... 109

BAB VI PENUTUP ... 112

6.1 Kesimpulan... 112

(15)

BAB I

PENDAHULUAN

1.1 Latar Belaka ng

Perkembangan internet menyebabkan terbentuknya sebuah dunia baru yang lazim disebut dunia maya. Di dunia maya ini setiap individu memiliki hak dan kemampuan untuk berinteraksi dengan individu lain tanpa batasan apapun yang dapat menghalanginya. Sehingga globalisasi yang sempurna sebenarnya telah berjalan di dunia maya yang menghubungkan seluruh komunitas digital. Dari seluruh aspek kehidupan manusia yang terkena dampak kehadiran internet, sektor bisnis merupakan sektor yang paling terkena dampak dari perkembangan teknologi informasi dan telekomunikasi serta paling cepat tumbuh. Semakin padatnya aktifitas dan kegiatan sehari-hari membuat orang-orang beralih pada sesuatu yang mudah dan simple, bahkan saat berbelanja. Internet, media informasi yang juga memfasilitasi kegiatan belanja, menawarkan berbagai macam pilihan untuk konsumen dalam berbelanja. Sebuah situs perusahaan dagang atau jasa biasa menawarkan produk mereka atau mereka akan bergabung pada sebuah “pasar” yang memuat berbagai macam situs unit bisnis. Pasar ini sering disebut e-mall atau electronic mall.

(16)

kurir [7]. Dengan kata lain, E-mall adalah web site yang menampilkan katalog elektronik maupun barang-barang lainnya dari beberapa pemasok, dan biaya komisi dari mereka untuk pendapatan penjualan dihasilkan di situs tersebut.

Seiring dengan kebutuhan tersebut situs-situs e-mall sudah ada yang menyajikan kategori barang-barang yang dijual dan berasal dari pengunjung yang memasukkan data akan barangnya namun beberapa situs ini ada yang memiliki kelemahan karena transaksi tidak dapat dilakukan secara langsung dari website yang dimiliki oleh e-mall karena kategori tersebut hanya sebagai iklan yang bersumber dari toko-toko online atau input dari user. Dari kacamata pengunjung yang ingin membeli atau sekedar melihat produk diperlukan suatu e-mall yang menyajikan informasi yang lengkap tentang barang-barang yang terjual dan tentunya bersumber dari toko yang mendaftar pada e-mall. Informasi ini harus terstruktur, dalam arti tersusun suatu katalog dari barang-barang yang terjual dan bersumber dari semua toko. Selain itu, customer juga ingin melakukan pernbelian pada e-mall secara mudah. Customer membutuhkan e-mall yang tidak hanya iklan produk atau sekedar link suatu toko [6].

1.2 Per umusan Masalah

Berdasarkan latar belakang masalah yang telah diuraikan diatas, maka ditarik suatu rumusan masalah sebagai berikut:

1. Bagaimana membangun aplikasi e-mall ini dengan menggunakan PHP.

(17)

1.3 Batasan Masalah

Dalam menganalisa dan menyelesaikan suatu masalah, maka perlu diberikan pembatasan atau ruang lingkup pembahasan. Adapun batasan - batasan masalah adalah sebagai berikut :

1. Pada aplikasi e-mall ini biaya pengiriman sesuai dari perusahaan ekspedisi yang menangani pengiriman barang.

2. Aplikasi yang dibuat merupakan e-mall khusus yang menjual produk elektronik.

3. Sistem yang dibuat tidak mencakup sistem pembagian keuangan antara toko-toko yang terlibat pada e-mall. E-mall membutuhkan data nomor rekening dari setiap toko yang terdaftar sehingga e-mall dapat melakukan transfer rekening secara konvensional di luar sistem ini untuk menangani pembagian keuangan yang didapat karena adanya pembelian dari customer.

4. Di dalam perancangan pembuatan aplikasi e-mall ini menggunakan bahasa pemrograman PHP dengan database MySQL.

1.4 Tujuan

Tujuan yang ingin dicapai dalam tugas akhir ini adalah:

1. Menyediakan fasilitas bagi pengunjung untuk membeli produk yang dijual oleh e-mall dan bersumber dari semua toko yang terdaftar padanya.

(18)

1.5 Manfaat

Adapun manfaat yang akan diperoleh adalah:

1. Dengan adanya e-mall dapat langsung memasarkan produk tanpa harus melalui perantara, sehingga dapat meminimalisir biaya promosi.

2. Menghemat waktu, biaya dan tenaga. Karena dengan e-mall, konsumen akan mudah mendapatkan apa yang diinginkan hanya dengan mengakses dengan internet. Tanpa mencari lokasi toko, konsumen bisa langsung memesan apa yang dibutuhkan.

1.6 Metodologi

Metodologi yang digunakan dalam Tugas Akhir ini adalah sebagai berikut: 1. Studi Literatur

Mencari dan mempelajari segala macam informasi secara kepustakaan tentang e-mall. Dalam tahap ini pula saya mempelajari teknologi dan cara pengimplementasian dalam bahasa pemrograman PHP.

2. Pengumpulan Data

Pengumpulan data dilakukan dengan cara identifikasi dan klarifikasi melalui studi literatur. Dari pengumpulan data tersebut dapat dilakukan analisa data. 3. Pengembangan Konsep dan Desain Sistem

Pada tahap ini, proses dominan yang dilakukan adalah merancang dan membuat arsitektur database, dimana pada database tersebut dapat menyimpan informasi dan data yang diperlukan guna menunjang berjalannya sebuah sistem informasi atau perangkat lunak yang dibuat.

(19)

Pada tahap ini setelah database terbentuk maka dibuat dan dirancang sebuah sistem informasi yang nantinya sistem ini dapat berguna dan dimanfaatkan oleh user. Pada perancangan dan pembuatan sistem ini menggunakan tools tertentu yang sesuai dengan sistem yang dibuat

5. Uji Coba

Tahap akhir dari pembuatan sistem ini adalah uji coba, dimana sistem akan melewati tahap pengujian apakah mampu berjalan dengan baik sesuai tujuan ataukah masih perlu adanya perbaikan sehingga dapat digunakan oleh pengguna secara efektif.

6. Dokumentasi

Dokumentasi berupa penulisan laporan tugas akhir sudah dilakukan sejak awal penelitian. Hasil laporan tiap bab penyusun merupakan keluaran (deliverables) tertulis dari setiap tahapan penelitian.

1.7 Sistematika Penulisan

Dalam dokumentasi laporan tugas akhir ini, pembahasan disajikan dalam enam bab dengan sitematika pembahasan sebagai berikut :

BAB I PENDAHULUAN, Bab ini berisikan tentang latar belakang masalah, perumusan masalah, batasan masalah, tujuan, manfaat, dan sistematika penulisan pembuatan tugas akhir ini.

(20)

BAB III ANALISA DAN PERANCANGAN SISTEM, Bab ini dijelaskan tentang tata cara perancangan sistem yang digunakan untuk mengolah sumber data yang dibutuhkan sistem antara lain : Perancangan perangkat keras, perancangan perangkat lunak, seperti pada Flowchart , Diagram Berjenjang, Diagram Konteks, DFD, dan perancangan server data

BAB IV IMPLEMENTASI SISTEM, Pada bab ini menjelaskan implementasi dari program yang telah dibuat meliputi lingkungan implementasi , implementasi proses dan implementasi antarmuka.

BAB V UJ I COBA DAN EVALUASI, Pada bab ini menjelaskan tentang pelaksanaan uji coba dan evaluasi dari pelaksanaan uji coba dari program yang dibuat.

BAB VI PENUTUP, Bab ini berisi kesimpulan dan saran dari penulis untuk pengembangan sistem .

DAFTAR PUSTAKA, Pada bagian ini akan dipaparkan tentang sumber-sumber literatur yang digunakan dalam pembutan laporan tugas akhir ini .

(21)

TINJ AUAN PUSTAKA

2.1 Elektr onik Mall (E-Mall)

Elektronik mall adalah sebuah situs yang berisi sejumlah vendor yang menjaga halaman web di situs. Mall tersebut dapat menyerupai mall nyata dengan berbagai e-commerce perusahaan yang menjual produk atau jasa atau mereka dapat menjadi operasi khusus dimana vendor berkonsentrasi pada satu bidang tertentu seperti barang olahraga atau kosmetik. Kadang-kadang istilah ini digunakan untuk menggambarkan koleksi berbasis web penyedia layanan daripada vendor produk [5].

Secara teori, e-mall hampir serupa dengan dunia mall yang sebenarnya, sebuah kelompok toko dalam satu tempat lokasi. Saat memasuki situs e-mall disana akan ditemukan serangkaian produk yang dapat dilihat, dicari dan dipilih secara visual. Karena tidak semua barang bisa di browse dalam satu page, maka biasanya untuk dapat menemukan barang yang diperlukan oleh konsumen, penjual menampilkan katalog yang dibuat berdasarkan kategori tertentu, misalnya berdasarkan harga, jenis produk, lokasi dimana customer berada, dan sebagainya [8].

2.1.1 Kategor i E-Mall [9]

(22)

1. E-mall general (umum) merupakan e-mall yang menyediakan berbagai macam produk untuk dijual pada situsnya. E-mall mempunyai market yang luas bila dilihat dari barang atau produk yang dijual. E-mall General adalah marketspace yang besar yang menjual tipe produk.

2. E-mall khusus adalah e-mall yang hanya menjual satu jenis barang atau lebih spesifik ke satu jenis barang yang ditawarkan.

2.1.2 KELEBIHAN DAN KEKURANGAN E-MALL [10] Kelebihan E-mall, yaitu:

1. Akses luas. Dengan terhubung lewat internet maka dapat mengkses semua barang yang diinginkan yang ditawarkan di internet tersebut serta waktu yang tidak terbatas. Karena pada waktu kapan pun asalkan kita terhubung dengan internet, kita bisa mengaksesnya tanpa ada batasan hari libur atau semacamnya.

2. Hemat. Hemat meliputi hemat waktu, biaya, dan tenaga. Karena dengan E-mall kita sebagai konsumen akan mudah mendapatkan apa yang kita inginkan hanya dengan mengakses internet. Tanpa mencari lokasi toko kita bisa langsung memesan apa yang kita butuhkan.

Kekurangan E-mall, yaitu:

(23)

2. Keamanan. Karena biasanya pembayaran dilakukan dengan mentransfer sejumlah uang ke nomor rekening tertentu, hal ini bisa dimanfaatkan pihak yang bertanggung jawab untuk menyalahgunakan hal tersebut.

2.2 Konsep Dasar Sistem Infor masi

Suatu sistem dalam suatu organisasi yang merupakan kombinasi dari orang-orang, fasilitas, teknologi, media, prosedur-prosedur dan pengendalian 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.

Definisi menurut Jogiyanto (2005:11), menyebutkan bahwa: “Sistem informasi adalah suatu sistem di dalam suatu organisasi yang mempertemukan kebutuhan pengolahan transaksi harian, mendukung operasi, bersifat manajerial dan kegiatan strategi dari suatu organisasi dan menyediakan pihak luar tertentu dengan laporan-laporan yang diperlukan” [4].

2.3 Penger tian Penjualan

(24)

1. Penjualan kredit yaitu penjualan barang yang dilakukan dengan cara mengirim barang sesuai dengan pesanan dari pembeli dan tidak ada pembayaran langsung yang terjadi dalam jangka waktu tertentu tetapi pihak perusahaan yang menjual mempunyai tugas untuk memberikan tagihan pada pembeli tersebut.

2. Penjualan tunai yaitu apabila perusahaan tersebut menjual produknya sesuai langsung pada pembeli dan dibayar pada saat itu juga oleh pembeli.

Pengertian penjualan menurut “American Marketing Association” ditetapkan sebagai berikut: Proses pemberian bantuan persuasi secara pribadi atau non pribadi agar membeli suatu komoditi atau jasa agar bertindak yang menguntungkan suatu gagasan atau ide yang mengandung arti komersial bagi penjual.

Dari pemikiran diatas maka diambil kesimpulan bahwa yang dimaksud dengan sistem penjualan adalah pola hubungan antar bagian-bagian yang saling berkaitan untuk melakukan kegiatan yaitu memproses data penjualan sehingga menghasilkan informasi yang cepat, tepat dan akurat sehingga memuaskan kedua belah pihak baik pembeli maupun penjual.

2.4 Mekanisme Tr ansaksi Pada E-Mall

Pembeli yang akan berbelanja di toko online dapat menggunakan fasilitas shopping cart. Shopping cart adalah sebuah software di situs web yang

(25)

saat melakukan check out (Tim Penelitian dan Pengembangan Wahana Komputer Yogyakarta, 2006).

Konsep shopping cart ini meniru kereta belanja yang biasanya digunakan orang untuk berbelanja di pasar swalayan. Shopping cart biasanya berupa formulir dalam web dan dibuat dengan kombinasi CGI (Common Gateway Interface), database, dan HTML (Hyper Text Markup Language), dimana barang-barang yang dimasukkan ke shopping cart masih dapat dibatalkan, jika pembeli berniat untuk membatalkan membeli barang tersebut. Jika pembeli ingin mambayar untuk barang yang dipilih, maka pembeli harus mengisi form transaksi. Biasanya form ini menanyakan identitas pembeli. Setelah pembeli mengadakan transaksi, barang akan dikirimkan melalui jasa pos/jasa pengiriman lain langsung ke alamat pembeli.

2.5 Mekanisme Pembayar an Pada E-Mall

Menurut Onno W. Purbo, (2001:1), bentuk atau cara pembayaran yang digunakan di internet umumnya bertumpu pada sistem keuangan nasional, tapi ada juga beberapa yang mengacu kepada keuangan local atau masyarakat. Adapun klasifikasi berbagai mekanisme pembayaran tersebut dapat kita bagi dalam lima (5) mekanisme utama, seperti:

1. Transaksi model-ATM, yang menyangkut hanya institusi financial dan pemegang account yang akan melakukan pengambilan atau mendeposit uangnya dari account masing-masing.

(26)

3. Pembayaran dengan perantaraan pihak ke-tiga, umumnya proses pembayaran yang menyangkut debit, kredit maupun check masuk dalam kategori ini. 4. Micropayment, dalam bahasa sederhananya adalah pembayaran untuk uang

recehan kecil-kecil. Mekanisme micropayment ini penting dikembangkan karena sangat diperlukan pembayaran receh yang kecil tanpa overhead transaksi yang tinggi.

5. Anonymous digital cash, uang elektronik yang di enkripsi, didahului oleh David Chaum dengan Digicash-nya. Uang elektronik menjamin privasi dari user cash tetap terjamin sama seperti uang kertas maupun koin yang kita

kenal.

2.6 Kebutuhan-Kebutuhan Sistem

2.6.1 Alir Dokumen ( Document Flowchart )

Bagan alir dokumen (Document flowchart) atau disebut juga bagan alir formulir (Form flowchart) atau paperwork flowchart merupakan bagan alir yang menunjukkan arus dari laporan dan formulir termasuk tembusan-tembusannya.

(27)

pemakaian formulir adalah untuk memudahkan suatu arus, proses dan analisa, yaitu berupa :

1) Penyusunan data.

2) Meminimumkan waktu pencatatan dan penghapusan penulisan data konstan.

3) Memungkinkan kontrol terhadap kegiatan. 4) Mengurangi terjadinya kesalahan tulis menulis.

5) Menyampaikan informasi penting dari satu orang ke orang lain baik dalam suatu organisasi maupun antar organisasi.

2.6.2 Sistem Flowchar t ( Flowchart System )

Sistem flowchart merupakan alat bantu yang banyak digunakan untuk menggambarkan sistem secara phisik dengan simbol-simbol bagan alir yang menunjukkan secara tepat arti phisiknya seperti simbol : terminal, hard disk, laporan dan lain-lainnya.

Adapun simbol-simbol standar yang digunakan untuk membuat bagan alir adalah sebagai berikut :

Tabel 2.1 Simbol-Simbol Flowchart

(28)

Simbol Kegiatan Manual

Simbol ini digunakan untuk menggambarkan kegiatan manual.

Simbol Operasi Luar Simbol ini menunjukkan operasi yang dilakukan diluar komputer

Simbol Arsip Sementara Simbol ini digunakan untuk menggambarkan tempat penyimpanan dokumen yang dokumennya akan diambil kembali dari arsip tersebut dimasa yang akan datang untuk keperluan pengolahan lebih lanjut terhadap dokumen tersebut urutan pengarsipan dokumen digunakan simbol berikut :

A : menurut Abjad

N : menurut Nomor Urut T : menurut Tanggal

Simbol Penghubung

(29)

yang memungkinkan aliran dokumen berhenti disuatu lokasi pada halaman tertentu dan kembali berjalan dilokasi lain pada halaman yang sama.

Simbol Penghubung

Penghubung pada halaman yang berbeda. Dalam menggambarkan bagan alir dokumen dibuat mengalir dari atas ke bawah dan dari kiri kekanan. Karena keterbatasan ruang halaman kertas untuk menggambarkan maka diperlukan simbol penghubung yang memungkinkan aliran dokumen berhenti disuatu lokasi pada halaman tertentu dan kembali berjalan dilokasi lain pada halaman yang berbeda.

Simbol Terminal

Simbol ini digunakan untuk menggambarkan awal dan akhir suatu sistem.

Simbol Keputusan

Simbol ini menggambarkan keputusan yang harus dibuat dalam proses pengolahan data.

2.6.3 Diagram Ber jenjang

(30)

Berikut adalah contoh gambar dari diagram berjenjang:

Gambar 2.1 Diagram Berjenjang 2.6.4 Kontek Diagr am

Model diagram konteks menjabarkan tentang aktor-aktor yang terlibat dalam suatu konteks informasi, serta dinamika informasi yang terjadi antar aktor-aktor tersebut. Pada model ini tergambar organisasi yang bersangkutan, dan dengan siapa saja organisasi ini berhubungan secara informasi. Kemudian hubungan itu dirinci dalam soal apa saja informasi dan sifat informasinya.

Model ini kemudian menjadi peta tentang alur informasi di seputar organisasi tersebut. Karena pihak-pihak yang digambarkan adalah fihak luar organisasi maka pada tahap pertama yang dihasilkan adalah analisis eksternal. Namun demikian kemudian dari yang eksternal dapat dibangun model yang sama untuk versi internal.

Bagi Ornop yang terbiasa dengan alat bernama stakeholder analysis, maka pihak pihak eksternal ini dapat dipungut dari hasil stakeholder analysis kalau memang sudah ada.

(31)

dari diagram konteks, adalah Diagram Aliran Data atau (Data Flow Diagram/DFD).

2.6.5 Data Flow Diagram (DFD)

DFD merupakan penggambaran sistem yang menggunakan bentuk simbol untuk menggambarkan aliran data dalam suatu proses yang saling berhubungan(McLeod, Jr., Schell, 1979). Beberapa simbol yang dipergunakan untuk menggambarkan sistem antara lain:

1) External entity, merupakan kesatuan di lingkungan luar sistem yang akan mempengaruhi sistem, dengan memberikan input atau menerima output dari sistem. External entity dapat berupa:

a) orang atau sekelompok orang dalam organisasi tetapi di luar sistem yang sedang dikembangkan

b) organisasi atau orang yang berada di luar organisasi

c) kantor atau divisi dalam perusahaan tetapi di luar sistem yang sedang dikembangkan

d) sistem informasi lain di luar sistem yang sedang dikembangkan e) sumber asli dari suatu transaksi

f) penerima akhir dari suatu laporan yang dihasilkan oleh sistem.

entitas

Gambar 2.2 External entity

(32)

data store yang saling berpotongan, maka external entity dapat digambarkan >1 kali untuk satu nama, yang disebut repeated external entity.

Gambar 2.3 Repeated external entity

3) Data flow, disimbolkan dengan tanda panah dimana arah panah menunjukkan arah mengalirnya data. Data flow mengalir menuju proses atau meninggalkan proses. Data flow yang meninggalkan external entity selalu menuju ke proses. Data flow dapat berupa:

a) masukan untuk sistem atau hasil dari proses sistem dan dapat berbentuk formulir atau dokumen yang digunakan sistem

b) laporan tercetak yang dihasilkan sistem c) masukan untuk komputer

d) output ke layar monitor

e) data yang dibaca dari suatu file atau yang direkam ke suatu file f) komunikasi ucapan

g) surat atau memo

h) suatu isian yang dicatat pada buku agenda

Arus data diberi nama yang jelas dan bermakna (meaningfull) yang dapat mewakili data yang mengalir.

Gambar 2.4 Data Flow

Nama _{external entity}

(33)

4) Process, Adalah kegiatan yang dilakukan oleh orang, mesin, atau komputer dari hasil suatu arus data yang masuk ke proses dan akan dihasilkan arus data yang keluar dari proses.

Process

Gambar 2.5 Process

5) Data storage, Merupakan simpanan dari data yang dapat berupa: a) File atau database di sistem komputer

b) Arsip atau catatan manual

c) Kotak tempat data di meja seseorang d) Tabel acuan buku

e) Suatu agenda atau buku.

storage

Gambar 2.6 Data stroge

6) Repeated Data Storage, Untuk menghindari keruwetan diagram, karena banyaknya garis penghubung antar data storage, external entity, process, maupun data storage yang saling berpotongan, maka data storage dapat digambarkan lebih dari satu buah untuk satu nama yang disebut repeated data storage.

Gambar 2.7 Repeated Data Strage Nama _data

(34)

2.6.6 Car dinality Ratio

Dalam penggambaran ER-diagram juga diperlukan cardinality rasio yaitu notasi yang menunjukan banyaknya relasi yang terjadi antar enitas. Disamping itu cardinality rasio juga untuk membantu gambaran relasi secara lengkap.Terdapat tiga macam relasi dalam hubungan atribut dalam satu file, relasi dari data dapat berupa:

1) Hubungan satu ke satu (one to one), dimana satu anggota entitas hanya berhubungan dengan satu anggota entitas yang lain

2) Hubungan satu ke banyak (one to many), dimana satu anggota entitas berhubungan lebih dari satu dengan anggota entitas yang lain.

3) Hubungan banyak ke banyak (many to many), dimana satu anggota entitas berhubungan lebih dari satu dengan anggota entitas yang lain serta sebaliknya Pada tools PowerDesigner yang digunakan penulis dalam perancangan dan pembuatan sistem, simbol–simbol yang digunakan pada ER diagram konvensional berbeda dengan simbol–simbol yang digunakan oleh tools PowerDesigner. Pada tabel dibawah ini merupakan simbol–simbol ER diagram yang digunakan oleh penulis dalam pembuatan sistem dengan menggunakan tools PowerDesigner

Tabel 2.2 Simbol ER Diagram (PowerDesigner)

Simbol Keter angan

Simbol entitas, “Ent_1” merupakan nama dari entitky.

(35)

Simbol one to one relationship, “Relation_11” Merupakan nama dari relationship

Simbol one to many relationship, “Macam dana” Merupakan nama dari relationship

Simbol many to many relationship, “Melaksanakan” Merupakan nama dari relationship

2.7 Bahasa Pemr ograman PHP

PHP adalah bahasa server-side scripting yang menyatu dengan HTML untuk membuat halaman web yang dinamis. Maksud dari server-side scripting adalah sintaks dan perintah-perintah yang diberikan akan sepenuhnya dijalankan di server tetapi disertakan pada dokumen HTML. Pembuatan web ini merupakan kombinasi antara PHP sendiri sebagai bahasa pemrograman dan HTML sebagai pembangun halaman web. Ketika seorang pengguna internet akan membuka suatu situs yang menggunakan fasilitas server-side scripting PHP, maka terlebih dahulu server yang bersangkutan akan memproses semua perintah PHP di server lalu mengirimkan hasilnya dalam format HTML ke web browser pengguna internet tadi. Dengan demikian seorang pengguna internet tidak dapat melihat kode ‘ program yang ditulis dalam PHP sehingga keamanan dari halaman web menjadi lebih terjamin.

Tetapi tidak seperti ASP yang juga cukup dikenal sebagai server-side scripting, PHP merupakan software yang Open Source (gratis) dan mampu lintas

(36)

PHP mampu berjalan di Windows dan beberapa versi Linux. PHP juga dapat dibangun sebagai.modul pada web server Apache dan sebagai binary yang dapat berjalan sebagai CGI.

PHP dapat mengirim HTTP header, dapat mengeset cookies, mengatur authentication dan redirect users. PHP menawarkan koneksitas yang baik dengan

beberapa basis data, antara lain Oracle, Sybase, mSQL, MySQL, Solid, PostgreSQL, Adabas. File.Pro, Velocis, dBase, Unix dbm dan tak terkecuali semua database ber-interface ODBC. Juga dapat berintegrasi dengan beberapa library eksternal yang membuat Anda dapat melakukan segalanya mulai dari membuat dokumen PDF hingga mempurse XML. PHP juga mendukung komunikasi dengan layanan lain melalui protokol IMAP, SNMP, NNTP, POP3 atau bahkan HTTP. Bila PHP berada dalam halaman web Anda, maka tidak lagi dibutuhkan pengembangan lingkungan khusus atau direktori khusus. Hampir seluruh aplikasi herbasis web dapat dihuat dengan PIIP. Namun kekuatan utama adalah konektivitas basis data dengan web. Dengan kemampuan ini kita akan mempunyai suatu sistem basis data yang dapat diakses dari web.

(37)

banyak ditonjolkan adalah pengolahan data sehingga dibutuhkan kemampuan dalam pemrograman web.

2.8 Ser ver Web Apache

Apache merupakan web server yang digunakan untuk mengcompile bahasa PHP . Program ini pertama kali didesain untuk sistem operasi lingkungan UNIX. Namun demikian, pada beberapa versi berikutnya Apache mengeluarkan programnya yang dapat dijalankan di Windows NT.

Berdasarkan sejarahnya, Apache dimulai oleh veteran developer NCSA httpd (National Center for Supercomputing Application). Saat itu pengembangan NCSA httpd sebagai web server mengalami stagnasi. ROB MC COOL meninggalkan NCSA dan memulai sebuah proyek baru bersama para webmaster lainnya, menambal bug, dan menambahkan fitur pada NCSA httpd.

(38)

XAMPP merupakan tool yang menyediakan paket perangkat lunak ke

(39)

3.1 Analisa Sistem

Analisa adalah kegiatan dalam mempelajari suatu bentuk permasalahan atau kasus yang terjadi. Dalama analisa sistem ini, menjelaskan mengenai analisa dari sistem yang dibuat. Sistem ini bertujuan untuk memberikan informasi data produk, penjualan produk, dan pemesanan produk-produk dari elektronik mall yang dapat digunakan untuk memudahkan transaksi penjualan secara online.

Gambar 3.1 Komunikasi antara E-mall, Customer, dan Toko

Peran aktif yang bisa dilakukan oleh ketiga komponen gambar 3.1 diwujudkan dalam suatu hak akses (privileges). Hak akses untuk masing-masing komponen antara lain:

1. E-Mall (admin)

Admin dapat menggunakan fasilitas yang disediakan oleh sistem melalui web browser. E-mall disini berperan sebagai pengendali atau administrator dari suatu web (admin). Hak akses yang dimiliki adalah:

a. Menginputkan, menampilkan dan menghapus kategori, subcategori, member dan toko

b. Memiliki semua hak akses atas toko dan customers list c. Memiliki semua hak akses atas shop list

d. Memiliki semua hak akses atas order list E-Mall

Member

(40)

e. Sebelum dapat menggunakan layanan tersebut, admin diwajibkan untuk login terlebih dahulu. Login dilakukan untuk menjaga keamanan data-data

yang ada. 2. Customers

Customers (member) dapat menggunakan fasilitas yang disediakan oleh

sistem melalui web browser. Untuk bisa menggunakan fasilitas tersebut, customer harus melakukan registrasi terlebih dahulu agar dapat menjadi member sehingga bisa melakukan login karena bila tidak melakukan login, maka fasilitas yang diberikan hanya dapat melihat katalog produk saja (non member). Dalam mengisi form registrasi, data yang diisi oleh customer harus valid karena bila diisi asal-asalan maka admin berhak menonaktifkan data customer. Hak akses yang dimiliki member (dengan status aktif) adalah:

a. Melihat-lihat katalog produk

b. Melakukan registrasi untuk login sehingga bisa menggunakan menu member.

c. Melakukan shopping cart / kereta belanja. Fasilitas dalam shopping cart sendiri meliputi: customers bisa melakukan update terhadap jumlah produk yang ingin dibeli dan bisa membatalkan pembelian dengan cara menghapus produk yang ada dalam keranjang belanjanya.

d. Melakukan order (pemesanan) produk, dan mendapatkan informasi pemesanan.

e. Melihat sejarah order/order history.

(41)

3. Toko/Owner

Sebelum menjadi anggota dari electronic mall, owner harus mendaftar akun terlebih dahulu dan memenuhi persyaratan sebagai anggota. Hak akses yang dimiliki oleh sebuah toko/owner yaitu:

a. Menginputkan, mengubah dan menghapus produk yang akan dijual b. Mempunyai hak untuk mengubah harga produk sewaktu-waktu c. Melihat order yang dilakukan oleh customer

d. Melakukan perubahan account misalnya perubahan password

3.2 Per ancangan Sistem

Perancangan sistem membahas mengenai konsep dari sistem yang akan dibangun untuk memenuhi kebutuhan kepada pengguna sistem dan memberikan gambaran secara umum dan jelas kepada user tetang sistem E-mall. Desain sistem secara umum merupakan persiapan dari desain dan mengidentifikasi komponen-komponen sistem yang akan didesain secara detail. Dalam melakukan perancangan sistem, maka ada dua model yang dipergunakan dalam melakukan desain sistem yaitu process modeling dengan menggunakan Data Flow Diagram (DFD) dan perancangan database menggunakan Conceptual Data Model (CDM) dan Physical Data Model (PDM)

3.2.1 Deskr ipsi Umum Sistem

Deskripsi umum sistem berdasarkan gambar 3.2 adalah sebagai berikut: a) User membutuhkan koneksi internet jika ingin memilih produk atau

(42)

b) Setelah user memilih produk yang diinginkan, konfirmasi ditangani oleh petugas

c) Petugas mengurus konfirmasi barang atau produk pesanan user, user diharuskan konfirmasi melalui email

d) Setelah petugas mengecek konfirmasi melalui email dan transaksi lewat atm e) Setelah transaksi dinyatakan selesai, barang dikirim melalui jasa pengiriman,

dalam hal ini jasa pengiriman merupakan pihak ketiga

f) Jasa pengiriman yang bertanggungjawab atas pengiriman produk hingga sampai ke tempat tujuan.

g) Tempat tujuan merupakan alamat dari user yang memesan barang.

Gambar 3.2 Mekanisme Electronic Mall

3.2.2 Flowchar t

Diagram alur menjelaskan gambaran umum mengenai sistem aplikasi web yang dibuat. Dalam sistem ini ada tiga interface, yaitu:

1. Admin

(43)

menghapus data yang ada pada database. Berikut ini flowchart dari admin seperti pada gambar 3.3.

Gambar 3.3 Flowchart Admin

2. Toko/Owner

(44)

sehingga bisa melakukan login dan mendapatkan hak akses untuk melakukan penjualan online. Dalam mengisi form registrasi, data yang diisi oleh calon anggota e-mall (toko) harus valid serta menyetui segala persyaratan sebagai anggota. Bila diisi asal-asalan maka admin berhak menonaktifkan data toko dari anggota. Hak akses yang dimiliki toko yang telah menjadi anggota e-mall adalalah menginputkan, menampilkan dan menghapus data produk yang dijual serta dapat mengubah data harga produk sewaktu-waktu jika ada perubahan. Berikut ini flowchart dari toko/owner seperti pada gambar 3.4.

Gambar 3.4 Flowchart Toko/Owner

3. User (Pemakai Informasi)

(45)

sudah dioleh oleh sistem tanpa bisa melakukan pengaturan pada sistem ataupun input data dan pengubahan data. User melakukan registrasi untuk dapat masuk ke dalam halaman katalog belanja, sedangkan user yang belum melakukan registrasi maka user hanya bisa melihat-lihat produk yang dijual tanpa bisa melakukan pembelian. Berikut ini flowchart dari user untuk proses order pembelian seperti pada gambar 3.5.

Gambar 3.5 Flowchart Member Melakukan Proses Order Pembelian

3.2.3 Diagram Ber jenjang

(46)

1

Gambar 3.6 Diagram Berjenjang

3.2.4 Diagram Konteks

Sistem yang dibangun digambarkan secara garis besar dengan menggunakan diagram konteks. Dari diagram ini dapat dilihat secara umum mengenai alur proses yang ditangani sistem.

checkout order

(47)

Pada gambar 3.7 diatas menjelaskan tentang diagram konteks yang terdapat 4 entitas yang terlibat, yaitu: admin, toko, member, dan pengunjung. Adapun proses yang dikelilingi oleh entitas yaitu electronic mall. Penjelasan untuk masing-masing entitas yang mengelilingi process pada DFD level conteks adalah sebagai berikut :

Admin

Dalam sistem ini Admin bertugas untuk maintenance data baik melakukan pengisian data, perubahan data maupun penghapusan data pada sistem electronic mall.

Member

Disini member hanya dapat melakukan pembelian, melihat order, dan melakukan konfirmasi pembayaran.

Toko

Dalam sistem ini toko dapat melakukan pengisian produk, perubahan produk maupun penghapusan produk yang akan dijual serta dapat melihat daftar order yang dilakukan oleh member.

Pengunjung

Disini pengunjung dapat melakukan registrasi sebagai member atau toko.

3.2.5 Data Flow Diagram (DFD) Level 1

Pada gambar 3.8 merupakan DFD Level 1 yang terdiri dari proses: 1) Registrasi

(48)

tabel toko. 2) Login

Didalam proses ini entitas yang terlibat adalah admin, member dan toko. Admin, member dan toko diharapkan memasukkan username serta password, setelah login akan dicek pada tabel admin, toko dan member. Jika username serta password benar maka admin dapat masuk ke halaman admin.

3) Maintenance Data

Didalam proses ini entitas yang terlibat adalah admin dan toko. Admin dapat mengolah data seperti memasukkan data baru, mengubah, menhapus, serta melihat data. Misalnya data kategori, data sub kategori, data toko. Sedangkan untuk toko dapat mengolah data produk dan upload.

4) Transaksi

Didalam proses ini entitas yang terlibat adalah member dan toko. Member dapat melakukan order dan pembayaran. Sedangkan toko dapat melihat order yang disimpan pada order tbl.

5) Laporan

(49)

checkout order

Gambar 3.8 Data Flow Diagram Level 1

3.2.6 Data Flow Diagram (DFD) Level 2 Pada DFD Level 2 terdiri dari proses: 1) Maintenance Data

(50)

simpan kota

(51)

2) Transaksi

Didalam proses ini entitas yang terlibat adalah member dan toko. Member dapat melakukan order dan pembayaran. Sedangkan toko dapat melihat order yang disimpan pada order tbl. Data Flow Diagram (DFD) Level 2 transaksi dijelaskan pada gambar 3.10.

checkout order

Gambar 3.10 Data Flow Diagram (DFD) Level 2 Transaksi

3) Laporan

Didalam proses ini entitas yang terlibat adalah admin. Admin dapat melihat laporan pesanan dan barang.

laporan order

(52)

3.3 Per ancangan Database

Dalam perancangan database ini, menjelaskan tentang dua model yaitu: Conceptual Data Model dan Physical Data Model. Conceptual Data Model adalah rancangan dalam bentuk diagram logic tanpa mempertimbangkan DBMS. Physical Data Model adalah rancangan fisik basis data yang disimpan di server.

3.3.1 CDM (Conceptual Data Model)

Conceptual Data Model dipakai untuk menggambarkan secara detail struktur basis data dalam bentuk logik. Struktur ini independen terhadap semua software maupun struktur data storage tertentu yang digunakan dalam aplikasi ini. CDM terdiri dari objek yang tidak diimplementasikan secara langsung kedalam basis data yang sesungguhnya.

Pada gambar 3.12 menjelaskan CDM dari sistem dimana terdapat beberapa tabel yang berisi entitas pendukung terbentuknya sebuah database dimana entitas itu terdiri dari tabel admin, member, products, order_tbl, order_details, category, subcategory, shopcart, upload, display toko dan toko. Tabel- tabel itu berisi entitas yang mendukung sehingga data dapat tersimpan di database.Setalah CDM terbentuk maka selanjutnya data tersebut di generate ke PDM untuk selanjutnya akanmenjadi database sistem ini.

3.3.2 PDM (Physical Data Model)

(53)

Gambar 3.13 adalah PDM atau Phisycal Data Model dari hasil generate CDM yang sudah di buat sebelumnya. Setelah PDM ini terbentuk maka selanjutnya database yang diperlukan dapat tersusun dari PDM yang sudah ada. Pada PDM ini akan terlihat hubungan atau relasi yang terbentuk antara tabel satu dengan yang lain, sehingga data yang satu dengan data yang lain dapat berhubungan antara yang satu dengan yang lain.

memiliki

(54)

FK_ORDER_TB_MEMILIKI_MEMBER

(55)

3.4 Per ancangan Antar muka

Pada perancangan antarmuka ini, menjelaskan bagaimana membuat sebuah antarmuka yang menarik dari sebuah aplikasi sehingga menjadi user friendly bagi user.

3.4.1 Desain Halaman Utama

Pada halaman utama, header terdapat banner e-mall sehingga pengunjung/customer dapat tertarik melakukan pembelian di web ini. Selain itu pada bagian atas headernya terdapat menu login dan register yang akan digunakan oleh user untuk mendapatkan hak aksesnya.

Pada bagian tengah terdapat menu-menu yang menghubungkan ke halaman lain web ini. Menu-menu ini antara lain terdapat home, kontak kami, tentang kami, cara membeli. Desain halaman utama seperti pada gambar 3.14.

Gambar 3.14 Desain Halaman Utama

L ogin | Register

Banner Electr onic Mall

Home | Contact Us | How To Buy

Cari

footer

Kategori / Sub-Kategori

(56)

3.4.2 Desain Halaman Administr ator (Admin)

Gambar 3.15 adalah desain halaman login untuk administrator, tidak semua orang dapat masuk ke dalam administrator karena admin ini mempunyai hak khusus terhadap web yaitu dapat melakukan perubahan data maupun penghapusan data yang ada.

Gambar 3.15 Desain Tampilan Login Admin

Administrator dapat melakukan proses inputan, edit data serta hapus data. Selain itu dengan adanya admin ini administrator dapat melakukan update atau perubahan data sewaktu-waktu untuk proses atau hasil yang lebih mendekati keadaan sebenarnya. Berikut adalah perkiraan bentuk tampilan admin dalam sistem ini.

Gambar 3.16 Desain Tampilan Halaman Administrator

Banner Electr onic Mall

Username :

Password :

Login

Banner Electr onic Mall

(57)

3.4.3 Desain Halaman Toko

Gambar 3.17 adalah desain halaman login untuk toko. Yang berhak mengakses halaman ini adalah toko yang telah mendaftar menjadi anggota dari electronic mall ini.

Gambar 3.17 Desain Tampilan Login Toko

Gambar 3.30 Tampilan Halaman Toko Gambar 3.18 Desain Tampilan Halaman Utama Toko

Gambar 3.18 adalah perkiraan bentuk tampilan halaman toko pada sistem ini. Toko dapat melakukan proses inputan, edit serta hapus produk yang akan dijual. Selain itu dengan adanya halaman ini pula toko dapat melihat order yang dilakukan oleh member.

Banner Electr onic Mall

Username : Password :

Login

Banner Electr onic Mall

Tampilan Selamat Datang

(58)

4.1 Implementasi Tabel

Dari hasil perancangan CDM sampai ke PDM pada BAB 3, maka bisa dilihat tabel- tabel yang akan terbentuk yang memiliki 1 database yang bernama emall. Didalam database emall memiliki 10 tabel, yaitu: admin, member, toko, category, subcategory, products, upload, shopcart, ongkir, order_tbl. Berikut adalah tabel yang terbentuk untuk electronic mall.

Tabel 4.1 Tabel pada Database

Table Type Keter angan

Admin MyISAM Untuk menyimpan data admin

Member MyISAM Untuk menyimpan data member

Toko MyISAM Untuk menyimpan data toko

Category MyISAM Untuk menyimpan kategori dari produk

subcategory MyISAM Untuk menyimpan sub kategori dari produk

Products MyISAM Untuk menyimpan data produk Upload MyISAM Sebagai relasi antara tabel produk

dan toko

Shopcart MyISAM Untuk penyimpanan data sementara saat melakukan pemesanan barang Ongkir MyISAM Untuk menyimpan data ongkos kirim order_tbl MyISAM Untuk menyimpan data order dari

member

1. Tabel Admin

(59)

Tabel 4.2 Tabel Admin

Field Type Keter a ngan

Id_admin Int(11) Primary key

Username varchar(255) -

Pass varchar(255) -

nama_admin varchar(255) -

STA_ADMIN int(11) -

2. Tabel Category

Pada tabel category terdapat cat_id, cat_name, cat_meta_desc, cat_meta_keywords, cat_image. Pada tabel ini cat_id dan cat_name adalah sebagai primary key. Tabel ini digunakan untuk menyimpan kategori dari produk. Berikut adalah tampilan tabel category.

Tabel 4.3 Tabel Category

Field Type Keter angan

cat_id Int(11) Primary key

cat_name varchar(255) -

cat_meta_desc varchar(255) -

cat_meta_keywords varchar(255) -

cat_image varchar(255) -

3. Tabel order_tbl

Pada tabel order_tbl ini terdapat id_o, order_id, id_shopcart, id_toko, product_id, user_id, id_ongkir, order_date, order_address, order_zip, jumlah barang, amount, tel, status. Tabel ini digunakan untuk menyimpan daftar order dari member yang melakukan pemesanan barang.

Tabel 4.4 Tabel order_tbl

id_o Int(11) Primary key

(60)

id_shopcart Int(11) -

id_toko Int(11) -

product_id Int(11) -

user_id Int(11) -

id_ongkir Int(11) -

Order_date datetime -

Order_address varchar(255) -

Order_zip varchar(255) -

Jumlah_barang Int(11) -

Amount Int(8) -

Tel char(255) -

Status varchar(255) -

4. Tabel products

Pada tabel products terdapat product_id, cat_id, subcat_id, product_name, product_price, product_weight, product_weight_unit, product_price_unit, product_image, product_in_stock, delete_tab. Pada tabel ini product_id adalah primary key. Tabel digunakan untuk menyimpan data produk yang diinputkan oleh toko. Berikut adalah tampilan tabel products.

Tabel 4.5 Tabel Products

product_id Int(11) Primary key

cat_id Int(11) -

subcat_id Int(11) -

product_name varchar(255) -

product_weight Int(11) -

product_desc varchar(500) -

5. Tabel shopcart

(61)

pemesanan barang yang nantinya akan disimpan pada tabel order_tbl. Berikut adalah tampilan tabel shopcart.

Tabel 4.6 Tabel Shopcart

Field Type Keter a ngan

product_id Int(11) Primary key

cat_id Int(11) -

subcat_id Int(11) -

product_name varchar(255) -

product_weight Int(11) -

product_desc varchar(500) -

6. Tabel subcategory

Pada tabel subcategory terdapat cat_id, subcat_id, subcat_name. Pada tabel ini subcat_id adalah primary key. Tabel ini digunakan untuk menyimpan data sub kategori produk-produk yang disediakan pada web e-mall. Berikut adalah tampilan tabel subcategory.

Tabel 4.7 Tabel subcategory

subcat_id Int(11) Primary key

cat_id Int(11) -

subcat_name varchar(255) -

7. Tabel member

(62)

Tabel 4.8 Tabel member

user_id int(11) Primary key

user_email varchar(255) -

Pass varchar(255) -

user_name varchar(255) -

Nama varchar(255) -

jenis_kelamin varchar(2) -

address varchar(255) -

Tabel toko terdapat id_toko, nama_toko, username_toko, password_toko. Pada tabel ini id_toko adalah primary key. Tabel ini digunakan untuk menyimpan data dari toko/owner yang terdaftar aktif sebagai anggota dari emall. Berikut adalah tampilan tabel toko.

Tabel 4.9 Tabel toko

id_toko int(11) Primary key

nama_toko varchar(255) -

username_toko varchar(255) -

password_toko varchar(255) -

email_toko varchar(255) -

Kota varchar(2) -

alamat_toko varchar(255) -

telf_toko char(12) -

(63)

9. Tabel Upload

Tabel upload terdapat id_upload, id_toko, product_id, product_price, product_in_stock, product_image. Pada tabel ini, id_upload adalah primary key. Tabel ini digunakan untuk meng-upload barang dari masing-masing toko. Berikut adalah tampilan tabel upload.

Tabel 4.10 Tabel upload

id_upload int(11) Primary key

id_toko varchar(255) -

product_id varchar(255) -

product_price varchar(255) -

product_price_in_stock varchar(255) -

product_image varchar(2) -

10. Tabel Ongkir

Tabel ongkir terdapat id_ongkir, id_ekspedisi, id_kota, id_toko, ongkir. Pada tabel ini, id_ongkir adalah primary key. Tabel ini digunakan untuk menyimpan ongkos kirim dari kota asal toko dan kota tujuan dari member. Berikut adalah tampilan tabel ongkir.

4.11 Tabel ongkir

id_ongkir int(11) Primary key

id_ekspedisi int(11) -

id_kota int(11) -

id_toko int(11) -

(64)

11. Tabel kota

Tabel kota terdapat id_kota, nama_kota. Id_kota adalah primary key. Tabel ini digunakan untuk menyimpan data kota-kota. Berikut adalah tampilan tabel kota.

Tabel 4.12 Tabel kota

id_kota int(11) Primary key

nama_kota varchar(255) -

12. Tabel ekspedisi

Tabel ekspedisi terdapat id_ekspedisi, nama_ekspedisi. Id_ekspedisi adalah primary key. Tabel ini digunakan untuk menyimpan data jasa ekspedisi pengiriman barang. Berikut adalah tampilan tabel ekspedisi.

Tabel 4.13 Tabel ekspedisi

id_ekspedisi int(11) Primary key

nama_ekspedisi varchar(255) -

4.2 Implementasi Web

(65)

Pada web ini terbagi menjadi 3 yaitu User Interface, Toko Interface dan Admin Interface. Dimana user Interface adalah tempat user atau pengguna melihat

semua inhalamanasi tentang sistem ini tetapi tidak dapat merubah apapun yang ada pada sistem. Untuk toko interface mempunyai beberapa hak berupa penginputan produk serta melihat order dari user. Berbeda halnya dengan admin interface, pada bagian ini hanya administrator yang bisa mengakses dan dapat merubah atau mengelola data yang ada. Karena pada halaman admin ini data dapat di kelola dan disimpan ke dalam database yang sudah tersedia. User interface ini harus memiliki kemudahan hak akses atau yang sering disebut user

friendly agar para pengguna dapat dengan mudah menggunakan atau mengakses

data yang ada.

4.3 Interface

Interface ini adalah bagian depan sistem yang dapat dilihat dan diakses

(66)

Gambar 4.1 Tampilan Halaman Utama

4.3.1 Halaman Registr asi

(67)

Gambar 4.2 Halaman Registrasi Toko

Sedangkan untuk halaman registrasi sebagai member seperti pada gambar 4.3 berikut ini:

(68)

4.3.2 Halaman Login

Pada interface login, hanya terdapat satu halaman saja yang digunakan sebagai akses masuk oleh seorang member dan toko. Gambar 4.4 adalah tampilan dari halaman login.

Gambar 4.4 Halaman Login Member dan Toko

Login disini akan dibagi menjadi 2 yaitu login ke Toko dan login ke Member, agar login ini berfungsi dengan baik maka diberikan suatu proses keamanan agar hanya bisa digunakan oleh toko dan member yang memilik password. Berikut adalah Script login pada gambar 4.5.

<?php

= $_POST['username']; $pass

= $_POST['password']; //echo "$user";exit;

if (isset($_POST['login']))

{

if (empty($_POST['username']) &&

empty

($_POST['password']) ){

echo"

<div id=\"usernamein_error\ "><strong>ERROR</strong>:

Usern

ame dan password kosong. Silahkan Isi dengan

benar .</div>";

(69)

URL=l

ogin.php\"></head>";}

else if (empty($_POST['username'])){ echo"

Usern

ame anda belum di isi atau tidak sesuai.Silahkan Isi denga

n benar</div>";

echo "<head><meta http-equiv=\"Refresh\" content=\" 2;

URL=l

else if (empty($_POST['password'])){ echo"

Passw

ord belum di isi atau tidak sesuai. Silahkan Isi dengan benar

</div>";

echo "<head><meta http-equiv=\"Refresh\" content=\ "2;

URL=l

else if(isset($_POST['username']) &&

isset

ame_toko='$user' and password_toko='$pass'"); if(mysql_num_rows($result)>0)

{

$row = mysql_fetch_array($result, MYSQL_BOTH); if($p

$_SESSION["username_toko"] = $user; $_SESSION["password_toko"] = $pass; $nma = $row['nm_admin'];

$_SESSION["nm_admin"] = $nma; $sta = $row['STA_TOKO'];

$_SESSION["STA_TOKO"] = $sta; if($sta=='0'){

echo "<head><meta http-equiv=\"Refresh\"

conte

nt=\"0; URL=login.php\"></head>"; }

else if($sta=='2'){ $nma = $row['nm_admin'];

$_SESSION["nm_admin"] = $nma; $sta = $row['STA_TOKO'];

$_SESSION["STA_TOKO"] = $sta; //echo $sta; exit;

$idt = $row['id_toko']; //echo $idt;

$_SESSION["id_toko"] = $idt; //echo $sta; exit;

(70)

$us = $user;

echo"<div id=\"login_error\"><strong>ERROR</strong>:

Incor

rect password.</div>";

echo "<head><meta http-equiv=\"Refresh\" content=\"2; URL=i

name='$user' and pass='$pass'"); //ech

o $result2;

if(mysql_num_rows($result2)>0) {

$row = mysql_fetch_array($result2, MYSQL_BOTH); if($pass == $row["pass"])

{

//echo "masuk";

$_SESSION["user_name"] = $user; $_SESSION["pass"] = $pass; $nma = $row['nm_admin'];

$_SESSION["nm_admin"] = $nma; $sta = $row['STA_MEMBER'];

$_SESSION["STA_MEMBER"] = $sta;

if($sta=='3') {

$nma = $row['nm_admin'];

$_SESSION["nm_admin"] = $nma; $sta = $row['STA_MEMBER'];

$_SESSION["STA_MEMBER"] = $sta; $idm = $row['user_id'];

//echo $ids;

$_SESSION["user_id"] = $idm; //echo $sta; exit;

conte

login_error\ "><strong>ERROR</strong>: Invalid

usern

ame.</div>";

conte

nt=\"2; URL=index.php\"></head>"; } }

}

else {

echo"<div id=\"login_error\"><strong>ERROR</strong>:

Inval

(71)

echo "<head><meta http-equiv=\"Refresh\" content=\"2; URL=i

ndex.php\"></head>";} }

} } ?>

Gambar 4.5 Script Proses Login

4.4 Toko Interface

Pada web toko ini, sebuah toko mempunyai hak untuk mengubah, mengelola dan menginputkan produk yang akan dijual pada sistem ini. Adapun tampilan halaman utama toko seperti pada Gambar 4.6 berikut ini.Toko juga dapat melihat order yang dilakukan oleh member.

Gambar 4.6 Halaman Utama Toko

Dihalaman utama toko terdapat beberapa menu antara lain: daftar produk, lihat

order dan pengaturan akun.

4.4.1 Halaman Daftar Produk

(72)

Gambar 4.7 Halaman Daftar produk

Adapun penjelasan lebih lanjut adalah sebagai berikut: - Tambah Produk Baru

(73)

Gambar 4.8 Halaman Tambah Produk Baru

Berikut adalah Script tambah produk pada gambar 4.9.

<?php $sql1

="INSERT INTO products (cat_id, subcat_id, produ

ct_name, product_weight, product_desc) VALUES ('$ca

$sel = "select * from products where cat_id = '$cat_id' and

subca

t_id = '$subcat_id' and product_name = '$product_name'

and product_weight = '$product_weight' and product_desc =

'$pro

duct_desc'";

$sq = mysql_query($sel);

$rt = mysql_fetch_array($sq);

$prod

uct_id = $rt[product_id]; $sql2

="INSERT INTO upload (id_toko, product_id, produ

ct_price, product_in_stock, product_image) VALUES ('$id echo "<br>";

echo "<div align='center'><h2><blink>Sukses Menambah

Produ

k</blink></h2>";

echo "<head><meta http-equiv=\"Refresh\" content=\"4;

URL=v

iew_product.php\"></head><br><a href=

'view_product.php'>Kembali ke Halaman Tambah Produ

k</a></div>"; ?>

(74)

- Halaman Edit Produk

Pada halaman ini, toko memperbarui nama produk, harga produk, berat produk, deskripsi produk, ubah stock produk, serta gambar produk yang telah tersimpan sebelumnya. Adapun tampilan dari halaman edit produk seperti gambar 4.10 dibawah ini.

Gambar 4.10 Halaman Edit Produk

- Hapus Produk

Pada halaman ini toko dapat menghapus produk yang telah disimpan sebelumnya.

(75)

4.4.2 Lihat Or der

Pada halaman ini, masing-masing toko dapat melihat daftar order yang telah dilakukan oleh member. Berikut ini tampilan dari halaman lihat order.

Gambar 4.12 Halaman Lihat Order

Didalam halaman lihat order ini akan ditampilkan daftar pesanan barang yang dilakukan oleh member. Berikut adalah script dari halaman lihat order pada gambar 4.13.

<?php

$sel = "select * from toko where id_toko = '$idt'";

$sq = mysql_query($sel);

$rt = mysql_fetch_array($sq);

$quer

y_jml="select * from order_tbl where

id_to

echo "<p align=center><font size=5><strong>Tidak Ada

Order

Yang Tersimpan</strong></font></p>";

echo "<p align=center><font size=3><br><a

href=