Membuat Katalog Online dengan PHP dan CSS Oleh karena itu, pada buku ini penulis akan menjabarkan...

Sanksi Pelanggaran Pasal 72

Undang-undang Nomor 19 Tahun 2002

Tentang Hak Cipta

1. Barangsiapa dengan sengaja melanggar dan tanpa hak melakukan perbuatan sebagaimana dimaksud dalam Pasal 2 Ayat (1) atau Pasal 49 Ayat (1) dan Ayat (2) dipidana dengan pidana penjara masing-masing paling singkat 1 (satu) bulan dan/atau denda paling sedikit Rp 1.000.000,00 (satu juta rupiah), atau pidana penjara paling lama 7 (tujuh) tahun dan/atau denda paling banyak Rp 5.000.000.000,00 (lima miliar rupiah).

2. Barangsiapa dengan sengaja menyiarkan, memamerkan, mengedarkan, atau menjual kepada umum suatu ciptaan atau barang hasil pelanggaran hak cipta atau hak terkait sebagai dimaksud Ayat (1) dipidana dengan pidana penjara paling lama 5 (lima) tahun dan/atau denda paling banyak Rp 500.000.000,00 (lima ratus juta rupiah).

Membuat Katalog Online

dengan PHP dan CSS

KOMANG WISWAKARMA

www.bukulokomedia.com

Membuat Katalog Online dengan PHP dan CSSOleh: Komang WiswakarmaCopyright © Lokomedia, 2009Hak Cipta dilindungi oleh Undang-Undang

Diterbitkan pertama kali oleh :

Penerbit LokomediaJl. Jambon, Perum. Pesona Alam Hijau 2 No. B4, Kricak, Yogyakarta 55242.

email : [email protected] : http://bukulokomedia.com

ISBN : 978-979-1758-62-8

Cetakan Pertama : Agustus 2009Cetakan Kedua : April 2010

Dilarang memperbanyak, mencetak ataupun menerbitkan sebagian maupun seluruh isi buku ini tanpa izin tertulis dari penerbit.

v

Kata Pengantar

Pada era global saat ini, sebuah presentasi online seperti website sangatlah penting bagi sebuah perusahaan. Contohnya, sebuah perusahaan yang menjual produk-produk kerajinan tangan, alangkah baiknya jika perusahan ini mempunyai sebuah website yang dapat juga dipergunakan sebagai online shop-nya. Sehingga, orang dari luar negeripun dapat dengan mudah memesan barang-barang dari perusahaan tersebut.

Oleh karena itu, pada buku ini penulis akan menjabarkan cara mudah membuat sebuah website dengan engine CMS (Content Management System) buatan sendiri yang dapat diandalkan.

Bahkan untuk pemula sekalipun, buku ini dapat langsung dipraktekkan, karena pada buku ini penulis akan lebih banyak menjabarkan cara pembuatan CMS menggunakan Click Programming daripada penulisan kode-kode PHP yang sangat panjang. Biasanya penulisan kode-kode yang panjang inilah salah satu penyakit kronis yang diderita oleh programmer PHP pemula.

Akhir kata, penulis juga menyadari masih banyak terdapat kekurangan- kekurangan dalam buku ini. Untuk itu, Anda dapat mengirimkan sebuah kritik, saran atau pertanyaan ke alamat email penulis [email protected] atau mengunjungi website penulis di www.wiswakarma.com.

Gianyar, Bali, Juni 2009

Komang Wiswakarma

vii

Daftar Isi

BAB 1. Pengenalan Website dan Bahasa Pemrograman yang Digunakan

1.1. Apa Saja yang Diperlukan ...........................................................................2

1.1.1. Web Text Editor..................................................................................2

1.1.2. Web Server .........................................................................................2

1.1.3. Software Pengolah Citra ....................................................................2

1.2. Content Management System (CMS) .........................................................2

1.3. Instalasi Software Pendukung .....................................................................3

1.4. Konfigurasi Appserv ....................................................................................3

1.5. Pengenalan Macromedia Dreamweaver .....................................................4

1.5.1. Insert Bar ............................................................................................6

1.5.2. Document Toolbar .............................................................................6

1.5.3. Property Inspector ..............................................................................7

1.5.4. Panel Group ........................................................................................7

1.6. Pengenalan CSS ...........................................................................................7

1.6.1. Cara Kerja CSS ..................................................................................7

1.6.2. Penempatan CSS ................................................................................9

1.6.2.1. Internal Style ........................................................................9

1.6.2.2. External Style .....................................................................10

1.6.3. Struktur Sederhana CSS ..................................................................11

1.6.3.1. Class Selector .....................................................................11

1.6.3.2. ID Selector .........................................................................11

1.6.3.3. Pseudo Selector ..................................................................12

1.7. Pengenalan PHP .........................................................................................12

viii

BAB 2. Proyek Membuat Katalog Produk Online

2.1. Tahap Desain dengan Photoshop ...............................................................16

2.1.1. Mendesain Bagian Header ...............................................................16

2.1.2. Membuat Efek Transparansi pada Canvas ......................................20

2.1.3. Melakukan Slice pada Desain .........................................................22

2.2. Tahap Desain CSS pada Dreamweaver .....................................................24

2.2.1. Membuat Dokumen Baru untuk PHP dan CSS ..............................24

2.2.2. Membuat Background Awan ...........................................................24

2.2.3. Mengatur Bagian Header dan Body ................................................28

2.2.4. Mengatur Bagian Menu ...................................................................31

2.2.5. Membuat Desain untuk Module ......................................................32

2.2.6. Membuat Desain untuk Konten Katalog.........................................34

2.2.7. Merapikan Header, Konten dan Footer Module .............................36

2.2.7.1. Merapikan Header Module ................................................36

2.2.7.2. Merapikan Konten Module ...............................................38

2.2.7.3. Merapikan Footer Module .................................................39

2.2.8. Merapikan Header, Konten dan Footer Konten Katalog ................40

2.2.8.1. Merapikan Header Konten Katalog ..................................40

2.2.8.2. Merapikan Konten untuk Konten Katalog ........................41

2.2.8.3. Merapikan Footer Konten Katalog....................................42

2.2.9. Merapikan Footer .............................................................................43

2.3. Membuat File Instalasi Web ......................................................................45

2.4. Membuat Form Login ................................................................................52

2.4.1. Desain Form Login .........................................................................52

2.4.2. Pemrograman Form Login .............................................................53

2.5. Membuat Halaman Administrator .............................................................56

2.5.1. Mendesain Halaman Administrator.................................................56

2.5.2. Pemrograman Administrator ...........................................................58

2.5.2.1. Membuat Menu Halaman admin_sitemeta.php ................63

2.5.2.2. Membuat Menu Halaman admin_sitekategori.php ..........70

2.5.2.3. Membuat Menu Halaman admin_siteproduk.php ............79

2.5.2.4. Membuat Menu Halaman admin_sitenews.php ...............87

2.5.2.5. Membuat Menu Halaman admin_siteorder.php ...............88

2.5.2.6. Membuat Menu Halaman admin_sitemodule.php ...........89

2.5.2.7. Membuat Menu Halaman admin_siteuser.php .................91

2.6. Membuat Halaman User Interface (UI) ....................................................92

2.6.1. Membuat Module List Category .....................................................97

2.6.1.1. Membuat Halaman Detail Kategori ................................101

2.6.1.2. Membuat Halaman Detail Produk ...................................104

2.6.2. Module Site Search ........................................................................ 111

2.6.3. Module Hit Counter .......................................................................114

2.6.4. Module Latest News ......................................................................116

2.6.5. Membuat Module Berdasarkan Tabel Sitemodule .......................119

2.6.6. Merancang Halaman Depan ..........................................................122

2.6.6.1. Membuat List Latest Product ..........................................122

2.6.6.2. Membuat List Hilite Product ...........................................123

2.6.6.3. Membuat Link Gambar ke Detail Product ......................125

2.6.7. Membuat Menu Lainnya ...............................................................127

BAB 3. Evaluasi Website

3.1. Testing pada Browser ...............................................................................131

3.2. Pengoptimalan Kode Web .......................................................................131

3.3. Pengoptimalan Kode Gambar .................................................................131

3.4. Search Engine Optimalization (SEO) .....................................................132

ix

x

3.5. Web Security ............................................................................................132

BAB 4. Upload Website

BAB 1

Pengenalan Website dan Bahasa Pemrograman yang Digunakan

Website adalah sebuah media presentasi online untuk sebuah perusahaan atau individu. Website juga dapat digunakan sebagai media penyampai informasi secara online, seperti detik.com, okezone.com, vivanews.com, dan lain-lain.

Berdasarkan kedinamisan, website dapat dibedakan menjadi dua, yaitu website statis dan website dinamis. Website statis bersifat un-real time. Maksudnya, website statis tidak dapat diubah secara simultan dalam sebuah web based administrator, sehingga hanya bisa diubah ketika kita langsung mengakses file pada server dan melakukan perubahan pada source codenya. Sedangkan website dinamis adalah sebuah website yang dilengkapi sebuah pengaturan (administrator) yang dapat berfungsi sebagai sarana untuk mengubah data website secara real time tanpa menyentuh source codenya dalam server.

Nah, untuk menciptakan website dinamis ini diperlukan bahasa pemrograman yang nantinya akan berfungsi untuk memproses data yang kita masukkan, kemudian akan diteruskan ke database, selanjutnya akan ditampilkan pada halaman web. Beberapa contoh bahasa pemrograman web yang dapat Anda gunakan diantaranya adalah PHP, ASP, JSP, dan ColdFusion.

Pada buku ini, penulis memilih PHP, karena PHP dapat dikatakan paling mudah dimengerti dibandingkan bahasa-bahasa pemrograman web lainnya. Meskipun, dalam penggunaannya PHP sangat menguntungkan, tetapi masih banyak juga kalangan yang menganggap PHP sulit, terutama kalangan pemula yang menginginkan kepraktisan dalam meng-generate kode-kode PHP. Namun, sekarang hal ini sudah dapat diwujudkan dengan adanya tools Recordset dari Macromedia Dreamweaver. Maka, nantinya dalam buku ini juga akan lebih banyak membahas trik-trik menggunakan tools tersebut dalam pembuatan website yang kompleks.

Membuat Katalog Online dengan PHP dan CSS12

1.1 Apa Saja Yang Diperlukan

1.1.1 Web Text Editor

Pertama, untuk memulai mempelajari pembuatan web, tentunya kita memerlukan text editor atau sebuah aplikasi HTML code authoring yang dapat mempermudah kita dalam membuat maupun mendesain web. Kali ini kita akan menggunakan Macromedia Dreamweaver 8. Software ini bisa didownload di website resminya http://macromedia.com atau dapat dibeli di toko-toko distributornya.

Macromedia Dreamweaver adalah sebuah program aplikasi yang menyediakan segala kebutuhan untuk membuat sebuah web yang utuh dan mudah dengan adanya tool-tool yang sudah terintegrasi dalam program Dreamweaver.

1.1.2 Web Server

Kedua, kita juga membutuhkan sebuah web server. Untuk pembuatan web secara offline, kita membutuhkan sebuah web server lokal (localhost). Hal ini berguna untuk mensimulasikan sebuah server sebenarnya (online). Pada web server pula, nantinya kita akan meletakkan file beserta database untuk web.

Kali ini kita akan menggunakan Appserv sebagai web server. Alasannya, karena Appserv sudah berisi PHP, MySQL, Apache dan phpMyAdmin yang merupakan komponen-komponen utama untuk server lokal. Jadi, hanya dengan satu kali install, web server lokal Anda sudah siap untuk digunakan.

1.1.3 Software Pengolah Citra

Ketiga, program pengolah citra (gambar), seperti Adobe Photoshop. Software ini dapat Anda beli pada website resminya http://adobe.com atau toko-toko distributornya. Mengapa Adobe Photoshop? Karena kompatibilitas, tools serta fitur-fitur yang diberikan oleh software ini sudah lebih dari memadai untuk pembuatan proyek website.

