1 2 Trik Rahasia Master PHP Terbongkar Lagi Lukmanul Hakim Copyright Lokomedia, 2009 Diterbitkan pertama kali oleh : Penerbit LOKOMEDIA Jl. Arwana No...
Dilarang memperbanyak, mencetak ataupun menerbitkan sebagian maupun seluruh isi buku ini tanpa izin tertulis dari penerbit.
Kata Pengantar
Menurut request terbanyak dari para pembaca setia buku-buku saya mengenai tema buku PHP yang akan saya tulis selanjutnya, maka yang menduduki ranking teratas adalah tema mengenai Toko Online dan update proyek CMS Lokomedia, menyusul dibawahnya tema mengenai AJAX dan OOP (kedua tema tersebut juga akan penulis wujudkan dalam bentuk buku). Maka sebagai rasa terima kasih, menjelang akhir tahun 2009 ini, penulis menyempatkan diri untuk menulis tema tentang Toko Online dan update proyek CMS Lokomedia (terutama masalah security). Disamping itu, penulis juga menyajikan beberapa tema tambahan yang juga dibahas secara tuntas seperti pembuatan laporan berbasis PDF, editor TextArea ala Ms. Word (TinyMCE dan TinyMCPUK0, mempercantik galeri foto dan paging, dan lain-lain. Sebenarnya masih banyak fitur-fitur CMS Lokomedia dan Toko Online yang belum sempat penulis tuangkan dalam buku ini, seperti syntax highlighted, guestbook, google search, google sitemap, status YM dan Facebook, dan lainlain. Oleh karena itu, apabila ada update terbaru, penambahan fitur, dan perbaikan bug serta security, semuanya akan penulis upload secara gratis di website http:// bukulokomedia.com. Akhir kata, penulis menyadari dalam buku ini tentu masih jauh dari sempurna. Oleh karena itu, pertanyaan, kritik, dan saran dapat dialamatkan ke email [email protected].
Yogyakarta, November 2009 Lukmanul Hakim
iii
Kupersembahkan Buku ini untuk Anakku yang selalu menceriakan Hidupku
“Fathan Ahlul Faradis”
iv
Daftar Isi
BAB 1. Bikin Paging Lebih Bergaya Trik 1. Paging tanpa Style....................................................................................2 Trik 2. Memahami Struktur Style Paging...........................................................4 Trik 3. Menerapkan Style pada Paging...............................................................5 Trik 4. Paging Model Flickr.................................................................................8 Trik 5. Paging Model Gradasi...........................................................................11 Trik 6. Paging Model Amazon..........................................................................13 Trik 7. Paging Model Background Dua Gambar..............................................15 Trik 8. Paging Model Sudut Tumpul.................................................................18 BAB 2. Editor TextArea ala Ms. Word Trik 9. Memilih Editor WYSIWYG yang Tepat...............................................24 Trik 10. Instalasi dan Pengujian TinyMCE.......................................................26 Trik 11. Menjelajah Fitur TinyMCE..................................................................27 Trik 12. Contoh Penggunaan TinyMCE............................................................28 Trik 13. Instalasi dan Pengujian TinyMCPUK.................................................31 Trik 14. Kolaborasi TinyMCPUK dengan MySQL..........................................32 Trik 15. Upload Gambar di TinyMCPUK........................................................33 Trik 16. Input Data Berupa Tabel di TinyMCPUK...........................................38 Trik 17. Upload Video Youtube di TinyMCPUK.............................................39 Trik 18. Percepat TinyMCPUK dengan Compressor.......................................41 BAB 3. Proyek Membuat Galeri Foto yang Cantik Trik 19. Membuat Folder dan Database Galeri Foto........................................45
v
Trik 20. Setting untuk Mengaktifkan Grafik.....................................................46 Trik 21. Input Data Album dengan Teknik Thumbnail.....................................48 Trik 22. Input Galeri Foto Berdasarkan Album................................................53 Trik 23. Menampilkan Data Album..................................................................55 Trik 24. Menampilkan Galeri Foto dalam Popup Window..............................56 Trik 25. Percantik Album dengan Teknik Border.............................................59 Trik 26. Percantik Galeri Foto dengan Teknik Frame......................................60 Trik 27. Animasi Galeri Foto degan Teknik Scrolling......................................64 Trik 28. Slide Show Foto dengan Teknik Fading.............................................65 BAB 4. Proyek Membuat Toko Online yang Friendly Trik 29. Memahami Alur Proses Sistem e-Commerce.....................................71 Trik 30. Perancangan Database Toko Online....................................................73 Trik 31. Menampilkan Produk Terbaru.............................................................76 Trik 32. Membuat Keranjang Belanja...............................................................77 Trik 33. Update Keranjang Belanja...................................................................81 Trik 34. Menghapus Produk dalam Keranjang Belanja...................................82 Trik 35. Menampung Data Kustomer...............................................................83 Trik 36. Input Data Kustomer beserta Data Ordernya......................................84 Trik 37. Menampilkan Data Order....................................................................87 Trik 38. Mengubah Status Order.......................................................................87 Trik 39. Desain Cantik Toko Online (with SEO URL)....................................91 Trik 40. Administrator Toko Online..................................................................92 BAB 5. Kupas Tuntas Membuat Laporan PDF Berbasis Web Trik 41. Instalasi ezPdf......................................................................................96 Trik 42. Menggunakan ezPdf............................................................................98
vi
Trik 43. Lebih Lanjut dengan Teks di ezPdf.....................................................99 Trik 44. Memasukkan Gambar dalam Dokumen PDF...................................100 Trik 45. Menentukan Kertas dan Mengatur Margin.......................................102 Trik 46. Membuat Tabel Otomatis Khas ezPdf...............................................103 Trik 47. Menampilkan Data dari Database dengan ezPdf..............................104 Trik 48. Menambahkan Header, Footer, dan Penomoran...............................107 Trik 49. Menampilkan Data dari Tabel yang Berelasi....................................109 Trik 50. Menampilkan Data dari Database dengan FPDF.............................112 Trik 51. Fungsi Tabel Otomatis di FPDF........................................................115 BAB 6. Security dan Studi Kasus Aplikatifnya Trik 52. Berikan Nama Unik untuk Folder Admin.........................................120 Trik 53. Mengganti Password Default Admin................................................122 Trik 54. Mendisable Edit Username................................................................124 Trik 55. Menghalau Spam dengan Captcha....................................................124 Trik 56. Melumpuhkan XSS Attack................................................................128 Trik 57. Menangkal SQL Injection..................................................................132 Trik 58. Menjinakkan Blind SQL Injection....................................................134 Trik 59. Mencegah Voting Ganda pada Aplikasi Poling................................135 Trik 60. Mencegah Browsing Folder secara Langsung..................................135 Trik 61. Mengatasi Input Data tanpa Spasi.....................................................138 Trik 62. Menutup Celah Aplikasi Download..................................................140 Trik 63. Sensor Kata-Kata yang Tidak Senonoh............................................142 Trik 64. Validasi Data Menggunakan JavaScript............................................144 Trik 65. Cegah Editing Password Admin oleh User Biasa.............................145
vii
BAB 7. Update Proyek CMS Senilai Rp. 34 Juta Trik 66. Membuat Menu Horizontal...............................................................152 Trik 67. Membuat Menu Drop Down (Sub Menu)........................................157 Trik 68. Membuat Fungsi Auto Link...............................................................160 Trik 69. Aggregator RSS Menggunakan MagpieRSS....................................163 Trik 70. Menampilkan Kalender dalam Website............................................165 Trik 71. Menghitung Jumlah Download.........................................................168 Trik 72. Menampilkan Komentar Terakhir.....................................................168 Trik 73. Statistik Pengunjung..........................................................................170 Trik 74. Jumlah User yang Sedang Online....................................................173 Trik 75. Menentukan Fokus Kursor pada Form..............................................174 Trik 76. Merapikan Layout yang Berantakan.................................................175 Trik 77. Menambahkan Modul Galeri Foto....................................................178 Trik 78. Gonta-Ganti Templates Otomatis (1)................................................179 Trik 79. Gonta-Ganti Templates Otomatis (2)................................................183 Trik 80. Gonta-Ganti Templates Otomatis (3)................................................185 Tambahan. Membuat Shoutbox (Mini Chat)..................................................188
viii
BAB I
Bikin Paging lebih Bergaya
Trik 1. Paging tanpa Style Trik 2. Memahami Struktur Style pada Paging Trik 3. Menerapkan Style pada Paging Trik 4. Paging Model Flickr Trik 5. Paging Model Gradasi Trik 6. Paging Model Amazon Trik 7. Paging Model Background Dua Gambar Trik 8. Paging Model Sudut Tumpul
Bab 1
Bikin Paging lebih Bergaya
Saat menjelajah ke beberapa website, penulis menjumpai beberapa paging yang ditampilkan dengan ciamik (red: cantik) yang membuat penulis tergelitik untuk membuatnya. By the way, udah pada tau paging kan? Kalau belum, baca deh buku ’Membongkar Trik Rahasia Para Master PHP’, di buku tersebut telah dibahas sampai tuntas .. tas, promosi nih ye . Intinya sih, paging itu teknik untuk menampilkan data yang dibagi menjadi beberapa halaman dikarenakan banyaknya data yang akan ditampilkan .. gitcu, itu lho yang biasanya ada navigasi berupa angka di bagian bawah data, contohnya Prev - 1 - 2 - 3 - Next .. mau lebih jelas, lihat aja gambar 1.1 di halaman berikutnya. Oke, langsung aja deh, nikmati beberapa modifikasi dan eksperimen yang penulis lakukan untuk membuat tampilan paging agar tampak lebih ciamik.
Trik 1. Paging tanpa Style Maaf nih, sedikit mengulang dari buku sebelumnya, kalau udah baca, lewatin aja trik ini. Jadi, sebelum masuk ke pembahasan mengenai penerapan style pada paging, ada baiknya kita mengetahui dulu cara membuat paging tanpa style. Hal ini penting, agar kita bisa menerapkan style pada paging yang belum ada stylenya .. nggak usah banyak cingcong, perhatikan langsung skrip berikut: Skrip nonstyle.php
3: Hitung total data dan halaman mysql_query(”SELECT * FROM anggota”); mysql_num_rows($tampil2); ceil($jmldata/$batas);
// Link ke halaman sebelumnya (Prev) if($halaman > 1){ $prev=$halaman-1; echo ”« Prev”; } else{ echo ”« Prev”; } // Tampilkan link halaman 1,2,3 ... for($i=1;$i<=$jmlhal;$i++) if ($i != $halaman){ echo ” $i ”; } else{ echo ” $i ”; } // Link ke halaman berikutnya (Next) if($halaman < $jmlhal){ $next=$halaman+1; echo ”Next »”; } else{ echo ”Next »”; } ?>
Sekarang coba jalankan skrip nonstyle.php, maka hasilnya dapat dilihat pada gambar 1.1.
Bab I. Bikin Paging lebih Bergaya
3
Gambar 1.1 Hasil skrip nonstyle.php
Pada gambar 1.1, paging ditampilkan apa adanya. Jadi, agar tampilan paging tidak kelihatan garing, simak aja trik-trik berikutnya ya.
Trik 2. Memahami Struktur Style Paging Ada satu lagi nih, sebelum menerapkan style pada paging, yaitu kita pahami dulu struktur style yang nantinya akan diterapkan pada paging. Lihat gambar 1.2.
Gambar 1.2 Struktur style pada paging
4
Trik Rahasia Master PHP Terbongkar Lagi
Keterangan: • Prev/Next (Disabled): link Prev/Next dalam keadaan tidak aktif apabila berada di halaman paling pertama (Prev tidak aktif), sedangkan apabila berada di halaman paling terakhir (Next tidak aktif). Nb: tidak aktif = tidak bisa diklik. • Prev/Next (Enabled): link Prev/Next dalam keadaan aktif apabila tidak berada di halaman paling pertama (Prev aktif) dan tidak berada di halaman paling terakhir (Next aktif). • Hover: keadaan apabila mouse berada diatas link. • Current Active Page: halaman yang aktif saat itu (link tidak aktif). • Standard Page Selector: halaman yang tidak aktif saat itu (link aktif). Meski masih menggunakan bahasa asing, smoga masih mudah dimengerti, soalnya kalau di indonesiain malah jadi ribet urusannya, pokoknya baca aja keterangannya pelan-pelan dan diresapi pasti bisa nangkep maksudnya.
Trik 3. Menerapkan Style pada Paging Sekarang saat-saat yang dinantikan telah tiba, yaitu cara menerapkan style pada paging. Keterangan masing-masing blok perintah dapat dibaca pada skripnya, perhatikan dua buah skrip berikut (khusus skrip paging_01.php, perhatikan teks yang ditebalkan): Skrip standar.css /* div dengan nama paging */ div.paging { padding : 2px; margin : 2px; text-align : center; font-family : Tahoma; font-size : 12px; } /* div paging untuk link */ div.paging a { padding : 2px 5px 2px 5px; margin-right : 2px; border : 1px solid #9AAFE5; text-decoration : none; color : #2E6AB1; }
Bab I. Bikin Paging lebih Bergaya
5
/* div paging ketika mouse berada diatas link */ div.paging a:hover { border : 1px solid #2B66A5; color : #000000; background-color : #FFFF80; } /* div paging untuk halaman yang aktif saat itu */ div.paging span.current { padding : 2px 5px 2px 5px; margin-right : 2px; border : 1px solid navy; font-weight : bold; background-color : #2E6AB1; color : #FFFFFF; } /* div paging untuk halaman yang tidak aktif */ div.paging span.disabled { padding : 2px 5px 2px 5px; margin-right : 2px; border : 1px solid #999999; color : #999999; } /* div paging untuk prev dan next */ div.paging span.prevnext { font-weight : bold; }
Skrip paging_01.php // Sertakan file css dengan nama standar.css
3: Hitung total data dan halaman mysql_query(”SELECT * FROM anggota”); mysql_num_rows($tampil2); ceil($jmldata/$batas);
// Panggil div paging echo ”
”; // Link ke halaman sebelumnya (previous) if($halaman > 1){ $prev=$halaman-1; echo ”<span class=prevnext> « Prev ”; } else{ echo ”<span class=disabled>« Prev ”; } // Tampilkan link halaman 1,2,3 ... for($i=1;$i<=$jmlhal;$i++) if ($i != $halaman){ echo ” $i ”; } else{ echo ” <span class=current>$i ”; } // Link ke halaman berikutnya (Next) if($halaman < $jmlhal){ $next=$halaman+1; echo ”<span class=prevnext> Next » ”; } else{ echo ”<span class=disabled>Next »”; }
Bab I. Bikin Paging lebih Bergaya
7
echo ”
”; echo ”
Total anggota : $jmldata orang
”; ?>
Untuk melihat cara penerapan style pada paging, silahkan perhatikan huruf tebal pada skrip paging_01.php, dimana style tersebut telah didefinisikan sebelumnya pada skrip standar.css. Sekarang coba jalankan skrip paging_01. php, maka hasilnya akan terlihat seperti pada gambar 1.3.
Gambar 1.3 Hasil skrip paging_01.php
Nah, sudah lebih bagus kan tampilan pagingnya. Pada trik-trik berikutnya, kita akan mencoba beberapa style/model lainnya yang tentu saja lebih apik.
Trik 4. Paging Model Flickr Website flickr.com sudah tidak asing lagi di kalangan pengguna Internet, itu lho website yang menyediakan layanan online untuk menampung foto-foto yang dapat dikelola/dikustomisasi secara personal.
8
Trik Rahasia Master PHP Terbongkar Lagi
Kalau diperhatikan dengan jeli, disitu ada bentuk paging yang cukup menarik, mari kita tiru yuk, perhatikan skrip berikut: Skrip flickr.css /* div dengan nama div.paging { padding : margin : text-align : font-family : font-size : }
paging */ 2px; 2px; center; Tahoma; 12px;
/* div paging untuk link div.paging a { padding margin-right border text-decoration color background-position }
/* div paging ketika mouse berada diatas link */ div.paging a:hover { border : 1px solid #000000; color : #0061DE; } /* div paging untuk halaman yang aktif saat itu */ div.paging span.current { padding : 2px 6px; margin-right : 2px; font-weight : bold; color : #FF0084; } /* div paging untuk halaman yang tidak aktif */ div.paging span.disabled { padding : 2px 6px; margin-right : 2px; color : #ADAAAD; font-weight : bold; } /* div paging untuk prev dan next */ div.paging span.prevnext { font-weight : bold; }
Bab I. Bikin Paging lebih Bergaya
9
/* div paging untuk link prev dan next */ div.paging span.prevnext a { border : none; } /* div paging utk link prevnext saat mouse berada diatasnya */ div.paging span.prevnext a:hover { border : 1px solid #000000; color : #0061DE; }
Untuk mencobanya, kita akan menggunakan skrip paging sebelumnya (paging_01. php) dan cukup kita ubah pada baris pertama untuk memanggil file css yang akan disertakan pada skrip php, contohnya:
Untuk berjaga-jaga, simpan aja dengan nama file baru (paging_02.php). Sekarang coba jalankan skripnya, hasilnya dapat dilihat pada gambar 1.4.
Gambar 1.4 Paging model flickr
10
Trik Rahasia Master PHP Terbongkar Lagi
Hasilnya agak sedikit beda dengan model paging sebelumnya (paging model standar), bedanya hanya pada warna dan bordernya. So, kayaknya masih kurang maknyus nih tampilan pagingnya, berikutnya kita akan coba model paging yang lebih menantang deh.
Trik 5. Paging Model Gradasi Konsep dari paging model gradasi nantinya paging tersebut akan dibingkai dalam suatu border seperti yang telah kita lakukan pada trik-trik sebelumnya, namun dalam border tersebut diberi sebuah background berupa gambar gradasi, jadi untuk membuatnya tentu saja kita memerlukan sebuah gambar gradasi. Silahkan membuat gambar gradasi dengan program pengolah grafis, bisa menggunakan Photoshop, Corel Draw atau Fireworks. Adapun gambar gradasi yang digunakan pada latihan ini berukuran 3x25 dengan gradasi dari putih ke orange (file gradasi.jpg juga dapat ditemukan di CD di folder bab 1/images). Lihat gambar 1.5.
Gambar 1.5 Contoh gambar gradasi dari putih ke orange
Bagaimana cara penggunaanya, simak skrip berikut: Skrip gradient.css /* div dengan nama div.paging { padding : margin : text-align : font-family : font-size : color : }
/* div paging ketika mouse berada diatas link */ div.paging a:hover { border : 1px solid #FF9600; color : #FF6500; background-color : #FFC794; background-image : none; } /* div paging untuk halaman yang aktif saat itu */ div.paging span.current { padding : 5px 7px; margin-right : 3px; border : 1px solid FF6500; font-weight : bold; background-color : #FFBE94; color : #FF6500; } /* div paging untuk halaman yang tidak aktif */ div.paging span.disabled { padding : 5px 7px; margin-right : 3px; border : 1px solid #FFC082; color : #FFC082; } /* div paging untuk prev dan next */ div.paging span.prevnext { font-weight : bold; }
Untuk mencobanya, kita akan menggunakan kembali skrip paging sebelumnya (paging_01.php) dan cukup kita ubah pada baris pertama untuk memanggil file css yang akan disertakan pada skrip php, contohnya:
Simpan filenya dengan nama file baru (paging_03.php). Sekarang coba jalankan skripnya, hasilnya dapat dilihat pada gambar 1.6.
12
Trik Rahasia Master PHP Terbongkar Lagi
Gambar 1.6 Paging model gradasi
Gimana tampilan pagingnya? Sudah lebih oke kan .. dengan adanya gambar gradasi akan menimbulkan efek timbul/menonjol pada tampilan paging, tapi tentu masih belum puas dong, lihat kreasi model paging lainnya yuk pada trik-trik berikutnya.
Trik 6. Paging Model Amazon Salah satu website pelopor di bidang toko online adalah amazon.com yang sangat sukses menjual barang-barangnya melalui jaringan Internet .. pasti sudah pernah mampir kesana kan .. pernah gak merhatiin model pagingnya? Menarik juga lho modelnya, so tidak ada salahnya kita contek. Sebenarnya paging model amazon hampir sama dengan paging model gradasi (Trik 5), yaitu menggunakan gambar gradasi sebagai background pagingnya, perbedaannya terletak pada penggunaan gambar gradasi tersebut, dimana gambar
Bab I. Bikin Paging lebih Bergaya
13
gradasi di amazon digunakan pada keseluruhan paging, sedangkan pada model sebelumnya gambar gradasi digunakan hanya sebatas pada background didalam bordernya .. daripada mumet mengimajinasikannya, mendingan langsung aja deh dicoba skrip berikut: Skrip amazon.css /* div dengan nama paging */ div.paging { padding : 8px; margin : 8px; text-align : center; font-family : Verdana; font-size : 12px; background-image : url(’images/grasi2.jpg’); } /* div paging untuk link */ div.paging a { padding : 2px 6px; margin-right : 2px; border : 1px dashed #BF6000; text-decoration : none; color : #003399; } /* div paging ketika mouse berada diatas link */ div.paging a:hover { border : 1px solid #9DCDE7; color : #003399; background-color : #FFFFFF; } /* div paging untuk halaman yang aktif saat itu */ div.paging span.current { padding : 2px 6px; margin-right : 2px; font-weight : bold; color : #000000; } /* div paging untuk halaman yang tidak aktif */ div.paging span.disabled { padding : 2px 6px; margin-right : 2px; color : #999999; }
14
Trik Rahasia Master PHP Terbongkar Lagi
/* div paging untuk prev dan next */ div.paging span.prevnext { font-weight : bold; }
O iya, jangan lupa untuk membuat gambar gradasi terlebih dahulu atau temukan filenya di CD yang disertakan, yaitu grasi.jpg (gambar gradasi dari putih ke biru laut). Oke, langsung aja jalankan skripnya (paging_06.php), hasilnya dapat dilihat pada gambar 1.7.
Gambar 1.7 Paging model amazon
Trik 7. Paging Model Background Dua Gambar Apabila pada dua trik sebelumnya model paging hanya dihiasi sebuah background, maka pada trik kali ini, kita akan coba menggunakan dua gambar sebagai backgroundnya dan tentu saja kita memerlukan dua buah gambar juga, contoh gambar yang digunakan dapat dilihat pada gambar 1.8.
Bab I. Bikin Paging lebih Bergaya
15
Gambar 1.8 Dua buah gambar gradasi
Pada gambar 1.8 terlihat ada dua buah gambar yang telah dipersiapkan, yaitu bar1.gif yang berwarna gradasi dari coklat ke hitam dan bar2.gif yang berwarna gradasi dari hitam ke coklat (invert: kebalikan dari bar1.gif). Diharapkan dengan kedua gambar gradasi yang berbeda tersebut ada efek timbul pada tampilan paging dan efek seperti tombol ditekan pada saat mouse berada diatas paging. Untuk lebih jelasnya, perhatikan skrip berikut: Skrip black.css /* div dengan nama paging */ div.paging { padding : 8px; margin : 8px; text-align : center; font-family : Tahoma; font-size : 12px; color : #A0A0A0; background-color : #000000; } /* div paging untuk link div.paging a { padding margin-right border text-decoration color background-image background-position }
/* div paging ketika mouse berada diatas link */ div.paging a:hover { border : 1px solid #F0F0F0; color : #FFFFFF; background-image : url(’images/bar2.gif’); background-color : #404040; } /* div paging untuk halaman yang aktif saat itu */ div.paging span.current { padding : 2px 5px;
16
Trik Rahasia Master PHP Terbongkar Lagi
margin-right : 3px; font-weight : bold; color : #FFFFFF; background-color : #606060; } /* div paging untuk halaman yang tidak aktif */ div.paging span.disabled { padding : 2px 5px; margin-right : 3px; border : 1px solid #606060; color : #808080; } /* div paging untuk prev dan next */ div.paging span.prevnext { font-weight : bold; }
Sekarang coba jalankan skripnya (paging_04.php), maka hasilnya dapat dilihat pada gambar 1.9.
Gambar 1.9 Paging model dua gambar gradasi (black)
Bab I. Bikin Paging lebih Bergaya
17
Wow .. cool kan tampilan pagingnya .. adapun variasi lainnya dari penerapan paging model background dua gambar dapat Anda temukan di CD (paging_05. php dan greenblack.css). Hasilnya dapat dilihat pada gambar 1.10.
Gambar 1.10 Paging model green black
Trik 8. Paging Model Sudut Tumpul Dan terakhir, sebagai penutup, penulis akan sajikan sebuah model lagi untuk tampilan paging yang cantik, yaitu paging model sudut tumpul, namun sebelumnya kita harus mempersiapkan terlebih dahulu beberapa gambar objek sudut tumpul yang diolah menggunakan program grafis. Untuk keperluan trik ini, kita memerlukan tiga buah gambar objek sudut tumpul, contohnya dapat dilihat pada gambar 1.11.
Gambar 1.11 Tiga buah gambar sudut tumpul
Oke, langsung aja kita terapkan dalam wujud skrip berikut: Skrip roundcorner.css /* div dengan nama div.paging { padding : margin : text-align : font-family : font-size : }
paging */ 3px; 3px; center; Tahoma; 12px;
/* div paging untuk link */ div.paging a { padding : 3px 6px;
18
Trik Rahasia Master PHP Terbongkar Lagi
}
margin-right text-decoration color background-image background-repeat background-position font-weight
/* div paging ketika mouse berada diatas link */ div.paging a:hover { text-decoration : underline; } /* div paging untuk halaman yang aktif saat itu */ div.paging span.current { padding : 3px 6px; margin-right : 3px; font-weight : bold; color : #000000; background-image : url(’images/tumpul2.gif’); background-repeat : no-repeat; background-position : bottom; } /* div paging untuk halaman yang tidak aktif */ div.paging span.disabled { padding : 3px 6px; margin-right : 3px; color : #CCCCCC; } /* div paging untuk prev dan next */ div.paging span.prevnext { font-weight : bold; } /* div paging untuk link div.paging span.prevnext background-image background-repeat background-position }
prev dan next */ a { : url(’images/tumpul3.jpg’); : no-repeat; : bottom;
Sekarang coba jalankan skripnya (paging_07.php), maka hasilnya dapat dilihat pada gambar 1.12.
Bab I. Bikin Paging lebih Bergaya
19
Gambar 1.12 Paging model sudut tumpul
Dengan teknik yang sama, tentu saja Anda bisa membuat bentuk-bentuk lainnya untuk tampilan pagingnya, contohnya seperti paging berbentuk bulat ala website Apple. Lihat gambar 1.13.
Gambar 1.13 Paging model apple
20
Trik Rahasia Master PHP Terbongkar Lagi
Kesimpulan: • Ternyata, bikin paging tampil lebih cantik cukup menggunakan CSS. Dengan memahami CSS, tentu Anda akan dapat membuat kreasi paging yang lebih apik lagi. • Kalau paging memang bisa ditampilkan dengan lebih cantik, mengapa hanya ditampilkan biasa-biasa saja? Apalagi tidak terlalu membebani server, jadi tidak mempengaruhi kecepatan akses website. • Pada Trik 8, kita menggunakan objek sudut tumpul sebagai background. Apabila paging masih satu digit (1) atau dua digit (10) masih tidak terlalu masalah, tapi kalau sudah tiga digit (100) atau empat digit (1000), maka angka pagingnya akan keluar dari area objek sudut tumpul, begitu juga dengan objek yang berbentuk bulat.
