INTRODUCERE

Aplicatii Web - Curs 1

The New York Times

YouTube - Facts
Asigura posibilitatea vizualizarii a peste 2 miliarde filme pe zi (2010) Fondat in Feb 2005 (3 sw ingineri) 30 mil vizualizari/zi in Martie 2006 100 mil vizualizari/zi in Iulie 2006 Echipa: 2 administratori sistem, 2 arhitecti pe probleme scalabilitate 2 ingineri programatori pentru noi functionalitati 2 ingineri pe probleme de arhitectura retele 1 DBA

Reteta YouTube pentru succes

while (true) { identify_and_fix_bottlenecks(); drink(); sleep(); notice_new_bottleneck(); } ...Si aceasta de mai multe ori pe zi

Ce este necesar? Ce optiuni am?

Server Web Database Limbaj de programare Web Framework Back-up Unelte pentru monitorizarea infrastructurii Cluster Proxy

Tehnologii disponibile ...

HTML JAVASCRIPT XML JAVA HTTP AJAX servlets CSS Flash C# PHP ASP JSP JAVA Beans
SQL PYTHON

jquery

Hibernate

SpingSource

DJango Rails Symphony Tapestry Knokoutjs jquery DOM

Web Services EJB XSL XHTML...

SOAP

REST JSON

Componete principale AW
Other (Web) Apps

HTTP Browsers HTML CSS JavaScript FLASH Web Server HTTP

Application Server Java, Java Servlet, Java Beans, Python, Django, Ruby, Rails, NodeJs... Hibernate

XML, JSON HTTP SOAP

File System Images CSS

Database MySql, Oracle... -----------------MongoDB...

Baza de date
Informatia este tot ce avem Trebuie mentinuta: sa fie oricand disponibila accesibila rapid in siguranta

Baze de date - Relationale

Cel mai folosit model de baze de date: Modelul Relational SQL - Structured Query Language Exista multiple optiuni: Comerciale Oracle Microsoft SQL Server IBM DB2 Open Source MySQL PostgreSQL

Servere Web
HTTP - Hypertext Transfer Protocol implementation Exista o multime de optiuni: Apache Lighthtpd Yaws Tomcat Jetty Mongrel

Framework Web - Java

Ce framework as putea folosi? Spring MVC Struts Tapestry

Framework Web - Ruby

Ruby on Rails

Framework Web - Python

Exista multe optiuni: Django Turbo Gears CherryPy Twisted Zope .... Unul dintre cei mai mari utilzatori: Google Gmail

Framework Web - PHP

Symfony simple templating and helpers cache management smart URLs scaffolding multilingualism and I18N support object model and MVC separation Ajax support enterprise ready

Backup
Nu uitati sa faceti Back-up la date !!!

Hard-disk-ul se poate defecta Exista oricand posibilitatea unui atac (hakers) Se pot sterge fisiere din greseala

Virtualizare
Una din temele fierbinti in prezent Potential imens in viitor Exemple aplicatii virtualizare: Server consolidation Disaster recovery Testing and training Portable applications Portable workspaces Exemple: XenSource VMWare

Monitorizarea infrastructurii
monitorizare trafic - RRDTool monitorizare hardware (process, memory usage, ...) monitorizare incidente securitate monitorizare evenimente retea - Nagios

Intrebari:
Cati dintre voi au creat o pagina html? Cati dintre voi au generat dinamic o pagina html folosind PHP? alt limbaj? Cati dintre voi au folosit JavaScript? Jquery sau alt framework? Cati dintre voi stiu java? Cati au folosit java pentru aplicatii web?

Cuprins curs Aplicatii Web

Overview Curs Curs 1, 2 Intro, Istorie Aplicatii Web Protocolul HTTP Limbaje adnotare -HTML/XHTML Curs: 3 Foi de stil -CSS Curs 4 Java Script XML & JSON AJAX Curs 5 HTML 5

Cuprins curs Aplicatii Web

Curs 6 JavaScript Frameworks - JQuery, KnockoutJS Curs 7 ---- Partial ---- Curs 8 Generarea dinamica a paginilor web Model View Controller Pattern Prezentare comparativa framework web Curs 9 Python + Django

Cuprins curs Aplicatii Web

Curs 10,11 Aplicatii web bazate pe Java Arhitecturi J2EE - Notiuni introductive ORM - Hibernate Curs 12 Servicii Web - SOAP, REST Unit test - Test Driven Development Curs 13 Recapitulare

Pe scurt istoria World Wide Web

1965 - Ted Nelson introduce conceptul de Hypertext 1968 - Doug Engelbart implementeaza si demonstreaza conceptul de Hypertext in "oN-Line System" (NLS). NLS foloseste un nou device care faciliteaza interactiunea cu calculatorul - MOUSE 1969 - ARPA net primele noduri 1974-1978 - TCP/IP 1984 -Domain Name System (DNS) 1989 - Se nasteWorld Wide Web - un proiect de structurare a informatiei la CERN. Tim Berners-Lee este cel care a dezvoltat acest proiect.

