== Getting Started With Each Module ==

# Create Bitbucket repo using the CSE 330 repo creator (Check Piazza for the link)
# Navigate to the created repo in Bitbucket
# Clone the repo via https to a dedicated folder on your computer

[[File:File-Structure.png|400px|center]]

# In VS Code, File > Open the Spring2019-module1-individual-STUDENTID '''folder''' that you cloned to your computer

If you followed the above steps correctly, the folder's Git should be configured to your Bitbucket repository! I highly recommend creating your bitbucket repo, cloning the folder to a designated spot, and keeping all modules separated for the semester as shown in the image above.

== Module 1 -- Using the Git Integration ==
'''Note: If you're using Windows, you may need to install Git on your machine first. https://git-scm.com/download/win'''

* First, open the File Explorer tab on the left, and right click to create a new file, birthday.html
[[File:New-file.png|400px|center]]
* Ensure VS Code has it marked as an html file (see the file type next to the smiley face)
* Type '''doc''' followed by enter, and allow VS Code to generate a basic HTML file for you (use VS Code to your advantage! It can do a lot of your coding for you).
* Save the file, you should see a popup next to the Version Control symbol on the left. VS Code has detected that your project is different than what it is in your remote Bitbucket repo.
* To commit, simply type a message in the box and click the check mark above it. To push to your bitbucket repo, click the 3 dots next to the check mark and select 'push'
* Note this is also where you can pull from your remote.

==== Bonus - Module 1 ====
# If you like your text editor to look pretty, you can go to the Extensions tab and search for different themes. (Check out the Material theme!)
# You can view your settings with '''CMD + ,''' (Mac) or '''Ctrl + ,''' (Windows). Search for Theme and choose one that works for you!

== Module 2 ==
=== SFTP Integration (Shipping files to your server) ===
# Open the Extensions tab and search for 'sftp'. Download the first one.
# To use commands in VS Code, type '''Cmd + Shift + P''' (Mac), or '''Ctrl + Shift + P''' on windows.
#Type SFTP and open the sftp config command.

Your config should look like the following:
{
"protocol": "sftp",
"host": "YOUR.EC2.DNS",
"port": 22,
"username": "YOUR USERNAME",
"privateKeyPath": "/path/to/your/id_rsa",
"remotePath": "/home/YOUR USERNAME/module2",
"uploadOnSave": true
}
- Note the uploadOnSave field is optional, but can be nice!
- Check the VS Code output for errors in your config.

Additionally: You should notice an SFTP tab on the side of VS Code. Here, you can view the file structure on your server.

=== Testing Everything Locally ===
If you get the SFTP integration working well, you don't need to set up a local php server. If you can't get the above working, however, we highly recommend coding all of your projects locally, and only uploading them to your ec2 instance when complete.

'''To run PHP locally'''

'''Windows'''
# Download WAMP (https://sourceforge.net/projects/wampserver/)
# Place your project repositories in Wamp's www/ directory, and navigate to http://localhost in your browser. You should see your projects listed here, and should be able to run php files.

'''Mac'''
# Download Homebrew. Homebrew is a great package manager for OSx and we will be using it in future modules.
# Type the following in your terminal and follow instructions
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
# In your terminal, type '''php -v'''. If your version is less than 7, update with brew. '''brew install php'''

File:New-file.png

2019-01-13T02:15:23Z

Andrew:

VS Code

2019-01-13T02:13:15Z

Andrew: /* Module 1 -- Using the Git Integration */

== Getting Started With Each Module ==

# Create Bitbucket repo using the CSE 330 repo creator (Check Piazza for the link)
# Navigate to the created repo in Bitbucket
# Clone the repo via https to a dedicated folder on your computer

[[File:File-Structure.png|400px|center]]

# In VS Code, File > Open the Spring2019-module1-individual-STUDENTID '''folder''' that you cloned to your computer

