BAB III ANALISA DAN PERANCANGAN

Transkripsi

1 38 BAB III ANALISA DAN PERANCANGAN 3.1 Analisis Seperti langkah-langkah yang dilakukan pada salah satu model proses rekayasa perangkat lunak yaitu model waterfall, maka pada bab ini akan dibahas tentang tahap-tahap dalam membangun perangkat lunak. Proses analisis merupakan salah satu tahapan yang harus dilalui rekayasa piranti lunak karena melalui analisis definisi masalah menjadi lebih jelas, kebutuhan sistem dapat dispesifikasi sehingga kriteria yang harus dipenuhi sistem dapat ditentukan supaya sistem yang dihasilkan nantinya dapat menjadi solusi dari masalah tersebut. 3.2 Perancangan Aplikasi Agar aplikasi ini mudah dipahami penulis membuat Pemodelan Diagram Use Case untuk menunjukan fungsionalitas suatu sistem. Pemodelan Diagram Sequence untuk menggambarkan interaksi antar objek di dalam dan di sekitar sistem, Pemodelan Diagram aktifitas unutk mengurutkan aktifitas dalam suatu proses Pemodelan Diagram Use Case Use case adalah menjelaskan manfaat sistem jika dilihat menurut pandangan orang yang berada di luar sistem (actor), diagram use case juga menunjukan fugsionalitas suatu sistem atau kelas dan bagaimana sistem berinteraksi dengan dunia luar. Secara umum pemodelan use case pada aplikasi ini dapat dilihat pada Gambar 3.1

2 39 Menampilkan Halaman Memilih menu yang telah disediakan User Memilih Pertanyaan tentang Haji Melihat Data Hasil Latihan <<include>> <<include>> <<include>> Melakukan Latihan <<include>> Login <<include>> Mengelola Data User Admin Mengelola data soal <<include>> <<include>> Mengelola data admin Gambar 3.1 Diagram Use case aplikasi Pedoman Ibadah Haji Berbasis Web Penjelasan dari masing-masing use case dari Gambar 3.1 dapat dilihat pada skenario berikut ini: A. Sisi Admin Berikut ini adalah keterangan dari use case yang dilakukan oleh Admin 1. Nama Use Case : Login Aktor Deskripsi : Admin : Admin harus melakukan login terlebih dahulu sebelum mengubah data yang terdapat pada basis data. 2. Nama Use Case : Mengelola data user

3 40 Aktor Deskripsi : Admin : Admin dapat melihat daftar user yang sudah terdaftar. Admin juga bisa mengubah atau menghapus data User. 3. Nama Use Case : Mengelola data soal Aktor Deskripsi : Admin : Admin dapat menambah, mengubah, menghapus data soal. B. Sisi User Berikut ini adalah keterangan dari use case yang dilakukan oleh User 1. Nama Use Case : Menampilkan Halaman Aplikasi Aktor Deskripsi : User : Use Case ini memungkinkan user untuk melihat halaman aplikasi tanpa login terlebih dahulu. 2. Nama Use Case : Melakukan Registrasi Aktor Deskripsi : User : User terlebih dahulu harus melakukan registrasi (daftar) untuk mendapatkan username dan password yang bisa di gunakan untuk login. Dan setelah mengisi data-data yang terdapat pada form daftar maka sistem akan menyimpan dalam basis data. Dan User bisa langsung login dengan menggunakan username dan password yang telah terdaftar. 3. Nama Use Case : Login Aktor : User

