tugas analisa pi ( penulisan ilmiah) tentang pembuatan web e-learning pelajran IPA

METODE PEMBUATAN WEB e-Learning pelajaran Ipa

RANCANGAN DAN IMPELEMENTASI
(WEB E-LEARNING PELJARAN IPA)

3.1 Perancangan

Pada bab III ini penulis membahas secara umum struktur navigasi,perancangan ERD,proses dalam pembuatan halaman Web(Web E-learning pelajaran IPA )
Dimana di dalam website ini memberikan pembelajaran materi IPA.

3.2 Struktur Navigasi

3.2.1 Struktur Navigasi User


Gambar 3.2.1 Struktur Navigasi User( tidak saya gambarkan)

3.2.2 Struktur Navigasi Admin


Gambar 3.2.2 Struktur Navigasi Admin (tidak saya gambarkan)

3.3 ERD ( Entity Relation Diagram )

Gambar 3.3 ERD Web E-learning

3.4 Normalisasi
Suatu teknik untuk mengorganisasikan data ke dalam table-tabel.Tujuan nya untuk menghilangkan kerangkapan data,mengurangi kompleksitas, Normalisasi tidak Normal.

3.5 Perancangan Database

Gambar 3.1 Tabel Materi 1 (Tidak Saya Gambarkan)

Gambar 3.2 Tabel Soal ( Tidak Saya Gambarkan)

Gambar 3.3 Tabel Buku Tamu ( Tidak Saya Gambarkan)

Gambar 3.4 Tabel Admin( Tidak Saya Gambarkan )

Gambar 3.5 Tabel Member ( Tidak Saya Gambarkan )

3.6 Rancangan Input/Output

3.6.1 Rancangan Tampilan Login





Gambar 3.4 Rancangan Halaman Login ( Tidak Saya Gambarkan )

Sebelum masuk ke home, user terlebih dahulu daftar kalau sebelum nya belum pernah mendaftar di situs kami.

3.6.2 Rancangan Tampilan Daftar

Gambar 3.5 Rancangan Halaman Daftar. ( Tidak Saya Gambarkan )
Tampilan daftar untuk user isi dengan data yang tersedia.



3.6.3 Rancangan Tampilan Home

Gambar 3.6 Rancangan Halaman Home( Tidak Saya Gambarkan )




3.6.4 Rancangan Tampilan Materi

Gambar 3.7 Rancangan Halaman Materi( Tidak Saya Gambarkan )
Pada halaman Materi terdapat sedikit uraian Materi kemudian terdapat link ,user di harapakan untuk memilih salagh satu dari judul materi yang di butuhkan



3.6.5 Rancangan Tampilan Soal

Gambar 3.8 Rancangan Halaman Soal ( Tidak Saya Gambarkan )
Pada tampilan ini terdapat macam-macam soal yang membahas tentang segala tentang pelajaran IPA( makhluk hidup )



3.6.6 Rancangan Tampilan Hasil Soal

Gambar 3.9 Rancangan Halaman Hasil Soal ( Tidak Saya Gambarkan )
Pada gambar di atas terdapat hasil dari soal yang telah di jawab ,dengan jawaban benar dan salah,dimana user harus menjawb nya dengan jawaban yang benar.



3.6.7. Rancangan Tampilan Profil

Gambar 3.10 Rancangan Halaman Profil ( Tidak Saya Gambarkan )
Pada gambar di atas terdapat foto dari pembuatan web ini,seperti nama,tanggal,lahir,alamat,email dan harapan tentang web ini.



3.6.8 Rancangan Tampilan Buku Tamu

Gambar 3.11 Rancangan Halaman Buku Tamu ( Tidak Saya Gambarkan )
Pada tampilan di atas user dapat mengisi data da pesan yang telah di sediakn oleh Admin pada buku tamu.

3.8.9 Rancangan Tampilan List Buku Tamu

Gambar 3.12 Rancangan Tampilan list Buku Tamu Gambar 3.6.23 Halaman Tabel ( Tidak Saya Gambarkan )
Berisi kan email, dan pesan dari user yang telah mengisi data pada buku tamu dan tersimpna secara otomatis.



