Tehnologii Web/2022-2023

Laboratory aims

The Web Technology aim at introducing to students some of the most known/used technologies related with web development. As a consequence, the goal is to familiarize not with particular tools and frameworks but to make them understand that there is a vast array of practical solutions (languages, transmission protocols, frameworks) which they can choose from when deciding to do web development. It does not really matter what solution you choose as long as you are familiar with it and are aware of the fact that at the foundation every solution relies on the same general web technology (XML, HTTP, SOAP, Web Services, Server/Client Side Scripting, etc.).

General map of the lab

Retrieve using HTTP a remotely located HTML document → Modify/Create an HTML document → Create an HTML document from an JSON (templating engines) → Improve the HTML by adding client side scripting (asynchronous and synchronous) (Fetch calls, DOM, AJAX) → Send requests to server side (forms) using various technologies (HTTP, XML, SOAP, JSON) → Process requests using server side scripting → Discover that there is more than one way of doing server side programming (scripting-like languages: Python; Flask applications) → and that the web is not made up of only web sites (queuing systems and component based software) → Retrieve data from databases or LDAP directories → optimize your HTML page for SEO and SEA

NOTE: Some tools and tutorials will be changed to more up to date versions

Tools, frameworks, libraries

Front-end:

• HTML5 (HTML, Javascript, CSS3)
• Typescript
• NPM
• Yarn
• Parcel

Back-end:

• Python

• Flask Framework
• SQL Alchemy
• JWT

Deployment:

• Heroku CLI

Version control:

• Git

Laboratory agenda

• Web technologies/2022-2023
  • Laborator 1
    • Introducere în Tehnologii Web
    • Concepte, metodologii
    • Mediul de programare
  • Laborator 2
    • UI/UX Design
    • Wireframes
    • Mockup
    • Prototype
  • Laborator 3
    • HTML
    • Flex Layout
    • Grid Layout
  • Laborator 4
    • Javascript
    • DOM
  • Laborator 5
    • Typescript
  • Laborator 6
    • Javascript/Typescript avansat
    • AJAX
    • Apelul fetch
  • Laborator 7
    • Cadrul de lucru Flask
    • Creare aplicație simplă Flask
    • Rute și funcții de vizualizare
    • Rute dinamice
  • Laborator 8
    • Templating cu Jinja2 în Flask
    • Redarea unui template în Flask
  • Laborator 9 (10)
    • Integrarea bazei de date
    • Flask SQLAlchemy
  • Laborator 11
    • Prototype application
  • Laborator 10 (12)
    • JWT pentru autentificare
    • Aplicația Postman API Platform
  • Laborator 12 (13)
    • Metode de autentificare de bază utilizând framework-ul Flask
  • Laborator 13 (14)
    • Depozitarea și versionarea aplicației web folosind Git sau codul de pe GitHub
    • Testarea aplicației
  • Laborator 14
    • Demo application

Tools

• https://en.wikipedia.org/wiki/Python_(programming_language)
• https://www.python.org/
• https://jinja.palletsprojects.com/en/3.0.x/
• https://flask.palletsprojects.com/en/2.0.x/

Bibliography

Tutorials

• https://www.tutorialspoint.com/xml/xml_parsers.htm

• https://flask.palletsprojects.com/en/2.0.x/tutorial/index.html

• https://www.tutorialspoint.com/flask/index.htm
• https://www.tutorialspoint.com/sqlalchemy/index.htm
• https://docs.sqlalchemy.org/en/14/orm/tutorial.html

Books

• XML -- Managing Data Exchange -- available on-line
• Web technologies: a computer science perspective -- Jeffrey C. Jackson -- available on-line