4 41 Deskripsi : Use Case ini seorang User harus login terlebih dahulu untuk menggunakan aplikasi ini. Dengan cara memasukkan username dan password 4. Nama Use Case : Memilih link menu Aktor Deskripsi : User : Use Case ini User dapat memilih salah sati link menu yang telah disediakan. 5. Nama Use Case : Memilih Pertanyaan tentang haji Aktor Deskripsi : User : Use Case ini User dapat memilih beberapa pertanyaan 6. Nama Use Case : Melihat Data Hasil Latihan Aktor Deskripsi : User : Use Case ini aplikasi akan menampilkan data hasil latihan yang telah User lakukan. 7. Nama Use Case : Melakukan Latihan Aktor Deskripsi : User : Use Case ini User memulai latihan sesuai dengan pertanyaan yang dipilih oleh User Diagram Aktifitas Diagram Aktifitas adalah digram yang menggambarkan sebuah skema aktifitas yang terjadi di dalam penggunaan aplikasi tersebut. Diagram Aktifitas ( Activity diagram ) mempunyai peran seperti halnya flowchart, akan tetapi

5 42 perbedaanya dengan flowchart adalah Diagram Aktifitas mendukung perilaku parallel sedangkan flowchart tidak bisa. (munawar, 2005:109) Diagram Aktifitas Home User Sistem Memilih halaman Aplikasi Menampilkan halaman Aplikasi Gambar 3.2 Diagram Aktifitas Home Pada gambar 3.2 menunjukkan diagram aktifitas pada menu home dimana pada state awal pengguna memilih link menu home dan kemudian sistem akan menampilkan menu home tersebut setelah itu selesai pada state akhir Diagram Aktifitas Pendaftaran Untuk dapat login dan menggunakan aplikasi ini, user harus terlebih dahulu mendaftarkan dirinya pada form pendaftaran. Pada form pendaftaran

6 43 terdapat beberapa data yang harus diisi oleh user, serta terdapat captcha yang harus disalin oleh user dengan benar. Berikut ini adalah gambar diagram aktifitas pendaftaran. User Sistem Memilih halaman Pendaftaran Menampilkan halaman Pendaftaran Mengisi Form Pendaftaran Dan validasi captcha Melakukan pemeriksaan [validasi captcha gagal] [data tidak lengkap] Menampilkan pesan bahwa validasi captcha gagal Menampilkan pesan bahwa data tidak lengkap [data lengkap dan validasi captcha berhasil] Menyimpan data user ke dalam database Gambar 3.3 Diagram Aktifitas Pendaftaran

7 Diagram Aktifitas Login User Setelah user melakukan pendaftaran selanjutnya user dapat Melakukan login dengan mengunakan username dan password yang telah di input pada saat pendaftaran. Berikut diagram aktifitas login user. User Sistem Menampilkan Form Login Mengisi Username dan Password Melakukan Pemeriksaan ke basisdata Menampilkan Pesan bahwa username atau password tidak valid [ Salah ] [ Benar ] Menampilkan Halaman User Gambar 3.4 Diagram Aktifitas Login User Pada diagram aktifitas di atas menunjukkan aktifitas login yang dilakukan oleh user. ketika user memasukkan username dan password, maka sistem akan

8 45 memeriksa apakah username dan password yang di masukkan valid, jika valid maka sistem akan menampilkan halaman user, dan jika username serta password yang di masukkan tidak valid maka sistem akan menampilkan pesan bahwa username atau password yang di masukkan tidak valid atau salah dan user harus memasukkan kembali username dan password yang valid Diagram Aktifitas Memilih Link Menu User Sistem Menampilkan Halaman Menu Haji Memilih salah satu link Menu Menampilkan Menu yang dipilih Gambar 3.5 Diagram Aktifitas Memilih Link Menu

9 46 Pada gambar 3.5 diagram aktifitas Memilih Link Menu ini menggambarkan aktifitas user dimana user dapat memilih salah satu link Menu yang telah disediakan oleh Admin Diagram Aktifitas Lihat Hasil Latihan User Sistem memilih menu untuk melihat hasil latihan Menampilkan nilai hasil latihan Melihat Nilai Hasil Latihan Gambar 3.6 Diagram Aktifitas Melihat Data Hasil Latihan Pada diagram 3.6 menunjukan diagram aktifitas pada halaman user pada menu lihat nilai. Pada halaman ini user dapat melihat nilai hasil latihan yang pernah user lakukan.