1.2 Content Management SystemAnda tentu tahu Joomla, Drupal, Mambo ataupun Wordpress? Website tersebut menggunakan CMS (Content Management System). CMS adalah sebuah aplikasi web dinamis yang dipersiapkan untuk dapat mengubah maupun mengedit seluruh

13BAB I. Pengenalan Website dan Bahasa

Pemrograman yang Digunakan

isi web dengan hanya beberapa klik pada bagian administrator web, hal tersebut merupakan salah satu point penting dari sebuah website yang dinamis.

Nah, kali ini kita akan membuat sesuatu yang mirip dengan itu, tapi dengan versi lebih sederhana alias non OOP (Object Oriented Programming), namun sudah mencukupi untuk kebutuhan website kelas menengah ke bawah, seperti toko online, website personal, katalog, dan sebagainya. Biasanya, OOP hanya dipergunakan untuk pembuatan proyek website yang kompleks seperti Facebook, Youtube, Friendster, Sistem Informasi Akademik, dan sejenisnya.

Disamping itu, untuk menambah originalitas serta meningkatkan kemampuan pemrograman web, apa yang bisa dibanggakan jika kita hanya menggunakan karya orang lain, namun lain halnya jika tujuannya untuk lebih cepat dalam pembuatan web atau memperdalam sistem CMS tersebut.

Oleh karena itu, melalui buku ini, penulis akan mencoba menjabarkan cara membuat CMS tersebut dengan cara yang sangat sederhana agar Anda mudah memahami dan mempraktekkan langsung pembuatannya. Proyek yang kali ini kita buat menggunakan PHP yang dipermudah dengan bantuan tools Recordset dari Dreamweaver, serta dibantu juga dengan skrip-skrip desain web seperti CSS, JavaScript, web database MySQL, serta pengolah gambar Adobe Photoshop.

1.3 Instalasi Software PendukungUntuk Macromedia Dreamweaver dan Adobe Photoshop saya asumsikan sudah terinstall dengan sempurna pada komputer Anda. Kemudian untuk instalasi Appserv, silahkan lihat cara instalasinya melalui video tutorial yang ada di CD.

1.4 Konfigurasi Appserv Nah, setelah instalasi selesai, kita telah mempunyai web server lokal (localhost). Pada appserv, folder data terletak pada C:\Appserv\www\. Nah, disana Anda akan meletakkan file-file web nantinya. Pada folder www terdapat folder yang sudah ada, yaitu, appserv, cgi-bin dan phpMyAdmin, folder-folder tersebut tidak boleh dihapus. Dan jika nantinya web Anda telah selesai dan anda ingin mengupload web tersebut ke internet (bukan di localhost lagi), maka folder-folder ini tak perlu ikut di-upload, cukup file-file data anda saja.

Untuk mengakses database melalui phpMyAdmin, silahkan buka browser, lalu ketik http://localhost, kemudian kita klik phpMyAdmin Manager version 2.10.2, maka akan tampil window popupnya. Lihat gambar 1.1.


Gambar 1.1. Login phpMyAdmin

Pada username isikan dengan root serta pada password gunakan password yang sudah anda isikan sebelumnya pada instalasi Appserv. Jika sukses, maka akan tampil halaman seperti pada gambar 1.2.

Gambar 1.2. Tampilan awal phpMyAdmin

Semua komponen penting dalam pembuatan web sudah siap. Sekarang saatnya untuk mendesain dan memprogram web.

1.5 Pengenalan Macromedia Dreamweaver 8Salah satu HTML web authoring yang populer digunakan oleh para webmaster yaitu Macromedia Dreamweaver 8. Macromedia Dreamweaver mempunyai



tool-tool yang lengkap untuk membuat sebuah website secara sempurna. Fitur editing secara visual yang dimiliki oleh program ini memungkinkan Anda untuk membuat web tanpa harus mengenal kode-kode yang ada didalamnya, sehingga proses pembuatan web akan semakin praktis dan cepat.

Untuk memulai Macromedia Dreamweaver 8, pilih menu Start kemudian Programs setelah itu cari Starter Macromedia Dreamweaver 8. Setelah anda klik, maka akan tampil halaman seperti pada gambar 1.3.

