Revisi TIF E DPPL BAB1 2 3 KELOMPOK9

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
Komputer

Nomor Dokumen

SEL01-Sxx

Revisi
3
:

Halaman

#/jml #
Tanggal:

30 Oktober
2014

DOKUMEN
PERANCANGAN
PERANGKAT LUNAK

Nomor Dokumen
Revisi : x

DAFTAR PERUBAHAN
Revisi

Deskripsi

A
B
C
D
F

G

INDEX

A

B

C

TGL

10/10/14

24/10/14

31/10/14

Kelompo

Kelomp

Kelompo

kx

ox

kx

Asprak

Asprak

Asprak

Ditulis
Oleh
Diperik
sa Oleh

Disetuj
ui Oleh

ii

D

E

F

G

H

DOKUMEN
PERANCANGAN
PERANGKAT LUNAK

Nomor Dokumen

Revisi : x

DAFTAR HALAMAN PERUBAHAN
Halama
n

Halama

Revisi

n

iii

Revisi

DOKUMEN
PERANCANGAN
PERANGKAT LUNAK

Nomor Dokumen
Revisi : x

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

DOKUMEN
PERANCANGAN
PERANGKAT LUNAK

Nomor Dokumen
Revisi : x

DAFTAR TABEL
Tabel 2.1 Pembentukan bilangan random untuk Indeks Masa
Tubuh (IMT).................................Error! Bookmark not defnedd
Tabel 2.2 Contoh tabel 2.............Error! Bookmark not defnedd

v

DOKUMEN
PERANCANGAN
PERANGKAT LUNAK

DAFTAR DIAGRAM

vi

Nomor Dokumen
Revisi : x

DOKUMEN
PERANCANGAN
PERANGKAT LUNAK

DAFTAR GAMBAR

vii

Nomor Dokumen
Revisi : x

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
Sebagai tempat peribadatan bagi umat Islam, masjid memiliki
fungsi yang sangat istimewa yang membedakannya dengan tempattempat 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.
1

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

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
end user agar mengetahui
informasi yang terkait dengan
perangcangan dari Sistem yang
akan dibuat.

Admin

Administrator

Guest

Pengguna
perangkat
secara umum

Member

Penguna umum yang telah
mendaftarkan diri pada system
selanjutnya
disebut
user
member.

lunak

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, AddisonWesley, 2011.
2. IEEE Std 830-1993, IEEE Recommended Practice for Software
Requirement Specification
2

3

BAB 2
DESKRIPSI PERANCANGAN GLOBAL
1d1 Perancangan Arsitektur
1d1d1 Sequence Diagram
3.4.3 Sequence Diagram
Registrasi

SI_MAMAS_F_G01:

Gambar 3. Sequence Diagram Registrasi Member dan Admin

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

4

SI_MAMAS_F_G02:

Login

Gambar 4. Sequence Diagram Login Member dan Admin

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

5

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

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

SI_MAMAS_F_M01:

Gambar 8. Sequence Diagram Logout

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

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

SI_MAMAS_F_M03:

Masjid

Gambar 10. Sequence Diagram Tambah Masjid

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

8

Hapus

SI_MAMAS_F-M04:

Masjid

Gambar 11. Sequence Diagram Login Hapus Masjid

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

9

Edit

SI_MAMAS_F_M05:

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

Gambar 13. Sequence Diagram Tambah Komentar

Aktor : Member, Admin

10

Komentar

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

11

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

Aktor memilih menu untuk Edit Kegiatan, kemudian aktor
diharuskan untuk mengisi form detail kegiatan yang
12

bersangkutan untuk kemudian diupdate datanya dengan yang
baru.
SI_MAMAS_F_M10:

Hapus

Kegiatan

Gambar 17d Sequence Diagram Hapus Kegiatan

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

13

SI_MAMAS-F-A01:

Melihat

Daftar

Member

Gambar 18. Sequence Diagram Daftar Member

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

14

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

Aktor : Guest, Member, Admin
15

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

16

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.

1d1d2 Class Diagram

17

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
 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
18

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

-

Editor / IDE

: Notepad++ dan DBDesigner

-

Framework

: CodeIgniter (CI)

-

Web server

: Apache

-

Browser
UC

: Mozilla Firefox,Internet Explorer,

: MySQL.

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.

-

RAM

: 4 GB.
19

-

Hard disk

: 500 GB.

20

BAB 3
DESKRIPSI PERANCANGAN RINCI
3d1 Perancangan Komponen
Kelas Controller home
Nama Kelas : c_home

