II Semester – 2023-2024

Web Application Development

Course Introduction

CS E 2 0 3 0

II-Semester 2023-2024 Myanmar Institute of information technology

 Course Description

▪ Client-side programming; JavaScript; Server-side programming for web

applications; JSP, Servlets; Database connectivity; special topics involving
recent advances in web programming languages, systems, and
methodologies; emerging standards; best practices; using Open Source
tools. Programming assignments that involve using appropriate web
programming tools and applications.

II-Semester 2023-2024 Myanmar Institute of information technology

 Course Objectives
▪ Focus on client-side and server-side web applications

▪ Approach advanced features and concepts of JavaScript

▪ Illustrate web applications using java technologies

▪ Describe Model View and Controller (MVC) architecture in Java Server Pages
(JSP)

▪ Explain importance of Asynchronous JavaScript and XML in web development

▪ Apply web server application by connecting database

II-Semester 2023-2024 Myanmar Institute of information technology

 Assessment Plan

Assessment Dates Time Total Marks Remarks

Paper/Computer
Test I .7.2024 50 minutes 10
based Test
Assignments and Paper/Computer
- - 25
Homework based Test
Mid Semester Paper/Computer
.8.2024 2 hours 25
Examination based Exam
Comprehensive Paper/Computer
.9.2024 3 hours 40
Examination based Exam
Total Marks 100

II-Semester 2023-2024 Myanmar Institute of information technology

 Web Development Fundamental

II-Semester 2023-2024 Myanmar Institute of information technology

 Web Concepts and Terminology
▪ World Wide Web
▪ an international hypertext system
▪ links together millions of documents
▪ refers to all the public websites or pages that users can access on their local
computers and other devices through the internet.
▪ Hypertext link
▪ a word or a picture
▪ requests a different file from the internet when you click on it
▪ Hypertext Markup Language (HTML)
▪ a collection of tags
▪ create formatted hypertext documents

II-Semester 2023-2024 Myanmar Institute of information technology

 Web Concepts and Terminology
▪ Web page
▪ a document created using HTML

▪ Website
▪ a collection of related pages
▪ are accessed through the Internet by addressed called Uniform Resource Locators (URLs)

▪ Web server
▪ web pages and websites can be stored on a web server on the Internet

▪ Web browser
▪ a program that displays the web pages it retrieves

II-Semester 2023-2024 Myanmar Institute of information technology

 The Client/Server Model of the Web

Image source - https://networkdirection.net/wp-content/uploads/Theory/HTTP-Client-Server.png

II-Semester 2023-2024 Myanmar Institute of information technology

 Web Application Development

II-Semester 2023-2024 Myanmar Institute of information technology

 What is Web Application

▪ Popular web applications include Gmail, Google Drive,

Facebook, LinkedIn, Microsoft 365 etc.

▪ Some of the core benefits that have made web applications so

popular are:
▪ Web apps run in a browser; no need of installing to the device.
▪ Web applications run on multiple platforms regardless of OS or device
as long as the browser is compatible
▪ Web Applications can be accessed from any device from anywhere.

II-Semester 2023-2024 Myanmar Institute of information technology

 Web Server and Application Server

II-Semester 2023-2024 Myanmar Institute of information technology

 Web Server and Application Server

▪ Web server

▪ A web server is a software component that delivers static data like images,
files, and text in response to client requests.

▪ Application Server

▪ An application server adds business logic to compute the web server's

response.

II-Semester 2023-2024 Myanmar Institute of information technology

 How a web server works?

▪ The browser uses the URL to find the server’s IP address.

▪ The browser sends an HTTP request for information.

▪ The web server communicates with a database server to

find the relevant data.

▪ The web server returns static content such as HTML pages,

images, videos, or files in an HTTP response to the
browser.

▪ The browser then displays the information to you.

II-Semester 2023-2024 Myanmar Institute of information technology

 How an application server works?

▪ The browser uses the URL to finds the server’s IP address.

▪ The browser sends an HTTP request for information.

▪ The web server transfers the request to the application server.