Gambar 1.3 Tampilan awal Dreamweaver 8

Dalam menu pembuka ini, anda dapat memilih untuk membuka halaman web sebelumnya atau membuat file web baru. Disini juga disediakan pilihan bahasa web yang akan Anda gunakan. Untuk memulainya, pilih Create New HTML, maka akan tampil halaman baru seperti pada gambar 1.4.


Gambar 1.4 Tampilan lembar kerja Dreamweaver 8

Berikut penjelasan sederhana dari tampilan lembar kerja Dreamweaver 8.

1.5.1 Insert Bar

Insert Bar berisi tool-tool untuk memasukkan objek ke dalam halaman web. Lihat gambar 1.5.

Gambar 1.5 Tampilan Insert Bar

1.5.2 Document Toolbar

Document toolbar berisi opsi untuk menampilkan tampilan yang berbeda pada window yaitu, Design View, Split View dan Code View. Serta berisi beberapa opsi lain untuk menampilkan web pada browser. Lihat gambar 1.6.



Gambar 1.6 Tampilan Document Toolbar

1.5.3 Property Inspector

Property Inspector berisi berbagai opsi untuk konfigurasi dari objek yang anda pada halaman web. Lihat gambar 1.7.

Gambar 1.7 Tampilan Property Inspector

1.5.4 Panel Group

Pada panel Group berisi berbagai tools untuk mengatur web anda. Diantaranya Panel CSS, Panel Application, Panel Tag Inspector, serta Files Panel. Lihat gambar 1.8.

1.6 Pengenalan CSSCSS atau Cascading Style Sheet saat ini adalah sebuah elemen penting dalam pembuatan sebuah web. Sama pentingnya saat kita mendesain bentuk web pada Photoshop. Dengan CSS, kita dapat mendesign sejumlah halaman dengan aturan yang sama tanpa mengubah halaman-halaman tersebut satu persatu. Bayangkan saja anda mempunyai ratusan halaman dan anda harus mendesain halaman tersebut satu persatu, wah, akan hanya menghabiskan waktu. Dengan CSS, masalah tersebut akan mudah diatasi. Dengan membuat sebuah file CSS kemudian meng-importnya ke dalam file halaman web. Kita dapat memformat style semua halaman web yang kita buat.

Saat ini CSS merupakan aturan style yang banyak digunakan dikarenakan fleksibilitas dari tag, kemudahan dan lengkapnya atribut yang dimilikinya.


Gambar 1.8 Tampilan Panel Group



Penggunaan CSS dalam web akan lebih efisien dikarenakan CSS dapat digunakan secara berulang pada tag-tag tertentu, sehingga kita tidak usah mengetikkan ulang seluruh perintah pemformatan desain seperti halnya dalam HTML klasik.

1.6.1 Cara Kerja CSS.

CSS bekerja dengan menggunakan dua buah elemen, yaitu selector dan declaration. Selector berfungi menempatkan sebuah declaration pada halaman web. Declaration berisi perintah perintah yang mengatur tampilan sedangkan selector nantinya akan meletakkan declaration tersebut di halaman web.

Contoh halaman web yang memuat CSS.<html><head><title>Proyek Pembuatan CMS Katalog Online</title><style type=”text/css”>.type {font-familiy:arial; font size: 30px;}</style></head>

<body><table><tr><td class=”type”>Learning CSS basic</td></tr></table></body></html>

Pada kode tersebut terlihat bahwa .type merupakan declaration dan <td class=”type”> merupakan selector dimana declaration akan ditempatkan.

1.6.2 Penempatan CSS

CSS dapat ditempatkan dalam berbagai cara dalam sebuah web. Diantaranya menggunakan cara Internal style dan External Style.

1.6.2.1 Internal Style

Pada Internal style, CSS akan diletakkan di halaman web itu sendiri. Jadi selector dan declaration berada pada halaman yang sama, contohnya:

<html><head><title>Proyek Pembuatan CMS Katalog Online</title><style type=”text/css”>.type {font-familiy:arial; font-size: 30px; background-


color:blue; font-color:white;}</style></head><body><table><tr><td class=”type”>Learning CSS basic</td></tr></table></body></html>

