BAB IV Perancangan program dan implementasi
PERANCANGAN PROGRAM DAN IMPLEMENTASI
4.2.3. Perancangan Antar Muka (User Interface)
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 :
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
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
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
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_mudhori’, 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_mudhori’, 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 :
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 :
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
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_mudhori’, 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
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
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_mudhori’, 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 :
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
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
168
Tampilan delete data ke tabel madhi
Gambar 4.51. Tampilan Delete(tabel 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_mudhori’, 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
169
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_mudhori’, 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).