BAB III PEMBAHASAN
3.3 Perancangan Sistem
3.3.2 Perancangan Antarmuka
Perancangan antar muka (interface) adalah suatu tampilan dari suatu program aplikasi sebagai media untuk berkomunikasi untuk melakukan interaksi denga user.
3.3.2.1 Perancangan Halaman Login
Gambar dibawah ini merupakan perancangan halaman login.
FOOTER
Lebar Halaman 900 pixel. Tinggi Halaman Auto. Ukuran Font 24, 22, 14, 12, 11. Jenis Font Arial.
§ Klik Tombol Sign In Apabila data sign in benar maka menuju Halaman H02
§ Klik Tombol Sign In, Jika data sign in salah maka akan ke Halaman H01 Kembali
§ Klik Tombol Sign In, Jika data sign in salah maka akan muncul Pesan M01
§ Klik Link Anda Lupa Password ?, menuju Halaman H11 LOGO APLIKASI Sign In Email Password H01
Anda Lupa Password ?
Gambar 3.11 Rancangan Halaman Login
3.3.2.2 Perancangan Halaman Utama
Gambar dibawah ini merupakan perancangan halaman utama.
FOOTER
Lebar Halaman 900 pixel. Tinggi Halaman Auto. Ukuran Font 24, 22, 14, 12, 11. Jenis Font Arial
§ Klik Tombol Halaman Utama Menuju Halaman H02
§ Klik Tombol Admin Menuju Halaman H08 § Klik Tombol Profil Menuju
Halaman H06 § Klik Tombol Sign Out
Menuju Halaman H01 § Klik Tombol Ambil Data
akan muncul pesan M02 jika data berhasil tersimpan dan jika data tidak gagal tersimpan akan muncul pesan M03 § Klik Tombol Lihat Tabel Menuju Halaman H04 § Klik Tombol Waktu
menuju Halaman H05 jika data Tersedia dan jika Tidak Tersedia akan muncul Pesan M04 LOGO APLIKASI Halaman Utama Admin Sign Out
Grafik Hasil Pengukuran Suhu Terakhir
Riwayat Penyimpanan Data
Lihat Tabel Ambil Data H02 TANGGAL Waktu Waktu TANGGAL Waktu Waktu TANGGAL Waktu Waktu Grafik Profil
3.3.2.3 Perancangan Halaman Data
Gambar dibawah ini merupakan perancangan halaman data.
FOOTER
Lebar Halaman 900 pixel. Tinggi Halaman Auto. Ukuran Font 24, 22, 14, 12, 11. Jenis Font Arial.
§ Klik Tobol Halaman Utama Menuju Halaman H02
§ Klik Tombol Admin Menuju Halaman H08 § Klik Tombol Profil Menuju
Halaman H06 § Klik Tombol Sign Out
Menuju Halaman H01 § Klik Tombol Ambil Data
akan muncul pesan M02 jika data berhasil tersimpan dan jika data gagal tersimpan akan muncul pesan M03 LOGO APLIKASI Halaman Utama Admin Sign Out
Tabel Data
Judul Halaman Ambil Data
Profil H03
Gambar 3.13 Rancangan Halaman Data Sekarang
FOOTER
Lebar Halaman 900 pixel. Tinggi Halaman Auto. Ukuran Font 24, 22, 14, 12, 11. Jenis Font Arial.
§ Klik Tobol Halaman Utama Menuju Halaman H02
§ Klik Tombol Admin Menuju Halaman H08 § Klik Tombol Profil Menuju
Halaman H06 § Klik Tombol Sign Out
Menuju Halaman H01 § Klik Tombol Hapus Data
akan muncul pesan M04 jika Pilih Ya maka akan muncul pesan M05 dan jika tidak akan muncul pesan M06 LOGO APLIKASI Halaman Utama Sign Out
Tabel Data
Judul Halaman Hapus Data
Profil H04
Admin
3.3.2.4 Perancangan Halaman Profil Pengguna
Gambar dibawah ini merupakan perancangan halaman Profil Pengguna.
FOOTER
Lebar Halaman 900 pixel. Tinggi Halaman Auto. Ukuran Font 24, 22, 14, 12, 11. Jenis Font Arial.
§ Klik Tobol Halaman Utama Menuju Halaman H02
§ Klik Tombol Admin Menuju Halaman H08 § Klik Tombol Profil Menuju
Halaman H06 § Klik Tombol Sign Out
Menuju Halaman H01 § Klik Tombol Edit Profil
menuju Halaman H06 § Klik Tombol Edit
Password menuju Halaman H07 LOGO APLIKASI Halaman Utama Admin Sign Out
Judul Halaman Edit Password
Profil H05 Edit Profil Gambar Id Pengguna : Nama Pengguna : Tipe : Email :
Gambar 3.15 Rancangan Halaman Profil Pengguna
3.3.2.5 Perancangan Halaman Edit Profil Pengguna
Gambar dibawah ini merupakan perancangan halaman Edit Profil Pengguna.
FOOTER
Lebar Halaman 900 pixel. Tinggi Halaman Auto. Ukuran Font 24, 22, 14, 12, 11. Jenis Font Arial.
§ Klik Tobol Halaman Utama Menuju Halaman H02
§ Klik Tombol Admin Menuju Halaman H08 § Klik Tombol Profil Menuju
Halaman H06 § Klik Tombol Sign Out
Menuju Halaman H01 § Klik Tombol Profil menuju
Halaman H05 § Klik Tombol Edit
Password menuju Halaman H07 § Klik Tombol Perbaharui
Data Pengguna akan muncul pesan M08 jika data berhasil diperbarui dan jika tidak maka akan muncul pesan M09 § Klik Tombol Batal menuju
Halaman Sebelumnya H05/H07
LOGO APLIKASI Halaman Utama Admin Sign Out
Judul Halaman Edit Password
Profil H06 Profil Id Pengguna : Nama Pengguna : Email :
Perbaharui Data Pengguna Batal
3.3.2.6 Perancangan Halaman Ubah Password
Gambar dibawah ini merupakan perancangan halaman Ubah Password.
FOOTER
Lebar Halaman 900 pixel. Tinggi Halaman Auto. Ukuran Font 24, 22, 14, 12, 11. Jenis Font Arial.
§ Klik Tobol Halaman Utama Menuju Halaman H02
§ Klik Tombol Admin Menuju Halaman H08 § Klik Tombol Profil Menuju
Halaman H06 § Klik Tombol Sign Out
Menuju Halaman H01 § Klik Tombol Profil menuju
Halaman H05 § Klik Tombol Edit Profil
menuju Halaman H06 § Klik Tombol Perbaharui
Password akan muncul pesan M10 jika password berhasil diperbaharui § Klik Tombol Batal menuju
Halaman Sebelumnya H05/H06
§ Jika password lama tidak sama maka akan muncul pesan M11
§ Jika Password baru tidak sama dengan Ulangi Password maka akan muncul pesan M12 LOGO APLIKASI Halaman Utama Admin Sign Out
Judul Halaman Edit Profil
Profil H07
Profil
Password Lama
Perbaharui Password Batal Password Baru
Password Ulangi Password
Gambar 3.17 Rancangan Halaman Ubah Password
3.3.2.7 Perancangan Halaman Menu Admin
Gambar dibawah ini merupakan perancangan Halaman Menu Admin.
FOOTER
Lebar Halaman 900 pixel. Tinggi Halaman Auto. Ukuran Font 24, 22, 14, 12, 11. Jenis Font Arial.
§ Klik Tombol Halaman Utama Menuju Halaman H02
§ Klik Tombol Admin Menuju Halaman H08 § Klik Tombol Profil Menuju
Halaman H06 § Klik Tombol Sign Out
Menuju Halaman H01 § Klik Tombol Tambah Pengguna Menuju Halaman H09 § KlikTombol Edit menuju
Halaman H10 § Klik Tombol Hapus maka
akan muncul pesan M13, jika pilih Ya maka akan muncul pesan M14 dan jika pilih Tidak akan muncul pesan M15 LOGO APLIKASI Halaman Utama Admin Sign Out
Judul Halaman Tambah Pengguna
Profil H08 Id Pengguna Nama Pengguna Tipe Email Hapus Edit Id Pengguna Nama Pengguna Tipe Email Hapus Edit
3.3.2.8 Perancangan Halaman Tambah Pengguna
Gambar dibawah ini merupakan perancangan Halaman Tambah Pengguna.
FOOTER
Lebar Halaman 900 pixel. Tinggi Halaman Auto. Ukuran Font 24, 22, 14, 12, 11. Jenis Font Arial.
§ Klik Tobol Halaman Utama Menuju Halaman H02
§ Klik Tombol Admin Menuju Halaman H08 § Klik Tombol Profil Menuju
Halaman H06 § Klik Tombol Sign Out
Menuju Halaman H01 § Klik Tombol Menu Admin
menuju Halaman H08 § Klik Tombol Tambah Pengguna maka akan muncul pesan M16 jika data pengguna berhasil tersimpan dan jika gagal maka akan muncul pesan M17
§ Klik Tombol Ulang akan mengkosongkan isi form tambah pengguna LOGO APLIKASI Halaman Utama Admin Sign Out
Judul Halaman Menu Admin
Profil H09
Nama Pengguna Baru Tipe Email Password Ulangi Password Ulang Tambah Pengguna
Gambar 3.19 Rancangan Halaman Tambah Pengguna
3.3.2.9 Perancangan Halaman Ubah Data Pengguna
Gambar dibawah ini merupakan perancangan Halaman Ubah Pengguna.
FOOTER
Lebar Halaman 900 pixel. Tinggi Halaman Auto. Ukuran Font 24, 22, 14, 12, 11. Jenis Font Arial.
§ Klik Tobol Halaman Utama Menuju Halaman H02
§ Klik Tombol Admin Menuju Halaman H08 § Klik Tombol Profil Menuju
Halaman H06 § Klik Tombol Sign Out
Menuju Halaman H01 § Klik Tombol Perbahatui
Data Pengguna akan muncul pesan M18 jika data berhasil diperbaharui dan jika tidak maka akan muncul pesan M19 § Klik Tombol Batal akan
kembali ke Halaman H08 LOGO APLIKASI Halaman Utama Admin Sign Out
Judul Halaman
Profil
H09
Batal Perbaharui Data Pengguna IdPengguna
Nama Pengguna Baru Tipe
3.3.2.10Perancangan Halaman Lupa Password
Gambar dibawah ini merupakan perancangan Halaman Lupa Password.
FOOTER
Lebar Halaman 900 pixel. Tinggi Halaman Auto. Ukuran Font 24, 22, 14, 12, 11. Jenis Font Arial.
§ Klik Tombol Kirim Password ke Email maka akan muncul pesan M20 jika email yang dimasukan benar dan terdapat dalam database, tetapi jika tidak maka akan muncul pesan M21
LOGO APLIKASI
H10
Email Pengguna
Kirim Password ke Email
Gambar 3.21 Rancangan Halaman Lupa Password
3.3.2.11Perancangan Pesan
Dibawah ini merupakan tabel dari perancangan pesan yang terdapat pada aplikasi simulasi pemantau suhu:
Tabel 3.6 Tabel Perancangan Pesan
Kode Pesan Isi Pesan
M01 Perhatian : Email / Password Anda Salah
M02 Informasi : Data pengukuran Telah Tersimpan dengan Id “...”
M03 Perhatian : Data Pengukuran Gagal Tersimpan M04 Apakah Anda akan menghapus data pengukuran ini? M05 Informasi : Data Pengukuran berhasil dihapus M06 Perhatian : Data Pengukuran gagal dihapus
M07 Perhatian : Data yang Anda Maksud Tidak Ditemukan M08 Informasi : Data Profil Pengguna ... Telah diperbaharui
M09 Perhatian : Data Profil Pengguna ... Gagal Diperbaharui M10 Informasi : Password Anda telah diperbaharui
M11 Perhatian : Password lama Anda salah
M12 Perhatian : Password baru Anda tida sama dengan isi dari Ulangi Password
M13 Apakah Anda akan menghapus data pengguna ini? M14 Informasi : Data berhasil dihapus
M15 Perhatian : Data pengguna gagal dihapus
M16 Informasi : Data Pengguna Baru Telah Tersimpan dengan Id ...
M17 Perhatian : Data Pengguna Baru Gagal Tersimpan
M18 Informasi : Data Pengguna dengan ID ... Telah Diperbaharui
M19 Perhatian : Data Pengguna dengan ID ... Gagal Diperbaharui
M20 Informasi : Password Anda Telah Dikirim Ke Email Anda ..., silahkan cek folder inbox atau spam email Anda M21 Perhatian : Password yang Anda Maksud tidak terdapat
dalam database kami. Sehingga Password Tidak Bisa Terkirim Ke email Anda
3.3.2.12 Jaringan Semantik
Jaringan semantik merupakan skema yang menggambarkan hubungan antar form atau halaman dan pesan yang telah dirancang sebelumnya. Adapun jaringan semantik pada aplikasi simulasi pemantau suhu adalah sebagai berikut :
1. Jaringan Semantik Admin
H01 H02 H03 H05 H04 H10 H08 M01 M04 M08, M09 H06 H07 H09 H11 M20, M21 M10, M11, M12 M13, M14, M15 M16, M17 M18, M19
2. Jaringan Semantik Petugas H01 H02 H03 H05 H04 M01 M02, M03, M04 M02, M03 H06 H07 H11 M20, M21 M04, M05, M06 M08, M09 M10, M11, M12