Practical PHP and MySQLBuilding Eight Dynamic Web Applications phần 3 pps

In this section, you create a useful page for users to browse the differ-ent categories and see which blog entries have been posted in each category.. FIGURE 4-9 Adding contextual links

TABLE 4-5 The sql variable is built up into an INSERT statement

C ONCATENATED E LEMENT SQL S TATEMENT

INSERT INTO comments(blog_id,

dateposted, name, comment) VALUES(

INSERT INTO comments(blog_id, dateposted, name, comment) VALUES(

dateposted, name, comment) VALUES(2

dateposted, name, comment)

VALUES(2, 2005-08-10 14:30:00, '

dateposted, name, comment)

VALUES(2, 2005-08-10, 'Bob Smith

dateposted, name, comment)

VALUES(2, 2005-08-10, 'Bob Smith','

$_POST['comment'] INSERT INTO comments(blog_id,

dateposted, name, comment) VALUES(2, 2005-08-10, 'Bob Smith',

'I really like your blog Cool stuff!

dateposted, name, comment) VALUES(2, 2005-08-10, 'Bob Smith', 'I really like your blog Cool

stuff!');

The next line is the SQL query This query inserts the data into the databasewith an INSERTstatement A typical INSERTstatement looks like this:

INSERT INTO table(field1, field2)

VALUES ('data for field 1', 'data for field 2');

When you construct the SQL statement in your sqlvariable, you concatenatethe various variables from the form that are accessed with _POST To demonstratehow this fits together, imagine that you are adding a comment to the blog entry with

2 as an ID, at 2:30 p.m on August 10, 2005 Assume that the user types “BobSmith” as the name and “I really like your blog Cool stuff!” as the comment Table4-5 demonstrates how the query is built

The left column lists each part of the code; the right column shows how the tent of the page is built up in the query As you read the table, remember that num-bers don’t need single quotes around them (such as the number in validentry) butstrings (letters and sentences) do.

con-One part of the code that will be new to you is NOW() This is a special MySQLfunction that provides the current date and time, and you will use NOW()to automat-ically fill the datepostedfield

The next line in the code—mysql_query($sql);—performs the actual query.You may have noticed that the line does not include a variable in which to store theresult, such as $result = mysql_query($sql) The reason is that the query is onlysent; no results are returned The final line uses the header()function to redirect tothe current page

Finally, the ifblock is closed, and the elsebegins (for cases when no Submitbutton has been clicked) At the bottom of the page, add the closing code:

In effect, then, the entire page of HTML is shown if the user didn’t reach

viewentry.php via clicking the Submit button (on the form on that same page!).

B UILDING THE C ATEGORY B ROWSER

Within a site powered by Blogtastic, a large number of blog entries is going to build.With so much content available, it is important to have a means of easily browsingthis content In this section, you create a useful page for users to browse the differ-ent categories and see which blog entries have been posted in each category

NOTE

Built-In MySQL Functions

MySQL provides a range of these functions, and you can explore them fromthe comfort of phpMyAdmin When you insert data, a Function drop-downbox lists these different MySQL functions Experiment with them to get abetter idea of what they do

FIGURE 4-7 Click any category to view the entries in that category.

If you think about how this page should be designed, it seems logical to list thecategories and let the user click on one to see any related blog entries (see Figure4-7) This functionality is similar to a tree view in a file manager: The directoriesare listed, and then you click one to see the files and subdirectories

On index.php and viewentry.php, you made the category a link to a page called

viewcat.php, and the ID of the category was passed as an id GET variable To get

started, create a new file called viewcat.php and add the following code:

This code should look familiar; it runs the idvariable through the same

valida-tion tests used on viewentry.php If no variable exists, validcatis set to 0, but if thevariable is indeed legitimate, validcatis set to the contents of the GETvariable Ifthe variable fails the test to check if it is numeric, the page redirects to itself butwithout the idvariable

Select all of the records from the categories table:

echo "<strong>" $row['cat'] "</strong><br />";

$entriessql = "SELECT * FROM entries WHERE cat_id = " $validcat

" ORDER BY dateposted DESC;";

validcat These entries are requested in descending date order, so the most recententry will display at the top of the list The query is then run, and the returned rowsare counted (to ensure that there are records to show) The final line starts theunordered list block that contains the results

Check to see if any rows exist for the current category and display the relevantdetails:

Ifnumrows_entrieshas zero rows, the browser displays a list item with the text

No entries! If there are rows, another while loop is opened to run through theresults Inside this while, a list item that displays the date of the entry and a link to

viewentry.php (using the correct id value) is created The subject of the post is thebody of the link

Finally, you can display the currently unselected categories:

any-Allowing restricted access for the owner to add and remove content is an tial feature, however Having to log into phpMyAdmin to add content is not an idealsolution, so the master plan is to create pages to provide a convenient means ofadding content You need to provide a way for someone to log in, and the login

essen-details the user enters should match the ones in the logins table You will use PHP

sessions (covered in Chapter 2) to track the user by sharing variables across ent pages If the user successfully logs in, you can set a session variable and thencheck to ensure that session variable exists on the restricted pages

differ-To begin, create a new file called login.php and add the login form:

<form action="<?php echo $SCRIPT_NAME ?>" method="post">

This form contains some familiar-looking text boxes (see Figure 4-8)

You may have noticed that the second <input>tag uses passwordas the type.When you use this type of form element, the contents are disguised as stars or dots

to hide the password from nosey onlookers

The next step is to process the form and check if the database contains the logindetails Before you do this, however, add the usual introductory code at the start ofthe file (before any HTML):

FIGURE 4-8 The login form looks like any other form.

NOTE

Forms Feel Insecure, Too

Although forms provide a means for people to securely identify themselves,the passwords transmitted to the server for processing are sent as plaintext This is a potential security risk inherent when using forms The onlysolution to this risk is to encrypt form data with JavaScript when the formbutton is clicked, a technique beyond this project’s scope

Add the code that checks if the Submit button has been clicked (again, from theform you’ve already added):

mysql_select_db($dbdatabase, $db);

if($_POST['submit']) {

Be Consistant When Naming Variables

Naming session variables in uppercase is not mandatory, but it’s usefulbecause this helps them to stand out in your code as different types of variables

$sql = "SELECT * FROM logins WHERE username = '" $_POST['username']

"' AND password = '" $_POST['password'] "';";

$result = mysql_query($sql);

$numrows = mysql_num_rows($result);

The SQL statement is created to check if the username in the logins table is

equal to the username box in the form and if the password field is equal to the

password box in the form The query is then run, and the rows are counted Thenumber of lines returned from the query indicates whether the details typed werecorrect If the details are correct, a single row is returned—no more, no less If norows are returned, the details do not match

Add the following code:

In the case where the login details are valid, a new session is created

When using PHP sessions, you must register your session variables The

session_register()lines create two variables, called USERNAMEandUSERID

The next two lines then use _SESSION(representing the user’s session mation) to use the variables and store information from the SQL query (the

infor-username and the id) in them The final line performs a header redirect to

Include the header.php file and then check to see if there is a GET variable

called error If there is, the error message is displayed to indicate that the usertyped an invalid username or password

At the bottom of the page, after the HTML, add the final bits of code:

}

require("footer.php");

Signing Out the User

With the user now able to log in, you also need to give him the ability to log out—

by destroying the session created on login Create a new file called logout.php and

add the following code:

To log out the user, just use the session_destroy() function to delete all theregistered session variables The session is now destroyed, and the user is no longer

logged in You can then perform a header redirect to index.php.

Adding Session Support to the Application

With the new member login capability, you can supercharge your current pages toreact differently when a member is logged in The session variables created in thelogin page can be checked, and you can add extra options where appropriate

Bolting On Options in the Header File

The first file to edit is header.php In login.php and logout.php, you added sion_start()at the beginning of the page You will use session_start()in most of

ses-your pages, so add it to the top of header.php:

<?php

session_start();

This file already contains a list of links that are available to different parts ofthe site When users are logged in, the Logout link should be visible; if they are notlogged in, the Login link should be visible Add the following code inside the PHP

block under the categories link:

[<a href="viewcat.php">categories</a>]

<?php

if(isset($_SESSION['USERNAME']) == TRUE) {

NOTE

The Life and Death of a Session

When dealing with session-based code, you should always clear out any

sessions when testing your code Apart from creating the logout.php script,

another option is to close the Web browser Sessions will live only for theduration that the browser is open, and when you close the browser (notjust the window), the session is lost

When developing your code, closing your browser when you want to clear asession can be quite frustrating To relieve the pain, use the Web DevelopersToolbar extension that is available for Mozilla Firefox on all platforms.Download it from the Mozilla Extensions Web site at http://extension-room.mozdev.org

FIGURE 4-9 Adding contextual links to administer the blog makes the application easier to use.

echo "[<a href='logout.php'>logout</a>]";

}

else {

echo "[<a href='login.php'>login</a>]";

}

Theisset()function is used to check if the USERNAMEsession variable is set If

it is, the Logout link is displayed; otherwise, the Login link is displayed

Use the same method for adding additional links:

echo "[<a href='addentry.php'>add entry</a>]";

echo "[<a href='addcat.php'>add category</a>]";

}

?>

Adding Links to Update Blog Entries

When using Blogtastic, you will need to edit existing blog entries Instead of just

adding an Edit Blog Entry link to header.php, it is more intuitive to add an Edit link next to blog entry subjects (Later in the project, you will create a file, called upda-

tentry.php, to edit the blog entry.) Using a similar technique of checking if the session

variable exists, add the following code in index.php, after the category and date line:

echo "<i>In <a href='viewcat.php?id=" $row['cat_id'] "'>"

$row['cat'] "</a> - Posted on " date("D jS F Y g.iA",

strtotime($row['dateposted'])) "</i>";

if(isset($_SESSION['USERNAME']) == TRUE) {

echo " [<a href='updateentry.php?id=" $row['id'] "'>edit</a>]";

}

The updateentry.php file is passed an id variable that contains the ID of the

blog entry to edit Copy this same block of code to viewentry.php, after the same line

where the date of the posting is listed The links are displayed in Figure 4-9

Never Assume

It might seem impossible to get to this page without clicking a link, andwouldn’t that imply the user has already logged in? Although this soundslogical, someone could still type the URL directly It’s always better toexplicitly check to ensure the user is logged in, rather than trust other pages

to do that job for you

R OLLING Y OUR O WN C ATEGORIES

Adding blog categories is the next part of the game This page is similar to the pageused to add comments

First, create the form in a new file called addcat.php:

<form action="<?php echo $SCRIPT_NAME ?>" method="post">

With this page available to restricted users only, you need to check if the user

is logged in Do this by checking if one of the session variables exists; if it doesn’t,redirect to another page:

if(isset($_SESSION['USERNAME']) == FALSE) {

header("Location: " $config_basedir);

}

Add the logic for when the user clicks the Submit button:

Within this code, an INSERTquery is created and sent to the database After the

query is run, the browser redirects to the viewcat.php page to view the newly created

C REATING N EW B LOG E NTRIES

So far in Blogtastic, the capability to actually add a blog entry has been

suspi-ciously missing This essential feature requires almost all of the techniques you’veseen so far, hence the delay You are now ready, though, so it’s time to knock out thispage The page behaves in a similar way to previous pages that added content, butthis page also includes a drop-down combo box that is used to select the categoryunder which the entry is filed

Create a new file called addentry.php and start the form:

<h1>Add new entry</h1>

<form action="<?php echo $SCRIPT_NAME ?>" method="post">

<table>

Previously, you added the entire form first, but in this page, the very first formcontrol will be the special drop-down box just discussed:

In terms of making this work in code, the SQL query selects everything from the

categories table A loop iterates through the categories that are returned in the

query Within the while loop, the <option> tags are created, and the id from thequery is added to the valueattribute

Complete the rest of the form:

FIGURE 4-10 Adding new blog posts is simple.

The form is shown in Figure 4-10

Move to the beginning of the file and add the boilerplate introductory code:

Add the logic that actually processes the form:

U PDATE A B LOG E NTRY

The final page is for updating blog entries Earlier, when you added session support

to Blogtastic, you went through some of the pages and added links to edit a

particu-lar blog entry The link to edit blog entries was for a page called updateentry.php,

which is passed an idvariable This ID indicates which record to update

Instead of adding the form first, on this page you will work from the top to thebottom

First, add the boilerplate code:

<?php

session_start();

require("config.php");

query indicates which table to update (UPDATEentries) and then provides a number

of database field = form element sections When the query is complete, another header redirect takes the user to the viewentry.php page with the correct idvariable

If the Submit button has not been clicked, the details of the entry are grabbedfrom MySQL so you can populate the form fields, starting with a query:

at the end of the tag to be selected An example of this in HTML is shown here (this

is not actually in the project code, so don’t add it):

<select name="example">

<option value="1">Option 1</option>

<option value="2" selected>Option 2</option>

<option value="3">Option 3</option>

</select>

To accomplish this, add the following code to your form:

<form action="<?php echo $SCRIPT_NAME "?id=" $validentry; ?>"

<td><input type="text" name="subject"

value="<?php echo $fillrow['subject']; ?>">

</td>

</tr>

<tr>

<td>Body</td>

<td><textarea name="body" rows="10" cols="50">

<?php echo $fillrow['body']; ?></textarea></td>

FIGURE 4-11 Updating blog entries uses a similar interface to adding new entries.

Finally, close elseand insert the footer:

in which the rest of the projects in the book are based upon You learned a number

of skills that will be refined and built upon as you continue though the book This isthe start of an exciting journey, and reading this means that you have completed alarge and important step Stretch your fingers, dust off your keyboard, grab a cup ofsomething hot, and get ready for the next project

Discussion Forums

Discussion forums have become a fundamental part of the Internet Within theseWeb-based message boards, users discuss topics that are cogitated over by a closecommunity of contributors And within these discussion forums, Internet users canbecome part of a wider community Discussion forums offer a compelling and inter-esting challenge to code Features such as creating categories, forums, and topics;replying to messages; registering users; and more are common requirements After you’ve created a blog, writing the code behind a discussion board is a nat-ural progression of your skills because it introduces the idea of two-way communi-cation, as opposed to the relatively one-way perspective offered by a blog As such,this chapter provides an important step in your programming experience—every-one should write some discussion forums at least once!

U NDER THE H OOD

Virtually all discussion forums have a very similar design that involves three mary entities: categories, forums, and topics To explain this structure, take a look

pri-at Figure 5-1

This figure shows a typical phpBB (http://www.phpbb.com/) installation phpBB

is a popular Open Source forums engine that adheres to these common usabilitymethods In the figure, you can see a list of categories (only one—LUGRadio), andthe category has a number of forums (General Discussion, Ideas for the show, Mir-rors, and LUGRadio Live) When you click a forum, the forum topics display, asshown in Figure 5-2

FIGURE 5-1 The front page of a phpBB forum

FIGURE 5-2 The topics list in the General Discussion forum

FIGURE 5-3 A discussion thread

FIGURE 5-4

Discussion forums have a number

of distinctive layers.

This figure displays a list of the threads in the forum A thread is a discussion

that starts with a specific topic The originator of the thread posts a message, andthe subject of the thread is listed in this screen To view the messages in a thread,you click the thread When you click a thread, a page similar to the one shown inFigure 5-3 displays

Forum software has a distinctive set of parts, which combine to create a systemthat makes discussion easy The challenge is to implement your own forum soft-ware Figure 5-4 shows how these different parts relate to each other

B UILDING Y OUR O WN F ORUMS

In this project, you will concentrate on the essential features that should go into cussion forum software, including the ability

dis-■ To display categories, forums, and topics

■ To log in as an administrator

■ For administrators to add categories and forums

■ For administrators to delete categories, forums, and topics

■ For users to post new threads or reply to existing ones

Although hundreds of extra features could go into this project, adding themwould take an entire book in itself In this project, you build a core forums engine,but you can, of course, build additional features into it afterward

B EFORE Y OU B EGIN

This project uses some additional chunks of CSS Copy stylesheet.css to the

new project directory for this project and add the following lines to the end of

border-top: thick solid #eeeeee;

border-bottom: thin solid #cccccc;

}

tr.head {

letter-spacing: 1.5px;

id date topic_id user_id subject body

border-top: thick solid #eeeeee;

border-bottom: thin solid #cccccc;

C REATING THE D ATABASE

Within this project, a variety of tables relate to each other in different ways to storethe different types of content discussed earlier Figure 5-5 shows the databaseinfrastructure you will create

This project contains six important tables:

TABLE NAME WHAT THE TABLE STORES

categories Three different categories.

forums The different forums that are part of the categories.

messages The messages of the discussion thread.

admins Login details for the site administrator.

users Details about the users who can post to the forums.

There is an important relationship among the categories, forums, topics, and

messages tables—each table stores the same id of the table to which it relates For

example, the categories and forums tables are related by storing the id of the

rele-vant category in the cat_idfield in the forums table.

Enforcing Relationships with InnoDB

When you create databases with MySQL, the MyISAM table type stores the data

This non-transactional table engine does not enforce relationships between tables Imagine you have a table, called orders, that has a customer_idfield that stores thesame value as the idfrom the customers table If you delete a record from the cus-

tomers table, it would make sense to delete or update the respective entry in the orders table; otherwise, the relationship would break and the order would reference

a customer who no longer exists

With the default MyISAM table type, the database does not demand that these

potential inaccuracies are resolved, and you can remove the customer and have the

order refer to a non-existent customer With MyISAM, the assumption is that youenforce these relationships in your code

In this project, however, you will use a different type of table: InnoDB This

transaction-safe table can enforce these relationships This not only gives you the

peace of mind that your relationships work, but also you can perform a cascadingdelete, in which you delete one table and all of the related tables are also deleted.Feel the power, my friends

Although it’s a feature of MySQL, InnoDB is normally turned off by default(check with your distribution to verify whether it is in fact turned off) To enable it,

load the my.cnf file (often found in the /etc directory on a Linux machine or inside

the MySQL directory on a Windows machine) and look for skip-innodb Commentout this option out by adding a #symbol:

#skip-innodb

Uncomment the other innodblines so that the code looks something similar tothe following: