Notes Source- CHATGPT- Lecturer verified and enhanced.

Week 1 -
4 notes

UNIT NAME: ADVANCED WEB DESIGN AND DEVELOPMENT

UNIT CODE: BIT3208
Contact Hours: 42
Credit hours: 3
Pre-requisite: BIT1202: INTRODUCTION TO WEB DESIGN
Purpose of the Course Unit
To provide students with practical advanced knowledge in web design
and development.
Expected Learning
Outcomes
By the end of this course unit, the learner should be able to;
1. Describe web design concepts, the current state of the web, and
technologies used on the web.
2. Demonstrate the ability to evaluate and develop a site’s aesthetic qualities.
3. Demonstrate the effective use of multimedia.
4. Examine and apply website testing, publishing, and maintenance concepts.
5. Develop a web application using PHP with advanced layout features and concepts

Course Content
Fundamentals -Networking fundamentals such as sockets, IP, TCP, HTTP -Client-
side components like HTML, XML, browsers, applets, HTML format, Java script, VB
script, Server-side component e.g. web servers, servlets, CGI, PHP, ASP, PAP,
application servers, Database components which include SQL, JDBC, database
servers, Architecture and design -I.N-tier designs -user interface database servers,
directory servers, transition servers, interfacing to legacy systems -security issues -
Object-oriented modelling for web applications using UML and WAC. Development
of multi-tier applications Java related: Fundament Java services like servlet life cycle,
request and response, Session management and cookies Dynamic HTML generation,
Data management using Java database connectivity (JDBC), Java serve pages,
Introduction of java servlets and PHP, ASP based -ASP object model -Barrier of ASP
such as inputs, output, variable, arithmetic, operations, strings, arrays -Control
structures -Object-orientation in ASP like objects, properties, methods and events -
Session management which include applications, sessions, cookies -Database access
with ASP and ADU object model , Special topics, including: -Distributed component
frameworks like COM/Dvom, CORBA, RMI, Joni. -Secure directory access using
LDAP -Search engines
Teaching / Learning Methodologies: Lectures and tutorials; group discussion;
Demonstration; Individual assignment; Case studies.
Materials and Equipment: Projector; test books; design catalogues; computer
laboratory equipped with PHP web design software; design software; simulators;
Assessment
Examination - 70%; Continuous Assessment Test (CATS) - 20%; Assignments -
10%; Total - 100%
Core Text books
1. Robert E. B. (2020) Essential ASP.NET Web Forms Development. Berkeley,
Califonia: Apress.
2. Jason, N. G., Christian, W., Pranav, R. Todd, M. & Scott, H. (2013). Professional
ASP. NET 4. 5 in C# and VB. New Jersey: John Wiley & Sons.
Recommended Textbooks for Further Reading
1. MacDonald, M., Mabbutt, D., & Freeman, A. (2010). Pro ASP.NET 4 in VB
2010. Berkeley, CA : Apress.
2. Imar, S. (2018). Beginning ASP.NET 3.5 in C# and VB. Indianapolis, IN :
Wrox/Wiley Technology Pub.
14-week lesson plan

Week 1: Introduction to Advanced Web Design

Learning Objectives:

 Understand the current state of the web.

 Describe key web technologies and protocols.

Tools & Technologies:

 Browsers, HTML5, HTTP/S

 Developer tools (Chrome/Firefox DevTools)

Tasks:

 Recap of BIT1202 (HTML/CSS/JS basics)

 Introduction to HTTP, sockets, IP, TCP
 Practice analyzing HTTP traffic using browser dev tools

Week 2: Advanced HTML and CSS Layouts

Learning Objectives:

 Design aesthetically appealing web interfaces.

 Implement responsive and adaptive designs.

Tools & Technologies:

 HTML5, CSS3, Flexbox, Grid, Bootstrap

Tasks:

 Create multi-column layouts using Grid/Flexbox.

 Implement a responsive navigation bar.

Week 3: Client-Side Scripting with JavaScript and DOM