3.6.10 rancangan Tampilan Admin

Gambar 3.12 Rancangan Halaman Login Admin ( Tidak Saya Gambarkan )



3.6.10 Rancangan Tampilan Menu Admin

Gambar 3.13 Rancangan Halaman Menu Admin ( Tidak Saya Gambarkan )
User di harapkan mengisi nama dan password Admin yang telah di sediakan.agar dapat login ke situs kami.



3.6.11 Rancangan Tampilan Materi input

Gambar 3.14 Rancangan Halaman Materi Input ( Tidak Saya Gambarkan )
Pada gambar di atas user di harapkan memilih atau memasukan materi yang di butuhkan,



3.6.12 Rancangan Tampilan Hapus Soal

Gambar 3.15 Rancangan Halaman hapus Soal ( Tidak Saya Gambarkan )
Untuk menghapus soal yang terdapat pada situs kami yang berisikan soal-soal.


3.6.13 Rancangan Tampilan Admin Buku Tamu

Gambar 3.16 Rancangan Halaman Admin Buku Tamu ( Tidak Saya Gambarkan )
Pada tampilan semua data user yang telah masuk dan mengisi buku tamu, dan admin juga berhak menghapus data buku tamu apabila sudah tidak di butuhkan lagi atau sudah lama.



3.6.14 Rancangan Tampilan Detail Buku Tamu

Gambar 3.6.17 Rancangan Halaman Detail Buku Tamu( Tidak Saya Gambarkan )
Pada tampilan di atas dimana terdapat user yang telah mengisi data yang telah tersedia.,terdapat link yaitu untuk melihat user yang telah mengisi buku tamu apa belum.



3.6.15 Rancangan Tampilan hapus Buku Tamu


Gambar 3.6.18 Rancangan Halaman Hapus Buku Tamu ( Tidak Saya Gambarkan )
Pada tampilan di atas dimana data yang telah di isi sebelum nya dapat di hapus atau di edit kembali.


3.7 Pembuatan Database

Pada pembuatan database penulis menggunakan phpMyAdmin, dan ketikan localhost/phpmyadmin,

3.8 langkah–langkah pembuatan folder
Dalam pembuatan web e-learning menggunakan aplikasi server local bernama xampp untuk mempersiapkan mebuat folder user,yang nanti nya folder tersebut akan di gunakan untuk menaruh semua file.php yang akan di buat di dalam folder user yang dimana dalam pembuatan web ini membutuhkan tuga folder,admin ,foto dan library


Gambar 3.6.19 Susunan Pembuatan Folder Web e-Learning ( Tidak Saya Gambarkan )


3.8.1 Pembuatan Halaman Login

Di sini penulis memakai aplikasi Notepad++

Gamabar 3.6.20 Langkah Membuka Notepad++ ( Tidak Saya Gambarkan )


3.8.2 Pembuatan Halaman Home
Disini penulis menggunakan Aplikasi Dreamweaver

Gambar 3.6.21 Langkah membuka Dreamweaver ( Tidak Saya Gambarkan )
Pada gambar di atas ,dimana di dalam nya dapat meng-edit script-script html,php,asp, atau sudah tersedia di dalam dreamweaver.


Gambar 3.6.22 Halaman Masuk Dreamweaver ( Tidak Saya Gambarkan )


Gambar 3.6.23 Halaman Tabel ( Tidak Saya Gambarkan )


Gambar 3.6.24 Pengaturan Tabel ( Tidak Saya Gambarkan )



Gambar 3.6.25 Memasukan Gambar Tidak Saya Gambarkan )

3.8.3 Pembuatan Halaman Buku Tamu

Gambar 3.6.26 Mengaktifkan Halaman Desain ( Tidak Saya Gambarkan )
Pada gambar di atas terdapat komponen form,buat objek ke dalam halaman desain.

Gambar 3.6.27 Menentukan Alamat Program Penyimpanan Data
( Tidak Saya Gambarkan )


