File 11 Bab III Pembahasan 2

BAB III
PEMBAHASAN
3.1. Analisis Kebutuhan
Analisis kebutuhan perlu dilakukan dalam perancangan sistem perangkat lunak.
Analisis kebutuhan dilakukan untuk mengetahui apa saja yang fitur yang akan
dirancang sesuai dengan kebutuhan pemakai. Analisis kebutuhan yang dilakukan
meliputi:
A. Analisis Kebutuhan Pengguna
1. Admin
a. Admin dapat login ke dalam menu admin.
b. Admin dapat menambah, melihat, mengubah, menghapus materi
pelajaran.
c. Admin dapat menambah, melihat, mengubah, menghapus daftar
pertanyaan.
d. Admin dapat melihat dan menghapus daftar anggota.
e. Admin dapat melihat daftar akun admin.
f. Admin yang memiliki level sebagai programmer dapat menambah,
mengubah dan menghapus akun admin.
g. Admin dapat logout dari menu admin.
2. Pengunjung
a. Pengunjung dapat melakukan pendaftaran melalui formulir register.
30
31
b. Pengunjung dapat membaca daftar fitur-fitur yang ada.
c. Pengunjung dapat membaca informasi mengenai tes TOEFL.
3. Member
a. Member dapat login ke dalam sistem.
b. Member dapat mengakses materi pembelajaran.
c. Member dapat mengerjakan soal ujian.
d. Member dapat melihat hasil nilai.
e. Member dapat mengubah profil.
f. Member dapat melihat dan mencetak sertifikat hasil skor.
g. Member dapat logout dari sistem.
B. Analisis Kebutuhan Sistem
1. Perangkat Keras (hardware)
Untuk merancang dan membangun website e-learning dibutuhkan perangkat
keras yang mumpuni supaya proses pembuatan maupun pengujian dapat
berjalan dengan baik. Spesifikasi yang digunakan adalah sebagai berikut:
Processor : Intel CoreTM i3
Memory : 2GB DDR3 Memory
Harddisk : 320 GB HDD
VGA : Intel® HD Graphics
Monitor : 14” HD LED LCD
2. Perangkat Lunak (Software)
Software atau perangkat lunak yang digunakan untuk mendukung perancangan
dan pembuatan website e-learning ini sebagai berikut:

32
a. Sistem Operasi
Windows 7 Ultimate
b. Software perancangan
1) Notepad++, digunakan untuk pembuatan skrip program.
2) XAMPP, digunakan untuk server localhost.
c. Software untuk web browser
Web browser yang digunakan dalam perancangan yaitu Mozilla Firefox.
3. Informasi
Pesan yang akan ditampilkan oleh sistem secara otomatis untuk memberikan
informasi kepada pemakai. Informasi yang ditampilkan yaitu :
a. Pesan error ditampilkan oleh sistem apabila user salah memasukkan
username ataupun password.
b. Pesan error ditampilkan oleh sistem apabila admin salah memasukkan
username ataupun password.
c. Pesan error ditampilkan oleh sistem apabila username atau e-mail yang
dibuat pada proses pendaftaran sudah pernah didaftarkan sebelumnya.
d. Pesan informasi berupa pop-up ditampilkan oleh sistem apabila user
berhasil melakukan pendaftaran.
e. Pesan informasi berupa pop-up ditampilkan oleh sistem apabila admin
berhasil menambah materi.
f. Pesan informasi berupa pop-up ditampilkan oleh sistem apabila admin
berhasil menambah soal.
g. Pesan informasi berupa pop-up ditampilkan oleh sistem saat user hendak
33
memulai ujian.
4. Security
Sistem yang dibuat dilengkapi dengan sistem pengamanan yang mengharuskan
pengguna maupun admin melakukan login terlebih dahulu dengan memasukkan
username dan password untuk dapat masuk kedalam sistem.
3.2. Perancangan Perangkat Lunak
3.2.1. Rancangan Antar Muka
Perancangan antar muka perlu dilakukan untuk membuat tampilan website
tertata rapi sesuai dengan tata letak yang telah dibuat. Dengan rancangan antar muka
yang baik akan mempermudah tahapan implementasi dalam mendesain website.
1. Rancangan Antar Muka Admin
a. Login Admin
Gambar III.1. Rancangan Antar Muka Login Admin

34
b. Index Admin
Gambar III.2. Rancangan Antar Muka Index Admin
c. Home Admin
Gambar III.3. Rancangan Antar Muka Home Admin

35
d. Add Lessons
Gambar III.4. Rancangan Antar Muka Add Lessons
e. Lessons List
Gambar III.5. Rancangan Antar Muka Lessons List

36
f. Edit Lessons
Gambar III.6. Rancangan Antar Muka Edit Lessons
g. Add Questions
Gambar III.7. Rancangan Antar Muka Add Questions

37
h. Questions List
Gambar III.8. Rancangan Antar Muka Question List
i. Edit Questions
Gambar III.9. Rancangan Antar Muka Edit Questions

