PEMBUATAN TOKO ONLINE DISTRO MOSFIT PROJECT BERBASIS WEB FRAMEWORK CAKEPHP.

(1)

TUGAS AKHIR

Oleh :

ABDUL MUIZZ

NPM. 0634010062

J URUSAN TEKNIK INFORMATIKA

FAKULTAS TEKNOLOGI INDUSTRI

UNIVERSITAS PEMBANGUNAN NASIONAL “VETERAN”

J AWA TIMUR

(2)

PEMBUATAN TOKO ONLINE DISTRO MOSFIT PROJ ECT

BERBASIS WEB FRAMEWORK CAKEPHP

Disusun O leh :

ABDUL MUIZZ NPM. 0634010062

Telah disetujui untuk mengikuti Ujian Negara Lisan Gelombang II Tahun Akademik 2012/2013

Mengetahui,

Ketua J urusan Teknik Infor matika Fakultas Teknologi Industri UPN ”Veteran” J awa Timur

Dr. Ir. Ni Ketut Sar i, MT NIP. 196507311992032001 Pembimbing Utama

Basuki Rahmat, S.Si, M.T

NPT. 369 070 602 09

Pembimbing Pendamping

(3)

PEMBUATAN TOKO ONLINE DISTRO MOSFIT PROJ ECT

BERBASIS WEB FRAMEWORK CAKEPHP

Disusun Oleh :

ABDUL MUIZZ NPM. 0634010062

Telah dipertahankan di hadapan dan diterima oleh Tim Penguji Skr ipsi J ur usan Teknik Infor matika Fakultas Teknologi Industri

Univer sitas Pembangunan Nasional ”Veteran” J awa Timur Pada Tanggal 14 Desember 2012

Pembimbing :

Dekan Fakultas Teknologi Industri

Univer sitas Pembangunan Nasional ”Veteran” J awa Timur

(4)

YAYASAN KEJ UANGAN PANGLIMA BESAR SUDIRMAN

UPN “VETERAN” J AWA TIMUR

FAKULTAS TEKNOLOGI INDUSTRI

KETERANGAN REVISI

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

NPM : 0634010062 Jurusan : Teknik Informatika

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

" PEMBUATAN TOKO ONLINE DISTRO MOSFIT PROJ ECT

BERBASIS WEB FRAMEWORK CAKEPHP "

Surabaya, Desember 2012 Dosen Penguji yang memerintahkan revisi:

1.) Ir.Sutiyono, MT

NIP. 19600713 198703 1 001

{

}

2.) Barry Nuqoba, S.Si, M.Kom

(5)

ii

Alhamdulillahi rabbil ‘alamin, Puji syukur penulis panjatkan kepada Allah SWT atas semua Rahmat, Berkah, dan Ridho-Nya yang telah diberikan kepada penulis sehingga dapat menyelesaikan Tugas Akhir yang berjudul “Pembuatan Toko Online Distro Mosfit Pr oject Berbasis Web Fr amewor k CakePHP” ini dengan baik.

Tugas Akhir merupakan salah satu syarat bagi mahasiswa untuk menyelesaikan program studi Sarjana Strata Satu (S1) di Jurusan Teknik Informatika Fakultas Teknologi Industri Universitas Pembangunan Nasional “Veteran” Jawa Timur.

Melalui Tugas Akhir ini penulis merasa mendapatkan kesempatan besar untuk memperdalam ilmu pengetahuan yang diperoleh selama di bangku perkuliahan. Namun, penulis menyadari bahwa Tugas Akhir ini masih jauh dari sempurna. Oleh karena itu penulis sangat mengharapkan saran dan kritik dari para pembaca untuk pengembangan aplikasi lebih lanjut.

Surabaya, 19 September 2012

(6)

iii

ABSTRAK ... i

KATA PENGANTAR ... ii

DAFTAR ISI ... iii

DAFTAR GAMBAR ... vii

BAB I PENDAHULUAN ... 1

1.1. Latar Belakang ... 1

1.2. Perumusan Masalah ... 2

1.3. Batasan Masalah ... 2

1.4. Tujuan ... 2

1.5. Manfaat ... 3

1.6. Metodologi Pembuatan Tugas Akhir ... 3

1.7. Sistematika Penulisan ... 4

BAB II TINJ AUAN PUSTAKA ... 6

2.1. Pengertian Website atau Situs ... 6

2.1.1. Nama Domain (Domain Name) atau URL (Uniform ResourceLocator) . ... 7

2.1.2. WebHosting ... 8

2.1.3. Desain Website ... 8

2.1.4. Publikasi Website ... 9

2.1.5. Pemeliharaan Website ... 10

2.2. E-Commerce ... 10

2.2.1. Keuntungan e-Commerce ... 11

(7)

iv

2.3. PHP (Hypertext Processor) ... 13

2.3.1. Script PHP ... 15

2.3.2. Cake PHP ... 16

2.4 Pengertian DBMS (Database Management System)... 18

2.5. MySQL ... 19

2.5.1. Program Database MySQL ... 20

2.5.2. Koneksi MySQL ... 21

2.5.3. Menghubungkan PHP dengan MySQL ... 21

BAB III ANALISIS DAN PERANCANGAN SISTEM ... 23

3.1. Analisis Sistem ... 23

3.2. Perancangan Sistem ... 24

3.2.1. Use Case Diagram ... 25

3.2.2. Activity Diagram ... 26

3.2.3. Sequence Diagram ... 30

3.2.4. Collaboration Diagram ... 36

3.2.5. Class Diagram ... 42

3.3. Deskripsi Umum Sistem ... 43

3.3.1. Kebutuhan Sistem ... 44

3.3.2. Kebutuhan Pengguna ... 44

3.4. Perancangan Antar Muka (Interface) ... 46

3.4.1. Perancangan Antar Muka Halaman Pembuka … .... 46

(8)

v

4.2. Implementasi ... 49

4.2.1. Halaman Utama ... 49

4.2.2. Halaman Kategori Produk ... 51

4.2.3. Halaman Tentang Kami. ... 52

4.2.4. Halaman Kontak . ... 53

4.2.5. Halaman Cara Pembelian ... 54

4.2.6. Halaman Komentar ... 55

4.2.7. Halaman Keranjang Belanja ... 56

4.2.8. Halaman LoginAdministrator ... 58

4.2.9. Halaman Admin ... 59

