BAB 3 ANALISIS DAN PERANCANGAN SISTEM
3.1 Analisis Sistem
Analisis sistem didefinisikan sebagai penguraian dari suatu sistem informasi yang utuh ke dalam bagian-bagian komponennya dengan maksud untuk
mengidentifikasikan dan mengevaluasi permasalahan-permasalahan, kesempatan- kesempatan, hambatan-hambatan yang terjadi dan kebutuhan-kebutuhan yang
diharapkan sehingga dapat diusulkan perbaikan-perbaikannya. Untuk mulai merancang suatu website media pembelajaran, terlebih dahulu dirangkum alur kerja
berdasarkan kebutuhan pengguna atau user yang akan menggunakan media ini nantinya. Berdasarkan pengamatan penulis, analisis sistem jenuhnya proses
pembelajaran English grammar yang tidak begitu rumit tetapi membingungkan, sulit memahami materi yang disajikan dalam text book, banyaknya keinginan belajar
sambil bermain dengan kata lain metode penyajian materi yang lebih menarik, juga kurang lengkapnya materi serta contoh-contoh yang diberikan oleh pengajar maupun
buku panduan, oleh karena hal tersebut disini penulis mencoba menampilkan suatu metode atau media belajar versi yang berbeda yang menampilkan materi English
grammar lebih mudah dimengerti, banyak contoh soal, lebih menarik dan tidak membosankan, juga menyajikan materi yang dapat dipelajari secara offline dengan
didownload.
3.2 Perancangan Sistem
Universitas Sumatera Utara
Perancangan sistem adalah upaya suatu organisasi atau lembaga untuk memulai memiliki suatu sistem yang lebih baik lagi dari sistem yang sebelumnya. Perancangan
sistem dilakukan setelah mendapat gambaran dengan jelas apa yang harus dikerjakan. Dalam merancang media pembelajaran ini ada beberapa tahapan yang harus
diperhatikan sehingga aplikasi yang dirancang sesuai dengan tujuan. Tahapan-tahapan yang diperlukan dalam merancang aplikasi multimedia ini terdiri dari Data Flow
Diagram DFD, Flowchart, dan perancangan tampilan aplikasi.
3.2.1 Data Flow Diagram DFD
Data Flow Diagram DFD adalah representasi grafik dari sebuah sistem. DFD menggambarkan komponen-komponen sebuah sistem, aliran-aliran data di mana
komponen-komponen tersebut, dan asal, tujuan, dan penyimpanan dari data tersebut. DFD terdiri dari diagram konteks dan diagram rinci. Diagram konteks merupakan
diagram yang menggambarkan hubungan antarsistem dengan entitas di luar sistem, merupakan sistem secara keseluruhan. Diagram rinci menggambarkan sistem sebagai
jaringan kerja antara fungsi yang berhubungan satu dengan yang lain dengan aliran penyimpanan data, model ini hanya memodelkan sistem dari sudut pandang fungsi.
Pada Media Pembelajaran English Grammar Berbasis Web, diagram konteksnya dapat dilihat pada gambar berikut:
Universitas Sumatera Utara
Gambar 3.1 Diagram Konteks
Diagram rinci dari Media Pembelajaran English Grammar Berbasis Web initerdiri dari dua level yaitu level 1 dan level 2. Diagram rinci level 1 dan level 2 untuk dapat
dilihat pada Gambar 3.2 dan Gambar 3.3.
USER Media
Pembelajaran English Grammar
Berbasis Web
Pilihan menu
Hasil Pilihan
Universitas Sumatera Utara
Berikut rancangan diagram level 1 Media Pembelajaran English Grammar
Gambar 3.2 Diagram Level 1 Media Pembelajaran Menu Utama
Berikut diagram level 2 Media Pembelajaran English Grammar.
USER
MENU UTAMA
Pilihan Menu Pilihan Menu
Pilihan Menu
Pilihan Menu
Pilihan Menu
Pilihan Menu Hasil Pilihan
Hasil Pilihan Hasil Pilihan
Hasil Pilihan Hasil Pilihan
Hasil Pilihan Beranda
Grammar
Tes Soal
Download Modul
Tips Trik
Profil
Universitas Sumatera Utara
Gambar 3.3 Diagram Level 2 Media Pembelajaran Menu Tes Soal
3.2.2 Flowchart
Flowchart adalah gambaran dalam bentuk diagram alir dari algoritma dalam suatu program yang menyatakan arah alur program dalam menyelesaikan suatu masalah.
Flowchart dapat memberikan gambaran yang efektif, jelas, dan ringkas tentang prosedur logic. Teknik penyajian yang bersifat grafis jelas akan lebih baik dari pada
uraian-uraian yang bersifat teks, khususnya dalam menyajikan logika-logika yang bersifat kompleks.
Flowchartatau bagan alur merupakan metode untuk menggambarkan tahap-tahap penyelesaian masalah prosedur, beserta aliran data
dengan simbol-simbol standar yang mudah dipahami. Dalam kehidupan sehari-hari, Flowchart banyak digunakan di pusat-pusat layanan seperti kantor pemerintahan,
bank, rumah sakit, organisasi masyarakat, dan perusahaan.
Tujuan utama penggunaan Flowchart adalah untuk menyederhanakan rangkaian proses atau prosedur untuk memudahkan pemahaman pengguna terhadap
informasi tersebut. Oleh karena itu, design sebuah Flowchart harus ringkas, jelas, dan logis. Berikut simnol-simbol yang terdapat pada Flowchart.
USER Login
Daftar
MULAI
Tes Soal
Universitas Sumatera Utara
Bagan Nama
Fungsi Terminator
Awal Atau Akhir Program
Flow Arah Aliran Program
Preparation
InisialisasiPemberian Nilai Awal
Proces
ProsesPengolahan Data
InputOutput Data
InputOutput Data
Sub Program
Sub Program
Decision
Seleksi Atau Kondisi
On Page Connector
Penghubung Bagian-Bagian Flowchart Pada Halaman
Yang Sama
Off Page Connector
Penghubung Bagian-Bagian Flowchart Pada Halaman
Yang Berbeda
Comment
Tempat Komentar Tentang Suatu Proses
Tabel 3.1 Simbol-simbol Flowchart Dalam media pembelajaran English grammar ini, penulis telah merancang flowchart
yang terbagi menjadi beberapa flowchart. Berikut flowchart tersebut.
Universitas Sumatera Utara
Gambar 3.4 Flowchart Media Pembelajaran English Grammar Berbasis Web
Mulai
Menu Utama
Pilih menu
Beranda Grammar
Profil TipsTri
k
Download Modul
Tes Soal
A B
C D
E F
Keluar
Universitas Sumatera Utara
Berikut flowchart login admin:
Gambar 3.5 Flowchart Login Admin Berikut flowchart menu grammar:
Gambar 3.6 Flowchart Menu Grammar
Halaman Admin
Input Nama, Password
Periksa nama dan Password
Tampil Halaman
administrasi benar
salah
Logout
Grammar
Part Of speech
Tenses Direct-
Indirect Gerund
Active - passive
Pronoun
Lanjut Tes Soal
C Pilih
menu
Universitas Sumatera Utara
3.3 Perancangan Aplikasi
Perancangan tampilan layar menunjukkan interface antarmuka dari program aplikasi
ini. Tampilan antarmuka perlu dirancang untuk menggambar kan aplikasi yang akan dibuat dan membantu mempermudah proses pembangunan aplikasi. Dalam
perancangan website, penulis mempersiapkan file-file yang digunakan dalam pembuatan website. File halaman website media pembelajaran ini secara umum
berekstensi. HTML dan.PHP. Hal ini dikarenakan seluruh file halaman website menggunakan bahasa pemrograman PHP dan HTML dan berkomunikasi dengan
MySQL sebagai tempat penyimpanan datanya atau sebagai database-nya.
3.3.1 Perancangan Halaman Menu Utama Beranda
Tampilan halaman utama media pembelajaran English grammar ini bertujuan untuk mempermudah user dalam menggunakan aplikasi ini melalui menu langsung terlihat
pada navigasi atas yang disesain dengan tampilan yang sederhana tapi menarik. Secara umum menu utama terbagi menjadi tujuh bagian yaitu:
1 bagian logo website
2 bagian kutipan grammar
3 bagian content isi
4 bagian sidebar
5 bagian fitur
6 bagian footer
Berikut gambar dari rancangan halaman menu utama beranda
Universitas Sumatera Utara
Gambar 3.7 Rancangan Halaman Beranda
3.3.2 Perancangan Halaman Menu Grammar
Dalam halaman ini, penulis sengaja berfokus pada topik-topik grammar yang telah disediakan. Topik grammar ini ditampilkan secara berurut seperti daftar isi,
dikarenakan penulis ingin memberi kemudahan dalam berinteraksi dengan user tanpa harus bingung dengan sederetan menu dan file yang berantakan. Seluruh topik dapat
di klik oleh user dan akan langsung menuju ke link pembelajaran.
Produk baru
L O G O
Produk baru beranda
grammar tes soal
modul tips
profil
ISI MATERI MEDIA BELAJAR sidebar
“kutipan”
footer
Universitas Sumatera Utara
Tampilan sebelum memilih materi grammar.
Gambar 3.8 Rancangan tampilan Menu grammar
Gambar 3.8 Rancangan Halaman grammar 1
Produk baru
L O G O
Produk baru beranda
grammar tes soal
modul tips
profil
English Grammar Topics 1 a
2 a 3 a
4 a 5 a
6 a 7 a
8 a 9 a
10 a sidebar
Universitas Sumatera Utara
Tampilan setelah memilih materi grammar.
Gambar 3.9 Rancangan Halaman Grammar 2 Gambar 3.9 Rancangan Halaman grammar 2
3.3.3 Perancangan Halaman Menu Tes Soal
Tes soal dalam media pembelajaran ini cukup menarik, ketika user akan menuju ke halaman tes soal, maka user akan dikirim ke halaman khusus, dimana halaman
tersebut lebih dinamis, lebih kecil tampilannya. Pada tes soal ini, dibuat folder khusus yang mengatur prosedur tes soal, dimana user diharuskan untuk mendaftar terlebih
dahulu, lalu kemudian akan bisa memulai tes soal. Penulis sengaja membuat halaman tes soal ini harus bersistem log in, karena nilai dari hasil tes yang dicapai oleh user
Produk baru
L O G O
Produk baru beranda
grammar
tes soal modul
tips
profil
Simple Present Tense
MATERI
sidebar
footer
-Ringkasan -kegunaan
-kata kunci -bentuk
Universitas Sumatera Utara
akan disimpan kedalam database, dan masih akan bisa dilihat kapan pun user kembali lagi untuk tes soal lainnya.
Gambar 3.10 Rancangan Halaman Tes Soal
3.3.4 Perancangan Halaman Menu Modul
Halaman modul berisikan tentang modul-modul yang disediakan oleh media pembelajaran English grammar, untuk dapat diunduh atau didownload sebagai media
belajar offline bagi user.
home tes soal
daftar nilai
account
gambar user Pilih Soal
TES SOAL GRAMMAR logout
Universitas Sumatera Utara
Berikut rancangan halaman modul.
Gambar 3.8 Rancangan tampilan Menu grammar
Gambar 3.11 Rancangan Halaman Modul
3.3.5 Perancangan Halaman Menu Tips dan Trik
Menampilkan tes belajar grammar yang lebih mudah, menarik dan efisien.
Produk baru
L O G O
Produk baru beranda
grammar tes soal
modul
tips profil
Modul1
Modul2
Modul3
Modul4 sidebar
Universitas Sumatera Utara
Berikut rancangan halaman tips.
Gambar 3.8 Rancangan tampilan Menu grammar
Gambar 3.12 Rancangan Halaman Tips
3.3.6 Perancangan Halaman Menu Profil
Pada halaman profil terdapat profil dari penulis yang telah membuat media pembelajaran ini, juga contact form yang telah disediakan.
L O G O
Produk baru beranda
grammar tes soal
modul
tips
profil
T I P S sidebar
Universitas Sumatera Utara
Berikut rancangan halaman profil.
Gambar 3.8 Rancangan tampilan Menu grammar
Gambar 3.13 Rancangan Halaman Profil
3.4 Perancangan Database
Database dapat diumpamakan sebagai sebuah tempat menyimpan data yang terstruktur agar dapat diakses dengan cepat dan mudah. Membangun sebuah database
merupakan langkah awal pembuatan aplikasi, termasuk aplikasi pembelajaran English grammar ini. Dalam perancangan aplikasi ini, penulis membuat 3 tabel dan
menyatukannya dalam database db_ujianonline. Tabel-tabel tersebut adalah tabel admin, tabel nilai dan tabel soal, table user. Pembuatan database dan tabel-tabel
mempergunakan fasilitas MySQL atau PHPmyadmin yang terdapat dalam software XAMPP. Di bawah ini adalah gambaran isi dari masing-masing tabel.
Produk baru
L O G O
Produk baru grammar
tes soal modul
tips
profil
P R O F I L sidebar
beranda
Universitas Sumatera Utara
1 Tabel admin terdiri dari:
Tabel admin digunakan untuk menampung data dari admin pada media pembelajaran English grammar. Berikut adalah field-field yang dibuat dalam
tabel admin:
Field Type
id_admin int 2
nama_admin varchar 20
username varchar 20
password varchar 20
Tabel 3.2 Tabel Admin
2 Tabel table_nilai terdiri dari:
Tabel nilai digunakan untuk menampung nilai-nilai yang dihasilkan oleh user ketika menjawab tes soal. Berikut adalah field-field yang dibuat dalam tabel
table_nilai:
Field Type
id_nilai int 4
id_user int 4
benar int 4
salah int 4
kosong int 4
point int 4
gagal date
Tabel 3.3 Tabel Nilai
Universitas Sumatera Utara
3 Tabel tabel_soal terdiri dari:
Tabel tabel soal menampung seluruh soal yang disediakan dalam ujiankuis tes soal. Tabel ini berisi seluruh pertanyaan dan jawaban soal. Berikut adalah
field-field yang dibuat dalam tabel table_soal:
Field Type
id_soal int 4
pertanyaan varchar500
pilihan_a varchar100
pilihan_b varchar100
pilihan_c varchar100
pilihan_d varchar100
jawab varchar100
publish enumyes,no
tipe int2
topik varchar 50
Tabel 3.4 Tabel Soal
4 Tabel table_user Tabel tabel_user menampung data anggota kuis yang telah mendaftar. Berikut
adalah field-field yang dibuat dalam tabel table_user:
Field Type
Id int 4
nama_user varchar20
gambar_user varchar50
Password varchar50
Tabel 3.5 Tabel User
Universitas Sumatera Utara
BAB 4 IMPLEMENTASI
4.1 Pengertian Implementasi
Tahap implementasi sistem merupakan tahap meletakan sistem supaya sistem tersebut siap untuk dioperasikan sesuai dengan yang direncanakan. Implementasi sistem adalah
langkah-langkah atau prosedur-prosedur yang dilakukan dalam menyelesaikan desain sistem yang telah disetujui, untuk menginstal, menguji dan memulai sistem baru atau
sistem yang diperbaiki. Tahap implementasi sistem terdiri dari langkah-langkah berikut ini:
Adapun tujuan dari implementasi sistem ini adalah sebagai berikut: 1.
Menyelesaikan desain sistem yang telah disetujui sebelumnya. 2.
Memastikan bahwa pemakai user dapat mengoperasikan sistem baru 3.
Menguji apakah sistem baru tersebut sesuai dengan pemakai. 4.
Memastikan bahwa konversi ke sistem baru berjalan yaitu dengan membuat rencana, mengontrol dan melakukan instalasi baru secara benar.
4.2 Kebutuhan Perangkat Keras
Perancangan aplikasi yang telah dibuat diimplementasikan dengan menggunakan bahasa pemrograman PHP dan MySQL melalui web editor Adobe Dreamweaver CS5,
dengan kebutuhan minimal spesifikasi untuk aplikasi ini agar dapat berjalan dengan baik adalah:
1. Prosessor Intel Pentium IV – 2.4 GHz
2. Sistem Operasi Windows XP atau lebih tinggi
Universitas Sumatera Utara