38
j. View Children Question
Gambar III.10. Rancangan Antar Muka View Children Question
k. Add Children Question
Gambar III.11. Rancangan Antar Muka Add Children Question

39
l. Edit Children Question
Gambar III.12. Rancangan Antar Muka Edit Children Question
m. Member List
Gambar III.13. Rancangan Antar Muka Member List

40
n. Admin List
Gambar III.14. Rancangan Antar Muka Admin List
o. Add Admin
Gambar III.15. Rancangan Antar Muka Add Admin

41
p. Edit Admin
Gambar III.16. Rancangan Antar Muka Edit Admin
q. Change Password
Gambar III.17. Rancangan Antar Muka Change Password

42
2. Rancangan Antar Muka Pengunjung
a. Index
Gambar III.18. Rancangan Antar Muka Index Pengunjung
b. Home
Gambar III.19. Rancangan Antar Muka Home Pengunjung

43
c. About
Gambar III.20. Rancangan Antar Muka About Pengunjung
d. Login
Gambar III.21. Rancangan Antar Muka Login Pengunjung

44
e. Register
Gambar III.22. Rancangan Antar Muka Register Pengunjung
3. Rancangan Antar Muka Index Member
a. Index Member
Gambar III.23. Rancangan Antar Muka Index Member

45
b. Home
Gambar III.24. Rancangan Antar Muka Home Member
c. About
Gambar III.25. Rancangan Antar Muka About Member

46
d. Lessons
Gambar III.26. Rancangan Antar Muka Lessons Member
e. Profile
Gambar III.27. Rancangan Antar Muka Profile Member

47
f. Cetak Certificate
Gambar III.28. Rancangan Antar Muka Cetak Certificate
g. Test
Gambar III.29. Rancangan Antar Muka Test Member

48
h. Result
Gambar III.30. Rancangan Antar Muka Result Member
i. Update Profile
Gambar III.31. Rancangan Antar Muka Update Profile Member
3.2.2. Rancangan Basis Data
Perancangan basis data menghasilkan pementaan tabel-tabel yang digambarkan
dengan Entity Relationship Diagram (ERD). Berikut adalah Entity Relationship
Diagram (ERD)
49
1. Entity Relationship Diagram (ERD)
Gambar III.32. Rancangan Entity Relationship Diagram (ERD)

50
2. Transformasi Entity Relationship Diagram (ERD) ke Logical Relational
Structure (LRS)
Gambar III.33. Rancangan Transformasi ERD ke LRS

51
3. Logical Relational Structure (LRS)
Gambar III.34. Rancangan Logical Relational Structure (LRS)
3.2.3. Spesifikasi File
Dalam perancangan basis data menghasilkan table yang terbentuk dari
transformasi ERD. Pada tahap ini spesifikasi field tiap table ditentukan sesuai dengan
kebutuhan. Berikut ini merupakan rancangan spesifikasi file yang digunakan pada
website e-learning ini:

52
1. Spesifikasi File User
Nama File : User
Akronim : Pengguna
Fungsi : Untuk menyimpan data user/pelajar
Tipe File : File Master
Organisasi File : Index Sequential
Akses File : Random
Media : Harddisk
Panjang Record : 415
Kunci Field : id_user
Software : MySQL
Tabel III.1.
Spesifikasi File User
No Element Data Nama Field Tipe Size Keterangan

1 Id User id_user int 10 Primary Key
2 E-mail User email varchar 50
3 Username User username varchar 20
4 Password User password varchar 50
5 Full Name name varchar 30
6 Photo Profile photo varchar 255
2. Spesifikasi File Kategori
Nama File : Kategori
Akronim : Kategori
Fungsi : Untuk menyimpan data kategori soal dan materi

53
Akses File : Random
Media : Harddisk
Panjang Record : 21
Kunci Field :id_kategori
Software : MySQL
Tabel III.2.
Spesifikasi File Kategori

1 Id Kategori id_kategori int 1 Primary Key
2 Nama Kategori nama_kategori varchar 20
3. Spesifikasi File Materi
Nama File : Materi
Akronim : Pelajaran
Fungsi : Untuk menyimpan data materi
Akses File : Random
Media : Harddisk
Kunci Field : id_materi
Software : MySQL
54
Tabel III.3.
Spesifikasi File Materi

1 Id Materi id_materi int 10 Primary Key
2 Tipe Materi tipe_materi enum(‘e-
book’,
’video’,
‘audio’)
3 Judul Materi judul_materi varchar 50
4 Deskripsi Materi deskripsi varchar 255
5 File Materi file_materi varchar 255
6 Id Kategori id_kategori int 1 Foreign Key
4. Spesifikasi File Soal_Ujian
Nama File : Soal_Ujian
Akronim : Soal Ujian
Fungsi : Untuk menyimpan data soal ujian
Akses File : Random
Media : Harddisk
Kunci Field : id_soal
Software : MySQL
55
Tabel III.4.
Spesifikasi File Soal Ujian

1 Id Soal id_soal int 10 Primary Key
2 Bagian Soal part enum (‘a’,
’b’, ’c’)
3 Status Induk parent tinyint 1
Soal
4 Lokasi Id Soal children int 10
Induk
5 Soal Ujian soal varchar 255
6 File Soal File varchar 255
7 Pilihan A pil_a varchar 80
8 Pilihan B pil_b varchar 80
9 Pilihan C pil_c varchar 80
10 Pilihan D pil_d varchar 80
11 Jawaban Benar jawaban_bena enum (‘a’,
r ’b’, ’c’, ’d’)
5. Spesifikasi File Ujian
Nama File : Ujian
Akronim : Data Ujian
Fungsi : Untuk menyimpan data ujian user
Tipe File : File Transaksi
Akses File : Random
Media : Harddisk
Kunci Field : id_ujian
Software : MySQL
56
Tabel III.5.
Spesifikasi File Ujian

1 Id Ujian id_ujian int 255 Primary Key
2 Jumlah jml_jwbbenar int 2
Jawaban Benar
3 Skor Hasil skor int 3
4 Tanggal Ujian tanggal datetime
5 Id User id_user int 5 Foreign Key
6. Spesifikasi File Detail_Ujian
Nama File : Detail Ujian
Akronim : Detail Ujian
Fungsi : Untuk menyimpan detail ujian
Tipe File : File Transaksi
Organisasi File : Sequential
Akses File : Random
Media : Harddisk
Kunci Field :-
Software : MySQL
Tabel III.6.
Spesifikasi File Detail Ujian

1 Id Ujian id_ujian int 255 Foreign Key
2 Id Soal id_soal int 2 Foreign Key
3 Jawaban Dipilih jawab enum( ‘a’,
57
’b’ ’c’,
’d’)
4 Keterangan keterangan enum(
Benar/Salah ’b’, ’s’)
7. Spesifikasi File Admin
Nama File : Admin
Akronim : Administrator
Fungsi : Untuk menyimpan data admin
Akses File : Random
Media : Harddisk
Kunci Field : id_admin
Software : MySQL
Tabel III.7.
Spesifikasi File Admin

1 Id Admin id_admin int 5 Primary Key
2 E-mail Admin email_adm varchar 50
3 Nama Admin nama_adm varchar 30
4 Username Admin username_ad varchar 20
m
5 Password Admin pass_adm varchar 50
6 Level Admin level_adm Int 1
58
3.2.3. Rancangan Struktur Navigasi
1. Rancangan Struktur Navigasi Admin
Gambar III.35. Struktur Navigasi Admin
2. Rancangan Struktur Navigasi Pengunjung
Gambar III.36. Struktur Navigasi Pengunjung

59
3. Rancangan Struktur Navigasi Member
Gambar III.37. Struktur Navigasi Member
3.3. Implementasi dan Pengujian Unit
3.3.1. Implementasi
A. Implementasi Rancangan Antar Muka Admin
Berikut ini merupakan implementasi dari rancangan antar muka admin pada
website e-learning yang penulis buat.
1. Halaman Login Admin
Halaman ini merupakan halaman yang berfungsi sebagai validasi administrator
untuk dapat masuk kedalam menu utama admin. Admin diharuskan mengisi e-
mail dan password terlebih dahulu.

60
Gambar III.38. Implementasi Login Admin
2. Halaman Index Admin
Halaman ini berisi menu utama yang terdiri dari menu navigasi, header, dan
footer.
Gambar III.39. Implementasi Index Admin
3. Halaman Home Admin
Halaman ini berisi data statistik berupa tanggal saat halaman tersebut diakses,
jumlah ujian dan jumlah member.

61
Gambar III.40. Implementasi Home Admin
4. Halaman Add Lessons
Pada halaman ini administrator dapat menambah materi pelajaran. Terdapat list
box untuk memilih kategori dan tipe materi. Selanjutnya admin dapat
menambahkan judul materi, deskripsi materi, dan file materi.
Gambar III.41. Implementasi Add Lessons

62
5. Halaman Lessons List
Pada halaman ini berisi daftar materi yang telah ditambahkan ke dalam
database. Terdapat listbox untuk memilih kategori, tombol untuk tambah
materi, edit materi dan hapus materi.
Gambar III.42. Implementasi Lessons List
6. Halaman Edit Lessons
Pada halaman ini admin dapat mengubah data materi. Admin dapat mengganti
judul, deskripsi dan file materi yang telah dipilih sebelumnya.
Gambar III.43. Implementasi Edit Lessons

63
7. Halaman Add Questions
Pada halaman ini admin dapat menambah pertanyaan sesuai dengan kategori
yang dapat dipilih melalui listbox. Selanjutnya pertanyaan dapat diisi melalui
text area dan input file. Terdapat 4 kolom pilihan jawaban yang harus diisi dan
admin dapat memilih salah satu jawaban yang benar melalui listbox.
Gambar III.44. Implementasi Add Questions
8. Halaman Questions List
Pada halaman ini berisi daftar pertanyaan yang telah di-input kedalam database.
Terdapat listbox untuk memilih kategori, tombol untuk tambah pertanyaan, edit
pertanyaan dan hapus pertanyaan.

