1. Disini saya mengambil contoh sebuah content dari tabel berita. Buka text editor kesayangan rekan-rekan, buat sebuah file dengan nama index.php. Kita tampilkan dahulu beberapa cuplikan daftar berita yang terbaru, disini saya batasi sebanyak 5 berita. Pada setiap barisnya, saya berikan kode untuk menentukan id_berita terakhir. Sehingga bisa ditentukan id_berita selanjutnya yang akan ditampilkan ketika link load more di-klik. <div id="content"> <?php include('koneksi.php'); $query = 'SELECT * FROM berita ORDER BY id_berita DESC LIMIT 0,5'; $hasil = mysql_query($query); while($r = mysql_fetch_array($hasil)) { $isi = strip_tags(substr($r['isi_berita'],0,300)); echo '<div class="baris" kode="'.$r['id_berita'].'"><b>'.$r['judul'].'</b><br> <span class=date>'.$r[hari].', '.$r[tanggal].' - '.$r[jam].' WIB</span><br> <img src="berita/small_'.$r['gambar'].'" class="img"> '.$isi.'.... <b>[Baca Selengkapnya]</b><br> </div>'; } ?> </div> <div style="display:none;"><center><img src="images/loading.gif" /></center></div> <br/> <div id="lihat"><center>Lihat Berita Terdahulu</center></div> </div> 2. Sekarang kita definisikan fungsi-fungsi dari jQuery yang akan digunakan untuk memanggil berita yang lainnya via AJAX. <script type="text/javascript" src="js/jquery-1.4.4.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#lihat").click(function (){ $('#lihat').html('<center><img src="images/loading.gif" /></center>'); $.ajax({ url: "konten.php?urut=" + $(".baris:last").attr("kode"), success: function(html){ if(html){ $("#content").append(html); $('#lihat').html('<center>Lihat Berita Terdahulu</center>'); }else{ $('#lihat').replaceWith('<div id="lihat"><center>Tidak Ada Berita</center></div>'); } } }); }); }); </script> 3. Disini saya pisahkan script PHP untuk mengambil daftar berita selanjutnya, dan dari file index.php cukup mengirimkan sebuah parameter GET yang berupa id_berita dari baris yang terakhir. Buat file baru dengan nama konten.php, dan ketikkan script PHP di bawah ini. <?php include('koneksi.php'); if($_GET['urut']){ $query = 'SELECT * FROM berita WHERE id_berita < "'.$_GET['urut'].'" ORDER BY id_berita DESC LIMIT 0,5'; $hasil = mysql_query($query); while($r = mysql_fetch_array($hasil)) { $isi = strip_tags(substr($r['isi_berita'],0,300)); echo '<div class="baris" kode="'.$r['id_berita'].'"><b>'.$r['judul'].'</b><br> <span class=date>'.$r[hari].', '.$r[tanggal].' - '.$r[jam].' WIB</span><br> <img src="berita/small_'.$r['gambar'].'" class="img"> '.$isi.'.... <b>[Baca Selengkapnya]</b><br> </div>'; } } ?> 4. Yang terakhir, tidak lengkap rasanya jika belum menambahkan CSS. Biar lebih sedap lah kalau dipandang :D. <style> body{ margin:40px; font-family:Arial; font-size:12px; } #content{ margin:0px auto; width:500px; padding:10px; border:1px dashed #666666; } .baris{ padding:10px; border-bottom:1px dashed #666666; } .img{ padding:2px; border:1px solid #666666; float:left; width:60px; margin:5px; } #lihat{ margin:0px auto; padding:10px; border:1px dashed #666666; background-color:#FF9900; cursor:pointer; width:500px; } .date { font-size: 10px; line-height: 135%; font-style: italic; } </style> Gampang kan cara pembuatannya…??? Di bawah ini sudah saya sediakan contoh hasil jadi + link untuk men-download source code akhirnya. Semoga bisa membantu rekan-rekan yang kebetulan sedang menemui studi kasus yang serupa. Happy Blogging and Keep Coding Cheerrrss….!!!! [to_like] [/to_like] |