Revisi TIF E DPPL BAB1 2 3 KELOMPOK9

REKAYASA PERANGKAT LUNAK IF - DDOKUMEN PERANCANGAN PERANGKAT LUNAK

SISTEM INFORMASI MEMAKMURKAN MASJID

UNTUK :PENGGUNA

Dipersiapkan oleh:KELOMPOK 9

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

LaboratoriumRekayasaPerangkat LunakProgram Teknologi Informasi dan Ilmu Komputer

Nomor Dokumen Halaman

SEL01-Sxx <xx:no grp> #/jml #Revisi : 3 Tanggal:

30 Oktober 2014

DOKUMEN PERANCANGAN PERANGKAT LUNAK

Nomor DokumenRevisi : x

DAFTAR PERUBAHAN

Revisi Deskripsi

A

B

C

D

F

G

INDEX

TGL

A

10/10/14

B

24/10/14

C

31/10/14D E F G H

Ditulis

Oleh

Kelompokx Kelompox Kelompokx

Diperiksa

Oleh

Asprak Asprak Asprak

Disetujui

Oleh

ii



DAFTAR HALAMAN PERUBAHAN

Halaman Revisi Halaman Revisi

iii



DAFTAR ISI

NAMA SISTEM......................................................................................................... i

DAFTAR PERUBAHAN.............................................................................................. ii

DAFTAR HALAMAN PERUBAHAN...........................................................................iii

DAFTAR ISI............................................................................................................. iv

DAFTAR TABEL........................................................................................................v

DAFTAR DIAGRAM.................................................................................................vi

DAFTAR GAMBAR................................................................................................. vii

BAB 1 PENDAHULUAN............................................................................................1

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

3.3 Perancangan Antarmuka.......................................................................4

iv



DAFTAR TABEL

Tabel 2.1 Pembentukan bilangan random untuk Indeks Masa Tubuh (IMT). .Error! Bookmark not defined.

Tabel 2.2 Contoh tabel 2..........................................Error! Bookmark not defined.

v



DAFTAR DIAGRAM

vi



DAFTAR GAMBAR

vii



BAB 1 PENDAHULUAN

1.1 Deskripsi Umum DokumenDokumen 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.

1.2 Tujuan Penulisan DokumenDokumen 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.

1.3 Lingkup MasalahSebagai tempat peribadatan bagi umat Islam, masjid memiliki fungsi yang sangat

istimewa yang membedakannya dengan tempat-tempat peribadatan agama lain. Masjid tidak hanya sekedar tempat sholat, lebih dari itu masjid mampu berperan sebagai basis perubahan masyarakat yang memicu kebangkitan dan kemajuan umat. Sebagai pusat aktifitas dan kegiatan umat, masjid memiliki peran dan fungsi yang sangat penting ditengah-tengah masyarakat, namun fakta yang ada dilapangan ternyata mengatakan bahwa peran dan fungsi masjid belum secara maksimal.

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 dengan bertambahnya jumlah penduduk khususnya yang beragama islam. Tetapi pertumbuhan tersebut baru bersifat fisik, belum sepenuhnya menyentuh pada tataran peran dan fungsinya sebagai sarana peribadatan

1

Zen, 25/11/15,

Masalah dari pembuatan skpl menjadi dppl bagaimana? Tidak disebutkan disini?



kepada Allah SWT yang utama ditengah-tengah kehidupan kaum muslimin di indonesia khususnya di kota malang, sehingga tidak mengherankan jika kita jumpai disana-sini banyak 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.

1.4 Definisi, Istilah, dan SingkatanIstilah 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 end user agar mengetahui informasi yang terkait dengan perangcangan dari Sistem yang akan dibuat.

Admin Administrator

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

1.5 ReferensiDokumen 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.

2. IEEE Std 830-1993, IEEE Recommended Practice for Software Requirement Specification

2



