Creating manage links page with Dreamweaver CS3, PHP 5 and MySQL 5

• Web Designer
• Skills
• Portfolio
• Tutorials
• Contact
• Books for sale

Link Exchange System with Dreamweaver CS3, PHP, MySQL and CSS Part 2

<< Creating Login Page | Create Search Engine >>

Manage Links Page
Open links_list.php in admin folder and go to Modify > Templates > Apply Template to Page.... From the dialog window choose admin_temp and click Select. Save the file.

Replace Title Placeholder with Links, then select paragraph with Content Placeholder and press Delete key on your keyboard to remove it.

Now from the Server Behaviors tab in the Application panel click + sign and choose Recordset (Fig. 52).

Fig. 52

This will bring up a new dialog window which will allow us to create a recordset of items we want to display on the page.
We want to see the list of our links therefore we will give it a Name of rsLinks.
From the Connection dropdown menu choose our connection name - conndb and from Table dropdown menu choose the table from which we want the records to be selected - tbl_links.
We want all of the columns to be shown so we leave All selected in Columns section and we also would like the records to be displayed in the descending order with relation to the date (the latest links at the top) therefore from the Sort dropdown menu we choose linkdate and Descending.
You can click Test button to test if everything is ok. The result will not show any records because there is none on the database.
Now click OK to close this dialog window (Fig. 53).

Fig. 53

We have created a new recordset which is displayed in the Server Behaviors window (Fig. 54).

Fig. 54

Now go to the Code view, place your cursor after <p>Links</p> paragraph and press Enter on your keyboard to create a new line (Fig. 55).

Fig. 55

Go to Layout tab in Insert panel and click Table icon (Fig. 56).

Fig. 56

Create a table with 2 rows, 5 columns, leave Table width field empty. Set Border thickness, Cell padding and Cell spacing to be 0 and place Header in the Top position. Leave the rest as default and click OK to create a table (Fig. 57).

Fig. 57

Go to Design view, select the table and from the Table Id in the Properties panel choose tblrepeat (Fig. 58).

Fig. 58

Now that our table has formatting assigned to it we can start filling it in.
First we will create headers of the columns. To do it place your cursor in the first column of the first row and type Link (Fig. 59)

Fig. 59

Pressing TAB on your keyboard move to the next column headers and type in the following headers: Reciprocal, Approved, Remove, Edit.
Your table should look now like in Fig. 60.

Fig. 60

Open Bindings tab in Application panel (Fig. 61).

Fig. 61

Place your cursor in the first column of the second row of the table (under Link header), in Bindings panel select linkurl and click Insert button at the bottom of the panel window (Fig. 62).

Fig. 62

This will insert a dynamic field into our table cell which will display the URL of the link from the database (Fig. 63).

Fig. 63

Now move your cursor to the second column of the second row (under Reciprocal header). From the Bindings panel select linkrecip and click Insert to insert a dynamic field. You should now have two dynamic fields in your table.
Move your cursor to the next column (under Approved header) and type in Yes No, then go to the next column and type in Remove and in the last column type Edit.
Your table should now look like in Fig. 64.

Fig. 64

Now we will need to do some simple coding. Go to the Code view and identify the following lines:

<tr>
<td><?php echo $row_rsLinks['linkurl']; ?></td>
<td><?php echo $row_rsLinks['linkrecip']; ?></td>
<td>Yes No</td>
<td>Remove</td>
<td>Edit</td>
</tr>

Change the code so it displays as follow:

<tr>
<td><a href="<?php echo $row_rsLinks['linkurl']; ?>" target="_blank"><?php echo $row_rsLinks['linkurl']; ?></a></td>
<td><a href="<?php echo $row_rsLinks['linkrecip']; ?>" target="_blank">Link</a></td>
<td>Yes No</td>
<td>Remove</td>
<td>Edit</td>
</tr>

Now go to the next cell, place your cursor before word Yes and type
<?php if (.
Now from the Bindings panel select linkapproved and drag and drop it after the opening bracket which we have just typed in. This will insert the name of the instance $row_rsLinks['linkapproved']. After this type the following:
== 'y') { ?>.
Now move your cursor after word Yes and type
<?php } else if ($row_rsLinks['linkapproved'] == 'n') { ?>.
Now place your cursor after No and type
<?php } ?>.
Your code in between the <td></td> tags should now look like this:

<?php if ($row_rsLinks['linkapproved'] == 'y') { ?>Yes<?php } else if ($row_rsLinks['linkapproved'] == 'n') { ?>No<?php } ?>

Now let's apply some formatting to the Yes and No words so that they stand out from the normal text.
Select word Yes and in the Properties panel from the Style dropdown menu choose blueBold. Then do the same with word No except this time apply redBold class from the Style dropdown menu (Fig. 65).

Fig. 65

If you cannot see the menu in the Properties panel - click Refresh button in the middle - this should bring the menu back.

Go to Design view and move on to the next cell (under Remove header).
Select the Remove word inside the table cell and press the Browse for File button in the Properties panel (Fig. 66).

Fig. 66

In the new dialog window navigate to admin folder, select links_remove.php file and press Parameters button (Fig. 67).

