31

BAB IV

PEMBAHASAN

A. Gambaran Umum Aplikasi

Berdasarkan observasi, wawancara, dan data-data yang diperoleh, maka

pembuatan website profil SDN Pacar sewon bantul ini menitikberatkan pada

aspek pendidikan dan informasi. Hal ini ditunjukkan dengan adanya beberapa

artikel yang berguna bagi para siswa untuk lebih mengembangkan

pengetahuannya. Dan juga, dalam web profil ini memberikan informasi sedetail

mungkin tentang hal-hal yang berkaitan dengan pendidikan di SDN pacar Sewon

bantul.

Dengan pertimbangan pada kemudahan pembuatan, kemudahan dalam

manajemen isi, dan keamanan datanya, maka pembuatan web profil SDN Pacar

ini menggunakan Content Management System (CMS) Joomla_15.2 Stable-

Full_Package sebagai dasar sistemnya dengan penambahan modul-modul dan

komponen-komponen sesuai kebutuhan dari SDN Pacar

B. Identifikasi Kebutuhan Perangkat Keras (Hardware)

Spesifikasi hardware yang digunakan dalam perancangan dan pembuatan

website SDN Pacar adalah:

a. Processor Intel PentiumT4200 2,0GHz.

b. RAM 1GB DDR3.

c. VGA intel GMA4500M.

d. SoundCard Onboard.

32

e. Harddisk Drive 250 GB.

f. DVD-RW.

g. Printer cannon IP100.

C. Identifikasi Kebutuhan Perangkat Lunak (Software)

Perangkat lunak yang digunakan untuk membangun sistem aplikasi

web profil SDN Pacar adalah sebagai berikut :

1. Perangkat Media Simpan Data

Proses pembuatan aplikasi web profil SDN Pacar pada media simpan data

menggunakan MySQL, karena mempunyai kapasitas simpan yang cukup

besar, berjalan baik pada website.

2. Perancangan Aplikasi Desain

Untuk mempermudah proses pembuatan desain dan layout pada banner dan

template maka kami gunakan aplikasi Adobe Photoshop CS3 dan

macromedia dreamweaver 8. Software ini merupakan tools pembuat desain

interface dan web editor yang baik.

3. Perancangan Pembuat Aplikasi

Aplikasi yang digunakan untuk membuat website profil ini adalah CMS

Joomla! Versi 2.0. Dan sebagai web servernya, digunakan XAMPP server.

4. Sistem Operasi

Sistem operasi yang digunakan dalam pembuatan web profil SDN Pacar ini

adalah Microsoft Windows XP SP3.

33

5. Browser

Pada pembuatan web profil SDN Pacar ini, menggunakan browser Mozilla

Firefox 3.0.15.

D. Aturan bisnis dalam web profil

Aturan bisnis di web profil ini adalah mengenai siapa saja yang berperan

aktif dalam menggunakan web profil, yaitu :

1. User

User berperan sebagai pengunjung seperti siswa, guru,orang tua /wali siswa

dan pihak luar sekolah yang ingin melihat dan mengunjungi web profil secara

umum.

Masing-masing user memiliki perbedaan kebutuhan terhadap web profil ini yaitu :

a. Siswa : informasi tentang kalender akademik, prestasi-prestasi apa saja yang

telah dicapai sekolah, dan galeri foto.

b. Guru : informasi tentang data- data guru, forum antar guru / karyawan,galeri

foto dan semua profil tentang sekolah.

c. Pihak luar sekolah : informasi tentang pr0fil sekolah yang terdiri dari

Visi/misi, fasilitas,prestasi.

d. Orangtua/wali siswa : informasi even kalender akademik agar dapat

mengetahui kesiatan siswa-siswinya disekolah.

34

2. Admin

Admin berperan sebagai administrator seperti guru, Kepala Sekolah SDN

Pacar tugasnya untuk mengedit atau mengupload artikel, merancangan dan

mengimplementasi Pembangunan Web apakah akan alur kerja web tersebut akan

berjalan dengan baik atau tidak, dan mendefinisikan struktur kerangka tampilan

website serta posisi letak dari komponen-komponen dan modul website yang ada

pada web profil itu sendiri.

35

E. Rancangan Tabel Database

Pada perancangan Database ini tidak akan menampilkan keseluruhan table

dalam database joomla CMS, akan tetapi hanya menampilkan racangan table dari

modul yang akan dibuat yakni modul data guru dan karyawan.

