Building Administrator Manager for Table Relation Using PHP and jQuery

Hello my friends, this tutorial will explain about how to building complete Administrator Manager, Using PHP and jQuery. At the begining of tutorial you will explained about designing interface for our Administrator Page, then will continue with steps about how to make it as ready application.
Well, actually I don’t know how to create good tutorial, but I feel, I must share this tutorial. Based on my recent project last month, this tutorial will guide you to be a webmaster. I am sure, you know about what is webmaster 🙂 Because in this tutorial you will see technic from first designing till hand code your application. Enjoy it friends !

On this tutorial, we need several important thing to complete our work today 🙂
Designing and layout

1. Adobe Photoshop
2. Adobe Dreamweaver

Programming

1. PHP
2. HTML + CSS
3. Javascript
4. jQuery
5. jQuery ThickBox Plugin
6. jQuery HighlightFade Plugin
7. MySQL Server
8. Apache Server
9. phpMyAdmin

So, just start from First Step: Designing

Step 1 » Designing

Start with your new document of Adobe Photoshop. You may use free size for new document.
Use your shapping tool to grab a new rounded rectangle. Remember that this is for your header of Administrator Page.

Add simple inner glow, gradient style and stroke for your header

And the result is….

Add your title at front of header layer. To make it better, I use small icon from crystalxp.net for the logo

Next, Create several rectangle at the bottom of header for a little bit welcome text and menus. To make it beautifull menu, I use two icon again.

Grab new rectangle again for your main content, feel free to add some style. For nice design, you may create the other amazing styles.

Well, your basic layout has done! It’s time to illustrate the form for your application. In this case, I will show about illustrate edit form page as a part of your hand code at the next step.
Grab some label and rectangle. For the button, I use simple reflection effect by duplicate button layer and transform it vertical then erase half of button layer copy. So you will see a simple reflection for your button.

To manage relation data at the future, add some icon that will used for manage relation data

Enough! 🙂 now you may slice your design to save it as image. Be carefull, slice for needed area only.

This is screen shoot of my setting of Save For Web Window

Save only selected sliced

The result of images

Step 2 » Converting from PSD Design to HTML and CSS

This step will show to you about how to convert our previous psd design to hand code of HTML and CSS. Let’s open your Adobe Dreamweaver to begin!
In this part, we need two main file, consist of HTML and CSS file.
Create new CSS Document, with this simple hand code:

@charset "utf-8";
/* CSS Document */
html,body{
margin:0;
padding:0;
border:0;
height:100%;
}
body{
background:#ffffff;
color:#2a2a2a;
min-width:697px;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
}
a:link {
color: #99CC00;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #99CC00;
}
a:hover {
text-decoration: underline;
color: #FF9900;
}
a:active {
text-decoration: none;
color: #FF9900;
}
#ajax_display {
position: fixed; top: 49%; left: 35%; border:0px; z-index: 50; width: 110px; height: 100px; margin: auto 0;
}
#mainPan {
width:697px;
position:relative;
margin:0 auto;
}
#bodyPan {
width:697px;
margin:0 auto;
}
.clear {
clear:both;
height:1px;
overflow:hidden;
line-height:1%;
font-size:0px;
margin-bottom:-1px;
}
.spacer { margin-bottom:10px; }
/*HEADER*/
#header {
margin-top: 10px;
height: 54px;
width: 697px;
background:url(images/header.gif) 0 0 no-repeat;
}
/*MENU*/
#menu {
margin-top: 10px;
height: 36px;
width: 697px;
}
#menu a:link {
color: #2a2a2a;
text-decoration: none;
}
#menu a:visited {
text-decoration: none;
color: #2a2a2a;
}
#menu a:hover {
text-decoration: none;
color: #006600;
}
#menu a:active {
text-decoration: none;
color: #2a2a2a;
}
#menu #welcome {
height: 36px;
width: 401px;
background:url(images/bg-welcome.gif) 0 0 no-repeat;
padding-left: 22px;
padding-top: 8px;
margin-right: 10px;
font-size:16px;
float:left;
}
#menu #addnew {
height: 36px;
width: 83px;
background:url(images/bg-addnew.gif) 0 0 no-repeat;
padding-left: 40px;
padding-top: 8px;
margin-right: 10px;
font-size:16px;
float:left;
cursor: pointer; cursor: hand;
}
#menu #list {
height: 36px;
width: 75px;
background:url(images/bg-list.gif) 0 0 no-repeat;
padding-left: 50px;
padding-top: 8px;
font-size:16px;
float:left;
cursor: pointer; cursor: hand;
}
/*CONTENT*/
#content {
margin-top: 10px;
width: 697px;
}
#content #top-content {
height: 6px;
width: 697px;
background:url(images/bg-top-content.gif) 0 0 no-repeat;
}
#content #center-content {
min-height: 350px;
width: 697px;
background:url(images/bg-center-content.gif) 0 0 repeat-y;
}
#content #bottom-content {
height: 6px;
width: 697px;
background:url(images/bg-bottom-content.gif) 0 0 no-repeat;
}
#content #text {
padding:20px;
color: #b4cff2;
background:none;
}
#content #text #maintable {
color: #2a2a2a;
}
#content #text p {
margin:0px;
padding:0px;
color: #b4cff2;
background:none;
}
#content #text p.msg {
margin-bottom:10px;
padding:10px;
color: #b4cff2;
text-align:center;
background: #6699FF;
border:solid 1px #000066;
-moz-border-radius: 4px;
}
#content #text p.msg span {
background: url(images/exclamation.png) 0 -10px no-repeat;
padding-left:30px;
}
/* FORM BOX */
#formM { padding:10px;}
#formM p { padding-left:72px;padding-top:10px; font-size:11px;padding-bottom:10px; }
#formM .inputM{
border:none;
color:#2a2a2a;
background:url(images/bg-field.gif) 0 0 no-repeat;
width:327px;
height:26px;
padding:2px;
font-size:14px;
margin-bottom:10px;
cursor: pointer; cursor: hand;
}
#formM #fieldBox {
width:367px;
float:right;
margin-right:4px;
margin-top:-10px;
margin-bottom:20px;
}
#formM #submenu {
width:40px;
height:150px;
float:left;
}
#formM #submenu #icon {
width:22px;
height:29px;
float:left;
margin-right:10px;
}
#formM #submenu #icon img {
border:none;
}
#formM #submenu #icon.space {
margin-top:10px;
}
#formM #collection{
border:none;
color:#2a2a2a;
width:307px;
float:left;
background:none;
}
#formM #collection #top-box {
height: 6px;
width:337px;
background:url(images/bg-top-box.gif) 0 0 no-repeat;
}
#formM #collection #center-box {
width:337px;
background:url(images/bg-center-box.gif) 0 0 repeat-y;
}
#formM #collection #bottom-box {
height: 6px;
width:337px;
background:url(images/bg-bottom-box.gif) 0 0 no-repeat;
}
#formM #collection #center-box #text {
padding:10px;
color:#2a2a2a;
}
#formM #collection #center-box #text #divTxt {
color:#2a2a2a;
}
#formM .textareaM{
border:1px solid #C0C0C0;
color:#666666;
font-size:16px;
cursor: pointer; cursor: hand;
}
#formM label{
display:block;
color:#b4cff2;
}
#formM label span{
display:block;
float:left;
padding-right:6px;
width:300px;
text-align:left;
font-weight:bold;
font-size:16px;
}
#formM .note{
float:right;
margin-top:-5px;
width: 325px;
font-size:10px;
}
#formM .buttonM{
background:url(images/bg-button.gif) 0 0 no-repeat;
border:none;
height:75px;
width:116px;
color:#b4cff2;
padding-bottom:40px;
font-size:14px;
text-decoration:none;
font-weight:bold;
cursor: pointer; cursor: hand;
}
/*FOOTER*/
#footer {
margin-bottom: 20px;
margin-top: 20px;
height: 30px;
width: 697px;
text-align:center;
}
#footer a:link {
color: #2a2a2a;
text-decoration: none;
}
#footer a:visited {
text-decoration: none;
color: #2a2a2a;
}
#footer a:hover {
text-decoration: underline;
color: #0099FF;
}
#footer a:active {
text-decoration: none;
color: #2a2a2a;
}

