Difference between revisions of "Module 9"

From CSE330 Wiki
Jump to navigationJump to search
 
(6 intermediate revisions by one other user not shown)
Line 1: Line 1:
__NOTOC__  
+
__NOTOC__
 
+
In Module 9, you will learn about Git, a version control system, and Django, a web framework.
This module introduces MEAN, a fullstack web framework that uses '''M'''ongoDB, '''E'''xpress, '''A'''ngularJS and '''N'''ode.js. <br/>
 
You have already learned (some things) about Node.js. In this module, you will be introduced to other three new technologies. Don’t frown yet, the goal of this module is to introduce you to the concept of web frameworks and prepare you for the creative project. You are not required to be an expert in all of these technologies, however, it’s important to understand the basics of each and how they work together.
 
  
 +
This article contains your assignments for Module 9.
  
 
== Reading ==
 
== Reading ==
  
The following articles on the online class wiki textbook contain information that will help you complete the assignment.
+
The following articles on the online class wiki textbook contain information that will help you complete the assignments.
 
 
*[[MongoDB]]
 
*[[Express]]
 
*[[AngularJS]]
 
*[[Getting MEAN]]
 
  
 +
* [[Git]]
 +
* [[Web Frameworks]]
  
 
== Individual Assignments ==
 
== Individual Assignments ==
  
=== Tutorials ===
+
<!-- === Learn about Version Control Systems ===
  
Make sure you go through tutorials for both MongoDB and AngularJS, and understand how Express works.
+
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. -->
  
=== Install MEAN ===
+
=== Django Tutorial ===
  
Follow the steps and install MEAN on your machine, initialize an app and type grunt in your terminal to start the server (make sure your mongoDB server is connected and running).
+
The web framework we will be using in Module 9 is called '''Django'''. Django is the dominant Python-based web framework and is useful for large web sites.
Open up the app in your browser (localhost:3000), and understand what the default app does.
 
  
 +
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.5/intro/tutorial01/ the official Django tutorial].  You will be creating a simple poll app.  '''Complete the first ''four'' parts of the tutorial for the individual portion.'''  You may complete steps 5 and 6 during the group portion.
*
 
* Make an e-commerce site using the MEAN stack.
 
