BAB III PEMBAHASAN. 3.1 Struktur Navigasi

Transkripsi

1 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

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.

3 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

4 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 <html><head><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;</style><title>untitled Document</title><meta http-equiv="content-type" content="text/html; charset=iso "></head> <body background="bag2home.jpg" ONLOAD="muter_muter ()"> <table width="760" border="0" cellpadding="0" cellspacing="0">  <td width="129" height="95"> </td> <td width="90"> </td> <td width="3"> </td> <td width="350"> </td> <td width="127"> </td> <td width="36"> </td> <td width="25"> </td>

5 30 <td height="28"></td> <td colspan="4" valign="top"><object classid="clsid:d27cdb6e-ae6d-11cf96b " codebase=" ab#version=5,0,0,0" width="108" height="28"> <param name="bgcolor" value="#ffffff"> <param name="movie" value="home1.swf"> <param name="quality" value="high"> <embed src="home1.swf" width="108" height="28" quality="high" pluginspage=" P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" bgcolor="#ffffff" ></embed> </object> <object classid="clsid:d27cdb6e-ae6d-11cf-96b " codebase=" ab#version=5,0,0,0" width="108" height="28"> <param name="bgcolor" value=""> <param name="base" value="."> <param name="movie" value="profile1.swf"> <param name="quality" value="high"> <embed src="profile1.swf" width="108" height="28" quality="high" pluginspage=" P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" base="." ></embed> </object> <object classid="clsid:d27cdb6e-ae6d-11cf-96b " codebase=" ab#version=5,0,0,0" width="108" height="28"> <param name="movie" value="biography1.swf">

6 31 <param name="quality" value="high"> <embed src="biography1.swf" quality="high" pluginspage=" P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="108" height="28" ></embed> </object> <object classid="clsid:d27cdb6e-ae6d-11cf-96b " codebase=" ab#version=5,0,0,0" width="108" height="28"> <param name="bgcolor" value=""> <param name="base" value="."> <param name="movie" value="gallery1.swf"> <param name="quality" value="high"> <embed src="gallery1.swf" width="108" height="28" quality="high" pluginspage=" P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" base="." ></embed> </object> <object classid="clsid:d27cdb6e-ae6d-11cf-96b " codebase=" ab#version=5,0,0,0" width="108" height="28"> <param name="bgcolor" value=""> <param name="base" value="."> <param name="movie" value="order1.swf"> <param name="quality" value="high"> <embed src="order1.swf" width="108" height="28" quality="high" pluginspage=" P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" base="." ></embed> </object></td> <td> </td>

7 32 <td> </td> <td height="7"></td> <td height="60"></td> <td colspan="5" valign="top"><div align="right"><img src="banners01.jpg" width="540" height="60"></div></td> <td height="13"></td> <td height="329"></td>

8 33 <td colspan="3" valign="top"><p align="justify"><font color="#999999" size="1" face="verdana, Arial, Helvetica, sans-serif">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.<br> 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. </font></p> <p><font color="#999999" size="1" face="verdana, Arial, Helvetica, sansserif">giving money directly through my "Give Something Back" box at Overload Cloth.com. <br> Buying me something off of my Amazon.com wish list linked in that same box at Overload Cloth.com. <br> Buying T-shirts and other products from the shirt gallery linked at Overload Cloth.com</font><br> </p></td> <td height="18"></td> <td height="16"></td>

9 34 <td colspan="3" valign="top"><marquee direction="right"><img src="panah.jpg" width="513" height="16"></marquee></td> <td height="18"></td> </table> <div align="center"> </div> <p align="center"> <p> <table width="760" border="0" cellpadding="0" cellspacing="0">  <td width="74" height="6"></td> <td width="111"></td> <td width="12"></td> <td width="6"></td> <td width="90"></td> <td width="14"></td> <td width="2"></td> <td width="10"></td> <td width="50"></td>

10 35 <td width="15"></td> <td width="40"></td> <td width="5"></td> <td width="10"></td> <td width="3"></td> <td width="47"></td> <td width="12"></td> <td width="52"></td> <td width="3"></td> <td width="15"></td> <td width="120"></td> <td width="69"></td> <td height="8"></td> <td colspan="4" rowspan="4" valign="top"><a href=" src="volcom.gif" width="110" height="32" border="0"></a></td>

11 36 <td height="2"></td> <td colspan="3" rowspan="4" valign="top"><a href=" src="quiksilver.jpg" width="110" height="25" border="0"></a></td> <td height="3"></td> <td rowspan="4" valign="top"><div align="left"><a href=" src="billabong.gif" width="110" height="25" border="0"></a></div></td>

12 37 <td colspan="4" rowspan="3" valign="top"><a href=" src="anumeric.jpg" width="110" height="23" border="0"></a></td> <td height="19"></td> <td> </td> <td> </td> <td rowspan="4" valign="top"><a href=" src="ripcurl.jpg" width="120" height="26" border="0"></a></td> <td height="1"></td>

13 38 <td height="2"></td> <td height="4"></td>

14 39 <td height="11"></td>

15 40 <td height="5"></td> <td colspan="2" rowspan="7" valign="top"><a href=" src="dragon.gif" width="50" height="50" border="0"></a></td>

16 41 <td height="3"></td> <td rowspan="5" valign="top"><a href=" src="mooks.gif" width="40" height="43" border="0"></a></td> <td height="1"></td>

17 42 <td rowspan="3" valign="top"><a href=" src="matix.jpg" width="52" height="33" border="0"></a></td> <td height="2"></td> <td colspan="2" rowspan="3" valign="top"><a href=" src="vans.jpg" width="60" height="39" border="0"></a></td>