Fig. 67

In the new pop up window type id in the Name column and in the Value column click the lightning button on the right (Fig. 68).

Fig. 68

Expand the recordset, select linkid (Fig. 69) and click OK, then OK again and once more.

Fig. 69

This has converted our Remove word into a link which links to the links_remove.php file (Fig. 70).

Fig. 70

Now select Edit word in the last cell and follow the same steps as with Remove link except this time select links_edit.php file from admin folder. Do not forget to add the same Parameter to the link (Fig. 71).

Fig. 71

Open links_remove.php, select the whole content of the file by pressing Ctrl+A and hit Delete key on your keyboard to remove the entire content.
Now go to Server Behaviors panel, click + button and choose Delete Record (Fig. 72).

Fig. 72

In the dialog window choose the following options:

First check if variable is defined: Primary key value
Connection: conndb
Table: tbl_links
Primary key column: linkid
Primary key value: URL Parameter - id
After deleting, go to: links_list.php
(Fig. 73)

Fig. 73

Click OK, save and close file.
Now let's go back to our links_list.php.
Place your cursor anywhere in the bottom row of the table and click <tr> selector in the status bar to select the entire row (Fig. 74).

Fig. 74

Now in the Server Behaviors panel click + sign and choose Repeat Region (Fig. 75).

Fig. 75

In the dialog pop up choose rsLinks from the Recordset dropdown menu and in the Show section type 30 Records at a Time. Click OK and save the file (Fig. 76).

Fig. 76

Because there is currently no records we don't want anyone to see an empty table. Instead we will hide the table and create a message to be displayed if the recordset is empty.

Select the entire table, go to Server Behaviors, click + sign and choose Show Region > Show If Recordset Is Not Empty (Fig. 77).

Fig. 77

In the new dialog window choose rsLinks from the Recordset dropdown menu, click OK and save the file (Fig. 78).

Fig. 78

If you test this page in the browser you will realise that our table has completely disappeared. This is because we have created a condition which shows table as long as there are records in the database.
Now let's create a message which will be displayed when there is not records in the database.

Go to the Code view and create a new line after
<?php } // Show if recordset not empty ?> (Fig. 79).

Fig. 79

Type in the following: <p>Sorry, there are no records matching your searching criteria.</p>.
Select the entire paragraph and from the Server Behaviors choose Show Region > Show If Recordset Is Empty (Fig. 80). Choose rsLinks from the dropdown menu and click OK. Save file and test it in the browser.
This time you should see our message displayed on the page.

Fig. 80

To ensure that everything is working as it should let's insert two records to the database and see if our table will appear again and the message will disappear.
Open Notepad or any other text editor and copy and paste the following content:

USE dblinks;

INSERT INTO tbl_categories
(catname)
values
('Freelance Web Designer'),('Website Design Company');

INSERT INTO tbl_links
(linktitle, linkurl, linkrecip, linkemail, linkapproved, linkcat, linkdescr)
values
('Web Designer East Sussex', 'http://www.sebastiansulinski.co.uk', 'http://www.sebastiansulinski.co.uk/', 'mail@mail.com', 'y', '1', 'Some description'),
('Website Design Company', 'http://www.coremediadesign.co.uk', 'http://www.coremediadesign.co.uk/', 'mail@hotmail.com', 'y', '2', 'Some more description');

Save the file to the C:/ drive and call it links.sql.
Now go to Start > Run, type cmd and click ok.
In the command prompt type mysql -u root -p and press Enter. You will be asked for the password. Type the password to your MySQL server and press Enter again.
Now type the following line:

\. c:/links.sql

Press Enter. You should now see the message like in Fig. 81.

Fig. 81

Type exit, press Enter and type exit again and again press Enter.
This should close the command prompt window.
Now go back to our links_list.php page and open it in the browser.
Our message is gone and we can now see two of the records being displayed in the table (Fig. 82).

Fig. 82

Try to test the delete function by clicking Remove link.
If everything works fine you should remain on the same page and your chosen record should be gone.

Before we move on to the next section I would like to show you how to create a simple pop up message to confirm that you want the record to be removed before it is permanently deleted.
To do this we will need to download a free Dreamweaver extension from www.massimocorner.com.
Download Confirm Message 1.0 file and install it by double clicking it and following the instructions.
You will need to restart Dreamweaver for the extension to be available.

Once you have installed extension and restarted Dreamweaver open your links_list.php file, select Remove link in the table (Fig. 83) and open Behaviors tab in the Tag Inspector panel. Click + sign and choose Massimocorner > Confirm Message (Fig. 84).

Fig. 83


Fig. 84

In the pop up window (Fig. 85) type in the message - for instance:

Are you sure you want to remove this record?
There is no undo!

Fig. 85

Click OK, save the file and test it in the browser.
Now if you will try to remove record you will see a pop up message asking you to confirm this operation (Fig. 86).
If you click Cancel record will remain untouched, otherwise record will be permanently removed from the database.

Fig. 86

That's it for this section.
Next section will explain how to create a search engine to filter the results displayed on links_list.php page.

<< Creating Login Page | Create Search Engine >>