Introducere in Web

Agenda
● Getting Started
● Internetul si protocolul TCP/IP
● World Wide Web
● Arhitectura Client-Server
● HTTP
● Browsere Web
 Let’s Get Started
● Haideti sa ne cunoastem mai bine
● Tool-uri si aplicatii:
○ Visual Studio Code
○ CodePen
○ Sublime, Notepad++
○ Metoda de comunicare:
■ Email:
alina.itu@unitbv.ro
Internetul si protocolul TCP/IP
 Internetul
• Retea globala de calculatoare care functioneaza la fel
ca si sistemul postal, cu timpi de reactie de ordinul
miimilor de secunda, care le permit sa transmita
pachete mici de date digitale

• Provine din ARPAnet, care a fost creat de US Defence

Department’s Advanced Research Projects Agency in
anul 1960.

• Folosește suita de protocoale TCP / IP (Transmission

Control Protocol / Internet Protocol) pentru a realiza
comunicarea
Cum comunica 2 calculatoare in
retea?

FTP
A B
Modelul OSI
 Modelul TCP/IP
● Internet Protocol (IP) este un protocol prin care
Application
datele sunt transmise de la un calculator la altul (HTTP, FTP,
prin intermediul Internetului SMTP)
● TCP/IP utilizeaza o arhitectura pe nivele
○ Nivelele sunt izolate pentru a nu avea acces
la informatii specifice implementarii Transport
○ Fiecare nivel expune o anumita (TCP, UDP)
functionalitate care poate fi realizata prin
unul sau mai multe protocoale.

● TCP/IP este cel mai cunoscut si mai utilizat Internet

protocol (IP)
○ E compus din 4 nivele:
○ nivelul Aplicatie
○ nivelul Transport Link
○ nivelul Internet (ARP, PPP)
○ nivelul Acces la retea
 TCP/IP – Nivelul acces la retea
● Denumit adesea si Network Interface Layer Application
(HTTP, FTP,
● Se ocupa de toate conexiunile fizice pe care SMTP)
trebuie sa le strabata pachetele IP pentru a ajunge
în bune conditii la destinatie.
● Protocoale:
○ ARP (Address Resolution Protocol) Transport
○ PPP (Point to Point Protocol) (TCP, UDP)

Internet
(IP)

Link
(ARP, PPP)
 TCP/IP – Nivelul Internet
Application
● Denumit adesea si Network Layer (HTTP, FTP,
● Are responsabilitatea de a trimite pachete prin SMTP)
mai multe retele existente
● IP este responsabil de:
○ Alegerea caii optime (locul unde actioneaza Transport
routerul in Internet) (TCP, UDP)
○ Distribuirea pachetelor
● Comunicarea la nivelul IP este nesigură, sarcina
de corecţie a erorilor fiind plasată la nivelurile
superioare (de exemplu prin protocolul TCP) Internet
(IP)
● Toate calculatoarele conectate la internet au o
adresa IP:
○ Cum o gasesti?
○ Cum arata?
Link
(ARP, PPP)
 Adresa IP
● Un sir de caractere unic utilizat pentru
identificarea fiecarui calculator conectat in
reteau Internet prin intemediul protocolului IP
(Internet Protocol).
● IPv4
○ 4 numere de la 0-255 separate cu punct
○ Exemplu: 192.168.56.17
● IPv6
○ 8 grupuri a cate 4 cifre hexazecimale (interval 0 - 221241855) separate cu :
○ Exemplu: 2a04:2413:8100:8080:d4d2:c098:514d:e7b2
tracert www.louvre.fr

ipconfig/all
 TCP/IP – Nivelul Transport
Application
● Acest nivel ofera servicii de transport intre o sursa si o (HTTP, FTP,
destinatie, stabilind o conexiune logica intre sistemul SMTP)
emitator si sistemul receptor

● Una dintre funcţiile acestui nivel este împărţirea

datelor în segmente mai mici pentru a fi transportate Transport
uşor prin reţea (TCP, UDP)
● Common Protocols:
○ TCP = Transmission Control Protocol
○ UDP = User Datagram Protocol
Internet
(IP)

Link
(ARP, PPP)
 FTP,
A HTTP B
Fiecare pachet (sau grup de pachete)
are asociate un numar de secventa.

TCP:
1. Stabileste o conexiune cu serverul
2. Retransmite pachete in cazul in care
acestea nu ajung la destinatie
3. Ordoneaza pachetele ajunse la
destinatie.
 TCP/IP – Nivelul Aplicatie
