Tutorial Cara Menampilkan Data dengan PDO, AJAX dan Select2 Jquery - salam sejahtera buat teman-teman sekalian, pada kesempatan ini saya akan mencoba share script yang sederhana. Pada kali ini kita menampilkan dari database ke selectBox dengan menggunakan sebuah plugin jQuery yaitu Select2. Dengan menggunakan ini, anda dengan mudah menampilkan data dalam bentuk selectBox.
Oke langsung saja, terlebih dahulu kita membuat file bernama index.php, lalu kita memanggil script jquery dan select2.
<script type="text/javascript" src="jQuery-2.1.4.min.js"></script>
<script type="text/javascript" src="select2.min.js"></script>
Agar memiliki tampilan yang bagus, kita juga menyisipkan file berikut:
<link rel="stylesheet" href="select2.min.css">
Setelah itu membuat selectBoxnya :
<select id="testSelect" style="width: 300px;">
</select>
Lalu, kita membuat sebuah fungsi, dimana fungsi ini memanggil fungsi select2:
<script type="text/javascript">
$(document).ready(function() {
$("#testSelect").select2({
placeholder: 'Pilih Kategori',
ajax: {
url: 'select2.php',
dataType: 'json',
delay: 250,
cache: true,
data: function(params) {
return {
q: params.term,
page: params.page
}
},
processResults: function(data) {
return {
results: $.map(data, function(obj) {
return { id: obj.id_kategori, text: obj.nama_kategori}
})
};
}
},
});
});
</script>
Jika anda menggunakan add ons Firebug di browser anda, maka yang terjadi adalah error, dikarenakan tidak ditemukannya file select2.php. Oleh karena itu langkah selanjutnya adalah membuat file select2.php dan berisikan script pdo yang sederhana.
results: $.map(data, function(obj) {
return { id: obj.id_kategori, text: obj.nama_kategori}
})
};
}
},
});
});
</script>
<?php
include "connect.php";
$data = array();
$sql = "SELECT * FROM tbl_kategori";
$stmt = $konek->prepare($sql);
$stmt->execute();
$result = $stmt->fetchAll(PDO::FETCH_ASSOC);
/*
foreach ( $result as $key => $value) {
$data[] = array('id'=> $value['id_kategori'], 'text'=> $value['nama_kategori']);
}*/
echo json_encode($result); //$data
?>
Masih error bukan,? yup kita belum membuat script untuk koneksinya. Disini saya asumsikan anda sudah mempunya tabel "kategori" dan mempunyai 2 field beserta isinya yaitu id_kategori dan nama_kategori (seperti gambar dibawah).
<?php
$server = "localhost";
$username = "root";
$password = "";
$database = "blog";
try {
$konek = new PDO("mysql:host=$server;dbname=$database", $username, $password);
$konek->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
//echo "Koneksi Berhasil";
} catch (PDOException $e) {
echo "Koneksi gagal : ".$e->getMessage();
}
?>
Saya harap langkah sampai disini sudah membuahkan hasil ya teman-teman. Bagaimana.? Sederhana bukan.? Saya masih pemula, jadi saya harap teman-teman sekalin punya masukan ya untuk memperbaiki yang salah. Sampai disini Tutorial Cara Menampilkan Data dengan PDO, AJAX dan Select2 Jquery semoga dapat bermanfaat. Sekian dan terima kasih.! Oh ya, untuk teman-teman ingin mengetahui fungsi dari script select2 diatas, anda bisa membaca documentasinya.
Perkenalkan saya blogger pemula, yang ingin belajar lebih dalam mengenai blogger dan internet ini.
Related Post
Cara Memutar Audio pada Halaman Web dengan HTML5
Cara Memutar Audio pada Halaman Web dengan HTML5 – Salam sejahtera buat teman-teman semua, pada
Tutorial PHP : Komentar pada PHP
Terkadang pada saat anda mengerjakan sebuah program atau project anda, mungkin ada beberapa perint
Cara Membuat Tabel Responsive Menggunakan Bootstrap
Cara Membuat Tabel Responsive Menggunakan Bootstrap – Salam sejahtera buat teman-te
Forum Sosial Media Belajar Bahasa Pemrograman PHP
Forum Sosial Media Belajar Bahasa Pemrograman PHP Salam sejahtera buat teman-teman sekalian. P
ConversionConversion EmoticonEmoticon