PHP – dremi.INFO https://www.dremi.info Software Development, Digital Marketing and News Sun, 20 Mar 2011 15:58:18 +0000 en-US hourly 1 https://wordpress.org/?v=6.4.3 https://www.dremi.info/wp-content/uploads/2020/12/cropped-icon-32x32.png PHP – dremi.INFO https://www.dremi.info 32 32 Interactive Ajax Data Management with Codeigniter https://www.dremi.info/codeigniter-academy/interactive-ajax-data-management-with-codeigniter.html https://www.dremi.info/codeigniter-academy/interactive-ajax-data-management-with-codeigniter.html#comments Sun, 20 Mar 2011 15:58:18 +0000 https://www.dremi.info/?p=1248 […]]]> Interactive Ajax Data Management with Codeigniter
Hi there! this is super fast tutorial, when I was take a rest at the room. Oh god, where is my cofee and PUNK music. Aha!
This tutorial will show to you, how to create Interactive and very fast data management on one page together, without refreshing any page. One thing make this better “You are in codeigniter class of dr.emi” So, enjoy this tutorial.

 
Interactive Ajax: Colorbox Confirm Dialog

First, we need some ammunition:
1. Codeigniter framework
2. jQuery framework
3. Netbeans IDE
4. Colorbox jQuery plugin

Part #1 Create database

CREATE TABLE `blog` (
`id` int(11) NOT NULL auto_increment,
`title` varchar(255) NOT NULL,
`content` text NOT NULL,
`date` datetime NOT NULL,
PRIMARY KEY (`id`)
) AUTO_INCREMENT=1;

Part #2 Codeigniter configuration

Open your base configuration and database configuration on folder ./application/config/
>>> autoload.php

$autoload['libraries'] = array('database');
$autoload['helper'] = array('html', 'url', 'form', 'template');
$autoload['model'] = array('Blog_model');

>>> database.php

$active_group = 'default';
$active_record = TRUE;
$db['default']['hostname'] = 'localhost';
$db['default']['username'] = 'root';
$db['default']['password'] = 'dremi_still_here';
$db['default']['database'] = 'interactive_ajax_data_management';

Part #3 Create Blog Controller

Create new class file on ./application/controllers/ and save as blog.php

<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');
/**
* Description of blog controller
*
* @author dr.emi
*/
class Blog extends CI_Controller {
function Blog() {
parent::__construct();
}
function index() {
$data = array(
'query' => $this->Blog_model->get_last_ten_entries()
);
$this->load->view('blog/index', $data);
}
function entries() {
$data = array(
'query' => $this->Blog_model->get_last_ten_entries()
);
$this->load->view('blog/entries', $data);
}
function form() {
$data = $this->Blog_model->current_entry();
$this->load->view('blog/form', $data);
}
function save() {
$this->Blog_model->save_entry();
}
function confirm() {
$this->load->view('blog/confirm');
}
function delete() {
$this->Blog_model->delete_entry();
}
}

Part #4 Create Blog Model

Create new class file on <strong>./application/models/</strong> and save as <strong>blog_model.php</strong>
[php]
<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');
/**
* Description of blog model
*
* @author dr.emi
*/
class Blog_model extends CI_Model {
function __construct() {
// Call the Model constructor
parent::__construct();
}
function get_last_ten_entries() {
$this->db->order_by("id", "desc");
$query = $this->db->get('blog', 10);
return $query;
}
function save_entry() {
$tabledata = get_table_fld('blog');
$data = post2data($tabledata);
$id = store_data('blog',$data,'id');
}
function delete_entry() {
$this->db->delete('blog', array('id' => $this->uri->segment(3)));
}
function current_entry() {
// Get Table Fields
$fields = get_table_fld('blog');
$data = make_array_key($fields);
$this->db->where('id', $this->uri->segment(3));
$sql = $this->db->get('blog');
$row = (array) $sql->row();
$data = array_merge($data, $row);
return $data;
}
}

Everything is fine, if you read codeigniter user guide. I just wanna tell you about the main concept on this tutorial. So, what the next?

Part #5 Create Template Helper

Create new class file on ./application/helpers/ and save as template_helper.php

<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');
/**
* @author dr.emi
* @copyright 2010
*/
function get_table_fld($table) {
$_this = & get_Instance();
$sql = "show columns from $table ";
$res = $_this->db->query($sql);
$rows = $res->result();
foreach($rows as $r){
$fld[] = $r->Field;
}
$fld = implode(';',$fld);
return ($fld);
}
function make_array_key($str) {
$ar = array();
$key = explode(';',$str);
foreach($key as $k){
$t = array($k=>'');
$ar = array_merge($ar,$t);
}
return $ar;
}
function post2data($str) {
$_this = & get_Instance();
$key = explode(';',$str);
foreach($key as $k){
if($_this->input->post($k)=='' ) continue;
$data[$k] = ltrim(rtrim($_this->input->post($k)));
}
return $data;
}
function store_data($table,& $data,$id) {
$_this = & get_Instance();
$result=0;
if($_this->input->post($id)==''){
if($_this->db->insert($table,$data)) {
//$data[$id] = mysql_insert_id();
$result = mysql_insert_id();
}
} else {
$_this->db->where($id,$_this->input->post($id));
if($_this->db->update($table,$data)) //update($table = '', $set = NULL, $where = NULL, $limit = NULL)
$result = $_this->input->post($id);
}
return $result;
}

Part #6 Create View of blog cotroller

==========MAIN CONCEPT==========
In this case, we will create it on new folder ./application/view/blog/
So, create all view into blog folder.
Then, we will load jQuery, colorbox, and a custom JS. Happy call the script!

<?php echo link_tag('public/css/style.css'); ?>
<?php echo link_tag('public/css/colorbox.css'); ?>
<script type="text/javascript" src="<?php echo base_url(); ?>public/js/jquery.js"></script>
<script type="text/javascript" src="<?php echo base_url(); ?>public/js/jquery.colorbox.js"></script>
<script type="text/javascript" src="<?php echo base_url(); ?>public/js/custom.js"></script>

Now, here is the main concept about the auto load dynamic content. We will open form, confirmation dialog, and action on one page without refresh current page. The strategy is: create two different ID on document as target. One as first init content, and the other as new content. When action is complete, we will reload the current content from entries.php file. We need, ajax jQuery here, and will show to you.

<div id="newEntries"><!--NEW CONTENT HERE, AS entries.php target--></div>
<div id="firstEntries"><!--FIRST CONTENT HERE--></div>

Remember, we have created function on blog controller class. So, use it! Here are the main function that will used on processing data.
function entries() >>> as result of table content
function form() >>> as colorbox pop up content while ajax request form.php view
function save() >>> as action while submit form, there are two condition: save new record and update new record
function confirm() >>> as colorbox pop up content while ajax request confirm.php view
function delete() >>> as action while delete record
Part #6.A Index.php view

