1. Required Software Installations

In order to build this application we will require some software installations, those are given as follows.

1.1 MySQL Workbench

It is an open-source relational database management system (RDBMS). The records of the user and its details will be stored here as a database. To download and install this software please click on the link given below.


1.2 Pycharm IDE

It is an integrated development environment to write python codes preferred for web application development. To download and install this software please click on the link given below.


It is recommended to download the community version of this software because it is free and open source.

1.3 Text Editor

We can use any text editor to create the templates of our project including notepad, sublime text, visual studio, dream weaver or we can use PyCharm also to write  our HTML-CSS codes. Here in this project we will be using Sublime text 3.

2. File Structures

Our file structure should be like this only as it is given here. First we will create a new folder and name it as appfolder. Inside this folder we will have two subfolder named as templates and css and our python files (“.py files”). 

3. Creating an Application 

3.1 Create a database in MySQL Workbench:

Open MySQL workbench by double clicking the icon as shown in picture

Line 1:  Query  : CREATE DATABSE details;”

Here, ‘CREATE’ and ‘DATABASE’ are the inbuilt keywords and ‘details’ is the database name given by the programmer. This line 1 query shown in figure will create a database of name ‘details’ which can be seen in left side of the window in schema panel. If you are not able to the database you have created there then you much refresh the schema by clicking the refresh button on the right top side of the schema panel window.

Line 3: Query : “USE details;”

Here, ‘USE’ is the keyword and again ‘details’ is the name of the database to be selected. Instead of executing this query you can just double click on the database name in schema panel to select database of your use.

Line 5 : Query format : “CREATE TABLE [‘table name’]([‘name of the columns with their data types                                               and constraints’])”

Here,   we are creating a table ‘userinfo’ in the ‘details’ with various columns as shown in the image above.

Line 9 : Query format : “INSERT INTO [‘table name’] VALUES [(all the values of column in table with data type)]

Here, we are inserting records to table appuserinfo, the string values (varchar) should be given in single quotes and the column with auto_increment constraint should be given as default.

3.2 Creating HTML-CSS webpage:

There are two ways to create web page, one is to create HTML page and CSS separately and put link reference of CSS file in HTML tag, another way is to use <style> tag inside <head> tag of the HTML code or use style property/attributes in particular tag. In second way we will not require to keep style sheet (.css) file inside CSS folder.

Here, we are going to create three web pages for this application homepage.html, loginp.html, regis.html. Let us see how our HTML pages will be looking

The homepage.html, will look like this…….

The HTML/CSS Code for the homepage.html : —


Leave a comment

Blog categories