Embedded Files
PROGRAMMING FOR THE WEB: PWA ASSESSMENT
Introduction
Introduction
This guide will help you get started with the User Interface and Design section of your assessment task. We'll cover setting up templates, implementing responsive design with Bootstrap, and adding custom styling.
1. Template Structure
1. Template Structure
Setting up base.html
Setting up base.html
First, let's create a base.html template that other templates will extend.
This template will include the basic HTML structure, Bootstrap CSS and JS, and any common elements like the navbar.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{% block title %}My Inventory App{% endblock %}</title>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link rel="stylesheet" href="{{ url_for('static', filename='css/custom.css') }}">
</head>
<body>
<!-- Add your navbar here -->
<!-- Container for content -->
<div class="container mt-4">
{% block content %}
{% endblock %}
</div>
<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
Creating other templates
Creating other templates
Now, create templates for other pages (e.g., index.html, add_item.html, edit_item.html, view_item.html) that extend the base template:
{% extends "base.html" %}
{% block title %}Home{% endblock %}
{% block content %}
<h1>Welcome to My Inventory App</h1>
<!-- Add your page-specific content here -->
{% endblock %}
Updating Routes for GET and POST Requests
Updating Routes for GET and POST Requests
When creating pages like add_item.html, you'll need to update your routes to handle both GET and POST requests. The GET request will display the form, while the POST request will handle form submission. Here's an example of how to modify your add_item route:
@app.route('/add', methods=['GET', 'POST'])
def add_item():
if request.method == 'POST':
# Handle form submission (POST request)
# Extract item data from form
# Add item to database
# Redirect to a success page or item list
return redirect(url_for('index'))
else:
# Display the add item form (GET request)
return render_template('add_item.html')
2. Responsive Layout
2. Responsive Layout
Bootstrap's grid system is based on a 12-column layout. Use the following classes to create responsive layouts:
.container or .container-fluid for the main wrapper
.row for horizontal groups of columns
.col-*, .col-sm-*, .col-md-*, .col-lg-*, .col-xl-* for columns with different breakpoints
Adjust the width of your browser window, or even use Dev Tools to see the boxes below adapt to different layouts.
Example:
<div class="container">
<div class="row">
<div class="col-12 col-md-6 col-lg-4">
<!-- This column will be full width on small screens,
half width on medium screens,
and one-third width on large screens -->
</div>
</div>
</div>
3. Bootstrap Components
3. Bootstrap Components
Some of the suggested Boostrap components to use in your application include:
Navbar: Use a navbar to create a consistent navigation menu across all pages, with links to view all items, add new items, and potentially filter or search the database.
Cards: Implement cards to display individual items (e.g., books, movies, or games) in a visually appealing grid layout, showing key information like title, image, and brief description.
Forms: Utilise Bootstrap's form components to create structured and responsive forms for adding new items or editing existing ones in your database.
Modal: (Extra challenge) Implement modals as an alternative to separate pages for actions like adding, editing, or deleting items, providing a smoother user experience without page reloads.
Example:
Example:
The example below utilises the four components above to create a movie collection.
4. Custom Styling
4. Custom Styling
To add custom styles without interfering with Bootstrap, create a separate CSS file (e.g., custom.css) and link it after the Bootstrap CSS in your base.html. From here you can identify and add onto the various Bootstrap classes you are using. E.g. .card.
Example custom.css
/* Custom styles for cards */
.card {
transition: transform 0.3s ease-in-out;
}
.card:hover {
transform: scale(1.05);
}
/* Custom button style */
.btn-custom {
background-color: #6c5ce7;
color: white;
}
.btn-custom:hover {
background-color: #5541d8;
color: white;
}
/* Custom background for specific sections */
.custom-bg {
background-color: #f0f0f0;
padding: 20px;
border-radius: 10px;
}
In your html files:
<div class="custom-bg">
<div class="card">
<!-- Card content -->
</div>
<button class="btn btn-custom">Custom Button</button>
</div>
Example:
Example:
This is the same example from before (which was pure Bootstrap), now styled with a little custom css.
Remember to test your design on various screen sizes to ensure responsiveness, and use browser developer tools to inspect and adjust your layout as needed. Code and test only one thing at a time.
Page updated
Report abuse