Revisi TIF E DPPL BAB1 2 3 KELOMPOK9

(1)

REKAYASA PERANGKAT

LUNAK IF - D

DOKUMEN PERANCANGAN PERANGKAT LUNAK

SISTEM INFORMASI MEMAKMURKAN

MASJID

UNTUK :

PENGGUNA

Dipersiapkan oleh:

KELOMPOK 9

Taufik Brilian Nur 135150407111049 Ade Kurniawan 135150200111041 Donny Kurniawan 135150207111098 Dwi Restina Setya Putri 135150201111136

Laboratorium

Rekayasa

Perangkat Lunak

Program Teknologi Informasi dan Ilmu

Nomor Dokumen Halaman

SEL01-Sxx

<xx:no grp> #/jml #

(2)

(3)

DOKUMEN PERANCANGAN PERANGKAT LUNAK

Nomor Dokumen Revisi : x

DAFTAR HALAMAN PERUBAHAN

Halama

n Revisi

Halama

(4)

DOKUMEN

1.1 Deskripsi Umum Dokumen...1

1.2 Tujuan Penulisan Dokumen...1

1.3 Lingkup Masalah...1

1.4 Definisi, Istilah, dan Singkatan...1

1.5 Referensi...1

BAB 2 DESKRIPSI PERANCANGAN GLOBAL...2

2.1 Perancangan Arsitektur...2

2.2 Perancangan Data...2

2.3 Perancangan Antarmuka...2

2.4 Lingkungan Pengembangan Sistem...2

BAB 3 DESKRIPSI PERANCANGAN RINCI...4

3.1 Perancangan Komponen...4

3.2 Perancangan Data...4

(5)

DAFTAR TABEL

(6)

(7)

(8)

BAB 1

PENDAHULUAN

1d1 Deskripsi Umum Dokumen

Dokumen Pembuatan perangkat Lunak atau DPPL merupakan dokumen yang digunakan untuk merepresentasikan program atau sistem yang akan dibuat setelah melalui tahap perumusan kebutuhan yang di catat dalam sebuah dokumen SKPL (Spesifikasi Kebutuhan Perangkat lunak). Dokumen ini terbagi menjadi tiga bagian utama dengan rincian sebagai berikut.

Bagian Pertama. Pendahuluan, merupakan pengantar yang berisi informasi umum terhadap dokumen beserta permasalahan yang diangkat dalam penulisan dokumen ini. Bagian pertama ini berisi Deskripsi umum dokumen, tujuan penulisan dokumen, lingkup masalah, Pengembangan perangkat lunak,termasuk berisi tentang Definisi, istilah dan singkatan serta berisi Refrensi yang berkaitan dengan dari mana sumber penulisan ini didapatkan

Bagian Kedua merupakan Deskripsi Perancangan global perangkat lunak, dimana pada bagian ini menjelaskan tentang gambaran perancangan dari perangkat lunak yang akan dibuat yaitu beritan dengan informasi Perancangan Arsitektur, Perancangan Data, Perancangan Antar Muka serta informasi yang terkait dengan lingkungan pengembangan sistem perangkat lunak.

Bagian Ketiga memuat tentang informasi detail perancangan perangkat lunak yang mendeskripsikan kebutuhan khusus bagi sistem

SI MAMAS (Sistem Informasi Memakmurkan Masjid), yang meliputi informasi perancangan Komponen, Perancangan Data dan Perancangan Antarmuka.

1d2 Tujuan Penulisan Dokumen

Dokumen ini berisi deskripsi tentang pembuatan Perangkat Lunak dari Sistem Informasi Memakmurkan Masjid (SI MAMAS). Tujuan penulisan dokumen ini yaitu sebagai dokumen yang menyediakan informasi kepada programmer agar mengetahui gambaran dan rancangan dari sistem yang akan dibangun sehingga diharapkan sistem yang dibuat nantinya dapat diimplementasikan secara nyata sesuai dengan perancangan yang telah di definisikan.

1d3 Lingkup Masalah

(9)

Berdasarkan data tahun 2014, jumlah masjid di Indonesia tercatat lebih dari 700 ribu buah. Suatu jumlah yang sangat besar, bahkan yang terbesar di dunia, dan cenderung untuk terus bertambah seiring masjid yang sepi dari jamaah kaum muslimin. Hal ini disebabkan oleh beberapa faktor salah satunya adalah kurangnya manajemen dan pengelolaan yang maksimall sehingga untuk mengoptimalkan fungsi masjid sebagaimana tersebut diatas, maka kami merancang sebuah sistem informasi tentang masjid-masjid yang ada di kota Malang dan sekitarnya beserta aktifitas-aktifitas yang berhubungan didalamnya yang tidak lain bertujuan untuk memakmurkan masjid.

