jurnal kuliah kerja nyata
TRANSCRIPT
JURNAL KULIAH KERJA NYATA
MEMBANGUN WEBSITE SMK NEGERI 1 BANTUL
YOGYAKARTA
Disusun oleh :
Tim KKN-PPL UNY
SMK Negeri 1 Bantul
2010
ABSTRAK
Media internet bukanlah hal yang asing lagi, hampir semua orang sudah dapat
mengaksesnya, bahkan kita sudah tidak memerlukan computer, karena internet dapat
dibuka melalui telepon genggam di manapun dan dari manapun.
Sebuah tempat pelayanan publik seperti sekolah, memerlukan media komunikasi
kepada masyarakat luas sebagai wujud bahwa sekolah betul-betul memiliki fungsi
sosial sehingga sekolah dapat “menjual” layanannya secara terbuka, dalam arti bahwa
setiap saat masyarakat dapat memperoleh informasi tentang sekolah dan segala
aktifitasnya. Hal ini sangat penting, mengingat bahwa dalam era global, media
layanan publik harus memiliki informasi yang mudah diakses khususnya oleh
pengguna layanan tersebut dan masyarakat pada umumnya. Salah satu media untuk
menyampaikan informasi tersebut adalah melalui internet, selain dapat menggunakan
jasa media telekomunikasi berupa telepon dan bulletin sekolah.
SMK Negeri 1 Bantul adalah sebuah sekolah dengan standar mutu
internasional, sehingga penggunaan internet adalah hal yang sangat wajar di sekolah
ini. Melalui fasilitas hotspot area, kita dapat mengakses internet di lingkungan
sekolah ini, bahkan setiap ruang sudah terhubung dengan jaringan yang menuju ke
sebuah server, sekolah ini juga sudah memiliki alamat web yang dapat diakses
masyarakat melalui www.smkn1bantul.sch.id/ , dengan konsep desain dan materi
yang baik, maka para pengunjung situs tersebut akan mudah mendapatkan informasi
tentang sekolah sesuai dengan kebutuhan mereka. Oleh karena itu kami merancang
sebuah program untuk membangun web tersebut supaya lebih dinamis dan memiliki
materi yang sesuai dengan kebutuhan masyarakat.
PENDAHULUAN
Era informasi sudah beralih masa, dari era manual menuju era digital, semua
informasi dapat diperoleh serba mudah, bahkan begitu mudahnya, orang tidak harus
bangun dari tempat tidurnya hanya untuk dapat mengakses iformasi yang ia
butuhkan. Dewasa ini, internet merupakan sebuah revolusi era telekomunikasi yang
sangat berperan dalam ikut memajukan dunia pendidikan di Indonesia, karena murid,
wali dan masyarakat umum dapat memperoleh informasi secara mudah dan cepat,
demikian pula pihak sekolah dapat dengan mudah menyampaikan informasi kepada
masyarakat.
Sebagai sekolah berstandar internasional, SMKN 1 Bantl sudah
mengaplikasikan website (alamat situs) sebagai media komunikasi anatara sekolah
dengan warga lingkungan pembelajar. Melalui internet, SMKN 1 Bantul dapat
menyajikan banyak informasi perkembangan sekolah dan aktifitasnya, dan menjadi
sebuah media komunikasi yang memudahkan para warga lingkungan pembelajar di
sekolah tersebut.
Sejauh ini, masih ada beberapa hal yang memang harus diperbaiki dalam penyajian /
tampilan web tersebut. Kekurangan yang ada antara lain adalah, kurangnya materi
yang menarik minat pengunjung situs, tautan (link) yang kurang teratur dan desain
tampilan web yang kurang menarik minat pengunjungnya.
Sebagai ujung tombak komunikasi massa, maka diperlukan sebuah web yang
memiliki materi yang lengkap dan mudah dipahami penggunanya terutama warga
lingkungan pembelajar.
PEMBAHASAN
A. Tujuan
Menciptakan sebuah media informasi untuk sekolah
B. Persiapan
Program ini dilaksanakan pada tanggal 1 Agustus sampai dengan 10 Agustus
2010, kami mempergunakan sistem website yang digunakan adalah Content
Management System (CMS) BALITBANG, karena sistem website ini adalah
standar sistem website yang ditetapkan oleh Dikti
(http://www.balitbang.depdiknas.go.id/) untuk di implementasikan pada sekolah –
sekolah. Untuk itu, rumusan yang akan kami lakukan adalah :
1. Menginstall CMS Balitbang di lokal komputer
2. Mendesain tampilan website CMS Balitbang sesuai dengan citra sekolah
SMK Negeri 1 Bantul.
3. Merubah coding-coding sistem website sesuai dengan kebutuhan.
4. Menguploadnya ke dalam server website www.smkn1bantul.sch.id
Melakukan promosi website www.smkn1bantul.sch.id di forum situs
http://forum.kajianwebsite.org/ dan juga situs jejaring sosial Facebook.
Persiapan dimulai dengan menyiapkan hal-hal yang diperlukan untuk
membangun website. Hal-hal yang dibutuhkan untuk memulai program kegiatan
KKN ini adalah sebagai berikut :
1. CMS Balitbang yang di download dari situsnya http://kajianwebsite.org/
2. Sebuah komputer PC dengan layar monitor LCD
3. Hosting dan domain www.smkn1bantu.sch.id
4. Softwere Adobe Dreamwaver CS3
5. Softwere Adobe Photoshop CS2
6. Softwere Artister
7. XAMPP
8. Softwere Swish
9. Softwere Crimsoon Editor
10. Softwere Macromedia Flash
11. Softwere FTP Filezila
12. Softwere Mozila Firefox
13. Softwere Google Chrome
14. Koneksi internet
15. Foto-foto untuk bahan mendesain tampilan website
16. Kontent-kontent website yang akan dipublikasikan.
Selain itu, persiapan yang dilakukan adalah analisis kebutuhan untuk
mengembangkan website dan mendesignnnya. Mulai dari berdiskusi dengan guru
yang bersangkutan dan mulai merancang rancangan awal untuk tampilan design
website serta pemilihan warna yang cocok untuk citra sekolah.
C. Pelaksanaan
1. Langkah awal yang dilakukan adalah melakukan installasi CMS Balitbang
yang telah di download sebelumnnya di http://kajianwebsite.org/ versi yang
terbaru. Proses ini memerlukan softwere server lokal yaitu XAMPP. Proses
installasi CMS Balitbang ini sangatlah mudah, hanya dengan meng-copy
seluruh file website di folder htdocs pada XAMPP, membuat databases secara
manual di PHPMyadmin, mengedit file config.php di direktori ./lib/
menggunakan softwere Crimson editor dan menampilkannnya pada browser,
bisa Mozilla Firefox atau Google Chrome. Saat mengedit file config.php di
direktori ./lib/ yang perlu dirubah hanyalah sintax dibawah ini.
<?php$webhost = "SMKN 1 Bantul"; (BARIS SINTAX YANG DIRUBAH)$webmail = "[email protected]"; (BARIS SINTAX YANG DIRUBAH)$nmsekolah = " SMKN 1 Bantul "; (BARIS SINTAX YANG DIRUBAH)$almtsekolah = " Jln. Parangtritis Km. 11, Sabdodadi, Bantul, Yogyakarta "; $jum_spp = "125000";$jum_dsp = "3000000";$dbhost = "localhost"; (BARIS SINTAX YANG DIRUBAH)$dbuser = "root"; (BARIS SINTAX YANG DIRUBAH)$dbpasswd = "xxxxxxxxxxx"; (BARIS SINTAX YANG DIRUBAH)
$dbname = "contoh"; (BARIS SINTAX YANG DIRUBAH)$dbprefix = "t_";$alan = "../temp/korniawan/"; (BARIS SINTAX YANG DIRUBAH)$email1 = "[email protected]"; (BARIS SINTAX YANG DIRUBAH)$email2 = "[email protected]"; (BARIS SINTAX YANG DIRUBAH)$tbcolor = "#2492AB";$tbcolor2 = "#88CBDA";$tbcolor3 = "#85A5B7";$tbcolor4 = "#B1DAF1";$noacak = "82";$kolom="2";?>
2. Setelah itu, membuat sebuah folder baru yang diberi nama korniawan di
direktori ./temp/. Folder baru ini untuk menempatkan design baru yang akan
dibuat. Setelah itu, basic design website akan dibuat menggunakan softwere
Artisteer. Seperti gambar dibawah ini.
Gambar 1 . Tampilan softwere Artisteer
Dengan software itu, kita akan membuat desain dasar web dengan 2 kolom
modul, 1 kolom isi (konten), 1 kolom top menu, 1 kolom footer dan 1 kolom
header. Racangannya seperti gambar dibawah ini.
Header
Menu
Modul
KiriKonten
Modul
Kanan
Footer
Gambar 2. Rancangan tampilan website
Setelah menciptakan rancangan seperti gambar di atas menggunakan
Artisteer, kita melakukan export atau pada Artisteer kita menekan CTRL + E.
Setelah itu, Artisteer akan menciptakan file template website yang siap untuk
digunakan. File tersebut kita copy-kan ke folder ./temp/korniawan.
3. Tahap selanjutnya adalah mengeditnya menggunakan softwere Adobe
Dreamwaver CS3, Adobe Photoshop CS2. Dengan 2 softwere ini, kita akan
merancang warna dan juga gambar untuk diterapkan pada design website
tersebut. Untuk mengedit warna, kita akan merubah file style.css yang
terdapat pada direktori ./temp/korniawan/style.css. Lihat seperti gambar
dibawah ini.
Gambar 3. Tampilan Dreamwaver saat melakukan editing CSS
Dalam proses editing CSS ini yang perlu di tekankan adalah pada pengaturan
warna, posisi image, background, font, dan juga ukuran tampilan design.
Pemilihan warna pada design website ini lebih dominan biru. Karena sekolah
SMK Negeri 1 Bantul sangat identik dengan warna biru, mulai dari logo
sekolah, seragam hingga warna bangunan sekolah.
Setelah melakukan editing CSS menggunakan Adobe Dreamwaver CS3,
dilanjutkan dengan membuat header, footer dan gambar-gambar lainnnya
menggunakan Adobe Photoshop CS2. Lihat gambar dibawah ini.
Gambar 4. Tampilan saat bekerja di Adobe Photoshop
4. Karena design ini sudah direncanakan akan menggunakan file flash pada
bagian header, maka kami membutuhkan ukuran header 974px x 300px.
Untuk itu, kami perlu merubah ukuran header pada file fungsi_gabung.php di
direktori ./fungtions/fungsi_gabung.php dengan menggunakan softwere
Crimson Editor.
Pada file tersebut, kami fokuskan mengatur sintax pada pengaturan ukuran
header atas. Kami merubah ukuran yang ada menjadi ukuran yang kita
inginkan, yaitu 974px x 300px. Seperti terdapat pada gambar dibawah :
Gambar 5. Tampilan saat bekerja dengan Crimson Editor.
Sintax yang perlu di edit seperti dibawah ini :
function banneratas() {
include "koneksi.php";
$sql="select id from t_gambaratas ";
$i=1;
if(!$query=mysql_query($sql)) die ("Pengambilan gagal1 gambar atas");
while($rows = mysql_fetch_array($query)) {
$photo[$i]=$rows[id];
$i++;
}
$jum = count($photo);
$n = rand(1,$jum);
$sql="select * from t_gambaratas where
id='".mysql_real_escape_string($photo[$n])."'";
if(!$query=mysql_query($sql)) die ("Pengambilan gagal1 gambar atas");
if ($row=mysql_fetch_array($query)) {
if ($row[jenis]=='swf') {
$atas ='<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-
444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/
swflash.cab#version=7,0,19,0" width="974" height="300" title="'.$row[judul].'">
<param name="movie" value="../images/banneratas/gbanner'.$row[id].'.swf">
<param name="quality" value="high">
<embed src="../images/banneratas/gbanner'.$row[id].'.swf" quality="high"
pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-
shockwave-flash" width="974" height="300"></embed>
</object>';
}
else {
$atas = "<img src='../images/banneratas/gbanner$row[id].
$row[jenis]' title='$row[judul]' width='974' height='300'>";}
}
return $atas;
}
5. Selanjutnya, kita akan membuat file flash menggunakan softwere Swish.
Tetapi sebelumnnya kita harus menyiapkan terlebih dahulu gambar-gambar
yang akan ditampilkan pada Adobe Photoshop CS2. Inilah tampilan saat
bekerja di softwere Swish :
Gambar 6. Tampilan saat bekerja di softwere Swish
Setelah desain flash telah dikombinasikan pada softwere Swish, kami
menyimpannya dalam format file SWF dan menyimpannya pada direktori
./images/banneratas/. Dengan nama file gbanner1.swf.
6. Selanjutnya kami akan membuat tulisan footer pada design website. Dengan
melakukan editing file index.tpl menggunakan softwere Adobe Dreamwaver
CS3 yang terdapat pada direktori ./temp/korniawan/index.tpl.
7. Untuk menampilkan hasil kerja kami di browser, dapat kita buka
menggunakan browser Mozila Firefox atau Google Chrome dengan
menggunakan fasilitas XAMPP server, dan hasilnya seperti tampilan dibawah
ini.
Gambar 7. Tampilan website akhir
8. Tahap akhir adalah menguploadnnya pada server online dengan domain
www.smk1bantul.sch.id dan mempromosikannnya. Proses upload file dapat
menggunakan fasilitas Cpanel pada hosting server atau dapat menggunakan
softwere FTP Filezilla. Namun untuk mengexport database hanya dapat
dilakukan dengan menggunakan fasilitas Cpanel pada hosting server.
Gambar 8. Tampilan Cpanel pada hosting server
Gambar 9. Tampilan softwere FTP Filezilla
Promosi website ini dilakukan di Facebook dan situs forum yang membahas
tentang CMS Balitbang ini di alamat http://forum.kajianwebsite.org/
D. Analisis Hasil
Adapun hasil dari program kegiatan KKN individu ini dapat dianalisis
sebagai berikut ini :
1. Sekolah memiliki media informasi yang dapat diakses oleh masyarakat luas
kapan saja dan dimana saja.
2. Selalu dapat mengupdate berita mengenai kegiatan sekolah dengan
menulisnya pada media website ini.
3. Turut membantu proses belajar mengajar, karena CMS Balitbang dirancang
juga untuk penyampaian materi pembelajaran secara online.
4. CMS balitbang juga dirancang untuk memberikan informasi mengenai guru-
guru dan kepegawaian disekolah.
5. Dengan memiliki website, merupakan sebuah kebanggaan atau perestise bagi
sekolah tersebut.
6. Dengan memiliki website, sekolah tersebut dapat lebih dikenal oleh kalangan
masyarakat luas, khususnya di dunia maya.
Dengan memiliki website, sekolah telah memenuhi salah satu syarat untuk
menjadi sekolah bertaraf internasional dan dapat memudahkan proses komunikasi
dengan lingkungan pembelajar dan masyarakat luas yang berkepentingan
terhadap aktifitas sekolah ini.
PENUTUP
A. Simpulan
Peningkatan mutu layanan pendidikan memang tidak hanya melalui
peningkatan kualitas guru dan karyawan, lingkungan pembelajaran juga harus
ditingkatkan kerapian dan efektifitasnya supaya menjadi tempat belajar yang betul-
betul nyaman untuk masyarakat.
Ketercapaian kualitas sekolah sangat didukung oleh kemudahan akses
masyarakat kepada sekolah tersebut, baik informasi dan kebutuhan nonfisik lain. Hal
ini mendorong sebuah sekolah berstandar internasional harus peka terhadap kemajuan
dan kebutuhan jaman. Penggunaan wesite (alamat situs) memang sudah wajib untuk
sekolah setaraf SMKN 1 Bantul, karena kebutuhan komunikasi antar warga
pembelajar di lingkungan ini sangat tinggi, akses informasi yang dibutuhkan
masyarakat-pun akan dapat mendorong citra sekolah ini menjadi lebih baik lagi.
Melalui website yang kami bangun, semoga dapat memudahkan atau
setidaknya melancarkan alur komunikasi antara pihak sekolah dengan pengguna jasa
layanan pendidikan (murid, wali dan masyarakat).
Seluruh aktifitas yang ada di SMKN 1 Bantul dapat dengan mudah terangkum dan
ditampilkan pada www.smk1bantul.sch.id, sehingga murid dan masyarakat dapat
mengetahui pengumuman-pengumuman penting seperti : jadwal sekolah, nilai ujian,
penerimaan siswa baru, kalender pendidikan, bahkan orang tua murid akan memiliki
forum khusus untuk berdiskusi dengan wali kelas melalui website ini.
B. Saran
Saran kami dalam penggunaan dan pemberdayaan website ini adalah :
1. Meningkatkan pemeliharaan dan aktifitas web ini dengan menampilkan
berita-berita atau pengumuman terbaru untuk menjalin komunikasi intensif
dengan masyarakat.
2. Sebaiknya guru dan karyawan juga memiliki forum dialog dengan warga
sekolah.
3. Sosialisasi pada siswa dan masyarakat harus lebih ditingkatkan, supaya
mereka merasakan manfaat menggunakan fasilitas ini.
C. Daftar Pustaka
1. http://www.balitbang.depdiknas.go.id/
2. www.smkn1bantul.sch.id
3. http://forum.kajianwebsite.org/