Book Image

Flask By Example

By : Gareth Dwyer
Book Image

Flask By Example

By: Gareth Dwyer

Overview of this book

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.

Related Content you might be interested in

Current Title:

Small book image
Flask By Example
Gareth Dwyer
Mar, 2016 | 276 pages
No titles found
Table of Contents (20 chapters)
Flask By Example
Flask By Example
Credits
Credits
About the Author
About the Author
Acknowledgements
Acknowledgements
About the Reviewers
About the Reviewers
www.PacktPub.com
www.PacktPub.com
Preface
Preface
Free Chapter
1
Hello, World!
Hello, World!
Introducing Flask
Creating our development environment
Writing "Hello, World!"
Deploying our application to production
Summary
2
Getting Started with Our Headlines Project
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
Summary
3
Using Templates in Our Headlines Project
Using Templates in Our Headlines Project
Introducing Jinja
Basic use of Jinja templates
Advanced use of Jinja templates
Summary
4
User Input for Our Headlines Project
User Input for Our Headlines Project
Getting user input using HTTP GET
Getting user input using HTTP POST
Adding weather and currency data
Summary
5
Improving the User Experience of Our Headlines Project
Improving the User Experience of Our Headlines Project
Adding cookies to our Headlines application
Adding CSS to our Headlines application
Summary
6
Building an Interactive Crime Map
Building an Interactive Crime Map
Setting up a new Git repository
Understanding relational databases
Installing and configuring MySQL on our VPS
Creating our Crime Map database in MySQL
Creating a basic database web application
Summary
7
Adding Google Maps to Our Crime Map Project
Adding Google Maps to Our Crime Map Project
Running a database application locally
Adding an embedded Google Maps widget to our application
Adding an input form for new crimes
Displaying existing crimes on our map
Summary
8
Validating User Input in Our Crime Map Project
Validating User Input in Our Crime Map Project
Choosing where to validate
Trying out an XSS example
Validating and sanitizing
Summary
9
Building a Waiter Caller App
Building a Waiter Caller App
Setting up a new Git repository
Using Bootstrap to kick-start our application
Adding user account control to our application
Summary
10
Template Inheritance and WTForms in Waiter Caller Project
Template Inheritance and WTForms in Waiter Caller Project
Adding the Account and Dashboard pages
Shortening URLs using the bitly API
Adding functionality to handle attention requests
Adding user feedback with WTForms
Summary
11
Using MongoDB with Our Waiter Caller Project
Using MongoDB with Our Waiter Caller Project
Introducing MongoDB
Installing MongoDB
Using the MongoDB shell
Introducing PyMongo
Testing our application in production
Adding some finishing touches
Summary
A Sneak Peek into the Future
A Sneak Peek into the Future
Expanding the projects
Expanding your Flask knowledge
Expanding your web development knowledge
Summary
Index
Index

Adding an embedded Google Maps widget to our application

Now, we want to add a map view to our app instead of the basic input box. Google Maps allows you to create a map without registration, but you will only be able to make a limited number of API calls. If you create this project, publish a link on the Web, and it goes viral, you stand a chance of hitting the limit (which is currently 2,500 map loads per day). If you think this will be a limiting factor, you can register for the maps API and have the option of paying Google for more capacity. However, the free version will be more than adequate for development and even production if your app isn't too popular.

Adding the map to our template

We want to display a map on the main page of our app, so this means editing the code in the home.html file in our templates directory. Remove all the existing code and replace it with the following:

<!DOCTYPE html>
<html lang="en">
  <head>
    <script type="text/javascript"
    ...
Previous Section
End of Section 3
Next Section