Introducere. Motivație. [304110]

Licență

Introducere. Motivație. [304110]

Byadmin ianuarie 1, 2024

Introducere. Motivație.

Tema proiectului meu este denumită “Produs interactiv în studiul sistemelor de operare”, sau mai pe scurt E-learning și este rezultatul curiozității mele și al unei provocări.

Motivul alegerii acestei teme derivă din dorința de documentare în legatură cu noținea de e-learning.

[anonimizat]-ul reprezintă un tip de educație la distanță, o [anonimizat] o instituție ce furnizează imediat materiale într-o ordine secvențială și logică pentru a fi asimilate de studenți în manieră proprie. [anonimizat]. [anonimizat].

[anonimizat] a 3 [anonimizat] o [anonimizat] o instituție ce furnizează imediat materiale într-o ordine secvențială și logică ([anonimizat]).

În alegerea aplicației mele am plecat întâi de la alegerea temei și ulterior a profesorului coordonator conf. dr. I.L. Florea care pe parcursul a 3 ani, a predat mai multe discipline: [anonimizat], rețelistică, [anonimizat].

Am observat că fiecare manual predat avea la sfarșitul fiecărui capitol câte un chestionar de verificare a cunoștintelor și teme de efectuat.

Având în vedere faptul că din anul întâi m-[anonimizat]-le într-o [anonimizat], [anonimizat]-[anonimizat], mi-[anonimizat].

[anonimizat] 3 [anonimizat]-lor, [anonimizat], lucrurile au început să prindă contur.

Presiunea a [anonimizat]-ul (WWW, CSS, JavaScript, Bootstrap), lipsea ceva.

[anonimizat] “PHP și Smarty”, sau mai exact “omul” conf. univ. dr. [anonimizat] (trebuia să facem un magazin online), a scos untul din mine.

[anonimizat] e-learning se putea face. [anonimizat]: legătura cu baza de date (PHP, [anonimizat]).

[anonimizat].

Capitolul 1 face referire la WWW. [anonimizat] (net), reprezintă totalitatea siturilor (documentelor și informaților) [anonimizat]. Un navigator sau un browser este o aplicație software (program) [anonimizat], video, muzică și alte informații situate pe o [anonimizat].

Principiile de bază ale realizării designului unei pagini web sunt: alinierea, proximitatea, repetarea și contrastul.

Capitolul 2 se ocupă de HTML. HyperText Markup Language este un limbaj de marcare utilizat pentru crearea paginilor web ce pot fi afișate într-un browser.

Capitolul 3 abordează CSS. Un Cascading Style Sheet descrie modul de reprezentare al unei pagini HTML. Moduri de utilizare a CSS-urilor: extern, intern, inline.

Capitolul 4 ne invită prin JavaScript care este un limbaj de scripting client-side (rulează la nivelul browser-ului). A fost dezvoltat pentru a prelucra informațiile din formulare și a adăuga dinamism paginilor web

Capitolul 5 se ocupă de Bootsrap care permite realizarea de site-uri web responsive adaptabile la orice rezoluție de dispozitiv.

Capitolul 6 ne prezintă PHP, Php Hypertext Preprocessor care este un limbaj de scripting de uz general open source, utilizat pentru dezvoltarea aplicațiilor web, PHP oferind posibilitatea utilizării programării orientate pe obiect (POO).

Capitolul 7 face o incursiune prin MYSQL un sistem de gestiune a bazelor de date relaționale, fiind cel mai popular SGBD open-source la ora actuală. Bazele de date sunt folosite pentru stocarea informațiilor în vederea furnizării ulterioare (de date) în funcție de solicitarea primită.

Capitolul 8 ne introduce în Smarty care este un template pentru PHP, ce facilitează separarea dintre prezentare (HTML/CSS) și logica aplicației. Smarty este unul dintre cele mai folosite sisteme de template pentru PHP.

Capitolul 1. WORLD WIDE WEB

Termenul World Wide Web, abreviat WWW ,de multe ori confundat cu rețea (net), reprezintă totalitatea siturilor (documentelor și informaților) de tip hipertext legate între ele, care pot fi accesate prin rețeaua mondială de Internet (net = rețea).

Documentele, care rezidă în diferite locații pe diverse calculatoare server, pot fi regăsite cu ajutorul unui identificator univoc numit URL. Hipertextul inclusiv imagini etc. este afișat cu un ajutorul unui program de navigare în web numit browser, care descarcă paginile web de pe un server web și le afișează pe un terminal „client” la utilizator. WWW este numai unul din numeroasele servicii și aplicații informatice disponibile în Internet. Alte servicii sunt de exemplu: afișarea de informații cu formă de text, imagini și sunete, poșta electronică e-mail, transferul de fișiere de date și informații FTP, chat, aplicații video și video on demand, servicii telefonie și telefonie cu imagine prin Internet de tip VoIP, posturi de radio și televiziune prin Internet, e-commerce, sondări de opinie, răspândirea știrilor prin metode RSS, toate genurile de grafică și muzică, lucrul pe un calculator de la distanță prin Internet, grupuri de discuții pe diverse teme, sisteme de jocuri interactive, distribuție de software ș.a.

Browserele actuale pot nu numai să afișeze pagini web, ci oferă și interfețe către celelalte servicii Internet, având astfel un efect integrator (pentru toate serviciile e suficient un singur browser). De aceea granițele dintre serviciul WWW și celelalte servicii din Internet nu sunt întotdeauna clare.

La baza funcționării webului stau 3 standarde, și anume:

(HTTP) – Hypertext Transfer Protocol, stivă de protocoale OSI prin care serverul web și browserul clientului (utilizatorului) comunică între ele;

(HTML) – Hypertext Markup Language, standard de definire și prezentare a paginilor web;

(URI) – Uniform Resource Identifier, sistem universal de identificare a resurselor din web, folosit pentru a identifica și regăsi paginile web.

1.1. Browser web

Un navigator sau un browser este o aplicație software (program) ce permite utilizatorilor să afișeze text, grafică, video, muzică și alte informații situate pe o pagină din World Wide Web, dar și să comunice cu furnizorul de informații și chiar și ei între ei. Unele dintre cele mai cunoscute aplicații navigator sunt Microsoft Internet Explorer, Mozilla Firefox, Apple Safari, Google Chrome, Mozilla Camino, Opera Software – Opera, Nintendo DS browser și Flock.

Navigatoarele web funcționează pe baza anumitor protocoale, care îl leagă pe utilizator de paginile web stocate (definite) pe servere web specializate. Cele mai des folosite protocoale web sunt HTTP, HTTPS și FTP.

Un navigator este alcătuit dintr-un set de programe care permite afișarea și manevrarea informațiilor bazate pe text, imagini și sunet precum și rularea unor programe pe care siturile web și documentele le pot include (applet-uri, scripturi). Fiecare navigator are o casetă de text unde utilizatorul poate introduce adresa documentului sau a sitului dorit, adresă care este unică pe lume (univocă), numită (Uniform Resource Locator sau URL). În cazul în care utilizatorul nu cunoaște adresa exactă , el poate introduce drept "cheie de căutare" o porțiune mică de text specific pe care documentul ar trebui să îl conțină. Navigatorul transmite acest text unor aplicații speciale din web numite motoare de căutare. Acestea caută în multitudinea de documente sau situri respectivul text, oferind apoi ca rezultat o listă de adrese care conțin textul căutat. Utilizatorului nu îi mai rămâne decât să aleagă – eventual prin mai multe încercări – locația dorită. În realitate această listă de adrese poate fi uneori extrem de lungă, de ordinul sutelor de mii de linii sau chiar și mai lungă, caz în care este nevoie de o strategie de căutare mai exactă.

În general, documentele și paginile web pe care le afișează browserele sunt, la dorința autorilor lor, interconectate prin tehnologia Hipertext, care permite saltul simplu de la un document sau sit la altul, printr-o simplă apăsare pe mouse.

1.2. Principiile de bază ale realizării designului unei pagini web

Pentru a realiza un site web frumos structurat și atractiv este absolut necesar să se respecte principiile de bază ale realizării designului unei pagini web. Aceste principii sunt: alinierea, proximitatea, repetarea și contrastul.

Prin aliniere înțelegem faptul că elementele de pe o pagină web vor trebui aliniate unele în raport cu celelalte. Prin proximitate se înțelege faptul că elementele care au un context comun și sunt situate unele în apropierea celorlalte se vor grupa și vor constitui un tot unitar. Repetiția sugerează faptul că anumite proprietăți ale elementelor de pe pagină trebuiesc repetate pentru a produce simetrie și senzația de ordine. Contrastul este cel care ajută la scoaterea în evidență a anumitor informații pe baza atribuirii unor proprietăți "diametral opuse" față de alte elemente mai puțin importante. Se poate crea contrast de culoare, de formă, de font, etc.

Capitolul 2. HTML

2.1. Introducere în HTML

HyperText Markup Language (HTML) este un limbaj de marcare utilizat pentru crearea paginilor web ce pot fi afișate într-un browser (sau navigator). Scopul HTML este mai degrabă prezentarea informațiilor – paragrafe, fonturi, tabele ș.a.m.d. – decât descrierea semanticii documentului.

HTML este o formă de marcare orientată către prezentarea documentelor text pe o singură pagină, utilizând un software de redare specializat, numit agent utilizator HTML, cel mai bun exemplu de astfel de software fiind browserul web. HTML furnizează mijloacele prin care conținutul unui document poate fi adnotat cu diverse tipuri de metadate și indicății de redare. Indicațiile de redare pot varia de la decorațiuni minore ale textului, cum ar fi specificarea faptului că un anumit cuvânt trebuie subliniat sau că o imagine trebuie introdusă, până la scripturi sofisticate, hărți de imagini și formulare. Metadatele pot include informații despre titlul și autorul documentului, informații structurale despre cum este împărțit documentul în diferite segmente, paragrafe, liste, titluri etc. și informații cruciale care permit ca documentul să poată fi legat de alte documente pentru a forma astfel hiperlink-uri (sau web-ul).

HTML este un format text proiectat pentru a putea fi citit și editat de oameni utilizând un editor de text simplu. Totuși scrierea și modificarea paginilor în acest fel solicită cunoștințe solide de HTML și este consumatoare de timp. Editoarele grafice (de tip WYSIWYG) cum ar fi Macromedia Dreamweaver, Adobe GoLive sau Microsoft FrontPage permit ca paginile web să fie tratate asemănător cu documetele Word, dar cu observația că aceste programe generează un cod HTML care este de multe ori de proastă calitate.

HTML se poate genera direct utilizând tehnologii de codare din partea serverului cum ar fi PHP, JSP sau ASP. Multe aplicații ca sistemele de gestionare a conținutului, wiki-uri și forumuri web generează pagini HTML.

HTML este de asemenea utilizat în e-mail. Majoritatea aplicațiilor de e-mail folosesc un editor HTML încorporat pentru compunerea e-mail-urilor și un motor de prezentare a e-mail-urilor de acest tip. Folosirea e-mail-urilor HTML este un subiect controversat și multe liste de mail le blochează intenționat.

Paginile HTML sunt formate din tag-uri și au extensia „.html” sau „.htm”. În marea lor majoritate aceste tag-uri sunt pereche, unul de deschidere <tag> și altul de închidere </tag>.

Navigatorul web interpretează aceste tag-uri afișând rezultatul pe ecran. HTML-ul este un limbaj care nu face deosebire între litere majuscule și minuscule.

Pagină principala a unui domeniu este fișierul „index.html” respectiv „index.htm”. Această pagină este setată a fi afișată automat la vizitarea unui domeniu.

2.2. HTML 5

HTML 5 este un limbaj pentru structurarea și prezentarea conținutului pentru World Wide Web, o tehnologie nucleu pentru Internet propusă inițial pentru software-ul Opera.

