Input fi’il mudhori’ dengan prefix Input fi’il mudhori’ dengan prefix Input fi’il amr dengan dengan prefix Input fi’il amr dengan dengan prefix Input kata dengan fi’il amr dengan dengan prefix Input kata dengan fi’il amr dengan dengan prefix Fase K

127

d. Input fi’il mudhori’ dengan prefix

ت dan dhomir يه  ه START Input Kata ت ت Stem Harakat Cek DB Stemming dhomir Cek DB Tampil ت END Ya Ya Tidak Stemming mudhori ت Cek mudhori Cek DB Cek dhomir Pesan Error Ya Ya Ya Tidak Tidak Tidak Gambar 4.13. Flowchart fi’il mudhori’ dengan prefix ت dan dhomir يه  ه 128

e. Input fi’il mudhori’ dengan prefix

يس suffix نو dan dhomir ه START Input Kata ي َ Stem Harakat Cek DB Stemming Suffix Cek DB Tampil END Ya Ya Tidak Stemming Prefix ي Cek prefix Cek DB Cek suffix Pesan Error Ya Ya Ya Tidak Tidak Cek dhomir Stemming dhomir Cek DB Ya Ya Tidak Tidak Gambar 4.14. Flowchart fi’il mudhori’ dengan dengan prefix يس suffix نو dan dhomir ه 129

3. Fi’il Amr

a. Input fi’il amr dengan dengan prefix

ا dan dhomir ا START Input Kata ا ا Stem Harakat Cek DB Stemming Suffix ا Cek DB Tampil END Ya Ya Tidak Stemming Prefix ا Cek prefix Cek DB Cek suffix Pesan Error Ya Ya Ya Tidak Tidak Tidak Gambar 4.15. Flowchart fi’il amr dengan dengan prefix ا dan dhomir ا 130

b. Input fi’il amr dengan dengan prefix

ف START input kata ف ض Stem Harakat Cek DB Stemming prefix ف Cek DB Tampil ض END Ya Cek prefix Pesan Error Ya Ya Tidak Tidak Tidak Gambar 4.16. Flowchart fi’il amr dengan dengan prefix ف 131

c. Input kata dengan fi’il amr dengan dengan prefix

ا START Input kata ا ع Stem Harakat Cek DB Stemming prefix ا Cek DB Tampil ع END Ya Cek prefix Pesan Error Ya Ya Tidak Tidak Tidak Gambar 4.17. Flowchart fi’il amr dengan dengan prefix ا 132

d. Input kata dengan fi’il amr dengan dengan prefix

ا dan dhomir ا START Input Kata ا ع ا Stem Harakat Cek DB Stemming Suffix ا Cek DB Tampil ع END Ya Ya Tidak Stemming Prefix ا Cek prefix Cek DB Cek suffix Pesan Error Ya Ya Ya Tidak Tidak Tidak Gambar 4.18. Flowchart fi’il amr dengan dengan prefix ا dan dhomir ا 133

e. Input kata dengan fi’il amr dengan dengan prefix

ا START Input kata ا Stem Harakat Cek DB Stemming prefix ا Cek DB Tampil END Ya Cek prefix Pesan Error Ya Ya Tidak Tidak Tidak Gambar 4.19. Flowchart fi’il madhi dengan dengan prefix ا 134

4.2.2. Perancangan Basis Data