BAB 2 DESKRIPSI PERANCANGAN GLOBAL

2.1 Perancangan Arsitektur

2.1.1 Sequence Diagram3.4.3 Sequence Diagram

SI_MAMAS_F_G01: Registrasi

Gambar 3. Sequence Diagram Registrasi Member dan Admin

Aktor : GuestGuest memilih menu untuk registrasi, kemudian isi form registrasi secara lengkap dan benar setelah itu submit. Selanjutnya dilakukan cek apakah username telah terdaftar atau belum, jika username sudah terdaftar maka registrasi gagal dan tampilkan pesan eror, tapi jika username belum terdaftar maka registrasi sukses dan tampilkan pesan sukses. Tapi status Member masih notApproved atau harus menunggu persetujuan dari admin.

3

Zen, 25/11/15,

Tambahkan keterangan, apa bedanya sequence disini dengan yg ada di skpl. Perubahannya apa aja kalaupun memang sama jelaskan juga kenapa sama. Keterangan ini per sequence . kalau sama tdk perlu diberi gambar lagi, tp kalau berbeda digambar lagi skplnya.



SI_MAMAS_F_G02: Login

Gambar 4. Sequence Diagram Login Member dan Admin

Aktor : GuestGuest memilih menu untuk login, kemudian isi form login yaitu username dan password. Kemudian dilakukan validasi data login, jika valid maka login sukses dan ditampilkan pesan login sukses, jika tidak valid maka logininvalid dan diarahkan ke halaman error.

4



SI_MAMAS_F_G03: Melihat Daftar Masjid

Gambar 5. Sequence Diagram Lihat Daftar Masjid

Aktor : Guest, Member, AdminAktor 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, AdminAktor memilih menu untuk lihat daftar komentar, Kemudian akan ditampilkan seluruh Komentar yang ada pada masjid atau kegiatan yang bersangkutan.

5



SI_MAMAS_F_G05: Melihat Daftar Kegiatan

Gambar 7. Sequence Diagram Lihat Daftar Kegiatan

Aktor : Guest, Member, AdminAktor 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, AdminAktor memilih menu untuk Logout, kemudian akan tampil peringatan untuk konfirmasi Logout, jika pilih ya maka login session akan diakhiri, dan aktor akan menjadi guest biasa.

6



SI_MAMAS_F_M02: Melihat Kegiatan Bermasalah

Gambar 9. Sequence Diagram kegiatan bermasalah

Aktor : Guest, Member, AdminAktor 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, AdminAktor memilih menu untuk tambah masjid, kemudian aktor diharuskan untuk mengisi form detail masjid untuk kemudian disimpan data disimpan datanya kedalam database masjid. Tapi status masjid masih notApproved atau harus menunggu persetujuan dari admin.

7



SI_MAMAS_F-M04: Hapus Masjid

Gambar 11. Sequence Diagram Login Hapus Masjid

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

8



SI_MAMAS_F_M05: Edit Masjid

Gambar 12. Sequence Diagram Edit Masjid

Aktor : Member, AdminAktor 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

Gambar 13. Sequence Diagram Tambah Komentar

Aktor : Member, Admin

9



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, AdminAktor memilih menu untuk Hapus Komentar yang dipilih, kemudian akan tampil peringatan untuk konfirmasi hapus kegiatan, jika pilih ya maka komentar yang bersangkutan akan dihapus dari database Komentar. Komentar yang dihapus hanya bisa komentar milik sendiri, kecuali admin yang dapat menghapus semuanya.

10



SI_MAMAS_F_M08: Tambah Kegiatan

Gambar 15. Sequence Diagram Tambah Kegiatan

Aktor : Member, AdminAktor 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

11



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

SI_MAMAS_F_M10: Hapus Kegiatan

Gambar 17. Sequence Diagram Hapus Kegiatan

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

12



SI_MAMAS-F-A01: Melihat Daftar Member

