Scribd
Upload
7 views44 pages

Web Application Development

The document covers web application development, focusing on the World Wide Web (WWW), HTTP protocol, web browsers, and web servers. It discusses effective web design principles, issues, and user-centric design, as well as the basics of HTML, including formatting, hyperlinks, and forms. The latest version of HTML (HTML5) introduces new features such as semantic elements, multimedia support, and improved accessibility.

Uploaded by

iiaammlluucckkyy
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
7 views44 pages

Web Application Development

The document covers web application development, focusing on the World Wide Web (WWW), HTTP protocol, web browsers, and web servers. It discusses effective web design principles, issues, and user-centric design, as well as the basics of HTML, including formatting, hyperlinks, and forms. The latest version of HTML (HTML5) introduces new features such as semantic elements, multimedia support, and improved accessibility.

Uploaded by

iiaammlluucckkyy
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

Web Application

Development
{Theory: 50 (35+15)
Practical: 50 (35+15)}

Unit – 1 ( Chapter – 1 )
Introduction: Concept of WWW, Internet and WWW,
HTTP Protocol: Request and Response, Web
browser and Web servers, Features of the latest
version of Web.

1. Concept of WWW (World Wide Web)


Definition
The World Wide Web (WWW) is a system of interlinked hypertext documents and
multimedia content accessed via the Internet using web browsers. It allows users to
browse, view, and interact with information across the globe.
Key Points
 Invented by Tim Berners-Lee in 1989.
 Uses hypertext (HTML) to connect documents via links.
 Accessed using URLs (Uniform Resource Locators).
 Relies on HTTP/HTTPS protocols to transmit data.
Use / Importance
 Makes information globally accessible.
 Forms the basis for websites, web applications, and online services.
2. Internet and WWW
Internet
 Definition: A global network of interconnected computers and devices.
 Function: Enables communication via protocols like TCP/IP.
 Supports email, file transfer, VoIP, streaming, and the WWW.
WWW
 Definition: A service on the Internet that provides webpages, images, videos,
and interactive content.
 Di erence: Internet = the network infrastructure; WWW = the system of
accessing information over the Internet.

3. HTTP Protocol: Request and Response


Definition
HTTP (Hypertext Transfer Protocol) is the protocol used to transfer web content
between a client (browser) and a server.

HTTP Request
 Sent by the client (web browser) to the server to request resources.
 Components:
1. Request Line: Method (GET, POST) + URL + HTTP version
2. Headers: Metadata like content type, cookies
3. Body: Optional data sent with POST/PUT requests
Example:
GET /[Link] HTTP/1.1
Host: [Link]
HTTP Response

 Sent by the server to the client after processing the request.


 Components:
1. Status Line: HTTP version + status code (200 OK, 404 Not Found)
2. Headers: Metadata like content type, server info
3. Body: Actual content (HTML, JSON, images)
Example:
HTTP/1.1 200 OK
Content-Type: text/html
<body>Welcome to [Link]</body>

4. Web Browser and Web Servers


Web Browser
 Definition: Software used to access, interpret, and display web pages.
 Functions:
o Sends HTTP requests
o Receives HTTP responses
o Renders HTML, CSS, and JavaScript content
 Examples: Google Chrome, Mozilla Firefox, Microsoft Edge, Safari
Web Server
 Definition: Software or hardware that stores, processes, and delivers web
pages to clients.
 Functions:
o Handles HTTP requests from browsers
o Serves static content (HTML, images) and dynamic content (via scripts)
o Maintains security and logging
 Examples: Apache HTTP Server, Nginx, Microsoft IIS

5. Features of the Latest Version of the Web (Web 3.0 / Modern


Web)
Key Features
1. Semantic Web: Machines can understand and interpret data for intelligent
search and interactions.
2. Decentralization: Uses blockchain and distributed systems to reduce reliance
on central authorities.
3. AI Integration: Intelligent recommendations, chatbots, and predictive analytics.
4. Interactivity: Rich web apps with real-time updates and multimedia.
5. Ubiquity / Accessibility: Works across devices, platforms, and locations.
6. Enhanced Security: HTTPS, encryption, and privacy-focused features.
7. Cloud Integration: Web applications hosted on cloud for scalability and
reliability.
Examples of Modern Web Applications:
 Social media platforms (Facebook, Twitter)
 Cloud-based productivity tools (Google Workspace, Microsoft 365)
 Decentralized applications (DApps) on blockchain

Summary Table

Topic Definition / Key Points Examples / Importance

System of interlinked documents on


WWW Websites, web applications
the Internet

Supports WWW, email,


Internet Global network of computers
streaming

GET, POST requests; status


HTTP Protocol for transferring web data
codes 200, 404

Software to access and render web


Web Browser Chrome, Firefox, Edge
pages

Software/hardware serving web


Web Server Apache, Nginx, IIS
content

Features of Semantic, decentralized, AI- Web 3.0 apps, cloud-based


Latest Web integrated, interactive services

Conclusion:
 WWW and HTTP form the foundation of the web, enabling communication
between browsers and servers.
 Modern web features focus on interactivity, intelligence, decentralization, and
security.
 Understanding these basics is essential for web development, cloud
integration, and advanced web technologies.
Chapter – 2
Web Design: Concepts of e ective web design, Web
design issues including Browser, Bandwidth and
Cache, Display resolution, Look and Feel of the
Website, Page Layout and linking, User-centric
design, Sitemap, Planning and publishing website,
Designing e ective navigation.

1. Concepts of E ective Web Design


E ective web design ensures that a website is:
 Visually appealing – clean layout, consistent color scheme, readable fonts
 User-friendly – easy to navigate, intuitive interface
 Functional – links, forms, and multimedia work properly
 Accessible – usable by people with disabilities, mobile-friendly

 Fast and optimized – loads quickly and performs well across devices
Key Principles:
 Simplicity: Avoid clutter
 Consistency: Maintain uniform layout and style
 Readability: Clear fonts, proper spacing
 Visual hierarchy: Important elements stand out
 Accessibility: Compliance with WCAG standards

2. Web Design Issues


Browser Compatibility
 Di erent browsers render websites di erently (Chrome, Firefox, Safari, Edge).
 Design must be cross-browser compatible using standard HTML, CSS, and
JavaScript.
Bandwidth and Cache
 Bandwidth: Website size a ects loading speed; large images or videos slow
down users with low bandwidth.
 Cache: Temporary storage of web content on client browsers; helps faster page
loading, but outdated content may display if not managed.
Display Resolution
 Websites must adapt to di erent screen sizes and resolutions (desktop,
tablet, mobile).
 Use responsive design techniques like CSS media queries.

3. Look and Feel of the Website


 Look = visual design (colors, fonts, images, layout)
 Feel = interactive elements (buttons, animations, forms)
 Goal: Ensure the website creates a positive impression and enhances user
experience.

4. Page Layout and Linking


Page Layout
 Structure of content on the page: header, footer, navigation bar, sidebars, main
content.
 Layout types: Fixed, Fluid, Responsive

Linking
 Internal links: Connect pages within the same website
 External links: Connect to other websites
 Navigation menus and breadcrumbs help users find content quickly.

5. User-Centric Design
 Focuses on meeting user needs and expectations.
 Involves:
o Understanding target audience
o Designing intuitive navigation
o Ensuring accessibility and readability
o Testing usability

6. Sitemap
 A visual or textual representation of a website’s structure.
 Helps designers plan the navigation and hierarchy of pages.
 Types:
o Visual sitemap: Diagram showing page relationships
o XML sitemap: Machine-readable file for search engines

7. Planning and Publishing a Website


Planning
 Define purpose, target audience, content strategy
 Decide site structure, features, and technologies
 Sketch wireframes or mockups
Publishing
 Host the website on a web server
 Register a domain name
 Upload website files using FTP or hosting control panel
 Test live site for functionality, performance, and responsiveness

8. Designing E ective Navigation


 Navigation helps users find information quickly.
 Principles:
o Clear menus with logical labels
o Consistent placement across pages
o Minimize number of clicks to reach content
o Include search functionality if website is large
 Common navigation types:
o Top horizontal menu
o Side vertical menu
o Footer menu
o Dropdown or mega menus

Summary Table

Topic Key Points

E ective Web Visual appeal, user-friendliness, functionality, accessibility,


Design performance

Web Design Issues Browser compatibility, bandwidth, cache, display resolution

Look and Feel Visual design + interactive elements

Page Layout &


Header, footer, sidebars, navigation, internal/external links
Linking

User-Centric Design Design for user needs, usability, accessibility

Sitemap Diagram or XML file showing site structure

Planning &
Define purpose, wireframes, hosting, domain, uploading files
Publishing

E ective Navigation Clear menus, consistent placement, search, minimal clicks

Conclusion:
Web design is a blend of visual creativity and technical planning. Good design
ensures users can easily access content, enjoy a pleasant experience, and
accomplish tasks e iciently.
Unit – 2 ( Chapter – 1 )
HTML: Basics of HTML, formatting and fonts,
commenting code, color, hyperlink, lists, tables,
images, forms, XHTML, Meta tags, Character
entities, frames and frame sets, Browser
architecture and Web site structure. Overview and
features of the latest version of HTML.

1. Basics of HTML
Definition
HTML (HyperText Markup Language) is the standard markup language for creating
web pages. It structures the content of a website using tags.
Key Points
 HTML documents are plain text files with a .html or .htm extension.
 HTML elements are written as tags, usually in pairs: <tag>content</tag>.
 Browsers interpret HTML to render text, images, and multimedia on web pages.
