PERANCANGAN WEBSITE SEKOLAH MENENGAH PERTAMA …publication.gunadarma.ac.id/bitstream/123456789/5330/1/JURNAL... · pemrograman web PHP dan HTML. 1.3 Tujuan Penulisan Tujuan dari

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


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



Berdasarkan hal tersebut, maka

pada penulisan Tugas Akhir kali ini

Penulis mengangkat judul

“Perancangan Website Sekolah


Cakumg Jakarta Timur dengan

menggunakan PHP dan MySQL”.

Pada website ini terdapat informasi

yang relevan seputar Sekolah



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


262 Cakung Jakarta Timur sehingga

diharapkan nantinya dengan adanya

website tersebut sekolah dapat

memberikan informasi yang relevan

berkenaan dengan Sekolah


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.


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

http://id.wikipedia.org/wiki/Object_Oriented_Programming

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


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.


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


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.


Pengguna


Admin


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.


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.


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


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


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


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.


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


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)



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‟(



KEY,

„kegiatan‟VARCHAR(25)



NULL,

„waktu dan tempat‟VARCHAR(100)



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


KEY,

„Juara‟VARCHAR(25)



NULL

„Lomba‟VARCHAR(100)



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‟(



KEY,

„nama‟VARCHAR(50)



NULL,

„foto‟VARCHAR(20)



NULL

)ENGINE = InnoDB;

CREATE TABLE‟humas‟.‟humas‟(



KEY,




NULL,




NULL

)ENGINE = InnoDB;

CREATE TABLE‟sarpras‟.‟sarpras‟(



KEY,




NULL,




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‟(



KEY,

„nama‟VARCHAR(50)



NULL,

„email‟VARCHAR(50)



NULL

„comment‟VARCHAR(200)



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


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')">  <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">  <param name="expressinstall"

value="../Scripts/expressInstall.swf">   <object type="application/x-shockwave-flash" data="Content/Movie2.swf" width="1137" height="451"> 

<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"> 

<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>  </object>  </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> 

<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')">  <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="68" height="1" alt=""></td> </tr> </table>  </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


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.

Documents

PERANCANGAN WEBSITE SEKOLAH MENENGAH PERTAMA …publication.gunadarma.ac.id/bitstream/123456789/5330/1/JURNAL... · pemrograman web PHP dan HTML. 1.3 Tujuan Penulisan Tujuan dari