1d4 Defnisi, Istilah, dan Singkatan

Istilah dan Akronim Uraian

SI MAMAS Sistem Informasi Memakmurkan Masjid, aplikasi berbasis web yang akan dibahas pada dokumen SKPL ini

DPPL Dokumen Pembuatan Perangkat

Lunak yang ditujukan kepada

Guest Pengguna perangkat lunak

secara umum

Member Penguna umum yang telah

mendaftarkan diri pada system selanjutnya disebut user member.

Tabel 1. Definisi, Istilah dan Singkatan

1d5 Referensi

Dokumen PL yang dirujuk oleh dokumen ini. Buku, panduan, dokumentasi lain yang dipakai dalam pengembangan ini.

1. Software Engineering 9th edition, Ian Sommerville, Addison-Wesley, 2011.

(10)

(11)

BAB 2

DESKRIPSI PERANCANGAN GLOBAL

1d1 Perancangan Arsitektur

1d1d1 Sequence Diagram

3.4.3 Sequence Diagram

SI_MAMAS_F_G01: Registrasi

Gambar 3. Sequence Diagram Registrasi Member dan Admin Aktor : Guest

(12)

SI_MAMAS_F_G02: Login

Gambar 4. Sequence Diagram Login Member dan Admin Aktor : Guest

(13)

SI_MAMAS_F_G03: Melihat Daftar Masjid

Gambar 5. Sequence Diagram Lihat Daftar Masjid Aktor : Guest, Member, Admin

Aktor memilih menu untuk lihat daftar masjid, kemudian akan ditampilkan daftar masjid yang memiliki status approved / telah disetujui oleh admin.

SI_MAMAS_F_G04: Melihat Komentar

Gambar 6. Sequence Diagram Lihat Komentar Aktor : Guest, Member, Admin

(14)

SI_MAMAS_F_G05: Melihat Daftar Kegiatan

Gambar 7. Sequence Diagram Lihat Daftar Kegiatan Aktor : Guest, Member, Admin

Aktor memilih menu untuk lihat daftar kegiatan, Kemudian akan ditampilkan seluruh daftar kegiatan yang ada pada masjid yang bersangkutan.

SI_MAMAS_F_M01: Logout

Gambar 8. Sequence Diagram Logout Aktor : Member, Admin

(15)

SI_MAMAS_F_M02: Melihat Kegiatan Bermasalah

Gambar 9. Sequence Diagram kegiatan bermasalah Aktor : Guest, Member, Admin

Aktor memilih menu untuk lihat daftar kegiatan bermasalah, Kemudian akan ditampilkan seluruh daftar kegiatan yang memiliki status Bermasalah.

SI_MAMAS_F_M03: Tambah Masjid

Gambar 10. Sequence Diagram Tambah Masjid Aktor : Member, Admin

(16)

SI_MAMAS_F-M04: Hapus Masjid

Gambar 11. Sequence Diagram Login Hapus Masjid Aktor : Member, Admin

(17)

SI_MAMAS_F_M05: Edit Masjid

Gambar 12. Sequence Diagram Edit Masjid Aktor : Member, Admin

Aktor memilih menu untuk Edit masjid, kemudian aktor diharuskan untuk mengisi form detail masjid yang bersangkutan untuk kemudian diupdate datanya dengan yang baru.

SI_MAMAS_F_M06: Tambah Komentar

(18)

Aktor memilih menu untuk tambah komentar, kemudian aktor diharuskan untuk mengisi detail komentar untuk kemudian disimpan data disimpan datanya kedalam database Komentar.

SI_MAMAS_F_M07: Hapus Komentar

Gambar 14. Sequence Diagram Hapus Komentar Aktor : Member, Admin

(19)

SI_MAMAS_F_M08: Tambah Kegiatan

Gambar 15. Sequence Diagram Tambah Kegiatan Aktor : Member, Admin

Aktor memilih menu untuk tambah kegiatan kemudian aktor diharuskan untuk mengisi form detail kegiatan untuk kemudian disimpan data disimpan datanya kedalam database Kegiatan.

SI_MAMAS_F_M09: Edit Kegiatan

Gambar 16. Sequence Diagram Edit Kegiatan

(20)

bersangkutan untuk kemudian diupdate datanya dengan yang baru.

