Share on Facebook

First, I have try to make a connection to SQL Server 2000, 2005, and 2008. The result is always:

Warning (2): mssql_connect() [function.mssql-connect]: Unable to connect to server: 192.168.137.1\SQLEXPRESS,1433 [CORE\cake\libs\model\datasources\dbo\dbo_mssql.php, line 154]
Warning (2): mssql_select_db() expects parameter 2 to be resource, boolean given [CORE\cake\libs\model\datasources\dbo\dbo_mssql.php, line 159]

After done for googling in few day(s), I just found a bug based on error above, in

CORE\cake\libs\model\datasources\dbo\dbo_mssql.php, line 154

It looks likely, configuration is always overwrite into this line. But after read an article about port problem for mssql driver in cakephp (forgoten about where is the article link), I try to change it to port => ”

And the result is still not connected, although I have try too in native php. And it’s works with simple line:

$myServer = "192.168.137.1\SQLEXPRESS"; //I used sql server 2008
$myUser = "sa";
$myPass = "xxx";
$myDB = "mesin_finger"; 

//connection to the database
$dbhandle = mssql_connect($myServer, $myUser, $myPass)
  or die("Couldn't connect to SQL Server on $myServer"); 

//select a database to work with
$selected = mssql_select_db($myDB, $dbhandle)
  or die("Couldn't open database $myDB");

Next, trouble shoot continue to line before 154 in dbo_mssql.php: CORE\cake\libs\model\datasources\dbo\dbo_mssql.php

And the magic has come, after change $config['host'] to direct string ’192.168.137.1\SQLEXPRESS’, it’s WORK!
So, I just found the bug:

If I use $port as complete string in mssql_connect or mssql_pconnect, connection will not success, since in line 147 of dbo_mssql.php, I found this line:

} elseif ($config['port'] === null) {

It’s mean, we must set port configuration in database.php to null, NOT IN STRING value. The option is only null and numeric value.

Here are my database.php configuration:

var $attDbMsSqlServer = array(
                'driver' => 'mssql',
                'persistent' => false,
                'host' => '192.168.137.1\SQLEXPRESS',
                'login' => 'sa',
                'password' => 'xxx',
                'database' => 'mesin_finger',
                'prefix' => '',
                'encoding' => 'utf-8',
                'port' => null
        );

GOOD LUCK!!

Share on Facebook

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.

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>

1
<?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!!

Share on Facebook

kali ini gw mau sharing tentang codeigniter. yey! di dremi.NET codeigniter kali ini menjadi primadona dalam projek projekna. beberapa taon lalu, gw gak sreg banged kalok make framework orang, tapi berbekal elmu dan inspirasi dari mang opik, hasilnya mampu membius gw bwat make ni framework di segala medan tempur yang berbau web based (PHP). cekakakak!!

ni tutorial bakalan ngebahas tentang pgimane mbikin user access bertingkat pada user manager di admin CMS sebagai simulasina. kalok biasana lu pada bikin CMS masih makek 1 tipe user, ada baikna lu pakein dah mulai sekarang. sbtulna script2 ini udah lama gw tanem dalam CMS, tapi beberapa client terkadang meminta bwat menghilangkan nya, yap gw sadar tidak smua client yang mau menggunakannya, mungkin karena keterbatasan nya dalam mempelajari cara penggunaannya. gw pleksibel aja, pgimane permintaan clientna dalam make user manager.

Langkah #1 Nyiepin pael pael penting dan memahami konsepnya

- codeigniter framework
- jquery

Konsepnya:

1. User login via form login
2. Masuk ke halaman admin area, dengan default data-data user
3. Terdapat akses area yang di load dari table module
4. User yang mendapat tipe user “1″ merupakan Super Administrator dan “2″ merupakan “Administrator”
5. Tipe Super Administrator: dapat mengakses smua module area. Dan Administrator dapat mengakses module area sesuai hak akses yang diperoleh user yang sedang login
6. Route akan digunakan dalam mengakses URL tertentu, demi keamanan
7. jQuery akan digunakan bwat manggil live user access dalam form update user
8. Config pada CI akan disesuaikan untuk menghandle Query Strings pada URL

Langkah #2 Buwat Database dengan table tablena

CREATE TABLE `module` (
`id` int(11) NOT NULL auto_increment,
`name` varchar(255) NOT NULL,
`permalink` varchar(255) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8 AUTO_INCREMENT=5 ;

INSERT INTO `module` VALUES (1, 'Posting', 'posting');
INSERT INTO `module` VALUES (2, 'Banner', 'banner');
INSERT INTO `module` VALUES (3, 'Gallery', 'gallery');
INSERT INTO `module` VALUES (4, 'File Manager', 'filemanager');

CREATE TABLE `user` (
`id` int(11) NOT NULL auto_increment,
`email` varchar(255) NOT NULL,
`password` text NOT NULL,
`user_type` int(2) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8 AUTO_INCREMENT=3 ;

INSERT INTO `user` VALUES (1, 'dremi@ganteng.com', '5afd3f8890e535868773eb4a351489d9126613d8', 1);
INSERT INTO `user` VALUES (2, 'aku@sang.pangeran.cintah.com', '5afd3f8890e535868773eb4a351489d9126613d8', 2);

CREATE TABLE `user_access` (
`user_id` int(11) NOT NULL,
`access_id` int(11) NOT NULL
) ENGINE=MyISAM DEFAULT CHARSET=utf8;

INSERT INTO `user_access` VALUES (2, 3);
INSERT INTO `user_access` VALUES (2, 1);

Langkah #3 Menyesuaikan Config Codeigniter (application/config/config.php)

dibawah ini adalah config yang gw pake untuk menjalankan misi kita kali ini:

$config['base_url'] = "http://localhost/tutorial-programming/ci_class/user_manager_ci_tut/"; //sesuaikan ama path di web serper lu

$config['index_page'] = "index.php/";

$config['uri_protocol'] = "PATH_INFO";

$config['url_suffix'] = "";

$config['language'] = "english";

$config['charset'] = "UTF-8";

$config['enable_hooks'] = FALSE;

$config['subclass_prefix'] = 'MY_';

$config['permitted_uri_chars'] = 'a-z 0-9~%.:_\-';

/*PENTING BANGED*/

$config['enable_query_strings'] = TRUE;
$config['controller_trigger'] = 'x';
$config['function_trigger'] = 'm';
$config['directory_trigger'] = 'd'; // experimental not currently in use

/*END OF PENTING BANGED*/

$config['log_threshold'] = 0;

$config['log_path'] = '';

$config['log_date_format'] = 'Y-m-d H:i:s';

$config['cache_path'] = '';

$config['encryption_key'] = "NeO5C88iv7uo09U2E20iJFkaHJi0mPDm"; //kite bakalan make library encrypt, jadi ni kudu diisi. bebas key na, tapi berjumlah 32 karakter

$config['sess_cookie_name'] = 'ci_session';
$config['sess_expiration'] = 7200;
$config['sess_encrypt_cookie'] = FALSE;
$config['sess_use_database'] = FALSE;
$config['sess_table_name'] = 'ci_sessions';
$config['sess_match_ip'] = FALSE;
$config['sess_match_useragent'] = TRUE;
$config['sess_time_to_update'] = 300;

$config['cookie_prefix'] = "";
$config['cookie_domain'] = "";
$config['cookie_path'] = "/";

$config['global_xss_filtering'] = FALSE;

$config['compress_output'] = FALSE;

$config['time_reference'] = 'local';

$config['rewrite_short_tags'] = FALSE;

$config['proxy_ips'] = '';

Wokeh!!!!! lanjut ke langkah berikutnya

Langkah #4 Menyesuaikan Database Config (application/config/database.php)

$db['default']['hostname'] = "localhost";
$db['default']['username'] = "root";
$db['default']['password'] = "password";
$db['default']['database'] = "ci_class";

Langkah #5 Menyesuaikan Autload Config (application/config/autoload.php)

$autoload['libraries'] = array('database', 'session', 'encrypt');

$autoload['helper'] = array('url','template','email','form');

Langkah #6 Siapin Template Helper (application/helpers/template_helper.php) => berisi fungsi – fungsi bwat menghandle kebutuhan di controller maupun viewer

< ?php

/**
* @author dr.emi
* @copyright 2010
*/

function loginTrigger()
{
$_this = & get_Instance();
if($_this->session->userdata('isLogin') == '')
{
redirect('user/login');
}
}

function CustomPassword($password)
{
$_this = & get_Instance();
return sha1($password.$_this->config->item('encryption_key'));
}

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;
}

function delete_data($table,$key,$id)
{
$_this = & get_Instance();
$_this->db->query("delete from ".$table." where ".$key." ='".$id."'");
}

function getFieldValue($tbl='', $field='', $param='', $value='')
{
$_this = & get_Instance();
$sql = $_this->db->query("SELECT * FROM $tbl WHERE $param = '$value'");
if($sql->num_rows() !=0)
{
$r = $sql->row();
return $r->$field;
}
else
{
return false;
}
}

function getModuleAccessForm($query, $uid = '')
{
$_this = & get_Instance();
$per_column = 2;
$count = 0;
$return = '';
foreach($query->result() as $row)
{
$count ++;
$return .= '<div style="margin:0 10px 10px 0; float: left">';
if($uid != '')
{
$sql = $_this->db->query("select * from user_access WHERE user_id = '".$uid."' AND access_id = '".$row->id."'");
if($sql->num_rows() == 1)
{
$return .= form_checkbox('module_id[]', $row->id, TRUE) . $row->name;
}
else
{
$return .= form_checkbox('module_id[]', $row->id) . $row->name;
}
}
else
{
$return .= form_checkbox('module_id[]', $row->id) . $row->name;
}
$return .= '</div>';
if($count % $per_column == 0) { $return .= '<div style="clear:both; height: 1px;">&nbsp;</div>'; }
}
return $return;
}

function getModuleAccess($userID=0)
{
if($userID != 0)
{
$_this = & get_Instance();
$sql = $_this->db->query("select * from user_access where user_id = '".$userID."'");
if($sql->num_rows() != 0)
{
echo "<ul style='margin:10px 0 0 30px;padding:0'>";
foreach($sql->result_array() as $row)
{
echo "<li style='margin:0 0 10px 0;padding:0'>".getFieldValue('module', 'name', 'id', $row['access_id'])."</li>";
}
echo "</ul>";
}
}
}

function getModuleLink()
{
$_this = & get_Instance();
$sql = $_this->db->query("SELECT * FROM module ORDER BY name");
if($sql->num_rows() !=0)
{
foreach($sql->result() as $row)
{
echo anchor('admin/'.$row->permalink, $row->name) . ' | ';
}
}
else
{
return false;
}
}

function accessTrigger() {
$_this = & get_Instance();
if($_this->session->userdata('level')!=1) {
$modID = getFieldValue('module', 'id', 'permalink', $_this->uri->segment(2));
$sql = $_this->db->query("select * from user_access where user_id = '".$_this->session->userdata('user_id')."' AND access_id = '".$modID."' LIMIT 1");

//let's skip general access area to checked'
$skipped_area = array('','update','delete','save','access_area.php');

if($sql->num_rows() == 1 || in_array($_this->uri->segment(2), $skipped_area))
{
return true;
}
else
{
die('You don\'t have access to this area. Please contact your Super Administrator.');
}
}
}
?>

Langkah #7 Siapin Controller (application/controllers/)

Disini gw gak make model, karena mnurut gw mbikin ribet aja. Jadi kebanyakan bakalan gw tulis keperluan modelnya di HELPER bwatan sndiri.

Langkah #7.1 User (application/controllers/user.php) => User login controller

< ?php

class User extends Controller {

function User()
{
parent::Controller();
}

function index()
{
loginTrigger();
}

function login()
{
$this->load->view('login');
}

function doLogin()
{
$email = $this->input->post('email');
$password = $this->input->post('password');

$enc_pass = CustomPassword($password);

$sql = $this->db->query("SELECT * FROM user WHERE email='".$email."' AND password='".$enc_pass."' LIMIT 1");
if($sql->num_rows() == 1)
{
$row = $sql->row();
$data = array (
'isLogin' => 'yes',
'user_id' => $row->id,
'level' => $row->user_type
);
$this->session->set_userdata($data);
redirect('admin');
}
else
{
redirect('user/login');
}
}

function doLogout()
{
$data_session = array(
'isLogin' => $this->session->userdata('isLogin'),
'user_id' => $this->session->userdata('user_id'),
'level' => $this->session->userdata('level')
);
$this->session->unset_userdata($data_session);
redirect('user/login');
}
}

/* End of file welcome.php */
/* Location: ./system/application/controllers/welcome.php */

Langkah #7.2 Admin (application/controllers/admin.php) => Admin controller

fungsi- fungsi penting:

Update: satu fungsi ini bakalan menghandle form user. Trigger form nya adalah uri segment ke – 3, dengan ketentuan, kalok input user baru maka uri segment 3 kosong, sdangkan kalok mau update user dengan tujuan mengedit record, uri segment ke – 3 ini akan dikasi value berupa id record yang bersangkutan.

pada template_helper.php terdapat fungsi get_table_fld(), make_array_key(), post2data(), store_data(), dan delete_data()

fungsi fungsi tersebut bakalan dibutin di cotroller admin ini, bwat mempermudah aja berok!!

get_table_fld() => mengambil nama nama colom pada table di database

make_array_key() => menyajikan hasil keluaran fungsi get_table_fld() ke dalam array

post2data() => mengkonvert inputan post form ke dalam data yang akan dibutuhkan saat fungsi store_data() dipanggil

store_data() => menyimpan data kedalam table di database, dimana sesuai trigger form yang didapat yakni jika inputan post id / sesuai key dalam table bernilai kosong, maka data akan di insert ke dalam table. sedangkan jika tidak bernilai kosong, maka record bersangkutan akan diupdate pada tablenya.

delete_data() => menghapus data record bersangkutan

setelah komentar /*MODULE ACCESS*/ pada controller dibawah ini, gw mengeksekusi beberapa baris perintah. diantaranya bwat memvalidasi jika form digunakan sebagai update data bersangkutan / input data baru.

semua action dalam module access ini, pada akhirnya akan menghapus record akses user sebelumnya. jika form digunakan sebagai update data bersangkutan, maka user id yang akan mengakses module diambil dari post data id user, sdangkan jika form digunakan sebagai input data baru, maka user id yang akan mengakses module diambil dari user id terakhir yang diinsert pada table user.

/*MODULE ACCESS*/
if($this->input->post('id') != '')
{
$lastUserID = $this->input->post('id');
}
else
{
//get last id of user
$sqlLastUserID = $_this->db->query("SELECT * FROM user ORDER BY id DESC LIMIT 1");
$rowUserID = $sqlLastUserID->row();
$lastUserID = $rowUserID->id;
}
delete_data('user_access','user_id',$lastUserID);

berikut ini baris bwat menghandle data array dari checkbox yang bernilai module id

$i=0;
foreach($this->input->post('module_id') as $mod_id)
{
$i++;
//echo $mod_id;
//let's check record of access area user. if record == 0, we will insert new access, and if >= 1 let's delete the old record before then replace it with new isert record
//it's will protect user to have double or more than one access in same module

$sqlCheck = $this->db->query("SELECT * FROM user_access WHERE user_id = '".$lastUserID."' AND access_id = '".$mod_id."'");
if($sqlCheck->num_rows() == 0)
{
$this->db->query("INSERT INTO user_access(user_id, access_id) VALUES('".$lastUserID."', '".$mod_id."')");
}
else
{
delete_data('user_access','user_id',$lastUserID);
$this->db->query("INSERT INTO user_access(user_id, access_id) VALUES('".$lastUserID."', '".$mod_id."')");
}
}

Sedangkan bwat proses pergantian tipe user ke super administrator, kite perlu ngapus data aksesnya di table user_access, karena kita udah gak perlu lagi ngecek hak akses nya di table tersebut.

if($this->input->post('user_type') == 1)
{
delete_data('user_access','user_id',$this->input->post('id'));
}

dan ini file controller admin selengkapna

< ?php

class Admin extends Controller {

function Admin()
{
parent::Controller();
loginTrigger();
accessTrigger();
}

function index()
{
$sql = $this->db->get('user');
$data = array (
'query' => $sql
);
$this->load->view('admin', $data);
}

function update()
{
// Get Table Fields
$fields = get_table_fld('user');
$data = make_array_key($fields);

$this->db->where('id',$this->uri->segment(3));
$sql = $this->db->get('user');
$row = (array) $sql->row();

//query suplied for update template
$sql = $this->db->get('module');
$data_module = array ('query' => $sql);
//end of query suplied for update template

$data = array_merge($data,$data_module,$row);

$this->load->view('admin_update',$data);
}

function save()
{
if($this->input->post('id') != '')
{
if(!valid_email($this->input->post('email')))
{
$this->session->set_flashdata('message','Valid email field required!');
redirect("admin/update/".$this->input->post('id'),301);
exit();
}
}
else
{
if(!valid_email($this->input->post('email')))
{
$this->session->set_flashdata('message','Valid email field required!');
redirect("admin/update/",301);
exit();
}
elseif($this->input->post('password') == '')
{
$this->session->set_flashdata('message','Password field required!');
redirect("admin/update/",301);
exit();
}
}
$tabledata = get_table_fld('user');
$data = post2data($tabledata);
if($this->input->post('password') != '')
{
$data['password'] = CustomPassword($this->input->post('password'));
}

$id = store_data('user',$data,'id');

/*Let's process access area module here'*/
if($this->input->post('module_id') != '')
{
/*MODULE ACCESS*/
if($this->input->post('id') != '')
{
$lastUserID = $this->input->post('id');
}
else
{
//get last id of user
$sqlLastUserID = $_this->db->query("SELECT * FROM user ORDER BY id DESC LIMIT 1");
$rowUserID = $sqlLastUserID->row();
$lastUserID = $rowUserID->id;
}
delete_data('user_access','user_id',$lastUserID);

$i=0;
foreach($this->input->post('module_id') as $mod_id)
{
$i++;
//echo $mod_id;
//let's check record of access area user. if record == 0, we will insert new access, and if >= 1 let's delete the old record before then replace it with new isert record
//it's will protect user to have double or more than one access in same module

$sqlCheck = $this->db->query("SELECT * FROM user_access WHERE user_id = '".$lastUserID."' AND access_id = '".$mod_id."'");
if($sqlCheck->num_rows() == 0)
{
$this->db->query("INSERT INTO user_access(user_id, access_id) VALUES('".$lastUserID."', '".$mod_id."')");
}
else
{
delete_data('user_access','user_id',$lastUserID);
$this->db->query("INSERT INTO user_access(user_id, access_id) VALUES('".$lastUserID."', '".$mod_id."')");
}
}
}
##remove access rule to set all access trigger (set user as super administrator)##
if($this->input->post('user_type') == 1)
{
delete_data('user_access','user_id',$this->input->post('id'));
}
/*end of access area module*/

$this->session->set_flashdata('message','Data has been Updated/Saved Successfull!');

redirect("admin",301);
}

function delete()
{
delete_data('user','id',$this->uri->segment(3));
$this->session->set_flashdata('message','Data has been Deleted Successfull!');
redirect("admin",301);
}

/*Let's create sample of access area'*/
function banner()
{
$this->load->view('dummy');
}

function filemanager()
{
$this->load->view('dummy');
}

function gallery()
{
$this->load->view('dummy');
}

function posting()
{
$this->load->view('dummy');
}
}

/* End of file welcome.php */
/* Location: ./system/application/controllers/welcome.php */

Langkah #7.3 Access (application/controllers/access.php) => Access controller

controller ini berfungsi bwat menghadle live user access pada form user. agak sdikit beda pada controller ini. konsepnya kita bakalan manggil live user access berdasarkan routes config, yakni:

$route['admin/access_area.php'] = "access/index"; //harus ditambahkan pada application/config/routes.php

kite langsung aja ke controller nya:

< ?php

class Access extends Controller {

function Access()
{
parent::Controller();
loginTrigger();
accessTrigger();
}

function index()
{
//get the values
$access_id = preg_replace("/[^0-9]/", "", $this->input->get('access_id'));
$uid = preg_replace("/[^0-9]/", "", $this->input->get('uid'));

$sql = $this->db->get('module');
$data = array (
'query' => $sql,
'access_id' => $access_id,
'uid' => $uid
);
$this->load->view('access', $data);
}
}

/* End of file welcome.php */
/* Location: ./system/application/controllers/welcome.php */

baris ini bergungsi memparsing string inputan pada url:

$access_id = preg_replace("/[^0-9]/", "", $this->input->get('access_id'));
$uid = preg_replace("/[^0-9]/", "", $this->input->get('uid'));

dimana access_id dan uid bernilai 0-9, yang diambil dari parameter URL admin/access_area.php?access_id={int_value}&uid={int_value}

nah, dengan menggunakan routes $route['admin/access_area.php'] = “access/index”; kita nantinya bisa ngakses URL menggunakan admin/access_area.php?access_id={int_value}&uid={int_value} pada form live user access. nanti bakalan dibahas pada langkah pembuatan form user.

disinilah fungsinya mengenable query string dan menggunakan PATH_INFO pada sebagai uri protocol pada config.php

$config['enable_query_strings'] = TRUE;

$config['controller_trigger'] = 'x';
$config['function_trigger'] = 'm';
$config['directory_trigger'] = 'd'; // experimental not currently in use

$config['uri_protocol'] = "PATH_INFO";

dengan demikian kita bisa mengambil parameter URL access_id dan uid

Langkah #8 Siapin Viewer (application/views)

Langkah #8.1 Login viewer (application/views/login.php) => bwat nampilin form login user

< ?php if ( ! defined('BASEPATH')) exit('No direct script access allowed'); ?>
< !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" xml:lang="en" lang="en">

<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="author" content="dr.emi" />
<link href="<? echo base_url(); ?>system/application/views/css/style.css" rel="stylesheet" type="text/css" />
<title>Login Form</title>
</link></head>

<body>

<div id="stylized" class="myform">
<form id="form" name="form" method="post" action="<?php echo site_url(); ?>user/doLogin">
<h1>Sign-in form</h1>
<p>Silakan login untuk mengakses user manager</p>

<label>Email</label>
<input type="text" name="email" id="email" class="input" />

<label>Password</label>
<input type="password" name="password" id="password" class="input" />

<input type="submit" name="submit" value="Sign-in" class="submit" />
<div class="spacer"></div>

</form>
</div>

</body>
</html>

Langkah #8.2 Admin viewer (application/views/admin.php) => bwat nampilin data data user

< ?php if ( ! defined('BASEPATH')) exit('No direct script access allowed'); ?>
< !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" xml:lang="en" lang="en">

<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="author" content="dr.emi" />
<link href="<? echo base_url(); ?>system/application/views/css/style.css" rel="stylesheet" type="text/css" />
<title>Admin Area</title>
</link></head>

<body>

<h3>< ?php echo anchor('user/doLogout', 'Sign-out'); ?> | < ?php echo anchor('admin', 'User Manager'); ?> | < ?php getModuleLink(); ?>
</h3>
<p>< ?php echo anchor('admin/update', '+ Add New Data'); ?></p>
< ?php if($this->session->flashdata('message') != '') { echo '<p style="color:green">'.$this->session->flashdata('message').'</p>'; } ?>
<table border="0" cellpadding="4" cellspacing="1" bgcolor="gray">
<tr bgcolor="silver">
<td>No.</td>
<td>Email</td>
<td>Access Area</td>
<td>Option</td>
</tr>
< ?php
$i = 0;
foreach($query->result() as $row)
{
$i++;
?>
<tr bgcolor="white">
<td>< ?php echo $i; ?></td>
<td>< ?php echo $row->email; ?></td>
<td>
< ?php
if($row->user_type == 1)
{
$hakAkses = 'Super Administrator';
}
else
{
$hakAkses = 'Administrator';
}
?>
<h4>< ?php echo $hakAkses; ?></h4>
< ?php getModuleAccess($row->id); ?>
</td>
<td>
< ?php echo anchor('admin/update/'.$row->id, 'Edit'); ?>
<a href="javascript: void(0);" onclick="cf=confirm('Click OK to delete data: <?php echo "No. ".$i; ?>');if(cf)window.location='< ?php echo site_url().'admin/delete/'.$row->id; ?>';return false;" title="Delete < ?php echo "No. ".$i; ?>">
Delete
</a>
</td>
</tr>
< ?php
}
?>
</table>
</body>
</html>

Langkah #8.3 Admin_update viewer (application/views/admin_update.php) => bwat nampilin form user. Dimana bergungsi sebagai form input data baru dan edit data

Yang perlu diperhatiin adalah: penggunaan jQuery bwat mengakses live access user, konsepnya adalah: ketika user merubah pilihan pada select form Access Area maka hasil HTML akan ditampilkan pada DIV ID html_access_areajavasc

dimana html_access_area ini berisikan checkbox data data module yang tersedia dalam table module.

$(document).ready(function(){

$("#user_type").change(onRelectChange);
function onRelectChange(){
var pilih = $("#user_type option:selected");
if(pilih.val() != 0){
$().ajaxStart(function() {
$('#loading').show();
})
$.ajax({
type: "POST",
url: "< ?php echo site_url(); ?>admin/access_area.php?access_id="+pilih.val()+"&uid=< ?php echo $id; ?>",
success: function(data) {
//alert(pilih.val())
$("#toBeHidden").hide();
$("#html_access_area").html(data);
}
});
}
}
});

Gw perjelas lagi disni. penambahan routes $route['admin/access_area.php'] = “access/index”; berguna pada url dibawah ini:

url: "< ?php echo site_url(); ?>admin/access_area.php?access_id="+pilih.val()+"&uid=< ?php echo $id; ?>",

OK BRAD ??!!

jadi lengkapnye kayak gini:

< ?php if ( ! defined('BASEPATH')) exit('No direct script access allowed'); ?>
< !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" xml:lang="en" lang="en">

<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="author" content="dr.emi" />
<link href="<? echo base_url(); ?>system/application/views/css/style.css" rel="stylesheet" type="text/css" />
<title>Admin Area &radic; Update Data</title>
<script src="<? echo base_url(); ?>system/application/views/js/jquery-1.4.2.min.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function(){

$("#user_type").change(onRelectChange);
function onRelectChange(){
var pilih = $("#user_type option:selected");
if(pilih.val() != 0){
$().ajaxStart(function() {
$('#loading').show();
})
$.ajax({
type: "POST",
url: "< ?php echo site_url(); ?>admin/access_area.php?access_id="+pilih.val()+"&uid=< ?php echo $id; ?>",
success: function(data) {
//alert(pilih.val())
$("#toBeHidden").hide();
$("#html_access_area").html(data);
}
});
}
}
});
</script>
</link></head>

