MEMBUAT WEBSITE SEBAGAI MEDIA INFORMASI DAN BELAJAR

SISWA DI SMK N 4 PURWOREJO

Naskah Publikasi

diajukan oleh

Kurniawan Tri Susanto 08.01.2323

Hageng Adnan Rahmawan 08.01.2363

kepada SEKOLAH TINGGI MANAJEMEN INFORMATIKA DAN KOMPUTER

AMIKOM YOGYAKARTA

2011

NASKAH PUBLIKASI 

2  

MAKE A WEBSITE AS A MEDIUM OF INFORMATION AND LEARNING OF STUDENTS IN PURWOREJO VOCATIONAL HIGH SCHOOL STATE 4

MEMBUAT WEBSITE SEBAGAI MEDIA INFORMASI DAN BELAJAR SISWA

DI SMK N 4 PURWOREJO

Kurniawan Tri Susanto Hageng Adnan Rahmawan Jurusan Teknik Informatika

STMIK AMIKOM YOGYAKARTA

ABSTRACT

Rapid technological developments have brought us to coexist with the information, communication and technology itself. Demands in the face of globalization must be balanced with maximizing our existing technology as a means to exchange information.

The purpose of making this website is as a medium to develop and disseminate information to the public. In addition, to build an information system that can assist in school activities, especially in the processing of information about schools that can be easily accessed by the public. Because the Internet itself is one among the many media which deserve the attention of SMK Negeri 4 Purworejo and is part of the study of science communication that should get more attention in order to follow the rapid development of information technology that is part of the communication media.

Within this website there are also features one of which students can download materials provided by teachers and students can find out the latest info about the school. So that students more easily and quickly to determine the development of information at the time. In addition, students and teachers are given their own access rights to enter into the website, where teachers and students can edit profiles and can also send news.

Keywords: information  system,  website,  communication  and  technology,  internet, development, schools

3  

1. Pendahuluan

Sejalan dengan perkembangan ilmu pengetahuan dan teknologi, informasi dapat

membantu manusia memasuki peradaban yang baru di-era globalisasi dan teknologi yang

diciptakan untuk membantu pekerjaan sehari-hari. Dilihat dari pemanfaatan ilmu

pengetahuan dan teknologi, tentu harus diimbangi dengan tuntutan kemampuan adaptasi

manusia sebagai pengguna pada bidang teknologi informasi.

Teknologi internet membuat terbuka luasnya media sebagai pemberi informasi yang

cepat dan akurat Untuk itulah maka sangat penting membangun sebuah sarana informasi

seperti website yang berguna sebagai media pengenalan dan promosi atas sebuah lembaga

atau perusahaan. Website yang baik, memberikan informasi yang menarik, mudah diingat

dan mengena pada sasaran, dan itu sangat mempengaruhi image para user yang berkunjug

ke website tersebut.

SMK Negeri 4 Purworejo sebagai salah satu lembaga pendidikan Negeri yang sangat

ingin mengembangkan potensi para siswa, masyarakat dan sekolah dalam bidang informasi.

Salah satu keinginan yang masih belum terlaksana adalah pembuatan sistem informasi yang

memanfaatkan teknologi berbasis internet, karena selama ini pihak lembaga masih

mengandalkan sistem secara internal saja.

Pembuatan system informasi berbasis website ini lebih ditujukan untuk informasi dan

belajar siswa SMK Negeri 4 Purworejo

Membuat sistem informasi seputar sekolah, maka penulis selaku mahasiswa STMIK

AMIKOM YOGYAKARTA bermaksud melakukan penelitian di SMK Negeri 4 Purworejo

dengan judul “MEMBUAT WEBSITE SEBAGAI MEDIA INFORMASI DAN BELAJAR SISWA DI SMK NEGERI 4 PURWOREJO”

2. Dasar Teori 2.1 Konsep Dasar Sistem Informasi

Terdapat banyak pendekatan dalam mendefinisikan, apakah system tersebut? Yaitu

jaringan kerja dari prosedur-prosedur yang saling berhubungan, berkumpul bersama-sama

untuk melakukan suatu kegiatan atau menyelesaikan suatu sasaran tertentu.1

                                                            1 Andri Kristanto, 2003. Perancangan Sistem Informasi dan Aplikasinya,Yogyakarta:gava Media, h.1.  

4  

Sedangkan Informasi adalah kumpulan data yang diolah menjadi bentuk yang lebih

berguna dan lebih berarti bagi yang menerima.2

Data akan berguna dan menghasilkan suatu informasi apakah diolah melalui suatu

model pengolahan data atau lebih dikenal dengan nama siklus pengolahan data.

INPUT  PROSES  OUTPUT 

Gambar 2.1 siklus pengolahan data

2.2 Konsep Dasar Internet

Internet (Interconnected Network) adalah suatu hubungan antara komputer-komputer

yang membentuk suatu jaringan yang luas dan global yang saling bertukar informasi secara

terus menerus. Internet merupakan jaringan global yang menghubungkan suatu jaringan

dengan jaringan lainnya di seluruh dunia. Media yang menghubungkan bisa berupa kabel,

maupun frekuensi radio.

2.3 Website

Website atau situs web merupakan suatu kumpulan halaman-halaman web yang saling

berhubungan dan memuat teks, gambar, suara, video serta data digital lain. Website

dialamatkan dengan sebuah nama domain atau IP address dalam jaringan internet.

Sebuah website diletakkan pada sebuah computer server yang biasanya disediakan

oleh layanan web hosting. sebuah computer server dapat menampung beberapa website.

Masing-masing website memiliki alamat unik yang berbeda. Pengguna internet dapat

mengakses website tersebut dengan cara mengetikkan alamat IP/nama domain pada

addressbar di dalam web browser.

2.4 Bahasa Pemrograman

Bahasa pemrograman merupakan aturan baku tentang penulisan kode untuk membuat

suatu perintah. Dalam membangun sebuah website digunakan beberapa bahasa

pemrograman antara lain:

                                                            2 Ibid, h.6. 

DATA  UMPAN BALIK PENERIMA 

5  

2.4.1 HTML Hyper Text Markup Language (HTML) merupakan bahasa pemrograman website yang

paling dasar, yang digunakan untuk membuat sebuah halaman web dan menampilkan

berbagai informasi di dalam sebuah browser Internet. 2.4.2 CSS

Cascanding Syle Sheet (CSS) merupakan suatu teknologi yang digunakan untuk

memperindah tampilan halaman website (situs). Dengan Metode CSS keseluruhan warna

dan tampilan yang ada di situs web dapat dirubah/diformat ulang dengan cepat. CSS juga

telah di standartkan oleh World Wide Web Consortium (W3C) untuk di gunakan di web

browser. 2.4.3 Java Script

JavaScript adalah bahasa script yang dicantumkan pada sebuah halaman web yang

dijalankan pada web browser seperti Internet Explorer (IE), Mozilla FireFox dan Opera. 2.4.4 PHP

PHP adalah salah satu bahasa pemrograman di internet. PHP bersifat cepat, gratis

dan murah. Selain itu PHP mendukung penggunaan database seperti MySQL, PostgreSQl,

Oracle, etc.

Untuk dapat menjalankan PHP melalui browser, maka anda diharuskan terlebih dahulu

menginstall web server ( misalnya Apache, PWS, IIS ) lalu menginstall PHP.

3 Gambaran Umum 3.1 Tinjauan Umum 3.1.1 Sejarah Singkat

SMK N 4 Purworejo merupakan sekolah kejuruan yang didirikan dan dibuka pada

tahun 2002. Karena dengan adanya pendidikan saat ini yang sangat berkembang dengan

pesat, maka sekolah kejuruan ini menerapkan tujuan menghasilkan tenaga kerja yang

handal, memiliki kompetensi dan integritas yang tinggi serta professional dalam bidangnya.

Sehingga mampu menghadapi tantangan teknologi dan kompetensi dunia kerja dimasa yang

akan datang.

3.1.2 Profil

SMK N 4 Purworejo adalah satu-satunya sekolah kejuruan yang memiliki keahlian di

bidang penangkapan ikan di Kabupaten Purworejo. SMK N 4 Purworejo beralamatkan di Jl.

Purwodadi – Grabag KM. 5 Desa Briyan, Kec. Ngombol, Kab. Purworejo. Kode Pos.54712.

6  

Meskipun belum lama berdiri, namun antusias dari para siswa yang ingin masuk ke SMK N 4

Purrworejo sangat banyak.

3.1.3 Visi dan Misi

Visi dari SMK N 4 Purworejo adalah Menjadi Pusat Pendidikan Kejuruan Teknik Bidang

Kelautan dan Perikanan serta Bidang Otomotif berstandar nasional/internasional yang

berwawasan budaya Indonesia, dengan potensi menghasilkan lulusan yang beriman dan

bertaqwa, mandiri, jujur serta kreatif dengan basis kompetensi yang kuat serta sikap mental

yang profesional agar mampu mengisi hidupnya menjadi warga negara yang produktif.

Misi dari SMK N 4 Purworejo adalah sebagai berikut :

1. Melaksanakan dan mengembangkan pendidikan dan pelatihan menengah kejuruan

bidang kelautan dan perikanan serta bidang otomotif yang adaptif, inovatif, mengacu

pada standar kompetensi nasional dan internasional.

2. Mengembangkan iklim belajar yang mengedepankan kepentingan siswa untuk

menggali potensi dirinya untuk menjadi manusia yang beriman dan bertaqwa kepada

Tuhan Yang Maha Esa.

3. Menjalin hubungan dengan masyarakat dan dunia usaha/industri.

3.2 Analisis Kebutuhan Sistem Analisis Kebutuhan Sistem ini adalah fase analisis untuk memahami kebutuhan sistem

baru secara mendalam dan pengembangan sistem baru. Analisis Kebutuhan Sistem ini di

bagi menjadi 2 jenis, yaitu kebutuhan fungsional dan kebutuhan non fungsional.

1. Kebutuhan Fungsional

Analisis kebutuhan fungsional adalah kebutuhan yang berisikan proses-proses

kebutuhan yang wajib ada pada sistem dan berisikan informasi-informasi yang ada dan bisa

dihasilkan oleh sistem tersebut

2. Kebutuhan Non Fungsional

Analisis kebutuhan non fungsional adalah fitur tambahan yang bisa menunjang kinerja

sistem untuk memproses inputan-outputan data dan juga bisa mempermudah pengguna

dalam menggunakan sistem menjadi lebih baik.

3.3 Perancangan

7  

Sebelum masuk kedalam pembahasan web, disini penulis akan menjelaskan tentang

perancangan web. Di dalam peracangan akan dibahas tentang perancangan database dan

perancangan sistem. Perancangan database meliputi tahapan normalisasi serta flowchart.

Sedangkan untuk perancangan sistem menggunakan data flow diagram (DFD).

Gambar 3.2 Diagram Konteks

3.4 Kamus Data Kamus data atau data dictionary atau disebut juga dengan istilah sistem data dictionary

adalah catalog fakta tentang data dan kebutuhan-kebutuhan informasi dari suatu sistem

informasi. Dengan menggunakan kamus data analisis sistem dapat mendefenisikan data

yang akan mengalir di suatu sistem dengan lengkap. Kamus data dibuat pada tahap analisis

sistem dan digunakan baik pada tahap analisis maupun pada tahap perancangan sistem.

Kamus data dibuat berdasarkan arus data yang ada di data flow diagram, yang

digunakan untuk menerangkan tentang struktur arus data secara lebih terperinci. Berikut

adalah gambar kamus data yang menunjukan hubungan antara data flow diagram dengan

kamus data

8  

3.5 Flowchart

Di dalam perancangan sistem, flowchart digunakan untuk menggambarkan alur

program yang akan dibuat. Di dalam perancangan system ini, terdapat 3 Flowchart, yaitu :

1. Flowchart Sistem Untuk Guru

2. Flowchart Sistem Untuk Siswa

3. Flowchart Sistem Untuk Admin.

3.6 Perancangan Database

Perancangan database adalah tahapan bagaimana mengatur dan mendesain data

baru yang akan menghasilkan suatu data yang cepat, efisien, dan mudah dalam melakukan

proses manipulasi. Berikut perancangan database pada website ini.

3.6.1 Tahapan Normalisasi Normalisasi diperlukan untuk melakukan pengujian apakah database yang dibuat

sudah normal atau belum. Normal disini mengandung arti bahwa suatu database sudah

tidak menimbulkan kekacauan data ataupun duplikasi data. Jadi normalisasi adalah proses

pengelompokan data elemen menjadi tabel-tabel yang menggunakan relasi dan entitas.

1. Bentuk Unnormal Bentuk unnormal merupakan kumpulan data yang tidak lengkap dan terduplikasi.

2. Bentuk Normalisasi Pertama Normalisasi pertama memiliki ciri yaitu tidak ada atribut yang bernilai ganda atau

atribut yang duplikat. 3. Bentuk Normalisasi Kedua

Normalisasi kedua memiliki ciri yaitu bentuk telah memenuhi kriteria bentuk normal ke

satu. Atribut bukan kunci haruslah bergantung secara fungsi pada kunci utama primary key.

Sehingga untuk membentu normal kedua haruslah sudah ditentukan kunci field. Kunci field

haruslah unik dan dapat memenuhi atribut lain yang menjadi anggotanya 4. Bentuk Normalisasi Ketiga

Pada normalisasi bentuk ketiga semua field dan relasi berada pada bentuk normalisasi

