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. 3.2.1 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
39
Menampilkan Halaman
Memilih menu yang telah disediakan
Memilih Pertanyaan tentang Haji <
>
User
Melihat Data Hasil Latihan
<>
<>
Melakukan Latihan
<>
Login <>
Mengelola Data User <> <>
Admin
Mengelola data soal
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
: Admin
Deskripsi
: Admin harus melakukan login terlebih dahulu
sebelum mengubah data yang terdapat pada basis data. 2. Nama Use Case
: Mengelola data user
40
Aktor
: Admin
Deskripsi
: Admin dapat melihat daftar user yang sudah
terdaftar. Admin juga bisa mengubah atau menghapus data User. 3. Nama Use Case
: Mengelola data soal
Aktor
: Admin
Deskripsi
: 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
: User
Deskripsi
: Use Case ini memungkinkan user untuk melihat
halaman aplikasi tanpa login terlebih dahulu. 2. Nama Use Case
: Melakukan Registrasi
Aktor
: User
Deskripsi
: 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 Aktor
: Login : User
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
: User
Deskripsi
: Use Case ini User dapat memilih salah sati link
menu yang telah disediakan. 5. Nama Use Case
: Memilih Pertanyaan tentang haji
Aktor
: User
Deskripsi
: Use Case ini User dapat memilih beberapa
pertanyaan 6. Nama Use Case
: Melihat Data Hasil Latihan
Aktor
: User
Deskripsi
: Use Case ini aplikasi akan menampilkan data hasil
latihan yang telah User lakukan. 7. Nama Use Case
: Melakukan Latihan
Aktor
: User
Deskripsi
: Use Case ini User memulai latihan sesuai dengan
pertanyaan yang dipilih oleh User.
3.3.2 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
42
perbedaanya dengan flowchart adalah Diagram Aktifitas mendukung perilaku parallel sedangkan flowchart tidak bisa. (munawar, 2005:109).
3.3.2.1 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.
3.3.2.2 Diagram Aktifitas Pendaftaran Untuk dapat login dan menggunakan aplikasi ini, user harus terlebih dahulu mendaftarkan dirinya pada form pendaftaran. Pada form pendaftaran
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
Menampilkan halaman Pendaftaran
Memilih 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
44
3.3.2.3 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
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. 3.3.2.4 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
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. 3.3.2.5 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.
47
3.3.2.6 Diagram Aktifitas Latihan Soal User
Sistem
Menampilkan latihan soal
Menjawab soal latihan
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.
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.
49
3.3.2.7 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
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. 3.3.3 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. 3.3.3.1 Diagram Sequence Home
< User
Menu utama
Menuju menu utama
Proses sistem
Mengakses menu home
Sub menu home
Menjalankan akses ke sub menu home
Gambar 3.10 Diagram Sequence Home
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. 3.3.3.2 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
Mengakses menu pendaftaran
Form pendaftaran
Validasi data dan captcha
Data User
Memasukkan data user periksa data dan captcha Validasi data dan captcha berhasil Validasi captcha gagal
Data disimpan kedalam basisdata
Kembali Mengisi form pendaftaran
User mendapatkan username dan password untuk login
Gambar 3.11 Diagram Sequence Pendaftaran 3.3.3.3 Diagram Sequence Login Diagram sequence login menggambarkan skenario yang dilakukan antara user dan sistem pada saat user ingin masuk kedalam aplikasi.
52
< Validasi username dan password
Form login
user
Data User
Halaman user
Memasukkan username dan password periksa username dan password Meminta data username dan password
Mengirim data username dan password Validasi data username dan password berhasil
Validasi username dan password gagal Kembali Mengisi form login
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. 3.3.3.4 Diagram Sequence pilih Link Menu
< User
Menu utama
Menuju Link Menu
Proses sistem
Mengakses menu
Sub menu About us
Menampilka n Menu
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. 3.3.3.5 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. 3.3.3.6 Diagram Sequence Login admin Diagram sequence login admin menggambarkan skenario yang dilakukan antara pengguna dan sistem pada saat pengguna ingin masuk kedalam aplikasi.
54
< Form login
user
Validasi username dan password
Data User
Halaman admin
Memasukkan username dan password periksa username dan password Meminta data username dan password
Mengirim data username dan password
Validasi username dan password gagal
Validasi data username dan password berhasil
Kembali Mengisi form login
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. 3.3.3.7 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.
55
< Admin
Halaman data user
Mengakses menu data user
edit data user
Data user
Halaman edit
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.
halaman data user Admin Mengakses menu data user
Hapus data user
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
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_Nilai Table_User Id_User Nama_User Username Pasword Email Tgl_reg JK tmprlahir Tgllahir Alamat Rt Rw Kota Kode_pos tlp Hp
Id_Nilai
m Id_User
1
Benar Salah Point m Topik Tanggal Table_soal Soal_Id Topik Pertanyaan Pilihan_A Pilihan_B Pilihan_C Pilihan_D Jawaban
1
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
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, email, 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
Email
Varchar
25
Jenis kelamin
Enum
Tempat Lahir
Varchar
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
50
Tabel 3.1 merupakan tabel tbl_user yang digunakan untuk menyimpan
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
User name
Varchar
20
Password
Varchar
50
Keterangan
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
Id nilai
Int
4
Id user
Int
4
Benar
Int
4
Salah
Int
4
Kosong
Int
4
point
Int
4
tanggal
Date
-
Keterangan
Tabel 3.3 merupakan tabel nilai yang digunakan untuk menampilkan dan menyimpan nilai .
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
Id_soal
Int
5
Pertanyaan
Text
50
Pilihan_a
Tinytext
-
Pilihan_b
Tinytext
-
Pilihan_c
Tinytext
-
Pilihan_d
Tinytext
-
Jawaban
Char
1
Keterangan
Tabel 3.4 merupakan tabel soal yang digunakan untuk mengubah dan menambah soal . 3.4.1 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
Gambar 3.19 ERD user dengan data nilai
Data nilai
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
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.
62
Header
Tanggal
Login Username
Penjelasan Aplikasi Pedoman Ibadah Haji Password
Login
Reset
Daftar
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, Email, 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.
63
Header Form Pendaftaran Username Email 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 Username
Penjelasan Aplikasi Pedoman Ibadah Haji Password
Login
Reset
Daftar
Footer
Gambar 3.23 Rancangan Antar Muka Menu Login
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.
65
Header
User
Home
Data Pribadi
Edit User
Jadwal Pemberangkatan Haji
Logout
Tanggal
Daftar Haji
Menu Daftar Haji Tahapan Haji Rukun Haji Wajib Haji Manasik Haji Info 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
User
Home
Data Pribadi
Edit User
Jadwal Pemberangkatan Haji
Logout
Tanggal
Tahapan Haji
Menu Daftar Haji Tahapan Haji Rukun Haji Wajib Haji Manasik Haji Info 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.
66
7. Antarmuka Halaman pilih Link Menu Rukun Haji
Header
User
Home
Edit User
Jadwal Pemberangkatan Haji
Logout
Tanggal
Rukun Haji
Menu Daftar Haji Tahapan Haji Rukun Haji Wajib Haji Manasik Haji Info 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
Wajib Haji
Menu Daftar Haji Tahapan Haji Rukun Haji Wajib Haji Manasik Haji Info Haji
Jadwal Pemberangkatan Haji
Penjelasan tentang Waib Haji
Footer
Logout
Tanggal
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
Logout
Tanggal
Manasik Haji
Menu Daftar Haji Tahapan Haji Rukun Haji Wajib Haji Manasik Haji Info Haji
Jadwal Pemberangkatan 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
68
Header
User
Home
Data Pribadi
Jadwal Pemberangkatan Haji
Edit User
Logout
Tanggal
Info Haji
Menu Daftar Haji Tahapan Haji Rukun Haji Wajib Haji Manasik 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.
69
Header
Tanggal
Data User ID
User Name
Email
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.