Dokumen ini membahas pengembangan sistem e-learning berbasis web di SMK Negeri 1 Cikalongkulon untuk mengatasi keterbatasan waktu dan sarana komunikasi antara siswa dan guru. Sistem ini bertujuan meningkatkan daya serap siswa terhadap pelajaran dengan memfasilitasi akses materi pelajaran secara online. Kesimpulan menunjukkan bahwa sistem memberikan kemudahan dan meningkatkan interaksi siswa, namun masih memerlukan pengujian dan penyempurnaan lebih lanjut.

1. SISTEM E-LEARNING SMK NEGERI 1
CIKALONGKULON
Latar belakang
Batasan masalah
Referensi
Desain sistem
Implementasi
Kesimpulan & Saran
Teknik informatika 2009

2. Latar belakang
Yang menjadi latar belakang dibuatnya sistem ini adalah:
 Terbatasnya tenaga pengajar
 Terbatasnya waktu
 Terbatasnya sarana & prasarana
Akibat yang ditimbulkan:
1. Waktu tatap muka terbatas hanya di dalam kelas saja
2. Kualitas dan kuantitas komunikasi antara guru dengan siswa kurang baik
3. Daya serap siswa terhadap pelajaran rendah
4. Kualitas pendidikan di sekolah kurang baik
Sasaran dan tujuan sekolah:
 Menciptakan aplikasi yang dapat memfasilitasi komunikasi antara guru dan siswa agar daya serap
siswa terhadap pelajaran lebih baik.
 Memotivasi siswa agar lebih mengenal teknologi komputer dan internet
Teknik informatika 2009

3. Batasan masalah
1. Identifikasi masalah
Masalah utama yang berhasil teridentifikasi:
Belum ada aplikasi (perangkat lunak) berbasis Web yang dapat menghadirkan atau
mengakomodir sistem e-Learning, seperti yang telah pihak sekolah rencanakan.
2. Batasan masalah
Merancang dan membangun aplikasi utama sistem e-Learning model Web Based Training
(WBT) dengan Asynchronous System, artinya aplikasi yang dibuat adalah berbasis web dan tidak
bergantung pada waktu dimana seluruh pemakai bisa mengakses sistem disesuaikan dengan
waktunya masing-masing.
Teknik informatika 2009

4. Referensi
Dalam pengembangan sistem penulis menggunakan beberapa referensi seperti terlihat di
bawah ini:
• Teknologi pembangun Web (Gregorius S. Budhi, Djoni H. Setiabudi,
dan Budi Raharjo, dalam jurnalnya yang berjudul “Aplikasi Web Grabber
Untuk Mengambil Halaman Web Sesuai Dengan Keyword yang
Diinputkan) djonihs@petra.ac.id
Tiga teknologi utama pembangun web:
1. HTML
2. Link
3. URL
Teknik informatika 2009

5. • Definisi E-Learnig dari LearnFrame.Com dalam Glossary of e-Learning Terms [Hartley, 2001]
e-Learning merupakan suatu jenis belajar mengajar yang memungkinkan media
tersampaikannya bahan ajar ke siswa dengan menggunakan media Internet, Intranet atau
jaringan komputer lain.
• Definisi menurut LearnFrame.Com dalam Glossary of e-Learning Terms [Glossary, 2001]
e-Learning adalah sistem pendidikan yang menggunakan aplikasi elektronik untuk mendukung
belajar mengajar dengan media Internet, jaringan komputer, maupun komputer standalone.
Teknik informatika 2009

6.  Matthew Comerchero dalam E-Learning Concepts and Techniques [Bloomsburg, 2006]
mendefinisikan:
E-learning adalah sarana pendidikan yang mencakup motivasi diri
sendiri, komunikasi, efisiensi, dan teknologi. Karena ada keterbatasan dalam interaksi
sosial, siswa harus menjaga diri mereka tetap termotivasi. E-learning efisien karena
mengeliminasi jarak dan arus pulang-pergi. Jarak dieliminasi karena isi dari e-learning didesain
dengan media yang dapat diakses dari terminal komputer yang memiliki peralatan yang sesuai
dan sarana teknologi lainnya yang dapat mengakses jaringan atau Internet.
Teknik informatika 2009

