Prikituw!!! gw awali selamat datang dr.emi wakakakakakaka .. slamat datang kok ama diri sndiri..

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

Popularity: 70% [?]

You may also like

• Building Administrator Manager for Table Relation Using PHP and jQuery
• Web 2.0 Layout With CSS Part-4
• Web Design Layout Plus Implementasi jQuery Tab Content
• Design Form Smooth Shadow [dr.emi]
• Membuat Box Style Link Cantik ala dr.emi dengan CSS
• Beautifull Form dr.emi with CSS
• Semantic Code untuk mengoptimize HTML Web 2.0
• 59 CSS Tab Design Sample
• CSS Tab Designer v1.0
• CSS Horizontal Hover Menu