Gambar 18. Sequence Diagram Daftar Member

Aktor : AdminAdmin memilih menu untuk lihat daftar member, Kemudian akan ditampilkan seluruh Member yang terdaftar dan status Approved.

13



SI_MAMAS-F-A02: Hapus Member

Gambar 19. Sequence Diagram Hapus Member

Aktor : AdminAktor 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

Aktor : Guest, Member, Admin

14



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 : AdminAktor memilih menu untuk Approve Registrasi Member yang dipilih pada waiting list, kemudian akan tampil peringatan untuk konfirmasi Approve Member, jika pilih ya maka status member yang bersangkutan akan berubah menjadi Approved.

15



SI_MAMAS-F-A05: Approve daftar masjid

Gambar 22. Sequence Diagram Approve Masjid

Aktor : AdminAktor 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.

2.1.2 Class Diagram

16

Zen, 25/11/15,

Atributnya mana?



2.1.3 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.

2.2 Perancangan Data

2.3 Perancangan Antarmuka User familiarity : Antarmuka yang berada dalam sistem dirancang untuk

sesuai dengan antarmuka yang biasa dimengerti oleh user, karena SIMAMAS adalah sistem informasi yang berbasis website maka antarmuka yang digunakan didalam sistem disesuaikan dengan antarmuka yang biasa di gunakan pada sistem berbasis website misalkan Menu login berada di pojok kiri atas, disusul menu bar, serta

17

Zen, 11/25/15,

Isinya CDM ya bukan class diagram. dan penjelasan bagaimana dari class diagram ke CDM lalu ke PDM ..



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.

2.4 Lingkungan Pengembangan Sistem

2.4.1 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

2.4.2 Sistem OperasiDalam perancangan dan pengembangan sistem, sistem operasi yang digunakan adalah Windows 8.1

2.4.3 Hardware- Prosesor : Dual Core Intel inside i3 2.0 GHz.

- RAM : 4 GB.

- Hard disk : 500 GB.

18

Zen, 25/11/15,

Tambahkan arsitektur sistem (gambar) app ini one tier / two tier / three tier?. Arsitektur sistem bernomor 2.4.4



BAB 3 DESKRIPSI PERANCANGAN RINCI

3.1 Perancangan Komponen

Kelas Controller homeNama Kelas : c_home

Tabel Kelas c_homeNama 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 loginNama Kelas : c_login

Tabel Kelas c_loginNama Operasi Visibility Keterangan

login( ) Public Digunakan untuk memanggil view pada halaman form login.

ceklogin( ) Public Digunakan untuk validasi login dengan cara mencocokan username dan

19

Zen, 25/11/15,

Bagian ini memang ada disemester lalu, tapi untuk tahun ini tidak perlu



password yang diinputkan pada form login, apakah 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 memberNama Kelas : c_member

Tabel 4. Kelas c_memberNama Operasi Visibility Keterangan

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.

20



edit( ) Public Digunakan untuk menampilkan form untuk mengedit member yang dipilih, kemudian data member yang dipilih ditempel pada form bersangkutan untuk kemudian diubah, dan ketika submit hasil 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 masjidNama Kelas : c_masjid

Tabel 4. Kelas c_masjidNama Operasi Visibility Keterangan

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.

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

edit( ) Public Digunakan untuk 21



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

delete( ) Public Digunakan untuk 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 kegiatanNama Kelas : c_kegiatan

Tabel Kelas c_kegiatantNama Operasi Visibility Keterangan

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.

create( ) Public Digunakan untuk menampilkan form untuk

22



menambah kegiatan baru, kemudian hasil inputnya digunakan oleh model kegiatan untuk insert kedalam database.

edit( ) Public Digunakan untuk menampilkan form untuk mengedit kegiatan yang dipilih, kemudian data kegiatan yang dipilih ditempel pada form bersangkutan untuk kemudian diubah, dan ketika submit hasil inputnya digunakan oleh model kegiatan untuk update kedalam database.

delete( ) Public Digunakan untuk menghapus kegiatan yang dipilih dari database.

Kelas Controller artikelNama Kelas : c_artikel

Tabel Kelas c_kegiatanNama Operasi Visibility Keterangan

index( ) Public Untuk menampilkan daftar artikel dalam bentuk tabel

23



pada view halaman daftar member.

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

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

edit( ) Public Digunakan untuk menampilkan form untuk mengedit artikel yang dipilih, kemudian data artikel yang dipilih ditempel pada form bersangkutan untuk kemudian diubah, dan ketika submit hasil inputnya digunakan oleh model artikel untuk update kedalam database.

delete( ) Public Digunakan untuk menghapus artikel yang dipilih dari database.

Kelas Model dataNama Kelas : m_data

Tabel Kelas m_dataNama Operasi Visibility Keterangan

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

24



Kelas Model loginNama Kelas : m_login


ambilPengguna(String, String)

Public Digunakan untuk 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 loginNama Kelas : m_login


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

addComments(String) Public Digunakan untuk melakukan query insert masjid kedalam tabel

25



komentar. Sesuai dengan data input yang dikirimkan oleh controller masjid yang diperoleh dari form komentar yang telah diisi.

Kelas Model memberNama Kelas : m_member


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 26



mengubah atau update status member yang bersangkutan menjadi ‘Approved’ pada tabel member.

deleteMember(int) Public Melakukan query untuk menghapus member yang memiliki id sama dengan parameter.

Kelas Model masjidNama Kelas : m_masjid

Tabel Kelas m_masjidNama Operasi Visibility Keterangan

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

27



diperoleh dari form tambah masjid yang telah diisi.

updateMasjid ( ) Public Melakukan query untuk mengubah data yang bersangkutan pada tabel masjid sesuai dengan data input yang dikirimkan oleh controller member yang 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 kegiatanNama Kelas : m_kegiatan

Tabel Kelas m_ kegiatanNama Operasi Visibility Keterangan

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

28



kegiatan. Sesuai dengan data input yang dikirimkan oleh controller kegiatan yang diperoleh dari form tambah kegiatan yang telah diisi.

updateKegiatan ( ) Public Melakukan query untuk mengubah data yang bersangkutan pada tabel 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 artikelNama Kelas : m_artikel

Tabel Kelas m_artikelNama Operasi Visibility Keterangan

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

29



diperoleh dari form tambah artikel yang telah diisi.

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

deleteArtikel (int) Public Melakukan query untuk menghapus artikel yang memiliki id sama dengan parameter.

Algoritma- RegistrasiFunction Registrasi (username)Load.view(registrasi)

Username = input.post(username)

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

30



- Login

Function Login ()Load.view(login)

Username = input.post(username)

Password = input.post(password)

If (getMember(username, password).num_rows <> 0) then

Session.setuserdata(isLogin, True)

Session.setuserdata(dataMember, cek_row)

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 MasjidIf(submitted()) then

addMasjid(idmasjid)

redirect(index)

Else

Load.view(add masjid)

End

Function addMasjid ($userid) sql = query(‘Insert Into Masjid (‘data masjid’) Values

(‘hasil input form’)’)

return sql

- Edit MasjidIf(submitted()) then

31



updatePst(idmasjid)

echo (“Masjid berhasil diupdate”)

redirect(daftar_masjid)

Else

Load.view(form_edit_masjid)

End

Function editMasjid ($userid) sql = query(‘ Update Masjid SET (‘data masjid’) values

(‘hasil input form edit masjid’)’)

return sql

- LogoutSession.sess_destroy()

Redirect(login)

3.2 Perancangan Data

32

Zen, 25/11/15,

Tambah penjelasan singkat aja.



3.3 Perancangan Antarmuka

3.3.1 Antarmuka Pengguna (tiap kelas isi bisa berbeda-beda)

