1. Server-side Scripting
Martin Kruliš
by Martin Kruliš (v1.5)

2. Web Server (Revision) Serving Static Pages ` Web Server Internet
Apache configuration
/var/www/myweb/ `
HTTP Request
GET /myweb/index.html
...
Web Server
Internet
Client
index.html
HTTP Response
HTTP/ OK
Content-Length: 1019
Content-Type: text/html;
...
<contents of index.html>
by Martin Kruliš (v1.5)

3. Web Server (Revision) Serving Dynamic Content ` Web Server Internet
/var/www/myweb/ `
HTTP Request
GET /myweb/app.cgi
...
Web Server
Internet
app.cgi
Client
stdin
stdout
Please note the security issues of such solution. If the web server is public, anyone in the world can make your server start a process. Furthermore, your CGI application has to be very secure, especially when dealing with inputs.
HTTP Response
HTTP/ OK
Content-Length: 2049
Content-Type: text/html;
...
<contents generated by cgi>
by Martin Kruliš (v1.5)

4. CGI Common Gateway Interface
One of the first standards for generating dynamic web content
NSCA specification from 1993 how to invoke command line applications
Current version CGI 1.1 (RFC 3875) from 2004
Specifies only the interface
Application may be written in any language
Important information and headers are set as environ- ment variables, POST body is directed to std. input
Response is taken from the std. output
Note that the server must be configured to recognize, when to execute CGI application and when to simply send back a requested file. E.g., apache can be configured
<Directory /home/*/public_html/cgi-bin> Options ExecCGI SetHandler cgi-script </Directory>
Will set the server to treat all files in each cgi-bin of each
Example 1
by Martin Kruliš (v1.5)

5. FastCGI CGI Issues Fast CGI Improvement
Starting a process takes some system time
Each process handles exactly one request
Unable to keep session/shared data in memory
Fast CGI Improvement
Fast CGI server runs independently from web server
Keeps the process pool, resources, …
Communicates with web server via socket/TCP
Multi-request processing may be achieved by multiplexing or multiple connections (or both)
by Martin Kruliš (v1.5)

6. Web Server – FastCGI Improving CGI ` Web Server FastCGI Server
HTTP Request
GET /myweb/app.cgi
...
Web Server
FastCGI Server
Internet
Client
HTTP Response
HTTP/ OK
Content-Length: 2049
Content-Type: text/html;
...
<contents generated by cgi>
by Martin Kruliš (v1.5)

7. Scripting Languages Scripting Languages for Web Applications Benefits
No compilation required
Much faster deployment of applications
Necessity at client-side
Fashion trend in 90’
Drawbacks
Speed
Main concern of web applications was the speed of the network
Second concern is the speed of the database
Perl, Python, PHP, JavaScript, …
by Martin Kruliš (v1.5)

8. Web Server (Revision) Integrating Scripting Modules ` Web Server
/var/www/myweb/ `
HTTP Request
GET /myweb/index.php
...
Web Server
index.php
Internet
mod_php
Client
HTTP Response
HTTP/ OK
Content-Length: 1984
Content-Type: text/html;
...
<contents generated by php>
by Martin Kruliš (v1.5)

9. PHP PHP: Hypertext Preprocessor
Popular language originally designed for the web
The language has integrate API for handling requests
Things like URL parameters, POSTed data, headers, or server settings are presented in global variables
PHP script code can be directly interleaved with HTML (or other type of generated content)
The script is embedded between <?php, ?> marks
The PHP interpret process the script and replace its body with its output in the document
Example 2
by Martin Kruliš (v1.5)

10. WSGI Web Server Gateway Interface
Universal interface between web servers and web applications designed for the Python language
Interface is called WSGI middleware and it is implemented by both sides (server and application)
Specific new features
Routing requests to application objects (by URL)
Multiple applications may run in one process
Content post-processing (e.g., by XSLT)
Load balancing (remote processing, forwarding, …)
Similar APIs
Rack (Ruby), PSGI (Perl), JSGI (JavaScript)
Example 3
by Martin Kruliš (v1.5)

11. ASP.NET ASP.NET Microsoft solution built on .NET platform
Supports all .NET languages (C#, VB, …)
Successor to Microsoft’s Active Server Pages
Requires Microsoft IIS web server
Mono version (mod_mono and FastCGI) exists
WebForms
Basic building blocks for ASP.NET web pages
Similar HTML interleaving syntax as PHP
The idea is to design web pages in the same manner as desktop applications
by Martin Kruliš (v1.5)

12. ASP.NET ASP.NET WebForms Razor syntax MVC
Event-based model, events may be processed at server
The forms automatically serializes the whole state
Razor syntax
Block starts and does not require explicit closing
MVC
Alternative type of ASP.NET applications
Default view engine is either Razor (.cshtml, .vbhtml), or Web Forms (.aspx)
Controllers are .NET classes, methods are actions
Routers select controller class and invoke an action
by Martin Kruliš (v1.5)

13. JSP Java Server Pages Java-based solution for dynamic web pages
Requires web server with servlet container
Apache Tomcat, Jetty, …
Supports both “simple” PHP-like approach and MVC
Uses <%, %> marks for scriptlet-HTML interleaving
MVC usually uses JavaBeans as the model and Java servlets as the controller
Java compilation
Compiler is integrated in the web server and compiles the page when first needed (or when changed)
There are also other efforts to employ Java for web pages. For instance the Google Web Toolkit ( is a framework that allows you to design the whole web application as a Java application. It compiles the client-side parts of the code into JavaScript and automatically handlers the client-server communication.
by Martin Kruliš (v1.5)

14. Other Java Alternatives
JSP is (almost) dead…
Many alternatives
Spring MVC
Spring boot
JSF
Vaadin
Play 1, Play 2
Struts 1, Struts 2
GWT
Grails
Wicket …
by Martin Kruliš (v1.5)

15. Ruby on Rails Ruby on Rails
Ruby scripting language + Rails web framework
Basic philosophy
DRY (Don’t Repeat Yourself) – avoid code duplication
Convention Over Configuration – our way is the “best”
Very strict style of application development
Improves efficiency, but ties your hands
Specific structure of the application
Reflects the MVC pattern
$> rails new myapp
Generates new application structure in ./myapp
To install Ruby on Rails on Linux, I recommend using Ruby Version Manager ( The rails framework is then installed privately in local homes.
Installing rails globally (using sudo and/or deb packages) did not meet with success (at least not in my case).
by Martin Kruliš (v1.5)

16. Integrated Web Server Dedicated Web Server for an Application `
HTTP Request
GET /myweb/index
...
Web Server Module `
Internet
Client
Database Module
HTTP Response
HTTP/ OK
Content-Length: 1984
Content-Type: text/html;
...
<contents generated by app>
by Martin Kruliš (v1.5)

17. Node.js JavaScript Server-side Platform
Basically a Google V8 JavaScript engine compiled as CLI script interpreter
V8 is used in Chrome and it is the fastest JS interpreter
Contains many pre-built packages for server-side application development (sockets, HTTP, …)
HTTP server is embedded in the application, so the programmer may tune it for specific needs
Aims for fast developed single-language solutions
Using Javascript on client and server allows some level of code sharing
Example 4
by Martin Kruliš (v1.5)

18. Python Flask Django WSGI micro framework Also includes web server
Suitable for small REST APIs
Django
Complex web framework
MTV (Model-Template-View) pattern
Also can be deployed via WSGI or using integrated server
by Martin Kruliš (v1.5)

19. Statistics
28th of November, 2018
Other sources may give you different numbers (it is statistics after all and it depends on your data selection process); however, PHP was the most used technology in all surveys that I have seen.
Of course, this is biased as it counts both small and large project as one. Furthermore, it includes historical sites still running.
by Martin Kruliš (v1.5)

20. Web Application Architectures
Client-server Architectures
Strict separation of two application parts
Client - data presentation, user interface
Server – business logic, data storage
Both sides are connected via specific API (HTTP)
The communication latency and overhead influence the application design
Three-tier architecture
Presentation (client), business logic (server), database (server, possibly dedicated machine)
Three tier architecture allows also better scaling of server tiers. Database tier may be moved to a dedicated server or even replicated. Similarly, the business logic may be divided further in services running on different machines or even in cloud.
by Martin Kruliš (v1.5)

21. Client User Interface Actions Hyperlinks Forms JavaScript
Initiates browsing (GET request to prepared URL)
Forms
GET request to assembled URL (with data from user)
POST request (sends data and retrieves new page)
JavaScript
Any HTTP request on background (AJAX)
Triggered by any event
Update the web page in the browser (via DOM API)
by Martin Kruliš (v1.5)

22. Web Application Architectures
Traditional (CGI-like) Applications
Data management
Business logic
Authentication/authorization
HTML rendering
Clicks on hyperlink
Submits a form
HTTP Request
new URL
(possibly form data)
Web Server
Client
HTTP Response
New HTML page
New page is displayed (browsing)
by Martin Kruliš (v1.5)

23. Web Application Architectures
Data management
Business logic
Authentication/authorization
HTML rendering JSON/XML/… serialization
AJAX-enhanced Applications
JavaScript performs AJAX request
HTTP Request
AJAX target URL
(possibly form data)
Clicks on hyperlink
Submits a form
HTTP Request
new URL
(possibly form data)
Web Server
Client
HTTP Response
New HTML page
HTTP Response
JSON, XML, HTML fragment, …
New page is displayed (browsing)
JavaScript alters page based on the response
by Martin Kruliš (v1.5)

24. Web Application Architectures
AJAX-only Applications
Data management
Partial business logic
Authentication/authorization JSON/XML/… serialization
JavaScript performs AJAX request
HTTP Request
AJAX target URL
(possibly form data)
Page is opened or refreshed
HTTP Request
URL of bootstrap page
Web Server
Client
HTTP Response
Bootstrap HTML page
HTTP Response
JSON, XML
JavaScript alters page based on the response (no browsing)
by Martin Kruliš (v1.5)

25. Web Application Architectures
Single Page Applications
AJAX request ~ database operation
HTTP Request
AJAX target URL
(possibly form data)
REST (CRUD) API
Thin layer above database
Authentication/authorization
Page is opened or refreshed
HTTP Request
URL of bootstrap page
Web Server
Client
HTTP Response
Bootstrap HTML page
HTTP Response
JSON, XML
JavaScript handles almost all business logic
by Martin Kruliš (v1.5)

26. Server-side Scripting
Specific Issues of the Server Side
Traditional (CGI-like) web applications
Work in batches – client wants to perform a large task with each HTTP request
Download a page full of formatted data
Submit a form and generate a response
Difficult state management (HTTP is stateless)
AJAX - Code replication issues (at client and server side)
Modern (single page) web applications
Server is just a remote API for AJAX calls
Difficult to integrate AJAX API into existing applications, or create applications that work both ways
In the remainder of the course, we will focus on traditional CGI-like applications.
by Martin Kruliš (v1.5)

27. Application Design Event-driven Desktop GUI Application Event Event
Events are processed sequentially
Event
GUI
Main Loop
Background Processing
Event
All components can access main memory
Operating Memory
Application State
by Martin Kruliš (v1.5)

28. Application State Data Directly Related to User Interactions
Logical and UI State (non-persistent data)
Focus, mouse cursor location
Values filled in form controls
Which application screen is visible
Work in progress in an open transaction …
Persistent data
Has to survive application shutdown
Application files or database
by Martin Kruliš (v1.5)

29. Web Application State Logical State and User Interface State
Component Micro-States
Focus, open-selection of a control box, …
Handled in HTML/CSS or with little help from JavaScript
User Interface State
Selected screen, user transaction progress, …
URL, Cookies, Sessions, LocalStorage, …
Business Logic State, Complex UI States
E.g., Modifications in a opened data file
Added to persisted state, but localized for each user
To make things even more complicated, we have to consider scenarios like when the user clicks the refresh button, moves back and forth in history or if the network fails when a request is being processed.
by Martin Kruliš (v1.5)

30. Web Application State Traditional Web Application Event Example 5
Database, Files,
Session storage
URL
Cookies
(POST Data)
Application
State
Browser
Application
State
Check integrity
Event
Batch-like processing
New
State
Browsing, submitting form
Processing Script
Memory
Example 5
Serialization/deserialization, encoding, …
by Martin Kruliš (v1.5)

31. Discussion
by Martin Kruliš (v1.5)