CSE330 Wiki - User contributions [en]

Module 5

2021-03-11T20:23:28Z

Jasonren: /* Requirements */

__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]]
* [[FAQ - Mod 5]]

== Individual Assignments ==

'''''IMPORTANT:'' Both of the individual assignments must be completed ''without'' using a JavaScript library like jQuery.''' However, you may 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>
// 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:''' https://classes.engineering.wustl.edu/cse330/content/weather_json.php
#* '''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: https://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, so long as that JavaScript library does not defeat the purpose of the assignment. If you have questions about this, ask. In particular, libraries like FullCalendar are unacceptable.

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 you are free to explore other databases if you like.

==== 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 edit and delete their own events, but not the events of others.
*: Again, the server should edit and delete events based on the username present in the session, not based on a username or event ID provided by the user. (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.

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 or warnings through the W3C validator.

== Grading ==

We will be grading the following aspects of your work. There are 100 points in 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. '''

If you do not include a link to your individual and group portion running on your instance in the respective README.md, you will receive a 0 for the missing portion

_________

# '''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 (7 points)
#** Refreshing the page does not log a user out (3 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 hashed (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 adding/editing/deleting events (3 points)
#** Session cookie is HTTP-Only (3 points)
#** Page passes the W3C validator (2 points)
#* '''''Usability (5 Points):'''''
#** Site is intuitive to use and navigate (4 points)
#** Site is visually appealing (1 point)
# '''Creative Portion (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 3

2021-02-17T16:37:14Z

Jasonren: /* Requirements */

__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]]
* [[FAQ - Mod 3]]

== 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. Instructions to install both can be found on the [[Introduction to MySQL]] page.

=== Set Up a Database ===

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

# 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). There will never be more than 1,000 grades per student.
#*: 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: https://classes.engineering.wustl.edu/cse330/content/students_data.txt
* courses: https://classes.engineering.wustl.edu/cse330/content/courses.txt
* departments: https://classes.engineering.wustl.edu/cse330/content/departments_data.txt
* grades: https://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 entries for CSE 330S, CSE 131, and CSE 260M.
#: ''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.
#* '''Ben Harper'''
#** E-mail: '''bharper@ffym.com'''
#** Student ID: '''88'''
#** Grades:
#*** 35.5 in CSE 330S
#*** 0 in CSE 131
#*** 95 in CSE 260M
#* '''Matt Freeman'''
#** E-mail: '''mfreeman@kickinbassist.net'''
#** Student ID: '''202'''
#** Grades:
#*** 100 in CSE 330S
#*** 90.5 in CSE 131
#*** 94.8 in CSE 260M
#* '''Marc Roberge'''
#** E-mail: '''mroberge@ofarevolution.us'''
#** Student ID: '''115'''
#** Grades:
#*** 75 in CSE 330S
#*** 37 in CSE 131
#*** 45.5 in CSE 260M

=== Querying Your Database ===

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

Please Running the following <code>SELECT</code> queries, then copy the output to a text file of the form <code>query1.txt</code>, <code>query2.txt</code>, and so on, and commit them with the rest of your repository (be sure to include your query command and the entire response, including the number of results found). For each query, only the requested columns should be present. You will receive 0 points for any query that includes additional columns.

# Select the entire grades table.
# Select all fields describing the courses offered in the College of Arts & Sciences (school code <code>L</code>).
# The names, student IDs, and CSE330 grades of all 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 <code>HAVING</code> keyword.''
# An individual report card for Jack Johnson, consisting of only 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/
* https://news.ycombinator.com/

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.
*: For example, a story that included a link could look like the following:
*:: Title: Check out this cool search engine I found!
*:: Body: This search engine that I found has been very helpful with all of my homework assignments. Searching my error messages helps me debug.
*:: Link: http://google.com
* 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 [https://mirrors.meiert.org/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 against SQL injection attacks'''. If you are using prepared queries, you should already be safe on this front.
* '''Your passwords need to be securely hashed 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 or warnings 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 (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. '''

'''If you do not include a link to your group portion running on your instance in your group portion README.md, you will receive a 0 for the group portion.'''
________

# '''MySQL Queries (25 Points):'''
#* A MySQL server is running on your instance. Put a screenshot in your repository of your terminal connected to your MySQL server. ( (2 points)
#* Tables' fields, including data types and foreign keys, are correct (8 points)
#*: ''Note: To demonstrate the structure of your tables, you should commit a text file containing the output of the <code>SHOW CREATE TABLE</code> command '''for each table.''' Each table's file should have a name of the form <code>tablename.sql</code> (e.g. <code>students.sql</code>).''
#* The output of each of the five queries is correct. (3 points each)
#*: ''Note: To demonstrate the output of your queries, text files containing the 'entire' result (including the query and number of records found) of running each query should committed to Github. The file for query 1 should be named <code>query1.txt</code>, the file for query 2 should be named <code>query2.txt</code>, and so on.''
# '''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, salted, and checked securely (3 points)
#**: ''Note: You will receive 0 points for this section if you use the <code>==</code> or <code>===</code> operators to compare password hashes, or if you use the <code>crypt</code> or <code>md5</code> functions at any point.''
#** 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)
#*: ''Note: To demonstrate the structure of your database, you should commit a 'single' text file containing the output of the <code>SHOW CREATE TABLE</code> command '''for all tables in your database,''' called <code>tables.sql</code>. This one file should contain the output for all of your tables.
#** Stories can be posted (3 points)
#** A link can be associated with each story, and is 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 HTML and CSS validators (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

2021-02-12T20:41:56Z

Jasonren:

__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]]
* [[FAQ - Mod 3]]

== 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. Instructions to install both can be found on the [[Introduction to MySQL]] page.

=== Set Up a Database ===

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

# 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). There will never be more than 1,000 grades per student.
#*: 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: https://classes.engineering.wustl.edu/cse330/content/students_data.txt
* courses: https://classes.engineering.wustl.edu/cse330/content/courses.txt
* departments: https://classes.engineering.wustl.edu/cse330/content/departments_data.txt
* grades: https://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 entries for CSE 330S, CSE 131, and CSE 260M.
#: ''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.
#* '''Ben Harper'''
#** E-mail: '''bharper@ffym.com'''
#** Student ID: '''88'''
#** Grades:
#*** 35.5 in CSE 330S
#*** 0 in CSE 131
#*** 95 in CSE 260M
#* '''Matt Freeman'''
#** E-mail: '''mfreeman@kickinbassist.net'''
#** Student ID: '''202'''
#** Grades:
#*** 100 in CSE 330S
#*** 90.5 in CSE 131
#*** 94.8 in CSE 260M
#* '''Marc Roberge'''
#** E-mail: '''mroberge@ofarevolution.us'''
#** Student ID: '''115'''
#** Grades:
#*** 75 in CSE 330S
#*** 37 in CSE 131
#*** 45.5 in CSE 260M

=== Querying Your Database ===

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

Please Running the following <code>SELECT</code> queries, then copy the output to a text file of the form <code>query1.txt</code>, <code>query2.txt</code>, and so on, and commit them with the rest of your repository (be sure to include your query command and the entire response, including the number of results found). For each query, only the requested columns should be present. You will receive 0 points for any query that includes additional columns.

# Select the entire grades table.
# Select all fields describing the courses offered in the College of Arts & Sciences (school code <code>L</code>).
# The names, student IDs, and CSE330 grades of all 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 <code>HAVING</code> keyword.''
# An individual report card for Jack Johnson, consisting of only 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/
* https://news.ycombinator.com/

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 [https://mirrors.meiert.org/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 against SQL injection attacks'''. If you are using prepared queries, you should already be safe on this front.
* '''Your passwords need to be securely hashed 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 or warnings 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 (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. '''

'''If you do not include a link to your group portion running on your instance in your group portion README.md, you will receive a 0 for the group portion.'''
________

# '''MySQL Queries (25 Points):'''
#* A MySQL server is running on your instance. Put a screenshot in your repository of your terminal connected to your MySQL server. ( (2 points)
#* Tables' fields, including data types and foreign keys, are correct (8 points)
#*: ''Note: To demonstrate the structure of your tables, you should commit a text file containing the output of the <code>SHOW CREATE TABLE</code> command '''for each table.''' Each table's file should have a name of the form <code>tablename.sql</code> (e.g. <code>students.sql</code>).''
#* The output of each of the five queries is correct. (3 points each)
#*: ''Note: To demonstrate the output of your queries, text files containing the 'entire' result (including the query and number of records found) of running each query should committed to Github. The file for query 1 should be named <code>query1.txt</code>, the file for query 2 should be named <code>query2.txt</code>, and so on.''
# '''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, salted, and checked securely (3 points)
#**: ''Note: You will receive 0 points for this section if you use the <code>==</code> or <code>===</code> operators to compare password hashes, or if you use the <code>crypt</code> or <code>md5</code> functions at any point.''
#** 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)
#*: ''Note: To demonstrate the structure of your database, you should commit a 'single' text file containing the output of the <code>SHOW CREATE TABLE</code> command '''for all tables in your database,''' called <code>tables.sql</code>. This one file should contain the output for all of your tables.
#** Stories can be posted (3 points)
#** A link can be associated with each story, and is 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 HTML and CSS validators (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

2021-02-01T22:58:05Z

Jasonren: /* Creative Portion */

__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]]
* [[FAQ - Mod 2]]

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

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

=== Git Tutorial ===
Complete [https://github.com/UnseenWizzard/git_training/ this Git tutorial]. After you finish the tutorial, place the git_training folder in your Module 2 Individual repo.

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

_____________

# '''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):'''
#* Place the git_training folder containing the completed tutorial 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

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

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

Module 2

2021-01-28T03:21:06Z

Jasonren: Changed rubric to reflect new/old git tutorial, small wording/typo fixes

__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]]
* [[FAQ - Mod 2]]

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

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

