Design Fundamentals for the Web – Session 10

More HTML Forms, PHP & JSON

October 30, 2014

Review

Last week’s agenda

Review of PHP

What is PHP?

PHP stands for PHP Hypertext Preprocessor, and is a server-side programming language developed specifically for the web, although it can be used as a more general-purpose server-side scripting language as well.

Web Server Access

To use PHP, you'll need access to a web server, so you'll need to use your TCNJ Web account or a thrid party hosting service like A Small Orange

FTP

Once you have web server access, you'll need FTP software to transfer your files to your server. Again, FTP stands for File Transfer Protocol and can be used to copy files from your local computer to your web server.

Using PHP

PHP has a similar syntax to Javascript and C, but has some unique features as well. Let's go ahead and demonstrate some of the features of PHP.

<?php
/*
This is a multi-line comment in PHP,
the same as in Javascript & CSS.
*/

// here's a single line comment like in Javascript as well


// like Javascript, PHP variables are "loosely" typed
$myString = "a text string";
$myInteger = 10;
$myDecimal = 3.14159;
$myIndexedArray = [1,2,3,4];
$myAssociativeArray = ['firstname'=>'','lastname'=>'', 'email'=>''];

if(!empty($myAssociativeArr["email"])){
// do something if it's true
} else {
// do something else if it's false
}
?>


Introduction to JSON & Ajax

What is JSON?

JSON stands for Javascript Object Notation and is becoming a widespread alternative to XML as a data exchange format. Many web services including Facebook, Twiiter and Yahoo use JSON as their return data format for their APIs (Application Programming Interfaces).

jQuery has a number of functions that will let us call other scripts, either on our server, or on remote servers like Twitter, Yahoo, or even tcnj.com. Using these functions, we can access our PHP scripts remotely, allowing us to host our HTML on Github Pages, but execute server-side logic on other servers. This is called Cross Site Scripting, and used to be (and can still be) considered a security threat, but is becoming an increasingly common way of delivering content through APIs.

Demo

Let's take a look at some example jQuery JSON Ajax code and see it in action.

And here's the PHP code. We're using jQuery on the client/presentation side to capture the form data, then we pass that data to our PHP script on the server to validate it, and if everything is valid, we pass the data through to the email server, and return a success code. Otherwise our PHP sends back an error code, and jQuery updates the user interface accordingly. THis is an example of separation of logic and presentation.


Github Basics

Let's take a few minutes to log into Github. THose of you who haven't yet done so, please give me your Github usernames so I can invite you to our class Github Group.

Forking Repos

I've added a couple more example files to the Examples repository, so let's navigate over to our repositories page and take a look at your copy of the Examples repo. As you can see, your copy is out of synch with mine. You can synch your copy in a couple of ways: delete your copy and fork a new copy (easiest), or update your copy using a pull request. For the time being, let's go the delete & refork route. We'll cover pull requests later in the semester.

Creating New Repos

Now let's create new repo. Navigate to the Repository tab on your Github account and click the green "New" button. On the New Repo screen, give your new repository a name, ceck "public" or "private", and be sure to check the "Initialize this repository with a README" checkbox. You now have a shiny new repo you can add files to.

Demo

Let's go ahead and add a couple of files into our new repo.


Assignment 10

Reading

Design

Prepare your site for initial Design Review and User Testing