Web Development Intensive

This assignment is meant to give practice to the most important parts of PHP besides database integration, which is addressed in separate assignments.  The core concepts are include files and passing data (a.k.a. persistent data) using forms, links, and cookies.

Your assignment is to make a site consisting of four web pages:

• Home (index.php)
• News (news.php)
• Contact Us (contact.php)
• Thank You (thank_you.php)

There will also be multiple other files that the user never sees directly.  These will be:

• process_name.php (process the data the user enters on the Home page)
• process_contact.php (process the data the user enters on the Contact Us page)
• _article1.php, _article2.php, _article3.php, etc (the XHTML snippets for each article linked to from the News page)

Home (index.php)

Home page

Global navigation.  The Home page, like every other page on the site, has a top navigation menu with links to Home, News, and Contact.  This menu should use the technique of creating horizontal menus from list tags.  The global navigation should be created as a separate file so it can be included on all other pages of the site in a templatized manner.

• Read also this discussion about templatizing web sites using PHP.
• See this example of creating a templatized top navigation file as an external include file.

Form.  The Home page also has a form the user can fill in with their first and last names.  This form should submit the data the user enters to a script file called process_name.php via the HTTP POST method, which does something with that data.

• See also the discussion about passing data with forms
• and the example of using a form to submit a HTTP POST request to the server.

The code for the form will probably look something like the following. Note the action and method attributes of the form tag and the name attributes of the two form input elements. These are all important and you must understand why they are there:

<form action="process_name.php" method="POST">
	<label for="first_name">First Name:</label>
	<input type="text" id="first_name" name="first_name" />
	<br />
	<label for="last_name">Last Name:</label>
	<input type="text" id="last_name" name="last_name" />
	<br />
	<input type="submit" value="Enter site!" />
</form>

process_name.php

When the user clicks the submit button on the form on the Home page, the data they entered is sent along with the HTTP POST request for the file, process_name.php.

process_name.php should take the first name that the user entered in the form and store it semi-permanently in a cookie. Setting a cookie is handled by PHP’s built-in setcookie() function.

• See these two example files for setting and getting a cookie’s value

Once that is done setting the cookie, this script should redirect the user to the News page (news.php).  Redirecting is done using PHP’s built-in header() function, which allows you to send customized HTTP headers from the server to the client.

• See this example of using PHP’s header() function to redirect to another page (note you’ll have to download this code from the server using file transfer in order to view it).

News (news.php)

News page

Global navigation.  The News page, like the Home page, includes the global top navigation from the external file.

Reading the cookie.  The News page also reads the cookie which has the user’s first name in it.  To read a cookie, you can use PHP’s built-in $_COOKIE associative array.

• See this example of reading the value of a cookie using PHP’s built-in $_COOKIE array

News articles.  Each article title in the list of articles titles on the left side of the News page should be a link to news.php.  Along with each link, we will be passing the id of the article the user clicked on using the technique of passing data via links.

• See also the example of passing data using the query string of a link URL.

The XHTML for the article links will look something like the following.  Notice how each link passes a different article_id parameter in the query string:

<ul>
	<li><a href="news.php?article_id=1">article title 1</a></li>
	<li><a href="news.php?article_id=2">article title 2</a></li>
	<li><a href="news.php?article_id=3">article title 3</a></li>
</ul>

Loading the correct article.  The News page is therefore a template that can be used to load up any article, depending which link is clicked.  So, obviously, the code must somehow determine which article to load up.

• See this example of dynamically loading up different articles depending on which link is clicked.

In the code from the example linked above,  you’ll see that we find out which article link was clicked by the user by looking for the article_id parameter that was submitted along with the request for the news.php page in the query string in each link.

$articleId = $_REQUEST['article_id']; //get the article id from the browser's request data

//check to make sure there is an article id that was requested
//is_numeric() is a built-in PHP function that checks to make sure a variable is a number
//the ! is a logical NOT, so this statement says "if the article id is NOT a number, do the following:"
if (!is_numeric($articleId)) {
	//if there was no article id requested, use the number 1 as a default
	$articleId = 1;
}

