3. BAB 3 ANALISIS DAN PERANCANGAN SISTEM

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

31

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.

Seleksi bahan materi Menyediakan soal evaluasi

Menyajikan Materi Menyajikan Evaluasi Menyimpan hasil evaluasi

Menyajikan hasil evaluasi siswa

Menjawab Pertanyaan

Pengajar

Pelajar

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 Menentukan bahan percobaan

Menyajikan masalah Menyajikan Informasi

Melakukan percobaan

Pengajar

Pelajar

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.

Data Guru Menampilkan halaman guru koordinator aplikasi Pembelajaran ikatan kimia

Materi Data Siswa Sistem periodik unsur interaktif Menampilkan aplikasi Pembelajaran ikatan kimia

Data Soal Evaluasi

Data Molekul Menampilkan halaman guru aplikasi Pembelajaran ikatan kimia

DATABASE

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. Atom

Jenis_unsur

Detail_ molekul

Tidak ada

Siswa menggabungkan atom 1 dengan atom lainnya dengan cara drag and drop

Halaman Sistem periodik unsur interaktif

Informasi molekul (teks, animasi 2D, 3D interaktif)

Geometri_molekul

Molekul

Cek hasil penggabungan

Pengecekan molekul

Ada

Jenis_ikatan_kimia

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

Soal

Halaman Evaluasi

Siswa menjawab setiap soal yang diberikan dengan cara mengklik pilihan yang disediakan

Cek hasil jawaban

Hasil jawaban

ada Total Nilai (teks)

Tidak

Cek jumlah soal

Detail_evaluasi

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

2

Informasi

3

Grafis

Aplikasi ini memiliki menu yaitu: 1. Menu Materi dan Evaluasi 2. Menu Sistem periodik unsur, pengenalan atom dan simulasi ikatan kimia Memberikan informasi mengenai materi ikatan kimia, antara lain informasi atom beserta nilai-nilai property nya, jenis ikatan kimia yang disampaikan berupa teks dan animasi 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. Arsitektur Client

Arsitektur Server

Materi

Sistem Periodik Unsur Interaktif

Login.php

Javascript

CSS

Include/modul.php

Evaluasi.php

Halaman Guru Koordinator

Halaman Guru

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 LocalStorage Atom

siswa

Molekul

Guru

Jenis Ikatan Kimia

Evaluasi

Detail Molekul

Soal

Geometri molekul Jenis Unsur

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 2

SKPL-PBKF-01 SKPL-PBKF-02

3 4 5 6

SKPL-PBKF-03 SKPL-PBKF-04 SKPL-PBKF-05 SKPL-PBKF-06

Siswa dapat memilih dan melihat materi Siswa dapat melakukan eksperimen ikatan kimia Siswa dapat melakukan evaluasi Guru dapat mengolah data soal Guru dapat mengolah data molekul 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 1 2

Kode kebutuhan SKPL-PBKNF-01 SKPL- PBKNF -02

3

SKPL- PBKNF -03

4

SKPL- PBKNF -04

Deskripsi Kebutuhan Sistem yang dibangun berbasis Website Menggunakan tampilan yang menarik dan interaktif Aplikasi akan menampilkan data sesuai dengan keinginan pengguna 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 nonfungsional 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 1 2 3 4 5 6 7 8 9

Perangkat Keras Prosessor Monitor VGA Hardisk Memori Lan Card Koneksi Keyboard Mouse

Spesifikasi Processor dengan kecepatan minimal 1,8 Ghz Monitor dengan resolusi 1024 x 768 VGA minimal 256 MB 160 GB RAM minimal 1 GB Lan Card 10/100 Mbps Koneksi Internet minimal 64 kbps. Standar 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 Sistem Operasi Browser

Spesifikasi Microsoft Windows 7 32 bit Mozilla Firefox 4, Chrome 10, IE 9

Kebutuhan Minimum Perangkat Microsoft Windows, Linux, Mac OS

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 Guru

Guru Koordinator Siswa

Hak Akses Mengelolah data molekul, siswa, dan soal Mengelolah data guru Membaca materi, Melakukan eksperimen pemahaman materi, melakukan evaluasi belajar.

Tanggung Jawab Tambah, edit dan hapus data molekul, siswa dan soal Tambah, edit dan hapus data guru Membaca materi, Melakukan eksperimen pemahaman materi, melakukan evaluasi belajar.

Tingkat keterampilan Mengerti komputer dan internet Mengerti komputer dan internet Mengerti komputer dan 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

Id_soal Id_jawaban

Mengelola

N

Soal

N

Id_soal

nis

Mengerjakan

1

N Username_guru

N

nis

Mengelola

Guru

Siswa nama

1 id_gm

1

1

Memiliki

Geometri Molekul

N

Id_molekul

Mengelola

N

Molekul

N

Id_ikatan

Jenis_ikaktan_kimia

1

Memiliki

N

Id_atom

Id_atom

Memiliki

N

Id_molekul

N

Id_jenis

Jenis Unsur

1

Gambar 3.16 Entity Relationship Diagram (ERD)

Tabel 3.7 Kamus Data Entity Relationship Diagram (ERD)

No Nama Entitas atau Relasi 1 Siswa 2 Guru 3 Atom 4

Molekul

5 6 7

Detail_molekul Jenis_ikatan_kimia Geometri_molekul

Atom

Atribut nis, nama, password, email Username_guru, nama, password, hak_akses id_atom, id_ju, nama_atom, simbol_atom, periode, golongan, elektronegatifitas id_molekul, gambar, id_jik, username_guru, id_gm, keterangan Id_dm, id_molekul, no_atom, jumlah Id_jik, nama_ikatan, keterangan Id_gm, nama_gm

Memiliki

49

8

Soal

9

Detail_Evaluasi

10

Jenis_unsur

Id_soal, pertanyaan, opsi_a, opsi_b, opsi_c, opsi_d, opsi_d, jawaban, username_guru Id_de, Id_soal,nis, opsi_a, opsi_b, opsi_c, opsi_d, opsi_d, jawaban, jawaban_benar 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. Guru Koordinator

Informasi Login Informasi lupa password Informasi Guru

Siswa

Data Login Data Pendaftaran Data lupa password Data sub bab Materi Data Atom Data Molekul Data Jawaban Data Nilai

Informasi Login Informasi Pendaftaran Informasi lupa password Informasi Atom Informasi Molekul Informasi Jawaban Informasi Nilai

Data Login Data lupa password Data Guru

Aplikasi Pembelajaran Ikatan Kimia

Data Login Data lupa password Data Soal Data Siswa Data Molekul Guru

Informasi Login Informasi lupa password Informasi Soal Informasi Siswa Informasi Molekul Info lupa password

Mail Server

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

Data Mole kul

Data Mole kul Data G eometri Mole kul Data A tom Data A tom Data Jenis_ikatan_kimia

10 Tampil Sistem Periodik Unsur Interaktif

Data A tom Info rma si Atom Info rma si Molekul

Info rma si Sub ba b Materi

9 Tampil Sub bab Materi

Data Sub bab Materi

Data siswa

6 Pengolahan Data Siswa

Data S iswa

Info Siswa

Data siswa

Data Nilai

Data soal

5 Pengolahan Data Soal

Info So al Info rma si Soa l

Soal

Siswa

Data soal Data Jawaban Data soal

Info rma si Jawaban Data Jawaban

Data soal Data ni lai Data ni lai

4 Pengolahan Data Jawaban

Data Jawaban

Siswa

Nilai

Detail_ evaluasi Data P endafta ran

Data P endafta ran

3 Pendaftaran

Data P endafta ran

Info rma si Pen daftara n

Mail server

Info rma si Lup a P assword Data E mai l

2 Verivikasi Lupa Password

Data gu ru Info rma si guru

Info rma si Lup a p assword

Data gu ru Info rma si guru

Data Lo gin Info rma si Log in


Data siswa Data siswa

1 Login

Data gu ru Data gu ru Data gu ru Data gu ru


Guru

Guru Koordinator

Info rma si Gur u Data G uru

Data gu ru

7 Pengolahan Data Guru

Data gu ru

Data jeni s_ikatan_kimia Data atom

Data mole kul Info rma si molekul

8 Pengolahan Data Molekul

Data Geo me tri_molekul

Data de tai l_molekul Data de tai l_molekul Data mole kul Data mole kul

Gambar 3.18 DFD level 1

Guru

Jenis_ikatan_kimia Atom Geometri_molekul Detail_molekul Molekul

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. informasi Validasi Email

Data Email

2.1 Memvalidasi Email

Data email

siswa

informasi Pencarian Email

2.2 Mencari Email

Data email

Siswa

Data email

informasi URL lupa password

2.3 Mengirim URL lupa password

Data URL

Mail Server

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 Data Soal Soal

Data Soal informasi soal

4.1 Pengolahan Jawaban

Data Jawaban

informasi Nilai siswa

4.2 Pengolahan Nilai

Data Jawaban

Data Jawaban

Data Nilai

Detail_evaluasi

Data Nilai

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 informasi soal

5.1 Tambah Data soal

Data soal

informasi soal Guru Data soal

Data soal informasi soal

informasi soal

5.2 Edit Data soal

5.3 Hapus Data soal

Data soal

Data soal

Data soal

soal

Data soal

Data soal Data soal

Data soal

5.4 Cari 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. Prosesproses tersebut dapat dilihat pada Gambar 3.22 Guru

siswa

Data siswa informasi siswa

informasi siswa Data siswa

6.1 Hapus Data siswa

Data siswa Data siswa

Data siswa 6.2 Cari 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. Prosesproses tersebut dapat dilihat pada Gambar 3.23 informasi Guru

Data Guru

7.1 Tambah Data Guru

Data Guru

Data Guru

Guru Koordinator

Guru

7.2 Hapus Data Guru

Data Guru informasi 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 informasi molekul

Data molekul Data detail_molekul

Data molekul

8.1 Tambah Data molekul

Data molekul Data geometri_molekul Data jenis_ikatan_kimia

Data atom

Atom

Geometri_molekul

Data atom

8.2 Edit Data molekul

informasi molekul

Guru

Data geometri_molekul

Data molekul

Data jenis_ikatan_kimia Data molekul

molekul

Data molekul

Data detail_molekul

Jenis_ikatan_kimia Detail_molekul Data jenis_ikatan_kimia

Data atom Data molekul

informasi molekul

8.3 Cari Data molekul

Data geometri_molekul Data molekul Data molekul

Data detail_molekul

Data molekul

8.4 Hapus Data molekul

Data molekul

Data molekul

informasi 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. 9.1 Tampil Sub bab Kestabilan Unsur

Informasi Materi kestabilan unsur Data Materi kestabilan unsur

Informasi Struktur/Rumus Lewis Data Struktur/Rumus Lewis

Informasi Ikatan Ionik Data Ikatan Ionik

Informasi Ikatan Kovalen

siswa Data Ikatan Kovalen

Data Ikatan Logam Informasi Ikatan Logam

Data Senyawa Ionik Dan Kovalen

Informasi Senyawa Ionik Dan Kovalen

Data Materi Geometri Elektron Da n Ker ja S ama Dala m Ikatan Kimia

Info rma si Materi G eometri E lektro n Dan Ker ja S ama Dala m Ikatan Kimia

9.2 Tampil Sub bab Struktur/Rumus Lewis

9.3 Tampil Sub bab Ikatan Ionik

9.4 Tampil Sub bab Ikatan Kovalen

9.5 Tampil Sub bab Ikatan Logam

9.6 Tampil Sub bab Senyawa Ionik Dan Kovalen

9.7 Tampil Sub bab Geometri Elektron Dan Kerja 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. Informasi molekul

Data atom

10.1 Menggabungkan atom

Data molekul Data Geometri_molekul

Data detail_molekul

Detail_molekul

Geometri_molekul Data Jenis_ikatan_kimia

Data Molekul

Molekul

Jenis_ikatan_kimia

Atom

Siswa

10.2 Tampil Informasirmasi atom

Data atom

Informasi atom

Data atom

Data atom

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 1 No. Proses Nama Source (Sumber) Deskripsi Input Output Logika Proses

2

No. Proses Nama Source (Sumber) Deskripsi

Keterangan 1 Login Siswa, Guru Proses untuk bisa mengakses aplikasi pembeajaran ikatan kimia berbasis web Data login guru, data login Siswa Info login guru, info login Siswa. 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 Lupa password Siswa, Guru, Guru koordinator Proses merubah password, karena guru/guru koordinator/siswa lupa password

57

Input Output Logika Proses

3

4

5

6

No.Proses Nama Source (Sumber) Deskripsi Input Output Logika Proses

No.Proses Nama Source (Sumber) Deskripsi Input Output Logika Proses No.Proses Nama Source (Sumber) Deskripsi Input Output Logika Proses

No.Proses Nama Source (Sumber) Deskripsi Input

Email Info email valid 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 Pendaftaran Siswa Proses untuk melakukan pendaftaran Data Siswa Info Siswa 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 Pengolahan jawaban Siswa Pengisisan jawaban pada evaluasi Data jawaban siswa, Info jawaban 1. Siswa memilih jawaban pada soal evaluasi 2. Sistem akan menyimpan jawaban siswa, dan mengakumulasikan nya menjadi nilai 5 Pengolahan data soal Guru Proses untuk melakukan pengolahan data soal Data soal Info soal 1. Guru memilih menu soal 2. Guru melakukan pengolahan data soal 3. Sistem akan menampilkan info soal, serta tombol untuk melakukan pengolahan data soal 5.1 Tambah data soal Guru Proses untuk melakukan penambahan data soal Data soal

58

Output Logika Proses

7

8

9




Info soal 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 5.2 Edit data soal Guru Proses untuk melakukan pengeditan data soal Data soal Info soal 1. Guru menekan tombol edit soal 2. Sistem akan menampilkan form edit data soal. 3. Jika inputan lengkap dan benar, maka Sistem menyimpannya ke storage soal 4. Jika inputan tidak lengkap, maka sistem menampilkan pesan lengkapi formulir penambahan data soal 5.3 Hapus data soal Guru Proses untuk melakukan penghapusan data soal Data soal Info soal 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 5.4 Cari data soal Guru Proses untuk melakukan pencarian data soal Data soal Info soal 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

10

11

12

13