If you followed the above steps correctly, the folder's Git should be configured to your Bitbucket repository! I highly recommend creating your bitbucket repo, cloning the folder to a designated spot, and keeping all modules separated for the semester as shown in the image above.

== Module 1 -- Using the Git Integration ==
'''Note: If you're using Windows, you may need to install Git on your machine first. https://git-scm.com/download/win'''

# First, open the File Explorer tab on the left, and right click to create a new file, birthday.html
# Ensure VS Code has it marked as an html file (see the file type next to the smiley face)
# Type '''doc''' followed by enter, and allow VS Code to generate a basic HTML file for you (use VS Code to your advantage! It can do a lot of your coding for you).
# Save the file, you should see a popup next to the Version Control symbol on the left. VS Code has detected that your project is different than what it is in your remote Bitbucket repo.
# To commit, simply type a message in the box and click the check mark above it. To push to your bitbucket repo, click the 3 dots next to the check mark and select 'push'
# Note this is also where you can pull from your remote.

==== Bonus - Module 1 ====
# If you like your text editor to look pretty, you can go to the Extensions tab and search for different themes. (Check out the Material theme!)
# You can view your settings by clicking CMD + , (Mac) or Ctrl + , (Windows). Search for Theme and choose one that works for you!

== Module 2 ==
=== SFTP Integration (Shipping files to your server) ===
# Open the Extensions tab and search for 'sftp'. Download the first one.
# To use commands in VS Code, type '''Cmd + Shift + P''' (Mac), or '''Ctrl + Shift + P''' on windows.
#Type SFTP and open the sftp config command.

Your config should look like the following:
{
"protocol": "sftp",
"host": "YOUR.EC2.DNS",
"port": 22,
"username": "YOUR USERNAME",
"privateKeyPath": "/path/to/your/id_rsa",
"remotePath": "/home/YOUR USERNAME/public_html/module2",
"uploadOnSave": true
}
- Note the uploadOnSave field is optional, but can be nice!
- Check the VS Code output for errors in your config.

Additionally: You should notice an SFTP tab on the side of VS Code. Here, you can view the file structure on your server.

=== Testing Everything Locally ===
If you get the SFTP integration working well, you don't need to set up a local php server. If you can't get the above working, however, we highly recommend coding all of your projects locally, and only uploading them to your ec2 instance when complete.

'''To run PHP locally'''

'''Windows'''
# Download WAMP (https://sourceforge.net/projects/wampserver/)
# Place your project repositories in Wamp's www/ directory, and navigate to http://localhost in your browser. You should see your projects listed here, and should be able to run php files.

'''Mac'''
# Download Homebrew. Homebrew is a great package manager for OSx and we will be using it in future modules.
# Type the following in your terminal and follow instructions
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
# In your terminal, type '''php -v'''. If your version is less than 7, update with brew. '''brew install php'''

Module 2

2019-01-13T02:09:39Z

Andrew: /* Set Up your Workspace */

__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]]
* [[VS Code]]
* [[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]]

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

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>

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 ~/.bash_profile and input the following command:
$ alias aws='ssh your-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-username@ec2.xx-xx-xx-xx.compute-1.amazonaws.com"
And you run this command by typing $aws

=== Install Essential Packages ===

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

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

# Make an account on Bitbucket
# Setup a repo using the CSE 330 Repo Creation Tool
# Clone your CSE 330 repo from Bitbucket
# Follow the SFTP and Git instructions on the [[VS Code]] page

=== 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 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 (including code) 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.

_____________

# '''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 the link to your calculator.''''' See the Creative Portion section for more information about .md files.
# '''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 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 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.

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

Module 2

2019-01-13T02:08:09Z

Andrew: /* Configure SSH */

__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]]
* [[VS Code]]
* [[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]]

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

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>

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 ~/.bash_profile and input the following command:
$ alias aws='ssh your-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-username@ec2.xx-xx-xx-xx.compute-1.amazonaws.com"
And you run this command by typing $aws