1) Halaman Index (Login)

Gambar 3.1 Rancangan Kasar Halaman Index Login

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 username pengguna

2 Password Text Field Memasukkan password pengguna

3 Tombol Login Button Jika diklik, pengguna akan masuk ke sistem

4 Daftar disini Link Jika diklik, pengguna akan masuk ke halaman registrasi

Tabel 3.1 Tabel Penjelasan Halaman Index

33

Zen, 11/25/15,

Glitch?

Zen, 25/11/15,

Untuk sketsanya, bagian bagiannya yg dijelaskan ditabel dinomori,



Screenshot 3.1 Halaman Index Login

2) Halaman index (Registrasi)

Gambar 3.2 Rancangan Kasar Halaman Index Registrasi

Halaman ini merupakan halaman index yang ditujukan untuk

pengguna jika ingin membuat akun.

Tabel 3.2 Tabel Penelasan Halaman Index Registrasi

Screenshot 3.2 Halaman Index Registrasi

34


1 Username Text Field Memasukkan username pengguna

2 Password Text Field Memasukkan password pengguna

3 Email Text Field Memasukkan alamat email pengguna

4 Register Tombol Jika diklik akan menyimpan data registrasi ke dalam database



3) Halaman Home Guest / Member

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.

35


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 Logout

Button Jika diklik, pengguna akan keluar dari sistem



Tabel 3.3 Tabel Penjelasan Halaman Home

Screenshot 3.3 Halaman Home

4) Halaman Masjid Member

36



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

37







6 Tombol Logout


7 Ke daftar Masjid

Link Jika diklik, akan menuju ke section daftar masjid



Screenshot 3.4 Halaman Masjid Member

5) Halaman Daftar Masjid Member

Gambar 3.5 Rancangan Kasar Halaman Daftar Masjid Member

Halaman ini merupakan halaman yang menampilkan daftar masjid yang ada.

38



Tabel 3.5 Halaman Daftar Masjid Member

Screenshot 3.5 Halaman Daftar Masjid Member

6) Halaman Add Masjid Member

Gambar 3.6 Rancangan Kasar Halaman Add Masjid Member

39







6 Tombol Logout


7 Tambah Masjid baru

Link Jika diklik, akan menuju ke section tambah masjid.



Halaman ini merupakan halaman yang dapat digunakan oleh pengguna untuk menambahkan masjid yang diinginkan.

Tabel 3.6 Penjelasan Halaman Add Masjid Member

Screenshot 3.6 Halaman Add Masjid Member

7) Halaman Kegiatan Member

40







6 Tombol Logout


7 Nama Masjid Text Field Memasukkan nama masjid

8 Alamat Text Field Memasukkan alamat masjid

9 Tags Text Field Memasukkan tags

10 Submit Button Jika diklik, data akan disimpan dan masuk dalam database



Gambar 3.5 Rancangan Kasar Halaman Kegiatan Member

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

Tabel 3.5 Penjelasan Halaman Kegiatan Member

Screenshot 3.5 Halaman Kegiatan

8) Halaman Daftar Kegiatan Member

41

No Nama objek

Tipe Keterangan






6 Tombol Logout


7 Ke daftar Kegiatan

Link Jika diklik, akan menuju ke section daftar kegiatan



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 Penjelasan Halaman Daftar Kegiatan Member

42







6 Tombol Logout


7 Create new kegiatan

Link Jika diklik, akan menuju ke section add kegiatan



Screenshot 3.8 Halaman Daftar Kegiatan Member

9) Halaman Create Kegiatan Member

Gamabar 3.9 Rancangan Kasar Halaman Create Kegiatan Member

Halaman ini merupakan halaman yang digunakan oleh pengguna

untuk membuat atau menambah kegiatan yang baru.

43



Tabel 3.9 Penjelasan Halaman Create kegiatan Member

