Web Application and Development MMC205
Module 1
Introduction to Web Development and HTML5
What is Web Development?
eb Development refers to the process of building and maintaining websites and web applications. It
W
involves tasks like writing markup and coding, designing user interfaces, optimizing website performance,
and ensuring secure and scalable online solutions.
Categories of Web Development:
1. Front-End (Client-Side):
Thisisthepartofthewebsiteusersinteractwithdirectly.Itincludeseverythingtheuserexperiences:
text, images, sliders, buttons, and navigation menus.
○ Technologies: HTML, CSS, JavaScript.
○ Example: Designing a form that users can fill out and submit.
2. Back-End (Server-Side):
It refers to the server, databases, and application logic that handle and respond to user requests.
○ Technologies: PHP, Java, Python, [Link], SQL, etc.
○ Example: Storing form data in a database when a user submits it.
3. Full-Stack:
A developer with expertise in both front-end and back-end technologies.
○ E xample: A full-stack developer can build an entire website, from designingtheinterfaceto
connecting it with a database.
Core Web Technologies
1. HTML (HyperText Markup Language):
TML is the backbone of all web pages. It uses a system of elementsor"tags"todefinethestructureand
H
content on the web. These tags help browsers understand and display text, images, links, and other resources.
ATME College of Engineering Department of MCA 1
Web Application and Development MMC205
● Headings ( to ):Represent titles or subtitles.
● Paragraphs ():Used to display blocks of text.
● Images ():Embed pictures into a web page.
● Hyperlinks ():Allow users to navigate between pagesor websites.
HTML5 is the latest version, introducing semantic tags like , , , and to enhance accessibility and structure.
2. CSS (Cascading Style Sheets):
SScontrolsthepresentationofwebcontent.ItallowsyoutostyleHTMLelementsbyassigningproperties
C
like color, font, margin, padding, layout models (grid or flexbox), and animations.
There are three types of CSS:
● Inline CSS:Directly within the HTML element.
● Internal CSS:In the section of the HTML document.
● External CSS:In a separate .css file linked to theHTML document.
CSS frameworks like Bootstrap and utility-first tools like Tailwind CSS are widely used for faster and
r esponsive design.
3. JavaScript:
JavaScript is a scripting language that brings websites to life by making them interactive. It can:
● Validate user input in forms.
● Update content dynamically without reloading the page (e.g., AJAX).
● Animate elements or slideshows.
● Handle events like clicks, mouse movements, and keyboard inputs.
odern JavaScript includes features like ES6 syntax, modules, and support for building Single Page
M
Applications (SPAs)using frameworks like React andAngular.
4. Web Browsers:
ATME College of Engineering Department of MCA 2
Web Application and Development MMC205
Web browsers are applications that fetch, interpret, and render web content.
● Rendering Engine:Converts HTML/CSS into a visual display.
● JavaScript Engine:Executes scripts for dynamic behavior.
Popular Browsers:
● Google Chrome:Known for speed and strong developertools.
● Mozilla Firefox:Open-source and privacy-focused.
● Safari:Default browser for Apple devices.
● Microsoft Edge:Successor to Internet Explorer withChromium-based rendering.
rowsers also support developer tools for inspecting elements, debugging code, and monitoring network
B
activity.
Understanding Web Protocols
HTTP (HyperText Transfer Protocol):
protocol used for transferring hypertext (HTML) between client and server. It is stateless,meaningeach
A
request is independent.
HTTPS (HTTP Secure):
A secure version of HTTP that uses SSL/TLS encryption to protect data transmission.
TCP/IP (Transmission Control Protocol/Internet Protocol):
communication protocol that defines how data should be packetized, addressed, transmitted, routed, and
A
received.
FTP (File Transfer Protocol):
Used for transferring files between computers on a network, commonly used to upload files to a web server.
DNS (Domain Name System):
service that translates human-readable domain names(like[Link])intoIPaddressesusedby
A
computers.
ATME College of Engineering Department of MCA 3
Web Application and Development MMC205
Client-Server Architecture
Definition:
lient-serverarchitectureisacomputingmodelwhereaclient(e.g.,awebbrowser)requestsservicesordata
C
from a server, which then processes the request and returns a response. It's a fundamental model for
distributed computing and networking, enabling communication and data exchange between different
applications.
A model in which a client (browser) sends requests to a server, and the server responds with data.
Key Components:
● Client:The user's device or browser that initiatesrequests.
● S erver:Acomputerthatreceivesclientrequestsandreturnstheappropriateresources(HTMLpages,
data, etc.).
Process:
1. User types a URL in the browser (client).
2. The request goes to the server.
3. The server processes the request.
ATME College of Engineering Department of MCA 4
Web Application and Development MMC205
4. The server sends the response (usually HTML).
5. The browser renders and displays the page.
Server Types:
● Web Server:Hosts and serves HTML/CSS/JS (e.g., Apache,Nginx).
● Application Server:Executes server-side code (e.g.,Tomcat, [Link]).
● Database Server:Stores and retrieves data (e.g.,MySQL, Oracle).
Front-End Development
Definition:
ront-enddevelopmentisthecreationofthevisualandinteractivepartofwebsitesthatusersdirectlyinteract
F
with.
Responsibilities:
● Implementing UI/UX designs.
● Making websites responsive across devices.
● Writing clean and accessible code.
Tools & Technologies:
● Languages:HTML, CSS, JavaScript
● Frameworks/Libraries:React, Angular, [Link]
● Design Tools:Bootstrap, Tailwind CSS
Workflow:
1. Analyze UI/UX designs.
ATME College of Engineering Department of MCA 5
Web Application and Development MMC205
2. Structure content with HTML.
3. Style it with CSS.
4. Add interactivity with JavaScript.
Back-End Development
Definition:
ack-enddevelopmentinvolvesserver-sidelogic,databaseinteractions,andAPIsthatpowerthefunctionality
B
of web applications.
Responsibilities:
● Writing logic to process user data.
● Ensuring secure authentication and authorization.
● Interacting with databases to retrieve or store data.
Technologies:
● Languages:PHP, Java, Python, [Link]
● Databases:MySQL, PostgreSQL, MongoDB
● Tools:Postman (API testing), Git (version control),IDEs like VS Code
Concepts:
● REST APIs:Communication interfaces that allow client-serverdata exchange.
● CRUD:Create, Read, Update, Delete operations in databases.
● MVC:A software architecture pattern (Model-View-Controller).
ATME College of Engineering Department of MCA 6
Web Application and Development MMC205
Web Development Lifecycle
1. Requirement Gathering:
Identify the goals, audience, and functionality required in the website.
2. Design:
Create wireframes, UI designs, and navigation structures.
3. Development:
Implement front-end and back-end components based on the design.
4. Testing:
Check for bugs, browser compatibility, performance, and security vulnerabilities.
5. Deployment:
Make the website live using hosting services (e.g., GitHub Pages, AWS, DigitalOcean).
6. Maintenance:
Regularly update content, fix issues, and improve performance.
Methodologies:
ATME College of Engineering Department of MCA 7
Web Application and Development MMC205
● Waterfall:Linear and sequential.
● Agile:Iterative with continuous feedback.
● DevOps:Focused on collaboration between developmentand operations.
Roles, Skills & Future Scope
Roles:
● Front-End Developer:Specializes in user interfaces.
● Back-End Developer:Manages server-side logic.
● Full-Stack Developer:Expert in both front-end andback-end.
● UI/UX Designer:Designs user-centric layouts.
● QA Tester:Ensures the quality and functionality ofapplications.
Skills in Demand:
● Git and GitHub for version control
● API integration
● Web security best practices
● Mobile-first and responsive design
● SEO (Search Engine Optimization)
Future Scope:
● Progressive Web Apps (PWAs):Web apps with native-likeexperience.
● WebAssembly:High-performance web applications.
● AI Integration:Chatbots, recommendation systems.
● Serverless Architecture:Functions as a Service (FaaS)with providers like AWS Lambda.
ATME College of Engineering Department of MCA 8
Web Application and Development MMC205
HTML5 Fundamentals
TML5 is the fifth version of Hypertext Markup Language (HTML), a standard language used to
H
structure webpages. It defines how content on a webpage should be structured and displayed. Here are
some key points of HTML5
● ultimedia Support:Embeds audio and video withoutplugins.
M
● New Form Controls:Includes input types like dateand email.
● Web Storage:Stores data offline for better performance.
● Semantic Elements:Uses tags like <header> and <footer>for better structure.
● Improved Performance:Faster and more efficient, especiallyon mobile.
TML5isthefifthandlatestversionofHTML(HyperTextMarkupLanguage),whichstructurescontent
H
for the web.
I t enhances web development by providing semantics, multimedia support, API integration, and
cross-platform compatibility.
HyperText Markup Language (HTML)
HyperText Markup Language (HTML)
TML5 is the latest evolution of the standard that defines HTML. The
H
term represents two different concepts.
● New version of the language HTML, with new elements, attributes, and behaviors
● LargersetoftechnologiesthatallowsthebuildingofmorediverseandpowerfulWebsites
and applications.
This set is sometimes called HTML5 & friends and often shortened to just HTML5.
Using the Version 5:
The DOCTYPE declaration for HTML5:
<!DOCTYPE html>
Character encoding (Character Set):
<meta charset=”UTF-8”
First Program:
ere is a simple HTML5 example
H
<!DOCTYPE html>
<h tml>
<h
ead>
<m
etacharset="UTF-8">
ATME College of Engineering Department of MCA 9
Web Application and Development MMC205
m
< etaname="viewport" content="width=device-width, initial-scale=1.0">
<t itle>Simple HTML Page</title>
</head>
<b
ody>
<h eader>
<h 1>Hello, World!</h1>
</header>
<m ain>
<p>
Itenhanceswebdevelopmentbyprovidingsemantics,multimediasupport,APIintegration,and
cross-platform compatibility.</p>
</main>
<f ooter>
<p
></p>
</footer>
/body>
<
</html>
New HTML5 Elements
Semantic elements <header>, <footer>, <article>, and <section>
Attributes of form elements number, date, time, calendar, and range
svg>(ScalableVectorGraphics)and<canvas>(usingjava
<
Graphic elements
script – on the fly)
Multimedia elements <audio>, <video>, <embed>, <track>, <source>
emantic HTML elements are those that clearly describe their meaning in a human- and
S
machine-readable way.
Elements such as <header>, <footer> and <article> are all considered semantic because they accurately
describe the purpose of the element and the type of content that is inside them.
hat are Semantic Elements?
W
HTML was originally created as a markup language to describe documents on the early internet. As the
internet grew and was adopted by more people, its needs changed.
Wheretheinternetwasoriginallyintendedforsharingscientificdocuments,nowpeoplewantedtoshareother
things as well. Very quickly, people started wanting to make the web look nicer.
Becausethewebwasnotinitiallybuilttobedesigned,programmersuseddifferenthackstogetthingslaidout
in different ways. Ratherthanusingthe<table></table>todescribeinformationusingatable,programmers
would use them to position other elements on a page.
ATME College of Engineering Department of MCA 10
Web Application and Development MMC205
stheuseofvisuallydesignedlayoutsprogressed,programmersstartedtouseageneric“non-semantic”tag
A
like <div>. They would often give these elements a class or id attribute to describe their purpose. For
example, instead of <header> this was often written as <div class="header">.
As HTML5 is still relatively new, this use of non-semantic elements is still very common on websites today.
ist of new semantic elements
L
The semantic elements added in HTML5 are:
● article>
<
● <aside>
● <details>
● <figcaption>
● <figure>
● <footer>
● <header>
● <main>
● <mark>
● <nav>
● <section>
● <summary>
● <time>
lements such as <header>, <nav>, <section>, <article>,<aside>,and<footer>actmoreorlesslike<div>
E
elements. They group other elementstogetherintopagesections.Howeverwherea<div>tagcouldcontain
any type of information, it is easy to identify what sort of information would go in a semantic <header>
region.
hy use semantic elements?
W
Tolookatthebenefitsofsemanticelements,herearetwopiecesofHTMLcode.Thisfirstblockofcodeuses
semantic elements:
<header></header>
<section>
<article>
<figure>
<img>
<figcaption></figcaption>
</figure>
</article>
</section>
<footer></footer>
Whilst this second block of code uses non-semantic elements:
<div id="header"></div>
<div class="section">
ATME College of Engineering Department of MCA 11
Web Application and Development MMC205
<div class="article">
<div class="figure">
<img>
<div class="figcaption"></div>
</div>
</div>
</div>
<div id="footer"></div>
Advantages of Using Semantic Elements in HTML5
1. Improved Readability
● Semantic elements make your code easier to read and understand.
● For example, elements like <header>, <nav>, <section>, and <footer> clearly indicate their
role in the layout.
● Thisisespeciallyhelpfulwhenreadingthroughlargeblocksofcode,asitimprovestheoverall
developer experience.
2. Greater Accessibility
● Semanticelementsareeasierforsearchenginesandassistivetechnologies(likescreenreaders)
to interpret.
● This enhances the browsing experience for users with disabilities and improves SEO.
3. Code Consistency
● Without semantic tags, developers might write:
● <div class="header">, <div id="header">, <div class="head">, or just <div>.
● With semantic tags like <header>, there is a clear standard, leading to more consistent and
maintainable code.
🔹 Introduction of Semantic Elements in HTML5
I nOctober 2014, HTML5 was introduced as an upgradeto HTML4.
●
● HTML5 includednew semantic elementssuch as:
● <header>, <footer>, <nav>, <section>, <article>, and more.
● Manydevelopersstillwonderabouttheneedfortheseelements,especiallysincetheydon’tchangethe
appearance of the content directly.
🔹 Difference Between <section> and <article>
Feature <section> <article>
Definition A thematic grouping of content
A self-contained, independently
distributable piece of content
Use Case U
sed tobreakupcontentintorelated U
sed for blog posts, news articles, user
groups or themes comments, etc.
eusabili Usually not meant to be reused
R esigned to be reusable or shareable
D
ty independently
ATME College of Engineering Department of MCA 12
Web Application and Development MMC205
Example A chapter in a documentation page A news story on a website
1 . What is an HTML Form?
AnHTMLformisasectionofadocumentthatcontainsinteractivecontrolsthatenableuserstosubmitdata
to a web server.
Forms are used for:
● ollecting data (e.g., names, email, password)
C
● Submitting surveys
● Registering accounts
● Logging in to systems
2. Structure of an HTML Form
✅
Syntax:
html
CopyEdit
<form action="[Link]" method="post">
<!-- Input fields go here -->
</form>
✅ Key Attributes of <form>:
Attribute Description
action Specifies the URL where the form data will be sent for processing.
method efines the HTTP method: GET or POST.
D
GET: Appends data in the URL.
POST: Sends data securely in the request body.
target pecifies where to open the response aftersubmittingtheform(e.g.,_blank,
S
_self, _parent, _top).
a utocomplet Specifies whether the form should have autocomplete on (on) or off (off).
e
🔢
3. Form Elements
Form elements are the building blocks of the form. They include:
● input> – used for most types of data entry
<
● <textarea> – multi-line text input
● <button> – button to submit or reset
● <select> – dropdown menu
● <option> – options in dropdown
● <label> – defines label for input fields
● <fieldset> – groups related fields
ATME College of Engineering Department of MCA 13
Web Application and Development MMC205
● <legend> – caption for a group of fields
🛠️
4. HTML5 Input Types
HTML5 introduced several new input types to make form handling easier and more specific.
✅ Basic Input Types:
Type Description
text A single-line text input field.
p asswor A single-line input that hides characters.
d
submit A button to submit the form.
reset A button to reset the form values.
radio llows the user to choose one of many
A
options.
c heckbo A
llows the user to choose multiple
x options.
button general button (often used with
A
JavaScript).
New HTML5 Input Types:
Input Type Description
email alidates input to ensure it's a properly formatted
V
email.
url Validates input to ensure it's a properly formatted URL.
tel For telephone numbers (no built-in validation).
number Accepts numeric values with optional min, max, step.
range Displays a slider control for numeric value selection.
date Lets users select a date from a calendar picker.
month Allows the user to select a month and year.
week Allows the user to select a week of the year.
time Time selection input.
d atetime-loc Date and time input (local timezone).
al
color Lets users pick a color from a color picker.
search esigned for search boxes (may style differently in
D
browsers).
file Allows users to upload files from their computer.
hidden Hidden from the user but still submitted with the form.
ATME College of Engineering Department of MCA 14
Web Application and Development MMC205
TML5 Form Validation
H
HTML5 providesbuilt-in validationwithout JavaScript: 🧠 4. Difference between Audio and Video Tags
Feature <audio> Tag <video> Tag
Purpose For playing sound For playing visual content
edia
M MP3, OGG, WAV MP4, WebM, OGG
Support
Attributes c ontrols, loop, A ll audio attributes + poster, width,
muted height
HTML Multimedia
● Multimedia on the web is sound, music, videos, movies, and animations.
● Web pages often contain multimedia elements of different types and formats.
● Examples: Images, music, sound, videos, records, films, animations, and more.
● Multimedia elements (like audio or video) are stored in media files.
● The most common way to discover the type of a file, is to look at the file extension.
● Multimedia files have formats and different extensions like: .swf, .wav, .mp3, .mp4,
.mpg, .wmv, and .avi.
● Multimedia refers tosound, music, videos, movies, and animationsused on web pages.
● HTML5 supports multimedianatively(without pluginslike Flash).
🎧 HTML5 Audio Element
● Used to embedsound content(like music, podcasts).
● Tag:<audio>
● Common formats:.mp3,.wav,.ogg
Syntax:
h tml
CopyEdit
<audio controls>
<source src="song.mp3" type="audio/mpeg">
</audio>
Attributes:
● controls: Shows play, pause, volume options.
ATME College of Engineering Department of MCA 15
Web Application and Development MMC205
● autoplay: Starts playing automatically.
● loop: Repeats audio.
● muted: Starts muted.
🎬 HTML5 Video Element
● Used to embedvideos(movies, clips).
● Tag:<video>
● Common formats:.mp4,.webm,.ogg
Syntax:
h tml
CopyEdit
<video width="320" height="240" controls>
<source src="video.mp4" type="video/mp4">
</video>
Attributes:
● controls: Shows play/pause, volume, etc.
● autoplay: Starts playing automatically.
● loop: Repeats video.
● muted: Mutes video on load.
● poster: Sets a thumbnail image before the video plays.
🗂️ Common Multimedia File Extensions
● Audio:.mp3,.wav,.ogg
● Video:.mp4,.webm,.ogg,.avi,.mov
ATME College of Engineering Department of MCA 16
Web Application and Development MMC205
📌 Why Important?
● Enhancesuser engagement.
● Useful fortutorials, advertisements, and presentations.
● Native HTML5 support ensurescross-device compatibility.
Canvas and SVG for graphics
Canvas
● Used to draw graphics on a Web page.
● The HTML <canvas> element is used to draw graphics, on the fly, via JavaScript.
● The <canvas> element is only a container for graphics. Use JavaScript to actually draw the
graphics.
● Canvas has several methods for drawing paths, boxes, circles, text, and adding images.
A canvas is a rectangular area on an HTML page. By default, a canvas has no border and no
content.
● The markup looks like this:
<canvas id="myCanvas" width="200" height="100"></canvas>
In HTML5, two powerful technologies are available to create and managegraphics and drawings:
1. Canvas– For drawing graphics using JavaScript.
2. SVG (Scalable Vector Graphics)– For defining vector-basedgraphics using XML.
Both are used to create shapes, images, charts, and animations directly in the browser without any plugins.
🎨 1. HTML5<canvas>Element
✅ What is Canvas?
● The<canvas>element is adrawing surfacein HTML5.
● It allows you to draw graphics using JavaScript (lines, shapes, text, images, animations).
● Think of it like ablank board, where you paint usingJavaScript.
ATME College of Engineering Department of MCA 17
Web Application and Development MMC205
✅ Syntax:
h tml
<canvas id="myCanvas" width="400" height="300"></canvas>
To draw on it, you must use JavaScript:
javascript
const canvas = [Link]("myCanvas");
const ctx = [Link]("2d");
// Drawing a rectangle
[Link] = "blue";
[Link](50, 50, 150, 100);
✅ Common Methods in Canvas:
Method Description
fillRect(x, y, w, h) Draws a filled rectangle
strokeRect(x, y, w, h) Draws a rectangle border
clearRect(x, y, w, h) Clears part of the canvas
beginPath() Starts a new path for drawing
moveTo(x, y) Moves the pen to (x, y)
lineTo(x, y) Draws a line from current to (x, y)
arc(x, y, r, sA, eA) Draws an arc or circle
fillText(text, x, y) Writes filled text
✅ Features of Canvas:
● Pixel-based drawing
● Great for games, visualizations, and image editing
● Fast rendering butnot scalable(fixed resolution)
● Requires JavaScript to draw anything
ATME College of Engineering Department of MCA 18
Web Application and Development MMC205
🖼️ 2. HTML5 SVG – Scalable Vector Graphics
✅ What is SVG?
● SVG stands forScalable Vector Graphics.
● It usesXML syntaxto describe graphics like circles,rectangles, lines, and paths.
● It’sresolution-independent– scales without losingquality.
✅ Common SVG Elements:
Tag Description
<svg> Container for SVG graphics
<rect> Draws rectangles
<circle> Draws circles
<line> Draws straight lines
<ellipse> Draws ellipses
<polygon> Draws multiple connected lines
<text> Adds text
<path> Draws complex shapes
✅ Features of SVG:
● Vector-based (doesn’t lose quality when zoomed)
● Easy to animate and style with CSS or JavaScript
● Accessible and searchable (since it’s XML-based)
● Ideal for logos, charts, and UI icons
🆚 Canvas vs SVG – Comparison
Feature Canvas SVG
ATME College of Engineering Department of MCA 19
Web Application and Development MMC205
Type Pixel-based (Raster) Vector-based
Drawing JavaScript required XML/HTML tags
Resolution Not scalable (fixed size) Scalable without quality loss
Performance Faster for thousands of objects Slower with many complex elements
Interactivity Requires manual event handling Easy with CSS/DOM events
Use Case Games, image editing, particle effects Charts, diagrams, icons, infographics
✍️ Summary
● Canvasis great for real-time, dynamic, and complexpixel drawings.
● SVGis ideal for scalable, static, or interactive graphics using HTML structure.
● Both are essential in modern web development depending on the use case.
Geolocation API
he Geolocation API is a powerful tool that enables web applications to access the user’s geographical
T
location. This can significantly enhance the functionality of location-based services like weather forecasts,
local news, proximity-based searches, and mapping applications.
● t rackLocation()Function:ChecksiftheGeolocationAPIissupportedbytheuser'sbrowser.If
supported, it calls the watchPosition() method, which continuously returns the user's current
location as they move. The parameters set (enableHighAccuracy, timeout, maximumAge) are
usedtoconfigurehowthelocationistracked,focusingonhighaccuracyandimmediateupdates
without caching old location data.
● showPosition()Function:Receivesapositionobjectcontainingthecurrentcoordinates(latitude
and longitude) and updates the content of the locationStatus paragraph to display these
coordinates. This function canbeextendedtointegratewithmappingAPIstovisuallyrepresent
the location on a map.
● showError() Function: Handles any potential errors that may occur during location tracking,
such as permission denials ortimeouts,andupdatesthelocationStatusparagraphaccordinglyto
inform the user.
he Geolocation API is a feature of HTML5 that allows web applications to access the geographical
T
location (latitude and longitude) of a user's device. Ithelpsprovidelocation-basedservicesinwebappsby
utilizing GPS, Wi-Fi, IP address, and mobile networks.
ATME College of Engineering Department of MCA 20
Web Application and Development MMC205
✅ Features:
E
● nables location-aware web applications.
● Supports real-time tracking of user movement.
C
● an be used to display maps, calculate distance, or suggest nearby services.
● UsesasynchronousJavaScriptmethodslikegetCurrentPosition()andwatchPosition()tofetchlocation
data.
✅ How It Works:
henauseraccessesawebpagethatusestheGeolocationAPI,thebrowserrequestspermissiontosharethe
W
location. Upon acceptance, the browser collects location data and provides it to the web application.
✅ Use Cases:
● isplaying the user's location on a map (e.g., Google Maps).
D
● Finding nearby places such as restaurants, ATMs, or hospitals.
● Enabling location-based services like cab booking, weather updates, or local news.
● Enhancing safety in delivery and tracking applications.
✅ Importance:
E
● nhances user experience through personalization.
● Enables real-world integration in web apps
● Supports mobile web app development effectively.
Web Storage API
he Web Storage API provides two mechanisms — localStorage and sessionStorage—that enable web
T
applicationstostoredatalocallyontheclient'scomputer.Thisdataisthenaccessibleacrossbrowsersessions,
allowing for more complex data handling and state persistence beyond single sessions.
his HTML document shows off the use of sessionStorage to store and retrieve session-specificdata.This
T
API allows data to be stored across browser pages but only during a single browser session.
● s toreSessionData() Function: Whentheuserentersdataintheinputfieldandclicksthe"Store
Data"button,thisfunctionstorestheinputvalueintosessionStorageunderthekeysessionInfo.It
then updates thesessionOutputparagraph to indicate that data has been stored.
ATME College of Engineering Department of MCA 21
Web Application and Development MMC205
● r etrieveSessionData() Function: When the "Retrieve Data" button is clicked, this function
attemptstoretrievethedatastoredundersessionInfo.Ifdataisfound,itdisplaysthisdatainthe
sessionOutput paragraph. If no data is found (e.g., the session has been clearedornodatawas
stored), it informs the user that no data is available.
Web Workers API
eb Workerssupportrunningscriptsinthebackgroundindependentlyofthemainbrowserthread,allowing
W
forcomplexoperationslikeparsinglargedatasetsorperformingexpensivecalculationswithoutblockingthe
UI.
heWebStorageAPIprovidesawayforwebapplicationstostoredatalocallyinthebrowser.Itenablesthe
T
storage of key-value pairs directly on the client side without using cookies or databases.
There are two types of web storage:
1. localStorage– Stores data with no expiration.
2. sessionStorage– Stores data only for the durationof the session (until the tab is closed).
✅ Features:
● Stores structured data as key-value pairs.
● Data can be accessed using JavaScript methods likesetItem(),getItem(),removeItem(), andclear().
● Operates entirely on the client-side, reducing the need for server communication.
● Data is stored per domain, so it’s secure between different websites.
✅ localStorage:
● Data is stored persistently across sessions.
● Ideal for saving preferences, themes, settings, etc.
✅ sessionStorage:
● Data is temporary and exists only during the session.
ATME College of Engineering Department of MCA 22
Web Application and Development MMC205
● Useful for one-time data, like form input or user authentication tokens.
✅ Use Cases:
● Saving shopping cart contents in an e-commerce site.
● Keeping user preferences like dark mode or font size.
● Auto-filling form data while switching between tabs.
● Retaining login state during navigation.
✅ Importance:
● Offers better performance compared to server-based storage.
● Simplifies data handling for single-page applications (SPA).
● Reduces server load and traffic.
Offline Web Applications Using AppCache (HTML5)
Introduction to AppCache:
heApplicationCache(AppCache)isanHTML5featurethatallowswebapplicationstofunctionofflineby
T
caching specificfiles(likeHTML,CSS,JavaScript,andimages)ontheuser'sdevice.Thishelpscreateweb
applications that work without an internet connection, improving performance and usability in areas with
limited or no connectivity.
How AppCache Works:
ppCacheusesamanifestfilethatlistsalltheresourcesthatneedtobecachedforofflineuse.Whenauser
A
visitsawebpage,thebrowserdownloadsandstoresthespecifiedfiles.Onsubsequentvisits,eveniftheuser
is offline, the browser retrieves the resources from the cache.
AppCache Manifest File:
A manifest file is a plain textfilethatspecifieswhichresources(files)thebrowsershouldcacheforoffline
ATME College of Engineering Department of MCA 23
Web Application and Development MMC205
use.
Example of linking the manifest to an HTML file:
html
CopyEdit
<html manifest="[Link]">
<head>
<title>Offline Web App</title>
</head>
<body>
<h1>Welcome to the Offline Web App!</h1>
</body>
</html>
Manifest File Structure:
plaintext
CopyEdit
CACHE MANIFEST
# Version 1.0
[Link]
[Link]
[Link]
[Link]
NETWORK:
* # Resources always fetched from the network (like APIs)
FALLBACK:
ATME College of Engineering Department of MCA 24
Web Application and Development MMC205
[Link] /[Link] # Fallback page if the network is unavailable
● CACHE: Lists files that should be cached for offlineuse.
● NETWORK: Specifies resources that should always befetched from the network (like API calls).
● FALLBACK: Defines fallback resources to use when theapp is offline.
AppCache Features:
1. O ffline Functionality: Enables users to continue using web applicationsevenwhentheydon'thave
internet access.
2. R esource Caching:FileslikeHTML,CSS,images,andJavaScriptarecachedlocally,reducingload
times and dependency on network connectivity.
3. A utomatic Updates: When the manifest file isupdated,thebrowserautomaticallyfetchesthelatest
files and caches them.
4. I mproved UserExperience:Userscanaccesscriticalfeaturesoftheappeveninenvironmentswith
poor or no internet connectivity.
Use Cases for AppCache:
● M obileWebApplications:Appsthatshouldworkofflineorinareaswithweakinternetsignals(e.g.,
news apps, weather apps, or maps).
● Offline Forms: Allow users to fill out forms and submitthem when an internet connection is restored.
● Data-Intensive Apps: Reduce server requests by cachingdata locally for offline viewing or usage.
Limitations of AppCache:
1. D eprecated Technology: AppCache is no longer widely used as it has been replaced by Service
Workers.ServiceWorkersoffermoreadvancedcachingmechanisms,backgroundsyncing,andpush
notifications.
2. L imitedControl:Itlacksflexibilitywhenhandlingdynamiccontent,ascachingisbasedsolelyonthe
manifest file, and any changes require manual updates.
ATME College of Engineering Department of MCA 25
Web Application and Development MMC205
3. C ompatibility Issues: Different browsers may implement AppCache differently, leading to
inconsistencies in its functionality.
Conclusion:
hileAppCacheenabledthedevelopmentofoffline-capablewebapplications,itisnowconsideredoutdated
W
and replaced by more powerful and flexible technologies like ServiceWorkersandCacheAPI.However,
understandingAppCacheprovidesafoundationforbuildingofflinewebappsandlearninghowmodernweb
technologies have evolved.
or modern web development, learningandusingServiceWorkersishighlyrecommended,astheyoffera
F
better and more robust solution for caching resources and enabling offline capabilities in web applications.
ATME College of Engineering Department of MCA 26