Pada tahap perancangan basis data, penulis menggunakan phpMyadmin untuk database. Dalam pembuatan aplikasi ini dibutuhkan beberapa tabel sebagai berikut : 1. Tabel huruf hijaiyah Dalam phpMyadmin huruf arab tidak bisa langsung dikenali oleh komputer, oleh karena itu terlebih dahulu penulis membuat tabel huruf hijaiyah yang berfungsi untuk menunjukkan karakter-karakter untuk penulisan huruf- huruf hijaiyah. Karakter-karakter tersebut ditunjukkan dengan huruf ASCII. Tabel ini memiliki field-field sebagai berikut : 1 id_huruf, type int, lengthvalues 255, auto_increment, sebagai primary key 2 huruf, type varchar, lengthvalues 255, latin1_swedish_ci 3 gundul, type varchar, lengthvalues 255, latin1_swedish_ci 4 keterangan, type varchar, lengthvalues 255, latin1_swedish_ci Tabel 4.2. Field-field tabel huruf Field Type Length Collation id_huruf Int 255 latin1_swedish_ci Huruf Varchar 255 latin1_swedish_ci Gundul Varchar 255 latin1_swedish_ci keterangan Varchar 255 latin1_swedish_ci 135 Gambar 4.20. Tabel Huruf ج – ا 2. Tabel madhi Tabel madhi digunakan untuk menyimpan kata dasar bahasa Arab atau disebut dengan fi’il madhi asli dan fi’il mudhori’ asli Tabel ini memiliki field-field sebagai berikut : 1 Madhi_id, type varchar, lengthvalues 4, utf8_bin, sebagai primary key 136 2 Madhi_gundul, type varchar, lengthvalues 128, utf8_bin 3 madhi, type varchar, lengthvalues 128, utf8_bin 4 madhi_mudhori, type varchar, lengthvalues 256, utf8_bin 5 madhi_wazan_id, type varchar, lengthvalues 2, utf8_bin Tabel 4.3. Field-field Tabel Madhi Field Type Length Collation Madhi_id Varchar 4 Utf8_bin Madhi_gundul Varchar 128 Utf8_bin Madhi Varchar 128 Utf8_bin Madhi_mudhori Varchar 256 Utf8_bin Madhi_wazan Varchar 2 Utf8_bin 137 109 138 3. Tabel tashrif Tabel tashrif digunakan untuk menyimpan perubahan- perubahan kata suatu kata dalam bahasa Arab yang perubahannya dimulai dari fi’il madhi sampai ism alat. Tabel ini memiliki field-field sebagai berikut : 1 tsh_id, type int, lengthvalues 5, auto_increment, sebagai primary key 2 tsh_madhi, type varchar, lengthvalues 128, latin1_swedish_ci 3 tsh_mudhori, type varchar, lengthvalues 128, latin1_swedish_ci 4 tsh_masdar, type varchar, lengthvalues 128, latin1_swedish_ci 5 tsh_masdar_mim, type varchar, lengthvalues 128, latin1_swedish_ci 6 tsh_ism_fail, type varchar, lengthvalues 128, latin1_swedish_ci 7 tsh_ism_maful type varchar, lengthvalues 128, latin1_swedish_ci 8 tsh_amr, type varchar, lengthvalues 128, latin1_swedish_ci 9 tsh_nahi, type varchar, lengthvalues 128, latin1_swedish_ci 10 tsh_ism_zaman, type varchar, lengthvalues 128, latin1_swedish_ci 11 tsh_ism_makan, type varchar, lengthvalues 128, latin1_swedish_ci 12 tsh_ism_alat, type varchar, lengthvalues 128, latin1_swedish_ci 139 Tabel 4.4. Field-field Tabel Tashrif Field Type Length Collation tsh_id Int 5 latin1_swedish_ci tsh_madhi Varchar 128 latin1_swedish_ci tsh_mudhori‟ Varchar 128 latin1_swedish_ci tsh_masdar Varchar 128 latin1_swedish_ci tsh_masdar_mim Varchar 128 latin1_swedish_ci tsh_ism_fail Varchar 128 latin1_swedish_ci Tsh_ism_maful Varchar 128 latin1_swedish_ci tsh_amr Varchar 128 latin1_swedish_ci tsh_nahi Varchar 128 latin1_swedish_ci tsh_ism_zaman Varchar 128 latin1_swedish_ci tsh_ism_makan Varchar 128 latin1_swedish_ci Tsh_ism_alat Varchar 128 latin1_swedish_ci 140 112 141 4. Tabel wazan Tabel wazan digunakan untuk menyimpan wazan-wazan di 6 bab pertama yang ada dalam kitab amtsilatu tasrifiyah. Tabel ini memiliki field-field sebagai berikut : 1 wazan_id, type varchar, lengthvalues 2, latin1_swedish_ci sebagai primary key 2 wazan, type varchar, lengthvalues 256, latin1_swedish_ci Tabel 4.5. Field-field Tabel Wazan Field Type Length Collation wazan_id varchar 2 latin1_swedish_ci Wazan varchar 256 latin1_swedish_ci Gambar 4.23. Tabel Wazan 5. Tabel gbook Tabel gbook digunakan untuk menyimpan nama, alamat email, subjek serta pesan yang user berikan dalam aplikasi web ini. Tabel ini memiliki field-field sebagai berikut : 1 nama, type varchar, lengthvalues 255, latin1_swedish_ci sebagai primary key 2 email, type varchar, lengthvalues 30, latin1_swedish_ci 3 subjek, type varchar, lengthvalues 255, latin1_swedish_ci 142 4 pesan, type varchar, tinytext, latin1_swedish_ci Tabel 4.6. Field-field Tabel Gbook Field Type Length Collation Nama varchar 255 latin1_swedish_ci Email varchar 30 latin1_swedish_ci Subjek Varchar 255 latin1_swedish_ci Pesan tinytext latin1_swedish_ci Gambar 4.24. Tabel Gbook 6. Tabel anggota Tabel anggota digunakan untuk menyimpan data-data user account yang telah mendaftar ke situs aplikasi tasrif istilahi ini. Dimana data-datanya terdiri dari nama, email, userid, dan password. Tabel ini memiliki field-field sebagai berikut : 1 nama, type varchar, lengthvalues 255, latin1_swedish_ci 2 email, type varchar, lengthvalues 255, latin1_swedish_ci 3 userid, type varchar, lengthvalues 255, latin1_swedish_ci, sebagai primary key 4 password, type varchar, lengthvalues 255, latin1_swedish_ci 143 Tabel 4.7. Field-field Tabel Anggota Field Type Length Collation Nama varchar 50 latin1_swedish_ci Email varchar 30 latin1_swedish_ci Userid varchar 30 latin1_swedish_ci Password tinytext 30 latin1_swedish_ci Admin int 2 latin1_swedish_ci Gambar 4.25. Tabel Anggota