<?php echo link_tag('public/css/style.css'); ?>
<?php echo link_tag('public/css/colorbox.css'); ?>
<script type="text/javascript" src="<?php echo base_url(); ?>public/js/jquery.js"></script>
<script type="text/javascript" src="<?php echo base_url(); ?>public/js/jquery.colorbox.js"></script>
<script type="text/javascript" src="<?php echo base_url(); ?>public/js/custom.js"></script>
<h1>Last 10 Entries</h1>
<a href="<?php echo site_url().'/blog/form'; ?>" return="<?php echo site_url().'/blog/entries'; ?>" id="popUpTrigger">Insert new record</a>
<div id="newEntries"></div>
<div id="firstEntries">
<table width="80%" cellpadding="1" cellspacing="1" bgcolor="#cecece" style="margin-top: 30px;">
<thead style="font-weight: bold;">
<tr bgcolor="#ffffff">
<td>#</td>
<td>Title</td>
<td>Date</td>
<td>Action</td>
</tr>
</thead>
<tbody>
<?php
if ($query->num_rows() > 0)
{
$i = 0;
foreach($query->result() as $row) { $i++;
?>
<tr bgcolor="#ffffff">
<td><?php echo $i; ?></td>
<td><a id="popUpEditFormTrigger" return="<?php echo site_url().'/blog/entries'; ?>" href="<?php echo site_url().'/blog/form/'.$row->id; ?>"><?php echo $row->title; ?></a></td>
<td><?php echo $row->date; ?></td>
<td><a id="popUpDeleteTrigger" return="<?php echo site_url().'/blog/entries'; ?>" href="<?php echo site_url().'/blog/confirm/'.$row->id; ?>">Delete</a></td>
</tr>
<?php
}
} else {
?>
<tr bgcolor="#ffffff">
<td colspan="4" align="center">No data!</td>
</tr>
<?php
}
?>
</tbody>
</table>

Part #6.B Form.php view

<script type="text/javascript" src="<?php echo base_url(); ?>public/js/form.js"></script>
<?php
echo form_fieldset('Blog form');
$hidden = array('id' => $id);
echo form_open('blog/save', 'method="post" id="updateForm"', $hidden);
echo form_label('Title', 'title');
echo '<br />';
echo form_input('title', $title, 'id="title"');
echo '<hr style="color: #f1f1f1;background-color: #c0c0c0;height: 2px;">';
echo form_label('Title', 'title');
echo '<br />';
echo form_textarea('content', $content, 'id="content"');
echo '<hr style="color: #f1f1f1;background-color: #c0c0c0;height: 2px;">';
echo form_button('Save', 'submit', 'id="submitForm"');
echo form_close();
echo form_fieldset_close();
?>

Part #6.C Entries.php view

<table width="80%" cellpadding="1" cellspacing="1" bgcolor="#cecece" style="margin-top: 30px;">
<thead style="font-weight: bold;">
<tr bgcolor="#ffffff">
<td>#</td>
<td>Title</td>
<td>Date</td>
<td>Action</td>
</tr>
</thead>
<tbody>
<?php
if ($query->num_rows() > 0)
{
$i = 0;
foreach($query->result() as $row) { $i++;
?>
<tr bgcolor="#ffffff">
<td><?php echo $i; ?></td>
<td><a id="popUpEditFormTrigger" return="<?php echo site_url().'/blog/entries'; ?>" href="<?php echo site_url().'/blog/form/'.$row->id; ?>"><?php echo $row->title; ?></a></td>
<td><?php echo $row->date; ?></td>
<td><a id="popUpDeleteTrigger" return="<?php echo site_url().'/blog/entries'; ?>" href="<?php echo site_url().'/blog/confirm/'.$row->id; ?>">Delete</a></td>
</tr>
<?php
}
} else {
?>
<tr bgcolor="#ffffff">
<td colspan="4 align="center">No data!</td>
</tr>
<?php
}
?>
</tbody>
</table>

Part #6.D Confirm.php view

<script type="text/javascript" src="<?php echo base_url(); ?>public/js/form.js"></script>
<h1>Are you sure?</h1>
<p>Are you sure you want to delete this record #<?php echo $this->uri->segment(3); ?>?</p>
<p><strong>Note:</strong> This cannot be undone!</p>
<input type="button" id="confirmDeleteButton" action="<?php echo site_url().'/blog/delete/'.$this->uri->segment(3); ?>" value="Yes">
<input type="button" id="cancelDeleteButton" value="No">

While delete link on entries row clicked, will call colorbox po pup. This pop up will request content of confirm.php, and give us two main button as choise. “Yes” if delete confirmed and “No” id delete calceled.
So, we need action while delete button cilicked. Here the ajax request action:

//Handle the 'actual' delete button:
$("#confirmDeleteButton").click(function() {
var url = $(this).attr('action');
$.ajax({
type: "POST",
url: url,
success: function() {
$.fn.colorbox.close();
}
});
return false;
});
//Handle the dialog cancel button:
$("#cancelDeleteButton").click(function() {
$.fn.colorbox.close();
return false;
});

And how about saving data? Don’t worry we will create this beautifull JS Code, to handle while Submit form clicked to send post data.

var dataString = $('#updateForm').serialize();
//alert (dataString);
$.ajax({
type: "POST",
url: url,
data: dataString,
success: function() {
$.fn.colorbox.close();
}
});

Before sending post data and request action URL from controller, you may create simple form validation:

var title = $('#title');
var content = $('#content');
var url = $('#updateForm').attr('action');
if (title.val()=='') {
alert('Title field is required');
title.focus();
return false;
}
if (content.val()=='') {
alert('Content field is required');
content.focus();
return false;
}

Well, this is just a variation, your next code will better than sample above.
OK! let’s try the result on browser. Happy coding!!

]]>
https://www.dremi.info/codeigniter-academy/interactive-ajax-data-management-with-codeigniter.html/feed 4
dreLogin v.2.0 Has Release https://www.dremi.info/tutorials/jquery/drelogin-v20-has-release.html https://www.dremi.info/tutorials/jquery/drelogin-v20-has-release.html#comments Thu, 12 Nov 2009 01:33:55 +0000 https://www.dremi.info/?p=975 […]]]> jQuery PHP User Form LoginI has release dreLogin V.2.0, it’s available to download and distributed under common license 3.0

Update bug notice:
– Clearing string username and password before login action
– Fixing CSS bug for IE 5 and IE 6
– Change from $_GET to $_REQUEST for URL parameter
– More secure and custom user password encryption
– Change jQuery JS Lib to jquery-1.3.2.min.js
– Fixing HTML TAG for Ajax Spinner Display
Enjoy it friends!!
If you want to download the old version, it’s still available at:
http://dremi.info/articles/drelogin-v10-a-simple-jquery-php-login.html
Report and Bug:
Please contact me for report and bug.
Demo:
Username: dremi
Password: terusberjuang

]]>
https://www.dremi.info/tutorials/jquery/drelogin-v20-has-release.html/feed 13
How to Check Username Availability using jQuery + PHP https://www.dremi.info/tutorials/html/how-to-check-username-availability-using-jquery-php.html https://www.dremi.info/tutorials/html/how-to-check-username-availability-using-jquery-php.html#comments Mon, 02 Nov 2009 20:54:26 +0000 https://www.dremi.info/?p=955 […]]]> Hi! how are you today ? I hope all of you will fine ๐Ÿ™‚
Today is our nice day, it’s time to party. Let’s learn again about jQuery and PHP. How to create safety validation of username checker for your member register using jQuery and PHP ? Check it now!