7. Dalam pembuatan aplikasi web ini penulis menggunakan beberapa tools/software
diantaranya:
1. Windows XP SP2 sebagai sistem operasi yang digunakan
2. Macromedia Dreamweaver 8 sebagai HTML editor
Alasan penggunaan Macromedia Dreamweaver 8:
 Macromedia Dreamweaver 8 merupakan sebuah HTML editor untuk mendisain secara visual
dan mengelola situs web beserta halaman-halamannya.
 Macromedia Dreamweaver 8 memiliki kemampuan bukan hanya sebagai Software desain
web saja tetapi menyunting kode serta pembuatan aplikasi web dengan menggunakan
berbagai bahasa pemrograman web base, seperti PHP, JSP, ASP dan ColdFusion.
 Ruang kerja, fasilitas dan kemampuan Macromedia Dreamweaver 8 mampu meningkatkan
produktifitas dan efektifitas dalam desain dan maintain sebuah web.
Teknik informatika 2009

8. 3. Apache2Triad adalah bundle sofware yang meniru lingkungan kerja Apache, PHP dan Database
server MySQL pada keadaan sebenarnya di internet. Apache2Triad merupkan bundle program
yang berisi PHP enggine, database server MySQL dan server Apache.
4. Database server yang digunakan adalah MySQL versi 5.1
Alasan penggunaan MySQL sebagai database:
 Memiliki kecepatan yang lebih baik bila dibandingkan dengan database lainnya ini
menurut para pengembang aplikasi, ini dapat dilihat secara lebih detail
http//www.mysql.com/benchmark.html.
 MySQL adalah simple database system dengan performa tinggi dan tidak kompleks untuk
setup dan administrator, dibanding dengan system yang lebih besar.
 MySQL gratis untuk semua pengguna.
Teknik informatika 2009

9. 5. Server yang digunakan adalah Apache
6. Image editor yang digunakan adalah Adobe Photoshop CS3
Adobe Photoshop secara umum dikenal sebagai alat untuk memanipulasi gambar bukan untuk
menciptakan gambar. Dengan Photoshop kita bisa membuat layout halaman web yang akan
kita bangun.
Teknik informatika 2009

10. Desain sistem
Beberapa analisa yang dilakukan penulis sebelum sistem dibangun:
 Analisa data meliputi data guru, siswa, mata pelajaran dan lain-lain
 Analisa prosedur adalah analisa yang dilakukan pada sistematika program atau Aplikasi yang
dibangun, seperti prosedur pengaturan hak akses, pencarian dan penampilan informasi
 Analisa kebutuhan meliputi analisa perangkat lunak dan keras untuk menjalankan aplikasi
yang dibangun
 Analisa pengguna dan spesifikasi pengguna, adalah analisa terhadap user yang akan
menggunakan aplikasi
Teknik informatika 2009

11. Perancangan sistem adalah suatu bentuk pemodelan untuk menghasilkan aplikasi yang sesuai
dengan kebutuhan user.
Beberapa pemodelan dalam desain web E-Learning SMK Negeri 1 Cikalong
1. Desain navigasi/menu
Teknik informatika 2009

12. Teknik informatika 2009

13. 2. Perancangan database
Database atau disebut saja data, merupakan bagian penting dari sebuah sistem informasi yang akan
menjadi isi dari sebuah informasi. Begitu juga pada aplikasi ini terdapat beragam data yang menjadi isi
dan mencerminkan informasi yang dapat dilihat dan diolah oleh user (pengunjung) website. Data-data
pada aplikasi ini terbentuk dari tabel-tabel data yang dapat terkoneksi dengan PHP, sehingga isi atau data
pada aplikasi ini bersifat dinamis.
2.1 Desain tabel
1. Tabel agenda
Tabel ini berisi data agenda sekolah atau rencana kegiatan yang akan dilakukan
oleh sekolah.
id sebagai kunci primer
Teknik informatika 2009

