Trik dan Solusi Jitu Pemrograman Web - tokolokomedia.com · hal itu banyak memberikan pelajaran...

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).

Tr i k d a n S o l u s i J i t u

Pemrograman Web

SANDI HARIADI

www.bukulokomedia.com

TRIK DAN SOLUSI JITU PEMROGRAMAN WEBPerpustakaan Nasional : Katalog Dalam Terbitan (KDT)Penulis : Sandi HariadiTRIK DAN SOLUSI JITU PEMROGRAMAN WEB- Cet. I. - Yogyakarta : Penerbit Lokomedia, 2010 151 hlm; 14 x 21 cm ISBN : 978-979-1758-71-0

Penerbit Lokomedia, Cetakan Pertama : Desember 2010

Editor : Lukmanul HakimCover : Subkhan AnshoriLayout : Lukmanul Hakim

Diterbitkan pertama kali oleh :Penerbit LokomediaJl. Jambon, Perum. Pesona Alam Hijau 2 Kav. B-4, Kricak Yogyakarta 55242.

email : [email protected] : www.bukulokomedia.com

Copyright © Lokomedia, 2010

Hak Cipta dilindungi oleh Undang-Undang

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

v

Kata Pengantar

Buku ini pada awalnya hanya merupakan “dokumentasi” pribadi saya dalam men-develop suatu program web base, yang ketika program tersebut telah menjadi sangat rumit, membuat kita yang men-devopnya pun menjadi kebingungan. Belum lagi jika program tersebut dibuat oleh suatu team yang mempunyai logika yang berbeda-beda dalam mendevelop suatu progam. Untuk mengatasinya, saya secara pribadi kemudian men-dokumentasikan trik-trik saya agar mudah ditelusuri dan di-ingat kembali.

Ketika dokumentasi tersebut telah mempunyai berbagai judul dan bahasan, saya ber-inisiatif men-jilidnya menjadi suatu buku yang utuh. Pada tahap ini lah saya berfikir untuk meng-komersial-kan karya saya tersebut, Sehingga selain mempunyai dokumentasi pribadi, saya juga bisa mendapat royalti dari hasil karya saya. Tentu saja buku ini bukalah yang pertama bagi saya, karena sewaktu kuliah saya juga pernah membuat suatu karya yang boleh dibilang gagal di pasaran, dan hal itu banyak memberikan pelajaran bagi saya dalam merancang suatu buku.

Tanpa bermaksud menghakimi, saya pribadi merasa bahwa ada banyak buku web base yang beredar di pasaran kurang menyentuh pada permasalah-an yang mendasar, sehingga cenderung berputar-putar dalam lingkaran teknik yang monoton. Saya juga berharap bisa menularkan ide-ide saya dalam men-develop web base, dan ikut memberikan inspirasi untuk mencari jalan keluar bersama.

Sampai buku ini selesai dibuat, saya memang sangat mengandalkan Mozila Firefox untuk standard browser dikarenakan saya merasa hanya Firefox lah yang paling support untuk diolah dibanding Browser yang lain, meskipun dari segi tampilan masih di-rajai oleh Internet Explorer.

Saya berharap ini bukanlah karya ter-akhir saya, & segala bentuk masukan, pertanya’an, ataupun koreksi dapat menemui saya di Forum kafegaul, dengan alamat spesifik,

http://forum.kafegaul.com/forumdisplay.php? f=68

nick name : iskra ( jika belum mendapat balasan, berikan saja “Personal Message”) dan akan saya buat kan thread nya jika memang banyak yang membutuhkan ber-interaksi dengan saya.

Terima kasih

vi

Halaman ini Sengaja Dikosongkan

vii

Daftar Isi

BAB 1. Parameter dalam Aplikasi Web .........................................................1

1.1. Metode POST ..............................................................................................2

1.2. Metode GET .................................................................................................4

1.3. Metode GET dengan Javascript...................................................................5

1.4. Menangani Dua Parameter atau Lebih ........................................................7

BAB 2. Manipulasi Elemen HTML dengan DOM .....................................11

2.1. Metode DOM .............................................................................................12

2.2. Implementasi DOM ...................................................................................12

2.3. ID yang Dinamis (Dynamic Identity) .......................................................14