However we still need :
Member register form, just a simple HTML code
jQuery library, the Ajax Masterpiece
PHP Script, basic validation script
Little bit of member sql table, we will create it using PHPMyAdmin
Now, open your Dreamweaver, or any Code Editor, Notepad++ are welcome!
First, we will create HTML code for member register form. Remember, this form is just for illustrate the real form.

<form id="form1" name="form1" method="post" action="">
<fieldset>
	<legend>Check Username Availability</legend>
	<label>Username <span class="require">(* requiered: alphanumeric, without white space, and minimum 4 char</span></label>
    <input type="text" name="username" id="username" size="15" maxlength="15" onchange="loadContentResult(this.value)" />
	<div id="spinner"></div>
    <div id="actionresult"></div>
	<div class="clear"></div>
	<label>Email:</label>
	<input type="text" name="email" id="email" size="30" maxlength="255" />
	<div class="clear"></div>
	<input type="submit" name="submit" id="submit" value="Register" />
</fieldset>
</form>

On my input code, I use onchange=”loadContentResult(this.value)” to handle username field value while onChange event. So, where is come from the loadContentResult() ?
Here are the Javascript code, include for jQuery preloader.

<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
// Count the number of times a substring is in a string.
String.prototype.substrCount =
  function(s) {
    return this.length && s ? (this.split(s)).length - 1 : 0;
  };
// Return a new string without leading and trailing whitespace
// Double spaces whithin the string are removed as well
String.prototype.trimAll =
  function() {
    return this.replace(/^\s+|(\s+(?!\S))/mg,"");
  };
//event handler
function loadContentResult(username) {
	if(username.substrCount(' ') > 0)
	{
		$("#actionresult").hide();
		$("#actionresult").load("user.php?msg=whitespace", '', callbackResult);
	}
	else
	{
		$("#actionresult").hide();
		$("#actionresult").load("user.php?username="+username.trimAll()+"", '', callbackResult);
	}
}
//callback
function callbackResult() {
	$("#actionresult").show();
}
//ajax spinner
$(function(){
	$("#spinner").ajaxStart(function(){
		$(this).html('<img src="image/wait.gif" />');
	});
	$("#spinner").ajaxSuccess(function(){
		$(this).html('');
 	});
	$("#spinner").ajaxError(function(url){
		alert('Error: server was not respond, communication interrupt. Please try again in a few moment.');
 	});
});
</script>

To call jQuery library, use

<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>

You must carefull to validate string from username field before send it into PHP script. The problem is if you enter white space string from username field then send it into PHP script without validate it before, you will trouble while accessing user.php as PHP Script. So I need to add this javascript before validated by PHP script.

// Count the number of times a substring is in a string.
String.prototype.substrCount =
  function(s) {
    return this.length && s ? (this.split(s)).length - 1 : 0;
  };
// Return a new string without leading and trailing whitespace
// Double spaces whithin the string are removed as well
String.prototype.trimAll =
  function() {
    return this.replace(/^\s+|(\s+(?!\S))/mg,"");
  };

How about jquery as script loader? To load user.php and attempt it into DIV ID for #actionresult, we can use this script:

//event handler
function loadContentResult(username) {
	if(username.substrCount(' ') > 0)
	{
		$("#actionresult").hide();
		$("#actionresult").load("user.php?msg=whitespace", '', callbackResult);
	}
	else
	{
		$("#actionresult").hide();
		$("#actionresult").load("user.php?username="+username.trimAll()+"", '', callbackResult);
	}
}
//callback
function callbackResult() {
	$("#actionresult").show();
}

Don’t worry about ajax loading animation, I use simple GIF animation as spinner:

//ajax spinner
$(function(){
	$("#spinner").ajaxStart(function(){
		$(this).html('<img src="image/wait.gif" />');
	});
	$("#spinner").ajaxSuccess(function(){
		$(this).html('');
 	});
	$("#spinner").ajaxError(function(url){
		alert('Error: server was not respond, communication interrupt. Please try again in a few moment.');
 	});
});

So, what netxt!? It’s time to make cool PHP Script to validate our username string (in this case, I just use username field as POST variable. But before it, let’s create our mysql table:

CREATE TABLE `member2` (
`member_id` int( 11 ) NOT NULL AUTO_INCREMENT ,
`username` varchar( 15 ) NOT NULL ,
`email` varchar( 255 ) NOT NULL ,
PRIMARY KEY ( `member_id` )
);
INSERT INTO `member` VALUES (1, 'dremi', 'webmaster@dremi.info');

This script for user.php file as response validator. Remember this is main function only, you may add some connection script.

function clearString($value)
{
	if (get_magic_quotes_gpc())
	{
		$value = stripslashes($value);
	}
	if (!is_numeric($value))
	{
		$value = mysql_real_escape_string($value);
	}
	$value = trim(strip_tags($value));
	return $value;
}
function validStr($str, $num_chars, $behave) //alpha numeric only for entire of string width
{
	if($behave=="min")
	{
		$pattern="^[0-9a-zA-Z]{".$num_chars.",}$";
	}
	elseif($behave=="max")
	{
		$pattern="^[0-9a-zA-Z]{0,".$num_chars."}$";
	}
	elseif($behave=="exactly")
	{
		$pattern="^[0-9a-zA-Z]{".$num_chars.",".$num_chars."}$";
	}
	if(ereg($pattern,$str))
	{
		return true;
	}
	else
	{
		return false;
	}
}

And this is for validate condition.

$username	= $_REQUEST['username'];
$msg		= $_REQUEST['msg'];
if(isset($username) && $username != '')
{
	if(validStr($username, 4, 'min') == false)
	{
		?>
		<span style="color:red">You enter invalid username</span>
		<?php
	}
	else
	{
		connect(_HOST, _USER, _PASS, _DB);
		$jCekMember = numrows(query("SELECT * FROM member WHERE username = '".clearString($username)."'"));
		if($jCekMember != 0)
		{
			?>
			<span style="color:blue">Username <?php echo $username; ?> was unavailable, another people has taken.</span>
			<?php
		}
		else
		{
			?>
			<span style="color:green">Username <?php echo $username; ?> available.</span>
			<?php
		}
		close();
	}
}
elseif($msg == 'whitespace')
{
	?>
	<span style="color:red">Username cannot contain of white space</span>
    <?php
}
else
{
	?>
	<span style="color:red">Insert username</span>
    <?php
}

While username is valid string, PHP script will check availablility on member table using this code:

$jCekMember = numrows(query("SELECT * FROM member WHERE username = '".clearString($username)."'"));

So, as showed on next line, if username is not available to register in member table, it’s mean the username has taken by another people, and message will say :

Username <?php echo $username; ?> was unavailable, another people has taken.

Well, everything is gonna be Allright ๐Ÿ™‚
Now let’s see the result by click on Demo Button or you can Download full code to learn.

]]> https://www.dremi.info/tutorials/html/how-to-check-username-availability-using-jquery-php.html/feed 2 Download PHP Script: Backup and Restore Database https://www.dremi.info/articles/download-php-script-backup-and-restore-database.html https://www.dremi.info/articles/download-php-script-backup-and-restore-database.html#comments Thu, 01 Oct 2009 07:34:28 +0000 https://www.dremi.info/?p=906 […]]]> Hi guys!

