BAB III

PERANCANGAN APLIKASI PENGENALAN NILAI-NILAI PANCASILA

UNTUK ANAK SEKOLAH DASAR BERBASIS ANDROID

A. Gambaran Umum Aplikasi Pengenalan Nilai-nilai Pancasila Untuk Anak

Sekolah Dasar Berbasis Android

Aplikasi pengenalan nilai-nilai Pancasila untuk anak Sekolah Dasar

berbasis android adalah sebuah aplikasi yang dirancang untuk membantu

pengguna dalam memahami nilai-nilai Pancasila, pengenalan nilai-nilai Pancasila

ini digunakan untuk anak Sekolah Dasar (SD). Aplikasi ini akan memberikan

materi mengenai nilai-nilai Pancasila berserta kuis agar anak Sekolah Dasar

selain memahami materi juga bisa belajar dari kuis yang diberikan.

Aplikasi pengenalan nilai-nilai Pancasila ini dapat digunakan oleh anak

Sekolah Dasar yang ingin belajar pengenalan nilai-nilai Pancasila dan disertakan

kuis sesuai kelas yang ditentukan. aplikasi ini juga dapat membantu mengenalkan

nilai-nilai Pancasila lebih dalam dan mempermudahkan anak Sekolah Dasar

dalam memahami serta belajar yang disertakan kuis yang diberikan. Aplikasi

pengenalan nilai-nilai Pancasila ini memiliki materi dan kuis sesuai untuk materi

anak Sekolah Dasar dan sesuai kelas yang diberikan, dimana pengguna dapat

belajar materi pengenalan nilai-nilai Pancasila serta dapat mengerjakan kuis yang

sudah diberikan untuk memahami dan belajar. Aplikasi ini diharapkan dapat

membantu meningkatkan pemahaman dan juga mempermudahkan anak Sekolah

23
 24

Dasar dalam proses belajar. Aplikasi pengenalan nilai-nilai Pancasila dirancang

sebagai pemberian edukasi kepada pengguna yang ingin mempelajari nilai-nilai

Pancasila beserta kuis yang diberikan.

Aplikasi ini berisi fitur belajar materi, mengerjakan kuis dan pada aplikasi

admin terdapat fitur login Admin, update materi pembelajaran, update kuis

sebagai latihan. Materi pembelajaran yang dipelajari oleh pengguna berupa text

dan video. Penggunaan text dan video digunakan untuk membantu pengguna

dalam belajar sehingga pengguna dapat mempelajarinya dengan lebih mudah.

Dan terdapat soal kuis yang disesuaikan dengan tingkatan kelasnya. Berikut

gambaran umum aplikasi pengenalan nilai-nilai Pancasila untuk anak Sekolah

Dasar berbasis android:

GAMBAR 3.1
GAMBARAN UMUM APLIKASI PENGENALAN NILAI-NILAI PANCASILA
UNTUK ANAK SEKOLAH DASAR BERBASIS ANDROID

Sumber: Data Olahan, 2023

 25

Pada Gambar 3.1 dapat dilihat bahwa terdapat dua aktor yaitu anak

Sekolah Dasar (SD) sebagai pengguna yang akan belajar mengenai materi dan

mengakses materi dan kuis. Dan aplikasi admin yang dirancang untuk admin

meng-update materi pembelajaran dan kuis. Terdapat dua aktivitas dalam aplikasi

ini, yaitu pembelajaran berupa materi dan kuis yang dilakukan pengguna melalui

pembelajaran dan pengguna juga bisa memilih materi dan kuis sesuai kelas yang

diberikan, dan admin dapat melakukan update materi pembelajaran dan kuis.

B. Analisis Sistem

1. Identifikasi Masalah

Analisis sistem merupakan suatu proses penting dalam siklus hidup

pembangunan sistem yang bertujuan untuk memahami, mempelajari, dan

menganalisa sistem yang ada saat ini. Dengan melakukan analisis sistem

secara baik dan benar, akan memungkinkan pengembangan sistem yang lebih

baik dan efektif di masa yang akan datang. Analisis sistem meliputi rencana