SI_MAMAS_F_M10: Hapus Kegiatan

Gambar 17d Sequence Diagram Hapus Kegiatan Aktor : Member, Admin

(21)

SI_MAMAS-F-A01: Melihat Daftar Member

Gambar 18. Sequence Diagram Daftar Member Aktor : Admin

(22)

SI_MAMAS-F-A02: Hapus Member

Gambar 19. Sequence Diagram Hapus Member Aktor : Admin

Aktor memilih menu untuk Hapus Member yang dipilih, kemudian akan tampil peringatan untuk konfirmasi hapus Member, jika pilih ya maka member yang bersangkutan akan dihapus dari database Member.

SI_MAMAS-F-A03: Lihat Waiting List

Gambar 20. Sequence Diagram Lihat Waiting List

(23)

Aktor memilih menu untuk lihat waiting list atau melihat registrasi member dan tambah masjid yang menungggu untuk mendapat persetujuan dari admin, kemudian akan ditampilkan daftar member dan masjid yang memiliki status not Approved.

SI_MAMAS-F-A04: Approve Registrasi

Gambar 21. Sequence Diagram Approve Registrasi Aktor : Admin

(24)

SI_MAMAS-F-A05: Approve daftar masjid

Gambar 22. Sequence Diagram Approve Masjid Aktor : Admin

Aktor memilih menu untuk Approve Masjid yang dipilih pada waiting list, kemudian akan tampil peringatan untuk konfirmasi Approve Masjid, jika pilih ya maka status masjid yang bersangkutan akan berubah menjadi Approved.

(25)

1d1d3 Fungsi Tambahan (jika memakai API / library/ web service tertentu)

Dalam sistem informasi menggunakan Library Tiny MCE java Script untuk menampilkan text area agar lebih elegan.

1d2 Perancangan Data

1d3 Perancangan Antarmuka

(26)

menu bar, serta pemilihan icon yang sesuai subtansinya, penempatan content dan navigasi

 Consistency : Dalam perancangan interface sistem, interface dirancang untuk tetap konsisten dalam tiap tampilan jendela baik dari segi pemilihan warna, tata letak dan desain sehingga menjamin kenyamanan user dalam memakai sistem.

 Minimal surprise: Tiap tombol yang ada pada antarmuka akan langsung mengerjakan fungsinya masing-masing tanpa harus menampilkan hal-hal yang tidak berhubungan dengan sistem.

 User friendly : Antarmuka sistem dirancang dengan semaksimal mungkin untuk dapat dengan mudah diakes oleh siapapun, sehingga sistem yang dibuat akan menjadi sistem rujukan penguna dari sistem-sistem yang semisalnya.

 User Diversity: Antarmuka sistem dibuat berbeda kepada setiap pengguna (Guest, Member dan admin) yang sedang menggunakan sistem dikarenakan selain dari tiap-tiap user memiliki fitur yang berbeda juga untuk memudahkan identifikasi user disaat memakai sistem.

1d4 Lingkungan Pengembangan Sistem

1d4d1 Software

- Bahasa pemrograman : HTML, CSS, PHP, dan JavaScript.

- DBMS : MySQL.

- Editor / IDE : Notepad++ dan DBDesigner - Framework : CodeIgniter (CI)

- Web server : Apache

- Browser : Mozilla Firefox,Internet Explorer, UC

browser, Opera dan Google crome

1d4d2 Sistem Operasi

Dalam perancangan dan pengembangan sistem, sistem operasi yang digunakan adalah Windows 8.1

1d4d3 Hardware

- Prosesor : Dual Core Intel inside i3 2.0 GHz.

(27)

(28)

BAB 3

DESKRIPSI PERANCANGAN RINCI

3d1 Perancangan Komponen

Kelas Controller home

Nama Kelas : c_home

Tabel Kelas c_home

Nama Operasi Visibility Keterangan

Construct( ) Public Memanggil model pada yang telah dibuat

index( ) Public Untuk menampilkan view pada halaman index

masjid( ) Public Untuk menampilkan view pada halaman masjid

kegiatan( ) Public Untuk menampilkan view pada halaman kegiatan artikel( ) Public Untuk menampilkan view

pada halaman artikel

member( ) Public Untuk menampilkan view pada halaman member waiting_list( ) Public Untuk menampilkan view

pada halaman waiting list kontak( ) Public Untuk menampilkan view

pada halaman kontak

Kelas Controller login Nama Kelas : c_login

Tabel Kelas c_login

login( ) Public Digunakan untuk

memanggil view pada halaman form login.

(29)

sudah terdaftar di dalam sistem. Jika valid maka redirect ke halaman login sukses, tapi jika tidak valid akan tampil alert gagal login.

registrasi( ) Public Digunakan untuk memanggil view pada halaman form registrasi. cekregistrasi( ) Public Digunakan untuk mendaftar

member baru, namun dilakukan pengecekan terlebih dahulu, apakah didalam sistem sudah ada username yang sama, jika sudah ada maka tidak bisa daftar dan menampilkan alert username sudah ada. loginsukses( ) Public Untuk menampilkan view

pada halaman login sukses. registrasisukses( ) Public Untuk menampilkan view

pada halaman registrasi sukses.

Kelas Controller member Nama Kelas : c_member

Tabel 4. Kelas c_member

index( ) Public Untuk menampilkan daftar member dalam bentuk tabel pada view halaman daftar member.

create( ) Public Digunakan untuk

menampilkan form untuk menambah member baru, kemudian hasil inputnya digunakan oleh model member untuk insert kedalam database.

edit( ) Public Digunakan untuk

(30)

dipilih, kemudian data inputnya digunakan oleh model member untuk update kedalam database.

delete( ) Public Digunakan untuk

menghapus member yang dipilih dari database.

approve( ) Public Digunakan admin mengubah status member menjadi ‘Approved’.

Kelas Controller masjid Nama Kelas : c_masjid

Tabel 4. Kelas c_masjid

index( ) Public Untuk menampilkan daftar masjid dalam bentuk tabel pada view halaman daftar member.

Read( ) Public Digunakan untuk melihat detail masjid yang dipilih beserta komentar di dalamnya.

menampilkan form untuk menambah masjid baru, kemudian hasil inputnya digunakan oleh model masjid untuk insert kedalam database.

(31)

ditempel pada form bersangkutan untuk kemudian diubah, dan ketika submit hasil inputnya digunakan oleh model masjid untuk update kedalam database.

menghapus masjid yang dipilih dari database.

approve( ) Public Digunakan admin mengubah status masjid menjadi ‘Approved’.

addcomment( ) Public Digunakan untuk membuat komentar baru pada masjid yang bersangkutan datanya diambil dari model komentar.

Kelas Controller kegiatan Nama Kelas : c_kegiatan

Tabel Kelas c_kegiatant

index( ) Public Untuk menampilkan daftar kegiatan dalam bentuk tabel pada view halaman daftar member.

Read( ) Public Digunakan untuk melihat detail kegiatan yang dipilih beserta komentar di dalamnya.

(32)

edit( ) Public Digunakan untuk inputnya digunakan oleh model kegiatan untuk update kedalam database.

menghapus kegiatan yang dipilih dari database.

Kelas Controller artikel Nama Kelas : c_artikel

Tabel Kelas c_kegiatan

index( ) Public Untuk menampilkan daftar artikel dalam bentuk tabel pada view halaman daftar member.

(33)

create( ) Public Digunakan untuk menampilkan form untuk menambah artikel baru, kemudian hasil inputnya digunakan oleh model artikel untuk insert kedalam database.

menampilkan form untuk inputnya digunakan oleh model artikel untuk update kedalam database.

menghapus artikel yang dipilih dari database.

Kelas Model data Nama Kelas : m_data

Tabel Kelas m_data

loadDatabase( ) Public Digunakan untuk menyambungkan pada database yang dibuat.

Kelas Model login Nama Kelas : m_login

Tabel Kelas m_data

(34)

String) melakukan query pada database tabel member yang mana username dan password nya sama dengan parameter yang telah dikirim oleh controller member, kemudian return hasil query. Digunakan c_member untuk verifikasi login.

dataPengguna(String) Public Digunakan untuk mencari data pengguna dari tabel member yang username nya sama dengan parameter. registrasi( ) Public Digunakan untuk

melakukan query insert kedalam tabel member sesuai dengan nilai yang dikirimkan oleh controller login hasil input dari form registrasi.

Kelas Model login Nama Kelas : m_login

Tabel Kelas m_data

getComments(int) Public Digunakan untuk data komentar dari tabel komentar yang post_id nya sesuai dengan id masjid / parameter yang bersangkutan.

(35)

Kelas Model member Nama Kelas : m_member

Tabel Kelas m_data

getMember(int) Public Melakukan query untuk mendapatkan data member dari tabel member yang id member nya sesuai / sama dengan parameter.

getMemberNotApproved( ) Public Melakukan query untuk mencari data pada tabel member yang memiliki status notApproved.

getAllMember( ) Public Melakukan query untuk mendapatkan seluruh data yang ada pada tabel member.

addMember( ) Public Digunakan untuk melakukan query insert member baru kedalam tabel member. Sesuai dengan data input yang dikirimkan oleh controller member yang diperoleh dari form tambah member yang telah diisi. Dengan status default ‘notApproved’

updateMember( ) Public Melakukan query untuk mengubah data yang bersangkutan pada tabel member sesuai dengan data input yang dikirimkan oleh controller member yang diperoleh dari form edit member.

approveMember(int) Public Melakukan query untuk mengubah atau update status member yang bersangkutan menjadi ‘Approved’ pada tabel member.

(36)

memiliki id sama dengan parameter.

Kelas Model masjid Nama Kelas : m_masjid

Tabel Kelas m_masjid

getMasjid(int) Public Melakukan query untuk mendapatkan data masjid dari tabel masjid yang id member nya sesuai / sama dengan parameter.

getMasjidNotApproved( ) Public Melakukan query untuk mencari data pada tabel masjid yang memiliki status notApproved.

getAllMasjid ( ) Public Melakukan query untuk mendapatkan seluruh data yang ada pada tabel masjid. getLiveMasjid(int) Public Melakukan query untuk

mendapatkan data terbaru yang ada pada tabel masjid. Sesuai jumlah batasan row yang diberikan.

addMasjid ( ) Public Digunakan untuk melakukan query insert masjid baru kedalam tabel masjid. Sesuai dengan data input yang dikirimkan oleh controller masjid yang diperoleh dari form tambah masjid yang telah diisi. updateMasjid ( ) Public Melakukan query untuk

(37)

diperoleh dari form edit masjid.

approveMasjid (int) Public Melakukan query untuk mengubah atau update status masjid yang bersangkutan menjadi ‘Approved’ pada tabel masjid.

deleteMasjid (int) Public Melakukan query untuk menghapus masjid yang memiliki id sama dengan parameter.

Kelas Model kegiatan Nama Kelas : m_kegiatan

Tabel Kelas m_ kegiatan

getKegiatan (int) Public Melakukan query untuk mendapatkan data kegiatan dari tabel masjid yang id member nya sesuai / sama dengan parameter.

getAllKegiatan ( ) Public Melakukan query untuk mendapatkan seluruh data yang ada pada tabel kegiatan.

getLiveKegiatan (int) Public Melakukan query untuk mendapatkan data terbaru yang ada pada tabel kegiatan. Sesuai jumlah batasan row yang diberikan. addKegiatan ( ) Public Digunakan untuk melakukan query insert kegiatan baru kedalam tabel kegiatan. Sesuai dengan data input yang dikirimkan oleh controller kegiatan yang diperoleh dari form tambah kegiatan yang telah diisi.

(38)

kegiatan sesuai dengan data input yang dikirimkan oleh controller kegiatan yang diperoleh dari form edit kegiatan.

deleteKegiatan (int) Public Melakukan query untuk menghapus kegiatan yang memiliki id sama dengan parameter.

Kelas Model artikel Nama Kelas : m_artikel

Tabel Kelas m_artikel

getArtikel (int) Public Melakukan query untuk mendapatkan data kegiatan dari tabel artikel yang id artikel nya sesuai / sama dengan parameter.

getAllArtikel ( ) Public Melakukan query untuk mendapatkan seluruh data yang ada pada tabel artikel. getLiveArtikel (int) Public Melakukan query untuk

mendapatkan data terbaru yang ada pada tabel artikel. Sesuai jumlah batasan row yang diberikan.

addArtikel ( ) Public Digunakan untuk melakukan query insert artikel baru kedalam tabel artikel. Sesuai dengan data input yang dikirimkan oleh controller artikel yang diperoleh dari form tambah artikel yang telah diisi. updateArtikel ( ) Public Melakukan query untuk

(39)

artikel.

deleteArtikel (int) Public Melakukan query untuk menghapus artikel yang

If (dataMember(username).num_rows <> 0) then Alert(Username Telah Terdaftar)

History.go(-1) Else

Registrasi() End

Function dataMember (nama)

sql = query(‘Select * from member where username = nama’) return sql

Function Registrasi () Status = ‘notApproved’

sql = query(‘Insert Into Member (‘data member’) Values (‘hasil input form tambah member’)’)

return sql

If (getMember(username, password).num_rows <> 0) then Session.setuserdata(isLogin, True)

(40)

Redirect (loginSukses) Else

