gae script app

Gae python post form tutorial





http://www.rayfallan.com/webapp2jinja.html


How-To Guide

webapp2 / jinja2 (in Google App Engine)


level: beginner / intermediate Prerequisites: some Python, general basic knowledge of Google App Engine, must be able to install dependencies (webapp2, jinja2, see instructions below and online)
Motivation for this tutorial document:

Using a web framework was a foreign concept for me. I searched through Google's tutorial documentation on Google App Engine and found that it was generally great, but when it came to webapp2 and jinja2 the authors mostly assumed I knew what I was doing.
I did not.
I went to the internet and spent some time looking for a starter tutorial that might let someone who had never programmed in the context of a framework before get started. Most of the tutorials I found assumed prior knowledge of the most popular Python web framework, Django. There wasn't much on getting started with webapp2. And even less on how to start on Jinja2.

So:

To start from the very beginning: what is a web framework?
"A web framework is a collection of packages or modules which allows developers to write web applications or services without having to handle such low level details as protocols, sockets or process/thread management."
--From the Python documentation at wiki.python.org/moin/WebFrameworks

MVC

Most of these web frameworks take as their base the MVC architectural pattern. This pattern divides applications into 3 interconnected parts: model, view, controller. The model is the 'brain', essentially the store of all the data and state information. The view is the presentation of this data to the user. The controller is what accepts the input from either the model or the view and converts its between the two, sort of a translator.

Web applications generally have one purpose: to save data and display data. The data is taken from the user via a view and stored in a database or other structure (the model). The data is manipulated and piped all over, through various manipulations according to the user's requests (the controller). Finally the data is presented back to the user in a view or series of views.

Intro to webApp2

webApp2 is bundled with the google app engine sdk. As I said in the beginning, the google app engine python tutorial has a high level explanation of the framework, but this seems to assume some prior knowledge. This tutorial is meant to take the beginner (like me) from nothing to a working understanding of webApp2 and jinja2.

First, a quick look at the helloWorld files from google's own GAE Python tutorials:
app.yaml contains the following code:

application: [your-app-id]
version: 1
runtime: python27
api_version: 1
threadsafe: true

handlers:
-url: /.*
script: helloWorld.application
helloWorld.py contains the following code:

import webapp2

class MainPage(webapp2.RequestHandler):
	def get(self):
		self.response.headers['Content-Type] = 'text/plain'
		self.response.write("Hello, World!")

application = webapp2.WSGIApplication([('/', MainPage),], debug=True)
Take a look at penultimate line in the app.yaml file: -url: /.*. This is a regular expression sending all URLs to the application object in helloWorld.
Also, look at the last line in helloWorld.py: ('/', MainPage). This is a mapping of particular URLs following the initial ./* leadin. So the web app's top level URL will map to '/' which calls the "MainPage" class and executes its 'get' method. Keep that in mind as things get more complicated.

WGSI


What is this WSGIApplication()? From wikipedia (Web Server Gateway Interface article) WSGI is a low-level interface and standard between web servers and web frameworks. Before WGSI, new Python users had a difficult time because the choice of web framework limited the choice of useable servers.
WGSI gives common ground to both servers and web frameworks and makes code generally more portable.

-----------------

So we have a portable interface, we have a web-framework. We know that the reason we want to use the web-framework is to hide all those low-level details that take us away from coding the functionality of our application. So what does our application (pretty much every web application) need to do? We want to get data from a user, do stuff to it and then send it back. Let's start with getting data from the user--that means we need to give them a form, some sort of a web page, and for that we need...

URL Routing

In helloWorld.py above the line:

application = webapp2.WSGIApplication([('/', MainPage),], debug=True)

this is called the Router; it can be expanded to:

application = webapp2.WSGIApplication()
application.router.add((r'/', 'handlers.MainPage'))

Using this same syntax you can add more URL routes to the list. You could alternately just add them all into the array in the first example. They all take the form (regex, handler). In the expanded format you'll notice the 'r' before the '/'; this is the python regex signifier. Each add needs this.
One final note: the syntax 'handlers.MainPage' is called a "Lazy Handler" which don't need to be initialized in the app, thus speeding up the startup.

Another example of more complicated URL routing comes from webapp-improved.appspt.com/guide/routing.html:

class HomeHandler(webapp2.RequestHandler):
	def get(self):
		self.response.write("this is the HomeHandler")

class ProductListHandler(webapp2.RequestHandler):
	def get(self):
		self.response.write("This is the ProductListHandler")

class ProductHandler(webapp2.RequestHandler):
	def get(self):
		self.response.write("This is the ProductHandler")

application = webapp2.WSGIApplication([
	(r'/', HomeHandler),
	(r'/products', ProductListHandler),
	(r'/products/(\d+)', ProductHandler),
])
This defines three request handler objects and then sets the URL routes in the final application variable definition. Each of the regular expressions, r'/', r'/products', and r'/products/(\d+)' (this last one is a definition of a group so the handler will receive one or more digits) takes the user's URL string as input then routes it through one of these handlers or controllers (remember MVC?).

You can see that this URL routing is at the very heart of the control of the data coming in from the user. The page I got this last example code from (above) has an extensive list of possible variations and contexts for more specific URL routing. It's definitely worth a look.

Request Handlers (controllers)


Request handlers are the pipes and gears in your machine. These are what you use to take the requests from the users and manipulate it according to your application's logic.

Request handlers can handle 'get' and 'post' requests. These come into the handlers by defining get(self, ...) or post(self, ...) the '...' are for the various inputs. If you need them, Request Handlers also support 'head', 'options', 'put', 'delete' and 'trace' requests. You probably won't need them right away, this is a beginner tutorial after all.

I personally find it easiest to store the inputs to my handlers as variables, so that I can use them as I would any other variable. say you have in your URL of a GET request:
(the following is actually my own demo code...tada!)
/test/name_demo.asp?fname=Ray&lname=Allan

class FullName(webapp2.RequestHandler):
	def get(self):
		try:
			fName = str(self.request.get('fname'))
			lName = str(self.request.get('lname'))
		#manipulation code follows...
Now that you have those get values stored in strings, you can manipulate them and send them back out to the user via a view. The manipulation is up to you.

Now onto the user facing side of this tutorial. We'll be dipping back in and out of the webapp2 framework, but we need to decide how to present the information that our Request Handlers have produced.

You might just define some html for your page like the Google app engine tutorial does in its guestbook.py tutorial. This has a variable MAIN_PAGE_HTML which is a string of all the page's html. But this gets ugly and unwieldy fast. It seems like it would be better to just offload all those html pages into their own html files and stick all those files neatly into a folder. That's where jinja comes in.

Jinja2

First, I'll say that jinja2's got fine documentation. They don't really have any walkthoughs, just a laundry list of the API, but it is useful to check out this documentation here. There's also a very useful link to using jinja2 in GAE in the app engine documentation under the templates tab on the GAE python tutorial. Just a word of warning, just like the description of webapp2 in the GAE pages, the tutorial takes a very high-level look at things, and doesn't explain much. Also, you'll notice their approach is different from the one we'll be taking. I tried both and like mine better, (obviously).

You need to install jinja2 just like you would any other python egg/tarball. Just use pip or easy_install and follow the instructions on the jinja2 pages. This isn't a tutorial on jinja2, it's about how jinja2 can make your webapp2 work better and have neater code. And GAE loves jinja2.

First for google app engine, you should create a folder in your main app directory (where you have your app.yaml file and your [application-name].py file. Name this folder 'templates' and use it to keep all your jinja templates in. More on this folder in a bit...

These 'templates' are little more than html pages. I made a contacts app using jinja2 and my basic html page was simple html with a few jinja specific statements sprinkled in. I would start by just creating the html you'd like to see then jinj-ifying it.

Jinja2 in your python file
in your [application-name].py code add the following:
from jinja2 import Environment, PackageLoader

template_dir = os.path.join(os.path.dirname(__file__), 'templates')
jinja_env = jinja2.Environment(loader = jinja2.FileSystemLoader(template_dir),
autoescape=True)
The second line, template_dir, tells your app where to find that templates folder we just created (you know the one where you're conveniently going to store all your jinj-ified html files). The third line creates a 'template environment'. This is the magic of jinja2.
To load a template from this environment you just have to call the get_template() method which then returns the loaded Template:

template = env.get_template('mytemplate.html')

to load a template with variables added, you just call:

print template.render('mytemplate.html', var1, var2, var3, ...)

The variables var1, var2, etc are magically loaded into the jinja2 spots saved for them in the jinj-ified html, 'mytemplate.html'. We will look at one of these shortly. Just remember when you render, you put the html page first, then the variables all in one by one after it.
Now you might want to add the following class with its functions in your main python file. I found these in Udacity.com's great web development course. These functions come from the teacher of that course, Steve Huffman.
class Handler(webapp2.RequestHandler):
	def write(self, *a, **kw):
		self.response.out.write(*a, **kw)

	def render_str(self, template, **params):
		t = jinja_env.get_template(template)
		return t.render(params)

	def render(self, template, **kw):
		self.write(self.render_str(template, **kw))
These will make it easier for you to render your pages and get at the various templates you might create. Jinja2 html templates Here is a simplified template for a simple contacts list:

<!DOCTYPE html>
{% autoescape true %}
<html><head><title>/contact list/</title></head>
<body><h1>/contact list</h1>
<form method="post" enctype="multipart/form-data">
<div>name:</div>
<input type="text" name="name" value="{{name}}">
<div>phone number:</div>
<input type="text" name="phone" value="{{phone}}">
</form>
<hr>
{% for contact in contacts %}
	<div class="contacts">
		<div class="contact-name">{{contact.name}}</div>
	{% if contact.phone %}
		<div class="contact-phone">{{contact-phone}}</div>
	{% else %}
		<div class="contact-phone">Phone Unknown</div>
{% endif %}
	</div>
{% endfor %}
</body></html>
{% end autoescape %}

There are some important points to notice. As I've said many times, this looks just like an html document with a little bit of jinja2 sprinkled in.
In each of the form fields, you'll notice the {{}} with a variable name inside. When this template is rendered, remember all those variables you tossed into the args right after the template name? This is where they go. This particular example will autofill the last value entered, or leave it blank if no value yet exists for this variable. This is a great way of giving the user feedback when they are filling out forms.
Also, after the <hr> you can see what looks like python code injected into the html. This takes an array that might be fed to the contacts variable in the render() function. For each of the elements in the array this will execute just as you might expect. You can feed as many contact objects in and the jinja template will render them in the format here, then enclose all of them in the "contacts" div. As you'd expect, the if statement will populate the contact-phone div only if the contact object has data in its phone field, otherwise (else) it will just fill this div with "Phone Unknown".
Finally, one of the best parts of this jinja2 template is the simplicity of its autoescape functionality. Remember all the way back when we were setting up the jinja_environment and we set "autoescape=True"… here's where that comes in. This will do all of your html escaping for you. No need to guard against html/javaScript injection.

the last thing you'll need to do in order to be sure GAE is happy with your jinja2 templates, and code is to open up your app.yaml file and add:

libraries:
-name: webapp2
version: latest
-name: jinja2
version: latest
(You might have already done this, just be sure to add both of these to your app.yaml.)
All Together Now

Now we have a basic webapp2 file and know how to write (control) Request Handlers for each of our URLs. We know that we want to render our views with the jinja2 templates we will create. Learning how to store the data in the Google Datastore is beyond the scope of this tutorial, but is well covered in the GAE python tutorial. That Datastore will end up being your model from which you'll be drawing all your stored data. Now we just need to pull everything together.
Here is a simple main.py (with an obvious hole).

import os
import webapp2
import jinja2
from google.appengine.ext import db

template_dir = os.path.join(os.path.dirname(__file__), 'templates')
jinja_env = jinja2.Environment(loader = jinja2.FileSystemLoader(template_dir),
                               autoescape = True)

class Handler(webapp2.RequestHandler):
    def write(self, *a, **kw):
        self.response.out.write(*a, **kw)

    def render_str(self, template, **params):
        t = jinja_env.get_template(template)
        return t.render(params)

    def render(self, template, **kw):
        self.write(self.render_str(template, **kw))

#the Contact class is for the datastore
class Contact(db.Model):
    name = db.StringProperty()
    phone = db.PhoneNumberProperty()

class MainPage(Handler):
    #THIS IS HOMEWORK
    #
    #

app = webapp2.WSGIApplication([('/', MainPage)], debug=True)
Homework For your homework, you'll get going with Google App Engine. Follow the python tutorial through helloWorld. Once you have a basic project set up, including app.yaml, and a main.py, as well as your added 'templates' folder, you should take the 'contacts' jinja2 template above, name it something like "mainPage.html" and put it in the templates folder. You should then try to add to this MainPage handler. Try to get the two inputs from the form as discussed in the Request Handlers section above. Use these given helper functions to render the page.

A couple of hints:

time.sleep(1) # sleep for 1 second
self.redirect("/")
This code will refresh your page. You want to add the time.sleep() in because sometimes GAE is finicky with the instant self.redirect("/") back to the page you're on.

Also, you might try using the post() Request Handler to handle your incoming data. This tutorial had an example of "get" but you'll notice that in the contacts html jinja template, the form data is being sent "post".

####################@@@@##############$%##$&5#%%$$%


http://www.vogella.com/tutorials/GoogleAppEngine/article.html


#app.yaml

application: googleappengine01
version: 1
runtime: python
api_version: 1

handlers:
- url: /css
  static_dir: css
- url: /images
  static_dir: images
- url: /.*
  script: todo.py


#todo.py

from google.appengine.api import users
from google.appengine.ext import webapp
from google.appengine.ext.webapp.util import run_wsgi_app
from google.appengine.ext import db
from google.appengine.ext.webapp import template
from google.appengine.api import mail

# Todo defines the data model for the Todos
# as it extends db.model the content of the class will automatically stored
class TodoModel(db.Model):
  author      = db.UserProperty(required=True)
  shortDescription = db.StringProperty(required=True)
  longDescription  = db.StringProperty(multiline=True)
  url         = db.StringProperty()
  created          = db.DateTimeProperty(auto_now_add=True)
  updated      = db.DateTimeProperty(auto_now=True)
  dueDate          = db.StringProperty(required=True)
  finished         = db.BooleanProperty()


# The main page where the user can login and logout
# MainPage is a subclass of webapp.RequestHandler and overwrites the get method
class MainPage(webapp.RequestHandler):
    def get(self):
        user = users.get_current_user()
        url = users.create_login_url(self.request.uri)
        url_linktext = 'Login'

        if user:
            url = users.create_logout_url(self.request.uri)
            url_linktext = 'Logout'
# GQL is similar to SQL
        todos = TodoModel.gql("WHERE author = :author and finished=false",
               author=users.get_current_user())

        values = {
            'todos': todos,
      'numbertodos' : todos.count(),
            'user': user,
            'url': url,
            'url_linktext': url_linktext,
        }
        self.response.out.write(template.render('index.html', values))



# This class creates a new Todo item
class New(webapp.RequestHandler):
    def post(self):
        user = users.get_current_user()
        if user:
      testurl = self.request.get('url')
      if not testurl.startswith("http://") and testurl:
    testurl = "http://"+ testurl
            todo = TodoModel(author  = users.get_current_user(),
                shortDescription = self.request.get('shortDescription'),
                longDescription = self.request.get('longDescription'),
                dueDate = self.request.get('dueDate'),
                url = testurl,
    finished = False)
            todo.put();

            self.redirect('/')

# This class deletes the selected Todo
class Done(webapp.RequestHandler):
    def get(self):
        user = users.get_current_user()
        if user:
            raw_id = self.request.get('id')
            id = int(raw_id)
            todo = TodoModel.get_by_id(id)
            todo.delete()
            self.redirect('/')


#This class emails the task to yourself
class Email(webapp.RequestHandler):
    def get(self):
   user = users.get_current_user()
  if user:
            raw_id = self.request.get('id')
            id = int(raw_id)
            todo = TodoModel.get_by_id(id)
      message = mail.EmailMessage(sender=user.email(),
                            subject=todo.shortDescription)
      message.to = user.email()
      message.body = todo.longDescription
      message.send()
         self.redirect('/')

# Register the URL with the responsible classes
application = webapp.WSGIApplication([('/', MainPage),
                                      ('/new', New),
              ('/done', Done),
              ('/email', Email)],
                                     debug=True)

# Register the wsgi application to run
def main():
  run_wsgi_app(application)

if __name__ == "__main__":
  main()


#index.html


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
  <head>
    <title>Todos</title>
    <link rel="stylesheet" type="text/css" href="css/main.css"/>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"></meta>
  </head>
  <body>

  <div style="width: 100%;">
    <div class="topLine">
      <div style="float: left;"><img src="images/todo.png" /></div>
      <div style="float: left;" class="headline">Todos</div>
      <div style="float: right;"><a href="{{ url }}">{{ url_linktext }}</a> {{user.nickname}}</div>
    </div>
  </div>

<div style="clear: both;"/>

{# Check if we have any todos, only in this case render the table #}

{% if numbertodos %}

You have a total number of {{numbertodos}} Todos.

<table>
  <tr>


      <th>Short description </th>
      <th>Due Date</th>
      <th>Long Description</th>
      <th>URL</th>
      <th>Created</th>
      <th>Updated</th>
      <th>Done</th>
      <th>Send Email reminder</th>
    </tr>

{% for todo in todos %}
<tr>
<td>
{{todo.shortDescription}}
</td>
<td>
{{todo.dueDate}}
</td>
<td>
{{todo.longDescription}}
</td>
<td>
{% if todo.url %}
<a  href="{{todo.url}}" > {{todo.url}}</a>

{% endif %}
</td>
<td>
{{todo.created|date:"d.m.Y"}}
</td>
<td>
{{todo.updated|date:"d.m.Y"}}
</td>
<td>
<a class="done" href="/done?id={{todo.key.id}}" >Done</a>
</td>
<td>
<a class="email" href="/email?id={{todo.key.id}}" >Email</a>
</td>
</tr>
{% endfor %}
</table>

{% endif %}


<hr />



<div class="headline">Create new Todo?</div>

{% if user %}

<form action="/new" method="post">
  <table>
    <tr>
      <td><label for="shortDescription">Summary</label></td>
      <td><input type="text" name="shortDescription" id="shortDescriptions" size="80"/></td>
    </tr>
    <tr>
      <td><label for="dueDate">Due Date</label></td>
      <td><input type="dueDate" name="dueDate" id="dueDate"/></td>
    </tr>
    <tr>
      <td valign="top"><label for="longDescription">Description</label></td>
      <td><textarea rows="4" cols="80" name="longDescription" id="longDescription"></textarea></td>
    </tr>
    <tr>
      <td><label for="url">URL</label></td>
      <td><input type="text" name="url" id="url" size="80"/></td>
    </tr>
    <tr>
      <td colspan="2" align="right"><input type="submit" value="Create"/></td>
    </tr>
  </table>
</form>

{% else %}
Login with your Google Account to create and review todos.
{% endif%}


</body>
</html>


#main.css
body {
  margin: 5px;
  font-family: Arial, Helvetica, sans-serif;
}

hr {
  border: 0;
  background-color: #DDDDDD;
  height: 1px;
  margin: 5px;
}


table th {
  background:#EFEFEF none repeat scroll 0 0;
  border-top:1px solid #CCCCCC;
  font-size:small;
  padding-left:5px;
  padding-right:4px;
  padding-top:4px;
  vertical-align:top;
  text-align:left;
}

table tr {
  background-color: #e5ecf9;
  font-size:small;
}


.topLine {
  height: 1.25em;
  background-color: #e5ecf9;
  padding-left: 4px;
  padding-right: 4px;
  padding-bottom: 3px;
  padding-top: 2px;
}

.headline {
  font-weight: bold;
  color: #3366cc;
}



.done {
  font-size: x-small;
  vertical-align: top;
}


.email {
  font-size: x-small;
  vertical-align: top;
}

form td {
  font-size: smaller;
}