Perancangan Antar Muka Modelling

4. Antar Muka Tampil Penjualan Gambar 4.13 merupakan tampilan untuk menampilkan data penjualan yang telah dimasukkan ke dalam database Gambar 4.13 Gambar Antar Muka Halaman Tampil Penjualan Printer 5. Antar Muka Tambah Penjualan Gambar 4.14 merupakan tampilan untuk menambahkan penjualan printer ke dalam database Gambar 4.14 Gambar Antar Muka Halaman Tambah Penjualan Printer HEADER Foot er Tabel Penjualan M enu bar Navigasi HEADER Foot er Form t ambah penjualan M enu bar Navigasi 6. Antar Muka Edit Penjualan Gambar 4.15 merupakan tampilan untuk merubah data penjualan printer yang telah masuk ke dalam database Gambar 4.15 Gambar Antar Muka Halaman Edit Penjualan Printer 7. Antar muka import from xls Gambar 4.16 merupakan tampilan untuk merubah dan mengimport data penjualan yang berekstensi xls menjadi sql Gambar 4.16 Gambar Antar Muka Halaman Import Data Penjualan dari Excel HEADER Foot er Form import dari excel M enu bar Navigasi HEADER Foot er Form edit penjualan M enu bar Navigasi 8. Antar Muka Tampil Dealer Gambar 4.17 merupakan tampilan untuk menampilkan data dealer yang telah terdaftar dalam database Gambar 4.17 Gambar Antar Muka Halaman Tampil Dealer 9. Antar Muka Tambah Dealer Gambar 4.18 merupakan tampilan untuk menambahkan dealer baru ke dalam database Gambar 4.18 Gambar Antar Muka Halaman Tambah Dealer HEADER Foot er Tabel Dealer M enu bar Navigasi HEADER Foot er Form t ambah dealer M enu bar Navigasi 10. Antar Muka Halaman Edit Dealer Gambar 4.19 merupakan tampilan untuk merubah data dealer yang telah terdaftar di dalam database Gambar 4.19 Gambar Antar Muka Halaman Edit Dealer 11. Antar Muka Halaman Tampil Printer Gambar 4.20 merupakan tampilan untuk menampilkan data printer yang telah di daftarkan ke dalam database Gambar 4.20 Gambar Antar Muka Halaman Tampil Printer HEADER Foot er Form edit dealer M enu bar Navigasi HEADER Foot er Tabel Print er M enu bar Navigasi 12. Antar Muka Halaman Tambah Printer Gambar 4.21 merupakan tampilan untuk menambah data printer ke dalam database Gambar 4.21 Gambar Antar Muka Halaman Tambah Tipe Printer 13. Antar Muka Edit Printer Gambar 4.22 merupakan tampilan untuk merubah data printer yang telah terdaftar dalam database Gambar 4.22 Gambar Antar Muka Halaman Edit Tipe Printer HEADER Foot er Form t ambah print er M enu bar Navigasi HEADER Foot er Form edit print er M enu bar Navigasi 14. Antar Muka Halaman Tampil Kota Gambar 4.23 merupakan tampilan untuk menampilkan data kota yang telah terdaftar dalam database Gambar 4.23 Gambar Antar Muka Halaman Tampil Kota 15. Antar Muka Tambah Kota Gambar 4.24 merupakan tampilan untuk menambahkan data kota ke dalam database Gambar 4.24 Gambar Antar Muka Halaman Tambah Kota HEADER Foot er Tabel Kot a M enu bar Navigasi HEADER Foot er Form t ambah kot a M enu bar Navigasi 16. Antar Muka Edit Kota Gambar 4.25 merupakan tampilan untuk merubah data kota yang telah terdaftar dalam database Gambar 4.25 Gambar Antar Muka Halaman Edit Kota 17. Antar Muka User Management Gambar 4.26 merupakan tampilan untuk menampilkan user yang memiliki hak untuk mengakses control panel aplikasi Gambar 4.26 Gambar Antar Muka Halaman User Management HEADER Foot er Form edit kot a M enu bar Navigasi HEADER Foot er Tabel User M enu bar Navigasi 18. Antar Muka Tambah User Gambar 4.27 merupakan tampilan untuk menambah user baru Gambar 4.27 Gambar Antar Muka Halaman Tambah User 19. Antar Muka Edit User Gambar 4.28 merupakan tampilan untuk merubah data user Gambar 4.28 Gambar Antar Muka Halaman Edit User HEADER Foot er Form t ambah user M enu bar Navigasi HEADER Foot er Form edit user M enu bar Navigasi 20. Antar Muka Halaman Report Gambar 4.29 Merupakan tampilan untuk menampilkan grafik penjualan printer Gambar 4.29 Gambar Antar muka Halaman Report 21. Antar Muka Halaman Page Gambar 4.30 merupakan tampilan untuk menampilkan halaman yang ada pada front end aplikasi Gambar 4.30 Gambar Antar Muka Halaman Page M enu bar HEADER Foot er Tabel page Navigasi Menu bar HEADER Foot er Grafik penjualan print er M enu bar Navigasi 22. Antar Muka Halaman Tambah Page Gambar 4.31 merupakan form untuk menambah halaman pada front end aplikasi Gambar 4.31 Gambar Antar Muka Halaman Tambah Page 23. Antar Muka Halaman Edit Page Gambar 4.32 merupakan form untuk merubah halaman pada front end aplikasi Gambar 4.32 Gambar Antar Muka Halaman Edit Page HEADER Foot er Navigasi Menu bar HEADER Foot er Navigasi Menu bar 24. Antar Muka Halaman Article Gambar 4.33 merupakan tampilan untuk menampilkan halaman yang ada pada front end aplikasi Gambar 4.33 Gambar Antar Muka Halaman Article 25. Antar Muka Halaman Tambah Article Gambar 4.34 merupakan form untuk menambah aricle pada front end aplikasi Gambar 4.34 Gambar Antar Muka Halaman Tambah Article M enu bar HEADER Foot er Tabel page Navigasi Menu bar HEADER Foot er Menu bar Edit or Text edit or 26. Antar Muka Halaman Edit Article Gambar 4.35 merupakan form untuk merubah article pada front end aplikasi Gambar 4.35 Gambar Antar Muka Halaman Edit Article 27. Antar Muka Halaman Daftar Garansi Gambar 4.36 merupakan tampilan untuk user medaftarkan printer yang telah dibeli Gambar 4.36 Gambar Antar Muka Halaman Daftar Garansi HEADER Foot er Form daft ar garansi M enu bar Navigasi HEADER Foot er Test editor Menu bar Edit or 28. Antar Muka Halaman Lihat Garansi Gambar 4.37 merupakan tampilan untuk melihat masa garansi yang telah didaftarkan oleh pembeli atau dealer Gambar 4.37 Gambar Antar Muka Halaman Lihat Garansi 29. Antar Muka Halaman Home Front End Gambar 4.38 merupakan tampilan untuk menampilkan artikel yang berada di halaman Home Gambar 4.38 Gambar Antar Muka Halaman Home Front End HEADER Foot er Form lihat masa garansi M enu bar Navigasi HEADER Foot er Art ikel Home M enu bar 30. Antar Muka Halaman About Us Gambar 4.39 merupakan tampilan untuk menampilkan artikel yang ada pada halaman About Us Gambar 4.39 Gambar Antar Muka Halaman About Us 31. Antar Muka Halaman FAQ Gambar 4.40 merupakan tampilan untuk menampilkan artikel yang ada pada halaman FAQ Gambar 4.40 Gambar Antar Muka Halaman FAQ HEADER Foot er Art ikel About Us M enu bar HEADER Foot er Art ikel FAQ M enu bar 32. Antar Muka Halaman Contact Us Gambar 4.41 merupakan tampilan untuk menampilkan artikel yang ada pada halaman Contact Us Gambar 4.41 Gambar Antar Muka Halaman Contact Us

4.2.4 Deployment

Pada tahap deployment yang merupakan fase penyebaran ini, dilakukan proses penerapan pemodelan yang ada pada tahap modelling ke dalam sistem aplikasi. Sesuai dengan model dan tujuan sistem yaitu aplikasi berbasis web, rancang bangun antar muka aplikasi dibuat menggunakan bahasa pemograman yang dapat dibuka pada aplikasi browser, seperti HTML, PHP, dan Javascript. Untuk listing kode pemrograman dapat dilihat pada lampiran a.

4.2.4.1 Antar muka Perangkat Lunak

Berikut tampilan antar muka yang dirancang, yang disesuaikan dengan rancangan : HEADER Foot er Art ikel Cont act Us M enu bar 1. Tampilan Awal Backend Aplikasi Gambar 4.42 Gambar Halaman Awal Backend 2. Tampilan Home Backend Gambar 4.43 Gambar Halaman Home Backend 3. Tampilan Halaman Lihat Data Customer Gambar 4.44 Gambar Halaman Lihat data Customer 4. Tampilan Halaman Tambah Penjualan Gambar 4.45 Gambar Halaman Tambah Data Penjualan