10 Diagram Aktifitas Latihan Soal User Sistem Menjawab soal latihan Menampilkan latihan soal Cek jawaban user Salah Benar Tampil Nilai Gambar 3.7 Diagram Aktifitas Latihan Pada gambar 3.7 menunjukan diagram aktifitas latihan soal. di halaman ini user dapat melakukan latihan dengan mengerjakan soal-soal yang ditampilkan oleh sistem. Untuk menjelaskan aktifitas pada halaman latihan ini, perhatikan flowchart dibawah ini.

11 48 Mulai Menentukan jenis soal Menampilkan soal satu persatu Ya Menentukan jawaban tidak Tampil hasil jawaban Ya Simpan hasil Nilai Tampil tabel nilai Selesai Gambar 3.8 flowchart Latihan Gambar 3.8 merupakan gambar dari flowchart latihan. Setelah user memilih salah satu jenis soal yang di inginkan, selanjutnya sistem akan menampilkan soal-soal. Kemudian user mulai menjawab soal-soal yang telah ditampilkan. Setelah menjawab soal yang telah dikerjakan, Sistem akan menyimpan nilai kedalam database.

12 Diagram Aktifitas Login Admin User Sistem Menampilkan Form Login Mengisi Username dan Password Melakukan Pemeriksaan ke basisdata Menampilkan Pesan bahwa username atau password tidak valid [ Salah ] [ Benar ] Menampilkan Halaman Admin Mengelola data user Update data user Gambar 3.9 Diagram Aktifitas Login Admin

13 50 Untuk dapat mengelola data user, seorang admin perlu login terlebih dahulu.pada saat melakukan login admin memasukan username dan password. Jika username dan password benar, maka sistem akan menampilkan halaman utama administrator yang digunakan untuk mengelola data user. seorang admin dapat melakukan membaca, memperbaharui ataupun menghapus data user yang ada pada basis data Diagram Sequence Diagram Sequence digunakan untuk mengambarkan perilaku pada sebuah skenario. Diagram ini menunjukan sejumlah contoh objek dan message (pesan) yang diletakan diantara obyek-obyek ini di dalam use case. Sequence diagram memperlihatkan tahap demi tahap apa yang seharusnya terjadi untuk menghasilkan sesuatu di dalam use case. Pada aplikasi ini terdapat dua buah aktor yaitu user dan admin. Dari use case yang sudah dijelaskan diatas maka penulis dapat pula menggambarkan diagram sequence yang sesuai melalui seperti berikut ini Diagram Sequence Home < User Menu utama Proses sistem Sub menu home Menuju menu utama Mengakses menu home Menjalankan akses ke sub menu home Gambar 3.10 Diagram Sequence Home

14 51 Pada Gambar 3.10 Seorang aktor dapat mengakses link menu home yang terdapat pada halaman menu utama aplikasi. Pada halaman menu home, aktor dapat melihat tampilan dari hasil proses yang telah dipilih Diagram Sequence Pendaftaran Pada diagram Sequence pendaftaran dapat diketahui bahwa event yang pertama terjadi yaitu siswa mengakses menu pendaftaran dan kemudian sistem akan menampilkan halaman daftar yang berisi form input pendaftaran, setelah itu user dapat memasukan data user sesuai yang terdapat pada form pendaftaran, sistem akan menerima masukan data dari user dan akan menyimpan data pendaftaran tersebut kedalam basis data. Lalu user dapat login mengunakan username dan password yang telah di input. Berikut ini adalah gambar dari diagram sequence pendaftaran. < user Menu utama Form pendaftaran Validasi data dan Data User captcha Mengakses menu pendaftaran Memasukkan data user periksa data dan captcha Validasi captcha gagal Kembali Mengisi form pendaftaran Validasi data dan captcha berhasil Data disimpan kedalam basisdata User mendapatkan username dan password untuk login Gambar 3.11 Diagram Sequence Pendaftaran Diagram Sequence Login Diagram sequence login menggambarkan skenario yang dilakukan antara user dan sistem pada saat user ingin masuk kedalam aplikasi.

