COM2025-Lecture01

TYPES OF WEB APPLICATIONS

  • Dynamic Web Applications

  • Static Web Applications

  • Web Portals

  • E-Commerce Applications

  • Content Management System (CMS)

  • Progressive Web Apps

  • Frameworks

Key Components of a Web Application

  • Important for understanding architecture and development processes.

Module Aims

  • Learn how to build interactive web apps.

  • Develop using Django (Python framework).

  • Understand design principles like Model-View-Controller (MVC).

Django: A Python Framework

Key Features of Django

  • Promotion of good design.

  • Minimization of effort.

  • Code reusability.

  • Database integration using Object-Relational Mapping (ORM).

  • Flexibility in development environment.

Why Use Django?

  • Full power and flexibility of Python.

  • Embraces the DRY (Don't Repeat Yourself) principle.

Development Efficiency

  • Tasks made faster and more efficient.

  • Supports elegant design for quality assurance.

Module Learning Outcomes

  • Overview of technologies for client-server systems and interactive web applications.

  • Develop skills to build basic interactive web apps.

  • Familiarize with standards-based design for web applications.

By January You Should Be Able To

  1. Understand client-server and 3-tier architectures.

  2. Understand the MVC pattern.

  3. Use JavaScript and React.

  4. Utilize Django with Python.

  5. Be aware of related frameworks.

  6. Architect a web application.

Teaching Plan Overview

  1. Web architecture and frameworks.

  2. Models and databases.

  3. Routing and API design.

  4. Templates and class-based views.

  5. Authentication and authorization; functionality like mailers.

  6. Development processes and testing.

  7. JavaScript frameworks and libraries.

  8. SPAs, React, and build systems.

  9. UX, responsive design, CSS.

  10. Accessibility and web standards.

  11. Future web developments.

Delivery Structure

  • 2 hours of online lectures; 2 hours of labs.

  • Recordings and videos provided.

  • Lab classes to experiment with Python, Django, and JavaScript.

  • Self-study resources available to complete lab exercises.

Assessment Details

  • Project (50%): Develop a Django web app; details on SurreyLearn (Week 5), due in Week 11.

  • Online Exam (50%): Revision class after Christmas break.

Feedback Structure

  • Formative feedback during lab classes for questions and progress review.

  • Ensure attendance for effective feedback.

Development Environments

  • Use command line on Linux or IDEs such as Atom, Vscode, Pydev, or Pycharm.

  • Ensure final versions run on lab machines.

  • Access Django installation via terminal commands.

Recommended Texts

  • A good starting text for developing web apps with Django.

  • Online resources are also excellent and are optional.

Additional Resources

  • Python: https://www.codecademy.com/

  • Django Documentation: https://docs.djangoproject.com/en/4.1/

  • JavaScript: http://www.w3schools.com/js/

  • Various online resources for HTML5, CSS3, etc.

Take Home Message

  • Transition from PC/mobile programming to web applications that utilize MVC architecture with database integration.

Overview of Today's Session

  • Introduction to basic web apps and technologies.

  • Overview of Django structure.

  • Introduction to Python syntax.

HTTP Overview

  • Application level protocol for web communication known as HTTP.

  • Involves request-response cycle where a client sends a request to the server, which replies with a response.

Response Structure in HTTP

  • Request Structure:

    • HTTP Verb (CRUD Method)

    • URL

    • Protocol Version

    • Optional headers and body.

Frontend, Fullstack, Backend Concepts

  • Understanding distinctions between each role in web application development.

Variations of HTTP

  • Introduction to HTTPS and QUIC.

  • HTTPS for secure connections using cryptography.

  • QUIC for faster performance using UDP.

URLs, IPs, and Ports

  • Explanation of how they work in web navigation and testing.

Response Codes

  • Understanding codes such as 404 (Not Found), 401 (Unauthorized), 403 (Forbidden).

  • Importance in web development for debugging.

Legacy vs Modern Web Applications

  • Differences in architecture; legacy applications mostly server-computed while modern applications are more interactive.

Three-Tier Architecture Basics

  • Client Tier: User interface, typically in a web browser.

  • Application Tier: Business logic, handling service requests.

  • Data Tier: Where application data is stored and managed.

Why Django?

  • Promotes agile development and the DRY principle to avoid repetitive code.

Top Web Server-side Languages

  • Popular frameworks include Laravel, Django, Flask, Ruby on Rails, and more.

Popular Programming Languages

  • Python is the second most popular language among developers.

Evaluating PHP

  • Pros: Popular and easy to use.

  • Cons: Legacy issues and performance perceptions relative to modern languages like Python.

Importance of Learning Django and Python

  • Skills applicable across future modules and other frameworks.

Model-View-Controller (MVC) Concept

  • Understanding its role in structuring web application development.

Anatomy of a Django App

  • Structure includes files for management and settings.

  • Each web application consists of smaller apps for modular functionality.

Using Django: Creating an App

  • Steps to create and run a Django application, preparing it for deployment.

Introduction to Python

  • Overview of Python’s features and its interpretations.

Basic Python Syntax

  • Includes indentation, comments, and data types.

Python Flow Control Structures

  • If-Else statements and loops (for and while).

Defining and Calling Functions

  • Function definitions, argument passing techniques, and scoped variable behavior.

Data Structures: Lists and Dictionaries

  • Characteristics and common methods of use in Python applications.

Advanced Data Structures: Tuples

  • Immutable collections of values and their uses.

Classes in Python

  • Class structure, instantiation, self parameter, and instance initialisation.