PEMBUATAN E-LEARNING MENGGUNAKAN CMS

DI SMA HANG TUAH 2 SAWOTRATAP SIDOARJO

PRAKTEK KERJA LAPANGAN

Disusun Oleh :

MUHAMMAD IRKHAM NURHIDAYAT ( 1134010017 )

SIFA’UL KHUSNAH ( 1134010032 )
ANDRI YUNIAR SISWOUTOMO ( 1134010037 )

PROGRAM STUDI TEKNIK INFORMATIKA

FAKULTAS TEKNOLOGI INDUSTRI
UNIVERSITAS PEMBANGUNAN NASIONAL “VETERAN”
JAWA TIMUR
2014
 ABSTRAK

Seiring kemajuan dunia internet yang memberikan berbagai macam

kemudahan, mendorong lahirnya teknologi yang bernama Content Management
System atau yang lebih popular dengan singkatan CMS. Jadi pada praktek kerja
lapangan ini akan membahas mengenai bagaimana cara membuat e-learning
berbasis CMS (Content Management System) Template, dimana Sistem e-
learning dengan berbagai macam kelebihannya
E-Learning merupakan penyampaian informasi, komunikasi, pendidikan
dan pelatihan secara on-line. Hal ini tidak berarti e-learning menggantikan model
belajar konvensional di dalam kelas, tetapi memperkuat model belajar tersebut
melalui pengayaan konten dan pengembangan teknologi pendidikan.
Penulis membuat pembelajaran online dengan mentrasformasikan
keseluruhan rancangan tampilan, konten web, statistik web, maupun alur program
yang disajikan dalam bentuk website. Dengan pemanfaatan e-learning sebagai
sarana pembelajaran diharapkan kualitas pembelajaran dan hasil belajar
diharapkan akan semakin baik.

Keyword : E-learning, web, CMS (Content Management System)

 KATA PENGANTAR

Syukur Alhamdulillah kami panjatkan kehadirat Allah SWT yang telah

memberikan rahmat serta hidayah-Nya sehingga penyusunan laporan ini dapat

diselesaikan.

Laporan ini disusun untuk Praktek Kerja Lapangan kami dengan judul

“Pembuatan E-learning Menggunakan CMS Di SMA HANG TUAH 2

SAWOTRATAP SIDOARJO”.

Selama melaksanakan Kuliah Kerja Praktek dan dalam menyelesaikan

laporan ini, kami telah banyak menerima bimbingan, pengarahan, petunjuk dan

saran, serta fasilitas yang membantu hingga akhir dari penulisan laporan ini.

Untuk itu penulis menyampaikan ucapan terimakasih yang sebesar-besarnya

kepada :

1. Kedua orang tua dan keluarga kami yang telah memberikan doa, kasih

sayang, serta semangat.

2. Bapak Ir. Sutiyono, MT selaku Dekan Fakultas Teknologi Industri Universitas

Pembangunan Nasional “Veteran” Jawa Timur.

3. Ibu Dr. Ir Ni Ketut Sari, MT selaku Ketua Jurusan Teknik Informatika

Universitas Pembangunan Nasional “Veteran” Jawa Timur.

4. Bapak Frinda Wahyu N, S.Kom selaku Koordinator Praktek Kerja Lapangan /

PIA Universitas Pembangunan Nasional “Veteran” Jawa Timur.

5. Ibu Siti Aisyah, S.Pd, MPd selaku Kepala Sekolah SMA HANG TUAH 2.

6. Ibu Erni Dwiyanti, S.Pd, MPd selaku Wk. Kurikulum Sekolah SMA HANG

TUAH 2.

i
7. Ibu Ari Kusuma Astuti, SE selaku Pembimbing Lapangan Sekolah SMA

HANG TUAH 2.

8. Ibu Yisti Vita Via,S.St ,M.Kom selaku Dosen Pembimbing Praktek Kerja

Lapangan yang telah membimbing kami selama pelaksanaan dan penyusunan

laporan Praktek Kerja Lapangan.

9. Bapak dan Ibu Staff sekolah SMA HANG TUAH 2 yang membantu kami

dalam proses Praktek Kerja Lapangan.

10. Kawan - kawan Teknik Informatika angkatan 2009 khususnya Indra wahyu

kurniawan ,S.kom, Satrio christiawan dan teman – teman lain yang tak bisa

penulis sebutkan satu persatu.

Kami menyadari bahwa penulisan laporan Praktek Kerja Lapangan ini

masih belum sempurna. Oleh karena itu, saran dan kritik yang membangun akan

penulis terima dengan senang hati.

Akhir kata semoga Laporan Praktek Kerja Lapangan ini dapat

memberikan manfaat bagi para mahasiswa khususnya dan pengetahuan pada

umumnya.

Surabaya, Januari 2013

Penulis

ii
 DAFTAR ISI

ABSTRAK.................................................................................................................
KATA PENGANTAR...............................................................................................i
DAFTAR ISI............................................................................................................ii
DAFTAR GAMBAR..............................................................................................vi
DAFTAR TABEL.................................................................................................viii
BAB I PENDAHULUAN........................................................................................1
1.1 Latar Belakang...............................................................................................1
1.2 Rumusan Masalah..........................................................................................2
1.3 Batasan Masalah.............................................................................................3
1.4 Tujuan.............................................................................................................3
1.5 Manfaat..........................................................................................................3
1.6 Sistematika Penulisan.....................................................................................4
BAB II TINJAUAN PUSTAKA..............................................................................6
2.1 Sejarah Singkat SMA HANGTUAH 2 SIDOARJO......................................6
2.1.1 Profil SMA HANGTUAH 2 SIDOARJO.............................................6
2.1.2 Visi dan Misi SMA HANGTUAH 2 SIDOARJO.................................8
2.1.3 Gedung SMA HANG TUAH 2 SIDOARJO.........................................9
2.2 E-learning.....................................................................................................10
2.2.1 Definisi E-learning..............................................................................11
2.2.2 Manfaat Elearning dalam Pengajaran.................................................14
2.2.3 Keuntungan E-learning.......................................................................15
2.3 Macromedia Dreamweaver 8.......................................................................15
2.3.1 Ciri-ciri Macromedia Dreamweaver...................................................16
2.3.2 Keuntungan Menggunakan Macromedia Dreamweaver.....................17
2.4 PHP..............................................................................................................18
2.4.1 Sejarah PHP........................................................................................18
2.5 MYSQL........................................................................................................20
2.6 APACHE......................................................................................................20
2.7 XAMPP.......................................................................................................21

iii
 2.8 CMS Template.............................................................................................24
BAB III METODE KERJA PRAKTEK................................................................25
3.1 Tempat dan waktu praktek kerja lapangan...................................................25
3.2 Rancangan Penelitian...................................................................................25
3.2.1 Deskripsi Umum Sistem.....................................................................25
3.2.2 Deskripsi Fungsional...........................................................................25
3.2.3 Perancangan Data Flow Diagram.......................................................26
3.2.3.1 Diagram Context........................................................................26
3.2.3.2 DFD Level 0 ( Admin )...............................................................28
3.2.3.3 DFD Level 0 ( User )..................................................................28
3.2.3.4 DFD Level 1 Login admin..........................................................29
3.2.3.5 DFD Level 1 Fungsi admin.........................................................30
3.2.3.6 DFD Level 1 Login user guru.....................................................30
3.2.3.7 DFD Level 1 Fungsi User Guru..................................................31
3.2.3.8 DFD Level 1 Login user siswa...................................................32
3.2.3.9 DFD Level 1 Fungsi User Guru..................................................32
3.2.4 Perancangan Tabel Database...............................................................33
3.2.4.1 Conceptual Data Model..............................................................33
3.2.4.2 Physical Data Model...................................................................34
3.3 Jadwal Kegiatan Penelitian.........................................................................36
3.4 Diagram Alur Praktek Kerja Lapangan.......................................................37
3.5 Perancangan Tampilan E-Learning.............................................................38
3.5.1 Tampilan Login Pada Beranda.............................................................38
3.5.2 Tampilan pada Halaman Pendaftaran...................................................38
3.5.3 Tampilan Halaman Login.....................................................................39
3.5.4 Tampilan halaman E-Learning (beranda user).....................................40
3.5.5 Tampilan Halaman E-Learning ( Upload )...........................................40
3.5.6 Tampilan Halaman E-Learning ( download ).......................................42
3.5.7 Tampilan Halaman E-Learning pada Admin........................................42
3.5.8 Tampilan Halaman Admin ( daftar guru )............................................43
3.5.9 Tampilan Halaman Data User..............................................................43
3.5.10 Tampilan Halaman View File User...................................................44

iv
BAB IV HASIL DAN PEMBAHASAN...............................................................45
4.1 Spesifikasi Perangkat Keras Dan Lunak......................................................45
4.1.1 Spesifikasi Perangkat Keras................................................................45
4.1.2 Spesifikasi perangkat Lunak................................................................46
4.2 Implementasi Antar Muka...........................................................................46
4.2.1 Antar muka Sub – Sistem Admin.........................................................46
4.2.2 Antar muka Sub – Sistem Pengguna (Guru dan Siswa).......................53
BAB V KESIMPULAN DAN SARAN.................................................................61
5.1 Kesimpulan..................................................................................................61
5.2 Saran.............................................................................................................61
DAFTAR PUSTAKA.............................................................................................................62

v
 DAFTAR GAMBAR

Gambar 2.1 Gedung SMA HANG TUAH 2....................................................6

