Web Application Programming

ENCT 302

 

Lecture   : 3          Year : III

Tutorial   : 1           Part : I

Practical  : 3

Course Objectives: Understand and utilize web technologies to create responsive and interactive web applications. Implement modern front-end frameworks and tools for connecting web front-ends to back-end APIs and databases, as well as exploring and evaluating current trends and future prospects in web development.

 

1. Introduction                                                                                                         (6 Hours)
   1. Overview of Web Applications & Evolution of Web Architecture
   2. Client-Server Architecture, HTTP, HTTPS, URLs, DNS, Web Browsers
   3. HTML Basics: Syntax, Tags, Attributes, Forms & Inputs, Tables, Lists, Multimedia, Semantic HTML5 Elements
   4. CSS Basics: Selectors, Properties, Values, Box Model
   5. CSS framework: Bootstrap

 

1. JavaScript and Client-Side Programming                                                      (12 Hours)
   1. JavaScript Essentials
      1. Data Types, Variables, Control Structures, Functions
      2. DOM Manipulation, Events, and Form Validation
      3. Local Storage & Session Storage
      4. GUI Interactions
      5. Javascript library: jQuery
   2. Modern JavaScript (ES6+)
      1. Arrow Functions, Destructuring, Spread/Rest Operators
      2. Callbacks, Promises, Async/Await
      3. Modules and Imports
   3. Client-Side Applications
      1. Client-side Web application development using  React JS library
      2. Traditional Multi-Page Apps vs Single-Page Apps (SPAs)
      3. Component-Based UI & Props
      4. State Management and Data Flow
      5. Client-Side Routing & Navigation without Reloads
      6. Fetch API: Fetching, Displaying Data, Handling Errors & Loading States
      7. Comparison of modern javascript libraries: React, Angular , Vue

 

3. Server-Side Web Programming                                                                          (9 Hours)
   1. introduction to MVC architecture in web development
   2. Role of Backend in Web Applications
   3. Backend Web framework: Django
   4. Handling Requests & Responses
   5. Form Data Handling & Sessions
   6. Routing, Middleware, Templating Concepts
   7. Overview and comparison of backend Frameworks: Django, Flask, FastAPI, dot NET MVC framework, Ruby on Rails, Java Spring Boot, Node.js
   8. Database Integration: Relational vs NoSQL, CRUD Operations, ORM Concept
   9. Authentication & Authorization: Cookies, Sessions, JWT
   10. Middleware for Logging, Error Handling, and Security

 

4. Web Services & APIs                                                                                           (7 Hours)
   1. API Basics: Role in Web Applications
   2. REST Principles and Design, RESTful APIs
   3. JSON vs XML Data Exchange
   4. Data Validation & Serialization
   5. Microservices

 

5. Web Application Security                                                                                   (6 Hours)
   1. Common Vulnerabilities: XSS, SQL Injection, CSRF
   2. Security Best Practices: Input Validation, Sanitization, HTTPS, Secure Cookies, Env Variables
   3. Authentication Practices & Token Handling
   4. Security in Full-Stack Apps: CORS, Safe Sessions

 

6. Web Application Deployment and Modern Trends                                         (5 Hours)
   1. Full-stack development
   2. Testing and QA
   3. DevOps, Continuous Integration (CI) and Continuous Delivery (CD)
   4. Progressive Web Apps (PWAs), responsive design and usability

 

Tutorial                                                                                                                           (15 Hours)

1. Introduction (2 hrs)
   1. Walkthrough of client-server request flow (DNS → HTTP/HTTPS → Browser).
   2. Guided coding: HTML page with semantic tags, styled with CSS grid/flexbox.
   3. JavaScript & Client-Side Programming (4 hrs)
   4. Hands-on exercises with DOM manipulation, event handling.
   5. Form validation & local storage demo.
   6. Guided task: Small SPA with component-based UI and fetch API integration.
2. Server-Side Web Programming (3 hrs)
   1. Discuss request/response cycle with server framework.
   2. Guided coding: Simple CRUD using Django/Flask (e.g., library system).
   3. Session handling and authentication example.
3. Web Services & APIs (2 hrs)
   1. REST principles with examples.
   2. Hands-on exercise: Build a simple REST API endpoint and test with fetch/Postman.
4. Web Application Security (2 hrs)
   1. Demonstration of XSS & SQL Injection vulnerabilities.
   2. Guided exercise: Secure login form with input validation and session/token handling.
5. Trends in Web Application Development (2 hrs)
   1. Discussion on PWAs, serverless, microservices.
   2. Case study/tutorial: Compare a traditional app vs PWA features.

 

Laboratory Works

1. Build a responsive personal portfolio page using semantic HTML5, CSS grid/flexbox, and media queries.
2. Create a dynamic to-do list app with DOM events, LocalStorage, and JavaScript event handling (using jQuery)
3. Develop a CRUD application (e.g., Library System) using a server-side framework (Django/Flask/FastAPI).
4. Create a frontend in React that fetches data from your backend API and displays it dynamically.
5. Extend the CRUD app with user authentication (login/logout), form validation, and secure token/session handling.
6. Develop a comprehensive project that encompasses the complete process of front-end and back-end web application development and deployment. The project should be carried out over at least six to seven lab sessions, covering the following stages: project proposal, front-end UI/UX design, back-end and database design, API design and integration, testing and deployment, and culminating in a final presentation and demonstration.

 

Textbook

• Flávio Copes, The Modern JavaScript Handbook
• Robin Nixon, Learning Web Development with HTML, CSS, JavaScript, and PHP
• William S. Vincent, Django for Beginners: Build websites with Python and Django (for server-side programming)
• Leonard Richardson & Mike Amundsen, RESTful Web APIs (for web services & APIs)
• Andrew Hoffman, Web Application Security: Exploitation and Countermeasures for Modern Web Applications (for web application security)

Reference Books

• Marijn Haverbeke, Eloquent JavaScript
• MDN Web Docs (Mozilla) – authoritative reference for HTML, CSS, JS, APIs
• W3Schools – supplementary practice
• Django Documentation: https://docs.djangoproject.com/en/5.2/
• FastAPI documentation: https://fastapi.tiangolo.com/tutorial/ 
• React Documentation: https://react.dev/learn 
• Js tutorial: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide 

 

Final Exam

The question will cover all the chapters of the syllabus. The evaluation scheme will be as indicated in the table below:

 

• There may be minor deviation in marks distribution