PERANCANGAN WEBSITE E-LEARNING SMP NEGERI 3 MAGELANG. Naskah Publikasi

(1)

1

PERANCANGAN WEBSITE E-LEARNING

SMP NEGERI 3 MAGELANG

Naskah Publikasi

diajukan oleh

Ajik Andriasmoro

08.11.2414

Kepada

SEKOLAH TINGGI MANAJEMEN INFORMATIKA DAN KOMPUTER

AMIKOM

YOGYAKARTA

2012

(2)

(3)

3

DESIGN A E-LEARNING WEBSITE OF SMP NEGERI 3 MAGELANG

PERANCANGAN WEBSITE E-LEARNING SMP NEGERI 3 MAGELANG

Ajik Andriasmoro Jurusan Teknik Informatika STMIK AMIKOM YOGYAKARTA

ABSTRACT

Learning proccess in school is a fundamental activity to make educational success. Nowdays learning method was not effective. Teacher must write a material lesson or exam on the blackboard. It needs more of time. Students also feel bored with monoton learning method.

Method of learning proccess can use more effectiveness system. Using a website as a distributing material can help learning proccess. Teachers and students can download data from website.

E-learning website had been installed in SMP Negeri 3 Magelang for testing. Teachers and students can access website from computer’s school. Teachers can upload and download lesson materials. Students can download materials was uploaded by teachers.

(4)

4

1 PENDAHULUAN

Adanya kemajuan teknologi informasi memberikan dampak positif bagi institusi-institusi yang menginginkan kemajuan bagi organisasi. SMP Negeri 3 Magelang sebagai institusi pendidikan yang ingin mencetak sumber daya manusia unggul perlu adanya sistem pembelajaran yang lebih baik. Untuk itu materi pelajaran sebagai dasar ilmu harus disampaikan kepada siswa dengan cepat dan tepat.

Papan tulis masih menjadi alat utama sebagai media penyampaian materi di SMP Negeri 3 Magelang. Guru kesulitan dalam pendistribusian materi pelajaran yang disampaikan kepada siswa. Kesulitan ini dikarenakan sumber referensi pelajaran yang tersedia terbatas. Buku paket menjadi referensi utama disertai dengan buku pegangan yang dimiliki oleh guru. Siswa harus bergantian dalam peminjaman buku paket.

Sistem pembelajaran dengan memanfaatkan website e-learning dapat digunakan untuk membantu mengatasi permasalahan yang ada. Materi pelajaran yang digunakan sebagai referensi dapat diunggah pada halaman web. Guru dapat langsung mengunduh materi pada saat pelajaran berlangsung. Siswa juga bisa mengunduh materi sebagai referensi belajar di rumah. Web yang dibuat dapat diakses pada jaringan lokal sekolah.

Web e-learning disimpan pada web server yang berada di sekolah. Web digunakan sebagai media pendistribusian data yang berupa materi pelajaran. Guru dan siswa masing-masing diberikan akun untuk login ke halaman web. Guru diberikan hak untuk mengunggah dan mengunduh materi pelajaran, sedangkan siswa hanya diberikan hak untuk mengunduh materi pelajaran saja.

2 LANDASAN TEORI

2.1 Konsep Dasar Sistem

2.1.1 Pengertian Sistem

Pendefinisian sistem dikelompokkan dalam dua pendekatan, yaitu pendefinisian yang menekankan pada prosedur dan elemennya.

Pendekatan sistem yang lebih menekankan pada prosedur, mendefinisikan sistem sebagai berikut (Jogiyanto, 2005): “Sistem adalah suatu jaringan kerja dari prosedur-prosedur yang saling berhubungan, berkumpul bersama-sama untuk melakukan suatu kegiatan atau menyelesaikan suatu sasaran tertentu.”

(5)

5

Pendekatan sistem yang lebih menekankan pada elemen atau komponennya, mendefinisikan sistem sebagai berikut (Jogiyanto, 2005): “Sistem adalah kumpulan dari elemen-elemen yang berinteraksi untuk mencapai tujuan tertentu.”

Kedua pengertian sistem di atas adalah benar semua dan tidak saling bertentangan, perbedaan hanya pada pendekatannya saja. Dari kedua pengertian di atas diperoleh kesimpulan bahwa sistem merupakan kumpulan dari beberapa subsistem yang saling berhubungan untuk mencapai tujuan yang diinginkan suatu organisasi.

2.1.2 Karakteristik Sistem