Jenis CSS seperti ini hanya dapat memformat tampilan dari sebuah halaman web. Jenis lain dari style Internal CSS yaitu Inline CSS. Jenis CSS ini diletakkan langsung pada tag yang akan diubah.

<html><head><title>Learning CSS</title></head><body><font style=”Times New Roman; font-family:times new roman; font-size: 25px; background-color:red”>Learning the basic of CSS</font></body></html>

1.6.2.2 External Style

External style yaitu penempatan file css terpisah dengan halaman web, contohnya:<html><head><title>Learning all CSS</title><style>@import url (http://situsdimanacssberada.com/filecssnya.css);</style></head><body><div id=”type”>Formatted tag</div></body></html>

Pada contoh kode halaman diatas, file CSS akan diambil dari alamat situs http://situsdimanacssberada.com/filecssnya.css. Sedangkan cara yang kedua untuk External CSS, yaitu:

<html><head><title>Learning all CSS</title><link href=”pathmenuju/style.css” rel=”stylesheet”



type=”text/css” /></head><body><div id=”type”>Formatted tag</div></body></html>

Pada contoh halaman seperti diatas, file CSS akan diambil dari folder didalam server. Jadi, jika anda menginginkan cara External Style, maka anda harus membuat file CSS terlebih dahulu dimana dokumen CSS tersebut berisi aturan style yang akan mengatur tampilan dokumen web yang dibuat.

1.6.3 Struktur Sederhana CSS.

Dalam pembuatan web menggunakan CSS dikenal struktur penulisan baku sebuah aturan selector maupun declaration. Ini berguna agar aturan CSS tersebut dapat ditampilkan dengan baik dalam dokumen yang dibuat.

1.6.3.1 Class Selector

Pada Class Selector, aturan CSS dibuat menggunakan titik atau dot sebagai declarationnya. Kemudian akan dilanjutkan dengan mendefinisikan class sebagai selectornya. Adapun contohnya sebagai berikut.

<html><head><title>Class Selector</title><style type=”text/css”>tulis.1da {font-family:verdana;}tulis.2da {font-family:times;}</style><body><tulis class=”2da”>Contoh tulisan dengan font times</tulis><tulis class=”1da”>Contoh tulisan dengan font verdana</tulis></body></html>

1.6.3.2 Id Selector

Pada Id Selector, aturan CSS dibuat menggunakan # (kres) sebagai selectornya dan dilanjutkan dengan div id sebagai declarationnya

<html><head><title>Class Selector</title>



<?phpDisini letak skrip-skrip PHP?>

Setiap perintah juga harus dilengkapi dengan titik koma ”;”. Serta variabel PHP ditulis dengan tanda dolar ($) dan diikuti nama variabel tanpa spasi.

// Perintah diakhiri dengan tanda ”;”<?phpPerintah PHP1;Perintah PHP2;?>// Variabel tanpa spasi<?php$variabelphp = ”Nilai dari variabephp”;$tulis = “value dari tulis”;?>

Untuk menghubungkan web berbasis PHP dengan database, biasanya akan membutuhkan sebuah perantara koneksi. Koneksi ini dapat dibuat dengan mudah menggunakan tools Recordset yang ada pada Dreamweaver. Tapi untuk sederhananya sebagai berikut:

<?php$servername = “localhost”;$username = “root”;$password = “password”;$database =”database”;

mysql_connect($servername,$username,$password) or die (“Gagal Koneksi”);mysql_select_db($database) or die(“Database tidak ada”);?>

Kemudian simpan file tersebut pada folder root website, maka setiap file yang perlu untuk mengakses database akan memerlukan file koneksi tersebut. Gunakan fungsi require() atau include() pada halaman PHP yang memerlukan file koneksi.

Membuat Katalog Online dengan PHP dan CSS Oleh karena itu, pada buku ini penulis akan menjabarkan...

Documents

Transcript of Membuat Katalog Online dengan PHP dan CSS Oleh karena itu, pada buku ini penulis akan menjabarkan...