Embedded Files
PROGRAMMING FOR THE WEB: PWA ASSESSMENT
1. Project Structure (5 marks)
1. Project Structure (5 marks)
A well-organised project structure is crucial for managing your Flask application effectively. It makes collaboration easier, simplifies debugging, and allows for easier expansion of your project.
1.1 Folder Structure
1.1 Folder Structure
Here's a recommended folder structure for your Flask project:
/your_project_name
|-- /static
| |-- /css
| |-- /js
| |-- /images
|-- /templates
| |-- index.html
| |-- base.html
|-- models.py
|-- views.py
|-- app.py
|-- .gitignore
1.2 Key Files and Their Roles
1.2 Key Files and Their Roles
/static/: Contains static assets like CSS, JavaScript, and images.
/css/: Store your CSS files here (e.g., main.css, forms.css).
/js/: JavaScript files go here (e.g., script.js).
/images/: Place your image files in this directory.
/templates/: Holds all HTML templates (e.g., base.html, index.html, edit.html).
models.py: Contains your database models
views.py: Stores route handlers
app.py: The main application file where you initialize Flask and bring everything together.
.gitignore: Specifies which files and directories Git should ignore.
1.3 Setting Up Version Control with Git
1.3 Setting Up Version Control with Git
Clone the empty repository provided through GitHub Classroom:
git clone <repository-url>
cd <your-project-name>
1.4 Virtual Environment and Dependencies
1.4 Virtual Environment and Dependencies
Lets setup the virtual environment and install dependencies.
Create Virtual Environment:
python -m venv venv
Mac: source venv/bin/activate
Windows: venv\Scripts\activate
Install Dependencies:
pip install flask flask_sqlalchemy
2. Database Schema Design (5 marks)
2. Database Schema Design (5 marks)
A well-designed database schema is the foundation of any data-driven web application.
For this guide, we'll design an example schema for a Task Manager application.
2.1 Choosing Database Columns
2.1 Choosing Database Columns
For the Task Manager example, we'll need to store information about tasks. Here's a suggested schema:
id (integer): A unique identifier for each task.
title (text): The title or brief description of the task.
description (text): A more detailed description of the task (optional).
due_date (date): The deadline for the task.
priority (integer): The priority level of the task (e.g., 1 for high, 2 for medium, 3 for low).
2.2 Creating Models with SQLAlchemy
2.2 Creating Models with SQLAlchemy
In your models.py file, use SQLAlchemy to define your database schema.
Here's an example for the Task Manager application - showing various data types in use:
from flask_sqlalchemy import SQLAlchemy
from datetime import datetime
db = SQLAlchemy()
class Task(db.Model):
id = db.Column(db.Integer, primary_key=True)
title = db.Column(db.String(100), nullable=False)
description = db.Column(db.Text)
due_date = db.Column(db.Date, nullable=False)
priority = db.Column(db.Integer, nullable=False)
completed = db.Column(db.Boolean, default=False)
created_at = db.Column(db.DateTime, default=datetime.utcnow)
def __repr__(self):
return f'<Task {self.title}>'
2.3 Why Use a Separate Models File?
2.3 Why Use a Separate Models File?
Using a separate models.py file offers several benefits:
Separation of Concerns: It keeps database logic separate from route handling.
Reusability: Models can be easily imported and used in different parts of your application.
Maintainability: Changes to your data structure are centralized in one file.
To use your models, import them in your views.py or wherever you define routes:
from models import db, Task - Rename 'Task' to your model name
3. Screen Design (5 marks)
3. Screen Design (5 marks)
Effective screen design ensures that your application is user-friendly and visually appealing.
Let's plan the main screens for our Task Manager application:
3.1 Creating Wireframes
3.1 Creating Wireframes
To plan your screens, you should create wireframes for the main pages of your application. Here are some suggestions:
Home Page
Add Item Form
Edit Item Form
Single Item View
Tools for creating wireframes:
Figma (free for up to 3 designs)
Wireframe.cc (simple, browser-based tool)
Go simple: Paper, Google Drawings, MS Paint
3.2 Responsive Design
3.2 Responsive Design
Responsive design ensures your application looks good and functions well on both desktop and mobile devices. When creating your wireframes or mockups, you need to design layouts for both desktop and mobile views. Bootstrap makes it easy to create responsive designs that work well on both desktop and mobile devices. We will discuss this more in detail later, but for now have a plan for how you would like it to look.
When creating your designs:
Start with either desktop or mobile layout first, then adapt for the other.
Consider how elements will reflow or resize between desktop and mobile layouts.
Page updated
Report abuse