BAB 4
IMPLEMENTASI
4.1 Implementasi
Perancangan aplikasi yang telah dibuat diimplementasikan dengan menggunakan menggunakan bahasa pemrograman PHP dan MySQL melalui web editor
Macromedia Dreamweaver 8.
Spesifikasi hardware dan software yang direkomendasikan:
a. Prosessor Intel Pentium IV – 2.4 GHz
b. Sistem Operasi Windows 98 atau lebih tinggi
c. Resolusi monitor 1024 x 768 pixel dengan kedalaman warna 16 bit
d. Ram 128 MB atau lebih tinggi
e. Ruang Kosong Harddisk 5 GB atau lebih tinggi
f. Macromedia Dreamweaver 8
g. Adobe Photoshop CS2.
4.2 Tampilan Antarmuka Interface Aplikasi
Interface dari aplikasi ini tidak mengutamakan animasi gerak ataupun suara, melainkan berupa teks. Jadi, penyampaian materi serta instruksi pemakaian aplikasi
disampaikan dalam bentuk teks, seperti perintah untuk login, daftar dan pengerjaan soal. Hal ini dapat dilihat pada halaman pembuka, yaitu halaman untuk melakukan
proses login dengan menggunakan kalimat “Silahkan Login” sebagai instruksi untuk mengisi data user dan menekan tombol “Login” untuk masuk ke halaman utama.
Universitas Sumatera Utara
Selain tombol “Login”, ada terdapat banyak tombol lainnya yang dirancang khusus seperti tombol untuk daftar, menu, sub menu, nilai, lihat nilai dan cek jawaban.
4.2.1 Tampilan Halaman Pembuka
Tampilan awal dari website adalah halaman Login dan Daftar yang ditampilkan dalam satu halaman. Sebelum melakukan login, user terlebih dahulu melakukan proses daftar
dengan memasukkan data berupa nama, password dan pilihan status pelajar SMP, Pelajar SMA, mahasiswa atau Karyawan, lalu menekan tombol ”Daftar”. Setelah itu,
user dapat melakukan proses login untuk masuk ke halaman utama, yaitu menu Beranda. Proses login dilakukan dengan hanya memasukkan nama dan password saja,
kemudian menekan tombol ”Login”.
Adapun desain interface dari halaman pembuka website ini dapat dilihat pada tampilan gambar 4.1 dan gambar 4.2.
Gambar 4.1 Tampilan Halaman Pembuka Website a
Universitas Sumatera Utara
Gambar 4.2 Halaman Pembuka Website b
4.2.2 Tampilan Halaman Menu Utama Menu Beranda
Setelah user berhasil melakukan proses Login, maka akan tampil halaman utama, yaitu halaman Beranda seperti terlihat pada gambar 4.3.
Gambar 4.3 Tampilan Halaman Menu Utama Menu Beranda
Universitas Sumatera Utara
Halaman utama menampilkan menu utama yang ditampilkan dalam bentuk tombol, yaitu menu “Beranda” dan empat menu lainnya, yaitu “Materi”, “Kesalahan-
Kesalahan Umum”, “Latihan” dan “Profil”. Selain itu, terdapat juga kotak pencarian dan kotak “Cari”, link “Logout”. Ketika halaman menu Beranda tampil, tombol
Beranda tidak aktif atau tidak dapat pilih. Untuk menandakan bahwa halaman berasal dari tombol-tombol menu yang dipilih, maka ditulis kembali nama menu yang dipilih
di paling atas halaman penyajian. Ini berlaku untuk menu-menu yang lain. Menu Beranda ini menampilkan sekilas sejarah dan definisi dari grammar dan menjelaskan
materi-materi apa saja yang disajikan pada website ini. Setelah halaman ini tampil, user dapat melakukan proses atau pemilihan menu yang lain.
4.2.3 Tampilan Menu Materi
Tampilan di setiap menu hampir sama. Menu Materi ini akan menampilkan empat tombol sub materi, yaitu ”Participle and Gerund”, ”Causative”, ”Question Tag” dan
”Tenses”. Ketika menu Materi dipilih, maka akan menampilkan form kosong di bagian tengah halaman. Tampilan ini dapat dilihat pada gambar 4.4.
Gambar 4.4 Tampilan Menu Sebelum Memilih Sub Materi
Universitas Sumatera Utara
Form tersebut akan menampilkan isi dari materi jika kita memilih salah satu tombol sub materi. Jika telah dipilih maka tombol menu, Materi dan sub materi tidak
aktif untuk menandakan tombol itulah yang dipilih. Sebagai contoh dapat dilihat pada gambar 4.5.
Gambar 4.5 Tampilan Salah Satu Sub Menu Materi
Di dalam setiap sub materi terdapat beberapa halaman yang ditandai dengan link ”Selanjutnya” atau ”Kembali”. Pada halaman terakhir sub materi terdapat soal-soal
yang sesuai dengan materi yang dipilih user. Untuk melihat nilai yang diperoleh user, yang dilakukan adalah mengklik tombol done, maka akan tampil nilai. Tampilannya
dapat dilihat pada gambar 4.6 dan gambar 4.7.
Universitas Sumatera Utara
Gambar 4.6 Tampilan Menu Materi di Halaman Terakhir pada Setiap Sub Menu Materi
Gambar 4.7 Tampilan Menu Materi Setelah Menjawab Soal
Universitas Sumatera Utara
4.2.4 Tampilan Menu Kesalahan-Kesalahan Umum
Menu Kesalahan-Kesalahan Umum ini akan menampilkan tujuh sub kesalahan- kesalahan yang sering terjadi dalam pengucapan maupun penulisan dalam bahasa
Inggris. Kesalahan-kesalahan tersebut disajikan dalam bentuk link yaitu ”Kesalahan- Kesalahan Umum dalam Penggunaan Kata Kerja”, ”Kesalahan-Kesalahan Umum
dalam Penggunaan Infinitive”, ”Kesalahan-Kesalahan Umum dalam Penggunaan Kata Benda”, ”Kesalahan-Kesalahan Umum dalam Penggunaan Kata Keterangan”,
Kesalahan-Kesalahan Umum dalam Penggunaan Kata Sifat”, Kesalahan-Kesalahan Umum dalam Penggunaan Kata Sandang”, ”Lain-Lain”. Ketika menu ini dipilih, maka
akan tampil sub menu yang telah disebutkan tersebut di sebelah kiri. Tampilan ini dapat dilihat pada gambar 4.8.
Gambar 4.8 Tampilan Menu Kesalahan-Kesalahan Umum
4.2.5 Tampilan Menu Latihan
Menu Latihan ini akan menampilkan lima puluh soal untuk seluruh isi materi, baik materi dari menu Materi maupun menu Kesalahan-Kesalahan Umum. Menu Latihan
Universitas Sumatera Utara
ini terbagi menjadi dua halaman. Halaman yang pertama terdapat link ”Lanjut” untuk menampilkan halaman kedua atau terakhir. Tampilan ini dapat dilihat pada
gambar 4.9.
Gambar 4.9 Tampilan Menu Latihan Halaman Pertama
Pada halaman kedua atau terakhir akan terdapat tombol ”Lihat Nilai” dan ”Cek Jawaban” dimana masing-masing bertujuan untuk melihat berapa nilai yang diperoleh
user dan melihat jawaban yang sebenarnya. Tampilan ini dapat dilihat pada gambar 4.10.
Universitas Sumatera Utara
Gambar 4.10 Tampilan Menu Latihan Halaman Terakhir untuk Menampilkan Nilai dan Jawaban
4.2.6 Tampilan Menu Profil
Kategori