Gambar 3.1 Context Diagram Pembuatan E-learning SMA Hangtuah 2
Sawotratap Sidoarjo.......................................................................................27
Gambar 3.2 DFD level 0 ( Admin )................................................................28
Gambar 3.3 DFD level 0 (user)......................................................................29
Gambar 3.4 DFD level 1 (login admin).........................................................39
Gambar 3.5 DFD level 1 (fungsi admin).......................................................30
Gambar 3.6 DFD level 1 (login user guru)....................................................31
Gambar 3.7 DFD level 1 (fungsi user guru)..................................................31
Gambar 3.8 DFD level 1 (login user siswa)...................................................32
Gambar 3.9 DFD level 1 (fungsi user siswa).................................................33
Gambar 3.10 CDM E-learning SMA Hangtuah 2 Sawotratap Sidoarjo........34
Gambar 3.11 PDM E-learning SMA Hangtuah 2 Sawotratap Sidoarjo........35
Gambar 3.12 Diagram Alur Praktek Kerja Lapangan....................................37
Gambar 3.13 gambar login pada menu Beranda...........................................38
Gambar 3.14 Rancangan Menu Pendaftaran Siswa - siswi...........................39
Gambar 3.15 Form Login pada tampilan beranda........................................40
Gambar 3.16 Tampilan beranda user.............................................................40
Gambar 3.17 Tampilan upload user ( siswa ) pada halaman E-Learning......41
Gambar 3.18 Tampilan upload user ( Guru ) pada halaman E-Learning......41
Gambar 3.19 Tampilan download user pada E-Learning..............................42
Gambar 3.20 Tampilan beranda admin.........................................................42
Gambar 3.21 Rancangan Menu Pendaftaran Guru........................................43
Gambar 3.22 Tampilan Halaman data user....................................................43
Gambar 3.23 Tampilan Halaman data user....................................................44
Gambar 3.24 Tampilan halaman view file user (siswa / guru) pada halaman
admin..............................................................................................................44
Gambar 4.1 Tampilan Login..........................................................................47
Gambar 4.2 Tampilan utama aplikasi E-Learning........................................47
Gambar 4.3 Tampilan login sebagai Admin..................................................48
Gambar 4.4 Tampilan awal pada halaman admin.........................................48
Gambar 4.5 Tampilan form pendaftaran guru pada admin............................49
vi
Gambar 4.6 Tampilan data siswa yang telah mendaftar................................50
Gambar 4.7 Tampilan data guru yang telah mendaftar..................................50
Gambar 4.8 View file guru pada halaman Admin..........................................51
Gambar 4.9 View file guru pada halaman Admin setelah di Submit.............51
Gambar 4.10 View file siswa pada halaman Admin......................................52
Gambar 4.11 View file siswa pada halaman Admin setelah di Submit..........52
Gambar 4.12 Tampilan form login kedalam e-learning sebagai guru.......53
Gambar 4.13 Tampilan masuk pada beranda guru setelah login...................54
Gambar 4.14 Tampilan form pada upload file tugas atau materi guru yang
berhasil diupload............................................................................................54
Gambar 4.15 Pilih Daftar untuk mendaftarkan user untuk siswa .................55
Gambar 4.16 Tampilan pada form download(siswa).....................................55
Gambar 4.17 Tampilan login dengan user siswa...........................................56
Gambar 4.18 Tampilan Beranda user siswa...................................................56
Gambar 4.19 Tampilan konten download pada user siswa memilih mata
pelajaran.........................................................................................................57
Gambar 4.20 Tampilan setelah memilih mata pelajaran................................57
Gambar 4.21 Tampilan setelah klik pada tombol download didownload......58
Gambar 4.22 Tampilan hasil download file tugas..........................................58
Gambar 4.23 Tampilan form pada upload file jawaban berhasil diupload....59
Gambar 4.24 Melihat hasil yang telah berhasil diupload oleh siswa.............59
Gambar 4.25 Tampilan guru memilih mata pelajaran yang ingin didownload
filenya.............................................................................................................60
Gambar 4.26 Tampilan guru mengklik download file jawaban tugas...........60
Gambar 4.27 Tampilan setelah klik pada tombol download dan berhasil
didownload.....................................................................................................60

DAFTAR TABEL

vii
Tabel 3.1 Jadwal kegiatan..............................................................................36

viii
 BAB I

PENDAHULUAN

1.1 Latar Belakang

Internet berasal dari kata Interconnection Networking dan

mempunyai arti hubungan komputer dengan berbagai tipe yang
membentuk sistem jaringan mencakup seluruh dunia (jaringan komputer
global) dengan melalui jalur telekomunikasi seperti telepon, radio link,
satelit dan lainnya sehingga di dalamnya menghubungkan situs-situs
akademik, pemerintahan, komersial, organisasi, maupun perorangan.
Internet mengacu pada istilah jaringan bukan aplikasi.
Manfaat Internet sebagai salah satu media terbesar di dunia bisa
digunakan sebagai pendorong majunya pendidikan di Indonesia.
Khususnya teknologi internet hadir sebagai media / sarana yang
multifungsi. Komunikasi melalui internet dapat dilakukan secara
interpesonal (misalnya e-mail,chatting dan e-learning ) atau secara massal,
yang dikenal one to many communication (misalnya mailing list). Dengan
adanya aplikasi teleconference, INTERNET juga dapat hadir secara real
time audio visual seperti pada metode konvensional.
Pengaplikasian E-Learning di Indonesia sebenarnya sudah
terbilang cukup lama diaplikasikan oleh beberapa perguruan tinggi di
Indonesia, dan dalam beberapa tahun terakhir ini kembali marak
setelah program belajar gratis dikumandangkan oleh mentri pendidikan
nasional kabinet Indonesia bersatu, serta penggunaan infrastruktur
teknologi informasi sebagai langkah pemerataan kualitas pendidikan
skala nasional untuk meningkatkan citra bangsa dalam hal
peningkatan mutu pendidikan.

1
 2

Kami melihat ada sekolah yang maju seperti SMA Hangtuah 2

Sawotratap Sidoarjo yang cara pembelajarannya sudah bagus dan disini
kami membuat sebuah wadah untuk pemanfaatan media teknologi
informasi yang modern dengan membuat e-Learning agar siswa dapat
inisiatif untuk mendapatkan ilmu dengan memanfaatkan sebuah teknologi
pendidikan yang berperan aktif dalam penciptaan pemerataan dan
perluasan akses pendidikan, mutu, relevansi, daya saing keluaran
pendidikan ke seluruh pelosok nusantara sehingga tata kelola, akun
tabilitas dan citra pendidikan di Indonesia meningkat.
Sistem E-learning dalam Sma Hangtuah 2 Sawotratap Sidoarjo
lebih bersifat demokratis dibandingkan dengan kegiatan belajar pada
pendidikan konvensional, karena peserta didik memiliki kebebasan dan
tidak merasa khawatir atau ragu-ragu maupun takut, baik untuk
mengajukan pertanyaan maupun menyampaikan pendapat atau tanggapan
karena tidak ada peserta belajar lainnya yang secara fisik langsung
mengamati dan kemungkinan akan memberikan komentar, meremehkan,
atau mencemoohkan pertanyaan maupun pernyataannya.

1.2 Rumusan Masalah

Berdasarkan informasi yang terdapat dalam latar belakang di

atas, maka dapat disimpulkan bahwa permasalahan yang akan dipecahkan
dalam kegiatan ini adalah :
1. Bagaimana membuat atau merancang system pembelajaran E-learning
di Sma Hangtuah 2 Sawotratap Sidoarjo.
2. Bagaimana cara merancang database sistem E-learning.
 3

1.3 Batasan Masalah

Dalam pembuatan produk e-Learning di SMA hangtuah 2

sawotratap sidoarjo terdapat batasan masalah pembahasan yang meliputi :
1. E-learning diimplementasikan dalam satu kelas.
2. Tidak menggunakan lupas password
3. Menggunakan bahasa PHP, XMAP dan MYSQL
4. Tidak menampilkan profile sekolah

1.4 Tujuan

Pelaksanaan Penelitian ini memiliki beberapa tujuan bagi penulis,

yaitu :
1. Menyelesaikan tugas mata kuliah peraktek kerja lapangan
(PKL) .
2. Implementasi E-learning pada SMA Hangtuah 2 Sawotratap
Sidoarjo.
3. Menganalisa efektifitas dan optimasi sistem aplikasi E-
Learning

1.5 Manfaat

Manfaat yang didapat dalam melakukan PKL adalah :

1. Bagi Penulis.
a. Menerapkan ilmu-ilmu yang diperoleh selama kuliah.
b. Untuk mengetahui gambaran umum institusi/lembaga, serta
mengetahui kondisi sebenarnya yang terjadi di dunia kerja.
c. Untuk memenuhi salah satu syarat kelulusan strata satu
(S1), Jurusan Teknik Informatika Fakultas Teknologi Industri
Universitas Pembangunan Nasional “Veteran” Jawa Timur
4

2. Bagi Lembaga
 a. Ikut menunjang program akademik, serta membantu
pemerintah dalam menyiapkan tenaga kerja yang
berpengalaman di bidangmya.
b. Sebagai upaya ikut membantu menyiapkan tenaga terampil
bagi mahasiswa yang akan terjun ke dunia kerja.
c. Menjalin kerja sama dan saling mengenal antara Intansi
kerja dan pendidikan, sehingga bisa dijadikan referensi
untuk menyiapkan tenaga kerja yang lebih maju dan
kompeten di bidangnya.
3. Bagi Universitas.
a. Mengetahui kemampuan mahasiswa dalam menguasai
materi pelajaran yang diperoleh dibangku kuliah.
b. Mengetahui kemampuan mahasiswa dalam menerapkan
ilmunya dan sebagai bahan evaluasi.
c. Memberikan gambaran tentang kesiapan mahasiswa dalam
menghadapi dunia kerja yang sebenarnya.

1.6 Sistematika Penulisan

BAB I PENDAHULUAN
Pendahuluan berisi mengenai gambaran umum tentang latar
belakang, rumusan masalah, batasan masalah, tujuan penelitian,
manfaat penelitian, dan sistematika penulisan.
BAB II TINJAUAN PUSTAKA
Tinjauan pustaka ini berisi tentang gambaran umum objek
pekerjaan, pengertian-pengertian dasar dan menguraikan teori –
teori yang berhubungan dengan topik yang dibahas dan dipakai
dasar dalam menganalisa dan menyelesaikan masalah sebagai
landasan menjadi kerangka pemikiran bagi penulis.
BAB III METODE PRAKTEK KERJA LAPANGAN
Metode Praktek Kerja Lapangan ini berisi tentang tahapan,
jadwal, lokasi dan waktu penelitian, metode yang digunakan
 5

pada saat pelaksanaan Praktek Kerja Lapangan, dan alur Praktek

Kerja Lapangan.
BAB IV HASIL DAN PEMBAHASAN
Bab ini akan membahas mengenai pengujian halaman
utama serta tampilan input dan output dari hasil Praktek Kerja
Lapangan.
BAB V KESIMPULAN DAN SARAN
Berisi tentang kesimpulan yang diperoleh dari hasil
penganalisaan data dari bab - bab sebelumnya. Dimana berisi
tentang saran – saran yang diharapkan dapat bermanfaat dan
dapat membangun serta mengembangkan isi laporan tersebut
sesuai dengan tujuan penulisan Praktek Kerja Lapangan.
 BAB II

TINJAUAN PUSTAKA

2.1 Sejarah Singkat SMA HANGTUAH 2 SIDOARJO

Dalam lingkup ini akan dijelaskan tentang profil, tujuan, visi dan
misi dari SMA HANGTUAH 2 SIDOARJO.

2.1.1 Profile SMA HANGTUAH 2 SIDOARJO

Gambar 2.1 Gedung SMA HANG TUAH 2

SMA HANGTUAH 2 SIDOARJO didirikan oleh Yayasan Hang

Tuah Jalasenastri Cabang Surabaya pada tanggal 18 Juli 1988, yang
berlokasi di Jl. Kutilang No. 9 -11 Surabaya. Dan pada tahun pelajaran
1998 – 1999 gedung SMA Hang Tuah 2 pindah lokasi dari Jl. Kutilang No.
9 – 11 Surabaya ke Jl. KRI Ratulangi No. 1 Gedangan – Sidoarjo.
Tujuan dari SMA HANGTUAH 2 SIDOARJO sendiri :
1. Mengembangkan sistim kurikulum sesuai tuntutan zaman yaitu
Kurikulum Berbasis Kompetensi.
2. Meningkatkan jumlah dan kualifikasi tenaga kependidikan sesuai
dengan tuntutan program pembelajaran yang berkualitas.
3. Mengupayakan pemenuhan kebutuhan sarana media pembelajaran
untuk menerapkan pembelajaran multi media dan multi metode.

6
 7

4. Meningkatkan pelaksanaan ekstra kurikulum unggulan sesuai potensi