input dan rencana output, yang merupakan hasil dari proses akhir dari sistem

yang dibangun, terlepas dari apakah sesuai dengan yang dirancang. Analisis

sistem juga merupakan gambaran awal bagi penulis dan pengguna sistem

tentang bagaimana sistem yang akan dikembangkan.

 26

Pada pengembangan aplikasi pengenalan nilai-nilai Pancasila untuk

anak sekolah dasar ini dilakukan analisis sistem untuk mengetahui apa saja

kebutuhan sistem sebelum dibuat. Analisis yang akan dilakukan adalah

analisis berupa perancangan sistem, kebutuhan data sebagai pendukung, data

yang akan diolah, setelah itu hasil dari proses tersebut dapat dilihat berupa

text, gambar dan video sebagai informasi yang berguna dan bermanfaat bagi

pengguna.

2. Analisa Pemecahan Masalah

Aplikasi pengenalan nilai nilai Pancasila untuk anak Sekolah Dasar

yang dirancang oleh penulis ini dibuat dengan mencari referensi dari

beberapa media seperti Youtube, Google dan media lainnya yang

berhubungan dengan aplikasi pengenalan nilai-nilai Pancasila untuk anak

sekolah dasar berbasis android, mempelajari tutorial pembuatan aplikasi

android dan desain aplikasi interaktif. Dalam proses pengumpulan materi dari

pengenalan nilai-nilai Pancasila, penulis mengumpulkan data dari berbagai

sumber dan menganalisis data tersebut dengan menggunakan teknik analisis

berorientasi objek. Untuk menganalisis perancangan aplikasi, penulis

menggunakan teknik pemodelan Unified Modelling Language (UML). Selain

itu, metode perancangan sistem yang digunakan penulis untuk merancang

aplikasi pengenalan nilai-nilai Pancasila untuk anak sekolah dasar berbasis

android menggunakan pemrograman framework flutter versi 2.19.2 dan

diimplementasikan pada OS Android 8.0 (Pie) ke atas.

 27

C. Perancangan Unified Modeling Language (UML)

Pada perancangan sebuah aplikasi diperlukan sebuah gambaran mengenai

aplikasi yang akan dibuat dan untuk memberikan gambaran mengenai aplikasi

yang akan dibuat menggunakan sistem berorientasi objek yaitu UML.

Menggunakan beberapa diagram seperti diagram use case, diagram aktivitas,

diagram urutan, dan diagram kelas. Berikut adalah penjelasan singkat mengenai

masing-masing diagram yang dapat digunakan, meliputi:

1. Diagram Use Case

Diagram use case digunakan untuk mendeskripsikan interaksi antara

pengguna dan admin dengan sistem informasi yang dibuat secara berurutan

dalam aplikasi yang dirancang. Diagram use case yang telah dirancang

sebagai berikut:

GAMBAR 3.2
DIAGRAM USE CASE APLIKASI

Sumber: Data Olahan, 2023

 28

Gambar 3.2 diagram use case di atas, dapat dilihat terdapat dua (2)

aktor, yaitu admin dan pengguna. Use case ini terdiri atas empat (4)

komponen utama yaitu admin terdiri dari update materi kelas 1-3, materi

kelas 4-6, update kuis kelas 1-3, kuis kelas 4-6, untuk pengguna terdiri dari

belajar materi kelas 1-3, belajar materi kelas 4-6, dan mengerjakan kuis kelas

1-3, mengerjakan kuis kelas 4-6. Berikut ini penjelasan singkat sebagai

berikut:

a. Admin

Pada role admin terdapat fitur update materi dan fitur update kuis,

admin dapat memperbarui atau meng-update dengan melakukan login

terlebih dahulu untuk bisa mengakses menu update materi dan kuis yang

tersedia pada perancangan aplikasi ini sebagai berikut:

1) Update Materi

Pada fitur ini terdapat 2 menu yaitu update materi kelas 1-3

untuk siswa kelas 1-3, materi kelas 4-6 untuk siswa kelas 4-6. Menu

ini berfungsi sebagai pembaharuan (update) terhadap materi yang

akan disimpan ke dalam database.

2) Update Kuis

Pada fitur ini terdapat 2 menu yaitu kuis kelas 1-3 dan kuis

kelas 4-6. Menu ini berfungsi sebagai pembaharuan (update) terhadap

kuis yang akan disimpan ke dalam database.

 29

b. Pengguna

Pada role pengguna, fitur yang dapat dipilih pada perancangan

aplikasi ini sebagai berikut:

1) Belajar Materi

Pada fitur ini terdapat dari 2 menu yaitu materi kelas 1-3

untuk siswa kelas 1-3, materi kelas 4-6 untuk siswa kelas 4-6 yang

diperlukan untuk implementasi proses pembelajaran, materi

pembelajaran merupakan segala bentuk materi yang digunakan

sebagai alat bantu oleh tenaga pendidikan untuk segala aktivitas

belajar.

2) Mengerjakan Kuis

Pada fitur ini terdapat 2 menu yaitu kuis kelas 1-3 dan kuis

kelas 4-6, strategi ini yang diberikan terhadap peserta didik dengan

memberikan soal-soal pada proses pembelajaran yang berghubungan

dengan materi yang telah dipelajari dengan tujuan untuk mengukur

tingkat pemahaman peserta didik. Pada fitur mengerjakan kuis,

pengguna dapat memilih kuis sesuai kelas dan diberikan berupa soal

pilihan ganda untuk kelas 1-3 dan pilihan ganda serta essay untuk

kelas 4-6.

2. Diagram Aktivitas
 30

Diagram aktivitas berfungsi untuk menampilkan atau memperlihatkan

urutan aktivitas pada aplikasi yang dibuat. Diagram ini menggambarkan

semua aktivitas yang terjadi pada diagram use case pada Gambar 3.2, antara

lain:

a. Diagram Aktivitas Belajar Materi

GAMBAR 3.3
DIAGRAM AKTIVITAS BELAJAR MATERI

Sumber: Data Olahan, 2023

Gambar 3.3 merupakan diagram aktivitas belajar materi dari

aplikasi yang akan dibuat. Pada diagram ini menjelaskan dimana

pengguna dapat memilih materi yang ingin dipelajari pada menu belajar

materi. Terdapat menu belajar materi kelas 1-3 dan materi kelas 4-6. Jika

pengguna memilih menu materi kelas 1-3 maka aplikasi akan

menampilkan materi kelas 1-3 berupa video materi dan teks pembahasan

materi. Jika yang dipilih menu materi kelas 4-6 maka akan menampilkan

materi kelas 4-6.

 31

b. Diagram Aktivitas Kuis

GAMBAR 3.4
DIAGRAM AKTIVITAS KUIS

Sumber: Data Olahan, 2023

Gambar 3.4 merupakan diagram aktivitas mengerjakan kuis dari

aplikasi yang akan dibuat. Pada gambar diagram aktivitas mengerjakan

kuis dapat dilihat setelah pengguna membuka aplikasi, pengguna dapat

memilih menu kuis kelas 1-3 atau kuis kelas 4-6, kemudian aplikasi akan

menampilkan soal kuis. Jika menu yang dipilih adalah kuis kelas 1-3

maka akan tampil kuis berupa pilihan ganda. Jika yang dipilih adalah

menu kuis kelas 4-6 maka akan tampil kategori kuis berupa pilihan ganda

dan essay. Pengguna dapat menentukan jawaban dari setiap soal yang

diberikan. Kemudian aplikasi akan memvalidasi setiap jawaban yang

 32

dipilih pengguna dan menampilkan respon jika jawaban benar atau

salah. Kemudian pengguna dapat mengerjakan soal kuis berikutnya.

c. Diagram Aktivitas Login Admin

GAMBAR 3.5
DIAGRAM AKTIVITAS LOGIN ADMIN

Sumber: Data Olahan, 2023

Gambar 3.5 merupakan diagram aktivitas login admin dari

aplikasi yang akan dibuat. Pada diagram ini menjelaskan dimana admin

diarahkan pada menu login admin seperti pada diagram aktivitas pada

Gambar 3.5. Pada form login admin, admin diminta untuk memasukkan

username dan password. Kemudian aplikasi akan melakukan validasi

username dan password yang dimasukkan admin. Jika username dan

 33

password valid, maka admin akan diarahkan ke halaman update materi.

Jika username dan password tidak valid, admin akan dikembalikan ke

halaman login.

d. Diagram Aktivitas Update Materi

GAMBAR 3.6
DIAGRAM AKTIVITAS UPDATE MATERI

Sumber: Data Olahan, 2023

Gambar 3.6 merupakan diagram aktivitas update materi dari

aplikasi yang akan dibuat. Pada diagram ini menjelaskan dimana admin

diarahkan pada menu update materi seperti pada diagram aktivitas pada

Gambar 3.6. Admin dapat memilih menu update materi dan memasukkan

data pada form update materi untuk melakukan update materi. Aplikasi

akan melakukan validasi data, jika data yang dimasukkan valid maka data
 34

akan ada pemberitahuan proses update berhasil dan data disimpan ke

database. Jika tidak valid akan ada pemberitahuan proses update gagal.

Terdapat 2 aksi yang dapat dilakukan admin yaitu edit dan hapus materi.

Jika proses edit dan hapus berhasil maka data materi pada database akan

terupdate.

e. Diagram Aktivitas Update Kuis

GAMBAR 3.7
DIAGRAM AKTIVITAS UPDATE KUIS

Sumber: Data Olahan, 2023

Gambar 3.7 merupakan diagram aktivitas update kuis dari

perancangan aplikasi yang akan dibuat. Admin dapat meng-update kuis

dengan memilih menu update kuis kemudian memasukkan soal kuis

 35

sesuai kelas. Terdapat form kuis pilihan ganda untuk kelas 1-3 dan kelas 4-

6 dan form kuis essay untuk kelas 4-6. pada form upadate kuis. Aplikasi

akan melakukan validasi data, jika data yang dimasukkan valid maka akan

ada pemberitahuan proses menyimpan soal kuis berhasil. Jika tidak valid

akan ada pemberitahuan proses menyimpan soal kuis gagal. Terdapat 2 aksi

yang dapat dipilih admin yaitu edit dan hapus data. Jika proses edit dan

hapus berhasil maka data kuis pada database akan terupdate.

3. Diagram Urutan

Diagram urutan menggambarkan kelakuan objek pada use case

dengan mendeskripsikan waktu hidup objek dan message yang dikirimkan

dan diterima antar objek. Berikut merupakan diagram urutan yang digunakan

dalam merancang aplikasi ini:

a. Diagram Urutan Belajar Materi

 36

GAMBAR 3.8
DIAGRAM URUTAN BELAJAR MATERI

Sumber: Data Olahan, 2023

Gambar 3.8 merupakan diagram urutan dari fitur belajar materi.

dimana pengguana dapat memilih materi yang ingin dipelajarinya. Jika

pengguna memilih menu materi kelas 1-3 maka aplikasi akan

menampilkan materi berupa video pembahasan dan text pembahasan

singkat tentang materi yang dibahas. Jika pengguna memilih materi kelas

4-6 maka aplikasi akan menampilkan materi kelas 4-6.

b. Diagram Urutan Mengerjakan Kuis

 37

GAMBAR 3.9
DIAGRAM URUTAN MENGERJAKAN KUIS

Sumber: Data Olahan, 2023

Gambar 3.9 merupakan diagram urutan dari fitur mengerjakan

kuis. Dimana pengguna dapat memilih soal kuis yang hendak

dikerjakannya. Jika pengguna memilih menu kuis kelas 1-3, maka aplikasi

akan menampilkan kuis kelas 1-3. Jika pengguna memilih menu kuis

kelas 4-6, maka aplikasi akan menampilkan kuis kelas 4-6.

c. Diagram Urutan Login Admin

 38

GAMBAR 3.10
DIAGRAM URUTAN LOGIN ADMIN

Sumber: Data Olahan, 2023

Sumber: Data Olahan, 2023

