Part1: What do I need to get started?
Since I am doing this locally on my machine For this to work you will need to have the software below installed. Also if you want to apply this to your live web site, your hosting company need to run PHP MYSQL
-
WAMP5 : http://www.wampserver.com/en/index.php
-
EMS SQL Manager for MySQL (WAMP5 comes with a sql manager, you can use it, or which ever one you are familiar with.
Download and install both software, if you installed wamp5, by default it would create a folder located in C:\wamp\www\, create two more folders inside the www\ directory called localroot and the other webroot.
Click here to view Demo
Part2: Creating the database and tables.
| |
SET FOREIGN_KEY_CHECKS=0;
CREATE DATABASE `user_db`
CHARACTER SET 'latin1'
COLLATE 'latin1_swedish_ci';
USE `user_db`;
#
# Structure for the `members` table :
#
CREATE TABLE `members` (
`id` int(11) NOT NULL auto_increment,
`F_name` varchar(20) default NULL,
`L_name` varchar(20) default NULL,
`Age` varchar(3) default NULL,
`Birth_place` varchar(50) default NULL,
`dob` date default NULL,
`Favorite_Song` varchar(100) default NULL,
`fl_pic` varchar(299) default NULL,
`Phone_Num` varchar(14) default NULL,
`id_fl` int(11) default NULL,
PRIMARY KEY (`id`),
UNIQUE KEY `id` (`id`),
UNIQUE KEY `id_fl` (`id_fl`),
UNIQUE KEY `id_fl_2` (`id_fl`)
) ENGINE=InnoDB AUTO_INCREMENT=5 DEFAULT CHARSET=latin1;
#
# Data for the `members` table (LIMIT 0,500)
#
INSERT INTO `members` (`id`, `F_name`, `L_name`, `Age`, `Birth_place`, `dob`, `Favorite_Song`, `fl_pic`, `Phone_Num`, `id_fl`) VALUES
(1,'Mark','Williams','25','NewYork','1983-02-05','Bob marley - no woman no cry',NULL,'777-123-4567',NULL),
(2,'Rickey','Bells','15','Los Angeles','1988-02-12','3 Doors Down - Kryptonite',NULL,'123-876-9854',NULL),
(3,'Louis','Brinks','12','Arizona','1997-02-19','Linkin Park - Numb',NULL,'765-465-8875',NULL),
(4,'Mark','Calistro','56','Mars','2036-02-29','Mars Rock',NULL,'009-087-6554',NULL);
COMMIT;
|
Well we are finished with the database part.
Part3: Setting up Dreamweaver and creating the form.
Start up Dreamweaver and click New Site Manage Sites..
and click New Site. Click on the Advanced Tab and you will see the window below. Click on Local Info and fill in the information shown.
Local Info
Remote Info
Testing Server
When you are finished click ok, Done
Create a new php page and name it index.php
We will need to create the table below. Copy and paste the code into dreamweaver.
| |
<table width="334" border="0" cellspacing="3" cellpadding="3">
<tr bgcolor="#006699">
<td align="center" valign="middle">id</td>
<td align="left" valign="middle">First Name</td>
<td align="left" valign="middle">Last Name</td>
</tr>
<tr>
<td width="49" align="center" valign="middle" bgcolor="#999999"></td>
<td width="93" align="left" valign="middle" bgcolor="#999999"><a></a></td>
<td width="140" align="left" valign="middle" bgcolor="#999999"></td>
</tr>
</table> |
This will create the table below.

Part4: Connecting to the database.
Click on the Shown in the databases tab and click on MySQL Connection.
With that the window below will come up. Fill in the information shown below.
This information has to match up with what you created using EMS, The password I used is user.
Next click on Select, select the user_db database and click ok twice.
At this point we will create how the master page info will be displayed. Click on Bindings and create a new Recordset by clicking on the . Create the Recordset according to the image.

Click on the (+) next Recordset, you will see the fields shown above.

Now just drag the names over to the table from the recordset.

Click on rs1.F_name and to select it and enter more_info.php?id=<?php echo $row_rs1['id']; ?> in the link window. This will link you to the more details page.
Click and select the botton half of the table, if you click inside one of the tables and look at the window bottom bar you should see <tr> click on it and this will select the table.

When you click on the table tag it will select your table. With the table selected click on Server behavior located in the Application window. From there click on the and select Repeat Region

When the window above comes up click on show enter 10 and press ok. This limits the content number to 10 items per page.With that your table should change a little, the Item Template should come around it. If you have a large number of records you will need to set the number of record to display at a time.
Step5: Creating the details page
Create a new page called details.php, Same as before copy the code below and paste it into your page.
| |
<table width="453" border="0" cellspacing="3" cellpadding="3">
<tr>
<td width="169" align="right" valign="middle" bgcolor="#CCCCCC"><span class="style12">First Name</span></td>
<td width="263" bgcolor="#999999"><span class="style10"></span></td>
</tr>
<tr>
<td align="right" valign="middle" bgcolor="#CCCCCC"><span class="style12">Last Name</span></td>
<td bgcolor="#999999"><span class="style10"></span></td>
</tr>
<tr>
<td align="right" valign="middle" bgcolor="#CCCCCC"><span class="style12">Age</span></td>
<td bgcolor="#999999"><span class="style10"></span></td>
</tr>
<tr>
<td align="right" valign="middle" bgcolor="#CCCCCC"><span class="style12">Birth Place</span></td>
<td bgcolor="#999999"><span class="style10"></span></td>
</tr>
<tr>
<td align="right" valign="middle" bgcolor="#CCCCCC"><span class="style12">Date of Birth</span></td>
<td bgcolor="#999999"><span class="style10"></span></td>
</tr>
<tr>
<td align="right" valign="middle" bgcolor="#CCCCCC"><span class="style12">Favorite Song</span></td>
<td bgcolor="#999999"><span class="style10"></span></td>
</tr>
<tr>
<td align="right" valign="middle" bgcolor="#CCCCCC"><span class="style12">Phone Number</span></td>
<td bgcolor="#999999"><span class="style10"></span></td>
</tr>
</table> |
Doing this will give you the table below.

Create a record set same as before. Now just drag the names over to the table from the recordset.

When you are finished you should have the table shown below.

Double click on the record ser name and fill in the information shown below. This will filter your content based on the id in the database.

Finished:
Well that is it, hope it came out to what you expected. If you have any question or comment about this tutorial, feel free to post a message on the forum.
I also created a video tutorial for this example click here you will have to register to view it.
This Tutorial was Created By Mark
© 2009 pixeldigest.com. All Rights Reserved. |