=== Install Essential Packages ===

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

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

# Make an account on Bitbucket
# Setup a repo using the CSE 330 Repo Creation Tool
# 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 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 (including code) 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.

_____________

# '''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 the link to your calculator.''''' See the Creative Portion section for more information about .md files.
# '''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 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 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.

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

Module 2

2019-01-13T02:07:36Z

2019-01-13T01:08:17Z

Andrew:

== Getting Started With Each Module ==

# Create Bitbucket repo using the CSE 330 repo creator (Check Piazza for the link)
# Navigate to the created repo in Bitbucket
# Clone the repo via https to a dedicated folder on your computer

[[File:File-Structure.png|400px|center]]

# In VS Code, File > Open the Spring2019-module1-individual-STUDENTID '''folder''' that you cloned to your computer

If you followed the above steps correctly, the folder's Git should be configured to your Bitbucket repository! I highly recommend creating your bitbucket repo, cloning the folder to a designated spot, and keeping all modules separated for the semester as shown in the image above.

== Module 1 -- Using the Git Integration ==

# First, open the File Explorer tab on the left, and right click to create a new file, birthday.html
# Ensure VS Code has it marked as an html file (see the file type next to the smiley face)
# Type '''doc''' followed by enter, and allow VS Code to generate a basic HTML file for you (use VS Code to your advantage! It can do a lot of your coding for you).
# Save the file, you should see a popup next to the Version Control symbol on the left. VS Code has detected that your project is different than what it is in your remote Bitbucket repo.
# To commit, simply type a message in the box and click the check mark above it. To push to your bitbucket repo, click the 3 dots next to the check mark and select 'push'
# Note this is also where you can pull from your remote.

==== Bonus - Module 1 ====
# If you like your text editor to look pretty, you can go to the Extensions tab and search for different themes. (Check out the Material theme!)
# You can view your settings by clicking CMD + , (Mac) or Ctrl + , (Windows). Search for Theme and choose one that works for you!

== Module 2 ==
=== SFTP Integration (Shipping files to your server) ===
# Open the Extensions tab and search for 'sftp'. Download the first one.
# To use commands in VS Code, type '''Cmd + Shift + P''' (Mac), or '''Ctrl + Shift + P''' on windows.
#Type SFTP and open the sftp config command.

Your config should look like the following:
{
"protocol": "sftp",
"host": "YOUR.EC2.DNS",
"port": 22,
"username": "YOUR USERNAME",
"privateKeyPath": "/path/to/your/id_rsa",
"remotePath": "/home/YOUR USERNAME/module2",
"uploadOnSave": true
}
- Note the uploadOnSave field is optional, but can be nice!
- Check the VS Code output for errors in your config.

Additionally: You should notice an SFTP tab on the side of VS Code. Here, you can view the file structure on your server.

=== Testing Everything Locally ===
If you get the SFTP integration working well, you don't need to set up a local php server. If you can't get the above working, however, we highly recommend coding all of your projects locally, and only uploading them to your ec2 instance when complete.

'''To run PHP locally'''

'''Windows'''
# Download WAMP (https://sourceforge.net/projects/wampserver/)
# Place your project repositories in Wamp's www/ directory, and navigate to http://localhost in your browser. You should see your projects listed here, and should be able to run php files.

'''Mac'''
# Download Homebrew. Homebrew is a great package manager for OSx and we will be using it in future modules.
# Type the following in your terminal and follow instructions
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
# In your terminal, type '''php -v'''. If your version is less than 7, update with brew. '''brew install php'''

Module 1

2019-01-13T01:05:26Z

Andrew:

__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]]
* [[VS Code]]

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

Throughout this course we '''highly''' recommend using VS Code https://code.visualstudio.com/download, and have included tips for each module specific to VS Code.
Visit the wiki page [[VS Code]] and check out the Module 1 section

