Difference between revisions of "Module 2"

From CSE330 Wiki
Jump to navigationJump to search
(Moving some material to Module 1)
 
(117 intermediate revisions by 10 users not shown)
Line 1: Line 1:
In Module 2, you will learn about HTML, CSS, and PHP.
+
__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.
  
This article contains your assignments for Module 2.
+
<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>
  
<span style="font-size:1.2em; line-height:1.2em;">'''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 due to procrastination. You have been warned.</span>
+
== Using the Wiki ==
 +
{{RequiredInstructions|content=
 +
Text enclosed by <syntaxhighlight lang="bash" inline><</syntaxhighlight> and <syntaxhighlight lang="bash" inline>></syntaxhighlight> should be replaced by content unique to you.
 +
 
 +
'''Example'''
 +
 
 +
<source lang="bash">
 +
$ sudo useradd -r -m -c "<My Full Name>" <usernameHere>
 +
</source>
 +
becomes
 +
<source lang="bash">
 +
$ sudo useradd -r -m -c "Zach Cohn" zcohn
 +
</source>
 +
}}
 +
 
 +
== Reading ==
 +
 
 +
The following articles on the online class wiki textbook contain information that will help you complete the assignments.
 +
 
 +
''To jump right into setting up your EC2 Instance, Begin with [[SSH]]''
 +
 
 +
* [[Linux]]
 +
* [[Bash]]
 +
* [[Amazon Web Services]]
 +
* [[SSH]]
 +
* [[Apache]]
 +
* [[PHP]]
 +
* [[Workflow]]
 +
* [[VS Code]]
 +
* [[Web Application Security, Part 1]]
 +
* [[FAQ - Mod 2]]
  
 
== Individual Assignments ==
 
== 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 ===
 
=== Learn About Linux ===
Line 12: Line 49:
  
 
If you are not a Linux guru, read the Linux guide to get started: [[Linux]]
 
If you are not a Linux guru, read the Linux guide to get started: [[Linux]]
 +
 +
=== Windows Users Only: Enable Windows Subsystem for Linux (WSL) or Install Cygwin ===
 +
 +
 +
You will need WSL or Cygwin in order to log into and configure your EC2 instance. Cygwin is already installed on the CEC machines. If you're using Windows 10, you can use WSL, which is an officially-supported way of accessing a Linux terminal on Windows. If not, you'll have to use Cygwin. Instructions for installing either 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 ===
 
=== Create an AWS EC2 Instance ===
Line 17: Line 61:
 
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]]
 
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]]
  
=== Configuring Your Instance ===
+
=== Configure SSH ===
  
==== Installing Essential Packages ====
+
Follow the instructions in [[SSH#SSH Configuration|the SSH guide]] to do the following:
  
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]].
+
# 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
  
To make sure everything is working properly, '''install your first package(s) according to the ''Essential Packages'' subsection in the Linux guide above.'''
+
From now on, when you need to log into your EC2 instance as an administrator, just pop up a terminal and run:
  
==== Add your Own User Account ====
 
  
On your EC2 instance, set up your own personal account.
+
$ ssh <your-instance-username>@<ec2-xx-xx-xx-xx.compute-1.amazonaws.com>
  
For information on how to add a user account, see the Linux guide: [[Linux#User Management]]
 
  
You need to do the following things once you've created your account:
 
  
# '''Add your account to the Sudoers list.''' Instructions are in the Linux guide.
+
To save from typing this command in every time you want to access your server, you can set an '''alias''' in your terminal.
# '''Allow your user to log in via SSH.'''  Instructions are in the Web Server Configuration guide: [[Web Server Configuration]]
 
  
From now on, you should log into your EC2 instance using only your own username and not the default username that Amazon gives you (''ec2-user'' or ''ubuntu'').
+
In the '''Mac''' terminal, vim ~/.zshrc and input the following command:
 +
$ alias aws='ssh <your-instance-username>@<ec2-xx-xx-xx-xx.compute-1.amazonaws.com>'
 +
Now, whenever you type aws in your terminal, it will type your ssh command.
  
==== Set the Timezone ====
+
In '''Cygwin''', vim ~/.bash_profile and input the following:
 +
export aws="ssh <your-instance-username>@<ec2-xx-xx-xx-xx.compute-1.amazonaws.com>"
 +
And you run this command by typing '''$aws'''
 +
Also note that you may have to restart your terminal for this to take effect, or put the command in your ~/.bashrc file
  
'''Set your server to use US Central time.'''  Instructions are in the Linux guide: [[Linux#Synchronizing Date and Time]]
+
=== Install Essential Packages ===
  
=== Set Up the Apache Web Server ===
+
Recall that software installation in Linux instances is usually handled through a package manager, like '''yum'''.  For more information, refer to [[Linux#Repository-Based Package Managers|the Linux guide]].
  
You need to '''install the Apache web server on your EC2 instance'''.  Instructions are in the Web Server Configuration guide: [[Web Server Configuration#Apache]]
+
To make sure everything is working properly, '''install your first package(s) according to the ''Essential Packages'' subsection in the Linux 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]]
+
=== Set the Timezone ===
  
'''Enable the UserDir module in Apache.'''  Instructions are in the Web Server Configuration guide: [[Web Server Configuration#Enabling the UserDir Module]]
+
'''Set your server to use US Central time (America/Chicago).'''  Instructions are in the Linux guide: [[Linux#Synchronizing Date and Time]]
  
'''Remap the UserDir module to .html''' Instructions are also in the Web Server Configuration guide in the same section as above.
+
=== Set Up the Apache Web Server ===
  
=== Set Up Subversion ===
+
You need to '''install the Apache web server on your EC2 instance'''.  Refer to [[Apache|the Apache guide]].
  
You need to '''set up subversion on your EC2 instance as well as your desktop'''.
+
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]]
  
'''This semester's Subversion repository is: <nowiki> https://shell.cec.wustl.edu:8443/cse330_fl12/svn/Lastname-studentid </nowiki>'''
+
'''Enable the UserDir module in Apache.''' Instructions are in the Apache guide: [[Apache#The UserDir Module]]
* Replace Lastname with your last name (capitalize the first letter in the last name) and studentid with your student ID
 
* Do not forget the underscore between cse330 and fl12 (NOT A SPACE)
 
  
Instructions for configuring Subversion are in the Web Server Configuration guide: [[Web Server Configuration#Subversion]]
+
=== Install PHP ===
 
 
=== Installing PHP ===
 
  
 
You need to '''install PHP on your EC2 server'''.  Instructions are at the top of the PHP guide: [[PHP]]
 
You need to '''install PHP on your EC2 server'''.  Instructions are at the top of the PHP guide: [[PHP]]
Line 68: Line 112:
 
You need to '''configure PHP to show errors'''.  Instructions are immediately below installation in the PHP guide.
 
You need to '''configure PHP to show errors'''.  Instructions are immediately below installation in the PHP guide.
  
=== Learning the PHP Language ===
+
=== Learn about 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]]
 
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]]
  
=== Calculator 1 ===
+
=== 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 GitHub
 +
# Setup a repo using GitHub Classroom
 +
# Clone your CSE 330 repo from GitHub
 +
# Install a text editor such as '''VSCode''' to write your assignments with
 +
# Either install an FTP client, or use SFTP through command line, to transfer files from your local machine to your instance
  
'''Make a calculator that uses PHP to multiply two variables provided in the URL and displays the result on a page.'''
+
=== Calculator ===
  
=== Calculator 2 ===
+
'''Make a calculator using PHP and an HTML form.'''  The form should have two number 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!)
  
'''Make a second calculator.  This one should have an HTML form for the two inputs.'''  It can either POST back to the same page, or to a different result page. In addition to multiplication, this page should support addition, subtraction, and division, by means of a radio button group on the page.
+
=== Git Tutorial ===
 +
 
 +
Complete all of the levels of the Main and Remote sections of [https://learngitbranching.js.org/ this Git tutorial]. After you finish the tutorial, take two screenshots showing the completion of all of the levels of the Main and Remote sections. Place these two screenshots in your Module 2 Individual repo.
  
 
== Group Project ==
 
== Group Project ==
Line 84: Line 138:
 
You will work in pairs (that means you and one other person) on this project.
 
You will work in pairs (that means you and one other person) on this project.
  
'''Important Reminder:''' frequently commit your work to your subversion repository as a backup!
+
<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 Management Site ===
+
=== Simple File Sharing Site ===
  
You will be making a simple file management site that supports uploading, viewing, and deleting files associated with various usernames.  Details:
+
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 one username per line.
+
* 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.
* Users need to specify their username before they can sign into your site.  You should check to see if their username is present in '''users.txt'''.  (Passwords add an extra layer of complexity that we will cover in a later module.)
+
*: 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.
* Use PHP Session variables to keep track of the user who is logged in.
+
* Users of the file sharing site should be able to enter their username and then log in.
* Once in the system, you will present the available files for that user. The user then can delete these files, display/open them, or upload new files.
+
*: 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.
* A user should be able to see only his/her own files.
+
* Users should see a list of all files associated with their username after the log in.
* When a user logs out, all files should be inaccessible until logging back in.
+
* Users should be able to view, upload, and delete files associated with their username.
* You need to support at least 3 different users.
+
* The URI should NOT reveal the internal file structure of your web site.
** Registering new users is NOT necessary (although you may do so for part of the creative portion)
 
* The url should NOT reveal internal file structure (including file names, so don't just link to the actual file on the web page!)
 
 
** Example of what not to do:  http://www.example.com/download.php?file=/home/paul/file.txt
 
** 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
 
** 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.
 
*: 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?
+
*: '''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  
* Creative portion: add an extra function to the site.
+
*:necessary files?
** It must be non-trivial, and involve learning outside the instructions provided in the class materials
+
*:: ''Hint:'' You shouldn't be storing the user-uploaded files in public_html (that is only the place for your own web-page files),
** This idea needs to be approved by the TAs/Professor. Discuss it with at least one TA or the professor before proceeding.
+
*::''Hint number 2:''  you will need to use chown to change permissions to let user apache 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
** Note that the creative portion is worth double the points of a regular task.  Creative portions will not be given full credit if they are too simple, or are simply rehashed things that you've already done (whether it be in this or previous modules).
+
* 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]]
 
You will probably find the PHP guide on this wiki to be helpful: [[PHP#Other PHP Tips]]
Line 116: Line 171:
 
In particular:
 
In particular:
  
* '''Your application needs to be safe from CSRF attacks'''. That is, '''you should pass tokens when uploading and deleting files''' in order to prevent request forgeries.
+
* '''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]]
+
* '''Your project must pass the W3C Validator with no errors or warnings'''.  For more information, see the HTML and CSS guide: [[HTML and CSS#Validation]]
  
== Tips on Editing Files ==
+
== Grading ==
  
You should tune your development environment to save you headaches throughout the semesterInstructions: [[Text Editing]]
+
We will be grading the following aspects of your workThere are 120 points total.
 
 
== Grading ==
 
  
<span style="font-size:2em; line-height:2em;">'''Due Date: Monday September 24th, by 1 PM (both individual and group)'''</span>
 
  
{|
 
!Assignment
 
!Points
 
|-
 
|Birthday Card Content
 
|1
 
|-
 
|Birthday Card Validation
 
|1
 
|-
 
|Calculator 1
 
|1
 
|-
 
|Calculator 2
 
|2
 
|-
 
!colspan="2"|Group Portion:
 
|-
 
|Multi-User Login
 
|1
 
|-
 
|Logout Mechanism
 
|1
 
|-
 
|Can't Access Other Users' Files
 
|1
 
|-
 
|Can't See File/Directory Structure
 
|1
 
|-
 
|Can Upload New Files
 
|1
 
|-
 
|Can View/Download Files
 
|1
 
|-
 
|Can Delete Files
 
|1
 
|-
 
|Cross-Site Request Forgery Safe
 
|1
 
|-
 
|Validation
 
|1
 
|-
 
|Creative Portion
 
|2
 
|}
 
  
== Grading (refactored from Module 1) ==
+
'''Assignments (including code) must be committed to GitHub 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.
  
<span style="font-size:2em; line-height:2em;">'''Due Date: Sept 10th 2012 by 1 PM'''</span>
+
_____________
  
If you have questions, head on over to the CSE 330 Google Group. The TA's will be busy grading on Monday and likely won't be able to provide assistance in class.   
+
# '''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 with floating point numbers (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)
 +
#* '''''Make sure you have a README.md file in your individual repo with the link to your calculator on your instance.''''' See the Creative Portion section for more information about .md files.
 +
# '''Git Tutorial (20 Points):'''
 +
#* Two screenshots showing the completion of all of the levels of the Main and Remote sections placed in your individual assignment repository.
 +
# '''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. Users should not be able to access or view files by manipulating a URL. (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 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
  
Make sure to read the Web Server Configuration wiki for more specific instructions on tasks 3 and 4:  [[Web Server Configuration]]
+
=== Creative Portion ===
  
You will be asked to do the following in front of a TA (you should make sure everything is working properly and you know what to do before you sign up to demo):
+
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 the very least 60 minutes of your time into the creative portion.  In the above rubric, viewing files is worth five and uploading is worth four. The creative portion is worth fifteen points; it should be a very sizable part of your project.
  
# Connect to your ec2 instance
+
* The creative portion is an opportunity for you to learn the material of your own interest.
# Display the current time on your ec2 instance
+
* You will not earn credit for a creative-portion feature that simply rehashes something you've already done in a previous module.
# Show the test file at http://ec2-xxx-xx-xx-xxx.compute-1.amazonaws.com/~yourUserName/hello.txt  (note that ~yourUserName cannot be ec2-user!)
 
# Show the text helloFrom___ files connected to your subversion repository.  You will be asked to make and commit changes in front of the TA.  
 
  
{|
+
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.
!Assignment
 
!Points
 
|-
 
|Creating your VM
 
|1
 
|-
 
|Working SSH
 
|1
 
|-
 
|Working user account
 
|1
 
|-
 
|Working NTP (correct time zone)
 
|1
 
|-
 
|Remap userdir
 
|1
 
|-
 
|Apache Setup
 
|1
 
|-
 
|SVN setup on Amazon Instance
 
|1
 
|-
 
|SVN setup on Eclipse
 
|1
 
|}
 
  
 
[[Category:Module 2]]
 
[[Category:Module 2]]
 
[[Category:Modules]]
 
[[Category:Modules]]

Latest revision as of 06:14, 3 September 2024

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.

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.

Using the Wiki

Text enclosed by < and > should be replaced by content unique to you.

Example

$ sudo useradd -r -m -c "<My Full Name>" <usernameHere>

becomes

$ sudo useradd -r -m -c "Zach Cohn" zcohn

Reading

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

To jump right into setting up your EC2 Instance, Begin with SSH

Individual Assignments

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.

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

Windows Users Only: Enable Windows Subsystem for Linux (WSL) or Install Cygwin

You will need WSL or Cygwin in order to log into and configure your EC2 instance. Cygwin is already installed on the CEC machines. If you're using Windows 10, you can use WSL, which is an officially-supported way of accessing a Linux terminal on Windows. If not, you'll have to use Cygwin. Instructions for installing either on your personal machine are located in 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 the SSH guide to do the following:

  1. Create your own SSH key pair
  2. Log in as the default user to your EC2 instance
  3. Create a new user
  4. 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:


$ ssh <your-instance-username>@<ec2-xx-xx-xx-xx.compute-1.amazonaws.com>


To save from typing this command in every time you want to access your server, you can set an alias in your terminal.

In the Mac terminal, vim ~/.zshrc and input the following command:

$ alias aws='ssh <your-instance-username>@<ec2-xx-xx-xx-xx.compute-1.amazonaws.com>'

Now, whenever you type aws in your terminal, it will type your ssh command.

In Cygwin, vim ~/.bash_profile and input the following:

export aws="ssh <your-instance-username>@<ec2-xx-xx-xx-xx.compute-1.amazonaws.com>"

And you run this command by typing $aws Also note that you may have to restart your terminal for this to take effect, or put the command in your ~/.bashrc file

Install Essential Packages

Recall that software installation in Linux instances is usually handled through a package manager, like yum. For more information, refer to 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 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 about 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:

  1. Make an account on GitHub
  2. Setup a repo using GitHub Classroom
  3. Clone your CSE 330 repo from GitHub
  4. Install a text editor such as VSCode to write your assignments with
  5. Either install an FTP client, or use SFTP through command line, to transfer files from your local machine to your instance

Calculator

Make a calculator using PHP and an HTML form. The form should have two number 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!)

Git Tutorial

Complete all of the levels of the Main and Remote sections of this Git tutorial. After you finish the tutorial, take two screenshots showing the completion of all of the levels of the Main and Remote sections. Place these two screenshots in your Module 2 Individual repo.

Group Project

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

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!)

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.
    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 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 or warnings. 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 120 points total.


Assignments (including code) must be committed to GitHub 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.

_____________

  1. 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)
  2. PHP Calculator (15 Points):
    • The calculator is able to perform all four functions with floating point numbers (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)
    • Make sure you have a README.md file in your individual repo with the link to your calculator on your instance. See the Creative Portion section for more information about .md files.
  3. Git Tutorial (20 Points):
    • Two screenshots showing the completion of all of the levels of the Main and Remote sections placed in your individual assignment repository.
  4. 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. Users should not be able to access or view files by manipulating a URL. (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)
  5. 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 [1] .
        • 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
        • This online markdown editor makes it easy to learn this format
      • The link to 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 the very least 60 minutes of your time into the creative portion. In the above rubric, viewing files is worth five and uploading is worth four. The creative portion is worth fifteen points; it should be a very sizable part of your project.

  • The creative portion is an opportunity for you to learn the 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.