Social Networking for Web Professionals

Document Sample
Social Networking for Web Professionals Powered By Docstoc
					Socio.cc
Social Networking for Web Professionals




Jason Gillyon
Web Design Level 2
jason.gillyon@i7solutions.co.uk                                WEB022
07951 864386                              Designing for Dynamic Content
Socio.cc – Social Networking for Web Professionals                                                                                                  1


Summary
This report discusses the process of building a dynamic web site for a fictional company called
Socio.cc who want to become a social network for web professionals. Topics include dynamic
content concepts, implementation, testing and evaluation.


Contents
Summary ........................................................................................................................................... 1
Contents............................................................................................................................................ 1
1. Introduction .................................................................................................................................. 2
   1.1 Dynamic Content Overview...................................................................................................... 2
   1.2 Proposal .................................................................................................................................. 3
2. Design Process Database Structure ................................................................................................ 4
   2.1 Database Structure .................................................................................................................. 4
   2.2 Data Types ............................................................................................................................... 4
   2.3 Table Definitions ...................................................................................................................... 5
3. Implementing the Database Structure and Data ............................................................................ 7
   3.1 Creating Tables ........................................................................................................................ 7
   3.2 Inserting Data .......................................................................................................................... 8
4. Initial Testing of Database............................................................................................................ 15
   4.1 Retrieving Data ...................................................................................................................... 15
   4.2 Problems with Retrieving Data ............................................................................................... 19
5. Dynamic Web Site Design ............................................................................................................ 20
   5.1 File Structure ......................................................................................................................... 21
   5.2 User Interface Design............................................................................................................. 22
   5.3 Combining HTML & CSS with PHP & MySQL ........................................................................... 29
   5.4 Browser Testing ..................................................................................................................... 31
   5.5 Testing on Various Connection Speeds ................................................................................... 36
6. Conclusion ................................................................................................................................... 37
7. Recommendations ....................................................................................................................... 38
   7.1 Improvements ....................................................................................................................... 38
   7.2 Proposal for a Different Dynamic Web Based System ............................................................. 39
8. Bibliography/ References ............................................................................................................. 40
9. Appendices .................................................................................................................................. 41
   9.1 Research ................................................................................................................................ 41
   9.2 Code Listing ........................................................................................................................... 41

Designing for Dynamic Content                                                                                                 Jason Gillyon
WEB022                                                                                                                   Web Design Level 2
Socio.cc – Social Networking for Web Professionals                                                        2


1. Introduction

1.1 Dynamic Content Overview
A dynamic web site is one which updates itself automatically based on user actions and/or
information retrieved from a database. This makes it possible for developers to create web
applications where users can interact with them by means of forms or other user interface elements.
There are lots of possibilities for different functionality that you can build in to a dynamic web site,
such as: shopping carts, member’s areas, contact forms, site search, message boards, etc.

An example of a dynamic web site is Amazon UK (http://www.amazon.co.uk/) which is an e-
commerce web site. It allows users to explore products via product categories, search tools or
recommendations based on your past purchases. Users can register and purchase products and
view their order status online. When they receive their products, they can return to the web site,
rate the product and leave comments about it on the product page for other users to read to aid
them in their purchase decision process.

This type of functionality is not possible using just client side technologies such as HTML and CSS, so
server side technologies need to be used which process dynamic files (e.g. PHP files) on the server
and output HTML to the browser.

Producing a dynamic web site usually takes advantage of a server side programming language and a
database server. There are many technologies available to produce dynamic web sites such as ASP
and Microsoft SQL Server, ColdFusion, Ruby on Rails. The two technologies that will be used in this
project are PHP and MySQL.

There are many reasons for using PHP and MySQL over the other technologies listed above, these
include:

       They’re free – Both technologies are available for free and are open source which means
        that developers can view the source code and contribute towards each of them by adding
        new features or submitting patches to fix bugs. Technologies such as ASP, Microsoft SQL
        Server and ColdFusion are closed source and quite expensive, e.g. at the time of writing the
        standard edition of ColdFusion cost from £1075.12.
       Frequent updates – Open source applications often have more frequent release cycles than
        commercial software which is important in order to keep them secure to reduce the chance
        of newly discovered vulnerabilities affecting your dynamic web site. For example, ColdFusion
        has minor updates every 6 months or so whereas PHP usually releases minor updates every
        few months.
       Large communities – There are large communities on the internet surrounding both PHP
        and MySQL which means you can get help quickly. If you have a problem with your code, the
        chances are someone else has already had that problem and the answer has been posted
        somewhere so you can just look it up using a search engine. If your question is new, there
        are many web sites where you can ask questions and people will try their best to help you.
        Some popular web sites in the php community are PHP Freaks (http://www.phpfreaks.com/)
        and the SitePoint forums (http://www.sitepoint.com/forums/).



Designing for Dynamic Content                                                            Jason Gillyon
WEB022                                                                              Web Design Level 2
Socio.cc – Social Networking for Web Professionals                                                          3


       Run on many platforms – Both PHP and MySQL run natively on many platforms which
        include, Windows, Mac OS X, Linux and Solaris. This gives you flexibility when choosing your
        operating system, instead of being tied to one platform. For example, Microsoft SQL Server
        only runs on Windows, but can be accessed by technologies running on other platforms.

This project will be developed using Dreamweaver 8 on Windows XP to write the PHP, HTML and CSS
code. The web site will be hosted on a Linux server running Apache, PHP & MySQL.

1.2 Proposal
The main aim of this project is to design and produce a web site which must contain dynamic
content in the form of a list containing 20 entries. The final web site should demonstrate clear
application of web site design principles, information architecture and usability conventions.

For this project, a dynamic web site will be produced for the fictional start-up company: Socio.cc.
Socio.cc wants to become a social network for web professionals and aims to connect them to other
people in the same industry, so they can learn from each other and create business relationships
between them. The web site’s main features will be:

       Home page listing new members and a list of popular skills
       Member registration and log in system
       User editable member profiles with:
            o Descriptions
            o User information
            o Friends list
            o Skills list
            o Method to contact user
       Search facility to search by skills, company or usernames.
       Contact form
       FAQ (Frequently Asked Question) page
       Privacy policy

The first five bullet points will be dynamically driven, whilst the last two will be static pages as they
won’t be updated very often.




Designing for Dynamic Content                                                              Jason Gillyon
WEB022                                                                                Web Design Level 2
Socio.cc – Social Networking for Web Professionals                                                       4


2. Design Process Database Structure

2.1 Database Structure
A MySQL database will be used to store the data for the Socio.cc web site and will contain 3 tables:

    1. users
    2. friends
    3. skills

2.2 Data Types
Data types are used to describe what is going to be in a certain field in the database. There are many
different data types to accommodate various situations. The ones used in this project are discussed
below:

2.2.1 int(n)
The int(n) data type is used for storing integers in the range of -2147483648 to 2147483647. The
number in the brackets is the optional display width and does not constrain the amount of digits it
can store. When used in conjunction with the optional extension attribute zerofill, MySQL adds a
padding of zeros in front of the value up to the display width value. For example, if the data type
was int(6) zerofill and had a value of 67 it would be retrieved as 000067. 1

This data type is commonly used in fields defined as primary keys and usually has the extra attribute
auto_increment to automatically increase the value when a new row is inserted.

2.2.2 varchar(n)
The varchar(n) data type has a range from 0 to 255 characters in length depending on the number
specified in the brackets. It is similar to the char(n) data type, but is different in the way it is stored
and retrieved. When storing and retrieving data using the char(n) data type, if it is less than the
maximum length specified in brackets, it will be right padded with spaces up to the maximum length.
In contrast, the varchar(n) data type is not right padded when it is stored as it is variable length. 2

2.2.3 text
The text data type is used for storing text and has a maximum length of 65,535 characters. This field
is useful for storing large amounts of text, such as the about field in the users table below. 3

2.2.4 datetime
The datetime() data type stores the date and time you specify in the format of YYYY-MM-DD
HH:MM:SS. It has a range from '1000-01-01 00:00:00' to '9999-12-31 23:59:59'.4




1
  http://dev.mysql.com/doc/refman/4.1/en/numeric-types.html
2
  http://dev.mysql.com/doc/refman/4.1/en/char.html
3
  http://dev.mysql.com/doc/refman/4.1/en/blob.html
4
  http://dev.mysql.com/doc/refman/4.1/en/datetime.html

Designing for Dynamic Content                                                              Jason Gillyon
WEB022                                                                                Web Design Level 2
Socio.cc – Social Networking for Web Professionals                                                     5



2.3 Table Definitions
2.3.1 Users Table Structure
The users table stores user account data, such as user name, password, e-mail address, etc.

                                                        Table 2.3.1.1 – Table structure for users table

Field         userID             userName        password                   email                              firstName     lastName          company
Type          int(5)             varchar(15)     varchar(32)                varchar(80)                        varchar(30)   varchar(30)       varchar(30)
Modifiers     not null           not null        not null                   not null                           not null      not null          null
              auto_increment
              primary key()
Example 1     1                  Jason           260339851d337d3f8          jason.gillyon@i7solutions.co.uk    Jason         Gillyon           Jason
                                                 1ef19c6c65a0c83                                                                               Gillyon
Example 2     2                  jwNET           81a6f2cd05f7bd1fda         jwnet@hotmail.co.uk                Jamie         Wright            jwNET Inc.
                                                 bf1c4c5f1e2fda
Notes                                            Password is stored
                                                 as md5 hash


                                                     Table 2.3.1.1 (Cont.) – Table structure for users table

Field             webSite                              location           about             dateTimeCreated     dateTimeUpdated        dateTimeLastLogin
Type              varchar(100)                         varchar(40)        text              datetime            datetime               datetime
Modifiers         null                                 null               not null          not null            Null                   null
Example 1         http://www.jasongillyon.co.uk/       Beverley,          I’m studying      2007-01-11          2007-01-18             2007-01-19
                                                       United             web design.       07:12:32            23:45:00               19:10:59
                                                       Kingdom
Example 2         http://www.jamiewright.net/          Hull/Wakefield     I like web        2007-01-13          2007-01-15             2007-01-17
                                                                          design.           12:15:11            11:19:36               01:02:00
Notes                                                                                       Date/time when      Date/time when         Date/time of last log
                                                                                            account created     account updated        in


Designing for Dynamic Content                                                            Jason Gillyon
WEB022                                                                              Web Design Level 2
Socio.cc – Social Networking for Web Professionals                                                     6




2.3.2 Friends Table Structure
The friends table stores data about the relationships between users.

                                                       Table 2.3.2.1 – Table structure for friends table

Field                           friendsID                       userID                            friendID                     dateTimeAdded
Type                            int(5)                          int(5)                            int(5)                       datetime
Modifiers                       not null                        not null                          not null                     not null
                                auto_increment
                                primary key()
Example 1                       1                               1                                 2                            2007-01-15 16:39:01
Example 2                       2                               2                                 3                            2007-01-16 05:11:48
Notes                                                           User ID of user adding            User ID of friend that the   Date/time when friend
                                                                friend                            user is adding               added



2.3.3 Skills Table Structure
The skills table stores data about the relationships between users.

                                                        Table 2.3.2.1 – Table structure for skills table

Field                           skillID                         userID                            skill                        dateTimeAdded
Type                            int(5)                          int(5)                            varchar(30)                  datetime
Modifiers                       not null                        not null                          not null                     not null
                                auto_increment
                                primary key()
Example 1                       1                               1                                 php                          2007-01-11 00:46:23
Example 2                       2                               1                                 mysql                        2007-01-11 11:34:27
Notes                                                           User ID of user adding skill                                   Date/time when skill added



Designing for Dynamic Content                                                           Jason Gillyon
WEB022                                                                             Web Design Level 2
3. Implementing the Database Structure and Data

3.1 Creating Tables
The tables for this project can be created by running a php file that contains the necessary queries.

First, the variable IN_SITE is defined. This is utilized by any included files to make sure they only run
when they are included in a file, not when accessed directly. The file asssets/inc/global.php is then
included which contains the code to connect to the database.

A SQL query is then written using the table structures previously as a reference. The query is then
run and the result is stored in a variable called $result. If this variable is true, the table was created
successfully, if false then the table hasn’t been created successfully and the reason it failed is
displayed.

This code is then repeated and the SQL query changed for the other tables that need to be created.

                                  Code 3.1.1 – db-setup/create-tables.php

<?php
// include assets/inc/global.php file which includes the database connection code
// the database name, user, pass and host must be specified in the assets/inc/config.php file
define ("IN_SITE", 1);
require_once '../assets/inc/global.php';

// query - create users table
$sql = "CREATE TABLE users (userID int(5) NOT NULL AUTO_INCREMENT,
                   userName varchar(15) NOT NULL,
                   password varchar(32) NOT NULL,
                   email varchar(80) NOT NULL,
                   firstName varchar(30) NOT NULL,
                   lastName varchar(30) NOT NULL,
                   company varchar(30) default NULL,
                   webSite varchar(100) default NULL,
                   location varchar(40) default NULL,
                   about text default NULL,
                   dateTimeCreated datetime NOT NULL,
                   dateTimeUpdated datetime,
                   dateTimeLastLogin datetime,
                   PRIMARY KEY (userID)) TYPE = MYISAM";

// run query
$result = mysql_query($sql);

// check if worked
if ($result) {
           echo "<p>Users table created</p>";
} else {
           echo "<p>Users table NOT created because: ".mysql_error()."</p>";
}

// query - create friends table
$sql = "CREATE TABLE friends (friendsID int(5) NOT NULL AUTO_INCREMENT,
                    userID int(5) NOT NULL,
                    friendID int(5) NOT NULL,
                    dateTimeAdded datetime NOT NULL,
                    PRIMARY KEY (friendsID)) TYPE = MYISAM";

// run query
$result = mysql_query($sql);

// check if worked
if ($result) {
           echo "<p>Friends table created</p>";
Socio.cc – Social Networking for Web Professionals                                                      8


} else {
           echo "<p>Friends table NOT created because: ".mysql_error()."</p>";
}

// query - create skills table
$sql = "CREATE TABLE skills (skillID int(5) NOT NULL AUTO_INCREMENT,
                   userID int(5) NOT NULL,
                   skill varchar(30) NOT NULL,
                   dateTimeAdded datetime NOT NULL,
                   PRIMARY KEY (skillID)) TYPE = MYISAM";

// run query
$result = mysql_query($sql);

// check if worked
if ($result) {
           echo "<p>Skills table created</p>";
} else {
           echo "<p>Skills table NOT created because: ".mysql_error()."</p>";
}
?>

3.2 Inserting Data
There are two different methods of inserting data in the database.

     1. Use the same code as above, but use INSERT queries instead – This can become very
        tedious if inserting large amounts of data and requires a lot of repeat code which increases
        the likelihood of errors.
     2. Use a form to submit data to a script to perform INSERT queries using the data from the
        form – This is useful to insert large amounts of data and can be used by users to input their
        own data.

The method that will be used in this project is the second one as users will be able to input data
specific to them into the database which would not be possible using a hand coded script. An
example is the registration form that has been created which is shown below.

The first part of the code includes the assets/inc/global.php file to connect to the database and also
includes the config and functions include files. A check is made to see if the user is already logged in;
if they are they don’t need to register so they are redirected to the home page.

                                        Code 3.2.1 – register.php (Extract)

<?php
define ("IN_SITE", 1);
require_once 'assets/inc/global.php';

// check if user already logged in
if ($userDetails) {
          // redirect to index page
          header ("Location: index.php");
}




Designing for Dynamic Content                                                             Jason Gillyon
WEB022                                                                               Web Design Level 2
Socio.cc – Social Networking for Web Professionals                                                   9


The next part checks whether the form has been submitted. If it has, the variables are assigned
easier names and the strip_tags() function is used to strip out any html entered in the form.

Magic quotes is a PHP setting. If it is turned on PHP automatically adds slashes to any data entered n
a form. This script uses a different method to escape strings to make them safe for inserting in the
database, so the stripslashes() function is used to remove the slashes magic quotes added if it was
turned on.

The variables are then run through mysql_real_escape_string() function which is specifically
designed to make variables safe for use in a SQL query.

                                      Code 3.2.1 (Cont.) – register.php (Extract)


