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.