WebSite Development with PHP

							  How to Build
 Super Dynamic
  Website With
PHP/MySQL(Module 1)
      Brought to you by:




     Vitalis Chime (developer)
     http://nigcomhost.com
what you are going to learn in this guide.
At the completion of this book you will be proficient in;
    Building a website from the scratch
    Creating a MySQL database connection online and offline
    Creating a MySQL database query
    Using PhpMyAdmin to manage a database
    Adding MySQL database privileges
    Developing a PHP applications
    Creating a PHP server sides scripts like login scripts, log out
      scripts etc
    Building a site only authorized user can access
    Creating PHP server variables like session variables, form
      variables, cookies etc
    Creating PHP search page
    Creating PHP Update, Insert and Delete record page
    Creating PHP mail ( ) function
    Hosting a website with Cpanel host
      Introduction
To begin building your dynamic website, you need an application server.
An application server is software that helps a web server process web
pages containing server-side scripts or tags. When such a page is
requested by a browser, the web server hands the page off to the
application server for processing before sending the page to the browser.
We are going to use php application server for our development.

PHP is a web programming language that enables you build a dynamic
website easily. The advent of php has made web programming easily due
to the simplicity of the language compared with that of java. Most web
development applications that have built-in php will even do the coding
aspect of the job for, so all you need to do is to provide it with the
necessary information.

How to install PHP server application.
You can install PHP application server by downloading it directly from
PHP website www.php.net/downloads.php. After installation you must
manually configure MySQL extension that allows you to work with
MySQL database server. Also you must create a root folder for your
application separately. This configuration can pose a challenge to you
especially if you are new to web development but I am going to give you
a 3-in-1 application server that will do this entire configuration for you
automatically. This server contains PHP 5, MySQL and Apache full
modules. You can download this server at http://bit.ly/OU786 .




Installing wampserver
Double click on WampServer installation setup
Click next on the setup installation wizard
You must accept License agreement before continuing
Click “I accept the agreement” then
Click Next
Choose a folder you want you want install your server. If you don’t know,
just click next and setup will choose a folder for you.
Enable “create quick Launch icon” and “create a desktop icon” and click
next. This will be automatically enabled.
Click install then wait for installation to complete.
After installation, wizard will ask you to choose your default browser.
This will be used to test-run your work. If you don’t know, just click next.
Wizard will ask you to provide your HOST and SMTP configuration
details like your email address and website address.

After installation, your server will appear at the task bar as shown below;




Having installed our PHP Server application, we are now going to choose
a PHP development environment. There are different PHP development
environments some of those are; NetBeans, Dreamweaver.
We are going to use Dreamweaver as our development environment.
Dreamweaver multi-language application that enables you develop a site
with HTML, ASP.NET, PHP, COLDFUSION, JAVA programming
language. It will help you do the major coding aspect of your website
automatically. This is best suitable for both beginner and advanced users.
Installing Dreamweaver Application
Double click on the Dreamweaver installation setup




After wizard finish reading the content of the package,
Click next and Follow the instruction to complete the installation.



Opening PHP Development
Environment in Dreamweaver
Double click dreamweaver icon           on your computer desktop
When the application finished           loading, click on PHP. At the
welcome page you will find all the support programming language I told
you of earlier.

Now are ready to build our first PHP site….

Before you beginning building website with dreamweaver, you must first
of all define your site. Defining your site will enable your web
application allocates each site items to the appropriate places and identify
your testing server.


Defining a Site
Step 1: [ Defining Local info]

Click on Site menu in your development environment
Click new site
You will be taken to site definition window as shown below;
Click on advanced to switch to advanced menu.
Enter your site name and the local root folder. We are going to name our
site “my first php site’. Your local root folder should be the www folder
created by the wampserver wizard during installation. Browse to the
location of your wampserver usually the C: directory.
Specify the image folder to store your image. This will help not to mix
your images with other files in the site. Click on the folder beside the text
box then create a folder called “image” your folder should be inside the
www folder of the wampserver.

Step 2: [Defining Remote info]

Click on remote info
Select the remote access. Under remote access we have FTP,
Local/network, webDAV, RDS. If you want to work directly on your
Host, choose FTP. Then enter the FTP settings