// check if register form submitted
if ($_POST['fldSubmit']) {

         // assign easier variable names and strip tags
         $fldUserName = strip_tags($_POST['fldUserName']);
         $fldPassword = strip_tags($_POST['fldPassword']);
         $fldPasswordConfirm = strip_tags($_POST['fldPasswordConfirm']);
         $fldEmail = strip_tags($_POST['fldEmail']);
         $fldEmailConfirm = strip_tags($_POST['fldEmailConfirm']);
         $fldFirstName = strip_tags($_POST['fldFirstName']);
         $fldLastName = strip_tags($_POST['fldLastName']);
         $fldCompany = strip_tags($_POST['fldCompany']);
         $fldWebSite = strip_tags($_POST['fldWebSite']);
         $fldLocation = strip_tags($_POST['fldLocation']);
         $fldAbout = strip_tags($_POST['fldAbout']);

         // if magic quotes on, strip slahes
         if (get_magic_quotes_gpc()) {
                   $fldUserName = stripslashes($fldUserName);
                   $fldPassword = stripslashes($fldPassword);
                   $fldPasswordConfirm = stripslashes($fldPasswordConfirm);
                   $fldEmail = stripslashes($fldEmail);
                   $fldEmailConfirm = stripslashes($fldEmailConfirm);
                   $fldFirstName = stripslashes($fldFirstName);
                   $fldLastName = stripslashes($fldLastName);
                   $fldCompany = stripslashes($fldCompany);
                   $fldWebSite = stripslashes($fldWebSite);
                   $fldLocation = stripslashes($fldLocation);
                   $fldAbout = stripslashes($fldAbout);
         }

         // run through mysql_real_escape_string to prevent sql injection
         $fldUserName = mysql_real_escape_string($fldUserName);
         $fldPassword = mysql_real_escape_string($fldPassword);
         $fldPasswordConfirm = mysql_real_escape_string($fldPasswordConfirm);
         $fldEmail = mysql_real_escape_string($fldEmail);
         $fldEmailConfirm = mysql_real_escape_string($fldEmailConfirm);
         $fldFirstName = mysql_real_escape_string($fldFirstName);
         $fldLastName = mysql_real_escape_string($fldLastName);
         $fldCompany = mysql_real_escape_string($fldCompany);
         $fldWebSite = mysql_real_escape_string($fldWebSite);
         $fldLocation = mysql_real_escape_string($fldLocation);
         // use addslashes instead as other messes up line breaks
         $fldAbout = addslashes($fldAbout);




Designing for Dynamic Content                                                            Jason Gillyon
WEB022                                                                              Web Design Level 2
Socio.cc – Social Networking for Web Professionals                                                            10


Once the variables have been made safe, they are checked to make sure that they are of the right
format and the correct length depending on the field. Additional checks are carried out on fields like
user name to ensure that the user name doesn’t already exist.

Both password and e-mail address are asked for twice to confirm that the user enters what they
were expecting. If the values don’t match the user has made a mistake which they are then told
about later on.

                                Code 3.2.1 (Cont.) – register.php (Extract)

         // error checking
                   // username
                            // check not empty
                            if (empty($fldUserName)) {
                                     $messages[] = "User name is required";
                            } else {
                                     // check valid length
                                     if (strlen($fldUserName) < 5 || strlen($fldUserName) > 15) {
                                                $messages[] = "User name must be between 5 and 15 characters";
                                     }
                                     // check if already exists
                                     $sql = "SELECT `userName` FROM `users` WHERE `userName` =
'$fldUserName' LIMIT 1";
                                     $result = mysql_query($sql);
                                     if (mysql_num_rows($result) != 0) {
                                                $messages[] = "User name is already in use by another user.
Please choose another.";
                                     }
                            }

                 // first name
                            // check not empty
                            if (empty($fldFirstName)) {
                                     $messages[] = "First name is required";
                            } else {
                                     // check valid length
                                     if (strlen($fldFirstName) > 30) {
                                                $messages[] = "First name must be less than 30 characters";
                                     }
                            }

                 // last name
                           // check not empty
                           if (empty($fldLastName)) {
                                    $messages[] = "Last name is required";
                           } else {
                                    // check valid length
                                    if (strlen($fldLastName) > 30) {
                                               $emessages[] = "Last name must be less than 30 characters";
                                    }
                           }

                 // password
                          // check not empty
                          if (empty($fldPassword) || empty($fldPasswordConfirm)) {
                                   $messages[] = "Password is required";
                          } else {
                                   // check valid length
                                   if (strlen($fldPassword) < 8 || strlen($fldPassword) > 15) {
                                              $messages[] = "Password must be between 8 and 15 characters";
                                   }
                                   // check passwords match
                                   if ($fldPassword != $fldPasswordConfirm) {
                                              $messages[] = "Passwords must match";

Designing for Dynamic Content                                                                    Jason Gillyon
WEB022                                                                                      Web Design Level 2
Socio.cc – Social Networking for Web Professionals                                                                 11


                                      }
                             }

                  // email
                             // check not empty
                             if (empty($fldEmail) || empty($fldEmailConfirm)) {
                                      $messages[] = "E-mail address is required";
                             } else {
                                      // check valid length
                                      if (strlen($fldEmail) > 80) {
                                                 $messages[] = "E-mail address must be less than 80 characters";
                                      }
                                      // check valid format
                                      if (!eregi("^[A-Z0-9._%-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$", $fldEmail)) {
                                                 $messages[] = "E-mail address must be in valid format e.g.
yourname@hotmail.com";
                                      }
                                      // check emails match
                                      if ($fldEmail != $fldEmailConfirm) {
                                                $messages[] = "E-mail addresses must match";
                                      }
                                      // check if already exists
                                      $sql = "SELECT `email` FROM `users` WHERE `email` = '$fldEmail' LIMIT
1";
                                      $result = mysql_query($sql);
                                      if (mysql_num_rows($result) != 0) {
                                               $messages[] = "E-mail address is already in use by another user.
Please choose another.";
                                      }
                             }

                  // company
                          // check valid length
                          if (strlen($fldCompany) > 30 && !empty($fldCompany)) {
                                     $messages[] = "Company must be less than 30 characters";
                          }

                 // web site
                           // check not empty
                           if (!empty($fldWebSite)) {
                                     // check valid length
                                     if (strlen($fldWebSite) > 100) {
                                                $messages[] = "Web site must be less than 100 characters";
                                     }
                                     // check valid format
                                     // reg exp from: http://regexlib.com/RETester.aspx?regexp_id=37
                                     if (!eregi("((mailto\:|(news|(ht|f)tp(s?))\://){1})", $fldWebSite)) {
                                                $messages[] = "Web site must be in valid format e.g.
http://www.yourdomain.com";
                                     }
                           }

                  // location
                            // check valid length
                            if (strlen($fldLocation) > 40 && !empty($fldLocation)) {
                                       $messages[] = "Location must be less than 40 characters";
                            }

                  // about
                             // check not empty
                             if (empty($fldAbout)) {
                                      $messages[] = "About is required";
                             } else {
                                      // check valid length
                                      if (strlen($fldAbout) > 2000) {
                                                 $messages[] = "About must be less than 2000 characters";
                                      }

Designing for Dynamic Content                                                                     Jason Gillyon
WEB022                                                                                       Web Design Level 2
Socio.cc – Social Networking for Web Professionals                                                            12


                           }



If there are no errors detected, a new variable to store the current time is created and the password
is encrypted using the md5() function for use in the query.

An INSERT query is used to insert the data the user entered into the form. The query is then run and
checked to see if it was successful, if it wasn’t then an error is shown to the user.

If successful, a variable called registered is given a value of 1 which is used later on. An e-mail is then
sent to the user with their log in details. The script then logs the user in automatically after they
have registered.

                                  Code 3.2.1 (Cont.) – register.php (Extract)

        // check to see if any errors
        if (empty($messages)) {
                  // no errors

                 // set date user created
                 $fldDateTimeCreated = date("Y-m-d H:i:s", time());

                 // encrypt password
                 $fldPasswordMD5 = md5($fldPassword);

                     // query - insert user
                     $sql = "INSERT INTO `users` (`userID`, `userName`, `password`, `email`, `firstName`,
`lastName`, `company`, `webSite`, `location`, `about`, `dateTimeCreated`, `dateTimeLastLogin` ) VALUES (NUll,
'$fldUserName', '$fldPasswordMD5', '$fldEmail', '$fldFirstName', '$fldLastName', '$fldCompany', '$fldWebSite',
'$fldLocation', '$fldAbout', '$fldDateTimeCreated', NULL)";

                 // run query
                 $result = mysql_query($sql);

                 // check to see if query ok
                 if ($result) {
                            // set registered to 1, used later on
                            $registered = 1;
                            // send welcome e-mail
                            $search = array("[FirstName]", "[UserName]", "[Password]", "[Site]");
                            $replace = array($fldFirstName, $fldUserName, $fldPassword, $site['baseUrl']);
                            sendEmail($fldEmail, "Welcome to Socio.cc", "register.txt", $search, $replace);
                            // check log in
                            if (checkLogIn($fldUserName, $fldPasswordMD5)) {
                                      // store user name and password in session
                                      $_SESSION['userName'] = $fldUserName;
                                      $_SESSION['password'] = $fldPasswordMD5;
                                      // get user details
                                      $userDetails = getUserDetails($userID);
                            }
                 } else {
                            echo "MySQL Error: ".mysql_error();
                 }
        }
}
?>




Designing for Dynamic Content                                                                    Jason Gillyon
WEB022                                                                                      Web Design Level 2
Socio.cc – Social Networking for Web Professionals                                                             13


The following code is the html output. First, the html, head and body tags are outputted along with
the header from an include file.

The registered variable is then checked to see if it equals 1. If it does a message thanking the user for
registering appears with links to the home page and their profile. If it does not equal 1, then there
was either an error with what the user put in which they are told about using the
displayErrorMessages() function found in assets/inc/functions.php.

Anything the user entered before they submitted the form is retained if there is an error and is
displayed in the form fields with the exception of the password and confirm password field which
they must re-enter for security reasons.

After the form has been displayed, the footer is included and the body and html tags are closed.

                                 Code 3.2.1 (Cont.) – register.php (Extract)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
           <head>
                   <title>Socio.cc &raquo; Register</title>
                   <?php require_once 'assets/inc/meta.php'; ?>
           </head>
           <body id="register">
                   <?php require_once 'assets/inc/header.php'; ?>
                   <?php
                   // check to see if registration complete
                   if ($registered == 1) {
                              ?>
                              <h2>Welcome <?php echo $fldFirstName; ?></h2>
                              <p>You are our newest member.</p>
                              <p>What do you want to do?</p>
                                       <ul>
                                                 <li><a href="index.php">Go to home page</a></li>
                                                 <li><a href="profile.php?id=<?php echo $userID; ?>">View your
profile</a></li>
                                       </ul>
                              <?php
                   } else {
                              ?>
                              <h2>Register</h2>
                              <p>It only takes a minute to register.</p>
                              <?php displayErrorMessages($messages); ?>
                              <form action="<?php $_SERVER['PHP_SELF']; ?>" method="post">
                                       <fieldset>
                                                 <legend>Site Details</legend>
                                                 <p class="errorMessage">
                                                          <label for="fldUserName">User name:</label>
                                                          <input type="text" id="fldUserName" name="fldUserName"
value="<?php echo stripslashes($fldUserName); ?>" maxlength="15" />
                                                 </p>
                                                 <p>
                                                          <label for="fldFirstName">First name:</label>
                                                          <input type="text" id="fldFirstName" name="fldFirstName"
value="<?php echo stripslashes($fldFirstName); ?>" maxlength="30" />
                                                 </p>
                                                 <p>
                                                          <label for="fldLastName">Last name:</label>
                                                          <input type="text" id="fldLastName" name="fldLastName"
value="<?php echo stripslashes($fldLastName); ?>" maxlength="30" />
                                                 </p>
                                       </fieldset>

Designing for Dynamic Content                                                                    Jason Gillyon
WEB022                                                                                      Web Design Level 2
Socio.cc – Social Networking for Web Professionals                                                           14


                                   <fieldset>
                                             <legend>Password</legend>
                                             <p>
                                                        <label for="fldPassword">Password:</label>
                                                        <input type="password" id="fldPassword"
name="fldPassword" maxlength="15" />
                                             </p>
                                             <p>
                                                        <label for="fldPasswordConfirm">Confirm
password:</label>
                                                        <input type="password" id="fldPasswordConfirm"
name="fldPasswordConfirm" maxlength="15" />
                                             </p>
                                   </fieldset>
                                   <fieldset>
                                             <legend>E-mail address</legend>
                                             <p>
                                                        <label for="fldEmail">E-mail address:</label>
                                                        <input type="text" id="fldEmail" name="fldEmail"
value="<?php echo stripslashes($fldEmail); ?>" maxlength="80" />
                                             </p>
                                             <p>
                                                        <label for="fldEmailConfirm">Confirm e-mail
address:</label>
                                                        <input type="text" id="fldEmailConfirm"
name="fldEmailConfirm" value="<?php echo stripslashes($fldEmailConfirm); ?>" maxlength="80" />
                                             </p>
                                   </fieldset>
                                   <fieldset>
                                             <legend>Profile</legend>
                                             <p>
                                                        <label for="fldCompany">Company:</label>
                                                        <input type="text" id="fldCompany" name="fldCompany"
value="<?php echo stripslashes($fldCompany); ?>" maxlength="30" />
                                             </p>
                                             <p>
                                                        <label for="fldWebSite">Web site:</label>
                                                        <input type="text" id="fldWebSite" name="fldWebSite"
value="<?php echo stripslashes($fldWebSite); ?>" maxlength="100" />
                                             </p>
                                             <p>
                                                        <label for="fldLocation">Location:</label>
                                                        <input type="text" id="fldLocation" name="fldLocation"
value="<?php echo stripslashes($fldLocation); ?>" maxlength="40" />
                                             </p>
                                             <p>
                                                        <label for="fldAbout">About:</label>
                                                        <textarea id="fldAbout" name="fldAbout" cols=""
rows=""><?php echo stripslashes($fldAbout); ?></textarea>
                                             </p>
                                   </fieldset>
                                   <p><input type="submit" id="fldSubmit" name="fldSubmit" value="Register"
class="auto" /></p>
                           </form>
                  <?php
                  }
                  require_once 'assets/inc/footer.php';
                  ?>
        </body>
</html>




Designing for Dynamic Content                                                                  Jason Gillyon
WEB022                                                                                    Web Design Level 2
Socio.cc – Social Networking for Web Professionals                                                              15


4. Initial Testing of Database

4.1 Retrieving Data
To make sure that data has been inserted successfully, it is necessary to output it to a page. The
following example is from the search function of the web site which retrieves the search results from
the database.

The search form is relatively simple. It submits the form data to search.php using the get method
which put’s the variables into the query string. There is a drop down menu called type that lists the
type of searches for the user to choose from and a search query box called q along with a search
button. When the user submits the search form, the values are automatically retained in case the
user wants to adjust or refine their query.

                                         Code 4.1.1 – header.php (Extract)

<form action="search.php" method="get">
         <p>
                  <select id="type" name="type" class="auto">
                            <option value="skill"<?php if ($type == "skill") { echo " selected=\"selected\"";
}?>>Skills</option>
                            <option value="company"<?php if ($type == "company") { echo "
selected=\"selected\""; }?>>Company</option>
                            <option value="username"<?php if ($type == "username") { echo "
selected=\"selected\""; }?>>User name</option>
                            <option value="email"<?php if ($type == "email") { echo " selected=\"selected\"";
}?>>E-mail address</option>
                  </select>
                  <input type="text" id="q" name="q" value="<?php echo $q; ?>" class="auto" />
                  <input type="submit" value="Search" class="auto" />
         </p>
</form>

The search.php file starts off in the same way as register.php in that it defines IN_SITE and includes the
necessary files.

Any white space from the search query is trimmed. The q and type variables are given easier names, and then
are then given the same treatment as in register.php to make them safe for use in SQL queries.

If the query box was empty, then type is set to default which later on will make the page display as a member list
instead of search results.
                                         Code 4.1.2 – search.php (Extract)

<?php
define ("IN_SITE", 1);
require_once 'assets/inc/global.php';

// assign easier variable names and trim white space
$q = trim($_GET['q']);
$type = $_GET['type'];

// if magic quotes on, strip slahes
if (get_magic_quotes_gpc()) {
          $q = stripslashes($q);
          $type = stripslashes($type);
}

// run through mysql_real_escape_string to prevent sql injection
$q = mysql_real_escape_string($q);
$type = mysql_real_escape_string($type);

// check to see if $q is empty

Designing for Dynamic Content                                                                     Jason Gillyon
WEB022                                                                                       Web Design Level 2
Socio.cc – Social Networking for Web Professionals                                                      16


if (empty($q)) {
         // set type to default to show all members
         $type = "default";
}



A switch statement is used to change the SQL query depending on the type of search selected.

The username and company cases perform LIKE searches so the user doesn’t have to enter the
exact term from the database. For example, if the user entered Jason, it would match the users
Jason and Jason Gillyon if they existed.

The email case matches the query entered with the e-mail address from the database. The email
case’s main purpose is when users search for specific friends they want to add to their friends list.

The skill case is more complicated in that it uses an INNER JOIN in the query to combine two tables.
The user can enter more than one skill to search by, each separated by spaces. The search query is
then separated using the explode() function to put the skills into an array. A foreach loop goes
through each of the skills, removes everything except numbers and letters and converts them to
lower case. If it’s not the first time the loop has run an OR is added to the query and another LIKE is
added to the query with the current skill. The results are then grouped by userID to make sure that
each user is only listed once on the results page. The HAVING clause is to make sure only the results
that are returned where the skills the user entered matches the skills the user actually has.

The default case selects all rows from the users table and sets memberList to 1 for use later on.

                                  Code 4.1.2 (Cont.) – search.php (Extract)

// get type of search
switch ($type) {
          case "username":
                      $sql = "SELECT * FROM `users` WHERE `username` LIKE '%$q%' ORDER BY `userName`
ASC";
                      break;
          case "company":
                      $sql = "SELECT * FROM `users` WHERE `company` LIKE '%$q%' ORDER BY `userName`
ASC";
                      break;
          case "email":
                      $sql = "SELECT * FROM `users` WHERE `email` = '$q'";
                      break;
          case "skill":
// query - join skills table to users for search on skills
                      $sql = "SELECT *, COUNT(skill) FROM `skills` INNER JOIN `users` ON skills.userID =
users.userID WHERE";
                      // seperate skills from $q into array
                      $items = explode(" ", $q);
                      // count items in array {
                      $itemsCount = count($items);
                      $i = 0;
                      // look through skills in array
                      foreach ($items as $item) {
                                 // strip out everything but letters and numbers and .
                                 // adapted from http://www.thescripts.com/forum/thread2169.html
                                 $item = preg_replace('/[^0-9a-zA-Z]/i','', $item);
                                 // convert to lowercase
                                 $item = strtolower($item);
                                 // if not first item, add OR to query
                                 if ($i != 0) {

Designing for Dynamic Content                                                              Jason Gillyon
WEB022                                                                                Web Design Level 2
Socio.cc – Social Networking for Web Professionals                                                              17


                                     $sql .= " OR";
                           }
                           // append to query
                           $sql .= " skills.skill LIKE '%$item%'";
                           $i++;
                   }
                   // group results by user id and sort by name asc
                   $sql .= " GROUP BY users.userID HAVING COUNT(skill) = '$itemsCount' ORDER BY
`userName` ASC";
                   break;
          default:
                   // if default, show member list
                   $sql = "SELECT * FROM `users` ORDER BY `userName` ASC";
                   // used later on for showing member list instead of search
                   $memberList = 1;
                   break;
}
// run query
$result = mysql_query($sql);
?>



The next part is outputted in the same way the header and beginning html tags was in register.php.

If the memberList variable is set to 1, Member List is displayed in the title and heading. If not,
Search is displayed instead and the number or results returned is displayed. If there were no results
found for the user’s query a message is shown to the user telling them this.

A while loop is then used to loop through the search results. For the optional fields like location, the
script checks to see if they are empty before outputting the label and the value. If the value is empty
it won’t show the label. Dates are formatted using the function formatDate() found in
assets/inc/functions.php. If the user has logged in today, it outputs Today instead of the date.

                                  Code 4.1.2 (Cont.) – search.php (Extract)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
           <head>
                   <title>Socio.cc &raquo; <?php if ($memberList) { echo "Member List"; } else { echo "Search"; }
?></title>
                   <?php require_once 'assets/inc/meta.php'; ?>
           </head>
           <body id="search">
                   <?php require_once("assets/inc/header.php"); ?>
                   <h2><?php if ($memberList) { echo "Member List"; } else { echo "Search"; } ?></h2>
                   <?php
                   // check how many results found
                   if (mysql_num_rows($result) == 0) {
                            echo "<p>No results found</p>";
                   } else {
                            // check to see if not member list
                            if (!$memberList) {
                                      // echo num results, if only one result dont add s on to end of output
                                      if (mysql_num_rows($result) != 1) {
                                                $s = "s";
                                      }
                                      echo "<p>Your search returned " . mysql_num_rows($result) . " result" . $s .
".</p>";
                            }
                            // loop through results
                            while ($row = mysql_fetch_array($result)) {
                                      ?>

Designing for Dynamic Content                                                                     Jason Gillyon
WEB022                                                                                       Web Design Level 2
Socio.cc – Social Networking for Web Professionals                                                                     18


                                   <div class="memberResult">
                                            <div><a href="profile.php?id=<?php echo $row['userID']; ?>"><img
src="<?php echo getUserImg($row['userID']); ?>" alt="<?php echo $row['userName']; ?>" /></a></div>
                                            <h3><a href="profile.php?id=<?php echo $row['userID']; ?>"><?php
echo $row['userName']; ?></a></h3>
                                            <p>
                                                     <strong>Real name:</strong> <?php echo
$row['firstName']; ?> <?php echo $row['lastName']; ?><br />
                                                     <?php if (!empty($row['company'])) { ?>
                                                              <strong>Company:</strong> <?php echo
$row['company']; ?><br />
                                                     <?php } if (!empty($row['location'])) { ?>
                                                              <strong>Location:</strong> <?php echo
$row['location']; ?><br />
                                                     <?php } if (!empty($row['webSite'])) { ?>
                                                              <strong>Web site:</strong> <a href="<?php echo
$row['webSite']; ?>"><?php echo $row['webSite']; ?></a><br />
                                                     <?php } ?>
                                                     <strong>Last logged in:</strong> <?php echo
formatDate($row['dateTimeLastLogIn']); ?><br />



Another query within the while loop is used in order to fetch a list of skills for each user. This query
simply selects all the skills from the skills table which belong to the user. The script checks to see if
there are any rows returned, if not it displays the None entered message.

Another while loop is used to loop through the list of skills. Because a long list of skills can take up a
lot of room on the results page, the number of characters in each skill are added up and added to
the c variable. When this variable reaches a certain number, it displays …which is linked to the users
profile so they can view the rest of the skills and stops outputting any more skills after it.

The page is then finished by including the footer and closing the body and html tags.

                                 Code 4.1.2 (Cont.) – search.php (Extract)

                                                     <strong>Skills:</strong>
                                                     <?php
                                                     // get user id
                                                     $queryUserID = $row['userID'];
                                                     // query - select all skills for specific user from skill table
order by skill name ascending
                                                     $sqlSkill = "SELECT * FROM `skills` WHERE `userID` =
'$queryUserID' ORDER BY `skill` ASC";
                                                     // run query
                                                     $resultSkill = mysql_query($sqlSkill);
                                                     // check to see how many results
                                                     if (mysql_num_rows($resultSkill) == 0) {
                                                               // no results
                                                               echo "<em>None entered</em>";
                                                     } else {
                                                               // set i to 1
                                                               $i = 1;
                                                               // set c to 0
                                                               $c = 0;
                                                               // set stop to 0
                                                               $stop = 0;
                                                               // loop through results and create bulleted list
                                                               while ($rowSkill = mysql_fetch_array($resultSkill))
{
                                                                       $c += strlen($rowSkill['skill']) + 2;
                                                                       if ($c < 90) {
                                                                                 ?><a
href="search.php?q=<?php echo $rowSkill['skill']; ?>&amp;type=skill"><?php echo $rowSkill['skill']; ?></a><?php

Designing for Dynamic Content                                                                       Jason Gillyon
WEB022                                                                                         Web Design Level 2
Socio.cc – Social Networking for Web Professionals                                                           19


                                                                             // check to see if not last result
                                                                             if
(mysql_num_rows($resultSkill) != $i) {
                                                                                        echo ", ";
                                                                              }
                                                                   } elseif ($stop) {
                                                                              // do nothing
                                                                   } else {
                                                                              // else add ...
                                                                              echo "<a
href=\"profile.php?id=".$row['userID']."\">...</a>";
                                                                             // set stop to 1
                                                                             $stop = 1;
                                                                   }
                                                                   // increment id
                                                                   $i++;
                                                               }
                                                        }
                                                        ?>
                                                </p>
                                      </div>
                                      <?php
                             }
                    }
                    require_once 'assets/inc/footer.php'; ?>
          </body>
