Data Flow Diagram DFD Flowchart

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