Code Generation Pengkodean Test Support Pemeliharaan

51

3.3.5 Support Pemeliharaan

Pada tahap ini, merupakan tahap yang perlu dijalankan dalam melakukan pemeliharaan dengan meng-update aplikasi dan melakukan maintenance secara berkala agar aplikasi dapat terpelihara dengan baik. b. Data Flow Diagram level 1 Proses Pemesanan Barang yang merupakan pengembangan dari proses 3.0. Gambar 4.6 DFD level 1 Proses Pemesanan Barang 64 c. Data Flow Diagram level 1 Proses Manajemen Data yang merupakan pengembangan dari proses 4.0 seperti pada gambar dibawah ini. Gambar 4.7 DFD level 1 Proses Manajemen Data 65 d. Data Flow Diagram level 1 Proses Konfirmasi Pemesanan yang merupakan pengembangan dari proses 5.0. Gambar 4.8 DFD level 1 Proses Konfirmasi Pemesanan

4.2.2.3 Entity Relationship Diagram

Entity relationship diagram perancangan website e- commerce ini ditunjukkan pada Gambar 4.8. 66 Gambar 4.9 Entity Relationship Diagram Relationship diagram hubungan relasi antar tabel perancangan website e-commerce ini ditunjukkan pada Gambar 4.10. Gambar 4.10 Relationship Diagram 67

4.2.2.4 Perancangan Database

Rancangan database untuk pembuatan website e- commerce ini menggunakan database MySQL, detail Tabel rancangannya ditunjukkan pada Tabel dibawah ini. Tabel 4.1 Tabel User Tabel 4.2 Tabel Type 68 Tabel 4.3 Tabel Gambar Tabel 4.4 Tabel Stok Tabel 4.5 Tabel Tarif Pengiriman 69 Tabel 4.6 Tabel Pemesanan Tabel 4.7 Tabel Detail Pemesanan Tabel 4.8 Tabel Konfirmasi Pemesanan 70 Tabel 4.9 Tabel Pesan

4.2.2.5 Perancangan Struktur Menu Home

Dalam aplikasi Batik Shop online ini terdapat beberapa menu pada halaman index. Berikut adalah gambaran secara hierarkinya. Delivery FAQ Cara Pembelian Tentang kami Home Kategori Informasi Account Aksesoris batik Bahan batik Blus batik User Account Informasi Pribadi Histori pembelian Kemeja batik pria Sackdress Troli Search Gambar 4.11 Rancangan Struktur Menu Home 71

4.2.2.6 Perancangan Desain Halaman Home

Desain rancangan halaman website website e- commerce ditunjukkan pada Gambar 3.8, yang terbagi menjadi beberapa bagian yaitu: 1. Header, bagian ini berisi informasi tentang butik, beberapa menu shortcut, dan form searcing barang. 2. Content, bagian ini berisi box-box yang berisi keterangan dan gambar barang barang yang dijual. 3. Footer, bagian ini berisi informasi pembuatan website seperti tahun dibuat website, programmer website dan informasi penting lainya. Halaman pertama yang akan terbuka ketika user mengakses url dimana sistem ini berada. Pada bagian atas terdapat header template yang terdiri dari gambar logo Batik Shop, form search, link menu Contact, Sitemap, Bookmark. Header template tersebut akan terdapat pada semua halaman di sistem ini. Lalu pada tubuh halaman terdapat link menu Informasi, Kategori, Tag, Online help. Pada tengah halaman terdapat spesifikasi produk. 72 Tag Gambar Shopping cart Footer Blok Iklan Online help Bookmark Sitemap Contact Spesifikasi Produk Search Menu link User account Produk Kategori Home Informasi Logo Gambar 4.12 Desain Halaman Home Search Menu Admin Quick Access Gambar 4.13 Desain Halaman Admin 73 Menu Member account Create account Menu Search Logo Link Menu Gambar 4.14 Desain halaman User Gambar 4.2 : Desain halaman My Videos Home Menu User Account Harga Troli View Harga Troli View Harga Troli View Nama Produk Desk ipsi Produk r Troli Nama Produk Desk ipsi Peoduk r Troli Nama Produk Desk ipsi Produk r Troli Thumbnail Image Thumbnail Image Thumbnail Image Produk kategori Link Menu Search LOGO Gambar 4.15 Desain halaman Produk Kategori 74