Well to make your main page, just create new HTML document with this HTML code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Building Administrator Manager for Table Relation Using PHP and jQuery</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<!--
#
# Building Administrator Manager for Table Relation Using PHP and jQuery
# Author  hairul azami a.k.a dr.emi <webmaster@dremi.info>
# Website http://dremi.info
# License: GPL
#
-->
</head>
<body>
<div id="ajax_display"></div>
<div id="mainPan">
<div id="bodyPan">
<div id="header"></div>
<div id="menu">
<div id="welcome">Welcome. Today is </div>
<a href="?cPub=addnew"><div id="addnew">ADD NEW</div></a>
<a href="?cPub=list"><div id="list">LIST</div></a>
</div>
<div id="content">
<div id="top-content"></div>
<div id="center-content">
<div id="text">
<div id="formM">
<form id="form1" name="form1" method="get" action="">
<label><span>Book Title </span>
<input name="title" value="" type="text" class="inputM" id="title" size="20" />
</label>
<label><span>Category </span>
<div id="contenPanCategory"></div>
<div id="toBeHideCategory">
<select class="inputM" name="category_id" size="1">
<option value="">-category-</option>
</select>
</div>
<span class="note"> (* Your category not listed ? Manage <a href="#" title="Manage Category">here</a> and <a href="#" title="Refresh Category List">refresh</a></span>
</label>
<div class="spacer"> </div>
<label><span>Collections </span>
<div id="fieldBox">
<div id="submenu">
<div id="icon"><a href="#"><img alt="Refresh Collection Data" src="images/refresh.gif" width="32" height="29" /></a></div>
<div id="icon" class="space"><a href="#" title="Add New Collection"><img alt="Add New Collection" src="images/addplus.gif" width="32" height="29" /></a></div>
<div id="icon" class="space"><a href="#" title="Remove All Collection"><img alt="Remove All Collection" src="images/remove.gif" width="32" height="29" /></a></div>
</div>
<div id="collection">
<div id="top-box"></div>
<div id="center-box">
<div id="text">
<div id="contenPanCollection"></div>
<div id="toBeHideCollection">
<!--
iFrame Collection
-->
</div>
</div>
<div id="bottom-box"></div>
</div>
</div>
</div>
</label>
<div class="clear"></div>
<label><span>  </span>
<div class="spacer"></div><input type="submit" name="Submit" value="UPDATE" class="buttonM"/>
</label>
</form>
</div>
</div>
</div>
<div id="bottom-content"></div>
</div>
<div id="footer">
© Copyright 2009 dr.emi creative design { <a href="https://www.dremi.info" target="_blank">www.dremi.info</a> }
</div>
</div>
</div>
</body>
</html>

Note: this is just planning HTML page. Next, we will save as PHP file. This is preview of main HTML page

Step 3 » Database and Programming

Oukee!!!! In this step, we will learn how to create database and hand code of PHP for our Administrator Page.
But before you have fun with your code, take look my simple database structure from the scratch

The table that have relation to others is book . The book table related for collection and category table. So for the next, you will need phpMyAdmin to create our new SQL code, based on our table structure above.
MySQL Code

CREATE TABLE `book` (
`book_id` INT( 11 ) NOT NULL AUTO_INCREMENT PRIMARY KEY ,
`title` VARCHAR( 255 ) NOT NULL ,
`category_id` INT( 11 ) NOT NULL
) ENGINE = MYISAM ;
CREATE TABLE `category` (
`category_id` INT( 11 ) NOT NULL AUTO_INCREMENT PRIMARY KEY ,
`description` VARCHAR( 255 ) NOT NULL
) ENGINE = MYISAM ;
CREATE TABLE `collection` (
`collection_id` INT( 11 ) NOT NULL AUTO_INCREMENT PRIMARY KEY ,
`collection_data` VARCHAR( 255 ) NOT NULL ,
`book_id` INT( 11 ) NOT NULL
) ENGINE = MYISAM ;

Just login into your phpMyAdmin page, and create new database, called as: my_book database.

Then execute your SQL code

Ok, now you have 3 table on your database

Database and table was created. Next is programming time !
Let me explain about our planning for files structure.
The srtructure of files consist of :

No.	Files/folder	Description
1.	./images/	Images folder
2.	./js/	Javascript folder
	– thickbox/	jQuery thickbox plugin
	– ajax-display.js	jQuery ajax loading indicator
	– dynamic-form.js	Javascript Dynamic Form for Category and Collection Data
	– jquery-1.2.6.js	jQuery framework
	– jquery.highlightFade.js	jQuery highlightFade plugin
3.	category-loader.php	file handler for dynamic category field
4.	db.php	database connection class
5.	dre-config.php	database configuration
6.	frame-collection-loader.php	file loader for iframe of collection data
7.	function.php	simple php function
8.	index.php	main PHP file
9.	style.css	our beautifull style 🙂
10.	ui-collection.php	unit interface for collection data

You may use login form for user authentication, but on this tutorial I’m not explain about it. The solution is you may use my free opensource login scripts by click this link:
http://www.4shared.com/file/82642576/3cb9f4a6/dreLogin1.html
or you can try demo page before download it
https://www.dremi.info/demo/dreLogin1
Class and Configuration
Now create simple PHP class for database connection and database configuration
PHP code for Database class: db.php

<?
/**
#
# Building Administrator Manager for Table Relation Using PHP and jQuery
# Author  hairul azami a.k.a dr.emi <webmaster@dremi.info>
# Website http://dremi.info
# License: GPL
# File: db.php
#
**/
## connection & database class
if(!defined('_VALID_ACCESS'))
{
die("Direct Access Are Not Allow");
}
class mydb
{
//connect to database
function connect($host, $user, $pass, $dbase)
{
$con = mysql_connect($host, $user, $pass);
if($con)
{
mysql_select_db($dbase) or die("could'nt select database");
}
else
{
die("couldn't connect to host");
}
}
//query
function query($sql)
{
$qry = mysql_query($sql);
return $qry;
}
//counter rows
function numrows($qry)
{
$num = mysql_num_rows($qry);
return $num;
}
//rows data
function fetch($qry)
{
if($row = mysql_fetch_array($qry))
{
return $row;
}
else
{
echo mysql_error();
}
}
//next classes
}
?>

The classe will help you to call simple paramater of each of table execution needed.
Next create database configuration file for: dre-config.php
PHP code for configuration file : dre-config.php

<?
if(!defined('_VALID_ACCESS'))
{
die("Direct Access Are Not Allow");
}
##connection definition
define("_DB_HOST", "localhost");
define("_DB_USER", "root");
define("_DB_PASS", "yoursecreetpassword");
define("_DB_NAME", "my_book");
?>

define is used for Defines a named constant. Example: localhost is your server host name, will defined as _DB_HOST.
Next file is function.php. This is my function code:

<?
if(!defined('_VALID_ACCESS'))
{
die("Direct Access Are Not Allow");
}
function redirect($delay,$goto)
{
echo"<br>Redirect progress..<br>Please Stand By.. <meta http-equiv=\"refresh\" content=\"$delay;URL=$goto\" />";
}
function alert($msg)
{
echo "<SCRIPT>alert(\"$msg\");history.go(-1)</SCRIPT>";
exit;
}
function alert2($msg)
{
echo "<SCRIPT>alert(\"$msg\");</SCRIPT>";
exit;
}
?>

redirect is function that used for redirect the result page, once action cleared. For alert and alert2 is just to display Javascript alert, maybe you will need as messager for action result.
PHP Main Page
Well….. continue with PHP main Page, save as main.html into index.php
Now, I will explain about codes in index.php. In index.php we will create dynamic content for each of link, I use $_GET[‘string’] to implementad it. GET will give value from URL parameter. Also, in this page, we will create some code for insert, edit and delete rows of table. So, do not close your window now 🙂
First you must call dre-config.php, db.php, and function.php at the begining of index.php Use include_once to call each of file.

define("_VALID_ACCESS", true);
if(!defined('_VALID_ACCESS'))
{
die("Direct Access Are Not Allow");
}
include_once "dre-config.php";
include_once "db.php";
include_once "function.php";

You must define _VALID_ACCESS as true. So, index.php are allowed to direct access.
For calling your database connection class, use this code:

$db = new mydb;
$db->connect(_DB_HOST, _DB_USER, _DB_PASS, _DB_NAME);

connect is one of your function on db.php class. To call another function, just use $db->functionname. Example: $db->query() or $db->fetch()
OK, the next is creating javascript files. Just Begin with ajax-display.js

// JavaScript Document
$(function(){
$("#ajax_display").ajaxStart(function(){
$(this).html('<img src="images/ajax-loader-trans.gif" />');
});
$("#ajax_display").ajaxSuccess(function(){
$(this).html('');
});
$("#ajax_display").ajaxError(function(url){
alert('jQuery ajax is error ');
});
});

ajax-display.js will display jQuery action loading indicator by print out the images/ajax-loader-trans.gif into browser page.
Next, dynamic-form.js. This file will used for handling dynamic process for insert and update form. Offcourse to manage our relation table data.

// JavaScript Document
function addFormField() {
var id = document.getElementById("id").value;
$("#divTxt").append("<p style='margin:0px;padding:0px;width:90%;' id='row" + id + "'><label for='txt" + id + "' style='color:#2a2a2a;'>" + id + ".    <input title='Type new collection data' type=text name='collection_data[]' id='txt1" + id + "' size='35'>  <a href='#' onClick='removeFormField(\"#row" + id + "\"); return false;'><img alt='Remove' title='Remove' border=0 src='images/close.png'></a></label></p><br>");
$('#row' + id).highlightFade({
speed:1000
});
id = (id - 1) + 2;
document.getElementById("id").value = id;
}
function removeFormField(id) {
$(id).remove();
}
/**REFRESH SCRIPT FOR COLLECTION**/
function refreshCollection(book_id, cDel) {
$("#contenPanCollection").load("frame-collection-loader.php?book_id="+book_id+"&cDel="+cDel+"", '', callbackCollection);
}
function callbackCollection() {
$("#toBeHideCollection").hide();
$("#contenPanCollection").show();
}
$(document).ready(refreshCollection(book_id, cDel));
/**REFRESH SCRIPT FOR CATEGORY**/
function refreshCategory() {
$("#contenPanCategory").load("category-loader.php", '', callbackCategory);
}
function callbackCategory() {
$("#toBeHideCategory").hide();
$("#contenPanCategory").show();
}
$(document).ready(refreshCategory());

addFormField is function to display dynamic text field, on this part I use jquery.highlightFade.js plugin to implementad it.
frame-collection-loader.php is file that used by jQuery ajax, to get value of book relation table. Remember that, book table related with collection data table. So, to implementad it using jQuery, you must create function like refreshCollection.
OK, back to index.php, add this code to call some javascript file

<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery.highlightFade.js"></script>
<script type="text/javascript" src="js/dynamic-form.js"></script>
<script type="text/javascript" src="js/ajax-display.js"></script>
<style type="text/css" media="all">
@import "js/thickbox/thickbox.css";
</style>
<script type="text/javascript" src="js/thickbox/thickbox.js"></script>

Thickbox is a jQuery plugin to displaying unit interface content in form page. You will see the result after complete this tutorial.
On index.php I use <div id=”ajax_display”></div> after BODY tag as target of ajax-display javascript. So, you may create a style for it.

#ajax_display {
position: fixed; top: 49%; left: 35%; border:0px; z-index: 50; width: 110px; height: 100px; margin: auto 0;
}

