development web application - ut
TRANSCRIPT
![Page 1: Development Web Application - ut](https://reader036.vdocuments.site/reader036/viewer/2022063005/62bb2e175936380882025d43/html5/thumbnails/1.jpg)
Web Application Development2019
![Page 2: Development Web Application - ut](https://reader036.vdocuments.site/reader036/viewer/2022063005/62bb2e175936380882025d43/html5/thumbnails/2.jpg)
Who are we?
Tsotne Kekelia
Lectures, Practical sessions
Master’s student @ UT
7+ years of experience as a web developer
Tair Vaher
Practical sessions
Master’s student @ UT
5+ years of experience as a web developer
![Page 3: Development Web Application - ut](https://reader036.vdocuments.site/reader036/viewer/2022063005/62bb2e175936380882025d43/html5/thumbnails/3.jpg)
About this course
● Multitier Architecture
● HTTP
● HTML
● CSS
● Javascript
● DOM
● AJAX
● Frameworks (VueJS)
● Backend (NodeJS)
● Testing
● External APIs
● UI / UX
![Page 4: Development Web Application - ut](https://reader036.vdocuments.site/reader036/viewer/2022063005/62bb2e175936380882025d43/html5/thumbnails/4.jpg)
Course structure
Homeworks
1. Homework 1 (Week 4) - 5 points
2. Homework 2 (Week 6) - 10 points
3. Homework 3 (Week 8) - 15 points
4. Homework 4 (Week 14) - 20 points
Exam
● 50 points , multiple choice test
● Passing minimum: 51 points
● Exam minimum: 21 points
● 1 Resit
![Page 5: Development Web Application - ut](https://reader036.vdocuments.site/reader036/viewer/2022063005/62bb2e175936380882025d43/html5/thumbnails/5.jpg)
Course structure
● Attendance is not mandatory
● You will be split into group of 3
● Homeworks will be presented and
graded during practical sessions, at
least one person from group needs to
attend.
Register to groups: https://forms.gle/EkyNakcwaqWhwjWd8
Communications via Slack channel:
Workspace: http://wad-2019.slack.com
Join by visiting: http://tiny.cc/wad2019
![Page 6: Development Web Application - ut](https://reader036.vdocuments.site/reader036/viewer/2022063005/62bb2e175936380882025d43/html5/thumbnails/6.jpg)
What are we gonna do?
1st Half of the semester
Simple HTML, CSS, Javascript project
![Page 7: Development Web Application - ut](https://reader036.vdocuments.site/reader036/viewer/2022063005/62bb2e175936380882025d43/html5/thumbnails/7.jpg)
What are we gonna do?
2st Half of the semester
Chirp - social network website.
Vue.Js for front-end
Node.Js for back-end
![Page 8: Development Web Application - ut](https://reader036.vdocuments.site/reader036/viewer/2022063005/62bb2e175936380882025d43/html5/thumbnails/8.jpg)
Tools
![Page 9: Development Web Application - ut](https://reader036.vdocuments.site/reader036/viewer/2022063005/62bb2e175936380882025d43/html5/thumbnails/9.jpg)
IDE
Pretty much any text editor will do.
Preferred: WebStorm
Webstorm: https://www.jetbrains.com/webstorm/
Atom:https://atom.io/
Sublime:https://www.sublimetext.com/
VS Code:https://code.visualstudio.com/
WebStorm Atom
Sublime VS Code
![Page 10: Development Web Application - ut](https://reader036.vdocuments.site/reader036/viewer/2022063005/62bb2e175936380882025d43/html5/thumbnails/10.jpg)
Web Browser
Preferred: Google Chrome
Google Chrome: https://www.google.com/chrome/
Firefox:https://www.mozilla.org/en-US/firefox/new/
Safari:https://www.apple.com/safari/
Edge:https://www.microsoft.com/en-us/windows/microsoft-edge
Chrome Firefox
Safari Edge
![Page 11: Development Web Application - ut](https://reader036.vdocuments.site/reader036/viewer/2022063005/62bb2e175936380882025d43/html5/thumbnails/11.jpg)
Additional
Git:https://git-scm.com/
Postman:https://www.getpostman.com/
Terminal / cmd
GitPostman
![Page 12: Development Web Application - ut](https://reader036.vdocuments.site/reader036/viewer/2022063005/62bb2e175936380882025d43/html5/thumbnails/12.jpg)
Questions?
![Page 13: Development Web Application - ut](https://reader036.vdocuments.site/reader036/viewer/2022063005/62bb2e175936380882025d43/html5/thumbnails/13.jpg)
Multitier ArchitectureMultilayered Architecture
![Page 14: Development Web Application - ut](https://reader036.vdocuments.site/reader036/viewer/2022063005/62bb2e175936380882025d43/html5/thumbnails/14.jpg)
Multitier Architecture
[1] https://en.wikipedia.org/wiki/Multitier_architecture
In software engineering, multitier architecture (often referred to as n-tier architecture) or multilayered architecture is a client–server architecture in which presentation, application processing, and data management functions are physically separated. The most widespread use of multitier architecture is the three-tier architecture. [1]
“
”
![Page 15: Development Web Application - ut](https://reader036.vdocuments.site/reader036/viewer/2022063005/62bb2e175936380882025d43/html5/thumbnails/15.jpg)
Three-tier Architecture
Presentation tier
GUI, UI, View
Application tier
Business logic, Logic tier, or Middle tier
Data tier
Database servers, File shares
![Page 16: Development Web Application - ut](https://reader036.vdocuments.site/reader036/viewer/2022063005/62bb2e175936380882025d43/html5/thumbnails/16.jpg)
Three-tier Architecture in Web
Front-end
HTML, CSS, Javascript
Back-end
Node.js application
Database
Mysql database
![Page 17: Development Web Application - ut](https://reader036.vdocuments.site/reader036/viewer/2022063005/62bb2e175936380882025d43/html5/thumbnails/17.jpg)
Client-Server communication
Enter URL
Client The Internet Web Server Database
Look Up the IP
Request Page
Receive Request
Execute Query
Process Data
Return Page
Display Page
![Page 18: Development Web Application - ut](https://reader036.vdocuments.site/reader036/viewer/2022063005/62bb2e175936380882025d43/html5/thumbnails/18.jpg)
HTTPHypertext Transfer Protocol
![Page 19: Development Web Application - ut](https://reader036.vdocuments.site/reader036/viewer/2022063005/62bb2e175936380882025d43/html5/thumbnails/19.jpg)
HTTP
[1] https://en.wikipedia.org/wiki/Hypertext_Transfer_Protocol
The Hypertext Transfer Protocol (HTTP) is an application protocol for distributed, collaborative, hypermedia information systems. [1]
“
”
![Page 20: Development Web Application - ut](https://reader036.vdocuments.site/reader036/viewer/2022063005/62bb2e175936380882025d43/html5/thumbnails/20.jpg)
HTTP
Hypertext
Hypertext is text displayed on a computer display or other electronic devices with references (hyperlinks) to other text that the reader can immediately access.
Protocol
Protocol is a set of rules governing a communication between a client and a server
Hypermedia
Hypermedia, an extension of the term hypertext, is a nonlinear medium of information that includes graphics, audio, video, plain text and hyperlinks.
![Page 21: Development Web Application - ut](https://reader036.vdocuments.site/reader036/viewer/2022063005/62bb2e175936380882025d43/html5/thumbnails/21.jpg)
URI & URL Uniform Resource Identifiers & Uniform Resource Locators
![Page 22: Development Web Application - ut](https://reader036.vdocuments.site/reader036/viewer/2022063005/62bb2e175936380882025d43/html5/thumbnails/22.jpg)
URI & URL
URI
A Uniform Resource Identifier (URI) is a string of characters that unambiguously identifies a particular resource. To guarantee uniformity, all URIs follow a predefined set of syntax rules, but also maintain extensibility through a separately defined hierarchical naming scheme (e.g. http://)
URL
A Uniform Resource Locator (URL), colloquially termed a web address, is a reference to a web resource that specifies its location on a computer network and a mechanism for retrieving it. A URL is a specific type of Uniform Resource Identifier (URI), although many people use the two terms interchangeably.
![Page 23: Development Web Application - ut](https://reader036.vdocuments.site/reader036/viewer/2022063005/62bb2e175936380882025d43/html5/thumbnails/23.jpg)
URL components
userinfo host port
┌────────┴───────┐┌───────┴──────┐┌┴┐
http://john.doe:[email protected]:123/forum/questions/?tag=networking&order=newest#top
└─┬─┘ └───────────────────┬───────────────┘└───────┬───────┘ └────────────┬────────────┘ └┬┘
scheme authority path query fragment
![Page 24: Development Web Application - ut](https://reader036.vdocuments.site/reader036/viewer/2022063005/62bb2e175936380882025d43/html5/thumbnails/24.jpg)
Back to HTTP
![Page 25: Development Web Application - ut](https://reader036.vdocuments.site/reader036/viewer/2022063005/62bb2e175936380882025d43/html5/thumbnails/25.jpg)
HTTP state
HTTP is a stateless protocol. A stateless protocol does not require the HTTP server to retain information or status about each user for the duration of multiple requests. [1]
“
”[1] https://en.wikipedia.org/wiki/Hypertext_Transfer_Protocol#HTTP_session_state
![Page 26: Development Web Application - ut](https://reader036.vdocuments.site/reader036/viewer/2022063005/62bb2e175936380882025d43/html5/thumbnails/26.jpg)
HTTP Methods
GET
The GET method requests a representation of the specified
resource. Requests using GET should only retrieve data and
should have no other effect.
HEAD
The HEAD method asks for a response identical to that of a
GET request, but without the response body.
POST
The POST method requests that the server accept the entity
enclosed in the request as a new subordinate of the web
resource identified by the URI.
DELETE
The DELETE method deletes the specified resource.
PUT
The PUT method requests that the enclosed entity be
stored under the supplied URI. If the URI refers to an
already existing resource, it is modified; if the URI does not
point to an existing resource, then the server can create the
resource with that URI.
OPTIONS
The OPTIONS method returns the HTTP methods that the
server supports for the specified URL.
PATCH
The PATCH method applies partial modifications to a
resource.
![Page 27: Development Web Application - ut](https://reader036.vdocuments.site/reader036/viewer/2022063005/62bb2e175936380882025d43/html5/thumbnails/27.jpg)
Request and Response
[METHOD] [PATH] HTTP/1.1 #Request line
[HEADER FIELD]:[VALUE] #Header fields
#Empty line
[BODY] #Message body (Opt.)
Request Message
HTTP/1.1 [CODE] [REASON] #Status line
[HEADER FIELD]:[VALUE] #Header fields
#Empty line
[BODY] #Message body (Opt.)
Response Message
![Page 28: Development Web Application - ut](https://reader036.vdocuments.site/reader036/viewer/2022063005/62bb2e175936380882025d43/html5/thumbnails/28.jpg)
Request and Response
GET /sample/example?param=1 HTTP/1.1
Host: www.example.com
Content-Type: application/json
Cache-Control: no-cache
Request Message
HTTP/1.1 200 OK
Date: Mon, 23 May 2005 22:38:34 GMT
Content-Type: text/html; charset=UTF-8
Content-Length: 138
<html>
<head>
<title>An Example Page</title>
</head>
<body>
<p>Hello World, this is a very simple HTML
document.</p>
</body>
</html>
Response Message
![Page 29: Development Web Application - ut](https://reader036.vdocuments.site/reader036/viewer/2022063005/62bb2e175936380882025d43/html5/thumbnails/29.jpg)
HTTP Methods
Method Request has body Response has body Safe Idempotent
GET Optional Yes Yes Yes
HEAD Optional No Yes Yes
POST Yes Yes No No
DELETE Optional Yes No Yes
PUT Yes Yes No Yes
OPTIONS Optional Yes Yes Yes
PATCH Yes Yes No No
![Page 30: Development Web Application - ut](https://reader036.vdocuments.site/reader036/viewer/2022063005/62bb2e175936380882025d43/html5/thumbnails/30.jpg)
HTTP Response codes
1XX - Informational
2XX - Successful
3XX - Redirection
4XX - Client Error
5XX - Server Error
Common response codes:
200 - OK
400 - Bad Request
401 - Unauthorized
403 - Forbidden
404 - Not found
500 - Internal Server Error
502 - Bad Gateway
503 - Service Unavailable
418 - I'm a teapot
Full list: https://en.wikipedia.org/wiki/List_of_HTTP_status_codes
Full list: https://en.wikipedia.org/wiki/List_of_HTTP_status_codes
![Page 31: Development Web Application - ut](https://reader036.vdocuments.site/reader036/viewer/2022063005/62bb2e175936380882025d43/html5/thumbnails/31.jpg)
Recap
■ Three-tier architecture in web
○ Presentation tier = Front-end
○ Application tier = Back-end
○ Data-tier = Database
■ Client communicates with server via HTTP
■ HTTP : Hypertext Transfer Protocol
■ Hypermedia = hypertext + graphics, audio, video
■ URL is one particular type of URI
■ Required Web URL components
○ Schema (http:)
○ Host (www.example.com)
○ Path (/forum/questions/)
■ HTTP Methods
○ GET - Retrieves a resource
○ HEAD - Retrieves the meta data of the resource
○ POST - Create resource
○ PUT - Replace existing or Create non-existing resource
○ PATCH - Partially modify resource
○ OPTIONS - Lists available HTTP methods for the URL
○ DELETE - Deletes specified resource
![Page 32: Development Web Application - ut](https://reader036.vdocuments.site/reader036/viewer/2022063005/62bb2e175936380882025d43/html5/thumbnails/32.jpg)
Questions?Next: HTML