Perancangan Simulasi TOEFL (Test Of English As A Foreign Language) Berbasis Web Chapter III V

BAB 3

PERANCANGAN SISTEM

Perancangan sistem merupakan hal yang sangat penting dalam pembuatan website.
Masih banyak sistem pada saat ini yang masih menggunakan sistem manual dan harus
diperbaharui dengan baik lagi. Perancangan sistem yang matang akan menghasilkan
suatu sistem yang baik dan bagus. Oleh sebab itu dalam membangun suatu website, ada
baiknya terlebih dahulu menetapkan tujuan sistem tersebut. Karena desain, isi dan
bentuk sistem sangat bergantung pada tujuan sistem tersebut.

Perancangan sistem simulasi TOEFL berbasis web yang akan dibuat bertujuan
untuk memberikan simulasi TOEFL yang sama seperti tes TOEFL yang sesungguhnya
dengan pemberian skor/nilai serta menyediakan fasilitas e-learning bagi pengguna
dengan fleksibel, efisien dan elegan.

Universitas Sumatera Utara

31

3.1

Pembuatan Sitemap

Sitemap adalah susunan menu dari suatu situs yang menggambarkan isi dari
setiap halaman dan link tiap halaman dari situs web. Susunan sitemap sangat
dipengaruhi oleh tujuan pembuatan situs web. Sitemap dapat dibuat dalam bentuk
flowchart. Dari situ akan terlihat struktur, dan isi halaman per halaman. Secara
sederhana Flowchart situs ini dapat dilihat pada gambar 3.1 berikut:

Index

Home

About

Services

Contact

Login

Gambar 3.1 Sitemap Situs

Pada gambar 3.1 diatas, terlihat bahwa situs yang akan dibuat memiliki lima link
atau navigasi yang memiliki fungsi dan tujuan masing-masing yang dapat melakukan
penjelajahan ke seluruh halaman web. Berbeda dengan rancangan sitemap halaman
admin yaitu pada gambar 3.2 yang nantinya akan memiliki enam link atau navigasi yang
masing – masing bertujuan untuk memudahkan admin dalam mengelolah sistem
simulasi TOEFL.

Universitas Sumatera Utara

32

Index

Listening

Reading

Structure

Data User

Profile

Logout

Gambar 3.2 Sitemap Situs Administrator

3.2

Data Flow Diagram (DFD)

Data Flow Diagram (DFD) merupakan suatu cara atau metode untuk membuat
rancangan sebuah sistem yang mana berorientasi pada alur data yang bergerak pada
sebuah sistem nantinya. DFD ini adalah salah satu alat pembuatan model yang sering
digunakan, khususnya bila fungsi-fungsi sistem merupakan bagian yang lebih penting
dan kompleks dari pada data yang dimanipulasi oleh sistem. Dengan kata lain, DFD
adalah alat pembuatan model yang memberikan penekanan hanya pada fungsi sistem.

Data Flow Diagram berfungsi untuk menggambarkan aliran data informasi dan
transformasi (proses) dari data dimulai dari pemasukan data sampai

menghasilkan

keluaran (output) data. Berikut ini merupakan Data Diagram Flow daripada rancangan
Sistem Informasi Simulasi TOEFL:

Universitas Sumatera Utara

33

Laporan Data User
Laporan Komentar

Data Jawaban
Data Komentar
Data User

SISTEM

Administrator

SIMULASI
TOEFL

Data Soal TOEFL
Data User

Pengguna
Data Soal TOEFL
Data Skor/Nilai
Data Modul/Materi

Gambar 3.3 DFD Level Konteks Simulasi TOEFL

Pada gambar 3.3 dijelaskan bahwa terdapat 2 (dua) entitas yang menunjang
sistem simulasi TOEFL, yaitu admin dan user. Admin memiliki hak akses tertinggi di
mana admin dapat melihat data pada aplikasi, memanipulasi data dan dapat menghapus

data. User memiliki hak akses untuk melihat materi melakukan simulasi, dan
melakukan latihan soal.