În special, HTML5 aduce multe noi caracteristici sintactice. Acestea cuprind elemente ca <video>, <audio>, <header> și <canvas> elemente HTML, precum și integrarea conținutului SVG care a înlocuit utilizarea tag-ului generic <object>. Aceste noutăți sunt proiectate pentru a facilita includerea și manipularea în web a conținuturilor multimedia și grafice fără a fi nevoie să se recurgă la proprietățile de plugin și API. Alte noi elemente ca <section>, <article>, <header>, și <nav> sunt proiectate să îmbunătățească conținutul semantic al documentelor. Noi atribute au fost introduse în același scop, în același timp unele elemente și atribute au fost îndepărtate. Unele elemente ca <a>, <cite> și <menu> au fost schimbate, redefinite și standardizate. API-urile și DOM-urile (document object model) sunt certitudini și sunt părți fundamentale în specificațiile HTML5. HTML5, de asemenea, definește în câteva detalii prelucrările necesare pentru documentele invalide, astfel încât sintaxa erorilor va fi tratată uniform de toate browserele cunoscute.

HTML5 introduce un număr de noi elemente și atribute care reflectă utilizarea tipică a unui site modern. Unele dintre ele sunt semantic înlocuite cu utilizări comune de blocuri generice (<div>) și de elemente inline (<span>), de exemplu <nav> – block de navigație în site -, <footer> – în mod normal se referă la partea de jos a unei pagini web sau la ultima linie de cod HTML – sau <audio> și <video> în loc de <object>. Unele elemente depreciate din HTML 4.01 au fost șterse, inclusiv nevinovatul element de prezentare <font> și <center>, al căror efect este realizat cu CSS (Cascading Style Sheets). Se pune astfel accent pe importanța DOM scripting (e.g. JavaScript) în comportamentul web.

2.3. Tratarea erorilor

Un browser de HTML5 (text/html) va fi flexibil în tratarea sintaxelor incorecte. HTML5 este proiectat de asemenea pentru că browserele vechi să poată ignoră în siguranță noile construcții HTML5. În contrast cu HTML 4.01, caietul de sarcini HTML5 oferă reguli detaliate pentru lexing și parsare cu intenția ca browsere, diferite între ele, vor produce același rezultat și în cazul unei sintaxe incorecte. Deși HTML5 definește azi un comportament consistent pentru documentele "tag soup", documente de taguri, acestea nu sunt considerate că fiind conforme cu standardul HTML5.

2.4 Terminologia HTML

a) tag (etichetă): un cod care identifică un element pentru ca browserul sau alt program de parcurgere să știe în ce mod să afișeze conținutul. Un tag este încadrat de caractere de delimitare (paranteze ascuțite) Ele sunt întotdeauna cuprinse între paranteze unghiulare (<>) iar utilizarea literelor mici sau mari în scriere nu are importanță.

b) element: o componentă distinctivă a structurii unui document, cum ar fi titlul, un paragraf sau o listă. Când ne referim la formă sa aplicată în cadrul unui document, un element se mai numește etichetă (tag);

c) atribut: furnizează instrucțiuni adiționale despre o etichetă. Informațiile variază de la etichetă la etichetă și pot include subiecte cum ar fi locația fișierelor, mărimea, numele lor sau stiloul lor;

b) browser: este un motor de parcurgere special care evaluează tagurile și conținutul unui fișier HTML, pe care îl afișează în concordanță cu posibilitățile și regulile platformei și capacitățile sale;

Orice fișier html are următoarea structură

<html>

<head>

<title>Titlul</title>

</head>

<body>

…….

</body>

</html>

Între tagurile <body></body> se scriu celelalte "instrucțiuni".

2.5. Elemente HTML

Elementele din HTML 4 pot fi împărțite în 10 categorii ad-hoc:

elemente top-level – HTML, HEAD, BODY, FRAMESET;

elemente head – 7 în total, gen BASE, SCRIPT, STYLE;

elemente generice la nivel de block – 17 în total, precum -DIV, H2, P;

elemete de tip listă – 9 în total, precum – DL, LI, UL;

pentru tabele – 10 elemente, precum – COL, TR, TD;

pentru forme – 10 elemente, precum – FORM, SELECT, INPUT;

elemente speciale inline – 17 în total, precum – A, BR, IMG, SPAN;

elemente de formatare – 12 în total, precum – ABBR, CODE, STRONG, VAR;

elemente de stil pentru fonturi – 8 în total, precum – SMALL, STRIKE, U;

elemente tip frame – FRAMESET, FRAME, NOFRAMES.

În total, specificația HTML 4 conține 91 de elemente. (unele elemente figurează în mai multe categorii).

HTML5 introduce elemente noi în diferite categorii.

elemente structurale/semantice (22 la număr): <article>, <nav>, <menuitem>, <nav>, <progress>

elemente pentru forme (3 la număr): <datalist>, <keygen>, <output>

noi tipuri de input (precum color, datetime, range, tel, url, week) și noi atribute pentru elementul input (precum autocomplete, list, min and max, pattern (regexp), placeholder, required)

elemente de grafică: <canvas>, <svg>

elemente media: <audio>, <embed>, <source>, <track>, <video>

Codul HTML din spatele unei pagini web se scrie cu ajutorul tag-urilor (etichetelor). Un tag este de forma – pereche început-sfârșit și numele acesteia se scrie între paranteze unghiulare, putând avea unul sau mai multe atribute, acestea aducând informații adiționale etichetei.

Documentul HTML se indică prin tag-ul HTML

Atribute multiple

Un tag poate să aibă mai multe atribute.

Un tag cu trei atribute are următoarea sintaxă:

Sintaxa:

Tag-ul Body este cel care specifică proprietățile întregii pagini web. Se pot seta astfel: culoarea de fundal a paginii, culoarea textului, marginile paginii, etc.

Tag-ul Basefont stabilește fontul de bază al paginii și este valabil până la sfârșitul paginii sau până apare următoarea etichetă <Basefont>.

Blocurile de text au multiple modalități de a fi formatate. În acest scop, există următoarele etichete:

Tag-ul <table>

Un tabel se inserează între etichetele <table> și </table>

Culoarea textului din fiecare celulă se indică în tag-ul <font>.

Ex: <td><font color=”valoare”>…</font></td>

Tagul <img>

Formatele acceptate de browsere pentru fișierele de imagini sunt:

GIF (Graphics Interchange Format) – extensia .gîf

JPEG (Joint Photographic Experts Group) cu extensia .jpeg sau .jpg

BMP

Definirea unei imagini că hartă de imagini se face utilizând tag-ul <img> cu atributele src și usemap. Numele dat pozei în usemap, precedat de semnul #, se va regăsi obligatoriu în tag-ul map, în atributul name. Definirea hărții se realizează în interiorul unui bloc special definit cu tag-ul <map>. Tag-ul are un atribut obligatoriu și anume „name”, care primește ca și valoare numele hărții (numele din usemap). Fiecare zonă de pe hartă se introduce cu eticheta <area>.

Tag-ul <a>

Legăturile în pagină html se inserează cu ajutorul etichetei speciale <a> și a atributului „href” care ia că valoare adresa URL a resursei solicitate.

Când mouse-ul este deasupra unei zone active, el ia formă unei mâini. Calculatorul client expediază cererea , primește resursă pe care a solicitat-o pe care o va încărca în browser.

Legătura către o ancoră din același document.

Acest lucru se realizează utilizând perechea de tag-uri:

<a name = “etic> AICI am făcut SALT</a>

Stabilirea culorilor pentru legături.

Se utilizează trei culori pentru legături:

culoare pentru legăturile nevizitate

culoare pentru legăturile vizitate

culoare pentru legăturile active

Acestea se stabilesc cu atributele:

”link” pentru legăturile nevizitate

„vlink” pentru legăturile vizitate

„alink” pentru legăturile active

Tag-ul <link>

Ancorele se realizează cu ajutorul tag-ului <link>, iar pagina către care se va face redirecționarea se precizează cu ajutorul atributului "src" al lui <link>.

Tag-ul <form>

Formularele sunt utilizate pentru introducerea și transmiterea de date de către utilizatorii site-ului. Introducerea unui formular se face folosind tag-ul <form>.

Atribute importante:

action -specifică URL-ul resursei care urmează să proceseze datele din formular, atunci când forma este transmisă (submitted) .

method – Indică modul de transmitere a datelor introduse în formular. Varianta de transmitere a datelor cu get se face prin URL, iar transmiterea datelor cu post se face cu ajutorul protocolului HTTP.

Sintaxa:

Semantică:

valoare_a poate lua ca și valoare:

adresa URL a unui script aflat pe server, care primește datele formularului; se face o prelucrare a datelor și se expediază un răspuns utilizatorului dacă e cazul;

adresa de email, caz în care datele formularului sunt transmise prin poșta electronică;

Valoare_m poate lua 2 valori:

get este valoare implicită (datele din formular se adaugă la adresa URL specifcata în action);

post (datele sunt expediate separat; se folosește când sunt transmise cantități mari de date ).

Elementele asociate unei formular

Elementele (definite în HTML 4) asociate unei formular HTML sunt: <input> , <select> , <option>, <textarea> , <button>.

Elementele noi, introduse în HTML5, sunt: <datalist> , <keygen> ,<output> .

Tagul <input>

Pentru a crea diferite butoane sau casete se folosește tag-ul <input>

Sintaxa:

Semantica:

Tipuri de input

Tipurile de input (valorile posibile ale atributului type ale elementului <input>), definite în HTML 4 sunt: Text, password, submit, reset, radio, checkbox, button, image, hidden, file.

HTML5 introduce câteva tipuri noi de input, și anume: color, date, datetime, datetime-local, email, month, number, range, search, tel, time, url, week.

Name – este numele atașat casetei sau butonului.

Value – este conținutul ce apare scris pe buton sau conținutul casetei sau în cazul butoanelor radio numele butoanelor care fac parte din aceeași familie.

Atributele elementului <input>

Atributele elementului <input> din HTML 4 erau: readonly, disabled, size, maxlength.

HTML5 avea să adauge o întreagă listă la cele existente, și anume: autocomplete, autofocus, form, formaction, formenctype, formmethod, formnovalidate, formtarget, height and width, list, min and max, multiple, pattern (regexp), placeholder, required, step.

Elementul <form> primește și el două noi atribute în această versiune: autocomplete și novalidate.

Liste de selecție <select> <option >…. </select>

O listă de selecție permite alegerea unuia sau mai multor elemente dintr-o listă finită.

Are 2 atribute importante : name și size.

Elementele dintr-o listă se introduc cu tag-ul <option>.

Sintaxa:

<option value = valoare_1 selected> Element_1

<option value = valoare_2 > Element_2

<option value = valoare_3> Element_3

</select>.

Semantica:

Name: numele listei de selecție;

Size: este un număr întreg pozitiv și precizează câte elemente din listă sunt vizibile la un moment dat;

<option> este tag-ul care include elementele listei. Server-ul primește perechea alcătuită din conținutul din value și valoarea de după tagul option;

Selected: permite selectarea prestabilită a unui element al listei

Lista de selecție cu selecții multiple

Are aceeași sintaxă că și lista de selecție descrisă mai sus, dar în plus are atributul multiple în tag-ul select.

Tag-ul <textarea>

Sintaxa:

Semantică:

Din lista de atribute enumerăm:

cols (nr de caractere afișate într-o linie);

rows (nr de linii afișate simultan);

name (permite atașarea unui nume);

wrap care determină comportamentul câmpului de editare față de sfârșitul de linie. Atributul poate lua valorile: off, hard, soft.

Evenimente HTML

Evenimentele HTML pot fi clasificate în mai multe categorii. Acestea sunt asociate elementelor HTML, ca atribute ale acestor elemente. Iată unele din aceste evenimente (atribute) și afiliația lor:

Evenimente fereastră (window): onerror, onload, onmessage, onresize.

Evenimente formă: onblur, oninput, onreset, onsubmit.