Nama Operasi

Tabel Kelas c_home
Visibility

Keterangan

Construct( )

Public

Memanggil model
yang telah dibuat

pada

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

Nama Operasi

Tabel Kelas c_login
Visibility

Keterangan

login( )

Public

Digunakan
untuk
memanggil view pada
halaman form login.

ceklogin( )

Public

Digunakan untuk validasi
login
dengan
cara
mencocokan username dan
password yang diinputkan
pada form login, apakah

21

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

Nama Operasi

Tabel 4. Kelas c_member
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.

edit( )

Public

Digunakan
untuk
menampilkan form untuk
mengedit member yang

22

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 masjid
Nama Kelas : c_masjid

Nama Operasi

Tabel 4. Kelas c_masjid
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
menampilkan form untuk
mengedit masjid yang
dipilih, kemudian data
masjid
yang
dipilih

23

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 kegiatan
Nama Kelas : c_kegiatan

Nama Operasi

Tabel Kelas c_kegiatant
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
menambah kegiatan baru,
kemudian hasil inputnya
digunakan oleh model
kegiatan
untuk
insert
kedalam database.

24

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 artikel
Nama Kelas : c_artikel

Nama Operasi

Tabel Kelas c_kegiatan
Visibility

Keterangan

index( )

Public

Untuk menampilkan daftar
artikel dalam bentuk tabel
pada view halaman daftar
member.

Read( )

Public

Digunakan untuk melihat
detail artikel yang dipilih
beserta
komentar
di
dalamnya.

25

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 data
Nama Kelas : m_data

Nama Operasi
loadDatabase( )

Tabel Kelas m_data
Visibility
Public

Keterangan
Digunakan
untuk
menyambungkan
pada
database yang dibuat.

Kelas Model login
Nama Kelas : m_login

Nama Operasi
ambilPengguna(String,

Tabel Kelas m_data
Visibility
Public
26

Keterangan
Digunakan

untuk

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

Nama Operasi

Tabel Kelas m_data
Visibility

Keterangan

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
komentar. Sesuai dengan
data input yang dikirimkan
oleh controller masjid yang
diperoleh
dari
form
komentar yang telah diisi.

27

Kelas Model member
Nama Kelas : m_member

Nama Operasi

Tabel Kelas m_data
Visibility

Keterangan

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.

deleteMember(int)

Public

Melakukan query untuk
menghapus member yang

28

memiliki id sama dengan
parameter.

Kelas Model masjid
Nama Kelas : m_masjid

Nama Operasi

Tabel Kelas m_masjid
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
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

29

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

Nama Operasi

Tabel Kelas m_ kegiatan
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
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

30

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

Nama Operasi

Tabel Kelas m_artikel
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
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

31

artikel.
deleteArtikel (int)

Public

Melakukan query untuk
menghapus artikel yang
memiliki id sama dengan
parameter.

Algoritma
- Registrasi
Function 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

- 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)
32

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
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 Masjid
If(submitted()) then
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’)’)
33

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)

Gambar 3.1 Rancangan Kasar Halaman Index Login

34

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

Jika diklik, pengguna
akan
masuk
ke
halaman registrasi

Link

Tabel 3d1 Tabel Penjelasan Halaman Index

Screenshot 3d1 Halaman Index Login

2) Halaman index (Registrasi)

35

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

No

Nama objek Tipe

Keterangan

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
menyimpan
registrasi
ke
database

Halaman
Index
Registrasi

Screenshot 3.2 Halaman Index Registrasi

3) Halaman Home Guest / Member

36

akan
data
dalam

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
Logout

Button

Jika diklik, pengguna
akan keluar dari sistem

37

Tabel 3.3 Tabel Penjelasan Halaman Home

Screenshot 3.3 Halaman Home

4) Halaman Masjid Member

38

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.

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
Logout

Button

Jika diklik, pengguna
akan keluar dari sistem

7

Ke
daftar Link
Masjid

Jika diklik, akan menuju
ke section daftar masjid

Tabel 2.4 Tabel Penjelasan Halaman Masjid Member

39

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.

40

T

a

b

e

l

3

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
Logout

Button

Jika diklik, pengguna
akan keluar dari sistem

7

Tambah
Masjid baru

Link

Jika diklik, akan menuju
ke
section
tambah
masjid.

Screenshot 3.5 Halaman Daftar Masjid Member

6) Halaman Add Masjid Member

