မျက်မှောက်ခေတ်အင်တာနက်ပေါ်တွင်ဝက်ဘ်ဆိုက်များ၏ဒီဇိုင်းနှင့်အပြန်အလှန်အကျိုးသက်ရောက်မှုရှိသောအတွေ့အကြုံသည်အသုံးပြုသူများကိုဆွဲဆောင်ခြင်းနှင့်ထိန်းသိမ်းခြင်းအတွက်အဓိကအချက်များဖြစ်လာသည်။ လိမ္မာပါးနပ်သောကာတွန်းသက်ရောက်မှုများမှတဆင့် 0 က်ဘ်ဆိုက်သည်အသုံးပြုသူများကိုပိုမိုချမ်းသာကြွယ်ဝသောအမြင်အာရုံအတွေ့အကြုံကိုယူဆောင်လာရုံသာမကဝက်ဘ်ဆိုက်၏အပြန်အလှန်အကျိုးသက်ရောက်မှုကိုတိုးတက်စေသည်။ ဤဆောင်းပါးသည်ဘုံကာတွန်းသက်ရောက်မှုအချို့ကိုအကောင်အထည်ဖော်ရန် PHP နှင့် CGI (General Gateway Interface) ကိုမည်သို့အသုံးပြုရမည်ကိုလေ့လာပြီးနမူနာကုဒ်ဖြင့်သရုပ်ပြပါမည်။
Carousel ဓါတ်ပုံများသည်ရုပ်ပုံများသို့မဟုတ်အကြောင်းအရာများစွာကိုပြသနိုင်သည့်ဘုံဝက်ဘ်ကာတွန်းသက်ရောက်မှုများထဲမှတစ်ခုဖြစ်သည်။ PHP နှင့် CGI ကိုအသုံးပြုခြင်းသည်ရိုးရှင်းသောနှင့်ထိရောက်သော carousel အကျိုးသက်ရောက်မှုကိုရရှိနိုင်ပါသည်။
<!DOCTYPE html>
<html>
<head>
<title>carousel ကာတွန်းအကျိုးသက်ရောက်မှု</title>
<style>
.slideshow-container {
position: relative;
}
.slideshow-container img {
display: none;
position: absolute;
top: 0;
left: 0;
}
</style>
</head>
<body>
<div class="slideshow-container">
<?php
$images = array("image1.jpg", "image2.jpg", "image3.jpg");
foreach ($images as $image) {
echo "<img src='images/{$image}' alt='ကာငြိုး'> ";
}
>
</div>
<script>
var slides = document.querySelectorAll(".slideshow-container img");
var currentSlide = 0;
function showSlide(n) {
slides[currentSlide].style.display = "none";
currentSlide = (n + slides.length) % slides.length;
slides[currentSlide].style.display = "block";
}
setInterval(function() {
showSlide(currentSlide + 1);
}, 2000);
</script>
</body>
</html>
ဤကုဒ်တွင်ရုပ်ပုံများပါ 0 င်သောနေရာများကိုပထမ ဦး ဆုံးသတ်မှတ်ပြီး PHP loop မှတဆင့်ပုံအမှတ်အသားများကိုထုတ်ယူသည်။ ထို့နောက် carousel အကျိုးသက်ရောက်မှုကိုထိန်းချုပ်ရန်အတွက် JavaScript ကို အသုံးပြု. `ပုံဖော်တစ်ခုစီကို 2 စက္ကန့်တိုင်းပြောင်းရန်` setrialerval` function ကိုသုံးပါ။
အကြောင်းအရာများကိုပြောင်းလဲရန်လိုအပ်သည့်ဝဘ်စာမျက်နှာများအတွက် PHP နှင့် CGI နည်းပညာများမှတဆင့် 0 ယ်လိုအားကိုတင်ရန် 0 ယ်လိုအားတိုးချဲ့ခြင်းကိုရရှိနိုင်ပါသည်။ ၎င်းသည်စာမျက်နှာပေါ်ရှိကန ဦး ဝန်ကို 0 န်ဆောင်မှုကိုထိထိရောက်ရောက်လျှော့ချနိုင်သည်။
<!DOCTYPE html>
<html>
<head>
<style>
#content {
width: 400px;
height: 200px;
overflow: auto;
}
</style>
</head>
<div id="content">
<?php
for ($i = 1; $i <= 10; $i++) {
echo "<p> လိုင်း {$ i} အကြောင်းအရာ</p> ";
}
>
</div>
<script>
var content = document.getElementById("content");
content.addEventListener("scroll", function() {
var scrollTop = content.scrollTop;
var scrollHeight = content.scrollHeight;
var clientHeight = content.clientHeight;
if (scrollTop + clientHeight >= scrollHeight) {
// dynamically ပိုပြီးအကြောင်းအရာတင်
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
content.innerHTML += xhr.responseText;
}
};
xhr.open("GET", "load_more.php?start=" + content.scrollHeight, true);
xhr.send();
}
});
</script>
</html>ဤဥပမာတွင် PHP မှတစ်ဆင့်အကြောင်းအရာ 10 လိုင်းကိုထုတ်ပေးသည်။ အသုံးပြုသူသည်အောက်ခြေသို့ကျမ်းလိပ်ကိုလှည့်သောအခါ JavaScript သည် `scroll` jave လုပ်ခြင်းကိုနားထောင်ပြီးအကြောင်းအရာများပိုမိုများပြားသောအကြောင်းအရာများနှင့် load ကိုတောင်းဆိုရန် XMLHTTHREQUESESE ကိုအသုံးပြုသည်။
PHP နှင့် CGI သည် 0 ဘ်ဆိုဒ်၏အသုံးပြုသူအတွေ့အကြုံနှင့်တက်ကြွမှုကိုသိသိသာသာတိုးမြှင့်ပေးနိုင်သည့် PHP နှင့် CGI တို့တွင် PHP နှင့် CGI တို့တွင်ကိရိယာများစွာပေးသည်။ ဤဆောင်းပါးတွင်မိတ်ဆက်ပေးသော Carousel နှင့် Dynamic Loading Content သည်အကောင်အထည်ဖော်မှုနည်းလမ်းနှစ်ခုသာဖြစ်သည်။ စင်စစ်အားဖြင့် developer များက 0 က်ဘ်ဆိုက်၏ဆွဲဆောင်မှုနှင့်အပြန်အလှန်ဆက်သွယ်မှုများကိုပိုမိုမြှင့်တင်ရန်အတွက် developer များပိုမိုကွဲပြားခြားနားသောကာတွန်းအကျိုးသက်ရောက်မှုများနှင့်အပြန်အလှန်လုပ်ဆောင်မှုများကိုဖန်တီးနိုင်သည်။