15 52 < user Form login Validasi username dan password Data User Halaman user Memasukkan username dan password periksa username dan password Meminta data username dan password Validasi username dan password gagal Kembali Mengisi form login Mengirim data username dan password Validasi data username dan password berhasil Gambar 3.12 Diagram Sequence Login user Pada form login terdapat halaman untuk memasukan username dan password. untuk masuk kedalam aplikasi user harus mengisikan username dan password jika data password yang dimasukan valid maka sistem akan menapilkan halaman user dan jika salah maka sistem akan menampilkan pesan salah dan meminta agar user memasukkan username dan password kembali pada form login Diagram Sequence pilih Link Menu < User Menu utama Proses sistem Sub menu About us Menuju Link Menu Mengakses menu Menampilka n Menu

16 53 Gambar 3.13 Diagram Sequence Memilih Link Menu Pada Gambar 3.13 terlihat bahwa pada halaman memilih Link Menu seorang user dapat memilih Link Menu yang di inginkan. Setelah user memilih salah satu link yang di sediakan oleh sistem, maka sistem akan mensajikan materi-materi tentang Haji Diagram Sequence latihan User Halaman latihan < Periksa jawaban Data hasil latihan Menjawab soal latihan Jawaban user Update data hasil latihan Kembali mengerjakan soal Gambar 3.14 Diagram Sequence latihan Pada gambar 3.14 menampilkan Diagram Sequence latihan. Pada halaman ini user dapat melakukan latihan dengan menjawab soal-soal yang telah disediakan oleh sistem. Soal-soal yang dibuat merupakan soal-soal pilihan ganda, sehingga user hanya memilih satu jawaban yang di anggap benar. User dapat melakukan latihan soal-soal yang dipilih oleh user Diagram Sequence Login admin Diagram sequence login admin menggambarkan skenario yang dilakukan antara pengguna dan sistem pada saat pengguna ingin masuk kedalam aplikasi.

17 54 < user Form login Validasi username dan password Data User Halaman admin Memasukkan username dan password periksa username dan password Meminta data username dan password Validasi username dan password gagal Kembali Mengisi form login Mengirim data username dan password Validasi data username dan password berhasil Gambar 3.15 Diagram Sequence Login admin Langkah pertama admin memilih menu login lalu sistem akan menampilkan halaman login yang berisi halaman untuk memasukan username dan password, untuk masuk kedalam aplikasi admin harus mengisikan username dan password jika data password yang dimasukan valid maka sistem akan menapilkan halaman kelola data, dan jika salah maka sistem akan menampilkan kembali form login. Pada halaman ini seorang admin dapat melakukan edit data user dan hapus data user Diagram Sequence mengelola data user Setelah admin berhasil login maka seorang admin akan masuk ke halaman admin. Di halaman admin seorang admin dapat melihat data user, edit data user dan hapus data user.

18 55 < Admin Halaman data user edit data user Halaman edit Data user Mengakses menu data user Memilih menu edit data user Mengisi form edit soal Update data user Gambar 3.16 Diagram Sequence Edit data user Pada Gambar 3.16 merupakan Diagram Sequence Edit data user, pada diagram ini menggambarkan Seorang admin dapat memilih mengedit data user yang sudah terdaftar. Admin halaman data user Hapus data user Data user Mengakses menu data user Memilih link hapus data user Hapus data user dari basisdata Gambar 3.17 Diagram Sequence Hapus data user Selain dapat mengedit data user, seorang admin juga menghapus data user. Pada Gambar 3.17 merupakan Diagram Sequence Hapus data user, pada diagram

