BAB IV

PERANCANGAN

4.1 Analisis Perancangan

Pada metode perancangan penulis menggunakan metode berarah alir data

dan menggunakan metode analisa dengan pendekatan terstruktur (structured

approach) yaitu pendekatan dalam pengembangan sistem yang mengikuti

tahapan-tahapan yang dilengkapi dengan alat-alat dan teknik-teknik yang

dibutuhkan dalam pengembangan sistem. Pada metode ini, pengembangan sistem

dilakukan dalam bentuk modul-modul yang terstruktur. Dengan metode ini

modul-modul akan lebih mudah dicoba secara terpisah dan kemudian percobaan

dapat dilakukan untuk meyakinkan bahwa interaksi antara modul telah berfungsi

sebagaimana mestinya dan programmer dapat dengan mudah menuangkan dalam

bentuk yang sesuai dengan kebutuhan user.

4.2 Perancangan Sistem

Hasil pada tahap perancangan berkaitan erat dengan hasil tahap analisis.

Karena pada tahap analisis telah ditemukan fungsi-fungsi dan metode-metode

yang digunakan, sistem perangkat keras dan perangkat lunak yang dipakai, serta

antarmuka yang diharapkan. Hasil perancangan aplikasi harus sesuai dengan

perancangan dalam metode perancangan, yaitu antara lain :

41
 42

4.2.1 Perancangan Data Flow Diagram

Data Flow Diagram merupakan suatu cara untuk menggambarkan aplikasi

secara logika, tentang bagaimana aplikasi tersebut berjalan dari satu bagian ke

bagian yang lainnya, dengan menggunakan simbol-simbol dan anak panah sebagai

penghubung yang menyatakan arus data dari aplikasi tersebut.

4.2.1.1 Diagram Konteks

Diagram konteks merupakan diagram yang menggambarkan hubungan

input dan output antar sistem dengan dunia luar (kesatuan luar). Diagram konteks

berikut ini akan menggambarkan bentuk aliran data yang terjadi pada Aplikasi

Retail Produk Pertanin Pada Toko Aisyah

Gambar 4.1 Diagram Konteks

Keterangan : Pada Gambar 4.1 menjelaskan alur proses yang pertama kali

dalam Aplikasi Produk Pertanian Pada toko Aisyah pada gambar diatas terdapat 3

entitas yaitu entitas User/Pelanggan, admin dan Owner,

 43

4.2.1.2 Diagram Level Satu (1).

Diagram level satu yaitu diagram turunan pertama dari diagram konteks

menjadi beberapa model proses yang terkait, sehingga lebih memperjelas

perancangan sistem, dibawah ini adalah diagram level 1 Aplikasi Retail Produk

Pertanian Pada Toko Aisyah

Gambar 4.2 Diagram Level Satu (1)

Keterangan : Dari gambar 4.2 diagram level 1 diatas dapat digambarkan

hubungan antara sistem yang dikembangkan dengan tiga entitas yaitu Admin,

User/Pelanggan dan Owner.

 44

4.2.1.3 Diagram Level Satu (1 PROSES 2).

Diagram level satu yaitu diagram turunan pertama dari diagram konteks

menjadi beberapa model proses yang terkait, sehingga lebih memperjelas

perancangan sistem, dibawah ini adalah diagram level 1 Aplikasi Retail Produk

Pada Toko Aisyah

Gambar 4.3 Diagram Level Satu (1) Proses Dua (2)

4.2.1.3 Diagram Level Satu (1 PROSES 3).

Diagram level satu yaitu diagram turunan pertama dari diagram konteks

menjadi beberapa model proses yang terkait, sehingga lebih memperjelas

 45

perancangan sistem, dibawah ini adalah diagram level 1 Aplikasi Retail Produk

Pertanian Pada Toko Aisyah

Gambar 4.3 Diagram Level Satu (1) Proses Tiga (3)

4.2.1.3 Diagram Level Satu (1 PROSES 4).

Diagram level satu yaitu diagram turunan pertama dari diagram konteks

menjadi beberapa model proses yang terkait, sehingga lebih memperjelas

 46

perancangan sistem, dibawah ini adalah diagram level 1 Aplikasi Retail Produk

Pertanian Pada Toko Aisyah.

Gambar 4.2 Diagram Level Satu (1)

4.2.2 Perancangan Tabel

Basis data merupakan himpunan kelompok data yang saling berhubungan