14. 2. Tabel berita
Tabel ini berisi tentang data-data berita yang dimasukan oleh user.
id sebagai kunci primer
3. Tabel guest book
id sebagai kunci primer
Teknik informatika 2009

15. 4. Tabel guru
Tabel ini berisi tentang data-data guru di SMK Negeri 1 Cikalongkulon
nip adalah kunci primer
5. Tabel jawab
Tabel ini berisi tentang data jawaban guru dari pertanyaan yang disampaikan oleh siswa/siswi.
Teknik informatika 2009

16. 7. Tabel kategori tutorial
Tabel ini berisi data-data kategori tutorial memiliki dua nama field yaitu idkategori dan
kategori
idkategori sebagai kunci primer
8. Tabel kelas
Tabel ini berisi data-data kelas yang ada di SMK Negeri 1 Cikalongkulon.
idkelas sebagai kunci primer
Teknik informatika 2009

17. 9. Tabel konsultasitanya
Tabel ini berisi tentang pertanyaan yang disampaikan siswa kepada guru, berisi
pertannyaan, identitas penanya (siswa) dan data materi pelajaran.
Teknik informatika 2009

18. 10. Tabel materi pelajaran
Tabel ini berisi tentang data-data materi pelajaran yang dikirim oleh guru, mulai dari data
pelajaran dan lokasi Download file materi pelajaran. Untuk lebih jelasnya dapat dilihat pada
tabel dibawah ini:
11. Tabel pelajaran
Tabel ini berisi tentang data pelajaran, kode, nama pelajaran dan NIP guru pengajar
pelajaran tersebut.
Teknik informatika 2009

19. 12. Tabel siswa
Tabel ini berisi tentang data identitas siswa SMK Negeri 1 Cikalongkulon.
13. Tabel tugas
Tabel ini berisi data-data tugas yang diberikan oleh guru untuk siswa.
Teknik informatika 2009

20. 14. Tabel tutorial
Tabel ini berisi data-data tutorial yang telah dimasukan oleh pengunjung, dan telah melalui
proses editing oleh administrator yang kemudian isinya akan ditampilkan pada halaman
tampil tutorial.
Teknik informatika 2009

21. 15. Tabel tutorvalid
Tabel ini berisi tentang data-data tutorial yang masuk dari pengunjung Data-data tersebut
belum dapat ditampilkan di halaman tampil tutorial sebelum melalui proses editing oleh
administrator.
16. Tabel user
Tabel ini berisi tentang data pengguna (administrator). Memiliki tiga buah field yaitu id, user
dan password
Teknik informatika 2009

22. 2.2 Relasi antar tabel
Tabel relasi merupakan tabel yang memiliki keterhubungan dengan tabel lain berikut adalah
tabel relasi dalam perancangan aplikasi e-Learning SMK Negeri 1 Cikalongkulon.
Teknik informatika 2009

23. 2.3 Perancangan Halaman (antarmuka) Pemakai
Halaman (antarmuka) pemakai merupakan media komunikasi antara pemakai dengan
sistem komputer. Hasil perancangan antarmuka pemakai akan memudahkan proses
implementasi nanti. Adapun antarmuka pemakai perangkat lunak yang akan dirancang
ditampilkan sebagai berikut pada bagian ini hanya akan ditampilkan sebagian saja:
Teknik informatika 2009

24. 1. Halaman utama (index)
Halaman utama ini adalah antarmuka pembuka aplikasi sekaligus menjadi antarmuka
standar yang akan selalu ada pada halaman selanjutnya. Halaman ini berisi link atau
penghubung ke sejumlah halaman tertentu.
Lihat tampilan jadi
Teknik informatika 2009

25. 2. Login administrator
Halaman ini halaman untuk admin melakukan login, halaman ini akan melakukan atau
pemeriksaan apakah admin yang bersangkutan berhak masuk ke halaman admin atau tidak.
Lihat tampilan jadi
Teknik informatika 2009

26. 3. Halama utama administrator
ini adalah halaman utama administrator, mempunyai rujukan ke beberapa link pada halaman-
halaman administrator
Lihat tampilan jadi
Teknik informatika 2009

