Tutorial / Cara membuat paging atau pagination dengan Ajax dan PHP

Tutorial / Cara membuat paging atau pagination dengan Ajax dan PHP

AJAX PHP

Pemberian halaman (paging) web sering dijadikan sebagai solusi untuk mengatur content web yang berisi berita, artikel, dan sejenisnya. Dalam implementasinya, isi berita tidak ditampilkan semua, tetapi cukup deskripsi singkatnya saja. Dengan demikian, anda bisa menghemat ruang halaman web, dimana satu halaman bisa menampung banyak berita.

Untuk programmer back end mungkin sudah tidak aneh lagi dengan kata paging karna disetiap sistem yang dia buat pasti terdapat pagingnya agar tidak menjadi penumpukan data dalam satu halaman. sebenernya untuk teknik pembuatan paging sangatlah banyak ada yang dengan PHP, Ajax atau yang lainnya, tetapi di artikel kali ini kita hanya akan membahas dengan menggunakan Ajax. Karena, penggunaanya sangat cepat dibandingkan dengan membuatnya dengan PHP.

Baik mari kita langsung ke tutorialnya tentang Cara membuat paging atau pagination dengan Ajax dan PHP

1. Buatlah database dengan nama db_test dan buat juga satu table bernama siswa. isi field nya adalah id_siswa, nama, dan alamat.

2. Jika anda sudah selesai membuat database, Silahkan anda buat file config.inc.php yang berfungsi sebagai koneksi database.

<?php
$db_username = 'root';
$db_password = '';
$db_name = 'db_test';
$db_host = 'localhost';
$item_per_page = 5; //berapa item yang akan ditampilkan

$mysqli = new mysqli($db_host, $db_username, $db_password, $db_name);
if ($mysqli->connect_error) {
    die('Error : ('. $mysqli->connect_errno .') '. $mysqli->connect_error);
}
?>

3. selanjutnya silahkan buat lagi file fetch_pages.php

<?php
if(isset($_POST) && isset($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest'){

include("config.inc.php");
if(isset($_POST["page"])){
$page_number = filter_var($_POST["page"], FILTER_SANITIZE_NUMBER_INT, FILTER_FLAG_STRIP_HIGH);
if(!is_numeric($page_number)){die('Invalid page number!');}
}else{
$page_number = 1;
}

$results = $mysqli->query("SELECT COUNT(*) FROM siswa");
$get_total_rows = $results->fetch_row();
$total_pages = ceil($get_total_rows[0]/$item_per_page);

$page_position = (($page_number-1) * $item_per_page);


$results = $mysqli->prepare("SELECT * FROM siswa ORDER BY id_siswa ASC LIMIT $page_position, $item_per_page");
$results->execute();
$results->bind_result($id_siswa, $nama, $alamat);

?>
<div class='table'>
<h2 align='center'>Tabel siswa</h2>
<table border='1px'>
<tr>
<th>Id Siswa</th>
<th>Nama</th>
<th>Alamat</th>
</tr>

<?php while($results->fetch()) { ?>
<tr>
<td width='70px'><?php echo $id_siswa; ?></td>
<td><?php echo $nama; ?></td>
<td><?php echo $alamat; ?></td>
</tr>
<?php } ?>
</table>
<?php echo paginate_function($item_per_page, $page_number, $get_total_rows[0], $total_pages); ?></td>
</div>
<?php
exit;
}
function paginate_function($item_per_page, $current_page, $total_records, $total_pages)
{
    $pagination = '';
    if($total_pages > 0 && $total_pages != 1 && $current_page <= $total_pages){
        $pagination .= '<ul class="pagination">';
       
        $right_links    = $current_page + 3;
        $previous       = $current_page - 3;
        $next           = $current_page + 1;
        $first_link     = true;
       
        if($current_page > 1){
$previous_link = ($previous==0)? 1: $previous;
            $pagination .= '<li class="first"><a href="#" data-page="1" title="First">First</a></li>';
            $pagination .= '<li><a href="#" data-page="'.$previous_link.'" title="Previous">Previous</a></li>';
                for($i = ($current_page-2); $i < $current_page; $i++){
                    if($i > 0){
                        $pagination .= '<li><a href="#" data-page="'.$i.'" title="Page'.$i.'">'.$i.'</a></li>';
                    }
                }  
            $first_link = false;
        }
       
        if($first_link){
            $pagination .= '<li class="first active">'.$current_page.'</li>';
        }elseif($current_page == $total_pages){
            $pagination .= '<li class="last active">'.$current_page.'</li>';
        }else{
            $pagination .= '<li class="active">'.$current_page.'</li>';
        }
               
        for($i = $current_page+1; $i < $right_links ; $i++){
            if($i<=$total_pages){
                $pagination .= '<li><a href="#" data-page="'.$i.'" title="Page '.$i.'">'.$i.'</a></li>';
            }
        }
        if($current_page < $total_pages){
$next_link = ($i > $total_pages) ? $total_pages : $i;
                $pagination .= '<li><a href="#" data-page="'.$next_link.'" title="Next">Next</a></li>';
                $pagination .= '<li class="last"><a href="#" data-page="'.$total_pages.'" title="Last">Last</a></li>';
        }
       
        $pagination .= '</ul>';
    }
    return $pagination;
}
?>

4. dan yang terakhir buat juga file index.php sebagai file untuk yang menampilkannya

<!DOCTYPE HTML>
<html>
<head>
<title>Ajax Pagination - Dewa Coding 21</title>

<link rel='stylesheet' type='text/css' href='style.css' />

<script type="text/javascript" src="js/jquery-1.11.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#results" ).load( "fetch_pages.php");

$("#results").on( "click", ".pagination a", function (e){
e.preventDefault();
var page = $(this).attr("data-page");
$("#results").load("fetch_pages.php",{"page":page}, function(){});
});
});
</script>
</head>
<body>
<div id="results"><!-- content akan tampil disini --></div>
</body>
</html>

Demikian lah tutorial kali ini sangat mudah bukan cara membuatnya, jadi kita berharap anda semua jangan selalu copy paste punya orang lebih baik kita membuat sendiri karena lebih bagus dibanding kita copy paste yang orang lain.

Untuk source code atau semua file berikut designnya bisa anda download disini / here

Terima kasih telah mengunjungi blog Dewa Coding 21 :)

Unknown Pada 16:56:00 Komentar

Tutorial cara membuat search tanpa reload dengan Ajax dan PHP

Tutorial cara membuat search tanpa reload dengan Ajax dan PHP

AJAX PHP

Melanjutkan dari artikel yang sebelumnya tentang Cara pengambilan data dari database dengan Ajax dan PHP sangat mungkin  juga kita membuat proses pencarian tanpa reload seperti data table, Jika sebelumnya untuk keyword nya sudah tersedia lewat option-option, pada artikel kali ini kita akan mendapatkannya dari masukan pengguna yang di tulis pada kolom search.

Pada artikel kali ini, kita menggunakan pernyataan SQL yang melibatkan klausa LIKE Berikut script index.php yang menyajikan form masukan data.

<html>
<head>
<title>Tutorial Ajax - Dewa Coding 21</title>
<script type='text/javascript' src='ajax.js'></script>
</head>
<body onload='search()'>
<form>
<input type='text' id='q' placeholder='search...' />
</form>

<!-- Untuk menampilkan data -->
<div id='tampil'></div>
</body>

</html>

Untuk kode Ajax yang diperlukan, secara umum mirip dengan kode ajax yang terdapat pada artikel sebelumnya. Hanya ada perbedaan sedikit. Berikut script Ajax.js .

var xmlHttp = false;

function createXmlHttpRequest() {
var xmlHttp = false;
if (window.ActivateXObject) {
xmlHttp = new ActivateXObject("Microsoft.XMLHTTP");
} else {
xmlHttp = new XMLHttpRequest();
}
if(!xmlHttp) {
alert("Gagal Menciptakan objek");
}
return xmlHttp;
}

function search() {
xmlHttp = createXmlHttpRequest();

if(xmlHttp.readyState == 4 || xmlHttp.readyState == 0) {
var k = document.getElementById('q').value;

var url = 'search.php';
url = url + "?q=" + k;
xmlHttp.onreadystatechange = handleRespon;
xmlHttp.open("GET", url, true);
xmlHttp.send(null);
} else {
setTimeout('search()', 1000);
}
}

function handleRespon() {
if(xmlHttp.readyState == 4) {
if(xmlHttp.status == 200) {
document.getElementById('tampil').innerHTML = xmlHttp.responseText;
setTimeout('search()', 1000);
} else {
alert("Error: " + xmlHttp.statusText);
}
}
}

Langkah selanjutnya adalah menyediakan kode PHP untuk proses pencarian di database. berikut script search.php

<?php
$mysqli = new mysqli('localhost', 'root', '', 'ajax');

$sql = 'SELECT * FROM mahasiswa WHERE nama LIKE ?';
$stmt = $mysqli->prepare($sql);

$stmt->bind_param('s', $val);
$val = '%' .trim($_GET['q']). '%';

$res = $stmt->execute();
$stmt->store_result();
$stmt->bind_result($id, $nama, $alamat);

if($res) {
if($stmt->num_rows) { ?>
<table width='100%' border='1'>
<tr>
<th width='30px'>ID</th>
<th>Nama</th>
<th>Alamat</th>
</tr>
<?php while($stmt->fetch()) { ?>
<tr>
<td><?php echo $id; ?></td>
<td><?php echo $nama; ?></td>
<td><?php echo $alamat; ?></td>
</tr>
<?php } ?>
</table>
<?php
$stmt->free_result();
} else {
echo "Data Not Found";
}
}

$stmt->close;

?>

Hasilnya, jikan Anda tidak memasukkan keyword apapun, maka akan ditampilkan semua data, dan sebaliknya jika anda memasukkan sebuah data maka tampilan juga akan menampilkan dengan apa yang anda masukkan.

Untuk source code / semua file berikut design nya bisa anda Download Disini / Here

Terima kasih telah mengunjungi blog Dewa Coding 21 Jangan lupa berkomentar :)

Unknown Pada 11:34:00 Komentar

Cara pengambilan data dari Database dengan Ajax dan PHP

Cara pengambilan data dari Database dengan Ajax dan PHP

AJAX PHP

Bagi anda yang masih tertarik dengan keunggulan Ajax, pada artikel kali ini kami akan mengajak anda mengintegrasikan Ajax pada aplikasi database. Dalam kasus ini, skenario kita cukup sederhana, yakni melakukan pengambilan data tanpa reloading halaman

Sebenernya integrasi Ajax pada aplikasi database sebenarnya tidaklah sulit. Dengan mengambil asumsi bahwa anda sudah mendapatkan request, misalnya id mahasiswa, maka langkah selanjutnya adalah seleksi data sebagaimana umumnya.

Untuk mengetahui implementasinya secara nyata, misal kita menyediakan halaman awal berisi pilihan id mahasiswa sebagai berikut

<?php
$mysqli = new mysqli('localhost', 'root', '', 'ajax');
$sql = 'SELECT * FROM mahasiswa';
$res = $mysqli->query($sql);
$array = array();
if($res) {
while ($row = $res->fetch_row()) {
$array[] = $row[0];
}
$res->close();
}
?>

<html>
<head>
<title>Aplikasi Database Berbasis Ajax</title>
<script type='text/javascript' src='ajax.js'></script>
</head>
<body>
<form>
<label>NIM :</label>
<select name='id' onChange='showData(this.value);'>
<option value=''>--Pilih NIM--</option>
<?php foreach($array as $row) { ?>
<option value='<?php echo $row; ?>' <?php echo (isset($_GET['id']) && $_POST['id'] == $val) ? 'selected' : ''?>><?php echo $row; ?></option>
<?php } ?>
</select>
</form>

<!-- untuk menghasilkan data -->
<div id='hasil'></div>
</body>
</html>

seperti halnya pada artikel sebelumnya kita menggunakan kode Javascript sebagai berikut, tapi ada perubahan sedikit.