Evenimente tastatură: onkeydown, onkeypress, onkeyup.

Evenimente mouse: onclick, ondblclick, onmousemove, onmouseout, onmouseover, onmouseup, onwheel.

Evenimente de agățare (drag): ondrag, ondragend, ondrop, onscroll.

Evenimente clipboard: oncopy, oncut, onpaste.

Evenimente media: onabort, oncanplay, onpause, onplaying, onprogress, onseeking, onvolumechange, onwaiting.

Alte evenimente: onshow, ontoggle

2.6. Exemple HTML

HTML Headings

HTML Links

HTML imagini

HTML Styles

HTML comentarii

HTML Formatting

HTML tabele

HTML blocks

HTML Clase

HTML Id-uri

HTML Javascript

HTML Formulare

Liste HTML

Capitolul 3. CSS

3.1 Neajunsuri ale limbajului HTML

HTML a fost creat inițial pentru a descrie conținutul unui document.

Creatorii de pagini nu descriu modul de reprezentare, browser-ul se ocupă de acest lucru. Acesta este o abordare bună, dar uneori nu e satisfăcătoare pentru anumiți designeri. Adesea se dorește un control mai mare al modului în care sunt afișate paginile Web. Apare necesitatea introduceri de noi tag-uri pentru a controla modul de reprezentare.

Un Cascading Style Sheet (CSS) descrie modul de reprezentare al unei pagini HTML, într-un fișier separat.

CSS are următoarele avantaje:

Separă conținutul de prezentare;

Permite definirea modului de afișare și layout-ul tuturor paginilor de pe un server web într-un singur loc;

Poate fi utilizat atât pentru pagini HTML cât și pentru documente XML

CSS are următoarele dezavantaje:

Nu toate browserele suportă CSS-uri.

3.2. Moduri de utilizare a CSS-urilor

Există trei moduri de utilizare a CSS-urilor:

Style sheet extern

Acesta este cel mai puternic;

Se aplică atât la HTML cât și XML;

Toate elementele de sintaxă CSS pot fi utilizate.

Style sheet intern

Se aplică numai la HTML, nu și la XML;

Toate elementele de sintaxă CSS pot fi utilizate.

Styles sheet inline

Se aplică numai la HTML, nu și la XML;

NU toate elementele de sintaxă CSS pot fi utilizate.

Style sheet-uri externe

În cadrul documentelor HTML se specifică în cadrul elementului <head>:

În cadrul unui document XML se specifică în prolog instrucțiune de procesare:

<?xml-stylesheet href="Sty/e Sheet URL" type="text/css"?>

Style sheet-uri interne

În cadrul documentelor HTML se specifică în cadrul elementului < head>:

<!–CSS Style Sheet –>

</style>

Observație: style sheet-urile interne se definesc ca și comentarii pentru a fi ascunse browserelor mai vechi care nu suportă CSS.

Style sheet-uri inline

Se definesc în cadrul atributului STYLE care poate fi adăugat la orice element HTML:

<html-tag STYLE="proprietate: valoare"> sau

<html-tag STYLE=" proprietate: valoare; proprietate: valoare; …; proprietate: valoare ">

Avantaj:

Util atunci când dorim să facem mici schimbări ale stilului.

Dezavantaje:

Mixare informațiilor de afișare cu cele de HTML;

Îngreunează citirea codului HTML;

Nu pot fi utilizate toate elemente CSS-ului.

3.3. Ordinea cascadării

În cadrul unui document HTML stilurile se aplică în următoarea ordine:

Stilurile implicite ale browser-ului;

Style sheet-urile externe;

Style sheet-urile interne (definite în <head>);

Style sheet-urile inline;

Atunci când apar conflicte, “cel mai recent” primează.

3.4.Sintaxa CSS

Sintaxa fișierelor CSS este foarte simplă – Acesta constă dintr-o listă de:

 selectori (pentru alegerea tag-urilor);

 descriptori (pentru a indică ce vrem să facem cu acestea)

Exemplu: h1 {color: green; font-family: Verdana] spune că tot ce este inclus în tag-ul h1 va fi afișat în verde utilizând fontul Verdana.

Un fișier CSS va conține deci o listă cu astfel de perechi (selector, descriptor).

Selectori pot fi simple tag-uri HTML sau XML, dar se pot defini și moduri de combinare a tag-urilor.

Descriptori sunt definiți în standard-ul CSS

Sintaxa generală este:

selector {proprietate: valoare} sau

selector, selector {proprietate: valoare; proprietate: valoare}

unde

selector este tagul ce va fi afectat (acesta este case-sensitive dacă și numai dacă limbajul documentului este case-sensitive), ex: HTML este case-insensitive;

proprietate și valoare descriu modul de afișare al acelui tag;

Spațiile și punct și virgula sunt opționale;

Punct și virgula este utilizată pentru a separa perechile proprietate: valoare.

Selectori

Așa cum am văzut, un tag (X)HTML sau XML poate fi un selector simplu :

