BAB IV

CONTROL PANEL ADMIN

1.      Persiapan

Untuk membur panel admin ikuti langkah – langkah berikut :

1.      Buat folder baru dengan nama admin pada loksi c:\xamp\htdocs\tokobaju, kemudian anda copy folder Fonts yang terdapat pada CD sertaan buku.\

2.      Lalu copy file clss.ezpdff.pd, class.pdf.php dan config.php, pada cd folder tokobaju\admin\. Seperti berikut :

3.      Dan persiapan awal selesai.

2.      Tampilan

2.1  Halaman login admin ini

Halaman login admin ini akan pertama kali tampil apabila pengguna mengakses folder admin pada browser. Untuk membuatnya ikuti langkahnya seperti berikut :

1.      Buat dokumen PHP baru kemudian buka jendela code dan tmbahkan baris code CSS seperti berikut :

2.     Jiks udah sekarang buka mode design, lalu tambahkan elemen Dig Tag, pada kotak dialog Insert Div Tag bagian Class anda pilih Menu_Logi lalu klik tombol OK.

3.      Jika sudah sekarang anda pada jendela dokumen area div tag Menu_Login. Anda hapus teks yang ada lalu tambahkan tabel dengan ketentuan seperti berikut :

·         Beri nilai Rows menjadi 3 dan coloumns menjadi 2

·         Ubahlan Table widht menjadi 437 pixels

·         Ubah pula untuk border Thickness menjadi 0 pixels

·         Ubah pula untuk cell padding 0 cell spacing 0 pixels

Atur posisi tabel Center, hasil kan terlihat seperti gambar 4.4.

4.      Kemudian pada baris pertama dan ketiga untuk kolom anda Merge Cells, beri image untuk baris pertama image Header Login.png dan baris ketiga Footer Login.png. Hasil akan terlihat seperti berikut :

5.      Jika sudah selanjutnya anda klik baris kedua kolom pertama tambahkan elemen Div Tag, pada kotak dialog Insert Div Tag bagian class Anda pilih Menu_Kiri. Hadil akan terlihat seperti berikut :

6.      Kemudian pada area Div Tag : Menu_Kiri anda tambahkan gambar dengan nama Login.gif. seperti berikut :

7.      Selanjutnya and aokuskan kursor mouse ke kolom kedua baris kedua, dan tambahakn elemen Div Tag, untuk Class anda pilih Menu_tengan. Berikut hasilnya:

8.      Kemudian  pada area Div Tag class Menu_Tengah anda tambahkan elemen form dan tabel. Untuk tabel anda tmbahkan tabel dengan ketentuan seperti berikut  ini:

·         Beri nilai Rows menjadi 3 dn colomns menjadi 2

·         Ubahlah Table widht menjadi 400 pixels

·         Ubahlah pula untuk borer thickness menjadi 0 pixels

·         Ubbah pula untuk cell padding 0 cell spacing 0 pixels

Atur posisi tabel center hasil akan terlihat seperti beriikut :

9.      Jika sudah simpan sekang anda tambahkan elemen label, TextField, dan Button, aturlah sehingga akan terlihat seperti berikut :

10.  Jika sudah sekarang anda akan menambahkan gambar background website, untuk itu anda klik tombol Page Properties pada panel Properties atau tekan tombol Ctrl+J. Akan tampil kotak dialog page properties.

11.  Lalu pada bagian bckground image : anda beri gambar background.gif. lalu klil tombol OK seperti berikut :

12.  Jika sudah hasil dokument website akan terlihat seperti berikut :

13.  Dan pembuatan halaman index login admin selesai, simpan pada lokasi C:\xampp\htdocs\tokobaju\admin, beri nama index.php.

2.2  Halaman home panel admin

Pada panel admin ini terdapat menu –menu yang menghubungkan ke bagian pengaturan yang berhubungan dengan website seperti, penambahan user, produk, kategori produk, news dan lain sebagainnya. Untuk membuatnya anda ikuti langkah- langkah seperti berikut :

1.      Buat dokumen baru PHP kemduian aktikan mode code, lalu tambahakan barid kode CSS seperti berikut :

2.      jika sudah sekarang buka kembali mode design, lalu tambahkan tabel dengan ketentuan seperti berikut :

·         beri nilai Rows menjadi 3 dan coloums menjadi 2

·         ubahlah table widht menjadi 800 pixels

·         ubah pula untuk border Thickness menjadi 0 pixels

·         ubah pula untuk cell padding 0 cell spacing 0 pixels

atur posisi tabel center, hasil akan terlihat seperti berikut:

3.      lalu pada baris pertama dan ketiga untuk kolom anda Merge cells dan beri image untuk baris pertama image header.png dan baris ketiga Footer.png. seperti berikut :

4.      jika sudah, anda klik baris kedua kolom pertama dan tambahkan elemen Div Tag, pada kotak dialog insert Div Tag bagian class anda pilih Menu_kiri. Seperti berikut :

5.      jka sudah hapus teks pada kolom Div Tag menu kiri, lalu aktikan teks dengan mode Unordered List sehingga akan terlihat seperti berikut :

6.      kemudian beli link masing – masing teks yang telah dibuat seperti berikut :

Teks	Link	Target
Admin	Admin.php	_self
Produk	Produk.php	_self
Menu kategori	Kategori.php	_self
News	News.php	_self
Download	Download.php	_self
Laporan	Laporan.php	_self
LogOut	Logout.php	_self

7.      sampai disini pembuatan menu home panel admin selesai, simpan dan beri nama home.php, hasil akhir akan terlihat seperti berikut :

3.      Sistem

Sekarang kita buat sistem masuk website pnel admin. Berikut langkah – langkahnya :

3.1  Menu Index Login

Halaman login ini akan pertama kali tampil. Sekarang akan membuat beberapa bagian script php untuk menjalankan fungsi login admin ke website. Ikut langkah –langkah nya :

1.       Bua dokumen baru PHP pada dreamweaver lalu hapus kode yang ada dan ketikkan beberapa baris kode seperti berikut :

2.      Jika sudah simpan dan beri nama login.php, lalu buka kembali dokumen index.php. lalu pada tab code anda ketikkan login.php pada bagian action dari form 1.

3.      Lalu pada bagian atas code dokumen index.php anda sisipkan baris kode seperti di bawah ini :

4.      Simpan ulang file index.php dan pembuatan halaman index atau login admin selesai.

3.2  Menu Home Panel

Halaman menu panel admin ini akan tampil jika addmin telah login dengan benar. Untuk membuat ikuti langkah-langkah berikut :

1.      Buat dokumen home.php lalu buka tampilan code, pada bagian atas sisipkan baris kode seperti berikut :

2.      Jika sudah simpan ulang file home.php dan sampai sini pembuatan halaman home atau panel admin selesai.

3.3  Menu Produk

Halaman menu produk ini digunakan untuk menginput data produk baru. Untuk membuat ikuti langkah berikut :

1.      Duplicate dokumen home.php lalu hasil duplicate anda ganti nama menjadi produk.php kemudian pda kolom kedua baris kedua anda tambahkan elemen divtag dan beri class :

 Menu_Tengah. Kemudian pada area Div Tag beri tabel dengan ketentuan seperti berikut :

·         Beri nilai rows menjadi 4 dan coloums menjadi 2

·         Ubahlah Tabel widht menjadi 650 pixels

·         Ubah pula untuk cell padding 0 cell spacing 0 pixels

Atur posisi tabel center, hasil seperti berikut :

2.      Kemudian aturlah tampilan pada menu tengah sehingga akan terlihat sperti berikut :

3.      Simpan ulang dan beri nama produk.php, untuk kelengkapan file lainnya bisa ambil pada cd sertaan buku.

3.4  Menu Kategori

Halaman kategori ini digunakan untuk menambah halaman kategori produk. Untuk membuat ikuti langkah – langkah berikut :