4.2.3. Perancangan Antar Muka User Interface

Setelah perancangan basis data dilakukan, langkah selanjutnya adalah melakukan perancangan sistem aplikasi yang nantinya akan diimplementasikan. Pada tahap awal perancangan aplikasi ini dilakukan perancangan antarmuka sistem yang menjelaskan proses transisi dari tiap-tiap modul dalam sistem. Interface tersebut dirancang untuk memberikan kemudahan pengaturan komunikasi antara pemakai dan sistem. Dalam perancangannya interface dirancang sedemikian rupa hingga meliputi langkah awal memasuki sistem, memberikan fasilitas menunjukkan fi’il madhi dan fi’il mudhori’ yang asli dari kata yang diinputkan, memberikan informasi tentang wazan yang 144 sesuai dengan kata yang dimasukkan, serta memberikan fasilitas menampilkan tasrif lengkap dari kata yang diinputkan, selain itu sistem ini juga memberikan fasilitas informasi-informasi penting baik yang berhubungan dengan bahasa Arab, Ilmu Sharaf maupun yang berhubungan dengan sistem.

4.2.3.1. Desain Tampilan Awal

Gambar 4.26. Tampilan Login Keterangan gambar : Tampilan di atas merupakan tampilan awal aplikasi tashrif istilahi pada Ilmu Sharaf. Halaman ini muncul sebagai akses user untuk bisa menggunakan aplikasi tashrif istilahi. Terdiri dari form login dan link menu daftar. Menu Login Footer Scrool Text User Name : Password : Login Reset Belum Jadi Anggota? Daftar 145 Penjelasannya adalah sebagai berikut : a. Form Login memiliki fungsi untuk mengisi status pengguna, dan password yang sudah didaftarkan, agar bisa masuk ke halaman aplikasi tashrif istilahi. b. Link menu daftar memiliki fungsi untuk menampilkan form registrasi user jika belum melakukan registrasi atau pendaftaran. Jika di klik button login maka user akan dibawa ke tampilan index, tetapi apabila pengisian username dan password salah maka user akan diberi pesan “User ID belum terdaftar Back”. Ketika di klik link “Back” user akan dibawa ke tampilan awal. Gambar 4.27. Pesan Gagal Login Jika di klik link daftar, maka user akan dibawa pada tampilan daftar yang berfungsi untuk registrasi user. User ID belum terdaftar Back 146 Gambar 4.28. Tampilan Form Pendaftaran Keterangan gambar : Gambar di atas merupakan gambar tampilan halaman daftar. Halaman ini berisikan form pendaftaran user untuk bisa melakukan login dan masuk ke aplikasi tashrif istilahi. Form pendaftaran antara lain terdiri dari nama lengkap, email, user ID, dan password. Jika sudah melakukan pengisian form maka user bisa klik daftar, bisa diulang untuk melakukan pendaftaran ulang. Berikut adalan tampilan keterangan jika telah sukses melakukan pendaftaran. Form Pendaftaran Footer Scrool Text Login Reset Sudah Jadi Anggota? Login Email : Nama Lengkap : User ID : Password : 147 Gambar 4.29. Tampilan Verifikasi Registrasi Sukses Gambar 4.30. Tampilan Verifikasi Registrasi Gagal Pendaftaran Berhasil, Silahkan Login User ID sudah terdaftar Back 148