64
Gambar III.45. Implementasi Questions List
9. Halaman Edit Questions
Pada halaman ini admin dapat mengubah data soal ujian. Admin dapat
mengganti pertanyaan, file pertanyaan, pilihan jawaban, jawaban benar yang
telah dipilih sebelumnya.

65
Gambar III.46. Implementasi Edit Questions
10. Halaman View Children Questions
Pada halaman ini admin dapat melihat daftar pertanyaan dari induk pertanyaan.
Pertanyaan yang berupa induk yaitu soal listening part B, listening part C, dan
structure and written section.

66
Gambar III.47. Implementasi View Children Questions
11. Halaman Add Children Questions
Pada halaman ini admin dapat menambah pertanyaan sesuai dengan induk soal
yang dipilih. Kategori dan bagian soal akan mengikuti induk soal. Selanjutnya
pertanyaan dapat diisi melalui text area dan input file. Terdapat 4 kolom pilihan
jawaban yang harus diisi dan admin dapat memilih salah satu jawaban yang
benar melalui listbox.

67
Gambar III.48. Implementasi Add Children Questions
12. Halaman Edit Children Questions
Pada halaman ini admin dapat mengubah data soal ujian yang berupa anak soal.
Kategori dan bagian soal akan mengikuti parent dan tidak bisa diubah. Admin
dapat mengganti pertanyaan, file pertanyaan, pilihan jawaban, jawaban benar
yang telah dipilih sebelumnya.

68
Gambar III.49. Implementasi Edit Children Questions
13. Halaman Member List
Pada halaman ini admin dapat melihat daftar data pribadi beserta skor member.
Admin juga dapat menghapus member.
Gambar III.50. Implementasi Member List

69
14. Halaman Admin List
Pada halaman ini admin dapat melihat daftar akun admin. Admin yang memiliki
level akses sebagai programmer juga dapat menambah, mengubah dan
menghapus akun admin.
Gambar III.51. Implementasi Admin List
15. Halaman Add Admin
Pada halaman ini admin yang memiliki level akses sebagai programmer dapat
menambah akun admin baru.
Gambar III.52. Implementasi Add Admin

70
16. Halaman Edit Admin
Pada halaman ini admin yang memiliki level akses sebagai programmer dapat
mengubah data akun admin.
Gambar III.53. Implementasi Edit Admin
17. Halaman Change Password
Pada halaman ini admin dapat mengubah password.
Gambar III.54. Implementasi Change Password
B. Implementasi Rancangan Antar Muka Pengunjung
Berikut ini merupakan implementasi dari rancangan antar muka pengunjung
pada website e-learning yang penulis buat.

71
1. Halaman Index Pengunjung
Halaman ini berisi header yang didalamnya terdapat menu navigasi. Pada
bagian footer, terdapat informasi website.
Gambar III.55. Implementasi Index Pengunjung
2. Halaman Home Pengunjung
Pada halaman ini berisi informasi terkait website.
Gambar III.56. Implementasi Home Pengunjung

72
3. Halaman About Pengunjung
Pada halaman ini berisi informasi mengenai TOEFL.
Gambar III.57. Implementasi About Pengunjung

73
4. Halaman Login Pengunjung
Pada halaman ini pengunjung yang telah memiliki akun dapat masuk ke dalam
website untuk mengakses fitur-fitur yang telah disediakan untuk member.
Gambar III.58. Implementasi Login Pengunjung
5. Halaman Register Pengunjung
Pada halaman ini pengunjung yang belum memiliki akun dapat melakukan
registrasi melalui formulir sign up.
Gambar III.59. Implementasi Register Pengunjung

74
C. Implementasi Rancangan Antar Muka Member
1. Halaman Index Member
Halaman ini berisi header yang didalamnya terdapat menu navigasi. Pada
bagian footer, terdapat informasi website.
Gambar III.60. Implementasi Index Member
2. Halaman Home Member
Pada halaman ini berisi informasi terkait website.
Gambar III.61. Implementasi Home Member

75
3. Halaman About Member
Pada halaman ini berisi informasi mengenai TOEFL.
Gambar III.62. Implementasi About Member

76
4. Halaman Lessons Member
Pada halaman ini member dapat melihat daftar materi sesuai dengan kategori
yang ada. Terdapat pula link menuju ujian sesuai kategori yang dipilih.
Gambar III.63. Implementasi Lessons Member

77
5. Halaman Profile Member
Halaman ini berisi data pribadi member. Terdapat skor masing-masing kategori
ujian dan jumlah perhitungan dari ketiga jenis ujian tersebut. Member juga
dapat mengganti data pribadi melalui tombol update profile.
Gambar III.64. Implementasi Profile Member
6. Halaman Cetak Certificate
Pada halaman ini user dapat melihat sertifikat dan mencetaknya. Terdapat
nama, foto, dan skor akhir TOEFL.
Gambar III.65. Implementasi Cetak Certificate