<body>

<div id="stylized" class="myform">
< ?php if($this->session->flashdata('message') != '') { echo '<p style="color:red">'.$this->session->flashdata('message').'</p>'; } ?>
< ?php
$f_attributes = array('name' => 'form', 'id' => 'form');
echo form_open(site_url().'admin/save', $f_attributes);
?>
<input type="hidden" name="id" id="id" value="<?php echo $id; ?/>" />
<h1>User update form</h1>
<p>Dibawah ini merupakan form update data user</p>

<label>Email</label>
<input type="text" name="email" id="email" class="input" value="<?php echo $email; ?/>" />

<label>Password
<span class="small">Biarkan kosong jika tidak ingin dirubah</span>
</label>
<input type="password" name="password" id="password" class="input" />

<label>Access Area</label>
< ?php
$options = array(
'1' => 'Super Admin',
'2' => 'Admin'
);
$s_attributes = 'id = "user_type" class = "input"';
if($user_type == 1)
{
echo form_dropdown('user_type', $options, '1', $s_attributes);
$setAccessInfo = 'All access';
}
else
{
echo form_dropdown('user_type', $options, '2', $s_attributes);
$setAccessInfo = getModuleAccessForm($query, $id);
}
?>
<label>Module</label>
<div class="loaderBlock">
< ?php
if($id != '')
{
?>
<div id="loading" style="display:none"><em>Loading...</em></div><div id="toBeHidden">< ?php echo $setAccessInfo; ?></div><div id="html_access_area"></div>
< ?php
}
?>
<div id="loading" style="display:none"><em>Loading...</em></div><div id="html_access_area"></div>
</div>
<input type="submit" name="submit" value="Save" class="submit" />
<div class="spacer"></div>

< ?php echo form_close(); ?>
</div>

</body>
</html>

Langkah #8.4 Access viewer (application/views/access.php) => bwat nampilin checkbox module akses yang di load via controller Access

< ?php if ( ! defined('BASEPATH')) exit('No direct script access allowed'); ?>
< ?php
if($access_id != 1)
{
echo getModuleAccessForm($query, $uid);
}
else
{
echo "All access";
}
?>

Langkah #8.5 Dummy viewer (application/views/dummy.php) => ni mah bwat dummy aja, diload ketika module pada uri segment 2 diakses.

< ?php if ( ! defined('BASEPATH')) exit('No direct script access allowed'); ?>
< !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" xml:lang="en" lang="en">

<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="author" content="dr.emi" />
<link href="<? echo base_url(); ?>system/application/views/css/style.css" rel="stylesheet" type="text/css" />
<title>< ?php echo $this->uri->segment(2); ?></title>
</link></head>

<body>

<div id="stylized" class="myform">
Helloo.... you are in < ?php echo $this->uri->segment(2); ?> area. So, you have access to do something here.
</div>

</body>
</html>

SEDIKIT PENJELASAN PADA FUNGSI accessTrigger() di file template_helper.php

//let's skip general access area to checked'
$skipped_area = array('','update','delete','save','access_area.php');

