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 masyarakat.

Timur

kepada

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 2. TINJAUAN PUSTAKA 2.1 Internet Internet (interconnectionnetworking) 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

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. 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 halamanhalaman 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 kodekode (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 : ..................................... Dalam hal ini skrip berperan sebagai tanda awal penulisan dokumen html, kemudian sebagai informasi page header. Di dalam skrip ini pemrogram dapat meletakkan tag – tag title, base, isi index, link, script, style dan meta, untuk skrip

Example One

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 : Kata yang di klick contoh : KAM PUS 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 :

?>

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 Penulisan \” \\ \$ \n \r \t \x00 s/d\Xff

Karakter yang Dimaksud Petik Ganda Backslash Tanda Dolar Newline Carriage Return Tab Karakter Heksadesimal

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

atau sebagai berikut :
Operator () ~,!,++,--,$,& *,/,% +,-

Prioritas Tertinggi

<>,<=,>= ==,!= Terendah ^ ! && || =, +=, -=, *=, /=, &=, |=, ^=, = AND (&&) XOR (||) OR

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

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

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

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 PHPNuke. Popularitas sebagai aplikasi web tersebut dikarenakan kedekatannya dengan bahasa pemrograman web PHP, sehingga seringkali disebut sebagai Dynamic Duo (Kristianto, 2002).

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.

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

Gambar 2.3 Struktur Navigasi NonLinier

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.

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 Gambar 2.5 Komposit

Struktur

Navigasi

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

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.

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

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

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 1980an. Sekarang UML sudah mulai banyak digunakan oleh para praktisi OOP. UML merupakan dasar bagi

perangkat (tool) desain berorientasi objek dari IBM.

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

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 Diagram

Contoh

Activity

c. Class Diagram, seperti pada gambar 2.12 digunakan untuk memodelkan struktur kelas dalam basis data.

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.12 Contoh Class Diagram d. Sequence Diagram, seperti terlihat pada gambar 2.13 digunakan untuk memodelkan pengiriman pesan (message) antar objects.

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.13 Diagram

Contoh

Sequence

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.

Gambar 3.2 Struktur Navigasi Pengguna

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.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).

3.3.2 Activity Diagram

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.

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.

dan 3.2 berikut merupakan rancangan database login admin pada website SMP Negeri 262 Jakarta Timur. Tabel 3.1 Tabel Admin

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.

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.

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

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

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

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

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

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 masingmasing 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 Rancangan Website

Struktur

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.

localhost sebelum akhirnya website diunggah pada sebuah hosting.

4.3.2 Pembuatan Website

Langkah awal adalah menginstalasi Photoshop CS5 karena Photoshop akan digunakan untuk mendesain template website, kemudian jika sudah diinstalasi langkah selanjutnya adalah membuka menu FileNewLayer. 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.

Tampilan

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

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 utama yaitu index.html :

halaman

<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 type="text/css"> body { background-image: url(); background-repeat: no-repeat; } font { vertical-align: text-top; font-family: "MS Serif", "New York", serif; } <script src="SpryAssets/SpryMenuBar.js" type="text/javascript"> <script src="../Scripts/swfobject_modified.js" type="text/javascript"> <style type="text/css"> a:link { text-decoration: none; } a:visited { text-decoration: none; } a:hover { text-decoration: none; } a:active { text-decoration: none; } <script type="text/javascript"> function MM_swapImgRestore() { //v3.0 var i,x,a=document.MM_sr; for(i=0;a&&i
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.argum ents; for(i=0; i0&&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

		SEKOLAH MENENGAH PERTAMA (SMP) NEGERI 262 JAKARTA Jl. Kayu Tinggi, Cakung Timur, Jakarta Timur 13910 Telp. (021) 4612276
			Profil Sejarah Visi Misi		.: SELAMAT DATANG DI WEBSITE SMP NEGERI 262 JAKARTA TIMUR :.
			Fasilitas R. Praktek R. SarPras Kantin
			Kurikulum Guru Staff Humas Staff SarPras
			onMouseOver="MM_swapImage('Image21','','im ages/smpn262_13b.png',1)">
	Copyright © 2012 Sekolah Menengah Pertama Negeri 262 Jakarta . All rights reserved . Template by Erni Wigati

<script type="text/javascript"> var MenuBar3 = new Spry.Widget.MenuBar("MenuBar3", {imgRight:"SpryAssets/SpryMenuBarRightHove r.gif"}); var MenuBar4 = new Spry.Widget.MenuBar("MenuBar4", {imgRight:"SpryAssets/SpryMenuBarRightHove r.gif"}); var MenuBar5 = new Spry.Widget.MenuBar("MenuBar5", {imgRight:"SpryAssets/SpryMenuBarRightHove r.gif"}); var MenuBar6 = new Spry.Widget.MenuBar("MenuBar6", {imgRight:"SpryAssets/SpryMenuBarRightHove r.gif"}); swfobject.registerObject("FlashID"); var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgRight:"../SpryAssets/SpryMenuBarRightHo ver.gif"});

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 : <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&&i0&&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
onLoad="MM_preloadImages('images/smpn262_ 06a.png','images/smpn262_06d.png','images/smp n262_06f.png','images/smpn262_06h.png','image s/smpn262_06j.png')">

		SEKOLAH MENENGAH PERTAMA (SMP) NEGERI 262 JAKARTA Jl. Kayu Tinggi, Cakung Timur, Jakarta Timur 13910 Telp. (021) 4612276
	.: Sejarah :. 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. Seiring perkembangannya Sekolah Menengah Pertama Negeri 262 Jakarta Timur kini telah banyak mengalami perubahan baik dari segi pembangunan maupun pengadaan fasilitasfasilitas 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.
	Copyright © 2012 Sekolah Menengah Pertama Negeri 262 Jakarta . All rights reserved . Template by Erni Wigati
	src="file:///C|/Users/DIDIK/Desktop/images/spac er.gif" width="1" height="1" alt="">

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 : <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> a:link { text-decoration: none; } a:visited { text-decoration: none; } a:hover { text-decoration: none; } a:active { text-decoration: none; }

SEKOLAH MENENGAH PERTAMA (SMP) NEGERI 262 JAKARTA Jl. Kayu Tinggi, Cakung Timur, Jakarta Timur 13910 Telp. (021) 4612276
Home	Info Sekolah	Gallery	Download	Upcoming Event
Halo Selamat Datang Anda sekarang sudah masuk kedalam sistem Silahkan anda masukan atau sisipkan program lain disini HOME | DOWNLOADS | MANAGEMEN PRESTASI | LOGOUT |
Copyright © 2012 Sekolah Menengah Pertama Negeri 262 Jakarta . All rights reserved . Template by Erni Wigati

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 :

Anda tidak mempunyai hak untuk mengakses halaman ini, silahkan LOGIN

"); }else{ require_once('../Connections/prestasi.php'); ?>
= ? :

.

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)); } } ?> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

Input Data Prestasi

No :
Juara:
Lomba:

<< Back

Logout >>

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 seperti gambar 4.11 .

selanjutnya,

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. Langkahlangkah 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.

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

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 dengan UML, Graha Yogyakarta, 2005.

Visual Ilmu,

6. Nugroho, Bunafit, Membuat Website Sendiri dengan PHPMySQL, ANDI Yogyakarta, 2008. 7. Putra, Struktur Navigasi, Maxikom, Palembang, 2011. 8. Razak, MySQL, Yogyakarta, 2012.

ANDI,

9. Retownga,V, Swish Max, Media Komputindo, Jakarta, 2011. 10. Wijaya, G, SDLC (Software Development Life Cycle), Bhuana, Jakarta, 2012.