var xmlHttp = false;

function createXmlHttpRequest() {
var xmlHttp = false;
if (window.ActivateXObject) {
xmlHttp = new ActivateXObject("Microsoft.XMLHTTP");
} else {
xmlHttp = new XMLHttpRequest();
}
if(!xmlHttp) {
alert("Gagal Menciptakan objek");
}
return xmlHttp;
}

function showData(id) {
xmlHttp = createXmlHttpRequest();

if(xmlHttp.readyState == 4 || xmlHttp.readyState == 0) {
var url = 'proses.php';
url = url + "?id=" + id;
xmlHttp.onreadystatechange = handleRespon;
xmlHttp.open("GET", url, true);
xmlHttp.send(null);
} else {
setTimeout('getData(source, divID)', 1000);
}
}

function handleRespon() {
if(xmlHttp.readyState == 4) {
if(xmlHttp.status == 200) {
document.getElementById('hasil').innerHTML = xmlHttp.responseText;
} else {
alert("Error: " + xmlHttp.statusText);
}
}
}

Untuk kode PHP, pembuatannya sama persis seperti akses data pada umumnya. Artinya, tidak ada kebutuhan khusus yang kita tambahkan disini

<?php
$mysqli = new mysqli('localhost', 'root', '', 'ajax');
$sql = 'SELECT * FROM mahasiswa WHERE id = ?';
$stmt = $mysqli->prepare($sql);

//Binding  Parameter
$stmt->bind_param('i', $val);
$val = intval($_GET['id']);

//Eksekusi prepared statement
$res = $stmt->execute();

//simpan hasil
$stmt->store_result();

//Binding kolom ke variabel
$stmt->bind_result($id, $nama, $alamat);

if($res && $stmt->num_rows) {
?>
<table border='1' width='100%'>
<tr>
<td width='30px'>ID</td>
<td>Nama</td>
<td>Alamat</td>
</tr>
<?php while($stmt->fetch()) { ?>
<tr>
<td><?php echo $id; ?></td>
<td><?php echo $nama; ?></td>
<td><?php echo $alamat; ?></td>
</tr>
<?php } ?>
</table>
<?php
$stmt->free_result();
}

$stmt->close();
?>

Untuk file lengkap atau source code nya berikut design dari tampilannya bisa anda download Disini

Terima kasih telah berkunjung ke blog Dewa Coding 21 . Jangan lupa ber komentar :)

Unknown Pada 11:43:00 Komentar

Tutorial / Cara mengambil data tanpa reload dengan Ajax

Tutorial / Cara mengambil data tanpa reload dengan Ajax

AJAX HTML

Dapat dikatakan, kata kunci dari Ajax adalah pemrosesan tanpa reload (refresh). Artinya, pemrosesan yang lazimnya melibatkan reloading dapat dilakukan tanpa perlu me-reload halama web. Konsep pemrosesan tanpa reload inilah yang merupakan salah satu fitur menarik untuk diimplementasikan.

Sekedar ilustrasi, bagian ini akan menjelaskan pengambilan data dari file kemudian menampilkannya ke browser dengan tanpa reloading. Berikut ini kode Javascript yang kita beri nama test.js

var xmlHttp = createXmlHttpRequest();
var obj = '';

function createXmlHttpRequest() {
var xmlHttp = false;
if (window.ActivateXObject) {
xmlHttp = new ActivateXObject("Microsoft.XMLHTTP");
} else {
xmlHttp = new XMLHttpRequest();
}
if(!xmlHttp) {
alert("Gagal Menciptakan objek");
}
return xmlHttp;
}

function getData(source, divID) {
if(xmlHttp.readyState == 4 || xmlHttp.readyState == 0) {
obj = divID;
xmlHttp.open("GET", source);
xmlHttp.onreadystatechange = handleRespon;
xmlHttp.send(null);
} else {
setTimeout('getData(source, divID)', 1000);
}
}

function handleRespon() {
if(xmlHttp.readyState == 4) {
if(xmlHttp.status == 200) {
document.getElementById(obj).innerHTML = xmlHttp.responseText;
} else {
alert("Error: " + xmlHttp.statusText);
}
}
}

