Indonesian (Bahasa Indonesia) translation by ⚡ Rova Rindrata (you can also view the original English article)
Saat bekerja melalui galeri web, saya merasa menjengkelkan saat harus mengubah halaman; jadi di tutorial hari ini, kita akan belajar membuat galeri bergulir otomatis satu halaman dengan PHP dan AJAX. Mari kita mulai!
Langkah 1: Garis Besar Proyek
Kita akan memulai dengan halaman galeri normal yang memiliki kontainer untuk gambar kita, dan kita akan memantau posisi gulir dengan memanggil fungsi JavaScript pada interval cepat. Setiap kali bar gulir berada di dekat bagian bawah, kita akan membuat permintaan AJAX ke file PHP eksternal, yang mengembalikan daftar nama gambar. Sekarang, yang perlu kita lakukan adalah menambahkan gambar ini ke kontainer kita, sehingga memodifikasi tinggi halaman memindahkan posisi gulir lebih tinggi.
Langkah 2: Markup HTML
Kami akan bekerja dengan penyiapan yang sangat mendasar: header dan kontainer untuk gambar kita. Thumbnail akan dikelompokkan dalam rangkaian tiga baris, masing-masing akan berisi tautan, mereferensi gambar ukuran penuh. Setelah setiap grup, kami akan menambahkan beberapa teks yang menunjukkan jumlah gambar yang ditampilkan, dan tautan ke bagian atas halaman.
1 |
<body>
|
2 |
<div id="header">Web Gallery | Infinite Scroll</div> |
3 |
<div id="container"> |
4 |
<a href="img/Achievements.jpg"><img src="thumb/Achievements.jpg" /></a> |
5 |
<a href="img/Bw.jpg"><img src="thumb/Bw.jpg" /></a> |
6 |
<a href="img/Camera.jpg"><img src="thumb/Camera.jpg" /></a> |
7 |
<a href="img/Cat-Dog.jpg"><img src="thumb/Cat-Dog.jpg" /></a> |
8 |
<a href="img/CREATIV.jpg"><img src="thumb/CREATIV.jpg" /></a> |
9 |
<a href="img/creativ2.jpg"><img src="thumb/creativ2.jpg" /></a> |
10 |
<a href="img/Earth.jpg"><img src="thumb/Earth.jpg" /></a> |
11 |
<a href="img/Endless.jpg"><img src="thumb/Endless.jpg" /></a> |
12 |
<a href="img/EndlesSlights.jpg"><img src="thumb/EndlesSlights.jpg" /></a> |
13 |
|
14 |
<p>9 Images Displayed | <a href="#header">top</a></p> |
15 |
<hr /> |
16 |
</div>
|
17 |
</body>
|
Langkah 3: CSS
CSS juga cukup mendasar. Pertama, kita mendefinisikan warna dan posisi halaman untuk header dan paragraf.
1 |
body{ |
2 |
background:#222; |
3 |
color:#666; |
4 |
}
|
5 |
#header{ |
6 |
font-family:Arial, Helvetica, sans-serif; |
7 |
font-size:24px; |
8 |
font-weight:bold; |
9 |
text-align:left; |
10 |
text-indent:35px; |
11 |
margin: 0 auto; |
12 |
width:800px; |
13 |
margin-bottom:10px; |
14 |
}
|
15 |
hr{ |
16 |
margin: 20px; |
17 |
border:none; |
18 |
border-top: 1px solid #111; |
19 |
border-bottom: 1px solid #333; |
20 |
}
|
21 |
p{ |
22 |
color:#444; |
23 |
text-align:left; |
24 |
font-size:10px; |
25 |
margin-left: 20px; |
26 |
margin-bottom: -10px; |
27 |
}
|
28 |
a{ |
29 |
color:#444; |
30 |
}
|
Langkah 4
Kemudian, untuk kontainer dan gambar, saya menggunakan sedikit CSS3 untuk menambahkan sudut membulat dan bayangan. Jangan lupa "-moz-box-shadow" dan "-moz-border-radius" untuk Firefox dan "-webkit-box-shadow" dan "-webkit-border-radius" untuk Chrome dan Safari.
1 |
#container{ |
2 |
margin: 0 auto; |
3 |
width:800px; |
4 |
border:1px solid #333; |
5 |
-moz-border-radius: 10px; |
6 |
-webkit-border-radius: 10px; |
7 |
font-family:Verdana, Geneva, sans-serif; |
8 |
text-align:center; |
9 |
}
|
10 |
img{ |
11 |
border:10px solid #444; |
12 |
-moz-border-radius: 5px; |
13 |
-webkit-border-radius: 10px; |
14 |
margin: 15px; |
15 |
}
|
16 |
img:hover{ |
17 |
border-color:#555; |
18 |
-moz-box-shadow: 0px 0px 15px #111; |
19 |
-webkit-box-shadow: 0px 0px 15px #111; |
20 |
}
|
Langkah 5: Skrip PHP
Ini akan sangat singkat. Kita perlu memanggil skrip PHP dengan indeks gambar berikutnya yang kita butuhkan sebagai parameter. Pertama-tama, kita harus mengambil semua nama gambar yang ada dari sebuah direktori dan menyimpannya ke dalam sebuah array. Saya mengatur gambar saya dalam dua folder: "thumb" dan "img" yang berisi thumbnail dan gambar sebenarnya. Perhatikan bahwa thumbnail harus memiliki nama yang sama persis dengan gambar ukuran penuh yang sesuai.
1 |
<?php
|
2 |
|
3 |
$dir = "thumb"; |
4 |
if(is_dir($dir)){ |
5 |
if($dd = opendir($dir)){ |
6 |
while (($f = readdir($dd)) !== false) |
7 |
if($f != "." && $f != "..") |
8 |
$files[] = $f; |
9 |
closedir($dd); |
10 |
}
|
Kami mendefinisikan sebuah variabel untuk direktori yang ingin kita dapatkan nama gambar darinya, uji jika ada, dan jika kita dapat membukanya, membaca semua nama file dari situ. Saat membaca keseluruhan folder, kita akan selalu mendapatkan dua elemen tambahan yang mungkin tidak kita inginkan: "." - ini singkatan dari direktori saat ini, dan ".." - ini singkatan dari direktori induk. Untuk kompensasinya, kita harus menguji apakah elemen yang dibaca berbeda dari keduanya, maka kita bisa menambahkannya ke array kita dengan aman.
1 |
$files[] = $f; |
Sebagai catatan, saat menambahkan elemen ke array dan tidak menentukan posisi yang akan ditempatkan, ia akan selalu mem-push elemen ke akhir array.
Langkah 6
Sekarang kita harus membangun teks tanggapan kita. Kita akan mengirim kembali ke string JavaScript tunggal yang berisi semua nama file yang diperlukan yang dipisahkan oleh tanda titik koma.
1 |
$n = $_GET["n"]; |
2 |
$response = ""; |
Kita mendapatkan parameter URL untuk indeks gambar berikutnya yang kita butuhkan, dan kita menginisialisasi teks tanggapan kita.
1 |
|
2 |
for($i = $n; $i<$n+9; $i++) |
3 |
$response = $response.$files[$i%count($files)].';'; |
4 |
echo $response; |
5 |
}
|
6 |
?>
|
Seperti yang saya katakan sebelumnya, gambar akan dikelompokkan dalam rangkaian tiga baris, masing-masing berisi tiga gambar, jadi kita hanya memerlukan sembilan gambar untuk mengembalikan nama file untuk sebuah grup. Kita mulai dari indeks yang kita dapatkan sebagai parameter, $n, dan pergi sampai $n+9. Pada setiap kenaikan, kita menambahkan nama gambar kita diikuti oleh ";" ke teks tanggapan. Inilah bagian yang sedikit rumit. Kita tidak akan memiliki jumlah gambar yang tak terbatas; jadi untuk menciptakan efek galeri "tak terbatas" yang tidak pernah berakhir, setiap kali indeks gambar berikutnya lebih besar dari jumlah total gambar, kita harus memulai dari awal. Hal ini dilakukan dengan menerapkan fungsi "modulo" atau "%" antara indeks dan jumlah gambar.
1 |
$i%count($files) |
Hasilnya, kita mendapatkan sisa pembagian antara kedua elemen ini. Misalnya, jika indeks "$i" adalah "50" dan jumlah gambar "count($ iles)" adalah "45" hasilnya akan menjadi "5". Selain itu, jika "$i" adalah "50" dan "count($files)" adalah "65", hasilnya akan "50". Akhirnya, kita harus mengirim kembali teks tanggapan kita.
Langkah 7
Berikut adalah skrip PHP yang lengkap. Cukup letakkan kode lengkap Anda dalam file .php baru.
1 |
<?php
|
2 |
|
3 |
$dir = "thumb"; |
4 |
if(is_dir($dir)){ |
5 |
if($dd = opendir($dir)){ |
6 |
while (($f = readdir($dd)) !== false) |
7 |
if($f != "." && $f != "..") |
8 |
$files[] = $f; |
9 |
closedir($dd); |
10 |
}
|
11 |
|
12 |
|
13 |
$n = $_GET["n"]; |
14 |
$response = ""; |
15 |
for($i = $n; $i<$n+9; $i++){ |
16 |
$response = $response.$files[$i%count($files)].';'; |
17 |
}
|
18 |
echo $response; |
19 |
}
|
20 |
?>
|
Langkah 8: JavaScript
Seperti biasa, pertama kita mendefinisikan beberapa variabel yang akan kita butuhkan nanti.
1 |
var contentHeight = 800; |
2 |
var pageHeight = document.documentElement.clientHeight; |
3 |
var scrollPosition; |
4 |
var n = 10; |
5 |
var xmlhttp; |
Untuk menentukan apakah bar gulir berada di dekat bagian bawah halaman, kita memerlukan tiga variabel:
- "contentHeight" - ketinggian galeri awal
- "pageHeight" - ketinggian halaman yang terlihat di browser
- "scrollPosition" - posisi bar gulir yang diukur dari atas
Terakhir, kita membutuhkan variabel untuk indeks gambar berikutnya (yang akan kita kirim ke skrip PHP), dan sebuah variabel untuk objek permintaan Ajax.
Langkah 9
Kita perlu mendefinisikan fungsi yang akan menambahkan gambar ke kontainer HTML kita.
1 |
function putImages(){ |
2 |
if (xmlhttp.readyState==4){ |
3 |
if(xmlhttp.responseText){ |
Objek permintaan melewati kondisi yang berbeda saat permintaan dibuat, yang masing-masing memiliki nilai numerik yang terkait. Yang kita minati adalah keadaan akhir, saat permintaan selesai dan nilainya "4". Kita pertama kali menguji apakah permintaan itu ada di kondisi ini, lalu periksa apakah kita menerima sebuah tanggapan.
Langkah 10
Jika kedua kondisi terpenuhi, kita harus memberi token pada teks respon. Ini berarti kita harus memisahkan nama file menjadi array. Ingat bahwa dalam skrip PHP kita mengembalikan satu string dengan nama yang dipisahkan oleh titik koma. Berikut adalah contohnya: Achievements.jpg;Bw.jpg;Camera.jpg;Cat-Dog.jpg;CREATIV.jpg;creativ2.jpg;Earth.jpg;Endless.jpg;EndlesSlights.jpg;
1 |
var resp = xmlhttp.responseText.replace("\r\n", ""); |
2 |
var files = resp.split(";"); |
Ada sedikit masalah yang harus kita hadapi terlebih dahulu; teks tanggapan pada mulanya memiliki karakter baris baru yang tidak kita inginkan. Ini mudah diperbaiki dengan fungsi "replace", yang mengambil dua parameter: "\r\n" - karakter baris baru, dan "" - string kosong yang akan menggantikan semua kemunculan parameter pertama. Sekarang yang harus kita lakukan adalah membagi string dengan pembatas kita ";".
Langkah 11
Selanjutnya, kita harus menambahkan gambar ke kontainer kita.
1 |
var j = 0; |
2 |
for(i=0; i<files.length; i++){ |
3 |
if(files[i] != ""){ |
4 |
document.getElementById("container").innerHTML += '<a href="img/'+files[i]+'"><img src="thumb/'+files[i]+'" /></a>'; |
5 |
j++; |
6 |
|
7 |
if(j == 3 || j == 6) |
8 |
document.getElementById("container").innerHTML += ''; |
9 |
else if(j == 9){ |
10 |
document.getElementById("container").innerHTML += '<p>'+(n-1)+" Images Displayed | <a href='#header'>top</a></p><hr />"; |
11 |
j = 0; |
12 |
}
|
13 |
}
|
14 |
}
|
Untuk setiap elemen dalam array kita, kita memeriksa apakah itu bukan string kosong, dan menambahkan thumbnail dengan tautan di dalamnya. Kita harus menyimpan counter "j" untuk memisahkan gambar dalam baris. Setelah setiap thumbnail ketiga dan enam ditambahkan, kita membuat baris baru, dan setelah sembilan thumbnail ditambahkan, kita menempatkan teks yang menunjukkan jumlah gambar yang ditampilkan dan tautan ke bagian atas halaman.
Langkah 12
Berikut adalah fungsi yang lengkap.
1 |
function putImages(){ |
2 |
if (xmlhttp.readyState==4){ |
3 |
if(xmlhttp.responseText){ |
4 |
var resp = xmlhttp.responseText.replace("\r\n", ""); |
5 |
var files = resp.split(";"); |
6 |
|
7 |
var j = 0; |
8 |
for(i=0; i<files.length; i++){ |
9 |
if(files[i] != ""){ |
10 |
document.getElementById("container").innerHTML += '<a href="img/'+files[i]+'"><img src="thumb/'+files[i]+'" /></a>'; |
11 |
|
12 |
j++; |
13 |
if(j == 3 || j == 6) |
14 |
document.getElementById("container").innerHTML += ''; |
15 |
else if(j == 9){ |
16 |
document.getElementById("container").innerHTML += '<p>'+(n-1)+" Images Displayed | <a href='#header'>top</a></p><hr />"; |
17 |
j = 0; |
18 |
}
|
19 |
}
|
20 |
}
|
21 |
}
|
22 |
}
|
23 |
}
|
Langkah 13
Sekarang kita akan menentukan fungsi yang akan memeriksa apakah posisi gulir semakin dekat ke bawah, dan membuat permintaan ke server.
1 |
function scroll(){ |
2 |
|
3 |
if(navigator.appName == "Microsoft Internet Explorer") |
4 |
scrollPosition = document.documentElement.scrollTop; |
5 |
else
|
6 |
scrollPosition = window.pageYOffset; |
Pertama, kita harus mencari posisi bar gulir. Internet Explorer melakukan ini sedikit berbeda, jadi kita harus menentukan browser apa yang digunakan klien, lalu simpan saja nilainya di variabel yang kita definisikan tadi.
Langkah 14
1 |
if((contentHeight - pageHeight - scrollPosition) < 500){ |
Sekarang kita periksa untuk melihat apakah kita akan mencapai akhir galeri kita - jika bagian halaman yang terlihat di browser berada di bawah 500px terbawah dari keseluruhan halaman. Ini bukan nilai pasti, Anda bisa menggunakan yang berbeda jika Anda merasa cocok. Jika kondisi ini true, kita bisa melanjutkan dan menambahkan gambar baru.
Langkah 15: Membuat Objek XMLHttpRequest
Kita siap untuk membuat objek XMLHttpRequest dan mengirimkannya. Sekali lagi, untuk Internet Explorer definisinya sedikit berbeda, jadi kita harus mengimbangi hal ini juga.
1 |
if(window.XMLHttpRequest) |
2 |
//Firefox, Opera, Safari
|
3 |
xmlhttp = new XMLHttpRequest(); |
4 |
else
|
5 |
if(window.ActiveXObject) |
6 |
//Internet Explorer
|
7 |
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); |
8 |
else
|
9 |
alert ("Bummer! Your browser does not support XMLHTTP!"); |
Langkah 16
Sebelum mengirim permintaan, kita harus menentukan nama skrip PHP di server dan memasukkan parameter yang ingin kita berikan.
1 |
var url="getImages.php?n="+n; |
Ini adalah variabel teks sederhana yang mewakili URL halaman.
Langkah 17
Sudah waktunya mengirim permintaan.
1 |
xmlhttp.open("GET",url,true); |
2 |
xmlhttp.send(); |
URL diatur dengan memanggil metode "open". Parameter kedua adalah yang penting, ini adalah URL skripnya. Setelah melakukannya, yang kita butuhkan hanyalah mengirimkannya. Ini akan menjalankan skrip PHP dan dimasukkan ke dalam "xmlhttp.responseText" nilai kembaliannya.
Langkah 18
Langkah terakhir adalah menempatkan konten baru di halaman dengan memanggil fungsi yang telah kita definisikan sebelumnya "putImages" dan untuk mempersiapkan variabel kita untuk permintaan berikutnya.
1 |
n += 9; |
2 |
contentHeight += 800; |
3 |
xmlhttp.onreadystatechange = putImages; |
4 |
}
|
5 |
}
|
Kita memiliki sembilan gambar baru di galeri, jadi kita menambahkan "n" dengan 9, dan kita perlu mengubah tinggi halaman; jadi naikkan "contentHeight" dengan 800.
Langkah 19
Berikut adalah keseluruhan JavaScript yang telah kita gunakan.
1 |
<script> |
2 |
var contentHeight = 800; |
3 |
var pageHeight = document.documentElement.clientHeight; |
4 |
var scrollPosition; |
5 |
var n = 10; |
6 |
var xmlhttp; |
7 |
|
8 |
function putImages(){ |
9 |
|
10 |
if (xmlhttp.readyState==4) |
11 |
{
|
12 |
if(xmlhttp.responseText){ |
13 |
var resp = xmlhttp.responseText.replace("\r\n", ""); |
14 |
var files = resp.split(";"); |
15 |
var j = 0; |
16 |
for(i=0; i<files.length; i++){ |
17 |
if(files[i] != ""){ |
18 |
document.getElementById("container").innerHTML += '<a href="img/'+files[i]+'"><img src="thumb/'+files[i]+'" /></a>'; |
19 |
j++; |
20 |
|
21 |
if(j == 3 || j == 6) |
22 |
document.getElementById("container").innerHTML += ''; |
23 |
else if(j == 9){ |
24 |
document.getElementById("container").innerHTML += '<p>'+(n-1)+" Images Displayed | <a href='#header'>top</a></p><hr />"; |
25 |
j = 0; |
26 |
}
|
27 |
}
|
28 |
}
|
29 |
}
|
30 |
}
|
31 |
}
|
32 |
|
33 |
|
34 |
function scroll(){ |
35 |
|
36 |
if(navigator.appName == "Microsoft Internet Explorer") |
37 |
scrollPosition = document.documentElement.scrollTop; |
38 |
else
|
39 |
scrollPosition = window.pageYOffset; |
40 |
|
41 |
if((contentHeight - pageHeight - scrollPosition) < 500){ |
42 |
|
43 |
if(window.XMLHttpRequest) |
44 |
xmlhttp = new XMLHttpRequest(); |
45 |
else
|
46 |
if(window.ActiveXObject) |
47 |
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); |
48 |
else
|
49 |
alert ("Bummer! Your browser does not support XMLHTTP!"); |
50 |
|
51 |
var url="getImages.php?n="+n; |
52 |
|
53 |
xmlhttp.open("GET",url,true); |
54 |
xmlhttp.send(); |
55 |
|
56 |
n += 9; |
57 |
xmlhttp.onreadystatechange=putImages; |
58 |
contentHeight += 800; |
59 |
}
|
60 |
}
|
61 |
|
62 |
</script> |
Langkah 20
Hal terakhir yang harus kita lakukan adalah menjalankan JavaScript pada interval tertentu.
1 |
<body onload="setInterval('scroll();', 250);"> |
Cukup atur properti "onload" dari tag "body", dan tetapkan nilainya ke fungsi "setInterval". Ini akan menjalankan fungsi "scroll" setiap seperempat detik. Sekali lagi, Anda bisa mengubah nilai waktu ini, tapi saya merasa itulah yang optimal untuk apa yang kita butuhkan.
Jadi!
Kita selesai! Semoga tutorial ini bisa membantu dan berguna. Silakan meninggalkan pesan di bagian komentar di bawah ini, jika Anda memerlukan bantuan atau saran lebih lanjut.
By