</html>


4.2 Problems with Retrieving Data
One problem was making the search function work when the user entered multiple skills to search
by. To overcome this the result had to be grouped by userID to make sure that each user was only
listed once in the search results and by using the HAVING clause, along with COUNT(skill) and a
variable which held the count of the number of skills the user entered to make sure that only users
where included which had all the skills searched for.




Designing for Dynamic Content                                                                Jason Gillyon
WEB022                                                                                  Web Design Level 2
Socio.cc – Social Networking for Web Professionals                                                    20


5. Dynamic Web Site Design
All the code for the web site was written specifically for this project apart from a couple of snippets
which have been adapted from various web sites which are acknowledged in the
bibliography/reference and the code listing in the appendices.

The concept of forms and submitting data to php handler scripts has been explained in sections 3.2
Inserting Data and 4.1 Retrieving Data.

An account has been created on the web site for the purpose of user testing. The details for this are:

User name:      JohnSmith

Password:       muffin07

The web site can be found at: http://www.webdesignhull.lincoln.ac.uk/jgillyon/




Designing for Dynamic Content                                                            Jason Gillyon
WEB022                                                                              Web Design Level 2
Socio.cc – Social Networking for Web Professionals                                         21


5.1 File Structure
The file structure of the web site is shown in the figure below:

                                Figure 5.1.1 – File structure of web site




Designing for Dynamic Content                                                    Jason Gillyon
WEB022                                                                      Web Design Level 2
Socio.cc – Social Networking for Web Professionals                                                  22


5.2 User Interface Design
The design of the user interface started with some rough sketches for the three main pages of the
web site: home, member list and view profile. These are shown below.

                                Figure 5.2.1 - Sketch of home page




Designing for Dynamic Content                                                        Jason Gillyon
WEB022                                                                          Web Design Level 2
Socio.cc – Social Networking for Web Professionals                                    23


                                Figure 5.2.2 - Sketch of member list




Designing for Dynamic Content                                               Jason Gillyon
WEB022                                                                 Web Design Level 2
Socio.cc – Social Networking for Web Professionals                                       24


                             Figure 5.2.3 - Sketch of view profile page




Designing for Dynamic Content                                                  Jason Gillyon
WEB022                                                                    Web Design Level 2
Socio.cc – Social Networking for Web Professionals                                                   25


The web site was then developed using plain white pages whilst developing the PHP code so time
could be spent concentrating on the code itself, rather than the presentation which also makes
errors easier to fix at this stage. A screen shot showing the view profile page as a white page is
shown below.

                             Figure 5.2.4 –View profile as a white page




Designing for Dynamic Content                                                          Jason Gillyon
WEB022                                                                            Web Design Level 2
Socio.cc – Social Networking for Web Professionals                                               26


Alongside the development of the white pages, the user interface was being developed using static
html files. Once the white pages were working, outputting the correct data in the necessary format
and processing the forms as they should they were merged with the user interface html files to
create the final look of the web site which is shown in the screen shots below.

After they had been merged together, tweaks were made to both the presentation of the site and
small fixes to the PHP code were made where necessary.

                                Figure 5.2.5 –Final home page design




Designing for Dynamic Content                                                        Jason Gillyon
WEB022                                                                          Web Design Level 2
Socio.cc – Social Networking for Web Professionals                                      27


                                Figure 5.2.6 –Final member list design




Designing for Dynamic Content                                                 Jason Gillyon
WEB022                                                                   Web Design Level 2
Socio.cc – Social Networking for Web Professionals                                       28


                                Figure 5.2.7 –Final view profile design




Designing for Dynamic Content                                                  Jason Gillyon
WEB022                                                                    Web Design Level 2
Socio.cc – Social Networking for Web Professionals                                                         29


5.3 Combining HTML & CSS with PHP & MySQL
The PHP code for the web site was combined with HTML and CSS in order to produce visually
attractive layouts. An example of this is the new members box on the home page which is explained
below.

First, a div is created with a heading using HTML. A PHP tag is then opened and a query is run which
fetches the newest members from the database. A while loop loops through the results. Within this
while loop the PHP tag is closed and only opened again where needed to insert data from the
database query, e.g.

<p><a href="profile.php?id=<?php echo $row['userID']; ?>"><?php echo $row['userName']; ?></a></p>



This makes it easier to code the HTML as it is just written as it normally would be on a static page
and the data from the database query is just inserted were needed.

The code is then finished off with a link to view the member list and a closing div tag.

                                     Code 5.3.1 – index.php (Extract)

<div id="newMembers">
         <h2>Newest members</h2>
         <?php
         // query - select all users from user table
         $sql = "SELECT `userID`, `userName` FROM `users` ORDER BY `dateTimeCreated` DESC LIMIT 0,3";
         // run query
         $result = mysql_query($sql);

        // loop through results
        while ($row = mysql_fetch_array($result)) {
                  ?>
                  <div class="picture">
                           <a href="profile.php?id=<?php echo $row['userID']; ?>"><img src="<?php echo
getUserImg($row['userID']); ?>" alt="<?php echo $row['userName']; ?>" /></a>
                  </div>
                  <p><a href="profile.php?id=<?php echo $row['userID']; ?>"><?php echo $row['userName'];
?></a></p>
                  <?php
        }
        ?>
        <p><a href="search.php">More members</a></p>
</div>



CSS is then used to format the HTML code, which is shown on the next page.

This code floats the new members box to the right of the page, adds a border, margin, width and
aligns the text centrally.

Each profile image is put in its own div called picture which is used to align it centrally, add padding,
margins and a width.

The profile image is then given a 1 pixel border.




Designing for Dynamic Content                                                               Jason Gillyon
WEB022                                                                                 Web Design Level 2
Socio.cc – Social Networking for Web Professionals                                                30


                             Code 5.3.2 – assets/css/main.css (Extract)

        #home #content #newMembers {
               border:1px solid #ccc;
               float:right;
               margin-bottom:0.5em;
               margin-left:0.5em;
               text-align:center;
               width:140px;
        }

                #home #content #newMembers .picture {
                       margin:0 auto;
                       max-height:100px;
                       padding:0;
                       text-align:center;
                       width:100px;
                }

                        #home #content #newMembers .picture img {
                               border:1px solid #F39;
                        }



Further examples can be found in 3.2 Inserting Data and 4.1 Retrieving Data and in the code listing
in the appendices.

There can be problems getting the HTML to display correctly as sometimes it may output something
you weren’t expecting, e.g. a long line of text when you have only accounted for a short line. This
can be easily overcome by change the CSS to fix the problem or using the PHP substr() function to
trim the text to a manageable length.




Designing for Dynamic Content                                                         Jason Gillyon
WEB022                                                                           Web Design Level 2
Socio.cc – Social Networking for Web Professionals                                                    31


5.4 Browser Testing
It is important to test the web site on a variety of different browsers to make sure it displays
correctly for each of them. For this project, the web site will be tested on Internet Explorer 6 and 7,
Firefox, Opera and Safari. The results of these tests are shown below.

As you will see below, the web site displays consistently across all the browsers tested. No
alterations were needed to be made to make this happen. The main reason for this is because the
web site was developed to web standards, specifically XHTML 1.0 Strict and Valid CSS. The web site
was tested throughout the development on Firefox which obeys the web standards much better
than Internet Explorer 6 for example. This makes it more likely to display correctly in a wide range of
web browsers then if it was tested during development on a browser like Internet Explorer 6.

                             Figure 5.4.1 – Testing on Internet Explorer 6




Designing for Dynamic Content                                                            Jason Gillyon
WEB022                                                                              Web Design Level 2
Socio.cc – Social Networking for Web Professionals                                         32


                            Figure 5.4.2 – Testing on Internet Explorer 7




Designing for Dynamic Content                                                    Jason Gillyon
WEB022                                                                      Web Design Level 2
Socio.cc – Social Networking for Web Professionals                                  33


                                 Figure 5.4.3 – Testing on Firefox




Designing for Dynamic Content                                             Jason Gillyon
WEB022                                                               Web Design Level 2
Socio.cc – Social Networking for Web Professionals                                 34


                                  Figure 5.4.4 – Testing on Opera




Designing for Dynamic Content                                            Jason Gillyon
WEB022                                                              Web Design Level 2
Socio.cc – Social Networking for Web Professionals                                  35


                                  Figure 5.4.5 – Testing on Safari




Designing for Dynamic Content                                             Jason Gillyon
WEB022                                                               Web Design Level 2
Socio.cc – Social Networking for Web Professionals                                                    36


5.5 Testing on Various Connection Speeds
The web site has only been tested on a broadband connection due to not having a 56K dial-up
connection available to test it on. However, a speed report was undertaken using an online tool
from http://www.websiteoptimization.com/. The results below show the time it would take to load
the home page at various connection speeds.

               Table 5.5.1 – Home page download times at various connection speeds

Connection Rate                                      Download Time
14.4K                                                46.31 seconds
28.8K                                                23.26 seconds
33.6K                                                19.96 seconds
56K                                                  12.06 seconds
ISDN 128K                                            3.83 seconds
T1 1.44Mbps                                          0.52 seconds


The majority of people who will access the web site will be web professionals who are likely to be on
a broadband connection. The table shows that the web site should load for them in under a second.

For users still on 56K dial-up connections, the table shows it should load for them in just over 10
seconds which is acceptable.




Designing for Dynamic Content                                                            Jason Gillyon
WEB022                                                                              Web Design Level 2
Socio.cc – Social Networking for Web Professionals                                                        37


6. Conclusion
The web site fulfils the original objectives. To recap, the objectives were to have the following
features:

       Home page listing new members and a list of popular skills
       Member registration and log in system
       User editable member profiles with:
            o Descriptions
            o User information
            o Friends list
            o Skills list
            o Method to contact user
       Search facility to search by skills, company or usernames.
       Contact form
       FAQ (Frequently Asked Question) page
       Privacy policy

Although all the objectives have been met, there is a lot of room for improvements which are
discussed in the next section.

The project brief stated that the web site should contain a list of 20 entries from a database.
Although this has not been achieved by the members list that only has 11 entries at the time of
writing, it has been met by the list of skills in the skill cloud on the home page which at the time of
writing lists 20 different skills retrieved from the database.

The end result is a clean, simple and defined web site with lots of different functionality which works
on a variety of web browsers at different connection speeds.




Designing for Dynamic Content                                                             Jason Gillyon
WEB022                                                                               Web Design Level 2
Socio.cc – Social Networking for Web Professionals                                                    38


7. Recommendations

7.1 Improvements
There are many improvements that could be made to the web site. Some of these include:

      Member registration / log in
          o Forgot password form – If a user forgets their password, there is currently no way to
               for them to retrieve it.
          o E-mail validation – E-mail addresses should be validated when a user registers by
               sending them an e-mail with a unique link to activate their account. This ensures
               that the e-mail address they have entered is actually theirs.
      Member profiles
          o Multiple images – Users could create a gallery of images, e.g. screen shots of work
               they have done, etc.
          o Comments – Comments could be displayed on a member’s profile and a form used
               to add a comment for a user.
          o Multiple web sites – Users will often have multiple web sites so there could be a
               feature to add more than the current limit of one. This feature could be further
               expanded by allowing other users to rate each web site.
          o Skill spelling correction – If the user enters a skill that is incorrectly spelled, it should
               be corrected. This could be done by having an additional table with a list of common
               misspellings in order to automatically correct them.
          o Profile images shouldn’t be cached – If the user uploads a new profile image, it
               often will still display the old one on the web site as the old one is cached by the
               user’s browser. Something needs to be added to make sure that profile images
               aren’t cached so users always see the latest one.
      Home page
          o Skill filter on home page – All skills are currently displayed on the home page. If a
               user enters something that is inappropriate, it will be displayed. New skills entered
               should be approved by an administrator before showing up on the home page.
          o Skill cloud scaling – The size of a skill on the home page is 1.0em + the number of
               times a skill is in the database times 0.1em. If lot’s of users (e.g. over 20) had the
               same skill, the skill would be ridiculously large. There needs to be an algorithm to
               automatically change the size that skills are scaled by depending on the maximum
               number of times a skill is entered in the database.
      Miscellaneous
          o Image verification – There should be image verification on the register, contact user
               and contact form to prevent spam bots from signing up and sending e-mails to
               users. This would involve the user entering a series of digits from a security image in
               order to verify that they were a real person.
          o Friendly URLs – mod_rewrite could be used to make URLs more friendly, e.g. instead
               of having profile.php?id=1 the address could be profile/1/jason/.




Designing for Dynamic Content                                                            Jason Gillyon
WEB022                                                                              Web Design Level 2
Socio.cc – Social Networking for Web Professionals                                                      39


7.2 Proposal for a Different Dynamic Web Based System
A different idea that was considered for this project was to build an Amazon UK
(http://www.amazon.co.uk/) price tracker.

It is a little known fact that Amazon UK prices are changed regularly. You will know this if you have
added an item to your basket, then come back a few days later and received a message similar to
the following:

                         Figure 7.2.1 – Amazon UK price changed messages




The messages say that the price has either increased or decreased since you added the item has
changed since you added it to your basket.

If the Amazon UK price tracker was developed, it would allow users enter the address of a product
and an e-mail address. The tracker then would check the price of the item every hour or so and if the
item price decreased the user would receive an e-mail immediately telling them this, along with a
link containing an affiliate id so the user could go to the product page and the tracker would receive
a percentage of the sale. The tracker would also create historical charts of what the price has been
along with the maximum and minimum price it has been.

This would have been an interesting project to work on, but due to the terms of the free Amazon UK
API, it wasn’t feasible.




Designing for Dynamic Content                                                           Jason Gillyon
WEB022                                                                             Web Design Level 2
Socio.cc – Social Networking for Web Professionals                                                40


8. Bibliography/ References
A variety of web sites were used for reference and to aid in testing. These are listed below in
categories below.

       Code snippets
            o New-Window Links in a Standards-Compliant World
                    http://www.sitepoint.com/article/standards-compliant-world
            o Create Thumbnails with PHP
                    http://www.999tutorials.com/tutorial-create-thumbnail-with-php.html
            o Stripping Data using Regular Expressions
                    http://www.thescripts.com/forum/thread2169.html
       Testing
            o W3C Mark-up Validation Service
                    http://validator.w3.org/
            o W3C CSS Validation Service
                    http://jigsaw.w3.org/css-validator/
            o Web Page Speed Report
                    http://www.websiteoptimization.com/
       Content
            o Privacy Policy
                    http://www.businesslink.gov.uk/bdotg/action/detail?type=RESOURCES&ite
                      mId=1076142085




Designing for Dynamic Content                                                           Jason Gillyon
WEB022                                                                             Web Design Level 2
Socio.cc – Social Networking for Web Professionals                                                     41


9. Appendices

9.1 Research
The following web sites were explored in order to generate ideas for the features that could be
added to the web site:

        MySpace (http://www.myspace.com/) – Probably the largest social network on the internet.
         Has lot’s of different features ranging from picture galleries to instant messaging. Some
         things that were taken from the web site were the friends list and the comments feature,
         although limited to just sending comments and not displaying them on Socio.cc
        5oup (http://www.5oup.net/) - An online community for student artists. Lot’s of interesting
         things happening on the web site such as forums and showcases. The list of new profiles is
         nice on the home page, so Socio.cc has a new members list on its home page too.
        Flickr (http://www.flickr.com/) – Primarily a photo sharing site, but also has some
         community features like comments and groups. The one feature which was incorporated
         into the Socio.cc web site was a tag cloud as seen at http://www.flickr.com/photos/tags/.

9.2 Code Listing
9.2.1 .htaccess
Disables directory indexes, turns register globals on, turns off session ids in the query string and
makes sure that the address in the address bar always contains the www.

# disable directory listings
Options -Indexes

# turn off register globals
php_value register_globals 0;

# disable trans_sid
php_flag session.use_trans_sid 0

# make sure www is in address, if not redirect to it
RewriteEngine On
RewriteCond %{HTTP_HOST} ^webdesignhull\.lincoln\.ac\.uk$ [NC]
RewriteRule ^(.*)$ http://www.webdesignhull.lincoln.ac.uk/jgillyon/$1 [R=301,L]

9.2.2 contact.php
Contains a simple form that allows users to contact the site owner.

<?php
define ("IN_SITE", 1);
require_once 'assets/inc/global.php';
?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
           <head>
                   <title>Socio.cc &raquo; Contact</title>
                   <?php require_once 'assets/inc/meta.php'; ?>
           </head>
           <body id="contact">
                   <?php require_once 'assets/inc/header.php'; ?>
                   <h2>Contact</h2>
                   <p>Send us a message using the form below.</p>
                   <?php
                   // check if mail form submitted
                   if ($_POST) {

Designing for Dynamic Content                                                             Jason Gillyon
WEB022                                                                               Web Design Level 2
Socio.cc – Social Networking for Web Professionals                                                             42


                           // assign easier variable names
                           $fldName = trim($_POST['fldName']);
                           $fldEmail = trim($_POST['fldEmail']);
                           $fldSubject = trim($_POST['fldSubject']);
                           $fldMessage = trim($_POST['fldMessage']);

                           // if magic quotes on, strip slahes
                           if (get_magic_quotes_gpc()) {
                                     $fldName = stripslashes($fldName);
                                     $fldEmail = stripslashes($fldEmail);
                                     $fldSubject = stripslashes($fldSubject);
                                     $fldMessage = stripslashes($fldMessage);
                           }

                           // error checking
                                     // name
                                               // check not empty
                                               if (empty($fldName)) {
                                                        $messages[] = "Name is required";
                                               }
                                    // email
                                               // check not empty
                                               if (empty($fldEmail)) {
                                                        $messages[] = "E-mail address is required";
                                               } else {
                                                        // check valid length
                                                        if (strlen($fldEmail) > 80) {
                                                                   $messages[] = "E-mail address must be less than
80 characters";
                                                       }
                                                       // check valid format
                                                       if (!eregi("^[A-Z0-9._%-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$",
$fldEmail)) {
                                                                $messages[] = "E-mail address must be in valid
format e.g. yourname@hotmail.com";
                                                          }
                                                 }
                                      // subject
                                                 // check not empty
                                                 if (empty($fldSubject)) {
                                                          $messages[] = "Both subject and message are required";
                                                 }
                                      // message
                                                 // check not empty
                                                 if (empty($fldMessage)) {
                                                          $messages[] = "Message is required";
                                                 }
                            // check to see if any errors
                            if (empty($messages)) {
                                      // no errors
                                      // send e-mail
                                      $search = array("[Name]", "[Email]", "[Subject]", "[Message]");
                                      $replace = array($fldName, $fldEmail, $fldSubject, $fldMessage);
                                      sendEmail($site['emailAdmin'], "Message from Socio.cc: ".$fldSubject,
"contact.txt", $search, $replace);
                                      // clear form variables
                                      $fldName = "";
                                      $fldEmail = "";
                                      $fldSubject = "";
                                      $fldMessage = "";
                                      // set sent, used later
                                      $sent = 1;
                            }
                   }
                   ?>
                   <form action="<?php echo $_SERVER['REQUEST_URI']; ?>" method="post">
                            <fieldset>

Designing for Dynamic Content                                                                     Jason Gillyon
WEB022                                                                                       Web Design Level 2
Socio.cc – Social Networking for Web Professionals                                                           43


                                    <legend>Contact</legend>
                                    <?php
                                    displayErrorMessages($messages);
                                    if ($sent == 1) {
                                              echo "<p><em>Message sent</em></p>";
                                    }
                                    ?>
                                    <p><label for="fldName">Name:</label><input type="text" name="fldName"
id="fldName" value="<?php echo $fldName; ?>" /></p>
                                    <p><label for="fldEmail">E-mail address:</label><input type="text"
name="fldEmail" id="fldEmail" value="<?php echo $fldEmail; ?>" /></p>
                                    <p><label for="fldSubject">Subject:</label><input type="text"
name="fldSubject" id="fldSubject" value="<?php echo $fldSubject; ?>" /></p>
                                    <p><label for="fldMessage">Message:</label><textarea name="fldMessage"
id="fldMessage" cols="" rows=""><?php echo $fldMessage; ?></textarea></p>
                                    <p><input type="submit" value="Send" name="fldSubmit" id="fldSubmit"
class="auto" /></p>
                          </fieldset>
                  </form>
                  <?php require_once 'assets/inc/footer.php'; ?>
         </body>
</html>

9.2.3 edit-friends.php
Contains the code to add and delete friends. This file can’t be accessed directly. It needs to be
passed a variable in the query string for it to work, else it will re-direct to the home page.

<?php
define ("IN_SITE", 1);
require_once 'assets/inc/global.php';

// check if user logged in
if (!$userDetails) {
          // if not, redirect to index page
          header ("Location: index.php");
}

// check if friend id is in query string and is numeric and is not self
if (is_numeric($_REQUEST['add']) && $_REQUEST['add'] != $userID) {

         // assign easier variable names and trim
         $friendID = trim($_REQUEST['add']);

         // query - check to see if friend actually exists
         $sql = "SELECT * FROM `users` WHERE `userID` = '$friendID' LIMIT 1";

         // run query
         $result = mysql_query($sql);

         // if 1 result, friend actually exists, continue
         if (mysql_num_rows($result) == 1) {

                   // query - check to see if friend already exists for user
                   $sql = "SELECT * FROM `friends` WHERE `userID` = '$userID' AND `friendID` = '$friendID'
LIMIT 1";

                   // run query
                   $result = mysql_query($sql);

                   // if 0 results, add new friend
                   if (mysql_num_rows($result) == 0) {
                              // set date friend added
                              $dateTimeAdded = date("Y-m-d H:i:s", time());

                             // query - add new friend for specific user
                             $sql = "INSERT INTO `friends` (`userID`, `friendID`, `dateTimeAdded`) VALUES

Designing for Dynamic Content                                                                  Jason Gillyon
WEB022                                                                                    Web Design Level 2
Socio.cc – Social Networking for Web Professionals                                                                     44


('$userID', '$friendID', '$dateTimeAdded')";

                             // run query
                             $result = mysql_query($sql);

                             // set added, used later on
                             $added = 1;

                             // query - check to see if friend has added user to their list
                             $sql = "SELECT * FROM `friends` WHERE `userID` = '$friendID' AND `friendID` =
'$userID' LIMIT 1";

                             // run query
                             $result = mysql_query($sql);

                             // check rows returned, if 0
                             if (mysql_num_rows($result) == 0) {
                                       // query - select email of friend
                                       $sql = "SELECT `firstName`, `email` FROM `users` WHERE `userID` =
'$friendID' LIMIT 1";

                                       // run query
                                       $result = mysql_query($sql);

                                        // send e-mail to invite other user to add to friends
                                        $search = array("[FirstName]", "[UserName]", "[UserID]", "[Site]");
                                        $replace = array(mysql_result($result, 0, "firstName"),
$userDetails['userName'], $userID, $site['baseUrl']);
                                        sendEmail(mysql_result($result, 0, "email"), $userDetails['userName']." has
added you to their friends list", "friends.txt", $search, $replace);
                             } else {
                                        // query - select email of friend
                                        $sql = "SELECT `firstName`, `email` FROM `users` WHERE `userID` =
'$friendID' LIMIT 1";

                                       // run query
                                       $result = mysql_query($sql);

                                             // send e-mail telling user has added them
                                             $search = array("[FirstName]", "[UserName]", "[UserID]", "[Site]");
                                             $replace = array(mysql_result($result, 0, "firstName"),
$userDetails['userName'], $userID, $site['baseUrl']);
                                             sendEmail(mysql_result($result, 0, "email"), $userDetails['userName']." has
added you to their friends list", "mutual-friends.txt", $search, $replace);
                                 }
                     } else {
                                 // if not, redirect to index page
                                 header ("Location: index.php");
                     }
           } else {
                     // if not, redirect to index page
                     header ("Location: index.php");
           }
} elseif (is_numeric($_REQUEST['del']) && $_REQUEST['del'] != $userID) {
// check if friend id is in query string and is numeric and is not self

         // assign easier variable names and trim
         $friendID = trim($_REQUEST['del']);

         // query - check to see if friend actually exists
         $sql = "DELETE FROM `friends` WHERE `userID` = '$userID' AND `friendID` = '$friendID' LIMIT 1";

         // run query
         $result = mysql_query($sql);

         // set deleted, used later
         $deleted = 1;

Designing for Dynamic Content                                                                          Jason Gillyon
WEB022                                                                                            Web Design Level 2
Socio.cc – Social Networking for Web Professionals                                                                        45


} else {
           // if not, redirect to index page
           header ("Location: index.php");
}


// check if register form submitted
if ($_POST['fldSubmit']) {

           // delete skills
                     // query - select all skills for specific user from skill table order by skill name ascending
                     $sql = "SELECT * FROM `skills` WHERE `userID` = '$userID' ORDER BY `skill` ASC";
                     // run query
                     $result = mysql_query($sql);

                     // loop through results and create bulleted list
                     while ($row = @mysql_fetch_array($result)) {
                               $skill = $row['skill'];
                               $fldDeleteSkill[$skill] = $_POST['fldDeleteSkill'][$skill];

                              // if magic quotes on, strip slahes
                              if (get_magic_quotes_gpc()) {
                                        $fldDeleteSkill[$skill] = stripslashes($fldDeleteSkill[$skill]);
                              }

                              // run through mysql_real_escape_string to prevent sql injection
                              $fldDeleteSkill[$skill] = mysql_real_escape_string($fldDeleteSkill[$skill]);

                              // check to see if skill was selected for deletion
                              if ($fldDeleteSkill[$skill] == "delete") {
                                        // query - select all skills for specific user from skill table order by skill name
ascending
                                        $sql = "DELETE FROM `skills` WHERE `userID` = '$userID' AND `skill` =
'$skill' LIMIT 1";
                                        // run query
                                        $result = mysql_query($sql);
                              }
                     }

                   $updated = 1;
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
           <head>
                   <title>Socio.cc &raquo; Edit Friends</title>
                   <?php require_once 'assets/inc/meta.php'; ?>
           </head>
           <body id="editSkills">
                   <?php require_once 'assets/inc/header.php'; ?>
                   <?php
                   // check to see if update complete
                   if ($added == 1) {
                              ?>
                              <h2>Thank you <?php echo $fldFirstName; ?></h2>
                              <p>You have successfully added a new friend.</p>
                              <p>What do you want to do?</p>
                              <ul>
                                       <li><a href="index.php">Go to home page</a></li>
                                       <li><a href="profile.php?id=<?php echo $userID; ?>">View your
profile</a></li>
                              </ul>
                              <?php
                   // check to see if update complete
                   } elseif ($deleted == 1) {
                              ?>

Designing for Dynamic Content                                                                             Jason Gillyon
WEB022                                                                                               Web Design Level 2
Socio.cc – Social Networking for Web Professionals                                                             46


                             <h2>Thank you <?php echo $fldFirstName; ?></h2>
                             <p>You have successfully deleted a friend.</p>
                             <p>What do you want to do?</p>
                             <ul>
                                    <li><a href="index.php">Go to home page</a></li>
                                    <li><a href="profile.php?id=<?php echo $userID; ?>">View your
profile</a></li>
                                       <li><a href="edit-profile.php">Edit your profile</a></li>
                                       <li><a href="edit-profile-image.php">Edit your profile image</a></li>
                             </ul>
                             <?php
                    }
                    require_once 'assets/inc/footer.php';
                    ?>
          </body>
</html>

9.2.4 edit-profile-image.php
Allows the user to upload a profile image. It performs checks on the file type and image size. If there
are no errors it will resize the image using a function in assets/inc/functions.php.

<?php
define ("IN_SITE", 1);
require_once 'assets/inc/global.php';

// check if user logged in
if (!$userDetails) {
          // if not, redirect to index page
          header ("Location: index.php");
}

// check if form submitted
if ($_POST) {

          // assign easier variable names
          $fldLogo = $_FILES['fldLogo'];

          // get file extension
          $ext_array = explode( "." , $fldLogo['name'] );
          $ex = $ext_array[count($ext_array) - 1];
          $ex = strtolower($ex);

          // check file type
          $allowedExtensions = array("jpg", "gif", "png");
          if(!in_array($ex,$allowedExtensions)) {
                     $messages[] = "Invalid file type. Must be .gif, .jpg or .png";
          }

          // check file size
          if ($fldLogo['size'] > $logo['maxSize']*1024){
                    $messages[] = "Image too large. Must be less than ".$logo['maxSize']."kb";
          }

          // check for errors
          if ($messages) {
                    // delete tmp file
                    @unlink($fldLogo['tmp_name']);
          } else {
                    // no errors
                    // set destination for tmp file
                    $logoTmp = "assets/img/tmp/".$userID.".".$ex;

                    // move file to img/tmp/ and rename to userID.ext
                    move_uploaded_file($fldLogo['tmp_name'], $logoTmp);

                    // resize logo

Designing for Dynamic Content                                                                      Jason Gillyon
WEB022                                                                                        Web Design Level 2
Socio.cc – Social Networking for Web Professionals                                                              47


                  processLogo($logoTmp, $ex, 100, 100, "", $userID);
                  // create smaller version of logo
                  processLogo($logoTmp, $ex, 60, 60, "-sml", $userID);

                  // delete tmp file
                  unlink($logoTmp);

                  // set a variabel so can tell script later on updated ok
                  $updated = 1;
         }
}

?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
           <head>
                   <title>Socio.cc &raquo; Edit Profile Image</title>
                   <?php require_once 'assets/inc/meta.php'; ?>
           </head>
           <body id="editProfileImage">
                   <?php require_once 'assets/inc/header.php'; ?>
                   <?php
                   // check to see if update complete
                   if ($updated == 1) {
                             ?>
                             <h2>Thank you <?php echo $userDetails['firstName']; ?></h2>
                             <p>You have successfully edited your profile image.</p>
                             <p>What do you want to do?</p>
                             <ul>
                                       <li><a href="index.php">Go to home page</a></li>
                                       <li><a href="profile.php?id=<?php echo $userID; ?>">View your
profile</a></li>
                                       <li><a href="edit-profile.php">Edit your profile</a></li>
                                       <li><a href="edit-skills.php">Edit your skills</a></li>
                             </ul>
                             <?php
                   } else {
                             ?>
                             <h2>Edit Profile Image</h2>
                             <p>Use the form below to upload your own profile image.</p>
                             <p>The following file types are accepted:</p>
                             <ul>
                                       <li>.gif</li>
                                       <li>.jpg</li>
                                       <li>.png</li>
                             </ul>
                             <p>The maximum file size of an uploaded image is <?php echo $logo['maxSize'];
?>kb. Please be patient if uploading large files as it can take a few minutes, depending on the file size.</p>
                             <p>Animated gifs are not supported and will only show the first frame of the animation
if uploaded.</p>
                             <?php displayErrorMessages($messages); ?>
                             <form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>"
enctype="multipart/form-data">
                                       <fieldset>
                                                  <legend>Upload Logo</legend>
                                                  <p>
                                                           <label for="fldLogo">Upload logo:</label>
                                                           <input type="file" id="fldLogo" name="fldLogo"
class="auto" />
                                                           <input type="hidden" name="MAX_FILE_SIZE"
value="<?php echo $max_size; ?>" />
                                                  </p>
                                       </fieldset>
                                       <p>
                                                  <input type="submit" value="Upload Logo" class="auto"/>
                                       </p>

Designing for Dynamic Content                                                                     Jason Gillyon
WEB022                                                                                       Web Design Level 2
Socio.cc – Social Networking for Web Professionals                                              48


                             </form>
                             <?php
                    }
                    require_once 'assets/inc/footer.php'; ?>
          </body>
</html>

9.2.5 edit-profile.php
Allows the user to update their profile, change their e-mail address and password.

<?php
define ("IN_SITE", 1);
require_once 'assets/inc/global.php';

// check if user logged in
if (!$userDetails) {
          // if not, redirect to index page
          header ("Location: index.php");
}

// check if register form submitted
if ($_POST['fldSubmit']) {

          // assign easier variable names and strip tags
          $fldUserName = strip_tags($_POST['fldUserName']);
          $fldPassword = strip_tags($_POST['fldPassword']);
          $fldPasswordConfirm = strip_tags($_POST['fldPasswordConfirm']);
          $fldEmail = strip_tags($_POST['fldEmail']);
          $fldEmailConfirm = strip_tags($_POST['fldEmailConfirm']);
          $fldFirstName = strip_tags($_POST['fldFirstName']);
          $fldLastName = strip_tags($_POST['fldLastName']);
          $fldCompany = strip_tags($_POST['fldCompany']);
          $fldWebSite = strip_tags($_POST['fldWebSite']);
          $fldLocation = strip_tags($_POST['fldLocation']);
          $fldAbout = strip_tags($_POST['fldAbout']);

          // if magic quotes on, strip slahes
          if (get_magic_quotes_gpc()) {
                    $fldUserName = stripslashes($fldUserName);
                    $fldPassword = stripslashes($fldPassword);
                    $fldPasswordConfirm = stripslashes($fldPasswordConfirm);
                    $fldEmail = stripslashes($fldEmail);
                    $fldEmailConfirm = stripslashes($fldEmailConfirm);
                    $fldFirstName = stripslashes($fldFirstName);
                    $fldLastName = stripslashes($fldLastName);
                    $fldCompany = stripslashes($fldCompany);
                    $fldWebSite = stripslashes($fldWebSite);
                    $fldLocation = stripslashes($fldLocation);
                    $fldAbout = stripslashes($fldAbout);
          }

          // run through mysql_real_escape_string to prevent sql injection
          $fldUserName = mysql_real_escape_string($fldUserName);
          $fldPassword = mysql_real_escape_string($fldPassword);
          $fldPasswordConfirm = mysql_real_escape_string($fldPasswordConfirm);
          $fldEmail = mysql_real_escape_string($fldEmail);
          $fldEmailConfirm = mysql_real_escape_string($fldEmailConfirm);
          $fldFirstName = mysql_real_escape_string($fldFirstName);
          $fldLastName = mysql_real_escape_string($fldLastName);
          $fldCompany = mysql_real_escape_string($fldCompany);
          $fldWebSite = mysql_real_escape_string($fldWebSite);
          $fldLocation = mysql_real_escape_string($fldLocation);
          // use addslashes instead as other messes up line breaks
          $fldAbout = addslashes($fldAbout);

          // error checking
                    // first name
Designing for Dynamic Content                                                         Jason Gillyon
WEB022                                                                           Web Design Level 2
Socio.cc – Social Networking for Web Professionals                                                                 49


                             // check not empty
                             if (empty($fldFirstName)) {
                                      $messages[] = "First name is required";
                             } else {
                                      // check valid length
                                      if (strlen($fldFirstName) > 30) {
                                                 $messages[] = "First name must be less than 30 characters";
                                      }
                             }

                  // last name
                            // check not empty
                            if (empty($fldLastName)) {
                                     $messages[] = "Last name is required";
                            } else {
                                     // check valid length
                                     if (strlen($fldLastName) > 30) {
                                                $emessages[] = "Last name must be less than 30 characters";
                                     }
                            }

                   // password
                             // check to see if needs updating
                             if (!empty($fldPasswordCurrent) || !empty($fldPassword) ||
!empty($fldPasswordConfirm)) {
                                       // check not empty
                                       if (empty($fldPasswordCurrent) || empty($fldPassword) ||
empty($fldPasswordConfirm)) {
                                                 $messages[] = "Current password, password and confirm password
are required if you wish to change it";
                                       } else {
                                       // check if already exists
                                                 // check current password valid
                                                            // encrypt current password
                                                            $fldPasswordCurrentMD5 = md5($fldPasswordCurrent);
                                                            $sql = "SELECT `userName` FROM `users` WHERE
`userId` = '$userID' AND `password` = '$fldPasswordCurrentMD5' LIMIT 1";
                                                            $result = mysql_query($sql);
                                                            if (mysql_num_rows($result) == 0) {
                                                                      $messages[] = "Current password is not correct";
                                                            }
                                                 // check valid length
                                                 if (strlen($fldPassword) < 8 || strlen($fldPassword) > 15) {
                                                            $messages[] = "Password must be between 8 and 15
characters";
                                                 }
                                                 // check passwords match
                                                 if ($fldPassword != $fldPasswordConfirm) {
                                                            $messages[] = "Passwords must match";
                                                 }
                                       }
                             }

                  // email
                            // check to see if needs updating
                            if (!empty($fldEmail) || !empty($fldEmailConfirm)) {
                                      // check not empty
                                      if (empty($fldEmail) || empty($fldEmailConfirm)) {
                                                $messages[] = "E-mail addresss and confirm e-mail address is
required if you wish to change it";
                                      } else {
                                                // check valid length
                                                if (strlen($fldEmail) > 80) {
                                                           $messages[] = "E-mail address must be less than 80
characters";
                                                }
                                                // check valid format

Designing for Dynamic Content                                                                       Jason Gillyon
WEB022                                                                                         Web Design Level 2
Socio.cc – Social Networking for Web Professionals                                                              50


                                              if (!eregi("^[A-Z0-9._%-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$", $fldEmail)) {
                                                         $messages[] = "E-mail address must be in valid format e.g.
yourname@hotmail.com";
                                              }
                                              // check emails match
                                              if ($fldEmail != $fldEmailConfirm) {
                                                        $messages[] = "E-mail addresses must match";
                                              }
                                              // check if already exists
                                              $sql = "SELECT `email` FROM `users` WHERE `email` = '$fldEmail'
LIMIT 1";
                                              $result = mysql_query($sql);
                                              if (mysql_num_rows($result) != 0) {
                                                       $messages[] = "E-mail address is already in use by
another user. Please choose another.";
                                              }
                                     }
                             }

                  // company
                          // check valid length
                          if (strlen($fldCompany) > 30 && !empty($fldCompany)) {
                                     $messages[] = "Company must be less than 30 characters";
                          }

                 // web site
                           // check not empty
                           if (!empty($fldWebSite)) {
                                     // check valid length
                                     if (strlen($fldWebSite) > 100) {
                                                $messages[] = "Web site must be less than 100 characters";
                                     }
                                     // check valid format
                                     // reg exp from: http://regexlib.com/RETester.aspx?regexp_id=37
                                     if (!eregi("((mailto\:|(news|(ht|f)tp(s?))\://){1})", $fldWebSite)) {
                                                $messages[] = "Web site must be in valid format e.g.
http://www.yourdomain.com";
                                     }
                           }

                  // location
                            // check valid length
                            if (strlen($fldLocation) > 40 && !empty($fldLocation)) {
                                       $messages[] = "Location must be less than 40 characters";
                            }

                  // about
                             // check not empty
                             if (empty($fldAbout)) {
                                      $messages[] = "About is required";
                             } else {
                                      // check valid length
                                      if (strlen($fldAbout) > 2000) {
                                                 $messages[] = "About must be less than 2000 characters";
                                      }
                             }

         // check to see if any errors
         if (empty($messages)) {
                   // no errors

                  // set date user created
                  $fldDateTimeUpdated = date("Y-m-d H:i:s", time());

                 // query - update user
                 $sql = "UPDATE `users` SET `firstName` = '$fldFirstName', `lastName` = '$fldLastName',
`company` = '$fldCompany', `webSite` = '$fldWebSite', `location` = '$fldLocation', `about` = '$fldAbout',

Designing for Dynamic Content                                                                    Jason Gillyon
WEB022                                                                                      Web Design Level 2
Socio.cc – Social Networking for Web Professionals                                                            51


`dateTimeUpdated` = '$fldDateTimeUpdated' WHERE `userID` = '$userID'";

                    // run query
                    $result = mysql_query($sql);

                    // check to see if query ok
                    if ($result) {
                               $updated = 1;
                    } else {
                               echo "MySQL Error: ".mysql_error();
                    }

                    // check to see if email needs updating
                    if (!empty($fldEmail) && !empty($fldEmailConfirm)) {
                              // query - update user
                              $sql = "UPDATE `users` SET `email` = '$fldEmail' WHERE `userID` = '$userID'";

                              // run query
                              $result = mysql_query($sql);
                    }

                    // check to see if query ok
                    if (!$result) {
                              echo "MySQL Error: ".mysql_error();
                    }

                    // check to see if password needs updating
                    if (!empty($fldPasswordCurrent) && !empty($fldPassword) && !empty($fldPasswordConfirm)) {
                              // encrypt password
                              $fldPassword = md5($fldPassword);

                              // query - update user
                              $sql = "UPDATE `users` SET `password` = '$fldPassword' WHERE `userID` =
'$userID'";

                              // run query
                              $result = mysql_query($sql);

                              // update password stored in session
                              $_SESSION['password'] = $fldPassword;
                    }

                    // check to see if query ok
                    if (!$result) {
                              echo "MySQL Error: ".mysql_error();
                    }
           }
} else {
           // fill form values with user details from db
           $fldFirstName = $userDetails['firstName'];
           $fldLastName = $userDetails['lastName'];
           $fldCompany = $userDetails['company'];
           $fldWebSite = $userDetails['webSite'];
           $fldLocation = $userDetails['location'];
           $fldAbout = $userDetails['about'];
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
           <head>
                   <title>Socio.cc &raquo; Edit Profile</title>
                   <?php require_once 'assets/inc/meta.php'; ?>
           </head>
           <body id="editProfile">
                   <?php require_once 'assets/inc/header.php'; ?>
                   <?php

Designing for Dynamic Content                                                                   Jason Gillyon
WEB022                                                                                     Web Design Level 2
Socio.cc – Social Networking for Web Professionals                                                               52


                   // check to see if update complete
                   if ($updated == 1) {
                             ?>
                             <h2>Thank you <?php echo $fldFirstName; ?></h2>
                             <p>You have successfully edited your profile.</p>
                             <p>What do you want to do?</p>
                             <ul>
                                       <li><a href="index.php">Go to home page</a></li>
                                       <li><a href="profile.php?id=<?php echo $userID; ?>">View your
profile</a></li>
                                      <li><a href="edit-profile-image.php">Edit your profile image</a></li>
                                      <li><a href="edit-skills.php">Edit your skills</a></li>
                              </ul>
                              <?php
                   } else {
                            ?>
                            <h2>Edit Profile</h2>
                            <p>Take a minute to keep your profile up to date.</p>
                            <?php displayErrorMessages($messages); ?>
                            <form action="<?php $_SERVER['PHP_SELF']; ?>" method="post">
                                    <fieldset>
                                              <legend>Site Details</legend>
                                              <p class="errorMessage">
                                                       <label>User name:</label>
                                                       <?php echo $userDetails['userName']; ?>
                                              </p>
                                              <p>
                                                       <label for="fldFirstName">First name:</label>
                                                       <input type="text" id="fldFirstName" name="fldFirstName"
value="<?php echo stripslashes($fldFirstName); ?>" maxlength="30" />
                                              </p>
                                              <p>
                                                       <label for="fldLastName">Last name:</label>
                                                       <input type="text" id="fldLastName" name="fldLastName"
value="<?php echo stripslashes($fldLastName); ?>" maxlength="30" />
                                              </p>
                                    </fieldset>
                                    <fieldset>
                                              <legend>Password</legend>
                                              <p>If you wish to change your password, fill out the three fields
below.</p>
                                              <p>
                                                       <label for="fldPasswordCurrent">Current
Password:</label>
                                                       <input type="password" id="fldPasswordCurrent"
name="fldPasswordCurrent" maxlength="15 "/>
                                              </p>
                                              <p>
                                                       <label for="fldPassword">Password:</label>
                                                       <input type="password" id="fldPassword"
name="fldPassword" maxlength="15" />
                                              </p>
                                              <p>
                                                       <label for="fldPasswordConfirm">Confirm
password:</label>
                                                       <input type="password" id="fldPasswordConfirm"
name="fldPasswordConfirm" maxlength="15" />
                                              </p>
                                    </fieldset>
                                    <fieldset>
                                              <legend>E-mail address</legend>
                                              <p><strong>Registered e-mail</strong>: <?php echo
$userDetails['email']; ?></p>
                                              <p>If you wish to change your e-mail address, fill out the two fields
below.</p>
                                              <p>
                                                       <label for="fldEmail">E-mail address:</label>

Designing for Dynamic Content                                                                     Jason Gillyon
WEB022                                                                                       Web Design Level 2
Socio.cc – Social Networking for Web Professionals                                                           53


                                                        <input type="text" id="fldEmail" name="fldEmail"
value="<?php echo stripslashes($fldEmail); ?>" maxlength="80" />
                                             </p>
                                             <p>
                                                        <label for="fldEmailConfirm">Confirm e-mail
address:</label>
                                                        <input type="text" id="fldEmailConfirm"
name="fldEmailConfirm" value="<?php echo stripslashes($fldEmailConfirm); ?>" maxlength="80" />
                                             </p>
                                   </fieldset>
                                   <fieldset>
                                             <legend>Profile</legend>
                                             <p>
                                                        <label for="fldCompany">Company:</label>
                                                        <input type="text" id="fldCompany" name="fldCompany"
value="<?php echo stripslashes($fldCompany); ?>" maxlength="30" />
                                             </p>
                                             <p>
                                                        <label for="fldWebSite">Web site:</label>
                                                        <input type="text" id="fldWebSite" name="fldWebSite"
value="<?php echo stripslashes($fldWebSite); ?>" maxlength="100" />
                                             </p>
                                             <p>
                                                        <label for="fldLocation">Location:</label>
                                                        <input type="text" id="fldLocation" name="fldLocation"
value="<?php echo stripslashes($fldLocation); ?>" maxlength="40" />
                                             </p>
                                             <p>
                                                        <label for="fldAbout">About:</label>
                                                        <textarea id="fldAbout" name="fldAbout" cols=""
rows=""><?php echo stripslashes($fldAbout); ?></textarea>
                                             </p>
                                   </fieldset>
                                   <p><input type="submit" id="fldSubmit" name="fldSubmit" value="Update"
class="auto" /></p>
                           </form>
                  <?php
                  }
                  require_once 'assets/inc/footer.php';
                  ?>
        </body>
</html>

9.2.6 edit-skills.php
Allows the user to add and remove skills from their profile.

<?php
define ("IN_SITE", 1);
require_once 'assets/inc/global.php';

// check if user logged in
if (!$userDetails) {
          // if not, redirect to index page
          header ("Location: index.php");
}

// check if register form submitted
if ($_POST['fldSubmit']) {

         // add skills
                   // assign easier variable names and make variables safe
                   $fldSkill = $_POST['fldSkill'];

                   // loop through skills
                   foreach ($fldSkill as $skill) {
                                       if (!empty($skill)) {
                                                  // if magic quotes on, strip slahes
Designing for Dynamic Content                                                                  Jason Gillyon
WEB022                                                                                    Web Design Level 2
Socio.cc – Social Networking for Web Professionals                                                                         54


                                                   if (get_magic_quotes_gpc()) {
                                                            $skill = stripslashes($skill);
                                                   }

                                                   // strip out everything but letters and numbers
                                                   // adapted from http://www.thescripts.com/forum/thread2169.html
                                                   $skill = preg_replace('/[^0-9a-zA-Z]/i','', $skill);

                                                   // convert to lowercase
                                                   $skill = strtolower($skill);

                                                   // query - check to see if skill already exists for user
                                                   $sql = "SELECT * FROM `skills` WHERE `userID` = '$userID' AND
`skill` = '$skill' LIMIT 1";

                                                   // run query
                                                   $result = mysql_query($sql);

                                                   // if 0 results, add new skill
                                                   if (mysql_num_rows($result) == 0) {
                                                              // set date skill added
                                                              $dateTimeAdded = date("Y-m-d H:i:s", time());

                                                      // query - add new skill for specific user
                                                      $sql = "INSERT INTO `skills` (`userID`, `skill`,
`dateTimeAdded`) VALUES ('$userID', '$skill', '$dateTimeAdded')";

                                                             // run query
                                                             $result = mysql_query($sql);
                                                   }
                                         }
                     }

          // delete skills
                    // query - select all skills for specific user from skill table order by skill name ascending
                    $sql = "SELECT * FROM `skills` WHERE `userID` = '$userID' ORDER BY `skill` ASC";
                    // run query
                    $result = mysql_query($sql);

                     // loop through results and create bulleted list
                     while ($row = @mysql_fetch_array($result)) {
                               $skill = $row['skill'];
                               $fldDeleteSkill[$skill] = $_POST['fldDeleteSkill'][$skill];

                               // if magic quotes on, strip slahes
                               if (get_magic_quotes_gpc()) {
                                         $fldDeleteSkill[$skill] = stripslashes($fldDeleteSkill[$skill]);
                               }

                               // run through mysql_real_escape_string to prevent sql injection
                               $fldDeleteSkill[$skill] = mysql_real_escape_string($fldDeleteSkill[$skill]);

                               // check to see if skill was selected for deletion
                               if ($fldDeleteSkill[$skill] == "delete") {
                                         // query - select all skills for specific user from skill table order by skill name
ascending
                                         $sql = "DELETE FROM `skills` WHERE `userID` = '$userID' AND `skill` =
'$skill' LIMIT 1";
                                         // run query
                                         $result = mysql_query($sql);
                               }
                     }

              $updated = 1;
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-

Designing for Dynamic Content                                                                              Jason Gillyon
WEB022                                                                                                Web Design Level 2
Socio.cc – Social Networking for Web Professionals                                                                      55


strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
           <head>
                   <title>Socio.cc &raquo; Edit Skills</title>
                   <?php require_once 'assets/inc/meta.php'; ?>
           </head>
           <body id="editSkills">
                   <?php require_once 'assets/inc/header.php'; ?>
                   <?php
                   // check to see if update complete
                   if ($updated == 1) {
                             ?>
                             <h2>Thank you <?php echo $fldFirstName; ?></h2>
                             <p>You have successfully edited your list of skills.</p>
                             <p>What do you want to do?</p>
                             <ul>
                                       <li><a href="index.php">Go to home page</a></li>
                                       <li><a href="profile.php?id=<?php echo $userID; ?>">View your
profile</a></li>
                                       <li><a href="edit-profile.php">Edit your profile</a></li>
                                       <li><a href="edit-profile-image.php">Edit your profile image</a></li>
                             </ul>
                             <?php
                   } else {
                             ?>
                             <h2>Edit Skills</h2>
                             <p>Take a minute to keep your list of skills up to date.</p>
                             <form action="<?php $_SERVER['PHP_SELF']; ?>" method="post">
                                       <fieldset>
                                                 <legend>Add Skills</legend>
                                                 <p>
                                                          <label for="fldSkill0">Skills:</label>
                                                                    <input type="text" id="fldSkill0" name="fldSkill[]"
/><br />
                                                                    <label>&nbsp;</label><input type="text"
id="fldSkill1" name="fldSkill[]" maxlength="30" /><br />
                                                                    <label>&nbsp;</label><input type="text"
id="fldSkill2" name="fldSkill[]" maxlength="30" /><br />
                                                                    <label>&nbsp;</label><input type="text"
id="fldSkill3" name="fldSkill[]" maxlength="30" /><br />
                                                                    <label>&nbsp;</label><input type="text"
id="fldSkill4" name="fldSkill[]" maxlength="30" /><br />
                                                                    <label>&nbsp;</label><input type="text"
id="fldSkill5" name="fldSkill[]" maxlength="30" /><br />
                                                                    <label>&nbsp;</label><input type="text"
id="fldSkill6" name="fldSkill[]" maxlength="30" /><br />
                                                                    <label>&nbsp;</label><input type="text"
id="fldSkill7" name="fldSkill[]" maxlength="30" /><br />
                                                                    <label>&nbsp;</label><input type="text"
id="fldSkill8" name="fldSkill[]" maxlength="30" /><br />
                                                                    <label>&nbsp;</label><input type="text"
id="fldSkill9" name="fldSkill[]" maxlength="30" />
                                                          </label>
                                                 </p>
                                       </fieldset>
                                       <fieldset>
                                                 <legend>Delete Skills</legend>
                                                 <p>If you wish to delete a skill click the checkbox beside it.</p>
                                                 <p class="deleteSkills">
                                                          <?php
                                                          // query - select all skills for specific user from skill table
order by skill name ascending
                                                          $sql = "SELECT * FROM `skills` WHERE `userID` =
'$userID' ORDER BY `skill` ASC";
                                                          // run query
                                                          $result = mysql_query($sql);



Designing for Dynamic Content                                                                           Jason Gillyon
WEB022                                                                                             Web Design Level 2
Socio.cc – Social Networking for Web Professionals                                                                   56


                                                          // loop through results and create bulleted list
                                                          while ($row = mysql_fetch_array($result)) {
                                                                    ?>
                                                                    <span>&nbsp;</span><input type="checkbox"
id="fldDeleteSkill<?php echo $row['skill']; ?>" name="fldDeleteSkill[<?php echo $row['skill']; ?>]" value="delete"
class="auto" /><label for="fldDeleteSkill<?php echo $row['skill']; ?>"><?php echo $row['skill']; ?></label><br />
                                                                    <?php
                                                          }
                                                          ?>
                                                </p>
                                     </fieldset>
                                     <p><input type="submit" id="fldSubmit" name="fldSubmit" value="Update
Skill List" class="auto" /></p>
                             </form>
                    <?php
                    }
                    require_once 'assets/inc/footer.php';
                    ?>
           </body>
</html>

9.2.7 faq.php
A static page containing a list of frequently asked questions.

<?php
define ("IN_SITE", 1);
require_once 'assets/inc/global.php';
?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
           <head>
                   <title>Socio.cc &raquo; FAQ: Frequently Asked Questions</title>
                   <?php require_once 'assets/inc/meta.php'; ?>
           </head>
           <body id="faq">
                   <?php require_once 'assets/inc/header.php'; ?>
                   <h2>FAQ</h2>
                   <p>Here you will find answers to common questions. If you can't find an answer to your
question, <a href="contact.php">contact us</a>.</p>
                   <h3>How do I add a friend?</h3>
                   <p>Search for your friend you want to add using the search box at the top right of every page.
On the search results page, click your friends name and under the friends heading click the add user to friends
list link.</p>
                   <h3>How do I delete a friend?</h3>
                   <p>Go to your profile using the link on the home page when logged in. Under the friends
heading, click the friend you want to delete to visit their profile, then under their friends heading click the delete
user from friends list link.</p>
                   <h3>How do I search for multiple skills at the same time?</h3>
                   <p>Enter each skill separated by a space, e.g. php mysql to search for profiles tagged with
both php and mysql.</p>
                   <h3>Why can't I use spaces or other punctuation (except full stops) in skills?</h3>
                   <p>This is by design so we can do good things with them, like dynamically building the skill
cloud on the home page.</p>
                   <h3>What does the .cc stand for in Socio.cc?</h3>
                   <p>It doesn't stand for anything in particular, but some have defined it as creative
community.</p>
                   <?php require_once 'assets/inc/footer.php'; ?>
           </body>
</html>




Designing for Dynamic Content                                                                        Jason Gillyon
WEB022                                                                                          Web Design Level 2
Socio.cc – Social Networking for Web Professionals                                                         57


9.2.8 index.php
Contains the home page code including, new members and the skill cloud.

<?php
define ("IN_SITE", 1);
require_once 'assets/inc/global.php';
?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
           <head>
                   <title>Socio.cc - Social networking for web professionals</title>
                   <?php require_once 'assets/inc/meta.php'; ?>
           </head>
           <body id="home">
                   <?php require_once 'assets/inc/header.php'; ?>
                   <div id="newMembers">
                            <h2>Newest members</h2>
                            <?php
                            // query - select all users from user table
                            $sql = "SELECT `userID`, `userName` FROM `users` ORDER BY `dateTimeCreated`
DESC LIMIT 0,3";
                            // run query
                            $result = mysql_query($sql);

                           // loop through results
                           while ($row = mysql_fetch_array($result)) {
                                     ?>
                                     <div class="picture">
                                               <a href="profile.php?id=<?php echo $row['userID']; ?>"><img
src="<?php echo getUserImg($row['userID']); ?>" alt="<?php echo $row['userName']; ?>" /></a>
                                     </div>
                                     <p><a href="profile.php?id=<?php echo $row['userID']; ?>"><?php echo
$row['userName']; ?></a></p>
                                     <?php
                           }
                           ?>
                           <p><a href="search.php">More members</a></p>
                  </div>
                  <div id="homeContainer">
                           <h1>Welcome</h1>
                           <p class="intro"><strong>Socio.cc</strong> is a social network for web
professionals.</p>
                           <?php
                           // check to see if user logged in
                           if ($userDetails) {
                                     ?>
                                     <div id="loggedIn">
                                               <a href="profile.php?id=<?php echo $userID; ?>"><img src="<?php
echo getUserImg($userID, "sml"); ?>" alt="<?php echo $userDetails['userName']; ?>" /></a>
                                               <h3>Hello <a href="profile.php?id=<?php echo $userID; ?>"><?php
echo $userDetails['firstName']; ?></a></h3>
                                               <p>Quick links to keep your your account up to date:</p>
                                               <p><a href="edit-profile.php">Edit Profile</a> - <a href="edit-
profile-image.php">Edit Profile Image</a> - <a href="edit-skills.php">Edit Skills</a></p>
                                               <br />
                                     </div>
                                     <?php
                           } else {
                                     ?>
                                     <div id="registerOrLogIn">
                                               <h3>Register</h3>
                                               <p>Why register? Here's our top 3 reasons:</p>
                                               <ul>
                                                        <li>Connect with people in your industry</li>
                                                        <li>Promote yourself</li>
                                                        <li>It's <strong>free</strong>!</li>
                                               </ul>
Designing for Dynamic Content                                                                 Jason Gillyon
WEB022                                                                                   Web Design Level 2
Socio.cc – Social Networking for Web Professionals                                                                            58


                                            <p><a href="register.php">Register now</a></p>
                                            <div id="logIn">
                                                      <h3>Log In</h3>
                                                      <p>Existing members log in here:</p>
                                                      <form action="log-in.php" method="post">
                                                                <p><label for="fldUserName">User
name</label><input type="text" name="fldUserName" id="fldUserName" maxlength="20" /></p>
                                                                <p><label
for="fldPassword">Password</label><input type="password" name="fldPassword" id="fldPassword"
maxlength="20" /></p>
                                                                <p><input type="submit" id="fldSubmit"
name="fldSubmit" value="Log In" class="auto" /></p>
                                                      </form>
                                            </div>
                                   </div>
                                   <?php
                                   }
                         ?>
                         <h2>Skill cloud</h2>
                         <div id="skillCloud">
                                   <p>
                                            <?php
                                            // query - select all skills group by skill
                                            $sql = "SELECT *, COUNT(skill) FROM `skills` GROUP BY `skill`
ORDER BY `skill` ASC";
                                            // run query
                                            $result = mysql_query($sql);

                                                   // loop through results and create bulleted list
                                                   while ($row = mysql_fetch_array($result)) {
                                                             ?>
                                                             <a href="search.php?q=<?php echo $row['skill'];
?>&amp;type=skill" style="font-size:<?php echo 1 + ($row['COUNT(skill)'] * 0.1); ?>em;" title="<?php echo
$row['skill']; ?>"><?php if (strlen($row['skill']) > 18) { echo substr($row['skill'], 0, 15)."..."; } else { echo $row['skill'];
} ?></a>
                                                             <?php
                                                   }
                                                   ?>
                                        </p>
                              </div>
                              <h3>What's this?</h3>
                              <p>The skill cloud shows the most popular skills from member's profiles. The more
popular a skill is, the larger it appears in the skill cloud.</p>
                     </div>
                     <?php require_once 'assets/inc/footer.php'; ?>
          </body>
</html>

9.2.9 log-in.php
Contains the code to log a user in. Also has a log in form, if not posted to by the log in form on the
home page.

<?php
define ("IN_SITE", 1);
require_once 'assets/inc/global.php';

// check if user already logged in
if ($userDetails) {
          // redirect to index page
          header ("Location: index.php");
}

// check if register form submitted
if ($_POST) {
          // assign easier variable names and make variables safe
          $fldUserName = $_POST['fldUserName'];

Designing for Dynamic Content                                                                                Jason Gillyon
WEB022                                                                                                  Web Design Level 2
Socio.cc – Social Networking for Web Professionals                                                           59


        $fldPassword = $_POST['fldPassword'];

        // if magic quotes on, strip slahes
        if (get_magic_quotes_gpc()) {
                  $fldUserName = stripslashes($fldUserName);
                  $fldPassword = stripslashes($fldPassword);
        }

        // run through mysql_real_escape_string to prevent sql injection
        $fldUserName = mysql_real_escape_string($fldUserName);
        $fldPassword = mysql_real_escape_string($fldPassword);

        // md5 password
        $fldPassword = md5($fldPassword);

        // check log in
        if (checkLogIn($fldUserName, $fldPassword)) {
                  $loggedIn = true;
                  // store user name and password in session
                  $_SESSION['userName'] = $fldUserName;
                  $_SESSION['password'] = $fldPassword;
                  // get user details
                  $userDetails = getUserDetails($userID);
        } else {
                  $loggedIn = false;
        }
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
           <head>
                   <title>Socio.cc &raquo; Log In</title>
                   <?php require_once 'assets/inc/meta.php'; ?>
           </head>
           <body id="logIn">
                   <?php require_once 'assets/inc/header.php'; ?>
                   <?php
                   if ($loggedIn) {
                             // logged in
                             ?>
                             <h2>Welcome <?php echo $userDetails['firstName']; ?></h2>
                             <p>You are now logged in.</p>
                             <p>What do you want to do?</p>
                             <ul>
                                       <li><a href="index.php">Go to home page</a></li>
                                       <li><a href="profile.php?id=<?php echo $userID; ?>">View your
profile</a></li>
                             </ul>
                             <?php
                   } else {
                             ?>
                             <h2>Log In</h2>
                             <p>Need to <a href="register.php">register</a>?</p>
                             <?php if (!checkLogIn($fldUserName, $fldPassword) && $_POST) { ?>
                                       <p class="error">User name/password combination not found.</p>
                             <?php } ?>
                             <form action="<?php $_SERVER['PHP_SELF']; ?>" method="post">
                                       <fieldset>
                                                <legend>Log In</legend>
                                                <p>
                                                          <label for="fldUserName">User name:</label>
                                                          <input type="text" id="fldUserName" name="fldUserName"
/>
                                                </p>
                                                <p>
                                                          <label for="fldPassword">Password:</label>

Designing for Dynamic Content                                                                  Jason Gillyon
WEB022                                                                                    Web Design Level 2
Socio.cc – Social Networking for Web Professionals                                                             60


                                                            <input type="password" id="fldPassword"
name="fldPassword" />
                                                </p>
                                      </fieldset>
                                      <p><input type="submit" id="fldSubmit" name="fldSubmit" value="Log In"
class="auto" /></p>
                             </form>
                    <?php
                    }
                    require_once 'assets/inc/footer.php';
                    ?>
          </body>
</html>

9.2.10 privacy-policy.php
A static page containing the privacy policy which was adapted from a sample privacy policy at
http://www.businesslink.gov.uk/bdotg/action/detail?type=RESOURCES&itemId=1076142085.

<?php
define ("IN_SITE", 1);
require_once 'assets/inc/global.php';
// page adapted from sample privacy policy at
http://www.businesslink.gov.uk/bdotg/action/detail?type=RESOURCES&itemId=1076142085
?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
           <head>
                    <title>Socio.cc &raquo; Edit Profile</title>
                    <?php require_once 'assets/inc/meta.php'; ?>
           </head>
           <body id="privacyPolicy">
                    <?php require_once 'assets/inc/header.php'; ?>
                    <h2>Privacy Policy</h2>
                    <p>This privacy policy sets out how <strong>Socio.cc</strong> uses and protects any
information that you give <strong>Socio.cc</strong> when you use this website.</p>
                    <p><strong>Socio.cc</strong> is committed to ensuring that your privacy is protected. Should
we ask you to provide certain information by which you can be identified when using this website, then you can
be assured that it will only be used in accordance with this privacy statement.</p>
                    <p><strong>Socio.cc</strong> may change this policy from time to time by updating this page.
You should check this page from time to time to ensure that you are happy with any changes. This policy is
effective from 19/01/2007.</p>
                    <h3>What we collect</h3>
                    <p>We may collect the following information:</p>
                    <ul>
                              <li>name, company and web site</li>
                              <li>contact information including email address</li>
                              <li>demographic information such as location, preferences and skills</li>
                              <li>other information relevant to customer surveys and/or offers</li>
                    </ul>
                    <h3>What we do with the information we gather</h3>
                    <p>We require this information to understand your needs and provide you with a better service,
and in particular for the following reasons:</p>
                    <ul>
                              <li>Internal record keeping.</li>
                              <li>We may use the information to improve our products and services.</li>
                              <li>We may periodically send promotional emails about new products, special offers
or other information which we think you may find interesting using the email address which you have
provided.</li>
                              <li>From time to time, we may also use your information to contact you for market
research purposes. We may contact you by email. We may use the information to customise the website
according to your interests.</li>
                    </ul>
                    <h3>Security</h3>
                    <p>We are committed to ensuring that your information is secure. In order to prevent
unauthorised access or disclosure we have put in place suitable physical, electronic and managerial procedures
to safeguard and secure the information we collect online.</p>

Designing for Dynamic Content                                                                       Jason Gillyon
WEB022                                                                                         Web Design Level 2
Socio.cc – Social Networking for Web Professionals                                                                  61


                   <h3>How we use cookies</h3>
                   <p>A cookie is a small file which asks permission to be placed on your computer's hard drive.
Once you agree, the file is added and the cookie helps analyse web traffic or lets you know when you visit a
particular site. Cookies allow web applications to respond to you as an individual. The web application can tailor
its operations to your needs, likes and dislikes by gathering and remembering information about your
preferences.</p>
                   <p>We use traffic log cookies to identify which pages are being used. This helps us analyse
data about webpage traffic and improve our website in order to tailor it to customer needs. We only use this
information for statistical analysis purposes and then the data is removed from the system.</p>
                   <p>Overall, cookies help us provide you with a better website, by enabling us to monitor which
pages you find useful and which you do not. A cookie in no way gives us access to your computer or any
information about you, other than the data you choose to share with us.</p>
                   <p>You can choose to accept or decline cookies. Most web browsers automatically accept
cookies, but you can usually modify your browser setting to decline cookies if you prefer. This may prevent you
from taking full advantage of the website.</p>
                   <h3>Links to other websites</h3>
                   <p>Our website may contain links to other websites of interest. However, once you have used
these links to leave our site, you should note that we do not have any control over that other website. Therefore,
we cannot be responsible for the protection and privacy of any information which you provide whilst visiting such
sites and such sites are not governed by this privacy statement. You should exercise caution and look at the
privacy statement applicable to the website in question.</p>
                   <h3>Controlling your personal information</h3>
                   <p>We will not sell, distribute or lease your personal information to third parties unless we have
your permission or are required by law. We may use your personal information to send you promotional
information about third parties which we think you may find interesting if you tell us that you wish this to
happen.</p>
                   <p>You may request details of personal information which we hold about you under the Data
Protection Act 1998. A small fee will be payable. If you would like a copy of the information held on you please <a
href="contact.php">contact us</a>.</p>
                   <p>If you believe that any information we are holding on you is incorrect or incomplete, please
<a href="contact.php">contact us</a> as soon as possible. We will promptly correct any information found to be
incorrect.</p>
                   <?php require_once 'assets/inc/footer.php'; ?>
          </body>
</html>

9.2.11 profile.php
Contains the code used to output the view profile page which includes, the list of skills and friends.
Also contains the code to contact a user.

<?php
define ("IN_SITE", 1);
require_once 'assets/inc/global.php';

// get profile details
$profileDetails = getUserDetails($_REQUEST['id']);

// check if profile exists
if (!$profileDetails) {
           // redirect to index page
           header ("Location: index.php");
}
?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
           <head>
                     <title>Socio.cc &raquo; View Profle: Jason - Social networking for web professionals</title>
                     <?php require_once 'assets/inc/meta.php'; ?>
           </head>
           <body id="profile">
                     <?php require_once 'assets/inc/header.php'; ?>
                     <h2>View Profile</h2>
                     <div id="sidebar">
                               <img src="<?php echo getUserImg($profileDetails['userID']); ?>" alt="<?php echo
$profileDetails['userName']; ?>" />
                               <h4>Skills</h4>

Designing for Dynamic Content                                                                      Jason Gillyon
WEB022                                                                                        Web Design Level 2
Socio.cc – Social Networking for Web Professionals                                                                      62


                            <ul>
                                      <?php
                                      // get user id
                                      $queryUserID = $profileDetails['userID'];
                                      // query - select all skills for specific user from skill table order by skill name
ascending
                                      $sql = "SELECT * FROM `skills` WHERE `userID` = '$queryUserID' ORDER
BY `skill` ASC";
                                      // run query
                                      $result = mysql_query($sql);

                                           // check to see how many results
                                           if (mysql_num_rows($result) == 0) {
                                                     // no results
                                                     echo "<em>None entered</em>";
                                           } else {
                                                     // loop through results and create bulleted list
                                                     while ($row = mysql_fetch_array($result)) {
                                                                ?>
                                                                <li><a href="search.php?q=<?php echo $row['skill'];
?>&amp;type=skill" title="<?php echo $row['skill']; ?>"><?php if (strlen($row['skill']) > 18) { echo
substr($row['skill'], 0, 15)."..."; } else { echo $row['skill']; } ?></a></li>
                                                                <?php
                                                     }
                                           }
                                           ?>
                                </ul>
                     </div>
                     <div id="main">
                                <h3><?php echo $profileDetails['userName']; ?></h3>
                                <p><?php echo nl2br($profileDetails['about']); ?></p>
                                <br />
                                <p>
                                           <strong>Real name:</strong> <?php echo $profileDetails['firstName']; ?>
<?php echo $profileDetails['lastName']; ?><br />
                                           <?php if (!empty($profileDetails['company'])) { ?>
                                                     <strong>Company:</strong> <?php echo
$profileDetails['company']; ?><br />
                                           <?php } if (!empty($profileDetails['location'])) { ?>
                                           <strong>Location:</strong> <?php echo $profileDetails['location']; ?><br />
                                           <?php } if (!empty($profileDetails['webSite'])) { ?>
                                           <strong>Web Site:</strong> <a href="<?php echo $profileDetails['webSite'];
?>" rel="external"><?php echo $profileDetails['webSite']; ?></a><br />
                                           <?php } ?>
                                           <strong>Last online:</strong> <?php echo
formatDate($profileDetails['dateTimeLastLogin']); ?><br />
                                           <strong>Member since:</strong> <?php echo
formatDate($profileDetails['dateTimeCreated']); ?>
                                </p>
                                <br />
                                <h4>Friends</h4>
                                <?php
                                // only show add friend link to logged on users and not on users own profile
                                if ($userDetails && $profileDetails['userID'] != $userID) {
                                           $friendID = $profileDetails['userID'];
                                           // query - check to see if friend already exists for user
                                           $sql = "SELECT * FROM `friends` WHERE `userID` = '$userID' AND
`friendID` = '$friendID' LIMIT 1";

                                      // run query
                                      $result = mysql_query($sql);

                                     // if 0 results, show add new friend
                                     if (mysql_num_rows($result) == 0) {
                                                ?>
                                                <p><a href="edit-friends.php?add=<?php echo
$profileDetails['userID']; ?>">Add <?php echo $profileDetails['userName']; ?> to your friends list</a>

Designing for Dynamic Content                                                                           Jason Gillyon
WEB022                                                                                             Web Design Level 2
Socio.cc – Social Networking for Web Professionals                                                                    63


                                                 <?php
                                      } else {
                                                 // else show remove link
                                                 ?>
                                                 <p><a href="edit-friends.php?del=<?php echo
$profileDetails['userID']; ?>" onclick="return confirm('Are you sure you want to delete <?php echo
addslashes($profileDetails['userName']); ?> from your friends list?');">Delete <?php echo
$profileDetails['userName']; ?> from your friends list</a>
                                                 <?php
                                       }
                             }
                             ?>
                             <div id="friendsList">
                                       <?php
                                       // get user id
                                       $queryUserID = $profileDetails['userID'];
                                       // query - select all friends for specific user from friends table order by friend
name ascending
                                       $sql = "SELECT * FROM `friends` INNER JOIN `users` ON friends.friendID =
users.userID WHERE friends.userID = '$queryUserID' ORDER BY `userName` ASC";
                                       // run query
                                       $result = mysql_query($sql);
                                       // check to see how many results
                                       if (mysql_num_rows($result) == 0) {
                                                 // no results
                                                 echo "<em>None added</em>";
                                       } else {
                                                 // loop through results and create list
                                                 while ($row = mysql_fetch_array($result)) {
                                                            ?>
                                                            <div class="container">
                                                                      <div>
                                                                                <a href="profile.php?id=<?php echo
$row['userID']; ?>"><img src="<?php echo getUserImg($row['userID'], "sml"); ?>" alt="<?php echo
$row['userName']; ?>" /></a>
                                                                      </div>
                                                                      <a href="profile.php?id=<?php echo
$row['userID']; ?>"><?php echo $row['userName']; ?></a><br />
                                                            </div>
                                                            <?php
                                                 }
                                       }
                                       ?>
                             </div>
                             <?php
                             // only show add friend link to logged on users and not on users own profile
                             if ($userDetails && $profileDetails['userID'] != $userID) {
                                       ?>
                                       <div id="sendEmail">
                                                 <br />
                                                 <?php
                                                 // check if mail form submitted
                                                 if ($_POST) {
                                                            // assign easier variable names
                                                            $fldSubject = trim($_POST['fldSubject']);
                                                            $fldMessage = trim($_POST['fldMessage']);

                                                         // if magic quotes on, strip slahes
                                                         if (get_magic_quotes_gpc()) {
                                                                   $fldSubject = stripslashes($fldSubject);
                                                                   $fldMessage = stripslashes($fldMessage);
                                                         }

                                                         // check fields not empty
                                                         if (empty($fldSubject) || empty($fldMessage)) {
                                                                   $messages[] = "Both subject and message are
required";

Designing for Dynamic Content                                                                         Jason Gillyon
WEB022                                                                                           Web Design Level 2
Socio.cc – Social Networking for Web Professionals                                                               64


                                                       } else {
                                                                  // send e-mail
                                                                  $search = array("[FirstName]", "[UserName]",
"[UserID]", "[Site]", "[Message]", "[Admin]");
                                                                  $replace = array($profileDetails['firstName'],
$userDetails['userName'], $userID, $site['baseUrl'], $fldMessage, $site['emailAdmin']);
                                                                  sendEmail($profileDetails['email'], "New
Message: ".$fldSubject, "user-message.txt", $search, $replace);
                                                                  // clear form variables
                                                                  $fldSubject = "";
                                                                  $fldMessage = "";
                                                                  // set sent, used later
                                                                  $sent = 1;
                                                        }
                                             }
                                             ?>
                                             <form action="<?php echo $_SERVER['REQUEST_URI']; ?>"
method="post">
                                                        <fieldset>
                                                                  <legend>Contact User</legend>
                                                                  <?php
                                                                  displayErrorMessages($messages);
                                                                  if ($sent == 1) {
                                                                             echo "<p><em>Message
sent</em></p>";
                                                                  }
                                                                  ?>
                                                                  <p><label for="fldSubject">Subject:</label><input
type="text" name="fldSubject" id="fldSubject" value="<?php echo $fldSubject; ?>" /></p>
                                                                  <p><label
for="fldMessage">Message:</label><textarea name="fldMessage" id="fldMessage" cols="" rows=""><?php echo
$fldMessage; ?></textarea></p>
                                                                  <p><input type="submit" value="Send"
name="fldSubmit" id="fldSubmit" class="auto" /></p>
                                                        </fieldset>
                                             </form>
                                    </div>
                                    <?php
                                    }
                           ?>
                  </div>
                  <?php require_once 'assets/inc/footer.php'; ?>
         </body>
</html>

9.2.12 – register.php
Contains the registration form and the code to process it.

<?php
define ("IN_SITE", 1);
require_once 'assets/inc/global.php';

// check if user already logged in
if ($userDetails) {
          // redirect to index page
          header ("Location: index.php");
}

// check if register form submitted
if ($_POST['fldSubmit']) {

         // assign easier variable names and strip tags
         $fldUserName = strip_tags($_POST['fldUserName']);
         $fldPassword = strip_tags($_POST['fldPassword']);
         $fldPasswordConfirm = strip_tags($_POST['fldPasswordConfirm']);
         $fldEmail = strip_tags($_POST['fldEmail']);
         $fldEmailConfirm = strip_tags($_POST['fldEmailConfirm']);
Designing for Dynamic Content                                                                     Jason Gillyon
WEB022                                                                                       Web Design Level 2
Socio.cc – Social Networking for Web Professionals                                                            65


        $fldFirstName = strip_tags($_POST['fldFirstName']);
        $fldLastName = strip_tags($_POST['fldLastName']);
        $fldCompany = strip_tags($_POST['fldCompany']);
        $fldWebSite = strip_tags($_POST['fldWebSite']);
        $fldLocation = strip_tags($_POST['fldLocation']);
        $fldAbout = strip_tags($_POST['fldAbout']);

        // if magic quotes on, strip slahes
        if (get_magic_quotes_gpc()) {
                  $fldUserName = stripslashes($fldUserName);
                  $fldPassword = stripslashes($fldPassword);
                  $fldPasswordConfirm = stripslashes($fldPasswordConfirm);
                  $fldEmail = stripslashes($fldEmail);
                  $fldEmailConfirm = stripslashes($fldEmailConfirm);
                  $fldFirstName = stripslashes($fldFirstName);
                  $fldLastName = stripslashes($fldLastName);
                  $fldCompany = stripslashes($fldCompany);
                  $fldWebSite = stripslashes($fldWebSite);
                  $fldLocation = stripslashes($fldLocation);
                  $fldAbout = stripslashes($fldAbout);
        }

        // run through mysql_real_escape_string to prevent sql injection
        $fldUserName = mysql_real_escape_string($fldUserName);
        $fldPassword = mysql_real_escape_string($fldPassword);
        $fldPasswordConfirm = mysql_real_escape_string($fldPasswordConfirm);
        $fldEmail = mysql_real_escape_string($fldEmail);
        $fldEmailConfirm = mysql_real_escape_string($fldEmailConfirm);
        $fldFirstName = mysql_real_escape_string($fldFirstName);
        $fldLastName = mysql_real_escape_string($fldLastName);
        $fldCompany = mysql_real_escape_string($fldCompany);
        $fldWebSite = mysql_real_escape_string($fldWebSite);
        $fldLocation = mysql_real_escape_string($fldLocation);
        // use addslashes instead as other messes up line breaks
        $fldAbout = addslashes($fldAbout);

         // error checking
                   // username
                            // check not empty
                            if (empty($fldUserName)) {
                                     $messages[] = "User name is required";
                            } else {
                                     // check valid length
                                     if (strlen($fldUserName) < 5 || strlen($fldUserName) > 15) {
                                                $messages[] = "User name must be between 5 and 15 characters";
                                     }
                                     // check if already exists
                                     $sql = "SELECT `userName` FROM `users` WHERE `userName` =
'$fldUserName' LIMIT 1";
                                     $result = mysql_query($sql);
                                     if (mysql_num_rows($result) != 0) {
                                                $messages[] = "User name is already in use by another user.
Please choose another.";
                                     }
                            }

                 // first name
                            // check not empty
                            if (empty($fldFirstName)) {
                                     $messages[] = "First name is required";
                            } else {
                                     // check valid length
                                     if (strlen($fldFirstName) > 30) {
                                                $messages[] = "First name must be less than 30 characters";
                                     }
                            }



Designing for Dynamic Content                                                                    Jason Gillyon
WEB022                                                                                      Web Design Level 2
Socio.cc – Social Networking for Web Professionals                                                                66


                 // last name
                           // check not empty
                           if (empty($fldLastName)) {
                                    $messages[] = "Last name is required";
                           } else {
                                    // check valid length
                                    if (strlen($fldLastName) > 30) {
                                               $emessages[] = "Last name must be less than 30 characters";
                                    }
                           }

                 // password
                          // check not empty
                          if (empty($fldPassword) || empty($fldPasswordConfirm)) {
                                   $messages[] = "Password is required";
                          } else {
                                   // check valid length
                                   if (strlen($fldPassword) < 8 || strlen($fldPassword) > 15) {
                                              $messages[] = "Password must be between 8 and 15 characters";
                                   }
                                   // check passwords match
                                   if ($fldPassword != $fldPasswordConfirm) {
                                              $messages[] = "Passwords must match";
                                   }
                          }

                 // email
                            // check not empty
                            if (empty($fldEmail) || empty($fldEmailConfirm)) {
                                     $messages[] = "E-mail address is required";
                            } else {
                                     // check valid length
                                     if (strlen($fldEmail) > 80) {
                                                $messages[] = "E-mail address must be less than 80 characters";
                                     }
                                     // check valid format
                                     if (!eregi("^[A-Z0-9._%-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$", $fldEmail)) {
                                                $messages[] = "E-mail address must be in valid format e.g.
yourname@hotmail.com";
                                     }
                                     // check emails match
                                     if ($fldEmail != $fldEmailConfirm) {
                                               $messages[] = "E-mail addresses must match";
                                     }
                                     // check if already exists
                                     $sql = "SELECT `email` FROM `users` WHERE `email` = '$fldEmail' LIMIT
1";
                                     $result = mysql_query($sql);
                                     if (mysql_num_rows($result) != 0) {
                                              $messages[] = "E-mail address is already in use by another user.
Please choose another.";
                                     }
                            }

                 // company
                         // check valid length
                         if (strlen($fldCompany) > 30 && !empty($fldCompany)) {
                                    $messages[] = "Company must be less than 30 characters";
                         }

                 // web site
                           // check not empty
                           if (!empty($fldWebSite)) {
                                     // check valid length
                                     if (strlen($fldWebSite) > 100) {
                                                $messages[] = "Web site must be less than 100 characters";
                                     }

Designing for Dynamic Content                                                                    Jason Gillyon
WEB022                                                                                      Web Design Level 2
Socio.cc – Social Networking for Web Professionals                                                            67


                                    // check valid format
                                    // reg exp from: http://regexlib.com/RETester.aspx?regexp_id=37
                                    if (!eregi("((mailto\:|(news|(ht|f)tp(s?))\://){1})", $fldWebSite)) {
                                               $messages[] = "Web site must be in valid format e.g.
http://www.yourdomain.com";
                                    }
                            }

                 // location
                           // check valid length
                           if (strlen($fldLocation) > 40 && !empty($fldLocation)) {
                                      $messages[] = "Location must be less than 40 characters";
                           }

                 // about
                            // check not empty
                            if (empty($fldAbout)) {
                                     $messages[] = "About is required";
                            } else {
                                     // check valid length
                                     if (strlen($fldAbout) > 2000) {
                                                $messages[] = "About must be less than 2000 characters";
                                     }
                            }

        // check to see if any errors
        if (empty($messages)) {
                  // no errors

                 // set date user created
                 $fldDateTimeCreated = date("Y-m-d H:i:s", time());

                 // encrypt password
                 $fldPasswordMD5 = md5($fldPassword);

                     // query - insert user
                     $sql = "INSERT INTO `users` (`userID`, `userName`, `password`, `email`, `firstName`,
`lastName`, `company`, `webSite`, `location`, `about`, `dateTimeCreated`, `dateTimeLastLogin` ) VALUES (NUll,
'$fldUserName', '$fldPasswordMD5', '$fldEmail', '$fldFirstName', '$fldLastName', '$fldCompany', '$fldWebSite',
'$fldLocation', '$fldAbout', '$fldDateTimeCreated', NULL)";

                 // run query
                 $result = mysql_query($sql);

                 // check to see if query ok
                 if ($result) {
                            // set registered to 1, used later on
                            $registered = 1;
                            // send welcome e-mail
                            $search = array("[FirstName]", "[UserName]", "[Password]", "[Site]");
                            $replace = array($fldFirstName, $fldUserName, $fldPassword, $site['baseUrl']);
                            sendEmail($fldEmail, "Welcome to Socio.cc", "register.txt", $search, $replace);
                            // check log in
                            if (checkLogIn($fldUserName, $fldPasswordMD5)) {
                                      // store user name and password in session
                                      $_SESSION['userName'] = $fldUserName;
                                      $_SESSION['password'] = $fldPasswordMD5;
                                      // get user details
                                      $userDetails = getUserDetails($userID);
                            }
                 } else {
                            echo "MySQL Error: ".mysql_error();
                 }
      }
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-

Designing for Dynamic Content                                                                      Jason Gillyon
WEB022                                                                                        Web Design Level 2
Socio.cc – Social Networking for Web Professionals                                                             68


strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
           <head>
                   <title>Socio.cc &raquo; Register</title>
                   <?php require_once 'assets/inc/meta.php'; ?>
           </head>
           <body id="register">
                   <?php require_once 'assets/inc/header.php'; ?>
                   <?php
                   // check to see if registration complete
                   if ($registered == 1) {
                              ?>
                              <h2>Welcome <?php echo $fldFirstName; ?></h2>
                              <p>You are our newest member.</p>
                              <p>What do you want to do?</p>
                                       <ul>
                                                 <li><a href="index.php">Go to home page</a></li>
                                                 <li><a href="profile.php?id=<?php echo $userID; ?>">View your
profile</a></li>
                                       </ul>
                              <?php
                   } else {
                              ?>
                              <h2>Register</h2>
                              <p>It only takes a minute to register.</p>
                              <?php displayErrorMessages($messages); ?>
                              <form action="<?php $_SERVER['PHP_SELF']; ?>" method="post">
                                       <fieldset>
                                                 <legend>Site Details</legend>
                                                 <p class="errorMessage">
                                                          <label for="fldUserName">User name:</label>
                                                          <input type="text" id="fldUserName" name="fldUserName"
value="<?php echo stripslashes($fldUserName); ?>" maxlength="15" />
                                                 </p>
                                                 <p>
                                                          <label for="fldFirstName">First name:</label>
                                                          <input type="text" id="fldFirstName" name="fldFirstName"
value="<?php echo stripslashes($fldFirstName); ?>" maxlength="30" />
                                                 </p>
                                                 <p>
                                                          <label for="fldLastName">Last name:</label>
                                                          <input type="text" id="fldLastName" name="fldLastName"
value="<?php echo stripslashes($fldLastName); ?>" maxlength="30" />
                                                 </p>
                                       </fieldset>
                                       <fieldset>
                                                 <legend>Password</legend>
                                                 <p>
                                                          <label for="fldPassword">Password:</label>
                                                          <input type="password" id="fldPassword"
name="fldPassword" maxlength="15" />
                                                 </p>
                                                 <p>
                                                          <label for="fldPasswordConfirm">Confirm
password:</label>
                                                          <input type="password" id="fldPasswordConfirm"
name="fldPasswordConfirm" maxlength="15" />
                                                 </p>
                                       </fieldset>
                                       <fieldset>
                                                 <legend>E-mail address</legend>
                                                 <p>
                                                          <label for="fldEmail">E-mail address:</label>
                                                          <input type="text" id="fldEmail" name="fldEmail"
value="<?php echo stripslashes($fldEmail); ?>" maxlength="80" />
                                                 </p>
                                                 <p>

Designing for Dynamic Content                                                                    Jason Gillyon
WEB022                                                                                      Web Design Level 2
Socio.cc – Social Networking for Web Professionals                                                           69


                                                       <label for="fldEmailConfirm">Confirm e-mail
address:</label>
                                                        <input type="text" id="fldEmailConfirm"
name="fldEmailConfirm" value="<?php echo stripslashes($fldEmailConfirm); ?>" maxlength="80" />
                                             </p>
                                   </fieldset>
                                   <fieldset>
                                             <legend>Profile</legend>
                                             <p>
                                                        <label for="fldCompany">Company:</label>
                                                        <input type="text" id="fldCompany" name="fldCompany"
value="<?php echo stripslashes($fldCompany); ?>" maxlength="30" />
                                             </p>
                                             <p>
                                                        <label for="fldWebSite">Web site:</label>
                                                        <input type="text" id="fldWebSite" name="fldWebSite"
value="<?php echo stripslashes($fldWebSite); ?>" maxlength="100" />
                                             </p>
                                             <p>
                                                        <label for="fldLocation">Location:</label>
                                                        <input type="text" id="fldLocation" name="fldLocation"
value="<?php echo stripslashes($fldLocation); ?>" maxlength="40" />
                                             </p>
                                             <p>
                                                        <label for="fldAbout">About:</label>
                                                        <textarea id="fldAbout" name="fldAbout" cols=""
rows=""><?php echo stripslashes($fldAbout); ?></textarea>
                                             </p>
                                   </fieldset>
                                   <p><input type="submit" id="fldSubmit" name="fldSubmit" value="Register"
class="auto" /></p>
                           </form>
                  <?php
                  }
                  require_once 'assets/inc/footer.php';
                  ?>
        </body>
</html>

9.2.13 search.php
Contains the code to display the member list and to process and display search results.

<?php
define ("IN_SITE", 1);
require_once 'assets/inc/global.php';

// assign easier variable names and trim white space
$q = trim($_GET['q']);
$type = $_GET['type'];

// if magic quotes on, strip slahes
if (get_magic_quotes_gpc()) {
          $q = stripslashes($q);
          $type = stripslashes($type);
}

// run through mysql_real_escape_string to prevent sql injection
$q = mysql_real_escape_string($q);
$type = mysql_real_escape_string($type);

// check to see if $q is empty
if (empty($q)) {
          // set type to default to show all members
          $type = "default";
}

// get type of search
Designing for Dynamic Content                                                                   Jason Gillyon
WEB022                                                                                     Web Design Level 2
Socio.cc – Social Networking for Web Professionals                                                              70


switch ($type) {
           case "username":
                    $sql = "SELECT * FROM `users` WHERE `username` LIKE '%$q%' ORDER BY `userName`
ASC";
                    break;
           case "company":
                    $sql = "SELECT * FROM `users` WHERE `company` LIKE '%$q%' ORDER BY `userName`
ASC";
                    break;
           case "email":
                    $sql = "SELECT * FROM `users` WHERE `email` = '$q'";
                    break;
           case "skill":
                    // query - join skills table to users for search on skills
                    $sql = "SELECT *, COUNT(skill) FROM `skills` INNER JOIN `users` ON skills.userID =
users.userID WHERE";
                    // seperate skills from $q into array
                    $items = explode(" ", $q);
                    // count items in array {
                    $itemsCount = count($items);
                    $i = 0;
                    // look through skills in array
                    foreach ($items as $item) {
                               // strip out everything but letters and numbers and .
                               // adapted from http://www.thescripts.com/forum/thread2169.html
                               $item = preg_replace('/[^0-9a-zA-Z]/i','', $item);
                               // convert to lowercase
                               $item = strtolower($item);
                               // if not first item, add OR to query
                               if ($i != 0) {
                                            $sql .= " OR";
                               }
                               // append to query
                               $sql .= " skills.skill = ‘$item'";
                               $i++;
                    }
                    // group results by user id and sort by name asc
                    $sql .= " GROUP BY users.userID HAVING COUNT(skill) = '$itemsCount' ORDER BY
`userName` ASC";
                    break;
           default:
                    // if default, show member list
                    $sql = "SELECT * FROM `users` ORDER BY `userName` ASC";
                    // used later on for showing member list instead of search
                    $memberList = 1;
                    break;
}
// run query
$result = mysql_query($sql);
?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
           <head>
                    <title>Socio.cc &raquo; <?php if ($memberList) { echo "Member List"; } else { echo "Search"; }
?></title>
                    <?php require_once 'assets/inc/meta.php'; ?>
           </head>
           <body id="search">
                    <?php require_once("assets/inc/header.php"); ?>
                    <h2><?php if ($memberList) { echo "Member List"; } else { echo "Search"; } ?></h2>
                    <?php
                    // check how many results found
                    if (mysql_num_rows($result) == 0) {
                               echo "<p>No results found</p>";
                    } else {
                               // check to see if not member list
                               if (!$memberList) {

Designing for Dynamic Content                                                                     Jason Gillyon
WEB022                                                                                       Web Design Level 2
Socio.cc – Social Networking for Web Professionals                                                                     71


                                       // echo num results, if only one result dont add s on to end of output
                                       if (mysql_num_rows($result) != 1) {
                                                $s = "s";
                                       }
                                       echo "<p>Your search returned " . mysql_num_rows($result) . " result" . $s .
".</p>";
                            }
                            // loop through results
                            while ($row = mysql_fetch_array($result)) {
                                      ?>
                                      <div class="memberResult">
                                               <div><a href="profile.php?id=<?php echo $row['userID']; ?>"><img
src="<?php echo getUserImg($row['userID']); ?>" alt="<?php echo $row['userName']; ?>" /></a></div>
                                               <h3><a href="profile.php?id=<?php echo $row['userID']; ?>"><?php
echo $row['userName']; ?></a></h3>
                                               <p>
                                                       <strong>Real name:</strong> <?php echo
$row['firstName']; ?> <?php echo $row['lastName']; ?><br />
                                                       <?php if (!empty($row['company'])) { ?>
                                                                 <strong>Company:</strong> <?php echo
$row['company']; ?><br />
                                                       <?php } if (!empty($row['location'])) { ?>
                                                                 <strong>Location:</strong> <?php echo
$row['location']; ?><br />
                                                       <?php } if (!empty($row['webSite'])) { ?>
                                                                 <strong>Web site:</strong> <a href="<?php echo
$row['webSite']; ?>" rel="external"><?php echo $row['webSite']; ?></a><br />
                                                       <?php } ?>
                                                       <strong>Last logged in:</strong> <?php echo
formatDate($row['dateTimeLastLogin']); ?><br />
                                                       <strong>Skills:</strong>
                                                       <?php
                                                       // get user id
                                                       $queryUserID = $row['userID'];
                                                       // query - select all skills for specific user from skill table
order by skill name ascending
                                                       $sqlSkill = "SELECT * FROM `skills` WHERE `userID` =
'$queryUserID' ORDER BY `skill` ASC";
                                                       // run query
                                                       $resultSkill = mysql_query($sqlSkill);
                                                       // check to see how many results
                                                       if (mysql_num_rows($resultSkill) == 0) {
                                                                 // no results
                                                                 echo "<em>None entered</em>";
                                                       } else {
                                                                 // set i to 1
                                                                 $i = 1;
                                                                 // set c to 0
                                                                 $c = 0;
                                                                 // set stop to 0
                                                                 $stop = 0;
                                                                 // loop through results and create bulleted list
                                                                 while ($rowSkill = mysql_fetch_array($resultSkill))
{
                                                                             $c += strlen($rowSkill['skill']) + 2;
                                                                             if ($c < 90) {
                                                                                        ?><a
href="search.php?q=<?php echo $rowSkill['skill']; ?>&amp;type=skill"><?php echo $rowSkill['skill']; ?></a><?php
                                                                                        // check to see if not last result
                                                                                        if
(mysql_num_rows($resultSkill) != $i) {
                                                                                                  echo ", ";
                                                                                        }
                                                                             } elseif ($stop) {
                                                                                        // do nothing
                                                                             } else {
                                                                                        // else add ...

Designing for Dynamic Content                                                                          Jason Gillyon
WEB022                                                                                            Web Design Level 2
Socio.cc – Social Networking for Web Professionals                                                      72


                                                                              echo "<a
href=\"profile.php?id=".$row['userID']."\">...</a>";
                                                                              // set stop to 1
                                                                              $stop = 1;
                                                                     }
                                                                     // increment id
                                                                     $i++;
                                                                 }
                                                           }
                                                           ?>
                                                 </p>
                                        </div>
                                        <?php
                               }
                      }
                      require_once 'assets/inc/footer.php'; ?>
            </body>
</html>

9.2.14 assets/css/main.css
Contains all the CSS used on the web site.

/* All */

*{
            margin:0;
            padding:0;
}

html {
            font-size:100%;
}

body {
            font-family:Verdana, Arial, Helvetica, sans-serif;
            font-size:62.5%;
            text-align:center;
}

#wrapper {
       margin:1em auto;
       text-align:left;
       width:760px;
}

#content {
         line-height:1.5em;
}

h1, h2, h3, h4, h5, h6, p, ul {
         margin-bottom:0.3em;
}

h1 {
            font-size:1.8em;
}

h2 {
            font-size:1.6em;
}

h3 {
            font-size:1.4em;
}

h4 {
            font-size:1.3em;
Designing for Dynamic Content                                                                 Jason Gillyon
WEB022                                                                                   Web Design Level 2
Socio.cc – Social Networking for Web Professionals                  73


}

h5 {
             font-size:1.2em;
}

h6 {
             font-size:1.1em;
}

li {
             margin-left:2.0em;
}

a:link, a:visited {
           color:#0066CC;
}

a:hover {
             color:#0C6;
}

.error {
             color:#F30;
}

/* forms */

input:focus, select:focus, textarea:focus {
         background:#FFF5CC;
}

label {
             float:left;
             font-weight:bold;
             margin-right:0.5em;
             text-align:right;
             width:16em;
}

input, select, textarea {
          border:1px solid #999;
}

input, select {
          width:14em;
}

.auto {
             width:auto;
}

textarea {
         height:10em;
         width:28em;
}

fieldset {
             border:1px solid #ccc;
             margin:0.5em;
             padding:0.5em;
}

legend {
             border:1px solid #ccc;
             font-weight:bold;
             margin-left:1em;

Designing for Dynamic Content                             Jason Gillyon
WEB022                                               Web Design Level 2
Socio.cc – Social Networking for Web Professionals                                      74


            padding:0.2em;
}

/* Header */

#header {
        background:#FFF url(../img/header.png) no-repeat top left;
        color:#000;
        height:80px;
        position:relative;
}

            #header h1 {
                    display:none;
            }

            #header img.overlay {
                    border:0;
                    left:20px;
                    height:40px;
                    position:absolute;
                    top:20px;
                    width:120px;
            }

            #header div {
                    position:absolute;
                    top:30px;
                    right:10px;
            }

/* Nav */

#nav {
            background:#959595 url(../img/nav-bg.png) repeat top left;
            border:1px solid #C0C0C0;
            color:#FFF;
            padding:0.5em;
            position:relative;
}
            #nav ul {
                        margin:0;
            }

                        #nav ul li {
                                  display:inline;
                                  list-style:none;
                                  margin:0 0.8em 0 0;
                                  padding:0;
                        }

            #nav ul.memberControls {
                     position:absolute;
                     right:0.5em;
                     top:0.5em;
            }

                        #nav ul.memberControls li {
                                 margin:0 0 0 0.8em;
                        }

            #nav a:link, #nav a:visited {
                     color:#FFF;
            }

            #nav a:hover {
                    color:#F39;