This is PHP Script to backup or restore your SQL Database. It’s Free to download!
Just visit my PHPClasses Page:
http://www.phpclasses.org/browse/package/5720.html
Or let’s discuss about something bug or report on:
http://www.phpclasses.org/discuss/package/5720/

]]>
https://www.dremi.info/articles/download-php-script-backup-and-restore-database.html/feed 3
Building Administrator Manager for Table Relation Using PHP and jQuery https://www.dremi.info/tutorials/php/building-administrator-manager-for-table-relation-using-php-and-jquery.html https://www.dremi.info/tutorials/php/building-administrator-manager-for-table-relation-using-php-and-jquery.html#comments Fri, 03 Jul 2009 10:46:04 +0000 https://www.dremi.info/?p=870 […]]]> 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

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

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

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

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

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

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

The last is let me type my copyright website

&lt;div id=&quot;footer&quot;&gt;
&amp;copy; Copyright 2009 dr.emi creative design { &lt;a href=&quot;https://www.dremi.info&quot; target=&quot;_blank&quot;&gt;www.dremi.info&lt;/a&gt; }
&lt;/div&gt;

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&amp;TB_iframe=true&amp;height=250&amp;width=300   

And this is code of ui-collection.php

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

PHP code for category-loader.php

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

PHP Code for frame-collection-loader.php

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

Here are the complete index.php code

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

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

]]>
https://www.dremi.info/tutorials/php/building-administrator-manager-for-table-relation-using-php-and-jquery.html/feed 22
How to Modifiying SMF User Register Page to Protect from Spammer or Junker https://www.dremi.info/tutorials/php/how-to-modifiying-smf-user-register-page-to-protect-from-spammer-or-junker.html https://www.dremi.info/tutorials/php/how-to-modifiying-smf-user-register-page-to-protect-from-spammer-or-junker.html#comments Sat, 27 Jun 2009 15:23:59 +0000 https://www.dremi.info/?p=853 […]]]> For more than one week, I got spam and bad posting (junk) on my forum . But today I hope no more again. I think this tutorial will help you, how to modifiying SMF User Register Page to protect from spammer or junker. As you know, SMF has Spam Protection like Captcha, called as Visual Verification. For a simple spam protection, I think captcha is enough for your forum register protection. But how if users do register and then make some posting on your forum ?

As you know, forum is place for your community to discuss about your website or other, and absolutly your website have members. But becarefull, how if your member only want to post spam or junk maybe. You will not have more time to moderate the junk or spam posts.
It explain about, we need personal verification for the register user page. So we must modify the user register page. Actually SMF has a default template for displaying user register, you can found it at: /SMF-Folder/Themes/default/Register.template.php
Just begin from this file, open it and find this line:

if ($context['visual_verification'])

Before these line, you will see table structure for password field.

&amp;amp;lt;tr&amp;amp;gt;
&amp;amp;lt;td width=&quot;40%&quot;&amp;amp;gt;
&amp;amp;lt;b&amp;amp;gt;', $txt[82], ':&amp;amp;lt;/b&amp;amp;gt;
&amp;amp;lt;/td&amp;amp;gt;
&amp;amp;lt;td&amp;amp;gt;
&amp;amp;lt;input type=&quot;password&quot; name=&quot;passwrd2&quot; size=&quot;30&quot; tabindex=&quot;', $context['tabindex']++, '&quot; /&amp;amp;gt;
&amp;amp;lt;/td&amp;amp;gt;
&amp;amp;lt;/tr&amp;amp;gt;

Add this code after password table row

$tempPhrase = 'YourSecreetWord';
$_SESSION['temp_phrase'] = $tempPhrase;
echo '
&amp;amp;lt;tr&amp;amp;gt;
&amp;amp;lt;td width=&quot;40%&quot;&amp;amp;gt;
&amp;amp;lt;b&amp;amp;gt;', $txt[88], ':&amp;amp;lt;/b&amp;amp;gt;
&amp;amp;lt;div class=&quot;smalltext&quot;&amp;amp;gt;', $txt['valid_phrase_description'], '&amp;amp;lt;/div&amp;amp;gt;
&amp;amp;lt;/td&amp;amp;gt;
&amp;amp;lt;td&amp;amp;gt;
&amp;amp;lt;input type=&quot;text&quot; name=&quot;valid_phrase&quot; size=&quot;30&quot; tabindex=&quot;', $context['tabindex']++, '&quot; /&amp;amp;gt;
&amp;amp;lt;/td&amp;amp;gt;
&amp;amp;lt;/tr&amp;amp;gt;

Let’s see this extra code:

$tempPhrase = 'Azami'; ==&amp;amp;gt; YourSecreetWord, will used for session value and this is your answer of Personal Perification
$_SESSION['temp_phrase'] = $tempPhrase; ==&amp;amp;gt; make session value registered
$txt[88] ==&amp;amp;gt; Language array, will used for displaying Personal Verfication Label.
$txt['valid_phrase_description'] ==&amp;amp;gt; Language array, will used for displaying notes or simple question for you new member
name=&quot;valid_phrase&quot; ==&amp;amp;gt; a name for your new field

Then how to adding new language array ?? just open Login.english.php that located on /SMF-Folder/Themes/default/Languages/Login.english.php
Then Add this line wherever you want:

$txt['valid_phrase_description'] = 'What is my last name ?'; //will displayed on Register.template.php

Next, open /SMF-Folder/Themes/default/Languages/index.english.php file. Then add this line wherever you want:

$txt[88] = 'Personal Verification '; //will displayed on Register.template.php
##note: 88 is number of variable for Language array of Login.english.php

Next step is modifying this file: /SMF-Folder/Sources/Register.php. Then find this line :

if (!empty($modSettings['coppaAge']) &amp;amp;amp;&amp;amp;amp; empty($modSettings['coppaType']) &amp;amp;amp;&amp;amp;amp; !isset($_POST['skip_coppa']))

Add this code after these line:

if ($_SESSION['temp_phrase'] != $_POST['valid_phrase'])
	{
		loadLanguage('Login');
		fatal_lang_error('phrase_verification_failed', false);
	}
	elseif (isset($_SESSION['temp_phrase']))
		unset($_SESSION['temp_phrase']);

The code above will used for session authentication of Personal Perification Answer.
And don’t forget to add “phrase_verification_failed” array string into file: /SMF-Folder/Themes/default/Languages/Errors.english.php

$txt['phrase_verification_failed'] = 'Your answer is wrong ! Please Try Again.';

It’s DONE! ๐Ÿ™‚
Upload your new modifiying files into Host. And then you will see the new Personal Verification in User Register Page.
This is my screeshoot of spammer (human) user that trying to register with wrong answer in User Register Page.

