3.2 Perancangan Sistem
Diagram pohon atau tree chart diperlukan untuk menggambarkan hierarki isi aplikasi website. Adapun diagram pohon dari aplikasi website dapat dilihat pada
gambar 3.1.
Perancangan Model Pembelajaran Tata Bahasa Inggris English Grammar Berbasis Web
User
Daftar
Login
Pilih Menu Cari
Beranda Materi Kesalahan-kesalahan Latihan Tentang Materi
Umum
Contoh Soal Soal Logout
Soal Contoh Soal Soal
Nilai Nilai Nilai
Logout Logout Logout
Gambar 3.1 Diagram Pohon
Universitas Sumatera Utara
3.3 Perancangan DFD Aplikasi
DFD dari aplikasi website yang dibuat dimana dimulai dari diagram konteks hingga level2 .
3.3.1 Diagram Konteks
Diagram konteks atau diagram level nol dari aplikasi dapat dilihat pada gambar 3.2 berikut.
P0 Pembelajaran English
Grammar Berbasis Web
Admin
User Nilai
Jawaban_benar Menu
Konfirmasi_Daftar Menu_pilihan
Konfirmasi_logout Data_user nama,
Password, status Jawaban
Soal
Konfirmasi_Login Hasil_update-an_menu
Hasil_update-an_jawaban Hasil_update-an_soal
Data_user nama, password
Nilai
Nilai
Gambar 3.2 Diagram Konteks
Diagram ini merepresentasikan seluruh elemen yang terdapat pada Sistem Pembelajaran English Grammar Berbasis Web. Berikut ini dijelaskan proses dari
diagram konteks pada gambar 3.2.
1. Diagram terdiri dari dua tiga entiti yaitu admin, user dan nilai.
2. Admin memasukkan soal, menu, dan jawaban dari soal yang telah diupdate ke
dalam sistem, kemudian sistem akan menampilkan hasil-hasilnya kepada admin dan user yang telah login.
3. User memasukkan data user ke dalam sistem untuk melakukan proses daftar
dan login.
Universitas Sumatera Utara
4. Banyak proses yang dapat dilakukan user di dalam sistem dan sebagai
feedback sistem menampilkan konfirmasi daftar, konfirmasi login, menu pilihan, soal pilihan, hasil update-an, hasil pencarian, data nilai dan konfirmasi
logout.
5. Keluaran yang diperoleh dari sistem setelah user masuk ke sistem adalah nilai.
Nilai diperoleh ketika user telah menjawab soal-soal yang disediakan.
3.3.2 DFD Level 1
DFD Level 1 dapat dilihat pada gambar 3.3. Pada level ini terdapat proses-proses apa saja yang terjadi pada sistem aplikasi.
P1.0 Update
P2.0 Daftar
P4.0 Tampil
P5.0 Penyelesaian
Soal
P6.0 Pencarian
P7.0 Logout
Nilai
D2 Data_user Admin
Menu
Data_user nama, password, status
Konfirmasi_daftar
Data_user nama, password
Data_user nama, password, status
P3.0 Login
User Hasil_update-an_soal
Pilihan_soal Soal
Konfirmasi_login Menu_pilihan
Hasil_pencarian Jawaban_benar
Data_pencarian materi
Data user nama, password, status
Konfirmasi_logout Data_user nama,
password, status
Nilai Hasil_update-an_menu
Hasil_update-an_jawaban
Beranda Materi
Kesalahan- kesalahan Umum
Latihan Profil
Soal Jawaban
D1 Isi Isi
Nilai
Gambar 3.3 DFD Level 1
Universitas Sumatera Utara
DFD level 1 disaring lebih jauh lagi menjadi tingkat yang lebih rendah. DFD ini menggambarkan proses-proses yang terjadi pada sistem secara umum. Berikut ini
merupakan penjelasan dari gambar DFD level 1.
1. DFD Level 1 dari sistem aplikasi memiliki tujuh proses utama, yaitu
Pengupdate-an, Daftar, Login, Penampilan, Penyelesaian soal, Pencarian dan Logout.
2. Pada proses update, admin memasukkan soal, jawaban dan materi yang akan
diupdate, lalu sistem akan menampilkan hasil update-an soal, menu, jawaban kepada user yang telah login.
3. Proses selain proses update, dilakukan oleh user yang telah memiliki akun.
4. Proses yang pertama dilakukan adalah pendaftaran dengan memasukkan data
user nama, password, status, proses ini dilakukan jika user belum memiliki akun, lalu data user akan dimasukkan ke dalam database user. Setelah itu user
dapat melakukan login dengan memasukkan data user nama dan password. 5.
Setelah berhasil login, user dapat melakukan beberapa pilihan proses. 6.
Pada proses Tampil, jika user ingin menampilkan menu, maka user dapat memilih menu yang disediakan Beranda, Materi, Kesalahan Umum lalu
menu pilihan akan tampil, jika user ingin langsung keluar aplikasi, maka user dapat memilih tombol logout dan sistem akan memberi konfirmasi logout atau
jika tidak, user dapat melakukan proses lain sesuai keinginan. 7.
Jika user tidak ingin memilih menu, maka user dapat melakukan pencarian dengan mengisi kotak pencarian dengan data yang ingin dicari materi. Jika
selesai mencari, user dapat melakukan proses lain atau memilih tombol logout. 8.
Proses selanjutnya yang bisa dilakukan adalah proses Penyelesaian soal. Soal- soal disediakan pada sub menu pada menu Materi dan disediakan juga pada
menu Latihan. 9.
Sebelum menyelesaikan soal, user terlebih dahulu memilih soal-soal yang mana saja yang ingin dikerjakan. Jika tidak ingin mengerjakan soal, user dapat
melakukan proses yang lain. 10.
Pada proses penyelesaian soal, user harus memilih jawaban dengan cara mengklik jawaban yang benar dari pilihan jawaban yang disediakan.
Universitas Sumatera Utara
11. Jawaban benar user akan diperiksa, kemudian akan tampil nilai berdasarkan
jumlah jawaban benar dari user. 12.
Jika semua atau beberapa proses telah dilakukan, maka user dapat mengkliki tombol logout dan sistem akan memberi konfirmasi logout kepada user.
3.3.3 DFD Level 2
DFD Level 2 merupakan DFD yang menjabarkan setiap proses yang ada di level 1. Adapun DFD Level 2 dapat dilihat sebagai berikut:
3.3.3.1 DFD Level 2 untuk Proses Update
DFD level 2 untuk penjabaran dari proses Pengupdate-an dapat dilihat pada gambar 3.4.
P1.1 Update Soal
P1.3 Update Menu
Admin User
P1.2 Update Jawaban
Soal
Jaw aban
Menu Hasil_Update-
an_soal
Hasil_Update- an_jawaban
Hasil_Update- an_menu
Gambar 3.4 DFD Level 2 untuk Proses Update Informasi
Universitas Sumatera Utara
Berikut ini adalah penjelasan dari proses gambar 3.4.
1. Proses update terbagi menjadi tiga proses, yaitu proses Update Soal, Update
Jawaban dan Update Menu. 2.
Dalam hal ini admin memasukkan soal, jawaban, dan menu yang ingin diupdate, kemudian dari masing-masing proses memberikan hasil update-an
kepada user.
3.3.3.2 DFD Level 2 untuk Proses Daftar
DFD level 2 untuk penjabaran dari proses Daftar dapat dilihat pada gambar 3.5.
P2.1 Daftar
Data_user nama, status
Data_user nama, password, status
Konfirmasi_daftar
Gambar 3.5 DFD Level 2 untuk Proses Daftar
Berikut ini adalah penjelasan dari proses gambar 3.5.
1. Pada proses Daftar pada level 1 hanya menurunkan satu proses pada level dua,
yaitu hanya proses Daftar saja. 2.
Proses daftar dilakukan, jika user belum menjadi member atau memiliki akun. 3.
Untuk mendaftar, user harus memasukkan data user berupa nama, password dan status, kemudian data user tersebut akan dimasukkan oleh sistem ke dalam
D2. 4.
Setelah user daftar, sistem akan memberi konfirmasi daftar untuk melakukan login.
Universitas Sumatera Utara
3.3.3.3 DFD 2 untuk Proses Login
DFD level 2 untuk penjabaran dari proses Login dapat dilihat pada gambar 3.6.
Data_user nama, password,
status
P3.1 Pemasukan Data
User
User
Konfirmasi_login Data_user nama,
password P3.2
Periksa Data User
Data_user nama, password
Data_pencarian materi
Kesalahan-kesalahan_umum Beranda
Profil Latihan
Materi
Gambar 3.6 Diagram Level 2 untuk Proses Login
Berikut ini merupakan penjelasan dari proses gambar 3.6.
1. Proses Login pada level 1 terbagi menjadi dua, yaitu proses Pemasukan Data
User dan proses Periksa Data User. 2.
Jika user yang telah menjadi member ingin masuk ke dalam website, user harus melakukan proses Login terlebih dahulu, yaitu dengan hanya
memasukkan nama dan password. 3.
Data user yang telah dimasukkan akan kembali diperiksa oleh sistem, jika data tersebut sesuai dengan data yang dimasukkan pada saat proses Daftar, maka
sistem akan memberikan konfirmasi login dan user dapat masuk ke dalam halaman utama website.
4. Setelah Login berhasil, halaman utama akan menampilkan lima menu utama,
yaitu Beranda, Materi, Kesalahan-Kesalahan Umum, Latihan dan Profil. 5.
Setelah Login berhasil, user dapat melakukan proses selanjutnya untuk proses pencarian dengan memasukkan data pencarian.
Universitas Sumatera Utara
3.3.3.4 DFD Level 2 untuk Proses Tampil
DFD level 2 untuk penjabaran dari proses Tampil dapat dilihat pada gambar 3.7.
P4.1 Pilih Menu
P4.2 Tampil
Kesalahan-Kesalahan_Umum
Menu_pilhan Soal
Menu_pilihan Pilihan_soal
Hasil_pencarian Nilai
Beranda
Profil Latihan
Materi
Nilai
Gambar 3.7 Diagram Level 2 untuk Proses Tampil
Berikut ini merupakan penjelasan dari proses gambar 3.7.
1. Proses Tampil terbagi menjadi dua proses, yaitu pilih Menu dan Tampil.
2. Setelah proses Login, maka halaman utama akan menampilkan lima utama,
yaitu Beranda, Materi, Kesalahan-Kesalahan Umum, Latihan dan Profil 3.
Pada proses pilih Menu, user memilih menu apa yang ingin ditampilkan dan pilihan menu akan tampil.
4. Pada menu Materi dan menu Latihan, terdapat beberapa soal yang dapat
dikerjakan oleh user dan user dapat memilih soal apa yang ingin dikerjakan, kemudian soal akan tampil.
5. Setelah itu user mengerjakan soal pilihannya, kemudian akan tampil nilai yang
diperoleh. 6.
Pada proses Pencarian, user memasukkan data pencarian berupa materi ke dalam kotak pencarian, kemdian sistem akan mencari, jika materi yang
dimasukkan ada, maka hasil pencarian akan ditampilkan.
Universitas Sumatera Utara
3.3.3.5 DFD Level 2 untuk Proses Penyelesaian Soal
DFD level 2 untuk penjabaran dari proses Penyelesaian Soal dapat dilihat pada gambar 3.8.
P5.1 Penyelesaian
Soal dari Menu 5.2
Periksa jawaban
Pilihan_soal Jawaban_user
Soal Jawaban_benar
Gambar 3.8 Diagram Level 2 untuk Proses Penyelesaian Soal
Berikut ini merupakan penjelasan dari proses gambar 3.8.
1. Proses Penyelesaian Soal pada level 2 terbagi menjadi dua proses, yaitu
Penyelesaian Soal dari Menu dan proses Periksa Jawaban. 2.
Sebelum menjawab soal, user terlebih dahulu memilih soal yang ingin dikerjakan, lalu soal pilihan akan tampil.
3. Setelah soal pilihan tampil, user menyelesaikan soal dengan memasukkan
jawaban yang dianggap benar. 4.
Kemudian jawaban diperiksa, kemudian akan tampil nilai berdasarkan jawaban benar yang dijawab oleh user.
3.3.3.6 DFD Level 2 untuk Proses Pencarian
DFD level 2 untuk penjabaran dari proses Pencarian dapat dilihat pada gambar 3.9.
Universitas Sumatera Utara
P6.1 Pemasukan Data
P6.2 Pencarian Data
Data_pencarian materi
Data_pencarian materi
Hasil_pencarian
Gambar 3.9 Diagram Level 2 untuk Proses Pencarian
Berikut ini merupakan penjelasan dari proses gambar 3.9.
1. Proses Pencari pada level 1 menurunkan dua proses pada level 2, Pemasukan
Data dan Pencarian Data. Pada proses ini, user memasukkan data pencarian berupa materi dan sistem akan mencari materi yang dicari.
2. Sistem akan mencari data pencarian, jika data ada, maka akan ditampilkan
hasil pencarian.
3.3.3.7 DFD Level 2 untuk Proses Logout
DFD level 2 untuk penjabaran proses Logout dapat dilihat pada gambar 3.10.
P7.1 Logout
Data_user nama, password, status
Konfirmasi_logout
Gambar 3.10 Diagram Level 2 untuk Proses Logout
Berikut ini merupakan penjelasan dari gambar 3.10.
1. Proses Logout pada level 1 hanya menurunkan satu proses pada level 2, yaitu
proses Logout juga. 2.
Pada proses ini akan diperiksa data user yang melakukan Logout dan sistem akan memberi konfirmasi logout kepada user.
Universitas Sumatera Utara
3.4 Kamus Data Data Dictionary Aplikasi