Tutorial PHP + jQuery : Membuat Fitur Load More Dengan

PHP dan jQuery

Cuaca akir!akir ini memang agak berbeda dari yang bia"anya# $aat "iang
ari cuacanya %ana" bukan main& ditamba ada mata kulia yang gak nyantol "ama "ekali di otak& dijamin tamba
gera + ba'aannya %engen nyem%lung ke bak mandi# Malam arinya juga begitu& membuat "aya yang terbia"a kerja
malam menjadi tidak (oku" ke %ekerjaan# )a*ngomong!ngomong ma"ala kerjaan& kemarin "aya "em%at
menemui "ebua "tudi ka"u" yang tidak jau!jau dari dunia 'eb# $aya diminta untuk membuat "ebua (itur load
more/load older content "e%erti yang kita "ering liat di Facebook mau%unT'itter# Dimana tam%ilan "ebua
deretan content dibata"i dalam jumla tertentu& dan ketika %engguna ingin meliat content yang terdaulu&
mereka bi"a meng!klik link load older content yang terda%at di ba'a content terakir
tan%arefresh+ber%inda alaman# Dulu "aya %erna membuat yang "e%erti itu dengan ja,a"cri%t buatan "endiri#
-u'et de %okoknya dan "aya %un mala" untuk meliatnya lagi :D# .kirnya "aya menggunakan jQuery& yang
"angat membantu terutama (ung"i .append() yang dimilikinya dan "aya im%lementa"ikan dengan Code/gniter# 0ali
ini "aya akan membagikan "edikit tutorial "ederana cara %embuatannya tan%a Code/gniter& yang intinya "ama "aja
dengan yang memakai Code/gniter#
1# Di"ini "aya mengambil conto "ebua content dari tabel berita# 2uka te3t editor ke"ayangan rekan!rekan& buat
"ebua (ile dengan nama index.php# 0ita tam%ilkan daulu bebera%a cu%likan da(tar berita yang terbaru& di"ini
"aya bata"i "ebanyak 4 berita# Pada "etia% bari"nya& "aya berikan kode untuk menentukan id5berita terakir#
$eingga bi"a ditentukan id5berita "elanjutnya yang akan ditam%ilkan ketika link load more di!klik#
1 <div id="content">
2 <?php
3 include('koneksi.php');
4 $que! = '"#$#%& ' ()*+ ,eit- *).#) /0 id1,eit- .#"% $2+2& 345';
5 $h-sil = 6!sql1que!($que!);
7 8hile($ = 6!sql19etch1--!($h-sil)) :
; $isi = stip1t-<s(su,st($='isi1,eit-'>434333));
?
echo '<div cl-ss=",-is" kode="'.$='id1,eit-'>.'"><,>'.
$='@udul'>.'<A,><,>
B
<sp-n cl-ss=d-te>'.$=h-i>.'4 '.$=t-n<<-l>.' C '.
$=@-6>.' D2/<Asp-n><,>
13
<i6< sc=",eit-As6-ll1'.$='<-6,-'>.'" cl-ss="i6<">
11 '.$isi.'.... <,>=/-c- "elen<k-pn!-><A,><,>
12 <Adiv>';
13 E
14 ?>
15 <Adiv>
17
<div st!le="displ-!Fnone;"><cente><i6<
sc="i6-<esAlo-din<.<i9" A><Acente><Adiv>
1; <,A>
1? <div id="lih-t"><cente>$ih-t /eit- &ed-hulu<Acente><Adiv>
1B <Adiv>
6# $ekarang kita de(ini"ikan (ung"i!(ung"i dari jQuery yang akan digunakan untuk memanggil berita yang lainnya
,ia .7.8#
1
<scipt t!pe="teGtA@-v-scipt" sc="@sA@que!C1.4.4.@s"><Ascipt>
2 <scipt t!pe="teGtA@-v-scipt">
3 $(docu6ent).e-d!(9unction():
4
$("Hlih-t").click(9unction ():
5
$('Hlih-t').ht6l('<cente><i6< sc="i6-<esAlo-din<.<i9"
A><Acente>');
7 $.-@-G(:
;
ulF "konten.php?uut=" I $(".,-isFl-st").-tt("kode")4
? successF 9unction(ht6l):
B i9(ht6l):
13 $("Hcontent").-ppend(ht6l);
11
$('Hlih-t').ht6l('<cente>$ih-t /eit-
&ed-hulu<Acente>');
12 Eelse:
13
$('Hlih-t').epl-ceDith('<div
id="lih-t"><cente>&id-k Jd- /eit-<Acente><Adiv>');
14 E
15 E
17 E);
1; E);
1? E);
1B <Ascipt>
9# Di"ini "aya %i"akan "cri%t PHP untuk mengambil da(tar berita "elanjutnya& dan dari (ile index.php cuku%
mengirimkan "ebua %arameter :;T yang beru%a id5berita dari bari" yang terakir# 2uat (ile baru dengan
nama konten.php& dan ketikkan "cri%t PHP di ba'a ini#
1 <?php
2 include('koneksi.php');
3 i9($1K#&='uut'>):
4
$que! = '"#$#%& ' ()*+ ,eit- DL#)# id1,eit- < "'.$1K#&='uut'>.'"
*).#) /0 id1,eit- .#"% $2+2& 345';
5 $h-sil = 6!sql1que!($que!);
7 8hile($ = 6!sql19etch1--!($h-sil)) :
; $isi = stip1t-<s(su,st($='isi1,eit-'>434333));
?
echo '<div cl-ss=",-is" kode="'.$='id1,eit-'>.'"><,>'.
$='@udul'>.'<A,><,>
B
<sp-n cl-ss=d-te>'.$=h-i>.'4 '.$=t-n<<-l>.' C '.
$=@-6>.' D2/<Asp-n><,>
13
<i6< sc=",eit-As6-ll1'.$='<-6,-'>.'" cl-ss="i6<">
11 '.$isi.'.... <,>=/-c- "elen<k-pn!-><A,><,>
12 <Adiv>';
13 E
14 E
15 ?>
<# =ang terakir& tidak lengka% ra"anya jika belum menambakan C$$# 2iar lebi "eda% la kalau di%andang :D#
1 <st!le>
2 ,od!:
3 6-<inF43pG;
4 9ontC9-6il!FJi-l;
5 9ontCsiMeF12pG;
7 E
; Hcontent:
? 6-<inF3pG -uto;
B 8idthF533pG;
13 p-ddin<F13pG;
11
,odeF1pG d-shed H777777;
12 E
13 .,-is:
14 p-ddin<F13pG;
15
,odeC,otto6F1pG d-shed H777777;
17 E
1; .i6<:
1? p-ddin<F2pG;
1B
,odeF1pG solid H777777;
23 9lo-tFle9t;
21 8idthF73pG;
22 6-<inF5pG;
23 E
24 Hlih-t:
25 6-<inF3pG -uto;
27 p-ddin<F13pG;
2;
,odeF1pG d-shed H777777;
2? ,-ck<oundCcoloFH((BB33;
2B cusoFpointe;
33 8idthF533pG;
31 E
32 .d-te :
33 9ontCsiMeF 13pG;
34 lineChei<htF 135N;
35 9ontCst!leF it-lic;
37 E
3; <Ast!le>
:am%ang kan cara %embuatannya*>>> Di ba'a ini "uda "aya "ediakan conto a"il jadi + link untuk men!
do'nload "ource code akirnya# $emoga bi"a membantu rekan!rekan yang kebetulan "edang menemui "tudi ka"u"
yang "eru%a#