CSE330 Wiki - User contributions [en]

Mean Stack

2014-11-17T18:22:38Z

Billy: /* Grading */

__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 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 expose 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.
Follow along the tutorials and complete exercises to learn how things work, and you will be ready to create your own web applications using the MEAN stack very soon!

== Reading ==

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

*[[Preparations]]
*[[Getting MEAN]]
* [[Git]]

== Individual Assignments ==

=== Tutorials ===

Make sure you go through tutorials for both MongoDB and AngularJS, and understand how Express works.

=== Install MEAN ===

The individual and group assignments for this module only require AngularJS and completing the tutorial [https://docs.angularjs.org/tutorial here]. We provide installation instructions for the entire MEAN stack using MEAN.IO as a reference. You do not need to install the MEAN stack for this module (but it is recommended to really understand all of pieces involved).

To 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).
Open up the app in your browser (localhost:3000), and understand what the default app does.

== Group Project ==
* Extended the AngularJS tutorial with additional features.

In the group portion of this module, you will extended the AngularJS tutorial with two additional features. The first is a side-by-side comparison page displaying two products. In the second, you will provide four additional sorting methods for displaying devices on the main product page.

In the side-by-side comparison page, a user will be able to select two devices and view all of their features in a table. This table will consist of three columns. The first column simply lists all of the features of either device (battery, camera, connectivity, hardware, etc ) . The second and third columns will display the information associated with that category for a particular pair of devices, allowing a user to easily compare the same feature across different devices.

The second feature is simply allowing users to sort the devices on additional metrics (in addition to Alphabetical and Newest). Select four different attributes that you want to include to the drop down list on the main page. For example, I may want to sort by by weight or size of battery.

For each feature, create a separate Git branch. Name the first branch SideBySide and the second branch AdditionalSorting. After you complete a feature, merge the branch back to the master branch.



== Grading ==

We will be grading the following aspects of your work. There are 50 points total where 18/50 are extra credit points. To complete this module you must do either the Side-By-Side comparison feature or the Additional Sorting feature. You will receive the points according to the rubric below, and any points over 32/50 will be extra credit.

# '''Completed AngularJS Tutorial (6 Points)'''
# '''Completed Side-By-Side comparison feature (18 points)'''
#* Users can select two different devices and view all of their attributes in a table format.
#* If information for a particular category is not available on one device, display "Not available" in the table
# '''Completed Additional Sorting feature (8 points)'''
#* Users can sort devices based on four different attributes and the attribute values are displayed on the main device list page. (2 points per attribute).
# '''Git Repo (8 points)'''
#* Two branches are created, one for each feature (4 points).
#* Both branches are merged back to the master branch (4 points).
# '''Creative Portion (10 Points)'''

[[Category:Module 7]]
[[Category:Modules]]

Module 4

2014-10-01T02:41:03Z

Billy: /* Output */

__NOTOC__
In Module 4, you will learn the fundamentals of Python, a popular scripting language, and Regular Expressions, which give you power in text processing.

This article contains your assignments for Module 4.

== Reading ==

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

* [[Python]]
* [[Regular Expressions]]

== Individual Assignments ==

=== Learn Python and Regular Expressions ===

Up to this point in CSE 330, you have used only one programming language: PHP. In Module 4, you will learn a new language: Python. Before starting this assignment, you should look over the [[Python|online textbook article about Python]]. Additionally, you may find it helpful to look over the [[Regular Expressions|online textbook article about Regular Expressions]].

=== Write some Regular Expressions ===

Please write regular expressions that do each the following:

# Match an input string that contains at least one occurrence of the string "hello world"
# Find all words in an input string that contain a triple vowel
# Match an input string that is entirely a flight code, of the format AA####, where '''AA''' is a two-letter uppercase airline code, and '''####''' is a three- or four-digit flight number

Save your regexes to a text file. The TA will test them in regexpal on Demo Day.

=== Baseball Stats Counter ===

The St. Louis Cardinals are the most legendary baseball team in the national league. In this exercise, you will be creating a Python script that reads box scores from a file and computes the Cardinals' players' batting averages in a particular season.