Gambar

3.6

Rancangan

Member

41

Kasar

Halaman

Add

Masjid

Halaman ini merupakan halaman yang dapat
digunakan oleh pengguna untuk menambahkan masjid
yang diinginkan.
Tabel
3.6
Penjelasan
Halaman Add
Masjid
Member

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
Logout

Button

Jika diklik, pengguna
akan keluar dari sistem

7

Nama
Masjid

Text
Field

Memasukkan
masjid

nama

8

Alamat

Text
Field

Memasukkan
masjid

alamat

9

Tags

Text
Field

Memasukkan tags

10

Submit

Button

Jika diklik, data akan
disimpan dan masuk
dalam database

Screenshot 3.6 Halaman Add Masjid Member

42

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

Penjelasan
Halaman
Kegiatan
Member

No
T

Nama
objek

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

7

Ke daftar
Kegiatan

Link

Jika diklik, akan menuju
ke
section
daftar
kegiatan

a

Tipe

Keterangan e

b

Screenshot 3.5 Halaman Kegiatan

8) Halaman Daftar Kegiatan Member

43

l

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

N
o

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
Logout

Button

Jika diklik, pengguna
akan keluar dari sistem

7

Create
new
kegiatan

Link

Jika diklik, akan menuju
ke section add kegiatan

44

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.

45

Tabel

3.9

N
o

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
Logout

Button

Jika diklik, pengguna
akan keluar dari sistem

7

Nama
Kegiatan

Text
Field

Memasukkan
kegiatan

nama

8

Alamat

Text
Field

Memasukkan
kegiatan

alamat

9

Tags

Text
Field

Memasukkan tags

1
0

Submit

Button

Jika diklik, data akan
disimpan dan masuk
dalam dataase

Penjelasan Halaman Create kegiatan Member

Screenshot 3.9 Halaman Create kegiatan Member

46

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

Button

Jika diklik, pengguna
akan keluar dari sistem

7

Ke
daftar Link
Artikel

Jika diklik, akan menuju
ke section daftar artikel

Tabel 3.6 Penjelasan Halaman Artikel Member

47

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.

48

Tabel 3.11 Penjelasan Halaman Daftar Artikel Member

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
Logout

Button

Jika diklik, pengguna
akan keluar dari sistem

7

Create
article

new Link

Jika diklik, akan menuju
ke
section
Create
artikel

Screenshot 3d11 Halaman Daftar Artikel Member

49

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.
TNo
Halaman
Create Artikel
Member

Nama aobjek

Tipeb

Keterangan
e

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

7

Judul artikel

Text
Field

Memasukkan
artikel

8

Tags

Text
Field

Memasukkan tags

9

Author

Text
Field

Memasukkan
author

10

Submit

Button

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

50

l

judul

nama

Screenshot 3.12 Halaman Create Artikel Member

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.

51

T

N
o

Nama
objek

1

a

b

e

Tipe

Keterangan

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

7

Filkom UB

Link

Jika diklik, akan menuju
ke web FILKOM

Penjelasan Halaman About Us

Screenshot 3.7 Halaman About Us

52

l

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.

Halaman Home
Admin

TN

Nama objek
a

Tipe b

Keterangan
e

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

Member

Menu

Jika diklik, akan menuju
ke section member

6

Waiting List

Menu

Jiki diklik, akan menuju
ke section waiting list

7

About Us

53 Menu

Jika diklik, akan menuju
ke section About Us

8

Tombol
Logout

o

Button

l

Jika diklik, pengguna
akan keluar dari sistem

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.

54

Halaman
Daftar Masjid
Admin

TNo

Nama aobjek Tipe b

Keterangan
e

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

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
ke section About Us

Screenshot
3.15 Halaman
Daftar Masjid
Admin

l

8

Tombol
Logout

Button

Jika diklik, pengguna
akan keluar dari sistem

9

Tambah
masjid baru

Link

Jika diklik, akan menuju
ke section create post

16)

10

Tombol Edit Button

Jika diklik, akan menuju
ke section edit post

11

Tombol
Delete

Jika diklik, maka akan
menghapus
masjid
yang dipilih

Button

Halaman Edit Post (Edit Masjid)

Gambar 3.16 Rancangan Kasar Halaman Edit Post

55

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

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

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
ke section About Us

8

Tombol
Logout

Button

Jika diklik, pengguna
akan keluar dari sistem

9

Title

Text
Field

Memasukkan
masjid

10

Tags

Text
Field