4.2.3.2. Desain Tampilan Beranda Home

Gambar 4.31. Tampilan Index Home Keterangan gambar : Pada bagian pilihan menu terdapat enam pilihan menu. Enam pilihan menu tersebut antara lain : a. Button home, memiliki fungsi menampilkan halaman utama. Memiliki link ke halaman lain yaitu informasi tentang Ilmu Sharaf, dan di halaman Ilmu Sharaf memiliki link ke tsulasi mujarrod. b. Button belajar, memiliki fungsi menampilakn halaman belajar sharaf dimana user bisa menemukan fi’il madhi, fi’il mudhori’ asli dari kata yang diinputkan, menemukan wazan yang sesuai dengan kata yang diinputkan, mengetahui tashrif lengkap dari kata yang diinputkan dan Footer Scrool Text Header Home Belajar About Guest Logout Welcome Screen dan Pengantar Aplikasi Tashrif Istilahi pada Ilmu Sharaf berbasis web 149 help berisi informasi tentang cara penggunaan aplikasi tashrif istilahi ini. c. Button about, memiliki fungsi menampilkan halaman about me menampilkan profil dari pembuat aplikasi ini, contact menampilkan informasi kontak dari pembuat aplikasi ini, dan maintenance menampilakan insert, update serta delete yang hanya bisa diakses khusus oleh si admin. d. Button guest, memiliki fungsi menampilakn halaman form guest book yang akan diisi oleh user. e. Button logout, untuk mengakhiri penggunaan aplikasi.

4.2.3.3. Desain Halaman Belajar - Belajar Sharaf

