Teoretic totul este simplu daca stim care este calea si avem abilitatile necesare. Practic, adeseori avem nevoie de ghidare. Inainte de a incepe invatarea unui nou limbaj de programare trebuie sa identificam motivul pentru care dorim sa o facem. Daca invatam doar "sa stim" nu prea tragem foloase de pe urma studiului, dar putem face lucruri deosebite daca ne facem un mic plan.
1. Vreau sa invat PHP pentru ca vreau sa pot face o pagina de contact si nu vreau sa mai apelez la nimeni.
Când nu stim incotro ne intreptam nu avem cum sa luam in calcul toti factorii implicati in mica noastra dorinta de studiu sau chiar practica.
1.1. Realizarea unei pagini de contact presupune preluarea unor informatii de la persoana care o acceseaza si transmiterea acestora catre destinatar.
1.2. Trimiterea datelor presupune o verificare atenta a acestora, in prealabil, pentru a ne asigura ca operatiunea se va incheia cu succes.
1.3. Verificarea datelor introduse si tratarea posibilelor erori este o tema de studiu nu foarte complicata, dar una peste care incepatorii adeseori nu reusesc sa treaca.
Bun. Punctul 1 a picat si trebuie sa pornim de la baza. Paginile de internet sunt afisate in programele de navigare (Internet Explorer, Mozilla Firefox, Opera etc) cu ajutorul codului HTML sau XHTML. HTML (HyperText Markup Language) nu este un limbaj de programare, ci doar un limbaj de evidentiere a textului din paginile de internet. Cu alte cuvinte, ceea ce facem intr-un editor de texte (Wordpad, Word, Writer, Notepad++) facem si in paginile de internet, cu ajutorul HTML. Diferenta consta in modul de lucru si structura documentelor.
Structura unui document HTML este simpla: ANTET + CORP.
* In antetul documentului se scrie tilul paginii, se specifica setul de caractere folosit - in functie de limba in care redactam documentul -, se introduc cuvintele cheie dupa care va fi gasita pagina cu ajutorul motoarelor de cautare + alte informatii.
* Corpul documentului contine tot textul pe care il vedem in pagina de internet.
Limbajul HTML are o caracteristica logica de marcare a elementelor din document si anume etichetele. Atât demarcarea zonei de antet, cât si cea a corpului documentului HTML sunt realizate cu etichete, câte una pentru inceputul marcajului si una pentru sfârsit.
De exemplu:
<eticheta>continutul demarcat</eticheta>
Dupa cum se vede, semnele "mai mic" si "mai mare" sunt folosite pentru definirea etichetelor. Cea de inceput foloseste doar cele doua caractere, in timp ce eticheta de incheiere are si caracterul "slash", pentru a face diferentierea intre eticheta de start, astfel ca programul de navigare sa stie "de unde pâna unde" va aplica efectul sau stilul dictat de cele doua etichete.
Documentele HTML se salveaza cu extensiile .htm si .html - ambele insemnând acelasi lucru, fiind interpretate la fel de orice navigator. Acum, ca stim cum este structurat un document HTML si care este treaba cu etichetele, pot da ca exemplu structura de baza a unei pagini HTML.
<html>
<head>
</head>
<body>
</body>
</html>
Evident, antetul trebuie pus inaintea corpului documentului. Pe lânga aceasta puteti observa faptul ca sectiunile HEAD si BODY sunt cuprinse de doua etichete, al caror rol este acela de a defini inceputul si sfârsitul documentului HTML. Singurul lucru pe care mai trebuie sa-l stiti pentru inceput despre structura unui document HTML este ca acestea pot fi de mai multe tipuri:
Tipurile uzuale de documente HTML:
- HTML Strict
- HTML Transitional
- HTML Frameset
Limbajul HTML este inca in curs de dezvoltare, urmatoarea versiune fiind HTML 5, supravegheata de World Wide Web Consortium si colaboratorii acestei organizatii. Utilizarea HTML presupune respectarea standardelor emise de W3C, desi in bransa dezvoltatorilor de pagini de internet este cunoscut faptul ca producatorii navigatoarelor mai au o cale lunga pâna sa contina suport pentru toate regulile stabilite in standardele HTML si CSS. Cel mai bun sfat pe care il pot da unui incepator este sa respecte standardele când scrie codul. Piata de navigatoare evolueaza si in viitorul apropiat tot mai multe se vor alinia la regulile jocului, astfel ca paginile de internet scrise corect vor fi afisate la fel in toate programele.
Alegerea tipului de document sta la latitudinea dezvoltatorului, fie in functie de preferintele acestuia sau de nevoile particulare proiectului pe care il are de realizat. Cel mai utilizat tip de document HTML este cel tranzitional, care este mai permisiv la redactarea codului. Nu imi propun sa rescriu manualele HTML existente, ci doar sa trasez regulile generale in vederea lucrului cu PHP. Am mentionat si acronimul CSS - Cascading Style Sheets - sau foi de stiluri in cascada. Acestea sunt fisiere in care se poate specifica stilul anumitor elemente din paginile de internet. Putem crea pagini si fara sa le atasam o foaie de stiluri, dar CSS are un set de avantaje care usureaza munca dezvoltatorilor. In exemplul urmator voi prezenta un model de pagina HTML Transitional cu titlu si cu un fisier CSS adaugat printr-o legatura din antetul paginii.
HTML si CSS:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Titlul documentului HTML</title>
<link rel="stylesheet" href="stiluri.css" type="text/css">
</head>
<body>
Text din corpul documentului HTML.
</body>
</html>
Fisierul CSS (stiluri.css) contine definitiile stilului aplicat in pagina HTML, stocate sub forma de clase. De exemplu:
body {
font-family: Verdana, Arial, Tahoma;
font-size: 12px;
color: black;
}
Indicatiile din fisierul CSS vor avea ca rezultat afisarea textului cu specificatiile de mai sus:
- Fonturile care vor fi incercate pentru afisarea continutului sunt cele de mai sus. Ele sunt luate in ordine si primul gasit, dintre cele mentionate, va fi folosit pentru afisarea textului din corpul paginii;
- Dimensiunea caracterelor din pagina va fi de 12 pixeli;
- Culoarea textului din pagina va fi neagra.
Realizarea unui formular necesita adaugarea a cel putin doua elemente: un câmp text pentru introducerea unor date sau o optiune de tipul unei casute care poate fi bifata sau nu si un buton de trimite a optiunii utilizatorului. Odata familiarizati cu conceptul de etichete si modul de utilizare al acestora veti gasi o logica in formularul de mai jos.
Formular preluare nume:
<form action="procesare.php" method="post">
<input type="text" name="nume_utilizator">
<input type="submit" value="Trimite">
</form>
Standardele HTML au fost scrise in limba engleza. Acesta este motivul pentru care denumirile etichetelor sunt in aceasta limba. Codul formularului de mai sus se citeste in felul urmator:
Formularul va trimite actiunea realizata de utilizator catre fisierul procesare.php prin metoda de postare a datelor. Continutul formularului consta intr-o casuta de introducere a datelor, de tip text, cu numele "nume_utilizator", iar butonul care permite trimiterea acestei informatii se numeste "Trimite". Deoarece formularul apare in pagina de internet, acesta trebuie sa fie plasat intre etichetele care marcheaza corpul documentului HTML.
In continuare aveti fisierul HTML complet care va permite afisarea formularului de preluare a numelui de utilizator:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Formular preluare nume utilizator</title>
<link rel="stylesheet" href="stiluri.css" type="text/css">
</head>
<body>
<form action="procesare.php" method="post">
<input type="text" name="nume_utilizator">
<input type="submit" value="Trimite">
</form>
</body>
</html>
Fisierul procesare.php va contine codul PHP care permite afisarea datelor introduse de utilizator. La fel ca limbajul HTML, codul PHP trebuie delimitat de doua etichete. Inceputul codului PHP este marcat cu eticheta <?php si incheierea acestuia se face cu ?>
Iata continutul fisierului procesare.php:
<?php
echo "Numele de utilizator este: " . $_POST['nume_utilizator'];
?>
Acesta va afisa numele introdus in casuta de tip text numita nume_utilizator. Desigur, pentru executarea codului PHP trebuie sa dispuneti de un server de internet cu PHP instalat. Functia PHP care afiseaza text in paginile de internet se numeste echo si utilizarea acesteia o voi explica in detaliu in articolul despre PHP.
ATENTIE! Codul PHP folosit serveste strict ca exemplu si nu este securizat doar din motive de prezentare a unui cod simplu, functional si usor de citit.