==== Tips and Instructions ====

* You should write a Python script file to solve this problem.
* You should use a regular expression to parse players' names, at-bats, hits, and runs from the input file.
* You may want to create a class to hold and compute information about each player.
* Your file should take one command-line argument: the path to an input file. If no path is given, your program should print a usage message.

==== Input ====

Sample input files may be found here: http://classes.engineering.wustl.edu/cse330/content/cardinals/

The top of the file contains a citation, and what follows is an entire season of Cardinals Baseball box scores. Each game starts with a title; for example:

=== St.Louis Cardinals vs. Chicago Cubs, 1940-04-19 ===

What follows are the performance of each player in that game. The format of each line is as follows:

XXX batted # times with # hits and # runs

where '''XXX''' is the player's name (you may assume that the name is unique), and each '''#''' are integers representing the number of "at bats", the number of "hits", and the number of "runs", respectively.

==== Output ====

Your script needs to output all players' batting average across the season. A player's batting average is that player's total hits divided by that player's total at-bats throughout the entire season. For example, Johnny Hopp was at bat 149 times in 1940, and he had 41 hits, so his batting average was 0.275.

Each line in the output should have the format:

XXX: #.###

where '''XXX''' is the player's name, and '''#.###''' is the player's batting average, '''rounded''' (not truncated) to three decimal places.

The players should be sorted by batting average, with the highest batting average on top. If two players have the exact same batting average (before rounding occurs), the order between those two players is unimportant.

For example, the correct output for the 1940 season is:

<source lang="text">
Pepper Martin: 0.316
Walker Cooper: 0.316
Johnny Mize: 0.314
Ernie Koy: 0.310
Enos Slaughter: 0.306
Joe Medwick: 0.304
Terry Moore: 0.304
Joe Orengo: 0.286
Jimmy Brown: 0.280
Marty Marion: 0.279
Don Gutteridge: 0.276
Johnny Hopp: 0.275
Creepy Crespi: 0.273
Mickey Owen: 0.265
Bill DeLancey: 0.250
Don Padgett: 0.242
Stu Martin: 0.238
Eddie Lake: 0.222
Hal Epps: 0.214
Lon Warneke: 0.209
Harry Walker: 0.185
Max Lanier: 0.179
Bill McGee: 0.178
Carl Doyle: 0.174
Mort Cooper: 0.157
Clyde Shoun: 0.145
Carden Gillenwater: 0.130
Bob Bowman: 0.067
</source>

== Grading ==

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

# '''Regular Expressions (15 Points):'''
#* Regular Expression 1 Correct (5 points)
#* Regular Expression 2 Correct (5 points)
#* Regular Expression 3 Correct (5 points)
# '''Baseball Stats Counter (35 Points):'''
#* Solution is written entirely in Python, except with permission from the instructor (8 points)
#* Correct usage of a regular expression to parse each line of the input file (8 points)
#* Script prints a usage message if a command line argument is not present (4 points)
#* Output is correct for the 1940 test case (15 points)
#*: ''This includes sorting and rounding.''

[[Category:Module 4]]
[[Category:Modules]]

Module 4

2014-10-01T02:40:36Z

Billy: /* Output */

__NOTOC__
In Module 4, you will learn the fundamentals of Python, a popular scripting language, and Regular Expressions, which give you power in text processing.

This article contains your assignments for Module 4.

== Reading ==

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

* [[Python]]
* [[Regular Expressions]]

== Individual Assignments ==

=== Learn Python and Regular Expressions ===

Up to this point in CSE 330, you have used only one programming language: PHP. In Module 4, you will learn a new language: Python. Before starting this assignment, you should look over the [[Python|online textbook article about Python]]. Additionally, you may find it helpful to look over the [[Regular Expressions|online textbook article about Regular Expressions]].

=== Write some Regular Expressions ===

Please write regular expressions that do each the following:

# Match an input string that contains at least one occurrence of the string "hello world"
# Find all words in an input string that contain a triple vowel
# Match an input string that is entirely a flight code, of the format AA####, where '''AA''' is a two-letter uppercase airline code, and '''####''' is a three- or four-digit flight number

Save your regexes to a text file. The TA will test them in regexpal on Demo Day.

=== Baseball Stats Counter ===

The St. Louis Cardinals are the most legendary baseball team in the national league. In this exercise, you will be creating a Python script that reads box scores from a file and computes the Cardinals' players' batting averages in a particular season.

==== Tips and Instructions ====

* You should write a Python script file to solve this problem.
* You should use a regular expression to parse players' names, at-bats, hits, and runs from the input file.
* You may want to create a class to hold and compute information about each player.
* Your file should take one command-line argument: the path to an input file. If no path is given, your program should print a usage message.

==== Input ====

Sample input files may be found here: http://classes.engineering.wustl.edu/cse330/content/cardinals/

The top of the file contains a citation, and what follows is an entire season of Cardinals Baseball box scores. Each game starts with a title; for example:

=== St.Louis Cardinals vs. Chicago Cubs, 1940-04-19 ===

What follows are the performance of each player in that game. The format of each line is as follows:

XXX batted # times with # hits and # runs

where '''XXX''' is the player's name (you may assume that the name is unique), and each '''#''' are integers representing the number of "at bats", the number of "hits", and the number of "runs", respectively.

==== Output ====

Your script needs to output all players' batting average across the season. A player's batting average is that player's total hits divided by that player's total at-bats throughout the entire season. For example, Johnny Hopp was at bat 149 times in 1940, and he had 41 hits, so his batting average was 0.270.

Each line in the output should have the format:

XXX: #.###

where '''XXX''' is the player's name, and '''#.###''' is the player's batting average, '''rounded''' (not truncated) to three decimal places.

The players should be sorted by batting average, with the highest batting average on top. If two players have the exact same batting average (before rounding occurs), the order between those two players is unimportant.

For example, the correct output for the 1940 season is:

<source lang="text">
Pepper Martin: 0.316
Walker Cooper: 0.316
Johnny Mize: 0.314
Ernie Koy: 0.310
Enos Slaughter: 0.306
Joe Medwick: 0.304
Terry Moore: 0.304
Joe Orengo: 0.286
Jimmy Brown: 0.280
Marty Marion: 0.279
Don Gutteridge: 0.276
Johnny Hopp: 0.275
Creepy Crespi: 0.273
Mickey Owen: 0.265
Bill DeLancey: 0.250
Don Padgett: 0.242
Stu Martin: 0.238
Eddie Lake: 0.222
Hal Epps: 0.214
Lon Warneke: 0.209
Harry Walker: 0.185
Max Lanier: 0.179
Bill McGee: 0.178
Carl Doyle: 0.174
Mort Cooper: 0.157
Clyde Shoun: 0.145
Carden Gillenwater: 0.130
Bob Bowman: 0.067
</source>

== Grading ==

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

# '''Regular Expressions (15 Points):'''
#* Regular Expression 1 Correct (5 points)
#* Regular Expression 2 Correct (5 points)
#* Regular Expression 3 Correct (5 points)
# '''Baseball Stats Counter (35 Points):'''
#* Solution is written entirely in Python, except with permission from the instructor (8 points)
#* Correct usage of a regular expression to parse each line of the input file (8 points)
#* Script prints a usage message if a command line argument is not present (4 points)
#* Output is correct for the 1940 test case (15 points)
#*: ''This includes sorting and rounding.''

[[Category:Module 4]]
[[Category:Modules]]

Module 3

2014-09-17T04:54:44Z

Billy: /* Grading */

__NOTOC__
In Module 3, you will learn about MySQL, a web application database.

This article contains your assignments for Module 3.

== Reading ==

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

* [[Introduction to MySQL]]
* [[MySQL Schema and State]]
* [[PHP and MySQL]]
* [[Web Application Security, Part 2]]

== Individual Assignments ==

You will create a simple grades database containing four tables.

