From 0bfb785edf204ea5f7b72dda13c58079bb26673a Mon Sep 17 00:00:00 2001 From: Nicole Tibay Date: Thu, 26 Apr 2018 15:31:27 +0800 Subject: [PATCH] Use Tutorial Point for Flask basics --- flask/assets/hello.html | 13 ++ flask/assets/layout.html | 25 +++ flask/assets/search.html | 15 ++ ... quote generator (URL routes, template).MD | 42 ----- flask/discussions/3 - flask basics.MD | 13 ++ .../4 - Random quote generator (Database).MD | 26 ---- ... quote generator (URL routes, template).MD | 145 ++++++++++++++++++ .../5 - Random quote generator (Database).MD | 91 +++++++++++ 8 files changed, 302 insertions(+), 68 deletions(-) create mode 100644 flask/assets/hello.html create mode 100644 flask/assets/layout.html create mode 100644 flask/assets/search.html delete mode 100644 flask/discussions/3 - Random quote generator (URL routes, template).MD create mode 100644 flask/discussions/3 - flask basics.MD delete mode 100644 flask/discussions/4 - Random quote generator (Database).MD create mode 100644 flask/discussions/4 - Random quote generator (URL routes, template).MD create mode 100644 flask/discussions/5 - Random quote generator (Database).MD diff --git a/flask/assets/hello.html b/flask/assets/hello.html new file mode 100644 index 0000000..0ac14e0 --- /dev/null +++ b/flask/assets/hello.html @@ -0,0 +1,13 @@ +{% extends "layout.html" %} +{% block body %} + +

Hello {{ name }}!

Here is an interesting quote for you:

+ "The limits of my language are the limits of my mind. All I know is what I have words for." +

+ +{% endblock %} \ No newline at end of file diff --git a/flask/assets/layout.html b/flask/assets/layout.html new file mode 100644 index 0000000..2e23138 --- /dev/null +++ b/flask/assets/layout.html @@ -0,0 +1,25 @@ + + + Flask Website + + + + + + {% block body %}{% endblock %} + + + \ No newline at end of file diff --git a/flask/assets/search.html b/flask/assets/search.html new file mode 100644 index 0000000..8270d18 --- /dev/null +++ b/flask/assets/search.html @@ -0,0 +1,15 @@ +{% extends "layout.html" %} + +{% block body %} + +

Search Results

You searched for: {{ search.upper() }}

{{ result }}

+ +{% endblock %} \ No newline at end of file diff --git a/flask/discussions/3 - Random quote generator (URL routes, template).MD b/flask/discussions/3 - Random quote generator (URL routes, template).MD deleted file mode 100644 index a8fa903..0000000 --- a/flask/discussions/3 - Random quote generator (URL routes, template).MD +++ /dev/null @@ -1,42 +0,0 @@ -# Creating a Random Quote Generator Web App - -Let's create a simple random quote generator web app using Flask! - -![Random quote generator](https://pythonspot-9329.kxcdn.com/wp-content/uploads/2015/03/python-flask-webap.png) - -## What to expect - -- [ ] Understanding URL Routes -- [ ] Passing variables to URL Routes -- [ ] Separate code from user interface (Templates) - -## First step - -Create a new isolated development environment for our new project and activate it: - -```shell -$ mkvirtualenv QuoteSearchEngine -$ workon QuoteSearchEngine -``` - -Once activated, install Flask through pip: - -```shell -$ pip install Flask -``` - -Go inside your `QuoteSearchEngine` and create our project folder named `app` - -```shell -$ cd QuotesSearchEngine -$ mkdir app -$ cd app -``` - -### Getting crazy? Need help? -If you have questions, please feel free to ask and participate on our [Gitter group](https://gitter.im/WWCodeManila/Python). - - -### References -* [Tutorial](https://pythonspot.com/en/flask-web-app-with-python/) -* [Slides](https://docs.google.com/presentation/d/1yWr0I2aU0tFMMeQ4s4cUcv0V1Mxq1CmCPdkP-V1atlg/edit?usp=sharing) \ No newline at end of file diff --git a/flask/discussions/3 - flask basics.MD b/flask/discussions/3 - flask basics.MD new file mode 100644 index 0000000..1f36340 --- /dev/null +++ b/flask/discussions/3 - flask basics.MD @@ -0,0 +1,13 @@ +# Let's Learn Flask! + +Our `Hello World` Flask application might have get you excited and trust us, it's +just the tip of the iceberg. +We will be using TutorialsPoint Flask [tutorial](https://www.tutorialspoint.com/flask/index.htm) +to learn some basic Flask concepts. At the end, the skills you gained will allow +you to create your `random quote generator` web application! + +## Notes + +Though TutorialsPoint has only introduced `virtualenv`, +you can still use `virtualenvwrapper` to manage your virtual environments. + diff --git a/flask/discussions/4 - Random quote generator (Database).MD b/flask/discussions/4 - Random quote generator (Database).MD deleted file mode 100644 index d05e895..0000000 --- a/flask/discussions/4 - Random quote generator (Database).MD +++ /dev/null @@ -1,26 +0,0 @@ -# Random Quote Generator meets Database - -Let's update our random quote generator to retrieve quotes from the database! - -## What to expect - -- [ ] Understand what a databases are -- [ ] Installing SQLite -- [ ] Using SQLite in a Python web app - -### References - -* [SQLite Installation](https://www.tutorialspoint.com/sqlite/sqlite_installation.htm) -* [Python + Sqlite](https://pythonspot.com/en/python-database-programming-sqlite-tutorial/) -* [Slides](https://docs.google.com/presentation/d/1yzyAuDip0rmlrZ_MD3aU1ryXStHzcInKldD0gKYDkmY/edit?usp=sharing) - -### Challenge - -Transfer/Store quotes to SQLite database and update your `app.py getMember function` to fetch your -random quote from the database! - -> Bonus: Create a search route `/search//` that will return all -> quotes from the database containg the search string! - -### Getting crazy? Need help? -If you have questions, please feel free to ask and participate on our [Gitter group](https://gitter.im/WWCodeManila/Python). diff --git a/flask/discussions/4 - Random quote generator (URL routes, template).MD b/flask/discussions/4 - Random quote generator (URL routes, template).MD new file mode 100644 index 0000000..cc0031c --- /dev/null +++ b/flask/discussions/4 - Random quote generator (URL routes, template).MD @@ -0,0 +1,145 @@ +# Creating a Random Quote Generator Web App + +Let's create a simple random quote generator web app using Flask! + +![Random quote generator](https://pythonspot-9329.kxcdn.com/wp-content/uploads/2015/03/python-flask-webap.png) + + +## First step: Create your development environment + +Create a new isolated development environment for our new project and activate it. + +```shell +$ mkvirtualenv QuoteSearchEngine +$ workon QuoteSearchEngine +``` + +Once activated, install Flask through pip: + +```shell +$ pip install Flask +``` + +Go inside your `QuoteSearchEngine` and create our project folder named `app` + +```shell +$ cd QuotesSearchEngine +$ mkdir app +$ cd app +``` + +## Second step: Create your URL routes + +Decide the url routes for your web application. We can use the following: + +```shell +/ +/hello/ +``` + +Under your project folder, create a file called `hello.py` + +```python +from flask import Flask + +app = Flask(__name__) + +@app.route("/") +def index(): + return "My Flask homepage!" + + +@app.route("/hello//") +def hello(name): + return "Hello" + name +``` + +Run your application and try these URLs in your browser: + +```shell +http://127.0.0.1:5000/ +http://127.0.0.1:5000/hello +http://127.0.0.1:5000/hello/your_name +http://127.0.0.1:5000/hello/your_name/ +``` + +## Third step: Create your templates + +Create your templates folder and copy the [templates](https://github.com/wwcodemanila/WWCodeManila-Python/tree/master/flask/assets) +for `hello.html` and `layout.html`. As challenge, you can separate further the style to its own stylesheet file. + +Update your `hello` function to use the template. + +```python +from flask import Flask + +app = Flask(__name__) + +@app.route("/") +def index(): + return "My Flask homepage!" + +@app.route("/hello//") +def hello(name): + # UDPATE NEEDED + return render_template('test.html') +``` + +Restart the app! + +![Random quote generator](https://pythonspot-9329.kxcdn.com/wp-content/uploads/2015/03/python-webapp-flask.png.webp) + + +## Fourth step: Randomize your quotes! + +Our random quote generator is not so-so random because of the hardcoded quote on our `hello.html` file. + +```html +

+ + "The limits of my language are the limits of my mind. All I know is what I have words for." +

