13 |
14 |
--------------------------------------------------------------------------------
/README.rst:
--------------------------------------------------------------------------------
1 | This is a Flask tutorial for people who don't know any web programming.
2 |
3 | I started learning Flask on June 4th, 2012. I was unhappy with the Flaskr tutorial, probably because I don't have a web programming background. I am writing this tutorial for people like me.
4 |
5 | You should go through the tutorial in the following order:
6 |
7 | - start.rst
8 | - settingup.rst
9 | - connecting.rst
10 | - requests.rst
11 | - linking.rst
12 | - nextquestion.rst
13 | - finale.rst
14 | - wrapup.rst
15 |
--------------------------------------------------------------------------------
/8_wrapup.rst:
--------------------------------------------------------------------------------
1 | Wrap-up
2 | =======
3 |
4 | That's the end of the tutorial! I hope you feel good about building things in Flask.
5 | There's a lot of room to grow from here, but this is a good foundation to start.
6 |
7 | You should understand:
8 |
9 | - When functions get called in ``application_lulu.py``.
10 | - When HTML templates are used, where they are stored, and how to pass variables into them.
11 | - How to use HTML forms, particularly labeling the fields and referring to them in the application
12 | - When a request method is GET and when a method is POST.
13 | - How to use the ``redirect`` Flask function, which allows you to return different HTML templates,
14 | based on the state of the system.
15 |
16 | Hopefully you aren't too frustrated with the tutorial or with me for writing it. :)
17 |
18 | <3
--------------------------------------------------------------------------------
/templates/userinfo_lulu.html:
--------------------------------------------------------------------------------
1 |
2 | A short quiz
3 |
4 |
5 |
A short quiz
6 |
7 |
8 |
9 | You will be asked {{num}} questions.
10 | Please answer them to the best of your ability.
11 |
12 |
13 |
24 |
25 |
26 |
27 |
--------------------------------------------------------------------------------
/templates/layout_lulu.html:
--------------------------------------------------------------------------------
1 |
2 | A short quiz
3 |
4 |
5 |
Question #{{num}}
6 |
7 |
8 |
9 | {{question}}
10 |
11 |
12 |
24 |
25 |
26 |
27 |
28 |
--------------------------------------------------------------------------------
/static/style_lulu.css:
--------------------------------------------------------------------------------
1 | body { font-family: sans-serif; background: #eee; }
2 | a, h1, h2 { color: #377BA8; }
3 | h1, h2 { font-family: 'Georgia', serif; margin: 0; }
4 | h1 { border-bottom: 2px solid #eee; }
5 | h2 { font-size: 1.2em; }
6 |
7 | .page { margin: 2em auto; width: 35em; border: 5px solid #ccc;
8 | padding: 0.8em; background: white; }
9 | .entries { list-style: none; margin: 0; padding: 0; }
10 | .entries li { margin: 0.8em 1.2em; }
11 | .entries li h2 { margin-left: -1em; }
12 | .add-entry { font-size: 0.9em; border-bottom: 1px solid #ccc; }
13 | .add-entry dl { font-weight: bold; }
14 | .metanav { text-align: right; font-size: 0.8em; padding: 0.3em;
15 | margin-bottom: 1em; background: #fafafa; }
16 | .flash { background: #CEE5F5; padding: 0.5em;
17 | border: 1px solid #AACBE2; }
18 | .error { background: #F0D6D6; padding: 0.5em; }
--------------------------------------------------------------------------------
/application_lulu2.py:
--------------------------------------------------------------------------------
1 | from flask import Flask,render_template,request,redirect
2 | app_lulu = Flask(__name__)
3 |
4 | app_lulu.vars={}
5 |
6 |
7 | @app_lulu.route('/index_lulu',methods=['GET','POST'])
8 | def index_lulu():
9 | nquestions=5
10 | if request.method == 'GET':
11 | return render_template('userinfo_lulu.html',num=nquestions)
12 | else:
13 | #request was a POST
14 | app_lulu.vars['name'] = request.form['name_lulu']
15 | app_lulu.vars['age'] = request.form['age_lulu']
16 |
17 | f = open('%s_%s.txt'%(app_lulu.vars['name'],app_lulu.vars['age']),'w')
18 | f.write('Name: %s\n'%(app_lulu.vars['name']))
19 | f.write('Age: %s\n\n'%(app_lulu.vars['age']))
20 | f.close()
21 |
22 | return render_template('layout_lulu.html',num=1,question='How many eyes do you have?',ans1='1',ans2='2',ans3='3')
23 |
24 |
25 | @app_lulu.route('/next_lulu',methods=['POST'])
26 | def next_lulu():
27 | return redirect('/usefulfunction_lulu')
28 |
29 |
30 | @app_lulu.route('/usefulfunction_lulu',methods=['GET','POST'])
31 | def usefulfunction_lulu():
32 | return render_template('layout_lulu.html',num=1,question='Which fruit do you like best?',ans1='banana',ans2='mango',ans3='pineapple')
33 |
34 |
35 | if __name__ == "__main__":
36 | app_lulu.run(port=5001, debug=True)
37 |
--------------------------------------------------------------------------------
/notes.rst:
--------------------------------------------------------------------------------
1 | Notes
2 | =====
3 |
4 | Since any application is nothing other than a way to represent data one should note that there is there is subtle difference between a web application and a desktop application, a desktop application normally is designed to be used by a single person, a web application could be used by millions of people at that same time.
5 |
6 | A Desktop application has either a GUI interface or the commandline interface. Web applications provide access ideally on port 80, in that way you don't need a 'client' to access the service that is running on port 80. With flask however you have the freedom to choose the port number, I never had done web programming using a framework before Flask, so it was difficult to understand the basic ideas, in PHP we save the .php files in the 'www' folder, but modern frameworks do not need to place all the projects in one root folder (the www one), the main difference between modern frameworks is there is a modular approach in designing the application, normally in PHP you write code in .php files and link them to each other from various files.
7 |
8 | But there is a problem in PHP, giving sexy links (the ones like Quora.com), it is quite difficult to give cute links that are easy to remember, with Flask you get a wonderful way to program web applications.
9 |
10 | You create 'links' and then associate with the links a function, you can associate python functions with each 'link' and that function is executed when the link is requested [with GET or POST, for now the difference shouldn't matter at all], there are static assets like HTML pages, CSS or JS scripts. The HTML pages have python markup inside them.
11 |
--------------------------------------------------------------------------------
/application_lulu.py:
--------------------------------------------------------------------------------
1 | from flask import Flask,render_template,request,redirect
2 | app_lulu = Flask(__name__)
3 |
4 | app_lulu.vars={}
5 |
6 | app_lulu.questions={}
7 | app_lulu.questions['How many eyes do you have?']=('1','2','3')
8 | app_lulu.questions['Which fruit do you like best?']=('banana','mango','pineapple')
9 | app_lulu.questions['Do you like cupcakes?']=('yes','no','maybe')
10 |
11 | app_lulu.nquestions=len(app_lulu.questions)
12 | #should be 3
13 |
14 | @app_lulu.route('/index_lulu',methods=['GET','POST'])
15 | def index_lulu():
16 | nquestions=app_lulu.nquestions
17 | if request.method == 'GET':
18 | return render_template('userinfo_lulu.html',num=nquestions)
19 | else:
20 | #request was a POST
21 | app_lulu.vars['name'] = request.form['name_lulu']
22 | app_lulu.vars['age'] = request.form['age_lulu']
23 |
24 | f = open('%s_%s.txt'%(app_lulu.vars['name'],app_lulu.vars['age']),'w')
25 | f.write('Name: %s\n'%(app_lulu.vars['name']))
26 | f.write('Age: %s\n\n'%(app_lulu.vars['age']))
27 | f.close()
28 |
29 | return redirect('/main_lulu')
30 |
31 |
32 | @app_lulu.route('/main_lulu')
33 | def main_lulu2():
34 | if len(app_lulu.questions)==0 : return render_template('end_lulu.html')
35 | return redirect('/next_lulu')
36 |
37 | #####################################
38 | ## IMPORTANT: I have separated /next_lulu INTO GET AND POST
39 | ## You can also do this in one function, with If and Else.
40 |
41 |
42 | @app_lulu.route('/next_lulu',methods=['GET'])
43 | def next_lulu(): #remember the function name does not need to match the URL
44 | # for clarity (temp variables):
45 | n=app_lulu.nquestions-len(app_lulu.questions)+1
46 | q = list(app_lulu.questions.keys())[0] #python indexes at 0
47 | a1=app_lulu.questions[q][0]
48 | a2=app_lulu.questions[q][1]
49 | a3=app_lulu.questions[q][2]
50 |
51 | # save current question
52 | app_lulu.currentq=q
53 |
54 | return render_template('layout_lulu.html',num=n,question=q,ans1=a1,ans2=a2,ans3=a3)
55 |
56 |
57 | @app_lulu.route('/next_lulu',methods=['POST'])
58 | def next_lulu2(): #can't have two functions with the same name
59 | # Here, we will collect data from the user.
60 | # Then, we return to the main function, so it can tell us whether to
61 | # display another question page, or to show the end page.
62 |
63 | f=open('%s_%s.txt'%(app_lulu.vars['name'],app_lulu.vars['age']),'a') #a is for append
64 | f.write('%s\n'%(app_lulu.currentq))
65 | f.write('%s\n\n'%(request.form['answer_from_layout_lulu'])) #do you know where answer_lulu comes from?
66 | f.close()
67 |
68 | app_lulu.questions.pop(app_lulu.currentq)
69 |
70 | return redirect('/main_lulu')
71 |
72 |
73 | if __name__ == "__main__":
74 | app_lulu.run(port=5001, debug=True)
75 |
--------------------------------------------------------------------------------
/2_settingup.rst:
--------------------------------------------------------------------------------
1 | Setting up the quiz application
2 | ===============================
3 |
4 | To set up the application, we will make the directory structure, copy over a CSS style sheet, and build an HTML form.
5 |
6 | Setting up the directory structure
7 | ----------------------------------
8 |
9 | Set up your directories like this (put it somewhere, like your home directory)::
10 |
11 | ~/MyFlaskTutorial_lulu
12 | /static
13 | /templates
14 |
15 | Copy the file ``style_lulu.css`` (find it in the Github repository, in the static directory) and put it in the ``static`` directory. We will not
16 | discuss CSS style sheets in this tutorial. It will just make your app look pretty. Like magic. [Note: don't copy any of the other files from the GitHub repo to your computer yet --- trust me, the tutorial will be better this way.]
17 |
18 | The ``templates`` directory will hold HTML files that we will use to construct pages that
19 | will depend on user input.
20 |
21 | In the ``MyFlaskTutorial_lulu`` directory, we will place the main Python program that
22 | will process requests (on the server side) and return html files to send to the client.
23 |
24 |
25 | An HTML form
26 | ------------
27 |
28 | None of this web app stuff means anything without HTML code. Let's make a
29 | simple page, then add a form. We will use that form to demonstrate HTTP
30 | methods, including `GET` and `POST`. Don't worry about what they are now.
31 | Let's get some HTML code working first.
32 |
33 | Open a file called ``userinfo_lulu.html``, and save it to the ``templates`` directory::
34 |
35 |
36 | A short quiz
37 |
38 |
39 |
A short quiz
40 |
41 |
42 |
43 | You will be asked a series of questions.
44 | Please answer them to the best of your ability.
45 |