...tot istorie...
1990 - primul browser web si prima comunicatie web client-server avand ca suport Internetul 1994 Access la Internet pentru utilizatori prin dialup Se naste Consortium-ul W3C 1997 HTML 3.2

Ce este World Wide Web?

World Wide Web - spatiu informational cu resurse eterogene, interconectate, aflat intr-o continua evolutie Web-ul este conceptual format dinAgenti si Resurse Agentii sunt implementati ca programe care proceseaza si schimba informatie (resurse) intre/pentru persoane, entitati sau procese Server Agents (e.g. Web Server, Proxies etc.) User Agents (e.g. Browser Web, MM Player etc.)

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

Aspecte arhitecturale ale Web

Identificarea resurselor URI-urile - identifica resurse Interactiune Agentii comunica folosind protocoale standardizate (e.g. HTTP, FTP, SOAP, SMTP etc) Protocoalele folosesc mesaje pentru transferul reprezentarii resurselor intre agenti Informatia utila Meta informatie Reprezentare stardardizarea formatelor de prezentare HTML, XML, CSS, PNG etc.

URI - Uniform Resource Identifier

Ofera o modalitate flexibila de identificare a resurselor Uniform identificarea (si folosirea) resurselor de tip diferit in acelasi context adaugarea de tipuri de identificatori pentru noi tipuri de resurse Resource Orice poate fi identificat cu un URI Exemple: document, serviciu,colectii de resurse etc. Nu trebuie neaparat sa fie accesibila din internet Concepte abstracte gen: operatori matematici, cifre Identifier Exprima informatia ce se vrea evidentiata Nume, Locatie, Context Nu implica neaparat posibilitatea accesarii resursei

URI - Caracteristici
Posibilitatea transcrierii URI o secventa de caractere Pot fi reprezentate ca sir de biti sau scrise pe hartie Separa identificarea de interactiune URI asigura doar identificarea resursei Actiunea este definita de protocolul sau limbajul asociat De obicei protocolul este specificat de catre URI scheme.. dar nu neaparat si nu totdeauna suficient Sintaxa URI este organizata ierarhic Importanta componentelor descreste de la stanga la dreapta

URI, URL, URN si IRI

URL - Uniform Resource Locator Un subset al URI Permite, pe langa identificare, LOCALIZAREA URN - Uniform Resource Name (RFC2141) Subset al URI folosind "urn:" scheme identificatori care trebuie sa ramana unici global, sa persiste si dupa existenta resursei IRI - Internationalized Resource Identifier

Syntaxa URI
Syntaxa URI specificata in RFC2396 Sintaxa URI consta intr-o secventa de componente: scheme - rafineaza sintaxa componentelor ce urmeaza authority path query fragment

Syntaxa URI
URI = scheme ":" hier-part [ "?" query ] [ "#" fragment ]

hier-part = "//" authority path authority = [ userinfo "@" ] host [ ":" port ]
URL foo://example.com:8042/over/there?name=ferret#nose \_/ \______________/\_________/ \_________/ \__/ | | | | | scheme authority path query fragment | _____________________|__ / \ / \ URN urn:example:animal:ferret:nose Identificare componente URI

HTTP://THE.WEB.PROTOCOL
HTTP Hypertext Transfer Protocol RFC 2616 (June 1999), defineste HTTP/1. 1, versiunea HTTP care este cel mai larg raspandita in prezent HTTP este un protocol de tip cerere/raspuns intre client si server Resursele accesate de catre HTTP sunt identificate folosind URL.

HTTP Cum functioneaza? +/ Protocol: foloseste mesaje formate din caractere ASCII ofera un format standard pentru transferul textului Etape comunicatie stabilire conexiune TCP clientul trimite cererea serverul trimite raspunsul + informatia inchidere conexiune Foloseste TCP vs UDP. Motive: Este folosit in WAN Informatia utile este adeseori de mari dimensiuni Este necesara garantarea integritatii informatiei (dezavantaj) cost relativ ridicat de stabilire a conexiunii TCP

Comunicatia Browser -Web Server

Browser initiaza conversatia 1. Clientul stabileste conexiunea cu serverul pe un port specificat (impliciteste 80) 2. Trimite o cerere de document specificand o comanda HTTP - metoda 3. Comanda este urmata de "parametrii": Adresa documentului Versiunea protocolului HTTP Cererea initiala browser: GET /index.html HTTP/1.0

Browser -Web Server Communication