=== Git Tutorial ===
Complete [https://github.com/UnseenWizzard/git_training/ this Git tutorial]. After you finish the tutorial, place the git_training folder in your Module 2 Individual repo.

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

_____________

# '''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):'''
#* Place the git_training folder containing the completed tutorial 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

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

Introduction to MySQL

2021-01-28T03:09:45Z

Jasonren: /* phpMyAdmin */ Updated page with new version of phpMyAdmin for Linux 2 AMI

This article is an introduction to MySQL, a database used in conjunction with web applications.

== Why Use a Database? ==

In Module 2, you made a web site that used flatfiles to keep track of usernames and uploaded file associations. However, flatfiles are insecure, lack complex logic, and are impractical for a large-scale web application. This is where databases come in. Databases are designed from the ground up to be fast, efficient, and powerful storage solutions for any amount of data.

In CSE330, we will be using '''MySQL''', which is a popular, open-source ''relational database management system'' for web applications.

== Database Structure ==

A MySQL server consists of ''databases'', each of which contains ''tables''. Tables, in turn, consist of one or more ''fields'' (like columns), and the data is stored in one or more ''entries'' (like rows). A field in a table can be designated as an ''index''; that is, something that can be used to look up the information in the database. The set of tables, fields, and indices in your database is called your ''schema''.

MySQL uses the '''Structured Query Language (SQL)''' for manipulating data.

=== Storage Engines ===

MySQL is a database server, but under the hood, it actually uses a '''storage engine''' to retrieve the data. Two storage engines that are popular in the MySQL community are '''InnoDB''' and '''MyISAM'''. MyISAM is slightly faster than InnoDB, and it specializes in database schemas that involve predominantly ''SELECT'' and ''INSERT'' queries (which you will learn about later). However, MyISAM lacks InnoDB's power in making relations between tables, and MyISAM also does not support InnoDB's database transactions. [http://www.akadia.com/services/mysql_survival.html Click here for more information regarding the differences between MyISAM and InnoDB.]

In CSE330, we will be using InnoDB for our primary MySQL storage engine because of its support for foreign key constraints. However, in your personal applications down the road, feel free to use either InnoDB or MyISAM.

== Installing and Configuring MySQL ==

To use MySQL, you need the MySQL Server package. Because we will be interacting with MySQL primarily from PHP scripts, we will also need the associated PHP libraries. In '''yum (RHEL)''', you need the packages '''mariadb-server''' and '''php-mbstring''', and from '''amazon-linux-extras''', you need the package '''lamp-mariadb10.2-php7.2'''. If you're wondering what MariaDB is, it is a fork of MySQL server that is recommended by Amazon for use with Linux 2 AMI systems. For our purposes, MariaDB and MySQL are effectively identical.

To install these packages from their respective package repositories, run the following two commands:

<source lang="bash">
$ sudo yum install -y mariadb-server php-mbstring
$ sudo amazon-linux-extras install -y lamp-mariadb10.2-php7.2
</source>

Remember to restart Apache after installing any packages relating to your web server!

Run these commands to start the server and the client automatically on startup:

<source lang="bash">
$ sudo systemctl start mariadb
$ sudo systemctl enable mariadb
</source>

Run the following command to set the MySQL root user password:

<source lang="bash">
$ mysqladmin -u root password
New password:
Confirm new password:
$
</source>

When it asks, type the new password, press Enter, and then type the new password again. You cannot see what you are typing because a password is supposed to be secret. If the shell displayed the password to you while you were typing it, it would be forever saved in ''~/.bash_history''!

== Using MySQL from the Command Line ==

To interface with MySQL/MariaDB from the command line, use the <code>mysql</code> command. The syntax is:

<source lang="bash">
$ mysql -u USERNAME -p DATABASENAME
Welcome to the MariaDB monitor. ...

MariaDB [(DATABASENAME)]>
</source>

The '''-u''' argument specifies a specific user to use MySQL/MariaDB with, and the '''-p''' argument specifies that you would like to use a password to login to that user. If you add the '''-p''' argument, you will be prompted for the password associated with USERNAME. Failing to provide the '''-p''' is the same as attempting to log in with no password. '''DATABASENAME''' is optional; if this is your first time using MySQL from the command line, you should probably leave this blank.

== Managing Databases ==

To create a database on your MySQL server, simply run the query:

<source lang="mysql">
create database DATABASENAME;
</source>

You can delete a database using the query:

<source lang="mysql">
drop database DATABASENAME;
</source>

When you're at the MySQL prompt, use the following query to select a database to which to run select, insert, update, and delete queries:

<source lang="mysql">
use DATABASENAME;
</source>

== MySQL User Management ==

The first time you log into MySQL, you will need to use the root user, with the password that you specified earlier. However, it is unwise to use the root user for everyday operations with your MySQL database.

=== Creating a New User ===

To create a new user named USERNAME with the password PASSWORD, run the following query inside MySQL:

<source lang="mysql">
create user 'USERNAME'@'localhost' identified by 'PASSWORD';
</source>

This will create USERNAME, but that user will not have privileges to access any databases.

=== Granting Privileges ===

MySQL provides the '''grant''' command to grant privileges to a user. The syntax for assigning USERNAME some PRIVILEGES on a TABLE in a DATABASE is:

<source lang="mysql">
grant PRIVILEGES on DATABASE.TABLE to USERNAME@'localhost';
</source>

If you want to grant global privileges to a certain administrative user, run the query like this:

<source lang="mysql">
grant all on *.* to USERNAME@'localhost' with grant option;
</source>

The ''with grant option'' enables this user to create other users and assign them permissions, like we are doing here.

If you want to grant privileges to a certain user so that they can only manipulate data in a certain database (a wise idea for when you create a user to use in your PHP web application), run the query like this:

<source lang="mysql">
grant select,insert,update,delete on DATABASE.* to USERNAME@'localhost';
</source>

Whenever you change privileges, you also need to run the query <code>flush privileges;</code>:

<source lang="mysql">
flush privileges;
</source>

== phpMyAdmin ==

It is often cumbersome to SSH into your server every time you want to interact with your database. A popular web-based window into your MySQL server is '''phpMyAdmin'''.

=== Installing phpMyAdmin ===

To add phpMyAdmin to apache's root server, you need to make your user apart of the apache group, and change the owner of the root directory to apache.

To add your user to the apache group:
$ sudo usermod -a -G apache YOUR_USERNAME
'''Note you may have to exit your server and ssh back in for this to take effect'''

Change the owner of the www folders to your user, and the group apache
$ sudo chown -R YOUR_USERNAME:apache /var/www

'''Now that you can access the /var/www/html directory''' download phpMyAdmin to apache's root directory using '''wget''', extract it using '''tar -xzvf''', and then remove the archive using '''rm''':

<source lang="bash">
$ cd /var/www/html
$ wget 'https://files.phpmyadmin.net/phpMyAdmin/5.0.4/phpMyAdmin-5.0.4-all-languages.tar.gz'

$ ls
phpMyAdmin-5.0.4-all-languages.tar.gz

$ mkdir phpmyadmin && tar -xvzf phpMyAdmin-5.0.4-all-languages.tar.gz -C phpmyadmin --strip-components 1

$ ls
phpmyadmin phpMyAdmin-5.0.4-all-languages.tar.gz

$ rm phpMyAdmin-5.0.4-all-languages.tar.gz
</source>

Now, create a phpMyAdmin configuration file, which needs to be saved as '''config.inc.php'''. The easiest way to do this is to copy the '''config.sample.inc.php''' file that is included with your download.

<source lang="bash">
$ cd /var/www/html/phpmyadmin
$ sudo cp config.sample.inc.php config.inc.php
$
</source>

Now, open config.inc.php in your favorite text editor (if you forgot how, refer to [[Linux#File Editors|the Linux guide]]), and edit the following line, putting in something random for "mySecretHere":

$cfg['blowfish_secret'] = 'mySecretHere';

Finally, restart Apache, and you're good to go. phpMyAdmin will be accessible via http://ec2-blah-blah.compute-1.amazonaws.com/phpmyadmin/

===== Troubleshooting =====

Older versions of the phpmyadmin package in apt required that you perform one additional step: let Apache know that phpMyAdmin was installed. The new version does this automatically so long as you check the "apache" box in the first step of the installation process.

To manually hook up phpMyAdmin with Apache, run the following command to symlink ''phpmyadmin.conf'' into Apache's ''conf.d'' directory:

<source lang="bash">
$ sudo ln -s /etc/phpmyadmin/apache.conf /etc/apache2/conf.d/phpmyadmin.conf
$ sudo apache2ctl restart # restart Apache
</source>

=== Using phpMyAdmin ===

Once phpMyAdmin is installed, you will see a login screen. Log in using a non-root username and password you set up in the previous section. Once inside, you will see a GUI for interacting with your MySQL database.

Even with the GUI, it is often easier to run queries manually, especially when doing operations like creating a table. To run a query manually, click either the "SQL" tab or the little icon in the toolbar on the upper-left-hand side of the screen that looks like a database cluster (it's third from the left).

== MySQL Schema and State ==

Read the [[MySQL Schema and State]] guide for more information.

== Using MySQL in PHP ==

Read the [[PHP and MySQL]] guide for more information.

[[Category:Module 3]]

Apache

2021-01-27T17:12:28Z

Jasonren: /* Installing Apache */ Added instructions to start Apache after installing it

''Apache'' is the industry standard web server for Linux distributions. It is highly configurable and has a wide range of modules ready for different needs.

{{XKCD
|name=permanence
|id=910
}}

== What is a web server? ==

A web server is software that listens for connections to your machine, and when a connection is receive, processes the request and responds with the appropriate information. Most web servers listen on port 80, which is reserved for the purpose, and use the HTTP protocol.

For example, when you visit this wiki, you are sending a request over the internet to some machine that is probably located somewhere in EIT (the user seldom knows exactly where the machine is located). The web server receives your request, and it processes the data you sent. Finally, the server prepares a response (the web page), and sends it back to you.

== Installing Apache ==

{{RequiredInstructions|content=

In yum, Apache is distributed under the package name '''httpd''' (for ''hypertext transfer protocol daemon''). Use the package manager associated with your distribution to install Apache. (For more information on how to use yum, see [[Linux#Repository-Based Package Managers|the Linux guide]].)

For example:

<source lang="bash">
$ sudo yum update
$ sudo yum install httpd
</source>

You'll need to run this command to add Apache as a startup item:

<source lang="bash">
$ sudo /sbin/chkconfig --levels 235 httpd on
</source>

In RHEL, most Apache configurations are stored in ''/etc/httpd/conf/httpd.conf'' and others are located in the directory ''/etc/httpd/conf.d/''.

At this point, Apache has been installed, but is not yet running. To start the webserver, run this command:

<source lang="bash">
$ sudo /usr/sbin/apachectl start
</source>

}}

== Apache Directives ==

You define your settings for Apache using ''directives''. Some of the directives you will likely encounter include:

* '''DocumentRoot:''' The path to the directory where the top level web files are going to be stored.
* '''IfModule:''' The following block would be included if specified module exists.
* '''User:''' Which user apache2 will run as.
* '''Group:''' Which group will have group access to default web files.
* '''AccessFileName:''' The name of the access file (that specifies user names/passwords and other limitations to files/directories).
* '''ErrorLog:''' Where any errors will be written.
* '''Include:''' Include some other files.
* '''LogFormat:''' How to write a log message.
* '''ErrorDocument:''' Files to display for some HTTP errors (500, 404, 402 etc.).
* '''Alias:''' Map a directory URL to some other location on your filesystem. Requires that the ''Alias'' module be loaded.

=== .htaccess Files ===

You can also specify some Apache configurations without delving into the master configuration file. To do this, put a file named ''.htaccess'' in any directory that Apache is serving. All directives in it will be interpreted as if they were in a Directory directive in the master configuration file.

'''VERY IMPORTANT:''' The directory containing ''.htaccess'' must not have the '''AllowOverride None''' directive in the master configuration file in order for '''.htaccess''' to be read.
=== Directory Directive ===

Use the Directory directive to assign other directives to a specific directory. For example:

<source lang="apache">
<Directory /var/www/>
Options Indexes FollowSymLinks
AllowOverride None
Order allow,deny
allow from all
RedirectMatch ^/$ /apache2-default/
</Directory>
</source>

This sets options for the ''/var/www'' directory.
# The '''Options''' directive says that:
## If no index page is present in a directory, display a directory index page instead
## Apache will follow symbolic links in the directory
# '''AllowOverride None''' says that ''.htaccess'' files cannot alter the Apache options in this directory and all sub-directories
# '''Order allow,deny''' and '''Allow from all''' specifies that anybody is allowed to access this server via HTTP.

Note that this directory is actually the root directory of the web server.

== The UserDir Module ==

{{RequiredInstructions|content=

The UserDir module lets you access files for any user on the server with a ~, e.g., http://ec2-xxx-xxx-xxx-xx.compute-1.amazonaws.com/~paul/

This module comes installed, but not activated by default.

=== Enabling UserDir in RHEL ===

If you are using an RHEL-based distribution for your server (like the Amazon AMI), you need to edit the master Apache configuration file.

Open ''/etc/httpd/conf.d/userdir.conf'' in your favorite text editor. For more information on command-line text editors, refer to [[Linux#File Editors|the Linux guide]].

Find the line that says

<source lang="apache">UserDir disabled</source>

and change it to

<source lang="apache">UserDir disabled root</source>

Additionally, find the line that says

<source lang="apache">#UserDir public_html</source>

and uncomment it; that is, remove the # so that you have

<source lang="apache">UserDir public_html</source>

This tells Apache that the directory containing each user's html files is a subdirectory of their home directory called public_html.

'''Note:''' Users need to manually create public_html. It is not created automatically.

You may also need to change the permissions of your user directory and your public_html directory to allow Apache to read and execute inside them. To do this, run the following commands:

<source lang="bash">
$ sudo chmod o+x /home/myusername
$ sudo chmod o+rx /home/myusername/public_html
$
</source>

Finally, [[#Restarting Apache and Testing|restart Apache]].

}}

=== Remapping UserDir ===

If you want to change the name of the UserDir web server root from '''public_html''' to something else like '''.html''', follow these instructions. (You do not need to do this for the purposes of CSE 330; this serves as a reference.)

# Rename your '''public_html''' to '''.html'''
#* The "." in front of the directory name means that the directory is a hidden one. You will not see it with the normal "ls" command. Use "ls -a" to see hidden files as well.
# Edit the UserDir configuration file.
#* In RHEL, edit the userDir configuration file at ''/etc/httpd/conf.d/userdir.conf''
# Find the line that reads <code>UserDir public_html</code> and change it to <code>UserDir .html/</code>
# [[#Restarting Apache and Testing|Restart Apache]].

== Apache Logs ==

Apache creates two log files: one for all access attempts to your server, and one for errors. The locations of these log files are:

* '''Access Log:''' /var/log/httpd/access_log
* '''Error Log:''' /var/log/httpd/error_log

You might find it helpful to see access and errors appear "live" in your terminal window as they are created. To do this, you can use the [[Linux#Command Reference|tail -f]] command. Since the log files have strict permissions, you will need to also use sudo. Example:

<source lang="bash">
$ sudo tail -f /var/log/httpd/access_log
</source>

== Virtual Hosts ==

'''Virtual Hosts''' are used to run multiple Apache web servers from the same machine. Virtual hosts can listen for connections on different ports and/or different hostnames, serving completely different web sites to each. For example:

<source lang="apache">
<VirtualHost cse330.dyndns.org>
ServerAdmin webmaster@localhost
ServerName cse330.dyndns.org
DocumentRoot /home/www/cse330/
ErrorLog /var/log/httpd/error_log
LogLevel warn
CustomLog /var/log/apache2/access_log combined
ServerSignature On
</VirtualHost>
</source>

This configuration enables any requests that use a host name of ''cse330.dyndns.org'' will use ''/home/www/cse330'' as the root document directory. Make sure that the DocumentRoot directory exists and is readable by the httpd process. In RHEL, Apache runs as the '''apache''' user.

It is good practice to put raw server configuration files in ''/etc/httpd/sites-available''. To activate a site, create a symlink from the configuration in ''sites-available'' to a sibling directory called ''sites-enabled''.

== Restarting Apache and Testing ==

Whenever you make changes to the Apache configuration files, you will need to restart Apache for the changes to take effect. There are several different ways to restart Apache; they all functionally do (almost) the same thing, so choose your favorite:

<source lang="bash">
$ sudo /usr/sbin/apachectl restart
$ sudo apachectl restart # if /usr/sbin is in your PATH (which it is *not* by default in RHEL)
$ sudo /etc/init.d/httpd restart
$ sudo /sbin/service httpd restart
$ sudo service httpd restart
</source>

If you're torn for which version is the "best" to use, the commands involving '''apachectl''' (think "Apache Control") are written by the Apache folks themselves. This has a couple advantages:
* They show you errors in the startup process (if there are any)
* They give you the option to perform a "soft" restart; that is, a restart that allows any pending connections to complete. To perform a soft restart, use ''graceful'': <code>sudo apachectl graceful</code>
In my anecdotal experience, the '''apachectl''' commands are also faster than the '''service''' or '''init.d''' commands.

To make sure everything is working, create a test file in your home directory under public_html, and then point your browser to it: http://ec2-xxx-xx-xx-xxx.compute-1.amazonaws.com/~yourUserName/hello.txt

[[Category:Module 2]]

Introduction to MySQL

2021-01-23T22:38:47Z

Jasonren: /* Using MySQL from the Command Line */ Added additional information about parameters, modified example slightly for MariaDB

This article is an introduction to MySQL, a database used in conjunction with web applications.

== Why Use a Database? ==

In Module 2, you made a web site that used flatfiles to keep track of usernames and uploaded file associations. However, flatfiles are insecure, lack complex logic, and are impractical for a large-scale web application. This is where databases come in. Databases are designed from the ground up to be fast, efficient, and powerful storage solutions for any amount of data.

In CSE330, we will be using '''MySQL''', which is a popular, open-source ''relational database management system'' for web applications.

== Database Structure ==

A MySQL server consists of ''databases'', each of which contains ''tables''. Tables, in turn, consist of one or more ''fields'' (like columns), and the data is stored in one or more ''entries'' (like rows). A field in a table can be designated as an ''index''; that is, something that can be used to look up the information in the database. The set of tables, fields, and indices in your database is called your ''schema''.

MySQL uses the '''Structured Query Language (SQL)''' for manipulating data.

=== Storage Engines ===

MySQL is a database server, but under the hood, it actually uses a '''storage engine''' to retrieve the data. Two storage engines that are popular in the MySQL community are '''InnoDB''' and '''MyISAM'''. MyISAM is slightly faster than InnoDB, and it specializes in database schemas that involve predominantly ''SELECT'' and ''INSERT'' queries (which you will learn about later). However, MyISAM lacks InnoDB's power in making relations between tables, and MyISAM also does not support InnoDB's database transactions. [http://www.akadia.com/services/mysql_survival.html Click here for more information regarding the differences between MyISAM and InnoDB.]

In CSE330, we will be using InnoDB for our primary MySQL storage engine because of its support for foreign key constraints. However, in your personal applications down the road, feel free to use either InnoDB or MyISAM.

== Installing and Configuring MySQL ==

To use MySQL, you need the MySQL Server package. Because we will be interacting with MySQL primarily from PHP scripts, we will also need the associated PHP libraries. In '''yum (RHEL)''', you need the packages '''mariadb-server''' and '''php-mbstring''', and from '''amazon-linux-extras''', you need the package '''lamp-mariadb10.2-php7.2'''. If you're wondering what MariaDB is, it is a fork of MySQL server that is recommended by Amazon for use with Linux 2 AMI systems. For our purposes, MariaDB and MySQL are effectively identical.

To install these packages from their respective package repositories, run the following two commands:

<source lang="bash">
$ sudo yum install -y mariadb-server php-mbstring
$ sudo amazon-linux-extras install -y lamp-mariadb10.2-php7.2
</source>

Remember to restart Apache after installing any packages relating to your web server!

Run these commands to start the server and the client automatically on startup:

<source lang="bash">
$ sudo systemctl start mariadb
$ sudo systemctl enable mariadb
</source>

Run the following command to set the MySQL root user password:

<source lang="bash">
$ mysqladmin -u root password
New password:
Confirm new password:
$
</source>

When it asks, type the new password, press Enter, and then type the new password again. You cannot see what you are typing because a password is supposed to be secret. If the shell displayed the password to you while you were typing it, it would be forever saved in ''~/.bash_history''!

== Using MySQL from the Command Line ==

To interface with MySQL/MariaDB from the command line, use the <code>mysql</code> command. The syntax is:

<source lang="bash">
$ mysql -u USERNAME -p DATABASENAME
Welcome to the MariaDB monitor. ...

MariaDB [(DATABASENAME)]>
</source>

The '''-u''' argument specifies a specific user to use MySQL/MariaDB with, and the '''-p''' argument specifies that you would like to use a password to login to that user. If you add the '''-p''' argument, you will be prompted for the password associated with USERNAME. Failing to provide the '''-p''' is the same as attempting to log in with no password. '''DATABASENAME''' is optional; if this is your first time using MySQL from the command line, you should probably leave this blank.

== Managing Databases ==

To create a database on your MySQL server, simply run the query:

<source lang="mysql">
create database DATABASENAME;
</source>

You can delete a database using the query:

<source lang="mysql">
drop database DATABASENAME;
</source>

When you're at the MySQL prompt, use the following query to select a database to which to run select, insert, update, and delete queries:

<source lang="mysql">
use DATABASENAME;
</source>

== MySQL User Management ==

The first time you log into MySQL, you will need to use the root user, with the password that you specified earlier. However, it is unwise to use the root user for everyday operations with your MySQL database.

=== Creating a New User ===

To create a new user named USERNAME with the password PASSWORD, run the following query inside MySQL:

<source lang="mysql">
create user 'USERNAME'@'localhost' identified by 'PASSWORD';
</source>

This will create USERNAME, but that user will not have privileges to access any databases.

=== Granting Privileges ===

MySQL provides the '''grant''' command to grant privileges to a user. The syntax for assigning USERNAME some PRIVILEGES on a TABLE in a DATABASE is:

<source lang="mysql">
grant PRIVILEGES on DATABASE.TABLE to USERNAME@'localhost';
</source>

If you want to grant global privileges to a certain administrative user, run the query like this:

<source lang="mysql">
grant all on *.* to USERNAME@'localhost' with grant option;
</source>

The ''with grant option'' enables this user to create other users and assign them permissions, like we are doing here.

If you want to grant privileges to a certain user so that they can only manipulate data in a certain database (a wise idea for when you create a user to use in your PHP web application), run the query like this:

<source lang="mysql">
grant select,insert,update,delete on DATABASE.* to USERNAME@'localhost';
</source>

Whenever you change privileges, you also need to run the query <code>flush privileges;</code>:

<source lang="mysql">
flush privileges;
</source>

== phpMyAdmin ==

It is often cumbersome to SSH into your server every time you want to interact with your database. A popular web-based window into your MySQL server is '''phpMyAdmin'''.

=== Installing phpMyAdmin ===

To add phpMyAdmin to apache's root server, you need to make your user apart of the apache group, and change the owner of the root directory to apache.

To add your user to the apache group:
$ sudo usermod -a -G apache YOUR_USERNAME
'''Note you may have to exit your server and ssh back in for this to take effect'''

Change the owner of the www folders to your user, and the group apache
$ sudo chown -R YOUR_USERNAME:apache /var/www

'''Now that you can access the /var/www/html directory''' download phpMyAdmin to apache's root directory using '''wget''', and then extract it using '''tar -xzvf''':

<source lang="bash">
$ cd /var/www/html
$ wget 'https://files.phpmyadmin.net/phpMyAdmin/4.9.4/phpMyAdmin-4.9.4-all-languages.tar.gz'

$ ls
phpMyAdmin-4.9.4-all-languages.tar.gz

$ mkdir phpmyadmin && tar -xvzf phpMyAdmin-4.9.4-all-languages.tar.gz -C phpmyadmin --strip-components 1

$ ls
phpmyadmin phpMyAdmin-4.9.4-all-languages.tar.gz

$ rm phpMyAdmin-4.9.4-all-languages.tar.gz
</source>

Now, create a phpMyAdmin configuration file, which needs to be saved as '''config.inc.php'''. The easiest way to do this is to copy the '''config.sample.inc.php''' file that is included with your download.

<source lang="bash">
$ cd /var/www/html/phpmyadmin
$ sudo cp config.sample.inc.php config.inc.php
$
</source>

Now, open config.inc.php in your favorite text editor (if you forgot how, refer to [[Linux#File Editors|the Linux guide]]), and edit the following line, putting in something random for "mySecretHere":

$cfg['blowfish_secret'] = 'mySecretHere';

Finally, restart Apache, and you're good to go. phpMyAdmin will be accessible via http://ec2-blah-blah.compute-1.amazonaws.com/phpmyadmin/

===== Troubleshooting =====

Older versions of the phpmyadmin package in apt required that you perform one additional step: let Apache know that phpMyAdmin was installed. The new version does this automatically so long as you check the "apache" box in the first step of the instalation process.

To manually hook up phpMyAdmin with Apache, run the following command to symlink ''phpmyadmin.conf'' into Apache's ''conf.d'' directory:

<source lang="bash">
$ sudo ln -s /etc/phpmyadmin/apache.conf /etc/apache2/conf.d/phpmyadmin.conf
$ sudo apache2ctl restart # restart Apache
</source>

=== Using phpMyAdmin ===

Once phpMyAdmin is installed, you will see a login screen. Log in using a non-root username and password you set up in the previous section. Once inside, you will see a GUI for interacting with your MySQL database.

Even with the GUI, it is often easier to run queries manually, especially when doing operations like creating a table. To run a query manually, click either the "SQL" tab or the little icon in the toolbar on the upper-left-hand side of the screen that looks like a database cluster (it's third from the left).

== MySQL Schema and State ==

Read the [[MySQL Schema and State]] guide for more information.

== Using MySQL in PHP ==

Read the [[PHP and MySQL]] guide for more information.

[[Category:Module 3]]

Introduction to MySQL

2021-01-23T22:31:58Z

Jasonren: /* Installing and Configuring MySQL */ Changed instructions to install MariaDB for Linux 2 AMI

This article is an introduction to MySQL, a database used in conjunction with web applications.

== Why Use a Database? ==

In Module 2, you made a web site that used flatfiles to keep track of usernames and uploaded file associations. However, flatfiles are insecure, lack complex logic, and are impractical for a large-scale web application. This is where databases come in. Databases are designed from the ground up to be fast, efficient, and powerful storage solutions for any amount of data.

In CSE330, we will be using '''MySQL''', which is a popular, open-source ''relational database management system'' for web applications.

== Database Structure ==

A MySQL server consists of ''databases'', each of which contains ''tables''. Tables, in turn, consist of one or more ''fields'' (like columns), and the data is stored in one or more ''entries'' (like rows). A field in a table can be designated as an ''index''; that is, something that can be used to look up the information in the database. The set of tables, fields, and indices in your database is called your ''schema''.

MySQL uses the '''Structured Query Language (SQL)''' for manipulating data.

=== Storage Engines ===

MySQL is a database server, but under the hood, it actually uses a '''storage engine''' to retrieve the data. Two storage engines that are popular in the MySQL community are '''InnoDB''' and '''MyISAM'''. MyISAM is slightly faster than InnoDB, and it specializes in database schemas that involve predominantly ''SELECT'' and ''INSERT'' queries (which you will learn about later). However, MyISAM lacks InnoDB's power in making relations between tables, and MyISAM also does not support InnoDB's database transactions. [http://www.akadia.com/services/mysql_survival.html Click here for more information regarding the differences between MyISAM and InnoDB.]

In CSE330, we will be using InnoDB for our primary MySQL storage engine because of its support for foreign key constraints. However, in your personal applications down the road, feel free to use either InnoDB or MyISAM.

== Installing and Configuring MySQL ==

To use MySQL, you need the MySQL Server package. Because we will be interacting with MySQL primarily from PHP scripts, we will also need the associated PHP libraries. In '''yum (RHEL)''', you need the packages '''mariadb-server''' and '''php-mbstring''', and from '''amazon-linux-extras''', you need the package '''lamp-mariadb10.2-php7.2'''. If you're wondering what MariaDB is, it is a fork of MySQL server that is recommended by Amazon for use with Linux 2 AMI systems. For our purposes, MariaDB and MySQL are effectively identical.

To install these packages from their respective package repositories, run the following two commands:

<source lang="bash">
$ sudo yum install -y mariadb-server php-mbstring
$ sudo amazon-linux-extras install -y lamp-mariadb10.2-php7.2
</source>

Remember to restart Apache after installing any packages relating to your web server!

Run these commands to start the server and the client automatically on startup:

<source lang="bash">
$ sudo systemctl start mariadb
$ sudo systemctl enable mariadb
</source>

Run the following command to set the MySQL root user password:

<source lang="bash">
$ mysqladmin -u root password
New password:
Confirm new password:
$
</source>

When it asks, type the new password, press Enter, and then type the new password again. You cannot see what you are typing because a password is supposed to be secret. If the shell displayed the password to you while you were typing it, it would be forever saved in ''~/.bash_history''!

== Using MySQL from the Command Line ==

To interface with MySQL from the command line, use the <code>mysql</code> command. The syntax is:

<source lang="bash">
$ mysql -u USERNAME -p DATABASENAME
Welcome to the MySQL monitor. ...

mysql>
</source>

You will be prompted for the password associated with USERNAME.

== Managing Databases ==

To create a database on your MySQL server, simply run the query:

<source lang="mysql">
create database DATABASENAME;
</source>

You can delete a database using the query:

<source lang="mysql">
drop database DATABASENAME;
</source>

When you're at the MySQL prompt, use the following query to select a database to which to run select, insert, update, and delete queries:

<source lang="mysql">
use DATABASENAME;
</source>

== MySQL User Management ==

The first time you log into MySQL, you will need to use the root user, with the password that you specified earlier. However, it is unwise to use the root user for everyday operations with your MySQL database.

=== Creating a New User ===

To create a new user named USERNAME with the password PASSWORD, run the following query inside MySQL:

<source lang="mysql">
create user 'USERNAME'@'localhost' identified by 'PASSWORD';
</source>

This will create USERNAME, but that user will not have privileges to access any databases.

=== Granting Privileges ===

MySQL provides the '''grant''' command to grant privileges to a user. The syntax for assigning USERNAME some PRIVILEGES on a TABLE in a DATABASE is:

<source lang="mysql">
grant PRIVILEGES on DATABASE.TABLE to USERNAME@'localhost';
</source>

If you want to grant global privileges to a certain administrative user, run the query like this:

<source lang="mysql">
grant all on *.* to USERNAME@'localhost' with grant option;
</source>

The ''with grant option'' enables this user to create other users and assign them permissions, like we are doing here.

If you want to grant privileges to a certain user so that they can only manipulate data in a certain database (a wise idea for when you create a user to use in your PHP web application), run the query like this:

<source lang="mysql">
grant select,insert,update,delete on DATABASE.* to USERNAME@'localhost';
</source>

Whenever you change privileges, you also need to run the query <code>flush privileges;</code>:

<source lang="mysql">
flush privileges;
</source>

== phpMyAdmin ==

It is often cumbersome to SSH into your server every time you want to interact with your database. A popular web-based window into your MySQL server is '''phpMyAdmin'''.

=== Installing phpMyAdmin ===

To add phpMyAdmin to apache's root server, you need to make your user apart of the apache group, and change the owner of the root directory to apache.

To add your user to the apache group:
$ sudo usermod -a -G apache YOUR_USERNAME
'''Note you may have to exit your server and ssh back in for this to take effect'''

Change the owner of the www folders to your user, and the group apache
$ sudo chown -R YOUR_USERNAME:apache /var/www

'''Now that you can access the /var/www/html directory''' download phpMyAdmin to apache's root directory using '''wget''', and then extract it using '''tar -xzvf''':

<source lang="bash">
$ cd /var/www/html
$ wget 'https://files.phpmyadmin.net/phpMyAdmin/4.9.4/phpMyAdmin-4.9.4-all-languages.tar.gz'

$ ls
phpMyAdmin-4.9.4-all-languages.tar.gz

$ mkdir phpmyadmin && tar -xvzf phpMyAdmin-4.9.4-all-languages.tar.gz -C phpmyadmin --strip-components 1

$ ls
phpmyadmin phpMyAdmin-4.9.4-all-languages.tar.gz

$ rm phpMyAdmin-4.9.4-all-languages.tar.gz
</source>

Now, create a phpMyAdmin configuration file, which needs to be saved as '''config.inc.php'''. The easiest way to do this is to copy the '''config.sample.inc.php''' file that is included with your download.

<source lang="bash">
$ cd /var/www/html/phpmyadmin
$ sudo cp config.sample.inc.php config.inc.php
$
</source>

Now, open config.inc.php in your favorite text editor (if you forgot how, refer to [[Linux#File Editors|the Linux guide]]), and edit the following line, putting in something random for "mySecretHere":

$cfg['blowfish_secret'] = 'mySecretHere';

Finally, restart Apache, and you're good to go. phpMyAdmin will be accessible via http://ec2-blah-blah.compute-1.amazonaws.com/phpmyadmin/

===== Troubleshooting =====

Older versions of the phpmyadmin package in apt required that you perform one additional step: let Apache know that phpMyAdmin was installed. The new version does this automatically so long as you check the "apache" box in the first step of the instalation process.

To manually hook up phpMyAdmin with Apache, run the following command to symlink ''phpmyadmin.conf'' into Apache's ''conf.d'' directory:

<source lang="bash">
$ sudo ln -s /etc/phpmyadmin/apache.conf /etc/apache2/conf.d/phpmyadmin.conf
$ sudo apache2ctl restart # restart Apache
</source>

=== Using phpMyAdmin ===

Once phpMyAdmin is installed, you will see a login screen. Log in using a non-root username and password you set up in the previous section. Once inside, you will see a GUI for interacting with your MySQL database.

Even with the GUI, it is often easier to run queries manually, especially when doing operations like creating a table. To run a query manually, click either the "SQL" tab or the little icon in the toolbar on the upper-left-hand side of the screen that looks like a database cluster (it's third from the left).

== MySQL Schema and State ==

Read the [[MySQL Schema and State]] guide for more information.

== Using MySQL in PHP ==

Read the [[PHP and MySQL]] guide for more information.

[[Category:Module 3]]

Apache

2021-01-23T22:03:24Z

Jasonren: /* Installing Apache */

''Apache'' is the industry standard web server for Linux distributions. It is highly configurable and has a wide range of modules ready for different needs.

{{XKCD
|name=permanence
|id=910
}}

== What is a web server? ==

A web server is software that listens for connections to your machine, and when a connection is receive, processes the request and responds with the appropriate information. Most web servers listen on port 80, which is reserved for the purpose, and use the HTTP protocol.

For example, when you visit this wiki, you are sending a request over the internet to some machine that is probably located somewhere in EIT (the user seldom knows exactly where the machine is located). The web server receives your request, and it processes the data you sent. Finally, the server prepares a response (the web page), and sends it back to you.

== Installing Apache ==

{{RequiredInstructions|content=

In yum, Apache is distributed under the package name '''httpd''' (for ''hypertext transfer protocol daemon''). Use the package manager associated with your distribution to install Apache. (For more information on how to use yum, see [[Linux#Repository-Based Package Managers|the Linux guide]].)

For example:

<source lang="bash">
$ sudo yum update
$ sudo yum install httpd
</source>

You'll need to run this command to add Apache as a startup item:

<source lang="bash">
$ sudo /sbin/chkconfig --levels 235 httpd on
</source>

In RHEL, most Apache configurations are stored in ''/etc/httpd/conf/httpd.conf'' and others are located in the directory ''/etc/httpd/conf.d/''.

}}

== Apache Directives ==

You define your settings for Apache using ''directives''. Some of the directives you will likely encounter include:

* '''DocumentRoot:''' The path to the directory where the top level web files are going to be stored.
* '''IfModule:''' The following block would be included if specified module exists.
* '''User:''' Which user apache2 will run as.
* '''Group:''' Which group will have group access to default web files.
* '''AccessFileName:''' The name of the access file (that specifies user names/passwords and other limitations to files/directories).
* '''ErrorLog:''' Where any errors will be written.
* '''Include:''' Include some other files.
* '''LogFormat:''' How to write a log message.
* '''ErrorDocument:''' Files to display for some HTTP errors (500, 404, 402 etc.).
* '''Alias:''' Map a directory URL to some other location on your filesystem. Requires that the ''Alias'' module be loaded.

=== .htaccess Files ===

You can also specify some Apache configurations without delving into the master configuration file. To do this, put a file named ''.htaccess'' in any directory that Apache is serving. All directives in it will be interpreted as if they were in a Directory directive in the master configuration file.

'''VERY IMPORTANT:''' The directory containing ''.htaccess'' must not have the '''AllowOverride None''' directive in the master configuration file in order for '''.htaccess''' to be read.
=== Directory Directive ===

Use the Directory directive to assign other directives to a specific directory. For example:

<source lang="apache">
<Directory /var/www/>
Options Indexes FollowSymLinks
AllowOverride None
Order allow,deny
allow from all
RedirectMatch ^/$ /apache2-default/
</Directory>
</source>

This sets options for the ''/var/www'' directory.
# The '''Options''' directive says that:
## If no index page is present in a directory, display a directory index page instead
## Apache will follow symbolic links in the directory
# '''AllowOverride None''' says that ''.htaccess'' files cannot alter the Apache options in this directory and all sub-directories
# '''Order allow,deny''' and '''Allow from all''' specifies that anybody is allowed to access this server via HTTP.

Note that this directory is actually the root directory of the web server.

== The UserDir Module ==

{{RequiredInstructions|content=

The UserDir module lets you access files for any user on the server with a ~, e.g., http://ec2-xxx-xxx-xxx-xx.compute-1.amazonaws.com/~paul/

This module comes installed, but not activated by default.

=== Enabling UserDir in RHEL ===

If you are using an RHEL-based distribution for your server (like the Amazon AMI), you need to edit the master Apache configuration file.

Open ''/etc/httpd/conf.d/userdir.conf'' in your favorite text editor. For more information on command-line text editors, refer to [[Linux#File Editors|the Linux guide]].

Find the line that says

<source lang="apache">UserDir disabled</source>

and change it to

<source lang="apache">UserDir disabled root</source>

Additionally, find the line that says

<source lang="apache">#UserDir public_html</source>

and uncomment it; that is, remove the # so that you have

<source lang="apache">UserDir public_html</source>

This tells Apache that the directory containing each user's html files is a subdirectory of their home directory called public_html.

'''Note:''' Users need to manually create public_html. It is not created automatically.

You may also need to change the permissions of your user directory and your public_html directory to allow Apache to read and execute inside them. To do this, run the following commands:

<source lang="bash">
$ sudo chmod o+x /home/myusername
$ sudo chmod o+rx /home/myusername/public_html
$
</source>

Finally, [[#Restarting Apache and Testing|restart Apache]].

}}

=== Remapping UserDir ===

If you want to change the name of the UserDir web server root from '''public_html''' to something else like '''.html''', follow these instructions. (You do not need to do this for the purposes of CSE 330; this serves as a reference.)

# Rename your '''public_html''' to '''.html'''
#* The "." in front of the directory name means that the directory is a hidden one. You will not see it with the normal "ls" command. Use "ls -a" to see hidden files as well.
# Edit the UserDir configuration file.
#* In RHEL, edit the userDir configuration file at ''/etc/httpd/conf.d/userdir.conf''
# Find the line that reads <code>UserDir public_html</code> and change it to <code>UserDir .html/</code>
# [[#Restarting Apache and Testing|Restart Apache]].

== Apache Logs ==

Apache creates two log files: one for all access attempts to your server, and one for errors. The locations of these log files are:

* '''Access Log:''' /var/log/httpd/access_log
* '''Error Log:''' /var/log/httpd/error_log

You might find it helpful to see access and errors appear "live" in your terminal window as they are created. To do this, you can use the [[Linux#Command Reference|tail -f]] command. Since the log files have strict permissions, you will need to also use sudo. Example:

<source lang="bash">
$ sudo tail -f /var/log/httpd/access_log
</source>

== Virtual Hosts ==

'''Virtual Hosts''' are used to run multiple Apache web servers from the same machine. Virtual hosts can listen for connections on different ports and/or different hostnames, serving completely different web sites to each. For example:

<source lang="apache">
<VirtualHost cse330.dyndns.org>
ServerAdmin webmaster@localhost
ServerName cse330.dyndns.org
DocumentRoot /home/www/cse330/
ErrorLog /var/log/httpd/error_log
LogLevel warn
CustomLog /var/log/apache2/access_log combined
ServerSignature On
</VirtualHost>
</source>

This configuration enables any requests that use a host name of ''cse330.dyndns.org'' will use ''/home/www/cse330'' as the root document directory. Make sure that the DocumentRoot directory exists and is readable by the httpd process. In RHEL, Apache runs as the '''apache''' user.

It is good practice to put raw server configuration files in ''/etc/httpd/sites-available''. To activate a site, create a symlink from the configuration in ''sites-available'' to a sibling directory called ''sites-enabled''.

== Restarting Apache and Testing ==

Whenever you make changes to the Apache configuration files, you will need to restart Apache for the changes to take effect. There are several different ways to restart Apache; they all functionally do (almost) the same thing, so choose your favorite:

<source lang="bash">
$ sudo /usr/sbin/apachectl restart
$ sudo apachectl restart # if /usr/sbin is in your PATH (which it is *not* by default in RHEL)
$ sudo /etc/init.d/httpd restart
$ sudo /sbin/service httpd restart
$ sudo service httpd restart
</source>

If you're torn for which version is the "best" to use, the commands involving '''apachectl''' (think "Apache Control") are written by the Apache folks themselves. This has a couple advantages:
* They show you errors in the startup process (if there are any)
* They give you the option to perform a "soft" restart; that is, a restart that allows any pending connections to complete. To perform a soft restart, use ''graceful'': <code>sudo apachectl graceful</code>
In my anecdotal experience, the '''apachectl''' commands are also faster than the '''service''' or '''init.d''' commands.

To make sure everything is working, create a test file in your home directory under public_html, and then point your browser to it: http://ec2-xxx-xx-xx-xxx.compute-1.amazonaws.com/~yourUserName/hello.txt

[[Category:Module 2]]

PHP

2021-01-23T22:02:50Z

Jasonren: Changed version of PHP to install to be compatible with Amazon Linux 2 AMI

PHP is an open-source language used widely for writing server-side code for web servers. PHP is a good starting point for web developers, as it is straightforward to learn and yet powerful at the same time. Indeed, some of the internet's most popular web sites (including Facebook and Wikipedia) are written using PHP as their language of choice! This article introduces the syntax of PHP and how to make a basic PHP web application.

{{XKCD
|name=mac_pc
|id=934
}}

== What is PHP? ==

PHP is a server-side scripting language widely used in web development. PHP is what turns your web site from a static fileserver into a dynamic web application.

By default, Apache only knows how to serve static HTML pages to the client. You can write as many HTML pages as you want, which is fine for basic web sites. But if you want to have users post to a forum, or process credit card transactions, or make your own online calendar, a server-side language like PHP is what you need.

=== Document Generation Language ===

If PHP's original core purpose had to be described in three words, it would be this: '''document generation language'''. Unlike languages including Java, Ruby, Python, and Perl, which consist of classes in a strict program layout, PHP code is most often embedded inside a template document. When the PHP interpreter runs, it "fills in the gaps" and generates a finished product document.

This isn't to say that PHP can ''only'' be a document generating language, because this is certainly not true. However, for the purposes of Module 2, it is safe to think of it this way when you are learning the concepts behind a web server.

==== MIME Types ====

By default, PHP generates HTML documents. (Recall that an HTML document is simply a block of text consisting of markup conforming to the HTML standard.)

However, PHP does not need to generate HTML documents. It can also generate images, PDFs, or any other type of document. Each of these document types has its own unique markup language. The markup language used by a certain document is defined by its ''MIME Type''.

The HTML MIME Type is '''text/html'''. Other MIME Types include '''image/jpeg''', '''image/png''', and '''application/xml'''.

To change the MIME Type of the document generated by PHP, use the statement:

<source lang="php">
header("Content-Type: image/jpeg");
</source>

Since PHP generates HTML documents by default, you can think of there being an implicit <code>header("Content-Type: text/html");</code> at the top of every PHP script.

=== PHP and Apache ===

When you request a PHP file over Apache, the file is ''not'' sent verbatim. Instead, it is first sent through the PHP interpreter. Here is an oversimplified schematic of the process:

[[File:PHP-Apache_Flowchart.png]]

In summary, here are some points to keep in mind.

# A PHP file on your server is not an HTML document. It is a PHP script.
# PHP generates documents. By default, it generates HTML documents.
# PHP can generate other document types by changing the MIME Type in the Content-Type HTTP Header.
# Apache runs the PHP interpreter on your PHP script before transmitting it to the browser. The content that is generated after the PHP interpreter runs is expected to match the MIME type: by default, an HTML document.
# The W3C Validator checks for valid markup in an HTML document. Everywhere that PHP generates an HTML document, that HTML document should be valid.

== Installing PHP ==

{{RequiredInstructions|content=

To install PHP 7.2, run the following command to install php7.2 from the Amazon Linux Extras repository.
sudo amazon-linux-extras install -y php7.2

Once you install the required packages, [[Web Server Configuration#Restarting Apache and Testing|restart Apache]] for the changes to take effect.

}}

== PHP Configurations ==

{{RequiredInstructions|content=

The PHP configuration file is called ''php.ini''. In RHEL, it is located at ''/etc/php.ini''.

The configuration file is largely self-documenting as to what the different options mean. There is one value in particular that we want to change for the purposes of CSE330. Open php.ini in your favorite text editor, find the '''display_errors''' option, and set it to '''On''':

display_errors = On

You will need to restart Apache for any php.ini changes to take effect.

'''Note:''' You can turn errors on or off for a certain PHP script by using the '''error_reporting()''' and/or '''ini_set()''' functions.

'''Note:''' If you tell PHP to log its errors, they will be stored in the Apache error log file, at ''/var/log/httpd/error_log''.

}}

== Your First PHP Script ==

By default, all files that have the *.php extension will be interpreted as containing PHP code.
All files with PHP need to be saved as '.php'; not '.html'.
Here is the most basic PHP script:

<source lang="php">
<?php
phpinfo();
?>
</source>

Save that code into a file named phpinfo.php, and save it in your web server directory (/var/www/html/). Load it up in your browser like this: ''http://ec2-blah-blah.compute-1.amazonaws.com/phpinfo.php''

If you see something like this, your PHP installation is working!

[[Image:Php_info.png]]

Look at the source code of that page. Notice that even though there were only three lines of code in our PHP file, PHP filled it up with hundreds of lines of HTML!

Your own PHP scripts will probably look something more like this:

<source lang="php">
<!DOCTYPE html>
<html>
<head>
<title>My First PHP Script</title>
</head>
<body>
<?php
echo "\t<p>Hello World!</p>\n";
?>
</body>
</html>
</source>

The above code will send the following HTML to the browser:

<source lang="html4strict">
<!DOCTYPE html>
<html>
<head>
<title>My First PHP Script</title>
</head>
<body>
<p>Hello World!</p>
</body>
</html>
</source>

Here's the take-home message of this section. To run PHP code, enclose it in <code><?php ?></code> tags; HTML code can be used in a PHP file (although not inside the PHP code block!); and just a few lines of code can generate an arbitrary amount of HTML.

== PHP Language Components ==

PHP is a programming language much like others you have learned: it has variables, arrays, functions, objects etc. However, the syntax for PHP and the way PHP handles variables may be new to you. This section gives an overview of PHP the language.

=== Variables ===

All variables start with the currency '''$''' symbol. The '''$''' is necessary for both setting and accessing.

PHP is a weak-typed language; that is, you can set any type of value to a variable (string, array, number, etc), and PHP will accept it, even if that variable previously contained a different data type. In some ways this is convenient, but in others it can lead to hard-to-detect bugs, so be careful.

<source lang="php">
<?php
$i = 5; # Set the integer 5 to the variable $i
$msg = "Hello World"; # Set the string Hello World to the variable $msg
?>
</source>

Notice that all lines in PHP necessarily end with a semicolon. If you forget a semicolon, the PHP will fail to parse!

=== Strings ===

Strings in PHP can be either single-quoted or double-quoted. Single-quoted strings are always taken literally; double-quoted strings allow for additional elements.

<source lang="php">
<?php
$a = "Apple";
$b = "Banana";

$fruits_double = "$a\n$b"; # $fruits_double now contains the string Apple (line break) Banana
$fruits_single = '$a\n$b'; # $fruits_single now contains the string $a\n$b
?>
</source>

If you want to use special characters in a double-quoted strings, escape them using the backslash operator:

<source lang="php">
<?php
$a = "Apple";
$b = "Banana";

$fruits = "\$a\\n$b"; # $fruits now contains the string $a\nBanana
?>
</source>

You can concatenate multiple strings together using the concatenation operator, which in php is a period:

<source lang="php">
<?php
$c = "Cherry";
$g = "Grapefruit";

$fruits = $c."\n".$g; # $fruits contains the string Cherry (line break) Grapefruit
?>
</source>

=== Arrays ===

Declaring arrays is very simple in PHP.

<source lang="php">
<?php

$fruits = array("Apple", "Banana", "Cherry", "Grapefruit"); # $arr now contains an array with 4 items

echo $fruits[1]; # displays Banana

echo count($fruits); # displays 4

array_shift($fruits); # remove the first element of the array

echo $fruits[1]; # displays Cherry

echo count($fruits); # displays 3

?>
</source>

Note: '''echo''' outputs a string to the browser. We will see more ways to output data [[#Outputting Data|later in this guide]].

PHP also supports ''associative arrays''. Associative arrays are arrays whose keys are strings rather than numbers; in some languages, they are called Dictionaries.

<source lang="php">
<?php

$fruits["a"] = "Apple";
$fruits["b"] = "Banana";
$fruits["c"] = "Cherry";
$fruits["g"] = "Grapefruit";

echo $fruits["c"]; # displays Cherry

$keys = array_keys($fruits); # get an array containing indexed values of the fruits' keys

echo $keys[3]; # displays g

?>
</source>

=== Conditional Statements ===

Conditional statements work similarly to how they do in other languages.

<source lang="php">
<?php
$grade = 85;

if ($grade < 60) {
echo "F";
} elseif ($grade < 70) {
echo "D";
} elseif ($grade < 80) {
echo "C";
} elseif ($grade < 90) {
echo "B";
} else {
echo "A";
}
?>
</source>

PHP also supports switch statements, which are convenient for simplifying long if/elseif/else blocks:

<source lang="php">
<?php
$food = "Apple";

switch ($food) {

case "Apple":
case "Banana":
case "Cherry":
case "Grapefruit":
echo "You must like fruit!";
break;
case "Broccoli":
case "Spinach":
echo "You must like vegetables!";
break;
default:
echo "You don't like fruits or vegetables!";
break;

}
?>
</source>

=== Loops ===

PHP supports several different kinds of loops, including while, for, and foreach:

<source lang="php">
<?php

$mystring = "";
$i = 0;
while ($i < 5) {
$mystring .= "Blah";
$i++;
}
echo $mystring; # displays BlahBlahBlahBlahBlah

$myarray = array("Apple", "Banana", "Cherry", "Grapefruit");

# The following two loops are functionally equivalent.

$mystring = "";
for($i=0; $i<count($myarray); $i++){
$mystring .= $i.": ".$myarray[$i].", ";
}
echo $mystring; # displays 0: Apple, 1: Banana, 2: Cherry, 3: Grapefruit

$mystring = "";
foreach($myarray as $key => $value){
$mystring .= $key.": ".$value;
}
echo $mystring; #displays 0: Apple, 1: Banana, 2: Cherry, 3: Grapefruit

?>
</source>

=== Functions ===

Just like with all modern programming languages, you can define your own functions with PHP.

<source lang="php">
<?php

function add($x, $y){
return $x + $y;
}

echo add(3, 5); # displays 8

?>
</source>

A neat shortcut for PHP is that you can specify default parameter values directly in the argument list:

<source lang="php">
<?php

function sayHello($name="John Doe"){
return "Hello, $name... how do you do?";
}

echo sayHello("Todd"); # displays Hello, Todd... how do you do?
echo sayHello(); # displays Hello, John Doe... how do you do?

?>
</source>

=== Object-Oriented Programming ===

PHP5 supports object-oriented programming, and many new libraries come as classes rather than simple functions. Here is an example class definition:

<source lang="php">
<?php

class Food {
protected $name;

function __construct($name){
$this->name = $name;
}

static function getDefinition(){
return "Food is nourishment for carbon-based lifeforms.";
}

function formatName(){
return "Gotta love to eat " . $this->name;
}
}

class Fruit extends Food {
function formatName(){
return Food::formatName() . " (fruit)";
}
}

$fruit = new Fruit("Cherry");

echo $fruit->formatName() . "\n"; # displays: Gotta love to eat Cherry (fruit)

echo Fruit::getDefinition() . "\n"; # displays: Food is nourishment for carbon-based lifeforms.

?>
</source>

Things to notice:

* All methods in a class must be preceded by the function keyword.
* Static methods require the '''static''' keyword
* Instance methods can refer to the current instance through the implicit variable '''$this'''
* To access properties and methods from an instance, use an arrow: '''$instance->property'''
* To access static properties and methods from a class, use two colons: '''ClassName::StaticPropertyOrMethod'''
* Instances of classes are defined using the syntax '''$instance = new ClassName();''' like in Java

== Outputting Data ==

What's the point of a web language if we can't output data? The most basic method for outputting data is using either the '''echo''' or '''print''' statement:

<source lang="php">
<?php
echo "Hello World"; # outputs Hello World to the browser
?>
</source>

You often find yourself wanting to print all information associated with a variable for debugging purposes. PHP provides the handy '''var_dump''' function for that:

<source lang="php">
<?php
var_dump($myvar);
?>
</source>

=== Content Type ===

PHP is just a factory for generating documents. We've so far seen it create HTML documents, but it can just as easily create images, PDFs, or any other type of interpreted file format. Each of these files formats has a '''MIME Type''' associated with it. To specify a MIME type for a page served over HTTP, the <code>Content-Type</code> header must be set.

This brings up an important point. '''Every PHP document has an implicit <code>Content-Type: text/html</code> header.''' This means that by default, PHP will generate HTML documents. '''The MIME type for a document can be changed using the header() function:'''

<source lang="php">
<?php
header("Content-Type: text/plain");
echo time();
?>
</source>

The above example creates a plain text file containing the current timestamp (number of seconds since January 1, 1970).

For another application of the Content-Type header, see [[#Sending a File to the Browser]]

=== sprintf() ===

Code in PHP that outputs information can get very ugly. Consider, for example, the following snippet:

<source lang="php">
<?php
$medals = array(
"United States" => array(46, 29, 29),
"China" => array(38, 27, 23),
"Russia" => array(24, 26, 32)
);
?>

<table>
<tr>
<th>Country</th>
<th>Gold Medals</th>
<th>Silver Medals</th>
<th>Bronze Medals</th>
</tr>
<?php
foreach($medals as $country => $counts){
echo "\t<tr>\n\t\t<td>".htmlentities($country)."</td>\n\t\t<td>".htmlentities($counts[0])."</td>\n\t\t<td>".htmlentities($counts[1])."</td>\n\t\t<td>".htmlentities($counts[2])."</td>\n\t</tr>\n";
}
?>
</table>
</source>

This code will generate the following HTML:

<source lang="html4strict">
<table>
<tr>
<th>Country</th>
<th>Gold Medals</th>
<th>Silver Medals</th>
<th>Bronze Medals</th>
</tr>
<tr>
<td>United States</td>
<td>46</td>
<td>29</td>
<td>29</td>
</tr>
<tr>
<td>China</td>
<td>38</td>
<td>27</td>
<td>23</td>
</tr>
<tr>
<td>Russia</td>
<td>24</td>
<td>26</td>
<td>32</td>
</tr>
</table>
</source>

It's not very clear, though, that this is what the PHP code is going to generate. In particular, the ''echo'' line inside the ''foreach'' loop is 196 jumbled characters!

'''sprintf()''' is a nifty PHP function (with roots in C) that allows us to clean up that code. We get the same output as above if we use the following PHP instead:

<source lang="php">
<?php
$medals = array(
"United States" => array(46, 29, 29),
"China" => array(38, 27, 23),
"Russia" => array(24, 26, 32)
);
?>

<table>
<tr>
<th>Country</th>
<th>Gold Medals</th>
<th>Silver Medals</th>
<th>Bronze Medals</th>
</tr>
<?php
foreach($medals as $country => $counts){
echo sprintf("\t<tr>\n\t\t<td>%s</td>\n\t\t<td>%d</td>\n\t\t<td>%d</td>\n\t\t<td>%d</td>\n\t</tr>\n",
htmlentities($country),
$counts[0],
$counts[1],
$counts[2]
);
}
?>
</table>
</source>

The above code is more straightforward and self-explanatory than the first example, and it is also easier to edit and maintain.

Here's how '''sprintf()''' works. The first argument is a ''format string''. A format string can contain ''conversion specifications'' for additional data that will be inserted into the format string. The most common conversion specifications are:

* '''%s''' for a string
* '''%d''' for a signed integer
* '''%u''' for an unsigned integer
* '''%f''' for a floating-point number
** '''%.2f''' for a floating-point number with 2 decimal places
* '''%%''' for a literal percentage sign

For more detail on sprintf formats, refer to [http://us.php.net/sprintf the PHP documentation].

The remaining arguments are the data that are inserted into each of the conversion specifications. In the example above, there are four conversion specifications ('''%s''', '''%d''', '''%d''', and '''%d'''), so '''sprintf()''' takes 4 additional arguments after the format string.

Note that we still need to sanitize string output (using '''htmlentities()''' ) when we are using '''sprintf()'''. However, since our format string specifies integers for the remaining three arguments, '''sprintf()''' will take care of type casting, so we no longer need to worry about sanitizing the integers.

An additional tip: '''printf()''' is a shortcut for '''echo sprintf()'''. That is, the following lines are functionally equivalent:

<source lang="php">
<?php
$n = 12345.678;
printf("%.2f\n", $n); // prints 12345.68
echo sprintf("%.2f\n", $n); // also prints 12345.68
?>
</source>

== Passing Variables ==

Input values can be passed to a script either through the URL request line or through data submitted by a form. Built in arrays $_GET['var'] and $_POST['var'] return the value of ''var'' depending on the access method. As we will see in the next section, values can also be passed through session variables. Finally, you can use cookies to store and retrieve values.

Note that upon submitting a form, the page specified in the form tag's action attribute is loaded (with variables sent via post or get).

=== GET: Passing Variables via URL ===

If you want to pass values in a URL, the format is <nowiki>''http://example.com/yourphpfile.php?var1=value1&var2=value2.....''</nowiki>

PHP saves URL variables in the associative array '''$_GET'''.

For example, the following PHP document would print a hello message according to a name given in the URL.

<source lang="php">
<!DOCTYPE html>
<head><title>Hello World</title></head>
<body>
<?php
$name = $_GET['name'];

printf("<p>Hello, %s; how do you do?</p>\n",
htmlentities($name)
);
?>
</body>
</html>
</source>

If you access the URL like this: ''greeting.php?name=Alice'', it will show ''Hello, Alice; how do you do?''

'''Note:''' Before we output the name, we pass it through '''htmlentities()''', which sanitizes it for output to the HTML document. This is necessary because if we displayed the name verbatim from the URL, the name could be ''anything'': that includes malicious code that could be run on a victim's computer! You will learn more about this type of cyberattack, called '''Cross-Site Scripting''', in Module 4. For now, just know that whenever you display anything to the end user, you need to pass it through '''htmlentities()'''.

=== POST: Passing Variables via Form ===

Another method for passing variables from page to page is by sending it via POST variables. Like with GET, POST variables are saved in an associative array, this time named '''$_POST'''.

Consider the following form:

<source lang="html4strict">
<!DOCTYPE html>
<head><title>Hello World</title></head>
<body>
<form action="info.php" method="POST">
<p>
<label for="firstnameinput">First Name:</label>
<input type="text" name="firstname" id="firstnameinput" />
</p>
<p>
<label for="lastnameinput">Last Name:</label>
<input type="text" name="lastname" id="lastnameinput" />
</p>
<p>
<label for="birthyearinput">Birth Year:</label>
<input type="number" name="birthyear" id="birthyearinput" />
</p>
<p>
<strong>Gender:</strong>
<input type="radio" name="gender" value="male" id="maleinput" /> <label for="maleinput">Male</label>  
<input type="radio" name="gender" value="female" id="femaleinput" /> <label for="femaleinput">Female</label>
</p>
<p>
<input type="submit" value="Send" />
<input type="reset" />
</p>
</form>
</body>
</html>
</source>

For more information on the HTML markup in the above example, refer to [[HTML and CSS|the HTML and CSS guide]].

This submits a form with POST data to '''info.php'''. Inside '''info.php''', the provided values will be available in the associative $_POST array under the keys ''firstname'', ''lastname'', ''birthyear'', and ''gender''.

To display the submitted input on a target page, '''info.php''' could contain:

<source lang="php">
<!DOCTYPE html>
<head><title>Person Information</title></head>
<body>
<?php
$first = $_POST['firstname'];
$last = $_POST['lastname'];
$birthyear = (int) $_POST['birthyear'];
$gender = $_POST['gender'];
$age = 2012 - $birthyear;

printf("<p>Hello, %s %s! You were born in %d, so you are %d years old. You are %s.</p>\n",
htmlentities($first),
htmlentities($last),
$birthyear,
$age,
htmlentities($gender)
);
?>
</body>
</html>
</source>

'''Note:''' It is ''very'' important that you always sanitize strings that you output to the browser using '''htmlentities()''' or a similar function. If you don't, your site will be vulnerable to all sorts of malware. For more information, refer to the [[Web Application Security, Part 1|Web Application Security]] guide.

For further help with using HTML forms with PHP, we recommend [http://www.tizag.com/phpT/forms.php this tutorial].

=== Self-Submitting Forms ===

Oftentimes we don't want to pass form values to a different page, but rather to the same page as contains the form so that we can process the information and display output on that same page. To do this, you can simply omit the '''action''' parameter from the form. Alternatively, you can use a PHP environment variable like $_SERVER['PHP_SELF'].

The following example simply takes the data input from a form and, via POST variables, echoes it back to the user as bold text on the same page:

<source lang="php">
<!DOCTYPE html>
<html>
<head><title>Bold Printer</title></head>
<body>
<form action="<?php echo htmlentities($_SERVER['PHP_SELF']); ?>" method="POST">
<p>
<label for="name">Name:</label>
<input type="text" name="name" id="name" />
</p>
<p>
<input type="submit" value="Print in Bold" />
</p>
</form>

<?php
if(isset($_POST['name'])){
printf("<p><strong>%s</strong></p>\n",
htmlentities($_POST['name'])
);
}
?>
</body>
</html>
</source>

== Sessions ==

If you need to keep track of information associated with a user between page loads, you should use a ''session''. Sessions are excellent for keeping track of the currently-logged-in user, for example.

PHP makes session management dirt simple. Whenever you need to use session variables, simply call '''session_start()'''. Then, you may interact with the $_SESSION associative array, and PHP will take care of accessing and saving all session variables for you!

For example, the following page will display a number, and then double that number on each page reload:

<source lang="php">
<?php
session_start();

$oldnum = (int) @$_SESSION['inc_num'];
if($oldnum<1) $oldnum=1;
$newnum = $oldnum*2;

echo $newnum;
$_SESSION['inc_num'] = $newnum;
?>
</source>

Sessions also work across different pages, as long as they are on the same web server.

'''Tip:''' To log out a user, you can call '''session_destroy()''' after '''session_start()''' on the logout page.

== Other PHP Tips ==

=== Redirecting to a Different Page ===

If you want to redirect the user to a different page, you need to send a '''Location''' header. For example, a page containing only this code would redirect the user to the ''login.php'' file:

<source lang="php">
<?php
header("Location: login.php");
exit; // we call exit here so that the script will stop executing before the connection is broken
?>
</source>

It is often useful to perform redirects after you perform server-side operations.

'''Important:''' You should generally not leave a user sitting on a page that has POST data, because if they refresh the page, their POST data will be submitted again, causing your server to perform an action twice. Rather, you should perform the operation, and then redirect them to another page that does not contain POST data in the header.

=== Reading a File Line-by-Line ===

If you want to read a file line-by-line, open a file handler using '''fopen()''', use '''fgets()''' to read lines until you've reached the end, and then close the file using '''fclose()'''.

The following example reads '''file_with_lines.txt''' and outputs its content in an unordered list, where each list item is a line in the file:

<source lang="php">
<?php
$h = fopen("file_with_lines.txt", "r");

$linenum = 1;
echo "<ul>\n";
while( !feof($h) ){
printf("\t<li>Line %d: %s</li>\n",
$linenum++,
fgets($h)
);
}
echo "</ul>\n";

fclose($h);
?>
</source>

'''Note:''' Most files in Linux end with an empty line, so the very last iteration of the above loop will output an empty bullet point.

'''Note:''' The function '''fgets()''' reads the contents of a line ''in addition to the line feed at the end of the line''. If you want to compare a string to the line that was read by '''fgets()''', you need to pass the value returned by '''fgets()''' to a function like '''[http://php.net/trim trim()]'''.

'''Note:''' If you want to read an entire file, PHP provides the '''file_get_contents()''' function, which is basically a shortcut for '''fopen()''', '''fread()''', and '''fclose()'''. ('''fread()''' is similar to '''fgets()''', except it reads the entire file instead of just one line.)

=== Sending a File to the Browser ===

Another useful function to know is the '''readfile''' function. It takes a file on the webserver's file system and sends it to the web browser. A simple example is given below, but note that you'll probably need to specify addition header fields in order to have the web browser download the file correctly.

The following example loads a file associated with a certain username and displays it.

<source lang="php">
<?php
session_start();

$filename = $_GET['file'];

// We need to make sure that the filename is in a valid format; if it's not, display an error and leave the script.
// To perform the check, we will use a regular expression.
if( !preg_match('/^[\w_\.\-]+$/', $filename) ){
echo "Invalid filename";
exit;
}

// Get the username and make sure that it is alphanumeric with limited other characters.
// You shouldn't allow usernames with unusual characters anyway, but it's always best to perform a sanity check
// since we will be concatenating the string to load files from the filesystem.
$username = $_SESSION['username'];
if( !preg_match('/^[\w_\-]+$/', $username) ){
echo "Invalid username";
exit;
}

$full_path = sprintf("/srv/uploads/%s/%s", $username, $filename);

// Now we need to get the MIME type (e.g., image/jpeg). PHP provides a neat little interface to do this called finfo.
$finfo = new finfo(FILEINFO_MIME_TYPE);
$mime = $finfo->file($full_path);

// Finally, set the Content-Type header to the MIME type of the file, and display the file.
header("Content-Type: ".$mime);
header('content-disposition: inline; filename="'.$filename.'";');
readfile($full_path);

?>
</source>

=== Uploading a File ===

Uploading files is similar to submitting data in forms. For starters, you need a form that submits to your uploading script:

<source lang="html4strict">
<form enctype="multipart/form-data" action="uploader.php" method="POST">
<p>
<input type="hidden" name="MAX_FILE_SIZE" value="20000000" />
<label for="uploadfile_input">Choose a file to upload:</label> <input name="uploadedfile" type="file" id="uploadfile_input" />
</p>
<p>
<input type="submit" value="Upload File" />
</p>
</form>
</source>

Note that we need to specify <code>enctype="multipart/form-data"</code> on the form. This is to enable files to be uploaded and recognized by PHP.

PHP puts all files submitted with a form into the '''$_FILES''' superglobal array. Each entry in the $_FILES array contains the following information:

* '''$_FILES['uploadedfile']['name']''' is the original name of the file on the client's machine
* '''$_FILES['uploadedfile']['type']''' is the MIME type of the file according to the browser (don't take it for granted)
* '''$_FILES['uploadedfile']['size']''' is the size, in bytes, of the uploaded file
* '''$_FILES['uploadedfile']['tmp_name']''' is the temporary location on your filesystem where Apache saved the uploaded file
* '''$_FILES['uploadedfile']['error']''' is the error code associated with the file upload (if applicable)

To upload the file submitted by the form above in a user's special folder, we could use the following PHP code:

<source lang="php">
<?php
session_start();

// Get the filename and make sure it is valid
$filename = basename($_FILES['uploadedfile']['name']);
if( !preg_match('/^[\w_\.\-]+$/', $filename) ){
echo "Invalid filename";
exit;
}

// Get the username and make sure it is valid
$username = $_SESSION['username'];
if( !preg_match('/^[\w_\-]+$/', $username) ){
echo "Invalid username";
exit;
}

$full_path = sprintf("/srv/uploads/%s/%s", $username, $filename);

if( move_uploaded_file($_FILES['uploadedfile']['tmp_name'], $full_path) ){
header("Location: upload_success.html");
exit;
}else{
header("Location: upload_failure.html");
exit;
}

?>
</source>

'''Note:''' A lot of the code above is the same as the code in the file download example. In your project, you should save the logic of generating the file path (in a function) in a third file that you include into the upload and download scripts.

'''Note:''' By default, PHP will not allow a file upload of more than 2 MB. SitePoint has an excellent tutorial for how to increase this limit: http://www.sitepoint.com/upload-large-files-in-php/

== PEAR ==

The PHP Extension and Application Repository, or '''PEAR''', is a package manager that enables you to install classes and/or extensions to PHP. In other words, it is a yum/apt for PHP. You can think of PEAR as PHP's analog of ''gem'' in Ruby or ''pip'' in Python.

=== Configuration ===

PEAR is available through both the yum and apt repositories under the package name '''php-pear'''.

<source lang="bash">
$ sudo yum install php7-pear # in RHEL
</source>

=== Installing PHP Extensions ===

Using PEAR to install PHP extensions is just as easy as yum, apt, gem, and pip. Just run '''sudo pear install xxx'''.

<source lang="bash">
$ sudo pear install Archive_Tar
</source>

Go here for a list of available packages in PEAR: http://pear.php.net/packages.php

=== Using PHP Extensions ===

To make use an extension installed in PEAR, you must '''include''' or '''require''' it into the PHP file of interest. For example, if you wanted to use the Archive_Tar class from the above example in a PHP file, you would do:

<source lang="php">
<?php
require "Archive/Tar.php";

// your code here
?>
</source>

By convention, the filepath you need to specify is the name of the PEAR package with underscores replaced with slashes and a .php extension at the end. For example, the package ''Console_Getargs'' becomes <code>require "Console/Getargs.php";</code>

=== PECL ===

The PHP Extension Community Library, or '''PECL''', is a repository for additional PHP extensions, the difference being that PECL extensions are written in compiled C code rather than PHP.

PECL is installed automatically when you install PEAR from yum or apt-get.

Installing an extension using PECL is almost identical to PEAR, except that you use '''pecl''' instead of '''pear''' on the command prompt:

<source lang="bash">
$ sudo pecl install imagick
</source>

You do not need to '''require''' or '''include''' PECL extensions since they are already compiled into PHP.

== PHP Reference ==

If you ever have a question about PHP, first check the well-written documentation. To skip immediately to the documentation on any function, simply visit <nowiki>http://php.net/</nowiki>'''functionname'''. For example: http://php.net/var_dump

[[Category:Module 2]]

Amazon Web Services

2021-01-21T21:44:57Z

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

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

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

== Creating and Configuring your EC2 Instance ==

{{RequiredInstructions|content=

Follow these steps to get to the AWS Management Console:

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

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

# Choose the image labeled "Amazon Linux 2 AMI", and make sure you have x86 selected on the right (this should be the default). Please do not choose any other instance image (for example, do NOT choose the macOS images just because you have a Mac), as selecting the wrong image will cause problems later. For more information on distributions, refer to [[Linux#Linux Distributions|the Linux guide]].
# The default instance variables are all fine. Click Next until you get to the "Step 6: Configure Security group" screen.
# Make sure your security group includes a rule of type "SSH", protocol "TCP", port range "22", and source of "0.0.0.0/0" or "Anywhere". If it does not include an SSH rule, click the "Add Rule" button and set the rule accordingly. The security groups you create determine whether a port is open or blocked for your server.
#* It might be helpful to change the name for the security group to be more descriptive, such as "CSE330 Instance 1 Security Group" or similar.
# Click "Review and Launch", and then "Launch". Then, in the dialog box, create a new Key Pair. Enter some name for it, and then click "Create & Download your Key Pair". '''Save your key somewhere secure.''' In addition to using it to authenticate for this instance, you will be able to use the same key for additional instances. Please note that this is needed to connect to the instance as the root user, and there is no way to download this file again. It is vital you do not lose or delete this file.
# You are now ready to launch your virtual server! Click "Launch Instances".

}}

== Starting and Stopping your EC2 Instance ==

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

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

It is free to keep '''''one''''' micro instance running at all times. The AWS Free Tier includes 750 hours of Micro instance usage per month for a year; given that the longest month is 744 hours long, the Free Tier is enough to keep a single Micro instance running 24/7 for a year. Keeping your instance running around the clock will make your life easier, because then you won't need to always change your hostname in your SSH clients.

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

=== Terminate vs Stop ===

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

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

== Enabling Web Access to your EC2 Instance ==

{{RequiredInstructions|content=

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

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

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

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

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

NOTE:depending on the city in which your server is located, your link might look like:

http://ec2-xxx-xxx-xxx-xxx.us-west-2.compute.amazonaws.com/hello.txt

}}

[[Category:Module 2]]

Amazon Web Services

2021-01-14T20:29:53Z

Jasonren: /* Creating and Configuring your EC2 Instance */ Spelling

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

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

== Creating and Configuring your EC2 Instance ==

{{RequiredInstructions|content=

Follow these steps to get to the AWS Management Console:

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

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

# Choose the image labeled "Amazon Linux AMI 2", and make sure you have x86 selected on the right (this should be the default). Please do not choose any other instance image (for example, do NOT choose the macOS images just because you have a Mac), as selecting the wrong image will cause problems later. For more information on distributions, refer to [[Linux#Linux Distributions|the Linux guide]].
# The default instance variables are all fine. Click Next until you get to the "Step 6: Configure Security group" screen.
# Make sure your security group includes a rule of type "SSH", protocol "TCP", port range "22", and source of "0.0.0.0/0" or "Anywhere". If it does not include an SSH rule, click the "Add Rule" button and set the rule accordingly. The security groups you create determine whether a port is open or blocked for your server.
#* It might be helpful to change the name for the security group to be more descriptive, such as "CSE330 Instance 1 Security Group" or similar.
# Click "Review and Launch", and then "Launch". Then, in the dialog box, create a new Key Pair. Enter some name for it, and then click "Create & Download your Key Pair". '''Save your key somewhere secure.''' In addition to using it to authenticate for this instance, you will be able to use the same key for additional instances. Please note that this is needed to connect to the instance as the root user, and there is no way to download this file again. It is vital you do not lose or delete this file.
# You are now ready to launch your virtual server! Click "Launch Instances".

}}

== Starting and Stopping your EC2 Instance ==

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

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

It is free to keep '''''one''''' micro instance running at all times. The AWS Free Tier includes 750 hours of Micro instance usage per month for a year; given that the longest month is 744 hours long, the Free Tier is enough to keep a single Micro instance running 24/7 for a year. Keeping your instance running around the clock will make your life easier, because then you won't need to always change your hostname in your SSH clients.

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

=== Terminate vs Stop ===

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

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

== Enabling Web Access to your EC2 Instance ==

{{RequiredInstructions|content=

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

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

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

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

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

NOTE:depending on the city in which your server is located, your link might look like:

http://ec2-xxx-xxx-xxx-xxx.us-west-2.compute.amazonaws.com/hello.txt

}}

[[Category:Module 2]]

Apache

2021-01-14T15:40:19Z

Jasonren: /* Installing Apache */ Changed version of Apache to latest as per https://docs.aws.amazon.com/AWSEC2/latest/UserGuide/ec2-lamp-amazon-linux-2.html#prepare-lamp-server

''Apache'' is the industry standard web server for Linux distributions. It is highly configurable and has a wide range of modules ready for different needs.

{{XKCD
|name=permanence
|id=910
}}

== What is a web server? ==

A web server is software that listens for connections to your machine, and when a connection is receive, processes the request and responds with the appropriate information. Most web servers listen on port 80, which is reserved for the purpose, and use the HTTP protocol.

For example, when you visit this wiki, you are sending a request over the internet to some machine that is probably located somewhere in EIT (the user seldom knows exactly where the machine is located). The web server receives your request, and it processes the data you sent. Finally, the server prepares a response (the web page), and sends it back to you.

== Installing Apache ==

{{RequiredInstructions|content=

In yum, Apache is distributed under the package name '''httpd24''' (for ''hypertext transfer protocol daemon''). Use the package manager associated with your distribution to install Apache. (For more information on how to use yum, see [[Linux#Repository-Based Package Managers|the Linux guide]].)

For example:

<source lang="bash">
$ sudo yum update
$ sudo yum install httpd
</source>

You'll need to run this command to add Apache as a startup item:

<source lang="bash">
$ sudo /sbin/chkconfig --levels 235 httpd on
</source>

In RHEL, most Apache configurations are stored in ''/etc/httpd/conf/httpd.conf'' and others are located in the directory ''/etc/httpd/conf.d/''.

}}

== Apache Directives ==

You define your settings for Apache using ''directives''. Some of the directives you will likely encounter include:

* '''DocumentRoot:''' The path to the directory where the top level web files are going to be stored.
* '''IfModule:''' The following block would be included if specified module exists.
* '''User:''' Which user apache2 will run as.
* '''Group:''' Which group will have group access to default web files.
* '''AccessFileName:''' The name of the access file (that specifies user names/passwords and other limitations to files/directories).
* '''ErrorLog:''' Where any errors will be written.
* '''Include:''' Include some other files.
* '''LogFormat:''' How to write a log message.
* '''ErrorDocument:''' Files to display for some HTTP errors (500, 404, 402 etc.).
* '''Alias:''' Map a directory URL to some other location on your filesystem. Requires that the ''Alias'' module be loaded.

=== .htaccess Files ===

You can also specify some Apache configurations without delving into the master configuration file. To do this, put a file named ''.htaccess'' in any directory that Apache is serving. All directives in it will be interpreted as if they were in a Directory directive in the master configuration file.

'''VERY IMPORTANT:''' The directory containing ''.htaccess'' must not have the '''AllowOverride None''' directive in the master configuration file in order for '''.htaccess''' to be read.
=== Directory Directive ===

Use the Directory directive to assign other directives to a specific directory. For example:

<source lang="apache">
<Directory /var/www/>
Options Indexes FollowSymLinks
AllowOverride None
Order allow,deny
allow from all
RedirectMatch ^/$ /apache2-default/
</Directory>
</source>

This sets options for the ''/var/www'' directory.
# The '''Options''' directive says that:
## If no index page is present in a directory, display a directory index page instead
## Apache will follow symbolic links in the directory
# '''AllowOverride None''' says that ''.htaccess'' files cannot alter the Apache options in this directory and all sub-directories
# '''Order allow,deny''' and '''Allow from all''' specifies that anybody is allowed to access this server via HTTP.

Note that this directory is actually the root directory of the web server.

== The UserDir Module ==

{{RequiredInstructions|content=

The UserDir module lets you access files for any user on the server with a ~, e.g., http://ec2-xxx-xxx-xxx-xx.compute-1.amazonaws.com/~paul/

This module comes installed, but not activated by default.

=== Enabling UserDir in RHEL ===

If you are using an RHEL-based distribution for your server (like the Amazon AMI), you need to edit the master Apache configuration file.

Open ''/etc/httpd/conf.d/userdir.conf'' in your favorite text editor. For more information on command-line text editors, refer to [[Linux#File Editors|the Linux guide]].

Find the line that says

<source lang="apache">UserDir disabled</source>

and change it to

<source lang="apache">UserDir disabled root</source>

Additionally, find the line that says

<source lang="apache">#UserDir public_html</source>

and uncomment it; that is, remove the # so that you have

<source lang="apache">UserDir public_html</source>

This tells Apache that the directory containing each user's html files is a subdirectory of their home directory called public_html.

'''Note:''' Users need to manually create public_html. It is not created automatically.

You may also need to change the permissions of your user directory and your public_html directory to allow Apache to read and execute inside them. To do this, run the following commands:

<source lang="bash">
$ sudo chmod o+x /home/myusername
$ sudo chmod o+rx /home/myusername/public_html
$
</source>

Finally, [[#Restarting Apache and Testing|restart Apache]].

}}

=== Remapping UserDir ===

If you want to change the name of the UserDir web server root from '''public_html''' to something else like '''.html''', follow these instructions. (You do not need to do this for the purposes of CSE 330; this serves as a reference.)

# Rename your '''public_html''' to '''.html'''
#* The "." in front of the directory name means that the directory is a hidden one. You will not see it with the normal "ls" command. Use "ls -a" to see hidden files as well.
# Edit the UserDir configuration file.
#* In RHEL, edit the userDir configuration file at ''/etc/httpd/conf.d/userdir.conf''
# Find the line that reads <code>UserDir public_html</code> and change it to <code>UserDir .html/</code>
# [[#Restarting Apache and Testing|Restart Apache]].

== Apache Logs ==

Apache creates two log files: one for all access attempts to your server, and one for errors. The locations of these log files are:

* '''Access Log:''' /var/log/httpd/access_log
* '''Error Log:''' /var/log/httpd/error_log

You might find it helpful to see access and errors appear "live" in your terminal window as they are created. To do this, you can use the [[Linux#Command Reference|tail -f]] command. Since the log files have strict permissions, you will need to also use sudo. Example:

<source lang="bash">
$ sudo tail -f /var/log/httpd/access_log
</source>

== Virtual Hosts ==

'''Virtual Hosts''' are used to run multiple Apache web servers from the same machine. Virtual hosts can listen for connections on different ports and/or different hostnames, serving completely different web sites to each. For example:

<source lang="apache">
<VirtualHost cse330.dyndns.org>
ServerAdmin webmaster@localhost
ServerName cse330.dyndns.org
DocumentRoot /home/www/cse330/
ErrorLog /var/log/httpd/error_log
LogLevel warn
CustomLog /var/log/apache2/access_log combined
ServerSignature On
</VirtualHost>
</source>

This configuration enables any requests that use a host name of ''cse330.dyndns.org'' will use ''/home/www/cse330'' as the root document directory. Make sure that the DocumentRoot directory exists and is readable by the httpd process. In RHEL, Apache runs as the '''apache''' user.

It is good practice to put raw server configuration files in ''/etc/httpd/sites-available''. To activate a site, create a symlink from the configuration in ''sites-available'' to a sibling directory called ''sites-enabled''.

== Restarting Apache and Testing ==

Whenever you make changes to the Apache configuration files, you will need to restart Apache for the changes to take effect. There are several different ways to restart Apache; they all functionally do (almost) the same thing, so choose your favorite:

<source lang="bash">
$ sudo /usr/sbin/apachectl restart
$ sudo apachectl restart # if /usr/sbin is in your PATH (which it is *not* by default in RHEL)
$ sudo /etc/init.d/httpd restart
$ sudo /sbin/service httpd restart
$ sudo service httpd restart
</source>

If you're torn for which version is the "best" to use, the commands involving '''apachectl''' (think "Apache Control") are written by the Apache folks themselves. This has a couple advantages:
* They show you errors in the startup process (if there are any)
* They give you the option to perform a "soft" restart; that is, a restart that allows any pending connections to complete. To perform a soft restart, use ''graceful'': <code>sudo apachectl graceful</code>
In my anecdotal experience, the '''apachectl''' commands are also faster than the '''service''' or '''init.d''' commands.

To make sure everything is working, create a test file in your home directory under public_html, and then point your browser to it: http://ec2-xxx-xx-xx-xxx.compute-1.amazonaws.com/~yourUserName/hello.txt

[[Category:Module 2]]

Amazon Web Services

2021-01-14T15:27:34Z

Jasonren: Updated the instructions for creating an instance (changed to Linux AMI 2 and otherwise modernized it), and added more information about the Free Tier to address some common Piazza questions. Sorry about all the noise on this page; hitting enter submits

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

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

== Creating and Configuring your EC2 Instance ==

{{RequiredInstructions|content=

Follow these steps to get to the AWS Management Console:

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

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

# Choose the instance labeled "Amazon Linux AMI 2", and make sure you have x86 selected on the right (this should be the default). Please do not choose any other instance image (for example, do NOT choose the macOS images just because you have a Mac), as selection the wrong image will cause problems later. For more information on distributions, refer to [[Linux#Linux Distributions|the Linux guide]].
# The default instance variables are all fine. Click Next until you get to the "Step 6: Configure Security group" screen.
# Make sure your security group includes a rule of type "SSH", protocol "TCP", port range "22", and source of "0.0.0.0/0" or "Anywhere". If it does not include an SSH rule, click the "Add Rule" button and set the rule accordingly. The security groups you create determine whether a port is open or blocked for your server.
#* It might be helpful to change the name for the security group to be more descriptive, such as "CSE330 Instance 1 Security Group" or similar.
# Click "Review and Launch", and then "Launch". Then, in the dialog box, create a new Key Pair. Enter some name for it, and then click "Create & Download your Key Pair". '''Save your key somewhere secure.''' In addition to using it to authenticate for this instance, you will be able to use the same key for additional instances. Please note that this is needed to connect to the instance as the root user, and there is no way to download this file again. It is vital you do not lose or delete this file.
# You are now ready to launch your virtual server! Click "Launch Instances".

}}

== Starting and Stopping your EC2 Instance ==

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

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

It is free to keep '''''one''''' micro instance running at all times. The AWS Free Tier includes 750 hours of Micro instance usage per month for a year; given that the longest month is 744 hours long, the Free Tier is enough to keep a single Micro instance running 24/7 for a year. Keeping your instance running around the clock will make your life easier, because then you won't need to always change your hostname in your SSH clients.

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

=== Terminate vs Stop ===

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

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

== Enabling Web Access to your EC2 Instance ==

{{RequiredInstructions|content=

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

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

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

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

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

NOTE:depending on the city in which your server is located, your link might look like:

http://ec2-xxx-xxx-xxx-xxx.us-west-2.compute.amazonaws.com/hello.txt

}}

[[Category:Module 2]]

Amazon Web Services

2021-01-14T15:03:29Z

Jasonren: Reverted edits by Jasonren (talk) to last revision by Connor

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

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

== Creating and Configuring your EC2 Instance ==

{{RequiredInstructions|content=

Follow these steps to get to the AWS Management Console:

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

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

# Use the Classic Wizard.
# Please... Just please choose distribution of Linux labeled "Amazon Linux AMI". Make sure to double check before selecting, as is the second option and selecting another distribution will cause problems later. For more information on distributions, refer to [[Linux#Linux Distributions|the Linux guide]].
[[File:Correct_instance_type.png|600px|center]]
# The default instance variables are all fine. Click Continue until you get to the "Create Key Pair" screen.
# Create a new Key Pair. Enter some name for it, and then click "Create & Download your Key Pair". '''Save your key somewhere secure.''' In addition to using it to authenticate for this instance, you will be able to use the same key for additional instances.
# Create a new Security Group and connect it to your server. The security groups you create determine whether a port is open or blocked for your server.
#* You need to open the SSH port on your server. To do this, select "SSH" from the drop-down box, and then click "Add Rule."
#: We will be opening more ports by modifying the security group at a later time. Click Continue.
# You are now ready to launch your virtual server! Click Launch.

}}

== Starting and Stopping your EC2 Instance ==

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

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

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

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

=== Terminate vs Stop ===

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

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

== Enabling Web Access to your EC2 Instance ==

{{RequiredInstructions|content=

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

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

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

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

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

NOTE:depending on the city in which your server is located, your link might look like:

http://ec2-xxx-xxx-xxx-xxx.us-west-2.compute.amazonaws.com/hello.txt

}}

[[Category:Module 2]]

Amazon Web Services

2021-01-14T15:03:16Z

Jasonren: Updated the instructions for creating an instance.Added additional information about the free tier, as these questions tend to pop up on Piazza.

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

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

== Creating and Configuring your EC2 Instance ==

{{RequiredInstructions|content=

Follow these steps to get to the AWS Management Console:

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

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

# Choose For more information on distributions, refer to [[Linux#Linux Distributions|the Linux guide]].
[[File:Correct_instance_type.png|600px|center]]
# The default instance variables are all fine. Click Continue until you get to the "Create Key Pair" screen.
# Create a new Key Pair. Enter some name for it, and then click "Create & Download your Key Pair". '''Save your key somewhere secure.''' In addition to using it to authenticate for this instance, you will be able to use the same key for additional instances.
# Create a new Security Group and connect it to your server. The security groups you create determine whether a port is open or blocked for your server.
#* You need to open the SSH port on your server. To do this, select "SSH" from the drop-down box, and then click "Add Rule."
#: We will be opening more ports by modifying the security group at a later time. Click Continue.
# You are now ready to launch your virtual server! Click Launch.

}}

== Starting and Stopping your EC2 Instance ==

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

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

It is free to keep '''''one''''' micro instance running at all times. The AWS Free Tier includes 750 hours of Micro instance usage per month for a year; given that the longest month is 744 hours long, the Free Tier is enough to keep a single Micro instance running 24/7 for a year. Keeping your instance running around the clock will make your life easier, because then you won't need to always change your hostname in your SSH clients.

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

=== Terminate vs Stop ===

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

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

== Enabling Web Access to your EC2 Instance ==

{{RequiredInstructions|content=

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

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

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

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

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

NOTE:depending on the city in which your server is located, your link might look like:

http://ec2-xxx-xxx-xxx-xxx.us-west-2.compute.amazonaws.com/hello.txt

}}

[[Category:Module 2]]

Module 4

2021-01-14T14:57:03Z

Jasonren: /* 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]]
* [[FAQ - Mod 4]]

== 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 substring "hello world" in a string.
# Find all words in an input string that contains three consecutive vowels, regardless of case.
# 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. Please note that each line is a '''separate''' test input string. For Regex 3, '''six''' separate test cases are given.
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 text files – one each.

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

Upload your baseball code and a file with your Regular expressions.

# '''Regular Expressions (15 Points):'''
#* '''Your regex files should contain your regex (with no delimiters or flags) and nothing else.'''
#* Regular Expression 1 Correct and saved in a file named <code>regex1.txt</code> (5 points)
#* Regular Expression 2 Correct and saved in a file named <code>regex2.txt</code>(5 points)
#* Regular Expression 3 Correct and saved in a file named <code>regex3.txt</code>(5 points)
# '''Baseball Stats Counter (35 Points):'''
#* Solution is written entirely in Python and saved in a file named <code>baseball.py</code> (8 points)
#*: ''Note: Failing to write your code in Python 3 will result in losing, at a minimum, points for this category.''
#* Correct usage of one or more regular expressions to parse and extract data from each line of the input file (8 points)
#*: ''Note: You should not be using <code>str.split</code> to extract data.''
#* Script prints a usage message if a command line argument is not present (4 points)
#*: ''Note: For an example of a usage message, see [https://en.wikipedia.org/wiki/Usage_message#Examples this link.]''
#* Output is correct for all test cases (15 points)
#*: ''This includes sorting and rounding.''

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

Socket.IO

2020-11-11T20:06:09Z

Jasonren: /* The Chat Server */

AJAX is useful when one-way communication is satisfactory for your web application. However, what happens when you need two-way communication, like a chat client or multiplayer game? AJAX isn't the tool for the job. This is where '''Socket.IO''' comes in.

Built to work natively with Node.JS, Socket.IO enables asynchronous, two-way communication between the server and the client. This means that the server can send messages to the client without the client having to ask first, as is the case with AJAX. As you learn Socket.IO, Non-Blocking I/O will become your best friend!

== Installing Socket.IO ==

Before you install Socket.IO, you need to install [[Node.JS]] and NPM, which is often installed automatically when you install Node.JS.

The NPM package manager is different from many of the package managers we've used in that you need to install remote packages for every project in which you use them. This means that you need to '''cd''' to the working directory in which you want to keep your Node.JS JavaScript file, ''and then'' run the following command:

<source lang="bash">
$ npm install socket.io --save
</source>

'''Note:''' If you pass the ''-g'' to ''npm install'', then the package will be installed "globally" on your instance, so all Node.JS projects will be able to use it. However, this is not recommended for all projects. [http://blog.nodejs.org/2011/04/06/npm-1-0-link/ Read Node.JS's justification here.]

== Messaging ==

Socket.IO works by having clients send messages to the server and the server send messages to clients. For example, consider the code:

<source lang="javascript">
// Computer A:
socket.emit("info", {
"hello": "world"
});

// Computer B:
socket.on("info", function (data) {
console.log(data.hello);
});
</source>

Computer A could be ''either the client or the server'', and Computer B would be the other. When '''socket.emit(name, data)''' is called on either end, the callback function in '''socket.on''' that listens for the message named ''name'' is called with the ''data'' from '''socket.emit'''.

== A First Socket.IO Application: Chat Server and Client ==

Building a chat client is surprising simple using Socket.IO and Node.JS, and it gives great insight into the workings of Socket.IO. Take the time to understand how this example works, and ask questions; if you understand this, the group portion will be easy!

=== The Chat Server ===

You can make a file called ''chat-server.js'' with the following code:

<source lang="javascript">
// Require the packages we will use:
const http = require("http"),
fs = require("fs");

const port = 3456;
const file = "client.html";
// Listen for HTTP connections. This is essentially a miniature static file server that only serves our one file, client.html, on port 3456:
const server = http.createServer(function (req, res) {
// This callback runs when a new connection is made to our HTTP server.

fs.readFile(file, function (err, data) {
// This callback runs when the client.html file has been read from the filesystem.

if (err) return res.writeHead(500);
res.writeHead(200);
res.end(data);
});
});
server.listen(port);

// Import Socket.IO and pass our HTTP server object to it.
const socketio = require("socket.io")(server, {
wsEngine: 'ws'
});

// Attach our Socket.IO server to our HTTP server to listen
const io = socketio.listen(server);
io.sockets.on("connection", function (socket) {
// This callback runs when a new Socket.IO connection is established.

socket.on('message_to_server', function (data) {
// This callback runs when the server receives a new message from the client.

console.log("message: " + data["message"]); // log it to the Node.JS output
io.sockets.emit("message_to_client", { message: data["message"] }) // broadcast the message to other users
});
});

</source>

The above code makes a simple HTTP server that responds to all connections with the contents of the file "client.html", which we will make in the next step. We tell Socket.IO to listen for "message" events, and when it hears one, it should emit a new event called "someone said" back to the connected clients.

=== The Chat Client ===

Here is a front-end client that could work with our server, in ''client.html'':

<source lang="html4strict">

<!DOCTYPE html>
<html>
<head>
<script src="/socket.io/socket.io.js"></script>
<script type ="text/javascript">

var socketio = io.connect();
socketio.on("message_to_client",function(data) {
//Append an HR thematic break and the escaped HTML of the new message
document.getElementById("chatlog").appendChild(document.createElement("hr"));
document.getElementById("chatlog").appendChild(document.createTextNode(data['message']));
});

function sendMessage(){
var msg = document.getElementById("message_input").value;
socketio.emit("message_to_server", {message:msg});
}

</script>
</head>
<body>
<input type=text" id="message_input"/>
<button onclick="sendMessage()">send</button>
<div id="chatlog"></div>
</body>
</html>

</source>

'''Note:''' This example passes strings as the event data, but you can pass any JavaScript datatype, including object literals.

To see this in action, save these two files in the same directory, cd over to the directory, and start the server:

<source lang="bash">$ node chat-server.js</source>

Fire up your favorite browser and navigate to http://localhost:3456/. Open the page in two windows. Violà: you have your (very basic) chat client!

== Resources ==

The [http://socket.io/ Socket.IO web site] has concise examples that tell you pretty much all you need to know in order to build a functional Socket.IO web application.

[[Category:Module 7]]

Socket.IO

2020-11-08T23:12:35Z

Jasonren: /* The Chat Server */

AJAX is useful when one-way communication is satisfactory for your web application. However, what happens when you need two-way communication, like a chat client or multiplayer game? AJAX isn't the tool for the job. This is where '''Socket.IO''' comes in.

Built to work natively with Node.JS, Socket.IO enables asynchronous, two-way communication between the server and the client. This means that the server can send messages to the client without the client having to ask first, as is the case with AJAX. As you learn Socket.IO, Non-Blocking I/O will become your best friend!

== Installing Socket.IO ==

Before you install Socket.IO, you need to install [[Node.JS]] and NPM, which is often installed automatically when you install Node.JS.

The NPM package manager is different from many of the package managers we've used in that you need to install remote packages for every project in which you use them. This means that you need to '''cd''' to the working directory in which you want to keep your Node.JS JavaScript file, ''and then'' run the following command:

<source lang="bash">
$ npm install socket.io --save
</source>

'''Note:''' If you pass the ''-g'' to ''npm install'', then the package will be installed "globally" on your instance, so all Node.JS projects will be able to use it. However, this is not recommended for all projects. [http://blog.nodejs.org/2011/04/06/npm-1-0-link/ Read Node.JS's justification here.]

== Messaging ==

Socket.IO works by having clients send messages to the server and the server send messages to clients. For example, consider the code:

<source lang="javascript">
// Computer A:
socket.emit("info", {
"hello": "world"
});

// Computer B:
socket.on("info", function (data) {
console.log(data.hello);
});
</source>

Computer A could be ''either the client or the server'', and Computer B would be the other. When '''socket.emit(name, data)''' is called on either end, the callback function in '''socket.on''' that listens for the message named ''name'' is called with the ''data'' from '''socket.emit'''.

== A First Socket.IO Application: Chat Server and Client ==

Building a chat client is surprising simple using Socket.IO and Node.JS, and it gives great insight into the workings of Socket.IO. Take the time to understand how this example works, and ask questions; if you understand this, the group portion will be easy!

=== The Chat Server ===

You can make a file called ''chat-server.js'' with the following code:

<source lang="javascript">
// Require the packages we will use:
const http = require("http"),
fs = require("fs");

const port = 3456;
const file = "client.html";
// Listen for HTTP connections. This is essentially a miniature static file server that only serves our one file, client.html, on port 3456:
const server = http.createServer(function (req, res) {
// This callback runs when a new connection is made to our HTTP server.

fs.readFile(file, function (err, data) {
// This callback runs when the client.html file has been read from the filesystem.

if (err) return res.writeHead(500);
res.writeHead(200);
res.end(data);
});
});
server.listen(port);

// Import Socket.IO and pass our HTTP server object to it.
const socketio = require("socket.io")(server);

// Attach our Socket.IO server to our HTTP server to listen
const io = socketio.listen(server);
io.sockets.on("connection", function (socket) {
// This callback runs when a new Socket.IO connection is established.

socket.on('message_to_server', function (data) {
// This callback runs when the server receives a new message from the client.

console.log("message: " + data["message"]); // log it to the Node.JS output
io.sockets.emit("message_to_client", { message: data["message"] }) // broadcast the message to other users
});
});

</source>

The above code makes a simple HTTP server that responds to all connections with the contents of the file "client.html", which we will make in the next step. We tell Socket.IO to listen for "message" events, and when it hears one, it should emit a new event called "someone said" back to the connected clients.

=== The Chat Client ===

Here is a front-end client that could work with our server, in ''client.html'':

<source lang="html4strict">

<!DOCTYPE html>
<html>
<head>
<script src="/socket.io/socket.io.js"></script>
<script type ="text/javascript">

var socketio = io.connect();
socketio.on("message_to_client",function(data) {
//Append an HR thematic break and the escaped HTML of the new message
document.getElementById("chatlog").appendChild(document.createElement("hr"));
document.getElementById("chatlog").appendChild(document.createTextNode(data['message']));
});

function sendMessage(){
var msg = document.getElementById("message_input").value;
socketio.emit("message_to_server", {message:msg});
}

</script>
</head>
<body>
<input type=text" id="message_input"/>
<button onclick="sendMessage()">send</button>
<div id="chatlog"></div>
</body>
</html>

</source>

'''Note:''' This example passes strings as the event data, but you can pass any JavaScript datatype, including object literals.

To see this in action, save these two files in the same directory, cd over to the directory, and start the server:

<source lang="bash">$ node chat-server.js</source>

Fire up your favorite browser and navigate to http://localhost:3456/. Open the page in two windows. Violà: you have your (very basic) chat client!

== Resources ==

The [http://socket.io/ Socket.IO web site] has concise examples that tell you pretty much all you need to know in order to build a functional Socket.IO web application.

[[Category:Module 7]]

Socket.IO

2020-11-08T18:25:02Z

Jasonren: /* The Chat Server */

AJAX is useful when one-way communication is satisfactory for your web application. However, what happens when you need two-way communication, like a chat client or multiplayer game? AJAX isn't the tool for the job. This is where '''Socket.IO''' comes in.

Built to work natively with Node.JS, Socket.IO enables asynchronous, two-way communication between the server and the client. This means that the server can send messages to the client without the client having to ask first, as is the case with AJAX. As you learn Socket.IO, Non-Blocking I/O will become your best friend!

== Installing Socket.IO ==

Before you install Socket.IO, you need to install [[Node.JS]] and NPM, which is often installed automatically when you install Node.JS.

The NPM package manager is different from many of the package managers we've used in that you need to install remote packages for every project in which you use them. This means that you need to '''cd''' to the working directory in which you want to keep your Node.JS JavaScript file, ''and then'' run the following command:

<source lang="bash">
$ npm install socket.io --save
</source>

'''Note:''' If you pass the ''-g'' to ''npm install'', then the package will be installed "globally" on your instance, so all Node.JS projects will be able to use it. However, this is not recommended for all projects. [http://blog.nodejs.org/2011/04/06/npm-1-0-link/ Read Node.JS's justification here.]

== Messaging ==

Socket.IO works by having clients send messages to the server and the server send messages to clients. For example, consider the code:

<source lang="javascript">
// Computer A:
socket.emit("info", {
"hello": "world"
});

// Computer B:
socket.on("info", function (data) {
console.log(data.hello);
});
</source>

Computer A could be ''either the client or the server'', and Computer B would be the other. When '''socket.emit(name, data)''' is called on either end, the callback function in '''socket.on''' that listens for the message named ''name'' is called with the ''data'' from '''socket.emit'''.

== A First Socket.IO Application: Chat Server and Client ==

Building a chat client is surprising simple using Socket.IO and Node.JS, and it gives great insight into the workings of Socket.IO. Take the time to understand how this example works, and ask questions; if you understand this, the group portion will be easy!

=== The Chat Server ===

You can make a file called ''chat-server.js'' with the following code:

<source lang="javascript">
// Require the packages we will use:
const http = require("http"),
fs = require("fs");

const port = 3456;
const file = "client.html";
// Listen for HTTP connections. This is essentially a miniature static file server that only serves our one file, client.html, on port 3456:
const server = http.createServer(function (req, res) {
// This callback runs when a new connection is made to our HTTP server.

fs.readFile(file, function (err, data) {
// This callback runs when the client.html file has been read from the filesystem.

if (err) return resp.writeHead(500);
res.writeHead(200);
res.end(data);
});
});
server.listen(port);

// Import Socket.IO and pass our HTTP server object to it.
const socketio = require("socket.io")(server);

// Attach our Socket.IO server to our HTTP server to listen
const io = socketio.listen(server);
io.sockets.on("connection", function (socket) {
// This callback runs when a new Socket.IO connection is established.

socket.on('message_to_server', function (data) {
// This callback runs when the server receives a new message from the client.

console.log("message: " + data["message"]); // log it to the Node.JS output
io.sockets.emit("message_to_client", { message: data["message"] }) // broadcast the message to other users
});
});

</source>

The above code makes a simple HTTP server that responds to all connections with the contents of the file "client.html", which we will make in the next step. We tell Socket.IO to listen for "message" events, and when it hears one, it should emit a new event called "someone said" back to the connected clients.

=== The Chat Client ===

Here is a front-end client that could work with our server, in ''client.html'':

<source lang="html4strict">

<!DOCTYPE html>
<html>
<head>
<script src="/socket.io/socket.io.js"></script>
<script type ="text/javascript">

var socketio = io.connect();
socketio.on("message_to_client",function(data) {
//Append an HR thematic break and the escaped HTML of the new message
document.getElementById("chatlog").appendChild(document.createElement("hr"));
document.getElementById("chatlog").appendChild(document.createTextNode(data['message']));
});

function sendMessage(){
var msg = document.getElementById("message_input").value;
socketio.emit("message_to_server", {message:msg});
}

</script>
</head>
<body>
<input type=text" id="message_input"/>
<button onclick="sendMessage()">send</button>
<div id="chatlog"></div>
</body>
</html>

</source>

'''Note:''' This example passes strings as the event data, but you can pass any JavaScript datatype, including object literals.

To see this in action, save these two files in the same directory, cd over to the directory, and start the server:

<source lang="bash">$ node chat-server.js</source>

Fire up your favorite browser and navigate to http://localhost:3456/. Open the page in two windows. Violà: you have your (very basic) chat client!

== Resources ==

The [http://socket.io/ Socket.IO web site] has concise examples that tell you pretty much all you need to know in order to build a functional Socket.IO web application.

[[Category:Module 7]]

VS Code

2020-09-18T20:08:55Z

Jasonren: /* DISCLAIMER */

== Getting Started With Each Module ==

* Create Github repo using the CSE 330 repo creator (Check Piazza for the link)
* Navigate to the created repo in Github
* 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 Github repository! I highly recommend creating your Github 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 . You can check if you have Git running by typing git --version in your terminal'''

* 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 Github repo.
* To commit, simply type a message in the box and click the check mark above it. To push to your Github 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 ==
=== DISCLAIMER ===
{{RequiredInstructions|content=

<span style="color:red">The following instructions rely on a third-party VSCode plug-in that is not actively maintained. As of 9/18/2020, the last commit in that repository is over a year ago. '''Use at your own risk!''' There are several reports that this plug-in has issues with private key authentication on versions of VSCode later than 1.35.</span>

}}

=== 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.json file 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 would like to avoid having to frequently upload your changes to your instance in order to test your changes, you can optionally set up a local PHP server.

'''To run PHP locally'''

'''Windows'''
# Download WAMP http://www.wampserver.com/en/download-wampserver-64bits/
# Place your project repositories in Wamp's www/ directory, and navigate to http://localhost in your browser. You should see your projects listed here, run php files, and use phpmyadmin.

'''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'''
# In VS Code, search for the extension '''Php Server'''. After installing, use VS Code's command pallette with CMD+Shift+P , search for PHP, and select start server. You should be able to view your project in your localhost

VS Code

2020-09-18T20:08:27Z

Jasonren: /* DISCLAIMER */

== Getting Started With Each Module ==

* Create Github repo using the CSE 330 repo creator (Check Piazza for the link)
* Navigate to the created repo in Github
* 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 Github repository! I highly recommend creating your Github 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 . You can check if you have Git running by typing git --version in your terminal'''

* 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 Github repo.
* To commit, simply type a message in the box and click the check mark above it. To push to your Github 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 ==
=== DISCLAIMER ===
{{RequiredInstructions|content=

<span style="color:red">The following instructions rely on a third-party VSCode plug-in that is not actively maintained. As of 9/18/2020, the last commit in that repository is over a year ago. '''Use at your own risk!''' There are several reports that this plug-in no longer works on versions of VSCode later than 1.35.</span>

}}

=== 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.json file 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 would like to avoid having to frequently upload your changes to your instance in order to test your changes, you can optionally set up a local PHP server.

'''To run PHP locally'''

'''Windows'''
# Download WAMP http://www.wampserver.com/en/download-wampserver-64bits/
# Place your project repositories in Wamp's www/ directory, and navigate to http://localhost in your browser. You should see your projects listed here, run php files, and use phpmyadmin.

'''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'''
# In VS Code, search for the extension '''Php Server'''. After installing, use VS Code's command pallette with CMD+Shift+P , search for PHP, and select start server. You should be able to view your project in your localhost

Module 2

2020-09-18T19:58:28Z

Jasonren: /* 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'''
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 [[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 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

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

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

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

_____________

# '''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.
# '''Git Tutorial (20 Points):'''
#* Place the two screenshots displaying the completed levels of the Main and Remote sections in your Individual repo
# '''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

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

Workflow

2020-09-18T19:54:21Z

Jasonren: /* Github */

The few minutes it takes to optimize your workflow will be the best few minutes you will spend in CSE 330 and your career. It is remarkable how many hours you can save just by using the best interface for text editing and deployment.

== Overview ==

There are going to be several aspects to our workflow in CSE 330, and we will be switching between multiple different programs. Here is how they all fit together.

=== Running Commands ===

''Mac OS X:'' You will be running commands on your local machine using '''Terminal''', which you can find in your Applications -> Utilities folder. You will be connecting to your server via SSH.

''Windows:'' You will be running commands on your local machine using '''WSL''' or '''Cygwin''', which you will install in the next section. You will be connecting to your server via SSH.

=== Version Control ===

You will be using '''Git''' as your version control system. Git enables you to keep track of changes to your source code. If you're using VS Code, the Git integration makes is very user friendly.

=== Text Editing ===

Although we highly recommend '''VS Code''', you may use '''Sublime Text''', '''Komodo Edit''', '''Notepad++''' (for Windows), and '''TextWrangler''' (for Mac). You can also use an IDE, like '''PHPStorm''', if you prefer.

=== File Transfer ===

In order to deploy your projects to your EC2 instance, you need some sort of method to transfer files from your local machine to your instance using SFTP. One option is using '''FileZilla''', an FTP client, to transport files from your local computer to your server.

=== Flowchart ===

If you are more visual, this flowchart might help:

[[File:CSE-330-Workflow.png]]

The flowchart illustrates 3 methods to copy files to your cloud instance: via your text editor, via an external SFTP client, and by cloning your remote Git repository. We will be primarily using '''Option 2''' in CSE 330 this semester.

In the flowchart, your ''Git Client'' is SourceTree and your ''Text Editor'' is Komodo. The ''SFTP Client'' could be FileZilla.

== Installing a Terminal Emulator ==
{{RequiredInstructions|content=

Windows is based on a fundamentally different architecture than Linux, meaning that, if you want to run Linux programs on Windows, you'll have to enable or install a special terminal emulator for it. Mac users do not need to install a terminal emulator since MacOs itself is a derivative of Unix, which is an ancestor of Linux. The Terminal utility is all you need.

=== Windows Subsystem for Linux ===

Starting in Windows 10, Windows has the ability to emulate Linux, meaning that you can run Linux commands on Windows, without having to install Cygwin. To enable WSL, follow [https://msdn.microsoft.com/en-us/commandline/wsl/install_guide these instructions]. Once those instructions are complete, you can open a shell by clicking on the Start menu, typing "Bash", then clicking on the entry labeled "Bash on Ubuntu on Windows".

=== Cygwin ===

'''Cygwin''' is a Linux Terminal emulator for Windows.

==== Installation ====

The CEC lab machines already have Cygwin installed. Follow these instructions to get Cygwin up and running on your personal PC.

# Run ''setup.exe'' from http://www.cygwin.com/
# Keep the Cygwin directory as the default, ''C:\cygwin''. Choose a place like ''C:\cygwin\downloads'' to download the installation files. Choose any download site, although probably one with a .com suffix is best when you're in the US.
# In the "Select Packages" screen, select the following packages:
#* Net -> openssh
#* Net -> openssl
#* Python -> python3 (you will need this for Module 4)
#* Devel -> git (version control system)
#* One or more of the following:
#** Editors -> vim
#** Editors -> emacs
#** Editors -> nano
# Allow the installation to complete.

Throughout the rest of this course, when we say to "open a terminal", if you are on Windows, we mean to "open WSL/Cygwin".

}}

== Github ==

{{RequiredInstructions|content=

'''Github''' is a service that enables you to store your code for free in the cloud.

=== Creating a Github Account ===

Go to [https://github.org/ Github.org] to create an account.

'''Important:''' Use your @wustl.edu e-mail address to create your account. This will put your account on the "educational plan", which removes some limitations of the free account.

=== Adding Your Key to Github ===
'''Not uploading your key is perfectly fine, and in many cases easier. Here are the instructions though, if you'd like'''

# First make sure that you've finished the [[SSH]] guide configuration instructions.
#: We will use the same key for connecting to your remote server as for connecting to Github. (This is completely valid practice.)
# Go to the "SSH keys" section of the settings panel (Manage Account -> SSH Keys)
# Add a new key.
#* I recommend naming it after the computer you're using; if you're in the CEC, for example, you could name it "Warehouse Cygwin".
#* The contents of your key is the contents of your ''id_rsa.pub''. It looks like <code>ssh-rsa AAAAB3blahblahblahblah yourname@somedomain</code>. It is exactly the same thing that you had to paste into the ''authorized_keys'' file on your EC2 instance.

You will now be able to push code to your Github repository using your personal SSH key.

}}

== FileZilla ==

{{RequiredInstructions|content=

You can use SFTP from the command line, or you can use any GUI file transfer client. All FTP clients I have seen also support SFTP. One popular FTP client is [http://www.filezilla-project.org/ Filezilla].

# Download and install FileZilla from http://filezilla-project.org/download.php?type=client
#: If you are using a lab computer, you can save it to your H drive.
# When you launch FileZilla, go to Edit→Settings or FileZilla→Preferences, and go to the SFTP options (under Connection). Click "Add keyfile…".
#* '''Windows users:''' Choose the *.ppk file that you made earlier using Puttygen.
#* '''Unix users:'''
#*# Choose your ''id_rsa'' file. '''OS X Tip:''' Press Shift+Command+Period to reveal hidden files in the file chooser window.
#*# FileZilla will want to make a *.ppk file. A good place to save it would be the .ssh directory as ''id_rsa.ppk''.
#: When finished, press '''OK''' (not the red ×) to save your changes.
# Back on the main FileZilla screen, there are four fields: Host, Username, Password, and Port. Fill them in as follows:
#* '''Hostname:''' sftp://ec2-xxx-xx-xx-xxx.compute-1.amazonaws.com/
#* '''Username:''' The username you created on your server.
#* '''Password:''' Since you are using a key, you may leave this blank.
#*: If you changed your SSH settings to allow password-based authentication, then you could put your password in here.
#* '''Port:''' 22
# Then click Quickconnect. If everything is configured correctly, FileZilla should log into your server.

[[File:FileZilla.png]]

On the left and right of the FileZilla window, you can drag files between your computer and your server. Thus, you can edit a file in a text editor like Notepad++ on your decktop, and then upload it to your server by simply dragging it from the left pane to the right pane in FileZilla.

}}

VS Code

2020-09-18T19:48:09Z

Jasonren: /* Module 2 */

== Getting Started With Each Module ==

* Create Github repo using the CSE 330 repo creator (Check Piazza for the link)
* Navigate to the created repo in Github
* 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 Github repository! I highly recommend creating your Github 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 . You can check if you have Git running by typing git --version in your terminal'''

* 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 Github repo.
* To commit, simply type a message in the box and click the check mark above it. To push to your Github 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 ==
=== DISCLAIMER ===
The following instructions rely on a third-party VSCode plug-in that is not actively maintained. As of 9/18/2020, the last commit in that repository is over a year ago. '''Use at your own risk!''' There are several reports that this plug-in no longer works on versions of VSCode later than 1.35.

=== 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.json file 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 would like to avoid having to frequently upload your changes to your instance in order to test your changes, you can optionally set up a local PHP server.

'''To run PHP locally'''

'''Windows'''
# Download WAMP http://www.wampserver.com/en/download-wampserver-64bits/
# Place your project repositories in Wamp's www/ directory, and navigate to http://localhost in your browser. You should see your projects listed here, run php files, and use phpmyadmin.

'''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'''
# In VS Code, search for the extension '''Php Server'''. After installing, use VS Code's command pallette with CMD+Shift+P , search for PHP, and select start server. You should be able to view your project in your localhost

Workflow

2020-09-18T19:42:18Z

Jasonren: /* File Transfer */

The few minutes it takes to optimize your workflow will be the best few minutes you will spend in CSE 330 and your career. It is remarkable how many hours you can save just by using the best interface for text editing and deployment.

== Overview ==

There are going to be several aspects to our workflow in CSE 330, and we will be switching between multiple different programs. Here is how they all fit together.

=== Running Commands ===

''Mac OS X:'' You will be running commands on your local machine using '''Terminal''', which you can find in your Applications -> Utilities folder. You will be connecting to your server via SSH.

''Windows:'' You will be running commands on your local machine using '''WSL''' or '''Cygwin''', which you will install in the next section. You will be connecting to your server via SSH.

=== Version Control ===

You will be using '''Git''' as your version control system. Git enables you to keep track of changes to your source code. If you're using VS Code, the Git integration makes is very user friendly.

=== Text Editing ===

Although we highly recommend '''VS Code''', you may use '''Sublime Text''', '''Komodo Edit''', '''Notepad++''' (for Windows), and '''TextWrangler''' (for Mac). You can also use an IDE, like '''PHPStorm''', if you prefer.

=== File Transfer ===

In order to deploy your projects to your EC2 instance, you need some sort of method to transfer files from your local machine to your instance using SFTP. One option is using '''FileZilla''', an FTP client, to transport files from your local computer to your server.

=== Flowchart ===

If you are more visual, this flowchart might help:

[[File:CSE-330-Workflow.png]]

The flowchart illustrates 3 methods to copy files to your cloud instance: via your text editor, via an external SFTP client, and by cloning your remote Git repository. We will be primarily using '''Option 2''' in CSE 330 this semester.

In the flowchart, your ''Git Client'' is SourceTree and your ''Text Editor'' is Komodo. The ''SFTP Client'' could be FileZilla.

== Installing a Terminal Emulator ==
{{RequiredInstructions|content=

Windows is based on a fundamentally different architecture than Linux, meaning that, if you want to run Linux programs on Windows, you'll have to enable or install a special terminal emulator for it. Mac users do not need to install a terminal emulator since MacOs itself is a derivative of Unix, which is an ancestor of Linux. The Terminal utility is all you need.

=== Windows Subsystem for Linux ===

Starting in Windows 10, Windows has the ability to emulate Linux, meaning that you can run Linux commands on Windows, without having to install Cygwin. To enable WSL, follow [https://msdn.microsoft.com/en-us/commandline/wsl/install_guide these instructions]. Once those instructions are complete, you can open a shell by clicking on the Start menu, typing "Bash", then clicking on the entry labeled "Bash on Ubuntu on Windows".

=== Cygwin ===

'''Cygwin''' is a Linux Terminal emulator for Windows.

==== Installation ====

The CEC lab machines already have Cygwin installed. Follow these instructions to get Cygwin up and running on your personal PC.

# Run ''setup.exe'' from http://www.cygwin.com/
# Keep the Cygwin directory as the default, ''C:\cygwin''. Choose a place like ''C:\cygwin\downloads'' to download the installation files. Choose any download site, although probably one with a .com suffix is best when you're in the US.
# In the "Select Packages" screen, select the following packages:
#* Net -> openssh
#* Net -> openssl
#* Python -> python3 (you will need this for Module 4)
#* Devel -> git (version control system)
#* One or more of the following:
#** Editors -> vim
#** Editors -> emacs
#** Editors -> nano
# Allow the installation to complete.

Throughout the rest of this course, when we say to "open a terminal", if you are on Windows, we mean to "open WSL/Cygwin".

}}

== Github ==

{{RequiredInstructions|content=

'''Github''' is a service that enables you to store your code for free in the cloud. It is similar in spirit to Github, but with a different mission statement.

=== Creating a Github Account ===

Go to [https://github.org/ Github.org] to create an account.

'''Important:''' Use your @wustl.edu e-mail address to create your account. This will put your account on the "educational plan", which removes some limitations of the free account.

'''Note:''' If you know someone who uses Github, you can ask them to invite you as a friend. This will increase the member limit on the inviter's private repos.

=== Adding Your Key to Github ===
'''Not uploading your key is perfectly fine, and in many cases easier. Here are the instructions though, if you'd like'''

# First make sure that you've finished the [[SSH]] guide configuration instructions.
#: We will use the same key for connecting to your remote server as for connecting to Github. (This is completely valid practice.)
# Go to the "SSH keys" section of the settings panel (Manage Account -> SSH Keys)
# Add a new key.
#* I recommend naming it after the computer you're using; if you're in the CEC, for example, you could name it "Warehouse Cygwin".
#* The contents of your key is the contents of your ''id_rsa.pub''. It looks like <code>ssh-rsa AAAAB3blahblahblahblah yourname@somedomain</code>. It is exactly the same thing that you had to paste into the ''authorized_keys'' file on your EC2 instance.

You will now be able to push code to your Github repository using your personal SSH key.

}}

== FileZilla ==

{{RequiredInstructions|content=

You can use SFTP from the command line, or you can use any GUI file transfer client. All FTP clients I have seen also support SFTP. One popular FTP client is [http://www.filezilla-project.org/ Filezilla].

# Download and install FileZilla from http://filezilla-project.org/download.php?type=client
#: If you are using a lab computer, you can save it to your H drive.
# When you launch FileZilla, go to Edit→Settings or FileZilla→Preferences, and go to the SFTP options (under Connection). Click "Add keyfile…".
#* '''Windows users:''' Choose the *.ppk file that you made earlier using Puttygen.
#* '''Unix users:'''
#*# Choose your ''id_rsa'' file. '''OS X Tip:''' Press Shift+Command+Period to reveal hidden files in the file chooser window.
#*# FileZilla will want to make a *.ppk file. A good place to save it would be the .ssh directory as ''id_rsa.ppk''.
#: When finished, press '''OK''' (not the red ×) to save your changes.
# Back on the main FileZilla screen, there are four fields: Host, Username, Password, and Port. Fill them in as follows:
#* '''Hostname:''' sftp://ec2-xxx-xx-xx-xxx.compute-1.amazonaws.com/
#* '''Username:''' The username you created on your server.
#* '''Password:''' Since you are using a key, you may leave this blank.
#*: If you changed your SSH settings to allow password-based authentication, then you could put your password in here.
#* '''Port:''' 22
# Then click Quickconnect. If everything is configured correctly, FileZilla should log into your server.

[[File:FileZilla.png]]

On the left and right of the FileZilla window, you can drag files between your computer and your server. Thus, you can edit a file in a text editor like Notepad++ on your decktop, and then upload it to your server by simply dragging it from the left pane to the right pane in FileZilla.

}}

Workflow

2020-09-18T19:40:02Z

Jasonren: /* FileZilla */

The few minutes it takes to optimize your workflow will be the best few minutes you will spend in CSE 330 and your career. It is remarkable how many hours you can save just by using the best interface for text editing and deployment.

== Overview ==

There are going to be several aspects to our workflow in CSE 330, and we will be switching between multiple different programs. Here is how they all fit together.

=== Running Commands ===

''Mac OS X:'' You will be running commands on your local machine using '''Terminal''', which you can find in your Applications -> Utilities folder. You will be connecting to your server via SSH.

''Windows:'' You will be running commands on your local machine using '''WSL''' or '''Cygwin''', which you will install in the next section. You will be connecting to your server via SSH.

=== Version Control ===

You will be using '''Git''' as your version control system. Git enables you to keep track of changes to your source code. If you're using VS Code, the Git integration makes is very user friendly.

=== Text Editing ===

Although we highly recommend '''VS Code''', you may use '''Sublime Text''', '''Komodo Edit''', '''Notepad++''' (for Windows), and '''TextWrangler''' (for Mac). You can also use an IDE, like '''PHPStorm''', if you prefer.

=== File Transfer ===

See [[VS Code]] and the Module 2 section to see our recommended file transfer method. If you're not using VS Code, you may use '''FileZilla''' to transport files from your local computer to your server.

=== Flowchart ===

If you are more visual, this flowchart might help:

[[File:CSE-330-Workflow.png]]

The flowchart illustrates 3 methods to copy files to your cloud instance: via your text editor, via an external SFTP client, and by cloning your remote Git repository. We will be primarily using '''Option 2''' in CSE 330 this semester.

In the flowchart, your ''Git Client'' is SourceTree and your ''Text Editor'' is Komodo. The ''SFTP Client'' could be FileZilla.

== Installing a Terminal Emulator ==
{{RequiredInstructions|content=

Windows is based on a fundamentally different architecture than Linux, meaning that, if you want to run Linux programs on Windows, you'll have to enable or install a special terminal emulator for it. Mac users do not need to install a terminal emulator since MacOs itself is a derivative of Unix, which is an ancestor of Linux. The Terminal utility is all you need.

=== Windows Subsystem for Linux ===

Starting in Windows 10, Windows has the ability to emulate Linux, meaning that you can run Linux commands on Windows, without having to install Cygwin. To enable WSL, follow [https://msdn.microsoft.com/en-us/commandline/wsl/install_guide these instructions]. Once those instructions are complete, you can open a shell by clicking on the Start menu, typing "Bash", then clicking on the entry labeled "Bash on Ubuntu on Windows".

=== Cygwin ===

'''Cygwin''' is a Linux Terminal emulator for Windows.

==== Installation ====

The CEC lab machines already have Cygwin installed. Follow these instructions to get Cygwin up and running on your personal PC.

# Run ''setup.exe'' from http://www.cygwin.com/
# Keep the Cygwin directory as the default, ''C:\cygwin''. Choose a place like ''C:\cygwin\downloads'' to download the installation files. Choose any download site, although probably one with a .com suffix is best when you're in the US.
# In the "Select Packages" screen, select the following packages:
#* Net -> openssh
#* Net -> openssl
#* Python -> python3 (you will need this for Module 4)
#* Devel -> git (version control system)
#* One or more of the following:
#** Editors -> vim
#** Editors -> emacs
#** Editors -> nano
# Allow the installation to complete.

Throughout the rest of this course, when we say to "open a terminal", if you are on Windows, we mean to "open WSL/Cygwin".

}}

== Github ==

{{RequiredInstructions|content=

'''Github''' is a service that enables you to store your code for free in the cloud. It is similar in spirit to Github, but with a different mission statement.

=== Creating a Github Account ===

Go to [https://github.org/ Github.org] to create an account.

'''Important:''' Use your @wustl.edu e-mail address to create your account. This will put your account on the "educational plan", which removes some limitations of the free account.

'''Note:''' If you know someone who uses Github, you can ask them to invite you as a friend. This will increase the member limit on the inviter's private repos.

=== Adding Your Key to Github ===
'''Not uploading your key is perfectly fine, and in many cases easier. Here are the instructions though, if you'd like'''

# First make sure that you've finished the [[SSH]] guide configuration instructions.
#: We will use the same key for connecting to your remote server as for connecting to Github. (This is completely valid practice.)
# Go to the "SSH keys" section of the settings panel (Manage Account -> SSH Keys)
# Add a new key.
#* I recommend naming it after the computer you're using; if you're in the CEC, for example, you could name it "Warehouse Cygwin".
#* The contents of your key is the contents of your ''id_rsa.pub''. It looks like <code>ssh-rsa AAAAB3blahblahblahblah yourname@somedomain</code>. It is exactly the same thing that you had to paste into the ''authorized_keys'' file on your EC2 instance.

You will now be able to push code to your Github repository using your personal SSH key.

}}

== FileZilla ==

{{RequiredInstructions|content=

You can use SFTP from the command line, or you can use any GUI file transfer client. All FTP clients I have seen also support SFTP. One popular FTP client is [http://www.filezilla-project.org/ Filezilla].

# Download and install FileZilla from http://filezilla-project.org/download.php?type=client
#: If you are using a lab computer, you can save it to your H drive.
# When you launch FileZilla, go to Edit→Settings or FileZilla→Preferences, and go to the SFTP options (under Connection). Click "Add keyfile…".
#* '''Windows users:''' Choose the *.ppk file that you made earlier using Puttygen.
#* '''Unix users:'''
#*# Choose your ''id_rsa'' file. '''OS X Tip:''' Press Shift+Command+Period to reveal hidden files in the file chooser window.
#*# FileZilla will want to make a *.ppk file. A good place to save it would be the .ssh directory as ''id_rsa.ppk''.
#: When finished, press '''OK''' (not the red ×) to save your changes.
# Back on the main FileZilla screen, there are four fields: Host, Username, Password, and Port. Fill them in as follows:
#* '''Hostname:''' sftp://ec2-xxx-xx-xx-xxx.compute-1.amazonaws.com/
#* '''Username:''' The username you created on your server.
#* '''Password:''' Since you are using a key, you may leave this blank.
#*: If you changed your SSH settings to allow password-based authentication, then you could put your password in here.
#* '''Port:''' 22
# Then click Quickconnect. If everything is configured correctly, FileZilla should log into your server.

[[File:FileZilla.png]]

On the left and right of the FileZilla window, you can drag files between your computer and your server. Thus, you can edit a file in a text editor like Notepad++ on your decktop, and then upload it to your server by simply dragging it from the left pane to the right pane in FileZilla.

}}

Module 2

2020-09-14T18:23:58Z

Jasonren: Changed rubric to reference new git tutorial

__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'''
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 [[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 GitHub
# Setup a repo using GitHub Classroom
# Clone your CSE 330 repo from GitHub
# 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!)

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

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

_____________

# '''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.
# '''Git Tutorial (20 Points):'''
#* Place the two screenshots displaying the completed levels of the Main and Remote sections in your Individual repo
# '''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

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