Enter your ftp host. E.g. ftp.yoursite.com,
Your host directory e.g. public_html,
Your login username and password given to you by your hosting
company. If you don’t have a web hosting account you cannot host, go to
this website www.nigcomhost.com click on any of the web hosting plan
to place your order. Your host username and password will be sent to you.
If you plan to host your site after development, choose local/network
access. Enter the remote folder; your remote folder should be your www
folder. Check “refresh remote file list automatically” and “automatically
upload files to server on save”

Step 2: [Defining Testing Server]
Click on testing server
Select server model. Our server model here is PHP/MySQL
Select access as discussed above.
Finally click OK

If you look at the right side of the window under files panel, you
will see our site name ‘my first php site’.
Next we are going to set our site page properties. This will
enable us maintain a uniform font style and size as well as color.
Uniformity is very important for your site.
Now at the property inspector window below the development
environment, click page properties.


                                                                          My first php site




Here, select the page font. We are going to use Arial, Helvetica, sans-serif.
You can define your own font class by choosing edit font list.
Choose font size. 12 can be ok.
Select text color and background color. If you want to use image as your
background, click browse button and select your image location. The
disadvantage of using image as background is that it slows down the
loading of your site.
Under the alignment options, type 1 in each box. This will fit your page
properly at the margin.

Now we are going to define the link color and behavior.
Click on link. You can leave the font same as the page font unless you
want a different class of font for your links. Choose the font size and the
link color. The default link color is blue. You can define your link
behavior by selecting the underline style. I recommend “show underline
only on rollover.

Finally on page properties, we now give our page title. Page title plays
important role in SEO (Search Engine Optimization). Here we give our
title as “myphpsite| phptraining | vitalis chime” click OK.

At this point we are going to draw our site layout.
Just below the menu bar, click common and select layout.
                                               Layout cell
                                        Layout table
click on layout table
Draw a table at your workspace as show below




Right click on the layout environment and select align then click on
center alignment. Set the properties of the layout using the property
inspector bar below the screen. If you are new to dreamweaver, the
default height is 600 pixels while width is 800 pixels. You can use
Autostretch to fit the layout to full screen. Use the layout cell to split the
layout table into different segments for site contents.

In this guide we will be placing emphasis on membership site.
Here we are going to develop a site that only authorized users can access
with their username and password.

To achieve this, we will provide a login form where authorized users can
enter their username and password to enter into the main site and
membership registration form to register users who will login. This
platform will become our home page. E.g. the first page they will come in
contact with when they access our website.
We are going to add a login form to achieve this.
Creating Login Form
At the layout table we are going to draw a layout cell to enable us add our
form. Draw a cell and click on standard layout.
Click on insert menu and select form then click form




 A form will be created. Create a table inside the form to help arrange the
form fields. Click on insert menu and click on table. Enter the number of
column and row for your login form. Here, our row will be 3 and column
will be 2. You may want to set the table border to 0 so that it will not
display at the browser. We are now going to add form fields to collect our
authorized user’s username and password.
At the insert menu select form then select form fields like Text field,
TextArea, Button, check box, list/menu etc. Add a submit button when
you are through.

Create a login form as the one shown below;




Having created a login form, we are now going to create a registration
form. The process is that same as that of login form only that we are
going to add more form fields.
Below is our membership registration form;




You can have your membership registration form in a different page.
Saving your page.
Click on file and click save then enter the name then click save. The file
name for homepage should be index or default. Ensure your file is saved
the www folder or folder you created inside the www folder.

Now we have created our login form and membership registration form,
we will proceed to create a MySQL database to hold information of
registered user.

Launch your wampserver if it’s not on. You can do this through start
all programs wampserver start wampserver.

Click on wampserver icon at the bottom right of the windows task bar


Then click on phpMyAdmin. See phpMyAdmin window below;
                                                                        wampserver




