Sunteți pe pagina 1din 75

Noţiuni fundamentale ale

programării web
Curs1
Premise

CSS—Cascading Style Sheets


HTML—HyperText Markup Language
JS-JavaScript
Scop curs
-Prezentare aspecte teoretice şi practice de bază a:
Tehnicilor de dezvoltare a site-urilor web dinamice-pe part de server

-introducere concepte de bază => programarea Web


1. PHP–Hypertext Preprocessor=> PHP -OOP => PHP-MVC frameworks

MySQL–My Structures Query Language

OUTPUT CURS:
-proiectare, implementare şi testare software web:- minim următoarele facilităţi
1. Citirea și scrierea datelor (de ex. din baze de date, fișiere, cookie-uri, obiecte de sesiune web).
2. Login, autentificare, autorizare.
3. Prelucrarea datelor utilizând logica de afaceri, iterând peste liste din datele menționate mai
sus.
4. Afișarea datelor în browser.
5. Schimbul de date cu alte aplicații web.

- ÎNŢELEGERE COD SURSĂ


- POSIBILITATEA DE A DECIDE DACĂ UTILIZĂM MVC sau scrieți propria dvs. soluție
Stuctura curs
Cursuri destinate tehnologiilor back-end
• Cursuri de prezentare PHP,MySql, PHP+MySql
• Cursuri de prezentare PHP-OOP
• Cursuri de prezentare framework-uri: Laravel

Cursuri destinate tehnologiilor front-end:


Cursuri de prezentare: Ajax, JQuery,
AngularJS de la1 la 2

Cursuri: Teorie introdusă prin exemple Practice


Materiale de bază a cursurilor
Cărţi
1. Larry Ullman ,PHP6 and MySQL 5 for Dynamic Web Sites
2.Luke Welling, Laura Thomson,Dezvoltarea aplicatiilor Web cu PHP si MySQL,Teora,2005
3.Julie C Meloni,Invata singur PHP,MySQL si Apache editura Corint,2004
4.Jay GreenSpan, Brad Bulger,MySql,PHP Database Aplications,M&T Books,2001
5. Stanca Liana, Suportul tehnologic al afacerilor electronice,Presa Universitara Clujeana,2007
6. McCool Shawn (2008), Laravel Starter, Packt Publishing, Birgmingham
7. Fidao Chris (2013), Implementing Laravel
8. www.laravel.com

Materiale web
HTTP Made Really Easy - http://www.jmarshall.com/easy/http/
HTML:http://www.w3schools.com/html
PHP:http://www.w3schools.com/php
PhpWebSite project, Appalachian State University, 2004-2006, http://phpwebsite.appstate.edu.
SQL:http://www.w3schools.com/sql
Manual for the MySQL Database System, Version 5.0, http://www.mysql.com/.
https://www.php.net/docs.php
https://www.php.net/manual/en/migration70.new-features.php
slide-uri cursuri
Esența...
Cerințe finale și parțiale
1.Activitate laborator( preluarea executării sarcinilor pe baza
materialelor de laborator)- 20% (nota 5 este de la 3
interventii, nota 6 este 4 etc..)

2.2 proiecte practic PHP-MySQL(săpt.11(procedural sau


OOP) si sapt 14(framewok))-50% minim nota 5

3.examen scris sesiune-30% minim nota 5


La ce ajută cursul
-iniţiere în programare web =>înţelegere a conceptelor de bază din programarea web

1. PHP poate procesa inputurile oferite de utilizatori şi generează dinamic ca rezultat al


prelucrărilor un cod HTML pe baza informaţiilor stocate în baza de date.
2. MySql- oferă toate instrumentele necesare pentru munca cu o baza de date
3. PHP+MySQL este probabil cel mai utilizat instrument de creare a paginilor web
dinamice (Facebook, YouTube, Wikipedia, Google Search toate aceste site-uri sunt
create cu acest tool)
4. PHP+MySql sunt OPEN SOURCE
5. Tehnologii pe parte de front-end: Ajax, Jquery, AngulareJS(de la versiunea 1 la
versiunea 2)

Concepte de programare web pe parte de server la nivel 2020 =>parte de front-end

SUBSIDIAR:EXEMPLIFICARE PROCES DE ÎNVĂȚARE A UNUI LIMBAJ


Ce vă oferă cursul!?
1. O înţelegere a conceptelor de bază a diferitelor aspecte și
tehnologii legate de dezvoltarea web

2. Experienţă în dezvoltarea paginilor web dinamice şi


interactive

3. Cunoaşterea limitelor acestui domeniu (posibilități și


limitări ale site-uri web dinamice)
4. Cunoașterea tehnicilor de proiectare a aplicațiilor web
5. Prototip de învățare a unui limbaj de programare
Evoluție
Introducere
Bill Gates, la sfârşitul anului 1999, afirma că:
„Dacă anii '80 au fost caracterizaţi de implementarea
calităţii, iar anii '90 de reengineering, anii 2000 vor fi
anii vitezei.
2000
viteza de derulare a afacerilor,
despre modul în care accesul la informaţie va altera
stilul de viaţă al consumatorilor.
Creşterea calităţii şi transformarea proceselor
economice se vor derula cu o viteza mult sporită,
astfel încât în momentul în care viteza depăşeşte o
anumită limită, însăşi natura afacerii se modifică.”
Gates1999.
Reţeaua Internet - concept şi evoluţie

Internet-ul este definit ca o colecţie largă de reţele sau ca o “reţea de


reţele”
În concepţia economiştilor [Godeluck2002] apariţia Internet-ului a
schimbat radical natura creşterii economice ducând la apariţia unei noi
economii bazate pe calităţi intrinseci ale reţelei şi concentrate asupra
unui nou gen de întreprinderi.
Bill Cates afirma în anii ‘90: Internet-ul este un val de flux. El va mătura
aproape toate sectoarele industriale, înnecându-i pe cei ce nu vor învăţa
să înoate în valurile sale.
Internetul va impune o nouă ordine industrială: orientarea spre puterea
de consum, consumatorii nu producătorii devin ţinta organizaţiilor.
Istoric Internet
John Heilemann ¬The true story of the internet browser wars
https://www.imdb.com/title/tt2383946/
https://www.youtube.com/watch?
v=WA3N_K7ubvM&list=PLqBzJBCC3GHmw3av5FHyS6roI0Jf-0gCb
->baza Internet- cercetările demarate de ARPA în domeniul tehnologiilor de reţea şi
telecomunicaţiilor în 1958
->1990 se inaugurează WWW de către Tim Benners Lee impreună cu CERN
->data de aparitie a Web-ului si HTML-ului se considera ziua de 6 august 1991, cand
Tim Berners-Lee a creat prima pagina Web. La acea dată invetatorul dorea ca toată
lumea să poată edita în browser nu doar să citească din el...
->1998 este lansat XML - a facilita compatibilitatea între diferite sisteme de computere
Web 1.0- era read-only
Web 1.5: era dotcom-ului ( .com ) s-au diversificat serviciile oferite, au aparut milioane
de pagini cu stiri, care erau actualizate des; CMS-urile - sisteme de management a
continutului. Oricine putea sa-si creeze propria pagina web; fie o concepea personal sau
cu ajutorul CMS-urilor gratuite sau open source existând si posibilitatea gazduirii
gratuite.
->2004 Tim O'Reilly -a inventat expresia "Web 2.0”,
-a descris-o - valorificarea/exploatarea inteligenţei colective
Web2.0 ->persoanele trebuie să colaboreze nu să lucreze singure.
Web 2.0-> nu a adus nici o tehnologie nouă.
Tehnicile folosite de Web 2.0 -> combinație de tehnici care datează încă de la sfârșitul
anilor 1990, dar în 2007 cunosc o răspândire largă:
1.Application Program Interfaces (APIs) pentru servicii web
2.Asynchronous Javascript and XML (Ajax), ca urmaș al tehnicilor de gen
XmlHttpRequest
3. Content syndication - servicii de abonamente, de exemplu RSS - abonamente la
"Ultimele noutăți"
4. Integrarea softwareului de natură socială, ca de exemplu bloguri și wiki-uri
->septembrie 2005 articolul Tim O'Reilly

What Is Web 2.0 - Design Patterns and Business Models for the Next Generation of Sof
tware
,
fundamenteaza conceptele Web 2.0.
Termenul de Web 2.0 - aparut in 2004, in timpul unui brainstorming intre
O'Reilly Media si MediaLive International, =>Site-ul Web2.0 Conference

Web 2.0 -se concentrează pe mai multe teme majore: AJAX, rețele sociale,
folksonomies, colaborare ușoră, social bookmarking, de partajare media
-este o schimbare fundamentală:
WEB 2.0-

1. noi concepte prin:

Blogs, Social-Media & Video-Streaming.

2. publicarea conținutul doar la câteva clicuri distanță!

3.evoluțiile remarcabile ale Web 2.0 sunt

Twitter, YouTube, EzineArticles, Flickr și Facebook.


"WEB 3.0”- termen introdus de jurnalistul John Markoff de la New York Times
- a treia generație de servicii bazate pe internet, -" web inteligent "- web-
ul semantic, microformate, căutare limbaj natural, extragerea datelor, masina
de învățare, agenți de recomandare, și tehnologii de inteligenta artificiala -care
pun accentul pe înțelegerea mașină-facilitat de informații, în scopul de a oferi o
experiență de utilizare mai productivă și mai intuitivă “
-a treia generație de web a permis convergență a mai multor tendințe-
cheie de tehnologie în curs de dezvoltare:
Ubiquitous Connectivity
Broadband adoption
Mobile Internet access
Mobile devices
Network Computing
Software-as-a-service business models
Web services interoperability
Distributed computing (P2P, grid computing, hosted “cloud computing” server farms
such as Amazon S3)
Open Technologies
Open APIs and protocols
Open data formats
Open-source software platforms Open data (Creative Commons, Open Data License,
etc.)
Open Identity