body { background-color: #ffffff }

Se pot utiliza și selectori multipli: em, i {color: red]

Putem repeta selectorii:

hi, h2, h3 {font-family: Verdana; color: red] hi, h3 {font-weight: bold; color: pink]

Când se suprapun proprietățile se utilizează ultima valoare definită.

Selectorul universal * se aplică asupra tuturor elementelor:

* {color: blue}

Când valorile se suprapun, selectorul specific primează înaintea celui general.

Selectorul descenent selectează un tag cu un anumit ascenent (stramoș):

p code { color: brown }

selecteză tag-ul code dacă acesta se află undeva în interiorul unui paragraf.

Selectorul copil > selecteză un tag dacă are un anumit părinte:

h3 > em { font-weight: bold }

selecteză tag-ul em numai dacă părintele lui imediat este tag-ul h3

Selectorul adiacent selecteză un element dacă se află imediat după un altul:

b + i { font-size: 8pt }

Exemplu: <b>Text Bold</b> <i>Text italic</i>

Se va afișa astfel: Text Bold Text italic

Un selector simplu de atribut permite selectarea elementelor care au anumite atribute, indiferent de valoarea acestora:

Sintaxa: element[atribut] { … }

Exemplu: table[border] {…}

Un selector de atribut cu valoare permite selectarea elementelor ce au un atribut cu o valoare dată:

Sintaxa: element[atribut= "valoare"] { … }

Exemplu: table[border="0"] {…}

Atributul class

Atributul class permite definirea de stiluri multiple pentru același element (tag)

În CSS:

p.important {font-size: 24pt; color: red]

p.fineprint {font-size: 8pt]

În HTML:

<p class="important">Text important!</p>

<p class="fineprint">Text pt. listare</p>

Pentru definirea unui selector care să se aplice tuturor elementelor din acea clasă, se elimină numele elementului (dar păstrăm punctul):

.fineprint {font-size: 8pt]

Atributul id

Atributul id se definește similar cu atributul class, dar utilizează # în loc de . (punct).

În CSS:

p#important {font-style: italic] sau # important {font-style: italic]

În HTML:

<p id="important">text important/p>

class și id pot fi utilizate simultan, fară ca numele să difere:

Tag-urile div și span

Div și span sunt elemente HTML utlizate exclusiv pentru a păstra informația CSS

Div asigura o linie nouă înainte și după (similar cu paragraf); span nu.

Sintaxă:

Proprietăți și valori pentru font-uri

font-family:

inherit (moștenește de la părinte);

Verdana, "Courier New", … (fontul utilizat dacă există);

serif | sans-serif | cursive | fantasy | monospace;

font-weight: normal | bold |bolder | lighter | 100 | 200 | … | 700;

font-style: normal | italic | oblique.

Prescurtarea proprietăților

Frecvent, proprietăți multiple de formă:

h2 { font-weight: bold; font-variant: small-caps; font- size: 12pt; line-height: 14pt; font-family: sans-șerif}

Pot fi rescrise astfel:

h2 { font: bold small-caps 12pt/14pt sans-șerif }

Specificarea culorilor și lungimilor

Lungimile se specifică prin:

em, ex, px, %;

font size, x-height, pixels, procent din dimensiunea moștenită;

în, cm, mm, pt, pc;

inchi, centimetri, milimetri, pmicte, picas (1 pică =12 points).

Specificarea alinierii textului

text-align: left | right | center | justify;

text-decoration: none | underline | overline | line-through;

text-transform: none | capitalize | uppercase | lowercase;

text-indent: length \ 10% (indentează prima linie dintr-un text);

white-space: normal | pre | nowrap.

Pseudo-classes

Pseudo-clasele sunt elemente a căror stare (și mod de afișare) se poate schimbă în timp.

Sintaxa: element.pseudo-class {…}

: link – link care nu a fost viziat;

: visited – link care a fost viziat;

: active – Link pe care facem click;

: hover – Link deasupra căruia e mouse-ul (dar nu a fost apăsat);

Pseudo-clasele sunt permise oriunde în selectori CSS

Alegerea numelor

CSS a fost elaborat pentu a separa conținutul de modul de afișare

Deci, numele stilurilor din CSS trebuie să difere de cele utilizate HTML sau (în special) în XML trebuie să descrie conținutul, și nu stilul.

Exemplu:

Să presupunem că definim stilul span.huge {font-size: 36pt] și utlizăm <span class="huge">…</span> într-o mulțime de documente.

Dacă pentru utilzatori este deranjat stilul acesta, putem schimbă CSS-ul span.huge {font-color: red}

3.5. Exemple CSS

Ordine cascadare

CSS culori

CSS fundal

CSS chenar

CSS margini

CSS Height / Width

CSS Box Model

CSS text

CSS Liste

CSS Tabel

Capitolul 4. JavaScript

4.1. Introducere JavaScript

Ce este JavaScript?

JavaScript este un limbaj de scripting client-side (rulează la nivelul browser-ului).

A fost dezvoltat pentru a prelucra informațiile din formulare și a adaugă dinamism paginilor web

Este un limbaj interpretat, fiind încorporat de regulă în paginile HTML.

JavaScript nu este JAVA, denumirea inițiala a fost LiveScript

JavaScript are o sintaxa asemănătoare limbajului C/Java

JavaScript este dependent de mediu – software-ul care rulează de fapt programul este browser-ul web (Firefox, Opera, Netscape Navigator, Internet Explorer, Safari, etc.)

Ce putem face cu JavaScript?

JavaScript oferă designerilor HTML posibilitarea de execută scripturi la nivelul browerului.

JavaScript poate reacționa la evenimente – Un JavaScript poate fi configurat să execute o anumită operație atunci când se întâmplă ceva (e.g. s-a terminat de încărcat pagină, userul a făcut click pe un element HTML)

JavaScript poate citi și scrie elemente HTML – Un JavaScript poate citi și schimba conținutul unui element HTML.

JavaScript poate fi utilizat pentru a valida datele din formulare înainte de a fi trimise către server.

JavaScript poate fi utilizat pentru a detecta tipul browserului – în funcție de acesta putem încarca o pagină sau alta.

Inserarea codului JavaScript în pagină.

Inserarea de cod JavaScript într-o pagină HTML se face prin intermediul tagului <script>:

< script type="text/javascript">

instrucțiuni

</script>

unde atributul type stabilește limbajul de scripting utilizat (implicit JavaScript).

JavaScript nu e întotdeauna disponibil.

Unele browsere mai vechi nu recunosc tag-ul <script>.

Acestea vor ignora tag-ul script dar vor afișa codul JavaScript inclus.

Pentru a evita acest lucru folosim următoarea sintaxă:

<!–

instrucțiuni

//- ->

</script>

<!– este secvența de start a unui comentariu HTML.

Pentru ca motorul de JavaScript să ignore secvența de sfârșit a comentariului HTML, utilizăm secvența // care indică un cometariu JavaScript.

Uneori utilizatori pot dezactiva de la nivelul browserului execuția JavaScript-urilor.

În acest caz putem afișa un mesaj folosind următoarea secvența:

Exemplu:

<html>

<head>

<title>Hello</title>

</head>

<body>

<!–

document.write("<h1>Hello World!</h1>");

//->

</script>

</body>

</html>

4.2. Utlizarea codului JavaScript

Putem utiliza JavaScript atât în <head> cât și în <body>.

Funcțiile JavaScript se definesc de regulă în <head>. Această ne asigură că acea funcție este încărcată înainte de fi nevoie de ea. Codul JavaScript din <body> se va executa în momentul în care este încarcata pagina.

Scripturile JavaScript pot fi definite într-un fișier extern, fișier ce are extensia .js

Avataj: fișierul poate fi inclus în mai multe pagini HTML.

Includerea unui fișier .js într-o pagină HTML se face de regulă în tag-ul <head> printr-o construcție de forma:

JavaScript poate fi utilizat și în obiecte de tip form, de exemplu butoane.

Acest cod JavaScript se va execută când obiectul este folosit.

Tipuri primare în JavaScript

JavaScript are trei tipuri primare: number, string, și boolean.

Orice altceva este obiect.

Numerele sunt memorate întodeauna în virgulă flotantă.

Numerele hexazecimale încep cu 0x.

Numerele în baza 8 încep cu 0 (nu toate browserele suportă).

Stringurile sunt secvențe de caractere cuprinse între ghilimele sau apostroafe

Stringurile pot conține \n (newline), \" (ghilimele), etc.

Valorile boolene sunt true sau false.

0,”0”, stringurile vide, undefined, null, și NaN sunt considerate false , orice altceva este considerat true

Variabile

Sintaxa declarării unei variabile este următoarea:

var idVar;

var idVar = val_initială;

idVar = val_initiala;

Numele variabilelor sunt case-sensitive și trebuie să înceapă cu o literă.

Variabilele nu au tip (ele pot reține orice valoare).

Cuvântul var este opțional (dacă nu se specifică automat variabila e considerată globală).

Variabilele declarate într-o funcție sunt locale acelei funcții.

La declararea variabilelor locale trebuie obligatoriu var.

Variabilele declarate în afară oricărei funcții sunt globale (sunt accesibile oriunde în pagină).

Operatori (I)

Aritmetici:

+ – * / % ++ –

Operatori de comparație:

< <= == != >= >

Operatori logici:

$$ || !

Operatori pe biți:

$ | ^ ~ << >> >>>

Operatori de atribuire:

= += -= *= /= %= <<= >>= >>>= $= ^= |=

Operatori (II)

Concatenarea stringurilor:

+

Operatorul condițional :

condiție ? val_if_true : val_if_false

Testarea egalității:

== și != încearcă să convertească ambii operanzi la același tip înainte de a efectua testul.

=== și !== consideră valorile inegale dacă au tipuri diferite.

Alți operatori:

new typeof delete

Comentarii

Comentariile în JavaScript sunt similare celor din C++ sau Java:

// comentariu pe o singură linie

/* comentarii pe

mai multe linii */

Instrucțiuni

Atribuire

idVar = expresie;

Instrucțiunea compusă

{

Instructiune1;

instructiune2;

…..

instrucțiune n;

}

Instrucțiuni de decizie

Selecție simplă:

if (condiție)

instrucțiune;

if (condiție)

instrucțiune1;

else

instructiune2;

Selecție multiplă:

switch(n) {

case constanța 1:

bloc instrucțiuni 1

break;

–––

case constanta N:

bloc instrucțiuni N

break;

default:

bloc instrucțiuni n+1

}

Instrucțiuni de ciclare

Instrucțiunea for

for (expr_i;condiție; expresie_reitializare)

instrucțiune

Instrucțiunea for… în

for(variabia în object) {

instrucțiuni

}

Instrucțiunea while

while (condiție){

instrucțiune

}

Instrucțiunea do … while

do {

instrucțiuni }

while (condiție);

Excepții.

JavaScript dispune de un mecanism de tratare a excepțiilor aproape identic cu cel din Java.

Aruncarea unei excepții:

throw expresie

unde expresie este valoarea excepției, și poate fi de orice tip (cel mai adesea un string).

Prinderea unei excepții:

try {

instrucțiuni

} catch (e) { // Observație: nu se specifică/declara tipul lui e

instrucțiuni de tratare a excepției e

} finally { //opțional

cod ce se execută la final

}

Funcții

Se definesc de regulă în <head>.

Sintaxa definirii unei funcții este următoarea:

function numeFunctie(p1, pN) {

//declarații de variabile locale (se utilizează var)

instrucțiuni

}

O funcție poate returna o valoare cu return valoare;

Sintaxa apelului unei funcții:

numeFunctie(vp1, vpN)

Parametri simpli sunt transmiși prin valoare, obiectele prin referință

Tablouri

var mașini= newArrayQ;

mașini[0]="Audi";

mașini[1]="Logan";

var mașini= new Array("Audi", "Logan"); //tablou condensat

var mașini= ["Audi", "Logan"]; //tablou de literali

var mașini= ["Audi", "Logan", "Ford"]; //tablou de literali

mașini. șorț(); var i=0;

for(i=0;i<mașini.length;i++){

document.write(mașini[i]);

}

mașini. reverse();

document.write(mașini.toString());

Crearea Obiectelor

Utilizând obiecte literal:

var curs = {"13502", "Tehnologii Web"}

Creăm un obiect ”gol” cu ajutorul operatorului new, apoi adăugam proprietăți:

var curs = new Object();

curs.id = " 13502

curs.nume = " CSS";

Cu ajutorul constructorilor:

function Curs(id, nume){

this.id = id; //cuvântul cheie this e obligatoriu

this.nume = nume;

}

var curs =new Curs("l3502", "CSS");

Adăugarea de metode la obiecte

function Triunghi(a, b, c){

this.a = a;

this.b = b;

this.c = c;

this.getPerimetru = function (){

return this.a + this.b + this.c;

}

var t = new Triunghi(3,4,5);

document.write(t.getPerimetru());

Evenimente

Evenimentele sunt acțiuni care pot fi detectate de JavaScript. Putem configura execuția de acțiuni la detectarea de evenimente.

Exemple de evenimente:

S-a efectuat click pe un buton;

S-a terminat de încacat pagină.

4.3. Exemple JavaScript

JavaScript poate schimba conținutul HTML

The <script> Tag

JavaScript în Body

JavaScript în <head>

Using innerHTML

Using document.write()

JavaScript Comentarii

JavaScript Variabile

JavaScript tipuri de date

JavaScript Functii

JavaScript Obiecte

JavaScript Evenimente

JavaScript If…Else

JavaScript Switch

JavaScript For

JavaScript While

JavaScript Do/While

Capitolul 5. Bootstrap

5.1. Introducere în Bootstrap

Framwevork-ul dezvoltat inițial de Twitter permite realizarea de site-uri web responsive, care se adaptează la orice rezoluție de dispozitiv: desktop, tablete și telefoane mobile.

Este în momentul de fața cel mai utilizat framework pentru dezvoltarea interfețelor web responsive devenind foarte rapid standardul în crearea template-urilor pentru principalele sisteme CMS cum sunt WordPress și Joomla.

5.2. Cui se adreseaza Bootrap?

Framework-urile de tip Bootstrap se folosesc de către acei web designeri și dezvoltatori front-end care sunt familiarizați cu HTML și CSS și au nevoie de o baza solidă pentru construirea de site-uri web responsive.

Putem spune deci că Boostrap este un instrument utilizat pentru a gestiona cât mai bine faza inițială a unui proiect deoarece putem conta pe o serie de componente care pot fi reutilizate și personalizate oferindu-ne o baza solidă de pornire a proiectelor noastre pentru a nu fi nevoiți să începem de la zero.

Acesta funcție este sugerată și de numele framework-ului, termenul “bootstrap” însumând procesele necesare pentru pornirea computerelor la fel cum framework-ul Bootstrap ne pune la dispoziție instrumentele pentru pornirea proiectului nostru web.

5.3. De unde putem descarcă Bootstrap și ce conține?

Vizitând site-ul Bootstrap avem două alternative pentru a descarcă ultima versiune a framework-ului.

Descarcând versiunea Precompiled Bootstrap avem acces la fișierele CSS, JavaScript și Fonts gata de folosit pentru orice proiect web, fonturile incluse fiind cele de la Glyphicons.

Descarcând versiunea Bootstrap source code avem acces atât la fișierele precompilate CSS, JavaScript și Fonts precum și la fișierele sursă Less, JavaScript și la o vastă documentație.

Bootstrap se bazează pe 3 fișiere principale:

bootstrap.css – un cadru (framework) CSS

bootstrap.js – un cadru (framework) JavaScript/jQuery

glyphicons – un set de fonturi

Totodată, Bootstrap are nevoie de biblioteca jQuery pentru a funcționa.

5.4 Cum funcționează Bootstrap?

Bootstrap a dezvoltat un sistem de coloane – poate găzdui 12 coloane într-un rând. Toate elementele preconfecționate în Bootstrap pot fi utilizate prin clasele CSS corespondente, denumite în mod foarte intuitiv.

Pentru Bootstrap avem 4 astfel de vizualizări predefinite: extra-small – xs | small – sm | medium – md | large – lg). Totul pornește de la logica MOBILE FIRST, vizualizarea de default fiind cea pentru mobile (xs).

Bootstrap se bazeză pe sistemul său de coloane. În fiecare rănd se pot insera maxim 12 coloane. Aceste coloane se pot distribui în foarte multe combinații.

Dar cum anume se controlează vizualizarea elementelor la diferitele rezoluții de dispozitive? Cu ajutorul regulilor CSS media queries – interogări media în baza lărgimii dispozitivului. Bootstrap dispune de 3 seturi de media queries pentru dispozitivele mici, medii și mari care reprezintă clasele corespondente: sm, md și lg. Rezoluția de default este pentru dispozitivele foarte mici, adică pentru telefoane mobile, deoarece Bootstrap este o platforma MOBILE FIRST.

Bootstrap dispune de zeci de elemente preconfecționate, printre care galerii de imagini, meniuri de navigare, etichete, panouri, liste, butoane, alterte etc. Toate elementele în Bootstrap sunt configurate prin clase CSS.

Pentru că o pagină web să funcționeze corect cu Bootstrap va trebui să configurăm link-urile către foaia de stil și javascript a framework-ului. Pe langă aceste link-uri pagina va fi configurată pentru a putea fi interpretată ca și responsive de către browserele web prin metatagul viewport. În plus pentru funcționarea elementelor javascript specifce Bootstrap va fi adăugat în pagină și link-ul către framework-ul jQuery, iar ordinea acestui link în document este fundamentală.

Avantajele folosirii Boostrap:

reduce reundanța proiectelor;

folosește un design flexibil pentru adaptarea la diferitele mărimi ale ecranelor;

adaugă consistență la stilul site-urilor;

permite crearea rapidă și ușoară a noi variante de design;

asigură compatibilitate cu browserele principale.

5.5 Bootstrap Exemple

Bootstrap Grid System

Bootstrap Tables

Bootstrap Buttons

Navigation Bar With Dropdown

Bootstrap Form

Capitolul 6. PHP

6.1. Ce este PHP?

PHP (acronim pentru Php Hypertext Preprocessor) este un limbaj de scripting de uz general, cu cod-sursă deschis (open source), utilizat pentru dezvoltarea aplicațiilor web.

Un avantaj major al acestui limbaj este simplitatea extremă în utilizare, dar care conține și multe facilități și extensii pentru programatorii profesioniști. PHP oferă libertatea alegerii sistemului de operare și a server-ului web. Pe de altă parte, PHP oferă posibilitatea utilizării programării orientate pe obiect (POO). Începând cu PHP 5, POO este un model complet. În sfârșit, una dintre cele mai puternice și semnificative facilități ale PHP este posibilitatea interacționării cu un mare număr de servere de baze de date.

Inițial, PHP a fost acronimul de la Personal Home Page, dar a fost modificat pentru a se alinia conversiei de nume a sistemului de operare GNU și acum reprezintă acronimul pentru PHP Hypertext Preprocessor.

Avantaje ale dezvoltării aplicațiilor cu PHP

Primul script PHP

<?php

echo "hello world!";

?>

6.2. HTML și PHP în același document

Pentru că atât HTML cât și PHP sunt limbaje de script, putem include cod PHP în cod HTML și invers. În oricare dintre cazuri fișierul va trebui sa aibă extensia .php.

Exemplu : Cod PHP inclus într-un script HTML

<html>

<head>

<title>

Exemplul 2.2: Cod PHP inclus intr-un script HTML

</title>

</head>

<body>

<b>

<?php

echo "hello world!";

?>

</b>

</body>

</html>

6.3. Elemente PHP

Comentarii în PHP

În PHP pentru delimitarea comentariilor se folosesc caracterele // (dublu slash), sau # (diez). Tot textul care urmează acestor caractere (până la sfârșitul liniei) reprezintă un comentariu. Pentru a comenta mai multe linii se folosește perechea de marcatori /* si */.

Exemplu: Cod PHP cu comentarii

<?

// Acesta este primul meu comentariu

# si acesta este un comentariu pe o linie

/*

tot ce scriem intre aceste simboluri este un comentariu si nu va avea efect la executarea

programului.

*/

echo "hello world!";

?>

Variabile PHP

În general, o variabilă reprezintă un container special identificat printr-un nume și care înmagazinează o valoare.

Din punct de vedere sintactic numele este un identificator, adică o succesiune de litere, cifre sau liniuța de subliniere (underscore), dar întotdeauna primul caracter este litera sau liniuța de subliniere. În plus, în PHP identificatorul unei variabile este precedat întotdeauna de semnul dolar (“$”).

Din punct de vedere semantic în spatele numelui unei variabile se află adresa de memorie la care aceasta este depozitată.

Numele unei variabile în PHP este case-sensitive, adică se face deosebirea între literele mari și cele mici. Spre exemplu $var și $Var reprezintă două variabile distincte.

Exemplu: Nume de variabile

$a;

$var;

$numeTitularCont;

$123; //nume invalid, incepe cu o cifra;

$_alpha1; //nume valid;

Exemplu: Atribuire de valori variabilelor prin referință

$a='rosu'; //variabila $a contine textul 'roșu'

$b=&$a; //variabila $b refera variabila $a

//va contine tot textul 'rosu'

$b='verde';//variabila $b va contine textul 'verde'

//variabila $a de asemenea

Exemplu: Variabile cu nume dinamic

$hello = "world"; //variabila cu numele hello contine textul ‘world’

Putem scrie echivalent:

$a = "hello"; //numele variabilei hello il atribuim variabilei a

$$a = "world"; //continutul variabilei hello va fi textul ‘world’

Tipuri de date

PHP folosește, în mod curent, următoarele categorii de tipuri de date. Tipurile din categorii nu reprezintă cuvinte cheie PHP:

Tipuri scalare reprezentate de:

boolean

integer

float

string

Tipuri compuse

array

object

Tip generic

NULL.

Exemplu: Variabile de tip boolean

ce au valoare TRUE explicit sau prin conversie implicită

$var = TRUE;

$var = 1;

$var = -1;

ce au valoarea FALSE

$var = FALSE;

$var = 0;

$var = ""; //sirul vid

Exemplu: Variabile de tip integer

$var = 1234; //numar intreg zecimal

$var = -123; //numar intreg negativ

$var = 0123; //numar intreg in format octal

$var = 0x1AB; //numar intreg in format hexazecimal

Exemplu: Variabile de tip float

$var = 1.23;

$var = 1.2e3; //formatul stiintific

$var = -7E-10;

Exemplu: Variabile de tip string

$var = 'Acesta este un string';

Exemplu: Concatenarea a două string-uri

/* Atribuirea unei valori de tip string. */

$str = "Acesta este un string";

/* concatenarea a doua string-uri. */

$str = $str . " cu ceva mai mult text";

Exemplu: Concatenarea a două string-uri

/* Atribuirea unei valori de tip string. */

$str = "Acesta este un string";

/* concatenarea a doua string-uri. */

$str = $str . " cu ceva mai mult text";

Tipul array

În general, acest tip de date este cunoscut sub numele de tip tablou sau șir și reprezintă o structură ordonată cu una sau mai multe dimensiuni.

Exemplul: Atribuirea de valori unui array

$a[0] = "abc"; //elementul de indice 0 din a primeste valoarea abc

$a[1] = "def"; //elementul de indice 1 din a primeste valoarea def

Sintaxa folosind funcția predefinită array():

$nume_array = array (cheie => valoare, …);

Exemplul: Definirea unui array folosind funcția array()

$a = array('culoare' => 'rosu', 'gust' => 'dulce', 'forma' => 'rotund', 'nume' => 'mar', 4);

Operatori și expresii

Operatorii sunt simboluri care fac posibilă folosirea uneia sau a mai multor valori pentru a crea o nouă valoare. O valoare care este operată de către un operator se numește operand. O expresie este orice combinație validă de funcții, valori și operatori cu scopul de a obține o nouă valoare.

Constante

Constantele sunt identificate printr-un nume și au o singură valoare. Numele este un identificator (care nu va fi precedat de semnul $), dar exprimă adresa unei zone de memorie nemodificabilă. Odată valoarea constantei stabilită, aceasta nu mai poate fi modificată. Prin convenție, numele constantelor se scriu cu majuscule.

Definirea unei constante se poate face utilizând funcția define().

Exemplu: Definirea unei constante cu define(nume, valoare)

define("CONSTANTA", "o constanta");

echo CONSTANTA; // Afiseaza: "o constanta"

Structuri de control

Instrucțiuni de decizie

Instrucțiunile de decizie fac ca pe baza unor condiții, exprimate prin expresii logice, anumite secvențe de cod să fie executate iar altele nu.

Instrucțiunea if

Sintaxa generală a instrucțiunii este:

if(expresie){

//cod care se execută dacă expresie este adevarată

}

else{

//cod care se execută altfel

}

Instrucțiunea switch

Este cunoscută și sub numele de instrucțiunea de selecție multiplă. Este posibil ca dintr-o succesiune de secvențe de cod doar o parte dintre ele să se execute pentru anumite date de intrare. Orice instrucțiune switch poate fi scrisă echivalent prin mai multe instrucțiuni if, dar switch oferă o sintaxă mai compactă, mai clară și mai flexibilă.

Sintaxa generală este:

switch(expresie){

case rezultat1:

// cod care se execută dacă expresie are valoarea

// rezultat1

break;

case rezultat2:

// cod care se execută dacă expresia are valoarea

// rezultat2

break;

………

default:

// cod care se execută dacă expresia nu a avut nici una

// dintre valorile enumerate mai sus

}

Instrucțiunea break

Este folosită pentru întreruperea execuției instrucțiunilor for, foreach, while, do-while sau switch.

Sintaxa generală este:

break numar;

unde, numar este opțional, dar în cazul în care este prezent va indica numărul de instrucțiuni încuibate, dintre cele amintite, care vor fi întrerupte de break.

Instrucțiunea continue

Este folosită pentru salt la următoarea repetiție, dacă aceasta mai există, într-o instrucțiune repetitivă.

Instrucțiuni repetitive

Instrucțiunile repetitive fac ca pe baza unor condiții, exprimate prin expresii logice, anumite secvențe de cod să fie executate de mai multe ori.

Instrucțiunea while

Este cunoscută ca instrucțiunea repetitivă cu test inițial și are următoarea sintaxă generală:

while(expresie){

// cod care se execută cât timp expresie este adevărată

}

Instrucțiunea do-while

Este cunoscută sub numele de instrucțiune repetitivă cu test final. Principala deosebire față de instrucțiunea repetitivă cu test inițial este că blocul de cod din corpul instrucțiunii se execută măcar o dată. Sintaxa generală este:

do{

// cod care se execută cât timp expresie este TRUE

}while(expresie);

Instrucțiunea for

Poate fi asemănată cu o instrucțiune repetitivă cu test inițial. Totuși, instrucțiunea for este o reuniune de mai multe instrucțiuni. Sintaxa generală este:

for(expr1; expr2; expr3){

// cod care se execută cât timp valoarea expr2 e TRUE

}

Instrucțiunea foreach

Datorită modului special în care sunt tratate array-urile în PHP, spre exemplu au domenii de indici discontinue, s-a introdus o instrucțiune repetitivă pentru parcurgerea acestora. Sintaxa generală este:

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

//cod ce se execută de atâtea ori căte elemente sunt în variab_array

}

