Tutorial PHP + jQuery : Membuat Fitur Load More Dengan PHP dan jQuery

Cuaca ak ir!ak ir 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 li at di Facebook mau%unT'itter# Dimana tam%ilan "ebua deretan content dibata"i dalam jumla tertentu& dan ketika %engguna ingin meli at content yang terda ulu& mereka bi"a meng!klik link load older content yang terda%at di ba'a content terak ir 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 meli atnya lagi :D# .k irnya "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 "eder ana 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 da ulu 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 terak ir# $e ingga bi"a ditentukan id5berita "elanjutnya yang akan ditam%ilkan ketika link load more di!klik# 1 <div id="content"> 2 3 4 5 7 ; ? <?php include('koneksi.php'); $que ! = '"#$#%& ' ()*+ ,e it- *).#) /0 id1,e it- .#"% $2+2& 345'; $h-sil = 6!sql1que !($que !); 8hile($ = 6!sql19etch1-!($h-sil)) : $isi = st ip1t-<s(su,st ($ ='isi1,e it-'>434333)); echo '<div cl-ss=",- is" kode="'.$ ='id1,e it-'>.'"><,>'. $ ='@udul'>.'<A,><, >

B 13 11 12 13 14

<sp-n cl-ss=d-te>'.$ =h- i>.'4 '.$ =t-n<<-l>.' C '. $ =@-6>.' D2/<Asp-n><, > <i6< s c=",e it-As6-ll1'.$ ='<-6,- '>.'" cl-ss="i6<"> '.$isi.'.... <,>=/-c- "elen<k-pn!-><A,><, > <Adiv>'; E ?>

15 <Adiv> 17 <div st!le="displ-!Fnone;"><cente ><i6< s c="i6-<esAlo-din<.<i9" A><Acente ><Adiv>

1; <, A> 1? <div id="lih-t"><cente >$ih-t /e it- &e d-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 <sc ipt t!pe="teGtA@-v-sc ipt" s c="@sA@que !C1.4.4.@s"><Asc ipt> 2 <sc ipt t!pe="teGtA@-v-sc ipt"> 3 4 $(docu6ent). e-d!(9unction():

$("Hlih-t").click(9unction (): $('Hlih-t').ht6l('<cente ><i6< s c="i6-<esAlo-din<.<i9" 5 A><Acente >'); 7 ; ? B 13 11 12 13 14 15 17 1; E); E); E &e d-hulu<Acente >'); Eelse: $('Hlih-t'). epl-ceDith('<div id="lih-t"><cente >&id-k Jd- /e it-<Acente ><Adiv>'); E $.-@-G(: u lF "konten.php?u ut=" I $(".,- isFl-st").-tt ("kode")4 successF 9unction(ht6l): i9(ht6l): $("Hcontent").-ppend(ht6l); $('Hlih-t').ht6l('<cente >$ih-t /e it-

1?

E);

1B <Asc ipt> 9# Di"ini "aya %i"a kan "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 terak ir# 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#&='u ut'>): 4 5 7 ; ? B 13 11 12 13 14 E 15 ?> <# =ang terak ir& tidak lengka% ra"anya jika belum menamba kan C$$# 2iar lebi "eda% la kalau di%andang :D# 1 <st!le> 2 3 4 5 7 ; ? B 13 11 12 ,od!: 6- <inF43pG; 9ontC9-6il!FJ i-l; 9ontCsiMeF12pG; E Hcontent: 6- <inF3pG -uto; 8idthF533pG; p-ddin<F13pG; ,o de F1pG d-shed H777777; E E $que ! = '"#$#%& ' ()*+ ,e it- DL#)# id1,e it- < "'.$1K#&='u ut'>.'" *).#) /0 id1,e it- .#"% $2+2& 345'; $h-sil = 6!sql1que !($que !); 8hile($ = 6!sql19etch1-!($h-sil)) : $isi = st ip1t-<s(su,st ($ ='isi1,e it-'>434333)); echo '<div cl-ss=",- is" kode="'.$ ='id1,e it-'>.'"><,>'. $ ='@udul'>.'<A,><, > <sp-n cl-ss=d-te>'.$ =h- i>.'4 '.$ =t-n<<-l>.' C '. $ =@-6>.' D2/<Asp-n><, > <i6< s c=",e it-As6-ll1'.$ ='<-6,- '>.'" cl-ss="i6<"> '.$isi.'.... <,>=/-c- "elen<k-pn!-><A,><, > <Adiv>';

13 14 15 17 1; 1? 1B 23 21 22 23 24 25 27 2; 2? 2B 33 31 32 33 34 35 37

.,- is: p-ddin<F13pG; ,o de C,otto6F1pG d-shed H777777; E .i6<: p-ddin<F2pG; ,o de F1pG solid H777777; 9lo-tFle9t; 8idthF73pG; 6- <inF5pG; E Hlih-t: 6- <inF3pG -uto; p-ddin<F13pG; ,o de F1pG d-shed H777777; ,-ck< oundCcolo FH((BB33; cu so Fpointe ; 8idthF533pG; E .d-te : 9ontCsiMeF 13pG; lineChei<htF 135N; 9ontCst!leF it-lic; 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 ak irnya# $emoga bi"a membantu rekan!rekan yang kebetulan "edang menemui "tudi ka"u" yang "eru%a#