commit to user
Tabel info adalah tabel pembantu antara tabel aktor admin, member dan penghuni dengan tabel topik. Tabel ini berisi dua field
yaitu username yang merupakan primary key dari masing –masing tabel
aktor dan idtopik yang merupakan primary key dari tabel topik. Detail tabel info dapat dilihat pada tabel 3.10 dibawah ini.
Tabel 3.10 Tabel info
Nama Field Tipe
Panjang Keterangan
username vachar
12 Primary Key
idtopik integer
11
k. Tabel topik
Tabel topik adalah tabel yang digunakan admin, member dan penghuni menyimpan data informasi atau beria yang diterbitkannya.
Tabel ini memiliki detai tabel sebagai berikut : 1.
Idtopik : primary key, bersifat auto increment agar id ini otomatis bertambah saat aktor menambahkan berita untuk diterbitkan.
2. Judul
: judul dari berita yang akan diterbitkan 3.
Isi : konten dari berita yang akan diterbitkan
4. Tanggalposting : tanggal berita saat itu diposting.
Gambar 3.16 Gambar Tabel topik
Nama Field Tipe
Panjang Keterangan
idtopik vachar
11 Primary Key
judul vachar
30 isi
text tanggalposting
date
3.6 Desain
Interface
Sistem Informasi Kos
Dalam sistem informasi kos ini terdapat lima peran yang saling berhubungan. Lima peran tersebut adalah admin, pengunjung, member,
penghuni dan alumni. Kelima peran ini memiliki hak akses masing –masing,
commit to user
oleh karena itu
interface
untuk setiap peran memiliki perbedaan.
Interface
yang disediakan dalam sistem ini adalah sebagai berikut : 1.
Halaman bagi pengunjung Desain
Interface
pertama adalah milik pengunjung. Pengunjung memiliki lima menu yang dapat diakses.
a. Yang pertama dapat dilihat adalah halaman beranda. Beranda
sistem informasi berisi profil dari rumah kos. Halaman ini bersifat statis karena berisi informasi dari kos Tisanda, terkait
dengan alamat kos, tipe kamar yang disediakan, jumlah kamar yang disediakan, fasilitas
–fasilitas dan beberapa alasan mengapa harus memilih Tisanda sebagai tempat kos yang pas.
Gambar 3.6 Desain Halaman Beranda
b. Halaman kedua yang dapat diakses oleh pengunjung adalah
halaman Tipe Kamar. Terdapat dua tipe kamar yang di sediakan, tipe A dan Tipe B. Tipe A memiliki keunggulan yang lebih baik
dari tipe B, dari segi luas kamar, tempat tidur, kamar mandi dana harga. Untuk halaman tipe kamar ini data
–data yang tampilkan bersifat dinamis, karena data dan gambar yang ditampilkan
bersumber dari tabel tipe kamar database kost. Desainnya adalah sebagai berikut :
Username: Password :
Logi
n
FOOTER
HEADER
Beranda|Tipe kamar|Tata tertib|Berita|Daftar
Beranda sistem informasi
Username: Password :
HEADER
Beranda|Tipe kamar|Tata tertib|Berita|Daftar Informasi Tipe kamar
Tipe A
commit to user
Gambar 3.7 Desain Halaman Tipe Kamar
c. Halaman ketiga yang dapat diakses oleh pengunjung adalah Tata
tertib. Halaman Tata tertib digunakan untuk menampilkan tata tertib yang berlaku untuk kos ini. Data bersifat statik karena data
yang ditampilkan tidak memiliki tabel khusus. Data diambil dan diinput langsung dari peraturan Ketua Rukun Tetangga setempat
dan peraturan yang disusun bersama dengan pemilik kos dengan penghuni kos. Desainnya adalah sebagai berikut:
Gambar 3.8 Desain Halaman Tata tertib
d. Desain Halaman Berita.
Username: Password :
Logi
n
FOOTER
HEADER
Beranda|Tipe kamar|Tata tertib|Berita|Daftar
Informasi Tata tertib kos
commit to user
Desain halaman berita nantinya digunakan untuk menampilkan berita. Berita
–berita yang ditampilkan berasal dari tabel topik di dalam database kost. Di dalam satu berita yang nantinya akan
tertampil 3 hal : 1.
Judul berita, dengan judul berita user akan tahu gambaran umum dari apa yang disampaikan oleh penginput berita.
Untuk judul posting dibatasi hanya samapi 30 karakter saja. 2.
Isi berita berisi berita secara keseluruhan atau bisa dikatakan sebagai penjelasam lebih rinci dari judul diatasnya. Isi berita
bertipe data text. 3.
Gambar berita, dengan gambar diharapkan user akan lebih tertarik karena gambar memiliki akan menciptakan cara
pandang pada masing –masing user walaupun pada dasarnya
fungsi utama gambar disini sebagai penjelas dari judul dan isi yang telah disampaikan.
Gambar 3.9 Desain Halaman Berita
Username: Password :
Logi
n
FOOTER
HEADER
Beranda|Tipe kamar|Tata tertib|Berita|Daftar Berita update
Diposting oleh : nama_pemosting
Judul berita : Isi berita
: Foto
:
commit to user
e. Menu terakhir yang dapat diakses oleh pengunjung adalah
Daftar. Halaman daftar nantinya digunakan oleh pengunjung untuk mendaftarkan diri sebagai member. Karena dengan
menjadi member, pengunjung dapat memesan kamar yang ditawarkan. Data yang diinputkan akan masuk ke tabel member
dari database kost. Di halaman ini terdapat form pendaftaran yang terdiri dari beberapa field :
1 Username
: username
yang diinginkan
oleh pengunjung, maksimal 15 karakter.
2 Password
: password yang diinginkan oleh pengunjung maksimal 6 karakter.
3 Nama lengkap
: nama lengkap dari pengunjung maksimal 30 karakter.
4 Tanggal lahir
: tanggal
lahir dari
pengunjung, menggunakan fasilitas dropdown yang ada.
5 Telepon
: nomor telepon maksimal 12 karakter 6
Alamat : alamat asli pengunjung, karena bertipe data
teks jadi pengisian dapat diinputkan dengan lengkap. 7
Foto : menggunakan fasilitas browse yang ada. Format
gambar harus jpg atau jpeg dan besarnya file maksimal 100 Kb. Field yang ada harus diisi semua. Berikut desain :
commit to user
Desainnya adalah sebagai berikut :
Gambar 3.10 Desain Halaman Daftar
2. Halaman login admin
Aktor yang kedua adalah Admin. Disamping admin dapat login dan logut, admin juga memiliki tujuh menu khusus yang dapat
diakses. Berikut desainnya : a.
Desain Halaman Login Admin Halaman ini merupakan portal bagi admin untuk dapat
mengakses sistem. Untuk dapat mengakses halaman selanjutnya admin harus menginputkan :
Username: Password :
Logi
n
FOOTER
HEADER
Beranda|Tipe kamar|Tata tertib|Berita|Daftar
Interface Daftar Username
: Password
: Nama lengkap :
Tanggal lahir :
Telepon :
Alamat :
Foto :
Daftar
commit to user
Username : inputan boleh angka atau huruf, maksimal 12 karakter
Password : inputan boleh angka atau huruf, maksimal 6 karakter.
Halaman login admin ini akan terhubung langsung dengan tabel admin, jadi setelah admin menginputkn username dan password,
sistem akan memberikan konfirmasi kepada admin bahwa inputan benar atau salah. Jika inputan salah, admin diminta untuk mengisi
kembali username dan passwordnya. Jika inputan benar, halaman akan diteruskan ke index milik admin.
Gambar 3.11 Desain Halaman Login Admin
b. Desain Halaman awal setelah Admin sukses login.
Halaman ini merupakan halaman yang akan muncul pertama kali setelah admin berhasil login. terdiri tab menu Lihat
berita, Kamar, Pembayaran, Penghuni, Alumni, Pesan, Request dan tab menu Logout. Dengan tab menu tersebut admin dapat
melakukan tugasnya dalam mengelola berita, mengelola identitas kamar, mengelola pembayaran, mengelola data penghuni kos dan
alumni, serta mengelola data para member atau penghuni yang telah memesan kamar.
Username : Password :
FOOTER
HEADER
Login
commit to user
Gambar 3.12 Desain Halaman Awal Admin
c. Desain Halaman Lihat Berita. Seorang admin juga dapat melihat
berita yang admin posting sendiri ataupun postingan dari penghuni atau alumni. Disini selain sebagai pembaca admin juga bertugas
sebagai pengatur berita. Sebagai pengatur berita semua berita dapat diatur oleh admin baik yang di posting admin sendiri juga user
lainnya. Dimenu ini admin dapat menambahkan berita, mengedit berita dan menhapus berita yang sudah tidak
update.
Sehingga berita yang ditampilkan akan selalu baru di depan user. Bersifat
dinamis karena data –data tersimpan di dalam tabel topik.
Gambar 3.13 Desain Halaman Lihat Berita
Selamat Datang Admin,
FOOTER
HEADER
Lihat Berita|Kamar|Pembayaran|Penghuni|Alumni|Pesan|Request|Logout
Selamat Datang Admin,
Berita 1 Berita 2
FOOTER
HEADER
Lihat Berita|Kamar|Pembayaran|Penghuni|Alumni|Pesan|Request|Logout
Tambah Berita
commit to user
d. Desain Halaman Form Tambah Berita
Halaman ini nantinya akan aktif apabila admin memilih
link
tambahkan berita. Muncul 3 option pilihan isian yang harus diisi oleh admin yaitu :
1. Judul : merupakan gambaran umum dari berita, inputan
maksimal 30 karakter. 2.
Isi : penjelasan dari judul yang telah diinputkan diatasnya. Boleh diisi lebih banyak karena bertipe data
text 3.
Foto : sebagai alat bantu penjelas dari judul dan isi yang telah ditampilkan. Jika proses penginputan telah
selesai, klik tambah berita dan berita kana tertampil. Halaman ini dinamis karena data- data ini akan masuk
ke dalam tabel topik.
Gambar 3.14 Desain Halaman Form Tambah Berita
Selamat Datang Admin, Form Tambah Beri
Judul : Isi
:
Foto
:
FOOTER
HEADER
Lihat Berita|Kamar|Pembayaran|Penghuni|Alumni|Pesan|Request|Logout
Tambah Berita
commit to user
e. Desain Halaman Kamar, berisi peta lokasi dari kos, baik di lantai bawah maupun lantai atas. Secara fungsi sama yaitu menampilkan data yang ada
dalam tabel penghuni dari database kos. Peta lokasi ini memiliki dua fungsi yang sangat membantu kerja admin, penjelasanya adalah :
1. Apabila kursor diarahkan ke salah satu nomor kamar maka akan
terlihat identitas kamar dan nama lengkap dari penghuninya. 2.
Setelah kursor diarahkan ke salah satu kamar, ketika diklik akan muncul profil lengkap dari penghuni tersebut. Tidak banyak yang
dapat dilakukan admin di halaman ini. Disini admin hanya melihat denah, posisi kamar yang masih kosong dan posisi kamar yang yang
telah terisi. Untuk profil hanya penghuni sendiri yang dapat mengubahnya.
Gambar 3.15 Desain Halaman Kamar
e. Desain Halaman Pembayaran, memberikan informasi lunas atau
belum lunas penghuni dalam membayar uang kos. Pemberitahuan ini akan muncul setiap akhir bulannya. Informasi ini akan
disampaikan oleh admin kepada pemilik kos. Sebaliknya pemilik kos juga menyampaikan data penghuni yang sudah membayar kos,
Selamat Datang Admin, Peta Lokasi Blok bawah
Peta Lokasi Blok atas
FOOTER
HEADER
Lihat Berita|Kamar|Pembayaran|Penghuni|Alumni|Pesan|Request|Logout
commit to user
kepada admin sehingga admin dapat mengubah status penghuni yang belum membayar menjadi lunas. Untuk keterangan penghuni
yang sudah lunas tidak bisa diganti menjadi belum lunas lagi. Data –data tersebut akan mask ke dalam tabel bayar database kost.
Gambar 3.16 Desain Halaman Pembayaran
f. Desain Halaman Penghuni, memuat data
–data penghuni kos. Halaman inin terhubung dengan tabel penghuni. Tabel yang
ditampilkan pada halaman ini menampilkan field nama lengkap, tipe kamar dan nomor kamar dari masing
–masing penghuni. Fasilitas yang disediakan untuk admin adalah checkbox untuk
menjadikan penghuni menjadi alumni.
Selamat Datang Admin, Daftar Pembayaran Bulan Mei April 2012
No Nama Status Bayar
1 Risqi Indah
Lunas 2
Ririn Dwi C Belum Lunas
Tandai Lunas
FOOTER
HEADER
Lihat Berita|Kamar|Pembayaran|Penghuni|Alumni|Pesan|Request|Logout
commit to user
Gambar 3.17 Desain Halaman Penghuni
g. Desain Halaman Alumni di desain bersebelahan dengan tab menu
penghuni. Desain seperti ini dirasa sudah efisien karena saat perpindahan data penghuni menjadi alumni akan lebih dekat
mengaksesnya. Halaman alumni nantinya menampilkan data alumni kos, sehingga data alumni dapat tersimpan dengan baik.
Data alumni yang ditampilkan adalah nama lengkap, tipe kamar dan nomor asal kamar sebelumnya dan tanggal penghuni tersebut
keluar dari kos. Berikut tampilannya :
Selamat Datang Admin, Daftar Penghuni Kost
No Nama Tipe Kamar
No Kamar Action
1 Risqi Indah
B 1
Jadikan Alumni
2 Ririn Dwi C
B 3
JadikanAlumni
FOOTER
HEADER
Lihat Berita|Kamar|Pembayaran|Penghuni|Alumni|Pesan|Request|Logout
Proses
commit to user
Gambar 3.18 Desain Halaman Alumni h.
Desain Halaman Pesan, memuat data member yang memesan kamar. Untuk halaman pesan ini hanya ditampilkan anama lengkap
dan tanggal pesannya. Kemudian terdapat fasilitas setujui. Ketika telah disetujui maka nama tersebut telah aktif menjadi penghuni.
Gambar 3.19 Desain Halaman Pesan
Selamat Datang Admin, Daftar Alumni Kost
No Nama Tipe Kamar
No Kamar Tgl Keluar
1 Risqi Indah
B 1
2012-05-20
2 Ririn Dwi C
B 3
2012-05-20
FOOTER
HEADER
Lihat Berita|Kamar|Pembayaran|Penghuni|Alumni|Pesan|Request|Logout
Proses
Selamat Datang Admin, Pesan Masuk
No Nama Tanggal Pesan
Aksi 1
Ani 2012-05-22
Setujui 2
Ririn Dwi C 2012-05-22
Setujui
FOOTER
HEADER
Lihat Berita|Kamar|Pembayaran|Penghuni|Alumni|Pesan|Request|Logout
commit to user
i. Desain Halaman Request, memuat data permintaan pindah kamar
dari penghuni. Sistemnya sama seperti pesan namun untuk request data transaksi masuk ke tabel pindah. Kondisi ini terjadi ketika
seorang penghuni yang sudah memiliki kamar sendiri namun masih memngirimkan permintaan untuk pindah kamar. Fasilitas setujui
digunakan untuk mengaktifkan kamar yang dipilih untuk diganti sebagai kamar barunya.
Gambar 3.20 Desain Halaman Request
3. Desain halaman penghuni dan member
Halaman penghuni memiliki 4 aktifitas yang dapat dikerjakan di dalam sistem ini yaitu ubah profil, melihat denah kamar denah
kamar, mengirim permintaan pindah kamar kepada admin melalui halaman pindah kamar dan menambahkan bverita melalui halaman
buat berita. Perbedaannya dengan alumni adalah alumni hanya memiliki satu kegiatan saja yaitu membuat berita saja. Untuk
penghuni dan alumni sama – sama dapat login dan logout.
Selamat Datang Admin, Pesan Masuk
No Nama Kamar Asal Kamar Tujuan
Tanggal Aksi
1 Ani
B - 36 B
– 3 2012-06-07
Setujui 2
Ririn Dwi B - 37
B - 4 2012-06-07
Setujui
FOOTER
HEADER
Lihat Berita|Kamar|Pembayaran|Penghuni|Alumni|Pesan|Request|Logout
commit to user
a. Desain halaman Login penghuni dan member
Penghuni dan member memiliki tempat login yang sama. Hanya saja setelah masing
–masing menginputkan username dan password, penghuni atau alumni harus memilih statusnya dengan menggunakan
fasilitas combobox yang disediakan.
Gambar 3.21 Desain Halaman Login Penghuni dan Member b.
Desain Halaman Index Setelah penghuni suskses login maka akan muncul halaman
index. Di dalam halaman index tampil beberapa tab menu yang dapat dikunjungi oleh pengunjung umum dan terdapat 4 menu
khusus yang hanya ada di halaman milik penghuni yaitu ubah profil, kamar, peindah kamar dan buat berita.
Gambar 3.22 Desain Halaman Index Penghuni
Username : Password :
Logi
n
Beranda sistem informasi
FOOTER
HEADER
Beranda|Tipe kamar|Tata tertib|Berita|Daftar
v Selamat datang :
nama_penghuni Ubah Profil
Kamar Pindah Kamar
Buat Berita Keluar
Beranda sistem informasi
FOOTER
HEADER
Beranda Tipe kamar Tata tertib Berita
commit to user
c. Desain Halaman Ubah Profil
Ubah Profil merupakan fasilitas yang hanya dimiliki oleh penghuni. Data profil yang dapat diubah adalah nama lengkap,
tanggal lahir, nomor telepon, alamat dan foto. Setelah selesai pengubahan data klik Simpan Profil.
Gambar 3.23 Desain Halaman Ubah Profil Penghuni
d. Desain Halaman Kamar
Halaman kamar ini memiliki fungsi yang sama dengan halaman kamar yang berada di halaman kamar milik admin.
Fungsinya adalah untuk menampilkan detail kamar tersebut kosong atau sudah terisi. Jika sudah terisi maka dengan mudah penghuni
yang satu dengan yang lain saling melihat profil. Cara seperti ini juga memudahkan penghuni untuk saling mengakrabkan diri
dengan 60 orang penghuni lainnya.
Selamat datang : nama_penghuni
Ubah Profil Kamar
Pindah Kamar
Buat Berita Keluar
FORM PROFIL
Nama lengkap : nama_penghuni Tanggal lahir : tanggallahir
Telepon : nomortelepon_penghuni Alamat : alamat_penghuni
Foto :
Simpan Profil
FOOTER
HEADER
Beranda Tipe kamar Tata tertib Berita
commit to user
Gambar 3.24 Desain Halaman Kamar
e. Desain Halaman Pindah Kamar
Halaman pindah kamar nantinya digunakan oleh penghuni jika ingin pengirim kan permintaan pindah kamar kepada admin.
Karena identitas lengkap dari penghuni sudah tercatat dan tersimpan dengan baik di dalam tanel penghuni maka disaat
penghuni menginginkan untuk pindah kamar, penghuni tidak perlu lagi menginputkan data diri atau semacamnya. Form permohonan
pindah kamar hanya berisi piliha kamar kosong dan kemudian kirim permintaan dengan klik button kirim. Data akan masuk ke
tabel pindah. Berikut tampilan desainnya:
Selamat datang :nama_penghuni
Profil Kamar
Pindah Kamar Buat Berita
Keluar Denah kamar kos
FOOTER
HEADER
Beranda Tipe kamar Tata tertib Berita
Halaman Kamar Atas
Halaman Kamar Bawah
commit to user
Gambar 3.25 Desain Halaman Pindah Kamar
f. Desain Halaman Buat Berita Penghuni dan alumni
Desain halaman ini sistemnya sama seperti buat berita milik alumni atau menambahkan berita milik admin. Hanya saja seorang
penghuni dan alumni tidak dapat mengubah atau mmenghapus berita. Berita yang sudah ditampikan akan ditata dengan rapi
nantinya oleh admin. Selesai menginputkan berita kemudian klik button tambahkan berita, maka berita akan tampil. Di halaman ini
juga alumni dapat menambahkan berita. Setelah selesai untuk semua aktifitasnya penghuni dan alumni dapat klik Keluar untuk
keluar dari sistem. Berikut tampilan desainnya :
Selamat datang :nama_penghuni Profil
Kamar Pindah Kamar
Buat Berita Keluar
Form Permohonan Pindah Kamar : Pilih Kamar
FOOTER
HEADER
Beranda Tipe kamar Tata tertib Berita
B - 3 Kirim
commit to user
Gambar 3.26 Desain Halaman Buat Berita Penghunidan alumni.
Selamat datang :nama_alumni Buat Berita
Keluar G u v
Form Input berita Judul :
Isi :
Gambar :
FOOTER
HEADER
Beranda Tipe kamar Tata tertib Berita
|Browse Tambahkan berita
commit to user
BAB IV IMPLEMENTASI SISTEM
4.1 Implementasi Rancangan Sistem Informasi Kos Muslimah Tisanda 4.1.1 Halaman Admin
1. Halaman Login
Halaman ini merupakan portal bagi admin untuk dapat mengakses sistem. Untuk dapat mengakses halaman selanjutnya admin
harus menginputkan username dan password. Berikut rancangan desain dan hasil implementasinya.
Gambar 4.1 Halaman Login Admin
Username : Password :
FOOTER
HEADER
Login
46