Sistem yang dibuat berfungsi sebagai tempat user dan admin berkomunikasi,
admin bertugas mengelolah data TOEFL dan menjaga fungsi sistem. Sementara sistem
menyediakan simulasi tes TOEFL, data skor/nilai TOEFL, dan modul serta materi
terkait TOEFL kepada user.

Universitas Sumatera Utara

34

3.3

Flowchart

Flowchart atau dalam bahasa Indonesia sering disebut dengan Diagram Alir ini
dipergunakan dalam industri manufakturing untuk menggambarkan proses-proses
operasionalnya sehingga mudah dipahami dan mudah dilihat berdasarkan urutan
langkah dari suatu proses ke proses lainnya.

Secara umum, flowchart digambarkan dengan simbol-simbol grafis yang
menjadi tanda atas aliran algoritma. Simbol-simbol tersebut menjadi bagian dalam cara
membuat flowchart yang sederhana, sedangkan algoritma di sini adalah suatu prosedur
sistematis untuk memecahkan masalah matematis dengan langkah-langkah tertentu.

3.3.1 Flowchart Halaman Utama

Saat membuka halaman utama dari website sistem simulasi TOEFL, maka pengguna
dapat menjelajahi web dengan menggunakan link yang telah disediakan dan memiliki
tujuan dan fungsi masing-masing. Untuk lebih jelas dapat dilihat pada gambar 3.4.

Universitas Sumatera Utara

35

Mulai

Menampilkan
Dafar Menu

B
Home

Tampilkan Halaman
Menu Utama

S
About

B

Tampilkan
Informasi dan elearning Panel

A

Tampilkan Model
Tes TOEFL

B

S
Services

B

S
Contact

B

Tampilkan Contact
Adminitrator

B

Tampilkan Form
Login dan Registrasi

S
Login

C

S
Keluar

Gambar 3.4 Flowchart Halaman Utama

Universitas Sumatera Utara

36

3.3.2 Halaman Login Admin

Untuk dapat mengelolah website simulasi TOEFL, maka seorang admin harus
melakukan login terlebih dahulu untuk mencegah adanya pihak ketiga yang dapat
merugikan sistem. Pertama sekali admin harus memasukkan user ID dan password,
kemudian sistem akan mengecek apakah user ID dan password yang dimasukkan valid

atau tidak. Jika berhasil maka admin akan diarahkan langsung ke halaman admin.
Seperti yang pada gambar 3.5.

Mulai

Tampil Login
Admin

Masukkan User ID
dan Password

User ID dan
Password

S

B
Halaman Admin

A

Gambar 3.5 Flowchart Login Admin

Universitas Sumatera Utara

37

3.3.3 Flowchart Halaman Admin

S

A

Index

Login

B
Tampil
Halaman Admin

S

B
Tampil
Soal

Listening

Ubah/Hapus/

B

S
S

B
Tampil
Soal

Reading

Ubah/Hapus/

B

S
S

B
Tampil
Soal

Structure

Ubah/Hapus/

B

S
S

B
Tampil
Data

Data User

B

Hapus

S
S

B
Profile

Tampil
Profil

Edit/Tambah
Admin

B

Proses Ubah,
Hapus dan
Tambah

S
Logout

B
Proses Logout

Database
Keluar

Gambar 3.6 Flowchart Halaman Admin

Universitas Sumatera Utara

38

Admin merupakan salah satu entitas yang sangat penting didalam sistem
Simulasi TOEFL. Pada gambar 3.6 dijelaskan mengenai halaman admin setelah
melakukan login. Terdapat enam link atau navigasi yang dapat digunakan dalam
mengelolah sistem Simulasi TOEFL. Admin dapat menambah, mengubah dan
menghapus soal listening, reading dan structure. Admin juga dapat menghapus data
user, mengubah data pribadi admin termasuk password dan menambahkan admin baru
ke dalam sistem.

3.3.4 Flowchart About

Halaman about berisikan informasi dan materi terkait TOEFL. Seperti sejarah dan
pengertian TOEFL, cara menghitung skor TOEFL, tips dan trick dalam menghadapi tes
TOEFL, cara cepat belajar bahasa inggris, kumpulan grammar / struktur kata bahasa
inggris, dan vocabulary bahasa inggris. Pengguna dapat lebih mengenal TOEFL dan
juga belajar persiapan sebelum tes TOEFL.