if($sql->num_rows() == 1 || in_array($_this->uri->segment(2), $skipped_area))
{
return true;
}
else
{
die('You don\'t have access to this area. Please contact your Super Administrator.');
}

baris ini dimaksudkan, untuk menskip/mengabaikan uri segment ke 2 yang tidak dikehendaki bwat dicek sebagai module akses user

$skipped_area = array('','update','delete','save','access_area.php');

kedepannya bisa lu kembangin, jadi si user bisa dibagi bagi lagi menjadi user yang bisa edit / delete saja atau cuma bisa liat data record.

OK BEROK!!! AYE LOM TIDUR NIH, lu pelajarin, smoga beruntung cekakakakaaka

KLIK DEMO DAN DOWNLOAD bwat yang berminat bwat belajar lebih lanjut.

Share on Facebook

hehe, gw mang dah lama ga posting tutorial baru. berkutat ama urusan sendok ama piring di dapur. wkaakak..

tapi gw pernah janji kalo bakalan exist di blog legendaris ini. ya, dremi.INFO blog pertama gw mengudara sejak 2005, uset dah! emang radio apa… hahaaha

tapi sekalipun demikian, gw selalui ngikutin perkembangan pendidikan di tanah air. dan beberapa memang membuat gw geleng-geleng kepala. dari dulu ampe sekarang, tutorial yang gw jumpai, itu itu mulu. ayolah kawand, ciptakan sesuatu yang beda! biar popularitas kagak jadi tolak ukur sebuah blog. tapi kualitas nya juga donk!

woke! thanks bwat faris, argon, hendri lingga, ama fans berat dr.emi : M Firmansyah, Black Scorpio Night, Al-K, Ephii, X-ZER0 a.k.a Radiaku, ga lupa juga bwat om C01n yang udah lama ngilang, om ajarin gw lagi!!! , bwat temen temen di ITC ada x-n1nj4 and crew, kalian smua bikin gw tambah semangat, let’s make Lombok as one of Cyber Iland, juga bwat para member lainna yang masih mendukung gw, yang tros ngasi gw semangat. agar tetep exist di blog ini. forum gw sekalipun dah sepi, member dah pada lumpuh, gw masih punya nyali bwat nulis ni tutorial. tutorial ni bwat advance coder, gw saranin bwat nutup jendela + pintu kamar dulu dah! hihi!

kali ini gw mau kasi sdikit tutorial sederhana tapi berguna bwat pada developer web based, hususna bwat yang sering ngerjain aplikasi intranet. sebetulnya apa aja yang bisa dilakukan dengan aplikasi web based? banyak brur! lu kire web based cuma bisa memperindah halaman web lu di browser dowank? kagak! web based punya kemampuan lebih dari sekedar opensource. kelebihannya yang mampu berintegrasi dengan environment system, membuat gw ga ada bosen bosen nya bwat ngoprek yang namanya aplikasi web based.

tros mau bikin apaan mang na? ni tutorial bwat ngegambarin, gimana sih konsep/teknik mengintegrasikan web based aplication ama system/aplikasi diluarna? gw sebut aja external application. tentuna bwat tujuan tertentu ye…

kite bakalan belajar bijimane mengontrol system jaringan via website. kalo yang udah pernah belajar router/server, pasti familiar dengan kata" remote kan? nah ni ceritanye gw mau kasi gambaran bijimane bkin remote control system via web based.

control system yang bakalan kite jadiin sample kasus adalah me-restart, mematikan, dan mengeksekusi perintah open dan close sebuah drive CD-ROM pada remote system. cukup tiga aja ya, sekalipun banyak macam perintah remote yang bisa lu lakuin selain 3 ntu tadi.

bwat ngejalanin misina, gw perlu beberapa hal kayak di bawah ini ni:

1. Adobe photoshop, bwat ngerancang antar muka aplikasi
2. Adobe Dreamweaver, bwat editing layout antar muka aplikasi + coding na, atau kalo lu cukup mahir, gw saranin make Zend Studio bwat coding na
3. Web Server Apache + PHP 5
4. Browser apa aja
5. LAN, ni bwat ujicoba dowank, sebuah jaringan peer 2 peer juga boleh brur!
6. nirCMD, apa tuh? ni yg gw sebut sebagai external application. yang bakalan membantu kite dalam mengeksekusi perintah remote via browser.

gw yakin

no 1-5 dah banyak yang familiar, khusus bwat no 6 bisa lu liat info selengkapna, tentang kegunaan tool yang satu ini, disini ni:

http://nircmd.nirsoft.net/

intina nirCMD merupakan command line tool, bwat mempermudah user menggantikan perintah CMD bawaan windows, sori bwat sample na gw ambil OS na windows yak! Tapi ntar kedepanna, gw bakalan kasi juga tutorial bijimane melakukan simulasi remote sistem ini under Linux Sistem, Ubuntu misalna.

Designing Interface

Buka photoshop, bwat dokumen baru secukupna

bikin layer baru, pencet [CTRL+SHIFT+N], tros pencet lagi [ALT+BACKSPACE], warna na bebas dah!

baru dah kasi dikit gradasi, bisa lu donglot gradasi style na di file tutorial nyang lu plototin ini ni… kakakakaakakakw

bwat ilustrasi, lu bisa make icon bwat eksekusi perintah command na ntar. disini gw make icon bwat restart, shutdown, ama open-close CD-ROM

dengan sdikit teknik refleksi, duplikat ketiga objek diatas, tros transform vertikal ke bawah ye

kesan refleksi na gw pake cara ngapusin tu bawah ikon ikon na make eraser tool.

tros kurangin opacity icon duplikatna jadi 40%

tros lu slice dah ketiga objek ikon na

pencet [CTRL+SHIFT+ALT+S], atow lwat menu File > Save for Web

pake settingan kayak dibwah ini

pencet Save kalo udah, option save na kayak dibwah ini

woke bruder! lu bakalan dapet gambar bwat layoutna, terakhir save as juga bwat backgroundna, lu bisa hidden layer lainna bwat nyimpen background gradasi di belakagna, ntar kite bakalan pake bwat background panel control na.

HANDCODED HTML+CSS

lumayan bwat pemanasan, hihi….

tenggak kopi lu, isep tu rokok,.. hahahahha lu buka dah dreamweaver na, bikin manajemen situs baru, di folder webserver apache lu. folderna bebas bebas aja dah, suka suka lu

woke! layout ini kayak biasa aja dah, ada HTML ama CSS na. tapi format HTML yang kite pake yakni extensi *.PHP

ni bwat CSS na (style.css)

