BAB III
SISTEM WEBSITE
1. Login
a. Tahap ketiga pembuatan Toko Baju Online adalah pembuatan sistem website. Pada jendela dokumen index.php, buatlah dokumen baru dengan pilih Menu File > New. Kemudian akan tampil kotak dialog New Document. Pilih Blank Page selanjutnya bagian Page Type > PHP. Lalu klik tombol Create.
b. Setelah dokumen baru telah dibuat beralih pada tab code kemudian hapus semua perintah yang ada.
c. Jika sudah ketikkan kode program php di bawah ini
d. Simpan hasil pengerjaan pada lokasi dimana telah diinstal aplikasi Xampp (disini F:\xampp\htdocs\tokobaju) dengan nama login.php.
e. Kembali lagi ke dokumen index.php lalu beralihlah pada tab code ketiklah “login.php” pada bagian scriptnya. Selanjutnya simpanlah kembali index.php
2. Kategori
a. Seperti langkah 1, buatlah kembali dokumen baru. Lalu, beralihlah pada tab code dan hapus semua perintah tersebut kemudian ganti dengan script seperti dibawah ini:
b. Simpan hasil pengerjaan pada lokasi dimana telah diinstal aplikasi Xampp (disini F:\xampp\htdocs\tokobaju) dengan nama kategori.php kemudian beralih lagi pada index.php kemudian pada tab Design aktifkan kursor ke kolom seperti gambar di bawah ini.
c. Kemudian klik tab code pada dreamwever, kemudian ketik <?php include “kategori.php”;?> seperti gambar dibawah ini.
3. News
a. Buatlah kembali dokumen baru php kemudian hapus perintah yang ada, lalu ketik kode script dibawah ini:
b. Jika sudah simpan dan beri nama news.php lalu beralihlah pada tab Design, letakkan kursor ke kolom seperti dibawah ini.
c. Setelah itu ketik perintah <?php include”news.php”;?> seperti dibawah ini.
4. Testimonial
a. Buatlah dokumen baru, hapus perintah yang ada lau ketik perintah dibawah ini.
b. Jika sudah simpan dan beri nama top_testimonial.php lalu kembali ke dokumen index.php pada tab Design letakkan kursor seperti dibawah ini.
c. Setelah itu pindah ke tab code ketik perintah <?php include “top_testimonial.php”;?>
5. Keranjang Belanja Memo
a. Buatlah lagi dokumen baru lalu hapus perintah yang ada pada dokumen tersbut kemudian ketik code di bawah ini
b. Simpan dan beri nama keranjang_belanja_memo.php lalu pada tab Design index.php letakkan kursor seperti di bawah ini pada baris yang telah digabungkan.
c. Setelah itu klik tab code lalu klik <?php include “keranjang_belanja_memo.php”;?>
d. Jika sudah buat dokumen baru hapus teks kode yang ada lalu ketik kode seperti di bawah ini. Kemudian simpan dengan nama jumlah.php, pada tab design indeks.php letakkan kursor seperti di bawah ini.
6. Best Seller
a. Buatlah lagi dokumen baru hapus teks kode yang ada lalu ketik kode seperti di bawah ini:
b. Kemudian simpan dengan nama bestseller.php, pada tab Design index.php letakkan kursor seperti di bawah ini.
c. Setelah itu klik tab code lalu ketik perintah <?php include “bestseller.php”;?>
7. Informasi
• Infomasi visitor / status user online
a. Buatlah lagi dokumen baru hapus teks kode yang ada lalu ketik kode seperti di bawah ini.
b. Kemudian simpan dengan nama visitor.php, pada tab design index.php letakkan kursor seperti di bawah ini.
c. Setelah itu klik tab code lalu ketik perintah <?php include “visitor.php”;?>
• Informasi counter / jumlah pengunjung
a. Buatlah lagi dokumen baru hapus teks kode yang ada lalu ketik kode seperti dibawah ini.
b. Kemudian simpan dengan nama counter.php, pada tab index.php letakkan kursor seperti di bawah ini.
c. Setelah itu klik tab kode lalu ketik perintah <?php include “counter.php”;?>
d. Kemudian buat file txt dengan nama counter.txt lalu simpan di C:\xampp\htdocs\tokobaju
• Informasi status Yahoo Messenger (YM)
a. Buat dokumen baru hapus teks kode yang ada lalu ketik kode seperti di bawah ini.
b. Kemudian simpan dengan nama yahoo.php. Pada tab index.php letakkan kursor seperti di bawah ini.
c. Setelah itu klik tab kode lalu ketik perintah <?php include “yahoo.php”;?>
8. Halaman Tengah
• Produk Terbaru
a. Pada jendela dokumen index.php klik kolom kedua baris keempat tabel dasar, buat tabel baru dengan ketentuan
a. Rows 7, columns 1
b. Witdh 100 percent
c. Border Thickness 0, cell padding 0, cell spasing 2 pixel.
b. Letakkan kursor pada tabel baru, lalu pada jendela Properties pilih class Area_Produk
c. Setelah itu letakkan kursor pada baris ketiga lalu ketikkan teks “Selamat datang di maxi boutique. Nikmati kemudahan berbelanja bersama kami !!!”. Kemudian blog teks tersebut aturlah sesuai properties yang terdapat pada paling bawah gambar.
d. Selanjutnya pada baris keempat tambahakan elemen Horizontal Rule
e. Jika sudah letakkan kursor pada baris kelima, lalu ketik teks “NEWS ITEM & RESTOCK !!!” kemudian blok teks pilih class Teks_Produk
f. Buat dokumen baru lalu hapus kode yang ada lalu ketik kode seperti di bawah ini. Setelah itu simpan dengan nama produk_baru.php.
g. Selanjutnya buat dokumen baru hapus perintah yang ada lalu ketik kode seperti di bawah ini. Kemudian simpan dengan nama produk_beli.php.
h. Buatlah lagi dokumen baru, hapus perintah yang ada lalu ketik kode seperti di bawah ini. Kemudian simpan dengan nama faktur.php
i. Pada dokumen index.php letakakn kursor pada baris ketujuh. Kemudian tambahkan elemen Div tag, pada bagian class pilih Area_Produk.
j. Klik tab kode lalu ketik perintah <?php include “produk_baru.php;?>
• Image Slider
a. Buka drive CD sertaan buku, lalu buka folder buka folder tokobaju kemudian copy file nivoslider.php dan taruh di C:\xampp\htdocs\tokobaju.
b. Buatlah lagi dokumen baru hapus perintah yang ada lalu ketik kode berikut ini.
c. Jika sudah simpan dengan nama slider.php lalu aktifkan dokumen index.php lalu klik pada baris pertama tabel kemudian tambahkan elemen Div tag, untuk class pilih Area_slider.
d. Pada area Div tag buat tabel dengan ketentuan:
• Rows 1, columns 1
• Tabel width 100 percent,
• Border thickness 0, cellpadding 0, cell spacing 0 pixel.
e. Letakkan kursor pada tabel kolom baru lalu klik tab kode kemudia ketik perintah <?php include “slider.php”;?>.
f. Simpan kembali file index.php hasil tampilan halaman tengah akan seperti di bawah ini.
9. Link
• Link Menu Atas
1. Klik elemen hotspot link pada arrea teks Home, lalu pasa jendela properties atur untuk link home.php dan Target _self
2. Untuk mempersingkat, atur menu atas lainnyaseperti “produk, cara order,....” seperti tabel berikut.
• Link Daftar Member Baru
1. Blok teks Daftar Member Baru pada jendela properties atur link: daftarmember.php dan target: _selflalu simpan ulang dokumen index.php.
• Link Isi dan Lihat Testimonial
1. Blok teks >> isi testimonial atur jendela properties untuk link: isitestimonial.php target: _self.
2. Setelah itu Blok teks >> isi testimonial atur jendela properties untuk link: isitestimonial.php target: _self.
10. Halaman Home
• Menu Logout
1. Buka lokasi drive C:\xampp\htdocs\tokobaju, duplikat file index.php pada direktori yang sama, caranya aktifkan index.php selanjutnya tekan tombol ctrl+C dan ctrl+V.
2. Setelah itu ganti nama index – Copy.php dengan nama home.php.