78
7. Halaman Test Member
Halaman ini merupakan formulir ujian yang berisi soal beserta 4 pilihan
jawaban. Terdapat waktu yang akan berjalan mundur. Apabila waktu telah habis
atau member selesai mengerjakan soal ujian, maka akan masuk ke halaman
result.
Gambar III.66. Implementasi Test Member
8. Halaman Result Member
Halaman ini berisi skor dari ujian yang telah dilakukan sebelumnya. Terdapat
daftar pertanyaan yang telah dijawab beserta kunci jawaban.
Gambar III.67. Implementasi Result Member

79
9. Halaman Update Profile Member
Pada halaman ini member dapat mengganti data pribadi berupa nama,
mengganti password dan foto profile.
Gambar III.68. Implementasi Update Profile Member
D. Spesifikasi Sistem Komputer
Berikut ini merupakan spesifikasi minimum yang dibutuhkan untuk
menjalankan website e-learning yang penulis buat:
1. Spesifikasi Perangkat Keras
a. Server
1) CPU
2) Processor Intel® CoreTM i3
3) 2 GB DDR3 RAM
4) Intel® HD Graphics
5) Touchpad
6) Keyboard
7) Monitor dengan resolusi 1366x768px
8) Koneksi internet dengan kecepatan 41Mbps

80
b. Client
1) CPU
2) Processor Intel® Pentium® 4 atau setara
3) 512MB RAM
4) Hard Disk 40 GB
5) Mouse
6) Keyboard
7) Monitor dengan resolusi minimum 1024x768px
8) Koneksi internet dengan kecepatan 384kbps
2. Spesifikasi Perangkat Lunak
a. Server
1) Sistem operasi yang digunakan yaitu Microsoft Windows 7
2) Web server localhost yang digunakan yaitu XAMPP
3) Web Browser HTML5 yang digunakan yaitu Mozilla Firefox
b. Client
1) Sistem operasi yang dapat digunakan yaitu Microsoft Windows,
Linux, Mac Os, Android dan iOS.
2) Web Browser yang digunakan harus mendukung fitur HTML5
seperti Mozilla Firefox, Google Chrome, Safari.
3.3.2. Pengujian Unit
Pengujian web e-learning yang sudah diimplementasikan menggukan black box
testing yang digunakan untuk menguji proses masukan dan keluaran suatu program.
81
A. Pengujian Terhadap Form Login Admin
Tabel III.8.
Pengujian Black Box Form Login Admin
No Skenario Test Case Hasil yang Hasil Kesimpulan

Pengujian di harapkan Pengujian
1 Username Username: Sistem Sesuai Valid
dan (kosong) akan harapan
password Password: menolak
dikosongk (kosong) akses user
an dan akan
kemudian menampilk
klik an pesan
tombol “Username
login and
Password
Field
Cannot be
Empty!”
2 Mengisi Username: Sistem Sesuai Valid
Username administrator akan harapan
tapi Password: menolak
password (kosong) akses user
tidak diisi dan akan
kemudian menampilk
klik an pesan
tombol “Password
login. Field
Cannot be
Empty!”
3 Mengisi Username: Sistem Sesuai Valid
Password (kosong) akan harapan
tapi Password: admin menolak
Username akses user
tidak diisi dan akan
kemudian menampilk
klik an pesan
tombol “Username
login. Field
Cannot be
Empty!”
4 Memasuk Username : ad Sistem Sesuai Valid
kan salah (salah) akan harapan
82
satu Password : menolak

kondisi administrator akses user
salah pada (benar) dan akan
username menampilk
atau an pesan
password “Username
kemudian and
klik Password
tombol didnt
login match!”
5 Memasuk Username: Sistem Sesuai Valid
kan administrator menerima harapan
username (benar) akses login
dan Password : dan
password administrator menampilk
dengan (benar) an halaman
data yang home
valid admin
kemudian
klik
tombol
login
B. Pengujian Terhadap Form Add Lessons
Tabel III.9.
Pengujian Black Box Form Add Lessons

1 Tidak Category : Akan Sesuai Valid
memilih (kosong) menampilk harapan
Category Type : e-book an pesan
Title : Test validasi
Description : Test “Category
File : reading.pdf Cannot be
Empty!”
83
2 Mengoson Category : reading Akan Sesuai Valid

gkan field Type : e-book menampilk harapan
Title Title : (kosong) an pesan
Description : Test validasi
File : reading.pdf “Title Field
Cannot be
Empty!”
Descriptio Title : Tes an pesan
n Description : validasi
(kosong) “Descriptio
File : reading.pdf n Field
Cannot be
Empty!”
File Title : Tes an pesan
Description : Tes validasi
File : (kosong) “File
Cannot be
Empty!”
5 Mengisi Category : reading Sistem akan Sesuai Valid
semua Type : e-book menampilk harapan
field lalu Title : Tes an pesan
klik Description : Tes “Lesson
tombol File : reading.pdf Saved”
save
C. Pengujian Terhadap Form Edit Lessons
Tabel III.10.
Pengujian Black Box Form Edit Lessons