Gambar 3.10 merupakan diagram urutan dari login admin. Dimana

untuk dapat melakukan olah data, admin terlebih dahulu membuka

aplikasi admin dan melalui proses login. Admin diminta untuk

memasukkan username dan password yang sudah diberikan. Kemudian

system akan mengecek username dan password apakah sudah sesuai

dengan yang di database. Jika username dan password sesuai makan

admin akan diarahkan ke halaman update materi. Jika username dan

password yang diinputkan salah maka aplikasi akan memberikan pesan

username dan password salah.

 39

d. Diagram Urutan Update Materi

GAMBAR 3.11
DIAGRAM URUTAN UPDATE MATERI

Sumber: Data Olahan, 2023

Gambar 3.11 merupakan diagram urutan dari update materi. Pada

halaman ini admin dapat memasukkan materi kemudian mengklik tombol

upload. System akan mengecek kelas yang akan di-inputkan dan mencari

apakah sudah ada kelas yang dimasukkan sebelumnya ke database. Jika

kelas sudah ada di database maka akan menampilkan pesan gagal upload.
 40

Jika kelas yang di-input-kan belum ada pada database maka akan

menampilkan pesan upload sukses. Aksi yang dapat dilakukan admin

yaitu edit dan hapus data. Jika proses hapus dan edit data berhasil maka

data materi pada database akan ter-update.

e. Diagram Urutan Update Kuis

GAMBAR 3.12
DIAGRAM URUTAN UPDATE KUIS

Sumber: Data Olahan, 2023

Gambar 3.12 merupakan diagram urutan dari update kuis. Pada

halaman ini admin dapat memasukkan soal kuis berupa pilihan ganda
 41

untuk kelas 1-3 dan kelas 4-6 dan soal essay untuk kelas 4-6. Kemudian

menekan tombol simpan. Jika proses simpan data berhasil maka akan ada

pesan berhasil disimpan, jika gagal maka akan ada pesan gagal disimpan.

Aksi yang akan dilakukan admin adalah edit dan hapus data. Jika proses

edit dan hapus data berhasil maka data kuis pada database akan terupdate.

GAMBAR 3.13
DIAGRAM KELAS APLIKASI

Sumber: Data Olahan, 2023

D. Perancangan Database

Untuk merancang database sebuah aplikasi pengenalan nilai-nilai

Pancasila untuk anak sekolah dasar berbasis android, pertama-tama perlu

 42

memahami struktur data yang akan digunakan. Struktur data ini akan digunakan

untuk menyimpan informasi mengenai nilai-nilai Pancasila dan definisinya dalam

pengenalan nilai-nilai Pancasila. Berikut ini adalah struktur database pada

aplikasi yang dirancang yaitu tabel admin, tabel materi dan tabel kuis:

1. Kamus Data

a. tbl_admin

id_admin =11

id_username =20

id_password =20

b. tbl_materi

id_materi =11

id_kelas =3

id_judul =50

id_pembahasan =500

id_video url =20

id_video name =16

id_create at =6

id_admin =11

c. tbl_kuis pg

id_kuis pg =11

id_kelas =3
 43

id_pertanyaan =255

id_pilihan a =255

id_pilihan b =255

id_pilihan c =255

id_pilihan d =255

id_pilihan =255

id_jawaban json =255

id_create at =6

id_admin =11

d. tbl_kuis essay

id_kuis essay =11

id_kelas =3

id_pertanyaan =255

id_jawaban =255

id_jawaban json =255

id_creat at =6

TABEL 3.1
STRUKTUR TABEL ADMIN

Nama Field Tipe Data Ukuran Keterangan

Id Integer 11 Primary key
Username VarChar 20 Username admin
Password VarChar 20 Password admin
Sumber: Data Olahan, 2023
 44

TABEL 3.2
STRUKTUR TABEL MATERI

Nama Field Tipe Data Ukuran Keterangan

Id Integer 11 Primary key
kelas VarChar 3 Kelas yang dipilih
Judul VarChar 50 Judul materi
Pembahasan VarChar 500 Pembahasan materi
video_url VarChar 20 URL Video
video_name VarChar 16 judul video
create_at TimeStamp 6 Waktu dibuat
id_admin Integer 11 Foreign key
Sumber: Data Olahan, 2023