4. Jika data yang dicari tidak ada, maka sistem akan menampilakan pesan tidak ada data soal yang cocok 6 Pengolahan data siswa Guru Proses untuk melakukan pengolahan data siswa Data Siswa Info Siswa 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. 6.1 penghapusan data siswa Guru Proses untuk melakukan penghapusan data siswa Data Siswa Info Siswa 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 6.2 pencarian data siswa Guru Proses untuk melakukan pencarian data siswa Data Siswa Info Siswa 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 7 Pengolahan data Guru Guru koordinator Proses untuk melakukan pengolahan data guru Data guru Info guru 1. Guru koordinator, akan melakukan penambahan data guru

60

14

15

16

17



No.Proses Nama Source (Sumber) Deskripsi Input Output Logika Proses No.Proses Nama

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 7.1 Tambah data Guru Guru koordinator Proses untuk melakukan penambahan data guru Data guru Info guru 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 7.2 Hapus data Guru Guru Proses untuk melakukan panghapusan data guru Data guru Info guru 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. 8 Pengolahan data Molekul Guru Proses untuk melakukan pengolahan data molekul Data molekul Info molekul 1. Guru melakukan pengolahan data molekul 2. Sistem akan menmpilkan info molekul, serta tombol untuk melakukan pengolahan data molekul 8.1 Tambah data molekul

61

Source (Sumber) Deskripsi Input Output Logika Proses

18

19

20



No.Proses Nama Source (Sumber) Deskripsi Input Output

Guru Proses untuk melakukan penambahan data molekul Data molekul Info molekul 1. Sistem akan menmpilkan form tambah molekul. 2. Guru melakukan penambahan data molekul. 3. Jika inputan lengkap dan benar, maka Sistem menyimpannya ke storage molekul dan detail_molekul 4. Jika inputan tidak lengkap, maka sistem menampilkan info lengkapi formulir penambahan data molekul 8.2 Edit data molekul Guru Proses untuk melakukan pengeditan data molekul Data molekul Info molekul 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 8.3 Hapus data molekul Guru Proses untuk melakukan penghapusan data molekul Data molekul Info molekul 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. 9 Tampil Materi Siswa Menampilkan 7 Sub bab materi ikatan kimia Data Materi Sub bab Ikatan Kimia Info Materi Sub bab Ikatan Kimia

62

Logika Proses

21

22

23




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. 9.1 Tampil Subbab Kestabilan Unsur Siswa Menampilkan materi ikatan kimia Sub bab kestabilan unsur Data Materi Sub bab Ikatan Kimia Sub bab kestabilan unsur Info Materi Sub bab Ikatan Kimia Sub bab kestabilan unsur 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 9.2 Struktur/Rumus Lewis Siswa Menampilkan materi ikatan kimia Sub bab Struktur/Rumus Lewis Data Materi Sub bab Ikatan Kimia Sub bab Struktur/Rumus Lewis Info Materi Sub bab Ikatan Kimia Sub bab Struktur/Rumus Lewis 1. Siswa memilih menu subbab struktur/rumus lewis 2. Sistem Menampilkan materi ikatan kimia Sub bab Struktur/Rumus Lewis 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 9.3 Tampil Subbab Ikatan Ionik Siswa Menampilkan materi ikatan kimia Sub bab Ikatan Ionik Data Materi Sub bab Ikatan Kimia Sub bab Ikatan Ionik Info Materi Sub bab Ikatan Kimia Sub bab Ikatan Ionik 1. Siswa memilih menu subbab ikatan ionik 2. Sistem Menampilkan materi ikatan kimia Sub bab ikatan ionik 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

63

23

24

25




5. Siswa menakan tombol tutup untuk kembali ke halaman awal materi 9.4 Tampil Subbab Ikatan kovalen Siswa Menampilkan materi ikatan kimia Sub bab Ikatan kovalen Data Materi Sub bab Ikatan Kimia Sub bab Ikatan kovalen Info Materi Sub bab Ikatan Kimia Sub bab Ikatan kovalen 1. Siswa memilih menu subbab ikatan kovalen 2. Sistem Menampilkan materi ikatan kimia Sub bab ikatan kovalen 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 9.5 Tampil Subbab Ikatan Logam Siswa Menampilkan materi ikatan kimia Sub bab Ikatan Logam Data Materi Sub bab Ikatan Kimia Sub bab Ikatan Logam Info Materi Sub bab Ikatan Kimia Sub bab Ikatan Logam 1. Siswa memilih menu subbab ikatan logam 2. Sistem Menampilkan materi ikatan kimia Sub bab ikatan logam 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 9.6 Tampil Subbab Senyawa Ionik dan Kovalen Siswa Menampilkan materi ikatan kimia Sub bab Senyawa Ionik dan Kovalen Data Materi Sub bab Ikatan Kimia Sub bab Senyawa Ionik dan Kovalen Info Materi Sub bab Ikatan Kimia Sub bab Senyawa Ionik dan Kovalen 1. Siswa memilih menu subbab Senyawa Ionik dan Kovalen 2. Sistem Menampilkan materi ikatan kimia Sub bab Senyawa Ionik dan Kovalen 3. Siswa menekan tombol selanjutnya dan sebelumnya, untuk pindah dari halaman satu kehalaman lainnya.

64

26


27

28


4. Siswa melakukan interaksi terhadap ilustrasi yang disajikan dengan bantuan mouse 5. Siswa menakan tombol tutup untuk kembali ke halaman awal materi 9.7 Tampil Subbab Geometri Elektron dan Kerja Sama dalam Ikatan Kimia Siswa Menampilkan materi ikatan kimia Sub bab Geometri Elektron dan Kerja Sama dalam Ikatan Kimia Data Materi Sub bab Ikatan Kimia Sub bab Geometri Elektron dan Kerja Sama dalam Ikatan Kimia Info Materi Sub bab Ikatan Kimia Sub bab Geometri Elektron dan Kerja Sama dalam Ikatan Kimia 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 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 10 Tampil sistem periodik unsur interaktif Siswa Menampilkan sistem periodik unsur interkatif Data sistem periodik unsur interaktif Info sistem periodik unsur interaktif 1. Siswa memilih menu sistem periodik unsur interkatif 2. Sistem menampilkan sistem periodik unsur yang interaktif, yang berisi tabel periodik unsur 10.1 Menggabungkan atom Siswa Menggabungkan atom untuk membentuk molekul Data atom Info atom 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

28


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 10.2 Tampil informasi atom Siswa Menampilkan informasi atom Data atom Info atom 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 1 Nama Aliran data Digunakan pada deskripsi Struktur data

2

3

Username_guru Nis Email Password Nama Aliran data Digunakan pada deskripsi Struktur data Email Nama Aliran data Digunakan pada deskripsi Struktur data

Keterangan Data Login Guru – proses 1 tabel data guru Siswa – proses 1 tabel data siswa Berisis aliran login Username+Email+password Nis+Email+password [A-Z|a-z|0-9] [0-9] [A-Z|a-z|0-9] [A-Z|a-z|0-9] Data lupa password Guru – proses 2 tabel data guru Siswa – proses 2 tabel data siswa Berisis aliran lupa password Email [A-Z|a-z|0-9] Data pendaftaran Siswa – proses 3 tabel data Siswa Berisis data nis, nama dan password Nis + Nama + email + Password + konfirmasi password

66

4

5

6

Nis Nama Emai Password Konfirmasi password Nama Aliran data Digunakan pada Deskripsi

[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]

Struktur Data

No_soal + Jawaban