dan minat siswa. Memiliki ketrampilan computer serta mampu
mengembangkan di masyarakat.
5. Menjalin kerjasama dengan lembaga instansi terkait dalam rangka
mengembangkan di masyarakat.
6. Meningkatkan mutu manajemen sekolah.
Sistem pengajaran pada SMA HANGTUAH 2 SIDOARJO
termasuk sudah cukup canggih karena pembelajaran yang interaktif seperti
menggunakan slide dan dipresentasikan yang setiap siswa mudah
memahami dan guru sendiri dapat mengimplementasikan system
pengajaran yang baru.
Selangkah demi selangkah SMA HANG TUAH 2 SIDOARJO
akan meningkatkan pelayanan informasi kepada siswa sesuai dengan
kemajuan Teknologi . Selama 25 Tahun perjalanan SMA HANG TUAH 2
SIDOARJO telah mengalami beberapa kali pergantian pimpinan antara
lain :
1. Drs. Abdur Rachman Hurry, Periode 1988 – 1990
2. Drs. Suharyono, Periode 1990 – 1991
3. Drs. Suwito , Periode 1991 – 2006
4. Drs. Sumantri, MM , Periode 2006 – 2013
5. Siti Aisyah, S.Pd, MM , Periode 2013 – sekarang

Sebelumnya diSMA HANGTUAH 2 SIDOARJO sudah ada

sebuah website yang dibuat , dan seiring dengan perkembangan teknologi
informasi dan ilmu pengetahuan. Dengan website ini sekolah dapat
menyampaikan berbagai informasi tentang kegiatan sekolah mulai dari
pembelajaran sampai perkembangan pendidikan dan dapat menjalin
komunikasi yang baik, selain dapat mendukung terhadap "Home 8
schooling" sebagai salah satu model pendekatan pembelajaran yang efektif
dan efesien.
Sekarang ini telah populer sistem pembelajaran yang dapat diakses
dari mana dan kapan saja (time and place flexibility). Bertambahnya
Interaksi pembelajaran antara peserta didik dengan guru atau instruktur
(interactivity enhancement). Menjangkau peserta didik dalam cakupan
yang luas (global audience). Mempermudah penyempurnaan dan
penyimpanan materi pembelajaran (easy updating of content as well as
archivable capabilities) yaitu dengan system e-Learning.
http://smahangtuah2.org/about-us/sejarah.html

2.1.2 Visi dan Misi SMA HANGTUAH 2 SIDOARJO

Visi :
Unggul dalam prestasi akademis berdasarkan imtaq, iptek,
kedisplinan yang tinggi dan terbinanya wawasan bahari.
Misi :
1. Mempersiapkan para peserta didik yang bertaqwa kepada
Tuhan Yang Maha Esa dan berakhlak mulia.
2. Meningkatkan mutu pendidikan berdasar kurikulum sekolah
yang berorientasi pada ketrampilan hidup sesuai dengan
tuntutan masyarakat dan perkembangan IPTEKsehingga warga
sekolah mampu bersaing secara global.
3. Menumbuh kembangkan kesadaran peserta didik, guru dan
karyawan untuk berbuat disiplin dan mempunyai dedikasi
yang tinggi dalam melaksanakan kewajiban.
4. Mengembangkan sekolah dengan menggunakan prosesw
pembelajaran berdasarkan ketentuan sekolah sehingga guru dan
siswa dapat mewujudkan suasana pembelajaran aktif, kreatif,
efektif, menyenangkan dan mencerahkan.
5. Membekali peserta didik dengan ilmu pengetahuan bahari agar
mampu meningkatkan wawasan kebaharian.
6. Menghasilkan tamatan sekolah yang memiliki motivasi, 9
komitmen, ketrampilan, kreatifitas untuk mandiri, kepekasaan
sosial dan kepemimpinan.
7. Memberikan dukungan fasilitas yang memadai agar kegiatan
belajar mengajar berjalan dengan lancar, tertib, efektif dan
efisien guna menunjang keberhasilan peserta didik untuk
melanjutkan ke perguruan tinggi.
http://smahangtuah2.org/about-us/visimisi.html
2.1.3 Gedung SMA HANG TUAH 2 SIDOARJO

Jumlah bangunan SMA HANG TUAH 2 Sidoarjo terdiri

atas 4 gedung utama ( Gedung A, B, C dan D) yang berada dalam 1
lokasi dengan luas tanah 6034 m2, serta luas bangunan 4075 m2,
yang meliputi sarana dan prasarana sebagai berikut :
 Lapangan bola basket - 1 lapangan
 Lapangan bola volley - 1 lapangan
 Lapangan futsal - 1 lapangan
 Lapangan tennis - 1 lapangan
 Wall climbing - 1 buah
 Tennis meja - 2 set
 Laboratorium bahasa - 1 ruang ber-AC (50 headset dengan
desain control panel)
 Laboratorium komputer - 1 ruang ber-AC (51 unit PC Intel
dual core prosesor dengan LCD monitor)
 Laboratorium IPA - 2 ruang (Fisika & Biologi)
 Laboratorium IPS - 1 ruang ber-AC
 Perpustakaan - 1 ruang ber-AC yang dilengkapi dengan TV, 4
unit komputer serta wifi hot spot untuk akses internet
 Masjid - 1 buah ( spesifikasi bangunan ; atap = rangka
galvalum, rangka jendela dan daun pintu = rangka bolvenlis )
 Kantin (desain Pujasera) - 5 stan
 Ruang pertemuan - 1 ruang 10
 Ruang aula / kesenian - 1 ruang dengan luas bangunan 17,7 x
7,5 m2
 Ruang Bimbingan Konseling - 1 ruang ber-AC yang
dilengkapi 1 unit komputer, dan 1 ruang khusus dengan daya
tampung efektif 5 siswa untuk kegiatan konseling kelompok
 Ruang UKS - 1 ruang
 Ruang OSIS - 1 ruang
  Ruang Multimedia
 35 ruang kelas dengan masing-masing menggunakan papan
tulis whiteboard, AC (Air Conditioning), serta dilengkapi
dengan sistem audio tersentralisasi.
 Telepon umum
 Area parkir yang terpisah antara kelas X, XI, dan XII, yang
diawasi oleh satpam sekolah untuk pengamanan
 Area taman sebagai penunjang kegiatan belajar mengajar
siswa.
http://smahangtuah2.org/about-us/fasilitas.html

2.2 E-learning

E-learning adalah istilah yang digunakan untuk pembelajaran yang

memanfaatkan teknologi komunikasi dan informasi dengan berbagai cara
untuk mendukung dan meningkatkan proses pembelajaran. Ada berbagai
macam teknologi yang dapat digunakan, mulai dari aplikasi komputer
online maupun offline, teknologi presentasi seperti aplikasi Microsoft
PowerPoint atau proyektor, World Wide Web, web-conference, materi
multimedia seperti foto atau animasi, tools untuk menilai pekerjaan siswa,
permainan, dan masih banyak lagi.
Apa pentingnya penggunaan metode e-learning dalam
pembelajaran? Selain mencegah ketertinggalan dari dunia luar di era
teknologi seperti sekarang, penggunaan metode e-learning mampu 11

meningkatan fleksibilitas dan kualitas belajar melalui beberapa manfaat,

antara lain:
 Menyediakan akses terhadap berbagai sumber data dan materi yang
tidak dapat diakses dengan cara lain, seperti grafik, suara, animasi,
film, dan lain-lain.
 Memberi kebebasan pada siswa untuk menentukan sendiri waktu
dan tempat belajar.
 Memungkinkan siswa belajar dengan kecepatan dan cara sesuai
kemampuannya.
  Menyediakan lingkungan belajar yang terfokus pada siswa
sehingga dapat memenuhi kebutuhan belajar masing-masing siswa.
 Menciptakan lingkungan belajar yang aktif.
 Mendukung terjalinnya komunikasi yang lebih intens antara siswa
dan guru.
 Memungkinkan pemberian umpan balik atau reinforcement dengan
frekuensi dan kecepatan yang lebih.

Dengan mengkombinasikan aneka teknologi yang tersedia, seorang

guru dapat memaksimalkan potensi metode belajar e-learning. Baik guru
maupun siswa dapat menemukan cara berkomunikasi dan belajar yang
lain, juga bergabung dalam aneka komunitas baru. Dengan begitu, guru
dapat membuat siswa terlibat secara lebih aktif dalam pembelajaran
mereka.
Kecenderungan untuk mengembangkan e-learning sebagai salah
satu alternatif pembelajaran di berbagai lembaga pendidikan dan pelatihan
semakin meningkat sejalan dengan perkembangan di bidang teknologi
Komunikasi dan informasi .

2.2.1 Definisi E-learning

e-Learning adalah situs untuk memanfaatkan teknologi

internet sebagai kelas virtual yang diharapkan dapat menambah
interaksi antara dosen dan mahasiswa. Situs ini sama sekali bukan 12
dimaksudkan untuk menggantikan proses pembelajaran tatap muka
di kelas ataupun di laboratorium.
Bisa juga diartikan sistem pembelajaran elektronik atau e-
pembelajaran (Inggris: Electronic learning disingkat E-learning)
adalah cara baru dalam proses belajar mengajar. E-learning
merupakan dasar dan konsekuensi logis dari perkembangan
teknologi informasi dan komunikasi. Dengan e-learning, peserta
ajar (learner atau murid) tidak perlu duduk dengan manis di ruang
kelas untuk menyimak setiap ucapan dari seorang guru secara
langsung dan E-learning juga dapat mempersingkat jadwal.
 Sebagaimana yang disebutkan di atas, e-learning telah
mempersingkat waktu pembelajaran dan membuat biaya studi lebih
ekonomis. E-learning mempermudah interaksi antara peserta didik
dengan bahan/materi, peserta didik dengan dosen /guru instruktur
maupun sesama peserta didik. Peserta didik dapat saling berbagi
informasi dan dapat mengakses bahan-bahan belajar setiap saat dan
berulang-ulang, dengan kondisi yang demikian itu peserta didik
dapat lebih memantapkan penguasaannya terhadap materi
pembelajaran.
Dalam e-learning, faktor kehadiran guru atau pengajar
otomatis menjadi berkurang atau bahkan tidak ada. Hal ini
disebabkan karena yang mengambil peran guru adalah komputer
dan panduan-panduan elektronik yang dirancang oleh "contents
writer", designer e-learning dan pemrogram komputer.
Dengan adanya e-learning para guru/dosen/instruktur akan
lebih mudah :
1. melakukan pemutakhiran bahan-bahan belajar yang menjadi
tanggung jawabnya sesuai dengan tuntutan perkembangan
keilmuan yang mutakhir.
2. mengembangkan diri atau melakukan penelitian guna
13
meningkatkan wawasannya.
3. mengontrol kegiatan belajar peserta didik.

Kehadiran guru sebagai makhluk yang hidup yang dapat

berinteraksi secara langsung dengan para murid telah menghilang
dari ruang-ruang elektronik e-learning ini. Inilah yang menjadi ciri
khas dari kekurangan e-learning yang tidak bagus. Sebagaimana
asal kata dari e-learning yang terdiri dari e (elektronik) dan
learning (belajar), maka sistem ini mempunyai kelebihan dan
kekurangan.

E-pembelajaran atau pembelajaran elektronik pertama kali

