3. bab 3 analisis dan perancangan...

31

3. BAB 3

ANALISIS DAN PERANCANGAN SISTEM

Tahap analisis dan perancangan diperlukan tahapan sistematis agar aplikasi

yang dibuat sesuai dengan kegunaan dan tujuannya. Tahap pertama dari analisis

adalah melakukan analisis sistem, mulai dari analisis masalah, analisis fungsional

dan analisis non-fungsional. Sedangkan untuk tahap perancangan di mulai dengan

melakukan perancangan sistem dan perancangan antarmuka yang akan digunakan

untuk diterapkan pada aplikasi.

3.1 Analisis Sistem

Analisis sistem merupakan penguraian dari suatu sistem yang utuh ke dalam

bagian-bagian komponennya yang dimaksudkan untuk mengidentifikasi dan

mengevaluasi segala permasalahan dan hambatan yang terjadi serta kebutuhan yang

diharapkan dapat menjadi acuan untuk diusulkannya perbaikan-perbaikan.

Tahap analisis sistem ini sangat penting karena apabila terjadi kesalahan

dalam tahap ini akan mengakibatkan kesalahan pada tahap selanjutnya, untuk itu

diperlukan tingkat ketelitian dan kecermatan yang tinggi untuk dapat mendapatkan

kualitas kerja sistem yang baik.

Analisis Masalah

Analisis masalah merupakan penjabaran tentang masalah apa saja yang ada

sebelum dibangun dan bermaksud untuk membantu siswa dalam belajar materi

ikatan kimia pada mata pelajaran kimia untuk kelas X di lingkungan SMA Negeri

7 Bandung. Analisis masalah yang ada meliputi hal-hal sebagai berikut:

1. Sistem pembelajaran kurang interaktif dan variatif.

2. Kurangnya media pembelajaran ikatan kimia, membuat siswa kesulitan

belajar diluar jam sekolah.

3. Guru mengalami kesulitan dalam melihat pemahaman setiap siswa

32

Analisis Aplikasi Sejenis

Analisis aplikasi sejenis merupakan analisis yang akan membahas mengenai

aplikasi yang menjadi acuan dalam pembangunan sebuah aplikasi. Dalam aplikasi

sejenis akan dibahas mengenai berbagai hal yang ada didalam aplikasi sejenis

diantaranya meliputi konten, materi yang disampaikan, model/metode yang

digunakan, untuk menjadi acuan bagi kebutuhan yang dibangun. Berikut sedikit

ulasan mengenai aplikasi yang akan dibahas yaitu Elements: The Periodic Table

dan Interactive the Periodic Table.

Elements: The Periodic Table

Aplikasi Elements: The Periodic Table berjalan pada sistem operasi

windows 8. Software ini mengangkat materi sistem periodik tabel unsur dan

pengenalan atom. Konten pada aplikasi ini berisi tentang atom dengan konfigurasi

elektron bilangan kuantum yang menjelaskan konfigurasi elektron pada setiap

orbital subkulit, juga pembagian elektron perkulit, dan properti-properti atom

lainnya, seperti nilai titik didih, tingkat keeletronegatifan, dan spesifikasi energi

lainnya. Software ini tersedia di apps store microsoft secara gratis.

Gambar 3.1 Tampilan awal aplikasi

33

Gambar 3.2 Tampilan Informasi Atom

Gambar 3.3 Tampilan Informasi Atom

Interactive the Periodic Table

Aplikasi ini berbasis web yang dipublis oleh learner.org, yaitu sebuah web

yang memiliki banyak aplikasi pembelajaran berbantuan komputer. Aplikasi ini

memuat materi ikatan kimia. Gambaran secara umum aplikasi ini sebagai berikut:

1. Aplikasi menyediakan beberapa contoh atom dan molekul. Dibagi menjadi dua

bagian, kation dan anion.

2. Aplikasi memberikan instruksi kepada pengguna untuk menggabungkan kation

dengan anion untuk membentuk ikatan kimia.

34

3. Jika pengguna melakukan instruksi dengan benar, maka aplikasi memberikan

informasi tentang molekul dan rumus molekul hasil dari eksperimen pengguna.

Gambar 3.4 Tampilan Awal Apliasi

Gambar 3.5 Tampilan Kation dan Anion Sebelum Berikatan

35

Gambar 3.6 Tampilan Kation dan Anion yang Berikatan

Gambar 3.7 Tampilan Informasi Molekul Baru

Kesimpulan Hasil Analisis Aplikasi Sejenis

A. Hasil analisis Aplikasi Elements: The Periodic Table adalah sebagai berikut:

1. Aplikasi ini menggunakan metode tutorial

2. Aplikasi ini merupakan sistem periodik unsur dalam bentuk aplikasi

interaktif. Sistem periodik unsur sendiri, merupakan pegangan wajib

siswa untuk belajar kimia.

36

3. Aplikasi ini hanya memberikan informasi tentang atom/unsur, tanpa

disediakan nya materi ataupun evaluasi terhadap pengguna.

4. Aplikasi ini menggunakan metode tutorial bercabang, yaitu informasi

disampaikan sesuai keinginan pengguna terhadap atom yang

dipilih/diklik.

B. Hasil analisis interactive the Periodic Table

1. Aplikasi ini menggunakan metode eksperimen.

2. Aplikasi menyediakan contoh kation dan anion sebagaiberikatan

3. Aplikasi ini tidak hanya menyediakan atom sebagai bahan eksperimen,

tapi juga menyediakan molekul yang sudah berikatan.

4. Informasi yang disampaikan pada aplikasi ini hanya nama molekul dan

rumus molekul yang terbentuk, tanpa disertakan informasi dan

gambaran geometri molekul dan jenis ikatan kimia.

5. Aplikasi menggunakan grafis 2D.

Analisis Model

Aplikasi Pembelajaran Ikatan Kimia ini dibangun dengan menggunakan

pendekatan model tutorial dan model penemuan(discovery). Pada bagian materi,

aplikasi menggunakan pendekatan model tutorial, penyajian materi menggunakan

bantuan teks, animasi 2D dan model 3D interaktif. Model tutorial menyampaikan

materi sesuai dengan bahan yang akan diajarkan. Dengan menggunakan model

tutorial, siswa dapat belajar diluar jam sekolah, karena model tutorial pada dasarnya

dibangun dengan tujuan dapat menggantikan peran pengajar . Dalam beberapa hal,

tutorial diperlukan agar membantu siswa dalam mengatasi masalah belajarnya.

Biasanya dengan bantuan navigasi materi yang diajarkan, tutorial akan

memudahkan siswa mempelajari bagian-bagian materi tertentu.

Penyajian materi dengan menggunakan model tutorial bercabang

(branching). Siswa dapat mempelajarai materi ikatan kimia secara menyeluruh

maupun hanya subbab-subbab tertentu dari materi ikatan kimia. Dengan asumsi,

setiap siswa memiliki pengetahuan berbeda-beda tentang materi ikatan kimia,

pembelajaran tidak harus dimulai dari awal materi ikatan kimia, siswa bisa

langsung mengacu pada subbab tertentu dari materi ikatan kimia.

37

Berikut uraian peran pengajar, komputer, dan pelajar dengan melakakukan

pendekatan model tutorial dapat dilihat pada Gambar 3.8.

Pengajar Pelajar

Seleksi bahan materiMenyediakan soal evaluasi

Menyajikan MateriMenyajikan Evaluasi

Menyimpan hasil evaluasi

Menjawab PertanyaanMenyajikan hasil evaluasi siswa

Gambar 3.8 Uraian Pendekatan Model Tutorial

Aplikasi juga menanamkan pendekatan terhadap model penemuan

(discovery) pada fitur sistem periodik unsur interaktif, dimana siswa bisa mencoba

menggabungkan atom satu dengan atom lainnya untuk melihat apakah atom-atom

tersebut bisa saling terikat membentuk ikatan kimia, jenis ikatan kimia dan juga

atribut-atribut penting molekul. Selain digabungkan, sistem periodik unsur

interaktif juga bisa melihat konfigurasi elektron, dan atribut-atribut atom yang perlu

diketahui siswa. Model penemuan (discovery) bersifat coba-coba atau trial dan

error dalam memecahkan suatu permasalahan.

Dari model penemuan (discovery), Siswa dapat mencari informasi dan

membuat kesimpulan dari sejumlah informasi yang telah dipelajarinya. Dari proses

belajar yang dilakukannya siswa dapat menemukan konsep dan pengetahuan baru

yang belum pernah dipelajari sebelumnya.

Berikut uraian peran pengajar, komputer, dan pelajar dengan melakakukan

pendekatan model penemuan (discovery) dapat dilihat pada Gambar 3.9. Gambar 3.8

Pengajar Pelajar

Menentukan bahan percobaan Menyajikan masalahMenyajikan Informasi

Melakukan percobaan

Gambar 3.9 Uraian Pendekatan Model Penemuan (Discovery)

Analisis Aplikasi Pembelajaran yang Dibangun

Aplikasi pembelajaran yang akan dibangun memuat pembelajaran untuk

mata pelajaran Kimia pada materi ikatan kimia. Aplikasi ini ditujukan untuk siswa

38

kelas X SMA N 7 Bandung untuk membantu siswa dalam memahami pelajaran

kimia pada materi ikatan kimia yang berisi banyak materi dan ilustrasi.

Analisi Materi

Materi yang diajarkan pada materi ikatan kimia sesuai Kurikulum 2013 yang

digunakan di SMA Negeri 7 Bandung. Ikatan Kimia memiliki tujuh subbab, antara lain:

1. Kestabilan unsur

2. Struktur/rumus Lewis

3. Ikatan ionik

4. Ikatan kovalen

5. Ikatan logam

6. Senyawa ionik dan kovalen

7. Geometri elektron dan bentuk molekul

Dari tujuh subbab ikatan kimia tersebut, SMAN 7 Bandung memiliki

kompetensi dasar yang ingin dicapai terhadap siswa adalah:

1. Siswa diharapkan mampu menuliskan/menggambarkan struktur lewis pada

molekul.

2. Siswa diharapkan memahami defenisi dan karakteristik jenis-jenis ikatan kimia.

3. Siswa diharapkan memahami teori vsper, yaitu teori untuk mempredisksi

geometri molekul.

4. Siswa diharapkan mengetahui karakteristik dan bentuk geometeri dari molekul

yang terbentuk akibat proses ikatan kimia.

Deskripsi Aplikasi Pembelajaran Ikatan Kimia

Aplikasi ini dibangun untuk digunakan oleh siswa kelas X SMAN 7 Bandung

dalam membantu proses belajar mengajar siswa yang cenderung kesulitan dalam

memahami materi ikatan kimia. Selain siswa, aplikasi ini juga ditujukan kepada

guru, untuk memudahkan guru memonitoring kegiatan belajar siswa diluar jam

sekolah. Pada aplikasi ini guru dikategorikan menjadi dua tipe, yaitu guru sebagai

pengajar, bertujuan untuk memonitoring kegiatan belajar siswa, dan guru

koordinator untuk mengolah data guru pengajar.

39

Pada bagian siswa, ada tiga fitur yang disediakan untuk menunjang proses belajar

mengajar yaitu antara lain,

1. Materi, berisi materi ikatan kimia yang diambil dari beberapa buku Kimia.

2. Sistem periodik unsur, berisi tabel periodik unsur interaktif bertujuan untuk

percobaan siswa terhadap kepahaman materi.

3. Evaluasi, berisi kumpulan sal yang ditambhakan oleh guru untuk mengetahui

kepahaman siswa terhadap materi.

Aplikasi menyajikan materi ikatan kimia dengan bantuan teks narasi,

animasi 2D, dan model 3D interaktif.

3.1.4.2.1 Blok Diagram utama

Blok diagram utama menjelaskan peran keseluruhan jenis pengguna meliputi,

siswa, guru koordinator dan guru(pengajar) terhadap aplikasi yang dibangun, dapat

dilihat pada Gambar 3.10.

Materi

Menampilkan aplikasi

Pembelajaran ikatan kimia

Sistem

periodik unsur

interaktif

Evaluasi

Menampilkan halaman guru

aplikasi


Data Guru

Data Siswa

Data Soal

Data Molekul

DATABASE

Menampilkan halaman

guru koordinator

aplikasi


Gambar 3.10 Blok Diagram Utama

40

Pada Gambar 3.10 menjelaskan tugas/peran pengguna antara lain:

1. Siswa

a. Mempelajari dan memahami materi yang disajikan.

b. Melakukan percobaan ikatan kimia pada sistem periodik unsur interaktif.

c. Melakukan Evaluasi

2. Guru Koordinator

a. Mengolah data guru (pengajar)

3. Guru

a. Mengolah data siswa.