19 56 ini menggambarkan Seorang admin dapat menghapus data user yang sudah terdaftar. 3.4 Relasi Antar Tabel Pada relasi antar tabel penulis akan menjelaskan beberapa tabel yang berelasi dalam aplikasi ini. Pada aplikasi ini terdapat 3 tabel yang berelasi yaitu: Table_User, Table_Soal dan Table_Nilai. Table_User Id_User Nama_User Username Pasword Tgl_reg JK tmprlahir Tgllahir Alamat Rt Rw Kota Kode_pos tlp Hp 1 Table_soal Soal_Id Topik Pertanyaan Pilihan_A Pilihan_B Pilihan_C Pilihan_D Jawaban 1 m m Table_Nilai Id_Nilai Id_User Benar Salah Point Topik Tanggal Gambar 3.18 Relasi antar Tabel 3.5 Perancangan Basis Data Pada perancangan basis data penulis akan menjelaskan beberapa tabel yang digunakan dalam aplikasi ini. Pada aplikasi ini terdapat 4 tabel yang digunakan yaitu tabel tbl_user, admin, tbl_nilai dan tbl_soal. Berikut di bawah ini pendefinisan objek data (berupa entitas), atribut, dan tipe data dari atribut objek yang terdapat pada sistem aplikasi pedoman ibadah

20 57 haji berasis Web, yang disajikan dalam bentuk tabel sebagai berikut: 1. tbl_user Pada tbl_user terdapat 15 atribut yaitu: id, username, password, Retype Password, , jenis kelamin, alamat lengkap, Rt, Rw, Kota, Kode Pos, Tempat lahir, Tanggal lahir, Telepon, Handphone. Primary key pada entitas ini adalah id. Lihat Tabel 3.1. Tabel 3.1 tabel tbl_user Atribut Tipe Panjang Keterangan Id Int 5 Primary key Username Varchar 30 Password Varchar 50 Retype Password Varchar 50 Varchar 25 Jenis kelamin Enum Tempat Lahir Varchar 50 Tanggal Lahir Date Alamat lengkap Varchar 100 RT Int 5 RW Int 5 Kota Varhar 20 Kode Pos Int 8 Telpon Int 15 Handphone Int 15 Tabel 3.1 merupakan tabel tbl_user yang digunakan untuk menyimpan

21 58 data user pada saat user melakukan pendaftaran. 2. Admin Pada Admin terdapat 2 atribut yaitu: User name dan Password pada entitas ini adalah no. Lihat Tabel 3.2. Tabel 3.2. tabel admin Atribut Tipe Panjang Keterangan User name Varchar 20 Password Varchar 50 Tabel 3.2 merupakan tabel admin yang digunakan untuk masuk admin. 3. tbl_nilai Pada tabel nilai terdapat 7 atribut yaitu: Id nilai, Id user, benar, salah, kosong, point, tanggal pada entitas ini adalah no. Lihat Tabel 3.3. Tabel 3.3. tabel nilai Atribut Tipe Panjang Keterangan Id nilai Int 4 Id user Int 4 Benar Int 4 Salah Int 4 Kosong Int 4 point Int 4 tanggal Date - Tabel 3.3 merupakan tabel nilai yang digunakan untuk menampilkan dan menyimpan nilai.

22 59 3. Tbl_Soal Pada tabel soal terdapat 7 atribut yaitu: Id soal, pertanyaan, pilihan a, pilihan b, pilihan c, pilihan d, jawaban pada entitas ini adalah no. Lihat Tabel 3.4. Tabel 3.4. tabel soal Atribut Tipe Panjang Keterangan Id_soal Int 5 Pertanyaan Text 50 Pilihan_a Tinytext - Pilihan_b Tinytext - Pilihan_c Tinytext - Pilihan_d Tinytext - Jawaban Char 1 Tabel 3.4 merupakan tabel soal yang digunakan untuk mengubah dan menambah soal Perancangan diagram ERD Entity Relationship Diagram adalah model data yang menggunakan beberapa notasi untuk menggambarkan data sebagai pengganti istilah entitas dan relasi nya. Gambar berikut menggambarkan ERD yang digunakan dalam aplikasi ini. User 1 Memiliki M Data nilai Gambar 3.19 ERD user dengan data nilai

23 60 Deskripsi gambar diatas dapat dijelaskan seperti berikut, satu user dapat memiliki banyak data nilai, karena setiap user melakukan latihan, hasil dari latihan akan di simpan pada tabel data. 3.6 Algoritma Menampilkan Soal Mulai Menentukan jenis soal Menampilkan soal satu persatu Ya Menentukan jawaban tidak Tampil hasil jawaban Ya Simpan hasil Nilai Tampil tabel nilai Selesai Gambar 3.20 flowchart menampikan soal