diperkenalkan oleh universitas Illinois di Urbana-Champaign
dengan menggunakan sistem instruksi berbasis komputer
(computer-assisted instruction ) dan komputer bernama PLATO.
Sejak itu, perkembangan E-learning dari masa ke masa adalah
sebagai berikut:
1. Tahun 1990 : Era CBT (Computer-Based Training) di mana
mulai bermunculan aplikasi e-learning yang berjalan dalam PC
standlone ataupun berbentuk kemasan CD-ROM. Isi materi
dalam bentuk tulisan maupun multimedia (Video dan AUDIO)
DALAM FORMAT mov, mpeg-1, atau avi.
2. Tahun 1994 : Seiring dengan diterimanya CBT oleh masyarakat 14
sejak tahun 1994 CBT muncul dalam bentuk paket-paket yang
lebih menarik dan diproduksi secara massal.
3. Tahun 1997 : LMS (Learning Management System). Seiring
dengan perkembangan teknologi internet, masyarakat di dunia
mulai terkoneksi dengan internet. Kebutuhan akan informasi
yang dapat diperoleh dengan cepat mulai dirasakan sebagai
kebutuhan mutlak , dan jarak serta lokasi bukanlah halangan
lagi. Dari sinilah muncul LMS. Perkembangan LMS yang
makin pesat membuat pemikiran baru untuk mengatasi masalah
interoperability antar LMS yang satu dengan lainnya secara
standar. Bentuk standar yang muncul misalnya standar yang
dikeluarkan oleh AICC (Airline Industry CBT Commettee),
IMS, SCORM, IEEE LOM, ARIADNE, dsb.
4. Tahun 1999 sebagai tahun Aplikasi E-learning berbasis Web.
Perkembangan LMS menuju aplikasi e-learning berbasis Web
berkembang secara total, baik untuk pembelajar (learner)
maupun administrasi belajar mengajarnya. LMS mulai
digabungkan dengan situs-situs informasi, majalah, dan surat
kabar. Isinya juga semakin kaya dengan perpaduan
multimedia , video streaming, serta penampilan interaktif
dalam berbagai pilihan format data yang lebih standar, dan
berukuran kecil.arget waktu pembelajaran, dan tentu saja
menghemat biaya yang harus dikeluarkan oleh sebuah program
studi atau program pendidikan.
http://indrayani.staff.ipdn.ac.id/?p=56 .
2.2.2 Manfaat Elearning dalam Pengajaran

Manfaat e-learning juga dapat dilihat dari 2 sudut pandang :

a. Manfaat bagi siswa
Dengan kegiatan e-Learning dimungkinkan
berkembangnya fleksibilitas belajar yang tinggi. Artinya, kita
dapat mengakses bahan-bahan belajar setiap saat dan berulang-
ulang. Selain itu kita juga dapat berkomunikasi dengan
guru/dosen setiap saat, misalnya melalui chatting dan email.
Mengingat sumber belajar yang sudah dikemas secara
elektronik dan tersedia untuk diakses melalui internet, maka
kita dapat melakukan interaksi dengan sumber belajar ini kapan
saja dan dari mana saja, juga tugas-tugas pekerjaan rumah
dapat diserahkan kepada guru/dosen begitu selesai dikerjakan. 15

b. Manfaat bagi pengajar

Dengan adanya kegiatan e-Learning manfaat yang
diperoleh guru/dosen antara lain adalah bahwa guru/dosen/
instruktur akan lebih mudah melakukan pembaruan materi
maupun model pengajaran sesuai dengan tuntutan
perkembangan keilmuan yang terjadi, juga dapat dengan efisien
mengontrol kegiatan belajar siswanya.

2.2.3 Keuntungan E-learning

Keuntungan menggunakan e-Learning diantaranya adalah

sebagai berikut:
 Menghemat waktu proses belajar mengajar
 Mengurangi biaya perjalanan
 Menghemat biaya pendidikan secara keseluruhan
(infrastruktur, peralatan, buku-buku)
 Menjangkau wilayah geografis yang lebih luas
  Melatih pembelajar lebih mandiri dalam mendapatkan ilmu
pengetahuan.
http://www.bppaudnireg1.com/buletin/read.php?id=23&dir=1&idStatus=4

2.3 Macromedia Dreamweaver 8

Macromedia Dreamweaver adalah atur cara penyunting HTML

yang diperkembangkan oleh Macromedia (kini diambil alih oleh Adobe).
Ia merupakan sistem penyuntingan yang menggabungkan daya
pengeluaran WYSIWYG (What You See Is What You Get) dengan kuasa
pengawalan kode HTML. Penggabungan ini adalah unik pada sekitar
tahun 1990-an dan menyebabkan penggunaannya secara meluas.
Macromedia Dreamweaver sekarang terdapat pula dalam versi Macintosh
serta Windows, dan memegang lebih kurang 80 % daripada pasaran atur 16

cara penyunting HTML yang profesional.

Macromedia Dreamweaver merupakan software webdesign yang

paling banyak digunakan di dunia. Dengan Macromedia Dreamweaver ini
kita akan banyak belajar mengenai penggunaan Spry Fremawork untuk
keperluan mendesain web yang profesional, di samping itu banyak pula
diperoleh informasi mengenai bagaiamana meng-edit image, membuat
template, menggunakan CSS dan membuat web foto album.

Sebagai contoh adalah “Dreamweaver 8“. Dreamweaver telah

menerima beberapa anugerah, termasuknya “Persembahan Terbaik di
Dunia Internet” (“Best Show at the Internet World”), peringkat lima yang
berprestasi daripada DuniaMac (MacWorld), serta “Atur Cara Web
Tahunan Yang Terbaik” dari “Majalah PC” (PC Magazine).

2.3.1 Ciri-ciri Macromedia Dreamweaver

Ciri-ciri Dreamweaver yang terbaik termasuk kode

