1. Web Basics Willem Visser RW334

2. Overview Basic Browser and Server Interaction – Forms with actions, url encoding and handlers – Parameters – Having more than one handler – GET versus POST Templates – Jinja2 Validation and Escaping Udacity CS253 is the inspiration for a lot of this content

3. Forms with actions

4. Server side How do we react to the “action”? import webapp2 class MainPage(webapp2.RequestHandler): def get(self): self.response.headers['Content-Type'] = 'text/plain' self.response.out.write('Hello, RW334 World!') app = webapp2.WSGIApplication([('/', MainPage)], debug=True) … handlers: - url: /.* script: main.app … Main.py app.yaml

5. Server Handler (1) Lets first add the form to our web page import webapp2 form = """ """ class MainPage(webapp2.RequestHandler): def get(self): self.response.headers['Content-Type'] = 'text/plain' self.response.out.write(form) app = webapp2.WSGIApplication([('/', MainPage)], debug=True) Will this render the form?

6. Server Handler (2) Default content type is HTML import webapp2 form = """ """ class MainPage(webapp2.RequestHandler): def get(self): #self.response.headers['Content-Type'] = 'text/plain' self.response.out.write(form) app = webapp2.WSGIApplication([('/', MainPage)], debug=True) Will this correctly submit?

7. Server Handler (3) Add the FooPage handler whenever the “/foo” url is accessed on our server Can get the “q” parameter from the GET request … class FooPage(webapp2.RequestHandler): def get(self): q = self.request.get("q") self.response.out.write("Thanks for %s" % q) app = webapp2.WSGIApplication( [('/', MainPage), ('/foo', FooPage)], debug=True)

8. Server Handler (4) class FooPage(webapp2.RequestHandler): def get(self): self.response.headers['Content-Type'] = 'text/plain' self.response.out.write(self.request) app = webapp2.WSGIApplication([('/', MainPage), ('/foo', FooPage)], debug=True) GET /foo?q=blah HTTP/1.1 Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8 Accept-Language: en-US,en;q=0.8,af;q=0.6 Host: localhost:8080 Referer: http://localhost:8080/ User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_7_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/30.0.1599.101 Safari/537.36 X-Appengine-Country: ZZ

9. GET versus POST … form = """ """ class MainPage(webapp2.RequestHandler): def get(self): self.response.out.write(form) class FooPage(webapp2.RequestHandler): def get(self): q = self.request.get("q") self.response.out.write("Thanks for %s" % q) app = webapp2.WSGIApplication([('/', MainPage), ('/foo', FooPage)], debug=True) Will this correctly submit?

10. GET versus POST (2) … form = """ """ class MainPage(webapp2.RequestHandler): def get(self): self.response.out.write(form) class FooPage(webapp2.RequestHandler): def post(self): q = self.request.get("q") self.response.out.write("Thanks for %s" % q) app = webapp2.WSGIApplication([('/', MainPage), ('/foo', FooPage)], debug=True) Where did the parameter go in url?

11. Parameter now part of the body of request GET versus POST (3) POST /foo HTTP/1.1 Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8 Accept-Language: en-US,en;q=0.8,af;q=0.6 Content-Length: 6 Content-Type: application/x-www-form-urlencoded Content_Length: 6 Content_Type: application/x-www-form-urlencoded Host: localhost:8080 Origin: http://localhost:8080 Referer: http://localhost:8080/ User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_7_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/30.0.1599.101 Safari/537.36 X-Appengine-Country: ZZ q=blah

12. GET versus POST (4) GET – Parameters in URL Length restrictions – Used for fetching documents – OK to cache Same request in succession should produce the same – Should not change the server POST – Parameters in body – Used for updating (server) – No caching

13. Templates Greatly simplify developing dynamic websites Pass data variables to the page Embed programming constructs in the page Lots of options, we will use jinja2

14. First create your Template I'm using Templates! I'm {{name}}, and I {{verb}} RW334! … libraries: - name: jinja2 version: latest … app.yaml base.html

15. Handler import os import webapp2 import jinja2 jinja_environment = jinja2.Environment(autoescape=True, loader=jinja2.FileSystemLoader(os.path.join(os.path.dirname(__file__), 'templates'))) class MainPage(webapp2.RequestHandler): def get(self): template_values = { 'name': 'Willem', 'verb': 'love' } template = jinja_environment.get_template('base.html') self.response.out.write(template.render(template_values)) app = webapp2.WSGIApplication([('/', MainPage)], debug=True)

16. Loops! I'm using Templates! I'm {{name}}, and I {{verb}} RW334! Here are a few of my favourite things about the course: {% for item in favourites %} {{ item }} {% endfor %}

17. Handler … class MainPage(webapp2.RequestHandler): def get(self): template_values = { 'name': 'Willem', 'verb': 'love', 'favourites' : favourites } template = jinja_environment.get_template('base.html') self.response.out.write(template.render(template_values)) app = webapp2.WSGIApplication([('/', MainPage)], debug=True)

18. Validation When you receive input it is important to validate it Can happen on the client and the server We will look at it on the server side here

19. Birthday Validation What is your birthday? Month Day Year {{error}}

20. Handler with Validation class MainPage(webapp2.RequestHandler): def displayform(self, error = "", month = "", day = "", year = ""): values = dict([('error', error), ('month', month), ('day', day), ('year', year)]) template = jinja_environment.get_template('validation.html') self.response.out.write(template.render(values)) def get(self): self.displayform() def post(self): user_month = self.request.get("month") user_day = self.request.get("day") user_year = self.request.get("year") month = valid_month(user_month) day = valid_day(user_day) year = valid_year(user_year) if not(month and day and year): self.displayform("Not a valid date", user_month, user_day, user_year) else: self.response.out.write("Thanks for the valid birthday")

21. Escaping What happens if we add this in a field – yaya”>oops! We need to make sure HTML characters display as intended not mess with the “real” HTML This is done by Escaping the HTML – Convert it to something harmless Common cases – “ becomes &quot and & becomes &amp – > becomes &gt and < becomes &lt

22. Escaping Example If we want to display this line in the browser – How do we display in HTML? By typing – How do we display &lthtml&gt in HTML?

23. First Rule of Escaping NEVER ROLL YOUR OWN!

24. Escape Libs import cgi def escape_html(s): return cgi.escape(s,quote = True) class MainPage(webapp2.RequestHandler): def displayform(self, error = "", month = "", day = "", year = ""): values = dict([('error', error), ('month', escape_html(month)), ('day', escape_html(day)), ('year', escape_html(year))]) template = jinja_environment.get_template('validation.html') self.response.out.write(template.render(values)) jinja_environment = jinja2.Environment(autoescape=True, loader=jinja2.FileSystemLoader(os.path.join(os.path.dirname(__file__), 'templates'))) OR