'''IMPORTANT:''' The individual assignment is to be done by writing queries by hand. (You can use phpMyAdmin to run the queries, but '''do not let phpMyAdmin write your queries for you!''') Writing your own queries gives you a greater understanding of the underlying mechanisms and databases in general. Additionally, having SQL knowledge and experience is a very marketable trait.

=== Install MySQL and phpMyAdmin ===

Before you start, '''you need to install MySQL''' on your EC2 instance. You may also install phpMyAdmin, a web frontend to MySQL, if you choose to do so.

You may find the following article to be very helpful: [[Introduction to MySQL]]

=== Set Up a Database ===

You may find the following article to be very helpful: [[Introduction to MySQL]]

# Create a database named '''wustl'''
# Create a user named '''wustl_inst''' and give them the password '''wustl_pass'''

=== Create Tables ===

You may find the following article to be very helpful: [[MySQL Schema and State]]

When creating tables, keep the following items in mind:

* You should create all tables such that they use the InnoDB storage engine, since we wish to make use of its support of foreign keys. In other database engines, foreign key constraints are not enforced. (If you mess up, you can use ALTER TABLE to change the storage engine.)
* Where it is appropriate, you should take advantage of the ability to define fields NOT NULL so that you do not inadvertently insert incomplete data for a row.

Create the following tables:

# Create a table named '''students''' with the following fields:
#* '''id''' of an appropriately-sized unsigned integer type (we will never need to process more than a million students)
#* '''first_name''' of type '''VARCHAR(50)'''
#* '''last_name''' of type '''VARCHAR(50)'''
#* '''email_address''' of type '''VARCHAR(50)'''
#: The primary key should be on the '''id''' field.
# Create a table named '''departments''' with the following fields:
#* '''school_code''' of type '''ENUM''' (e.g. "L" for ArtSci and "E" for Engineering). The options are as follows:
#*: 'L', 'B', 'A', 'F', 'E', 'T', 'I', 'W', 'S', 'U', 'M'
#* '''dept_id''' of an appropriately-sized unsigned integer type (in the foreseeable future there will never be more than 200 departments in a school)
#* '''abbreviation''' of type '''VARCHAR(9)''' (e.g. CSE, ChemE, etc)
#* '''dept_name''' of type '''VARCHAR(200)''' (e.g. Computer Science and Engineering)
#: The primary key should be on two fields: '''school_code''' and '''dept_id'''
#: '''Note:''' Why not just use the department ID for the primary key? The ID numbers are sometimes reused across schools. For instance, department 33 in The College of Arts and Sciences is Psychology while department 33 in The School of Engineering and Applied Sciences is Energy, Environmental and Chemical Engineering. Thus we must also include the school code to differentiate them such that the record for E33 is distinct from that of L33.
# Create a table named '''courses''' with the following fields:
#* '''school_code''' of type '''ENUM'''
#*: This should have the same letters in the same order as the '''school_code''' '''ENUM''' field in the '''departments''' table.
#* '''dept_id''' of the same size of integer as in the '''departments''' table
#* '''course_code''' of type '''CHAR(5)''' (this will hold course codes; e.g., '330S', '131', '2960')
#* '''name''' of type '''VARCHAR(150)'''
#: The appropriate fields in this table should make a foreign key reference to the corresponding fields in '''department'''.
#: In addition, it is up to you to determine the field(s) for the primary key.
#: '''Note:''' If you are unsure which fields to make the foreign keys and feel the need to beg your friends or the TAs to give you the answer, bang your head on your desk whilst repeating "I WILL EXERCISE REASON AND COMMON SENSE AND I WILL CURTAIL MY DESIRE TO BLINDLY FOLLOW DIRECTIONS"
#: ''Disclaimer: don't actually bang your head on your desk, the resulting head trauma may in fact make it harder for you to determine which fields should have associated foreign keys.''
# Create a table named '''grades''' with the following fields:
#* '''pk_grade_ID''' of an appropriately-sized unsigned integer type (should be larger than the one you chose for the '''students''' table)
#*: You should declare this field to be '''auto_increment''' and make it the primary key.
#*: This is called a ''surrogate key'' as opposed to a ''natural key'' because it doesn't arise "naturally" from the data; that is to say that it is not derived from application data. The use of surrogate keys vs. natural keys is a polemic issue amongst database designers. For a decently unbiased take on the issue, see this page: http://www.agiledata.org/essays/keys.html#Comparison
#*: '''Food for thought:''' Aside from simply exposing you to the concept, can you think of any reasons why a surrogate key might be preferable for this table? Alternatively, what attributes, if any, could you use as a natural key, and what might be the drawbacks of doing so?
#* '''student_id''' of the same integer (unsigned) type that you chose in the '''students''' table
#* '''grade''' of type '''decimal(5,2)'''
#* '''school_code''' of type '''ENUM'''
#*: Can you guess what entries to use for the enum?
#* '''dept_id''' of the same integer type that you've used for this field in other tables
#* '''course_code''' of the same type you chose for the course code in the '''courses''' table
#: The '''grades''' table should have foreign keys to both the '''students''' table and the '''courses''' table.

=== Populate Tables ===

Now, populate the tables by downloading the text files given below and loading them into the appropriate tables.

'''Note:''' Do not insert all the values manually; instead, use the MySQL's ability to load in data from text files.

You may find the following article to be very helpful: [[MySQL Schema and State]]

The files containing the data are:
* students: http://classes.engineering.wustl.edu/cse330/content/students_data.txt
* courses: http://classes.engineering.wustl.edu/cse330/content/courses.txt
* departments: http://classes.engineering.wustl.edu/cse330/content/departments_data.txt
* grades: http://classes.engineering.wustl.edu/cse330/content/grades_data.txt

=== Insert More Data ===

Insert the following data into the tables that you have created and populated:

# Insert an entry for CSE 330
#: ''If you don't know CSE's department code, how can you find out using the tables in the database?''
# Insert the grades given for the students named below. You may choose to make the entries for whichever classes you like, with the one condition that all of the students must have a grade for CSE 330 (who wouldn't want to take that class: I hear the professor and TAs are amazing!)
#* '''Ben Harper'''
#** E-mail: '''bharper@ffym.com'''
#** Student ID: '''88'''
#** Grades:
#*** 35.5 (CSE 330 grade)
#*** 0
#*** 95
#* '''Matt Freeman'''
#** E-mail: '''mfreeman@kickinbassist.net'''
#** Student ID: '''202'''
#** Grades:
#*** 100 (CSE 330 grade)
#*** 90.5
#*** 94.8
#* '''Marc Roberge'''
#** E-mail: '''mroberge@ofarevolution.us'''
#** Student ID: '''115'''
#** Grades:
#*** 75 (CSE 330 grade)
#*** 37
#*** 45.5
#: You may choose any 3 classes you'd like for them to be enrolled in, with at least one class, "CSE 330S", in which they are all enrolled.

=== Querying Your Database ===

Now that you have a fully-functional, populated database, let's do some queries on it!

Please take a screenshot of running the following '''select''' queries and show them to a TA (be sure to include your query command and the response:

# Select the entire grades table.
# Select all fields describing the courses offered in the school of arts and sciences (school code L).
# The names, student IDs, and grades of the students who are in CSE330.
#: '''Note:''' This query should involve joins. You don't need to use any aggregation functions.
# The names, e-mails, and average grades of any student with an average below 50 so that the dean can send them an email notification that they are now on academic probation.
#: ''You should be able to do this in only one query, without making any temporary tables. You will need to use aggregation functions and the '''having''' keyword.''
# An individual report card for Jack Johnson, consisting of his student ID, e-mail address, and average grade.
#: ''Again, you should be able to do this in just one query, using the correct combination of aggregation functions and joins.''
#: '''Note:''' Your query must look for students with the name Jack Johnson instead of hard-coding the student ID.

== Group Project ==

You will work in pairs on this project. You may work with the same partner from Module 2, or change to someone else.

'''Important Reminder:''' frequently commit your work to your subversion repository as a backup!

=== Simple News Web Site ===

'''Examples:'''
* http://digg.com/
* http://slashdot.org/

You should use '''PHP''' unless you get permission to use another web technology from the instructor. You may also use phpMyAdmin to help set up databases.

You may find this wiki article helpful: [[PHP and MySQL]]

==== Requirements ====

* Users can register for accounts and then log in to the website.
* Accounts should have both a username and a ''secure'' password. '''NEVER store plaintext passwords in a database!'''
*: For more information on password security, refer to [[Web Application Security, Part 2#Password Security|the Web Application Security guide]].
* Registered users can submit story commentary and links to those stories.
*: You do not have to make a distinction between the two types of stories, although if you want to, you could do something with this for the creative portion of your project.
* Registered users can comment on any story.
* Unregistered users can only view stories and comments.
* Registered users can edit and delete their stories and comments.
* All data must be kept in a MySQL database (user information, stories, comments, and categories).
* Creative Portion

=== Web Security and Validation ===

No application is finished until much thought is put into web security and best practice. Throughout this course, we heavily emphasize the dogma of [http://coderesponsibly.org/ responsible] coding.

Read this week's Web Application Security guide: [[Web Application Security, Part 2]]. In particular, your project needs to:

* '''Your application needs to be secure from SQL injection attacks'''. If you are using prepared queries, you should already be safe on this front.
* '''Your passwords need to be securely salted''' to prevent rainbow table attacks.
* '''You should pass tokens in forms''' to prevent CSRF attacks.
* '''You should check all preconditions on the server side''' to prevent Abuse of Functionality attacks.

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

* '''Your page should validate''' with no errors through the W3C validator.
* '''Filter Input and Escape Output''', but not the other way around.

== Grading ==

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

# '''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 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 (2 points)
#** Site follows the FIEO philosophy (3 points)
#** All pages pass the W3C validator (2 points)
#** CSRF tokens are passed when creating, editing, and deleting comments and stories (5 points)
#* '''''Usability (5 Points):'''''
#** Site is intuitive to use and navigate (4 points)
#** Site is visually appealing (1 point)
# '''Creative Portion (15 Points)''' (see below)
#* '''''Make sure you have a creative.txt file in your group repo with the following:'''''
#** Names and Student IDs of all the group members
#** A link to your running ec2 instance
#** A brief description of what you did for your creative portion
#** Any additional login details needed for the TA

[[Category:Module 3]]
[[Category:Modules]]

Amazon Web Services

2014-09-03T04:17:17Z

Billy: /* Creating and Configuring your EC2 Instance */

Amazon Web Services provides a method to publish web sites on virtual machines in the "cloud." In CSE330, you will be using an EC2 instance to host your web site.

Before reading this guide, you should be familiar with Linux and the various distributions of Linux. Fore more information, refer to [[Linux#Linux Distributions|the Linux guide]].

== Creating and Configuring your EC2 Instance ==

{{RequiredInstructions|content=

Follow these steps to get to the AWS Management Console:

# Create an AWS account: http://aws.amazon.com/
# Sign up for the EC2 Web Service: http://aws.amazon.com/ec2/
# Log in to the AWS Management Console

To create your new virtual machine, click '''Launch Instance'''. Do the following to configure your instance:

# Use the Classic Wizard.
# Now choose what distribution of Linux you would like to use. For more information on distributions, refer to [[Linux#Linux Distributions|the Linux guide]]. The following are both good choices, and throughout the wiki, the instructions are equally comprehensive for both. This semester, we will be teaching this class using Ubuntu, but you are free to use either one.
#* Ubuntu Server 14.04 LTS (based on Debian)
#* Amazon Linux AMI (based on RHEL)
# The default instance variables are all fine. Click Continue until you get to the "Create Key Pair" screen.
# Create a new Key Pair. Enter some name for it, and then click "Create & Download your Key Pair". '''Save your key somewhere secure.''' In addition to using it to authenticate for this instance, you will be able to use the same key for additional instances.
# Create a new Security Group and connect it to your server. The security groups you create determine whether a port is open or blocked for your server.
#* You need to open the SSH port on your server. To do this, select "SSH" from the drop-down box, and then click "Add Rule."
#: We will be opening more ports by modifying the security group at a later time. Click Continue.
# You are now ready to launch your virtual server! Click Launch.

}}

== Starting and Stopping your EC2 Instance ==

You can start and stop your instance by right-clicking on the instance. The options are down in the "Instance Lifecycle" section.

=== Amazon EC2 Gives You One Free Micro Instance ===

It is free to keep '''''one''''' micro instance running at all times. Keeping your instance running around the clock will make your life easier, because then you won't need to always change your hostname in your SSH clients.

For additional Micro instances, or for larger instances, you will be charged hourly for their use. One non-free Micro instance costs about $14/month; a Small instance costs about $43/month.

=== Terminate vs Stop ===

Never "terminate" your instance, as this PERMANENTLY DELETES the instance! Any time you are done using the instance you should instead "stop" the instance and then when you are ready to resume work you should "start" the instance.

'''Note:''' Frequently committing your work to your repository is a safety net in case something horrible happens to your instance.

== Enabling Web Access to your EC2 Instance ==

{{RequiredInstructions|content=

Once you have configured [[Apache]] (which you will do later in this Module), you will need to open up your EC2 instance to web traffic. (By default amazon blocks all traffic to our instance.)

Go to the Security Groups under Network & Security on the EC2 webpage. Select your security group, click on the Inbound Tab. Add a new Custom TCP rule with a Port range of 80. Leave the Source at 0.0.0.0/0 (for all traffic). Click Add Rule, and then click Apply Rule Change.

To make sure things are working, create a file, like '''hello.txt''', in your web server root. Give it some content (might I suggest "Hello, world!").

* In the Amazon AMI, the web server root is at /var/www/html
* In Ubuntu 12.04 LTS, the web server root is at /var/www

For more information on editing files on the command line, refer to [[Linux#File Editors|the Linux guide]].

You should now be able to visit your server load up the file using your web browser! Example Link: http://ec2-xxx-xxx-xxx-xx.compute-1.amazonaws.com/hello.txt

}}

[[Category:Module 2]]

HTML Forms

2014-09-02T02:22:24Z

Billy: /* Code Example */

The contents of a web page often changes depending on how you requested that page. For example, when you perform a web search, the contents of the search list changes depending on your query. This is done by way of HTTP request variables (aout which you will learn more in Module 2).

The most fundamental way to make a web page sent HTTP request variables to another page is by using HTML Forms. This article describes this process and how to implement it in your code.

== HTTP Request Variables ==

Visit your favorite search engine, and search for "QUERY". Now, look at your address bar. Can you find your query "QUERY" somewhere in the URL?

Your search engine probably used an HTTP Request Variable to send your desired query to the search page. Here is how it might have worked:

[[File:HTMLForm.png]]

You can see that we didn't just go to example.com/search; we also incorporated the search query into the '''query string''' of the URL, where query stream

=== Code Example ===

The syntax for making a form in HTML is relatively straightforward. The HTML for the above example could be:

<source lang="html4strict">
<form action="http://example.com/search" method="GET">
<label>Search Query: <input type="text" name="q" /></label>
<input type="submit" value="Search" />
</form>
</source>

The '''<label>''' tag above allows text to "label" an input field. When anything in the label is clicked, the input field will become focussed.

== HTTP Request Methods ==

In the above example, we used the GET method for transferring variables from our form to our destination page. There are two widely supported options for transferring the variables:

# '''GET''' transfers the variables in the URL.
# '''POST''' transfers the variables as an HTTP header.

What does "as an HTTP header" mean?

=== HTTP Headers ===

Whenever you request a page on the http:// protocol, your browser sends a ''request header''. Your browser responds with a ''response header'' followed by the content of your page. You never see the request or response headers unless you have tools that let you see them.

To let you have an idea, here are the request and response headers when I visit http://www.w3.org/ in Firefox:

'''Request Headers:'''
<source lang="text">
GET / HTTP/1.1
Host: www.w3.org
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.7; rv:19.0) Gecko/20100101 Firefox/19.0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: en-US,en;q=0.5
Accept-Encoding: gzip, deflate
Connection: keep-alive
If-Modified-Since: Sat, 16 Mar 2013 09:16:37 GMT
If-None-Match: "8c8c-4d80736774740;89-3f26bd17a2f00"
Cache-Control: max-age=0
</source>

'''Response Headers:'''
<source lang="text">
HTTP/1.1 200 OK
Date: Sat, 16 Mar 2013 19:42:55 GMT
Server: Apache/2
Content-Location: Home.html
Vary: negotiate,accept
TCN: choice
Last-Modified: Sat, 16 Mar 2013 09:16:37 GMT
Etag: "8cc6-4d80736774740;89-3f26bd17a2f00"
Accept-Ranges: bytes
Content-Length: 36038
Cache-Control: max-age=600
Expires: Sat, 16 Mar 2013 19:52:55 GMT
P3P: policyref="http://www.w3.org/2001/05/P3P/p3p.xml"
Connection: close
Content-Type: text/html; charset=utf-8
</source>

You can see that in the request header, information is sent about what browser and operating system I'm using (my ''user agent''), what language I prefer (in my case, ''en-US''), and the like. If you have cookies for a site, they get transfered via a request header. In the response header, we can see that the request was successful (HTTP code 200), that I am receiving an HTML document with the UTF-8 charset (in ''Content-Type''), and other various information. All of these headers are standard; you can implement less-common headers as well.

=== When to use GET vs. POST ===

Here are some rules of thumb to help you decide whether to use GET or POST for a certain form.

* If you would like the user of your application to be able to ''bookmark the destination page'' for later use (e.g. search results), you need to use '''GET''', because the bookmark will contain the entire URL, including the request variables.
* If you are transmitting ''sensitive information'' like passwords, you should use '''POST''', because POST variables will not appear in a user's browsing history, but GET variables will.
* If the data you are transmitting is large (over about 200 bytes), you need to use '''POST''', since some browsers will truncate the URL string after 256 characters.
* If the destination page takes the information from the form and modifies something in a database, it is best practice to use '''POST'''.

=== Technicalities ===

Although it is safe to think about POST variables as being transmitted as a header, this is technically not the case. In reality, POST variables are sent in the request body. The server knows to read the POST variables from the request body because of a '''application/x-www-form-urlencoded''' request content type header.

Additionally, there has been a recent resurgence in so-called [[wikipedia:CRUD|CRUD]]; that is, additional HTTP request types beyond GET and POST: PUT, DELETE, OPTIONS, etc. CRUD request types are beyond the scope of this course, but it is worth the time reading up on their meaning if you find yourself working with a RESTful web framework like Ruby on Rails.

== Input Types ==

In the example above, we used just two input types: a '''text''' field and a '''submit''' button. In reality, there are over 20 different types. Some of the more common types include:

* '''hidden:''' allows for a variable to be passed as part of a form without requiring that the user input any data.
* '''password:''' allows for text to be hidden while typed.
* '''number:''' like a text box, but forces the content to be numerical.
** ''Note:'' You can set the '''step''', '''min''', and '''max''' attributes on your '''number''' input to change the precision of the number accepted. For example, the following input field would accept only integers between 0 and 100 inclusive:
**: <source lang="html4strict"><input type="number" name="percentage" step="1" min="0" max="100" /></source>
* '''checkbox:''' a yes-or-no checkbox.
* '''radio:''' a multiple-choice question. Use multiple input fields, all with the same ''name'' but different ''value''.
* '''file:''' allows for file uploads. (We will deal with this more in module 2.)

For a complete list, see [http://www.w3.org/TR/html5/forms.html#the-input-element section 4.10.7 of the HTML5 spec].

[[Category:Module 1]]