BAB III

ANALISA DAN PERANCANGAN SISTEM

2.1 Latar Belakang Toko

Toko Tiga Nada merupakan sebuah toko yang bergerak dibidang usaha

penjualan alat-alat musik. Toko Tiga Nada berkantor pusat di Surabaya,

sedangkan yang dijadikan tempat penelitian penulis merupakan cabang dari Toko

Tiga Nada yang berada di Ruko Jalan Panglima Sudirman Kav.20 Lamongan,

dengan no.telp (0322) 316 393.

Produk-produk yang dijual sebagian besar adalah alat musik seperti gitar

dan bass. Di toko ini juga menyediakan accesories alat musik seperti senar gitar,

sabuk gitar, stand keyboard, tas acoustic, dan lain-lain. Produk paket seperti Drum

Band juga tersedia di toko ini. Toko Tiga Nada merupakan toko yang memulai

aktivitas bisnisnya pada tahun 2004. Toko ini berusaha untuk meningkatkan

penjualannya. Tetapi yang menjadi kendala saat ini yaitu sistem penjualan dan

pemasarannya masih dilakukan secara manual atau dilakukan transaksi penjualan

dengan cara bertemu dan bertatapan langsung antara user dan pihak penjual.

2.2 Tahap Project Planning & Tahap Analisa

Menguraikan tentang analisis kebutuhan terhadap permasalahan terhadap

kasus yang sedang diteliti.

2.2.1 Analisis Kebutuhan Sistem

Tujuan dari analisis kebutuhan sistem adalah memahami kebutuhan

dari sistem baru dan mengembangkan sebuah sistem yang mewadahi

kebutuhan tersebut.

Analisis kebutuhan sistem digolongkan menjadi dua, yaitu

kebutuhan fungsional (functional requirement) dan kebutuhan

nonfungsional (nonfunctional requirement).

25

26

a. Kebutuhan Fungsional

Kebutuhan fungsional merupakan jenis kebutuhan yang berisi proses-

proses apa saja yang nantinya dilakukan oleh sistem dan juga berisi

informasi apa saja yang harus ada dan dihasilkan oleh sistem. Dilihat

dari sisi penggunaan sistem, kebutuhan ini dibagi menjadi 2 yaitu :

1. Kebutuhan situs berbasis web

Kategori produk, berisi daftar produk apa saja yang dijual.

Didalam terdapat penelusuran berdasarkan kategori tertentu.

Pendaftaran untuk mendapatkan pelanggan secara gratis,

selanjutnya user dapat login dan user dapat berbelanja di

sistem.

Login, merupakan cara masuk ke dalam sistem.

Pemesanan barang, dilakukan oleh user yang telah login,

memilih barang, barang yang telah dipilih kemudian masuk ke

keranjang belanja, checkout, selanjutnya memilih jasa

pengiriman, pilih pembayaran, kemudian user mendapatkan

total harga, order dan mendapatkan token. Disini token

menggunakan 3 digit dari gabungan beberapa karakter.

2. Kebutuhan modul administrasi berbasis web

Login, merupakan cara masuk ke sistem.

Pengolahan sistem, merupakan pengolahan berbagai sistem,

data yang diolah yaitu data customers, kategori produk, produk

apa saja yang dijual, cara order, payment, shipping, testimoni,

tarif JNE, Auxpage, dan data Banner.

b. Kebutuhan Nonfungsional

Kebutuhan nonfungsional adalah kebutuhan yang berisi kelengkapan

yang dimiliki oleh sistem.

2.2.2 Kebutuhan Perangkat Keras

Komputer terdiri perangkat keras dan perangkat lunak. Perangkat

lunak memberikan instruksi-instruksi kepada perangkat keras untuk

melakukan suatu tugas tertentu.

27

Perangkat keras komputer yang digunakan adalah

perangkat keras yang dapat mendukung perangkat lunak

yang memiliki kemampuan atau tampilan grafis yang

cukup baik. Perangkat keras yang digunakan pada

pembuatan program aplikasi e-commerce sebagai media

penjualan dengan sistem online adalah :

Acer Aspire 4736Z

Intel Pentium processor T4300 (2,1 GHz, 800 MHz FSB)

Intel GMA 4500M

14.0” HD LED LCD

1 GB Memory

250 GB HDD

Modem

Printer : Epson Stylus TX121x

2.2.3 Kebutuhan Perangkat Lunak

Pada tahap pembangunan dan implementasi aplikasi e-commerce

sebagai media penjualan dengan sistem online ini, dibutuhkan beberapa

perangkat lunak pendukung, diantaranya :

2.2.3.1 Sistem Operasi

Sistem Operasi yang digunakan dalam pembuatan aplikasi ini

adalah Windows 7. Windows 7  adalah rilis terkini Microsoft

Windows yang menggantikan Windows Vista. Windows 7 lebih fokus

pada pengembangan dasar Windows, dengan tujuan agar lebih kompatibel

dengan aplikasi-aplikasi dan perangkat keras komputer yang kompatibel

dengan Windows Vista.

2.2.3.2 Web Server

Web server adalah komputer yang digunakan untuk menyimpan

dokumendokumen web, komputer ini akan melayani permintaan dokumen

web dari kliennya (Purbo, 2006). Browser web seperti explorer atau navigator

berkomunikasi melalui jaringan (termasuk jaringan internet) dengan web

server, menggunakan HTTP. Browser akan mengirimkan request kepada

28

server untuk meminta dokumen tertentu atau layanan lain yang disediakan

oleh server. Server memberikan dokumen atau layanan jika tersedia juga

dengan menggunakan protocol HTTP (Purbo, 2006).

2.2.3.3 Web Browser

Web browser adalah suatu program yang dirancang untuk

mengambil informasi dari suatu server komputer pada jaringan internet.

Informasi-informasi ini dikemas dalam page-page, dimana page-page bisa

memiliki beberapa link yang menghubungkan web page tersebut kesumber

informasi lainnya (Sampurna, 1998).

Web browser dapat ditinjau dari sisi hardware dan software. Dari

sisi hardware web browser mesin perangkat keras komputer yang terdiri

dari CPU, monitor, keyboard, harddisk, dan lain-lain. Sedangkan dari sisi

software web browser merupakan program yang digunakan seiring dengan

berkembangnya teknologi, perkembangan web browser yang ada

perbandingannya selalu maju dengan semakin bertambahnya fasilitas dari

waktu kewaktu.

2.2.3.4 HTML

HyperText Mark up Language merupakan suatu metode untuk

mengimplementasikan konsep hypertext dalam suatu naskah atau

dokumen. HTML sendiri bukan tergolong pada suatu bahasa pemrograman

karena sifatnya yang hanya memberikan tanda (marking up) pada suatu