No_Soal Jawaban Nama Aliran data Digunakan pada Deskripsi Struktur data

[0-9] [A-E|a-e] Pengolahan data soal Guru – proses 5 tabel soal Berisis aliran data soal Id_soa, pertanyaan, opsi_a, opsi_b, opsi_c, opsi_d, opsi_e dan 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] Penambahan data soal Guru – proses 5.1 tabel soal Berisikan aliran data penambahan data soal

Pertanyaan opsi_a opsi_b opsi_c opsi_d opsi_e jawaban Nama Aliran data Digunakan pada Deskripsi Struktur data

7

Pertanyaan opsi_a opsi_b opsi_c opsi_d opsi_e jawaban Nama Aliran data Digunakan pada deskripsi Struktur data Soal opsi_a opsi_b opsi_c opsi_d opsi_e

Data jawaban Siswa proses 4 tabel soal Berisi Soal dan jawaban

Id_soal, pertanyaan, opsi_a, opsi_b, opsi_c, opsi_d, opsi_e dan 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] pengeditan data soal Guru – proses 5.2 tabel soal Berisikan aliran data pengubahan data soal Id_soal pertanyaan, opsi_a, opsi_b, opsi_c, opsi_d, opsi_e dan 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]

67

8

9

14

15

16

17

18

19

jawaban Nama Aliran data Digunakan pada deskripsi

[a-z] Penghapusan data soal Guru – proses 5.3 tabel soal Berisikan aliran data penghapusan data soal

Struktur data Id_soal Nama Aliran data Digunakan pada deskripsi

Id_soal [0-9] Pencarian data soal Guru – proses 5.4 tabel soal Berisikan aliran data pencarian data soal

Struktur data Id_soal soal Nama Aliran data Digunakan pada deskripsi Struktur data Nis Nama Emaill Nama Aliran data Digunakan pada deskripsi Struktur data Nis Nama password Nama Aliran data Digunakan pada deskripsi Struktur data Nis Nama password Nama Aliran data Digunakan pada deskripsi Struktur data Username Nama Nama Aliran data Digunakan pada deskripsi Struktur data Nip Nama Nama Aliran data Digunakan pada

Id_soal, soal [0-9] [A-Z|a-z|0-9] Data siswa Guru proses 6 tabel siswa Berisi aliran data siswa Nis+nama+email [0-9] [A-Z|a-z] [A-Z|a-z|0-9] Pencarian data siswa Guru proses 6.1 tabel siswa Berisi aliran data siswa Nis+nama+password [0-9] [A-Z|a-z] [A-Z|a-z|0-9] Penghapusan data siswa Guru proses 6.2 tabel siswa Berisi aliran data siswa Nis+nama+password [0-9] [A-Z|a-z] [A-Z|a-z|0-9] Data Guru Guru – proses 7 tabel data Guru Berisis aliran data guru Nip+nama [A-Z|a-z|0-9] [A-Z|a-z|0-9] Penambahan data guru Guru – proses 7.1 Berisis aliran penambahan data guru Nip+nama [A-Z|a-z|0-9] [A-Z|a-z|0-9] Penghapusan data guru Guru – proses 7.2

68

20

21

22

22

22

deskripsi Struktur data Username Nama Aliran data Digunakan pada Deskripsi Struktur data Id_molekul Nama_molekul Id_gm Id_jik Keterangan Gambar No_atom Nama Aliran data Digunakan pada Deskripsi Struktur data Nama_molekul Id_gm Id_jik Keterangan Gambar No_atom Nama Aliran data Digunakan pada deskripsi Struktur data Nama_molekul Id_gm Id_jik Keterangan Gambar No_atom Nama Aliran data Digunakan pada deskripsi Struktur data Nama_molekul Id_gm Id_jik Keterangan Gambar No_atom Nama Aliran data

Berisis aliran penghapusan data guru Nip+nama [A-Z|a-z|0-9] Data Molekul Guru – proses 8 tabel data molekul Berisis aliran data molekul Id_molekul, Nama_molekul, id_gm, id_jik, no_atom, keterangan, gambar [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] Penambahan data molekul Guru – proses 8.1 Berisis aliran penambahan data molekul Nama_molekul, id_gm, id_jik, no_atom, keterangan, gambar [A-Z|a-z|0-9] [0-9] [0-9] [A-Z|a-z|0-9] [A-Z|a-z|0-9] [0-9] Edit data molekul Guru – proses 8.2 Berisis aliran penambahan data molekul Nama_molekul, id_gm, id_jik, no_atom, keterangan, gambar [A-Z|a-z|0-9] [0-9] [0-9] [A-Z|a-z|0-9] [A-Z|a-z|0-9] [0-9] Cari data molekul Guru – proses 8.3 Berisis aliran penambahan data molekul Nama_molekul, id_gm, id_jik, no_atom, keterangan, gambar [A-Z|a-z|0-9] [0-9] [0-9] [A-Z|a-z|0-9] [A-Z|a-z|0-9] [0-9] Penghapusan data molekul

69

Digunakan pada deskripsi Struktur data Id_molekul

3.2

Guru – proses 8.4 Berisis aliran penghapusan data molekul Id_molekul [0-9]

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 dilihat pada Tabel 3.10 Tabel 3.10 Struktur Tabel Siswa

Nama field Nis Nama password Email

Tipe Integer Varchar Varchar Varchar

Panjang 11 30 50 30

extra

kunci Primary key

Atribut Not null Not null Not null Not null

2. Tabel guru Tabel guru berfungsi untuk menyimpan data guru, struktur tabel dapat dilihat pada Tabel 3.11 Tabel 3.11 Struktur Tabel Guru

Nama field Username_guru

Tipe Varchar

Nama

Varchar

Panjang extra kunci 20 Primary key 30

atribut Not null Not null

71

Password Email Hak_akses Username_guru_koordinator

Varchar Varchar Int Varchar

50 30 11 20

Not null Not null 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 Id_soal pertanyaan Opsi_a Opsi_b Opsi_c Opsi_d Opsi_e Jawaban Username_guru

Tipe integer text text text text text text text varcahr

Panjang 11

Extra

20

kunci Primary key

Atribut Not null Not null Not null Not null Not null Not_null Not null Not null Not null

Foreign key

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 Id_de

Tipe Integer

Panjang 11

Id_soal Nis Opsi_a Opsi_b Opsi_c Opsi_d Opsi_e Jawaban_benar jawaban

Integer Integer text text text text text text varchar

11 11

extra Auto increment

kunci Primary key Foreign key Foreign key

1

Atribut Not null Not null Not null Not null Not null Not null Not_null Not null Not null 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 Id_JIK

tipe integer

Panjang 11

extra auto increment

kunci Primary key

Atribut Not null

72

Nama_JIK keterangan

Varchar text

30

Not null 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

Nama field Id_molekul

tipe integer

Nama_utama Nama_lain Id_JIK Keterangan Gambar_molekul Username_guru

Varchar text integer text Varchar varchar

Panjang extra 11 auto increment 30

kunci Primary key

11

Foreign key

10 20

Foreign key

Atribut Not null Not null Not null Not null Not null 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

Nama field Id_JU

tipe integer

Panjang 11

Nama_JU warna

Varchar varchar

20 7

extra auto increment

kunci Primary key

Atribut Not null Not null 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

Nama field No_atom Id_JU Nama_atom Simbol_atom Golongan Periode elektronegatifitas