Berikut ini adalah spesifikasi table untuk pembuatan modul data guru dan

karyawan .

Tabel ini digunakan untuk menyimpan data-data guru dan karyawan SDN

Pacar.

Table 4. jos_data_guru

Field Tipe Data

Id int(11)

Nip varchar(50)

Nama varchar(50)

Jabatan varchar(255)

Alamat varchar(100)

Telepon Text

Status int(11)

36

F. Perancangan dan Implementasi Pembangunan Web

Pada tahap perancangan dan pembuatan web menggunakan CMS berbeda

dengan pembuatan web pada umumnya. Dengan CMS tidak perlu membuat

rancangan proses, rancangan database dan lain sebagainya, karena CMS

merupakan aplikasi siap pakai sehingga seorang web master cukup merancang

tampilan User Interface, serta me-manage Content (isi) sesuai dengan kebutuhan

sistem yang akan dibangun. Untuk menambah atau mengurangi fasilitas situs

yang perlu dilakukan adalah tahap install dan uninstall component atau modul.

Karena dalam CMS, penambahan atau pengurangan component dan modul tidak

berpengaruh terhadap isi website secara keseluruhan.

1. Analisa Kebutuhan yang diinginkan User.

Dengan kondisi SDN Pacar ketika melakukan Kerja Praktik (KP), maka

sesuai dengan latar belakang masalah dan rumusan masalah, maka penulis

berupaya membuat sebuah media online sebagai sarana pengenalan profil SDN

Pacar serta penyampaian beritanya kepada kalangan umum yaitu sebuah web

profil SDN Pacar. Web tersebut memiliki navigasi menu standar sehingga seluruh

pengunjung dapat melihat informasi yang dibutuhkannya. Berikut isi dari menu

utama (main menu) dari web SDN Pacar :

a. Profil Sekolah,berisikan tentang profil umum SDN Pacar secara

keseluruhan terdiri dari :

1) Visi, berisi tentang visi dari SDN pacar itu sendiri

2) Sejarah, berisi tentang sejarah berdirinya SDN pacar dan para

pendiri SDN Pacar itu sendiri.

3) Tujuan, berisikan tentang misi dari SDN Pacar.

37

4) Fasilitas, pemberitahuan kepada khalayak fasilitas- fasilitas apa

saja yang ada di SDN pacar.

5) Prestasi, berisikan tentang prestasi apa saja yang telah di ukir

oleh peserta didik SDN Pacar.

6) Kerjasama, berisi tentang kerjasama SDN pacar untuk

menunjang dalam proses belajar mengajar.

7) Pengelola, pengelola dari SDN Pacar.

b. Kalender Akademik, berisikan berita terbaru mengenai informasi

SDN Pacar.

c. Galery Photo, Menyediakan Photo-photo kegiatan SDN Pacar yang

bisa dilihat oleh User .

d. Data Guru, berisikan data-data guru lengkap dengan alamat.

e. Forum, digunakan untuk saling bertukar pendapat .

f. Buku Tamu, Fasilitas ini digunakan untuk daftar para pengunjung

website. Pengunjung dapat mengisi pesan singkat dengan memasukkan

nama, email, dan juga dapat melakukan polling secara langsung.

g. Download, berisikan file-file informasi dan materi sekolah yang diberi

fasilitas untuk bisa mendownload file tersebut supaya siswa/i, masyarakat,

dan pihak sekolah bisa mendapatkan file tersebut dengan mudah.

h. Pencarian, Salah satu fasilitas yang dimiliki oleh sebuah halaman web

adalah halaman pencarian. Dengan fasilitas ini, pencarian kata akan lebih

mudah dilakukan.

i. Polling,salah satu fasilitas yang digunakan untuk ajang jajak pendapat.

38

2. Rancangan Tampilan website.

Pada rancangan tampilan website ini, didefinisikan struktur kerangka

tampilan website serta posisi letak dari komponen-komponen dan modul website

yang ada. Berikut kerangka tampilan website SDN Pacar yang dibangun :

Gambar 3. Kerangaka website SDN Pacar

39

Pada kerangka tampilan yang telah dibuat didefinisikan beberapa area yang

akan digunakan pada tampilan layout sebagai berikut :

a. Gambar Header.

Di bagian ini diletakkan gambar SDN Pacar sebagai identitas dari website

ini merupakan hal penting yang seiring kali pertama dilihat oleh

pengunjung. Jadi header tersebut dibuat sedemikian rupa sehingga

tampilannya mampu menarik perhatian pengunjung. Terletak di posisi

paling atas dalam sebuah halaman web.

b. Info Terbaru

Di bagian ini berisi info-info terbaru yang diisi oleh admin dan akan tampil

bergantian pada saat pengunjung melakukan pergantian halaman atau me-

refresh halaman.

c. Menu dan Modul.

Di bagian ini diletakkan menu navigasi dan addons (modul dan komponen

tambahan) yang dipasangkan pada website ini.

d. Login

Fasilitas ini digunakan untuk identifikasi pengguna. Pengguna dapat

melakukan pendaftaran apabila belum menjadi anggota, atau dapat

langung login dengan memasukkan nama pengguna dan password apabila

telah terdaftar. Dalam halaman login ini, system juga dapat melakukan

pengingatan kepada pengguna apabila lupa dengan passwordnya. Dengan

cara memasukkan nama pengguna dan alamat email yang telah

dicantumkan pada saat pendaftaran awal.

40

e. Link Berita/Info Terbaru.

Di bagian ini berisi link-link terhadap berita-berita yang baru di upload

oleh admin.

f. Populer Link.

Di bagian ini berisi link-link berita atau info yang paling sering dilihat oleh

user.

g. Content Utama.

Bagian ini digunakan untuk meletakkan dan menampilkan content (isi)

dari website.

h. Polling

Di dalam web profil ini terdapat fasilitas dimana pengunjung dapat

memilih jawaban dari beberapa opsi yang diberikan sesuai dengan jenis

pertanyaan yang diberikan. Fasilitas ini dapat digunakan tanpa harus

terdaftar sebagai anggota.

i. Kalender

Pemberitahuan tanggal ini merupakan hal penting, karena setiap kali kita

browsing di internet sering lupa akan tanggal harinya.

41

3. Perancangan Tampilan rekayasa modul dan content

Berikut ini adalah rancangan tampilan komponen data guru:

a. Input Data Guru

Gambar 4. Design Input Data Guru

b. List Data Guru

Gambar 5. Design List Data Guru

Data Guru

Nama :

Nip :

Jabatan :

Alamat :

Telepon :

Submite Cancel

List Data GuruNama NIP Jabatab Alamat

42

4. Alur Aplikasi Website (Site Map).

Alur Aplikasi Website adalah alat bantu yang digunakan untuk membuat

spesifikasi program, atau merupakan alat pengembangan system dan teknik

dokumentasi program yang menggambarkan hubungan dari fungsi-fungsi di

system.

Gambar 7 .Struktur Navigasi Web Profil SDN pacar.

43

G. Konfigurasi CMS

1. Rekayasa Perubahan Template.

Sebagai sebuah CMS, Joomla menggunakan sistem templates terhadap

tampilannya. Template merupakan kerangka tampilan web secara keseluruhan.

Kerangka dibuat sedemikian rupa sehingga membentuk sebuah desain dengan

tampilan yang unik.

Dalam rekayasa tampilan, penulis menggunakan template

themza_j15_12 yang di download dari situs www.joomla24.com. File

template yang di download dari website tersebut berupa file js_ template

themza_j15_05. Setelah di download, file tersebut kemudian di install melalui

halaman admin,kemudian login sebagai administrator dengan mengisi

username dan password dan memilih menu Installer, Templates, Site, adapun

tampilan templatenya

Gambar 8. Install Template Site

44

Untuk halaman upload file tampilannya sebagai berikut :

Gambar 9. Tampilan menu Installer Templates – Site

”Browse” file js_ template themza_j15_05 dan upload file tersebut

sampai instalasi template selesai. Kemudian memilih menu Site ,

Template Manager, Site Templates. Kemudian akan muncul halaman

Template Manager sebagai berikut :

Gambar 10. Tampilan Template Manager

45

Pilih template themza_j15_12 sebagai default dengan cara mencentang

template themza_j15_12, kemudian klik ikon default di samping kanan

atas. Maka akan tampil default template Joomla sebagai berikut :

Gambar 11. Tampilan Default template themza_j15_12

Agar perubahan atau rekayasa agar template tersebut sesuai dengan

rancangan yang telah dibuat, yaitu :

Dalam rekayasa Header dengan melakukan sedikit perubahan

tehadap file template_css.css yang terletak pada folder C:\xampp\

htdocs\jomla\templates\themza_j15_12\css. Pada file ini penulis

merubah script pada baris seperti di bawah ini

Listing 1. Listing Program sebelum rekayasa header

banner1{background: #FFFFFF url(../images/banner1.jpg) left

top no-repeat;}.banner2{

background: #FFFFFF url(../images/banner2.jpg) left top no-repeat;}.banner3{

background: #FFFFFF url(../images/banner3.jpg) left top no-repeat;}.banner4{

background: #FFFFFF url(../images/banner4.jpg) left top no-repeat;}

46

Di dalam file template_css.css ini penulis merubah script standar

menjadi script berikut ini :

Listing 2. Listing Program sesudah rekayasa header

Untuk memanggil file image bg_h3.jpg yang berada pada direktori

(temlate/themza_j15_12\images\) yang akan ditampilkan pada area

layout header, dilakukan perancangan gambar dengan format yang

sama serta menyesuaikan ukuran gambar dengan ukuran aslinya yaitu

berukuran height:23px dan width:109px;.

Sehingga setelah dilakukan rekayasa tampilan, maka tampilan website

SDN pacar memiliki tampilan sebagai berikut :

Gambar 12. Tampilan template themza_j15_12 setelah dimodifikasi

banner1{

background: #FFFFFF url(../images/bannerjadi.jpg) left top no-repeat;}.banner2{

background: #FFFFFF url(../images/banner2.jpg) left top no-repeat;}

47

2. Konfigurasi Komponen

Komponen merupakan sebuah aplikasi yang berfungsi untuk

menambah nilai guna dari website Joomla. Diinternet banyak beredar

komponen yang dapat di-download secara gratis, tinggal disuaikan dengan

kebutuhan. Berikut daftar component yang tersedia dalam web joomla :

a. Akobook, komponen untuk me-manage daftar para pengujung.

b. Alert Messenger,komponen untuk menggunakan halaman yahoo.

c. Banner, komponen untuk me-manage banner/iklan.

d. Expose, komponen untuk menampilkan album photo menggunakan flash

player.

e. Extcal Calender, komponen untuk menampilkan kalender sekaligus event

yang telah diisi oleh user.

f. Mass Mail, komponen untuk email keseluruh member situs.

g. Polls, komponen untuk me-manage polling atau voting disitus.

h. Remository, komponen untuk me-menage file yang bisa digunakan untuk

fasilitas download.

i. Weblinks, komponen untuk mengkategorikan link-link favorit.

Dalam pembuatan website ini, ditambahkan komponen baru ke dalam

website, karena website yang dibuat membutuhkan tambahan komponen baru.

Komponen yang ditampilkan dalam website SDN Pacar adalah modul-modul

yang diinstall pada menu installer dan juga merupakan default yang dirubah

nama menu itemnya saja.

48

3. Komponen Module.

Seperti halnya komponen, modul juga merupakan salah satu bagian

penting dari Joomla. Modul dapat menampilkan aplikasi tambahan di dalam

website tanpa terlebih dahulu meng-klik sebuah menu. Inilah perbedaan

mendasar antara komponen dengan modul. Sebuah komponen tidak dapat

diakses tanpa dihubungkan dengan sebuah link menu. Berikut modul yang

ditampilkan dalam website SDN pacar :

a. Modul Main menu, untuk menampilkan pilihan tambahan.

b. Modul User menu, user menu agak mirip dengan main menu.

Perbedaannya terlihat jika pengunjung berstatus login.

c. Modul Other menu, secara default other menu mempunyai 3 item yaitu

mamboserver, mamboforge,dan administrator.

d. Modul Login form, untuk digunakan oleh member yang telah terdaftar

untuk login.

e. Modul Polls, untuk menampilkan daftar polling web.

f. Modul who’s online, untuk menampilkan nama user yang sedang online

pada saat itu.

g. Modul Kalender Kegiatan, untuk mencatat kegiatan atau event sekaligus

menampilkannya pada halaman kalender.

h. Modul Latest News, untuk menampilkan isi berita terbaru yang di upload

oleh admin.

i. Modul Top Menu, untuk menampilkan navigasi main menu.

j. Modul Search, untuk menampilkan kotak pencarian.

49

H. Konten dan Menu.

Kelebihan utama CMS adalah kemudahan dalam pengelolaan isi (content). Isi

yang dimaksudkan adalah berita atau artikel yang ditampilkan pada website.

Dalam Joomla, isi terbagi atas dua kelompok yaitu Static Content dan Dynamic.

1. Article Manager

Article Manager adalah sebuah content/berita/artikel yang sifatnya jarang

diubah, misalnya content tentang visi dan misi organisasi, profil, struktur

organisasi dan lain sebagainya. Sebuah content yang dibuat dalam model

Article Manager hanya bisa ditampilkan hasilnya melalui link menu.

2. Dynamic Content

Dynamic Content adalah content yang selalu berubah jumlah content-nya.

Dynamic Content memiliki content yang otomatis tampil di halaman

depan apabila telah di set publish.

Dynamic content pengelolaannya diolah berdasarkan section dan category.

Tujuannya adalah memudahkan dalam mengelola content yang banyak

jenis dan modelnya.

Section adalah kelompok utama sebuah dynamic content, sedangkan

category adalah bagian dari sebuah sebuah section. Sebuah section dapat

memiliki lebih dari satu satu category, namun tidak begitu sebaliknya.

Dalam pembuatan website SDN Pacar ini, dibuat section dan category

sebagai berikut :

Section : Info Terbaru, Link Berita

Category : Info-info SDN Pacar, Link Berita

50

I. Rekayasa Komponen Data Guru

Komponen Data Guru ini digunakan untuk memberikan informasi kepada para

pengunjung website tentang data guru dan karyawan yang bertugas di SD

Pacar. Komponen ini terdiri dari halaman public dan halaman administrator.

Halaman public digunakan untuk menampilkan data guru dan karyawan dari

tabel jos_data_guru yang mempunyai status publish. Pada halaman

administrator komponen data guru ini, terdapat beberapa fungsi untuk

memanajemen data guru dan karyawan. Adapun fungsi tersebut adalah

tambah, edit, delete, publish dan unpublish data guru.

Komponen Data Guru ini merupakan rekayasa dari komponen Testimonialku

yang telah diinstall. Berikut ini adalah beberapa hal mengenai komponen

Testimonialku sebelum direkayasa:

1. Struktur Tabel

Berikut ini adalah SQL dari tabel jos_testimonialku:

CREATE TABLE IF NOT EXISTS `jos_testimonialku` (

`id` int(11) NOT NULL auto_increment,

`firstname` varchar(50) NOT NULL,

`lastname` varchar(50) NOT NULL,

`website` varchar(255) NOT NULL,

`email` varchar(100) NOT NULL,

`testimonial` text NOT NULL,

`status` int(1) NOT NULL,

PRIMARY KEY (`id`)

51

)ENGINE = myISAM DEFAULT CHARSET =UTF8 AUTO_INCREMENT=1;

2. Tampilan Depan

Berikut ini adalah tampilan depan dari komponen Testimonialku:

Gambar 13. Tampilan Depan Komponen Testimonialku

52

3. Tampilan Utama Admin Komponen Testimonialku

Berikut ini adalah tampilan utama admin komponen Testimonialku

Gambar 14.Tampilan Utama Admin Komponen Testimonialku

53

4. Tampilan Input Komponen Testimonialku

Berikut ini adalah tampilan input komponen Testimonialku:

Gambar 15. Tampilan Input Komponen Testimonialku

Sedangkan beberapa proses yang dilakukan dalam merekayasa .komponen Data

Guru secara rinci adalah:

1. RekayasaTable Database

Berikut ini adalah SQL dari tabel jos_data_guru :

CREATE TABLE IF NOT EXISTS `jos_dataguru` (

`id` int(11) NOT NULL auto_increment,

`nama` varchar(50) NOT NULL,

`nip` varchar(50) NOT NULL,

`jabatan` varchar(255) NOT NULL,

`alamat` varchar(100) NOT NULL,

54

`telepon` text NOT NULL,

`status` int(11) NOT NULL,

PRIMARY KEY (`id`)

) ENGINE=MyISAM DEFAULT CHARSET=utf8

AUTO_INCREMENT=12 ;

2. Rekayasa Administrator Komponen Data Guru

Dalam membuat administrator modul data guru ini maka pertama kali

yang dilakukan adalah membuat file dan direktori yang dibutuhkan dengan

mengikuti struktur standar dari komponen joomla. Semua file dan direktori

untuk pembuatan modul data guru ini dijadikan satu paket dalam folder

induk yang bernama com_dataguru dan berada dalam direktori

joomla/administrator/components.

Berikut ini adalah source code dari masing file dalam pembuatan

modul data guru:

a. File admin.dataguru.php

<?phpdefined('_JEXEC') or die('Restricted access');if ( Joomlaku ) {

$document=& JFactory::getDocument();$document->addStyleSheet(

'components/com_dataguru/css/style.css', 'text/css' );} else {

global $mainframe;$mainframe->addCustomHeadTag( '<link rel="stylesheet"

href="components/com_dataguru/css/style.css" type="text/css" >' );}?>

<div id="element-box"><table class="adminform"><tr><td width="70%" valign="top">

<div id="cpanel"><div class="icon">

<a href="index.php?option=com_dataguru&task=add" style="height:auto;">

<img src="components/com_dataguru/images/add.png" />

55

<span style="font-weight:bold; font-size:14px;">Tambah Data Guru<br /><br />

</span></a>

</div>

</td></tr></table></div>

<?php

include_once(JPATH_BASE.DS."components".DS."com_dataguru".DS."includes".DS."dataguru.php");?>

Listing 3. Listing admin data guru

Listing $document->addStyleSheet(components/

com_dataguru/css/style.css', 'text/css' ); digunakan untuk

memanggil file style.css. File css ini berfungsi untuk mengatur layout

dan style komponen data guru agar memiliki tampilan yang rapid an

menarik.

Berikut ini adalah tampilan utama admin komponen Data Guru:

Gambar 16.Tampilan Utama Admin Komponen Data Guru

56

b. File dataguru.php

//query untuk menampilkan data guru$database->setQuery("select count(*) as tot from `#__dataguru` where 1");

$cnt = $database->loadObject();$total_page = ceil($cnt->tot/$limit2);$database->setQuery("select * from `#__dataguru` where

1 order by id desc limit ".$limit1.",".$limit2."");$items = $database->loadObjectList();

Listing 4. Query untuk menampilkan data guru.

Listing $database->setQuery("select count(*) as tot from `#__dataguru`

where 1"); adalah perintah SQL untuk menghitung jumlah data yang ada

dalam tabel jos_data_guru. Listing $database->setQuery("select * from

`#__dataguru` where 1 order by id desc limit ".$limit1.",".

$limit2.""); merupakan perintah SQL untuk mengambil semua data guru

dari tabel jos_data_guru.

//fungsi penyimpanan data guru

function save() {foreach($_POST as $key=>$value) {

$_POST[$key] = addslashes($value);}$database =& JFactory::getDBO();

if($_POST['id']>0) {$database->setQuery("update `#__dataguru` set

`nama`='".$_POST['nama']."', `nip`='".$_POST['nip']."', `jabatan`='".$_POST['jabatan']."', `alamat`='".$_POST['alamat']."', `telepon`='".$_POST['telepon']."' where `id`='".$_POST['id']."'");

}else {

$database->setQuery("insert into `#__dataguru`(`id`, `nama`, `nip`, `jabatan`, `alamat`, `telepon`,`status`) values('', '".$_POST['nama']."', '".$_POST['nip']."', '".$_POST['jabatan']."', '".$_POST['alamat']."', '".$_POST['telepon']."', '1')");

}$database->query

();header("location:index.php?option=".

$_REQUEST['option']."&page=".$_REQUEST['page']."&limit=".$_REQUEST['limit']."&result=true");

exit();}

Listing 5. Fungsi menyimpan data guru

57

Listing $database->setQuery("update `#__dataguru` set `nama`='".

$_POST['nama']."', `nip`='".$_POST['nip']."', `jabatan`='".

$_POST['jabatan']."', `alamat`='".$_POST['alamat']."', `telepon`='".

$_POST['telepon']."' where `id`='".$_POST['id']."'"); merupakan

perintah SQL untuk mengedit data guru dalam tabel jos_data_guru

berdasarkan id tertentu. Sedangkan listing insert into `#__dataguru`(`id`,

`nama`, `nip`, `jabatan`, `alamat`, `telepon`,`status`) values('',

'".$_POST['nama']."', '".$_POST['nip']."', '".$_POST['jabatan']."',

'".$_POST['alamat']."', '".$_POST['telepon']."', '1')"); merupkan

perintah SQL untuk memasukkan data guru ke dalam tabel jos_data_guru.

Berikut ini adalah tampilan input komponen Data Guru:

Gambar 17. Tampilan Input Komponen Data Guru

58

c. File toolbar.dataguru.php

Listing 6. Fungsi menampilkan Toolbar komponen data guru

Listing TOOLBAR_guru::_NEW(); pemanggilan fungsi untuk membuat data guru,

yaitu fungsi _NEW(). Pada listing di atas juga terdapat pemanggilan fungsi-

fungsi lain yaitu _EDIT() , _ABOUT() dan _DEFAULT().

3. Membuat Tampilan Publik Komponen Data Guru

Tampilan publik digunakan untuk menampilkan semua data guru yang

ada dalam tabel jos_data_guru yang mempunyai status aktif atau 1.

<?php

// no direct accessdefined( '_JEXEC' ) or die( 'Restricted access' );

require_once( JApplicationHelper::getPath( 'toolbar_html' ) );

switch ($task) {

case 'add':TOOLBAR_guru::_NEW();break;

case 'edit':TOOLBAR_guru::_EDIT();break;

case 'about':TOOLBAR_guru::_ABOUT();break;

default:TOOLBAR_guru::_DEFAULT();break;

}

?>

59

a. Membuat Tampilan List Data Guru

Berikut ini adalah listing program dari file com_dataguru.php yang

terletak pada direktori components/com_dataguru/com_dataguru.php :

<?php

function display() {headerT();$database =& JFactory::getDBO();$database->setQuery("select * from `#__dataguru` where `status`='1' order by nama asc");$items = $database->loadObjectList();if(count($items) > 0) {

echo '<table width="500" border="1"> <tr> <td><b>Nama</b></td> <td><b>NIP</b></td> <td><b>Jabatan</b></td> <td><b>Alamat</b></td> <td><b>Telepon</b></td> </tr>';foreach($items as $item) {

echo '<tr> <td>'.$item->nama.'</td> <td>'.$item->nip.'</td> <td>'.$item->jabatan.'</td> <td>'.$item->alamat.'</td> <td>'.$item->telepon.'</td> </tr>';}echo '</table>';}else {echo '<div class="main-top"><div class="main-top2"><div class="main-top3"></div></div></div><div class="main-mid"><div class="main-mid2"><div class="main-mid3"><div class="main"><span>Tidak ada data guru dalam database</span></div><div></div></div></div></div><div class="main-bot"><div class="main-bot2"><div class="main-bot3"></div></div></div>';}}

?>Listing 7. Fungsi menampilkan data guru

Listing $database->setQuery("select * from `#__dataguru` where

`status`='1' order by nama asc"); merupkan SQL untuk mengambil

semua data guru yang ada dalam tabel jos_data_guru yang mempunya

60

status ‘1’ atau publish. Data guru tersebut kemudian ditampilkan dalam

tabel dengan listing foreach($items as $item) {

echo '<tr>

<td>'.$item->nama.'</td>

<td>'.$item->nip.'</td>

<td>'.$item->jabatan.'</td>

<td>'.$item->alamat.'</td>

<td>'.$item->telepon.'</td>

</tr>';

}

b. Membuat Menu Data Guru

Menu data guru ini ditampilkan dibagian depan sebagai navigasi

pengunjung untuk melihat data guru. Untuk membuat menu ini dilakukan

melalui menu manager pada bagian administrator website.

Gambar 18. Menu Data Guru

61

J. Menambah Component Calender Akademik

Pada content Kalender Kegiatan, pengunjung akan ikut serta dalam

mengisi event kalender pada menu Add New Event di website SDN pacar

Ketapang. Setelah pengunjung mengisi, kemudian pengunjung meng-klik

tombol “View Full Kalender”, kemudian akan tampil “Full Kalender” seperti

gambar berikut :

Gambar 19. Tampilan Full Kalender

62

Tampilan mengisi event dan menampilkan full kalender dengan script default

dari joomla sebagai berikut :

function save(){$msg="";$event = $this->doSave($msg); //memanggil fungsi doSaveglobal $mainframe;if ($mainframe->isAdmin()){

$this->setRedirect( 'index.php?option=' . JEV_COM_COMPONENT. '&task=icalevent.list',$msg);

}else {global $Itemid;list($year,$month,$day) = JEVHelper::getYMD();$params = JComponentHelper::getParams(JEV_COM_COMPONENT);if ($params->get("editpopup",0)) {

ob_end_clean();?><script type="text/javascript">window.parent.SqueezeBox.close();window.parent.alert("<?php echo $msg;?>");window.parent.location="<?php echo

JRoute::_('index.php?option=' . JEV_COM_COMPONENT. "&task=day.listevents&year=$year&month=$month&day=$day&Itemid=$Itemid",false);?>"; </script>

<?phpexit();

}// if the event is published then return to the eventif ($event && $event->state ){

list($year,$month,$day) = JEVHelper::getYMD();$this->setRedirect($event->viewDetailLink($year,

$month,$day,$sef,$itemid) ,$msg);}else {

$this->setRedirect( JRoute::_('index.php?option=' . JEV_COM_COMPONENT. "&task=day.listevents&year=$year&month=$month&day=$day&Itemid=$Itemid",false),$msg);

}}

}Listing 8. Listing Program tambah agenda

63

K. HOSTING

Website yang dibuat telah dipublikasikan di internet dengan menggunakan

tools CPanel dan beralamat di http://sdn-pacarsewon.net. Langkah-langkah yang

dilakukan untuk mempublikasikan website tersebut adalah membuat database,

import file SQL, upload file, dan menyesuaikan konfigurasi database. Berikut

ini adalah tampilan depan website SDN Pacar.

Gambar 20. Tampilan website SDN Pacar

L. Hasil Akhir Website SDN Pacar

SDN Pacar, merupakan salah satu Sekolah Sekolah Dasar Negri di Kab.

Bantul yang belum memiliki website profil pribadi khusus untuk sekolahnya

sendiri. Tujuan dibuatnya media publikasi mempermudah sekolah, yakni pihak-

pihak sekolah seperti kepala sekolah, dan guru dalam penyampaian informasi

kepada siswa, dan pihak luar yang ingin mengetahui tentang profil SDN Pacar

sewon Bantul

64

Pada web profil ini, pihak sekolah terutama guru-guru di SDN Pacar,

menginginkan komunikasi khususnya kepada siswa-siswinya, masyarakat berjalan

lancar agar apabila ada suatu pertanyaan, komentar yang ingin disampaikan oleh

siswa-siswinya, masyarakat, wali dari siswa-siswi mereka bisa menyampaikan

kepada gurunya tanpa berhadapan langsung yaitu dengan memasukkan pesan

melalui website profil SDN pacar yakni menggunakan komponen pada web

tersebut seperti buku tamu, dan juga pada komponen download jika sudah

melakukan login terlebih dahulu.

diharapkan dengan adanya website profil SDN Pacar ini bisa memperlancar

komunikasi antara guru dan siswa, maupun sekolah dengan pihak luar.

1. Home

Home merupakan navigasi untuk menuju kehalaman halaman utama,

halaman ini secara otomatis akan terbuka bila user mengakses website SDN

Pacar. Bentuk tampilan Home website SDN Pacar sebagai berikut

Gambar 21. Tampilan Home website SDN Pacar

65

2. dwonload

Download merupakan navigasi berisikan file informasi dan materi

sekolah yang diberi fasilitas untuk bisa mendownload file tersebut supaya

siswa/i, masyarakat, dan pihak sekolah bisa mendapatkan file tersebut dengan

mudah

Gambar 22. Tampilan dwonload website SDNpacar

3. Data Guru

Data Guru merupakan navigasi berisikan file informasi guru-guru agar

siswa/i, masyarakat, dan pihak sekolah bisa mengetahui informasi data guru.

66

Gambar 23. Tampilan Data Guru Website SDN Pacar

4. Data Siswa

Pada bagian ini akan ditampilkan data siswa SDN Pacar. Informasi yang

disampaikan adalah nama, nis, kelas, tahun masuk, alamat dan nama orang

tua. Berikut ini adalah tampilan data siswa:

Gambar 24. Tampilan Data Siswa SDN Pacar

5. Data Alumni

Pada bagian ini alumni dapat meng-input-kan identitasnya agar tersimpan

di database alumni pada website SDN Pacar. Namun data yang diinputkan

akan divalidasi terlebih dahulu oleh admin website.

67

Berikut ini adalah tampilan form input data alumni SDN Pacar.

Gambar 25. Tampilan Input Data Alumni

68

6. Galeri Foto

Galery Photo merupakan navigasi untuk mengarahkan pengunjung ke

halaman album photo SDN Pacar agar pengunjung dapat melihat photo-

photo kegiatan SDN Pacar. Bentuk tampilan Galery Photo sebagai berikut

Gambar 26. Tampilan Galeri Foto website SDNpacar