2.4. Manipulasi Elemen <BODY> ...................................................................16

BAB 3. Membuat Menu yang Funky ...........................................................19

3.1. Persiapan ....................................................................................................20

3.2. Desain Tabel untuk Background ...............................................................20

3.3. Membuat Sudut Tumpul Sisi Menu ..........................................................21

3.4. Membuat Menu Data-Data ........................................................................22

3.5. Membuat Anchor pada Menu ....................................................................23

3.6. Menyisipkan Icon pada Menu ...................................................................24

3.7. Membuat Sub-menu untuk Menu Data-Data ............................................26

3.8. Menyembunyikan Sub-menu dengan Visibility .......................................31

3.9. Membuat Anchor pada Sub-menu .............................................................32

3.10. Membuat Sub-menu untuk Menu Device ...............................................34

3.11. Membuat Area Content dengan Elemen IFRAME .................................36

viii

BAB 4. Menampilkan Pesan dalam Pop-Up ...............................................41

4.1. Persiapan ....................................................................................................42

4.2. Membuat Bentuk Box ................................................................................42

4.3. Membuat Heading untuk Box ...................................................................44

4.4. Membuat Simbol pada Box .......................................................................45

4.5. Membuat Title pada Box ...........................................................................46

4.6. Membuat Tombol Close, Minimize, dan Maximize .................................48

4.7. Membuat Tombol Trigger ..........................................................................50

4.8. Menampilkan Content didalam Box .........................................................51

BAB 5. Tabel Cantik dengan Auto Scroll .....................................................55

5.1. Persiapan ....................................................................................................56

5.2. Menampilkan Data dari Database .............................................................57

5.3. Memisahkan Tabel .....................................................................................59

5.4. Mewarnai Tabel Secara Selang-Seling ......................................................61

5.5. Efek Hover pada Tabel ...............................................................................62

5.6. Membuat Auto Scroll pada Tabel ..............................................................64

5.7. Background Gambar pada Tabel ...............................................................65

5.8. Menambahkan Bar pada Tabel ..................................................................67

5.9. Membuat Sudut Tumpul pada Tabel .........................................................69

BAB 6. Mencetak Data di Browser ...............................................................71

6.1. Persiapan ....................................................................................................72

6.2. Menampilkan Data dari Database .............................................................73

6.3. Menduplikasi File ......................................................................................75

6.4. Tombol Print ...............................................................................................75

6.5. Proses Cetak ...............................................................................................77

ix

BAB 7. Mengolah Data XML ........................................................................81

7.1. Persiapan ....................................................................................................82

7.2. XML dan Javascript ...................................................................................83

7.3. XML dan PHP ............................................................................................85

7.4. Export MySQL Menjadi XML ..................................................................86

BAB 8. AJAX (Asyncronous Javascript And XML) ..................................89

7.1. Persiapan ....................................................................................................91

7.2. Implementasi (ajax1.php) ..........................................................................91

7.3. Implementasi (ajax2.php) ..........................................................................93

BAB 9. Quick Edit (Edit in Place).................................................................95

9.1. Interface (Antarmuka) ................................................................................96

9.1.1. Persiapan ..........................................................................................96

9.1.2. Menampilkan Data dari Database ...................................................97

9.1.3. Elemen Input ....................................................................................99

9.1.4. Membuat Anchor/Link ..................................................................101

9.1.5. Event OnDblClick ..........................................................................103

9.1.6. Event Hidden OnBlur ....................................................................104

9.1.7. Event OnKeyUp .............................................................................106

9.2. Injeksi .......................................................................................................108

9.2.1. Parameters ......................................................................................108

9.2.2. XML HTTP Request ...................................................................... 111

BAB 10. Manajemen Session .......................................................................117

10.1. Persiapan ................................................................................................118

10.2. Implementasi Session ............................................................................118

10.3. Manajemen User ....................................................................................122

10.3.1. Tampil User ..................................................................................123

10.3.2. Tambah User ................................................................................125

10.3.3. Edit User .......................................................................................128

10.3.4. Update ..........................................................................................131

BAB 11. Teknik Membuat Themes .............................................................135

11.1. Persiapan Folder dan Database ..............................................................136

11.2. Implementasi Themes ............................................................................139

