Salutare si bine v-am regasit, astazi vom vorbii despre cum poti sa creezi un site web, de la 0. Pentru a usura munca voastra (si a mea), am impartit acest subiect – “Cum pot creea un site web” in cateva tutoriale scurte.
In ce vom programa?
Vom programa in PHP (folosind framework-ul CodeIgniter). Pentru gestiunea bazei de date vom folosii MySQL. De asemenea, pentru a aranja elementului site-ului ne vom folosii de HTML.
GitHub: Atestat-CodeIgniter
Ce trebuie sa am instalat?
Inainte de a incepe munca, asigura-te ca ai instalat:
- XAMPP (download: aici) – merge si WAMPP, sau orice alt program care iti deschide un server Apache in calculator
- Editor de fisiere php – eu lucrez cu phpStorm, dar si Visual Studio Code / Notepad++ sunt la fel de utile
- CodeIgniter (download: aici) – vom folosii versiunea 3.1.9
Dupa ce ai instalat XAMPP, trebuie sa downloadezi CodeIgniter si sa dezarhivezi arhiva in folder-ul unde pui in mod normal fisierele php.
Daca ati facut ceea ce trebuie, si accesati folderul CodeIgniter intr-un browser, o sa obtineti ceva de genul acesta:
CodeIgniter instalat cu succes
Ce este CodeIgniter?
CodeIgniter este un framework PHP care este folosit pentru a dezvolta mai usor site-urile. Cu ajutorul acestuia puteti sa dezvoltati aceeasi aplicatie intr-un timp mult mai scurt. Arhitectura acestui framework este cea de mai jos:
La fel cum arata si in figura, fiecare accesare pe care aplicatia noastra o primeste va fi gestionata de index.php.
- In cel de-al doilea pas, “Routing” (sau rutarea) va decide daca sa continue catre Cache sau daca il verifica mai amanuntit (Security)
- Daca pagina ceruta se afla deja in Cache, se va afisa direct catre utilizator pagina finala
Structura folderelor
Aplicatia noastra web este structurata in 3 foldere mari:
- Application
- System
- User_guide
Structura folderelor in CodeIgniter
Application
Asa cum sugereaza si numele, acest folder contine tot codul site-ului ce il vom construii. Acest folder contine urmatoarele subfoldere
- Cache – Acest folder contine toate paginile cache-uite. Aceste pagina imbunatatesc viteza de incarcare a website-ului tau
- Config – Acest folder contine diferite fisiere pentru configurarea site-ului. Cu ajutorul fisierului config.php se pot gestiona mai multe setari folositoare. De asemenea, folosind fisierul database.php se poate configura conexiunea catre baza de date
- Controllers – Acest folder contine toate controller-ele site-ului. Face parte din scheletul arhitecturii MVC (discutam despre asta mai tarziu)
- Core – In acest folder se afla clasa de baza a aplicatiei noastre
- Helpers – Aici putem pune clasele helper ale aplicatiei noastre (nu o vom folosii foarte des)
- Hooks – Cu ajutorul fisierelor din acest folder poti interactiona direct cu framework-ul, daca ai nevoie de anumite modificari interioare.
- Language – Acest folder contine toate chestile legate de limbi.
- Libraries – Acest folder contine toate librariile folosite pentru aplicatie.
- Logs – In acest folder gasim log-urile aplicatiei noastre
- Models – Interogarile catre baza de date vor fi plasate in acest folder
- Third_party – In acest folder puteti pune plugin-urile ce vor interactiona cu aplicatia
- Views – Fisierele HTML ale website-ului vor fi plasate aici
System
Acest folder contine codul de baza al CodeIgniter, librarii, helpere si alte fisiere ce fac programarea mai usoara. Acest folder este impartit in urmatoarele sub-foldere:
- Core – Acest folder contine inima CodeIgniter-ului. Nu modifica nimic din ce este aici. Toata munca ta se va desfasura in folderul Application. Chiar daca doresti sa modifici inima framework-ului, vei fi nevoit sa o faci folosind hook-urile.
- Database – Contine fisiere ce gestioneaza baza de date
- Fonts – Fisiere ce contin informatii legate de fonturi
- Helpers – Helpere standard CodeIgniter (precum cookie-urile)
- Language – Fisiere ce au legatura cu limba. Putem ignora acest folder
- Libraries – Contine librariile standard (e-mail, calendar, functia de upload, etc)
User_guide
Acesta este ghidul tau de utilizator CodeIgniter. Practic, este versiunea offline a ghidului de pe website. Folosind asta, puteti invata diferite functii, librarii, helpere sau clase. Este recomandat sa parcurgi acest ghid inainte de a construii prima ta aplicatie in CodeIgniter.
Pe langa aceste 3 foldere, mai gasiti un fisier “index.php” – fisier ce este foarte important. In acest fisier putem seta modul de functionare al aplicatiei, raportarea erorilor si putem definii mai multe lucruri. Este recomandat sa nu editezi aceste setari daca nu ai suficiente cunostiinte despre ceea ce faci.
Arhitectura MVC? Ce este Model-View-Controller?
Am spus mai sus ca framework-ul nostru, CodeIgniter, se bazeaza pe modelul Model-View-Controller. MVC este o metoda de abordare a programului, ce separa logica aplicatiei de prezentarea ei efectiva. In practica, permite paginilor tale web sa contina nivelul minim de programare, deoarece design-ul paginii este despartita de partea PHP.
Arhitectura MVC
- Model – Aici este reprezentata structura ta de date. Aici de obicei iti modelezi clasele si functiile ce te ajuta cu procesarea, inserarea si updatarea informatiilor din baza de date.
- View – Aici este prezentata informatia catre utilizator. Un fisier de aici este o pagina web normala, dar in CodeIgniter, un fisier din view poate sa fie de-asemenea un fragment, precum un header sau un footer.
- Controller – Actioneaza ca un intermediar intre Model si View, orice alte resurse necesare pentru a procesa si genera pagina se afla aici.
Controllerele
Un controller este un simplu fisier ce foloseste o clasa. Asa cum numele sugereaza, controleaza toata aplicatia prin URL.
Cum creezi un controller?
Prima oara, du-te in folderul application/controllers. Vei gasii acolo doua fisiere: index.html si Welcome.php. Aceste fisiere vin cu CodeIgniteru.
Pastreaza aceste fisiere asa cum sunt ele. Creeaza un alt fisier in acelasi loc numit “Tutorial.php”, si introdu urmatorul cod in el:
<?php
class Tutorial extends CI_Controller {
public function index() {
echo "Primu nostru controller";
}
}
?>
Clasa Tutorial extinde clasa CI_Controller (CodeIgnier_Controller). Clasa aceasta trebuie extinsa de fiecare data cand doresti sa iti faci controller-ul tau.
Accesarea unui Controller
Controller-ul definit mai sus poate fi accesat prin urmatorul URL:
http://127.0.0.1/atestat/index.php/tutorial
Observati cum am adaugat cuvantul “tutorial” dupa index.php. Asta indica numele controller-ului. Numele clasei trebuie sa inceapa cu litera mare, dar noi o vom scrie cu litera mica de fiecare data cand accesam URL-ul. Sintaxa generala prin care folosesti un controller este urmatoarea:
http://127.0.0.1/atestat/index.php/controller/numele-functiei
Haideti sa modificam clasa de mai sus si adaugam urmatoarea functie:
<?php
class Tutorial extends CI_Controller {
public function index() {
echo "Primu nostru controller";
}
public function functiaMihai(){
echo "Functia lui Mihai";
}
}
?>
Avem 3 metode prin care putem accesa ceea ce am scris mai sus:
http://127.0.0.1/atestat/index.php/tutorial http://127.0.0.1/atestat/index.php/tutorial/index http://127.0.0.1/atestat/index.php/tutorial/functiaMihai
Din cate puteti observa, atunci cand nu scriem nimic dupa “tutorial” – CodeIgniter va prelua functia default “index” din interiorul Controller-ului.
Views
Aceasta poate fi o pagina HTML simpla sau complexa, putand fii chemata de controller. Aceasta pagina poate contine header, footer sau un sidebar. Fisierul view nu poate fi apelat direct. Haideti sa creeam mai intai un fisier simplu view. Creeati un nou fisier in folderul application/views ce il vom denumii “paginamea.php“. Inserati urmatorul cod:
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>Tutoriale-Pe.NET</title>
</head>
<body>
Un exemplu de pagina simpla HTML.
</body>
</html>
Acum trebuie sa schimbati codul din controller-ul nostru (creat la capitolul precedent).
Cum incarcam view-ul?
View-ul se incarca foarte simplu folosind urmatoarea linie:
$this->load->view('paginamea');
Daca doresti sa iti organizezi view-urile poti sa incarci pagina folosind urmatoarea sintaxa:
$this->load->view('folder-ul-tau/denumireFisier');
Nu este necesar sa specifici extensia, daca fisiere sunt .php.
<?php
class Tutorial extends CI_Controller {
public function index() {
$this->load->view('paginamea');
}
public function functiaMihai(){
echo "Functia lui Mihai";
}
}
?>
Ca sa recapitulam cum functioneaza totul:
- Accesezi pagina web prin intermediul urmatorului URL: http://127.0.0.1/atestat/index.php/tutorial Acest URL va chema prima oara fisierul index.php din folder-ul nostru
- Fisierul index.php va apela clasa din application/controllers/Tutorial.php , iar pentru ca nu s-a specificat nici un numar in URL, se va incarca clasa default, adica index(), care va incarca la randul ei view-ul din application/views/paginamea.php
- $this->load->view(‘paginamea’) va rula fisierul din application/views/paginamea.php si va genera rezultatul.
Pana data viitoare
- Descarca template-ul holmes – il vom folosii pentru atestatul nostru. Link download: aici.
- Realizeaza pe hartie baza de date a atestatului nostru (vom realiza site-ul unei agentii imobiliare).
- Navigheaza prin template si incearca sa intelegi modul acestuia de organizare.