Alert(Gagal login) History.go(-1) End

Function getMember ($username, $password)

sql = query(‘Select * from member where username = $username AND password = $password’ AND status = ‘Approved’)

return sql

-

Tambah Masjid

If(submitted()) then

Function addMasjid ($userid)

sql = query(‘Insert Into Masjid (‘data masjid’) Values

echo (“Masjid berhasil diupdate”) redirect(daftar_masjid)

Else

Load.view(form_edit_masjid) End

Function editMasjid ($userid)

(41)

return sql

- Logout

Session.sess_destroy() Redirect(login)

3d2 Perancangan Data

3d3 Perancangan Antarmuka

3d3d1 Antarmuka Pengguna (tiap kelas isi bisa berbeda-beda)

1) Halaman Index (Login)

(42)

Halaman ini merupakan halaman index dimana pengguna(user) dapat melakukan proses login atau proses untuk menuju halaman registrasi.

No Nama objek Tipe Keterangan 1 Username Text

Field Memasukkan usernamepengguna 2 Password Text

Field Memasukkan passwordpengguna 3 Tombol Login Button Jika diklik, pengguna

akan masuk ke sistem 4 Daftar disini Link Jika diklik, pengguna

akan masuk ke halaman registrasi

Tabel 3d1 Tabel Penjelasan Halaman Index

Screenshot 3d1 Halaman Index Login

(43)

Gambar 3.2 Rancangan Kasar Halaman Index Registrasi

Halaman ini merupakan halaman index yang ditujukan untuk pengguna jika ingin membuat akun.

Tabel 3d2 Tabel Penelasan Halaman Index Registrasi

Screenshot 3.2 Halaman Index Registrasi

3) Halaman Home Guest / Member

No Nama objek Tipe Keterangan 1 Username Text

Field Memasukkan usernamepengguna 2 Password Text

Field Memasukkan passwordpengguna

3 Email Text

(44)

Gambar 3.3 Rancangan Kasar Halaman Home

Halaman ini merupakan halaman home untuk pengguna yang berisi mengenai daftar kegiatan dan artikel terbaru, pegumuman pengajian, serta review dari suatu masjid.

No Nama

objek Tipe Keterangan

1 Home Menu Jika diklik, akan menuju ke section Home

2 Kegiatan Menu Jika diklik, akan menuju ke section Kegiatan 3 Masjid Menu Jika diklik, akan menuju

ke section Masjid

4 Artikel Menu Jika diklik, akan menuju ke section Artikel

5 About Us Menu Jika diklik, akan menuju ke section About Us 6 Tombol

(45)

Tabel 3.3 Tabel Penjelasan Halaman Home

Screenshot 3.3 Halaman Home

(46)

Gambar 3.4 Rancangan Kasar Halaman Masjid

Halaman ini merupakan halaman yang akan memberikan informasi kepada pengguna mengenai daftar masjid. Selain itu, juga akan diberikan suatu review mengenai masjid yang ada.

Tabel 2.4 Tabel Penjelasan Halaman Masjid Member No Nama objek Tipe Keterangan

ke section Masjid

Logout Button Jika diklik, penggunaakan keluar dari sistem 7 Ke daftar

(47)

Screenshot 3.4 Halaman Masjid Member

5) Halaman Daftar Masjid Member

Gambar 3.5 Rancangan Kasar Halaman Daftar Masjid Member

(48)

T a b e l 3 . 5

Screenshot 3.5 Halaman Daftar Masjid Member

6) Halaman Add Masjid Member

Gambar 3.6 Rancangan Kasar Halaman Add Masjid Member

No Nama objek Tipe Keterangan

ke section Masjid

Logout Button Jika diklik, penggunaakan keluar dari sistem 7 Tambah

(49)

Halaman ini merupakan halaman yang dapat

digunakan oleh pengguna untuk menambahkan masjid yang diinginkan.

Screenshot 3.6 Halaman Add Masjid Member No Nama objek Tipe Keterangan

ke section Masjid

Logout Button Jika diklik, penggunaakan keluar dari sistem 7 Nama

Masjid TextField Memasukkanmasjid nama 8 Alamat Text

Field Memasukkan alamatmasjid

9 Tags Text

Field Memasukkan tags

(50)

7) Halaman Kegiatan Member

Gambar 3d5 Rancangan Kasar Halaman Kegiatan Member

Halaman ini merupakan halaman yang memberikan informasi kepada pengguna mengenai daftar kegiatan apa saja yang akan

Screenshot 3.5 Halaman Kegiatan