1 Mengoson Title : (kosong) Akan Sesuai Valid
gkan field Description : Test menampilk harapan
title Edit an pesan
File : reading.pdf validasi
“Title Field
Cannot be
84
Empty!”
2 Mengoson Title : Test Edit Akan Sesuai Valid
gkan field Description : menampilk harapan
Descriptio (kosong) an pesan
n File : reading.pdf validasi
“Descriptio
n Field
Cannot be
Empty!”
3 Mengoson Title : Tes Edit Akan Sesuai Valid
gkan field Description : Test menampilk harapan
File Edit an pesan
File : (kosong) validasi
“File
Cannot be
Empty!”
4 Mengisi Title : Tes Edit Akan Sesuai Valid
semua Description : Test menampilk harapan
field lalu Edit an pesan
klik File : reading.pdf validasi
tombol “Lessons
save Updated!”
D. Pengujian Terhadap Form Add Questions
Tabel III.11.
Pengujian Black Box Form Add Questions

gkan field Part : A menampilk harapan
Question Question : an pesan
atau File (kosong) validasi
File : (kosong) “Question
Choice A : test or File
Choice B : test Field
Choice C: test Cannot be
Choice D : test Empty!”
Right Answer : A
85
Choice A Question : Test an pesan

Choice A : “Choice A
(kosong) Field
Choice B : test Cannot be
Choice C: test Empty!”
Choice D : test
Right Answer : A
Choice B Question : Test an pesan
Choice A : test “Choice B
Choice B : Field
(kosong) Cannot be
Choice C: test Empty!”
Choice D : test
Right Answer : A
Choice C Question : Test an pesan
Choice A : test “Choice C
Choice C: Cannot be
(kosong) Empty!”
Choice D : test
Right Answer : A
Choice D Question : Test an pesan
Choice A : test “Choice D
Choice D : Empty!”
(kosong)
Right Answer : A
6 Mengisi Category : reading Sistem Sesuai Valid
semua Part : A akan harapan
field Question : Test menyimpa
kemudian File : question.jpg n soal dan
klik save Choice A : test menampilk
Choice B : test an pesan
86
Choice C: test “Question

Choice D : test Saved!”
Right Answer : A
E. Pengujian Terhadap Form Edit Questions
Tabel III.12.
Pengujian Black Box Form Edit Questions

1 Mengoson Question : Akan Sesuai Valid
gkan field (kosong) menampilk harapan
Question Part : A an pesan
atau File File : (kosong) validasi
Choice A : test “Question
Choice B : test or File
Choice C: test Field
Choice D : test Cannot be
Right Answer : A Empty!”
2 Mengoson Question : Test Akan Sesuai Valid

Choice A File : (kosong) an pesan
Choice A : validasi
(kosong) “Choice A
Right Answer : A

Choice B File : (kosong) an pesan
Choice A : test validasi
Choice B : “Choice B
(kosong) Field
87
Right Answer : A
Choice C File : (kosong) an pesan
Choice B : test “Choice C
Choice C: Field
(kosong) Cannot be
Right Answer : A
Choice D File : (kosong) an pesan
Choice B : test “Choice D
Choice D : Cannot be
(kosong) Empty!”
Right Answer : A
semua Part : A akan harapan
field Question : Test menyimpa
kemudian File : question.jpg n soal dan
klik save Choice A : test menampilk
Choice B : test an pesan
Choice C: test “Question
Choice D : test Updated!”
Right Answer : A
F. Pengujian Terhadap Form Add Children Questions
Tabel III.13.
Pengujian Black Box Form Add Children Questions

Question File : (kosong) an pesan
atau File Choice A : test validasi
Choice B : test “Question
Choice C: test or File
88
Choice D : test Field

Right Answer : A Cannot be
Empty!”
gkan field File : (kosong) menampilk harapan
Choice A Choice A : an pesan
(kosong) validasi
Choice B : test “Choice A

Choice B Choice A : test an pesan
Choice B : validasi
(kosong) “Choice B
Choice C Choice A : test an pesan
Choice B : test validasi
Choice C: “Choice C
(kosong) Field
Choice D Choice A : test an pesan
Choice C: test “Choice D
Choice D : Field
(kosong) Cannot be
6 Mengisi Question : Test Sistem Sesuai Valid
semua File : question.jpg akan harapan
field Choice A : test menyimpa
kemudian Choice B : test n soal dan
klik save Choice C: test menampilk
Choice D : test an pesan
Right Answer : A “Question
Saved!”
89
G. Pengujian Terhadap Form Edit Children Questions
Tabel III.14.
Pengujian Black Box Form Edit Children Questions

