PERANCANGAN WEBSITE SEBAGAI SARANA INFORMASI DAN MEDIA PEMBELAJARAN ONLINE ( E-LEARNING ) DI SMK MA’ARIF 9 KEBUMEN
NASKAH PUBLIKASI
diajukan oleh Ari Yahya Setiawan 10.11.3531
kepada JURUSAN TEKNIK INFORMATIKA SEKOLAH TINGGI MANAJEMEN INFORMATIKA DAN KOMPUTER AMIKOM YOGYAKARTA YOGYAKARTA 2014
DESIGNING WEBSITE AS A MEANS OF INFORMATION AND MEDIA ONLINE LEARNING (E-LEARNING) AT SMK MA’ARIF 9 KEBUMEN PERANCANGAN WEBSITE SEBAGAI SARANA INFORMASI DAN MEDIA PEMBELAJARAN ONLINE ( E-LEARNING ) DI SMK MA’ARIF 9 KEBUMEN Ari Yahya Setiawan Anggit Dwi Hartanto Jurusan Teknik Informatika STMIK AMIKOM YOGYAKARTA ABSTRACT With the development of information technology is very rapid , information technology has now expanded in all aspects of life , not least in the world of education . Currently can be found almost all educational institutions ranging from elementary school to college has had individual websites are used to introduce the institution 's profile . In addition to introducing school profile website now also be used for media information for school students to get to know more details as information from the center , as well as the material of extracurricular activities that teachers are expected to learn to be more fun and not boring because of the subject matter information and can be accessed via the Internet anytime and anywhere . website as a means to develop an online -based teaching and learning ( e -learning ) . The concept is known as e -learning had an impact in the transformation process into a digital form of conventional education , both the content and the system Based on the above authors do Designing Website As a Means of Information and Media Online Learning (E-Learning) at SMK Ma’arif 9 Kebumen where this paper was written when the school does not yet have an official website so that information is delivered in the conventional manner through flyers and mail notification . Keywords : websites , e-learning , instructional media , education .
1.
Pendahuluan
Di era globalisasi seperti ini, perkembangan teknologi informasi dan komunikasi telah menyebar luas di kalangan masyarakat umum. Perkembangan yang begitu dinamis menjadi salah satu faktor yang menuntut semua pihak untuk dapat beradaptasi. Hal ini memberikan dampak positif terhadap kemajuan dunia pendidikan, terbukti dengan banyaknya media informasi dan fasilitas-fasilitas yang banyak bermunculan di internet untuk meningkatkan kualitas pembelajaran. Elearning Merupakan cara baru dan modern dalam proses belajar mengajar yang menggunakan media elektronik khususnya internet sebagai sistem pembelajarannya. SMK Ma’arif 9 Kebumen merupakan Sekolah yang sedang berkembang dan memiliki fasilitas yang cukup untuk menerapkan website elearning. Dengan website elearning ini guru dapat menyampaikan materi kepada siswa untuk dipelajari kapanpun dan dimanapun, selain itu pihak sekolah juga dapat memberikan informasi untuk siswa dan masyarakat umum , serta bisa menjadi media promosi sekolah tersebut. 2.
Landasan Teori
2.1. Konsep Dasar Informasi, dan Metode Pembelajaran 2.1.1. Pengertian Informasi Pengertian informasi adalah data yang telah diolah menjadi bentuk yang lebih berguna dan lebih berarti bagi penerimanya.
1
Sedangkan sebuah sistem informasi pada hakekatnya merupakan suatu sistem yang memiliki komponen-komponen atau sub sistem untk menghasilkan informasi. Bagian ini akan memberikan pengertian-pengertian mendasar yang menuju pada pemahaman sistem informasi secara utuh.
2
2.1.2. Metode Pembelajaran 2.1.2.2.
Metode Konvensional Salah satu model pembelajaran yang masih berlaku dan sangat banyak
digunakan
oleh
guru
adalah
model
pembelajaran
konvensional.
Pembelajaran
konvensional mempunyai beberapa pengertian menurut para ahli, diantaranya:
1
Hartono Jogiyanto 2005. AnalisisdanDesainSistemInformasi.Hal.8 Teguh wahyono. 2004. Sistem Informasi Konsep Dasar, Analisis Desain dan Implementasi. Hal 11 2
1
1. Djamarah (1996), metode pembelajaran konvensional adalah metode pembelajaran tradisional atau disebut juga dengan metode ceramah, karena sejak dulu metode ini telah dipergunakan sebagai alat komunikasi lisan antara guru dengan anak didik dalam proses belajar dan pembelajaran. Dalam pembelajaran sejarah metode konvensional ditandai dengan ceramah yang diiringi dengan penjelasan, serta pembagian tugas dan latihan. 2. Freire (1999), memberikan istilah terhadap pengajaran seperti itu sebagai suatu penyelenggaraan pendidikan ber “gaya bank” penyelenggaraan pendidikan hanya dipandang sebagai suatu aktivitas 3. Pemberian informasi yang harus “ditelan” oleh siswa, yang wajib diingat dan dihafal. 2.1.2.3.
E-Learning E-Learning merupakan suatu jenis belajar mengajar yang memungkinkan
tersampaikannya bahan ajar ke siswa dengan menggunakan media Internet, Intranet atau media jaringan komputer lain.
3
Adapun pengertian E-Learning yang lain adalah sistem pendidikan yang menggunakan aplikasi elektronik untuk mendukung belajar mengajar dengan media Internet, jaringan komputer,maupun komputer standalone. 2.2
Konsep Dasar Internet
2.2.1.
Sejarah Internet
4
Internet pertama kali digunakan sebagai proyek penelitian yang ditemukan oleh Advanced Research Project Agency (ARPA) Departement of Defense (DOD) di Amerika Serikat. Pada dasarnya, internet digunakan untuk menghubungkan komputer. Versi yang pertama disebutkan ARPANET. Pada tahun 1972, ARPA berubah menjadi DARPA dengan tetap memproduksi proyek ARPANET. 2.2.2.
5
Pengertian Internet Internet adalah kelompok atau kumpulan dari jutaan komputer. Penggunaan
internet memungkinkan kita untuk mendapatkan informasi dari komputer yang ada di dalam kelompok tersebut dengan asumsi bahwa pemilik komputer memberikan izin akses. Untuk mendapatkan sebuah informasi, sekumpulan protokol harus digunakan, 3
Darin E. Hartley, Selling e-Learning, American Society for Training and Development, 2001 Glossary of e-Learning Terms, LearnFrame.Com, 2001, Terakhirdiakses 2 Oktober 2013 5 Janner Simarmata Rekay. 2010. Rekayasa Web. Hal 50 4
2
yaitu sekumpulan aturan yang menetapkan bagaimana suatu informasi dapat dikirim dan diterima. 2.3.
Konsep Dasar Website
2.3.1.
Sejarah Website
Pada tahun 1991, Tim Bernes-Lee mengembangkan visi untuk Network Information Project pada le Centre Europeen de Recherche Nucleaire (CERN) di Swiss. Misinya adalah untuk menciptakan sistem informasi global yang mudah, namun kuat berdasarkan pada hiperteks. Dua bagian utama yang muncul dari proyek ini adalah HyperText Markup Languange (HTML) dan HyperText Transfer Protokol (HTTP). 2.3.2.
6
Pengertian Website
Secara teknis, Web adalah
sebuah sistem dengan informasi yang disajikan
dalam bentuk teks, gambar, suara, dan lain-lain yang tersimpan dalam sebuah server web internet yang disajikan dalam bentuk hiperteks. Informasi web dalam bentuk teks umumnya ditulis dalam bentuk HTML (HyperText Markup Languange). Informasi lainnya disajikan dalam bentuk grafis dalam format (GIF, JPG, PNG), suara dalam format (AU, WAV). Dan objek multimedia lainnya seperti (MIDI, Shockwave, Quicktime Movie, 3D World). 2.4. Konsep Dasar Database 2.4.1. Pengertian Database Kumpulan file-file yang mempunyai kaitan antara satu file dengan file yang lain sehingga membentuk satu bangunan data untuk menginformasikan satu perusahaan, instansi dalam batasan tertentu.
7
2.4.2. Flowchart Bagian alir (flowchart) adalah bagan (chart) yang menunjukan alir (flow) di dalam program atau prosedur sistem secara logika. Bagan alir digunakan terutama untuk alat bantu komunikasi dan untuk untuk dokumentasi. (FitzGerald, FitzGerals, & Stallings, 1981)
6
Janner Simarmata Rekay. 2010. Rekayasa Web. Hal 53 Ir.Harianto Kristanto. 1994. Konsep dan Peancangan Database. Hal 3.
7
3
2.4.3. Data Flow Diagram Data Flow Diagram (DFD) adalah sebuah teknik grafis yang menggambarkan aliran informasi dan transformasi yang diaplikasikan pada saat data bergerak dari masukan menjadi keluaran. (Pressman, 2002) 2.5.
Bahasa Pemrograman Website
2.5.1.
Pengertian HTML HyperText Markup Languange (HTML) adalah bahasa yang digunakan untuk
menulis
halaman web.
Untuk
menyampaikan ide pada
web browser,
HTML
menggunakan apa yang dinamakan tag. Tag selalu ditulis di antara tanda lebih kecil dan tanda lebih besar (
).
8
2.5.2. Pengertian PHP HyperText Preprocessor (PHP) adalah bahasa yang mudah
dibuat. Notepad
merupakan teks editor yang bisa digunakan. PHP mampu berhubungan dengan database dan dapat diintegrasikan dengan HTML. Fungsi-fungsi yang telah ada di dalam PHP tidak case sensitive (membedakan huruf besar dengan kecil), namun variabelnya case sensitive.
9
2.5.3. Pengertian JavaScript JavaScript adalah bahasa scripting yang popular di internet dan dapat bekerja di sebagian besar browser seperti Internet Explorer (IE), Mozilla FireFox, Netscape dan Opera. Kode JavaScript dapat disisipkan
dalam halaman web menggunakan tag
10
SCRIPT.
2.5.4. Pengertian CSS Cascading Style Sheet (CSS) adalah suatu bahasa yang bekerja sama dengan dokumen HTML untuk mendefinisikan cara bagaimana suatu isi halaman web
8
Yudhi Purwanto. 2001. Pemrograman Web dengan PHP. Hal 19 Yudhi Purwanto. 2001. Pemrograman Web dengan PHP. Hal 53 10 Andi Sunyoto, M.Kom. 2007. AJAX Membangun Web dengan Teknologi ASYNCHRONOUSE JavaScript dan XML. 9
4
ditampilkan atau direpresentasikan. Presentasi ini meliputi style atau gaya teks, link, maupun tata letak (layout) halaman. 2.6.
Software yang digunakan
2.6.1.
Adobe Photoshop CS3
11
Sejak lama Adobe Photoshop terkenal sebagai software pengolah gambar termasyur. Program keluaran perusahaan software terkemuka Adobe Systems Inc ini telah menjadi program standar dalam dunia desain grafis. 2.6.2.
XAMPP XAMPP adalah aplikasi berbasis open-source, yang mendukung banyak system
operasi, merupakan kompilasi dari beberapa program. Fungsinya adalah sebagai server yang berdiri sendiri (localhost), yang terdiri atas program Apache HTTP Server, MySQL database, dan penerjemah bahasa yang ditulis dengan bahasa pemrograman PHP dan Perl. Nama XAMPP merupakan singkatan dari X (empat system operasi apapun), Apache, MySQL, PHP dan Perl. 2.6.3.
Netbeans 7.2 Netbeans adalah Integrated Development Environtment (IDE) yang digunakan
sebagai text editor untuk menuliskan kode-kode program. IDE Netbeans memiliki dukungan bahasa pemrograman yang sangat lengkap diantaranya PHP, Java, Ruby dan sebagainya. Berikut adalah tampilan Netbeans 7.2 : 2.6.4.
Browser Terdapat banyak bermacam-macam browser, diantaranya adalah Internet
Explorer (IE), Google Chrome, Mozilla FireFox, Safari, Opera.Browser adalah aplikasi yang berfungsi menampilkan dan melakukan interaksi dengan document yang disediakan oleh webserver. 3.
Analisis Dan Perancangan Tahap analisis sistem dilakukan setelah tahap perencanaan sistem (system
planning) dan sebelum tahap desain sistem (system desain). Tahap analisis merupakan tahap yang kritis dan sangat penting, karena kesalahan menyebabkan kesalahan ditahap berikutnya. 11
Budi Raharjo.2011.Belajar Pemrograman Web hal 185-186.
5
didalam
tahap ini akan
3.1. Analisis Kebutuhan Sistem Dalam perancangan sistem peneliti mendefinisikan kebutuhan sistem dan proses apa saja yang akan dilakukan oleh sistem. Kebutuhan sistem terdiri terbagi menjadi dua yaitu fungsional dan kebutuhan nonfungsional. 3.1.1. Kebutuhan Fungsional Menurut Hanif Al Fatta (2007:63), Kebutuhan fungsional adalah jenis kebutuhan yang berisi proses-proses apa saja yang nantinya dilakukan oleh system. Kebutuhan juga berisi informasi-informasi apa saja yang harus ada dan dihasilkan oleh system. 3.1.2.
Kebutuhan non fungsional Menurut Hanif Al Fatta (2007:75), Kebutuhan non-fungsional adalah tipe
kebutuhan yang berisi property perilaku yang dimiliki oleh system. 3.2. Analisis Kelayakan Sistem Setelah sistem analisis selesai menyusun dokumen kebutuhan sistem, maka tahap desain sistem bisa dimulai. Namun tidak semua kebutuhan sistem yang didefinisikan pada poin analisis kebutuhan layak untuk dikembangkan. Tahap inilah yang sering kita sebut dengan tahapan analisis kelayakan atau studi kelayakan. 3.3. Perancangan Sistem 3.3.1. Flowchart Berikut gambar dari flowchart sistem yang akan dibanggun pada SMK Ma’arif 9 Kebumen.
6
Gambar 3.1 Flowchart Sistem 3.3.2.
DFD (Data Flow Diadgram) DFD merupakan alat perancangan sistem yang berorientasi pada alur data yang
digunakan untuk menggambarkan hasil analisa maupun hasil perancangan sistem yang mudah dikomunikasikan oleh sistem kepada pemakai ataupun programmer.
7
Gambar 3.2 DFD
8
Gambar 3.3 DFD Level 1
9
4.
Implementasi dan Pembahasan
4.1. Interface Sistem 4.1.1. Halaman utama website
Gambar 4.1 Halaman utama Website Halaman utama website ini berisi berita , informasi penting , dan agenda terakhir. tampilan ini yang akan muncul jika user belum melakukan login user.
10
4.1.2.
Halaman Login Admin
Gambar 4.2 Halaman Login Admin Untuk masuk ke menu admin, maka sistem mengharuskan pengguna untuk melakukan login agar memiliki hak akses. Jika username dan password benar maka akan diarahkan ke halaman menu admin serta diberihak akses sebagai admin. 4.1.3.
Halaman Utama Admin Berikut ini tampilan dari halaman utama admin. Dibagian ini admin dapat memilih
menu yang akan ditambah diubah maupun dihapus.
Gambar 4.3 Halaman Utama Admin
11
4.1.4.
Halaman Login Guru
Gambar 4.4 Halaman Login Guru Untuk masuk ke menu guru, maka sistem mengharuskan pengguna untuk melakukan login agar memiliki hak akses. Jika username dan password benar maka akan diarahkan ke halaman menu guruserta diberihak akses sebagai guru. 4.1.5.
Halaman Utama Guru
Gambar 4.5 Halaman Utama Guru
12
Dibagian ini guru dapat menambah, mengedit dan menghapus materi serta guru juga dapat merubah biodata guru beserta passwordnya. 4.1.6.
Halaman Elearning
Gambar 4.6 Halaman Elearning Untuk mengakses halaman Elearning siswa diharuskan melakukan login terlebih dahulu, jika username dan password benar maka akan dialihkan ke halaman siswa. 4.1.7 Halaman Utama Siswa Siswa dapat mendownload materi berdasarkan guru, jurusan, dan berdasarkan mata pelajaran. Siswa juga dapat mengganti password untuk login ke halaman siswa.
13
Gambar 4.7 Halaman Utama Siswa 5.
PENUTUP
5.1 Kesimpulan
Berdasarkan pembahasan pada halaman sebelumnya, yang mencakup datadata penelitian pada SMK Ma’arif 9 Kebumen dan pembuatan laporan skripsi dengan judul “PERANCANGAN WEBSITE SEBAGAI SARANA INFORMASI DAN MEDIA PEMBELAJARAN ONLINE (E-LEARNING ) DI SMK MA’ARIF 9 KEBUMEN”, serta sekaligus menjawab rumusan masalah pada Bab I, maka dapat diambil kesimpulan sebagai berikut: 1. Dengan adanya website Sekolah dan Elearning ini maka akan mendukung kualitas penyampaian data materi dari guru kepada siswa,siswa akan dimudahkan dalam mengakses materi pembelajaran asal ada media internet. 2. Staff SMK Ma’arif 9 Kebumen akan dimudahkan dalam memberikan informasi kepada masyarakat umum. 3. Memudahkan SMK Ma’arif 9 Kebumen dalam menghimpun data-data materi dari guru yang aktif. 5.2 Saran Mengingat tidak ada yang sempurna di dunia ini kecuali Sang Pencipta, penulis juga menyadari bahwa penulisan skripsi ini masih banyak kekurangan, maka dari itu kritik dan saran dari para pembaca yang sekiranya dapat membangun dan memperbaiki
14
sistem ini sangat diharapkan. Kiranya skripsi ini dengan segala manfaat, kelebihan, dan kekurangan dapat diterima serta memberi manfaat bagi masyarakat luas. Adapun saran yang akan disampaikan terhadap website di SMK Ma’arif 9 Kebumen diantaranya: 1. Website ini masih sangat sederhana dalam hal mengamankan data, untuk itu pengembang selanjutnya agar lebih memperhatikan dalam teknik mengamankan sistem ini. 2. Materi hanya bisa diakses oleh siswa SMK Ma’arif 9 kebumen saja belum bisa diakses oleh masyarakat umum. Untuk kedepannya supaya materi yang sifatnya tidak terlalu private agar bisa didownload oleh masyarakat umum. 3. Website ini Belum ada fitur pencarian, dan olah data nilai sehingga untuk kedepannya diharapkan bisa ditambahkan fitur tersebut. DAFTAR PUSTAKA Al Fatta, Hanif. 2007. Analisis dan Perancangan Sistem Informasi untuk Keunggulan Bersaing Perusahaan dan Organisasi Modern. Yogyakarta: Andi Offset. Astuti, tri. 2010. Perbandingan Metode Pembelajaran Konvensional dengan Metode Pembelajaran Hyphnoteaching.http://iyasphunkalfreth.blogspot.com/, diakses 13 November 2013 Budi Raharjo.2011.Belajar Pemrograman Web. Bandung: Modula. Darin E. Hartley.2001. Selling e-Learning, American Society for Training and Development. FitzGerald, J., FitzGerals, A. F., & Stallings, W. D. 1981.
Fundamentals of System
Analysis. New York: John Willey & Sons. LearnFrame.Com. 2001. Glossary of e-Learning Terms.
Terakhir diakses 2 Oktober
2013 Jogiyanto, Hartono. 2005. Analisis dan Desain Informasi. Yogyakarta: Andi Offset. Kristanto, Harianto. 1994. Konsep dan Perancangan Database. Yogyakarta: Andi Offset. Pressman, Roger S. 2002.Rekayasa Perangkat Lunak: Pendekatan Praktisi (Buku I): Yogyakarta: ANDI. Purwanto, Yudi. 2001. Pemrograman Web dengan PHP.Yogyakarta : Andi Offset Simarmata, Janner. 2010. Rekayasa Web.Yogyakarta: Andi Offset. Sunyoto, A. 2007. AJAX Membangun Web dengan Teknologi Asyncronouse JavaScript & XML. Yogyakarta: Andi Offset. Wahyono, Teguh. 2004.
Sistem Informasi (Konsep Dasar Analisis, Desain dan
Implementasi). Yogyakarta: Graha Ilmu.
15