TABEL 3.3
STRUKTUR TABEL KUIS_PG

Nama Field Tipe Data Ukuran Keterangan

Id Integer 11 Primary key
kelas VarChar 3 Kelas yang dipilih
Pertanyaan Text 255 Pertanyaan kuis
pilihan_a Text 255 Pilihan A
pilihan_b Text 255 Pilihan B
pilihan_c Text 255 Pilihan C
pilihan_d Text 255 Pilihan D
Jawaban Text 255 Jawaban pertanyaan
jawaban_json Text 255 Jawaban bentuk json
create_at TimeStamp 6 Waktu dibuat
id_admin Integer 11 Foreign key
Sumber: Data Olahan, 2023

TABEL 3.4
STRUKTUR TABEL KUIS_ESSAY

Nama Field Tipe Data Ukuran Keterangan

Id Integer 11 Primary key
kelas VarChar 3 Kelas yang dipilih
Pertanyaan Text 255 Pertanyaan kuis
Jawaban Text 255 Jawaban pertanyaan
jawaban_json Text 255 Jawaban bentuk json
 45

create_at TimeStamp 6 Waktu dibuat

id_admin Integer 11 Foreign key
Sumber: Data Olahan, 2023

E. Perancangan Interface

Perancangan user interface merupakan sebuah rancangan gambaran

mengenai aplikasi yang akan dirancang dan perancangan dibuat untuk

mempermudah atau membantu pengguna dalam berinteraksi dengan aplikasi

yang dibuat bertujuan untuk menyajikan pengalaman pengguna yang baru,

efisien, dan menyenangkan. Berikut adalah perancangan user interface pada

aplikasi pengenalan nilai-nilai Pancasila untuk anak sekolah dasar berbasis

android:

1. Rancangan Interface Splash Screen

Aplikasi ini menggunakan splash screen sebagai tampilan awal dari

aplikasi yang akan menampilkan logo maupun nama aplikasi setiap kali

aplikasi akan dijalankan. Pada saat aplikasi dioperasikan maka aplikasi akan

menampilkan splash screen seperti pada gambar berikut:

GAMBAR 3.14
RANCANGAN INTERFACE SPLASH SCREEN
 46

Sumber: Data Olahan, 2023

2. Rancangan Interface Home

Setelah aplikasi menampilkan splash screen dalam beberapa saat

aplikasi akan menampilkan layout utama dari aplikasi. Pada Gambar 3.15 ini

merupakan interface pada layout utama pada aplikasi yang dirancang dengan

menu-menu yaitu menu materi kelas 1-3, menu materi kelas 4-6, kuis kelas 1-

3 dan menu kelas 4-6. Pengguna dapat memilih menu sesuai keinginannya.

GAMBAR 3.15
RANCANGAN INTERFACE HOME

Sumber: Data Olahan, 2023

3. Rancangan Interface Halaman Materi 1-3

Jika pada halaman home pengguna memilih kelas 1-3, maka aplikasi

akan menampilkan halaman detail materi kelas 1-3. Pada Gambar 3.16 ini

merupakan rancangan interface detail materi dari kelas 1-3. Pada layout ini
 47

terdapat materi berupa video dan text pembahasan dan terdapat tombol play

untuk memutar video pembahasan.

GAMBAR 3.16
RANCANGAN INTERFACE HALAMAN MATERI 1-3

Sumber: Data Olahan, 2023

4. Rancangan Interface Halaman Materi Kelas 4-6

Jika pada halaman home pengguna memilih menu materi kelas 4-6,

maka aplikasi akan menampilkan halaman detail materi kelas 4-6. Pada

Gambar 3.17 ini merupakan rancangan interface detail materi dari kelas 4-6.

Pada layout ini terdapat mateti berupa video dan text pembahasan dan

terdapat tombol play untuk memutar video pembahasan.

GAMBAR 3.17
RANCANGAN INTERFACE HALAMAN MATERI 4-6
 48