Let’s see our last index.php code

<?
/**
#
# Building Administrator Manager for Table Relation Using PHP and jQuery
# Author  hairul azami a.k.a dr.emi <webmaster@dremi.info>
# Website http://dremi.info
# License: GPL
# File: index.php
#
**/
##YOU MAY ADD SOME AUTHENTICATION CODE FOR USER LOGIN HERE
define("_VALID_ACCESS", true);
if(!defined('_VALID_ACCESS'))
{
die("Direct Access Are Not Allow");
}
include_once "dre-config.php";
include_once "db.php";
include_once "function.php";
$db = new mydb;
$db->connect(_DB_HOST, _DB_USER, _DB_PASS, _DB_NAME);
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Building Administrator Manager for Table Relation Using PHP and jQuery</title>
<script type="text/javascript" src="js/jquery-1.2.6.js"></script>
<script type="text/javascript" src="js/jquery.highlightFade.js"></script>
<script type="text/javascript" src="js/dynamic-form.js"></script>
<script type="text/javascript" src="js/ajax-display.js"></script>
<style type="text/css" media="all">
@import "js/thickbox/thickbox.css";
</style>
<script type="text/javascript" src="js/thickbox/thickbox.js"></script>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="ajax_display"></div>

OK, next task is creating dynamic content for insert, edit, and delete of table rows.
Take look this code:
First content is listing and delete of table data