11.3. Mengontrol CSS dengan PHP ...............................................................144

11.4. Menu Control Panel ...............................................................................147

Daftar Pustaka ...............................................................................................153

BAB I

Parameter dalam Aplikasi Web

2 Trik dan Solusi Jitu Pemrograman Web

Bab 1

Parameter dalam Aplikasi Web

Dalam software apapun, selalu terdapat teknik untuk mengirimkan parameter dan menerimanya agar dapat di-olah lebih lanjut. Pada bab ini, berbagai bentuk parameter yang berkaitan dengan PHP akan kita ulas lebih dalam.

Sebelum memulai, buat dulu folder parameter di localhost Anda, yaitu didalam folder www atau htdocs (tergantung instalasi yang terdapat di komputer Anda). Folder parameter berfungsi sebagai tempat penyimpanan file-file latihan yang akan kita buat pada bab ini.

1.1 Metode POSTLangkah 1 :

Buat file dengan nama form_input.php yang isi scriptnya sebagai berikut :<html> <head></head> <body> <form method=”POST” action=”form_penerima.php”> <input type=”text” name=”input1” /></br> <input type=”text” name=”input2” /></br> <input type=”text” name=”input3” /></br> <input type=”submit” value=”submit” /> </form> </body> </html>

Langkah 2 :

Buat file dengan nama form_penerima.php yang isi scriptnya sebagai berikut :<html> <head></head> <body> <h3> Parameter dari form input </h3> <?php echo “<label for=\”input1\”>input 1</label> : $_POST[input1]</br> <label for=\”input2\”>input 2<label/> : $_POST[input2]</br>

3Bab I. Parameter dalam Aplikasi Web

<label for=\”input3\”>input 3<label/> : $_POST[input3]</br> “; ?> </body> </html>

Sekarang buka browser, ketikkan http://localhost/parameter/form_input.php, maka akan tampil form dengan 3 buah input, coba isikan pada masing-masing input seperti pada gambar 1.1.

Gambar 1.1 Hasil script form_input.php

Setelah itu, klik tombol submit, maka script form_penerima.php akan menangkap input dari script form_input.php. Lihat gambar 1.2.

Gambar 1.2 Hasil script form_penerima.php


Penjelasan :

Metode POST bekerja dengan melampirkan parameter, untuk kemudian ditangkap dengan script $_POST[‘ ... ‘];

Untuk pembuatan aplikasi, metode POST sangat disarankan bagi aplikasi multi user yang biasanya menggunakan login, karena metode POST tidak dapat dibobol secara manual melalui path URL -nya.

Akan tetapi, metode POST membutuhkan konsentrasi yang tinggi, dikarenakan bentuk parameter yang terkirim tidak terlihat.

1.2 Metode GETWARNING : Kita akan meng-edit dua file yang telah kita buat sebelumnya, yaitu form_input.php dan form_penerima.php

Langkah 1 :

Meng-edit file form_input.php dengan mengganti form method menjadi GET :<html> <head></head> <body>

<form method=”GET” action=”form_penerima.php”> <input type=”text” name=”input1” /></br> <input type=”text” name=”input2” /></br> <input type=”text” name=”input3” /></br> <input type=”submit” value=”submit” /> </form> </body> </html>

Langkah 2 :

Meng-edit file form_penerima.php dengan mengganti $_POST menjadi $_GET :

<html> <head></head> <body> <h3> Parameter dari form input </h3> <?php echo “

<label for=\”input1\”>input 1</label> : $_GET[input1] </br> <label for=\”input2\”>input 2<label/> : $_GET[input2] </br> <label for=\”input3\”>input 3<label/> : $_GET[input3] </br>


“; ?> </body> </html>

Simpan kedua file tersebut (form_input.php dan form_penerima.php). Kemudian jalankan lagi di browser: http://localhost/parameter/form_input.php, maka tampilannya tetap sama seperti pada gambar 1.1. Isikan juga data yang sama pada ketiga buah form input, lalu klik tombol submit, maka hasilnya pun sama dengan gambar 1.2.

Perbedaan yang paling mencolok adalah bentuk alamat url yang kini dilengkapi dengan banyak parameter. Lihat gambar 1.3.

