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

As you read on this link, GnomePM was last updated in 17/09/2007

http://si.itb.ac.id/~abduh/GnomePM/download.html

Contact me to get password list! and unprotected GnomePM.xls

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

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

Pertama siapkan dulu Dreamweaver lu…

Dokumen HTML Frame

Bwat Dokumen baru HTML , dengan memilih File > New , Pilih Basic Page dan HTML pada window yang muncul. (Mahap kalo windownya transparan, alnya itu dari Skin WinBlind nya, hihi gue suka Skin Transparan nya)

Klik OK kalo udah.

Nah Simpan dulu dokumen barunya, File > Save .. namanya frame.html

Oke sebagai contoh lu bikin dulu content halaman untuk framenya, misalkan urutan sebuah Link satu, dua, tiga, dst…Gunakan [SHIFT+ENTER] untuk berpindah baris kebawah (<BR>)

Masing-masing kasi Link “#” / trserah lu pada Panel Properties di bawah. Sebelumnya Blok dulu text yang akan dikasi Link.

Nah kalo dah selesai, Save lagi halaman nnya [CTRL+S]

Dokumen HTML Index

Langkah selanjutnya bwat satu dokumen baru lagi, dengan nama index.html

Pindah ke Tab CODE perhatikan Source code antara <BODY> dan </BODY>

Untuk pertama kalinya ktik code awalnya “<if” maka akan muncul secara otomatis, list source code yang telah disediakan Dreamweaver, lalu pilih “iframe” , tekan spasi dan ketik property2nya seperti: align, frameborder, marginheight, marginwidth, height/width, dan src untuk memanggil lokasi halaman yang akan ditampilkan dalam Frame.

Saat Option Browse muncul, Tekan [ENTER] untuk memilih file framenya

Klik Ok jika sudah dipilih pada Window Filenya.

Jadi Uraian Source Code INNER FRAME sementara nya seperti ini:

<iframe align="left" frameborder="0" marginheight="0" marginwidth="0" height="300" src="frame.html">

Nah terakhir, tinggal menutup script HTML IFRAME nya , dengan mengetik, </IFRAME> pada baris selanjutnya. Pada Dreamweaver 8 kalo mau nutup skrip, cukup dengan mengetik “</” saja maka akan muncul </IFRAME> dengan otomatis, cerdas bukan Dreamweavernya.

Ini Script akhirnya:

<iframe align="left" frameborder="0" marginheight="0" marginwidth="0" height="300" src="frame.html">
</iframe>

Woke, lu tinggal Save lagi halaman index.html nya, dan tekan [F12] untuk mencobanya di Browser.

Kalo mau liat area framenya, lu tinggal modify aja page frame.html nya

Modify > Page Properties

Atus sesuai selera lu

Tampilan di Browser ( background frame.html gue ganti menjadi hitam)

Share on Facebook