Create control panel template with Dreamweaver CS3

This series of the videos explains how to create Photo Gallery using PHP, MySQL, ImageMagic and jQuery. Using PHP you will be able to add, modify and populate data stored on the MySQL Database and display records of all images on the page. ImageMagic will help us to resize and crop images to the relevant dimentions, while jQuery will provide the support in the presentation of the gallery. The last two chapters are dedicated to adding the earlier created gallery to our Content Management System. Over 4 hours of videos!!!

Watch sample video

Go back

Dreamweaver tutorials

Link Exchange System with Dreamweaver CS3
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 create the new file within style folder and call it admin_style.css.
Open the new file and copy and paste the following styling:

* {
margin: 0px;
padding: 0px;
}
body {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
color:#333;
text-align:center;
background-color: #DADADA;
}
a:link, a:active, a:visited {
text-decoration:underline;
color:#333;
}
a:hover {
text-decoration:none;
}
#wrapper {
width:80%;
height:1%;
text-align:left;
margin:15px auto;
background-color:#fff;
border-top:solid 5px #666;
border-right:solid 1px #666;
border-bottom:solid 5px #666;
border-left:solid 1px #666;
}
#header {
width:auto;
height:100px;
margin:10px;
position:relative;
border:1px solid #666;
background-color:#DADADA;
}
#header p {
position:absolute;
top:20px;
left:20px;
font-size:14px;
color:#000;
font-weight:bold;
}
#navigation {
width:auto;
height:25px;
margin:0px 10px;
border:1px solid #666;
background-color:#EBEBEB;
}
#mainav {
width:auto;
height:1%;
list-style:none;
padding-left:10px;
}
#mainav li {
float:left;
}
#mainav li#front {
float:right;
}
#mainav li a:link, #mainav li a:active, #mainav li a:visited {
display:block;
padding:5px 10px;
text-decoration:none;
float:left;
color:#333;
}
#mainav li a:hover {
color:#ccc;
}
#container {
margin:10px;
border:1px solid #666;
padding:20px;
width:auto;
height:1%;
line-height:1.8em;
background-color: #EBEBEB;
}
#ptitle {
font-weight:bold;
font-size:14px;
color:#74A840;
}
.categoryName {
color:#900;
}
#footer {
margin:0px 10px 10px 10px;
border:1px solid #666;
text-align:center;
background-color:#DADADA;
}
#footer p {
padding:10px;
margin:0px auto 0px auto;
color:#444;
}
#footer a:link, #footer a:active, #footer a:visited {
color:#444;
text-decoration:none;
}
#footer a:hover {
color:#999;
text-decoration:none;
}
#forminsert {
margin:20px 0px;
}
#tblinsert {
border-bottom:solid 1px #aaa;
border-left:solid 1px #aaa;
}
#tblinsert th, #tblinsert td {
border-top:solid 1px #aaa;
border-right:solid 1px #aaa;
vertical-align:top;
}
#tblinsert th {
padding:3px 10px;
color: #333;
background-color:#dadada;
font-weight:bold;
text-align:right;
}
#tblinsert td {
padding:3px;
text-align:left;
}
#tblinsert caption {
width: auto;
padding:2px 0px 2px 10px;
font-weight:bold;
color:#333;
background-color:#dadada;
border-top:solid 5px #aaa;
border-right:solid 1px #aaa;
border-left:solid 1px #aaa;
clear:both;
height:auto;
text-align:left;
text-transform:uppercase;
}
#tblinsert input {
border:1px solid #aaa;
width:400px;
height:20px;
}
#tblinsert textarea {
border:1px solid #aaa;
width:400px;
height:100px;
}
#tblinsert select {
border:1px solid #aaa;
width:auto;
height:20px;
}
#tblinsert input#button {
height:20px;
width:130px;
padding:2px 10px;
display:block;
background-color:#DADADA;
color:#333;
font-size:11px;
cursor:pointer;
cursor:hand;
}
#tblinsert input#check {
border:1px solid #aaa;
float:left;
}
#tblinsert input#keyword {
border:1px solid #aaa;
width: 200px;
height: 20px;
}
/*************************** Table Repeat **************************************/
#tblrepeat {
margin:20px 0px;
border-top:solid 5px #aaa;
border-bottom:solid 1px #aaa;
border-left:solid 1px #aaa;
}
#tblrepeat th {
padding:3px 10px;
text-align:left;
vertical-align:middle;
background-color:#DADADA;
border-right:solid 1px #aaa;
}
#tblrepeat td {
border-top:solid 1px #aaa;
border-right:solid 1px #aaa;
padding:3px 10px;
}
#tblrepeat tr {
background-color:transparent;
}
#tblrepeat tr:hover {
background-color:#fff;
}
.messagebox {
background-color:#fff;
text-align:left;
vertical-align:middle;
}
.messagebox p {
margin-left:7px;
font-weight:bold;
color:#900;
}
.redBold {
font-weight:bold;
color:#900;
}
.blueBold {
font-weight:bold;
color:#006699;
}
/*************************** /Table Repeat **************************************/

/******************** rank ******************************/

.rankcont {
display: block;
width: 48px;
height: 4px;
border: solid 1px #666;
position: relative;
background-color:#fff;
overflow:hidden;
}
.rank2, .rank3, .rank4 {
background-color: #669933;
height: 4px;
position: absolute;
top: 0px;
left: 0px;
}
.rank2 {
width: 16px;
}
.rank3 {
width: 32px;
}
.rank4 {
width: 48px;
}
/******************* /rank ******************************/

/********************** Recordset paging *********************/
#paging {
margin:20px 0px 20px 0px;
}
#paging a:link, #paging a:active, #paging a:visited {
padding:1px 5px 1px 5px;
margin-right:5px;
border:solid 1px #999;
text-decoration:none;
background:#fff;
}
#paging a:hover {
text-decoration:none;
background:#dadada;
}
#paging .inactive {
padding:1px 5px 1px 5px;
margin-right:5px;
background:transparent;
color:#ccc;
border:solid 1px #ccc;
}
/********************** /Recordset paging *********************/

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).