+``` + +Aside from the name variable, we will also need to pass a quote variable and change your `hello.html` to +show the quote variable's value. + +Update your `app.py` to get a random quote from a list of quotes! + +```python +from flask import Flask + +app = Flask(__name__) + +@app.route("/") +def index(): + return "My Flask homepage!" + +@app.route("/hello//") +def hello(name): + quotes = [ + "'If people do not believe that mathematics is simple, it is only because they do not realize how complicated life is.' -- John Louis von Neumann ", + "'Computer science is no more about computers than astronomy is about telescopes' -- Edsger Dijkstra ", + "'To understand recursion you must first understand recursion..' -- Unknown", + "'You look at things that are and ask, why? I dream of things that never were and ask, why not?' -- Unknown", + "'Mathematics is the key and door to the sciences.' -- Galileo Galilei", + "'Not everyone will understand your journey. Thats fine. Its not their journey to make sense of. Its yours.' -- Unknown" + ] + # UPDATE NEEDED: Get random index from quotes + # randomNumber = + # quote = + return render_template('test.html') +``` + +Restart the app and check if your random quote is not faking it! + +![Random quote generator](https://pythonspot-9329.kxcdn.com/wp-content/uploads/2015/03/python-flask-webap.png.webp) + + +### Getting crazy? Need help? +If you have questions, please feel free to ask and participate on our [Gitter group](https://gitter.im/WWCodeManila/Python). + + +### References +* [Tutorial](https://pythonspot.com/en/flask-web-app-with-python/) +* [Slides](https://docs.google.com/presentation/d/1yWr0I2aU0tFMMeQ4s4cUcv0V1Mxq1CmCPdkP-V1atlg/edit?usp=sharing) \ No newline at end of file diff --git a/flask/discussions/5 - Random quote generator (Database).MD b/flask/discussions/5 - Random quote generator (Database).MD new file mode 100644 index 0000000..c3eb2e0 --- /dev/null +++ b/flask/discussions/5 - Random quote generator (Database).MD @@ -0,0 +1,91 @@ +# Random Quote Generator meets Database + +Let's update our random quote generator to retrieve quotes from a SQLite database! + +## First step: Create your database + +Create and run your `db.py` file. + +```python +import sqlite3 as lite + +con = lite.connect('quotes.db') + +with con: + + cur = con.cursor() + cur.execute("CREATE TABLE IF NOT EXISTS Quotes(Id INT, Value TEXT)") + + quotes = ( "'If people do not believe that mathematics is simple, it is only because they do not realize how complicated life is.' -- John Louis von Neumann ", + "'Computer science is no more about computers than astronomy is about telescopes' -- Edsger Dijkstra ", + "'To understand recursion you must first understand recursion..' -- Unknown", + "'You look at things that are and ask, why? I dream of things that never were and ask, why not?' -- Unknown", + "'Mathematics is the key and door to the sciences.' -- Galileo Galilei", + "'Not everyone will understand your journey. Thats fine. Its not their journey to make sense of. Its yours.' -- Unknown" ) + + for i, quote in enumerate(quotes): + cur.execute("INSERT INTO Quotes VALUES(" + str(i) + ", " + repr(quote) + ")") +``` + +Check if your `quotes.db` database was created. + +## Second step: Get quote from database + +We need to update your `hello` function to get the quote from the created database. + +```python +@app.route("/members//") +def hello(name): + # UPDATE NEEDED: Connect to your database + con = None + + with con: + # UPDATE NEDED: Get all quotes + cur = None + cur.execute("") + + quotes = None + + randomNumber = randint(0,len(quotes)-1) + quote = quotes[randomNumber][1] + + return render_template('hello.html', **locals()) +``` + +Run your application! + + +### Challenge + +Create a search route `/search//` that will return all +quotes from the database containing the search string! + +[Search template](https://github.com/wwcodemanila/WWCodeManila-Python/tree/master/flask/assets/search.html) + + +```python +@app.route("/search//") +def search(search): + results = [] + + con = None + + with con: + cur = None + cur.execute("") + + quotes = None + + # Filter quotes that contains a substring of your search term + + return render_template('search.html',**locals()) +``` + +### Getting crazy? Need help? +If you have questions, please feel free to ask and participate on our [Gitter group](https://gitter.im/WWCodeManila/Python). + +### References + +* [SQLite Installation](https://www.tutorialspoint.com/sqlite/sqlite_installation.htm) +* [Python + Sqlite](https://pythonspot.com/en/python-database-programming-sqlite-tutorial/) +* [Slides](https://docs.google.com/presentation/d/1yzyAuDip0rmlrZ_MD3aU1ryXStHzcInKldD0gKYDkmY/edit?usp=sharing)