Desain Halaman About Perancangan Antar Muka User Interface

153 - Tampilan Belajar Help Gambar 4.36. Tampilan Belajar Help Keterangan gambar : Tampilan help ini memberikan informasi tentang tata cara penggunaan aplikasi ini.

4.2.3.4. Desain Halaman About

Di menu about ini, terdiri dari halaman about me, contact dan maintenance. Rancangan tampilannya adalah sebagai berikut : Scrool Text Header Home Belajar About Guest Logout Cara Penggunaan Aplikasi ini Adalah Sebagai Berikut : Footer 125 154 - Tampilan About Me Gambar 4.37. Tampilan About about me Keterangan gambar : Tampilan about me ini memberikan informasi tentang profil pembuat aplikasi. Scrool Text Header Home Belajar About Guest Logout Profil Pembuat Aplikasi Tashrif Istilahi Footer 126 155 - Tampilan Contact Gambar 4.38. Tampilan About contact Keterangan gambar : Tampilan contact ini memberikan informasi tentang kontak pembuat aplikasi. Scrool Text Header Home Belajar About Guest Logout Contact Footer 127 156 - Tampilan Maintenance Menu maintenance ini hanya dapat diakses oleh admin. Di dalam menu ini terdapat layanan untuk insert, update dan delete data. Gambar 4.39. Tampilan Maintenance insert Keterangan gambar : Tampilan maintenance insert ini memberikan layanan kepada si admin untuk insert data baru. Disana terdapat tiga link, yang pertama adalah untuk insert data ke tabel madhi, kedua insert data ke tabel tashrif dan yang ketiga insert data ke tabel wazan. Scrool Text Header Home Belajar About Guest Logout Footer INSERT Tabel Madhi Tabel Tashrif Tabel Wazan 128 157  Tampilan insert data ke tabel madhi Gambar 4.40. Tampilan Insert tabel madhi Keterangan gambar : Tampilan insert tabel madhi ini memberikan layanan kepada si admin untuk insert data baru di tabel madhi. Disana terdapat form yang isinya terdiri dari madhi_id, madhi_gundul, madhi, madhi_mudh ori’, dan madhi_wazan_id dimana apabila data-data tersebut diisi dan di klik button tambah maka data yang ada di tabel madhi akan bertambah. Kemudian, ada sebuah link “kembali ke insert ” yang mana admin akan dibawa ke tampilan maintenance insert. DATA TABEL MADHI Kembali ke insert Form Tambah Data madhi_id : madhi _gundul : madhi : madhi_mudhori : madhi_wazan_id : Tambah 158  Tampilan insert data ke tabel tashrif Gambar 4.41. Tampilan Insert tabel tashrif Keterangan gambar : Tampilan insert tabel tashrif ini memberikan layanan kepada si admin untuk insert data baru di tabel tashrif. Disana terdapat form yang isinya terdiri dari tsh_madhi, tsh_mudh ori’, tsh_masdar, tsh_masdar_mim, tsh_ism_fail, tsh_ism_maful, tsh_amr, DATA TABEL TASHRIF Kembali ke insert Form Tambah Data tsh_madhi : tsh_mudhori : tsh_masdar : tsh_masdar_mim : tsh_ism_fail : Tambah tsh_ism_maful : tsh_nahi : tsh_ism_makan : tsh_ism_zaman : tsh_ism_alat : tsh_amr : 130 159 tsh_nahi, tsh_ism_zaman, tsh_ism_makan, tsh_ism_alat dimana apabila data-data tersebut diisi dan di klik button tambah maka data yang ada di tabel tashrif akan bertambah. Kemudian, ada sebuah link “kembali ke insert” yang mana admin akan dibawa ke tampilan maintenance insert.  Tampilan insert data ke tabel wazan Gambar 4.42. Tampilan Insert tabel madhi Keterangan gambar : Tampilan insert tabel wazan ini memberikan layanan kepada si admin untuk insert data baru di tabel wazan.. Disana terdapat form yang isinya terdiri dari wazan_id, wazan dan wazan dimana apabila data-data tersebut diisi dan di klik button tambah maka data yang ada di tabel wazan akan bertambah. Kemudian, ada sebuah link “kembali ke insert” yang mana admin akan dibawa ke tampilan maintenance insert. DATA TABEL WAZAN Kembali ke insert Form Tambah Data wazan_id : wazan : Tambah 160 Gambar 4.43. Tampilan Maintenance update Keterangan gambar : Tampilan maintenance update ini memberikan layanan kepada si admin untuk update data baru. Disana terdapat tiga link, yang pertama adalah untuk update data ke tabel madhi, kedua update data ke tabel tashrif dan yang ketiga update data ke tabel wazan. Scrool Text Header Home Belajar About Guest Logout Footer UPDATE Tabel Madhi Tabel Tashrif Tabel Wazan 132 161  Tampilan update data ke tabel madhi Gambar 4.44. Tampilan Update tabel madhi Keterangan gambar : Tampilan update data tabel madhi ini memberikan layanan kepada si admin untuk update data baru di tabel madhi. Disana terdapat form yang isinya terdiri dari madhi_id, madhi_gundul, madhi, madhi_mudh ori’, madhi_wazan_id dan link ubah. dimana apabila link ubah di klik maka admin akan dibawa ke tampilan form ubah seperti yang ada pada gambar di bawah ini. DATA TABEL MADHI Kembali ke Update madhi_id madhi_gundul madhi Madhi_mudhori Madhi_wazan_id ubah m001 ي 1 ubah m002 ي 2 ubah m003 عش ع ش ع ش ي 1 ubah m004 ي 2 ubah m005 ع ع ع ي 4 ubah 162 Gambar 4.45. Tampilan Form Ubah tabel madhi Keterangan gambar : Tampilan form ubah tabel madhi ini memberikan layanan kepada si admin untuk update data. Data-data sebelumnya akan ada di form secara otomatis sesuai pilihan dari link sebelumnya. Ketika data sudah diupdate maka klik tombol ubah, maka data yang ada di tabel madhi secara otomatis akan berubah. Dan admin akan dibawa ke tampilan update data tabel madhi. Disana terdapat sebuah link “kembali ke update” yang bisa membawa admin kembali ke tampilan maintenance update. DATA TABEL MADHI Form Ubah Tabel Madhi madhi_id : madhi _gundul : madhi : madhi_mudhori : madhi_wazan_id : Ubah m001 ي 1 163  Tampilan update data ke tabel tashrif 164 Keterangan gambar : Tampilan update data tabel tashrif ini memberikan layanan kepada si admin untuk update data baru di tabel tashrif. Disana terdapat form yang isinya terdiri dari tsh_madhi, tsh_mudh ori’, tsh_masdar, tsh_masdar_mim, tsh_ism_fail, tsh_ism_maful, tsh_amr, tsh_nahi, tsh_ism_zaman, tsh_ism_makan, tsh_ism_alat dan link ubah. dimana apabila link ubah di klik maka admin akan dibawa ke tampilan form ubah seperti yang ada pada gambar di bawah ini. Gambar 4.47. Tampilan Form Ubah tabel tashrif DATA TABEL TASHRIF Form Ubah Tabel Tashrif tsh_id : tsh _madhi : tsh_mudhori : tsh_masdar : tsh_masdar_mim : Ubah 1 ي ا ا ف ا ت ا tsh_ism_fail : tsh_ism_maful : tsh_amr : tsh_nahi : tsh_isim_zaman : tsh_ism_ makan : tsh_alat : 136 165 Keterangan gambar : Tampilan form ubah tabel tashrif ini memberikan layanan kepada si admin untuk update data. Seperti pada form ubah tabel madhi dpada form ubah tabel tashrif ini data-data sebelumnya akan ada di form secara otomatis sesuai pilihan dari link sebelumnya. Ketika data sudah diupdate maka klik tombol ubah, maka data yang ada di tabel tashrif secara otomatis akan berubah. Dan admin akan dibawa ke tampilan update data tabel madhi. Disana terdapat sebuah link “kembali ke update” yang bisa membawa admin kembali ke tampilan maintenance update.  Tampilan update data ke tabel wazan Gambar 4.48. Tampilan Update tabel wazan DATA TABEL WAZAN Kembali ke Update wazan_id wazan ubah 1 ع ف __ ع ي ubah 2 ع ف __ ع ي ubah 3 ع ف __ ع ي ubah 4 ع ف __ ع ي ubah 5 ع ف __ ع ي ubah 6 ع ف __ ع ي ubah 166 Keterangan gambar : Tampilan update data tabel wazan ini memberikan layanan kepada si admin untuk update data baru di tabel wazan. Disana terdapat form yang isinya terdiri dari wazan_id, wazan dan link ubah. dimana apabila link ubah di klik maka admin akan dibawa ke tampilan form ubah seperti yang ada pada gambar di bawah ini. Gambar 4.49. Tampilan Form Ubah tabel wazan Keterangan gambar : Tampilan form ubah tabel wazan ini memberikan layanan kepada si admin untuk update data. Data-data sebelumnya akan ada di form secara otomatis sesuai pilihan dari link sebelumnya. Ketika data sudah diupdate maka klik tombol ubah, maka data yang ada di tabel wazan secara otomatis akan berubah. Dan admin akan dibawa ke tampilan update data tabel wazan. Disana terdapat sebuah link “kembali ke DATA TABEL WAZAN Form Ubah Tabel Wazan wazan_id : wazan : Ubah W1 138 167 update” yang bisa membawa admin kembali ke tampilan maintenance update. Gambar 4.50. Tampilan Maintenance delete Keterangan gambar : Tampilan maintenance delete ini memberikan layanan kepada si admin untuk delete atau menghapus data. Disana terdapat tiga link, yang pertama adalah untuk delete data ke tabel madhi, kedua delete data ke tabel tashrif dan yang ketiga delete data ke tabel wazan. Scrool Text Header Home Belajar About Guest Logout Footer DELETE Tabel Madhi Tabel Tashrif Tabel Wazan 139 168  Tampilan delete data ke tabel madhi Gambar 4.51. Tampilan Deletetabel madhi Keterangan gambar : Tampilan delete data tabel madhi ini memberikan layanan kepada si admin untuk delete atau menghapus data di tabel madhi. Disana terdapat form yang isinya terdiri dari madhi_id, madhi_gundul, madhi, madhi_mudh ori’, madhi_wazan_id dan link hapus. dimana apabila link hapus di klik maka data yang ada di kolom tersebut otomatis akan terhapus. Di halaman ini terdapat link “Kembali ke Update ”. Apabila link ini di klik maka admin akan dibawa kembali ke halaman maintenance delete. DATA TABEL MADHI Kembali ke Update madhi_id madhi_gundul madhi Madhi_mudhori Madhi_wazan_id hapus m001 ي 1 hapus m002 ي 2 hapus m003 عش ع ش ع ش ي 1 hapus m004 ي 2 hapus m005 ع ع ع ي 4 hapus 169  Tampilan delete data ke tabel tashrif 170 Keterangan gambar : Tampilan delete data tabel tashrif ini memberikan layanan kepada si admin untuk delete atau menghapus data di tabel tashrif. Disana terdapat form yang isinya terdiri dari tsh_madhi, tsh_mudh ori’, tsh_masdar, tsh_masdar_mim, tsh_ism_fail, tsh_ism_maful, tsh_amr, tsh_nahi, tsh_ism_zaman, tsh_ism_makan, tsh_ism_alat dan link hapus. dimana apabila link hapus di klik maka data yang ada di kolom tersebut otomatis akan terhapus. Di halaman ini terdapat link “Kembali ke Update”. Apabila link ini di klik maka admin akan dibawa kembali ke halaman maintenance delete.  Tampilan delete data ke tabel wazan Gambar 4.53. Tampilan Delete tabel wazan DATA TABEL WAZAN Kembali ke Update wazan_id wazan hapus 1 ع ف __ ع ي hapus 2 ع ف __ ع ي hapus 3 ع ف __ ع ي hapus 4 ع ف __ ع ي hapus 5 ع ف __ ع ي hapus 6 ع ف __ ع ي hapus 171 Keterangan gambar : Tampilan delete data tabel wazan ini memberikan layanan kepada si admin untuk delete atau menghapus data di tabel madhi. Disana terdapat form yang isinya terdiri dari wazan_id, wazan dan link hapus. dimana apabila link hapus di klik maka data yang ada di kolom tersebut otomatis akan terhapus. Di halaman ini terdapat link “Kembali ke Update”. Apabila link ini di klik maka admin akan dibawa kembali ke halaman maintenance delete.

4.2.4.5. Desain Halaman Guest