Photobucket

Regard, dr.emi

]]> https://www.dremi.info/tutorials/php/how-to-modifiying-smf-user-register-page-to-protect-from-spammer-or-junker.html/feed 3 Creating Auto Checker for IP Network Lifetime https://www.dremi.info/tutorials/jquery/creating-auto-checker-for-ip-network-lifetime.html https://www.dremi.info/tutorials/jquery/creating-auto-checker-for-ip-network-lifetime.html#comments Sat, 27 Jun 2009 00:47:36 +0000 https://www.dremi.info/?p=844 […]]]> Hi! I have a tutorial to check lifetime connectivity for IP and PORT in your Network. You may use it as component of enterpise application to check IP and PORT.
So, what next ???

 

Offcourse, we need this files: ipchecker.php, frame_ip.php, index.php, and jquery framework.
First create ipchecker.php for function handler:
Code:

&lt;?
/**
#
# Auto Checker for IP Network Lifetime
# Author  hairul azami a.k.a dr.emi &lt;webmaster@dremi.info&gt;
# Website http://dremi.info
# License: GPL
#
**/
error_reporting(0);
define(&quot;_IMAGES&quot;, &quot;images/&quot;);
define(&quot;_IPROUTER&quot;, &quot;192.168.1.1&quot;);
function checkIP($ip, $p)
{
//error_reporting(E_ALL);
@set_time_limit(0);
$address = &quot;$ip&quot;; //your public IP
$port = $p; // your IP open port
$fp = @fsockopen($address,$port,$errno,$errstr,10);
stream_set_timeout($fp, 1);
if ($fp)
{
$statusIPport =  &quot;&lt;font color=green&gt;Connected&lt;/font&gt;&quot;;
$imgTitle = &quot;Connected&quot;;
$imgStats = &quot;accepted_32.png&quot;;
}
else
{
$statusIPport =  &quot;&lt;font color=#CCCCCC&gt;Disconnect&lt;/font&gt;&quot;;
$imgTitle = &quot;Disconnect&quot;;
$imgStats = &quot;warning_32.png&quot;;
}
$info = stream_get_meta_data($fp);
if($info['timed_out'])
{
$statusIPport =  &quot;&lt;font color=#CCCCCC&gt;Time Out&lt;/font&gt;&quot;;
$imgTitle = &quot;Time Out&quot;;
$imgStats = &quot;cancel_32.png&quot;;
}
flush();
$checkID = strtoupper(gethostbyaddr($address));
if($checkID != $address)
{
$comname = $checkID;
}
elseif($checkID == _IPROUTER)
{
$comname = &quot;ROUTER&quot;;
}
else
{
$comname = &quot;NONAME&quot;;
}
echo &quot;
&lt;div style='text-align:center;'&gt;
&lt;img src='&quot;._IMAGES . $imgStats.&quot;' alt='$imgTitle' title='$imgTitle' border=0&gt;&lt;br&gt;
&lt;strong&gt;$imgTitle&lt;/strong&gt;&lt;br&gt;
$address:$port&lt;br&gt;
$comname
&lt;/dvi&gt;&quot;;
}
checkIP($_GET['ip'], $_GET['port']);
?&gt;

The function will used as checker for each of variable IP and PORT
Second, create an jQuery Auto Load for file, called as frame_ip.php
In this file, you must load jQuery framework to complete javascript function bellow
Code:

&lt;script language=&quot;javascript&quot; src=&quot;jquery-1.2.6.min.js&quot;&gt;&lt;/script&gt;
&lt;script language=&quot;javascript&quot;&gt;
//show animation
$(function(){
$(&quot;#ajax_display&quot;).ajaxStart(function(){
$(this).html('&lt;div style=&quot;text-align:center&quot;&gt;&lt;img src=&quot;images/ajax-loader-trans.gif&quot;/&gt;&lt;br&gt;Checking Target...&lt;/div&gt;');
});
$(&quot;#ajax_display&quot;).ajaxSuccess(function(){
$(this).html('');
});
$(&quot;#ajax_display&quot;).ajaxError(function(url){
alert('jqSajax is error ');
});
});
&lt;/script&gt;

Then to load ipchecker.php, I use this code:

&lt;div id=&quot;ajax_display&quot;&gt;&lt;/div&gt;
&lt;script type=&quot;text/javascript&quot;&gt;
function getRandom() {
$(&quot;#random&quot;).hide(&quot;slow&quot;);
$(&quot;#random&quot;).load(&quot;ipchecker.php?ip=&lt;? echo $_GET['ip']; ?&gt;&amp;port=&lt;? echo $_GET['port']; ?&gt;&quot;, '', callback);
}
function callback() {
$(&quot;#random&quot;).show(&quot;slow&quot;);
setTimeout(&quot;getRandom();&quot;, 10000*2);
}
$(document).ready(getRandom);
&lt;/script&gt;
&lt;div id=&quot;random&quot;&gt;&lt;/div&gt;

While ip and port was defined in iframe URL, PHP function checkIP($ip, $p) will work.
I use this line for set the time while load ipchecker.php from first time to next load progress.

setTimeout(&quot;getRandom();&quot;, 10000*2);

The last is index.php
This file will give you GUI of all process

&lt;?
for($i=1;$i&lt;=10;$i++)
{
?&gt;
&lt;div id=&quot;ipslot&quot;&gt;
&lt;iframe scrolling=&quot;No&quot; frameborder=&quot;0&quot; class=&quot;frameloader&quot; width=&quot;100px&quot; height=&quot;100px&quot; name=&quot;ajax_ipchecker&quot; src=&quot;frame_ip.php?ip=192.168.1.&lt;? echo $i; ?&gt;&amp;port=80&quot;&gt;
&lt;/iframe&gt;
&lt;/div&gt;
&lt;?
}
?&gt;

While index.php loaded, frame_ip.php will work as “data sender” from URL, so we can check it in checkIP function.
Well this is screenshoot while you access index.php from http://localhost/[foldername]/index.php

OK, I think it’s really good time to see you here, thanks for read ๐Ÿ™‚
If you find any bug / report, just comment here ..

]]>
https://www.dremi.info/tutorials/jquery/creating-auto-checker-for-ip-network-lifetime.html/feed 4
Web Design Layout Plus Implementasi jQuery Tab Content https://www.dremi.info/tutorials/css/web-design-layout-plus-implementasi-jquery-tab-content.html https://www.dremi.info/tutorials/css/web-design-layout-plus-implementasi-jquery-tab-content.html#comments Wed, 26 Nov 2008 01:22:20 +0000 https://www.dremi.info/?p=87 […]]]> Welcome back friend! This tutorial explains how to create an interactive layout. A combination of designing web layout using Photoshop and Editing with HTML + CSS. Then implement it using jQuery Ajax when loading PHP Content

All you need is:

-Photoshop
-HTML+CSS
-jQuery Ajax
-PHP

Part I Designing Website Layout

Open your Photoshop, make the canvas size like this:

Select the Rectangle Marquee Tool, create a header object like this:

Apply multiple layer styles:

Look at the results

Now create a white line using single row marquee tool, between gradient and drop shadow. fill line make white color

Use the rounded rectangle tool to create a navigation button, use the radius as you wish

apply layer style

All gradients are in the tutorial na download package

Press [CTRL + Click] on the navigation button layer, to make a selection around the button.

Select Elliptical Marquee Tool selection and option option: Intersect with selection. Makes an oval selection above the previous selection

You will get the selection results like this

Click [CTRL + D] to Deselect
Transform vertical na object, by pressing [CTRL + T] -> Flip Vertical
Select menu Filter> Blur> Gaussian Blur. Add a 2 px radius.
and change the layer’s blending to Overlay

Give the na text button too

You can group all navigation layers into a group, and duplicate the groups into groups

Almost done with the layout, add the icon and text objects as the web title

Finally, make a footer in a simple way, like a header

Review the final layout results

Part II Slicing Images

So we’re going to take certain pictures only, take part with the slicing tool that will be needed to create CSS code.
First is the navigation slice

Pilih File > Save for Web and Device

Remember: choose Selected Slice, dowank

Then continue to the next slice, like bg-header, bg-footer and logo
So you will get some of the images needed in coding na CSS

Part III Make HTML+CSS Code

By making your website load when opened in a browser, Less Table is one of the best ways ๐Ÿ™‚
I like this part the most, open Dreamweaver, create a CSS file
So this is the CSS code:

  &amp;amp;amp;lt;style type=&quot;text/css&quot;&amp;amp;amp;gt;
html,body{
margin:0;
padding:0;
border:0;
/* \*/
height:100%;
/* Last height declaration hidden from Mac IE 5.x */
}
body {
background:#ffffff url(images/bg-header.gif) 0 0 repeat-x;
color:#000000;
min-width:960px;
}
#mainPan {
width:960px;
position:relative;
margin:0 auto;
}
#bodyPan {
width:960px;
margin:0 auto;
}
#headerPan {
width:960px;
height:127px;
margin:0px;
padding:0px;
}
#headerPan img.logo {
border:0px;
width:148px;
height:69px;
margin-left:20px;
margin-top:10px;
}
/* MENU TAB NAVIGATION */
#tabs {
line-height:normal;
top: 25px;
right:10px;
position:absolute;
}
#tabs ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#tabs li {
display:inline;
margin:0;
padding:0;
}
#tabs a {
font-size:12px;
font-family:Arial, Helvetica, sans-serif;
color:#ffffff;
float:left;
background:url(images/bg-navigasi.gif) no-repeat left top;
margin:0;
padding-top:10px;
text-decoration:none;
width:137px;
height:59px;
text-align:center; /*for IE + FF right here*/
}
#tabs a:hover {
font-size:12px;
font-family:Arial, Helvetica, sans-serif;
color: #FFCC00;
}
.spacer {
margin-bottom:20px;
}
/* CONTENT */
#contenPan {
font-size:11px;
color:#666666;
font-family:Arial, Helvetica, sans-serif;
width:960px;
margin:0px;
}
#contenPan h2 {
font-size:14px;
font-family:Arial, Helvetica, sans-serif;
color:#006699;
}
#contenPan a {
color:#0066CC;
text-decoration:none;
}
#contenPan a:hover {
color: #FF0000;
text-decoration:none;
}
/* FOOTER */
#footerMainPan {
position:relative;
clear: both;
width:100%;
height:138px; /*for FF add 10px;*/
overflow:hidden;
background:url(images/bg-footer.gif) 30px center repeat-x;
text-align:center;
}
#footerPan {
padding-top:50px;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
color: #666666;
width:960px;
height:88px;
background: url(images/cutter.gif) right top no-repeat;
margin:0px;
}
#footerPan a {
color: #0099FF; text-decoration:none;
}
#footerPan a:hover {
color: #333399; text-decoration:none;
}
&amp;amp;amp;lt;/style&amp;amp;amp;gt;

save dan kasi nama style.css
sekarang kite bakalan mbikin index.html
dan ini code ma:

&amp;amp;amp;lt;div id=&quot;mainPan&quot;&amp;amp;amp;gt;
&amp;amp;amp;lt;div id=&quot;bodyPan&quot;&amp;amp;amp;gt;
&amp;amp;amp;lt;div id=&quot;headerPan&quot;&amp;amp;amp;gt;
&amp;amp;amp;lt;img src=&quot;images/logo.gif&quot; class=&quot;logo&quot; /&amp;amp;amp;gt;
&amp;amp;amp;lt;div id=&quot;tabs&quot;&amp;amp;amp;gt;
&amp;amp;amp;lt;ul&amp;amp;amp;gt;
&amp;amp;amp;lt;li&amp;amp;amp;gt;&amp;amp;amp;lt;a href=&quot;#&quot;&amp;amp;amp;gt;Home&amp;amp;amp;lt;/a&amp;amp;amp;gt;&amp;amp;amp;lt;/li&amp;amp;amp;gt;
&amp;amp;amp;lt;li&amp;amp;amp;gt;&amp;amp;amp;lt;a href=&quot;#&quot;&amp;amp;amp;gt;Photoshop&amp;amp;amp;lt;/a&amp;amp;amp;gt;&amp;amp;amp;lt;/li&amp;amp;amp;gt;
&amp;amp;amp;lt;li&amp;amp;amp;gt;&amp;amp;amp;lt;a href=&quot;#&quot;&amp;amp;amp;gt;CSS&amp;amp;amp;lt;/a&amp;amp;amp;gt;&amp;amp;amp;lt;/li&amp;amp;amp;gt;
&amp;amp;amp;lt;li&amp;amp;amp;gt;&amp;amp;amp;lt;a href=&quot;#&quot;&amp;amp;amp;gt;PHP&amp;amp;amp;lt;/a&amp;amp;amp;gt;&amp;amp;amp;lt;/li&amp;amp;amp;gt;
&amp;amp;amp;lt;li&amp;amp;amp;gt;&amp;amp;amp;lt;a href=&quot;#&quot;&amp;amp;amp;gt;AJAX&amp;amp;amp;lt;/a&amp;amp;amp;gt;&amp;amp;amp;lt;/li&amp;amp;amp;gt;
&amp;amp;amp;lt;/ul&amp;amp;amp;gt;
&amp;amp;amp;lt;/div&amp;amp;amp;gt;
&amp;amp;amp;lt;/div&amp;amp;amp;gt;
&amp;amp;amp;lt;div id=&quot;contenPan&quot;&amp;amp;amp;gt;
&amp;amp;amp;lt;h2&amp;amp;amp;gt;Heloo....&amp;amp;amp;lt;/h2&amp;amp;amp;gt;
&amp;amp;amp;lt;p&amp;amp;amp;gt;This is main Content &amp;amp;amp;lt;a href=&quot;#&quot;&amp;amp;amp;gt;[link]&amp;amp;amp;lt;/a&amp;amp;amp;gt;&amp;amp;amp;lt;/p&amp;amp;amp;gt;
&amp;amp;amp;lt;div class=&quot;spacer&quot;&amp;amp;amp;gt;&amp;amp;amp;amp;nbsp;&amp;amp;amp;lt;/div&amp;amp;amp;gt;
&amp;amp;amp;lt;div class=&quot;spacer&quot;&amp;amp;amp;gt;&amp;amp;amp;amp;nbsp;&amp;amp;amp;lt;/div&amp;amp;amp;gt;
&amp;amp;amp;lt;div class=&quot;spacer&quot;&amp;amp;amp;gt;&amp;amp;amp;amp;nbsp;&amp;amp;amp;lt;/div&amp;amp;amp;gt;
&amp;amp;amp;lt;div class=&quot;spacer&quot;&amp;amp;amp;gt;&amp;amp;amp;amp;nbsp;&amp;amp;amp;lt;/div&amp;amp;amp;gt;
&amp;amp;amp;lt;div class=&quot;spacer&quot;&amp;amp;amp;gt;&amp;amp;amp;amp;nbsp;&amp;amp;amp;lt;/div&amp;amp;amp;gt;
&amp;amp;amp;lt;div class=&quot;spacer&quot;&amp;amp;amp;gt;&amp;amp;amp;amp;nbsp;&amp;amp;amp;lt;/div&amp;amp;amp;gt;
&amp;amp;amp;lt;div class=&quot;spacer&quot;&amp;amp;amp;gt;&amp;amp;amp;amp;nbsp;&amp;amp;amp;lt;/div&amp;amp;amp;gt;
&amp;amp;amp;lt;/div&amp;amp;amp;gt;
&amp;amp;amp;lt;/div&amp;amp;amp;gt;
&amp;amp;amp;lt;/div&amp;amp;amp;gt;
&amp;amp;amp;lt;div id=&quot;footerMainPan&quot;&amp;amp;amp;gt;
&amp;amp;amp;lt;div id=&quot;footerPan&quot;&amp;amp;amp;gt;
&amp;amp;amp;amp;copy; 2008 Web Design Ajax jQuery.
&amp;amp;amp;lt;a href=&quot;http://www.psdremi.co.cc&quot; target=&quot;_blank&quot;&amp;amp;amp;gt;
PSDREMI.CO.CC
&amp;amp;amp;lt;/a&amp;amp;amp;gt;
&amp;amp;amp;lt;/div&amp;amp;amp;gt;
&amp;amp;amp;lt;/div&amp;amp;amp;gt;