b. Mengolah data soal.

c. Mengolah data molekul.

3.1.4.2.2 Blok Diagram Materi

Blok diagram materi menjelaskan peran aplikasi dalam membantu siswa memhami

materi ikatan kimia yang berisi ilustrasi. Gambar blok diagram materi dapa dilihat

pada Gambar 3.11.

Halaman Materi

Siswa memilih sub materi

dari materi ikatan kimia

dengan cara menglik

blok/gambar yang

disediakan

Tampilan materi

(teks, animasi 2D, 3D

interaktif)

Gambar 3.11 Blok Diagram Materi

Aplikasi berisi materi ikatan kimia, yang didalamnya meliputi 7 Subbab yang harus

dipahami oleh siswa. Siswa memilih subbab materi ikatan kimia yang ingin

dipelajari dengan cara mengklik gambar subbab yang disediakan, dalam subbab

materi ikatan kimia berisi konten materi yang disampaikan dengan bantuan teks

narasi, animasi 2D, dan model 3D interaktif.

41

3.1.4.2.3 Blok Diagram Sistem Periodik Unsur Interaktif

Blok diagram sistem periodik unsur interaktif menjelaskan peran aplikasi dalam

melihat kepahaman siswa terhadap materi yang telah dipelajari, dapan dilihat pada

Gambar 3.12.

Halaman

Sistem periodik

unsur interaktif

Atom Jenis_unsur

Siswa menggabungkan

atom 1 dengan atom

lainnya dengan cara

drag and drop

Cek hasil

penggabungan

Detail_

molekul

MolekulGeometri_molekul Jenis_ikatan_kimia

Informasi molekul

(teks, animasi 2D, 3D

interaktif)

Pengecekan

molekul

Ada

Tidak ada

Gambar 3.12 Blok Diagram Sistem Periodik Unsur Interaktif

Stage ini berisi tabel sistem periodik unsur pada umumnya, hanya saja

sistem periodik unsur ini didesain interaktif, siswa bisa bereksperimen

menggabungkan unsur satu dengan unsur lainnya dengan cara men-drag and drop

ke stage yang telah disediakan. Jika unsur-unsur yang digabungkan tersedia

didatabase yang diinputkan oleh guru, maka aplikasi akan menampilkan informasi

tentang molekul yang terbentuk.

3.1.4.2.4 Blok diagram Evaluasi

Blok diagram Evaluasi menjelaskan peran aplikasi dalam melihat pemahaman

siswa terhadap materi yang telah dipelajari, dapat dilihat pada Gambar 3.13.

42

Halaman

Evaluasi

Soal

Siswa menjawab setiap

soal yang diberikan

dengan cara mengklik

pilihan yang disediakan

Cek hasil jawaban

Detail_evaluasi

Total Nilai

(teks)

Hasil jawaban

Cek jumlah soalTidak

ada

Gambar 3.13 Blok Diagram Evaluasi

Ketarangan Evaluasi adalah sebagai berikut:

1. Siswa melakukan evaluasi, setalah mempelajari materi ikatan kimia, dan

melakukan percobaan ikatan kimia untuk melihat sejauh mana pemahaman

siswa terhadap materi ikatan kimia.

2. Jumlah soal adalah tergantung pada keinginan guru. pertanyaan dalam bentuk

pilihan ganda, soal dan opsi jawaban akan diacak.

3. Bentuk soal berupa teks.

4. Hasil evaluasi yang ditampilkan berupa skor dalam bentuk teks.

Komponen pada Aplikasi Pembelajaran Ikatan Kimia

Adapun komponen pada Aplikasi Pembelajaran Ikatan Kimia dapat dilihat pada

Tabel 3.1

Tabel 3.1 Komponen pada Aplikasi Pembelajaran Ikatan Kimia

No komponen Keterangan

1 Menu Aplikasi ini memiliki menu yaitu:

1. Menu Materi dan Evaluasi

2. Menu Sistem periodik unsur, pengenalan atom dan simulasi

ikatan kimia

2 Informasi Memberikan informasi mengenai materi ikatan kimia, antara lain

informasi atom beserta nilai-nilai property nya, jenis ikatan kimia

yang disampaikan berupa teks dan animasi

3 Grafis Aplikasi ini memiliki grafis 2 dan 3 dimensi.

43

4 Fungsi

Aplikasi

Aplikasi ini berfungsi sebagai berikut:

1. Berfungsi untuk mengenalkan materi ikatan kimia pada siswa

kelas X

2. Memberikan evaluasi terhadap siswa

Offline Web Apps

HTML5 menyediakan mekanisme caching aplikasi, yang memungkinkan

aplikasi berbasis web berjalan offline. Pengembang dapat menggunakan

Application Cache (AppCache) untuk menentukan sumber daya apa saja yang

harus di-cache dan membuat tersedia untuk pengguna offline. Keuntungan utama

dalam membangun aplikasi dengan mekanisme chace adalah, pengguna tetap dapat

mengakses website dalam keaadan offline, serta kecepatan dalam mengambil

sumberdaya aplikasi yang telah tersedia pada harddrive client jauh lebih cepat.

Dengan memanfaat kan fitur ini, aplikasi ikatan kimia berbasis web akan dapat

diakses dalam keaadan offline.

Arsitektur aplikasi pada aplikasi ikatan kimia berbasis web dapa dilihat pada

Gambar 3.14.

Include/modul.php

Login.php Evaluasi.phpMateriSistem Periodik Unsur

Interaktif

Halaman Guru Koordinator

Halaman Guru

CSSJavascript

Arsitektur Client Arsitektur Server

Gambar 3.14 Arsitektur Aplikasi

Pada Gambar 3.14, dapat dilihat arsitektur client nantinya akan dapat

diakses dalam keaadan offline. Bagian aplikasi yang di-chacing merupakan bagian

yang hanya membaca sumberdaya basis data.

44

Setelah sebagian aplikasi di-chacing, sejumlah sumberdaya basisdata juga

disimpan ke browser untuk menunjang performansi aplikasi dalam mode offline.

Provider yang digunakan untuk menyimpan sumberdaya basisdata kedalam

browser adalah LocalStorage. LocalStorage dipilih karena dari semua provider

client side database, hanya LocalStorage yang support pada semua browser, karena

hanya bersifat membaca data, LocalStorage yang tidak mendukung relasi antar

tabel cocok digunakan pada aplikasi ini.

Arsitektur basis data pada aplikasi ini dapat dilihat pada Gambar 3.15.

BASIS DATA

Atom

Molekul

Detail Molekul

Jenis Ikatan Kimia

Geometri molekul

siswa

Guru

Evaluasi

Soal

Jenis Unsur

LocalStorage

Gambar 3.15 Arsitektur Basisdata

Pada Gambar 3.15 dapat dilihat data pada tabel atom, molekul, jenis ikatan kimia,

detail molekul, geometri molekul, dan jenis unsur disimpan ke dalam LocalStorage.

Semua data pada tabel tadi, digunakan pada halaman sistem periodik unsur

interaktif.

Spesifikasi Kebutuhan Perangkat Lunak

Spesifikasi kebutuhan perangkat lunak merupakan kebutuhan perangkat

lunak sebagai hasil dari proses analisis yang dilakukan dalam konteks

45

pengembangan perangkat lunak.. Analisis spesifikasi kebutuhan perangkat lunak

yang akan dijelaskan adalah analisis spesifikasi kebutuhan fungsional dan non

fungsional. Analisis spesifik kebutuhan perangkat lunak fungsional dapat dilihat

pada Tabel 3.2.

Tabel 3.2 Spesifikasi Kebutuhan Fungsional

No Kode kebutuhan Deskripsi Kebutuhan

1 SKPL-PBKF-01 Siswa dapat memilih dan melihat materi

2 SKPL-PBKF-02 Siswa dapat melakukan eksperimen ikatan

kimia

3 SKPL-PBKF-03 Siswa dapat melakukan evaluasi

4 SKPL-PBKF-04 Guru dapat mengolah data soal

5 SKPL-PBKF-05 Guru dapat mengolah data molekul

6 SKPL-PBKF-06 Guru koordinator dapat mengolah data guru

Analisis spesifik kebutuhan perangkat lunak non fungsional dapat dapat

dilihat pada Tabel 3.3

Tabel 3.3 Spesifikasi Kebutuhan Non Fungsional

No Kode kebutuhan Deskripsi Kebutuhan

1 SKPL-PBKNF-01 Sistem yang dibangun berbasis Website

2 SKPL- PBKNF -02 Menggunakan tampilan yang menarik dan

interaktif

3 SKPL- PBKNF -03 Aplikasi akan menampilkan data sesuai dengan

keinginan pengguna

4 SKPL- PBKNF -04 Antarmuka dengan pengguna menggunakan

bahasa Indonesia

Analisis Kebutuhan Non-Fungsional

Analisis kebutuhan non-fungsional menjelaskan kebutuhan luar sistem yang

diperlukan untuk menjalankan aplikasi yang dibangun. Adapun kebutuhan non-

fungsional pada Aplikasi pembelajaran ikatan kimia berbasis web, meliputi

kebutuhan perangkat keras, kebutuhan perangkat lunak dan pengguna sistem yang

akan menggunakan aplikasi. Analisis kebutuhan non-fungsional bertujuan agar

aplikasi yang dibangun dapat digunakan sesuai dengan kebutuhan.

Analisis Perangkat Keras

Berikut spesifikasi standar perangkat keras yang dapat digunakan untuk

aplikasi Pembelajaran Ikatan Kimia dapat dilihat pada Tabel 3.4

46

Tabel 3.4 Analisis Perangkat Keras

No Perangkat Keras Spesifikasi

1 Prosessor Processor dengan kecepatan minimal 1,8 Ghz

2 Monitor Monitor dengan resolusi 1024 x 768

3 VGA VGA minimal 256 MB

4 Hardisk 160 GB

5 Memori RAM minimal 1 GB

6 Lan Card Lan Card 10/100 Mbps

7 Koneksi Koneksi Internet minimal 64 kbps.

8 Keyboard Standar

9 Mouse Standar

Setelah melakukan analisis perangkat keras maka dapat diambil

kesimpulan, untuk mendapatkan tampilan maksimal dalam mengakses aplikasi

pembelajaran ikatan kimia berbasis web, perangkat keras minimal yang harus

digunakan seperti pada Tabel 3.4. Penggunaan VGA, Processor dan Memory

dengan spesifikasi pada Tabel 3.4 ataupun lebih, akan sangat membantu dalam

menghasilkan tampilan animasi 2D dan 3D.

Analisis Perangkat Lunak

Perangkat lunak merupakan sarana pendukung lainnya bagi pembangunan

aplikasi sistem evaluasi pelatihan ini. Adapun perangkat lunak yang disarankan

untuk menjalankan aplikasi ini dapat dilihat pada Tabel 3.5

Tabel 3.5 Analisis Perangkat Lunak

Perangkat Spesifikasi Kebutuhan Minimum Perangkat

Sistem

Operasi

Microsoft

Windows 7 32

bit

Microsoft Windows, Linux, Mac OS

Browser Mozilla Firefox

4, Chrome 10, IE

9

Mozilla Firefox 3.6, Chrome 10, IE 8

Setelah melakukan analisis perangkat lunak maka disimpulkan bahwa

perangkat lunak yang digunakan dengan spesifikasi pada Tabel 3.5 dapat

menjalankan aplikasi pembelajaran ikatan kimia dengan baik, karena aplikasi

memanfaatkan tekhnologi HTML5 yaitu offline mode dan client side database, dan

juga grafis 3D maka perangkat lunak dengan spesifikasi pada Tabel 3.5 dapat

menghasilkan tampilan maksimal.

47

Analisis Pengguna

Analisis pengguna dimaksudkan untuk mengetahu siapa saja pengguna yang

terlibat dalam penggunaan Aplikasi Pembelajaran Ikatan Kimia berbasis Web.

Aplikasi yang akan dibangun ini digunakan oleh tiga jenis pengguna utama yaitu

guru,guru koordinator dan siswa. Berikut rincian karakteristik pengguna, dapat

dilihat pada

Tabel 3.6 Analisis Pengguna

Pengguna Hak Akses Tanggung Jawab Tingkat keterampilan

Guru Mengelolah data

molekul, siswa, dan

soal

Tambah, edit dan hapus

data molekul, siswa dan

soal

Mengerti komputer dan

internet

Guru

Koordinator

Mengelolah data

guru

Tambah, edit dan hapus

data guru


internet

Siswa Membaca materi,

Melakukan

eksperimen

pemahaman materi,

melakukan evaluasi

belajar.

Membaca materi,

Melakukan eksperimen

pemahaman materi,

melakukan evaluasi

belajar.


internet

Analisis Data

Dalam memodelkan data dan hubungan-hubungan data yang ada pada

Aplikasi Pembelajaran Ikatan Kimia digunakan sebua alat bantu pemodelan yaitu

Entity Relationship Diagram (ERD) yang terdiri dari 6 entitas. Entity Relation

Diagram terdapat pada Gambar 3.16

48

GuruMengelola

1

MolekulMengelola

1

N AtomMemiliki NN

Siswa

Mengelola Soal Mengerjakan

N

N

1

nis

Username_guru

nama

Id_soalId_soalId_jawaban

Id_atom

Id_molekul

Id_atomId_molekul

Jenis_ikaktan_kimia Memiliki1

N

Id_ikatan

N

N

Jenis Unsur Memiliki1

N

Id_jenis

nis

Memiliki Geometri Molekul1

N

id_gm

Gambar 3.16 Entity Relationship Diagram (ERD)

Tabel 3.7 Kamus Data Entity Relationship Diagram (ERD)

No Nama Entitas

atau Relasi

Atribut

1 Siswa nis, nama, password, email

2 Guru Username_guru, nama, password, hak_akses

3 Atom id_atom, id_ju, nama_atom, simbol_atom, periode,

golongan, elektronegatifitas

4 Molekul id_molekul, gambar, id_jik, username_guru, id_gm,

keterangan

5 Detail_molekul Id_dm, id_molekul, no_atom, jumlah

6 Jenis_ikatan_kimia Id_jik, nama_ikatan, keterangan

7 Geometri_molekul Id_gm, nama_gm

49

8 Soal Id_soal, pertanyaan, opsi_a, opsi_b, opsi_c, opsi_d, opsi_d,

jawaban, username_guru

9 Detail_Evaluasi Id_de, Id_soal,nis, opsi_a, opsi_b, opsi_c, opsi_d, opsi_d,

jawaban, jawaban_benar

10 Jenis_unsur Id_ju , nama_jenis, warna_jenis

Analisis Kebutuhan Fungsional

Analisis kebutuhan fungsional menggambarkan kebutuhan sistem yang

akan dibangun pada Aplikasi Pembelajaran Ikatan Kimia. Adapun kebutuhan

fungsional pada Aplikasi Pembelajaran yang akan dibangun ini dengan

pemodelan terstruktur. Pemodelan terstruktur merupakan perangkat lunak yang

gunakan pada pembanguan Pembelajaran Interaktif ini dengan tools Microsoft

Office Visio yang terdiri dari Analisis Kebutuhan Data, DK (Conteks Diagram),

DFD (Data Flow Diagram). Terdapat juga Spesifikasi Proses yang menjelaskan

tentang alur aliran data dari DFD (Data Flow Diagram) dan Kamus Data.

Diagram Konteks (Context Diagram)

Diagram Konteks adalah diagram yang menggambarkan input, process dan

output pada sistem perangkat lunak yang akan dibangun. Berikut Diagram konteks

dari Aplikasi Pembelajaran Ikatan Kimia, dapat dilihat pada Gambar 3.17.

Siswa

Aplikasi

Pembelajaran

Ikatan Kimia

Data LoginData Pendaftaran

Data lupa passwordData sub bab Materi

Data AtomData MolekulData Jawaban

Data Nilai

Informasi LoginInformasi Pendaftaran

Informasi lupa passwordInformasi Atom

Informasi MolekulInformasi Jawaban

Informasi Nilai

Guru

Data LoginData lupa password

Data SoalData Siswa

Data Molekul

Informasi LoginInformasi lupa password

Informasi SoalInformasi Siswa

Informasi Molekul

Mail Server

Info lupa password

GuruKoordinator

Informasi LoginInformasi lupa password

Informasi Guru

Data LoginData lupa password

Data Guru

Gambar 3.17 Diagram Konteks (Context Diagram)

50

DFD (Data Flow Diagram)

Data Flow Diagram merupakan suatu media yang digunakan untuk

mengGambarkan aliran data yang mengalir pada suatu sistem informasi. Dalam

Data Flow Diagram (DFD) terdiri atas entitas luar, aliran data, proses dan

penyimpanan data. Berikut adalah DFD dari Aplikasi Pembelajaran Ikatan Kimia:

a. DFD Level 1 Aplikasi Pembelajaran Ikatan Kimia

Gambar DFD Level 1 berikut ini menjelaskan bahwa pengguna Aplikasi

pembelajaran Ikatan Kimia dapat melakukan akses pada aplikasi dengan memilih

menu yang ada ke dalam sistem sebagai admin, guru dan siswa yang di dalamnya

terdapat beberapa pilihan yang berbeda sesuai hak akses pada setiap pengguna.

51

1

Login

Guru

6Pengolahan Data

Siswa

7Pengolahan Data

Guru

5Pengolahan Data

Soal

4Pengolahan Data

Jawaban

Siswa

Data Login

Informasi Login

Data Jawaban

Informasi Jawaban

Data Login

Informasi Login

Data Guru

Informasi Guru

Data S iswa

Info Siswa

Info Soal

Informasi Soal

Guru

Data guru

Data guru

Data guru

Data guru

Siswa

Data siswa

Data siswa

Data siswa

Data siswa

Soal

Data soal

Data soal

Data soal

Data soal

Detail_evaluasi

Data Jawaban

Data Jawaban

Nilai

Data ni lai

Data ni lai

Data Nilai

3Pendaftaran

Informasi Pendaftaran

Data Pendaftaran

Data Pendaftaran

Data Pendaftaran

8Pengolahan Data

Molekul

Atom

Molekul

Detail_molekul

Jenis_ikatan_kimia

Geometri_molekulData molekul

Informasi molekul

Data

jenis_ikatan_kimia

Data

atom

Data

Geometri_molekul

Data molekul

Data molekul

Data detai l_molekul

Data detai l_molekul

2Verivikasi Lupa

Password

Mail server

Informasi Lupa passwordData guru

Informasi guru

Data Emai l

Informasi Lupa Password

Guru

Koordinator

9Tampil Sub bab

Materi

Data Login

Informasi Login

Data guru

Data guru

Data guru

Informasi guru

Data Sub bab Materi

Informasi Sub bab Materi

10Tampil

Sistem Periodik Unsur Interaktif

Data Atom

Informasi Atom

Data Molekul

Data Geometri Molekul

Data Atom

Data Atom

Data Jenis_ikatan_kimia

Data Molekul

Informasi Molekul

Gambar 3.18 DFD level 1

52

a. DFD Level 2 Proses Verifikasi Lupa Password

DFD Level 2 proses verifikasi lupa password, terdapat 3 proses didalamnya,

yaitu: memvalidasi email, mencari email dan mengirim URL ke mailserver.

Pengguna yang terlibat dalam proses ini adalah siswa. Proses-proses tersebut dapat

dilihat pada Gambar 3.19.

siswa

2.1Memvalidasi

Email

informasi Validasi Email

Data Email

2.2Mencari Email

2.3Mengirim URL lupa password

Data email

SiswaData email

Mail ServerData URL

informasi Pencarian Email

informasi URL lupa password

Data email

Gambar 3.19 DFD Level 2 Proses Verifikasi Lupa Password

a. DFD Level 2 Proses Pengolahan Data Jawaban

DFD Level 2 proses pengolahan data Jawaban, terdapat 2 proses

didalamnya, yaitu: pengolahan jawaban, dan lihat nilai. Pengguna yang terlibat

dalam proses ini adalah siswa. Proses-proses tersebut dapat dilihat pada Gambar

3.20

siswa

4.1Pengolahan

Jawaban

4.2Pengolahan

NilaiDetail_evaluasi

informasi soal

Data Jawaban Data Jawaban

Data Jawaban

informasi Nilai

Data Nilai

Data Nilai

Soal

Data Soal

Data Soal

Gambar 3.20 DFD Level 2 Proses Pengolahan Data Jawaban

53

b. DFD Level 2 Proses Pengolahan Data Soal

DFD Level 2 proses pengolahan data Soal, terdapat 4 proses didalamnya,

yaitu: Tambah, edit, cari dan hapus. Pengguna yang terlibat dalam proses ini adalah

guru. Proses-proses tersebut dapat dilihat pada Gambar 3.21

Guru

5.1Tambah Data

soal

5.2Edit Data soal

5.3Hapus Data

soal

soal

informasi soal

Data soal Data soal

Data soal

informasi soal

Data soal

informasi soal

Data soal Data soal

Data soal

Data soal

Data soal

5.4Cari Data soal

informasi soal

Data soal

Data soal

Data soal

Gambar 3.21 DFD Level 2 Proses Pengolahan Data Soal

c. DFD Level 2 Proses Pengolahan Data Siswa

DFD Level 2 proses pengolahan data Siswa, terdapat 2 proses didalamnya,

yaitu: cari dan hapus. Pengguna yang terlibat dalam proses ini adalah guru. Proses-

proses tersebut dapat dilihat pada Gambar 3.22

Guru

6.1Hapus Data

siswa

siswa

informasi siswa

Data siswa Data siswa

Data siswa

6.2Cari Data siswa

informasi siswa

Data siswa

Data siswa

Data siswa

Gambar 3.22 DFD Level 2 Proses Pengolahan Data Siswa

54

e. DFD Level 2 Proses Pengolahan Data Guru

DFD Level 2 proses pengolahan data Guru, terdapat 2 proses didalamnya, yaitu:

Tambah dan hapus. Pengguna yang terlibat dalam proses ini adalah guru. Proses-

proses tersebut dapat dilihat pada Gambar 3.23

GuruKoordinator

7.1Tambah Data

Guru

7.2Hapus Data

Guru

Guru

informasi Guru

Data Guru Data Guru

Data Guru

informasi Guru

Data Guru Data Guru

Data Guru

Gambar 3.23 DFD Level 2 Proses Pengolahan Data Guru

f. DFD Level 2 Proses Pengolahan Data Molekul

DFD Level 2 proses pengolahan data Molekul, terdapat 4 proses

didalamnya, yaitu: Tambah, edit, cari dan hapus. Pengguna yang terlibat dalam

proses ini adalah guru. Proses-proses tersebut dapat dilihat pada Gambar 3.24

Data detail_molekul

Guru

8.1Tambah Data

molekul

8.2Edit Data molekul

8.3Cari Data molekul

molekul

informasi molekul

Data molekul

Data molekul

Data molekul

informasi molekul

Data molekul

Data molekul

Data molekul

Data molekul

Data molekul

8.4Hapus Data

molekul

Data molekul

Data molekul

Atom

Data geometri_molekul

Data jenis_ikatan_kimia

informasi molekul

Data molekul

Detail_molekul

Data atom

Data atom

Geometri_molekul

Jenis_ikatan_kimia





Data atom

Data molekul

informasi molekul

Data detail_molekul

Data detail_molekul

Gambar 3.24 DFD Level 2 Proses Pengolahan Data Molekul

55

g. DFD Level 2 Tampil sub bab Materi ikatan kimia

DFD Level 2 materi ikatan kimia terdapat 7 proses didalamnya. Proses-proses

tersebut dapat dilihat pada Gambar 3.25.

siswa

9.1Tampil Sub bab

Kestabilan Unsur

Informasi Materi kestabilan unsur

Data Materi kestabilan unsur

9.2Tampil Sub babStruktur/Rumus

Lewis

9.3Tampil Sub bab

Ikatan Ionik

9.4Tampil Sub babIkatan Kovalen

9.5Tampil Sub babIkatan Logam

9.6Tampil Sub bab Senyawa Ionik Dan Kovalen

9.7Tampil Sub bab

Geometri ElektronDan Kerja Sama

Dalam Ikatan Kimia

Informasi Struktur/Rumus Lewis

Data Struktur/Rumus Lewis

Informasi Ikatan Ionik

Data Ikatan Ionik

Informasi Ikatan Kovalen

Data Ikatan Kovalen

Informasi Ikatan Logam

Data Ikatan Logam

Informasi Senyawa Ionik Dan Kovalen

Data Senyawa Ionik Dan Kovalen

Informasi Materi Geometri E lektron Dan

Ker ja Sama Dalam Ikatan Kimia

Data Materi Geometri Elektron Dan

Ker ja Sama Dalam Ikatan Kimia

Gambar 3.25 DFD Level 2 Tampil sub bab Materi Ikatan Kimia

56

h. DFD Level 2 Sistem periodik unsur interaktif

DFD Level 2 Sistem periodik unsur interaktif terdapat 2 proses didalamnya.

Proses-proses tersebut dapat dilihat pada Gambar 3.26.

Siswa

10.1Menggabungkan

atom

Informasi molekul

Data molekul

Atom

Data atom

10.2Tampil

Informasirmasi atom

Data atom

Informasi atom

Data atom

Detail_molekul

Data atom

MolekulJenis_ikatan_kimia

Geometri_molekul

Data Molekul

Data detail_molekul

Data Jenis_ikatan_kimia

Data Geometri_molekul

Gambar 3.26 DFD Level 2 Sistem Periodik Unsur Interaktif

Spesifikasi Proses

Spesifikasi proses merupakan deskripsi dari setiap elemen proses yang

terdapat dalam program, yang meliputi nama proses, input, output dan keterangan

dari proses. Berikut ini spesifikasi proses dari Aplikasi pembelajaran ikatan kimia

berbasis web dapat dilihat pada Tabel 3.8.

Tabel 3.8 Spesifikasi Proses

No Proses Keterangan

1 No. Proses 1

Nama Login

Source

(Sumber)

Siswa, Guru

Deskripsi Proses untuk bisa mengakses aplikasi pembeajaran ikatan kimia

berbasis web

Input Data login guru, data login Siswa

Output Info login guru, info login Siswa.

Logika

Proses

1. guru/guru koordinator/ siswa memasukan data login

2. Sistem akan memverifikasi data login ke data store Jika

verifikasi sukses maka guru/ siswa masuk ke sistem

3. Jika verifikasi gagal maka akan menampilkan info gagal login

2 No. Proses 2

Nama Lupa password

Source

(Sumber)

Siswa, Guru, Guru koordinator

Deskripsi Proses merubah password, karena guru/guru koordinator/siswa

lupa password

57

Input Email

Output Info email valid

Logika

Proses

1. Guru/ Guru koordinator /Siswa memasukkan email pada lupa

password

2. Apabila email yang diinputkan benar, sistem mengirim link

halaman untuk merubah password ke email guru/siswa

3. Apabila email yang diinputkan tidak valid, sistem

menampilkan pesan email tidak valid

4. Apabila email tidak terdaftar di datastore , sistem

menampilkan pesan email tidak terdaftar.

3 No.Proses 3

Nama Pendaftaran

Source

(Sumber)

Siswa

Deskripsi Proses untuk melakukan pendaftaran

Input Data Siswa

Output Info Siswa

Logika

Proses

1. Sistem menampilakan form untuk melakukan pendaftaran

2. Jika data yang diinputkan valid, sistem akan menyimpan data

siswa

3. Jika data tersebut tidak valid, sistem akan mengeluarkan

pesan gagal.

4 No.Proses 4

Nama Pengolahan jawaban

Source

(Sumber)

Siswa

Deskripsi Pengisisan jawaban pada evaluasi

Input Data jawaban siswa,

Output Info jawaban

Logika

Proses

1. Siswa memilih jawaban pada soal evaluasi

2. Sistem akan menyimpan jawaban siswa, dan

mengakumulasikan nya menjadi nilai

5 No.Proses 5

Nama Pengolahan data soal

Source

(Sumber)

Guru

Deskripsi Proses untuk melakukan pengolahan data soal

Input Data soal

Output Info soal

Logika

Proses

1. Guru memilih menu soal

2. Guru melakukan pengolahan data soal

3. Sistem akan menampilkan info soal, serta tombol untuk

melakukan pengolahan data soal

6 No.Proses 5.1

Nama Tambah data soal

Source

(Sumber)

Guru

Deskripsi Proses untuk melakukan penambahan data soal

Input Data soal

58

Output Info soal

Logika

Proses

1. Guru menekan tombol tambah soal

2. Sistem menampilkan form tambah soal.

3. Guru melakukan penambahan data soal.

4. Jika inputan lengkap dan benar, maka Sistem menyimpannya

ke storage soal

5. Jika inputan tidak lengkap, maka sistem menampilkan pesan

kesalahan dan lengkapi formulir penambahan data soal

7 No.Proses 5.2

Nama Edit data soal

Source

(Sumber)

Guru

Deskripsi Proses untuk melakukan pengeditan data soal

Input Data soal

Output Info soal

Logika

Proses

1. Guru menekan tombol edit soal

2. Sistem akan menampilkan form edit data soal.


ke storage soal

4. Jika inputan tidak lengkap, maka sistem menampilkan pesan

lengkapi formulir penambahan data soal

8 No.Proses 5.3

Nama Hapus data soal

Source

(Sumber)

Guru

Deskripsi Proses untuk melakukan penghapusan data soal

Input Data soal

Output Info soal

Logika

Proses

1. Guru menekan tombol hapus soal

2. Sistem akan menampilkan form dan informasi data soal yang

akan dihapus.

3. Jika Guru ingin menghapus data soal tersebut, maka tekan

tombol hapus, maka Sistem akan menghapus data soal dari

storage soal, dan sistem akan menampilkan pesan data

berhasil dihapus

4. Jika guru ingin membatalkan proses hapus data soal, tekan

tombol tutup

9 No.Proses 5.4

Nama Cari data soal

Source

(Sumber)

Guru

Deskripsi Proses untuk melakukan pencarian data soal

Input Data soal

Output Info soal

Logika

Proses

1. Guru memasukkan data soal yang ingin dicari pada form.

2. Sistem akan melakukan pencarian data soal

3. Jika data yang dicari ditemukan, maka Sistem menampilkan

data soal yang cocok

59

4. Jika data yang dicari tidak ada, maka sistem akan

menampilakan pesan tidak ada data soal yang cocok

10 No.Proses 6

Nama Pengolahan data siswa

Source

(Sumber)

Guru

Deskripsi Proses untuk melakukan pengolahan data siswa

Input Data Siswa

Output Info Siswa

Logika

Proses

1. Guru melakukan pilihan menu pada pengolahan data siswa.

2. Sistem akan menampilakn form dan informasi data siswa

serta tombol-tombol untuk melakukan penglahan data siswa.

11 No.Proses 6.1

Nama penghapusan data siswa

Source

(Sumber)

Guru

Deskripsi Proses untuk melakukan penghapusan data siswa

Input Data Siswa

Output Info Siswa

Logika

Proses

1. Guru memilih data siswa yang akan dihapus.

2. Sistem akan menampilkan pesan konfirmasi data siswa yang

akan dihapus.

3. Jika Guru ingin menghapus data siswa tersebut, maka tekan

tombol hapus, maka Sistem akan menghapus data siswa dari

storage siswa, dan sistem akan menampilkan pesan data

berhasil dihapus.

4. Jika guru ingin membatalkan proses hapus data siswa, tekan

tombol tutup

12 No.Proses 6.2

Nama pencarian data siswa

Source

(Sumber)

Guru

Deskripsi Proses untuk melakukan pencarian data siswa

Input Data Siswa

Output Info Siswa

Logika

Proses

1. Guru memasukkan nama atau nis siswa yang ingin dicari.

2. Jika data yang dicari ditemukan, maka Sistem menampilkan

data siswa yang cocok

3. Jika data yang dicari tidak ada, maka sistem akan

menampilakan tabel kosong

13 No.Proses 7

Nama Pengolahan data Guru

Source

(Sumber)

Guru koordinator

Deskripsi Proses untuk melakukan pengolahan data guru

Input Data guru

Output Info guru

Logika

Proses

1. Guru koordinator, akan melakukan penambahan data guru

60

2. Guru dapat melakukan penambahan dan penghapusan data

guru

3. Jika inputan valid, data akan disimpan ke storege guru

4. Jika inputan tidak valid, sistem akan menampilkan info

kesalahan data yang diinputkan

14 No.Proses 7.1

Nama Tambah data Guru

Source

(Sumber)

Guru koordinator

Deskripsi Proses untuk melakukan penambahan data guru

Input Data guru

Output Info guru

Logika

Proses

1. Guru koordinator menekan tombol tambah

2. Sistem akan menmpilkan form tambah guru.

3. Guru koordinator melakukan penambahan data guru.

4. Jika inputan valid maka sistem menyimpannya ke storage

guru

5. Jika inputan tidak valid, sistem akan menampilkan info

kesalahan inputan

15 No.Proses 7.2

Nama Hapus data Guru

Source

(Sumber)

Guru

Deskripsi Proses untuk melakukan panghapusan data guru

Input Data guru

Output Info guru

Logika

Proses

1. Guru koordinator memilih guru yang ingin dihapus, dengan

menekan tombol hapus pada setiap data guru.

2. Sistem akan menampilkan pesan konfirmasi data guru yang

akan dihapus.

3. Jika Guru koordinator ingin menghapus data guru tersebut,

maka tekan tombol hapus, maka Sistem akan menghapus data

guru dari storage guru, dan sistem akan menampilkan pesan

data berhasil dihapus.

4. Jika guru koordinator ingin membatalkan proses hapus data

guru, tekan tombol tutup.

16 No.Proses 8

Nama Pengolahan data Molekul

Source

(Sumber)

Guru

Deskripsi Proses untuk melakukan pengolahan data molekul

Input Data molekul

Output Info molekul

Logika

Proses

1. Guru melakukan pengolahan data molekul

2. Sistem akan menmpilkan info molekul, serta tombol untuk

melakukan pengolahan data molekul

17 No.Proses 8.1

Nama Tambah data molekul

61

Source

(Sumber)

Guru

Deskripsi Proses untuk melakukan penambahan data molekul

Input Data molekul

Output Info molekul

Logika

Proses

1. Sistem akan menmpilkan form tambah molekul.

2. Guru melakukan penambahan data molekul.


ke storage molekul dan detail_molekul

4. Jika inputan tidak lengkap, maka sistem menampilkan info

lengkapi formulir penambahan data molekul

18 No.Proses 8.2

Nama Edit data molekul

Source

(Sumber)

Guru

Deskripsi Proses untuk melakukan pengeditan data molekul

Input Data molekul

Output Info molekul

Logika

Proses

1. Guru memilih molekul yang ingin diedit, dengan menekan

tombol edit pada setiap data molekul.

2. Sistem akan menmpilkan form edit data molekul.

3. Jika inputan lengkap dan benar, maka Sistem mengubah

record data molekul di storage molekul dan detail_molekul

4. Jika inputan tidak lengkap, maka sistem menampilkan info

lengkapi formulir edit data molekul

19 No.Proses 8.3

Nama Hapus data molekul

Source

(Sumber)

Guru

Deskripsi Proses untuk melakukan penghapusan data molekul

Input Data molekul

Output Info molekul

Logika

Proses

1. Guru memilih data molekul yang ingin dihapus, dengan

menekan tombol hapus pada setiap data molekul.

2. Sistem akan menampilakan pesan konfirmasi data molekul

yang akan dihapus.

3. Jika Guru ingin menghapus data molekul tersebut, maka tekan

tombol hapus, maka Sistem akan menghapus data molekul

dari storage molekul, dan sistem akan menampilkan pesan

data berhasil dihapus.

4. Jika guru ingin membatalkan proses hapus data molekul,

tekan tombol tutup.

20 No.Proses 9

Nama Tampil Materi

Source

(Sumber)

Siswa

Deskripsi Menampilkan 7 Sub bab materi ikatan kimia

Input Data Materi Sub bab Ikatan Kimia

Output Info Materi Sub bab Ikatan Kimia

62

Logika

Proses

1. Sistem menampilkan 7 subbab materi ikatan kimia

2. Siswa memilih salah satu subbab ikatan kimia

3. Sistem menampilkan materi pada subbab yang dipilih oleh

siswa.

21 No.Proses 9.1

Nama Tampil Subbab Kestabilan Unsur

Source

(Sumber)

Siswa

Deskripsi Menampilkan materi ikatan kimia Sub bab kestabilan unsur

Input Data Materi Sub bab Ikatan Kimia Sub bab kestabilan unsur

Output Info Materi Sub bab Ikatan Kimia Sub bab kestabilan unsur

Logika

Proses

1. Siswa memilih menu subbab kestabilan unsur

2. Sistem Menampilkan materi ikatan kimia Sub bab kestabilan

unsur

3. Siswa menekan tombol selanjutnya dan sebelumnya, untuk

pindah dari halaman satu kehalaman lainnya.

4. Siswa melakukan interaksi terhadap ilustrasi yang disajikan

dengan bantuan mouse

5. Siswa menakan tombol tutup untuk kembali ke halaman awal

materi

22 No.Proses 9.2

Nama Struktur/Rumus Lewis

Source

(Sumber)

Siswa

Deskripsi Menampilkan materi ikatan kimia Sub bab Struktur/Rumus Lewis

Input Data Materi Sub bab Ikatan Kimia Sub bab Struktur/Rumus Lewis

Output Info Materi Sub bab Ikatan Kimia Sub bab Struktur/Rumus Lewis

Logika

Proses

1. Siswa memilih menu subbab struktur/rumus lewis

2. Sistem Menampilkan materi ikatan kimia Sub bab

Struktur/Rumus Lewis






materi

23 No.Proses 9.3

Nama Tampil Subbab Ikatan Ionik

Source

(Sumber)

Siswa

Deskripsi Menampilkan materi ikatan kimia Sub bab Ikatan Ionik

Input Data Materi Sub bab Ikatan Kimia Sub bab Ikatan Ionik

Output Info Materi Sub bab Ikatan Kimia Sub bab Ikatan Ionik

Logika

Proses

1. Siswa memilih menu subbab ikatan ionik

2. Sistem Menampilkan materi ikatan kimia Sub bab ikatan ionik





63


materi

23 No.Proses 9.4

Nama Tampil Subbab Ikatan kovalen

Source

(Sumber)

Siswa

Deskripsi Menampilkan materi ikatan kimia Sub bab Ikatan kovalen

Input Data Materi Sub bab Ikatan Kimia Sub bab Ikatan kovalen

Output Info Materi Sub bab Ikatan Kimia Sub bab Ikatan kovalen

Logika

Proses

1. Siswa memilih menu subbab ikatan kovalen

2. Sistem Menampilkan materi ikatan kimia Sub bab ikatan

kovalen






materi

24 No.Proses 9.5

Nama Tampil Subbab Ikatan Logam

Source

(Sumber)

Siswa

Deskripsi Menampilkan materi ikatan kimia Sub bab Ikatan Logam

Input Data Materi Sub bab Ikatan Kimia Sub bab Ikatan Logam

Output Info Materi Sub bab Ikatan Kimia Sub bab Ikatan Logam

Logika

Proses

1. Siswa memilih menu subbab ikatan logam

2. Sistem Menampilkan materi ikatan kimia Sub bab ikatan

logam






materi

25 No.Proses 9.6

Nama Tampil Subbab Senyawa Ionik dan Kovalen

Source

(Sumber)

Siswa

Deskripsi Menampilkan materi ikatan kimia Sub bab Senyawa Ionik dan

Kovalen

Input Data Materi Sub bab Ikatan Kimia Sub bab Senyawa Ionik dan

Kovalen

Output Info Materi Sub bab Ikatan Kimia Sub bab Senyawa Ionik dan

Kovalen

Logika

Proses

1. Siswa memilih menu subbab Senyawa Ionik dan Kovalen

2. Sistem Menampilkan materi ikatan kimia Sub bab Senyawa

Ionik dan Kovalen



64




materi

26 No.Proses 9.7

Nama Tampil Subbab Geometri Elektron dan Kerja Sama dalam Ikatan

Kimia

Source

(Sumber)

Siswa

Deskripsi Menampilkan materi ikatan kimia Sub bab Geometri Elektron dan

Kerja Sama dalam Ikatan Kimia

Input Data Materi Sub bab Ikatan Kimia Sub bab Geometri Elektron dan


Output Info Materi Sub bab Ikatan Kimia Sub bab Geometri Elektron dan


Logika

Proses

1. Siswa memilih menu subbab Geometri Elektron dan Kerja

Sama dalam Ikatan Kimia

2. Sistem Menampilkan materi ikatan kimia Sub bab Geometri

Elektron dan Kerja Sama dalam Ikatan Kimia






materi

27 No.Proses 10

Nama Tampil sistem periodik unsur interaktif

Source

(Sumber)

Siswa

Deskripsi Menampilkan sistem periodik unsur interkatif

Input Data sistem periodik unsur interaktif

Output Info sistem periodik unsur interaktif

Logika

Proses

1. Siswa memilih menu sistem periodik unsur interkatif

2. Sistem menampilkan sistem periodik unsur yang interaktif,

yang berisi tabel periodik unsur

28 No.Proses 10.1

Nama Menggabungkan atom

Source

(Sumber)

Siswa

Deskripsi Menggabungkan atom untuk membentuk molekul

Input Data atom

Output Info atom

Logika

Proses

1. Siswa memilih atom-atom untuk digabungkan dengan cara

men-drag dan men-drop nya ke stage yang disediakan

2. Atom-atom yang digabungkan diperiksa pada storage

detail_molekul untuk dilihat apakah bisa membentuk molekul

atau tidak

3. Jika atom-atom tersebut bisa membentuk molekul, maka

sistem akan menampilkan informasi molekul dari storage

65

molekul, dan jenis ikatan kimia dari storage

jenis_ikatan_kimia

4. Jika molekul terebut memiliki geometri molekul, maka sistem

akan menampilkan ilustrasi ikatan geometri molekul

28 No.Proses 10.2

Nama Tampil informasi atom

Source

(Sumber)

Siswa

Deskripsi Menampilkan informasi atom

Input Data atom

Output Info atom

Logika

Proses

5. Siswa memilih atom untuk melihat informasi-informasi

tentang atom, dengan cara men-drag dan men-drop atom

terebut ke stage yang disediakan, lalu men-double click atom

tersebut

6. Sistem akan menampilkan informasi-informasi atom tersebut

Kamus Data

Kamus data dapat membantu mendefinisikan dengan lengkap data yang

mengalir diantara proses, penyimpanan data, dan entitas luar. Data yang mengalir

tersebut dapat berupa masukan untuk sistem atau hasil dari proses sistem. Kamus

data dibuat berdasarkan arus data yang mengalir pada konteks diagram dan DFD.

Untuk lebih jelasnya dapat dilihat pada Tabel 3.9

Tabel 3.9 Kamus Data

No Kamus Keterangan

1 Nama Aliran data Data Login

Digunakan pada Guru – proses 1 tabel data guru

Siswa – proses 1 tabel data siswa

deskripsi Berisis aliran login

Struktur data Username+Email+password

Nis+Email+password

Username_guru

Nis

Email

Password

[A-Z|a-z|0-9]

[0-9]

[A-Z|a-z|0-9]

[A-Z|a-z|0-9]

2 Nama Aliran data Data lupa password

Digunakan pada Guru – proses 2 tabel data guru

Siswa – proses 2 tabel data siswa

deskripsi Berisis aliran lupa password

Struktur data Email

Email [A-Z|a-z|0-9]

3 Nama Aliran data Data pendaftaran

Digunakan pada Siswa – proses 3 tabel data Siswa

deskripsi Berisis data nis, nama dan password

Struktur data Nis + Nama + email + Password + konfirmasi password

66

Nis

Nama

Emai

Password

Konfirmasi

password

[0-9]

[A-Z|a-z|0-9]

[A-Z|a-z|0-9]

[A-Z|a-z|0-9]

[A-Z|a-z|0-9]

4 Nama Aliran data Data jawaban

Digunakan pada Siswa proses 4 tabel soal

Deskripsi

Berisi Soal dan jawaban

Struktur Data

No_soal + Jawaban

No_Soal

Jawaban

[0-9]

[A-E|a-e]

5 Nama Aliran data Pengolahan data soal

Digunakan pada Guru – proses 5 tabel soal

Deskripsi Berisis aliran data soal

Struktur data Id_soa, pertanyaan, opsi_a, opsi_b, opsi_c, opsi_d, opsi_e

dan jawaban

Pertanyaan

opsi_a

opsi_b

opsi_c

opsi_d

opsi_e

jawaban

[A-Z|a-z|0-9]

[A-Z|a-z|0-9]

[A-Z|a-z|0-9]

[A-Z|a-z|0-9]

[A-Z|a-z|0-9]

[A-Z|a-z|0-9]

[a-z]

6 Nama Aliran data Penambahan data soal

Digunakan pada Guru – proses 5.1 tabel soal

Deskripsi Berisikan aliran data penambahan data soal

Struktur data Id_soal, pertanyaan, opsi_a, opsi_b, opsi_c, opsi_d, opsi_e

dan jawaban

Pertanyaan

opsi_a

opsi_b

opsi_c

opsi_d

opsi_e

jawaban

[A-Z|a-z|0-9]

[A-Z|a-z|0-9]

[A-Z|a-z|0-9]

[A-Z|a-z|0-9]

[A-Z|a-z|0-9]

[A-Z|a-z|0-9]

[a-z]

7 Nama Aliran data pengeditan data soal


deskripsi Berisikan aliran data pengubahan data soal

Struktur data Id_soal pertanyaan, opsi_a, opsi_b, opsi_c, opsi_d, opsi_e

dan jawaban

Soal

opsi_a

opsi_b

opsi_c

opsi_d

opsi_e

[A-Z|a-z|0-9]

[A-Z|a-z|0-9]

[A-Z|a-z|0-9]

[A-Z|a-z|0-9]

[A-Z|a-z|0-9]

[A-Z|a-z|0-9]

67

jawaban [a-z]

8 Nama Aliran data Penghapusan data soal


deskripsi Berisikan aliran data penghapusan data soal

Struktur data Id_soal

Id_soal [0-9]

9 Nama Aliran data Pencarian data soal


deskripsi Berisikan aliran data pencarian data soal

Struktur data Id_soal, soal

Id_soal

soal

[0-9]

[A-Z|a-z|0-9]

14 Nama Aliran data Data siswa

Digunakan pada Guru proses 6 tabel siswa

deskripsi Berisi aliran data siswa

Struktur data Nis+nama+email

Nis

Nama

Emaill

[0-9]

[A-Z|a-z]

[A-Z|a-z|0-9]

15 Nama Aliran data Pencarian data siswa

Digunakan pada Guru proses 6.1 tabel siswa


Struktur data Nis+nama+password

Nis

Nama

password

[0-9]

[A-Z|a-z]

[A-Z|a-z|0-9]

16 Nama Aliran data Penghapusan data siswa

Digunakan pada Guru proses 6.2 tabel siswa


Struktur data Nis+nama+password

Nis

Nama

password

[0-9]

[A-Z|a-z]

[A-Z|a-z|0-9]

17 Nama Aliran data Data Guru

Digunakan pada Guru – proses 7 tabel data Guru

deskripsi Berisis aliran data guru

Struktur data Nip+nama

Username

Nama

[A-Z|a-z|0-9]

[A-Z|a-z|0-9]

18 Nama Aliran data Penambahan data guru

Digunakan pada Guru – proses 7.1

deskripsi Berisis aliran penambahan data guru


Nip

Nama

[A-Z|a-z|0-9]

[A-Z|a-z|0-9]

19 Nama Aliran data Penghapusan data guru


68

deskripsi Berisis aliran penghapusan data guru


Username [A-Z|a-z|0-9]

20 Nama Aliran data Data Molekul

Digunakan pada Guru – proses 8 tabel data molekul

Deskripsi Berisis aliran data molekul

Struktur data Id_molekul, Nama_molekul, id_gm, id_jik, no_atom,

keterangan, gambar

Id_molekul

Nama_molekul

Id_gm

Id_jik

Keterangan

Gambar

No_atom

[0-9]

[A-Z|a-z|0-9]

[0-9]

[0-9]

[A-Z|a-z|0-9]

[A-Z|a-z|0-9]

[0-9]

21 Nama Aliran data Penambahan data molekul


Deskripsi Berisis aliran penambahan data molekul

Struktur data Nama_molekul, id_gm, id_jik, no_atom, keterangan,

gambar

Nama_molekul

Id_gm

Id_jik

Keterangan

Gambar

No_atom

[A-Z|a-z|0-9]

[0-9]

[0-9]

[A-Z|a-z|0-9]

[A-Z|a-z|0-9]

[0-9]

22 Nama Aliran data Edit data molekul


deskripsi Berisis aliran penambahan data molekul


gambar

Nama_molekul

Id_gm

Id_jik

Keterangan

Gambar

No_atom

[A-Z|a-z|0-9]

[0-9]

[0-9]

[A-Z|a-z|0-9]

[A-Z|a-z|0-9]

[0-9]

22 Nama Aliran data Cari data molekul


deskripsi Berisis aliran penambahan data molekul


gambar

Nama_molekul

Id_gm

Id_jik

Keterangan

Gambar

No_atom

[A-Z|a-z|0-9]

[0-9]

[0-9]

[A-Z|a-z|0-9]

[A-Z|a-z|0-9]

[0-9]

22 Nama Aliran data Penghapusan data molekul

69


deskripsi Berisis aliran penghapusan data molekul

Struktur data Id_molekul

Id_molekul [0-9]

3.2 Perancangan Sistem

Perancangan adalah suatu bagian dari metodologi pengembangan

pembangunan suatu perangkat lunak yang dilakukan setelah tahapan untuk

memberikan Gambaran secara terperinci. setelah melalui tahapan analisis. Untuk

dapat melakukan perancangan sistem maka dilakukan beberapa langkah yaitu

sebagai berikut :

1. Perancangan Struktur Menu

2. Perancangan Antarmuka

3. Perancangan Pesan

4. Perancangan Prosedural

5. Jaringan Semantik

Diagram Relasi

Diagram relasi merupakan rangkaian hubungan antara dua tabel atau lebih

