Deskripsi jabatan pada struktur organisasi toko Istana Kulit Sukaregang yaitu :
1. Pemilik toko, mempunyai tugas sebagai pemeriksa laporan data pembelian
barang dan laporan penjualan barang hingga pembuatan laporan data laba tiap minggu, bulan bahkan tahun pada toko Istana Kulit Sukaregang.
2. Kasir toko, mempunyai tugas sebagai melayani pembelian konsumen secara
langsung, pembuatan nota penjualan 2 rangkap untuk disimpan kasir dan untuk diberikan kepada konsumen, pembuatan buku laporan data barang,
pembuatan buku laporan penjualan, pembuatan laporan pembelian barang dan pembuatan laporan stok barang.
3. Penjaga toko, mempunyai tugas sebagai penjaga barang yang akan dijual,
dan meskipun penjaga toko kadang-kadang merangkap juga sebagai kasir.
II.2 Landasan Teori
Landasan teori ini akanmenjelaskan mengenai teori-teori mendasar yang relevan terhadap hasil-hasil yang diteliti.
II.2.1Konsep Dasar Sistem
Konsep dasar sistem yang didefinisikan menurut Jogianto 1990 adalah sebagai suatu kesatuan yang terdiri dari dua atau lebih komponen atau subsistem
yang berinteraksi untuk mencapai suatu tujuan. Sedangkan menurut wikipedia, sistem berasal dari bahasa Latin
systēma dan bahasa Yunani sustēma adalah suatu kesatuan yang terdiri komponen atau elemen yang dihubungkan bersama
untuk memudahkan aliran informasi, materi atau energi.
II.2.1.1Karakteristik Sistem
Karakteristik sistem yang didefinisikan menurut Jogianto 1990adalah sistem yang mempunyai komponen-komponen, batas sistem, lingkungan sistem,
penghubung, masukan, keluaran, pengolah dan sasaran.Untuk lebih jelasnya dapat dilihat pada gambar II.3 yang merupakan karakteristik sistem.
Gambar II.3 Karakteristik Sistem [9] Dari gambar II.3 diatas dapat dijelaskan bahwa karakteristik sistem dapat
dibagi menjadi 8 bagian, yaitu : 1.
Komponen Elemen-elemen yang lebih kecil yang disebut sub sistem, misalkan sistem
komputer terdiri dari sub sistem perangkat keras, perangkat lunak dan manusia. Elemen-elemen yang lebih besar yang disebut supra sistem. Misalkan bila
perangkat keras adalah sistem yang memiliki sub sistem CPU, perangkat IO dan memori, maka supra sistem perangkat keras adalah sistem komputer.
2. Boundary Batasan Sistem
Batas sistem merupakan daerah yang membatasi antara suatu sistem dengan sistem yang lainnya atau dengan lingkungan luarnya.Batas sistem ini
memungkinkan suatu sistem dipandang sebagai suatu kesatuan.Batas suatu sistem menunjukkan ruang lingkup dari sistem tersebut.
3. Environment lingkungan Luar Sistem
Lingkungan dari sistem adalah apapun di luar batas dari sistem yang mempengaruhi
operasi sistem.Lingkungan
luar sistem
dapat bersifat
menguntungkan dan dapat juga bersifat merugikan sistem tersebut.lingkungan luar yang mengutungkan merupakan energi dari sistem dan dengan demikian harus
tetap dijaga dan dipelihara. Sedang lingkungan luar yang merugikan harus ditahan dan dikendalikan, kalau tidak akan mengganggu kelangsungan hidup dari sistem.
4. Interface Penghubung Sistem
Penghubung merupakan media perantara antar sub sistem. Melalui penghubung ini memungkinkan sumber-sumber daya mengalir dari satu subsistem
ke subsistem lainnya.Output dari satu sub sistem akan menjadi input untuk subsistem yang lainnya dengan melalui penghubung. Dengan penghubung satu
subsistem dapat berinteraksi dengan sub sistem yang lainnya membentuk satu kesatuan.
5. Input Masukan
Masukan adalah energi yang dimasukkan ke dalam sistem. Masukan dapat berupamaintenance input dan sinyal input. Maintenance input adalah energi yang
dimasukkan supaya sistem tersebut dapat beroperasi. Sinyal input adalah energi yang diproses untuk didapatkan keluaran.
6. Output Keluaran
Keluaran adalah hasil dari energi yang diolah dan diklasifikasikan menjadi keluaran yang berguna dan sisa pembuangan. Keluaran dapat merupakan masukan
untuk subsistem yang lain atau kepada supra sistem. 7.
Proses Pengolahan Sistem Suatu sistem dapat mempunyai suatu bagian pengolah atau sistem itu sendiri
sebagai pengolahnya. Pengolah yang akan merubah masukan menjadi keluaran. Suatu sistem produksi akan mengolah masukan berupa bahan baku dan bahan-
bahan yang lain menjadi keluaran berupa barang jadi. 8.
ObjectiveandGoal Sasaran dan Tujuan Sistem Suatu sistem pasti mempunyai tujuan atau sasaran. Kalau suatu sistem tidak
mempunyai sasaran, maka operasi sistem tidak akan ada gunanya. Sasaran dari sistem sangat menentukan sekali masukan yang dibutuhkan sistem dan keluaran
yang akan dihasilkan sistem. Suatu sistem dikatakan berhasil bila mengenai sasaran atau tujuannya.
II.2.1.2Klasifikasi Sistem
Klasifikasi sistem yang didefinisikan menurut Jogianto 1990adalah suatu bentuk kesatuan antara satu komponen dengan satu komponen lainnya, karena
tujuan dari sistem tersebut memiliki akhir tujuan yang berbeda untuk setiap perkara atau kasus yang terjadi dalam setiap sistem tersebut.
Sehingga, sistem tersebut dapat diklasifikasikan dari beberapa sistem, diantaranya adalah:
1. Sistem abstrak abstract system adalah sistem yang berupa pemikiran atau
ide-ide yang tidak tampak secara fisik. Sedangkan sistem fisik physical system merupakan sistem yang ada secara fisik.
2. Sistem alamiah natural system adalah sistem yang terjadi melalui proses
alam, tidak dibuat manusia. Sedangkan sistem buatan manusia human made system melibatkan interaksi antara manusia dengan mesin.
3. Sistem tertentu deterministic system beroperasi dengan tingkah laku yang
sudah dapat diprediksi. Sedangkan sistem tak tentu probabilistic system adalah sistem yang kondisi masa depannya tidak dapat diprediksi karena
mengandung unsur probalilitas. 4.
Sistem tertutup closed system merupakan sistem yang tidak berhubungan dan tidak terpengaruh dengan lingkungan luar. Sedangkan sistem terbuka
open system adalah sistem yang berhubungan dan terpengaruh dengan lingkungan luar.
II.2.2Konsep Dasar Data dan Informasi II.2.2.1Pengertian Data
Data merupakan salah satu hal utama yang dikaji dalam masalah TIK.Penggunaan dan pemanfaatan data sudah mencakup banyak aspek.Berikut
adalah pembahasan definisi data berdasarkan berbagai sumber. Data menggambarkan sebuah representasi fakta yang tersusun secara
terstruktur, dengan kata lain bahwa “Generally, data represent a structured codification of single primary entities, as well as of transactions involving two or
more primary entities .” Vercellis, 2009: 6. Selain deskripsi dari sebuah fakta,
data dapat pula merepresentasikan suatu objek sebagaimana dikemukakan oleh Wawan dan Munir 2
006: 1 bahwa “Data adalah nilai yang merepresentasikan deskripsi dari suatu objek atau kejadian event
“.
Dengan demikian dapat dijelaskan kembali bahwa data merupakan suatu objek, kejadian, atau fakta yang terdokumentasikan dengan memiliki kodifikasi
terstruktur untuk suatu atau beberapa entitas.
II.2.2.2 Pengertian Informasi
Informasi merupakan sesuatu yang dihasilkan dari pengolahan data.Data yang sudah ada dikemas dan diolah sedemikian rupa sehingga menjadi sebuah
informasi yang berguna.Berikut adalah definisi informasi berdasarkan berbagai sumber.
Informasi merupakan suatu hasil dari pemrosesan data menjadi sesuatu yang bermakna bagi yang menerimanya, sebagaimana dikemukakan oleh Vercellis
2009: 7 “Information is the outcome of extraction and processing activities carried out on data, and it appears meaningful for those who receive it in a
specific domain .”Selain merupakan hasil dari pengolahan data, informasi juga
menggambarkan sebuah kejadian, sebagaimana dikemukakan oleh Wawan dan Munir 2006: 1
bahwa “Informasi merupakan hasil dari pengolahan data dalam suatu bentuk yang menggambarkan suatu kejadian-kejadian event yang nyata
fact dengan lebih berguna dan lebih berarti “.
Dengan demikian informasi dapat dijelaskan kembali sebagai sesuatu yang dihasilkan dari pengolahan data menjadi lebih mudah dimengerti dan bermakna
yang menggambarkan suatu kejadian dan fakta yang ada.
II.2.2.3 Kualitas Informasi
Kualitas dari suatu informasi quality of information tergantung dari tiga hal, yaitu informasi harus akurat accurate, tepat pada waktunya timely basis,
dan relevan relevance. Berikut penjelasannya :
1. Akurat accurate
Informasi harus bebas dari kesalahan-kesalahan dan tidak bisa atau menyesatkan.Akurat juga berarti informasi harus jelas mencerminkan
maksudnya.Informasi harus akurat karena dari sumber informasi sampai ke penerima informasi kemungkinan banyak terjadi gangguan noise yang
dapat merubah atau merusak informasi tersebut. 2.
Tepat pada waktunya timely basis Informasi yang datang pada penerima tidak boleh terlambat, informasi yang
sudah usang tidak akan mempunyai nilai lagi, karena informasi merupakan landasan didalam pengambilan keputusan. Bila pengambilan keputusan
terlambat, maka dapat berakibat fatal untuk organisasi.Dewasa ini
mahalnya nilai informasi disebabkan harus cepatnya informasi tersebut
didapat, sehingga
diperlukan teknologi-teknologi
mutakhir untuk
mendapatkan, mengolah dan mengirimkannya. 3.
Relevan relevance Informasi tersebut mempunyai manfaat untuk pemakainya. Relevansi
informasi untuk tiap-tiap orang satu dengan yang lainnya berbeda, misalnya informasi mengenai sebab-musabab kerusakan mesin produksi kepada
akuntan perusahaan adalah kurang relevan dan akan lebih relevan bila ditujukan kepada ahli teknik perusahaan. Sebaliknya informasi mengenai
harga pokok produksi untuk ahli teknik merupakan informasi yang kurang relevan, tetapi relevan unuk akuntan.
II.2.2.4 Nilai Informasi
Nilai informasi adalah suatu yang penting dan menuntut kemampuan untuk mengakses dan menyediakan informasi secara cepat dan akurat menjadi sangat
esensial bagi sebuah organisasi organisasi komersial atau perusahaan, perguruan tinggi, lembaga pemerintahan, maupun individual pribadi.
Suatu nilai informasi dapat ditentukan oleh dua hal, yaitu manfaat dan biaya.Karena, suatu informasi dapat dikatakan lebih bernilai bila manfaatnya lebih
efektif dibandingkan dengan biaya mendapatkannya. Sedangkan, kegunaan informasi adalah untuk mengurangi hal ketidakpastian
di dalam proses pengambilan keputusan tentang sesuatu keadaan.
II.2.2.5 Siklus Informasi
Siklus informasi adalah gambaran secara umum mengenai proses terhadap data sehingga menjadi informasi yang bermanfaat bagi pengguna. Informasi yang
menghasilkan informasi berikutnya. Demikian seterusnya proses pengolahan data menjadi informasi. Untuk lebih jelasnya akan ada pada gambar II.4.
Gambar II.4 Siklus Informasi [10] Berdasarkan dari gambar diatas bahwa dapat dijelaskan data merupakan
bentuk mentah yang belum dapat bercerita banyak, sehingga perlu diolah lebih lanjut. Data ditangkap sebagai input, diproses melalui suatu model membentuk
informasi. Pemakai kemudian menerima informasi tersebut sebagai landasan untuk membuat suatu keputusan dan melakukan tindakan operasional yang akan
membuat sejumlah data baru. Data baru tersebut selanjutnya menjadi input pada proses berikutnya, begitu seterusnya sehingga membentuk suatu siklus informasi
Information Cycle.
II.2.3Konsep Dasar Sistem Informasi
Suatu sistem pada dasarnya adalah sekolompok unsur yang erat hubungannya satu dengan yang lain, yang berfungsi bersama-sama untuk
mencapai tujuan tertentu. Secara sederhana, suatu sistem dapat diartikan sebagai suatu kumpulan atau himpunan dari unsur, komponen, atau variabel yang
terorganisir, saling berinteraksi, saling tergantung satu sama lain dan terpadu. Dari defenisi ini dapat dirinci lebih lanjut pengertian sistem secara umum, yaitu :
1. Setiap sistem terdiri dari unsur-unsur.
2. Unsur-unsur tersebut merupakan bagian terpadu sistem yang bersangkutan.
3. Unsur sistem tersebut bekerja sama untuk mencapai tujuan sistem.
4. Suatu sistem merupakan bagian dari sistem lain yang lebih besar.
Secara umum informasi dapat didefinisikan sebagai hasil dari pengolahan data dalam suatu bentuk yang lebih berguna dan lebih berarti bagi penerimanya
yang menggambarkan suatu kejadian-kejadian yang nyata yang digunakan untuk pengambilan keputusan. Informasi merupakan data yang telah diklasifikasikan
atau diolah atau di interpretasi untuk digunakan dalam proses pengambilan keputusan.
Sistem informasi adalah suatu sistem dalam suatu organisasi yang mempertemukan kebutuhan pengolahan transaksi harian yang mendukung fungsi
operasi organisasi yang bersifat manajerial dengan kegiatan strategi dari suatu organisasi untuk dapat menyediakan kepada pihak luar tertentu dengan informasi
yang diperlukan untuk pengambilan keputusan.Sistem informasi dalam suatu organisasi dapat dikatakan sebagai suatu sistem yangmenyediakan informasi bagi
semua tingkatan dalam organisasi tersebut kapan saja diperlukan.Sistem ini menyimpan, mengambil, mengubah, mengolah dan mengkomunikasikan
informasi yang diterima dengan menggunakan sistem informasi atau peralatan sistem lainnya.
II.2.3.1 Komponen Sistem Informasi
Sistem informasi terdiri dari komponen-komponen yang disebut blok bangunan building block menurut Wawan dan Munir 2006, yang terdiri dari
komponen input, komponen model, komponen output, komponen teknologi, komponen hardware, komponen software, komponen basis data, dan komponen
kontrol. Semua komponen tersebut saling berinteraksi satu dengan yang lain
membentuk suatu kesatuan untuk mencapai sasaran. Untuk lebih jelasnya komponen sistem informasi dapat dilihat pada gambar II.5.
Gambar II.5 Komponen Sistem Informasi [10] Berdasarkan dari gambar II.5 diatas dapat dijelaskan bahwa ada 8
komponen sistem informasi, yaitu :
1. Komponen input Input mewakili data yang masuk kedalam sistem informasi. Input disini
termasuk metode dan media untuk menangkap data yang akan dimasukkan, yang dapat berupa dokumen dokumen dasar.
2. Komponen model Komponen ini terdiri dari kombinasi prosedur, logika, dan model
matematik yang akan memanipulasi data input dan data yang tersimpan di basis data dengan cara yang sudah ditentukan untuk menghasilkan
keluaran yang diinginkan. 3. Komponen output
Hasil dari sistem informasi adalah keluaran yang merupakan informasi yang berkualitas dan dokumentasi yang berguna untuk semua pemakai
sistem. 4. Komponen teknologi
Teknologi merupakan “tool box” dalam sistem informasi, Teknologi digunakan untuk menerima input, menjalankan model, menyimpan dan
mengakses data, neghasilkan dan mengirimkan keluaran, dan membantu pengendalian dari sistem secara keseluruhan.
5. Komponen hardware Hardware berperan penting sebagai suatu media penyimpanan vital bagi
sistem informasi.Yang berfungsi sebagai tempat untuk menampung database atau lebih mudah dikatakan sebagai sumber data dan informasi
untuk memperlancar dan mempermudah kerja dari sistem informasi. 6. Komponen software
Software berfungsi sebagai tempat untuk mengolah, menghitung dan memanipulasi data yang diambil dari hardware untuk menciptakan suatu
informasi. 7. Komponen basis data
Basis data database merupakan kumpulan data yang saling berkaitan dan berhubungan satu dengan yang lain, tersimpan di perangkat keras
komputer dan menggunakan perangkat lunak untuk memanipulasinya. Data perlu disimpan dalam basis data untuk keperluan penyediaan
informasi lebih lanjut.Data di dalam basis data perlu diorganisasikan sedemikian rupa supaya informasi yang dihasilkan berkualitas.Organisasi
basis data yang baik juga berguna untuk efisiensi kapasitas penyimpanannya.Basis data diakses atau dimanipulasi menggunakan
perangkat lunak paket yang disebut DBMS Database Management System.
8. Komponen kontrol Banyak hal yang dapat merusak sistem informasi, seperti bencana alam,
api, temperatur, air, debu, kecurangan-kecurangan, kegagalan-kegagalan sistem itu sendiri, ketidak efisienan, sabotase dan lain sebagainya.
Beberapa pengendalian perlu dirancang dan diterapkan untuk meyakinkan bahwa hal-hal yang dapat merusak sistem dapat dicegah ataupun bila
terlanjur terjadi kesalahan-kesalahan dapat langsung cepat diatasi.
II.2.3.2 Manfaat Sistem Informasi
Manfaat yang didapat dari sistem informasi yang dapat diklasifikasikan sebagai berikut :
1. Manfaat mengurangi biaya.
2. Manfaat mengurangi kesalahan-kesalahan.
3. Manfaat meningkatkan kecepatan aktivitas.
4. Manfaat meningkatkan perencanaan dan pengendalian manajemen.
Manfaat dari sistem informasi dapat juga diklasifikasikan dalam bentuk keuntungan berwujud tangible benefits dan keuntungan tidak berwujud
intangible benefits.Keuntungan berwujud merupakan keuntungan yang berupa penghematan-penghematan atau peningkatan-peningkatan di dalam perusahaan
yang dapat diukur secara kuantitas dalam bentuk satuan nilai uang. Keuntungan berwujud diantaranya adalah sebagai berikut :
1. Pengurangan-pengurangan biaya operasi.
2. Pengurangan kesalahan-kesalahan proses.
3. Pengurangan biaya telekomunikasi.
4. Peningkatan penjualan.
5. Pengurangan biaya persediaan.
6. Pengurangan kredit tak tertagih
II.2.4Pengertian Ecommerce
Secara umum E-commerce dapat diartikan sebagai segala bentuk transaksi perdagangan barang atau jasa trade of goods and service dengan menggunakan
media elektronik.Ecommerce yang didefinisikan menurut Adi Nugroho 2006 adalah satu set dinamis teknologi, aplikasi dan proses bisnis yang menghubungkan
perusahaan, konsumen dan komunitas tertentu, melalui transaksi elektronik dan perdagangan barang, pelayanan dan informasi yang dilakukan secara elektronik.
Menurut Taryana Suryana dalam bukunya yang berjudul e-commerce menggunakan PHP dan MySQL e-commerce diklasifikasikan ke dalam beberapa
model yaitu: Model store front, Model lelang, Model portal, Model dynamic
princing, Model online Trading, Model online loan, Layanan perjalanan secara online, Layanan Penjualan mobil secara online.
II.2.4.1 Model Store Front
Store front ialah kombinasi proses transaksi, sekuriti, pembayaran secara online serta penyimpanan informasi yang memungkinkan para pedagang untuk
menjual dagangannya di internet melalui website. Store front merupakan konsep dasar perdagangan elektronik dimana terjadi interaksi penjual dan pembeli secara
langsung. Untuk menjalankan store front, seseorang harus mengorganisasikan dalam
bentuk katalog produk yang ditempatkan pada halaman website. Pemilik bisnis online juga harus dapat menerima pembayaran secara online dalam kondisi aman,
mengatur pengiriman dagangan para konsumen serta mengolah data konsumen.Dalam praktiknya, para pedagang online menggunakan teknologi yang
disebut shoppingcart atau kereta belanja.Dengan menggunakan shoppingcart konsumen dapat memasukkan barang barang pesanannya kedalam shoppingcart
nya.
II.2.4.2. Model Lelang
Model lain perdagangan online ialah model lelang, model ini berfungsi sebagai forum dimana para pengguna internet dapat memasuki website dengan
berperan sebagai penawar atau penjual. Jika seseorang berperan sebagai penjual produk, maka yang bersangkutan dapat mencari situs situs yang menyediakan
barang barang yang sedang dia cari, melihat lihat kegiatan penawaran saat itu dan memasang penawaran.
II.2.4.3. Model Portal
Model portal merupakan bentuk lain dari e-commerce. Portal berisi berbagai informasi meliputi mulai berita politik dan ekonomi, olahraga, teknologi, sampai
dengan berita-berita ringan mengenai kehidupan selebriti, gaya hidup, cerita bersambung dan lain-lain.
II.2.4.4. Model Dynamic Pricing
Model dynamicpricing atau penetapan harga merupakan model yang mengikuti pola mekanisme bisnis, yaitu bagaimana antara bisnis berlangsung dan
produk diberi harga, dengan demikian seorang konsumen dapat membeli suatu produk dengan tawaran yang paling rendah. Strategi lain ialah dengan cara
menawarkan produk atau jasa tertentu secara gratis. Model model dalam kategori ini ialah model menentukan sendiri harga
produk yourpricemodel, model harga perbandingan comparisonpricingmodel, model harga sensitive didasarkan kebutuhan demandsensitivepricingmodel,
model barter, model rebate dan model penawaran produk dan jasa secara gratis.
II.2.4.5. Model Online Trading
Model onlinetrading biasanya merupakan perdagangan elektronik dalam bentuk perdagangan sekuritas. Perdagangan saham secara online dilakukan oleh
broker yang mendapatkan komisi karena jasa para broker dalam mengatur jalannya perdagangan saham tersebut. Melalui perdagangan saham secara online
ini, konsumen dapat melakukan penelitian terhadap sekuritas, membeli dan menjual investasi melalui komputer yang tersambung dengan internet.
II.2.4.6. Model Online Loan
Onlineloan atau pinjaman secara online merupakan salah satu bisnis online yang sudah cukup popular, konsumen saat ini dapat mencari pinjaman dengan
bunga rendah melalui internet. Salah satu portal yang member pinjaman secara online adalah e-loan dengan alamat www.eloan.com .situs ini menawarkan
layanan kartu kredit, pinjaman pembelian rumah dan peralatan, serta kalkulator untuk membuat konsumen mahir dalam memutuskan mencari pinjaman.
II.2.4.7. Layanan Perjalanan secara Online
Saat ini bagi orang yang senang bepergian akan lebih mudah mengaturnya karena mulai pemilihan lokasi wisata, booking hotel dan tiket pesawat dapat
dipesan secara online. Para pelancong dapat memilih lokasi baik didalam maupun luar negeri.yang bersangkutan hanya menyediakan biaya dan siap melakukan
perjalanan.
II.2.4.8. Layanan Penjualan Mobil secara Online
Banyak sekali situs penjualan mobil secara online dimana konsumen dapat memilih dan membeli mobil baru maupun mobil bekas. Situs ini menyediakan
simulasi cara memilih mobil dan cara menghitung cicilan, jika seseorang ingin membeli mobil secara kredit dan perhitungan bunganya dilakukan jika sudah
terdapat kesepakatan, dan konsumen tinggal memesan kemudian mobil akan dikirim ke alamat konsumen.
II.2.5Pengertian E-Business
E-Businessyang didefinisikan menurut Adi Nugroho 2006 merupakan kegiatan berbisnis di Internet yang tidak saja pembelian, penjualan dan jasa, tapi
juga pelayanan pelanggan dan kerja sama dengan rekan bisnis baik individual maupun instansi.
II.2.6Aplikasi dan Teknologi Web
Pada awalnya aplikasi web dibangun hanya mengunakan bahasa yang disebut HTML Hyper Text Markup Language. Pada perkembangan berikutnya,
sejumlah skrip dan objek dikembangkan untuk memperluas kemampuan HTML.
II.2.6.1. Definisi internet
Internet merupakan singkatan dari interconnected-networking adalah rangkaian komputer yang terhubung dengan jaringan yang terkoneksi dengan
jaringan yang lain nya dengan menggunakan bantuan router, internet sendiri terkoneksi secara global dan menggunakan protocol TCPIP sebagai protokol
pertukaran paket packet switching communication protocol.
II.2.6.2. Pengertian Website
Secara terminologi, website adalah kumpulan dari halaman-halaman situs, yang biasanya terangkum dalam sebuah domain atau subdomain, yang tempatnya
berada di dalam World Wide Web WWW di Internet. Sebuah halaman web adalah dokumen yang ditulis dalam format html Hyper Text Markup Language,
yang hampir selalu bisa diakses melalui HTTP yaitu protokol yang menyampaikan informasi dari server website untuk ditampilkan kepada para pemakai melalui web
browser.Semua publikasi dari website tersebut dapat membentuk sebuah jaringan informasi yang sangat besar.
Halaman-halaman dari website akan bisa diakses melalui sebuah URL alamat website yang biasa disebut Homepage. URL ini mengatur halaman-
halaman situs untuk menjadi sebuah hirarki, meskipun, hyperlink yang ada di halaman tersebut mengatur para pembaca dan memberitahu mereka sususan
keseluruhan dan bagaimana arus informasi ini berjalan. Beberapa website membutuhkan subskripsi data masukan agar para user
bisa mengakses sebagian atau keseluruhan isi website tersebut.Contohnya, ada beberapa situs-situs bisnis, situs-situs e-mail gratisan, yang membutuhkan
subkripsi agar kita bisa mengakses situs tersebut.
II.2.6.3 Web Server
Serverwebyang didefinisikan menurut Abdul Kadir2001adalah sebuah perangkat lunak server yang berfungsi menerima permintaan HTTP atau HTTPS
dari klien yang dikenal dengan browser web dan mengirimkan kembali hasilnya dalam bentuk halaman-halaman web yang umumnya berbentuk dokumen HTML.
Serverweb yang terkenal diantaranya adalah Apache dan Microsoft Internet Information Service IIS.Apache merupakan serverweb antar-platform,
sedangkan IIS hanya dapat beroperasi di sistem operasi Windows.
II.2.6.4. Paypal
PayPal adalah salah satu alat pembayaran Payment procesors menggunakan internet yang terbanyak digunakan di dunia dan teraman. Pengguna
internet dapat membeli barang di ebay, lisensi software original, keanggotaan situs, urusan bisnis, mengirim dan menerima donasisumbangan, mengirim uang
ke pengguna paypal lain di seluruh dunia dan banyak fungsi lainnya dengan mudah dan otomatis menggunakan internet atau mobile, paypal mengatasi
kekurangan dalam pengiriman uang tradisional seperti cek atau money order yang prosesnya dapat memakan waktu paypal seperti rekening bank, pertama anda
membuat account, lalu dana akan ditarik langsung dari kartu kredit anda ke account tersebut atau dengan dana dari transferan account paypal orang lain ke
saldo balance paypal anda, dan anda sudah dapat menggunakan account paypal untuk bertransaksi.
II.2.6.5. HTTPS SSL
HTTPS singkatan dari HyperText Transport protocol secure, memiliki pengertian sama dengan HTTP tetapi dengan alasan keamanan Security, HTTPS
member tambah Socket Layer SSL. Umumnya website yang mengunakan HTTPS ini adalah website yang memiliki tingkat kerawanan tinggi yang
berhubungan dengan masalah keuangan dan privacy dari pelanggan seperti website perbankan dan investasi.
II.2.7Analisis dan Pemodelan Sistem II.2.7.1 Bagian Alur Dokumen Flowmap
Merupakan diagram alir yang menunjukan arus bagi dokumen, aliran data fisik entitas sistem informasi dan kegiatan operasi yang berhubungan dengan
sistem informasi. Penggambaran niasanya diawali dengan mengamati dokumen apa yang menjadi media data atau informasi dan selanjutnya ditelusuri bagaimana
dokumen termasuk ke bagian entitas mana dokumen tersebut, proses apa yang terjadi terhadap dokumen tersebut dan seterusnya.
II.2.7.2 Diagram Konteks
Diagram konteks yang didefinisikan menurut Fatansyah,Ir. 2002adalah diagram yang terdiri dari suatu proses dan menggambarkan ruang lingkup suatu
sistem. Diagram konteks merupakan level tertinggi dari DFD yang menggambarkan seluruh input ke sistem atau output dari sistem.Ia akan memberi
gambaran tentang keseluruhan sistem. Sistem dibatasi oleh boundary dapat digambarkan dengan garis putus. Dalam diagram konteks hanya ada satu proses.
Tidak boleh ada store dalam diagram konteks.
Diagram konteks berisi gambaran umum secara garis besar sistem yang akan dibuat. Secara kalimat, dapat dikatakan bahwa diagram konteks ini berisi
“siapa saja yang memberi data dan data apa saja ke sistem, serta kepada siapa saja informasi dan informasi apa saja yang harus dihasilkan sistem.”
Jadi, yang dibutuhkan adalah : 1.
Siapa saja pihak yang akan memberikan data ke sistem. 2.
Data apa saja yang diberikannya ke sistem. 3.
Kepada siapa sistem harus memberi informasi atau laporan. 4.
Apa saja isi jenis laporan yang harus dihasilkan sistem. Kata “Siapa” di atas dilambangkan dengan kotak persegi disebut dengan
terminator , dan kata “apa” di atas dilambangkan dengan aliran data disebut
dengan data flow , dan kata “sistem” dilambangkan dengan lingkaran disebut
dengan process. Untuk lebih jelasnya akan ada pada gambar II.6.
Gambar II.6 Diagram Konteks [4]
II.2.7.3 Data Flow Diagram DFD
Data flow Diagram DFD yang didefinisikan menurut Fatansyah,Ir. 2002adalah diagram yang menggunakan notasi-notasi untuk menggambarkan
arus dari sistem. DFD sering digunakan untuk menggambarkan sustu sistem yang telah ada atau sistem baru yang akan dikembangkan secara logika tanpa
mempertimbangkan lingkungan fisik dimana data tersebut mengalir misalnya lewat telepon, surat, dan sebagainya atau lingkungan fisik dimana data tersebut
akan disimpan misalnya file kartu, harddisk, tape, diskette, dan lain sebagianya. Simbol-sombol yang digunakan di DFD mewakili maksud tertentu, yaitu :
1. Externalentity kesatuan Luar atau boundary batas sistem
Setiap sistem pasti memiliki batas sistem boundary yang memisahkan suatu sistem dengan lingkungan luarnya. Kesatuan luar external entity
merupakan kesatuan di lingkungan luar sistem yang dapat berupa orang,
organisasi atau sistem lainya yang berada di lingkungan luarnya yang memberikan input atau menerima output dari sistem.
2. Dataflow arus data
Arus data di DFD diberi simbol panah. Arus data ini mengalir diantara proses, simpanan, dan kesatuan luar.
3. Process proses
Suatu proses adalah kegiatan atau kerja yang dilakukan oleh orang, mesin atau komputer dari hasil suatu arus data yang masuk ke dalam proses untuk
dihasilkan arus data yang akan keluar dari proses. 4.
Data store simpanan data Merupakan simpanan dari data yang dapat berupa suatu file atau database di
komputer, suatu arsip atau catatan manual dan lain sebagainya. Untuk lebih jelasnya komponen-komponen DFD akan ada pada gambar II.7.
Gambar II.7 Komponen-Komponen DFD [4]
II.2.7.4 Entity Relationship Diagram ERD
Entity Relationship Diagram ERD yang didefinieikan menurut Fatansyah,Ir. 2002adalah ilustrasi dari entitas-entitas dalam bisnis dan
relationship antar entitas. ERD memisahkan antara informasi yang dibutuhkan dalam bisnis dari aktivitas-aktivitas yang dilakukan dalam bisnis. Jadi, meskipun
terjadi perubahan proses bisnis, jenis informasi hampir tetap konstan. Oleh karena itu, struktur data juga hampir tidak berubah. Tujuan utama dari penggambaran
ERD adalah untuk menunjukkan struktur objek data entity dan hubungan relationship yang ada pada objek tersebut. ERD berguna bagi profesional sistem,
karena ERD memperlihatkan hubungan antara data store pada Data Flow Diagram DFD.
II.2.7.5 Data Dictionary Kamus Data
Adalah daftar organisasi semua elemen yang ada dalam sistem secara lengkap dengan definisi yang baku sehingga Member dan analisis sistem akan
memiliki pengertian yang sama untuk input, output, komponen penyimpanan dan perhitungannya. Kamus data dapat digunakan pada saat analisis sitem atau
perancangan sistem, kamus data digunakan untuk mencatat terminologi bisnis, aturan standar batasan panjang karakter, nilai, system field.
Untuk membuat spesifikasi elemen data digunakan notasi struktur data, untuk lebih jelasnya akan ada pada tabel II.1.
Tabel II.1 Notasi Struktur Data Notasi
Keterangan
= Terdiri dari, sama dengan,
diuraikan +
Dan Pilihan, boleh atau tidak
N{}M Iterasi
atau pengukuran
mulai N kali sampai M kali []
Pilih salah satu pilihan |
Pemisalan dalam notasi [] Keterangan, komentar atau
saran Key field
II.2.8Software Pendukung II.2.8.1 Personal Home Page PHP
PHP dalam
buku Adi Nugroho
2006E-Commerce Memahami
Perdagangan Modern di Dunia Mayaadalah Personal Home Page, sebuah bahasa scripting yang dibundel dengan HTML, yang dijalankan di sisi server. Sebagain
besar intinya berasal dari C, Java dan Perl dengan beberapa tambahan fungsi khusus PHP.Bahasa ini memungkinkan para pembuat aplikasi web menyajikan
halaman HTML dinamis dan interaktif dengan cepat dan mudah, yang dihasilkan server.PHP juga dimaksudkan untuk mengganti teknologi lama seperti CGI
Common Gateway Interface. PHP membuat proses pengembangan aplikasi menjadi mudah karena
kelebihan-kelebihannya, yaitu : 1.
Script kode program terintegrasi dengan file HTML, sehingga developer bisa berkonsentrasi langsung pada penampilan dokumen webnya.
2. Tidak ada proses compiling dan linking.
3. Berorientasi obyek.
4. Sintaksis pemogramannya mudah dipelajari, dan menyerupai C dan Perl.
Integrasi yang sangat luas ke berbagai serverdatabase. Menulis web yang terhubung ke database menjadi sangat sederhana. Pada umumnya PHP
menggunakan MySQL sebagai database, namun PHP juga mendukung database yang lain seperti Oracle, Sybase, mSQL, Solid, ODBC, PostgreSQL, Adabas D,
FilePro, Velocis, Informix, dBase, UNIX dbm.
II.2.8.2 Hyper Text Markup Language HTML
HTML Hyper Text Markup Language adalah sebuah bahasa markup yang digunakan untuk membuat sebuah halaman web dan menampilkan berbagai
informasi di dalam sebuah browser Internet.Bermula dari sebuah bahasa yang
sebelumnya banyak digunakan di dunia penerbitan dan percetakan yang disebut dengan SGML Standard Generalized Markup Language, HTML adalah sebuah
standar yang digunakan secara luas untuk menampilkan halaman web.HTML saat ini merupakan standar Internet yang didefinisikan dan dikendalikan
penggunaannya oleh World Wide Web Consortium W3C. HTML berupa kode-kode tag yang menginstruksikan browser untuk
menghasilkan tampilan sesuai dengan yang diinginkan. Sebuah file yang merupakan file HTML dapat dibuka dengan menggunakan browser web seperti
Mozilla Firefox atau Microsoft Internet Explorer. HTML juga dapat dikenali oleh aplikasi pembuka email ataupun dari PDA dan program lain yang memiliki
kemampuan browser. HTML dokumen tersebut mirip dengan dokumen teks biasa, hanya dalam
dokumen ini sebuah teks bisa memuat instruksi yang ditandai dengan kode atau lebih dikenal dengan TAG tertentu. Sebagai contoh jika ingin membuat teks
ditampilkan menjadi tebal seperti: TAMPIL TEBAL, maka penulisannya
dilakukan dengan cara: bTAMPIL TEBALb. Tanda bdigunakan untuk
mengaktifkan instruksi cetak tebal, diikuti oleh teks yang ingin ditebalkan, dan diakhiri dengan tanda b untuk menonaktifkan cetak tebal tersebut.
Secara garis besar, terdapat beberapa jenis elemen dari HTML :
1. Struktural. tanda yang menentukan level atau tingkatan dari sebuah teks
contoh,h1Golfh1 akan memerintahkan browser untuk menampilkan “Golf” sebagai teks tebal besar yang menunjukkan sebagai Heading 1
2. Presentational. tanda yang menentukan tampilan dari sebuah teks tidak
peduli dengan level dari teks tersebut contoh, bboldfaceb akan menampilkan bold. Tanda presentational saat ini sudah mulai digantikan
oleh CSS dan tidak direkomendasikan untuk mengatur tampilan teks, 3.
Hypertext. tanda yang menunjukkan pranala ke bagian dari dokumen tersebut
atau pranala
ke dokumen
lain contoh,
a href=http:www.ilmukita.comIlmuKitaaakan menampilkan ilmu
kita sebagai sebuah hyperlink ke URL tertentu, Elemen widget yang membuat objek-objek lain seperti tombol button, list li, dan garis
horizontal hr. Selain markup presentational, markup yang lin tidak menentukan bagaimana tampilan dari sebuah teks. Namun untuk saat ini,
penggunaan tag HTML untuk menentukan tampilan telah dianjurkan untuk mulai ditinggalkan dan sebagai gantinya digunakan Cascading Style Sheets.
Contoh HTML Sederhana : DOCTYPE html
html head
titleIlmu Kita : Belajar HTMLtitle
head body
pBelajar HTMLp body
html
II.2.8.3 MySQL
MySQL adalah sebuah perangkat
lunak sistem manajemen basis
dataSQLbahasa Inggris
: database management
system atau
DBMS yangmultithread, multi-user, dengan sekitar 6 juta instalasi di seluruh
dunia. MySQL AB membuat MySQL tersedia sebagai perangkat lunak gratis dibawah lisensiGNU General Public License GPL, tetapi mereka juga
menjual dibawah lisensi komersial untuk kasus-kasus dimana penggunaannya tidak cocok dengan penggunaan GPL.
Tidak sama dengan proyek-proyek seperti Apache, dimana perangkat lunak dikembangkan oleh komunitas umum, dan hak cipta untuk kode sumber dimiliki
oleh penulisnya masing-masing, MySQL dimiliki dan disponsori oleh sebuah perusahaan komersial Swedia MySQL AB, dimana memegang hak cipta hampir
atas semua kode sumbernya. Kedua orang Swedia dan satu orang Finlandia yang mendirikan MySQL AB adalah : David Axmark, Allan Larsson dan Michael
Monty Widenius.
MySQL memiliki beberapa keistimewaan, antara lain : 1.
Portabilitas. MySQL dapat berjalan stabil pada berbagai sistem operasi seperti Windows, Linux, FreeBSD, Mac Os X Server, Solaris, Amiga, dan
masih banyak lagi. 2.
Perangkat lunak sumber terbuka. MySQL didistribusikan sebagai perangkat lunak sumber terbuka, dibawah lisensi GPL sehingga dapat digunakan
secara gratis. 3.
Multi-user. MySQL dapat digunakan oleh beberapa pengguna dalam waktu yang bersamaan tanpa mengalami masalah atau konflik.
4. Performance tuning, MySQL memiliki kecepatan yang menakjubkan dalam
menangani query sederhana, dengan kata lain dapat memproses lebih banyak SQL per satuan waktu.
5. Ragam tipe data. MySQL memiliki ragam tipe data yang sangat kaya,
seperti signed unsigned integer, float, double, char, text, date, timestamp, dan lain-lain.
6. Perintah dan Fungsi. MySQL memiliki operator dan fungsi secara penuh
yang mendukung perintah Select dan Where dalam perintah query. 7.
Keamanan. MySQL memiliki beberapa lapisan keamanan seperti level subnetmask, nama host, dan izin akses user dengan sistem perizinan
yang mendetail serta sandi terenkripsi.
8. Skalabilitas dan Pembatasan. MySQL mampu menangani basis data dalam
skala besar, dengan jumlah rekaman records lebih dari 50 juta dan 60 ribu tabel serta 5 milyar baris. Selain itu batas indeks yang dapat ditampung
mencapai 32 indeks pada tiap tabelnya. 9.
Konektivitas. MySQL dapat melakukan koneksi dengan klien menggunakan protokol TCPIP, Unix soket UNIX,atau Named Pipes NT.
10. Lokalisasi. MySQL dapat mendeteksi pesan kesalahan pada klien dengan menggunakan lebih dari dua puluh bahasa. Meski pun demikian, bahasa
Indonesia belum termasuk di dalamnya. 11. Antar Muka. MySQL memiliki antar muka interface terhadap berbagai
aplikasi dan
bahasa pemrograman
dengan menggunakan
fungsiAPIApplicationProgramming Interface. 12. Klien dan Peralatan. MySQL dilengkapi dengan berbagai peralatan tool
yang dapat digunakan untuk administrasi basis data, dan pada setiap peralatan yang ada disertakan petunjuk online.
13. Struktur tabel. MySQL memiliki struktur tabel yang lebih fleksibel dalam menangani
ALTER TABLE,
dibandingkan basis
data lainnya
semacamPostgreSQLataupun Oracle.
II.2.8.4 Cascading Style Sheet CSS
Cascading Style
Sheet CSS merupakan
salah satu bahasa
pemrogramanweb untuk mengendalikan beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam.
Sama halnya styles dalam aplikasi pengolahan
kata seperti Microsoft
Wordyangdapat mengatur beberapa style, misalnya heading, subbab, bodytext, footer,images dan style lainnya untuk dapat digunakan bersama-sama dalam
beberapa berkas file. Pada umumnya CSS dipakai untuk memformat tampilan halaman web yang dibuat dengan bahasa HTML dan XHTML.
CSS dapat mengendalikan ukuran gambar, warna bagian tubuh pada teks, warna tabel, ukuran border, warna border, warna hyperlink, warna mouse over,
spasi antar paragraf, spasi antar teks, margin kiri, kanan, atas, bawah, dan parameter lainnya. CSS adalah bahasa style sheet yang digunakan untuk mengatur
tampilan dokumen. Dengan adanya CSS memungkinkan kita untuk menampilkan halaman yang sama dengan format yang berbeda.
Fakta Menggunakan CSS diantaranya : 1.
Telah didukung oleh kebanyakan browser versi terbaru, tetapi tidak didukung oleh browser-browser lama.
2. Lebih fleksibel dalam penempatan posisi layout. Dalam layouting CSS, kita
mengenal Z-Index untuk menempatkan objek dalam posisi yang sama.
3. Menjaga HTML dalam penggunaan tag yang minimal, hal ini berpengaruh
terhadap ukuran berkas dan kecepatan pengunduhan. 4.
Dapat menampilkan konten utama terlebih dahulu, sementara gambar dapat ditampilkan sesudahnya.
5. Penerjemahan CSS setiap browser berbeda, tata letak akan berubah jika
dilihat di berbagai browser 6.
CSS adalah
layouting Masa
Depan dengan
penggabungan bersama XHTML.
II.2.8.5 JavaScript
1. Sejarah JavaScript JavaScript pertama kali diperkenalkan oleh Netscape pada tahun 1995.Pada
awalnya bahasa yang sekarang disebut JavaScript ini dulunya dinamai “LiveScript”” yang berfungsi sebagai bahasa sederhana untuk browser Netscape
Navigator 2 yang sangat populer pada saat itu. Kemudian sejalan dengan sedang giatnya kerjasama antara Netscape dan Sun pengembang bahasa pemrograman
“Java” pada masa itu, maka Netscape memberikan nama “JavaScript” kepada bahasa tersebut pada tanggal 4 desember 1995.
Pada saat
yang bersamaan
Microsoft sendiri
mencoba untuk
mengadaptasikan teknologi ini yang mereka sebut sebagai “Jscript” di browser milik mereka yaitu Internet Explorer 3.JavaScript sendiri merupakan modifikasi
dari bahasa pemrograman C++ dengan pola penulisan yang lebih sederhana dari bahasa pemrograman C++.
2. Pengertian JavaScript JavaScript adalah bahasa pemrograman berbasis prototipe yang berjalan
disisi klien. Jika kita berbicara dalam konteks web, sederhananya, kita dapat memahami JavaScript sebagai bahasa pemrograman yang berjalan khusus untuk
di browser atau halaman web agar halaman web menjadi lebih hidup. Kalau dilihat dari suku katanya terdiri dari dua suku kata, yaitu Java dan Script. Java
adalah Bahasa pemrograman berorientasi objek, sedangkan Script adalah serangkaian instruksi program.
Secara fungsional, JavaScript digunakan untuk menyediakan akses script pada objek yang dibenamkan embedded . Contoh sederhana dari penggunaan
JavaScript adalah membuka halaman pop up, fungsi validasi pada form sebelum data dikirimkan ke server, merubah image kursor ketika melewati objek tertentu,
dan lain lain. 3. Kelebihan JavaScript
JavaScript bekerja pada sisi browser.maksudnya begini : untuk menampilkan halaman web, user menuliskan alamat web di address bar url.
setelah itu, browser “mengambil” file html dengan file JavaScript yang melekat padanya jika memang ada ke server yang beralamat di URL yang diketikan oleh
user. Selesai file diambil, file ditampilkan pada browser. Nah, setelah file JavaScript berada pada browser, barulah script JavaScript tersebut bekerja.
Efek dari Javascript yang bekerja pada sisi browser ini, Javascript dapat merespon perintah user dengan cepat, dan membuat halaman web menjadi lebih
responsif.JavaScript melakukan apa yang tidak bisa dilakukan oleh HTML, PHP, dan CSS : menangani hal
– hal yang membutuhkan respon cepat terhadap aksi dari user.
Contoh : fungsi validasi pada form. ketika anda mengisi sebuah form yang divalidasi menggunakan JavaScript, anda mengetikkan data lalu mengetik submit,
sebelum data dikirimkan ke server , data akan “dicek” terlebih dahulu pada
browser menggunakan fungsi JavaScript yang ada pada halaman web. sehingga, jika memang data yang anda isikan tidak valid, daripada membuang
– buang waktu dengan mengirimkan data ke server baru di validasi di server dan lalu
server mengirimkan respons balik mengenai ketidak validan input data anda, lebih baik cek validasi data form dilakukan secara lokal di browser menggunakan
fungsi JavaScript.
II.2.8.6 Adobe Dreamweaver CS4
Adobe Dreamweaver merupakan program penyunting halaman web keluaran Adobe Systems, yang dulu dikenal sebagai Macromedia Dreamweaver
keluaran Macromedia.Program ini banyak digunakan oleh pengembang web karena fitur-fiturnya yang menarik dan kemudahan penggunaannya.Versi terakhir
Macromedia Dreamweaver sebelum Macromedia dibeli oleh Adobe Systems yaitu versi 8.Versi terakhir Dreamweaver keluaran Adobe Systems adalah versi 11 yang
ada dalam Adobe Creative Suite 5 sering disingkat Adobe CS5. Adobe Dreamweaver CS4 merupakan salah satu aplikasi paling populer
yang digunakan untuk membangun website.Adobe Dreamweaver CS4 memberikan fasilitas pengeditan HTML secara visual.Aplikasi ini menyertakan
berbagai fasilitas dan teknologi pemrograman web terkini seperti HTML, CSS, dan Javascript.Selain itu, aplikasi ini juga memungkinkan pengeditan Javascript,
XML, dan dokumen teks lainnya secara langsung. Aplikasi ini juga mendukung pemrograman Script Server Side seperti PHP, Active Server Page ASP,
ASP.NET, ASP JavaScript, ASP VBScript, ColdFusion, dan Java Server Page JSP.
II.2.8.7 Apache Web Server
Web server merupakan server internet yang mampu melayani koneksi transfer data dalam protocol HTTP. Web server merupakan hal yang terpenting
dari server di internet dibandingkan server lainnya seperti e-mail server, ftp server ataupun news server. Hal ini disebabkan web server telah dirancang untuk dapat
melayani beragam jenis data, dari text sampai grafis 3 dimensi. Kemampuan ini telah menyebabkan berbagai institusi seperti universitas maupun perusahaan dapat
menerima kehadirannya dan juga sekaligus menggunakannya sebagai sarana di internet.
Web server juga dapat menggabungkan dengan dunia mobile wireless internet atau yang sering disebut sebagai WAP Wireless Access Protocol, yang
banyak digunakan sebagai sarana handphone yang memiliki fitur WAP. Dalam kondisi ini, webserver tidak lagi melayani data file HTML tetapi telah melayani
WML Wireless Markup Language. Salah satu software yang biasa digunakan oleh banyak web master di dunia
adalah apache. Software tersebut dapat kita download secara gratis dari web resmi apache, yaitu http:www.apache.org. Dalam Penggunaannya Apache merupakan
software open source yang sekarang ini sudah merebut pasar dunia lebih dari 50. Web server ini fleksibel terhadap berbagai system operasi seperti
windows9xNT ataupun unixlinux. Apache merupakan turunan dari webserver yang dikeluarkan oleh NCSA yaitu NCSA HTTPd pada sekitar tahun 1995.
Kelebihan webserverApache : 1.
Freeware software gratisan. 2.
Mudah di install. 3.
Mampu beroperasi pada berbagai platform sistem operasi. 4.
Mudah mengkonfigurasinya. Apache Web server mudah dalam menambahkan periferal lainnya ke dalam
platform web servernya, misalnya : untuk menambahkan modul, cukup hanya
menset file konfigurasinya agar mengikutsertakan modul itu ke dalam kumpulan modul lain yang sudah dioperasikan.
II.2.8.8 Web Browser
Penjelajah web atau biasa disebut web browser, disebut juga sebagai perambah atau peramban, adalah perangkat lunak yang berfungsi menampilkan
dan melakukan interaksi dengan dokumen-dokumen yang disediakan oleh server web. Penjelajah web yangpopuleradalah Google Chrome, Opera dan Mozilla
Firefox.Penjelajahwebadalah jenis agen pengguna yang paling sering digunakan. Web sendiri adalah kumpulan jaringan berisi dokumen dan tersambung satu
dengan yang lain, yang dikenal sebagai World Wide Web. Adapun untuk lebih jelasnya tentang beberapa istilah yang sering muncul
pada saat kita menggunakan web browserakan ada pada tabel II.2. Tabel II.2 Istilah Web Browser
1. Mozilla Firefox Mozilla Firefox adalah sebuah program browser seperti Internet
Explorer.Tetapi Mozilla Firefox memiliki beberapa kelebihan dibandingkan Internet Explorer.
Contoh saja, pada Internet Explorer tidak memiliki fasiltas memblock pup up atau menutup sebuah site yang meminta mendownload sebuah program.
Ketika mencoba program Mozilla Firefox, keunggulan pada program browser ini mampu menjangkau sebuah site yang tidak dapat dibuka oleh Internet
Explorer. Fitur lain, adalah download manager. Pada IE biasanya untuk mendownload
sebuah file, maka program akan membuat sebuah windows khusus untuk melihat proses download. Sedangkan dengan IE, proses download ditampilkan dengan
beberapa windows. Tidak itu saja, Mozilla Firefox mengijinkan penguna untuk melakukan resume dan suspend proses download.
Fasilitas multiple browser, sudah dimiliki oleh Firefox.Untuk membuka beberapa website, Firefox dapat membuka beberapa windows dalam satu frame
browser, atau memisahkan dengan beberapa windows seperti mengunakan Internet Explorer. Cara ini sebenarnya dapat dilakukan dengan program bantu bila
mengunakan engine Internet Explorer. Misalnya Avant Browser yang mampu membuka dan membagi beberapa site dalam satu program.Tetapi keunggulan
multiplebrowser pada Firefox diatas Avant browser.Karena Firefox juga mampu
membuka 2 windows berbeda dengan multiplebrowser.Cara ini sangat berguna bila anda mencari data ketika melakukan surfing di Internet, dimana satu windows
untuk mencari satu data dari beberapa website, sedangkan windows lain mencari data lainnya. Sehingga data yang anda cari tidak menumpuk pada sebuah program
dan dapat dipisah pisah sesuai kategori yang anda bagi pada program Firefox. Banyak lagi fitur pada program Firefox, seperti penampilan yang dapat
dirubah oleh pemakai dengan mendownloadskin untuk Firefox. Tetapi fungsi browser adalah memudahkan anda membuka site tentunya, dan Firefox memiliki
kecepatan lebih baik dibandingkan IE.Minusnya masih terdapat kompatibel antara site yang di disain bagi Internet Explorer terkadang terlihat sedikit berbeda ketika
dibuka dengan Firefox.Untuk kemampuan yang kurang, terkadang site tidak dapat dibuka bila membuka site terlalu banyak dan masih memiliki bug pada program.
Dan kontrol yang lebih banyak mengunakan menu dibandingkan fungsi key pada keyboard, sehingga pemakai harus selalu mengarahkan icon ke menu program.
Untuk lebih jelasnya akan ada pada gambar II.8.
Gambar II.8 Browser Mozilla Firefox
2. Google Chrome GoogleChrome adalah
sebuah penjelajah web sumber
terbuka yangdikembangkanoleh Google denganmenggunakan mesin rendering W ebKit.Proyek sumber terbukanya sendiri dinamakan Chromium.Versi beta untuk
Microsoft Windows diluncurkan pada 2 September 2008 dalam 43 bahasa. Untuk lebih jelasnya akan ada pada gambar II.9.
Gambar II.1 Browser Google Chrome 3. Opera
Opera adalah penjelajah web dan paket perangkat lunak internet antar platform. Opera terdiri dari kumpulan perangkat lunak untuk internet
seperti penjelajah web, serta perangkat lunak untuk membaca dan mengirim surat elektronik. Opera dibuat oleh Opera Software yang bermarkas di Oslo, Norwegia.
Opera dapat dijalankan di berbagai sistem operasi, termasuk Microsoft Windows, Mac OS X, Solaris, FreeBSD dan Linux.
Opera dikenal karena memiliki banyak fitur yang kemudian diadopsi oleh penjelajah web lainnya.Meskipun memiliki berbagai kelebihan, Opera hanya
mendapat sebagian kecil pangsa pasar browser komputer pribadi di seluruh dunia.Namun, Opera memiliki pangsa pasar yang lebih besar pada perangkat
mobileseperti ponsel, smartphone, dan personal digital assistant. Berbagai edisi Opera dapat digunakan untuk perangkat yang menggunakan Maemo, BlackBerry,
Symbian,Windows Mobile, Android, dan sistem operasi iPhone, serta Java ME. Sekitar
120 juta
ponsel telah
dipasarkan dengan browser Opera
di dalamnya.Opera adalah satu-satunya penjelajah web komersial yang tersedia
untuk Nintendo DS dan Wii.Beberapa televisi memiliki browser Opera dalam set- top box atau kotak pengaturannya. Adobe Systems memiliki lisensi teknologi
Opera untuk digunakan dalam Adobe Creative Suite. Untuk lebih jelasnya akan ada pada gambar II.10.
Gambar II.2 Browser Opera
61
BAB III
ANALISIS DAN PERANCANGAN SISTEM
III.1 Analisis Sistem
Analisis sistem dapat didefinisikan sebagai penguraian dari suatu sistem informasi yang utuh kedalam bagian-bagian komponennya dengan maksud untuk
mengidentifikasi dan mengevaluasi permasalahan-permasalahan, kesempatan- kesempatan, hambatan-hambatan yang terjadi dan kebutuhan-kebutuhan yang
diharapkan sehingga dapat diusulkan perbaikan-perbaikannya. Sebagai analisis pada sistem yang sedang berjalan, akan dibahas bagaimana
prosedur dan aliran dokumen yang sedang berjalan yang digambarkan dalam bentuk flow map dan analisis sistem non fungsional yang meliputi perangkat keras
dan perangkat lunak yang digunakan, serta analisis user yang terlibat. Dengan melakukan analisa terhadap sistem yang sedang berjalan bertujuan
sebagai dasar perancangan atau perbaikan sistem lama.Dari hasil analisis tersebut dapat diketahui kelemahan atau kekurangan pada sistem yang lama sehingga
dapat dirancang dan diperbaiki menjadi suatu sistem yang lebih efektif dan efisien.
III.1.1. Analisis Masalah
Selama ini kegiatan penjualan dan pembelian yang dilakukan pada toko Istana Kulit Sukaregang
menggunakan mekanisme Transaksi pembelian dengan cara calon konsumen datang ke toko untuk melihat-lihat barang yang telah
dipajang di etalase toko, apabila konsumen ingin membeli barang tersebut maka konsumen membawa barang tersebut ke meja kasir untuk membayar harga barang
yang telah disepakati. Pada meja kasir terjadi transaksi penjualan dan pembelian barang, konsumen memberikan uang kepada kasir lalu kasir membuatkan bon
sebagai tanda bukti pembayaran kepada konsumen.Setelah bon untuk konsumen diberikan maka kasir juga memberikan barang yang telah dibeli oleh konsumen,
dan konsumen dapat langsung membawa barang tersebut ke luar toko. Saat ini media promosi yang digunakan toko Istana Kulit Sukaregang cara memajang
barang di etalase dan dengan memanfaatkan fasilitas social network. Berdasarkan permasalahan di atas penulis membatasi dalam pembangunan
aplikasi yang akan dibuat. Adapun batasan pembatasan masalah yang akan penulis batasi adalah sebagai berikut:
1. Pembayaran dengan paypal, transfer antar bank atau COD Cash And Delivery.
2. Sistem keamanan dengan HTTPS SSL. 3. Produk ini hanya mengelola tiga jenis kategori yaitu jaket kulit pria,
jaket kulit wanita dan jaket kulit sport.
4. Pengiriman hanya dilakukan dengan TIKI. Untuk
Proses pengiriman barang akan dilakukan setelah pihak toko Istana Kulit Sukaregang
menerima bukti pembayaran yang dilakukan secara online paypal maupun offline transfer anatar bankatas pembelian produk tersebut, dan
pihak toko Istana Kulit Sukaregangakan menelepon konsumen sehari sebelum proses pengiriman.
5. Sistem komunikasi antara sistem dengan user dengan email, telepon terhadap admin dan YM.
6. Sistem Promosi dengan facebook.
III.1.2Analisis Pengkodean
Kode merupakan penyajian dalam mengklafikasikan data sehingga mudah dalam proses masukan ke dalam sistem program. Pengunaan kode biasanya untuk
mengidentifikasi data, simbol kode biasanya digunakan pada hampir semua proses yang ada keterkaitannya dengan data. Berikut adalah format untuk kode barang
yang ada di toko Istana Kulit Sukaregang : Kode barang
Format : XXX-XX-XXX Warna
Nomor produksi barang Jenis kategori
Untuk jenis kategori kodenya adalah sebagai berikut : JKP
: Jaket Kulit Pria
JKW : Jaket Kulit Wanita
JKS : Jaket Kulit Sport
Contoh : Kode barang JKP-01-HTM
Barang dengan kategoriJaket Kulit Pria dengan nomor produksi 01 dan warana barang hitam.
III.1.3Analisis Prosedur yang Sedang Berjalan
Prosedur merupakan urutan kegiatan yang tepat dari tahapan-tahapan yang menerangkan mengenai proses apa saja yang dikerjakan, siapa yang mengerjakan
proses tersebut dan bagaimana proses tersebut dapat dikerjakan. Berdasarkan dari hasil wawancara dengan pihak toko Istana Kulit
Sukaregang, prosedur yang terlibat pada sistem yang sedang berjalan di toko Istana Kulit Sukaregang adalah sebagai berikut :
1. Prosedur Penjualan Barang.
2. Prosedur Laporan Penjualan Harian.
Berikut adalah penjelasan prosedur-prosedur yang terlibat dalam sistem penjualan produk di toko Istana Kulit Sukaregang yaitu :
III.1.3.1 Prosedur Penjualan Barang
Adapun proses-proses yang terjadi dalam prosedur penjualan produk yang sedang berjalan di toko Istana Kulit Sukaregang adalah sebagai berikut :
1. Konsumen datang langsung ke toko Istana Kulit Sukaregang untuk memilih
barang yang akan dibeli. 2.
Konsumen memilih barang yang akan dibelinya pada etalase toko dan brosur yang telah disediakan oleh kasir. Setelah konsumen mendapatkan
barang yang akan dibelinya, konsumen memberikan barang tersebut ke penjaga toko.
3. Penjaga toko menerima barang yang akan dibeli oleh konsumen, kemudian
mencatat data barang yang akan dibeli. 4.
Data pembelian kemudian diserahkan kepada kasir oleh penjaga toko. 5.
Kasir mencatat nota penjualan yang akan di serahkan kepada konsumen 6.
Konsumen membayar sesuai dengan total harga yang telah tertera dalam nota penjualan. Kemudian, kasir akan memberikan barang yang dibeli
kepada konsumen. 7.
Kasir mencatat data barang yang terjual ke dalam buku besar. Untuk lebih jelasnya dapat dilihat pada gambar III.1 dibawah ini yang
merupakan diagram alir dokumen flow map prosedur penjualan barang :
Flowmap Penjualan Barang
Kasir Penjaga Toko
Konsumen
Nota Penjualan 1
pembuatan nota penjualan
Pencatatan data barang yang terjual
A2 A1
Buku Penjualan Yang Sudah
Dicatat Pembelian
barang
Pencatatan data barang
Pembelian barang
Nota Penjualan 2
Data barang yang dibeli
2 Nota penjualan
1
Keterangan : A1 : Arsip Nota Penjualan Untuk Kasir.
A2 : Buku Penjualan Yang Sudah Dicatat.
Gambar III.1Flowmap Penjualan Barang
III.1.3.2 Prosedur Laporan Penjualan Harian
Prosedur laporan penjualan harian yang sedang berjalan di toko Istana Kulit Sukaregang adalah sebagai berikut :
1. Kasir membuat laporan penjualan dari buku penjualan yang sudah dicatat.
2. Buku laporan penjualan yang sudah dicatat dibuat laporan untuk pemilik
toko. 3.
Laporan penjualan dibuat dua rangkap. Rangkap kedua diberikan kepada pemilik toko dan rangkap pertama dijadikan arsip untuk kasir.
4. Pemilik toko menerima laporan penjualan penjualan perhari dari kasir.
5. Laporan tersebut diperiksa dan disahkan oleh pemilik toko kemudian
ditandatangani. 6.
Laporan yang telah ditandatangani lalu dijadikan arsip untuk pemilik toko. Untuk lebih jelasnya dapat dilihat pada gambar III.2 dibawah ini yang
merupakan diagram alir dokumen flowmap prosedur laporan penjualan harian :
Prosedur Laporan Penjualan Harian
Pemilik Kasir
2 Laporan Penjualan Yang
Telah Diperiksa
11 Laporan Penjualan
A2 2
Pembuatan Laporan
2 A4
A3 Pengesahan
Buku penjualan yang sudah dicatat
Keterangan : A2 : Buku Penjualan Yang Sudah Dicatat.
A3 : Arsip Laporan Penjualan Untuk Kasir. A4 : Arsip Laporan Penjualan Untuk Pemilik Toko.
Laporan Penjualan 1
Gambar III.2 Flowmap Laporan Penjualan Harian
III.1.4 Analisis Kebutuhan Non Fungsional
Analisa kebutuhan non fungsional menggambarkan keadaan sistem yang ada di toko Istana Kulit Sukaregang, diantaranya perangkat keras, perangkat
lunak, serta user sebagai bahan analisis kekurangan dan kebutuhan yang harus dipenuhi dalam perancangan sistem yang akan diterapkan.
III.1.4.1 Analisis User Pengguna Sistem
Sistem yang akan dibangun ini digunakan oleh 4 jenis pengguna utama yaitu administrator, operator, pengunjung dan member. Administrator dapat melakukan
pengelolaan terhadap petugas atau operator, dapat melihat pelanggan atau member, dapat mengatur website dan dapat mengganti password administrator,
kalau operator dapat mengelola kategori barang, kelola barang, kelola pesanan, laporan, ongkos kirim, melihat komentar barang, mengatur file dan mengganti
password. Sedangkan, member hanya dapat melakukan pemesanan barang dan melihat transaksi yang telah dilakukan oleh member.Kalau pengunjung hanya
dapat melihat halaman dan melihat barang. 1. Analisis Pengguna Administrator
Adapun rincian analisis pengguna administrator
dapat dilihat pada tabel III.1.
Tabel III.1 Analisis Pengguna Administrator Pengguna
Administrator Tanggung Jawab
Mengelola data yang terdapat di aplikasi. Hak akses
Mengelola profil administrator, melakukan pengelolaan pengaturan, pengelolaan operator
dan melihat data member.
Tingkat Pendidikan Minimal SMA sederajat.
Tingkat Keterampilan
Menguasai komputer, pemahaman yang cukup untuk mengelola data dalam web serta
memiliki pengetahuan tentang internet.
Pengalaman Tidak ada
Jenis Pelatihan Cara menggunakan aplikasi.
2. Analisis Pengguna Operator Berikut ini merupakan rincian
analisis pengguna operator dapat dilihat pada
tabel III.2. Tabel III.2 Analisis Pengguna Operator
Pengguna Operator
Tanggung Jawab Mengelola data yang terdapat di aplikasi.
Hak akses Mengelola
profil operator,
melakukan pengolaan kategori produk, pengelolaan,
produk, pengelolaan pemesanan, pengelolaan laporan, pengelolaan ongkos kirim dan
pengelolaan diskon.
Tingkat Pendidikan Minimal SMA sederajat.
Tingkat Keterampilan
Menguasai komputer, pemahaman yang cukup untuk mengelola data dalam web serta
memiliki pengetahuan tentang internet.
Pengalaman Tidak ada
Jenis Pelatihan Cara menggunakan aplikasi.
3. Analisis Pengguna Member Berikut ini merupakan rincian
analisis pengguna member dapat dilihat pada
tabel III.3. Tabel III.3 Analisis Pengguna Member
Pengguna Member
Tanggung Jawab Melakukan pemesanan.
Hak Akses Melakukan pemesanan barang, mengubah data
pribadi, melihat transaksi yang sudah pernah dilakukan, mengelola keranjang belanja.
Tingkat Pendidikan Apa saja.
Tingkat Keterampilan
Dapat menggunakan komputer dan dapat menggunakan internet untuk browsing.
Pengalaman Pernah melakukan transaksi pembelian secara
online. Jenis Pelatihan
Tidak ada
4. Analisis Pengguna Pengunjung Berikut ini merupakan rincian
analisis pengguna pengunjung dapat dilihat
pada tabel III.4. Tabel III.4 Analisis Pengguna Pengunjung
Pengguna Pengunjung
Tanggung Jawab Tidak ada
Hak Akses Dapat melihat katalog barang yang terdapat di
website tersebut dan tidak dapat melakukan pemesanan barang karena belum melakukan
registrasi, dapat menjadi member dengan melakukan registrasi.
Tingkat Pendidikan Tidak ada
Tingkat Dapat menggunakan komputer dan dapat
Keterampilan menggunakan internet untuk browsing.
Pengalaman Tidak ada
Jenis Pelatihan Tidak ada
Dari hasil perbandingan analisis non fungsional terhadap kebutuhan fungsional, bahwa pengguna sistem pada pihak toko tidak perlu melakukan
pelatihan khusus untuk menggunakan aplikasi yang akan dibangun.
III.1.4.2 Analisis Perangkat Keras Hardware
Analisis perangkat keras hardware merupakan proses analisis yang lebih menekankan kepada aspek pemanfaatan perangkat keras yang selama ini telah
dimiliki toko Istana Kulit Sukaregang. Setelah dilakukan analisis terhadap perangkat keras yang dimiliki kepada
toko Istana Kulit Sukaregang ternyata toko Istana Kulit Sukaregang belum mempunyai seperangkat komputer. Oleh sebab itu, untuk dapat mendukung
sistem e-commerce yang akan dibangun dibutuhkan seperangkat komputer, printer dan perlu adanya akses internet agar transaksi dapat berjalan secara maksimal
karena dilakukan secara online serta memudahkan dalam pengolahan database yang akan disimpan di server dan printer untuk mencetak rekapitulasi penjualan.
Adapun kebutuhan minimal spesifikasi perangkat keras Hardware komputer yang akan dibangun yaitu :
1. Processor dengan kecepatan 2,8 GHz
2. RAM sebesar 512 MB
3. VGA Card 256 MB
4. Kapasitas free hardisk 80 GB
5. Monitor dengan resolusi layar 1024 x 768
6. Keyboard
7. Mouse
8. Printer
Dari hasil perbandingan antara analisis non fungsional dan kebutuhan fungsional yang ada maka diambil kesimpulan bahwa untuk kebutuhan sistem e-
commerce pada toko Istana Kulit Sukaregang, pihak toko harus menyediakan sebuah komputer baru yang diperuntukan hanya untuk mengelola sistem.
III.1.4.3 Analisis Perangkat Lunak Software
Analisis perangkat lunak software merupakan proses analisis yang lebih menekankan kepada aspek pemanfaatan perangkat lunak yang selama ini telah
dimiliki oleh toko Istana Kulit Sukaregang. Dikarenakan toko Istana Kulit Sukaregang belum memiliki seperangkat
komputer maka dibutuhkan analisis perangkat lunak software yang akan digunakan pada komputer tersebut untuk dapat mendukung sistem e-commerce.
Adapun kebutuhan minimal spesifikasi perangkat lunak software pada komputer yang akan dibangun pada aplikasi ini adalah sebagai berikut :
1. Sistem operasi Windows XP SP 2
2. Web Browser agar dapat mengakses aplikasi ini dapat menggunakan
Mozilla Firefox 3, Google Chome 5 dan Opera 10 3.
Yahoo Messenger 10.0.0.1270 sebagai media komunikasi Adapun kebutuhan perangkat lunak yang digunakan dalam pembangunan
aplikasi ini adalah tercantum pada tabel III.5 dibawah ini : Tabel III.5 Analisis Perangkat Lunak
No Perangkat Lunak
Keterangan 1
Sistem Operasi Windows XP SP 2 32 Bit
2 Bahasa Pemrograman
PHP 3
DBMS MySQL 5.0.27
4 Web browser
Mozilla firefox 3.6.5 5
Code editor Adobe Dreamweaver CS4
6 DFD modeler
Microsoft Visio 2007 7
web server XAMPP 2.5.8
Dari hasil perbandingan antara hasil analisis dan kebutuhan non fungsional maka pihak instansi membutuhkan perangkat keras komputer dengan
menggunakan sistem operasi Windows XP SP 2, web browser untuk mengakses website dan yahoo messenger sebagai media komunikasi.
III.1.5 Analisis Perancangan Basis Data
Dalam memodelkan data dan menggambarkan hubungan antara data yang ada pada sistem digunakan alat bantu yaitu diagram E-R. Sistem yang
akandibangun dapat dilihat hubungan antar entitas. Untuk itu sistem baru yang akan dirancang memiliki usulan ERD yang dapt dilihat pada gambar III.3.
kota
detail_barang pesanan
provinsi kategori
barang pelanggan
petugas pengaturan
mengelola
mengelola
memiliki mengelola
memiliki
memiliki memiliki
memiliki melakukan
detail_pesanan 1
1 1
1
n n
n n
n 1
1
n n
1 1
1 1
1
n n
n 1
n
n
id_petugas id_petugas
id_pengaturan
id_petugas id_provinsi
id_provinsi id_kota
id_kategori
id_petugas
id_komentar id_barang
id_pelanggan
id_lihat_barang id_barang
id_pelanggan
id_rating_barang id_barang
id_pelanggan id_barang
id_kategori id_detail_barang
id_barang
id_detail_pesanan id_detail_barang
id_pesanan id_pesanan
id_pelanggan id_pelanggan
komentar
lihat_barang
rating_barang melakukan
melakukan
melakukan memiliki
memiliki memiliki
Gambar III.3ERD
III.1.6 Analisis Kebutuhan Fungsional
Analisis kebutuhan fungsional adalah analisis terhadap kebutuhan secara fungsional baik dalam aliran data ataupun informasi. Analisis kebutuhan
fungsional digambarkan dalam analisis terstruktur yang akan digambarkan pada sub bab berikutnya.
III.1.6.1 Perancangan Diagram Konteks
Diagram konteks merupakan alat untuk struktur analisis.Pendekatan struktur ini untuk menggambarkan sistem secara garis besar atau secara keseluruhan. Pada
diagram konteks ini sistem informasi yang dibuat akan menghasilkan sumber informasi yang dibutuhkan dan tujuan yang ingin dihasilkan.
Diagram konteks berfungsi untuk menggambarkan hubungan antara entitas luar, masukan dan keluaran sistem, yang dipresentasikan dengan lingkaran
tunggal yang mewakili keseluruhan sistem.Diagram konteks dari sistem E- Commerce pada toko Istana Kulit Sukaregang dapat dilihat pada gambar III.4.
Aplikasi E-Commerce pada Toko Istana Kulit Sukaregang
Pengunjung Operator
member
Administrator Data daftar member
Data aktifitas registrasi Data cara pesan
Data profil Data kategori
Data barang Data tanya jawab
Data hubungi kami Data ongkos kirim
Data diskon Data terbaru
Data banyak dilihat Data banyak komentar
Data banyak dibeli Data komentar
Data pencarian barang Info daftar member
Info registrasi data berhasil Info cara pesan
Info profil Info kategori
Info barang Info tanya jawab
Info hubungi kami Info ongkos kirim
Info diskon Info terbaru
Info banyak dilihat Info banyak komentar
Info banyak dipesan Info banyak dibeli
Info pencarian barang Data login operator
Data kategori Data barang
Datapesanan Data ongkos kirim
Data laporan Data komentar
Datapassword operator
Data login admin Data petugas
Data pelanggan Data pengaturan
Data password admin Info login invalid
Info petugas Info pelanggan
Info pengaturan Info password admin
Info login invalid operator Info kategori
Info barang Info pesanan
Info ongkos kirim Info laporan
Info komentar Info password operator
Info cara pesan Info profil
Info kategori Info barang
Info tanya jawab Info hubungi kami
Info ongkos kirimInfo login invalid
Info keranjang belanja Info ongkos kirim
Info diskon Info pencarian barang
Info komentar Info login valid member
Paypal Web email
D ata
p e
m b
a y
a ra
n In
fo p
emb ay
a ra
n Data cara pesan
Data profil Data kategori
Data barang Data tanya jawab
Data hubungi kami Data login pelanggan
Data keranjang belanja Data ongkos kirim
Data diskon Data pencarian barang
Data komentar Data login member
Info registrasi data Berhasil Info pemesanan
Info pembayaran Info pengiriman
Social Network Info barang
Tracking Info pengiriman barang
Gambar III.4 Diagram Konteks Website E-commerce Toko Istana Kulit Sukaregang Garut
III.1.6.2 Perancangan Data Flow Diagram DFD
Data Flow Diagram merupakan suatu media yang digunakan untuk menggambarkan aliran data yang mengalir pada suatu sistem informasi. Dalam
Data Flow DiagramDFD terdiri dari entitas luar, aliran data, proses dan penyimpanan data. Salah satu keuntungan menggunakan DFD adalah
memudahkan pemakai yang kurang menguasai bidang komputer untuk dapat mengerti sistem yang akan dikerjakan. Berikut adalah gambar DFD dari
pembangunan aplikasi e-commerce pada toko Istana Kulit Sukaregang adalah sebagai berikut :
1. DFD Level 0
Diagram alir data level nol dari sistem e-commerce di toko Istana Kulit Sukaregang dapat dilihat pada gambar III.5.
member operator
administrator login
Data login administrator Info login invalid
Data login operator Info login invalid
Data login member
Info login invalid petugas
pelanggan data member
data login member Data l
ogi n admi
ni s
tr ator
, op
er a
tor Data l
o gi
n a
dmi n
is tr
ator ,
ope rator
Pengelolaan data user
Dat a
ad mi
ni s
tr ator
Info data admi
ni s
tr a
tor Data operator
Info data operator
Data member In
fo data member data member
data member data operator,
administrator data operator,
administrator 1
Pendaftaran member
Data member Info data member
Data member data member
Login valid administrator, operator,member
Pengelolaan data master
pemesanan Request data kategori
Request data barang In
fo data k atego
ri Info data
b ar
a ng
In fo detai
l b
ar a
ng
info kategori info harga
info barang info diskon
info pesanan info ongkos kirim
info laporan info komentar
data kategori data harga
data barang data diskon
data pesanan data ongkos kirim
data laporan data komentar
kota kategori
Data kota data kota
Data kategori data kategori
Login valid operator, member
Data pesanan, data detail pesanan
Konfirmasi pesanan
detail_pesanan pengunjung
Info data k
ategor i
In fo data
b ar
a ng
lihat data kategori lihat data barang
2 3
Data bar ang
Penyajian data barang
data k ategor
i
Data kota Penyajian data
history data pesanan
Re ques
t data pes a
nan ,
reques t data detai
l pes anan
In fo data pes
anan, i
nf o
da ta detai
l p
es ana
n
data p
es an
an d
at a
pe s
ana n
d at
a de
tai l
p es
an an
d at
a de
ta il pes
an an
data pesanan data
detail_pesanan Login valid member
Login valid member
4 5
7 Data barang
Login valid member Pencarian
barang 6
Data bar ang,
da ta k
a teg
or i
Info data b
ar a
ng, in
fo da
ta k a
teg or
i da
ta bar ang, d
at a
k at
e gor
i
data kategori In
fo data bar ang
, Info data
k at
e gor
i
Data pesanan 8
barang data bar
ang
data barang data barang
data barang komentar
Data komentar Data
komentar
data provinsi provinsi
data provinsi lihat
o ngk
o s
k ir
im, umpan bal
ik
In fo ong
k os
k ir
im, umpan
ba lik
Info ongk os
k ir
im ,
u mpan bal
ik 9
Pengaturan Website
Info profil toko Info pengaturan petugas
Info data member Info pengaturan web
Info halaman web
pesanan pengaturan
data profil toko data pengaturan petugas
data member data pengaturan web
data profil toko data pengaturan petugas
data member data pengaturan web
Profil toko Pengaturan petugas
Lihat data member Pengaturan web
Data halaman web
detail_barang data detail_barang
data detail_barang
Web email Info regitrasi data berhasil
Info pesanan Info pembayaran
Info pengiriman
Traking Info pengiriman barang
Sosial Network Info barang
Gambar III.5 DFD Level 0
2. DFD Level 1 Proses 1 Daftar Member
Diagram alir data pada level 1 proses 1 daftar member dapat dilihat pada gambar III.6.
Pengunjung 1.1
Pemasukan Data
Registrasi pelanggan
1.2 Aktivasi
Account
Data Daftar Member
Info Daftar Member Data Registrasi Member
Data Registrasi Member
Data Daftar Member Data Daftar member
Info registrasi member
Data aktifitas registrasi Info aktivasi berhasil
Web email Info registrasi data Berhasil
Gambar III.6 DFD Level1 Proses 1 Daftar Member
3. DFD Level 1 Proses 2 Login
Diagram alir data pada level 1 proses 2 login dapat dilihat pada gambar III.7.
2.1 Verifikasi e-
mail
2.2 Verifikasi
password Administrator
member Operator
pelanggan petugas
Data login administrator Info login invalid
Data login member Info login invalid
Data login operator
Info login invalid data member
data member data operator,
administrator Data operator,
administrator
Login valid data member
data member Data operator,
Administrator Data operator,
Administrator
Gambar III.7 DFD Level1 Proses 2 Login
4. DFD Level 1 Proses 3 Pengelolaan Data User
Diagram alir data pada level 1 proses 3 pengelolaan data user dapat dilihat pada gambar III.8.
3.1 Penambahan
user
3.2 pengubahan
user member
petugas
Data member Info Data member
Data petugas Info Data petugas
Data petugas data petugas
Data member
Data member Operator
Administrator Data operator
Data administrator
Info Data operator Info Data administrator
Pelanggan Data Administrator, Operator
data Administrator, Operator Login administrator valid
Login administrator, operator dan member valid
Gambar III.8 DFD Level1 Proses 3 Pengelolaan Data User
5. DFD Level 1 Proses 4 Pengelolaan Data Master
Diagram alir data pada level 1 proses 4 pengelolaan data master dapat dilihat pada gambar III.9.
4.1 Pengelolaan
provinsi
4.2 Pengelolaan
kota
4.3 Pengelolaan
kategori
4.4 Pengelolaan
barang
4.5 Pengelolaan
pesanan
4.7 Pengelolaan
Komentar Operator
Data propinsi Info propinsi
Data kota Info kota
Data barang Info barang
Data kategori Info kategori
Data pesanan Info pesanan
Data komentar Info komentar
provinsi Data propinsi
Data propinsi kota
Data kota
Data kota Data kategori
kategori Data kategori
barang Data barang
Data barang
pesanan Data pesanan
Data pesanan
komentar Data komentar
Data komentar Data kategori
Login operator valid
Login operator valid
Login operator valid
Login operator valid
Login operator valid
Login operator valid 4.6
Pengelolaan laporan
penjualan detail_pesanan
Data pesanan
Data detail_pesanan Data detail_pesanan
Login operator valid Data laporan penjualan
Info laporan penjualan
Gambar III.9 DFD Level1 Proses 4 Pengelolaan Data Master
6. DFD Level 1 Proses 5 Barang
Diagram alir data pada level 1 proses 5 barang dapat dilihat pada gambar III.10.
5.1 Barang diskon
5.2 Barang terbaru
5.3 Barang terlaris
5.4 Barang
terbanyak dilihat
pengunjung pelanggan
Request data barang diskon Info data barang diskon
Request data barang diskon Info data barang diskon
Request barang teranyar Info barang teranyar
Request data barang teranyar Info data barang teranyar
Request data barang terlaris Info data barang terlaris
Request data barang terlaris Info data barang terlaris
Request data barang terbanyak dilihat Info data barang terbanyak dilihat
Request data barang terbanyak dilihat Info data barang terbanyak dilihat
barang Id_barang
pesanan Info barang diskon
Id_barang Info barang teranyar
Id_barang Info barang terbanyak dilihat
id_pesanan Info barang terlaris
detail_pesanan id_detail_pesanan
Info barang terlaris barang
id_barang Info barang terlaris
Gambar III.10 DFD Level1 Proses 5 Barang
6. DFD Level 1 Proses 7 Pemesanan
Diagram alir data pada level 1 proses 7 pemesanan dapat dilihat pada gambar III.11.
Pilih barang
Pengubahan detail_pesanan
Isi data pembayaran
Check out Member
Info data kategori, info data barang request data barang
Info data kategori barang,info data barang
Data detail_pesanan
Data pengiriman Data pengiriman
Konfirmasi pesanan Info checkout
Checkout detail_pesanan
Data detail_pesanan Data detail_pesanan
7.1
7.2
7.3 7.4
Data detail_pesanan info data barang
Info data detail_pesanan Login member valid
Login member valid
Login member valid
Login member valid Paypal
Data pembayaran Data
pembayaran barang
Data barang Data barang
Gambar III.11 DFD Level 1 Proses 7 Pemesanan
7. DFD Level 2 Proses 3.2 Mengubah User
Diagram alir data pada level 2 proses 3.2 mengubah user dapat dilihat pada gambar III.12.
3.2.1 Pengubahan
profil user
3.2.2 Pengubahan
password
3.2.3 Lupa password
pelanggan Administrator
Operator member
Password Info password
profil administrator Info profil administrator
profil petugas Info profil petugas
profil pelanggan Info profil pelanggan
Password Password
Data administrator Info password baru administrator
Info password baru petugas Data petugas
Data pelanggan Info password baru admin, pelanggan
Info password Info password
password password
Profil pelanggan Profil pelanggan
Data pelanggan Password baru pelanggan
petugas Profil petugas
Profil petugas
Password baru administrator, petugas Data administrator, petugas
Password admin, petugas
Password admin, petugas Login member, operator
Dan administrator valid
Login member, operator Dan administrator valid
Login member, operator Dan administrator valid
Web email Konfirmasi password baru
Member, operator dan administrator Konfirmasi password baru
Member, operator dan administrator
Gambar III.12 DFD Level 2 Proses 3.2 Mengubah User
8. DFD Level 2 Proses 4.1 Kelola Data Propinsi
Diagram alir data pada level 2 proses 4.1 kelola data propinsi dapat dilihat pada gambar III.13.
4.1.1 Penambahan
propinsi
4.1.2 Pengubahan
propinsi Operator
propinsi Data propinsi
Info data propinsi
Data propinsi Info data propinsi
Data propinsi Data propinsi
Data propinsi Data propinsi
Login operator valid Login operator valid
Gambar III.13 DFD Level 2 Proses 4.1 Kelola Data Propinsi
9. DFD Level 2 Proses 4.2 Kelola Data Kota
Diagram alir data pada level 2 proses 4.2 kelola data kotadapat dilihat pada gambar III.14.
4.2.1 Penambahan
kota
4.2.2 Pengubahan
Kota Operator
kota Data kota
Info data kota
Data kota Info data kota
Data kota Data kota
Data kota Data kota
Login operator valid Login operator valid
provinsi id_provinsi
Data provinsi
Gambar III.14 DFD Level 2 Proses 4.2 Kelola Data Kota
10. DFD Level 2 Proses 4.3 Kelola Data Kategori
Diagram alir data pada level 2 proses 4.3 kelola data kategori dapat dilihat pada gambar III.15.
4.3.1 Penambahan
kategori Operator
kategori Data kategori
Info data kategori Data kategori
Data kategori
4.3.2 Pengubahan
kategori Info data kategori
Data kategori Data kategori
Data kategori Login operator valid
Login operator valid
Gambar III.15 DFD Level 2 Proses 4.3 Kelola Data Kategori
11. DFD Level 2 Proses 4.4 Kelola Data Barang
Diagram alir data pada level 2 proses 4.4 kelola data barang dapat dilihat pada gambar III.16.
4.4.1 Penambahan
barang Operator
barang Data barang
Info data barang Data barang
Data barang
4.4.2 Pengubahan
barang Info data barang
Data barang Data barang
Data barang Login operator valid
Login operator valid kategori
id_kategori Data kategori
Gambar III.16 DFD Level 2 Proses 4.4 Kelola Data Barang
12. DFD Level 2 Proses 4.5 Kelola Pesanan
Diagram alir data pada level 2 proses 4.5 kelola pesanan dapat dilihat pada gambar III.17.
4.5.1 Daftar
Pesanan
4.5.2 Konfirmasi
pesanan
4.5.3 Konfirmasi
pembayaran 4.5.4
Proses pengiriman
Operator pesanan
Info data kategori, info data barang
View data pesanan Info data kategori barang,info data barang
Data detail pesanan Data pengiriman
Data pengiriman
Konfirmasi pesanan Info pesanan
pesanan Data pesanan
detail_pesanan Data detail pesanan
Data pesanan
Data detail pesanan Data detail_pesanan
info data pesanan
Info data detail pesanan Login operator valid
Login operator valid
Login operator valid Login operator valid
Gambar III.117 DFD Level 2 Proses 4.5 Kelola Pesanan
13. DFD Level 2 Proses 4.6 Kelola Penjualan
Diagram alir data pada level 2 proses 4.6 kelola penjualandapat dilihat pada gambar III.18.
operator detail_pesanan
4.6.1 Laporan
Penjualan Transfer Bank
4.6.2 Laporan
Penjualan PayPal
4.6.3 Laporan
Penjualan COD
Rekapitulasi laporan penjualan PayPal
Rekapitulasi laporan penjualan transfer bank
Rekapitulasi laporan penjualan COD Data laporan penjualan
PayPal Data laporan penjualan
transfer bank Request data penjualan transfer bank
Data penjualan transfer bank
Data penjualan COD Request data penjualan COD
Data penjualan PayPal Request data penjualan PayPal
Data laporan penjualan COD
Gambar III.128 DFD Level 2 Proses 4.6 Kelola Penjualan
14. DFD Level 2 Proses 4.7 Kelola Komentar
Diagram alir data pada level 2 proses 4.7 kelola komentar dapat dilihat pada gambar III.19.
operator 4.7.1
Pengubahan komentar
4.7.2 Penghapusan
komentar umpanbalik
Request data komentar
Request data komentar Info data komentar
Info data komentar Data komentar
Data komentar
Data komentar Data komentar
Gambar III.139 DFD Level 2 Proses 4.7 Kelola Komentar
III.1.6.3 Spesifikasi Proses
Spesifikasi proses digunakan untuk menggambarkan proses model aliran yang terdapat pada Data Flow Diagram DFD. Spesifikasi proses pada diagram
alir data sistem e-commerce pada toko Istana Kulit Sukaregangdapat dilihat pada tabel III.6.
Tabel III.6 Spesifikasi Proses
No Proses
Keterangan
1 No. Proses
1 Nama Proses
Daftar Member Source
Pengunjung Input
Data member Output
Info data member Destination
Pengunjung
Logika Proses 1. Pengunjung masuk ke halaman daftar member
2. Sistem akan menampilkan form daftar member 3. Pengunjung mengisi data daftar member
4. Apabila pengunjung memasukkan data yang tidak
valid maka pengunjung harus kembali memasukkan data
5. Apabila data yang dimasukkan valid, maka daftar member sukses
2 No. Proses
2.1 Nama Proses
Verifikasi E-mail Source
Member, administrator, operator Input
Data login member, data login administrator, data login operator
Output Info data login member invalid, info data login
administrator invalid, info data login operator invalid Destination
Member, administrator, operator Logika Proses
1. Member, administrator dan operator memasukkan data login
2. Apabila e-mail yang dimasukkan salah maka akan ada info login invalid
3. Apabila e-mail benar maka login valid, akan menuju ke halaman utama member
3 No. Proses
2.2 Nama Proses
Verifikasi Password Source
Member, administrator, operator Input
Data login member, data login administrator, data
login operator Output
Info data
login member,
info data
login administrator, info data login operator
Destination Member, administrator, operator
Logika Proses 1. Member, administrator dan operator memasukkan
data login 2. Apabila password yang dimasukkan tidak benar
akan menampilkan informasi login invalid 3. Apabila password yang dimasukkan benar maka
login valid, akan menuju ke halaman utama member
4 No. Proses
3.1 Nama Proses
Penambahan User Source
Administrator Input
Data administrator Output
Info data administrator Destination
Administrator Logika Proses
1. Administrator masuk ke halaman data petugas 2. Klik tambah data petugas
3. Tampil form tambah data petugas 4. Administrator memasukkan data kosong maka
akan menampilkan informasi field dibutuhkan dan administrator harus memasukkan data yang
dibutuhkan tersebut.
5. Administrator memasukkan data petugas pada form data petugas
6. Jika data valid maka akan menyimpan data petugas pada tabel petugas
7. Menampilkan pesan data petugas telah ditambahkan
5 No. Proses
3.2.1 Nama Proses
Pengubahan User Source
Member, administrator, operator Input
Data member, data administrator, data operator Output
Info data member, info data administrator, info data operator
Destination Member, administrator, operator
Logika Proses 1. Member, administrator, operator memilih ubah
user.
2. Member, administrator, operator mengisi data profil yang ingin diubah kemudian klik tombol
simpan. 3. Apabila tidak ada data yang diubah dan ada data
yang kosong maka data gagal diubah. 4. Apabila ada data yang diubah dan dan semua
data tidak ada yang kosong maka sistem akan menyimpan perubahan data ke database.
6 No. Proses
3.2.2 Nama Proses
Pengubahan Password Source
Member, administrator, operator Input
Data password member, data password administrator, data password operator
Output Info password member, info password administrator,
info password operator Destination
Member, administrator, operator Logika Proses
1. Member, administrator, operator memilih menu ubah password.
2. Member, administrator, operator tidak mengisi data password dengan benar maka data invalid
3. Member, admin, operator mengisi data password yang ingin diubah kemudian klik tombol simpan.
4. Sistem akan menyimpan perubahan data password ke database
7 No. Proses
3.2.3 Nama Proses
Lupa Password Source
Member, administrator, operator Input
Data member, data administrator, data operator Output
Info password baru member, info password baru administrator, info password baru operator
Destination Member, administrator, operator
Logika Proses 1. Member, administrator, operator memilih menu
lupa password 2. Member, administrator, operator mengosongkan
data lupa password, menampilkan pesan field dibutuhkan
3. Member, administrator, operator mengisi password baru dengan benar, data berhasil
disimpan ke database 4. Apabila data yang dimasukkan valid maka
menampilkan pesan password sudah dirubah
8 No. Proses
4.1.1 Nama Proses
Penambahan Propinsi Source
Operator Input
Data propinsi Output
Info data propinsi Destination
Operator Logika Proses
1. Operator memilih menu tambah propinsi untuk memunculkan form tambah propinsi.
2. Operator mengisi form tambah propinsi. 3. Apabila data tidak kosong dan valid maka data
provinsi baru akan disimpan didalam database. 4. Apabila data ada yang kosong maka akan ada
informasi data tidak boleh kosong dan operator harus mengisi data yang kosong tersebut.
9 No. Proses
4.1.2 Nama Proses
Pengubahan Propinsi Source
Operator Input
Data propinsi Output
Info data propinsi Destination
Operator Logika Proses
1. Operator mengklik tombol ubah pada data yang akan diubah.
2. Operator mengisi data propinsi yang ingin diubah.
3. Apabila ada data yang diubah dan dan semua data tidak ada yang kosong maka sistem akan
menyimpan perubahan data, dan menyimpan ke dalam database
4. Apabila tidak ada data yang diubah dan ada data yang kosong maka data gagal diubah.
10 No. Proses
4.2.1 Nama Proses
Penambahan Kota Source
Operator Input
Data kota Output
Info data kota Destination
Operator Logika Proses
1. Operator masuk ke halaman data kota. 2. Operator memilih menu tambah kota untuk
memunculkan form tambah kota. 3. Operator mengisi form tambah kota kemudian
klik tombol simpan. 4. Apabila data tidak kosong maka data kota baru
akan disimpan didalam database. 5. Apabila data ada yang kosong maka akan ada
informasi data tidak boleh kosong dan operator harus mengisi data yang kosong tersebut.
11 No. Proses
4.2.2 Nama Proses
Pengubahan Kota Source
Operator Input
Data kota Output
Info data kota Destination
Operator Logika Proses
1. Operator masuk ke halaman data kota. 2. Operator mengklik tombol ubah pada data yang
akan diubah. 3. Operator mengisi data kota yang ingin diubah
kemudian klik tombol ubah. 4. Apabila ada data yang diubah dan dan semua
data tidak ada yang kosong maka sistem akan menyimpan perubahan data ke database.
5. Apabila tidak ada data yang diubah dan ada data yang kosong maka data gagal diubah.
12 No. Proses
4.3.1 Nama Proses
Penambahan Kategori Source
Operator Input
Data kategori Output
Info data kategori Destination
Operator Logika Proses
1. Operator masuk ke halaman data kategori. 2. Operator memilih menu tambah kategori untuk
memunculkan form tambah kategori. 3. Operator mengisi form tambah kategori.
4. Apabila data ada yang kosong maka akan ada informasi data tidak boleh kosong dan
administrator harus mengisi data yang kosong tersebut.
5. Apabila data tidak kosong maka data kategori baru akan disimpan didalam database.
13 No. Proses
4.3.2 Nama Proses
Pengubahan Kategori Source
Operator Input
Data kategori Output
Info data kategori Destination
Operator Logika Proses
1. Operator masuk ke halaman data kategori 2. Operator mengklik tombol ubah pada data yang
akan diubah. 3. Operator mengisi data kategori pada form ubah
data kategori. 4. Apabila tidak ada data yang diubah dan ada data
yang kosong maka data gagal diubah. 5. Apabila ada data yang diubah dan dan semua
data tidak ada yang kosong maka sistem akan menyimpan perubahan data ke dalam database.
14 No. Proses
4.4.1 Nama Proses
Penambahan Barang Source
Operator Input
Data barang Output
Info data barang Destination
Operator Logika proses
1. Operator masuk ke halaman data barang 2. Operator memilih detail pada tabel barang untuk
memunculkan form tambah barang. 3. Operator mengisi form tambah barang kemudian
klik tombol simpan. 4. Apabila data tidak kosong maka data detail
barang baru akan disimpan didalam database. 5. Apabila data ada yang kosong maka akan ada
informasi data
tidak boleh
kosong dan
administrator harus mengisi data yang kosong tersebut.
16 No. Proses
4.4.2 Nama Proses
Pengubahan Barang Source
Operator Input
Data barang Output
Info data barang Destination
Operator
Logika Proses 1. Operator masuk ke halaman data barang.
2. Operator mengklik tombol ubah pada data yang akan diubah.
3. Operator mengisi data barang yang ingin diubah kemudian klik tombol simpan.
4. Apabila ada data yang diubah dan semua data tidak ada yang kosong maka sistem akan
menyimpan perubahan data ke dalam database. 5. Apabila tidak ada data yang diubah dan ada data
yang kosong maka data gagal diubah.
17 No. Proses
4.5.1 Nama Proses
Daftar Pesanan Source
Operator Input
Lihat data pesanan Output
Info data pesanan Destination
Operator Logika Proses
1. Operator memilih menu daftar pesanan. 2. Sistem akan menampilkan data pesanan yang
dipesan oleh member. 3. Operator dapat melanjutkan ke proses
selanjutnya untuk melakukan konfirmasi pesanan.
18 No. Proses
4.5.2 Nama Proses
Konfirmasi Pesanan Source
Operator Input
Data detail pesanan Output
Info data detail pesanan Destination
Operator Logika Proses
1. Operator memilih menu daftar pesanan. 2. Sistem akan menampilkan data pesanan untuk
dikonfirmasi. 3. Operator akan mengkonfirmasi pesanan yang ada
pada daftar pesanan. 4. Apabila pesanan sudah dikonfirmasi maka dapat
melanjutkan ke proses selanjutnya untuk melakukan konfirmasi pembayaran dan proses
pengiriman barang.
19 No. Proses
4.5.3 Nama Proses
Konfirmasi Pembayaran
Source Operator
Input Data pengiriman
Output Info data pengiriman
Destination Operator
Logika proses 1. Operator memilih menu konfirmasi pembayaran.
2. Sistem akan menampilkan daftar konfirmasi pembayaran yang telah dilakukan oleh member.
3. Apabila data pembayaran tidak valid maka tidak akan diproses ke proses pengiriman.
4. Apabila data pembayaran valid maka akan diproses ke proses pengiriman.
20 No. Proses
4.5.4 Nama Proses
Proses Pengiriman Source
Operator Input
Pesanan Output
Konfirmasi pesanan, info pesanan Destination
Operator Logika Proses
1. Operator memilih menu proses pengiriman. 2. Sistem akan menampilkan daftar pesanan barang
yang statusnya dalam proses pengiriman. 3. Apabila barang telah sampai ke tujuan maka
operator dapat mengubah statusnya menjadi pesanan terkirim.
21 No. Proses
4.6.1 Nama Proses
Laporan Penjualan Transfer Bank Source
Operator Input
Rekapitulasi laporan penjualan transfer bank Output
Data laporan penjualan transfer bank Destination
Operator Logika Proses
1. Operator memilih menu laporan penjualan. 2. Maka sistem akan menampilkan seluruh data
laporan penjualan. 3. Operator memilih menu laporan penjualan
transfer bank. 4. Maka sistem akan menampilkan seluruh data
laporan penjualan berdasarkan jenis pembayaran menggunakan transfer bank.
22 No. Proses
4.6.2 Nama Proses
Laporan Penjualan Paypal
Source Operator
Input Rekapitulasi laporan penjualan Paypal
Output Data laporan penjualan Paypal
Destination Pengunjung dan member
Logika Proses 1. Operator memilih menu laporan penjualan.
2. Maka sistem akan menampilkan seluruh data laporan penjualan.
3. Operator memilih menu laporan penjualan PayPal.
4. Maka sistem akan menampilkan seluruh data laporan penjualan berdasarkan jenis pembayaran
menggunakan PayPal.
23 No. Proses
4.6.3 Nama Proses
Laporan Penjualan COD Source
Operator Input
Rekapitulasi laporan penjualan COD Output
Data laporan penjualan COD Destination
Member Logika Proses
1. Operator memilih menu laporan penjualan. 2. Maka sistem akan menampilkan seluruh data
laporan penjualan. 3. Operator memilih menu laporan penjualan COD.
4. Maka sistem akan menampilkan seluruh data laporan penjualan berdasarkan jenis pembayaran
menggunakan COD.
24 No. Proses
4.7.1 Nama Proses
Pengubahan Komentar Source
Operator Input
Request data komentar Output
Info data komentar Destination
Operator Logika Proses
1. Operator memilih menu komentar. 2. Maka sistem akan menampilkan seluruh
komentar pada barang. 3. Operator memilih recordkomentar pada barang
yang akan dirubah. 4. Lalu, operator mengklik tombol ubah.
5. Maka sistem akan mengubah data komentar pada barang.
25 No. Proses
4.7.2 Nama Proses
Penghapusan Komentar Source
Operator Input
Request data komentar Output
Info data komentar Destination
Operator Logika Proses
1. Operator memilih menu komentar. 2. Maka sistem akan menampilkan seluruh
komentar pada barang. 3. Operator memilih record komentar pada barang
yang akan dirubah. 4. Lalu, operator mengklik tombol hapus.
5. Maka sistem akan menghapus data komentar pada barang.
26 No. Proses
5.1 Nama Proses
Barang Diskon Source
Pengunjung dan member Input
Request data barang diskon Output
Info data barang diskon Destination
Pengunjung dan member Logika Proses
1. Pengunjung, pelanggan memilih menu barang diskon.
2. Sistem akan menampilkan barang diskon. 3. Maka pengunjung dan pelanggan dapat memilih
barang yang telah di diskon untuk dipesan.
27 No. Proses
5.2 Nama Proses
Barang terbaru Source
Pengunjung dan member Input
Request data barang terbaru Output
Info data barang terbaru Destination
Pengunjung dan member Logika Proses
1. Pengunjung, pelanggan memilih menu barang terbaru.
2. Sistem akan menampilkan barang terbaru. 3. Maka pengunjung dan pelanggan dapat memilih
barang terbaru untuk dipesan. 28
No. Proses 5.3
Nama Proses Barang terlaris
Source Pengunjung dan member
Input Request data barang terlaris
Output Info data barang terlaris
Destination Pengunjung dan member
Logika Proses 1. Pengunjung, pelanggan memilih menu barang
terlaris. 2. Sistem akan menampilkan barang terlaris.
3. Maka pengunjung dan pelanggan dapat memilih barang terlaris untuk dipesan.
29 No. Proses
5.4 Nama Proses
Barang terbanyak dilihat Source
Pengunjung dan member Input
Request data barang terbanyak dilihat Output
Info data barang terbanyak dilihat Destination
Pengunjung dan member Logika Proses
1. Pengunjung, pelanggan memilih menu barang terbanyak dilihat.
2. Sistem akan menampilkan barang terlaris. 3. Maka pengunjung dan pelanggan dapat memilih
barang terbanyak dilihat untuk dipesan.
30 No. Proses
6 Nama Proses
Cari Barang Source
Pengunjung dan member Input
Data kategori, data barang, data detail barang Output
Info data kategori, info data barang, info data detail barang
Destination Pengunjung dan member
Logika Proses 1. Pengunjung, member memasukkan data produk
dan atau data kategori pada form cari produk. 2. Kemudian klik tombol cari.
Sistem akan memberikan data produk yang dicari.
31 No. Proses
7.1 Nama Proses
Pilih Barang Source
Member Input
Request data barang Output
Info data barang Destination
Member Logika Proses
1. Pelanggan memilih produk yang ingin dipesan dengan mengklik keranjang belanja.
2. Maka daftar pesanan akan disimpan dalam
keranjang belanja.
32 No. Proses
7.2 Nama Proses
Pengubahan Detail Pesanan Source
Member Input
Data detail pesanan Output
Info data detail pesanan Destination
Member Logika Proses
1. Pelanggan memilih menu keranjang belanja. 2. Setelah menampilkan data barang yang telah
dipesan maka pelanggan dapat mengubah jumlah keranjang belanja dengan mengubah data jumlah,
ataupun menghapus salah satu pesanan dengan mengklik tombol hapus pada record detail barang
yang dipilih.
3. Apabila telah mengubah data jumlah detail barang maka klik tombol update keranjang, maka
perubahan data akan ditampilkan pada keranjang belanja.
4. Jika memasukkan data jumlah barang melebihi stok detail barang maka sistem akan mengambil
stok terbesar pada detail barang tersebut. 5. Jika telah setuju maka akan melanjutkan ke
proses selanjutnya untuk mengisi data pembayaran atau proses check out.
33 No. Proses
7.3 Nama Proses
Isi Data Pembayaran Source
Member Input
Data pembayaran Output
Info data pembayaran Destination
Tidak ada Logika Proses
1. Klik tombol selesai belanja pada form keranjang belanja untuk mengisi alamat tujuan.
2. Lalu klik lanjutkan untuk melihat detail pemesanan.
3. Sistem akan menampilkan form pembayaran untuk member.
4. Member akan mengisi data pembayaran dan data akan disimpan di database.
5. Jika selesai maka akan melanjutkan ke proses selanjutnya.
34 No. Proses
7.4 Nama Proses
Check Out Source
Member Input
Request check out Output
Info data pesanan, info data detail pesanan Destination
Member Logika Proses
1. Member telah melakukan konfirmasi pesanan atau telah melakukan konfirmasi pembayaran.
2. Lalu member melakukan check out untuk mengakhiri pesanan barang.
3. Sistem akan mengurangi jumlah stok barang pada database, sesuai dengan jumlah barang yang
dipesan oleh member. 4. Sistem akan menyimpan data pesanan yang
terjadi pada database. 5. Sistem akan menampilkan form konfirmasi
terima kasih telah berbelanja.
35 No. Proses
8 Nama Proses
Penyajian History Source
Member Input
Request data pesanan, request detail pesanan Output
Info data pesanan, info data detail pesanan Destination
Member Logika Proses
1. Member memilih menu history pesanan. 2. Sistem akan memberikan semua data transaksi
yang pernah dilakukan oleh member.
36 No. Proses
9 Nama Proses
Pengaturan website Source
Administrator Input
Data profil toko, data pengaturan petugas, data member, data pengaturan web
Output Info profil toko, info pengaturan petugas, info data
member, info pengaturan web Destination
Administrator Logika Proses
1. Administrator masuk ke halaman pengaturan web 2. Administrator memasukkan data pengaturan web.
3. Jika data pengaturan web valid maka akan
menyimpan ke database.
III.1.6.4 Kamus Data
Kamus data atau data dictionarymerupakan katalog fakta tentang data dan kebutuhan-kebutuhan informasi dari suatu sistem. Kamus data dibuat berdasarkan
arus data yang ada pada diagram aliran data. Dengan menggunakan kamus data, analisis sistem dapat mendefinisikan data yang mengalir pada sistem secara
lengkap. Kamus data digunakan untuk merancang input, merancang laporan dan database. Kamus data yang dibutuhkan untuk membuat aplikasi website e-
commerce pada toko Istana Kulit Sukaregangdapat dilihat pada table III.7. Tabel III.7 Kamus Data
No Kamus
Keterangan
1 Nama Aliran Data
Daftar Member Where used how used
Member - Proses 1 Proses 1
– file member Deskripsi
Berisi data member yang akan digunakan untuk mendaftar dan akan disimpan di dalam
database.
Struktur Data id_pelanggan + daftar + email + password +
nama + alamat + kota + provinsi + kode_pos + tlp + hp + fax + aktif
id_pelanggan daftar
email password
nama_pelanggan alamat
kota provinsi
kode_pos tlp
[0-9] [A-Z|a-z|0-9]
[A-Z|a-z|0-9] [A-Z|a-z|0-9]
[A-Z|a-z|0-9] [A-Z|a-z|0-9]
[A-Z|a-z|] [A-Z|a-z|]
[0-9] [0-9]
hp fax
aktif [0-9]
[0-9] [0,1]
2 Nama Aliran Data
Data Login Member Where used how used
Member - Proses 2 Member - Proses 2.1
Member - Proses 2.2 Proses 2.1 - file member
Proses 2.2 - file member
Deskripsi Berisi data login member
Struktur Data Email_member + password_member
Email Password
[A-Z|a-z|0-9] [A-Z|a-z|0-9]
3 Nama Aliran Data
Data pengiriman Where used how used
Member - Proses 7.3 Proses 7.3 - proses 7.4
Deskripsi Berisi data pengiriman
Struktur Data nama_penerima + alamat + provinsi + kota +
kode_pos + tlp + hp Nama_penerima
Alamat Provinsi
Kota Kode_pos
Tlp Hp
[A-Z|a-z|0-9] [A-Z|a-z|0-9]
[A-Z|a-z|0-9] [A-Z|a-z|0-9]
[0-9] [0-9]
[0-9]
4 Nama Aliran Data
Data login administrator Where used how used
Administrator - proses 2 Administrator - proses 2.1
Administrator - proses 2.2 Proses 2.1 - file petugas
Proses 2.2 - file petugas
Deskripsi Berisi data login administrator
Struktur Data Username + password
Username Password
[A-Z|a-z|0-9] [A-Z|a-z|0-9]
5 Nama Aliran Data
Data Petugas Where used how used
Administrator - proses 3.1 Administrator - proses 3.2
Administrator - proses 3.3 Proses 3.1 - filepetugas
Proses 3.2 – filepetugas
Proses 3.3 - filepetugas Deskripsi
Berisi data Petugas Struktur Data
id_petugas + daftar + username + email + password + nama_petugas + akses + aktif
Id_petugas Daftar
Username Email
Password Nama_petugas
Akses Aktif
[0-9] [0-9]
[A-Z|a-z|0-9] [A-Z|a-z|0-9]
[A-Z|a-z|0-9] [A-Z|a-z|0-9]
[A-Z|a-z|0-9] [0,1]
6 Nama Aliran Data
Data login operator Where used how used
Operator - proses 2 Operator - proses 2.1
Operator - proses 2.2 Proses 2 - file petugas
Proses 2.1 - file petugas Proses 2.2 - file petugas
Deskripsi Berisi data login operator
Struktur Data Username + password
Username Password
[A-Z|a-z|0-9] [A-Z|a-z|0-9]
7 Nama Aliran Data
Data provinsi Where used how used
Operator - proses 4 Operator - proses 4.1
Proses 4 - file provinsi Provinsi 4.1 - file provinsi
Deskripsi Berisi data provinsi
Struktur Data id_provinsi + nama_provinsi + id_petugas +
ditampilkan Id_propinsi
Nama_provinsi Id_petugas
ditampikan [0-9]
[A-Z|a-z|] [0-9]
[0,1]
8 Nama Aliran Data
Data kota Where used how used
Operator - proses 4
Operator - proses 4.2 Proses 4 - file kota
Proses 4.2 - file kota
Deskripsi Berisi data kota
Struktur Data id_kota_kirim + id_provinsi + nama_kota +
perusahaan + jenis + ongkos_kirim + COD + ditampilkan
Id_kota_kirim Id_provinsi
Nama_kota Perusahaan
Jenis Ongkos_kirim
COD ditampilkan
[0-9] [0-9]
[A-Z|a-z|] [A-Z|a-z|0-9]
[A-Z|a-z|0-9] [0-9]
[0,1] [0,1]
9 Nama Aliran Data
Data kategori Where used how used
Operator - proses 4 Operator - proses 4.3
Proses 4 - file kategori Proses 4.3 - file kategori
Deskripsi Berisi data kategori
Struktur Data id_kategori + id_induk_kategori +
nama_kategori + deskripsi + url_gambar + ditampilkan + id_petugas
Id_kategori Id_induk_kategori
Nama_kategori Deskripsi
Url_gambar Ditampilkan
Id_petugas [A-Z|a-z|0-9]
[A-Z|a-z|0-9] [A-Z|a-z|0-9]
[A-Z|a-z|0-9] [A-Z|a-z|0-9]
[0,1] [0-9]
10 Nama Aliran Data
Data barang Where used how used
Operator-proses 4 Operator-proses 4.4
Proses 4 - file barang Proses 4.4 - file barang
Deskripsi Berisi data barang
Struktur Data id_barang + id_kategori + id_induk_barang
+tanggal_masuk +terakhir_diperbarui +kode_barang + bahan +warna +ukuran
+berat +stok +harga +diskon +deskripsi + url_gambar + ditampilkan
Id_barang Id_kategori
Id_induk_barang Tanggal_masuk
Terakhir_diperbarui Kode_barang
Bahan Warna
Ukuran Berat
Stok Harga
Diskon Diskripsi
url_gambar ditampilkan
[0-9] [0-9]
[0-9] [A-Z|a-z|0-9]
[A-Z|a-z|0-9] [A-Z|a-z|0-9]
[A-Z|a-z|0-9] [A-Z|a-z|0-9]
[A-Z|a-z|0-9] [0-9]
[0-9] [0-9]
[0-9] [A-Z|a-z|0-9]
[A-Z|a-z|0-9] [0,1]
11 Nama Aliran Data
Data pesanan Where used how used
Operator - proses 4 Operator - proses 4.6
Pelanggan - proses 7 Proses 4 - file pesanan
Proses 4.6 - file pesanan Proses 7 - file pesanan
Proses 7.4 - file pesanan
Deskripsi Berisi data pesanan
Struktur Data id_pesanan + id_pelanggan +
tanggal_pesanan + tanggal_kadaluwarsa + nama_pengirim + nama_penerima + alamat
+ kota + provinsi + kode_pos + telepon + telepon_genggam + subtotal_bayar +
ongkos_kirim + total_bayar + jenis_pembayaran + kode_pembayaran +
tanggal_pembayaran + lunas + kode_pengiriman + tanggal_pengiriman +
tanggal_diterima + keterangan + status
Id_pesanan Id_pelanggan
Tanggal_pesanan [0-9]
[0-9] [A-Z|a-z|0-9]
Tanggal_kadaluwarsa Nama_pengirim
Nama_penerima Alamat
Kota Provinsi
Kode_pos Telepon
Telepon_genggam Total_barang
Subtotal_bayar Ongkos_kirim
Total_bayar Jenis_pembayaran
Kode_pembayaran Tanggal_pembayaran
Kode_pengiriman Tanggal_pengiriman
Tanggal_diterima Keterangan
Status [A-Z|a-z|0-9]
[A-Z|a-z|0-9] [A-Z|a-z|0-9]
[A-Z|a-z|0-9] [A-Z|a-z|0-9]
[A-Z|a-z|0-9] [0-9]
[0-9] [0-9]
[0-9] [0-9]
[0-9] [0-9]
[A-Z|a-z|0-9] [A-Z|a-z|0-9]
[A-Z|a-z|0-9] [A-Z|a-z|0-9]
[A-Z|a-z|0-9] [A-Z|a-z|0-9]
[A-Z|a-z|0-9] [0,1]
12 Nama Aliran Data
Data detail pesanan Where used how used
Member - proses 7 Member - proses 7.2
Proses 7 - file detail_pesanan Proses 7.2 - proses 7.4
Proses 7.4 - file detail_pesanan
Deskripsi Berisi data detail_pesanan
Struktur Data id_detail_pesanan + id_pesanan + id_barang
+ kode_barang + bahan + warna + ukuran + berat + stok + harga + diskon + url_gambar
+ jumlah + retur + jumlah_retur + jumlah_penggantian_retur
Id_detail_pesanan Id_pesanan
Id_barang Kode_barang
Bahan Warna
Stok [0-9]
[0-9] [0-9]
[A-Z|a-z|0-9] [A-Z|a-z|0-9]
[A-Z|a-z|0-9] [0-9]
Harga Diskon
Ukuran Berat
url_gambar Jumlah
Retur Jumlah_retur
Jumlah_penggantian_retur [0-9]
[0-9] [A-Z|a-z|0-9]
[0-9] [A-Z|a-z|0-9]
[0-9] [A-Z|a-z|]
[0-9] [0-9]
13 Nama Aliran Data
Data komentar Where used how used
Operator - proses 4 Operator - proses 4.7
Proses 4 - file komentar Proses 4.7 - file komentar
Deskripsi Berisi data komentar
Struktur Data id_komentar + id_pelanggan + id_barang +
tanggal_masuk +terakhir_diperbarui + isi + ditampilkan + jenis
Id_komentar Id_pelanggan
Id_barang Tanggal_masuk
Terakhir_diperbarui Isi
Ditampilkan Jenis
[0-9] [0-9]
[0-9] [A-Z|a-z|0-9]
[A-Z|a-z|0-9] [A-Z|a-z|0-9]
[0,1] [A-Z|a-z|0-9]
14 Nama Aliran Data
Data pengaturan website Where used how used
Administrator - proses 9 Proses 9 - file pengaturan
Deskripsi Berisi data pengaturan website
Struktur Data id_pengaturan_web + id_petugas + kode +
jenis + nama + anggapan + isi + urutan + lainnya + keterangan + ditampilkan
Id_pengaturan_web Id_petugas
Kode Jenis
Nama Anggapan
Isi [0-9]
[0-9] [A-Z|a-z|0-9]
[A-Z|a-z|0-9] [A-Z|a-z|0-9]
[A-Z|a-z|0-9] [A-Z|a-z|0-9]
Urutan Lainnya
Keterangan diaktifkan
[0-9] [A-Z|a-z|0-9]
[A-Z|a-z|0-9] [0,1]
III.2 Perancangan Sistem
Perancangan merupakan bagian dari metodologi pembangunan suatu perangkat lunak yang harus dilakukan setelah melalui tahapan analisis. Pada
bagian ini akan dijelaskan perancangan sistem yang dimaksudkan untuk menggambarkan perbedaan antara sistem yang sedang berjalan dengan sistem
yang diusulkan. Perancangan sistem ini menggunakan pendekatan sistem terkomputerisasi.
Langkah-langkah yang dilakukan dalam tahapan perancangan sistem ini adalah sebagai berikut:
1. Perancangan Basis Data
a. Diagram Relasi b. Struktur Tabel
2. Perancangan Struktur Menu
a. Struktur menu administrator b. Struktur menu operator
c. Struktur menu member d. Struktur menu pengunjung
3. Perancangan Arsitektur
a. Perancangan antar muka b. Perancangan pesan
c. Jaringan semantic 4.
Perancangan Prosedural
III.2.1 Perancangan Basis Data
Perancangan basis data yaitu menciptakan atau merancang data yang terhubung dan disimpan secara bersama-sama. Untuk menggambarkannya
digunakanlah diagram relasi dan struktur tabel.Dari dua hasil tersebut, implementasi basis data akan bisa dikerjakan.
III.2.1.1 Diagram Relasi
Model data relasional merupakan model data di mana hubungan antar data, arti data dan batasannya dijelaskan dengan baris dan kolom. Secara formal, ke
semuanya itu digambarkan ke dalam diagram relasi dan diagram skema. Adapun untuk lebih jelasnya tentang diagram relasi pada sistem e-commerce
di toko Istana Kulit Sukaregang akan ada pada gambar III.20.
barang
PK id_barang
FK1 id_kategori
harga diskon
deskripsi url_gambar
ditampilkan tanggal_masuk
detail_barang
PK id_detail_barang
FK1 id_barang
warna ukuran
berat stok
url_gambar_depan url_gambar_samping
url_gambar_belakang ditampilkan
pesanan
PK id_pesanan
FK1 id_pelanggan
tanggal_pesanan tanggal_kadaluwarsa
nama_penerima alamat
kota provinsi
kode_pos telepon
telepon_genggam subtotal_bayar
ongkos total_bayar
jenis_pembayaran kode_pembayaran
tanggal_pembayaran kode_pengiriman
tanggal_pengiriman tanggal_diterima
komentar status
detail_pesanan
PK id_detail_pesanan
FK1 id_pesanan
FK2 id_detail_barang
harga diskon
warna ukuran
berat jumlah
retur jumlah_retur
provinsi
PK id_provinsi
FK1 id_petugas
nama_provinsi ditampilkan
kota
PK id_kota
FK1 id_provinsi
nama_kota ongkos_kirim
ditampilkan petugas
PK id_petugas
tanggal_daftar email_petugas
password_petugas nama_petugas
level diaktifkan
pelanggan
PK id_pelanggan
tanggal_daftar email_pelanggan
password_pelanggan nama_pelanggan
alamat kota
provinsi kode_pos
telepon telepon_genggam
fax diaktifkan
pengaturan
PK id_pengaturan
FK1 id_petugas
nama_pengaturan isi
diaktifkan kategori
PK id_kategori
FK1 id_petugas
id_kategori_atas nama_kategori
deskripsi url_gambar
ditampilkan komentar
PK id_komentar
FK1 id_barang
FK2 id_pelanggan
tanggal isi
ditampilkan jenis
lihat_barang
PK id_lihat_barang
FK1 id_barang
FK2 id_pelanggan
waktu deskripsi
rating_barang
PK id_rating_barang
FK1 id_barang
FK2 id_pelanggan
total_nilai total_penilai
Gambar III.14 Diagram Relasi
III.2.1.2 Struktur Tabel
Tabel-tabel yang terdapat dalam basis data yang digunakan dalam pembangunan aplikasi e-commerce di toko Istana Kulit Sukaregang
dapat dilihat pada table III.9.
Tabel pelanggan a.
Nama File : Tabel Pelanggan
b. Primary Key
: id_pelanggan c.
Jumlah Field : 13
d. Keterangan
: Tabel berisi data member Tabel III.8 Tabel Pelanggan
Nama Field Type Data
Panjang Kunci
Keterangan
id_pelanggan bigint
20 Primary key
Not null tanggal_daftar
Date -
- Not null
email_pelanggan Varchar
100 -
Not null password_pelanggan
Varchar 64
- Not null
nama_pelanggan Varchar
50 -
Not null alamat
Text -
- Not null
kota Varchar
50 -
Not null provinsi
Varchar 30
- Not null
kode_pos Varchar
15 -
Not null telepon
Varchar 20
- Not null
telepon_genggam Varchar
20 -
Null fax
Varchar 20
- Null
diaktifkan Varchar
15 -
Not null
2. Tabel barang
a. Nama File
: Tabel Barang b.
Primary Key : id_barang
c. Jumlah Field
: 8
d. Keterangan
: Tabel berisi data barang Tabel III.9 Tabel Barang
Nama Field Type Data
Panjang Kunci
Keterangan
Id_barang bigint
20 Primary key
Not null Id_kategori
Char 11
Foreign key Not null
Harga Double
- -
Not null Diskon
Int 11
- Not null
Deskripsi Text
- -
Null Url_gambar
Text -
- Null
Ditampilkan Varchar
15 -
Not null Tanggal_masuk
Varchar 15
- Not null
3. Tabel ditel_barang
a. Nama File
: Tabel Detail Barang b.
Primary Key : id_detail_barang
c. Jumlah Field
: 10 d.
Keterangan : Tabel berisi data detail barang
Tabel III.10Tabel Detail Barang
Nama Field Type Data
Panjang Kunci
Keterangan
Id_detail_barang bigint
20 Primary key
Not null Id_barang
bigint 20
Foreign key Not null
Warna Varchar
30 -
Not null Ukuran
Varchar 10
- Not null
Berat Double
- -
Not null Stok
Int 11
- Not null
Url_gambar_depan Nul
Url_gambar_samping Nul
Url_gambar_belakang Nul
Ditampilkan Varchar
15 -
Not null
4. Tabel lihat_barang
a. Nama File
: Tabel Lihat Barang b.
Primary Key : id_lihat_barang
c. Jumlah Field
: 5 d.
Keterangan : Tabel berisi data lihat barang
Tabel III.11Tabel Lihat Barang
Nama Field Type Data
Panjang Kunci
Keterangan
Id_lihat_barang bigint
20 Primary key
Not null Id_barang
bigint 20
Foreign key Not null
Id_pelanggan bigint
20 Foreign key
Not null Waktu
Varchar 25
- Not null
Deskripsi Text
- -
Not null
5. Tabel rating_barang
a. Nama File
: Tabel ratingBarang b.
Primary Key : id_barang
c. Jumlah Field
: 3 d.
Keterangan : Tabel berisi data ratingbarang
Tabel III.12Tabel RatingBarang
Nama Field Type Data
Panjang Kunci
Keterangan
Id_barang bigint
20 Primary key
Not null Total_nilai
Float -
- Not null
Total_penilai Int
11 -
Not null
6. Tabel pesanan
a. Nama File
: Tabel pesanan b.
Primary Key : id_ pesanan
c. Jumlah Field
: 22
d. Keterangan
: Tabel berisi data pesanan Tabel III.13 Tabel Pesanan
Nama Field Type Data
Panjang Kunci
Keterangan
Id_ pesanan bigint
20 Primary key
Not null Id_pelanggan
bigint 20
Foreign key Not null
Tanggal_pesanan Date
Not null Tanggal_kadaluarsa
Date -
- Not null
Nama_penerima Varchar
50 -
Not null Alamat
Text -
Not null kota
Varchar 50
- Not null
provinsi Varchar
50 -
Null Kode_pos
Varchar 15
- Not null
Telepon Varchar
20 -
Null Telepon_genggam
Varchar 20
- Null
Subtotal_bayar Double
- -
Not null Ongkos
Double -
- Not null
Total_bayar Double
- -
Not null Jenis_pembayaran
Varchar 20
- Null
Kode_pembayaran Varchar
20 -
Null Tanggal_pembayaran
Date -
- Null
Kode_pengiriman Varchar
50 -
Null Tanggal_pengiriman
Date -
- Null
Tanggal_diterima Date
- -
Null Komentar
Longtext -
- Null
Status Varchar
30 -
Not null
7. Tabel detail_pesanan
a. Nama File
: Tabel detail_pesanan b.
Primary Key : id_detail_pesanan
c. Jumlah Field
: 11 d.
Keterangan : Tabel berisi data detail pesanan
Tabel III.14 Tabel Detail Pesanan
Nama Field Type Data
Panjang Kunci
Keterangan
Id_detail_pesanan bigint
20 Primary key
Not null Id_pesanan
bigint 20
Foreign key Not null
Id_detail_barang bigint
20 Foreign key
Not null Harga
Double -
- Not null
Diskon Int
11 -
Null Ukuran
Varchar 10
- Not null
Berat Double
- -
Not null Jumlah
Int 11
- Not null
Retur Varchar
30 -
Null Jumlah_retur
Int 11
- Null
8. Tabel kategori
a. Nama File
: Tabel kategori b.
Primary Key : id_kategori
c. Jumlah Field
: 7 d.
Keterangan : Tabel berisi data kategori
Tabel III.15 Tabel Kategori
Nama Field Type Data
Panjang Kunci
Keterangan
Id_kategori Char
4 Primary key
Not null Id_induk
Char 4
- Null
Nama_kategori Varchar
50 -
Not null Deskripsi
Text -
- Null
Url_gambar Text
- -
Null Ditampilkan
Varchar 15
- Not null
Id_petugas Int
11 Foreign Key
Not null
9. Tabel komentar
a. Nama File
: Tabel komentar b.
Primary Key : id_komentar
c. Jumlah Field
: 7
d. Keterangan
: Tabel berisi data komentar Tabel III.16 Tabel Komentar
Nama Field Type Data
Panjang Kunci
Keterangan
Id_komentar bigint
20 Primary key
Not null Id_pelanggan
bigint 20
Foreign key Not null
Id_barang bigint
20 Foreign key
Not null Tanggal
Date -
- Not null
Isi Longtext
- -
Not null Ditampilkan
Varchar 15
- Not null
Jenis Varchar
30 -
Not null
10. Tabel kota a.
Nama File : Tabel kota
b. Primary Key
: id_kota c.
Jumlah Field : 5
d. Keterangan
: Tabel berisi data kota Tabel III.17 Tabel Kota
Nama Field Type Data
Panjang Kunci
Keterangan
Id_kota bigint
20 Primary key
Not null Id_provinsi
int 11
Foreign key Not null
Nama_kota Varchar
50 -
Not null Ongkos_kirim
Double -
- Not null
Ditampilkan Varchar
15 -
Not null
11. Tabel pengaturan a.
Nama File : Tabel pengaturan
b. Primary Key
: id_pengaturan c.
Jumlah Field : 5
d. Keterangan
: Tabel berisi data pengaturan
Tabel III.18 Tabel Pengaturan
Nama Field Type Data
Panjang Kunci
Keterangan
Id_pengaturan bigint
20 Primary key
Not null Id_petugas
int 11
Foreign key Not null
Nama_pengaturan Varchar
50 -
Not null Isi
longtext -
- Not null
Diaktifkan Varchar
15 -
Not null
12. Tabel petugas a.
Nama File : Tabel petugas
b. Primary Key
: id_petugas c.
Jumlah Field : 7
d. Keterangan
: Tabel berisi data petugas
Tabel III.19 Tabel Petugas
Nama Field Type Data
Panjang Kunci
Keterangan
Id_petugas Int
11 Primary key
Not null Tanggal_daftar
Date -
- Not null
Email_petugas Varchar
100 -
Not null Password_petugas
Varchar 64
- Not null
Nama_petugas Varchar
50 -
Not null Level
Int 1
- Not null
Diaktifkan Varchar
15 -
Not null
13. Tabel provinsi a.
Nama File : Tabel provinsi
b. Primary Key
: id_provinsi c.
Jumlah Field : 4
d. Keterangan
: Tabel berisi data provinsi Tabel III.20 Tabel Provinsi
Nama Field Type Data
Panjang Kunci
Keterangan
Id_provinsi Int
11 Primary key
Not null Nama_provinsi
Varchar 30
- Not null
Ditampilkan Varchar
15 -
Not null Id_petugas
Int 11
Foreign key Not null
III.2.2 Perancangan Struktur Menu
Struktur menu dirancang sesuai dengan level pengguna sistem. Terdapat empat pengguna aplikasi ini yaitu admin, operator, member dan pengunjung.
Adapun struktur menunya adalah sebagai berikut: 1.
Struktur menu administrator 2.
Struktur menu operator 3.
Struktur menu member 4.
Struktur menu pengunjung
III.2.2.1 Struktur Menu Administrator
Untuk lebih jelasnya struktur menu pada administrator akan ada pada gambar III.21.
Pelanggan Pengaturan
Keluar Branda
Operator Menu utama
Halaman Profile
Gambar III.21 Struktur Menu Administrator
III.2.2.2 Struktur Menu Operator
Untuk lebih jelasnya struktur menu pada operator akan ada pada gambar III.22.
Kategori Barang Barang
Pesanan Ongkos Kirim
Branda Menu utama
Penjualan Terjual
Komentar Profile
Keluar
Gambar III.15 Struktur Menu Operator
III.2.2.3 Struktur Menu Member
Untuk lebih jelasnya struktur menu pada member akan ada pada gambar III.23.
Menu utama Lupa password
History pesanan
Alamat utama
Kontak anda
Ganti password
Komentar anda
informasi Keranjang
belanja Profil toko
Cara pemesanan
Cara pembayaran
Retur barang
Tanya jawab
ongkos Hubungi
kami logout
Gambar III.23 Struktur Menu Member
III.2.2.4 Struktur Menu Pengunjung
Untuk lebih jelasnya struktur menu pada pengunjung akan ada pada gambar III.24.
Kategori barang
Keranjang belanja
Profil perusahaan
Cara pemesanan
Cara pembayaran
Daftar login
Menu utama Retur
barang Tanya
jawab ongkos
Hubungi kami
Gambar III.24 Struktur Menu Pengunjung
III.2.3 Perancangan Arsitektur
Setelah melakukan perancangan data pada sistem yang dibangun, maka dilakukanlah perancangan arsitektur.Perancangan arsitektur yang telah dibuat
meliputi beberapa perancangan diantaranya perancangan antar muka, perancangan pesan dan jaringan semantik.
III.2.3.1 Perancangan Antar Muka
Spesifikasi antarmuka merupakan suatu bentuk tampilan dari program yang akan dibuat untuk kebutuhan interface dengan user.Spesifikasiperancanganantar
muka terdiri dari : 1.
Perancangan antar muka administrator 2.
Perancangan antar muka operator 3.
Perancangan antar muka member 4.
Perancangan antar muka pengunjung
III.2.3.1.1 Perancangan Antar Muka Administrator
1. Perancangan antar muka login
A09
Nama Layar : A09
Ukuran Layar : 1024 X 768
Font : arial
Warna Background : putih
Klik login menuju A01
Klik lupa password menuju
A11
Istaba Kulit Garut
Petugas Login
Email Password
Login
Lupa password ?
Gambar III.25 Perancangan Antar Muka Login
2. Perancangan antar muka lupa password
A11
Nama Layar : A11
Ukuran Layar : 1024 X 768
Font : arial
Warna Background : putih
Klik proses menuju A11
Klik login menuju A09
Istana Kulit Garut
Lupa password Email
proses
login
Gambar III.16 Perancangan Antar Muka Lupa Password
3. Perancangan antar muka beranda
A01
Nama Layar : A01
Ukuran Layar : 1024 X 768
Font : arial
Warna Background : putih
Klik branda menuju A01
Klik operator menuju A02
Klik pelanggan menuju A03
Klik pengaturan menuju A04
Klik halaman menuju A07
Klik profilet menuju A08
header
footer Selamat Datang, Aadministratr | Keluar
Branda
Profile Halaman
Pengaturan Pelanggan
Operator
Branda
teks teks
Ringkasan Data Operator Ringkasan Data Pelanggan
Istana Kulit Garut
Gambar III.27 Perancangan Antar Muka Beranda 4.
Perancangan antar muka data petugas
A02
Nama Layar : A02
Ukuran Layar : 1024 X 768
Font : arial
Warna Background : putih
header
footer
Menu Operator
Tabel petugas Tambah
edit Klik branda
menuju A01 Klik operator
menuju A02 Klik pelanggan
menuju A03 Klik pengaturan
menuju A04 Klik halaman
menuju A07 Klik profilet
menuju A08 Selamat Datang, Aadministratr | Keluar
Branda
Profile Halaman
Pengaturan Pelanggan
Operator Istana Kulit Garut
Proses Proses yang ditandai :
Gambar III.28 Perancangan Antar Muka Data Petugas
5. Perancangan antar muka data pelanggan
A03
Nama Layar : A03
Ukuran Layar : 1024 X 768
Font : arial
Warna Background : putih
header
footer
Menu Ppelanggan
Tabel data pelanggan Edit
Klik branda menuju A01
Klik operator menuju A02
Klik pelanggan menuju A03
Klik pengaturan menuju A04
Klik halaman menuju A07
Klik profilet menuju A08
Selamat Datang, Aadministratr | Keluar Branda
Profile Halaman
Pengaturan Pelanggan
Operator Istana Kulit Garut
Gambar III.29 Perancangan Antar Muka Data Pelanggan 6.
Perancangan antar muka pengaturan
A04
Nama Layar : A04
Ukuran Layar : 1024 X 768
Font : arial
Warna Background : putih
header
footer
Menu Pengaturan
Form pengaturan simpan
Klik branda menuju A01
Klik operator menuju A02
Klik pelanggan menuju A03
Klik pengaturan menuju A04
Klik halaman menuju A07
Klik profilet menuju A08
Selamat Datang, Aadministratr | Keluar Branda
Profile Halaman
Pengaturan Pelanggan
Operator Istana Kulit Garut
Gambar III.30 Perancangan Antar Muka Pengaturan
7. Perancangan antar muka halaman
A07
Nama Layar : A04
Ukuran Layar : 1024 X 768
Font : arial
Warna Background : putih
header
footer
Menu Pengaturan Halaman
Form Pengaturan Halaman simpan
Klik branda menuju A01
Klik operator menuju A02
Klik pelanggan menuju A03
Klik pengaturan menuju A04
Klik halaman menuju A07
Klik profilet menuju A08
Selamat Datang, Aadministratr | Keluar Branda
Profile Halaman
Pengaturan Pelanggan
Operator Istana Kulit Garut
Gambar III.31 Perancangan Antar Muka Halaman 8.
Perancangan antar muka profile
A08
Nama Layar : A04
Ukuran Layar : 1024 X 768
Font : arial
Warna Background : putih
header
footer
Menu Profile
Klik branda menuju A01
Klik operator menuju A02
Klik pelanggan menuju A03
Klik pengaturan menuju A04
Klik halaman menuju A07
Klik profilet menuju A08
Selamat Datang, Aadministratr | Keluar Branda
Profile Halaman
Pengaturan Pelanggan
Operator Istana Kulit Garut
Form ganti password Form ganti profil
simpan Email :
Nama : Password baru :
Ulangi password : Password
Ganti
Gambar III.32 Perancangan Antar Muka Halaman
9. Perancangan antar muka logout
A09
Nama Layar : A08
Ukuran Layar : 1024 X 768
Font : arial
Warna Background : putih
Klik login menuju A01
Klik lupa password menuju
A11
Istana Kulit Garut
Petugas login
Email Password
login
Lupa password ?
Sekarang anda sudah keluar.
Gambar III.33 Perancangan Antar Muka Log Out 10. Perancangan antar muka tambah data petugas
A10
Nama Layar : A10
Ukuran Layar : 1024 X 768
Font : arial
Warna Background : putih
header
footer
Menu Operator
Form Operator
simpan Email baru :
Password baru : Ulangi password :
Nama : Level :
Diaktifkan : tidak
ya
Klik branda menuju A01
Klik operator menuju A02
Klik pelanggan menuju A03
Klik pengaturan menuju A04
Klik halaman menuju A07
Klik profilet menuju A08
Selamat Datang, Aadministratr | Keluar Branda
Profile Halaman
Pengaturan Pelanggan
Operator Istana Kulit Garut
Gambar III.34 Perancangan Antar Muka Tambah Data Petugas
11. Perancangan antar muka ubah data pelanggan
A13
Nama Layar : A13
Ukuran Layar : 1024 X 768
Font : arial
Warna Background : putih
header
footer
Halaman data pelanggan
simpan Nama :
Email : Diaktifkan :
tidak ya
Batal
Tabel data pelanggan Form ganti profil
Klik branda menuju A01
Klik operator menuju A02
Klik pelanggan menuju A03
Klik pengaturan menuju A04
Klik halaman menuju A07
Klik profilet menuju A08
Selamat Datang, Aadministratr | Keluar Branda
Profile Halaman
Pengaturan Pelanggan
Operator Istana Kulit Garut
Gambar III.35 Perancangan Antar Muka Ubah Data Pelanggan
III.2.3.1.2 Perancangan Antar Muka Operator
1. Perancangan antar muka login
PR06
Nama Layar : PR06
Ukuran Layar : 1024 X 768
Font : arial
Warna Background : putih
Klik login menuju PR01
Klik lupa password menuju
PR07
Istana Kulit Garut
Petugas login
Email Password
login
Lupa password ?
Gambar III.36 Perancangan Antar Muka Login 2.
Perancangan antar muka lupa password
PR07
Nama Layar : PR07
Ukuran Layar : 1024 X 768
Font : arial
Warna Background : putih
Klik login menuju PR06
Klik proses menuju PR07
Iatana Kulit Garut
Lupa password
Email Proses
Login
Gambar III.17 Perancangan Antar Muka Lupa Password
3. Perancangan antar muka beranda
PR01
Nama Layar : PR01
Ukuran Layar : 1024 X 768
Font : arial
Warna Background : putih
Klik branda menuju PR01
Klik kategori barang menuju
PR02 Klik barang
menuju PR03 Klik ongkos kirim
menuju PR08 Klik pesanan
menuju PR04 Klik penjualan
menuju PR05 Klik terjual PR11
Klik komentar menuju PR09
Klik profile menuju PR12
header
footer Branda
Penjualan Pesanan
Ongkos Kirim Barang
Kategori Barang
Branda
Profile Komentar
Terjual Selamat Datang, Operator | Keluar
Istana Kulit Garut
teks teks
Info Singkat Info Penting
Gambar III.18 Perancangan Antar Muka Beranda 4.
Perancangan antar muka data kategori
PR02
Nama Layar : PR02
Ukuran Layar : 1024 X 768
Font : arial
Warna Background : putih
header
footer Menu Kategori Barang
ID Tambah
Rincian Kategori Data detail kategori
|---à Yang Ditandai : Edit
Klik branda menuju PR01
Klik kategori barang menuju
PR02 Klik barang
menuju PR03 Klik ongkos kirim
menuju PR08 Klik pesanan
menuju PR04 Klik penjualan
menuju PR05 Klik terjual PR11
Klik komentar menuju PR09
Klik profile menuju PR12
Klik tambah menuju PR13
Klik lihat data barang menuju
PR03 Klik tambah
menuju PR36 Klik jumlah barang
menuju PR37 Klik edit menuju
PR10 Branda
Penjualan Pesanan
Ongkos Kirim Barang
Kategori Barang
Profile Komentar
Terjual Selamat Datang, Operator | Keluar
Istana Kulit Garut
Urutkan Berdasarkan : Nama
Tampilkan
Proses
Gambar III.19 Perancangan Antar Muka Data Kategori
5. Perancangan antar muka data barang
PR03
Nama Layar : PR03
Ukuran Layar : 1024 X 768
Font : arial
Warna Background : putih
header
footer Menu Barang | Kategori
Tampilkan semua
Klik branda menuju PR01
Klik kategori barang menuju
PR02 Klik barang
menuju PR03 Klik ongkos kirim
menuju PR08 Klik pesanan
menuju PR04 Klik penjualan
menuju PR05 Klik terjual PR11
Klik komentar menuju PR09
Klik profile menuju PR12
Klik tambah barang menuju
PR14 Klik lihat data
detail barang menuju PR15
Klik cari menuju PR03
Klik tambah menuju PR17
Klik jumlah detail menuju PR16
Klik edit menuju PR18
Branda
Penjualan Pesanan
Ongkos Kirim Barang
Kategori Barang
Profile Komentar
Terjual Selamat Datang, Operator | Keluar
Istana Kulit Garut
ID Tambah
Daftar Detail Barang Data detail kategori
|---à Yang Ditandai : Edit
Urutkan Berdasarkan : Tanggal Masuk
Tampilkan
Proses Lihat Detail Barang
Stok Habis Kategori
Harga Diskon
Gambar III.40 Perancangan Antar Muka Data Barang 6.
Perancangan antar muka ongkos kirim
PR08
Nama Layar : PR04
Ukuran Layar : 1024 X 768
Font : arial
Warna Background : putih
header
footer Menu Ongkos Kirim
Tabel ongkos kirim Edit
Tambah Provinsi Lihat Kota
Klik branda menuju PR01
Klik kategori barang menuju
PR02 Klik barang
menuju PR03 Klik ongkos kirim
menuju PR08 Klik pesanan
menuju PR04 Klik penjualan
menuju PR05 Klik terjual PR11
Klik komentar menuju PR09
Klik profile menuju PR12
Klik semua menuju PR04
Klik belum bayar menuju PR19
Klik butuh konfirmasi menuju PR20
Klik sudah dibayar menuju PR21
Klik proses pengiriman PR22
Klik pesanan terkirim PR23
Klik retur menuju PR24
Klik lainnya menuju PR25
Klik tampilkan menuju PR04
Klik proses menuju PR39
Urutkan Berdasarkan :
Nama Provinsi Tampilkan
Branda
Penjualan Pesanan
Ongkos Kirim Barang
Kategori Barang
Profile Komentar
Terjual Selamat Datang, Operator | Keluar
Istana Kulit Garut
Proses yang ditandai : proses
Pilih proses
Gambar III.41 Perancangan Antar Muka Ongkos Kirim
7. Perancangan antar muka pesanan
PR04
Nama Layar : PR04
Ukuran Layar : 1024 X 768
Font : arial
Warna Background : putih
header
footer Menu Pesanan
Tabel pesanan proses
Semua Belum bayar Butuh
konfirmasi Sudah
dibayar Proses
pengiriman Pesanan terkirim Retur Lainnya
Klik branda menuju PR01
Klik kategori barang menuju
PR02 Klik barang
menuju PR03 Klik ongkos kirim
menuju PR08 Klik pesanan
menuju PR04 Klik penjualan
menuju PR05 Klik terjual PR11
Klik komentar menuju PR09
Klik profile menuju PR12
Klik semua menuju PR04
Klik belum bayar menuju PR19
Klik butuh konfirmasi menuju PR20
Klik sudah dibayar menuju PR21
Klik proses pengiriman PR22
Klik pesanan terkirim PR23
Klik retur menuju PR24
Klik lainnya menuju PR25
Klik tampilkan menuju PR04
Klik proses menuju PR39
Urutkan Berdasarkan :
ID Tanggal Pesanan
Jenis Pembayaran Pesanan
Kota Tujuan Total Pembayaran
Status
Branda
Penjualan Pesanan
Ongkos Kirim Barang
Kategori Barang
Profile Komentar
Terjual Selamat Datang, Operator | Keluar
Istana Kulit Garut
Gambar III.42 Perancangan Antar Muka Pesanan 8.
Perancangan antar muka penjualan
PR05
Nama Layar : PR05
Ukuran Layar : 1024 X 768
Font : arial
Warna Background : putih
header
footer
Menu Penjualan
Sampai tanggal : Dari tanggal :
tampilkan
Tabel penjualan Semua
paypal Transfer bank
Cash on delivery
Klik branda menuju PR01
Klik kategori barang menuju
PR02 Klik barang
menuju PR03 Klik ongkos kirim
menuju PR08 Klik pesanan
menuju PR04 Klik penjualan
menuju PR05 Klik terjual PR11
Klik komentar menuju PR09
Klik profile menuju PR12
Klik semua menuju PR05
Klik transfer bank menuju PR26
Klik paypal menuju PR27
Klik cash on delivery menuju
PR28 Tipe Pembayaran
Branda
Penjualan Pesanan
Ongkos Kirim Barang
Kategori Barang
Profile Komentar
Terjual Selamat Datang, Operator | Keluar
Istana Kulit Garut
Gambar III.43 Perancangan Antar Muka Penjualan
9. Perancangan antar muka terjual
PR06
Nama Layar : PR05
Ukuran Layar : 1024 X 768
Font : arial
Warna Background : putih
header
footer
Halaman ----à Barang Terjual
Sampai tanggal : Dari tanggal :
tampilkan
Tabel barang terjual Klik branda
menuju PR01 Klik kategori
barang menuju PR02
Klik barang menuju PR03
Klik ongkos kirim menuju PR08
Klik pesanan menuju PR04
Klik penjualan menuju PR05
Klik terjual PR11 Klik komentar
menuju PR09 Klik profile menuju
PR12 Branda
Penjualan Pesanan
Ongkos Kirim Barang
Kategori Barang
Profile Komentar
Terjual Selamat Datang, Operator | Keluar
Istana Kulit Garut
Gambar III.44 Perancangan Antar Muka Terjual 10. Perancangan antar muka komentar
PR09
Nama Layar : PR09
Ukuran Layar : 1024 X 768
Font : arial
Warna Background : putih
header
footer
Menu Komentar
List data komentar Yang ditandai :
proses Pilih aksi
Klik branda menuju PR01
Klik kategori barang menuju
PR02 Klik barang
menuju PR03 Klik ongkos kirim
menuju PR08 Klik pesanan
menuju PR04 Klik penjualan
menuju PR05 Klik terjual PR11
Klik komentar menuju PR09
Klik profile menuju PR12
Klik proses menuju PR09
Branda
Penjualan Pesanan
Ongkos Kirim Barang
Kategori Barang
Profile Komentar
Terjual Selamat Datang, Operator | Keluar
Istana Kulit Garut Urutkan Berdasarkan :
Jenis Barang Isi
Tampilkan
Gambar III.45 Perancangan Antar Muka Komentar
11. Perancangan antar muka Profile
PR11
Nama Layar : PR11
Ukuran Layar : 1024 X 768
Font : arial
Warna Background : putih
header
footer Klik branda
menuju PR01 Klik kategori
barang menuju PR02
Klik barang menuju PR03
Klik ongkos kirim menuju PR08
Klik pesanan menuju PR04
Klik penjualan menuju PR05
Klik terjual PR11 Klik komentar
menuju PR09 Klik profile menuju
PR12 Klik ganti menuju
PR11
Menu Profile
Form ganti password Form ganti profil
simpan Email :
Nama : Password baru :
Ulangi password : Password
Ganti Branda
Penjualan Pesanan
Ongkos Kirim Barang
Kategori Barang
Profile Komentar
Terjual Selamat Datang, Operator | Keluar
Istana Kulit Garut
Gambar III.20 Perancangan Antar Muka Profile 12. Perancangan antar muka logout
PR12
Nama Layar : PR12
Ukuran Layar : 1024 X 768
Font : arial
Warna Background : putih
Klik login menuju PR01
Klik lupa password menuju
PR07
Istana Kulit Sukaregang
Petugas login
Email Password
login
Lupa password ?
Sekarang anda sudah keluar.
Gambar III.47 Perancangan Antar Muka Logout
13. Perancangan antar muka tambah data kategori barang
PR13
Nama Layar : PR13
Ukuran Layar : 1024 X 768
Font : arial
Warna Background : putih
header
footer
Menu Kategori Barang
simpan Nama :
Kategori induk :
Form kategori barang
Gambar :
Choose file
Copy url : Atau upload :
No file chosen Deskripsi :
Tampilkan : Tidak
ya batal
Klik home menuju PR01
Klik data kategori menuju PR02
Klik data barang menuju PR03
Klik pesanan menuju PR04
Klik penjualan menuju PR05
Klik ongkos kirim menuju PR08
Klik komentar menuju PR09
Klik ganti password menuju
PR11 Klik logout menuju
PR12 Klik batal menuju
PR02 Klik simpan
menuju PR02 Branda
Penjualan Pesanan
Ongkos Kirim Barang
Kategori Barang
Profile Komentar
Terjual Selamat Datang, Operator | Keluar
Istana Kulit Garut
Gambar III.48 Perancangan Antar Muka Tambah Data Kategori Barang 14. Perancangan antar muka ubah data kategori barang
PR10
Nama Layar : PR10
Ukuran Layar : 1024 X 768
Font : arial
Warna Background : putih
header
footer
Menu Kategori Barang
simpan Nama :
Kategori induk :
Formulir ganti kategori barang
Gambar :
Choose file
Copy url : Atau upload :
No file chosen Deskripsi :
Tampilkan : Tidak
ya
Klik home menuju PR01
Klik data kategori menuju PR02
Klik data barang menuju PR03
Klik pesanan menuju PR04
Klik penjualan menuju PR05
Klik ongkos kirim menuju PR08
Klik komentar menuju PR09
Klik ganti password menuju
PR11 Klik logout menuju
PR12 Klik batal menuju
PR02 Klik simpan
menuju PR02
Batal
Branda
Penjualan Pesanan
Ongkos Kirim Barang
Kategori Barang
Profile Komentar
Terjual Selamat Datang, Operator | Keluar
Istana Kulit Garut
Gambar III.49 Perancangan Antar Muka Ubah Data Kategori Barang
15. Perancangan antar muka tambah data barang
PR14
Nama Layar : PR14
Ukuran Layar : 1024 X 768
Font : arial
Warna Background : putih
header
footer
Menu Barang | Kategori
Tampilkan Semua
Form tambah data barang Simpan
Klik home menuju PR01
Klik data kategori menuju PR02
Klik data barang menuju PR03
Klik pesanan menuju PR04
Klik penjualan menuju PR05
Klik ongkos kirim menuju PR08
Klik komentar menuju PR09
Klik ganti password menuju
PR11 Klik logout menuju
PR12 Klik batal menuju
PR03 Klik simpan
menuju PR03
Form tambah data barang
Batal Branda
Penjualan Pesanan
Ongkos Kirim Barang
Kategori Barang
Profile Komentar
Terjual Selamat Datang, Operator | Keluar
Istana Kulit Garut
Gambar III.50 Perancangan Antar Muka Tambah Data Barang 16. Perancangan antar muka ubah data barang
PR18
Nama Layar : PR18
Ukuran Layar : 1024 X 768
Font : arial
Warna Background : putih
header
footer
Menu Barang | Kategori
simpan Nama :
Kategori barang :
Formulir ganti data barang
Gambar :
Choose file
Copy url : Atau upload :
No file chosen Deskripsi :
Tampilkan : Tidak
ya
Tampilkan Semua Klik home menuju
PR01 Klik data kategori
menuju PR02 Klik data barang
menuju PR03 Klik pesanan
menuju PR04 Klik penjualan
menuju PR05 Klik ongkos kirim
menuju PR08 Klik komentar
menuju PR09 Klik ganti
password menuju PR11
Klik logout menuju PR12
Klik batal menuju PR03
Klik simpan menuju PR03
Batal
Branda
Penjualan Pesanan
Ongkos Kirim Barang
Kategori Barang
Profile Komentar
Terjual Selamat Datang, Operator | Keluar
Istana Kulit Garut
Gambar III.51 Perancangan Antar Muka Ubah Data Barang
17. Perancangan antar muka tambah data barang pada kategori
PR36
Nama Layar : PR36
Ukuran Layar : 1024 X 768
Font : arial
Warna Background : putih
header
footer
Menu Barang | Kategori
Tampilkan Semua
Form tambah data barang Simpan
Klik home menuju PR01
Klik data kategori menuju PR02
Klik data barang menuju PR03
Klik pesanan menuju PR04
Klik penjualan menuju PR05
Klik ongkos kirim menuju PR08
Klik komentar menuju PR09
Klik ganti password menuju
PR11 Klik logout menuju
PR12 Klik simpan
menuju PR03 Klik batal menuju
PR03
Form tambah data barang
Batal Branda
Penjualan Pesanan
Ongkos Kirim Barang
Kategori Barang
Profile Komentar
Terjual Selamat Datang, Operator | Keluar
Istana Kulit Garut
Gambar III.52 Perancangan Antar Muka Tambah Data Barang Pada Kategori 18. Perancangan antar muka lihat data barang pada kategori
PR37
Nama Layar : PR37
Ukuran Layar : 1024 X 768
Font : arial
Warna Background : putih
header
footer
Menu Barang | Kategori
Tampil Semua
Edit Klik home menuju
PR01 Klik data kategori
menuju PR02 Klik data barang
menuju PR03 Klik pesanan
menuju PR04 Klik penjualan
menuju PR05 Klik ongkos kirim
menuju PR08 Klik komentar
menuju PR09 Klik ganti
password menuju PR11
Klik logout menuju PR12
Klik tambah barang menuju
PR03 Klik lihat data
detail barang menuju PR15
Klik cari menuju PR37
Klik tambah menuju PR17
Klik jumlah detail menuju PR15
Klik edit menuju PR18
Tambah barang Lihat data detail barang
Cari nama produk : Cari
List data barang
Tambah jumlah detail Detail data barang
Branda
Penjualan Pesanan
Ongkos Kirim Barang
Kategori Barang
Profile Komentar
Terjual Selamat Datang, Operator | Keluar
Istana Kulit Garut
Gambar III.53 Perancangan Antar Muka Lihat Data Barang Pada Kategori
19. Perancangan antar muka laporan pesanan status belum bayar
PR19
Nama Layar : PR19
Ukuran Layar : 1024 X 768
Font : arial
Warna Background : putih
header
footer Halaman laporan pesanan
Tabel pesanan proses
Semua Belum bayar Butuh
konfirmasi Sudah
dibayar Proses
pengiriman Pesanan terkirim Retur Lainnya
Klik home menuju PR01
Klik data kategori menuju PR02
Klik data barang menuju PR03
Klik pesanan menuju PR04
Klik penjualan menuju PR05
Klik ongkos kirim menuju PR08
Klik komentar menuju PR09
Klik ganti password menuju PR11
Klik logout menuju PR12
Klik semua menuju PR04
Klik belum bayar menuju PR19
Klik butuh konfirmasi menuju PR20
Klik sudah dibayar menuju PR21
Klik proses pengiriman PR22
Klik pesanan terkirim PR23
Klik retur menuju PR24
Klik lainnya menuju PR25
Klik tampilkan menuju PR04
Klik proses menuju PR39
Dari tanggal : Sampai :
Tampilkan Branda
Penjualan Pesanan
Ongkos Kirim Barang
Kategori Barang
Profile Komentar
Terjual Selamat Datang, Operator | Keluar
Istana Kulit Garut
Gambar III.54 Perancangan Antar Muka Laporan Pesanan Status Belum Bayar 20. Perancangan antar muka laporan pesanan status butuh konfirmasi
PR20
Nama Layar : PR20
Ukuran Layar : 1024 X 768
Font : arial
Warna Background : putih
header
footer Logo dan nama toko
Akses operator Home
Ongkos kirim Penjualan
Pesanan Data barang
Data kategori Halaman laporan pesanan
Log out Ganti password
Komentar Tabel pesanan
proses
Semua Belum bayar Butuh
konfirmasi Sudah
dibayar Proses
pengiriman Pesanan terkirim Retur Lainnya
Klik home menuju PR01
Klik data kategori menuju PR02
Klik data barang menuju PR03
Klik pesanan menuju PR04
Klik penjualan menuju PR05
Klik ongkos kirim menuju PR08
Klik komentar menuju PR09
Klik ganti password menuju PR11
Klik logout menuju PR12
Klik semua menuju PR04
Klik belum bayar menuju PR19
Klik butuh konfirmasi menuju PR20
Klik sudah dibayar menuju PR21
Klik proses pengiriman PR22
Klik pesanan terkirim PR23
Klik retur menuju PR24
Klik lainnya menuju PR25
Klik tampilkan menuju PR04
Klik proses menuju PR39
Dari tanggal : Sampai :
Tampilkan
Gambar III.55 Perancangan Antar Muka Laporan Pesanan Status Butuh Konfirmasi
21. Perancangan antar muka laporan pesanan status sudah dibayar
PR21
Nama Layar : PR21
Ukuran Layar : 1024 X 768
Font : arial
Warna Background : putih
header
footer Halaman laporan pesanan
Tabel pesanan proses
Semua Belum bayar Butuh
konfirmasi Sudah
dibayar Proses
pengiriman Pesanan terkirim Retur Lainnya
Klik home menuju PR01
Klik data kategori menuju PR02
Klik data barang menuju PR03
Klik pesanan menuju PR04
Klik penjualan menuju PR05
Klik ongkos kirim menuju PR08
Klik komentar menuju PR09
Klik ganti password menuju PR11
Klik logout menuju PR12
Klik semua menuju PR04
Klik belum bayar menuju PR19
Klik butuh konfirmasi menuju PR20
Klik sudah dibayar menuju PR21
Klik proses pengiriman PR22
Klik pesanan terkirim PR23
Klik retur menuju PR24
Klik lainnya menuju PR25
Klik tampilkan menuju PR04
Klik proses menuju PR39
Dari tanggal : Sampai :
Tampilkan Branda
Penjualan Pesanan
Ongkos Kirim Barang
Kategori Barang
Profile Komentar
Terjual Selamat Datang, Operator | Keluar
Istana Kulit Garut
Gambar III.56 Perancangan Antar Muka Laporan Pesanan Status Sudah Dibayar 22. Perancangan antar muka laporan pesanan status proses pengiriman
PR22
Nama Layar : PR22
Ukuran Layar : 1024 X 768
Font : arial
Warna Background : putih
header
footer Halaman laporan pesanan
Tabel pesanan proses
Semua Belum bayar Butuh
konfirmasi Sudah
dibayar Proses
pengiriman Pesanan terkirim Retur Lainnya
Klik home menuju PR01
Klik data kategori menuju PR02
Klik data barang menuju PR03
Klik pesanan menuju PR04
Klik penjualan menuju PR05
Klik ongkos kirim menuju PR08
Klik komentar menuju PR09
Klik ganti password menuju PR11
Klik logout menuju PR12
Klik semua menuju PR04
Klik belum bayar menuju PR19
Klik butuh konfirmasi menuju PR20
Klik sudah dibayar menuju PR21
Klik proses pengiriman PR22
Klik pesanan terkirim PR23
Klik retur menuju PR24
Klik lainnya menuju PR25
Klik tampilkan menuju PR04
Klik proses menuju PR39
Dari tanggal : Sampai :
Tampilkan Branda
Penjualan Pesanan
Ongkos Kirim Barang
Kategori Barang
Profile Komentar
Terjual Selamat Datang, Operator | Keluar
Istana Kulit Garut
Gambar III.57 Perancangan Antar Muka Laporan Pesanan Status Prose
Pengiriman 23. Perancangan antar muka laporan pesanan status pesanan terkirim
PR23
Nama Layar : PR23
Ukuran Layar : 1024 X 768
Font : arial
Warna Background : putih
header
footer Halaman laporan pesanan
Tabel pesanan proses
Semua Belum bayar Butuh
konfirmasi Sudah
dibayar Proses
pengiriman Pesanan terkirim Retur Lainnya
Klik home menuju PR01
Klik data kategori menuju PR02
Klik data barang menuju PR03
Klik pesanan menuju PR04
Klik penjualan menuju PR05
Klik ongkos kirim menuju PR08
Klik komentar menuju PR09
Klik ganti password menuju PR11
Klik logout menuju PR12
Klik semua menuju PR04
Klik belum bayar menuju PR19
Klik butuh konfirmasi menuju PR20
Klik sudah dibayar menuju PR21
Klik proses pengiriman PR22
Klik pesanan terkirim PR23
Klik retur menuju PR24
Klik lainnya menuju PR25
Klik tampilkan menuju PR04
Klik proses menuju PR39
Dari tanggal : Sampai :
Tampilkan Branda
Penjualan Pesanan
Ongkos Kirim Barang
Kategori Barang
Profile Komentar
Terjual Selamat Datang, Operator | Keluar
Istana Kulit Garut
Gambar III.58 Perancangan Antar Muka Laporan Pesanan Status Pesanan Terkirim
24. Perancangan antar muka laporan pesanan status retur
PR24
Nama Layar : PR24
Ukuran Layar : 1024 X 768
Font : arial
Warna Background : putih
header
footer Halaman laporan pesanan
Tabel pesanan proses
Semua Belum bayar Butuh
konfirmasi Sudah
dibayar Proses
pengiriman Pesanan terkirim Retur Lainnya
Klik home menuju PR01
Klik data kategori menuju PR02
Klik data barang menuju PR03
Klik pesanan menuju PR04
Klik penjualan menuju PR05
Klik ongkos kirim menuju PR08
Klik komentar menuju PR09
Klik ganti password menuju PR11
Klik logout menuju PR12
Klik semua menuju PR04
Klik belum bayar menuju PR19
Klik butuh konfirmasi menuju PR20
Klik sudah dibayar menuju PR21
Klik proses pengiriman PR22
Klik pesanan terkirim PR23
Klik retur menuju PR24
Klik lainnya menuju PR25
Klik tampilkan menuju PR04
Klik proses menuju PR39
Dari tanggal : Sampai :
Tampilkan Branda
Penjualan Pesanan
Ongkos Kirim Barang
Kategori Barang
Profile Komentar
Terjual Selamat Datang, Operator | Keluar
Istana Kulit Garut
Gambar III.59 Perancangan Antar Muka Laporan Pesanan Status Retur 25. Perancangan antar muka laporan pesanan status lainnya
PR25
Nama Layar : PR25
Ukuran Layar : 1024 X 768
Font : arial
Warna Background : putih
header
footer Halaman laporan pesanan
Tabel pesanan proses
Semua Belum bayar Butuh
konfirmasi Sudah
dibayar Proses
pengiriman Pesanan terkirim Retur Lainnya
Klik home menuju PR01
Klik data kategori menuju PR02
Klik data barang menuju PR03
Klik pesanan menuju PR04
Klik penjualan menuju PR05
Klik ongkos kirim menuju PR08
Klik komentar menuju PR09
Klik ganti password menuju PR11
Klik logout menuju PR12
Klik semua menuju PR04
Klik belum bayar menuju PR19
Klik butuh konfirmasi menuju PR20
Klik sudah dibayar menuju PR21
Klik proses pengiriman PR22
Klik pesanan terkirim PR23
Klik retur menuju PR24
Klik lainnya menuju PR25
Klik tampilkan menuju PR04
Klik proses menuju PR39
Dari tanggal : Sampai :
Tampilkan Branda
Penjualan Pesanan
Ongkos Kirim Barang
Kategori Barang
Profile Komentar
Terjual Selamat Datang, Operator | Keluar
Istana Kulit Garut
Gambar III.60 Perancangan Antar Muka Laporan Pesanan Status Lainnya 26. Perancangan antar muka detail laporan pesanan
PR39
Nama Layar : PR39
Ukuran Layar : 1024 X 768
Font : arial
Warna Background : putih
header
footer Halaman detail kode pesanan
Detail pesanan
proses Klik home menuju
PR01 Klik data kategori
menuju PR02 Klik data barang
menuju PR03 Klik pesanan
menuju PR04 Klik penjualan
menuju PR05 Klik ongkos kirim
menuju PR08 Klik komentar
menuju PR09 Klik ganti
password menuju PR11
Klik logout menuju PR12
Klik proses menuju PR39
Branda
Penjualan Pesanan
Ongkos Kirim Barang
Kategori Barang
Profile Komentar
Terjual Selamat Datang, Operator | Keluar
Istana Kulit Garut
Gambar III.61 Perancangan Antar Muka Detail Laporan Pesanan
27. Perancangan antar muka laporan penjualan transfer bank
PR26
Nama Layar : PR26
Ukuran Layar : 1024 X 768
Font : arial
Warna Background : putih
header
footer Halaman laporan penjualan
Sampai tanggal : Dari tanggal :
tampilkan
Tabel penjualan Semua
paypal Transfer bank
Cash on delivery
Klik home menuju PR01
Klik data kategori menuju PR02
Klik data barang menuju PR03
Klik pesanan menuju PR04
Klik penjualan menuju PR05
Klik ongkos kirim menuju PR08
Klik komentar menuju PR09
Klik ganti password menuju
PR11 Klik logout menuju
PR12 Klik semua
menuju PR05 Klik transfer bank
menuju PR26 Klik paypal
menuju PR27 Klik cash on
delivery menuju PR28
Branda
Penjualan Pesanan
Ongkos Kirim Barang
Kategori Barang
Profile Komentar
Terjual Selamat Datang, Operator | Keluar
Istana Kulit Garut
Gambar III.62 Perancangan Antar Muka Laporan Penjualan Transfer Bank 28. Perancangan antar muka laporan penjualan paypal
PR27
Nama Layar : PR27
Ukuran Layar : 1024 X 768
Font : arial
Warna Background : putih
header
footer Halaman laporan penjualan
Sampai tanggal : Dari tanggal :
tampilkan
Tabel penjualan Semua
paypal Transfer bank
Cash on delivery
Klik home menuju PR01
Klik data kategori menuju PR02
Klik data barang menuju PR03
Klik pesanan menuju PR04
Klik penjualan menuju PR05
Klik ongkos kirim menuju PR08
Klik komentar menuju PR09
Klik ganti password menuju
PR11 Klik logout menuju
PR12 Klik semua
menuju PR05 Klik transfer bank
menuju PR26 Klik paypal
menuju PR27 Klik cash on
delivery menuju PR28
Branda
Penjualan Pesanan
Ongkos Kirim Barang
Kategori Barang
Profile Komentar
Terjual Selamat Datang, Operator | Keluar
Istana Kulit Garut
Gambar III.63 Perancangan Antar Muka Laporan Penjualan PayPal
29. Perancangan antar muka laporan penjualan cash on delivery
PR28
Nama Layar : PR28
Ukuran Layar : 1024 X 768
Font : arial
Warna Background : putih
header
footer Halaman laporan penjualan
Sampai tanggal : Dari tanggal :
tampilkan
Tabel penjualan Semua
paypal Transfer bank
Cash on delivery
Klik home menuju PR01
Klik data kategori menuju PR02
Klik data barang menuju PR03
Klik pesanan menuju PR04
Klik penjualan menuju PR05
Klik ongkos kirim menuju PR08
Klik komentar menuju PR09
Klik ganti password menuju
PR11 Klik logout menuju
PR12 Klik semua
menuju PR05 Klik transfer bank
menuju PR26 Klik paypal
menuju PR27 Klik cash on
delivery menuju PR28
Branda
Penjualan Pesanan
Ongkos Kirim Barang
Kategori Barang
Profile Komentar
Terjual Selamat Datang, Operator | Keluar
Istana Kulit Garut
Gambar III.64 Perancangan Antar Muka Laporan Penjualan Cash On Delivery 30. Perancangan antar muka tambah data provinsi
PR31
Nama Layar : PR31
Ukuran Layar : 1024 X 768
Font : arial
Warna Background : putih
header
footer
Halaman ongkos kirim
Klik home menuju PR01
Klik data kategori menuju PR02
Klik data barang menuju PR03
Klik pesanan menuju PR04
Klik penjualan menuju PR05
Klik ongkos kirim menuju PR08
Klik komentar menuju PR09
Klik ganti password menuju
PR11 Klik logout menuju
PR12 Klik batal menuju
PR08 Klik simpan
menuju PR08
Form tambah provinsi Nama :
Tampilkan : ya
tidak Batal
Simpan Branda
Penjualan Pesanan
Ongkos Kirim Barang
Kategori Barang
Profile Komentar
Terjual Selamat Datang, Operator | Keluar
Istana Kulit Garut
Gambar III.65 Perancangan Antar Muka Tambah Data Provinsi
31. Perancangan antar muka lihat seluruh data kota
PR32
Nama Layar : PR32
Ukuran Layar : 1024 X 768
Font : arial
Warna Background : putih
header
footer
Halaman ongkos kirim | provinsi
Tabel data provinsi
Tambah
Klik home menuju PR01
Klik data kategori menuju PR02
Klik data barang menuju PR03
Klik pesanan menuju PR04
Klik penjualan menuju PR05
Klik ongkos kirim menuju PR08
Klik komentar menuju PR09
Klik ganti password menuju
PR11 Klik logout menuju
PR12 Klik tambah
menuju PR40 Klik edit menuju
PR41
Edit Branda
Penjualan Pesanan
Ongkos Kirim Barang
Kategori Barang
Profile Komentar
Terjual Selamat Datang, Operator | Keluar
Istana Kulit Garut
Gambar III.66 Perancangan Antar Muka Lihat Seluruh Data Kota 32. Perancangan antar muka tambah data kota
PR40
Nama Layar : PR40
Ukuran Layar : 1024 X 768
Font : arial
Warna Background : putih
header
footer
Halaman ongkos kirim | provinsi
Klik home menuju PR01
Klik data kategori menuju PR02
Klik data barang menuju PR03
Klik pesanan menuju PR04
Klik penjualan menuju PR05
Klik ongkos kirim menuju PR08
Klik komentar menuju PR09
Klik ganti password menuju
PR11 Klik logout menuju
PR12 Klik batal menuju
PR32 Klik simpan
menuju PR32
Form kota
Ongkos kirim : Nama :
Provinsi : Tampilkan :
Ya Tidak
Batal Simpan
Branda
Penjualan Pesanan
Ongkos Kirim Barang
Kategori Barang
Profile Komentar
Terjual Selamat Datang, Operator | Keluar
Istana Kulit Garut
Gambar III.67 Perancangan Antar Muka Tambah Data Kota
33. Perancangan antar muka ubah data kota
PR41
Nama Layar : PR41
Ukuran Layar : 1024 X 768
Font : arial
Warna Background : putih
header
footer
Halaman ongkos kirim | provinsi
Klik home menuju PR01
Klik data kategori menuju PR02
Klik data barang menuju PR03
Klik pesanan menuju PR04
Klik penjualan menuju PR05
Klik ongkos kirim menuju PR08
Klik komentar menuju PR09
Klik ganti password menuju
PR11 Klik logout menuju
PR12 Klik batal menuju
PR32 Klik simpan
menuju PR32
Form kota
Ongkos kirim : Nama :
Provinsi : Tampilkan :
Ya Tidak
Batal Simpan
Branda
Penjualan Pesanan
Ongkos Kirim Barang
Kategori Barang
Profile Komentar
Terjual Selamat Datang, Operator | Keluar
Istana Kulit Garut
Gambar III.218 Perancangan Antar Muka Ubah Data Kota 34. Perancangan antar muka tambah kota di provinsi
PR34
Nama Layar : PR34
Ukuran Layar : 1024 X 768
Font : arial
Warna Background : putih
header
footer
Halaman ongkos kirim | provinsi
Klik home menuju PR01
Klik data kategori menuju PR02
Klik data barang menuju PR03
Klik pesanan menuju PR04
Klik penjualan menuju PR05
Klik ongkos kirim menuju PR08
Klik komentar menuju PR09
Klik ganti password menuju
PR11 Klik logout menuju
PR12 Klik batal menuju
PR08 Klik simpan
menuju PR08
Form kota
Ongkos kirim : Nama :
Provinsi : Tampilkan :
Ya Tidak
Batal Simpan
Branda
Penjualan Pesanan
Ongkos Kirim Barang
Kategori Barang
Profile Komentar
Terjual Selamat Datang, Operator | Keluar
Istana Kulit Garut
Gambar III.69 Perancangan Antar Muka Tambah Kota Di Provinsi
35. Perancangan antar muka tampilkan kota di provinsi
PR33
Nama Layar : PR33
Ukuran Layar : 1024 X 768
Font : arial
Warna Background : putih
header
footer
Halaman ongkos kirim | provinsi
Klik home menuju PR01
Klik data kategori menuju PR02
Klik data barang menuju PR03
Klik pesanan menuju PR04
Klik penjualan menuju PR05
Klik ongkos kirim menuju PR08
Klik komentar menuju PR09
Klik ganti password menuju
PR11 Klik logout menuju
PR12 Klik tambah
menuju PR34 Klik edit menuju
PR41
Tambah
Tabel data ongkos kirim Edit
Branda
Penjualan Pesanan
Ongkos Kirim Barang
Kategori Barang
Profile Komentar
Terjual Selamat Datang, Operator | Keluar
Istana Kulit Garut
Gambar III.70 Perancangan Antar Muka Tampilkan Kota Di Provinsi 36. Perancangan antar muka ubah data provinsi
PR35
Nama Layar : PR35
Ukuran Layar : 1024 X 768
Font : arial
Warna Background : putih
header
footer
Halaman ongkos kirim
Klik home menuju PR01
Klik data kategori menuju PR02
Klik data barang menuju PR03
Klik pesanan menuju PR04
Klik penjualan menuju PR05
Klik ongkos kirim menuju PR08
Klik komentar menuju PR09
Klik ganti password menuju
PR11 Klik logout menuju
PR12 Klik batal menuju
PR08 Klik simpan
menuju PR08
Form ganti provinsi
Nama : Tampilkan :
Ya Tidak
Batal Simpan
Branda
Penjualan Pesanan
Ongkos Kirim Barang
Kategori Barang
Profile Komentar
Terjual Selamat Datang, Operator | Keluar
Istana Kulit Garut
Gambar III.71 Perancangan Antar Muka Ubah Data Provinsi
III.2.3.1.3 Perancangan Antar Muka Member
1. Perancangan antar muka setelah login berhasil
M01
Header
footer Logo Toko
Keranjang Belanja Facebook
...item Sub total...
Gambar cart
Nama Layar : M01
Ukuran Layar : 1024 X 768
Font : arial
Warna Backgroud : putih, abu-abu
Klik beranda menuju M13
Klik keranjang belanja menuju M15
Klik profil perusahaan menuju PN03
Klik cara pemesanan menuju PN04
Klik cara pembayaran menuju PN05
Klik retur barang menuju PN06
Klik tanya jawab menuju PN07
Klik ongkos menuju PN08
Klik hubungi kami menuju PN09
Klik gambar cari menuju PN10
Klik kategori menuju PN11
Klik gambar menuju M14
Klik history pemesanan menuju
M02 Klik alamat utama
menuju M03 Klik kontak anda
menuju M04 Klik ganti password
menuju M05 Klik komentar anda
menuju M06 Klik informasi menuju
M07 Klik logout menuju
M08 Kode barang
cari
Hallo ... Silahkan pilih menu disebelah kiri anda
Beranda Profil
Perusahaan Cara
Pemesanan Cara
Pembayaran Retur Barang Tanya Jawab
Hubungi Kami
Twiter Gambar logo
Nama Toko
Hallo ... Gambar yahoo
Tagihan Pesanan Alamat Utama
Kontak Anda Ganti Password
Logout Kategori
Jaket Kulit Pria Jaket Kulit Sport
Jaket Kulit Wanita Produk Baru
Produk Diskon Terbanyak Dilihat
Cari Barang Terbanyak Dibeli
Gambar III.72 Perancangan Antar Muka Setelah Login Berhasil
2. Perancangan antar muka lupa password
M12
Header
footer Nama Layar
: M12 Ukuran Layar
: 1024 X 768 Font
: arial Warna Backgroud
: putih, abu-abu
Klik beranda menuju PN01
Klik keranjang belanja menuju PN02
Klik profil perusahaan menuju PN03
Klik cara pemesanan menuju PN04
Klik cara pembayaran menuju PN05
Klik retur barang menuju PN06
Klik tanya jawab menuju PN07
Klik ongkos menuju PN08
Klik hubungi kami menuju PN09
Klik gambar cari menuju PN10
Klik kategori menuju PN11
Klik jadi member baru menuju PN12
Klik anda lupa password ? Menuju
M12 Klik gambar menuju
M14 Klik proses menuju
M12 Klik reset menuju M12
Anda lupa kehilangan password Email
Hitung
proses reset
3+2 Logo Toko
Keranjang Belanja Facebook
...item Sub total...
Gambar cart
Kode barang cari
Beranda Profil
Perusahaan Cara
Pemesanan Cara
Pembayaran Retur Barang Tanya Jawab
Hubungi Kami
Twiter Gambar logo
Nama Toko
Login Member Gambar yahoo
Email Password
login Anda lupa password ?
Jadi member baru Kategori
Jaket Kulit Pria Jaket Kulit Sport
Jaket Kulit Wanita Produk Baru
Produk Diskon Terbanyak Dilihat
Cari Barang Terbanyak Dibeli
Gambar III.73 Perancangan Antar Muka Lupa Password
3. Perancangan antar muka tagihan pemesanan
M02
Header
footer Nama Layar
: M02 Ukuran Layar
: 1024 X 768 Font
: arial Warna Backgroud
: putih, abu-abu
Klik beranda menuju M13
Klik keranjang belanja menuju M15
Klik profil perusahaan menuju PN03
Klik cara pemesanan menuju PN04
Klik cara pembayaran menuju PN05
Klik retur barang menuju PN06
Klik tanya jawab menuju PN07
Klik ongkos menuju PN08
Klik hubungi kami menuju PN09
Klik gambar cari menuju PN10
Klik kategori menuju PN11
Klik gambar menuju M14
Klik history pemesanan menuju
M02 Klik alamat utama
menuju M03 Klik kontak anda
menuju M04 Klik ganti password
menuju M05 Klik komentar anda
menuju M06 Klik informasi menuju
M07 Klik logout menuju
M08 Klik proses menuju
M12
Tagihan Pesanan
Tampilkan pesanan berdasarkan : kode
Tgl pesan Kota
tujuan rupiah
dollar
pembayaran
status aksi
proses
Logo Toko
Keranjang Belanja Facebook
...item Sub total...
Gambar cart
Kode barang cari
Beranda Profil
Perusahaan Cara
Pemesanan Cara
Pembayaran Retur Barang Tanya Jawab
Hubungi Kami
Twiter Gambar logo
Nama Toko
Hallo ... Gambar yahoo
Tagihan Pesanan Alamat Utama
Kontak Anda Ganti Password
Logout Kategori
Jaket Kulit Pria Jaket Kulit Sport
Jaket Kulit Wanita Produk Baru
Produk Diskon Terbanyak Dilihat
Cari Barang Terbanyak Dibeli
Gambar III.74 Perancangan Antar Muka Tagihan Pemesanan
4. Perancangan antar muka alamat utama
M03
Header
footer Nama Layar
: M03 Ukuran Layar
: 1024 X 768 Font
: arial Warna Backgroud
: putih, abu-abu
Klik beranda menuju M13
Klik keranjang belanja menuju M15
Klik profil perusahaan menuju PN03
Klik cara pemesanan menuju PN04
Klik cara pembayaran menuju PN05
Klik retur barang menuju PN06
Klik tanya jawab menuju PN07
Klik ongkos menuju PN08
Klik hubungi kami menuju PN09
Klik gambar cari menuju PN10
Klik kategori menuju PN11
Klik gambar menuju M14
Klik history pemesanan menuju
M02 Klik alamat utama
menuju M03 Klik kontak anda
menuju M04 Klik ganti password
menuju M05 Klik komentar anda
menuju M06 Klik informasi menuju
M07 Klik logout menuju
M08 Klik proses menuju
M03
Ganti alamat utama Alamat
Provinsi Kota
Kode pos Proses
Logo Toko
Keranjang Belanja Facebook
...item Sub total...
Gambar cart
Kode barang cari
Beranda Profil
Perusahaan Cara
Pemesanan Cara
Pembayaran Retur Barang Tanya Jawab
Hubungi Kami
Twiter Gambar logo
Nama Toko
Hallo ... Gambar yahoo
Tagihan Pesanan Alamat Utama
Kontak Anda Ganti Password
Logout Kategori
Jaket Kulit Pria Jaket Kulit Sport
Jaket Kulit Wanita Produk Baru
Produk Diskon Terbanyak Dilihat
Cari Barang Terbanyak Dibeli
Gambar III.75 Perancangan Antar Muka Alamat Utama
5. Perancangan antar muka kontak anda
M04
Header
footer Nama Layar
: M04 Ukuran Layar
: 1024 X 768 Font
: arial Warna Backgroud
: putih, abu-abu
Klik beranda menuju M13
Klik keranjang belanja menuju M15
Klik profil perusahaan menuju PN03
Klik cara pemesanan menuju PN04
Klik cara pembayaran menuju PN05
Klik retur barang menuju PN06
Klik tanya jawab menuju PN07
Klik ongkos menuju PN08
Klik hubungi kami menuju PN09
Klik gambar cari menuju PN10
Klik kategori menuju PN11
Klik gambar menuju M14
Klik history pemesanan menuju
M02 Klik alamat utama
menuju M03 Klik kontak anda
menuju M04 Klik ganti password
menuju M05 Klik komentar anda
menuju M06 Klik informasi menuju
M07 Klik logout menuju
M08 Klik proses menuju
M04
Ganti kontak Handphone
Telepon Fax
simpan Logo Toko
Keranjang Belanja Facebook
...item Sub total...
Gambar cart
Kode barang cari
Beranda Profil
Perusahaan Cara
Pemesanan Cara
Pembayaran Retur Barang Tanya Jawab
Hubungi Kami
Twiter Gambar logo
Nama Toko
Hallo ... Gambar yahoo
Tagihan Pesanan Alamat Utama
Kontak Anda Ganti Password
Logout Kategori
Jaket Kulit Pria Jaket Kulit Sport
Jaket Kulit Wanita Produk Baru
Produk Diskon Terbanyak Dilihat
Cari Barang Terbanyak Dibeli
Gambar III.76 Perancangan Antar Muka Kontak Anda 6.
Perancangan antar muka ganti password
M05
Header
footer Nama Layar
: M05 Ukuran Layar
: 1024 X 768 Font
: arial Warna Backgroud
: putih, abu-abu
Klik beranda menuju M13
Klik keranjang belanja menuju M15
Klik profil perusahaan menuju PN03
Klik cara pemesanan menuju PN04
Klik cara pembayaran menuju PN05
Klik retur barang menuju PN06
Klik tanya jawab menuju PN07
Klik ongkos menuju PN08
Klik hubungi kami menuju PN09
Klik gambar cari menuju PN10
Klik kategori menuju PN11
Klik gambar menuju M14
Klik history pemesanan menuju
M02 Klik alamat utama
menuju M03 Klik kontak anda
menuju M04 Klik ganti password
menuju M05 Klik komentar anda
menuju M06 Klik informasi menuju
M07 Klik logout menuju
M08 Klik simpan menuju
M05
Ganti password Password sekarang
Password baru Konfirmasi password
simpan Logo Toko
Keranjang Belanja Facebook
...item Sub total...
Gambar cart
Kode barang cari
Beranda Profil
Perusahaan Cara
Pemesanan Cara
Pembayaran Retur Barang Tanya Jawab
Hubungi Kami
Twiter Gambar logo
Nama Toko
Hallo ... Gambar yahoo
Tagihan Pesanan Alamat Utama
Kontak Anda Ganti Password
Logout Kategori
Jaket Kulit Pria Jaket Kulit Sport
Jaket Kulit Wanita Produk Baru
Produk Diskon Terbanyak Dilihat
Cari Barang Terbanyak Dibeli
Gambar III.77 Perancangan Antar Muka Ganti Password
7. Perancangan antar muka komentar anda
M06
Header
footer Nama Layar
: M05 Ukuran Layar
: 1024 X 768 Font
: arial Warna Backgroud
: putih, abu-abu
Klik beranda menuju M13
Klik keranjang belanja menuju M15
Klik profil perusahaan menuju PN03
Klik cara pemesanan menuju PN04
Klik cara pembayaran menuju PN05
Klik retur barang menuju PN06
Klik tanya jawab menuju PN07
Klik ongkos menuju PN08
Klik hubungi kami menuju PN09
Klik gambar cari menuju PN10
Klik kategori menuju PN11
Klik gambar menuju M14
Klik history pemesanan menuju
M02 Klik alamat utama
menuju M03 Klik kontak anda
menuju M04 Klik ganti password
menuju M05 Klik komentar anda
menuju M06 Klik informasi menuju
M07 Klik logout menuju
M08 Klik simpan menuju
M05
Komentar Anda Pada Tanggal
Komentar.. Gambar Barang
Logo Toko
Keranjang Belanja Facebook
...item Sub total...
Gambar cart
Kode barang cari
Beranda Profil
Perusahaan Cara
Pemesanan Cara
Pembayaran Retur Barang Tanya Jawab
Hubungi Kami
Twiter Gambar logo
Nama Toko
Hallo ... Gambar yahoo
Tagihan Pesanan Alamat Utama
Kontak Anda Ganti Password
Logout Kategori
Jaket Kulit Pria Jaket Kulit Sport
Jaket Kulit Wanita Produk Baru
Produk Diskon Terbanyak Dilihat
Cari Barang Terbanyak Dibeli
Gambar III.22 Perancangan Antar Muka Komentar Anda 8.
Perancangan antar muka informasi
M07
Header
footer Nama Layar
: M05 Ukuran Layar
: 1024 X 768 Font
: arial Warna Backgroud
: putih, abu-abu
Klik beranda menuju M13
Klik keranjang belanja menuju M15
Klik profil perusahaan menuju PN03
Klik cara pemesanan menuju PN04
Klik cara pembayaran menuju PN05
Klik retur barang menuju PN06
Klik tanya jawab menuju PN07
Klik ongkos menuju PN08
Klik hubungi kami menuju PN09
Klik gambar cari menuju PN10
Klik kategori menuju PN11
Klik gambar menuju M14
Klik history pemesanan menuju
M02 Klik alamat utama
menuju M03 Klik kontak anda
menuju M04 Klik ganti password
menuju M05 Klik komentar anda
menuju M06 Klik informasi menuju
M07 Klik logout menuju
M08 Klik simpan menuju
M05
Informasi Toko Istana Kulit Sukaregang Garut
Teks Logo Toko
Keranjang Belanja Facebook
...item Sub total...
Gambar cart
Kode barang cari
Beranda Profil
Perusahaan Cara
Pemesanan Cara
Pembayaran Retur Barang Tanya Jawab
Hubungi Kami
Twiter Gambar logo
Nama Toko
Hallo ... Gambar yahoo
Tagihan Pesanan Alamat Utama
Kontak Anda Ganti Password
Logout Kategori
Jaket Kulit Pria Jaket Kulit Sport
Jaket Kulit Wanita Produk Baru
Produk Diskon Terbanyak Dilihat
Cari Barang Terbanyak Dibeli
Gambar III.79 Perancangan Antar Muka Informasi
9. Perancangan antar muka logout
M08
Header
footer Nama Layar
: M08 Ukuran Layar
: 1024 X 768 Font
: arial Warna Backgroud
: putih, abu-abu
Klik beranda menuju PN01
Klik keranjang belanja menuju PN02
Klik profil perusahaan menuju PN03
Klik cara pemesanan menuju PN04
Klik cara pembayaran menuju PN05
Klik retur barang menuju PN06
Klik tanya jawab menuju PN07
Klik ongkos menuju PN08
Klik hubungi kami menuju PN09
Klik gambar cari menuju PN10
Klik kategori menuju PN11
Klik gambar menuju PN14
Klik login akan menuju M01
Klik reset akan menuju M08
Klik jadi member baru akan menuju PN12
Selamat Datang di Istana Kulit Garut Logo Toko
Keranjang Belanja Facebook
...item Sub total...
Gambar cart
Kode barang cari
Beranda Profil
Perusahaan Cara
Pemesanan Cara
Pembayaran Retur Barang Tanya Jawab
Hubungi Kami
Twiter Gambar logo
Nama Toko
gambar gambar
gambar gambar
gambar gambar
gambar gambar
gambar
selengkapnya selengkapnya
selengkapnya selengkapnya
selengkapnya selengkapnya
selengkapnya selengkapnya
selengkapnya Login Member
Gambar yahoo Email
Password login
Anda lupa password ? Jadi member baru
Kategori Jaket Kulit Pria
Jaket Kulit Sport Jaket Kulit Wanita
Produk Baru Produk Diskon
Terbanyak Dilihat Cari Barang
Terbanyak Dibeli
Gambar III.80 Perancangan Antar Muka Logout 10. Perancangan antar muka detail tagihan pesanan
M12
Header
footer Nama Layar
: M12 Ukuran Layar
: 1024 X 768 Font
: arial Warna Backgroud
: putih, abu-abu
Klik beranda menuju M13
Klik keranjang belanja menuju M15
Klik profil perusahaan menuju PN03
Klik cara pemesanan menuju PN04
Klik cara pembayaran menuju PN05
Klik retur barang menuju PN06
Klik tanya jawab menuju PN07
Klik ongkos menuju PN08
Klik hubungi kami menuju PN09
Klik gambar cari menuju PN10
Klik kategori menuju PN11
Klik gambar menuju M14
Klik history pemesanan menuju
M02 Klik alamat utama
menuju M03 Klik kontak anda
menuju M04 Klik ganti password
menuju M05 Klik komentar anda
menuju M06 Klik informasi menuju
M07 Klik logout menuju
M08
Detail pesanan Tabel detail pesanan
Keterangan harga dollar Logo Toko
Keranjang Belanja Facebook
...item Sub total...
Gambar cart
Kode barang cari
Beranda Profil
Perusahaan Cara
Pemesanan Cara
Pembayaran Retur Barang Tanya Jawab
Hubungi Kami
Twiter Gambar logo
Nama Toko
Hallo ... Gambar yahoo
Tagihan Pesanan Alamat Utama
Kontak Anda Ganti Password
Logout Kategori
Jaket Kulit Pria Jaket Kulit Sport
Jaket Kulit Wanita Produk Baru
Produk Diskon Terbanyak Dilihat
Cari Barang Terbanyak Dibeli
Gambar III.81 Perancangan Antar Muka Detail Tagihan Pesanan
11. Perancangan antar muka beranda
M13
Header
footer
Selamat Datang di Istana Kulit Garut
gambar gambar
gambar gambar
gambar gambar
gambar gambar
gambar
selengkapnya selengkapnya
selengkapnya selengkapnya
selengkapnya selengkapnya
selengkapnya selengkapnya
selengkapnya
Nama Layar : M13
Ukuran Layar : 1024 X 768
Font : arial
Warna Backgroud : putih, abu-abu
Klik beranda menuju M13
Klik keranjang belanja menuju M15
Klik profil perusahaan menuju PN03
Klik cara pemesanan menuju PN04
Klik cara pembayaran menuju PN05
Klik retur barang menuju PN06
Klik tanya jawab menuju PN07
Klik ongkos menuju PN08
Klik hubungi kami menuju PN09
Klik gambar cari menuju PN10
Klik kategori menuju PN11
Klik gambar menuju M14
Klik history pemesanan menuju M02
Klik alamat utama menuju M03
Klik kontak anda menuju M04
Klik ganti password menuju M05
Klik komentar anda menuju M06
Klik informasi menuju M07
Klik logout menuju M08 Klik selengkapnya
menuju M14
Logo Toko
Keranjang Belanja Facebook
...item Sub total...
Gambar cart
Kode barang cari
Beranda Profil
Perusahaan Cara
Pemesanan Cara
Pembayaran Retur Barang Tanya Jawab
Hubungi Kami
Twiter Gambar logo
Nama Toko
Hallo ... Gambar yahoo
Tagihan Pesanan Alamat Utama
Kontak Anda Ganti Password
Logout Kategori
Jaket Kulit Pria Jaket Kulit Sport
Jaket Kulit Wanita Produk Baru
Produk Diskon Terbanyak Dilihat
Cari Barang Terbanyak Dibeli
Gambar III.82 Perancangan Antar Muka Beranda
12. Perancangan antar muka keranjang belanja
M15
Header
footer
Keranjang belanja anda
Nama Layar : M15
Ukuran Layar : 1024 X 768
Font : arial
Warna Backgroud : putih, abu-abu
Klik beranda menuju M13
Klik keranjang belanja menuju M15
Klik profil perusahaan menuju PN03
Klik cara pemesanan menuju PN04
Klik cara pembayaran menuju PN05
Klik retur barang menuju PN06
Klik tanya jawab menuju PN07
Klik ongkos menuju PN08
Klik hubungi kami menuju PN09
Klik gambar cari menuju PN10
Klik kategori menuju PN11
Klik gambar menuju M14
Klik history pemesanan menuju M02
Klik alamat utama menuju M03
Klik kontak anda menuju M04
Klik ganti password menuju M05
Klik komentar anda menuju M06
Klik informasi menuju M07
Klik logout menuju M08 Kembali berbelanja
menuju M13 Klik update keranjang
menuju M15 Klik selesai berbelanja
menuju M09
hapus detail harga diskon jumlah rupiah dollar total harga
kembali berbelanja Selesai berbelanja
Update keranjang gambar
barang Sub total bayar
Logo Toko
Keranjang Belanja Facebook
...item Sub total...
Gambar cart
Kode barang cari
Beranda Profil
Perusahaan Cara
Pemesanan Cara
Pembayaran Retur Barang Tanya Jawab
Hubungi Kami
Twiter Gambar logo
Nama Toko
Hallo ... Gambar yahoo
Tagihan Pesanan Alamat Utama
Kontak Anda Ganti Password
Logout Kategori
Jaket Kulit Pria Jaket Kulit Sport
Jaket Kulit Wanita Produk Baru
Produk Diskon Terbanyak Dilihat
Cari Barang Terbanyak Dibeli
Gambar III.83 Perancangan Antar Muka Keranjang Belanja
13. Perancangan antar muka pilih alamat tujuan pengiriman
M09
Header
footer Nama Layar
: M09 Ukuran Layar
: 1024 X 768 Font
: arial Warna Backgroud
: putih, abu-abu Alamat tujuan pengiriman
Text Klik beranda menuju
M13 Klik keranjang belanja
menuju M15 Klik profil perusahaan
menuju PN03 Klik cara pemesanan
menuju PN04 Klik cara pembayaran
menuju PN05 Klik retur barang
menuju PN06 Klik tanya jawab
menuju PN07 Klik ongkos menuju
PN08 Klik hubungi kami
menuju PN09 Klik gambar cari
menuju PN10 Klik kategori menuju
PN11 Klik gambar menuju
M14 Klik history
pemesanan menuju M02
Klik alamat utama menuju M03
Klik kontak anda menuju M04
Klik ganti password menuju M05
Klik komentar anda menuju M06
Klik informasi menuju M07
Klik logout menuju M08
Klik alamat utama menuju M091
Klik alamat baru menuju M092
Gunakan alamat utama
Logo Toko
Keranjang Belanja Facebook
...item Sub total...
Gambar cart
Kode barang cari
Beranda Profil
Perusahaan Cara
Pemesanan Cara
Pembayaran Retur Barang Tanya Jawab
Hubungi Kami
Twiter Gambar logo
Nama Toko
Kembali ke keranjang Lanjutkan
Alamat baru
kembali ke keranjang Lanjutkan
Nama lengkap Alamat
Provinsi Kota
Kode pos Handphone
Telepon Hallo ...
Gambar yahoo Tagihan Pesanan
Alamat Utama Kontak Anda
Ganti Password Logout
Kategori Jaket Kulit Pria
Jaket Kulit Sport Jaket Kulit Wanita
Produk Baru Produk Diskon
Terbanyak Dilihat Cari Barang
Terbanyak Dibeli
Gambar III.84 Perancangan Antar Muka Pilih Alamat Tujuan Pengiriman
Perancangan antar muka form pembayaran
M10
Header
footer Nama Layar
: M10 Ukuran Layar
: 1024 X 768 Font
: arial Warna Backgroud
: putih, abu-abu
Formulir pembayaran Klik beranda menuju
M13 Klik keranjang belanja
menuju M15 Klik profil perusahaan
menuju PN03 Klik cara pemesanan
menuju PN04 Klik cara pembayaran
menuju PN05 Klik retur barang menuju
PN06 Klik tanya jawab menuju
PN07 Klik ongkos menuju
PN08 Klik hubungi kami
menuju PN09 Klik gambar cari menuju
PN10 Klik kategori menuju
PN11 Klik gambar menuju
M14 Klik history pemesanan
menuju M02 Klik alamat utama
menuju M03 Klik kontak anda menuju
M04 Klik ganti password
menuju M05 Klik komentar anda
menuju M06 Klik informasi menuju
M07 Klik logout menuju M08
Klik ganti alamat tujuan menuju M09
Klik bayar dan selesai menuju M11
Klik bayar nanti selesai menuju M11
Detail barang dan detail harga barang Alamat tujuan
Rincian biaya
ganti alamat tujuan Form jenis
pembayaran dengan paypal
Bayar Nanti Bayar dan selesai
Form jenis pembayaran transfer bank dan COD
Logo Toko
Keranjang Belanja Facebook
...item Sub total...
Gambar cart
Kode barang cari
Beranda Profil
Perusahaan Cara
Pemesanan Cara
Pembayaran Retur Barang Tanya Jawab
Hubungi Kami
Twiter Gambar logo
Nama Toko
Hallo ... Gambar yahoo
Tagihan Pesanan Alamat Utama
Kontak Anda Ganti Password
Logout Kategori
Jaket Kulit Pria Jaket Kulit Sport
Jaket Kulit Wanita Produk Baru
Produk Diskon Terbanyak Dilihat
Cari Barang Terbanyak Dibeli
Gambar III.85 Perancangan Antar Muka Form Pembayaran
14. Perancangan antar muka konfirmasi pemesanan
M11
Header
footer Nama Layar
: M11 Ukuran Layar
: 1024 X 768 Font
: arial Warna Backgroud
: putih, abu-abu
teks
Terima kasih telah berbelanja
Klik beranda menuju M13
Klik keranjang belanja menuju M15
Klik profil perusahaan menuju PN03
Klik cara pemesanan menuju PN04
Klik cara pembayaran menuju PN05
Klik retur barang menuju PN06
Klik tanya jawab menuju PN07
Klik ongkos menuju PN08
Klik hubungi kami menuju PN09
Klik gambar cari menuju PN10
Klik kategori menuju PN11
Klik gambar menuju M14
Klik history pemesanan menuju
M02 Klik alamat utama
menuju M03 Klik kontak anda
menuju M04 Klik ganti password
menuju M05 Klik komentar anda
menuju M06 Klik informasi menuju
M07 Klik logout menuju
M08
Logo Toko
Keranjang Belanja Facebook
...item Sub total...
Gambar cart
Kode barang cari
Beranda Profil
Perusahaan Cara
Pemesanan Cara
Pembayaran Retur Barang Tanya Jawab
Hubungi Kami
Twiter Gambar logo
Nama Toko
Hallo ... Gambar yahoo
Tagihan Pesanan Alamat Utama
Kontak Anda Ganti Password
Logout Kategori
Jaket Kulit Pria Jaket Kulit Sport
Jaket Kulit Wanita Produk Baru
Produk Diskon Terbanyak Dilihat
Cari Barang Terbanyak Dibeli
Gambar III.86 Perancangan Antar Muka Konfirmasi Pemesanan
III.2.3.1.4 Perancangan Antar Muka Pengunjung
1. Perancangan antar muka beranda
PN01
Header
footer
Selamat Datang di Istana Kulit Garut
gambar gambar
gambar gambar
gambar gambar
gambar gambar
gambar
selengkapnya selengkapnya
selengkapnya selengkapnya
selengkapnya selengkapnya
selengkapnya selengkapnya
selengkapnya
Nama Layar : PN01
Ukuran Layar : 1024 X 768
Font : arial
Warna Backgroud : putih, abu-abu
Klik beranda menuju PN01
Klik keranjang belanja menuju PN02
Klik profil perusahaan menuju PN03
Klik cara pemesanan menuju PN04
Klik cara pembayaran menuju PN05
Klik retur barang menuju PN06
Klik tanya jawab menuju PN07
Klik ongkos menuju PN08
Klik hubungi kami menuju PN09
Klik gambar cari menuju PN10
Klik kategori menuju PN11
Klik jadi member baru menuju PN12
Klik anda lupa password ? Menuju
PN13 Klik gambar menuju
PN14 Klik selengkapnya
menuju PN14
Logo Toko
Keranjang Belanja Facebook
...item Sub total...
Gambar cart
Kode barang cari
Beranda Profil
Perusahaan Cara
Pemesanan Cara
Pembayaran Retur Barang Tanya Jawab
Hubungi Kami
Twiter Gambar logo
Nama Toko
Login Member Gambar yahoo
Email Password
login Anda lupa password ?
Jadi member baru Kategori
Jaket Kulit Pria Jaket Kulit Sport
Jaket Kulit Wanita Produk Baru
Produk Diskon Terbanyak Dilihat
Cari Barang Terbanyak Dibeli
Gambar III.87 Perancangan Antar Muka Beranda 2.
Perancangan antar muka keranjang belanja
PN02
Header
footer
Keranjang belanja anda
Nama Layar : PN02
Ukuran Layar : 1024 X 768
Font : arial
Warna Backgroud : putih, abu-abu
Klik beranda menuju PN01
Klik keranjang belanja menuju PN02
Klik profil perusahaan menuju PN03
Klik cara pemesanan menuju PN04
Klik cara pembayaran menuju PN05
Klik retur barang menuju PN06
Klik tanya jawab menuju PN07
Klik ongkos menuju PN08
Klik hubungi kami menuju PN09
Klik gambar cari menuju PN10
Klik kategori menuju PN11
Klik jadi member baru menuju PN12
Klik anda lupa password ? Menuju
PN13 Klik gambar menuju
PN14 Klik kembali
berbelanja menuju PN01
Keranjang belanja anda masih kosong Silahkan berbelanja di toko kami
kembali berbelanja
Logo Toko
Keranjang Belanja Facebook
...item Sub total...
Gambar cart
Kode barang cari
Beranda Profil
Perusahaan Cara
Pemesanan Cara
Pembayaran Retur Barang Tanya Jawab
Hubungi Kami
Twiter Gambar logo
Nama Toko
Login Member Gambar yahoo
Email Password
login Anda lupa password ?
Jadi member baru Kategori
Jaket Kulit Pria Jaket Kulit Sport
Jaket Kulit Wanita Produk Baru
Produk Diskon Terbanyak Dilihat
Cari Barang Terbanyak Dibeli
Gambar III.88 Perancangan Antar Muka Keranjang Belanja
3. Perancangan antar muka profil perusahaan
PN03
Header
footer Nama Layar
: PN03 Ukuran Layar
: 1024 X 768 Font
: arial Warna Backgroud
: putih, abu-abu
Klik beranda menuju PN01
Klik keranjang belanja menuju PN02
Klik profil perusahaan menuju PN03
Klik cara pemesanan menuju PN04
Klik cara pembayaran menuju PN05
Klik retur barang menuju PN06
Klik tanya jawab menuju PN07
Klik ongkos menuju PN08
Klik hubungi kami menuju PN09
Klik gambar cari menuju PN10
Klik kategori menuju PN11
Klik jadi member baru menuju PN12
Klik anda lupa password ? Menuju
PN13 Klik gambar menuju
PN14
Profil toko granitex
teks Logo Toko
Keranjang Belanja Facebook
...item Sub total...
Gambar cart
Kode barang cari
Beranda Profil
Perusahaan Cara
Pemesanan Cara
Pembayaran Retur Barang Tanya Jawab
Hubungi Kami
Twiter Gambar logo
Nama Toko
Login Member Gambar yahoo
Email Password
login Anda lupa password ?
Jadi member baru Kategori
Jaket Kulit Pria Jaket Kulit Sport
Jaket Kulit Wanita Produk Baru
Produk Diskon Terbanyak Dilihat
Cari Barang Terbanyak Dibeli
Gambar III.89 Perancangan Antar Muka Profil Perusahaan 4.
Perancangan antar muka cara pemesanan
PN04
Header
footer Nama Layar
: PN04 Ukuran Layar
: 1024 X 768 Font
: arial Warna Backgroud
: putih, abu-abu
Klik beranda menuju PN01
Klik keranjang belanja menuju PN02
Klik profil perusahaan menuju PN03
Klik cara pemesanan menuju PN04
Klik cara pembayaran menuju PN05
Klik retur barang menuju PN06
Klik tanya jawab menuju PN07
Klik ongkos menuju PN08
Klik hubungi kami menuju PN09
Klik gambar cari menuju PN10
Klik kategori menuju PN11
Klik jadi member baru menuju PN12
Klik anda lupa password ? Menuju
PN13 Klik gambar menuju
PN14
Cara pemesanan teks
Logo Toko
Keranjang Belanja Facebook
...item Sub total...
Gambar cart
Kode barang cari
Beranda Profil
Perusahaan Cara
Pemesanan Cara
Pembayaran Retur Barang Tanya Jawab
Hubungi Kami
Twiter Gambar logo
Nama Toko
Login Member Gambar yahoo
Email Password
login Anda lupa password ?
Jadi member baru Kategori
Jaket Kulit Pria Jaket Kulit Sport
Jaket Kulit Wanita Produk Baru
Produk Diskon Terbanyak Dilihat
Cari Barang Terbanyak Dibeli
Gambar III.90 Perancangan Antar Muka Cara Pemesanan
5. Perancangan antar muka cara pembayaran
PN05
Header
footer Nama Layar
: PN05 Ukuran Layar
: 1024 X 768 Font
: arial Warna Backgroud
: putih, abu-abu
Klik beranda menuju PN01
Klik keranjang belanja menuju PN02
Klik profil perusahaan menuju PN03
Klik cara pemesanan menuju PN04
Klik cara pembayaran menuju PN05
Klik retur barang menuju PN06
Klik tanya jawab menuju PN07
Klik ongkos menuju PN08
Klik hubungi kami menuju PN09
Klik gambar cari menuju PN10
Klik kategori menuju PN11
Klik jadi member baru menuju PN12
Klik anda lupa password ? Menuju
PN13 Klik gambar menuju
PN14
Cara pembayaran teks
Logo Toko
Keranjang Belanja Facebook
...item Sub total...
Gambar cart
Kode barang cari
Beranda Profil
Perusahaan Cara
Pemesanan Cara
Pembayaran Retur Barang Tanya Jawab
Hubungi Kami
Twiter Gambar logo
Nama Toko
Login Member Gambar yahoo
Email Password
login Anda lupa password ?
Jadi member baru Kategori
Jaket Kulit Pria Jaket Kulit Sport
Jaket Kulit Wanita Produk Baru
Produk Diskon Terbanyak Dilihat
Cari Barang Terbanyak Dibeli
Gambar III.91 Perancangan Antar Muka Cara Pembayaran 6.
Perancangan antar muka retur barang
PN06
Header
footer Nama Layar
: PN06 Ukuran Layar
: 1024 X 768 Font
: arial Warna Backgroud
: putih, abu-abu
Klik beranda menuju PN01
Klik keranjang belanja menuju PN02
Klik profil perusahaan menuju PN03
Klik cara pemesanan menuju PN04
Klik cara pembayaran menuju PN05
Klik retur barang menuju PN06
Klik tanya jawab menuju PN07
Klik ongkos menuju PN08
Klik hubungi kami menuju PN09
Klik gambar cari menuju PN10
Klik kategori menuju PN11
Klik jadi member baru menuju PN12
Klik anda lupa password ? Menuju
PN13 Klik gambar menuju
PN14
Retur barang teks
Logo Toko
Keranjang Belanja Facebook
...item Sub total...
Gambar cart
Kode barang cari
Beranda Profil
Perusahaan Cara
Pemesanan Cara
Pembayaran Retur Barang Tanya Jawab
Hubungi Kami
Twiter Gambar logo
Nama Toko
Login Member Gambar yahoo
Email Password
login Anda lupa password ?
Jadi member baru Kategori
Jaket Kulit Pria Jaket Kulit Sport
Jaket Kulit Wanita Produk Baru
Produk Diskon Terbanyak Dilihat
Cari Barang Terbanyak Dibeli
Gambar III.92 Perancangan Antar Muka Retur Barang
7. Perancangan antar muka tanya jawab
PN07
Header
footer Logo dan Nama
Toko
Keranjang Belanja Chat With Me
Transfer gambar
gambar ...item
Sub total... gambar
Nama Layar : PN07
Ukuran Layar : 1024 X 768
Font : arial
Warna Backgroud : putih, abu-abu
Klik beranda menuju PN01
Klik keranjang belanja menuju PN02
Klik profil perusahaan menuju PN03
Klik cara pemesanan menuju PN04
Klik cara pembayaran menuju PN05
Klik retur barang menuju PN06
Klik tanya jawab menuju PN07
Klik ongkos menuju PN08
Klik hubungi kami menuju PN09
Klik gambar cari menuju PN10
Klik kategori menuju PN11
Klik jadi member baru menuju PN12
Klik anda lupa password ? Menuju
PN13 Klik gambar menuju
PN14
cari
Gambar cari
Tanya jawab teks
Beranda Profil
Perusahaan Cara
Pemesanan Cara
Pembayaran Retur Barang Tanya Jawab
Ongkos Hubungi
Kami Login Member
Gambar yahoo Email
Password login
Anda lupa password ? Jadi member baru
Kategori Jaket Kulit Pria
Jaket Kulit Sport Jaket Kulit Wanita
Produk Baru Produk Diskon
Terbanyak Dilihat Cari Barang
Terbanyak Dibeli
Gambar III.93 Perancangan Antar Muka Tanya Jawab 8.
Perancangan antar muka hubungi kami
PN09
Header
footer Nama Layar
: PN09 Ukuran Layar
: 1024 X 768 Font
: arial Warna Backgroud
: putih, abu-abu
Klik beranda menuju PN01
Klik keranjang belanja menuju PN02
Klik profil perusahaan menuju PN03
Klik cara pemesanan menuju PN04
Klik cara pembayaran menuju PN05
Klik retur barang menuju PN06
Klik tanya jawab menuju PN07
Klik ongkos menuju PN08
Klik hubungi kami menuju PN09
Klik gambar cari menuju PN10
Klik kategori menuju PN11
Klik jadi member baru menuju PN12
Klik anda lupa password ? Menuju
PN13 Klik gambar menuju
PN14
Hubungi kami teks
Logo Toko
Keranjang Belanja Facebook
...item Sub total...
Gambar cart
Kode barang cari
Beranda Profil
Perusahaan Cara
Pemesanan Cara
Pembayaran Retur Barang Tanya Jawab
Hubungi Kami
Twiter Gambar logo
Nama Toko
Login Member Gambar yahoo
Email Password
login Anda lupa password ?
Jadi member baru Kategori
Jaket Kulit Pria Jaket Kulit Sport
Jaket Kulit Wanita Produk Baru
Produk Diskon Terbanyak Dilihat
Cari Barang Terbanyak Dibeli
Gambar III.94 Perancangan Antar Muka Hubungi Kami
9. Perancangan antar muka menu pencarian barang
PN10
Header
footer Nama Layar
: PN10 Ukuran Layar
: 1024 X 768 Font
: arial Warna Backgroud
: putih, abu-abu
Klik beranda menuju PN01
Klik keranjang belanja menuju PN02
Klik profil perusahaan menuju PN03
Klik cara pemesanan menuju PN04
Klik cara pembayaran menuju PN05
Klik retur barang menuju PN06
Klik tanya jawab menuju PN07
Klik ongkos menuju PN08
Klik hubungi kami menuju PN09
Klik gambar cari menuju PN10
Klik kategori menuju PN11
Klik jadi member baru menuju PN12
Klik anda lupa password ? Menuju
PN13 Klik gambar menuju
PN14 Klik proses menuju
PN15
Pencarian Barang di Istana Kulit Garut Kode barang :
Masukan kode barang Cari
Pencarian Berdasarkan Kode Barang Pencarian Berdasarkan Detai Barang
Kategori Diskon
keatas Warna
Ukuran Diurutkan Berdasarkan
Logo Toko
Keranjang Belanja Facebook
...item Sub total...
Gambar cart
Kode barang cari
Beranda Profil
Perusahaan Cara
Pemesanan Cara
Pembayaran Retur Barang Tanya Jawab
Hubungi Kami
Twiter Gambar logo
Nama Toko
Login Member Gambar yahoo
Email Password
login Anda lupa password ?
Jadi member baru Kategori
Jaket Kulit Pria Jaket Kulit Sport
Jaket Kulit Wanita Produk Baru
Produk Diskon Terbanyak Dilihat
Cari Barang Terbanyak Dibeli
Gambar III.95 Perancangan Antar Muka Menu Pencarian Barang 10. Perancangan antar muka kategori barang
PN11
Header
footer
Nama kategori barang
gambar gambar
gambar gambar
gambar gambar
selengkapnya selengkapnya
selengkapnya selengkapnya
selengkapnya selengkapnya
Nama Layar : PN11
Ukuran Layar : 1024 X 768
Font : arial
Warna Backgroud : putih, abu-abu
Klik beranda menuju PN01
Klik keranjang belanja menuju PN02
Klik profil perusahaan menuju PN03
Klik cara pemesanan menuju PN04
Klik cara pembayaran menuju PN05
Klik retur barang menuju PN06
Klik tanya jawab menuju PN07
Klik ongkos menuju PN08
Klik hubungi kami menuju PN09
Klik gambar cari menuju PN10
Klik kategori menuju PN11
Klik jadi member baru menuju PN12
Klik anda lupa password ? Menuju
PN13 Klik gambar menuju
PN14 Klik selengkapnya
menuju PN14
gambar gambar
gambar
selengkapnya selengkapnya
selengkapnya
Logo Toko
Keranjang Belanja Facebook
...item Sub total...
Gambar cart
Kode barang cari
Beranda Profil
Perusahaan Cara
Pemesanan Cara
Pembayaran Retur Barang Tanya Jawab
Hubungi Kami
Twiter Gambar logo
Nama Toko
Login Member Gambar yahoo
Email Password
login Anda lupa password ?
Jadi member baru Kategori
Jaket Kulit Pria Jaket Kulit Sport
Jaket Kulit Wanita Produk Baru
Produk Diskon Terbanyak Dilihat
Cari Barang Terbanyak Dibeli
Gambar III.96 Perancangan Antar Muka Kategori Barang
11. Perancangan antar muka daftar member
PN12
Header
footer Nama Layar
: PN12 Ukuran Layar
: 1024 X 768 Font
: arial Warna Backgroud
: putih, abu-abu
Klik beranda menuju PN01
Klik keranjang belanja menuju PN02
Klik profil perusahaan menuju PN03
Klik cara pemesanan menuju PN04
Klik cara pembayaran menuju PN05
Klik retur barang menuju PN06
Klik tanya jawab menuju PN07
Klik ongkos menuju PN08
Klik hubungi kami menuju PN09
Klik gambar cari menuju PN10
Klik kategori menuju PN11
Klik jadi member baru menuju PN12
Klik anda lupa password ? Menuju
PN13 Klik gambar menuju
PN14 Klik daftar menuju
PN17 Klik reset menuju
PN12
Form member baru Email baru
Password baru Konfirmasi password
Nama lengkap Alamat
Provinsi Kota
Kode pos Handphone
Telepon Fax
Hitung 1+2 daftar
reset Logo Toko
Keranjang Belanja Facebook
...item Sub total...
Gambar cart
Kode barang cari
Beranda Profil
Perusahaan Cara
Pemesanan Cara
Pembayaran Retur Barang Tanya Jawab
Hubungi Kami
Twiter Gambar logo
Nama Toko
Login Member Gambar yahoo
Email Password
login Anda lupa password ?
Jadi member baru Kategori
Jaket Kulit Pria Jaket Kulit Sport
Jaket Kulit Wanita Produk Baru
Produk Diskon Terbanyak Dilihat
Cari Barang Terbanyak Dibeli
Gambar III.97 Perancangan Antar Muka Daftar Member 12. Perancangan antar muka lupa password
PN13
Header
footer Nama Layar
: PN13 Ukuran Layar
: 1024 X 768 Font
: arial Warna Backgroud
: putih, abu-abu
Klik beranda menuju PN01
Klik keranjang belanja menuju PN02
Klik profil perusahaan menuju PN03
Klik cara pemesanan menuju PN04
Klik cara pembayaran menuju PN05
Klik retur barang menuju PN06
Klik tanya jawab menuju PN07
Klik ongkos menuju PN08
Klik hubungi kami menuju PN09
Klik gambar cari menuju PN10
Klik kategori menuju PN11
Klik jadi member baru menuju PN12
Klik anda lupa password ? Menuju
PN13 Klik gambar menuju
PN14 Klik proses menuju
PN13 Klik reset menuju
PN13
Anda lupa kehilangan password email
Hitung 7+3
proses reset
Logo Toko
Keranjang Belanja Facebook
...item Sub total...
Gambar cart
Kode barang cari
Beranda Profil
Perusahaan Cara
Pemesanan Cara
Pembayaran Retur Barang Tanya Jawab
Hubungi Kami
Twiter Gambar logo
Nama Toko
Login Member Gambar yahoo
Email Password
login Anda lupa password ?
Jadi member baru Kategori
Jaket Kulit Pria Jaket Kulit Sport
Jaket Kulit Wanita Produk Baru
Produk Diskon Terbanyak Dilihat
Cari Barang Terbanyak Dibeli
Gambar III.98 Perancangan Antar Muka Lupa Password
13. Perancangan antar muka hasil pencarian
PN15
Header
footer Nama Layar
: PN15 Ukuran Layar
: 1024 X 768 Font
: arial Warna Backgroud
: putih, abu-abu
Klik beranda menuju PN01
Klik keranjang belanja menuju PN02
Klik profil perusahaan menuju PN03
Klik cara pemesanan menuju PN04
Klik cara pembayaran menuju PN05
Klik retur barang menuju PN06
Klik tanya jawab menuju PN07
Klik ongkos menuju PN08
Klik hubungi kami menuju PN09
Klik gambar cari menuju PN10
Klik kategori menuju PN11
Klik jadi member baru menuju PN12
Klik anda lupa password ? Menuju
PN13 Klik gambar menuju
PN14 Klik selengkapnya
menuju PN14
Menu pencarian Nama barang
Diskon Kategori
proses
gambar
selengkapnya
gambar
selengkapnya
gambar
selengkapnya
keatas Logo Toko
Keranjang Belanja Facebook
...item Sub total...
Gambar cart
Kode barang cari
Beranda Profil
Perusahaan Cara
Pemesanan Cara
Pembayaran Retur Barang Tanya Jawab
Hubungi Kami
Twiter Gambar logo
Nama Toko
Login Member Gambar yahoo
Email Password
login Anda lupa password ?
Jadi member baru Kategori
Jaket Kulit Pria Jaket Kulit Sport
Jaket Kulit Wanita Produk Baru
Produk Diskon Terbanyak Dilihat
Cari Barang Terbanyak Dibeli
Gambar III.99 Perancangan Antar Muka Hasil Pencarian 14. Perancangan antar muka sukses registrasi member
PN16
Header
footer Nama Layar
: PN16 Ukuran Layar
: 1024 X 768 Font
: arial Warna Backgroud
: putih, abu-abu
Klik beranda menuju PN01
Klik keranjang belanja menuju PN02
Klik profil perusahaan menuju PN03
Klik cara pemesanan menuju PN04
Klik cara pembayaran menuju PN05
Klik retur barang menuju PN06
Klik tanya jawab menuju PN07
Klik ongkos menuju PN08
Klik hubungi kami menuju PN09
Klik gambar cari menuju PN10
Klik kategori menuju PN11
Klik jadi member baru menuju PN12
Klik anda lupa password ? Menuju
PN13 Klik gambar menuju
PN14
cari Aktifasi keanggotaan
Keanggotaan anda sudah teraktifasi
Selamat bergabung, silahkan login sebagai member
gambar Logo Toko
Keranjang Belanja Facebook
...item Sub total...
Gambar cart
Kode barang cari
Beranda Profil
Perusahaan Cara
Pemesanan Cara
Pembayaran Retur Barang Tanya Jawab
Hubungi Kami
Twiter Gambar logo
Nama Toko
Login Member Gambar yahoo
Email Password
login Anda lupa password ?
Jadi member baru Kategori
Jaket Kulit Pria Jaket Kulit Sport
Jaket Kulit Wanita Produk Baru
Produk Diskon Terbanyak Dilihat
Cari Barang Terbanyak Dibeli
Gambar III.100 Perancangan Antar Muka Sukses Registrasi Member
15. Perancangan antar muka aktifasi keanggotaan
PN17
Header
footer Nama Layar
: PN17 Ukuran Layar
: 1024 X 768 Font
: arial Warna Backgroud
: putih, abu-abu
Klik beranda menuju PN01
Klik keranjang belanja menuju PN02
Klik profil perusahaan menuju PN03
Klik cara pemesanan menuju PN04
Klik cara pembayaran menuju PN05
Klik retur barang menuju PN06
Klik tanya jawab menuju PN07
Klik ongkos menuju PN08
Klik hubungi kami menuju PN09
Klik gambar cari menuju PN10
Klik kategori menuju PN11
Klik jadi member baru menuju PN12
Klik anda lupa password ? Menuju
PN13 Klik gambar menuju
PN14
Aktifasi keanggotaan teks
Logo Toko
Keranjang Belanja Facebook
...item Sub total...
Gambar cart
Kode barang cari
Beranda Profil
Perusahaan Cara
Pemesanan Cara
Pembayaran Retur Barang Tanya Jawab
Hubungi Kami
Twiter Gambar logo
Nama Toko
Login Member Gambar yahoo
Email Password
login Anda lupa password ?
Jadi member baru Kategori
Jaket Kulit Pria Jaket Kulit Sport
Jaket Kulit Wanita Produk Baru
Produk Diskon Terbanyak Dilihat
Cari Barang Terbanyak Dibeli
Gambar III.101 Perancangan Antar Muka Aktifasi Keanggotaan
III.2.3.2 Perancangan Pesan
Pada gambar III.102 dibawah ini merupakan perancangan pesan yang terdapat pada aplikasi e-commerce di toko Istana Kulit Sukaregang. Adapun
tampilan pesan yang ada adalah sebagai berikut :
M01 X
“Email” tidak valid ok
M02 X
“Password Baru” dibutuhkan ok
M07 X
“Alamat” dibutuhkan ok
M03 X
“Konfirmasi Password” dibutuhkan ok
M06 X
“Password” dibutuhkan ok
M04 X
“Nama” dibutuhkan ok
M05 X
“Level” dibutuhkan ok
M08 X
“Provinsi” dibutuhkan ok
M09 X
“Kota” dibutuhkan ok
M10 X
“Kode Pos” dibutuhkan ok
M11 X
“Perhitungan” dibutuhkan ok
M12 X
“No Rekening Asal” dibutuhkan ok
M13 X
“Nama Pemilik Rekening Asal” dibutuhkan ok
M14 X
“No Rekening Asal” tidak valid ok
M15 X
“Nama Pemilik Rekening Asal” tidak valid ok
M16 X
ERROR : masukkan email anda ok
M17 X
ERROR : email salah ok
M18 X
ERROR : Masukkan email dan password anda
ok
M25 X
“Harga” dibutuhkan ok
M26 X
“Berat” dibutuhkan ok
M27 X
“Stok” dibutuhkan ok
M28 X
“Kategori Barang” dibutuhkan “Nama” dibutuhkan
“Ukuran” dibutuhkan “Harga” dibutuhkan
“Berat” dibutuhkan “Stok” dibutuhkan
ok M29
X
“Ukuran” dibutuhkan “Harga” dibutuhkan
“Berat” dibutuhkan “Stok” dibutuhkan
ok M30
X “Kode Pengiriman” dibutuhkan
ok M31
X “Nama Provinsi” dibutuhkan
ok M32
X “Nama Kota” dibutuhkan
ok M21
X “Kategori Barang” dibutuhkan
ok M19
X ERROR : email atau password salah
ok M20
X “Nama” dibutuhkan
ok M22
X “Nama” dibutuhkan
ok M23
X “Nama” dibutuhkan
ok M24
X “Ukuran” dibutuhkan
ok
M33 X
“Ongkos Kirim” dibutuhkan ok
M34 X
“Nama Kota” dibutuhkan “Ongkos Kirim” dibutuhkan
ok M35
X “Nama Provinsi” dibutuhkan
“Nama Kota” dibutuhkan “Ongkos Kirim” dibutuhkan
ok
Gambar III.102 Perancangan Pesan
III.2.3.3 Jaringan Semantik
Setelah melakukan perancangan antarmuka dan perancangan pesan maka dilakukanlah perancangan terhadap aliran dari menu-menu yang ada di program
akan digambarkan dalam sebuah jaringan semantik. Jaringan semantik yang akan dijelaskan pada gambar terdiri dari jaringan
semantik administrator, jaringan semantik operator, jaringan semantik member dan jaringan semantik pengunjung.
1. Jaringan Semantik Administrator
Gambar III.103 di bawah ini merupakan jaringan semantik administrator.
A09 A11
A08 A04
A07 A01
A02
A03 A13
A10 A12
M01, M02, M03, M04, M05 M01, M04, M05
M06, M02, M03
Gambar III.103 Jaringan Semantik Administrator
2. Jaringan Semantik Operator
Gambar III.104 di bawah ini merupakan jaringan semantik operator.
PR07 PR06
PR01 PR12
PR11 PR09
PR02 PR13
PR37 PR10
PR36
PR03 PR15
PR16 PR17
PR14 PR18
PR38
PR04 PR05
PR26
PR28 PR27
PR22 PR23
PR20
PR25 PR24
PR21 PR19
PR08 PR31
PR35 PR34
PR33 PR32
PR41 PR40
M16 M17
M18 M19
M20, M21, M23, M24, M25, M26, M27, M28
M20
M20
M20 M21
M23 M24
M25 M26
M27 M28
M24 M25
M26 M27
M29
M24 M25
M26 M27
M29 M20
M21 M23
M24 M25
M26 M27
M28 M30
M31 M31
M32 M33
M34
M31 M32
M33 M35
M31 M32
M33 M35
Gambar III.104 Jaringan Semantik Operator
3. Jaringan Semantik Member
Gambar III.105 di bawah ini merupakan jaringan semantik member.
M01 M12
M04 M2
M03
M07 M05
M06 M15
M13 M08
M14 M09
M091 M092
M10 M11
M12
M06, M02, M03 M07, M08, M09, M10
M04, M07, M08, M09, M10, M11
M12, M13, M14, M15
Gambar III.105 Jaringan Semantik Member
4. Jaringan Semantik Pengunjung
Gambar III.106 di bawah ini merupakan jaringan semantik pengunjung.
PN01 PN02
PN05
PN08 PN11
PN03
PN04
PN06
PN07 PN12
PN13
PN10
PN09 PN17
PN16
PN15
PN14 M01, M02, M03, M04, M07, M08
M09, M10, M11
Gambar III.106 Jaringan Semantik Pengunjung
III.2.4 Perancangan Prosedural
Sebagai langkah terakhir dalam perancangan yaitu perancangan prosedural yang akan di implementasikan ke dalam sistem. Prosedur ini akan digunakan
sebagai algoritma dasar dalam mengkodekan prosedur yang ada. Adapun perancangan prosedural untuk pembangunan sistem e-commerce pada toko Istana
Kulit Sukaregang yang akan dibangun adalah sebagai berikut : 1.
Prosedur Login Untuk lebih jelasnya tentang prosedur login dapat dilihat pada gambar
III.107.
Mulai
Masukkan E- mail dan
Password
Cek E-mail dan Password
kosong Tidak
Masuk Menu pelanggan
Selesai Tampilkan
Pesan email dan password
dibutuhkan Ya
Valid Cek Email dan
Password Tampilkan pesan
ERROR : Email atau password
salah Invalid
Gambar III.107 Prosedur Login
2. Prosedur Daftar Member
Untuk lebih jelasnya tentang prosedur daftar member dapat dilihat pada gambar III.108.
Start
Input data daftar
member
Pengecekan Data Kosong
Data Kosong
Finish Tidak
Data terisi Tampil pesan
Data dibutuhkan
Ya
Cek Validasi data
Simpan Data Tampil pesan
Data Salah
Tampil Pesan Terima kasih Anda telah berhasil registrasi
silahkan cek email untuk melakukan aktifasi
Benar Salah
Registrasi Berhasil
Gambar III.108 Prosedur Daftar Member
3. Prosedur Input Data Login
Untuk lebih jelasnya tentang prosedur input data login dapat dilihat pada gambar III.109.
Mulai
Masukkan E- mail dan
Password
Cek E-mail dan Password
kosong Tidak
Masuk Menu pelanggan
Selesai Tampilkan
Pesan email dan password
dibutuhkan Ya
Valid Cek Email dan
Password Tampilkan pesan
ERROR : Email atau password salah
Invalid
Gambar III.109 Prosedur Input Data Login
4. Prosedur Ganti Password
Untuk lebih jelasnya tentang prosedur ganti password dapat dilihat pada gambar III.110.
Mulai
Input data password
Baru
Password Baru
Cek password baru?
Selesai valid
Ubah Password
berhasil Tampil pesan
data salah
invalid
Gambar III.110 Prosedur Ganti Password
5. Prosedur Ubah Data Member
Untuk lebih jelasnya tentang prosedur ubah data member dapat dilihat pada gambar III.111.
Mulai
Input data member
yang akan di ubah
Data profil Member
Cek kelengkapan
data profil?
Selesai Data Profil
member berhasil diubah
Data gagal disimpan
Tidak Valid
Gambar III.111 Prosedur Ubah Data Member
6. Prosedur Ubah Data Petugas
Untuk lebih jelasnya tentang prosedur ubah data petugas dapat dilihat pada gambar III.112.
Mulai
Input data petugas
yang akan di ubah
Data Profil Petugas
Cek kelengkapan
data profil?
Selesai Valid
Data profil Petugas
berhasil
diubah Data gagal
disimpan
Tidak
Gambar III.232 Prosedur Ubah Data Petugas
7. Prosedur Pembelian
Untuk lebih jelasnya tentang prosedur pembelian dapat dilihat pada gambar III.113.
Mulai
Pilih kategori Cek email dan
password? Valid
Pilih produk untuk pembelian
Checkout login
Login berhasil
Bayar
Selesai Tampilkan Pesan
ERROR : Email atau password
salah
Invalid
Gambar III.113 Prosedur Pembelian
8. Prosedur Tambah Data Barang
Untuk lebih jelasnya tentang prosedur tambah data barang dapat dilihat pada gambar III.114.
Mulai
Input data barang
yang akan ditambah
Tambah data Barang
Data Kosong
Selesai Tidak
Tampil Pesan Data
dibutuhkan
Ya
Penambahan tersimpan
Data Barang berhasil
ditambah Tambah
barang berhasil
Gambar III.114 Prosedur Tambah Data Barang
9. Prosedur Ubah Data Barang
Untuk lebih jelasnya tentang prosedur ubah data barang dapat dilihat pada gambar III.115.
Mulai
Input data barang
yang akan diubah
Data Barang
Data Kosong
Selesai Tidak
Tampil Pesan Data tidak
Boleh Kosong
Ya
Perubahan tersimpan
Data Barang berhasil
diubah Ubah data
barang berhasil
Gambar III.115 Prosedur Ubah Data Barang
10. Prosedur Ubah Data Kategori Untuk lebih jelasnya tentang prosedur ubah data kategori dapat dilihat pada
gambar III.116.
Mulai
Input data kategori
yang akan diubah
Data Kategori
Data Kosong
Selesai Tidak
Tampil Pesan Data tidak
Boleh Kosong
Ya
Perubahan tersimpan
Data kategori berhasil
diubah Ubah data
kategori berhasil
Gambar III.116 Prosedur Ubah Data kategori
11. Prosedur Tambah Data Kategori Untuk lebih jelasnya tentang prosedur tambah data kategori dapat dilihat
pada gambar III.117.
Mulai
Input data kategori
yang akan ditambah
Data Kategori
Data Kosong
Selesai Tidak
Tampil Pesan Data
dibutuhkan
Ya
Penambahan tersimpan
Data kategori berhasil
ditambah Tambah
kategori berhasil
Gambar III.117 Prosedur Tambah Data Kategori
12. Prosedur Tambah Ongkos Kirim Untuk lebih jelasnya tentang prosedur tambah ongkos kirim dapat dilihat
pada gambar III.118.
Mulai
Input data Ongkos kirim
yang akan ditambah
Data Ongkos Kirim
Data Kosong
Selesai Tidak
Tampil Pesan Data
Dibutuhkan
Ya
Penambahan tersimpan
Data ongkos krirm berhasil
ditambah Tambah
ongkos kirim berhasil
Gambar III.118 Prosedur Tambah Ongkos Kirim
13. Prosedur Ubah Ongkos Kirim Untuk lebih jelasnya tentang prosedur ubah ongkos kirim dapat dilihat pada
gambar III.119.
Mulai
Input data Ongkos
kirim yang akan diubah
Data Ongkos Kirim
Data Kosong
Selesai Tidak
Tampil Pesan Data
Dibutuhkan
Ya
Perubahan tersimpan
Data ongkos kirim berhasil
diubah Ubah data
ongkos kirim
berhasil
Gambar III.119 Prosedur Ubah Ongkos Kirim
14. Prosedur Pesanan Barang Untuk lebih jelasnya tentang prosedur pesanan barang dapat dilihat pada
gambar III.120.
Start member pesan
barang
Cek stok barang Tersedia
tidak Konfirmasi
pengiriman Konfirmasi
pesanan Simpan pesanan
Cek lama pesanan Sudah lebih
dari 3 hari Konfirmasi
pembayaran Pembatalan
pesanan lunas
Cek status barang Status barang
menunggu ya
tidak ya
tidak ya
pengiriman
Pengiriman barang ya
tidak
selesai tidak
Konfirmasi pengiriman
Barang pesanan diterima member
Finish
ya Simpan pesanan
di keranjang belanja
Gambar III.120 Prosedur Pesanan Barang
186
BAB IV
IMPLEMENTASI DAN PENGUJIAN SISTEM
IV.1. Implementasi Sistem
