PageRenderTime 53ms CodeModel.GetById 24ms RepoModel.GetById 0ms app.codeStats 0ms

/README.md

https://gitlab.com/learn-co-curriculum/cssi-6-4-gae-intro-to-templates
Markdown | 121 lines | 90 code | 31 blank | 0 comment | 0 complexity | fb215d32878072dbfe5a85604efff068 MD5 | raw file
    

  1. 

  2. 

  3. #Google App Engine: Intro to Templates
    4. 

  4. 

  5. The **template** is the view of the MVC model. This is where our python is embedded into our HTML.  
    6. 

  6. 

  7. There are many templating systems for Python: <a href="https://docs.djangoproject.com/en/dev/topics/templates/Django">Django</a>, and <a href="http://jinja.pocoo.org/">Jinja</a> are just a few. You can use your template engine of choice by bundling it with your application code.
    8. 

  8. 

  9. Let's start with a simple page:
    10. 

    11. 

  11. **Code Along: Templating**
    12. 

  12. + Clone the repo into the development directory of your local machine, or you can use the Boilerplate Code below.
    13. 

  13. 

  14. + Copy and save this into main.py
    15. 

  15. 

  16. 

  17. ```python
    18. 

  18. import webapp2 #webapp2 is a module that you import
    19. 

    20. 

  20. class MainHandler(webapp2.RequestHandler):#This is the handler class
    21. 

  21.   def get(self):
    22. 

  22.     self.response.write('Hello webapp2 world!')#replacing your print statements
    23. 

    24. 

  24. class CountHandler(webapp2.RequestHandler):
    25. 

  25.   def get(self):
    26. 

  26.     for i in range(1, 101):
    27. 

  27.       self.response.write(i)
    28. 

    29. 

  29. app = webapp2.WSGIApplication([
    30. 

  30.   ('/', MainHandler),
    31. 

  31.   ('/count', CountHandler),
    32. 

  32. ], debug=True) #creates a WSGIApplication and assigns it to the variable app. app.yaml is pointed to this object
    33. 

  33. ```
    34. 

  34. + Now we need to tell <kbd>app.yaml</kbd> where to find our app (<kbd>helloworld.app</kbd>) and the <kbd>webapp2</kbd> library.
    35. 

  35. 

  36. ```python
    37. 

  37. application: appengine-practice
    38. 

  38. version: 1
    39. 

  39. runtime: python27
    40. 

  40. api_version: 1
    41. 

  41. threadsafe: true
    42. 

    43. 

  43. handlers:
    44. 

  44. - url: /favicon\.ico
    45. 

  45.   static_files: favicon.ico
    46. 

  46.   upload: favicon\.ico
    47. 

    48. 

  48. - url: /.*
    49. 

  49.   script: main.app
    50. 

    51. 

  51. libraries:
    52. 

  52. - name: webapp2
    53. 

  53.   version: "2.5.2"
    54. 

  54. ```
    55. 

  55. 

  56. + Run your app using the AppEngineLauncher by Adding and Existing Application, and then open your page in the browser.
    57. 

  57. 

  58. #Templating
    59. 

  59. 

  60. We can add elements and styling to our page by using **templates**.
    61. 

  61. 

  62. **Template** - reusable code that provides a framework for embedding python into HTML. It lets us write an html page that will have similar structure and style, but different data depending on who visits a page and the state of the application.
    63. 

  63. 

  64. Here is some html in a file called hello.html, in a directory called templates, saved in the same directory as your appengine-practice project. It gives us a webpage that contains two lines of text and an image.
    65. 

  65. 

  66. ```html
    67. 

  67. <!DOCTYPE html>
    68. 

  68. <html>
    69. 

  69.   <head>
    70. 

  70.     <title>Howdy</title>
    71. 

  71.   </head>
    72. 

  72.   <body>
    73. 

  73.     <h1>Hello World!</h1>
    74. 

  74.     <img height="100px" width="150px" src="https://blackgeoscientists.files.wordpress.com/2014/06/helloworld.jpg" alt="A cute Pic of a Dude on the World">
    75. 

  75.     <h2>How are ya?</h2>
    76. 

  76.   </body>
    77. 

  77. </html>
    78. 

  78. ```
    79. 

  79. We can edit the app.yaml file to use the jinja library: jinja is a templating system for python.
    80. 

  80. 

  81. + If you modify the libraries section at the bottom of your app.yaml page to add jinja.
    82. 

  82. 

  83. ```python
    84. 

  84. application: appengine-practice #Unique application name
    85. 

  85. version: 1 # version 1 of this application’s code
    86. 

  86. runtime: python27 # running on python 2.7
    87. 

  87. api_version: 1 # API version 1
    88. 

  88. threadsafe: true # how AppEngine processes multiple requests simultaneously
    89. 

    90. 

  90. handlers:
    91. 

  91. - url: /favicon\.ico
    92. 

  92.   static_files: favicon.ico
    93. 

  93.   upload: favicon\.ico
    94. 

    95. 

  95. - url: .*
    96. 

  96.   script: main.app
    97. 

    98. 

  98.  libraries:
    99. 

  99. - name: jinja2
    100. 

  100.   version: latest
    101. 

  101. - name: webapp2
    102. 

  102.   version: "2.5.2"
    103. 

  103. ```
    104. 

  104.   + And Edit main.py to add jinja at the top of the page, plus add jinja to the handler in main.py
    105. 

  105. 

  106. ```python  
    107. 

  107. import jinja2
    108. 

  108. import os
    109. 

  109. import webapp2
    110. 

    111. 

  111. jinja_environment = jinja2.Environment(
    112. 

  112.   loader=jinja2.FileSystemLoader(os.path.dirname(__file__)))#this little bit sets jinja's relative directory to match the directory name(dirname) of the current __file__, in this case, helloworld.py
    113. 

    114. 

  114. class MainHandler(webapp2.RequestHandler):
    115. 

  115.     def get(self):
    116. 

  116.         template = jinja_environment.get_template('templates/hello.html')
    117. 

  117.         self.response.out.write(template.render())
    118. 

  118. ```
    119. 

  119. +   You can run the app and, Hooray we have styling!
    120. 

  120. 

  121. <p data-visibility='hidden'>View <a href='https://learn.co/lessons/cssi-6.4-gae-intro-to-templates' title='Google App Engine: Intro to Templates'>Google App Engine: Intro to Templates</a> on Learn.co and start learning to code for free.</p>
    122. 

  122.