Funcții PHP

Ce este o funcție?

Funcțiile reprezintă modalitatea de bază de implementare a conceptului de modularizare a programelor, în PHP. Prin modularizare programele devin mai flexibile, mai lizibile de către programator și mai ușor de depanat. Modularizarea stă la baza conceptului de programare orientată de obiecte despre care vom discuta în capitolele următoare.

Sintaxa generală de apel a unei funcții este:

nume_functie(lista_parametri_actuali);

PHP conține o bibliotecă vastă de funcții predefinite.

Pentru a defini o funcție folosim următoarea sintaxă generală:

function nume_functie(lista_parametri_formali){

// codul funcției

}

Exemplu: Definirea și apelul unei funcții fără parametri

<html>

<head>

<title>Exemplul 5.2</title>

</head>

<body>

<?php

function helloWorld(){

echo "HELLO WORLD!";

}

helloWorld();

?>

</body>

</html>

Exemplu: Funcție cu parametri valoare și parametri referință

<html>

<head>

<title>Exemplul 5.3</title>

</head>

<body>

<?php

$a=1;

$b=2;

function interschimb($a, $b) {

$aux=$a;

$a=$b;

$b=$aux;

}

interschimb($a,$b);

echo "a=$a, b=$b";

?>

</body>

</html>

Variabile globale

Așa după cum am afirmat, în capitolul despre variabile, domeniul implicit de existență (vizibilitate) al variabilelor este blocul în care au fost definite. Astfel, în cazul unei funcții, o variabilă definită în programul apelant nu este recunoscută, în mod predefinit, în definiția funcției. Pentru a modifica domeniul predefinit de vizibilitate al variabilelor se folosește cuvântul rezervat PHP global sau variabila superglobală, de tip array, predefinită, $GLOBALS. Această variabilă este indexată după numele variabilelor globale reținute ca elemente.

Exemplu: Variabile globale definite prin globals

<html>

<head>

<title>Exemplul 5.7</title>

</head>

<body>

<?php

$a = 1;

$b = 2;

function sum(){

global $a, $b;

$b = $a + $b;

}

sum();

echo $b;

?>

</body>

</html>

PHP deține mai multe variabile superglobale. Printre ele: $_SERVER, $_GET, $_POST, $_REQUEST, $_SESSION, $COOKIE, $_ENV sau $_FILES.

Formulare HTML

Un formular reprezintă un ansamblu de zone active alcătuit din butoane, casete de selecție, câmpuri de editare etc. O sesiune de lucru cu o pagină web ce conține un formular și interacționează cu un server PHP cuprinde următoarele etape:

clientul completează formularul și îl expediază server-ului PHP;

aplicația PHP de pe server analizează formularul și efectuează operațiile necesare;

server-ul trimite clientului eventual un răspuns.

Un formular este definit într-un bloc delimitat de etichetele:

…

</form>

Informația introdusă într-un formular este expediată serverului web prin acționarea butonului de expediere (în care type="submit"), prin acționarea tastei “enter”, acolo unde formularul permite acest lucru, sau prin oricare alte tehnici definite de programator. Destinația de pe server a aplicației ce prelucrează datele este dată de valoarea atributului action al etichetei form.