yang diorganisasi sedemikian rupa tanpa pengulangan yang tidak perlu agar kelak

dapat dimanfaatkan kembali dengan cepat dan mudah untuk memenuhi

kebutuhan. Perancangan basis data disebut juga sebagai pemetaan model data,

Aplikasi Retail Produk Pertanian Pada Toko Aisyah ini menggunakan

PhpMyAdmin dengan nama file database sql, didalam file tersebut terdiri dari

beberapa tabel antara lain:

 47

4.2.2.1 Tabel Users

Tabel ini berguna untuk menampung data – data Pelanggan / Users dan

admin yang berisikan field data id, username dan password.

Tabel 4.1 Tabel Users

No Nama Field Type Ukuran Keterangan

1 Id * Bigint 20 Id (Primary key)

2 Name Varchar 255 Username

3 Email Varchar 255 Password

4 Roles Varchar 255 Level User

9 Remember_token Varchar 100 Token

10 current_team_id Bigint 20 Admin identifikasi

11 Photo_profile_path Varchar 255 PhotoProfile

4.2.2.2 Tabel Product

Tabel ini berguna untuk menampung data – data produk yang berisikan

field name, price, category, description_menu, slug, deleted_at, created_at,

updated_at.

Tabel 4.2 Tabel Product

No Nama Field Type Ukuran Keterangan

1 id* Bigint 20 Id_produk (Primary Key)

2 name Varchar 255 Nama Produk

3 price Bigint 20 Harga Produk

4 category Varchar 255 Kategori Produk

 48

5 description_men Longtext - Deskripsi produk

6 slug Varchar 25 Link produk

4.2.2.3 Tabel product_galleries

Tabel ini berguna untuk menampung data – data dan foto-foto dari produk

yang telah dibuat

Tabel 4.3 Tabel product_galleries

No Nama Field Type Ukuran Keterangan

1 Id * Bigint 20 Id (Primary Key)

2 Product_id** Bigint 20 Id Produk (Foreign Key)

3 url Varchar 255 Link foto produk

4 Is_featured Tinyint 1 Rekomendasi produk

4.2.2.4 Tabel Transaction

Tabel ini berguna untuk menampung data – data transaksi yang berisikan

field id, users_id, name, email,address, phone, service, payment, payment_url,

total_price, status, deleted_at, created_at, updated_at.

Tabel 4.4 Tabel Transaction

No Nama Field Type Ukuran Keterangan

1 Id * Bigint 20 Id Transaction(Primary Key)

2 Users_id ** Bigint 20 Id User (Foreign Key)

3 Name Varchar 255 Nama User

 49

4 Email Varchar 255 Email User

9 Deposit Bigint 20 Deposit / DP

10 Address Varchar 255 Alamat Pesanan

14 Phone Varchar 255 Nomor telepon

15 Service Varchar 255 Keterangan Pesanan

16 Payment Varchar 255 Keterangan pembayaran

17 Payment_url Varchar 255 Link Pembayaran

18 Total_price Bigint 20 Total Pembayaran

19 Status Varchar 255 Status pesanan

4.2.2.5 Tabel Transaction_items

Tabel ini berguna untuk menampung data – data transaksi item yang

berisikan id, users_id, product_id, transactions_id, created_at, updated_at.

Tabel 4.5 Tabel Transactions_items

No Nama Field Type Ukuran Keterangan

1 Id * Bigint 20 Id (Primary Key)

2 Users_id** Bigint 20 Id user (Foreign Key)

3 Products_id** Bigint 20 Id Produk (Foreign Key)

4 Transactions_id** Bigint 20 Id transaksi (Foreign Key)

4.2.2.6 Tabel Carts atau Keranjang

 50

Tabel ini Tabel ini berguna untuk menampung data – data cart yang

berisikan field

Tabel 4.6 Tabel carts

1 id* Bigint 20 Id carts (Primary Key)

2 User_id** Bigint 20 Id User (Foreign Key)

3 Product_id Bigint 20 Id produk (Foreign Key)

4.2.3 Relasi Antar Tabel

Database merupakan kumpulan file yang paling terkait. Pada model data

relasional, hubungan antar file kunci relasi (relation key) yang merupakan kunci

utama masing-masing file, perancangan database yang dapat membuat paket

rasional akan bekerja secara optimal, relasi antar tabel sistem adalah sebagai

berikut :
 51

Gambar 4.5 Relasi Antar Tabel

