BAB IV

ANALISIS DAN PERANCANGAN

4.1 Analisis Sistem

4.1.1 Analisis sistem yang sedang berjalan
Sistem penerimaan tamu yang sedang terjadi di UMMI saat ini yaitu tamu
yang datang tidak mencatat data identitas pribadi maupun instansi karena tidak
disediakan buku tamu. Tamu langsung menemui pihak yang dituju. Adapun
sekertaris rektorat hanya mendata tamu yang akan menemui rektor saja. Standart
Operasional penerimaan tamu di UMMI belum ada sampai saat ini.

4.1.2 Analisis Permasalahan

Ada beberapa permasalahan yang dianalisis dalam penerimaan tamu di
UMMI, diantaranya :
1. Penerimaan tamu di lobi kampus UMMI tidak disediakan buku tamu
untuk diisi, sehingga tamu tidak jelas berasal darimana, tujuan kunjungan
untuk apa maka sulit untuk diidentifikasikan oleh pihak UMMI, yang
mengakibatkan kurangnya ketertiban administrasi dalam penerimaan
tamu.
2. Adapun pencatatan tamu secara manual dengan menggunakan buku
hanya dilakukan oleh tamu yang berkunjung ke Rektor saja dan
dilakukan di ruang sekretariat rektor. Dengan tidak menyeluruhnya
pencatatan tamu ini maka pihak UMMI sendiri tidak bisa dengan mudah
melakukan evaluasi penerimaan tamu.
3. Belum adanya rekapitulasi pelaporan berdasarkan tujuan kunjungan
tamu di UMMI sehingga perkembangan mobilitas kampus sendiri tidak
dapat diukur dari setiap tahunnya, apabila akan melaksanakan akreditasi
kampus.

28
 29

4.1.3 Analisis Kebutuhan Sistem dan Sistem Usulan

Dilihat dari analisis permasalahan yang ada di UMMI, maka penerimaan
tamu memiliki kebutuhan sistem sebagai berikut :
1. Perlu adanya pencatatan tamu yang dapat mendata dengan lengkap
maksud dan tujuan kedatangannya di lingkungan kampus UMMI.
2. Perlu adanya database guna untuk mengolah data dengan mudah.
3. Adanya laporan data tamu untuk setiap bulan, semester atau tahunan.
4. Perlu adanya infomasi dan konfirmasi tentang kesiapan kampus dalam
penerimaan tamu.
Adapun sistem yang diusulkan penulis digambarkan dalam alur dibawah ini :

Gambar 4.1 Sistem Usulan Buku Tamu Elektronik UMMI

 30

Keterangan :

1. Tamu datang ke Universitas Muhammadiyah sukabumi.

2. Front Office menerima tamu dan mempersilahkan untuk mengisi buku
tamu elektronik yang telah disediakan dalam sebuah Personal Computer.
3. Tamu mengisi identitas pada buku tamu elektronik dan tersimpan
langsung di database.
4. Front Office mempersilahkan tamu untuk menunggu.
5. Front Office melakukan konfirmasi kepada pihak yang dituju
menggunakan telpon / media online.
6. Front Office menyampaikan kebersediaan atau tidaknya pihak yang dituju.
7. Jika pihak yang dituju bersedia, tamu langsung diarahkan dan status
penerimaan tamu tersimpan pada database.
8. Jika pihak yang dituju tidak bersedia maka,
9. Front Office membantu untuk melakukan jadwal pertemuan ulang di lain
waktu.
10. Jadwal pertemuan selanjutnya disimpan di database. Sistem dapat
memberikan email konfirmasi mengenai kesediaan pihak yang dituju.

4.2 Perancangan Sistem

4.2.1 Use Case Diagram
Use Case ini menampilkan sistem Buku Tamu Elektronik yang di
dalamnya terdapat 2 aktor yaitu Tamu dan Front Office serta ada 4 case
yaitu login, buku tamu, konfirmasi penerimaan tamu dan laporan. Seperti
yang digambarkan di bawah ini:
 31

Gambar 4.2 Usecase Diagram Buku Tamu Elektronik UMMI

4.2.2 Skenario Use Case Diagram

1. Use Case Login
a. Aktor : Front Office
b. Kondisi awal : Aktor telah sukses menjalankan website dan
masuk ke form login.
c. Kondisi akhir : Aktor dapat masuk ke website dan masuk ke menu
utama admin.
d. Deskripsi : Proses ini dilakukan oleh aktor bila akan mengolah
data menu website.

