Why I built a webform with Django.
Building a webform to connect SQL and Python
Recently I spent some time leveling-up my SQL skills so that I could write more complex queries and work with larger databases.
Once I had done this I wanted to apply my data structure knowledge to a project — I have experience with Django, having built a portfolio website with the framework, and as it ships with SQLite as default it is ready to go straight out of the box.
The idea of the project was to build a start-up landing page, where you could enter your details to join the newsletter and receive updates about the launch of the company. I also built an about and contact page to make the project more well rounded.
In this article I am only going to touch on the parts that relate to the Django database — if you would like to review my code for the whole project, please visit my github page.
The user is asked to input their: first name, last name, age, email and password. A good place to start is our models.py file — this is where Django connects to the SQLite database and where each of the object’s data types is defined.
From the official Django documentation — “A model is the single, definitive source of information about your data. It contains the essential fields and behaviors of the data you’re storing. Generally, each model maps to a single database table.”
Let’s translate this from Django into a SQL way of thinking about how our data is structured:
class Member(models.Model): fname = models.CharField(max_length=50) lname = models.CharField(max_length=50) email = models.EmailField(max_length=50) password = models.CharField(max_length=50) age = models.IntegerField() def __str__(self): return self.fname + ' ' + self.lname
Member is our class, the equivalent of a SQL table name. The name of each object is equivalent to a SQL column header. And finally the field type is the equivalent to data type is SQL. Essentially Django is the bridge between Python and SQL here.
Once we have built the class it is migrated and the table is created in the SQLite database.
To make this useful, something (a webform) needs to be created on the frontend to save the information on the backend.
In the forms.py file a form class is created and the database objects are referred to as per their object names in models.py. This created a connection between models.py and views.py.
class MemberForm(forms.ModelForm):
class Meta:
model = Member
fields = ['fname', 'lname', 'email', 'passwd', 'age']Turning to the views.py file a function is created that defines what content will be generated for the user depending on the request, i.e. whether the user has clicked the submit button on the form or not.
def home(request):
if request.method == "POST":
form = MemberForm(request.POST or None)
if form.is_valid():
form.save()
else:
fname = request.POST['fname']
lname = request.POST['lname']
age = request.POST['age']
email = request.POST['email']
passwd = request.POST['passwd'] messages.success(request, ('There was an error in your form.'))
return render(request, 'home.html', {'fname':fname,
'lname':lname,
'age':age,
'email':email,
'passwd': passwd,
}) messages.success(request, ('Your Form Has Been Submitted Successfully!'))
return redirect('home') else:
return render(request, 'home.html', {})
Working through the code, if the user has completed the form and it is valid (all fields have been correctly filled) the information is saved on the backend and the user gets a message confirming this — great the start-up is building a following!
If the user has completed the form but incorrectly (we want clean data on the database), the user is prompted with a message, the valid data remains in the field(s) and the user can re-enter the information that was not correct the first time.
Else, the user has not submitted the form (they have just landed on the homepage) and the home.html file is served.
Now the form is set up and the website is live, the start-up will build up its database with information generated by people visiting the website. A practical use of this data would be to then set up a mailing list where each email is personalised to the recipient given the information they have provided on the form.
Points to note:
- A password is requested as the company may build login functionality on the website, so when the company launches the user will already have an account set up and login.
- This project used Bootstrap 5 for styling and structure
