Web Engineering — Complete BSCS Notes
World Wide Web Architecture
Definition: WWW is a system of interlinked documents accessed via internet.
Architecture:
Client (Browser) → Server → Database
Client (Browser) → Server → Database
Example: User opens Google → request sent to server → response returned
Protocols & Standards
HTTP: Communication protocol between client & server
HTML Example:
<html>
<body>
<h1>Hello World</h1>
</body>
</html>
XML Example:
<user>
<name>Ali</name>
</user>
Web Technologies & Tools
Scripting: JavaScript, PHP
JavaScript Example:
function show(){
alert("Hello User");
}
PHP Example:
<?php
echo "Hello World";
?>
Servers: Web server (Apache), App server
Web-Based Applications
Definition: Applications accessed via browser
Examples: Search engines, CMS (WordPress)
Example Flow:
User → Search → Server → Results
User → Search → Server → Results
Web Services
Definition: APIs that allow communication between apps
Example (JS Fetch):
fetch("https://api.example.com")
.then(res => res.json())
.then(data => console.log(data));
Web2, Semantic Web & Web3
Web2: Interactive web (social media)
Semantic Web: Meaningful data (AI-based)
Web3: Blockchain-based decentralized web
Website Design Principles
Concepts:
Usability, Navigation, Responsiveness
Usability, Navigation, Responsiveness
Example CSS:
body{
background:#eee;
}
Practical Website Development
Steps:
1. Design UI
2. Write HTML/CSS
3. Add JS
4. Connect backend
1. Design UI
2. Write HTML/CSS
3. Add JS
4. Connect backend
Mini Example:
<button onclick="alert('Hello')">Click</button>
0 Comments