HTML yang dikemas secara sederhana serta dihadapkan pada
pilihan-pilihan HTML yang terbaru (seperti HTML Dinamik
dan gaya sunting melata (cascading style sheet (CSS)).
Dreamweaver juga mempunyai atur cara penyunting teks yang
terpadu serta didukung dengan bahasa pemrograman atau
JavaSkrip. Macromedia Dreamweaver memadukan BBEdit
(atur cara HTML yang terpopular bagi Macintosh) dan
Homesite (untuk Windows) dengan bentuk WYSIWYG yang
mudah digunakan. Menggunakan program Dreamweaver para
pengguna dapat menikmati manfaat bagaimana menyusun kode
HTML yang baik.

Beraneka ragam bentuk grafik Dreamweaver

menggunakan ‘palet’ dan ‘template’ yang sudah tersedia untuk
memudahkan pengguna-pengguna yang baru mulai belajar
menciptakan Web yang didalamnya memuat berbagai ciri-ciri
seperti animasi, borang interaktif dan penyelesaian e- 17
commerse, walaupun mereka tidak memahami HTML.

Dreamweaver memnyediakan pengguna memilih

berbagai macam bentuk ‘template’ untuk membangun web
yang baik. Macromedia Dreamweaver juga terdapat ‘tools’
yang memudahkan pengeditan untuk pengguna baru, seperti
mencari dan mengganti garis-garis teks ataupun kode dengan
apa saja parameter yang ditentukan. Panel perjalanan
(behaviors panel) juga memudahkan penciptaan JavaSkrip yang
menarik tanpa pengetahuan pengekodean HTML.

Dengan munculnya versi MX, Macromedia

menggabungkan ‘tools’ penciptaan kandungan web dinamis ke
dalam Dreamweaver. Sesuai dengan istilah WYSIWYG
HTML, Macromedia Dreamweaver memperbolehkan penguna
untuk menghubungkan kepada pangkalan data (seperti
MySQL) untuk menampilkan dan memaparkan kandungan atau
isi web dengan menggunakan teknologi skrip seperti PHP, ASP
 dan ASP.net, tanpa pengalaman pengaturan / cara terlebih
dahulu mengenai hal tersebut.

2.3.2 Keuntungan Menggunakan Macromedia Dreamweaver

Ada beberapa keuntungan yang bisa diperoleh dari
penciptaan website melalui Macromedia Dreamweaver, antara
lain:
 Memudahkan dalam me-manage situs
 Web yang dibuat tersusun secara hierarki

 Memudahkan dalam mem-publis halaman situs (website)

 Kita bisa menentukan teknologi server side yang

digunakan

 Memudahkan dalam pengaturan CSS (Cascading Style 18

Sheet)

Macromedia Dreamweaver merupakan software yang

paling mudah untuk digunakan dalam mendesain web. Banyak
sekali fitur-fitur didalamnya yang sangat memudahkan kita
untuk merancang desain web tanpa harus mengerti kode-kode
HTML. Kita dapat berkreasi sendiri didalamnya sesuai dengan
jiwa seni kita yang kita miliki, karena pada program ini dituntut
untuk mampu membuat desain web yang interaktif dan
menarik. Untuk kalangan pendidik dapat memasukkan materi
bahan ajarnya ke dalam bentuk web yang didesain
menggunakan Macromedia Dreamweaver. Bagi para pemula
program ini sangat memudahkan kita untuk dapat merancang
desain web tanpa harus belajar mahal, pasalnya sekarang
banyak sekali CD Tutorial yang menyajikan berbagai panduan
untuk belajar secara autodidak.

http://indrawaey.blogspot.com/2012/05/v-behaviorurldefaultvmlo.html
2.4 PHP

PHP sendiri sebenarnya merupakan singkatan dari “Hypertext

Preprocessor”, yang merupakan sebuah bahasa scripting tingkat tinggi
yang dipasang pada dokumen HTML. Sebagian besar sintaks dalam PHP
mirip dengan bahasa C, Java dan Perl, namun pada PHP ada beberapa
fungsi yang lebih spesifik. Sedangkan tujuan utama dari penggunaan
bahasa ini adalah untuk memungkinkan perancang web yang dinamis dan
dapat bekerja secara otomatis.

2.4.1 Sejarah PHP

PHP pertama kali dibuat oleh Rasmus Lerdroft, seorang

programmer C. Pada waktu itu PHP masih bernama FI (Form
Interpreted), yang wujudnya berupa sekumpulan script yang
digunakan untuk mengolah data form dari web. Jadi semula PHP
19
digunakannya untuk menghitung jumlah pengunjung di dalam
webnya.
Kemudian ia mengeluarkan Personal Home Page Tools versi
1.0 secara gratis. Versi ini pertama kali keluar pada tahun 1995.
Isinya adalah sekumpulan script PERL yang dibuatnya untuk
membuat halaman webnya menjadi dinamis. Selanjutnya Rasmus
merilis kode sumber tersebut untuk umum dan menamakannya
PHP/FI, kependekan dari Hypertext Preprocessing /Form
Interpreter.Dengan perilisan kode sumber ini menjadi open source,
maka banyak programmer yang tertarik untuk ikut mengembangkan
PHP.
Kemudian pada tahun 1996 ia mengeluarkan PHP versi 2.0
yang kemampuannya telah dapat mengakses database dan dapat
terintegrasi dengan HTML. Pada rilis ini interpreter PHP sudah
diimplementasikan dalam program C. Dalam rilis ini disertakan
juga modul-modul ekstensi yang meningkatkan kemampuan PHP/FI
secara signifikan.Pada tahun 1998 tepatnya pada tanggal 6 Juni
 1998 keluarlah PHP versi 3.0 yang dikeluarkan oleh Rasmus sendiri
bersama kelompok pengembang softwarenya.
PHP versi 4.0 keluar pada tanggal 22 Mei 2000 merupakan
versi yang lebih lengkap lagi dibandingkan dengan versi
sebelumnya. Perubahan yang paling mendasar pada PHP 4.0 adalah
terintegrasinya Zend Engine yang dibuat oleh Zend Suraski dan
Andi Gutmans yang merupakan penyempurnaan dari PHP scripting
engine. Yang lainnya adalah build in HTTP session, tidak lagi
menggunakan library tambahan seperti pada PHP. Tujuan dari
bahasa scripting ini adalah untuk membuat aplikasi-aplikasi yang
dijalankan di atas teknologi web. Dalam hal ini, aplikasi pada
20
umumnya akan memberikan hasil pada web browser, tetapi
prosesnya secara keseluruhan dijalankan web server.
PHP 4.0 adalah versi PHP yang paling banyak dipakai pada
awal abad ke-21. Versi ini banyak dipakai disebabkan
kemampuannya untuk membangun aplikasi web kompleks tetapi
tetap memiliki kecepatan dan stabilitas yang tinggi. Pada Juni 2004,
Zend merilis PHP 5.0. Dalam versi ini, inti dari interpreter PHP
mengalami perubahan besar. Versi ini juga memasukkan model
pemrograman berorientasi objek ke dalam PHP untuk menjawab
perkembangan bahasa pemrograman ke arah paradigma berorientasi
objek.
http://koplarpudak.blogspot.com/

2.5 MYSQL

MySQL adalah sebuah perangkat lunak system manajemen basis

data SQL (DBMS) yang multithread, dan multi-user. MySQL adalah
implementasi dari system manajemen basisdata relasional (RDBMS).
MySQL dibuah oleh TcX dan telah dipercaya mengelola system dengan 40
buah database berisi 10.000 tabel dan 500 di antaranya memiliki 7 juta
baris.
 MySQL AB merupakan perusahaan komersial Swedia yang
mensponsori dan yang memiliki MySQL. Pendiri MySQL AB adalah dua
orang Swedia yang bernama David Axmark, Allan Larsson dan satu orang
Finlandia bernama Michael “Monty”. Setiap pengguna MySQL dapat
menggunakannya secara bebas yang didistribusikan gratis dibawah lisensi
GPL(General Public License) namun tidak boleh menjadikan produk
turunan yang bersifat komersial.

Pada saat ini MySQL merupakan database server yang sangat

terkenal di dunia, semua itu tak lain karena bahasa dasar yang digunakan
untuk mengakses database yaitu SQL. SQL (Structured Query Language)
pertama kali diterapkan pada sebuah proyek riset pada laboratorium riset
San Jose, IBM yang bernama system R. Kemudian SQL juga dikembangan
oleh Oracle, Informix dan Sybase. Dengan menggunakan SQL, proses
pengaksesan database lebih user-friendly dibandingan dengan yang lain,
misalnya dBase atau Clipper karena mereka masih menggunakan perintah-
perintah pemrograman murni.
http://upyes.wordpress.com/2013/02/06/pengertian-dan-sejarah-mysql/ 21

2.6 APACHE

Apache adalah sebuah nama web server yang bertanggung jawab

pada request-response HTTP dan logging informasi secara detail(kegunaan
basicnya). Selain itu, Apache juga diartikan sebagai suatu web server yang
kompak, modular, mengikuti standar protokol HTTP, dan tentu saja sangat
digemari. Kesimpulan ini bisa didapatkan dari jumlah pengguna yang jauh
melebihi para pesaingnya. Sesuai hasil survai yang dilakukan oleh
Netcraft, bulan Januari 2005 saja jumlahnya tidak kurang dari 68% pangsa
web server yang berjalan di Internet. Ini berarti jika semua web server
selain Apache digabung, masih belum bisa mengalahkan jumlah Apache.
 Apache memiliki fitur-fitur canggih seperti pesan kesalahan yang
dapat dikonfigur, autentikasi berbasis basis data dan lain-lain. Apache juga
didukung oleh sejumlah antarmuka pengguna berbasis grafik (GUI) yang
memungkinkan penanganan server menjadi mudah. Apache merupakan
perangkat lunak sumber terbuka dikembangkan oleh komunitas terbuka
yang terdiri dari pengembang-pengembang dibawah naungan Apache
Software Foundation.
Saat ini ada dua versi Apache yang bisa dipakai untuk server
produksi, yaitu versi mayor 2.0 dan versi mayor 1.3. Apache merupakan
webserver yang paling banyak digunakan saat ini. Hal ini disebabkan oleh
beberapa sebab, di antaranya adalah karena sifatnya yang opensource dan
mudahnya mengkostumisasikannya. diantaranya dengan menambahkan
support secure protocol melalui ssl dan konektifitasnya dengan database
server melalui bahasa scripting PHP .
http://duniakamu.wordpress.com/2010/02/22/pengertian-apache/ 22

2.7 XAMPP

XAMPP adalah sebuah software web server apache yang

didalamnya sudah tersedia database server mysql dan support php
programming. XAMPP merupakan software yang mudah digunakan, gratis
dan mendukung instalasi di Linux dan Windows. Keuntungan lainnya
adalah cuma menginstal satu kali sudah tersedia Apache Web Server,
MySQL Database Server, PHP Support (PHP 4 dan PHP 5) dan beberapa
module lainnya. Hanya bedanya kalau yang versi untuk Windows sudah
dalam bentuk instalasi grafis dan yang Linux dalam bentuk file
terkompresi tar.gz. Kelebihan lain yang berbeda dari versi untuk Windows
adalah memiliki fitur untuk mengaktifkan sebuah server secara grafis,
sedangkan Linux masih berupa perintah-perintah di dalam console. Oleh
karena itu yang versi untuk Linux sulit untuk dioperasikan. Dulu XAMPP
untuk Linux dinamakan LAMPP, sekarang diganti namanya menjadi
XAMPP FOR LINUX.
 XAMPP merupakan tool yang menyediakan paket perangkat lunak
ke dalam satu buah paket. Dengan menginstall XAMPP maka tidak perlu
lagi melakukan instalasi dan konfigurasi web server Apache, PHP dan
MySQL secara manual. XAMPP akan menginstalasi dan
mengkonfigurasikannya secara otomatis untuk anda atau auto konfigurasi.
XAMPP adalah singkatan dari:
1. X ( Empat system operasi),
2. A (Apache),
3. M (MySQL),
4. P (phpMyadmin) dan
5. P (Perl).

Berikut ini Penjelasan dari bagian-bagian XAMPP:

1. X , program XAMPP dapat dijalankan alias kompatibel di berbagai
sistem operas seperti Windows, Linux, Mac OS, dan Solaris.
2. A (apache) merupakan aplikasi web server. Apache ini bersifat open
source yang berarti gratis dan bisa diedit oleh penggunanya. Tugas
utama apache adalah menghasilkan halaman web yang benar kepada
user berdasarkan kode PHP yang dituliskan oleh pembuat halaman web.
jika diperlukan juga berdasarkan kode PHP yang dituliskan, maka dapat
saja suatu database diakses terlebih dahulu (misalnya dalam MySQL)
untuk mendukung halaman web yang dihasilkan.
3. M ( MySQL), merupakan aplikasi database server. Perkembangannya
disebut SQL yang merupakan kepanjangan dari Structured Query
Language. SQL merupakan bahasa terstruktur yang digunakan untuk
mengolah database. MySQL dapat digunakan untuk membuat dan
mengelola database beserta isinya. Kita dapat memanfaatkan MySQL
untuk menambahkan, mengubah, dan menghapus data yang berada
dalam database.
4. P (PHP), bahasa pemrograman web. Bahasa pemrograman PHP
merupakan bahasa pemrograman untuk membuat web yang bersifat
 server-side scripting. PHP memungkinkan kita untuk membuat halaman
web yang bersifat dinamis. Sistem manajemen basis data yang sering
digunakan bersama PHP adalah MySQl. namun juga mendukung PHP
sistem manajement database Oracle, Microsoft Access, Interbase, d-
base, PostgreSQL, dan sebagainya.
5. P (Perl), bahasa pemrograman, pertama kali dikembangkan oleh Larry
Wall di mesin Unix. Perl pertama kali dirilis pada tanggal 18 Desember
1987 ditandai dengan keluarnya Perl 1. Dua diantara karakteristik
utama perl adalah penanganan teks dan berbagai jalan pintas untuk
meyelesaikan persoalan-persoalan umum. Perl sangat populer di
gunakan dalam program-rogram CGI (Common Gateway Interface) dan
protokol internet lainnya.
Jadi Fungsi XAMPP adalah server offline yang berdiri sendiri
(seringkali disebut sebagai localhost). XAMPP terdiri dari beberapa
program yaitu Apache HTTP Server, MYSQL Database, PHP, dan Pearl.
Program ini dapat kalian download secara gratis karena tersedia dalam
lisensi GNU (General Public License). XAMPP terkenal sebagai program
web server (localhost) yang mudah digunakan alias user friendly.

PHP sendiri sebenarnya merupakan singkatan dari “Hypertext

Preprocessor”, yang merupakan sebuah bahasa scripting tingkat tinggi
yang dipasang pada dokumen HTML. Sebagian besar sintaks dalam PHP
mirip dengan bahasa C, Java dan Perl, namun pada PHP ada beberapa
fungsi yang lebih spesifik. Sedangkan tujuan utama dari penggunaan
bahasa ini adalah untuk memungkinkan perancang web yang dinamis dan
dapat bekerja secara otomatis.
http://blog.bosscript.com/pengertian-xampp-adalah.html

2.7 CMS Template

CMS adalah software yang digunakan untuk membuat, mengubah

dan mempublikasikan content ke dalam sebuah website. Fasilitas yang
 umumnya terdapat dalam cms sangat banyak, terutama yang berkaitan
dengan publikasi isi website, pengaturan halaman, pengubahan isi,
pencarian dan lain-lain. Sebuah CMS, dapat berbentuk program yang
sederhana, atau dapat juga merupakan suatu program kompleks yang
terdiri dari berbagai modul-modul ssesuai dengan fasilitas yang terdapat
didalamnya.
Aplikasi Content Management System instant yang banyak
terdapat di internet saat ini kebanyakan dibuat menggunakan scripting
language PHP dan database-nya adalah MySQL. Saat ini
perkembangan Content Management System cukup pesat, banyak vendor
yang membuat CMS instant yang didistribusikan secara gratis.
Perkembangan CMS instant ini juga dipicu oleh perkembangan web 2.0
yang memungkinkan interaksi dalam arti yang cukup luas antara
pengelola web dan pengunjung web.
Selain perkembangan teknologi web dan infrastruktur internet,
perkembangan pesat Content Management System juga dipicu oleh
kebutuhan masyarakat dan pelaku bisnis yang menginginkan web dapat
mendukung kegiatan bisnis mereka secara mudah dalam hal pengelolaan
content, cepat dalam pembuatan web, serta murah dalam pengadaannya.
http://kentos.web.id/pengertian-content-management-system-cms/
 BAB III

METODE KERJA PRAKTEK

3.1 Tempat dan waktu praktek kerja lapangan

Tempat: SMA Hangtuah 2 Sawotratap Sidoarjo

Waktu : 14 Oktober 2013 s/d Januari 2014

3.2 Rancangan Penelitian

Sub-bab ini akan menjelaskan mengenai proses desain dari sistem

E-learning SMA Hangtuah 2 Sawotratap Sidoarjo yang akan dibuat. Proses
desain sistem E-learning SMA Hangtuah 2 Sawotratap Sidoarjo dalam
sub-bab ini akan dibagi menjadi 3 tahapan: deskripsi umum sistem E-
learning SMA Hangtuah 2 Sawotratap Sidoarjo”, deskripsi umum
fungsional, dan spesifikasi kebutuhan sistem E-learning SMA Hangtuah 2
Sawotratap Sidoarjo

3.2.1 Deskripsi Umum Sistem

E-learning sebagai sistem pendidikan yang menggunakan

aplikasi elektronik untuk mendukung belajar mengajar dengan
media Internet, jaringan komputer, maupun komputer standalone.

3.2.2 Deskripsi Fungsional

E-learning yang dibuat, untuk memudahkan guru dan siswa

dalam proses belajar mengajar di SMA Hangtuah 2 Sawotratap
Sidoarjo yang memiliki hak akses penuh untuk mengakses semua
menu yang tersedia dalam E-learning.
3.2.3 Perancangan Data Flow Diagram

Desain sistem untuk sistem E-learning ini menggunakan Data

Flow Diagram (DFD). DFD digunakan sebagai alat perancangan
sistem yang berorientasi pada alur data dengan konsep dekomposisi
yang dapat digunakan untuk penggambaran analisa maupun
rancangan sistem.

3.2.3.1 Diagram Context

Diagram context menjelaskan tentang aliran data

secara umum dan akan menjadi dasar dalam penyusunan
system ke level selanjutnya. Pada diagram context ini
terdapat 3 entity yaitu admin, user siswa dan user guru
Penjelasan untuk masing – masing external entity yang
mengelilingi proses pada DFD level context adalah
sebagai berikut:
a) Admin
Admin dalam sistem ini adalah orang yang mengelola
E-learning dan mendaftarkan guru sebagai user guru.
b) User siswa
User siswa dalam sistem ini dapat melakukan upload
dan download. Dimana untuk siswa bisa upload dan
download file mata pelajaran dan tugas sekolah.
c) User Guru
User guru dalam sistem ini dapat melakukan upload
dan download. Dimana untuk guru bisa upload file mata
pelajaran dan tugas sekolah.
 Berikut ini adalah gambar 3.1 yang akan menggambarkan
tentang Context Diagram Pembuatan E-learning SMA Hangtuah 2
Sawotratap Sidoarjo ini yang di dalamnya terdapat 2 entity dan 1
proses.

login
1
verifikasi

pendaftaran guru

pemilihan mapel guru

elearning admin
hapus guru
view file guru

view file siswa

hapus file
+ hapus siswa

1 login
login

verfikasi verifikasi

upload_file download

download_file upload
Guru E_learning Siswa

view_file view_download

hapus_file hapus file

daftar
+

Gambar 3.1 Context Diagram Pembuatan E-learning SMA Hangtuah 2

Sawotratap Sidoarjo
3.2.3.2 DFD Level 0 ( Admin )

DFD level 0 menjelaskan gambaran umum mengenai system dan

entitas eksternal yang berinteraksi dengan system serta arah informasi
yang masuk dan keluar antara entitas dengan system. Pada DFD level 0
ini terdapat entitas yang terlibat dengan sistem yaitu Login, Beranda,
Daftar Guru, Data, File Siswa, File Guru, dan Logout.
login 1
cek
login verifikasi database login
admin
verifikasi
+
pendaftaran guru
2
admin view file siswa
cek
view file guru database
verifikasi elearning admin
pemilihan mapel guru elearning
hapus file
hapus siswa
hapus guru +
Gambar 3.2 DFD level 0 ( Admin )

3.2.3.3 DFD Level 0 ( User )

Pada proses ini user hanya dapat melihat dan melakukan Login,
Beranda, Upload, Download dan Logout.
login 1 cek
ve rifikasi da ta base login
verifika si log in
siswa

uploa d
2
d ownloa d
Siswa cek
view_download databa se
elea rning e lea rn ing siswa
dafta r
verifika si
h apus file
+

lo gin 3
cek
d ata base login
login ve rifikasi g uru

+
uploa d_file 4
G uru d ownloa d_file
cek
e lea rning d ata base
view_file ve rifikasi elearning g uru

hap us_file
+
 lo gin 1 ce k

ve rif ikasi d a ta ba se lo g in
verifika si lo g in
siswa

u p lo a d
2
d o wnlo a d
Siswa ce k
view_ d o wn lo a d da ta b a se
elea rn in g e le a rnin g siswa
d a fta r ve rifika si

h a pu s file
+

lo g in 3
ce k
da ta b a se lo g in
lo gin ve rifika si g u ru

+
u p lo a d _file
4
Gu ru d own lo a d_ file
cek
e le a rn in g d a ta b ase
vie w_ file ve rifika si e le a rn in g g u ru

ha p u s_ file
+

Gambar 3.3 DFD level 0 (user)

3.2.3.4 DFD Level 1 Login admin

Pada tahapan ini, aliran proses akan dipisahkan lagi menjadi lebih
detail sehingga akan mendapatkan aliran proses yang akan
mencerminkan setiap sub-bagian proses dengan lebih terperinci.
Pada level ini terdapat dua proses login dan gagal login apabila
admin dapat login secara otomatis dapat mengakses penuh terhadap isi
E-learning. Dan apabila admin gagal login secara otomatis kembali ke
halaman utama.

1
login cek
login database login
verifikasi
admin : 1
verifikasi

admin

kembali ke awal database login

2 admin : 2
verifikasi
gagal login

Gambar 3.4 DFD level 1 (login admin)

 3.2.3.5 DFD Level 1 Fungsi Admin

Pada tahap ini akan menjelaskan aliran pada tahap saat setelah
melewati tahap login. Isi admin tersebut dapat menggunakan berbagai
fungsi sebagai admin pada e-learning, yaitu pendaftaran guru,
pemilihan mapel guru, view file, hapus file, hapus user (guru dan
siswa). Dan melakukan cek verifikasi pada database e-learning.

pendaftaran guru

pemilihan mapel guru 1

cek
view file guru
verifikasi database elearning admin
view file siswa

admin hapus file elearning

hapus siswa

hapus guru

Gambar 3.5 DFD level 1 (fungsi admin)

3.2.3.6 DFD Level 1 Login user guru

Pada tahapan ini, aliran proses akan dipisahkan lagi menjadi

lebih detail pada setiap user sehingga akan mendapatkan aliran
proses yang akan mencerminkan setiap sub-bagian proses dengan
lebih terperinci.
 Pada level ini terdapat dua proses login dan gagal login apabila
user guru dapat login secara otomatis dapat mengakses konten yang
E-learning. Dan apabila user guru gagal login secara otomatis
kembali ke halaman utama.

1 cek

login verifikasi database login

login
guru : 1
verifikasi
Guru

database login
guru : 2
kembali ke awal verifikasi
2

gagal login

Gambar 3.6 DFD level 1 (login user guru)

3.2.3.7 DFD Level 1 Fungsi user guru

Pada tahap ini akan dipecah lagi kedalam subproses yang

menjelaskan pada tahap saat setelah melewati tahap login. User guru
tersebut dapat menggunakan berbagai fungsi pada e-learning, yaitu
upload file, download file, view file, hapus file. Dan melakukan cek
verifikasi pada database e-learning user guru.

upload_file
1

download_file cek database

Guru view_file elearning elearning guru
verifikasi

hapus_file

Gambar 3.7 DFD level 1 (fungsi user guru)

 3.2.3.8 DFD Level 1 Login user siswa

Pada tahapan ini, aliran proses akan dipisahkan lagi menjadi

lebih detail pada setiap user sehingga akan mendapatkan aliran
proses yang akan mencerminkan setiap sub-bagian proses dengan
lebih terperinci.
Pada level ini terdapat dua proses login dan gagal login apabila
user siswa dapat login secara otomatis dapat mengakses konten yang
E-learning. Dan apabila user siswa gagal login secara otomatis
kembali ke halaman utama.

1 cek
login database login
verifikasi siswa : 1
verifikasi login
Siswa

kembali ke awal database login

2 siswa : 2
verifikasi
gagal login

Gambar 3.8 DFD level 1 (login user siswa)

3.2.3.9 DFD Level 1 Fungsi user siswa

Pada tahap ini akan dipecah lagi kedalam sub-proses yang

menjelaskan pada tahap saat setelah melewati tahap login. User siswa
tersebut dapat menggunakan berbagai fungsi pada e-learning, yaitu
download file, upload file, view file, hapus file dan mendaftarkan diri
sebagai user siswa. Dan melakukan cek verifikasi pada database e-
learning user siswa.
 upload
1
cek
download database elearning siswa
view_download
Siswa elearning verifikasi
hapus file

daftar

Gambar 3.9 DFD level 1 (fungsi user siswa)

3.2.4 Perancangan Tabel Database

Dalam hal ini menjelaskan tabel database untuk E-leraning sekolah

ini menggunakan CDM dan PDM. DFD digunakan sebagai alat
perancangan sistem yang berorientasi pada alur data dengan konsep
dekomposisi yang dapat digunakan untuk penggambaran analisa maupun
rancangan sistem.

3.2.4.1 Conceptual Data Model

Conceptual data model (CDM) pada sistem ini

merepresentasikan rancangan struktur logis database. Tabel pada
database dapat dideskripsikan menjadi bagian yang mempunyai
relasi. Admin masing-masing memiliki satu relasi dengan upload,
download, hapus dan delete data, Sedangkan untuk user memiliki
dua relasi masing-masing untuk mengupload dan mendownload
data di E-learning.
 siswa file siswa
no_induk <pi> Variable characters (20) <M> id_fs <pi> Variable characters (100) <M>
nama_siswa Variable characters (20) <M> menambahkan nama_fs Variable characters (100) <M>
email Variable characters (30) <M> mapel Variable characters (100) <M>
username Variable characters (10) <M> ukuran Variable characters (100) <M>
password Variable characters (10) <M> url Variable characters (100) <M>
no_induk <pi> tgl_upload Variable characters (100) <M>
keterangan Variable characters (100) <M>
id_fs <pi>

mengambil
mengambil

file guru mata pelajaran

guru
id_fg <pi> <Undefined> <M> id_g <pi> Integer <M> id_pel <pi> Integer <M>
nama_fg <Undefined> <M> mengampuh nama_pel Variable characters (20)
nama_guru Variable characters (20) <M>
mapel Variable characters (100) <M> nama_pel Variable characters (20) <M> nip Variable characters (11)
ukuran Variable characters (100) <M> menambahkan nip Variable characters (11) <M> id_pel <pi>
url Variable characters (100) <M> username Variable characters (10) <M>
tgl_upload Variable characters (100) <M> password Variable characters (10) <M>
keterangan Variable characters (100) <M>
id_g <pi>
id_fg <pi>

menambahkan_data

admin
username Variable characters (10)
password Variable characters (10)

Gambar 3.10 CDM E-learning SMA Hangtuah 2 Sawotratap Sidoarjo

3.2.4.2 Physical Data Model

Physical Data Model (PDM) merupakan penjabaran lebih lanjut

terhadap conceptual data model dan merupakan deskripsi terhadap
data yang lebih mengarah kepada database engine yang akan
dipakai. PDM merupakan hasil generate dari CDM yang sudah
valid.
 file siswa
siswa id_fs varchar(100) <pk>
no_induk varchar(20) <fk1>
no_induk varchar(20) <pk> FK_FILE_SIS_MENAMBAHK_SISWA
id_g integer <fk2>
nama_siswa varchar(20)
nama_fs varchar(100)
email varchar(30)
mapel varchar(100)
username varchar(10)
ukuran varchar(100)
password varchar(10)
url varchar(100)
tgl_upload varchar(100)
keterangan varchar(100)
FK_FILE_GUR_MENGAMBIL_SISWA