Untuk mengakses halaman ini, pengguna tidak diharuskan login. Pengguna
bebas mengakses halaman about. Untuk lebih jelas dapat dilihat pada flowchart halaman
about pada gambar 3.7.

Universitas Sumatera Utara

39

A
Tampil Daftar
Menu

About
TOEFL

B

About
TOEFL

Keluar

Tips and
Trick

Keluar

Scoring

Keluar

English Tips

Keluar

Grammar

Keluar

Vocabulary

Keluar

Level Test

Keluar

CEF

Keluar

S
Tips and
Trick

B

S
Scoring

B

S
English
Tips

B

S
Grammar

B

S
B
Vocabulary

S
B
Level Test

S
B
CEF

S
Keluar?

B
Keluar

S
Gambar 3.7 Flowchart Halaman About

Universitas Sumatera Utara

40

3.3.5 Flowchart Services

B
Tampil Daftar Menu

Listening

B

Tampil
Daftar
Menu

Model
Test
1/2/3/4/5

B

Model
Test
1/2/3/4/5

B

Model
Test
1/2/3/4/5

B

Tampil Model
Test 1/2/3/4/5

S

S

Reading

B

Tampil
Daftar
Menu

S

Tampil Model
Test 1/2/3/4/5

S

Structure

B

Tampil
Daftar
Menu

S

S

Tampil Model
Test 1/2/3/4/5

S
B

Keluar?

Keluar

S

Gambar 3.8 Flowchart Halaman Services

Halaman Services menyediakan fasilitas berupa model tes TOEFL sebanyak
lima model tes. Model tes ini juga disusun berdasarkan section TOEFL yaitu reading,
listening dan structure. Pengguna dapat mengakses halaman ini tanpa harus login
sehingga pengguna dapat dengan leluasa melakukan tes TOEFL berdasarkan section
yang telah disediakan seperti pada gambar 3.8.

Universitas Sumatera Utara

41

3.3.6 Flowchart Login

C

Tampil Daftar Menu

B

Masukkan
Email dan
Password

Login

S

Email
dan
Password

B

Tes
TOEFL

S
B

B
Masukkan
Biodata
Lengkap

Mendaftar

S

Biodata

B

Proses
Registrasi

S
B

Keluar?

Database
Keluar

S

Gambar 3.9 Flowchart Halaman Login

Pada gambar 3.9 dijelaskan bagaimana cara kerja sistem halaman login. Pertama
sekali pengguna diarahkan pada menu login dan registrasi. Apabila sudah melakukan
registrasi maka pengguna dapat langsung login. Untuk melakukan tes TOEFL, maka
pengguna harus login terlebih dahulu dengan memasukkan email dan password yang
benar.

Universitas Sumatera Utara

42

3.3.7 Flowchart Tes TOEFL

B

Input Email

B

Tes

Soal Simulasi
TOEFL

Input B
Jawaban

S
Database
Proses
Menampilkan
Hasil

Profil

B
Logout

Prosedur
Keluar

Keluar

S

Gambar 3.10 Flowchart Tes TOEFL

Pada gambar 3.10 dijelaskan bagaimana cara kerja sistem saat pengguna
melakukan tes simulasi TOEFL. Jika pengguna melakukan tes, maka daftar soal yang
telah dimasukkan admin ke dalam database melalui sistem akan ditampilkan. Kemudian
jawaban pengguna akan dikirim ke database dan sistem akan melakukan penilaian.
Setelah selesai maka sistem akan menyimpan hasil/skor tersebut ke dalam database dan
menampilkannya ke dalam profil pengguna.

Universitas Sumatera Utara

43

3.4

Perancangan Entity Relationship Diagram (ERD)

Entity Relationship Diagram (ERD) merupakan diagram yang digunakan untuk
merancang suatu basis data, untuk memperlihatkan hubungan atau relasi antar entitas
atau objek yang terlihat beserta atributnya. Berikut adalah langkah-langkah dalam
perancangan ERD sistem simulasi TOEFL.
a.