tipe integer integer varchar varchar varchar integer double

Panjang 11 11 15 3 7 11

extra

kunci Primary key Foreign key

Atribut Not null Not null Not null Not null Not null Not null 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 dapat dilihat pada Tabel 3.18 Tabel 3.18 Struktur Tabel Detail Molekul

Nama field Id_dm Id_molekul no_atom Jumlah

tipe integer integer integer integer

Panjang 11 11 11 11

extra

kunci Primary key Foreign key Foreign key

Atribut Not null Not null Not null 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

Lupa Password

Beranda

Guiru

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

Lupa Password

Siswa

Soal

Keluar

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

Lupa Password

Sitem periodik unsur interaktif

Materi

Login

Daftar

Evaluasi

Keluar

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

Halaman Login Guru Koordinator Navigasi Username/Email login



Password

Lupa Password



APLIKASI PEMBELAJARAN IKATAN KIMIA SMAN 7 BANDUNG

Keterangan: Nama Form Ukuran Form Font Warna Form



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

: A01 (Halaman Login Guru Koordinator) :1024x768 :Times New Roman. Size 11 pt, 14 pt, White and black :Putih

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

Beranda



Pilih menu Beranda maka akan menuju A01 Pilih menu hasil evaluasi maka akan menuju A03

Guru



Selamat datang di halaman guru koordinator

Keluar



Pilih menu guru, akan menujuNavigasi A04  Pilih menu siswa  Pilih menu Beranda maka Maka akan menuju A05 akan menuju A02 Pilihmenu menuguru, Soal akan maka  Pilih akan menuju menuju A03 A06 Pilihmenu menukeluar, keluar,maka maka   Pilih Akanmenuju menujuA01 A01 Akan

APLIKASI PEMBELAJARAN IKATAN KIMIA

LOGO SMAN7 BANDUNG



Pilih menu molekul, maka Akan menuju A07

Sman 7 bandung


: A02 (Halaman utama guru koordinator) :1024x768 :Times New Roman. Size 11 pt, 14 pt, White and black :Putih

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

Beranda

Guru



Data Guru No

Username

Nama

Aksi

Keluar Hapus Hapus Hapus

Tambah

Pilih menu Beranda maka akan menuju A01 Pilih menu hasil evaluasi maka akan menuju A03 Navigasi

    

  







Pilih menu guru, akan Pilih menu Beranda maka menuju A04 akan menuju A01 Pilih menu siswa Pilih menu akanA05 Maka akanguru, menuju menuju A03 Pilih menu Soal maka Pilih keluar, akanmenu menuju A06 maka Akan menuju A01 Pilih menu keluar, maka Pilih menu tambah, maka Akan menuju A01 Akan menuju AF01 Pilihmenu menuhapus, tambah, Pilih maka maka akan menuju Akan menuju AF02 AF01 Pilih menu hapus, maka akan menuju AF02

Sman 7 bandung


: A04 (Halaman Data guru) :1024x768 :Times New Roman. Size 11 pt, 14 pt, White and black :Putih

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

Beranda



Tambah data Guru

Guru

 Keluar

 Pilih menu guru, akan menuju A04  Pilih menu Beranda maka  akan Pilih menu siswa menuju A01 Maka akanguru, menuju  Pilih menu akanA05 menuju A03  Pilih menu Soal maka  Pilih keluar, akanmenu menuju A06 maka A01 maka  Akan Pilihmenuju menu keluar,  Pilih menu simpan, Akan menuju A01 akan menuju A03 Pilih menu simpan,   Pilih menu tutup, akan maka akan menuju A03 menuju A04  Pilih menu keluar, maka akan menuju A04

Username Nama

Simpan


tutup

Sman 7 bandung


: AF01 (Halaman Tambah Data guru) :1024x768 :Times New Roman. Size 11 pt, 14 pt, White and black :Putih

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 ikatan kimia berbasis web dapat dilihat pada Gambar 3.35. AF02

Navigasi

Beranda

 Guru

 Keluar

Anda yakin ingin menghapus data ini?

Hapus

tutup

     


Pilih menu guru, akan menuju A04 Pilih menu Beranda maka Pilih menu siswa akan menuju A01 Maka akan menuju Pilih menu guru, akanA05 menuju A03 Soal maka Pilih menu Pilih keluar, akanmenu menuju A06 maka A01 maka  Akan Pilihmenuju menu keluar,  Pilih menu hapus, Akan menuju A01akan menuju A03  Pilih menu simpan,  Pilih menu tutup, akan maka A03 akan menuju menuju A04  Pilih menu keluar, maka akan menuju A04

Sman 7 bandung


: AF02 (Halaman Hapus Data guru) :1024x768 :Times New Roman. Size 11 pt, 14 pt, White and black :Putih

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 kimia berbasis web dapat dilihat pada Gambar 3.36. A04

Halaman Login Guru Navigasi

Username/Email login



Password

Lupa Password

 



Isi Field Username/Email dan password sesuai data yang telah ditentukan Klik tombol login, maka akan menuju A05 Klik tombol lupa password, maka akan menuju A08

: A04 (Halaman Login Guru ) :1024x768 :Times New Roman. Size 11 pt, 14 pt, White and black :Putih

Gambar 3.36 Perancangan antar muka halaman login guru

g. Perancangan Antarmuka Halaman Utama Guru Perancangan antar muka halaman utama guru aplikasi pembelajaran ikatan kimia berbasis web dapat dilihat pada Gambar 3.37. A05

Navigasi

Beranda

 Siswa

 Molekul

Selamat datang di halaman guru APLIKASI PEMBELAJARAN IKATAN KIMIA

Soal

Keluar LOGO SMAN7 BANDUNG

Pilih menu Beranda maka akan menuju A01 Pilih menu hasil evaluasi Navigasi maka akan menuju A03

 

Pilih menu guru, akan Pilih menu Beranda maka menuju A04 akan menuju A05  Pilih menu siswa  Pilih menu siswa, akan Maka akan menuju A05 menuju A06 Pilihmenu menumolekul, Soal maka  Pilih akan akan menuju menuju A08 A06  Pilih menu keluar, maka  Pilih menu soal, akan Akan menuju menuju A07 A01



Pilihmenu menukeluar, molekul, maka Pilih maka Akanmenuju menuju A04 A07 Akan

Sman 7 bandung


: A05 (Halaman utama guru) :1024x768 :Times New Roman. Size 11 pt, 14 pt, White and black :Putih

Gambar 3.37 Perancangan Antarmuka Halaman Utama Guru

78

h. Perancangan Antarmuka Halaman Data Siswa Perancangan antar muka halaman data siswa aplikasi pembelajaran ikatan kimia berbasis web dapat dilihat pada Gambar 3.38. A06

Navigasi

Beranda



Data Siswa

Siswa

Cari

Nis

Nama



Aksi

Soal

Nilai Hapus

Molekul

Nilai Hapus

      

Pilih menu guru, akan menuju A05akan menuju A04 Pilih menu siswa Pilih menu siswa A06 Maka akan menuju Maka akanSoal menuju Pilih menu makaA05 akan A07 maka Pilihmenuju menu Soal Pilih keluar, akanmenu menuju A06 maka A03 maka  Akan Pilihmenuju menu keluar,  Pilih menu molekul, Akan menuju A01 maka Akan menuju A08 Pilihmenu menuhapus, hapusmaka   Pilih maka akan menuju Akan menuju AF03 AF03  Pilih menu nilai, maka Akan menuju AF04