Memasukkan tags

11

Category

Dropdo
wn

Memilih kategori yang
ada

12

Status

Dropdo
wn

Memilih
status
postingan

13

Update
page

Button

Jika diklik, maka data
yang
baru
telah
diupdate

17)

Halaman Daftar Kegiatan Admin

56

nama

dari

Gambar 3.17 Rancangan Kasar Halaman Daftar Kegiatan
Admin

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

a

b

l

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

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
ke section About Us

8

Tombol
Logout

Button

Jika diklik, pengguna
akan keluar dari sistem

9

Create new Link
Kegiatan

Jika diklik, akan menuju
ke
section
create
kegiatan

10

Tombol Edit Button

Jika diklik, akan menuju
ke section edit kegiatan

11

Tombol
Delete

Jika diklik, maka akan
menghapus
kegiatan
yang dipilih

Screenshot
3.17 Halaman
Daftar
Kegiatan
Admin

e

Button
57

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

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
ke section About Us

8

Tombol
Logout

Button

Jika diklik, pengguna
akan keluar dari sistem

9

Nama
kegiatan

Text
Field

Memasukkan
kegiatan

nama

10

Alamat

Text
Field

Memasukkan
kegiatan

alamat

11

Tags

Text
Field

Memasukkan tags

12

Update
page

Button

Jika diklik, maka data
yang
baru
telah
diupdate

58

Tabel 3.18 Halaman Edit Kegiatan Admin

Screenshot 3.18 Halaman Edit Kegiatan Admin

19)

Halaman Daftar Artikel Admin

59

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

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

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
ke section About Us

8

Tombol
Logout

Button

Jika diklik, pengguna
akan keluar dari sistem

9

Create new Link
article

Jika diklik, akan menuju
ke section create artikel

10

Tombol Edit Button

Jika diklik, akan menuju
ke section edit artikel

11

Tombol
Delete

Jika diklik, maka akan
menghapus
artikel
yang dipilih

Button

60

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.

61

Tabel 3.10 Halaman Create Artikel Admin

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

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
ke section About Us

8

Tombol
Logout

Button

Jika diklik, pengguna
akan keluar dari sistem

9

Judul
Artikel

Text
Field

Memasukkan
artikel

10

Tags

Text
Field

Memasukkan tags

11

Author

Text
Field

Memasukkan
author

12

Submit

Button

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

62

judul

nama

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.

63

N
o

Tabel
3.21
Halaman Edit
Artikel Admin

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

Member

Menu

Jika
diklik,
akan
menuju ke section
member

6

Waiting
List

Menu

Jiki
diklik,
menuju ke
waiting list

7

About Us

Menu

Jika
diklik,
akan
menuju ke section
About Us

8

Tombol
Logout

Button

Jika diklik, pengguna
akan
keluar
dari
sistem

9

Judul
Artikel

Text
Field

Memasukkan
artikel

10

Tags

Text
Field

Memasukkan tags

11

Author

Text
Field

Memasukkan
author

12

Update
page

Button

Jika
diklik,
maka
artikel
yang
telah
diedit akn terupdate

Screenshot 3.21 Halaman Edit Artikel Admin

22)

Halaman Member Admin
64

akan
section

judul

nama

Gambar 3.22 Rancangan Kasar Halaman Member

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

Tabel
Halaman
Member

3.22

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

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
ke section
About Us
r

S
Halaman
Member

c

8

Tombol
Logout

Button

Jika diklik, pengguna
akan keluar dari sistem

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

65

e

23)

Halaman Edit User

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.

66

Tabel
Halaman
User

3.23
Edit

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

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
ke section About Us

8

Tombol
Logout

Button

Jika diklik, pengguna
akan keluar dari sistem

Screenshot

3.23 Halaman
Edit User

9

Username

Text
Field

Memasukkan username

10

Email

Text
Field

Memasukkan email

11

Password

Text
Field

Memasukkan password

12

Status

Dropdo
wn

Memilih status
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

67

yang

Gambar 3.24 Rancangan Kasar Halaman Create User

Halaman ini merupakan halaman yang digunakan
untuk menambahkan member baru.

Halaman
Create User

3.24 Halaman
Create User

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

Menu

b
e
Jika
diklik, akan
menuju
ke section Masjid

3

T

Masjid

a

4

Artikel

Menu

Jika diklik, akan menuju
ke section Artikel

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
ke section About Us

8

Tombol
Logout

Button

Jika diklik, pengguna
akan keluar dari