RANCANG BANGUN DAN IMPLEMENTASI WEBSITE BERBASIS ELEARNING PADA SMP N 2 PATI SEBAGAI MEDIA INFORMASI DAN PEMBELAJARAN
Naskah Publikasi
diajukan oleh Nourmalita 07.11.1717
kepada SEKOLAH TINGGI MANAJEMEN INFORMATIKA DAN KOMPUTER AMIKOM YOGYAKARTA 2011
DESIGN AND IMPLEMENTATION OF WEB BASED E-LEARNING IN SMP N 2 PATI AS INFORMATION AND LEARNING MEDIA
RANCANG BANGUN DAN IMPLEMENTASI WEBSITE BERBASIS E-LEARNING PADA SMP N 2 PATI SEBAGAI MEDIA INFORMASI DAN PEMBELAJARAN
NOURMALITA JURUSAN TEKNIK INFRMATIKA STMIK AMKOM YOGYAKARTA
ABSTRACT Development of science and computer-based information technology has now become the focus of society in general, especially in the field of technology and information systems using Internet-based media. Given thethe amount of benefits derived from use of the Internet , especially in education,then this is what makes the author to write a thesis with the title " Designand Implementation of Web Based E -LearningOn SMP Negeri 2 Pati For Media Information and Learning . " The technology used, among others, My SQL database, PHP as a programming language, CSS, Javascript and other technologies that make your website a dynamic and interactive. Existing features such as news about the school, photo gallery, profiles of teachers, guest book, e-learning, and several other features. The purpose of the development of this website is as a promotional tool SMP Negeri 2 Pati to provide information about SMP Negeri 2 Pati to the public and students' learning process that can be done online.
Keywords: website, e-learning, systems design, information systems, SMP Negeri 2 PATI, technology
1.
Pendahuluan Perkembangan teknologi informasi berbasis komputer saat ini telah menjadi pusat
perhatian masyarakat pada umumnya, khususnya di bidang teknologi dan sistem informasi menggunakan media berbasis internet. Tidak hanya di bidang komersial, dalam bidang pendidikanpun terjadi revolusi. Internet sendiri telah memberikan nilai penting tersendiri dalam bidang pendidikan yang pengadaannya cepat, metode lebih efektif dan persiapannya lebih singkat. Maka dari itu aplikasi yang saat ini sangat baik untuk dikembangkan di bidang internet adalah e-learning. E-learning adalah salah satu bentuk pendidikan yang menggabungkan motivasi, komunikasi, efisiensi, dan teknologi. E-learning membuat kegiatan belajar menjadi lebih efisien. Sistem pembelajaran di SMP Negeri 2 Pati masih dilakukan secara manual. Kegiatan pembelajaran hanya dilakukan di dalam kelas antara siswa dan guru pada jam sekolah. Seringkali proses pembelajaran seperti ini memiliki keterbatasan seperti jarak dan waktu. Dalam sistem pembelajaran yang dilakukan oleh SMP Negeri 2 Pati, siswa harus datang ke sekolah untuk mendapatkan pelajaran, sehingga siswa yang berhalangan datang ke sekolah akan tertinggal dalam mengikuti pelajaran di sekolah. Masalah lain yang muncul dalam sistem pembelajaran di SMP Negeri 2 Pati adalah pada saat siwa melakukan kegiatan belajar secara mandiri di luar sekolah, kadang ada materi yang kurang dimengerti oleh siswa, sehingga akan muncul beberapa pertanyaan yang ingin ditanyakan oleh siswa kepada guru. Sementara itu, untuk bisa bertanya kepada guru, siswa harus datang ke sekolah. Jika hal ini terjadi pada hari libur, siswa harus menunggu dalam jangka waktu yang cukup lama untuk bisa bertemu dengan guru dan mengajukan beberapa pertanyaan, hal ini sangat kurang efektif, karena bisa menghambat siswa dalam memperoleh ilmu pengetahuan. Dengan adanya e-learning para pelajar akan mendapat wawasan dan ilmu pengetahuan tidak hanya dengan cara datang ke sekolah, tetapi juga dapat mengakses internet dari atau dari tempat penyedia layanan internet. Aplikasi e-learning mencakup beberapa fitur yang menjadi standar dalam proses pembelajaran seperti distribusi materi pembelajaran, forum diskusi, ataupun pemberian tugas yang dapat dilakukan oleh guru dan siswa.
2.
Landasan Teori
2.1
Konsep Dasar Sistem Terdapat dua kelompok pendekatan di dalam mendefnisikan sistem, yaitu yang
menekankan pada prosedurnya dan yang menekankan pada komponen atau elemennya. Pendekatan system yang lebih menekankan pada prosedur mendefinisikan sistem sebagai berikut.
“Suatu system adalah suatu jaringan kerja dari prosedur-prosedur yang saling berhubungan, berkumpul bersama-sama untuk melakukan suatu kegiatan atau untuk menyelesaikan suatu sasaran yang tertentu”.1 Pendekatan system yang
merupakan jaringan kerja dari prosedur lebih
menekankan urut-urutan operasi di dalam sistem. Prosedur (procedure) didefinisikan oleh Richard F. Neuschel sebagai berikut ini. “Suatu prosedur adalah suatu urut-urutan operasi klerikal (tulis menulis), biasanya melibatkan beberapa orang di dalam satu atau lebih departemen, yang diterapkan untuk menjamin penenganan yang seragam dari transaksi-transaksi bisnis yang terjadi”.2 2.2
Konsep Dasar Informasi Informasi adalah data yang diolah menjadi bentuk yang berarti bagi penggunaan
yang bermanfaat dalam pengambilan keputusan saat ini atau mendukung sumber dari informasi. Sumber informasi adalah data. Data adalah kenyataan yang menggambarkan suatu kejadian-kejadian dan kesatuan nyata.3 Sistem informasi didefinisikan oleh Robert A. Leitch dan K. Roscoe Davis sebagai berikut: “Sistem informasi adalah suatu system di dalam suatu organisasi yang mempertemukan kebutuhan pengolahan transaksi harian, mendukung operasi, bersifat manajerial dan kegiatan strategi dari suatu organisasi dan menyediakan pihak luar tertentu dengan laporan-laporan yang diperlukan”.4 2.3
Konsep Dasar E-Learning E-Learning adalah pembeajaran yang pelaksanaannya didukung oleh jasa
elektronika seperti telepon, audio, videotape, transmisi satellite atau computer.5 2.3.1 Tipe E-Learning 1. Synchronous Training Synchronous berarti “pada waktu yang sama”. Jadi, synchronous training adalah tipe pelatihan, di mana proses pembelajaran terjadi pada saat yang
1
Jogiyanto. ANALISIS & DESAIN Sistem Informasi: Pendekatan Terstruktur Teori dan Praktek Aplikasi Bisnis, ANDI, Yogyakarta, 2005. Hal. 1. 2
Ibid. Ibid Hal. 8. Robert A. Leitch/K. Roscoe Davis, Accounting Information Systems, (New Jersey: Prentice-Hall, 1983), hal.6, dikutip oleh Jogiyanto, Analisis dan Desain Sistem Informasi, (Edisi ketiga; Yogyakarta: ANDI, 2005), hal. 11. 3 4
5
Soekartawi. Merancang dan Menyelenggarakan e-Learning, Ardana Media, Yogyakarta, 2007. Hal. 25.
sama ketika pengajar sedang mengajar dan murid sedang belajar. Hal tersebut memungkinkannya interaksi langsung antara guru dan murid, baik melalui internet maupun intranet.
2. Asynchronous Training Asynchronous berarti “tidak pada waktu yang bersamaan”. Jadi seseorang dapat mengambil pelatihan pada waktu yang berbeda dengan pengajar yang memberikan pelatihan. Pelatihan ini lebih popular di dunia elearning karena memberikan keuntungan bagi peserta pelatihan karena dapat mengakses pelatihan kapanpun dan dimanapun.
2.4
Konsep Dasar Basis Data Basisdata, menurut Stephens dan Plew (2000) adalah mekanisme yang digunakan
untuk menyimpan informasi atau data. Informasi adalah sesuatu yang kita gunakan sehari-hari untuk berbagai alasan. Dengan basisdata, pengguna dapat menyimpan data secara terorganisasi.6 2.5
Pemodelan Sistem
2.5.1 Flowchart (Fisik) Flowchart adalah suatu model logika yang digunakan untuk menggambarkan sistem secara fisik, menunjukkan arus dari suatu proses dalam program. 2.5.2 Contex Diagram Context diagram adalah diagram pertama di dalam kesatuan, dan yang ditampilkan dengan jumlah detil penjelasan yang seadanya disebut dengan context-level diagram. Context-level diagram dimaksudkan untuk mengidentifikasi batasan sistem berkenaan dengan hubungannya terhadap agen eksternal (source/sink) yang mungkin berinteraksi dengannya. 2.5.3 DFD (Data Flow Diagram) Data flow diagram adalah alat yang mengggambarkan aliran data melalui sistem dan kerja atau proses yang dilakukan oleh sistem itu. 2.6 2.6.1 6
Pemrograman Web Client Side Scripting
Janner Simarmata & Iman Paryudi. Basis Data, ANDI,Yogyakarta,2006. Hal. 1.
Client side scripting merupakan bahasa pemrograman internet
yang akan
dieksekusi oleh browser dalam format*.html.Biasanya client side yang digunakan untuk hal-hal yang membutuhkan interaksi user tetapi data yang ditampilkan tetap sama dengan menggunakan server side scripting. 2.6.2
HTML HTML (Hypertext Markup Language) merupakan salah satu format yang
digunakan dalam pembuatan dokumen dan aplikasi yang berjalan di halaman web. Walaupun sekarang telah banyak paket aplikasi yang dapat digunakan untuk membuat halaman web secara WYSIWYG (What You See Is What You Get) seperti Frontpage, Dreamweaver, Nestcape Composer, dan masih banyak lagi, namun tetap diperlukan mempelajari tag-tag HTML, karena mau tidak mau kita akan bekerja dalam mode text editor jika hendak menyisipkan script program dalam script HTML. HTTP (Hypertext Transfer Protocol) merupakan protokol yang digunakan untuk mentransfer data dari web server ke web browser. Protokol ini mentransfer dokumendokumen web yang ditulis atau berformat HTML (Hypertext Markup Language).HTML dikatakan Markup Language, karena HTML berfungsi untuk memformat file dokumen teks biasa untuk bisa ditampilkan pada web browser dengan bantuan tanda-tanda yang sudah ditentukan. Hal tersebut dapat dilakukan dengan menambahkan elemen (tag).7
2.6.3
Server Side Scripting Server side scripting merupakan dokumen-dokumen yang digunakan dalam
membangun suatu aplikasi internet yang dijalankan pada sisi server dan dikirimkan ke browser dalam bentuk HTML.
2.6.4
PHP PHP merupakan salah satu pemrograman berbasis web yang dijalankan pada
sisi server atau bahasa server-side scripting yang menyatu dengan HTML untuk membuat halaman web yang dinamis. Maksud dari server-side scripting, yaitu sintaks dan perintah-perintah yang diberikan akan sepenuhnya dijalankan di server, tetapi disertakan dokumen HTML.8
2.7 2.7.1 7
8
Software yang digunakan Perangkat Lunak Database MySQL
Bimo Sunarfrihantono. PHP dan MySQL Untuk Web, ANDI, Yogyakarta, 2002. Hal. 1.
Dwi Prasetyo D. Solusi Menjadi Webmaster Melalui Manajemen Web dengan php, Elex Media Komputindo, Jakarta, 2005
MySQL adalah multiuser database yang menggunakan bahasa Structured Query Language (SQL). MySQL dalam operasi client-server melibatkan server daemon MySQL di sisi server dan berbagai macam program serta library yang berjalan di sisi client.
2.7.2
Web Server Apache Web server adalah sebuah bentuk server yang khusus digunakan untuk
menyimpan halaman web site atau home page. 9 2.7.3
Adobe Ptoshop Adobe Photoshop merupakan Software pengolah image buatan Adobe yang
sangat handal dan mudah pengunaannya.
2.7.4
Macromedia Dreamweaver 8 MacromediaDreamweaver 8 adalah Software professional untuk desain dan
manajemen situs web dengan tingkat fleksibilitas yang tinggi. tingkat fleksibel dimaksud memungkinkan user dengan keahlian tingkat lanjut (advance) untuk membuat situs web dengan cara menuliskan kode HTML pada tool pemograman yang terintergrasi pada software ini atau memungkinkan user tingkat awal (beginner) membuat situs web dengan menggunakan lingkungan visual editing pada menu-menu yang sudah disediakan. 10 2.7.5
Web Browser Web Browser adalah sebuah software yang digunakan untuk menerjemahkan
bahasa hypertext untuk ditampilkan pada layar komputer client. Beberapa contohnya: internet explorer, mozilla firefox, opera, safari.
3.
Analisis
3.1
Tinjauan Umum
3.1.1 Profil SMP Negeri 2 Pati SMP Negeri 2 Pati adalah sekolah menengah pertama yang berdiri sejak tahun 1957 dengan kepala sekolah yang pertama adalah Sutji setjodiprodjo dan kepala sekolah saat ini adalah Sri Hartono. SMP Negeri 2 Pati beralamat di Jalan Ronggowarsito Gang VII Pati, Kabupaten Pati, Provinsi Jawa Tengah. Sekolah ini menerapkan visi yaitu “Unggul dalam prestasi, berakhlak terpuji, berjiwa mandiri"
9
Bunafit Nugroho. PHP dan MySQL dengan Editor Dreamweaver MX, ANDI, Yogyakarta, 2004. Hal. 6. Prihatna H. Kiat Praktis Menjadi Webmaster Profesional. Elex Komputindo, Jakarta, 2005
10
3.1.2 Visi dan Misi Visi “Unggul dalam prestasi, berakhlak terpuji, berjiwa mandiri" Misi 1.
Mewujudkan lulusan yang mampu berkompetisi di tingkat internasional
2.
Mewujudkan sekolah inovatif, kreatif, dinamis, dan berbudipekerti luhur
3.
Mewujudkan organisasi sekolah yang terus belajar sesuai perkembangan global
3.2
Analisis Analisis kelemahan sistem yang akan diterapkan dalam pengembangan sistem ini
menggunakan SWOT Analysis (Strengths, Weaknesses, Opportunities, Threeats). Penjelasan Sistem yang akan dibuat adalah sebagai berikut. 3.3
Perancangan Sistem Tahapan perancangan sistem adalah dengan tahapan mengidentifikasi kebutuhan
fungsional dalam mempersiapkan rancang bangun implementasi yang bertujuan untuk merancang dan mendesain sistem dalam memenuhi kebutuhan pemakai sistem. Perancangan sistem terdiri dari
perancangan proses, perancangan basis data, dan
perancangan antarmuka / interface. 3.4
Perancangan Proses Data Flow Diagram (DFD) adalah suatu model untuk menggambarkan asal data,
tujuan data serta proses apa saja yang terjadi pada suatu sistem. Dengan menggunakan DFD diharapkan dapat memudahkan user untuk
mengerti bentuk aplikasi yang
diterapkan. DFD e-Learning SMP Negeri 2 Pati ini meliputi :
1. Diagram Context berita,guru,mapel,upload materi, Polling, jawaban polling, soal, Jawaban soal, login,posting forum, komentar forum
Admin
Komentar, polling User
Berita, agenda, pengumuman, polling, komentar
berita,guru,mapel,downloa d materi, Polling, jawaban polling, soal, Jawaban soal, login E-Learning
Guru,upload materi, agenda, pengumuman, soal, jawaban soal,polling,komentar,posti ng forum, komentar forum
Guru
Username, password, data profil pribadi, polling, komentar,posting forum, komentar forum
Berita, agenda, pengumuman, materi, download materi, polling, komentar,forum
download materi, agenda, pengumuman, soal, jawaban soal, berita,polling,komentar ,forum
Siswa
Gambar 3.1 Diagram Context 2. DFD Level 1 Proses 1 berita
berita
Berita
1.1 Proses Berita
berita
1.2 Proses Komentar
komentar
Upload materi
1.7 Proses Upload Materi
Upload materi
Materi
Id berita materi Komentar
komentar
Soal
komentar
1.8 Proses Soal
Soal Polling SoalPolling
Soal Polling
1.3 Proses SoalPolling
JawabanPolling
Soal
Soal Soal Polling
Id Soal, no soal Id Soal, no soal Admin
Id Polling 1.4 Jawaban Proses Polling JawabanPollin g Jawaban
Soal
Jawaban Soal
1.9 Proses Jawaban Soal
Jawaban Polling
Jawaban Soal
JawabanSoal
Jawaban Soal
Polling Guru Guru
Hasil Guru
1.5 Proses Guru
Guru
1.6 Proses Mapel
Mapel
1.10 Proses Hasil
Hasil
Hasil Kd Mapel
NIP
Mapel
Mapel
Data Login
1.11 ProsesLogin
Data Login
Login
Data Login
Mapel
username
Komentar Forum
komentar
1.13 Proses Komentar Forum
komentar
Posting thread
komentar
1.12 Proses Posting Forum
Posting thread
Posting thread username Id thread
Gambar 3.2 DFD Level 1 Proses 1
PostingForum
3. DFD Level 1 Proses 2
berita
Berita
2.1 Proses Berita
Upload materi
berita
2.7 Proses Upload Materi
Materi
Materi
Id berita materi Komentar
komentar
2.2 Proses Komentar
komentar Soal
komentar
SoalPolling
Soal Polling
2.3 Proses SoalPolling
JawabanPolling
Guru
Soal
Id Soal, no soal Id Soal, no soal Guru
Jawaban Soal
2.9 Proses Jawaban Soal
Jawaban Polling
Hasil 2.5 Proses Guru
Guru
2.6 Proses Mapel
Mapel
Jawaban Soal
JawabanSoal
Jawaban Soal
Guru Guru
Soal
Soal Soal Polling
Id Polling 2.4 Jawaban Proses Polling JawabanPollin g Jawaban Polling
2.8 Proses Soal
2.10 Proses Hasil
Hasil
Hasil Kd Mapel
NIP
Mapel
Mapel
Data Login
2.11 ProsesLogin
Data Login
Login
Data Login
username Komentar Forum
komentar
komentar
1.13 Proses Komentar Forum
komentar
Posting thread
1.12 Proses Posting Forum
Id thread username
Gambar 3.3 DFD Level 1 Proes 3
Posting thread Posting thread
PostingForum
4. DFD Level 1 Proses 3
Berita
berita
3.1 Proses Berita
berita
3.2 Proses Komentar
komentar
3.7 Proses Download materi
materi
Materi
Materi
Id berita
Komentar
komentar
3.8 Proses Soal
Soal
komentar
SoalPolling
Soal Polling
3.3 Proses SoalPolling
Soal Polling
JawabanPolling
Soal
Id Soal, no soal Id Soal, no soal Siswa
Id Polling 3.4 Jawaban Proses Polling JawabanPollin g Jawaban
Soal
3.9 Proses Jawaban Soal
Jawaban Soal
Jawaban Soal
JawabanSoal
Jawaban Polling
Polling 3.10 Proses Hasil
Hasil Guru
Guru
3.5 Proses Guru
Guru
3.6 Proses Mapel
Mapel
Hasil
Hasil Kd Mapel
NIP
Mapel
Mapel
Data Login
Data Login
3.11 ProsesLogin
Login
Data Login
username
Komentar Forum
komentar
1.13 Proses Komentar Forum
komentar
1.12 Proses Posting Forum
Posting thread
Posting thread
komentar
PostingForum
Posting thread Id thread username
Gambar 3.4 DFD Level 1 Proses 3
5.
DFD Level 1 Proses 4 Komentar Forum
PostingForum
4.5 Lihat Forum
Jawaban polling
User
Jawaban polling berita komentar
soalpolling
komentar
4.2 Proses Komentar
4.1 Proses Berita
berita komentar
berita
soalpolling soalpolling
komentar Berita
Komentar
4.4 Proses Jawaban Polling
4.3 Proses SoalPolling
SoalPolling
Jawaban polling
Jawaban polling
JawabanPolling
Gambar 3.5 DFD Level 1 Proses 4
3.5 Perancangan Interface 1. Rancangan Halaman Utama
Header Home
Berita
Info Sekolah
Download
Tes Soal
Berita Terbaru
Login Pengguna
Pencarian Keyword
Username
Kategori
Password Hapus
Cari
Login
Berita Terpopuler
Materi Terbaru
Polling
Pengumuman Terbaru
Berita Terpopuler
Link
Copyright © 2011 e-Learning System Allright reserved
Gambar 3.6 Rancangan Halaman Utama
2. Rancangan Halaman Soal Online Selamat mengerjakan test soal online Data Soal Sisa waktu
1
Waktu berjalan
Jam sekarang
Isi soal online 1
Jawaban a Jawaban b Jawaban c Jawaban d 2
Isi soal online 2
Jawaban a Jawaban b Jawaban c Jawaban d
Gambar 3.7 Rancangan Halaman Soal Online
3. Rancangan Halaman Forum Siswa
Topik Baru Topik
Nama
Balasan
Balasan Terakhir
Gambar 3.8 Rancangan Halaman Forum Siswa
4. Hasil Penelitian dan Pembahasan 4.1 Testing Program Pengetesan program berfokus pada kebutuhan fungsional dari website itu apakah sudah terpenuhi atau belum. Dengan kata lain bagian-bagian dari website sudah mampu berjalan sebagaimana mestinya, diantaranya: 1. Login Administrator Untuk dapat menggunakan sistem maka admin harus login terlebih dahulu sesuai dengan statusnya. Dengan cara menginputkan username dan password ke dalam text box. Sebagai contoh login sebagai admin.
Gambar 4.1 Login Administrator
Pesan kesalahan halaman login administrator jika Textfield username dan password tidak di isi.
Gambar 4.2 Pesan Kesalahan Halaman Login Administrator
2. Tes Soal Pengujian halaman test soal ini di maksudkan untuk menguji apakah
halaman-
halaman yang di gunakan saat test soal dapat berjalan dengan baik. Adapun untuk mengikuti tes soal adalah: a. Untuk dapat mengerjakan soal online ini seorang siswa harus login terlebih dahulu ke dalam system.
Gambar 4.3 Halaman Utama Tes Soal b.
Klik menu Katalog Soal untuk melihat daftar soal yang akan diikuti.
Gambar 4.4 Halaman Katalog Soal
c.
untuk mengerjakan soal pilih soal yang ada di catalog soal maka akan dilanjutkan ke soal dari materi tersebut.
Gambar 4.5 Halaman Daftar Soal d.
untuk mengikuti tes klik pada tulisan ikuti tes ini, maka akan tampil halaman soal pilihan ganda dan waktunya dihitung secara otomatis oleh system
Gambar 4.6 Halaman Tes Soal e.
Untuk melihat hasil tes klik pada menu Nilai
Gambar 4.7 Halaman Hasil Tes
5.
Kesimpulan Sistem E-learning di SMP Negeri 2 Pati adalah sistem berbasis web yang berguna
sebagai sarana pendukung dari kegiatan belajar di kelas. Dalam hal ini kegiatan belajar di kelas tetap merupakan hal yang utama. Sistem e-learning yang dihasilkan dapat membantu guru dalam menyampaikan semua bahan pelajaran. Berdasarkan hasil pembahasan selama melakukan penelitian maka diperoleh beberapa kesimpulan, diantaranya : 1. Aplikasi e-learning yang telah dibangun telah mengolah materi-materi serta soal-soal secara digital dari kelas tujuh sampai kelas sembilan sesuai dengan kurikulum yang berlaku. 2. Aplikasi e-learning telah menyediakan fasilitas upload, download materi serta forum diskusi antara guru dan murid yang dapat diakses kapanpun dan dimanapun. 3. Aplikasi
e-learning
yang
dibangun
telah
dapat
menampilkan
simulasisimulasi yang berhubungan dengan materi yang dipelajari, dan soal-soal dalam bentuk pilihan ganda sehingga para siswa diharapkan dapat mengerti tentang materi yang dipelajarinya serta menambah minat untuk giat belajar.
DAFTAR PUSTAKA
D, Dwi Prasetyo. 2005. Solusi Menjadi Webmaster Melalui Manajemen Web dengan php. Jakarta : Elex Media Komputindo.
H, Prihatna. 2005. Kiat Praktis Menjadi Webmaster Profesional. Jakarta : Elex Komputindo.
Jogiyanto. 2005. ANALISIS & DESAIN Sistem Informasi: Pendekatan Terstruktur Teori dan Praktek Aplikasi Bisnis. Yogyakarta : Andi Publisher.
Simarmata, Janner; Iman Paryudi. 2006. Basis Data. Yogyakarta : Andi Publisher. Soekartawi. 2007. Merancang dan Menyelenggarakan e-Learning. Yogyakarta : Ardana Media.
