CSE330 Wiki - User contributions [en]

Module 7

2017-04-07T01:28:37Z

James: /* Grading */

__NOTOC__
This module will be teaching “Angular JS,” a framework that works with Javascript and HTML to create a front-end of a website much easier and faster. It is part of the oft-used “MEAN stack,” which is a stack that entirely uses Javascript, for the database, back-end, and front-end.

== Optional Reading ==
To learn more about the MEAN stack, as well as using Git to do more than check out and commit repos, check out the old module 7 reference pages:
*[[Git]]
*[[Preparations]]

== Individual Assignment ==
In this assignment you will build an Angular website. To learn Angular, please view and complete [https://code.angularjs.org/1.4.7/docs/tutorial this] tutorial, and focus on steps 0-10. The other steps and the tests at the bottom of each step are helpful and to master Angular you will need to learn these. However, for this module, you are not required to do these parts.

Now that you have finished the tutorial, we will make a coffee rating website!

=== Setting up ===
To help you get started, download a skeleton on which you will build your angular app on, called Angular-Seed. Go [https://github.com/angular/angular-seed/blob/master/README.md here] and follow the instruction to download the seed, naming your project ‘coffees’.

'''Note:''' If you are running the Angular-Seed project from EC2, open the '''package.json''' file in the coffees directory

Find the line that says

<source lang="bash">"start": "http-server -a localhost -p 8000 -c-1", </source>

and change it to

<source lang="bash">"start": "http-server -p 8000 -c-1",</source>

This will allow for connections other than just localhost.

'''Note''': Although you can ignore a lot of these files (the node directory, the karma files, view1/view2, etc), by downloading the seed you can get around issues such as creating the server (this does it for you), and if you were going to use a backend, having node all set up for you is really nice.

Now that you’ve downloaded the seed, you will need to modify the following files: app.js, and index.html. Furthermore, you will add the following files: coffees.html, and reviews.html.

=== Creating the Site ===

Your site will need to use ‘ngRoute’ with two views on top of index.html. One view (coffees.html) will be a list of all coffees in the database, sorted by name. There should be a search box at the top to find a particular coffee. Each listing in the table should include a brand, a name, a location, and a link to see the reviews of that coffee. Here’s what it should look like before CSS:

[[File:Coffees-bare (2).png|upright=2|thumb|center|coffees.html]]

Once you click the link, it should go to the second view (reviews.html). This should be another table, of all of the reviews for the coffee list.

Here’s what your reviews.html should look like before CSS:

[[File:reviews-bare.png|thumb|upright=2|center|reviews.html]]

At all times, there should be a button at the top (not in either view, but in the main page) that takes you home (coffees.html).
In app.js, you will need to copy the following array into your controller:

$scope.coffees =
[
{'id': 1,
'brand': "Average Andy's Coffee",
'name': 'Regular Coffee',
'country': 'Denmark',
'reviews': [
{'rating': 3,
'comment': "Could've been crispier",
'reviewer': "Chris P. Bacon"
}
]
},
{'id': 2,
'brand': "Jimmy's Coffee",
'name': 'Mocha',
'country': 'America',
'reviews': [
{'rating': 10,
'comment': 'What everyone should drink in the morning!',
'reviewer': 'Earl Lee Riser'
},
{'rating': 10,
'comment': 'A genius of everything coffee',
'reviewer': 'Bob'
}
]
},
{'id': 3,
'brand': "We Did Our Best",
'name': 'Latte',
'country': 'France',
'reviews': [
{'rating': 1,
'comment': " a 'latte' yuckiness.",
'reviewer': 'Tim Burr'
},
{'rating': 1,
'comment': 'Is this even coffee?',
'reviewer': 'Sue Flay'
},
{'rating': 1,
'comment': 'The grossest thing I have ever had.',
'reviewer': 'Myles Long'
},
{'rating': 5,
'comment': 'I dont know what the fuss is about, i dont think its too bad!',
'reviewer': 'Sara Bellum'
}
]
},
{'id': 4,
'brand': "Jimmy's Special Coffee",
'name': 'Americano',
'country': 'America',
'reviews': [
{'rating': 10,
'comment': 'If I could rate it higher, I would!',
'reviewer': 'Justin Case'
},
{'rating': 10,
'comment': 'He does it again!',
'reviewer': 'Eileen Dover'
}
]
}];

This will be your “database,” as we are not going to use the “$http” dependency.

=== Style ===

Finally, use CSS (and, if you'd like to make it easier on yourself), UI Bootstrap (view the reference [https://angular-ui.github.io/bootstrap/ here] ), to make the site look pretty.
Although you’re allowed to use whatever CSS/Bootstrap you want, UI Bootstrap makes things really easy. For example, using stars in the rating directives to display ratings instead of a number.

Please follow the installation instructions carefully. Type the following in your command file from the coffees directory:
npm install -g bower
bower install angular-bootstrap

The following should be in your index.html *before you include app.js, but after you put the source files for bower_components/angular...* if you are using UI Bootstrap:

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src= "bower_components/angular-bootstrap/ui-bootstrap.js"></script>
<script src= "bower_components/angular-bootstrap/ui-bootstrap.min.js" type="text/javascript"></script>
<script src= "bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js" type="text/javascript"></script>

After installing and configuring your own css/bootstrap, your coffee site may look something like this (although it can look any way you want, this was just one person's design):

[[File: Coffee-css.png|thumb|upright=2|none|Coffee page]]
[[File: Reviews-css.png|thumb|upright=2|none|Review page]]

== Grading ==

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

'''Assignments must be committed to Bitbucket by the end of class on the due date (commit early and often). Failing to commit by the end of class on the due date will result in a 0.'''

#''You must save your repo as:''
#*"<Season><year>-Module<#>-StudentID"
#*(ie. Spring2025-Module3-201343)

___________

# '''Completed Google Angular Tutorial steps 0-10 (5 points)'''
# '''Completed coffee web application (50 points)'''
#* Index.html (5 points)
#** Working button with back to home button at all times (3 points)
#** Set up Angular correctly (2 points)
#* App.js (10 points)
#** Set up module ( 5 points)
#** Controller (5 points)
#*** Have one or two controller(s) for the project ( 2 points)
#*** Use scope injection (3 points)
#* Coffees.html (15 points):
#** List of all coffees sorted by name (3 points)
#** Search bar, working correctly (4 points)
#** Has Name, Brand, Location, and Review link all displayed in one table (3 points)
#** Review link works, and takes you to another view (5 points)
#* Reviews.html
#** Reviews of correct coffee, and only correct coffee, are listed (10 points)
#** All reviews are listed ( 2 points)
#** Rating, comment, and commenter are listed in the same table. (3 points)
#* BootStrapping
#** Site looks good, intuitive, and professional ( 5 points)

___________

'''Creative Project Rubric'''

You will also be submitting your Creative Project rubric alongside Module 7. Make a new repo <Season><year>-CP-StudentID1-StudentID2, and place your Creative Project rubric in a README.md in that repository.

Your Creative Project point breakdown should total to 95 points. An additional 5 points come from submitting the rubric on time. You may assign up to 20 points for the creative portion.

The project itself, you will be using a new framework or technology of your choice to build a project.

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

Module 4

2017-03-27T14:22:27Z

James: /* Write some Regular Expressions */

__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]]. You should be using version 3 (or greater) of 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 the string "hello world" in a sentence
# 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
Examples:
Note: text in ''[[red]]'' is matched by the regular expression. Each line is a separate test input string.
Regex 1: Programmers will often write ''[[hello world]]'' as their first project with a programming language.
Regex 2: The ''[[gooey]]'' peanut butter and jelly sandwich was a ''[[beauty]]''.
Regex 3: ''[[AA312]]''
''[[AA1298]]''
''[[NW1234]]''
''[[US443]]''
US31344
AA123 extratext

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.

'''Assignments must be committed to Bitbucket by the end of class on the due date (commit early and often). Failing to commit by the end of class on the due date will result in a 0. '''

Upload your baseball code, a file with your Regular expressions, and a screenshot of your python output onto bitbucket, and we will use the time-stamps to determine late-penalties.

#''You must save your repo as:''
#*"<Season><year>-Module<#>-StudentID"
#*(ie. Spring2025-Module3-201343)

'''If you do not name your repo correctly, the TA's are not responsible for grading your assignment. If we cannot find it, you will receive a zero.'''

# '''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 (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]]

Node.JS

2017-03-27T00:39:00Z

James: /* Node.js Conventions */

AJAX is a useful technology for web applications that need to pull periodic updates from your server. But what do you do when you have thousands of clients all requesting data that changes real-time? A PHP+AJAX approach could choke without a lot of effort on your part. It is situations like these that Node.js comes to the rescue. Node.js is a web framework, made in JavaScript, that's become extremely popular over the last few years.

In general, JavaScript frameworks are very trendy right now; it can be hard to keep up with the new cool thing. In fact, there's a joke website https://dayssincelastjavascriptframework.com/, that "tracks" how long it's been since a new framework has come out.

== Non-Blocking I/O ==

You dabbled in the concept of non-blocking I/O when you implemented AJAX in the previous JavaScript module. Node.js uses this execution model at its core.

The core idea is the use of '''''anonymous functions''''' as ''callbacks'' for processing the results of intensive operations. Consider the pseudo-code:

<source lang="javascript">
// Blocking I/O Pseudo-Code

var data = database.query("select * from news");
print data[0].title;
</source>

The above pseudo-code queries a database, saves the result of the query in a variable named ''data'', and then prints out the first title in ''data''. The problem arises when multiple clients all want to access the server at the same time. ''In a blocking I/O model, a client needs to wait until all other clients are finished before it can start its process.'' With intensive operations and thousands of clients, this can easily crash your server!

The solution is to use ''non-blocking I/O''. Consider this revised pseudo-code:

<source lang="javascript">
// Non-Blocking I/O Pseudo-Code

database.query("select * from news", function(data){
print data[0].title;
});
</source>

The revised pseudo-code achieves the same end result as the first version. However, ''it allows other clients to perform tasks while this process is waiting for the database to be queried!'' The code occurs in two parts: first, we start the query. Second, ''when the query is complete'', our '''anonymous callback function''' is executed. In Node.js, callback functions are usually passed one or more parameters.

Better yet, with non-blocking I/O, you have no concurrency issues, because everything runs in just one thread. Nifty!

== Installing Node.js ==

You can get Node.js from yum or apt-get, but the versions are going to be out dated. Remember that Node.js is a rapidly changing framework, so a version of Node from last year is going to be drastically different than a version of Node today.

The unofficial instructions for installing Node.js can be found here: https://gist.github.com/isaacs/579814

There are several choices, but my favorite is probably ''use-nave-no-shell.sh''.

The instructions at the above link have a couple bugs. If you run this sequence of commands, Node and NPM will install correctly:

<source lang="bash">
$ mkdir ~/.nave
$ cd ~/.nave
$ wget http://github.com/isaacs/nave/raw/master/nave.sh
$ sudo ln -s $PWD/nave.sh /usr/local/bin/nave
$ chmod a+x nave.sh
$ sudo chown -R $USER:$USER /usr/local
$ nave usemain stable
$ curl -L https://www.npmjs.org/install.sh | sh
</source>

== Your First Node.js Application: Hello World ==

Let's try running the example application given on the front page of nodejs.org:

<source lang="javascript">
var http = require('http');
http.createServer(function (req, res) {
res.writeHead(200, {
'Content-Type': 'text/plain'
});
res.end('Hello World\n');
}).listen(3456);
console.log('Server running at http://localhost:3456/');
</source>

Paste the example into a file named `hello.js`, and then run it by calling `node hello.js`. You should now be able to see your Hello World by visiting your server at port 3456! (Press ^C to stop the application.) '''Note:''' If you're running the code from your EC2 instance, you will need to open port 3456.

Let's walk through each line in the above example.

* <code>var http = require('http');</code> enables us to use Node's built-in HTTP server. We've been spoiled that languages like PHP automatically load all of the libraries that we need. However, '''''most functionality in Node.js is NOT loaded by default.''''' When you want to use any non-fundamental feature of Node, you need to ''require'' it into a variable, as this example does with the HTTP package. You should be familiar with this concept when you needed to use ArrayList and other specialty packages in Java in CSE 132.
* <code>http.createServer(function (req, res) { ... }).listen(3456);</code> uses the HTTP server API to listen for HTTP connections on port 3456. The anonymous callback function will be called whenever a connection is made.
* <code>res.writeHead(200, { 'Content-Type': 'text/plain' });</code> specifies the Content-Type header to be "text/plain".
* <code>res.end('Hello World\n');</code> writes "Hello World" to the response.

Note the use of non-blocking I/O, even in this one little example. ''Whenever a connection is made, the callback function will be called and passed parameters associated with that connection.''

== A Static File Server Using Node.js ==

Node.js does not automatically serve up static files in the way that an Apache/PHP does. We need to either use an extension that handles this for us, like Express, or we need to write our own code to make a simple static file server. The latter option is really not all that difficult, and it gives good insight into how a static file server works.

=== Installing Packages ===

In order for the example code below to work, you need to install the ''mime'' package. To do this, '''cd to the working directory where you will save your Node.js JavaScript file''' and run:

<source lang="bash">$ npm install mime</source>

''npm'' is the package manager for Node.js. Unlike all of the package managers we've used up to this point, ''npm'' installs dependencies locally, ''not'' globally. This means that you can have two different projects using different versions of the same package. ''npm'' will create a ''node_modules'' directory in the CWD and will install the packages into it.

'''Note:''' When using npm to install local dependencies, '''''do not use sudo'''''. It will screw up your file permissions.

=== Static Fileserver Code ===

The following code will make an HTTP server on port 3456 that serves up all static files in <STATIC DIRECTORY NAME> relative to app.js.

'''Make an attempt to understand this code.''' It's important that you are comfortable with the non-blocking nature, as well as how we handle file I/O.

<source lang="javascript">
// Require the functionality we need to use:
var http = require('http'),
url = require('url'),
path = require('path'),
mime = require('mime'),
path = require('path'),
fs = require('fs');

// Make a simple fileserver for all of our static content.
// Everything underneath <STATIC DIRECTORY NAME> will be served.
var app = http.createServer(function(req, resp){
var filename = path.join(__dirname, "<STATIC DIRECTORY NAME>", url.parse(req.url).pathname);
(fs.exists || path.exists)(filename, function(exists){
if (exists) {
fs.readFile(filename, function(err, data){
if (err) {
// File exists but is not readable (permissions issue?)
resp.writeHead(500, {
"Content-Type": "text/plain"
});
resp.write("Internal server error: could not read file");
resp.end();
return;
}

// File exists and is readable
var mimetype = mime.lookup(filename);
resp.writeHead(200, {
"Content-Type": mimetype
});
resp.write(data);
resp.end();
return;
});
}else{
// File does not exist
resp.writeHead(404, {
"Content-Type": "text/plain"
});
resp.write("Requested file not found: "+filename);
resp.end();
return;
}
});
});
app.listen(3456);
</source>

=== Port 3456 ===

We are running our server on port 3456 as opposed to the default web server port, which of course is 80. We therefore need to open our Node.js application like this:

http://ec2-xx-xx-xx-xx.compute-1.amazonaws.com:3456/path.extension

However, this won't work on the first time. ''Why?'' (Try to figure this out on your own before reading the next paragraph.)

We need to open port 3456 on our Amazon EC2 instance. Remember when you opened port 80 way back in Module 2? We need to do the same sort of procedure again now.

# Log into your EC2 management console
# Go to "Security Groups"
# Select your security group from Module 2
# Under "Inbound", create a custom TCP rule for port 3456, and apply your changes.

== Node.js Security ==

Just because we're writing in JavaScript doesn't mean that we can forget about the security practices you've been learning in the last three months of CSE 330. XSS is still a problem, as is the use of ''eval'', CSRF attacks, and so on.

The two links below have good information about security vulnerabilities specific to Node.js that you should think about when crafting your application.

# Book from PragProg ($24, 2015): https://pragprog.com/book/kdnodesec/secure-your-node-js-web-application
# Slideshow from a Switzerland Conference on Application Security (2012): http://www.slideshare.net/ASF-WS/asfws-2012-nodejs-security-old-vulnerabilities-in-new-dresses-par-sven-vetsch

== Node.js Conventions ==

There ought to be a standard way to save metadata about your app, right? Well, ''npm'' introduces a straightforward way to do this in the form of a ''package.json'' file.

To make your ''npm'' file with a step-by-step prompt, run in your project root directory:

<source lang="bash">
$ npm init
</source>

One nifty feature of ''package.json'' is the way it automatically handles dependencies. For example, you can put the following lines in your ''package.json'':

<source lang="javascript">
"dependencies": {
"mime": "~1.2.11",
"socket.io": "~0.9.16"
},
</source>

Then, back on the command line, when you run

<source lang="bash">
$ npm install
</source>

it automatically installs the dependencies for you! No more headaches of trying to figure out which modules you need to install; all that information is saved for you in your code base.

'''Tip:''' Once you set up your ''package.json'' file, you can automatically add a dependency to it by using the ''--save'' argument on ''npm install'': <code>npm install --save socket.io</code>

[[Category:Module 7]]

Module 3

2017-02-20T21:21:33Z

James: /* 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.

=== 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 330S
#: ''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 330S (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 330S grade)
#*** 0
#*** 95
#* '''Matt Freeman'''
#** E-mail: '''mfreeman@kickinbassist.net'''
#** Student ID: '''202'''
#** Grades:
#*** 100 (CSE 330S grade)
#*** 90.5
#*** 94.8
#* '''Marc Roberge'''
#** E-mail: '''mroberge@ofarevolution.us'''
#** Student ID: '''115'''
#** Grades:
#*** 75 (CSE 330S 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 commit them with the rest of your repository (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 CSE330 grades of the students who are in CSE330S.
#: '''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 Git 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.
*: A link can be associated with each story, and they should be stored in a separate database field from the story
* 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 links).
* 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.

'''Assignments must be committed to Bitbucket by the end of class on the due date (commit early and often). Failing to commit by the end of class on the due date will result in a 0. '''

#''You must save your repo as:''
#*"<Season><year>-Module<#>-StudentID"
#*(ie. Spring2025-Module3-201343)
#''For the group project, you must save your repo as:''
#*"<Season><year>-Module<#>-StudentID1-StudentID2"
#*(ie. Spring2025-Module3-201343-314450)

'''If you do not name your repo correctly or if you fail to share it with cse330, the TAs are not responsible for grading your assignment. If we cannot find it, you will receive a 0.'''

________

# '''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, and the screenshots of the structure are committed to BitBucket (4 points)
#*: ''Note: To demonstrate the structure of your tables, you should include either a file containing the output of the <code>SHOW CREATE TABLE</code> command or a screenshot of the result of running that command '''for each table.'''''
#* The output of each of the five queries is correct, and screenshots of the result of running each query are committed to BitBucket. (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 and salted (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, and they should be stored in a separate database field from the story (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, with proper commenting (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 README.md file in your group repo with the following:'''''
#** Names and Student IDs of all the group members
#** A link to your homepage of the site
#** A brief description of what you did for your creative portion
#** Any additional login details needed for the TA

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

Module 3

2017-02-07T16:08:30Z

James: /* Querying Your Database */

__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.

=== 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 330S
#: ''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 330S (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 330S grade)
#*** 0
#*** 95
#* '''Matt Freeman'''
#** E-mail: '''mfreeman@kickinbassist.net'''
#** Student ID: '''202'''
#** Grades:
#*** 100 (CSE 330S grade)
#*** 90.5
#*** 94.8
#* '''Marc Roberge'''
#** E-mail: '''mroberge@ofarevolution.us'''
#** Student ID: '''115'''
#** Grades:
#*** 75 (CSE 330S 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 commit them with the rest of your repository (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 CSE330 grades of the students who are in CSE330S.
#: '''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 Git 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.
*: A link can be associated with each story, and they should be stored in a separate database field from the story
* 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 links).
* 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.

'''Assignments must be committed to Bitbucket by the end of class on the due date (commit early and often). Failing to commit by the end of class on the due date will result in a 0. '''

#''You must save your repo as:''
#*"<Season><year>-Module<#>-StudentID"
#*(ie. Spring2025-Module3-201343)
#''For the group project, you must save your repo as:''
#*"<Season><year>-Module<#>-StudentID1-StudentID2"
#*(ie. Spring2025-Module3-201343-314450)

'''If you do not name your repo correctly, or share it with cse330, the TA's are not responsible for grading your assignment. If we cannot find it, you will receive a zero.'''

________

# '''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, and they should be stored in a separate database field from the story (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, with proper commenting (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 README.md file in your group repo with the following:'''''
#** Names and Student IDs of all the group members
#** A link to your homepage of the site
#** A brief description of what you did for your creative portion
#** Any additional login details needed for the TA

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

Module 2

2017-01-27T14:22:14Z

James: /* Grading */

__NOTOC__
Module 2 introduces you to Linux, a command-line environment, the Apache web server, and PHP. You will create and configure your own cloud instance, install Apache and related software, and then form groups to make a simple file sharing site.

<span style="font-size:1.3em; line-height:1.2em; color:blue;">'''DO NOT WAIT UNTIL THE LAST MINUTE TO START ON THIS (or any) MODULE!''' The most common reason students perform poorly in this class is procrastination. You have been warned.</span>

== Reading ==

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

* [[Linux]]
* [[Bash]]
* [[Amazon Web Services]]
* [[SSH]]
* [[Apache]]
* [[PHP]]
* [[Workflow]]
* [[Web Application Security, Part 1]]

== Individual Assignments ==

{{RequiredInstructions|content=

<span style="color:red">There are a lot of wiki pages that you need to read in order to complete the individual portion of Module 2. The wiki pages contain an assortment of required steps, optional steps, and information. To make things easier, we have highlighted the ''required steps'' with a red bar, like you see on the left of this message. Do not skip anything marked with a red bar, or else you will not have a perfectly configured instance.</span>

}}

=== Learn About Linux ===

Linux is an open-source operating system based on UNIX. Linux is highly versatile and is used in a wide range of applications.

If you are not a Linux guru, read the Linux guide to get started: [[Linux]]

=== Install Cygwin: Windows Users Only ===

You will need Cygwin in order to log into and configure your EC2 instance. Cygwin is already installed on the CEC machines. Instructions for installing Cygwin on your personal machine are located in [[Workflow#Cygwin|the Workflow guide]].

Mac OS X users should located the "Terminal" application, which is installed by default; you will need this in the coming steps.

=== Create an AWS EC2 Instance ===

Once you understand [[Linux]], you need to set up your Amazon EC2 Instance. Use the AWS article to guide you through the process: [[Amazon Web Services]]

=== Configure SSH ===

Follow the instructions in [[SSH#SSH Configuration|the SSH guide]] to do the following:

# Create your own SSH key pair
# Log in as the default user to your EC2 instance
# Create a new user
# Give the new user your SSH public key

From now on, when you need to log into your EC2 instance as an administrator, just pop up a terminal and run:

<source lang="bash">
$ ssh your-username@ec2-xx-xx-xx-xx.compute-1.amazonaws.com
</source>

=== Install Essential Packages ===

Recall that software installation in Linux instances is usually handled through '''apt''' (Debian) or '''yum''' (RHEL). For more information, refer to [[Linux#Repository-Based Package Managers|the Linux guide]].

To make sure everything is working properly, '''install your first package(s) according to the ''Essential Packages'' subsection in the Linux guide.'''

=== Set the Timezone ===

'''Set your server to use US Central time (America/Chicago).''' Instructions are in the Linux guide: [[Linux#Synchronizing Date and Time]]

=== Set Up the Apache Web Server ===

You need to '''install the Apache web server on your EC2 instance'''. Refer to [[Apache|the Apache guide]].

In order for your web server to be accessible, you need to '''open up Port 80 on your EC2 instance'''. Instructions are in the AWS guide: [[Amazon Web Services#Enabling Web Access to your EC2 Instance]]

'''Enable the UserDir module in Apache.''' Instructions are in the Apache guide: [[Apache#The UserDir Module]]

=== Install PHP ===

You need to '''install PHP on your EC2 server'''. Instructions are at the top of the PHP guide: [[PHP]]

You need to '''configure PHP to show errors'''. Instructions are immediately below installation in the PHP guide.

=== Learn the PHP Language ===

Before you can continue, you will need to make yourself acquainted with PHP language components. Read the PHP guide for an overview: [[PHP#PHP Language Components]]

=== Set Up your Workspace ===

You are now ready to set up the workspace that you will be using for the rest of the semester. Follow the instructions in [[Workflow]] to:

# Make an account on Bitbucket
# Make a repository for your individual work for CSE 330
# Install SourceTree
# '''Windows only:''' Set up Pageant so that SourceTree can conect to Bitbucket
# Clone your CSE 330 repo from Bitbucket
# Install Komodo Edit
# Create a Komodo Edit Project inside of your Git repository
# Add the ''*.komodoproject'' file to ''.gitignore''
# Install FileZilla
# Connect FileZilla to your remote instance

=== Calculator ===

'''Make a calculator using PHP and an HTML form.''' The form should have two inputs. The form should submit a GET request either back to the same page or to a different results page. The calculator should support addition, subtraction, multiplication, and division by means of a radio button group on the page. (Consider edge cases!)

== Group Project ==

You will work in pairs (that means you and one other person) on this project.

<span style="font-size:1.3em; line-height:1.2em; color:blue;">In this module, and all future modules, the group portion builds off of material you learn in the individual portion. You should therefore complete the individual portions prior to working on the group portions. (Trust us: it will make your life easier!)</span>

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

=== Simple File Sharing Site ===

You will be making a simple file sharing site that supports uploading, viewing, and deleting files associated with various users. Details:

* You should have a file named '''users.txt''' stored in a secure place on your filesystem. It should have at least three usernames, with one username per line.
*: Passwords add an extra layer of complexity (encryption) that we will cover in Module 3. You will not earn credit for implementing passwords as your creative portion for this module.
* Users of the file sharing site should be able to enter their username and then log in.
*: You may implement logins using session variables, or you may implement them using a GET parameter that is passed between pages. You will need to always use sessions starting in Module 3.
* Users should see a list of all files associated with their username after the log in.
* Users should be able to view, upload, and delete files associated with their username.
* The URI should NOT reveal the internal file structure of your web site.
** Example of what not to do: http://www.example.com/download.php?file=/home/paul/file.txt
** Another bad example: http://www.example.com/~user/file.txt
** Good example: http://www.example.com/view.php?user=music&name=file.txt
*: In general, don't reveal any internal information about the site.
*: '''Food for thought:''' Given that Apache processes (with the exception of the main process) do not run as root, but rather as the user apache, how can you allow both your user account and the php scripts to read and write the
*:necessary files?
*:: ''Hint:'' You shouldn't be storing the user-uploaded files in public_html (that is only the place for your own web-page files),
*::''Hint number 2:'' you will need to use chown to change permissions to let user apache (or www-data for Ubuntu) have permissions on the user-files (that '''are not''' in the public_html folder). If you don't know what this does or how to do this, look at the [[Apache]] page
* You should customize your file sharing site by implementing an additional feature or two as part of the '''creative portion'''.

You will probably find the PHP guide on this wiki to be helpful: [[PHP#Other PHP Tips]]

=== 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 1]]

In particular:

* '''Your application needs to follow the conventions of FIEO (Filter Input and Escape Output)'''. Things you should filter include file names, usernames, and so on.
* '''Your project must pass the W3C Validator with no errors'''. For more information, see the HTML and CSS guide: [[HTML and CSS#Validation]]

== Grading ==

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

'''Assignments must be committed to Bitbucket by the end of class on the due date (commit early and often). Failing to commit by the end of class on the due date will result in a 0.
#''You must save your repo as:''
#*"<Season><year>-Module<#>-StudentID"
#*(ie. Spring2025-Module3-201343)
#''For the group project, you must save your repo as:''
#*"<Season><year>-Module<#>-StudentID1-StudentID2"
#*(ie. Spring2025-Module3-201343-312532)
#* OR, if you are working alone, put both your individual and group portions in your individual repo

'''If you do not name your repo correctly, or share it with cse330, the TA's are not responsible for grading your assignment. If we cannot find it, you will receive a zero.'''

_____________

# '''Cloud Instance and Web Server (30 Points):'''
#* You can SSH into your instance using your own custom username and SSH key. Put a screenshot in your repository of your terminal SSH-ing into your instance (15 points)
#* Your custom username is able to perform SUDO commands. Put a screenshot in your repository of you successfully executing a command with sudo (5 points)
#* The time zone is correct on your instance. Put a screenshot in your repository of the results of the `date` command (5 points)
#* The UserDir Apache module is working. Place a file in /home/<username>/public_html and link to the file in your README.md (5 points)
# '''PHP Calculator (15 Points):'''
#* The calculator is able to perform all four functions (2 points each, 8 points in total)
#* Each function is given as a radio button choice (4 points)
#* The calculator page passes the W3C HTML validator (3 points)
# '''File Sharing Site (40 Points):'''
#* '''''File Management (25 Points):'''''
#** Users should not be able to see any files until they enter a username and log in (4 points)
#**: ''Remember that users.txt should be stored in a secure location on your filesystem. That is, '''you should not be able to type any URL into your browser and see the raw users.txt file!'''''
#** Users can see a list of all files they have uploaded (4 points)
#** Users can open files they have previously uploaded (5 points)
#**: ''Note: Users should be able to open not only plain text files but also other file formats: images, spreadsheets, etc.''
#** Users can upload files (4 points)
#**: ''Note: Like users.txt, uploaded files should be stored in a secure location on your filesystem. That is, '''do not keep your uploads directory underneath a directory served by Apache!'''''
#** Users can delete files. If a file is "deleted", it should actually be removed from the filesystem (4 points)
#** The directory structure is hidden (2 points)
#** Users can log out (2 points)
#**: ''Note: If using session variables, you must ''actually'' log out the user by destroying their session; i.e., don't just redirect them to the login screen.''
#* '''''Best Practices (10 Points):'''''
#** Code is well formatted and easy to read, with proper commenting (4 points)
#** The site follows the FIEO philosophy (3 points)
#** All pages pass the W3C validator (3 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 README.md file in your group repo with the following:'''''
#** An .md file is a plain text file called a markdown file [https://guides.github.com/features/mastering-markdown/ ] .
#***The contents of your README.md file are shown on your repo, making it easier for us to grade
#*** You may style the page with bolding, hyperlings, images, block quotes and lists
#*** [http://dillinger.io/ This online markdown editor] makes it easy to learn this format
#** The link to BOTH your calculator and your file sharing site. '''''We need this to grade your work.'''''
#** A brief description of what you did for your creative portion
#** Any additional login details needed for the TA

=== Creative Portion ===

This module, and all future modules, will require that you invest some time into creating additional features for your group project. Plan to invest at least 60 minutes of your time into the creative portion.

* The creative portion is an opportunity for you to learn material of your own interest.
* You will not earn credit for a creative-portion feature that simply rehashes something you've already done in a previous module.

If you need ideas for a creative portion, or if you want to know whether or not your creative portion idea is "hard enough", ask a TA.

[[Category:Module 2]]
[[Category:Modules]]

Module 2

2017-01-27T14:20:01Z

James: /* Grading */

__NOTOC__
Module 2 introduces you to Linux, a command-line environment, the Apache web server, and PHP. You will create and configure your own cloud instance, install Apache and related software, and then form groups to make a simple file sharing site.

<span style="font-size:1.3em; line-height:1.2em; color:blue;">'''DO NOT WAIT UNTIL THE LAST MINUTE TO START ON THIS (or any) MODULE!''' The most common reason students perform poorly in this class is procrastination. You have been warned.</span>

== Reading ==

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

* [[Linux]]
* [[Bash]]
* [[Amazon Web Services]]
* [[SSH]]
* [[Apache]]
* [[PHP]]
* [[Workflow]]
* [[Web Application Security, Part 1]]

== Individual Assignments ==

{{RequiredInstructions|content=

<span style="color:red">There are a lot of wiki pages that you need to read in order to complete the individual portion of Module 2. The wiki pages contain an assortment of required steps, optional steps, and information. To make things easier, we have highlighted the ''required steps'' with a red bar, like you see on the left of this message. Do not skip anything marked with a red bar, or else you will not have a perfectly configured instance.</span>

}}

=== Learn About Linux ===

Linux is an open-source operating system based on UNIX. Linux is highly versatile and is used in a wide range of applications.

If you are not a Linux guru, read the Linux guide to get started: [[Linux]]

=== Install Cygwin: Windows Users Only ===

You will need Cygwin in order to log into and configure your EC2 instance. Cygwin is already installed on the CEC machines. Instructions for installing Cygwin on your personal machine are located in [[Workflow#Cygwin|the Workflow guide]].

Mac OS X users should located the "Terminal" application, which is installed by default; you will need this in the coming steps.

=== Create an AWS EC2 Instance ===

Once you understand [[Linux]], you need to set up your Amazon EC2 Instance. Use the AWS article to guide you through the process: [[Amazon Web Services]]

=== Configure SSH ===

Follow the instructions in [[SSH#SSH Configuration|the SSH guide]] to do the following:

# Create your own SSH key pair
# Log in as the default user to your EC2 instance
# Create a new user
# Give the new user your SSH public key

From now on, when you need to log into your EC2 instance as an administrator, just pop up a terminal and run:

<source lang="bash">
$ ssh your-username@ec2-xx-xx-xx-xx.compute-1.amazonaws.com
</source>

=== Install Essential Packages ===

Recall that software installation in Linux instances is usually handled through '''apt''' (Debian) or '''yum''' (RHEL). For more information, refer to [[Linux#Repository-Based Package Managers|the Linux guide]].

To make sure everything is working properly, '''install your first package(s) according to the ''Essential Packages'' subsection in the Linux guide.'''

=== Set the Timezone ===

'''Set your server to use US Central time (America/Chicago).''' Instructions are in the Linux guide: [[Linux#Synchronizing Date and Time]]

=== Set Up the Apache Web Server ===

You need to '''install the Apache web server on your EC2 instance'''. Refer to [[Apache|the Apache guide]].

In order for your web server to be accessible, you need to '''open up Port 80 on your EC2 instance'''. Instructions are in the AWS guide: [[Amazon Web Services#Enabling Web Access to your EC2 Instance]]

'''Enable the UserDir module in Apache.''' Instructions are in the Apache guide: [[Apache#The UserDir Module]]

=== Install PHP ===

You need to '''install PHP on your EC2 server'''. Instructions are at the top of the PHP guide: [[PHP]]

You need to '''configure PHP to show errors'''. Instructions are immediately below installation in the PHP guide.

=== Learn the PHP Language ===

Before you can continue, you will need to make yourself acquainted with PHP language components. Read the PHP guide for an overview: [[PHP#PHP Language Components]]

=== Set Up your Workspace ===

You are now ready to set up the workspace that you will be using for the rest of the semester. Follow the instructions in [[Workflow]] to:

# Make an account on Bitbucket
# Make a repository for your individual work for CSE 330
# Install SourceTree
# '''Windows only:''' Set up Pageant so that SourceTree can conect to Bitbucket
# Clone your CSE 330 repo from Bitbucket
# Install Komodo Edit
# Create a Komodo Edit Project inside of your Git repository
# Add the ''*.komodoproject'' file to ''.gitignore''
# Install FileZilla
# Connect FileZilla to your remote instance

=== Calculator ===

'''Make a calculator using PHP and an HTML form.''' The form should have two inputs. The form should submit a GET request either back to the same page or to a different results page. The calculator should support addition, subtraction, multiplication, and division by means of a radio button group on the page. (Consider edge cases!)

== Group Project ==

You will work in pairs (that means you and one other person) on this project.

<span style="font-size:1.3em; line-height:1.2em; color:blue;">In this module, and all future modules, the group portion builds off of material you learn in the individual portion. You should therefore complete the individual portions prior to working on the group portions. (Trust us: it will make your life easier!)</span>

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

=== Simple File Sharing Site ===

You will be making a simple file sharing site that supports uploading, viewing, and deleting files associated with various users. Details:

* You should have a file named '''users.txt''' stored in a secure place on your filesystem. It should have at least three usernames, with one username per line.
*: Passwords add an extra layer of complexity (encryption) that we will cover in Module 3. You will not earn credit for implementing passwords as your creative portion for this module.
* Users of the file sharing site should be able to enter their username and then log in.
*: You may implement logins using session variables, or you may implement them using a GET parameter that is passed between pages. You will need to always use sessions starting in Module 3.
* Users should see a list of all files associated with their username after the log in.
* Users should be able to view, upload, and delete files associated with their username.
* The URI should NOT reveal the internal file structure of your web site.
** Example of what not to do: http://www.example.com/download.php?file=/home/paul/file.txt
** Another bad example: http://www.example.com/~user/file.txt
** Good example: http://www.example.com/view.php?user=music&name=file.txt
*: In general, don't reveal any internal information about the site.
*: '''Food for thought:''' Given that Apache processes (with the exception of the main process) do not run as root, but rather as the user apache, how can you allow both your user account and the php scripts to read and write the
*:necessary files?
*:: ''Hint:'' You shouldn't be storing the user-uploaded files in public_html (that is only the place for your own web-page files),
*::''Hint number 2:'' you will need to use chown to change permissions to let user apache (or www-data for Ubuntu) have permissions on the user-files (that '''are not''' in the public_html folder). If you don't know what this does or how to do this, look at the [[Apache]] page
* You should customize your file sharing site by implementing an additional feature or two as part of the '''creative portion'''.

You will probably find the PHP guide on this wiki to be helpful: [[PHP#Other PHP Tips]]

=== 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 1]]

In particular:

* '''Your application needs to follow the conventions of FIEO (Filter Input and Escape Output)'''. Things you should filter include file names, usernames, and so on.
* '''Your project must pass the W3C Validator with no errors'''. For more information, see the HTML and CSS guide: [[HTML and CSS#Validation]]

== Grading ==

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

'''Assignments must be committed to Bitbucket by the end of class on the due date (commit early and often). Failing to commit by the end of class on the due date will result in a 0.
#''You must save your repo as:''
#*"<Season><year>-Module<#>-StudentID"
#*(ie. Spring2025-Module3-201343)
#''For the group project, you must save your repo as:''
#*"<Season><year>-Module<#>-StudentID1-StudentID2"
#*(ie. Spring2025-Module3-201343-312532)
#* OR, if you are working alone, put both your individual and group portions in your individual repo

'''If you do not name your repo correctly, or share it with cse330, the TA's are not responsible for grading your assignment. If we cannot find it, you will receive a zero.'''

_____________

# '''Cloud Instance and Web Server (30 Points):'''
#* You can SSH into your instance using your own custom username and SSH key. Put a screenshot in your repository of your terminal SSH-ing into your instance (15 points)
#* Your custom username is able to perform SUDO commands. Put a screenshot in your repository of you successfully executing a command with sudo (5 points)
#* The time zone is correct on your instance. Put a screenshot in your repository of the results of the `date` command (5 points)
#* The UserDir Apache module is working. Place a file in /home/<username>/public_html and link to the file in your README.md (5 points)
# '''PHP Calculator (15 Points):'''
#* The calculator is able to perform all four functions (2 points each, 8 points in total)
#* Each function is given as a radio button choice (4 points)
#* The calculator page passes the W3C HTML validator (3 points)
# '''File Sharing Site (40 Points):'''
#* '''''File Management (25 Points):'''''
#** Users should not be able to see any files until they enter a username and log in (4 points)
#**: ''Remember that users.txt should be stored in a secure location on your filesystem. That is, '''you should not be able to type any URL into your browser and see the raw users.txt file!'''''
#** Users can see a list of all files they have uploaded (4 points)
#** Users can open files they have previously uploaded (5 points)
#**: ''Note: Users should be able to open not only plain text files but also other file formats: images, spreadsheets, etc.''
#** Users can upload files (4 points)
#**: ''Note: Like users.txt, uploaded files should be stored in a secure location on your filesystem. That is, '''do not keep your uploads directory underneath a directory served by Apache!'''''
#** Users can delete files. If a file is "deleted", it should actually be removed from the filesystem (4 points)
#** The directory structure is hidden (2 points)
#** Users can log out (2 points)
#**: ''Note: If using session variables, you must ''actually'' log out the user by destroying their session; i.e., don't just redirect them to the login screen.''
#* '''''Best Practices (10 Points):'''''
#** Code is well formatted and easy to read, with proper commenting (4 points)
#** The site follows the FIEO philosophy (3 points)
#** All pages pass the W3C validator (3 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 README.md file in your group repo with the following:'''''
#** An .md file is a plain text file called a markdown file [https://guides.github.com/features/mastering-markdown/ ] .
#***The contents of your README.md file are shown on your repo, making it easier for us to grade
#*** You may style the page with bolding, hyperlings, images, block quotes and lists
#*** [http://dillinger.io/ This online markdown editor] makes it easy to learn this format
#** The url of BOTH your calculator and your file sharing site. '''''We need this to grade your work.'''''
#** Names and Student IDs of all the group members
#** A link to the front page of your site
#** A brief description of what you did for your creative portion
#** Any additional login details needed for the TA

=== Creative Portion ===

This module, and all future modules, will require that you invest some time into creating additional features for your group project. Plan to invest at least 60 minutes of your time into the creative portion.

* The creative portion is an opportunity for you to learn material of your own interest.
* You will not earn credit for a creative-portion feature that simply rehashes something you've already done in a previous module.

If you need ideas for a creative portion, or if you want to know whether or not your creative portion idea is "hard enough", ask a TA.

[[Category:Module 2]]
[[Category:Modules]]

Module 2

2017-01-23T20:02:30Z

James: /* Grading */

__NOTOC__
Module 2 introduces you to Linux, a command-line environment, the Apache web server, and PHP. You will create and configure your own cloud instance, install Apache and related software, and then form groups to make a simple file sharing site.

<span style="font-size:1.3em; line-height:1.2em; color:blue;">'''DO NOT WAIT UNTIL THE LAST MINUTE TO START ON THIS (or any) MODULE!''' The most common reason students perform poorly in this class is procrastination. You have been warned.</span>

== Reading ==

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

* [[Linux]]
* [[Bash]]
* [[Amazon Web Services]]
* [[SSH]]
* [[Apache]]
* [[PHP]]
* [[Workflow]]
* [[Web Application Security, Part 1]]

== Individual Assignments ==

{{RequiredInstructions|content=

<span style="color:red">There are a lot of wiki pages that you need to read in order to complete the individual portion of Module 2. The wiki pages contain an assortment of required steps, optional steps, and information. To make things easier, we have highlighted the ''required steps'' with a red bar, like you see on the left of this message. Do not skip anything marked with a red bar, or else you will not have a perfectly configured instance.</span>

}}

=== Learn About Linux ===

Linux is an open-source operating system based on UNIX. Linux is highly versatile and is used in a wide range of applications.

If you are not a Linux guru, read the Linux guide to get started: [[Linux]]

=== Install Cygwin: Windows Users Only ===

You will need Cygwin in order to log into and configure your EC2 instance. Cygwin is already installed on the CEC machines. Instructions for installing Cygwin on your personal machine are located in [[Workflow#Cygwin|the Workflow guide]].

Mac OS X users should located the "Terminal" application, which is installed by default; you will need this in the coming steps.

=== Create an AWS EC2 Instance ===

Once you understand [[Linux]], you need to set up your Amazon EC2 Instance. Use the AWS article to guide you through the process: [[Amazon Web Services]]

=== Configure SSH ===

Follow the instructions in [[SSH#SSH Configuration|the SSH guide]] to do the following:

# Create your own SSH key pair
# Log in as the default user to your EC2 instance
# Create a new user
# Give the new user your SSH public key

From now on, when you need to log into your EC2 instance as an administrator, just pop up a terminal and run:

<source lang="bash">
$ ssh your-username@ec2-xx-xx-xx-xx.compute-1.amazonaws.com
</source>

=== Install Essential Packages ===

Recall that software installation in Linux instances is usually handled through '''apt''' (Debian) or '''yum''' (RHEL). For more information, refer to [[Linux#Repository-Based Package Managers|the Linux guide]].

To make sure everything is working properly, '''install your first package(s) according to the ''Essential Packages'' subsection in the Linux guide.'''

=== Set the Timezone ===

'''Set your server to use US Central time (America/Chicago).''' Instructions are in the Linux guide: [[Linux#Synchronizing Date and Time]]

=== Set Up the Apache Web Server ===

You need to '''install the Apache web server on your EC2 instance'''. Refer to [[Apache|the Apache guide]].

In order for your web server to be accessible, you need to '''open up Port 80 on your EC2 instance'''. Instructions are in the AWS guide: [[Amazon Web Services#Enabling Web Access to your EC2 Instance]]

'''Enable the UserDir module in Apache.''' Instructions are in the Apache guide: [[Apache#The UserDir Module]]

=== Install PHP ===

You need to '''install PHP on your EC2 server'''. Instructions are at the top of the PHP guide: [[PHP]]

You need to '''configure PHP to show errors'''. Instructions are immediately below installation in the PHP guide.

=== Learn the PHP Language ===

Before you can continue, you will need to make yourself acquainted with PHP language components. Read the PHP guide for an overview: [[PHP#PHP Language Components]]

=== Set Up your Workspace ===

You are now ready to set up the workspace that you will be using for the rest of the semester. Follow the instructions in [[Workflow]] to:

# Make an account on Bitbucket
# Make a repository for your individual work for CSE 330
# Install SourceTree
# '''Windows only:''' Set up Pageant so that SourceTree can conect to Bitbucket
# Clone your CSE 330 repo from Bitbucket
# Install Komodo Edit
# Create a Komodo Edit Project inside of your Git repository
# Add the ''*.komodoproject'' file to ''.gitignore''
# Install FileZilla
# Connect FileZilla to your remote instance

=== Calculator ===

'''Make a calculator using PHP and an HTML form.''' The form should have two inputs. The form should submit a GET request either back to the same page or to a different results page. The calculator should support addition, subtraction, multiplication, and division by means of a radio button group on the page. (Consider edge cases!)

== Group Project ==

You will work in pairs (that means you and one other person) on this project.

<span style="font-size:1.3em; line-height:1.2em; color:blue;">In this module, and all future modules, the group portion builds off of material you learn in the individual portion. You should therefore complete the individual portions prior to working on the group portions. (Trust us: it will make your life easier!)</span>

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

=== Simple File Sharing Site ===

You will be making a simple file sharing site that supports uploading, viewing, and deleting files associated with various users. Details:

* You should have a file named '''users.txt''' stored in a secure place on your filesystem. It should have at least three usernames, with one username per line.
*: Passwords add an extra layer of complexity (encryption) that we will cover in Module 3. You will not earn credit for implementing passwords as your creative portion for this module.
* Users of the file sharing site should be able to enter their username and then log in.
*: You may implement logins using session variables, or you may implement them using a GET parameter that is passed between pages. You will need to always use sessions starting in Module 3.
* Users should see a list of all files associated with their username after the log in.
* Users should be able to view, upload, and delete files associated with their username.
* The URI should NOT reveal the internal file structure of your web site.
** Example of what not to do: http://www.example.com/download.php?file=/home/paul/file.txt
** Another bad example: http://www.example.com/~user/file.txt
** Good example: http://www.example.com/view.php?user=music&name=file.txt
*: In general, don't reveal any internal information about the site.
*: '''Food for thought:''' Given that Apache processes (with the exception of the main process) do not run as root, but rather as the user apache, how can you allow both your user account and the php scripts to read and write the
*:necessary files?
*:: ''Hint:'' You shouldn't be storing the user-uploaded files in public_html (that is only the place for your own web-page files),
*::''Hint number 2:'' you will need to use chown to change permissions to let user apache (or www-data for Ubuntu) have permissions on the user-files (that '''are not''' in the public_html folder). If you don't know what this does or how to do this, look at the [[Apache]] page
* You should customize your file sharing site by implementing an additional feature or two as part of the '''creative portion'''.

You will probably find the PHP guide on this wiki to be helpful: [[PHP#Other PHP Tips]]

=== 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 1]]

In particular:

* '''Your application needs to follow the conventions of FIEO (Filter Input and Escape Output)'''. Things you should filter include file names, usernames, and so on.
* '''Your project must pass the W3C Validator with no errors'''. For more information, see the HTML and CSS guide: [[HTML and CSS#Validation]]

== Grading ==

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

'''Assignments must be committed to Bitbucket by the end of class on the due date (commit early and often). Failing to commit by the end of class on the due date will result in a 0.
#''You must save your repo as:''
#*"<Season><year>-Module<#>-StudentID"
#*(ie. Spring2025-Module3-201343)
#''For the group project, you must save your repo as:''
#*"<Season><year>-Module<#>-StudentID1-StudentID2"
#*(ie. Spring2025-Module3-201343-312532)
#* OR, if you are working alone, put both your individual and group portions in your individual repo

'''If you do not name your repo correctly, or share it with cse330, the TA's are not responsible for grading your assignment. If we cannot find it, you will receive a zero.'''

_____________

# '''Cloud Instance and Web Server (30 Points):'''
#* You can SSH into your instance using your own custom username and SSH key. Put a screenshot in your repository of your terminal SSH-ing into your instance (15 points)
#* Your custom username is able to perform SUDO commands. Put a screenshot in your repository of you successfully executing a command with sudo (5 points)
#* The time zone is correct on your instance. Put a screenshot in your repository of the results of the `date` command (5 points)
#* The UserDir Apache module is working. Place a file in /home/<username>/public_html and link to the file in your README.md (5 points)
# '''PHP Calculator (15 Points):'''
#* The calculator is able to perform all four functions (2 points each, 8 points in total)
#* Each function is given as a radio button choice (4 points)
#* The calculator page passes the W3C HTML validator (3 points)
# '''File Sharing Site (40 Points):'''
#* '''''File Management (25 Points):'''''
#** Users should not be able to see any files until they enter a username and log in (4 points)
#**: ''Remember that users.txt should be stored in a secure location on your filesystem. That is, '''you should not be able to type any URL into your browser and see the raw users.txt file!'''''
#** Users can see a list of all files they have uploaded (4 points)
#** Users can open files they have previously uploaded (5 points)
#**: ''Note: Users should be able to open not only plain text files but also other file formats: images, spreadsheets, etc.''
#** Users can upload files (4 points)
#**: ''Note: Like users.txt, uploaded files should be stored in a secure location on your filesystem. That is, '''do not keep your uploads directory underneath a directory served by Apache!'''''
#** Users can delete files. If a file is "deleted", it should actually be removed from the filesystem (4 points)
#** The directory structure is hidden (2 points)
#** Users can log out (2 points)
#**: ''Note: If using session variables, you must ''actually'' log out the user by destroying their session; i.e., don't just redirect them to the login screen.''
#* '''''Best Practices (10 Points):'''''
#** Code is well formatted and easy to read, with proper commenting (4 points)
#** The site follows the FIEO philosophy (3 points)
#** All pages pass the W3C validator (3 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 README.md file in your group repo with the following:'''''
#** An .md file is a plain text file called a markdown file [https://guides.github.com/features/mastering-markdown/ ] .
#***The contents of your README.md file are shown on your repo, making it easier for us to grade
#*** You may style the page with bolding, hyperlings, images, block quotes and lists
#*** [http://dillinger.io/ This online markdown editor] makes it easy to learn this format
#** Names and Student IDs of all the group members
#** A link to the front page of your site
#** A brief description of what you did for your creative portion
#** Any additional login details needed for the TA

=== Creative Portion ===

This module, and all future modules, will require that you invest some time into creating additional features for your group project. Plan to invest at least 60 minutes of your time into the creative portion.

* The creative portion is an opportunity for you to learn material of your own interest.
* You will not earn credit for a creative-portion feature that simply rehashes something you've already done in a previous module.

If you need ideas for a creative portion, or if you want to know whether or not your creative portion idea is "hard enough", ask a TA.

[[Category:Module 2]]
[[Category:Modules]]

Module 7.2

2017-01-21T02:40:56Z

James: Created page with '== Individual Assignment == In this assignment, you will build an Angular dog-walking website. To get Angular running on your machine, follow the [https://angular.io/docs/ts/late…'

== Individual Assignment ==
In this assignment, you will build an Angular dog-walking website. To get Angular running on your machine, follow the [https://angular.io/docs/ts/latest/quickstart.html quickstart] tutorial. Once you are able to see the "Hello Angular!" on your screen, you are ready to begin.

'''Understanding Angular and TypeScript'''

Before starting this section, create a copy the quickstart folder you just created. Use one folder to complete the tutorial and another folder to create your dog walking site.

Complete steps 1-6 of the [https://angular.io/docs/ts/latest/tutorial/ angular tutorial]. Go slowly through the tutorial and try to understand the code. Pay close attention to the routing section as this can be quite tricky. TAs will check out your working tutorial code.

'''Overview of the dog walking site'''

The dog walking site will have two main views: dogs and walkers. Each page should show a picture as well as basic information about each dog/walker. Clicking on an image should show more information about the selected dog/walker.

Under more information, there should be buttons that link to personalized pages for the specified dog/walker. This will be done by using a parameterized route.

Here is a general layout of the website:

[[File:siteflow-2.png|center|thumb|upright=2]]

'''Building the site'''

1. You should start with the [https://angular.io/docs/ts/latest/guide/setup.html quickstart] base that you created. Your folder structure should look like [http://classes.engineering.wustl.edu/cse330/images/1/18/FolderStructure.png this].

2. Create two files: mock-dogs.ts and mock-walkers.ts. These files are very similar to [https://angular.io/docs/ts/latest/tutorial/toh-pt4.html mock-heroes.ts] from the tutorial.

In mock-dogs.ts, put the following code:

import { Dog } from './dog';
import { Walker } from './walker';

let rexi = new Walker(1, 'Rexi', 20, [], 'http://cdnak1.psbin.com/img/mw=300/cr=n/d=tqw7n/vmdxhv95r1qhos2t.jpg');
let caroline = new Walker(2, 'Caroline', 21, [], 'http://cdnak1.psbin.com/img/mw=300/cr=n/d=d75wq/jhm8rmg2i2ckxj7g.jpg');
let joe = new Walker(3, 'Joe', 25, [],'https://images-na.ssl-images-amazon.com/images/M/MV5BOTI3ODk1MTMyNV5BMl5BanBnXkFtZTcwNDEyNTE2Mg@@._V1_UY317_CR6,0,214,317_AL_.jpg');
let jake = new Walker(4, 'Jake', 19, [], 'http://a4.files.biography.com/image/upload/c_fit,cs_srgb,dpr_1.0,h_1200,q_80,w_1200/MTE4MDAzNDEwNzk1MjAyMDYy.jpg');

export const DOGS: Dog[] = [
{ id: 1, name: 'Sheila', age: 7, walkers: [rexi, caroline], personality:'Fun-loving, very active', picture:'https://www.what-dog.net/Images/faces2/scroll0015.jpg'},
{ id: 2, name: 'Doge', age: 10, walkers: [joe, rexi, jake], personality:'Slow moving, tired', picture:'https://pbs.twimg.com/profile_images/378800000822867536/3f5a00acf72df93528b6bb7cd0a4fd0c.jpeg'},
{ id: 3, name: 'Lola', age: 2, walkers: [jake], personality:'Hyper active puppy', picture:'https://d2csxpduxe849s.cloudfront.net/media/27FB7F0C-9885-42A6-9E0C19C35242B5AC/62E3C530-E8C8-445A-B6EA56249F2436C8/51B393D6-AC74-46BC-B669648017EF48AF/b9824b6d-ea23-5b20-8412-45061f7ebc8b/thul-IMG_1809.jpg'},
{ id: 4, name: 'Gizmo', age: 4, walkers: [joe], personality:'Likes to bark at squirrels', picture:'https://pbs.twimg.com/profile_images/473535319090819074/6j-F-_N-_400x400.jpeg'},
];

In mock-walkers.ts put the following code:

import { Walker } from './walker';
import { Dog } from './dog';

let sheila = new Dog(1, 'Sheila', 7, [], 'Fun-loving, very active', 'https://www.what-dog.net/Images/faces2/scroll0015.jpg');
let doge = new Dog( 2, 'Doge', 10, [], 'Slow moving, tired', 'http://www.dogchannel.com/images/articles/breed_profile_images/canaan-dog.jpg');
let lola = new Dog(3,'Lola',2, [], 'Hyper active puppy','https://d2csxpduxe849s.cloudfront.net/media/27FB7F0C-9885-42A6-9E0C19C35242B5AC/62E3C530-E8C8-445A-B6EA56249F2436C8/51B393D6-AC74-46BC-B669648017EF48AF/b9824b6d-ea23-5b20-8412-45061f7ebc8b/thul-IMG_1809.jpg');
let gizmo = new Dog(4, 'Gizmo', 4, [], 'Likes to bark at squirrels', 'https://pbs.twimg.com/profile_images/473535319090819074/6j-F-_N-_400x400.jpeg');

export const WALKERS: Walker[] = [
{ id: 1, name: 'Rexi', age: 20, dogsWalked:[gizmo], picture:'http://cdnak1.psbin.com/img/mw=300/cr=n/d=tqw7n/vmdxhv95r1qhos2t.jpg'},
{ id: 2, name: 'Caroline', age: 21, dogsWalked:[sheila, lola], picture:'http://cdnak1.psbin.com/img/mw=300/cr=n/d=d75wq/jhm8rmg2i2ckxj7g.jpg'},
{ id: 3, name: 'Joe', age: 25, dogsWalked:[gizmo, lola, doge], picture:'https://images-na.ssl-images-amazon.com/images/M/MV5BOTI3ODk1MTMyNV5BMl5BanBnXkFtZTcwNDEyNTE2Mg@@._V1_UY317_CR6,0,214,317_AL_.jpg'},
{ id: 4, name: 'Jake', age: 19, dogsWalked:[gizmo, sheila], picture:'http://a4.files.biography.com/image/upload/c_fit,cs_srgb,dpr_1.0,h_1200,q_80,w_1200/MTE4MDAzNDEwNzk1MjAyMDYy.jpg'},
];

You will need to create a dog class and a walker class based upon the mock data above. Call these dog.ts and walker.ts (the format should be similar to [https://angular.io/docs/ts/latest/tutorial/toh-pt3.html hero.ts] from the tutorial). In these files, create constructors for the appropriate object. This should look something like:

export class Example{
id: number;
name: string;

constructor ( id: number, name: string){
this.id = id;
this.name = name;
}
}

You will also need to create two service files (one for dog and one for walker) to be able to access the mock data. Call these dog.service.ts and walker.service.ts. Reference the tutorial (especially [https://angular.io/docs/ts/latest/tutorial/toh-pt4.html hero.service.ts]) if you need help.

3. Create dog.component.ts. This component should iterate through all the dogs of mock-dogs and display their picture and general information. Refer to [https://angular.io/docs/ts/latest/tutorial/toh-pt2.html hero.component.ts] from the tutorial for help. When you have completed this section, your website should look like:

[[File:DogHomePage-2.png|center|thumb|upright=2]]

4. Create dog-detail.component.ts. This component should show more information about the dog if its picture is clicked. Refer to [https://angular.io/docs/ts/latest/tutorial/toh-pt3.html hero-detail.component.ts] from the tutorial for help. This is what your site should look like:

[[File:DogDetailPage.png|center|thumb|upright=2]]

5. Create a nav bar at the top of the page and link the other tab to a walker.component.ts. This page should operate the same as dog.component.ts but iterate through mock-walkers. Use the [https://angular.io/docs/ts/latest/tutorial/toh-pt5.html routing] section of the tutorial for help. The nav bar should look something like:

[[File:NavBar.png|center|thumb|upright=2]]

6. Create walker-page.component.ts. This will be a separate "facebook page" that will be routed by a parameterized route. The parameterized routes in [https://angular.io/docs/ts/latest/tutorial/toh-pt5.html routing] from the tutorial will be extremely helpful. This page should look like:

[[File:DeepLinkWalkerPage.png|center|thumb|upright=2]]

*Make sure to take note of the url - the number at the end corresponds to the id of the selected walker.

The best way to make this route work is to pass a walker object to the parameterized route page. Some helpful code that should go into DogDetailComponent:

getWalkers(): void {
this.walkerService.getWalkers().then(walkers => this.walkers = walkers);
}

ngOnInit():void{
this.getWalkers();
}

onSelect(walker: Walker):void {
this.selectedWalker = walker;
this.gotoDetail();
}

gotoDetail(): void{
this.router.navigate(['/walker', this.selectedWalker.id]);
}

This code will help you get the proper walker based on the button selected and help you pass the object to the parameterized route page.

To parse the walker object on the parameterized route page, you can use the following code. This should go in WalkerPageComponent in walker-page.component.ts:

ngOnInit(): void {
this.route.params.forEach((params: Params) => {
let id = +params['id'];
this.walkerService.getWalker(id)
.then(walker => this.walker = walker);
});
}

7. Once you have all the routes working, feel free to add different pictures, different attributes for the classes, nice CSS and bootstrap, etc. Your final folder structure should look like [http://classes.engineering.wustl.edu/cse330/images/6/67/FinalFolderStructure.png this].

'''Debugging'''

Debugging in Angular can be quite tricky. Here are some helpful hints:

1. Check your terminal for 404 error messages. A 404 message usually means that you misspelled a file name in your imports or that file doesn't exist.

[[File:terminalerrors.png|center|thumb|upright=2]]

In this image above, we see a 404 error message in app.components.ts. Let's take a look at what is in app.module.ts:

[[File:modulets.png|center|thumb|upright=2]]

Looking over the file, we can see that the file app.component.ts is misspelled with an extra 's'. This is where we get the 404 error from. The compiler can't find app.components.ts because it does not exist.

2. If you aren't getting a 404 error message in the console, use inspect element on Google Chrome. Usually an error will be thrown and you can identify it through the inspector. Let's take a look at the example below:

[[File:inspectorerrors.png|center|thumb|upright=2]]

We immediately see that my walker page is not being rendered correctly (none of the walkers appear). So, right click the web page in Google Chrome and click "Inspect". The inspect toolbar should appear. Looking at the console, we can see that WalkerComponent doesn't have a DogService provider. We can easily fix this by doing the following:

[[File:errorfix.png|center|thumb|upright=2]]

== Grading ==

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

'''Assignments must be committed to Bitbucket by the end of class on the due date (commit early and often). Failing to commit by the end of class on the due date will result in a 0. Assignments must be demoed within 4 days of the due date (Friday at 11:30 AM for Module 7). You are allowed to demo your assignment at TA office hours. However, after Friday at 11:30 AM, you will receive a 0 for the assignment, regardless of your time-stamp.'''

#''You must save your repo as:''
#*"<Season><year>-Module<#>-FirstName-LastName-StudentID"
#*(ie. Spring2025-Module3-John-Doe-201343)

___________

# '''Completed Angular Tutorial steps 0-6 (5 points)'''
# '''Completed dog-walking website (55 points)'''
#* Quickstart (5 points)
#** Folder structure is correct (3 points)
#** Set up Angular correctly (2 points)
#* Main Components (12 points)
#** Set up of mock-dogs.ts, dogs.ts, and dog.service.ts is correct (5 points)
#** Iterates through all dog objects and displays correct information (5 points)
#** The same is done for walker component (2 points)
#* Detail Components (10 points):
#** User is able to select a dog image and see more information about the selected dog (5 points)
#** When the image is selected, the web page does not refresh or go to a different url (3 points)
#** The same is done for walker detail component (2 points)
#* Navigation Bar (8 points)
#** A navigation bar is at the top of dog component page and walker component page (3 points)
#** User can switch between the two components easily and appropriate data is rendered upon switch (5 points)
#* Parameterized Route Page (15 points):
#** User is taken to a separate page with a parameterized route when a walker button is clicked on dog component page (5 points)
#** Info about the appropriate walker appears automatically (5 points)
#** There is a back button to take user back to previous page (3 points)
#** The same is done for dog buttons on walker component page (2 points)
#* BootStrapping (5 points)
#** Site looks good, intuitive, and professional (5 points)

Module 1

2017-01-19T02:18:41Z

James: /* Reading */

__NOTOC__
Module 1 introduces the fundamentals of HTML and CSS. You will first make a static document using HTML and CSS, and then you will make a portal to a DuckDuckGo search. This module is worth 50 points.

== Reading ==

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

* [[Git]]
* [[HTML and CSS]]
* [[HTML Forms]]

== Assignments ==

=== Write a Birthday Card ===

'''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:

* Make the background-color of the page baby blue and use purple ink to write a card to a little boy
* Make the text big and include pictures of hearts
* Use a font with text shadows (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.

==== How to Edit Your File ====

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.

* 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].
* 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.

'''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.

==== How to View Your HTML Document ====

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.

In Module 2, we will install a web server that serves up pages on the http:// protocol.

==== 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.

For more information on validation, see the HTML and CSS guide: [[HTML and CSS#Validation]]

=== Make a Portal to a DuckDuckGo Search ===

'''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.

# Visit [https://www.duckduckgo.com/ www.duckduckgo.com]. Search for something easy to spot in the URL, like "QUERY".
# 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 ==

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

'''Assignments must be committed to Bitbucket by the end of class on the due date (commit early and often). Failing to commit by the end of class on the due date will result in a 0.

# '''Birthday Card (30 Points):'''
#* Correct usage of HTML and CSS in your birthday card (10 points).
#*: ''Make sure that you use HTML for "content" and CSS for "appearance." Don't write inline styles: use a separate stylesheet and link your HTML file to it.''
#* Experimenting with at least 5 different CSS properties in your birthday card (10 points).
#* Birthday card passes the W3C validation for the declared DOCTYPE (e.g., HTML 5) (10 points).
# '''Search Portal (10 Points):'''
#* DuckDuckGo search portal is functional (10 points).
# '''Account Creation and Version Control (10 Points):'''
#* Account Created on Amazon Web Services (5 Points)
#* Bitbucket account created (2 Points)
#* Files pushed to properly named private repo (ex. Spring2017-Module1-StudentID) on Bitbucket using Git (2 Points)
#* Bitbucket repo shared with cse330 user (1 Point)

[[Category:Module 1]]
[[Category:Modules]]

Git

2017-01-18T20:06:33Z

James:

'''Git''' is a ''distributed version control system''. It enables you to:

# Keep track of revisions to your files
# Push and pull your revisions to other computers or servers
# Collaborate with other people on the same project

Subversion is the version control system you used in CSE 132. However, Subversion does not have the same agility of Git in terms of local revisions, staging, and collaboration. This guide aims to get you up to speed with the power of Git for multi-developer projects.

== Git TL;DR ==

Before the first commit:
<source lang="bash">
# Navigate to project
$ cd /path/to/your/directory/
# Initialize folder as git repository
$ git init
# Set target URL
$ git remote add origin <repository URL>
# If this is your first time using git on your machine, you need to set your username and email
$ git config --global user.name "Your Name"
$ git config --global user.email "you@example.com"
</source>

For each subsequent commit:
<source lang="bash">
# Add untracked files ( use `git add .` to add all files)
$ git add <filename>
# Commit changes
$ git commit -m "Your commit message"
# Push changes to bitbucket. Unless you are working on a different branch, <branchname> should be `master`.
$ git push -u origin <branchname>
</source>

== Initializing Git ==

To initialize a Git repository inside of a folder, you can use Git's '''init''' command:

<source lang="bash">$ git init</source>

This will create a .git directory, where Git will store information about the repository. This command can be run either in an empty folder, or in a folder where files already exist.

== Local and Remote Branches ==

When you create a branch named "mybranch" on your local repository and ''push'' changes up to the remote repository, they actually get pushed to a remote branch called '''origin/mybranch'''. (Note that '''origin''' is the default name for a remote Git repository.) Even after your collaborators ''pull'' changes from remote to their local repositories, no new branches are created on their own personal local repositories.

Let's say that you and your partner are both working directly in the '''master''' branch (not a great idea for large or professional projects). When you ''push'' your changes up, they get saved in '''origin/master'''. When your partner goes and pulls changes from remote, if '''master''' is still her working copy, your changes will be immediately merged into her local '''master''' branch.

In practice, each collaborator will have their own branch, and when they make new versions of the features they are developing, they will merge those changes into '''master'''. (When '''master''' changes, each collaborator will merge the changes from '''master''' back into their personal branch.) What follows is an example that should help illustrate this process.

== Adding a Remote ==
A project that is being tracked with Git needs to be connected to a remote before files are pushed to version control. To add a remote to an initialized Git project, use the '''git remote add''' command:

<source lang="bash">git remote add origin \<repository URL\></source>

The origin remote is the default server that Git will push to.

== Staging ==

[[File:SourceTree-Staging.jpg|400px|thumb|right|Staging a file in SourceTree]]

Up to this point, you have been using SourceTree to automatically commit all changes. However, Git enables you to not commit every single file if you don't want to. This is where '''staging''' comes into play.

To add a file to the stage, use the '''add''' command:

<source lang="bash">$ git add <filename></source>

Then, when you run ''git commit'', only those files that have been staged will be updated.

'''Note:''' <code>git commit -a</code> commits all files, whether or not they had been staged. <code>git commit</code> (without the ''-a'') only commits those files in the staging area. It is a good idea to run '''git status''' before staging files to avoid staging files that should not be committed.

=== Ignoring Files in Git ===
Some files should not be committed to version control. Sensitive information such as SSH keys and files containing passwords should be ignored. Dependency folders such as node_modules should also be ignored; dependencies contain an enormous number of files that could change and will cause commit conflicts. . Rather, use the appropriate dependency manager to install those packages after cloning a repository (e.g. '''npm install'''). Folders containing virtual environments for frameworks such as Flask should also be ignored, and should instead be generated at will.

To add files to be ignored, edit your .gitignore file:

<source lang="bash">$ vim .gitignore</source>

In this file, add the file or folder to be ignored.

<source lang="text">
node_modules
venv
db_connect.php
</source>

=== Staging in SourceTree ===

Staging in SourceTree is very intuitive. However, before you can use this feature, you need to turn it on. (We had you turn of the staging feature in Module 2.)

# Go to the SourceTree preferences.
# Enter the Git pane.
# Check the box that says "Use the staging area".

You should now be able to use the staging area! In the "File Status View", you can drag and drop files back and forth between Staged and Unstaged. See the screenshot for an example.

== Commits ==

When you want to create a "snapshot" of your project, what you do in Git is called a ''commit''. The commit finds all files under version control, looks for ones that have been changed, and records the changes in a local archive. You learned how to perform a commit in SourceTree [[Workflow|in Module 2]].

If you need to determine what files have been changed since the last commit, you can use Git's '''status''' command:

<source lang="bash">$ git status</source>

In SourceTree, the results of ''git status'' are displayed nicely in the "File Status View".

== Branches and Merging ==

Git enables you to work on different features of the same software suite in isolation from each other. The way to do this is using '''branches'''.

[[File:SourceTree-Checkout.jpg|400px|thumb|right|Checking out an existing branch in SourceTree]]

To create a new branch, use the '''checkout -b''' command:

<source lang="bash">$ git checkout -b my-new-branch</source>

Now, when you next commit, you will be committing to the '''my-new-branch''' branch rather than the default '''master''' branch.

To switch the working copy over to a different branch, use the '''checkout''' command:

<source lang="bash">$ git checkout my-existing-branch</source>

See the screenshot for how to checkout a branch in SourceTree.

To merge changes from a different branch to the current working copy, use the '''merge''' command:

<source lang="bash">$ git merge my-existing-branch</source>

After you merge, if you wish to terminate a branch, use the '''branch -d''' command:

<source lang="bash">$ git branch -d my-existing-branch</source>

Git also has another command called '''rebase''', which is similar to '''merge''' except that it combines the commits of each branch into a single branch, but still keeping the head of each branch. For more information on ''rebase'', read [http://blog.sourcetreeapp.com/2012/08/21/merge-or-rebase/ this article on the SourceTree blog].

This will all make more sense when we go through an example. We will also be using SourceTree in the example.

== Example: Staging and Branches ==

Suppose I have three files under version control: apple.txt, banana.txt, and carrot.txt. The contents is like so (Thanks to [http://www.sumitkhemka.com/ Sumit Khemka] for the humor):

* '''apple.txt:''' How do you make an apple turnover? Push it downhill!
* '''banana.txt:''' What is a ghost's favorite fruit? A boonanaa!
* '''carrot.txt:''' How do you make a soup rich? Add 14 carats to it!

All files have been committed to the HEAD, which is by default the '''master''' branch:

<source lang="bash">
$ git add -A; git commit
...
$ git status
# On branch master
nothing to commit, working directory clean
</source>

=== Staging ===

Now, let's change the Apple joke, and keep the Banana and the Carrot the same:

* '''apple.txt:''' What kind of apple has a short temper? A crab apple!

We can see in Git and SourceTree that there is one file changed: apple.txt.

<source lang="bash">$ git status
# On branch master
# Changes not staged for commit:
# (use "git add <file>..." to update what will be committed)
# (use "git checkout -- <file>..." to discard changes in working directory)
#
# modified: apple.txt
#
</source>

[[File:SourceTree-Branching.jpg|400px|thumb|right|Creating a new branch using SourceTree]]

Let's go ahead and stage our file:

<source lang="bash">$ git add apple.txt</source>

In SourceTree, drag a file from the "working tree" pane to the "files staged in index" pane to stage the file.

=== Branching ===

But now, instead of committing this change directly to our '''master''' branch, let's make a new branch, and let's call it '''apple-branch'''.

In SourceTree, press the "Branch" button to bring up a little dialog box. See the screenshot for an example.

If we were using the command line, the command would be:

<source lang="bash">$ git checkout -b apple-branch</source>

Here is what we now see when we run '''git status''':

<source lang="bash">
$ git status
# On branch apple-branch
# Changes to be committed:
# (use "git reset HEAD <file>..." to unstage)
#
# modified: apple.txt
#
</source>

Let's now go ahead and commit the changes:

[[File:SourceTree-ExampleAppleBranch.jpg|400px|thumb|right|Our current tree structure in SourceTree]]

<source lang="bash">
$ git commit -m "First Apple Commit"
[apple-branch c2c1738] First Apple Commit
1 file changed, 1 insertion(+), 1 deletion(-)
</source>

In SourceTree, run the commit as you have been doing in Modules 2-4.

Let's now make a second branch. This branch is going to be rooted at the current version of the '''master''' branch, which of course is still the three original jokes. To switch back to the '''master''' branch, we use the '''checkout''' command:

<source lang="bash">
$ git checkout master
Switched to branch 'master'
</source>

In SourceTree, press the "Checkout" button, and choose the revision or branch that you want to checkout; see the screenshot for an example.

We will now make a revision to the Banana joke:

* '''banana.txt:''' What would you call two bananas? A pair of slippers!

Let's change the file, stage it, and see the current status.

<source lang="bash">
$ git add -A
$ git status
# On branch master
# Changes to be committed:
# (use "git reset HEAD <file>..." to unstage)
#
# modified: banana.txt
#
</source>

We will now create another new branch, and commit our changes to it.

<source lang="bash">
$ git checkout -b banana-branch
$ git commit -m "First Banana Commit"
[banana-branch f876aac] First Banana Commit
1 file changed, 1 insertion(+), 1 deletion(-)
</source>

We can see all branches using '''git branch -v''':

<source lang="bash">
$ git branch -v
apple-branch c2c1738 First Apple Commit
* banana-branch f876aac First Banana Commit
master b770092 Initial Commit
</source>

However, this is where a GUI like SourceTree really comes in handy. Here is what you now see in the Log View:

[[File:SourceTree-ViewBranches.jpg]]

Nifty!

=== Merging ===

Okay, so now we want to take the two newest Apple and Banana jokes and merge them both back into '''master'''. Let's first merge in '''banana-branch'''. We can do this using the '''merge''' command:

<source lang="bash">
$ git checkout master
Switched to branch 'master'
$ git merge banana-branch
Updating b770092..f876aac
Fast-forward
banana.txt | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
</source>

'''''WHEN YOU MERGE, YOU TAKE THE CHANGES FROM THE SPECIFIED BRANCH AND MERGE THEM INTO THE CURRENT WORKING BRANCH.''''' It is easy to get this mixed up. Think of it this way: the currently "open" branch is the only one that will get changed when you perform the merge.

[[File:SourceTree-Merge.jpg|400px|thumb|right|Merging '''apple-branch''' into '''master''']]

We now have the original Apple joke and the new Banana joke in the '''master''' branch.

Now let's merge in '''apple-branch'''. We can use the command line to do it, but let's see how it works in SourceTree. First press the "Merge" button in the toolbar. You will see a window like the one shown in the screenshot to the right. If everything looks good, press "OK" to perform the merge.

We now have both of the new jokes in our '''master''' branch:

<source lang="bash">
$ cat apple.txt
What kind of apple has a short temper? A crab apple!
$ cat banana.txt
What would you call two bananas? A pair of slippers!
$ cat carrot.txt
How do you make a soup rich? Add 14 carats to it!
</source>

Okay, so we are now happy with our Apple joke. Let's ''close'' that branch so that it doesn't show up in the list any more:

<source lang="bash">
$ git branch -d apple-branch
Deleted branch apple-branch (was c2c1738).
$ git branch -v
banana-branch f876aac First Banana Commit
* master 5159c4e Merge branch 'apple-branch'
</source>

Let's switch back to our banana branch, make a new joke, and commit that change to the banana branch:

<source lang="bash">
$ git checkout banana-branch
Switched to branch 'banana-branch'
$ echo 'What is the easiest way to make a banana split? Cut it in half!' > banana.txt
$ git commit -am 'Further revising our Banana joke'
[banana-branch cf6a894] Further revising our Banana joke
1 file changed, 1 insertion(+), 1 deletion(-)
</source>

Remember that '''git commit -a''' is shorthand for '''git add -A''' followed by a plain '''git commit''' in most cases.

But guess what: we changed our mind again! Let's try an ''even better'' banana joke. This time, I made the change using GUI tools:

# Open '''banana.txt''' in your favorite text editor and make the joke say, "Why are bananas never lonely? Because they hang around in bunches!"
# In SourceTree, press "Commit" in the toolbar
# Drag the file to the "Stage" pane, type a commit message like "The best banana joke ever!", and press "Commit"

Finally, let's merge our greatest Banana joke into '''master''' and close up '''banana-branch'''. Here is how to do it in SourceTree:

# Checkout '''master'''
# Press "Merge" in the toolbar
# Select '''banana-branch''' and press "Merge"
# To delete the branch, press "Branch" and then "Delete Branch" in the toolbar
# Select '''banana-branch''' only, press "Delete Branches", and when asked to confirm, press "OK"

We now have the three newest jokes in our '''master''' branch, and all other branches have been cleaned up.

After performing all of the steps in this example, here is how the tree looks in SourceTree:

[[File:SourceTree-Tree.jpg]]

== Conflicts ==

It might be the case that you inadvertently edit the same file on two different branches. If you do, when you merge one branch into another, a '''merge conflict''' will occur.

=== Example ===

Suppose both Apple and Banana change the Carrot joke:

<source lang="bash">
# Change the file in the Apple branch
$ git checkout apple-branch
Switched to branch 'apple-branch'
$ cat carrot.txt
How do you make a soup rich? Add 14 carats to it!
$ echo 'What\'s a Vegetable\'s favourite martial art? Carrotee!' > carrot.txt
$ git commit -am "Apple changing carrot joke"
[apple-branch f76f247] Apple changing carrot joke
1 file changed, 1 insertion(+), 1 deletion(-)

# Change the file in the Banana branch
$ git checkout banana-branch
Switched to branch 'banana-branch'
$ cat carrot.txt
How do you make a soup rich? Add 14 carats to it!
$ echo 'Why did the carrot get an award? Because he was outstanding in his field!' > carrot.txt
$ git commit -am "Banana changing carrot joke"
[banana-branch f565381] Banana changing carrot joke
1 file changed, 1 insertion(+), 1 deletion(-)

# Attempt to merge into master
$ git checkout master
Switched to branch 'master'
$ git merge apple-branch
Updating 7ed050b..f76f247
Fast-forward
carrot.txt | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
$ git merge banana-branch
Auto-merging carrot.txt
CONFLICT (content): Merge conflict in carrot.txt
Automatic merge failed; fix conflicts and then commit the result.
</source>

Yikes! What do we do next?

=== Resolving Merge Conflicts ===

There are two main ways to resolve merge conflicts: by manually editing the file and choosing the lines of code you want to keep, or by choosing one version of the file and replacing the other entirely.

==== Manually Editing the Conflicted File ====

When you open the file after running <code>git merge banana-branch</code> above, you will see something like this:

<source lang="text">
<<<<<<< HEAD
What's a Vegetable's favourite martial art? Carrotee!
=======
Why did the carrot get an award? Because he was outstanding in his field!
>>>>>>> banana-branch
</source>

Git added this notation to help you find which parts of the file were from the current branch (HEAD) and which ones were from the foreign branch (banana-branch). Simply edit the file to reflect the version you prefer, and then commit.

<source lang="bash">
$ emacs carrot.txt # edit the file to reflect the joke you want
$ cat carrot.txt # optionally check to make sure you've got the right version
Why did the carrot get an award? Because he was outstanding in his field!
$ git commit -am "Resolving conflict"
[master 98ba901] Resolving conflict
</source>

==== Keeping One Version and Replacing the Other ====

Git provides commands that will merge a file from a branch.

* If you want to keep the version in the current branch and ignore the version coming from the foreign branch, run <code>git checkout --ours carrot.txt</code>
* If you want to keep the version coming from the foreign branch and ignore the version in the current branch, run <code>git checkout --theirs carrot.txt</code>

Here is an example where we keep Banana's version of the joke:

<source lang="bash">
$ git checkout --theirs carrot.txt
$ cat carrot.txt # optionally check to make sure you've got the right version
Why did the carrot get an award? Because he was outstanding in his field!
$ git commit -am "Resolving conflict"
[master 1669536] Resolving conflict
</source>

Here is an example where we keep the existing version of the joke, which is Apple's version since we had already merged Apple into master:

<source lang="bash">
$ git checkout --ours carrot.txt
$ cat carrot.txt # optionally check to make sure you've got the right version
What's a Vegetable's favourite martial art? Carrotee!
$ git commit -am "Resolving conflict"
[master 1fdcd7b] Resolving conflict
</source>

'''Tip:''' If you are using SourceTree, you can right-click the conflicted file in the file browser and select "keep mine" or "keep theirs".

== Collaboration ==

Using Git's powerful branch and merge tools are ideal for team collaboration.

=== Collaboration Example ===

Here's the idea: everyone working on a feature has their own branch. Changes from each developer's branch are periodically merged in to the '''master''' branch, and developers periodically merge other people's changes from the '''master''' branch into their own branch. When the feature is complete and bug-free, the branch is closed.

Suppose there are three developers on a project: Susan, Caroline, and Rachel. They each have their own branch and are developing separate features. Susan is ready to merge her changes into '''master'''. Here is what might happen:

# Susan ''checks out'' the '''master''' branch locally.
# Susan ''pulls'' any changes that might be on '''origin/master''' into her local copy of '''master'''.
# Susan ''merges'' relevant changes from her branch into '''master'''.
# Susan ''checks out'' her own branch again.
# Susan ''pushes'' her repo updates to the remote repository.
# Caroline and Rachel ''check out'' the '''master''' branch locally.
# Caroline and Rachel ''pull'' the changes from '''origin/master''' to '''master'''.
# Caroline and Rachel ''check out'' their own branches locally.
# Caroline and Rachel ''merge'' '''master''' into their respective branches.
# Finally, Caroline and Rachel ''push'' everything up to the remote repository.

This can be a cumbersome process, but it is important that you perform it at least once per working session to ensure that everyone's branches are up-to-date.

=== Alternatives ===

Fortunately for us, there exist developers who have created additional command-line utilities that automate the above process. One such project is '''[https://github.com/aanand/git-up git-up]'''. You and your partner may elect to use '''git-up''' instead of manual branching and merging.

[[Category:Module 5]]

Linux

2017-01-18T15:54:43Z

James: /* Linux Distributions */

[[wikipedia:Linux|Linux]] is an [[wikipedia:Free and open-source software|open-source]] operating system based on [[wikipedia:UNIX|UNIX]]. Linux is highly versatile and is used in a wide range of applications. [[wikipedia:Desktop Linux|Desktop Linux]] is Linux with a GUI (like Microsoft Windows or Mac OS X); Desktop Linux is popular in niche markets, and it is used widely in developing countries.

Linux is the most widely used operating system for web servers. In CSE330, we will be interacting with Linux from the command line. This article covers the tools you need to make the best use of Linux.

== Linux Distributions ==

The open-source community is responsible for the development of many different [[wikipedia:Linux distributions|distributions]] of Linux. Distributions, or ''distros'', are different "flavors" of the Linux operating system with different objectives.

There are hundreds of distributions of Linux. Three of the main banches are [[wikipedia:Debian|Debian]], [[wikipedia:SuSE|SuSE]] (based on [[wikipedia:Slackware|Slackware]]), and [[wikipedia:Red Hat Enterprise Linux|Red Hat Enterprise Linux (RHEL)]].

The sections below discuss two of these branches and give recommendations of Linux distributions suitable for a web server. The CSE330 wiki provides instructions for both Debian-based and RHEL-based Linux distributions, so the choice of which to use is up to you. That being said, the majority of TAs have experience with Debian-based distributions. You may find better support while troubleshooting if you choose Ubuntu.

=== Debian ===

'''Debian''' was first introduced in 1993. Debian has a passionate following, and its repositories contain more software packages than any other mainstream Linux distribution. There are hundreds of derivatives of Debian. Debian's most popular desktop derivative is '''[[wikipedia:Ubuntu|Ubuntu]]'''.

Base Debian has a slow upgrade schedule, and because of this, it is an extremely stable operating system, making it well-suited for servers. '''[[wikipedia:Ubuntu Server|Ubuntu Server]]''' is also an excellent choice for a Debian-based web server.

=== Red Hat Enterprise Linux (RHEL) ===

Red Hat Enterprise Linux, or '''RHEL''', was first introduced in 1994. RHEL is known for being a good choice for enterprises that wish to use Linux as their primary OS. RHEL has an abundance of administration tools.

The Linux Lab in Lopata Hall uses '''[[wikipedia:Fedora Linux|Fedora Linux]]''', a desktop distribution based on RHEL. '''[[wikipedia:CentOS|CentOS]]''' is a popular RHEL derivative that is widely used in web servers. The '''[[wikipedia:Amazon Machine Image|Amazon EC2 Linux AMI]]''' is derived from CentOS, making it a distribution in the RHEL family.

=== Special Note: Linux Kernel and Modules ===
{{XKCD
|id=619
|name=supported_features
}}

What separates Linux from other Unix variants is its kernel. The kernel is the most important component of the operating system and is responsible for scheduling processes, providing access to the hardware devices, allocating memory to the programs, and so on.

The Linux kernel uses both monolithic and modular approaches. A monolithic kernel is a single program that contains all the code so any addition to kernel (such as code to access a driver) requires recompiling the code. A monolithic kernel is usually a little faster and could have a smaller size since only the absolutely necessary code is there. The modular kernel, on the other hand, enables dynamic loading and unloading of kernel code, called ''modules''. Typical modules include device drivers. Thanks to this modular approach, Linux seldom requires a reboot after installing a new device.

== Bash ==

In this course, you will be interacting with Linux primarily on the command line. The most widespread ''command line language'' is '''Bash'''. This is described in more detail in [[Bash|the Bash guide]].

== Files and Permissions ==

At the core of a Unix-based operating system is a directory structure with files and permissions.

=== Filesystem Hierarchy ===

The root directory of Linux contains a dozen or so subdirectories, each with a specific purpose:

* '''/bin''' contains [[Bash#Running Programs|binaries]] used by all users
* '''/sbin''' contains system binaries typically used only by the system administrator
* '''/lib''' contains libraries for the binaries found in '''/bin''' and '''/sbin'''
* '''/etc''' contains configuration files
** '''/etc/yum.conf''' Configuration file for yum
** '''/etc/yum/yum.repos.d''' Directory containing .repo files for online repositories
** '''/etc/crontab''' System-wide crontab file
** '''/etc/fstab''' Information about default partitions to be mounted
** '''/etc/group''' List of groups in the system
** '''/etc/hosts''' List of IP addresses with their names
** '''/etc/inittab''' What to do at each run-level
** '''/etc/inetd.conf''' Configuration file for some internet services (replaced by xinetd.* in most systems)
** '''/etc/modules.conf''' Module information for the boot
** '''/etc/motd''' Message to be seen at the login prompt
** '''/etc/passwd''' User information
** '''/etc/profile''' System level initial file for sh and its derivatives
** '''/etc/shadow''' User passwords
* '''/dev''' contains device files
* '''/proc''' contains information on currently running processes
* '''/var''' contains files whose contents is expected to change
** '''/var/log''' contains system log files
*** '''/var/log/messages''' System/Kernel messages
*** '''/var/log/syslog''' System log (mostly for Daemons)
*** '''/var/log/wtmp'''' User access log (binary)
*** '''/var/log/dmesg''' Boot-up messages
*** '''/var/log/auth.log''' Authorization logs
** '''/var/lib''' contains packages and database files
** '''/var/spool''' contains print queues
* '''/tmp''' contains temporary files that are deleted at system reboot
* '''/usr''' contains user programs
** '''/usr/bin''' contains binaries for user programs
** '''/usr/sbin''' contains binaries for system administrators
** '''/usr/lib''' contains libraries for '''/usr/bin''' and '''/usr/sbin'''
** '''/usr/local''' contains programs that you install from source
* '''/home''' contains users' home directories
* '''/root''' is root's home directory
* '''/boot''' contains boot loader files (do not touch unless you know what you are doing!)
* '''/opt''' contains optional add-on applications
* '''/mnt''' is where system administrators can mount filesystems
* '''/media''' contains links to removable media devices (for example, CDs)
* '''/srv''' contains site-specific data which are served by the system

For more information, see the Wikipedia article on the [[wikipedia:Filesystem Hierarchy Standard|Filesystem Hierarchy Standard]].

=== File Permissions ===

Every file in Linux has permissions that define which users can Read, Write, and Execute it. Every file has an owner and a group. The permissions for a file are set on three levels: User (owner), Group, and Other.

==== Symbolic Notation ====

When you view the permissions of a file in Linux, they will most often be displayed in ''symbolic notation''. Symbolic notation consists of 10 characters: the first defines the file type, and then there are three characters each for User, Group, and Other permissions.

* <code>-r--r--r--</code> is a normal file that is readable by all users but writable or executable by no one.
* <code>-rwxr-xr-x</code> is a normal file that is readable and executable by everyone but only writable by User (the file's owner). This is the most common permission set.

==== Viewing File Permissions ====

To view the permissions of all files in a certain directory, run the binary <code>ls -l</code> in Bash:

<source lang="bash">
$ ls -l # displays a list of all files in a directory with their permissions in symbolic notation
total 16
lrwxr-xr-x 1 sffc wheel 6 Aug 9 09:13 link -> myfile.txt
-rwxr--r-- 1 sffc wheel 12 Aug 9 09:13 myfile.txt
$ ls -l myfile.txt # displays the permissions of only myfile.txt
-rwxr--r-- 1 sffc wheel 12 Aug 9 09:13 myfile.txt
$
</source>

==== Setting File Permissions ====

Linux comes with several useful binaries for setting file permissions.

* '''chmod''' is used for setting permissions
* '''chown''' is used for setting a file's owner
* '''chgrp''' is used for setting a file's group

Some examples are shown below.

<source lang="bash">
$ chmod a+x myfile.txt # turns on the Execute option for all users
$ chmod o-w myfile.txt # turns off the Write option for Other users
$ chmod u+wx-r myfile.txt # turns on the Write and Execute options for User (the file's owner) and also turns off the Read option for User
$ chown todd myfile.txt # sets the owner of myfile.txt to the user todd. Note: First comes the user, then comes the filename: not the other way around!
$ chgrp staff myfile.txt # sets the group of myfile.txt to usergroup staff
$
</source>

For more information, see https://www.linux.com/learn/tutorials/760276-how-to-manage-file-and-folder-permissions-in-linux

=== The . and .. Directories ===

The '''.''' directory is a reference to the current directory. The '''..''' directory brings you one level up in the filesystem.

=== Symbolic Links ===

A [[wikipedia:Symbolic link|symbolic link]], or ''symlink'', is basically a link from one spot in the filesystem to another. You can think of them like ''aliases'' in Mac OS X. To create a a symlink, use the ''ln -s'' command:

<source lang="bash">
$ ln -s /path/to/file.txt /path/to/link # creates a symlink to file.txt at /path/to/link

# Example:
$ ln -s /home/todd/instructions.doc /var/www/public_html/classes/instructions.doc # creates a symlink in the web server to instructions.doc
$ vi /var/www/public_html/classes/instructions.doc # changes to the symbolic link will be reflected in the original file
$
</source>

== User Management ==

=== Adding a New User ===

To create a new user, use the '''useradd''' command. Then, set a password for that user using the '''passwd''' command:

<source lang="bash">
$ sudo useradd -r -m -c "My Full Name" myUserName
$ sudo passwd myUserName
Enter new UNIX password:
Retype new UNIX password:
$
</source>

'''Note:''' If Linux doesn't like your command, first check your syntax and then try it with single quotes around your full name and password instead of double quotes. If this works it is likely that you used some special characters in your password such as '!', which serves a special purpose in the shell. This is because Linux takes parameters enclosed in double quotes as one string, but still looks for special characters inside of the string and acts in accordance with their normal meaning. On the other hand, single quotes tell the shell to ignore any special characters within.

'''IMPORTANT:''' If you are using Ubuntu Server, new users are created with /bin/sh as their default shell. You want to use /bin/bash. To change the shell for your user, run this command:

<source lang="bash">
$ sudo chsh -s /bin/bash myUserName # changes shell for myUserName to /bin/bash
$
</source>

=== Adding a User to the Sudoers List ===

For security reasons, you should never SSH into your server as the root user. Instead, you should use a normal user to whom you give '''sudo''' privileges. (For more detail on sudo, see [[Linux#SUDO|the Linux guide]].)

To give a user sudo privileges, use the command '''visudo''', which opens up the SUDO configuration file in the system's default text editor. (Never edit the file ''/etc/sudoers'' directly!) SUDO users are specified using lines similar to

alice ALL=(ALL) ALL

Add that line immediately below the line defining '''root''':

root ALL=(ALL) ALL

When you are finished, save and close the file. For more information on editing files on the command line, refer to [[#File Editors|the section about File Editors in this guide]].

In this case, '''alice''' will be able to run any command with SUDO privileges on the computer. For more detail on SUDO configuration, see http://www.linuxhelp.net/guides/sudo/

'''Note:''' The visudo utility is especially useful because it not only locks the sudoers file against simultaneous edits, but it also checks the file for syntax errors when you quit. Therefore, it is always recommended that you use visudo to change the sudoers list rather than attempting to modify it directly.

== Networking ==

In Linux, you can see your network information by typing '''ifconfig'''. This command shows the status information of each network interface, including the IP address you will need to remotely connect to your instance. The interface ''lo'' is the special loopback interface with IP address 127.0.0.1. This refers to your local machine and any connection from your machine to your machine goes through this pseudo-interface. Typical network interfaces include ''eth0'', ''eth1'',..., ''wlan0'', etc. Ethernet cards are represented with ''ethX''. In the past, most wireless cards showed up as ''wlanX'', but it is also common now for them to be represented with ''ethX'' names. ''ifconfig'' also gives information such as hardware address (MAC), netmask, and broadcast addresses.

You can start or stop networking by calling ''/etc/init.d/networking'' script. As with most ''/etc/init.d'' scripts, this script takes several options, such as ''start'', ''stop'', ''restart''. Note even if you stop networking, you would still have your lo interface. You can look at the code of the script to find out what it actually does. You can also stop or start individual interfaces by using the '''ifup''' and '''ifdown''' commands.

The network configuration files are stored in ''/etc/network''. ''/etc/network/interfaces'' contains the defaults for each interface. For xample, you could specify static IP, netmask, network, broadcast and default gateway for an interface here, but you should not need to edit this files in general. These default options can be changed with the '''ifconfig''' command. The ''/etc/network/if-down.d'' and ''/etc/network/if-up.d'' directories contain the scripts that are going to be executed when an interface is turned on or off. Of course, most modern Linux distributions have GUI tools for doing network configuration more easily, and you shouldn't need to change anything for the purposes of this course.

== Synchronizing Date and Time ==

In order to avoid setting your system's time manually at every daylight savings change, you can use a Network Time Server via the Network Time Protocol (NTP).

The NTP Daemon comes pre-installed on EC2 AMI instances. To install it on Debian, install the '''ntp''' package from apt.

{{RequiredInstructions|content=

=== Setting Timezone ===

Your server is probably not set to the correct timezone by default.

The timezone files are in the directory ''/usr/share/zoneinfo''. They are further organized within subdirectories grouped by region. For instance, Rome's time zone file is stored within ''/usr/share/zoneinfo/Europe''.

In order to set the time zone, simply copy the desired time zone file to our ''/etc'' directory as a new file named "localtime". For example, to set the the machine's system time to Rome's time zone, we would enter the command

<source lang="bash">
sudo cp /usr/share/zoneinfo/Europe/Rome /etc/localtime
</source>

''ntp'' uses ''/etc/ntp.conf'' configuration file to find the ostnames of remote time servers. The defaults here are probably fine.

}}

== Installing Software ==

The package management tool in Red Hat Enterprise Linux (and therefore also your Amazon EC2 instance) is '''rpm'''. (In Debian, it is '''dpkg'''.) If you have an ''rpm'' package, you can install it by

<source lang="bash">
$ rpm -i somepackage.rpm
$
</source>

This requires that ''somepackage.rpm'' be in your current directory, which means you will have to download the file yourself (or create it). It requires you to manually install any dependencies the package has.

=== Repository-Based Package Managers ===

A better alternative is to use a repository-based package manager. In RHEL, this is '''yum'''; in Debian, it is '''apt'''.

Before you install new software, you need to ensure that your local list of available packages is up-to-date. Run one of the following commands to perform this operation:

* In RHEL: '''yum check-update'''
* In Debian: '''apt-get update'''

After you have ensured that your package list is synced with the remote repository, you can start installing packages. To install a package, use one of the following commands:

* In RHEL: '''yum install package-name'''
* In Debian: '''apt-get install package-name'''

If you get a permission denied error, try sudoing the command, like '''sudo apt-get install xxxx'''

For example, this is how you would install ''lynx'', a command-line web browser, in your RHEL Linux distribution:

<source lang="bash">
$ lynx --version # is lynx installed?
-bash: lynx: command not found
$ sudo yum check-update # sync package lists with the remote repositories
$ sudo yum install lynx # install the lynx package
Downloading Packages:
lynx-2.8.6-27.6.amzn1.i686.rpm | 1.8 MB 00:00
Running rpm_check_debug
Running Transaction Test
Transaction Test Succeeded
Running Transaction
Installing : lynx-2.8.6-27.6.amzn1.i686 1/1

Installed:
lynx.i686 0:2.8.6-27.6.amzn1

Complete!
$ lynx --version # test again to see if we have lynx installed
Lynx Version 2.8.6rel.5 (09 May 2007)
$
</source>

You can also search for available packages by name or by the name of a file that they install.

<source lang="bash">
$ yum search lynx # search for packages whose name contains lynx
======= N/S Matched: lynx =======
lynx.i686 : A text-based Web browser
$ yum provides lynx # search for packages that install a file or command named lynx
lynx-2.8.6-27.6.amzn1.i686 : A text-based Web browser
Repo : installed
Matched from:
Other : Provides-match: lynx
$
</source>

The list of repositories that '''yum''' searches is located at <code>/etc/yum.conf</code>. The list of repositories that '''apt''' searches is located at <code>/etc/apt/sources.list</code>.

{{RequiredInstructions|content=

=== Essential Packages ===

To save you some headaches later on, it is recommended that you install a few essential package bundles when you first create a new Linux instance. These packages include things like Make and a C compiler.

'''Debian:'''
<source lang="bash">
$ sudo apt-get install build-essential
</source>

'''RHEL:'''

<source lang="bash">
$ sudo yum groupinstall "Development Tools"
$ sudo yum install kernel-devel kernel-headers
</source>

}}

=== Searching for Packages ===

You can search for packages by name, command, and so on. For example, to search for all packages relating to "lynx", you could do:

'''Debian:'''
<source lang="bash">
$ apt-cache search lynx
</source>

'''RHEL:'''
<source lang="bash">
$ yum search lynx
</source>

== Command Reference ==
{{XKCD
|id=196
|name=command_line_fu
}}

Earlier, you saw that '''cat''' is a command that shows the contents of a file. Below is a list of other useful commands in Linux.

=== Navigation and File Management ===

* '''ls''' List file(s) in current working directory
** '''ll''' Shortcut to '''ls -l'''. List files with more details than '''ls'''. Only available in certain distributions
* '''cd''' Change working directory. Note: cd called without any arguments moves you to your home directory
* '''cp''' Copy a file
* '''mv''' Move or rename a file
* '''rm''' Remove a file
** '''rm -r''' Remove a directory and all files in it
* '''ln -s''' Create a symlink to a file
* '''mkdir''' Create a directory
* '''rmdir''' Remove a directory (directory must be empty; if it's not, use '''rm -r''')
* '''cat''' Display the contents of a file
* '''less''' Display the contents of a file, wait for the user at each page
* '''tail''' Display the last 20 lines of a file
** '''tail -f''' Display the last 20 lines of a file and then wait for changes, displaying them as they occur. Useful for monitoring log files.
* '''chown''' Change the owner of a file
* '''chgrp''' Change the group of a file
* '''chmod''' Change the security permissions of a file
* '''grep''' Display the lines of a file matching a user specified string
* '''diff''' Display the difference between two files

=== System Administration ===

* '''df''' Display free diskspace
* '''du''' Display disk usage
* '''free''' Display memory usage information
* '''date''' Display current time and date
* '''top''' Display the CPU and Memory usages of current processes
* '''ps''' Display current processes
* '''kill''' Terminate a running process
* '''killall''' Terminate the running process matching user specified criterias
* '''ping hostname''' Ping a host
* '''host''' Get the IP address of a host
* '''passwd''' Change the user password
* '''su user''' Switch to the privileges of another user
* '''shutdown''' Power off the computer
* '''reboot''' Reboot the computer
* '''clear''' Clear the terminal
* '''ifconfig''' Display/Configure a network device
* '''file''' Show the file type
* '''lsmod''' Display loaded kernel modules
* '''insmod''' Install a kernel module
* '''modprobe''' Load a kernel module (also load the dependencies)
* '''adduser''' Add a new user
* '''exit''' Exit from a shell
* '''lpr''' Print a file
* '''head''' Display lines at the beginning of a file
* '''tail''' Display lines at the end of a file
* '''pwd''' Display the name of the current working directory
* '''lsof''' Open files in the system
* '''netstat''' Statistics related to open sockets
* '''vmstat''' Reports information about processes, memory, IO, and CPU

=== File Editors ===
{{XKCD
|name=real_programmers
|id=378
}}

It is sometimes convenient to edit files using the command line. Three widely-used command line text editors are '''vi''', '''emacs''', and '''nano'''.

==== Vi ====

To edit a file using Vi, use the command '''vi'''. You will see something like this:

.
~
~
~
~
~
~
~
~
~
~
~
~
"myfile.txt" [New File]

To insert text into the file, press '''i''' once, then type away:

Hello World
~
~
~
~
~
~
~
~
~
~
~
~
-- INSERT --

To leave insert mode, press ESC.

To save your file, type the command ''':w''' and press Enter.

Hello World
~
~
~
~
~
~
~
~
~
~
~
~
"myfile.txt" [New] 1L, 12C written

To save and then close your file, type the command ''':wq'''. (To close the file without saving, use the command ''':q!''')

For more vi commands, see http://ss64.com/vi.html

==== Emacs ====

To edit a file using emacs, use the command '''emacs'''. You can start typing immediately:

Hello World

-uuu:**-F1 myfile.txt All L1 (Text)----------

To save a file, type '''C-x C-s''' (that means Control-X, then Control-S):

Hello World

-uuu:---F1 myfile.txt All L1 (Text)----------
Wrote /home/todd/myfile.txt

To quit emacs, type '''C-x C-c'''. (It will ask you whether or not to save the file if you've made changes.)

For more emacs commands, see http://souptonuts.sourceforge.net/chirico/emacs_ref.html

==== Nano ====

To edit a file using nano, use the command '''nano'''. You can start editing the file immediately:

GNU nano 2.0.6 File: myfile.txt

Hello World

^G Get Help ^O WriteOut ^R Read File ^Y Prev Page ^K Cut Text ^C Cur Pos
^X Exit ^J Justify ^W Where Is ^V Next Page ^U UnCut Text ^T To Spell

Nano tells you the commands you need right there so you don't have to always keep looking them up like with Vi and Emacs.

For more detail on Nano commands, see http://www.nano-editor.org/dist/v2.2/nano.html

== Linux Resources ==

[http://www.yolinux.com/TUTORIALS/LinuxTutorialSysAdmin.html Linux System Administration Tutorial]

[http://www-uxsup.csx.cam.ac.uk/pub/doc/suse/suse9.0/userguide-9.0/ch24.html Working with the Shell (SUSE Documentation)]

[http://en.wikipedia.org/wiki/Linux_kernel Linux Kernel]

[http://www.yolinux.com/TUTORIALS/LinuxTutorialAdvanced_vi.html VI Tutorial]

[http://students.cec.wustl.edu/~jg18/guide/ Making the Transition to Linux: A Guide to the Linux Command Line Interface for Students]

[[Category:Module 2]]

Module 6

2017-01-18T01:07:18Z

James: /* Grading */

__NOTOC__
Module 6 builds upon the JavaScript skills you learned in Module 5.

== Reading ==

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

* [[Node.JS]]
* [[Socket.IO]]

== Individual Assignments ==

=== Install Node.JS ===

Install Node.JS from Apt or Yum according to the instructions in the [[Node.JS]] guide.

=== Static File Server in Node.JS ===

The individual portion of Module 6 is short in order to give you enough time to complete the group portion.

# Copy the example code from the Node.JS guide into a file called ''static_server.js'' or something of that nature. Save it on your EC2 instance (but not in a place that Apache can serve!).
#: Ensure that you understand what the static file server script is doing…
# Make a directory parallel to ''static_server.js'' named ''static''.
# Change "<STATIC DIRECTORY NAME>" on line 11 of the static fileserver example code to reflect the name of the directory you just made.
# Save the following files in your ''static'' directory:
#* ''hello.txt'', a text file containing "Hello World"
#* ''brookings.jpg'', an image file you can download from here: http://classes.engineering.wustl.edu/cse330/content/brookings.jpg
#* ''college.html'', an HTML document based on the [[HTML and CSS#Quick and Easy Page Layout|Quick and Easy HTML Layout]] containing an image tag pointing to ''brookings.jpg''
#* ''phpinfo.php'', a PHP file containing the phpinfo command that generates a diagnostic page of the server:
#: <source lang="php"><?php phpinfo(); ?></source>
# Boot up your Node.JS static fileserver, and from your browser, load all four of the files you created in step 4.
#: Which ones work and which ones don't? Why might this be the case?

== Group Project ==

In the group portion of Module 6 you will create a multi-room chat server using Node.JS and Socket.IO.

This chat service will contain a main lobby where users sign on with a nickname and can communicate with each other. Users may also create chat rooms for other to join. The entire app should be displayed on a single webpage, listing the room you are in, all available rooms, and the users in the current room.

The single room chat server and client are provided here: [[Socket.IO]]

== Grading ==

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

'''Assignments must be committed to Bitbucket by the end of class on the due date (commit early and often). Failing to commit by the end of class on the due date will result in a 0. Assignments must be demoed within 4 days of the due date (Friday at 11:30 AM for Module 6). '''

#''You must save your repo as:''
#*"<Season><year>-Module<#>-StudentID"
#*(ie. Spring2025-Module3-201343)
#''For the group project, you must save your repo as:''
#*"<Season><year>-Module<#>-StudentID1-StudentID2"
#*(ie. Spring2025-Module5-201343-301452)

'''If you do not name your repo correctly, the TA's are not responsible for grading your assignment. If we cannot find it, you will receive a zero.'''

_________

# '''Individual Portion (25 Points):'''
#* Node.JS is installed on your EC2 instance (5 points)
#* The ''hello.txt'', ''brookings.jpg'', and ''college.html'' files all load successfully (4 points each)
#* Visiting a file that does not exist inside the ''static'' directory results in a 404 (4 points)
#* You can explain to the TA why ''phpinfo.php'' behaves the way it does when loaded through Node.JS (4 points)
#* Make sure your individual portion files are pushed to Bitbucket
# '''Multi-room Chat Server (50 Points):'''
#* '''''Administration of user created chat rooms (25 Points):'''''
#** Users can create chat rooms with an arbitrary room name(5 points)
#** Users can join an arbitrary chat room (5 points)
#** The chat room displays all users currently in the room (5 points)
#** A private room can be created that is password protected (5 points)
#** Creators of chat rooms can temporarily kick others out of the room (3 points)
#** Creators of chat rooms can permanently ban users from joining that particular room (2 points)
#* '''''Messaging (5 Points):'''''
#** A user's message shows their username and is sent to everyone in the room (1 point)
#** Users can send private messages to another user in the same room (4 points)
#* '''''Best Practices (5 Points):'''''
#** Code is well formatted and easy to read, with proper commenting (2 points)
#** Code passes HTML validation (2 points)
#** node_modules folder is ignored by version control (1 points)
#* '''''Usability (5 Points):'''''
#** Communicating with others and joining rooms is easy and intuitive (4 points)
#** Site is visually appealing (1 point)
#* '''Creative Portion (10 Points)'''
#** Make sure to create a README.md file pointing to your server

[[Category:Module 6]]
[[Category:Modules]]

Module 5

2017-01-18T01:06:28Z

James: /* Grading */

__NOTOC__
In Module 5, you will learn JavaScript, the dominant client-side web language. JavaScript is the third and final programming language you will learn in CSE 330.

This article contains your assignments for Module 5.

'''Warning:'''

''This module takes students a while. It is strongly recommended that you start early and ask questions as they come up.''

== Reading ==

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

* [[JavaScript]]
* [[AJAX and JSON]]
* [[jQuery]]
* [[Web Application Security, Part 3]]

== Individual Assignments ==

'''''IMPORTANT:'' Both of the individual assignments must be completed ''without'' using a JavaScript library like jQuery.''' However, you may (and should) use jQuery for the group portion.

=== JavaScript Calculator ===

In Module 2, you made a calculator using PHP. Now you will be making one using JavaScript.

* The web page should have two input fields and a radio button group for the operation, with the 4 basic math operations represented (add, subtract, multiply, divide).
* JavaScript should monitor all three fields and display the current result whenever the user changes any value in any field, without refreshing the page.
*: '''Tip 1:''' Consider using either the ''change'' or the ''keyup'' event on the text fields, and either the ''change'' or the ''click'' event on the radio buttons.
*: '''Tip 2:''' Re-read [[JavaScript|the JavaScript guide]] if you need help figuring our how to bind callback functions to events, or how to determine which radio button is currently selected. (There are examples for both of these!)
* The calculator should be completely self-contained; i.e., you should not be making any requests to any other server-side or client-side scripts or web pages after the initial page load.

'''Tip:''' You can embed JavaScript code into an HTML document like this:

<source lang="html4strict">
<script type="text/javascript">
// your code here
</script>
</source>

'''Tip:''' If your code isn't working the way you expect, use a JavaScript error console. In Chrome, for example, press Ctrl-Shift-I (or Cmd-Option-I) to open the WebKit inspector.

'''Important:''' It is best practice to fully separate the content, appearance, and behavior. In previous modules, you may have lost points for using HTML tags that change the appearance of things <nowiki>(like <center> and <font>).</nowiki> In this module, make sure that you define your event listeners in JavaScript as in <code>document.getElementById("xyz").addEventListener(...)</code> and '''''not''''' in the HTML like <code><button onclick="badExample();">Bad Example</button></code>.

=== Weather Widget ===

In this section, you will make a web page that displays the weather forecast using AJAX requests to a weather server.

# Make an empty HTML document; name it '''weather.html'''
#: Refer to the [[HTML and CSS]] guide for the skeleton of an HTML document
# Define a function in JavaScript; call it '''fetchWeather()'''. You may write your JavaScript in an embedded script in your HTML document.
# Inside your '''fetchWeather()''' function, make an AJAX request to the weather server.
#: We have a server that outputs the current weather in JSON format. The format is documented in the [[#JSON Structure]] section below.
#: '''URL:''' http://classes.engineering.wustl.edu/cse330/content/weather_json.php
#: We kindly thank Yahoo Weather for providing us with up-to-date weather information.
#* '''IMPORTANT:''' Under normal circumstances, AJAX requests ''cannot'' be performed cross-domain for security reasons. We have set the <code>Access-Control-Allow-Origin</code> header on our server to allow requests from your EC2 instances, or from localhost. '''You will therefore need to upload your code to your EC2, or access it via localhost, in order for the AJAX requests to work.''' This means that you cannot, for example, complete this part of the individual portion in JSFiddle.
# In your callback, process the JSON and use JavaScript to manipulate the HTML DOM to display the following information on your page:
#* Location
#** City, in a <nowiki><strong></nowiki> tag
#** State, not in any tag
#* Humidity
#* Current Temperature
#* Image for Tomorrow's Forecast (see [[#Weather Condition Images]] below for more information)
#* Image for the Day After Tomorrow's Forecast
# Finally, bind '''fetchWeather()''' to the DOMContentLoaded event so that your weather widget is automatically initialized when the page is loaded:
#: <source lang="javascript">document.addEventListener("DOMContentLoaded", fetchWeather, false);</source>
# In addition, add a button that runs your ''fetchWeather'' function when clicked. This should update your widget with the current weather conditions.

Use the following HTML:

<source lang="html4strict">
<div class="weather" id="weatherWidget">
<div class="weather-loc"></div>
<div class="weather-humidity"></div>
<div class="weather-temp"></div>
<img class="weather-tomorrow" />
<img class="weather-dayaftertomorrow" />
</div>
</source>

Include the CSS file from here: http://classes.engineering.wustl.edu/cse330/content/weather.css

When everything is working, the weather widget should look something like this:

[[File:WeatherWidget.png]]

'''Important:''' The widget in this section needs to work in only Firefox and Chrome. It does '''''not''''' need to work Internet Explorer.

==== Tips ====

===== JSON Structure =====

The JSON from our server looks like this:

<source lang="javascript">
{
"updated": "Thu, 11 Oct 2012 5:54 pm CDT",
"location": {
"city": "St. Louis",
"state": "MO"
},
"wind": {
"chill": "62",
"direction": "150",
"speed": "3 mph"
},
"atmosphere": {
"humidity": "50",
"visibility": "10",
"pressure": "30.12 in"
},
"current": {
"code": "28",
"text": "Mostly Cloudy",
"temp": "62°F",
"date": "Thu, 11 Oct 2012 5:54 pm CDT"
},
"tomorrow": {
"code": "29",
"text": "Clouds Early/Clearing Late",
"low": "45°F",
"high": "61°F"
},
"dayafter": {
"code": "30",
"text": "Partly Cloudy",
"low": "53°F",
"high": "65°F"
},
"credit": "http://us.rd.yahoo.com/dailynews/rss/weather/St._Louis__MO/*http://weather.yahoo.com/forecast/USMO0170_f.html"
}
</source>

===== Weather Condition Images =====

Each day's forecast has a code. There are images associated with these codes.

One place to get the images is from here: <nowiki>http://us.yimg.com/i/us/nws/weather/gr/</nowiki>'''##'''<nowiki>ds.png</nowiki>

Replace the '''##''' with the forecast code. For example, for code 32, the URL would be: http://us.yimg.com/i/us/nws/weather/gr/32ds.png

== Group Project ==

I forgot if I already mentioned this, but '''start early on this project!''' It will take longer than you think, I promise!

You are encouraged to use the advanced version control practices you learned in Module 5 when completing this assignment.

=== Calendar ===

Build a simple calendar that allows users to add and remove events dynamically.

You will use JavaScript to process user interactions at the web browser, without ever refreshing the browser after the initial web page load. You may use a JavaScript library of your choice, including Ext JS.

Your application should utilize AJAX to run server-side scripts that query your database to save and retrieve information, including user accounts and events.

We have also written some functions to help you get started: [[JavaScript Calendar Library]]

==== Examples ====

* https://calendar.google.com/
* http://www.zoho.com/calendar/

==== Server Side Language ====

Additionally, you may use a database of your choice. MySQL is probably the logical choice since you have been using it since Module 2, but if you're up for a challenge we encourage you to look at other database options like [[wikipedia:MongoDB|MongoDB]].

==== Requirements ====

* Support a month-by-month view of the calendar.
*: Show one month at a time, with buttons to move forward or backward.
*: There should be no limit to how far forward or backward the user can go.
* Users can register and log in to the website.
*: You may leverage your MySQL project code and database from module 3 to get started.
* Unregistered users should see no events on the calendar.
* Registered users can add events.
*: All events should have a date and time, but do not need to have a duration.
*: You do ''not'' need to support recurring events (where you add an event that repeats, for example, every monday).
* Registered users see only events that they have added.
*: Your AJAX should not ask the server for events from a certain username. Instead, your AJAX should ask the server for events, and the server should respond with the events for only the currently-logged-in user (from the session). Can you think of why?
* Registered users can delete their events, but not the events of others.
*: Again, the server should delete events based on the username present in the session. (If it deletes only based on an Event ID, an attacker could feed any arbitrary Event ID to your server, even if he/she didn't own that event.)
* All user and event data should be kept in a database.
* At no time should the main page need to be reloaded.
*: User registration, user authentication, event addition, and event deletion should all be handled by JavaScript and AJAX requests to your server.
* Your page needs to work in the versions of Firefox and Chrome installed on the lab computers.

'''Tip:''' Run your database schema by a TA before implementing it.

=== 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 3]]

In particular:

* '''Your application needs to prevent XSS attacks.''' Be careful when transmitting data over JSON that will be reflected in an event title! (Note: JSON data should be sanitized on the client side, not the server side.)
* '''Perform precautionary measures to prevent session hijacking attacks.'''
*: You should specify your session cookie to be HTTP-Only. However, for the means of this module, you need not test for user agent consistency.
* '''Optional:''' Validate your JavaScript code using [http://www.jshint.com/ JSHint] '''''or''''' [http://jslint.com/ JSLint] for up to 3 points of extra credit.

You should continue the practices that you have learned in past weeks:

* Pass tokens in forms to prevent CSRF attacks.
*: '''Hint:''' You will need to send your CSRF tokens in your AJAX requests. Remember that AJAX still submits forms and runs server-side scripts, just like the vanilla forms you've been using in Modules 2 and 3.
* Use prepared queries to prevent SQL Injection attacks.
* If storing passwords in a database, always store them salted and encrypted.
* 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.

'''Assignments must be committed to Bitbucket by the end of class on the due date (commit early and often). Failing to commit by the end of class on the due date will result in a 0. '''

#''You must save your repo as:''
#*"<Season><year>-Module<#>-StudentID"
#*(ie. Spring2025-Module3-201343)
#''For the group project, you must save your repo as:''
#*"<Season><year>-Module<#>-StudentID1-StudentID2"
#*(ie. Spring2025-Module5-201343-301452)

'''If you do not name your repo correctly, or share your repo with cse330, the TA's are not responsible for grading your assignment. If we cannot find it, you will receive a zero.'''

_________

# '''JavaScript Calculator (10 Points):'''
#* Calculator successfully adds, subtracts, multiplies, and divides numbers (3 points)
#* The result is automatically computed when a value in either field is changed (3 points)
#* Calculator is written entirely in pure, conventional JavaScript with no external libraries (4 points)*
#*: ''Note: be sure to fully separate content, appearance, and behavior. This means that you should '''not''' use the event attributes on the HTML elements like onclick, onchange, and onkeyup.''
# '''Weather Widget (15 Points):'''
#* Widget performs an AJAX request to fetch the current weather (4 points)
#* The HTML template is filled with the correct information, including an image (4 points)
#* Button to reload the weather widget (2 points)
#* Widget is written entirely in pure, conventional JavaScript with no external libraries (5 points)*
# '''AJAX Calendar (60 Points):'''
#* '''''Calendar View (10 Points):'''''
#** The calendar is displayed as a table grid with days as the columns and weeks as the rows, one month at a time (5 points)
#** The user can view different months as far in the past or future as desired (5 points)
#* '''''User and Event Management (25 Points):'''''
#** Events can be added, modified, and deleted (5 points)
#** Events have a title, date, and time (2 points)
#** Users can log into the site, and they cannot view or manipulate events associated with other users (8 points)
#**: ''Don't fall into the Abuse of Functionality trap! Check user credentials on the server side as well as on the client side.''
#** All actions are performed over AJAX, without ever needing to reload the page (10 points)
#* '''''Best Practices (20 Points):'''''
#** Code is well formatted and easy to read, with proper commenting (2 points)
#** If storing passwords, they are stored salted and encrypted; if using OpenID, you are storing the user's OpenID identifier in the database (2 points)
#** All AJAX requests that either contain sensitive information or modify something on the server are performed via POST, not GET (3 points)
#** Safe from XSS attacks; that is, all content is escaped on output (3 points)
#** Safe from SQL Injection attacks (2 points)
#** CSRF tokens are passed when editing or removing events (3 points)
#** Session cookie is HTTP-Only (3 points)
#** Page passes the W3C validator (2 points)
#** ''Extra Credit:'' Your code passes ''JSHint'' or ''JSLint'' (+3 bonus points)
#* '''''Usability (5 Points):'''''
#** Site is intuitive to use and navigate (4 points)
#** Site is visually appealing (1 point)
# '''Creative Portion (15 Points)'''
#* '''Additional Calendars Features (worth 15 points):''' Develop some additional features for the calendar, a few examples are provided below.
#** Users can tag an event with a particular category and enable/disable those tags in the calendar view. (5 points)
#** Users can share their calendar with additional users. (5 points)
#** Users can create group events that display on multiple users calendars (5 points)
#* '''Make sure to save a description of your creative portion, and a link to your server in your README.md file.'''
''* These points can be earned only if at least 3 other points have been earned in that category. This is to prevent these points from being "free."''

[[Category:Module 5]]
[[Category:Modules]]

Module 4

2017-01-17T20:13:39Z

James: /* Grading */

__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 the string "hello world" in a sentence
# 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
Examples:
Regex 1: Programmers will often write ''[[hello world]]'' as their first project with a programming language.
Regex 2: The ''[[gooey]]'' peanut butter and jelly sandwich was a ''[[beauty]]''.
Regex 3: ''[[AA312]]'' (should match)
''[[AA1298]]'' (should match)
''[[NW1234]]'' (should match)
''[[US443]]'' (should match)
US31344 (should NOT match)

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.

'''Assignments must be committed to Bitbucket by the end of class on the due date (commit early and often). Failing to commit by the end of class on the due date will result in a 0. '''

Upload your baseball code, a file with your Regular expressions, and a screenshot of your python output onto bitbucket, and we will use the time-stamps to determine late-penalties.

#''You must save your repo as:''
#*"<Season><year>-Module<#>-StudentID"
#*(ie. Spring2025-Module3-201343)

'''If you do not name your repo correctly, the TA's are not responsible for grading your assignment. If we cannot find it, you will receive a zero.'''

# '''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

2017-01-17T20:12:16Z

James: /* 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.

=== 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 330S
#: ''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 330S (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 330S grade)
#*** 0
#*** 95
#* '''Matt Freeman'''
#** E-mail: '''mfreeman@kickinbassist.net'''
#** Student ID: '''202'''
#** Grades:
#*** 100 (CSE 330S grade)
#*** 90.5
#*** 94.8
#* '''Marc Roberge'''
#** E-mail: '''mroberge@ofarevolution.us'''
#** Student ID: '''115'''
#** Grades:
#*** 75 (CSE 330S 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 CSE330S.
#: '''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 Git 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.
*: A link can be associated with each story, and they should be stored in a separate database field from the story
* 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 links).
* 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.

'''Assignments must be committed to Bitbucket by the end of class on the due date (commit early and often). Failing to commit by the end of class on the due date will result in a 0. '''

#''You must save your repo as:''
#*"<Season><year>-Module<#>-StudentID"
#*(ie. Spring2025-Module3-201343)
#''For the group project, you must save your repo as:''
#*"<Season><year>-Module<#>-StudentID1-StudentID2"
#*(ie. Spring2025-Module3-201343-314450)

'''If you do not name your repo correctly, or share it with cse330, the TA's are not responsible for grading your assignment. If we cannot find it, you will receive a zero.'''

________

# '''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, and they should be stored in a separate database field from the story (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, with proper commenting (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 README.md file in your group repo with the following:'''''
#** Names and Student IDs of all the group members
#** A link to your homepage of the site
#** A brief description of what you did for your creative portion
#** Any additional login details needed for the TA

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

Module 2

2017-01-17T20:10:07Z

James: /* Grading */

__NOTOC__
Module 2 introduces you to Linux, a command-line environment, the Apache web server, and PHP. You will create and configure your own cloud instance, install Apache and related software, and then form groups to make a simple file sharing site.

<span style="font-size:1.3em; line-height:1.2em; color:blue;">'''DO NOT WAIT UNTIL THE LAST MINUTE TO START ON THIS (or any) MODULE!''' The most common reason students perform poorly in this class is procrastination. You have been warned.</span>

== Reading ==

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

* [[Linux]]
* [[Bash]]
* [[Amazon Web Services]]
* [[SSH]]
* [[Apache]]
* [[PHP]]
* [[Workflow]]
* [[Web Application Security, Part 1]]

== Individual Assignments ==

{{RequiredInstructions|content=

<span style="color:red">There are a lot of wiki pages that you need to read in order to complete the individual portion of Module 2. The wiki pages contain an assortment of required steps, optional steps, and information. To make things easier, we have highlighted the ''required steps'' with a red bar, like you see on the left of this message. Do not skip anything marked with a red bar, or else you will not have a perfectly configured instance.</span>

}}

=== Learn About Linux ===

Linux is an open-source operating system based on UNIX. Linux is highly versatile and is used in a wide range of applications.

If you are not a Linux guru, read the Linux guide to get started: [[Linux]]

=== Install Cygwin: Windows Users Only ===

You will need Cygwin in order to log into and configure your EC2 instance. Cygwin is already installed on the CEC machines. Instructions for installing Cygwin on your personal machine are located in [[Workflow#Cygwin|the Workflow guide]].

Mac OS X users should located the "Terminal" application, which is installed by default; you will need this in the coming steps.

=== Create an AWS EC2 Instance ===

Once you understand [[Linux]], you need to set up your Amazon EC2 Instance. Use the AWS article to guide you through the process: [[Amazon Web Services]]

=== Configure SSH ===

Follow the instructions in [[SSH#SSH Configuration|the SSH guide]] to do the following:

# Create your own SSH key pair
# Log in as the default user to your EC2 instance
# Create a new user
# Give the new user your SSH public key

From now on, when you need to log into your EC2 instance as an administrator, just pop up a terminal and run:

<source lang="bash">
$ ssh your-username@ec2-xx-xx-xx-xx.compute-1.amazonaws.com
</source>

=== Install Essential Packages ===

Recall that software installation in Linux instances is usually handled through '''apt''' (Debian) or '''yum''' (RHEL). For more information, refer to [[Linux#Repository-Based Package Managers|the Linux guide]].

To make sure everything is working properly, '''install your first package(s) according to the ''Essential Packages'' subsection in the Linux guide.'''

=== Set the Timezone ===

'''Set your server to use US Central time (America/Chicago).''' Instructions are in the Linux guide: [[Linux#Synchronizing Date and Time]]

=== Set Up the Apache Web Server ===

You need to '''install the Apache web server on your EC2 instance'''. Refer to [[Apache|the Apache guide]].

In order for your web server to be accessible, you need to '''open up Port 80 on your EC2 instance'''. Instructions are in the AWS guide: [[Amazon Web Services#Enabling Web Access to your EC2 Instance]]

'''Enable the UserDir module in Apache.''' Instructions are in the Apache guide: [[Apache#The UserDir Module]]

=== Install PHP ===

You need to '''install PHP on your EC2 server'''. Instructions are at the top of the PHP guide: [[PHP]]

You need to '''configure PHP to show errors'''. Instructions are immediately below installation in the PHP guide.

=== Learn the PHP Language ===

Before you can continue, you will need to make yourself acquainted with PHP language components. Read the PHP guide for an overview: [[PHP#PHP Language Components]]

=== Set Up your Workspace ===

You are now ready to set up the workspace that you will be using for the rest of the semester. Follow the instructions in [[Workflow]] to:

# Make an account on Bitbucket
# Make a repository for your individual work for CSE 330
# Install SourceTree
# '''Windows only:''' Set up Pageant so that SourceTree can conect to Bitbucket
# Clone your CSE 330 repo from Bitbucket
# Install Komodo Edit
# Create a Komodo Edit Project inside of your Git repository
# Add the ''*.komodoproject'' file to ''.gitignore''
# Install FileZilla
# Connect FileZilla to your remote instance

=== Calculator ===

'''Make a calculator using PHP and an HTML form.''' The form should have two inputs. The form should submit a GET request either back to the same page or to a different results page. The calculator should support addition, subtraction, multiplication, and division by means of a radio button group on the page. (Consider edge cases!)

== Group Project ==

You will work in pairs (that means you and one other person) on this project.

<span style="font-size:1.3em; line-height:1.2em; color:blue;">In this module, and all future modules, the group portion builds off of material you learn in the individual portion. You should therefore complete the individual portions prior to working on the group portions. (Trust us: it will make your life easier!)</span>

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

=== Simple File Sharing Site ===

You will be making a simple file sharing site that supports uploading, viewing, and deleting files associated with various users. Details:

* You should have a file named '''users.txt''' stored in a secure place on your filesystem. It should have at least three usernames, with one username per line.
*: Passwords add an extra layer of complexity (encryption) that we will cover in Module 3. You will not earn credit for implementing passwords as your creative portion for this module.
* Users of the file sharing site should be able to enter their username and then log in.
*: You may implement logins using session variables, or you may implement them using a GET parameter that is passed between pages. You will need to always use sessions starting in Module 3.
* Users should see a list of all files associated with their username after the log in.
* Users should be able to view, upload, and delete files associated with their username.
* The URI should NOT reveal the internal file structure of your web site.
** Example of what not to do: http://www.example.com/download.php?file=/home/paul/file.txt
** Another bad example: http://www.example.com/~user/file.txt
** Good example: http://www.example.com/view.php?user=music&name=file.txt
*: In general, don't reveal any internal information about the site.
*: '''Food for thought:''' Given that Apache processes (with the exception of the main process) do not run as root, but rather as the user apache, how can you allow both your user account and the php scripts to read and write the
*:necessary files?
*:: ''Hint:'' You shouldn't be storing the user-uploaded files in public_html (that is only the place for your own web-page files),
*::''Hint number 2:'' you will need to use chown to change permissions to let user apache (or www-data for Ubuntu) have permissions on the user-files (that '''are not''' in the public_html folder). If you don't know what this does or how to do this, look at the [[Apache]] page
* You should customize your file sharing site by implementing an additional feature or two as part of the '''creative portion'''.

You will probably find the PHP guide on this wiki to be helpful: [[PHP#Other PHP Tips]]

=== 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 1]]

In particular:

* '''Your application needs to follow the conventions of FIEO (Filter Input and Escape Output)'''. Things you should filter include file names, usernames, and so on.
* '''Your project must pass the W3C Validator with no errors'''. For more information, see the HTML and CSS guide: [[HTML and CSS#Validation]]

== Grading ==

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

'''Assignments must be committed to Bitbucket by the end of class on the due date (commit early and often). Failing to commit by the end of class on the due date will result in a 0.
#''You must save your repo as:''
#*"<Season><year>-Module<#>-StudentID"
#*(ie. Spring2025-Module3-201343)
#''For the group project, you must save your repo as:''
#*"<Season><year>-Module<#>-StudentID1-StudentID2"
#*(ie. Spring2025-Module3-201343-312532)
#* OR, if you are working alone, put both your individual and group portions in your individual repo

'''If you do not name your repo correctly, or share it with cse330, the TA's are not responsible for grading your assignment. If we cannot find it, you will receive a zero.'''

_____________

# '''Cloud Instance and Web Server (30 Points):'''
#* You can SSH into your instance using your own custom username and SSH key (15 points)
#* Your custom username is able to perform SUDO commands (5 points)
#* The time zone is correct on your instance (5 points)
#* The UserDir Apache module is working (5 points)
# '''PHP Calculator (15 Points):'''
#* The calculator is able to perform all four functions (2 points each, 8 points in total)
#* Each function is given as a radio button choice (4 points)
#* The calculator page passes the W3C HTML validator (3 points)
# '''File Sharing Site (40 Points):'''
#* '''''File Management (25 Points):'''''
#** Users should not be able to see any files until they enter a username and log in (4 points)
#**: ''Remember that users.txt should be stored in a secure location on your filesystem. That is, '''you should not be able to type any URL into your browser and see the raw users.txt file!'''''
#** Users can see a list of all files they have uploaded (4 points)
#** Users can open files they have previously uploaded (5 points)
#**: ''Note: Users should be able to open not only plain text files but also other file formats: images, spreadsheets, etc.''
#** Users can upload files (4 points)
#**: ''Note: Like users.txt, uploaded files should be stored in a secure location on your filesystem. That is, '''do not keep your uploads directory underneath a directory served by Apache!'''''
#** Users can delete files. If a file is "deleted", it should actually be removed from the filesystem (4 points)
#** The directory structure is hidden (2 points)
#** Users can log out (2 points)
#**: ''Note: If using session variables, you must ''actually'' log out the user by destroying their session; i.e., don't just redirect them to the login screen.''
#* '''''Best Practices (10 Points):'''''
#** Code is well formatted and easy to read, with proper commenting (4 points)
#** The site follows the FIEO philosophy (3 points)
#** All pages pass the W3C validator (3 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 README.md file in your group repo with the following:'''''
#** An .md file is a plain text file called a markdown file [https://guides.github.com/features/mastering-markdown/ ] .
#***The contents of your README.md file are shown on your repo, making it easier for us to grade
#*** You may style the page with bolding, hyperlings, images, block quotes and lists
#*** [http://dillinger.io/ This online markdown editor] makes it easy to learn this format
#** Names and Student IDs of all the group members
#** A link to the front page of your site
#** A brief description of what you did for your creative portion
#** Any additional login details needed for the TA

=== Creative Portion ===

This module, and all future modules, will require that you invest some time into creating additional features for your group project. Plan to invest at least 60 minutes of your time into the creative portion.

* The creative portion is an opportunity for you to learn material of your own interest.
* You will not earn credit for a creative-portion feature that simply rehashes something you've already done in a previous module.

If you need ideas for a creative portion, or if you want to know whether or not your creative portion idea is "hard enough", ask a TA.

[[Category:Module 2]]
[[Category:Modules]]