1. Pendahuluan
Saat ini cukup banyak aplikasi web seperti Backpack, Blinksale dan Gmail yang mengintegrasikan teknologi database dengan AJAX. Integrasi ini berdampak besar pada aplikasi web dan pengalaman pengguna dengan menyediakan teknologi canggih untuk berkomunikasi dengan database tanpa menyegarkan browser - artinya data dapat ditransfer secara real time sementara pengguna melanjutkan interaksi lainnya.
Artikel ini akan fokus pada mekanisme integrasi teknologi di atas. Kode sumber referensi lengkap juga disediakan. Contoh ini adalah aplikasi pencatatan pekerjaan sederhana di mana setiap jabatan berisi judul, deskripsi, dan tanggal - memungkinkan pengguna untuk menambah, mengedit, dan menghapus jabatan. Semua ini adalah operasi dasar yang Anda lakukan saat bekerja dengan data rekaman database, namun aplikasi ini melangkah lebih jauh. Jabatan pekerjaan dapat diubah menjadi bentuk yang dapat diedit - jabatan tersebut akan disimpan atau dihapus dari database dan ditampilkan dalam keadaan barunya tanpa menyegarkan browser dan mengganggu operasi pengguna.
Pada artikel ini, saya berasumsi bahwa Anda memiliki pemahaman dasar tentang AJAX, MySQL, dan PHP, atau bahasa sisi server serupa. Jika Anda belum membuat objek Permintaan HTTP XML, Anda dapat merujuk ke artikel saya "Cara menggunakan AJAX" terlebih dahulu. Selanjutnya mari kita bahas dulu masalah databasenya.
2. Membuat Database
Hal pertama yang perlu Anda lakukan adalah membuat tabel database untuk menyimpan data untuk posisi tersebut. Saya membuat tabel MySQL bernama informit_ajax - memiliki bidang ID, judul, deskripsi, dan tanggal - ini semua adalah variabel yang akan muncul berulang kali di artikel ini. Berikut kode untuk membuat tabelnya:
CREATE TABLE ′informit_ajax′ (
′id′ int(11) BUKAN NULL kenaikan_otomatis,
'tanggal' waktu waktu BUKAN NULL default '0000-00-00 00:00:00',
'deskripsi' teks panjang BUKAN NULL,
′title′ varchar(100) BUKAN NULL default'',
KUNCI UTAMA (′id′)
) TYPE=MyISAM;
Anda dapat mengeksekusi kode ini menggunakan alat kueri MySQL atau bahasa apa pun yang digunakan untuk mengembangkan aplikasi. Setelah database disiapkan, langkah selanjutnya adalah membuat file front-end yang melakukan permintaan ke backend PHP.
3. Buat permintaan
File HTML indeks di sini adalah pengganti data sederhana - file tersebut akan dianalisis dari database. File ini berisi referensi ke file JavaScript dan CSS; file ini juga berisi pengendali onload yang membuat permintaan pertama dan tiga tag div:
Layout - digunakan untuk memusatkan pemuatan konten halaman
- memuat pesan selama pemuatan data yang diminta, yang akan diterima oleh file Objek HTTPRequest
· posting digunakan untuk menampilkan setiap data pekerjaan yang dianalisis
<head>
＜title＞Cara Mengintegrasikan Database dengan AJAX＜/title＞
＜link href="css/layout.css" rel="stylesheet" type="text/css" /＞
＜skrip src="js/request.js"＞＜/script＞
＜skrip src="js/post.js"＞＜/skrip＞
＜/kepala＞
<body onload="javascript:makeRequest('services/post.php?method=get');">
<div id="tata letak" align="tengah">
＜div id="postingan"＞＜/div＞
＜p＞＜input type="button" value="tambahkan kiriman" onmousedown="javascript:makeRequest('services/post.php?method=save');" /＞＜/p＞
＜p＞＜div id="memuat"＞＜/div＞＜/p＞
＜/div＞
＜/body＞
Permintaan pertama dihasilkan saat halaman dimuat. Permintaan ini mengirimkan permintaan get ke kelas PHP yang akan kita buat nanti; tetapi pertama-tama kita perlu membuat metode analisis untuk respons permintaan tersebut. File permintaan JavaScript menangani semua pekerjaan dasar, seperti membuat objek, mengirim permintaan, dan memeriksa status kesiapan. Ketika respons diterima dari objek Permintaan, saya menggunakan file pekerjaan JavaScript ini untuk menangani pembuatan HTML dari pekerjaan ini. Metode onResponse cukup ampuh karena menangani pembuatan halaman HTML untuk setiap jabatan dalam versi teks dan formulir, dan menempatkannya ke dalam tag div khusus mereka sendiri; dengan cara ini kita dapat dengan mudah menghasilkannya selama interaksi pengguna. Dengan cara ini kita dapat beralih antara versi teks dan bentuk setiap postingan - ini dapat dilakukan dengan mengklik link "edit postingan ini". Berikut ini adalah kode halaman HTML yang dibuat untuk setiap posisi, Anda dapat melihat penerapan metode selengkapnya di file sumber unduhan terkait artikel ini.
var html = "<div class='post' id='post_"+ i +"' "+ postDisplay +">"
+ "＜div class='judul' id='judul_"+ i +"'＞"+ _judul +"＜/div＞"
+ "＜div class='deskripsi' id='deskripsi_"+ i +"'＞"+ _deskripsi +"＜/div＞"
+ "＜div class='tanggal' id='tanggal_"+ i +"'＞"+ _tanggal +"＜/div＞"
+ "＜a href="javascript:toggle('"+ i +"');"＞edit postingan ini＜/a＞＜br/＞"
+ "＜/div＞"
+ "<div class='post' id='formPost_"+ i +"' "+ formPostDisplay +"＞"
+ "＜div class='title'＞＜tipe masukan='teks' nama='judul' id='formTitle_"+ i +"' size='60' value='"+ _title +"'＞＜/div ＞"
+ "＜div class='description'＞＜textarea type='text' id='formDescription_"+ i +"' wrap='virtual' cols='60' row='15'＞"+ _description +"＜/ area teks＞＜/div＞"
+ "＜kelas div='tanggal'＞"+ _tanggal +"＜/div＞"
+ "＜input type='button' name='cancel' value='cancel' onclick="javascript:toggle('"+ i +"');"＞"
+ "＜input type='button' name='delete' value='hapus postingan ini' onclick="javascript:deletePost("+ _id +");"＞"
+ "<input type='button' name='submit' value='simpan postingan ini' onclick="javascript:saveNewPost("+ _id +","+ i +");">"
+ "＜/div＞"
+ "＜p＞"nbsp;＜/p＞";
Versi teks dari setiap postingan hanya menampilkan judul, deskripsi dan tanggal serta tautan "edit postingan ini". Versi formulir setiap postingan memiliki tiga tombol:
·"batal Tombol " - cukup mengalihkan status kiriman kembali ke versi teks.
· Tombol "hapus kiriman ini" - mengirimkan ID kiriman saat ini ke objek PHP untuk menghapusnya dari database.
· Tombol "simpan kiriman ini" - memungkinkan pengguna untuk menyimpan pekerjaan baru atau yang diedit ke server.
Metode inti untuk menangani komunikasi permintaan sisi server adalah metode onResponse, saveNewPost, deletePost dan getPost; ada juga metode pengambil dan penyetel yang menyimpan indeks pekerjaan yang sedang beroperasi Metode .. memberikan nilai indeks saat ini ke metode inti ini sehingga posisi yang benar dapat diperbarui dengan informasi yang benar berdasarkan indeks tersebut. Berikut adalah ringkasan singkat untuk setiap metode inti (tidak termasuk onResponse, karena kita telah melihat fungsinya sebelumnya) . Deskripsi dan contoh kode:
· Metode saveNewPost berikut menyimpan posting baru dengan mengumpulkan dan mengirimkan nilai input formulir ke objek PHP dan menetapkan metode getPost sebagai metode panggilan balik onreadystatechange:
function saveNewPost(_id, _index){
var newDescription = document.getElementById("formDescription_"+ _index).value;
var newTitle = document.getElementById("formTitle_"+ _index).value;
setIndeks(_indeks);
sendRequest("services/post.php?method=save"id="+ _id +""title="+ newTitle +""description="+ newDescription, getPost);
}
· Metode getPost di bawah ini adalah metode panggilan balik - metode ini bertanggung jawab untuk memperbarui satu posting ketika respons diterima dari objek PHP:
function getPost(){
if(checkReadyState(permintaan)) {
var respon = permintaan.responseXML.documentElement;
var _title = respon.getElementsByTagName('judul')[getIndex()].firstChild.data;
var _description = respon.getElementsByTagName('deskripsi')[getIndex()].firstChild.data;
var _date = respon.getElementsByTagName('date')[getIndex()].firstChild.data;
document.getElementById("title_"+ getIndex()).innerHTML = _title;
document.getElementById("description_"+ getIndex()).innerHTML = _description;
document.getElementById("date_"+ getIndex()).innerHTML = _date;
beralih(getIndex());
}
}
· Metode deletePost di bawah ini mengirimkan indeks saat ini sebagai permintaan ke objek PHP, yang pada akhirnya akan menghapus catatan dalam database dan merespons dengan posisi yang diperbarui:
function deletePost(_id){
sendRequest("services/post.php?method=delete"id="+ _id, onResponse);
}
Anehnya, bagian tersulit telah selesai. Mari kita menganalisis bagian paling penting - interaksi basis data.
4. Berinteraksi dengan database
Untuk berinteraksi dengan database, Anda perlu membuat metode untuk mengambil, menyisipkan, mengganti dan menghapus posisi. Saya memilih untuk membuat kelas posting dengan metode dapatkan, simpan, dan hapus untuk menangani interaksi ini. Kelas ini juga memiliki referensi ke file koneksi database (digunakan untuk terhubung ke database). Anda harus mengganti login, kata sandi, dan nama database dengan informasi database Anda sendiri.
DEFINE('DB_USER', 'USERNAME');
DEFINE('DB_PASSWORD', 'PASSWORD');
DEFINE('DB_HOST', 'localhost');
DEFINE('DB_NAME', 'DATABASE');
$dbc = @mysql_connect (DB_HOST, DB_USER, DB_PASSWORD) OR die ('Tidak dapat terhubung ke MySQL: ' . mysql_error() );
Referensi ke file koneksi dan nama database ada di konstruktor kelas ini. Konstruktor Anda akan terlihat mirip dengan kode berikut:
function Post(){
require_once('mysql_connect.php');
$ini->tabel = "informit_ajax";
}
Metode dbConnect berikut bertanggung jawab untuk membuat koneksi - dengan meneruskan informasi login ke database; metode ini digunakan kembali di semua metode inti sebelum menanyakan database:
function dbConnect(){
DEFINE('LINK', mysql_connect(DB_HOST, DB_USER, DB_PASSWORD));
}
Metode get berikut melakukan perulangan melalui tabel database, membuat string XML berdasarkan baris database, dan mengembalikan string ke peminta:
function get(){
$ini->dbConnect();
$query = "PILIH * DARI $ini->tabel ORDER BY id";
$hasil = mysql_db_query (DB_NAME, $query, LINK);
$xml = "＜?xml version="1.0" pengkodean="ISO-8859-1" ?＞n";
$xml .= "＜postingan＞n";
while($baris = mysql_fetch_array($hasil)) {
$xml .= "＜posting＞n";
$xml .= "＜id＞" $baris['id'] .
$xml .= "＜tanggal＞" $baris['tanggal'] .
$xml .= "＜judul＞＜![CDATA[" .$baris['judul'] "]]＞＜/judul＞n";
$xml .= "＜deskripsi＞＜![CDATA[" .$baris['deskripsi'] "]]＞＜/deskripsi＞n";
$xml .= "＜/posting＞n";
}
$xml .= "＜/postingan＞";
mysql_close();
header("Tipe Konten: aplikasi/xml; charset=UTF-8");
gema $xml;
}
Metode penyimpanan berikut mencapai dua tujuan dengan menangani posisi pembaruan dan penyisipan:
function save($id, $title, $description){
$ini->dbConnect();
$query = "PILIH * DARI $ini->tabel WHERE id='$id'";
$hasil = @mysql_query ($kueri);
jika (mysql_num_rows($hasil) > 0)
{
$query = "PERBARUI $ini->tabel SET judul='$judul', deskripsi='$deskripsi', tanggal=SEKARANG() WHERE id='$id'";
$hasil = @mysql_query($query);
}
kalau tidak
{
$query = "MASUKKAN KE $ini->tabel (judul, deskripsi, tanggal) VALUES ('$title', '$description', NOW())";
$hasil = @mysql_query($query);
}
mysql_close();
$ini->dapatkan();
}
Metode hapus di bawah ini bertanggung jawab untuk menghapus lokasi berdasarkan ID yang diteruskan sebagai parameter. Kemudian panggil metode get untuk mengembalikan data baru ke file permintaan:
function delete($id){
$ini->dbConnect();
$query = "HAPUS DARI $ini->tabel WHERE id='$id'";
$hasil = @mysql_query($query);
mysql_close();
$ini->dapatkan();
}
5. Aplikasi yang komprehensif
Untuk mengintegrasikan bagian-bagian di atas, sebuah file sederhana perlu dibuat untuk berfungsi sebagai jembatan komunikasi antara permintaan XML HTTP dan objek PHP. Halaman pada titik ini tidak hanya membuat objek PHP, tetapi juga menerima kueri dan meneruskan variabel ke metode yang dihasilkan secara dinamis - dalam hal ini, dapatkan, simpan, atau hapus. Contoh kueri di bawah ini menyertakan $method dan variabel $id, $title, dan $description yang andal.
require_once("../classes/Post.class.php");
$posting = Postingan baru();
$post->$method($id, $title, $description);
Kita akan membahas teknik ini lebih lanjut di masa mendatang. Perkembangan web saat ini terlihat muda dan dinamis kembali, dan kita beruntung menjadi bagian dari era teknologi baru ini.