Cara menggunakan pythonattrnoneifunset

You're Reading a Free Preview
Pages 8 to 21 are not shown in this preview.

You're Reading a Free Preview
Pages 26 to 31 are not shown in this preview.

You're Reading a Free Preview
Pages 36 to 51 are not shown in this preview.

You're Reading a Free Preview
Pages 57 to 58 are not shown in this preview.

You're Reading a Free Preview
Pages 65 to 70 are not shown in this preview.

You're Reading a Free Preview
Pages 74 to 77 are not shown in this preview.

You're Reading a Free Preview
Pages 84 to 91 are not shown in this preview.

You're Reading a Free Preview
Pages 95 to 98 are not shown in this preview.

You're Reading a Free Preview
Pages 105 to 112 are not shown in this preview.

You're Reading a Free Preview
Pages 116 to 123 are not shown in this preview.

You're Reading a Free Preview
Pages 131 to 135 are not shown in this preview.

Table of Contents

• Tujuan atau Rancangan Akhir Program
• 1. Siapkan Database dan Tabel
• 2. Buat Halaman beserta Form Inputan
• 3. Koneksikan ke Database MySQL
• 4. Program Input ke MySQL
• 5. Sertakan Library JQuery dan Plugin JQuery Form
• 6. Validasi dengan plugin JQuery Validation
• 6. Tampilkan Data dalam Bentuk Tabel dengan Flexigrid
• 7. Tampilkan Data di Form saat Baris Fexigrid Dipilih
• 8. Proses Edit dan Delete
• 9. Program Lengkap Ada di sini!
• Demo dan Download

Dalam setiap kesempatan membahas mengenai aplikasi berbasis web [web application], baik di dalam sesi mengajar matakuliah Pemrograman Web di Universitas Budi Luhur maupun sesi training terkait web, saya selalu menekankan bahwa hanya ada 4 [empat] proses dasar dalam aplikasi berbasis web. Aplikasi web yang sederhana hingga kompleks selalu berkaitan dengannya. Keempat proses tersebut adalah proses entri [input], ubah [edit], hapus [delete] dan tampil [show]. Istilah lain dari keempat proses tersebut adalah CRUD [Create, Read, Update and Delete]. Jadi kuasailah keempatnya maka selebihnya hanya variasi dari keempat proses tersebut. Sebagai contoh dalam proses update status di situs jejaring sosial facebook merupakan proses Entri atau Insert ke database, saat memperbaiki foto profil adalah proses edit [update] dan saat kita menghapus salah satu teman aalah proses delete.

Mengingat pentingnya proses tersebut, saya memberikan contoh khusus di bab terakhir dari buku Pemrograman Web dengan PHP & MySQL berupa proses dasar entri, edit, delete dan tampil dengan PHP dan MySQL. Sebelum melanjutkan tutorial ini, tidak ada salahnya jika Anda mencoba contoh tersebut, terutama bagi Anda yang belum pernah mencoba program serupa. Saya juga pernah mempublikasikan artikel entri, edit, delete dan tampil PHP yang memanfaatkan Macromedia Dreamweaver.

Lalu apa yang akan dipelajari di dalam tutorial ini?

Apa yang disampaikan dalam tutorial ini kurang lebih sama dengan tutorial saya sebelumnya, yaitu proses entri, edit, delete dan tampil data dengan PHP dan MySQL. Namun kali ini, saya ingin menambahkan konsep Ajax [Asyncronous Javascript and XML] dengan menggunakan library JQuery. Dengan konsep Ajax, maka proses entri, edit, delete dan tampil dapat dilakukan dengan lebih menarik.

Tujuan atau Rancangan Akhir Program

Untuk memberikan gambaran yang lebih jelas mengenai hasil akhir contoh program yang dibahas dalam tutorial ini, berikut beberapa hal penting:

• Untuk memudahkan pemahaman, program hanya menangani 1 [satu] tabel MySQL yaitu tabel “mahasiswa” yang terdiri dari field NIM, NAMA dan ALAMAT.
• Program hanya terdiri dari 1 [satu] file utama [tidak termasuk library yang digunakan]
• Program menggunakan library Ajax JQuery.
• Untuk penanganan form, digunakan plugin JQuery Form.
• Untuk validasi form, digunakan plugin JQuery Validation.
• Untuk menampilkan data dalam bentuk tabel, digunakan plugin JQuery Flexigrid
• Proses EDIT dan DELETE dilakukan dengan memilih dan klik pada data yang akan diedit/didelete.

Untuk memberikan gambaran yang lebih jelas, silahkan lihat demo program terlebih dahulu.

Langsung aja kita mulai step by step untuk membuatnya.

1. Siapkan Database dan Tabel

Langkah pertama tentu persiapkan database dan tabel yang diperlukan. Seperti sudah disebutkan di rancangan akhir program di atas bahwa kita akan menyederhanakan struktur data yang akan dibuat. Dalam hal ini, kita akan membuat database dengan nama “demo” dan tabel dengan nama “mahasiswa”. Berikut ini struktur dari tabel mahasiswa yang akan dibuat:

Dan berikut ini perintah SQL untuk membuat database dan tabel di atas. Perintah dapat ditulis dan dijalankan di MySQLclient kesukaan Anda.

CREATE DATABASE demo;
CREATE TABLE mahasiswa [
   nim VARCHAR[10] NOT NULL,
   nama VARCHAR[30] NOT NULL,
   alamat TEXT,
PRIMARY KEY[nim]
];

2. Buat Halaman beserta Form Inputan

Bagi Anda yang sudah belajar perintah-perintah HTML [Hypertext Mark up Language] tentunya tidak akan kesulitan dalam membuat form inputan untuk tabel mahasiswa di atas. Bentuk dan tampilan dari form inputan dapat disesuaikan sesuai keinginan Anda, namun yang penting untuk diperhatikan bahwa pastikan setiap inputan harus memiliki atribut name dan id agar dapat diakses dengan mudah melalui JQuery nantinya. Berikut ini source code HTML awal yang menampilkan form inputan data mahasiswa. Simpan program berikut ini sebagai file “index.php”.

Entri, Edit, Delete, Tampil Data dengan PHP dan Ajax 
 
		.labelfrm { 
			display:block; 
			font-size:small; 
			margin-top:5px; 
		} 
		.error { 
			font-size:small; 
			color:red; 
		} 
Data Mahasiswa 
 
NIM:  
 		 
NAMA:  
 
ALAMAT:  
 
  
 
 
 
 

Pada program di atas terlihat bahwa terdapat satu buah form dengan id frm, yang memiliki 3 [tiga] buah inputan text dan textarea serta 4 [empat] buah tombol yaitu Input, Edit, Delete dan Clear. Masing-masing inputan diberi nama dan ID. Untuk inputan NIM, NAMA dan ALAMAT juga ditambahkan atribut class dengan value “required” yang berarti inputan harus diisi [menggunakan plugin JQuery Validate].

Berikut ini tampilan dari program sederhana di atas.

Gambar 1: Tampilan Form Inputan Data Mahasiswa

3. Koneksikan ke Database MySQL

Karena program dirancang untuk berhubungan dengan database MySQL, maka terlebih dahulu harus dikoneksikan antara PHP dengan MySQL. Untuk melakukan koneksi ke MySQL, dalam tutorial ini dicontohkan dengan cara yang paling mudah. Kita akan menggunakan fungsi mysql_connect[] dan mysql_select_db[] dari PHP. Pastikan Anda mengetahui informasi letak hostname, username, password untuk masuk ke server MySQL dan juga nama database yang akan digunakan sudah disiapkan.

Berikut ini potongan program untuk melakukan koneksi. Letakkan di awal file index.phpyang telah dibuat di langkah sebelumnya atau dapat juga dibuat di file khusus dan di-include-kan.

4. Program Input ke MySQL