18 43 <td height="30"></td> <td rowspan="3" valign="top"><a href=" src="nofear.jpg" width="90" height="39" border="0"></a></td> <td height="1"></td> <td height="1"></td> <td height="3"></td> <td height="11"></td> </table> <script language="javascript"> var teks="- OVERLOAD NO CONCEPT NO RESPECT COPYRIGHT2004 BAGOES - ";

19 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; } </script><p></p><p> </p><p> </p><p> </p></body></htm l> - 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.

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

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

22 47 Adapun pembuatan basis data adalah pertama-tama pastikan layanan MySQL di Windows telah dijalankan. Kedua ketik pada penjelajah 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

23 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: # PHP Version: # Database : `db_overload` # # phpmyadmin MySQL-Dump # version # # (download page) # # Host: localhost # Generation Time: Jul 30, 2004 at 01:18 PM # Server version: # PHP Version: # Database : `db_overload` # # Table structure for table `katagori` CREATE TABLE katagori ( kid varchar(6) NOT NULL default '',

24 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

25 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 Formulir untuk Admin Formulir masukan yang harus diisi oleh seorang admin yaitu : Gambar Formulir Log masuk Admin Formulir masukan yang harus diisi oleh seorang admin jika ingin merubah password-nya (change password) adalah : Gambar Formulir Change Password Formulir masukan yang harus diisi oleh seorang admin jika ingin menambah katagorinya (add katagori) adalah :

26 51 Gambar Form Add katagori Jika admin ingin menambah produk (add produk), formulir yang dimasukan adalah : Gambar Form Add produk

27 52 Tampilan menu admin akan muncul apabila admin melakukan log masuk : : Gambar 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 Formulir Edit Katagori Menu admin menyediakan fasilitas untuk menghapus katagori jika admin memilih delete katagori. Gambar Tampilan Delete Katagori Produk juga bisa di edit dengan memilih edit produk

28 53 Gambar Formulir Edit produk Menghapus produk juga dapat di pilih di menu admin ini, gambar dibawah ini adalah tampilannya. Gambar Tampilan Delete produk Pada menu Logout, akan ada tampilan pesan Logout successful complete Gambar Tampilan Log keluar admin

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

30 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 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 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 untuk IP address dan 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

31 56 sukses terinstal atau belum dengan cara buat berkas phpinfo.php pada document root dengan isi : <?php phpinfo();?> Lihat pada penjelajah dengan alamat URL Penjelajah harus mengeluarkan informasi PHP seperti pada gambar 3.17, bukan tulisan yang baru kita tuliskan di atas.. Gambar Hasil percobaan apache 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

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

33 58 Gambar 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 Theme00.html

34 59 Gambar Theme02.html 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 Penulisan tulisan PHP dengan PHPed

35 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 <html> <head> <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; </STYLE>

36 61 Gambar 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;

37 62 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; } </script> Gambar Contoh dari animasi pada teks berjalan 3. Animasi Pada Cursor <SCRIPT language=javascript> <! Begin if (document.all) { yourlogo = "Overload Cloth Corp."; //Not less than 2 letters! logofont = "Verdana"; logocolor = "#ff0000"; yourlogo = yourlogo.split(''); L = yourlogo.length;

38 63 TrigSplit = 360 / L; Sz = new Array() logowidth = 100; logoheight = -40; ypos = 0; xpos = 0; step= 0.07; currstep = 0; document.write('<div id="outer" style="position:absolute;top:0px;left:0px"><div style="position:relative">');for (i = 0; i < L; i++){ document.write('<div id="ie" style="position:absolute;top:0px;left:0px;'+'width:10px;height:10px;fontfamily:'+logofont+';font-size:16px;'+'color:'+logocolor+';textalign:center">'+yourlogo[i]+'</div>'); } document.write('</div></div>'); function Mouse() { ypos = event.y; xpos = event.x - 5; } document.onmousemove=mouse; function animatelogo() { outer.style.pixeltop = document.body.scrolltop; for (i = 0; i < L; i++) { ie[i].style.top = ypos + logoheight * Math.sin(currStep + i * TrigSplit * Math.PI / 180); ie[i].style.left = xpos + logowidth * Math.cos(currStep + i * TrigSplit * Math.PI / 180);

39 64 Sz[i] = ie[i].style.pixeltop - ypos; if (Sz[i] < 5) Sz[i] = 5; ie[i].style.fontsize = Sz[i] / 1.7; } currstep -= step; settimeout('animatelogo()', 20); } window.onload = animatelogo; } // End --></SCRIPT> Gambar Contoh dari animasi pada cursor Marquee Marquee ini di gunakan sebagai tulisan berjalan, dan dibawah ini adalah contoh program : <marquee><a href="home.htm"><img src=" BUTTON.jpg" width="160" height="40" border="0"></a></td> <td width="25" height="1"> </marquee></td> Gambar Gambar yang mempergunakan Marquee Struktur Direktori Situs Keseluruhan berkas-berkas yang digunakan pada aplikasi ini disimpan pada direktori /apache/htdocs/overloadistro. Kemudian berkas-berkas tersebut

40 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, berkas yang digunakan biography.htm, overloadhead.htm, pada sisi pengguna category.html, overloadistro.htm, adalah overloadcenter.htm, overloadright.htm, buyit_form.php, config.php, dbfunctions.php, index.php, product.php, rupiah.php, sc_additemm, sc_basket.php, sc_checkout.php, viewdetail.php, my_css.css 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 pada bagian alamat dan akan tampil seperti gambar 3.32.

41 66 Gambar 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..