Gambar 3.6.28 Menentukan Struktur Baris dan Kolom ( Tidak Saya Gambarkan )
Untuk mengatur tata letak table dengan menuliskan judul, agar terlihat lebih rapih

3.8.4 XAMPP for WINDOWS

Gambar 3.6.29 logo xampp
Xampp yaitu aplikasi data base dan web server dimana aplikasi yang di gunakan dalam pembuatan web ini, fungsi nya adalah untuk mengaktifkan web dalam keadaan offline,

3.8.5 Prose unggah ke web server
Untuk meng-upalod web ini di butuhkan hosting dan domain yang di dalam nya menyediakn database yang di perlukan untuk pembuatan web hosting ini,dalam web hosting ini menggunakan alamat http://orgfree.com sehingga web ini beralamat http:/e-learningipa.6te.
Berikut langkah-langkah

Buka aplikasi browser,lalu ketikan “http:/orgfree.com” tanpa tanda petik

Gambar 3.6.30 Halaman Home situs nya

Selanjutnya kita klik teks “ free web hosting area “ seperti gambar di atas.
Pada form freesudomain hosting, masukan domain yang nanti nya akan di jadikan sebagai alamat website

Gambar 3.6.31 Halaman untuk menentukan Subdomain.

Maka masuk ke halaman account information,lalu isi form yang ada ,kalau sudah klik” create” seperti Gambar 3.6.32

Gambar 3.6.32 Halaman Account information

Lalu kembali masuk lagi ke www.orgfree.com lalu masukan username dan password dan akan masuk ke halaman member area seperti di bawah ini.


Gambar 3.6.33 Halaman member Area

Untuk meng-uplod coding-coding klik file manager yang ada pada halaman member area lihat gambar di atas.

Lalu masuk ke halaman web based FTP cliebt lihat gambit 3.6.34. lalu isi form FTP server dan username dengan nama domain yang sudah kita buat dan password nya lalu klik login

Gambar 3.6.34 Halaman web based FTP client

Ketika login berhasil ,maka masuk ke dalam file manager lihat gambar 3.6.35

Gambar 3.6.35 Halaman file manager

Lalu klik upload pada halaman file manager 3.6.35,kemudian masuk ke halaman upload files and archives liaht gambar 3.6.36

Gambar 3.6.36 Halaman files dan archives

Lalu masukan file-file yang akan di masukan dengan klik browse. Setelah itu cari nama file nya berada yang kita save.disini harus memasukan file nya satu per satu.
Untuk memulai menguplod selanjutnya klik tombol ,liaht gambar 3.6 37 yang berarti upload telah berhasil.
Lalu klik, untuk kembali ke halaman file manager.

Gambar 3.6.37 Halaman Upload more files and archives


Semua file yang di masukan semuan nya lalu tutup halaman file manager dengan tombol yang telah tersedia di sebelah kanan lihat gambar 3.6.35
Lalu masuk lagi ke member area lagi,lalu pilih create DB untuk membuat database,database yang di buat dengan nama account yang tersedia otomatis dari hosting,jadi harus menyesuiakan script yang sudah di buat dengan kondisi yang ada di hosting.


Kesimpulan nya dari saya .

Dari pembuatan web e-learning yang telah di buat penulis, saya menyimpulkan bahwa dalam pembuatan web ini penulis bertujuan untuk mempermudah user agar dapat belajar melalui media internet yang sekarang ini sudah begitu familiar di kalangan bawah maupun atas .di perdesaan atau perkotaan,,
Kalangan anak-anak pelajar dari TK sampai perguruan tinggi ,perkantoran atau lembaga-lembaga tinggi Negara..yang bias menjangkau ke penjuru dunia.
Dengan web ini segala data atau info tentang makhluk hidup bias di cari dan di proses dengan memasukan data apa yang akan kita cari yang penting masih berhubungan dengan makhluk hidup dan sekitarnya.
Demikian kesimpulan dari saya dalam menganalisis metode pada pembuatan web e-learning pelajan IPA.
Kurang lebih nya mohom maaf ,