Web Dev Intensive

When we set our MySQL tables to have a “created” field of the type TIMESTAMP with the CURRENT_TIMESTAMP option selected, this records the exact date and time that each row is created in the table.

The format that MySQL uses to record this data is “YYYY-MM-DD HH:MM:SS”. However, this is not usually the format that you want to use to display the data on the web page. It’s not so easy to read, and definitely is not how most people think of dates.

In order to convert the MySQL TIMESTAMP to a more user-friendly date format, you want to use PHP’s built-in date() function. However, PHP’s date() function only allows you to change the format of dates that are in Unix Timestamp, which is significantly different from MySQL’s TIMESTAMP format.

So, in order to get PHP’s date() function to work with MySQL’s TIMESTAMP, you first have to convert MySQL’s TIMESTAMP format to Unix Timestamp format. To do that, you use PHP’s strtotime() function.

Here’s the code that does this, from my blog example:

<p>posted <?php echo date("F j, Y, g:ia", strtotime($post['created'])) ?></p>

This displays on the page as, for example, “posted November 8, 2008, 12:19pm”. You can use the date() function to format the date in a wide variety of other formats.

The php.net reference page for the date() function has some easy examples somewhere halfway down  the page.

Here are diagrams that represent the flow of data for today’s in-class assignment.  There are flow diagrams for the Register Process, Login Process, and Image Upload Process.

Registration Process Flow

Image Upload Process Flow

As a side-note, there are a total of nine files you will need to make this work:

1. index.php – the home page that displays all the images
2. upload.php – the form to upload an image
3. process_upload.php – the script that does the image uploading
4. register.php – the form for users to register a new account
5. process_register.php – the script that does the registration
6. login.php – the form for users to log into the site
7. process_login.php the script that does the login
8. users.txt – the text file that holds all the usernames and passwords
9. images.txt – the text file that holds all the image paths, captions, and usernames

The format for the users.txt file should have one line for each user.  Each line is divided into two fields: username,password.  So an example file would look like:

amos,webdev
jack,jpax2009
marjorie,mk19387

And the format for images.txt should have one line for each image.  Each line will have three fields: image path, caption, and username.  For example:

files/image1.jpg,this is the first image,amos
files/image2.jpg,this is the second image,jack
files/image3.jpg,this is the third image,marjorie

Here are the examples that you will find relevant for today’s in-class assignment.  Remember that you will need to download a copy of these files and view them in your text editor in order to see the relevant PHP code:

• Persistent Data Using Forms, Links, and Cookies (you will end up using all of these methods for this assignment)
• Reading/Writing to a Comma-Delimited Text File
• Uploading an Image to the Server
• Working with Multidimensional Arrays
• Redirecting from One Page to Another

Individual web pages are independent, standalone scripts that, by default, run independently of one another.  But often on the web, especially on dynamic sites, you will want data to persist from one page to the next.

For example, when a user enters data into a login form on a page, you would expect the data they entered in the form to be available to the script (usually another file) that processes that form.  Likewise, when a user logs in to a social network site, you would expect that user to stay logged in for all the other pages on the site.  How does it do that if each page runs independently of each other?

Today, we cover three mechanisms available on the web for passing data from one page to another: forms, links, and cookies.  You may see this process of passing data from one page to another referred to as “saving state”, “persistent data”, or “passing data”, regardless of which method is used.

Form data

Forms in XHTML are there for only one reason – to allow a user to enter some data on one page, and to then pass that data to another page.  Form data is passed from one page to the next by attaching the data entered into the form onto the HTTP request for the next page.

This happens using one of the two ways the browser can request a page from a server: HTTP GET or HTTP POST.  You can specify which method to use in the “method” attribute of the “form” XHTML tag.

The GET method passes data onto the query string of the URL specified in the “action” attribute of the “form” tag.

The POST method is similar to GET, but data is passed in a more discrete way that is invisible to the user.

Read more about HTTP GET and POST and passing data with forms.

Click to see an example using the GET method.

Click to see an example using the POST method.

Links

Since the data passed by a form using the GET method is simply tacked onto the end of the next page’s URL, it is possible to simulate a GET form submission using just a simple anchor tag.

Click to view an example of passing data using a link

Cookies

Last, but not least, you can save state between pages using cookies.  Cookies allow data to persist for a customizable period of time until they expire.  They are often used as part of user authentication and site usage tracking.

Here is an example of a page which sets a cookie

And here is a page which reads and outputs that same cookie

Combinations

Sites will often use a combination of the above methodologies.  For example, you may want to pass information from one page to another using a form, and then store that information in a cookie so it is available to all other pages of the site.

Here is an example of passing data with a form and then storing it in a cookie

And this page reads that cookie and shows it to the user