8) Halaman Daftar Kegiatan Member

No Nama

ke section Masjid

(51)

Gamabar 3.8 Rancangan Kasar Halaman Daftar kegiatan Member

Halaman ini merupakan halaman yang berisi daftar kegiatan apa saja yang akan dilaksanakan.

Tabel 3.8

o Namaobjek Tipe Keterangan

ke section Masjid

Logout Button Jika diklik, penggunaakan keluar dari sistem 7 Create

new kegiatan

(52)

Screenshot 3.8 Halaman Daftar Kegiatan Member

9) Halaman Create Kegiatan Member

Gamabar 3.9 Rancangan Kasar Halaman Create Kegiatan Member

(53)

Tabel 3.9

Penjelasan Halaman Create kegiatan Member

Screenshot 3.9 Halaman Create kegiatan Member N

ke section Masjid

Logout Button Jika diklik, penggunaakan keluar dari sistem 7 Nama

Kegiatan TextField Memasukkankegiatan nama 8 Alamat Text

Field Memasukkan alamatkegiatan

9 Tags Text

Field Memasukkan tags 1

(54)

10) Halaman Artikel Member

Gambar 3.6 Rancangan Kasar Halaman Artikel

Halaman ini merupakan halaman yang memberikan informasi kepada pengguna mengenai daftar artikel apa saja yang ada.

Tabel 3.6 Penjelasan Halaman Artikel Member

ke section Masjid

(55)

Screenshot 3.6 Halaman Artikel

11) Halaman Daftar Artikel Member

Gambar 3.11 Rancangan Kasar Halaman Daftar Artikel Member

(56)

Tabel 3.11 Penjelasan Halaman Daftar Artikel Member

Screenshot 3d11 Halaman Daftar Artikel Member No Nama objek Tipe Keterangan

ke section Masjid

Logout Button Jika diklik, penggunaakan keluar dari sistem 7 Create new

(57)

12) Halaman Create Artikel Member

Gambar 3.12 Rancangan Kasar Halaman Create Artikel Member

Halaman ini merupakan halaman yang digunakan oleh pengguna untuk membuat atau menambahkan artikel baru.

T a b e l 3 . 1 2

Halaman Create Artikel Member

50

ke section Masjid

Logout Button Jika diklik, penggunaakan keluar dari sistem 7 Judul artikel Text

Field Memasukkanartikel judul

8 Tags Text

Field Memasukkan tags 9 Author Text

(58)

Screenshot 3.12 Halaman Create Artikel Member

13) Halaman About Us Member

Gambar 3.7 Rancangan Kasar Halaman About Us

(59)

T a b e l 3 . 7

Penjelasan Halaman About Us

Screenshot 3.7 Halaman About Us N

ke section Masjid

Logout Button Jika diklik, penggunaakan keluar dari sistem 7 Filkom UB Link Jika diklik, akan menuju

(60)

14) Halaman Home Admin

Gambar 3.14 Rancangan Kasar Halaman Home Admin

Halaman ini merupakan halaman home untuk admin yang berisi mengenai daftar kegiatan dan artikel terbaru, pegumuman pengajian, serta review dari suatu masjid.

o Nama objek Tipe Keterangan

ke section Masjid

5 Member Menu Jika diklik, akan menuju ke section member 6 Waiting List Menu Jiki diklik, akan menuju

ke section waiting list 7 About Us Menu Jika diklik, akan menuju

(61)

Screenshot 3.14 Halaman Home Admin

15) Halaman Daftar Masjid Admin

Gambar 3.15 Rancangan Kasar Halaman Daftar Masjid Admin

(62)

T a b e l 3 . 1 5 Halaman

Daftar Masjid Admin

Screenshot 3.15 Halaman

Daftar Masjid Admin

16)

Halaman Edit Post (Edit Masjid)

Gambar 3.16 Rancangan Kasar Halaman Edit Post No Nama objek Tipe Keterangan

ke section Masjid

ke section About Us 8 Tombol

Logout Button Jika diklik, penggunaakan keluar dari sistem 9 Tambah

masjid baru Link Jika diklik, akan menujuke section create post 10 Tombol Edit Button Jika diklik, akan menuju

ke section edit post 11 Tombol

(63)

Halaman ini merupakan halaman yang digunakan oleh admin untuk mengedit data masjid, seperti title, category, status, dan lainnya.

`

17) Halaman Daftar Kegiatan Admin

ke section Masjid

Logout Button Jika diklik, penggunaakan keluar dari sistem

9 Title Text

Field Memasukkanmasjid nama

10 Tags Text

Field Memasukkan tags 11 Category Dropdo

wn Memilih kategori yangada 12 Status Dropdo

wn Memilih status daripostingan 13 Update

(64)

Gambar 3.17 Rancangan Kasar Halaman Daftar Kegiatan Admin

Halaman ini merupakan halaman yang berisi mengenai daftar kegiatan yang ada.

T a b e l 3 . 1 7

ke section Masjid

Kegiatan Link Jika diklik, akan menujuke section create kegiatan

10 Tombol Edit Button Jika diklik, akan menuju ke section edit kegiatan 11 Tombol

(65)

18) Halaman Edit kegiatan Admin

Gambar 3.18 Rancangan Kasar Halaman Edit Kegiatan Admin

Halaman ini merupakan halaman yang digunakan untuk mengedit kegiatan yang ada.

58

ke section Masjid

Logout Button Jika diklik, penggunaakan keluar dari sistem

9 Nama

kegiatan TextField Memasukkankegiatan nama 10 Alamat Text

Field Memasukkan alamatkegiatan

11 Tags Text

Field Memasukkan tags 12 Update

(66)

Tabel 3.18 Halaman Edit Kegiatan Admin

Screenshot 3.18 Halaman Edit Kegiatan Admin

(67)

Gambar 3.19 Rancangan Kasar Halaman Daftar Artikel Admin

Halaman ini merupakan halaman yang berisi daftar artikel yang terdapat dalam sistem.

Tabel 3.19 Halaman Daftar Artikel Admin

ke section Masjid

article Link Jika diklik, akan menujuke section create artikel 10 Tombol Edit Button Jika diklik, akan menuju

ke section edit artikel 11 Tombol

(68)

Screenshot 3.19 Halaman Daftar Artikel Admin

20) Halaman Create Artikel Admin

Gambar 3.20 Halaman Create Artikel Admin

(69)

Tabel 3.10 Halaman Create Artikel Admin No Nama

ke section Masjid

5 Member Menu Jika diklik, akan menuju ke section member 6 Waiting

List Menu Jiki diklik, akan menujuke section waiting list 7 About Us Menu Jika diklik, akan menuju

Logout Button Jika diklik, penggunaakan keluar dari sistem 9 Judul

Artikel TextField Memasukkanartikel judul 10 Tags Text

(70)

Screenshot 3.10 Halaman Create Artikel Admin

21) Halaman Edit Artikel Admin

Gambar 3.21 Rancangan Kasar Halaman Edit Artikel Admin

(71)

Tabel 3.21 Halaman Edit Artikel Admin

Screenshot 3.21 Halaman Edit Artikel Admin

22) Halaman Member Admin

N

o Nama objek Tipe Keterangan

1 Home Menu Jika diklik, akan

Artikel TextField Memasukkan judulartikel 10 Tags Text

Field Memasukkan namaauthor 12 Update

(72)

Gambar 3.22 Rancangan Kasar Halaman Member

Halaman ini merupakan halaman yang mmeberikan informasi mengenai daftar member yang terdata dalam web ini.

Tabel 3.22

ke section Masjid

Logout Button Jika diklik, penggunaakan keluar dari sistem 9 Create

new member

Link Jika diklik, akan menuju ke section create user

10 Tombol

Edit Button Jika diklik, akan menujuke section edit user 11 Tombol

(73)

23) Halaman Edit User

Gambar 3.23 Rancangan Kasar Halaman Edit User

(74)

Tabel 3.23

ke section Masjid

Logout Button Jika diklik, penggunaakan keluar dari sistem 9 Username Text

Field Memasukkan username 10 Email Text

Field Memasukkan email 11 Password Text

Field Memasukkan password 12 Status Dropdo

(75)

Gambar 3.24 Rancangan Kasar Halaman Create User

Halaman ini merupakan halaman yang digunakan untuk menambahkan member baru.

T a b e l 3 . 2 4

ke section Masjid

Logout Button Jika diklik, penggunaakan keluar dari sistem 9 Username Text

Field Memasukkan username 10 Email Text

Field Memasukkan email 11 Password Text

Field Memasukkan password 12 Status Dropdo

(76)

25) Halaman Waiting List

Gambar 3.25 Rancangan Kasar Halaman Waiting List

Halaman ini merupakan halaman berisi mengenai daftar member dan juga masjid yang sedang dalam proses untuk masuk ke dalam system.

69

ke section Masjid

(77)

Tabel 3.25 Halaman Waiting List