Suatu sistem mempunyai karakteristik atau sifat-sifat tertentu, yaitu:1 1. Batasan Sistem ( Boundary )

Penggambaran dari suatu elemen atau unsur yang membedakan komponen di dalam sistem atau di luar sistem.

2. Lingkungan ( Environtment )

Segala sesuatu di luar sistem, lingkungan yang menyediakan asumsi, kendala, dan input terhadap suatu sistem.

3. Masukan ( Input )

Sumber daya (data, bahan baku, peralatan, energi) dari lingkungan yang dikonsumsi dan dimanipulasi oleh suatu sistem.

4. Keluaran ( Output )

Sumber daya atau produk (informasi, laporan, dokumen, tampilan layar komputer, barang jadi) yang disediakan untuk lingkungan sistem oleh kegiatan dalam suatu sistem.

5. Komponen ( Component )

Kegiatan-kegiatan atau proses dalam suatu sistem yang mentransformasikan input menjadi bentuk setengah jadi (output). Komponen ini bisa merupakan subsistem dari sebuah sistem.

6. Penghubung ( Interface )

Tempat dimana komponen atau sistem dan lingkungannya bertemu atau berinteraksi

7. Penyimpanan ( Storage )

Area yang dikuasai dan digunakan untuk penyimpanan sementara dan tetap dari informasi, energi, bahan baku, dan sebagainya. Penyimpanan merupakan suatu

1

Al Fatta, Hanif. 2007. Analisis dan Perancangan Sistem Informasi. Yogyakarta: Andi Offset. Hal 5-6

(6)

6

media penyangga di antara komponen tersebut bekerja dengan berbagai tingkatan yang ada dan memungkinkan komponen yang berbeda dari berbagai data yang sama.

2.2 Konsep Dasar Web

2.2.1 Pengertian Web

Web dapat diartikan sebagai kumpulan halaman yang menampilkan informasi data teks, data gambar diam atau gerak, data animasi, suara, video dan atau gabungan dari semuanya, baik yang bersifat statis maupun dinamis yang membentuk satu rangkaian bangunan yang saling terkait dimana masing-masing dihubungkan dengan jaringan-jaringan halaman (hyperlink). Bersifat statis apabila isi informasi website tetap, jarang berubah, dan isi informasinya searah hanya dari pemilik website.

Bersifat dinamis apabila isi informasi website selalu berubah-ubah, dan isi informasinya interaktif dua arah berasal dari pemilik serta pengguna website. Contoh website statis adalah berisi profil perusahaan, sedangkan website dinamis adalah seperti facebook, twitter dan sebagainya. Dalam sisi pengembangannya, website statis hanya bisa diupdate oleh pemiliknya saja, sedangkan website dinamis bisa di-update oleh pengguna maupun pemilik.

2.2.2 Unsur-Unsur Dalam Penyediaan Web

Penyediaan sebuah website harus menyertakan unsur-unsur penunjang seperti halnya nama domain (domain name). Nama domain atau biasa disebut dengan Domain Name adalah alamat unik di dunia internet yang digunakan untuk mengidentifikasi sebuah website, atau dengan kata lain domain name adalah alamat yang digunakan untuk menemukan sebuah website pada dunia internet. Contoh : http://www.nama situs.com

Nama domain sendiri mempunyai identifikasi ekstensi atau akhiran sesuai dengan kepentingan dan lokasi keberadaan website tersebut. Contoh nama domain ber-ekstensi internasional adalah com, net, org, info, biz, name, ws.

2.2.3 Kriteria Web yang Baik

Menurut ADAS (Academy of Digital Arts & Sciences) yang penyelenggara Webby Awards memberitahukan bahwa ada enam kriteria yang perlu diperhatikan dalam membangun sebuah web, yaitu :

(7)

7 2.2.3.1 Content

Content atau isi merupakan jantung dari sebuah web. Denyutan jantung sama dengan isi yang yang selalu berganti (dinamis) dan segar karena selalu up to date. Sebuah situs yang tidak pernah update berarti „mati‟. Seolah menjadi bangkai di belantara internet. Gaya bahasa dan model penulisan tidak harus sesuai aturan, akan lebih baik disesuaikan dengan tema web dan target audience. Sebuah web berita dapat juga mengambil content dari media lain (dengan ketentuan) atau memiliki rekanan secara resmi.

2.2.3.2 Struktur dan Navigasi

