1. Back end Development CS 4640 Programming Languages for Web Applications

2. How User Interact With Web Apps
revisit
How User Interact With Web Apps
Web server
Web application
PHPs
Web component1
Web component2
Web componentn
HTTP
Request
Usability
Request DB
or persistent data
Web client
HTML JS
CSS
Response
HTTP
Response

3. Web Development (General View)
UI/UX design, usability
Web design
Responsive design
Full-Stack Development
$38k - $142k, avg = $87k
Variety of skills (both front end and back end)
Horizontal technology development (+)
Not expert in particular skill (-)
Front End Development
Client side
HTML, CSS, JS (and JS libraries, frameworks)
Fixed huge amount of data, no database interaction
$42k - $108k, avg = $67k
Server side
Speed, performance, scalability, security, availability, accessibility, reliability
Business logic
Java, PHP, Python, Ruby on Rails, and back end frameworks
Database interaction
Back End Development
$38k - $117k, avg = $70k
Server administration
Database, data science
[ Salaries
reference: PayScale ]

4. How the Web Software Works
Browser
To server
form-handler.php
To client
Browser

5. Server Side Processing
revisit
Server Side Processing
Server
Client
UI implemented and rendered in a browser
Web server
Database server
Container engine
Program components
HTTP Request
HTTP Response
data
HTML
XAMPP
PHPs

6. HTTP client-server communication is connectionless (stateless)
Execution Overview
Response back to requestor
Incoming request
Server 1 8
HTTP Request
HTTP Response 2 7
Web server
Request / Response Objects 3
Modified Response Object 6
Container engine
Create thread / call method 4
Return 5
Program component
HTTP client-server communication is connectionless (stateless)
As soon as the request is made and fulfilled, the connection is terminated

7. We will come back to this later …
Session Management
How can servers keep track of state of different clients?
Session : A single coherent use of the system by the same user
Example : shopping carts
Cookies : A string of characters that a web server places on a browser’s client to keep track of a session
Usually used as an index into a table (dictionary) on the server
Most dictionaries expire after a period of time (15 to 30 minutes)
Additional mechanisms
URL rewriting
Hidden form control
We will come back to this later …

8. Additional Web Features
User’s ability to control web application via web browser features
index
login
browse
record_add
submit a form
post (userid , password)
redirect
record_insert
post (name, category, content)
back
component
simple link transition
form link transition
redirect transition
operational transition

9. Additional Web Features (2)
Communication among web components depending on requests through the HTTP
index
login
browse
record_add
submit a form
post (userid , password)
redirect
record_insert
post (name, category, content)
back
component
simple link transition
form link transition
redirect transition
operational transition
get

10. Additional Web Features (3)
Control connections: forward, include, redirect
index
login
browse
record_add
submit a form
post (userid , password)
redirect
record_insert
post (name, category, content)
back
component
simple link transition
form link transition
redirect transition
operational transition
forward

11. Back End Component and Page-centric Design
Server
Web client
Main component
(Client requests are intercepted here)
Component
(data)
Uses or instantiates
Request
Response
Web client
Database
Web client
Requests are made to a main component and the main component response to clients

12. Back End Component and Dispatcher (N-tier) Design
Web client
Server
Web client
Request
Response
Dispatcher
Database
Component
presentation
Data
Business processing
Web client
Usually use forward
Component presentation
Data
Component presentation
Requests are sent to a dispatcher that then forward the requests to another component (using forward or redirect control connection)

13. Back End Component and Model View Controller
method calls
data structures
HTML / JSP / frontend
Components
Model
events
Encapsulates application state
Responds to state queries
Exposes application functionality
Notifies views of changes
state change
state query
change notification
View
Controller
view select
Renders the model
Requests updates from the model
Sends user inputs to controller
Allows controller to select view
Defines application behavior
Maps user actions to model updates
Selects a view for response
One view for each function
user input
[Graphic from Designing Enterprise Applications with the Java 2 Platform, Enterprise Edition, Nicholas Kassem et al., October 2000]