4.2.10. Halaman Data Pesanan . ... ` 59

4.2.11. Halaman Manajemen Produk ... 61

4.2.12. Halaman Kategori ... 62

4.2.13. Halaman Komentar ... 63

4.2.14. Halaman Ubah Password . ... 64

BAB V UJ I COBA DAN EVALUASI... 66

5.1. Uji Coba ... 66

5.1.1 Uji Coba Sistem ... 66

5.2. Uji Coba Login ... 66

5.3. Uji Coba Manajemen Produk ... 67

5.4. Uji Coba Transaksi ... 68

(9)

vi

6.2. Saran ... 72 DAFTAR PUSTAKA ... 74

(10)

vii

Gambar 2.1 Skema PHP ... 15

Gambar 2.2 Kode PHP ... 16

Gambar 2.3 Tampilan Hasil PHP ... 16

Gambar 2.4 Mekanisme Pengaksesan MySQL Melalui Web Browser.. .. 19

Gambar 2.5 Script PHP Yang Menghubungkan Dengan Database ... 22

Gambar 3.1 Use Case Diagram Pelanggan dan Admin ... 25

Gambar 3.2 Activity Diagram Lihat Produk ... 26

Gambar 3.3 Activity Diagram Memberikan Komentar ... 26

Gambar 3.4 Activity Diagram Pemesanan Produk ... 27

Gambar 3.5 Activity Diagram Pembayaran Via Transfer ... 27

Gambar 3.6 Activity Diagram Mengelola Produk ... 28

Gambar 3.7 Activity Diagram Mengecek Komentar ... 28

Gambar 3.8 Activity Diagram Mengelola Kategori... 29

Gambar 3.9 Activity Diagram Mengecek Pembayaran Pelanggan ... 29

Gambar 3.10 Activity Diagram Mengecek Pesanan Pelanggan ... 30

Gambar 3.11 Sequence Diagram Lihat Produk ... 31

Gambar 3.12 Sequence Diagram Memberikan Komentar ... 31

Gambar 3.13 Sequence Diagram Pemesanan Produk ... 32

Gambar 3.14 Sequence Diagram Pembayaran Pelanggan ... 32

Gambar 3.15 Sequence Diagram Menambah Produk ... 33

Gambar 3.16 Sequence Diagram Mengedit Produk ... 33

Gambar 3.17 Sequence Diagram Menghapus Produk ... 34

(11)

viii

Gambar 3.21 Sequence Diagram Mengelola Kategori ... 36

Gambar 3.22 Collaboration Diagram Memberikan Komentar ... 37

Gambar 3.23 Collaboration Diagram Lihat Produk ... 37

Gambar 3.24 Collaboration Diagram Pemesanan Produk ... 38

Gambar 3.25 Collaboration Diagram Pembayaran Produk ... 38

Gambar 3.26 Collaboration Diagram Menambah Produk ... 39

Gambar 3.27 Collaboration Diagram Mengecek Komentar Pelanggan ... 39

Gambar 3.28 Collaboration Diagram Mengecek Pembayaran Pelanggan… 40 Gambar 3.29 Collaboration Diagram Mengecek Pesanan Pelanggan ... 40

Gambar 3.30 Collaboration DiagramMengedit Produk... 41

Gambar 3.31 Collaboration Diagram Mengelola Kategori... 41

Gambar 3.32 Collaboration DiagramMenghapus Produk ... 42

Gambar 3.33 Class Diagram ... 43

Gambar 3.34 Deskripsi Sistem Informasi E-Commerce Distro Mosfit Project ... 43

Gambar 3.35 Interface Halaman Utama User ... 46

Gambar 3.36 Interface Halaman Utama Admin ... 47

Gambar 4.1 Halaman Utama ... 49

Gambar 4.2 Halaman Kategori Produk ... 51

Gambar 4.3 Halaman Tentang Kami ... 52

Gambar 4.4 Halaman Kontak ... 53

Gambar 4.5 Halaman Cara Pembelian ... 54

(12)

ix

Gambar 4.9 Halaman Admin ... 59

Gambar 4.10 Halaman Data Pesanan ... 59

Gambar 4.11 Halaman Manajemen Produk... 61

Gambar 4.12 Halaman Kategori ... 62

Gambar 4.13 Halaman Komentar ... 63

Gambar 4.14 Halaman Ubah Password ... 64

Gambar 5.1 Gambar Login ... 67

Gambar 5.2 Halaman Admin ... 67

Gambar 5.3 Halaman Manajemen Produk... 67

Gambar 5.4 Halaman Add Produk ... 68

Gambar 5.5 Halaman Transaksi ... 68

Gambar 5.6 Halaman Halaman Daftar Keranjang Pembelian ... 69

Gambar 5.7 Halaman Data Pembeli ... 69

Gambar 5.8 Halaman Selesai Transaksi ... 70

Gambar 5.9 Halaman Input Komentar ... 70

(13)

i Disusun Oleh : Abdul Muizz

Pembimbing : Basuki Rahmat, S.Si., MT Doddy Ridwandono S.Kom

____________________________________________________________________

ABSTRAK

Dengan adanya teknologi internet yang berkembang pada saat ini membuat jarak, tempat, serta kecepatan bertransaksi akan semakin dapat dipermudah. Salah satu sarana untuk mempercepat itu adalah Electronic Commerce. Langkah awal yang kita lakukan adalah dengan pengumpulan data berupa data toko, dan produk yang dijual, kemudian menganalisis data dan merancang sistem yang diharapkan bisa memenuhi keinginan customer dalam membeli produk secara mudah dan cepat. Langkah terakhir yang dilakukan adalah dengan implementasi sistem. Pembuatan toko online Distro Mosfit Project Berbasis Web Framework CakePHP ini dibuat dengan arsitektur web Framework CakePHP dan menggunakan bahasa pemrograman PHP,

MySQL sebagai data base-nya dan apache sebagai web server-nya, dibantu juga

dengan penggunaan phpmyadmin dalam pembuatan tabel, selain itu penulis juga menggunakan macromedia dreamweaver dan crimson editor sebagai tool pembantu untuk memperindah tampilan web. Dengan alasan untuk memperoleh kemudahan mendapatkan segala informasi terbaru mengenai produk-produk secara cepat dan tepat maka penulis telah berhasil membuat “Pembuatan Toko Online Distro Mosfit Project Berbasis Web Framework CakePHP” yang bisa memenuhi kebutuhan customer tentang segala sesuatu yang berhubungan dengan keperluan kawula muda yang gaul dan trendy mulai dari pakaian, celana, tas, jaket, topi, dan sepatu .

(14)

1 1.1 Latar Belakang

E-commerce atau bisa disebut Perdagangan elektronik atau e-dagang adalah penyebaran, pembelian, penjualan, pemasaran barang dan jasa melalui internet atau jaringan komputer. Seluruh komponen yang ada dalam perdagangan diaplikasikan ke dalam e-commerce seperti customer service, layanan produk, cara pembayaran dan cara promosi. Perkembangan internet yang semakin maju merupakan salah satu faktor pendorong berkembangnya e-commerce. Internet merupakan salah satu jaringan global yang menghubungkan jaringan komputer diseluruh dunia, sehingga memungkinkan terjalinnya komunikasi dan interaksi antar satu perusahaan dengan konsumen. Tidak adanya sarana penjualan jarak jauh yang bisa mempermudah perusahaan dalam memperluas wilayah pemasaran, karena konsumen harus datang sendiri ke lokasi dan pembayaran dilakukan secara tunai. Hal ini tentu menyulitkan para calon konsumen dari dalam dan luar kota, dikarenakan harus mengeluarkan biaya untuk mengunjungi Distro. Sehingga calon konsumen membutuhkan layanan pembelian dan pembayaran secara online dan transfer melalui rekening.

(15)

Perusahaan cukup memperkenalkan produk mereka melalui media Internet dimana sebuah website E-Commerce dapat mewakili keberadaan Distro Mosfit Project di dunia maya. Konsumen dapat memesan barang dan bertransaksi melalui website tersebut dan melakukan pembayarannya dengan cara transfer.

1.2 Perumusan Masalah

Berdasarkan latar belakang diatas maka dapat diangkat permasalahan pada tugas akhir ini adalah bagaimana membuat program atau aplikasi penjualan online yang dapat memudahkan pembeli / konsumen melihat dan memilih produk-produk yang ditawarkan.

1.3 Batasan Masalah

Agar pembahasan tugas akhir ini tidak mengalami perluasan kajian, maka penulisan ini dibatasi permasalahannya sebagai berikut :

a. Sistem akan menampilkan produk-produk yang dimiliki Distro Mosfit Project. b. Pembeli / konsumen wajib mengisi data diri dengan benar pada saat

melakukan proses pemesanan / transaksi.

c. Ongkos pengiriman sudah termasuk harga produk d. Cara pembayaran dilakukan dengan transfer bank.

e. Sistem dikerjakan menggunakan arsitektur web dengan CakePHP.

1.4 Tujuan

(16)

1.5 Manfaat

Adapun manfaat yang diinginkan dari tugas akhir pembuatan toko online di Distro Mosfit Project ini sebagai berikut :

a. Memberikan kemudahan dalam pemasaran produk Distro Mosfit Project kepada masyarakat.

b. Memberikan kemudahan dalam proses transaksi penjualan bagi pelanggan.

1.6 Metodologi Pembuatan Tugas Akhir

Untuk dapat mengimplementasikan sistem diatas, maka secara garis besar digunakan beberapa metode sebagai berikut :

a. Studi Literatur

Menggunakan buku-buku, internet, atau sumber-sumber lain yang berhubungan dengan materi penulisan tugas akhir.

b. Pengamatan (Observasi)

Melakukan pengamatan terhadap sistem penjualan yang ada pada Distro Mosfit Project dan pengumpulan data yang selanjutnya akan diolah secara lebih lanjut.

c. Analisa Permasalahan

Melakukan analisa awal tentang sistem yang akan dibuat untuk kemudian dapat menentukan cara yang paling efektif dalam menyelesaikan masalah.

d. Perancangan Sistem dan Analisa Data

(17)

e. Implementasi Sistem

Pada tahap ini dilakukan proses implementasi dari hasil rancangan sistem yang akan dibuat menggunakan arsitektur web dengan CakePHP.

f. Uji Coba Perangkat Lunak

Menguji program yang telah dibuat untuk mengetahui letak kesalahan dalam aplikasi dan memperbaikinya.

g. Dokumentasi

Membuat laporan dari semua pengerjaan yang telah dilakukan.

1.7 Sistematika Penulisan

Sistematika Penulisan tugas akhir ini nantinya tersusun atas beberapa sistematis penulisan, yaitu :

BAB I PENDAHULUAN

Bab ini berisi latar belakang, perumusan masalah, batasan masalah, tujuan dan manfaat penelitian, metodologi penulisan tugas akhir, dan sistematika penulisan yang digunakan dalam laporan tugas akhir ini.

BAB II TINJ AUAN PUSTAKA

(18)

BAB III ANALISIS DAN PERANCANGAN SISTEM

Bab ini menjelaskan tentang tata cara metode analisa dan perancangan sistem yang digunakan untuk mengolah sumber data yang dibutuhkan sistem, antara lain : Use Case Diagram, Activity Diagram, Sequence Diagram, Collaboration Diagram, Class

Diagram, Perancangan Antar Muka.

BAB IV IMPLEMENTASI APLIKASI

Bab ini menjelaskan implementasi dari program yang telah dibuat meliputi lingkungan implementasi, implementasi proses dan implementasi antarmuka.

BAB V UJ I COBA DAN EVALUASI

Bab ini menjelaskan tentang pelaksanaan uji coba dan evaluasi dari pelaksanaan uji coba dari program aplikasi yang dibuat.

BAB VI PENUTUP

Bab ini berisikan tetang kesimpulan yang dapat diambil dari keseluruhan isi dari laporan Tugas Akhir serta Saran yang disampaikan penulis untuk pengembangan sistem yang ada demi kesempurnaan sistem yang lebih baik.

DAFTAR PUSTAKA

(19)

6

BAB II

TINJ AUAN PUSTAKA

Pada bab II dibahas tentang beberapa teori dasar sebagai penunjang untuk menyelesaikan skripsi ini diantaranya adalah sebagai berikut: Pengertian Website atau Situs, E-Commerce, PHP (Hypertext Processor), Framework CakePHP, Pengertian DBMS (Database Management System), dan MySQL.

2.1. Pengertian Website atau Situs

Website atau situs juga dapat diartikan sebagai kumpulan halaman yang menampilkan informasi data teks, data gambar diam atau gerak, data animasi, suara, video dan atau gabungan dari semuanya, baik yang bersifat statis maupun dinamis yang membentuk satu rangkaian bangunan yang saling terkait dimana masing-masing dihubungkan dengan jaringan-jaringan halaman atau hyperlink.

Website dikatakan bersifat statis apabila isi informasi website tetap, jarang berubah, dan isi informasinya searah hanya dari pemilik website, bersifat dinamis apabila isi informasi website selalu berubah-ubah, dan isi informasinya interaktif dua arah berasal dari pemilik serta pengguna website.

(20)

2.1.1 Nama Domain (Domain Name) atau URL (Uniform Resource Locator) Nama domain (domain name) atau URL (Uniform Resource Locator) adalah alamat unik di dunia internet yang digunakan untuk mengidentifikasi sebuah website, atau dengan kata lain domain name adalah alamat yang digunakan untuk menemukan sebuah website pada dunia internet. Contoh : http://www.nama situs .com.

Nama domain diperjual belikan secara bebas di internet dengan status sewa tahunan, setelah nama domain itu terbeli di salah satu penyedia jasa pendaftaran, maka pengguna disediakan sebuah kontrol panel untuk administrasinya. Jika pengguna lupa atau tidak memperpanjang masa sewanya, maka nama domain itu akan dilepas lagi ketersediaannya untuk umum.

Nama domain sendiri mempunyai identifikasi akhiran sesuai dengan kepentingan dan lokasi keberadaan website tersebut. Contoh nama domain berakhiran internasional adalah com, net, org, info, biz, name, ws.

Contoh nama domain berakhiran lokasi negara Indonesia adalah: a. .co.id : Untuk badan usaha yang mempunyai badan hukum sah b. .ac.id : Untuk lembaga pendidikan

c. .go.id : Khusus untuk lembaga pemerintahan d. .mil.id : Khusus untuk lembaga militer e. .or.id : Untuk segala macam organisasi

f. .war.net.id : Untuk industri warung internet di Indonesia

(21)

2.1.2 Web Hosting

Web Hosting dapat diartikan sebagai ruangan yang terdapat dalam hard disk tempat menyimpan berbagai data, file-file, gambar dan lain sebagainya yang akan ditampilkan di website. Besarnya data yang bisa dimasukkan tergantung dari besarnya web hosting yang disewa atau dimiliki, semakin besar web hosting semakin besar pula data yang dapat dimasukkan dan ditampilkan dalam website.

Web Hosting juga diperoleh dengan menyewa. Besarnya hosting ditentukan ruangan hard disk dengan ukuran MB (Mega Byte) atau GB (Giga Byte). Lama penyewaan web hosting rata-rata dihitung per tahun. Penyewaan hosting dilakukan dari perusahaan-perusahaan penyewa web hosting yang banyak dijumpai di Indonesia atau Luar Negeri.[1]

2.1.3 Desain Website

Setelah melakukan penyewaan domainname dan webhosting serta penguasaan bahasa program (scripts program), unsur website yang penting dan utama adalah desain.

Desain website menentukan kualitas dan keindahan sebuah website. Desain sangat berpengaruh kepada penilaian pengunjung akan bagus tidaknya sebuah website. Untuk membuat website biasanya dapat dilakukan sendiri atau menyewa jasa website designer. Saat ini sangat banyak jasa web designer, terutama di kota-kota besar. Perlu diketahui bahwa kualitas situs sangat ditentukan oleh kualitas designer.

(22)

situs yang semakin berkualitas, demikian pula sebaliknya. Jasa web designer ini yang umumnya memerlukan biaya yang tertinggi dari seluruh biaya pembangunan situs dan semuanya itu tergantung kualitas designer.

2.1.4 Publikasi Website

Keberadaan situs tidak ada gunanya dibangun tanpa dikunjungi atau dikenal oleh masyarakat atau pengunjung internet. Karena efektif tidaknya situs sangat tergantung dari besarnya pengunjung dan komentar yang masuk. Untuk mengenalkan situs kepada masyarakat memerlukan apa yang disebut publikasi atau promosi. Publikasi situs di masyarakat dapat dilakukan dengan berbagai cara seperti dengan pamflet, selebaran, baliho dan lain sebagainya tapi cara ini bisa dikatakan masih kurang efektif dan sangat terbatas.

Cara yang biasanya dilakukan dan paling efektif dengan tak terbatas ruang atau waktu adalah publikasi langsung di internet melalui search engine-search engine (mesin pencari, seperti: Yahoo, Google, Search Indonesia, dan sebagainya).

(23)

2.1.5 Pemeliharaan Website

Untuk mendukung kelanjutan dari situs diperlukan pemeliharaan setiap waktu sesuai yang diinginkan seperti penambahan informasi, berita, artikel, link, gambar atau lain sebagainya. Tanpa pemeliharaan yang baik, situs akan terkesan membosankan dan akan segera ditinggal pengunjung.

Pemeliharaan situs dapat dilakukan per periode tertentu seperti tiap hari, tiap minggu atau tiap bulan sekali secara rutin atau secara periodik saja tergantung kebutuhan (tidak rutin). Pemeliharaan rutin biasanya dipakai oleh situs-situs berita, penyedia artikel, organisasi atau lembaga pemerintah.

2.2. E-Commerce

E-Commerce adalah salah satu website yang menyediakan transaksi secara online atau juga bisa merupakan suatu cara berbelanja atau berdagang secara online yang memanfaatkan fasilitas internet dimana terdapat website yang dapat menyediakan layanan “getand deliver“.

E-commerce akan merubah semua kegiatan marketing dan juga sekaligus memangkas biaya-biaya operasional untuk kegiatan trading (perdagangan). Adapun pendapat mengenai pengertian e-commerce bahwa e-commerce mengacu pada internet untuk belanja online dan jangkauan lebih sempit, dimana e-commerce adalah sub perangkat dari E-Bisnis.

Adapun proses yang terdapat dalam E-Commerce adalah sebagai berikut:

(24)

c. Secara otomatis account pelanggan dapat secara aman (baik nomor rekening maupun nomor kartu kredit).

d. Pembayaran yang dilakukan secara langsung (online) dan penanganan transaksi.[2]

2.2.1 Keuntungan E-commerce

Keuntungan yang diperoleh dengan menggunakan transaksi melalu E-Commerce adalah sebagai berikut:

a. Meningkatkan pendapatan dengan menggunakan onlinechannel yang biayanya lebih murah.

b. Mengurangi biaya-biaya yang berhubungan dengan kertas, seperti biaya pos surat, pencetakan, report, dan sebagainya.

c. Mengurangi keterlambatan dengan menggunakan transfer elektronik pembayaran yang tepat waktu dan dapat langsung dicek.

d. Mempercepat pelayanan ke pelanggan, dan pelayanan lebih responsif.

2.2.2 Manfaat E-Commerce

Untuk para penyalur, keuntungan utama E-Commerce adalah kemungkinan memotong biaya pada proses-proses yang berulang untuk menjangkau pasar yang lebih luas, ke produk sumber dari supplier-base yang lebih luas, dan dapat berinteraksi dengan cepat dan murah.

(25)

dengan akses online dan mereka dapat memilih dan membeli dari pasar yang lebih luas.

2.2.3 Contoh E-Commerce

Banyak sekali yang dapat kita lakukan melalui E-Commerce yaitu: a. Pembelian pakaian melalui online.

b. Pembelian elektronik melalui online. c. Pembelian kendaraan melalui online. d. Pembelian buku melalui online.

2.2.4 Dampak Positif dan Negatif E-Commerce

Didalam dunia E-Commerce pasti terdapat dampak positif dan negatif, adapun dampak positifnya dari E-Commerce yaitu:

a. Revenue Stream (aliran pendapatan) baru yang mungkin lebih menjanjikan yang tidak bisa ditemui di sistem transaksi tradisional b. Dapat meningkatkan pangsa pasar (market exposure).

c. Menurunkan biaya operasional (operating cost). d. Melebarkan jangkauan (global reach).

e. Meningkatkan customer loyality.

Adapun dampak negatifnya dari pembuatan e-commerce, yaitu: a. Kehilangan segi finansial secara langsung karena kecurangan. Seorang

penipu mentransfer uang dari rekening satu ke rekening lainnya atau dia telah mengganti semua data finansial yang ada.

(26)

c. Kehilangan kesempatan bisnis karena gangguan pelayanan. Kesalahan ini bersifat kesalahan non-teknis seperti aliran listrik tiba-tiba padam.

d. Penggunaan akses ke sumber oleh pihak yang tidak berhak. Misalkan seorang hacker yang akan merusak system.

2.3. PHP (Hypertext Processor)

PHP (Hypertext Processor) merupakan bahasa berbentuk script yang ditempatkan dalam server dan hasilnya akan dikirim ke client, tempat pemakai menggunakan browser. Secara khusus PHP (Hypertext Processor) dirancang untuk membentuk website yang dinamis, maksudnya semua syntag yang diberikan akan dijalankan sepenuhnya oleh server sedangkan yang dikirimkan ke browser hanya hasilnya saja sehingga ia dapat membentuk permintaan terkini.

PHP (Hypertext Processor) juga dapat diartikan sebagai instruksi atau perintah pemograman berbasis website yang biasa disisipkan dalam dokumen HTML (HyperText Markup Language), sebagai script pendukung yang ada di lingkungan server (server side HTML embedded scripting). Kode PHP (Hypertext Processor) juga bisa berkomunikasi dengan database dan melakukan perhitungan-perhitungan yang kompleks sambil jalan.

(27)

PHP (Hypertext Processor) bersifat bebas pakai, kita tidak perlu membayar apapun untuk menggunakan perangkat lunak ini. Salah satu kelebihan dari PHP (Hypertext Processor) adalah mampu berkomunikasi dengan berbagai database yang terkenal.

Dengan demikian, menampilkan data yang bersifat dinamis, yang diambil dari database merupakan hal yang mudah untuk mengimplementasikan dan inilah sebabnya sering dikatakan bahwa PHP (Hypertext Processor) sangat cocok untuk membangun halaman-halaman website yang dinamis.

Ada beberapa keunggulan atau kelebihan dari PHP (Hypertext Processor), diantaranya adalah sebagai berikut:

a. Source program atau script tidak dapat dilihat menggunakan fasilitas view HTML source, yang ada pada web browser.

b. Script tersebut dapat memanfaatkan sumber-sumber aplikasi yang dimiliki oleh server, seperti misalnya untuk keperluan database connection. Saat ini PHP (Hypertext Processor) sudah mampu melakukan koneksi dengan berbagai database, contohnya: InterBase, Microsoft Acces, MySQL, Oracle, Postgree SQL, Sybase, dan sebagainya.

(28)

Gambar 2.1 Skema PHP

Gambar 2.1 adalah skema PHP (Hypertext Processor). Konsep kerja PHP (Hypertext Processor) pada dasarnya serupa dengan HTML, hanya saja ketika berkas PHP (Hypertext Processor) yang diminta didapatkan oleh web server, isinya akan segera dikirimkan PHP (Hypertext Processor) dan mesin inilah yang memproses hasilnya berupa kode HTML, selanjutnya web server menyampaikan ke client.

2.3.1 Script PHP

Script PHP berkedudukan sebagai tag dalam bahasa HTML (Hypertext Markup Language). Sebagaimana diketahui HTML (Hypertext Markup Language) adalah bahasa standar untuk membuat halaman-halaman website. Contoh gambar 2.2 merupakan kode PHP yang berada di dalam kode HTML.

Gambar 2.2 Kode PHP

(29)

tag kode PHP. Berdasarkan tag inilah, pihak server dapat memahami kode PHP dan kemudian memprosesnya dan hasilnya dikirim ke browser.

Gambar 2.3 Tampilan Hasil PHP

Pada gambar 2.3 pihak client tidak dapat melihat kode PHP yang sesungguhnya. Maka apabila kode tersebut dijalankan akan membentuk tampilan seperti gambar 2.3.

2.3.2 CakePHP

CakePHP merupakan sebuah framework PHP yang bersifat open source (gratis). Tujuan dari adanya CakePHP adalah untuk memungkinkan kita dalam bekerja dengan terstruktur dan cepat tanpa kehilangan fleksibilitas.

Adapun kelebihan atau keunggulan dari cakePHP framework, diantaranya adalah sebagai berikut:

a. Open source (gratis) b. Mendukung Ajax

c. Automagic Function (memiliki fungsi validasi input, session, auth, dan lain-lain yang berguna untuk mempercepat coding).

d. Mendukung PHP4 dan PHP5

e. Konsep MVC (Model, View, Controller) f. Mendukung ORM (Object, Relational Model)

(30)

a. Komunitas yang baik dan ramah b. Lisensi yang fleksibel

c. Kompatibel dengan PHP4 dan PHP5

d. CRUD yang terintegrasi untuk interaksi database e. Aplikasi scaffolding

f. Code generation

g. Component (Authentication, Session) yang memungkinkan kita memproduksi area dengan cepat

h. KonsepMVC

i. Permintaan dispatcher yang rapi j. Mendukung validasi

k. Cakebake yang memungkinkan pengerjaan dilakukan melalui command line, sehingga meminimalisir pengetikan code dan pengerjaan akan selesai dalam waktu singkat.

l. Template yang cepat dan fleksibel m. Sanitasi data

n. Chancing yang fleksibel o. Localication

Operasi CRUD (Create, Read, Update, and Delete)

Operasi CRUD (Create, Read, Update, and Delete) merupakan suatu proses yang sangat diperlukan apabila kita ingin membangun suatu website dinamis. Operasi CRUD sangat mutlak berhubungan dengan database. Untuk mempelajari operasi CRUD, kita harus benar-benar menguasai konsep dasar dari MVC yang terdiri dari:

(31)

b. Controller untuk mengontrol dari seluruh kegiatan keluar atau masuknya data

c. View untuk menampilkan kepada client atau pengguna.[2]

2.4. Pengertian DBMS (Database Management System)

DBMS merupakan singkatan dari Database Management System. DBMS merupakan perangkat lunak atau program komputer yang dirancang secara khusus untuk memudahkan pengelolaan database. Salah satu macam DBMS yang populer dewasa ini berupa RDBMS (Relational Database Management System), yang menggunakan model basis data relasional atau dalam bentuk tabel-tabel yang saling berhubungan.

MySQL merupakan salah satu contoh dari bentuk produk RDBMS yang sangat populer di lingkungan Linux, tetapi juga tersedia pada Windows.

Banyak situs web yang menggunakan MySQL sebagai database server (server yang melayani permintaan akses terhadap database).

(32)

Pada gambar 2.4 database MySQL diolah oleh bahasa pemrograman PHP, ASP, dan JSP kemudian diakses melalui internet browser yang dipicu oleh webserver seperti apache.[4]

2.5. MySQL

MySQL merupakan database server dimana pemrosesan data terjadi di server, dan client hanya mengirim serta meminta data. Pengaksesan dapat dilakukan dimana saja dan oleh siapa saja dengan catatan komputer telah terhubung ke server. Berbeda dengan database desktop dimana segala pemrosesan data seperti penambahan atau penghapusan data harus dilakukan pada komputer yang bersangkutan.MySQL termasuk dalam kategori database manajemen sistem, yaitu database yang terstruktur dalam pengolahan dan penampilan data. Sejak komputer dapat menangani data yang besar, database management sistem memegang peranan yang sangat penting dalam pengolahan data.

MySQL merupakan Rational Databese Management System (RDBMS) yaitu hubungan antar tabel yang berisi data-data pada suatu database. Tabel-tabel tersebut dapat di link oleh suatu relasi yang memungkinkan untuk mengkombinasikan data dari beberapa tabel ketika seorang user menginginkan penampilan informasi dari suatu database.[4]

2.5.1 Pr ogram Database MySQL

(33)

a. MySQL merupakan database yang memiliki kecepatan yang tinggi dalam melakukan pemrosesan data, dapat diandalkan, dan mudah digunakan serta mudah dipelajari.

b. MySQL mendukung banyak bahasa pemrograman seperti: bahasa pemrograman C, bahasa pemrograman C++, Java, Perl, Phyton, dan PHP.

c. Koneksi, kecepatan, dan keamanan membuat MySQL sangat cocok diterapkan untuk pengaksesan database melalui internet, dengan menggunakan bahasa pemrograman Perl atau PHP sebagai antarmukanya.

d. MySQL dapat melakukan koneksi dengan client menggunakan protocol TCP/IP, Unix Socket (Unix), atau Named Pipes (NT).

e. MySQL dapat menangani database dengan skala yang sangat besar dengan jumlah record mencapai lebih dari lima puluh juta, dapat menampung enam puluh ribu tabel, dan juga bisa menampung lima milyar baris data serta dapat menampung sampai tiga puluh dua index. f. Dalam hal relasi antar tabel pada suatu database, MySQL merupakan

metode yang sangat cepat yaitu dengan menggunakan metode one-sweep multi join.

g. Multi user, yaitu dalam satu database server pada MySQL dapat diakses oleh beberapa user dalam waktu yang sama tanpa mengalami konflik atau crash.

(34)

user dengan sistem perizinan yang khusus serta password yang dimiliki setiap user.

i. MySQL merupakan software database yang bersifat free, jadi kita tidak perlu susah-susah mengeluarkan isi kantong kita untuk hanya sekedar membayar lisensi kepada pembuat software.[4]

2.5.2 Koneksi MySQL

Bahasa SQL pada umumnya informasi tersimpan dalam tabel-tabel yang secara logika merupakan struktur dua dimensi terdiri dari baris atau row dan kolom atau field. Sedangkan dalam sebuah database dapat terdiri dari beberapa tabel. Untuk membuat sebuah database baru ketik create database nama database.Contoh : create database privatdb; untuk membuka database ketik use nama database. Contoh: use privatdb; Untuk membuat tabel baru adalah create table nama tabel.

2.5.3 Menghubungkan PHP dengan MySQL

Penulisan fungsi script untuk koneksi ke database MySQL: (tips PHPdan MySQL,UNBRAW)

a. MySQL_connect()

Perintah ini digunakan untuk melakukan koneksi ke serverdatabase MySQL, fungsi ini memiliki format penulisan sebagai berikut: MySQL_connect (host, username, password) ;

b. MySQL_select_db()

(35)

c. MySQL_query()

Pada MySQL query ini menjelaskan koneksi script PHP yang menghubungkan ke database seperti gambar 2.5.

(36)

23

ANALISIS DAN PERANCANGAN SISTEM

3.1 Analisis Sistem

Dalam bab analisis dan perancangan sistem ini, penulis akan mencoba untuk menjelaskan mengenai analisa dari sistem yang dibuat, yaitu pembuatan toko online Distro Mosfit Project berbasis web framework CakePHP. Sistem ini bertujuan untuk memberikan informasi data produk, penjualan produk dan pemesanan produk dari Distro Mosfit Project yang dapat digunakan untuk memudahkan transaksi penjualan secara online.

Di dalam pembuatan toko online Distro Mosfit Project Berbasis Web Framework CakePHP ada lima komponen dasar sekaligus merupakan komponen utama yang harus dibuat terlebih dahulu. Lima komponen yang digunakan pada perancangan sistem yang akan dibuat sebagai berikut :

a. Catalog

Kategori atau catalog berisi daftar produk yang dipergunakan untuk memudahkan konsumen dalam mencari dan mendapatkan informasi produk yang ditawarkan.

b. Shopping cart

(37)

dalam jumlah besar. Inti dari halaman shopping cart adalah untuk menata data-data produk / item pesanan yang telah dipilih oleh customer. Pada halaman ini customer kemungkinan akan sering melakukan perubahan-perubahan pada data-data yang telah dipesan baik itu menambah jumlah produk yang akan dibeli dan mengurangi jumlah produk yang akan dibeli.

c. Checkout

Sistem ini digunakan untuk melanjutkan proses shopping cart setelah customer menyetujui jenis-jenis produk yang sesuai, jumlah dan harga yang harus dibayar. customer akan diharuskan mengisi data pengiriman berupa nama dan alamat lengkap dimana produk tersebut akan dikirimkan. Checkout mempunyai fungsi utama yaitu memproses informasi tentang identitas pemesan yang telah dimasukkan oleh customer.

d. Payment

Sistem pembayaran disini menggunakan transfer bank. Setelah customer / konsumen selesai belanja, maka customer segera mentransfer uang ke nomer rekening yang ada pada kontak web.

e. Guest Book

Guest book disini berfungsi sebagai buku tamu apabila customer ingin berkomentar atau memberikan saran dan kritik kepada Distro Mosfit Project.

3.2 Perancangan Sistem

(38)

komponen-komponen sistem yang akan didesain secara detail. Dalam melakukan perancangan terhadap sistem, sistem perancangan tersebut diantaranya adalah Use case diagram, activity diagram, sequence diagram, collaboration diagram, dan class diagram.

3.2.1 Use Case Diagram

Use case diagram digunakan untuk memodelkan bisnis proses berdasarkan perspektif pengguna sistem. Use case diagram terdiri atas diagram untuk use case dan actor. Use case merepresentasikan operasi-operasi yang dilakukan oleh actor. Use case digambarkan berbentuk elips dengan nama operasi dituliskan di dalamnya. Actor yang melakukan operasi dihubungkan dengan garis lurus ke use case. Dalam system ini use case dibuat satu bagian, yaitu use case untuk user atau admin.

Gambar 3.1 Use Case Diagram Pelanggan dan Admin

Gambar 3.1 Use case pelanggan dapat melihat produk, pesan produk, mengisi komentar, dan melakukan pembayaran dengan cara transfer.

(39)

3.2.2 Activity Diagr am

Activity diagram menggambarkan berbagai alir aktivitas dalam sistem yang sedang dirancang, bagaimana masing-masing alir berawal, decision yang mungkin terjadi, dan bagaimana mereka berakhir. Activity diagram juga dapat menggambarkan proses paralel yang mungkin terjadi pada beberapa eksekusi. a. Activity Diagr am Website Pelanggan ”Lihat Produk”

Gambar 3.2 Lihat Produk

Gambar 3.2 pelanggan dapat melihat-lihat produk saja tanpa harus memesan produk.

b. Activity Diagr am Website Pelanggan ”Komentar ”

Gambar 3.3 Memberikan Komentar

(40)

c. Activity Diagr am Website Pelanggan ”Pemesanan Produk”

Gambar 3.4 Pemesanan Produk

Gambar 3.4 pelanggan memilih produk dahulu sebelum memasukkan kedalam keranjang belanja, jika sudah memasukkan ke dalam keranjang belanja, maka pelanggan dapat memilih produk lagi untuk dipesan, jika selesai belanja maka pelanggan mengisi form identitas diri dan bank.

d. Activity Diagr am Website Pelanggan ”Pembayar an”

Gambar 3.5 Pembayaran via transfer

(41)

e. Activity Diagr am Website Admin ”Mengelola Pr oduk”

Gambar 3.6 Mengelola Produk

Gambar 3.6 admin dapat mengelola produk, jika admin belum selesai mengelola produk, maka admin kembali mengelola produk, jika sudah mengelola produk, maka admin selesai mengelola produk.

f. Activity Diagr am Website Admin ”Mengecek Komentar ”

Gambar 3.7 Mengecek Komentar

(42)

g. Activity Diagr am Website Admin ”Mengelola Kategori”

Gambar 3.8 Mengelola Kategori

Gambar 3.8 admin dapat menambah kategori, jika masih ingin menambah kategori maka admin kembali pada menambah kategori, jika tidak maka kategori telah fix, admin juga dapat menghapus kategori, jika masih ingin menghapus kategori maka kembali ke kategori, jika tidak ingin menghapus kategori maka selesai.

h. Activity Diagram Website Admin ”Mengecek Pembayaran”

Gambar 3.9 Mengecek Pembayaran Pelanggan

(43)

i. Activity Diagram Website Admin ”Mengecek Pesanan”

Gambar 3.10 Mengecek Pesanan Pelanggan

Gambar 3.10 admin melihat status pesanan pelanggan, jika pelanggan belum membayar maka admin kembali melihat status pesanan pelanggan, jika pelanggan sudah membayar maka admin merubah status pesanan pelanggan.

3.2.3 Sequence Diagram

(44)

a. Sequence Diagram Website “Lihat Produk”

Gambar 3.11 pelanggan melihat produk pada kategori, jika data sudah ditemukan maka pelanggan dapat melihat produk.

b. Sequence Diagram Website “Komentar ”

(45)

c. Sequence Diagram Website “Pemesanan Produk”

Gambar 3.13 pelanggan memesan produk pada kategori produk kemudian memasukkan produk tersebut ke dalam keranjang belanja dan melihat keranjang belanja, kemudian pelanggan mengisi identitas diri dan bank.

d. Sequence Diagram Website “Pembayaran”

Gambar 3.14 Pembayaran Pelanggan

(46)

e. Sequence Diagram Website “Menambah Produk”

Gambar 3.15 Menambah Produk

Gambar 3.15 admin menambah produk dan menyimpannya pada data produk, kemudian view data produk.

f. Sequence Diagram Website “Mengedit Produk”

Gambar 3.16 Mengedit Produk

(47)

g. Sequence Diagram Website “Menghapus Produk”

Gambar 3.17 Menghapus Produk

Gambar 3.17 admin menghapus produk pada data produk, kemudian view data telah dihapus.

h. Sequence Diagram Website “Mengecek Komentar ”

Gambar 3.18 Mengecek Komentar

(48)

i. Sequence Diagram Website “Mengecek Pembayaran”

Gambar 3.19 Mengecek Pembayaran

Gambar 3.19 admin mengecek pembayaran pelanggan pada data order dan view pembayaran.

j. Sequence Diagram Website “Mengecek Pesanan”

Gambar 3.20 Mengecek Pesanan

(49)

k. Sequence Diagram Website “Mengelola Kategori”

Gambar 3.21 admin mengelola kategori dan menyimpannya pada data kategori, kemudian view kategori.

3.2.4 Collaboration Diagram

(50)

a. Collaboration Diagram “Komentar ”

Gambar 3.22 pelanggan mengisi komentar, kemudian pelanggan menyimpan komentar dan melihat komentar tersebut.

b. Collaboration Diagram “Lihat Pr oduk”

(51)

c. Collaboration Diagram “Pemesanan Pr oduk”

Gambar 3.24 pelanggan memesan produk pada kategori produk kemudian memasukkan produk tersebut ke dalam keranjang belanja dan melihat keranjang belanja, kemudian pelanggan mengisi identitas diri dan bank.

d. Collaboration Diagram “Pembayaran”

Gambar 3.25 Pembayaran Produk

(52)

e. Collaboration Diagram “Menambah Pr oduk”

Gambar 3.26 Menambah Produk

Gambar 3.26 admin menambah produk dan menyimpannya pada data produk, kemudian view data produk.

f. Collaboration Diagram “Mengecek Komentar ”

Gambar 3.27 Mengecek Komentar Pelanggan

(53)

g. Collaboration Diagram “Mengecek Pembayaran”

Gambar 3.28 Mengecek Pembayaran Pelanggan

Gambar 3.28 admin mengecek pembayaran pelanggan pada data order dan view pembayaran.

h. Collaboration Diagram “Mengecek Pesanan”

Gambar 3.29 Mengecek Pesanan Pelanggan

(54)

i. Collaboration Diagram “Mengedit Produk”

Gambar 3.30 Mengedit Produk

Gambar 3.30 admin mengedit produk dan menyimpan pada data produk, kemudian view data.

j. Collaboration Diagram “Mengelola Kategori”

(55)

k. Collaboration Diagram “Menghapus Produk”

Gambar 3.32 Menghapus Produk

Gambar 3.32 admin menghapus produk pada data produk, kemudian view data telah dihapus.

3.2.5 Class Diagram

Class diagram menggambarkan interaksi antar class serta atribut-atribut yang melekat pada class tersebut. Sebelum membuat class diagram, terlebih dahulu harus dibuat class-class yang diperlukan untuk sistem tersebut. Berikut ini langkah-langkah untuk membuat class :

1. Membuat package terlebih dahulu yaitu package design model (hal ini bersifat optional) tapi lebih baik class-class dimasukkan ke dalam suatu package yaitu packagedesign model agar lebih terstruktur.

(56)

Class Diagram Website

Gambar 3.33 Class Diagram

Gambar 3.33 pelanggan dapat melihat produk melalui kategori produk, pelanggan pesan produk pada order dan memasukkan ke dalam keranjang belanja, pelanggan melakukan pembayaran dengan cara via transfer, pelanggn juga dapat mengisi komentar.

Admin dapat mengelola produk, mengecek komentar,mengelola kategori, mengecek pembayaran pelanggan, dan mengecek pesanan.

3.3 Deskr ipsi Umum Sistem

Secara umum, sistem yang dibuat akan ditunjukkan pada Gambar 3.34.

(57)

Pada gambar 3.34 deskripsi dari arsitektur sistem adalah sebagai berikut :

a. (A) Admin atau administrator sistem informasi menjalankan sistem informasi untuk melakukan melakukan view transaksi, input data produk, view guest book.

b. (B) User atau pengunjung sistem informasi, dapat view produk terlebih dahulu sebelum melakukan transaksi pemesanan, input guest book.

c. (C) Server tempat proses sistem informasi yang terjadi. Jadi semua proses yang di lakukan oleh admin dan user tersimpan dan terjadi pada server.

3.3.1 Kebutuhan Sistem

Dengan mengidentifikasi deskripsi pada Gambar 3.34 telah diketahui bahwa terdapat beberapa fokus utama pada sistem yaitu : berupa memberikan informasi data produk, penjualan produk dan pemesanan produk yang dapat di gunakan untuk memudahkan transaksi penjualan secara online, semua proses data tersebut merupakan kebutuhan pengguna.

3.3.2 Kebutuhan Pengguna

Berdasarkan arsitektur pada Gambar 3.34 untuk memenuhi kebutuhan pengguna dalam berinteraksi dengan sistem serta untuk mengetahui kebutuhan-kebutuhan apa saja yang berpengaruh pada sistem nantinya, maka perlu dijabarkan kebutuhan apa saja yang akan dibutuhkan oleh pengguna, antara lain: a. Komputer / Laptop tidak tergantung merk, apapun bisa dipakai.

(58)

c. Menu Kategori Produk adalah menu yang menampilkan kategori-kategori produk Distro Mosfit Project

d. Menu Tentang Kami adalah menu yang menampilkan profil dari Distro Mosfit Project.

e. Menu Kontak adalah menu yang menampilkan no.telp, alamat, dan no.rekening Distro Mosfit Project.

f. Menu Cara Pembelian, adalah menu yang menampilkan cara pembelian / cara bertransaksi di Distro Mosfit Project.

g. Menu Komentar, dimana menu ini customer dapat menambahkan komentarnya pada menu ini.

h. Menu Keranjang Belanja, menu ini menampilkan isi dari keranjang belanja yang akan dipesan.

i. Menu Login Adm, dimana admin harus memasukkan user name dan password untuk bisa masuk sebagai admin.

j. Menu Data Pesanan, dimana admin bisa melihat, merubah, dan menghapus proses pemesanan / transaksi yang dilakukan pelanggan.

k. Menu Manajemen Produk, dimana admin bisa melihat, merubah, menambahkan, dan menghapus produk.

l. Menu Kategori, dimana admin bisa melihat, merubah, menambahkan, dan menghapus kategori produk.

m. Menu Komentar, dimana admin bisa melihat dan menghapus isi komentar dari pelanggan.

n. Menu Ubah Password, dimana admin bisa merubah password lama ke password baru.

(59)

3.4 Perancangan Antar Muka (Interface)

Perancangan antarmuka merupakan perancangan halaman aplikasi yang berinteraksi langsung antara sistem dengan pengguna. Perancangan antarmuka sistem merupakan salah satu bagian penting dalam tahap perancangan sistem. Dalam merancang antar muka aplikasi harus memudahkan pengguna dalam mengoperasikan sistem atau aplikasi tersebut.

Konsep rancangan yang sangat penting untuk mendesain halaman web e-commerce adalah resolusi monitor. Terdapat 3 buah resolusi yang umum digunakan pada monitor, diantaranya 640x480, 800x600, 1024x768 pixel. Pada umumnya halaman web didesain untuk resolusi 800x600 karena pada umumnya pengguna sistem memakai monitor ukuran 14 atau 15 inchi.

Dalam merancang tampilan sebuah situs, harus menggambarkan layout dari situs yang akan dibuat. Layout berfungsi untuk memudahkan dalam mendesain tampilan pada sebuah halaman web.

3.4.1 Perancangan Antar Muka Halaman Pembuka

Perancangan halaman utama dari pembuatan toko online Distro Mosfit Project, akan menampilkan data produk dan menu produk untuk pelanggan. Halaman ini adalah halaman awal sebelum mengakses ke halaman selanjutnya.

(60)

Pada Gambar 3.35 adalah gambar dari halaman pembuka / halaman utama. Bagian atas terdapat banner, dibawah banner terdapat top menu, sebelah kiri terdapat left

menu, dibawah sendiri terdapat footer, pada sebelah kanan terdapat content untuk menempatkan produk-produk Distro Mosfit Project.

3.4.2 Perancangan Antar Muka Halaman Admin

Perancangan halaman utama dari pembuatan toko online Distro Mosfit Project, akan menampilkan data-data informasi tentang produk dari Distro Mosfit Project. Hampir semua halaman lain serupa dengan halaman utama yakni dengan perbedaan dari isi halaman saja yang membedakan dari halamannya. Seperti pada Gambar 3.36 adalah gambar dari halaman utama untuk admin :

Gambar 3.36 Interface Halaman Utama Admin

(61)

48

BAB IV

IMPLEMENTASI SISTEM

Pada bab ini akan dibahas mengenai implementasi dari rancangan sistem yang telah dibuat. Bagian implementasi sistem kali ini meliputi : hardware, software, brainware implementasi, implementasi proses, dan implementasi antarmuka.

Untuk komponen hardware dan software menyesuaikan dengan kebutuhan dalam implementasi pembuatan toko online Distro Mosfit Project. Sedangkan untuk brainware adalah pengguna atau pemakai dari aplikasi ini. Pada sub bab berikut ini akan dijelaskan tentang kebutuhan hardware dan software serta tampilan program.

4.1 Lingkungan Implementasi

Pada bagian ini akan dijelaskan mengenai perangkat keras dan perangkat lunak yang digunakan pada implementasi sistem ini.

Perangkat keras:

- Acer Aspire 4736 Laptop, Intel Core 2 Duo T6500 2.1GHz - Memori 2 GB.

- Modem untuk koneksi data. Perangkat lunak:

- Sistem Operasi Windows XP Professional

(62)

- Xampp 2.5

- PhpMyadmin (localhost) - MySQL (database aplikasi)

- Web browser menggunakan Mozilla Firefox 4.2 Implementasi

Pada sub bab Implementasi aplikasi desain antarmuka ini menjelaskan apa saja yang terlibat dalam sistem yang telah dibuat berdasarkan perancangan yang telah di bahas pada bab III. Pada sistem ini terdapat beberapa menu utama dari pembuatan toko online Distro Mosfit Project antara lain yaitu :

1. Halaman Home / tampilan utama E-Commerce Distro Mosfit Project 2. Halaman Kategori Produk

3. Halaman Tentang Kami 4. Halaman Kontak

5. Halaman Cara Pembelian 6. Halaman Komentar

7. Halaman Keranjang Belanja 8. Halaman Admin

4.2.1 Halaman Utama

(63)

Gambar 4.1 adalah halaman utama aplikasi dari E-Commerce Distro Mosfit Project menampilkan produk baru dan produk terbaik, user juga disuguhkan 7 menu utama pada sistem yaitu menu home, kategori produk, tentang kami, kontak, cara pembelian, komentar, dan keranjang belanja.

Skrip gambar 4.1 terletak pada Index.ctp :

<?php $this->element('rupiah'); ?> <table width="100%" align="center">

<tr> <td valign="top" width="100%"><h3> <font color="#0000FF"> Produk Baru </font> </h3>

<?php $i=0; ?><table width="100%"> <?php foreach ($products as $product): $gambar = $product['Product']['gambar']; $nama = $product['Product']['nama']; ?>

<?php if($i%2==0 || $i==0) { echo "<tr >";} ?> <td valign=top width=80>

<?php echo $this->Html->image("products/$gambar", array ('width' => 75, 'height' => 75)); ?></td>

<?php echo $this->Html->link($nama, array('action' =>

'../products/view', $product['Product']['id_product'])); ?> <br> Rp. <?php echo rupiah($product['Product']['harga']); ?> </td> <?php if($i%2==1 || $i==1) { echo "</tr>"; } $i++; ?>

<td align="center" colspan="2"> <h4> <font color=#0000FF> BEST PRODUCTS </font> </h4> </td>

</tr>

<?php echo $this -> Html -> link ($order['Product']['nama'], array ('action' => '../ products / view',

$order['Product']['id_product'])); ?> </div>

(64)

<?php echo $this->Html->image("products/$image", array ('width' => 75, 'height' => 75)); ?> <br /></td>

</td>

4.2.2 Halaman Kategori Pr oduk

Gambar 4.2 Halaman Kategori Produk

Gambar 4.2 adalah halaman kategori produk digunakan untuk menampilkan produk-produk yang akan di jual dari toko online Distro Mosfit Project.

Skrip gambar 4.2 terletak pada View_product.ctp :

<?php

echo $this->element('paging'); echo $this->element('rupiah'); ?> <?php foreach ($products as $product): $nama = $product['Product']['nama']; $image = $product['Product']['gambar'];

$spesifikasi = $product['Product']['spesifikasi']; $spesifikasi = substr ($spesifikasi, 0, 250); ?>

<?php echo $form->create('Cart', array('url' => array('controller' => 'carts', 'action' => '../carts/buy',

(65)

<?php echo $this->Html->image("products/$image", array ('height' => 75, 'width' => 75)); ?> </td>

<?php echo $form->Html->link($nama, array('action' =>

'../products/view', $product['Product']['id_product'])); ?> </div><br>

<?php echo $spesifikasi; ?> </div><br>

<?php echo rupiah($product['Product']['harga']); ?> </td>

<td>

<?php echo $form->hidden('harga', array('value' => $product['Product']['harga']));

echo $form->input('jumlah', array('size' => 4, 'value' => 1)); ?> </td>

</table>

<?php endforeach; ?>

<?php echo $this->element('paging'); ?>

4.2.3 Halaman Tentang Kami

(66)

Gambar 4.3 adalah halaman tentang kami seperti konsep tentang apa saja produk-produk yang dijual.

4.2.4 Halaman Kontak

Gambar 4.4 Halaman Kontak

Gambar 4.4 adalah halaman kontak digunakan untuk menampilkan profil Distro Mosfit Project seperti nomor telepon, alamat, dan nomor rekening Distro Mosfit Project.

Skrip gambar 4.4 terletak pada Kontak.ctp :

<font size=4> ini adalah website Distro Mosfit Project yang beralamat di nginden semolo 2a, nomer rekening BCA 06061234 atas nama Budi Santoso, jika ada keluhan hubungi No.hp 085622222222 </font></strong>

<br> <span

class="style2">... ...</span><br />

</div>

(67)

4.2.5 Halaman Cara Pembelian

Gambar 4.5 Halaman Cara Pembelian

Gambar 4.5 pada halaman cara pembelian, terdapat informasi cara pembelian / pemesan dari toko online Distro Mosfit Project.

Skrip gambar 4.5 terletak pada Layanan.ctp :

<br>1. Klik pada kategori produk yang ingin Anda pesan<br> <br>2. Pilih barang yang di inginkan<br>

<br>3. Klik Order now untuk memesan<br> <br>4. Isikan data diri anda<br>

<br>5. Setelah mengisi data diri, segera transfer sesuai jumlah harga yang dipesan ke nomer rekening BCA 06061234 atas nama Budi Santoso<br>

<br>6. Apabila telah melakukan pembayaran, segera sms ke

no.085622222222 untuk konfirmasi sudah bayar, maka produk / barang akan segera kami kirimkan.

(68)

4.2.6 Halaman Komentar

Gambar 4.6 Halaman Komentar

Gambar 4.6 adalah halaman komentar, user dapat meninggalkan pesan ke Distro Mosfit Project, pesan tersebut bersifat membangun seperti kritik ataupun saran.

Skrip gambar 4.6 terletak pada index.ctp :

<h3> Add Komentar </h3>

<?php echo $form->create('Comment', array('inputDefaults' => array('label' => false, 'div' => false))); ?>

<?php echo $form->input('nama'); ?>

<?php echo $form->hidden('date', array('value' => date('Y-m-d h-i-s'))); ?></td>

</tr> <tr>

<td>Email</td><td>:</td> <td>

<?php echo $form->input('email'); ?></td> </tr> <tr>

<td valign="top">Pesan</td><td valign="top">:</td>

<td><?php echo $form->textarea('pesan', array ('rows' => '5', 'cols' => '40')); ?>

</td> </tr> <tr>

</table>

<?php echo $this->element('paging'); ?> <p> </p>

(69)

<? foreach ($comments as $comment): ?> <tr>

<th align="left"><a href="mailto:

<? echo $comment['Comment']['email']; ?>">

<? echo $comment['Comment']['nama']; ?></a></th> </tr> <tr>

<td align="left"><? echo $comment['Comment']['pesan']; ?><br><font size=1>Post date on

<?php echo $comment['Comment']['date']; ?></font><hr color="#999999"></td>

</tr>

<? endforeach; ?> </table>

<?php echo $this->element('paging'); ?>

4.2.7 Halaman Keranjang Belanja

Gambar 4.7 Halaman Keranjang Belanja

Gambar 4.7 User dapat melihat keranjang belanja, bila belum belanja maka keranjang belanja kosong.

Skrip gambar 4.7 terletak pada cart.ctp :

<?php

$this->element('rupiah'); if (empty($carts)) {

echo '<center> <h4> KERANJANG BELANJA ANDA KOSONG </h4> </center>'; }

else{

?> <h3> <font color=#FF0000> Keranjang Belanja </font> </h3> <h4> No Faktur : <?php echo $_SESSION['faktur']; ?></h4> <table border="1" cellpadding="0" cellspacing="0">

(70)

<th width="30"> Id </th> <th width="220"> Produk </th> <th width="40"> Qty </th> <th width="100"> Harga </th> <th width="100"> Total </th>

<th colspan="2" width="50"> Aksi </th> </tr> <?php

$grandtotal = 0; $i = 1;

foreach($carts as $cart): ?>

<?php echo $html->image('edit.png', array('url' => array('action' => 'edit', $cart['Cart']['id']))); ?> </td>

<?php echo $html->image('delete.png', array('url' =>

array('action' => 'delete', $cart['Cart']['id']))); ?> </td> </tr>

<?php echo rupiah($grandtotal); ?>   </td> </tr>

<?php echo $html->image('belanja.jpg', array('url' => array('action' => '../homes/'))); ?> </td>

<?php echo $html->image('selesai.jpg', array('url' => array('action' => '../customers/'))); ?> </td>

(71)

4.2.8 Halaman Login Administrator

Gambar 4.8 Halaman Login Admin

Gambar 4.8 merupakan halaman login, halaman ini digunakan admin untuk masuk ke halaman admin.

Skrip gambar 4.8 terletak pada login.ctp :

<?php echo $this->Html->css('login'); ?> <table align=center width=355>

<tr>

<?php echo $this->Session->flash(); ?> </div> </td> </tr>

<h2><font face=tahoma>Login Adm</font></h2>

<?php echo $html->image('login.gif', array('align' => 'left')); ?> <?php echo $form->create('User',

array('action'=>'login','inputDefaults' => array('label' => false, 'div' => false)));

?>

<strong> <?php $session->flash('auth'); ?> </strong> <table>

<tr>

<td> <font face=tahoma size=2> Username </font></td> <td> : </td> <td>

<?php echo $form->input('username'); ?> </td> </tr> <tr>

<td> <font face=tahoma size=2> Password </font></td> <td> : </td> <td>

<?php echo $form->password('password'); ?> </td> </tr> <tr>

<td>

(72)

4.2.9 Halaman Admin

Gambar 4.9 Halaman Admin

Gambar 4.9 adalah halaman admin ketika memasukkan username dan password dengan benar, halaman Admin berfungsi buat admin dalam menginputkan produk, menambah kategori, menghapus komentar, dan melihat transaksi customer yang terjadi di toko online Distro Mosfit Project. Halaman ini memiliki 6 menu diantaranya data pesanan, manajemen produk, kategori, komentar, ubah password, dan menu logout.

4.2.10 Halaman Data Pesanan