Nilai Hapus

Keluar

Pilih menu Beranda maka akan menuju A01 Navigasi Pilih menu hasil evaluasi maka akanBeranda menuju A03 Pilih menu maka

Sman 7 bandung


: A06 (Halaman Data Siswa) :1024x768 :Times New Roman. Size 11 pt, 14 pt, White and black :Putih

Gambar 3.38 Perancangan Antarmuka Halaman Data Siswa

i. Perancangan Antarmuka Halaman Data Soal Perancangan antar muka halaman data soal aplikasi pembelajaran ikatan kimia berbasis web dapat dilihat pada Gambar 3.39. A07

Beranda

Data Soal

Siswa

Tambah

Navigasi 

No

Cari Pertanyaan

Soal

Aksi Edit Ha pus

Edit Ha pus

Molekul

      

Edit Ha pus

Keluar

 

 

  

Navigasi Pilih menu Beranda maka akanmenu menuju A01 maka Pilih Beranda Pilih menu hasil akan menuju A05evaluasi maka akansiswa menuju A03 Pilih menu Maka akan menuju A06 Pilih menu guru, akan Pilih menu Soal maka menuju A04 akan A07 Pilih menuju menu siswa Pilih menu maka Maka akankeluar, menuju A05 Akan A03maka Pilih menuju menu Soal Pilih menu molekul, akan menuju A06 maka Akan A08 maka Pilihmenuju menu keluar, Pilih menu tambah, Akan menuju A01 maka Akan menuju AF05 Pilihmenu menuedit, tambah, Pilih makamaka Akanmenuju menujuAF06 AF04 Akan Pilih menu hapus, maka Pilih menu no, maka Akan menuju Akan menujuAF07 AF05 Pilih menu cari, maka Akan menuju AF08

Sman 7 bandung


: A07 (Halaman Data Soal) :1024x768 :Times New Roman. Size 11 pt, 14 pt, White and black :Putih

Gambar 3.39 Perancangan Antarmuka Halaman Data Soal

79

j. Perancangan Antarmuka Halaman Data Molekul Perancangan antar muka halaman data molekul aplikasi pembelajaran ikatan kimia berbasis web dapat dilihat pada Gambar 3.40. A08

Navigasi

Beranda



Siswa

Data Molekul No

Soal

Cari Nama

Rumus Molekul

Aksi

Edit

Hapus

Molekul

Keluar

Edit

Hapus

Edit

Hapus Tambah

Pilih menu Beranda maka akan menuju A01 Navigasi  Pilih menu hasil evaluasi maka akan menuju A03  Pilih menu Beranda maka  Pilih menu guru, akan akan menuju A05 menuju A04  Pilih menu siswa  Pilih menu siswa Maka akan menuju A06 Maka akan menuju A05  Pilih menu Soal maka  akan Pilihmenuju menu Soal A07 maka akanmenu menuju A06 maka  Pilih keluar,  Akan Pilihmenuju menu keluar, A03 maka Akan menuju A01 maka  Pilih menu molekul, A08  Akan Pilihmenuju menu tambah, maka  Pilih menu tambah Akan menuju AF04akan menuju AF09 Pilih menu no, maka   Pilih menu hapus akan Akan menuju menuju AF10 AF05

Sman 7 bandung


: A08 (Halaman Data Molekul) :1024x768 :Times New Roman. Size 11 pt, 14 pt, White and black :Putih

Gambar 3.40 Perancangan Antarmuka Halaman Data Molekul

k. Perancangan Antarmuka Halaman Hapus Data Siswa Perancangan antar muka halaman hapus data siswa aplikasi pembelajaran ikatan kimia berbasis web dapat dilihat pada Gambar 3.41. AF03

Navigasi

Beranda

 Siswa



Soal

Molekul


Keluar

Hapus

tutup

        

Pilih menu Beranda maka akan menuju A01 Navigasi Pilih menu hasil evaluasi maka akanBeranda menuju A03 Pilih menu maka

Pilih menu guru, akan menuju A05akan menuju A04 Pilih menu siswa, akan Pilih menu menuju A06 siswa Maka akanmolekul, menujuakan A05 Pilih menu menuju A07 Soal maka Pilih menu Pilih soal, akan akanmenu menuju A06 menuju A08 keluar, maka Pilih menu Pilih menu keluar, Akan menuju A01maka Akan menuju A04 Pilih menu simpan,   Pilih menu hapus akan maka akan menuju menuju ke A06 A05menu tutup akan  Pilih  menuju Pilih menu keluar, ke A06 maka akan menuju A05

Sman 7 bandung


: AF03 (Halaman Hapus Data siswa) :1024x768 :Times New Roman. Size 11 pt, 14 pt, White and black :Putih

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 ikatan kimia berbasis web dapat dilihat pada Gambar 3.42. AF05

Beranda

Siswa

Navigasi

Tambah data Soal B

Pertanyaan

U

I

X

y

Xy

Soal



Pilih menu Beranda maka akan menuju A01



Pilih menu hasil evaluasi maka akan menuju A03



Molekul B

Opsi A

U

I

y

X

Pilih menu guru, akan Navigasi menuju A04

Xy



Keluar y

Opsi B

B

U

I

X

Opsi C

B

U

I

X



Xy



B

Opsi D

U

I

y

Xy

X

y

Xy

X

y

Xy

 

B

Opsi E

U

I







 

Jawaban Benar

A

B

C

D

E

Kembali

Simpan

Pilih Pilihmenu menuBeranda siswa maka akan A05 A05 Makamenuju akan menuju Pilih menu siswa, akan menuju A06 Soal maka Pilih menu Pilih molekul, akanmenu menuju A06 akan menuju A07 Pilihmenu menusoal, keluar, maka Pilih akan Akan menuju menuju A08 A01 Pilih menu keluar, maka Akan A04 Pilihmenuju menu simpan, Pilih menu kembali maka akan menujuakan menuju A06 A08 Pilih menu simpan akan menuju A08 keluar, Pilih menu maka akan menuju A06

Sman 7 bandung


: AF05 (Halaman Tambah Data Soal) :1024x768 :Times New Roman. Size 11 pt, 14 pt, White and black :Putih

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 kimia berbasis web dapat dilihat pada Gambar 3.43. AF06

Beranda

Navigasi

Edit data Soal B

Pertanyaan

U

I

X

y

Xy



Pilih menu Beranda maka akan menuju A01



Pilih menu hasil evaluasi Navigasi maka akan menuju A03

Hasil Evaluasi

Guru

 Opsi A

B

U

I

X

y

Xy

Opsi B

B

U

I

X

y

Xy

Opsi C

B

U

I

X

Pilih maka Pilihmenu menuBeranda guru, akan akan menuju menuju A04 A01  Pilih menu hasil evaluasi  maka Pilih menu siswa A03 akan menuju Maka akanguru, menuju  Pilih menu akanA05

Siswa

menuju A04 Pilihmenu menusiswa Soal maka   Pilih akan akan menuju A06 A05 Maka menuju

Soal y

Xy

Molekul

Opsi D

B

U

I

X

y

Xy

Opsi E

B

U

I

X

y

Xy

Keluar

Jawaban Benar

