Creating Control Panel Template with Dreamweaver CS3, PHP 5 and MySQL 5

Freelance Web Designer East Sussex

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

All my tutorials are completely free of charge. If you found them useful and would like to make a donation towards the new tutorials, please click the button below.

Creating Login Page >>

Control Panel Template
In the previous part of this tutorial we have learned how to define a new project in Dreamweaver CS3, how to design a database, how to connect to the database using Dreamweaver's build in tools and how to create a template and apply it to our pages.

In this part of the tutorial we have a look at how to create a control panel to manage our links.

Open Dreamweaver and in the Files panel on the right hand side choose Link Exchange System from the dropdown menu.

Navigate to the admin folder and create the following files inside of this folder:

category_add.php
category_edit.php
category_remove.php
links_add.php
links_added.php
links_already_exists.php
links_edit.php
links_list.php
links_remove.php
links_updated.php
login.php
logout.php

Open login.php and copy and paste the following content in between the <body></body> tags:

<div id="wrapper">
<div id="header"><p>Link Management System</p></div>
<div id="navigation">
<ul id="mainav">
<li><a href="links_list.php">list of links</a></li>
<li><a href="links_add.php">add new link</a></li>
<li><a href="category_add.php">categories</a></li>
<li><a href="logout.php">logout</a></li>
<li id="front"><a href="../index.php" target="_blank">front</a></li>
</ul>
</div>
<div id="container">
<p id="ptitle">Title Placeholder</p>
<p>Content Placeholder</p>
</div>
<div id="footer"><p>© <a href="http://www.sebastiansulinski.co.uk/" title="Web Designer East Sussex" target="_blank">Web Designer East Sussex</a></p></div>
</div>

Replace Untitled Document in between the <title></title> tags with Link Management System and save the file.

Now download the admin_style.css and place it in the style folder.

In CSS panel click Attach Style Sheet button (Fig. 22).

Attach External Style Sheet with Dreamweaver CS3

Fig. 22

In the pop up window click Browse and navigate to the style folder.
Choose admin_style.css and click OK.

Fig. 23

You should now be able to see formatted content of a page.

What we need to do now is to create a template. To do it go to Insert > Template Objects > Make Template.
In the pop up window next to Save as: type admin_temp and click OK (Fig. 24).

Fig. 24

Click Yes to Update Links?.
This will create a new template called admin_temp.dwt.php in your Templates folder.
In admin_temp.dwt.php select two paragraphs with Title Placeholder and Content Placeholder (Fig. 25).

Fig. 25

Now go to Insert > Template Objects > Editable Region. In the new window type the name for editable region - Edit_content (Fig. 26).

Fig. 26

Save and close the admin_temp.dwt.php file.

Creating Login Page >>

Creating login page with Dreamweaver CS3, PHP 5 and MySQL 5

Freelance Web Site Designer