Tutorials – dremi.INFO https://www.dremi.info Software Development, Digital Marketing and News Sun, 27 Mar 2011 05:30:00 +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 Tutorials – dremi.INFO https://www.dremi.info 32 32 Create a simple application to open an EXE file on the window with JAVA https://www.dremi.info/tutorials/java/create-a-simple-application-to-open-an-exe-file-on-the-window-with-java.html https://www.dremi.info/tutorials/java/create-a-simple-application-to-open-an-exe-file-on-the-window-with-java.html#comments Sun, 27 Mar 2011 05:30:00 +0000 https://www.dremi.info/?p=1267 […]]]> Create a simple application to open an EXE file on the window with JAVA
We will learn about how to open EXE file with JAVA. We use netbeans as IDE. So, please create new JAVA Application project. And a small form.

 

Step #1 Create few of label, combobox, and button from tool bar

I use few list item of combobox: Notepad, Window Explorer, Firefox, and Kalkulator as Target EXE

Step #2 Right click on Button to add action performed

Step #3 Use condition to select exe target

String target;
String newTarget = null;
target=(String) jComboBox1.getSelectedItem();
if(target.equals("Notepad"))
{
newTarget = "C:\\Windows\\notepad.exe";
jLabel3.setText(target + " EXECUTED!!");
}
else if(target.equals("Window Explorer"))
{
newTarget = "C:\\Windows\\explorer.exe";
jLabel3.setText(target + " EXECUTED!!");
}
else if(target.equals("Firefox"))
{
newTarget = "C:\\Program Files\\Mozilla Firefox\\firefox.exe";
jLabel3.setText(target + " EXECUTED!!");
}
else if(target.equals("Kalkulator"))
{
newTarget = "C:\\Windows\\System32\\calc.exe";
jLabel3.setText(target + " EXECUTED!!");
}
else
{
jLabel3.setText("Silahkan Pilih Salah Satu TARGET EXE");
}
try
{
Process p = Runtime.getRuntime().exec(newTarget);
p.waitFor();
System.out.println(p.exitValue());
}
catch (Exception err)
{
err.printStackTrace();
}

Step #4 Let’s RUN your application [F6]

That’s it!

]]>
https://www.dremi.info/tutorials/java/create-a-simple-application-to-open-an-exe-file-on-the-window-with-java.html/feed 5
Simple Swing Login Form And getText() https://www.dremi.info/tutorials/java/simple-swing-login-form-and-gettext.html https://www.dremi.info/tutorials/java/simple-swing-login-form-and-gettext.html#comments Mon, 21 Mar 2011 17:02:20 +0000 https://www.dremi.info/?p=1260 […]]]> Simple Swing Login Form And getText()
Just say hello to my favourite IDE : NETBEANS!! At previous time, I still use PHP Designer as Main IDE, but since I worked under few of the other language such as RoR and JAVA, NETBEANS is the best IDE for me.
Well, this is my simple and short JAVA tutorial about how to create login form using SWING.

Ok, let’s open your Netbeans IDE, and chose New Java Application Project

Right click on your package of project to create new jFrame from

And then create 3 jLabel from swing control at the right panel, consist of Login title, User ID and Password

Create 1 jTextField for User ID and 1 jPasswordField for Password

The last is create a jButton into form

Right click on jButton to perform an action when button clicked

and add this code:

JOptionPane.showMessageDialog(this, "Selamat Datang" +  jTextField1.getText() + "Password Anda adalah: " +  jPasswordField1.getText(), "", JOptionPane.INFORMATION_MESSAGE);

simple isn’t it??
Now press F6 to run and build your project

]]>
https://www.dremi.info/tutorials/java/simple-swing-login-form-and-gettext.html/feed 2
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 White Space Problem with JavaScript https://www.dremi.info/tutorials/javascript/white-space-problem-with-javascript.html https://www.dremi.info/tutorials/javascript/white-space-problem-with-javascript.html#comments Fri, 30 Oct 2009 23:14:18 +0000 https://www.dremi.info/?p=950 […]]]> This tutorial will explain about how to solve white space problem with JavaScript. One time, I founded bug on my PHP script. White space was broke it! Shit!. However javascript doesn’t have trim function like PHP. For example, if you want to validate user form using jQuery and PHP, my advice is: you must check the white spaces before send string to PHP Action Script. Then you will fine to use PHP trim function or class defined.
It’s fuck’n crazy. My jQuery not respond If I don’t check white space before send string into PHP script. So I need to find the white space before send it!
Here are my simple javascript code to find and count the white spaces:

// 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;
  };
//some function to implementad
function loadContentResult(id) {
	if(id.substrCount(' ') > 0)
	{
		window.alert('I found white spaces on field');
	}
       else
       {
		window.alert('White spaces cleared!! You may add the next PHP / jQuery here');
       }

First: counting white space as problem caused

String.prototype.substrCount =
  function(s) {
    return this.length && s ? (this.split(s)).length - 1 : 0;
  };

Next, we will try the scripts as user id validator on my jQuery tutorial. See you!

]]>
https://www.dremi.info/tutorials/javascript/white-space-problem-with-javascript.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
Installing Apache, MySQL, PHP and JSP on Windows XP https://www.dremi.info/tutorials/java/installing-apache-mysql-php-and-jsp-on-windows-xp.html https://www.dremi.info/tutorials/java/installing-apache-mysql-php-and-jsp-on-windows-xp.html#comments Tue, 01 Sep 2009 01:57:27 +0000 https://www.dremi.info/?p=886 […]]]> You can use the following article for a guide who wants to learn PHP + JSP from scratch. Of course, before learning coding, you must install this and that. So I hope this article is useful.

Tool Requirements:

  1. Apache Server + PHP + MySQL Server
    In this case, you can make AppServ 2.5.10, you can download it at http://www.AppServNetwork.com.
    I purposely suggested using this, because to make it easy to configure, and at the same time in this installer there are Apache, PHP, and MySQL packages.
  2. J2SE
    As I explained in the previous Java Introduction, J2SE is a floating Java Edition, supports database connectivity, user interface design, input / output, and network programming and is included as the basic packages of the Java language. J2SE na you can donglod at http://java.sun.com/javase/downloads/index.jsp You can choose whichever package. The packages currently available are JDK 6 + Java EE, JDK 6 + JavaFX and JDK 6 + NetBeans 6.1.7. Everyone already has J2SE inside. But I advise you to just one bundle, not the separate ones (for example, JRE, or JDK). The problem is that someday you will definitely need it, unless your company has been installed previously.
  3. Apache TomCat
    In the future, JSP serper na, you can download it at http://tomcat.apache.org/index.html You can use the latest edition na.
  4. Apache-TomCat Connector
    Intention to connect Apache Serper and TomCat which you will install. Donglod Module na at http://tomcat.apache.org/download-connectors.cgi. Scroll down your browser, look for Tomcat Connectors JK 1.2> Binary Release, click the win32> jk-1.2.28 folder, where there are many SO module files, select nyang mod_jk-1.2.28-httpd-2.2.3.so
  5. MySQL Connector / ODBC
    This connector helps in connecting mysql database using ODBC, it can be for desktop / web based applications. Donglod connector at http://dev.mysql.com/downloads/connector/odbc/, take nyang bwat Windows 32 na.
  6. MySQL Connector JAVA / JDBC
    Konektor ini khusus digunakan oleh JAVA dalam mengakses database MySQL, baik Desktop based maupun web based. Silahkan donlod file mysql-connector-java-5.1.7-bin.jar di http://dev.mysql.com/downloads/connector/j/5.1.html