Question File : (kosong) an pesan
atau File Choice A : test validasi
Choice B : test “Question
Choice C: test or File
Choice D : test Field
Right Answer : A Cannot be
Empty!”
Choice A Choice A : an pesan
(kosong) validasi
Choice B : tes “Choice A
Choice C: tes Field
Choice D : tes Cannot be

Choice B Choice A : test an pesan
Choice B : validasi
(kosong) “Choice B
Choice C Choice A : test an pesan
Choice C: “Choice C
(kosong) Field
Choice D : tes Cannot be
90
Choice D Choice A : test an pesan

Choice C: test “Choice D
Choice D : Field
(kosong) Cannot be
semua Question : Test akan harapan
field File : question.jpg menyimpa
kemudian Choice A : test n soal dan
klik save Choice B : test menampilk
Choice C: test an pesan
Choice D : test “Question
Right Answer : A Updated!”
H. Pengujian Terhadap Form Add Admin
Tabel III.15.
Pengujian Black Box Form Add Admin

1 Mengoson E-mail : (kosong) Akan Sesuai Valid
gkan field Username : menampilk harapan
E-mail hadiagus an pesan
Name : Hadi validasi
Password : Test “E-mail
Level : Field
Administrator Cannot be
Empty!”
2 Mengoson E-mail : Akan Sesuai Valid
gkan field hadiagus@gmail.c menampilk harapan
Username om an pesan
Username : validasi
hadiagus “Username
Name : Hadi Field
Password : Test Cannot be
Level : Empty!”
Administrator
Name om an pesan
91
Username : validasi
hadiagus “Name
Fullname : Field
(kosong) Cannot be
Password : Test Empty!”
Level :
Administrator
Password om an pesan
Username : validasi
hadiagus “Password
Name : Hadi Field
Password : Cannot be
(kosong) Empty!”
Level :
Administrator
5 Memasuk E-mail : Akan Sesuai Valid
kan semua hadiagus@gmail.c menampilk harapan
data om an pesan
Username : “Admin
hadiagus Saved!”
Name : Hadi
Password : Test
Level :
Administrator
I. Pengujian Terhadap Form Edit Admin
Tabel III.16.
Pengujian Black Box Form Edit Admin

Name : Hadi validasi
Level : Field
Administrator Cannot be
Empty!”
92

Username : validasi
Name : Hadi Field
Level : Empty!”
Administrator
Name om an pesan
Username : validasi
hadiagus “Name
Fullname : Field
(kosong) Cannot be
Level :
Administrator
Username : validasi
Name : Hadi Field
(kosong) Empty!”
Level :
Administrator
data om an pesan
Username : “Admin
hadiagus Updated!”
Name : Hadi
Password : Test
Level :
Administrator
93
J. Pengujian Terhadap Form Change Password
Tabel III.17.
Pengujian Black Box Form Change Password

1 Mengoson Old Password : Akan Sesuai Valid
gkan Old (kosong) menampilk harapan
Password New Password : an pesan
admin validasi
“Old
Password
Field
Cannot be
Empty!”
2 Mengoson Old Password : Akan Sesuai Valid
gkan field administrator menampilk harapan
New New Password : an pesan
Password (kosong) validasi
“New
Password
Field
Cannot be
Empty!”
3 Mengisi Old Password : Akan Sesuai Valid
semua administrator menampilk harapan
field New Password : an pesan
dengan admin validasi
benar “Password
Updated!”
K. Pengujian Terhadap Form Login Pengunjung
Tabel III.18.
Pengujian Black Box Form Form Login Pengunjung

1 Mengoson Username : Akan Sesuai Valid
94
Username Password : an pesan

dan (kosong) validasi
Password “Username
and
Password
Field
Cannot be
Empty!”
2 Mengisi Username : Akan Sesuai Valid
field hadi270 menampilk harapan
Username Password : an pesan
dan (kosong) validasi
Mengoson “Password
gkan field Field
Password Cannot be
Empty!”
field (kosong) menampilk harapan
Password Password : test an pesan
dan validasi
Mengoson “Username
gkan field Field
Username Cannot be
Empty!”
4 Memasuk Username : Akan Sesuai Valid
kan field hadi270 menampilk harapan
username Password : admin an pesan
dan validasi
password “Username
salah and
Password
didnt
match!”
field hadi270 menampilk harapan
username Password : online an pesan
dan “Welcome,
password username
dengan !” dan
data valid masuk ke
halaman
home
member
95
L. Pengujian Terhadap Form Register Pengunjung
Tabel III.19.
Pengujian Black Box Form Register Pengunjung

Fullname : Hadi validasi
Field
Cannot be
Empty!”
Username : validasi
Fullname : Hadi Field
Empty!”
Fullname om an pesan
Username : validasi
hadiagus “Fullname
Fullname : Field
(kosong) Cannot be

Username : validasi
Fullname : Hadi Field
(kosong) Empty!”
96

data om an pesan
Username : “Registrati
hadiagus on Success,
Fullname : Hadi Please
Password : Test login
username”
M. Pengujian Terhadap Form Update Profile Member
Tabel III.20.
Pengujian Black Box Form Update Profile Member