*
 
  
To start, come up with use cases for your site. Think about what products the site is selling, what the user can do, and how information is stored etc.
+
'''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.
  
You may start with the default MEAN.io app and build on top of it. This way you don't have to implement user authentication. You can also create a MEAN package and start from there. <br/>
+
'''Tip:''' When testing Django on your EC2 instance, make sure to open port 8000 for your instance on AWS (and to click "apply rule changes").
You may use phone models provided by the Angular Phone Catalog app as your products. Review the MongoDB section on how to import JSON data into MongoDB.
 
  
==== How to Edit Your File ====
+
# '''[https://docs.djangoproject.com/en/1.5/intro/tutorial01/ 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
 +
# '''[https://docs.djangoproject.com/en/1.5/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.5/intro/tutorial03/ Part 3]'''
 +
#* Configure URL handling
 +
#* Create some views
 +
# '''[https://docs.djangoproject.com/en/1.5/intro/tutorial04/ Part 4]'''
 +
#* Write a form that modifies the database
 +
#* Refactor to use generic views
  
Starting in Module 2, we will be using Komodo Edit as our primary development tool.  However, for the purposes of this exercise, we want you to edit your HTML file using a more basic text editor.
+
== Group Project ==
  
* On Windows, consider Notepad++.  This is already installed for you in the CEC labs.  If you prefer to use your personal computer, you can download it from [http://notepad-plus-plus.org/ here].
+
=== Extending the Polls App using Version Control ===
* On Mac OS X, consider TextWrangler.  You can download it from [http://www.barebones.com/products/textwrangler/ here] or from the Apple App Store.
 
* Most Linux distributions come with gedit pre-installed, which you can use for this lab.
 
  
Please save your file as ''birthday.html'' from the plain text editor of your choice.
+
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.
  
'''Important Note:''' Writing your web page in a word processor like Microsoft Word or even WordPad or TextEdit will ''not'' work. What you need is a plain text editor.
+
# Someone in your group needs to copy their tutorial code from the individual portion into the master branch of the group repository.
 +
# After pushing and pulling, everyone should have the up-to-date master branch on their machine.
 +
# Each person in the group should then make a new branch named with their first name.
 +
# Each person can then individually work on their new feature.  Here are some ideas for new features that will all earn full credit.
 +
#: If there is a feature not on this list that you would like to add, save it for the Creative Portion.
 +
#: '''Important: Refer to the grading section for more details on our expectations for the features.'''
 +
#* Enable users to create and edit their own polls
 +
#* Add user accounts.  Polls voted on would be associated with the account.  Note that Django comes built-in with user accounts; you just need to wire a few things up.  Refer to [https://docs.djangoproject.com/en/dev/topics/auth/default/ the Django documentation] for details.
 +
#* Check for double votes using an IP address ''or'' a cookie
 +
#*: ''Food for Thought: What are the pros and cons of using IP addresses to block double votes compared to cookies?''
 +
#* Set a timeout for polls (e.g., ensure that the poll is active for only 7 days)
 +
#* Complete the last two steps of the Django tutorial (unit testing and appearance).
 +
# 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.
  
==== How to View Your HTML Document ====
+
<!--Not doing in summer, lab machines are still missing software.... On Demo Day, you will need to show the branching structure of your repository in SourceTree to the TA. -->
  
Once you have ''birthday.html'', you can open it using your favorite web browser (like Firefox).  For the purposes of this exercise, it suffices to right-click the file and tell it to "open with" Firefox.  When the file opens, it should be under the file:/// protocol.
+
=== Creative Portion ===
  
In Module 2, we will install a web server that serves up pages on the http:// protocol.
+
As your creative portion, you may either add your own feature, or you may add another of the suggested features above.  See the grading section for details.
  
==== Validation ====
+
=== Web Security and Validation ===
  
'''Your birthday card must pass the W3C Validator with no errors.''' From [http://validator.w3.org/ the validator], you can choose to upload your file.
+
Web frameworks take care of a lot of the security practices you learned in modules 2 and 3For more information on Django security, refer to the Django documentation: https://docs.djangoproject.com/en/dev/topics/security/
  
For more information on validation, see the HTML and CSS guide: [[HTML and CSS#Validation]]
+
You still need to ensure that all pages on your site pass the W3C validation.
  
=== Make a Portal to a DuckDuckGo Search ===
+
== Grading ==
  
'''Write an HTML document containing a form that searches DuckDuckGo's web site.''' You should be able to type in a search term and have your form load the DuckDuckGo search page.
+
We will be grading the following aspects of your workThere are 75 points total.
  
# Visit [https://www.duckduckgo.com/ www.duckduckgo.com]. Search for something easy to spot in the URL, like "QUERY".
+
# '''Django Tutorial Steps 1-4 (20 points):'''
# Look at the URL of the search page. What is the script URL?  What is the query variable?
+
#* Database schema and models set up (5 points)
# Make an HTML document containing a text field and a submit button. Typing a search query into the text field and pressing the submit button should load the DuckDuckGo search page.
+
#* Admin page working (5 points)
 
+
#* URL routing is correct (5 points)
== Grading ==
+
#* Correct implementation of MVC (or, shall we say, MTV) architecture (5 points)
 +
# '''Extend Polls Application (45 Points):'''
 +
#* '''''Version Control (15 Points):'''''
 +
#** Each team member has their own branch in Git (5 points)
 +
#** The branching view in SourceTree indicates that features were merged into master as they were completed and from there merged into each member's working branch (10 points)
 +
#* '''''Features (20 Points):'''''
 +
#*: ''The rubric for five features are shown below; each one is worth 10 points. You need only two of the five to satisfy this requirement. Implementation of a third additional feature will count for the Creative Portion; see below for details.''
 +
#** '''Unit Testing and Appearance'''
 +
#*** These are the last two steps of the Django 1.5 tutorial.
 +
#** '''Poll Creation and Editing'''
 +
#*** Users can specify any number of choices for the poll
 +
#*** If the "Timeout" feature is implemented, a timeout can be specified for the poll
 +
#**: ''Note:'' When a poll is edited, you can choose whether to always reset all votes, or whether to keep old votes between edits of the poll.
 +
#** '''User Accounts'''
 +
#*** Users can log in and log out
 +
#*** Votes on polls are associated with a user
 +
#** '''Preventing Double Votes'''
 +
#*** If using the IP-based approach, you store the IP address ''using the correct SQL data type'' (i.e., not a string)
 +
#*** If using the cookie-based approach, your cookie format is not something that the end user can easily figure out and manipulate
 +
#**: ''Note:'' You will not earn credit for implementing both an IP-based and a Cookie-based approach.
 +
#** '''Poll Timeout'''
 +
#*** Polls can have specified start times and end times
 +
#*** The poll entirely shuts down when it is "off" (i.e., the template should not load and the view should not allow more votes to be cast)
 +
#* '''''Best Practices (5 Points):'''''
 +
#** Code is well organized and conforms to Django conventions (3 points)
 +
#** All pages pass the W3C validator (2 points)
 +
#* '''''Usability (5 Points):'''''
 +
#** Site is intuitive to use and navigate (4 points)
 +
#** Site is visually appealing (1 point)
 +
# '''Creative Portion (10 Points):'''
 +
#* Each one of the five features listed in the "Features" section is worth 10 points.
 +
#* A novel feature not listed in the "Features" section may be worth a full 10 points.
  
We will be grading the following aspects of your work.  There are 50 points total.
 
  
# '''Birthday Card (30 Points):'''
+
'''For Clarification Only:'''
#* Correct usage of HTML and CSS in your birthday card (10 points).
+
* Zero Suggested Features = 20 Points Lost in Group Portion
#*: ''Make sure that you use HTML for "content" and CSS for "appearance."  Don't write inline styles: use a stylesheet.''
+
* One Suggested Feature = 10 Points Lost in Group Portion
#* Experimenting with at least 5 different CSS properties in your birthday card (10 points).
+
* Two Suggested Features = No Points Lost in Group Portion
#* Birthday card passes the W3C validation for the declared DOCTYPE (e.g., HTML 5) (10 points).
+
* Three Suggested Features = No Points Lost in Group Portion '''''and''''' 10 Points in Creative Portion
# '''Search Portal (15 Points):'''
+
* Two Suggested Features + a TA-Approved Novel Feature = No Points Lost in Group Portion '''''and''''' 10 Points in Creative Portion
#* DuckDuckGo search portal is functional (15 points).
+
*: ''Note:'' No extra credit will be granted for completion of additional suggested features if your creative portion is already satisfied.
# '''Account Created on Amazon Web Services (5 Points)'''
 
  
[[Category:Module 1]]
+
[[Category:Module 9]]
 
[[Category:Modules]]
 
[[Category:Modules]]

Latest revision as of 13:17, 22 August 2014

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

This article contains your assignments for Module 9.

Reading

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

Individual Assignments

Django Tutorial

The web framework we will be using in Module 9 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. Complete the first four parts of the tutorial for the individual portion. You may complete steps 5 and 6 during the group portion.

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.

Tip: When testing Django on your EC2 instance, make sure to open port 8000 for your instance on AWS (and to click "apply rule changes").

  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.
    If there is a feature not on this list that you would like to add, save it for the Creative Portion.
    Important: Refer to the grading section for more details on our expectations for the features.
    • Enable users to create and edit their own polls
    • Add user accounts. Polls voted on would be associated with the account. Note that Django comes built-in with user accounts; you just need to wire a few things up. Refer to the Django documentation for details.
    • Check for double votes using an IP address or a cookie
      Food for Thought: What are the pros and cons of using IP addresses to block double votes compared to cookies?
    • Set a timeout for polls (e.g., ensure that the poll is active for only 7 days)
    • Complete the last two steps of the Django tutorial (unit testing and appearance).
  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.


Creative Portion

As your creative portion, you may either add your own feature, or you may add another of the suggested features above. See the grading section for details.

Web Security and Validation

Web frameworks take care of a lot of the security practices you learned in modules 2 and 3. For more information on Django security, refer to the Django documentation: https://docs.djangoproject.com/en/dev/topics/security/

You still need to ensure that all pages on your site pass the W3C validation.

Grading

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

  1. Django Tutorial Steps 1-4 (20 points):
    • Database schema and models set up (5 points)
    • Admin page working (5 points)
    • URL routing is correct (5 points)
    • Correct implementation of MVC (or, shall we say, MTV) architecture (5 points)
  2. Extend Polls Application (45 Points):
    • Version Control (15 Points):
      • Each team member has their own branch in Git (5 points)
      • The branching view in SourceTree indicates that features were merged into master as they were completed and from there merged into each member's working branch (10 points)
    • Features (20 Points):
      The rubric for five features are shown below; each one is worth 10 points. You need only two of the five to satisfy this requirement. Implementation of a third additional feature will count for the Creative Portion; see below for details.
      • Unit Testing and Appearance
        • These are the last two steps of the Django 1.5 tutorial.
      • Poll Creation and Editing
        • Users can specify any number of choices for the poll
        • If the "Timeout" feature is implemented, a timeout can be specified for the poll
        Note: When a poll is edited, you can choose whether to always reset all votes, or whether to keep old votes between edits of the poll.
      • User Accounts
        • Users can log in and log out
        • Votes on polls are associated with a user
      • Preventing Double Votes
        • If using the IP-based approach, you store the IP address using the correct SQL data type (i.e., not a string)
        • If using the cookie-based approach, your cookie format is not something that the end user can easily figure out and manipulate
        Note: You will not earn credit for implementing both an IP-based and a Cookie-based approach.
      • Poll Timeout
        • Polls can have specified start times and end times
        • The poll entirely shuts down when it is "off" (i.e., the template should not load and the view should not allow more votes to be cast)
    • Best Practices (5 Points):
      • Code is well organized and conforms to Django conventions (3 points)
      • All pages pass the W3C validator (2 points)
    • Usability (5 Points):
      • Site is intuitive to use and navigate (4 points)
      • Site is visually appealing (1 point)
  3. Creative Portion (10 Points):
    • Each one of the five features listed in the "Features" section is worth 10 points.
    • A novel feature not listed in the "Features" section may be worth a full 10 points.


For Clarification Only:

  • Zero Suggested Features = 20 Points Lost in Group Portion
  • One Suggested Feature = 10 Points Lost in Group Portion
  • Two Suggested Features = No Points Lost in Group Portion
  • Three Suggested Features = No Points Lost in Group Portion and 10 Points in Creative Portion
  • Two Suggested Features + a TA-Approved Novel Feature = No Points Lost in Group Portion and 10 Points in Creative Portion
    Note: No extra credit will be granted for completion of additional suggested features if your creative portion is already satisfied.