Tabel 4.1 Skenario Use Case Login

Aktor Sistem
1. Aktor menginput username
dan password.
2. Menekan tombol login.
3. Memverifikasi username dan
password pada database.
4. Jika tidak sesuai, tampil pesan
login gagal dan kembali ke 1.
5. Jika sesuai, tampil pesan login
 32

berhasil dan lanjut ke 6.

6. Menampilkan menu utama
admin.
7. Melakukan aktifitas di dalam
menu utama admin.

2. Use Case Mengelola Informasi ( Tamu )

a. Aktor : Tamu
b. Kondisi awal : Aktor membuka menu informasi
c. Kondisi akhir : Aktor dapat melihat informasi yang ada
d. Deskripsi :Proses ini dilakukan oleh aktor untuk melihat
informasi dosen atau civitas akademik lain yang berhalangan hadir
di kampus UMMI.

Tabel 4.2 Skenario Use Case Mengelola Informasi (Tamu)

Aktor Sistem
1. Masuk ke menu utama tamu
2. Memilih menu informasi
3. Menampilkan menu informasi
4. Melihat informasi yang ada.

3. Use Case Mengelola Informasi ( Front Office )

a. Aktor : Front Office
b. Kondisi awal : Aktor membuka menu informasi
c. Kondisi akhir : Aktor dapat menyimpan informasi
d. Deskripsi : Proses ini dilakukan oleh aktor untuk mengelola
(menambahkan, mengedit, menghapus) informasi dosen atau
civitas akademik lain yang berhalangan hadir di kampus UMMI.

Tabel 4.3 Skenario Use Case Mengelola Informasi (Front Office)

Aktor Sistem
1. Masuk ke menu utama
2. Memilih menu informasi
3. Menampilkan menu informasi
4. Mengelola (input, edit,
hapus) informasi klik
simpan.
5. Menyimpan di database.
 33

4. Use Case Mengelola Buku Tamu ( Tamu )

a. Aktor : Tamu
b. Kondisi awal : Aktor membuka menu isi data tamu
c. Kondisi akhir : Aktor dapat menyimpan data tamu
d. Deskripsi : Proses ini dilakukan oleh aktor untuk mengisi data
diri, instansi, serta maksud dan tujuan datang di kampus UMMI.

Tabel 4.4 Skenario Use Case Mengelola Buku Tamu (Tamu)

Aktor Sistem
1. Masuk ke menu utama
2. Memilih menu isi data tamu
3. Menampilkan form isi data
tamu
4. Mengisi form data tamu
yang ada lalu klik simpan.
5. Menyimpan di database.

5. Use Case Mengelola Buku Tamu ( Front Office )

a. Aktor : Front Office
b. Kondisi awal : Aktor membuka menu daftar tamu
c. Kondisi akhir : Aktor dapat mengkonfirmasi tamu
d. Deskripsi : Proses ini dilakukan oleh aktor untuk
mengkonfirmasi tamu diterima atau ditangguhkan kedatangannya
di kampus UMMI.

Tabel 4.5 Skenario Use Case Mengelola Buku Tamu (Front Office)
Aktor Sistem
1. Masuk ke menu utama
2. Memilih menu daftar tamu
3. Menampilkan daftar tamu
4. Mengkonfirmasi tamu
diterima atau ditangguhkan
klik simpan.
5. Menyimpan di database.

6. Use Case Konfirmasi Tamu ( Tamu )

a. Aktor : Tamu
b. Kondisi awal : Aktor membuka menu konfirmasi tamu
 34

c. Kondisi akhir : Aktor dapat melihat daftar konfirmasi tamu.

d. Deskripsi : Proses ini dilakukan oleh aktor untuk melihat
diterima atau ditangguhkan kedatangannya.

Tabel 4.6 Skenario Use Case Mengelola Konfirmasi Tamu (Tamu)

Aktor Sistem
1. Masuk ke menu utama.
2. Memilih menu konfirmasi
tamu.
3. Menampilkan konfirmasi
penerimaan tamu.
4. Melihat daftar konfirmasi
penerimaan tamu.

7. Use Case Konfirmasi Tamu ( Front Office )