Enter a name for your new database in the ‘create new database’ text box.
Select a database collation e.g. utf8_general_ci or armscii8_general_ci
Click create
Your database will be created.
The next step is to add a database table. Database use table to group data.
Example if your database will hold information about membership and
payment information then you will have 2 tables. In our membership
registration form we have 7 fields; each of the fields will be replicated
here. Enter the name for your table then enter the field number and click
GO. We are going to name our table as ‘members’.
In the field text box, enter the field name in the membership registration
form. i.e. username, password, FirstName, OtherNames, EmailAddress,
Phone, Date_of_Birth. If you take a look at the field names here, you will
observe that they are written without space and underscore that’s because
database does not permit space. So you should not use space when
entering your field names instead use underscore _.

Next you select the data type. Data type defines the kind of data you want
database to store in a field. Use CHAR for short data and VARCHAR for
long data. After that, enter the data length/values in our sample database
we used 50, 50, 60 etc
Next step is to choose MySQL database collation for each field. Database
collation has been treated earlier. Select a collation for each field. Below
the window, you will find storage engine these are various memory
database use to store your data. Select MyISAM. This storage engine has
a great performance. Use ARCHIVE for archive related data.
 Choose a collation for your storage engine and click SAVE.




This will automatically write SQL statement for your table.
Now we have created MySQL database to hold our registered user’s
information. Before we create a MySQL Database connection for our
membership registration form, we need to grant user privileges to our
database. Here only the privileged user can have access to our database.

Adding MySQL database privileges
Click on the database name at the left side of the phpMyAdmin window
Then click on privileges and click add new user.




Enter a username, select Host (choose localhost), enter a password and
password confirmation.
PHP will use this login information to connect to our MySQL database.
At the global privileges, check the privilege level you want to grant the
user. You can click check all if you are not sure.
Finally click GO.

Creating a MySQL database connection
Click on window menu and click on Databases
Click on + sign at the databases panel and
Click MySQL connection
A MySQL Database connection window will appear as
shown below;




Enter the connection details as defined in our MySQL privilege window
and click select. If MySQL login information is correct, your database
will be displayed in a new window. Click on the database name and click
Ok. You can click test to TEST your connection. Finally click OK.
We have successfully created a MyQSL connection. Below is our
database connection.




Now the next Step will be to create a recordset Query to communicate
with our database. Recordset is a collection of data retrieved from a
specified database.
Recordsets serve as an intermediary between the database storing the
content and the application server generating the page. Recordsets consist
of the data returned by a database query, and are temporarily stored in the
application server’s memory for faster data retrieval. The server discards
the recordset when it is no longer needed.

To create a recordset, click on binding panel in our databases panel as
shown in the foregoing window.
Click + sign and click recordset (Query)




Enter a name for your recordset. This can be any name, the common
practice for naming the recordset is to add surfix rs the name.
Select a connection for your database. Here our database connection is
my_DB_connection then select a table for your recordset. This is a table
that recordset will retrieve data from. Our members table will be used
here. Under the column, select field you want to include in your recordset.
All records will be selected by default. Click Selected if your want to
select few. Click OK when done.
 Having created our recordset, we will now proceed to add server
behavior.

Adding Server-side Behavior to Insert
Records into MySQL Database
On the databases panel, click server behavior
Click + sign and click Insert record




Select a database connection
Select database table to insert records into.
Under columns, select table to get value
At the values list menu, select the form to get value from
You can choose the data type you want database to use when storing your
data from Submit as list menu
You need to need to redirect the user to confirmation page when they
have successfully registered. To do this create another page and save it as
confirmation. Then click browse and select the confirmation page.
Finally click OK and save changes.

Creating User Authentication Server-
side Behavior to Login Registered users
to members Area
Click on server behavior at panel
Select user authentication click Login user
Login user window will appear as shown
In the login user window, select a form
field where server will get input from.
We will use our username and password
field at the login user form.
Select the database connection to
validate the connection. Choose a table
to validate. This should be the table for registered users then choose the
table username and password column
You need to tell the server where to redirect a user when login is
successful. This should be the member’s area. Enter the members area
page or click browse to locate the file. Also enter a page to redirect the
user when login is not successful. This should be the login page.
Select how you want to restrict access to the site from “Restrict access
based on” Username and password will be selected by default.
Click Ok and save the changes.

Please get module 2 for more….



Host your site cheap and get 1 year
FREE Domain                 @
www.nigcomhost.com