A

B

C

D

E

Kembali

Simpan

  Pilih maka Pilihmenu menuSoal keluar, maka akan Akanmenuju menujuA06 A01  Pilih menu keluar, maka Akan menuju A01 Pilih menu simpan,maka   Pilih menu molekul, maka akan menuju Akan menuju A07 A06menu simpan, akan  Pilih menuju A06  Pilih menu keluar,  Pilih menu tutup, akan maka akan menuju menuju A06 A06

Sman 7 bandung


: AF06 (Edit Data Soal) :1024x768 :Times New Roman. Size 11 pt, 14 pt, White and black :Putih

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 ikatan kimia berbasis web dapat dilihat pada Gambar 3.44. AF07

Navigasi

Beranda



Pilih menu Beranda maka akan menuju A01 Pilih menu hasil evaluasi maka akan menuju A03 Navigasi  Pilih menu guru, akan menuju A04  Pilih menu Beranda maka  Pilih menu siswa akan menuju A01 Maka akan menuju A05  Pilih menu guru, akan  menuju Pilih menu A03 Soal maka akanmenu menuju A06 maka  Pilih keluar,  Akan Pilihmenuju menu keluar, A01 maka Akan menuju A01akan  Pilih menu hapus, A07 simpan,  menuju Pilih menu  Pilih menu tutup, akan maka akan menuju menuju A05 A07

Guru



Keluar


Hapus

tutup



Pilih menu keluar, maka akan menuju A05

Sman 7 bandung


: AF07(Halaman Hapus Data Soal) :1024x768 :Times New Roman. Size 11 pt, 14 pt, White and black :Putih

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 ikatan kimia berbasis web dapat dilihat pada Gambar 3.45. AF08

Navigasi Beranda

Hasil Evaluasi



Tambah data Molekul



Nama Utama



Guru

Nama Lain



Siswa

Pilih menu Beranda maka akan menuju A01 Pilih menu hasil evaluasi maka akan menuju A03 Pilih menu guru, akan menuju A04 Pilih menu siswa Maka akan menuju A05



Soal

Pilih menu Soal maka akan menuju A06 Navigasi Pilih menu keluar, maka Akan menuju A01  Pilih menu Beranda maka  akan Pilihmenuju menu simpan, A01 maka akan menuju  Pilih menu guru, akan A04 A03 menuju  Pilih menu keluar,  Pilih menu keluar, maka maka akan menuju Akan menuju A01 A04menu simpan, akan  Pilih menuju A08  Pilih menu tutup, akan menuju A08

Geometri Molekul



Jenis Ikatan Kimia Molekul

Gambar Keluar

Pilih file

Atom ke 1

Jumlah

Atom ke 2

Jumlah Jumlah

Atom ke N Keterangan

Simpan

tutup

Sman 7 bandung


: AF08 (Halaman Edit Data Molekul) :1024x768 :Times New Roman. Size 11 pt, 14 pt, White and black :Putih

Gambar 3.45 Perancangan Antarmuka Halaman Edit Data Molekul

82

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 Beranda

Hasil Evaluasi



Tambah data Molekul

Pilih menu Beranda maka akan menuju A01 Pilih menu hasil evaluasi maka akan menuju A03



Nama Utama



Guru

Nama Lain



Siswa

Pilih menu guru, akan menuju A04 Pilih menu siswa Maka akan menuju A05



Soal

Pilih menu Soal maka akan menuju A06 Navigasi Pilih menu keluar, maka Akan menuju A01  Pilih menu Beranda maka  akan Pilihmenuju menu simpan, A01 maka akan menuju  Pilih menu guru, akan A04 A03 menuju Pilih menu keluar,   Pilih menu keluar, maka maka akan menuju Akan menuju A01 A04menu simpan, akan  Pilih menuju A08  Pilih menu tutup, akan menuju A08

Geometri Molekul



Jenis Ikatan Kimia Molekul

Gambar Keluar

Pilih file

Atom ke 1

Jumlah

Atom ke 2

Jumlah Jumlah

Atom ke N Keterangan

Simpan

tutup

Sman 7 bandung


: AF09 (Halaman Tambah Data Molekul) :1024x768 :Times New Roman. Size 11 pt, 14 pt, White and black :Putih

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 ikatan kimia berbasis web dapat dilihat pada Gambar 3.47. AF010

Navigasi

Beranda

 

Siswa



Soal

Molekul


   

Keluar Hapus

tutup

 

 

 

Pilih menu Beranda maka akan menuju A01 Pilih menu hasil evaluasi maka akan menuju A03 Navigasi Pilih menu guru, akan menuju A04 Pilih menu Beranda maka Pilih menu siswa akan menuju A01 Maka akan menuju A05 Pilih menu guru, akan Pilih menu menuju A03 Soal maka akanmenu menuju A06 maka Pilih keluar, Pilihmenuju menu keluar, Akan A01 maka Akan menuju A01akan Pilih menu hapus, menuju A08 simpan, Pilih menu Pilih menu tutup, akan maka akan menuju menuju A05 A08 Pilih menu keluar, maka akan menuju A05

Sman 7 bandung


: AF10(Halaman Hapus Data Molekul) :1024x768 :Times New Roman. Size 11 pt, 14 pt, White and black :Putih

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 kimia berbasis web dapat dilihat pada Gambar 3.48. A08

SMAN 7 BANDUNG

Navigasi

Lupa Password

 Tulis kan email anda

 Submit


Isi Field email sesuai data yang telah ditentukan Klik tombol submit, akan menuju A01

: A08 (Halaman Lupa Password) :1024x768 :Times New Roman. Size 11 pt, 14 pt, White and black :Putih

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

HALAMAN LOGIN SISWA Navigasi NIS login



Password

Daftar

Lupa Password

 





Isi Field Nis dan password sesuai data yang telah ditentukan Klik tombol login, maka akan menuju T02 Klik tombol daftar, maka akan menuju T03 Klik tombol lupa password, maka akan menuju T04

: T01 (Halaman Login Siswa) :1024x768 :Times New Roman. Size 11 pt, 14 pt, White and black :Putih

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 kimia berbasis web dapat dilihat pada Gambar 3.50 T02

SMAN 7 BANDUNG

NIP

 Password Konfirmasi Password



Navigasi isi Field NiS, Passord dan Konfirmasi passowrd sesuai data yang telah ditentukan Klik tombol login, maka akan menuju T03

Kirim


: T02 (Halaman Daftar Siswa) :1024x768 :Times New Roman. Size 11 pt, 14 pt, White and black :Putih

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  Logo SMAN 7 Bandung





Materi Sistem Periodi unsur interaktif



Klik tombol materi Akan menuju T04 Klik tombol sistem periodik unsur Interaktif maka akan menuju T05 Klik tombol evaluasi maka akan menuju T06 Klik tombol keluar maka akan menuju T07

Evaluasi

Keluar


: T03 (Beranda Siswa) :1024x768 :Times New Roman. Size 11 pt, 14 pt, White and black :Putih

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

Halaman Depan

Keluar

  

Isi materi

Sebelumnya




Navigasi Klik tombol selanjutnya, maka akan menuju T04 Klik tombol sebelumnya, maka akan menuju T04 Klik tombol halaman depan maka akan menuju T02 Klik tombol keluar maka akan menuju T01

Selanjutnya