a. Aktor : Front Office
b. Kondisi awal : Aktor membuka menu konfirmasi tamu
c. Kondisi akhir : Aktor dapat mengelola daftar konfirmasi tamu.
d. Deskripsi : Proses ini dilakukan oleh aktor untuk mencetak
konfirmasi kedatangan tamu yang diterima atau ditangguhkan.
Tabel 4.7 Skenario Use Case Mengelola Konfirmasi Tamu (Front Office)
Aktor Sistem
1. Masuk ke menu utama.
2. Memilih menu konfirmasi
tamu.
3. Menampilkan konfirmasi
penerimaan tamu.
4. Klik print daftar konfirmasi
penerimaan tamu.
5. Mencetak konfirmasi
penerimaan tamu.

8. Use Case Mengelola Grafik Tamu

a. Aktor : Front Office
b. Kondisi awal : Aktor membuka menu grafik tamu
c. Kondisi akhir : Aktor dapat mengelola grafik tamu.
d. Deskripsi : Proses ini dilakukan oleh aktor untuk mencetak
grafik tamu.
 35

Tabel 4.8 Skenario Use Case Mengelola Grafik Tamu

Aktor Sistem
1. Masuk ke menu utama.
2. Memilih menu grafik tamu.
3. Menampilkan grafik tamu.
4. Klik print grafik tamu.
5. Mencetak grafik tamu.

9. Use Case Laporan

a. Aktor : Front Office
b. Kondisi awal : Aktor membuka menu laporan
c. Kondisi akhir : Aktor dapat mencetak menu laporan
d. Deskripsi : Proses ini dilakukan oleh aktor untuk mengolah
menu laporan.
Tabel 4.9 Skenario Use Case Laporan
Aktor Sistem
1. Masuk ke menu laporan
2. Terdapat data tamu
3. Menampilkan data tamu
4. Mengolah data tamu untuk
laporan
5. Klik tombol print
6. Mencetak Laporan

4.2.3 Class Diagram

Class Diagram ini menggambarkan struktur dari deskripsi class yang
terdiri dari relasi beberapa class di dalamnya sendiri terdapat atribut dan
methode yang menggambarkan suatu sistem tersebut. Adapun pada Buku
Tamu Elektronik yang akan dibuat terdiri dari 4 class, diantaranya :

Tabel 4.10 Kelas yang ada pada Buku Tamu Elektronik UMMI
Kelas Atribut Methode
User ɸ id_user +login
-nama_lengkap
-email
-no_hp
-alamat
-username
-password
-images
 36

Bktamu ɸ id_tamu +simpan

-tanggal +lihat
-nama +opsi
-no_ktp +cetak
-alamat
-kota
-jk
-no_hp
-email
-instansi
-jabatan
-tujuan
-maksud
-isi
-status
-tglulg

Informasi ɸ id_informasi +simpan

-id_kategori +edit
-judul +hapus
-penulis +lihat
-isi
-tanggal
-waktu
-images
Kategori ɸ id_kategori +simpan
-nama_kategori +edit
+hapus

Keterhubungan antar kelas

Adapun lebih jelasnya digambarkan dalam gambar 4.3 di bawah ini :
 37

Gambar 4.3 Class Diagram Buku Tamu Elektronik UMMI

4.2.4 Activity Diagram

Activity Diagram memaparkan aktifitas dari setiap Aktor didalam sistem,
bagaimana aktifitas dimulai, keputusan yang mungkin terjadi dan aktifitas
berakhir. Activity Diagram yang dilakukan oleh 2 aktor, antara lain :
1. Activity Diagram Tamu
2. Activity Diagram Front Office
Gambar di bawah ini adalah activity diagram pada Buku Tamu Elektronik
Universitas Muhammadiyah Sukabumi :
 38

1. Activity Diagram Tamu

Gambar 4.4 Activity Diagram Tamu Buku Tamu Elektronik UMMI

 39

2. Activity Diagram Front Office

Gambar 4.5 Activity Diagram Front Office Buku Tamu Elektronik UMMI
 40

4.2.5 Statechart Diagram

Menggambarkan perubahan keadaan dari satu state ke state lainnya.
Seperti yang digambarkan di bawah ini :
1. Statechart Diagram Login

Gambar 4.6 Statechart Diagram Login Buku Tamu Elektronik UMMI

 41

2. Statechart Diagram Mengelola Informasi ( Tamu )

Gambar 4.7 Statechart Diagram Mengelola Informasi ( Tamu ) Buku Tamu

Elektronik UMMI
 42

3. Statechart Diagram Mengelola Informasi ( Front Office )

Gambar 4.8 Statechart Diagram Mengelola Informasi ( Front Office ) Buku

Tamu Elektronik UMMI
 43

4. Statechart Diagram Mengelola Buku Tamu ( Tamu )

Gambar 4.9 Statechart Diagram Mengelola Buku Tamu ( Tamu ) Buku

Tamu Elektronik UMMI
 44

5. Statechart Diagram Mengelola Buku Tamu ( Front Office )

Gambar 4.10 Statechart Diagram Mengelola Buku Tamu ( Front Office ) Buku Tamu
Elektronik UMMI
 45

6. Statechart Diagram Mengelola Konfirmasi Tamu ( Tamu )

Gambar 4.11 Statechart Diagram Mengelola Konfirmasi Tamu ( Tamu )

Buku Tamu Elektronik UMMI
 46

7. Statechart Diagram Mengelola Konfirmasi Tamu ( Front Office )

Gambar 4.12 Statechart Diagram Mengelola Konfirmasi Tamu ( Front

Office ) Buku Tamu Elektronik UMMI
 47

8. Statechart Diagram Mengelola Grafik Tamu

Gambar 4.13 Statechart Diagram Mengelola Grafik Tamu Buku Tamu

Elektronik UMMI
 48

9. Statechart Diagram Mengelola Laporan

Gambar 4.14 Statechart Diagram Mengelola Laporan Buku Tamu

Elektronik UMMI
 49

4.2.6 Sequence Diagram

Sequence digunakan untuk menggambarkan kelakuan objek pada usecase
dengan mendeskripsikan waktu hidup objek dan pesan yang dikirimkan
dan diterima antar objek. Berikut adalah Sequence Diagram Buku Tamu
Elektronik di bawah ini :

1. Sequence Diagram Login

Gambar 4.15 Sequence Diagram Login Buku Tamu Elektronik UMMI

 50

2. Sequence Diagram Buku Tamu

Gambar 4.16 Sequence Diagram Buku Tamu Buku Tamu Elektronik UMMI

3. Sequence Diagram Konfirmasi Tamu

Gambar 4.17 Sequence Diagram Konfirmasi Tamu Buku Tamu Elektronik UMMI
 51

4. Sequence Diagram Informasi

Gambar 4.18 Sequence Diagram Informasi Buku Tamu Elektronik UMMI

5. Sequence Diagram Grafik Tamu

Gambar 4.19 Sequence Diagram Grafik Tamu Buku Tamu Elektronik UMMI
 52

6. Sequence Diagram Laporan

Gambar 4.20 Sequence Diagram Laporan Buku Tamu Elektronik UMMI

4.3 Perancangan Basis Data

Basis Data merupakan sekumpulan tabel yang didalamnya terdapat relasi
sehingga memudahkan dalam pengambilan data. Pada Buku Tamu
Elektonik bahasa basis data yang digunakan SQL, dengan menggunakan
apikasi MySQL. Basis data diberi nama “db_bukutamu” dengan 4 tabel di
dalamnya, yaitu “tb_bktamu” , “informasi”, “kategori” dan “user”.
4.3.1 Tabel User
Nama basis data : db_bukutamu
Nama tabel : user
Kunci utama : id_user
Jumlah bidang 8
Tabel 4.11 Tabel User
Nama Jenis Ukuran
id_user int 11
nama_lengkap varchar 50
Email varchar 70
no_hp varchar 14
Alamat text
Username varchar 50
Password varchar 255
Images varchar 255
 53

4.3.2 Tabel Buku Tamu

Nama basis data : db_bukutamu
Nama tabel : tb_bktamu
Kunci utama : Id_tamu
Jumlah bidang 16
Tabel 4.12 Tabel Buku Tamu
Nama Jenis Ukuran
Id_tamu Int 11
Tanggal Date
Nama Varchar 30
No_ktp Varchar 16
Alamat Text
Kota Varchar 20
Jk Enum(‘pria’,’wanita’)
no_hp Varchar 14
Email Varchar 35
Instansi Varchar 50
Jabatan Varchar 50
Tujuan Enum
(‘biro’,’rektor’,’warek1’, …)
Maksud Enum
(‘kerjasama’,’pribadi’,’akd’)
Isi Longtext
Status Enum (‘diterima’, 30
’ditangguhkan’)
Tglulg Text

4.3.3 Tabel Informasi

Nama basis data : db_bukutamu
Nama tabel : informasi
Kunci utama : Id_informasi
Jumlah bidang 8
Tabel 4.13 Tabel Informasi
Nama Jenis Ukuran
Id_informasi Int 11
Id_kategori Int 11
Judul Varchar 50
Penulis Varchar 50
Isi Longtext
Tanggal Date
Waktu Time
Images Varchar 255
 54