4.2.2.7 State Transition Diagram STD

Diagram ini menggambarkan transisi atau perubahan statement yang merupakan keadaan aplikasi yang dipicu oleh adanya aksi yang dilakukan oleh user dan juga mendeskripsikan reaksi terhadap aksi tersebut. Dengan adanya STD, rancangan akan lebih terperinci karena fungsi-fungsi setiap objek yang diperlukan telah dideskripsikan melalui STD. Gambar 4.16 STD Halaman Home Home Klik Home Kembali ke menu Home Klik Produk Baru Tampilkan menu Produk Baru Produk Baru Klik Terlaris Tampilkan menu Terlaris Terlaris Klik Hubungi Tampilkan menu Hubungi Contact Us Klik Account Tampilkan menu Account Account Klik Search Tampilkan menu Search Search Klik Troli Tampilkan menu Troli Klik Kategori Tampilkan menu Kategori Troli Klik Informasi Tampilkan menu Informasi Informasi Kategori Klik Home Tampilkan menu Home 75 Home Informasi Klik Delivery Tampilkan Delivery Delivery Klik FAQ Tampilkan FAQ FAQ Klik Cara Pembelian Tampilkan Cara Pembelian Cara Pembelian Klik Tentang Kami Tampilkan Tentang Kami Tentang Kami Klik Home Tampillkan menu Home Gambar 4.17 STD Halaman Informasi Home Gambar 4.18 STD Halaman Kategori Kategori Sandal Batik Tas Batik Klik Aksesoris Batik Tampilkan Aksesoris Batik Klik Sandal Tas Batik Tampilkan Sandal Tas Batik Sandal Tas Batik Bahan Batik Klik Bahan Batik Tampilkan Bahan Batik Klik Blus Batik Tampilkan Blus Batik Bahan Batik Klik Kemeja Pria Batik Tampilkan Kemeja Pria Batik Kemeja Pria Batik Klik Sackdress Tampilkan Sackdress Sackdress Klik Home Tampilkan Home 76 Home Klik Home Kembali ke menu Home User Account Klik User Account Tampilkan User Account Isi Use Account r Gambar 4.19 STD Halaman user account Gambar 4.20 STD Halaman Search 77

4.2.3 Code Generation Pengkodean

Pada tahap ini penulis melakukan penginstalan prestashop sebagai program utama. Program ini mempunyai kelebihan untuk membuat aplikasi toko online yang kreatif.

4.2.3.1 Instalasi Prestashop

Sebelum melakukan penginstalan prestashop pastikan pada PC atau laptop harus terinstal XAMPP. Langkah-langkah instalasi Prestashop : 1 Download file prestashop versi terbaru http:www.prestashop.comdownloadprestashop_1.2. 5.0.zip . 2 Pada saat download, bisa sekaligus download bahasa yang akan di install pada Prestahop misalnya Bahasa Indonesia. http:www.prestashop.comdownloadlang_packsgzip id.gzip . 3 Ekstrak file Prestashop yang sudah di download pada folder yang sudah ditentukan pada server local misalnya c:\xampp\htdocs\prestashop. 4 Buka browser ketik address http:localhostprestashop , otomatis akan tampil halaman instalasi. Ada dua pilihan bahasa instalasi, pilih English klik next. 78 5 Database Configuration : Buka web browser dan ketik, http:localhostphpmyadmin. 6 Buat database baru dengan nama prestashop, selanjutnya kembali ke instalasi prestashop. Lalu klik verify now . 7 Setelah database telah terhubung, klik next untuk menyelesaikan proses instalasi prestashop. Pada saat akan mengelola Back office caranya adalah sebagai berikut : 1 Buka web browser lalu ketik http:localhostprestashopadmin . 2 Untuk selanjutnya, hapuslah folder install pada c:\xampp\htdocs\prestashop\install dan ganti folder admin menjadi admin2406 sehingga http:localhostprestashopadmin2406 . Seperti terlihat pada gambar di bawah ini : Gambar 4.21 Akses Back office 79