Difference between revisions of "Module 5"

From CSE330 Wiki
Jump to: navigation, search
m
(Updating Module 5 (not grading))
Line 1: Line 1:
In Module 6, you will learn about python, a programming language, and Django, a web framework.
+
__NOTOC__
 +
In Module 5, you will learn about Git, a version control system, and Django, a web framework.
  
This article contains your assignments for Module 6.
+
This article contains your assignments for Module 5.
  
== Individual Assignments ==
+
== Reading ==
  
 +
The following articles on the online class wiki textbook contain information that will help you complete the assignments.
  
=== Django Tutorial===
+
* [[Git]]
====Install Djgano====
+
* [[Web Frameworks]]
<p> This procedure assumes you are using and Amazon AMI Linux on an ec2 instance. An in-depth install guide can be found on the [https://docs.djangoproject.com/en/dev/topics/install/# Django website], but a quick version is below. </p>
 
<ul>
 
<li>Install Distribute (prerequisite for pip):</li>
 
<code>wget http://python-distribute.org/distribute_setup.py</code><br><code>sudo python distribute_setup.py </code>
 
<li>Install pip:</li>
 
<code>wget https://raw.github.com/pypa/pip/master/contrib/get-pip.py </code><br><code>sudo python get-pip.py</code>
 
<li><p>Install Django using pip:</p></li>
 
<code>sudo pip install Django</code>
 
</ul>
 
<p> That's it. </p>
 
  
====Django Assignment====
+
== Individual Assignments ==
<p>Complete the [https://docs.djangoproject.com/en/1.4/intro/tutorial01/ tutorial] on the django website. You will create a Polls app. There are four parts to this tutorial.</p>
 
<p>It is important you do all the steps in the tutorial to get comfortable defining models, views, templates, and using the interactive shell and the admin app. Understanding the concepts will make the project go much quicker.</p>
 
<ul>
 
<li><h5>[https://docs.djangoproject.com/en/1.4/intro/tutorial01/ Part 1]</h5>
 
<ul>
 
<li>Create a project</li>
 
<li>Start the development server</li>
 
<li>Setup an SQLite database</li>
 
<li>Create the Polls app and define the models</li>
 
<li>Interact with the database using the interactive python shell</li>
 
</ul>
 
</li>
 
<li>
 
<h5>[https://docs.djangoproject.com/en/1.4/intro/tutorial02/ Part 2]</h5>
 
<ul>
 
<li>Activate the admin site</li>
 
<li>Add the poll app to the admin site</li>
 
<li>Modify the database using the admin site</li>
 
</ul>
 
</li>
 
<li>
 
<h5>[https://docs.djangoproject.com/en/1.4/intro/tutorial03/ Part 3]</h5>
 
<ul>
 
<li>Configure URL handling</li>
 
<li>Create some views</li>
 
</ul>
 
</li>
 
<li>
 
<h5>[https://docs.djangoproject.com/en/1.4/intro/tutorial04/ Part 4]</h5>
 
<ul>
 
<li>Write a form that modifies the database</li>
 
<li>Refactor to use generic views</li>
 
</ul>
 
  
<h5>Switch to Apache Webserver</h5>
+
=== Learn about Version Control Systems ===
<ul>
 
<li>run <code> sudo yum install mod_wsgi</code> to install the apache and the module necessary for serving your django app.</li>
 
<li> Add these lines to /etc/httpd/conf/httpd.conf
 
<source lang="apache">
 
Alias /static /var/www/mysite/static
 
<Directory /var/www/mysite/static>
 
  Order deny,allow
 
  Allow from all
 
</Directory>
 
WSGIScriptAlias / /var/www/mysite/apache/django.wsgi
 
</source>
 
</li>
 
<li>Move your "mysite" project (the top level mysite directory) to /var/www and make the directory /var/www/mysite/apache. In that directory create the file django.wsgi and inside that file put:
 
<source lang="python">
 
import os
 
import sys
 
sys.path.append('/var/www/mysite')
 
os.environ['DJANGO_SETTINGS_MODULE'] = 'mysite.settings'
 
import django.core.handlers.wsgi
 
application = django.core.handlers.wsgi.WSGIHandler()
 
</source></li>
 
</ul>
 
</li>
 
<li>Be sure to change any references to old paths in the django "mysite" settings.py file (such as the location of the database if using sqlite) and restart the webserver. </li>
 
  
<li>Also make sure the permissions are setup properly on the mysite directory under /var/www for apache to access, along with the database file (if using sqlite3). </li>
+
On your own time, '''watch the 40-minute screencast that has been posted to Blackboard'''.  This gives an insightful understanding of how VCSs work under-the-hood.
  
<li>To fix the issue with the CSS not loading on the admin page you need to create a directory under the static folder (/var/www/mysite/static/admin/css/) and copy the files from /usr/lib/python2.6/site-packages/django/contrib/admin/static/admin/css/ into it.
+
=== Django Tutorial ===
</li>
 
  
 +
The web framework we will be using in Module 5 is called '''Django'''.  Django is the dominant Python-based web framework and is useful for large web sites.
  
</ul>
+
Before you may begin, you need to install Django.  You may do this using [[Python#Pip|pip]], which you installed in Module 4.  Django's package name in pip is '''Django'''.
  
== Group Project ==
+
Once you have Django installed, complete [https://docs.djangoproject.com/en/1.4/intro/tutorial01/ the official Django tutorial].  You will be creating a simple poll app.  There are four parts to the tutorial.
  
You may work in pairs on this project. Your group will create an image tagging and browsing site using Django as described below.
+
It is important that you do all the steps in the tutorial in order to get comfortable defining models, views, templates, and using the interactive shell and the admin app. Understanding these concepts will make the project go much quicker.
  
=== Image Tagging/Browsing Site ===
+
'''Tip:''' It is recommended that you install a copy of Python and Django on your local computer.  This way, you will not need to upload the files to your server every time you make a change, because your server will be running locally.
  
A site that lets users upload images, apply multiple tags to them, and browse through images of a certain tag.
+
# '''[https://docs.djangoproject.com/en/1.4/intro/tutorial01/ Part 1]'''
When looking at an image, it lists all associated tags so you can switch albums.
+
#* Create a project
 +
#* Start the development server
 +
#* Setup an SQLite database
 +
#* Create the Polls app and define the models
 +
#* Interact with the database using the interactive python shell
 +
# '''[https://docs.djangoproject.com/en/1.4/intro/tutorial02/ Part 2]'''
 +
#* Activate the admin site
 +
#* Add the poll app to the admin site
 +
#* Modify the database using the admin site
 +
# '''[https://docs.djangoproject.com/en/1.4/intro/tutorial03/ Part 3]'''
 +
#* Configure URL handling
 +
#* Create some views
 +
# '''[https://docs.djangoproject.com/en/1.4/intro/tutorial04/ Part 4]'''
 +
#* Write a form that modifies the database
 +
#* Refactor to use generic views
  
==== Requirements ====
+
== Group Project ==
  
 +
=== Extending the Polls App using Version Control ===
  
 +
As your group project, you and your partner will each independently add an additional feature to the polls app you made in the individual portion. You will each be working in your own branch in your group Git repository.  When the features are complete, you will merge them back into the master branch.
  
<ul>
+
# Someone in your group needs to copy their tutorial code from the individual portion into the master branch of the group repository.
<li>Make a database that stores images and tags. An image can have multiple tags, and each tag can have multiple images.</li>
+
# After pushing and pulling, everyone should have the up-to-date master branch on their machine.
<li>The home page should allow users to find tags that they want to view. (e.g. lolcat).</li>
+
# Each person in the group should then make a new branch named with their first name.
<li>After clicking a link to a tag, it should take you to a page with the newest image for that tag.</li>
+
# Each person can then individually work on their new feature.  Here are some ideas for new features that will all earn full credit:
<li>Clicking on the current image should take to to the next image according to date added. When at the last image, link to the first.</li>
+
#* Enable users to create their own polls
<li>Make it clear which tag you are currently browsing. Beside or below the current image, also display the full list of tags that belong to the current image (e.g. lolcat, meme, internet, funny). You should be able to click on any of the tags to begin looking through that collection of images.</li>
+
#* Add user accounts. Polls voted on would be associated with the account
<li>Provide a way for users who are logged in to add new images and new tags.</li>
+
#* Check for double votes using Cookie and/or IP
<li>Validate user input</li>
+
#* Set a timeout for polls (e.g., the poll is active for only 7 days)
<li>Provide a way for users to register, login, and change their password.</li>
+
#* Add a banner ad to the site that changes on a page reload (you could use Google Adsense or similar)
<li>Have a link that sends an email to a user with a link for resetting their password in case they forget it.</li>
+
#: If there is a feature not on this list that you would like to add, please ask a TA.
<li>Style the site with statically-served CSS (i.e. link to static .css files and don't write CSS inside the html templates) </li>
+
# When someone completes their feature, they should merge their branch into the master branch, and everyone else in the group should merge the master branch (which now has the new feature) into their personal working branch.
</ul>
 
  
==== Notes ====
+
On Demo Day, you will need to show the branching structure of your repository in SourceTree to the TA.
<ul>
 
<li>You may store images as external web links. </li>
 
<li>Try to find and figure out as many Django shortcuts as you can. You do not need to write your own url parsing, validation, login/registration/reset forms etc. For these common tasks, there is almost always built-in functionality that will do what you want in very few lines.</li>
 
<li>The admin interface and the interactive python shell will be very helpful when getting started with the database.</li>
 
  
</ul>
+
=== Web Security and Validation ===
  
== Grading ==
+
Your project needs to demonstrate that thought was put into web security and best practice.  For more information, see this week's Web Application Security guide: [[Web Application Security, Part 2]]
  
<span style="font-size:2em; line-height:2em;">'''Due Date: Wednesday December 5th by 1pm (both individual and group)'''</span>
+
In particular:
  
{|
+
* '''Your application needs to be secure from SQL injection attacks'''. If you are using prepared queries, you should already be safe on this front.
!Python Assignment (Individual)
+
* '''All of your output needs to be sanitized using htmlentities()'''.
!Points
 
|-
 
|Compute Final Grades
 
|0.25
 
|-
 
|Compute Letter Grade
 
|0.25
 
|-
 
|Sort by Last Name
 
|0.25
 
|-
 
|Accept Command Line Argument
 
|0.25
 
|-
 
!colspan="2"|Django Assignment (Individual)
 
|-
 
|Models defined, database set up     
 
|0.25
 
|-
 
|Admin app enabled and working
 
|0.25
 
|-
 
|URLs matched to correct views
 
|0.25
 
|-
 
|Templates for viewing and voting using generic views
 
|0.25
 
|-
 
|Apache serving the site
 
|0.5
 
|-
 
!colspan="2"|Group Portion:
 
|-
 
|Models defined and database set up
 
|1
 
|-
 
|View of single image with current tag and list of all tags
 
|1
 
|-
 
|Navigation between images and tags
 
|0.5
 
|-
 
|Main page displays all tags sorted by number of images
 
|0.5
 
|-
 
|User registration, login/logout and change password
 
|0.5
 
|-
 
|Forgot password sends email with working reset link
 
|0.5
 
|-
 
|Validation of URLs submitted by user (or upload)
 
|0.5
 
|-
 
|Add new images and tags, only if logged in
 
|0.5
 
|-
 
|Static CSS applied to some templates
 
|0.5
 
|-
 
|Creative Portion
 
|2
 
|-
 
|}
 
  
 +
You shouldn't forget the practices you learned last week:
  
Total Points = 10
+
* '''You should pass tokens in forms''' to prevent CSRF attacks.
 +
* '''Your page should validate''' with no errors through the W3C validator.
  
Turn in after 1pm on the 5th = 1 point off
+
== Grading ==
 
 
Turn in on the 6th = 2 points off
 
  
Turn in on the 7th = 3 points off
+
We will be grading the following aspects of your work.  There are 100 points total.
  
All projects should be completed by the last day of class, Friday the 7thAny modules that have not been demo'd at that time will be given a grade of zero. You are responsible for making sure you can attend TA hours to demo if you are late (or for contacting a TA to try and arrange a session).  You cannot demo by e-mail. 
+
# '''MySQL Queries (25 Points):'''
 +
#* A MySQL server is running on your instance (2 points)
 +
#* Tables fields, including data types, are correct (4 points)
 +
#* Foreign keys are correct (4 points)
 +
#* The output of each of the five queries is correct (3 points each)
 +
# '''News Site (60 Points):'''
 +
#* '''''User Management (20 Points):'''''
 +
#** A session is created when a user logs in (3 points)
 +
#** New users can register (3 points)
 +
#** Passwords are hashed using salted one-way encryption (3 points)
 +
#** Users can log out (3 points)
 +
#** A user can edit and delete his/her own stories and comments but cannot edit or delete the stories or comments of another user (8 points)
 +
#* '''''Story and Comment Management (20 Points):'''''
 +
#** Relational database is configured with correct data types and foreign keys (4 points)
 +
#** Stories can be posted (3 points)
 +
#** A link can be associated with each story using a separate database field (3 points)
 +
#** Comments can be posted in association with a story (4 points)
 +
#** Stories can be edited and deleted (3 points)
 +
#** Comments can be edited and deleted (3 points)
 +
#**: ''Note: Although there are only 6 points allocated for editing/deleting in this section, there are 8 more points at stake in the User Management section that cannot be earned unless editing/deleting is implementedImplementing editing but not deleting, or vice-versa, will result in earning half the points.''
 +
#* '''''Best Practices (15 Points):'''''
 +
#** Code is well formatted and easy to read (3 points)
 +
#** Safe from SQL Injection attacks (3 points)
 +
#** All content is sanitized on output (3 points)
 +
#** All pages pass the W3C validator (3 points)
 +
#** CSRF tokens are passed when creating, editing, and deleting comments and stories (3 points)
 +
#* '''''Usability (5 Points):'''''
 +
#** Site is intuitive to use and navigate (4 points)
 +
#** Site is visually appealing (1 point)
 +
# '''Creative Portion (15 Points)'''
  
 
[[Category:Module 5]]
 
[[Category:Module 5]]
 
[[Category:Modules]]
 
[[Category:Modules]]

Revision as of 20:49, 20 April 2013

In Module 5, you will learn about Git, a version control system, and Django, a web framework.

This article contains your assignments for Module 5.

Reading

The following articles on the online class wiki textbook contain information that will help you complete the assignments.

Individual Assignments

Learn about Version Control Systems

On your own time, watch the 40-minute screencast that has been posted to Blackboard. This gives an insightful understanding of how VCSs work under-the-hood.

Django Tutorial

The web framework we will be using in Module 5 is called Django. Django is the dominant Python-based web framework and is useful for large web sites.

Before you may begin, you need to install Django. You may do this using pip, which you installed in Module 4. Django's package name in pip is Django.

Once you have Django installed, complete the official Django tutorial. You will be creating a simple poll app. There are four parts to the tutorial.

It is important that you do all the steps in the tutorial in order to get comfortable defining models, views, templates, and using the interactive shell and the admin app. Understanding these concepts will make the project go much quicker.

Tip: It is recommended that you install a copy of Python and Django on your local computer. This way, you will not need to upload the files to your server every time you make a change, because your server will be running locally.

  1. Part 1
    • Create a project
    • Start the development server
    • Setup an SQLite database
    • Create the Polls app and define the models
    • Interact with the database using the interactive python shell
  2. Part 2
    • Activate the admin site
    • Add the poll app to the admin site
    • Modify the database using the admin site
  3. Part 3
    • Configure URL handling
    • Create some views
  4. Part 4
    • Write a form that modifies the database
    • Refactor to use generic views

Group Project

Extending the Polls App using Version Control

As your group project, you and your partner will each independently add an additional feature to the polls app you made in the individual portion. You will each be working in your own branch in your group Git repository. When the features are complete, you will merge them back into the master branch.

  1. Someone in your group needs to copy their tutorial code from the individual portion into the master branch of the group repository.
  2. After pushing and pulling, everyone should have the up-to-date master branch on their machine.
  3. Each person in the group should then make a new branch named with their first name.
  4. Each person can then individually work on their new feature. Here are some ideas for new features that will all earn full credit:
    • Enable users to create their own polls
    • Add user accounts. Polls voted on would be associated with the account
    • Check for double votes using Cookie and/or IP
    • Set a timeout for polls (e.g., the poll is active for only 7 days)
    • Add a banner ad to the site that changes on a page reload (you could use Google Adsense or similar)
    If there is a feature not on this list that you would like to add, please ask a TA.
  5. When someone completes their feature, they should merge their branch into the master branch, and everyone else in the group should merge the master branch (which now has the new feature) into their personal working branch.

On Demo Day, you will need to show the branching structure of your repository in SourceTree to the TA.

Web Security and Validation

Your project needs to demonstrate that thought was put into web security and best practice. For more information, see this week's Web Application Security guide: Web Application Security, Part 2

In particular:

  • Your application needs to be secure from SQL injection attacks. If you are using prepared queries, you should already be safe on this front.
  • All of your output needs to be sanitized using htmlentities().

You shouldn't forget the practices you learned last week:

  • You should pass tokens in forms to prevent CSRF attacks.
  • Your page should validate with no errors through the W3C validator.

Grading

We will be grading the following aspects of your work. There are 100 points total.

  1. MySQL Queries (25 Points):
    • A MySQL server is running on your instance (2 points)
    • Tables fields, including data types, are correct (4 points)
    • Foreign keys are correct (4 points)
    • The output of each of the five queries is correct (3 points each)
  2. News Site (60 Points):
    • User Management (20 Points):
      • A session is created when a user logs in (3 points)
      • New users can register (3 points)
      • Passwords are hashed using salted one-way encryption (3 points)
      • Users can log out (3 points)
      • A user can edit and delete his/her own stories and comments but cannot edit or delete the stories or comments of another user (8 points)
    • Story and Comment Management (20 Points):
      • Relational database is configured with correct data types and foreign keys (4 points)
      • Stories can be posted (3 points)
      • A link can be associated with each story using a separate database field (3 points)
      • Comments can be posted in association with a story (4 points)
      • Stories can be edited and deleted (3 points)
      • Comments can be edited and deleted (3 points)
        Note: Although there are only 6 points allocated for editing/deleting in this section, there are 8 more points at stake in the User Management section that cannot be earned unless editing/deleting is implemented. Implementing editing but not deleting, or vice-versa, will result in earning half the points.
    • Best Practices (15 Points):
      • Code is well formatted and easy to read (3 points)
      • Safe from SQL Injection attacks (3 points)
      • All content is sanitized on output (3 points)
      • All pages pass the W3C validator (3 points)
      • CSRF tokens are passed when creating, editing, and deleting comments and stories (3 points)
    • Usability (5 Points):
      • Site is intuitive to use and navigate (4 points)
      • Site is visually appealing (1 point)
  3. Creative Portion (15 Points)