0% found this document useful (0 votes)

324 views

Python Flask Framework A Step by Step Gu

This document provides an overview and introduction to the Python Flask framework. It is intended for total beginners who want to learn Flask. The document discusses what Flask is, its prerequisites, and how to install Flask and create a first Flask application. Specifically, it notes that Flask is a micro web framework written in Python intended to keep applications simple and extensible. It also provides instructions for installing Python, Pip, and Flask, and creating a basic "Hello World" app.py file to get started building Flask apps.

Uploaded by

rigsapanama

Available Formats

Download as PDF, TXT or read online on Scribd

0% found this document useful (0 votes)

324 views

Python Flask Framework A Step by Step Gu

Uploaded by

rigsapanama

Available Formats

Download as PDF, TXT or read online on Scribd

You are on page 1/ 167

Python Flask Framework

A Step by Step Guide For the Beginners

Vasanth Nagarajan
Software Engineer
vasanth.n@kgisl.com

ABOUT THIS BOOK :

This book is for total beginners who are interested to learn the python
flask framework,this book does not contain any advanced concepts of the flask framework and

1
the advanced python programming concepts.This Book is totally focused on the beginners who
are little bit familiar with the python programming and are interested to learn the python
framework to develop the web applications .

About ME :
Myself Vasanth Nagarajan ,Working as an Software Engineer in KGiSL,My
Area of Domain is Machine Learning & Artificial Intelligence ,Since I have much interested in
python programming language ,i came up with an idea to write a book regarding the python and
python framework ,to help the veterans who likes to start the python framework from the start.

If you found any mistakes or would you like to leave a feedback regarding this
book , You are always welcome you can drop me a mail to the following mail id’s will reply it
as soon much as possible .

vasanth.n@kgisl.com
nvasanthnagarajan@gmail.com

Happy Programming

Prerequisites:

2
Before you start proceeding with this tutorial, I assuming that you have hands-on
experience on HTML ,CSS,BootStrap, Python and Mysql . If you are not well aware of these
concepts, then I suggest you to go through some short tutorials on those topics.

Flask:
Flask is a web application framework written in Python. Armin Ronacher, who leads an
international group of Python enthusiasts named Pocco, develops it. Flask is based on
Werkzeug WSGI toolkit and Jinja2 template engine. Both are Pocco projects.

Web Framework?

Web Application Framework or simply Web Framework represents a collection

of libraries and modules that enables a web application developer to write applications without
having to bother about low-level details such as protocols, thread management etc.

WSGI

Web Server Gateway Interface (WSGI) has been adopted as a standard for Python web
application development. WSGI is a specification for a universal interface between the web
server and the web applications.

Werkzeug

It is a WSGI toolkit, which implements requests, response objects, and other utility
functions. This enables building a web framework on top of it. The Flask framework uses
Werkzeug as one of its bases.
Jinja2

3
jinja2 is a popular templating engine for Python. A web templating system combines a
template with a certain data source to render dynamic web pages.

Flask is often referred to as a micro framework. It aims to keep the core of an application simple
yet extensible. Flask does not have built-in abstraction layer for database handling, nor does it
have form a validation support. Instead, Flask supports the extensions to add such functionality
to the application.

WTForms

One of the essential aspects of a web application is to present a user interface for
the user. HTML provides a <form> tag, which is used to design an interface. A Form’s
elements such as text input, radio, select etc. can be used appropriately.

Data entered by a user is submitted in the form of Http request message to the
server side script by either GET or POST method.

● The Server side script has to recreate the form elements from http request
data. So in effect, form elements have to be defined twice – once in
HTML and again in the server side script.
● Another disadvantage of using HTML form is that it is difficult (if not
impossible) to render the form elements dynamically. HTML itself
provides no way to validate a user’s input.

This is where WTForms, a flexible form, rendering and validation library comes
handy. Flask-WTF extension provides a simple interface with this WTForms library.

Using Flask-WTF, we can define the form fields in our Python script and render them using an
HTML template. It is also possible to apply validation to the WTF field.

4
5
Note :

This Book Explains these basic concepts of Flask and Sql in Ubuntu Operating System
(Linux),since am the linux user i have prepared this tutorial based on that,you no need to worry
about the platform that you are using,the code works well in both the platform ,except the
python packages and flask packages and the libraries of the wtforms and sql connectors
installation alone differ rather than that the entire code works well.

If you are windows user please see the note commands that used in the book ,through the
installation of the packages that used here ,follow the windows commands to install the specific
packages ,if u still experiencing the errors ,please drop me a mail will help you out .

Installation Process :

If your using Ubuntu 16 or any other linux latest platform the python has been already
preinstalled in the operating system by the default .let’s check the python version that present in
the system just click the ctrl + alt + T in the keyboard or just type Terminal in the search bar in
the ubuntu . a window will appear as shown below :

6
Now Type Python3 in the Terminal as shown below :

vasanth@vasanth-Lenovo-H50-50:~$ python3

You will see a window as shown below prompting to enter command as shown below :

If this windows appear as shown above ,this means you have python3 already installed in the
system.

If You are using windows python is not pre installed in your system so now go to the python
download page for windows by clicking this link https://www.python.org/downloads/windows/
you will see a list of python files to download ,select the python version 3.7.0

7
And install the python application in the desired path .(if you have any queries just drop me a
mail)

Python Pip :
Pip is the python package manager and its used to install the packages
that required for the development for the flask application and its also used to install the specific
libraries to the python , to install the pip in ubuntu you have to type the following code in the
terminal . just open the terminal and type the following code :

vasanth@vasanth-Lenovo-H50-50:~$ sudo apt-get install python3-pip

Now the necessary packages will be installed ,if the packages are already there u will get the
below message :

8
Installing Flask In the Machine :
Now We are going to install the Flask in our machine ,first
we have to create a new folder and name as you like,now go to the desired folder and follow the
instructions as shown below :

In my case the folder i had created in the home directory now i changed my working directory
to my flask folder where am going to install flask and develop the application .

9
Now am installing the flask in the machine using the following command :

We can install flask using the pip python package manager . we have to install for python2 and
python3

Now type the following command in the command prompt :

10
Now open the flask project folder using any python IDE,here i use the atom ide ,its free and
open source, if you want to download the atom ide ,please click the following link and
download and install the atom in your machine , the link is : https://atom.io/

After installed the atom now open the flask folder in the file menu where we going to create the
flask application , the example is shown below :

Use file ----- add project folder option in the file menu

11
Creating First Flask Application :
Now we are going to create our first flask application ,follow the instructions as i said, if you
have any queries regarding this you can mail me will reply you as soon as possible .

Now create a file in the ide inside the flask folder as show below :

12
Now name the file as app.py NOTE : Python File Extensions will have .py as file format

Now you have created a python file called app.py ,so this is the basic file or entry file for flask
applications.

Now we have to import the flask to our app.py file for that you have to type the following
command.

13
Now we want to create the instance of the flask class this is kind of place holder for the current
module.

And down at the bottom we want to test to see if that value that double underscore name value
is equal to double underscore main ,that’s the script that’s going to be executed.

14
Now type the code after the :
if __name__ == ‘__main__’:
app.run()

Now we are going to run our flask application,for that now we have to open a terminal using
ctrl+alt+T now the terminal will open now navigate to our flask application folder where we
have created the app.py file as shown below :

15
Now run our app.py file to check our flask application is working for that type the following
command .

vasanth@vasanth-Lenovo-H50-50:~/flask$ python app.py

Now you can see the server is running without any errors as shown below :

Now you can type the above address in your web browser and press enter or you can type
http://localhost:5000/ in the browser and hit enter now the browser will display the following
content :

16
Now we need to create a route for our home page ,now go to our app.py file and type the
following code :

@app.route('/')

And below that we have to create a function :

def index():
return 'Hello World!!!'

Now after typing the above code ,go to the terminal and stop the server using the following
command ctrl+c .

Now start the server again by typing :

vasanth@vasanth-Lenovo-H50-50:~/flask$ python app.py

Now you can type the above address in your web browser and press enter or you can type
http://localhost:5000/ in the browser and hit enter now the browser will display the following
content :

The browser will display the Hello World !!! as shown below

17
We have successfully installed the flask and we run the flask application as shown above , now
the entire code will look like :

We will make some changes often in the app.py file,each and once we have to stop and start the
server manually, this is hepatic for this we can make the server auto refresh ,when each time the
changes has been made ,for this we have to type the following code in the app.py file.
app.debug = True

18
Now we have seen how to create a simple hello world !! program in the flask and how to create
a route and navigate the application but basically we are not going to return string like this in
the router,we are going to return a template ,so we can use the function called the return
template

But that has to been imported first from the flask ,for that we have to add up the following code
in the app.py file

from flask import Flask,render_template

app = Flask(__name__)
app.debug = True

@app.route('/')
def index():
return render_template('home.html')

if __name__ =='__main__':
app.run()

19
You have noticed that we used home.html in the above index function,so we have to create a
template folder inside our flask app folder .

As shown above and inside the templates folder create a file called home.html as shown above.
Inside the home.html file type as you like ,now save and refresh the browser the content now
will display the new content that u have typed in the home.html

20
The browser will display the content as :

The next thing is that we are going to create a layout ,this will save a lot of time by repeating the
same content in each file ,we no need to create those contents ,layout will take care of those
content.

For this we have to create a new file layout.html inside the templates folder as shown :

21
Inside the layout file you can type all the html content ,inside the layout.html file we have some
special syntax {% block body %}{% endblock %}

This syntax helps to use the python scripts inside the html file . The {% block body% } is called
the start tag and {% endblock %} is called the end tag .the python scripts will go inside between
these blocks .

And we can extends the layout.html file in any number of pages this will be explained below .

Layout.html

<html>
<head>
<title>Vasanth Flask App</title>
</head>
<body>
{% block body %}{% endblock %}
</body>
</html>

22
Home.html

{% extends 'layout.html' %}

{% block body %}
Hello world!!!
{% endblock %}

Now save and refresh the browser you can see that the hello world!!! In the browser thus this
how the templates works.

You can see that the title of the page will be render from the layouts.html and the entire code
will look like :

23
Now we don’t want to repeat the same html content in every page we can create,instead of that
we can use the extends template,this save a lots of time in the project development .

BOOTSTRAP:

Initially we are going to use the bootstrap for our application .

For this let's go to :http://blog.getbootstrap.com/2016/07/25/bootstrap-3-3-7-released/

However you can find the latest bootstrap am using the 3.3.7 version ,if you are familiar with
bootstrap you can use any version as you like ,but in this tutorial am using the 3.3.7 version .

Now copy the following code as shown :

CSS:
<link rel="stylesheet"
href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

JS :
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"</script>

24
Now copy and paste the css file and js file inside our layout.html file

We have to paste the css file inside the head tag and the JS file in the end of the body tag as
shown .
layout.html

<html>
<head>
<title>Vasanth Flask App</title>
<link rel="stylesheet"
href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
{% block body %}{% endblock %}

25
</body>
</html>
Now save and refresh the browser you can notice the bootstrap is enabled as you can see the
change in fontsize.

Now we have to create a new folder called includes inside the template folder :

Create a new file inside the includes folder , the file name should be this

_navbar.html

26
We have used _ because this file is partial file since we are going to use this _navbar.html only
for creating the navbars .

Now go to the following link https://getbootstrap.com/docs/3.3/examples/starter-template/

Now press ctrl + u in the keyboard now you will see the page that displayed as shown below :

27
In that contents copy the navbar contents as shown here :

The copied code should look like this :

<nav class="navbar navbar-inverse navbar-fixed-top">

28
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
</div>
</nav>

Now we have to make some changes in the above code let’s follow as i explained below :

<nav class="navbar navbar-default">

<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Welcome to my Flask Application</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li><a href="/">Home</a></li>
<li><a href="/about">About</a></li>
<li><a href="/articles">Articles</a></li>
</ul>
</div>

29
</div>
</nav>
The above Highlighted area are the code has been modified , now your code should look like
this

Now we have to include this in our layout files ,for this just go to layout.html file as shown
below :

layout.html

<html>
<head>
<title>Vasanth Flask App</title>
<link rel="stylesheet"
href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
{% include 'includes/_navbar.html'%}

{% block body %}{% endblock %}

30
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"</script>

</body>
</html>

In the above code we have add the highlighted line ,this line is to include or includes folder
where our _navbar.html file exist ,now save the file and run the flask server by running the
app.py file

Now open the browser and type the address localhost:5000 ,now you can see the bootstrap is
working fine as shown below :

31
Now i want to move all the content inside the website into a container class ,for that add the
following line in the layout.html file

<html>
<head>
<title>Vasanth Flask App</title>
<link rel="stylesheet"
href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
{% include 'includes/_navbar.html'%}

<div class="container">
{% block body %}{% endblock %}
</div>

</body>
</html>

Now add those lines in the layout.html and save the file , now refresh the browser and see the
world hello will be moved a bit towards the right,you can see the changes after refreshing the
browser.

32
Now lets add some content in the home.html file ,now open the home.html file and add the
following inside that as shown below .

Home.html

{% extends 'layout.html' %}

{% block body %}
<div class="jumbotron text-center">
<h1>Vasanth Python Tutorials</h1>
<p class="lead">This Application is build using python and flask framework</p>
</div>
{% endblock %}

Your code should look like this :

33
Now save the file home.html and refresh the browser you will see the changes as shown :

Now we have to create a navigation for the articles and about page for this ,add up the following
code in the app.py file as shown below :

from flask import Flask,render_template

app = Flask(__name__)
app.debug = True

@app.route('/')

34
def index():
return render_template('home.html')

@app.route('/about')
def about():
return render_template('about.html')

if __name__ =='__main__':
app.run()

Your code will look like this :

Now create a about.html in the templates folder as shown:

Now copy the code that you have it in the home.html file and make the following changes :

35
{% extends 'layout.html' %}

{% block body %}
<h1>About US </h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
{% endblock %}

Here i have added the dummy text for the paragraph ,now save the about.html file and refresh
the browser and click about in the home page ,now your about page will look like this :

Actually we need the login and register button for our page but as of now we are not going to
create that,and we are not going to use any database right now ,but we will create it later ,what i
gonna do is that we are going to create a file for articles ,that will hold the data for the articles .

Now we wanna create a new file in the root directory as shown below and save the file as
data.py

36
Now add the following code in the data.pyNow we are going to define a function called articles
as shown below :add the code in the data.py

def Articles():
articles = [
{
'id': 1,
'title':'Article one',
'body':'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit
in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
'author':'vasanth',
'create_date':'04-09-2018',
},
{
'id': 2,
'title':'Article two',
'body':'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit

37
in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
'author':'vasanth nagarajan',
'create_date':'05-09-2018',
},
{
'id': 3,
'title':'Article three',
'body':'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit
in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
'author':'nagarajan vasanth',
'create_date':'04-09-2018',
}
]
return articles

Your code should look like this :

38
Now go to the app.py file and import the data articles to our file ,this is done using the
following code :

app.py
from flask import Flask,render_template
from data import Articles

app = Flask(__name__)
app.debug = True

Articles = Articles()

@app.route('/')
def index():
return render_template('home.html')

@app.route('/about')
def about():
return render_template('about.html')

if __name__ =='__main__':
app.run()

Now we have to create a route for the articles now add the following code in the app.py file :

@app.route('/articles')
def articles():
return render_template('articles.html',articles = Articles)

Now your code look like this :

39
Now create a articles.html file in the template folder and write the following code and save it.

40
Articles.html

Now in this file we are going to use the for loop logic in this articles.html file :

Articles.html

{% extends 'layout.html' %}

{% block body %}
<h1>Articles</h1>
<ul class="list-group">
{% for article in articles %}
<li class="list-group-item"><a href="articles/{{article.id}}">{{article.title}}</a></li>
{% endfor %}
</ul>
{% endblock %}

Your code will look like this :

41
Now save this file and refresh the browser and click the article option in th home page now the
browser will display the article page as shown below :

42
Now we wanna create a links for each article for this we have to create a new route for the
articles ,now open app.py file add the following routes in the file .

from flask import Flask,render_template

from data import Articles

app = Flask(__name__)
app.debug = True

Articles = Articles()

@app.route('/')
def index():
return render_template('home.html')

@app.route('/about')
def about():
return render_template('about.html')

@app.route('/articles')
def articles():
return render_template('articles.html',articles = Articles)

@app.route('/article/<string:id>/')
def article(id):
return render_template('article.html',id=id)

if __name__ =='__main__':
app.run()

43
NOTE : Now Articles.html change the following code :
Your articles.html file should look like this :
{% extends 'layout.html' %}

{% block body %}
<h1>Articles</h1>
<ul class="list-group">
{% for article in articles %}
<li class="list-group-item"><a href="article/{{article.id}}">{{article.title}}</a></li>
{% endfor %}
</ul>
{% endblock %}

Now Create a article.html file in the template folder as shown:

Now open the article.html file and add the following code in the file as shown below :

{% extends 'layout.html'%}

{% block body %}
<h1>{{id}}</h1>
{% endblock %}

44
Your article code should look like this :

Now save the file and start the python flask server and look at http://localhost:5000 in your
browser .

45
Now Type any number in the address bar it will display the number as id :

46
Setting Up With Database

Now we are going to install the mysql server and the client for our application for this
installation ,follow the steps that given below ,

NOTE: MYSQL SERVER and MYSQL CLIENT are need to be installed

vasanth@vasanth-Lenovo-H50-50:~/flask$ sudo apt-get install mysql-server

libmysqlclient-dev

Type the following command in the terminal , you have to type from the sudo apt - get
command
.
While installing the MYSQL server , it will ask you to enter the root password .

For this enter root as password : root

Both the user name and the password will be the same.

47
After Successfully Installed the Both the Mysql Server and client proceed as follows

Accessing the Database :

Now open the terminal and type the following code :

vasanth@vasanth-Lenovo-H50-50:~/flask$ mysql -u root -p

Now you will be asked to enter the password as shown below : type root as in the password file
.

Now the Sql server will opened as shown below :

48
Now type the following command in the mysql terminal :

mysql> SHOW DATABASES;

Now list of databases will be displayed :

49
Now Create a database for our application for this type the following command in the mysql
server

mysql> CREATE DATABASE myflaskapp;

Now Select our database to work with it,for that type the following command in the terminial .

mysql> USE myflaskapp;

Now the database has been selected as shown below .

50
Now we have to create the user table ,use the following command and type in the sql server

mysql> CREATE TABLE users(id INT(11) AUTO_INCREMENT PRIMARY KEY,

-> name VARCHAR(100),email VARCHAR(100),username VARCHAR(30),password
VARCHAR(100),register_date TIMESTAMP DEFAULT CURRENT_TIMESTAMP);

Now the table has been created successfully as shown below :

51
Now type the following command in the mysql server to list database :

mysql> SHOW DATABASES;

52
Now we can list our table by using the following command :

mysql> SHOW TABLES;

53
Now we can describe our users table by typing the following command in the mysql server :

mysql> DESCRIBE users;

Now we have to install few things using pip ,so now we have to stop the python flask server by
pressing ctrl c .

Now we want to install flask mysqldb that basically communicates with the flask and mysql ,to
install this type the following command in the terminal .

54
Now we have to install WTFORMS ,For that type the following command in the terminal ,

vasanth@vasanth-Lenovo-H50-50:~/flask$ pip install flask-wtf --user

55
Now we are going to install passlib, which is going to encrypt the password that stored in the
database .
Type the command in the terminal :

vasanth@vasanth-Lenovo-H50-50:~/flask$ pip install passlib --user

56
Now we can run the app,lets start the python flask server

Now we have to import some modules from flask .now go to app.py file and add the following
in the app.py file .
App.py

from flask import Flask,render_template, flash, redirect , url_for , session ,request,

logging
from flask_mysqldb import MySQL
from data import Articles
from wtforms import Form, StringField , TextAreaField ,PasswordField , validators
from passlib.hash import sha256_crypt

app = Flask(__name__)
app.debug = True
mysql = MySQL(app)

Articles = Articles()

@app.route('/')
def index():

57
return render_template('home.html')

@app.route('/about')
def about():
return render_template('about.html')

@app.route('/articles')
def articles():
return render_template('articles.html',articles = Articles)

@app.route('/article/<string:id>/')
def article(id):
return render_template('article.html',id=id)

class RegisterForm(Form):
name = StringField('Name',[validators.Length(min=1,max=50)])
username = StringField('Username',[validators.Length(min=4,max=25)])
email = StringField('Email',[validators.Length(min=4,max=25)])
password = PasswordField('Password', [ validators.DataRequired
(),validators.EqualTo('confirm',message ='passwords do not match')])
confirm = PasswordField('Confirm password')

Here we have created the Register form for our website , and now we have to create a route for
the register form ,for that type the following code as given below in app.py file below the class
register form :

@app.route('/register', methods=['GET','POST'])
def register():
form = RegisterForm(request.form)
if request.method == 'POST' and form.validate():

return render_template('register.html',form=form)

Now the entire code of app.py look like this :

from flask import Flask,render_template, flash, redirect , url_for , session ,request,

logging

58
from flask_mysqldb import MySQL
from data import Articles
from wtforms import Form, StringField , TextAreaField ,PasswordField , validators
from passlib.hash import sha256_crypt

app = Flask(__name__)
app.debug = True
mysql = MySQL(app)

Articles = Articles()

@app.route('/')
def index():
return render_template('home.html')

@app.route('/about')
def about():
return render_template('about.html')

@app.route('/articles')
def articles():
return render_template('articles.html',articles = Articles)

@app.route('/article/<string:id>/')
def article(id):
return render_template('article.html',id=id)

@app.route('/register', methods=['GET','POST'])
def register():

59
form = RegisterForm(request.form)
if request.method == 'POST' and form.validate():
return render_template('register.html')
return render_template('register.html',form=form

if __name__ =='__main__':
app.run()

The code looks like :

60
Now the next step is that we have to create a register.html page in the templates folder for that
follow the steps as defined :

61
Now type the following code in the register.html file as shown below :

{% extends 'layout.html' %}

{% block body %}
<h1>Register</h1>
{% from "includes/_formhelpers.html" import render_field%}
<form method="POST" action="">
<div class="form-group">
{{render_field(form.name,class="form-control")}}
</div>
<div class="form-group">
{{render_field(form.email,class="form-control")}}
</div>
<div class="form-group">
{{render_field(form.username,class="form-control")}}
</div>
<div class="form-group">
{{render_field(form.password,class="form-control")}}
</div>
<div class="form-group">
{{render_field(form.confirm,class="form-control")}}
</div>
<p><input type="submit" class="btn btn-primary" value="Submit"></p>
</form>
{% endblock %}

The Code should look like this :

62
Now go to the includes folder and create a file as _formhelpers.html as shown below :

63
Now type the following code inside the _formhelpers.html
_formhelpers.html

{% macro render_field(field) %}
{{ field.label }}
{{ field(**kwargs)|safe }}
{% if field.errors %}
{% for error in field.errors %}
<span class="help-inline">{{ error }}</span>
{% endfor %}
{% endif %}
{% endmacro %}

And now save the file and run the python flask server and navigate to the register page and the
register page will look like as :

Now we are going to connect the page with our mysql database for that we have to go to app.py
file and add the configuration details in the app.py file as shown below :

64
from flask import Flask,render_template, flash, redirect , url_for , session ,request, logging
from flask_mysqldb import MySQL
from data import Articles
from wtforms import Form, StringField , TextAreaField ,PasswordField , validators
from passlib.hash import sha256_crypt

app = Flask(__name__)
app.debug = True

#Config MySQL
app.config['MYSQL_HOST'] = 'localhost'
app.config['MYSQL_USER'] = 'root'
app.config['MYSQL_PASSWORD'] = 'root'
app.config['MYSQL_DB'] = 'myflaskapp'
app.config['MYSQL_CURSORCLASS'] = 'DictCursor'
#init MYSQL
mysql = MySQL(app)

Articles = Articles()

@app.route('/')

65
Now we want to configure the register form function in the app.py file ,follow the instructions
and make the changes in the app.py file

@app.route('/register', methods=['GET','POST'])
def register():
form = RegisterForm(request.form)
if request.method == 'POST' and form.validate():
name = form.name.data
email = form.email.data
username = form.username.data
password = sha256sha256_crypt.encrypt(str(form.password.data))

# Create crusor
cur = mysql.connection.cursor()

66
cur.execute("INSERT INTO users(name,email,username,password)
VALUES(%s,%s,%s,%s)",(name,email,username,password))

# commit to DB
mysql.connection.commit()
#close connection
cur.close()

flash("You are now Registerd and you can login", 'success')

redirect(url_for('index'))

return render_template('register.html')
return render_template('register.html',form=form)

The Entire Code of app.py will look like as :

from flask import Flask,render_template, flash, redirect , url_for , session ,request,

logging
from flask_mysqldb import MySQL
from data import Articles
from wtforms import Form, StringField , TextAreaField ,PasswordField , validators
from passlib.hash import sha256_crypt

app = Flask(__name__)
app.debug = True

67
Articles = Articles()

@app.route('/')
def index():
return render_template('home.html')

@app.route('/about')
def about():
return render_template('about.html')

@app.route('/articles')
def articles():
return render_template('articles.html',articles = Articles)

@app.route('/article/<string:id>/')
def article(id):
return render_template('article.html',id=id)

# Create crusor
cur = mysql.connection.cursor()

68
cur.execute("INSERT INTO users(name,email,username,password)
VALUES(%s,%s,%s,%s)",(name,email,username,password))

# commit to DB
mysql.connection.commit()
#close connection
cur.close()

flash("You are now Registered and you can login", 'success')

redirect(url_for('index'))
return render_template('register.html',form=form)

if __name__ =='__main__':
app.run()

Now We have to create a file for messages for that we have create a new file in the includes
folder and name the file as _messages.html

{% with messages = get_flashed_messages(with_categories=true) %}

{% if messages %}
{% for category, message in messages %}
<div class="alert alert-{{ category }}">{{ message }}></div>
{% endfor %}
{% endif %}
{% endwith %}

The file will look like :

69
Now we have to add this in the layouts ,now go to layouts.html file and add up the following
code in that .

<html>
<head>
<title>Vasanth Flask App</title>
<link rel="stylesheet"
href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
{% include 'includes/_navbar.html'%}

<div class="container">
{% include 'includes/_messages.html' %}
{% block body %}{% endblock %}
</div>

70
</body>
</html>

Add the following changes and save the file ,now the file should look like this :

Now run the python server ,make sure there should be no errors .

71
Now we need the register link in the home page for that just go the _navbar.html file and add
the following code in this file as shown below :

<nav class="navbar navbar-default">

<ul class="nav navbar-nav navbar-right">

<li><a href="/register">Register</a></li>

72
</ul>
</div>
</div>
</nav>
The code should look like this :

Now save and run the file ,ie. Run the python server and you will be seeing the register option
that on the right top side of the website as shown below .

73
Now Click the registration you will see the following form :

Now fill up the data and click submit ,

74
After filled up the data and once the submit button has been clicked the data will be saved in the
database,now we can check our database by using the following command .

Type the following sql query in the mysql shell :

mysql> SELECT * FROM users;

75
You can see that our data are stored in the database and our password has been encrypted and
stored in the database .

Now once we submitted the page has been to redirect to login form,for that we have change the
following in the app.py file

def register():
form = RegisterForm(request.form)
if request.method == 'POST' and form.validate():
name = form.name.data
email = form.email.data
username = form.username.data
password = sha256_crypt.encrypt(str(form.password.data))

# Create crusor
cur = mysql.connection.cursor()

cur.execute("INSERT INTO users(name,email,username,password)

VALUES(%s,%s,%s,%s)",(name,email,username,password))

# commit to DB

76
mysql.connection.commit()
#close connection
cur.close()

flash("You are now Registered and you can login" , 'success')

redirect(url_for('login'))
return render_template('register.html',form=form)

Now we have to create the login page for our website ,for this follow the below instruction to
create a login page :

Go to app.py file and write the following code :(we are creating the route for the login )

# user login
@app.route('/login',methods =['GET','POST'])
def login():
if request.method == 'POST':
#Get Form Fields
username = request.form['username']
password_candidate = request.form['password']

# Create cursor

cur = mysql.connection.cursor()

#Get user by username

result = cur.execute("SELECT * FROM users WHERE username = %s"

,[username])

if result > 0:
# Get Stored hash
data = cur.fetchone()
password = data['password']

77
# Compare Passwords
if sha256_crypt.verify(password_candidate,password):
app.logger.info('PASSWORD MATCHED')
else:
app.logger.info('NO USER')

return render_template('login.html')

Now we have to create a login.html page for our application for that now go to template and
create the login.html as shown below :

{% extends 'layout.html' %}

{% block body %}
<h1>Login</h1>
<form action="" method="POST">
<div class="form-group">
<label>Username</label>
<input type="text" name="username" class="form-control"
value={{request.form.username}}>
</div>
<div class="form-group">
<label>Password</label>
<input type="password" name="password" class="form-control"
value={{request.form.password}}>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
{% endblock %}

Your code should look like this :

78
Now save your file and run the python server ,now the server should run without any errors :

Now you can see the browser that our application running and type the login.html in the url
,now you can see the login page as shown below :

79
Now we are going to load the templates and create the session ,once the user login we have use
the session to store the user name of the user whomever login .

Now go back to app.py and make the following changes :

App.py

from flask import Flask,render_template, flash, redirect , url_for , session ,request, logging
from flask_mysqldb import MySQL
from data import Articles
from wtforms import Form, StringField , TextAreaField ,PasswordField , validators
from passlib.hash import sha256_crypt

app = Flask(__name__)
app.debug = True

#Config MySQL

80
app.config['MYSQL_HOST'] = 'localhost'
app.config['MYSQL_USER'] = 'root'
app.config['MYSQL_PASSWORD'] = 'root'
app.config['MYSQL_DB'] = 'myflaskapp'
app.config['MYSQL_CURSORCLASS'] = 'DictCursor'
#init MYSQL
mysql = MySQL(app)

Articles = Articles()

@app.route('/')
def index():
return render_template('home.html')

@app.route('/about')
def about():
return render_template('about.html')

@app.route('/articles')
def articles():
return render_template('articles.html',articles = Articles)

@app.route('/article/<string:id>/')
def article(id):
return render_template('article.html',id=id)

@app.route('/register', methods=['GET','POST'])
def register():
form = RegisterForm(request.form)

81
if request.method == 'POST' and form.validate():
name = form.name.data
email = form.email.data
username = form.username.data
password = sha256_crypt.encrypt(str(form.password.data))

# Create crusor
cur = mysql.connection.cursor()

cur.execute("INSERT INTO users(name,email,username,password)

VALUES(%s,%s,%s,%s)",(name,email,username,password))

# commit to DB
mysql.connection.commit()
#close connection
cur.close()

flash("You are now Registered and you can login" , 'success')

redirect(url_for('login'))
return render_template('register.html',form=form)

# user login
@app.route('/login',methods =['GET','POST'])
def login():
if request.method == 'POST':
#Get Form Fields
username = request.form['username']
password_candidate = request.form['password']

# Create cursor

cur = mysql.connection.cursor()

#Get user by username

result = cur.execute("SELECT * FROM users WHERE username = %s" ,[username])

if result > 0:

82
# Get Stored hash
data = cur.fetchone()
password = data['password']

# Compare Passwords
if sha256_crypt.verify(password_candidate,password):
app.logger.info('PASSWORD MATCHED')
else:
error = 'Username not found'
return render_template('login.html',error=error)
else:
error = 'Username not found'
return render_template('login.html',error=error)

return render_template('login.html')
if __name__ =='__main__':
app.secret_key='secret123'
app.run()

We need to output the errors somewhere within the templates ,so now go back to the messages
file ,in the includes for messages and make the following changes

_messages.html

{% with messages = get_flashed_messages(with_categories=true) %}

{% if messages %}
{% for category, message in messages %}
<div class="alert alert-{{ category }}">{{ message }}></div>
{% endfor %}
{% endif %}
{% endwith %}

{% if error %}
<div class="alert alert-danger">{{error}}</div>
{% endif %}

83
{% if msg %}
<div class="alert alert-success">{{msg}}</div>
{% endif %}

After making the changes in the above file now save the file and now we have add the login link
to the navbar ,so now go to navbar.html file and make the following changes .

_navbar.html

<nav class="navbar navbar-default">

<ul class="nav navbar-nav navbar-right">

<li><a href="/register">Register</a></li>
<li><a href="/login">Login</a></li>
</ul>
</div>
</div>
</nav>

84
Now go to app.py and make the following changes :

app.py

app = Flask(__name__)
app.debug = True

Articles = Articles()

@app.route('/')
def index():
return render_template('home.html')

@app.route('/about')
def about():
return render_template('about.html')

@app.route('/articles')
def articles():
return render_template('articles.html',articles = Articles)

85
@app.route('/article/<string:id>/')
def article(id):
return render_template('article.html',id=id)

# Create crusor
cur = mysql.connection.cursor()

cur.execute("INSERT INTO users(name,email,username,password)

VALUES(%s,%s,%s,%s)",(name,email,username,password))

# commit to DB
mysql.connection.commit()
#close connection
cur.close()

flash("You are now Registered and you can login" , 'success')

redirect(url_for('login'))
return render_template('register.html',form=form)

86
# user login
@app.route('/login',methods =['GET','POST'])
def login():
if request.method == 'POST':
#Get Form Fields
username = request.form['username']
password_candidate = request.form['password']

# Create cursor

cur = mysql.connection.cursor()

#Get user by username

result = cur.execute("SELECT * FROM users WHERE username = %s" ,[username])

if result > 0:
# Get Stored hash
data = cur.fetchone()
password = data['password']

# Compare Passwords
if sha256_crypt.verify(password_candidate,password):
#Passed
session['logged_in'] = True
session['username'] = username

flash('You are now logged in ','success')

return redirect(url_for('dashboard'))
else:
error = 'Username not found'
return render_template('login.html',error=error)
#close connection
cur.close()

else:
error = 'Username not found'
return render_template('login.html',error=error)

87
return render_template('login.html')
if __name__ =='__main__':
app.secret_key='secret123'
app.run()

Now we are going to create a dashboard link in the app.py for that make the following changes
in the app.py

App.py

app = Flask(__name__)
app.debug = True

Articles = Articles()

@app.route('/')
def index():

88
return render_template('home.html')

@app.route('/about')
def about():
return render_template('about.html')

@app.route('/articles')
def articles():
return render_template('articles.html',articles = Articles)

@app.route('/article/<string:id>/')
def article(id):
return render_template('article.html',id=id)

# Create crusor
cur = mysql.connection.cursor()

cur.execute("INSERT INTO users(name,email,username,password)

VALUES(%s,%s,%s,%s)",(name,email,username,password))

# commit to DB

89
mysql.connection.commit()
#close connection
cur.close()

flash("You are now Registered and you can login" , 'success')

redirect(url_for('login'))
return render_template('register.html',form=form)

# user login
@app.route('/login',methods =['GET','POST'])
def login():
if request.method == 'POST':
#Get Form Fields
username = request.form['username']
password_candidate = request.form['password']

# Create cursor

cur = mysql.connection.cursor()

#Get user by username

result = cur.execute("SELECT * FROM users WHERE username = %s" ,[username])

if result > 0:
# Get Stored hash
data = cur.fetchone()
password = data['password']

# Compare Passwords
if sha256_crypt.verify(password_candidate,password):
#Passed
session['logged_in'] = True
session['username'] = username

flash('You are now logged in ','success')

return redirect(url_for('dashboard'))
else:

90
error = 'Username not found'
return render_template('login.html',error=error)
#close connection
cur.close()

else:
error = 'Username not found'
return render_template('login.html',error=error)

return render_template('login.html')

@app.route('/dashboard')
def dashboard():
return render_template('dashboard.html')

if __name__ =='__main__':
app.secret_key='secret123'
app.run()

Now we need to create the dashboard.html file in the templates for that go to the templates
folder and create a new file called dashboard.html

Dashboard.html

{% extends 'layout.html' %}

{% block body %}
<h1>Dashboard<small>Welcome {{session.username}}</small></h1>
{% endblock %}

Now save the file and run the app.py server once you have successfully logged in ,you will get
the user name in the dashboard as shown below .

91
Now we have create a logout option ,so now go to app.py and make the following changes in
the app.py

App.py

from flask import Flask,render_template, flash, redirect , url_for , session ,request,

logging
from flask_mysqldb import MySQL
from data import Articles
from wtforms import Form, StringField , TextAreaField ,PasswordField , validators
from passlib.hash import sha256_crypt

app = Flask(__name__)
app.debug = True

92
#init MYSQL
mysql = MySQL(app)

Articles = Articles()

@app.route('/')
def index():
return render_template('home.html')

@app.route('/about')
def about():
return render_template('about.html')

@app.route('/articles')
def articles():
return render_template('articles.html',articles = Articles)

@app.route('/article/<string:id>/')
def article(id):
return render_template('article.html',id=id)

93
# Create crusor
cur = mysql.connection.cursor()

cur.execute("INSERT INTO users(name,email,username,password)

VALUES(%s,%s,%s,%s)",(name,email,username,password))

# commit to DB
mysql.connection.commit()
#close connection
cur.close()

flash("You are now Registered and you can login" , 'success')

redirect(url_for('login'))
return render_template('register.html',form=form)

# user login
@app.route('/login',methods =['GET','POST'])
def login():
if request.method == 'POST':
#Get Form Fields
username = request.form['username']
password_candidate = request.form['password']

# Create cursor

cur = mysql.connection.cursor()

#Get user by username

result = cur.execute("SELECT * FROM users WHERE username = %s"

,[username])

if result > 0:
# Get Stored hash
data = cur.fetchone()
password = data['password']

94
# Compare Passwords
if sha256_crypt.verify(password_candidate,password):
#Passed
session['logged_in'] = True
session['username'] = username

flash('You are now logged in ','success')

return redirect(url_for('dashboard'))
else:
error = 'Username not found'
return render_template('login.html',error=error)
#close connection
cur.close()

else:
error = 'Username not found'
return render_template('login.html',error=error)

return render_template('login.html')

#logout
@app.route('/logout')
def logout():
session.clear()
flash('you are now logged out ','success')
return redirect(url_for('login'))

@app.route('/dashboard')
def dashboard():
return render_template('dashboard.html')

if __name__ =='__main__':
app.secret_key='secret123'
app.run()

Now make the above changes and save the file and now we have to create a link in the navbar
for logout,for that now go to the navbar.html and make the following changes .

95
_navbar.html
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Welcome to my Flask Application</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li><a href="/">Home</a></li>
<li><a href="/about">About</a></li>
<li><a href="/articles">Articles</a></li>
</ul>

<ul class="nav navbar-nav navbar-right">

{% if session.logged_in %}
<li><a href="/login">Logout</a></li>
{% else %}
<li><a href="/register">Register</a></li>
<li><a href="/login">Login</a></li>
{% endif %}

</ul>
</div>
</div>
</nav>

Now save the file and run the app.py server and navigate to the browser and now see the
application,its look like as shown below :

Home page of our application

96
Register page of our application :

97
After entering the details and once clicked the submit button ,

Now we have successfully registered ,and now we are going to login in to our application :

98
After entering the credentials ,

Once logged in :

99
The dashboard displays the user name of the current logged in person and we can see the logout
option at the right top of the page .

After clicked the logout button the above screen will be displayed .

100
But when we type the url directly in the browser the browser will navigate to the exact page that
we requested,but this is not fair ,for example when we type the /dashboard in the url ,the
browser will take u to the dashboard page automatically ,as shown below :

so we have to use the decorators,for that do the following steps in the program .
Now go to app.py and make the following changes :

from flask import Flask,render_template, flash, redirect , url_for , session ,request,

logging
from flask_mysqldb import MySQL
from data import Articles
from wtforms import Form, StringField , TextAreaField ,PasswordField , validators
from passlib.hash import sha256_crypt
from functools import wraps

app = Flask(__name__)
app.debug = True

101
#Config MySQL
app.config['MYSQL_HOST'] = 'localhost'
app.config['MYSQL_USER'] = 'root'
app.config['MYSQL_PASSWORD'] = 'root'
app.config['MYSQL_DB'] = 'myflaskapp'
app.config['MYSQL_CURSORCLASS'] = 'DictCursor'
#init MYSQL
mysql = MySQL(app)

Articles = Articles()

@app.route('/')
def index():
return render_template('home.html')

@app.route('/about')
def about():
return render_template('about.html')

@app.route('/articles')
def articles():
return render_template('articles.html',articles = Articles)

@app.route('/article/<string:id>/')
def article(id):
return render_template('article.html',id=id)

@app.route('/register', methods=['GET','POST'])
def register():

102
form = RegisterForm(request.form)
if request.method == 'POST' and form.validate():
name = form.name.data
email = form.email.data
username = form.username.data
password = sha256_crypt.encrypt(str(form.password.data))

# Create crusor
cur = mysql.connection.cursor()

cur.execute("INSERT INTO users(name,email,username,password)

VALUES(%s,%s,%s,%s)",(name,email,username,password))

# commit to DB
mysql.connection.commit()
#close connection
cur.close()

flash("You are now Registered and you can login" , 'success')

redirect(url_for('login'))
return render_template('register.html',form=form)

# user login
@app.route('/login',methods =['GET','POST'])
def login():
if request.method == 'POST':
#Get Form Fields
username = request.form['username']
password_candidate = request.form['password']

# Create cursor

cur = mysql.connection.cursor()

#Get user by username

result = cur.execute("SELECT * FROM users WHERE username = %s"

,[username])

103
if result > 0:
# Get Stored hash
data = cur.fetchone()
password = data['password']

# Compare Passwords
if sha256_crypt.verify(password_candidate,password):
#Passed
session['logged_in'] = True
session['username'] = username

flash('You are now logged in ','success')

return redirect(url_for('dashboard'))
else:
error = 'Username not found'
return render_template('login.html',error=error)
#close connection
cur.close()

else:
error = 'Username not found'
return render_template('login.html',error=error)

return render_template('login.html')

#check if user logged in

def is_logged_in(f):
@wraps(f)
def wrap(*args,**kwargs):
if 'logged_in' in session:
return f(*args, **kwargs)
else:
flash('Unauthorized, please login','danger')
return redirect(url_for('login'))
return wrap

104
#logout
@app.route('/logout')
def logout():
session.clear()
flash('you are now logged out ','success')
return redirect(url_for('login'))
# Dashboard
@app.route('/dashboard')
@is_logged_in
def dashboard():
return render_template('dashboard.html')

if __name__ =='__main__':
app.secret_key='secret123'
app.run()

Now save and run the file , you will see the unauthorized message when you to try to navigate
to dashboard without login

105
Now we are going to work on articles :
Still the data for the articles are coming from the file called data.py ,but we need those data to
come from the database .

So now go to mysql console ,and now create a table for the articles :

mysql> CREATE TABLE articles (id INT(11) AUTO_INCREMENT PRIMARY KEY, title
VARCHAR(255), author VARCHAR(100), body TEXT, create_date TIMESTAMP DEFAULT
CURRENT_TIMESTAMP);
Query OK, 0 rows affected (0.97 sec)

Now type the sql query for showing the tables :

mysql> SHOW TABLES;

106
Now we can add the article functionality ,for that first login in to our application ,the dashboard
page will be displayed as shown below :

Now we have to add the article button in the dashboard ,now go to dashboard.html page

Dashboard.html

{% extends 'layout.html' %}

107
{% block body %}
<h1>Dashboard<small>Welcome {{session.username}}</small></h1>
<a class="btn btn-success" href="/add_article">Add Articles</a>
<hr>
{% endblock %}

Now we have to add the route inside the app.py so now navigate to app.py and add the
following commands in the app.py

app = Flask(__name__)
app.debug = True

Articles = Articles()

@app.route('/')
def index():
return render_template('home.html')

@app.route('/about')

108
def about():
return render_template('about.html')

@app.route('/articles')
def articles():
return render_template('articles.html',articles = Articles)

@app.route('/article/<string:id>/')
def article(id):
return render_template('article.html',id=id)

# Create crusor
cur = mysql.connection.cursor()

cur.execute("INSERT INTO users(name,email,username,password)

VALUES(%s,%s,%s,%s)",(name,email,username,password))

# commit to DB
mysql.connection.commit()
#close connection
cur.close()

109
flash("You are now Registered and you can login" , 'success')

redirect(url_for('login'))
return render_template('register.html',form=form)

# user login
@app.route('/login',methods =['GET','POST'])
def login():
if request.method == 'POST':
#Get Form Fields
username = request.form['username']
password_candidate = request.form['password']

# Create cursor

cur = mysql.connection.cursor()

#Get user by username

result = cur.execute("SELECT * FROM users WHERE username = %s" ,[username])

if result > 0:
# Get Stored hash
data = cur.fetchone()
password = data['password']

# Compare Passwords
if sha256_crypt.verify(password_candidate,password):
#Passed
session['logged_in'] = True
session['username'] = username

flash('You are now logged in ','success')

return redirect(url_for('dashboard'))
else:
error = 'Username not found'
return render_template('login.html',error=error)
#close connection

110
cur.close()

else:
error = 'Username not found'
return render_template('login.html',error=error)

return render_template('login.html')

#check if user logged in

#logout
@app.route('/logout')
@is_logged_in
def logout():
session.clear()
flash('you are now logged out ','success')
return redirect(url_for('login'))
# Dashboard
@app.route('/dashboard')
@is_logged_in
def dashboard():
return render_template('dashboard.html')

#Article form class

class ArticleForm(Form):
title = StringField('Title',[validators.Length(min=1,max=50)])

111
body = TextAreaField('Body',[validators.Length(min=30,max=25)])

#Add Article

@app.route('/add_article', methods=['GET','POST'])
@is_logged_in
def add_article():
form = ArticleForm(request.form)
if request.method == 'POST' and form.validate():
title = form.title.data
body = form.body.data

# Create a cursor

cur = mysql.connection.cursor()

#execute

cur.execute("INSERT INTO articles(title,body,author) VALUES(%s, %s, %s)",(title,

body, session['username']))

#commit to db

mysql.connection.commit()

#close connection
cur.close()

flash('Article created ','success')

return redirect(url_for('dashboard'))

return render_template('add_article.html',form=form)

if __name__ =='__main__':
app.secret_key='secret123'
app.run()

112
Now we have to create the actual form for that we have to go to templates and create a new file
add_article.html

Add_article.html

{% extends 'layout.html' %}

{% block body %}
<h1> Add Articles</h1>
{% from "includes/_formhelpers.html" import render_field %}
<form method="POST" action="">
<div class="form-group">
{{ render_field(form.title,class_="form-control") }}
</div>
<div class="form-group">
{{ render_field(form.body, class_="form-control") }}
</div>

113
<p><input class="btn btn-primary" type="submit" value="Submit">
</form>
{% endblock %}

Now type the above code and save those file in the templates .now run the app.py and see the
browser

Now click on add article button and type the title and add some dummy text in the article page .

114
Now click submit ..

Now go to mysql and check the database using the following query :

mysql> SELECT * FROM articles;

115
Now we are going to add an editor in our page ,its cke editor

Now go to our layout.html file and add the following command in the layout.html file as shown
below :

Layout.html:

<html>
<head>
<title>Vasanth Flask App</title>
<link rel="stylesheet"
href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
{% include 'includes/_navbar.html'%}

<div class="container">
{% include 'includes/_messages.html' %}
{% block body %}{% endblock %}
</div>

116
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"</script>
<script src="//cdn.ckeditor.com/4.6.2/basic/ckeditor.js"></script>
<script type="text/jscript">
CKEDITOR.replace('editor')
</body>
</html>

And now go to add article and make the following changes in the add article page as follows :

Add_article.html

{% extends 'layout.html' %}

Now save and run the python server ,you can see some formatting options for the editor as
shown below .

117
Now in the dashboard we have to see the articles as we did that before when we clicked the
articles as the list of articles contents will be displayed as same we have to do now ,but this
time the articles should shown up in the homepage (dashboard).

Now go to app.py ,navigate to the dashboard route and make the following changes and save
the app.py file

app = Flask(__name__)
app.debug = True

#Config MySQL
app.config['MYSQL_HOST'] = 'localhost'
app.config['MYSQL_USER'] = 'root'

118
app.config['MYSQL_PASSWORD'] = 'root'
app.config['MYSQL_DB'] = 'myflaskapp'
app.config['MYSQL_CURSORCLASS'] = 'DictCursor'
#init MYSQL
mysql = MySQL(app)

Articles = Articles()

@app.route('/')
def index():
return render_template('home.html')

@app.route('/about')
def about():
return render_template('about.html')

@app.route('/articles')
def articles():
return render_template('articles.html',articles = Articles)

@app.route('/article/<string:id>/')
def article(id):
return render_template('article.html',id=id)

@app.route('/register', methods=['GET','POST'])
def register():
form = RegisterForm(request.form)
if request.method == 'POST' and form.validate():
name = form.name.data

119
email = form.email.data
username = form.username.data
password = sha256_crypt.encrypt(str(form.password.data))

# Create crusor
cur = mysql.connection.cursor()

cur.execute("INSERT INTO users(name,email,username,password)

VALUES(%s,%s,%s,%s)",(name,email,username,password))

# commit to DB
mysql.connection.commit()
#close connection
cur.close()

flash("You are now Registered and you can login" , 'success')

redirect(url_for('login'))
return render_template('register.html',form=form)

# user login
@app.route('/login',methods =['GET','POST'])
def login():
if request.method == 'POST':
#Get Form Fields
username = request.form['username']
password_candidate = request.form['password']

# Create cursor

cur = mysql.connection.cursor()

#Get user by username

result = cur.execute("SELECT * FROM users WHERE username = %s" ,[username])

if result > 0:
# Get Stored hash
data = cur.fetchone()

120
password = data['password']

# Compare Passwords
if sha256_crypt.verify(password_candidate,password):
#Passed
session['logged_in'] = True
session['username'] = username

flash('You are now logged in ','success')

return redirect(url_for('dashboard'))
else:
error = 'Username not found'
return render_template('login.html',error=error)
#close connection
cur.close()

else:
error = 'Username not found'
return render_template('login.html',error=error)

return render_template('login.html')

#check if user logged in

#logout
@app.route('/logout')
@is_logged_in

121
def logout():
session.clear()
flash('you are now logged out ','success')
return redirect(url_for('login'))
# Dashboard
@app.route('/dashboard')
@is_logged_in
def dashboard():

#create cursor
cur = mysql.connection.cursor()

#get articles
result = cur.execute("SELECT * FROM articles")

articles = cur.fetchall()

if result > 0:
return render_template('dashboard.html',articles=articles)
else:
msg = 'No Articles Found'
return render_template('dashboard.html',msg=msg)
#close connection
cur.close()

#Article form class

class ArticleForm(Form):
title = StringField('Title',[validators.Length(min=1,max=50)])
body = TextAreaField('Body',[validators.Length(min=30,max=1000)])

#Add Article

@app.route('/add_article', methods=['GET','POST'])
@is_logged_in
def add_article():
form = ArticleForm(request.form)
if request.method == 'POST' and form.validate():
title = form.title.data

122
body = form.body.data

# Create a cursor

cur = mysql.connection.cursor()

#execute

cur.execute("INSERT INTO articles(title,body,author) VALUES(%s, %s, %s)",(title,

body, session['username']))

#commit to db

mysql.connection.commit()

#close connection
cur.close()

flash('Article created ','success')

return redirect(url_for('dashboard'))

return render_template('add_article.html',form=form)

if __name__ =='__main__':
app.secret_key='secret123'
app.run()

Now navigate to dashboard.html page that’s in templates folder and make the following changes
:

Dashboard.html

{% extends 'layout.html' %}

{% block body %}
<h1>Dashboard<small>Welcome {{session.username}}</small></h1>
<a class="btn btn-success" href="/add_article">Add Articles</a>
<hr>

123
<table class="table table-striped">
<tr>
<th>ID</th>
<th>Title</th>
<th>Author</th>
<th>Date</th>
<th></th>
<th></th>
</tr>
{% for article in articles %}
<tr>
<td>{{article.id}}</td>
<td>{{article.title}}</td>
<td>{{article.author}}</td>
<td>{{article.create_date}}</td>
<td><a href="edit_article/{{article.id}}" class="btn btn-default pullright">Edit</td>
<td><a href="#" class="btn btn-danger">Delete</a></td>
{% endfor %}
</table>
{% endblock %}

Now save the dashboard.html file and run the app.py server and navigate to dashboard page in
the browser , now your dashboard will display the articles content that are fetched from the
database and you can see the edit and delete button as shown .

124
Now go to app.py and make the following changes in articles route

App.py
from flask import Flask,render_template, flash, redirect , url_for , session ,request, logging
from flask_mysqldb import MySQL
#from data import Articles
from wtforms import Form, StringField , TextAreaField ,PasswordField , validators
from passlib.hash import sha256_crypt
from functools import wraps

app = Flask(__name__)
app.debug = True

125
mysql = MySQL(app)

#Articles = Articles()

@app.route('/')
def index():
return render_template('home.html')

@app.route('/about')
def about():
return render_template('about.html')

@app.route('/articles')
def articles():

#create cursor
cur = mysql.connection.cursor()

#get articles
result = cur.execute("SELECT * FROM articles")

articles = cur.fetchall()

if result > 0:
return render_template('articles.html',articles=articles)
else:
msg = 'No Articles Found'
return render_template('articles.html',msg=msg)
#close connection
cur.close()

@app.route('/article/<string:id>/')
def article(id):
return render_template('article.html',id=id)

class RegisterForm(Form):

126
name = StringField('Name',[validators.Length(min=1,max=50)])
username = StringField('Username',[validators.Length(min=4,max=25)])
email = StringField('Email',[validators.Length(min=4,max=25)])
password = PasswordField('Password', [ validators.DataRequired
(),validators.EqualTo('confirm',message ='passwords do not match')])
confirm = PasswordField('Confirm password')

# Create crusor
cur = mysql.connection.cursor()

cur.execute("INSERT INTO users(name,email,username,password)

VALUES(%s,%s,%s,%s)",(name,email,username,password))

# commit to DB
mysql.connection.commit()
#close connection
cur.close()

flash("You are now Registered and you can login" , 'success')

redirect(url_for('login'))
return render_template('register.html',form=form)

# user login
@app.route('/login',methods =['GET','POST'])
def login():
if request.method == 'POST':
#Get Form Fields
username = request.form['username']
password_candidate = request.form['password']

127
# Create cursor

cur = mysql.connection.cursor()

#Get user by username

result = cur.execute("SELECT * FROM users WHERE username = %s" ,[username])

if result > 0:
# Get Stored hash
data = cur.fetchone()
password = data['password']

# Compare Passwords
if sha256_crypt.verify(password_candidate,password):
#Passed
session['logged_in'] = True
session['username'] = username

flash('You are now logged in ','success')

return redirect(url_for('dashboard'))
else:
error = 'Username not found'
return render_template('login.html',error=error)
#close connection
cur.close()

else:
error = 'Username not found'
return render_template('login.html',error=error)

return render_template('login.html')

#check if user logged in

def is_logged_in(f):
@wraps(f)
def wrap(*args,**kwargs):

128
if 'logged_in' in session:
return f(*args, **kwargs)
else:
flash('Unauthorized, please login','danger')
return redirect(url_for('login'))
return wrap

#create cursor
cur = mysql.connection.cursor()

#get articles
result = cur.execute("SELECT * FROM articles")

articles = cur.fetchall()

if result > 0:
return render_template('dashboard.html',articles=articles)
else:
msg = 'No Articles Found'
return render_template('dashboard.html',msg=msg)
#close connection
cur.close()

#Article form class

129
class ArticleForm(Form):
title = StringField('Title',[validators.Length(min=1,max=50)])
body = TextAreaField('Body',[validators.Length(min=30,max=1000)])

#Add Article

# Create a cursor

cur = mysql.connection.cursor()

#execute

cur.execute("INSERT INTO articles(title,body,author) VALUES(%s, %s, %s)",(title,

body, session['username']))

#commit to db

mysql.connection.commit()

#close connection
cur.close()

flash('Article created ','success')

return redirect(url_for('dashboard'))

return render_template('add_article.html',form=form)

if __name__ =='__main__':
app.secret_key='secret123'
app.run()

130
Now save the app.py and run the python server,now you can see the content inside the articles
that are fetched from the database as shown below :

Now we have make some other changes in the app.py lets do that ! ,

App.py

from flask import Flask,render_template, flash, redirect , url_for , session ,request, logging
from flask_mysqldb import MySQL
from wtforms import Form, StringField , TextAreaField ,PasswordField , validators
from passlib.hash import sha256_crypt
from functools import wraps

app = Flask(__name__)
app.debug = True

#Config MySQL
app.config['MYSQL_HOST'] = 'localhost'
app.config['MYSQL_USER'] = 'root'

131
app.config['MYSQL_PASSWORD'] = 'root'
app.config['MYSQL_DB'] = 'myflaskapp'
app.config['MYSQL_CURSORCLASS'] = 'DictCursor'
#init MYSQL
mysql = MySQL(app)

#Articles = Articles()

@app.route('/')
def index():
return render_template('home.html')

@app.route('/about')
def about():
return render_template('about.html')

@app.route('/articles')
def articles():

#create cursor
cur = mysql.connection.cursor()

#get articles
result = cur.execute("SELECT * FROM articles")

articles = cur.fetchall()

if result > 0:
return render_template('articles.html',articles=articles)
else:
msg = 'No Articles Found'
return render_template('articles.html',msg=msg)
#close connection
cur.close()

@app.route('/article/<string:id>/')

132
def article(id):
#create cursor
cur = mysql.connection.cursor()

#get article
result = cur.execute("SELECT * FROM articles WHERE id= %s",[id])

article = cur.fetchone()

return render_template('article.html',article=article)

# Create crusor
cur = mysql.connection.cursor()

cur.execute("INSERT INTO users(name,email,username,password)

VALUES(%s,%s,%s,%s)",(name,email,username,password))

# commit to DB
mysql.connection.commit()
#close connection
cur.close()

133
flash("You are now Registered and you can login" , 'success')

redirect(url_for('login'))
return render_template('register.html',form=form)

# user login
@app.route('/login',methods =['GET','POST'])
def login():
if request.method == 'POST':
#Get Form Fields
username = request.form['username']
password_candidate = request.form['password']

# Create cursor

cur = mysql.connection.cursor()

#Get user by username

result = cur.execute("SELECT * FROM users WHERE username = %s" ,[username])

if result > 0:
# Get Stored hash
data = cur.fetchone()
password = data['password']

# Compare Passwords
if sha256_crypt.verify(password_candidate,password):
#Passed
session['logged_in'] = True
session['username'] = username

flash('You are now logged in ','success')

return redirect(url_for('dashboard'))
else:
error = 'Username not found'
return render_template('login.html',error=error)
#close connection
cur.close()

134
else:
error = 'Username not found'
return render_template('login.html',error=error)

return render_template('login.html')

#check if user logged in

#create cursor
cur = mysql.connection.cursor()

#get articles
result = cur.execute("SELECT * FROM articles")

135
articles = cur.fetchall()

if result > 0:
return render_template('dashboard.html',articles=articles)
else:
msg = 'No Articles Found'
return render_template('dashboard.html',msg=msg)
#close connection
cur.close()

#Article form class

class ArticleForm(Form):
title = StringField('Title',[validators.Length(min=1,max=50)])
body = TextAreaField('Body',[validators.Length(min=30,max=1000)])

#Add Article

# Create a cursor

cur = mysql.connection.cursor()

#execute

cur.execute("INSERT INTO articles(title,body,author) VALUES(%s, %s, %s)",(title,

body, session['username']))

#commit to db

mysql.connection.commit()

136
#close connection
cur.close()

flash('Article created ','success')

return redirect(url_for('dashboard'))

return render_template('add_article.html',form=form)

if __name__ =='__main__':
app.secret_key='secret123'
app.run()

After making the changes in the app.py file ,now go to article.html file and add the following
code :

Article.html

{% extends 'layout.html'%}

{% block body %}
<h1>{{article.title}}</h1>
<small> Written by {{artilce.author}} on {{article.create_date}}</small>
<hr>
<div>
{{article.body | safe}}
</div>
{% endblock %}

Now save the article.html file and reload the article tab in the browser now the contents are
displayed as shown below :

137
Now to test it out ,go to dashboard and add a new article by clicking add article button as shown
below :

138
Now we have to add the button in the dashboard ,now go to home.html

{% extends 'layout.html' %}

{% block body %}
<div class="jumbotron text-center">
<h1>Vasanth Python Tutorials</h1>
<p class="lead">This Application is build using python and flask framework</p>
{% if session.logged_in == NULL %}
<a href="/register" class="btn btn-primary btn-lg">Register</a>
<a href="/login" class="btn btn-success btn-lg">Login</a>
{% endif %}
</div>
{% endblock %}

Now save the file and run the app.py file ,

Logout the page if you are logged in ,now go to home page ,you will see the two button as
shown below :

139
Now we have to work on the editing of the articles , now go to app.py file and make the
following changes .

app = Flask(__name__)
app.debug = True

140
mysql = MySQL(app)

#Articles = Articles()

@app.route('/')
def index():
return render_template('home.html')

@app.route('/about')
def about():
return render_template('about.html')

@app.route('/articles')
def articles():

#create cursor
cur = mysql.connection.cursor()

#get articles
result = cur.execute("SELECT * FROM articles")

articles = cur.fetchall()

if result > 0:
return render_template('articles.html',articles=articles)
else:
msg = 'No Articles Found'
return render_template('articles.html',msg=msg)
#close connection
cur.close()

@app.route('/article/<string:id>/')
def article(id):
#create cursor
cur = mysql.connection.cursor()

141
#get article
result = cur.execute("SELECT * FROM articles WHERE id = %s",[id])

article = cur.fetchone()

return render_template('article.html',article=article)

# Create crusor
cur = mysql.connection.cursor()

cur.execute("INSERT INTO users(name,email,username,password)

VALUES(%s,%s,%s,%s)",(name,email,username,password))

# commit to DB
mysql.connection.commit()
#close connection
cur.close()

flash("You are now Registered and you can login" , 'success')

redirect(url_for('login'))
return render_template('register.html',form=form)

142
# user login
@app.route('/login',methods =['GET','POST'])
def login():
if request.method == 'POST':
#Get Form Fields
username = request.form['username']
password_candidate = request.form['password']

# Create cursor

cur = mysql.connection.cursor()

#Get user by username

result = cur.execute("SELECT * FROM users WHERE username = %s" ,[username])

if result > 0:
# Get Stored hash
data = cur.fetchone()
password = data['password']

# Compare Passwords
if sha256_crypt.verify(password_candidate,password):
#Passed
session['logged_in'] = True
session['username'] = username

flash('You are now logged in ','success')

return redirect(url_for('dashboard'))
else:
error = 'Username not found'
return render_template('login.html',error=error)
#close connection
cur.close()

else:
error = 'Username not found'
return render_template('login.html',error=error)

143
return render_template('login.html')

#check if user logged in

#create cursor
cur = mysql.connection.cursor()

#get articles
result = cur.execute("SELECT * FROM articles")

articles = cur.fetchall()

if result > 0:
return render_template('dashboard.html',articles=articles)

144
else:
msg = 'No Articles Found'
return render_template('dashboard.html',msg=msg)
#close connection
cur.close()

#Article form class

class ArticleForm(Form):
title = StringField('Title',[validators.Length(min=1,max=50)])
body = TextAreaField('Body',[validators.Length(min=30,max=1000)])

#Add Article

# Create a cursor

cur = mysql.connection.cursor()

#execute

cur.execute("INSERT INTO articles(title,body,author) VALUES(%s, %s, %s)",(title,

body, session['username']))

#commit to db

mysql.connection.commit()

#close connection
cur.close()

flash('Article created ','success')

145
return redirect(url_for('dashboard'))

return render_template('add_article.html',form=form)

#Edit Article

@app.route('/edit_article/<string:id>', methods=['GET','POST'])
@is_logged_in
def edit_article(id):
# Create cursor
cur = mysql.connection.cursor()
#get article by id
result = cur.execute("SELECT * FROM articles WHERE id = %s", [id])

article = cur.fetchone()

#get form
form = ArticleForm(request.form)

#populate article form fields

form.title.data = article['title']
form.title.data = article['body']

if request.method == 'POST' and form.validate():

title = form.title.data
body = form.body.data

# Create a cursor

cur = mysql.connection.cursor()

#execute

cur.execute("UPDATE articles SET name=%s, body=%s WHERE id = %s" ,

(name,body))

#commit to db

146
mysql.connection.commit()

#close connection
cur.close()

flash('Article Updated ','success')

return redirect(url_for('dashboard'))

return render_template('edit_article.html',form=form)

if __name__ =='__main__':
app.secret_key='secret123'
app.run()

After making the above changes in the app.py file save the file and now go to templates and
create a new file as edit_article.html as shown below :

Now type the following code in the edit_article.html as shown below :

147
{% extends 'layout.html' %}

{% block body %}
<h1> Edit Articles</h1>
{% from "includes/_formhelpers.html" import render_field %}
<form method="POST" action="">
<div class="form-group">
{{ render_field(form.title,class_="form-control") }}
</div>
<div class="form-group">
{{ render_field(form.body, class_="form-control",id="editor") }}
</div>
<p><input class="btn btn-primary" type="submit" value="Submit">
</form>
{% endblock %}

Now save the file and now execute the app.py file ,now you can edit the following content as
shown below :

And now we have to make some changes in the app.py file as shown below :

148
from flask import Flask,render_template, flash, redirect , url_for , session ,request, logging
from flask_mysqldb import MySQL
from wtforms import Form, StringField , TextAreaField ,PasswordField , validators
from passlib.hash import sha256_crypt
from functools import wraps

app = Flask(__name__)
app.debug = True

#Articles = Articles()

@app.route('/')
def index():
return render_template('home.html')

@app.route('/about')
def about():
return render_template('about.html')

@app.route('/articles')
def articles():

#create cursor
cur = mysql.connection.cursor()

#get articles
result = cur.execute("SELECT * FROM articles")

149
articles = cur.fetchall()

if result > 0:
return render_template('articles.html',articles=articles)
else:
msg = 'No Articles Found'
return render_template('articles.html',msg=msg)
#close connection
cur.close()

@app.route('/article/<string:id>/')
def article(id):
#create cursor
cur = mysql.connection.cursor()

#get article
result = cur.execute("SELECT * FROM articles WHERE id = %s",[id])

article = cur.fetchone()

return render_template('article.html',article=article)

@app.route('/register', methods=['GET','POST'])
def register():
form = RegisterForm(request.form)
if request.method == 'POST' and form.validate():
name = form.name.data
email = form.email.data

150
username = form.username.data
password = sha256_crypt.encrypt(str(form.password.data))

# Create crusor
cur = mysql.connection.cursor()

cur.execute("INSERT INTO users(name,email,username,password)

VALUES(%s,%s,%s,%s)",(name,email,username,password))

# commit to DB
mysql.connection.commit()
#close connection
cur.close()

flash("You are now Registered and you can login" , 'success')

redirect(url_for('login'))
return render_template('register.html',form=form)

# user login
@app.route('/login',methods =['GET','POST'])
def login():
if request.method == 'POST':
#Get Form Fields
username = request.form['username']
password_candidate = request.form['password']

# Create cursor

cur = mysql.connection.cursor()

#Get user by username

result = cur.execute("SELECT * FROM users WHERE username = %s" ,[username])

if result > 0:
# Get Stored hash
data = cur.fetchone()
password = data['password']

151
# Compare Passwords
if sha256_crypt.verify(password_candidate,password):
#Passed
session['logged_in'] = True
session['username'] = username

flash('You are now logged in ','success')

return redirect(url_for('dashboard'))
else:
error = 'Username not found'
return render_template('login.html',error=error)
#close connection
cur.close()

else:
error = 'Username not found'
return render_template('login.html',error=error)

return render_template('login.html')

#check if user logged in

#logout
@app.route('/logout')
@is_logged_in
def logout():

152
session.clear()
flash('you are now logged out ','success')
return redirect(url_for('login'))
# Dashboard
@app.route('/dashboard')
@is_logged_in
def dashboard():

#create cursor
cur = mysql.connection.cursor()

#get articles
result = cur.execute("SELECT * FROM articles")

articles = cur.fetchall()

if result > 0:
return render_template('dashboard.html',articles=articles)
else:
msg = 'No Articles Found'
return render_template('dashboard.html',msg=msg)
#close connection
cur.close()

#Article form class

class ArticleForm(Form):
title = StringField('Title',[validators.Length(min=1,max=50)])
body = TextAreaField('Body',[validators.Length(min=30,max=1000)])

#Add Article

153
# Create a cursor

cur = mysql.connection.cursor()

#execute

cur.execute("INSERT INTO articles(title,body,author) VALUES(%s, %s, %s)",(title,

body, session['username']))

#commit to db

mysql.connection.commit()

#close connection
cur.close()

flash('Article created ','success')

return redirect(url_for('dashboard'))

return render_template('add_article.html',form=form)

#Edit Article

article = cur.fetchone()

#get form
form = ArticleForm(request.form)

#populate article form fields

154
form.title.data = article['title']
form.body. data = article['body']

if request.method == 'POST' and form.validate():

title = request.form['title']
body = request.form['body']

# Create a cursor

cur = mysql.connection.cursor()

#execute

cur.execute("UPDATE articles SET title=%s, body=%s WHERE id = %s" ,

(title,body,id))

#commit to db

mysql.connection.commit()

#close connection
cur.close()

flash('Article Updated ','success')

return redirect(url_for('dashboard'))

return render_template('edit_article.html',form=form)

if __name__ =='__main__':
app.secret_key='secret123'
app.run()

Now save the app.py file and refresh the browser and edit the articles and make some changes
and click submit now we can see that we can edit the content of the article and we can make the
changes that reflect in the database as shown

155
Now we want to create the functionality for the delete button now go to app.py and make the
following changes in the file :

App.py

app = Flask(__name__)
app.debug = True

#Config MySQL
app.config['MYSQL_HOST'] = 'localhost'
app.config['MYSQL_USER'] = 'root'
app.config['MYSQL_PASSWORD'] = 'root'
app.config['MYSQL_DB'] = 'myflaskapp'

156
app.config['MYSQL_CURSORCLASS'] = 'DictCursor'
#init MYSQL
mysql = MySQL(app)

#Articles = Articles()

@app.route('/')
def index():
return render_template('home.html')

@app.route('/about')
def about():
return render_template('about.html')

@app.route('/articles')
def articles():

#create cursor
cur = mysql.connection.cursor()

#get articles
result = cur.execute("SELECT * FROM articles")

articles = cur.fetchall()

if result > 0:
return render_template('articles.html',articles=articles)
else:
msg = 'No Articles Found'
return render_template('articles.html',msg=msg)
#close connection
cur.close()

@app.route('/article/<string:id>/')
def article(id):
#create cursor

157
cur = mysql.connection.cursor()

#get article
result = cur.execute("SELECT * FROM articles WHERE id = %s",[id])

article = cur.fetchone()

return render_template('article.html',article=article)

# Create crusor
cur = mysql.connection.cursor()

cur.execute("INSERT INTO users(name,email,username,password)

VALUES(%s,%s,%s,%s)",(name,email,username,password))

# commit to DB
mysql.connection.commit()
#close connection
cur.close()

flash("You are now Registered and you can login" , 'success')

158
redirect(url_for('login'))
return render_template('register.html',form=form)

# user login
@app.route('/login',methods =['GET','POST'])
def login():
if request.method == 'POST':
#Get Form Fields
username = request.form['username']
password_candidate = request.form['password']

# Create cursor

cur = mysql.connection.cursor()

#Get user by username

result = cur.execute("SELECT * FROM users WHERE username = %s" ,[username])

if result > 0:
# Get Stored hash
data = cur.fetchone()
password = data['password']

# Compare Passwords
if sha256_crypt.verify(password_candidate,password):
#Passed
session['logged_in'] = True
session['username'] = username

flash('You are now logged in ','success')

return redirect(url_for('dashboard'))
else:
error = 'Username not found'
return render_template('login.html',error=error)
#close connection
cur.close()

else:

159
error = 'Username not found'
return render_template('login.html',error=error)

return render_template('login.html')

#check if user logged in

#create cursor
cur = mysql.connection.cursor()

#get articles
result = cur.execute("SELECT * FROM articles")

articles = cur.fetchall()

160
if result > 0:
return render_template('dashboard.html',articles=articles)
else:
msg = 'No Articles Found'
return render_template('dashboard.html',msg=msg)
#close connection
cur.close()

#Article form class

class ArticleForm(Form):
title = StringField('Title',[validators.Length(min=1,max=50)])
body = TextAreaField('Body',[validators.Length(min=30,max=1000)])

#Add Article

# Create a cursor

cur = mysql.connection.cursor()

#execute

cur.execute("INSERT INTO articles(title,body,author) VALUES(%s, %s, %s)",(title,

body, session['username']))

#commit to db

mysql.connection.commit()

#close connection
cur.close()

161
flash('Article created ','success')

return redirect(url_for('dashboard'))

return render_template('add_article.html',form=form)

#Edit Article

article = cur.fetchone()

#get form
form = ArticleForm(request.form)

#populate article form fields

form.title.data = article['title']
form.body. data = article['body']

if request.method == 'POST' and form.validate():

title = request.form['title']
body = request.form['body']

# Create a cursor

cur = mysql.connection.cursor()

#execute

cur.execute("UPDATE articles SET title=%s, body=%s WHERE id = %s" ,

(title,body,id))

162
#commit to db

mysql.connection.commit()

#close connection
cur.close()

flash('Article Updated ','success')

return redirect(url_for('dashboard'))

return render_template('edit_article.html',form=form)

#Delete article
@app.route('/delete_article/<string:id>', methods=['POST'])
@is_logged_in
def delete_article(id):
# Create cursor
cur = mysql.connection.cursor()

#Execute
cur.execute("DELETE FROM articles WHERE id = %s",[id])

#Commit to DB

mysql.connection.commit()
#close connection

cur.close()

flash('Article Deleted ','success')

return redirect(url_for('dashboard'))

if __name__ =='__main__':
app.secret_key='secret123'
app.run()

163
Now go to dashboard.html and make the following changes :

Dashboard.html :

{% extends 'layout.html' %}

{% block body %}
<h1>Dashboard<small>Welcome {{session.username}}</small></h1>
<a class="btn btn-success" href="/add_article">Add Articles</a>
<hr>
<table class="table table-striped">
<tr>
<th>ID</th>
<th>Title</th>
<th>Author</th>
<th>Date</th>
<th></th>
<th></th>
</tr>
{% for article in articles %}
<tr>
<td>{{article.id}}</td>
<td>{{article.title}}</td>
<td>{{article.author}}</td>
<td>{{article.create_date}}</td>
<td><a href="edit_article/{{article.id}}" class="btn btn-default pullright">Edit</td>
<td>
<form action="{{url_for('delete_article',id=article.id)}}" method="post">
<input type="hidden" name="_method" value="DELETE">
<input type="submit" value="Delete" class="btn btn-danger">
</form>
</td>
</tr>
{% endfor %}
</table>
{% endblock %}

164
And now save the file and execute the app.py file server now you can delete the post that
already present in the database ,thus we can add and delete the post in the articles .

Thus we have successfully created a web application using the python and flask .

If you need the source code for this mail me , will send you the entire source code for this :
Mail id :
vasanth.n@kgisl.com
nvasanthnagarajan@gmail.com

If you found any errors in this book,please free to inform me so that i can make those changes .

Thankyou

Vasanth Nagarajan

165
166
167

(3.1) William S Vincent - Django For APIs - Build Web APIs With Python and Django. 3.1 (2020)
No ratings yet
(3.1) William S Vincent - Django For APIs - Build Web APIs With Python and Django. 3.1 (2020)
9 pages
Python Flask and Django by Emenwa Global
100% (1)
Python Flask and Django by Emenwa Global
224 pages
Data Object Tables in Employee Central: Developer Guide - PUBLIC Document Version: 1H 2021 - 2021-07-21
0% (1)
Data Object Tables in Employee Central: Developer Guide - PUBLIC Document Version: 1H 2021 - 2021-07-21
152 pages
Practical C++ Backend Programming
From Everand
Practical C++ Backend Programming
Justin Barbara
No ratings yet
Flask-1 - Python With Naveen PDF
100% (1)
Flask-1 - Python With Naveen PDF
20 pages
Sqlalchemy Cheatsheet PDF
100% (2)
Sqlalchemy Cheatsheet PDF
34 pages
Creating Excel Files With Python and XlsxWriter (v1.2.9 - 2020) PDF
No ratings yet
Creating Excel Files With Python and XlsxWriter (v1.2.9 - 2020) PDF
617 pages
Python Flask For Web Development. Build Web Applications... 2022
100% (1)
Python Flask For Web Development. Build Web Applications... 2022
114 pages
Learning Python Design Patterns - Second Edition - Sample Chapter
No ratings yet
Learning Python Design Patterns - Second Edition - Sample Chapter
16 pages
Advance Python
No ratings yet
Advance Python
202 pages
API Reference - Scikit-Learn 0.19.2 Documentation
No ratings yet
API Reference - Scikit-Learn 0.19.2 Documentation
21 pages
Keras Cheat Sheet Python
No ratings yet
Keras Cheat Sheet Python
1 page
MongoDB Cheat Sheet
No ratings yet
MongoDB Cheat Sheet
17 pages
20 Python Libraries You Can't Live Without - Python Tips
No ratings yet
20 Python Libraries You Can't Live Without - Python Tips
6 pages
Jquery Plugins
No ratings yet
Jquery Plugins
44 pages
Top 50 Django Interview Questions
No ratings yet
Top 50 Django Interview Questions
10 pages
Super Advanced Python PDF
No ratings yet
Super Advanced Python PDF
120 pages
How To Learn Python For Data Science
100% (1)
How To Learn Python For Data Science
22 pages
Python - Programming
No ratings yet
Python - Programming
9 pages
ILE RPG Programming Guide
No ratings yet
ILE RPG Programming Guide
616 pages
Yousef Time Series Analysis in Python 2020
100% (1)
Yousef Time Series Analysis in Python 2020
835 pages
TypeScript Cheatsheets
No ratings yet
TypeScript Cheatsheets
10 pages
Flask Tutorial 2
0% (1)
Flask Tutorial 2
15 pages
Advanced Python
100% (2)
Advanced Python
4 pages
Pandas Cheat Sheet
100% (1)
Pandas Cheat Sheet
2 pages
Building Multi Tenant Applications With Django
100% (1)
Building Multi Tenant Applications With Django
53 pages
Api-Demo: Platform-As-A-Service (Paas) Based Solution
No ratings yet
Api-Demo: Platform-As-A-Service (Paas) Based Solution
6 pages
Real Python Part 3
100% (1)
Real Python Part 3
404 pages
How To Export Excel Files in A Python - Django Application - ASSIST Software Romania
100% (1)
How To Export Excel Files in A Python - Django Application - ASSIST Software Romania
13 pages
Python 3.x Lists Cheatsheet
No ratings yet
Python 3.x Lists Cheatsheet
5 pages
Python For Advance 3 Days With Python
No ratings yet
Python For Advance 3 Days With Python
263 pages
Microservices With Python and Flask
0% (1)
Microservices With Python and Flask
66 pages
Python Programming Installation
No ratings yet
Python Programming Installation
11 pages
30 Python Best Practices, Tips, and Tricks by Erik Van Baaren Python Land Medium
No ratings yet
30 Python Best Practices, Tips, and Tricks by Erik Van Baaren Python Land Medium
23 pages
Getting Started - TensorFlow
0% (1)
Getting Started - TensorFlow
14 pages
20+ Real-World Java and Python Projects To Expand Your Dev Portfolio
100% (1)
20+ Real-World Java and Python Projects To Expand Your Dev Portfolio
25 pages
Django Rest Framework Json API
No ratings yet
Django Rest Framework Json API
21 pages
Building Web Applications With Flask - Sample Chapter
0% (1)
Building Web Applications With Flask - Sample Chapter
10 pages
Django Tutorial PDF
100% (4)
Django Tutorial PDF
85 pages
PyTorch For Machine Learning
No ratings yet
PyTorch For Machine Learning
5 pages
Flask Tutorial
100% (5)
Flask Tutorial
71 pages
Python Decorators PDF
No ratings yet
Python Decorators PDF
6 pages
Sqlalchemy Tutorial
100% (1)
Sqlalchemy Tutorial
92 pages
Natural Language Processing With Java - Sample Chapter
100% (1)
Natural Language Processing With Java - Sample Chapter
33 pages
Windows XP Command Line Tools
No ratings yet
Windows XP Command Line Tools
5 pages
Flask Restplus
No ratings yet
Flask Restplus
86 pages
DRF + React
No ratings yet
DRF + React
27 pages
Django
No ratings yet
Django
45 pages
High Performance Django
100% (1)
High Performance Django
170 pages
Pandas Data Analysis Handbook
No ratings yet
Pandas Data Analysis Handbook
55 pages
Django/Python Framework
100% (5)
Django/Python Framework
57 pages
(Numpy) - Extended Cheatsheet
No ratings yet
(Numpy) - Extended Cheatsheet
8 pages
Ogr Django
No ratings yet
Ogr Django
8 pages
Web Scraping With Python Tutorials From A To Z
100% (1)
Web Scraping With Python Tutorials From A To Z
35 pages
Oops in C++: Ms. Niti Gupta
No ratings yet
Oops in C++: Ms. Niti Gupta
30 pages
Javascript Cheat Sheet
No ratings yet
Javascript Cheat Sheet
1 page
Json API by Example
100% (1)
Json API by Example
64 pages
Python Advanced Programming: The Guide to Learn Python Programming. Reference with Exercises and Samples About Dynamical Programming, Multithreading, Multiprocessing, Debugging, Testing and More
From Everand
Python Advanced Programming: The Guide to Learn Python Programming. Reference with Exercises and Samples About Dynamical Programming, Multithreading, Multiprocessing, Debugging, Testing and More
Marcus Richards
No ratings yet
Mastering Python High Performance: Learn how to optimize your code and Python performance with this vital guide to Python performance profiling and benchmarking
From Everand
Mastering Python High Performance: Learn how to optimize your code and Python performance with this vital guide to Python performance profiling and benchmarking
Fernando Donglio
No ratings yet
Python Unleashed: Mastering the Art of Efficient Coding
From Everand
Python Unleashed: Mastering the Art of Efficient Coding
James Livingston
No ratings yet
Flask By Example
From Everand
Flask By Example
Dwyer Gareth
No ratings yet
Top 135 Networking Interview Questions and Answers
No ratings yet
Top 135 Networking Interview Questions and Answers
38 pages
13 Common Technical Interview Questions (With Tips and Example Answers)
No ratings yet
13 Common Technical Interview Questions (With Tips and Example Answers)
9 pages
Hardware and Networking Interview Questions With Answers
No ratings yet
Hardware and Networking Interview Questions With Answers
8 pages
ESPduino 32s
100% (1)
ESPduino 32s
1 page
ATEM Operation Manual Nov 2013
No ratings yet
ATEM Operation Manual Nov 2013
0 pages
File Organization and Data Base Design
No ratings yet
File Organization and Data Base Design
17 pages
Core Java Code Snippets
No ratings yet
Core Java Code Snippets
11 pages
Code Lagos - Learn Programming With Python
No ratings yet
Code Lagos - Learn Programming With Python
72 pages
(PDF) 8.1.4.6 Lab - Calculating IPv4 Subnets
No ratings yet
(PDF) 8.1.4.6 Lab - Calculating IPv4 Subnets
4 pages
Ebook The Evolution of The Data Warehouse
No ratings yet
Ebook The Evolution of The Data Warehouse
40 pages
Cricket Project
No ratings yet
Cricket Project
14 pages
CHAPTER 2 - CLOUD COMPUTING FUNDAMENTALS (AutoRecovered)
No ratings yet
CHAPTER 2 - CLOUD COMPUTING FUNDAMENTALS (AutoRecovered)
10 pages
TD-B2204 08S1-PEU-datasheet-20231116
No ratings yet
TD-B2204 08S1-PEU-datasheet-20231116
3 pages
Managing and Usage of JIRA
No ratings yet
Managing and Usage of JIRA
27 pages
Unit-3 Os CSBS
No ratings yet
Unit-3 Os CSBS
139 pages
INTERMEDIATE PROGRAMMING. Assessment.
No ratings yet
INTERMEDIATE PROGRAMMING. Assessment.
32 pages
Black Book
No ratings yet
Black Book
27 pages
Org - Impit - WWW
No ratings yet
Org - Impit - WWW
2 pages
Fuzz or Lose - Kostya Serebryany - CppCon 2017
No ratings yet
Fuzz or Lose - Kostya Serebryany - CppCon 2017
51 pages
SL Bits
No ratings yet
SL Bits
8 pages
Web Application Security Adithyan AK
No ratings yet
Web Application Security Adithyan AK
64 pages
A Project Report ON Campus Recruitment System
No ratings yet
A Project Report ON Campus Recruitment System
31 pages
DR J A Chandulal
No ratings yet
DR J A Chandulal
7 pages
System Analysis and Design Theory
No ratings yet
System Analysis and Design Theory
3 pages
Daa Notes
No ratings yet
Daa Notes
114 pages
38.self & - Init - (Constructors) Python
No ratings yet
38.self & - Init - (Constructors) Python
4 pages
Aashish Resume
No ratings yet
Aashish Resume
2 pages
vEEG V32 Sell Sheet
No ratings yet
vEEG V32 Sell Sheet
2 pages
PurdueFSD 1653056243458
No ratings yet
PurdueFSD 1653056243458
14 pages
T1+SEO+LP+Diplima Sarmah
0% (1)
T1+SEO+LP+Diplima Sarmah
13 pages
Essential Python Data Visualization Libraries 1687141550
No ratings yet
Essential Python Data Visualization Libraries 1687141550
16 pages
A Trivia Quiz On Types of Computers! - ProProfs Quiz
No ratings yet
A Trivia Quiz On Types of Computers! - ProProfs Quiz
4 pages
The Evolution of Cloud Computing
No ratings yet
The Evolution of Cloud Computing
16 pages
Flexible Manufacturing System
No ratings yet
Flexible Manufacturing System
1 page