kedua dan tidak adanya ketergantungan transitif dimana semua atribut bukan kunci hanya

tergantung pada atribut kunci primer secara menyeluruh. 5. Relasi Antar Tabel

Relasi antartabel berfungsi untuk menjukkan relasi atau hubungan antar tabel

sehingga membentuk suatu jaringan data.

9  

3.7 Perancangan Struktur Tabel

Database yang digunakan pada web ini dirancang dengan menggunakan MySQL.

MySQL merupakan pengelola database server yang menggunakan bahasa standar SQL

(Structure Query Language).

3.8 Struktur Aplikasi Web yang Digunakan

Suatu website terdiri dari link-link yang menyediakan berbagai informasi. Begitu pula

dengan website SMK N 4 Purworejo ini yang terdiri dari link yang dapat menampilkan data

atau informasi yang sesuai dengan nama link tersebut.

3.8.1 Struktur Halaman User Umum User umum adalah pengunjung umum yang melihat informasi pada website. User

umum tidak mempunyai hak apapun terhadap data yang ada dalam website, mereka hanya

bisa melihat informasi yang ditampilkan pada website. 3.8.2 Struktur Halaman Guru 3.8.3 Struktur Halaman Siswa 3.8.4 Struktur Halaman Admn

Admin mempunyai hak penuh terhadap seluruh data yang ada di dalam website.

Pengelolaan data yang diperlukan dalam website menjadi tanggung jawab administrator.

3.9 Perancangan User Interface Rancangan Interface Website SMK N 4 Purworejo terdiri dari 4 bagian yaitu halaman

user umum/ pengunjung, halaman siswa, halaman guru, dan halaman administrator.

Gambar 3.3 Tampilan Halaman Home

10  

4 Pembahasan 4. 1 Implementasi

Tahapan Implementasi merupakan tahap penerapan dari tahap perancangan yang

dituliskan pada bab tiga. Implementasi meliputi implementasi database dan implementasi

program sehingga halaman web siap untuk diakses.

4.1.1 Implementasi Database Query yang digunakan untuk menyusun database adalah sebagai berikut :

CREATE DATABASE `smk_pwr`;

Gambar 4.1 Membuat Database smk_pwr 4.1.2 Implementasi Program

Tahapan Implementasi merupakan tahap penerapan dari sistem agar siap untuk

dioperasikan atau dijalankan. Tahap implementasi ini merupakan tahap penterjemahan

rancangan tabel kedalam satu bahasa pemrograman, salah satunya adalah bahasa

pemrograman php.

Kode program untuk koneksi ke database koneksi.php:

<?php $server = "localhost"; $username = "root"; $password = ""; $database = "smk_pwr"; // Koneksi dan memilih database di server

11  

mysql_connect($server,$username,$password) or die ("Koneksi gagal"); mysql_select_db($database) or die("Database tidak bisa dibuka"); ?>

4.1.3 Implementasi Proses Pengolahan Data Implementasi proses pengolahan data merupakan proses penginputan data yang

dilakukan oleh admin untuk melakukan manipulasi data.

4.1.4 Manual Instalasi 4.1.4.1Instalasi Server

Software yang diinstal sebagai server adalah XAMPP.

Gambar 4.2 Proses Instalasi XAMPP

Setelah proses instalasi selesai dapat ditampilkan halaman control panel XAMPP.

Kemudian klik tombol Start pada Apache dan MySQL. Untuk mencoba software yang telah

diinstal dapat dibuka di browser dgn alamat http://localhost.

Gambar 4.3 Control Panel XAMPP

12  

Gambar 4.4 Halaman Web XAMPP

Setelah semua proses instalasi selesai, database dapat dibuat melalui phpMyAdmin.

Nama database diisikan di kolom MySQL localhost kemudian klik create. Jumlah table serta

jumlah field diisi sesuai dengan kebutuhan.

Gambar 4.5 Halaman phpMyAdmin

Semua file-file program yang dibuat harus berdirektori di lokasi instalan XAMPP.

Biasanya destinasi direktori hasil instalan mengarah ke C:\xampp. Kemudian file-file

disimpan di folder htdocs. File-file yang dibuat dapat dipanggil melalu browser dengan alamat

http://localhost/nama_program.

4.1.4.2 Mekanisme Upload Setelah semua tahap telah selesai, langkah terakhir adalah melakukan proses upload

ke web server di internet. Namun proses ini tidak mudah karena kita memerlukan domain

dan pemilihan hosting. Setelah proses itu dilakukan baru kita dapat meng-upload file ke

13  

server hosting. Dalam meng-upload tentu saja harus mencari server yang dapat menangani

situsnya. Ada dua jenis server saat ini yaitu, server gratis dan non gratis.

1. Mengupload Database Login terlebih dahulu pada account hosting dengan cara membuka control panel

domain, yaitu www.smkn4purworejo.sch.id/cpanel

Gambar 4.2 Tampilan Login cpanel

Klik pada link menu MySQL Databases

Gambar 4.3 Tampilan Menu cPanel

2. Membuat database beserta username dan password

14  

Pilih Add Mysql Database, kemudian akan muncul tampilan seperti dibawah ini.

Gambar 4.4 Tampilan MySQL Database

ADD pada add user To Database. Kemudian muncul tampilan seperti di bawah ini

Gambar 4.5 Tampilan Add User

15  

3. Setelah membuat database, kenudian masuk ke halaman PhpMyAdmin

Gambar 4.6 Tampilan PhpMyAdmin

4. Kemudian pilih menu import dan pilih file database yang akan di uplod

Gambar 4.7 Tampilan Menu Import

5. Upload File Untuk mengupload file kita bisa memilih cara yang berbeda yaitu dengan File Manager

di Kloxo atau melalui FTP (File Transfer Protokol). Gambaran di bawah ini akan menjelaskan

cara mengupload melalui FTP (File Transfer Protokol).

Membuka aplikasi FileZila, pada tampilan ini harus mengisi Host, Username,

Password.

Gambar 4.8 Tampilan Filezilla

16  

Pada tampilan di atas klik Quickconnect, kemudian Upload file yang akan diupload dari

local computer dengan cara klik kanan pada file kemudian upload.

Gambar 4.9 Tampilan Saat Upload File di Filezilla

4.2 Error Testing

Error testing merupakan pengencekan website pada browser, apakah website berjalan

dengan baik dan pada browser atau tidak

Gambar 4.10 Tampilan Menu Profil

4.3 Kelebihan dan Kelemahan Web

17  

Dari semua file-file *.php, *.css, dan *.js di atas, akhirnya program dapat diselesaikan.

Dan dari pengujian program dapat disimpulkan bahwa program memilki kelebihan dan

kelemahan. Berikut kelebihan dan kelemahan website SMK N 4 Purworejo :

4.4.1 Kelebihan 1. Siswa dan Guru dapat mengirimkan berita apapun yang akan ditampilkan di website

sekolah setelah mendapatkan persetujuan dari admin.

2. Password dilengkapi dengan enkripsi sebagai keamanan.

4.4.2 Kelemahan 1. Website ini belum bisa memberikan layanan untuk mengingat password apabila guru atau

siswa kehilangan password.

2. Fungsi tambah halaman masih bersifat semi manual, maksudnya terdapat fungsi tambah

halaman tetapi dalam pemasangan link halaman masih dilakukan secara manual.

5. Kesimpulan Dari hasil perancangan, pembuatan dan implementasi program, maka dapat

disimpulkan bahwa tujuan membuat dan menganalisis website yang baik sebagai sarana

yang bisa memberikan informasi mengenai SMK N 4 purworejo telah tercapai, antara lain

sebagai berikut:

a. Website ini dapat digunakan sebagai media promosi dan belajar bagi SMK N

Purworejo.

b. Website sebagai media informasi bagi SMK N 4 Purworejo sehingga mendukung

terciptanya proses penyampaian informasi.

c. Pengunjung dapat mengisi buku tamu untuk memberikan saran dan kritik yang

membangun untuk kemajuan SMK N 4 Purworejo.

18  

19  

DAFTAR PUSTAKA

Abdul Kadir , “Buku Web Dinamis Menggunakan PHP. “ http://dc110.4shared.com/doc/6oDZP2uP/preview.html, (diakses tanggal 14 juni 2011)

Abdur Rahim , “PHP.” http://www.scribd.com/doc/7609606/php, (diakses tanggal 14 juni 2011)

Hartono, Jogiyanto, 2005. “Analisis dan Desain”, Penerbit Andi, Yogyakarta.

Kristanto, Andri, 2003,” Perancangan Sistem Informasi dan Aplikasinya”, Gava Media ,Yogyakarta

Marlina, Linda, “Sistem Basis data”, Andi Offset, Yogyakarta

Purbo, O.W, 2002 (et al) “Buku Pintar Internet TCP/IP”, PT Elex Media Komputindo, Jakarta

Tim Dosen, 2009. Pedoman Penyusunan Proposal Penelitian dan Laporan Tugas

Akhir, STMIK AMIKOM YOGYAKARTA