Lecture 2

Web Applications
DA3331 - Business Application Development
Supun Gothama
 Introduction
• A web application is an application software that runs on a
web server
• Accessed by the user through a web browser with an active
internet connection
• Examples:
− Gmail, Moodle, online banking, online shops etc
 Characteristics
• Web applications run on any platform regardless of OS
or device as long as the browser is compatible
• They are not installed on the user’s hard drive
• All users access the same version
• Sometimes has 2 separate components
− Backend application server
− Frontend application
How Web Apps Work?
 How Web Apps Work?
A typical web application flow looks like:
• User triggers a request to the web server over the Internet,
through the frontend app running on a web browser
• Web server forwards this request to the web application
• Web application performs the requested task
− Such as querying the database or processing the data
− Then sends back the results of the requested data
 How Web Apps Work?
• Web server responds back to the browser with the requested
information
• Browser will display the information as web page
− Sometimes frontend application will process the response
information
 Web Servers
• A web server is software and hardware that uses HTTP
(Hypertext Transfer Protocol) and other protocols to
respond to client requests made over the World Wide Web
• Generally accessed using the domain names of website or
an IP address
• Primary function is to process and deliver web pages
• One web server can serve multiple server applications
 Web Servers
• Able to map path component of a URL into:
− A file system resource
− An internal or external program name
• Example: http://www.example.com/path/file.html
− May be mapped to /home/www/path/file.html
• Widely used web server software:
− Apache
− nginx
 Developing Web Applications
• Can be developed using different technologies and
programming languages
− Server side: PHP, Java, Python, .Net
− Browser: HTML, CSS, JavaScript
• Complex web applications are sometimes broken to 2
separate components
− Backend
− Frontend
 Developing Web Applications
• Web application frameworks
− Laravel
− Django
− Spring .etc
• Frameworks handle most of the basic tasks such as
database access, URL mapping and session management
 Developing Web Applications
• In this course we will learn to develop simple applications
− HTML
− CSS
− Django
 Authentication Methods
• Authentication is the process of verifying a user's identity
before they can access a web application
• It's a critical part of ensuring the security and privacy of
web applications
• Authentication vs. Authorization
− Authentication is verifying who a user is,
− Authorization is verifying what users can and cannot access
 Password-Based Authentication
• User enters a username and password
• The server verifies credentials against a database (often
hashed & salted)
• Hashing passwords using algorithms like bcrypt, Argon2, or
PBKDF2
• Multi-factor authentication (MFA) for additional security
 Session-Based Authentication
• The server creates a session ID upon login and stores it in a
database
• The client receives a session cookie, which is sent with each
request
• Can easily revoke sessions and logging out from all devices
• Requires server-side storage, making it less scalable
 Token-Based Authentication
• After successful login, the server issues a JSON Web Token
(JWT)
• The client stores this token and includes it in requests for
authentication
• The server verifies the token without storing session data
• Stateless, scalable authentication. Useful for APIs &
microservices.
 OAuth 2.0 & OpenID
• Third-party authentication (Google, Facebook, GitHub, etc.)
• OAuth 2.0 handles authorization, while OpenID Connect adds
authentication
• User logs in via Google/Facebook
• Google/Facebook issues an access token
• The web app uses this token to authenticate the user
• Users don’t need to remember multiple passwords
OAuth 2.0 & OpenID
Web App Trends
 Responsive Designs
• Responsive web design is about creating web pages that look
good on all devices
− Mobile
− Pc
• Improves user experience
• Now more of a standard than a trend
• Search engines demotes unresponsive websites
Responsive Designs
 Single Page Applications
• A single-page application is a web app that doesn't need to
reload the page during its use
− Retrieve data from server behind the scene
− Web page changes dynamically in browser according to the data
− Feel more like a desktop/mobile app
− Enabled by Javscript frameworks: Vue.JS, AngularJS, React .etc
− Examples:
 Gmail, Google Maps, Facebook, Twitter
 JavaScript Frameworks
• Aimed to make frontend development process easier and
cheaper
• Improve user experience
• Facilitate single page applications
• Examples:
− Vue
− React
− Angular
 Progressive Web Applications
• PWAs are web applications that look and feel like an
app on mobile devices
• Can be installed on a device and appears just like a
normal app
• Faster loading times
• May work offline
• Examples:
− AliExpress, Flipkart
☑ Web servers

☑ Web applications

☑ Current Trends

Summary