Struktur dan navigasi adalah peta sekaligus menu penunjuk jalan. Inilah pentingnya sebuah konsep perencanaan karena sifatnya jarang sekali diubah, maka harus dipikirkan dengan matang. Jika ternyata sangat beragam isinya maka perlu dikelompokkan. Syarat menu atau navigasi yang baik mudah dipelajari, konsisten, label dan teks jelas untuk dipahami, menawarkan alternatif lain tapi tidak membingungkan.

2.2.3.3 Desain visual

Desain visual merupakan perpaduan pemilihan warna, gambar, teks dan layout yang bagus. Efek animasi juga dibutuhkan, asalkan proporsional. Misalkan memang bisa dengan file .gif, mengapa harus memakai flash?.Jangan lupa munculkan ide orisinil dan profesional. Simple and clean juga bagian dari sebuah desain yang banyak digunakan, contohnya desain web Google dan Yahoo.

2.2.3.4 Fungsionalitas

Maraknya browser (alat untuk membuka halaman web) menjadi momok tersendiri bagi pembuat web. Karena para pengguna pasti ingin situs yang dikunjungi harus sama tampilan desain dan fungsi-fungsinya pada browser yang berbeda. Browser yang populer saat ini adalah Firefox, IE, Google Chrome, Opera, Safari dan Nestcape.

2.2.3.5 Interaktivitas

Menekankan pada adanya interaksi antara user sebagai pengguna web dengan halaman web itu sendiri. Contoh-contoh modul interaktif dalam web adalah : chat, forum, search, tools, commerce dsb. Tidak harus semua dijejalkan pada suatu web tetapi pilih mana yang proporsional dan sesuai kemampuan dan tujuan awal situs dibuat.

(8)

8

2.2.3.6 Overfall experience

Tidak semua bagian situs menarik, pasti ada tempat-tempat favorit yang ditunggu dan dilihat pengguna. Maka analisis dan kenalilah bagian mana dari situs yang banyak penggemarnya. Seorang user yang merasa terkesan dengan sebuah situs akan melakukan hal-hal antara lain: memberitahukan kepada teman, mengingat atau mencatat alamat domain, mem-bookmark atau memberikan feedback.

Website yang baik tidak hanya terbatas pada masalah design dan art, tetapi juga harus menganut metodologi, standar-standar baku pemrograman yang telah ada. Hal ini penting karena begitu banyak hal yang dapat mempengaruhi mutu dari sebuah website, seperti :

- Compatibility dengan berbagai macam web browser.

- Performance (Speed, Capacity, dan throughput).

- Modularity, ini untuk memudahkan jika website ini dikemudian hari akan berkembang.

User Friendly, bagaimana sebuah sistem navigasi dari sebuah Website tidak membingungkan pengunjung website tersebut. Kreasi memberikan solusi yang lain dari pada web design pada umumnya.

3 ANALISIS DAN PERANCANGAN SISTEM

3.1.1 Analisis Kebutuhan Sistem

Analisis kebutuhan sistem sangat dibutuhkan dalam mendukung kinerja sistem untuk mengetahui apakah sistem yang dikembangkan telah sesuai kebutuhan atau belum. Setelah menganalisis dan mendapatkan permasalahan yang ada pada sistem lama maka direkomendasikan untuk membuat file sharing data berbasis website.

Membangun sistem baru sudah pasti membutuhkan perangkat tambahan untuk mendukung keberhasilan proyek. Pembuatan file server membutuhkan perangkat keras, perangkat lunak dan dukungan pengguna yang akan mengelola sistem.

(9)

9 3.1.1.1 Kebutuhan Perangkat Keras

SMP Negeri 3 Magelang memiliki cukup banyak komputer di sekolah. Adapun sepesifikasi perangkat keras komputer yang dimiliki adalah sebagai berikut :

Tabel 3.1 Sepesifikasi Hardware

1 Mainboard HP Compaq

2 Proccessor Intel Dual Core

3 RAM 1 GB

4 VGA Intel 641 Express Chipset

5 Harddisk 80 GB

6 NIC Realtek PCI FE Family Controller

7 DVD RW Samsung DVD RW

8 Monitor Mugen LCD 14"

3.1.1.2 Kebutuhan Perangkat Lunak