24 61 Pada algoritma ini akan dijelaskan alur dari program yang dibuat. Selanjutnya Setelah user memilih salah satu jenis soal yang di inginkan, selanjutnya sistem akan menampilkan soal-soal. Kemudian user mulai menjawab soal-soal yang telah ditampilkan. Setelah menjawab soal yang telah dikerjakan, Sistem akan menyimpan nilai kedalam database. 3.7 Perancangan Antar Muka Perancangan antarmuka pada aplikasi Pedoman Ibadah Haji berbasis Web pada umumnya memiliki dasar yang sama, pada setiap bagian atau halaman. Seperti posisi menu, hanyalah isi dari menu logo, posisi form dan informasi, yang membedakan tersebut. Berikut di bawah ini ditampilkan beberapa bentuk antarmuka pemakai dengan sistem pada aplikasi Pedoman Ibadah Haji berbasis Web : 1. Antarmuka halaman home ( index ) Halaman Home adalah halaman yang pertama kali ditampilkan sebelum aplikasi Pedoman ibadah haji berbasis Web ini digunakan. Halaman ini diharapkan user dapat mendaftarkan diri sebelum menggunakan aplikasi ini. Pada halaman ini terdiri dari logo,link daftar, logiin(username dan password ), Lihat Gambar 3.20.

25 62 Header Tanggal Login Penjelasan Aplikasi Pedoman Ibadah Haji Username Password Login Daftar Reset Footer Gambar 3.21 Rancangan Antar Muka Menu Home 2. Antarmuka Halaman Pendaftaran Rancangan ini adalah halaman dimana user mendaftarkan dirinya dengan mengisi data seperti username, password, , Retype password, jenis kelamin, tempat lahir, tanggal lahir, alamat lengkap,rt, RW, kota, kode pos, telepon, handphone, security code. Perancangan antar muka pendaftaran dapat dilihat pada Gambar 3.21 berikut.

26 63 Header Form Pendaftaran Username Password Retype Password Jenis Kelamin Laki - Laki Perempuan Tempat Lahir Tanggal Lahir Bln Tgl Thn Alamat Lengkap RT RW Kota Kode Pos Telepon Handphone Security Code Submit Footer Gambar 3.22 Rancangan Antar Muka Menu Pendaftaran 3. Antarmuka Halaman Login Header Tanggal Login Penjelasan Aplikasi Pedoman Ibadah Haji Username Password Login Daftar Reset Footer Gambar 3.23 Rancangan Antar Muka Menu Login

27 64 Antarmuka halaman login digunakan oleh user untuk menggunakan aplikasi pedoman ibadah haji berbasis Web, sedangkan admin setelah berhasil login dapat mengelolah data user seperti edit dan hapus data user. 4. Antarmuka Halaman Link menu Header Home Edit User Data Pribadi Jadwal Pemberangkatan Haji Logout Tanggal User Logo Logo Logo Daftar Haji Tahapan Haji Rukun Haji Logo Logo Logo Wajib Haji Manasik Haji Info Haji Footer Gambar 3.24 Rancangan Antar Muka Link Menu Rancangan ini adalah halaman dimana user dapat menggunakan Aplikasi Pedoman ibadah haji berbasis Web dan dapat memilih link menu yang telah disediakan oleh admin. 5. Antarmuka Halaman Pilih Link Menu Daftar Haji Halaman pilih Link menu mendaftar haji adalah halaman yang akan menampilkan penjelasan tentang cara mendaftar haji di departemen agama.