Learning Objectives:

 Manipulate the DOM using JavaScript.

 Enhance interactivity on web pages.

Tools & Technologies:

 JavaScript, DOM API, jQuery (optional)

Tasks:
  Form validation
 Interactive UI components (modals, tabs)

Week 4: Introduction to Server-Side Technologies

Learning Objectives:

 Understand server-side scripting concepts.

 Set up a local development environment.

Tools & Technologies:

 PHP, XAMPP/LAMP, Apache

Tasks:

 Install and configure local server

 Write basic PHP scripts (form processing, output)

Week 5: PHP and Dynamic Web Pages

Learning Objectives:

 Use PHP to create dynamic content.

 Handle form input and user sessions.

Tools & Technologies:

 PHP, Sessions, Cookies

Tasks:

 User registration form with validation and session handling

 Use cookies for personalized greeting

Week 6: CAT 1

Assessment Focus:

 Networking basics
 HTML/CSS/JavaScript interactivity
 Basic PHP concepts

Tools:

 Written and practical test on covered content

Week 7: Database Integration with PHP

Learning Objectives:

 Connect to databases using PHP.

 Perform CRUD operations.

Tools & Technologies:

 MySQL, PHPMyAdmin, PDO/MySQLi

Tasks:

 Create a contact form with DB insert

 Display DB records in a table

Week 8: Object-Oriented Programming in PHP

Learning Objectives:

 Use object-oriented principles in PHP.

 Create reusable components.

Tools & Technologies:

 PHP OOP (classes, properties, methods)

Tasks:

 Build a simple blog using OOP (post class, user class)

Week 9: Web Architecture and Multi-Tier Applications

Learning Objectives:

 Understand and apply multi-tier architecture.

 Separate concerns (UI, business logic, DB)

Tools & Technologies:

 MVC Design Pattern, PHP

Tasks:

 Refactor blog from Week 8 using MVC structure

 Discuss N-tier design and component roles

Week 10: CAT 2

Assessment Focus:
  PHP and database integration
 OOP and MVC principles
 Server-client communication

Week 11: Java and Web Components

Learning Objectives:

 Understand Java servlets and JSP.

 Manage sessions and cookies with Java.

Tools & Technologies:

 Java Servlets, JSP, Tomcat

Tasks:

 Build a servlet-based login system

 Compare PHP vs Java server-side development

Week 12: ASP.NET and Web Application Development

Learning Objectives:

 Build a basic ASP.NET Web Forms application.

 Manage events and data flow in ASP.NET.

Tools & Technologies:

 Visual Studio, ASP.NET Web Forms

Tasks:

 Build a form with validation and session management

 Connect to a database using ADO.NET

Week 13: Special Topics & Security in Web Development

Learning Objectives:

 Explore web security principles.

 Introduce secure directory access and search integration.

Tools & Technologies:

 LDAP, HTTPS, CORBA, RMI (overview)

Tasks:
  Discuss secure authentication practices
 Case study: Secure login and LDAP overview

Week 14: Project Presentation & Course Wrap-Up

Learning Objectives:

 Present and defend a full-stack web project.

 Evaluate peers’ work and provide feedback.

Tools & Technologies:

 Any stack used during the semester (PHP/MySQL, Java, ASP.NET)

Tasks:

 Final project presentation

 Reflection on learning outcomes
 Course evaluation
WEEK 1: Introduction to Advanced Web Design

Learning Objectives

By the end of this week, students should be able to:

 Understand the scope and goals of advanced web design.

 Explain key networking and web fundamentals (IP, HTTP, sockets, etc.).
 Identify the major components of the web (client-side and server-side).
 Use browser tools to inspect and analyze web traffic.

Tools and Technologies

 Browsers (Google Chrome, Mozilla Firefox)

 Browser Developer Tools (Chrome DevTools or Firefox DevTools)
 Local Web Server (XAMPP, WAMP, or LAMP for future weeks)
 Notepad++ / VS Code (code editor)

Key Definitions and Concepts