body { font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#333333; background:#FFF; margin-top:30px; padding:0; }
.float { float:left; }
#mainBox { width:504px; height:360px; margin:0 auto; background:url(../image/bg.jpg) 0 0 no-repeat; }
#panelBox { width:416px; padding-top:66px; top:66px; margin:0 auto; }
#panelBox img { border:none; }

#panelBox #restart { width:150px; height:212px; cursor:hand; cursor:auto; }
#panelBox #cd-rom { width:122px; height:212px; cursor:hand; cursor:auto; }
#panelBox #shutdown { width:144px; height:212px; cursor:hand; cursor:auto; }

dan ni HTML na (index.php)

<!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>Web Base Controller System with NirCMD</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="mainBox">
<div id="panelBox">
<div id="restart" class="float"><a href="javascript:void(0);" onclick="cf=confirm('Do you want to reboot ?');if(cf)window.location='?a=restart';return false;"><img src="image/restart.jpg" /></a></div>
<div id="cd-rom" class="float"><a href="?a=cdrom"><img src="image/cd-rom.jpg" /></a></div>
<div id="shutdown" class="float"><a href="javascript:void(0);" onclick="cf=confirm('Do you want to turn off ?');if(cf)window.location='?a=shutdown';return false;"><img src="image/shutdown.jpg" /></a></div>
</div>
</div>
<div style="text-align:center;">
<h3>Command Status disini</h3>
</div>
</body>
</html>

ga ada pertanyaan kan? hihii.. sejauh ini editing layout nyampe sini berur! lanjot ke tahap berikutna, coding!!

HANDCODED PHP SCRIPT

kalo gw c, rokona dah wabis dari tadi ni, gw sulut lagi yak!

hahahha….

perlu gw tegasin, sebelum membuat script berikutna, ada baikna lu buka file help penggunaan command nirCMD, dalam tutorial ini file help nirCMD dah gw sertain juga.

<?php
//directories system
define("_BASE_DIR", realpath(dirname(__FILE__))."/");
define("_ABSOLUTE_PATH", "/wbcs-NirCMD/");
define("_BASE_URI", "http://localhost");
define("_URL", _BASE_URI._ABSOLUTE_PATH);

//nircmd
if(strpos($_SERVER['HTTP_USER_AGENT'], 'Windows')  !== FALSE)
{
	define("_NIRCMD_EXEC", str_replace('/', '\\', _BASE_DIR.'nircmd\nircmd.exe'));
}
else
{
	define("_NIRCMD_EXEC", str_replace('\\', '/', _BASE_DIR.'nircmd/nircmd.exe'));
}
define("_CDROM_DRIVE", ""); //if you don't know drive letter of remote CD-ROM, just leave empty named constant
define("_IS_REMOTE_ACTIVE", false);
define("_REMOTE_IP", "192.168.1.17");
define("_COMPUTER_NAME", strtoupper(gethostbyaddr(_REMOTE_IP)));
?>

pada komentar //directories system, gw tentuin definisi konstanta bwat direktori aplikasi lu di web server, disini gw make __FILE__ bwat definisi _BASE_DIR, dan beberapa defini lainna

sedangkan pada komentar //nircmd, lu bisa liat ada defnisini _NIRCMD_EXEC, sebagai konstanta dari lokasi tool nirCMD berada, dalam konteks ini gw taro nirCMD.exe di folder nircmd

khusus bwat definisi _CDROM_DRIVE, _IS_REMOTE_ACTIVE dan _REMOTE_IP hanya bwat opsi tambahan aja, defaultna, lu bisa pake seperti di script atas

kayak psen yg gw tarok sebage komentarna //if you don’t know drive letter of remote CD-ROM bal bla…, nyang kire kire artinye, kalo lu ga tawu drive letter CD-ROM pada remote system targetna, lu boleh kosongin

cuma kite punya planning, kalo _IS_REMOTE_ACTIVE bernilai true, maka aplikasi akan menjalankan command untuk me-remote system dalam jaringan LAN, yakni melalui definisi _COMPUTER_NAME. disni lu bisa liat ada baris gethostbyaddr, ntu bwat mengkonvert IP menjadi nama komputer yang bakalan diremote dalam koneksi jaringan lokal.

tros kalo _IS_REMOTE_ACTIVE bernilai false, maka _REMOTE_IP dan _COMPUTER_NAME bakalan diabaikan nilai konstantana. ni artina, command yang akan dijalankan aplikasi hanya bwat system komputer lokal, dimana tempat lu ngetik saat ini.

Nah, lanjot ye! kite bakalan bikin class baru bwat aplikasi kite, ada tiga fungsi pada class yang bakalan dipake bwat mengeksekusi perintah remote command ke system, melalui perantara nirCMD console

• restart() bwat merestart remote system, command line yang dijalanin pada fungsi ini adalah:
  exitwin reboot

• shutdown() bwat men-shutdown remote system, command line na:
  exitwin poweroff

• cdrom() bwat membuka dan menutup drive CD-ROM pada remote system, command line na:
  cdrom open
  cdrom close

ni script lengkap na file nircmd.php

bwat class baru namana, nircmd.php atau lu bisa sesuaiin dengan gaya coding lu, bisa juga make fungsi dowank.

<?php

class nircmd
{
	function alert_url($msg, $url)
	{
		$alert = "<script>alert(\"$msg\");window.location='".$url."';</script>";
		return $alert;
	}
	function restart()
	{
		if(_IS_REMOTE_ACTIVE == true)
		{
			$remoteParameter = 'remote \\\\'._COMPUTER_NAME.' ';
		}
		$cmd = '"'._NIRCMD_EXEC.'" '.$remoteParameter.'exitwin reboot';
		$output = system($cmd);
		echo '<p>Command: <pre>'.$cmd.'</pre></p>';
	}
	function shutdown()
	{
		if(_IS_REMOTE_ACTIVE == true)
		{
			$remoteParameter = 'remote \\\\'._COMPUTER_NAME.' ';
		}
		$cmd = '"'._NIRCMD_EXEC.'" '.$remoteParameter.'exitwin poweroff';
		$output = system($cmd);
		echo '<p>Command: <pre>'.$cmd.'</pre></p>';
	}
	function cdrom()
	{
		if(!isset($_SESSION['ROMSTATUS']))
		{
			$_SESSION['ROMSTATUS'] = 'open';
			$_SESSION['ROMIMG'] = '<img src="'._URL.'image/dvd_mount.png">';
		}
		elseif($_SESSION['ROMSTATUS'] == 'open')
		{
			$_SESSION['ROMSTATUS'] = 'close';
			$_SESSION['ROMIMG'] = '<img src="'._URL.'image/dvd_unmount.png">';
		}
		elseif($_SESSION['ROMSTATUS'] == 'close')
		{
			$_SESSION['ROMSTATUS'] = 'open';
			$_SESSION['ROMIMG'] = '<img src="'._URL.'image/dvd_mount.png">';
		}

		if(_IS_REMOTE_ACTIVE == true)
		{
			$remoteParameter = 'remote \\\\'._COMPUTER_NAME.' ';
		}
		$cmd = '"'._NIRCMD_EXEC.'" '.$remoteParameter.'cdrom '.$_SESSION['ROMSTATUS'].' '._CDROM_DRIVE;
		$output = system($cmd);
		echo '<p>Command: <pre>'.$cmd.'</pre></p>';
	}
}
?>

khusus bwat fungsi cdrom() ada tambahan kondisi, karena kite punya dua macam perintah command bwat cdrom na, yakni open dan close CD-ROM

jadi kite bisa make session bwat mendeteksi apakah saat ini CD-ROM sedang open atau close

if(!isset($_SESSION['ROMSTATUS']))
		{
			$_SESSION['ROMSTATUS'] = 'open';
			$_SESSION['ROMIMG'] = '<img src="'._URL.'image/dvd_mount.png">';
		}
		elseif($_SESSION['ROMSTATUS'] == 'open')
		{
			$_SESSION['ROMSTATUS'] = 'close';
			$_SESSION['ROMIMG'] = '<img src="'._URL.'image/dvd_unmount.png">';
		}
		elseif($_SESSION['ROMSTATUS'] == 'close')
		{
			$_SESSION['ROMSTATUS'] = 'open';
			$_SESSION['ROMIMG'] = '<img src="'._URL.'image/dvd_mount.png">';
		}

woke! jangan bingung dulu, perhatiin langkah berikutna. di file index.php kite bakalan panggil config.php dan nircmd.php

session_start();
ob_start();

include "config.php"; //panggil lokasi file config.php
include "class/nircmd.php"; //panggil lokasi file nircmd.php

$n = new nircmd; //ni diperlukan bwat class nircmd yang udah lu bikin diatas

selanjutna gunakan $n bwat manggil fungsi-fungsi dalam class nircmd

contoh:

• $n->restart(); //bwat merestart system
• $n->shutdown(); //bwat men-shutdown system
• $n->cdrom(); //bwat open dan close drive CD-ROM

saat na masang parameter URL bwat pemilihan kondisi halaman, yakni bwat icon restart, shutdown dan cdrom

kasi link na kayak gini:

<div id="restart" class="float"><a href="javascript:void(0);" onclick="cf=confirm('Do you want to reboot  ?');if(cf)window.location='?a=restart';return false;"><img src="image/restart.jpg" /></a></div>
   	  	<div id="cd-rom" class="float"><a href="?a=cdrom"><img src="image/cd-rom.jpg" /></a></div>
  	  	<div id="shutdown" class="float"><a href="javascript:void(0);" onclick="cf=confirm('Do you want to turn off  ?');if(cf)window.location='?a=shutdown';return false;"><img src="image/shutdown.jpg" /></a></div>

parameter URL yang kite pake adalah "a", nantina bakalan kite seleksi nilai dari parameter "a" ini di pemilihan kondisi halaman.

woke, bwat mempermudah, lu bisa pake switch bwat pemilihan halamana, apa itu switch dalam PHP? baca disini:

http://id.php.net/manual/en/control-structures.switch.php

dan ini implementasi dari pemilihan kondisi halaman na:

<?php
$a = $_REQUEST['a'];
switch ($a)
{
	case 'restart':
		$n->restart();
		break;
	case 'shutdown':
		$n->shutdown();
		break;
	case 'cdrom':
		$n->cdrom();
		break;
}
?>

ok berur!????

jadi lengkapna, file index.php kayak gini sekarang:

<?php
session_start();
ob_start();

/**
#
# Web Base Controller System with NirCMD
# Author  hairul azami a.k.a dr.emi <webmaster@dremi.info>
# Web development and design service => info@dremi.net
# Website http://dremi.info http://dremi.net
# License: GPL
# File: index.php
#
**/

include "config.php";
include "class/nircmd.php";

$n = new nircmd;
?>
<!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>Web Base Controller System with NirCMD</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="mainBox">
	<div id="panelBox">
    	<div id="restart" class="float"><a href="javascript:void(0);" onclick="cf=confirm('Do you want to reboot  ?');if(cf)window.location='?a=restart';return false;"><img src="image/restart.jpg" /></a></div>
   	  	<div id="cd-rom" class="float"><a href="?a=cdrom"><img src="image/cd-rom.jpg" /></a></div>
  	  	<div id="shutdown" class="float"><a href="javascript:void(0);" onclick="cf=confirm('Do you want to turn off  ?');if(cf)window.location='?a=shutdown';return false;"><img src="image/shutdown.jpg" /></a></div>
    </div>
</div>
<div style="text-align:center;">
<h3>
<?php
$a = $_REQUEST['a'];
switch ($a)
{
	case 'restart':
		$n->restart();
		break;
	case 'shutdown':
		$n->shutdown();
		break;
	case 'cdrom':
		$n->cdrom();
		break;
}
if(isset($a))
{
	echo '<p>COMMAND STATUS: <b>Executed!</b></p>';
	echo '<p>ROM STATUS: '.$_SESSION['ROMIMG'].' '.$_SESSION['ROMSTATUS'].'</p>';
}
?>
</h3>
</div>
</body>
</html>
<?
ob_end_flush();
?>

liat, dipaling akhir sekarang ada baris ob_end_flush();

ntu bwat mematikan buffer session yang dibuat oleh halaman index.php dan class pada nircmd.php

pelajari disini:

http://id.php.net/manual/en/function.ob-end-flush.php

ni die tampilan awal index.php kalo di preview di design layout dreamweaver

hehehe, tinggal lu coba dah di browser, buka URL aplikasi lu:

http://localhost/wbcs-NirCMD/index.php

URL na ga usah bingung donk, sesuaiin dengan folder aplikasi yang lu buat tadi di manajemen situs dreamweaver na.

TESTING

coba lu test, klik icon CD-ROM dulu, sebelum nantina kudu lu coba link icon restart dan shutdown na

KETERANGAN

bwat awal awal ujicoba, pake settingan false dulu bwat definisi _IS_REMOTE_ACTIVE pada file config.php

jadi lu bisa langsung liat hasil eksekusi perintah nirCMD dalam delay yang kagak terlalu lama. beda dengan menggunakan _IS_REMOTE_ACTIVE sebagai true, maka command remote system sesuai IP yang dijadiin target akan dieksekusi. dan ini memakan waktu terkadang delay 5-10 detik, tergantung kondisi jaringan LAN punya lu.

ni video saat PC dr.emi gw remote menggunakan aplikasi web based yang baru aja kite bikin ini.

bwat struktur file aplikasi, lu bisa donglot script lengkap pada tutorial ini…

woke bruder!!! tengkyu berat dah mau baca tutorial acak kadut gw dan semrawut ini. diskusi kite terbuka di FaceBook dremi.INFO atau di forumna.

Share on Facebook

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

Share on Facebook

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.

Share on Facebook

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/

Share on Facebook

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">&nbsp;</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>&nbsp; </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">
&copy; Copyright 2009 dr.emi creative design { <a href="http://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

http://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 + ".&nbsp;&nbsp;&nbsp;&nbsp;<input title='Type new collection data' type=text name='collection_data[]' id='txt1" + id + "' size='35'>&nbsp;&nbsp;<a href='#' onClick='removeFormField(\"#row" + id + "\"); return false;'><img alt='Remove' title='Remove' border=0 src='images/close.png'></a></label></p><br>");

$('#row' + id).highlightFade({
speed:1000
});

id = (id - 1) + 2;
document.getElementById("id").value = id;
}

function removeFormField(id) {
$(id).remove();
}

/**REFRESH SCRIPT FOR COLLECTION**/
function refreshCollection(book_id, cDel) {
$("#contenPanCollection").load("frame-collection-loader.php?book_id="+book_id+"&cDel="+cDel+"", '', callbackCollection);
}
function callbackCollection() {
$("#toBeHideCollection").hide();
$("#contenPanCollection").show();
}
$(document).ready(refreshCollection(book_id, cDel));

/**REFRESH SCRIPT FOR CATEGORY**/
function refreshCategory() {
$("#contenPanCategory").load("category-loader.php", '', callbackCategory);
}
function callbackCategory() {
$("#toBeHideCategory").hide();
$("#contenPanCategory").show();
}
$(document).ready(refreshCategory());

addFormField is function to display dynamic text field, on this part I use jquery.highlightFade.js plugin to implementad it.

frame-collection-loader.php is file that used by jQuery ajax, to get value of book relation table. Remember that, book table related with collection data table. So, to implementad it using jQuery, you must create function like refreshCollection.

OK, back to index.php, add this code to call some javascript file

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

Thickbox is a jQuery plugin to displaying unit interface content in form page. You will see the result after complete this tutorial.

On index.php I use <div id=”ajax_display”></div> after BODY tag as target of ajax-display javascript. So, you may create a style for it.

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

Let’s see our last index.php code

<?
/**
#
# Building Administrator Manager for Table Relation Using PHP and jQuery
# Author  hairul azami a.k.a dr.emi <webmaster@dremi.info>
# Website http://dremi.info
# License: GPL
# File: index.php
#
**/

##YOU MAY ADD SOME AUTHENTICATION CODE FOR USER LOGIN HERE
define("_VALID_ACCESS", true);

if(!defined('_VALID_ACCESS'))
{
die("Direct Access Are Not Allow");
}

include_once "dre-config.php";
include_once "db.php";
include_once "function.php";

$db = new mydb;
$db->connect(_DB_HOST, _DB_USER, _DB_PASS, _DB_NAME);
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Building Administrator Manager for Table Relation Using PHP and jQuery</title>
<script type="text/javascript" src="js/jquery-1.2.6.js"></script>
<script type="text/javascript" src="js/jquery.highlightFade.js"></script>
<script type="text/javascript" src="js/dynamic-form.js"></script>
<script type="text/javascript" src="js/ajax-display.js"></script>
<style type="text/css" media="all">
@import "js/thickbox/thickbox.css";
</style>
<script type="text/javascript" src="js/thickbox/thickbox.js"></script>
<link href="style.css" rel="stylesheet" type="text/css" />

</head>

<body>
<div id="ajax_display"></div>

OK, next task is creating dynamic content for insert, edit, and delete of table rows.

Take look this code:

First content is listing and delete of table data

<?
if($_GET['cPub'] == 'list')
{
if($_GET['cTask'] == 'delete')
{
$CHK = "SELECT * FROM collection WHERE book_id = '$_GET[book_id]'";
$SQL = "DELETE FROM book WHERE book_id = '$_GET[book_id]'";

##FIRST CHECK IT FOR COLLECTION
$COLL= $db->numrows($db->query($CHK));

if($COLL > 0)
{
echo "<p class='msg'><span>You cannot delete BOOK ID = $_GET[book_id]. This record still have $COLL collection data</span></p>";
}
else
{
if($QRY = $db->query($SQL))
{
echo "<p class='msg'><span>Successfully Delete for BOOK ID = $_GET[book_id]</span></p>";
}
else
{
echo "<p class='msg'><span>Error: Delete for BOOK ID = $_GET[book_id]<span></p>";
}
}
}

$SQL = "SELECT * FROM book ORDER BY book_id DESC";
$QRY = $db->query($SQL);
$NUM = $db->numrows($QRY);
$i = 0;
if($NUM > 0)
{
?>
<table width="100%" border="0" cellpadding="4" cellspacing="1" bgcolor="#FFFFFF" id="maintable">
<tr>
<td width="5%" bgcolor="#003366"><span style="color:#FFFFFF; font-weight:bold;">No.</span></td>
<td width="47%" bgcolor="#003366"><span style="color:#FFFFFF; font-weight:bold;">Book Title</span></td>
<td width="24%" bgcolor="#003366"><span style="color:#FFFFFF; font-weight:bold;">Category</span></td>
<td width="10%" bgcolor="#003366"><span style="color:#FFFFFF; font-weight:bold;">Collection</span></td>
<td width="14%" bgcolor="#003366"><span style="color:#FFFFFF; font-weight:bold;">Option</span></td>
</tr>
<?
while($ROW = $db->fetch($QRY))
{
$i++;

?>
<tr>
<td bgcolor="#B7C0FF"><? echo $i; ?></td>
<td bgcolor="#B7C0FF"><? echo $ROW['title']; ?></td>
<td bgcolor="#B7C0FF"><?
$CATROW = $db->fetch($db->query("SELECT * FROM category WHERE category_id = '$ROW[category_id]'"));
echo $CATROW['description'];
?>
</td>
<td bgcolor="#B7C0FF">
<?
##NUMBER OF COLLECTION
$COLLECTION_NUMBER = $db->numrows($db->query("SELECT * FROM collection WHERE book_id = '$ROW[book_id]'"));
echo $COLLECTION_NUMBER;
?>
</td>
<td bgcolor="#B7C0FF">
<a href="ui-collection.php?book_id=<? echo $ROW['book_id']; ?>&amp;keepThis=true&amp;TB_iframe=true&amp;height=250&amp;width=500" class="thickbox" title="View Collection of <? echo $ROW['title']; ?>"><img src="images/zoom16.png" alt="View Collection" width="16" height="16" border="0" /></a>&nbsp;&nbsp;
<a href="?cPub=edit&amp;book_id=<? echo $ROW['book_id']; ?>" title="Edit"><img src="images/edit.png" alt="Edit" width="16" height="16" border="0" /></a>&nbsp;&nbsp;
<a href="javascript:void(0);" onclick="cf=confirm('Are you sure to delete No. <? echo $i; ?> ???');if(cf)window.location='?cPub=list&amp;cTask=delete&amp;book_id=<? echo $ROW['book_id']; ?>';return false;" title="Delete"><img src="images/delete.png" alt="Delete" width="16" height="16" border="0" /></a>
</td>
</tr>
<?
}
?>
</table>
<?
}
else
{
echo "<p>No Query</p>";
}
}

Well… I cannot explain each of line, but feel free to have fun while typing the code. Actually the code will diplaying List of Data Rows.

Next is Adding New Record. This code will displaying form for adding new record of data

elseif($_GET['cPub'] == 'addnew')
{
?>
<?
if($_GET['Submit'] == 'SUBMIT' && !empty($_GET['title']))
{
##INSERT NEW BOOK
if(!empty($_GET['category_id2']))
{
$choseCat = $_GET['category_id2'];
}
else
{
$choseCat = $_GET['category_id'];
}
$SQL = "INSERT INTO book(title, category_id) VALUES('$_GET[title]', '$choseCat')";
if($db->query($SQL))
{
echo "<p class='msg'><span>New Record Successfully Submited</span></p>";
}
else
{
echo "<p class='msg'>E R R O R !</p>";
}

##GET THE LAST ID FOR BOOK RECORD
$BOOKID = $db->fetch($db->query("SELECT * FROM book ORDER BY book_id DESC"));

##INSERT NEW COLLECTION
for($i=0;$i<=count($_GET['collection_data']);$i++)
{
if(!empty($_GET['collection_data'][$i]))
{
$SQLCOLLECTION = "INSERT INTO collection(collection_data, book_id)
VALUES('".$_GET['collection_data'][$i]."', '$BOOKID[book_id]')";
$db->query($SQLCOLLECTION);
}
}
}
?>
<div id="formM">
<form id="form1" name="form1" method="get" action="">
<input name="cPub" type="hidden" value="<? echo $_GET['cPub']; ?>" />
<label><span>Book Title </span>
<input name="title" type="text" class="inputM" id="title" size="20" />
</label>

<label><span>Category </span>
<div id="contenPanCategory"></div>
<div id="toBeHideCategory">
<select class="inputM" name="category_id" size="1">
<?
$QRYCAT = $db->query("SELECT * FROM category ORDER BY description");
while($ROWCAT = $db->fetch($QRYCAT))
{
?>
<option value="<? echo $ROWCAT['category_id']; ?>"><? echo $ROWCAT['description']; ?></option>
<?
}
?>
</select>
</div>
<span class="note"> (* Your category not listed ? Manage <a href="category-loader.php?cF=Manage&amp;keepThis=true&amp;TB_iframe=true&amp;height=250&amp;width=300" class="thickbox" title="Manage Category">here</a> and <a href="javascript:void(0);" title="Refresh Category List" onClick="refreshCategory()">refresh</a></span>
</label>
<div class="spacer">&nbsp;</div>
<label><span>Collections </span>
<div id="fieldBox">
<div id="submenu">
<div id="icon"><a href="javascript:void(0);" onClick="addFormField(); return false;" title="Add New Collection"><img alt="Add New Collection" src="images/addplus.gif" width="32" height="29" /></a><input type="hidden" id="id" value="1"></div>
</div>
<div id="collection">
<div id="top-box"></div>
<div id="center-box">
<div id="text"><div id="divTxt"></div></div>
<div id="bottom-box"></div>
</div>
</div>
</div>
</label>
<div class="clear"></div>
<label><span>&nbsp; </span>
<div class="spacer"></div><input type="submit" name="Submit" value="SUBMIT" class="buttonM"/>
</label>
</form>
</div>
<?
}

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

elseif($_GET['cPub'] == 'edit')
{
?>
<?
if($_GET['Submit'] == 'UPDATE' && !empty($_GET['title']))
{
##UPDATE CURRENT BOOK
if(!empty($_GET['category_id2']))
{
$choseCat = $_GET['category_id2'];
}
else
{
$choseCat = $_GET['category_id'];
}
$SQL = "UPDATE book SET title='$_GET[title]', category_id='$choseCat' WHERE book_id='$_GET[book_id]'";
if($db->query($SQL))
{
echo "<p class='msg'><span>Current Record Successfully Updated</span></p>";
}
else
{
echo "<p class='msg'>E R R O R !</p>";
}
}
?>

<?
$SQL = "SELECT * FROM book WHERE book_id = '$_GET[book_id]'";
$ROW = $db->fetch($db->query($SQL));
?>
<div id="formM">
<form id="form1" name="form1" method="get" action="">
<input name="cPub" type="hidden" value="<? echo $_GET['cPub']; ?>" />
<input name="book_id" type="hidden" value="<? echo $_GET['book_id']; ?>" />
<label><span>Book Title </span>
<input name="title" value="<? echo $ROW['title']; ?>" type="text" class="inputM" id="title" size="20" />
</label>

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

The last is let me type my copyright website

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

IFRAME code will load ui-collection.php that contain used for displaying collection data of current data row. DIV ID contenPanCollection is ID that used by jQuery Ajax as target for Dynamic Collection Data. To activated it, I use onClick=”refreshCollection(<? echo $ROW['book_id']; ?>, 0)”. While refreshCollection function executed, the condition is hidding DIV ID toBeHideCollection and show DIV ID contenPanCollection. The other example of dynamic field is refreshCategory javascript function to load dynamicly category-loader.php

How about thickbox plugin ?

ThickBox jQuery plugin used for displaying unit interface for Add New Collection link or manage category link. As you see, to define class of thickbox plugin, just use class=”thickbox”, and to define width and height of unit interface, just change parameter of width and height from this line:

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

And this is code of ui-collection.php

<?
define("_VALID_ACCESS", true);

if(!defined('_VALID_ACCESS'))
{
die("Direct Access Are Not Allow");
}
//echo $_SERVER['REQUEST_URI'];
include_once "dre-config.php";
include_once "db.php";
include_once "function.php";
$db = new mydb;
?>
<style media="all" type="text/css">
* {
background:#ffffff;
color:#2a2a2a;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
}
</style>

<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery.highlightFade.js"></script>
<script type="text/javascript" src="js/dynamic-form.js"></script>
<script type="text/javascript" src="js/ajax-display.js"></script>

<?
$book_id=intval($_GET['book_id']);

$cDel=intval($_GET['cDel']);
$db->connect(_DB_HOST, _DB_USER, _DB_PASS, _DB_NAME); //changet the configuration in required

?>

<?
if($_GET['cF'] == 'Delete')
{
$db->query("DELETE FROM collection WHERE collection_id = '$_GET[collection_id]'");
redirect(0, "$_SERVER[PHP_SELF]?book_id=$_GET[book_id]");
}
elseif($cDel == 1)
{
$chk4Del = $db->numrows($db->query("SELECT * FROM collection
WHERE book_id = '$book_id'"));
if($chk4Del >= 1)
{

if($db->query("DELETE FROM collection WHERE book_id = '$book_id'"))
{
alert2("All Collection data has been deleted !");
}

}
else
{
alert2("I didn't deleted anything !");
}
}
elseif($_GET['cF'] == 'Edit')
{
if($_POST['update'] && !empty($_POST['collection_data']))
{
$db->query("UPDATE collection SET collection_data = '$_POST[collection_data]' WHERE collection_id = '$_GET[collection_id]'");
redirect(0, "$_SERVER[PHP_SELF]?book_id=$_GET[book_id]");
}

$e_data_collection = $db->fetch($db->query("SELECT * FROM collection WHERE collection_id = '$_GET[collection_id]'"));
?>
<p style="font-weight:bold">Edit Data for Collection</p>
<form name="miniForm" action="" method="POST">
<input type="hidden" name="book_id" value="<? echo $_GET['book_id']; ?>" />
<input class="miniInput" type="text" name="collection_data" value="<? echo $e_data_collection['collection_data']; ?>">
<br />
<br />
<input class="miniSubmit" type="submit" name="update" value="update">
<input class="miniSubmit" type="button" name="cancel" onclick="javascript:history.go(-1);" value="cancel">
</form>
<?
}
elseif($_GET['cF'] == 'Input')
{
if($_POST['submit'])
{
for($i=0;$i<=count($_POST['collection_data']);$i++)
{
if(!empty($_POST['collection_data'][$i]))
{
$SQLCOLLECTION = "INSERT INTO collection(collection_data, book_id) VALUES('".$_POST['collection_data'][$i]."', '$_POST[book_id]')";
if($db->query($SQLCOLLECTION))
{
echo "Collection Data $i Submited Successfully.<br>";
}
}
}
}

?>
<p style="font-weight:bold"><a href="javascript:void(0);" onClick="addFormField(); return false;" title="Add New Collection"><img alt="Add New Collection" src="images/add.png" border="0" /> Add New Collection Data</a><input type="hidden" id="id" value="1"></p>
<form name="miniForm" action="" method="POST">
<input type="hidden" name="book_id" value="<? echo $_GET['book_id']; ?>" />
<div id="divTxt"></div>
<br />
<br />
<input class="miniSubmit" type="submit" name="submit" value="submit">
</form>
<?
}
else
{
?>

<table width="100%" border="0" cellpadding="2" cellspacing="1" bgcolor="#CCCCCC">
<tr>
<td width="5%" bgcolor="#efefef">No.</td>
<td width="26%" bgcolor="#efefef">Collection Data </td>
<td width="20%" bgcolor="#efefef"><center>Option</center></td>
</tr>
<?
$q_data_colllection = $db->query("SELECT * FROM collection WHERE book_id = '$book_id'");
while($r_data_colllection = $db->fetch($q_data_colllection))
{
$i++;
?>
<tr>
<td bgcolor="#ffffff"><? echo $i; ?></td>
<td bgcolor="#ffffff"><? echo $r_data_colllection['collection_data']; ?> </td>
<td valign="top" bgcolor="#ffffff"><center>
<a alt="Edit Collection Data No. <? echo $i; ?>" title="Edit Collection Data No. <? echo $i; ?>" href="?cF=Edit&book_id=<? echo $_GET['book_id'] ?>&collection_id=<? echo $r_data_colllection['collection_id'] ?>" class="thickbox"><img alt="Edit Collection Data No. <? echo $i; ?>" title="Edit Collection Data No. <? echo $i; ?>" src="images/edit.png" border="0" width="16px;" height="16px;" /></a>

<a alt="Delete Collection Data No. <? echo $i; ?>" title="Delete Collection Data No. <? echo $i; ?>" href="javascript:void(0);" onclick="cf=confirm('Are you sure to delete No. <? echo $i; ?> ???');if(cf)window.location='?cF=Delete&book_id=<? echo $_GET['book_id'] ?>&collection_id=<? echo $r_data_colllection['collection_id'] ?>';return false;"><img alt="Delete Collection Data No. <? echo $i; ?>" title="Delete Collection Data No. <? echo $i; ?>" src="images/delete.png" border="0" width="16px;" height="16px;" /></a>
</center>
</td>
</tr>
<?
}
?>
</table>

<?
}
?>

PHP code for category-loader.php

<?
define("_VALID_ACCESS", true);

if(!defined('_VALID_ACCESS'))
{
die("Direct Access Are Not Allow");
}
//echo $_SERVER['REQUEST_URI'];
include_once "dre-config.php";
include_once "db.php";
include_once "function.php";
$db = new mydb;
?>
<?
$category_id=intval($_GET['category_id']);
$cDel=intval($_GET['cDel']);
$db->connect(_DB_HOST, _DB_USER, _DB_PASS, _DB_NAME); //changet the configuration if required
?>
<?
if($_GET['cF'] == 'Delete')
{
$db->query("DELETE FROM category WHERE category_id = '$_GET[category_id]'");
redirect(0, "$_SERVER[PHP_SELF]?cF=Manage");
}
elseif($_GET['cF'] == 'Edit')
{
if($_POST['update'] && !empty($_POST['description']))
{
$db->query("UPDATE category SET description = '$_POST[description]' WHERE category_id = '$_GET[category_id]'");
redirect(0, "$_SERVER[PHP_SELF]?cF=Manage");
}

$e_data_category = $db->fetch($db->query("SELECT * FROM category WHERE category_id = '$_GET[category_id]'"));
?>
<style media="all" type="text/css">
* {
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
}
</style>
<p style="font-weight:bold">Edit Data for Category</p>
<form name="miniForm" action="" method="POST">
<input title='Type new category' type="text" name='description' value="<? echo $e_data_category['description']; ?>" size='35'>
<br />
<br />
<input class="miniSubmit" type="submit" name="update" value="update">
<input class="miniSubmit" type="button" name="cancel" onclick="javascript:history.go(-1);" value="cancel">
</form>
<?
}
elseif($_GET['cF'] == 'Manage')
{
?>
<style media="all" type="text/css">
* {
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
}
</style>
<p style="font-weight:bold"><a href="?cF=Input" title="Add New Category"><img alt="Add New Category" src="images/add.png" border="0" /> Add New Category</a></p>
<table width="100%" border="0" cellpadding="2" cellspacing="1" bgcolor="#CCCCCC">
<tr>
<td width="5%" bgcolor="#efefef">No.</td>
<td width="26%" bgcolor="#efefef">Category Name</td>
<td width="20%" bgcolor="#efefef"><center>Option</center></td>
</tr>
<?
$q_data_category = $db->query("SELECT * FROM category ORDER BY description");
while($r_data_category = $db->fetch($q_data_category))
{
$i++;
?>
<tr>
<td bgcolor="#ffffff"><? echo $i; ?></td>
<td bgcolor="#ffffff"><? echo $r_data_category['description']; ?> </td>
<td valign="top" bgcolor="#ffffff"><center>
<a alt="Edit Collection Data No. <? echo $i; ?>" title="Edit Category No. <? echo $i; ?>" href="?cF=Edit&category_id=<? echo $r_data_category['category_id'] ?>" class="thickbox"><img alt="Edit Category No. <? echo $i; ?>" title="Edit Category No. <? echo $i; ?>" src="images/edit.png" border="0" width="16px;" height="16px;" /></a>

<a alt="Delete Category No. <? echo $i; ?>" title="Delete Category No. <? echo $i; ?>" href="javascript:void(0);" onclick="cf=confirm('Are you sure to delete No. <? echo $i; ?> ???');if(cf)window.location='?cF=Delete&category_id=<? echo $r_data_category['category_id'] ?>';return false;"><img alt="Delete Category Data No. <? echo $i; ?>" title="Delete Category No. <? echo $i; ?>" src="images/delete.png" border="0" width="16px;" height="16px;" /></a>
</center>
</td>
</tr>
<?
}
?>
</table>
<?
}
elseif($_GET['cF'] == 'Input')
{
if($_POST['submit'] && !empty($_POST['description']))
{
$SQL = "INSERT INTO category(description) VALUES('$_POST[description]')";
if($db->query($SQL))
{
redirect(0, "$_SERVER[PHP_SELF]?cF=Manage");
}
}

?>
<style media="all" type="text/css">
* {
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
}
</style>
<form name="miniForm" action="" method="POST">
<input title='Type new category' type="text" name='description' size='35'>
<br />
<br />
<input class="miniSubmit" type="submit" name="submit" value="submit">
<input class="miniSubmit" type="button" name="cancel" onclick="javascript:history.go(-1);" value="cancel">
</form>
<?
}
else
{
?>
<select class="inputM" name="category_id2" size="1">
<?
$SQLCAT = "SELECT * FROM category ORDER BY description";
$QRYCAT = $db->query($SQLCAT);
while($ROWCAT = $db->fetch($QRYCAT))
{
?>
<option value="<? echo $ROWCAT['category_id']; ?>"><? echo $ROWCAT['description']; ?></option>
<?
}
?>
</select>
<?
}
?>

PHP Code for frame-collection-loader.php

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

Here are the complete index.php code

<?
/**
#
# Building Administrator Manager for Table Relation Using PHP and jQuery
# Author  hairul azami a.k.a dr.emi <webmaster@dremi.info>
# Website http://dremi.info
# License: GPL
# File: index.php
#
**/

##YOU MAY ADD SOME AUTHENTICATION CODE FOR USER LOGIN HERE
define("_VALID_ACCESS", true);

if(!defined('_VALID_ACCESS'))
{
die("Direct Access Are Not Allow");
}

include_once "dre-config.php";
include_once "db.php";
include_once "function.php";

$db = new mydb;
$db->connect(_DB_HOST, _DB_USER, _DB_PASS, _DB_NAME);
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Building Administrator Manager for Table Relation Using PHP and jQuery</title>
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery.highlightFade.js"></script>
<script type="text/javascript" src="js/dynamic-form.js"></script>
<script type="text/javascript" src="js/ajax-display.js"></script>
<style type="text/css" media="all">
@import "js/thickbox/thickbox.css";
</style>
<script type="text/javascript" src="js/thickbox/thickbox.js"></script>
<link href="style.css" rel="stylesheet" type="text/css" />
<!--

#
# Building Administrator Manager for Table Relation Using PHP and jQuery
# Author  hairul azami a.k.a dr.emi <webmaster@dremi.info>
# Website http://dremi.info
# License: GPL
#

-->

</head>

<body>
<div id="ajax_display"></div>
<div id="mainPan">
<div id="bodyPan">
<div id="header"></div>
<div id="menu">
<div id="welcome">Welcome. Today is <? echo date("F j, Y, g:i a"); ?></div>
<a href="?cPub=addnew"><div id="addnew">ADD NEW</div></a>
<a href="?cPub=list"><div id="list">LIST</div></a>
</div>
<div id="content">
<div id="top-content"></div>
<div id="center-content">
<div id="text">
<?
if($_GET['cPub'] == 'list')
{
if($_GET['cTask'] == 'delete')
{
$CHK = "SELECT * FROM collection WHERE book_id = '$_GET[book_id]'";
$SQL = "DELETE FROM book WHERE book_id = '$_GET[book_id]'";

##FIRST CHECK IT FOR COLLECTION
$COLL= $db->numrows($db->query($CHK));

if($COLL > 0)
{
echo "<p class='msg'><span>You cannot delete BOOK ID = $_GET[book_id]. This record still have $COLL collection data</span></p>";
}
else
{
if($QRY = $db->query($SQL))
{
echo "<p class='msg'><span>Successfully Delete for BOOK ID = $_GET[book_id]</span></p>";
}
else
{
echo "<p class='msg'><span>Error: Delete for BOOK ID = $_GET[book_id]<span></p>";
}
}
}

$SQL = "SELECT * FROM book ORDER BY book_id DESC";
$QRY = $db->query($SQL);
$NUM = $db->numrows($QRY);
$i = 0;
if($NUM > 0)
{
?>
<table width="100%" border="0" cellpadding="4" cellspacing="1" bgcolor="#FFFFFF" id="maintable">
<tr>
<td width="5%" bgcolor="#003366"><span style="color:#FFFFFF; font-weight:bold;">No.</span></td>
<td width="47%" bgcolor="#003366"><span style="color:#FFFFFF; font-weight:bold;">Book Title</span></td>
<td width="24%" bgcolor="#003366"><span style="color:#FFFFFF; font-weight:bold;">Category</span></td>
<td width="10%" bgcolor="#003366"><span style="color:#FFFFFF; font-weight:bold;">Collection</span></td>
<td width="14%" bgcolor="#003366"><span style="color:#FFFFFF; font-weight:bold;">Option</span></td>
</tr>
<?
while($ROW = $db->fetch($QRY))
{
$i++;

?>
<tr>
<td bgcolor="#B7C0FF"><? echo $i; ?></td>
<td bgcolor="#B7C0FF"><? echo $ROW['title']; ?></td>
<td bgcolor="#B7C0FF"><?
$CATROW = $db->fetch($db->query("SELECT * FROM category WHERE category_id = '$ROW[category_id]'"));
echo $CATROW['description'];
?>
</td>
<td bgcolor="#B7C0FF">
<?
##NUMBER OF COLLECTION
$COLLECTION_NUMBER = $db->numrows($db->query("SELECT * FROM collection WHERE book_id = '$ROW[book_id]'"));
echo $COLLECTION_NUMBER;
?>
</td>
<td bgcolor="#B7C0FF">
<a href="ui-collection.php?book_id=<? echo $ROW['book_id']; ?>&amp;keepThis=true&amp;TB_iframe=true&amp;height=250&amp;width=500" class="thickbox" title="View Collection of <? echo $ROW['title']; ?>"><img src="images/zoom16.png" alt="View Collection" width="16" height="16" border="0" /></a>&nbsp;&nbsp;
<a href="?cPub=edit&amp;book_id=<? echo $ROW['book_id']; ?>" title="Edit"><img src="images/edit.png" alt="Edit" width="16" height="16" border="0" /></a>&nbsp;&nbsp;
<a href="javascript:void(0);" onclick="cf=confirm('Are you sure to delete No. <? echo $i; ?> ???');if(cf)window.location='?cPub=list&amp;cTask=delete&amp;book_id=<? echo $ROW['book_id']; ?>';return false;" title="Delete"><img src="images/delete.png" alt="Delete" width="16" height="16" border="0" /></a>
</td>
</tr>
<?
}
?>
</table>
<?
}
else
{
echo "<p>No Query</p>";
}
}
elseif($_GET['cPub'] == 'addnew')
{
?>
<?
if($_GET['Submit'] == 'SUBMIT' && !empty($_GET['title']))
{
##INSERT NEW BOOK
if(!empty($_GET['category_id2']))
{
$choseCat = $_GET['category_id2'];
}
else
{
$choseCat = $_GET['category_id'];
}
$SQL = "INSERT INTO book(title, category_id) VALUES('$_GET[title]', '$choseCat')";
if($db->query($SQL))
{
echo "<p class='msg'><span>New Record Successfully Submited</span></p>";
}
else
{
echo "<p class='msg'>E R R O R !</p>";
}

##GET THE LAST ID FOR BOOK RECORD
$BOOKID = $db->fetch($db->query("SELECT * FROM book ORDER BY book_id DESC"));

##INSERT NEW COLLECTION
for($i=0;$i<=count($_GET['collection_data']);$i++)
{
if(!empty($_GET['collection_data'][$i]))
{
$SQLCOLLECTION = "INSERT INTO collection(collection_data, book_id)
VALUES('".$_GET['collection_data'][$i]."', '$BOOKID[book_id]')";
$db->query($SQLCOLLECTION);
}
}
}
?>
<div id="formM">
<form id="form1" name="form1" method="get" action="">
<input name="cPub" type="hidden" value="<? echo $_GET['cPub']; ?>" />
<label><span>Book Title </span>
<input name="title" type="text" class="inputM" id="title" size="20" />
</label>

<label><span>Category </span>
<div id="contenPanCategory"></div>
<div id="toBeHideCategory">
<select class="inputM" name="category_id" size="1">
<?
$QRYCAT = $db->query("SELECT * FROM category ORDER BY description");
while($ROWCAT = $db->fetch($QRYCAT))
{
?>
<option value="<? echo $ROWCAT['category_id']; ?>"><? echo $ROWCAT['description']; ?></option>
<?
}
?>
</select>
</div>
<span class="note"> (* Your category not listed ? Manage <a href="category-loader.php?cF=Manage&amp;keepThis=true&amp;TB_iframe=true&amp;height=250&amp;width=300" class="thickbox" title="Manage Category">here</a> and <a href="javascript:void(0);" title="Refresh Category List" onClick="refreshCategory()">refresh</a></span>
</label>
<div class="spacer">&nbsp;</div>
<label><span>Collections </span>
<div id="fieldBox">
<div id="submenu">
<div id="icon"><a href="javascript:void(0);" onClick="addFormField(); return false;" title="Add New Collection"><img alt="Add New Collection" src="images/addplus.gif" width="32" height="29" /></a><input type="hidden" id="id" value="1"></div>
</div>
<div id="collection">
<div id="top-box"></div>
<div id="center-box">
<div id="text"><div id="divTxt"></div></div>
<div id="bottom-box"></div>
</div>
</div>
</div>
</label>
<div class="clear"></div>
<label><span>&nbsp; </span>
<div class="spacer"></div><input type="submit" name="Submit" value="SUBMIT" class="buttonM"/>
</label>
</form>
</div>
<?
}
elseif($_GET['cPub'] == 'edit')
{
?>
<?
if($_GET['Submit'] == 'UPDATE' && !empty($_GET['title']))
{
##UPDATE CURRENT BOOK
if(!empty($_GET['category_id2']))
{
$choseCat = $_GET['category_id2'];
}
else
{
$choseCat = $_GET['category_id'];
}
$SQL = "UPDATE book SET title='$_GET[title]', category_id='$choseCat' WHERE book_id='$_GET[book_id]'";
if($db->query($SQL))
{
echo "<p class='msg'><span>Current Record Successfully Updated</span></p>";
}
else
{
echo "<p class='msg'>E R R O R !</p>";
}
}
?>

<?
$SQL = "SELECT * FROM book WHERE book_id = '$_GET[book_id]'";
$ROW = $db->fetch($db->query($SQL));
?>
<div id="formM">
<form id="form1" name="form1" method="get" action="">
<input name="cPub" type="hidden" value="<? echo $_GET['cPub']; ?>" />
<input name="book_id" type="hidden" value="<? echo $_GET['book_id']; ?>" />
<label><span>Book Title </span>
<input name="title" value="<? echo $ROW['title']; ?>" type="text" class="inputM" id="title" size="20" />
</label>

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

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

</div>
</div>
</body>
</html>

Oukeh!!!! I think all hand code was appear on your apache server. Try it with type this URL on your browser:

http://localhost/foldername/index.php

And this is screenshoot of Index.php within load default content

Just click on main menu to try the result of dynamic content.

Screenshoot for Add New Record

Screenshoot for Listing Record

Screenshoot for View Collection Data, using unit interface

Screenshoot for Dynamic Refresh of Collection Data

Feel free to try the demo on my demo page, and do not forget to leave your comment for suggest, critics, report or bug.

Now, you has been successfully to create your Administrator Page to Manage Some Relation Table Using PHP as main programming language and jQuery to give some interactivity result for dynamic form.

Regard, Hairul Azami a.k.a dr.emi

Share on Facebook

As you know, forum is place for your community to discuss about your website or other, and absolutly your website have members. But becarefull, how if your member only want to post spam or junk maybe. You will not have more time to moderate the junk or spam posts.

It explain about, we need personal verification for the register user page. So we must modify the user register page. Actually SMF has a default template for displaying user register, you can found it at: /SMF-Folder/Themes/default/Register.template.php

Just begin from this file, open it and find this line:

if ($context['visual_verification'])

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

<tr>
<td width="40%">
<b>', $txt[82], ':</b>
</td>
<td>
<input type="password" name="passwrd2" size="30" tabindex="', $context['tabindex']++, '" />
</td>
</tr>

Add this code after password table row

$tempPhrase = 'YourSecreetWord';
$_SESSION['temp_phrase'] = $tempPhrase;

echo '
<tr>
<td width="40%">
<b>', $txt[88], ':</b>
<div class="smalltext">', $txt['valid_phrase_description'], '</div>
</td>
<td>
<input type="text" name="valid_phrase" size="30" tabindex="', $context['tabindex']++, '" />
</td>
</tr>

Let’s see this extra code:

$tempPhrase = 'Azami'; ==> YourSecreetWord, will used for session value and this is your answer of Personal Perification
$_SESSION['temp_phrase'] = $tempPhrase; ==> make session value registered

$txt[88] ==> Language array, will used for displaying Personal Verfication Label.
$txt['valid_phrase_description'] ==> Language array, will used for displaying notes or simple question for you new member
name="valid_phrase" ==> a name for your new field

Then how to adding new language array ?? just open Login.english.php that located on /SMF-Folder/Themes/default/Languages/Login.english.php

Then Add this line wherever you want:

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

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

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

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

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

Add this code after these line:

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

The code above will used for session authentication of Personal Perification Answer.

And don’t forget to add “phrase_verification_failed” array string into file: /SMF-Folder/Themes/default/Languages/Errors.english.php

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

It’s DONE!

Upload your new modifiying files into Host. And then you will see the new Personal Verification in User Register Page.

This is my screeshoot of spammer (human) user that trying to register with wrong answer in User Register Page.

Regard, dr.emi

Share on Facebook

So, what next ???

Offcourse, we need this files: ipchecker.php, frame_ip.php, index.php, and jquery framework.

First create ipchecker.php for function handler:

Code:

<?
/**

#
# Auto Checker for IP Network Lifetime
# Author  hairul azami a.k.a dr.emi <webmaster@dremi.info>
# Website http://dremi.info
# License: GPL
#

**/

error_reporting(0);
define("_IMAGES", "images/");
define("_IPROUTER", "192.168.1.1");

function checkIP($ip, $p)
{

//error_reporting(E_ALL);
@set_time_limit(0);

$address = "$ip"; //your public IP
$port = $p; // your IP open port

$fp = @fsockopen($address,$port,$errno,$errstr,10);
stream_set_timeout($fp, 1);
if ($fp)
{
$statusIPport =  "<font color=green>Connected</font>";
$imgTitle = "Connected";
$imgStats = "accepted_32.png";
}
else
{
$statusIPport =  "<font color=#CCCCCC>Disconnect</font>";
$imgTitle = "Disconnect";
$imgStats = "warning_32.png";
}
$info = stream_get_meta_data($fp);
if($info['timed_out'])
{
$statusIPport =  "<font color=#CCCCCC>Time Out</font>";
$imgTitle = "Time Out";
$imgStats = "cancel_32.png";
}

flush();
$checkID = strtoupper(gethostbyaddr($address));
if($checkID != $address)
{
$comname = $checkID;
}
elseif($checkID == _IPROUTER)
{
$comname = "ROUTER";
}
else
{
$comname = "NONAME";
}
echo "
<div style='text-align:center;'>
<img src='"._IMAGES . $imgStats."' alt='$imgTitle' title='$imgTitle' border=0><br>
<strong>$imgTitle</strong><br>
$address:$port<br>
$comname
</dvi>";

}

checkIP($_GET['ip'], $_GET['port']);
?>

The function will used as checker for each of variable IP and PORT

Second, create an jQuery Auto Load for file, called as frame_ip.php

In this file, you must load jQuery framework to complete javascript function bellow

Code:

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

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

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

While ip and port was defined in iframe URL, PHP function checkIP($ip, $p) will work.

I use this line for set the time while load ipchecker.php from first time to next load progress.

setTimeout("getRandom();", 10000*2);

The last is index.php

This file will give you GUI of all process

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

While index.php loaded, frame_ip.php will work as “data sender” from URL, so we can check it in checkIP function.

Well this is screenshoot while you access index.php from http://localhost/[foldername]/index.php

OK, I think it’s really good time to see you here, thanks for read

If you find any bug / report, just comment here ..

Share on Facebook

Yang lu perlukan adalah:

-Photoshop
-HTML+CSS
-jQuery Ajax
-PHP

Part I Designing Website Layout

Buka Photoshop lu, bikin ukuran kanvas kaya gini:

Pilih Rectangle Marquee Tool, bikin objek header ke gini:

Apply beberapa layer style :

Liat dlu hasilna

Sekarang bikin garis berwarna putih make single row marquee tool, antara gradien dan drop shadow. fill line make warna putih

Gunakan rounded rectangle tool bwat mbikin navigation button, gunakan radius sesuai keinginan lu

apply layer style

Semua gradien ada dalam paket download tutorial na

Pencet [CTRL+Click] pada layer navigation button, bwat mbikin seleksi sekitar button.

Pilih seleksi Eliptical Marquee Tool dengan option option : Intersect with selection. Truzzz buat seleksi oval diatas seleksi sebelumna

Lu bakalan dapet hasil seleksi ke gini

Pencet [CTRL+D] bwat Deselect

Tros transform objek na vertikal, dengan mencet [CTRL+T] -> Flip Vertical

Pilih menu Filter > Blur > Gaussian Blur. Kasiin 2 px radius.

dan ubah blending layerna menjadi Overlay

Kasi text button na juga

Lu bisa group ksmua layer navigasi ke dalam satu group, dan duplikat gorup na mnjadi beberapa group

Hampir selesai layoutna, kasiin objek icon dan text sebagai title web na

Terakhir bikinin footer dengan cara sederhana kaya mbikin header

Review dlo hasil akhir layout na

Part II Slicing Images

Bagian ini kita bakalan ambil gambar tertentu saja, ambil bagian na dengan slicing tool yang nantina bakalan diperlukan bwat bikin code CSS na

Pertama adlah slice navigasi

Pilih File > Save for Web and Device

Inget ye: pilihna nyang Selected Slice dowank

Selanjutna terusin ke slice berikutna, kaya bg-header, bg-footer dan logo

Jadi lu bakalan dapet beberapa images yang dibutuhkan dalam coding CSS na

Part III Make HTML+CSS Code

Bwat mbikin web lu knceng di load saat dibuka di browser, Less Table adaalh salah satu cra terbaik

Gw paling suka bagian ini, buka Dreamweaver lu, bikin file CSS

Nah ini code CSS na:

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

save dan kasi nama style.css

sekarang kite bakalan mbikin index.html

dan ini code ma:

<div id="mainPan">
<div id="bodyPan">

<div id="headerPan">
<img src="images/logo.gif" class="logo" />
<div id="tabs">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Photoshop</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">PHP</a></li>
<li><a href="#">AJAX</a></li>
</ul>
</div>
</div>

<div id="contenPan">
<h2>Heloo....</h2>
<p>This is main Content <a href="#">[link]</a></p>
<div class="spacer">&nbsp;</div>
<div class="spacer">&nbsp;</div>
<div class="spacer">&nbsp;</div>
<div class="spacer">&nbsp;</div>
<div class="spacer">&nbsp;</div>
<div class="spacer">&nbsp;</div>
<div class="spacer">&nbsp;</div>
</div>

</div>

</div>
<div id="footerMainPan">
<div id="footerPan">
&copy; 2008 Web Design Ajax jQuery.
<a href="http://www.psdremi.co.cc" target="_blank">
PSDREMI.CO.CC
</a>
</div>
</div>

Gw rasa cuma sgitu code na, gw yakin lu bakalan familiar kok

Part IV Adding jQuery Ajax Scripts to Load Contents

Lu pada tau jQuery kan ? kalo belom, baca pengenalan tentang jQuery dlo yak di web na

Pada bagian ini kita butuh jQuery script library, sedangkan plugin ga diperlukan.

Cuma kasi baris ini di HTML na, bwat ngeload jQuery Javascript Library na

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

dan kasi code javascripts bwat mbikin fungsi untuk meload external content pada contentPan Div

<script type="text/javascript">
$(function(){
$("#ajax_display").ajaxStart(function(){
$(this).html('<p><img src="images/ajax-loader.gif" /></p>');
});
$("#ajax_display").ajaxSuccess(function(){
$(this).html('');
});
$("#ajax_display").ajaxError(function(url){
alert('jQuery ajax is error ');
});
});
function loadContent(id) {
$("#contenPan").hide();
$("#contenPan").load("php-loader.php?cPub="+id+"", '', callback);
}
function callback() {
$("#contenPan").show();
}
$(document).ready(loadContent(id));
</script>

Simple line:

  $(this).html('<p><img src="images/ajax-loader.gif" /></p>');

/*this line will load the ajax-loader.gif while progress on request*/

dan code berikut ini diperlukan bwat memanngil data content

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

php-loader.php adalah file PHP yang bertugas memberikan value dalam bentuk HTML, value ini akan direquest oleh jQuery Ajax untuk di load ke contentPan Div

Kalo lu liat pada akhir variable GET na berupa variable cPub, maka kita bakalan bikin file PHP yang menggunakan kondisi pemilihan variable GET, ni code na:

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

Gw pake sleep(2) bwat mensimulasikan loading content yang cukup lama

Kayakna smua udah lengkap, tinggal lu upload ke webserver biar PHP na bekerja. ni screen shoot na

Tutorial ini gw input juga dalam bahasa inggris di PSDREMI.CO.CC dan Good-tutorials.Com

Best Regard, dr.emi

Share on Facebook

dreFileBrowser v.1.0

Make a beautifull File Browser with jQuery File Tree and EditArea

© dreFileBrowser V.1.0 2008 Developped by dr.emi

Setelah sukses dengan produk gw sebelumnya dreDSync V.1.0, kali ini gw melaunching sebuah open source sederhana dreFileBrowser V.1.0

Ini merupakan open source, dimana lu boleh memodif script na, selama lu mencantumkan author na:

Author: hairul azami a.k.a dr.emi
Author Link: http://www.dremi.info
Author Contact: webmaster@dremi.info

Menggunakan dreFileBrowser:

Extract paket RAR ini ke dalam root webserver lu, lalu ubah setting configurasi pada dfb-config.php

_ABSOLUTE_PATH = defini base path untuk instalasi dreFileBrowser
_ROOT_TREE = folder mana yang akan di scan ?
_MODEM_SPEED = definisi untuk modem speed, menentukan transfer rate

$allowed_extensions_to_preview = var array untuk extensi file yang dapat di preview
$allowed_extensions_to_edit = var array untuk extensi file yang dapat di edit

Gw sadar script di dalamnya sangat jelek tapi marilah berfikir bagaimana mengimplementasikan sebuah Aplikasi yang berguna untuk orang banyak.

Pada versi berikutnya gw bakalan nambahin beberapa fiture nya, kaya Upload, download, me remove, dan mengeksekusi perintah command line layaknya bekerja pada DOS Operating System.

Sebenernye gw saat ini sibuk banget, udah ga smpet lagi bikin bikin tutorial, tapi gw masih inget kalian, fun, member, dan pecinta www.dremi.info. Jadi gw kasi lu suprise aplikasi dreFileBrowser V.1.0

ENJOY IT !!!! KEEP LEARN AND SHARE, DO NOT EXPOSE BUT PROVE YOUR SKILL !!!

Best Regard, dr.emi

Share on Facebook

Memperkenalkan dreDSync V.1.0 Produk Terbaru dr.emi

What is dreDSync V.1.0 ?

baca (DE-ER-E DE-SYNC)

dreDSync V.1.0 merupakan karya gw ke-sekian kalinya untuk dunia IT, berfungsi sebagai Data Syncronizer yang berbasis pada komunikasi Flat File TXT dan Socket Detection. Gw bikin menggunakan bahasa pemrograman PHP dan terinspirasi dari project terbaru gw CBT of TNI.

What for dreDSync V.1.0 ?

dreDSync V.1.0 diciptakan untuk mensyncronkan data pada server dan client, yang dalam hal ini di implementasikan pada project CBT of TNI

What is the main Concept ?

Konsep utamanya gw peroleh dari Andyka GloboCode.Com saat CBT of TNI project mengalami kendala penghematan bandwidth, karena menggunakan File file Multimedia.

Kami baru saja mendapat project dari TNI, membuat System Pembelajaran Multimedia Berbasis Web, yang diperuntukkan bagi siswa siswa TNI-AD seindonesia. Tentunya karena berupa System Pembelajaran Multimedia, file file nya terdiri dari file multimedia dan file file lainnya, yang kedepannya sudah pasti akan memakan banyak bandwidth kalo lagi dipake !

Dan inilah strategi kami :

CBT memiliki struktur file yang terdiri dari 2 jenis:

First, Multimedia files (ie: audio, video, and another big filesize) yang akan ditempatkan pada Server dan Client sebagai File Permanent

Second, Miscleneous files (ie: JPG, PNG, ZIP, XML anf TXT). File file ini akan di update sesuai jadwal kulikulum yang telah ditetapkan

Dari keterangan singkat diatas, gw perlu sebuah skrip downloader otomatis, untuk mendeteksi Last Modified File file Miscleneous yang ter update saat mendatang. Secara teknis dapat digambarkan sebagai berikut:

Saat Administrator CBT membuat schedule baru update data, dia harus membuat schedule pada Administrator dreDSync V.1.0 yang telah disediakan. Dengan demikian fungsi scanning all directories pada aplikasi dreDSync V.1.0 akan mendata keberadaan lokasi source file terbaru yang telah diupdate sebelum menginput schedule. Pendataan ini dilakukan oleh server dengan menempatkan log download list nya pada sebuah file TXT, untuk kemudian akan “menembaki” seluruh client menggunakan Socket Connection, sebagai pertanda File Update terbaru telah siap di download oleh masing masing client. Dengan demikian proses Syncronisasi data dapat dimulai.

Error handling while Syncronizing Data

Kasus DisConnect

Sebuah aplikasi tentunya akan selalu memiliki Bug, dengan demikian error handling pun gw siapkan, menjaga suatu saat terjadi. Dalam kasus ini yang dikhawatirkan adalah putus koneksi dan mati lampu/Client nost respon, sehingga saat terjadi syncronisasi data besar kemungkinan belum selesai diproses.

Untuk itu gw memberikan catatan kecil untuk setiap client, jika data nya masih belum sama dengan downloadlist pada server maka pesan not complete akan dituliskan client pada system lognya, dengan demikian saat client kembali di running, maka secara otomatis proses syncronisasi data akan dilanjutkan mengacu kepada downloadlist yang tersedia sebelumna. Sehingga pada dreDSync V.1.0 ini gw tidak menghapus system log pada server untuk 1 minggu kedepan, dan hal ini akan berdampak positif bagi client yang belum selesai mendownload data masih punya kesempatan untuk mendownload nya kembali. Tapi jika keadaan baik baik saja, client akan menuliskan pesan complete pada system lognya.

Processing Screen Shoot

Running on server

Running on Client

Syncronizing Data on Progress

jQuery Panel Menu Administrator

jQuery Block UI for Login Form

CPanel Administrator for Schedule

CPanel Administrator for SysLog and Config

CPanel Administrator for Client Register

Share on Facebook

ada empta fungsi php yang bakalan kita gunakan, sederhana kok:

Code:

array() //menampung data gambar di fiel text ke dalam sebuah rentetan data beruntun

file()
//sama dengan readfile(), bedanya kalo readfile() menggunakan buffer,
//kalo file() menggunakan tampungan data array

explode()
//menghancurkan string pemisah, pada file text, bisa lu tentuin sendiri
//nantina string pemisah ini akan dihilangkan

foreach()
//artinya untuk setiap
//jadi setiap string dalam file txt bakalan di proses sesuai eksekusi perintah selanjutnya

echo //mencetak hasil keluaran proses data

code na ke gini :

Code:

<?
$filename = "photos.txt";
$photodata = array();

$file=file($filename);
foreach($file as $line)
{
// ilangin pemisah, disini tidak perlu lagi menggunakan array
$photodata = explode('|',$line);
echo "
<a href='".$photodata[0]."' title='".$photodata[2]."'><img style='border: solid 4px #C0C0C0; padding: 2px;' src='".$photodata[1]."' alt='".$photodata[2]."' /></a>";
}
?>

pertama file text bakalan di tntuin dlu sebagai photo.txt, tros pembacaan file photo.txt dimulai, baru masing2 string dalam file di pisahkan melalui fungsi foreach, menjadi $line. $line merupakan variable single setelah di pecah.

kalo string na dah dipecah, maka pemisah di hilangkan untuk mengambil data aslina, yakni: thumb1.jpg s/d thumb4.jpg dan file1.jpg s/d file4.jpg

baru kemudian di cetak oleh perintah echo !

DONE .. SELESAI ..

Share on Facebook

misalna saja, kita hanya diizinkan mengirmkan email sejumlah 600 email dalam 1 jam…

dengan bantuan perhitungan microtime dan sleep functions dalam PHP, kita dapat melakukanna

Start DatTime Code:

Code:

function getStartTime()
{
$mtime = microtime();
$mtime = explode(" ",$mtime);
$mtime = $mtime[1] + $mtime[0];
$starttime = $mtime;
}

fungsi diatas berfungsi untuk mengambil timing awal saat pengiriman email dimulai

dan ini mailer na:

Code:

$maxmsgs = 10; // kirim max 10 email pe menit, jadi kalo 1jam berarti 10 x 60 = 600 email perjam

for($i=1; $i<$_POST[jumlah]; $i++)
{
global $starttime, $maxmsgs;

$a=$i.$_POST['dari'];

@mail($_POST['dari'], $_POST['subjek'], $_POST['pesan'],
"Return-path: < $_POST[kepada] >\n".
"Received: Server Penjahat\n".
"From: $a < $a >\n".
"To: Yang Gw Sikat < $_POST[kepada] >\n".
"Date: ". date("D, M d Y H:i:s")." +0700\n".
"X-Mailer: BlackCat Hacker\n".
"X-Priority: 1\n".
"Message-Id:".rand()."");

$mtime = microtime();
$mtime = explode(" ",$mtime);
$mtime = $mtime[1] + $mtime[0];
$endtime = $mtime;
$totaltime = ($endtime - $starttime);

if($i%$maxmsgs==0)
{
$sleeptime = 60-$totaltime;
// menunggu dalam beberapa detik
sleep($sleeptime);
getStartTime();
continue;
}
elseif(($totaltime>=60) && ($i%$maxmsgs!=0))
{
// dalam 1 menit terkirim 10 email, lalu script emailer akan distirahatkan selama 15 detik, baru diset ulang perhitungan waktu kirim email
sleep(15);
getStartTime();
continue;
}
}

echo "<p>Beres Bos !!! <a href='$_SERVER[PHP_SELF]'>Kembali</a></p>";

jadi lengkapna kalo dah make form bisa ke gini:

Code:

<!doctype html public "-//W3C//DTD HTML 4.0 //EN">
<html>
<head>
<title>Kirim email jumlah tertentu dalam satu jam</title>
</head>
<body>
<H2>Kirim Email</H2>
<form name="emailku" method="post" action="">
Dari:<BR>
<input type="text" name="dari">
<BR><BR>
Kepada:<BR>
<input type="text" name="kepada">
<BR><BR>
Jumlah:<BR>
<input type="text" name="jumlah">
<BR><BR>
Subjek:<BR>
<input type="text" name="subjek">
<BR><BR>
Isi Pesan:<BR>
<textarea name="pesan"></textarea>
<BR><BR>
<input type="submit" name="submit" value="Kirim !!!">
</form>

<?
if(isset($_POST['submit']))
{

echo "<p><img src='images/ajax-loader.gif'></p>";

function getStartTime()
{
$mtime = microtime();
$mtime = explode(" ",$mtime);
$mtime = $mtime[1] + $mtime[0];
$starttime = $mtime;
}

$maxmsgs = 10; // kirim max 10 email pe menit, jadi kalo 1jam berarti 10 x 60 = 600 email perjam

for($i=1; $i<$_POST[jumlah]; $i++)
{
global $starttime, $maxmsgs;

$a=$i.$_POST['dari'];

@mail($_POST['dari'], $_POST['subjek'], $_POST['pesan'],
"Return-path: < $_POST[kepada] >\n".
"Received: Server Penjahat\n".
"From: $a < $a >\n".
"To: Yang Gw Sikat < $_POST[kepada] >\n".
"Date: ". date("D, M d Y H:i:s")." +0700\n".
"X-Mailer: BlackCat Hacker\n".
"X-Priority: 1\n".
"Message-Id:".rand()."");

$mtime = microtime();
$mtime = explode(" ",$mtime);
$mtime = $mtime[1] + $mtime[0];
$endtime = $mtime;
$totaltime = ($endtime - $starttime);

if($i%$maxmsgs==0)
{
$sleeptime = 60-$totaltime;
// menunggu dalam beberapa detik
sleep($sleeptime);
getStartTime();
continue;
}
elseif(($totaltime>=60) && ($i%$maxmsgs!=0))
{
// dalam 1 menit terkirim 10 email, lalu script emailer akan distirahatkan selama 15 detik, baru diset ulang perhitungan waktu kirim email
sleep(15);
getStartTime();
continue;
}
}

echo "<p>Beres Bos !!! <a href='$_SERVER[PHP_SELF]'>Kembali</a></p>";

}
?>

</body>
</html>

bijimane Huh?? dicoba yakk….

Share on Facebook

Sebenernye kalo nyang pernah gw baca di forum phpbuilder.com

dengan menggunakan strip tags aja dah aman, tapi ada baikna kalo security form di lipatgandakan. mudah2an si berguna walopun fungsi bwatan gw ni cuma beberapa baris

Code:

function wordFilter($strToFilter)
{
$strToFilter = str_replace("'", "", $strToFilter);
$strToFilter = str_replace("  ", " ", $strToFilter);
$strToFilter = str_replace('"', "", $strToFilter);
$strToFilter = str_replace("|", "", $strToFilter);
$strToFilter = str_replace("\'", "", $strToFilter);
$strToFilter = str_replace("\"", "", $strToFilter);
$strToFilter = str_replace("\\", "", $strToFilter);
$strToFilter = str_replace("/", "", $strToFilter);

return $strToFilter;
}

contoh penggunaan:

Code:

echo 'String lu: ';
echo $str = "Thank\"s   'Brother' !";
echo '<BR> Dengan Filter akan menjadi: ';
echo wordFilter($str); //hasilna: Thanks Brother !

Share on Facebook

http://www.trafficracer.com/auto-surf.php?user=31251

nah ntu bisa dibikin sederhana pake META REFRESH, tapi kali in igw gabungin make PHP untuk merandom halaman na…

Simak yak.

Kita ga pake Database, langsung make Array untuk halaman yang bersangkutan ajah. Disini gw pake Frame bwatmenampilkan halaman hasil random na:

ni bwat index.html na

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Tutorial Photoshop, SEO, CSS</title>
</head>

<frameset rows="120,*" frameborder="yes" border="0" framespacing="0">
<frame src="top.php" name="topFrame" scrolling="No" noresize="noresize" id="topFrame" title="topFrame" />
<frame src="target.html" name="mainFrame" id="mainFrame" title="mainFrame" />
</frameset>
<noframes><body>
</body>
</noframes></html>

tros bikin masing masing source bwat frame top dan target.

File top.php

Code:

<html>
<?
function recoverPass($length)
{
$temp_recpass="";
srand ((float) microtime() * 10000000);
$input = array (
"http://dremi468.blogspot.com",
"http://www.csslovers.co.cc",
"http://www.dremi.info/tutorial/photoshop/merancang-website-full-abis.html",
"http://www.dremi.info/tutorial/photoshop/sony-ericsson-logo.html"
);
$rand_keys = array_rand ($input, 24);
for ($i=0; $i<$length; $i++)
{
$temp_recpass = $temp_recpass . $input[$rand_keys[$i]];
}
return $temp_recpass;
}
$temp_recpass = recoverPass(1);
if($temp_recpass=='') { $pageLoad = "http://dremi468.blogspot.com"; } else  { $pageLoad = $temp_recpass; }
$randRefreshTop = rand(60, 120);
$randRefreshBot = rand(30, 60);
?>
<head>
<title>Refresh JavaScript Example</title>
<META HTTP-EQUIV="refresh" CONTENT="<? echo $randRefreshTop; ?>">
<SCRIPT LANGUAGE="JavaScript">
<!--
function refreshFrame() {
parent.mainFrame.location.href = '<? echo $pageLoad; ?>';
setTimeout('refreshFrame()',1000*<? echo $randRefreshBot; ?>);
}

refreshFrame();
//-->
</SCRIPT>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><style type="text/css">
<!--
body,td,th {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
color: #000000;
}
body {
background-color: #FFFFFF;
margin-left: 0px;
margin-top: 11px;
margin-right: 0px;
margin-bottom: 0px;
}
-->
</style></head>

<!--
Use the "onload" event to start the refresh process.
-->
<body>
<center>
Page Load: <strong style="color:#0099FF"><? echo $pageLoad; ?></strong> Top: <strong style="color:#0099FF"><? echo $randRefreshTop; ?></strong> & Bottom: <strong style="color:#0099FF"><? echo $randRefreshBot; ?></strong>
<br>
<?

if ($HTTP_SERVER_VARS["HTTP_X_FORWARDED_FOR"] != ""){

// for proxy

$IP = $HTTP_SERVER_VARS["HTTP_X_FORWARDED_FOR"];

$proxy = $HTTP_SERVER_VARS["REMOTE_ADDR"];

$host = @gethostbyaddr($HTTP_SERVER_VARS["HTTP_X_FORWARDED_FOR"]);

}else{

// for normal user

$IP = $HTTP_SERVER_VARS["REMOTE_ADDR"];

$host = @gethostbyaddr($HTTP_SERVER_VARS["REMOTE_ADDR"]);

}

echo "IP: $IP | PROXY: $proxy | HOST: $host <BR>";

?>
<br>

<a href="http://dremi468.blogspot.com/2008/06/creating-corporate-writing-style.html" target="_blank"><img src="http://i175.photobucket.com/albums/w126/hairulazami/banner%20468/seo-articles468.gif" border="0" alt="Photobucket"></a>

</center>
</body>

</html>

contoh diatas array halaman URL lu bisa tambahin sendiri.

nah ni bwat target.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=iso-8859-1" />
<title>Untitled Document</title>
</head>

<body>
</body>
</html>

kalo lu liat target.html halaman na kosong melompong, nah itu memang tugasnya hanya bwat nerima hasil load halaman yang ditampung dalam array pada Top Frame.

Cobain yak… asik kok..

Share on Facebook

Nah nih ada tutorial yang sedikit menyentuh perasaan kaum hawa..hakhak

Ambil gambar objek yang sesuai / nuansa kelembutan…hihi

Gue rapiin bagian pinggirnya pake eraser tool biar agak lembut dan menyatu dengan backgroundnya.

Nah ubah warna latar menjadi Pink

Ouke buat seleksi seperti pada gambar dibawah:

Kasi gradient dengan warna pink muda ke putih

Masih pada seleksi area, Pilih Filter > Distort > ZigZag. Kasi nilai seprti pada gambar:

Tekan [CTRL+F] sekali jika efek filter zig zag nya masih kurang.

Hapus pada area pembatas gradasi untuk merapihkan nya

Bikin Brush kupu – kupu

Nah untuk hiasannya, bikinin aja brush preset kupu – kupu..hihi

Ouke langkahnya:

–o~o– Bwat dokumen baru ukuran nya kira-kira 200 X 190 Pixels

–o~o– Dengan Shape Tool ciptakan gambar hati dan kasi sedikit bevel style dengan gradasi pink tua ke pink muda.

–o~o– Pilih [CTRL+A] untuk select-All. Pada menu Edit pilih Define Brush Preset.

Ketik naanya misalkan my heart.. hihi

Nah balik lagi ke dokumen utama nya, perhatikan pada bagian bawah listing Brush akan ditambahkan brush preset baru bernama “my heart”.

Tekan [F5] untuk pengaturan setting brushnya.

Atur seperti pada gambar:

Nah tinggal lu atur aja ukuran brushnya dan tarik / grab pada bagian yang lu suka,mainkan imajinasi lu.. hehe

Nah ni hasil jadina..

Share on Facebook

Lu bikin dulu gih dokumen barunya..backgroundnya #586b7f

Bikin path dengan rectangle tool, kemudian klik path nya dengan path selection tool sehingga titik2 pathnya keliatan.

Nah lu ilangin / delete salah satu titik pathnya (titik path kanan atas) dengan delete Anchor point tool , lalu tambahkan satu titik dengan menggunakan Add anchor point pada garis datar yang terbentuk setelah mendelete titik kanan atasnya. Lalu tarik titik nya ke kanan atas, sehingga terbentuk lengkungan path baru.

Nah dengan menggunakan Convert point tool , edit lah sisa titik path lainnya. Sehingga terbentuk lengkungan oval seperti pada gambar.

Kalo belum sesuai dengan imaginasi lu, tinggal di geser2 aja titik pathnya, kalo masih kegedean tinggal lu transform aja yak. Ato kalo salah tinggal di undo [CTRL+ALT+Z], sampai bentuk seperti ini.

Ubah nama layernya , misalkan “dasar logo” . Lalu kasi Layer > Layer Style

Gradient Overlay

Inner Glow

Drop Shadow

Kasi sedikit gradient transparent putih di bagian atasnya,
ubah layer opacitynya menjadi 10 %

Bikin bidang baru dengan Elips Tool di tengah bidang dasar Oval, dengan nama layer “Elips”. Kasi Layer Style

Gradient Overlay

Bevel & Emboss

Inner Glow

Outer Glow

Inner Shadow

Tambahin tranparent Gradient putih di bagian atas nya (Elips).

Tambahkan satu gradient transparent putih lagi , tapi kali ini bidang gradienntnya lebih kecil, kira2 setengan dari transparent sebelumnya. Lalu kasi Layer Style Gradient Overlay

Tambahin Text huruf “e” di tengah layer dasar logo. Dengan jenis font COLONNA MT.

Lanjut ke bagian cincin overlay. Bikin layer baru dengan nam “cincin overlay” di bawah layer Elips.

Dengan Eliptical Marquee Tool Buat lah Stroke 4 pixels berwarna putih.

Ubah Mode Layer ke Overlay 100 %, Duplikat Layer cincin overlay 1 x.

Nah jadi dah!!

Share on Facebook

Lu mulai dee bwat dokumen barunya..

Bikin bidang oval, ukuran sesuai selera lu..

Kasi Metal layer style …

dan Stroke Color #000000 , 2 pixels

Langkah selanjutnya, Lu [CTRL+Click] pada layer oval lu untuk membentuk seleksi…

Setelah tercipta seleksi, Pilih eliptical selection tool, atur setting nya :

– Mode : “Substract from Selection”

– Style : Fixed Size 150 pixels

Nah lu tinggal klik 2 aja deh bagian 2 seperti gbr dibwah ini:

Nah nantinya akan terbentuk seleksi seperti dibawah ini:

Tekan [CTRL+C] dan beralih ke Panel Channel, Bikin Channel baru dengan mengklik icon Create New Channel, ubah nama channelnya misalkan “alphaku” – dan Tekan [CTRL+V] untuk mempaste objek seleksi.

Ikon Create New Channel Pada Panel Channel

Alpha Baru yang tercipta

Nah lu Tekan dulu deh [CTRL+D] untuk deselect area.

Masih pada channel alphaku
Pilih Filter > Blur > Gaussian Blur : 15 px

Lanjut lagi, tekan [CTRL+L] untuk mengatur Levelnya, kasi setting sesuai gambar :

Kalo udah klik OK.

Nah sekarang lu [CTRL+Click] pada layer Alpha Channel “alphaku” untuk mendapatkan seleksi channel..

Tekan [CTRL+C], lalu berpindah ke Panel Layer biasa. Buat Layer baru dengan nama “layout bg”, Pilih Select > Modify > Contract : 10 px. OK

Lalu Pilih Edit > Paste Into.

Pada layer “layout bg” kasi layer Stye

Hasil sementara …

Lanjut, Tekan [CTRL+Click] pada Layer “layout bg” , bikin layer baru dengan nama layer “metal panel”, pilih Select > Modify > Contract 2 px. Tekan [ALT+Backspace] untuk mewarnai bidang dengan warna putih..

Kasi style pada layer “metal panel”

Hasilnya ..

Nah kalo layout dasarnya dah lu bikin..sekarang tinggal lu tambah2in pake pen tool untuk atribut2 lainnya..

Pilih. Rounded Rectangle tool, bikin bidang persegi..di bagiian atas untuk panel display..Gunakan Pen tool selection

untuk menampilkan area path vectornya..

Dengan Add Anchor Point tool

tambahkan titik – titik path pada bagian yang ditanda merah.

Dan tarik keatas mengikuti arah panah.

Perhatikan: Setelah menambah titik path pertama (atas) , langsung digeser ke atas sesuai arah panah , nah baru lu bikin titik path yang kedua (bawah).

Ok kasi aja layer style..nya: sama kaya layer style pada layer “layout bg” , cuman lu ganti gradient overlaynya dengan settign dibawah:

Kasi text “FUCK M I L I T E R I S M E” pada layer panel display. (terispirasi dari kebencian penulis pada sistem yang ada di sekolah pemerintahaan yang baru2 ini kembali memakan korban.

Nah kembangkan kreativitas lu..untuk membuat tombol2 lainnya..

Gue pake selection tool untuk bikin tombol2nya dan dengan Font style Visitor 2 (download disini)

Hasil nya kaya gini niii..

Woke 2 dah selesai , semoga bermanfaat..

Share on Facebook

Date Function dalam PHP
Cara untuk nampilin jam & tanggal Ala PHP

Halo netter semuanya, khususnya buat yang ngisi komen trus nanyain cara nampilin jam & tgl di web (chairuddin). untuk selanjutnya bagaimana kalo kita bisa ngobrol di Forum aja , setuju ?

Caranya sederhana saja, aku pake bahasa pemrograman PHP (Personal Home Page) aja.

Buka PHP Editor kamu, buat dokumen php baru.

Pendahuluan:
Dalam PHP ada fungsi yang telah disediakan yakni fungsi date(_date_string_format);

coba ketik baris ini di php editor kamu:

Nama File: misalkan "tanggal_dan_jam.php"

Skripnya:

<HTML>
<HEAD>
   <TITLE>
   Aku sedang Belajar menampilakn fungsi tanggal & waktu dalam PHP
   </TITLE>
</HEAD>
<BODY>

<? echo date("d-m-Y H:i:s"); ?>

</BODY>
</HTML>

Sederhana bukan?

Kamus nya:

– <? tag pembuka skrip PHP, bisa juga pake <?PHP

– ?> tag penutup skrip PHP

– echo –>> perintah menampilkan hasil keluaran yang disusun dalam halaman, diadopsi dari perintah print dalam bahasa C++

– date("d-m-Y H:i:s") –>> fungsi bawaan yang telah disediakan bahasa PHP.

– d –>> karakter hari

– m –>> karakter bulan

– Y –>> karakter tahun (empat digit, misalkan: 2008), kalo mau dua digit: pake y kecil, contoh date("d-m-y");

– H –>> karakter jam (Hour) dengan format 24 jam, kalo pake format 12 jam gunakan h kecil, contoh date("d-m-Y h:i:s");

– i –>> karakter menit (minute)

– s –>> karakter detik (second)

– ; tanda titik koma merupakan pointer dalam kompiler untuk mengetaui batas akhir seuah perintah skrip.

Kalo ada yg ditanyakan silahkan replay Tips ini di forum sederhana dremi.info :
http://www.dremi.info/ses_forum.php?cPub=viewTopic&id=28

Share on Facebook