1.      Duplicate dokumen produk.php, lalu hasil duplicate anda ganti nama menjadi kategori.php. gantilah fungsi php produk_form.php menjadi kategori _form.php dan produk_data.php menjadi kategori_data.php. hasil kan terlihat sebagai berikut:

2.      Simpan ulng untuk kelengkapan berkas lainnya yang tidak dijelaskan bisa d ambil dalam sertaan buku.

3.5  Menu News

Halaman News dalah halaman berita yang mau ditampilkan. Untuk membuat ikuti langkah – langkah berikut :

1.      Duplicate dokumen kategori.php, lalu hasil duplicate anda ganti nama menjadi news.php. gantilah fungsi php kategori_form.php menjadi news _form.php dan kategori_data.php menjadi news _data.php. hasil kan terlihat sebagai berikut:

2.      Simpan ulng untuk kelengkapan berkas lainnya yang tidak dijelaskan bisa d ambil dalam sertaan buku.

3.6  Menu Download

Halaman download adalah halaman tempat pengaturan ffile yang bisa didownload. Untuk membuat ikuti langkah – langkah dibawah ini :

1.      Duplicate dokumen news.php, lalu hasil duplicate anda ganti nama menjadi download.php. gantilah fungsi php news_form.php menjadi download _form.php dan  news_data.php menjadi download_data.php. hasil kan terlihat sebagai berikut:

2.      Simpan ulng untuk kelengkapan berkas lainnya yang tidak dijelaskan bisa d ambil dalam sertaan buku.

3.7  Menu Laporan  PDF

Halalam laporan yang berisi informasi data penjualan dan menampilkan lewat format pdf. Untuk membuat ikuti langkah – langkah di bawah ini :

1.      Duplicate dokumen download.php, lalu hasil duplicate anda ganti nama menjadi laporan.php. gantilah fungsi php download_form.php menjadi laporan _form.php dan download_data.php menjadi laporan_data.php. hasil kan terlihat sebagai berikut:

2.      Simpan ulng untuk kelengkapan berkas lainnya yang tidak dijelaskan bisa d ambil dalam sertaan buku.

BAB III

SISTEM WEBSITE

HALAMAN INDEX

     Halaman index yang kita telah buat pada bab sebelumnya saat kita buka sudah dapat berjalan namun pada pada halaman index membutuhkan banyak tambahan halaman menu, untuk itu ikuti langkah – langkah seperti sibawah ini :

1.1    login

sekarang kita akan membuat beberapa bagian script php untuk menjalankan fungsi login member ke website. Caranya seperti berikut :

a.    masih pada jendela index.php, buat dokumen baru PHP pada dreamweaver.seperti di bawah ini.

b.   Kemudian akan tampil kotak dialog New Document. Pilih pilihan Blank Page selanjutnya pada bagian Page Type, pilih PHP lalu klik tombol Create.

c.   Aktifkan dokumen yang baru ditambahkan, lalu klik tab Code and hapus perintah yang sudah ada.

d. Jika sudah pada jendel Code anda ketikan kode program PHP sbb:

e.  Kemudian simpan dan beri nama Login.php.

f. Kemudian pilih jendela dokumen index.php, lalu pada tab Code anda ketikan login.php pada bagian action dari form 1.

g.  Setelah itu simpan ulang dokumen Index.php tersebut, jika sudah maka pembuatan lode PHP untuk login selesai. 

1.2  Kategori 

       Selanjutnya anda akan membbuat menu kategori, untuk itu anda ikuti langkah–langkah dibawah ini:  

a. Buat dokumen baru PHP pada dreamweaver. Hapus perintah yang telah ad pada lembar tersebut

langkahnya sama seperti membuat dokumen login.php, Lalu ketikan kode program dibawah ini:

b. bagian Desain anda aktifkan kursor ke kolom sbb :

c. Kemudian Anda klik tab Code yang ada pada dreamweaver anda. Jika sudah selanjutnnya perhatikan posisi kursor mouse anda, ketik .

d. Jika sudah simpan ulang dokumen index.php, dan pembuatan dokumen kategori selesai.

