Web Hosting Using Python Part 4 (Routes and Links in Flask)
By: Ayush Kalla
Tags: HTML, Forms, Web Development, Flask

Hello everyone, in the previous story we looked at how we can render external files in the Flask environment and what are the benefits in doing so (Link here). Since we plan to use Flask as a server for our website, it is highly likely that our website will have multiple webpages, and those webpages will be linked together. Let’s take a look at how to add multiple webpages to our server.

The Task

For this and the following few stories let us consider that we have the task to create a website that allows a user to sign-in, sends them an email upon sign-in, stores their credentials in a SQL database and allows the users to login later.

Adding Multiple HTML Pages

Home Page

Here, the first page is the Home Page that is shows to the User by default. Note on line 11, a link to another HTML page is referenced in the url_for() function. Clicking this link will redirect us to the ‘signup’ page once it is created.

Sign Up Page

Above we have created a sign-up page which will be shown when the user clicks the redirect link from the home page or tries to access the signup page directly (we will talk about this later in the story). Note that this page includes a traditional HTML form with the only difference on line 10 where the function url_for() is used to redirect to the success page when the form is filled and posted. We will create the ‘success.html’ page (which is displayed upon entering the form details correctly ) in the next step. The use of the url_for() function is mentioned in the previous story.

Sign Up success Page

In the code snippet above, we have created an HTML page which will be displayed once the user successfully signs up. Note on line 10, the name of the user who signed up is displayed. We will take a look at how to access the user name from the form to the ‘success.html’ page in a short while.

Adding the pages to the Flask Server

Python File

Once we have created the new HTML files (which needs to be located in the templates folder), we now need to route these pages on the server.

On line 4 in the above example we can see that parameter passed is ‘/’, which signifies that the below written line of code will be executed when the given link is tried to be accessed. Since the parameter only includes ‘/’, hence the below written code is accessed when the server starts. Therefore it is the default page of our server.

Home Page

Sign Up Page

Here the page ‘signup.html’ is loaded once we type our localhost address (127.0.0.1:5000) follwed by ‘/signup’ in the address bar. This page can also be accessed if we click the link in the previous page.

Filling Up the signup form

We fill the details in the form to complete the signup process and move to the next page.

Acknowledging User Sign Up

Sign Up Page

Remember in the Sign Up template, the form points to the success.html template with the method post which signifies that once the form is filled and the submit button is pressed, we are redirected to the success.html page. We can now capture the form values, add error handling to the page.

Getting User Inputs

Python File

On line 13, we invoke the success function in case the form is submitted. The if condition on line 14 ensures that the function is invoked only if the form is first posted and an error is given to the user in case they try to access the page directly. Lines 15–18 are used to store the variables that are filled in the form in the previous page by the user. The else statement on line 19 handles the error when the user tries to access the page directly without filling the form first. The argument ‘data’ in line 21 is used to pass these variables in the ‘success.html’ file. We will take a look at how to use these variables on the html page. Also remember to import request on line 1.

Displaying Sign Up success to the User

Sign Up success Page

Note here on line 10, ‘{{data[0]}}’ is used to access the first name entered by the user in the previous page. The data is the name of the variable we passed earlier and ‘0’ signifies the index of first name in the data variable.

User Sign Up Success

Successful Sign Up

Error Handling

Error Handling

As shown above, an error message is displayed to the user if an attempt to access the ‘success.html’ is made directly without accessing out the form first because the method involved is not ‘POST’.

Thanks for Reading

As you can see, we have added multiple templates to our server and linked them together. In the next stories I plan on adding the functionality of sending an email to the user upon successful sign up, storing the user credentials in a hashed form in a SQL database and giving user the option to login later.

Please comment your views and suggestion below.