Example
<!DOCTYPE html>
<html>
<head>
<title>My Webpage</title>
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This is a paragraph.</p>
</body>
</html>

2. Formatting and Fonts


Text Formatting Tags
 <b> – bold, <i> – italic, <u> – underline
 <sub> – subscript, <sup> – superscript
 <mark> – highlighted text
Font Styling
 <font> (deprecated in modern HTML) allowed color, size, and face.
 Modern HTML uses CSS for fonts, but basic exams may still ask <font> usage.
Example
<p><b>Bold Text</b>, <i>Italic Text</i></p>

3. Commenting Code
 Comments are ignored by the browser and used for documentation.
 Syntax: <!-- This is a comment -->
Example
<!-- This is a comment -->
<p>Hello World!</p>

4. Color
 Colors can be applied using color names, HEX codes, RGB, or CSS.
 Example: <p style="color:red;">Red Text</p>

5. Hyperlinks
 Definition: Links to other web pages or resources.
 Tag: <a href="URL">link text</a>
 Can open in a new tab: target="_blank"
Example
<a href="[Link] target="_blank">Visit Example</a>

6. Lists
Ordered List
 <ol> – numbered list
<ol>
<li>Item 1</li>
<li>Item 2</li>
</ol>
Unordered List
 <ul> – bulleted list
<ul>
<li>Item A</li>
<li>Item B</li>
</ul>
Definition List
 <dl> – term-description list

<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language</dd>
</dl>

7. Tables
 <table> defines a table, <tr> table row, <td> table cell, <th> table header.
 Example:
<table border="1">
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>John</td>
<td>25</td>
</tr>
</table>

8. Images
 Insert images using <img> tag.
 Attributes: src (source), alt (alternative text), width, height.
 Example:
<img src="[Link]" alt="My Image" width="200" height="150">

9. Forms
 Forms collect user input. Tag: <form>
 Input elements: <input>, <textarea>, <select>
 Example:
<form action="[Link]" method="post">
Name: <input type="text" name="username"><br>
<input type="submit" value="Submit">
</form>

10. XHTML
 Extensible HyperText Markup Language – stricter version of HTML.
 Rules: lowercase tags, properly closed tags, nested elements correctly.
 Purpose: Ensures compatibility and well-formed code.
11. Meta Tags
 Provide metadata about the HTML document.
 Placed in <head> section.
 Examples:
<meta charset="UTF-8">
<meta name="description" content="Example website">
<meta name="keywords" content="HTML, Tutorial">
<meta name="author" content="Your Name">

12. Character Entities


 Special characters represented using entities, especially for symbols or reserved
HTML characters.
 Examples:
o &lt; → <
o &gt; → >
o &amp; → &

13. Frames and Frame Sets (Deprecated in HTML5)


 Used to divide browser window into multiple sections to load separate HTML
pages.
 Tags: <frameset>, <frame>, <noframes>
 Example:
<frameset cols="50%,50%">
<frame src="[Link]">
<frame src="[Link]">
</frameset>

14. Browser Architecture and Website Structure


Browser Architecture
 Components:
o User Interface (UI): Address bar, buttons
o Browser Engine: Communicates between UI and rendering engine
o Rendering Engine: Parses HTML/CSS, displays content
o Networking: Handles HTTP requests/responses
o JavaScript Engine: Executes scripts
o Data Storage: Cookies, cache, local storage
Website Structure
 Organized into folders and files: HTML, CSS, JS, images
 Typical structure:
/website
[Link]

/css
[Link]
/images
[Link]
/js
[Link]

15. Overview and Features of the Latest Version of HTML


(HTML5)
Key Features
 Semantic elements: <header>, <footer>, <article>, <section>
 Multimedia support: <audio>, <video>
 Graphics: <canvas>, SVG integration
 Forms: New input types (email, date, number) and validation
 APIs: Geolocation, local storage, drag & drop
 Improved accessibility and device compatibility
Summary Table

Topic Key Points / Example

Basics of HTML Tags, elements, structure <html>, <head>, <body>

Formatting & Fonts <b>, <i>, <u>, CSS fonts, <mark>

Commenting Code <!-- comment -->

Color style="color:red;"

Hyperlinks <a href="url">link</a>

Lists <ul>, <ol>, <dl>

Tables <table>, <tr>, <td>, <th>

Images <img src="[Link]" alt="text">

Forms <form>, <input>, <textarea>, <select>

XHTML Strict, well-formed HTML

Meta Tags <meta charset="UTF-8">

Character Entities &lt;, &gt;, &amp;

Frames <frameset>, <frame> (deprecated)

Browser Architecture UI, rendering engine, JS engine, networking, storage

Website Structure Organized folders: HTML, CSS, JS, images

HTML5 Features Semantic tags, audio/video, canvas, forms, APIs

Conclusion:
 HTML is the backbone of web pages, providing structure and content.
 Modern HTML5 adds semantic elements, multimedia support, and APIs to