27. 4. Halaman user manager
Halaman ini digunakan untuk merubah dan manghapus user dari database user.
Lihat tampilan jadi
Teknik informatika 2009

28. Implementasi
Implementasi program adalah tahap penerapan hasil perancangan yang prosesnya telah
dilakukan sebelumnya. Implementasi yang dilakukan diantaranya adalah menerapkan
perancangan antarmuka kedalam bentuk halaman-halaman web, perancangan struktur data
kedalam bentuk database, pembuatan kode program dan sebagainya.
1. Spesifikasi Perangkat Keras
Spesifikasi yang penulis gunakan pada saat pengembangan aplikasi ini dapat dilihat pada
tabel dibawah ini :
Teknik informatika 2009

29. 2. Antarmuka Halaman
Adapun beberapa tampilan halaman dari Web site e-Learning SMK Negeri Cikalongkulon
adalah sebagai berikut, yang ditampilkan di sisni hanya sebagian:
1. Halaman utama (index)
Antarmuka tampilan utama dari hasil perancangan diimplementasikan menjadi sebuah
halaman web dengan nama index.php
Lihat desain awal
Teknik informatika 2009

30. 2. Halaman login administrator
Halaman ini digunakan untuk admin melakukan login, halaman ini akan melakukan
pemeriksaan apakan admin yang bersangkutan berhak masuk ke halaman admin atau tidak.
Lihat desain awal
Teknik informatika 2009

31. 3. Halaman utama Administrator
Halaman ini adalah tampilan utama setelah administrator melakukan login, terdiri dari
beberapa menu utama yang merujuk kepada halaman-halaman lainnya
Lihat desain awal
Teknik informatika 2009

32. 3. Halaman User manager
Halaman ini digunakan oleh administrator untuk melihat daftar user
sekaligus bisa
melakukan penghapusan data user dan merubah data user yang terdaftar
pada
database.
Lihat desain awal
Teknik informatika 2009

33. Kesimpulan & Saran
1. Kesimpulan
Dari hasil pembahasan yang telah dijelaskan maka penulis mengambil kesimpulan:
 Sistem e-Learning SMK Negeri 1 Cikalongkulon berbasis web memberikan solusi yang tepat untuk
mengatasi keterbatasan waktu komunikasi antara siswa dan guru dalam melakukan proses belajar
mengajar di sana.
 Sistem e-Learning SMK Negeri 1 Cikalongkulon berbasis web memberikan kemudahan bagi siswa
yang tidak bisa masuk sekolah karena ada halangan seperti sakit dan lainnya, dalam
mendapatkan materi pelajaran dan tugas, sehingga siswa tidak akan tertinggal dalam hal
pelajaran dan pemahaman materi-materi pelajaran yang diberikan oleh guru, dengan syarat
siswa bersangkutan memiliki akses internet.
 Siswa menjadi lebih proaktif dalam menyerap materi-materi pelajaran yang diberikan oleh
guru, melalui aplikasi e-Learning SMK Negeri 1 Cikalongkulon siswa lebih berani mengemukakan
pendapat dan pertanyaan sehingga pemahaman siswa terhadap materi pelajaran menjadi lebih
baik.
Teknik informatika 2009

34. 2. Saran
Sistem e-Learning SMK Negeri 1 Cikalongkulon ini belum dikatakan sempurna, maka saran
penulis adalah:
 Selama proses membangun Sistem e-Learning SMK Negeri 1 Cikalongkulon berbasis web ini
belum diuji secara langsung dengan data dan kendali sebenarnya terutama dalam hal
memasukan data dan menampilkan informasi data. Sehingga dapat dikatakan sistem ini belum
benar-benar sempurna.
 Pada website e-Learning SMK Negeri 1 Cikalongkulon ini dapat di tambah fasilitas-fasilitas
lainnya seperti forum komunikasi antara guru dengan orang tua siswa, berita lowongan
kerja, penyerahan tugas secara online , absensi dan lainnya
Teknik informatika 2009