FK_FILE_SIS_MENGAMBIL_GURU

file guru
id_fg <Undefined> <pk> guru mata pelajaran
no_induk varchar(20) <fk1> FK_MATA_PEL_MENGAMPUH_GURU
id_g integer <pk> id_pel integer <pk>
id_g integer <fk2>
FK_FILE_GUR_MENAMBAHK_GURU id_pel integer <fk1> id_g integer <fk>
nama_fg <Undefined> FK_GURU_MENGAMPUH_MATA_PEL
nama_guru varchar(20) nama_pel varchar(20)
mapel varchar(100)
nama_pel varchar(20) nip varchar(11)
ukuran varchar(100)
nip varchar(11)
url varchar(100)
username varchar(10)
tgl_upload varchar(100)
password varchar(10)
keterangan varchar(100)

FK_GURU_MENAMBAHK_ADMIN

admin
username varchar(10)
password varchar(10)

Gambar 3.11 PDM E-learning SMA Hangtuah 2 Sawotratap Sidoarjo

3.3 Jadwal Kegiatan Penelitian

Dalam kegiatan PKL ini ada beberapa kegiatan yang dilakukan,

diantaranya:

No. Uraian Kegiatan Oktober Novembar Desember Januari

1 Melakukan Survey
2 Persiapan
3 Pengumpulan Data
4 Penginstallan
5 Desain
6 Coding
7 Testing
8 Pengerjaan Laporan

Tabel 3.1 Jadwal kegiatan

Metode yang digunakan dalam menyelesaikan kerja praktek SMA

Hangtuah 2 Sawotratap Sidoarjo adalah:
a. Observasi : Dengan melakukan pengamatan / survei secara langsung ke
pihak Sekolah SMA Hangtuah 2 Sawotratap Sidoarjo, tujuan observasi
dilakukan agar mendapatkan data-data dan informasi yang lebih lengkap
dan akurat.
b. Wawancara : yaitu dengan melakukan tanya jawab (wawancara) dengan
pihak sekolah serta staf dan karyawan di Sekolah SMA Hangtuah 2
Sawotratap Sidoarjo, mengenai tugas yang akan diselesaikan.
c. Studi Pustaka yaitu dengan cara membaca buku–buku dan membuka situs-
situs untuk mempelajari hal-hal yang berhubungan dengan pemecahan
masalah.

3.4 Diagram Alur Praktek Kerja Lapangan

 Dalam Praktek Kerja Lapangan terdapat alur proses pengerjaan
seperti ditampilkan pada gambar 3.1. sehingga dapat menghasilkan sesuai
dengan analisa dan kebutuhan.

Start

Pengarahan
Guru

Pengambilan
Data

Pengumpulan Revisi
Data DFD

Desaign User Pembuatan

Benar ?
Interface DFD

Pembuatan
Database
(CDM, PDM)

Revisi Database
Revisi Laporan Benar ? T
(CDM, PDM)

T
Y

Mengumpulkan Pembuatan Pembuatan

End Y Benar ?
Laporan Laporan Website

Gambar 3.12 Diagram Alur Praktek Kerja Lapangan

3.5 Perancangan Tampilan E-Learning

 Perancangan tampilan bertujuan untuk memudahkan programmer
dalam membuat aplikasi. Rancangan ini adalah konsep awal tampilan yang
di dalamnya terdapat menu, konten, dan lainnya. Setelah pembuatan
rancangan, programmer akan membuat tampilan / antarmuka aplikasi
sesuai dengan rancangan yang telah dibuat.

3.5.1 Tampilan Login Pada Beranda

Merupakan halaman sistem yang berisi form login. Di

dalam form login, terdapat form input username, password dan
pilihan, di dalam form pilihan terdapat beberapa pilihan yaitu
Admin, Siswa, dan Guru.

Username :
Password :
Pilihan : Admin

Login Daftar

Gambar 3.13 gambar login pada menu Beranda

3.5.2 Tampilan pada Halaman Pendaftaran

Merupakan halaman yang digunakan siswa dalam hal

DAFTARKAN ID ANDA
pendaftaran. Pendaftaran yang dilakukan pengguna untuk
Nama :
mengunduh data pada elearning Terlebih dahulu siswa akan

No Induk mengisikan
: beberapa inputan yang diperlukan untuk proses
pendaftaran.
E – Mail :

Username :

Password :

BERANDA
 HEADER

Masuk

Gambar 3.14 Rancangan Menu Pendaftaran Siswa - siswi

3.5.3 Tampilan Halaman Login

Merupakan halaman yang digunakan untuk menangani

proses website. Pada saat penginputan data website user yang
terdaftar bisa langsung masuk ke beranda dengan disertai nama
user dan password, jika user tidak mendaftar atau user tidak
mengisiskan salah satu dari form dan apabila datanya tidak
lengkap, maka muncul tulisan “maaf login gagal”.
Username :
Password :
Pilihan :
Admin

Login Daftar

Gambar 3.15 Form Login pada tampilan beranda

3.5.4 Tampilan halaman E-Learning (beranda user)

Merupakan halaman website yang di dalamnya terdapat

beberapa menu antara lain beranda, upload, dan download.
Tampilan halaman ini ditujukan kepada guru maupun siswa –
siswi.

DOWNLOA
BERANDA UPLOAD LOGOUT
D
HEADER
FOOTER

Gambar 3.16 Tampilan beranda user

3.5.5 Tampilan Halaman E-Learning ( Upload )

Merupakan halaman E-Learning yang berisikan unggah

data file dari guru kepada siswa – siswi untuk dijadikan bahan
ulangan atau bisa juga memuat materi masing - masing mata
pelajaran. Dan sebaliknya siswa – siswi juga bisa upload tugas –
tugas yang telah diberikan oleh guru.
 HEADER
UPLOAD FILE

File :
Choose File
Mata Pelajaran :
Bahasa Indonesia
Keteranga :

VIEW FILE UPLOAD

Upload

Bahasa Indonesia Submit

Gambar 3.17 Tampilan upload user ( siswa ) pada halaman E-Learning

HEADER
UPLOAD FILE

File : Choose file

Guru Matapelajaran : Biologi

Keterangan :

VIEW FILE UPLOAD

Bahasa Indonesia

Submit

Gambar 3.18 Tampilan upload user ( Guru ) pada halaman E-Learning

 3.5.6 Tampilan Halaman E-Learning ( download )

Merupakan halaman E-Learning yang berisikan download

data file dari guru kepada siswa – siswi untuk mengambil tugas
dari setiap pelajan, Dan sebaliknya siswa – siswi juga bisa
download materi - materi yang telah diberikan oleh guru.

HEADER

PILIH MATA PELAJARAN :

Bahasa Indonesia Submit

HEADER

DOWNLOAD FILE
No Mata Tgl keterangan Download
Pelajaran Upload
1 Bahasa 1/1/2014 Tugas 1
Download
Indonesia

Gambar 3.19 Tampilan download user pada E-Learning

3.5.7 Tampilan Halaman E-Learning pada Admin

Pada halaman admin disini terdapat beberapa menu antara

lain beranda, daftar guru, data siswa, data guru, view file guru,
view file siswa, dan logout. Admin disini bertugas hanya untuk
mendaftarkan guru, dan bisa melihat apa saja yang di upload oleh
guru dan siswa – siswi.
Daftar Data Data file file logou
Beranda
Guru Siswa Guru guru siswa t
HEADER
FOOTER

Gambar 3.20 Tampilan beranda admin

 3.5.8 Tampilan Halaman Admin ( daftar guru )

Merupakan halaman yang digunakan Admin dalam hal

pendaftaran guru. Pendaftaran yang dilakukan pengguna untuk
mengunduh data pada elearning terlebih dahulu user akan
mengisikan beberapa inputan yang diperlukan untuk proses
pendaftaran.

HEADER

DAFTARKAN ID ANDA

Nama :

NIP :

Username :

Password :
Bahasa Indonesia
Mengampuh :
MASU
K
Gambar 3.21 Rancangan Menu Pendaftaran Guru

3.5.9 Tampilan Halaman Data User

Tampilan data user disini merupakan untuk menampilkan

data dari guru dan siswa – siswi, di halaman ini menampilkan data
diri siswa antara lain nama, no induk, e-mail, username, password,
dan hapus. Sedangkan data guru dari guru diantaranya nama, nip,
mengampuh, username, password, dan hapus.

HEADER
NamaNo IndukEmailUsernamePasswordHapus

Gambar 3.22 Tampilan Halaman data user

 HEADER

Nama NipMengampuhUsernamePasswordHapus

Gambar 3.23 Tampilan Halaman data user

3.5.10 Tampilan Halaman View File User

Tampilan untuk melihat file dari user yang telah di upload user.
Antara lain mata pelajaran, tanggal upload, keterangan, dan
hapus.

HEADER

Mata Pelajaran Tanggal Upload Keterngan Hapus

Gambar 4.12 Tampilan halaman view file user (siswa / guru) pada halaman admin

HEADER
Mata PelajaranTanggal UploadKeternganHapus
 BAB IV

HASIL DAN PEMBAHASAN

Hasil dan pembahasan merupakan tahap pengembangan rancangan

menjadi kode program lalu melakukan uji coba terhadap E-Learnig yang telah
dibuat. Pada awal bagian ini di jabarkan spesifikasi perangkat keras dan lunak
pada mana program diimplementasikan.

4.1 Spesifikasi Perangkat Keras Dan Lunak

Dalam menerapkan rancangan yang telah dibuat, ada beberapa hal

yang harus di butuhkan. Perangkat keras dan perangkat lunak merupakan
dua hal yang selalu di butuhkan dalam mengimplementasikan rancangan
yang telah ada.

4.1.1 Spesifikasi Perangkat Keras

Dalam menerapkan dari rancangan yang telah di jelaskan

sebelumnya berapa perangkat untuk menyajikan aplikasi ini.
Adapun alat – alat yang di butuhkan adalah :

1. Aplikasi XAMPP
XAMPP sebuah software web server apache yang
didalamnya sudah tersedia database server mysql dan support
php programming.
2. Spesifikasi PC yang digunakan antara lain :
 Prosesor : Intel Inside Core i5
 Memory : 4 GB
 System Type : 64 – bit Operating System

4.1.2 Spesifikasi perangkat Lunak

Dalam menerapkan rancangan yang telah dibuat,

dibutuhkan beberapa software untuk membuat aplikasi yaitu :
  PHP adalah bahasa pemrograman script yang paling banyak
dipakai saat ini php banyak dipakai untuk memrogram situs
website dinamis, walaupun tidak tertutup kemungkinan digunakan
untuk pemakaian lain.
 Sistem Operasi
Untuk penggunaan system operasi, digunakan Windows 7 64 Bit.
 Untuk memudahkan dalam pengembangan aplikasi maka
digunakan Microsoft SQL Server 2008 sebagai databasenya.

4.2 Implementasi Antar Muka

Ada 2 macam Implementasi pada aplikasi kali ini, yaitu: Antar muka
sub-sistem admin dan Antar muka sub-sistem User. Secara umum tampilan
antar muka antara admin dan user tidak jauh berbeda. Namun yang
membedakan hanyalah pada hak aksesnya. Admin memiliki kontrol kendali
terhadap pendaftaran guru dan memiliki hak akses untuk menghapus identitas
dari user. Sedangkan untuk pengguna atau user, beberapa fitur didalam
aplikasi E-Learning antara lain beranda, upload, download, dan logout.