Open identity (OpenID)


Open reputation
Portable identity and personal data (for example, the ability to port your user account
and search history from one service to another)

Web-ul inteligent
1.Tehnologiile Semantic Web (RDF, OWL, SWRL, SPARQL, platforme de aplicatii
semantice, și datastores Protecția bazate, cum ar fi triplestores, tuplestores și baze de
date asociative)
2.Baze de date distribuite:sau "Baza de date World Wide" (wide-area
interoperabilitatea baze de date distribuite datorită tehnologiilor Semantic Web)
3.Aplicații inteligente (procesarea limbajului natural, masina de învățare, raționament
mașină, agenții autonomi)

Tim Berners-Lee, Web 3.0 va fi un web "citire-scriere-executare"

Web 3.0 : mult mai conectat, deschis, și inteligent, cu tehnologii semantice web, baze
de date distribuite, procesarea limbajului natural, machine learning, machine reasoning,
and autonomous agents.
Web 4-5
Web 4.0 5.0 =în curs de dezvoltare de formare, primele semnale sunt în Web 4.0 va fi
web legat, care comunică cu noi ca și cum am comunica unul cu celălalt (ca un asistent
personal).
Web 4.0 este numit "symbiotic" web.

web -complet de executare.


Web 4.0 /5.0 - web citire-scriere-executare-concurenta.

Web 5.0 -interactiunea (emoțional) între oameni și computere.

Interacțiunea va deveni un obicei de zi cu zi pentru o multime de oameni pe baza


neurotechnology.

- web este "emotional" neutru(=web nu percepe utilizatorilor emoțiile).


web 5.0 - web emoțional.
- scopuri: Tehnologie pe server
- să transfere acţiunile de prelucrare a informaţiilor pe un calculator
- mai perfomant cu o putere de memorare şi de prelucarea a
datelor mult mai mare decât a altor calculatoare din reţea, cu un
nivel de securitate mai ridicat şi să centralizeze operaţiile de
întreţinere.
Serverul - stocheaza o mare parte din componente, piese, rutine,
scripturi.
Realizarea conexiunilor la server depide de:
Viteza întârzierea cu care serverul răspunde la o cerere făcută de un
browser Web.
Securitatea: site-ului şi securitatea conţinutului acestuia.
Scalabilitatea: - capacitatea unui site Web de a accepta un număr diferit
de utilizatori, cu timpi de răspuns şi performanţe similare.
Serverul web are rolul de a servi fişiere stocate în rădăcina lui (de exemplu pentru web server-ul
Apache strucutră de directoare este: /var/www/html/)

Servirea unui fişier  îndeplineşte următoarele condiţii :


1.există,
2.este accesibil de către serverul web
3.drepturile de acces nu interzic acest lucru.

=> neîndeplinirea uneia dintre aceste condiţii, serverul va trimite un cod de eroare sau o pagină
predefinită care să informeze despre eroarea apărută.
HTML -mecanism pentru diseminarea informaţiei în World Wide Web.

Protocolul HTTP
defineşte modul prin care vor dialoga clientul şi
serverul.
Clientul va trimite o cerere (o comandă) HTTP în mod
text simplu (ex: GET, POST, HEAD, PUT) –informând
serverul despre acţiunea pe care vrea să o realizeze.
Comunicarea (=transfer de date ) Client-Server prin protocolului HTTP:
1.se realizează o conexiune client-server;
2.clientul(browser-ul) lansează o cerere;
3.serverul furnizează clientului răspunsul la cererea formulată;
4.serverul încheie conexiunea.

Un client poate fi browserul dvs. sau orice alt software care vorbește HTTP
https://www.html5rocks.com/en/tutorials/internals/howbrowserswork/
TCP/IP
TCP (Transmission Control Protocol) - schimbul corect de
pachete de date între nodurile unei reţele, adică
corectarea erorilor şi secvenţierea transportului.

IP (Internet Protocol) -transmiterea de pachete de la sursă


la destinaţie; sursa şi destinaţia fiind calculatoare gazdă
(host computer) identificate prin adrese de lungime fixă.
Sursa şi destinaţia se pot găsi în reţele diferite astfel un
pachet poate străbate câteva reţele până la destinaţie.

Protocolul TCP/IP a apărut ca urmare a dorinţei de a interconecta fără probleme mai multe
tipuri de reţele, iar activitatea de transmisie a datelor să nu fie afectată de distrugerea sau
defectarea unei părţi a reţelei. Acesta are funcţia primară de dirijare a pachetelor de date de la
sursă la destinaţie devenind astfel un standard pentru reţelele de pe întreaga planetă.

SMTP (Simple Mail Transfer Protocol) este un protocol simplu, folosit pentru transmiterea
mesajelor în format electronic pe Internet devenind standardul pentru comunicaţiile globale prin
poşta electronică.
Serviciul WWW modalitate de funcţionare
Site -un ansamblu de pagini Web, între care existã create legãturi, pornind de la o primã
paginã a cãrei adresã reprezintã adresa site-ului, este posibilã navigarea prin toate
paginile acestuia.
Conectarea la un site Web determinã operatii:
1.browser-ul stabileste o conexiune TCP/IP cãtre server.
este specificat : protocolul la nivel de aplicatie; numãr de port utilizat.
protocolul HTTP are asociat portul 80;
2.browser-ul emite o cerere HTTP cãtre server, cerere care este constituitã din:
o linie de cerere (request-line) formatã dintr-o comandã HTTP, urmatã de un URL
si de versiunea protocolului utilizat;
un antet (request-header):contine informatii despre cerere si despre clientul
care executã cererea;
corpul cererii;
3.server-ul Web receptioneazã cererea, o interpreteazã+ emite un rãspuns cãtre
browser. Rãspunsul: un cod de stare- descrie modul de finalizare a cererii si o
scurtã descriere a codului. Codurile sunt formate din trei cifre, si au urmãtoarele
semnificatii: - codurile care încep cu 1 sunt coduri de informare, - codurile care încep
cu 2 sunt coduri de succes, - codurile care încep cu 3 sunt coduri de redirectare, -
codurile care încep cu 4 sunt coduri de eroare client, iar codurile care încep cu 5 sunt
coduri de eroare server,
un antet (response-header) contine informatii despre resursa solicitatã, eventual
alte declaratii necesare pentru livrarea rãspunsului;
un corp, format din datele transferate.
Aceastã succesiune de operatii poartã numele de tranzactie.
HTTP
 header

http://station.clancats.com/writing-a-webserver-in-pure-php/

Conectare automată la server pentru


a trimite cererea HTTP utilizând
metoda GET.
fsockopen ()
1. deschide un server pe portul
specificat,
2. așteaptă să specificăm ce să
facem cu el - putem trimite, de ex. o
cerere HTTP manuală.
3. Bucla while are rol de a prelucra
fişierul
HTTP

două entități: expeditor și receptor.


Expeditorul trimite un mesaj către receptor.
Mesajul, începe comunicarea, se numește
solicitare. - este o solicitare GET.

Receptorul primește mesajul, îl procesează și


generează un al doilea mesaj: răspunsul.

Răspunsul arată un cod de stare 200 =solicitarea


a fost procesată cu succes.

HTTP este fără stat; adică tratează fiecare cerere


în mod independent, fără legătură cu alte mesaje
anterioare.
Þ cu această secvență de solicitare și răspuns,
comunicarea este terminată.
Þ Solicitări noi nu vor fi la curent cu acest schimb
specific de mesaje.
Părți ale mesajului:
URL-ul mesajului este destinația mesajului.
Cererea va conține adresa URL a receptorului, răspunsul va conține expeditorul.
http://myserver.com/greeting?name=Alex.
Această adresă URL conține un singur parametru: nume cu valoarea Alex.

Metoda HTTP este verbul mesajului=identifică ce fel de acțiune vrea expeditorul cu


acest mesaj.
Cele mai frecvente sunt GET și POST.
• GET: întreabă receptorul despre ceva, receptorul trimite de obicei aceste informații
înapoi.
Ex: solicitarea unei pagini web, unde receptorul va răspunde cu codul HTML al paginii
solicitate.
• POST: expeditorul dorește să efectueze o acțiune care să actualizeze datele pe care le
deține receptorul.
  Ex -expeditorul -solicita receptorului să-și actualizeze numele de profil.
Metodele: PUT, DELETE sau OPTION,-joacă un rol crucial în API-urile REST
Body
-prezentă în mesajele de răspuns, chiar dacă un mesaj de solicitare
-conținutul mesajului în sine
Ex:dacă utilizatorul ar solicita o pagină web, corpul răspunsului =codul HTML a
pag.
Corpul poate conține text; text HTML =pagină web, imagini, JSON.
Anteturile unui mesaj HTTP sunt metadatele -receptorul pentru a înțelege
conținutul mesajului.
Anteturile constau dintr-o hartă a perechilor cheie-valoare.
Anteturile unei solicitări:
Accept: text/html
Cookie: name=Richard

Această solicitare spune destinatarului(server-ul), că :


va accepta text ca HTML=modul obișnuit de reprezentare pagină web;
șcă are un cookie pe nume Richard.
Codul de stare
este prezent în răspunsuri.
Identifică starea cererii cu un cod numeric, astfel încât browserele și alte instrumente
să știe cum să reacționeze.
Ex:accesare o adresă URL care nu există, serverul ar trebui să răspundă cu un cod de
stare 404.
=>browserul știe ce s-a întâmplat fără să se uite măcar la conținutul răspunsului.
Codurile de stare obișnuite sunt:
• 200: Cererea a avut succes
• 401: neautorizat; utilizatorul nu are permisiunea de a vedea această resursă
• 404 Pagina nu a fost găsită
• 500 Eroare internă a server-ului; s-a întâmplat ceva greșit pe partea serverului și nu a
putut fi recuperat
The message contains a cookie ID with the value 84, which may identify the
entity to update. It also contains two parameters in the body: name and age
cod de stare de 200, ceea ce înseamnă că cererea a fost procesată cu succes.
Tehnologia client/server pe care se bazeazã serviciul Web este de douã
tipuri:
• pe douã niveluri-
1. Clientul -prezentarea datelor cãtre client
2. Serverul -furnizarea serviciilor de date cãtre client.
 pe trei niveluri: -aplicatii desfãsurate pentru terti sau mii de utilizatori.