4.3.4 Tabel Kategori

Nama basis data : db_bukutamu
Nama tabel : kategori
Kunci utama : Id_kategori
Jumlah bidang 2
Tabel 4.14 Tabel Kategori
Nama Jenis Ukuran
Id_kategori Int 11
Nama_kategori Varchar 25

4.4 Perancangan Tampilan

Perancangan antarmuka dari Buku Tamu Elektronik UMMI dirancangan
menggunakan Ms. Visio 2016. Terdapat 3 Perancangan antarmuka utama
yaitu Perancangan antarmuka untuk tamu atau yang disebut ( Front End )
, Perancangan antarmuka login untuk masuk ke halaman administrator dan
Perancangan antarmuka untuk admin yaitu Front Office atau yang disebut
( Back End ).
4.4.1 Perancangan Antarmuka Front End
1. Home

Gambar 4.21 Perancangan Antarmuka Front End Home

 55

a. PseudoCode Home
Start
If beranda then Tampil home
Elseif Informasi then Tampil Informasi
Elseif Isi Data Tamu then Tampil Isi Data Tamu
Elseif Konfirmasi Tamu then Tampil Konfirmasi Tamu
Else tampil beranda End If End

2. Informasi

Gambar 4.22 Perancangan Antarmuka Front End Informasi

a. PseudoCode Informasi
Start
If Informasi then Tampil Daftar Informasi Else Tampil Beranda Endif
End
 56

3. Isi Data Tamu

Gambar 4.23 Perancangan Antarmuka Front End Isi Data Tamu

a. PseudoCode Isi Data Tamu

Start
If Isi Data Tamu
then Tampil Form
Data Tamu
If simpan then tampil
pesan Else ulangi
Endif
Else Tampil
Beranda Endif
 57

4. Konfirmasi Tamu

Gambar 4.24 Perancangan Antarmuka Front End Konfirmasi Tamu

a. PseudoCode Konfirmasi Tamu

Start
If Konfirmasi then
Tampil Daftar Konfirmasi
Tamu Else Tampil Beranda
Endif
End
 58

4.4.2 Perancangan Antarmuka Login

Gambar 4.25 Perancangan Antarmuka Login

1. PseudoCode login
Start
Input
username
Input
password If
Login Then
Tampil Halaman
administrator Else Ulangi
 59

4.4.3 Perancangan Antarmuka Back End

1. Home

Gambar 4.26 Perancangan Antarmuka Back End Home

a. PseudoCode Home
Start
If beranda
then Tampil
home
Elseif Informasi
then Tampil
Informasi
Elseif Daftar Tamu
then Tampil Daftar
Tamu
Elseif Konfirmasi Tamu
then Tampil Konfirmasi
Tamu Elseif Grafik Tamu
then Tampil Grafik Tamu
Elseif Laporan
 60

2. Informasi

Gambar 4.27 Perancangan Antarmuka Back End Informasi

a. PseudoCode Informasi
Start
If Informasi then
Tampil Daftar
Informasi
If tambah then input informasi
Elseif edit then update
informasi Elseif hapus then
kurang informasi Else lihat
informasi
End if
Else Tampil
 61

3. Daftar Tamu

Gambar 4.28 Perancangan Antarmuka Back End Daftar Tamu

a. PseudoCode Daftar Tamu

Start
If Daftar Tamu
then Tampil
Daftar Tamu
If opsi then tampil pesan
If diterima then simpan else
ditangguhkan Endif
Else lihat daftar
tamu Endif
Else Tampil
Beranda Endif
 62

4. Konfirmasi Tamu

Gambar 4.29 Perancangan Antarmuka Back End Konfirmasi Tamu

a. PseudoCode Konfirmasi Tamu

Start
If Konfirmasi Tamu
then Tampil
Konfirmasi Tamu
If search then tampil
data Else print
Endif
Else Tampil
Beranda Endif
 63

5. Perancangan Grafik Tamu

Gambar 4.30 Perancangan Antarmuka Back End Grafik Tamu

a. PseudoCode Grafik Tamu

Start
If Grafik Tamu
then Tampil
Grafik Tamu
If print then cetak
data Else lihat data
Endif
Else Tampil
Beranda Endif
 64

6. Perancangan Laporan

Gambar 4.31 Perancangan Antarmuka Back End Laporan

a. PseudoCode Laporan
Start
If Lapora
then Tampil
Laporan
If print then cetak
data Else lihat data
Endif
Else Tampil
Beranda Endif