▪ The application server applies business logic and communicates

with other servers and third-party systems to fulfill the request.

▪ The application server renders a new HTML page and returns it

as a response to the web server.

▪ The web server returns the response to the browser.

▪ The browser displays the information to you.

II-Semester 2023-2024 Myanmar Institute of information technology

 Java Web Application

II-Semester 2023-2024 Myanmar Institute of information technology

 Basic Java Web Application Process

Image source - https://docs.oracle.com/javaee/6/tutorial/doc/geysj.html

II-Semester 2023-2024 Myanmar Institute of information technology

 Model-View-Controller Design

image source - https://www.geeksforgeeks.org/mvc-framework-introduction

II-Semester 2023-2024 Myanmar Institute of information technology
 Front-end Vs Back-end
▪ The modern software architecture has two main components:
▪ Server-side/Back-end: Anything that happens in a remote computer not directly used
by the end user
▪ Client-side/Front-end: Anything that happens on the end-user device (desktop/laptop,
mobile, etc.)

▪ Modern client-side/front-end will use web technologies such as HTML, CSS

and JavaScript.
▪ Java Servlet technology and JavaServer Pages (JSP) are server-side
technologies.

II-Semester 2023-2024 Myanmar Institute of information technology

 JavaScript - Client Side Programming

II-Semester 2023-2024 Myanmar Institute of information technology

 Client Side Programming
▪ Client-side programming is writing code that will run on
the client, and is done in languages that can be executed by the
browser, such as JavaScript.
▪ Uses
▪ Make interactive webpages.

▪ Make stuff happen dynamically on the web page.

▪ Send requests to the server, and retrieve data from it.

▪ Provide a remote service for client-side applications, such as software

registration, content delivery, or remote multi-player gaming.

II-Semester 2023-2024 Myanmar Institute of information technology

 JavaScript in HTML

▪ Two ways to use the <script> element

▪ Internal JavaScript: JavaScript can be added directly to the HTML file by writing the
code inside the <script> tag. The <script> tag can be placed either inside <head> or the
<body> tag according to the need.
<script type=“text/javascript”>
function Hello(){
}
</script>

▪ External JavaScript: The other way is to write JavaScript code in another file having a
.js extension and then link the file inside the <head> or <body> tag of the HTML file in
which we want to add this code.
<script type=“text/javascript” src=“example.js”> </script>
II-Semester 2023-2024 Myanmar Institute of information technology
 Features of JavaScript
▪ JavaScript is not Java. They are completely different
languages and serve entirely different purposes.

▪ Light Weight Scripting language

▪ Dynamic Typing

▪ Object-oriented programming support

▪ Platform Independent

▪ Interpreted Language (not complied)

II-Semester 2023-2024 Myanmar Institute of information technology
 Example of JavaScript (Internal)

<html>
<head>
<script>
function speak() {
alert('Hello')
}
</script>
</head>
<body>
<button onclick="speak()">Click Me</button>
</body>
</html>

II-Semester 2023-2024 Myanmar Institute of information technology

 Example of JavaScript (External)
<!DOCTYPE html>
<html>

<head>
<title>Javascript External Script</title>
<script src = "/html/script.js" type = text/javascript"/></script>
</head>

<body>
<input type = "button" onclick = "Hello();" name = "ok" value = "Click Me" />
</body>

</html>

function Hello() {
script.js alert("Hello, World"); External .js file
}

II-Semester 2023-2024 Myanmar Institute of information technology

 Development Tools

II-Semester 2023-2024 Myanmar Institute of information technology

 Tools

▪ JavaScript Editors:
▪ Notepad++
▪ Visual Studio Code (https://code.visualstudio.com/download)

▪ Web Browsers:
▪ Google Chrome
▪ Mozilla Firefox

▪ Java IDEs:
▪ Eclipse

II-Semester 2023-2024 Myanmar Institute of information technology

 Homework

II-Semester 2023-2024 Myanmar Institute of information technology

 Homework - HTML

II-Semester 2023-2024 Myanmar Institute of information technology