Sebagai salah satu bahasa pemrograman terpopuler, PHP punya keunggulan tersendiri dalam memproses data melalui browser secara cepat dan mudah. Baik itu merupakan data teks maupun data file, pengguna dapat memanipulasi data yang dikirimkan ke server untuk menghasilkan output yang berbeda sesuai dengan fungsi yang diterapkan. Apalagi fitur PHP sangatlah banyak dan unik.
Seperti yang diketahui, PHP punya beragam fungsi atau function yang bisa digunakan dalam mengelola teks. Cukup membuat form html sederhana, memproses data pada PHP bisa langsung dilakukan hanya dengan mengklik sebuah tombol. Teks yang dimasukkan pun dapat dikelola dengan berbagai cara, misalnya menghapus karakter tertentu, mengganti kata atau kalimat, dan sebagainya.
Tapi, salah satu kekurangan PHP dalam memproses data adalah sifat reload pada browser yang selalu terjadi saat penginputan data dilakukan. Ketika tombol dalam sebuah form yang dihubungkan dengan halaman PHP ditekan, maka browser akan otomatis mengulang halamannya. Tentu saja, ada teknik yang bisa dilakukan untuk mengatasi hal ini, yakni dengan memakai jQuery AJAX.
TUTORIAL
1. Sebelum mulai menggunakan AJAX, yang pertama kita siapkan dulu halaman HTML yang kita beri nama index.php, karena akan kita pasang pada htdocs.
2. HTML untuk index.php kita buat simpel saja, yakni dengan element dasar <body> diikuti <section>, lalu didalamnya kita rangkai tag <textarea> dan <button>.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PHP AJAX</title>
</head>
<body>
<section>
<div class="input">
<textarea id="Txt1"></textarea>
<textarea id="Txt2"></textarea>
<textarea id="Txt3"></textarea>
</div>
<button id="Proses">Proses</button>
<div class="output">
<textarea id="Txt4"></textarea>
<textarea id="Txt5"></textarea>
<textarea id="Txt6"></textarea>
</div>
</section>
</body>
</html>
3. Agar tampilannya lebih rapi, tambahkan kode CSS berikut didalam element <head>.
<style>
* {
margin:0;
padding:0;
box-sizing:border-box
}
body {
min-height: 100vh;
background: #eee;
}
section {
display:grid;
grid-gap:20px;
max-width:1000px;
margin: 20px auto;
}
.input,
.output {
display:grid;
grid-template-columns:1fr 1fr 1fr;
grid-gap:10px
}
textarea,
button {
display: block;
padding: 10px;
border: 1px solid #ddd;
}
textarea {
height: 200px;
}
button {
background: #222;
color: #fff;
font-weight: bold;
cursor: pointer;
}
</style>
4. Nanti tampilan halaman formnya kurang lebih akan seperti ini.
5. Jadi yang akan kita buat disini adalah alat untuk memanipulasi teks melalui tiga input yang berbeda dengan satu klik tombol saja. Nanti hasilnya akan ditampilkan secara berbeda pula pada ouput textarea masing-masing tanpa melakukan reload. Untuk fungsi PHP-nya sendiri cukup sederhana.
| Input | Function | Keterangan |
|---|---|---|
| input 1 | strtolower() | Mengecilkan semua huruf alphabet pada teks |
| input 2 | strtoupper() | Membesarkan semua huruf alphabet pada teks |
| input 3 | ucwords() | Membuat setiap huruf pertama pada kata menjadi capitalize |
6. Untuk melakukannya, kita awali dengan menambahkan jQuery library pada halaman index.php yang telah kita buat. Masukkan script berikut di atas </body>.
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
7. Kemudian tambahkan kode JavaScript berikut di bawahnya.
<script>
$(document).ready(function(){
$('#Proses').click(function(){
$.post("proses.php",
{
name1: $('#Txt1').val()
},
function(data){
$('#Txt4').html(data);
}
);
$.post("proses.php",
{
name2: $('#Txt2').val()
},
function(data){
$('#Txt5').html(data);
}
);
$.post("proses.php",
{
name3: $('#Txt3').val()
},
function(data){
$('#Txt6').html(data);
}
);
});
});
</script>
8. Jika Agan perhatikan sekali lagi pada form di halaman index.php, bisa dilihat kalau sebenarnya tidak ada element <form> yang mengapit tag textarea dan button pada halaman tersebut seperti yang umumnya diperlukan ketika ingin memproses data. Ini karena data yang dimasukkan ke server tidak melalui form HTML, melainkan AJAX. Jadi atribut name tidak dibutuhkan.
9. Berikut sedikit penjelasan struktur kode jQuery yang kita buat dan hubungannya dengan form HTML.
$('#Proses').click(function(){
$.post("proses.php",
{
name1: $('#Txt1').val()
},
function(data){
$('#Txt4').html(data);
}
);
-
Keterangan:
- Merah adalah id pada button, yang ketika diklik akan menjalankan fungsi.
- Hijau adalah halaman yang dituju sebagai tempat untuk memproses data.
- Kuning adalah pengganti atribut name pada textarea.
- Biru adalah id pada textarea input.
- Ungu adalah id pada textarea output.
10. Setelah kita mengetahui bagaimana kode jQuery bekerja dalam menangkap data, sekarang yang kita butuhkan adalah halaman PHP untuk memproses data itu. Dari kode tersebut yang perlu kita buat adalah halaman proses.php diisi dengan kode di bawah ini.
<?php
if(isset($_POST['name1'])){
echo strtolower($_POST['name1']);
}
if(isset($_POST['name2'])){
echo strtoupper($_POST['name2']);
}
if(isset($_POST['name3'])){
echo ucwords($_POST['name3']);
}
?>
11. Setelah semua halaman siap dan terisi dengan kode yang dibutuhkan, silahkan jalankan pada browser. Jika semua tahap dilakukan dengan benar, maka tiap inputan textarea akan menghasilkan teks yang sesuai dengan fungsi PHP yang diberikan.
Demikian cara memproses data PHP tanpa reload menggunakan jQuery AJAX yang bisa Agan terapkan pada project website masing-masing untuk membuat website yang dikelola terasa lebih cepat dan interaktif. Fitur AJAX juga bisa diterapkan dalam berbagai fungsi PHP, tak hanya memproses data, tapi juga memasukkan data ke dalam server database tanpa harus mengulang halaman pada browser.
0 Comments