Comunicarea prin intermediul Internetului [311753]

Licență

Comunicarea prin intermediul Internetului [311753]

Byadmin ianuarie 1, 2024

Introducere

Utilizarea Internetului a devenit în ultimii ani mai mult decât o necesitate, înglobând activități care depășesc schimbul comunicațional și informațional. [anonimizat], socializare, cumpărături, [anonimizat]-[anonimizat] 10, spre exemplu. [anonimizat] a [anonimizat], mobil, rapid și accesibil oricui.

[anonimizat], între organizații și persoane din întreaga lume. Ultimele măsurători arată că numărul utilizatorilor a depășit pragul de 3 [anonimizat] 2015, iar acest fenomen este în continuă expansiune (conform portalului de statistică statista.com).[1]

Accesul la internet și la informațiile pe care acesta le conține este foarte important pentru orice țară sau organizație. Este atât de important încât congresul S.U.A. a dezbătut chiar problema asigurării de către guvern a accesului la Internet pentru fiecare persoană.

[anonimizat], [anonimizat]-o formă transmisibilă pe o linie telefonică, o linie de telefon obișnuită și un cont pe un calculator conectat la rețea. Dintr-[anonimizat] o modificare substanțială a felului în care noi comunicăm ca ființe umane.

Rețeaua este un mijloc universal de comunicare. Prin aceasta se pot primi și expedia dintre cele mai diversificate tipuri de informație. [anonimizat]. Dacă adresa este cunoscută se poate trimite informație la acea adresă sau se poate căuta o anumită informație ce poate fi utilizată în modul dorit. [anonimizat], yahoo, ș.a.m.d., [anonimizat], memorii, [anonimizat], sunete etc.

[1] Statista – [anonimizat] 18,000 Sources

Promovarea afacerilor prin intermediul internetului

Internetul nu mai este de mult doar un mijloc de comunicare și informare. [anonimizat], și au știut să folosească din plin o astfel de facilitate. [anonimizat], îndeplinind totodată și funcția de promovare.

Companiile, instituțiile, [anonimizat], [anonimizat] a se face cunoscuți. [anonimizat]-o lume a [anonimizat] a intra în mintea consumatorilor. [2]

Aceste tipuri de servicii și multe altele pot fi folosite de către oricine are acces la internet, chiar fără fără a fi un expert în calculatoare. Chiar și instituțiile de învățământ permit în ziua de astăzi, pentru diferite proiecte și teme, obținerea și citarea informațiilor de pe internet, iar pe de altă parte, există platforme online dedicate redactării și partajării diferitelor lucrări, articole, cărți sau alte tipuri de publicații unde utilizatorii pot contribui active la conținut. Acest fenomen este numit crowdsourcing.

Este de la sine înțeles că toate aceste informații sunt puse la dispoziția internauților prin intermediul site-urilor web. Un site web este un grup de pagini web corelate, care este găzduit de un server HTTP sau HTTPS pe World Wide Web sau pe un site din intranet. Cele mai multe site-uri Web au o pagină principală ca punct de pornire, numită în cele mai multe cazuri home/ acasă.

Aceasta este interconectată cu alte pagini, prin utilizarea hyperlink-urilor. Site-urile de nivel superior (site de nivel superior: Un site Web din capătul unei ierarhii dintr-o colecție de site-uri, din care se administrează caracteristicile colecției de site-uri. Un site de nivel superior poate avea mai multe subsite-uri.) și subsite-urile (subsite: Un sit complet de Web stocat într-un subdirector numit din situl Web de cel mai înalt nivel. Fiecare subsite poate avea permisiuni de administrare, elaborare și răsfoire independente de situl Web de cel mai înalt nivel și de alte subsite-uri). se utilizează pentru a împărți conținutul site-ului în site-uri distincte, care se pot gestiona separat. Site-urile Web de nivel superior pot avea mai multe subsite-uri și subsite-urile pot avea mai multe subsite-uri. Toată structura unui site Web de nivel superior și a subsite-urilor sale se numește colecție de site-uri (colecție sit: Un set de situri Web pe un server virtual care au același proprietar și partajează aceleași setări de administrare. Fiecare colecție de situri conține un sit Web de cel mai înalt nivel și poate conține unul sau mai multe subsite-uri). web.

Această ierarhie permite utilizatorilor să aibă un site principal de lucru pentru toată echipa și site-uri care funcționează individual sau site-uri partajate pentru proiectele adiacente. Site-urile web de nivel superior permit niveluri diferite de control asupra caracteristicilor și setărilor pentru site-uri. Administratorul unui site Web controlează posibilitatea de a crea, de a accesa și de a contribui la conținutul unui site Web.

[2] Sfetcu, N. (2015). Promovarea afacerilor prin campanii de marketing online

În lucrarea de față este prezentată aplicația informatică pentru Pensiunea La Poalele Dealului din localitatea Pâncota, județul Arad. Aceasta cuprinde diferite informații de interes pentru turiști (posibilități de cazare, prețuri, activități, istoria locului), precum și un panou de administrare pentru gestionarea conținutului site-ului de către administrator.

Lucrarea este constituită pe patru piloni principali, și anume:

Introducerea, cu rol de a descrie lucrarea și de a crea o idee despre ceea ce urmează a fi elaborat;

Noțiunile teoretice, care au folosit ca suport pentru elaborarea proiectului de față;

Descrierea aplicației, pentru o mai bună înțelegere a produsului final;

Concluziile.

Secțiunea de față cuprinde o prezentare generală a temei lucrării, al scopului și metodelor folosite pentru crearea aplicației. Expunerea este rezumativă astfel încât să permită obținerea rapidă a unei vederi de ansamblu asupra întregului proiect.

A doua parte principală, constituită din capitolele 1 → 5, abordează partea teoretică care stă la baza proiectării și realizării acestei aplicații:

Capitolul 1 descrie căteva noțiuni introductive despre internet și ce reprezintă World Wide Web și despre cum se face adresarea unei resurse web;

Capitolul 2 dezbate modul de lucru în HTML, informații necesare pentru elaborarea capitolului aplicativ;

Capitolul 3 prezintă modul de lucru cu CSS (Cascading Style Sheets) în crearea unuei pagini web;

Capitolul 4 descrie limbajul PHP începând cu noțiuni introductive, apoi continuând cu elementele constitutive ale limbajului PHP, funcții de controlare a execuției codului PHP, folosirea funcțiilor, lucrul cu vectori și obiecte;

Capitolul 5 este o trecere în revistă a informațiilor generale despre teoria bazelor de date relaționale și detalierea aspectelor concrete legate de sistemele informatice de gestiune a bazelor de date MySQL: creare, interogare, administrare, ș.a.m.d.

Partea a treia a lucrării – Capitolul 6 – cuprinde implementarea efectivă a aplicației și modul în care utilizatorul interacționează cu aceasta. Cuprinde descrieri a bazei de date, a interfeței aplicației cu administratorul cât și interfeței cu utilizatorul. De asemenea sunt trecute în revistă și posibile îmbunătățiri care se pot aduce aplicației.

Finalul lucrării este marcat de o secțiune de Concluzii care pune în evidență întreaga experiență de muncă, de la proiectarea până la realizarea efectivă a aplicației informatice pentru Pensiunea La Poalele Dealului din Pâncota.

Capitolul 1. Internet și World Wide Web

Internetul

Internetul a fost descris ca fiind „o colecție largă de rețele“ sau ca o „rețea de rețele“. Una dintre cele mai cuprinzătoare definiții prezintă Internetul ca fiind ,,un sistem global de rețele de calculatoare interconectate care utilizează standardul Internet Protocol (TCP/IP) pentru a conecta mai multe miliarde de dispozitive în întreaga lume.“ [3]

Protocolul IP (Internet Protocol) reglementează transmiterea datelor de la o adresă IP la alta, iar datele sunt transmise divizate în pachete. În acest fel, se împiedică monopolizarea transmisiei în rețea doar de către un singur utilizator. Când pachetele de date au ajuns la destinație, un alt program TCP le asamblează și aranjează în ordinea corectă. [4]

Deși există numeroase definiții acceptate, nici una nu surprinde Internetul în totalitatea sa. Pe lângă instrumentul care este această imensă conexiune, Internetul înseamnă și mulțimea comunităților ce îl folosesc, fiecare în scopuri diferite:

comunitatea academică utilizează Internetul ca pe cel mai mare, complet și totodată complex instrument de învățare (educațional);

comunitatea științifică utilizează Internetul ca pe un instrument de cercetare și colaborare;

comunitatea economică utilizează Internetul ca pe un mediu de derulare al afacerilor.

Internetul nu este o organizație monolitică, având o conducere și un grup de control unice; Internetul este o societate de rețele de calculatoare interconectate, independente dar care se supun, totuși, unor protocoale globale.

[3] Articol: Today's Personal Computing – The Internet Network and the World Wide Web

[4] Modrișan, A. (2009). Lucrare Metodico-Științifică pentru Obținerea Gradului Didactic I

Fig. 1.1 Internetul

World Wide Web (WWW, W3)

World Wide Web (WWW sau W3) este o rețea de resurse informaționale de o extraordinar de mare diversitate în ceea ce privește conținutul. Este un sistem interactiv hipermedia (adică un sistem ce conține și suportă patru categorii importante de informație, mai precis texte, imagini, sunete/audio și imagini video în mișcare) construit peste Internet.[5]

Pentru a face aceste resurse disponibile unei audiențe cât mai largi, Web-ul se sprijină pe trei mecanisme fundamentale:

O schemă uniformă de denumire (de stabilire a numelor, naming scheme) pentru a localiza resursele în Web (de exemplu URI);

Protocoale pentru accesarea resurselor astfel denumite în Web (de exemplu HTTP/ HTTPS);

Hypertextul pentru navigarea comodă de la o resursă la alta (între resurse).

Bazele World Wide Web au fost puse în anul 1989 la Centrul European de Cercetări Nucleare (CERN) în Geneva (Elveția). Propunerea inițială de creare a unei colecții de documente având legături între ele a fost făcută de Tim Berners-Lee în martie 1989.

[5] Articol: Today's Personal Computing – The Internet Network and the World Wide Web

Elementele fundamentale ale WWW sunt prezentate în figura următoare:

Fig. 1.2 Elemente World Wide Web

World Wide Web este cel mai vizibil instrument Internet, transformându-l, prin capacitățile sale de a prezenta informațiile, în cel mai important instrument al zilelor noastre și într-o sursă de informații fără egal. Web-ul poate fi utilizat pentru căutarea de informații despre produse, transferul de software și versiuni noi ale acestuia, păstrarea unor colecții de informații de orice fel de tip (de exemplu de ziare), în general pentru aflarea unor informații despre orice tip de informație imaginabilă.

1.3 Resursele World Wide Web

Unul din conceptele de bază care a fost preluat și acceptat și în alte protocoale utilizate în Internet, este cel de resursă. O resursă poate fi un program, un calculator, un document, o bază de date, un serviciu, ș.a.m.d., care poate fi referită în mod corect și fără echivoc. Pentru referirea la o resursă din Internet, se folosește termenul generic URI (Universal Resource Identifier) care poate specifica fie o locație, caz în care se vorbește de un URL (Universal Resource Locator) fie un nume, caz în care se vorbește de un URN (Universal Resource Name).

Paradigma pe care se bazează protocolul este cea de cerere/răspuns. Cererea este emisă de către un client iar acesta stabilește o conexiune cu un server și îi trimite acestuia o cerere, sub forma unei metode. Metoda se referă la o anumită resursă, identificată prin intermediul URI. La aceasta mai trebuie menționate versiunea de protocol utilizată și un mesaj de tip MIME care să conțină parametrii metodei, informații relative la client și un eventual ,,conținut” suplimentar. Serverul va răspunde cu o linie de stare, incluzând versiunea de protocol utilizată și un cod de succes sau eroare, la care se adaugă un mesaj de tip MIME conținând informații relative la server și eventual un ,,conținut” suplimentar.

1.4. Adresarea unei resurse în Web

Adresarea unei resurse via http se face prin construcții (șiruri de caractere) de forma http://adresa_host_în_retea[:port]/cale/subcalel/…/subcalen/nume_document. Http specifică tipul protocolului; el trebuie precizat neapărat, întrucât există multe alte protocoale prin care poate fi accesată o anumită resursă din Internet. Adresa_host_în_retea (de exemplu www.exemplu.ro sau www.exeplu.com) identifică un server sau un gateway din rețea, folosind adresarea uzuală de tip DNS (Domain Name System) din Internet: numehost. subdomeniul .subdomeniu2..subdomeniun.domeniu_de_bază

Deci www.exemplu.ro s-ar citi ,,serverul www din subdomeniul exemplu din domeniul de bază ro. Dacă nu se specifică portul, se interpretează automat porul 80, iar dacă se specifică un alt port, se va adresa acesta. Cale/subcalel/…/subcalen/ nume_document identifică calea absolută până la documentul identificat de nume_document de pe serverul respectiv. Nu întotdeauna însă resursa referită este un document. Poate fi o fracțiune dintr-un document, caz în care se face referire la fragmentul respectiv: Cale/subcalel/ …/subcalen /nume_ document #capitolul2paragraful3

În HTML adresarea URL se folosește pentru:

crearea unei legături spre un alt document sau spre o altă resursă;

crearea unei legături spre un stil de pagină (style-sheet) extern sau spre un script aflat într-un fisier sursă extern;

includerea într-o pagină a unei imagini, a unui obiect sau a unui applet;

crearea unei imagini senzitive;

transmiterea unui formular interactiv;

crearea unui document cu frame-uri;

citarea unei referințe externe;

referirea unor conveții de metadate care descriu un document.

1.5 Site-urile Web

Noțiunea de website, numită și simplu site, ori site web, desemnează o grupă de pagini web multimedia (conținând texte, imagini fixe, imagini mișcătoare și chiar sunete), accesibile în Internet în principiu oricui, de obicei pe o temă anume, și care sunt conectate între ele prin hyperlink-uri. Diversele site-uri web pot fi oferite de către o companie, un proiect, o rețea de utilizatori, o persoană particulară, o administrație publică și multe altele.[6]

1.6 Browserul Web

Cea mai simplă definiție descrie browseul Web ca fiind ,,aplicația software de bază folosită pentru navigarea pe Internet.“ [7]. Atunci când browserul parcurge textul scris în HTML, acesta interpretează toate tag-urile, sau altfel spus, etichetele care îl marchează, de exemplu <head> sau <p>, folosite pentru semnalarea titlurilor sau paragrafelor. Utilizatorii pot alege browserul în funcție de preferințele de redare a conținutului web sau de posibilitățile de personalizare a căutărilor. Dintre cele mai folosite browsere amintim: Mozilla Firefox (fig 1.3), Google Chrome (fig. 1.4) și Internet Explorer.

Fig. 1.3 Fig 1.4

[6] Modrișan, A. (2009). Lucrare Metodico-Științifică pentru Obținerea Gradului Didactic I

[7] Articol: Today's Personal Computing – The Internet Network and the World Wide Web

Capitolul 2. Descriere generală a limbajului HTML

2.1. Definirea limbajului HTML

Acronimul HTML înseamnă HyperText Markup Language și a fost dezvoltat inițial de oamenii de știință ca o unealtă utilizată la partajarea documentelor (rapoarte de cercetare, documentații, etc.) în întreaga comunitate științifică internațională care utilizează internetul. HyperText se referă la faptul că limbajul HTML permite crearea conexiunilor între diverse pagini web, pentru o navigare ușoară și rapidă. Pe de altă parte, caracteristica Markup se referă la posibilitatea adnotării textului cu diverse coduri care vor fi interpretate doar de către browser, pentru o mai bună organizare a înformației în pagină.[8]

HTML poate fi asemănat cu modalitățile de formatare a textelor de la un procesor de texte uzual, prin că adaugă textului instrucțiuni despre ceea ce se dorește a fi publicat sau afișat în browser. Ceea ce îl deosebește de toate celelalte formate ale procesoarelor de texte este faptul că un document HTML este un document ce conține informație în format „text-pur“, mai precis caractere ASCII, în timp ce procesoarele de texte folosesc formate particulare. Este important de menționat și faptul că există elemente de markup care vizează structura textului: împărțirea pe capitole sau paragrafe, dar și elemente de markup semantic, folosite pentru evidenșiere anumito informații sau citări. [9]

Documentele HTML pot fi create cu un editor de texte și se vor salva ca text only with line breaks, sau cu editoare HTML care permit crearea vizuală a documentelor HTML, rezultând însă tot documente în format text pur. Acest limbaj dă autorilor posibilitatea:

să publice documente stilizate cu headere, texte, tabele, liste, fotografii, etc…;

să regăsească on-line informații prin intermediul hiperlink-urilor accesate printr-un simplu click de mouse;

să proiecteze formulare pentru realizarea tranzacțiilor cu servere aflate la distanță, pentru căutari de informație sau pentru activități specifice comerțului;

să includă foi de calcul tabelar, clipuri video, sunete și alte aplicații direct în documente.

2.2 Caracteristicile limbajului HTML

Așa cum se poate deduce din numele limbajului, HTML descrie caracteristicile de format ale elementelor incluse prin procedee de marcare. Acestea pot fi asemănate intuitiv cu marcajele folosite în tipografie pentru a indica scrierea unui text cu un anumit tip de caractere. Fiecare element va fi introdus între două marcaje numite ,,tags“, în limba englezã, sau etichete. Acestea sunt folosite pentru a marca începutul și sfârșitul: <marcaj> … </marcaj>.

[8], [9] Duckett, J. (2011). HTML & CSS – Design and Build Websites

Caracterele speciale de delimitare a marcajelor "<", ">" permit deosebirea acestora de textul propriu-zis. De exemplu, pentru textele cu font îngroșat, marcajul de început este <B> iar de sfârșit este </B>. Specificațiile limbajului cât precum și limbajul însuși pot fi interpretate de către om dar și de către computer. Datorită faptului că elementele de marcare sunt separate de text prin șiruri de delimitare alcătuite din caractere tipăribile, textul și marcajele pot coexista fără să creeze probleme în redarea textului.

HTML este un limbaj bazat pe SGML, Standard Generalized Markup Language. SGML este un standard internațional (ISO-8879) aprobat în 1986 ce oferă o modalitate de a reprezenta structura documentelor și hyper-documentelor. Este totodată și o cale de a codifica hyper-documentele astfel ca acestea să poată fi interschimbate asemănător procesului de interschimbare a unor documente în cazul mai multor autori care colaborează utilizând platforme diferite aflate la distanță.

Cea mai veche versiune de HTML, a apărut la sfârșitul anului 1990, și funcționa exclusiv pe sistemul de operare NeXT. Inventatorul său, Tim Berners-Lee a observat lipsa unui limbaj text care să fie portabil pe mai multe platforme pentru folosirea pe Internet, așa că în anul următor specificațiile noului limbaj au fost puse pe Internet.

Deși nu putem nega apariția unor noi limbaje din ce în ce mai interactive precum VRML (Virtual Reality Modeling Language) și XML (Extensible Markup Language), HTML încă stă la baza creării oricărui conținut web. Câteva din avantajele sale sunt: documente independente de platformă, legături cu alte documente, inserție de grafică, video și sunet, interactivitate între cititorul documentului și aplicația dorită de autor.

2.3. Reprezentarea documentelor HTML

Ca aplicație standard SGML, limbajul HTML trebuie pentru a se supune normelor de interoperabilitate să specifice propriul set de caractere care se folosește în codificarea documentelor. Un set de caractere al unui document este compusă din:

un repertoriu: un set de caractere abstracte, cum sunt literele alfabetului latin „A”, litera alfabetului chirilic „I“ sau semnul chinezesc care înseamnă apă

pozițiile codurilor: un set de întregi ce referă caracterele din repertoriu.

Fiecare document HTML este o secvență de caractere din repertoriu. Computerele identifică aceste caractere prin poziția acestora în repertoriu. De exemplu în setul de caractere ASCII pozițiile 65, 66 și 67 referă caracterele A, B și C. Caracterele utilizate pentru editarea textelor în documentele HTML ar trebui să aparțină setului standard ASCII (caractere pe 7 biți) și fără a include caractere din setul extins (pe 8 biți) deoarece diversele platforme utilizează definiții diferite pentru caracterele din setul superior ASCII. Dar, acest set de caractere este insuficient pentru un sistem informațional global, așa cum este Webul. De aceea limbajul HTML utilizează un set de caractere mult mai complex, numit Universal Character Set – UCS (Setul de caractere universal) definit de standardul ISO 10646, standard ce definește un repertoriu de mii de caractere utilizate în întreaga lume. Acest set de caractere este echivalent caracter-cu-caracter cu setul Unicode 2.0 definit de W3C.

2.4. Scrierea în HTML

Într-un document HTML pot exista caractere bold, italice, mici și mari. Pentru a crea această propoziție, codul HTML va arăta așa:

Într-un document HTML pot exista caractere <b>bold</b> , <i>italice</i>, <font size=-2>mici</font> și <font size=+2>mari</font>

Atunci când se redactează un anumit text între semnele ,,<” și ,,>” rezultă un tag. Tag-urile mai sunt numite și etichete sau elemente. Ca un exemplu, tag-ul <b> dă comanda de a începe un pasaj de text cu caractere bold, iar tag-ul </b> dă comanda de a opri scrierea cu caractere bold. Tag-ul cu semnul slash (/) este cunoscut ca tag de închidere. Cele mai multe tag-uri necesită și un tag de închidere, dar nu toate. Tagurile formează întreaga structură a unui document HTML.

<b>Acest text are caractere bold.</b> ,

<b> este tag de deschidere iar </b> este tag de închidere.

2.5. Structura generală a unui document HTML

Documentele HTML sunt fișiere ce conțin texte și alte elemente multimedia, care primesc extensia .htm, .html sau .shtml. Acestea cuprind două parți de organizare a textului foarte importante, și anume head-ul și body-ul. Head-ul unui document conține titlul sau altfel spus, antetul, acelui document și o scurtă descriere, pe când porțiunea din body reprezintă partea mai mare a documentului în care se va redacta conținutul paginii web. Exemplu de structură unui document HTML:

<html>

<head>

<title>Titlul documentului</title>

… alte declarații/informații despre document…

</head>

<body>

…Conținutul paginii propriu-zise…

</body>

</ html >

Pentru a înțelege mai bine structura și pentru a ușura munca în cazul unor reveniri asupra codului, se recomandă lăsarea spațiilor între liniile documentului. Acestea vor fi ignorate de catre browser în momentul interpretării. Totodată, ceea ce e redactat între tag-urile title va fi titlul documentului, iar acesta va apărea în momentul vizionării documentului în capul paginii, în bara pentru titlu, mai précis, în stânga butoanelor de minimalizare/ maximalizare/ închidere ale paginii.

Elemente de formatare a textului:

<br> – are ca efect forțarea afișării a ceea ce urmează pe rândul următor. Acest tag nu creează un nou paragraf

<b>…</b> – va afișa bold (îngroșat) textul cuprins între cele două tag-uri ale sale. Un tag sinonim al lui <b> este: <strong>…</strong>

<i>…</i> – are rolul de a afișa italic (înclinat) textul cuprins între cele două tag-uri ale sale. Tag-uri sinonime ale lui <i> sunt: <em>…</em>, <dfn>…</dfn>,<cite>…</cite>.

<u>…</u> – va afișa subliniat textul cuprins între cele două tag-uri ale sale. Un tag sinonim al lui <u> este: <ins>…</ins>

<s>…</s> – va afișa tăiat (cu o linie orizontală) textul cuprins între cele două tag-uri ale sale. Un tag sinonim al lui <s> este: <del>…</del>

<big>…</BIG> – se folosește pentru a afișa textul cuprins între cele două tag-uri ale sale mai

mare decât textul în care este cuprins.

<small>…</small> – va afișa textul cuprins între cele două tag-uri ale salemai mic decât textul în care este cuprins.

<sup>…</sup> – va afișa textul cuprins între cele două tag-uri ale sale mai sus (ca o putere)

<sub>…</sub> – se va folosi pentru afișa textul cuprins între cele două tag-uri ale sale mai

sus (ca un indice) 15

<tt>…</tt> – are rolul de a afișa textul cuprins între cele două tag-uri ale sale mai sus

monospațiat (toate caracterele ocupă aceeași lungime).

2.6. Bazele unei pagini HTML

Heading-urile sunt unele dintre cele mai importante tag-uri din conținutul unui document HTML, adică din body. Tag-ul de deschidere pentru heading este <hn> și cel de închidere fiind </hn> unde ,,n” reprezintă mărimea heading-ului, acesta variind de la 1 la 6, unde 1 este cea mai mare iar 6 cea mai mică.

Exemplu:

Studentul pregătește lucrarea de licență. {Heading 1}

expresie: <h1> Studentul pregătește lucrarea de licență. {Heading 1}</h1>

2.7. Tag-uri uzuale

Paragrafele se folosesc destul de des în HTML, iar tag-ul de deschidere pentru paragraf este <p>, iar cel de închidere este </p>. Tag-ul de închidere pentru paragraf nu este întotdeauna necesar dar se recomandă folosirea lui.

Formatul textului

O pagină web fară un format stilizat al textului va arăta plictisitor. De aceea se folosesc tag-uri pentru text precum bold, italic sau subliniat. Câteva tag-uri cunoscute pentru formatarea textului sunt <b> și </b> pentru bold, <i> și </i> pentru italic, <u> și </u> pentru subliniat. Pentru dimensiunea textului se folosesc tag-urile <font size=n> și </font>.

Exemplu:

Alex este un băiat foarte carismatic.

expresie: <b>Alex</b> <i>este</i> <u>un băiat</u> <font size=+2>foarte carismatic.</font>

Atribute de aliniere în pagina web

Multe tag-uri suportă atribute de aliniere în pagină precum alinierea la stânga, în centru sau la dreapta. Atributul align se asociază tag-ului de deschidere înaintea semnului „>”.

Exemplu:

Aliniere stânga

expresie: <h2 align=left>Aliniere stânga</h2>

Aliniere centru

expresie: <h2 align=center>Aliniere centru</h2>

Aliniere dreapta

expresie: <h2 align=right>Aliniere dreapta</h2>

Tag-ul pentru sfârșit de rând este <br>. Acest tag nu are un altul pentru închidere.

Exemplu:

SC Pensiunea Pâncota SRL</br>

Str. Vasile Alecsandri, nr. 104</br>

Nr. tel/fax: 0040 257 466 766</br>

Tag-urile CENTER și DIV

Tag-ul center are ca acțiune alinierea în centrul textului dintr-o pagină. Tag-ul de deschidere este <center>, iar tagul de închidere este </center>.

Exemplu:

Vine vara!

expresie: <center><h2> Vine vara!</h2></center>

World Wide Web Consortium, W3C, recomandă folosirea <div align="center"> text centrat </div> în locul tag-ului <center>, deși div nu funcționează în browsere vechi. Avantajul folosirii acestui tag este că se poate alinia textul în pagină la stânga, pe centru și la dreapta prin folosirea atributului align.

Atributele tag-ului BODY

Tag-ul <body> poate avea mai multe atribute dintre care cele mai folosite sunt:

background=,,amplasarea imaginii” = Pune o imagine ca fundal unei pagini web;

bgcolor=,,#cod hexadecimal” = pune o culoare ca fundal;

link=,,#cod hexadeciaml” = pune o culoare pentru link;

vlink=,,#cod hexadecimal” = pune o culoare pentru link-urile deja vizitate;

text=,,#cod hexadecimal” = pune o culoare pentru text.

Codul culorilor hexadecimal

Există peste 16.7 milioane de culori diferite în sistemul de culori hexadecimal, începând de la #FFFFFF care este alb, până la #000000 care este negru. Fiecare cod hexadecimal este impartit în 3 grupe:

#XXxxxx – nuanță de roșu

#xxXXxx – nuanță de verde

#xxxxXX – nuanță de albastru

Fiecare unitate (x) este o valoare între 0 și F în sistemul de culori hexadecimal. Sistemul de culori hexadecimal constă în unitățile 0 1 2 3 4 5 6 7 8 9 A B C D E F, 0 fiind valoare nulă, iar F valoarea cea mai mare. Dacă primele două unități sunt FF (cea mai mare valoare), iar restul de patru sunt 0 (nule) atunci culoarea va fi roșu curat. Dacă cele două unități din mijloc sunt FF, iar restul sunt 0 (nule) atunci culoarea va fi verde curat.

Tag-ul de comentarii

În momentul scrierii unui document HTML, este recomandată utilizarea notițelor și comentariilor ajutătoare, însă fără inteția de a le afișa și pe browser. Pentru aceasta există tag-ul de comentarii care se deschide cu <!– și se închide cu –>, tot ce este cuprins între cele două tag-uri nu va apărea în pa

2.8. Imagini și imagini link

Link-urile sunt esența web-ului întrucâ fară acestea paginile unui site nu ar avea legatură între ele. Pentru a adăuga un link se folosește tag-ul de deschidere <ahref="locație"> și tag-ul de închidere </a>. Tot ce va apărea între aceste două tag-uri va fi subliniat și colorat, iar în momentul click-ului pe acel text, browser-ul va fi trimis spre locația dată.

Exemplu:

Vizitează Pâncota!

expresie: Vizitează <a href="http://www.pensiunepancota.ro/">Pâncota</a>!

Dacă link-ul este către o pagină care se află în același director cu pagina curentă, introducerea url-ului nu este necesară, ci numele paginii este suficient. Spre exemplu, în cazul unei pagini cu numele Istoric.html se poate folosi expresia <a href="istoric.html">Istoric</a>.

Link-urile sunt folosite nu doar pentru a naviga de la o pagină la alta, ci pot fi folosite și pentru trimiterea email-urilor.

Exemplu:

Trimite un email la WebMaster!

expresie: Trimite un email la<ahref="mihaela.vornicu@hotmail.com">WebMaster</a>

Tag-ului de deschidere i se poate asocia atributul target="_blank" pentru ca link-ul să se deschidă într-o nouă pagină.

Exemplu:

Trimite un email la WebMaster!

expresie: Trimite un email la <ahref="mailto: mihaela.vornicu@hotmail.com "target=" _blank">WebMaster</a>!

Inserarea imaginilor

Se pot adăuga și imagini paginii web, fiind preferate formatele .gif, .jpg, .jpeg. Tag-ul pentru a adăuga o imagine este <img src="locație">. Este recomandată adăugarea atributelor height și width, acestea permițând imaginii să aibă diferite dimensiuni. În plus, se poate folosi și atributul alt="descrierea imaginii",iar atunci când cursorul mouse-ului se deplasează pe imagine, se afișează descrierea acesteia.

Exemplu:

expresie: <td align="right"><img border="0" height="250" width="310" src="camera .jpg" /> </td>

Imaginea din exemplu este aliniată în dreapta paginii cu o dimensiune dată. Dacă imaginea este în același director cu documentul HTML, atunci se va folosi direct numele imaginii (ex: camera.jpg). Dacă imaginea se află într-un alt director, atunci se folosește: nume director/camera.jpg.

Atributului align i se pot asocia și alte specificații pentru poziționarea imaginilor, cum ar fi: left, pentru poziționare în stânga paginii, top pentru începutul paginii, middle pentru afișare în mijloc și bottom pentru poziționare la finalul paginii

Inserarea imaginilor link

În cazul în care se dorește crearea unei imagini link, care atunci când este selectată să ne trimită pe o altă pagină, între tag-urile de adăugare link se pune tag-ul de adăugare imagine <a href="url-ul linkului"><img src="locația imaginii"></a>. Se poate folosi și atributul de aliniere în pagină align.

Exemplu:

expresie: <ahref="http://www.pensiunepancota.ro" target="_blank"><img src="pancota .jpg" width=200 height=100 > </a>

2.9. Liste ordonate și liste de definiții

Există trei tipuri standard de liste: neordonate (UL), ordonate (OL) și liste de definiții (DL). Se mai pot defini și liste de tip MENU și DIR dar care sunt acum considerate depășite și vor fi afișate la fel ca UL și DL.

Elementele ce definesc listele următoarele:

UL – definirea unei liste neordonate;

OL – definirea unei liste ordonate;

DIR – definirea unei liste de tip director;

MENU – definirea unei liste de tip menu;

DL – definirea unei liste de definiții;

LI – definirea unui element ce aparține unei liste ordonate/neordonate;

DT – definirea unui termen/definiție a unui liste de definiții;

DD – descriea unei definiții.

Lista neordonată, sau altfel spus nenumerotată, este cea mai des folosită. Exemplu de listă nenumerotată:

expresie:

<ul>

<li> Primul element al listei neordonate

<li> Al doilea element

<li> A1 treilea element…

</ul>

Între tag-ul <ul> și </ul> se trece lista de obiecte, fiecare obiect având în frunte tagul <li>. În plus, este bine de știut că nu există limită pentru obiectele din listă.

2.10. Fonturi, dimensiunea și culoarea textului

Noile versiuni de browser suportă fonturi de scriere a textului din cele mai variate. Schimbarea de font se poate realiza prin adăugarea atributului face="nume_font" la tag-ul <font>. Printre cele mai folosite fonturi sunt Times New Roman, Verdana, Arial, Helvetica, Impact, Calibri.

Exemplu:

Verdana

<font size=+2 face="Verdana">Verdana</font>

Culoarea textului

Se poate schimba culoarea textului prin adăugarea atributului color="culoarea_fontului" la tag-ul <font>. Culoarea este setatată prin introducerea codului din sistemul de culori hexadecimal, dar și prin precizarea numelui culorii în limba engleză.

Există 216 de constante de culoare recunoscute de majoritatea browser-elor dintre care 16 sunt considerate de bază:

Fig. 2.1

Exemplu:

Minivacanță la Pâncota.

expresie: <font size=+2 face="Impact" color="green"> Minivacanță la Pâncota.</font>

Dimensiunea textului

Tag-urile <font> … </font>, împreună cu atributul size permit modificarea dimensiunii fontului de bază, a cărui valoare implicită este 3, specificată printr-o altă extensie, și anume <basefont>, font de bază care are de asemenea atributul size. Valorile atributului SIZE sunt între 1 și 7.

2.11. Navigarea într-un document și structura link-urilor

Se pot crea link-uri multiple pe aceeași pagină pentru a fi trimis în altă arie a paginii. Pentru aceasta se folosește tag-ul <a href>, cu diferența că în locul adresei paginii se va folosi semnul # precedat de un nume pe care îl va primi acea arie a paginii. Pentru a denumi aria paginii dorite, se va folosi tag-ul: <a name="numele_ariei">textul din arie</a>, apoi pentru a pune un link către acel loc se folosește <a href="#numele_ariei">textul link</a>.

Exemplu:

<a href="#section2">Mergi la secțiunea 2</a>

Text text

<a name="section2">Ai ajuns la secțiunea 2</a>

Mergi la secțiunea 2

Tex text

Ai ajuns la secțiunea 2

Așadar, accesarea directă a unui anume pasaj din pagină cu ajutorul unui link se poate face în două moduri:

Din interiorul aceleiași pagini: specificând la atributul href identificatorul respectiv (cel

de la id) înainte de care se pune de caracterul #, ca în exemplul următor:

<a href=”#secțiunea2”>Salt direct la secțiunea 2</a>

Din altă pagină: specificând la atributul href adresa paginii accesate (a fișierului html)

urmată de caracterul #, ca în exemplul următor:

<a href=”http://www.myserver.ro/document.html#secțiunea2”>Deschide documentul extern,

direct la secțiunea 2</a>

Structurarea link-urilor

Este recomandat ca toate documentele HTML, imaginile și alte fișiere care urmează să fie incluse în pagina web, să se afle în același director. Astfel, când se crează link-uri între documente nu trebuie specificat și locul unde se află acel element, ci doar denumirea acestuia.

Exemplu:

se consideră paginile index.html și cazare.html

http://www.nume_domeniu.ro/index.html

http://www.nume_domeniu.ro/cazare.html

Dacă se dorește crearea unui link de la pagina index.html către pagina reclama.html, se va folosi tag-ul <a href="cazare.html">Oferta de Cazare </a>.

2.12. Lucrul cu tabele

Tabelele sunt unele dintre cele mai provocatoare elemente din codul HTML. Nu sunt greu de folosit, doar că au un cod mai lung și necesită mai multă atenție. Tabelele încep cu tagul <table> care de obicei conține atributul border=n și se închide cu tag-ul </table>. Dacă atributul border are valoarea n=0 atunci marginea tabelei este invizibilă.

Fiecare rând din tabelă este definit de tagul <tr>. În fiecare rând al tabelului se găsesc căsuțe, care sunt definite prin tagurile <td> și </td>. De multe ori, e necesar un titlu al coloanei care se va afla pe primul rând, pentru aceasta se folosesc <th> și </th>.

Elemente ale unui tabel:

TABLE – definirea unui tabel;

CAPTION – definirea titlului unui tabel;

TBODY – definirea corpului tabelului;

TR – definirea unui rând al unui tabel;

TD – definirea unei celule de date;

TH – definirea unei celule de tip header;

COLGRUP – definirea unui grup de coloane într-un tabel;

COL – definirea unei coloane a unui tabel (atributele comune);

THEAD – definirea unui antet al unui tabel;

TFOOT – definirea unui footer al unui tabel.

Exemplu:

expresia pentru introducerea unui tabel:

<tr>

<td>Rândul 1, celula 1

<td> Rândul 1, celula 2

<tr>

<td> Rândul 2, celula 1

<td> Rândul 2, celula 2

</table>

Alte atribute care pot fi folosite în cazul tabelelor în ceea ce privește textul, imaginile sau alte elemente pe care le conțin sunt: width=,,lățime”, height=,,înălțime”, align pentru poziționarea tabelului în pagină, bgcolor=,,culoare” pentru a seta o culoare de fundal pentru celulele tabelului, bordercolor=,,culoare”, pentru stabilirea culorii chenarului, în cazul în care acesta există.[10]

În lucrarea de față au fost prezentate doar caracteristicile și funcționalitățile de bază în ceea ce privește limbajul HTML. Limbajele de programare sunt în continuă perfecționare și evoluție iar pentru a face față noilor tehnologii, este importantă o documentare constantă. Dintre succesorii acestui limbaj amintim HTM5 sau XHTML, care sunt mult mai flexibile și ușor de folosit. Totuși pentru a fi un bun programator este recomandată stăpânirea cât mai multor limbaje, și mai ales a celor care constituie pilonii de rezistență în continua evoluție a tehnologiei IT.

[10] Modrișan, A. (2009). Lucrare Metodico-Științifică pentru Obținerea Gradului Didactic I

Duckett, J. (2011). HTML & CSS – Design and Build Websites

Robson, E. și Freeman, E. (2012). Head First HTML and CSS – A Brain-Friendly Guide

Capitolul 3. CSS (Cascading Style Sheets)

3.1. Noțiuni de bază

CSS, acronimul pentru Cascading Style Sheets, reprezintă o colecție de tag-uri/ etichete folosite pentru formatarea paginilor web în ceea ce privește pasajele de text, imaginile de fundal, aranjare în pagină și multe altele.

Beneficiile folosirii CSS sunt:

formatarea introdusă într-un singur loc pentru tot documentul;

editarea rapidă a etichetelor;

datorită introducerii într-un singur loc a etichetelor se obține o micșorare a codului paginii, implicit încărcarea mai rapidă a acesteia;

păstrarea unui stil constant în toate paginile site-ului.

Sintaxa CSS este structurată pe trei nivele:

nivelul 1 fiind proprietațile etichetelor din documentul HTML, tip inline

nivelul 2 este informația introdusă în blocul HEAD, tip embedded

nivelul 3 este reprezentat de comenzile aflate în pagini separate, tip externe.

Cea mai mare importanță (suprascrie orice alt parametru) o are sintaxa de nivelul 1 iar cea mai mică importanță o are cea de nivelul 3. Folosirea unui fisier extern sau nivel 3 care să conțină comenzi CSS este foarte practic deoarece poate fi utilizat în mai multe situații (mai multe fișiere HTML pot folosi același fișier extern CSS) eliminând timpul necesar introducerii codului corespunzător în fiecare pagină și totodată editarea lor într-un singur loc pentru mai multe fișiere. Extensia acestor fișiere este .css. Legătura paginilor HTML cu fișierele externe CSS se face prin introducerea următoarei linii:

Următoarele atribute sunt demne de menționat:

rel – fișierul este tip stylesheet;

type – tip text ce conține comenzi CSS;

href – fișierul sau adresa fișierului CSS.

Comenzile de nivel 2 sau embedded sunt cele găzduite oriunde între perechea de etichete <head> și </head> conform sintaxei:

<styletype="text/css">
<!–
…comenziCSS..

–>

</style>

Unde style are rolul de a specifica începutul și sfârșitul blocului CSS, iar type este folosit pentru a ascunde în browserele vechi, care nu cunosc sintaxa CSS, conținutul blocului style. Comenzile CSS de nivel 1 sau inline sunt cele mai folosite, ele suprascriind orice alte comenzi CSS. Acestea sunt amplasate în interiorul etichetelor HTML aflate în zona BODY și au sintaxa:

<eticheta style="codul CSS dorit">
…textul sau obiectul asupra căruia este aplicat codul CSS…
</eticheta>

Este permisă folosirea comentariilor în CSS ca și în HTML:

/* Acesta este un comentariu în CSS */

3.2. Elementele id și class

Id și class sunt comenzi care dau unei formatări CSS un nume. Se folosesc atunci când se dorește aplicarea un stil de formatare unei zone anume. Pentru compatibilitate cu versiunile anterioare de browsere numele asociate zonelor nu vor conține caracterul _.

Elementul id se aplică unui stil de formatare o singură dată sau la o singură etichetă HTML, plasându-se un nume acelui style. Acest element necesită existența comezilor CSS în zona head sau într-un fișier extern.

Exemplu:

<html>
<head>
<title>Exemplu 2_1</title>
<style type="text/css">
<!– #albastru{color: #0000FF;}–>
</style>
</head>
<body>
<p id="albastru">Text albastru introdus prin id "albastru"</p>
Text negru
</body>
</html>

Elementul class este similar cu id dar spre deosebire de acesta poate fi folosit de mai multe ori sau pentru zone mai mari. Ca și la id, necesită existența comezilor CSS în zona HEAD sau într-un fișier extern.

Exemplu:

<title>Exemplu 2_2</title><style type="text/css">

<!– .rosu{color: #FF0000;}–>

</style>

</head>

<body>

<p class="rosu">Primul text rosu introdus prin class "rosu"</p>
Text negru
<p class="rosu">Al doilea text rosu introdus prin class "rosu"</p>
</body>

</html>

3.3 Stiluri pentru fonturi

Aceste elemente specifică argumentul fontului care se asociază unui element HTML fiind incluse ori în zona HEAD ori în interiorul etichetei dorite.

Font-family este o listă de fonturi din care browserul va folosi în ordinea în care le recunoaște (primul folosit va fi primul din lista, dacă nu este recunoscut îl folosește pe al doilea și tot așa mai departe). Este recomandat ca ultima pozitie din listă să fie un font generic (de exemplu serif, sans-serif sau monospace). În situația în care numele fontului este format din două cuvinte se încadrează între ghilimele duble pentru ca browserul să le interpreteze împreună.

Font-size este parametrul prin care se stabilește dimesiunea fontului, exprimat în pixeli (px), puncte (pt), keywords sau procente. Are o funcționare asemănătoare cu eticheta <font>. În exemplul următor se poate observa CSS introdus în head aplicat etichetei p cu dimensiunea exprimată în pixeli.

Exemplu:

<html>
<head>
<title>Nume titlu</title>
<style type="text/css">
<!– p{font-size: 20px;}–>
</style>
</head>
<body>
<p>Text scris cu font de 20px</p>
Text negru
</body>
</html>

Pentru dimensiunea exprimată în puncte se va folosi același exemplu înlocuind px cu pt. Dimensiunea exprimată prin keywords folosește cuvinte în loc de cifre. Șapte cuvinte înlocuiesc dimensiunile de la 1 la 7 de la vechiul tag font face din HTML.

CSS keyword număr FONT size

xx-small 1

x-small 2

small 3

medium 4

large 5

x-large 6

xx-large 7

Procentele sunt o altă valoare pe care o poate lua font size. Această modalitate poate fi vizualizată diferit de browsere diferite. La rândul său, Font-style este folosit pentru a adăuga caracteristica italică fontului. Poate lua valorile normal și italic.

Font-weight este paramerul care stabileste grosimea caracterelor putând lua valorile numerice de la 100 la 900 sau BOLD, BOLDER, LIGHTER.

În compunerea stilurilor cele prezentate anterior pot fi folosite simultan în interiorul aceleiași etichete fiind despărțite de caracterul ; (punct și virgulă). Următorul exemplu ilustrează folosirea unui stil compus aplicat tag-ului p.

Exemplu:

<html>
<head>
<title>Titlu1</title>
<style type="text/css">
<!–
p{

font-family: arial;

font-size: 20px;font-style: italic;

font-weight: 800;}

–>

</style>

</head>
<body>
<p>Text scris cu Arial, 20px, italic, 800</p>
Text negru
</body>
</html>

3.4. Stiluri pentru text

Aliniere: text-align poziționează pe orizontală obiecte (de exemplu text sau imagini) și admite valorile left, right și center ca și eticheta align din HTML. În continuare este prezentat ca exemplu codul folosit în HEAD, aplicat tagului p:

Vertical-align este folosit pentru alinierea pe verticală a obiectelor dintr-un tabel și poate lua valorile: top, middle și bottom. În exemplul de mai jos este creată clasa top care va putea fi aplicată elementelor <td> ale tabelului:

Atributul float este folosit pentru alinierea textului cu imaginile și poate avea valorile: left și right. În funcție de valoarea aleasă imaginea va fi aliniată în partea opusă a paginii.

3.5. Tabulare

Text-indent este folosit pentru alinierea textului în interior având valori exprimate în inci (in), centimetri (cm) sau pixeli (px). În exemplul de mai jos text-indent este aplicat etichetei p deplasând textul cu 10 pixeli în interior:

3.6. Decorare

Text-decoration adaugă sublinierea sau tăierea blocului text asociat și poate avea valorile underline, line-through sau none. În următorul exemplu stilul asociat etichetei p este prezentat în head.

Exemplu:

<title>Titlu2</title>
<style type="text/css">
<!—

p{text-decoration: underline;}
–>
</style>

</head>
<body>
Text normal
<p>Text subliniat</p>
</body>
</html>

3.7. Culoare

Atributul color definește culoarea textului dintr-o zonă sau întraga pagină. Următoarea sintaxă exemplifică stilul asociat tagului p prezentat în head:

<html>

<head>

<title>Titlu3</title>

<!–

p{color: #0000FF;}

–>

</style>

</head>

<body>

Text normal

<p>Text albastru</p>

</body>

</html>

3.8. Stiluri pentru legături

În HTML culoarea legăturilor, adică a link-urilor, poate fi stabilită prin atributele link, alink și vlink declarate în interiorul etichetei body. Același lucru și chiar mai mult poate fi realizat folosind următoarea sintaxa CSS.

Exemplu:

<html>
<head>
<title>Titlu4</title>
<style type="text/css">
<!–
a{font-family: arial; font-size: 20px;}
a:link {color: #0000FF;}
a:visited {color: #00FF00;}
a:active {color: #FF0000;}
a:hover {color: #000000;}
–>
</style>
</head>
<body>
Text normal
<a href="exemplu4_4.html">link</a> catre exemplul 4_4
</body>
</html>

a – definește stilul general pentru legătură;

a:link – definește stilul legăturii nevizitate;

a:visited – definește stilul legăturii vizitate;

a:active – definește stilul legăturii active;

a:hover – definește stilul când mouse-ul este deasupra legăturii .

3.9. Stiluri pentru background

Background sau altfel spus fundalul, atât culoare cât și imagine poate fi definit pentru întreaga pagină, o celulă a tabelului său pentru text. Background-color definește culoarea de fond și poate fi asociat oricărei etichete HTML. Ca exemplu se se va defini un stil pentru întreg body-ul și un altul pentru tag-ul p:

<html>
<head>
<title>Titlu5</title>
<style type="text/css">
<!–
body {background-color: #FFFF00;}
p {background-color: #FF0000;}
–>
</style>
</head>
<body>
Text normal<p>Text cu background roșu</p>

</body>
</html>

Imagine de fond: imaginile pot fi folosite ca fundal în spatele întregii pagini, a unui obiect sau a textului. Background-image asociază o imagine ca fundal unui obiect. În exemplul se definește un stil pentru tag-ul p:

Repetarea: în funcție de dimensiunile obiectului căruia îi sunt asociate imaginile de fond se repetă pe orizontală și verticală. Repetarea poate fi controlată prin parametrul background-repeat care poate lua valorile:

repeat-x imaginea se repetă pe orizontală;

repeat-y imaginea se repetă pe verticală;

no-repeat imaginea nu se repetă .

Exemplu:

Poziția imaginii: în mod normal imaginea de fundal începe din colțul stânga sus al obiectului asociat, dar acest lucru poate fi controlat prin comanda CSS background-position și sunt acceptate următoarele două valori:

în prima poziție poate fi: top, center, bottom, percentage sau pixel;

în a doua poziție poate fi: right, center, left, percentage sau pixel.

În următorul exemplu imaginea de fundal este asociată tag-ului body fiind amplasată top și center, fară repetare:

3.10. Stiluri pentru liste

List-style-type: folosind eticheta ol din HTML se crează liste ordonate sau numerotate. Adaugând comenzi CSS în zona head vor putea fi adăugate, pe lângă numere și cifre și alte simboluri.

Exemplu:

List-style-image: în afara simbolurilor de marcaj prestabilite, cunoscute de browser pot fi folosite și imagini prin comanda CSS list-style-image. Imaginile sunt introduse prin adresa url(), iar exemplul următor prezintă lista ordonată folosind ca marcaj imaginea punct.gif:

3.11. Chenare și margini

Fiecare element este încadrat într-o casetă care este compusă din următoarele elemente:

marginea (margin) este spațiul exterior chenarului până la celelalte elemente;

chenarul (border) este o bordură care înconjoară elementul;

completarea (padding) stabilește distanța dintre conținut și chenar;

conținutul include informația utilă (text, tabele, imagini, formulare, etc.)

Originea elementului este considerat coltul din dreapta sus, față de care se vor raporta toate dimensiunile prezentate în continuare.

Fig. 3.1

Width și height

Lățimea și înălțimea unui element sunt stabilite în HTML prin atributele width și height. Aceste atribute pot fi adăugate sau suprascrise prin comenzi CSS. În exemplul următor s-au folosit comenzi CSS pentru modificarea dimensiunilor originale ale imaginii:

Padding și margin

Padding stabilește distanța dintre obiect și chenar simultan pentru toate laturile. Distanțele pot fi stabilite și individual folosind padding-top, padding-bottom, padding-left sau padding-right. Margin stabilește distanța dintre chenar și celelalte obiecte din pagină simultan pentru toate laturile. Distantele pot fi stabilite și individual folosind margin-top, margin-bottom, margin-left sau margin-right. Valorile pentru padding și margin pot fi exprimate în: px (pixeli), in (inci), pt (puncte) sau cm (centimetri). În exemplul următor, folosind comenzi CSS, imaginea este pozitionată la 100px față de latura stângă și 25px față de latura de sus:

<html>
<head>
<title>Titlu6</title>
<style type="text/css">
<!–
img {margin-left: 100px; margin-top: 25px;}
–>
</style>
</head>
<body>
<img src="margini.gif">
</body>
</html>

Border este comanda CSS pentru definirea chenarului, având proprietățile asociate width, style și color. Pentru a fi siguri că aceste proprietăți funcționează pe toate browserele, trebuie să se declare pentru border cel puțin width și style. Border-width se referă la grosimea chenarului și poate fi exprimată în px (pixeli), pt (puncte), cm (centimetri) sau in (inci), iar border-style stabilește tipul chenarului și poate fi de următoarele tipuri: dotted, dashed, solid, double, groove, ridge, inset și outset. Border-color stabilește culoarea chenarului și poate fi exprimata prin valoare hexazecimală sau în cuvinte. Următorul exemplu ilustrează nouă clase utilizând proprietățile border-width, border-style și border-color:

<html>
<head>
<title>Titlu 7</title>
<style type="text/css">
<!–
.clasa1 {border-width: 2px; border-style: dotted; border-color: red;}
.clasa2 {border-width: 3px; border-style: dashed; border-color: blue;}
.clasa3 {border-width: 2px; border-style: solid; border-color: green;}
. –>
</style>
</head>
<body>
<div class="clasa1">border-width: 2px; border-style: dotted; border-color:

red;</div><br>
<div class="clasa2">border-width: 3px; border-style: dashed; border-

color: blue;</div><br><div class="clasa3">border-width: 2px; border-

style: solid; border-color: green;</div><br>

</body>
</html>

Rezultatul:

3.12. Poziționare

Poziționarea permite așezarea unui obiect într-un anume loc folosind coordonate. Totodată obiectele pot fi poziționate pe nivele diferite, unul deasupra celuilalt, de exemplu.

Atât poziționarea absolută (ASOLUTE) cât și cea relativă (RELATIVE) folosesc proprietațile left și top exprimate în px (pixeli), in (inci), pt (puncte), ems, procentaje sau cm (centimetri).

Poziționarea absolută plasează obiectul în pagină exact în locul dat de indicat left și top. Astfel se poate crea un element liber față de celelalte din pagină. Obiectul poate lua formă de text, imagine sau orice alt element multimedia. Exemplului următor i s-a aplicat poziționarea absolută tag-ului h4.

<html>
<head>
<title>Titlu8</title>
</head>
<body>
<h4 style="position: absolute; left: 50px; top: 50px">Text 1</h4>
<h4 style="position: absolute; left: 100px; top: 200px">Text 2</h4>
</body>
</html>

Poziționare relativă reprezintă poziția normală pe care o ocupă un element, după elementele anterioare și înaintea celor următoare. Poate fi deplasat față de aceasta poziție folosind proprietaîile left și top. În exemplul ce urmează au fost folosite două obiecte, unul poziționat absolut, iar celălalt relativ:

<html>

<head>

<title>Titlu9</title>

<!–

.absolut {position: absolute; left: 200px; top: 150px;}

.relativ {position: relative; left: 50px; top: 50px;}

–>

</style>

</head>

<body>

<div class="absolut">Poziționare absolută, independent de celelate

obiecte din pagină</div>

Text

<div class="relativ">Poziționare relativă, după "Text"</div>

</body>

</html>

În cadrul poziționării tridimensionale elementele sunt unul deasupra celuilalt, într-o stivă utilizând un indicativ (index-z) începând cu 0, următorul 1 și așa mai departe. Elementul cu indexul cel mai mare este așezat deasupra. În sintaxa următoare s-au folosit două obiecte, unul poziționat absolut celalalt relativ:

</style>

CSS oferă posibilități nenumărate în ceea ce privește formatarea înfățișării paginilor și site-urilor web. Folosirea acestei facilități este încurajată, întrucât reduce timpul de lucru, utilizând o singură formatare aplicată tuturor paginilor site-ului, contribuind astfel la uniformizarea stilului. Totodată, modificările și corecturile aplicate ulterior vor fi automat preluate în toate paginile site-ului.

Capitolul 4. Limbajul PHP

4.1. Introducere

PHP este prescurtarea de la Hypertext PreProcessor. Spre deosebire de paginile HTML care puteau fi verificate și pe calculatorul local paginile PHP nu pot fi verificate decat dacă sunt găzduite pe un server web care are instalat PHP.

Când se accesează o pagină HTML serverul care o găzduiește trimite pagina HTML către browser spre afișare. În cazul unei pagini PHP serverul citește codul PHP, îl interpretează și generează dinamic pagina HTML care este trimisă browserului spre afișare. Acesta este motivul pentru care utilizatorii folosesc PHP pentru construirea unor pagini cu conținut dinamic.

Fișierele PHP au extensia .php, iar acestea se pot scrie cu diferite versiuni ale Notepad sau cel mai indicat, cu un editor specializat care va indica și numărul liniilor, lucru util la depanarea scripturilor. Se verifică apoi să nu existe extensii ascunse urmând calea: My Computer -> Tools -> Folder Options -> View -> debifând Hide extensions for known file types. Pentru a crearea fișierelor php se va alege cu click dreapta de la mouse, New -> Text Document, care urmează apoi să fie redenumit în exemplunume.php.

Când PHP-ul parcurge un fișier de fapt ,,citește” textul până când întâlnește una din etichetele speciale care-i spun să înceapă să interpreteze textul ca pe cod PHP. Se execută codul până când este întâlnită eticheta de închidere. Apoi se reia operația de ,,citire” a textului. Acesta este motivul pentru care se poate adăuga cod PHP în interiorul HTML-ului.

Este important de mențiomat că:

în cazul funcțiilor nu se face diferență între utilizarea literelor mari sau mici;

pentru variabile se face diferența între utilizarea literelor mari sau mici;

închiderea unui rând se face obligatoriu cu caracterul „ ; ”

ghilimelele se folosesc pereche "…" sau '…', cu precizarea că aceleași simboluri trebuie să folosite constant ("…' sau '…" constituie o eroare).

Codul PHP este delimitat de unul din următoarele seturi de etichete de deschidere și închidere:

<? php… ?> – etichete recomandate

<?… ?>

<%… %> – etichete de tip ASP, folosirea lor necesită setări speciale pe server

Cel mai simplu script PHP este următorul:

<?php

echo "Acesta este un script PHP";

?>

Funcția echo este folosită pentru afișarea informațiilor delimitate de ghilimele. Similară acesteia este funcția print. În situația în care scriptul nu este scris corect limbajul php va afișa eroarea indicând și locul unde aceasta apare. Erorile sunt afișate doar dacă serverul este setat corespunzător, și anume, dacă în php.ini sunt setate dISPlay_errors=On și error_ reporting=E_ALL).

În interiorul scriptului se pot insera și etichete HTML, după cum se poate observa în următorul exemplu:

<?php ?>.

<html>

<head><title>Exemplul1</title>

</head>

<body>

Bloc HTML<br>

<?php

echo "Bloc PHP";

?>

</body>

</html>

În php se folosesc cu precădere trei metode prin care se poate adăuga un comentariu în interiorul codului, care nu va fi afișat în browser, având mai degrabă un scop informativ și orientativ pentru programator. În următorul exemplu informațiile ce urmează după caracterele // sau # reprezintă comentarii:

// Urmează un comentariu în PHP

Un comentariu format din mai multe linii este încadrat în /* și */.

/* Comentariul în PHP scris

pe două linii */

4.2.Lucrul cu fișiere

Cu ajutorul php-ul se pot executa anumite operații asupra fișierelor aflate pe server cum ar fi următoarele categorii:

fopen() – folosit pentru deschiderea fișierului indicat;

fclose() – folosit pentru închiderea acelui fișier;

fread() – pentru citirea conținutul fișierului;

fwrite() – folosit în cazul scrierii în fișier;

filesize() – care indică dimensiunea fișierului.

Deschiderea fișierelor

Sintaxa funcției fopen() este: fopen(fișier1, fișier2);

fișier1 reprezintă fișierul principal, altfel spus calea către fișier sau adresa fișierului care se dorește a fi deschis, iar fișier2 reprezintă modul în care va fi deschis fișierul dorit.

Citirea fisierelor

Sintaxa funcției fread() este:

$filename="proba.txt";

$handle=fopen($filename, "r");

$contents=fread($handle, filesize($filename));

Scrierea în fișiere

Sintaxa funcției fwrite() este: fwrite($handle, "conținut care va fi scris în fișier");

Verificarea drepturilor de acces asupra fișierului

Sintaxa funcției is_writable este: is_writable($fișier1); care returnează TRUE dacă documentul poate fi accesat, și FALSE dacă nu este permisă accesarea acestuia.

Verificarea dreptului de scriere în fișier.

Pentru aceasta, primul pas este crearea fișierului test.txt iar apoi se verifică exemplul care va returna mesajul ,,Acces interzis scrierii în fișier”. Se modifică drepturile asupra fișierului, adăugând scrierea. La final se verifică iar exemplul care va returna mesajul ,,Acces permis scrierii în fișier”.

<?php

$filename="test.txt";

if(is_writable($filename)) { //se verifică dreptul de scriere în fișier

echo "Acces permis scrierii în fisier";

} else {

echo "Acces interzis scrierii în fișier";

}

?>

Închiderea fișierului

Sintaxa funcției fclose() este: fclose($handle);

4.3. Funcții

Funcția reprezintă o secvență de cod ce poate fi utilizată de mai multe ori în interiorul scripturi lungi și complexe, și se prezintă în script prin declarația ei. Funcția invocată va conține același număr de argumente ca în declarație.

function fun($arg_1,$arg_2, $arg_n) {

echo "Exemplu.\n";

return $val

}

unde: – fun este numele funcției

– $arg_1, $arg_2, … , $arg_n sunt argumentele funcției

– $val este valoarea returnată de funcție

În următorul exemplu este prezentată o funcție care adună 2 variabile:

<?php

function adunare($a,$b) {

$suma=$a+$b;

return $suma;

}

$rezultat=adunare(5,16);

echo $rezultat;

?>

Acest exemplu va genera un tabel:

<?php

function tabel($lim) {

echo "<table border=\"1\">\n";

for ($i=0; $i<=$lim; $i++) {

echo "<tr><td>rândul ".$i."</td></tr>\n";

}

echo "</table>";

}

tabel(9); //tabel cu 10 rânduri

?>

4.4. Preluarea datelor din formularele HTML

În HTML pentru lucrul cu formulare se folosește tag-ul form are atributele action și method, iar fiecărui câmp din formular i se va atribui o denumire, prin name. Atributul action indică fișierul care prelucrează datele introduse în formular iar când este acționat butonul ,,TrimiteMethod” indică modul în care datele sunt trimise spre prelucrare pe server și poate avea valorile:

– POST când datele trimise nu sunt vizibile utilizatorului;

– GET când datele sunt adăugate la adresa URL.

Name este un atribut care identifică datele introduse în fiecare câmp al formularului. Se consideră că într-un formular există un câmp cu name="nume" și method="POST". Fișierul indicat de action va prelua datele introduse în câmpul ,,nume” astfel: $_POST["nume"];.

Acest exemplu ilustrează un formular cu un câmp și scriptul php de preluare a datelor:

Nume: <input type="text" name="nume"><br>

</form>

/* urmează fișierul exemplu3_1.php */

<?php

$nume=$_POST["nume"];

echo $nume;

?>

Verificarea datelor introduse în formular

Pentru a fi siguri că utilizatorul a completat câmpurile trebuie să adăugăm scriptului partea de verificare. Pentru a exemplifica acest lucru, se va folosi același formular dar la care s-a adăugat și partea de verificare:

<?php

$nume=$_POST["nume"];

if ($nume=="") {

echo "Câmpul nume nu este completat";

} else {

echo $nume;

}

?>

Condiții simultane pentru varificareadatelor

Folosind modelul anterior se pot prelua date și se poate face verificarea pentru toate câmpurile formularului. Datele preluate pot fi introduse într-o bază de date sau prelucrate în vederea trimiterii prin email în funcție de cerințele aplicației. În afara preluării datelor, formularele se utilizează și în cazul urcării fișierelor pe server luând măsurile de precauție necesare pentru a evita eventualele upload-uri de fișiere nedorite pe server. Pentru upload formularul va conține un câmp de tip input cu type="file" iar tag-ul form va conține în plus un argument enctype=" multipart/form-data".

4.5. Structuri de control

Structurile de control permit definirea unei condiții și apoi executarea unor operații în funcție de răspuns. Dintre cele mai importante se pot aminti:

If este instrucțiunea condițională cel mai des folosită, având următoarea sintaxă:

if (condiție) {

instrucțiuni executate dacă este îndeplinită condiția ;

}

Condiția este încadrată de paranteze rotunde iar instrucțiunea care se execută în cazul în care condiția este îndeplinită între acolade. Neîndeplinirea condiției rezultă în execuția funcțiilor ce urmează după închiderea acoladei. În următorul exemplu se compară două variabile și se afișează un mesaj:

<?php

$a=4;

$b=3;

echo "$a=4<br>";echo "$b=3<br>";

if ($a>$b) {

echo "$a>$b";

}

?>

Else este altă instrucțiune condițională care indică ce se execută în cazul în care condiția menționată în instrucțiunea if nu este îndeplinită și are sintaxa:

if (condiție) {

instrucțiuni executate dacă este îndeplinită condiția;

} else {

instrucțiuni executate dacă nu este îndeplinită condiția;

}

În acest exemplu se vor compara două variabile și se va afișa un mesaj:

<?php

$a=2;

$b=9;

echo "$a=2<br>";

echo "$b=9<br>";

if ($a>$b) {

echo "$a>$b";

} else {

echo "$a<$b";

}

?>

Elseif este o combinație între if și else. În cazul în care condiția if nu este îndeplinită se introduce elseif care testează încă o condiție. Dacă nu este îndeplinită a doua condiție se execută declarația introdusă prin else.

if (condiția1) {

instrucțiuni executate dacă este îndeplinită condiția 1;

} elseif (conditia2) {

instrucțiuni executate dacă este îndeplinită condiția 2;

} else {

instrucțiuni executate dacă nu este îndeplinită condiția 2;

}

Funcția switch este asemănătoare funcției if dar condiția are mai mult de două valori. Exemplul de mai jos transformă numărul zilei în numele ei:

<?php

$ziua=5;

echo $ziua;

echo "<br>";

switch ($ziua) {

case 1:

echo "Luni";

break;

case 2:

echo "Vineri";

break;

}

?>

While este o instrucțiune de tip buclă. Atât timp cât condiția este adevărată se repetă bucla după cum exemplifică și următoarea sintaxă:

<?php

$numar=1;

while ($număr<=7) {

echo $numar."<br>";

$numar++;

}

?>

For este tot o instrucțiune de tip buclă și are următoarea sintaxă unde expresia1 este evaluată la începutul buclei, expresia2 se verifică la începutul fiecărei iterații, iar expresia3 se execută la sfârșitul fiecărei iterații:

for (expresia1; expresia2; expresia3) {

instructiuni de executat;

}

?>

În următorul exemplu se inițializează variabila i cu valoarea 1, se verifică dacă este mai mică sau egală cu 10 iar apoi se incrementează. La fiecare iterație se tipărește variabila i.

<?php

for ($i=1; $i<=10; $i++) {

echo $i."<br>";

}

?>

Foreach este o construcție care funcționează doar cu matrice, generând erori atunci când sunt folosite variabile cu tipuri de date diferite sau variabile neinițializate. Sintaxa folosită este:

foreach ($matrice as $cheie=>$valoare) {

instrucțiuni de executat;

}

Exemplu:

<?php

$personal = array(

"Alexandru" => manager,

"Mihaela" => tehnician,

"Bogdan" => instructor,

"Violeta" => profesor,

"Alma" => pensionar

);

foreach ($personal as $nume => $meserie) {

echo "$nume => $meserie<br>";

}

?>

Include și require sunt două funcții asemănătoare folosite pentru includerea în paginile php a unor fișiere externe. Diferența între cele două funcții constă în faptul că dacă include dă greș scriptul generează o avertizare dar funcționează în continuare, în timp ce la require se termină executarea scriptului.

include "fisier1.php";

require "fisier2.html";

Funcția break oprește forțat execuția structurilor for, foreach, while, do..while sau switch. Break acceptă opțional un argument numeric care indică numărul de structuri imbricate a căror funcționare este oprită. În exemplul următor, la i=6 se oprește execuția buclei:

<?php

for ($i=0; ;$i++) {

if ($i>6) {

break;

}

echo $i."<br>";

}

?>

Continue este o funcție care sare peste restul din iterația buclei curente și continuă execuția la începutul iterației următoare. Continue acceptă opțional un argument numeric care indică numărul de bucle care vor fi sărite până la sfârșit. Acest exemplu ilustrează cum se sare execuția peste i==5:

<?php

for ($i=0;$i<8;$i++) {

if ($i==5)

continue;

echo $i."<br>";

} ?>

Dacă este chemată din interiorul unei funcții declarația return() oprește imediat execuția funcției curente și furnizează argumentul ca valoare a funcției. Dacă este chemată în scop global execuția scriptului curent se oprește.

4.6. Operatori

În limbajul php se utilizează mai multe categorii de operatori, iar dintre cei mai importanț sunt: operatorii aritmetici, operatorii de atribuire, operatorii de comparație, cei logici și cei multipli. Operatorii aritmetici sunt de adunare, de scădere, pentru înmulțire și pentru împărțire.

Exemplu:

<?php

$a=12;

$b=3;

$c=7;

$adunare=$a+$b;

$scădere=$a-$b;

$înmulțire=$a*$b;

$împărțire=$a/$b;

$modulo=$a%$c;

echo $a."+".$b."=".$adunare."<br>";

echo $a."-".$b."=".$scădere."<br>";

echo $a."x".$b."=".$înmulțire."<br>";

echo $a.":".$b."=".$împărțire."<br>";

echo $a."%".$c."=".$modulo."";

?>

Operatorii de atribuire

Principalul operator de atribuire este = și înseamnă asocierea operatorului din stânga cu valoarea expresiei din dreapta (a nu se confunda cu egalitatea). Valoarea unei expresii de atribuire este valoarea atribuită, adică valoarea lui $a=5 este 5.

$a=7;

$a+=6; //atribuie lui $a valoarea 13, același lucru cu $a=$a+6

$b="Bună ";

$b.="ziua"; // atribuie lui $b valoarea "Buna ziua", același lucru cu $b=$b."ziua";

Operatorii de comparație

Operatorii logici

Operatorii multipli

Într-o construcție PHP pot fi folosiți împreună mai mulți operatori, iar următorul exemplu ilustrează acest lucru:

<?php

$a=12;

$b=3;

$c=3;

echo $a."+".$b."+".$c."=".($a+$b+$c)."<br>";

echo $a."x".$b."-".$c."=".($a*$b-$c)."<br>";

?>

Incrementarea și decrementarea unui număr

Mărirea unui număr cu o unitate se numește incrementare, iar scăderea cu o unitate se numește decrementare. Incrementarea se poate realiza adunând o unitate la acel număr sau variabila, dar se poate folosi și varianta prescurtată.

Numere aleatoare

Rând() este funcția din PHP care generează automat numere aleatoare și poate primi parametri limită minimă și maximă a numerelor generate.

Funcția de rotunjire

Round() este funcția de rotunjire și poate primi ca parametru numărul de cifre zecimale după rotunjire, după cum se poate vedea în următorul exemplu:

<?php

echo "27,54621 rotunjit este: ".round(27.54621)."<br>";

echo "27,54621 rotunjit cu 2 zecimale este: ".round(27.54621,2)."";

?>

4.7. Constante

Caracteristicile constantelor se referă la următoarele contexte:

au o valoare, dar spre deosebire de variabile aceasta nu poate fi schimbată sau ștearsă și nu sunt precedate de simbolul $;

numele este case sensitive și va începe obligatoriu cu o literă. Poate conține litere mari sau mici, cifre și caracterul _ dar fără spații;

este recomandat, ca denumirea constantei să fie scrisă cu majuscule pentru a fi mai ușor identificată de programator;

ca și în cazul variabilelor superglobale constantele au un caracter global;

pot lua doar valori scalare.

Pentru definirea constantei se folosește funcția define(), iar utilizarea acesteia este ilustrată în exemplul următor, unde constanta NUME are valoarea Vornicu:

<?php

define('NUME','Vornicu');

echo NUME;

?>

Ca și în cazul variabilelor construcția echo poate găzdui mai multe constante și text împreună după cum se poate observa și din următorul exemplu:

<?php

define('NUME','Vornicu');

define('PRENUME','Vasile');

echo "Tatăl meu se numește ".PRENUME. " ".NUME."";

?>

4.8. Variabile

Variabila poate fi considerată un container de date care poartă un nume și i se poate atribui o valoare care poate fi modificată de mai multe ori sau salvată într-o bază de date. Numele dat variabilei începe cu simbolul $ urmat de orice literă mică (a-z) sau mare (A-Z) sau cu caracterul _, dar niciodată cu o cifră și de asemenea, nu poate conține spații goale. De exemplu sintaxa: $nume_variabilă.

Este recomandat ca numele variabilei să fie cât mai sugestiv pentru a evita interpretările greșite în timpul scrierii scriptului. În următorul exemplu i se atribuie variabilei $program valoarea php și apoi se afișează:

<?php

$program="PHP";

echo $program;

?>

Alt exemplu: în aceeași construcție echo se poate folosi text împreună cu o variabilă:

<?php

$luna="iulie";

echo "Am concediu în luna ".$luna."";

?>

Este de la sine înțeles că modificând valoarea variabilei se modifică ceea ce va fi afișat de către browser. Într-un script se pot folosi mai multe variabile care pot fi adăugate în aceeași construcție echo, spre exemplu:

<?php

$ziua="22";

$luna="12";

$anul="1995";

echo "Data nașterii este ".$ziua.".".$luna.".".$anul."";

?>

În PHP există opt tipuri de variabile primitive îmoarțite pe categorii, după cum urmează:

patru tipuri scalare: întregi, numere cu virgulă flotantă, șiruri și booleene;

două tipuri compuse: matrice și obiecte;

două tipuri speciale: resurse și NULL.

Întreg, în engleză integer, este un simplu număr întreg exprimat în sistem zecimal, hexazecimal sau octal, opțional putând purta și semn (+ sau -). În sistem octal numărul trebuie precedat de 0 iar pentru hexazecimal precedat de 0x.

$a=2006; //număr exprimat în sistem zecimal

$a=-52; //număr negativ exprimat în sistem zecimal

$a=0135; //număr octal (echivalent cu 207 zecimal)

$a=0x1D; //număr hexazecimal (echivalent cu 29 zecimal)

Numărul cu virgula flotantă, float în limba engleză, numit și dublă precizie, este un număr real care poate fi folosit cu următoarea sintaxă:

$a=3.14; //număr zecimal

$a=-2.59; //număr zecimal negativ

$a=1.3e2; //130

$a=6E+3; //6000

Exemplu:

<?php

$temperatura=+10;

$vant=8.5;

echo "La Pâncota sunt ".$temperatura."<sup>o</sup>C iar vantul bate cu ".$vant."m/s";

?>

Șirul, numit și string, este o variabilă care conține o combinație de numere, litere, simboluri și spații delimitate între două ghilimele simple sau duble. Șirurile pot conține și nume de variabile, după cum se poate observa în următorul exemplu:

<?php

$nume="Ivan Paul";

$data="19 iulie 2005";

echo "Solicitarea a fost facuta de domnul ".$nume." pe data de ".$data."";

?>

Cea mai simplă cale pentru a specifica un șir este să îl încadrăm între ghilimele simple (') dar ghilimele simple conținute vor fi precedate de caracterul \. În această situație variabilele și caracterele speciale vor fi ignorate. Dacă șirul este definit prin ghilimele duble (") PHP-ul interpretează mai multe secvențe pentru caracterele speciale:

Variabila booleană exprimă valoarea de adevăr: TRUE sau FALSE. Orice valoare diferită de zero sau șir care nu este gol, adică conține cel puțin un caracter, sunt considerate ca fiind TRUE, adică adevarate. Matricei, adică funcției array i se pot atribui mai multe valori comparativ cu numerele sau șirurile care pot conține doar o singură valoare. Matricele folosesc chei sau indecși pentru a identifica valorile stocate. O matrice se crează folosind funcția array():

$matrice = array('apa','aer','foc');.

În următorul exemplu se crează o matrice și se vor tipări elementele folosind funcția print_r:

<?php

$matrice = array('ocean','mare','lac');

print_r ($matrice);

?>

Într-un al doilea exemplu se va utiliza aceeași matrice dar se va aplica funcția var_dump() pentru afișarea elementelor cuprinse în matrice precum și lungimea fiecărei valori a sa.

<?php

$matrice = array('ocean','mare','lac');

var_dump ($matrice);

?>

Variabile predefinite

PHP oferă un mare număr de variabile predefinite oricărui script care rulează și sunt alese funcție de serverul pe care funcționează. PHP Superglobals sunt variabile disponibile oriunde în script. Alte exemple de variabile sunt după cum urmează:

Cele mai des folosite variabile globale sunt prezentate în următorul tabel:

Scopul variabilelor depinde de contextul în care sunt definite. Majoritatea variabilelor din php au un singur scop iar acesta se aplică și pentru fișierele adăugate prin funcțiile include() și require(). Orice variabilă folosită în interiorul unei funcții este limitată doar scopului funcției. În exemplul următor, deoarece funcția folosește o variabilă declarată în afara ei, echo nu va afișa nimic:

<?php

$a=10;

function mihaela() {

echo "Mihaela are ".$a." ani";

}

mihaela();

?>

Un alt exemplu ilustrează acum pentru aceeași funcție, dar căreia i-a fost declarată variabila de tip global, echo va afișa correct:

<?php

$a=10;

function mihaela() {

global $a; //declaram variabila $a de tip global

echo "Mihaela are ".$a." ani";

}

mihaela();

?>

Limbajul php stă la baza a milioane de aplicații web dinamice din ziua de astăzi, bine-nțeles, acest număr fiind în continuă creștere. Acesta este preferat întrucât caracteristicile și funcționalitățile sale îl fac să fie ușor și rapid de utilizat și implementat, transparent, și nu în ultimul rând, cu un grad ridicat de compatibilitate pentru diferitele sisteme de operare și servere web. Programatorii apelează cel mai des la un astfel de limbaj, atunci când vine vorba de crearea unei pagini web dinamice, cu posibilitatea de a fi conectată la diferite tipuri de baze de date, pentru a afișa un conținut cât mai atrăgător și interesant.

Sklar, D. și Trachtenberg, A. (2014). PHP Cookbook – Solutions and Examples for PHP Programmers

Valade, J. (2010). PHP and MySQL for Dummies

Koterov, D. (2002). Creating Your Web Site with PH P

Capitolul 5. Baze de date MySQL

5.1. Noțiuni de bază

Bazele de date sunt folosite pentru stocarea informațiilor în vederea furnizării ulterioare în funcție de solicitarea primită. MySQL este un sistem de baze de date funcțional independent. În php există funcții pentru toate operațiile executate asupra bazelor de date MySQL.

Administrarea MySQL se poate face din linie de comandă sau folosind browserul și accesând aplicația numită PHPMyAdmin scrisă în PHP. Cele mai uzuale operații cu bazele de date sunt:

În MySQL spațiul alocat pe discul serverului este funcție de tipul de date. Câteva din tipurile de date folosite în bazele de date MySQL sunt:

Pentru ca baza de date să fucționeze mai bine, coloanelor li s-au atribuit modificatori de coloană. Tipul de date numere întregi începe de la valori negative la pozitive. Dacă se adaugă opțiunea UNSIGNED, care este un modificator de coloană, valorile nu vor mai fi negative iar numărătoarea va începe de la 0. Alți modificatori sunt:

AUTO_INCREMENT funcționează cu orice tip întreg. La fiecare rând nou adăugat în baza de date numărul asociat va fi incrementat;

NULL înseamnă fără valoare (diferit de spațiu sau zero);

NOT NULL înseamnă că orice înregistrare va fi considerată ceva;

PRIMARY KEY este rolul primei coloane din tabel, totodată reprezentând elementul de referință pentru fiecare linie.

5.2. Conectarea la baza de date

Ori de câte ori va fi necesar lucrul cu baze de date MySQL, este necesară conectarea la acea bază de date, iar pentru aceasta este folosită o sintaxă. Această secvență de cod cu se va salva cu numele conexiune.php putând fi preluată ulterior în mai multe scripturi utilizând funcția include(). Următorul exemplu ilustrează elementele necesare conexiunii la baza de date:

/* urmează fișierul conexiune.php */

<?php

$hostname="localhost";

$username="root";

$password="pass";

$database="test";

$conexiune=mysql_connect($hostname,$username,$password)

or die ("Nu se poate stabili conexiunea cu baza de date");

$bazadate=mysql_select_db($database,$conexiune)

or die ("Baza de date nu a putut fi găsită");

?>

Mysql_connect() este funcția prin care se face conexiunea la baza de date și are următorii parametri: numele serverului, nume utilizator și parolă pentru conectarea la baza de date. Variabila $conexiune va avea o valoarea TRUE sau FALSE în funcție de rezultatul conectării la serverul MySQL folosind funcția mysql_connect(), iar în cazul eșuării va afișa mesajul conținut de construcția die().

Mysql_select_db este funcția care stabilește baza de date cu care se dorește crearea unei conexiuni, având ca parametri numele bazei de date și identificatorul de acces la conexiunea către serverul MySQL.

În mod similar variabila $bazadate folosind funcția mysql_select_db va afișa în cazul negăsirii bazei de date mesajul conținut de die. Variabilele din fișierul conexiune.php se pot modifica în funcție de configurările propriei baze de date:

$hostname – reprezintă adresa serverului, de cele mai multe ori este localhost dar pentru siguranță întrebați administratorul serverului;

$username – se referă la username-ul de conectare la baza de date;

$password – este parola de conectare la baza de date;

$database – reprezintă numele bazei de date.

După ce finalizarea operațiilor dorite în baza de date, se va închide conexiunea folosind funcția mysql_close() având ca argument datele de acces la serverul MySQL: mysql_ close($conexiune);.

5.3. Crearea tabelelor – CREATE TABLE

Bazele de date conțin tabele care sunt similare cu cele din HTML întrucât și acestea conțin rânduri și coloane. Fiecare diviziune se numește celulă sau câmp și are anumite proprietăți. Fiecare tabel din baza de date are un nume sau titlu, la fel cum și fiecare coloană din tabel are un nume sau titlu. Sintaxa pentru crearea tabelului este: CREATE TABLE nume_tabel (coloana_1, coloana_2,…, coloana_n);.

Coloanele se delimitează prin virgulă iar fiecare coloană va avea un nume și tip. Pentru creare unui tabel, pentru început este necesară includerea în script a fișierul anterior creat, și anume conexiune.php, iar apoi se va folosi funcția CREATE TABLE. Mysql_query este o funcție folosită pentru interogarea unei baze de date care folosește ca parametri cererea emisă serverului MySQL și identificatorul de acces la baza de date.

Exemplu:

CREATE TABLE `products` (

`product_id` int(11) NOT NULL auto_increment,

`category_id` int(11) NOT NULL,

`nume` varchar(64) NOT NULL,

`descriere` text NOT NULL,

`culoare` varchar(255) NOT NULL,

`pret` int(11) NOT NULL,

PRIMARY KEY (`product_id`),

KEY `category_id` (`category_id`)

) ENGINE=InnoDB DEFAULT CHARSET=utf8 AUTO_INCREMENT=84 ;

5.4. Introducerea datelor – INSERT

INSERT este comanda pentru introducerea datelor în baza de date. Cel mai frecvent mod de introducere a datelor este preluarea lor dintr-un formular adecvat structurii bazei de date. Sintaxa pentru introducerea datelor în tabelul bazei de date este: INSERT INTO nume_tabel (coloana_1, coloana_2,…, coloana_n) values ('valoare_1','valoare_2',…,'valoare_n'); .

În următorul exemplu se vor introduce date într-un formular cu două câmpuri, nume și prenume și apoi cu scriptul insert.php datele vor fi introduse în baza de date.

/* urmează fișierul adăugare.html */

<html>

<head><title>Formular</title>

</head>

<body>

<b>Adăugare înregistrări</b>

Nume: <input type="text" name="nume"><br>

Prenume: <input type="text" name="prenume"><br>

</form>

</body>

</html>

/* urmează fișierul insert.php */

<?php

include "conexiune.php";

$nume=$_POST['nume'];

$prenume=$_POST['prenume'];

$query="INSERT INTO proba (nume, prenume) VALUES ('$nume','$prenume')";

if (!Mysql_query($query)) {

die(mysql_error());

} else {

echo "Datele au fost introduse";

}

mysql_close($conexiune);

?>

Precum în PHP, se va asocia un nume/ name fiecărui câmp din formular. La apăsarea butonului de trimitere, informațiile vor fi preluate de un script care poate identifica datele în funcție de câmpul în care au fost introduse. În exemplul anterior, datele introduse în câmpul nume din formular sunt preluate folosind variabila $_POST.

5.5 Preluarea datelor din tabele – SELECT

Funcția SELECT poate fi utilizată într-o comandă Mysql_query pentru a alege anumite informații din tabelul bazei de date. Sintaxa pentru introducerea datelor în tabelul bazei de date este: $sql=mysql_query("SELECT * FROM nume_tabel"); .

Pentru a afișa fiecare rând din tabel se folosește o buclă while și comanda mysql_fetch_row. Exemplul de mai jos afișează întregul conținut al bazei de date:

/* urmează fișierul select.php */

<?php

include "conexiune.php";

$sql=mysql_query("SELECT * FROM proba");

echo "<table border=1>";

echo "<tr><td>ID</td><td>Nume</td><td>Prenume</td></tr>";

while ($row=mysql_fetch_row($sql)) {

echo "<tr><td>$row[0]</td><td>$row[1]</td><td>$row[2]</td></tr>";

}

echo "</table>";

mysql_close($conexiune);

?>

Ca rezultat al acțiunii, datele au fost afișate fiecare într-o celulă a unui tabel. Folosind funcția mysql_num_rows($sql) se poate afla numărul de linii conținute de baza de date. Același exemplu prezentat anterior la care s-a aplicat numărul de linii al bazei de date, este ilustrat în continuare:

/* urmează fișierul select1.php */

<?php

include "conexiune.php";

$sql=mysql_query("SELECT * FROM test");

$rows=$mysql_num_rows($sql);

echo "<b>$rows</b> înregistrări în baza de date<p>";

echo "<table border=1>";

echo

"<tr><td>ID</td><td>Nume</td><td>Prenume</td></tr>";

while ($row=mysql_fetch_row($sql)) {

echo "<tr><td>$row[0]</td><td>$row[1]</td><td>$row[2]</td></tr>";

}

echo "</table>";

mysql_close($conexiune);

5.6. Operatorii de condiționare

Condiționalele sunt operatori care ne permit să particularizăm interogarea bazei de date. Următorul tabel include cei mai uzuali operatori pentru contextul bazelor de date:

Următorul exemplu ilustrează căutarea în baza de date folosind două câmpuri obligatorii (AND, &&):

/* urmează fișierul căutare1.html */

<html>

<head><title>Căutare 1</title>

</head>

<body>

<b>Căutare înregistrări</b>

Numele căutat: <input type="text" name="nume1"><br>

Prenumele căutat: <input type="text" name="prenume1"><br>

</form>

</body>

</html>

/* urmează fișierul where1.php */

<?php

include "conexiune.php"

$nume1=$_POST['nume1'];

$prenume1=$_POST['prenume1'];

$sql=Mysql_query("SELECT * FROM proba WHERE nume='$nume1' && prenume='$prenume1'");

echo "<table border=1>";

echo "<tr><td>ID</td><td>Nume</td><td>Prenume</td></tr>";

while ($row=mysql_fetch_row($sql)) {

echo "<tr><td>$row[0]</td><td>$row[1]</td><td>$row[2]</td></tr>";

}

echo "</table>";

mysql_close($conexiune);

?>

5.7. Criteriile LIKE și NOT LIKE

Când se dorește o căutare mai generală în baza de date, introducând doar câteva caractere, se folosesc criteriile LIKE sau NOT LIKE. Caracterul _ anunță că rezultatul va conține încă un caracter în plus iar % înlocuiește zero sau mai multe caractere. Acestea pot fi adăugate la început, la sfârșit sau în ambele părți. Exemplul următor ilustrează o căutarea generală folosind LIKE și caracterul % atât la început cât și la sfârșit:

/* urmează fișierul căutare2.html */

<html>

<head><title>Căutare2</title>

</head>

<body>

<b>Căutare înregistrări</b>

Numele căutat: <input type="text" name="nume1"><br>

</form>

</body>

</html>

/* urmează fișierul where2.php */

<?php

include "conexiune.php";

$nume1=$_POST['nume1'];

$sql=Mysql_query("SELECT * FROM test WHERE nume LIKE '%$nume1%'");

echo "<table border=1>";

echo "<tr><td>ID</td><td>Nume</td><td>Prenume</td></tr>";

while ($row=mysql_fetch_row($sql)) {

echo "<tr><td>$row[0]</td><td>$row[1]</td><td>$row[2]</td></tr>";

}

echo "</table>";

mysql_close($conexiune);

?>

5.8. Comanda UPDATE

Cu ajutorul comenzii update se poate modifica valoarea unei înregistrări din baza de date pentru un anume id, folosind următoarea sintaxă: UPDATE nume_tabel SET coloana_1='$nou_coloana_1', coloana_2='$nou_coloana_2',…, coloana_n='$nou_coloana_n' WHERE id='$nou_id';.

Cunoscând valoarea identificatorului id al unei înregistrări se poate efectua o actualizare a acesteia în baza de date, dar nu înainte de a afișa înregistrările pentru a selecta care se potrivesc solicitărilor. Primul fișier va afișa sub forma unui formular fiecare înregistrare din baza de date. Câmpurile formularelor sunt completate cu valorile corespunzătoare fiecarei înregistrări, ele putând fi modificate, precum în exemplul următor:

/* urmează fișierul update.php */

<?php

include "conexiune.php";

$query="SELECT * FROM proba WHERE id='$id'";

$result = Mysql_query("SELECT * FROM proba");

$num=mysql_numrows($result);

mysql_close();

$i=0;

while ($i < $num) {

$id=mysql_result($result,$i,"id");

$nume=mysql_result($result,$i,"nume");

$prenume=mysql_result($result,$i,"prenume"

);

?>

Nume: <input type="text" name="ud_nume" value="<? echo "$nume";?>">

Prenume: <input type="text" name="ud_prenume" value="<? echo "$prenume";?>">

</form>

<?php

++$i;

}

?>

5.9. Comanda DELETE

Ștergerea poate fi efectuată folosind id-ul înregistrării dorite cu sintaxa următoare: DELETE FROM nume_tabel WHERE id='$id';. Îm următorul exemplu, primul fișier va conține un formular prin care se vor introduce datele care urmează a fi căutate în baza de date:

/* urmează fișierul ștergere.html */ <html>

<head><title>Ștergere înregistrări</title>

</head>

<body>

<b>Căutare înregistrări în vederea ștergerii</b>

<p>

Numele căutat: <input type="text" name="nume"><br>

</form>

</body>

</html>

Un alt exemplu cuprinde al doilea fișier, care va afișa rezultatul căutării și un formular în care se va completa id-ul înregistrării care se dorește a fi ștearsă:

/* urmează fișierul delete.php */

<?php

include "conexiune.php";

$nume=$_POST['nume'];

$sql=Mysql_query("SELECT * FROM proba WHERE nume LIKE '%$nume%'");

echo "<table border=\"1\">";

echo "<tr><td>ID</td><td>Nume</td><td>Prenume</td></tr>";

while ($row=mysql_fetch_row($sql)) {

echo "<tr><td>$row[0]</td><td>$row[1]</td><td>$row[2]</td></tr>";

}

echo "</table>";

mysql_close($conexiune);

?>

<p>

<form method="POST" action="delete1.php"

ID-ul înregistrării care va fi stearsă: <input

type="text" name="id" size="3"><br>

</form>

Ca un ultim exemplu, al treilea fișier preia id-ul dorit și șterge respectiva înregistrare.

/* urmează fișierul delete1.php */

<?php

include "conexiune.php";

$id=$_POST['id'];

$sql=mysql_query("DELETE FROM proba WHERE id='$id'");

if (!$sql) {

die(mysql_error());

} else {

echo "datele au fost șterse";

}

mysql_close($conexiune);

?>

MySQL este mai mult decât un simplu limbaj de interogare și manipulare a înregistrărilor și structurii unei baze de date. Acesta se asociază cel mai des cu limbajul php, întrucât constituie perechea perfectă pentru a crea site-uri web ordonate, dinamice și totodată user-friendly, fară a necesita cunoștințe vaste în domeniul programării.

Capitolul 6. Aplicația WEB pentru promovarea și administrarea

Pensiunii La Poalele Dealului, Pâncota

6.1. Noțiuni generale

Această lucrare de diplomă are ca element central aplicația web creată pentru promovarea și administrarea unei pensiuni, mai precis pentru Pensiunea La Poalele Dealului din localitatea Pâncota, județul Arad. În realizarea acesteia am folosit în principal limbajul PHP și o bază de date MySQL, împreună cu importante elemente HTML și CSS. În construirea aplicației au fost parcurse cele mai importante etape din ciclul de dezvoltare a unei aplicații web:

identificarea cerințelor clientului;

alegerea produselor software pentru implementarea aplicației;

proiectarea aplicației;

implementarea propriu-zisă.

Întrucât aplicația web cu rol informativ a fost creată pentru o pensiune, cele mai importante elemente sunt cele care oferă informații despre localizare și condițiile de cazare, date de contact, prețuri și nu în ultimul rând, elemente vizuale care să stârnească interesul vizitatorilor online, cu scopul de a-i convinge să aleagă Pâncota ca următoare destinație turistică.

6.2. Alegerea limbajelor de programare necesare aplicației

Cerințele, crearea și manipularea unei baze de date multimedia, impun ca aplicația să fie o aplicație de tip web, cu interfață HTML. De asemenea aplicația are nevoie de o bază de date pentru a stoca informațiile referitoare la datele prezentate mai devreme. Aplicația prezintă totodată și un nivel de mijloc, serverul web și scripturile ce rulează pe acesta, pentru a procesa cererile transmise de către browser. Acest nivel de mijloc este responsabil de obținerea de date de la serverul de baze de date, procesarea acestora și trimiterea informațiilor intepretate către browserul client.

Pentru aplicația construită am folosit următoarea configurație soft:

MySQL, pentru stocarea informațiilor;

PHP pentru nivelul de mijloc (scripturi server);

Server WAMP.

6.3. Proiectarea aplicației

În continuare voi descrie procesul conceperii structurii bazei de date, cu alte cuvinte, tabelele și interconexiunile dintre acestea. Voi reliefa în acest sens anumite aspecte legate de proiectarea bazei de date, iar în final voi prezenta cerințele utilizatorului și modul în care acestea au fost implementate în cadrul aplicației.

Baza de date

Schema bazei de date numită pensiunepancota pentru aplicația web conține următoarele tabele: Administrare, Carteoaspeți, Imggal, Mesaje și Tarife.

Fig. 6.1 Structura bazei de date

Tabela de administare conține detalii despre contul de administare și drepturile care îi revin persoanei cu acest rol.

Fig. 6.2 Administrare

Mai precis, administratorul poate modifica informațiile de accesare a bazei de date, adică username-ul și parola, dar poate și să adauge alți utilizatori care să aibă aceleași drepturi de administrare. Alte drepturi importante ar fi cele de ștergere sau adăugare a imaginilor, modificarea prețurilor sau organizarea informațiilor.

În tabela carteoaspeți sunt salvate părerile și sugestiile utilizatorilor sau vizitatorilor, înregistrate împreună cu data la care au fost scrise precum și adresa de email și numele complet al utilizatorului, acestea fiind automat afișate și pe site.

Fig.6.3 Carteoaspeți

În tabela imggal, scurt de la image gallery, sau galeria de imagini sunt salvate pozele și numele acestora pentru galeria foto.

Fig. 6.4 Imggal

Tabela mesaje conține mesajele trimise prin intermediul formularului de contact de pe site, unde utilizatorul este rugat să completeze numele și prenumele, adresa de e-mail și textul care dorește să îl trimită administratorului. Și aici este înregistrată data la care au fost trimise mesajele, dar cu diferența că acestea nu vor fi afișate pe site. Administratorul poate alege să răspundă la acestea în funcție de natura lor, păstrând confidențialitatea.

Fig. 6.5 Mesaje

În tabela tarife administratorul are posibilitatea de a modifica prețurile de cazare ori de câte ori dorește, acestea fiind imediat actualizate și pe site.

Fig. 6.6 Tarife

Proiectarea nivelului de mijloc

Scripturile PHP trebuie să ia în considerare un număr important de aspecte de programare cum ar fi: identificarea utilizatorilor valizi, stocarea variabilelor de sesiune pentru asigurarea bunei funcționări a aplicației și interogarea bazelor de date. Autentificarea administratorului se face prin nume de utilizator și parolă în formularul:

Fig. 6.7 Panou administrare

6.4. Funcționarea aplicației

Butonul Login permite conectarea la baza de date, dacă informațiile introduse sunt corecte bineînțeles, permițând apoi administratorului să își exercite toate rolurile prezentate mai sus.

Funcționarea la nivelul vizitator

Vizitatorii pot vedea încă de pe prima pagină că este vorba despre o posibilitate de cazare în localitatea Pâncota din județul Arad. Accesând celelate pagini pot vedea galeria foto, un scurt istoric al locului, tarife și contact. În plus, există și o secțiune specială pentru interes general în partea dreaptă a paginilor, cu trimitere către clubul de fotbal local, primăria locală sau alte atracții turistice recomandate.

Pagina principală, Acasă, afișează numele pensiunii, informații referitoare la tarife, poze, bara de meniu cu opțiunile: Istoric, Galerie foto, Carte de oaspeți și Contact, informații de interes general dar și o poezie cu dublu rol, de descriere a locului și totodată de invitație pentru a-l vizita. Aceasta a fost compusă chiar de mine, cu inteția de a oferi site-ului și pensiunii totodată, un element vesel și original.

Fig. 6.8 Pagina principală

A doua pagină, Istoric, după cum ii spune și numele, prezintă informații cu privire la istoria și tradițiile locului împreună cu poze care să exemplifice cele scrise.

Fig. 6.9 Pagina de istoric

Galeria Foto, după cum a fost prezentată și anterior în partea de administrare, din perspectiva administratorului, cuprinde un set de poze facute chiar în camerele pensiunii, pentru a ajuta vizitatorii site-ului să observe cum sunt împărțite și utilate camerele, facilitățile oferite, și nu în ultimul rând decorul și curățenia.

Fig. 6.10 Galeria foto

Pe pagina Carte de Oaspeți, vizitatorii au ocazia să își exprime public părerea cu privire la experiența pe care au avut-o atât în cazul în care au fost deja oaspeți ai pensiunii, cât și în cazul în care doresc să o viziteze în viitor. În figura de mai jos sunt prezentate câteva astfel de mesaje.

Fig. 6.11 Cartea de oaspeți cu mesajele vizitatorilor

Pe pagina de contact sunt afișate adresa exactă, intervalul orar de funcționare a recepției, număr de telefon și adresă de e-mail, precum și o hartă a localității Pâncota, pe care este marcată poziția pensiunii La Poalele Dealului.

Fig. 6.12 Localizare pe hartă și informații de contact

Pentru cei care vor să se adreseze direct administrației pensiunii, s-a apelat și la facilitatea unui formular de contact, unde vizitatorii își pot exprima diverse curiozități sau posibile neclarități cu privire la cazare. Aceste mesaje nu vor fi făcute publice, fiind înregistrate doar în baza de dete unde doar administratorul le va putea citi.

Fig. 6.13 Formular pentru contactare directă

Funcționarea la nivelul Administrator

Prin conecatare la aplicație se pot gestiona următoarele:

galeria foto, unde se pot adăuga sau șterge imagini (figura 6.15);

tarifele, unde se pot modifica tarifele pentru camere;

mesajele, unde se pot citi și șterge mesajele trimise prin intermediul formularului de pe pagina Contact (figura 6.16);

cartea de oaspeti, de unde se pot citi sau șterge mesajele ce au fost publicate în Cartea de oaspeți;

setările de cont, unde administratorul își poate modifica parola sau alte date de contact (figura 6.17).

Fig. 6.14 Statistici generale

Fig. 6.15 Administrare galerie foto

Fig. 6.16 Administrare mesaje

Fig. 6.17 Administrare cont

6.5. Codul sursă al aplicației

În continuare voi prezenta codul aplicației care permite generarea unor secvențe din paginile prezentate anterior, iar din motive de relevanță voi prezenta doar cele mai importante pasaje din codul sursă, începând cu modul de autentificare din figura 6.18.

…

Fig. 6.18 Cod sursă pentru autentificare în cont

După cum am prezentat și în subpunctele anterioare, conexiunea la baza de date se realizează prin nume de utilizator și parolă, iar în acest moment vorbim despre utilizatorul bazei de date, nu cel definit pentru conctarea la site-ul web. Pentru aceasta s-a creat următorul șir de conectare:

Fig. 6.19 Cod sursă pentru conectarea la baza de date

Pentru afișarea imaginilor s-au folosit funcții în care sunt scrise interogări SQL după cum se poate vedea și din codul de mai jos. Galeria foto permite vizitatorilor vizualizarea imaginilor și în format mărit, nu doar în miniatură (thumbnail).

Fig. 6.20 Cod sursă pentru afișarea imaginilor din galeria foto

Pentru implementarea modulului de administrarea a paginii carte de oaspeți am folosit cod java script cât și php intercalate, după cum se poate observa din figura 6.21.

…

Fig. 6.21 Cod sursă pentru afișarea imaginilor din galeria foto

6.6. Mod de lucru

Înaintea începerii proiectării aplicației web, a fost necesară o documentare riguroasă în ceea ce privește limbajele de programare, crearea de site-uri și administrarea bazelor de date. După o bună fixare a conceptelor teoretice, am hotărât ce anume trebuie să conțină aplicația pentru a satisface toate cerințele unui site pentru o pensiune și am creat o bază de date locală cu imagini și pasaje de text care să fie incluse în aplicație.

Realizarea în sine a site-ului nu mi-a creat mari dificultăți, iar în puținele locuri în care a fost necesar, am consultat diferite tutoriale și forumuri pentru a găsi problema și pentru a o corecta. Odată selectate pasajele de text și imaginile pentru a fi incluse în site, mi-am putut face repede și o părere despre cum ar putea să arate produsul final, fapt care a redus foarte mult timp din etapa de design al aplicației web.

6.7. Dezvoltări ulterioare posibile

Aplicația prezentată este una minimalistă, respectând cerințele clientului, dar care poate fi dezvoltată cu timpul pentru a veni în întâmpinarea problemelor care apar în cadrul unui site care ridică pretenții din punct de vedere grafic și al securității.

Pe viitor se poate implementa un nivel de securitate mai ridicat atât la nivel de aplicație cât și la nivel de server. Pentru o creștere a securității se poate implementa, de exemplu, un istoric al tuturor operațiilor care sunt făcute pe serverul de baze de date respectiv.

De asemenea se pot introduce noi interogări a bazelor de date existente pentru a genera diferite situații precum și următoarele ajustări și îmbunătățiri:

un contor în php pentru monitorizarea traficului pe site;

în panoul de administrare implementarea opțiunii de adăugarea a noi utitizatori autorizați;

realizarea unei secțiuni noi pe pagina web ce conține turul virtual al pensiunii sau al orașului, fotografii panoramice la 360° sau videoclipuri,

crearea butoanelor cu trimitere în mediile de socializare online (Facebook, Twitter, Pinterest, ș.a.m.d.) pe măsură ce se vor crea profilurile și se va extinde aria publicului țintă.

În final, consider că aplicația web realizată de mine își îndeplinește scopul, întrucât răspunde cerințelor clientului atât în ceea ce privește partea de administrare, acesta având libertatea de actualiza site-ul cu poze sau prețuri, fără a fi necesare cunoștințe vaste în domeniul IT, cât și în ceea ce privește promovarea pensiunii La Poalele Dealului din localitatea Pâncota, întrucât o face prezentă în mediul online, de unde poate fi preluată cu ușurință de alte site-uri de recomandare și planificare a vacanțelor sau timpului liber.

Capitolul 7. Concluzii

Aplicațiile WEB reprezintă în general site-uri complexe, interactive, al căror înfățișare presupune cunoașterea cât mai detaliată a unor limbaje de scripting sau de programare îmbinate cu cunoștințe despre baze de date. Pentru construirea astfel de aplicații se pot folosi o multitudine de tehnologii, rămânând la latitudinea programatorului să aleagă cele mai bune variante pentru îndeplinirea scopului. Aplicațiile web oferă posibilitatea unui acces rapid și comod, prin intermediul interfeței familiare a paginilor web.

Această lucrare conține o scurtă introducere despre Internet ca serviciu și beneficiile utilizării acestuia, trecând apoi în revistă informații referitoare la limbajul HTML și modul de funcționare al acestuia. În următorul capitol am prezentat tehnologia CSS – Cascading Style Sheets și etichetele cele mai folosite în formatarea paginilor web.

Am definit în cadrul acestei lucrări și câteva elemente de bază ale limbajului PHP cu exemple sugestive. Iar întrucât pagina web a fost construită și cu elemente de MySql am considerat necesară și o scurtă introducere a acestui sistem de baze de date funcțional independent. În cele din urmă am prezentat aplicația WEB rezultată, Pensiunea La Poalele Dealului, Pâncota, de altfel, principalul subiect al lucrării de față. În capitolul al șaselea am încercat să evidențiez tehnicile folosite în proiectarea și crearea aplicației folosindu-mă de imagini concrete preluate atât din codul sursă, cât și din site-ul final.

Lucrarea a fost realizată pentru a veni în ajutor celor care își doresc să apeleze la serviciile de cazare pe care le oferă pensiunea, precum și turiștilor în căutarea unei destinații în care tradiția și confortul coexistă în armonie. Vizitatorii site-ului web își pot face o părere despre pensiune și loc, nu doar din paginile de prezentare și galeria foto, ci și experiențele personale ale vizitatorilor care le-au împărtășit în cartea de oaspeți. Aceasta este facută publică de către administrator pentru a da dovadă de transparență și respect față de părerile musafirilor.

Totodată administratorul site-ului poate să își gestioneze singur, prin cadrul panoului de administrare conținutul anumitor pagini, precum galeria foto, tarifele, mesajele primite, cartea de oaspeți și setările de cont, fără a necesita cunoștințe de baze de date,

Se poate concluziona că utilizarea acestei aplicații WEB este de bun augur atât turiștilor, care reușesc să preia cele mai importante informații chiar de pe site, oferind și posibilitatea contactării directe a personalului pensiunii, cât și pentru administrator, care are posibilitatea de a gestiona informațiile după bunul plac fără a fi restricționat de timp sau cunoștințe.

Prin utilizarea acestei aplicații WEB, Pensiunea La Poalele Dealului din Pâncota se poate bucura în sfârșit de vizibilitate în mediul online, un criteriu foarte important în planificarea unui concediu sau a unei călătorii. În ziua de astăzi, prezența în mediul online este crucială pentru succesul unei astfel de întreprinderi, iar o astfel de aplicație WEB vine atât în ajutorul celor care o dețin, cât și a celor interesați de astfel de servicii.

Copyright Notice

© Licențiada.org respectă drepturile de proprietate intelectuală și așteaptă ca toți utilizatorii să facă același lucru. Dacă consideri că un conținut de pe site încalcă drepturile tale de autor, te rugăm să trimiți o notificare DMCA.

Acest articol: Comunicarea prin intermediul Internetului [311753] (ID: 311753)

Dacă considerați că acest conținut vă încalcă drepturile de autor, vă rugăm să depuneți o cerere pe pagina noastră Copyright Takedown.

Comunicarea prin intermediul Internetului [311753]

Copyright Notice

Miroțoi Daniel An 4 semian A [622949]

Licenta 2017 Moga Rebeca Corectat 11.07 [307872]

COLORISM AND AFRICAN AMERICAN WOMEN IN LITERATURE: AN [609804]

1.Prezentare geografică generală a Bucureștiului Poziție geografică Bucureștiul este situat în partea de sud a țării, având coordonatele geografice… [307167]

Cehan Si Manea 2012 [618173]

Specializarea : Inginerie economică în agricultură [309067]

Copyright Notice

Similar Posts