Theory
Reload વગરની શોધ
Portal નો આયોજક કોઈ નોંધાયેલા વ્યક્તિનું નામ લખતાં જ, અક્ષરે અક્ષરે, મેળ ખાતાં નામ તરત જ જોવા માગે છે, અને એ પણ page ફરી load થયા વગર. પરંપરાગત PHP નું form દરેક શોધ વખતે આખું page ફરી load કરે: ધીમું અને ખટકે એવું.
એનો ઉપાય તમે BCA405-01 માં જોઈ ચૂક્યા છો: AJAX, જ્યાં browser નું JavaScript પડદા પાછળ server સાથે વાત કરે છે. ત્યારે server એટલે Node હતું; હવે એ તમારું PHP છે. આ પાઠ આખું full-stack ચક્ર પૂરું કરે છે: JavaScript વાળું front-end, PHP વાળું back-end, અને એમની વચ્ચે વહેતું JSON, અને એ પણ તમે હમણાં જ શીખેલાં prepared statements તથા json_encode વાપરીને.
Theory
AJAX થી PHP સુધીનું ચક્ર
આ ઢબમાં 4 પગથિયાં છે, જે તારની બંને બાજુએ ફેલાયેલાં છે:
1. Browser (JS): કોઈ ઘટના (શોધના ખાનામાં ટાઇપ થવું) PHP ના endpoint પર પડદા પાછળનો request મોકલે છે, અને સાથે શોધનો શબ્દ મોકલે છે
2. Server (PHP): $_GET કે $_POST માંથી input વાંચે છે, MySQL પર prepared query ચલાવે છે, અને json_encode દ્વારા પરિણામો JSON તરીકે છાપે છે
3. Browser (JS): JSON મેળવે છે, એને વાંચે છે, અને મળેલા મેળ પ્રમાણે DOM બદલે છે
4. Page ફરી load થતું જ નથી: ફક્ત પરિણામોનો વિસ્તાર બદલાય છે
તમે જાણો છો તે બધું અહીં ભેગું થાય છે: BCA405-01 નું AJAX, આ unit નાં prepared statements, અને json_encode. PHP તો ફક્ત એ જ ભૂમિકા ભજવે છે જે પહેલાં Node ભજવતું હતું.
Practical
search.php: PHP નું endpoint JSON પાછું આપે છે
<?php
$db = new mysqli("localhost", "root", "", "portal");
$q = $_GET["q"] ?? "";
// Prepared statement with a LIKE search (still injection-safe)
$stmt = $db->prepare("SELECT name FROM regs WHERE name LIKE ? LIMIT 10");
$term = "%" . $q . "%";
$stmt->bind_param("s", $term);
$stmt->execute();
$res = $stmt->get_result();
$names = [];
while ($row = $res->fetch_assoc()) {
$names[] = $row["name"];
}
header("Content-Type: application/json");
echo json_encode($names); // e.g. ["Riya","Rahul"]
?>
Practical
Browser બાજુ (ખયાલ; ખરા page માં ચલાવવું)
// As the user types, fetch matches from search.php WITHOUT reloading
function liveSearch(query) {
fetch("search.php?q=" + encodeURIComponent(query))
.then(function (response) { return response.json(); }) // parse JSON
.then(function (names) {
// names is the array PHP sent, e.g. ["Riya", "Rahul"]
const list = names.map(function (n) { return "<li>" + n + "</li>"; });
document.getElementById("results").innerHTML = list.join("");
});
}
// The page never reloads; only #results changes.
This example runs in Gri-Learn on the web, where you can edit it and see the output.
Quiz
AJAX વાળી શોધમાં PHP નું endpoint JavaScript ને શું પાછું મોકલે છે, અને કઈ રીતે?
- આખું નવું HTML page, જે ચાલુ page ની જગ્યા લે છે
- ફક્ત data (જેમ કે મેળ ખાતાં નામ) json_encode દ્વારા JSON તરીકે, જેને JavaScript વાંચીને page નો એક ભાગ બદલે છે
- કશું નહીં: AJAX આખું browser માં જ ચાલે છે
- કાચું MySQL નું connection object
Show the answer
ફક્ત data (જેમ કે મેળ ખાતાં નામ) json_encode દ્વારા JSON તરીકે, જેને JavaScript વાંચીને page નો એક ભાગ બદલે છે
PHP નું endpoint ફક્ત data (મેળ ખાતાં નામ) json_encode વાપરીને JSON તરીકે પાછું આપે છે, અને JavaScript એ JSON વાંચીને page નો ફક્ત સંબંધિત ભાગ (પરિણામોની યાદી) બદલે છે, અને page ફરી load થતું નથી: AJAX નો આખો હેતુ એ જ છે. વિકલ્પ A પરંપરાગત આખા page ના request નું વર્ણન છે, જેને AJAX ટાળે છે. વિકલ્પ C ખોટો છે: AJAX માં તો ખાસ કરીને SERVER ને (અહીં PHP ને) પડદા પાછળનો request જાય જ છે. વિકલ્પ D અર્થહીન છે: connection object કદી server ની બહાર જતું નથી. ચક્ર આવું છે: JS પૂછે, PHP JSON થી જવાબ આપે, JS DOM બદલે: BCA405-01 જેવી જ ઢબ, પણ હવે back-end તરીકે PHP.
Think first
એ જ ચક્ર, બીજું back-end
BCA405-01 માં તમારી AJAX વાળી જીવંત શોધનો જવાબ Node.js આપતું હતું. હવે એ જ front-end ની ઢબનો જવાબ PHP આપે છે. Front-end અને back-end નો સંબંધ કેવો છે એ વિશે આ શું બતાવે છે? વિચારીને પછી tap કરો.
Show the answer
એ બતાવે છે કે front-end અને back-end એકબીજાથી છૂટાં છે: browser ના JavaScript ને એની પરવા નથી કે જવાબ કઈ ભાષા આપે છે, એને તો ફક્ત JSON પાછું મળવું જોઈએ. એ જ fetch કરીને બદલવાનો code Node, PHP, Python કે બીજો કોઈ પણ server જવાબ આપે તો પણ ચાલે છે, જ્યાં સુધી જવાબ JSON હોય. આધુનિક વેબ ના સ્થાપત્યની આ મુખ્ય સમજ છે: સાફ કરાર (અંદર HTTP નો request, બહાર JSON) બંને બાજુને સ્વતંત્ર રીતે વિકસવા અને જુદી જુદી ભાષાઓમાં બંધાવા દે છે. તમે હવે એ જ જીવંત શોધ 2 જુદાં back-ends સામે લખી છે: એ પુરાવો છે કે ચક્ર એક વાર સમજાઈ જાય પછી back-end ની ભાષા બદલી શકાય એવી વિગત માત્ર છે. આ જ ખસેડી શકાવાપણાને લીધે વેબ પર JSON વાળી APIs નું રાજ છે.
Watch out
AJAX થી PHP સુધીના ફાંદા
Prepared statements છોડી દેવાં: AJAX નું endpoint પણ વપરાશકારનું લખાણ લે છે; ત્યાં પણ parameters bind કરો (request AJAX થી આવ્યો છે એની injection ને પરવા નથી).
Content-Type: application/json ન ગોઠવવું: browser response ને ખોટી રીતે વાંચી શકે છે.
વપરાશકારના લખાણમાંથી HTML છાપવું: એને escape કરો; AJAX નાં endpoints પણ બીજા page ની જેમ XSS સામે નબળાં છે.
encodeURIComponent ભૂલી જવું: query માંના ખાસ અક્ષરો URL ને તોડી નાખે છે.
દરેક કળ દબાય ત્યારે અટકી જવું: દરેક કળ પર ભારે queries ચલાવવાથી ધીમાશ આવે; ખરી apps debounce કરે છે.
Theory
Scripts ચાલે છે; હવે framework
Portal હવે full-stack app છે: PHP, MySQL, AJAX અને JSON. પણ એ છૂટા scripts નો ઢગલો છે, અને ખરી ટીમો મોટી apps ને છૂટી files તરીકે બાંધતી નથી. એ માળખું લાદતું FRAMEWORK વાપરે છે. Unit 3 ના છેલ્લા 2 પાઠ portal ને CodeIgniter (CI4) પર ફરી બાંધે છે, જે બધું MVC ઢબમાં ગોઠવે છે: Models (data), Views (pages), Controllers (logic), સાથે routing પણ. Scripts થી વ્યાવસાયિક માળખા સુધી.
Summary
Key takeaways
- AJAX browser ના JavaScript ને page ફરી load કર્યા વગર તમારા PHP ને પડદા પાછળના requests મોકલવા દે છે.
- ચક્ર: JS request મોકલે, PHP input વાંચે, MySQL પર prepared query ચલાવે, json_encode(પરિણામો) છાપે, અને JS એને વાંચીને DOM બદલે.
- વપરાશનો દાખલો: જીવંત શોધ, જ્યાં વપરાશકાર ટાઇપ કરે એમ પરિણામો દેખાય છે.
- PHP નું endpoint ફક્ત data JSON તરીકે પાછું આપે છે, આખું page નહીં; page નો ફક્ત એક ભાગ બદલાય છે.
- AJAX નાં endpoints ને પણ prepared statements અને output નું escaping જોઈએ જ: વપરાશકારનું લખાણ છેવટે વપરાશકારનું જ છે.
- Front-end અને back-end છૂટાં છે: એ જ JS Node (BCA405-01) સામે ચાલ્યું અને હવે PHP સામે પણ ચાલે છે.
- યાદ રાખવાની કડી: JS પૂછે, PHP JSON થી જવાબ આપે, અને page જગ્યાએ ને જગ્યાએ બદલાય.