Browserul continua conversatia:
Poate trimite informatie optionala pentru a informa serverul despre propria configuratie si formatul de documente/date pe care il accepta - Header http Se pot specifica mai multe headere fiecare pe o linie separata Fiecare header este specificate sub forma nume/valoare Exemple header: User-Agent: Mozilla/2.02Gold (WinNT; I) Accept: image/gif, image/x-xbitmap, image/jpeg, image/pjpeg, */*

Browser -Web Server Communication

Serverul web raspunde Serverul web raspunde cu o linie de status continad 3 campuri: Versiunea HTTP pe care o foloseste serverul Un cod indicator de status - un numar compus din 3 cifre ca indica ce tip de raspuns poate intoarce serverul Descriere - Un text in format cu semnificatie pentru om si care descrie codul indicator de status Un cod cu valoarea 200 semnifica faptul ca cererea a fost prelucrata cu success si ca informatia ceruta va fi livrata dupa "header"-e.

Coduri de status
1xx: Informational - Request received, continuing process 100 Continue - Only part of message has been received 101 Switching protocol - The server switches protocol 2xx: Success 202 Accepted - Request accepted for processing but processing not finished 204 No Content 3xx: Redirection 301 Moved Permanently - The requested page has moved to a new url 303 See Other - The requested page can be found under a different url

Coduri de raspuns
4xx: Client Error - The request contains bad syntax 401 Unauthorized - The requested page needs a username anda password 403 Forbidden - Access is forbidden to the requested page 5xx: Server Error The server failed to fulfill the request 500 Internal Server Error 503 Service Unavailable - Server is temporarily overloading or down O lista completa a codurilor de raspuns HTTP: http://www.w3.org/Protocols/rfc2616/rfc2616-sec6.html#sec6.1.1

Serverul Web continua raspunsul

Serverul trimite informatii "header"inapoi la client "Header"-ele contin informatii despre server si despre documentul cerut O linie goala indica sfarsitul informatiilor tip header Exemple de informatii tip header:
Date: Sat, 13 Oct 2007 17:25:46 GMT Server: Apache/1.3.33 (Darwin) Content-Length: 1456 Connection: close Content-Type: text/html Content-Language: en Expires: Sat, 13 Oct 2007 17:25:46 GMT

Headere HTTP
General Headers - Informatii care nu sunt legate de server, client sau HTTP Header-e specifice cererilor client - Formatul preferat de documente Preferred document formats and server parameters Header-e specifice server - Informatii despre serverul care trimite raspunsul Header-e entitati - Informatii despre datele trimise intre client si server O descriere completa a tuturor header-elor HTTP se gaseste in RFC 2616.

HTTP - protocol ce nu mentine starea

HTTP nu implica mentinerea nici unei informatii de la o tranzactie la alta Avantaj: Serverul este degrevat de un "efort" suplimentar pentru mentinerea sesiunilor Dezavantaj: Mesajele nu contin informatii pentru a identifica sesiunea de la cerere la alta Cand este necesar exista mecanisme speciale pentru pastrarea unor informatiilor intre cereri Campuri ascunse in formulare HTML Cookies

Metode HTTP
GET: Intoarce resursa identificata de cererea din URL HEAD: Intoarce headerele identificate de cererea in URL POST: Trimite date fara limita de dimensiune la server PUT: Stocheaza o resursa la URL specificat DELETE: Sterge o resursa de la URL-ul specificat OPTIONS: Intoarce metodele HTTP suportate de catre server TRACE: Pentru depanare. Raspunde cu cererea in ecou.

Limbaje de adnotare
GUI pentru o aplicatie Web diferita ca abordare de GUI pentru aplicatie traditionala:
GUI Aplicatie traditionala: Pixel -> Colectii pixeli/Caractere -> Controale -> Interfata Aplicatie

GUI Aplicatie Web: abordare bazata pe conceptul de document

- Imagini - Formulare - Mecanisme pentru modificarea structurii documentului

HTML - Hypertext Markup Language

XHTML

Elemntele sunt organizate ierarhic Exista un nod radacina - <html> Fiecare element este compus din: tagul de inceput + continut + tagul de sfarsit <tag> ... </tag> <tag/> tagul de inceput poate contine Atribute <img src="image.png"> Entities - caractere speciale Ex: pt '<' se foloseste &lt

XHTML - DOCTYPE
<?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd"> <html xml:lang="en" lang="en" xmlns="http://www.w3. org/1999/xhtml"> <head> <title>Salut A02</title> </head> <body> <p>Salut A02</p> </body> </html>

Diferente HTML - XHTML

HTML: Permite existenta tagurilor fara a forta existenta tagului pereche de incheiere <p>text <p>text Atributele pot fi folosite fara o valoare specificata <select mutiple> Elementele se pot suprapune si nu trebuiesc neaparat inchise in ordinea inversa deschiderii lor <p>X<b>text</p>alt text</b>ff</p>

De ce sunt aceste diferente un dezavantaj?

DOM
Browserul descarca documentul HTML Pentrufiecare element creaza un obiect care il reprezinta Model intern structura arborescenta ce contine toate elementele documentului: DOM Document Object Model Odata cu HTML se incarca si se executa JavaScript JavaScript poate interactiona cu HTML folosind structura DOM si API - ul pus la dispozitie

Bibliografie
Web Architecture Uniform Resource Identifier RFC2616 HTTP Specification http://openclassroom.stanford.edu/MainFolder/CoursePage.php? course=WebApplications

Bibliografie optionala (FYI)

Internet Pioneers How it all Started http://www.dougengelbart.org