Datele sunt transmise serverului ca o serie de perechi de formă nume-valoare.

Informația introdusă într-un formular este expediată serverului web prin acționarea butonului de expediere (în care type="submit"), prin acționarea tastei “enter”, acolo unde formularul permite acest lucru, sau prin oricare alte tehnici definite de programator. Destinația de pe server a aplicației ce prelucrează datele este dată de valoarea atributului action al etichetei form.

Datele sunt transmise serverului ca o serie de perechi de formă nume-valoare.

PHP include mai multe modalități de a accesa datele introduse de utilizator într-un formular dependent și de metoda cu care au fost expediate aplicației de pe server.

Variabila superglobală $_GET

Aceasta reprezintă o variabilă de tip array care conține valorile elementelor transmise de la formular scriptului PHP, ce le prelucrează, prin metoda GET. Cheia unui element din variabilă este numele unui element al formularului iar valoarea este valoarea acelui element, transmise prin perechea nume=valoare.

PHP posedă variabila superglobală $_SERVER, variabilă de tip array, ce furnizează informații de mediu de pe server. Nu este obligatoriu ca toate informațiile posibil a fi expediate să poată fi într-adevăr disponibile. Printre informațiile trimise există un element cu cheia QUERY_STRING care are ca valoare ceea ce urmează semnului „?” în adresa URL. Aceasta poate fi o alternativă pentru $_GET.

Exemplu: $_SERVER['QUERY_STRING'] are valoarea:

nume=Vasilescu&prenume=Vasile

Valoarea elementului $_SERVER['REQUEST_METHOD'] va indica tipul de metodă cu care au fost trimise server-ului informațiile din formular.

Variabila superglobala $_POST

Aceasta reprezintă o variabilă de tip array care conține valorile transmise scriptului PHP prin metoda POST, de la un formular. Cheia unui element al variabilei este numele unui element al formularului, iar valoarea este valoarea corespuntătoare respectivului element, transmise prin perechea nume=valoare.

Variabila superglobala $_REQUEST

Aceasta reprezintă o variabilă de tip array care conține valori transmise scriptului PHP prin metodele POST sau GET de la un formular. Cheia unui element al variabilei este numele unui element al formularului iar valoarea este valoarea corespunzatoare respectivului element, transmise prin perechea nume=valoare.

Validarea datelor din formular

Când lucrăm cu pagini care implică procesarea formularelor este deseori necesar sa validăm datele introduse de utilizatori. PHP conține numeroase funcții predefinite pentru aceasta.

Facem o trecere în revistă a celor mai des folosite: is_string(var), is_int(var), is_numeric(var), is_double(var), is_bool(var), isset(var), print_r(var).

Sesiuni

Pornirea unei sesiuni

Pentru a putea folosi o sesiune trebuie mai întâi ca aceasta să fie pornită. În mod predefinit sesiunile nu pornesc automat.

Pentru a realiza pornirea automată a sesiunilor trebuie ca în fișierul php.ini să setăm valoarea opțiunii session.auto_start la valoarea 1. În mod predefinit:

session.auto_start = 0

Dacă sesiunile nu pornesc automat atunci va trebui să apelăm funcția session_start() în fiecare script PHP ce folosește sesiuni.

Lucrul cu variabile sesiune

PHP posedă variabila de tip array, superglobală, $_SESSION în care cheia unui element este numele variabilei sesiune, iar valoarea elementului este valoarea variabilei sesiune

Distrugerea unei sesiuni

pentru a distruge o sesiune, inclusiv variabilele atașate, vom folosi următoarea secvență:

session_start();
$_SESSION = array();
setcookie(session_name(), '', time()-42000, '/');
session_destroy();

Lucrul cu fișiere

Deschiderea fișierelor și crearea fluxurilor de lucru cu fișiere

Deschiderea unui fișier sau a unui URL se face prin funcția fopen(), ce are următoarea sintaxă simplificată: fopen(nume_fișier, mod)

Pentru închiderea fluxului către un fișier se folosește funcția fclose() ce are sintaxa:

fclose(flux);

Exemplu: Crearea unui fișier extern

<?php

$numefisier = "../fișier.txt";

$flux=@fopen($numefisier,"wt") or exit("Nu se poate deschide fișierul");

fclose($flux);

?>

Exemplu : Citirea din fișier cu fread()

<?php

$numefisier = "fișier.txt";

$flux = @fopen($numefisier, "r") or exit("fisierul nu poate fi deschis");

$continut = @fread($flux,filesize($numefisier)) or exit("fisierul nu poate fi citit");

echo $continut."<br>";

fclose($flux);

?>

Exemplu: Scrierea în fișier cu fwrite()

<?php

$numefisier = "fișier.txt";

$flux = fopen($numefisier, "w") or exit("fisierul nu poate fi deschis");

$continut = "text scris în fisier";

fwrite($flux,$continut);

fclose($flux);

?>

Copierea fișierelor

Pentru a copia conținutul unui fișier extern într-un alt fișier extern PHP pune la dispoziție funcția copy(). Sintaxa acesteia este :

copy(nume_fiser_sursa, nume_fiser_destinatie)

Ștergerea fișierelor

PHP oferă funcția unlink() pentru ștergerea fișierelor externe. Funcția trebuie folosită cu grijă pentru că, o dată ce un fișier a fost șters el nu mai poate fi recuperat. Sintaxa funcției este următoarea:

unlink(nume_fiser)

Redenumirea fișierelor

Funcția rename() este folosită pentru redenumirea fișierelor. Sintaxa funcției este :

rename(nume_fișier_original, nume_fișier_nou)

Lucrul cu directoare

Crearea unui director se face cu funcția:

mkdir(nume_director)

unde, nume_director poate include și calea către director.

Operații pe fișiere

Verificarea existenței unui fișier

Putem testa existența unui fișier sau a unui director folosind funcția file_exists(). Sintaxa acesteia este:

file_exists(nume)

Fișier sau Director?

Putem afla dacă entitatea pe care o testăm este fișier folosind funcția is_file(nume).

if( is_file( "test.txt" ) )

print "test.txt este fișier!";

De asemenea, putem verifica dacă entitatea este director cu ajutorul funcției is_dir(nume).

if ( is_dir( "/tmp" ) )

print "/tmp este director";

Funcții ce returnează atributele unui fișier

PHP posedă mai multe functii pentru testarea diferitelor atribute ale unui fișier. Vom prezenta în continuare câteva dintre cele mai des folosite:

filesize(nume_fișier) determină dimensiunea în octeți a unui fișier;

fileatime(nume_fișier) determină timpul la care a fost accesat ultima oară fișierul;

filemtime(nume_fișier) determină timpul la care a fost modificat ultima oară fișierul;

is_readable(nume_fișier) determină dacă fișierul poate fi citit;

is_writeable(nume_fișier) determină dacă fișierul poate fi scris;

is_executable(nume_fișier) determină dacă fișierul este executabil.

PHP deține mai multe funcții ce operează asupra pointerului de fișier. Vom da în continuare câteva dintre cele mai folosite:

rewind(flux) care determină poziționarea pointerului la începutul fluxului de fișier;

ftell(flux) care determină poziționarea curentă a pointerului fișierului;

fseek(flux, deplasare, pozitie_initiala) care determină poziționarea pointerului de fișier cu un număr de octeți dat de deplasare (poate fi și negativ) față de valoarea indicată de pozitie_initiala. Valorile posibile ale celui de-al treilea parametru sunt: SEEK_SET (implicit) începutul fișierului, SEEK_CUR poziția curentă respectiv SEEK_END sfârșitul fișierului;

feof(flux) determină dacă pointerul indică sfârșitul de fișier

6.4. Exemple PHP

PHP 5 Variables

PHP Data Types

PHP – If

PHP SWITCH

PHP While

PHP Do while

PHP For

PHP Functions

Capitolul 7. MYSQL

7.1. Introducere în MySQL

MySQL este un sistem de gestiune a bazelor de date relaționale, fiind cel mai popular SGBD open-source la ora actuală.

Pentru a administra bazele de date MySQL se poate folosi modul linie de comandă sau, prin descărcare de pe internet, a unei interfațe grafice: MySQL Administrator și MySQL Query Browser. Un alt instrument de management al acestor baze de date este aplicația gratuită, scrisă în PHP, phpMyAdmin.

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.

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:

Tipul de date întregi încep de la valori negative la pozitive. Dacă se adaugă opțiunea UNSIGNED, care este un modificator de coloană, nu vor mai fi valori negative ci vor începe de la 0.

Alți modificatori sunt:

AUTO_INCREMENT funcționeaza cu orice tip întreg. La fiecare rând nou adaugat în baza de date numarul asociat va fi incrementat.

NULL înseamnă făra 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.

7.2. Conectarea la baza de date

De câte ori vom lucra cu MySQL va trebui să ne conectăm la baza de date folosind o anume sintaxă. Vom salva aceasta secvență de cod cu numele conexiune.php putând fi folosită ulterior în mai multe scripturi utilizând funcția include().

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

<?php
$hostname="localhost";
$username="root";
$password="pass";
$database="test";

$conexiune=mysql_connect($hostname,$username,$password) or die ("Nu ma pot conecta la baza de date");

$bazadate=mysql_select_db($database,$conexiune) or die ("Nu gasesc baza de date");

?>

mysql_connect() este funcția prin care ne conectăm la baza de date cu următorii parametrii: numele serverului, nume utilizator și parola pentru conectarea la baza de date.

Variabila $conexiune va avea o valoarea TRUE sau FALSE funcție de rezultatul conectarii la serverul MySQL folosind funcția mysql_connect(), iar în cazul eșuarii va afișa mesajul conținut de construcția die().

mysql_select_db este funcția care stabilește baza de date la care ne vom conecta, având ca parametrii numele bazei de date și identificatorul de acces la conexiunea către serverul MySQL.

În mod similar variabila $bazadate folosind functia mysql_select_db va afișa în cazul negăsirii bazei de date mesajul conținut de die.

Puteți modifica variabilele din fișierul conexiune.php în funcție de configurarile propriei baze de date:

$hostname = adresa serverului, de cele mai multe ori este localhost dar pentru siguranța întrebati administratorul serverului;

$username = username-ul de conectare la baza de date;

$password = parola de conectare la baza de date;

$database = numele bazei de date .

După ce operațiile dorite au fost executate cu baza de date va trebui să închidem conexiunea folosind functia mysql_close() având ca argument datele de acces la serverul MySQL.

mysql_close($conexiune);

Anterior am salvat într-un fisier php numele utilizator și parola care poate parea un lucru riscant. Codul php este interpretat de server și doar rezultatul este afișat, deci datele conținute nu vor fi afișate în browser vizitatorului.

Rescriem fișierul conexiune.php folosind funcția mysqli.

/* urmeaza fiesierul conexiune.php */

<?php
$hostname = "localhost";

$username = "username";

$password = "password";

$database = "database";

// Create connection

$connection = mysqli_connect($hostname, $username, $password, $database);

// Check connection

if ($connection->connect_error) {

die("Connection failed: " . $connection->connect_error);

}
?>

7.3. Comenzi MYSQL

CREATE TABLE – Crearea tabelelor

Bazele de date conțin tabele. Aceste tabele sunt similare cu cele din HTML conținând randuri și coloane. Fiecare diviziune se numeste celula sau camp și are anumite proprietăți. Fiecare tabel din baza de date are un nume sau titlu. 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 vor fi separate prin virgulă iar fiecare coloană va avea un nume și tip.

Pentru a crea un tabel mai întâi includem în script fisierul anterior conexiune.php de conectare la baza de date și apoi folosim funcția CREATE TABLE.

Exemplu: creăm tabelul proba cu 3 coloane. Prima coloană este id de tip PRIMARY KEY de 3 caractere, a doua nume de 20 caractere tip varchar iar a treia prenume de 40 caractere tot varchar. Înainte de a crea tabelul îl ștergem dacă el există deja.

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

<?php
include "conexiune.php";

$delete="DROP TABLE IF EXISTS proba";

mysql_query($delete, $conexiune);

$table="CREATE TABLE proba (id int(3) NOT NULL AUTO_INCREMENT,

nume varchar(20) NOT NULL ,

prenume varchar(40) NOT NULL ,

if(mysql_query($table)){
echo "Tabelul a fost creat";

}
else{
echo "Tabelul nu a fost creat";

}

mysql_close($conexiune);
?>

INSERT – Introducere date

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');

SELECT – Preluarea datelor

Proprietatea SELECT poate fi utilizată într-o comandă mysql_query pentru a alege anumite informații din tabelul bazei de date.

Sintaxa pentru preluarea datelor din tabelul bazei de date este:

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

Pentru a afișa fiecare rand din tabel se foloseste o bucla while și comanda mysql_fetch_row.

UPDATE

Putem modifica valoarea unei înregistrări din baza de date pentru un anume id cu urmatoarea 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 putem actualiza o înregistrare în baza de date, dar mai înainte trebuie să afișăm înregistrările pentru a selecta care se potrivesc solicitărilor noastre.

DELETE

Ștergerea poate fi făcută folosind id-ul înregistrării dorite cu sintaxa:

DELETE FROM nume_tabel WHERE id='$id';

Condiționale

Condiționalele sunt operatori care ne permit să particularizam interogarea bazei de date.

LIKE si NOT LIKE

Dacă dorim să facem o cautare mai generală în baza de date, introducand doar câteva caractere, putem folosi simbolurile LIKE sau NOT LIKE. Caracterul _ anunță că rezultatul va conține înca un caracter în plus iar % înlocuiește zero sau mai multe caractere. Acestea pot fi adăugate la început, la sfarsit sau în ambele părți.

Capitolul 8. Smarty

8.1. Introducere

Smarty este un template pentru PHP, ce facilitează separarea dintre prezentare (HTML/CSS) și logica aplicației.

Smarty este unul dintre cele mai folosite sisteme de template pentru PHP. El este folosit și în unele CMS-uri sau framework-uri web.

Smarty separă, practic, partea de View din modelul MVC de Controller și Model.

Mai precis, Smarty oferă posibilitatea de a crea fișiere .tpl în care să poată fi ținut View-ul aplicației. El transmitele datele din Controller în View prin asignarea anumit valori și apelarea unei funcții de randare a template-ului.

Este destul de evident că Smarty nu ia în considerare Modelul, care trebuie separat de Controller (dacă se dorește acest lucru) de către dezvoltator.

Smarty oferă și posibilitatea de caching. Practic, template-urilor se vor randa o singură dată pe perioada lifetime-ului unui cache.

Smarty genereaza continutul web prin plasarea de tag-uri Smarty în cadrul documentului. Aceste taguri sunt procesate și substituite de alt cod. Tagurile sunt directive pe care Smarty le are încapsulate în delimitatorii template-ului. Aceste directive pot fi variabile, marcate prin semnul $, funcții sau instrucțiuni de control. Smarty permite programatorilor PHP să definească funcții care pot fi accesate prin tag-uri Smarty.

Una din particularitătile Smarty-ului este compilarea template-urilor. Aceasta înseamna ca Smarty citește fișierele template și creează scripturi PHP din ele. O data ce sunt create, ele vor fi executate de atunci încolo.

Alte avantaje Smarty :

Back-end PHP, interfață Smarty;

Dezvoltare rapidă pentru developeri și designer;

Rapid și ușor de întreținut;

Flexibilitate în customizare;

Securitate – izolare prin PHP;

Open-source;

Știe să recompileze doar fisierele template care prezintă modificări;

Putem creea propriile funcții și modificatori de variabile, pentru ca limbajul template-ului este extreme de extensibil;

Sintaxa tag-urilor pentru delimitatori ({delimitator}) template-ului sunt configurabile: {$foo}, {{$foo}}, <!–{$foo}–>, etc.;

Este posibil să scriem cod PHP direct în fișierul template, deși acest lucru nu se dorește din moment ce acest engine este foarte customizabil;

Suport built-in caching;

Suportă high-level template programming precum: expresii regulate, instrucțiuni de control (foreach, while, if, elseif, else), modificatori de variabilă;

Funcții create de utilizator;

Evaluarea matematica in cadrul template-ului.

8,2. Elemente Smarty

Comentarii

Comentarile dintr-un template sunt incluse între caracterele * și delimitatorii de tag-uri, ca în exemplul următor:

{* acesta este un comentariu *}

Comentarile Smarty nu sunt incluse în output-ul final spre deosebire de comentarile HTML:

<!—comentarii HTML –>

Variabile

Variabilele Smarty, ale unui template, sunt, în general, precedate de $ și sunt incluse în tag-urile Smarty. Numele lor este un identificator supunându-se tuturor regulilor din PHP. Și în Smarty avem variabile array sau object. Accesul se face după reguli specifice ilustrate în exemplul urmator:

Exemplu: Variabile

Valorile variabilelor provin din diverse surse:

asignate în fișierul PHP asociat.

încarcate din fisiere config.

din obiectul rezervat $smarty.

Variabilele expediate in fisierul PHP, cu care template-ul este relaționat, prin $_GET, $_POST, $_COOKIE, $_SERVER, $_ENV si $_SESSION vor putea fi obtinute prin construcții sintactice derivate din obiectul $smarty, respectiv $smarty.get, $smarty.post, $smarty.cookie, $smarty.server, $smarty.env sau $smarty.session urmate de numele variabilei.

În interiorul tag-urilor Smarty dintr-un template putem aplica modificatori variabilelor pentru a le schimba valoarea. Modificatorii pot fi aplicați și funcțiilor definite de utilizator sau string-urilor. Pentru a aplica un modificator trebuie ca numele variabilei sau funcției să fie urmat de semnul | (pipe) și numele modificatorului. În plus, un modificator poate accepta parametri care ii afectează comportamentul. Parametrii sunt precedați de semnul: (colon).

Modificatori aplicați variabilelor:

capitalize determină transformarea primei litere a fiecarui cuvânt în majusculă. Poseda și un parametru de valoare true sau false (implicit) pentru a gestiona situația în care un cuvant conține și cifre. Dacă parametrul are valoarea true atunci și acest cuvânt va avea prima litera majusculă:

$smarty->assign('articleTitle', 'next x-men film, x3, delayed.');

Respectiv în fisierul tpl:

{$articleTitle}

{$articleTitle|capitalize}

{$articleTitle|capitalize:true}

cat determină concatenarea variabilei cu valoarea parametrului, care trebuie să fie de tip string:

$smarty->assign('articleTitle', "Psychics predict world didn't end");

Respectiv în fișierul tpl:

{$articleTitle|cat:' yesterday.'}

count_characters numară caracterele variabilei. Are un parametru, care atunci când are valoarea true numara și caracterele albe

$smarty->assign('articleTitle', 'Cold Wave Linked to Temperatures.');

Respectiv în fisierul tpl:

{$articleTitle}

{$articleTitle|count_characters}

{$articleTitle|count_characters:true}

pe aceeași tema mai avem: count_paragraphs (fără parametri), count_sentences (fără parametri), count_words (fără parametri)

date_format. Acest modificator formatează data și timpul în format dat strftime().

Funcții

Orice tag Smarty afisează o variabilă sau invocă o funcție. În general, apelul unei funcții în interiorul unui tag Smarty se face printr-o construcție sintactică ca cea din exemplul următor:

{funcname attr1='val1' attr2='val2'}

În Smarty avem două tipuri de funcții:

built-in sunt cele definite de Smarty. Exemple: {if}, {section} sau {strip}. Nu pot fi definite funcții utilizator cu același nume.

definite de utilizator (custom) sunt funcții adiționale, implementate prin plug-in-uri sau definite în aplicatia curentă. Exemple: {html_options} sau {popup}.

Functii built-in

Principalele functii built-in:

{capture}…{/capture} determină atribuirea ieșirii template-ului, cuprins între tag-uri, unui string, în loc să fie afișat.

{foreach}…{/foreach} este folosită pentru parcurgerea șirurilor, indiferent dacă sunt indexate sau elementele sunt referite de chei.

{if}…{elseif}…{else}…{/if} este folosită pentru introducerea la ieșire doar a anumitor blocuri de script. Este asemanatoare structurii din PHP. Putem folosi operatori relaționali, dupa urmatoarea sintaxă și cu urmatoarea semnificație: eq (egal), neq, gt (mai mare), lt (mai mic), ge (mai mare sau egal), le (mai mic sau egal), === (identitate), not, mod, is [not] div by (este sau nu divizibil prin), is [not] even (par), is [not] odd.

{include}, folosită pentru includerea altor template-uri în template-ul curent. Are un atribut obligatoriu, file, a carui valoare este numele fișierului ce conține template-ul inclus precum și atribute optionale: assign, care dă numele variabilei în care dorim să stocăm ieșirea, în loc să o afișam, și o succesiune de atribute pe post de variabile locale (de tip valoare) ce vor fi transmise template-ului inclus.

Exemplu: putem împarți fișierul .htpl în trei fișiere. Primul header.htpl, care va crea header-ul template-ului având o variabilă transmisă ca parametru, cu valoare predefinită, iar al doilea continut.tpl iar al treilea footer.htpl, ce conține partea de final a fișierului.

{literal}…{/literal}, folosită pentru ca un bloc să fie interpretat fară alte transformari (exact în modul în care a fost scris).

{php}…{/php}, folosită pe a introduce cod PHP direct în template

{section}…{/section}, folosită pentru parcurgerea șirurilor indexate.

Functii Custom

Principalele funcții custom:

{assign} este folosita pentru asignarea variabilelor unui template pe parcursul execuției lui. Are doua atribute obligatorii: var, care determină numele variabilei ce urmează a fi atribuită și value, care reprezinta valoarea atribuită.

Exemplu:

{assign var='name' value=Dan}

The value of $name is {$name}.

{counter}, este folosit pentru a afisa un contor. La fiecare apel valoarea contorului va creste cu o valoare stabilită.

{cycle} este folosit pentru a alterna o mulțime de valori.

{fetch} este folosit pentru a returna fișiere din sistemul local, prin http sau ftp și afișarea conținutului lor.

{html_checkboxes} crează un grup de checkbox-uri din datele trimise ca parametru.

{html_image}, folosită pentru generarea unui tag HTML <img>.

{html_options}, folosită pentru a creea grupuri HTML de tipul <select><option> din datele trimise ca parametru.

{html_radios}, folosită pentru a creea grupuri de butoane HTML radio din datele trimise ca parametru.

{html_select_date}, folosită pentru a crea liste derulante pentru data calendaristică.

{html_select_time}, folosită pentru a crea liste derulante pentru ora. Poate afișa formatul întreag sau doar orele, minutele, secundele sau meridianul.

{html_table}, este o funcție custom care crează un tag HTML <table> dintr-un sir de date parametru.

{math}, folosit pentru a evalua expresii matematice în template și a le afisa în locul funcției.

Capitolul 9. "Produs interactiv în studiul sistemelor de operare"

9,1, Descrierea aplicației

E-learning înseamnă învățarea într-o lume virtuală, în care cel ce vrea să aprofundeze: elevul, studentul (userul) interacționează cu calculatorul rezolvând chestionare cu o singură variantă de răspuns, și teme cu scopul de a aprofunda disciplina pusă la dispoziție de profesor (admin).

Pe site se pot loga userii (studenții) și administratorii (profesorii).

Presupunem următorul scenariu:

Studentul intră pe site. La apelarea site-ului apare pagina de login. Studentul nu are cont și dorește să se înregistreze:

Completează datele din formularul de înregistrare.

Studentul se logheaza cu contul de email și parolă.

Studentul se logheaza cu contul de mail și parolă. Apare un mesaj de avertizare care-l informeaza ca nu a primit acceptul administratorului.

La o dată stabilită de administrator (profesor), după ce toți studenții și-au creat conturi prin înregistrare admin-ul se loghează pentru a activa conturile înregistrate pe care le verifica cu o lista reală de studenți eliminand "intrușii".

Bineînteles că admin-ul are posibilitatea să creeze conturi în locul studenților furnizându-le o parola comună iar ulterior studenții pot să-și schimbe parola (dar despre acest lucru discutăm mai târziu).

Admin-ul se loghează:

Apare o pagină de informare cu tot ce poate face admin-ul: acces la manual, chestionare, teme, la un ghid de utilizare, la o prezentare video toate acestea pentru a vedea exact ce vede studentul logat, pentru a corecta anumite "nereguli".

Are acces prin "configurare" la pagină de administrare useri, la contul lui, are posibilitatea să adauge întrebări în chestionare cu variante de răpuns și să creeze teme, pe care le pune la dispoziția studenților.

Alege optiunea "Administrare useri".

Observă că userul Ciolac Romulus Daniel nu este user activ, cu alte cuvinte nu poate intra pe site.

Pe această pagină are posibilitatea să adauge useri (studenți), poate șterge studenți, poate să delege unii studenți prin drept de admin, să se ocupe de "actualizări de teme".

Editeaza userul Ciolac Romulus Daniel.

Activează userul Ciolac Romulus Daniel și salvează informațiile.

După salvare se observă că userul Ciolac Romulus Daniel are dreptul să intre pe site.

Părăsim pagină prin logout pentru a simula logarea ca student.

Dacă înainte userul Ciolac Romulus Daniel a fost blocat la intrarea pe site, verificăm dacă acum este deblocat de profesor prin logare.

Logarea a avut succes și suntem întâmpinați de o pagină care ne informază despre drepturile de user.

Accesăm opțiunea de meniu "Manual".

Apare manualul profesorului pe care-l putem deschide pe o altă pagină pentru maximizare.

Manualul are adaptat un cuprins cu linkuri automate care face salturi la pagină dorită.

Facem un salt la primul test de evaluare a cunoștințelor în care găsim chestionare și teme aferente primului capitol pentru aprofundarea materiei parcurse până la acel moment.

Fiecare capiol se termină cu chestionare și teme.

Apelăm opțiunea "Chestionare" din meniu.

Dacă nu bifăm unitatea de învățare automat se alege unitatea M1U1 (prima).

Avem un timp estimat de 600 secunde total (60 secunde pe întrebare) de rezolvare a chestionarului ales (primul în acest caz).

Putem modifica acest timp din "contul meu". Cu alte cuvinte fiecare student își poate adapta timpul de rezolvare a chestionarelor.

Se observă timpul de 60 de secunde pe întrebare.

Setăm timpul la 4 secunde pe întrebare. (desigur timpul este setat pentru testarea aplicației, în realitate timpul va fi mult mai mare).

Salvăm și vedem datele actualizate extrase din tabela users.

Alegem opțiunea "Chestionare" din meniu.

Alegem unitatea de învățare dacă dorim.

Observăm că timpul estimat s-a modificat la 40 de secunde.

Alegem "Start Chesionar".

Vedem un indicator care ne avertizează asupra timpului rămas.

Timpul scade, bară cu verde se umple indicând că timpul trece și că trebuie să ne grăbim în rezolvarea chestionarului.

O să sar peste unele întrebări că să nu umplu inutil lucrarea de licență.

Am terminat de completat chestionarul într-un timp bun.

Întru în "contul meu".

Setez un timp mai mic de rezolvare a chestionarului.

Salvez timpul setat.

Refac chestionarul.

Aleg aceiasi unitatea de învățare.

Observ că timpul s-a modificat.

Timpul trece mai repede, trebuie să măresc ritmul de rezolvare a chestionarului.

Nu cred că mă încadrez în timp.

Nu m-am încadrat în timp.

Aleg opțiunea "Teme" din meniu și îmi apare un paragraf în care trebuie să completez corect.

Nu știu să rezolv și apelez la butonul "Afișează răspunsurile".

Validez cu "Submit".

Pot trece la altă tema, pot reveni la tema anterioară.

Pot parcurge temele în ciclu când ajunge la ultima, următoarea face salt la prima tema și invers când acționez precedenta.

"Ghidul de utilizare" îmi arată slide-uri în tranziție practic toți pașii de la A la Z formați din 159 de fișiere imagini PNG extrase din filmul "Prezentare video", aflate în folderul "Poze".

"Prezentare video" îmi arată toți pașii în format video ca student și ca profesor. Se puteau fragmenta ca tutorial video doar pentru useri și tutorial video doar pentru admin, dar acest aspect nu prezintă o importantă foarte mare este doar o chestiune de detaliu.

Ghid de utilizare.

Prezentare video.

Mă deloghez, cu scopul de a mă loga ca admin.

Mă loghez ca admin.

Am acces la manual.

Pot parcurge cu ușurință manualul.

Aleg "Chestionare".

Pot rezolva chestionare la fel ca studentul, verificând în acest mod funcționarea lor. Pot seta timpul chestionarelor prin cont.

Pot rezolva chestionare.

Pot rezolva chestionare la fel ca studentul, verificând în acest mod funcționarea lor corectă. Pot seta timpul chestionarelor prin cont.

Pot alege teme ca si studentul si rezolva similar.

Am acces la ghidul de utilizare pentru a vedea exact ce vede și studentul.

La fel am acces la filmul din "Prezentare video" care este tot un ghid de utilizare (pas cu pas).

Aleg "Configurare".

Pot adăuga întrebări în chestionar.

Completez întrebarea cu variantele de răspuns.

Aleg varianta corectă de răspuns.

Aleg categoria din unitatea de învățare.

Salvez în chestionar întrebarea.

Verific în chestionare întrebarea adăugată.

Selectez categoria în care am introdus întrebarea.

Startez chestionarul.

Dau next până ajung la nouă întrebare introdusă.

Regasesc întrebarea adaugată.

Aleg "Configurare".

Aleg "Adaugă teme".

Simulez introducerea unui paragraf.

În stânga am textul cunoscut, în dreapta am textul necunoscut.

Completez cu date.

Salvez datele introduse prin "Add".

Verific dacă tema introdusă o regasesc în tabela salvată.

Verific dacă tema introdusă o regasesc la rezolvări de teme și funcționează corect.

Dau "next" sau "prev" până ajung la nouă tema și "afisez răspunsurile".

Mă asigur că tema este corectă.

Aleg "configurare".

Aleg "administrare utilizatori".

Încerc să-i dau unui student drept de adminsistrator.

Editez studentul Ciolac Romulus Daniel.

Vad ca are drept de user.

Îi ofer drept de admin și salvez.

Verific dacă a primit drept de admin.

Mă deloghez pentru a intra ca studentul Ciolac Romulus Daniel pentru a testa dacă a primit drept de admin.

Mă loghez cu contul studentului Ciolac Romulus Daniel.

Constat ca studentul Ciolac Romulus Daniel are drept de admin.

Aleg "Configurare".

Constat ca studentul Ciolac Romulus Daniel are drept de admin.

Editez din nou contul lui Ciolac Romulus Daniel.

Comut la rolul de user.

Mă loghez ca "Ciolac" și văd că are rol de user.
Mă deloghez cu scopul de a mă loga din nou ca "Ciolac" pentru a observa dacă revine la rolul de student (user).

Logare.

Se observă că s-a revenit la rolul de user.

9.2. Baza de date si tabelele

În cele ce urmează prezint baza de date "licența" cu tabelele din MYSQL.

9.3. Diagrame UML

UML acronim pentru Unified Modeling Language

Este un limbaj vizual de modelare utilizat pentru specificarea, construirea și documentarea sistemelor de aplicații orientate obiect și nu numai.

Tipuri de diagrame UML

Diagrame ale Cazurilor de Utilizare (Use Case)

Diagrame de clase

Diagrame de obiecte

Diagrame de secvență

Diagrame de stare

Diagrame de colaborare

9.3.1. Diagrama cazurilor de utilizare

9.3.2. Diagrama de clase (adaptare POO)

Bibliografie

[1] Andi Gutmans, Stig Sather Bakken, Derick Rethans, 2005, Php 5 Power Programming Pearson Education Inc.

[2] David Lane; Hugh E. Williams, 2002, Web Database Applications with PHP & MySQL, O'Reilly.

[3] George Schlossnagle, 2004, Advanced PHP Programming, Sams.

[4] Kevin Tatroe, Rasmus Lerdorf, Peter MacIntyre, 2006, Programming PHP, 2nd Edition, O’Reilly.

[5] Andy Budd, Cameron Moll & Simon Collison, 1999, Cascading Style Sheets, APress

[6] I. Florea, , 2013, Sisteme de operare, Editura Universității" Transilvania"

[7] L Sângeorzan, CL Aldea, 2009, Tehnologii internet, Universității" Transilvania"

[8] L. Sângeorzan, N. Enache-David,C. Nӑnӑu, 2014, Tehnologii web, Universității" Transilvania"

[9] L. Sângeorzan, N. Enache-David,C. Nӑnӑu, 2014, Tehnologii web, Universității" Transilvania"

[10] L.Sângeorzan, 2009, Tehnologii web și WebDesign, Universității" Transilvania"

[11] Larry Ulman, 2006, PHP si MySQL pentru site-uri WEB dinamice, Teora.

[12] Luke Welling, Laura Thomson, 2005, Dezvoltarea aplicatiilor WEB cu PHP si MySQL, Editia a II-a,, Teora

[13] Silviu Dumitrescu, 2013, Dezvoltarea aplicatiilor Web cu PHP și Smarty, Universității" Transilvania"

http ://www. w3, org/MarkUp/Guide/Stvle

http://inf.ucv.ro/~mihaiug/courses/web/slides/Curs%204%20-%20CSS.pdf

http://licenta-diploma-master.com/introducerea-licenta-diploma-master.php

http://web.info.uvt.ro/~smihalas/teh_web/cursuri/teh_web_1_19.pdf

http://www.drogoreanu.ro/tutorials/mysql8.php

http://www.globaltechno.in/rpsquiz/index.php

Responsive Quiz Application Using PHP, MySQL, jQuery, Ajax and Twitter Bootstrap

http://www.w3.org/TR/CSSl

http://www.w3schools.com/css/css svntax.asp

https://en.wikipedia.org/wiki/Bootstrap_(front-end_framework)

ttps://ro.wikipedia.org/wiki/HTML5

https://ro.wikipedia.org/wiki/HyperText_Markup_Language

https://ro.wikipedia.org/wiki/Navigator_web

https://ro.wikipedia.org/wiki/World_Wide_Web

https://stackoverflow.com/questions/35620419/what-is-difference-between-css-margin-and-padding

https://www.multimedia-creations.academy/introducere-la-bootstrap-3/

https://www.sourcecodester.com/php/3877/add-edit-and-delete-record-using-phpmysql.html

https://www.tutorialspoint.com/bootstrap/index.htm

https://www.w3schools.com/css/css_syntax.asp

https://www.w3schools.com/Html/html_intro.asp

www.taniarascia.com/what-is-bootstrap-and-how-do-i-use-it/

www.w3schools.com/bootstrap/default.asD

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: Introducere. Motivație. [304110] (ID: 304110)

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.

Introducere. Motivație. [304110]

Copyright Notice

346 Scan20200604 072829 Text

Empowering the Other: [624426]

TEHNOLOGII ȘI INSTRUMENTE SPECIFICE BIGDATA [605331]

A low cost solution to monitor environmental [631720]

Problematica pregătirii cadrelor de polițiști și specialiștilor din sistemul penitenciar, ineficiența DSI al MAI, jurisdicția IDP, escortarea și… [310327]

Suport Curs Mp Cse 10 11 [619588]

Copyright Notice

Similar Posts