Lesson 5 - Web Application Development

Transcript

1. Lesson 5 Web Application Development Dana Spiegel dana@sociabledesign.com 1
2. Quick Review • Different types of databases • Relational (SQL), NoSQL, Key/Value Stores, Graph, Constant • SQL language • SQL data types • Numeric • Text • Date • Blob • CRUD • Indexes • Relationships and Foreign Keys • Aggregation 2
3. Creating a Web App 3 • Based on a web browser making a request for the resource at a URL • URL defines the location • Web apps pay attention to path and query • Fragment isn’t even seen by web app (it is used in the browser only) • Web app code usually lives at path • Query (in both GET and POST) are processed by framework • Response from web app is an HTTP response plus HTTP result code • 200 - success • 404 - does not exist • 301/302 - moved foo://example.com:8042/over/there?name=ferret#nose \_/ \______________/\_________/ \_________/ \__/ | | | | | scheme authority path query fragment
4. Request/Response Cycle 4 Time HTTP Request View HTTP Response Process Render Page Process Process
5. Web Application Framework • Provides standard functionality for processing requests and generating responses • Usually have server built in • Often include some form of data storage library • ORMs are common modeling and querying tools • Provide utility libraries for operating in a web-based environment • URL encoding/decoding • Handle form processing in a safe and standard way • Usually provide recommended structure for organizing business logic • Available in every language • We will be learning Django • Most common and popular python framework • disqus, pinterest, instagram, mozilla, theonion.com, rdio 5
6. MVC Pattern for Web Apps • Model • Data storage, queries • View • Renders response into HTML • Controller • Handles request/response • Processes information, takes action, handles form data • Very powerful methodology that separates out logic and presentation • Used for desktop applications (Mac OS X, Windows .NET) 1 • Used for mobile applications (iOS, Android, Windows Phone) 6 1. https://developer.apple.com/library/mac/#documentation/General/Conceptual/DevPedia-CocoaCore/MVC.html Model View Controller Request Update Query Response
7. Network Connections • Network connections are defined by 4 bits of information • Server IP address • Server Port • Client IP address • Client Port • You can have multiple software servers running on one hardware server by binding to a different port • Special ports are less than 1024, which require root priviledges • There are 65535 ports available on a server • Standard HTTP port: 80 • Standard HTTPS (SSL) port: 443 • Standard SSH port: 22 7
8. Django 1.4 • Terminology is a little confusing: • Django views are actually “controllers” • Django templates are actually “views” • Django models are still models • Applications are python modules that live in project directory • Each application has MVC components • Models are in models.py • Views are in views.py • Templates are in templates directory • All static assets live in static directory 8 Django Model Django Template Django View Request Update Query Response
9. Running your Server • Project is already created for you: • cd project • Has a default layout • Run server using runserver command • Logs will be output to the terminal • Database is located at sqlite.db (but we’re not using until next time) • The default application is also called project 9 drwxr-xr-x 6 ubuntu ubuntu 4096 Oct 22 03:31 ./ drwxr-xr-x 7 ubuntu ubuntu 4096 Oct 21 15:41 ../ -rwxr-xr-x 1 ubuntu ubuntu 250 Sep 15 18:47 manage.py* drwxr-xr-x 2 ubuntu ubuntu 4096 Sep 15 18:47 media/ drwxr-xr-x 2 ubuntu ubuntu 4096 Sep 16 13:56 project/ -rw-r--r-- 1 ubuntu ubuntu 35840 Sep 16 13:57 sqlite.db drwxr-xr-x 5 ubuntu ubuntu 4096 Oct 22 03:30 static/ drwxr-xr-x 2 ubuntu ubuntu 4096 Oct 22 03:30 templates/
10. First View • Not even a real view! • Does some housekeeping • Sets up admin pages (more on this later) • Renders a template directly 10 from django.conf.urls import patterns, include, url from django.views.generic.simple import direct_to_template from django.contrib import admin admin.autodiscover() urlpatterns = patterns('', url(r'^$', direct_to_template, { 'template': 'index.html' }, name='home'), url(r'^admin/', include(admin.site.urls)), )
11. URL Registration • Django urls.py files map paths to views • They only work on paths, not GET or POST query parameters • They are regular expressions • Match multiple paths to a single view • Capture text in a part of the URL (path) and can pass the captured variables into the specified view • They call the specified view • Read more: • https://docs.djangoproject.com/en/1.4/topics/http/urls/#example • http://www.diveintopython.net/regular_expressions/ 11 url(r'^articles/(?P<year>\d{4})/$', 'news.views.year_archive')
12. Second View • Processed by a view method in project/views.py • Renders template index2.html • Passes in a dict of variables • Returns a response to the browser • Django lazy processes the response • Requires configuration in urls.py 12 from django.template.response import TemplateResponse def index2(request): return TemplateResponse(request, 'index2.html', { 'var1': 'This is var1', 'var2': 'This is var2', 'list_var': ['a', 'b', 'c'], }) url(r'^index2/', 'index2', name='index2'),
13. Templates vs. HTML • Templates are HTML • Have basic variables that are translated at render time into data • Have basic logic that executes at render time • Variables are passed in by the view using a dict called the context • Context keys can be used to access data in the template by name • Templates can inherit from one another, overriding blocks in the parent templates • https://docs.djangoproject.com/en/1.4/ref/templates/builtins/ 13 <p>var1: {{ var1 }}</p> <p>var2: {{ var2 }}</p> <p>list_var: <ol> {% for i in list_var %} <li>{{ i }}</li> {% endfor %} </ol>
14. project/urls.py 14 from django.conf.urls import patterns, include, url from django.views.generic.simple import direct_to_template from django.contrib import admin admin.autodiscover() urlpatterns = patterns('project.views', url(r'^$', direct_to_template, { 'template': 'index.html' }, name='home'), url(r'^index2/', 'index2', name='index2'), url(r'^admin/', include(admin.site.urls)), )
15. project/views.py 15 from django.template.response import TemplateResponse def index2(request): return TemplateResponse(request, 'index2.html', { 'var1': 'This is var1', 'var2': 'This is var2', 'list_var': ['a', 'b', 'c'], })
16. templates/index.html 16 <!DOCTYPE html> <!--[if lt IE 7]><html class="no-js lt-ie9 lt-ie8 lt-ie7"><![endif]--> <!--[if IE 7]><html class="no-js lt-ie9 lt-ie8"><![endif]--> <!--[if IE 8]><html class="no-js lt-ie9"><![endif]--> <!--[if gt IE 8]><!--><html class="no-js"><!--<![endif]--> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>{% block title %}Title{% endblock %}</title> <meta name="description" content=""> <meta name="viewport" content="width=device-width"> <link rel="stylesheet" href="{{ STATIC_URL }}css/normalize.css"> <link rel="stylesheet" href="{{ STATIC_URL }}css/main.css"> <script src="{{ STATIC_URL }}js/vendor/modernizr-2.6.2.min.js"></script> </head> <body> {% block body %} <p>Hello world! This is HTML5 Boilerplate.</p> {% endblock %} ! <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <script>window.jQuery || document.write(' <script src="{{ STATIC_URL }}js/vendor/jquery-1.8.2.min.js"><\/script> ')</script> <script src="{{ STATIC_URL }}js/plugins.js"></script> <script src="{{ STATIC_URL }}js/main.js"></script> </body> </html>
17. templates/index2.html 17 {% extends "index.html" %} {% block title %}Show off my variables!{% endblock %} {% block body %} <p>Index with variables</p> <p>var1: {{ var1 }}</p> <p>var2: {{ var2 }}</p> <p>list_var: <ol> {% for i in list_var %} {{ i }} {% endfor %} </ol> {% endblock body %}
18. Running your web app 18 • To run your django app on the server, type runserver • To view your django app in your browser, go to: • http://dev.hatcherydevshop.com:<port>/ • Find <port> by typing echo $PORT
19. In Class: Using tools • Explore project • Add content to templates • Add project to Github • Homework: • Read http://devhub.fm/http-requestresponse-basics/ • Create a view that renders a weekly calendar • HTML table shows 1 week • Pass the current day and the next 6 days into the template and use them to render the days of the week with the correct current date 19