Tipuri de site-uri
Site-uri Web statice
1. Un client (browser) cere un document HTML
2. Serverul trimite clientului documentul HTML cu toate fişierele
necesare lui
3. Clientul afişează documentul HTML formatat în concordanţă cu CSS
Site-uri Web dinamice sunt flexibile, descrise mai exact ca aplicații
decât doar site-uri.
1. au o "memorie“=>permit înregistrarea de utilizator și autentificare în
site-urile de e-commerce, și procese similare
2. au aproape întotdeauna formulare HTML, astfel încât se pot efectua
căutări, oferă feedback-ul, etc.
3. au interfețe în care administratorii pot gestiona conținutul site-ului
4. uşor de creat, modificat şi menţinut în timp decât site-urile web
statice.

Tehnologii disponibile pentru crearea de site-uri Web dinamice.


ASP.NET (Active Server Pages, de la Microsoft),
JSP (Java Server Pages),
ColdFusion,
Ruby on Rails
PHP.
Baza de date dezvoltată cu MySQL .
Site-uri web dinamice

1.Un client cere un document HTML ce include un formular


2.Utilizatorul completează formularul şi click pe submit acţiune ce
trimite datele înapoi la server
3. Serverul rulează un program PHP care depistează codul PHP, îl
execută
4. Rezultatul codului PHP este o pagină HTML pe care serverul o trimite
browserului – clientului web iar acesta o afişează utilizatorului.
Browser-ul întotdeauna primeşte text nu cod executabil
1. HTML este text
2. CSS este text
3. Rezultatul unui script PHP este text( Browser-ul nu vede niciodata
codul PHP)
HTML recapitulare
-Limbaj HyperTextMarkup
– text simplu;
-folosit pt crearea paginilor web

HTML element
Un element XHTML este codat cu un tag
structura: <element_name>content</element_name>
Exemple:
- paragraph:<p>Este un paragraph</p>
– header:<h1> Este un header</h1>
- elemente goale: line break: <br />
- elemente cu atribute :
<element attribute=“value”>content</element>
Exemple: elemente cu atribute:
– image: <img src=“images/flori.gif” />
– table:<table summary=“Acesta este planul pt curs”>…</table>
Elemente HTML bine formatate
- Toate elementele şi atributele sunt scrise cu litere mici
- toate valorile atributelor trebuie incluse între ghilimele
- toate elementele care includ elemente goale trebuie terminate
- toate elementele trebuie să fie corect imbricate =>LIFO

Beneficii ale scrierii codului HTML conform standardelor sunt:


- Maximizarea compatibilităţii cu diferite browsere
- Adaptarea uşoară a modului de afişare a conţinutului în forma tipică
dispozitivului folosit (desktop, mobile, etc)
- mentenanţă uşoară a site-urilor
- facilitează dezvoltarea codului de către echipe de programatori
- facilitează înţelegerea codului de către diverse persoane în timp

Validarea codului HTML se face cu:


1. http://validator.w3.org
2. HTML validator de la Firefox
Tag-uri cunoscute
• Headings: <h1> </h1> … <h6> </h6>
• Paragraph: <p> </p>
• New line: <br />
• Bold şi italics: <b> </b>, <i> </i>
• Liste ordonate:<ol> </ol>
• Liste neordonate:<ul> </ul>
• Elementele listelor:<li> </li>
• Legături: <a href=“http://link.com”>text</a>
• Legatura mailto:<a href=“mailto:me@itu.dk”> me@itu.dk
</a>
• Imagini:<img src=“images/pic.jpg” alt=“pic” />
• Tabele: <table> </table>, <tr> </tr>, <th> </th>, <td> </td>
Exemplu de site HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN""http://www.w3.org/TR/html4/
loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type” content="text/
html; charset="utf-8">
<title>Pagina de început </title>
</head>
<body>
<h1>Bine ati venit</h1>
<p>Website for the course <a href="http://
www.ubbcluj.ro/curs/PPW/C2018“>PPW</a></p>
</body>
</html>
Straturi și tehnologii comune în documentele
web
Formulare HTML
- permit utilizatorului să trimită date spre server.
- Exemple: login; căutări; e-mail; chestionare

- informaţiile de pe formular se vor procesa pe server


Cum funcţionează.....
1. Se deschide motorul de
căutare preferat
2. Se scrie cuvântul căutat
3. La o acţiune de genul click
pe buton sau Enter se
trimite cuvântul
4. Serverul web procesează
cererea şi întoarce
rezultatul
vem nevoie de...