Gambar 4.32. Tampilan Belajar Belajar Sharaf Footer Scrool Text Header Home Belajar About Guest Logout Masukkan Fi’il : Proses 150 Keterangan gambar : Tampilan belajar ini terdiri dari text field yang nantinya akan diisi oleh user dengan fi’il. Kemudian tombol proses akan memproses data yang diinputkan yang nantinya akan membawa user ke tampilan sebagai berikut : Gambar 4.33. Tampilan Belajar2 bentuk asli dari kata yang diinputkan Keterangan gambar : Tampilan belajar2 ini terdiri dari tabel memberikan informasi kepada user tentang fi’il madhi dan fi’il mudhori’ hasil dari kata yang diinputkan, button tampil wazan, dan button tampilkan tashrif lengkap dari kata yang diinputkan. Apabila button tampil wazan di klik, maka akan menghasilkan tampilan sebagai berikut : Scrool Text Header Home Belajar About Guest Logout Bentuk Asli Dari Tampilkan Wazan Dari Tampilkan Tashrif Lengkap Dari Footer 122 151 Gambar 4.34. Tampilan Belajar3 wazan dari kata yang diinputkan Keterangan gambar : Tampilan belajar3 ini terdiri dari tabel memberikan informasi kepada user tentang wazan hasil dari kata yang diinputkan, dan button tampilkan tashrif lengkap dari kata yang diinputkan. Apabila button tampilkan tashrif lengkap di klik, maka akan menghasilkan tampilan sebagai berikut : Scrool Text Header Home Belajar About Guest Logout Wazan Dari Kata Tampilkan Tashrif Lengkap Dari Footer 123 152 Gambar 4.35. Tampilan Belajar4 tashrif lengakap dari kata yang diinputkan Keterangan gambar : Tampilan belajar4 ini terdiri dari tabel memberikan informasi kepada user tentang tashrif lengkap hasil dari kata yang diinputkan. Scrool Text Header Home Belajar About Guest Logout Tashrif Dari Kata Footer 124 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

Gambar 4.54. Tampilan Guest Scrool Text Header Home Belajar About Guest Logout Footer GUEST BOOK Form Guest Book Nama : Email : Subjek : Pesan : Input 172 Keterangan gambar : Tampilan guest memberikan layanan guest book kepada user. Disana terdapat form yang isinya terdiri dari nama, email, subjek dan pesan yang datanya diisikan oleh user.

4.2.4.6. Desain Tampilan Logout

Menu logout ini ada di setiap halaman. Bagi user yang keluar dari aplikasi tashrif istilahi ini maka dia harus mengklik menu logout sehingga muncul tampilan seperti di bawah ini. Gambar 4.55. Tampilan Logout 4.2.4. Perancangan Struktur Menu Struktur menu dibuat untuk melihat keseluruhan kinerja sistem agar lebih mudah untuk dibaca dan dipahami. Berikut adalah rancangan struktur menu yang diusulkan : Anda telah berhasil Logout Silahkan klik disini untuk login kembali 173 Layar utama aplikasi tashrif Login Daftar USER ADMIN Home Belajar About Guest Logout Belajar Sharaf Help About me Contact Home Belajar About Guest Logout Help Balajar sharaf About me Contact Maintenance Insert Update Delete Gambar 4.56. Struktur Menu

4.2.5. State Transition Diagram

State transition diagram dibuat sebagai rancangan gambar transisi atau perubahan keadaan sistem yang disebabkan oelh pengguna serta mendeskripsikan reaksi sistem terhadap aksi yang dilakukan oleh pengguna. Maka dapat disimpulkan bahwa STD menjelaskan cara kerja fungsi-fungsi yang dimiliki tiap menu, selain itu dengan adanya STD ini, fungsi setiap objek menjadi lebih terperinci karena telah dideskripsikan. Berikut adalah rancangan STD yang diusulkan : 174

4.2.5.1. STD untuk halaman Beranda

175

4.2.5.2. STD untuk halaman Ilmu Sharaf

Klik link Ilmu Sharaf Tampilan halaman pengertian sharaf Menu home Halaman Pengertian sharaf Klik link Ilmu Sharaf Tampilan halaman pengertian sharaf Gambar 4.58. STD Halaman Ilmu Sharaf 4.2.5.3. STD untuk halaman Tsulasi mujarrod Klik link tsulasi mujarrod Tampilan halaman fi’il-fi’il tsulasi mujarrod Menu home Klik link Ilmu Sharaf Tampilan halaman pengertian sharaf Halaman fi’il-fi’il tsulasi mujarrod Klik link tsulasi mujarrod Tampilan halaman tsulasi mujarrod Halaman ilmu sharaf Gambar 4.59. STD Halaman Tsulasi Mujarrod 176

4.2.5.4. STD untuk halaman Belajar

Klik menu belajar sharaf Tampilan halaman belajar sharaf Halaman Belajar sharaf Isi form belajar Tampilkan hasil proses Bentuk asli dari kata yang dimasukkan Tampil wazan Tampil tashrif lengkap Gambar 4.60. STD Halaman Belajar 4.2.5.5. STD untuk halaman Help Klik menu help Tampilan halaman help Menu belajar Halaman help Klik menu help Tampilan halaman help Gambar 4.61. STD Halaman Help 148 177

4.2.5.6. STD untuk halaman About me

Klik menu about me Tampilan halaman about me Menu about Halaman about me Klik menu about me Tampilan halaman about me Gambar 4.62. STD Halaman About Me 4.2.5.7. STD untuk halaman Contact Klik menu contact Tampilan halaman contact Menu about Halaman contact Klik menu contact Tampilan halaman contact Gambar 4.63. STD Halaman Contact 178

4.2.5.8. STD untuk halaman maintenance

Klik maintenance Tampilan halaman maintenance maintenance Klik menu update Tampilan halaman update Data tabel madhi Data tabel tashrif Data tabel wazan Update Klik link kembali ke update Tampilan halaman update Klik menu insert Tampilan halaman insert Insert data tabel madhi Insert data tabel tashrif Insert data tabel wazan Pilih link tabel madhitabel tashriftabel wazan isi form insert tabel madhitabel tashriftabel wazan Tampilan halaman insert tabel madhi Insert Klik link kembali ke insert Tampilan halaman insert Klik menu delete Tampilan halaman delete Delete Klik link kembali ke delete Tampilan halaman delete Pilih link tabel madhitabel tashriftabel wazan isi form ubah tabel madhitabel tashriftabel wazan Tampilan halaman ubah tabel madhi Pilih link tabel madhitabel tashriftabel wazan Hapus data di tabel madhitabel tashriftabel wazan Tampilan halaman delete tabel madhi Data tabel madhi Data tabel tashrif Data tabel wazan Gambar 4.64. STD Halaman Maintenance 4.2.5.9. STD untuk halaman Guest Klik menu buku tamu Tampilan halaman buku tamu Halaman buku tamu Isi form buku tamu dan klik kirim Tampilkan isi komentar Daftar komentar Gambar 4.65. STD Halaman Guest 179

4.2.5.10. STD untuk halaman Login

Login gagal Tampilkan halaman login Login ADMIN USER Klik daftar Tampilkan halaman dafatar Klik login berhasil Tampilkan halaman beranda HOME Klik login berhasil Tampilkan halaman beranda HOME Belajar About Home Guest Logout About Belajar Home Guest Logout Form daftar Belajar sharaf Help About me Contact Maintenance Insert Update Delete Belajar sharaf Help About me Contact Gambar 4.66. STD Halaman Login

4.3. Fase Konstruksi

Dalam tahap ini dilakukan pengkodean terhadap rancangan- rancangan yang telah didefinisikan sebelumnya. Pengkodean sistem dilakukan dengan menggunakan bahasa pemrograman php, sehingga aplikasi ini disebut juga sebagai aplikasi yang berbasis web. Untuk desain tampilan web dalam aplikasi ini, penulis menggunakan tools Macromedia Dreamweaver dan Apache untuk web server-nya. Adapun baris kode program yang penulis buat dapat dilihat pada bagian lampiran dari skripsi ini. 180

4.4. Fase Pelaksanaan