Keterangan :

1. * : Kunci Utama ( Primary Key ).

2. ** : Kunci Tamu ( Foreign Key ).

3. : Relasi Satu Ke Banyak ( One to Many )

4.2.4 Perancangan Halaman Antar Muka (Input)

 52

Perancangan halaman antar muka (Input) merupakan kelanjutan dari

perancangan basis data yang terdiri dari desain Menu Utama ( Home ), input data

sekolah, data kriteria, data sub kriteria, data rating kecocokan, perangkingan dan

data informasi yang akan digambarkan secara terperinci sebagai berikut:

4.2.4.1 Rancangan Halaman Utama (Home)

Pada halaman utama ini berisi rancangan tampilan antar muka (interface)

pada saat user mengases url web.

Gambar 4.6 Halaman Utama

 53

4.2.4.2 Rancangan Menu Detail produk

Rancangan antarmuka ini berfungsi untuk Melihat Detail Produk yang ada

di Toko Aisyah.

Gambar 4.7 Rancangan Detail Produk

 54

4.2.4.3 Rancangan Menu Keranjang

Rancangan antarmuka ini berfungsi untuk menginputkan data keranjang

pemesanan di Toko Aisyah

Harga

Pupuk

Pupuk

Pupuk

Pupuk

Pupuk

Pupuk

Gambar 4.8 Rancangan Keranjang

 55

4.2.4.4 Rancangan Menu Input Data Produk

Rancangan antarmuka ini berfungsi untuk menginputkan data produk yang

sudah ada di Toko Aisyah.

Gambar 4.9 Rancangan Input Data Produk

4.2.4.5 Rancangan Input Data Produk Galleri / Foto Produk

Rancangan antarmuka ini berfungsi untuk menginputkan Data Foto produk

yang menyesuaikan dengan menu produk .

Gambar 4.10 Rancangan Input Data Produk

 56

4.2.5 Perancangan Halaman Antarmuka Menu

Rancangan menu merupakan kelanjutan dari perancangan basis data yang

terdiri dari desain menu data Transaksi, data Produk, data Galleri Produk, data

User yang akan digambarkan secara terperinci sebagai berikut:

4.2.5.1 Perancangan Halaman Menu Data Transaksi

Perancangan halaman menu data sekolah merupakan rancangan halaman

yang berisikan tampilan data transaksi yang akan digambarkan secara terperinci

sebagai berikut:

Gambar 4.11 Halaman Data Transaksi

 57

4.2.5.2 Perancangan Halaman Menu Data Produk

Perancangan halaman menu data kriteria merupakan rancangan halaman

yang berisikan tampilan data produk yang akan digambarkan secara terperinci

sebagai berikut:

Gambar 4.12 Halaman Data Produk

 58

4.2.5.3 Perancangan Halaman Menu Data Galleri Produk

Perancangan halaman menu data Galleri Produk merupakan rancangan

halaman yang berisikan tampilan data sub produk yang akan digambarkan secara

terperinci sebagai berikut:

Gambar 4.13 Halaman Data Galleri Produk

 59

4.2.5.4 Perancangan Halaman Data Pelanggan / User

Perancangan halaman menu data Pelanggan / User merupakan rancangan

halaman yang berisikan tampilan data Pelanggan / User yang akan digambarkan

secara terperinci sebagai berikut:

Gambar 4.14 Halaman Data Pelanggan

 60

4.2.6 Perancangan Halaman Antarmuka Laporan

4.2.6.1 Perancangan Halaman Laporan Transaksi Awal

Perancangan halaman laporan transaksi merupakan rancangan tampilan

yang menampilkan laporan Transaksi dari pemesanan pelanggan yang berupa

nama pemesan, email pemesan, tanggal acara, alamat, nomor telepon, prosi

pemesanan, servis total harga perporsi, yang akan digambarkan secara terperinci

sebagai berikut :

Gambar 4.15 Halaman Laporan Transaksi

 61

4.2.6.4 Perancangan Halaman Laporan Transaksi

Perancangan halaman laporan transaksi merupakan rancangan tampilan

yang menampilkan laporan bulanan dari pemesanan pelanggan yang berupa nama

acara, tanggal acara, tanggal pemesan dan jam dibuat, status, total harga dan porsi

pesanan , yang akan digambarkan secara terperinci sebagai berikut :

Gambar 4.17 Halaman Laporan Transaksi