Tutorial 9: ToDo List App

Tutorial used: http://www.lightbird.net/dbe/blog.html

Structure of a Standard Project:
Screen Shot 2013-01-19 at 5.13.49 PM

Steps taken:

 1-5: Follow steps 1-5 in Tutorial 8

6. start the blog app
– ( python manage.py startapp blog )

7. create the models for ‘blog > Post’
– edit blog/models.py
– remember to import ‘models‘ and ‘admin
Screen Shot 2013-01-11 at 11.31.21 PM

– include appname ‘blog‘ in settings.py > INSTALLED_APPSScreen Shot 2013-01-11 at 11.32.01 PM

8. activate the models for ‘blog > Post’:
– sneakpeak with ( python manage.py sql todo )
– ( python manage.py syncdb )

9. set the template directory (Important Concept: TEMPLATE_DIRS provide the path to your static files)
– edit settings.py > TEMPLATE_DIR to point to where your templates reside
Screen Shot 2013-01-12 at 5.05.36 PM
– to use a particular template, provide the path from that path, e.g.:
Screen Shot 2013-01-12 at 5.06.46 PM

10. create the view for ‘blog > Post > main’:
Note here that I have made edits to the original tutorial to make this work
a. set the url path
– i) edit dbetutorial2/urls.py to point to blog/urls.py
Screen Shot 2013-01-12 at 5.50.26 PM

– ii) edit blog/urls.py to point to view blog.views.main ( Important Concept: you can use prefix to reduce repetition )
Note: you can add or not add the ‘url’ syntax in front of the regular expression
Note: both methods below works to point the url to the view
– method 1
Screen Shot 2013-01-12 at 5.50.49 PM
– method 2:
Screen Shot 2013-01-12 at 5.50.35 PM

b. create the view logic
– edit blog/views.py
– i) load html static files: use blog/list.html, relative path from the TEMPLATE_DIR
– ii) load models: use blog.models import *, relative path from PYTHON_PATH
Screen Shot 2013-01-12 at 5.11.01 PM

c. create the view static files:
– use terminal to create templates/blog/bbase.html and templates/blog/list.html files
Screen Shot 2013-01-11 at 11.56.13 PMScreen Shot 2013-01-11 at 11.56.00 PMScreen Shot 2013-01-11 at 11.55.37 PM

– edit bbase.html and list.htmlrespectively
Screen Shot 2013-01-12 at 5.11.52 PM Screen Shot 2013-01-12 at 5.12.17 PM

Note: Hooray! At this point, you should be able to run server and see this:
Screen Shot 2013-01-12 at 6.01.12 PM

11. create the view for ‘blog > Post > post’:
a. create url link from list.html
Screen Shot 2013-01-19 at 4.13.26 PM

b. add link to blog/urls.py to react with blog.views.post
Note here i got stuck for a bit:
1. Putting the url path in front gives it priority matching (i.e. if i placed the second url shown in diagram in front, the page will always load the second one first for localhost:8000/blog/<anything>

Screen Shot 2013-01-19 at 4.13.41 PM

c. in blog/views.py, get post to render static file blog/post.html

Screen Shot 2013-01-19 at 4.13.55 PM

d. create templates/blog/post.html (optional to extend blog/bbase.html) to display

Screen Shot 2013-01-19 at 4.14.11 PM

12. creating Model and View for  commenting:  ‘blog > (models.py) > Comment’
a. create Comment Model: add to blog/models.py:
Screen Shot 2013-01-19 at 5.07.11 PM
Note: Remember to do a database reset after
– python manage.py reset blog
– python manage.py syncdb

b. create URL link to View: add to blog/urls.py:
Note: here the url links to localhost:8000/blog/add_comment/<post_id>/
Screen Shot 2013-01-19 at 5.09.34 PM

c. create add_comment function: edit blog/views.py:
Screen Shot 2013-01-19 at 5.11.38 PM

Screen Shot 2013-01-19 at 5.11.54 PM

d. edit Post View to display comments: edit blog/views/py:
Screen Shot 2013-01-19 at 5.12.14 PM

e. add Comment Static display: edit templates/blog/post.html
Screen Shot 2013-01-19 at 5.13.04 PM



And the Final Product!

Screen Shot 2013-01-19 at 5.25.24 PM


This entry was posted in Tutorials. Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s