'''Important Note:''' Writing your web page in a word processor like Microsoft Word or even WordPad or TextEdit will ''not'' work. You need 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:// and https:// protocols.

==== Validation ====

'''Your birthday card must pass the W3C Validators for both HTML and CSS with no errors.''' You can upload your HTML to [https://validator.w3.org/ the HTML validator] and your CSS to [https://jigsaw.w3.org/css-validator/ the CSS validator].

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. In this HTML document you must also include this course's regrade policy to ensure that you have read it and understand it. [https://www.arl.wustl.edu/~todd/cse330/info.html Regrade Policy]

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

- Additionally, we want you to copy/paste this course's regrade policy somewhere into this html document to ensure your familiarity.

== Grading ==

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

'''Assignments (including code) 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 HTML 5 and CSS. (10 points).
# '''Search Portal (10 Points):'''
#* DuckDuckGo search portal is functional (9 points).
#* Your search portal page includes the text of this course's regrade policy (1 point).
# '''Account Creation and Version Control (10 Points):'''
#* Bitbucket account created (2 Points)
#* Module 1 repo created using the link provided on Piazza (2 Points)
#* Account created on Amazon Web Services and an image file containing a screenshot of your account page pushed to Bitbucket. (4 Points)
#* Files pushed to repo on Bitbucket using Git (2 Points)

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

VS Code

2019-01-13T00:59:13Z

Andrew:

== Getting Started With Each Module ==

# Create Bitbucket repo using the CSE 330 repo creator (Check Piazza for the link)
# Navigate to the created repo in Bitbucket
# Clone the repo via https to a dedicated folder on your computer

[[File:File-Structure.png|400px|center]]

# In VS Code, File > Open the Spring2019-module1-individual-STUDENTID '''folder''' that you cloned to your computer

If you followed the above steps correctly, the folder's Git should be configured to your Bitbucket repository! I highly recommend creating your bitbucket repo, cloning the folder to a designated spot, and keeping all modules separated for the semester as shown in the image above.

== Module 1 -- Using the Git Integration ==

# First, open the File Explorer tab on the left, and right click to create a new file, birthday.html
# Ensure VS Code has it marked as an html file (see the file type next to the smiley face)
# Type '''doc''' followed by enter, and allow VS Code to generate a basic HTML file for you (use VS Code to your advantage! It can do a lot of your coding for you).
# Save the file, you should see a popup next to the Version Control symbol on the left. VS Code has detected that your project is different than what it is in your remote Bitbucket repo.
# To commit, simply type a message in the box and click the check mark above it. To push to your bitbucket repo, click the 3 dots next to the check mark and select 'push'
# Note this is also where you can pull from your remote.

==== Bonus - Module 1 ====
# If you like your text editor to look pretty, you can go to the Extensions tab and search for different themes. (Check out the Material theme!)
# You can view your settings by clicking CMD + , (Mac) or Ctrl + , (Windows). Search for Theme and choose one that works for you!

== Module 2 ==
=== SFTP Integration (Shipping files to your server) ===
# Open the Extensions tab and search for 'sftp'. Download the first one.
# To use commands in VS Code, type '''Cmd + Shift + P''' (Mac), or '''Ctrl + Shift + P''' on windows.
#Type SFTP and open the sftp config command.

Your config should look like the following:
{
"protocol": "sftp",
"host": "YOUR.EC2.DNS",
"port": 22,
"username": "YOUR USERNAME",
"privateKeyPath": "/path/to/your/id_rsa",
"remotePath": "/home/YOUR USERNAME/module2",
"uploadOnSave": true
}
- Note the uploadOnSave field is optional, but can be nice!
- Check the VS Code output for errors in your config.

Additionally: You should notice an SFTP tab on the side of VS Code. Here, you can view the file structure on your server.

=== Testing Everything Locally ===
If you get the above integration working well, you don't necessarily need to set up a local php server. If you can't get the above working, however, we highly recommend coding all of your projects locally, and only uploading them to your ec2 instance when complete.

'''To run PHP locally'''

'''Windows'''
# Download WAMP (https://sourceforge.net/projects/wampserver/)
# Place your project repositories in Wamp's www/ directory, and navigate to http://localhost in your browser. You should see your projects listed here, and should be able to run php files.

'''Mac'''
# Download Homebrew. Homebrew is a great package manager for OSx and we will be using it in future modules.
# Type the following in your terminal and follow instructions
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
# In your terminal, type '''php -v'''. If your version is less than 7, update with brew. '''brew install php'''

VS Code

2019-01-13T00:56:07Z

Andrew:

== Getting Started With Each Module ==

# Create Bitbucket repo using the CSE 330 repo creator (Check Piazza for the link)
# Navigate to the created repo in Bitbucket
# Clone the repo via https to a dedicated folder on your computer

[[File:File-Structure.png|400px|center]]

# In VS Code, File > Open the Spring2019-module1-individual-STUDENTID '''folder''' that you cloned to your computer

If you followed the above steps correctly, the folder's Git should be configured to your Bitbucket repository! I highly recommend creating your bitbucket repo, cloning the folder to a designated spot, and keeping all modules separated for the semester as shown in the image above.

== Using the Git Integration (Module 1 example) ==

# First, open the File Explorer tab on the left, and right click to create a new file, birthday.html
# Ensure VS Code has it marked as an html file (see the file type next to the smiley face)
# Type '''doc''' followed by enter, and allow VS Code to generate a basic HTML file for you (use VS Code to your advantage! It can do a lot of your coding for you).
# Save the file, you should see a popup next to the Version Control symbol on the left. VS Code has detected that your project is different than what it is in your remote Bitbucket repo.
# To commit, simply type a message in the box and click the check mark above it. To push to your bitbucket repo, click the 3 dots next to the check mark and select 'push'
# Note this is also where you can pull from your remote.

==== Bonus - Module 1 ====
# If you like your text editor to look pretty, you can go to the Extensions tab and search for different themes. (Check out the Material theme!)
# You can view your settings by clicking CMD + , (Mac) or Ctrl + , (Windows). Search for Theme and choose one that works for you!

== Module 2 ==
=== SFTP Integration (Shipping files to your server) ===
# Open the Extensions tab and search for 'sftp'. Download the first one.
# To use commands in VS Code, type '''Cmd + Shift + P''' (Mac), or '''Ctrl + Shift + P''' on windows.
#Type SFTP and open the sftp config command.

Your config should look like the following:
{
"protocol": "sftp",
"host": "YOUR.EC2.DNS",
"port": 22,
"username": "YOUR USERNAME",
"privateKeyPath": "/path/to/your/id_rsa",
"remotePath": "/home/YOUR USERNAME/module2",
"uploadOnSave": true
}
- Note the uploadOnSave field is optional, but can be nice!
- Check the VS Code output for errors in your config.

Additionally: You should notice an SFTP tab on the side of VS Code. Here, you can view the file structure on your server.

=== Testing Everything Locally ===
If you get the above integration working well, you don't necessarily need to set up a local php server. If you can't get the above working, however, we highly recommend coding all of your projects locally, and only uploading them to your ec2 instance when complete.

'''To run PHP locally'''

'''Windows'''
# Download WAMP (https://sourceforge.net/projects/wampserver/)
# Place your project repositories in Wamp's www/ directory, and navigate to http://localhost in your browser. You should see your projects listed here, and should be able to run php files.

'''Mac'''
# Download Homebrew. Homebrew is a great package manager for OSx and we will be using it in future modules.
# Type the following in your terminal and follow instructions
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
# In your terminal, type '''php -v'''. If your version is less than 7, update with brew. '''brew install php'''

File:File-Structure.png

2019-01-13T00:55:06Z

Andrew: