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

Chapter 7. Adding Google Maps to Our Crime Map Project

In the previous chapter, we set up a database and discussed how to add and remove data from it through Flask. With a web application that can do input and output with long-term storage, we now have the building blocks needed for nearly all web applications and are limited only by the power of our imagination.

In this chapter, we will add more features than the text-only interface from the previous chapter; we'll add embedded Google Maps that will allow a user to view and select geographic coordinates in an intuitive way.

Google Maps is written in JavaScript, and we'll need to write some JavaScript code to adapt Google Maps to our needs. As always, we'll do a whirlwind tutorial for readers who haven't ever used JavaScript before, but if you're interested in solidifying your all-inclusive web application knowledge, now is a good time to quickly go through a couple of JavaScript-specific tutorials. If you've never seen any JavaScript code...

Previous Section
End of Section 1
Next Section