<?
if($_GET['cPub'] == 'list')
{
if($_GET['cTask'] == 'delete')
{
$CHK = "SELECT * FROM collection WHERE book_id = '$_GET[book_id]'";
$SQL = "DELETE FROM book WHERE book_id = '$_GET[book_id]'";
##FIRST CHECK IT FOR COLLECTION
$COLL= $db->numrows($db->query($CHK));
if($COLL > 0)
{
echo "<p class='msg'><span>You cannot delete BOOK ID = $_GET[book_id]. This record still have $COLL collection data</span></p>";
}
else
{
if($QRY = $db->query($SQL))
{
echo "<p class='msg'><span>Successfully Delete for BOOK ID = $_GET[book_id]</span></p>";
}
else
{
echo "<p class='msg'><span>Error: Delete for BOOK ID = $_GET[book_id]<span></p>";
}
}
}
$SQL = "SELECT * FROM book ORDER BY book_id DESC";
$QRY = $db->query($SQL);
$NUM = $db->numrows($QRY);
$i = 0;
if($NUM > 0)
{
?>
<table width="100%" border="0" cellpadding="4" cellspacing="1" bgcolor="#FFFFFF" id="maintable">
<tr>
<td width="5%" bgcolor="#003366"><span style="color:#FFFFFF; font-weight:bold;">No.</span></td>
<td width="47%" bgcolor="#003366"><span style="color:#FFFFFF; font-weight:bold;">Book Title</span></td>
<td width="24%" bgcolor="#003366"><span style="color:#FFFFFF; font-weight:bold;">Category</span></td>
<td width="10%" bgcolor="#003366"><span style="color:#FFFFFF; font-weight:bold;">Collection</span></td>
<td width="14%" bgcolor="#003366"><span style="color:#FFFFFF; font-weight:bold;">Option</span></td>
</tr>
<?
while($ROW = $db->fetch($QRY))
{
$i++;
?>
<tr>
<td bgcolor="#B7C0FF"><? echo $i; ?></td>
<td bgcolor="#B7C0FF"><? echo $ROW['title']; ?></td>
<td bgcolor="#B7C0FF"><?
$CATROW = $db->fetch($db->query("SELECT * FROM category WHERE category_id = '$ROW[category_id]'"));
echo $CATROW['description'];
?>
</td>
<td bgcolor="#B7C0FF">
<?
##NUMBER OF COLLECTION
$COLLECTION_NUMBER = $db->numrows($db->query("SELECT * FROM collection WHERE book_id = '$ROW[book_id]'"));
echo $COLLECTION_NUMBER;
?>
</td>
<td bgcolor="#B7C0FF">
<a href="ui-collection.php?book_id=<? echo $ROW['book_id']; ?>&keepThis=true&TB_iframe=true&height=250&width=500" class="thickbox" title="View Collection of <? echo $ROW['title']; ?>"><img src="images/zoom16.png" alt="View Collection" width="16" height="16" border="0" /></a>  
<a href="?cPub=edit&book_id=<? echo $ROW['book_id']; ?>" title="Edit"><img src="images/edit.png" alt="Edit" width="16" height="16" border="0" /></a>  
<a href="javascript:void(0);" onclick="cf=confirm('Are you sure to delete No. <? echo $i; ?> ???');if(cf)window.location='?cPub=list&cTask=delete&book_id=<? echo $ROW['book_id']; ?>';return false;" title="Delete"><img src="images/delete.png" alt="Delete" width="16" height="16" border="0" /></a>
</td>
</tr>
<?
}
?>
</table>
<?
}
else
{
echo "<p>No Query</p>";
}
}

Well… I cannot explain each of line, but feel free to have fun while typing the code. Actually the code will diplaying List of Data Rows.
Next is Adding New Record. This code will displaying form for adding new record of data

