BAB III
ANALISIS DAN PERANCANGAN
3.1 Analisis Kebutuhan Situs Web
Seperti langkah-langkah yang dilakukan pada salah satu model proses rekayasa perangkat lunak yaitu model System Development Life Cycle, maka pada bab ini akan dibahas tentang salah satu tahap dalam membangun perangkat lunak. Proses analisis merupakan salah satu tahapan yang harus dilalui rekayasa piranti lunak karena melalui analisis definisi masalah menjadi lebih jelas, kebutuhan sistem dapat dispesifikasi sehingga kriteria yang harus dipenuhi sistem dapat ditentukan supaya sistem yang dihasilkan nantinya dapat menjadi solusi dari masalah tersebut.
Pada tahapan ini, kegiatan yang dilakukan adalah membuat analisis dari aplikasi toko buku online berbasis web. Dalam melakukan analisis, penulis membaginya menjadi dua sudut pandang yaitu sudut pandang pengunjung dan sudut pandang administrator. Analisis dari sudut pandang pengunjung antara lain:
1. Situs web yang dibangun adalah situs web yang menampilkan layanan toko buku, dengan harapan pengunjung mengetahui informasi mengenai toko buku
2. Pengunjung yang berkunjung ke situs web ini adalah masyarakat umum sedang mencari buku.
3. Aktivitas yang dapat dilakukan oleh pengunjung antara lain melihat buku yang dijual pada katalog beserta visualisasi buku, melakukan pencarian buku, memasukkan buku pilihan ke dalam keranjang belanja, melakukan pemesanan buku dengan melakukan pengisisan form pemesanan terlebih dahulu. Pengunjung juga dapat bertanya pada administrator melalui halaman contact us.
Adapun mengenai analisis dari sudut pandang administrator adalah administrator dapat mengelola data buku yang dijual dan mengelola pemesanan buku.
3.2 Perancangan
Pada bagian ini akan dijelaskan secara rinci perancangan situs web yang meliputi pemodelan diagam alir data, use case diagram dan diagram keterhubungan entitas.
3.2.1 Pemodelan Diagram Alir Data
Pada tahap analis, penggunaan notasi seperti lingkaran dan panah yang mewakili arus data sangat membantu sekali dalam komunikasi dengan pemakai sistem untuk memahami sistem secara logika. Diagram yang menggunakan notasi-notasi ini untuk menggambarkan arus dari data sistem dikenal dengan Diagram Arus Data (data flow diagram atau DFD) yang selanjutnya disingkat
menjadi DAD.
DAD sering digunakan untuk menggambarkan suatu sistem yang telah ada atau sistem baru yang dikembangkan secara logika tanpa mempertimbangkan lingkungan fisik dimanadata tersebut mengalir atau lingkungan fisik dimana data tersebut disimpan. DAD merupakan alat yang digunakan pada metodologi pengembangan sistem yang terstruktur. DAD juga merupakan dokumentasi dari sistem yang baik (Jogiyanto, 2005:700).
3.2.1.1 Diagram Konteks
Dari analisis perancangan situs web di atas, dapat dibuat sebuah diagram konteks yang merupakan DAD level teratas, yang digambarkan pada Gambar 3.1
Gambar 3.1 Diagram konteks
Dari gambar diagram konteks tersebut dapat dijelaskan bahwa terdapat dua kesatuan luar yang berhubungan dengan situs web yaitu admin dan pengunjung. Diagram konteks tersebut memperlihatkan proses yang berinteraksi dengan lingkungannya. Ada pihak luar yang atau lingkungan yang memberi masukan dan ada pihak yang menerima keluaran sistem.
3.2.1.2 Diagram Alir Data Level 0
Dari diagram konteks kemudian akan digambarkan dengan lebih terinci lagi yang disebut dengan overview diagram (DAD level 0). Adapun Diagram Overview dari Aplikasi Toko Buku Online adalah sebagai berikut :
Admin Aplikasi TokoBuku Online Pengunjung Data Buku Data Katalog Data Visualisasi Data Keranjang Data Pesanan Data Login Informasi Buku Informasi Katalog Informasi Visualisasi Informasi Keranjang Informasi Pesanan Informasi Login Informasi Buku Informasi Katalog Informasi Visualisasi Informasi Keranjang Informasi Pesanan Data Pesanan
Penjelasan dari Gambar DAD level 0 di atas adalah: 1. 1.0 Proses Login
Proses login dilakukan oleh admin. Proses login dengan memasukkan username dan password admin.
2. 2.0 Proses Lihat
Pengunjung dapat melihat buku-buku yang dijual dan dapat melihat visualisasi buku. Visualisasi buku merupakan gambar halaman isi buku berupa cover, sampul belakang, daftar isi buku, dan pendahuluan. Dengan visualisasi buku, pengunjung dapat seolah-olah melihat dan membaca buku. Pengunjung dapat memasukkan buku pilihan ke dalam keranjang belanja sementara.
3. 3.0 Proses Kelola Data Buku
Admin melakukan proses kelola buku. Proses kelola meliputi input, edit dan delete buku.
4. 4.0 Proses Pemesanan
Pemesan setelah memasukkan buku pilihan ke dalam keranjang belanja, melakukan proses check out, yaitu melakukan pemesanan kepada admin. Pemesan akan menerima konfirmasi pembayaran dan pengiriman melalui e-mail. Data pemesanan dari pemesan diterima admin kemudian admin memberi konfirmasi pembayaran dan pengiriman melalui alamat e-mail pemesan.
3.2.1.3 Diagram Alir Data Level 1
Dari diagram konteks kemudian akan digambarkan dengan lebih terinci lagi yang disebut dengan overview diagram (level 0). Tiap-tiap proses tersebut kemudian digambarkan lagi lebih terinci disebut level 1, dan seterusnya sampai tiap-tiap proses tidak dapat digambar lebih terinci lagi (Jogiyanto, 2005:714).
3.2.1.3.1 Diagram Alir Data Level 1 Login
Gambar 3.3 Diagram Alir Data Level 1 Login
3.2.1.3.2 Diagram Alir Data Level 1 Lihat Buku
3.2.1.3.3 Diagram Alir Data Level 1 Kelola Data Buku
Gambar 3.5 Diagram Alir Data Level 1 Kelola Data Buku 3.2.1.3.4 Diagram Alir Data Level 1 Pemesanan
Admin 3.1 input buku 3.2 edit buku 3.3 delete buku
Data input buku
Data edit buku
Data delete buku Informasi input buku
Informasi delete buku Informasi edit buku Buku 4.1 Checkout 4.2 Cek Pemesanan Admin Pemesan an Pesanan
Masuk Daftar Pemesanan
Lihat Daftar Pemesanan Memesan Buku 4.3 Proses Pemesanan Proses Pemesanan Konfirmasi Pemesanan
3.2.2 Pemodelan Use Case Diagram
Use case diagram mendeskripsikan interaksi tipikal antara para pengguna
sistem dengan sistem itu sendiri, dengan memberi sebuah narasi tentang bagaimana sistem tersebut digunakan (Fowler, 2005:141). Diagram ini menunjukkan fungsionalitas suatu sistem atau kelas dan bagaimana sistem berinteraksi dengan dunia luar. Use case diagram situs web toko buku online secara umum dapat dilihat pada Gambar 3.7.
Gambar 3.7 Use case diagram situs web toko buku
Pada Gambar 3.7 dapat dilihat bahwa terdapat dua aktor yaitu pengunjung dan admin. Pengunjung dan admin merupakan aktor yang dapat melihat buku dari situs web. Pengunjung dapat melakukan pemesanan buku. Admin dapat melakukan proses-proses pengelolaan buku dan pesanan (edit, input, delete) dengan melakukan login terlebih dahulu.
Pengunjung
Admin
Login Lihat, pesan buku
Kelola buku, pesanan
3.2.3 Rancangan Basis Data
3.2.3.1 Struktur Tabel
1. Tabel Admin
Tabel 3.1 Tabel admin
Pada tabel ini yang menjadi primary key adalah uname.
Field Type Panjang Keterangan
uname varchar 15 nama admin.
passwd varchar 15 sandi admin
2. Tabel Buku
Pada tabel ini yang menjadi primary key adalah kd_buku Tabel 3.2 Tabel buku
Field Type Panjang Keterangan
kd_buku varchar 20 Kode buku
kd_kategori char 3 Kode kategori buku
judul varchar 100 judul buku
penerbit varchar 50 pengarang buku
pengarang varchar 4 penerbit buku
thn_terbit varchar 50 Tahun terbit buku
harga int 5 harga buku
diskon int 2 Diskon buku
gambar varchar 100 Gambar buku
sinopsis text Sinopsis buku
stock int 3 Stok buku
3. Tabel Kategori
Pada tabel ini yang menjadi primary key adalah kd_kategori Tabel 3.3 Tabel kategori
Field Type Panjang Keterangan
kd_kategori char 3 Kode kategori
kategori varchar 20 Nama kategori
ket text Keterangan
kategori
4. Tabel Pesanan
Pada tabel ini yang menjadi primary key adalah kd_pesan Tabel 3.4 Tabel pesanan
Field Type Panjang Keterangan
kd_pesan int 5 Kode pesanan
nama varchar 50 Nama pemesan
email varchar 50 Email pemesan
alamat varchar 50 Alamat pemesan
kota varchar 50 Kota
kd_pos varchar 5 Kode pos
telp varchar 15 Nomor telepon
tgl_pesan varchar 10 Tanggal pesan
tgl_kirim varchar 10 Tanggal kirim
status varchar 10 Status
5.Tabel Rinci Pesanan
Tabel 3.5 Tabel rinci pesanan
Field Type Panjang Keterangan
kd_pesan char 3 Kode pesanan
kd_buku varchar 20 Kode buku yang dipesan
6.Tabel Halaman
Pada tabel ini yang menjadi primary key adalah id_hlmn Tabel 3.6 Tabel halaman
Field Type Panjang Keterangan
id_hlmn Int 5 Kode halaman
kd_buku Varchar 15 Kode buku
jdl_hlmn varchar 100 Judul bagian halaman gbr_hlmn varchar 100 Gambar bagian halaman
ket text keterangan
Dalam membuat struktur entitas basis data, dilakukan pertimbangan terhadap pembuatan struktur tersebut, pertimbangan-pertimbangannya antara lain:
1. Pemberian nilai 5 (lima) pada tabel yang memiliki atribut kd_pesan dengan tipe data integer. Dengan pertimbangan nilai 1 integer = 2 byte = 16 bit = 65536 rows, penulis berasumsi bahwa tabel yang di dalamnya terdapat atribut nomor dengan tipe data integer, variabel tersebut dapat menampung data hingga mencapai 65536 rows ke bawah pada setiap 1 integernya. 2. Pemberian nilai 15 (lima belas) untuk atribut uname dan passwd dengan tipe
data varchar pada tabel admin, dimaksudkan untuk mempermudah admin dalam mengingat username dan password.
3. Pemberian nilai 100 (seratus) pada tabel yang memiliki atribut judul dengan tipe data varchar. Dalam hal ini penulis berasusmsi bahwa judul merupakan
headline dari suatu informasi yang akan disampaikan, sehingga dalam
penulisan judul tidak perlu panjang lebar, judul harus ditulis singkat, padat, jelas.
4. Pemberian nilai 100 (seratus) pada setiap tabel yang memiliki atribut gambar dengan tipe data varchar.
5. Penulis lebih banyak menggunakan tipe data varchar untuk atribut-atribut yang bernilai string karena varchar merupakan tipe data yang sifatnya fleksibel, yang artinya panjang string dapat berubah-ubah disesuaikan dengan banyaknya string yang disimpan pada saat itu dan maksimal sebanyak n karakter yang telah ditentukan sebelumnya. Hal tersebut berbeda dengan tipe data char yang sifatnya statis yang tetap sesuai dengan nilai
string yang telah ditentukan sebelumnya.
6. Tipe data yang digunakan untuk atribut gambar dan gbr_hlmn adalah varchar. Varchar untuk menyimpan path alamat tempat gambar disimpan bukan untuk menyimpan gambar.
3.2.3.2 Pemodelan Diagram Keterhubungan Entitas
Diagram keterhubungan entitas atau Entity Relationship Diagram, selanjutnya disebut ERD, digunakan untuk memodelkan struktur data dan hubungan antar data. Model entity-relationship yang berisi komponen-komponen himpunan entitas dan himpunan relasi yang masing-masing dilengkapi dengan atribut-atribut yang merepresentasikan seluruh fakta dari real world (dunia nyata) yang ditinjau, dapat digambarkan dengan lebih sistematis dengan menggunakan ERD (Fathansyah, 2001:70).
Pada basis data yang dibangun, terdapat enam entitas yang memiliki kerterhubungan, yaitu entitas admin, buku, kategori, pesanan, rinci pesanan dan halaman. Pada web sistem toko buku online entitas-entitas yang terlibat saling berhubungan satu dengan yang lainnya, sehingga perlu digambarkan diagram
relasi antar entitas. Diagram keterhubungan entitas atau Entity Relationship
Diagram, selanjutnya disebut ERD adalah model konseptual yang mendeskripsikan hubungan antar penyimpanan. Diagram tersebut digunakan untuk memodelkan struktur data dan hubungan antar data. Secara umum ERD dari situs web yang dibangun digambarkan pada Gambar 3.8.
Gambar 3.8 ERD Toko Buku Online
Dari gambar di atas terlihat ada beberapa hubungan yang terbentuk. Hubungan yang terbentuk, yaitu satu admin mengelola banyak buku dan banyak pesanan, banyak pesanan melihat dan memesan banyak buku, satu pesanan memiliki satu rinci pesanan dan satu buku memiliki satu kategori dan banyak halaman.
Buku Admin Kategori Pesanan Halaman Kelola Memiliki Melihat Memesan Rinci Pesanan Memiliki 1 N 1 N 1 1 N 1 N N
Hubungan yang terbentuk antara entitas admin dengan entitas buku dan entitas pesanan adalah hubungan kelola. Kardinalitas dari hubungan ini adalah satu ke banyak (one to many). Sehingga, satu admin dapat mengelola banyak buku dan banyak pesanan. Atribut yang menghubungkan entitas admin dengan entitas buku dan pesanan adalah úname, kd_buku dan kd_pesan.
3.3 Rancangan Antar Muka
3.3.1 Rancangan Antar Muka Pengunjung
Desain ini dibuat untuk pengunjung situs web. Pada bagian ini pengunjung dapat melihat berbagai macam informasi-informasi yang terdapat dalam web.
3.3.1.1 Rancangan Antar Muka Halaman Utama Pengunjung
Berikut gambar desain antar muka pengunjung yang tampak pada halaman utama pengunjung pada Gambar 3.9.
Gambar 3.9. Rancangan Halaman Utama
Halaman ini merupakan halaman utama dan pertama dari web. Halaman ini diberi nama index.php. Pada halaman ini ditampilkan menu-menu utama yang disediakan oleh web toko buku online terdiri atas menu home, profil, katalog, contact us dan disertai menu tambahan, seperti buku baru, keranjang belanja, menu pencarian.
3.3.1.2 Rancangan Antar Muka Halaman Visualisasi Buku
Gambar 3.9. Rancangan Form visualisasi buku Toko Buku Online
Home Profil Buku Katalog Contact us Tanggal
Pencarian Buku Buku Baru
Keranjang belanja Visualisasi Buku Judul:
Kategori: cari
Halaman ‘Depan/ Belakang/ Daftar Isi/ Pendahuluan’ Buku ‘Judul Buku’ Gambar Buku
Cover/ Belakang/ Daftar Isi/ Pendahuluan
3.3.2 Rancangan Antar Muka Admin
3.3.2.1. Rancangan Form Login Admin
Gambar 3.11. Rancangan Form Login Admin
Form ini merupakan menu pertama pada halaman admin dan diberi nama
index.php. Pada halaman ini ditampilkan form untuk mengisi user id dan
password agar admin bisa masuk ke halaman menu admin. Login :
Password : xxxxx