Term Definition
IP (Internet Protocol) A set of rules that govern how data is sent and received
over the internet. It provides addresses for devices on a
network.
TCP (Transmission A protocol that ensures reliable and ordered delivery of
Control Protocol) data over the internet.
HTTP (HyperText The protocol used by web browsers and servers to
Transfer Protocol) communicate and exchange web pages.
Socket A software structure that allows communication
between two computers over a network.
Client-side Code that runs in the user's browser, e.g., HTML, CSS,
JavaScript.
Server-side Code that runs on the server to process requests, e.g.,
PHP, Java, ASP.NET.
Browser A software application used to access and display web
pages (e.g., Chrome, Firefox).
HTML (HyperText The standard language used to create web pages.
Markup Language)
JavaScript A programming language used to create dynamic and
interactive effects on web pages.
Web Server A computer that delivers web content to a client
(browser) via HTTP.

Class Tasks

1. Use Chrome DevTools to:

o View HTML structure of a webpage.
 o Inspect elements and see applied CSS.
o Monitor network activity (check HTTP requests).
2. Discuss how client-server communication works.

Assignment

Title: Exploring the Web Stack

Instructions:

1. In your own words, define and explain the following: IP, HTTP, TCP,
Browser, Server, Client.
2. Visit a website (e.g., https://www.wikipedia.org), and using browser
DevTools:
o List at least 3 HTTP requests made by the site.
o Identify the response status codes.
o Explain the purpose of each request.

Submission Date for the assignment given in week 1 of meetup: Next Week

Application in Real Life

 Browsing the Internet: Every time you visit a site, you use HTTP, TCP/IP,
and sockets behind the scenes.
 E-commerce: Secure web design ensures safe online shopping experiences.
 Mobile Apps: Many apps use web servers and APIs that rely on these same
technologies.

Revision Questions

1. Define the term “HTTP” and explain its role in web communication.
2. Differentiate between client-side and server-side components.
3. Explain what an IP address is and why it is important.
4. What is the purpose of a socket in networking?
5. Identify and describe three developer tools found in a browser like Chrome.
WEEK 2: Advanced HTML and CSS Layouts

Learning Objectives

By the end of this week, students should be able to:

 Create visually structured web pages using HTML5.

 Apply modern CSS techniques such as Flexbox and Grid.
 Build responsive and mobile-friendly layouts.
 Use a CSS framework (like Bootstrap) to accelerate layout development.

Tools and Technologies

 HTML5 & CSS3

 Code Editor (VS Code, Notepad++)
 Web Browsers (Google Chrome, Mozilla Firefox)
 Developer Tools (Inspect, Responsive Design Mode)
 Bootstrap 5 (optional framework for fast layout design)

Key Definitions and Concepts

Term Definition
The latest version of the HTML standard used to structure content
HTML5
on the web.
The latest standard of CSS used to style web content (colors,
CSS3
layouts, fonts).
Responsive A design approach that makes web pages look good on all devices
Design (desktops, tablets, phones).
A CSS layout module for aligning items in one direction (row or
Flexbox
column).
A CSS layout system for creating complex two-dimensional
Grid
layouts.
Media Queries CSS rules used to apply styles based on screen size or device type.
A popular front-end CSS framework that helps design responsive
Bootstrap
and styled interfaces quickly.

Class Tasks

1. Design a basic webpage layout using:

o A header
o A navigation menu
o A content area
o A sidebar
o A footer
2. Create two versions:
o One using Flexbox
 o Another using CSS Grid
3. Use media queries to adjust the layout for smaller screens (responsive
design).

Assignment

Title: Creating a Personal Web Profile (Responsive)

Instructions:

1. Create a personal profile page with the following sections:

o Header with your name
o Profile image
o About Me section
o Skills section (using a list or grid)
o Footer with contact info
2. Use either Flexbox or CSS Grid for layout.
3. Make the design responsive using media queries.

Bonus: Use Bootstrap for styling (optional).

Submission Date: Week 3

Application in Real Life

 Business Websites: Layouts make sites professional and navigable.

 Portfolio Design: Developers and designers use Flexbox and Grid to build
online CVs and portfolios.
 Mobile Compatibility: Ensures users can access and interact with websites on
all devices.

Revision Questions

1. What is the difference between Flexbox and Grid in CSS?

2. Define responsive design and explain why it is important.
3. Write a CSS rule using a media query to change text color on smaller screens.
4. How would you structure a webpage layout using HTML5 semantic tags?
5. Describe two benefits of using Bootstrap in web design.
WEEK 3: Client-Side Scripting with JavaScript and DOM + Intro
to AI-Powered Web Components

Learning Objectives

By the end of this week, students should be able to:

 Understand how JavaScript enhances interactivity on web pages.

 Manipulate the Document Object Model (DOM) using JavaScript.
 Validate forms and respond to user events dynamically.
 Explore how AI can be integrated into modern web applications.
 Propose an idea for a web-based project that integrates an AI-powered
component.

Tools and Technologies

 JavaScript (ES6+)
 HTML DOM API
 Code Editor (VS Code)
 Browser DevTools
 Optional AI APIs (OpenAI API, Google Cloud AI, IBM Watson)

Key Definitions and Concepts

Term Definition
JavaScript (JS) A client-side scripting language that adds interactivity to
web pages.
DOM (Document A programming interface for HTML documents that allows
Object Model) scripts to update content, structure, and styles dynamically.
Event Listener A JavaScript function that waits for user interaction (e.g.,
clicks, typing).
Form Validation The process of checking if user input meets required
formats or rules.
AI (Artificial The simulation of human intelligence processes by
Intelligence) machines, especially computer systems.
AI Component A software module in a website that uses AI to perform
tasks like predictions, personalization, recommendations,
etc.

Class Tasks

1. Use JavaScript to:

o Create a form with real-time validation (e.g., email, password
strength).
o Manipulate DOM elements (change content, hide/show sections).
2. Add event listeners to form fields and buttons.
3. Discuss and brainstorm how JavaScript can interact with AI-powered APIs.
Mini Project Kick-Off: AI Component in a Web-Based App

Each student/group should begin thinking of a final project that:

 Solves a real-life problem using web technologies.

 Includes one AI feature or API integration.

Project Ideas with AI Components:

Idea AI Feature
Online Mental Health Sentiment analysis of journal entries using an NLP
Journal API
E-commerce Product Product suggestions based on user history (ML-
Recommender based API)
Smart Resume Builder AI-powered grammar and content suggestions
using OpenAI API
Learning Portal Personalized quiz generation based on user
performance
Customer Service Bot Chatbot that answers common queries using AI
(Dialogflow, OpenAI)

Websites for Insight and Inspiration:

 https://www.futurepedia.io – AI tools directory

 https://www.producthunt.com – Innovative product ideas
 https://openai.com/examples – Use cases of OpenAI in websites
 https://huggingface.co – Free models/APIs for AI use
 https://github.com – Search for AI-integrated web apps

Assignment

Title: Build an Interactive Form + Project AI Idea Pitch

Instructions:

1. Create an HTML form with fields for name, email, and password.
2. Use JavaScript to:
o Validate the email format.
o Ensure password strength (length, symbols).
o Provide real-time feedback using DOM updates.
3. Separately, write a 1-page proposal:
o Project title and description.
o The AI component to be integrated.
o The expected user experience.
o APIs or tools to be used.

Submission Date: Week 4

Application in Real Life

  Form validation ensures data integrity in applications like banking and e-
commerce.
 AI-powered suggestions are used in Gmail (Smart Compose), YouTube
(recommendations), and e-commerce (product suggestions).
 Developers who understand client-side scripting + AI are in high demand in
startups and innovation hubs.

Revision Questions

1. What is the purpose of the DOM in web development?

2. How can JavaScript improve user experience on a form?
3. What is an event listener? Provide an example.
4. List two examples of websites or services using AI-powered features.
5. Suggest an AI feature you would add to a student portal website and explain
its benefit.

WEEK 4 EXTENSION: PHP, Python (Flask), and ASP.NET Code

Samples for Server-Side Form Handling

Objective Recap

Understand how different back-end technologies handle:

 Receiving form data

 Displaying/processing data
 Basic data storage/display (no database yet)

✅ 1. PHP: Form Handling Example

HTML Form
<form action="submit.php" method="POST">
Name: <input type="text" name="username"><br>
Email: <input type="email" name="email"><br>
<input type="submit" value="Submit">
</form>

PHP Script (submit.php)

<?php
// Get form data
$name = $_POST['username'];
$email = $_POST['email'];

// Display the data

echo "Hello, $name. Your email is $email.";
?>

✅ Explanation:
  $_POST['name'] accesses data submitted via POST.
 echo displays the output on the page.
 PHP runs on the server, responding with HTML to the client.

🐍 2. Python (Flask): Form Handling Example

Install Flask (only once)

pip install flask

Flask App (app.py)

from flask import Flask, request, render_template_string

app = Flask(__name__)

form_html = '''
<form method="POST">
Name: <input type="text" name="username"><br>
Email: <input type="email" name="email"><br>
<input type="submit">
</form>
'''

@app.route('/', methods=['GET', 'POST'])

def home():
if request.method == 'POST':
name = request.form['username']
email = request.form['email']
return f"Hello, {name}. Your email is {email}."
return render_template_string(form_html)

if __name__ == '__main__':
app.run(debug=True)

✅ Explanation:

 Flask is a minimal Python web framework.

 request.form is used to access POST data.
 render_template_string is a quick way to serve HTML.

💼 3. ASP.NET (C#): Form Handling in Razor Pages

HTML (Razor Syntax in .cshtml)

<form method="post">
<label>Name:</label>
<input type="text" name="username" /><br />
<label>Email:</label>
<input type="email" name="email" /><br />
<input type="submit" value="Submit" />
</form>

@if (Model.Name != null)

{
 <p>Hello, @Model.Name. Your email is @Model.Email.</p>
}

Page Model Code (C# in Index.cshtml.cs)

public class IndexModel : PageModel
{
[BindProperty]
public string Name { get; set; }

[BindProperty]
public string Email { get; set; }

public void OnPost()

{
// Data is automatically bound to Name and Email
}
}

✅ Explanation:

 ASP.NET uses Razor syntax for mixing HTML with C#.

 [BindProperty] binds form fields to properties automatically.
 Logic is separated from the HTML in .cshtml.cs.

🔍 Comparison Summary
Feature PHP Python (Flask) ASP.NET (C#)
Simplicity Very beginner- Clean and Pythonic Requires .NET
friendly tools
Form Data $_POST['name'] request.form['name'] [BindProperty] +
Access Razor
Templating Embedded HTML render_template or Razor Pages
string
Platform Apache/XAMPP Lightweight Python Visual
server Studio / .NET Core
Best For Quick web AI/ML integration Enterprise web
development (Python) apps

🧪 Sample Use Case: Data Submission for AI Feedback

Scenario: A form collects user feedback which will later be analyzed by an AI

sentiment analysis API.

 PHP: Store data in a file or database → call a Python AI script.

 Python: Handle submission + integrate AI (like OpenAI or HuggingFace).
 ASP.NET: Submit data and call Azure Cognitive Services for AI analysis.

📝 Assignment Enhancement

Updated Tasks:
 1. Choose one language (PHP, Python Flask, or ASP.NET) and:
o Create a form to collect name and email.
o Display the submitted data on a new page.
2. (Optional): Add a textarea for feedback and research how it could be sent to
an AI model/API for sentiment analysis.

✅ Real-World Skills from This Lesson

 Ability to build dynamic web forms.

 Learn how different back-end technologies process user input.
 Prepare to integrate AI APIs in web projects using chosen stacks.

Would you like me to create downloadable starter templates for each language (PHP,
Flask, ASP.NET)?