Username Fullname : Hadi an pesan
Old Password : validasi
Online “Username
New Password : Field
Test Cannot be
Upload Profile Empty!”
Photo : file.jpg
gkan field hadiagus menampilk harapan
Full Name Fullname : an pesan
(kosong) validasi
Old Password : “Fullname
Online Field
New Password : Cannot be
Tes Empty!”
Upload Profile
Photo : file.jpg
97

Old Fullname : Hadi an pesan
Password Old Password : validasi
(kosong) “Old
New Password : Password
(tes) Field
Upload Profile Cannot be
Photo : file.jpg Empty!”
New Fullname : Hadi an pesan
Password Old Password : validasi
Online “New
New Password : Password
(kosong) Field
Upload Profile Cannot be
Photo : file.jpg Empty!”
5 Memasuk Username : Akan Sesuai Valid
kan semua hadiagus menampilk harapan
data Fullname : Hadi an pesan
Old Password : “Profile
Online Updated!”
New Password :
test
Upload Profile
Photo : file.jpg

File 11 Bab III Pembahasan 2

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

File 11 Bab III Pembahasan 2

Diunggah oleh

Hak Cipta:

Format Tersedia

BAB III

3.1. Analisis Kebutuhan

Analisis kebutuhan perlu dilakukan dalam perancangan sistem perangkat lunak.

dirancang sesuai dengan kebutuhan pemakai. Analisis kebutuhan yang dilakukan

A. Analisis Kebutuhan Pengguna

a. Admin dapat login ke dalam menu admin.

b. Admin dapat menambah, melihat, mengubah, menghapus materi

c. Admin dapat menambah, melihat, mengubah, menghapus daftar

d. Admin dapat melihat dan menghapus daftar anggota.

e. Admin dapat melihat daftar akun admin.

f. Admin yang memiliki level sebagai programmer dapat menambah,

mengubah dan menghapus akun admin.

g. Admin dapat logout dari menu admin.

a. Pengunjung dapat melakukan pendaftaran melalui formulir register.

b. Pengunjung dapat membaca daftar fitur-fitur yang ada.

c. Pengunjung dapat membaca informasi mengenai tes TOEFL.

a. Member dapat login ke dalam sistem.

b. Member dapat mengakses materi pembelajaran.

c. Member dapat mengerjakan soal ujian.

d. Member dapat melihat hasil nilai.

e. Member dapat mengubah profil.

f. Member dapat melihat dan mencetak sertifikat hasil skor.

g. Member dapat logout dari sistem.

B. Analisis Kebutuhan Sistem

1. Perangkat Keras (hardware)

Untuk merancang dan membangun website e-learning dibutuhkan perangkat

keras yang mumpuni supaya proses pembuatan maupun pengujian dapat

berjalan dengan baik. Spesifikasi yang digunakan adalah sebagai berikut:

Processor : Intel CoreTM i3

Memory : 2GB DDR3 Memory

Harddisk : 320 GB HDD

VGA : Intel® HD Graphics

Monitor : 14” HD LED LCD

2. Perangkat Lunak (Software)

Software atau perangkat lunak yang digunakan untuk mendukung perancangan

dan pembuatan website e-learning ini sebagai berikut:

1) Notepad++, digunakan untuk pembuatan skrip program.

2) XAMPP, digunakan untuk server localhost.

c. Software untuk web browser

Web browser yang digunakan dalam perancangan yaitu Mozilla Firefox.

informasi kepada pemakai. Informasi yang ditampilkan yaitu :

a. Pesan error ditampilkan oleh sistem apabila user salah memasukkan

username ataupun password.

b. Pesan error ditampilkan oleh sistem apabila admin salah memasukkan

username ataupun password.

dibuat pada proses pendaftaran sudah pernah didaftarkan sebelumnya.

d. Pesan informasi berupa pop-up ditampilkan oleh sistem apabila user

berhasil melakukan pendaftaran.

e. Pesan informasi berupa pop-up ditampilkan oleh sistem apabila admin

berhasil menambah materi.

f. Pesan informasi berupa pop-up ditampilkan oleh sistem apabila admin

berhasil menambah soal.

Sistem yang dibuat dilengkapi dengan sistem pengamanan yang mengharuskan

pengguna maupun admin melakukan login terlebih dahulu dengan memasukkan

username dan password untuk dapat masuk kedalam sistem.

3.2. Perancangan Perangkat Lunak

3.2.1. Rancangan Antar Muka

Perancangan antar muka perlu dilakukan untuk membuat tampilan website

yang baik akan mempermudah tahapan implementasi dalam mendesain website.

1. Rancangan Antar Muka Admin

Gambar III.1. Rancangan Antar Muka Login Admin

Gambar III.2. Rancangan Antar Muka Index Admin

Gambar III.3. Rancangan Antar Muka Home Admin

Gambar III.4. Rancangan Antar Muka Add Lessons