I think that’s the code na, I’m sure you will be familiar ๐Ÿ™‚

Part IV Adding jQuery Ajax Scripts to Load Contents

You know jQuery right? if not, read the introduction to jQuery dlo yak on the web na ๐Ÿ™‚
In this section we need the jQuery script library, while plugins are not needed.
Just give this line in the HTML na, when loading the jQuery Javascript Library na

 &amp;amp; amp; lt; script src = &quot;jquery-1.2.6.js&quot; type = &quot;text / javascript&quot; &amp;amp; amp; gt; &amp;amp; amp; lt; / script &amp;amp; amp; gt; [/ javascript]

and give the javascripts code to create a function to load external content on contentPan Div
&lt;pre&gt;[javascript]&amp;amp;amp;lt;script type=&quot;text/javascript&quot;&amp;amp;amp;gt;
$(function(){
$(&quot;#ajax_display&quot;).ajaxStart(function(){
$(this).html('&amp;amp;amp;lt;p&amp;amp;amp;gt;&amp;amp;amp;lt;img src=&quot;images/ajax-loader.gif&quot; /&amp;amp;amp;gt;&amp;amp;amp;lt;/p&amp;amp;amp;gt;');
});
$(&quot;#ajax_display&quot;).ajaxSuccess(function(){
$(this).html('');
});
$(&quot;#ajax_display&quot;).ajaxError(function(url){
alert('jQuery ajax is error ');
});
});
function loadContent(id) {
$(&quot;#contenPan&quot;).hide();
$(&quot;#contenPan&quot;).load(&quot;php-loader.php?cPub=&quot;+id+&quot;&quot;, '', callback);
}
function callback() {
$(&quot;#contenPan&quot;).show();
}
$(document).ready(loadContent(id));
&amp;amp;amp;lt;/script&amp;amp;amp;gt;

Simple line:

  $(this).html('&amp;amp;amp;lt;p&amp;amp;amp;gt;&amp;amp;amp;lt;img src=&quot;images/ajax-loader.gif&quot; /&amp;amp;amp;gt;&amp;amp;amp;lt;/p&amp;amp;amp;gt;');
/*this line will load the ajax-loader.gif while progress on request*/

and the following code is required to call data content

  function loadContent(id) {
$(&quot;#contenPan&quot;).hide();
$(&quot;#contenPan&quot;).load(&quot;php-loader.php?cPub=&quot;+id+&quot;&quot;, '', callback);
}
function callback() {
$(&quot;#contenPan&quot;).show();
}

php-loader.php is a PHP file whose task is to provide values in HTML form, these values will be requested by jQuery Ajax to be loaded into contentPan Div

&amp;amp;amp;lt;?
$allCount = 60; //just to simulation for data ready
if($_GET['cPub'] == 2)
{
echo &quot;&amp;amp;amp;lt;h2&amp;amp;amp;gt;Photoshop&amp;amp;amp;lt;/h2&amp;amp;amp;gt;&quot;;
echo &quot;&amp;amp;amp;lt;p align=justify&amp;amp;amp;gt;&amp;amp;amp;lt;img src='images/psdremi-logo130.gif' width='130' height=44'&amp;amp;amp;gt;&quot;;
for($i=0;$i&amp;amp;amp;lt;=$allCount;$i++)
{
echo &quot;This is Photoshop Content. &quot;;
}
echo &quot;&amp;amp;amp;lt;/p&amp;amp;amp;gt;&quot;;
sleep(2);
}
elseif($_GET['cPub'] == 3)
{
echo &quot;&amp;amp;amp;lt;h2&amp;amp;amp;gt;CSS&amp;amp;amp;lt;/h2&amp;amp;amp;gt;&quot;;
echo &quot;&amp;amp;amp;lt;p align=justify&amp;amp;amp;gt;&amp;amp;amp;lt;img src='images/psdremi-logo130.gif' width='130' height=44'&amp;amp;amp;gt;&quot;;
for($i=0;$i&amp;amp;amp;lt;=$allCount;$i++)
{
echo &quot;This is CSS Content. &quot;;
}
echo &quot;&amp;amp;amp;lt;/p&amp;amp;amp;gt;&quot;;
sleep(2);
}
elseif($_GET['cPub'] == 4)
{
echo &quot;&amp;amp;amp;lt;h2&amp;amp;amp;gt;PHP&amp;amp;amp;lt;/h2&amp;amp;amp;gt;&quot;;
echo &quot;&amp;amp;amp;lt;p align=justify&amp;amp;amp;gt;&amp;amp;amp;lt;img src='images/psdremi-logo130.gif' width='130' height=44'&amp;amp;amp;gt;&quot;;
for($i=0;$i&amp;amp;amp;lt;=$allCount;$i++)
{
echo &quot;This is PHP Content. &quot;;
}
echo &quot;&amp;amp;amp;lt;/p&amp;amp;amp;gt;&quot;;
sleep(2);
}
elseif($_GET['cPub'] == 5)
{
echo &quot;&amp;amp;amp;lt;h2&amp;amp;amp;gt;AJAX&amp;amp;amp;lt;/h2&amp;amp;amp;gt;&quot;;
echo &quot;&amp;amp;amp;lt;p align=justify&amp;amp;amp;gt;&amp;amp;amp;lt;img src='images/psdremi-logo130.gif' width='130' height=44'&amp;amp;amp;gt;&quot;;
for($i=0;$i&amp;amp;amp;lt;=$allCount;$i++)
{
echo &quot;This is AJAX Content. &quot;;
}
echo &quot;&amp;amp;amp;lt;/p&amp;amp;amp;gt;&quot;;
sleep(2);
}
else
{
echo &quot;&amp;amp;amp;lt;h2&amp;amp;amp;gt;Home&amp;amp;amp;lt;/h2&amp;amp;amp;gt;&quot;;
echo &quot;&amp;amp;amp;lt;p&amp;amp;amp;gt;&amp;amp;amp;lt;a href=''&amp;amp;amp;gt;this is a link&amp;amp;amp;lt;/a&amp;amp;amp;gt;&amp;amp;amp;lt;/p&amp;amp;amp;gt;&quot;;
echo &quot;&amp;amp;amp;lt;p align=justify&amp;amp;amp;gt;&amp;amp;amp;lt;img src='images/psdremi-logo130.gif' width='130' height=44'&amp;amp;amp;gt;&quot;;
for($i=0;$i&amp;amp;amp;lt;=$allCount;$i++)
{
echo &quot;Welcome back friend ! this tutorial explain about how to designing web layout with Photoshop+CSS and then using Ajax jQuery to implementad how to Load PHP Content. &quot;;
}
echo &quot;&amp;amp;amp;lt;/p&amp;amp;amp;gt;&quot;;
}
?&amp;amp;amp;gt;

I use sleep (2) to simulate loading content which is quite long
As if everything is complete, you just need to upload it to the web server so that PHP works. ni screen shoot na

I also input this tutorial in English at PSDREMI.CO.CC and Good-tutorials.Com
Best Regard, dr.emi

]]> https://www.dremi.info/tutorials/css/web-design-layout-plus-implementasi-jquery-tab-content.html/feed 24 dreFileBrowser v.1.0 – Make a beautifull File Browser with jQuery File Tree and EditArea https://www.dremi.info/articles/drefilebrowser-v10-make-a-beautifull-file-browser-with-jquery-file-tree-and-editarea.html https://www.dremi.info/articles/drefilebrowser-v10-make-a-beautifull-file-browser-with-jquery-file-tree-and-editarea.html#comments Sun, 23 Nov 2008 19:47:53 +0000 https://www.dremi.info/?p=77 […]]]> Make a beautifull File Browser with jQuery File Tree and EditArea. Setelah sukses dengan produk gw sebelumnya dreDSync V.1.0, kali ini gw melaunching sebuha open source sederhana dreFileBrowser V.1.0

dreFileBrowser v.1.0

Make a beautifull File Browser with jQuery File Tree and EditArea
ยฉ dreFileBrowser V.1.0 2008 Developped by dr.emi
Setelah sukses dengan produk gw sebelumnya dreDSync V.1.0, kali ini gw melaunching sebuah open source sederhana dreFileBrowser V.1.0
Ini merupakan open source, dimana lu boleh memodif script na, selama lu mencantumkan author na:
Author: hairul azami a.k.a dr.emi
Author Link: https://www.dremi.info
Author Contact: webmaster@dremi.info
Menggunakan dreFileBrowser:

Extract paket RAR ini ke dalam root webserver lu, lalu ubah setting configurasi pada dfb-config.php
_ABSOLUTE_PATH = defini base path untuk instalasi dreFileBrowser
_ROOT_TREE = folder mana yang akan di scan ?
_MODEM_SPEED = definisi untuk modem speed, menentukan transfer rate
$allowed_extensions_to_preview = var array untuk extensi file yang dapat di preview
$allowed_extensions_to_edit = var array untuk extensi file yang dapat di edit
Best Regard, dr.emi

]]>
https://www.dremi.info/articles/drefilebrowser-v10-make-a-beautifull-file-browser-with-jquery-file-tree-and-editarea.html/feed 5
Introducing the new dreDSync V.1.0 dr.emi https://www.dremi.info/articles/introducing-the-new-dredsync-v-1-0-dr-emi.html https://www.dremi.info/articles/introducing-the-new-dredsync-v-1-0-dr-emi.html#respond Sun, 02 Nov 2008 11:19:58 +0000 https://www.dremi.info/?p=73 […]]]> dreDSync V.1.0 is a Data Syncronizer based on Flat File TXT communication and Socket Detection. Using the PHP programming language.

ย 

What is dreDSync V.1.0 ?

spelling (DE-ER-E DE-SYNC)

ย 

What for dreDSync V.1.0 ?

dreDSync V.1.0 is made to synchronize data on server and client.

ย 

What is the main Concept ?

Aims to handle bandwidth savings, because it uses Multimedia files.

Multimedia files have a file structure of 2 types:

First, Multimedia files (ie: audio, video, and another big filesize) which will be placed on the Server and Client as Permanent Files

Second, Miscleneous files (ie: JPG, PNG, ZIP, XML anf TXT). This file will be updated according to the predefined curriculum schedule

From the brief description above, I need an automatic downloader script, to detect the Last Modified File Miscleneous file that is updated in the future. Technically it can be described as follows:

When the administrator creates a new data update schedule, he must make a schedule in the dreDSync V.1.0 Administrator that has been provided. Thus the scanning all directories function in the dreDSync V.1.0 application will record the location of the latest updated source file location before inputting the schedule. This data collection is done by the server by placing its log download list in a TXT file, then it will “fire” all clients using Socket Connection, as a sign that the latest Update File is ready to be downloaded by each client. Thus the data synchronization process can be started.

ย 

Error handling while Syncronizing Data

DisConnect case

An application will of course always have a bug, thus error handling must also be prepared, keeping it from happening one day. In this case the concern is disconnection and blackout / Client nost response, so that when synchronization occurs, it is likely that data has not been processed.

For that I give a small note for each client, if the data is still not the same as the downloadlist on the server, the not complete message will be written by the client in the system log, so when the client is running again, the data synchronization process will automatically continue referring to the downloadlist. previously available. So that in dreDSync V.1.0, I don’t delete the system log on the server for the next 1 week, and this will have a positive impact for clients who haven’t finished downloading data, they still have the opportunity to download it again. But if everything is fine, the client will write a complete message in the system log.

ย 

Processing Screen Shoot

Running on server

Running on Client

Syncronizing Data on Progress

jQuery Panel Menu Administrator

jQuery Block UI for Login Form

CPanel Administrator for Schedule

CPanel Administrator for SysLog and Config

CPanel Administrator for Client Register

ย 

]]>
https://www.dremi.info/articles/introducing-the-new-dredsync-v-1-0-dr-emi.html/feed 0