Sumber: Data Olahan, 2023

5. Rancangan Interface Kuis 1-3

Jika pada halaman home pengguna memilih menu kuis kelas 1-3.

Maka aplikasi akan menampilkan halaman soal kelas 1-3. Pada Gambar 3.18

ini merupakan rancangan interface soal kuis kelas 1-3. Pada layout ini

terdapat soal kuis berupa pilihan ganda. Terdapat pilihan jawaban A, B, C,

dan D, terdapat tombol next untuk lanjut ke soal kuis selanjutnya.

GAMBAR 3.18
RANCANGAN INTERFACE HALAMAN KUIS 1-3
 49

Sumber: Data Olahan, 2023

6. Rancangan Interface Halaman Kuis Kelas 4-6

Jika pada halaman home pengguna memilih menu kuis kelas 4-6.

Maka aplikasi akan menampilkan halaman kategori soal kuis. Terdapat 2

pilihan menu kuis yaitu pilihan ganda dan essay. Pada Gambar 3.19 ini

merupakan rancangan interface soal kuis kelas 4-6. Pada layout ini terdapat

soal kuis berupa pilihan ganda. Terdapat pilihan jawaban A, B, C, dan D,

terdapat tombol next untuk lanjut ke soal kuis selanjutnya.

GAMBAR 3.19
RANCANGAN INTERFACE KATEGORI
 50

Sumber: Data Olahan, 2023

GAMBAR 3.20
RANCANGAN INTERFACE PILIHAN GANDA

Sumber: Data Olahan, 2023

7. Rancangan Interface Login Admin

Untuk dapat masuk ke aplikasi admin dan melakukan olah data admin

harus melakukan proses login. Pada Gambar 3.21 ini merupakan rancangan

interface login admin. Pada layout ini berisi username dan password yang

harus di-inputkan admin. Jika username dan password yang dimasukkan

valid, maka admin akan diarahkan ke halaman update materi. Jika tidak valid

maka ada pesan username atau password salah.

GAMBAR 3.21
RANCANGAN INTERFACE LOGIN ADMIN
 51

Sumber: Data Olahan, 2023

8. Rancangan Interface Update Materi

Setelah berhasil login maka admin akan diarahkan ke halaman update

materi. Pada Gambar 3.22 ini merupakan rancangan interface update materi.

pada layout ini berisi beberapa data mengenai materi yang harus di-inputkan

admin. Jika sudah menginputkan data maka admin dapat menekan tombol

upload. Jika proses upload data ke database berhasil maka akan ada pesan

upload sukses. Jika proses gagal maka akan ada pesan upload gagal. Terdapat

2 aksi yang dapat dilakukan admin yaitu edit data materi dan hapus data

materi.

GAMBAR 3.22
RANCANGAN INTERFACE UPDATE MATERI
 52

Sumber: Data Olahan, 2023

9. Rancangan Interface Update Kuis

Untuk dapat melakukan update kuis, admin dapat mengklik tombol

dropdown update kemudian memilih menu update kuis. Pada Gambar 3.23

ini merupakan rancangan interface update kuis. Pada layout ini berisi data

mengenai kuis yang harus dimasukkan admin. Terdapat tabs menu pilihan

ganda dan essay.jika admin ingin meng-update kuis kelas 1-3, admin dapat

memilih tabs menu pilihan ganda. Jika admin ingin meng-update kuis kelas

4-6, admin dapat memilih tabs menu pilihan ganda dan essay. Jika sudah

menginputkan data maka admin dapat menekan tombol simpan. Jika proses

simpan data ke database berhasil maka akan ada pesan berhasil disimpan.

Jika proses gagal maka akan ada pesan gagal disimpan. Terdapat 2 aksi yang

dapat dilakukan admin yaitu edit data kuis dan hapus data kuis.

GAMBAR 3.23
RANCANGAN INTERFACE UPDATE KUIS PILIHAN GANDA
 53

Sumber: Data Olahan, 2023

GAMBAR 3.24
RANCANGAN INTERFACE UPDATE KUIS ESSAY

Sumber: Data Olahan, 2023