pada sistem database. Gambar berikut ini merupakan penjelasan rangkaian database

pada aplikasi Pembelajaran ikatan kimia dapat dilihat pada Gambar 3.27.

70

Gambar 3.27 Skema Relasi

Struktur Tabel

Perancangan struktur tabel adalah perancangan tabel-tabel yang akan

digunakan pada database. Tabel-tabel yang terdapat dalam database yang

digunakan dalam aplikasi pembelajaran ikatan kimia berbasis web:

1. Tabel Siswa

Tabel siswa berfungsi untuk menyimpan data siswa, struktur tabel dapat


Tabel 3.10 Struktur Tabel Siswa

Nama field Tipe Panjang extra kunci Atribut

Nis Integer 11 Primary key Not null

Nama Varchar 30 Not null

password Varchar 50 Not null

Email Varchar 30 Not null

2. Tabel guru

Tabel guru berfungsi untuk menyimpan data guru, struktur tabel dapat


Tabel 3.11 Struktur Tabel Guru

Nama field Tipe Panjang extra kunci atribut

Username_guru Varchar 20 Primary

key

Not null

Nama Varchar 30 Not null

71

Password Varchar 50 Not null

Email Varchar 30 Not null

Hak_akses Int 11

Username_guru_koordinator Varchar 20 Foreign

key

Null

3. Tabel soal

Tabel soal berfungsi untuk menyimpan soal, yang digunakan siswa untuk

evaluasi. Struktur tabel dapat dilihat pada Tabel 3.12

Tabel 3.12 Struktur Tabel Soal

Nama field Tipe Panjang Extra kunci Atribut

Id_soal integer 11 Primary key Not null

pertanyaan text Not null

Opsi_a text Not null

Opsi_b text Not null

Opsi_c text Not null

Opsi_d text Not_null

Opsi_e text Not null

Jawaban text Not null

Username_guru varcahr 20 Foreign key Not null

4. Tabel detail evaluasi

Tabel detail evaluasi berfungsi untuk menyimpan soal yang dikerjakan oleh

siswa. Struktur tabel dapat dilihat pada Tabel 3.13

Tabel 3.13 Struktur Tabel Detail Evaluasi

Nama field Tipe Panjang extra kunci Atribut

Id_de Integer 11 Auto

increment

Primary

key

Not null

Id_soal Integer 11 Foreign key Not null

Nis Integer 11 Foreign key Not null

Opsi_a text Not null

Opsi_b text Not null

Opsi_c text Not null

Opsi_d text Not_null

Opsi_e text Not null

Jawaban_benar text Not null

jawaban varchar 1 Not null

5. Tabel detail jenis ikatan kimia

Tabel jenis ikatan kimia berfungsi untuk menyimpan jenis ikatan kimia

yang digunakan pada sistem periodik unsur interaktif oleh siswa. Struktur tabel

dapat dilihat pada Tabel 3.14

Tabel 3.14 Sturktur Tabel Jenis Ikatan Kimia

Nama field tipe Panjang extra kunci Atribut

Id_JIK integer 11 auto increment Primary key Not null

72

Nama_JIK Varchar 30 Not null

keterangan text Not null

6. Tabel molekul

Tabel molekul berfungsi untuk menyimpan data molekul yang digunakan

pada sistem periodik unsur interaktif oleh siswa. Struktur tabel dapat dilihat pada

Tabel 3.15

Tabel 3.15 Struktur Tabel Molekul


Id_molekul integer 11 auto

increment

Primary key Not null

Nama_utama Varchar 30 Not null

Nama_lain text Not null

Id_JIK integer 11 Foreign key Not null

Keterangan text Not null

Gambar_molekul Varchar 10

Username_guru varchar 20 Foreign key Not

Null

7. Tabel jenis unsur

Tabel jenis unsur berfungsi untuk mengklasifikasi kan atom berdasarkan

jenis unsuru nya, digunakan pada sistem periodik unsur interaktif oleh siswa.

Struktur tabel dapat dilihat pada Tabel 3.16

Tabel 3.16 Struktur Tabel Jenis Unsur


Id_JU integer 11 auto

increment

Primary key Not null

Nama_JU Varchar 20 Not null

warna varchar 7 Not null

8. Tabel atom

Tabel atom berfungsi untuk menyimpan data atom, digunakan pada sistem

periodik unsur interaktif oleh siswa. Struktur tabel dapat dilihat pada Tabel 3.17

Tabel 3.17 Struktur Tabel Atom


No_atom integer 11 Primary key Not null

Id_JU integer 11 Foreign key Not null

Nama_atom varchar 15 Not null

Simbol_atom varchar 3 Not null

Golongan varchar 7 Not null

Periode integer 11 Not null

elektronegatifitas double null

73

9. Tabel detail molekul

Tabel detail molekul berfungsi untuk menyimpan data atom pembentuk

molekul, digunakan pada sistem periodik unsur interaktif oleh siswa. Struktur tabel


Tabel 3.18 Struktur Tabel Detail Molekul


Id_dm integer 11 Primary key Not null

Id_molekul integer 11 Foreign key Not null

no_atom integer 11 Foreign key Not null

Jumlah integer 11 Not null

Perancangan Struktur Menu

Struktur adalah bentuk umum dari suatu rancangan program untuk

memudahkan pemakai dalam menjalankan program komputer. Berikut ini

perancangan struktur Aplikasi Pembelajaran Ikatan kimia berbasis web.

1. Struktur Menu Guru Koordinator

Struktur menu guru koorinator terdiri dari beranda dan guru. Struktur menu

guru dapat dilihat pada Gambar 3.28.

Login

Beranda Guiru

Lupa Password

Gambar 3.28 Struktur Menu Guru Koordinator

2. Struktur Menu Guru

Struktur menu guru terdiri dari beranda, hasil evaluasi, guru, siswa dan soal.

Struktur menu guru dapat dilihat pada Gambar 3.29.

Login

Beranda Siswa Soal Keluar

Lupa Password

Gambar 3.29 Struktur Menu Guru

2. Struktur Menu Siswa

Struktur menu siswa terdiri dari beranda, materi, sistem periodik unsur

interaktif dan evaluasi. struktur menu dapat dilihat pada Gambar 3.30

74

Login

MateriSitem periodik

unsur interaktifEvaluasi Keluar

DaftarLupa Password

Gambar 3.30 Struktur Menu Siswa

Perancangan Antarmuka

Tahapan perancangan antarmuka dalam pembuatan suatu aplikasi

merupakan suatu tahapan yang sangat penting, karena tahapan ini akan menetukan

apakah suatu aplikasi akan memiliki konstruksi yang baik, proses pengolahan data

yang tepat dan akurat, serta memiliki dasar-dasar untuk pengembangan dimasa

yang akan datang. Desain program yang dibuat harus mudah untuk digunakan,

dapat dipahami dan dimengerti oleh pemakai (user), serta informasi yang dihasilkan

dari program tersebut dapat dimengerti oleh pemakai.

a. Perancangan Antarmuka Halaman Login Guru Koordinator

Perancangan antar muka login guru aplikasi pembelajaran ikatan kimia

berbasis web dapat dilihat pada Gambar 3.31.

A01

Navigasi

Isi Field Username/Email

dan

password sesuai data

yang telah ditentukan

Klik tombol login, maka

akan menuju A02

Klik tombol lupa password,

maka

akan menuju A08

APLIKASI PEMBELAJARAN IKATAN KIMIASMAN 7 BANDUNG

Keterangan:

Nama Form

Ukuran Form

Font

Warna Form

: A01 (Halaman Login Guru Koordinator)

:1024x768

:Times New Roman. Size 11 pt, 14 pt, White and black

:Putih

Lupa Password

login

Username/Email

Password

Halaman Login Guru Koordinator

Gambar 3.31 Perancangan Antar Muka Login Guru Koordinator

75

b. Perancangan Antarmuka Halaman Utama Guru Koordinator

Perancangan antar muka halaman utama guru koordinator aplikasi

pembelajaran ikatan kimia berbasis web dapat dilihat pada Gambar 3.32

A02

Navigasi

Pilih menu Beranda maka

akan menuju A01

Sman 7 bandung

Pilih menu hasil evaluasi

maka akan menuju A03

Keterangan:

Nama Form

Ukuran Form

Font

Warna Form

: A02 (Halaman utama guru koordinator)

:1024x768


:Putih

Beranda

Guru

Keluar Selamat datang di halaman guru koordinator Pilih menu guru, akan

menuju A04

Pilih menu siswa

Maka akan menuju A05

Pilih menu Soal maka

akan menuju A06

Pilih menu keluar, maka

Akan menuju A01

Pilih menu molekul, maka

Akan menuju A07

Navigasi


akan menuju A02

Pilih menu guru, akan

menuju A03


Akan menuju A01

LOGO SMAN7 BANDUNG

APLIKASI PEMBELAJARAN IKATAN KIMIA

Gambar 3.32 Perancangan Antarmuka Halaman Utama Guru Koordinator

c. Perancangan Antarmuka Halaman Data Guru

Perancangan antar muka halaman data guru aplikasi pembelajaran ikatan

kimia berbasis web dapat dilihat pada Gambar 3.33.

A03

Navigasi


akan menuju A01

Sman 7 bandung



Keterangan:

Nama Form

Ukuran Form

Font

Warna Form

: A04 (Halaman Data guru)

:1024x768


:Putih


menuju A04

Pilih menu siswa



akan menuju A06


Akan menuju A01

No Nama

Data Guru

Tambah

Aksi

Hapus

Hapus

Hapus

Pilih menu tambah,

maka akan menuju

AF01

Pilih menu hapus,

maka akan menuju

AF02

Navigasi


akan menuju A01


menuju A03


Akan menuju A01

Pilih menu tambah, maka

Akan menuju AF01

Pilih menu hapus, maka

Akan menuju AF02

Username

Beranda

Guru

Keluar

Gambar 3.33 Perancangan Antarmuka Halaman Data Guru

76

d. Perancangan Antarmuka Halaman Tambah Data Guru

Perancangan antar muka halaman tambah data guru aplikasi pembelajaran

ikatan kimia berbasis web dapat dilihat pada Gambar 3.34.

AF01

Navigasi


akan menuju A01

Sman 7 bandung



Keterangan:

Nama Form

Ukuran Form

Font

Warna Form

: AF01 (Halaman Tambah Data guru)

:1024x768


:Putih

Beranda

Guru

Keluar


menuju A04

Pilih menu siswa



akan menuju A06


Akan menuju A01

Username

Nama

Tambah data Guru

Simpan

Pilih menu simpan,

maka akan menuju

A04

Pilih menu keluar,

maka akan menuju

A04

tutup

Navigasi


akan menuju A01


menuju A03


Akan menuju A01

Pilih menu simpan, akan

menuju A03

Pilih menu tutup, akan

menuju A03

Gambar 3.34 Perancangan Antarmuka Halaman Tambah Data Guru

e. Perancangan Antarmuka Halaman Hapus Data Guru

Perancangan antar muka halaman hapus data guru aplikasi pembelajaran


AF02

Navigasi


akan menuju A01

Sman 7 bandung



Keterangan:

Nama Form

Ukuran Form

Font

Warna Form

: AF02 (Halaman Hapus Data guru)

:1024x768


:Putih

Beranda

Guru


menuju A04

Pilih menu siswa



akan menuju A06


Akan menuju A01

Anda yakin ingin menghapus data ini?

Hapus

Pilih menu simpan,

maka akan menuju

A04

Pilih menu keluar,

maka akan menuju

A04

tutup

Navigasi


akan menuju A01


menuju A03


Akan menuju A01

Pilih menu hapus, akan

menuju A03


menuju A03

Keluar

Gambar 3.35 Perancangan Antarmuka Halaman Hapus Data Guru

77

f. Perancangan Antarmuka Halaman Login Guru

Perancangan antar muka halaman login guru aplikasi pembelajaran ikatan


A04

Navigasi

Isi Field Username/Email

dan password sesuai data



akan menuju A05


maka

akan menuju A08APLIKASI PEMBELAJARAN IKATAN KIMIA

SMAN 7 BANDUNG

Keterangan:

Nama Form

Ukuran Form

Font

Warna Form

: A04 (Halaman Login Guru )

:1024x768


:Putih

Lupa Password

login

Username/Email

Password

Halaman Login Guru

Gambar 3.36 Perancangan antar muka halaman login guru

g. Perancangan Antarmuka Halaman Utama Guru

Perancangan antar muka halaman utama guru aplikasi pembelajaran ikatan


A05

Navigasi


akan menuju A01

Sman 7 bandung



Keterangan:

Nama Form

Ukuran Form

Font

Warna Form

: A05 (Halaman utama guru)