elseif($_GET['cPub'] == 'addnew')
{
?>
<?
if($_GET['Submit'] == 'SUBMIT' && !empty($_GET['title']))
{
##INSERT NEW BOOK
if(!empty($_GET['category_id2']))
{
$choseCat = $_GET['category_id2'];
}
else
{
$choseCat = $_GET['category_id'];
}
$SQL = "INSERT INTO book(title, category_id) VALUES('$_GET[title]', '$choseCat')";
if($db->query($SQL))
{
echo "<p class='msg'><span>New Record Successfully Submited</span></p>";
}
else
{
echo "<p class='msg'>E R R O R !</p>";
}
##GET THE LAST ID FOR BOOK RECORD
$BOOKID = $db->fetch($db->query("SELECT * FROM book ORDER BY book_id DESC"));
##INSERT NEW COLLECTION
for($i=0;$i<=count($_GET['collection_data']);$i++)
{
if(!empty($_GET['collection_data'][$i]))
{
$SQLCOLLECTION = "INSERT INTO collection(collection_data, book_id)
VALUES('".$_GET['collection_data'][$i]."', '$BOOKID[book_id]')";
$db->query($SQLCOLLECTION);
}
}
}
?>
<div id="formM">
<form id="form1" name="form1" method="get" action="">
<input name="cPub" type="hidden" value="<? echo $_GET['cPub']; ?>" />
<label><span>Book Title </span>
<input name="title" type="text" class="inputM" id="title" size="20" />
</label>
<label><span>Category </span>
<div id="contenPanCategory"></div>
<div id="toBeHideCategory">
<select class="inputM" name="category_id" size="1">
<?
$QRYCAT = $db->query("SELECT * FROM category ORDER BY description");
while($ROWCAT = $db->fetch($QRYCAT))
{
?>
<option value="<? echo $ROWCAT['category_id']; ?>"><? echo $ROWCAT['description']; ?></option>
<?
}
?>
</select>
</div>
<span class="note"> (* Your category not listed ? Manage <a href="category-loader.php?cF=Manage&keepThis=true&TB_iframe=true&height=250&width=300" class="thickbox" title="Manage Category">here</a> and <a href="javascript:void(0);" title="Refresh Category List" onClick="refreshCategory()">refresh</a></span>
</label>
<div class="spacer"> </div>
<label><span>Collections </span>
<div id="fieldBox">
<div id="submenu">
<div id="icon"><a href="javascript:void(0);" onClick="addFormField(); return false;" title="Add New Collection"><img alt="Add New Collection" src="images/addplus.gif" width="32" height="29" /></a><input type="hidden" id="id" value="1"></div>
</div>
<div id="collection">
<div id="top-box"></div>
<div id="center-box">
<div id="text"><div id="divTxt"></div></div>
<div id="bottom-box"></div>
</div>
</div>
</div>
</label>
<div class="clear"></div>
<label><span>  </span>
<div class="spacer"></div><input type="submit" name="Submit" value="SUBMIT" class="buttonM"/>
</label>
</form>
</div>
<?
}

And this is for Editing Form code. Will used for update one of data record.

elseif($_GET['cPub'] == 'edit')
{
?>
<?
if($_GET['Submit'] == 'UPDATE' && !empty($_GET['title']))
{
##UPDATE CURRENT BOOK
if(!empty($_GET['category_id2']))
{
$choseCat = $_GET['category_id2'];
}
else
{
$choseCat = $_GET['category_id'];
}
$SQL = "UPDATE book SET title='$_GET[title]', category_id='$choseCat' WHERE book_id='$_GET[book_id]'";
if($db->query($SQL))
{
echo "<p class='msg'><span>Current Record Successfully Updated</span></p>";
}
else
{
echo "<p class='msg'>E R R O R !</p>";
}
}
?>
<?
$SQL = "SELECT * FROM book WHERE book_id = '$_GET[book_id]'";
$ROW = $db->fetch($db->query($SQL));
?>
<div id="formM">
<form id="form1" name="form1" method="get" action="">
<input name="cPub" type="hidden" value="<? echo $_GET['cPub']; ?>" />
<input name="book_id" type="hidden" value="<? echo $_GET['book_id']; ?>" />
<label><span>Book Title </span>
<input name="title" value="<? echo $ROW['title']; ?>" type="text" class="inputM" id="title" size="20" />
</label>
<label><span>Category </span>
<div id="contenPanCategory"></div>
<div id="toBeHideCategory">
<select class="inputM" name="category_id" size="1">
<?
$SQLCAT_CUR = "SELECT * FROM category WHERE category_id = '$ROW[category_id]'";
$ROWCAT_CUR = $db->fetch($db->query($SQLCAT_CUR));
?>
<option value="<? echo $ROWCAT_CUR['category_id']; ?>">- <? echo $ROWCAT_CUR['description']; ?> -</option>
<?
$SQLCAT = "SELECT * FROM category ORDER BY description";
$QRYCAT = $db->query($SQLCAT);
while($ROWCAT = $db->fetch($QRYCAT))
{
?>
<option value="<? echo $ROWCAT['category_id']; ?>"><? echo $ROWCAT['description']; ?></option>
<?
}
?>
</select>
</div>
<span class="note"> (* Your category not listed ? Manage <a href="category-loader.php?cF=Manage&keepThis=true&TB_iframe=true&height=250&width=300" class="thickbox" title="Manage Category">here</a> and <a href="javascript:void(0);" title="Refresh Category List" onClick="refreshCategory()">refresh</a></span>
</label>
<div class="spacer"> </div>
<label><span>Collections </span>
<div id="fieldBox">
<div id="submenu">
<div id="icon"><a href="javascript:void(0);" title="Refresh Collection Data" onClick="refreshCollection(<? echo $ROW['book_id']; ?>, 0)"><img alt="Refresh Collection Data" src="images/refresh.gif" width="32" height="29" /></a></div>
<div id="icon" class="space"><a href="ui-collection.php?cF=Input&book_id=<? echo $ROW['book_id'];?>&keepThis=true&TB_iframe=true&height=250&width=300" class="thickbox" title="Add New Collection"><img alt="Add New Collection" src="images/addplus.gif" width="32" height="29" /></a></div>
<div id="icon" class="space"><a href="javascript:void(0);" onclick="cf=confirm('Are you sure to remove all collection data ???');if(cf)refreshCollection(<? echo $ROW['book_id']; ?>, 1);return false;" title="Remove All Collection"><img alt="Remove All Collection" src="images/remove.gif" width="32" height="29" /></a></div>
</div>
<div id="collection">
<div id="top-box"></div>
<div id="center-box">
<div id="text">
<div id="contenPanCollection"></div>
<div id="toBeHideCollection">
<iframe width="300" name="refreshCollectionFrame" src="ui-collection.php?book_id=<? echo $ROW['book_id']; ?>" frameborder="0" scrolling="auto">
</iframe>
</div>
</div>
<div id="bottom-box"></div>
</div>
</div>
</div>
</label>
<div class="clear"></div>
<label><span>  </span>
<div class="spacer"></div><input type="submit" name="Submit" value="UPDATE" class="buttonM"/>
</label>
</form>
</div>
<?
}
else
{
echo "<p>You are in Administrator Page. Select Main Menu to Manage your data.</p>";
}
?>

The last is let me type my copyright website

<div id="footer">
© Copyright 2009 dr.emi creative design { <a href="https://www.dremi.info" target="_blank">www.dremi.info</a> }
</div>

IFRAME code will load ui-collection.php that contain used for displaying collection data of current data row. DIV ID contenPanCollection is ID that used by jQuery Ajax as target for Dynamic Collection Data. To activated it, I use onClick=”refreshCollection(<? echo $ROW[‘book_id’]; ?>, 0)”. While refreshCollection function executed, the condition is hidding DIV ID toBeHideCollection and show DIV ID contenPanCollection. The other example of dynamic field is refreshCategory javascript function to load dynamicly category-loader.php
How about thickbox plugin ?
ThickBox jQuery plugin used for displaying unit interface for Add New Collection link or manage category link. As you see, to define class of thickbox plugin, just use class=”thickbox”, and to define width and height of unit interface, just change parameter of width and height from this line:

   keepThis=true&TB_iframe=true&height=250&width=300   

And this is code of ui-collection.php

<?
define("_VALID_ACCESS", true);
if(!defined('_VALID_ACCESS'))
{
die("Direct Access Are Not Allow");
}
//echo $_SERVER['REQUEST_URI'];
include_once "dre-config.php";
include_once "db.php";
include_once "function.php";
$db = new mydb;
?>
<style media="all" type="text/css">
* {
background:#ffffff;
color:#2a2a2a;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
}
</style>
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery.highlightFade.js"></script>
<script type="text/javascript" src="js/dynamic-form.js"></script>
<script type="text/javascript" src="js/ajax-display.js"></script>
<?
$book_id=intval($_GET['book_id']);
$cDel=intval($_GET['cDel']);
$db->connect(_DB_HOST, _DB_USER, _DB_PASS, _DB_NAME); //changet the configuration in required
?>
<?
if($_GET['cF'] == 'Delete')
{
$db->query("DELETE FROM collection WHERE collection_id = '$_GET[collection_id]'");
redirect(0, "$_SERVER[PHP_SELF]?book_id=$_GET[book_id]");
}
elseif($cDel == 1)
{
$chk4Del = $db->numrows($db->query("SELECT * FROM collection
WHERE book_id = '$book_id'"));
if($chk4Del >= 1)
{
if($db->query("DELETE FROM collection WHERE book_id = '$book_id'"))
{
alert2("All Collection data has been deleted !");
}
}
else
{
alert2("I didn't deleted anything !");
}
}
elseif($_GET['cF'] == 'Edit')
{
if($_POST['update'] && !empty($_POST['collection_data']))
{
$db->query("UPDATE collection SET collection_data = '$_POST[collection_data]' WHERE collection_id = '$_GET[collection_id]'");
redirect(0, "$_SERVER[PHP_SELF]?book_id=$_GET[book_id]");
}
$e_data_collection = $db->fetch($db->query("SELECT * FROM collection WHERE collection_id = '$_GET[collection_id]'"));
?>
<p style="font-weight:bold">Edit Data for Collection</p>
<form name="miniForm" action="" method="POST">
<input type="hidden" name="book_id" value="<? echo $_GET['book_id']; ?>" />
<input class="miniInput" type="text" name="collection_data" value="<? echo $e_data_collection['collection_data']; ?>">
<br />
<br />
<input class="miniSubmit" type="submit" name="update" value="update">
<input class="miniSubmit" type="button" name="cancel" onclick="javascript:history.go(-1);" value="cancel">
</form>
<?
}
elseif($_GET['cF'] == 'Input')
{
if($_POST['submit'])
{
for($i=0;$i<=count($_POST['collection_data']);$i++)
{
if(!empty($_POST['collection_data'][$i]))
{
$SQLCOLLECTION = "INSERT INTO collection(collection_data, book_id) VALUES('".$_POST['collection_data'][$i]."', '$_POST[book_id]')";
if($db->query($SQLCOLLECTION))
{
echo "Collection Data $i Submited Successfully.<br>";
}
}
}
}
?>
<p style="font-weight:bold"><a href="javascript:void(0);" onClick="addFormField(); return false;" title="Add New Collection"><img alt="Add New Collection" src="images/add.png" border="0" /> Add New Collection Data</a><input type="hidden" id="id" value="1"></p>
<form name="miniForm" action="" method="POST">
<input type="hidden" name="book_id" value="<? echo $_GET['book_id']; ?>" />
<div id="divTxt"></div>
<br />
<br />
<input class="miniSubmit" type="submit" name="submit" value="submit">
</form>
<?
}
else
{
?>
<table width="100%" border="0" cellpadding="2" cellspacing="1" bgcolor="#CCCCCC">
<tr>
<td width="5%" bgcolor="#efefef">No.</td>
<td width="26%" bgcolor="#efefef">Collection Data </td>
<td width="20%" bgcolor="#efefef"><center>Option</center></td>
</tr>
<?
$q_data_colllection = $db->query("SELECT * FROM collection WHERE book_id = '$book_id'");
while($r_data_colllection = $db->fetch($q_data_colllection))
{
$i++;
?>
<tr>
<td bgcolor="#ffffff"><? echo $i; ?></td>
<td bgcolor="#ffffff"><? echo $r_data_colllection['collection_data']; ?> </td>
<td valign="top" bgcolor="#ffffff"><center>
<a alt="Edit Collection Data No. <? echo $i; ?>" title="Edit Collection Data No. <? echo $i; ?>" href="?cF=Edit&book_id=<? echo $_GET['book_id'] ?>&collection_id=<? echo $r_data_colllection['collection_id'] ?>" class="thickbox"><img alt="Edit Collection Data No. <? echo $i; ?>" title="Edit Collection Data No. <? echo $i; ?>" src="images/edit.png" border="0" width="16px;" height="16px;" /></a>
<a alt="Delete Collection Data No. <? echo $i; ?>" title="Delete Collection Data No. <? echo $i; ?>" href="javascript:void(0);" onclick="cf=confirm('Are you sure to delete No. <? echo $i; ?> ???');if(cf)window.location='?cF=Delete&book_id=<? echo $_GET['book_id'] ?>&collection_id=<? echo $r_data_colllection['collection_id'] ?>';return false;"><img alt="Delete Collection Data No. <? echo $i; ?>" title="Delete Collection Data No. <? echo $i; ?>" src="images/delete.png" border="0" width="16px;" height="16px;" /></a>
</center>
</td>
</tr>
<?
}
?>
</table>
<?
}
?>

PHP code for category-loader.php

<?
define("_VALID_ACCESS", true);
if(!defined('_VALID_ACCESS'))
{
die("Direct Access Are Not Allow");
}
//echo $_SERVER['REQUEST_URI'];
include_once "dre-config.php";
include_once "db.php";
include_once "function.php";
$db = new mydb;
?>
<?
$category_id=intval($_GET['category_id']);
$cDel=intval($_GET['cDel']);
$db->connect(_DB_HOST, _DB_USER, _DB_PASS, _DB_NAME); //changet the configuration if required
?>
<?
if($_GET['cF'] == 'Delete')
{
$db->query("DELETE FROM category WHERE category_id = '$_GET[category_id]'");
redirect(0, "$_SERVER[PHP_SELF]?cF=Manage");
}
elseif($_GET['cF'] == 'Edit')
{
if($_POST['update'] && !empty($_POST['description']))
{
$db->query("UPDATE category SET description = '$_POST[description]' WHERE category_id = '$_GET[category_id]'");
redirect(0, "$_SERVER[PHP_SELF]?cF=Manage");
}
$e_data_category = $db->fetch($db->query("SELECT * FROM category WHERE category_id = '$_GET[category_id]'"));
?>
<style media="all" type="text/css">
* {
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
}
</style>
<p style="font-weight:bold">Edit Data for Category</p>
<form name="miniForm" action="" method="POST">
<input title='Type new category' type="text" name='description' value="<? echo $e_data_category['description']; ?>" size='35'>
<br />
<br />
<input class="miniSubmit" type="submit" name="update" value="update">
<input class="miniSubmit" type="button" name="cancel" onclick="javascript:history.go(-1);" value="cancel">
</form>
<?
}
elseif($_GET['cF'] == 'Manage')
{
?>
<style media="all" type="text/css">
* {
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
}
</style>
<p style="font-weight:bold"><a href="?cF=Input" title="Add New Category"><img alt="Add New Category" src="images/add.png" border="0" /> Add New Category</a></p>
<table width="100%" border="0" cellpadding="2" cellspacing="1" bgcolor="#CCCCCC">
<tr>
<td width="5%" bgcolor="#efefef">No.</td>
<td width="26%" bgcolor="#efefef">Category Name</td>
<td width="20%" bgcolor="#efefef"><center>Option</center></td>
</tr>
<?
$q_data_category = $db->query("SELECT * FROM category ORDER BY description");
while($r_data_category = $db->fetch($q_data_category))
{
$i++;
?>
<tr>
<td bgcolor="#ffffff"><? echo $i; ?></td>
<td bgcolor="#ffffff"><? echo $r_data_category['description']; ?> </td>
<td valign="top" bgcolor="#ffffff"><center>
<a alt="Edit Collection Data No. <? echo $i; ?>" title="Edit Category No. <? echo $i; ?>" href="?cF=Edit&category_id=<? echo $r_data_category['category_id'] ?>" class="thickbox"><img alt="Edit Category No. <? echo $i; ?>" title="Edit Category No. <? echo $i; ?>" src="images/edit.png" border="0" width="16px;" height="16px;" /></a>
<a alt="Delete Category No. <? echo $i; ?>" title="Delete Category No. <? echo $i; ?>" href="javascript:void(0);" onclick="cf=confirm('Are you sure to delete No. <? echo $i; ?> ???');if(cf)window.location='?cF=Delete&category_id=<? echo $r_data_category['category_id'] ?>';return false;"><img alt="Delete Category Data No. <? echo $i; ?>" title="Delete Category No. <? echo $i; ?>" src="images/delete.png" border="0" width="16px;" height="16px;" /></a>
</center>
</td>
</tr>
<?
}
?>
</table>
<?
}
elseif($_GET['cF'] == 'Input')
{
if($_POST['submit'] && !empty($_POST['description']))
{
$SQL = "INSERT INTO category(description) VALUES('$_POST[description]')";
if($db->query($SQL))
{
redirect(0, "$_SERVER[PHP_SELF]?cF=Manage");
}
}
?>
<style media="all" type="text/css">
* {
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
}
</style>
<form name="miniForm" action="" method="POST">
<input title='Type new category' type="text" name='description' size='35'>
<br />
<br />
<input class="miniSubmit" type="submit" name="submit" value="submit">
<input class="miniSubmit" type="button" name="cancel" onclick="javascript:history.go(-1);" value="cancel">
</form>
<?
}
else
{
?>
<select class="inputM" name="category_id2" size="1">
<?
$SQLCAT = "SELECT * FROM category ORDER BY description";
$QRYCAT = $db->query($SQLCAT);
while($ROWCAT = $db->fetch($QRYCAT))
{
?>
<option value="<? echo $ROWCAT['category_id']; ?>"><? echo $ROWCAT['description']; ?></option>
<?
}
?>
</select>
<?
}
?>

PHP Code for frame-collection-loader.php

<iframe width="300" name="refreshCollectionFrame" src="ui-collection.php?book_id=<? echo $_GET['book_id']; ?>&cDel=<? echo $_GET['cDel']; ?>" frameborder="0" scrolling="auto">
</iframe>

Here are the complete index.php code

<?
/**
#
# Building Administrator Manager for Table Relation Using PHP and jQuery
# Author  hairul azami a.k.a dr.emi <webmaster@dremi.info>
# Website http://dremi.info
# License: GPL
# File: index.php
#
**/
##YOU MAY ADD SOME AUTHENTICATION CODE FOR USER LOGIN HERE
define("_VALID_ACCESS", true);
if(!defined('_VALID_ACCESS'))
{
die("Direct Access Are Not Allow");
}
include_once "dre-config.php";
include_once "db.php";
include_once "function.php";
$db = new mydb;
$db->connect(_DB_HOST, _DB_USER, _DB_PASS, _DB_NAME);
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Building Administrator Manager for Table Relation Using PHP and jQuery</title>
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery.highlightFade.js"></script>
<script type="text/javascript" src="js/dynamic-form.js"></script>
<script type="text/javascript" src="js/ajax-display.js"></script>
<style type="text/css" media="all">
@import "js/thickbox/thickbox.css";
</style>
<script type="text/javascript" src="js/thickbox/thickbox.js"></script>
<link href="style.css" rel="stylesheet" type="text/css" />
<!--
#
# Building Administrator Manager for Table Relation Using PHP and jQuery
# Author  hairul azami a.k.a dr.emi <webmaster@dremi.info>
# Website http://dremi.info
# License: GPL
#
-->
</head>
<body>
<div id="ajax_display"></div>
<div id="mainPan">
<div id="bodyPan">
<div id="header"></div>
<div id="menu">
<div id="welcome">Welcome. Today is <? echo date("F j, Y, g:i a"); ?></div>
<a href="?cPub=addnew"><div id="addnew">ADD NEW</div></a>
<a href="?cPub=list"><div id="list">LIST</div></a>
</div>
<div id="content">
<div id="top-content"></div>
<div id="center-content">
<div id="text">
<?
if($_GET['cPub'] == 'list')
{
if($_GET['cTask'] == 'delete')
{
$CHK = "SELECT * FROM collection WHERE book_id = '$_GET[book_id]'";
$SQL = "DELETE FROM book WHERE book_id = '$_GET[book_id]'";
##FIRST CHECK IT FOR COLLECTION
$COLL= $db->numrows($db->query($CHK));
if($COLL > 0)
{
echo "<p class='msg'><span>You cannot delete BOOK ID = $_GET[book_id]. This record still have $COLL collection data</span></p>";
}
else
{
if($QRY = $db->query($SQL))
{
echo "<p class='msg'><span>Successfully Delete for BOOK ID = $_GET[book_id]</span></p>";
}
else
{
echo "<p class='msg'><span>Error: Delete for BOOK ID = $_GET[book_id]<span></p>";
}
}
}
$SQL = "SELECT * FROM book ORDER BY book_id DESC";
$QRY = $db->query($SQL);
$NUM = $db->numrows($QRY);
$i = 0;
if($NUM > 0)
{
?>
<table width="100%" border="0" cellpadding="4" cellspacing="1" bgcolor="#FFFFFF" id="maintable">
<tr>
<td width="5%" bgcolor="#003366"><span style="color:#FFFFFF; font-weight:bold;">No.</span></td>
<td width="47%" bgcolor="#003366"><span style="color:#FFFFFF; font-weight:bold;">Book Title</span></td>
<td width="24%" bgcolor="#003366"><span style="color:#FFFFFF; font-weight:bold;">Category</span></td>
<td width="10%" bgcolor="#003366"><span style="color:#FFFFFF; font-weight:bold;">Collection</span></td>
<td width="14%" bgcolor="#003366"><span style="color:#FFFFFF; font-weight:bold;">Option</span></td>
</tr>
<?
while($ROW = $db->fetch($QRY))
{
$i++;
?>
<tr>
<td bgcolor="#B7C0FF"><? echo $i; ?></td>
<td bgcolor="#B7C0FF"><? echo $ROW['title']; ?></td>
<td bgcolor="#B7C0FF"><?
$CATROW = $db->fetch($db->query("SELECT * FROM category WHERE category_id = '$ROW[category_id]'"));
echo $CATROW['description'];
?>
</td>
<td bgcolor="#B7C0FF">
<?
##NUMBER OF COLLECTION
$COLLECTION_NUMBER = $db->numrows($db->query("SELECT * FROM collection WHERE book_id = '$ROW[book_id]'"));
echo $COLLECTION_NUMBER;
?>
</td>
<td bgcolor="#B7C0FF">
<a href="ui-collection.php?book_id=<? echo $ROW['book_id']; ?>&keepThis=true&TB_iframe=true&height=250&width=500" class="thickbox" title="View Collection of <? echo $ROW['title']; ?>"><img src="images/zoom16.png" alt="View Collection" width="16" height="16" border="0" /></a>  
<a href="?cPub=edit&book_id=<? echo $ROW['book_id']; ?>" title="Edit"><img src="images/edit.png" alt="Edit" width="16" height="16" border="0" /></a>  
<a href="javascript:void(0);" onclick="cf=confirm('Are you sure to delete No. <? echo $i; ?> ???');if(cf)window.location='?cPub=list&cTask=delete&book_id=<? echo $ROW['book_id']; ?>';return false;" title="Delete"><img src="images/delete.png" alt="Delete" width="16" height="16" border="0" /></a>
</td>
</tr>
<?
}
?>
</table>
<?
}
else
{
echo "<p>No Query</p>";
}
}
elseif($_GET['cPub'] == 'addnew')
{
?>
<?
if($_GET['Submit'] == 'SUBMIT' && !empty($_GET['title']))
{
##INSERT NEW BOOK
if(!empty($_GET['category_id2']))
{
$choseCat = $_GET['category_id2'];
}
else
{
$choseCat = $_GET['category_id'];
}
$SQL = "INSERT INTO book(title, category_id) VALUES('$_GET[title]', '$choseCat')";
if($db->query($SQL))
{
echo "<p class='msg'><span>New Record Successfully Submited</span></p>";
}
else
{
echo "<p class='msg'>E R R O R !</p>";
}
##GET THE LAST ID FOR BOOK RECORD
$BOOKID = $db->fetch($db->query("SELECT * FROM book ORDER BY book_id DESC"));
##INSERT NEW COLLECTION
for($i=0;$i<=count($_GET['collection_data']);$i++)
{
if(!empty($_GET['collection_data'][$i]))
{
$SQLCOLLECTION = "INSERT INTO collection(collection_data, book_id)
VALUES('".$_GET['collection_data'][$i]."', '$BOOKID[book_id]')";
$db->query($SQLCOLLECTION);
}
}
}
?>
<div id="formM">
<form id="form1" name="form1" method="get" action="">
<input name="cPub" type="hidden" value="<? echo $_GET['cPub']; ?>" />
<label><span>Book Title </span>
<input name="title" type="text" class="inputM" id="title" size="20" />
</label>
<label><span>Category </span>
<div id="contenPanCategory"></div>
<div id="toBeHideCategory">
<select class="inputM" name="category_id" size="1">
<?
$QRYCAT = $db->query("SELECT * FROM category ORDER BY description");
while($ROWCAT = $db->fetch($QRYCAT))
{
?>
<option value="<? echo $ROWCAT['category_id']; ?>"><? echo $ROWCAT['description']; ?></option>
<?
}
?>
</select>
</div>
<span class="note"> (* Your category not listed ? Manage <a href="category-loader.php?cF=Manage&keepThis=true&TB_iframe=true&height=250&width=300" class="thickbox" title="Manage Category">here</a> and <a href="javascript:void(0);" title="Refresh Category List" onClick="refreshCategory()">refresh</a></span>
</label>
<div class="spacer"> </div>
<label><span>Collections </span>
<div id="fieldBox">
<div id="submenu">
<div id="icon"><a href="javascript:void(0);" onClick="addFormField(); return false;" title="Add New Collection"><img alt="Add New Collection" src="images/addplus.gif" width="32" height="29" /></a><input type="hidden" id="id" value="1"></div>
</div>
<div id="collection">
<div id="top-box"></div>
<div id="center-box">
<div id="text"><div id="divTxt"></div></div>
<div id="bottom-box"></div>
</div>
</div>
</div>
</label>
<div class="clear"></div>
<label><span>  </span>
<div class="spacer"></div><input type="submit" name="Submit" value="SUBMIT" class="buttonM"/>
</label>
</form>
</div>
<?
}
elseif($_GET['cPub'] == 'edit')
{
?>
<?
if($_GET['Submit'] == 'UPDATE' && !empty($_GET['title']))
{
##UPDATE CURRENT BOOK
if(!empty($_GET['category_id2']))
{
$choseCat = $_GET['category_id2'];
}
else
{
$choseCat = $_GET['category_id'];
}
$SQL = "UPDATE book SET title='$_GET[title]', category_id='$choseCat' WHERE book_id='$_GET[book_id]'";
if($db->query($SQL))
{
echo "<p class='msg'><span>Current Record Successfully Updated</span></p>";
}
else
{
echo "<p class='msg'>E R R O R !</p>";
}
}
?>
<?
$SQL = "SELECT * FROM book WHERE book_id = '$_GET[book_id]'";
$ROW = $db->fetch($db->query($SQL));
?>
<div id="formM">
<form id="form1" name="form1" method="get" action="">
<input name="cPub" type="hidden" value="<? echo $_GET['cPub']; ?>" />
<input name="book_id" type="hidden" value="<? echo $_GET['book_id']; ?>" />
<label><span>Book Title </span>
<input name="title" value="<? echo $ROW['title']; ?>" type="text" class="inputM" id="title" size="20" />
</label>
<label><span>Category </span>
<div id="contenPanCategory"></div>
<div id="toBeHideCategory">
<select class="inputM" name="category_id" size="1">
<?
$SQLCAT_CUR = "SELECT * FROM category WHERE category_id = '$ROW[category_id]'";
$ROWCAT_CUR = $db->fetch($db->query($SQLCAT_CUR));
?>
<option value="<? echo $ROWCAT_CUR['category_id']; ?>">- <? echo $ROWCAT_CUR['description']; ?> -</option>
<?
$SQLCAT = "SELECT * FROM category ORDER BY description";
$QRYCAT = $db->query($SQLCAT);
while($ROWCAT = $db->fetch($QRYCAT))
{
?>
<option value="<? echo $ROWCAT['category_id']; ?>"><? echo $ROWCAT['description']; ?></option>
<?
}
?>
</select>
</div>
<span class="note"> (* Your category not listed ? Manage <a href="category-loader.php?cF=Manage&keepThis=true&TB_iframe=true&height=250&width=300" class="thickbox" title="Manage Category">here</a> and <a href="javascript:void(0);" title="Refresh Category List" onClick="refreshCategory()">refresh</a></span>
</label>
<div class="spacer"> </div>
<label><span>Collections </span>
<div id="fieldBox">
<div id="submenu">
<div id="icon"><a href="javascript:void(0);" title="Refresh Collection Data" onClick="refreshCollection(<? echo $ROW['book_id']; ?>, 0)"><img alt="Refresh Collection Data" src="images/refresh.gif" width="32" height="29" /></a></div>
<div id="icon" class="space"><a href="ui-collection.php?cF=Input&book_id=<? echo $ROW['book_id'];?>&keepThis=true&TB_iframe=true&height=250&width=300" class="thickbox" title="Add New Collection"><img alt="Add New Collection" src="images/addplus.gif" width="32" height="29" /></a></div>
<div id="icon" class="space"><a href="javascript:void(0);" onclick="cf=confirm('Are you sure to remove all collection data ???');if(cf)refreshCollection(<? echo $ROW['book_id']; ?>, 1);return false;" title="Remove All Collection"><img alt="Remove All Collection" src="images/remove.gif" width="32" height="29" /></a></div>
</div>
<div id="collection">
<div id="top-box"></div>
<div id="center-box">
<div id="text">
<div id="contenPanCollection"></div>
<div id="toBeHideCollection">
<iframe width="300" name="refreshCollectionFrame" src="ui-collection.php?book_id=<? echo $ROW['book_id']; ?>" frameborder="0" scrolling="auto">
</iframe>
</div>
</div>
<div id="bottom-box"></div>
</div>
</div>
</div>
</label>
<div class="clear"></div>
<label><span>  </span>
<div class="spacer"></div><input type="submit" name="Submit" value="UPDATE" class="buttonM"/>
</label>
</form>
</div>
<?
}
else
{
echo "<p>You are in Administrator Page. Select Main Menu to Manage your data.</p>";
}
?>
</div>
</div>
<div id="bottom-content"></div>
</div>
<div id="footer">
© Copyright 2009 dr.emi creative design { <a href="https://www.dremi.info" target="_blank">www.dremi.info</a> }
</div>
</div>
</div>
</body>
</html>

Oukeh!!!! I think all hand code was appear on your apache server. Try it with type this URL on your browser:
http://localhost/foldername/index.php
And this is screenshoot of Index.php within load default content

Just click on main menu to try the result of dynamic content.
Screenshoot for Add New Record

Screenshoot for Listing Record

Screenshoot for View Collection Data, using unit interface

Screenshoot for Dynamic Refresh of Collection Data

Feel free to try the demo on my demo page, and do not forget to leave your comment for suggest, critics, report or bug.
Now, you has been successfully to create your Administrator Page to Manage Some Relation Table Using PHP as main programming language and jQuery to give some interactivity result for dynamic form.
Regard, Hairul Azami a.k.a dr.emi

Share on Facebook