Designing for Dynamic Content                                                 Jason Gillyon
WEB022                                                                   Web Design Level 2
Socio.cc – Social Networking for Web Professionals                                                       75


            }


/* Content */
#content {
         background:#FFF;
         color:#000;
         padding:0.5em;
}

/* Footer */

#footer {
            background:#959595 url(../img/nav-bg.png) repeat top left;
            border:1px solid #C0C0C0;
            clear:both;
            color:#FFF;
            margin-bottom:1.0em;
            position:relative;
}

            #footer p {
                     padding:0.5em;
            }

            #footer ul {
                     position:absolute;
                     right:0.5em;
                     top:0.5em;
            }

                      #footer ul li {
                               display:inline;
                               list-style:none;
                               margin:0 0 0 0.8em;
                               padding:0;
                      }

            #footer a:link, #footer a:visited {
                     color:#FFF;
            }

            #footer a:hover {
                     color:#F39;
            }

/* Page Specific */

            /* Home */

            #home #content p, #home #content h2, #home #content h2, #home #content li {
                   line-height:1.5em;
            }

            #home #content .intro {
                   margin-bottom:0.8em;
            }

            #home #content #newMembers {
                   border:1px solid #ccc;
                   float:right;
                   margin-bottom:0.5em;
                   margin-left:0.5em;
                   text-align:center;
                   width:140px;
            }



