La ora actuală există soluții complete prin care poți integra formulare de comentarii pe site-uri. Acest site de exemplu, nu folosește formularul de comentarii implicit din WordPress, ci Disqus, o soluție matură și foarte populară prin care utilizatorii pot lăsa comentarii și reacții la conținutul tău. Totuși, există scenarii în care ai vrea să ai propriul sistem de management al comentariilor sau pur și simplu vrei să vezi cum funcționează, în principiu, un astfel de sistem. Acest tutorial, deși arată un exemplu concret în PHP, surprinde imaginea de ansamblu – modul în care poți privi sistemele de acest gen. Sunt multe tutoriale pe internet despre cum poți să îți faci un formular de comentarii, dar eu cel puțin nu am văzut unul care să prezinte în mod sistematic asta.
De aceea, în acest articol, vor încerca să fac lucrurile așa cum trebuie:
- voi prezenta prima oară fluxul de date, la nivel înalt (tot aici vom vedea o schemă a micului nostru sistem)
- de ce e util să privești un sistem de acest gen ca o serie de module cu funcțiuni specifice, ce sunt independente între ele (adică le-ai putea folosi și în altă parte, la altă problemă, fiindcă de fapt nu-s cuplate în vreun fel)
- la final, ne vom concentra pe un anumit limbaj de programare, ca să ne transpunem toate poveștile în ceva cod
Prima remarcă e că într-o astfel de problemă, nu limbajul de programare e important, ci modul în care te gândești la maniera în care informația este recepționată, transformată, stocată și afișată. Odată ce ai în minte o idee clară despre cum ai vrea să faci asta, restul devine un detaliu de implementare. PHP e doar o alegere, la fel de bună ca oricare alta – putea să fie Node, Python, Java, C++ sau orice alt limbaj de programare. Din motive istorice mai degrabă, m-am decis să fie PHP, fiindcă platforme populare de management al conținutului sunt scrise în PHP (WordPress, Drupal, Joomla etc.).
1. Arhitectura sistemului
Din fericire pentru noi, e un sistem foarte simplu, asa că și arhitectura reflectă acest lucru:
Un singur „actor” (așa se numește în mod abstract agentul care interacționează cu sistemul tău – poate fi un utilizator uman, dar de multe ori poate să fie alt sistem) care poate să adauge sau editeze comentarii, o componentă care „ascultă” după request-urile care le face utilizatorul, o componentă ORM (Object Relational Mapping) care creează la nivel abstract niște modele pentru diferitele tabele de MySQL și sistemul propriu zis de stocare a datelor, care va fi o bază de date relatională, MySQL.
De ce un ORM pentru ceva așa simplu?
Fiindcă pe termen lung, de foarte multe lucruri nu ești sigur, inclusiv de faptul că vei folosi MySQL. Peste cățiva ani poate te hotărăști să schimbi sistemul de gestiune a bazei de date, din MySQL în PostgreSQL. Ce-ai să faci atunci dacă tu ai scris o groază de cod, dependent de specificul sistemului MySQL – îți spun eu…dacă nu te-ai gândit de la început, ești în big trouble – o să ai foarte mult de lucru, doar ca să meargă ca înainte. Dacă ai fi avut un ORM și toate operațiile SQL se făceau cu ajutorul lui, la migrarea buclucașă ai fi avut muuuult mai puține probleme – fiindcă ar fi trebuit să faci modificări în puține locuri, din ORM cel mai probabil vs. peste tot și în locuri de care probabil ai și uitat.
Un alt motiv e modul în care arată codul atunci când folosești un ORM. E mult mai curat și clar – asta fiindcă folosești un singur limbaj de programare și nu îl poluezi peste tot cu cod SQL. Asta face codul mai ușor de înțeles, de testat și per ansamblu, mai puțin susceptibil la erori de tot felul.
2. Aplicația client (front-end)
Aici vom folosi ceva simplu, HTML, CSS si un pic de JavaScript pentru a face request-uri la aplicația server (backend). Prefer să folosesc Javascript pentru a face request-uri fiindcă în acest fel decuplez în totalitate frontend-ul de backend. Poate cel mai important avantaj aici e portabilitatea, la nivelul codului. Când spun asta, mă refer la abilitatea de a putea folosi aplicația client pe orice aplicație server, câtă vreme protocolul de comunicare impus de client este acelasi – cu alte cuvinte, câtă vreme API-ul oferit de backend nu se modifică, clientul nu va sti acest lucru, iar din acest motiv va funcționa la fel de bine.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Comments corner | code-it.ro</title>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We"
crossorigin="anonymous"
/>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js"
integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj"
crossorigin="anonymous"
></script>
<style type="text/css"></style>
<script>
const getValue = (elementID) =>
document.querySelector("#" + elementID).value;
const getFormValues = () => ({
firstName: getValue("firstName"),
lastName: getValue("lastName"),
comment: getValue("comment")
});
const submitComment = (event) => {
event.preventDefault();
fetch("/upsert_comment").then((response) =>
console.log(response)
);
};
</script>
</head>
<body>
<div class="container" style="max-width: 550px;">
<div class="row">
<div class="col">
<h1 id="nrOfComments">Comentarii</h1>
<p>Nu există comentarii</p>
</div>
</div>
<hr />
<div class="vstack gap-3">
<input
type="text"
class="form-control"
id="firstName"
placeholder="First name"
aria-label="First name"
/>
<input
type="text"
id="lastName"
class="form-control"
placeholder="Last name"
aria-label="Last name"
/>
<textarea
class="form-control"
placeholder="Comment"
aria-label="Comment"
id="comment"
>
</textarea>
<div class="d-md-block">
<button
type="submit"
class="btn btn-primary"
onclick="submitComment(event)"
>
Postează
</button>
</div>
</div>
</div>
</body>
</html>
Dacă toate sunt bune ar trebui să obținem ceva similar cu ce se vede mai jos:
Am ales să folosesc Bootstrap, ca să nu deviez de la scopul articolului si să ajung într-o spirală în care vorbesc doar de CSS, HTML si JavaScript. Pe aplicație se vor putea vizualiza comentariile existente, iar la final va fi formularul de comentarii de unde vei putea posta sau edita comentariile tale.