create richer web applications.
 A solid understanding of HTML is essential before learning CSS, JavaScript, or
advanced web development topics.
Chapter – 2
Stylesheets: Need for CSS, introduction to CSS,
basic syntax and structure, using CSS, background
images, colours and properties, manipulating texts,
using fonts, borders and boxes, margins, padding
lists, positioning using CSS, CSS2, Overview and
features of the latest version of CSS.

1. Need for CSS (Cascading Style Sheets)


 Definition: CSS is a style sheet language used to describe the presentation of
HTML documents.
 Purpose: Separates content (HTML) from presentation (layout, fonts, colors).
 Benefits:
o Maintain consistency across multiple pages
o Reduce redundancy and file size
o Easier updates to the website’s look and feel
o Enhanced user experience

2. Introduction to CSS
 CSS controls visual presentation: colors, fonts, spacing, layout, and
positioning.
 Cascading means that styles are applied according to priority (inline > internal >
external).
 Types of CSS:
1. Inline CSS: Style applied directly to an HTML element (<p
style="color:red;">)
2. Internal CSS: Style within <style> tags in HTML <head>
3. External CSS: Style in a separate .css file linked using <link>
3. Basic Syntax and Structure
 CSS Rule Structure:
selector {
property: value;
}
 Example:
p{
color: blue;
font-size: 16px;
}
 Selector: HTML element(s) to apply style (e.g., p, .class, #id)
 Property: Visual feature (e.g., color, font-size)
 Value: Assigned value for the property

4. Using CSS
 Can style:
o Text (color, font-family, text-align)
o Boxes and layouts (width, height, margin, padding)
o Backgrounds (background-color, background-image)
o Borders (border-style, border-color, border-width)
Example:
h1 {
color: green;
text-align: center;
background-color: lightgray;

5. Background Images, Colors, and Properties


 Background Color: background-color: yellow;
 Background Image: background-image: url('[Link]');
 Other properties: background-repeat, background-position, background-size
Example:
body {
background-color: #f2f2f2;
background-image: url('[Link]');
background-repeat: no-repeat;
background-size: cover;
}

6. Manipulating Texts and Using Fonts


 Text properties:
o color, font-family, font-size, font-weight, text-align, text-decoration, line-
height
 Font properties: Control typeface, size, and style for readability and design
Example:
p{
font-family: Arial, sans-serif;
font-size: 14px;
font-weight: bold;
color: #333;
}

7. Borders and Boxes


 Box Model: Every HTML element is a rectangular box comprising:
o Content: Text or image
o Padding: Space between content and border
o Border: Surrounding the element
o Margin: Space outside the border
 Border properties: border-width, border-style, border-color, border-radius
Example:
div {
border: 2px solid black;
padding: 10px;
margin: 15px;
}

8. Margins and Padding


 Margin: Space outside the element
 Padding: Space inside the element, between content and border
 Both can be set individually (margin-top, padding-left) or collectively (margin:
10px;)

9. Lists
 CSS can style lists:
o Bullet styles: list-style-type (circle, square, none)
o Positioning: list-style-position (inside/outside)
 Example:
ul {
list-style-type: square;
list-style-position: inside;
}

10. Positioning Using CSS


 Position property: Controls element placement:
o static – default
o relative – relative to normal position
o absolute – relative to nearest positioned ancestor
o fixed – stays in viewport on scroll
o sticky – toggles between relative and fixed
Example:
div {
position: absolute;
top: 50px;
left: 100px;
}

11. CSS2
 CSS2 added features over CSS1:
o Absolute, relative, fixed positioning
o Media types (screen, print)
o Z-index for layering elements
o Advanced selectors (child, adjacent)

12. Overview and Features of Latest CSS (CSS3)


 New features:
o Selectors: nth-child, attribute selectors, pseudo-classes
o Colors: RGBA, HSLA, gradients
o Borders and Backgrounds: Rounded corners (border-radius), shadows
(box-shadow)
o Animations and Transitions: Smooth animations, hover e ects
o Flexbox and Grid: Modern layout tools
o Media Queries: Responsive design for multiple devices
o Web Fonts: @font-face to use custom fonts
Example CSS3
div {
border-radius: 10px;
box-shadow: 2px 2px 5px #888;
transition: transform 0.3s;
}
div:hover {
transform: scale(1.1);
}

Summary Table

Topic Key Points / Example

Need for CSS Separates content from presentation, consistency, maintainability

Introduction to CSS Inline, internal, external CSS, cascading rules

Syntax & Structure Selector { property: value; }

Using CSS Styling text, boxes, layout, background, borders

Background &
background-color, background-image, repeat, size
Colors

Text & Fonts font-family, font-size, color, text-align

Borders & Boxes Box model: content, padding, border, margin; border-style

Margins & Padding Control spacing inside and outside elements

Lists list-style-type, list-style-position

Positioning static, relative, absolute, fixed, sticky

CSS2 Advanced positioning, media types, z-index, selectors

Animations, transitions, gradients, flexbox, grid, media queries,


CSS3 Features
web fonts

Conclusion:
CSS allows styling and layout control over HTML content.
 CSS2 focused on positioning and media types.
 CSS3 introduced modern features like flexbox, grid, transitions, animations,
and responsive design, making websites visually appealing and adaptable
across devices.

Unit – 3 ( Chapter – 1 )
JavaScript: Client-side scripting with JavaScript,
variables, functions, conditions, loops and
repetition, Pop up boxes, Advance JavaScript:
JavaScript and objects, JavaScript own objects, the
DOM and web browser environments, Manipulation
using DOM, forms and validations, DHTML:
Combining HTML, CSS and JavaScript, Events and
buttons.

1. Client-Side Scripting with JavaScript


 Definition: JavaScript is a client-side scripting language that runs in the user’s
browser to make web pages interactive and dynamic.
 Purpose:
o Validate forms before sending to server
o Create interactive e ects like sliders, pop-ups, and animations
o Manipulate web page content without reloading
Example:
<p id="demo">Hello</p>
<script>
[Link]("demo").innerHTML = "Hello, JavaScript!";
</script>

2. Variables
 Definition: Containers to store data (numbers, text, objects).
 Types in JS: var, let, const
o var – function scoped (older usage)
o let – block scoped (modern usage)
o const – block scoped, cannot be reassigned
Example:
let name = "John";
const age = 25;
var isStudent = true;

3. Functions
 Definition: Reusable blocks of code that perform a task.
 Syntax:
function functionName(parameters) {
// code
return value;
}
Example:
function add(a, b) {

return a + b;
}
let sum = add(5, 10); // 15

4. Conditions
 Used to perform actions based on a condition.

 Types: if, else, else if, switch


Example:
let score = 80;
if(score >= 90) {
[Link]("A grade");
} else if(score >= 75) {
[Link]("B grade");
} else {
[Link]("C grade");
}

5. Loops and Repetition


 Used to repeat code multiple times.
 Types: for, while, do...while, for...in, for...of
Example (for loop):
for(let i = 0; i < 5; i++) {
[Link](i);
}

6. Pop-up Boxes
 JavaScript can show messages to users:
1. Alert box: Shows a simple message
alert("Hello World!");
2. Confirm box: Ask user for confirmation (returns true/false)
let result = confirm("Are you sure?");
3. Prompt box: Accepts input from the user
let name = prompt("Enter your name:");

7. Advanced JavaScript
a. JavaScript and Objects
 Objects store key-value pairs of data.
 Example:
let person = {
name: "John",
age: 25,
greet: function() {
[Link]("Hello " + [Link]);
}
};
[Link](); // Hello John
b. JavaScript Own Objects
 Built-in objects: Date, Math, String, Array, Number, Object
 Example:
let today = new Date();

let random = [Link]();

8. The DOM and Web Browser Environments


 DOM (Document Object Model): Represents HTML elements as objects,
allowing JS to manipulate content, structure, and style.
 Browser environment: JS interacts with HTML/CSS, handles events, cookies,
local storage, and window object.
Example:
[Link]("demo").innerHTML = "DOM Manipulation!";

9. Manipulation Using DOM


 Changing content: innerHTML, textContent
 Changing style: [Link] = "red"
 Creating elements: [Link]("div")
 Appending elements: [Link](child)
Example:
let newDiv = [Link]("div");
[Link] = "New Element";
[Link](newDiv);

10. Forms and Validations


 Validate user input before submission.
 Common checks: required fields, email format, number range
Example:
function validateForm() {
let email = [Link]["myForm"]["email"].value;
if(email == "") {
alert("Email must be filled out");
return false;
}
}

11. DHTML (Dynamic HTML)


 Combines HTML, CSS, and JavaScript to create dynamic web pages.
 Allows:
o Changing content without reloading
o Animations and e ects
o Interactive menus
Example:
[Link]("demo").[Link] = "blue";

12. Events and Buttons


 Events trigger JavaScript when user interacts with page elements.
 Common events: onclick, onmouseover, onchange, onload
Example:
<button onclick="alert('Button Clicked!')">Click Me</button>
 Can also attach events via JS:
[Link]("btn").addEventListener("click", function() {
alert("Clicked!");
});

Summary Table

Topic Key Points / Example

Client-side Scripting JS runs in browser, makes pages interactive

Variables var, let, const

Functions Reusable code blocks, return values

Conditions if, else if, else, switch

Loops for, while, do...while

Pop-up Boxes alert(), confirm(), prompt()

Objects Key-value pairs, built-in objects like Math, Date

DOM & Browser JS interacts with HTML elements and browser environment

DOM Manipulation Change content, style, create/append elements

Forms & Validation Check user input before submission

DHTML Dynamic pages using HTML, CSS, JS

Events & Buttons User interactions trigger JS code (onclick, onmouseover)

Conclusion:
JavaScript is essential for making web pages interactive. It ranges from basic
scripting (variables, conditions, loops) to advanced DOM manipulation, events, and
DHTML e ects. For exams, focus on basic syntax, pop-ups, DOM, and simple event
handling, as they are frequently asked.
Chapter – 2
XML: Introduction to XML, uses of XML, simple XML,
XML key components, DTD and Schemas, Using XML
with application. Transforming XML using XSL and
XSLT

1. Introduction to XML
 XML (eXtensible Markup Language) is a markup language used to store and
transport data in a structured, human-readable, and machine-readable
format.
 Unlike HTML, which is for displaying data, XML is for describing and
exchanging data.
 Key feature: User-defined tags to represent data.
Example:
<person>
<name>John</name>
<age>25</age>
</person>

2. Uses of XML
 Data transport: Between server and client or between applications
 Configuration files: Storing settings for applications
 Web services: SOAP, REST APIs
 Document storage: E-books, o ice documents (e.g., .docx, .xlsx)
 Data integration: Sharing data across di erent platforms and systems

3. Simple XML
 Simple XML document contains:
o Root element (single top-level element)
o Child elements
o Properly nested and closed tags
Example:
<bookstore>
<book>
<title>Introduction to XML</title>
<author>John Doe</author>
</book>
<book>
<title>Advanced XML</title>
<author>Jane Smith</author>
</book>

</bookstore>
Rules:
 Must have one root element
 Tags must be case-sensitive and properly closed
 Nested elements must be properly ordered

4. XML Key Components


Component Description

Elements Tags that define data (<name>John</name>)

Attributes Provide additional information about elements (<book id="b1">)

Prolog Optional XML declaration (<?xml version="1.0" encoding="UTF-8"?>)

Comments <!-- This is a comment -->

CDATA Marks content to be treated as plain text (<![CDATA[<text>]]>)

5. DTD and Schemas


a. DTD (Document Type Definition)
 Defines legal structure and elements of an XML document.
 Ensures data consistency.
 Can be internal or external.
Example (internal DTD):
<!DOCTYPE book [
<!ELEMENT book (title, author)>
<!ELEMENT title (#PCDATA)>
<!ELEMENT author (#PCDATA)>
]>
<book>
<title>XML Basics</title>
<author>John Doe</author>

</book>
b. XML Schema
 XML Schema (XSD) is a more powerful and flexible alternative to DTD.
 Defines element types, data types, attributes, and structure.
 Written in XML format.
Example:
<xs:schema xmlns:xs="[Link]
<xs:element name="book">
<xs:complexType>
<xs:sequence>
<xs:element name="title" type="xs:string"/>
<xs:element name="author" type="xs:string"/>
</xs:sequence>
</xs:complexType>
</xs:element>
</xs:schema>
6. Using XML with Applications
 Applications read XML to extract data using parsers:
o DOM Parser: Reads whole XML as a tree
o SAX Parser: Reads XML sequentially (event-driven)
 XML can be used in:
o Web pages (via JavaScript)
o Server-side applications (PHP, Java, Python)
o Configuration files (e.g., Android [Link])
Example (JavaScript reading XML):
let parser = new DOMParser();
let xmlDoc = [Link](xmlString, "text/xml");
let title = [Link]("title")[0].childNodes[0].nodeValue;

7. Transforming XML using XSL and XSLT


a. XSL (eXtensible Stylesheet Language)

 Used to define how XML data should be presented.


b. XSLT (XSL Transformations)
 Converts XML data into HTML, plain text, or another XML format.
 Works with XSL templates to match and transform XML nodes.
Example:
XML:
<book>
<title>XML Basics</title>
<author>John Doe</author>
</book>
XSLT:
<xsl:stylesheet xmlns:xsl="[Link] version="1.0">
<xsl:template match="/">
<html>
<body>
<h2>Book Information</h2>
<p>Title: <xsl:value-of select="book/title"/></p>
<p>Author: <xsl:value-of select="book/author"/></p>
</body>
</html>
</xsl:template>
</xsl:stylesheet>
 Output is a formatted HTML page showing the XML content.

Summary Table

Topic Key Points

Introduction XML stores and transports data, user-defined tags

Data transport, configuration, web services, document


Uses
storage

Simple XML Root element, nested child elements, properly closed tags

XML Key Components Elements, attributes, prolog, comments, CDATA

DTD Defines allowed structure and elements (internal/external)

XML Schema Advanced validation, data types, structure rules

Using XML with


DOM/SAX parsers, server/client-side usage
Applications

XSL and XSLT Transform XML into HTML, text, or other XML formats

Conclusion:
 XML is simple to learn, highly structured, and widely used for data exchange.
 DTD/XSD ensure consistency, while XSL/XSLT allow formatting and
presentation of XML data.
Unit – 4 ( Chapter -1 )
PHP: Introduction and basic syntax of PHP, decision
and looping with examples, PHP and HTML, Arrays,
Functions, Browser control and detection, string,
Form processing, Files, Advance Features: Cookies
and Sessions.

1. Introduction and Basic Syntax of PHP


 PHP (Hypertext Preprocessor): Server-side scripting language used to create
dynamic web pages.
 Runs on the server, generates HTML, and sends it to the client.
 Basic Syntax:
<?php
echo "Hello, World!";
?>
 PHP code is enclosed in <?php ... ?>.
 Statements end with a semicolon ;.
 PHP is case-insensitive for keywords, but variables are case-sensitive.

2. Decision and Looping with Examples


a. Decision Making
 Use conditions to execute code selectively: if, else if, else, switch.
Example:
$score = 85;
if ($score >= 90) {
echo "A grade";
} elseif ($score >= 75) {
echo "B grade";
} else {
echo "C grade";
}
b. Loops
 for – Repeat a block for a known number of times
 while – Repeat while condition is true
 do...while – Executes at least once
 foreach – Loop through arrays
Example:
for ($i = 0; $i < 5; $i++) {
echo $i . "<br>";
}

3. PHP and HTML


 PHP can be embedded in HTML to create dynamic content.
Example:
<html>
<body>
<h1>Welcome</h1>

<?php
echo "Today is " . date("Y-m-d");
?>
</body>
</html>
 PHP can generate HTML dynamically using echo or print.

4. Arrays
 Arrays store multiple values in a single variable.
 Types:
o Indexed arrays: Numerical index
o Associative arrays: Key-value pairs
o Multidimensional arrays: Arrays within arrays
Example (Associative):
$person = array("name" => "John", "age" => 25);
echo $person["name"]; // John

5. Functions
 Reusable blocks of code that perform specific tasks.
 Syntax:
function functionName($parameters) {
// code
return $value;
}
 Example:
function add($a, $b) {
return $a + $b;
}
echo add(5, 10); // 15

6. Browser Control and Detection


 Detect browser type, version, and platform using $_SERVER variables:
echo $_SERVER['HTTP_USER_AGENT'];
 Can customize content or features for di erent browsers.

7. Strings
 Strings are sequences of characters.
 Common operations:
o Concatenation: . operator
o Length: strlen()
o Uppercase: strtoupper()
o Replace: str_replace()
Example:
$text = "Hello";
echo strtoupper($text); // HELLO

8. Form Processing
 Handle data submitted via HTML forms using $_GET or $_POST arrays.
Example (POST method):
<form method="post">
Name: <input type="text" name="name">
<input type="submit">
</form>

<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
$name = $_POST["name"];
echo "Hello, " . $name;

}
?>
 Always validate and sanitize form data to prevent security risks.

9. Files
 PHP can read, write, and manipulate files.

 Common functions: fopen(), fwrite(), fread(), fclose().


Example:
$file = fopen("[Link]", "w");
fwrite($file, "Hello World!");
fclose($file);

10. Advanced Features: Cookies and Sessions


a. Cookies
 Small pieces of data stored in the user’s browser.
 Set using setcookie() and retrieve via $_COOKIE.
Example:
setcookie("user", "John", time() + 3600); // expires in 1 hour
echo $_COOKIE["user"];
b. Sessions
 Store data on the server for a user session.
 Use session_start(), $_SESSION array.
Example:
session_start();
$_SESSION["user"] = "John";
echo $_SESSION["user"];
 Sessions are more secure than cookies for sensitive data.

Summary Table

Topic Key Points / Example

Introduction & Syntax Server-side scripting, <?php ?>, dynamic web pages

Decision & Looping if, else, switch, for, while, do...while, foreach

PHP & HTML Embed PHP in HTML to generate dynamic content

Arrays Indexed, Associative, Multidimensional

Functions Reusable code blocks, return values

Browser Control Detect browser info using $_SERVER

Strings Operations like concatenation, length, replace, uppercase


Topic Key Points / Example

Form Processing Handle $_GET/$_POST data, validation

Files Read/write files using fopen, fwrite, fread, fclose

Cookies & Sessions Store data in browser ($_COOKIE) or server ($_SESSION)

Conclusion:
PHP is a powerful server-side scripting language for creating dynamic, interactive
websites.
 Basic PHP includes syntax, variables, loops, functions, and HTML integration.
 Advanced features like cookies, sessions, file handling, and browser
detection enhance user experience and functionality.

Chapter – 2
PHP and MySQL: Basic commands with PHP
examples, Connection to server, creating database,
selecting a database, listing database, listing table
names, creating a table, inserting data, altering
tables, queries, deleting database, deleting data and
tables, PHP my admin and database bugs.

1. Basic Commands with PHP Examples


 PHP is used to interact with MySQL databases using built-in functions or
PDO/MySQLi.
 Common commands:
o Connect to database
o Create/select database
o Create table
o Insert/update/delete data
o Query data
Example (Connect to MySQL using MySQLi):
$servername = "localhost";
$username = "root";
$password = "";

// Create connection
$conn = new mysqli($servername, $username, $password);

// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);

}
echo "Connected successfully";

2. Connection to Server
 Steps:
1. Use mysqli_connect() or new mysqli()
2. Provide server name, username, password, optional database

3. Check for connection errors


Example:
$conn = mysqli_connect("localhost", "root", "");
if (!$conn) {
die("Connection failed: " . mysqli_connect_error());
}

3. Creating Database
 Command: CREATE DATABASE database_name;
 PHP Example:
$sql = "CREATE DATABASE myDB";
if ($conn->query($sql) === TRUE) {
echo "Database created successfully";
} else {
echo "Error creating database: " . $conn->error;
}

4. Selecting a Database
 After creation, select a database to use it:
PHP Example:
mysqli_select_db($conn, "myDB");

5. Listing Databases
 SQL Command: SHOW DATABASES;
 PHP Example:
$result = $conn->query("SHOW DATABASES");
while ($row = $result->fetch_assoc()) {
echo $row['Database'] . "<br>";
}

6. Listing Table Names


 SQL Command: SHOW TABLES;
 PHP Example:
$result = $conn->query("SHOW TABLES FROM myDB");
while ($row = $result->fetch_array()) {
echo $row[0] . "<br>";
}

7. Creating a Table
 SQL Command: CREATE TABLE table_name (...)
 PHP Example:
$sql = "CREATE TABLE users (
id INT(6) UNSIGNED AUTO_INCREMENT PRIMARY KEY,
name VARCHAR(30) NOT NULL,
email VARCHAR(50)
)";
$conn->query($sql);

8. Inserting Data
 SQL Command: INSERT INTO table_name (columns) VALUES (values)
 PHP Example:
$sql = "INSERT INTO users (name, email) VALUES ('John', 'john@[Link]')";
$conn->query($sql);

9. Altering Tables
 SQL Command: ALTER TABLE table_name ADD/DELETE/CHANGE column
 PHP Example:
$sql = "ALTER TABLE users ADD age INT(3)";
$conn->query($sql);

10. Queries (Selecting Data)


 SQL Command: SELECT * FROM table_name WHERE condition
 PHP Example:
$result = $conn->query("SELECT * FROM users");
while ($row = $result->fetch_assoc()) {
echo "Name: " . $row["name"] . " - Email: " . $row["email"] . "<br>";
}
11. Deleting Data
 SQL Command: DELETE FROM table_name WHERE condition
 PHP Example:
$sql = "DELETE FROM users WHERE id=1";
$conn->query($sql);

12. Deleting a Database or Table


 Delete Table: DROP TABLE table_name;
 Delete Database: DROP DATABASE database_name;
PHP Example:
$conn->query("DROP TABLE users");
$conn->query("DROP DATABASE myDB");

13. PHPMyAdmin
 PHPMyAdmin is a web-based GUI for managing MySQL databases.
 Allows:
o Create/modify databases and tables
o Insert/update/delete data
o Run queries without coding
o Export/import databases

14. Common Database Bugs/Errors


 Connection errors: Wrong username, password, host
 Syntax errors: Misspelled SQL commands or missing semicolons
 Duplicate keys: Inserting data with existing primary keys
 Data type mismatch: Assigning wrong type to a column
 Security issues: SQL injection (use prepared statements to prevent)
Example (Prepared Statement to avoid SQL Injection):
$stmt = $conn->prepare("INSERT INTO users (name, email) VALUES (?, ?)");
$stmt->bind_param("ss", $name, $email);
$stmt->execute();

Summary Table

Topic Key Points / PHP Example

Basic Commands Connect, query, insert, delete, select

Connection to Server mysqli_connect() / new mysqli()

Creating Database CREATE DATABASE myDB

Selecting Database mysqli_select_db()

Listing Databases SHOW DATABASES

Listing Table Names SHOW TABLES

Creating Table CREATE TABLE table_name (...)

Inserting Data INSERT INTO table_name VALUES (...)

Altering Tables ALTER TABLE table_name ADD/DELETE/CHANGE column

Queries SELECT * FROM table_name

Deleting Data DELETE FROM table_name WHERE ...

Deleting
DROP TABLE, DROP DATABASE
Table/Database

PHPMyAdmin GUI to manage databases

Connection errors, syntax errors, SQL injection, data type


Database Bugs
mismatch

Conclusion:
 PHP combined with MySQL allows full server-side database management for
web applications.
 Basic CRUD operations, table management, and querying are essential for
exams.
 For security, always use prepared statements and validations.

You might also like