Difference between revisions of "Module 9"

From CSE330 Wiki
Jump to navigationJump to search
(Created page with '__NOTOC__ 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…')
 
 
(7 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]]
+
* [[Git]]
−
*[[Express]]
+
* [[Web Frameworks]]
−
*[[AngularJS]]
 
−
*[[Node.js]]
 
  
 +
== Individual Assignments ==
  
−
== Assignments ==
+
<!-- === Learn about Version Control Systems ===
  
−
=== Individual ===
+
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. -->
  
−
'''Write a birthday card to a friend or family member using HTML and CSS.'''  Use HTML to define the content of the card (like the headings and the paragraphs), and use CSS to define the appearance.  Some ideas:
+
=== Django Tutorial ===
  
−
* Make the background-color of the page baby blue and use purple ink to write a card to a little boy
+
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.
−
* Make the text big and red, and include pictures of hearts
 
−
* Use a boxy font with text shadows to make your card look urban (more advanced)
 
  
−
Use this opportunity to experiment with the plethora of CSS properties.  Remember that you're in a computer science class (not an art class), so we don't care if your card looks ugly.  The main thing is that you learn HTML and CSS and use them appropriately.
+
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'''.
  
−
==== How to Edit Your File ====
+
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.
  
−
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.
+
'''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.
  
−
* 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].
+
'''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").
−
* 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.
+
# '''[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
  
−
'''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.
+
== Group Project ==
  
−
==== How to View Your HTML Document ====
+
=== Extending the Polls App using Version Control ===
  
−
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.
+
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.
  
−
In Module 2, we will install a web server that serves up pages on the http:// protocol.
+
# 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.
  
−
==== Validation ====
+
<!--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. -->
  
−
'''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.
+
=== Creative Portion ===
  
−
For more information on validation, see the HTML and CSS guide: [[HTML and CSS#Validation]]
+
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.
  
−
=== Make a Portal to a DuckDuckGo Search ===
+
=== Web Security and Validation ===
  
−
'''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.
+
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/
  
−
# Visit [https://www.duckduckgo.com/ www.duckduckgo.com].  Search for something easy to spot in the URL, like "QUERY".
+
You still need to ensure that all pages on your site pass the W3C validation.
−
# Look at the URL of the search page.  What is the script URL?  What is the query variable?
 
−
# 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.
 
  
 
== Grading ==
 
== Grading ==
  
−
We will be grading the following aspects of your work.  There are 50 points total.
+
We will be grading the following aspects of your work.  There are 75 points total.
 +
 
 +
# '''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)
 +
# '''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.
 +
 
  
−
# '''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.
Retrieved from "http://classes.engineering.wustl.edu/cse330/index.php?title=Module_9&oldid=1763"