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

(1)

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.

(2)

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:

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.

Index

(3)

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:

Listening Reading Structure Data User Profile Index

(4)

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.

(5)

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

(6)

(7)

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 IDdan password yang dimasukkan valid

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

Gambar 3.5 Flowchart Login Admin Mulai

Tampil Login Admin

User ID dan Password

A

S Masukkan User ID

dan Password

(8)

3.3.3 Flowchart Halaman Admin

Gambar 3.6 Flowchart Halaman Admin A

Proses Logout Keluar

(9)

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.

(10)

(11)

3.3.5 Flowchart Services

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

(12)

3.3.6 Flowchart Login

Gambar 3.9 Flowchart Halaman Login

(13)

3.3.7 Flowchart Tes TOEFL

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.

(14)

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.

Gambar 3.11 ERD Tahap Pertama

b. Menentukan atribut key masing-masing himpunan entity.

Gambar 3.12 ERD Tahap Kedua

c. Mengidentifikasikan dan menetapkan seluruh himpunan relasi diantara himpunan

entity-entity yang ada.

Gambar 3.13 ERD Tahap Ketiga

user TOEFL admin

email id soal id

user TOEFL admin

email id soal id

(15)

d. Memasukkan derajat / cardinalitas untuk setiap himpunan.

Gambar 3.14 ERD Tahap Keempat

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

Gambar 3.15 ERD Tahap Kelima

user TOEFL admin

email id soal id

Mengerjakan Mengelola

N N N N

user TOEFL admin

email id soal id

Mengerjakan Mengelola

nama nname

bln

gender

password

nama

email password

(16)

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)

(17)

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.

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

(18)

no Int(100) Primary Key Nomor Soal

pertanyaan Text - Pertanyaan Soal

a Tinytext - Pilihan a

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.

(19)

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.

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

(20)

id Int(10) Primary Key

Auto Increment Nomor File

file Varchar(100) - File

type Varchar(30) - Tipe File

size Int(11) - Ukuran File

part Varchar(10) - Jenis Part 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.

Auto Increment Id Temporary

jumlah Int(100) - Jumlah Soal

salah Int(100) - Jumlah Salah

benar Int(100) - Jumlah Benar

nilai Int(100) - Skor Structure

(21)

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.

nilai Int(100) - Skor Listening

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

(22)

nilai Int(100) - Skor Reading

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-fieldyang dibuat dalam tabel nilai akhir.

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

(23)

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-fieldyang dibuat dalam tabel Id.

(24)

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.

(25)

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.

(26)

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.

(27)

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

(28)

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.

(29)

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.

(30)

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.

(31)

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

(32)

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

(33)

Gambar 4.6 Tampilan Halaman Login

(34)

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

(35)

Gambar 4.9 Tampilan Halaman Direction

4.4.8 Halaman Simulasi TOEFL

(36)

Gambar 4.10 Tampilan Simulasi Tes Structure

(37)

(38)

BAB 5

PENUTUP

5.1 Kesimpulan

Se_{telah 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.

(39)

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.