: T05 (Materi) :1024x768 :Times New Roman. Size 11 pt, 14 pt, White and black :Putih

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 kimia berbasis web dapat dilihat pada Gambar 3.53 T06

Stage eksperimen Halaman Depan



Navigasi Klik tombol halaman depan maka akan menuju T02

Sistem periodik unsur interaktif


: T06 (sistem periodik unsur interaktif) :1024x768 :Times New Roman. Size 11 pt, 14 pt, White and black :Putih

Gambar 3.53 Perancangan Antar Muka Halaman Evaluasi

87

x. Perancangan antar muka halaman evaluasi Perancangan antar muka halaman evaluasi aplikasi pembelajaran ikatan kimia berbasis web dapat dilihat pada Gambar 3.54 T07

Halaman Depan

Keluar

Navigasi 

B. opsi b

Klik tombol halaman depan maka akan menuju T02  Klik tombol keluar maka akan menuju T01  Klik tombol sebelumnya, maka akan menuju T06

C. opsi c



1. Soal Evaluasi A. opsi a

D. opsi d

Klik tombol selanjutnya, maka akan menuju T06

E. opsi e

sebelumnya


Selanjutnya

: T07 (Evaluasi) :1024x768 :Times New Roman. Size 11 pt, 14 pt, White and black :Putih

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 dapat dilihat pada Tabel 3.19 Tabel 3.19 Perancangan Pesan

Kode P01 P02 P03 P04 P05 P06

P07 P08 P09 P10 P11 P12 P13

Pesan Username/Email harus diisi Password harus diisi Username/email password salah Email harus diisi Email tidak valid Permintaan lupa password telah kami proses, Silahkan cek email anda Maaf, email yang anda masukkan, tidak ditemukan, mohon cek kembali Username harus diisi Nama harus diisi Username guru minimal 5 karakter Username guru maximal 20 karakter Guru berhasil ditambah Guru dengan username tersebut sudah ada

88

P14 P15 P16 P17 P18 P19 P20 P21 P22 P23 P24 P25 P26 P27 P30 P31 P32 P33 P34 P35 P36 P37

Guru berhasil dihapus Siswa berhasil dihapus Geometri molekul harus diisi Jenis ikatan harus dipilih Molekul berhasil ditambah Molekul berhasil diubah Molekul berhasil dihapus Pertanyaan harus diisi Opsi A harus diisi Opsi B harus diisi Opsi C harus diisi Opsi D harus diisi Opsi E harus diisi Jawaban benar harus dipilih Soal berhasil ditambah Soal berhasil diubah Soal berhasil dihapus Nis / Email harus diisi Password harus diisi Email harus diisi Email tidak Valid Maaf, email yang anda masukkan, tidak ditemukan, mohon cek kembali Nis harus diisi Password harus diisi Email harus Email tidak valid Nama Harus diisi Konfirmasi password harus Password min 7 karakter Password dan konfirmasi password tidak sama Maaf, email yang anda masukkan, tidak ditemukan, mohon cek kembali Maaf, Siswa dengan Nis tersebut sudah ada, mohon konfirmasi dengan guru Maaf, Siswa dengan Email tersebut sudah ada, mohon konfirmasi dengan guru

P38 P39 P40 P41 P42 P43 P44 P45 P46 P47 P48

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 P08 P09 P19

P01, P02, P03

A08

A01 P04

P06

AF03

A03

A02

A04

AF01

P07 P06 P06

AF05

P20 P21 P22 P23 P24 P25 P26

A06

AF02

P05 P04

A05

P06

AF06 P06

AF04 P20 P21 P22 P23 P24 P25 P26

AF08

A07

P04

P05

P27 P28 P29

AF03

AF09

AF07

P27 P28 P29

Gambar 3.55 Jaringan Semantik Guru

Jaringan semantik siswa Jaringan semantik siswa dapat dilihat pada Gambar 3.56 P08 P09 T04

P07 P10 T02

P01, P02, P03 T01

T03

T05

T06

T07

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?

tidak

Tampil pesan “field harus diisi”

ya

Pengecekan valid/ tidak field

Tampil pesan “field tidak valid”

tidak

Valid? ya Pengecekan sesuai/tidak field password dan Konfirmasi password

sesuai

tidak

ya

Tampil pesan “password dan konfirmasi password tidak sesuai”

Pengecekan nis terdaftar/belum di database Tampil pesan “, Siswa dengan Nis tersebut sudah ada, mohon konfirmasi dengan gurur”

ya

terdaftar tidak

Pengecekan email terdaftar/belum di database

terdaftar

ya

Tampil pesan “, Siswa dengan Email tersebut sudah ada, mohon konfirmasi dengan gurur”

Tidak Data disimpan di database

selesai

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?

ya

Tampil pesan “email harus diisi”

tidak

Pengecekan valid/ tidak email yang dimasukkan

Tampil pesan “Email tidak Valid”

tidak

Valid?

ya

Pengecekan ada/ tidak email didatabase

Ada/tidak?

tidak

Tampil pesan “Maaf, email yang anda masukkan, tidak ditemukan, mohon cek kembali.

ada

Tampil pesan “Permintaan lupa password telah kami proses, Silahkan cek email anda. Terimakasih”.

Selesai

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?

ya

Tampil pesan “username harus diisi”

tidak

Pengecekan kosong/tidak field password

Tampil pesan “password harus diisi”

ya

Kosong?

tidak Pengecekan validasi login

valid

tidak

Tampil pesan “Maaf. Username/Email atau Password yang dimasukan salah”

ya

Login berhasil

Tampilan halaman utama

Selesai

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

Menggabungkan At om-at om

Tidak

Pengecekan atomat om membentuk Molekul

Terbent uk?

Ya

Tampil informasi Molekul

Selesai

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

Mulai

Pilihan evaluasi

Nilai = 0 i=0 j=jumlh_soal n=100/j

Input jawaban

Memeriksa jawaban

Apakah jawaban benar

ya

tidak

Nilai = Nilai + n

tidak

Tampilan jawaban benar

Tampilan jawaban salah

i++

I >= j

ya

Tampilan total nilai

Selesai

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 Mulai

Masukkan data yang akan ditambah

Pemeriksaan data yang akan ditambah

Field yang ditambah lengkap

Tidak

Tampilan pesan “field harus diisi”

ya

Tampilan pesan “field tidak valid”

Tidak

Field yang ditambah valid

ya

Tampilan pesan “data berhasil disimpan”

Selesai

. 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 Mulai

Masukkan data yang ingin dicari

Pencarian data

ada

Tidak

ya

Tampilkan data yang dicari

Tampilan pesan “Data yang dicari tidak ditemukan

Selesai

. 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 Mulai

Pilih data yang akan diuabah

Pemeriksaan data yang akan diubah

Periksa field yang diubah lengkap

Tidak

Tampilan pesan “field harus dilengkapi”

Ya

Tampilan pesan “field tidak valid”

Tidak

Periksa field yang diubah valid

Ya

Tampilan pesan “data berhasil diubah”

Selesai

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 Mulai

Pilih data yang akan dihapus

Tidak

Pemeriksaan data yang akan dihapus

Hapus?

ya

Tampilan pesan “data berhasil dihapus”

Selesai

Gambar 3.67 Prosedural Hapus Data

3. BAB 3 ANALISIS DAN PERANCANGAN SISTEM

Recommend Documents