Screenshot 3.9 Halaman Create kegiatan Member

44

No

Nama objek Tipe Keterangan






6 Tombol Logout


7 Nama Kegiatan

Text Field Memasukkan nama kegiatan

8 Alamat Text Field Memasukkan alamat kegiatan


10 Submit Button Jika diklik, data akan disimpan dan masuk dalam dataase



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

45







6 Tombol Logout Button Jika diklik, pengguna akan keluar dari sistem

7 Ke daftar Artikel

Link Jika diklik, akan menuju ke section daftar artikel



Screenshot 3.6 Halaman Artikel

11) Halaman Daftar Artikel Member

Gambar 3.11 Rancangan Kasar Halaman Daftar Artikel Member

Halaman ini merupakan halaman yang memberikan informasi

kepada pengguna mengenai daftar artikel apa saja yang ada.

Tabel 3.11 Penjelasan Halaman Daftar Artikel Member

46








7 Create new article

Link Jika diklik, akan menuju ke section Create artikel



Screenshot 3.11 Halaman Daftar Artikel Member

12) Halaman Create Artikel Member

Gambar 3.12 Rancangan Kasar Halaman Create Artikel Member

47



Halaman ini merupakan halaman yang digunakan oleh pengguna

untuk membuat atau menambahkan artikel baru.

Tabel 3.12 Halaman Create Artikel Member

Screenshot 3.12 Halaman Create Artikel Member

48








7 Judul artikel Text Field Memasukkan judul artikel


9 Author Text Field Memasukkan nama author

10 Submit Button Jika diklik, data akan tersimpan dan masuk ke dalam database.

Zen, 25/11/15,

Dirapikan ya



13) Halaman About Us Member

Gambar 3.7 Rancangan Kasar Halaman About Us

Halaman ini merupakan halaman yang memberikan sekilas informasi mengenai FILKOM dan pengguna diberikan link untuk menuju ke web FILKOM.

Tabel 3.7 Penjelasan Halaman About Us

Screenshot 3.7 Halaman About Us

49







6 Tombol Logout


7 Filkom UB Link Jika diklik, akan menuju ke web FILKOM



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.

50



Tabel 3.14 Halaman Home Admin

Screenshot 3.14 Halaman Home Admin

15) Halaman Daftar Masjid Admin

Gambar 3.15 Rancangan Kasar Halaman Daftar Masjid Admin

Halaman ini merupakan halaman yang memberikan informasi mengenai daftar masjid yang ada.

51






5 Member Menu Jika diklik, akan menuju ke section member

6 Waiting List Menu Jiki diklik, akan menuju ke section waiting list





Tabel 3.15 Halaman Daftar Masjid Admin

Screenshot 3.15 Halaman Daftar Masjid Admin

16)

Halaman Edit Post (Edit Masjid)

52









8 Tombol Logout


9 Tambah masjid baru

Link Jika diklik, akan menuju ke section create post

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

11 Tombol Delete Button Jika diklik, maka akan menghapus masjid yang dipilih



Gambar 3.16 Rancangan Kasar Halaman Edit Post

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