28 65 Header User Home Data Pribadi Edit User Jadwal Pemberangkatan Haji Logout Tanggal Menu Daftar Haji Tahapan Haji Rukun Haji Wajib Haji Manasik Haji Info Haji Daftar Haji Penjelasan tentang bagaimana cara mendaftar Haji Footer Gambar 3.25 Rancangan Antar Muka Menu Pilih Mendaftar Haji 6. Antarmuka Halaman pilih Link Menu Tahapan Haji Header Data User Home Edit User Jadwal Pemberangkatan Haji Logout Pribadi Tanggal Menu Daftar Haji Tahapan Haji Rukun Haji Wajib Haji Manasik Haji Info Haji Tahapan Haji Penjelasan tentang Tahapan-tahapan Haji Haji Tamattu Haji Ifrad Haji Qiran Footer Gambar 3.26 Rancangan Antar Muka Menu Pilih Tahapan Haji Halaman pilih Link menu tahapan haji adalah halaman yang akan menampilkan penjelasan tentang cara tahap-tahap haji.

29 66 7. Antarmuka Halaman pilih Link Menu Rukun Haji Header User Home Edit User Jadwal Pemberangkatan Haji Logout Tanggal Menu Daftar Haji Tahapan Haji Rukun Haji Wajib Haji Manasik Haji Info Haji Rukun Haji Penjelasan tentang Rukun Haji Footer Gambar 3.27 Rancangan Antar Muka Menu Pilih Rukun Haji Halaman pilih Link menu Rukun haji adalah halaman yang akan menampilkan penjelasan tentang Rukun rukun haji. 8. Antarmuka Halaman pilih link menu Wajib haji Header User Home Data Pribadi Edit User Jadwal Pemberangkatan Haji Logout Tanggal Menu Wajib Haji Daftar Haji Tahapan Haji Rukun Haji Wajib Haji Manasik Haji Info Haji Penjelasan tentang Waib Haji Footer

30 67 Gambar 3.28 Rancangan Antar Muka Menu Pilih Wajib Haji Halaman pilih Link menu Wajib Haji adalah halaman yang akan menampilkan penjelasan tentang Wajib haji. 9. Antarmuka Halaman Manasik Haji Setelah user memilih link menu manasik haji user dapat mengerjakan soal-soal latihan tentang ibadah haji, sekaligus dapat melihat hasil nilai yang dikerjakan oleh user. Berikut adalah gambar rancangan menu latihan soal. Header User Home Data Pribadi Edit User Jadwal Pemberangkatan Haji Logout Tanggal Menu Daftar Haji Tahapan Haji Rukun Haji Wajib Haji Manasik Haji Info Haji Manasik Haji Tawaf adalah mengelilingi Ka bah sebanyak : 6 kali 7 Kali 8 Kali 9 Kali Next Footer Gambar 3.29 Rancangan Antar Muka Menu Pilih Manasik haji 10. Antarmuka Halaman pilih link menu Info Haji

31 68 Header User Home Data Pribadi Edit User Jadwal Pemberangkatan Haji Logout Tanggal Menu Daftar Haji Tahapan Haji Rukun Haji Wajib Haji Manasik Haji Info Haji Info Haji Penjelasan tentang Info-Info Haji Footer Gambar 3.30 Rancangan Antar Muka Menu Pilih Info Haji Halaman pilih Link menu Info Haji adalah halaman yang akan menampilkan penjelasan tentang Informasi Haji. 11. Rancangan Antar Muka Halaman Kelola Data User Pada rancangan antar muka halaman kelola data user ini digunakan admin sebagai sarana untuk mengelola atau memanajemen setiap data yang tersimpan didalam basis data. Pada rancangan antar muka halaman kelola data user terdapat beberapa menu yang tersedia bagi admin diantaranya menu delete.

32 69 Header Tanggal Data User ID User Name Tanggal Registrasi Jenis Kelamin Tempat tgl lahir Alamat Tlp Aksi Delete Footer Gambar 3.31 Rancangan Antar Muka Kelola data user Setelah admin berhasil login dengan baik maka akan tampil halaman kelola data user seperti pada gambar 3.30, yang menampilkan data user yang terdapat pada data base aplikasi pedoman ibadah haji berbasis web. Pada halaman ini admin dapat melakukan hapus data user.