1.3  News
Sekarang anda akan membuat mennu news, yang berfungsi untuk menampilkan informasi terbaru mengenai website toko baju anda.

a. Buat dokumen baru PHP pada dreamweaver caranya seperti membuat dokumen sebelumnya lalu hapus perintah yang telah ada dan ketikkan kode program sbb :

b.  Jika sudah simpan dan beri nama news.php, lalu anda buka dokumen index.php pada bagian desain, aktifkan kolom news sbb :

c.  Kemudian anda klik tab Code dreamweaver anda. Lalu anda ketik perintah .

d.       Jika sudah simpan ulang file index.php, dan selesai pembuatan dokumen news.

1.4  TestimonialSekarang yang akan anda buat yaitu menu testimonial, menu ini berisi komentar peanggan mengenai pelaynan kualitas produk atau lain sebagainnya, yang berhubungan dengan website anda. Berikut langkah –langkah nya : 
a.  Buat dokumen baru PHP pada dreamweaver, lalu hapus perintahnya dan ketikan perintah seperti dibawah ini :  

b. Kemudian simpan dan beri nama top_testimonial.php, lalu buka jendela index.php pada bagian Design, aktifkan kursor kekolom sbb : 

c. Kemudian anda klik tab Code pada dreamweaver lalu ketik .

d.  Jika sudah simpan ulang file index.php dan pembuatan menu testimonial selesai.

1.5  keranjang Belanja Memo
keranjang belanja ini merupakan keranjang belanja memo yang berada pada sisi kanan atas website. Berikut langkah – langkahnya : 
a.  buat Dokumen baru php pada dremweaver. Hapus perintah yang ada pada lembar dokumen tersebut dan ketikkan kode sbb :

b. Seperti biasa jika sudah selesai disimpan dan beri nama keranjang_belanja_memo.php dan buka kembali jendela index.php pada bagian design, dan aktifkan kursor seperti digambar.

c. Sama seperti sebelumnya anda klik tab code pdda dreamweaver lalu ketik perintah .

d. Jika sudah maka sekarang anda membuat dokumen baru PHP lalu hapus teksnya yang sudah ada dan ketikkan kode program seperti berikut:

e. Kemudian simpan dengan nama jumlah.php. buka jendel index.php pada bagian design dan aktifkan kursor seperti digambar:

f.  Sama seperti sebelumnya anda klik tab code pada dreamweaver anda. Lalu nda ketik perintah php include “jumlah.php”;?> seperti dibawah ini :

g. Jika sudah simpan ulang index.php dan sampai sini pembuatan menu keranjang belanja memo pada halaman index selesai.

1.6  Best sellers 
Pada menu best seller ini merupakan menu yang akan menampilkan informasi produk – produk dengan penjualan terbaik sebanyak 10 produk dengan animasi berjalan dari bawah ke atas. 
a.     Buat dokumen baru PHP pada dreamweaver, seperti biasa hapus perintah yang ada pada lembar kerj dokumen lalu ketikan kode seperti dibawah ini :

b. Kemudian simpan dan beri nama bestseller.php lalu buka dokumen index.php pada bagianDesign, seperti berikut :

c.  Lalu klik tab code dan ketikan perintah .

d. Jika sudah simpan ulang index.php , dan pembuatan menu bestseller selesai.

1.7 Informasi
1.7.1 informasi visitors
Menu informasi ini dibuat untuk menampilkan informasi berupa jumlah user online, status angka pengunjung dan status yahoo messengger serta beberpa informasi lainnya yang langsung dibuat sebelumnya pada saar mendesign tampilan website. 
a.   Buat dokumen baru php  pada dreamweaver lalu hapus perintah yang ada dan ketikan kode seperti dibawah ini :

b. Kemudian simpan dan beri nama visitor.php dan buka kembali dokumen index.php dan buka bagian design lalu aktifkan kursor kekolom seperti berikut

c.  Selanjutnya anda klik tab code lalu ketikkan .

d.  Simpan kembali dokumen index.php dan selesai pembuatan menu visitor pada halaman index selesai.