VS Code

2020-01-29T19:04:05Z

Connor: /* Testing Everything Locally */

== 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 ==
=== 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 get the SFTP integration working well, you don't need to set up a local php server. If you can't get the above working, however, we highly recommend coding all of your projects locally, and only uploading them to your ec2 instance when complete.

'''To run PHP locally'''

'''Windows'''
# Download WAMP 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

Node.JS

2019-12-31T19:41:50Z

Connor: /* Your First Node.js Application: Hello World */

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

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

== Non-Blocking I/O ==

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

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

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

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

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

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

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

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

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

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

== Installing Node.js ==

Run the following commands to install Node and NPM:

<source lang="bash">
$ curl --silent --location https://rpm.nodesource.com/setup_12.x | sudo bash -
$ sudo yum install -y nodejs
</source>



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

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

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

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

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

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

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

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

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

=== Installing Packages ===

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

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

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

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

=== Static Fileserver Code ===

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

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

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

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

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

=== Port 3456 ===

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

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

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

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

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

== Node.js Security ==

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

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

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

== Node.js Conventions ==

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

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

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

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

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

Then, back on the command line, when you run

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

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

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

[[Category:Module 7]]

Amazon Web Services

2019-12-28T20:36:07Z

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

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

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

== Creating and Configuring your EC2 Instance ==

{{RequiredInstructions|content=

Follow these steps to get to the AWS Management Console:

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

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

# Use the Classic Wizard.
# Please... Just please choose distribution of Linux labeled "Amazon Linux AMI". Make sure to double check before selecting, as it recently has been showing up as the second option and selecting another distribution can cause problems later. For more information on distributions, refer to [[Linux#Linux Distributions|the Linux guide]].
[[File:Aws-ami.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]]

AJAX and JSON

2019-10-20T03:17:07Z

Connor: /* Logging In a User */

Asynchronous Javascript And XML, or '''''AJAX''''', is a group of related web development techniques, standards, and technologies used on the client (web browser) side of the standard web server-client communication model.

Here's the general concept: JavaScript is used to send requests to the web server in the background and retrieve data, without the need to refresh the page. The result: dynamic, fast, user-friendly web pages.

The requests are performed ''asynchronously'': this means that the end user can continue interacting with your web page while the server data is being loaded.

The key idea is that a large fraction of the work happens at the web browser, and larger requests happen behind the scenes, keeping waiting times for data to come back over the network to a minimum. AJAX is generally also associated with higher-level APIs and libraries that aid in producing cleaner user interfaces for web applications.

== The XMLHttpRequest Object ==

The JavaScript specification defines the '''XMLHttpRequest''' object (sometimes abbreviated as '''XHR'''), which is used to exchange data with the web servers without needing to reload the entire web page in the browser.

'''Note:''' For security reasons, you cannot perform AJAX requests to other domains, unless that domain has a special security policy set up to enable such requests.
=== Javascript Fetch API ===

While creating an xhr object works, it's messy and hard to cleanly organize javascript's asynchronous nature.

Javascript has a fetch api that you should be using.

=== Sending Data ===

==== GET Data ====

To send GET data, create a fetch object with method "GET"

<source lang="javascript">
fetch('/path/to/php/file', {
method: "GET"
})
</source>

You can build your url to include GET variables if you want to send data.
ex: '/path/to/php/file?x='hi'

==== POST Data ====

To send POST data, create a fetch object with method "POST". You need to create an object of the data you want to send.

<source lang="javascript">
const data = { x: 'hi', y: 'hello' };
fetch('/path/to/php/file', {
method: "POST",
body: JSON.stringify(data)
})
</source>

=== Listening for a Response ===

When expecting a response from your php script, javascript's fetch api has a clean promise-based method of handling this.

<source lang="javascript">
const pathToPhpFile = 'test.php';
const data = { x: 'hi', y: 'hello' };
fetch(pathToPhpFile, {
method: "POST",
body: JSON.stringify(data)
})
.then(res => res.json())
.then(response => console.log('Success:', JSON.stringify(response)))
.catch(error => console.error('Error:',error))
</source>

You'll notice unfamiliar syntax here with the .then() methods attached.
These are attaching event listeners to the end of your fetch request, and will trigger a function when your php script returns a response.

You should '''always''' have a catch block at the end, in case an error occurs in your response. In the near future, Javascript will ignore any requests that do not include a .catch() block.

==== Browser Support ====

Many examples that you find when Googling for "AJAX" use the '''onreadystatechange''' property of the XMLHttpRequest instance to react on the completion of the request, rather than using an event listener. This approach works, and it is required for comprehensive browser support, but it is no longer recommended for future use in modern web applications. The implementation of XMLHttpRequest documented here (so-called "XHR level 2") works in the following browsers:
* Firefox 3.5+ (Jun 2009)
* Safari 5+ (Jun 2010)
* Chrome 7+ (Sep 2010)
* Opera 12+ (May 2012)
* Internet Explorer 10+ (unreleased)
Together, browsers supporting XHR level 2 account [http://caniuse.com/xhr2 77% of the market] as of August 2013.

=== Response Formats ===

More often than not, a plaintext response form the server is not very helpful: you want to transmit more information than simply a single string of text. There are two good options to get more information from a single AJAX request: '''XML''' (the original format, thus the ''X'' in ''AJAX'') and '''JSON'''.

==== XML ====

Your server can respond with an XML document (whence, ''XMLHttpRequest''). An '''XML document''' uses syntax that is extremely close to HTML For example:

<source lang="xml">
<?xml version="1.0" standalone="yes" ?>
<note>
<date year="2013" month="02" day="14" />
<to>Sally</to>
<message>Happy Valentine's Day!</message>
<from>Your Secret Admirer</from>
</note>
</source>

Like HTML, XML has a DOM that can be traversed in JavaScript.

If you make an AJAX request to a script generating an XML document, the root XML node is accessible in the '''responseXML''' property.

<source lang="javascript">
function ajaxCallback(event){
var xmlDocument = event.target.responseXML;

alert(xmlDocument.getElementsByTagName("to")[0].textContent); // Sally (in the case of the example XML above)
}
</source>

==== JSON ====

JavaScript Object Notation, or '''JSON''', is a rising standard interface format because of its lightweight syntax that makes it especially useful for AJAX requests.

The JSON syntax closely follows the syntax for [[JavaScript#Object Literals|object literals]]. For example:

<source lang="javascript">
{
"apple": {
"color": "red",
"flavor": "sweet"
},
"lemon": {
"color": "yellow",
"flavor": "sour"
}
}
</source>

Usually when JSON is transferred over the internet, it is condensed down to one line, like this:

<source lang="javascript">
{"apple":{"color":"red","flavor":"sweet"},"lemon":{"color":"yellow","flavor":"sour"}}
</source>

In JavaScript, you can convert a JSON string to an object using '''JSON.parse()'''. For example:

<source lang="javascript">
var jsonData = JSON.parse('{"apple":{"color":"red","flavor":"sweet"},"lemon":{"color":"yellow","flavor":"sour"}}');

alert(jsonData.apple.color); // red
</source>

Here's how to use it in conjunction with your AJAX response callback:

<source lang="javascript">
function ajaxCallback(event){
var jsonData = JSON.parse(event.target.responseText);

alert(jsonData.lemon.flavor); // sour (in the case of the example JSON above)
}
</source>

Here is a graphic to illustrate the JSON process.

[[File:JSON-Flowchart.png‎]]

== Examples ==

=== Logging In a User ===

Suppose you had the following PHP script:
Please note the difference in accessing POST data.

<source lang="php">
<?php
// login_ajax.php

header("Content-Type: application/json"); // Since we are sending a JSON response here (not an HTML document), set the MIME Type to application/json

//Because you are posting the data via fetch(), php has to retrieve it elsewhere.
$json_str = file_get_contents('php://input');
//This will store the data into an associative array
$json_obj = json_decode($json_str, true);

//Variables can be accessed as such:
$username = $json_obj['username'];
$password = $json_obj['password'];
//This is equivalent to what you previously did with $_POST['username'] and $_POST['password']

// Check to see if the username and password are valid. (You learned how to do this in Module 3.)

if( /* valid username and password */ ){
session_start();
$_SESSION['username'] = $username;
$_SESSION['token'] = bin2hex(openssl_random_pseudo_bytes(32));

echo json_encode(array(
"success" => true
));
exit;
}else{
echo json_encode(array(
"success" => false,
"message" => "Incorrect Username or Password"
));
exit;
}
?>
</source>

'''Note:''' This example uses PHP's very handy '''json_encode()''' function to translate an associative array into a JSON object. This means that you can access in JavaScript the same structure that you made in PHP!

And suppose you had the following HTML content:

<source lang="html4strict">
<input type="text" id="username" placeholder="Username" />
<input type="password" id="password" placeholder="Password" />
<button id="login_btn">Log In</button>

<script type="text/javascript" src="ajax.js"></script> 
</source>

You could use the following JavaScript code to prepare, send, and receive a request from the server to see if the user is logged in, without ever having to refresh the page.

<source lang="javascript">
// ajax.js

function loginAjax(event) {
const username = document.getElementById("username").value; // Get the username from the form
const password = document.getElementById("password").value; // Get the password from the form

// Make a URL-encoded string for passing POST data:
const data = { 'username': username, 'password': password };

fetch("login_ajax.php", {
method: 'POST',
body: JSON.stringify(data),
headers: { 'content-type': 'application/json' }
})
.then(response => response.json())
.then(data => console.log(data.success ? "You've been logged in!" : `You were not logged in ${data.message}`))
.catch(err => console.error(err));
}

document.getElementById("login_btn").addEventListener("click", loginAjax, false); // Bind the AJAX call to button click
</source>

'''Note:''' The above example uses an '''anonymous function''' (a function without a name that is declared in an attribute) as the callback. If you are using a certain callback function only once in your program, this is a perfectly valid approach to reduce the amount of code you need to write.

=== Loading Data from an XML File for Display in HTML ===

Suppose you have a file '''note.xml''' that contains the following information:

<source lang="xml">
<?xml version="1.0" standalone="yes" ?>
<note>
<date year="2013" month="02" day="14" />
<to>Sally</to>
<message>Happy Valentine's Day!</message>
<from>Your Secret Admirer</from>
</note>
</source>

Further, suppose you had an HTML element with ID '''note''':

<source lang="html4strict">
<div id="note"></div>
</source>

You could load this XML file and then display it inside of your HTML document like this:

<source lang="javascript">
function getNoteAjax(event){
// The XMLHttpRequest is simple this time:
var xmlHttp = new XMLHttpRequest();
xmlHttp.open("GET", "note.xml", true);
xmlHttp.addEventListener("load", getNoteCallback, false);
xmlHttp.send(null);
}

function getNoteCallback(event){
var htmlParent = document.getElementById("note"); // Get the HTML element into which we want to write the note
var xmlDocument = event.target.responseXML; // Get the XML root node from the response

// Find the <date/> element from the XML response. We expect only 1 such element, so we can call
// xmlDocument.getElementsByTagName() and then get the first (and only) element in the array all in
// one step. This is called chaining.
var xmlDateElement = xmlDocument.getElementsByTagName("date")[0];

// Put together a YYYY-MM-DD type date into a string based on the attributes of the <date/> element.
var dateString = xmlDateElement.getAttribute("year") + "-" + xmlDateElement.getAttribute("month")
+ "-" + xmlDateElement.getAttribute("day");

// Get the content of the <to>, <message>, and <from> tags. Again, you can use a chain to do this in one line for each.
var to = xmlDocument.getElementsByTagName("to")[0].textContent;
var message = xmlDocument.getElementsByTagName("message")[0].textContent;
var from = xmlDocument.getElementsByTagName("from")[0].textContent;

// Make a <strong> tag, append the date string as its content, and then append it to the HTML element.
var htmlDateObj = document.createElement("strong");
htmlDateObj.appendChild(document.createTextNode(dateString));
htmlParent.appendChild(htmlDateObj);

// Make a <p> tag to contain the note.
var htmlParagraphObj = document.createElement("p");
htmlParagraphObj.appendChild(document.createTextNode("Dear "+to+",")); // First append the greeting
htmlParagraphObj.appendChild(document.createElement("br")); // Append a couple line feeds
htmlParagraphObj.appendChild(document.createElement("br"));
htmlParagraphObj.appendChild(document.createTextNode(message)); // Write the message itself
htmlParagraphObj.appendChild(document.createElement("br")); // Append a couple more line feeds
htmlParagraphObj.appendChild(document.createElement("br"));
htmlParagraphObj.appendChild(document.createTextNode("Love, "+from)); // Finally, append the salutation
htmlParent.appendChild(htmlParagraphObj); // Append the newly engineered <p> to the HTML element.
}

document.addEventListener("DOMContentLoaded", getNoteAjax, false); // Bind the AJAX call to page load
</source>

This example uses a lot of techniques documented in the [[JavaScript#Document Object Model]] section above. The resulting DOM will be something like this:

<source lang="html4strict">
<div id="note">
<strong>2013-02-14</strong>
<p>Dear Sally,<br /><br />Happy Valentine's Day!<br /><br />Love, Your Secret Admirer</p>
</div>
</source>

== Debugging AJAX and JSON ==

It is helpful when building your application to look at the AJAX requests and responses as they happen in real time. Fortunately, there are many tools to help.

In your favorite web inspector (Chrome Dev Tools, Mozilla Dev Tools, Firebug, Dragonfly, and so on), go to the "Network" tab. This is where you can see all assets loaded by the application: images, stylesheets, and, most importantly for us, AJAX files. Some inspectors let you filter requests by type; for example, the Chrome inspector lets you click "XHR" to only show XMLHttpRequest (AJAX) requests.

You can also view the JSON sent by your server. Double-clicking the entries in the web inspector opens the source URL in a new tab.

If you find minified JSON hard to read, we recommend that you install the JSONView browser extension or one of its close relatives:
* [https://addons.mozilla.org/en-us/firefox/addon/jsonview/ Firefox]
* [https://chrome.google.com/webstore/detail/jsonview/chklaanhfefbnpoihckbnefhakgolnmc?hl=en Chrome]
* [https://addons.opera.com/en/extensions/details/jsonviewer/ Opera]
* [https://github.com/rfletcher/safari-json-formatter Safari]

[[Category:Module 6]]

Module 5

2019-10-19T22:06:42Z

Connor: /* Grading */

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

This article contains your assignments for Module 5.

'''Warning:'''

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

== Reading ==

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

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

== Individual Assignments ==

'''''IMPORTANT:'' Both of the individual assignments must be completed ''without'' using a JavaScript library like jQuery.''' However, you may 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: http://classes.engineering.wustl.edu/cse330/content/weather.css

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

[[File:WeatherWidget.png]]

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

==== Tips ====

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

The JSON from our server looks like this:

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

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

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

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

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

== Group Project ==

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

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

=== Calendar ===

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

You will use JavaScript to process user interactions at the web browser, without ever refreshing the browser after the initial web page load. You may use a JavaScript library of your choice, including Ext JS, 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 delete their events, but not the events of others.
*: Again, the server should delete events based on the username present in the session. (If it deletes only based on an Event ID, an attacker could feed any arbitrary Event ID to your server, even if he/she didn't own that event.)
* All user and event data should be kept in a database.
* At no time should the main page need to be reloaded.
*: User registration, user authentication, event addition, and event deletion should all be handled by JavaScript and AJAX requests to your server.
* Your page needs to work in the versions of Firefox and Chrome installed on the lab computers.

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

=== Web Security and Validation ===

Your project needs to demonstrate that thought was put into web security and best practice. For more information, see this week's Web Application Security guide: [[Web Application Security, Part 3]]

In particular:

* '''Your application needs to prevent XSS attacks.''' Be careful when transmitting data over JSON that will be reflected in an event title! (Note: JSON data should be sanitized on the client side, not the server side.)
* '''Perform precautionary measures to prevent session hijacking attacks.'''
*: You should specify your session cookie to be HTTP-Only. However, for the means of this module, you need not test for user agent consistency.

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 5

2019-10-19T22:06:03Z

Connor: /* Grading */

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

This article contains your assignments for Module 5.

'''Warning:'''

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

== Reading ==

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

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

== Individual Assignments ==

'''''IMPORTANT:'' Both of the individual assignments must be completed ''without'' using a JavaScript library like jQuery.''' However, you may 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: http://classes.engineering.wustl.edu/cse330/content/weather.css

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

[[File:WeatherWidget.png]]

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

==== Tips ====

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

The JSON from our server looks like this:

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

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

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

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

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

== Group Project ==

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

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

=== Calendar ===

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

You will use JavaScript to process user interactions at the web browser, without ever refreshing the browser after the initial web page load. You may use a JavaScript library of your choice, including Ext JS, 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 delete their events, but not the events of others.
*: Again, the server should delete events based on the username present in the session. (If it deletes only based on an Event ID, an attacker could feed any arbitrary Event ID to your server, even if he/she didn't own that event.)
* All user and event data should be kept in a database.
* At no time should the main page need to be reloaded.
*: User registration, user authentication, event addition, and event deletion should all be handled by JavaScript and AJAX requests to your server.
* Your page needs to work in the versions of Firefox and Chrome installed on the lab computers.

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

=== Web Security and Validation ===

Your project needs to demonstrate that thought was put into web security and best practice. For more information, see this week's Web Application Security guide: [[Web Application Security, Part 3]]

In particular:

* '''Your application needs to prevent XSS attacks.''' Be careful when transmitting data over JSON that will be reflected in an event title! (Note: JSON data should be sanitized on the client side, not the server side.)
* '''Perform precautionary measures to prevent session hijacking attacks.'''
*: You should specify your session cookie to be HTTP-Only. However, for the means of this module, you need not test for user agent consistency.

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 performing any server altering functions that can only be done by a logged in user (i.e. not login/signup) (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]]

JavaScript

2019-10-11T19:35:17Z

Connor: /* Variables and Scope */

JavaScript is the most widely used scripting language for implementing client-side functionality in Web applications, and, in recent years, it's become very popular for server-side application, too. Unlike PHP, JavaScript code can be interpreted and executed in a client's web browser, instead of on the web server, depending on how it's being used.

== JavaScript? Did you mean Java? ==

'''JavaScript''' is a prototype-based programming language focused on web interactivity. It was first introduced in Netscape Navigator, and it in turn gave rise to what is now '''[http://www.ecmascript.org/ ECMAScript]'''. Originally, JavaScript was called "LiveScript". Sun, the developer of Java at the time, wanted a language that would complement its compiled Java language, and so LiveScript was renamed JavaScript.

Beyond that, '''Java and JavaScript are as similar as Ham and Hamster.'''

Java and JavaScript have similar syntax, but the under workings are quite different. For example, Java requires strict typing, but JavaScript allows for dynamic typing. Java is object-oriented, but JavaScript is prototype-oriented. Java is compiled, but JavaScript is interpreted. Java supports event listeners, but JavaScript makes them a fundamental part of the language. Java variables are scoped to the innermost method or loop, but JavaScript variables are scoped only to the innermost function.

== JavaScript Language Components ==

This section highlights some features of the JavaScript language that differentiate it from other languages. For a more comprehensive JavaScript tutorial, the following tutorials are both quality:

* [https://webplatform.github.io/ WebPlatform]: Great for learning JavaScript for the first time. Advocates best practices for modern JavaScript development.
* [http://www.quirksmode.org/js/contents.html QuirksMode]: More advanced than the WebPlatform tutorial, but it thoroughly covers the most powerful aspects of pure JavaScript and gives unparalleled advice on browser compatibility.

Advice: Do '''NOT''' Google for "JavaScript Tutorial". The first few hits advocate bad or outdated practices. Stick with the ones listed here.

=== Variables and Scope ===

To define a variable in JavaScript, use the '''let''' keyword.

<source lang="javascript">
let foo = "bar";
</source>

To define a constant in JavaScript, use the '''const''' keyword.

<source lang="javascript">
const foo = "bar";
</source>

'''Note: We should NOT see any variables initialized with var in your code. Some might appear in the linked examples, since those are from older versions of the language so please replace those with let and const in your mind'''
Var creates ambiguity to anyone reading your code and is becoming deprecated in JavaScript.

All variables are objects. In the case above, the variable '''foo''' is an object of the class '''String'''.

Notice that like PHP, you do not have to explicitly define a type for a variable like '''int''' or '''String'''; this is because JavaScript and PHP are ''dynamically typed languages''.

JavaScript code can access any variable higher in the “function tree”, but not vice-versa. This is called '''scope'''. ''All functions create their own scope.''

When you reference a variable, JavaScript will look up through the "function tree" until it finds the variable you asked for. This means that you could define variables of the same name as global variables inside of functions. For demonstration of concept:

<source lang="javascript">
const a = "hello";
const b = "world";

function sayGoodByeWorld(){
const a = "goodbye";

alert(a); // goodbye
alert(b); // world
}

sayGoodByeWorld();

alert(a); // hello
</source>

=== Object Literals ===

A very common way of storing and transporting data in JavaScript is by using objects. You can define an object with certain properties using an '''object literal''':

<source lang="javascript">
const apple = {
color: "red",
flavor: "sweet",
season: "autumn"
}

alert(apple.color); // red
</source>

=== Functions ===

To define a function in JavaScript, use the '''function''' keyword.

<source lang="javascript">
function sayHello(){
alert("Hello World");
}

sayHello(); // call the function
</source>

Pass an argument to a function like this:

<source lang="javascript">
function sayHello(name){
alert("Hello, "+name);
}

sayHello("Todd"); // call the function and pass an argument
</source>

====Arrow Functions====
The latest versions of JavaScript have introduced arrow functions. They provide a cleaner syntax for writing functions, and maintain scope when using classes.

The general syntax is:
<source lang="javascript">
(param1, param2, ... , paramN) => { statements }

//removing the brackets around { statements } is equivalent to
{ return statements; }

//No parameters should be 2 empty parentheses as such:
() => { statements }
</source>

The example above could be written as follows:

<source lang="javascript">
const sayHello = (name) => alert("Hello, "+name);
sayHello("Todd");
</source>

Arrow functions can be particularly useful when you're looking to contain function logic within cleanly and compactly. For example, iterating over an array and making updates to each item of the array.
<source lang="javascript">
let arr = [1,2,3,4,5];
let newArr = arr.map(number => number*5); //newArr is an array containing [5,10,15,20,25]
</source>

==== Functions are Objects ====

In JavaScript, functions are objects. This means that they can be assigned to variables, manipulated on the fly, and even passed as arguments to other functions! '''''This is an extremely important feature of JavaScript''''' that makes it such a robust language for web development.

You create a function variable like this:

<source lang="javascript">
const sayHello = function(){
alert("Hello World");
}

sayHello(); // call the function
</source>

Observe that you can make [[#Variables and Scope|scope-dependent]] functions in this way.

=== Closures ===

{{DoctypeTV
|youtube_id=HaPlj796ngQ
|time=5m45s
|desc=JavaScript Closures
}}

A '''closure''' is a way to separate a certain snippet of JavaScript code from the global scope. This is useful if you do not want to "muck up" global variables. Closures are nothing more than anonymous functions that are called as soon as they are created:

<source lang="javascript">
const a = "hello";

(function(){
const b = "world";

alert(a); // hello
alert(b); // world
})();

alert(a); // hello
alert(b); // ReferenceError: b is not defined
</source>

{{JSFiddleExample
|title=Passing Variables to a Closure
|desc=This example demonstrates how you can "save" previous versions of a variable using closures. This is possible because of scoping and the fact that function variables can be returned as objects.
|fiddle_id=YURqa
}}

Most JavaScript libraries (like jQuery) write all of their code in a closure. What this means is that except for one or two variable names (jQuery or $), everything associated with the library is completely self-contained.

=== Prototypal Inheritance ===

JavaScript implements '''prototypal inheritance''', as opposed to a language like Java or C++, which implements '''classical inheritance'''. JavaScript is one of only a handful of languages implementing prototype-based inheritance.

Here's how it works. Every callable object (function) has a '''prototype'''. When instances of that object are created, their properties and methods are copied (inherited) from the prototype. Additionally, changes made to the prototype later in the program are "copied" to every instance.

For example, if you wanted to make a method on all strings that added a “!”, you could modify String’s prototype:

<source lang="javascript">
String.prototype.bang = function(){
return this+"!"; // Notice: the context is the instance itself
}

alert("Hello".bang()); // alerts Hello!
</source>

To "extend" an object, just copy its prototype to a new object. However, since classical inheritance and prototypal inheritance are different concepts, copying prototypes may have results that you don't expect. [http://beej.us/blog/data/javascript-prototypes-inheritance/ This article] seems to have a pretty good explanation of how to "inherit" prototypes with example implementations.

==== Extending Built-In Prototypes ====

You should be aware that there is an active debate in the web development community about whether it is good programming style to extend the prototypes of built-in objects like String and Array, such as in the ''String.prototype.bang'' example above. There are legitimate arguments on both sides. [http://stackoverflow.com/questions/8859828/javascript-what-dangers-are-in-extending-array-prototype This Stack Overflow post] has good links to some articles discussing this issue.

=== Context ===

{{DoctypeTV
|youtube_id=0a4r4bm1nQA
|time=4m32s
|desc=The ''this'' Variable in JavaScript
}}

Every function is called on a certain object, which is not necessarily the same object in which it was defined. This is called '''context'''.

To call a function on an arbitrary context, use either '''call''' or '''apply'''. ''call'' takes a list of arguments, while ''apply'' takes them all in an array.

To access the current context, use the '''this''' keyword. Demonstration of concept:

<source lang="javascript">
const sayThisColor = function(){
alert(this.color);
}

const apple = { color: "red" }

sayThisColor(); // undefined
sayThisColor.call(apple); // red
</source>

== Events ==

Events are really what make JavaScript such a powerful language for web development.

Rather than being thread based, JavaScript is event based. Since all JavaScript code runs in a single thread, '''there are no concurrency issues'''. When an event occurs, JavaScript automatically calls the ''event callback'' as soon as all previous events' callbacks have finished executing.

Code in the form of a '''callback function''' is associated with events via a '''listener'''. For example, the following JavaScript causes ''sayHello()'' (the callback function) to be run whenever the button with ID "hello" is clicked (the event):

<source lang="javascript">
const sayHello = function(){
alert("Hello World");
}

document.getElementById("hello").addEventListener("click", sayHello, false);
</source>

{{JSFiddleExample
|title=Binding Callbacks to a Button Click
|fiddle_id=L8c4Z
|cse330=true
|desc=In this example, notice how we bind the callback function when the ''DOMContentLoaded'' event fires. This is because JavaScript requires that the button has been parsed by the browser before it can add event listeners to it.
}}

The '''addEventListener''' method takes three parameters:
* The event type
* The callback function
*: The callback function is passed one parameter: the event object.
* A boolean representing bubble (false) or capture (true) phase
*: You usually want Bubble phase. For more information on event phase, see [[#Event Phase]]

Note that versions of Internet Explorer prior to version 9 required that you use a different, albeit similar, function for assigning event listeners called '''attachEvent'''. attachEvent takes the same arguments as addEventListener, except you need to put '''on''' before the event type (e.g. "onclick"), and the third argument (phase) is not necessary.

It is perfectly valid to use an '''anonymous function''' as your callback function:

<source lang="javascript">
document.getElementById("hello").addEventListener("click", function(event){
alert(`Hello, World! Event Type: ${event.type}`);
}, false);
</source>

QuirksMode has perhaps the best series of articles about the ins and outs of JavaScript events on the internet: http://www.quirksmode.org/js/contents.html#events

=== The Event Object ===

Callback functions are passed one argument: an ''event object''. You see above that one property of the event object is ''event.type''. To see the full list of properties of the event object, you could run the code:

<source lang="javascript">
document.getElementById("my_btn").addEventListener("click", function(event){
let strout = "";
for(var i in event){
strout += `${i}: ${event[i]}\n`;
}
console.log(strout);
}, false);
</source>

Some of the most useful properties and methods include:
* '''event.target''' references the object on which the event occurred.
* '''event.currentTarget''' references the object whose listener is currently being processed.
*: ''Note:'' event.target and event.currentTarget might be the same or might be different, depending on whether you are listening for bubbled events.
* '''event.preventDefault()''' stops the normal result of the event from being executed. For example, if you listen for a form's ''submit'' event, you can call event.preventDefault() to stop the form from being submitted.
* '''event.stopPropagation()''' prevents any other event listeners from being executed. For more detail, read the section on Event Phase below.

For more detail on the event object, see [http://dev.w3.org/2006/webapi/DOM-Level-3-Events/html/DOM3-Events.html#interface-Event the W3C specification].

'''Note:''' If your callback function does not take any parameters, it will still run; you just won't have as easy of access to the event object.

=== Event Handlers and Memory Management ===

JavaScript is an automatically garbage-collected language, meaning that memory management is mostly taken care of for you. However, there are some instances when you need to be careful about creating "zombie" objects. In JavaScript, this mostly revolves around the idea of event listeners.

I could give an explanatory example, but instead I'll tell you straightaway that '''the moral of the story is that for every "addEventListener", there should probably be a "removeEventListener".''' Here are some good articles to satisfy your hunger for more details on event listeners and JavaScript memory management:

* http://www.vladalexandruionescu.com/2012/08/javascript-memory-leaks.html
* http://lostechies.com/derickbailey/2012/03/19/backbone-js-and-javascript-garbage-collection/
* http://stackoverflow.com/questions/5326300/garbage-collection-with-node-js

When you start working with Node.JS in the next module, it's more important than ever to keep good accounting of your event listeners.

=== Event Phase ===

In JavaScript, events occur in two phases: '''Capture Phase''' and '''Bubble Phase'''. Consider the following HTML document:

<source lang="html4strict">
<!DOCTYPE html>
<html>
<head><title>Event Test</title></head>
<body>
<div id="box">
<button id="btn">
Hello
</button>
</div>
</body>
</html>
</source>

Suppose the user clicks on the "Hello" button. Events will be fired in the following order:

# Capture Phase CLICK on the Document
# Capture Phase CLICK on the Body
# Capture Phase CLICK on the Div#box
# Target Phase CLICK on the Button#btn
# Bubble Phase CLICK on the Div#box
# Bubble Phase CLICK on the Body
# Bubble Phase CLICK on the Document

{{JSFiddleExample
|title=Using Capture Phase to Enable or Disable a Toolbar
|fiddle_id=r32Dz
|desc=We bind an event in the capture phase to the div with ID ''toolbar''. When ''e.stopPropagation()'' is called, the event does not reach the buttons in the toolbar.
}}

Graphically, here is the order in which an event occurs in three generic nested elements:

[[File:EventPhase.gif]]

Why is this useful? Suppose you have a control panel (toolbar, etc) that you want to temporarily deactivate. (For example, Bold/Italic/Underline buttons on a graphic text editor that currently has no content.) You could keep bubble phase event listeners on your buttons, but prevent those events from occurring by stopping the event in the capture phase on the parent element before the event reaches your buttons! Example:

<source lang="javascript">
const disableToolbarFunc = function(e){
e.stopPropogation();
}

// To disable toolbar:
document.getElementById("box").addEventListener("click", disableToolbarFunc, true);

// To re-enable toolbar:
document.getElementById("box").removeEventListener("click", disableToolbarFunc, true);
</source>

'''Word of caution:''' Like many great things in web development, capture phase does not work in versions of Internet Explorer prior to version 9. There is no elegant substitution for older versions of Internet Explorer.

'''Note:''' When the event reaches the innermost element, there is no distinction between capture phase and bubble phase. The order in which event handlers were added to the element determines the order in which those callbacks are evaluated.

== Document Object Model ==

The '''Document Object Model (DOM)''' is what enables JavaScript to manipulate the content of your web page.

=== Nodes and Traversing the DOM ===

Each element on your page, whether it is a <nowiki><p>, <img/></nowiki>, a string of text, or even an attribute, is called a '''node'''.

Every node, except for the document itself, has exactly one parent. A single node may have multiple children.

Consider the following HTML code:

<source lang="html4strict">
<ul id="my-list">
<li class="fruits">Apples</li>
<li class="citrus">Oranges and <strong>Lemons</strong></li>
<li class="berries">Cherries</li>
</ul>
</source>

Here, the ul with ID "my-list" has three child '''element nodes''' (the three li's) as well as four child '''text nodes''' (the whitespace counts as a text node) and a child '''attribute node'''. The second LI has one child '''text node''' as well as one child '''element node''' and one child '''attribute node'''.

The DOM can be traversed in JavaScript. First, let's look at an example.

<source lang="javascript">
e = document.getElementById("my-list").getElementsByClassName("citrus")[0].lastChild.nodeName;
alert(e);
</source>

{{JSFiddleExample
|title=Currently Selected Radio Button
|fiddle_id=SHcng
|desc=In pure JavaScript, in order to determine the currently selected radio button, it is necessary to iterate over an array of pointers to all possible radio buttons, and stop when you find one that is "checked".
}}

The above snippet gets the element with class name '''citrus''' that is a child of the element with ID '''my-list''' (the second LI in the example above), and alerts the type of its second child node (which in this case is '''STRONG''').

Some common methods for traversing the DOM include:

* Node.parentNode
* Node.childNodes - returns an array of nodes
* Node.firstChild - same as Node.childNodes[0]
* Node.lastChild - same as Node.childNodes[Node.childNodes.length-1]
* Node.previousSibling
* Node.nextSibling

You can also search for child (including all descendants) using one of the following methods:

* Node.getElementsByTagName("tag-name") - returns an array of element nodes having the tag name '''tag-name''' that are descendants of Node
* Node.getElementById("id") - returns a single node having the ID '''id''' that is a descendant of Node
* Node.getElementsByName("what-name") - returns an array of element nodes having their '''name''' attribute set to '''what-name'''. Useful for radio buttons and other form elements.
* Node.getElementsByClassName("class") - returns an array of nodes having the class '''class'''
*: '''Note:''' As of October 2012, 82% of the browser market supports Node.getElementsByClassName ([http://caniuse.com/getelementsbyclassname more info]). In order to support the other 18%, you need to either add your own getElementsByClassName to Node's prototype or use a JavaScript library like jQuery or MooTools.

It is common in JavaScript to have long statements like the one in the example above, where you call methods on several objects in sequence.

=== Creating, Moving, and Removing Nodes ===

You will frequently find yourself wanting to modify the DOM. JavaScript provides methods that help you do this.

Consider the same HTML as above. If you wanted to add another element to the list, you could use this code:

<source lang="javascript">
const newLi = document.createElement("li"); // creates a node with the tag name li
newLi.appendChild(document.createTextNode("Broccoli"));
newLi.setAttribute("class", "veggies");
document.getElementById("my-list").appendChild(newLi);
</source>

If you wanted to remove the apples from the list, you could do:

<source lang="javascript">
const apple = document.getElementById("my-list").getElementsByClassName("fruits")[0];
document.getElementById("my-list").removeChild(apple);
</source>

If you wanted to move the apples to the end of the list, you could do this:

<source lang="javascript">
const apple = document.getElementById("my-list").getElementsByClassName("fruits")[0];
document.getElementById("my-list").appendChild(apple);
</source>

Notice that '''Node.append()''' both removes a node from its previous location ''and'' appends it to its new location, which is always going to be as the last child of the parent node.

In summary, here are the methods to know from this section:

* Node.append(otherNode) - removes otherNode from its current location in the DOM (if applicable) and then adds it as the last child of Node
* Node.removeChild(otherNode) - removes otherNode, a child of Node, from the DOM
* document.createElement("tag-name") - create a new node with the tag name "tag-name"
* document.createTextNode("text") - create a node containing only the string '''text'''
* Node.setAttribute("attribute", "value") - sets the attribute node of name "attribute" to "value"

=== DOM Shortcuts ===

In the above sections, we have been creating, reading, modifying, and deleting Nodes. This is the most "correct" way to change the content of a web page from inside JavaScript.

This section documents a few shortcuts that are not as "pure" as using Nodes but can be less confusing and cumbersome.

{{JSFiddleExample
|title=Displaying Information
|fiddle_id=Q3BPZ
|desc=This example shows how to use some of the shortcut methods for using JavaScript to display information on the page.
}}

==== textContent ====

Using textContent to display information is probably the easiest method out there. For example, the following code overwrites whatever is in the element with ID "holder" with the string "Hello World":

<source lang="javascript">
document.getElementById("holder").textContent = "Hello World";
</source>

If you wanted to instead append the text, simply use '''+=''' instead of '''=''':

<source lang="javascript">
document.getElementById("holder").textContent += " - Later, he said Hello World - ";
</source>

Note that textContent displays strings literally; that is, it does not allow for HTML. Setting the textContent property also removes any HTML that may have already been in that element.

==== innerHTML ====

If you need to use HTML in your output but don't want to use the method described earlier in this section, a straightforward strategy is to use the innerHTML property of an element. For example, the following code would add a paragraph saying "Hello World" to the element with ID "holder":

<source lang="javascript">
document.getElementById("holder").innerHTML += "<p>Hello World</p>";
</source>

'''Important:''' You need to be careful to prevent XSS-type attacks if you display information using innerHTML. For example, be sure to escape a user-supplied string before appending it to innerHTML.

=== JavaScript Inspectors ===

{{DoctypeTV
|youtube_id=PKzrmbN-pMg
|time=4m13s
|desc=Using Firebug, WebKit Inspector, and IE Developer Tools
}}

Various browsers and browser plugins give you, the developer, tools to debug your code, inspect the DOM, and much more. Using these tools is essential for an efficient workflow.

* '''Firebug'''. Firebug is a plugin for Firefox that is a toolkit full of web developer tools, one of which is a DOM inspector. To inspect the DOM of a web page, simply open the Firebug window while viewing the web page.
* '''WebKit Inspector'''. The WebKit Inspector, which is available in both Chrome and Safari, enables you to see the DOM tree and relationships between elements. However, its DOM inspection tools are not as robust as those of Firebug.
* '''Opera Dragonfly'''. The web browser Opera comes with a web developer toolkit similar to the WebKit Inspector called Dragonfly. It is important that you test your sites in Opera, because although Opera has only a small fraction of the desktop browser market, it is second only to WebKit on the mobile market. Opera also has extremely strong CSS support, so it is good for testing for bugs in your CSS.

All of the above-mentioned tools enable you to look at the DOM of your web page and find what properties and methods are associated with each node. This is helpful because if you have JavaScript that manipulates HTML elements, you cannot tell which properties are associated with which elements by looking at the source code alone.

[[Category:Module 6]]

PHP

2019-09-30T15:12:36Z

Connor: /* Sending a File to the Browser */

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, you need both the PHP interpreter and the Apache module that runs PHP code. Run the following command to install both
sudo yum install -y php70

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