Mengidentifikasikan dan menetapkan seluruh himpunan entity yang terlibat.

user

TOEFL

admin

Gambar 3.11 ERD Tahap Pertama

b.

Menentukan atribut key masing-masing himpunan entity.
user

TOEFL

admin

email

id soal

id

Gambar 3.12 ERD Tahap Kedua

c.

Mengidentifikasikan dan menetapkan seluruh himpunan relasi diantara himpunan
entity-entity yang ada.

user
email

Mengerjakan

TOEFL

Mengelola

id soal

admin

id

Gambar 3.13 ERD Tahap Ketiga

Universitas Sumatera Utara

44

Memasukkan derajat / cardinalitas untuk setiap himpunan.

d.

N

Mengerjakan

user

N

N
TOEFL

email

N

Mengelola

admin

id soal

id

Gambar 3.14 ERD Tahap Keempat

Melengkapi himpunan relasi atribut deskriptif (non key / bukan kunci)

e.

bln
nama
nname

gender
password

password

nama

user

email

N

Mengerjakan

N

TOEFL

N

Mengelola

id soal

N

email

admin

id

Gambar 3.15 ERD Tahap Kelima

Universitas Sumatera Utara

45

3.5

Perancangan Database

Perancangan database merupakan tahap yang

paling penting dalam perancangan

sistem. Perancangan database adalah salah satu langkah untuk menentukan file
database, tabel, tipe data dan ukuran dari data yang digunakan.

3.5.1 Tabel Administrator

Tabel admin (administrator) digunakan untuk menampung data-data admin seperti ID
admin, password, nama dan email. Pada tabel 3.1 dijelaskan field-field yang dibuat
dalam tabel admin.

Field

Type

Index

Keterangan

user

Varchar(10)

Primary Key

User ID

password

Varchar(15)

-

Password

nama

Varchar(30)

-

Nama lengkap

email

Varchar(30)

-

Email

Tabel 3.1 Tabel Admin

3.5.2 Tabel Pengguna (User)

Tabel pengguna (user) digunakan untuk menampung data pengguna (user) seperti
nama, jenis kelamin, email dan password. Pada tabel 3.2 dijelaskan field-field yang
dibuat dalam tabel user.

Universitas Sumatera Utara

46

Field

Type

Index

Keterangan

nama

Varchar(30)

-

Nama Lengkap

nname

Varchar(15)

-

Nama Panggilan

bln

Varchar(20)

-

Tanggal Lahir

gender

Varchar(10)

-

Jenis Kelamin

email

Varchar(30)

Primary Key

Email

password

Varchar(30)

-

Password

Tabel 3.2 Tabel User

3.5.3 Tabel Komentar (Comment)

Tabel komentar (comment) digunakan untuk menampung data testimoni / komentar
yang dikirim oleh pengguna (user). Pada tabel 3.3 dijelaskan field-field yang dibuat
dalam tabel comment.

Field

Type

Index

Keterangan

nama

Text

-

Nama Lengkap

email

Text

-

Email

pesan

Text

-

Pesan/Comment

Tabel 3.3 Tabel Comment

3.5.4 Tabel Soal Structure

Tabel soal structure digunakan untuk menampung data soal serta jawaban untuk bagian
structure yang dimasukkan oleh admin. Pada tabel 3.4 dijelaskan field-field yang dibuat
dalam tabel structure.

Universitas Sumatera Utara

47

Field

Type

Index

Keterangan

no

Int(100)

Primary Key

Nomor Soal

pertanyaan

Text

-

Pertanyaan Soal

a

Tinytext

-

Pilihan a

b

Tinytext

-

Pilihan b

c

Tinytext

-

Pilihan c

d

Tinytext

-

Pilihan d

jawaban

Tinytext

-

Jawaban

Tabel 3.4 Tabel Structure

3.5.5 Tabel Soal Listening

Tabel soal listening digunakan untuk menampung data soal serta jawaban untuk bagian
listening yang dimasukkan oleh admin. Pada tabel 3.5 dijelaskan field-field yang dibuat
dalam tabel listening.

Field

Type

Index

Keterangan

no

Int(100)

Primary Key

Nomor Soal

part

Varchar(10)

-

Part Soal

a

Tinytext

-

Pilihan a

b

Tinytext

-

Pilihan b

c

Tinytext

-

Pilihan c

d

Tinytext

-

Pilihan d

jawaban

Tinytext

-

Jawaban

Tabel 3.5 Tabel Listening

Universitas Sumatera Utara

48

3.5.6 Tabel Soal Reading

Tabel soal reading digunakan untuk menampung data soal serta jawaban untuk bagian
reading yang dimasukkan oleh admin. Pada tabel 3.6 dijelaskan field-field yang dibuat
dalam tabel reading.

Field

Type

Index

Keterangan

no

Int(100)

Primary Key

Nomor Soal

bacaan

Text

-

Topik Soal

pertanyaan

Text

-

Pertanyaan Soal

a

Tinytext

-

Pilihan a

b

Tinytext

-

Pilihan b

c

Tinytext

-

Pilihan c

d

Tinytext

-

Pilihan d

jawaban

Tinytext

-

Jawaban

Tabel 3.6 Tabel Reading

3.5.7 Tabel Upload File

Tabel upload file digunakan untuk menampung data audio (mp3) untuk melengkapi soal
pada bagian listening yang dimasukkan oleh admin. Pada tabel 3.7 dijelaskan field-field
yang dibuat dalam tabel upload file.

Universitas Sumatera Utara

49

Field

Type

Index

Keterangan

id

Int(10)

file

Varchar(100)

-

File

type

Varchar(30)

-

Tipe File

size

Int(11)

-

Ukuran File

part

Varchar(10)

-

Jenis Part File

Primary Key
Auto Increment

Nomor File

Tabel 3.7 Tabel Upload

3.5.8 Tabel Nilai Structure

Tabel nilai structure digunakan untuk menampung data hasil tes pengguna (user) untuk
bagian structure. Pada tabel 3.8 dijelaskan field-field yang dibuat dalam tabel nilai
structure.

Field

Type

Index

Keterangan

id

Int(100)

email

Varchar(30)

-

Email

jumlah

Int(100)

-

Jumlah Soal

salah

Int(100)

-

Jumlah Salah

benar

Int(100)

-

Jumlah Benar

nilai

Int(100)

-

Skor Structure

Primary Key
Auto Increment

Id Temporary

Tabel 3.8 Tabel Nilai Structure

Universitas Sumatera Utara

50

3.5.9 Tabel Nilai Listening

Tabel nilai listening digunakan untuk menampung data hasil tes pengguna (user) untuk
bagian listening. Pada tabel 3.9 dijelaskan field-field yang dibuat dalam tabel nilai
listening.

Field

Type

Index

Keterangan

id

Int(100)

email

Varchar(30)

-

Email

jumlah

Int(100)

-

Jumlah Soal

salah

Int(100)

-

Jumlah Salah

benar

Int(100)

-

Jumlah Benar

nilai

Int(100)

-

Skor Listening

Primary Key
Auto Increment

Id Temporary

Tabel 3.9 Tabel Nilai Listening

3.5.10 Tabel Nilai Reading

Tabel nilai reading digunakan untuk menampung data hasil tes pengguna (user) untuk
bagian reading. Pada tabel 3.10 dijelaskan field-field yang dibuat dalam tabel nilai
reading.

Universitas Sumatera Utara

51

Field

Type

Index

Keterangan

id

Int(100)

email

Varchar(30)

-

Email

jumlah

Int(100)

-

Jumlah Soal

salah

Int(100)

-

Jumlah Salah

benar

Int(100)

-

Jumlah Benar

nilai

Int(100)

-

Skor Reading

Primary Key
Auto Increment

Id Temporary

Tabel 3.10 Tabel Nilai Reading

3.5.11 Tabel Nilai Akhir

Tabel nilai akhir digunakan untuk menampung data hasil akhir tes pengguna (user) yang
diambil dari tabel nilai structure, table nilai listening dan table nilai reading. Pada tabel
3.11 dijelaskan field-field yang dibuat dalam tabel nilai akhir.

Field

Type

Index

Keterangan

Email

Varchar(30)

-

Email

SkorAkhir

Int(100)

-

Skor Akhir TOEFL

Listening

Int(100)

-

Skor Listening

Structure

Int(100)

-

Skor Structure

nilai

Int(100)

-

Skor Reading

benar_listening

Int(100)

-

Jumlah Benar Listening

benar_structure

Int(100)

-

Jumlah Benar Structure

benar

Int(100)

-

Jumlah Benar Reading

Tabel 3.11 Tabel Nilai Akhir

Universitas Sumatera Utara

52

3.5.12 Tabel Id

Tabel Id digunakan untuk menampung data id penggunaa (user) sementara saat
melakukan tes TOEFL. Pada tabel 3.12 dijelaskan field-field yang dibuat dalam tabel Id.

Field

Type

id

Int(100)

email

Varchar(30)

Index

Keterangan

Primary Key
Auto Increment
-

Id Temporary
Email

Tabel 3.12 Tabel Id

Universitas Sumatera Utara

BAB 4

IMPLEMENTASI SISTEM

4.1

Pengertian Implementasi Sistem

Implementasi sistem merupakan langkah-langkah atau prosedur yang dilakukan dalam
menyelesaikan desain sistem yang telah disetujui, untuk menguji, menginstal dan
memulai sistem baru atau sistem yang diperbaiki dari sistem yang lama.

4.2

Tujuan Implementasi Sistem

Adapun tujuan-tujuan dari implementasi sistem, yaitu:
1.

Menyelesaikan desain sistem yang ada dalam dokumen desain sistem yang
telah disetujui sebelumnya.

2.

Memastikan bahwa pemakai atau user dapat mengoperasikan sistem baru,
yaitu dengan mempersiapkan manual pemakaian dan melatih sistem.

3.

Menguji apakah sistem baru tersebut memenuhi permintaan pemakai, yaitu
dengan menguji sistem secara menyeluruh.

Universitas Sumatera Utara

54

4.

Memastikan bahwa konversi ke sistem baru berjalan secara benar, yaitu
dengan membuat rencana, mengontrol dan melakukan instalasi baru secara
benar.

4.3

Komponen Implementasi Sistem

Perancangan sistem yang telah dikerjakan dapat berjalan dengan baik atau tidak, maka
perlu dilakukan pengujian terhadap sistem yang telah dikerjakan. Untuk itu diiutuhkan
beberapa komponen utama yang mencakap perangkat keras (hardware), perangkat
lunak (software), dan perangkat operator (brainware).

4.3.1 Perangkat Keras (Hardware)

Perangkat

keras

(hardware)

adalah

komponen-komponen

peralatan

yang

membentuk suatu sistem computer dan peralatan-peralatan tambahan lainnya yang
mungkin komputer jalankan tugasnya sesuai dengan yang diperintahkan.

Kebutuhan hardware merupakan mesin utama dalam penggunaan komputer,
bekerja dengan bantuan sistem informasi. Dalam hal ini, dapat dirincikan spesifikasi
komponen hardware yaitu:

Universitas Sumatera Utara

55

1.

PC dengan processor minimal Intel Pentium III 733 MHz. Processor merupakan
pusat

pengolahan

data

serta pusat pengontrolan dari keseluruhan sistem

komputer.
2.

Memori, adalah tempat penampungan atau tempat penyimpanan data sementara.

3.

Monitor, adalah layar yang menampilkan output program.

4.

Keyboard, adalah alat menginput data.

4.3.2 Perangkat Lunak (Software)

Untuk

mendukung

sistem

kerja

dari

hardware

maka

diperlukan

juga

software didalamnya. Kebutuhan ini menyangkut segala jenis instruksi yang
mengarah pada komputer untuk menjalankan suatu program. Adapun software yang
sering digunakan dalam pembuatan website ini adalah:
1.

Sistem operasi Ms. Windows 7.

2.

XAMPP versi 3.2.1 dan MySQL 5.6.201 sebagai database server.

3.

Sublime Text 2 sebagai web editor.

4.

Adobe Photoshop CS3 sebagai desain layout.

5.