Then, depending on which article id was requested, in the body of the XHTML document on the news.php page, we load up a different include file with the correct article content in it.

//load up the article that was requested from the external article content files
if ($articleId == 1) {
	//include an external XHTML snippet into this template
	include("_article1.html");
}
elseif ($articleId == 2) {
	include("_article2.html");
}
elseif ($articleId == 3) {
	include("_article3.html");
}
//...and so on for all the other articles

Contact Us (contact.php)

Contact Us page

Global navigation.   The Contact Us page includes the global navigation the same way as the other pages.

Article links.  It also has the set of article links on the left side of the page, the same as on the News page.  These should each link to news.php and pass along their corresponding article_id parameters, exactly as described for the News page.

Contact form.  The form allows the user to send an email to the site administrators.  When a user fills out the form and clicks submit, the form sends a request for the script, process_contact.php, which handles sending the email.

• See also the example of sending an email with PHP, in particular the index.html file.

process_contact.php

process_contact.php, like process_name.php, is invisible to the user – the user never sees it directly.  This script takes the data that the user entered into the form on the Contact Us page, and sends it in an email to the site administrators.

Once the email has been sent using PHP’s built-in mail() function, the script then redirects the user to the Thank You page (thank_you.php) using PHP’s built-in header() function, the same way we did it on process_name.php.

• See also the example of sending an email with PHP, in particular the process_email.php file which you will be able to download from the server using a file transfer program.
  

Thank You (thank_you.php)

Thank You page

Global navigation.  This page uses the same global navigation links and same article list as seen on the other pages.

Thank you message.  The main content of this page is a message thanking the user for submitting the Contact form.

			<form action="process_name.php" method="POST">
				<label for="first_name">First Name:</label>
				<input type="text" id="first_name" name="first_name" />
				<br />
				<label for="last_name">Last Name:</label>
				<input type="text" id="last_name" name="last_name" />
				<br />
				<input type="submit" value="Enter site!" />

			</form>

The submit button in the BlackBook design comp from Class 4′s in-class assignment #1 may be a bit confusing.  Here is a tip on how to get your button to look exactly right.

The HTML code is just that for a simple submit button:

<input type="submit" class="blackbooksubmit" value="Submit">

And the corresponding CSS code is:

input.blackbooksubmit {
 background-color:#A30606;
 border:0 none #FFFFFF;
 color:white;
 font-family: Arial,Helvetica,sans-serif;
 cursor:pointer;
 font-size: 11pt;
 font-weight:bold;
 padding:4px 10px 5px;
 text-align:center;
 width:69px;
}

Your assignment today is to create the information architecture wireframes of a New York cultural magazine’s website.  Your imaginary client and you have agreed upon the following list of requirements for the website.

Each of these requirements does not necessarily have to be on its own page or section of the site.  You should try to organize and group these bits of information in such a way that they are intuitive.  Then start to create wireframes that show how a user would navigate from the home page to find each of these pieces of content.  Refer to these ideas about web site navigation and try to use as many of these navigation concepts as is appropriate for your site.

Refer to these professional samples of wireframe diagrams as your reference point for how detailed to make them.  Also, look around at similar websites to get ideas from how they structured their own sites.

You can also view other students’ blogs from the Saturday class to see how their wireframes look by viewing their blogs in Google Reader.  Their wireframe assignment was to create wireframes for a restaurant website.

When you have finished the assignment, please save each wireframe as an image file (either JPG, PNG, or GIF file type), and post them to your blog on blogger.com.  The title of your blog post should be “Class 1 – Assignment – Restaurant Wireframes”

New York Cultural Magazine Requirements

Content to include

• Local events
• local businesses (bars, restaurants, movies, hairdresers)
• park listing
• politics
• news
• weather
• sports
• classifieds
• search
• logo
• editorial, opinions
• ads

how do you want to organize the content: (optional)

• by borough

target demographic: (optional)

• young active
• affluent

Your assignment is to convert this wireframe diagram into valid XHTML code:

wireframe for class 2 in-class assignment

As always, start with the bare minimum elements necessary to make an XHTML page, and move forward based on the XHTML common elements example code.

Hint: you will want to use the align attribute of the <img> tag in order to have the image sit next to the paragraph of text.  You should look up the <img> tag reference page on the w3schools.com site for more information.

Your homework for this week is to complete the wireframe diagram assignment we began in class.

Next week, we will begin to convert these diagrams into real web pages written in XHTML, so it is important that you complete your diagrams to your satisfaction, and then go through the following XHTML tutorials prior to next class:

W3Schools.com HTML tutorial

W3Schools.com XHTML tutorial

And please familiarize yourself with the class syllabus.

You should also read at least once through the following information, which we will cover many times over.  It is critical in the understanding of the web and web development:

Basic computer usage concepts

Typical web development cycle

Typical workflow for web development

Loading a web page sends multiple requests to the server

If you are a Mac user, you will want to take a look at the recommended equivalent software for Mac development.

Your assignment in class today is to create a set of wireframe diagrams (between 2 and 3 diagrams, no more) that show how the information on a restaurant’s website should be arranged.

Your client, the restaurant owner, and you have agreed that the site must have the following types of information:

• menu
• address / maps / address
• contact info / contact us
• opening hours
• photos
• party spaces
• events
• services (catering, etc)
• about us / chef bio
• reviews
• reservations
• sister restaurants
• external links (parking, neighborhood, etc)

Working off of the concepts outlined in this post about information architectural navigation elements, as well as using these samples of professional wireframes as a set of references,  you should make sure that all the information on this restaurant site is easy to find and the site itself is interesting and easy to navigate.

When you have finished the assignment, please save each wireframe as an image file (either JPG, PNG, or GIF file type), and post them to your blog on blogger.com.  The title of your blog post should be “Class 1 – Assignment – Restaurant Wireframes”

DEADLINE

• All final projects must be complete by the last day of class.

REQUIREMENTS

• projects must show your mastery of the technologies we have learned in this class: XHTML, CSS, Javascript (using JQuery), PHP, and MySQL.
• projects must be completely information architected before you start programming
• projects must involve at least 3 distinct web pages.
• you are required to present your site to the class on the last day of class
• all filenames must be all lowercase with no spaces or special characters except underscore “_”
• all variable names in PHP and Javascript must be written in lower camelCase.
• all CSS class names and IDs must be written in lowercase, with no special characters except the underscore “_” character.
• final projects must be working and accessible on the web (if it only works on your client machine, it is not a working web site)
• projects must be linked to from your blog.

GRADING

Grades will be based on your ability to exhibit mastery of Information Architecture and Web Development programming techniques.

• Information Architecture (20%)
• Programming (50%)
• Ability to conceptualize and realize a fully-functioning, well thought-out site (30%)

PRESENTATIONS

You will be required to present your work to the class on the last day of class.

Presentations should be no more than 10 minutes.

Here are some suggested questions to answer in your presentation:

You

• what’s your name?
• remind us… what do you do when not in this class?
• did you have any previous design or development experience?
• any previous experience with the web?

Concept

• three sentence description of your site
• why did you decide to build this site?
• who is your intended audience?
• does this site serve a particular need, either personal or business?

Information Architecture

• how many main pages are there, and how are they conceptually related?  In other words, what is the hierarchical structure of the site?  Perhaps show a simple sitemap diagram to help explain.
• what are the main navigation elements people can use to get from one page to another?
• is there a consistent header, footer, or navigation section on every page?
• how does a user know where they are in the hierarchy of your site?  Breadcrumbs?  Highlighted navigation links?  Or is your site so simple a user couldn’t possibly get lost?
• what kind of content are you showing on each page?
• how are the bits of information on each page related to each other (if at all)?
• what is the most important info on each page, and what is the least important info, and how did that affect the layout of the page?

Design

• what were you thinking in terms of design of your site?
• what design techniques did you use to get the pages to look as they do?
• did you borrow any design ideas from other sites?
• are you happy with the design of your site?

Development

• are you using page “templates” in PHP?
• is there anywhere where you are passing data from one page to another?
• is your data stored in a database or hard-coded into the XHTML?
• if using a database, did that make development easier, or more difficult?
• are you using Javascript, JQuery, and any JQuery plugins?
• did you use any AJAX, and if so, where?
• discuss any interesting development challenges you faced in any of these technologies.

The future

• is this site a good representation of what you originally planned?
• what remains to be completed on your site?
• what parts do you think work, and which do you think don’t work?
• do you plan to continue developing this site?
• are you hoping to actually launch it as a real website?
• are you planning to continue with web development?
• what parts of web development interested you most?
• what parts of web development interested you least?
• how has this class reinforced or changed your view of the web?

If you have finished the in-class assignment of creating a message board, you are ready for the advanced assignment.

The advanced assignment is to add the ability for users to upload images along with their message posts.

add_post.php

So when users add new posts, they enter in their name, the title of the post, the body of the post, as well as the image that goes along with the post.

Here’s the updated wireframe for the add_post.php page:

updated add_post.php wireframe

You will want to check out the upload file example on the server here.

You use an <input type=”file” …> tag to allow users to select a file to upload.

Make sure your form has the “enctype” attribute set to “multipart/form-data”.  This indicates to the server that it should expect to be receiving binary data for the file.

process_post.php

When the server receives the data that the user submits along with the HTTP POST request for process_post.php, it has to store the data in the database, as you have already done in the first part of this assignment.

You will want to create a new “image_path” field in your messages table in the database where you will store the path where you uploaded the image.  You can get the path where the image is uploaded by going through the file upload example code linked above.

So when you create the new row in the database table, you will be storing the author, post title, image path, and post body in the database table.

index.php

And when a user views the list of all the messages, if there is an image that has been uploaded along with a particular message, that image shows up next to the message.  If there is no image associated with a post, the layout should adjust accordingly.

Here is the updated index.php wireframe:

updated index.php wireframe

Very advanced assignment

If this was too easy for you, here is a very advanced assignment.  Require the users to register with your site before they can post a message.

Users should be able to view the home page whether they are registered or not.

But only registered users should be able to post a new message.  If a user has not registered, they should be redirected to the index.php page if they try to view the add_post.php or process_post.php pages.

Your assignment this class is to create a message board.  The message board allows users to view all of the messages that have been posted to the board so far.  It also allows users to post new messages.

Here is the user flow of the site:

User flow of message board site

index.php – the message list page

When the user first comes to the site, they see the main page, index.php.  This page shows them a list of all of the messages on the board in reverse chronological order.  The page reads all of the rows of data from the database table and displays them.

This page also has a link to “add a new post”.  When the user clicks that link, she is brought to add_post.php.

index.php wireframe

You will want to use code similar to what is available in the read.php example available on the server here.

Also, you will eventually want to format the dates that you retrieve from the created field of the database table, you will want to read this post about beautifying MySQL timestamps.

add_post.php – the post page

add_post.php consists of a form the user can fill out in order to post a new message.  This form has three fields: the user’s name, the post title, and the post body.  When the user clicks submit, this page makes an HTTP GET request for process_post.php, and passes along the data that the user entered into the form as part of the query string of the URL of the request.

add_post.php wireframe

This page can be a simple XHTML page.  It’s ok to name it add_post.php even if it just has XHTML code inside of it.

process_post.php – the process post page

The process_post.php script receives the data that was passed in the GET request to the server by using the built-in PHP $_GET or $_REQUEST variables, and enters that information as a new row in the database table.

You will want to use code that is similar to the PHP used in the create.php example available on the server here.

This script will then redirect the user back to the main page, index.php.  Check out this example of how to redirect a user from one page to another.  You will be using the built-in header() function in PHP in order to pass a special “Location” HTTP header from the server to the client that instructs it to go make a request for a different page.

For example, this code redirects a user to the nytimes.com website:

header("Location: nytimes.com"); //redirect to another page