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 30
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
Data Buku Data Katalog Data Visualisasi Data Keranjang Data Pesanan Data Login Admin Aplikasi TokoBuku Online Informasi Buku Informasi Katalog Informasi Visualisasi Informasi Keranjang Informasi Pesanan Informasi Login Informasi Buku Informasi Katalog Informasi Visualisasi Informasi Keranjang Informasi Pesanan Data Pesanan Pengunjung 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 :
Gambar 3.2 Diagram Alir Data Level 0 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 Gambar 3.4 Diagram Alir Data Level 1 Lihat Buku
3.2.1.3.3 Diagram Alir Data Level 1 Kelola Data Buku Informasi input buku Data input buku 3.1 input buku Admin Informasi edit buku 3.2 edit buku Data edit buku Buku Informasi buku delete 3.3 delete buku Data delete buku Gambar 3.5 Diagram Alir Data Level 1 Kelola Data Buku 3.2.1.3.4 Diagram Alir Data Level 1 Pemesanan Memesan Buku 4.1 Checkout Masuk Daftar Pemesanan Pemesan an Admin Pesanan 4.2 Cek Pemesanan Lihat Daftar Pemesanan Konfirmasi Pemesanan 4.3 Proses Pemesanan Proses Pemesanan Gambar 3.6 Diagram Alir Data Level 1 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. Pengunjung Lihat, pesan buku Admin Kelola buku, pesanan << include >> Login 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.
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 Jml_pesan int 4 Jumlah 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. Admin 1 Kelola N Buku 1 Memiliki 1 Kategori N Rinci Pesanan 1 Memiliki 1 N Pesanan N Halaman N Melihat Memesan 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.
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.
Toko Buku Online Home Profil Buku Katalog Contact us Tanggal Pencarian Buku Buku Baru Judul: Kategori: cari Keranjang belanja Visualisasi Buku 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 Buku Cover/ Belakang/ Daftar Isi/ Pendahuluan Gambar 3.9. Rancangan Form visualisasi buku Halaman Depan/ Belakang/ Daftar Isi/ Pendahuluan Buku Judul Buku Gambar 3.10. Rancangan Halaman Visualisasi
3.3.2 Rancangan Antar Muka Admin 3.3.2.1. Rancangan Form Login Admin Login : Password : xxxxx Login 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.