PHP sebagai bahasa pemrograman server side.

6.

Browser sebagai tempat media tampilan halaman website, Seperti: Google
Chrome atau Mozilla Firefox.

Universitas Sumatera Utara

56

4.3.3 Unsur Manusia (Brainware)

Brainware merupakan factor manusia yang menangani fasilitas computer yang
ada. Faktor manusia yanag dimaksud adalah orang-orang yang memiliki bagian
untuk menangani sistem dan merupakan unsur manusia.

Perangkat operator (Brainware) meliputi 4 bagian yaitu:
1.

Analisis Sistem, yaitu orang yang membentuk dan membangun fasilitas
rancangan sistem atau program.

2.

Programmer, yaitu orang yang mengerti bahasa pemrograman yang digunakan
dalam membuat dan membangun suatu program.

3.

Operator (Administrator), yaitu orang yang mengoperasikan sistem seperti
memasukkan data untuk dioperasikan dan menghasilkan informasi.

4.

Public (Pengguna), yaitu orang yang memakai sistem yang telah dirancang
untuk mendapatkan informasi yang dibutuhkan.

4.4

Prosedur Penggunaan Website

Website simulasi TOEFL dibuat dengan berbagai halaman yang berbeda-beda namun
tetap dapat melakukan penjelajahan ke halaman lain. Untuk itu penulis

membuat

beberapa prosedur yang menjelaskan langkah-langkah untuk mengakses website
simulasi tes TOEFL.

Universitas Sumatera Utara

57

4.4.1 Halaman Index.php

Merupakan halaman utama yang akan diakses pertama sekali ketika situs dibuka.
Pada halaman ini berisi menu utama. Halaman index yang penulis bangun dibagi
menjadi 2 bagian yaitu halaman untuk pengguna dan untuk admin.

1.

Halaman Index.php User
Index.php merupakan halaman yang pertama sekali muncul ketika user
mengunjungi situs website simulasi tes TOEFL. Penulis membuat halaman about,
services, contact dan login pada satu halaman yaitu halaman index.php, sehingga
pengguna dapat melakukan penjelajahan dengan cara mengklik atau scroll ke
bawah pada halaman index.php. Gambar 4.1 berikut adalah tampilan halaman
index.php.

Gambar 4.1 Tampilan Index.php Untuk User

Universitas Sumatera Utara

58

2.

Halaman Index.php Admin
Index.php merupakan halaman yang pertama sekali muncul setelah admin
melakukan proses login. Pada halaman ini terdapat link atau navigasi yang dapat
admin gunakan dalam mengelolah sistem simulasi TOEFL, seperti melakukan
penambahan, penghapusan atau pengeditan terhadapat data-data soal maupun data
peserta/user. Gambar 4.1 berikut adalah tampilan halaman index.php untuk admin.

Gambar 4.2 Tampilan Index.php untuk Admin

Universitas Sumatera Utara

59

4.4.2 Halaman About

Pada halaman ini, user dapat mengetahui lebih banyak lagi mengenai TOEFL serta
bahasa inggris dan dapat melakukan pembelajaran grammar dengan soal dan
pembahasaan yang telah disediakan sebelumnya. User dapat dengan bebas mengakses
halaman about dan melakukan penjelajahan tanpa harus login terlebih dahulu. Gambar
4.3 berikut adalah tampilan halaman about.

Gambar 4.3 Tampilan Halaman About

Universitas Sumatera Utara

60

4.4.3 Tampilan Services

Meupakan halaman yang menyediakan model tes TOEFL yang akan diuji, yaitu
listening, reading dan structure beserta dengan pembahasannya masing-masing.
Pengguna dapat mengakses halaman ini tanpa harus login terlebih dahulu. Gambar 4.4
berikut adalah tampilan halaman services.

Gambar 4.4 Tampilan Halaman Services

4.4.4 Halaman Contact

Halaman contact berisikan informasi dari admin/pengelolah sistem dan pada halaman
ini pengunjung dapat dengan bebas mengapresiasikan pendapat mereka kepada
pengelolah dengan mengetik dan mengirimnya pada kolom yang telah disediakan.
Gambar 4.5 berikut adalah tampilan halaman contact.

Universitas Sumatera Utara

61

Gambar 4.5 Tampilan Halaman Contact

4.4.5 Halaman Login dan Daftar

Pada halaman ini user dapat login untuk melakukan tes simulasi TOEFL. Apabila
belum terdaftar, user dapat mendaftar terlebih dahulu dengan mengklik kalimat ‘Daftar
Sekarang’. Gambar 4.6 berikut adalah tampilan halaman untuk login dan gambar 4.7
adalah tampilan halaman untuk daftar.

Universitas Sumatera Utara

62

Gambar 4.6 Tampilan Halaman Login

Gambar 4.7 Tampilan Halaman Daftar

Universitas Sumatera Utara

63

4.4.6 Halaman Profil

Halaman profil menampilan data user dan juga data skor user. Pada halaman ini, user
dapat mengedit dan menghapus data user. User juga dapat menghapus skor TOEFL
yang diinginkan. Untuk lebih jelas, lihat pada gambar 4.8.

Gambar 4.8 Tampilan Halaman Profil

4.4.7 Halaman Direction

Hamalam direction menampilkan petunjuk atau arahan sebelum melakukan tes kepada
pengguna (user). Untuk memulai simulasi, maka user harus memasukkan email terlebih
dahulu seperti pada gambar 4.9.

Universitas Sumatera Utara

64

Gambar 4.9 Tampilan Halaman Direction

4.4.8 Halaman Simulasi TOEFL

Halaman ini merupakan tampilan dari simulasi tes TOEFL dimana akan menampilan
waktu tes simulasi, pertanyaan dan pilihan jawaban untuk pengguna (user). Pertama
sekali user akan melakukan tes structure seperti pada gambar 4.10. Setelah selesai,
maka user secara otomatis akan diarahkan ke tes listening seperti pada gambar 4.11.
Dan terakhir, user akan melakukan tes reading seperti pada gambar 4.12. Setelah selesai
melakukan tes, maka user akan diarahkan ke halaman utama.

Universitas Sumatera Utara

65

Gambar 4.10 Tampilan Simulasi Tes Structure

Gambar 4.11 Tampilan Simulasi Tes Listening

Universitas Sumatera Utara

66

Gambar 4.12 Tampilan Simulasi Tes Reading

Universitas Sumatera Utara

67

BAB 5

PENUTUP

5.1

Kesimpulan

Setelah dilakukan perancangan, pembuatan, implementasi dan pengujian Sistem
Simulasi TOEFL berbasis Web, kesimpulan yang diperoleh adalah sebagai berikut.
1.

Aplikasi yang dibangun berbasis web dan bersifat online, sehingga memudahkan
pengguna dalam menggunakan aplikasi ini dimana saja dan kapan saja.

2.

Pembuatan situs ini dapat membantu masyarakat yang ingin melakukan tes
TOEFL sehingga dapat memperoleh skor/hasil yang diinginkan.

3.

Selain sebagai sarana simulasi TOEFL, website ini juga dapat digunakan sebagai
sara pembelajaran bahasa inggris.

4.

Untuk menarik minat pengunjung, perlu dibuat rancangan layout/template
dengan gambar dan animasi yang menarik.

Universitas Sumatera Utara

68

5.2

Saran

Dalam sistem ini masih terdapat beberapa hal yang menjadi kekurangan dan sangat baik
untuk dilakukan pengembangan di masa yang akan datang. Beberapa saran terkait
sistem simulasi TOEFL ini yaitu:
1.

Tampilan/layout situs sebaiknya dibuat dalam bentuk yang lebih menarik lagi dan
dinamis.

2.

Seiring dengan perkembangan teknologi mobile, pada pengembangan selanjutnya
aplikasi dapat dikembangkan dalam versi android dan sistem operasi mobile
lainnya.

3.

Saat user sedang melakukan tes TOEFL, sebaiknya sistem dapat menyimpan
data/soal yang telah dikerjakan oleh user sehingga jika user tidak dapat
melanjutkan tes maka user dapat logout dan melanjutkan tes sesuai keinginan
user.

Universitas Sumatera Utara