Setelah program PHP terkoneksi dengan MySQL, selanjutnya dibuat program untuk proses input [insert] ke database. Secara umum, untuk membuat program input ke database, kita ambil dulu data yang dientri oleh user sesuai dengan method dari form. Untuk me-refresh kembali mengenai penanganan form di PHP, Anda dapat mempelajari Bab 4 dari buku Pemrograman Web dengan PHP & MySQLyang dapat didownload di website saya. Setelah data dari form diambil, susun string perintah query untuk INSERT ke database. Bagaimana bentuk perintah INSERT dan contoh penggunaannya juga dapat dipelajari di buku saya tersebut, terutama di Bab 12 dan 13. Kurang lebih berikut ini, potongan program untuk input / entri ke MySQL. Anda dapat meletakkannya setelah baris perintah koneksi database.

/* penanganan form */
if [isset[$_POST['Input']]] {
//input ke db
$query = sprintf["INSERT INTO mahasiswa VALUES['%s', '%s', '%s']", 
];
if [$sql] {
echo "Data berhasil disimpan";
} else {
echo "Data gagal disimpan ";
}
}

Berikut ini sedikit penjelasan dari potongan program diatas:

• Baris 2: memastikan tombol “Input” ditekan oleh user menggunakan fungsi isset[] yang akan bernilai TRUE jika suatu variabel telah terbentuk [jika user menekan suatu tombol maka variabel akan terbentuk]
• Baris 3-5: proses pengambilan data dari form. Fungsi strip_tags[] digunakan untuk memastikan bahwa inputan tidak mengandung tag-tag HTML atau javascript yang mungkin “berbahaya”.
• Baris 8-12: pembentukan perintah untuk INSERT ke database. Fungsi mysql_escape_string[] digunakan untuk menambahkan escape [backslashes, \ ] jika terdapat karakter khusus seperti tanda kutip dan dollar. Hal tersebut dilakukan sebagai salah satu cara mencegah praktek SQL Injection.
• Baris 13: eksekusi perintah MySQL untuk mengentri data ke database menggunakan fungsi mysql_query[].
• Baris 14-19: notifikasi apakah proses berhasil atau gagal.

Pada tahap ini, sebaiknya Anda coba program dengan menginput suatu data melalui form. Pastikan tidak ada error dan data sudah masuk ke database [untuk melihat data, langsung gunakan tools MySQL yang Anda punya].

5. Sertakan Library JQuery dan Plugin JQuery Form

Hingga langkah ke-4 di atas, kita masih belum menggunakan konsep Ajax [Asynchronous Javascript and XML]. Apa itu Ajax? Secara singkat, ajax merupakan konsep pengembangan web yang memungkinkan antara client dan server dapat berkomunikasi secara asynchronous, suatu proses bisa saja berjalan di belakang halaman. Contoh penerapannya saya rasa dengan mudah kita temui di banyak web, seperti pada situs Facebook, saat kita meng-update status, hanya bagian status aja yang berubah sedangkan keseluruhan halaman tidak berubah [refresh]. Lebih lengkap mengenai Ajax, dapat Anda cari artikelnya di Google. Pada tutorial ini, digunakan library utama JQuery yang dapat didownload di situs //code.jquery.com. Sedangkan untuk penanganan form dengan teknologi Ajax, digunakan plugin JQuery Form yang dapat didownload di situs //malsup.com/jquery/form/. Dengan plugin ini, kita dapat mengubah proses penanganan form secara klasik seperti pada langkah ke-4 di atas, menjadi proses penanganan form dengan “gaya” Ajax. Saya memilih plugin ini dengan alasan kemudahan dalam penerapannya.

Untuk menyertakan library JQuery dan JQuery Form ke dalam halaman yang sudah kita buat sebelumnya, tambahkan dua baris perintah berikut ini di antara tag [diasumsikan bahwa kedua plugin tersimpan di folder /libs].

Dan setelah library disertakan, kita dapat memanggil plugin JQuery Form untuk mengaktifkan proses Ajax di dalam form. Pemanggilannya sangat mudah, cukup atur opsi / pilihan dan aktifkan berdasarkan selector dari form yang akan dipanggil.

Berikut ini program lengkap yang sudah ditambahkan pemanggilan plugin JQuery Form.