I. Un FORMULAR HTML
-ce adună datele;
-se transmit datele la un eveniment( click pe un buton, enter, etc.)

II. Un SCRIPT care să proceseze datele


-PHP,ASP,PERL…
- va citi datele şi le va procesa pe server
- fişierul HTML rezultat este transmis clientului înapoi
Formular

Definire variabilă
1. Atributul name: se defineşte numele variabilei;
2. Atributul id: la fel ca atributul name
3. Ce fel de tipuri de date conţine variabila
4. Serverul vede: firstname=Viorel
Variabile
Numele variabilelor
1. acces la conţinutul acestora
2. trebuie să fie unic
3. sugestiv
De ex:
tricoufavorit:OK
tricou_favorit:OK
a:groaznic

Obs:
Numele variabilelor trebuie să înceapă cu litere din intervalul ([A-
Za-z]) şi pot fi urmate de oricâte litere, cifră din intervalul ([0-9]) sau
liniuţă de subliniere (“_”)
Input types
Atribut formular=>action
action=“target”

1.Este obligatoriu
2.Defineşte cum se vor prelucra datele
3. Acţiunea poate:
- să fie un script: de exemplu:
action=“doSomething.php”
-să fie un link mailto: de exemplu: action=
mailto:email@yahoo.com
-să se apeleze pe el însuşi: de exemplu: action=“#”
Atribut formular=>method
Se stabileşte cum se va trimite informaţia
POST sau GET

POST
1.numai serverul vede informaţia
2.mai securizat
GET
1. datele se întorc în URL
2. util pentru formulare de căutare
Atribut formular=>enctype
Se defineşte cum se codează(encoded) informaţia

datele se codează implicit astfel:


1. spaţiile se transformă cu “+”
2. caractere speciale se transformă la ASCII

value=“”
• “application/x-www-form-urlencoded”: implicit
• “text/plain”: transformă spaţiile în “+”, dar nu şi caracterele speciale
• “multipart/form-data”: necesare la încărcarea fișierelor
<input type=“text”/>
Un singur cuvânt sau o linie de text
Atribute:
type=“text”
• name=“variableName” (obligatoriu)
• id=“variableName” (avansat.Face posibilă legarea acestui element
de un script)
• value: definirea valorilor implicite
• size: mărimea textbox-ului
• maxlength: lungimea maxină admisă
<form action=“search.php” method=“post”>
<input type=“text” name=“search” value=“Scrie text de căutare ” />
<input type=“submit” value=“Search” />
</form>
<input type=“submit”/>
1. Afişează în browser un buton
2. Transmite datele de pe form la server
3. Nu are atribute obligatorii
4. value=“” afişează text pe buton

<input type=“submit” value=“Search” />


<input type=“radio” />
Permite selectarea unei singure valori pentru fiecare “name”

• checked=“checked” se setează optiunea implicită care să apară ca


selectată

value=“” (obligatoriu)
• valoare care se trimite la action=“…”

<input type=“radio” name=“nationalitate” value=“Roman”


checked=“checked” />
<input type=“radio” name=“nationalitate” value=“German” />
<input type=“radio” name=“nationalitate” value=“Austriac” />
<input type=“hidden”/>
Elemente ascunse nu sunt vizibile pe formular
Se foloseşte pentru:
1. la setarea unei variabile implicite
2. se stabileşte dacă un produs este la ofertă

<form action=“oferta.php”>
<input type=“hidden” name=“oferta” value=“da” />
</form>
<select>and<option>
<select>and<option> se combină pentru a crea meniu dropdown

<form …>
<select name=“Universităţi”>
<option value=“UBB”>Universitate Babeş-Boloyai</option>
<option value=“UTCN”> Universitatea Tehnică</option>
<option value=“UMV”> Universitate de Medicină Veterinară</option>
</select>
</form>
<select>attributes
name=“”
nu este obligatorie, dar recomandata
multiple=“multiple”
permite să selectați mai mult de un element

size=“”
numărul defineşte câte elemente sunt afişate

<option>attributes
value=“…”
nu este obligatoriu
selected=“selected”
inidică ce element este selectat implicit
HTML5
Noi controale de forma: calendar, date, time, e-mail,
url si search.

HTML 5 include elemente noi pt a realiza:


- o structurarea mai buna a documentelor;
- obiecte pt desen mai performante
-posibilitatea de a adauga continut media
- un handling mai bun pt formulare.
<Input/>-atributul autocomplete
Permite realizarea unei completări automate
functioneaza cu <form> si urmatoarele tipuri de <input>:
text, search, url, telephone, email, password, datepickers, range, and
color.
Principiul de funcţionare:
=>utilizatorul începe să tasteze într-un câmp ce prezinta atributul
autocomplet, browser-ul trebuie să afişeze opţiuni pentru a umplere:
<form action="autocomplet.php" method="get" autocomplete="on">
First name:<input type="text" name="fname" /><br />
Last name: <input type="text" name="lname" /><br />
E-mail: <input type="email" name="email" autocomplete="off"
/><br />
<input type="submit" />
<Input/>-atributul autofocus
un câmp ar trebui să primeasca focusul în mod automat in
momentul in care o pagină este încărcată.
Obs:
Atributul autofocus funcţionează cu toate tipurile de
<input>.