Langkah selanjutnya adalah mengimplementasikan kode di atas pada dokumen HTML

<html>
<head>
<script type='text/javascript' src='test.js'></script>
</head>
<body>
<form>
<input type='button' value='Get Data' onclick="getData('test.txt', 'target')">
</form>

<!-- untuk menampilkan hasil -->
<div id='target'>
<p>Data Akan ditampilkan disini</p>
</div>
</body>

Perlu sekali diperhatikan, keberadaan elemen <div> dengan atribut id bernilai target memiliki arti penting guna mendukung keberhasilan aplikasi, Singkatnya, di elemen inilah nantinya hasil request atau respon dari server akan kita letakkan. Sebagai tambahan, sebelum anda menguji kode di atas, pastikan anda sudah menyiapkan file bernama test.txt di direktori yang sama

Untuk file lengkap atau source code nya berikut design dari tampilannya bisa anda download Disini

Terima kasih telah berkunjung ke blog Dewa Coding 21 . Jangan lupa ber komentar :)

Unknown Pada 11:42:00 1 Komentar

Apa itu Ajax? atau Sekilas tentang Ajax?

Apa itu Ajax? atau Sekilas tentang Ajax?

AJAX

Selamat datang para codinger di blog Dewa Coding 21 :)

Untuk topik kali ini kita akan membahas tentang apa itu Ajax? atau sekilas tentang Ajax? Meskipun sudah bukan merupakan topik baru lagi, namun Ajax masih sering diperbincangkan. Pada kenyataannya, Ajax memang mampu menyelesaikan sejumlah persoalan, terutama berkaitan dengan pemrosesan round-trip.

Ajax (Asynchronous Javascript And XML) merupakan suatu teknik pengembangan web yang digunakan untuk menghasilkan aplikasi web interaktif. Teknologi Ajax ini dimaksudkan untuk meningkatkan interaktivitas, kecepatan, fungsionalitas, dan kegunaan aplikasi WEB.

Secara garis besar, ada empat komponen pembentuk Ajax, yaitu:

1. Presentasi berbasis browser
2. Data umumnya dalam bentuk XML yang diambil dari server
3. Pemrosesan data dibalik layar menggunakan objek 

   XMLHttpRequest

4. Javascript
   

Secara umum, cara kerja Ajax dapat digambarkan sebagai berikut:

1. Kode yang ditulis dalam Javascript melakukan request
2. Javascript menggunakan objek

   XMLHttpRequest

   untuk mengirim request ke server. Tahap ini dilakukan di belakang layar sehingga tidak mengakibatkan refreshing atau reloading halaman
   
3. Data yang dikembalikan oleh server akan dibaca Javascript dan diproses lebih lanjut.

Mengacu pada komponen-komponen pembentukkannya, kebutuhan yang diperlukan untuk mengimplementasikan Ajax adalah browser yang mendukung Javascript. Contoh berikut memperlihatkan langkah-langkah yang kita lakukan.

<script type="text/javascript">
function createXmlHttpRequest() {
//untuk menyimpan reference ke objek XMLHttpRequest
var xmlHttp = false;

//Jika menggunakan Internet Explorer
if(window.ActiveXObject) {
try {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
xmlHttp = false;
}

//Untuk browser lain
} else {
try {
xmlHttp = new XMLHttpRequest();
} catch (e) {
xmlHttp = false;
}
}

//Kembalikan hasil atau tampilkan pesan
if(!xmlHttp) {
alert('gagal menciptakan objek XMLHttpRequest');
} else {
return xmlHttp;
}
}

//Menciptakan objek XMLHttpRequest
var xmlHttp = createXmlHttpRequest();

if(xmlHttp) {
alert("Objek berhasil diciptakan");
}
</script>

Perlu diperhatikan, pembahasan-pembahasan selanjutnya akan menggunakan pendekatan yang sederhana, dengan alasan meringkas kode program.

Terima kasih telah mengunjungi blog kami, jangan lupa berkomentar :)

Unknown Pada 10:44:00 2 Komentar