Perangkat lunak yang dibutuhkan berupa sistem operasi dan progran aplikasi pendukung yang diperlukan. Perangkat lunak yang dibutuhkan antara lain sebagai berikut :

 Windows XP Profesional untuk sistem operasi.

 Server web Apache.

 MySQL untuk database.

 Macromedia Dreamweaver MX 2004 untuk desain website.

 Adobe Photoshop CS 3 untuk editing gambar. 3.1.1.3 Kebutuhan Pengguna

Pengguna atau user dari sistem yang akan dibuat adalah administrator jaringan dan pengguna biasa, dalam hal ini dikhususkan guru dan siswa. Adminstrator jaringan bertugas untuk mengelola jaringan dan file server yang dibuat. Admin memiliki akses

(10)

10

penuh untuk memberikan akun kepada guru dan siswa. Guru dan siswa diberikan hak akses untuk menggunakan file server. Guru diberikan hak untuk mengunggah dan mengunduh file. Siswa hanya diberikan hak untuk mengunduh file saja.

3.3.2 Perancangan Basis Data

Basis data sangat diperlukan dalam pengembangan sistem yang akan dibuat. Basis data yang akan dibuat dirancang dengan bantuan MySql. Rancangan tabel beserta atribut seperti pada gambar di bawah ini :

Tabel 3.2 Admin

Field Type Values Keterangan

id_admin integer 5 Primary key

username varchar 50

password varchar 50

email varchar 50

Tabel 3.3 Guru

nip integer 18 Primary key

password varchar 50 nama_guru varchar 25 tmpt_lahir varchar 50 tgl_lahir date jenis_kelamin varchar 25 foto varchar 50

(11)

11 Tabel 3.4 Info

id_info integer 5 Primary key

judul varchar 50

isi text

nip integer 18 Foreign key

Tabel 3.11 Jadwal

id_jadwal integer 5 Primary key

kd_kelas varchar 5

jam varchar 25

kd_mapel varchar 5

hari varchar 10

Tabel 3.12 Kelas

kd_kelas varchar 5 Primary key

nama_kelas varchar 30

Tabel 3.13 Mapel

kd_mapel varchar 5 Primary key

(12)

12

Tabel 3.14 Materi

kd_materi integer 10 Primary key

kd_mapel varchar 5 Foreign key

nip integer 18 judul_materi varchar 100 deskripsi text file_materi varchar 100 tgl_upload date Tabel 3.15 Siswa

nis varchar 25 Primary key

password varchar 50 nama_siswa varchar 50 tmpt_lahir varchar 50 tgl_lahir date jenis_kelamin varchar 25 alamat text foto varchar 50

4 IMPLEMENTASI DAN PEMBAHASAN

4.1 Tampilan Web

4.1.1 Halaman Depan

Halaman depan atau home adalah halaman yang pertama kali ditampilkan saat web browser melakukan pencarian.

(13)

13

Gambar 4.1 Tampilan Halaman Depan

4.1.2 Halaman Profil Guru

Gambar 4.2 Profil Guru

Jika salah satu nama guru diklik maka akan muncul profil guru yang bersangkutan. Profil guru menampilkan nama dan identitas guru.

4.1.3 Halaman Login Guru

Halaman login guru berisi menu profil guru, materi, jadwal, dan informasi mata pelajaran. Pada halaman ini guru dapat mengupload materi.

(14)

14

Gambar 4.3 Halaman Login Guru

4.1.4 Halaman Login Siswa

Gambar 4.4 Menu Login Siswa

5 PENUTUP

5.1 Kesimpulan

Website e-learning dapat digunakan sebagai alat untuk media pendistribusian data. Tahap pengembangan website dimulai dari analisis, desain database, pembuatan database, desain web dan implementasi.

5.2 Pada tahap analisis perlu dianalisis secara mendalam sejauh mana website akan dikembangka, apa saja yang diperlukan dalam pengembangan web.

(15)

15

DAFTAR PUSTAKA

Al Fatta, Hanif. 2007. Analisis dan Perancangan Sistem Informasi untuk Keunggulan Bersaing Perusahaan dan Organisasi Modern. Yogyakarta: Andi Offset.

Jogiyanto, HM. 2005. Analisis dan Desain Sistem Informasi Pendekatan Terstruktur Teori dan Praktik Aplikasi Bisnis. Yogyakarta: Andi Offset.

Sukrisno, Utami, E. 2008. Mengoptimalkan Query pada Ms SQLServer. Yogyakarta : Andi Offset.

Suyanto, H. 2009. Step by Step Web Desain Theory and Practices. Yogyakarta: Andi Offset.