Installation stage

  1. Instalasi Apache Server + PHP + MySQL Server
    Double click appserv-win32-2.5.10.exe which you already donglod, follow the na installation instructions.



    Specify the address of the apache server drive and storage folder. In this case I make D: dreserv

    Check all the services that we will need later.
    Fill in the server name and email na
    Type in MySQL Server password na, check InnoDB if needed.
    The installation process starts …
    Run Apache and MySQL services na. Then click Finish.
    Type url> http: // localhost / in the browser, if it appears like this, it means your server is active
  2. Install J2SE, Apache TomCat + JSP
    Double click the JDK package that you already donglod, ntu ….. the logon coffee brewed: D … Follow the installation instructions.






    Instalasi sukses! Klik finish.

    To ensure that java is installed correctly, open your Windows CMD, then type java-version, if the java version gets a response, it means that java is successfully installed on your system.


    Now, when we install Apache TomCat, so we can run JSP
    Double click the apache tomcat na installation package, follow the instructions.



    Use the Full Installation option.
    Here the location of the tomcat guide is under the previous apache server folder.
    Fill in the default port, username and password. For the port, I recommend using the 8080 port.
    JRE detection, because we have previously installed the JDK with the JRE inside, the installation will automatically detect the location of the JRE path.

    Installation process …
    Check Run Apache Tomcat to immediately run Apache Tomcat na service

    A moment later. the apache tomcta service is started. and you will see there is a try icon bwar monitor apache tomcat na.

    Please open url> http: // localhost: 8080 if you open it like this, it means your Apache Tomcat installation was successful, and we can already run web applications using JSP.
  3. Configuration Apache-TomCat Connector
    • Rename the mod_jk-1.2.28-httpd-2.2.3.so file to mod_jk.so, and copy it into the D: dreservApache2.2modules folder (adjust the location of your apache server folder earlier).
    • Open file D: /dreserv/Apache2.2/conf/httpd.conf (configuration apache server) and add the following line:
    • Include "D:/dreserv/Tomcat5.5/conf/auto/mod_jk.conf"
      
    • Open file D: /dreserv/Tomcat5.5/conf/server.xml and add the following line before the line:
      <Realm className="org.apache.catalina.realm.UserDatabaseRealm"/>
      <Listener className="org.apache.jk.config.ApacheConfig"  modJk="D:/dreserv/Apache2.2/modules/mod_jk.so" />
      
    • Create a file called workers.properties in the folder D: /dreserv/Apache2.2/conf. Type the code below and save it.
      [logger]
      level=DEBUG
      file=D:/dreserv/Apache2.2/logs/jk2.log
      [config]
      file=D:/dreserv/Apache2.2/conf/workers.properties
      debug=0
      debugEnv=0
      [shm]
      file=D:/dreserv/Apache2.2/logs/jk2.shm
      size=1048576
      # socket channel
      [channel.socket:localhost:8009]
      port=8009
      host=127.0.0.1
      # worker for the connector
      [ajp13:localhost:8009]
      channel=channel.socket:localhost:8009
      [status:status]
      [uri:/status/*]
      worker=status:status
      [uri:/jsp-examples/*]
      worker=ajp13:localhost:8009
      [uri:/*.jsp]
      worker=ajp13:localhost:8009
      
    • Restart Tomcat na by right clicking on the tomcat monitor in the try icon, then selecting stop server, and selecting again by right clicking start server.
    • Automatically, after restarting tomcat, two new directories named auto and jk will be created in the D: dreservTomcat5.5conf folder. Where there will be a mod_jk.conf file in the auto na folder.
    • Finally, restart the apacher server, by clicking Start menu> AppServ> Control Server by Services> Apache Restart
    • When testing whether the connector is working, open again http: // localhost: 8080 and http: // locahost
      If two or two na appears, congratulations apache connector with tomcat is successful. To view na report, type http: //localhost/phpinfo.php
      There you can search for mod_jk.so, now is the module active right?
  4. Instalasi MySQL Connector / ODBC
    Double click na installer package, follow instructions.



  5. Configuration MySQL Connector JAVA / JDBC
    Copy mysql-connector-java-5.1.7-bin.jar into the JRE Library folder. In this case, my JRE is in the H: / dreserv / jre6 / lib / ext folder (keep it according to your previous JDK installation folder.
    Create CLASS PATH in My Computer – System – Data Environment:
    H: /dreserv/jre6/lib/ext/mysql-connector-java-5.0.4-bin.jar;% CLASSPATH%;
    Then click OK, until the window closes. Basically, you don’t need to restart, but if you want additional work: D just restart it then: D.
  6. All installation is complete … happy working with Apache server that supports PHP, JSP and MySQL.
]]>
https://www.dremi.info/tutorials/java/installing-apache-mysql-php-and-jsp-on-windows-xp.html/feed 37
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 Illustrate Samsung Monitor – SyncMaster 933SN Series https://www.dremi.info/tutorials/photoshop/how-to-illustrate-samsung-monitor-syncmaster-933sn-series.html https://www.dremi.info/tutorials/photoshop/how-to-illustrate-samsung-monitor-syncmaster-933sn-series.html#comments Fri, 03 Jul 2009 10:24:29 +0000 https://www.dremi.info/?p=866 […]]]>
Hi brother ! this tutorial will explain about how to create an illustration for my new Samsung Monitor, SyncMaster 933SN series. Follow my steps, and enjoy my tutorial.

First is create your new Photoshop document. The size is up to you brother !

Step 1

Use shapping tool to grab a rectangle as your base screen of monitor. Take look my setting:

and I use #1a1a1a as base color. Give name for your shapping as “base”

Step 2

Select base path using Direct Selection Tool, and activate Add Anchor Point Tool. We will modify the bottom side of base shapping.

Now click one at the center of bottom side of base path. Move it to down side, approximately 30px.

Step 3

Repeat Step 2 for top side of base path. But on this step, move new anchor to up side, approximately 10px – 15px. The result showed on this screen shoot:

Step 4

Now press [CTRL+Click] at base path layer and activate Selection Tool with Intersect With Selection option. Select about 50px of your current selection area. You will get new selection.

Then chose menu Select > Modify > Contract : 2px, fill selection area with color #5e5e5e. Create new layer then change layer name as “top-shadow”.

Go to Menu Filter > Blur > Gaussian Blur. Give it about 2px.

Let’s change blending option of top-shadow layer to Screen.

Step 5

Press [CTRL+Click] again on base path to make a selection area, create new layer called as “top-line”. Chose menu Select > Modify > Contract : 2px. Fill selection area with color #ffffff.

Still on selection area, now move selection area to down side, it’s about 2px. Then hit [DELETE] button. You will see a line at top side of base path. Give it Gaussian Blur about 2px.

Step 6

Now duplicate your base path as screen layer, don’t forget to change screen shapping color to #ffffff.

Activate Direct Selection Tool. We wil make screen path smaller than base path.

Use Direct Selection Tool to select all anchor point at the bottom side if screen path. Then move it to top side. Like showed on this screenshoot:

Select another anchor point and move it to inside.

Step 7

Ouke, now delete two anchor point that located on top side and bottom side of screen path. Use Delete Anchor Point Tool to delete it.

Step 8

Repeat Step 4 to create bottom-shadow of base path

Step 9

Now press [CTRL+Click] again on base path, then chose Selection > Contract 2px. Fill selection area with color #ffffff.

Chose Selection > Contract again, and give 1px. Hit [DELETE] button. You will see stroke line inside of base path.

Chose Filter > Blur > Gaussian Blur 2px. Change blending option of layer as screen.

Untill this step, let’s review your design. Hmm…. not so bad 🙂 but to make better screen, add some layer style for screen layer.

Nice ! 🙂

Then add a glossy effect for screen using transparent gradient.

Step 10

Ouke! let’s illustrate a transparent glasses at the bottom of base and screen layer.

You may duplicate base path, and make it looks likely this screenshoot:

I give name of this path as “bottom-glasses”. Now duplicate bottom-glasses and move it to top about 5px

Step 11

I use gaussian blur to create blue light at the bottom of base path

Step 12

Create a text for “SyncMaster 933SN” then add stroke layer style for 1px with color #000000.

To make a little bit of shiny effect. I create a star using 1px vertical and horizontal selection or you may use brush tool.

Step 13

Add a text for “S MSUNG”. Note: I use “V” text and transform vertical it to get the real SAMSUNG text

Take look this screen shoot.

Step 14

We will create elipse to complete our monitor 🙂

Use Elipse Tool then grab it with color #1a1a1a

Change layer name as “bottom-elipse”

Repeat Step 4 to create shadow

Step 15

Duplicate bottom-elipse, move it to down side about 15px

Look at left and right side of elipse, looks likely not perfect. So, use poligon lasso tool, to make it perfect.

Good ! looks likely perfect!

Step 16

Create once again for elipse at center of bottom-elipse. Then add rounded rectangle between bottom-elipse and bottom-glasses.

Good job ! now you has finished to illustrate Samsung Monitor – SyncMaster 933SN Series.

You may add you desktop screenshoot into screen. Take look this one!

And add reflection effect to make it cool illustration

Thank for read my tutorial.

]]>
https://www.dremi.info/tutorials/photoshop/how-to-illustrate-samsung-monitor-syncmaster-933sn-series.html/feed 33