BAB 3
PERANCANGAN SISTEM
3.1
Perancangan Sistem
Seiring dengan perkembangan teknologi informasi saat ini, serta untuk meningkatkan efesiensi kerja dan waktu, maka masih banya ksistem yang ada saat ini yang masih manual dan harus diganti dengan system yang lebih baik lagi. Hal ini dilakukan dengan cara membangun system yang terkomputerisasi atau online. Untuk memulai membangun suatu program mengenai perancangan system informasi akademik, maka penulis terlebih dahulu merencanakan alur kerja berdasarkan kebutuhan dari user yang akan menggunakan aplikasi basis data ini. Perancangan merupakan proses yang dilakukan oleh perancang system untuk mengerjakan spesifikasi sistem, membuat keputusan tentang bagaimana komponen system diaktualisasikan. Proses ini menyangkut tujuan sistem tersebut, audience, objek dan informasi domain. Perancangan yang baik harus mengetahui bagaiman amendapatkan efek yang dibutuhkan oleh spesifikasi tersebut dengan cara paling fleksibel, efesien dan elegan.
Universitas Sumatera Utara
3.2
Data Flow Diagram (DFD) Perancangan Aplikasi
Data Flow Diagram(DFD) merupakan model dari sistem untuk menggambarkan pembagian sistem kemodulyang lebih kecil. Salah satu keuntungan menggunakan diagramalir data adalah memudahkan pemakai yang kurang menguasai bidang komputer untuk mengerti sistem yang akan dikerjakan. Pada
tahap analisa,
penanganan notasi simbollingkaran dan anak panah menggambarkan arus data dalam perancangan sistem sangat membantu dalam komunikasi dengan pemakaian sistem menggunakan notasi– notasi untuk menggambarkan arus dari data sistem. Disamping itu DFD adalah salah satu alat pembuatan model yang sering digunakan, khususnya bila fungsi–fungsi system merupakan bagianyang lebih penting dan kompleks daripada data yang dimanipulasi oleh sistem. Dengan kata lain, DFD adalah alat pembuatan modelyangmemberikan penekanan hanyapada fungsi sistem. DFD juga merupakan alat perancangan system yang berorientasi pada alur data dengan konsep dekomposisi dapat digunakan untuk penggambaran analisa maupun rancangan system yang mudah dikomunikasikan oleh professional system kepada pemakai maupun pembuat program.
Universitas Sumatera Utara
3.2.1
Diagram Konteks Toko Mangamon
Diagram Konteks adalah sebuah diagram sederhana yang menggambarkan hubungan antara entity luar, masukan dan keluaran dari sistem. Diagram konteks direpresentasikan dengan lingkaran tunggal yang mewakili keseluruhan sistem. Berikut ini adalah diagram konteks dari Toko online Mangamon:
Gambar 3.2.1 Diagram Kontek Mangamon
Universitas Sumatera Utara
3.2.2 Data Flow Diagram (DFD) Level 0
Username dan pass Username dan pass
D1Admin
Info produk
Data admin
2.1
Informasi pemesanan
Informasi pemesanan
Pembeli
Pemesanan
Admin
3.1 Atur Produk
Data produk D2
Produk
D3Kategori
Data produkData kategori Info produk Pengunjung
Gambar 3.2.2 Data Flow Diagram (DFD) Level 0
Universitas Sumatera Utara
3.2.3 Data Flow Diagram (DFD) Level 1
a.Admin b.costumer
log in
or
1 order
Username Password
Input data
D1 | Admin
2 Produk kategori
informasi
D2 | produk 3
C Produk
Kategori produk Aksesoris olahraga Baju olahraga Basket Bulu tangkis Futsal & sepakbola Hot item Tennis
D3| Kategori
Gambar 3.2.3 Data Flow Diagram (DFD) Level 1
Universitas Sumatera Utara
3.3
Perancangan Database Aplikasi
Database adalah kumpulan dari data yang berhubungan antara yang satu dengan yang lainnya, tersimpan diperangkat keras komputer dan menggunakan perangkat lunak untuk memanipulasinya. Database merupakan salah satu komponen yang penting dalam sistem komputerisasi, karena database merupakan kumpulan dari beberapa file, dalam hal ini file–file tersebut dikelompokan secara terstruktur dalam beberapa tabel sesuai dengan informasi yang terkandung di dalamnya.
3.3.1 ERD (Entity Relationship Diagram)
Proses perancangan database menggunakan ERD ( Entity Relationship Diagram) ditunjukan pada Gambar 3.3.1 id
nama id
gambar
kategori
deskripsi
Produk username
password memiliki harga
atur
kategori
ukuran
Admin
nama id
gambar
untuk
cek Bukti pembayaran
harga
upload
Nama
id pemesanan
Nama_pembeli
status
alamat
melakukan
pembeli
Tanggal
email
jumlah
No_hp
Gambar 3.3.1 ERD ( Entity Relationship Diagram)
Universitas Sumatera Utara
3.3.2 Relationship (Relasi Antar Tabel)
Tabel saling berelasi dalam aplikasi I-Commerce ini. Relasi antar tabel ditunjukan pada Gambar 3.3.2
Gambar 3.3.2 Relationship (Relasi Antar Tabel)
3.3.3 Struktur Tabel
Berikut ini rancangan tabel yang penulis gunakan dalam membangun aplikasi ini : Tabel Admins terdiri dari : Tabel 3.3.3.1 Tabel Admins
Field Name
Data Type
Size
Description
Username
Varchar
50
Username
Universitas Sumatera Utara
Password
varchar
50
Password
Nama_lengkap
varchar
100
Nama lengkap
Email
varchar
100
email
No_telp
varchar
20
No telp
Level
Varchar
20
level
Tabel hubungi terdiri dari : Tabel 3.3.3.2. Tabel hubungi Field Name
Data Type
Size
Description
Id_hubungi
Int
5
Id hubungi
Id_kustomer
Int
5
Id kustomer
Subjek
Varchar
100
subjek
Pesan
Text
-
pesan
Tanggal
Date
-
Tanggal
Tabel kategori terdiri dari : Tabel 3.3.3.3 Tabel Kategori Field Name
Data Type
Size
Description
Id_kategori
Int
5
Id
Nama_kategori
Varchar
100
Nama kategori
Universitas Sumatera Utara
Tabel kota terdiri dari : Tabel 3.3.3.4 Tabel kota Field Name
Data Type
Size
Description
Id_kota
Int
3
Id kota
Nama_kota
Varchar
100
Nama kota
Ongkos_kirim
Int
10
Ongkos kirim
Tabel Kustomer terdiri dari: Tabel 3.3.3.5 Tabel kustomer Field name
Data type
Size
Description
Id_kustomer
Int
5
Id kustomer
Password
Varchar
50
Password
Nama_lengkap
Varchar
100
Nama lengkap
Alamat
Text
-
Alamat
Email
Varchar
100
Email
Telpon
Varchar
20
Telpon
Id_kota
Int
5
Id kota
Universitas Sumatera Utara
Tabel modul terdiri dari Tabel 3.3.3.6 Tabel modul Field name
Data type
Size
Description
Id_modul
Int
5
Id modul
Static_content
Text
-
Static content
Gambar
Varchar
100
gambar
Tabel Orders terdiri dari: Tabel 3.3.3.7 Tabel Order Field Name
Data type
Size
Description
Id_orders
Int
5
Id orders
Status_orders
Varchar
50
Status_order
Tgl_order
Date
-
Tgl order
Jam_order
Time
-
Jam order
Id_kustomer
Int
5
Id kustomer
Universitas Sumatera Utara
Tabel order_detail terdiri dari: Tabel 3.3.3.8 Tabel order_detail Field name
Data type
Size
Description
Id_orders
Int
5
Id orders
Id_produk
Int
5
Id produk
Jumlah
Int
5
Jumlah
Tabel order_temp terdiri dari: Tabel 3.3.3.9 Tabel order_temp Field name
Data type
Size
Description
Id_orders_temp
Int
5
Id orders temp
Id_produk
Int
5
Id produk
Id_session
Varchar
100
Id session
Jumlah
Int
5
Jumlah
Tgl_orders_temp
Date
-
Tgl orders temp
Jam_order_temp
Time
-
Jam order temp
Stok_temp
Int
5
Stok temp
Universitas Sumatera Utara
Tabel produk terdiri dari: Tabel 3.3.3.10 Tabel produk Field name
Data type
Size
Description
Id_produk
Int
5
Id produk
Id_kategori
Int
5
Id kategori
Nama_produk
Varchar
100
Nama produk
Deskripsi
Text
-
Deskripsi
Harga
Int
20
Harga
Stok
Int
5
Stok
Berat
Decimal
5,2
Berat
Tgl_masuk
Date
-
Tgl masuk
Gambar
Varchar
100
Gambar
Dibeli
Int
5
dibeli
Diskon
Int
5
diskon
3.4
Flowchart Program Mangamon
Flowchart menggambarkan aliran pada sistem aplikasi komik pada website Mangamon. Secara umum, user masuk ke aplikasi melihat
info produk lalu
melakukan pemesanan. Selanjutnya admin kita akan memeriksa pesanandan mengkonfirmasi pemesanan.
Universitas Sumatera Utara
3.4.1 Flowchart Menu Utama
Flowchart menu utama dapat dilihat pada gambar dibawah ini :
START
PILIH KATEGORI
PILIH PRODUK
Y BELANJA LAGI ?
T MENYERAHKAN PRODUK
PEMBAYARAN
TUTUP APLIKASI
3.4.1 Gambar Flowchart Menu Utama
3.4.2 Flowchart Login Admin
Flowchart login admin dapat dilihat pada gambar dibawah ini :
Universitas Sumatera Utara
L_adm
Masukkan Username & password
Y Login
Reset
Y
Hapus username & Password
T
Validasi Username & Password
X
T Valid
Y
M_adm
Gambar 3.4.2 Alur Flowchart Login Admin 3.4.3 Flowchart Menu Admin
Flowchar tmenu admin dapat dilihat pada gambar dibawah ini :
Universitas Sumatera Utara
M_Admin
Tampilan Menu Admin
Pilih Y
Y
Y Tambah Produk
Tambah Produk
Produk T
Masukan Data
T
Data Batal Disimpan
Simpan T Simpan Data T
Data Produk Data Disimpan Y Ubah Produk
Ubah Produk
Pilih Data
Y Ubah T
Data Batal Diubah
Ubah Data
T
Data Produk Data Diubah Y Hapus Produk
Hapus Produk
Pilih Data
Y Hapus T
Data Batal Dihapus
Hapus Data T Data Produk Data Dihapus Y Y
Tambah Kategori
Kategori
Tambah Kategori
Masukan Data
Data Batal Disimpan
T Simpan Data
T
T
Y Simpan
Data Kategori Data Disimpan Y Ubah Kategori
Ubah Produk
Pilih Data
Y Ubah
Data Batal Diubah
T Ubah Data
T
Data Kategori Data Diubah Y Hapus Kategori
Hapus Kategori
Pilih Data
Y Hapus T
Data Batal Dihapus
Hapus Data T Data Kategori Data Dihapus Y keluar
T X
Gambar 3.4.3 Alur Flowchart Menu Admin 3.5 Algoritma Perancangan Toko Online Mangamon
Algoritma Kategori Beranda Langkah I
: Pilih menu Beranda.
Universitas Sumatera Utara
Langkah II
: Menampilkan halaman utama website.
Algoritma Kategori Profil Langkah I
: Pilih menu Profil
Langkah II
: Menampilkan halaman profil seputar Sukamol
Algoritma Kategori Produk Langkah I
: Pilih menu Kategori Produk.
Langkah II
: Menampilkan halaman Kategori Produk.
Langkah II
:Pilih produk
Algoritma Keranjang Belanja Langkah I
: Pilih menu Kategori Keranjang Belanja
Langkah II
: Menampilkan Barang yang telah kita pilih untuk di beli
Algoritma Hubungi kami Langkah I
: Pilih menu Testimoni.
Langkah II
: Menampilkan halaman Testimoni pelanggan melalui
pesan.
Universitas Sumatera Utara
BAB 4
IMPLEMENTASI SISTEM
4.1 Definisi Implementasi Sistem
Implementasi sistem merupakan langkah-langkah atau prosedur yang dilakukan dalam menyelesaikan desain sistemyang telah disetujui, untuk menguji, menginstall, dan memulai sistem baru atausistem yang diperbaiki untuk menggantikan sistem yang lama, sedangkan tahapimplementasi sistem merupakan tahap meletakkan sistem agar sistem dapat siap untukdioperasikan.
4.2 Tujuan Implementasi
Adapun tujuan implementasi sistem, yaitu: a. Mengkaji rangkaian sistem baik dari segi software maupun hardware sebagaisarana pengolah data dan penyaji informasi. b. Memastikan bahwa pemakai dapat mengoperasikan dengan mudah terhadapsistem yang baru dan mendapat informasi yang baik dan jelas.
Universitas Sumatera Utara
4.3 Komponen dalam Implementasi Sistem
Agar perancangan sistem yang telah kita kerjakan dapat berjalan baik atau tidak, maka perlu dilakukan pengujian terhadap sistem yang telah dikerjakan. Untuk itu dibutuhkan beberapa komponen utama yang mencakup perangkat keras (hardware), perangkat lunak (software) dan perangkat operator (brainware).
4.3.1 Kebutuhan Perangkat Keras
Perangkat keras (hardware) merupakan komponen peralatan yangmembentuk suatu sistem komputer dan peralatan tambahan lainnyayang mungkin komputer menjalankan tugasnya sesuai dengan yang diberikan.Komponen ini bersifat nyata secara fisik, artinya dapat dilihat dandipergunakan, misalnya monitor, CPU (Central Processing Unit), printer, keyboard,dan mouse.
Spesifikasi perangkat keras komputer yang digunakan dalam pembuatan website ini adalah: 1. Laptop dengan Processo Intel Core i3 2. Memory2 GB 3. Harddisk sebagai media penyimpanan 4. DVDR/W
Universitas Sumatera Utara
4.3.2 Kebutuhan Perangkat Lunak
Hardware tidak dapat menyelesaikan masalah tanpa adanya software. Software merupakan komponen di dalam sistem data berupa program atau instruksi untukmengontrol suatu sistem. Perangkat lunak yang diperlukan untuk menjalankanperangkat kerasnya adalah: 1. Windows 7 Ultimate 2. Apache 3. Mysql 4. Browser 5. Sublime Text
4.3.3 Kebutuhan Brainware
Perangkat Operator (Brainware) yang dapat menjalankan website ini terbagi menjadi 3 yaitu : 1. Administrator 2. Member 3. Visitor
Universitas Sumatera Utara
4.4 Tampilan Halaman Website
Untuk menjalankan sistem guna web browser pada pengujian ini penulis menggunakan web browser Google Chrome setelah web browser jalan, ketikkan pada address bar http://localhost/toko/home.php untuk pengetesan halaman utama. Halaman utama sistem tersebut seperti pada gambar berikut :
Gambar 4.4.1 Halaman Home
Universitas Sumatera Utara
Gambar 4.4.2 Halaman Profil
Gambar 4.4.3 Halaman Cara Pemesanan
Universitas Sumatera Utara
Gambar 4.4.4 Halaman Produk
Gambar 4.4.5 Halaman Keranjang Belanja
Universitas Sumatera Utara
Gambar 4.4.6 Halaman Testimoni
Gambar 4.4.7 Halaman Login Admin
Universitas Sumatera Utara
Gambar 4.4.8 Halaman Home Admin
Gambar 4.4.9 Halaman Edit Profil Toko Admin
Universitas Sumatera Utara
Gambar 4.4.10 Halaman Info Rekening Toko Admin
Gambar 4.4.11 Halaman Kategori Produk Admin
Universitas Sumatera Utara
Gambar 4.4.12 Halaman Tambah Produk Admin
Gambar 4.4.13 Halaman Order Admin
Universitas Sumatera Utara
Gambar 4.4.14 Halaman Ongkos Kirim Admin
Gambar 4.4.15 Halaman Cara Pembelian Admin
Universitas Sumatera Utara
BAB 5
KESIMPULAN DAN SARAN
5.1 Kesimpulan
Dari keterangan dan bab-bab sebelumnya penulis dapat mengambil kesimpulan adalah sebagai berikut : 1. Web ini dibuat bertujuan untuk memudahkan user melakukan transaksi barang dengan cara yang lebih praktis dan nyaman. 2. E-commerce sangat berkembang di dunia maya dan banyak investor yang menanamkan modal di bisnis ini. 3. Perancangan web yang di tuntun harus menarik dan efektif, menjadikan web yang dapat di pakai semua masyarakat.
Universitas Sumatera Utara
5.2 Saran Adapun beberapa saran penulis pada pembuatan sistem ini adalah: 1. Barang yang di jual semakin tambah banyak supaya pelanggan puas akan pelayanannya. 2. Tampilan website yang menarik juga poin plus tersendiri bagi yang melihat.
Universitas Sumatera Utara
