1 BAB III PEMBAHASAN 3.1 Struktur Navigasi Struktur navigasi pada gambar di bawah adalah struktur navigasi campuran yang digunakan oleh penulis pada p...
BAB III PEMBAHASAN 3.1 Struktur Navigasi Struktur navigasi pada gambar di bawah adalah struktur navigasi campuran yang digunakan oleh penulis pada perancangan pembuatan situs Distro Overload. Struktur tersebut menggambarkan proses kerja dari situs Distro Overload yang penulis buat. Halaman utama
About Us
Home
Biography
Order
Gallery
Admin
Ganti password
Tambah Category
Keterangan :
Edit Category
Hapus Produk
Hapus Category
Tambah Produk
Edit Produk
: taut pengguna : taut admin Gambar 3.1. Diagram Struktur Navigasi Website Distro Overload
26
27
3.2 Alur Cerita Bingkai masih tetap memiliki daya pikat tersendiri dalam dunia desain web. Ia menawarkan solusi untuk beberapa perkara desain web seperti mencegah penulisan dan peletakan obyek dalam web berulang kali, dan sebagainya. Bingkai sendiri merupakan sebuah teknologi yang biasa dipakai untuk menggabung beberapa halaman web menjadi satu halaman web yang utuh. Masing-masing halaman berdiri sendiri dalam satu berkas yang berbeda-beda. Dengan penggunaan bingkai ini membuat web kita tidak akan menghilangkan maksud dan tujuan dari isi web kita. Banyak bentuk bingkai yang dapat digunakan untuk membangun sebuah web. Begitu juga dengan variasi didalam pembuatan bingkai itu sendiri, tergantung dengan selera si pembuat web. Anatomi bingkai dalam web pada dasarnya tidak terbatas karena anda bisa dengan bebas menciptakan banyak variasi bingkai dalam satu halaman web. Namun dari banyak variasi itu kita bisa mengambil beberapa model bingkai seperti yang telah disediakan Macromedia dreamweaver 4 untuk kita. Modelmodel frame itu antara lain seperti di bawah ini
frame model Menu-Judul (Menu Atas) - Isi
frame model Judul (Menu Atas) Menu - Isi
Model 1 Frame
Frame model menu, judul pojok kiri atas-menu atas(judul) - isi
Gambar 3.2. Model-model bingkai Main
Bingkai Model Judul (Menu atas) Menu – Isi menjadi pilihan untuk pengguna pada situs Overload Distro ini. Seperti pada gambar dibawah ini.
28
Gambar 3.13, Model-m
Gambar 3.3. Model bingkai (Menu atas)Menu – Isi Pada taut pengguna adalah home, about us, biography, gallery, order dan menu admin. Selanjutnya adalah bagian untuk menampilkan halaman PHP atau HTML yang tergantung pada taut yang diklik oleh pengguna. Pada gambar dibawah ini dapat dilihat contoh bingkai yang telah dirancang.
Gambar 3.4. Model frame Overload home
29
3.3 Rancangan Tampilan Pada situs Overload Distro ini penulis merancang tampilan dengan langkah - langkah sebagai berikut : a. Pada menu file pilih new, lalu pilih basic page untuk merancang tampilan gambar yang diinginkan pada situs ini. b. Untuk memilih latar warna, klik kanan pilih background, lalu pilih gambar tampilan web yang telah di buat dan menyisipkan tombol-tombol, simpanlah (Save As). c. Untuk keseluruhan frame disimpan dengan nama Home.htm, About Us, Biography, Gallery, Order. Dibawah ini adalah salah satu script dari Menu / Frame Home: HOME.htm <STYLE>body {scrollbar-arrow-color:#FFA401;scrollbar-3dlightcolor:#400000;scrollbar-highlight-color:#FFA401;scrollbar-facecolor:#000000;scrollbar-shadow-color:#FFA401;scrollbar-darkshadowcolor:#400000;scrollbar-track-color:#FFFFFF;Untitled Document<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
30
32
33
Congratulations on choosing PHPTriad for your Windows PHP needs. We're always striving toward making the package better, so be sure to check in at PHPGeek.com to be sure you received the latest version and additional extensions. While PHPTriad is free both financially and in the sense of freedom, it takes money and time to run this project. If this product is useful to you consider contributing to the ongoing development of this project. There are several ways to give back.
Giving money directly through my "Give Something Back" box at Overload Cloth.com. Buying me something off of my Amazon.com wish list linked in that same box at Overload Cloth.com. Buying T-shirts and other products from the shirt gallery linked at Overload Cloth .com
34
<marquee direction="right">
35
36
37
38
39
40
41
42
43
<script language="javascript"> var teks="- OVERLOAD NO CONCEPT NO RESPECT COPYRIGHT2004 BAGOES - ";
44
var panjang_teks=teks.length; var lebar=100; var posisi=1-lebar; function muter_muter() { posisi++; var scroller=" "; if (posisi==panjang_teks) {posisi=1-lebar} if (posisi<0) { var i=1; while (i++<Math.abs(posisi)) { scroller=scroller+" "; } scroller=scroller+teks.substring(0,lebar-i+1); } else { scroller=scroller+teks.substring(posisi,lebar+posisi); } setTimeout("muter_muter()",5); window.status=scroller; }
- Untuk memasukkan tombol pada menu toolbar pilih media klik flash button lalu pilih jenis style StarSpinner, masukkan button-text, font Arial size 12, dan link diisi dengan file yang dituju, pada target pilih main frame, pada background colour pilih warna putih.
45
Gambar 3.5 Menu toolbar flash button
3.4 Pembuatan Basis data Situs Overload Distro ini mempunyai basis data untuk sebagai tempat penyimpanan informasi yang diperlukan oleh administrator untuk mengelola situs ini. Beberapa fasilitas yang ada pada situs ini memerlukan basis data. Fasilitas yang memerlukan basis data adalah katagori dan produk. Untuk situs ini, cukup hanya menggunakan sebuah basis data saja. Pada situs Overload Distro ini diberi nama dengan db_overload. 3.4.1 Struktur Basis data Informasi – informasi dalam basis data terdapat dalam beberapa tabel, yang antara lain adalah tabel users. Tabel ini untuk menyimpan username dan password administrator diperlukan satu tabel dengan dua buah ruas saja. Tabel 3-1. Struktur Basis data Tabel users Ruas
Tipe
Panjang
Keterangan
46
username
Varchar
10
password
Varchar
10
Primary, unique -
Kemudian tabel katagori berisikan pid, pjudul, ppilihan. pjawaban. Tabel ini digunakan untuk menyimpan data-data katagori didalam situs ini. Tabel 3-2. Struktur Basis data Tabel katagori Ruas kid keterangan
Tipe Varchar Varchar
Panjang 6 6
Keterangan primary, unique -
Selanjutnya tabel produk berisikan pid, kid, judulbaju, warna, ukuran, harga, sinopsis. Tabel ini digunakan untuk menampilkan informasi produk.
Tabel 3-3. Struktur Basis data Tabel Produk Ruas Pid
Tipe Int
Panjang
Keterangan
2
auto_increment, primary, unique -
kid
Varchar
6
judulbaju
Varchar
20
-
warna
Varchar
8
-
ukuran
Varchar
3
-
harga
Varchar
6
-
sinopsis
text
-
-
3.4.2 Cara Membuat Basis data Setelah melakukan proses perancangan basis data maka penulis membuat basis data Overload Distro yang akan digunakan pada situs ini. Seperti yang telah diuraikan penulis, basis data yang akan dibuat menggunakan phpMyAdmin.
47
Adapun pembuatan basis data adalah pertama-tama pastikan layanan MySQL di Windows telah dijalankan. Kedua ketik pada penjelajah http://localhost/phpmyadmin, pada penjelajah akan tampil seperti gambar 3.7.
Gambar 3.6. Hasil percobaan phpMyAdmin Langkah ketiga kemudian masukan nama basis data dengan nama db_overload pada formulir MySQL lalu klik Create.
Gambar 3.7. Form Create Basis data Keempat, setelah membuat basis data, lanjutkan dengan membuat tabel yang terdiri dari ruas. Buat tabel dengan nama katagori dengan empat ruas.
Gambar 3.8. Form Create Table
48
Selanjutnya kelima, isi ruas-ruas tersebut dengan nama, tipe, dan keterangan yang diperlukan dalam pembuatan situs ini.
Gambar 3.9. Form penulisan ruas Kemudian keenam, hasil dari basis data diatas dituliskan dalam sintaks SQL-nya, hasilnya simpan dalam berkas db_overload.sql. Isi dari berkas db_overload.sql sebagai berikut. # Generation Time: Apr 19, 2004 at 12:56 AM # Server version: 3.23.47 # PHP Version: 4.1.1 # Database : `db_overload` # -------------------------------------------------------# phpMyAdmin MySQL-Dump # version 2.2.3 # http://phpwizard.net/phpMyAdmin/ # http://phpmyadmin.sourceforge.net/ (download page) # # Host: localhost # Generation Time: Jul 30, 2004 at 01:18 PM # Server version: 3.23.47 # PHP Version: 4.1.1 # Database : `db_overload` # -------------------------------------------------------# Table structure for table `katagori` CREATE TABLE katagori ( kid varchar(6) NOT NULL default '',
49
keterangan varchar(6) NOT NULL default '', PRIMARY KEY (kid), UNIQUE KEY kid (kid) ) TYPE=MyISAM; # # Table structure for table `produk` CREATE TABLE produk ( pid int(2) NOT NULL auto_increment, kid varchar(6) NOT NULL default '', judulbaju varchar(20) NOT NULL default '', warna varchar(8) NOT NULL default '', ukuran varchar(3) NOT NULL default '', harga varchar(6) NOT NULL default '', gambar varchar(10) NOT NULL default '', sinopsis text, PRIMARY KEY (pid), UNIQUE KEY pid (pid) ) TYPE=MyISAM; # -------------------------------------------------------# Table structure for table `users` REATE TABLE users ( username varchar(10) NOT NULL default '', password varchar(10) NOT NULL default '', PRIMARY KEY (username,username), UNIQUE KEY username (username) ) TYPE=MyISAM; # Dumping data for table `users` INSERT INTO users (username, password) VALUES ('admin', 'password');
3.5 Pembuatan Formulir Penulis membagi dua dalam langkah pembuatan formulir yang pertama formulir untuk admin dan untuk pengguna. Kedua formulir tersebut berada dalam bingkai yang sama. Tampilan untuk admin dan untuk pengguna berbeda, untuk admin tampilannya sangat sederhana, dan tampilan pengguna dikarenakan untuk khalayak ramai tampilan situsnya didesain secantik dan sebagus mungkin
50
Formulir pengguna dibatasi hanya untuk melihat dan memesan barang yang diinginkan. Namun pada formulir admin bisa menambah, merubah, menghapus atau tepatnya memanajemen situs Overload Distro ini. 3.5.1 Formulir untuk Admin Formulir masukan yang harus diisi oleh seorang admin yaitu :
Gambar 3.10. Formulir Log masuk Admin Formulir masukan yang harus diisi oleh seorang admin jika ingin merubah password-nya (change password) adalah :
Gambar 3.11. Formulir Change Password Formulir masukan yang harus diisi oleh seorang admin jika ingin menambah katagorinya (add katagori) adalah :
51
Gambar 3.12. Form Add katagori
Jika admin ingin menambah produk (add produk), formulir yang dimasukan adalah :
Gambar 3.13. Form Add produk
52
Tampilan menu admin akan muncul apabila admin melakukan log masuk :
: Gambar 3.14. Formulir Menuadmin Pada menu edit katagori, akan ditampilkan judul katagori dan PID-nya, untuk mengedit pilih [EDIT], data yang telah dirubah akah disimpan dalam basis data.
Gambar 3.15. Formulir Edit Katagori Menu admin menyediakan fasilitas untuk menghapus katagori jika admin memilih delete katagori.
Gambar 3.16. Tampilan Delete Katagori Produk juga bisa di edit dengan memilih edit produk
53
Gambar 3.17. Formulir Edit produk Menghapus produk juga dapat di pilih di menu admin ini, gambar dibawah ini adalah tampilannya.
Gambar 3.18. Tampilan Delete produk Pada menu Logout, akan ada tampilan pesan Logout successful complete Gambar 3.19. Tampilan Log keluar admin
54
3.5.2 Formulir untuk Pengguna Untuk sisi pengguna proses masukan terjadi pada bagian katagori, Barng Gress, dan Kantong Kresek, dimana pengguna memilih katagori, dan produk yang tersedia.. Hasil dari proses ini dapat diperoleh oleh pengguna dengan mengeklik tombol beli. Untuk lebih jelas berikut salah satu gambar tampilan masukan dari bagian katagori.
Gambar 3.20. Tampilan katagori Untuk data pemesan disediakan formulir data kosumen pada menu Keranjang Belanja. Untuk lebih jelas lihat gambar dibawah ini
Gambar 3.21 Tampilan Formulir Data Konsumen
55
3.6. Langkah Pembuatan Aplikasi Seperti yang telah diuraikan pada sub bab sebelumnya, bahwa PHP menggunakan konsep sisi server, maka sebelum membuat tulisan, penulis mempersiapkan sebuah PC dengan sistem operasi Windows XP untuk menjadikannya sebuah server yang siap menjalankan tulisan PHP. Pada penulisan ini penulis menggunakan apache sebagai server webnya. Karena disebabkan beberapa faktor seperti kecepatan,
dan tentu saja gratis. Selanjutnya adalah
langkah – langkah instalasi dan konfigurasi server web dan PHP. 3.6.1 Instalasi dan Konfigurasi server web PHP Pertama, unduh paket program Apache, untuk Windows, tersedia paket lengkap (Apache, PHP, MySQL, dan phpmyadmin) dalam satu berkas instalasi (biasanya hanya sebuah berkas *.exe). Pada penulisan ini adalah phptriad. Untuk mendapatkannya unduh dari URL http://sourceforge.net/projects/phptriad. Lalu kedua instalasi, seperti kita ketahui pada Windows untuk melakukan proses instalasi adalah biasanya dengan menjalankan berkas .exe. Pada proses instalasi ini berkasnya adalah Phptriad2-2-1.exe. Selanjutnya langkah ketiga adalah konfigurasi jaringan. TCP/IP
diperlukan
agar
tulisan
PHP
dapat
dijalankan oleh penjelajah, untuk mengisi alamat IP dan memberi nama untuk (localhost) pangkal lokal, langkah-langkahnya adalah maasuk Control Panel klik Network, pilih TCP/IP klik Properties. Kemudian pada kolom Specify an IP address masukan IP address dan Subnet mask-nya. Pada penulisan ini menggunakan 192.168.0.1 untuk IP address dan 255.255.255.0 pada Subnet mask. Selanjutnya
pilih DNS Configuration, masukan nama pangkal lokal yang
dikehendaki. Setelah semuanya terpenuhi jalankan Apache. Pada sistem operasi Windows, untuk menjalankan apache pilih Start, all programs, PHPTriad, apache console, dan klik Start apache. Setelah Start apache telah dijalankan langkah selanjutnya adalah mencoba apakah server apache telah
56
sukses terinstal atau belum dengan cara buat berkas phpinfo.php pada document root dengan isi : Lihat pada penjelajah dengan alamat URL http://localhost/phpinfo.php. Penjelajah harus mengeluarkan informasi PHP seperti pada gambar 3.17, bukan tulisan yang baru kita tuliskan di atas.
.
Gambar 3.22. Hasil percobaan apache 3.6.2 Halaman Web Untuk mendesain halaman web produk dan katagori diperlukan sistem (template) templat, dengan templat, desain tampilan dan tulisan dipisahkan. Bentuk tampilan disimpan sebagai berkas tema (theme). Setiap halaman situs akan merujuk pada tema format tampilan tertentu sehingga jika dilakukan adanya perubahan pada tampilan, cukup mengubah satu berkas saja yaitu berkas tema bersangkutan. Secara otomatis semua halaman situs yang merujuk ke tema
57
tersebut akan berubah sesuai dengan bentuk tampilan yang baru. Untuk lebih jelasnya gambar dibawah ini adalah rancangan templat yang akan digunakan pada situs Overload Distro ini.
Theme00 {KATAGORI}
{PRODUK}
Gambar 3.23. Rancangan Theme00 Keterangan gambar 3.21 diatas adalah yaitu tag {KATAGORI} berisikan data katagori, tag {PRODUK}berisikan data-data produk..Pada situs ini tidak ditampilkan semua namun yang ditampilkan di bingkai utama hanya yang dipilih oleh pengguna. Theme02
{MENUKIRI}
{ISI}
58
Gambar 3.24. Rancangan Theme02 Keterangan gambar 3.22 adalah sebagai yaitu tag {MENUKIRI}berisikan judul dari produk, kemudian tag {ISI}berisikan seluruh isi dari produk. Dibawah ini dapat dilihat contoh tema yang telah dirancang.
Gambar 3.25. Theme00.html
59
Gambar 3.26. Theme02.html
3.6.3 Menuliskan Tulisan Situs Overload Distro ini banyak menggunakan tulisan PHP, untuk penulisan tulisan PHP bisa di editor apapun termasuk notepad. Tapi pada penulisan ini untuk memudahkan penulis untuk menuliskan tulisan-tulisan PHP penulis menggunakan bantuan piranti lunak PHPed, karena piranti lunak ini didesain secara khusus untuk menulis tulisan PHP. Tapi PHPed juga bisa untuk penulisan selain PHP diantaranya adalah berkas HTML (.html), berkas Perl (.pl), berkas SQL (.sql), berkas Python (.py), berkas Text (.txt), berkas Javascript (.js), berkas Include (.inc)
Gambar 3.27. Penulisan tulisan PHP dengan PHPed
60
3.6.4 Javascript Selain menggunakan Flash, Javascript ini untuk mempercantik tampilan suatu web/situs, pada situs ini yang menggunakan Javascript antara lain: 1. ScrollBar. 2. Text berjalan. 3. Animasi pada cursor. Dibawah ini dapat dilihat contoh Javascript yang digunakan pada situs ini: 1. ScrollBar <STYLE>body { scrollbar-arrow-color:#FFA401; scrollbar-3dlight-color:#400000; scrollbar-highlight-color:#FFA401; scrollbar-face-color:#000000; scrollbar-shadow-color:#FFA401; scrollbar-darkshadow-color:#400000; scrollbar-track-color:#FFFFFF;
61
Gambar 3.28. Contoh hasil dari scrollBar
2. Text Berjalan <script language="javascript"> var teks="- OVERLOAD NO CONCEPT NO RESPECT COPYRIGHT2004 BAGOES - "; var panjang_teks=teks.length; var lebar=100; var posisi=1-lebar; function muter_muter() { posisi++; var scroller=" "; if (posisi==panjang_teks) {posisi=1-lebar} if (posisi<0) { var i=1;
Gambar 3.30. Contoh dari animasi pada cursor 3.6.5 Marquee Marquee ini di gunakan sebagai tulisan berjalan, dan dibawah ini adalah contoh program : <marquee>
Gambar 3.31. Gambar yang mempergunakan Marquee
3.6.6 Struktur Direktori Situs Keseluruhan berkas-berkas yang digunakan pada aplikasi ini disimpan pada direktori /apache/htdocs/overloadistro. Kemudian berkas-berkas tersebut
65
diatur lagi kedalam sub-sub direktori dengan tujuan agar lebih rapi dan terstruktur. Sub-sub tersebut antara lain adalah : gambar, berisikan berkas gambar yang terdapat pada keseluruhan situs. Berkas-berkas yang digunakan dalam pada sisi admin yaitu : Login.php, menuadmin.php, edit_katagori.php,
logout.php,
authentication.php,
delete_katagori.php,
delete_produk.php,
add_katagori.php,
add_produk.php,
change_password.php,
edit_produk.php,
dbfunctions.php,
config.php,
html_closing.html, html_opening.html, overloadhead.htm, overloadright.htm. Sedangkan aboutme.htm,
3.6.5 Menjalankan Tulisan Penulis menguji tulisan PHP yang telah dibuat dengan mencoba menjalankan
tulisan
tersebut
dengan
menggunakan
penjelajah.
Penulis
menggunakan Internet explorer 6.0 untuk mencoba menjalankan tulisan ini. Ketika
Internet
explorer
sudah
dijalankan
masukan
alamat
URL
http://localhost/overload.htm pada bagian alamat dan akan tampil seperti gambar 3.32.
66
Gambar 3.32. Contoh hasil menjalankan tulisan 3.7 Manajemen Situs Setelah situs ini telah selesai dibuat maka diperlukan proses pemeliharaan situs, Agar situs ini bisa dimodifikasi dan terpelihara tersedia ruang (control panel) papan kendali. Papan kendali ini hanya bisa diakses oleh admin yang memiliki kata kunci. Untuk melakukan manajemen isi dari situs dapat dilakukan dari program admin yang telah dibuat oleh penulis.