` Tabel 3.16 Halaman Edit Post Admin

Screenshot 3.16 Halaman Edit post Admin

17) Halaman Daftar Kegiatan Admin

53









8 Tombol Logout


9 Title Text Field Memasukkan nama masjid


11 Category Dropdown

Memilih kategori yang ada

12 Status Dropdown

Memilih status dari postingan

13 Update page Button Jika diklik, maka data yang baru telah diupdate



Gambar 3.17 Rancangan Kasar Halaman Daftar Kegiatan Admin

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

Tabel 3.17 Halaman Daftar kegiatan Admin

Screenshot 3.17 Halaman Daftar Kegiatan Admin

54









8 Tombol Logout


9 Create new Kegiatan

Link Jika diklik, akan menuju ke section create kegiatan

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

11 Tombol Delete Button Jika diklik, maka akan menghapus kegiatan yang dipilih



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.

55









8 Tombol Logout


9 Nama kegiatan

Text Field Memasukkan nama kegiatan

10 Alamat Text Field Memasukkan alamat kegiatan


12 Update page Button Jika diklik, maka data yang baru telah diupdate



Tabel 3.18 Halaman Edit Kegiatan Admin

Screenshot 3.18 Halaman Edit Kegiatan Admin

19) Halaman Daftar Artikel Admin

56



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

57









8 Tombol Logout


9 Create new article

Link Jika diklik, akan menuju ke section create artikel

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

11 Tombol Delete Button Jika diklik, maka akan menghapus artikel yang dipilih



Screenshot 3.19 Halaman Daftar Artikel Admin

20) Halaman Create Artikel Admin

Gambar 3.20 Halaman Create Artikel Admin

Halaman ini merupakan halaman yang digunakan untuk membuat atau menambah artikel baru.

58



Tabel 3.10 Halaman Create Artikel Admin

59









8 Tombol Logout


9 Judul Artikel Text Field Memasukkan judul artikel



12 Submit Button Jika diklik, maka artikel akan disimpan dan masuk ke dalam database



Screenshot 3.10 Halaman Create Artikel Admin

21) Halaman Edit Artikel Admin

Gambar 3.21 Rancangan Kasar Halaman Edit Artikel Admin

Halaman ini merupakan halaman yang digunakan untuk mengedit artikel yang sudah ada.

60



Tabel 3.21 Halaman Edit Artikel Admin

Screenshot 3.21 Halaman Edit Artikel Admin

22) Halaman Member Admin

61









8 Tombol Logout


9 Judul Artikel Text Field Memasukkan judul artikel



12 Update page Button Jika diklik, maka artikel yang telah diedit akn terupdate



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 Halaman Member

Screenshot 3.22 Halaman Member

23) Halaman Edit User

62









8 Tombol Logout


9 Create new member

Link Jika diklik, akan menuju ke section create user

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

11 Tombol Delete

Button Jika diklik, maka akan menghapus user yang dipilih



Gambar 3.23 Rancangan Kasar Halaman Edit User

Halaman ini merupakan halaman yang digunakan untuk mengedit data user, seperti username, email, password, dan status yang diberikan.

Tabel 3.23 Halaman Edit User

Screenshot 3.23 Halaman Edit User

63









8 Tombol Logout


9 Username Text Field Memasukkan username

10 Email Text Field Memasukkan email

11 Password Text Field Memasukkan password

12 Status Dropdown

Memilih status yang akan diberikan

13 Submit Button Jika diklik, maka data yang telah di edit akan berhasil di simpan dan masuk ke database.



24) Halaman Create User

Gambar 3.24 Rancangan Kasar Halaman Create User

Halaman ini merupakan halaman yang digunakan untuk menambahkan member baru.

Tabel 3.24 Halaman Create User

Screenshot 3.24 Halaman Create User

64









8 Tombol Logout


9 Username Text Field Memasukkan username

10 Email Text Field Memasukkan email

11 Password Text Field Memasukkan password

12 Status Dropdown Memilih status yang akan diberikan

13 Submit Button Jika diklik, maka data yang telah di edit akan berhasil di simpan dan masuk ke database.



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.

65









8 Tombol Logout


9 Tombol Status Button Jika diklik, maka member atau masjid yang sebelumnya notApproved, akan approved (berhasil masuk ke dalam system)



Tabel 3.25 Halaman Waiting List

Screenshot 3.25 Halaman Waiting List

66

Zen, 11/25/15,

Mana 3.3.2 mekanisme pertukaran datanya bagaimana?

Date post:	16-Nov-2023
Category:	Documents
Upload:	ubrawijaya
View:	0 times
Download:	0 times

Revisi TIF E DPPL BAB1 2 3 KELOMPOK9

Documents