:1024x768


:Putih

Beranda

Siswa

Molekul Selamat datang di halaman guru Pilih menu guru, akan

menuju A04

Pilih menu siswa



akan menuju A06


Akan menuju A01


Akan menuju A07

Navigasi


akan menuju A05

Pilih menu siswa, akan

menuju A06

Pilih menu molekul, akan

menuju A08

Pilih menu soal, akan

menuju A07


Akan menuju A04

LOGO SMAN7 BANDUNG

APLIKASI PEMBELAJARAN IKATAN KIMIA

Soal

Keluar

Gambar 3.37 Perancangan Antarmuka Halaman Utama Guru

78

h. Perancangan Antarmuka Halaman Data Siswa

Perancangan antar muka halaman data siswa aplikasi pembelajaran ikatan


A06

Navigasi


akan menuju A01

Sman 7 bandung



Keterangan:

Nama Form

Ukuran Form

Font

Warna Form

: A06 (Halaman Data Siswa)

:1024x768


:Putih

Beranda

Siswa

Soal Pilih menu guru, akan

menuju A04

Pilih menu siswa



akan menuju A06


Akan menuju A01

Nis Nama

Data Siswa Cari

Aksi

Hapus

Hapus

Hapus

Pilih menu hapus

maka akan menuju

AF03

Navigasi


akan menuju A05

Pilih menu siswa



akan menuju A07


Akan menuju A03


Akan menuju A08


Akan menuju AF03

Pilih menu nilai, maka

Akan menuju AF04

Keluar

Molekul

Nilai

Nilai

Nilai

Gambar 3.38 Perancangan Antarmuka Halaman Data Siswa

i. Perancangan Antarmuka Halaman Data Soal

Perancangan antar muka halaman data soal aplikasi pembelajaran ikatan


A07

Navigasi


akan menuju A01

Sman 7 bandung



Keterangan:

Nama Form

Ukuran Form

Font

Warna Form

: A07 (Halaman Data Soal)

:1024x768


:Putih

Beranda

Siswa


menuju A04

Pilih menu siswa



akan menuju A06


Akan menuju A01

No Pertanyaan

Data Soal

Tambah


Akan menuju AF04

Pilih menu no, maka

Akan menuju AF05

Navigasi


akan menuju A05

Pilih menu siswa



akan menuju A07


Akan menuju A03


Akan menuju A08


Akan menuju AF05

Pilih menu edit, maka

Akan menuju AF06


Akan menuju AF07

Pilih menu cari, maka

Akan menuju AF08

Keluar

Molekul

Aksi

Cari

Edit Hapus

Edit Hapus

Edit Hapus

Gambar 3.39 Perancangan Antarmuka Halaman Data Soal

79

j. Perancangan Antarmuka Halaman Data Molekul

Perancangan antar muka halaman data molekul aplikasi pembelajaran ikatan


A08

Navigasi


akan menuju A01

Sman 7 bandung



Keterangan:

Nama Form

Ukuran Form

Font

Warna Form

: A08 (Halaman Data Molekul)

:1024x768


:Putih

Beranda

Siswa


menuju A04

Pilih menu siswa



akan menuju A06


Akan menuju A01


Akan menuju AF04

Pilih menu no, maka

Akan menuju AF05

Navigasi


akan menuju A05

Pilih menu siswa



akan menuju A07


Akan menuju A03


Akan menuju A08

Pilih menu tambah akan

menuju AF09

Pilih menu hapus akan

menuju AF10

Keluar

Molekul

No Nama

Data Molekul Cari

Rumus Molekul

Hapus

Hapus

Hapus

Aksi

Tambah

Edit

Edit

Edit

Gambar 3.40 Perancangan Antarmuka Halaman Data Molekul

k. Perancangan Antarmuka Halaman Hapus Data Siswa

Perancangan antar muka halaman hapus data siswa aplikasi pembelajaran


AF03

Navigasi


akan menuju A01

Sman 7 bandung



Keterangan:

Nama Form

Ukuran Form

Font

Warna Form

: AF03 (Halaman Hapus Data siswa)

:1024x768


:Putih

Beranda

Siswa


menuju A04

Pilih menu siswa



akan menuju A06


Akan menuju A01


Hapus

Pilih menu simpan,

maka akan menuju

A05

Pilih menu keluar,

maka akan menuju

A05

tutup

Navigasi


akan menuju A05


menuju A06


menuju A07


menuju A08


Akan menuju A04

Pilih menu hapus akan

menuju ke A06

Pilih menu tutup akan

menuju ke A06

Keluar

Molekul

Gambar 3.41 Perancangan Antarmuka Halaman Hapus Data Siswa

80

l. Perancangan Antarmuka Halaman Tambah Data Soal

Perancangan antar muka halaman tambah data soal aplikasi pembelajaran


AF05

Navigasi


akan menuju A01

Sman 7 bandung



Keterangan:

Nama Form

Ukuran Form

Font

Warna Form

: AF05 (Halaman Tambah Data Soal)

:1024x768


:Putih


menuju A04

Pilih menu siswa



akan menuju A06


Akan menuju A01

Tambah data Soal

Simpan

Pilih menu simpan,

maka akan menuju

A06

Pilih menu keluar,

maka akan menuju

A06

Navigasi


akan menuju A05


menuju A06


menuju A07


menuju A08


Akan menuju A04

Pilih menu kembali akan

menuju A08

Pilih menu simpan akan

menuju A08

Kembali

Pertanyaan B U I Xy

X y

Opsi A B U I Xy

X y

Opsi B B U I Xy

X y

Opsi C B U I Xy

X y

Opsi D B U I Xy

X y

Opsi E B U I Xy

X y

Jawaban Benar A B C D E

Beranda

Siswa

Soal

Keluar

Molekul

Gambar 3.42 Perancangan Antarmuka Halaman Tambah Data Soal

m. Perancangan Antarmuka Halaman Edit Data Soal

Perancangan antar muka halaman edit data soal aplikasi pembelajaran ikatan


AF06

Navigasi


akan menuju A01

Sman 7 bandung



Keterangan:

Nama Form

Ukuran Form

Font

Warna Form

: AF06 (Edit Data Soal)

:1024x768


:Putih

Beranda

Hasil Evaluasi

Guru

Siswa

Soal

Molekul


menuju A04

Pilih menu siswa



akan menuju A06


Akan menuju A01

Edit data Soal

Simpan

Pilih menu simpan,

maka akan menuju

A06

Pilih menu keluar,

maka akan menuju

A06

Navigasi


akan menuju A01




menuju A04

Pilih menu siswa



akan menuju A06


Akan menuju A01


Akan menuju A07


menuju A06


menuju A06

Keluar

Kembali

Pertanyaan B U I Xy

X y

Opsi A B U I Xy

X y

Opsi B B U I Xy

X y

Opsi C B U I Xy

X y

Opsi D B U I Xy

X y

Opsi E B U I Xy

X y

Jawaban Benar A B C D E

Gambar 3.43 Perancangan Antarmuka Halaman Edit Data Soal

81

n. Perancangan Antarmuka Halaman Hapus Data Soal

Perancangan antar muka halaman hapus data soal aplikasi pembelajaran


AF07

Navigasi


akan menuju A01

Sman 7 bandung



Keterangan:

Nama Form

Ukuran Form

Font

Warna Form

: AF07(Halaman Hapus Data Soal)

:1024x768


:Putih


menuju A04

Pilih menu siswa



akan menuju A06


Akan menuju A01


Hapus

Pilih menu simpan,

maka akan menuju

A05

Pilih menu keluar,

maka akan menuju

A05

tutup

Navigasi


akan menuju A01


menuju A03


Akan menuju A01


menuju A07


menuju A07

Beranda

Guru

Keluar

Gambar 3.44 Perancangan Antarmuka Halaman Hapus Data Soal

o. Perancangan Antarmuka Halaman Edit Data Molekul

Perancangan antar muka halaman edit data molekul aplikasi pembelajaran


AF08

Navigasi


akan menuju A01

Sman 7 bandung



Keterangan:

Nama Form

Ukuran Form

Font

Warna Form

: AF08 (Halaman Edit Data Molekul)

:1024x768


:Putih

Beranda

Hasil Evaluasi

Guru

Siswa

Soal


menuju A04

Pilih menu siswa



akan menuju A06


Akan menuju A01

Tambah data Molekul

Simpan

Pilih menu simpan,

maka akan menuju

A04

Pilih menu keluar,

maka akan menuju

A04

tutup

Navigasi


akan menuju A01


menuju A03


Akan menuju A01


menuju A08


menuju A08

Keluar

MolekulPilih fileGambar

Atom ke 1 Jumlah

Atom ke 2 Jumlah

Keterangan

Nama Utama

Nama Lain

Geometri Molekul

Jenis Ikatan Kimia

Atom ke N Jumlah

Gambar 3.45 Perancangan Antarmuka Halaman Edit Data Molekul

83

p. Perancangan Antarmuka Halaman Tambah Data Molekul

Perancangan antar muka halaman tambah data molekul aplikasi

pembelajaran ikatan kimia berbasis web dapat dilihat pada Gambar 3.46.

AF09

Navigasi


akan menuju A01

Sman 7 bandung



Keterangan:

Nama Form

Ukuran Form

Font

Warna Form

: AF09 (Halaman Tambah Data Molekul)

:1024x768


:Putih

Beranda

Hasil Evaluasi

Guru

Siswa

Soal


menuju A04

Pilih menu siswa



akan menuju A06


Akan menuju A01

Tambah data Molekul

Simpan

Pilih menu simpan,

maka akan menuju

A04

Pilih menu keluar,

maka akan menuju

A04

tutup

Navigasi


akan menuju A01


menuju A03


Akan menuju A01


menuju A08


menuju A08

Keluar

MolekulPilih fileGambar

Atom ke 1 Jumlah

Atom ke 2 Jumlah

Keterangan

Nama Utama

Nama Lain

Geometri Molekul

Jenis Ikatan Kimia

Atom ke N Jumlah

Gambar 3.46 Perancangan Antarmuka Halaman Tambah Data Molekul

q. Perancangan Antarmuka Halaman Hapus Data Molekul

Perancangan antar muka halaman hapus data molekul aplikasi pembelajaran


AF010

Navigasi


akan menuju A01

Sman 7 bandung



Keterangan:

Nama Form

Ukuran Form

Font

Warna Form

: AF10(Halaman Hapus Data Molekul)

:1024x768


:Putih


menuju A04

Pilih menu siswa



akan menuju A06


Akan menuju A01


Hapus

Pilih menu simpan,

maka akan menuju

A05

Pilih menu keluar,

maka akan menuju

A05

tutup

Navigasi


akan menuju A01


menuju A03


Akan menuju A01


menuju A08


menuju A08

Beranda

Siswa

Soal

Keluar

Molekul

Gambar 3.47 Perancangan Antarmuka Halaman Hapus Data Molekul

84

r. Perancangan Antarmuka Halaman Lupa Password

Perancangan antar muka halaman login siswa aplikasi pembelajaran ikatan


A08

Navigasi

Isi Field email sesuai data


Klik tombol submit, akan

menuju A01

SMAN 7 BANDUNG

Keterangan:

Nama Form

Ukuran Form

Font

Warna Form

: A08 (Halaman Lupa Password)

:1024x768


:Putih

Lupa Password

Tulis kan email anda

Submit

Gambar 3.48 Perancangan Antarmuka Lupa Password

s. Perancangan antar muka halaman login siswa

Perancangan antar muka halaman login siswa aplikasi pembelajaran ikatan

kimia berbasis web dapat dilihat pada Gambar 3.49

T01

Navigasi

Isi Field Nis dan

password sesuai data



akan menuju T02

Klik tombol daftar, maka

akan menuju T03


maka

akan menuju T04

Keterangan:

Nama Form

Ukuran Form

Font

Warna Form

: T01 (Halaman Login Siswa)

:1024x768


:Putih

Daftar Lupa Password

login

NIS

Password

APLIKASI PEMBELAJARAN IKATAN KIMIASMAN 7 BANDUNG

HALAMAN LOGIN SISWA

Gambar 3.49 Perancangan Antar Muka Halaman Login Siswa

85

t. Perancangan antar muka halaman daftar siswa

Perancangan antar muka halaman daftar siswa aplikasi pembelajaran ikatan


T02

Navigasi

isi Field NiS, Passord dan

Konfirmasi passowrd

sesuai data



akan menuju T03

Keterangan:

Nama Form

Ukuran Form

Font

Warna Form

: T02 (Halaman Daftar Siswa)

:1024x768


:Putih

SMAN 7 BANDUNG

Kirim

Password

NIP

Konfirmasi Password

Gambar 3.50 Perancangan Antar Muka Halaman Daftar Siswa