Designing for Dynamic Content                                                                  Jason Gillyon
WEB022                                                                                    Web Design Level 2
Socio.cc – Social Networking for Web Professionals                                                        76


               #home #content #newMembers .picture {
                      margin:0 auto;
                      max-height:100px;
                      padding:0;
                      text-align:center;
                      width:100px;
               }

                        #home #content #newMembers .picture img {
                               border:1px solid #F39;
                        }

       #home #content #homeContainer {
              margin-right:150px;
       }

       #home #content #loggedIn {
              background:#EEE;
              border:1px solid #ccc;
              height:6.2em;
              margin-bottom:0.8em;
              padding:0.5em;
       }

               #home #content #loggedIn img {
                      float:left;
                      border:1px solid #F39;
                      margin:0 0.5em 0.5em 0;
               }

       #home #content #registerOrLogIn {
              background:#EEE;
              border:1px solid #ccc;
              height:10em;
              margin-bottom:0.8em;
              padding:1em;
              position:relative;
       }

               #home #content #registerOrLogIn #logIn{
                      border-left:1px solid #ccc;
                      height:10em;
                      right:0;
                      padding:1em;
                      position:absolute;
                      top:0;
                      width:50%;
               }

                        #home #content #registerOrLogIn #logIn label {
                               float:left;
                               width:8em;
                        }

       #home #content #skillCloud {
              font-size:1.4em;
              padding:0.5em 10%;
              text-align:justify;
       }

               #home #content #skillCloud a:link, #home #content #skillCloud a:visited {
                      color:#F39;
                      text-decoration:none;
               }

               #home #content #skillCloud a:hover {
                      color:#0C6;

Designing for Dynamic Content                                                                   Jason Gillyon
WEB022                                                                                     Web Design Level 2
Socio.cc – Social Networking for Web Professionals                                    77


                   }

                   #home #content #skillCloud p {
                          line-height:2.4em;
                   }

       /* Search / Member List */

       #search #content .memberResult {
               clear:both;
               border:1px solid #ccc;
               height:102px;
               margin:1em;
               padding:0.5em;
               background:#EEE;
       }

                   #search #content .memberResult div {
                           float:left;
                           height:100px;
                           margin:0 1.0em 0.5em 0;
                           width:100px;
                   }

                            #search #content .memberResult div img {
                                    border:1px solid #F39;
                            }

                   #search #content .memberResult p {
                           line-height:1.3em;
                   }

       /* FAQ */

       #faq #content h3, #faq #content p {
               line-height:2.0em;
       }

       /* Register / Edit Profile */

       #register #content p, #editProfile #content p {
                line-height:2.0em;
       }

       /* Profile */

       #profile #content #sidebar {
                 float:left;
                 margin:0.5em;
                 width:120px;
       }

                   #profile #content #sidebar img {
                             border:1px solid #F39;
                   }

       #profile #content #main {
                 margin-left:150px;
                 margin-top:0;
       }

       #profile #content #friendsList .container {
                 float:left;
                 margin-bottom:1.0em;
                 text-align:center;
                 width:24%;
       }

