Flask By Example

Gareth Dwyer

• Publisher: Packt Publishing
• Year: 2016
• eBook ISBN: 9781785286933
• Edition: 1
• Topic: Computer Science
• Subtopic: Programming in Python
• Index: Computer Science

Unleash the full potential of the Flask web framework by creating simple yet powerful web applications

About This Book

• The most up-to-date book on Flask on the market
• Create your own world-class applications and master the art of Flask by unravelling its enigma through this journey
• This step-by-step tutorial is packed with examples on blending different technologies with Flask to get you up and running

Who This Book Is For

Have you looked at PHP and hated the clunky bloated syntax? Or looked at.Net and wished it was more open and flexible? Maybe you've tried your hand at GUI libraries in Python and found them hard to use? If your answer to any one of these questions is a yes, then this is just the book for you.

It is also intended for people who know the basics of Python and want to learn how to use it to build powerful solutions with a web front-end.

What You Will Learn

• Build three web applications from the ground up using the powerful Python micro framework, Flask.
• Dynamically display data to your viewers, based on their requests
• Store user and static data in SQL and NoSQL databases and use this data to power your web applications
• Create a good user experience by combining HTML, CSS, and JavaScript
• Harness the convenience of freely available APIs, including OpenWeatherMap, Open Exchange Rates, and bitly
• Extend your applications to build advanced functionality, such as a user account control system using Flask-Login
• Learn about web application security and defend against common attacks, such as SQL injection and XSS

In Detail

This book will take you on a journey from learning about web development using Flask to building fully functional web applications. In the first major project, we develop a dynamic Headlines application that displays the latest news headlines along with up-to-date currency and weather information. In project two, we build a Crime Map application that is backed by a MySQL database, allowing users to submit information on and the location of crimes in order to plot danger zones and other crime trends within an area. In the final project, we combine Flask with more modern technologies, such as Twitter's Bootstrap and the NoSQL database MongoDB, to create a Waiter Caller application that allows restaurant patrons to easily call a waiter to their table. This pragmatic tutorial will keep you engaged as you learn the crux of Flask by working on challenging real-world applications.

Style and approach

This book will provide you with rich, practical experience of Flask. Every technology, that is employed along with Flask is comprehensively introduced, while the book focusses on developing web applications. Pointers to educational material are always given if you want to gain in-depth knowledge of the various technologies used.

Flask By Example

---

Table of Contents

Flask By Example

Credits

About the Author

Acknowledgements

About the Reviewers

www.PacktPub.com

eBooks, discount offers, and more

Why subscribe?

Preface

What this book covers

What you need for this book

Who this book is for

Conventions

Reader feedback

Customer support

Downloading the example code

Downloading the color images of this book

Errata

Piracy

Questions

1. Hello, World!

Introducing Flask

Creating our development environment

Installing pip

Installing Flask

Writing "Hello, World!"

Writing the code

Running the code

Deploying our application to production

Setting up a Virtual Private Server

Configuring our server

Installing and using Git

Serving our Flask app with WSGI

Configuring Apache to serve our Flask application

Summary

2. Getting Started with Our Headlines Project

Setting up our project and a Git repository

Creating a new Flask application

Introduction to RSS and RSS feeds

Using RSS from Python

URL routing in Flask

Publishing our Headlines application

Summary

3. Using Templates in Our Headlines Project

Introducing Jinja

Basic use of Jinja templates

Rendering a basic template

Passing dynamic data to our template

Displaying dynamic data in our template

Advanced use of Jinja templates

Using Jinja objects

Adding looping logic to our template

Adding hyperlinks to our template

Pushing our code to the server

Summary

4. User Input for Our Headlines Project

Getting user input using HTTP GET

Getting user input using HTTP POST

Creating a branch in Git

Adding POST routes in Flask

Making our HTML form use POST

Reverting our Git repository

Adding weather and currency data

Introducing the OpenWeatherMap API

Signing up with OpenWeatherMap

Retrieving your OpenWeatherMap API key

Parsing JSON with Python

Introducing JSON

Retrieving and parsing JSON in Python

Using our weather code

Displaying the weather data

Allowing the user to customize the city

Adding another search box to our template

Using the user's city search in our Python code

Checking our new functionality

Handling duplicate city names

Currency

Getting an API key for the Open Exchange Rates API

Using the Open Exchange Rates API

Using our currency function

Displaying the currency data in our template

Adding inputs for the user to select currency

Creating an HTML select drop-down element

Adding all the currencies to the select input

Displaying the selected currency in the drop-down input

Summary

5. Improving the User Experience of Our Headlines Project

Adding cookies to our Headlines application

Using cookies with Flask

Setting cookies in Flask

Retrieving cookies in Flask

Writing the fallback logic to check for cookies

Retrieving the cookies for other data

Adding CSS to our Headlines application

External, internal, and inline CSS

Adding our first CSS

Adding padding to our CSS

Adding more styles to our CSS

Adding the div tags to the template file

Styling our inputs

Summary

6. Building an Interactive Crime Map

Setting up a new Git repository

Understanding relational databases

Installing and configuring MySQL on our VPS

Installing MySQL on our VPS

Installing Python drivers for MySQL

Creating our Crime Map database in MySQL

Creating a database setup script

Creating the database

Looking at our table columns

Indexing and committing

Using the database setup script

Adding credentials to our setup script

Running our database setup script

Creating a basic database web application

Setting up our directory structure

Looking at our application code

Looking at our SQL code

Reading data

Inserting data

Deleting data

Creating our view code

Running the code on our VPS

Mitigating against SQL injection

Injecting SQL into our database application

Mitigating against SQL injection

Summary

7. Adding Google Maps to Our Crime Map Project

Running a database application locally

Creating a mock of our database

Adding a test flag

Writing the mock code

Validating our expectations

Adding an embedded Google Maps widget to our application

Adding the map to our template

Introducing JavaScript

The body of our HTML code

Testing and debugging

Making our map interactive

Adding markers

Using a single marker

Adding an input form for new crimes

The HTML code for the form

Adding external CSS to our web application

Creating the CSS file in our directory structure

Adding CSS code

Configuring Flask to use CSS

Viewing the result

Publishing the result

Linking the form to the backend

Setting up the URL to collect POST data

Adding the database methods

Testing the code on the server

Displaying existing crimes on our map

Getting data from SQL

Passing the data to our template

Using the data in our template

Viewing the results

Summary

8. Validating User Input in Our Crime Map Project

Choosing where to validate

Identifying inputs that require validation

Trying out an XSS example

The potential of persistent XSS

Validating and sanitizing

White and blacklisting

Validating versus sanitizing

Implementing validation

Validating the category

Validating the location

Validating the date

Validating the description

Summary

9. Building a Waiter Caller App

Setting up a new Git repository

Setting up the new project locally

Setting up the project on our VPS

Using Bootstrap to kick-start our application

Introducing Bootstrap

Downloading Bootstrap

Bootstrap templates

Adding user account control to our application

Introducing Flask-Login

Installing and importing Flask-Login

Using Flask extensions

Adding a restricted route

Authenticating a user

Creating a user class

Mocking our database for users

Logging in a user

Adding imports and configuration

Adding the login functionality

Writing the login function

Creating the load_user function

Checking the login functionality

Logging out a user

Registering a user

Managing passwords with cryptographic hashes

Python hashlib

Reversing hashes

Salting passwords

Implementing secure password storage in Python

Creating the PasswordHelper class

Updating our database code

Updating our application code

Summary

10. Template Inheritance and WTForms in Waiter Caller Project

Adding the Account and Dashboard pages

Introducing Jinja templates

Creating the base template

Creating the dashboard template

Creating the account template

Creating the home template

Adding the routing code

Creating restaurant tables

Writing the restaurant table code

Adding the create table form

Adding the create table route

Adding the create table database code

Adding the view table database code

Modifying the account route to pass table data

Modifying the template to show the tables

Adding the delete table route to our backend code

Testing the restaurant table code

Shortening URLs using the bitly API

Introducing Bitly

Using the bitly API

Getting a bitly oauth token

Creating the bitlyhelper file

Using the bitly module

Adding functionality to handle attentio...

Table of contents

• Flask By Example