Project Environment 2
Forms
Following the tutorial, we can read data from the database successfully.
Usually, however, we want to allow users to specify parameter values as part of their requests – for example, to specify a search string – rather than displaying and selecting the way you did in the tutorial.
2
Also, at the moment, we must use Django Admin to create the data.
In most real-world applications we want to allow regular users to work with data to:
Create, Read, Update, Delete it.
COMP3297: Software Engineering
How?
No surprise – we use forms to allow users to interact with our application and pass data.
A form in your app “asks a question” that the user “answers” by interacting with the form.
We can use HTML forms in templates, between
tags.
A form takes user input and sends it to a URL using either a GET or POST method. We need to specify where the data goes to, and then how it is handled when it gets there.
For use of GET and POST, follow the old rule:
Only use GET for requests that:
– don’t change system state, and
– that carry only small amounts of non-sensitive data.
COMP3297: Software Engineering
3
GET for search
A typical use of GET is for search forms – there is no state change involved and query strings are usually short and non-sensitive.
Easy to code a simple form to allow users to search for data that matches their criteria.
It is a two-step process. We need:
– the form for the user to supply a search query – the filtering that will generate the result
COMP3297: Software Engineering 4
Example
Say we have the following Model for an app, courses, that manages data related to Courses.
At the moment we record only Course Code and Course Name.
COMP3297: Software Engineering
5
Let’s build a page to allow users to Find courses with codes that contain specified strings
First, add some Courses via Django Admin
COMP3297: Software Engineering 6
What pages do we need for this simple Find feature?
We already have the Model in place. What do we need to hang in the Django framework for each page?
As usual:
A page for the user to enter a query string A page to display the results
The parts of the URL configuration tree to identify a View The View itself
The Template for presentation to the user
COMP3297: Software Engineering 7
Views
We’ll use Django’s built-in class-based generic views you already know from the tutorial:
The simple TemplateView to render the Find Course page template for the user
ListView for the results
COMP3297: Software Engineering
8
ResultsView will just render the template with the default-named object_list in the context. This contains all courses.
No filtering yet.
Templates
find_courses.html
We’ll add the form here later.
results.html
COMP3297: Software Engineering 9
URLConfs
At the project level
At the app level
COMP3297: Software Engineering 10
Quick check ../find/
COMP3297: Software Engineering 11
Quick check ../results/
COMP3297: Software Engineering 12
Templates: Add the form
A basic form takes user input and then sends it to a URL using either a GET or POST method
Where to redirect the user following submission
Using GET
find_courses.html
COMP3297: Software Engineering
13
Naming the user’s input. We’ll refer to it later using this name
Prompt
Quick check ../find/
COMP3297: Software Engineering 14
Views: filter based on user’s query string in the request
Overrides ListView’s get_queryset() method called to set object_list.
COMP3297: Software Engineering
15
Case-insensitive matching
Quick check ../results/
COMP3297: Software Engineering 16
Templates:
For convenience, add a button to submit the form
find_courses.html
COMP3297: Software Engineering 17
COMP3297: Software Engineering 18
Styling
Not a requirement, but if you want to style your pages, two popular CSS frameworks you could consider are:
Bulma: https://bulma.io/ Bootstrap: https://getbootstrap.com/
COMP3297: Software Engineering
19