BAB 3 PEMBAHASAN
3.5. Perancangan
Perancangan data atau lebih dikenal dengan perancangan basis data yaitu menciptakan atau merancang data yang terhubung dan disimpan secara bersama- sama. Untuk menggambarkannya digunakanlah skema relasi, diagram relasi dan perancangan struktur tabel. Dari tiga hasil tersebut, implementasi basis data akan bisa dikerjakan.
3.5.1. Perancangan Data
Perancangan data atau lebih dikenal dengan perancangan basis data yaitu menciptakan atau merancang data yang terhubung dan disimpan secara bersama- sama. Untuk menggambarkannya digunakanlah skema relasi, diagram relasi dan perancangan struktur tabel. Dari tiga hasil tersebut, implementasi basis data akan bisa dikerjakan.
3.5.1.1.Skema Relasi
Setiap himpunan entitas dipetakan menjadi sebuah relasi dasar dengan
primary key yang telah didefinisikan. Adapun skema relasi yang ada yaitu sebagai berikut:
1. Cabang = (id_cabang, nama_cabang, kota_cabang).
2. Customer Service = (id_cs, nama_cs, username_cs, password_cs, email_cs, aktif_cs, id_cabang).
3. Pengajar = (id_pengajar, nama_pengajar, username_pengajar, password_pengajar, email_pengajar, aktif_pengajar, id_cabang). 4. Program = (id_program, nama_program).
5. Materi = (id_materi, nama_materi, file_materi, deskripsi_materi, id_program, id_pengajar).
6. Siswa = (id_siswa, nama_siswa, notlp_siswa, alamat_siswa, sekolah_siswa, username_siswa, password_siswa, email_siswa, aktif_siswa, id_cabang).
7. Try Out = (id_tryout, id_siswa, id_program). 8. Nilai Try Out = (id_nilai, nilai_tryout, id_tryout).
3.5.1.2.Diagram Relasi
Setiap tabel haruslah memiliki hubungan dengan tabel yang lainnya. Bila tidak ada penghubungan antar tabel maka dapat dikatakan pemodelan untuk membuat satu basis data adalah gagal. Adapun gambaran diagram relasi yang ada yaitu:
3.5.1.3.Struktur Tabel
Tabel-tabel yang terdapat dalam basis data yang digunakan dalam pembangunan Aplikasi Bimbel Online LBB BEST adalah sebagai berikut:
1. Tabel Cabang
Tabel 3-15. Struktur Tabel Cabang
Nama Field Tipe Data Panjang Atribut Keterangan
id_cabang Integer - Primary key Auto_increment
nama_cabang Varchar 25 Not Null
alamat_cabang Teks 50 Not Null
nama_kota Varchar 25 Not Null
2. Tabel CS
Tabel 3-16. Struktur Tabel CS
Nama Field Tipe Data Panjang Atribut Keterangan
id_cs Varchar 10 Primary key Not Null
nama_cs Varchar 25 Not Null
username_cs Varchar 25 Not Null
password_cs Varchar 100 Not Null
email_cs Varchar 35 Not Null
aktif_cs Char 1 Not Null,
enum(‘Y’, ‘T’)
id_cabang Integer - Foreign key
(Cabang.id_cabang)
Not Null
3. Tabel Program
Tabel 3-17. Struktur Tabel Program
Nama Field Tipe Data Panjang Atribut Keterangan
id_program Integer - Primary key Auto_increment
4. Tabel Pengajar
Tabel 3-18. Struktur Tabel Pengajar
Nama Field Tipe
Data Panjang Atribut
Keterangan
id_pengajar Varchar 10 Primary key Not Null
nama_pengajar Varchar 25 Not Null
username_pengajar Varchar 25 Null
password_pengajar Varchar 100 Null
email_pengajar Varchar 35 Null
aktif_pengajar Char 1 Not Null, enum(‘Y’, ‘T’) id_cabang Integer - Foreign key (Cabang.id_cabang) Not Null 5. Tabel Siswa
Tabel 3-19. Struktur Tabel Siswa
Nama Field Tipe Data Panjang Atribut Keterangan
id_siswa Varchar 10 Primary key Not Null
nama_siswa Varchar 25 Not Null
notlp_siswa Varchar 15 Not Null
alamat_siswa Teks 50 Not Null
sekolah_siswa Varchar 25 Not Null
username_siswa Varchar 25 Null
password_siswa Varchar 100 Null
email_siswa Varchar 35 Null
aktif_siswa Char 1 Not Null, enum(‘Y’, ‘T’) id_cabang Integer - Foreign key (Cabang.id_cabang) Not Null
6. Tabel Try Out
Tabel 3-20. Struktur Tabel Try Out
Nama Field Tipe Data Panjang Atribut Keterangan
id_tryout Integer - Primary key Auto_increment
id_siswa Varchar 10 Foreign key (Siswa.id_siswa) Not Null id_program Integer - Foreign key (Program.id_program) Not Null 7. Tabel Materi
Tabel 3-21. Struktur Tabel Materi
Nama Field Tipe Data Panjang Atribut Keterangan
id_materi Integer - Primary key Auto_increment
nama_materi Varchar 25 Not Null
file_materi Attachment Not Null
deskripsi_materi Teks 50 Not Null
id_program Integer - Foreign key (Program.id_program) Not Null id_pengajar Varchar 10 Foreign key (Pengajar.id_pengajar) Not Null
8. Tabel Nilai Try Out
Tabel 3-22. Struktur Tabel Nilai Try Out
Nama Field Tipe
Data Panjang Atribut
Keterangan
id_nilai Integer - Primary key Auto_increment
nilai_tryout Integer - Not Null
id_tryout Integer
- Foreign key (Tryout.id_tryout)
3.5.2. Perancangan Arsitektur
Setelah melakukan perancangan data pada sistem yang dibangun, maka dilakukanlah perancangan arsitektur. Perancangan arsitektur yang telah dibuat meliputi beberapa perancangan diantaranya perancangan struktur menu, perancangan antarmuka, dan jaringan semantik.
3.5.2.1.Perancangan Struktur Menu
Struktur menu dirancang sesuai dengan level pengguna sistem. Terdapat tiga pengguna aplikasi ini yaitu customer service, pengajar, dan siswa. Adapun struktur menunya adalah sebagai berikut:
1. Perancangan Struktur Menu Customer Service
Gambar 3.17. Struktur Menu Customer Service
2. Perancangan Struktur Menu Pengajar
Gambar 3.18. Struktur Menu Pengajar
3. Perancangan Struktur Menu Siswa
3.5.2.2.Perancangan Antarmuka
Spesifikasi antarmuka merupakan suatu bentuk tampilan dari program yang akan dibuat untuk kebutuhan interface dengan user. Berikut beberapa perancangan antarmuka untuk Aplikasi Bimbel Online LBB BEST:
3.5.2.2.1.Perancangan Antarmuka Customer Service 1. Perancangan Antarmuka Login Customer Service
Gambar 3.20. Perancangan Antarmuka Login Customer Service
- Klik button Login untuk menuju ke A02
Nama Layar : A01
Ukuran Layar : 1024 x 768 Font : Times New Roman Warna Background : Putih
2. Perancangan Antarmuka Beranda Customer Service
Gambar 3.21. Perancangan Antarmuka Beranda Customer Service
- Klik ‘Beranda’ untuk menuju ke A02 - Klik ‘Logout’ untuk
menuju ke A01 - Klik ‘Olah Data Cabang’
untuk menuju ke A03 - Klik ‘Olah Data
Customer Service’ untuk menuju ke A04
- Klik ‘Olah Data Program’ untuk menuju ke A05
- Klik ‘Olah Data Pengajar’ untuk menuju ke A06
- Klik ‘Olah Data Siswa’ untuk menuju ke A07 - Klik ‘Nilai Try Out
Online’ untuk menuju ke A14
Nama Layar : A02
Ukuran Layar : 1024 x 768 Font : Times New Roman Warna Background : Putih A02
3. Perancangan Antarmuka Olah Data Cabang
Gambar 3.22. Perancangan Antarmuka Olah Data Cabang
- Klik ‘Beranda’ untuk menuju ke A02 - Klik ‘Logout’ untuk
menuju ke A01
- Klik ‘Olah Data Cabang’ untuk menuju ke A03 - Klik ‘Olah Data
Customer Service’ untuk menuju ke A04
- Klik ‘Olah Data Program’ untuk menuju ke A05
- Klik ‘Olah Data Pengajar’ untuk menuju ke A06
- Klik ‘Olah Data Siswa’ untuk menuju ke A07 - Klik button ‘Tambah’ untuk menuju ke A08 - Klik ‘Edit’ untuk
menuju ke A08 - Klik ‘Nilai Try Out
Online’ untuk menuju ke A14
Nama Layar : A03
Ukuran Layar : 1024 x 768 Font : Times New Roman Warna Background : Putih A03
4. Perancangan Antarmuka Form Data Cabang
Gambar 3.23. Perancangan Antarmuka Form Data Cabang
- Klik ‘Beranda’ untuk menuju ke A02 - Klik ‘Logout’ untuk
menuju ke A01
- Klik ‘Olah Data Cabang’ untuk menuju ke A03 - Klik ‘Olah Data Customer
Service’ untuk menuju ke A04
- Klik ‘Olah Data Program’ untuk menuju ke A05 - Klik ‘Olah Data Pengajar’
untuk menuju ke A06 - Klik ‘Olah Data Siswa’
untuk menuju ke A07 - Klik button ‘Simpan’ untuk menuju ke A03 - Klik ‘Batal’ untuk menuju
ke A03
- Klik ‘Nilai Try Out Online’ untuk menuju ke A14
Nama Layar : A08
Ukuran Layar : 1024 x 768 Font : Times New Roman Warna Background : Putih
5. Perancangan Antarmuka Olah Data Customer Service
Gambar 3.24. Perancangan Antarmuka Olah Data Customer Service
- Klik ‘Beranda’ untuk menuju ke A02 - Klik ‘Logout’ untuk
menuju ke A01
- Klik ‘Olah Data Cabang’ untuk menuju ke A03 - Klik ‘Olah Data Customer
Service’ untuk menuju ke A04
- Klik ‘Olah Data Program’ untuk menuju ke A05 - Klik ‘Olah Data Pengajar’
untuk menuju ke A06 - Klik ‘Olah Data Siswa’
untuk menuju ke A07 - Klik button ‘Tambah’ untuk menuju ke A09 - Klik ‘Edit’ untuk menuju
ke A09
- Klik ‘Nilai Try Out Online’ untuk menuju ke A14
Nama Layar : A04
Ukuran Layar : 1024 x 768 Font : Times New Roman Warna Background : Putih
6. Perancangan Antarmuka Form Data Customer Service
Gambar 3.25. Perancangan Antarmuka Form Data Customer Service
- Klik ‘Beranda’ untuk menuju ke A02 - Klik ‘Logout’ untuk
menuju ke A01
- Klik ‘Olah Data Cabang’ untuk menuju ke A03 - Klik ‘Olah Data Customer
Service’ untuk menuju ke A04
- Klik ‘Olah Data Program’ untuk menuju ke A05 - Klik ‘Olah Data Pengajar’
untuk menuju ke A06 - Klik ‘Olah Data Siswa’
untuk menuju ke A07 - Klik button ‘Simpan’ untuk menuju ke A04 - Klik ‘Batal’ untuk menuju
ke A04
- Klik ‘Nilai Try Out Online’ untuk menuju ke A14
Nama Layar : A09
Ukuran Layar : 1024 x 768 Font : Times New Roman Warna Background : Putih
7. Perancangan Antarmuka Olah Data Program
Gambar 3.26. Perancangan Antarmuka Olah Data Program
- Klik ‘Beranda’ untuk menuju ke A02 - Klik ‘Logout’ untuk
menuju ke A01
- Klik ‘Olah Data Cabang’ untuk menuju ke A03 - Klik ‘Olah Data Customer
Service’ untuk menuju ke A04
- Klik ‘Olah Data Program’ untuk menuju ke A05 - Klik ‘Olah Data Pengajar’
untuk menuju ke A06 - Klik ‘Olah Data Siswa’
untuk menuju ke A07 - Klik button ‘Tambah’ untuk menuju ke A10 - Klik ‘Edit’ untuk menuju
ke A10
- Klik ‘Nilai Try Out Online’ untuk menuju ke A14
Nama Layar : A05
Ukuran Layar : 1024 x 768 Font : Times New Roman Warna Background : Putih
8. Perancangan Antarmuka Form Data Program
Gambar 3.27. Perancangan Antarmuka Form Data Program
- Klik ‘Beranda’ untuk menuju ke A02 - Klik ‘Logout’ untuk
menuju ke A01
- Klik ‘Olah Data Cabang’ untuk menuju ke A03 - Klik ‘Olah Data Customer
Service’ untuk menuju ke A04
- Klik ‘Olah Data Program’ untuk menuju ke A05 - Klik ‘Olah Data Pengajar’
untuk menuju ke A06 - Klik ‘Olah Data Siswa’
untuk menuju ke A07 - Klik button ‘Simpan’ untuk menuju ke A05 - Klik ‘Batal’ untuk menuju
ke A05
- Klik ‘Nilai Try Out Online’ untuk menuju ke A14
Nama Layar : A10
Ukuran Layar : 1024 x 768 Font : Times New Roman Warna Background : Putih
9. Perancangan Antarmuka Olah Data Pengajar
Gambar 3.28. Perancangan Antarmuka Olah Data Pengajar
- Klik ‘Beranda’ untuk menuju ke A02 - Klik ‘Logout’ untuk
menuju ke A01
- Klik ‘Olah Data Cabang’ untuk menuju ke A03 - Klik ‘Olah Data Customer
Service’ untuk menuju ke A04
- Klik ‘Olah Data Program’ untuk menuju ke A05 - Klik ‘Olah Data Pengajar’
untuk menuju ke A06 - Klik ‘Olah Data Siswa’
untuk menuju ke A07 - Klik button ‘Tambah’ untuk menuju ke A11 - Klik ‘Edit’ untuk menuju
ke A11
- Klik ‘Nilai Try Out Online’ untuk menuju ke A14
Nama Layar : A06
Ukuran Layar : 1024 x 768 Font : Times New Roman Warna Background : Putih
10.Perancangan Antarmuka Form Data Pengajar
Gambar 3.29. Perancangan Antarmuka Form Data Pengajar
- Klik ‘Beranda’ untuk menuju ke A02 - Klik ‘Logout’ untuk
menuju ke A01
- Klik ‘Olah Data Cabang’ untuk menuju ke A03 - Klik ‘Olah Data Customer
Service’ untuk menuju ke A04
- Klik ‘Olah Data Program’ untuk menuju ke A05 - Klik ‘Olah Data Pengajar’
untuk menuju ke A06 - Klik ‘Olah Data Siswa’
untuk menuju ke A07 - Klik button ‘Simpan’ untuk menuju ke A06 - Klik ‘Batal’ untuk menuju
ke A06
- Klik ‘Nilai Try Out Online’ untuk menuju ke A14
Nama Layar : A11
Ukuran Layar : 1024 x 768 Font : Times New Roman Warna Background : Putih
11.Perancangan Antarmuka Olah Data Siswa
Gambar 3.30. Perancangan Antarmuka Olah Data Siswa
- Klik ‘Beranda’ untuk menuju ke A02 - Klik ‘Logout’ untuk
menuju ke A01
- Klik ‘Olah Data Cabang’ untuk menuju ke A03 - Klik ‘Olah Data Customer
Service’ untuk menuju ke A04
- Klik ‘Olah Data Program’ untuk menuju ke A05 - Klik ‘Olah Data Pengajar’
untuk menuju ke A06 - Klik ‘Olah Data Siswa’
untuk menuju ke A07 - Klik button ‘Tambah’ untuk menuju ke A12 - Klik ‘Edit’ untuk menuju
ke A12
- Klik ‘Detail Program’ untuk menuju ke A13 - Klik ‘Nilai Try Out
Online’ untuk menuju ke A14
Nama Layar : A07
Ukuran Layar : 1024 x 768 Font : Times New Roman Warna Background : Putih
12.Perancangan Antarmuka Form Data Siswa
Gambar 3.31. Perancangan Antarmuka Form Data Siswa
- Klik ‘Beranda’ untuk menuju ke A02 - Klik ‘Logout’ untuk
menuju ke A01
- Klik ‘Olah Data Cabang’ untuk menuju ke A03 - Klik ‘Olah Data Customer
Service’ untuk menuju ke A04
- Klik ‘Olah Data Program’ untuk menuju ke A05 - Klik ‘Olah Data Pengajar’
untuk menuju ke A06 - Klik ‘Olah Data Siswa’
untuk menuju ke A07 - Klik button ‘Simpan’ untuk menuju ke A07 - Klik ‘Batal’ untuk menuju
ke A07
- Klik ‘Nilai Try Out Online’ untuk menuju ke A14
Nama Layar : A12
Ukuran Layar : 1024 x 768 Font : Times New Roman Warna Background : Putih
13.Perancangan Antarmuka Detail Program Siswa
Gambar 3.32. Perancangan Antarmuka Detail Program Siswa
- Klik ‘Beranda’ untuk menuju ke A02 - Klik ‘Logout’ untuk
menuju ke A01
- Klik ‘Olah Data Cabang’ untuk menuju ke A03 - Klik ‘Olah Data Customer
Service’ untuk menuju ke A04
- Klik ‘Olah Data Program’ untuk menuju ke A05 - Klik ‘Olah Data Pengajar’
untuk menuju ke A06 - Klik ‘Olah Data Siswa’
untuk menuju ke A07 - Klik button ‘Simpan’ untuk menuju ke A07 - Klik ‘Batal’ untuk menuju
ke A07
- Klik ‘<<Kembali’ untuk menuju ke A07 - Klik ‘Nilai Try Out
Online’ untuk menuju ke A14
Nama Layar : A13
Ukuran Layar : 1024 x 768 Font : Times New Roman Warna Background : Putih
14.Perancangan Antarmuka Hasil Nilai Try Out Online
- Klik ‘Beranda’ untuk menuju ke A02 - Klik ‘Logout’ untuk
menuju ke A01
- Klik ‘Olah Data Cabang’ untuk menuju ke A03 - Klik ‘Olah Data Customer
Service’ untuk menuju ke A04
- Klik ‘Olah Data Program’ untuk menuju ke A05 - Klik ‘Olah Data Pengajar’
untuk menuju ke A06 - Klik ‘Olah Data Siswa’
untuk menuju ke A07 - Klik ‘Nilai Try Out
Online’ untuk menuju ke A14
Nama Layar : A14
Ukuran Layar : 1024 x 768 Font : Times New Roman Warna Background : Putih
3.5.2.2.2.Perancangan Antarmuka Pengunjung
1. Perancangan Antarmuka Halaman Utama Aplikasi
Gambar 3.33. Perancangan Antarmuka Halaman Utama Aplikasi
- Klik ‘Beranda’ untuk menuju ke T01 - Klik ‘Peserta Bimbel’
untuk menuju ke T02 - Klik ‘Pengajar’ untuk
menuju ke T03
- Klik ‘Daftar’ untuk menuju ke T04
- Klik ‘Login’ untuk menuju ke T05
Nama Layar : T01
Ukuran Layar : 1024 x 768 Font : Times New Roman Warna Background : Putih
2. Perancangan Antarmuka Daftar Peserta Bimbel
Gambar 3.34. Perancangan Antarmuka Daftar Peserta Bimbel
- Klik ‘Beranda’ untuk menuju ke T01 - Klik ‘Peserta Bimbel’
untuk menuju ke T02 - Klik ‘Pengajar’ untuk
menuju ke T03
- Klik ‘Daftar’ untuk menuju ke T04
- Klik ‘Login’ untuk menuju ke T05
Nama Layar : T02
Ukuran Layar : 1024 x 768 Font : Times New Roman Warna Background : Putih
3. Perancangan Antarmuka Daftar Pengajar
Gambar 3.35. Perancangan Antarmuka Daftar Pengajar
- Klik ‘Beranda’ untuk menuju ke T01 - Klik ‘Peserta Bimbel’
untuk menuju ke T02 - Klik ‘Pengajar’ untuk
menuju ke T03
- Klik ‘Daftar’ untuk menuju ke T04
- Klik ‘Login’ untuk menuju ke T05
Nama Layar : T03
Ukuran Layar : 1024 x 768 Font : Times New Roman Warna Background : Putih
4. Perancangan Antarmuka Form Pendaftaran
Gambar 3.36. Perancangan Antarmuka Form Pendaftaran
- Klik ‘Beranda’ untuk menuju ke T01 - Klik ‘Peserta Bimbel’
untuk menuju ke T02 - Klik ‘Pengajar’ untuk
menuju ke T03
- Klik ‘Daftar’ untuk menuju ke T04
- Klik ‘Login’ untuk menuju ke T05
- Klik ‘Daftar’ bawah kiri untuk menuju ke M01 jika berhasil atau ke M02 jika gagal
Nama Layar : T04
Ukuran Layar : 1024 x 768 Font : Times New Roman Warna Background : Putih
5. Perancangan Antarmuka Form Login
Gambar 3.37. Perancangan Antarmuka Form Login
- Klik ‘Beranda’ untuk menuju ke T01 - Klik ‘Peserta Bimbel’
untuk menuju ke T02 - Klik ‘Pengajar’ untuk
menuju ke T03
- Klik ‘Daftar’ untuk menuju ke T04
- Klik ‘Login’ untuk menuju ke T05
- Klik ‘Login’ bawah kiri untuk menuju ke P01 jika pengajar atau ke S01 jika siswa atau ke M03 jika gagal
Nama Layar : T05
Ukuran Layar : 1024 x 768 Font : Times New Roman Warna Background : Putih
3.5.2.2.3.Perancangan Antarmuka Pengajar 1. Perancangan Antarmuka Beranda Pengajar
Gambar 3.38. Perancangan Antarmuka Beranda Pengajar
- Klik ‘Beranda’ untuk menuju ke P01 - Klik ‘Ubah Password’
untuk menuju ke P02 - Klik ‘Upload Materi’
untuk menuju ke P03 - Klik ‘Logout’ untuk
menuju ke T01
Nama Layar : P01
Ukuran Layar : 1024 x 768 Font : Times New Roman Warna Background : Putih
2. Perancangan Antarmuka Ubah Password Pengajar
Gambar 3.39. Perancangan Antarmuka Ubah Password Pengajar
- Klik ‘Beranda’ untuk menuju ke P01 - Klik ‘Ubah Password’
untuk menuju ke P02 - Klik ‘Upload Materi’ untuk menuju ke P03 - Klik ‘Logout’ untuk
menuju ke T01 - Klik ‘Simpan’ untuk
menuju ke M04 jika benar atau M05 jika salah
Nama Layar : P02
Ukuran Layar : 1024 x 768 Font : Times New Roman Warna Background : Putih
3. Perancangan Antarmuka Daftar Materi Pengajar
Gambar 3.40. Perancangan Antarmuka Daftar Materi Pengajar
- Klik ‘Beranda’ untuk menuju ke P01 - Klik ‘Ubah Password’
untuk menuju ke P02 - Klik ‘Upload Materi’ untuk menuju ke P03 - Klik ‘Logout’ untuk
menuju ke T01 - Klik ‘Tambah’ untuk
menuju ke P04
Nama Layar : P03
Ukuran Layar : 1024 x 768 Font : Times New Roman Warna Background : Putih
4. Perancangan Antarmuka Form Upload Materi
Gambar 3.41. Perancangan Antarmuka Form Upload Materi
- Klik ‘Beranda’ untuk menuju ke P01 - Klik ‘Ubah Password’
untuk menuju ke P02 - Klik ‘Upload Materi’ untuk menuju ke P03 - Klik ‘Logout’ untuk
menuju ke T01 - Klik ‘Simpan’ untuk
menuju ke P03
- Klik ‘Batal’ untuk menuju ke P03
Nama Layar : P04
Ukuran Layar : 1024 x 768 Font : Times New Roman Warna Background : Putih
3.5.2.2.4.Perancangan Antarmuka Siswa 1. Perancangan Antarmuka Beranda Siswa
Gambar 3.42. Perancangan Antarmuka Beranda Siswa
- Klik ‘Beranda’ untuk menuju ke S01 - Klik ‘Ubah Password’
untuk menuju ke S02 - Klik ‘Download Materi’
untuk menuju ke S03 - Klik ‘Try Out Online’
untuk menuju ke S04 - Klik ‘Logout’ untuk
menuju ke T01
Nama Layar : S01
Ukuran Layar : 1024 x 768 Font : Times New Roman Warna Background : Putih
2. Perancangan Antarmuka Ubah Password Siswa
Gambar 3.43. Perancangan Antarmuka Ubah Password Siswa
- Klik ‘Beranda’ untuk menuju ke S01 - Klik ‘Ubah Password’
untuk menuju ke S02 - Klik ‘Download Materi’
untuk menuju ke S03 - Klik ‘Try Out Online’
untuk menuju ke S04 - Klik ‘Logout’ untuk
menuju ke T01 - Klik ‘Simpan’ untuk
menuju ke M04 jika benar atau M05 jika salah
Nama Layar : S02
Ukuran Layar : 1024 x 768 Font : Times New Roman Warna Background : Putih
3. Perancangan Antarmuka Download Materi
Gambar 3.44. Perancangan Antarmuka Download Materi
- Klik ‘Beranda’ untuk menuju ke S01 - Klik ‘Ubah Password’
untuk menuju ke S02 - Klik ‘Download Materi’
untuk menuju ke S03 - Klik ‘Try Out Online’
untuk menuju ke S04 - Klik ‘Logout’ untuk
menuju ke T01
Nama Layar : S03
Ukuran Layar : 1024 x 768 Font : Times New Roman Warna Background : Putih
4. Perancangan Antarmuka Pemilihan Try Out Online
Gambar 3.45. Perancangan Antarmuka Pemilihan Try Out Online
- Klik ‘Beranda’ untuk menuju ke S01 - Klik ‘Ubah Password’
untuk menuju ke S02 - Klik ‘Download Materi’
untuk menuju ke S03 - Klik ‘Try Out Online’
untuk menuju ke S04 - Klik ‘Logout’ untuk
menuju ke T01 - Klik ‘Nama Program’
untuk menuju ke S05
Nama Layar : S04
Ukuran Layar : 1024 x 768 Font : Times New Roman Warna Background : Putih
5. Perancangan Antarmuka Try Out Online
Gambar 3.46. Perancangan Antarmuka Try Out Online
- Klik ‘Beranda’ untuk menuju ke S01 - Klik ‘Ubah Password’
untuk menuju ke S02 - Klik ‘Download Materi’
untuk menuju ke S03 - Klik ‘Try Out Online’
untuk menuju ke S04 - Klik ‘Logout’ untuk
menuju ke T01
Nama Layar : S05
Ukuran Layar : 1024 x 768 Font : Times New Roman Warna Background : Putih
6. Perancangan Antarmuka Hasil Try Out Online
Gambar 3.47. Perancangan Antarmuka Hasil Try Out Online
- Klik ‘Beranda’ untuk menuju ke S01 - Klik ‘Ubah Password’
untuk menuju ke S02 - Klik ‘Download Materi’
untuk menuju ke S03 - Klik ‘Try Out Online’
untuk menuju ke S04 - Klik ‘Logout’ untuk
menuju ke T01
Nama Layar : S06
Ukuran Layar : 1024 x 768 Font : Times New Roman Warna Background : Putih
3.5.2.2.5.Perancangan Pesan
1. Perancangan Pesan Pendaftaran Berhasil
Gambar 3.48. Perancangan Pesan Pendaftaran Berhasil
2. Perancangan Pesan Pendaftaran Gagal
Gambar 3.49. Perancangan Pesan Pendaftaran Gagal
3. Perancangan Pesan Login Gagal
Gambar 3.50. Perancangan Pesan Login Gagal
M01 M02 M03
4. Perancangan Antarmuka Pesan Ubah Password Benar
Gambar 3.51. Perancangan Pesan Ubah Password Benar
5. Perancangan Antarmuka Pesan Ubah Password Salah
Gambar 3.52. Perancangan Pesan Ubah Password Salah
M04
M05
3.5.2.3.Jaringan Semantik
Setelah melakukan perancangan antarmuka dan perancangan pesan maka dilakukanlah perancangan terhadap aliran dari menu-menu yang ada di program akan digambarkan dalam sebuah jaringan simantik.
1. Jaringan Semantik Customer Service
Gambar 3.53. Jaringan Semantik Customer Service
2. Jaringan Semantik Pengajar
3. Jaringan Semantik Siswa
3.5.3. Perancangan Prosedural
Sebagai langkah terakhir dalam perancangan yaitu merancang procedural yang akan diimplementasikan ke dalam sistem. Prosedur ini akan digunakan sebagai algoritma dasar dalam mengkodekan prosedur yang ada. Adapun perancangan prosedural untuk pembangunan Aplikasi Bimbel Online LBB BEST yang akan dibangun adalah sebagai berikut :
3.5.3.1.Prosedur Daftar
3.5.3.2.Prosedur Login
Gambar 3.57. Prosedur Login
3.5.3.3.Prosedur Tambah Data Cabang
3.5.3.4.Prosedur Ubah Data Cabang
Gambar 3.59. Prosedur Ubah Data Cabang
3.5.3.5.Prosedur Tambah Data Customer Service
3.5.3.6.Prosedur Ubah Data Customer Service
Gambar 3.61. Prosedur Ubah Data Customer Service
3.5.3.7.Prosedur Tambah Data Program
3.5.3.8.Prosedur Ubah Data Program
Gambar 3.63. Prosedur Ubah Data Program
3.5.3.9.Prosedur Tambah Data Pengajar
3.5.3.10. Prosedur Ubah Data Pengajar
Gambar 3.65. Prosedur Ubah Data Pengajar
3.5.3.11. Prosedur Tambah Data Siswa
3.5.3.12. Prosedur Ubah Data Siswa
Gambar 3.67. Prosedur Ubah Data Siswa
3.5.3.13. Prosedur Upload Materi
3.5.3.14. Prosedur Hapus Materi
Gambar 3.69. Prosedur Hapus Materi
3.5.3.15. Prosedur Download Materi
3.5.3.16. Prosedur Pemilihan Try Out
Gambar 3.71. Prosedur Pemilihan Try Out
3.5.3.17. Prosedur Penghitungan Hasil Try Out
3.6. Implementasi
Tahapan ini dilakukan setelah perancangan selesai dilakukan dan selanjutnya akan diimplementasikan pada bahasa pemrograman yang akan digunakan. Tujuan Implementasi adalah untuk mengkonfirmasikan modul program perancangan pada para pelaku sistem sehingga pengguna dapat memberi masukan kepada pembangun sistem.
3.6.1. Implementasi Data
Implementasi data yang dilakukan berdasarkan perancangan data sebelumnya. Adapun implementasi data dengan menggunakan MySQL yaitu sebagai berikut: