PERANCANGAN WEBSITE SEKOLAH MENENGAH PERTAMA
NEGERI 262 CAKUNG JAKARTA TIMUR DENGAN MENGGUNAKAN
PHP DAN MySQL
Erni Wigati.Department of Information Systems, Faculty of Computer Science &
Information Technology, Gunadarma University, Jakarta, 2012.
Abstraksi - Perancangan website
Sekolah Menengah Pertama Negeri
262 Cakung Jakarta Timur
menggunakan PHP dan MySQL serta
Dreamweaver sebagai media untuk
penulisan koding. Pembuatan isi
website berfokus pada pemberian
informasi yang berkenaan dengan
Sekolah Menengah Pertama Negeri
262 Cakung Jakarta Timur.
Website yang terdiri dari dua
puluh halaman ini, berisi informasi
tentang profil sekolah seperti sejarah,
visi, dan misi. kemudian informasi
fasilitas sekolah, kesiswaan, serta
informasi tentang kurikulum Sekolah
Menengah Pertama Negeri 262
Cakung Jakarta Timur.
Dengan adanya website ini,
dapat memberikan informasi yang
dibutuhkan oleh masyarakat
mengenai Sekolah Menengah
Pertama Negeri 262 Cakung Jakarta
Timur.
Kata Kunci : Perancangan, Website,
SMP Negeri 262, PHP dan MySQL.
Abstract - Designing Junior High
School 262 Cakung East Jakarta
Website using PHP and MySQL also
Dreamweaver as a media for writing
coding. this website focuses on
providing information relating to the
Junior High School 262 Cakung East
Jakarta.
Website that consists of twenty
pages, containing information about
the profile of the school, such as
history, vision, and mission. then
update school facilities, student
affairs, as well as information about
the Junior High School 262 Cakung
East Jakarta curriculum.
With this website, can provide
the information that needed by the
people about the Junior High School
262 Cakung East Jakarta.
Keywords : Design, Websites, Junior
High School 262, PHP and MySQL.
1. PENDAHULUAN
Penulisan skripsi ini
dilatarbelakangi oleh keinginan
Penulis untuk mengembangkan
website di Sekolah Menengah
Pertama Negeri 262 yang berlokasi
di wilayah Cakung Jakarta Timur.
Sekolah Negeri yang sudah berdiri
sejak tahun 1990 ini, telah berhasil
mencetak lulusan – lulusan
berkualitas yang diharapkan kelak
dapat menjadi generasi penerus yang
turut serta memberikan kontribusinya
terhadap kemajuan bangsa dan
negara.
Selama dua puluh satu tahun
mengabdi, terhitung dari mulai
diresmikannya pada tanggal 11
September 1990 oleh Gubernur
Jakarta yang menjabat kala itu yaitu
Bapak Wiyogo Atmo Darminto,
sudah banyak sekali prestasi –
prestasi yang diraih terutama untuk
beberapa ekstrakurikuler seperti
Paskibra yang pernah mengikuti
kejuaraan tingkat Jabotabek dan
ekstrakurikuler Rohis yang juga
pernah mengikuti kejuaraan di
tingkat DKI.
Sekolah yang memiliki Visi dan
Misi Berprestasi melalui Imtaq,
Sains, dan Akhlak Mulia serta
disiplin dalam kerja, dan
memberikan pelayanan Prima
dengan meningkatkan Silaturahim
ini, telah dilengkapi dengan Sarana
dan Prasarana yang memadai untuk
menunjang kegiatan Belajar
Mengajar di sekolah tersebut, seperti
Ruang kerja praktek (Laboratorium
IPA, Komputer, dan Keterampilan
Tata Busana), Ruang Perpustakaan,
Ruang Multimedia, Ruang Unit
Kesehatan Siswa, Ruang OSIS,
Mushola, Ruang Penyimpanan,
Kantin Sekolah, Lapangan Upacara,
Lapangan Olahraga, dan Pos Penjaga
Keamanan (Pos Satpam). Namun
sangat disayangkan sekali, sekolah
yang bisa dibilang sudah demikian
maju tersebut, belum memiliki
Website Sekolah sebagai salah satu
media Informasi Elektronik yang
dapat membantu sekolah dalam
mempromosikan sekolahnya karena
dalam hal ini Website dapat
dimanfaatkan sebagai sarana
komunikasi dalam berbagai aktivitas
masyarakat yang lebih luas, termasuk
dalam bentuk forum atau kelompok
diskusi. Dari kenyataan yang ada,
maka Penulis melihat hal tersebut
sebagai suatu kesempatan sekaligus
peluang serta tantangan bagi Penulis
untuk bisa mengembangkan, dalam
hal ini membuat website sekolah
untuk sekolah tersebut yaitu Sekolah
Menengah Pertama Negeri 262
Cakung Jakarta Timur.
Berdasarkan hal tersebut, maka
pada penulisan Tugas Akhir kali ini
Penulis mengangkat judul
“Perancangan Website Sekolah
Menengah Pertama Negeri 262
Cakumg Jakarta Timur dengan
menggunakan PHP dan MySQL”.
Pada website ini terdapat informasi
yang relevan seputar Sekolah
Menengah Pertama Negeri 262
Cakung Jakarta Timur.
1.2 Batasan Masalah
Penulisan dan pembuatan website
memfokuskan dan menitikberatkan
hanya kepada pemberian informasi
seputar lingkup Sekolah Menengah
Pertama Negeri 262 Cakung Jakarta
Timur, seperti Profil Sekolah,
Prestasi yang pernah diraih, Fasilitas
sekolah, serta informasi yang
berkaitan dengan Kurikulum dan
Kesiswaan sekolah. Pada
perancangannya website ini akan
dibuat dengan menggunakan bahasa
pemrograman web PHP dan HTML.
1.3 Tujuan Penulisan Tujuan dari penulisan ini adalah
untuk membuat website pada
Sekolah Menengah Pertama Negeri
262 Cakung Jakarta Timur sehingga
diharapkan nantinya dengan adanya
website tersebut sekolah dapat
memberikan informasi yang relevan
berkenaan dengan Sekolah
Menengah Pertama Negeri 262
Cakung Jakarta Timur kepada
masyarakat.
1.4 Metode Penelitian
Penelitian yang dilakukan pada
penulisan tugas akhir ini melalui
beberapa tahap, mulai dari tahap
pengumpulan data dan informasi
yang diperlukan sampai dengan
tahap pengujian website.
1.4.1 Studi Pustaka
Dalam memperoleh data dan
informasi, Penulis melakukan studi
kepustakaan yaitu dengan cara
mengumpulkan dan membaca
literatur – literatur dan jurnal dari
internet serta buku yang relevan
dengan penulisan tugas akhir ini.
Selain itu Penulis juga melakukan
pengambilan data melalui observasi
secara langsung di lapangan.
1.4.2 Langkah Pembuatan Website
Dalam pembuatan website ini,
Penulis menerapkan langkah –
langkah sebagai berikut :
1. Perencanaan dan Analisa, Penulis
merencanakan untuk membuat
sebuah website sekolah dan memilih
bahasa pemrograman yang akan
digunakan untuk membangun
website ini yaitu bahasa
pemrograman web seperti PHP dan
HTML, setelah itu Penulis
mengumpulkan materi – materi yang
kemudian akan digunakan dalam
pembuatan website.
2. Perancangan, Penulis membuat
rancangan tampilan atau output yang
akan disajikan seperti rancangan
interface menu – menu yang terdapat
dalam website.
3. Implementasi, Penulis
mengimplementasikan materi –
materi tersebut ke dalam bahasa
pemrograman yang telah dipilih yaitu
bahasa pemrograman PHP dan
HTML untuk pembuatan website.
4. Testing dan Validasi, Penulis
mengompilasi koding yang telah
dibuat, apakah dapat berjalan tanpa
adanya debug atau masalah dalam
emulator website ataupun dalam
pengoperasian secara online.
1.4.3 Perangkat yang Digunakan
Berikut ini spesifikasi dari
perangkat yang digunakan dalam
melakukan tahap testing dan validasi
:
A. Perangkat Keras, yaitu :
Notebook dengan
prosessor Intel(R)
Atom(TM)/ CPU N475/
AMD 1.83 GHz/ 14”
Memori RAM sebesar
1.00 GB
Printer Deskjet 2000
B. Perangkat Lunak, yaitu :
Microsoft Windows 7
Ultimate
Adobe Dreamweaver CS5
Adobe Photoshop CS5
Swish Max 4
Star UML 5.0
XAMPP Control Panel
Application 2.5
PHPMyAdmin 3.3.9
FileZilla 3.5.3
1.5 Sistematika Penulisan
Untuk lebih mempermudah dan
memahami dalam urutan setiap bab,
serta kerapian tugas akhir ini, maka
Penulis membuat susunan
sistematika penulisan sebagai berikut
:
BAB 1 PENDAHULUAN,
menguraikan pokok persoalan yang
terdiri dari latar belakang masalah,
batasan masalah, tujuan penulisan,
metode penelitian serta sistematika
penulisan.
BAB 2 TINJAUAN PUSTAKA,
menjelaskan tentang tinjauan pustaka
atau landasan teori yang menunjang
tersusunnya penulisan ini, antara lain
tentang bahasa pemrograman
berbasis web seperti PHP dan
HTML.
BAB 3 PERANCANGAN, berisi
prosedur pembuatan program yang
dibagi menjadi beberapa sub bab
mengenai perancangan dari website
yang dibuat beserta
keterangan – keterangan dari website
tersebut.
BAB 4 IMPLEMENTASI, berisi
penjelasan mengenai bagian – bagian
dari program yang dibuat, langkah –
langkah pembuatan website dengan
PHP dan HTML serta proses
implementasi.
BAB 5 PENUTUP, berisi tentang
kesimpulan dari hasil pembahasan
dalam penulisan tugas akhir ini,
saran – saran dan harapan untuk
pengembangan serta penyempurnaan
dari hasil penulisan.
2. TINJAUAN PUSTAKA
2.1 Internet
Internet (interconnection-
networking) yang pada awalnya
dikenal dengan sebutan Advanced
Research Project Agency Network
(ARPANET) yang merupakan
jaringan komputer yang dibuat oleh
Advanced Research Project Agency
(ARPA) dari Departemen Pertahanan
Amerika Serikat pada tahun 1969.
Internet sendiri merupakan sebuah
sistem global dari seluruh jaringan
komputer yang saling terhubung
menggunakan standar Internet
Protocol Suite (TCP/ IP) sebagai
protokol pertukaran paket data untuk
melayani miliaran pengguna di
seluruh dunia (Meloni, 2012).
1. WWW
www (world wide web) adalah
suatu ruang informasi di mana
sumber-sumber daya yang berguna
diidentifikasi oleh pengenal global
yang disebut Uniform Resource
Identifier (URI). www juga dapat
diartikan sebagai sekelompok
dokumen multimedia yang saling
bertautan dengan menggunakan
tautan hiperteks. www yang biasa
disebut web page ini sering dianggap
sama dengan internet secara
keseluruhan, walaupun sebenarnya ia
hanya bagian daripada internet
(Kristianto, 2002).
2. Web Browser
Web browser adalah suatu
perangkat lunak atau perangkat
navigasi dalam web yang dijalankan
pada komputer user dan digunakan
untuk menampilkan halaman-
halaman dokumen website yang
berada di internet atau server web.
Adapun salah satu contoh dari web
browser itu sendiri di antaranya
seperti, Internet Explorer (IE),
Mozilla Firefox (MF), Opera Mini,
dan masih banyak lagi. Mekanisme
dari web browser itu sendiri adalah
mula – mula user memasukkan
alamat Uniform Resource Locator
(URL) di browser, kemudian
browser menghubungi server yang
tertera pada URL, setelah terhubung
browser mengirimkan Hypertext
Transfer Protocol (HTTP) request,
yang kemudian server akan
menjawabnya dengan mengirimkan
HTTP response yang berisi Header
dan isi dokumen yang diRequest.
Untuk dokumen yang terdiri atas
beberapa file (misalnya dokumen
bergambar) maka browser harus
mengirimkan HTTP request lagi
untuk setiap filenya, jika sudah maka
browser akan menampilkan semua
isi dokumen kepada user pada web
browser (Ahira, 2012).
2.1.1 HTML
Hypertext Markup Language
(HTML) adalah bahasa
pemrograman dengan format standar
untuk membuat dokumen web yang
juga merupakan bahasa Markup
bertanda, yang menggunakan
rangkaian teks tertentu berupa kode-
kode (Tag) yang dimengerti oleh web
browser dan dapat menampilkannya
di layar monitor, serta untuk
menandai teks yang mempunyai
interpretasi khusus, HTML sendiri
merupakan subset dari Standard
Generalized Markup Language
(SGML) yang pada
perkembangannya kini HTML
merupakan standar internet yang
didefinisikan dan dikendalikan
penggunaannya oleh World Wide
Web Consortium (W3C) (Ahira,
2012).
2.1.2 Struktur Dasar HTML
Adapun struktur HTML adalah
berupa dasar – dasar penulisan skrip
pada HTML itu sendiri. Dalam hal
ini standar penulisan HTML terdiri
dari :
<html>
<head>
<title>.........................</title>
<body>
.....................................</body>
</head>
</body>
</html>
Dalam hal ini skrip <html>
berperan sebagai tanda awal
penulisan dokumen html, kemudian
<head> sebagai informasi page
header. Di dalam skrip ini
pemrogram dapat meletakkan tag –
tag title, base, isi index, link, script,
style dan meta, untuk skrip <title>
digunakan sebagai indikasi untuk
penulisan judul halaman dokumen
web yang dibuat. Pada skrip <body>
dapat diletakkan berbagai atribut
seperti warna, dan latar belakang.
2.1.2.1 Tag Gambar
Tag gambar biasa digunakan
untuk menyisipkan gambar pada
halaman web yang dibuat, adapun
struktur penulisannya adalah sebagai
berikut :
<img src=”NamaFileGambar”>
NamaFileGambar = file gambar
yang mempunyai ekstensi .GIF,
.JPG, atau .PNG.
Untuk menampilkan sebuah file
gambar.
Bentuk penulisan lain yang
dianjurkan (XML style) :
<img src=”NamaFileGambar” />
2.1.2.2 Tabel
Dalam hal ini penggunaan tabel
pada website adalah sebagai dasar
pengaturan tata letak (Layout) dan
pembuatan tabel dalam penulisan
website. Adapun standar penulisan
tag untuk pembuatan tabel adalah
sebagai berikut :
<table> definisi 6arag </table>
menampilkan data dalam bentuk
6arag
Tabel didefinisikan dengan cara
menyatakan baris-baris dan kolom-
kolom.
skrip untuk penanda baris adalah
<tr> definisi baris </tr>
skrip untuk penanda kolom adalah
<td>data</td>
2.1.2.3 Mengatur Baris dan
Paragraf
Untuk ulasan selanjutnya akan
dijelaskan mengenai pengaturan
Baris dan Paragraf dalam HTML.
Adapun untuk pengaturan baris
adalah sebagai berikut :
<br>Teks</br>
<br> : digunakan untuk pindah ke
baris berikutnya.
Sementara itu untuk pengaturan
paragraf, penulisannya adalah
sebagai berikut :
<p>6aragraph</p>
<p> : digunakan untuk menandai
suatu paragraf, dalam hal ini
6aragraph akan terlihat dibatasi oleh
satu baris kosong sebelum dan
sesudahnya.
2.1.2.4 Menyisipkan Skrip
Penyisipan skrip berkenaan
dengan penyisipan skrip di luar dari
skrip HTML itu sendiri, contoh
apabila dalam dokumen HTML
terdapat kondisi yang mengharuskan
untuk digunakan skrip PHP maka
skema penulisannya adalah sebagai
berikut :
<html>
<head>
<title>Test</title>
</head>
<body>
<h4>Example One</h4>
<p><?php echo “Hello World”; ?>
</p> </body>
</html>
Selain menyisipkan Skrip, juga
terdapat skema untuk menautkan
antara halaman dokumen web yang
satu dengan yang lain yaitu dengan
menautkan link alamat URL yang
akan disisipkan. Adapun penulisan
standar tag untuk menautkan link
adalah sebagai berikut :
<a href=”Link”>Kata yang di
klick</a>
contoh : <a
href=”www.gunadarma.ac.id”>KAM
PUS</a>
2.2 Pengenalan PHP
PHP adalah singkatan dari
Hypertext Preprocessor, yaitu bahasa
pemrograman yang digunakan secara
luas untuk penanganan pembuatan
dan pengembangan sebuah situs web
dan bisa digunakan bersamaan
dengan HTML. PHP diciptakan
pertama kali tahun 1994 oleh
Rasmus Lerdorf seorang
pemrogram C. Pada awalnya PHP
adalah singkatan dari Personal Home
Page Tools. Selanjutnya diganti
menjadi Forms Interpreter (FI).
Sejak versi 3.0, nama bahasa ini
diubah menjadi Hypertext
Preprocessor dengan singkatannya
“PHP”. PHP versi terbaru adalah
versi ke-5. Berdasarkan survey
Netcraft pada bulan Desember 1999,
lebih dari sejuta site menggunakan
PHP, di antaranya adalah NASA,
Mitsubishi, dan RedHat. Tujuan dari
penulisan PHP ini adalah
memungkinkan perancang web untuk
menulis halaman web dinamik
dengan cepat dan untuk membuat
aplikasi yang dijalankan di atas
teknologi web (Kadir, 2003).
2.2.1 Variabel dan Tipe Data
Variabel di dalam PHP diawali
dengan karakter $ dan diikuti dengan
huruf sebagai karakter pertama,
kemudian dapat diikuti dengan
kombinasi huruf dan angka, tidak
boleh ada spasi dan tanda baca,
kecuali _ (garis bawah).
contoh :
$nama
$a1
$nilai_uts
2.2.2 Konstanta
Konstanta menyatakan nilai yang
tetap di dalam program, contoh
penulisan konstanta dalam PHP :
<?
define(“nama_konstanta”,”nilai_kon
stanta”);
echo_;
?>
atau sebagai berikut :
<?
define(“NAME”,”ERNI”);
echo NAME;
?>
Pada skrip dinyatakan bahwa user
akan mendeklarasikan konstanta
“NAMA” dengan nama “ERNI”.
Pada PHP juga dikenal sejumlah
karakter yang menggunakan
penulisan secara khusus di antaranya
terdapat pada tabel 2.1 .
2.2.3 Operator
Tabel 2.1 Penulisan Khusus dalam
PHP
Adapun operator dalam PHP
terdiri dari operator Aritmatika,
operator Logika, operator
Perbandingan, operator String,
operator Increment/ Decrement,
operator Bitwise, operator Ternary,
operator Eksekusi, dan operator
Assignment, dan lain-lain.
Tabel 2.2 Operator pada PHP
Operator Prioritas
() ~,!,++,--,$,& *,/,% +,-
Tertinggi
Penulisan Karakter yang Dimaksud
\” Petik Ganda
\\ Backslash
\$ Tanda Dolar
\n Newline
\r Carriage Return
\t Tab
\x00 s/d\Xff
Karakter Heksadesimal
<>,<=,>= ==,!= ^ ! && || =, +=, -=, *=, /=, &=, |=, ^=, = AND (&&) XOR (||) OR
Terendah
Tabel 2.2 menunjukkan bahwa
kaidah dari penulisan operator
tersebut adalah harap didahulukan
mana yang menjadi prioritas, hal ini
terjadi apabila dalam penulisan
program terdapat operator yang
digunakan.
2.2.4 Pernyataan Kondisi
Dalam PHP juga dikenal istilah kondisi. Kondisi pada PHP umumnya digunakan sebagai sebuah fungsi dimana perintah hanya akan dijalankan
atau dieksekusi jika kondisi yang
diberikan terpenuhi, contoh dalam
penggunaan kondisi di sini adalah
kondisi IF. PHP memiliki tiga
macam bentuk IF, yaitu : if, if...else,
if...else...if.
2.2.5 Perulangan
Seperti kebanyakan bahasa
pemrograman pada umumnya, dalam
bahasa pemrograman web seperti
PHP juga terdapat struktur
Perulangan. Struktur perulangan atau
yang biasa disebut sebagai looping
adalah struktur yang digunakan pada
program terutama dalam hal ini PHP
untuk menjalankan suatu statement
secara berulang – ulang (looping).
Beberapa bentuk perulangan dalam
PHP, yaitu while...end, dan
for...next.
2.3 PhpMyAdmin
PhpMyAdmin adalah sebuah
perangkat lunak yang ditulis dalam
bahasa pemrograman Hypertext
Preprocessor (PHP), yang digunakan
untuk menangani administrasi
MySQL melalui media internet
world wide web (www).
PhpMyAdmin juga mendukung
berbagai operasi MySQL, di
antaranya mengelola basis data,
tabel-tabel beserta atribut –
atributnya, relasi (relations), indeks,
pengguna (users), perijinan
(permissions), dan lain-lain
(Kristianto, 2002). Halaman awal
dari PhpMyAdmin dapat dilihat pada
gambar 2.1
Gambar 2.1 Halaman Awal
PhpMyAdmin
2.4 SQL
Structured Query Language
(SQL) merupakan bahasa standar
yang digunakan untuk memanipulasi
basis data relasional. Secara umum,
SQL terdiri dari dua bahasa, yaitu
Data Definition Language (DDL)
dan Data Manipulation Language
(DML). Implementasi DDL dan
DML berbeda untuk tiap sistem
manajemen basis data, namun secara
umum implementasi tiap bahasa ini
memiliki bentuk standar yang
ditetapkan oleh ANSI (Kristianto,
2002).
2.4.1 DDL
Data Definition Language (DDL)
digunakan untuk mendefinisikan,
mengubah, serta menghapus basis
data dan objek-objek yang
diperlukan dalam basis data,
misalnya tabel, view, user, dan
sebagainya. Secara umum, DDL
yang digunakan adalah CREATE
untuk membuat objek baru, USE
untuk menggunakan objek, ALTER
untuk mengubah objek yang sudah
ada, dan DROP untuk menghapus
objek. DDL biasanya digunakan oleh
administrator basis data dalam
pembuatan sebuah aplikasi basis
data.
2.4.2 DML Data manipulation Language
(DML) digunakan untuk
memanipulasi data yang ada dalam
suatu tabel. Perintah yang umum
dilakukan adalah:
SELECT untuk menampilkan
data
INSERT untuk
menambahkan data baru
UPDATE untuk mengubah
data yang sudah ada
DELETE untuk menghapus
data
2.5 Basis Data
Basis data adalah kumpulan
informasi yang disimpan di dalam
komputer secara sistematik sehingga
dapat diperiksa menggunakan suatu
program komputer untuk
memperoleh informasi dari basis data
tersebut. Perangkat lunak yang
digunakan untuk mengelola dan
memanggil (query) basis data disebut
sistem manajemen basis data adalah
Database Management System
(DBMS) (Kristianto, 2002).
2.6 MySQL
MySQL adalah sebuah perangkat
lunak sistem manajemen basis data
SQL. Database Management System
(DBMS) ini bersifat multithread, dan
multi-user, dengan sekitar 6 juta
instalasi di seluruh dunia. MySQL
juga merupakan implementasi dari
sistem manajemen basis data
relasional (RDBMS) yang
didistribusikan secara gratis di bawah
lisensi General Public License
(GPL). Setiap pengguna dapat secara
bebas menggunakan MySQL, namun
dengan batasan perangkat lunak
tersebut tidak boleh dijadikan produk
turunan yang bersifat komersial.
MySQL sebenarnya merupakan
turunan salah satu konsep utama
dalam basis data yang telah ada
sebelumnya, yaitu Structured Query
Language (SQL).
Terdapat beberapa Application
Programming Interface (API)
tersedia yang memungkinkan
aplikasi-aplikasi komputer yang
ditulis dalam berbagai bahasa
pemrograman untuk dapat
mengakses basis data MySQL, antara
lain bahasa pemrograman C, C++,
C#, Perl, PHP, bahasa pemrograman
Python, dan Ruby. Kebanyakan kode
sumber MySQL dalam ANSI C.
Penggunaan MySQL sangat populer
dalam aplikasi web seperti PHP-
Nuke. Popularitas sebagai aplikasi
web tersebut dikarenakan
kedekatannya dengan bahasa
pemrograman web PHP, sehingga
seringkali disebut sebagai Dynamic
Duo (Kristianto, 2002).
2.7 Struktur Navigasi
Struktur navigasi adalah struktur
atau alur dari suatu program yang
merupakan rancangan hubungan dan
rantai kerja dari beberapa area yang
berbeda dan dapat membantu
mengorganisasikan seluruh elemen
pembuatan website. Struktur navigasi
mempunyai empat bentuk dasar yaitu
linier, nonlinier, hirarki dan
komposit (Putra, 2010).
a. Struktur Linier, Struktur
navigasi linier merupakan suatu
struktur yang hanya mempunyai satu
rangkaian cerita yang berurut, yang
menampilkan satu demi satu
tampilan layar secara berurut
menurut urutannya. Pada struktur
linier ini halaman yang mungkin
ditampilkan adalah satu halaman
sebelumnya dan satu halaman
sesudahnya, seperti pada gambar 2.2.
Gambar 2.2 Struktur Navigasi Linier
b. Struktur Nonlinier, Struktur
nonlinier pada gambar 2.3
merupakan pengembangan dari
struktur linier. Struktur ini
memperkenankan adanya
percabangan. Percabangan dalam
struktur nonlinier berbeda dengan
percabangan dalam struktur hirarki,
karena pada percabangan nonlinier
walaupun terdapat percabangan
tetapi tampilannya mempunyai
kedudukan yang sama tidak ada
master page dan slave page.
Gambar 2.3 Struktur Navigasi Non-
Linier
c. Struktur Hirarki, Struktur
hirarki pada gambar 2.4 sering
disebut struktur bercabang,
merupakan suatu struktur yang
mengandalkan percabangan untuk
menampilkan data berdasarkan
kriteria tertentu. Tampilan pertama
disebut dengan master page
sedangkan tampilan berikutnya
disebut dengan slave page.
Gambar 2.4 Struktur Navigasi
Hirarki
d. Struktur Komposit, Struktur
komposit (campuran) seperti pada
gambar 2.5 merupakan gabungan
dari struktur linier, nonlinier dan
hirarki. Struktur ini sering disebut
struktur navigasi bebas. Struktur
navigasi ini banyak digunakan dalam
pembuatan multimedia karena
struktur ini dapat memberikan
interaksi yang lebih tinggi.
Gambar 2.5 Struktur Navigasi
Komposit
2.8 Xampp
Xampp sebagaimana yang
terlihat pada gambar 2.6 adalah
perangkat lunak bebas, yang
mendukung banyak sistem 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 sistem operasi apapun),
Apache, MySQL, PHP dan Perl.
Program ini tersedia dalam General
Public License (GNU) dan bebas,
merupakan web server yang mudah
digunakan untuk dapat melayani
tampilan halaman web yang dinamis.
Untuk mendapatkanya dapat
mengunduh langsung dari web
resminya (Agam, 2006).
Gambar 2.6 Xampp Control Panel
2.9 Adobe Photoshop CS5
Adobe Photoshop, atau biasa
disebut Photoshop, adalah perangkat
lunak editor citra buatan Adobe
Systems yang dikhususkan untuk
pengeditan foto/ gambar dan
pembuatan efek. Perangkat lunak ini
banyak digunakan oleh fotografer
digital dan perusahaan iklan
sehingga dianggap sebagai pemimpin
pasar (market leader) untuk
perangkat lunak pengolah foto/
gambar bersama Adobe Acrobat,
dianggap sebagai produk terbaik
yang pernah diproduksi oleh Adobe
Systems. Versi ke delapan aplikasi ini
disebut dengan nama Photoshop CS
(Creative Suite), versi sembilan
disebut Adobe Photoshop CS2, versi
sepuluh disebut Adobe Photoshop
CS3, versi ke sebelas adalah Adobe
Photoshop CS4 dan versi yang
terakhir (ke duabelas) adalah Adobe
Photoshop CS5. Photoshop tersedia
untuk Microsoft Windows, Mac OS
X, dan Mac OS versi 9 ke atas, serta
juga dapat digunakan oleh sistem
operasi lain seperti Linux dengan
bantuan perangkat lunak tertentu
seperti CrossOver (Chandra, 2011).
Pada penulisan ini Penulis
menggunakan Adobe photoshop CS5
untuk mendesain template dari
website yang akan dibuat. seperti
terlihat pada gambar 2.7 yang
merupakan lembar kerja untuk
melakukan editing foto/ gambar.
Gambar 2.7 Layer pada Adobe
Photoshop CS5
2.10 Adobe Dreamweaver CS5
Adobe Dreamweaver
merupakan program penyunting
halaman web keluaran Adobe
Systems yang dulu dikenal sebagai
Macromedia Dreamweaver keluaran
Macromedia. Program ini banyak
digunakan oleh pengembang web
karena fitur-fiturnya yang menarik
dan kemudahan penggunaannya.
Versi terakhir Macromedia
Dreamweaver sebelum Macromedia
dibeli oleh Adobe Systems yaitu versi
8. Versi terakhir Dreamweaver
keluaran Adobe Systems adalah versi
11 yang ada dalam Adobe Creative
Suite 5 (sering disingkat Adobe CS5)
(Maulana, 2008). Pada awalnya user
akan disuguhkan tampilan lembar
kerja untuk menuliskan koding pada
adobe dreamweaver CS5 seperti
terlihat pada gambar 2.8.
Gambar 2.8 Tampilan lembar kerja
pada Adobe Dreamweaver CS5
2.11 Unified Modeling Language
(UML)
Unified Modeling Language
adalah himpunan struktur dan teknik
untuk pemodelan desain program
berorientasi objek (OOP) serta
aplikasinya. UML adalah metodologi
untuk mengembangkan sistem OOP
dan sekelompok perangkat tool untuk
mendukung pengembangan sistem
tersebut. UML mulai diperkenalkan
oleh Object Management Group
sebuah organisasi yang telah
mengembangkan model, teknologi,
dan standar OOP sejak tahun 1980-
an. Sekarang UML sudah mulai
banyak digunakan oleh para praktisi
OOP. UML merupakan dasar bagi
perangkat (tool) desain berorientasi
objek dari IBM.
Gambar 2.9 Star UML
UML adalah suatu bahasa yang
digunakan untuk menentukan,
memvisualisasikan, membangun, dan
mendokumentasikan suatu sistem
informasi. UML dikembangkan
sebagai suatu alat untuk analisis dan
desain berorientasi objek oleh Grady
Booch, Jim Rumbaugh, dan Ivar
Jacobson. Namun demikian UML
dapat digunakan untuk memahami
dan mendokumentasikan setiap
sistem informasi. Penggunaan UML
dalam industri terus meningkat. Ini
merupakan standar terbuka yang
menjadikannya sebagai bahasa
pemodelan yang umum dalam
industri peranti lunak dan
pengembangan sistem. Ada beberapa
diagram dalam UML yaitu Use Case
Diagram, Activity Diagram, Class
Diagram, dan Sequence Diagram
(Munawar, 2005).
a. Use Case Diagram, digunakan
untuk memodelkan proses bisnis
berdasarkan perspektif pengguna
sistem. Use case diagram terdiri atas
diagram untuk use case dan actor.
Actor merepresentasikan orang yang
akan mengoperasikan atau orang
yang berinteraksi dengan sistem
aplikasi. Use case merepresentasikan
operasi-operasi yang dilakukan oleh
actor. Use case digambarkan
berbentuk elips dengan nama operasi
dituliskan di dalamnya. Actor yang
melakukan operasi dihubungkan
dengan garis lurus ke use case. Pada
gambar 2.10 terlihat seorang aktor
yang memiliki peran tunggal sebagai
customer terhadap beberapa urutan
case.
Gambar 2.10 Contoh Use Case
Diagram
b. Activity Diagram, sistem
untuk memodelkan perilaku Use
Case dan objects di dalam sistem.
Sebagaimana dijelaskan sebelumnya
bahwa Use Case memiliki fungsi
untuk memodelkan proses bisnis
berdasarkan perspektif pengguna
sistem. Pada gambar 2.11 terlihat
penggambaran aktifitas yang
dilakukan antar objek dalam suatu
sistem.
Gambar 2.11 Contoh Activity
Diagram
c. Class Diagram, seperti pada
gambar 2.12 digunakan untuk
memodelkan struktur kelas dalam
basis data.
Gambar 2.12 Contoh Class Diagram
d. Sequence Diagram, seperti
terlihat pada gambar 2.13 digunakan
untuk memodelkan pengiriman pesan
(message) antar objects.
Gambar 2.13 Contoh Sequence
Diagram
2.12 Swish Max
Swish Max adalah aplikasi
yang difungsikan untuk membuat
animasi flash. Animasi yang bisa
dihasilkan dari aplikasi ini adalah
Flash, GIF, atau video animasi.
Selain itu Swish Max juga bisa
menghasilkan animasi dengan
berbagai template animasi yang bisa
digunakan dengan mudah. Untuk
mendukung performa animasi Swish
Max menyediakan beberapa template
animasi yang dapat digunakan untuk
gambar, teks, ataupun video. Jika
dibandingkan dengan Adobe Flash,
Swish Max lebih mudah dipelajari
dan digunakan oleh pemula karena
tool-tool yang tersedia lebih user
friendly (Retownga, 2011).
Sebagaimana terlihat pada gambar
2.14, merupakan tampilan awal layer
untuk membuat animasi photo slide
pada swish max .
Gambar 2.14 SwishMax
2.13 FileZilla
Filezilla adalah perangkat lunak
server FTP gratis yang didukung
oleh proyek yang sama dan fitur-fitur
dukungan untuk FTP dan FTP
melalui SSL/ TLS.
Gambar 2.15 Filezilla
Sebagaimana terlihat pada gambar
2.15, Penulis menggunakan filezilla
sebagai server FTP untuk
mengunggah website sehingga
website dapat diakses oleh semua
pengguna internet.
3. PERANCANGAN
3.1 Metodologi Penelitian
Pada bab perancangan ini,
Penulis melalui beberapa tahapan
diantaranya studi lapangan,
perancangan struktur navigasi,
pembuatan basis data dan lain-lain
seperti terlihat pada gambar 3.1.
Gambar 3.1 Langkah Perancangan
Website SMPN 262 Jakarta
Pada gambar 3.1 langkah awal
dimulai dengan studi lapangan dan
literatur, langkah ini dilakukan
dengan cara mengambil data secara
langsung pada Sekolah Menengah
Pertama Negeri 262 Jakarta Timur.
Kemudian dilanjutkan dengan
perancangan struktur navigasi, yang
menggambarkan secara visual
langkah atau urutan jalan suatu
halaman website dari awal sampai
dengan akhir. Selain itu perancangan
struktur navigasi juga digunakan
untuk mempermudah dalam
menentukan hal – hal apa saja yang
harus dirancang untuk memenuhi
kebutuhan dalam pembuatan website.
Lalu langkah selanjutnya adalah
pembuatan basis data, dalam hal ini
dibuat untuk menyimpan data seperti
pada halaman login suatu website,
atau untuk menyimpan kebutuhan
data lain pada website. Selain itu
dengan adanya basis data maka suatu
website akan menjadi lebih dinamis.
Kemudian dilanjutkan dengan
perancangan desain halaman web,
biasanya pemrogram profesional
akan merancang desain suatu
halaman terlebih dahulu, lalu
mengimplementasikannya ke dalam
koding agar mempunyai gambaran
atau Storyboard mengenai website
yang sedang dirancang. Lalu tahap
berikutnya yaitu tahap
pengunggahan. Tahap ini proses
unggah diperlukan untuk
memublikasikan website yang telah
dirancang agar dapat diketahui oleh
masyarakat luas. Proses unggah ini
dapat menggunakan web hosting,
baik yang gratis maupun yang
berbayar dengan fasilitas atau fitur –
fitur yang lebih lengkap. Kemudian
tahap yang terakhir yaitu tahap uji
coba yang dilakukan setelah proses
unggah.
Pada gambar 3.2 terlihat bahwa
struktur navigasi pengguna untuk
website SMP Negeri 262 Jakarta
Timur diawali dengan halaman
utama yang kemudian, dari halaman
utama beranda pengguna akan
diarahkan ke halaman Profil Sekolah,
Fasilitas, Kegiatan, Kesiswaan,
Kurikulum, Tautan, Info Sekolah,
Galeri, Unduh, dan Bantuan.
3.2 Perancangan
Perancangan dalam hal ini adalah
merancang struktur navigasi dari
website SMP Negeri 262 Jakarta
Timur, yaitu struktur navigasi
pengguna dan admin.
3.2.1 Struktur Navigasi
Struktur navigasi digunakan
untuk menggambarkan secara visual
langkah atau urutan jalan suatu
halaman website dari halaman awal
sampai dengan akhir, serta untuk
mempermudah dalam menentukan
halaman apa saja yang harus
dirancang untuk memenuhi
kebutuhan dalam pembuatan website.
Gambar 3.2 Struktur Navigasi
Pengguna
Gambar 3.3 Struktur Navigasi
Admin
Pada gambar 3.3 terlihat bahwa
pada mulanya melalui halaman
utama admin akan melakukan login
admin, untuk kemudian mengelola
halaman kegiatan, halaman prestasi,
halaman kurikulum, serta halaman
bantuan.
3.3 Perancangan Sistem
Perancangan sistem pada
pembangunan situs website ini
menggunakan UML untuk model
sebuah sistem. Perancangan model
pada situs website ini digambarkan
melalui diagram use case, diagram
activity, dan diagram class.
3.3.1 Use case Diagram
Dalam perancangan website ini
terdapat dua diagram use case yaitu
diagram use case pengguna dan use
case admin. Pada diagram use case
ini terdapat satu aktor yang
merupakan pengguna sistem (user).
Gambar 3.4 Use Case Pengguna
Pada gambar 3.4 aktor pengguna
memiliki hak untuk mengakses
website, di antaranya untuk melihat
halaman Utama, halaman Info
Sekolah, halaman Galeri, halaman
Unduh, halaman Bantuan, halaman
Profil Sekolah, halaman Fasilitas,
halaman Kegiatan, halaman
Kesiswaan, halaman Kurikulum, dan
halaman Tautan yang berisi
informasi berupa tautan terkait untuk
menuju ke halaman-halaman penting
dan informasi tambahan lain.
Gambar 3.5 Use Case Admin
Pada gambar 3.5 Aktor yang
bertindak sebagai admin memiliki
kewenangan untuk mengakses
sekaligus mengelola halaman
administrator yang berisi halaman
untuk pengelolaan kegiatan, prestasi,
kurikulum, dan bantuan. Dalam hal
ini, admin harus terlebih dahulu
masuk menggunakan password dan
username untuk mengakses dan
mengelola halaman administrator.
Untuk pengelolaan selain dari
pengelolaan pada halaman admin,
akan dilakukan melalui hosting,
setelah proses penggunggahan
website.
3.3.2 Activity Diagram
Sama halnya dengan diagram use
case pada diagram activity juga
digambarkan tentang struktur dan
keterkaitan aktifitas antar halaman
dalam website.
Gambar 3.6 Activity diagram
Pengguna
Diagram pengguna seperti pada
gambar 3.6 merupakan suatu alur
yang berjalan atau dapat diakses oleh
pengguna untuk melihat isi dari
website. Sama halnya dengan
diagram use case pada diagram
activity juga dijelaskan alur dari
halaman utama. Pengguna melalui
halaman utama dapat langsung
mengakses halaman info sekolah,
halaman gallery, halaman download,
halaman helpdesk, halaman profil
sekolah, halaman fasilitas, halaman
new event, halaman kesiswaan,
kurikulum, dan halaman link.
Gambar 3.7 Activity diagram Admin
Gambar 3.7 menerangkan tentang
mekanisme pengelolaan halaman
new event, prestasi, kurikulum, dan
helpdesk melalui admin. Dalam hal
ini admin harus terlebih dahulu login
dengan menggunakan username dan
password.
3.3.3 Class Diagram
Seperti terlihat pada gambar 3.8
Class diagram menggambarkan
hubungan antar basis data dalam
website, yang terdiri dari class
diagram data login admin, input data
new event, input data prestasi, input
data kurikulum, dan input data
helpdesk.
Gambar 3.8 Class Diagram
3.4 Pembuatan Basis Data
Pembuatan basis data merupakan
salah satu tahapan yang bertujuan
untuk menggambarkan struktur dan
bagian-bagian dari suatu basis data,
sehingga relasi antar tabel juga akan
terlihat. Pembuatan basis data
menggunakan PhpMyAdmin, diawali
dengan mengetikkan pada browser
localhost/phpMyadmin. Setelah
muncul tampilan phpMyadmin lalu
pilih create database. Dalam hal ini
untuk login admin database yang
dibuat adalah dbuser, jika sudah
selanjutnya create table, tabel yang
dibuat adalah tabel user. Tabel 3.1
dan 3.2 berikut merupakan
rancangan database login admin
pada website SMP Negeri 262
Jakarta Timur.
Tabel 3.1 Tabel Admin
Tabel 3.1 adalah tabel yang dibuat
untuk merancang data administrator
dalam website SMP Negeri 262
Jakarta Timur. Dalam tabel
administrator terdapat data Id,
Password, serta Username yang
digunakan untuk menyimpan data
login administrator.
database yang kedua yaitu database
untuk new event, dengan nama
dbevent dan untuk tabelnya yaitu
tabel kegiatan.
Tabel 3.2 adalah tabel yang dibuat
untuk untuk menyimpan data New
Event. data tersebut diantaranya data
kegiatan terbaru apa saja yang ada di
SMP Negeri 262 Jakarta Timur
lengkap dengan keterangan waktu
dan tempat kegiatannya.
Kemudian dilanjutkan dengan
pembuatan database berikutnya yaitu
database prestasi, dengan nama
dbprestasi dan untuk tabelnya yaitu
tabel piala.
Tabel 3.3 dibuat untuk merancang
data prestasi dalam website SMP
Negeri 262 Jakarta Timur. Dalam
tabel piala terdapat data No, Juara,
serta Lomba yang digunakan untuk
menyimpan data prestasi.
Lalu untuk pembuatan database
berikutnya yang terdiri dari 3
database yaitu database guru,
database staff humas, dan database
staff sarpras. untuk database guru
dengan nama dbguru dan untuk
tabelnya yaitu tabel guru, untuk staff
humas dengan databasenya yaitu
dbhumas dan tabel humas, sementara
untuk database sarpras dengan nama
dbsarpras dan tabel sarpras.
Tabel 3.4 merupakan struktur
tabel untuk data guru yang terdapat
di SMP Negeri 262 Jakarta Timur.
tabel yang terdiri dari 3 kolom yaitu
id, nama, dan foto tersebut memiliki
fungsi untuk menyimpan data seperti
nama dan foto guru.
Sama seperti pada tabel
sebelumnya yaitu tabel guru pada
tabel humas diatas yang juga terdiri
dari 3 kolom yaitu id, nama, dan foto
memiliki fungsi yang sama yaitu
untuk menyimpan data staff humas
seperti nama dan foto.
Demikian halnya dengan tabel
sarpras diatas yang juga berfungsi
sebagai tabel untuk menyimpan data
para staff sarana dan prasarana
sekolah seperti nama, dan foto.
Kemudian database yang terakhir
yaitu database untuk Helpdesk yaitu
dbkomen dengan nama tabel komen
yang berfungsi untuk menyimpan
data komentar pada helpdesk.
Pada 3.7 terlihat bahwa tabel
komen yang terdiri dari 4 kolom
yaitu Id, nama, email, dan comment
berfungsi untuk menyimpan data
komentar dari para pengunjung
website.
3.5 Perancangan Tampilan Situs
Rancangan situs website
merupakan hal yang diperlukan di
dalam proses pembuatan aplikasi
yang terdapat di dalam suatu situs
website. Rancangan ini digunakan
untuk mengomunikasikan kebutuhan
pengguna ke dalam suatu desain
untuk diisi dengan fitur-fitur website.
3.5.1 Storyboard
Di dalam storyboard atau
rancangan halaman website terdapat
desain atau rancangan mengenai
tampilan halaman website secara
keseluruhan. Dalam pembuatan
website nantinya, desain layout atau
tampilan website mengacu pada
storyboard yang telah dibuat.
Dengan adanya storyboard ini proses
pembuatan website akan menjadi
lebih mudah dan terencana. Dalam
storyboard yang harus diperhatikan
adalah tetap mengikuti rancangan
navigasi, dengan demikian setiap
tahapan desain menjadi lebih terarah.
Perancangan halaman di dalam
website SMP Negeri 262 Jakarta
Timur ini dibagi menjadi dua
tampilan dasar. Kedua tampilan
dasar ini terletak pada halaman
utama, dan halaman konten seperti
terlihat pada gambar 3.9 dan 3.10.
Gambar 3.9 Halaman Utama
Gambar 3.10 Halaman Konten
4. IMPLEMENTASI
4.1 Pembuatan Basis Data
Pembuatan basis data atau
database pada website, berfungsi
sebagai media untuk menyimpan
data pada website. Data tersebut
dapat berupa data login admin atau
data lainnya yang digunakan dalam
website. Selain itu data yang
digunakan biasanya dengan jumlah
tidak sedikit dan bersifat dinamis
serta memerlukan manajemen yang
tinggi sehingga dibutuhkan suatu
basis data untuk menampungnya.
Database pada website ini
menggunakan phpmyadmin dan
dreamweaver. PhpMyAdmin
digunakan untuk pembuatan struktur
database pada server, sementara itu
dreamweaver digunakan untuk
pembuatan rancangan tampilan
database pada website serta untuk
mengoneksikan website dengan
database pada server. Sebelum
membuat database dengan
menggunakan phpmyadmin, langkah
awal yang harus dilakukan adalah
terlebih dahulu memasang xampp
control panel, nantinya akan
berfungsi sebagai server sementara
yang berdiri sendiri (Localhost),
yang terdiri atas program Apache
HTTP Server, MySQL database, dan
penerjemah bahasa yang ditulis
dengan bahasa pemrograman PHP
dan Perl. Setelah xampp control
panel terpasang maka langkah
berikutnya adalah membuka xampp
control panel lalu mengklik tombol
start pada Apache dan MySQL
sebagaimana terlihat pada gambar
4.1.
Gambar 4.1 Xampp Control Panel
Pada gambar 4.1 terlihat bahwa
Apache dan MySQL pada xampp
control panel berada pada posisi
running setelah tombol start diklik,
hal ini menandakan bahwa Apache
dan MySQL pada
Localhost/PhpMyAdmin telah aktif
dan siap untuk dioperasikan.
Setelah Xampp aktif langkah
selanjutnya adalah mulai mengakses
localhost untuk membuat database,
dengan cara mengetikkan pada
browser localhost/phpMyadmin.
Setelah muncul tampilan
phpMyadmin lalu pilih create
database. Database yang akan dibuat
adalah database login admin dan
database prestasi. Untuk login admin
database yang dibuat adalah dbuser.
Jika sudah akan muncul tampilan
seperti gambar 4.2.
Gambar 4.2 Database user pada
PhpMyAdmin
Sebagaimana terlihat pada gambar
4.2 bahwa pembuatan database
menggunakan phpmyadmin yaitu
dbuser. Pada awalnya penggguna
akan diminta untuk menentukan
nama tabel dan jumlah field dari
tabel yang akan dibuat dalam
database. Database login admin
tabel yang akan dibuat adalah tabel
user yang terdiri dari 3 field yaitu Id,
Password, dan Username.
Rancangan tabel untuk database
login admin pada website SMP
Negeri 262 Jakarta Timur terlihat
pada tabel 4.1.
database yang kedua yaitu
database untuk new event, dengan
nama dbevent dan untuk tabelnya
yaitu tabel kegiatan.
Tabel 4.2 adalah tabel yang dibuat
untuk untuk menyimpan data New
Event. data tersebut diantaranya data
kegiatan terbaru apa saja yang ada di
SMP Negeri 262 Jakarta Timur
lengkap dengan keterangan waktu
dan tempat kegiatannya.
Seperti pada pembuatan database
sebelumnya yaitu database login
admin pada pembuatan database kali
ini yaitu database prestasi, proses
pembuatan kurang lebih sama, hanya
sedikit perbedaan terletak pada
penamaan database saja yaitu
dbprestasi dengan tabel yaitu tblpiala
yang terdiri dari 3 field di antaranya
No, Juara, dan Lomba.
Pada tabel 4.3 dapat terlihat
struktur tabel piala dalam database
prestasi, tabel piala tersebut terdiri
dari 3 kolom yaitu kolom No, kolom
juara yang digunakan untuk
menyimpan data kejuaraan dan
prestasi apa saja yang pernah diraih
sekolah, serta kolom lomba yang
berisi data lomba yang pernah diikuti
oleh sekolah.
Lalu untuk pembuatan database
berikutnya yang terdiri dari 3
database yaitu database guru,
database staff humas, dan database
staff sarpras. untuk database guru
dengan nama dbguru dan untuk
tabelnya yaitu tabel guru, untuk staff
humas dengan databasenya yaitu
dbhumas dan tabel humas, sementara
untuk database sarpras dengan nama
dbsarpras dan tabel sarpras.
Tabel 4.4 merupakan struktur
tabel untuk data guru yang terdapat
di SMP Negeri 262 Jakarta Timur.
tabel yang terdiri dari 3 kolom yaitu
id, nama, dan foto tersebut memiliki
fungsi untuk menyimpan data seperti
nama dan foto guru.
Sama seperti pada tabel
sebelumnya yaitu tabel guru pada
tabel humas diatas yang juga terdiri
dari 3 kolom yaitu id, nama, dan foto
memiliki fungsi yang sama yaitu
untuk menyimpan data staff humas
seperti nama dan foto.
Demikian halnya dengan tabel
sarpras diatas, juga berfungsi sebagai
tabel untuk menyimpan data para
staff sarana dan prasarana sekolah
seperti nama, dan foto.
Kemudian database yang terakhir
yaitu database untuk Helpdesk yaitu
dbkomen dengan nama tabel komen
yang berfungsi untuk menyimpan
data komentar pada helpdesk.
Pada 4.7 terlihat bahwa tabel komen
yang terdiri dari 4 kolom yaitu Id,
nama, email, dan comment berfungsi
untuk menyimpan data komentar dari
para pengunjung website.
4.2 Pembuatan Tabel
Pembuatan tabel pada website ini
bertujuan untuk menyimpan data,
karena data yang digunakan dalam
website nantinya akan ditempatkan
pada tabel yang tersimpan dalam
database. Ada 7 tabel yang akan
dibuat, untuk database pertama yaitu
database login admin, tabel yang
dibuat adalah tabel user yang
digunakan untuk menyimpan data
login admin, berupa username dan
password, sementara untuk database
kedua yaitu database new event
dengan tabel kegiatan yang
digunakan unutk menyimpan data
kegiatan yang diselenggarakan di
SMP Negeri 262 Jakarta Timur.
dilanjutkan ke database ketiga yaitu
database prestasi, tabel yang dibuat
adalah tabel piala yang digunakan
untuk menyimpan data prestasi yang
pernah diraih sekolah. database
keempat yaitu database untuk
kurikulum yang terdiri dari tiga
database yaitu database guru dengan
tabel guru, database staff Humas
dengan tabel humas dan database
staff Sarana Prasarana dengan tabel
sarpras yang mana masing-masing
tabel berfungsi untuk menyimpan
data guru, staff humas dan staff
sarpras seperti nama dan foto. dan
database yang terakhir yaitu
database untuk Helpdesk dengan
tabel komen yang berfungsi untuk
menyimpan komentar dari para
pengunjung website SMP Negeri 262
Jakarta Timur.
Untuk pembuatan tabel pertama
yaitu tabel user, tahapan yang
dilakukan kurang lebih sama seperti
pada saat pembuatan database,
karena dalam hal ini tabel juga dibuat
dengan menggunakan phpMyadmin.
Seperti biasa PhpMyAdmin dibuka
dengan cara mengetikkan pada
browser localhost/phpMyadmin. Jika
sudah maka pengguna akan diminta
untuk menentukan nama dari
database yang akan dibuat, apabila
database sudah dibuat langkah
selanjutnya adalah pengguna akan
diminta untuk menentukan nama dari
tabel dan jumlah field yang akan
dibuat, seperti gambar 4.3 .
Gambar 4.3 Pembuatan Tabel User
Pada gambar 4.3 terlihat bahwa
proses pembuatan tabel diawali
dengan mengisikan nama untuk tabel
dan jumlah field yang dikehendaki
lalu klik go. Jika sudah maka akan
muncul tampilan isian untuk
pembuatan struktur tabel yang
digunakan. seperti gambar 4.4.
Gambar 4.4 Tampilan Isian Struktur
Tabel User pada PhpMyAdmin
Berdasarkan gambar 4.4 dapat
terlihat bahwa pada PhpMyAdmin
pengguna diwajibkan untuk mengisi
data yang berada pada kolom yang
tersedia, seperti nama kolom,
kemudian tipe data yang digunakan
pada masing-masing kolom, ukuran
data yang akan disimpan sesuai
kebutuhan. Berikut ini adalah
struktur penulisan sintaksnya apabila
menggunakan SQL :
CREATE TABLE‟user‟.‟user‟(
„id‟INT(3) NOT NULL
AUTO_INCREMENT PRIMARY
KEY,
„username‟VARCHAR(22)
CHARACTER SET latin1
COLLATE latin1_swedish_ci NOT
NULL,
„password‟VARCHAR(50)
CHARACTER SET latin1
COLLATE latin1_swedish_ci NOT
NULL
)ENGINE = InnoDB;
Pada pembuatan tabel yang kedua
yaitu tabel new event yang terdiri
dari 3 kolom yaitu kolom Id,
Kegiatan, Waktu dan Tempat.
berikut ini adalah penulisan sintaks
struktur tabelnya :
CREATE
TABLE‟kegiatan‟.‟kegiatan‟(
„id‟INT(3) NOT NULL
AUTO_INCREMENT PRIMARY
KEY,
„kegiatan‟VARCHAR(25)
CHARACTER SET latin1
COLLATE latin1_swedish_ci NOT
NULL,
„waktu dan tempat‟VARCHAR(100)
CHARACTER SET latin1
COLLATE latin1_swedish_ci NOT
NULL
)ENGINE = InnoDB;
Kemudian untuk pembuatan tabel
berikutnya yaitu tabel piala, langkah
pembuatan tidak jauh berbeda
dengan pembuatan tabel pertama,
hanya saja untuk penamaan kolom
pada tabel piala, terdapat 3 kolom
yaitu kolom No, kolom lomba, dan
juara. Penulisan sintaks struktur
tabelnya adalah :
CREATE TABLE‟piala‟.‟piala‟(
„No‟INT(3) NOT NULL
AUTO_INCREMENT PRIMARY
KEY,
„Juara‟VARCHAR(25)
CHARACTER SET latin1
COLLATE latin1_swedish_ci NOT
NULL
„Lomba‟VARCHAR(100)
CHARACTER SET latin1
COLLATE latin1_swedish_ci NOT
NULL,
)ENGINE = InnoDB;
Pembuatan tabel berikutnya untuk
halaman kurikulum yang terdiri dari
3 tabel yaitu tabel guru, tabel humas,
dan tabel sarpras. yang mana masing-
masing tabel memiliki 3 kolom yaitu
id, nama, dan foto untuk menyimpan
data nama dan foto untuk guru, staff
humas dan staff sarpras.
CREATE TABLE‟guru‟.‟guru‟(
„id‟INT(3) NOT NULL
AUTO_INCREMENT PRIMARY
KEY,
„nama‟VARCHAR(50)
CHARACTER SET latin1
COLLATE latin1_swedish_ci NOT
NULL,
„foto‟VARCHAR(20)
CHARACTER SET latin1
COLLATE latin1_swedish_ci NOT
NULL
)ENGINE = InnoDB;
CREATE TABLE‟humas‟.‟humas‟(
„id‟INT(3) NOT NULL
AUTO_INCREMENT PRIMARY
KEY,
„Lomba‟VARCHAR(50)
CHARACTER SET latin1
COLLATE latin1_swedish_ci NOT
NULL,
„Juara‟VARCHAR(20)
CHARACTER SET latin1
COLLATE latin1_swedish_ci NOT
NULL
)ENGINE = InnoDB;
CREATE TABLE‟sarpras‟.‟sarpras‟(
„id‟INT(3) NOT NULL
AUTO_INCREMENT PRIMARY
KEY,
„Lomba‟VARCHAR(50)
CHARACTER SET latin1
COLLATE latin1_swedish_ci NOT
NULL,
„Juara‟VARCHAR(20)
CHARACTER SET latin1
COLLATE latin1_swedish_ci NOT
NULL
)ENGINE = InnoDB;
Kemudian pada pembuatan tabel
yang terakhir yaitu tabel komen
untuk halaman helpdesk. tabel yang
terdiri dari 4 kolom ini yaitu id,
nama, email, dan komentar berfungsi
sebagai tabel untuk menyimpan data
komentar pengunjung website.
CREATE TABLE‟komen‟.‟komen‟(
„id‟INT(3) NOT NULL
AUTO_INCREMENT PRIMARY
KEY,
„nama‟VARCHAR(50)
CHARACTER SET latin1
COLLATE latin1_swedish_ci NOT
NULL,
„email‟VARCHAR(50)
CHARACTER SET latin1
COLLATE latin1_swedish_ci NOT
NULL
„comment‟VARCHAR(200)
CHARACTER SET latin1
COLLATE latin1_swedish_ci NOT
NULL
)ENGINE = InnoDB;
4.3 Langkah Pembuatan Website
Pembuatan website melalui tiga
tahapan penting yaitu, tahap
perancangan (design) yang dilakukan
untuk merancang tampilan website,
kemudian tahap pengkodean
(coding), yaitu tahap pembuatan
koding website, dan yang terakhir
adalah tahap pengujian (testing) yang
ditujukan untuk menguji apakah
sistem atau website yang dibuat
sudah sesuai dan sudah memenuhi
kebutuhan pengguna.
Untuk pembuatan website sekolah
ini, Penulis melalui beberapa
tahapan, di antaranya harus terlebih
dahulu memasang beberapa
perangkat lunak yang akan
digunakan dalam pembuatan website.
Perangkat lunak tersebut antara lain
Photoshop CS5, adobe dreamweaver
CS5, xampp, Star UML, dan Swish
Max.
4.3.1 Menentukan Struktur
Rancangan Website
Sebelum membuat tampilan
website disarankan untuk terlebih
dahulu menentukan racangan website
yang diinginkan, dalam hal ini
Penulis menggunakan story board
untuk merancang tampilan website.
Gambar 4.5 Halaman Utama
Seperti terlihat pada gambar 4.5,
Pembuatan rancangan tampilan
halaman awal website mengusung
tema yang cukup sederhana. Pada
setiap halamannya terdiri dari satu
header yang merupakan bagian judul
dari website, menubar berisi menu
pilihan berada pada posisi sejajar
dengan header, sidebar di sini
merupakan menu pilihan vertikal
yang berada di sisi sebelah kiri, dan
yang paling penting adalah kolom
untuk menampilkan isi (content)
website, kemudian yang terakhir
adalah footer yang merupakan bagian
paling bawah website.
4.3.2 Pembuatan Tampilan
Website
Pada proses pembuatan website
diawali dengan merancang tampilan,
untuk itu Penulis menggunakan
Photoshop CS5 sebagai perangkat
untuk membuat komponen paling
dasar dari tampilan website itu
sendiri yaitu template.
Penulis juga menggunakan
perangkat untuk mendesain lainnya
seperti StarUML yang digunakan
untuk merancang komponen website
yaitu dari segi perancangan sistem
dimana salah satunya berkaitan
dengan basis data, kemudian
perangkat lunak selanjutnya adalah
Swish Max yang digunakan untuk
merancang tampilan website seperti
pembuatan aplikasi photo slide agar
tampilan website menjadi lebih
menarik lagi.
Kemudian langkah selanjutnya
adalah pembuatan koding, apabila
perancangan tampilan website sudah
selesai maka dapat dilanjutkan ke
tahapan selanjutnya yaitu pembuatan
koding website. Pada pembuatan
koding digunakan Adobe
Dreamweaver CS5 yang tentu saja
sudah diinstalasi terlebih dahulu.
Pembuatan koding di sini adalah
pembuatan koding untuk masing-
masing halaman website.
Lalu dilanjutkan ke tahap
pengujian, sebelum melakukan
pengujian hal pertama yang harus
dilakukan adalah menginstalasi
xampp, karena xampp nantinya akan
digunakan sebagai server sementara
localhost sebelum akhirnya website
diunggah pada sebuah hosting.
Langkah awal adalah menginstalasi
Photoshop CS5 karena Photoshop
akan digunakan untuk mendesain
template website, kemudian jika
sudah diinstalasi langkah selanjutnya
adalah membuka menu
FileNewLayer. Jika sudah
pengguna akan diminta untuk
menyesuaikan ukuran dari layer yang
akan digunakan, ukuran ini nantinya
akan berpengaruh pada tampilan
website, jadi usahakan untuk
menentukan ukuran layer yang tepat.
Ukuran berdasarkan resolusi monitor
komputer yaitu 1366 x 768, seperti
gambar 4.6.
Gambar 4.6 Pembuatan Template
Website
Sebagaimana terlihat pada gambar
4.6 yang merupakan hasil dari
template yang dibuat, menggunakan
beberapa Photoshop tool seperti
Rectangle tool yang digunakan untuk
membuat kolom dan header pada
template website, Rectangular
Marquee tool untuk menandai layer
mana yang akan dislice, dan Slice
tool untuk memotong masing-masing
bagian dari kolom template untuk
pembuatan menubar. Jika sudah
selesai mendesain template langkah
selanjutnya adalah simpan template
tersebut, penyimpanan dilakukan 2
kali yang pertama Save as
file.PSD dan yang kedua adalah Save
for web & device, disarankan untuk
menyimpan dalam folder yang sama
yang nantinya akan digunakan untuk
menyimpan seluruh dokumen web.
4.3.2.1 Halaman Home
Halaman utama adalah halaman
awal yang terdapat pada website,
tampilan halaman awal ini cukup
sederhana, seperti gambar 4.7.
Gambar 4.7 Tampilan Halaman
Utama
Dari gambar 4.7 terlihat bahwa
halaman awal yang terdiri dari judul
yang berisi identitas sekolah,
kemudian menu pilihan horisontal
dan vertikal, khusus pada kolom isi
Penulis tambahkan sedikit aplikasi
photoslide agar lebih menarik serta
footer yang berada pada bagian
paling bawah website.
Berikut adalah koding halaman
utama yaitu index.html :
<html>
<head> <title>.: Selamat Datang di SMP Negeri 262 Jakarta Timur :.</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <style type="text/css">
body,td,th {
color: #000; text-align: center; vertical-align: middle; word-spacing: normal; border-top-width: thin; border-right-width: thin; border-bottom-width: thin; border-left-width: thin;
border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; } menu { text-align: center; }
test { color: #FFF; } </style> <style type="text/css"> body { background-image: url(); background-repeat: no-repeat;
} font { vertical-align: text-top; font-family: "MS Serif", "New York", serif; } </style> <script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<script src="../Scripts/swfobject_modified.js" type="text/javascript"></script> <link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css"> <link href="SpryAssets/SpryMenuBarVertical.css" rel="stylesheet" type="text/css"> <style type="text/css">
a:link { text-decoration: none; } a:visited { text-decoration: none; } a:hover { text-decoration: none;
} a:active { text-decoration: none; } </style> <script type="text/javascript"> function MM_swapImgRestore() { //v3.0 var i,x,a=document.MM_sr;
for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc; } function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p)
d.MM_p=new Array(); var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++) if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}} } function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) { d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);} if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n]; for(i=0;!x&&d.layers&&i<d.layers.length;i++)
x=MM_findObj(n,d.layers[i].document); if(!x && d.getElementById) x=d.getElementById(n); return x; } function MM_swapImage() { //v3.0 var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];} } </script> </head> <body bgcolor="#FFFFFF" text="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0"
marginheight="0" onLoad="MM_preloadImages('images/smpn262_06a.jpg','images/smpn262_06d.jpg','images/smpn262_06f.jpg','images/smpn262_06h.jpg','images/smpn262_06j.jpg','images/smpn262_13b.png','images/smpn262_13d.png')"> <!-- ImageReady Slices (smpn262) --> <table id="Table_01" width="1366" height="768" border="0" cellpadding="0"
cellspacing="0" align="center"> <tr> <td colspan="12"> </td> </tr> <tr> <td colspan="2"> </td> <td colspan="9"><img src="foto/smpn 262.png" width="123" height="136"
align="left"><h1><center>SEKOLAH MENENGAH PERTAMA (SMP) NEGERI 262 JAKARTA</center></h1><h1><center>Jl. Kayu Tinggi, Cakung Timur, Jakarta Timur 13910</center></h1><h1><center> Telp. (021) 4612276</center></h1></td> <td width="70" rowspan="13"><h3> </h3></td>
</tr> <tr> <td width="79" rowspan="12"> </td> <td colspan="5" bgcolor="#336699"><center>
<a href="index.html"
onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image15','','images/smpn262_06a.png',1)"><img src="images/smpn262_06b.png" name="Image15" width="300" height="50" border="0"></a></center></td> <td width="270" bgcolor="#336699"><center> <a href="InfoSekolah.html"
onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image16','','images/smpn262_06d.png',1)"><img src="images/smpn262_06c.png" name="Image16" width="300" height="50" border="0"></a> </center></td> <td width="271" bgcolor="#336699"><center>
<a href="lightbox/Gallery.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image17','','images/smpn262_06f.png',1)"><img src="images/smpn262_06e.png" name="Image17" width="300" height="50" border="0"></a> </center></td>
<td width="270" bgcolor="#336699"><center> <a href="Download.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image18','','images/smpn262_06h.png',1)"><img src="images/smpn262_06g.png" name="Image18" width="300" height="50" border="0"></a>
</center></td> <td colspan="2" bgcolor="#336699"><center> <a href="Helpdesk.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image19','','images/smpn262_06j.png',1)"><img src="images/smpn262_06i.png" name="Image19" width="300" height="50" border="0"></a> </center></td>
</tr> <tr> <td height="16" colspan="10" bgcolor="#e1ebf7"> <p align="center"> </p></td> </tr> <tr> <td colspan="2" rowspan="8"
bgcolor="#e1ebf7"> </td> <td width="172" height="78" bgcolor="#336699"><ul id="MenuBar1" class="MenuBarVertical"> <li><a class="MenuBarItemSubmenu" href="#"> <h2>Profil</h2></a> <ul> <li><a
href="Sejarah.html"><h3>Sejarah</h3></a></li> <li><a href="Visi.html"><h3>Visi</h3></a></li>
<li><a
href="Misi.html"><h3>Misi</h3></a></li> </ul> </li> </ul></td><td width="26" rowspan="8" bgcolor="#e1ebf7"> </td><td height="474" colspan="5" rowspan="7" align="center"><p><font color="#006699" size="+2">.: SELAMAT DATANG DI
WEBSITE SMP NEGERI 262 JAKARTA TIMUR :.</font></p><p align="center"><object id="FlashID" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="1137" height="451"> <param name="movie" value="Content/Movie2.swf"> <param name="quality" value="high">
<param name="wmode" value="opaque"> <param name="swfversion" value="8.0.35.0"> <!-- This param tag prompts users with Flash Player 6.0 r65 and higher to download the latest version of Flash Player. Delete it if you don‟t want users to see the prompt. --> <param name="expressinstall"
value="../Scripts/expressInstall.swf"> <!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. --> <!--[if !IE]>--> <object type="application/x-shockwave-flash" data="Content/Movie2.swf" width="1137" height="451"> <!--<![endif]-->
<param name="quality" value="high"> <param name="wmode" value="opaque"> <param name="swfversion" value="8.0.35.0"> <param name="expressinstall" value="../Scripts/expressInstall.swf"> <!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. -->
<div> <h4>Content on this page requires a newer version of Adobe Flash Player.</h4> <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get
Adobe Flash player" /></a></p> </div> <!--[if !IE]>--> </object> <!--<![endif]--> </object> </p></td> <td width="45" rowspan="8"
bgcolor="#e1ebf7"> </td> </tr> <tr>
<td width="172" height="78"
bgcolor="#336699"><ul id="MenuBar3" class="MenuBarVertical"> <li><a class="MenuBarItemSubmenu" href="#"><h2>Fasilitas</h2></a> <ul> <li><a href="RuangPraktek.html"><h3>R. Praktek</h3></a></li> <li><a href="RuangSarPras.html"><h3>R.
SarPras</h3></a></li> <li><a href="KantinSekolah.html"><h3>Kantin </h3></a></li> </ul></li> </ul> </td> </tr> <tr> <td width="172" height="78"
bgcolor="#336699"><a href="UpcomingEvent.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image20','','images/smpn262_13d.png',1)"><img src="images/smpn262_13c.png" name="Image20" width="172" height="85" border="0"></a></td>
</tr> <tr> <td bgcolor="#e1ebf7"> </td> </tr> <tr> <td width="172" height="75" bgcolor="#336699"><ul id="MenuBar5" class="MenuBarVertical"> <li><a class="MenuBarItemSubmenu" href="#"><h2>Kesiswaan</h2></a>
<ul> <li><a href="Tatatertib.html"><h3>Tata Tertib</h3></a></li> <li><a href="Ekstrakurikuler.html"><h3>Ekstrakurikuler</h3></a></li> <li><a href="Prestasi-Prestasi.php"><h3>Prestasi</h3></a></li> </ul> </li> </ul> </td> </tr> <tr> <td width="172" height="76" bgcolor="#336699"><ul id="MenuBar6"
class="MenuBarVertical"> <li><a class="MenuBarItemSubmenu" href="#"><h2>Kurikulum</h2></a> <ul> <li><a href="Guru.html"><h3>Guru</h3></a></li> <li><a href="Staff Humas.html"><h3>Staff Humas</h3></a></li>
<li><a href="Staff Sarana Prasarana.html"><h3>Staff SarPras</h3></a></li> </ul> </li> </ul> </td> </tr>
<tr> <td width="172" height="75" bgcolor="#336699"><a href="login.php" onMouseOut="MM_swapImgRestore()"
onMouseOver="MM_swapImage('Image21','','im
ages/smpn262_13b.png',1)"><img src="images/smpn262_13a.png" name="Image21" width="172" height="85" border="0"></a></td> </tr> <tr> <td height="19" bgcolor="#e1ebf7"> </td> <td colspan="5" bgcolor="#e1ebf7"
width="26"> </td> </tr> <tr> <td height="30" colspan="10" bgcolor="#336699"><font color="#FFFFFF"><h2>Copyright © 2012 Sekolah Menengah Pertama Negeri 262 Jakarta . All rights reserved . Template by Erni
Wigati</h2></font></td> </tr> <tr> <td colspan="10"> </td> </tr> <tr> <td> <img src="images/spacer.gif" width="78"
height="1" alt=""></td> <td width="2"> <img src="images/spacer.gif" width="2" height="1" alt=""></td> <td width="17"> <img src="images/spacer.gif" width="12" height="1" alt=""></td> <td>
<img src="images/spacer.gif" width="130" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="14" height="1" alt=""></td> <td width="92"> <img src="images/spacer.gif" width="85" height="1" alt=""></td> <td>
<img src="images/spacer.gif" width="243" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="244" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="243" height="1" alt=""></td>
<td width="234"> <img src="images/spacer.gif" width="231" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="14" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="70"
height="1" alt=""></td> </tr> </table> <!-- End ImageReady Slices -->
<script type="text/javascript">
var MenuBar3 = new Spry.Widget.MenuBar("MenuBar3", {imgRight:"SpryAssets/SpryMenuBarRightHover.gif"}); var MenuBar4 = new Spry.Widget.MenuBar("MenuBar4", {imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
var MenuBar5 = new Spry.Widget.MenuBar("MenuBar5", {imgRight:"SpryAssets/SpryMenuBarRightHover.gif"}); var MenuBar6 = new Spry.Widget.MenuBar("MenuBar6", {imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
swfobject.registerObject("FlashID"); var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgRight:"../SpryAssets/SpryMenuBarRightHover.gif"}); </script> </body> </html>
4.3.2.2 Halaman Sebelah Kiri
Halaman yang dimaksud adalah
halaman yang berada pada menu
pilihan vertikal yang berada di
sebelah kiri, seperti gambar 4.8.
Gambar 4.8 Tampilan Halaman
Sebelah kiri
Pada gambar 4.8 terlihat pada
menu sebelah kiri terdapat sub menu
yang terdiri dari tiga sub menu untuk
masing-masing menu yang tersedia.
Sub menu tersebut salah satunya
adalah sub menu visi, misi, dan
sejarah yang berada dalam menu
profil sekolah, kemudian terdapat
juga beberapa sub menu lain, yaitu
sub menu untuk menu fasilitas yang
terdiri dari ruang kerja praktek, ruang
sarana prasarna, dan kantin sekolah
dan lain-lain.
Berikut ini adalah koding halaman
navigasi sebelah kiri yaitu
sejarah.html :
<html> <head>
<title>Sejarah</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <script type="text/javascript"> function MM_swapImgRestore() { //v3.0 var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
} function MM_preloadImages() { //v3.0 var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array(); var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++) if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
} function MM_findObj(n, d) { //v4.01 var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) { d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n]; for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); if(!x && d.getElementById) x=d.getElementById(n); return x; }
function MM_swapImage() { //v3.0 var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3) if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];} }
</script> </head> <body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"
onLoad="MM_preloadImages('images/smpn262_
06a.png','images/smpn262_06d.png','images/smpn262_06f.png','images/smpn262_06h.png','images/smpn262_06j.png')"> <!-- ImageReady Slices (smpn262.psd) --> <table id="Table_01" align= "center" width="1366" height="718" border="0" cellpadding="0" cellspacing="0"> <tr>
<td colspan="12"> </td> </tr> <tr> <td colspan="2"> </td> <td colspan="8"><img src="foto/smpn 262.png" width="123" height="136" align="left"><h1><center>SEKOLAH MENENGAH PERTAMA (SMP) NEGERI 262
JAKARTA</center></h1><h1><center>Jl. Kayu Tinggi, Cakung Timur, Jakarta Timur 13910</center></h1><h1><center> Telp. (021) 4612276</center></h1></td> </tr> <tr> <td rowspan="4"> <td height="50" colspan="2"><a
href="index.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image22','','images/smpn262_06a.png',1)"><img src="images/smpn262_06b.png" name="Image22" width="300" height="50" border="0"></a></td> <td><a href="InfoSekolah.html"
onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image19','','images/smpn262_06d.png',1)"><img src="images/smpn262_06c.png" name="Image19" width="300" height="50" border="0"></a></td> <td><a href="lightbox/Gallery.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image20','','im
ages/smpn262_06f.png',1)"><img src="images/smpn262_06e.png" name="Image20" width="300" height="50" border="0"></a></td> <td><a href="Download.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image21','','images/smpn262_06h.png',1)"><img
src="images/smpn262_06g.png" name="Image21" width="300" height="50" border="0"></a></td> <td><a href="Helpdesk.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image23','','images/smpn262_06j.png',1)"><img src="images/smpn262_06i.png"
name="Image23" width="300" height="50" border="0"></a></td> </tr> <tr>
<td colspan="6" height="78"
bgcolor="#e1ebf7"> <p><h1><center> .: Sejarah :. </center></h1> </p> <center><img src="foto/entry.png" width="747" height="560"></center <blockquote> <p class="MsoNormal" style="text-align: justify;
text-indent: 0.5in;"><font size="+2">Sekolah Menengah Pertama Negeri 262 merupakan salah satu sekolah yang berlokasi di wilayah Cakung Timur, Jakarta Timur. Sekolah Negeri yang sudah berdiri sejak tahun 1990 ini, telah berhasil mencetak lulusan – lulusan berkualitas yang diharapkan kelak dapat menjadi generasi penerus yang turut serta memberikan kontribusinya
terhadap kemajuan bangsa dan negara. Selama 21 tahun mengabdi, terhitung dari mulai diresmikannya pada tanggal 11 September 1990 oleh Gubernur Jakarta yang menjabat kala itu, yaitu Bapak Wiyogo Atmo Darminto, sudah banyak sekali prestasi – prestasi yang diraih terutama untuk beberapa ekstrakurikuler seperti Paskibra yang pernah mengikuti kejuaraan tingkat
Jabotabek dan ekstrakurikuler Rohis yang juga pernah mengikuti kejuaraan di tingkat DKI.</font></p> </blockquote> <blockquote> <p class="MsoNormal" style="text-align: justify; text-indent: 0.5in;"><font size="+2">Seiring perkembangannya Sekolah
Menengah Pertama Negeri 262 Jakarta Timur kini telah banyak mengalami perubahan baik dari segi pembangunan maupun pengadaan fasilitas-fasilitas baru, terbukti dengan adanya pembangunan yang baru-baru ini dilakukan yaitu pembangunan gerbang serta pagar sekolah.sehingga tidak heran jika kini Sekolah Menengah Pertama Negeri 262 Jakarta Timur menjadi lebih megah dan juga sudah dilengkapi
dengan berbagai fasilitas sarana dan prasarana yang memadai seperti, ruang perpustakaan, ruang unit kesehatan sekolah, mushola, beberapa ruang praktek seperti ruang praktek IPA, ruang praktek tata busana, kantin dan pos keamanan sekolah. selain itu Sekolah Menengah Pertama Negeri 262 juga telah dilengkapi dengan fasilitas Wifi.</font></p></blockquote> <p> </p>
</td> </tr> <tr> <td align="center" colspan="6" height="30" bgcolor="336699"><font color="#FFFFFF"><h2>Copyright © 2012 Sekolah Menengah Pertama Negeri 262 Jakarta . All rights reserved . Template by Erni
Wigati</h2></font></td> </tr> <tr> <td colspan="6"> </td>
</tr>
<tr> <td> <img src="file:///C|/Users/DIDIK/Desktop/images/spacer.gif" width="76" height="1" alt=""></td> <td> <img src="file:///C|/Users/DIDIK/Desktop/images/spac
er.gif" width="1" height="1" alt=""></td> <td> <img src="file:///C|/Users/DIDIK/Desktop/images/spacer.gif" width="241" height="1" alt=""></td> <td> <img src="file:///C|/Users/DIDIK/Desktop/images/spac
er.gif" width="243" height="1" alt=""></td> <td> <img src="file:///C|/Users/DIDIK/Desktop/images/spacer.gif" width="244" height="1" alt=""></td> <td> <img src="file:///C|/Users/DIDIK/Desktop/images/spac
er.gif" width="243" height="1" alt=""></td> <td> <img src="file:///C|/Users/DIDIK/Desktop/images/spacer.gif" width="250" height="1" alt=""></td> <td> <img src="file:///C|/Users/DIDIK/Desktop/images/spac
er.gif" width="68" height="1" alt=""></td> </tr> </table> <!-- End ImageReady Slices --> </body> </html>
4.3.2.3 Halaman Admin
Halaman admin adalah halaman
yang berisikan form untuk login
administrator dan beberapa menu
admin, seperti gambar 4.9.
Gambar 4.9 Halaman Admin
Halaman Admin pada gambar 4.9
adalah halaman yang hanya dapat
diakses oleh admin setelah melalui
proses login admin. Dalam halaman
tersebut terdapat beberapa menu
untuk manajemen data.
Berikut adalah koding halaman
admin tepatnya halaman setelah
login admin yaitu securepage.php :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>secure page</title> <style type="text/css">
a:link { text-decoration: none; } a:visited { text-decoration: none; } a:hover { text-decoration: none; }
a:active { text-decoration: none; } </style> </head> <table border="0" align="center" width="1366" height="768"> <body>
<tr> <td colspan="5"><img src="foto/smpn 262.JPG" width="123" height="136" align="left"><h2><center>SEKOLAH MENENGAH PERTAMA (SMP) NEGERI 262 JAKARTA</center></h2><h2><center>Jl. Kayu Tinggi, Cakung Timur, Jakarta Timur 13910</center></h2><h2><center>
Telp. (021) 4612276</center></h2> </td> </tr> <tr> <td width="20" height="25" bgcolor="#336699"><center><a href="smpn262.cfm"><font color="#FFFFFF" size="+2">Home
</font></a></center></td> <td width="20" height="25" bgcolor="#336699"><center><a href="Info Sekolah.html"><font color="#FFFFFF" size="+2">Info Sekolah
</font></a></center></td>
<td width="20" height="25" bgcolor="#336699"><center><a href="Gallery.html"><font color="#FFFFFF" size="+2">Gallery </font></a></center></td> <td width="15" height="25"bgcolor="#336699"><center><a href="Download.html"><font color="#FFFFFF"
size="+2">Download </font></a></center></td> <td width="15" height="25" bgcolor="#336699"><center><a href="Upcoming Event.html"><font color="#FFFFFF" size="+2">Upcoming Event </font></a></center></td> </tr>
<tr> <td colspan="5"><p> <blockquote> <p> <h1> <center> <?
include "session.php"; ?> <p>Halo Selamat Datang <? echo $_SESSION['username']; ?></p> <h5>Anda sekarang sudah masuk kedalam sistem <br> Silahkan anda masukan atau sisipkan program lain disini
<br> <br> <p> <br> <br> <br> <center><a href="smpn262.html"><font size=+1>HOME |</a><a href="Download.html"><font size=+1>
DOWNLOADS |</a><a href="Input Prestasi.php"><font size=+1> MANAGEMEN PRESTASI |</a><a href="logout.php"><font size=+1> LOGOUT |</a></center> </p> <tr> <td bgcolor="#336699" align="center" colspan="5"><p><font color="#FFFFFF"
size="+1">Copyright © 2012 Sekolah Menengah Pertama Negeri 262 Jakarta . All rights reserved . Template by Erni Wigati</font></p></td> </tr> </body> </table> </html>
4.3.2.4 Halaman Menu Admin
Halaman menu admin adalah
halaman yang berisi beberapa menu
admin, yang digunakan khusus untuk
managemen data admin, seperti
gambar 4.10.
Gambar 4.10 Halaman Menu Admin
Gambar 4.10 merupakan gambar
tampilan halaman menu untuk
managemen data prestasi. Pada
halaman ini admin dapat melalukkan
perintah manipulasi data seperti
insert, update, dan delete. Berikut
adalah koding halaman salah satu
menu admin yaitu inputprestasi.php :
<?php session_start(); if(!isset($_SESSION["berhasil_login"]) and !isset($_SESSION["username"]) and !isset($_SESSION["password"])){ die("<b><center><h1>Anda tidak mempunyai hak untuk mengakses halaman ini, silahkan <a href='login.php'>
LOGIN</h1></center></b></a>"); }else{ require_once('../Connections/prestasi.php'); ?> <?php if (!function_exists("GetSQLValueString")) { function GetSQLValueString($theValue, $theType, $theDefinedValue = "", $theNotDefinedValue = "")
{ if (PHP_VERSION < 6) { $theValue = get_magic_quotes_gpc() ? stripslashes($theValue) : $theValue; } $theValue = function_exists("mysql_real_escape_string") ?
mysql_real_escape_string($theValue) : mysql_escape_string($theValue); switch ($theType) { case "text": $theValue = ($theValue != "") ? "'" . $theValue . "'" : "NULL"; break; case "long":
case "int":
$theValue = ($theValue != "") ? intval($theValue) : "NULL"; break; case "double": $theValue = ($theValue != "") ? doubleval($theValue) : "NULL"; break; case "date":
$theValue = ($theValue != "") ? "'" . $theValue . "'" : "NULL"; break; case "defined": $theValue = ($theValue != "") ? $theDefinedValue : $theNotDefinedValue; break; }
return $theValue; } } $editFormAction = $_SERVER['PHP_SELF']; if (isset($_SERVER['QUERY_STRING'])) { $editFormAction .= "?" . htmlentities($_SERVER['QUERY_STRING']);
} if ((isset($_POST["MM_insert"])) && ($_POST["MM_insert"] == "form1")) { $insertSQL = sprintf("INSERT INTO piala (`No`, Juara, Lomba) VALUES (%s, %s, %s)", GetSQLValueString($_POST['No'], "int"),
GetSQLValueString($_POST['Juara'], "text"), GetSQLValueString($_POST['Lomba'], "text")); mysql_select_db($database_prestasi, $prestasi); $Result1 = mysql_query($insertSQL, $prestasi) or die(mysql_error()); $insertGoTo = "Tampil Prestasi.php";
if (isset($_SERVER['QUERY_STRING'])) { $insertGoTo .= (strpos($insertGoTo, '?')) ? "&" : "?"; $insertGoTo .= $_SERVER['QUERY_STRING']; } header(sprintf("Location: %s", $insertGoTo)); }
} ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Input Prestasi</title> </head>
<body><h1><center>Input Data
Prestasi</center></h1> <form action="<?php echo $editFormAction; ?>" method="post" name="form1" id="form1"> <table align="center"> <tr valign="baseline"> <td nowrap="nowrap" align="right">No :</td> <td><input type="text" name="No" value=""
size="32" /></td> </tr> <tr valign="baseline"> <td nowrap="nowrap" align="right">Juara:</td> <td><input type="text" name="Juara" value="" size="32" /></td> </tr>
<tr valign="baseline"> <td nowrap="nowrap" align="right">Lomba:</td> <td><input type="text" name="Lomba" value="" size="32" /></td> </tr> <tr valign="baseline"> <td nowrap="nowrap"
align="right"> </td> <td><input type="submit" value="Insert record" /></td> </tr> </table> <input type="hidden" name="MM_insert" value="form1" /> </form>
<p> <left><a href="securepage.php"> << Back </a></left></p> <right><a href="logout.php">Logout >> </a></right></p> </body> </html>
4.3.3 Pembuatan Koding
Koding pada website ini dibuat
dengan menggunakan bahasa
pemrograman web seperti HTML,
PHP, serta beberapa bahasa
pemrograman tambahan lain seperti
CSS. Penulis menggunakan
perangkat lunak adobe dreamweaver
CS5 sebagai media penulisan koding.
Pembuatan koding dimulai dengan
pembuatan koding untuk halaman
utama website kemudian menyusul
ke halaman-halaman selanjutnya,
seperti gambar 4.11 .
Gambar 4.11 Koding Website pada
Adobe Dreamweaver CS5
Gambar 4.11 merupakan salah satu
dari tahap pembuatan koding
menggunakan Dreamweaver CS5.
4.3.4 Unggah Website
Tahap selanjutnya setelah
pembuatan web dan pengodean
adalah tahap implementasi.
Pengimplementasian web diawali
dengan tahap mengunggah web SMP
Negeri 262 Jakarta Timur. Langkah-
langkah pengunggahan website ke
internet akan dijelaskan berikut ini.
Pertama menentukan terlebih
dahulu hosting dan domain yang
akan digunakan. Tahap pengujian
awal menggunakan hosting dan
domain berbayar. Jika sudah maka
pengunggahan dapat segera
dilakukan dengan mengikuti
prosedur yang ditetapkan oleh
penyedia layanan hosting dan
domain. Untuk pemilihan hosting
dan domain Penulis menggunakan
layanan dari situs
www.idwebhost.com. Tahap awal
untuk unggah adalah membuka situs
dengan mengetikkan pada browser
www.idwebhost.com. Lalu bagi
pengguna yang belum terdaftar
sebagai anggota harus terlebih
dahulu mendaftar dengan mengisi
form pendaftaran untuk menjadi
anggota dan membayar biaya
registrasi untuk domain dan hosting
sesuai paket yang dipilih dalam hal
ini penulis memilih paket untuk
domain dengan nama
www.smpn262jakarta.sch.id beserta
hostingnya yaitu idPro untuk
kapasitas 1GB, namun jika sudah
menjadi anggota dapat segera
mendaftarkan dengan memakai
username dan password yang sudah
dibuat saat mendaftar, seperti terlihat
pada gambar 4.12.
Gambar 4.12 Halaman Admin pada
Hosting
Gambar 4.12 adalah tampilan
halaman awal pada hosting setelah
pengguna login sebagai anggota,
apabila pengguna sudah terdaftar
sebagai anggota dan sudah membeli
domain maka pengguna akan secara
langsung memiliki domain. Pada
halaman tersebut terdapat pilihan go
to Cpanel, lalu klik pilihan tersebut
untuk mengunggah website. Penulis
mengunggah website dengan
menggunakan perangkat lunak
FileZilla yang berfungsi sebagai
client penghubung antara komputer
dengan server. Tahap yang pertama
yang dilakukan adalah membuka
filezilla yang tentunya sudah terlebih
dahulu diinstalasi, lalu mengisikan
data berikut, seperti terlihat pada
gambar 4.13.
Gambar 4.13 FileZilla
Pada gambar 4.13 isi kolom Host
dengan nama domain yang sudah
dibuat sebelumnya, yaitu
“www.smpn262jakarta.sch.id”,
kemudian isi Username dan
Password dengan username dan
password cpanel yang diperoleh
setelah mendaftar sebagai anggota,
lalu selanjutnya adalah isi Port
dengan “21″, dan Klik
Quickconnect untuk menjalankan
filezilla. Setelah mengklik
Quickconnect maka akan muncul
tampilan untuk mengunggah.
Gambar 4.14 Tampilan unggah pada
FileZilla
Pada gambar 4.14 terlihat bahwa
sisi kiri adalah komputer pengguna
yang bertindak sebagai client tempat
data website yang akan diunggah
sementara yang terlihat pada sisi
kanan adalah posisi server tempat
untuk mengunggah data website.
Kemudian langkah selanjutnya
adalah memilih folder yang berisi
data yang akan diunggah pada sisi
kiri untuk kemudian diunggah di
server. Sebelum melakukan
pengunggahan pastikan bahwa posisi
folder penyimpanan pada sisi kanan
server berada pada folder
“public_html” karena data website
akan di simpan dalam server ini,
seperti terlihat pada gambar 4.15.
Gambar 4.15 Pengunggahan Data
Pada Public_html
Berdasarkan gambar 4.15 setelah
masuk ke public_html, cari file pada
lokal komputer yang akan diunggah
lalu klik kanan pilih menu upload
pada folder di lokal komputer,
kemudian tunggu sampai proses
unggah selesai.
4.5 Pengujian
Pengujian website terdiri dari
skenario pengujian, hasil pengujian
dan analisis pengujian untuk melihat
apakah website yang dibuat layak
dipublikasikan atau tidak. Atas dasar
itulah maka Penulis membuat
kuisioner mengenai website tersebut.
Pengujian yang dilakukan terhadap
50 orang responden yang terdiri dari
27 orang dari kalangan mahasiswa
Universitas Gunadarma usia 20-25
tahun, kemudian 14 orang dari
kalangan pelajar SMP Negeri 262
usia , serta 10 orang karyawan SMP
Negeri 262 ini bertujuan untuk
mengetahui sejauh mana website
SMP Negeri 262 Jakarta Timur ini
dapat digunakan. Adapun pertanyaan
yang diajukan adalah :
1. Menurut anda, apakah tampilan
website ini menarik ?
2. Menurut anda, apakah isi dari
website ini informatif ?
3. Menurut anda, bagaimana
penggunaan link dalam website ini ?
4. Apakah anda mendapatkan seluruh
informasi yang diinginkan dalam
website ini ?
Setelah dilakukan pengujian
terhadap 50 orang responden,
mengenai website SMP Negeri 262
maka didapat data sebagai berikut :
Setelah dilakukan pengambilan
data pengisian kuisioner
sebagaimana terlihat pada tabel 4.3,
Penulis memperoleh hasil prosentase
bahwa rata-rata 77% dari 50
responden menyukai website SMP
Negeri 262 Jakarta Timur.
5. PENUTUP
5.1 Kesimpulan
Website SMP Negeri 262 ini
telah berhasil dibuat dengan
menggunakan html, PHP, dan
MySQL. Pada website ini terdapat
informasi tentang info sekolah, profil
sekolah, fasilitas, prestasi-prestasi,
dan informasi lain yang berhubungan
dengan kesiswaan dan kurikulum.
Dengan demikian maka perancangan
dan pembuatan website SMP Negeri
262 ini diharapkan dapat
memberikan kemudahan bagi
masyarakat untuk memperoleh
informasi yang dibutuhkan, serta
memberi pengaruh besar bagi
sekolah dalam mempromosikan
sekolahnya.
Website ini telah diunggah dan
sudah dapat diakses di alamat
www.smpn262jakarta.sch.id.
Berdasarkan hasil pengujian dari
kuisioner yang telah disebarkan
kepada 50 orang responden, didapat
hasil 77% dari 50 orang responden
menyukai dan setuju bahwa website
ini mudah digunakan untuk mencari
informasi yang berkaitan dengan
SMP Negeri 262 Jakarta Timur.
5.2 Saran
Website ini masih terbuka untuk
dikembangkan menjadi lebih baik
lagi seperti penambahan isi website,
pengaturan tampilan agar lebih
menarik, penambahan animasi, serta
penambahan konten lain agar website
lebih interaktif lagi, tidak hanya
sebatas mengelola informasi lingkup
sekolah saja seperti fasilitas sekolah
dan sebagainya, tetapi juga
mengelola data lain yang
berhubungan dengan kebutuhan
sekolah sehingga SMP Negeri 262
Jakarta Timur menjadi lebih maju
lagi ke depannya dalam bidang
informasi.
DAFTAR PUSTAKA
1. Indah, A, Belajar HTML (Web
Browser), Jasakom, Bandung, 2007.
2. Kadir, Abdul, Dasar
Pemrograman Web Dinamis
Menggunakan PHP, ANDI,
Yogyakarta, 2003.
3. Maulana Syarif, Arry, Photoshop
CS5, PT. Elex Media Komputindo,
Jakarta,
2008.
4. Meloni, J, Pengertian Internet,
Jasakom, Bandung, 2012.
5. Munawar, Pemodelan Visual
dengan UML, Graha Ilmu,
Yogyakarta, 2005.
6. Nugroho, Bunafit, Membuat
Website Sendiri dengan PHP-
MySQL, ANDI Yogyakarta, 2008.
7. Putra, Struktur Navigasi,
Maxikom, Palembang, 2011.
8. Razak, MySQL, ANDI,
Yogyakarta, 2012.
9. Retownga,V, Swish Max, Media
Komputindo, Jakarta, 2011.
10. Wijaya, G, SDLC (Software
Development Life Cycle), Bhuana,
Jakarta, 2012.