Designing for Dynamic Content                                               Jason Gillyon
WEB022                                                                 Web Design Level 2
Socio.cc – Social Networking for Web Professionals                                                                   78



                   #profile #content #friendsList .container div {
                             height:60px;
                             margin:0 auto;
                             width:60px;
                   }

                             #profile #content #friendsList .container div img {
                                       border:1px solid #F39;
                             }

         #profile #content #sendEmail {
                   clear:both;
         }

         /* Edit Skills */

         #editSkills #content .deleteSkills label {
                   float:none;
                   margin-left:0.5em;
         }

         #editSkills #content .deleteSkills span {
                   float:left;
                   font-weight:bold;
                   margin-right:0.5em;
                   text-align:right;
                   width:16em;
         }

9.2.15 assets/email-templates/contact.txt
E-mail template used for sending e-mails to the web site through contact.php.

Name: [Name]
E-mail address: [Email]
Subject: [Subject]
Message:

[Message]

9.2.16 assets/email-templates/friends.txt
E-mail template used for sending e-mail to friend when user adds them and they are not already on
their friends list.

Hello [FirstName],

[UserName] has added you to his/her friend list.

If you would like to add [UserName] to your friends list too, visit their profile using the link below and click the add
to friends list link:

[Site]profile.php?id=[UserID]

Note: You must be logged in to see the add to friends list link.

Enjoy!

[Site]




Designing for Dynamic Content                                                                         Jason Gillyon
WEB022                                                                                           Web Design Level 2
Socio.cc – Social Networking for Web Professionals                                                                      79


9.2.17 assets/email-templates/mutual-friends.txt
E-mail template used for sending e-mail to friend when user adds them and they are already on their
friends list.

Hello [FirstName],

[UserName] is already on your friends list, but has now added you to his/her friend list.

View their profile at:

[Site]profile.php?id=[UserID]

Enjoy!

[Site]

9.2.18 assets/email-templates/register.txt
E-mail template used for sending e-mail to user when they register.

Hello [FirstName],

Thank you for registering on Socio.cc, the social network for web professionals.

You can log on at [Site] with the following details:

User name: [UserName]
Password: [Password]

Log on now to add a picture and your skills to your profile and connect with other people in your industry.

Enjoy!

[Site]

9.2.19 assets/email-templates/user-message.txt
E-mail template used for sending e-mail to user from profile.php from another user.

Hello [FirstName],

[UserName] has sent you the following message.

[Message]

If you would like to reply to [UserName] visit their profile using the link below and fill out the contact user form:

[Site]profile.php?id=[UserID]

Note: You must be logged in to see the contact user form.

Enjoy!

[Site]

If you believe this message to be spam, please forward this message to us at: [Admin]

9.2.20 assets/inc/config.php
Contains the configuration values used on the web site, including the database connection variables.

<?php
if (!defined("IN_SITE")) {
           die ('Error: This file can\'t be accessed directly');
}

// database config
Designing for Dynamic Content                                                                         Jason Gillyon
WEB022                                                                                           Web Design Level 2
Socio.cc – Social Networking for Web Professionals                                                                 80


$db['hostname'] = "localhost";
$db['database'] = "hullweb_jgillyon";
$db['username'] = "hullweb_jgillyon";
$db['password'] = "afg516";

// site config
$site['baseUrl'] = "http://www.webdesignhull.lincoln.ac.uk/jgillyon/";
$site['dateFormat'] = "d/m/Y";
$site['emailFrom'] = "noreply@socio.cc";
$site['emailAdmin'] = "jason.gillyon@gmail.com";

// user logo config
$logo['maxSize'] = 2048;
?>

9.2.21 assets/inc/footer.php
Contains the code used in the footer of the web site.

<?php
if (!defined("IN_SITE")) {
           die ('Error: This file can\'t be accessed directly');
}
?>
                     </div>
                     <div id="footer">
                                <p>&copy;2007 Jason Gillyon</p>
                                <ul>
                                          <li><a href="http://validator.w3.org/check?uri=referer">Valid XHTML</a></li>
                                          <li><a href="http://jigsaw.w3.org/css-validator/check/referer">Valid
CSS</a></li>
                                          <li><a href="privacy-policy.php">Privacy Policy</a></li>
                                          <li><a href="contact.php">Contact</a></li>
                                </ul>
                     </div>
           </div>

9.2.22 assets/inc/functions.php
Contains all the user written functions for the web site.

<?php
if (!defined("IN_SITE")) {
           die ('Error: This file can\'t be accessed directly');
}

// function: check log in details are correct
function checkLogIn($userName, $password) {
          // set global variables
          global $userID;
          // query - select where user name and password combination are same as entered in log in form
          $sql = "SELECT `userID` FROM `users` WHERE `userName` = '$userName' AND `password` =
'$password' LIMIT 1";
          // run query
          $result = mysql_query($sql);
          // check to see how many rows returned
          if (mysql_num_rows($result) == 1) {
                    // user name and password combination correct
                    // set user id
                    $userID = mysql_result($result, 0, "userID");
                    // update last log in
                    $lastLogIn = date("Y-m-d H:i:s");
                              // query - update last login date and time for user
                              $sql = "UPDATE `users` SET `dateTimeLastLogin` = '$lastLogIn' WHERE `userID` =
'$userID' LIMIT 1";
                              // run query
                              $result = mysql_query($sql);
                    return true;

Designing for Dynamic Content                                                                       Jason Gillyon
WEB022                                                                                         Web Design Level 2
Socio.cc – Social Networking for Web Professionals                                                        81


         } else {
                    // user name and password combination incorrect
                    return false;
         }
}

// function: get user details
function getUserDetails($userID) {
          // query - select where user name and password combination are same as entered in log in form
          $sql = "SELECT * FROM `users` WHERE `userID` = '$userID'";
          // run query
          $result = mysql_query($sql);
          // check to see how many rows returned
          if (mysql_num_rows($result) == 1) {
                    // user id exists - return function result as array
                    return mysql_fetch_array($result);
          } else {
                    // user id does not exists
                    return false;
          }
}

// function: format date
function formatDate($date) {
          // set global variables
          global $site;
          // get timestamp from $date
          $date = strtotime($date);
          // if $date = date today, return today
          if (date("Y-m-d", $date) == date("Y-m-d")) {
                     return "Today";
          // if $date = date yesterday, return yesterday
          } elseif (date("Y-m-d", $date) == date("Y-m-d", time() - 60*60*24)) {
                     return "Yesterday";
          // else return date in format from config file
          } else {
                     return date($site['dateFormat'], $date);
          }
}

// function: process logo - resize logo to within specified size
// adapted from code snippet on http://www.999tutorials.com/tutorial-create-thumbnail-with-php.html
function processLogo($input, $ext, $maxHeight, $maxWidth, $appendName, $userID) {
          // switch between ext
          switch ($ext) {
                    case "jpg":
                              // if jpeg, create from jpeg
                              $img = imagecreatefromjpeg($input);
                              break;
                    case "gif":
                              // if gif, create from gif
                              $img = imagecreatefromgif($input);
                              break;
                    case "png":
                              // if png, create from png
                              $img = imagecreatefrompng($input);
                              break;
          }

         // get width and height of uploaded image
         $width = imagesx($img);
         $height = imagesy($img);

         if ($width > $height) {
                   //if width is larger than height
                   // set width to max width
                   $newWidth = $maxWidth;

Designing for Dynamic Content                                                                   Jason Gillyon
WEB022                                                                                     Web Design Level 2
Socio.cc – Social Networking for Web Professionals                                                             82


                    // work out ratio of height to width
                    $ratio = $height / $width;
                    // set height to width x ratio
                    $newHeight = $maxWidth * $ratio;
         } elseif ($height > $width) {
                    //if height is larger than width
                    // set height to max height
                    $newHeight = $maxHeight;
                    // work out ratio of width to height
                    $ratio = $width / $height;
                    // set width to height x ratio
                    $newWidth = $maxHeight * $ratio;
         } else {
                    // if height and width the same
                    // set height and width to max sizes
                    $newHeight = $maxHeight;
                    $newWidth = $maxWidth;
         }

         // create new canvas
         $newImage = imagecreatetruecolor($newWidth, $newHeight);
         // copy input image and resize to fit new canvas
         imagecopyresampled($newImage, $img, 0, 0, 0, 0, $newWidth, $newHeight, $width, $height);
         // save image as png
         imagepng($newImage, "assets/img/users/".$userID.$appendName.".png");
}

// function: display error messages
function displayErrorMessages($messages) {
          if (!empty($messages)) {
                    echo "<div class=\"error\">\n<p>Please correct the following errors:</p>\n<ul>";
                    for ($i = 0; $i < count($messages); $i++) {
                               echo "<li>".$messages[$i]."</li>";
                    }
                    echo "</ul>\n</div>";
          }
}

// function: get user image
// checks to see if user has profile pic, else returns default pic
function getUserImg($userID, $size = "") {
          if ($size == "sml") {
                    if (file_exists("assets/img/users/".$userID."-sml.png")) {
                               return "assets/img/users/".$userID."-sml.png";
                    } else {
                               return "assets/img/users/0-sml.png";
                    };
          } else {
                    if (file_exists("assets/img/users/".$userID.".png")) {
                               return "assets/img/users/".$userID.".png";
                    } else {
                               return "assets/img/users/0.png";
                    };
          }
}

// function: send email
// used to send emails and process placeholders
function sendEmail($to, $subject, $template, $search = "", $replace = "") {
          global $site;
          $message = str_replace($search, $replace, file_get_contents("assets/email-templates/".$template));
          if (mail($to, $subject, $message, "From: Socio.cc <".$site['emailFrom'].">")) {
                     return true;
          }
}
?>



Designing for Dynamic Content                                                                     Jason Gillyon
WEB022                                                                                       Web Design Level 2
Socio.cc – Social Networking for Web Professionals                                                                 83



9.2.23 global.php
Contains the database connection code, starts sessions and includes the necessary files.

<?php
if (!defined("IN_SITE")) {
           die ('Error: This file can\'t be accessed directly');
}

// require config file
require_once("config.php");
// require functions file
require_once("functions.php");

// connect to db
$dbh = mysql_pconnect($db['hostname'], $db['username'], $db['password']) or
die("MySQL Error: ".mysql_error());

// select db
mysql_select_db($db['database']) or
die("MySQL Error: ".mysql_error());

// set session name
session_name("wdn");

// start session
session_start();

// check if user wants to log out
if ($_REQUEST['do'] == "log-out") {
          // empty session variables
          $_SESSION['userName'] = "";
          $_SESSION['password'] = "";
}

// check if user logged in
if (checkLogIn($_SESSION['userName'], $_SESSION['password'])) {
          // logged in - get user details
          $userDetails = getUserDetails($userID);
}

?>

9.2.24 assets/inc/header.php
Contains the code used in the header of the web site.

<?php
if (!defined("IN_SITE")) {
            die ('Error: This file can\'t be accessed directly');
}
?>
                      <div id="wrapper">
                                 <div id="header">
                                           <h1><a href="index.php">Socio.cc</a></h1>
                                           <a href="index.php"><img src="assets/img/clear.gif" alt="" class="overlay"
/></a>
                                           <div>
                                                    <form action="search.php" method="get">
                                                             <p>
                                                                     <select id="type" name="type" class="auto">
                                                                               <option value="skill"<?php if ($type ==
"skill") { echo " selected=\"selected\""; }?>>Skills</option>
                                                                               <option value="company"<?php if ($type
== "company") { echo " selected=\"selected\""; }?>>Company</option>
                                                                               <option value="username"<?php if
($type == "username") { echo " selected=\"selected\""; }?>>User name</option>

Designing for Dynamic Content                                                                       Jason Gillyon
WEB022                                                                                         Web Design Level 2
Socio.cc – Social Networking for Web Professionals                                                              84


                                                                            <option value="email"<?php if ($type ==
"email") { echo " selected=\"selected\""; }?>>E-mail address</option>
                                                                   </select>
                                                                   <input type="text" id="q" name="q" value="<?php
echo $q; ?>" class="auto" />
                                                                   <input type="submit" value="Search" class="auto"
/>
                                                        </p>
                                              </form>
                                     </div>
                            </div>
                            <div id="nav">
                                     <ul>
                                              <li><a href="index.php">Home</a></li>
                                              <li><a href="search.php">Member List</a></li>
                                              <li><a href="faq.php">FAQ</a></li>
                                     </ul>
                                     <ul class="memberControls">
                                              <?php
                                              // check to see if user logged in
                                              if ($userDetails) {
                                                        ?>
                                                        <li><a href="edit-profile.php">Edit Profile</a></li>
                                                        <li><a href="edit-profile-image.php">Edit Profile
Image</a></li>
                                                        <li><a href="edit-skills.php">Edit Skills</a></li>
                                                        <li>-</li>
                                                        <li><a href="?do=log-out" onclick="return confirm('Are you
sure you want to log out?');">Log Out</a></li>
                                                        <?php
                                              } else {
                                                        ?>
                                                        <li><a href="log-in.php">Log In</a></li>
                                                        <li>or</li>
                                                        <li><a href="register.php">Register</a></li>
                                                        <?php
                                              }
                                              ?>
                                     </ul>
                            </div>
                            <div id="content">

9.2.25 assets/inc/ meta.php
Contains the code used within the head section of the web site, including some JavaScript used for
tracking web site statistics using Google Analytics (http://www.google.com/analytics/).

<?php
if (!defined("IN_SITE")) {
           die ('Error: This file can\'t be accessed directly');
}
?>
                     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
                     <link href="assets/css/main.css" rel="stylesheet" type="text/css" />
                     <script type="text/javascript" src="assets/js/main.js"></script>
                     <script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
           </script>
                     <script type="text/javascript">
                     _uacct = "UA-394555-8";
                     urchinTracker();
                     </script>




Designing for Dynamic Content                                                                       Jason Gillyon
WEB022                                                                                         Web Design Level 2
Socio.cc – Social Networking for Web Professionals                                                            85


9.2.26 assets/js/main.js
Contains all the JavaScript used on the web site.

// opens links with rel="external" in new window and adds a title attribue that tells the user will open in new
window
// adapted from http://www.sitepoint.com/article/standards-compliant-world
function externalLinks() {
          // checks to see whether document.getElementsByTagName is supported by browser, if not the rest of
the script isn't run
          if (!document.getElementsByTagName) return;
          // gathers all the <a> tags into the variable anchors
          var anchors = document.getElementsByTagName("a");
                     // the for loop loops through the list of <a> tags
                     for (var i=0; i<anchors.length; i++) {
                                // sets anchor to the current <a> tag
                                var anchor = anchors[i];
                                // if the <a> has an href attribute and has a rel of external
                                if (anchor.getAttribute("href") && anchor.getAttribute("rel") == "external") {
                                           // set target attribute of <a> to _blank
                                           anchor.target = "_blank";
                                           // set title attribute of <a> to Opens in new window
                                           anchor.title = "Opens in new window";
                                }
                     }
          }
window.onload = externalLinks;

9.2.27 Connections/conn_dynamiccontent.php
Used by Dreamweaver for communicating with the MySQL server.

<?php
# FileName="Connection_php_mysql.htm"
# Type="MYSQL"
# HTTP="true"
$hostname_conn_dynamiccontent = "localhost";
$database_conn_dynamiccontent = "hullweb_jgillyon";
$username_conn_dynamiccontent = "hullweb_jgillyon";
$password_conn_dynamiccontent = "afg516";
$conn_dynamiccontent = mysql_pconnect($hostname_conn_dynamiccontent,
$username_conn_dynamiccontent, $password_conn_dynamiccontent) or
trigger_error(mysql_error(),E_USER_ERROR);
?>

9.2.28 db-setup/create-tables.php
Used to create the database tables.

<?php
// include assets/inc/global.php file which includes the database connection code
// the database name, user, pass and host must be specified in the assets/inc/config.php file
define ("IN_SITE", 1);
require_once '../assets/inc/global.php';

// query - create users table
$sql = "CREATE TABLE users (userID int(5) NOT NULL AUTO_INCREMENT,
                   userName varchar(15) NOT NULL,
                   password varchar(32) NOT NULL,
                   email varchar(80) NOT NULL,
                   firstName varchar(30) NOT NULL,
                   lastName varchar(30) NOT NULL,
                   company varchar(30) default NULL,
                   webSite varchar(100) default NULL,
                   location varchar(40) default NULL,
                   about text default NULL,
                   dateTimeCreated datetime NOT NULL,
                   dateTimeUpdated datetime,

Designing for Dynamic Content                                                                    Jason Gillyon
WEB022                                                                                      Web Design Level 2
Socio.cc – Social Networking for Web Professionals                                                       86


                  dateTimeLastLogin datetime,
                  PRIMARY KEY (userID)) TYPE = MYISAM";

// run query
$result = mysql_query($sql);

// check if worked
if ($result) {
           echo "<p>Users table created</p>";
} else {
           echo "<p>Users table NOT created because: ".mysql_error()."</p>";
}

// query - create friends table
$sql = "CREATE TABLE friends (friendsID int(5) NOT NULL AUTO_INCREMENT,
                    userID int(5) NOT NULL,
                    friendID int(5) NOT NULL,
                    dateTimeAdded datetime NOT NULL,
                    PRIMARY KEY (friendsID)) TYPE = MYISAM";

// run query
$result = mysql_query($sql);

// check if worked
if ($result) {
           echo "<p>Friends table created</p>";
} else {
           echo "<p>Friends table NOT created because: ".mysql_error()."</p>";
}

// query - create skills table
$sql = "CREATE TABLE skills (skillID int(5) NOT NULL AUTO_INCREMENT,
                   userID int(5) NOT NULL,
                   skill varchar(30) NOT NULL,
                   dateTimeAdded datetime NOT NULL,
                   PRIMARY KEY (skillID)) TYPE = MYISAM";

// run query
$result = mysql_query($sql);

// check if worked
if ($result) {
           echo "<p>Skills table created</p>";
} else {
           echo "<p>Skills table NOT created because: ".mysql_error()."</p>";
}
?>

9.2.29 php-info.php
Outputs information about the php configuration, server information, enviroment, etc.

<?php
// outputs information about the php configuration, server information, enviroment, etc
phpinfo();
?>




Designing for Dynamic Content                                                                  Jason Gillyon
WEB022                                                                                    Web Design Level 2