Application
● Se refera la protocoalele de nivel inalt utilizate de
Layer
majoritatea aplicatiilor, codificarea si controlul
(HTTP, FTP,
dialogului, impachetarea datelor si transmisia lor la
SMTP)
nivelul urmator

Rol: realizeaza interfata cu utilizatorul și interfața cu

Transport Layer
aplicațiile, specifică interfața de lucru cu utilizatorul și
(TCP, UDP)
gestionează comunicația între aplicații (browserele
web, programele de e-mail sau transferul de fişiere )
● Protocoale:
○ HTTP (HyperText Transfer Protocol) Internet Layer
● & HTTPS (HTTP Secure) (IP)
○ FTP (File Transfer Protocol)
○ SMTP (Simple Mail Transfer Protocol)

Link Layer
(ARP, PPP)
 Intrebari
● Completati tabelul cu denumirea nivelului si numarul corespunzator al
acestuia, alegand din lista optiunilor enumerate mai jos:
 Intrebari
● Ce protocol asigura retransmiterea datelor (in
cazul in care acestea se pierd pe drum)?
● Care e diferenta dintre protocolul TCP si UDP?
● Care e rolul protocolului IP?
● Ce protocoale corespund nivelului Aplicatie?
● Ce protocol asigura ordonarea pachetelor
ajunse la destinatie?
World Wide Web
 World Wide Web
● Termenul World Wide Web, abreviat www sau WWW numit pe scurt si web,
reprezinta totalitatea site-urilor/documentelor si informatilor de tip hipertext legate
intre ele, care pot fi accesate prin reteaua globala de Internet
● Documentele specifice www-ului sunt stocate pe calculatoare de tip server si sunt
localizate prin URL (Uniform Resource Locator)
● Hipertextul este accesat de catre un navigator de internet (browser) care descarca
pagina web a acestuia si afiseaza informatiile din interior
● 3 technologii:
○ HTML: HyperText Markup Language
○ URL: Uniform Resource Locator
○ HTTP: Hypertext Transfer Protocol
 URL - Uniform Resource Locator
● Reprezinta o referinta la resursa web, care specifica locatia acesteia intr-o
retea de calculatoare precum si un mecanism de identificare

1. https reprezinta schema sau protocolul 5. en-US/docs/Web/HTTP/Methods/GET

2. :// separa schema de numele de domeniu
3. developer.mozilla.org este numele de
domeniu (DNS)
4. / separa numele de domeniu de cale
reprezinta calea
6. ? separa calea de query
7. source = sidebar reprezinta query-ul (perechi
chei-valoare separate de &. ex.:
key1=value1&key2=value2)
8. # separa query –ul de fragment
9. Syntax este fragmentul
HTTP -> 80
HTTPS -> 443

http://www.example.com:80/path/to/myfile.html?
key1=value1&key2=value2#SomewhereInTheDocum
ent

https://www.example.com:443/path/to/myfile.htm
l?key1=value1&key2=value2#SomewhereInTheDocu
ment

https://developer.mozilla.org
https://developer.mozilla.org/en- US/docs/Learn/
https://developer.mozilla.org/en-US/search?q=URL
Architectura Client-Server
 Arhitectura Aplicatiilor
● Descrie comportamentul aplicatiilor utilizate intr-un
domeniu/business, axat pe modul in care acestea interactioneaza
intre ele si cu utilizatorii

● Aplicatii independente (standalone applications) fara conectivitate

la server
○ Unele programe rulate din linia de comanda
○ Unele aplicatii desktop

● Aplicatii care urmeaza modelul Client-Server sau asa numitele

aplicatii distribuite
 Arhitectura Client-Server

● Este o structura sau arhitectura de

tip aplicatie distribuita care
partajeaza procesarea intre
furnizorii de servicii numiti servere
si entitatile care solicita serviciile,
numite clienti

● Un client realizeaza o cerere catre

server

● Serverul proceseaza cererea si

raspunde clientului
 Arhitectura multi-nivel
● Este o arhitectura client-server in care
partea de prezentare, partea de procesare
si managementul datelor sunt separate

● Dezavantaje eliminate:
○ Design monolitic
○ Cod care nu poate fi reutilizat
○ Aplicatii fragile

● Arhitectura pe 3 nivele :
○ Presentation Layer
○ Business Layer
○ Data Access Layer
Front- vs. Back-end
Front- vs. Back-end
DNS
 DNS - Domain Name Servers
● Echivalentul pe internet al cartii de
telefoane
● Mentine o mapare intre numele de
domeniu si adresele IP
● www.louvre.fr -> 89.185.38.136

https://www.verisign.com/en_US/website-presence/online/how-dns-works/index.xhtml
HTTP
 HTTP - HyperText Transfer Protocol
● Nivelul Aplicatie care gestioneaza
transferul de date

● Fundamentul oricarui schimb de

date pe Web!

● Proprietatile HTTP-ului:
○ Modelul cerere-raspuns
○ Bazat pe text Text
○ Stateless: nu exista nicio inteligibil
legatura intre 2 solicitari care
se desfasoara succesiv prin
intermediul aceleiasi conexiuni
Cereri HTTP
 HTTPS
● HTTPS - HyperText Transfer
Protocol Secured
● SSL - Secure Sockets Layer
● Protocolul SSL este utilizat pentru
criptarea datelor → securizarea
schimbului de informatii pe
Internet

D#45fgl*)33/p

36
 Intrebari
1. Ce este protocolul HTTP?

2. Care sunt trasaturile principale are protocolului HTTP?

3. Ce reprezinta HTTPS?

4. Care sunt beneficiile certificatelor SSL/HTTPS?

5. Ce port foloseste protocolul HTTP?

6. Ce port foloseste protocolul HTTP?

 Metode de cerere HTTP
● Metodele HTTP indica actiunea ce trebuie efectuata pentru o
anumita resursa

● Se mai intituleaza si verbe HTTP

● Cele mai frecvente metode de solicitare sunt următoarele, mapate la

cea mai comună acțiune pe care o reprezintă (CRUD)

HTTP POST - Create

HTTP GET - Read
HTTP PUT - Update
HTTP DELETE - Delete
 Metode de cerere HTTP
HTTP POST
Datele trimise catre server cu metoda POST sunt stocate in corpul
cererii de tip HTTP request :

HTTP GET
Datele transmise catre server prin GET apar la finalul URL-ului, asa cum au
fost introduse:
 GET vs. POST
GET
Cererea GET este retinuta in cache
Datele sunt transmise prin
intermediul unui URL in cadrul unui
browser
Poate trimite un nr limitat de date
catre server
GET e mai putin sigura
NU folositi GET cand transmiteti
parole sau informatii sensibile pe
internet
POST
Cererea nu este retinuta in cache
Nu transmite datele prin intermediul
unui URL
Nu exista o limitare a nr de date
transmise catre server
POST mai sigura (parametrii nu sunt
stocati in istoricul browserului)
 Cerere HTTP – HTTP Request
● O cerere trimisa de catre un client la un server consta in:
○ Request line
○ Request headers
○ Body – optional

<request method> <resource> HTTP/<version>

<headers>

<request body>

http://www.test101.com/doc/text.html?bookId=12345&author=Tan+Ah+Teck
 Raspuns HTTP – HTTP Response
● Mesajele trimise de un server ca raspuns la solicitarile clientului constau in:
○ Status line
○ Request headers
○ Body – optional

HTTP/<version> <status code> <status text>

<headers>

<response body – requested resource>

Cereri HTTP
HTTP Response Status Codes
 Intrebari
1. Care sunt diferentele dintre metodele GET si POST?

2. Ce reprezinta codul de raspuns HTTP 404 Not found?

3. Ce reprezinta codul de raspuns HTTP 401?

4. Ce reprezinta codul de raspuns HTTP 200 OK?

Web Browsers
 Browser-ul Web
● Este o aplicatie software (un program) ce permite accesarea informatiilor
din World Wide Web
● Cele mai utilizate browsere sunt:
○ Google Chrome
○ Mozilla Firefox
○ Microsoft Edge
○ Apple Safari
○ Opera
○ Microsoft Internet Explorer
● Una dintre cele mai utile functii ale unui browser este developer tools
(F12).
 Continuarea studiului
● https://www.gcflearnfree.org/internetbasics/w
hat-is-the-internet/1/
● http://searchnetworking.techtarget.com/defini
tion/TCP-IP
● http://webfoundation.org/about/vision/history
-of-the-web/
● https://code.tutsplus.com/tutorials/http-the-
protocol-every-web-developer-must-know-
part-1--net-31177