Web Application Programming

Course Title: Web Application Programming

Course No: ENCT 302

Nature of the Course: Theory + Lab

Semester: 5

Full Marks: 40 + 60 + 50

Pass Marks: 16 + 24 + 20

Credit Hours: 3

Course Description

This course provides a comprehensive understanding of web technologies for developing responsive and interactive web applications. It emphasizes the use of modern front-end frameworks and tools, as well as techniques for integrating front-end interfaces with back-end APIs and databases.

Course Objectives

The objective of this course is to provide comprehensive understanding of web technologies for developing responsive and interactive web applications. The course emphasizes the use of modern front-end frameworks and tools, as well as techniques for integrating front-end interfaces with back-end APIs and databases. By the end of the course, students will be able to design, implement and evaluate contemporary applications while exploring current trends and future directions in web development.

Course Contents

1. Introduction

6 hrs8 marks

1.1. Overview of web applications and evolution of web architecture

1.2. Client-server architecture, HTTP, HTTPS, URLs, DNS, web browsers

1.3. Html basics: Syntax, tags, attributes, forms and inputs, tables, lists, multimedia, semantic HTML5 elements

1.4. CSS basics: Selectors, properties, values, box model

1.5. CSS framework: Bootstrap

2. JavaScript and Client-Side Programming

12 hrs16 marks

2.1. JavaScript essentials

Data types, variables, control structures, functions

Dom manipulation, events, and form validation

Local storage and session storage

GUI interactions

JavaScript library: jQuery

2.2. Modern JavaScript (ES6+)

Arrow functions, destructuring, spread/rest operators

Callbacks, promises, async/await

Modules and imports

2.3. Client-side applications

Client-side web application development using React JS library

Traditional multi-page apps vs. single-page apps (SPAs)

Component-based UI and props

State management and data flow

Client-side routing and navigation without reloads

Fetch API: Fetching, displaying data, handling errors and loading states

Comparison of modern JavaScript libraries: React, Angular, Vue

3. Server-Side Web Programming

9 hrs12 marks

3.1. MVC architecture in web development

3.2. Role of backend in web applications

3.3. Backend web framework: Django

3.4. Handling requests and responses

3.5. Form data handling and sessions

3.6. Routing, middleware, templating concepts

3.7. Overview and comparison of backend frameworks: Django, flask, fastapi, dot NET MVC framework, ruby on rails, java spring boot, node.js

3.8. Database integration: Relational versus NoSQL, CRUD operations, ORM concept

3.9. Authentication and authorization: Cookies, sessions, JWT

3.10. Middleware for logging, error handling, and security

4. Web Services and APIs

7 hrs9 marks

4.1. API basics: Role in web applications

4.2. REST principles and design, RESTful APIs

4.3. JSON versus XML data exchange

4.4. Data validation and serialization

4.5. Microservices

5. Web Application Security

6 hrs8 marks

5.1. Common vulnerabilities: XSS, SQL injection, CSRF

5.2. Security best practices: Input validation, sanitization, https, secure cookies, env variables

5.3. Authentication practices and token handling

5.4. Security in full-stack apps: CORS, safe sessions

6. Web Application Deployment and Modern Trends

5 hrs7 marks

6.1. Full-stack development

6.2. Testing and QA

6.3. DevOps, continuous integration (CI) and continuous delivery (CD)

6.4. Progressive web apps (PWAs), responsive design and usability

Laboratory Works

Practical sessions covering responsive portfolio page, dynamic to-do list app, CRUD application using server-side framework, React frontend with backend API integration, user authentication, and a comprehensive full-stack project covering proposal, UI/UX design, back-end and database design, API design and integration, testing, deployment, and final presentation. (45 hours)

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.Design, develop, test, and deploy a full-stack web application over 6–7 lab sessions, covering project proposal, UI/UX design, database and back-end development, API integration, testing, deployment, and final presentation and demonstration..

Text Books

1.Copes, F. (2019). The JavaScript Handbook. (https://flaviocopes.com/the-javascript-handbook-2019-edition/)
2.Nixon, R. (2025). Learning PHP, MySQL & JavaScript: A Step-by-Step Guide to Creating Dynamic Websites. O'Reilly Media.

Reference Books

1.Vincent, W. S. (2025). Django for Beginners: Build websites with Python and Django.
2.Richardson, L., & Amundsen, M. (2013). RESTful Web APIs: Services for a Changing World. O'Reilly Media.
3.Hoffman, A. (2024). Web Application Security: Exploitation and Countermeasures for Modern Web Applications (2nd ed.). O'Reilly Media.

Notes:

This syllabus follows the official BCT curriculum of Tribhuwan University. In case of any doubt or revision, the university's published syllabus shall be considered authoritative. https://ioe.tu.edu.np/pages/computer-engineering-curriculum-structure-2635

Web Application Programming

Web Application Programming

Select University

Select Program

TabFlux . Web Application Programming . TU . BCT-NEW