u. Perancangan antar muka halaman Utama Siswa

Perancangan antar muka halaman materi aplikasi pembelajaran ikatan kimia

berbasis web dapat dilihat pada Gambar 3.51

T03

Navigasi

Klik tombol materi

Akan menuju T04

Keterangan:

Nama Form

Ukuran Form

Font

Warna Form

: T03 (Beranda Siswa)

:1024x768


:Putih

Logo SMAN 7 Bandung

Materi

Sistem Periodi unsur

interaktif

Evaluasi

Keluar

Klik tombol sistem periodik

unsur Interaktif maka

akan menuju T05

Klik tombol evaluasi

maka akan menuju

T06

Klik tombol keluar

maka akan menuju

T07

Gambar 3.51 Perancangan Antar Muka Halaman Materi

86

v. Perancangan antar muka halaman materi

Perancangan antar muka halaman sistem periodik unsur interaktif aplikasi

pembelajaran ikatan kimia berbasis web dapat dilihat pada Gambar 3.52

T05

Navigasi

Klik tombol selanjutnya,

maka akan menuju T04

Klik tombol sebelumnya,


Klik tombol halaman depan


Klik tombol keluar maka

akan menuju T01

Keterangan:

Nama Form

Ukuran Form

Font

Warna Form

: T05 (Materi)

:1024x768


:Putih

Halaman Depan Keluar

SelanjutnyaSebelumnya

Isi materi

Gambar 3.52 Perancangan Antar Muka Halaman Materi

w. Perancangan antar muka halaman sistem periodik unsur interaktif

Perancangan antar muka halaman evaluasi aplikasi pembelajaran ikatan


T06

Navigasi

Klik tombol halaman

depan maka akan menuju

T02

Keterangan:

Nama Form

Ukuran Form

Font

Warna Form

: T06 (sistem periodik unsur interaktif)

:1024x768


:Putih

Sistem periodik unsur interaktif

Stage eksperimen

Halaman Depan

Gambar 3.53 Perancangan Antar Muka Halaman Evaluasi

87

x. Perancangan antar muka halaman evaluasi

Perancangan antar muka halaman evaluasi aplikasi pembelajaran ikatan


T07

Navigasi

Keterangan:

Nama Form

Ukuran Form

Font

Warna Form

: T07 (Evaluasi)

:1024x768


:Putih

Halaman Depan

Klik tombol halaman

depan maka akan menuju

T02

Klik tombol keluar

maka akan menuju

T01

Keluar

Selanjutnyasebelumnya

Klik tombol selanjutnya,


Klik tombol sebelumnya,


1. Soal Evaluasi

A. opsi a

B. opsi b

C. opsi c

D. opsi d

E. opsi e

Gambar 3.54 Perancangan Antar Muka Halaman Evaluasi

Perancangan Pesan

Pada tabel dibawah ini merupakan perancangan pesan yang terdapat pada

aplikasi pembelajaran ikatan kimia berbasis web. Adapun tampilan pesan yang ada


Tabel 3.19 Perancangan Pesan

Kode Pesan

P01 Username/Email harus diisi

P02 Password harus diisi

P03 Username/email password salah

P04 Email harus diisi

P05 Email tidak valid

P06 Permintaan lupa password telah kami

proses,

Silahkan cek email anda

P07 Maaf, email yang anda masukkan, tidak

ditemukan, mohon cek kembali

P08 Username harus diisi

P09 Nama harus diisi

P10 Username guru minimal 5 karakter

P11 Username guru maximal 20 karakter

P12 Guru berhasil ditambah

P13 Guru dengan username tersebut sudah ada

88

P14 Guru berhasil dihapus

P15 Siswa berhasil dihapus

P16 Geometri molekul harus diisi

P17 Jenis ikatan harus dipilih

P18 Molekul berhasil ditambah

P19 Molekul berhasil diubah

P20 Molekul berhasil dihapus

P21 Pertanyaan harus diisi

P22 Opsi A harus diisi

P23 Opsi B harus diisi

P24 Opsi C harus diisi

P25 Opsi D harus diisi

P26 Opsi E harus diisi

P27 Jawaban benar harus dipilih

P30 Soal berhasil ditambah

P31 Soal berhasil diubah

P32 Soal berhasil dihapus

P33 Nis / Email harus diisi


P35 Email harus diisi

P36 Email tidak Valid



P38 Nis harus diisi


P40 Email harus

P41 Email tidak valid

P42 Nama Harus diisi

P43 Konfirmasi password harus

P44 Password min 7 karakter

P45 Password dan konfirmasi password tidak

sama



P47 Maaf, Siswa dengan Nis tersebut sudah

ada, mohon konfirmasi dengan guru

P48 Maaf, Siswa dengan Email tersebut sudah

ada, mohon konfirmasi dengan guru

Jaringan semantik

Jaringan semantik menggambarkan keterhubungan navigasi menu dari satu

form ke form lainnya. Gambar dan gambar merupakan gambar jaringan semantik

guru dan siswa.

89

Jaringan semantik guru

Jaringan semantik Guru dapat dilihat pada Gambar 3.55

A01

P01,

P02,

P03

A02A03 A04

A05

A06

AF01

P04

AF02

P06

AF03

P06

AF04

AF05

P07

A08

P08

P09

P19

AF06

P05

P20

P21

P22

P23

P24

P25

P26

AF03

P20

P21

P22

P23

P24

P25

P26

P06

P04

P06

A07

AF07

AF08

AF09

P05P27

P28

P29

P27

P28

P29

P04

P06

Gambar 3.55 Jaringan Semantik Guru

Jaringan semantik siswa

Jaringan semantik siswa dapat dilihat pada Gambar 3.56

T01 T03

T07

T06

T02

T05

P07

P10

P01,

P02,

P03

T04

P08

P09

Gambar 3.56 Jaringan Semantik Siswa

90

Perancangan Prosedural

Perancangan prosedural merupakan elemen-elemen struktural dari

arsitektur program ke dalam suatu deskripsi prosedural dari komponen-komponen

perangkat lunak. Perancangan prosedural meliputi prosedural login, procedural

pendaftaran, prosedural evaluasi, prosedural tambah data, prosedural ubah data dan

prosedural hapus data.

Prosedural Pendaftaran

Prosedur pendaftaran merupakan langkah-langkah siswa saat melakukan

pendaftaran. Prosedural Pendaftaran dapat dilihat Gambar 3.57.

91

Mulai

Masukkan

nis, nama,

password

dan

konfirmasi

password

Pengecekan

kosong/tidak field

Kosong?

Tampil pesan

“field harus

diisi”

tidak

ya

tidak

ya

Pengecekan valid/

tidak field

Valid?

Pengecekan

sesuai/tidak field

password dan

Konfirmasi

password

sesuai

Pengecekan nis

terdaftar/belum di

database

terdaftar

Data disimpan di

database

selesai

ya

tidak

Tampil pesan

“field tidak

valid”

tidak

Tampil pesan

“password dan

konfirmasi

password t idak

sesuai”

ya

Tampil pesan “, Siswa

dengan Nis tersebut

sudah ada, mohon

konfirmasi dengan gurur”

Pengecekan email

terdaftar/belum di

database

terdaftar

Tampil pesan “, Siswa

dengan Email tersebut

sudah ada, mohon

konfirmasi dengan gurur”

ya

Tidak

Gambar 3.57 Prosedural Pendaftaran

92

Prosedural lupa password

Prosedur login merupakan langkah-langkah guru dan siswa saat melakukan

login. Prosedural login dapat dilihat pada Gambar 3.58.

Mulai

Masukkan

Email

Pengecekan

kosong/tidak field

Email

Kosong?

Tampil pesan

“email harus

diisi”

ya

Pengecekan valid/

tidak email yang

dimasukkan

tidak

Valid?

Tampil pesan

“Email tidak

Valid”

tidak

Pengecekan ada/

tidak email

didatabase

ya

Ada/tidak?

Tampil pesan

“Maaf, email yang

anda masukkan,

tidak ditemukan,

mohon cek kembali.

tidak

Selesai

Tampil pesan

“Permintaan lupa password

telah kami proses,

Silahkan cek email anda.

Terimakasih”.

ada

Gambar 3.58 Prosedural Lupa Password

93

Prosedural Login

Prosedur Login merupakan langkah-langkah siswa saat melakukan proses

login. Prosedural login dapat dilihat pada Gambar 3.59

Mulai

Masukkan

Username

dan

passowrd

Pengecekan

kosong/tidak field

Username

Kosong?

Tampil pesan

“username

harus diisi”

ya

Pengecekan

kosong/tidak field

password

tidak

Kosong?

Tampil pesan

“password

harus diisi”

ya

Pengecekan

validasi login

tidak

valid

Tampil pesan “Maaf.

Username/Email atau

Password yang

dimasukan salah”

tidak

Login berhasil

Tampilan

halaman utama

Selesai

ya

.

Gambar 3.59 Prosedural Login

94

Prosedural Tampil Sub bab Materi

Prosedural tampil subbab materi merupakan langkah-langkah siswa saat

ingin melihat materi. Prosedural tampil subbab materi dapat dilihat pada Gambar

3.60

Mulai

Pilih menu

subbab

Tampil Subbab

Materi

Selesai

Gambar 3.60 Prosedural Tampil Sub bab Materi

Prosedural Menggabungkan Atom

Prosedural evaluasi merupakan langkah-langkah siswa saat melakukan evaluasi.

Prosedural login dapat dilihat Gambar 3.61

Mulai

Pilih atom

Selesai

Pengecekan atom-

atom membentuk

Molekul

Terbentuk?

Tampil

informasi

Molekul

Ya

Tidak

Menggabungkan

Atom-atom

Gambar 3.61 Prosedural Menggabungkan Atom

95

Prosedural Tampil Informasi Atom

Prosedural tampil informasi atom merupakan langkah-langkah siswa untuk melihat

informasi tentang atom. Prosedural informasi atom dapat dilihat Gambar 3.62

Mulai

Pilih atom

Tampil

informasi atom

Selesai

Gambar 3.62 Prosedural Tampil Informasi Atom

96

Prosedural Pengolahan data Jawaban

Prosedural evaluasi merupakan langkah-langkah siswa saat melakukan

evaluasi. Prosedural login dapat dilihat pada Gambar 3.63

Apakah

jawaban benar

Memeriksa

jawaban

Pilihan

evaluasi

Tampilan

jawaban benar

Input

jawaban

Nilai = 0

i = 0

j=jumlh_soal

n=100/j

Mulai

Nilai = Nilai + n

i++

I >= j

Tampilan

jawaban salah

Tampilan total

nilai

Selesai

tidak

ya

ya

tidak

Gambar 3.63 Prosedural Pengolahan Data Jawaban

97

Prosedural tambah data

Prosedur tambah data merupakan langkah-langkah guru saat melakukan

tambah data. Prosedural login dapat dilihat pada Gambar 3.64

Field yang ditambah lengkap

Pemeriksaan data yang akan ditambah

Tampilan pesan “data

berhasil disimpan”

Masukkan data yang

akan ditambah

Mulai

Tampilan pesan “field harus diisi”

Selesai

ya

Tidak

Field yang ditambah valid

Tampilan pesan “field tidak valid”

ya

Tidak

.

Gambar 3.64 Prosedural Tambah Data

98

Prosedural Cari data

Prosedur cari data merupakan langkah-langkah guru saat melakukan

pencarian data. Prosedural cari data dapat dilihat pada Gambar 3.66

ada

Pencarian data

Tampilkan data yang dicari

Mulai

Selesai

Tidak

ya

Masukkan data yang ingin dicari

Tampilan pesan “Data yang dicari tidak ditemukan

.

Gambar 3.65 Prosedural Cari Data

99

Prosedural ubah data

Prosedur ubah data merupakan langkah-langkah guru saat melakukan ubah

data. Prosedural ubah data dapat dilihat pada Gambar 3.66

Periksa field yang diubah lengkap

Pemeriksaan data yang akan diubah


berhasil diubah”

Mulai

Tampilan pesan “field

harus dilengkapi”

Selesai

Ya

Ya

Tidak

Pilih data yang akan diuabah

Periksa field yang diubah valid

Tampilan pesan “field tidak valid”

Tidak

.

Gambar 3.66 Prosedural Ubah Data

100

Prosedural hapus data

Prosedur hapus data merupakan langkah-langkah guru saat melakukan

hapus data. Prosedural hapus data dapat dilihat pada Gambar 3.67

Hapus?

Pemeriksaan data yang akan dihapus


berhasil dihapus”

Mulai

Selesai

Tidak

ya

Pilih data yang akan dihapus

Gambar 3.67 Prosedural Hapus Data

3. bab 3 analisis dan perancangan...

Documents