Membuat Rangkuman Arsip Berita atau Artikel dan Menampikan Isi Arsip dengan Ajax
Artikel kali ini saya sengaja buat dari salah satu request pembaca blog saya. Terima kasih atas sumbangsih ide dan masukan lainnya.
Pada setiap aplikasi web yang mengandung fasilitas berita atau artikel tentunya tidak boleh melewatkan fasilitas ini, yaitu fasilitas arsip berita/artikel dimana adanya pemasangan fasilitas ini para pembaca dapat mengetahui berapa banyak artikel yang di buat berdasar bulan dan tahun. Contohnya pada gambar di bawah ini.
Untuk membuat arsip artikel ini intinya adalah pemahaman perintah SQL yang bertugas untuk merangkum keseluruhan artikel dan mengelompokkannya ke dalam satuan bulan dan tahun. Sebelumnya coba install table “artikel” ini pada MySQL anda.
CREATE TABLE `artikel` ( `id` int(5) NOT NULL AUTO_INCREMENT, `judul_artikel` varchar(100) collate latin1_general_ci NOT NULL, `isi_artikel` text collate latin1_general_ci NOT NULL, `tanggal_posting` date NOT NULL, PRIMARY KEY (`id`) );
Lalu masukan beberapa record data di dalam table tersebut. Kalau gak mau capek-capek memasukan data salin saja script dari syntax ini.
Setelah table terisi beberapa record coba eksekusi perintah di bawah ini.
SELECT DATE_FORMAT(tanggal_posting,'%M %Y') AS SumTanggal, SUM(1) AS TotalArtikel FROM artikel GROUP BY YEAR(tanggal_posting), MONTH(tanggal_posting) ORDER BY YEAR(tanggal_posting) DESC, MONTH(tanggal_posting) DESC
Penjelasan dari syntax SQL diatas adalah:
- DATE_FORMAT(tanggal_posting,’%M %Y’) : untuk mendapatkan format tanggal berupa ‘Bulan Tahun’
- SUM(1) AS TotalArtikel : Akan menampung jumlah baris hasil looping artikel setiap bulan dan tahun
- GROUP BY YEAR(tanggal_posting), MONTH(tanggal_posting) : Mengelompokkan atau mengkompres data artikel berdasar tahun dan bulan dari tanggal posting artikel
- ORDER BY YEAR(tanggal_posting) DESC, MONTH(tanggal_posting) DESC : Agar hasil grouping artikel ditampilkan berdasar bulan dan tahun terbaru
Dengan mengeksekusi perintah SQL diatas anda mendapatkan jumlah artikel yang dikelompokkan dalam bulan dan tahun. Jika ingin menampilkannya dan menambahkan sentuhan Ajax untuk melihat daftar artikel pada setiap bulan dan tahun maka salin saja script di bawah.
<html>
<head>
<title>Membuat Arsip Artikel</title>
<script language="javascript" src="jquery.js"></script>
<script language="javascript">
// untuk melihat daftar artikel pada bulan dan tahun yang ditentukan
function loadArtikel(element,filter){
// ambil element span yang sejajar dengan element link
var span = $(element).next('span');
// perlihatkan terlebih dahulu text 'loading' sebelum muncul list artikel
span.html('<small>loading...</small>');
$.post('getarticle.php',
{bulan_tanggal: filter}, // kirim parameter 'bulan_tanggal' ke 'getarticle.php'
function(response){
span.html(response); // ubah isi span dengan hasil response dari getarticle
}
);
}
</script>
</head>
<body>
<?
include 'connect.php'; // koneksi ke database
$SQL = "SELECT DATE_FORMAT(tanggal_posting,'%M %Y') AS SumTanggal, SUM(1) AS TotalArtikel
FROM artikel GROUP BY YEAR(tanggal_posting), MONTH(tanggal_posting)
ORDER BY YEAR(tanggal_posting) DESC, MONTH(tanggal_posting) DESC";
$query = mysql_query($SQL);
if($query && mysql_num_rows($query) > 0){
echo '<ul>';
while($row = mysql_fetch_object($query)){
echo '<li><a href="#" onClick="loadArtikel(this,''.$row->SumTanggal.'')">'.$row->SumTanggal.'</a> ('.$row->TotalArtikel.') <span></span></li>';
}
echo '</ul>';
}
?>
</body>
</html>Untuk menambahkan sentuhan Ajax kali ini saya pakai JQuery. Buat juga file php yang akan memberi respon daftar artikel pada setiap bulan dan tahun dengan nama “getarticle.php”:
<? // Agar memastikan bahwa halaman ini diakses dengan parameter POST: bulan_tanggal isset($_POST['bulan_tanggal']) or die('Error Parameter'); include 'connect.php'; // koneksi ke database $filter = $_POST['bulan_tanggal']; // value yang ditampung berformat: 'January 2009', 'February 2009', dsb // Tampilkan semua isi berita yang pada tanggal sesuai format 'Bulan Tahun' ( '%M %Y' ) $query = mysql_query("SELECT * FROM artikel WHERE DATE_FORMAT(tanggal_posting,'%M %Y') = '$filter'"); if($query && mysql_num_rows($query) > 0){ echo '<ul>'; // memberi respon ke javascript dengan format list while($row = mysql_fetch_object($query)){ echo '<li><a href="#artikel:'.$row->id.'">'.$row->judul_artikel.'</a></li>'; } echo '</ul>'; } ?>
Untuk melihat demo program diatas silahkan kunjungi Link ini.
Untuk men-download program diatas silahkan kunjungi Link ini.
Semoga dapat menambah wawasan… ^_^
Chandra Jatnika
mantaaaaaaaaaaaaaaabh!!
request saya ko blm om’??? hiiiiy
Gile…egar mecahin rekor ngisi reply paling cepet setelah artikel di posting…hehehe
Sabar gar…ntar juga diposting kok… hehehe… sabar ya…
mas chandra emang tob markotob dech… mantab… request saya di approve trus
…. trus sharing ilmu mas…
MANTABZ OM, tenx bangeeetz dah balas pertanyaan saya
yup, makasih juga atas masukannya… ^_^
hebat sekali bung t-10 ini..
semoga mkin sukses y TeN..
Slm bwt sinta jg..hee..
from : ferdian Angk BL 05
bisa nggak blog semacam blogspot di tanamkan jumlah pembaca di setiap postingan pakai PHP dan mySQL …..yg saya tau itu di coding sendiri oleh si pembuat..tolong di balas lewat e-mail
Sangar Terima kasih Cak.. Saya Harus Banyak Belajar Dari anda…
saya Tunggu Tutorial Selanjutnya
pak bagaimna cara menaruhkan website pada menu horizontal yang ada pada blo kasih tau donk secara detiel
bagus bos, script Php NYA tolong ditambah terus, biar banyak
Bagus untuk update ilmu
kok ga bs muncul full artikel untuk pembuatan arsip artikel ya???
maksudnya gak muncul full artikel apa mas? saya gak limit query-nya kok.
ato ada judul artikel dengan karakter spt kutip, “&” ato sejenisnya sehingga gak ketampil?
thnks bget bro…ne artikel yg ak cri,,,,, mo d cb ne…