Gambar 1.3 Url dari form_penerima.php (hasil metode GET)

Penjelasan :

Metode GET bekerja dengan melampirkan parameter pada alamat url, untuk kemudian ditangkap dengan script $_GET[‘ ... ‘];

Untuk pembuatan aplikasi, metode GET sangat tidak disarankan bagi aplikasi multi user yang biasanya menggunakan login, karena metode ini dapat dibobol secara manual melalui path URL-nya.

Akan tetapi, metode GET biasanya digunakan untuk aplikasi pencarian atau bisa juga dikembangkan lebih jauh dengan dikirimkan melalui javascript yang sangat berguna untuk Bookmark.

1.3 Metode GET dengan JavascriptLangkah 1 :

Buat file dengan nama window1.php yang isi scriptnya sebagai berikut :<html> <head> <script type=”text/javascript”>

function coba(param1){ Mywin1 = window.open(‘window2.php?param1=’+param1,’’, ‘width=550, height=100’); }


</script> </head> <body> <h3> Tombol dibawah ini membawa parameter </h3> <h3> dengan value 69 </h3> <br /> <?php

$param1 = 69; echo ”<input type=\”button\” value=\”Tombol\”

OnClick=\”coba($param1)\” />“; ?> </body></html>

Langkah 2 :

Buat file dengan nama window2.php yang isi scriptnya sebagai berikut :<html> <head></head> <body> Parameter yang dikirimkan melalui url adalah : </br> <?php

$param11=$_GET[‘param1’]; echo ”<h2>$param11</h2>”; ?> </body></html>

Jalankan di browser, ketikkan http://localhost/parameter/window1.php, maka akan tampil halaman seperti pada gambar 1.4.

Gambar 1.4 Hasil script window1.php


Kemudian klik tombol Tombol, maka script window2.php akan menangkap parameter dari script window1.php. Lihat gambar 1.5.

Gambar 1.5 Hasil script window2.php

Penjelasan :

Perhatikan pada gambar 1.5 bahwa script window2.php menangkap parameter yang dikirimkan dari window1.php, sehingga url scriptnya menjadi window2.php?param1=69 yang merupakan kiriman dari script window1.php, tepatnya pada bagian:

Mywin1 = window.open(‘window2.php?param1=’+param1,’’,‘width=550, height=100’);

1.4 Menangani Dua Parameter atau LebihWARNING : Kita akan meng-edit dua file yang telah kita buat sebelumnya, yaitu window1.php dan window2.php

Langkah 1 :

Meng-edit file window1.php dengan menambahkan beberapa script berikut :<html> <head> <script type=”text/javascript”>

function coba(param1, param2) { Mywin1 = window.open(‘window2.php?param1=’+param1+

‘&param2=’+param2,’’,’width=550, height=100’); }


</script> </head> <body> <h3> Tombol dibawah ini membawa parameter </h3> <h3> dengan value 69</h3> <br /> <?php $param1 = 69;

$param2 = 88; echo ”<input type=\”button\” value=\”Tombol\”

OnClick=\”coba($param1, $param2)\” />“; ?> </body> </html>

Langkah 2 :

Meng-edit file window2.php dengan menambahkan beberapa script berikut :<html> <head></head> <body> Parameter yang dikirimkan melalui url adalah : </br> <?php $param11=$_GET[‘param1’];

$param22=$_GET[‘param1’]; echo”<h2>$param11</h2>

<h2>$param22</h2>”; ?> </body> </html>

Jalankan di browser, ketikkan http://localhost/parameter/window1.php, maka akan tampil halaman yang sama seperti pada gambar 1.4. Akan tetapi, ketika di-klik tombol Tombol, maka hasil pada script window2.php terlihat berbeda url-nya yang menangkap dua parameter, yaitu param1 dan param2. Lihat gambar 1.6.


Gambar 1.6 Dua parameter pada url window2.php

Teknik parameter sangat sering digunakan dalam pemrograman PHP.

Halaman ini Sengaja Dikosongkan

Trik dan Solusi Jitu Pemrograman Web - tokolokomedia.com · hal itu banyak memberikan pelajaran...

Documents

Transcript of Trik dan Solusi Jitu Pemrograman Web - tokolokomedia.com · hal itu banyak memberikan pelajaran...