4.2.1 Antar muka Sub – Sistem Admin

Sebelumnya untuk masuk menu pada halaman e-learning,

admin, siswa, dan guru terlebih dahulu harus login. Pada gambar
4.1 dibawah ini akan dijelaskan antar muka halaman login.

Gambar 4.1 Tampilan Login

 Gambar 4.2 Tampilan utama aplikasi E-Learning

Form ini merupakan tampilan awal dalam aplikasi E-Learning

yang disitu berisikan konten – konten untuk login, dan daftar. Sedangkan
menu daftar disitu diperuntukkan sebagai pendaftar siswa – siswi, tetapi
daftar yang digunakan untuk guru merupakan hak akses dari Admin. Untuk
mengetahui halaman utama admin pada aplikasi E-Learning, dapat dilihat
pada gambar 4.3 dan gambar 4.4 dengan login dengan user name : admin
, password : admin dan pilihan user memilih admin.
 Gambar 4.3 Tampilan login sebagai admin

Gambar 4.4 Tampilan awal pada halaman Admin

Setelah masuk pada halaman admin, admin disini mempunyai hak

ases untuk melakukan Pendaftaran guru yang dapat dilihat pada gambar
4.5 , admin mendaftarkan guru dengan nama : Ir. Nie Ketut Sari , Nip :
1134010032 , Username : 1134010032 , Password : 12345 dan
mengampuh mata pelajaran matematika .
 Gambar 4.5 Tampilan form pendaftaran guru pada admin

Melihat data siswa yang sudah terdaftar dalam E-learning dapat

dilihat pada gambar 4.6 ,Didalam data siswa ini sudah terdaftar
sebanyak 11 siswa dan siswi.
 Gambar 4.6 Tampilan daftar siswa yang telah mendaftar

Melihat data guru yang terdafar dalam E-learning dapat dilihat

pada gambar 4.7, Didalam data guru ini sudah terdaftar sebanyak 13
guru.

Gambar 4.7 Tampilan daftar guru yang telah mendaftar

 Melihat file upload dari guru dapat dilihat pada gambar 4.8 dan
gambar 4.9. Disini admin menampilkan file yang diupload oleh siswa
dalam mata pelajaran Bahasa Indonesia. Dan file yang sudah diupload
dalam mata pelajaran Bahasa Indonesia adalah 2 file yakni materi 1
dan tugas 1.

Gambar 4.8 View file guru pada halaman Admin

Gambar 4.9 View file guru pada halaman Admin setelah di Submit
 Dan melihat file upload dari siswa dapat dilihat pada gambar 4.10
dan gambar 4.11. Disini juga admin menampilkan file yang diupload oleh
siswa dalam mata pelajaran Bahasa Indonesia. Dan daftar file yang sudah
diupload dalam mata pelajaran Bahasa Indonesia adalah 2 file yakni
tugas1 dan tugas 1.

Gambar 4.10 View file siswa pada halaman Admin

Gambar 4.11 View file siswa pada halaman Admin setelah di

Submit
4.2.2 Antar muka Sub – Sistem Pengguna ( guru dan siswa )

Sebelumnya masuk user atau pengguna harus mengisi form

pendaftaran sebagai persyaratan agar dapat masuk pada halaman
selanjutnya. Jika pengguna tidak login maka tidak akan bisa
mengakses aplikasi E-Learning. Form daftar untuk pengguna dapat
dilihat pada gambar 4.12 dibawah ini. Disini guru yang ingin login
adalah guru denga nama : Ir. Nie Ketut Sari yang didaftarkan oleh
admin. Dengan Username : 1134010032 , Password : 12345 dan
dengan pilihan guru.

Gambar 4.12 Tampilan form login kedalam e-learning sebagai guru

 Gambar 4.13 Tampilan masuk pada beranda guru setelah login

Setelah masuk pada halaman guru dapat dilhat pada gambar

4.13. Guru disini mempunyai hak ases dapat Upload File yang
dapat dilihat pada gambar 4.14.

Gambar 4.14 Tampilan form pada upload file tugas atau materi guru yang
berhasil diupload
 Diatas adalah tampilan bu ketut ingin mengupload tugas
matematika dengan keterangan tugas dikumpulkan hari jum’at , dan
tanggal 7 maret 2014. Sesudah melakukan mengupload file, bu
ketut keluar dari E-leraning dengan mengklik logout. Sekarang kita
daftar terlebih dahulu sebagai siswa, dengan mengklik form daftar
yang tersedia di E-learning yang dapat dilihat pada gambar 4.15.

Gambar 4.15 Pilih Daftar untuk mendaftarkan user untuk siswa pada e-learning

Sesudah mengeklik daftar, kita masuk dalam tampilan form

daftar diri untu siswa, disini siswa yang daftar dengan nama :
Cristian Sugiono ,No Induk: 7738 ,E-mail :
Cristian_caem@gmail.com , Username : 7738 dan password :
12345 yang dapat dilihat pada gambar 4.16.

Gambar 4.16 Tampilan form untuk mendaftarkan user siswa

 Ketika Cristian sudah melakukan daftar, sekarang Cristian bisa
melakukan login dengan username dan password yang dibuat yang dapat
dilihat pada gambar 4.17 dan gambar 4.18 setelah melakukan login
sebagai user siswa masuk dalam beranda siswa.

Gambar 4.17 Tampilan login dengan user siswa memilih pilihan pada siswa

Gambar 4.18 Tampilan Beranda user siswa

Gambar 4.19 Tampilan konten download pada user siswa memilih mata
pelajaran

Gambar 4.20 Tampilan setelah memilih mata pelajaran

 Gambar 4.21 Tampilan setelah klik pada tombol download dan berhasil
didownload

Gambar 4.22 Tampilan hasil download file tugas

Diatas Cristian ingin mendownload tugas matematika yang telah

diupload oleh bu Ketut, dengan cara menggeklik tombol download dan
memilih mata pelajaran yang ingin kita download filenya pada gambar
4.19, gambar 4.20 adalah tampilan untuk kita mendownload file yang telah
diupload oleh guru, sedangkan gambar 4.21 dan gambar 4.22 adalah
hasil download file tugas matematika.
Setelah melaukan download, critian ingin melakukan upload
jawaban tugas matematika yang telah dikerjakan pada gambar 4.23 dan
gambar 4.24 dibawah ini dengan menggeklik tombol upload caranya
hampir sama dengan file upload guru.
Gambar 4.23 Tampilan form pada upload file jawaban tugas siswa ke guru
berhasil diupload

Gambar 4.24 Melihat hasil yang telah berhasil diupload oleh siswa
 Gambar 4.25 Tampilan guru memilih mata pelajaran yang ingin
didownload filenya

Gambar 4.26 Tampilan guru mengklik download file jawaban tugas yang
telah diberikan kepada siswa

Gambar 4.27 Tampilan setelah klik pada tombol download dan berhasil
didownload
 BAB V

KESIMPULAN DAN SARAN

5.1 Kesimpulan

Dari hasil observasi dan data-data yang telah diuraikan, dapat ditarik
kesimpulan mengenai beberapa hal dalam penulisan laporan akhir praktek kerja
lapangan, yaitu:
E-learning ini akan membantu pihak sekolah dalam membantu proses
belajar mengajar disekolah. Data admin, data pendaftaran dan data elearning serta
beberapa laporan yang berkaitan kini dapat disajikan dalam bentuk data yang telah
terkomputerisasi.
Pengguna dapat dengan mudah untuk mengetahui materi yang diperlukan
dalam pembelajaran dan tugas pada setiap mata pelajaran pada sekolah SMA
Hangtuah 2 Sawotratap Sidoarjo.

5.2 Saran

Saran dari penulis untuk pengembangan selanjutnya adalah :

1. E-learning ini dapat dikembangkan lagi. Beberapa fitur baru bisa
ditambahkan pada E-learning ini. Sebagai contoh fitur lupa password yang
berguna untuk menunjang keamanan E-learning.
2. E-learning ini dapat menjadi media pengembangan teknologi
pembelajaran .
3. Dengan adanya E-learning, siswa – siswi dapat meningkatkan sarana
belajar yang tidak terbatas ruang dan waktu.
4. Sistem E-learning dapat diterapkan untuk seluruh kelas di SMA
HANGTUAH 2 SIDOARJO
 DAFTAR PUSTAKA

Mira Iqbal Suryani. 2010 . Sejarah Dan Perkembangan Internet .

http://whitewishes.wordpress.com/2010/11/30/pengertian-sejarah-dan-
perkembangan-internet/ . Diakses Pada Tanggal 2 November 2013.

Zree Wahyounee . 2010 . Aplikasi Internet Dalam Pendidikan . http://younee-

unie-tp.blogspot.com/p/materi-kuliah.html . Diakses Pada Tanggal 2 November
2013.

BPPNFI REGIONAL 1 . 2007 . Penerapan E-learning dalam pembelajaran .

http://www.bppaudnireg1.com/buletin/read.php?id=23&dir=1&idStatus=4 .
Diakses Pada Tanggal 2 November 2013.

Iwan Dilianto, S.Psi . 2008 . Sejarah SMA Hang Tuah 2 Sidoarjo .

http://smahangtuah2.org/about-us/sejarah.html . Diakses Pada Tanggal 8
November 2013.

Iwan Dilianto, S.Psi . 2008 . Visi dan Misi SMA Hang Tuah 2 Sidoarjo .
http://smahangtuah2.org/about-us/visimisi.html . Diakses Pada Tanggal 8
November 2013.

Iwan Dilianto, S.Psi . 2008 . Sambutan Kepala Sekolah SMA Hang Tuah 2
Sidoarjo . http://smahangtuah2.org/about-us/sambutan.html . Diakses Pada
Tanggal 8 November 2013.

Iwan Dilianto, S.Psi . 2008 . Fasilitas SMA Hang Tuah 2 Sidoarjo .

http://smahangtuah2.org/about-us/fasilitas.html . Diakses Pada Tanggal 8
November 2013.
Dr.Ir.Etin Indrayani , MT . 2007 . E-learning : konsep dan strategi pembelajaran
di era digital (implementasi pada pendidikan tinggi) .
http://indrayani.staff.ipdn.ac.id/?p=56 . Diakses Pada Tanggal 9 November 2013.
Saifulloh Rifa’I . 2013. Pengertian dan sejarah MYSQL.
http://upyes.wordpress.com/2013/02/06/pengertian-dan-sejarah-mysql/ . Diakses
Pada Tanggal 2 Desember 2013.

Fahrizarwan . 2010 . Pengertian APACHE .

http://duniakamu.wordpress.com/2010/02/22/pengertian-apache/. Diakses Pada
Tanggal 2 Desember 2013.

Indra . 2012 . Pengenalan Macromedia Dreamweaver .

http://indrawaey.blogspot.com/2012/05/v-behaviorurldefaultvmlo.html. Diakses
Pada Tanggal 2 Desember 2013.

Alit . 2009 . PHP . http://koplarpudak.blogspot.com/ . Diakses Pada Tanggal 2

Desember 2013.

Boss . 2013 . Xampp . http://blog.bosscript.com/pengertian-xampp-adalah.html .

Diakses Pada Tanggal 2 Desember 2013.
1