naskah teks dan bukan sebagai program. (Roy Larry, 2012)

2.2.3.5 Macromedia Dreamweaver 8

Macromedia Dreamweaver adalah sebuah editor HTML

profesional untuk mendesain secara visual dan mengelola situs web

maupun halaman web. Macromedia Dreamweaver 8 adalah salah satu

produk dari vendor Macromedia Inc.

Dreamweaver 8 memiliki kemampuan untuk menyunting kode

dengan lebih baik, serta mampu menggabungkan layout site dengan

programming webnya. Kehebatan Dreamweaver ini menjadikan lebih

banyak digunakan oleh Web Desainer maupun Web Programmer guna

29

mengembangkan situs web. Ruang kerja, fasilitas dan kemampuan

Dreamweaver mampu meningkatkan produktivitas dan efektivitas dalam

desain maupun membangun situs web.

2.2.3.6 XAMPP 1.7.7

XAMPP merupakan tool yang menyediakan paket perangkat lunak

ke dalam satu buah paket. Dengan menginstall XAMPP maka tidak perlu

lagi melakukan instalasi dan konfigurasi web server Apache, PHP dan

MySQL secara manual. XAMPP akan menginstalasi dan

mengkonfigurasikannya secara otomatis untuk anda atau auto konfigurasi.

Versi XAMPP yang ada saat ini adalah Versi 1.7.7

2.2.3.7 PHP

PHP merupakan bahasa pemrograman skrip yang diletakkan dalam

server yang biasa digunakan untuk membuat aplikasi Web yang bersifat

dinamis. PHP mendukung berbagai database. Termasuk yang didukungnya

adalah MySQL. Dengan demikian, database yang Anda buat dengan

MySQL dapat diakses oleh PHP dan memungkinkan untuk menampilkan

isinya atau bahkan memanipulasi datanya melalui halaman Web. (Abdul

Kadir, 2008)

2.2.3.8 MySQL

MySQL (baca: mai-se-kyu-el) merupakan software yang tergolong

sebagai DBMS (Database Management System) yang bersifat Open

Source. Open Source menyatakan bahwa software ini dilengkapi dengan

source code (kode yang dipakai untuk membuat MySQL), selain tentu saja

bentuk executable-nya atau kode yang dapat dijalankan secara langsung

dalam sistem operasi, dan bisa diperoleh dengan cara mendownload

(mengunduh) di Internet secara gratis. (Abdul Kadir, 2008)

2.2.3.9 Mozilla Firefox

Mozilla Firefox adalah sebuah aplikasi untuk browsing yang sangat

populer, dibuat oleh mozilla corporation, firefox adalah salah satu web

browser open source yang dibangun dengan Gecko layout engine. Tak

hanya handal firefox juga didukung oleh sejumlah Add-ons yang dapat

30

diinstall terpisah yang memungkinkan pengguna melakukan sesuai dengan

kegunaan Add-ons tersebut.

2.2.4 Kebutuhan Informasi

Kebutuhan informasi yang dibutuhkan Toko Tiga Nada antara lain

sebagai berikut :

1. Informasi customers dan supplier

2. Informasi kategori produk, produk, cara order, payment, shipping dan

tarif JNE.

3. Informasi pengeluaran dan pendapatan.

2.2.5 Kebutuhan Pengguna (user)

Pengguna komputer (user) di Toko Tiga Nada sebagai berikut :

Jumlah Admin dan Operator : 1 orang

Nama : Andik Biantoro

Bagian : Karyawan

Lama menggunakan komputer : 12 tahun

Sistem Operasi yang digunakan : Windows

2.2.6 Analisis Kelayakan Sistem

Analisis kelayakan sistem akan memberikan tekanan-tekanan

secara garis besar dalam menyusun suatu sistem baru untuk mencapai

sasaran yang sesuai dengan kebutuhan dan kondisi perusahaan, agar sistem

yang nantinya dibuat akan sesuai dan dapat dikembangkan dengan mudah

kedepannya.

2.2.7 Kelayakan Teknologi

Dalam pembuatan e-commerce ini perlu adanya sebuah analisis

tentang kelayakan baik pada teknologi untuk hardware maupun software.

2.1 Tahap Desain (Perancangan Sistem)

Setelah tahap analisis sistem selesai dilakukan, maka analis sistem telah

mendapatkan gambaran dengan jelas apa yang harus dikerjakan. Tiba waktunya

31

sekarang bagi analis sistem untuk memikirkan bagaimana membentuk sistem

tersebut. Tahap ini disebut dengan perancangan sistem.

Tahap Desain (Perancangan Sistem) mempunyai 2 tujuan utama, yaitu :

1. Untuk memenuhi kebutuhan kepada pemakai sistem

2. Untuk memberikan gambaran yang jelas dan rancang bangun yang

lengkap kepada pemrogram komputer dan ahli-ahli teknik yang

terlibat (lebih condong pada desain sistem yang terinci)

2.1.1 Perancangan Proses

Tujuan dari perancangan proses adalah untuk menjaga agar proses

data lancar dan teratur sehingga menghasilkan informasi yang benar dan

untuk mengawasi proses dari sistem

Perancangan proses ini bisa digambarkan dengan :

2.2.7.1 Diagram Konteks

Gambar 3.1 Diagram Konteks

Keterangan :

1. Admin melakukan login kemudian memperoleh validasi, admin juga

dapat melakukan pengolahan data, berupa data pengurus, data

customer dan data product.

2. Admin dapat melihat informasi data pengurus, customer dan prduct.

3. Admin dapat mengelolah stok barang, admin dapat melihat informasi

stok barang.

4. Admin memberi kode token order konsumen.

5. Admin mendapatkan data pesanan dari konsumen. Setelah konsumen

melakukan konfirmasi pembayaran selanjutnya admin mengubah

status pesanan.

32

6. Konsumen melakukan pendaftaran sebagai member agar dapat masuk

kedalam sistem.

7. Konsumen dapat melakukan login dan mendapat validasi login sukses.

8. Konsumen dapat melihat informasi data product, selanjutnya

melakukan pemesanan barang dan akan mendapatkan kode token

order konsumen.

9. Konsumen melakukan konfirmasi pembayaran setelah itu konsumen

mendapatkan konfirmasi pembayaran oleh pihak admin.

10. Dari seluruh informasi dan beberapa proses transaksi maka diperoleh

laporan-laporan yang meliputi laporan stok barang, laporan penjualan

dan laporan laba rugi yang akan disetorkan kepemilik toko.

2.2.7.2 DFD Level 0

Gambar 3.2 DFD Level 0

Keterangan :

1. Admin melakukan login untuk mendapatkan validasi login.

2. Admin dapat mengelolah data, data yang diolah meliputi data

pengurus, data customer, data category, data product, data supplier,

data testimoni, dan data tarif JNE. Disini admin juga mendapatkan

informasi data yang ada diproses pengolahan data.

33

3. Konsumen melakukan login untuk bisa masuk ke sistem kemudian

mendapatkan validasi login dari proses login.

4. Konsumen memasukkan data customer kedalam proses pengolahan

data kemudian konsumen melakukan transaksi penjualan. Dimana

konsumen melihat informasi data product, dapat melakukan

pemesanan barang.

5. Admin mendapatkan data order, data payment, dan data shipping dari

proses transaksi.

6. Setelah transaksi selesai konsumen memperoleh kode token dari

admin setelah proses transaksi.

7. Pada saat konsumen melakukan konformasi pembayaran, secara

otomatis status di order akan berubah menjadi konfirmasi

(sebelumnya pending). Admin kemudian melakukan pengecekan,

apakah benar ada uang masuk di bank. kalo benar ada, admin

melakukan pengiriman barang, jika barang telah dikirim, admin harus

mengubah status order tersebut menjadi send. Saat diubah menjadi

send, otomatis stok barang akan dikurangi sesuai dengan jumlah

barang yang dikirim.

8. Admin mendapatkan informasi stok barang kemudian melakukan

pengolahan stok barang dan admin dapat mengubah status pesanan.

9. Setelah proses selesai admin membuat laporan. Laporan itu berupa

laporan stok barang, laporan penjualan dan laporan laba rugi yang

diperoleh dari data product dan data order.

2.2.7.3 DFD Level 1 Proses Login

Gambar 3.3 DFD Level 1 Proses Login

34

Keterangan :

1. Admin melakukan login untuk bisa masuk ke sistem.

2. Admin mendapatkan validasi login apabila berhasil masuk ke sistem.

3. Data admin akan disimpan di tabel pengurus.

4. Konsumen harus registrasi sebagai member baru terlebih dahulu untuk

bisa login dan masuk ke dalam sistem.

5. Data konsumen akan disimpan di tabel customer. Setelah itu dari data

customer konsumen mendapatkan konfirmasi data customer. Data

customer dapat dilihat dan diolah oleh admin.

6. Setelah berhasil registrasi maka konsumen bisa untuk melakukan

login.

2.2.7.4 DFD Level 1 Proses Pengolahan Data

Gambar 3.4 DFD Level 1 Proses Pengolahan Data

35

Keterangan :

1. Admin mengupdate data pengurus kedalam proses pengolahan data

pengurus yang kemudian di simpan pada tabel pengurus.

2. Konsumen memasukkan data customer di pengolahan data customer

dan data customer akan disimpan di tabel customer. Data customer

diupdate oleh admin, diupdate oleh admin disini admin hanya bisa

melihat dan menghapus data customer saja. Admin tidak bisa

menambah data customer.

3. Admin melakukan pengolahan data category yang kemudian datanya

disimpan di tabel category. Disini admin bisa menambah, mengedit

dan menghapus kategori.

4. Admin melakukan pengolahan data product yang kemudian datanya

disimpan di tabel product. Disini admin juga bisa menambah product

baru, mengedit dan menghapus data product.

5. Admin melakukan pengolahan data supplier yang kemudian datanya

disimpan di tabel supplier. Disini admin bisa menambah supplier,

mengedit dan menghapus supplier.

6. Admin melakukan pengolahan data testimoni yang kemudian datanya

disimpan di tabel testimoni. Disini admin bisa mengedit testimoni dan

menghapus testimoni. Pada edit data testimoni admin bisa

mengupdate status testimoni menjadi ditampilkan atau tidak

ditampilkan pada halaman testimoni nantinya.

7. Admin melakukan pengolahan data tarif JNE yang kemudian datanya

disimpan di tabel jne. Disini admin bisa menambah tarif JNE,

mengedit dan menghapus tarif JNE.

36

2.2.7.5 DFD Level 1 Proses Transaksi

Gambar 3.5 DFD Level 1 Proses Transaksi

Keterangan :

1. Konsumen melihat barang yang ditampilkan oleh sistem.

2. Ketika konsumen menginginkan untuk melakukan transaksi,

konsumen terlebih dahulu harus registrasi. Pada form registrasi

member baru konsumen harus mengisi semua form yang disediakan.

3. Setelah konsumen menjadi member baru konsumen bisa memilih

barang yang diinginkan kemudian dimasukkan di kerangjang belanja.

Disini konsumen bisa menambah jumlah dan mengurangi jumlah

barang yang akan dibeli.

37

4. Konsumen melakukan proses pemesanan. Data pemesanan disimpan

pada tabel pesan.

5. Selanjutnya konsumen bisa memilih jasa pengiriman dan jasa

pembayaran.

6. Setelah proses selesai admin akan memberi kode token order kepada

konsumen.

7. Konsumen melakukan konfirmasi pembayaran. Pada saat konsumen

melakukan konformasi pembayaran, secara otomatis status di order

akan berubah menjadi konfirmasi (sebelumnya pending). Admin

kemudian melakukan pengecekan, apakah benar ada uang masuk di

bank. kalo benar ada, admin melakukan pengiriman barang, jika

barang telah dikirim, admin harus mengubah status order tersebut

menjadi send. Saat diubah menjadi send, otomatis stok barang akan

dikurangi sesuai dengan jumlah barang yang dikirim.

2.2.7.6 DFD Level 1 Proses Pengolahan Stok Barang

Gambar 3.6 DFD Level 1 Proses Pengolahan Stok Barang

Keterangan :

1. Admin melakukan cek barang untuk melihat apa saja barang yang

sudah dibeli.

2. Setelah semua proses transaksi sudah lengkap, maka admin akan

merubah status pemesanan, dari status pemesan baru menjadi dikirim

atau telah lunas.

3. Apabila stok barang telah habis admin dapat mengelolah stok barang

ke dalam tabel product.

38

2.2.7.7 DFD Level 1 Proses Pembuatan Laporan

Gambar 3.7 DFD Level 1 Proses Pembuatan laporan

Keterangan :

Dari data yang diperoleh pada tabel product dan data order nantinya akan

diproses menjadi laporan stok barang, laporan penjualan dan laporan laba

rugi yang kemudian disetorkan kepada pemilik toko.

2.2.7.8 System Flowchart

a. Flowchart System Administrator

Gambar 3.8 Flowchart System Administrator

Keterangan :

1. Admin melalukan login terlebih dahulu.

39

2. Jika proses login berhasil maka alur dilanjutkan ke halaman

admin, proses error alur akan kembali ke proses login.

3. Pada halaman admin, admin bisa mengolah data, jika ingin

mengolah data maka admin melakukan pengolahan data. Data

yang diolah meliputi data pengurus, data customer, data

category, data product, data supplier, data testimoni, dan data

tarif JNE.

4. Sedangkan jika tidak untuk mengolah data maka admin bisa

melanjutkan untuk mengolah stok barang.

5. Jika ingin mengolah stok barang maka admin melanjutkan

untuk cek barang, mengupdate status pemesanan dan update

barang. Setelah proses selesai, admin bisa untuk logout.

6. Pada proses pengecekan, disini admin melakukan pengecekan,

apakah benar ada uang masuk di bank. kalo benar ada, admin

melakukan pengiriman barang, jika barang telah dikirim,

admin harus mengubah status order tersebut menjadi send.

Saat diubah menjadi send, otomatis stok barang akan dikurangi

sesuai dengan jumlah barang yang dikirim. Setelah proses

pengecekan maka admin memberikan kode token order untuk

konsumen.

7. Pada pengolahan stok barang jika tidak ingin untuk

melanjutkan ke proses selanjutnya maka alur akan ke logout.

8. Untuk mengakhiri proses, admin bisa lagsung logout.

Sedangkan jika tidak ingin logout maka alur akan

dikembalikan ke halaman admin.

40

b. Flowchart System User

Gambar 3.9 Flowchart System User

Keterangan :

1. Pada halaman home, user bisa melihat kategori barang, jika user ingin

melakukan transaksi pembelian, user harus registrasi member terlebih

dahulu agar dapat melakukan proses selanjutnya untuk membeli

barang yang diinginkan.

2. Jika belum melakukan registrasi maka user tidak bisa melakukan

transaksi dan user hanya bisa melihat barang saja.

3. Apabila sudah melakukan registrasi dan berhasil maka user dapat

memilih katagori barang, melanjutkan memilih barang, barang yang

sudah dipilih akan dimasukkan di keranjang belanja selanjutnya bisa

memilih jasa pengiriman, jasa pembayaran dan bisa langsung order.

4. Setelah proses selesai maka pesan akan disimpan.kemudian user

mendapatkan kode token order konsumen.

5. User melakukan konfirmasi pembayaran. Pada saat konsumen

melakukan konformasi pembayaran, secara otomatis status di order

41

akan berubah menjadi konfirmasi (sebelumnya pending). Admin

kemudian melakukan pengecekan, apakah benar ada uang masuk di

bank. kalo benar ada, admin melakukan pengiriman barang, jika

barang telah dikirim, admin harus mengubah status order tersebut

menjadi send. Saat diubah menjadi send, otomatis stok barang akan

dikurangi sesuai dengan jumlah barang yang dikirim.

6. Uaer bisa melanjutkan untuk belanja lagi atau tidak, jika ingin belanja

lagi maka alur akan kembali ke lihat kategori barang dan proses akan

kembali seperti awal sedangkan jika tidak belanja lagi maka user bisa

logout.

7. Dalam proses logout user dihadapkan dengan keputusan iya atau tidak

untuk logout. Jika iya maka proses selesai, apabila tidak maka alur

akan kembali ke halaman home.

8. Pada keputusan pilih kategori barang jika user tidak ingin melanjutkan

untuk memilih barang maka user bisa melanjutkan untuk melihat

pemesanan dan bisa logout atau tidak.

9. Pada keputusan pilih barang jika user tidak ingin melanjutkan untuk

order sekarang, maka user bisa untuk melihat pemesanan.dan bisa

logout atau tidak.

10. Pada keputusan order sekarang jika user tidak ingin melanjutkan

untuk proses penyimpanan, maka user bisa untuk melihat

pemesanan.dan bisa logout atau tidak.

11. Pada keputusan lihat pemesanan jika user tidak ingin melanjutkan

untuk cek barang, maka user bisa logout atau tidak. Sedangkan jika

user ingin melanjutkan maka user bisa melihat total pesanan dan harga

dan bisa dilanjutkan untuk belanja lagi atau tidak.

2.1.2 Perancangan Basis Data

Pada tahap ini dilakukan transformasi dari data manual ke dalam

bentuk basis data yang terbagi dalam beberapa tabel, didalamnya terdapat

bagian yang dinamakan field.

42

3.3.2.1 CDM (Conceptual Data Model)

Model yang dibuat berdasarkan anggapan bahwa dunia nyata terdiri

dari koleksi obyek-obyek dasar yang dinamakan entitas (entity) serta

hubungan (relationship) antara entitas-entitas itu.

Biasanya direpresentasikan dalam bentuk Entity Relationship

Diagram.

Manfaat Penggunaan CDM dalam perancangan database :

Memberikan gambaran yang lengkap dari struktur basis data yaitu arti,

hubungan, dan batasan-batasan

Alat komunikasi antar pemakai basis data, designer, dan analis.

Gambar 3.10 CDM (Conceptual Data Model)

3.3.2.2 PDM (Phsical Data Model)

Merupakan model yang menggunakan sejumlah tabel untuk

menggambarkan data serta hubungan antara data-data tersebut. Setiap

tabel mempunyai sejumlah kolom di mana setiap kolom memiliki nama

yang unik.

memilih

mempunyai

memesan

memasukkan

baner

simpan

mengelolah

membuat

terdapat

mengisi

mengupdate

mengedit

melihatconfig

menggunakan

punya

masuk

kirim

bayar

melakukan

dapat

olah

product

productIDnamadeskripsifotokeyworddescriptiontitleslugkategoritanggaljamharihargaproduct_codestokspesifikasistatuskondisihpp

<pi> IntegerVariable characters (255)TextVariable characters (150)Variable characters (255)Variable characters (255)Variable characters (225)Variable characters (255)IntegerVariable characters (20)Variable characters (10)Variable characters (10)IntegerVariable characters (15)IntegerTextVariable characters (20)Variable characters (20)Integer

category

id_categorycategoryparentpicslug...

<pi> IntegerVariable characters (30)Variable characters (20)Variable characters (100)Variable characters (255)

shipping

shippingIDshipping_method...

<pi> IntegerVariable characters (10)

payment

paymentIDbankrekening

<pi> IntegerVariable characters (10)Variable characters (20)

customer

customerIDnamaalamatkelurahankecamatankabupatenpropinsiemailhppasswordaktivasi...

<pi> IntegerVariable characters (255)Variable characters (100)Variable characters (50)Variable characters (50)Variable characters (50)Variable characters (50)Variable characters (100)Variable characters (100)Characters (255)Integer

pesan

orderIDharitanggaljamtotalstatustoken...

<pi> IntegerVariable characters (10)Variable characters (20)Variable characters (10)IntegerVariable characters (20)Variable characters (10)

keranjang belanja

itemIDiptanggalhargajumlah...

<pi> IntegerVariable characters (25)Variable characters (20)IntegerInteger

bayar

confirmationIDno_nota...

<pi> IntegerVariable characters (50)

auxpage

auxpageIDjudulisi...

<pi> IntegerVariable characters (30)Text

baner

kode_banerjudulgambarstatuslinkketeranganposisiurut...

<pi> IntegerVariable characters (30)Variable characters (100)Variable characters (20)Variable characters (255)Variable characters (255)Variable characters (20)Integer

pengurus

kode_urususernamepasswordlevelakses...

<pi> IntegerCharacters (20)Characters (255)IntegerVariable characters (30)

testimoni

testimoniIDnamaemailkotatestimonistatustanggalharijam...

<pi> IntegerVariable characters (255)Variable characters (100)Variable characters (50)TextVariable characters (20)Variable characters (20)Variable characters (10)Variable characters (10)

menu

id_menuurutmenufileparent...

<pi> IntegerIntegerVariable characters (30)Variable characters (50)Variable characters (20)

jne

jneIDkotapaketbiaya...

<pi> IntegerVariable characters (50)Variable characters (20)Integer

konfigurasi

id_konfigurasititlevalueid...

<pi> IntegerVariable characters (225)Variable characters (255)Variable characters (50)

supplier

supplierIDnamaalamatkotapropinsiemailhp

<pi> IntegerVariable characters (255)Variable characters (100)Variable characters (50)Variable characters (50)Variable characters (100)Variable characters (100)

Identifier_1...

<pi>

43

Gambar 3.11 PDM (Phsical Data Model)

3.3.2.3 Kamus Data

Kamus data adalah tempat menyimpan informasi yang menyimpan

struktur logikal basis data.

Tabel 3.1 Tabel Kamus Data

Tipe Entitas AtributAuxpage auxpageID, judul, isi.Baner kode_baner, judul, gambar, status,

link, keterangan, posisi, urut.Bayar confirmationID, no_nota,

customerID, orderID, jumlah, tanggal.

Category id_category, category, parent, pic, slug.

Customer customerID, nama, alamat, kelurahan, kecamatan, kabupaten, propinsi, email, hp, password, aktivasi.

Jne jneID, kota, paket, biaya.Keranjangbelanja itemID, ip, tanggal, productID,

harga, jumlah, orderID.Konfigurasi id_konfigurasi, title, value, id.

product

productIDorderIDkode_urusnamadeskripsifotokeyworddescriptiontitleslugkategoritanggaljamharihargaproduct_codestokspesifikasistatuskondisihpp...

integerintegerintegervarchar(255)long varcharvarchar(150)varchar(255)varchar(255)varchar(225)varchar(255)integervarchar(20)varchar(10)varchar(10)integervarchar(15)integerlong varcharvarchar(20)varchar(20)integer

<pk><fk1><fk2>

category

id_categorycustomerIDproductIDkode_uruscategoryparentpicslug...

integerintegerintegerintegervarchar(30)varchar(20)varchar(100)varchar(255)

<pk><fk1><fk2><fk3>

shipping

shippingIDshipping_method

integervarchar(10)

<pk>payment

paymentIDbankrekening...

integervarchar(10)varchar(20)

<pk>

customer

customerIDkode_urusjneIDnamaalamatkelurahankecamatankabupatenpropinsiemailhppasswordaktivasi...

integerintegerintegervarchar(255)varchar(100)varchar(50)varchar(50)varchar(50)varchar(50)varchar(100)varchar(100)char(255)integer

<pk><fk1><fk2>

pesan

orderIDpaymentIDcustomerIDkode_urusshippingIDharitanggaljamtotalstatustoken...

integerintegerintegerintegerintegervarchar(10)varchar(20)varchar(10)integervarchar(20)varchar(10)

<pk><fk4><fk2><fk1><fk3>

keranjang belanja

itemIDproductIDorderIDiptanggalhargajumlah...

integerintegerintegervarchar(25)varchar(20)integerinteger

<pk><fk2><fk1>

bayar

confirmationIDorderIDcustomerIDno_notajumlahtanggal...

integerintegerintegervarchar(50)integervarchar(20)

<pk><fk2><fk1>

auxpage

auxpageIDjudulisi...

integervarchar(30)long varchar

<pk>

baner

kode_banerjudulgambarstatuslinkketeranganposisiurut...

integervarchar(30)varchar(100)varchar(20)varchar(255)varchar(255)varchar(20)integer

<pk>

pengurus

kode_urusauxpageIDkode_banerusernamepasswordlevelakses

integerintegerintegerchar(20)char(255)integervarchar(30)

<pk><fk2><fk1>

testimoni

testimoniIDcustomerIDkode_urusnamaemailkotatestimonistatustanggalharijam...

integerintegerintegervarchar(255)varchar(100)varchar(50)long varcharvarchar(20)varchar(20)varchar(10)varchar(10)

<pk><fk1><fk2>

menu

id_menuid_categoryurutmenufileparent

integerintegerintegervarchar(30)varchar(50)varchar(20)

<pk><fk>

jne

jneIDkotapaketbiaya...

integervarchar(50)varchar(20)integer

<pk>

konfigurasi

id_konfigurasikode_urustitlevalueid...

integerintegervarchar(225)varchar(255)varchar(50)

<pk><fk>

supplier

supplierIDkode_urusnamaalamatkotapropinsiemailhp...

integerintegervarchar(255)varchar(100)varchar(50)varchar(50)varchar(100)varchar(100)

<pk><fk>

44

Tabel 3.1 Tabel Kamus Data (lanjutan)

Menu id_menu, urut, menu, file, parent.Payment paymentID, bank, rekening.Pengurus kode_urus, username, password,

level, akses.Pesan orderID, customerID, hari, tanggal,

jam, customerIP, shippingID, paymentID, total, status, token.

Product productID, nama, deskripsi, foto, keyword, description, title, slug, kategori, tanggal, jam, hari, harga, product_kode, stok, spesifikasi, status, kondisi, hpp

Shipping shippingID, shipping_method.Supplier supplierID, nama, alamat, kota,

propinsi, email, hp.Testimoni tetimoniID, nama, email, kota,

testimoni, status, tanggal, hari, jam.

3.3.2.4 Perancangan Struktur Tabel

a. Tabel Auxpage

Primary key : auxpageID

Foreigen key : -

Tabel 3.2 Tabel Auxpage

Nama Field Tipe Data Lebar Data KeteranganauxpageID integer Nomor urut auxpage,

auto incrementjudul varchar 30 Judul auxpageisi text Isi auxpage

b. Tabel Baner

Primary key : kode_baner

Foreigen key : -

Tabel 3.3 Tabel Baner

Nama Field Tipe Data Lebar Data Keterangankode_baner integer Nomor urut baner, auto

incrementjudul varchar 30 Judul banergambar varchar 100 Gambar baner

45

Tabel 3.3 Tabel Baner (lanjutan)status varchar 20 Status banerlink varchar 255 Link banerketerangan varchar 255 Keterangan banerposisi varchar 20 Posisi banerurut integer Urutan tampil baner

c. Tabel Bayar

Primary key : confirmationID

Foreigen key : customerID, orderID

Tabel 3.4 Tabel Bayar

Nama Field Tipe Data Lebar Data KeteranganconfirmationID integer Nomor urut konfirmasi,

auto incrementorderID integer Nomor urut nama

pelanggan, auto increment

customerID integer Nomor urut nama pelanggan, auto increment

no_nota varchar 50 No nota pembayaranjumlah integer Jumlah yang harus

dibayartanggal varchar 20 Tanggal pembayaran

d. Tabel Category

Primary key : id_category

Foreigen key : customerID, productID, kode_urus

Tabel 3.5 Tabel Category

Nama Field Tipe Data Lebar Data Keteranganid_category integer Nomor urut category,

auto incrementcustomerID integer Nomor urut nama

pelanggan, auto increment

productID integer Nomor urut barang, auto increment

kode_urus integer Nomor urut pengurus, auto increment

category varchar 30 Kategory barang

46

Tabel 3.5 Tabel Category (lanjutan)

parent varchar 20 Parent categorypic varchar 100 Pic categoryslug varchar 255 Slug category

e. Tabel Customer

Primary key : customerID

Foreigen key : kode_urus, jne

Tabel 3.6 Tabel Customer

Nama Field Tipe Data Lebar Data KeterangancustomerID integer Nomor urut nama

pelanggan, auto increment

orderID integer Nomor urut nama pelanggan, auto increment

kode_urus integer Nomor urut pengurus, auto increment

confirmID integer No urut konformasi pembayaran, auto increment

nama varchar 255 Nama pelangganalamat varchar 100 Alamat pelanggankelurahan varchar 50 Kelurahan pelanggankecamatan varchar 50 Kecamatan pelanggankabupaten varchar 50 Kabupaten Pelangganpropinsi varchar 50 Propinsi pelangganemail varchar 100 Email pelanggan,

sekaligus digunakan untuk login

hp varchar 100 Nomor handphone pelanggan

password varchar 255 Password pelangganaktivasi integer Aktivasi pelanggan

47

f. Tabel JNE

Primary key : id_konfigurasi

Foreigen key : -

Tabel 3.7 Tabel JNE

Nama Field Tipe Data Lebar Data KeteranganjneID integer Nomor urut jasa

pengiriman, auto increment

Kota varchar 50 Kota yang ditujuPaket varchar 20 Paket JNEBiaya integer Biaya pengiriman

g. Tabel Keranjang Belanja

Primary key : itemID

Foreigen key : orderID, productID

Tabel 3.8 Tabel Keranjang Belanja

Nama Field Tipe Data Lebar Data KeteranganitemID integer Nomor urut item barang

yang disorder, auto increment

productID integer Nomor urut barang, auto increment

orderID integer Nomor urut nama pelanggan, auto increment

Ip varchar 25 IP keranjang belanjaTanggal Varchar 20 Tanggal pesanHarga integer Harga barang pesananJumlah integer Jumlah barang pesanan

h. Tabel konfigurasi

Primary key : id_konfigurasi

Foreigen key : kode_urus

Tabel 3.9 Tabel Konfigurasi

Nama Field Tipe Data Lebar Data Keteranganid_konfigurasi integer Nomor urut konfigurasi,

auto incrementkode_urus integer Nomor urut pengurus,

48

Tabel 3.9 Tabel Konfigurasi (lanjutan)

auto incrementTitle varchar 255 Judul konfigurasiValue varchar 255 Nilai konfigurasiId varchar 50 Id konfigurasi

i. Tabel Menu

Primary key : id_menu

Foreigen key : id_category

Tabel 3.10 Tabel Menu

Nama Field Tipe Data Lebar Data Keteranganid_menu integer 5 Nomor urut menu, auto

incrementid_category integer Nomor urut category,

auto incrementUrut integer 5 Urut menuMenu varchar 30 MenuFile varchar 50 File menuParent varchar 20 Parent menu

j. Tabel Pembayaran (Payment)

Primary key : paymentID

Foreigen key : -

Tabel 3.11 Tabel Pembayaran (Payment)

Nama Field Tipe Data Lebar Data KeteranganpaymentID integer Nomor urut nama Bank,

auto incrementBank varchar 10 Nama bankRekening varchar 20 No rekening bank

k. Tabel Pengurus

Primary key : kode_urus

Foreigen key : kode_baner, auxpageID

Tabel 3.12 Tabel Pengurus

Nama Field Tipe Data Lebar Data Keterangankode_urus integer 5 Nomor urut pengurus,

auto increment

49

Tabel 3.12 Tabel Pengurus (lanjutan)

auxpageID integer Nomor urut auxpage, auto increment

kode_baner integer Nomor urut baner, auto increment

Username char 20 Username pengurusPassword char 255 Password pengurusLevel integer Tingkatan pengurusAkses varchar 30 Akses pengurus

l. Tabel Pesan

Primary key : orderID

Foreigen key : kode_urus, customerID, shippingID, paymentID

Tabel 3.13 Tabel Pesan

Nama Field Tipe Data Lebar Data KeteranganorderID integer Nomor urut nama

pelanggan, auto increment

paymentID integer Nomor urut nama Bank, auto increment

customerID integer Nomor urut nama pelanggan, auto increment

kode_urus integer Nomor urut pengurus, auto increment

shippingID integer Nomor urut metode pengiriman barang, auto increment

hari varchar 10 Hari pelanggan order barang

tanggal varchar 20 Tanggal pelanggan order barang

jam varchar 10 Jam pelanggan order barang

total integer Total harga pesananstatus varchar 20 Status pengiriman

barang : pending, terkirim, batal

token varchar 10 Kode khusus yang diberikan pengurus kepada konsumen

50

m. Tabel Product

Primary key : productID

Foreigen key : orderID, kode_urus

Tabel 3.14 Tabel Product

Nama Field Tipe Data Lebar Data KeteranganproductID integer Nomor urut barang, auto

incrementorderID integer Nomor urut nama

pelanggan, auto increment

kode_urus integer Nomor urut pengurus, auto increment

nama varchar 255 Nama produkdeskripsi text Deskripsi barangfoto varchar 150 Foto barangkeyword varchar 255 Kata kunci untuk

mencari produkdescription varchar 255 Deskripsi produktitle varchar 255 Judul barangslug varchar 255 Slug barangkategori integer Sama dengan categoryID

pada table kategori_barang

tanggal varchar 20 Tanggal barang di entryjam varchar 10 Jam barang di entryhari varchar 10 Hari barang di entryharga integer Harga barangproduct_code varchar 15 Digit 1, huruf pertama

kategori barangDigit 2 dan 3, nomor urut kategori barangDigit 4 – 8, nomor urut barangMisalnya D0100001

stok integer Jumlah stok barangspesifikasi long

varcharSpesifikasi barang

status varchar 20 Status barang Ready ato PO

kondisi varchar 20 Kondisi baru atau bekashpp integer Harga pokok penjualan

51

n. Tabel Pengiriman (Shipping)

Primary key : shippingID

Foreigen key : -

Tabel 3.15 Tabel Pengiriman (Shipping)

Nama Field Tipe Data Lebar Data KeteranganshippingID integer Nomor urut metode

pengiriman barang, auto increment

shipping_method

varchar 10 Metode pengiriman barang

o. Tabel Supplier

Primary key : supplierID

Foreigen key : kode_urus

Tabel 3.16 Tabel Supplier

Nama Field Tipe Data Lebar Data KeterangansupplierID integer Nomor urut supplier,

auto incrementkode_urus integer Nomor urut pengurus,

auto incrementnama varchar 255 Nama supplieralamat varchar 100 Alamat supplierkota varchar 50 Kota tinggal supplierpropinsi varchar 50 Propinsi tinggal supplieremail varchar 100 Email supplierhp varchar 100 Nomer handphone

supplier

p. Tabel Testimoni

Primary key : testimoniID

Foreigen key : customerID, kode_urus

Tabel 3.17 Tabel Testimoni

Nama Field Tipe Data Lebar Data KeterangantestimoniID integer Nomor urut testimoni,

auto incrementcustomerID integer Nomor urut nama

pelanggan, auto increment

52

Tabel 3.17 Tabel Testimoni (lanjutan)

kode_urus integer Nomor urut pengurus, auto increment

nama varchar 255 Nama pengirim testimoni

email varchar 100 Email pengirim testimoni

kota varchar 50 Kota penulis testimoni

testimoni long varchar

Isi testimoni

status varchar 20 Status testimoni

tanggal varchar 20 Tanggal testimoni ditulis

hari varchar 10 Hari testimoni ditulis

jam varchar 10 Waktu testimoni ditulis

2.1.3 Perancangan Antarmuka / Interface

Satu hal lagi yang harus diperhatikan dalam pembuatan perangkat

lunak bahwa perangkat lunak ini digunakan oleh banyak sekali pengguna

dan dari beragam latar belakang.

Karena tidak semua pengguna adalah seseorang yang ahli dalam

pengoperasian komputer. Karena itu dalam perancangan antarmuka

perangkat lunak haruslah ramah pengguna (user friendly). Adapun

antarmuka pemakai perangkat lunak yang akan dirancang ditampilkan

sebagai berikut :

3.3.3.1 Perancangan Halaman User

Perancangan Halaman Menu Utama

Gambar 3.12 Perancangan Halaman Menu Utama

53

Perancangan Halaman Registrasi

Form yang sudah disediakan harus diisi dengan lengkap.

Gambar 3.13 Perancangan Halaman Registrasi

Perancangan Halaman Registrasi

Klik LINK untuk mengaktivasi member. (Lihat gambar)

Gambar 3.14 Perancangan Halaman Registrasi

Perancangan Halaman Registrasi Berikutnya

Gambar 3.15 Perancangan Halaman Registrasi Berikutnya

Perancangan Login User

Gambar 3.16 Perancangan Login User

Perancangan Halaman Member

Secara otomatis menu REGISTER akan berubah menjadi

MEMBER karena sudah teraktivasi.

54

Gambar 3.17 Perancangan Halaman Member

Perancangan Halaman Transaksi

Konsumen bisa menentukan jumlah barang yang ingin dibeli.

Gambar 3.18 Perancangan Halaman Transaksi

Perancangan Halaman Keranjang Belanja

Di halaman keranjang belanja konsumen bisa mengurangi dan

menambah barang yang ingin dibeli. Setelah itu konsumen bisa

menghitung berapa total harga yang harus dibayar. Klik

checkout untuk melanjutkan proses transaksi.

Gambar 3.19 Perancangan Halaman Keranjang Belanja

Perancangan Halaman Pengiriman

Pada halaman pengiriman disini konsumen memilih metode

pengiriman. Klik tanda panah untuk melanjutkan proses.

55

Gambar 3.20 Perancangan Halaman Pengiriman

Perancangan Halaman Pembayaran

Pada halaman pembayaran konsumen memilih cara

pembayaran. Klik tanda panah untuk melanjutkan proses.

Gambar 3.21 Perancangan Halaman Pembayaran

Perancangan Halaman Pesan Sekarang

Pada halaman pesan sekarang konsumen dilihatkan detail

order. Mulai dari Alamat Pengiriman, Data Pesanan, Metode

Pengiriman Barang dan Metode Pembayaran. Klik order now

jika ingin pesan sekarang.

Gambar 3.22 Perancangan Halaman Pesan Sekarang

Perancangan Halaman Terima Kasih

Di halaman ini konsumen mendapatkan kode token order

konsumnen dan ucapan terima kasih telah melakukan trasaksi.

56

Gambar 3.23 Perancangan Halaman Terima Kasih

Perancangan Halaman Konfirmasi Pembayaran

Untuk melakukan konfirmasi pembayaran konsumen masuk ke

halaman member terlebih dahulu kemudian akan ditampilkan

halaman member yang sudah terisi order. Pada halaman ini

konsumen mengklik link konfirmasi pembayaran (lihat gambar

3.24). Kemudian akan muncul halaman konfirmasi

pembayaran disini konsumen mengisi jumlah total pembelian

(lihat gambar 3.25). Jika salah memasukkan angka maka

konsumen tidak mendapatkan nomor nota. Sedangkan jika

berhasil akan mendapatkan nomor nota (lihat gambar 3.26).

Gambar 3.24 Perancangan Halaman Konfirmasi Pembayaran

Gambar 3.25 Perancangan Halaman Isi Jumlah Pembayaran

57

Gambar 3.26 Perancangan Halaman Saat Mendapatkan Nomor Nota

Perancangan Halaman Testimoni

Testimoni akan ditampilkan jika admin sudah mengubah status

dari tidak ditampilkan menjadi ditampilkan.

Gambar 3.27 Perancangan Halaman Testimoni

Perancangan Halaman Lihat Semua Testimoni

Semua isi testimoni akan ditampilkan dihalaman ini.

Gambar 3.28 Perancangan Halaman Lihat Semua Testimoni

Perancangan Halaman Kirim Testimoni

Konsumen bisa mengisi testimoni di halaman ini.

Gambar 3.29 Perancangan Halaman Kirim Testimoni

58

Perancangan Halaman Daftar Harga

Konsumen bisa melihat semua daftar harga di halaman daftar

harga.

Gambar 3.30 Perancangan Halaman Daftar Harga

Perancangan Halaman Cara Order

Konsumen bisa melihat cara order di halaman ini.

Gambar 3.31 Perancangan Halaman Cara Order

Perancangan Halaman Tentang Kami

Halaman tentang kami ini berguna agar konsumen bisa lebih

mengenal dan bisa lebih tahu tentang perusahaan atau toko

yang menggunakan jasa website sebagai media penjualan

secara online.

Gambar 3.32 Perancangan Halaman Tentang Kami

59

Perancangan Halaman Kontak Kami

Disini menyediakan form untuk mengirim email ke perusahaan

dan juga menyediakan link untuk menghubungi semisal twitter

dan facebook.

Gambar 3.33 Perancangan Halaman Kontak Kami

3.3.3.2 Perancangan Halaman Administrator

Perancangan Halaman Login Admin

Gambar 3.34 Perancangan Halaman Login Admin

Perancangan Halaman Konfigurasi General

Halaman ini untuk memasukkan detail perusahaan atau toko.

Gambar 3.35 Perancangan Halaman Konfigurasi General

Perancangan Halaman Konfigurasi Header

Halaman ini untuk mengedit header yang akan ditampilkan.

60

Gambar 3.36 Perancangan Halaman Konfigurasi Header

Perancangan Halaman Customers

Admin disini tidak bisa mengedit data customer. Admin hanya

bisa menghapus. Background warna biru artinya customer

belum melakukan aktivasi

Gambar 3.37 Perancangan Halaman Customers

Perancangan Halaman Kategori

Admin disini tidak bisa menambah, edit dan hapus kategori.

Gambar 3.38 Perancangan Halaman Kategori

Perancangan Halaman Produk Pada Administrator

Jika nama kategori dan nama produk sudah diisi data maka

bisa diklik untuk menambah, edit atau hapus data produk.

61

Gambar 3.39 Perancangan Halaman Produk

Perancangan Halaman Produk Selanjutnya

Pada Halaman ini bisa tampil jika salah satu nama categori

atau nama produk diklik.

Gambar 3.40 Perancangan Halaman Produk Selanjutnya

Perancangan Halaman Add New Product

Admin bisa menambahkan produk dihalaman ini.

Gambar 3.41 Perancangan Halaman Add New Product

Perancangan Halaman Order

Admin bisa melihat pesanan dan mengedit status pemesanan.

Background warna merah artinya status order pending,

background warna biru artinya status order konfirmasi

(customer sudah melakukan pembayaran.

62

Gambar 3.42 Perancangan Halaman Order

Perancangan Halaman Edit Order

Admin mengedit status pemesanan di halam ini. Status

disediakan send, pending dan konfirmasi.

Gambar 3.43 Perancangan Halaman Edit Order

Perancangan Halaman Konfirmasi Pembayaran

Admin hanya bisa melihat dan menghapus saja.

Gambar 3.44 Perancangan Halaman Konfirmasi Pembayaran

Perancangan Halaman Payment

Admin bisa mengedit, menambah, menghapus dan menyimpan

payment.

Gambar 3.45 Perancangan Halaman Payment

Perancangan Halaman Shipping

Admin bisa mengedit, menambah, menghapus dan menyimpan

shipping.

63

Gambar 3.46 Perancangan Halaman Shipping

Perancangan Halaman Supplier

Admin bisa mengedit, menambah dan menghapus data

supplier.

Gambar 3.47 Perancangan Halaman Supplier

Perancangan Halaman Tambah Supplier

Admin mengisi form yang disediakan untuk melengkapi data

supplier.

Gambar 3.48 Perancangan Halaman Tambah Supplier

Perancangan Halaman Testimoni

Admin bisa mengedit dan menghapus data.

Gambar 3.49 Perancangan Halaman Testimoni

Perancangan Halaman Edit Testimoni

Admin bisa menentukan status testimoni ditampilkan atau

tidak ditampilkan.

64

Gambar 3.50 Perancangan Halaman Edit Testimoni

Perancangan Halaman Tarif JNE

Admin bisa mengedit, menambah dan menghapus tarif JNE.

Gambar 3.51 Perancangan Halaman Tarif JNE

Perancangan Halaman Tambah Tarif JNE

Admin mengisi form yang disediakan kemudian klik OK untuk

menyimpan.

Gambar 3.52 Perancangan Halaman Tambah Tarif JNE

Perancangan Halaman Edit Tarif JNE

Admin mengedit pada form yang berisi data yang telah ada

kemudian klik OK untuk menyimpan.

Gambar 3.53 Perancangan Halaman Edit Tarif JNE

65

Perancangan Halaman Report

Dalam menu report terdapat beberapa sub menu diantaranya

laporan stok barang, daftar penjualan bulanan, laporan laba

rugi dan laporan detail laba rugi

Gambar 3.54 Perancangan Halaman Report

Perancangan Halaman Auxpage

Halaman auxpage disini berfungsi untuk menyimpan data-data,

semisal : about us, cara order dan lain-lain.

Gambar 3.55 Perancangan Halaman Auxpage

Perancangan Halaman Edit Auxpage

Admin bisa mengedit auxpage di halaman edit auxpage.

Gambar 3.56 Perancangan Halaman Edit Auxpage

Perancangan Halaman Add Auxpage

Admin bisa menambah auxpage di halaman add auxpage.

Gambar 3.57 Perancangan Halaman Add Auxpage

66

Perancangan Halaman Baner

Admin bisa menambah, edit dan hapus baner di halaman

banner.

Gambar 3.58 Perancangan Halaman Baner

Perancangan Halaman Edit Baner

Admin bisa mngedit baner di halaman edit banner.

Gambar 3.59 Perancangan Halaman Edit Baner

Perancangan Halaman Tambah Baner

Pada halaman ini admin bisa menambah baner.

Gambar 3.60 Perancangan Halaman Tambah Baner

Perancangan Halaman Change Password

Admin bisa mengubah username dan password di halaman

ubah username dan password.

Gambar 3.61 Perancangan Halaman Change Password

67

2.1.4 Perancangan Laporan / Report

Berdasarkan bukti transaksi yang ada, maka pada akhir bulan

bagian penjualan akan membuat laporan penjualan, stok barang dan

laporan laba rugi yang ditujukan kepada pemilik.

Perancangan Laporan Penjualan

Gambar 3.62 Perancangan Laporan Penjualan

Perancangan Laporan Stok Barang

Gambar 3.63 Perancangan Laporan Stok Barang

Perancangan Laporan Laba Rugi

Gambar 3.64 Perancangan Laporan Laba Rugi

Perancangan Laporan Detail Laba Rugi

Gambar 3.65 Perancangan Laporan Detail Laba Rugi