Analisis Sistem Perancangan Database

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