<form action="autofocus.php" method="get">


User name: <input type="text" name="user_name"
autofocus="autofocus" />
<input type="submit" />
</form>
Aplicaţie web’Definiţie

O pagină web este un singur document cu conținut. Conține


legături care deschid alte pagini web cu conținut diferit.

Un site web este setul de pagini web care trăiesc de obicei în


același server și sunt legate între ele.

O aplicație web este doar o aplicație software care rulează pe


un client(un browser) și comunică cu un server.
Un server primește solicitări de la un client, le prelucrează și
generează un răspuns. Răspunsul se va întoarce înapoi la
client, redat în general de browser pentru a-l afișa utilizatorului.
Definiţie~Istoric~ Caracterisitci PHP
1. PHP este un server-side.
1.1. tot ceea ce face PHP apare pe server.
1.2. este nevoie de Apache sau Microsoft IIS ( Internet Servicii
de informații ) =>toate script-urile PHP trebuie să fie accesate
printr-un URL ( http://-something )
2.PHP este o tehnologie cross-platform.
1.1. PHP ruleaza pe majoritatea sistemelor de operare , inclusiv
Windows , Unix ( și multe variantele sale ) , și Macintosh .
1.2. scripturi PHP scrise pe un server funcționează în mod
normal pe un alt server modificari minore sau deloc .

PHP poate fi folosit pentru scrierea unor programe stocate pe server


ce accesează baze de date.
Istoric~ Caracterisitci PHP

- a apărut în 1994 din dorinţă lui Rasmus Lerdorf de a afla câte persoane îi accesează
CV-ul on-line. El a numit setul de scripturi create PHP (Personal Home Page).
- succesul lui i se datorează lui Zeev Suraski şi Andi Gutmans care au rescris motorul
PHP din cap în coadă, motor ce poartă numele de Zend începând cu versiunea a
patra
- un limbaj ideal pentru construirea de pagini Web dinamice.
- poate fi rulat pe mai multe platforme;
- se poate conecta la mai multe baze de date, în particular baze de date relaţionale
create cu MySQL.
- se poate include în cod HTML.
- permite crearea de pagini HTML statice şi din loc în loc, acolo unde este nevoie, să
se introducă dinamism cu PHP.
- este open-source
- are o sintaxă simplă, variabilele nu trebuie declarate, tipul acestora se stabileşte la
iniţializarea lor cu o valoare şi în plus numele de funcţii sunt intuitive.
- Rulează pe server
Evoluția PHP
Scripturile PHP
Se execută în urma unui eveniment
1.Când un utilizator trimite un form
2. Când un utilizator accesează un URL
INSTRUMENTE
Limbajul PHP oferă următoarele facilităţi:
1. manipularea conţinutului paginilor web;
2. transmiterea header-elor HTTP pentru
autentificare;
3. setarea cookie-urilor;
4. redirecţionarea utilizatorilor;
5. asigurarea spargerii (paser) fişierelor XML;
6. crearea şi manipularea imaginilor, animaţiilor şi a
PDF-urilor;
7. conectarea la un server de e-mail.
8. execuţia rapidă a scripturilor PHP deoarece
interpretorul este inclus în server-ul WEB;
9. timpi buni de răspuns.
10.conţine numeroase funcţii utile;
Principiul de funcţionare a limbajului PHP
1. browser-ul trimite către server-ul Web o
cerere HTTP pentru un fişier PHP.
2. Server-ul recunoaşte că fişierul cerut
conţine cod PHP, în consecinţă va lansa
parser-ul PHP, care va primi la intrare
fişierul respectiv.
3. Parser-ul va identifica secvenţele PHP,
care în cadrul codului HTML sunt cuprinse
între marcajele „<?php” şi „?>” şi le va
interpreta.
4. Tot ce nu este cod PHP este trimis spre
ieşirea standard fără nici o prelucrare.
5. Codul PHP poate scrie la rândul său în ieşirea
standard prin comenzile prestabilite cum ar fi „echo”
sau „print”.
6. serverul Web intercepteză ieşirea standard a
parser-ului şi transferă totul browser-ului care a
Caracteristici cod PHP
- toate instrucţiunile PHP se termină cu punct şi virgulă.
- poate fi imbricat cu cod HTML ;
- se pot crea pagini HTML fără cod PHP în ele şi să fie salvate cu
extensia php
- se poate schimba valoarea unei variabile după necesităţi
-un fişier ce conţine script-uri PHP se salvează de regulă cu exensia .php,
fiind localizat în directorul în care rezidă documentele serverului web;
- orice script PHP este cuprins între tag-urile <?php şi ?>;
- instrucţiunea PHP care produce output în pagina HTML este echo;
- rularea unei pagini care conţine script PHP se va face întotdeauna prin
intermediul serverului de web;
Obs: în mod implicit (deci fără a modifica setările de instalare) limbajul
PHP, nu este case-sensitive -> cuvintele rezervate ale
limbajului(instrucţiunile) respectiv funcţiile (fie că e vorba de cele
predefinite ale limbajului, fie că e vorba de cele definite de către
utilizator).
Crearea paginilor PHP
Se realizează cu o serie de editoare cum ar fi: Notepad, editoare PHP
O pagină PHP este alcătuită din:
• text;
• tag-uri HTML sau XML;
• comenzi şi instrucţiuni PHP;
• comenzi şi instrucţiuni MySQL.

O pagină PHP se salvează cu extensia php în directorul


C:\Program Files\Apache Group\Apache\htdocs\
O pagină PHP se va accesa în browser la adresa http://localhost/numefisier.php.
- paginile unui site Web să se păstreze într-un subdirector creat în rădăcina server-ului
Web se va accesa în browser la adresa
http://localhost/numesubdirector/numefisier.php
Codul php se intercaleaza cu codul html prin folosirea delimitatoarelor urmatoare:
1. Marcaje standard: <?php ...?>
2. Marcaje scurte:<?....?>
3. Marcaje de script: <SCRIPT LANGUAGE=”php”>...</SCRIPT>
4. ASP tag
Ex: <SCRIPT LANGUAGE=”php”> echo “Hello Web! ”;</SCRIPT>
-marcajele scurte nu sunt recunoscute de php se seteaza in php.ini urmatoarele:
short_open_tag=On;
Obs: 1.Tagurile standard sunt implicite si reprezinta cea mai buna alegere deoarece
sunt compatibile cu versiunile anterioare si sunt garantate sa fie disponibile fara sa
necesite o configurare speciala in php.ini. Aceste taguri nu pot fi dezactivate din
php.ini(=fisier de configurare PHP).
2. Tag-uri scurte - pentru un timp, au fost standardul în lumea PHP.
-dezavantaj major este conflictului cu anteturi XML
-avantajul lor este sintaxa scurta de a afisa in browser continutul unei variabile
astfel: <? = $ variabila?>
secventa <? ii spune procesorului XML sa se astepte sa proceseze o instructiune. Daca se include
cod XML si marcajele scurte sunt activate motorul PHP va incerca sa proceseze cod XML.
Deci, in cazul in care se foloseste cod XML si PHP se dezactiveaza marcajele scurte.
3.Script tags au fost introduse de editoarele HTML care sunt setate sa ignore JavaScript
deoarece nu au putu fi setate sa interpreteze tag-urile standard PHP
4. Asp tag nu se prea folosesc pt ca trebuie setate explicit. Acesta practica nu este indicata .
Programarea -are două elemenete de bază :datele şi instrucţiunile.
Pentru a lucra cu datele se impune să se înţeleagă noţiunea de variabilă şi
tipurile ei
Pentru a lucra cu instrucţiuni trebuie să se precizeze care sunt structurile de
control şi funcţiile unui limbaj de programare.
Accesul la paginile PHP şi afişarea rezultatelor acestora
accesul la paginile PHP se face prin tastează unui URL în zona de adresă a
navigatorului sau activează o legătură hipertext, moment în care cererea este
trimisă către server.
echo, print, print_r, şi printf sunt:
comenzile de editare a unei pagini HTML dintr-un script PHP
comenzi pentru afişarea rezultatelor unei funcţii, a valorilor unei variabile, a
elementelor unui tablou, a mesajelor text, a valorilor introduse de utilizator în câmpurile
unui formular HTML, pentru a transmite valorile încadrate între ghilimele la browser,
etc.
Exemplu de pagină PHP care foloseşte comenzile print şi echo pentru afişarea în
browser a unui pagini web statice ce va conţine două mesaje text.

<html>
<head>
<title>Exemplu de afisare</title>
</head>
<body>
<?php
print "Comanda de afisare a datelor pe ecran";// se afiseaza pe ecran textul scris între

//ghilimele
?>
<br>
<?php
echo "Limbajul PHP"; // afiseaza pe ecran textul dintre ghilimele
?>
</body>
</html>
În exemplul anterior ieşirea PHP care ajunge la browser, poate fi vizualizată cu comanda Source a
meniului View, iar rezultatul va fi:

<html><head><title>Exemplu de afisare a valorilor unei variabile</title>


</head><body>
Comanda de afisare a datelor pe ecran
<br>
Limbajul PHP</body></html>
Generare tag HTML cu PHP
<html>
<head>
<title>Exemplu de afisare</title>
</head>
<body>
<?php
echo “ <h1> Hello world !!!!!!!!!!!!!!!</h1>”;
echo “<p/>”;
echo “This is <b>bold</b> and <i> italic</i>”;

?>
</body>
</html>

S-ar putea să vă placă și