bab iii

36
30 BAB III RANCANGAN SISTEM 3.1 Analisa Masalah Dalam menganalisa suatu media website Pembelajaran perlu diketahui permasalahan yang terjadi sehingga dapat dibuat suatu pemecahan masalah yang lebih baik yang dapat memenuhi kebutuhan dari pemakai. Kurikulum pendidikan di SDIT AL-USWAH mengalami perubahan dan pengembangan dari tahun ke tahun. Siswa dituntut khususnya pelajaran matematika untuk lebih aktif dan kreatif agar mampu menyerap mata pelajaran yang diberikan oleh sekolah. Kondisi tersebut mendorong para siswa untuk melakukan berbagai upaya agar mampu memenuhi kompetensi standart pendidikan. Permasalahan yang dihadapi siswa dalam melakukan upaya tersebut adalah: 1. Ketika pembimbingan di luar sekolah siswa harus mendatangi tempat bimbingan yang lokasi jauh dari rumah siswa. 2. Memerlukan biaya dalam mengikuti bimbingan luar serta membeli media dukungan dalam belajar seperti kaset pembelajaran dan buku. 3.2 Sistem yang diusulkan Masalah-masalah tersebut dapat diatasi dengan membuat media pembelajaran berbasis web dengan menerapkan fasilitas tutorial materi dan soal

Upload: yudha-alfian-haqqi

Post on 24-Nov-2015

28 views

Category:

Documents


3 download

TRANSCRIPT

  • 30

    BAB III

    RANCANGAN SISTEM

    3.1 Analisa Masalah

    Dalam menganalisa suatu media website Pembelajaran perlu diketahui

    permasalahan yang terjadi sehingga dapat dibuat suatu pemecahan masalah yang

    lebih baik yang dapat memenuhi kebutuhan dari pemakai.

    Kurikulum pendidikan di SDIT AL-USWAH mengalami perubahan dan

    pengembangan dari tahun ke tahun. Siswa dituntut khususnya pelajaran

    matematika untuk lebih aktif dan kreatif agar mampu menyerap mata pelajaran

    yang diberikan oleh sekolah. Kondisi tersebut mendorong para siswa untuk

    melakukan berbagai upaya agar mampu memenuhi kompetensi standart

    pendidikan.

    Permasalahan yang dihadapi siswa dalam melakukan upaya tersebut adalah:

    1. Ketika pembimbingan di luar sekolah siswa harus mendatangi tempat

    bimbingan yang lokasi jauh dari rumah siswa.

    2. Memerlukan biaya dalam mengikuti bimbingan luar serta membeli

    media dukungan dalam belajar seperti kaset pembelajaran dan buku.

    3.2 Sistem yang diusulkan

    Masalah-masalah tersebut dapat diatasi dengan membuat media

    pembelajaran berbasis web dengan menerapkan fasilitas tutorial materi dan soal

  • 31

    latihan khusus kelas 1 sekolah dasar. Memudahkan siswa belajar di rumah. Media

    website tersebut memiliki fasilitas kemudahan sebagai berikut :

    Terdapat fasilitas admin yang membantu siswa dan guru membuat username

    dan password untuk mengakses website pembelajaran.

    Terdapat fasilitas menu login untuk siswa

    Terdapat fasilitas menu login untuk guru

    Fasilitas yang di peroleh siswa setelah login adalah materi dengan tutorial

    flash interaktif, belajar dengan latihan ujian essay, belajar dengan latihan ujian

    pilihan ganda dan grafik hasil nilai ujian.

    Fasilitas yang di peroleh guru adalah guru dapat memberikan soal-soal latihan

    untuk digunakan siswa latihan belajar di rumah dengan menginputkan ujian

    dan materi melalui website ini dan melihat grafik nilai siswa sesuai guru

    wali kelas masing-masing.

    3.3 Rancangan website pembelajaran

    Pada rancangan website pembelajaran ini akan di sediakan beberapa hak

    akses untuk admin, guru dan siswa antara lain :

    1. Admin

    - Memasukkan data akun login untuk siswa dan login

    - Memasukkan data akun admin

    - Menambahkan data tahun ajaran baru dan pembagian kelas

    - Memasukkan data tema

    2. Guru

  • 32

    - Memasukkan materi animasi interaktif

    - Memasukkan soal ujian sesuai dengan materi yang sudah diajarkan

    - terdapat fasilitas melihat grafik nilai setiap siswa

    3. Siswa

    - siswa dapat belajar dengan materi yang di berikan guru

    - siswa dapat latihan ujian

    - siswa dapat melihat hasil nilai di grafik nilai

    3.4 Rancangan Sistem website

    Rincian yang dilakukan pada tahap perancangan sistem ujian ini yaitu

    pembuatan DFD (Data Flow Diagram), rancang database, relasi antar tabel,

    perancangan tampilan/interface untuk menu dan form.

    3.4.1 Context Diagram

    Gambar 3.1 Context Diagram Sistem Website

    data hasil nilai ujian siswa pilihan ganda

    data pem bagian kelas

    data adm in

    data_tem a

    data_tahun_ajaran_baru

    data_masukkan_m ateri

    data m asukkan u jian pilihan ganda

    Data jawaban essaydata jawaban pilihan ganda

    data m ateri pembelajaran

    data ujian pilihan ganda

    data ujian essay

    data tema ujian essay

    data hasil nilai ujian siswa essay

    data vertifikasi register guru

    data vertifikasi register id guru

    data pendaftaran dari guru

    data m asukkan u jian essay

    data pendaftaran id guru

    data hasil nilai ujian essay

    data nilai ujian pilihan ganda

    data tema ujian p ilihan ganda

    data m ateri pembelajaran

    vertifikasi_register_siswa

    data vertifikasi register id siswa

    data pendaftaran dari siswa

    data pendaftaran siswa

    1

    Sistem Informasi

    pembelajaran berbasis

    web

    Siswa

    Guru

    Admin

  • 33

    3.4.2 Data Flow Diagram (DFD) Level 1

    Gambar 3.2 Data Flow Diagram (DFD) Level 1 Sistem Website

    data gurudata gurudata guru

    data siswa

    data siswa

    data siswa

    data adm in

    data m ateri

    data tahun ajaran untuk siswa

    data koreksi essay

    data soal essay

    data ujian essay

    data koreksi essay

    data soal essay

    data ujian essay

    data koreksi mu ltichoice

    data soal m ultichoice

    data ujian multichoice

    data koreksi mu ltichoice

    data soal m ultichoice

    data ujian multichoice

    data ajaran

    data subtema

    data nilai ujian pilihan ganda

    data nilai ujian siswa essay

    data nilai ujian

    data nilai ujian essay

    data m ateri

    data jawaban ujian pilihan gandadata ujian pilihan ganda

    data ujian pilihan ganda

    data ujian pilihan ganda

    data ajaran

    data jawaban ujian essay

    data ujian essay

    data ujian essay

    data tema

    data subtema

    data ujian essay

    data m emilih tema

    data m ateri

    data ajaran

    data m ateri

    data tema untuk m ateri

    data tema kurikulum

    data kelas untuk siswa

    data guru untuk siswa

    data tahun ajaran

    data ajaran baru

    data subtema

    data tema

    tahun pem bagian kelas

    data tahun ajaran baru

    data kelas

    data guru

    data akun login admin

    data guru

    data siswadata adm in

    data vertifikasi id akun guru

    data vertifikasi id akun guru

    data pendaftaran guru

    data pendaftaran guru

    data vertifikasi id akun siswa

    data vertifikasi id akun siswa

    data pendaftaran siswadata pendaftaran siswa

    1

    Pendaftaran akun

    siswaadmin

    guru

    admin

    siswa

    guru

    2

    Tugas admin

    +

    kelas

    tahun

    ajaran

    tema

    subtema

    3

    Materi

    pembelajaran

    +

    materi

    4

    ujian essay

    5

    ujian pilihan ganda

    ujian multichoice

    soal m ultichoice

    koreksi_m c

    ujian essay

    soal essay

    koreksi essay

  • 34

    3.4.3 Data Flow Diagram (DFD) Level 2

    Gambar 3.3 Data Flow Diagram (DFD) Level 2 Tugas admin

    Gambar 3.4 Data Flow Diagram (DFD) Level 2 memasukkan materi

    Gambar 3.5 Data Flow Diagram (DFD) Level 2 ujian essay

  • 35

    3.5 Rancangan Database

    Rincian yang dilakukan pada tahap perancangan database ujian ini

    menggunakan Entity Relationship Diagram (ERD) dari DFD yang telah

    dirancang.

    3.5.1 Entity Relationship Diagram (ERD) Conceptual

    Gambar 3.7 Entity Relationship Diagram (ERD) Conceptual

    Relation_315

    Relation_233

    Relation_229

    Relation_221

    Relation_169

    Relation_103

    Relation_102

    Relation_101

    Relation_92

    Relation_91

    Relation_90

    Relation_89

    Relation_66

    Relation_65

    Relation_55

    Relation_41

    Relation_40

    Relation_39

    Relation_25

    Relation_19

    siswa

    nis_siswa

    nama_siswa

    username

    password

    angkatan

    guru

    nip_guru

    nama_guru

    password

    username

    kelas

    id_kelas

    nama_kelas

    ujian_essay

    id_ujian_essay

    nama_ujian

    jumlah_soal

    tema

    kode_tema

    tema

    soal_essay

    id_soal

    soal

    gambar

    jawaban1

    jawaban2

    jawaban3

    koreksi_essay

    id_koreksi_essay

    nilai

    tanggal

    jam

    ujian_multichoice

    id_ujian_mc

    nama_ujian

    jml_soal

    jawaban_multichoice

    id_jawaban

    jawaban

    koreksi_mc

    id_koreksi_mc

    nilai

    tanggal

    jam

    ajaran

    id_ajaran

    soal_multichoice

    id_soal_mc

    soal

    gambar

    jawaban_benar

    tahun

    id_tahun

    tahun

    semester

    status

    materi

    id_materi

    nama_materi

    data_materi

    subtema

    id_subtema

    kode_subtema

    nama_subtema

    Gambar 3.6 Data Flow Diagram (DFD) Level 2 ujian pilihan ganda

  • 36

    3.5.2 Entity Relationship Diagram (ERD) Physic

    Gambar 3.8 Entity Relationship Diagram (ERD) Physic

    KODE_TEMA = KODE_TEMA

    ID_AJARAN = ID_AJARAN

    KODE_TEMA = KODE_TEMA

    ID_TAHUN = ID_T AHUNID_KELAS = ID_KELAS

    ID_KELAS = ID_KELAS

    ID_SOAL_MC = ID_SOAL_MC

    ID_UJIAN_MC = ID_UJIAN_MC

    NIS_SISWA = NIS_SISWA

    ID_UJIAN_MC = ID_UJIAN_MC

    NIP_GURU = NIP_GURU

    NIP_GURU = NIP_GURU

    ID_UJIAN_ESSAY = ID_UJIAN_ESSAY

    NIS_SISWA = NIS_SISWA

    ID_UJIAN_ESSAY = ID_UJIAN_ESSAY

    NIP_GURU = NIP_GURU

    ID_KELAS = ID_KELASKODE_TEMA = KODE_TEMA

    ID_KELAS = ID_KELAS

    NIP_GURU = NIP_GURU

    SISWA

    NIS_SISWA Text(30)

    NIP_GURU Text(30)

    ID_KELAS Text(30)

    NAMA_SISWA Text(50)

    USERNAME Text(40)

    PASSWORD Text(30)

    ANGKATAN Integ er

    GURU

    NIP_GURU Text(30)

    NAMA_GURU Text(40)

    PASSWORD Text(30)

    USERNAME Text(40)

    KELAS

    ID_KELAS Text(30)

    NAMA_KELAS Text(40)

    UJIAN_ESSAY

    ID_UJIAN_ESSAY Text(30)

    KODE_TEMA Text(40)

    ID_KELAS Text(30)

    NAMA_UJIAN Text(40)

    JUM LAH_SOAL Integ er

    NIP_GURU Text(30)

    TEM A

    KODE_TEMA Text(40)

    TEM A Text(40)

    SOAL_ESSAY

    ID_SOAL Text(30)

    ID_UJIAN_ESSAY Text(30)

    SOAL Text(300)

    GAMBAR Text(40)

    JAWABAN1 Text(200)

    JAWABAN2 Text(200)

    JAWABAN3 Text(200)

    KOREKSI_ESSAY

    NIS_SISWA Text(30)

    ID_UJIAN_ESSAY Text(30)

    ID_KOREKSI_ESSAY Text(40)

    NILAI Integ er

    TANGGAL DateTime

    JAM DateTime

    UJIAN_MULTICHOICE

    ID_UJIAN_MC Text(30)

    NIP_GURU Text(30)

    NAMA_UJIAN Text(40)

    JM L_SOAL Integ er

    ID_KELAS Text(30)

    JAWABAN_MULTICHOICE

    ID_JAWABAN Text(30)

    ID_SOAL_MC Text(30)

    JAWABAN Text(40)

    KOREKSI_MC

    ID_KOREKSI_MC Text(30)

    ID_UJIAN_MC Text(30)

    NIS_SISWA Text(30)

    NILAI Integ er

    TANGGAL DateTime

    JAM DateTime

    AJARAN

    ID_AJARAN Text(30)

    NIP_GURU Text(30)

    ID_KELAS Text(30)

    ID_TAHUN Text(30)

    SOAL_MULTICHOICE

    ID_SOAL_MC Text(30)

    ID_UJIAN_MC Text(30)

    SOAL Text(300)

    GAMBAR Text(40)

    JAWABAN_BENAR Text(200)

    TAHUN

    ID_TAHUN Text(30)

    TAHUN Integ er

    SEM ESTER Text(40)

    STATUS Text(40)

    MATERI

    ID_MATERI Text(30)

    KODE_TEMA Text(40)

    ID_AJARAN Text(30)

    NAMA_MATERI Text(30)

    DATA_M ATERI Text(40)

    SUBTEMA

    ID_SUBTEMA Integ er

    KODE_TEMA Text(40)

    KODE_SUBTEM A Text(30)

    NAMA_SUBTEMA Text(30)

  • 37

    3.5.3 Desain Database

    Model relational seperti yang digambarkan dalam Entity Relationship Diagram

    (ERD) di atas dipresentasikan dalam tabel-tabel database sebagai berikut:

    Primary key : nip_guru

    Tabel 3.1 Tabel guru

    No Nama Tipe Data Panjang Keterangan

    1 nip_guru varchar 50 Nip guru

    2 Nama_guru varchar 40 Nama guru

    2 Password varchar 30 Password login

    guru

    4 Username varchar 40 Username guru

    Primary key : id_siswa

    foreign key : nip_guru, id_kelas

    Tabel 3.2 Tabel Siswa

    No Nama Tipe Data Panjang Keterangan

    1 nrp_siswa Varchar 30 nis dari siswa

    2 nip_guru Varchar 30 nip

    2 nama_siswa Varchar 30 nama siswa

  • 38

    3 id_kelas Varchar 50 kelas

    4 Password Varchar 30 password siswa

    5 Username Varchar 40 username siswa

    6 Angkatan interger angkatan siswa

    Primary key : kode_tema

    Tabel 3.3 Tabel tema

    No Nama Tipe Data Panjang Keterangan

    1 Kode_tema varchar 40 Kode tema

    2 Nama_tema varchar 40 Nama tema

    Primary key : id_subtema

    Foreign key : kode_tema

    Tabel 3.4 Tabel subtema

    No Nama Tipe Data Panjang Keterangan

    1 Id_subtema integer - Id subtema

    2 Kode_tema varchar 40 Kode tema

    3 Kode_subtema varchar 40 Kode subtema

    2 Nama_subtema varchar 40 Nama tema

    Primary key : id_kelas

    Foreign key : id_soal_mc

  • 39

    Tabel 3.5 Tabel kelas

    No Nama Tipe Data Panjang Keterangan

    1 id_kelas varchar 30 Kode kelas

    2 Nama_kelas varchar 30 Nama kelas

    Primary key : id_tahun

    Tabel 3.6 Tabel tahun

    No Nama Tipe Data Panjang Keterangan

    1 Id_tahun varchar 40 Kode tahun

    2 tahun varchar 40 Tahun

    3 semester Varchar 40 Semester

    4 Status Varchar 40 status

    Primary key : id_ajaran

    Foreign key : nip_guru, id_kelas,id_tahun

    Tabel 3.7 Tabel ajaran

    No Nama Tipe Data Panjang Keterangan

    1 Id_ajaran varchar 40 Kode tahun

    2 Id_kelas varchar 40 Kode kelas

    3 Id_tahun Varchar 40 Kode tahun

  • 40

    4 Nip_guru Varchar 40 Nip guru

    Primary key : id_materi

    Foreign key : id_ajaran,kode_tema

    Tabel 3.8 Tabel materi

    No Nama Tipe Data Panjang Keterangan

    1 Id_materi varchar 40 Kode tahun

    2 Id_ajaran varchar 40 Kode kelas

    3 Kode_tema Varchar 40 Kode tahun

    4 Nama_materi varchar 40 Nama materi

    5 Data_materi varchar 40 Data materi

    Primary key : id_ujian_mc

    Foreign key : nip_guru, id_kelas

    Tabel 3.9 Tabel ujian multichoice

    No Nama Tipe Data Panjang Keterangan

    1 id_ujian_mc Varchar 30 Kode dari ujian

    2 Nip_guru Varchar 30 Nip guru

    3 id_kelas Varchar 30 Id kelas

    4 Nama_ujian Varchar 40 Nama ujian

  • 41

    Primary key : id_soal_mc

    Foreign key : id_ujian_mc

    Tabel 3.10 Tabel soal multichoice

    No Nama Tipe Data Panjang Keterangan

    1 id_soal_mc varchar 30 Kode soal ujian

    2 Id_ujian_mc varchar 30 Kode dari ujian

    3 Soal Text 500 Soal ujian

    4 Jawaban_benar varchar 500 Jawaban benar

    5 gambar varchar 40 Gambar soal

    Primary key : id_jawaban

    Foreign key : id_soal_mc

    Tabel 3.11 Tabel jawaban mutichoice

    No Nama Tipe Data Panjang Keterangan

    1 id_jawaban varchar 30 Kode jawaban

    2 id_soal_mc varchar 30 Kode soal

    3 Jawaban varchar 40 Jawaban

    Primary key : id_koreksi

    Foreign key : id_ujian id_soal,nis_siswa

  • 42

    Tabel 3.12 Tabel koreksi mc

    No Nama Tipe Data Panjang Keterangan

    1 Id_koreksi_mc varchar 40 Kode koreksi

    2 id_ujian_mc varchar 30 Kode dari ujian

    3 nis_siswa varchar 30 Nis siswa

    4 Tanggal date - Tanggal ujian

    5 Jam time - Jam ujian

    Primary key : id_ujian

    Foreign key : nip_guru,kode tema, id_kelas

    Tabel 3.13 Tabel ujian essay

    No Nama Tipe Data Panjang Keterangan

    1 id_ujian_essay varchar 30 Kode dari ujian

    2 Kode_tema varchar 40 Kode tema

    3 Nip_guru varchar 30 Nip guru

    4 Id_kelas varchar 30 Id kelas

    5 Nama_ujian varchar 30 Kode bab

    Primary key : id_soal_essay

    Foreign key : id_ujian_essay

  • 43

    Tabel 3.14 Tabel soal essay

    No Nama Tipe Data Panjang Keterangan

    1 Id_soal_essay varchar 30 kode soal essay

    2 Id_ujian_essay varchar 30 id ujian

    3 soal Text 500 Soal ujian

    4 Jawaban1 Text 500 isi jawaban alternatif 1

    5 Jawaban2 Text 500 isi jawaban alternatif 2

    6 Jawaban3 Text 500 Isi jawaban alternatif 3

    Primary key : id_koreksi

    Foreign key : id_ujian_essay, nis_siswa

    Tabel 3.15 Tabel koreksi essay

    No Nama Tipe Data Panjang Keterangan

    1 id_koreksi varchar 40 kode koreksi

    2 id_ujian_essay integer 30 kode dari ujian

    3 nis_siswa varchar 30 nis siswa

    4 nilai integer nilai

    5 Tanggal varchar 30 Tanggal ujian

    6 jam varchar 50 Jam ujian

  • 44

    3.6 Desain Navigasi Web

    Desain navigasi web ditujukan untuk memberikan gambaran menu awal

    mengenai aliran akses halaman-halaman di dalam website yang di buat.

    1. Desain Navigasi Web Halaman Utama

    Pada gambar 3.9 Dapat dilihat gambaran menu awal aliran-aliran halaman

    website untuk halaman utama.

    Gambar 3.9 desain navigasi website

    beranda Halaman login

    Hal login siswa Hal login guru

    Hal utama siswa Hal utama siswa

    Logout Logout

    materi belajar ujian essay ujian pilihan ganda grafik nilai input materi masukkan

    ujian essay

    masukkan ujian

    pilihan ganda

    grafik nilai

    siswa

    Tema materi Tema ujian

    essay

    Tema ujian

    pilihan

    ganda

    Tema grafik

    nilai

    memilih

    materi

    memilih

    ujian essay

    memilih ujian

    pilihan ganda

    halaman

    grafik nilai

    form materi masukkan

    soal essay

    masukkan soal

    pilihan ganda

    form

    pencarian

    halaman materi halaman

    ujian essay

    halaman ujian

    pilihan ganda

    halaman

    nilai siswa

    halaman

    grafik nilai

    halaman

    tabel nilai

  • 45

    3.8 Flowchart

    Progam dapat digambarkan melalui suatu diagram yang disebut dengan

    alur atau flowchart. Berikut ini menerangkan alur dari suatu rancangan program,

    untuk lebih jelasnya kita lihat pada gambar:

    1. Flowchart materi belajar

    Gambar 3.10 Materi belajar

    berhasi

    l

    ya

    Tidak

    gagal

    Mulai

    pengecekan id

    login? berhasil

    atau gagal

    Proses

    pembelajaran

    online

    apakah mau

    belajar lagi?

    selesai

    masukkan id siswa

    Pilih tutorial

    pembelajaran

    Pilih tema

    pembelajaran

  • 46

    2. Flowchart Proses Ujian Pilihan ganda

    Gambar 3.11 Flowchart Proses Ujian Pilihan

    ganda

    berhasil

    ya

    Tidak

    gagal

    Mulai

    pengecekan id

    login? berhasil

    atau gagal

    Proses Ujian

    apakah mau

    Ujian lagi?

    selesai

    masukkan id siswa

    Pilih Ujian pilihan

    ganda

    Pilih tema Ujian

  • 47

    3. Flowchart Proses Ujian essay

    Gambar 3.12 Flowchart Ujian essay

    berhasil

    ya

    Tidak

    gagal

    Mulai

    pengecekan id

    login? berhasil

    atau gagal

    Proses Ujian

    apakah mau

    Ujian lagi?

    selesai

    masukkan id siswa

    Pilih Ujian pilihan

    essay

    Pilih tema Ujian

  • 48

    4. Flowchart Proses ujian

    Gambar 3.13 FlowchartProses ujian

    tidak

    ya

    Tidak

    Acak soal

    Acak Jawaban

    atur nomer soal = 0

    Tampil soal dan jawaban

    pilihan ganda

    Menjawab soal

    Mulai

    cek apakah ada

    pertanyaan lagi?

    Selesai

    Soal kuis habis, nilai

    ujian terhitung

    Apakah mau

    ujian lagi ?

    ya

  • 49

    5. Flowchart Proses memasukkan ujian

    Gambar 3.14 Flowchart Memasukkan Ujian

    berhasil

    ya

    Tidak

    gagal

    Mulai

    pengecekan id

    login? berhasil

    atau gagal

    Proses input

    ujianl dan soal

    apakah mau

    input lagi?

    selesai

    masukkan id guru

    Pilih menu Ujian

    inputan ujian

  • 50

    3.8 Rancangan Pembuatan Materi Animasi

    Media pembelajaran ini berisi materi. Materi yang digunakan untuk contoh

    sementara adalah materi tematik kelas 1 SD dengan ruang lingkup tema 1 subtema

    1. Dalam aplikasi terdapat beberapa halaman yaitu Menu Utama, Pilih Menu,

    Halaman Materi

    Menu Utama berisi halaman pembuka, didalamnya terdapat terdapat

    seorang anak yang memandu siswa untuk memilih materi, yaitu :

    Tabel 3.16 Silabus tematik tema 1 subtema 1 kelas 1 SD.

    Materi Pokok Pembelajaran

    tematik tema 1

    Kompetensi Dasar

    Subtema 1 : aku dan teman baru - Perkenalan diri

    - mengenal bilangan 1- 10

    - menghitung banyak teman

    - mengenal huruf

    3.1.1 Skenario.

    Aplikasi media pembelajaran ini berisi materi dan latihan soal. Materi yang

    digunakan adalah materi kelas 1 tema 1 subtema 1.Saat aplikasi dijalankan tampil

  • 51

    menu utama terdapat anak yang memandu siswa memilih menu. Bila lanjut akan

    masuk pada halaman pilih menu. Dalam pilih menu terdapat judul dari setiap

    subtema . Jika memilih materi akan masuk pada halaman materi,

    3.1.2 Storyboard.

    Berikut adalah storyboard dari aplikasi media pembelajaran

    Gambar suara Tombol keterangan

    Tampilan utama materi

    Musik: Crystal

    Flower.mp3

    dan dubing.

    Tombol:

    Cartoon25.wav

    Menu utama

    adalah tampilan

    awal saat

    aplikasi

    dijalankan.

    materi perkenalan diri Musik:

    Track01.mp3

    Tampilan utama

    Materi

    Pengenalan diri

    Musik:

    Track01.mp3

    Tombol:

    Tampilan kedua

    Materi

    Perkenalan diri

    Tabel 3.17 Story Board

  • 52

    Cartoon17.wav

    Cartoon25.wav

    Musik:

    Track01.mp3

    Tampilan ketiga

    Materi

    Perkenalan diri

    Materi mengenal bilangan

    Musik:

    Track01.mp3

    Tombol:

    Cartoon17.wav

    Cartoon25.wav

    Tampilan utama

    Materi

    mengenal

    bilangan

    Materi membilang banyak

    benda

    Musik:

    Track01.mp3

    Tombol:

    Cartoon17.wav

    Cartoon25.wav

    Tampilan kedua

    Materi

    membilang

    banyak teman

    mengenal huruf Musik:

    Track01.mp3

    Tombol:

    Cartoon17.wav

    Cartoon25.wav

    Tampilan utama

    Materi

    mengenal huruf

    :

  • 53

    3.8 Desain Interface website

    Desain interface diberikan kepada halaman-halaman website yang ada.

    3.6.1 Desain Interface Halaman Utama

    Pada saat pengunjung masuk ke halaman web maka halaman pertama yang

    akan tampil ialah halaman beranda seperti di gambar 3.15

    Untuk mengakses website ini guru dan siswa harus memasukkan account

    login yang sudah didaftarkan, tampilan halaman sebelum memasukkan form login

    pada gambar 3.16

    Gambar 3.15 Interface Halaman Utama

    Gambar 3.16 Interface Halaman Login

  • 54

    Setelah guru login, akan muncul tampilan gambar 3.18 yaitu tampilan utama

    halaman guru

    Pada menu memasukkan ujian essay akan tampil halaman memasukkan

    ujian dapat dilihat gambar 3.19

    Gambar 3.18 Interface Halaman Utama

    Guru

    Gambar 3.17 Interface Halaman Login Guru

    Gambar 3.19 Interface Halaman Masukkan Ujian

    Essay

  • 55

    Pada halaman menambahkan ujian, guru juga harus memasukkan beberapa

    soal di setiap ujian. tampilan form memasukkan soal dapat di lihat gambar 3.20

    Selain memasukkan ujian essay guru juga dapat menambahkan ujian pilihan

    ganda dengan memilih menu memasukkan ujian pilihan ganda, tampilan

    memasukkan ujian dapat dilihat pada gambar 3. 21 dan memasukkan soal di setiap

    ujian pilihan ganda dapat dilihat di gambar 3.22 dan tampilan form memasukkan

    soal dapat dilihat di gambar 3.23

    Gambar 3.20 Interface Halaman Masukkan Soal

  • 56

    Gambar 3.21 Interface Halaman Masukkan Ujian Pilihan

    Ganda

    Gambar 3.22 Interface halaman masukkan soal

  • 57

    Guru dapat melihat hasil nilai ujian dengan cara mengetikkan nis siswa yang

    nilainya ingin di lihat, tampilan form pencarian dapat di lihat pada gambar 3.24

    Jika nis siswa yang dimasukkan benar maka akan muncul tabel nilai siswa

    dengan melihatnya dengan 2 tampilan yaitu tampilan tabel dapat dilihat pada

    gambar 3.26 dan tampilan grafik dapat di lihat gambar 3.27

    Gambar 3.23 Interface Halaman Form Soal Pilihan

    Ganda

    Gambar 3.24 Interface Halaman Pencarian

  • 58

    Gambar 3.25 Interface tabel hasil pencarian

    Gambar 3.26 Interface Tabel Nilai Siswa

    Gambar 3.27 Interface Grafik Ujian Siswa

  • 59

    Pada gambar 3.28 adalah tampilan halaman siswa setelah siswa login, pada

    halaman utama siswa di sediakan 4 menu yaitu menu materi belajar dapat dilihat

    pada gambar 3.29 dan gambar 3.30, menu ujian essay dapat dilihat pada gambar

    3.31 dan gambar 3.32, menu pilihan ganda dapat dilihat pada gambar 3.33 dan

    gambar 3.34 dan siswa dapat melihat tabel hasil ujian dapat di lihat pada gambar

    3.35 dan grafik niali ujian dapat di lihat pada gambar 3.34

    Gambar 3.28 Halaman Utama Siswa

    Gambar 3.29 Interface Tabel Memilih Materi

  • 60

    Gambar 3.30 Interface Materi

    Gambar 3.31 Interface Tabel Ujian Siswa

    Gambar 3.32 Interface Tabel Ujian Siswa

  • 61

    Gambar 3.34 Interface tabel hasil nilai ujian

    Gambar 3.33 Interface ujian pilihan ganda

    Gambar 3.35 Interface grafik nilai ujian siswa

  • 62

    Pada halaman admin terdapat 5 menu yaitu menu menambahkan data admin

    tampilan dapat dilihat pada gambar 3.36 dan gambar 3.37, menu menambahkan

    data guru untuk login dapat dilihat pada gambar 3.38 dan gambar 3.39, menu

    menambahkan data siswa dapat dilihat pada gambar 3.40 dan gambar 3.41, menu

    menambahkan data pengajaran dapat dilihat pada gambar 3.42 dan gambar 3.43

    dan gambar 3.44, menu menambahkan data tema dapat di lihat pada gambar 3.45

    dan gambar 3.46

    Gambar 3.36 interface tabel data admin

    Gambar 3.37 Interface Form Tambah Data Admin

  • 63

    Gambar 3.39 Interface Tabel Data Guru

    Gambar 3.38 Interface Form Tambah Data Guru

    Gambar 3.40 Interface Tabel Siswa

  • 64

    Gambar 3.39 Interface Tabel Siswa

    Gambar 3.40 Interface Tabel Data Ajaran Dan Tahun

    Ajaran

    Gambar 3.42 Interface tabel data ajaran dan tahun ajaran

    Gambar 3.41 Interface Form Masukkan Data Siswa

    Gambar 3.43 Interface Form Tambah Data Ajaran

    Baru

  • 65

    Gambar 3.45 Interface Form Tambah Data Tahun

    Ajaran Baru

    Gambar 3.44 Interface Data Tema

    Gambar 3.46 Interface Form Tambah Data Subtema