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