Tutorial Script Web Programing PHP, Javascript, Ajax, HTML, CSS, MySql: script

Tampilkan postingan dengan label script. Tampilkan semua postingan

2 April 2011

Kumpulan Demo Tutorial Contoh Script Ajax

# Test Ajax Browser Suport
# Sugest (Ajax)
# miniChat v.01 (Ajax)
# Coment with Ajax
# ComboBox (Ajax)
# ComboBox v.02 (Ajax) (Revisi)
# Loading Page (Ajax)

26 Maret 2011

Demo Tutorial Contoh Script Ajax Loader Load Content/Page

Kali ini saya akan memberikan contoh script untuk menampilkan image atau gambar loader (gambar proses loading) yang dapat digunakan pada saat kita menjalankan

Ajax

saat menunggu hasil atau response dari request ajax yang dijalankan.
Langsung aja script nya:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Demo Tutorial Contoh Script Ajax Loader Load Content/Page @ catment.blogspt.com </title>
</head>
<body>
<style>
#loading
{
display:none;
position:fixed;
top:0%;
left:50%;
width:65px;
height:auto;
}
</style>


<div id="loading">
<font color="#CC00FF" size="4"><b>Loading...</b></font><img src="loading.gif" alt='..Loading..' />
</div>


<div id="content">
Teks awal sebelum file teks.php di load
</div>
<input type="button" value="Load File" onclick="load_page();" />
<script type="text/javascript" language="javascript">

</script>
</body>
</html>

Pada contoh script diatas ajax merequest halaman teks.html sebagai contoh halaman teks.html:

Ini adalah isi dari file teks.txt yang di load menggunakan ajax.
<br />
<img src="baner.png" alt="banner" />

Hasil dari tutorial ini dapat anda coba di http://catment.co.cc/demo/ajax_loading dan download script disini.
Terima kasih, semoga tutorial ini bermanfaat.

Untuk konsultasi, tanya-tanya tentang web programming, php, ajax, mysql, javascript, html, script bisa komen disini.
Untuk proyek atau tugas tentang web bisa komen disini.
Atau dapat langsung hubungi kami:
Email:
tawank.x@gmail.com
bobybibbob@gmail.com
YM:
tawank_x
bobybibbob

^0^V

17 Maret 2011

macam-macam fungsi waktu

Sebelumnya saya pernah menulis Format date pada PHP

Fungsi CheckDate
Fungsi ini digunakan untuk memeriksa kebasahan suatu tanggal. Argumen yang dimasukkan harus integer dan hasil yang ditampilkan ada 2 nilai, yaitu True da False. Bernilai True apabila tanggal yang menjadi argumennya adalah tanggal yang valid, dan bernilai False apabila tanggal yang menjadi argumennya adalah tanggal yang tidak valid.
Bentuk:
Checkdate(bulan, tanggal, tahun);
Keterangan:
Bulan adalah argumen data bulan dengan format angka
Tanggal adalah argumen data tanggal dengan format angka
Tahun adalah argumen data tahun dengan format 2 gigit atau 4 digit

Fungsi Time
Fungsi ini digunakan untuk membaca data waktu dalam hitungan detik dari tangal 1 Januari 2010 jam 00:00:00 sampai waktu scrip ini diakses atau dijalankan.
Bentuk:
Time()
Fungsi time tidak memerlukan argumen.
Berikut contoh program yang menggunakan fungsi time

<?php
//fungsi_time.php
$waktu=time();
Echo"
hasil data dan waktu dengan fungsi time adalah $waktu";
?>

Fungsi Date
Fungsi ini digunakan untuk memperoleh tanggal atau jam saat ini atau hari ini yang terdapat pada sistem komputer Anda.
Bentuk:
Date(string_format)
String_format adalah string yang berisi karakter tertentu yang menjadi format waktu.
Hasil yang diberikan oleh fungsi date ini adalah sebuah string tanggal/waktu sesuai dengan argumennya. Berikut tabel yang memperhatikan hasil dan string tanggal sebagai argumennya.

Contoh:
<?php
//bentuk tulisan hari
echo date("l");
//bentuk tulisan spt Monday 15th of January 2003 05:51:38 AM
echo date("l dS of F Y h:i:s A");
//bentuk tulisan spt Monday the 15th
echo date("l \\t\h\e jS");
?>

Fungsi Date Dengan 2 Argumen
Fungsi date juga dapat dituliskan menggunakan 2 argumen. Argumen kedua adalah berupa waktu yang akan diformat oleh fungsi date. Jika argumen itu dikosongkan, maka waktu yang digunakan adalah waktu yang berlaku sekarang.

Bentuk:
Date(string_format, waktu);
Keterangan:
String_format adalah string yang berisi karakter tertentu yang menjadi format waktu.
Waktu adalah data waktu dalam bentuk angka yang menunjukkan detik.
Berikut contoh program yang menggunakan fungsi date menggunakan 2 argumen:
<?php
Echo "menggunakan fungsidate (Y-m-d) <br />";
$sekarang=time();
$lusa=$sekarang+4*24*60*60;
Echo"hari ini adalah tanggal". Date('Y-m-d',$sekarang)."<br />";
Echo"4 hari setelah hari ini adalah tanggal". Date('Y-m-d',$lusa)."<br />";
?>

Download or View Demo

28 November 2010

Demo dan Tutorial Combobox Menggunakan Script PHP Ajax Javascript MySQL

demo tutorial script ajax jquery javascript php combobox combo box

Tutorial ini pengembangan dari combobox serta revisi dari tutorial combobox sebelumnya yang tidak bekerja pada IE. Pada tutorial membuat combobox kali ini masih menggunakan script-script Php, Ajax, html, dan MySQL hanya saja kali ini combobox yang akan dibuat tidak hanya membuat menu atau pilihan drop down (select) yang saling berhubungan tapi pada menu atau pilihan drop down (select) yang terakhir akan menampilkan detail berupa tabel dan input text field berisi data dari menu pilihan drop down terakhir, dalam hal tutorial kali ini menu pilihan drop down yang terakhir adalah nama barang.

Hasil dari tutorial ini akan seperti ini:

Tutorial combobox ini membutuhkan data dari database. Silahkan dump database ini untuk mencoba tutorial ini, dan beri nama database tersebut "db_catment".

-- phpMyAdmin SQL Dump

-- version 2.6.1

-- http://www.phpmyadmin.net

--

-- Host: localhost

-- Generation Time: Nov 26, 2010 at 01:57 PM

-- Server version: 5.0.18

-- PHP Version: 5.1.2

--

-- Database: `db_catment`

--

-- --------------------------------------------------------

--

-- Table structure for table `barang`

--

CREATE TABLE `barang` (

`id_barang` int(3) NOT NULL auto_increment,

`id_kategori` int(2) NOT NULL,

`nama` varchar(100) NOT NULL,

`harga` varchar(7) NOT NULL,

`deskripsi` varchar(255) NOT NULL,

PRIMARY KEY (`id_barang`)

) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=6 ;

--

-- Dumping data for table `barang`

--

INSERT INTO `barang` VALUES (1, 1, 'Laptop', '6000000', 'Processor: Intel Core2Duo 2.2GHz');

INSERT INTO `barang` VALUES (2, 1, 'Netbook', '3000000', 'Processor: Intel Atom 1.73GHz');

INSERT INTO `barang` VALUES (3, 1, 'USB Flash Disk', '100000', 'Kapasitas 4GB');

INSERT INTO `barang` VALUES (4, 2, 'Sony Ericsson K800i', '825000', 'Kamera 3.2px, 3G, bluetooth, Infrared, J2ME');

INSERT INTO `barang` VALUES (5, 2, 'Sony Ericsson K810i', '850000', 'Kamera 3.2px, 3G, bluetooth, Infrared, J2ME, Keypad bulet2');

-- --------------------------------------------------------

--

-- Table structure for table `kategori`

--

CREATE TABLE `kategori` (

`id_kategori` int(2) NOT NULL auto_increment,

`nama` varchar(100) NOT NULL,

PRIMARY KEY (`id_kategori`)

) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=3 ;

--

-- Dumping data for table `kategori`

--

INSERT INTO `kategori` VALUES (1, 'Komputer');

INSERT INTO `kategori` VALUES (2, 'Handphone');

Database tersebut terdiri dari 2 tabel yaitu kategori dan barang. Tabel kategori memiliki 2 field yaitu id_kategori dan nama. Tabel barang memiliki 5 field yaitu id_barang,id_kategori,nama,harga, dan deskripsi.

Sebelumnya kita akan memerlukan file php yang berfungsi untuk menghubungkan ke database. Beri nama file itu "db_config.php" yang isinya:

<?php

$hostname_conn="localhost";

$username_conn="root";

$password_conn="12345678";

$db_conn="db_catment";

mysql_connect($hostname_conn,$username_conn,$password_conn,$db_conn) or die ("Maaf sedang ada gangguan dengan database kami.");

mysql_select_db($db_conn);

?>

Selanjutnya kita akan membuat halaman index.php isi dari halaman index.php yaitu:

<?php

include_once"db_config.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" xml:lang="en">

<head>

<title>Demo Tutorial Combobox Menggunakan Script PHP Ajax Javascript MySQL catment.blogspot.com</title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<meta name="title" content="Demo Tutorial Combobox Menggunakan Script PHP Ajax Javascript MySQL" />

<meta name="description" content="Demo Tutorial Example Contoh Script PHP Ajax Javascript MySQL" />

<meta name="keywords" content="ajax,php,javascript,script" />

<meta name="language" content="en" />

<meta name="subject" content="Demo Tutorial Combobox2" />

<meta name="robots" content="All" />

<meta name="copyright" content="catment.blogspot.com" />

<meta name="abstract" content="Demo Tutorial Example Script PHP Ajax Javascript MySQL" />

<meta name="MSSmartTagsPreventParsing" content="true" />

<script type="text/javascript" language="javascript" src="ajax.js"></script>

</head>

<body>

<h1>Demo Tutorial Combobox Menggunakan Script PHP Ajax Javascript MySQL</h1>

<select id="kategori" onchange="barang(this.value);">

<option value="">- Kategori -</option>

<?php

/*select kategori*/

$command_kategori="SELECT * FROM kategori ORDER BY nama ASC";

$select_kategori=mysql_query($command_kategori);

/*--------*/

while($row_kategori=mysql_fetch_array($select_kategori))

{

?>

<option value="<?php echo"$row_kategori[id_kategori]"; ?>"><?php echo"$row_kategori[nama]"; ?></option>

<?php

}

?>

</select>

<span id="barang"></span>

<hr />

<div id="detail"></div>

</body>

</html>

File lain yang dibutuhkan yaitu "barang.php" yang berfungsi sebagai respon dari ajax ketika menu dropdown dipilih:

<?php

include_once"db_config.php";

$id_kategori=$_POST['id_kategori'];

?>

<select id="barang" onChange="detail(this.value);">

<option value="">- Barang -</option>

<?php

/*select barang*/

$command_barang="SELECT * FROM barang WHERE id_kategori='$id_kategori' ORDER BY nama ASC";

$select_barang=mysql_query($command_barang);

/*--------*/

while($row_barang=mysql_fetch_array($select_barang))

{

?>

<option value="<?php echo"$row_barang[id_barang]"; ?>"><?php echo"$row_barang[nama]"; ?></option>

<?php

}

?>

</select>

Setelah itu file yang akan menampilkan respon dari memilih barang yang akan menampilkan detail barang yaitu detail.php:

<?php

include_once"db_config.php";

$id_barang=$_POST['id_barang'];

/*select barang*/

$command_barang="SELECT * FROM barang WHERE id_barang='$id_barang'";

$select_barang=mysql_query($command_barang);

$row_barang=mysql_fetch_array($select_barang);

/*--------*/

setlocale(LC_MONETARY, 'id_ID');

$row_barang['harga']=number_format($row_barang['harga'],0,',','.');

?>

<table>

<tr>

<td>ID Barang</td>

<td>: <input type="text" id="id_barang" value="<?php echo"$row_barang[id_barang]"; ?>" /></td>

</tr>

<tr>

<td>Nama Barang</td>

<td>: <input type="text" id="nama" value="<?php echo"$row_barang[nama]"; ?>" /></td>

</tr>

<tr>

<td>Harga</td>

<td>: <input type="text" id="harga" value="Rp<?php echo"$row_barang[harga]"; ?>,-" /></td>

</tr>

<tr>

<td>Deskripsi</td>

<td>: <textarea id="deskripsi"><?php echo"$row_barang[deskripsi]"; ?></textarea></td>

</tr>

</table>

Dan yang terakhir adalah file ajax.js yaitu file javascript yang mengkontrol ajax:

<!--

var xmlhttp;

/*barang*/

function barang(id_kategori)

{

document.getElementById("detail").innerHTML="";

if(id_kategori=="")

{

alert("Anda Belum Memilih Kategori");

document.getElementById("kategori").focus();

document.getElementById("barang").innerHTML="";

return false;

}

else

{

var url="barang.php?rand="+Math.random();

var post="id_kategori="+id_kategori;

ajax(url,post,'barang');

}

}

/*--------*/

/*detail*/

function detail(id_barang)

{

if(id_barang=="")

{

alert("Anda Belum Memilih Barang");

document.getElementById("barang").focus();

document.getElementById("detail").innerHTML="";

return false;

}

else

{

var url="detail.php?rand="+Math.random();

var post="id_barang="+id_barang;

ajax(url,post,'');

}

}

/*--------*/

/**Ajax**/

/*out_response*/

function out_response(response)

{

if(response=="barang")

{document.getElementById("barang").innerHTML=xmlhttp.responseText;}

else

{document.getElementById("detail").innerHTML=xmlhttp.responseText;}

}

/*--------*/

/*ajax*/

function ajax(url,post,response)

{

xmlhttp=GetXmlHttpObject();

xmlhttp.onreadystatechange=function()

{

if(xmlhttp.readyState==4)

{

if(xmlhttp.status==200)

{

out_response(response);

}

else{ajax_fail();}

}

}

xmlhttp.open("POST",url,true);

xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

xmlhttp.send(post);

}

/*--------*/

/*ajax_fail*/

function ajax_fail()

{

alert("Maaf ada gangguan penerimaan data, silahkan coba lagi atau refresh browser anda.");

return false;

}

/*--------*/

/*pilih xmlhttp berdasarkan browser*/

function GetXmlHttpObject()

{

if(window.XMLHttpRequest)

{

return new XMLHttpRequest();

}

if(window.ActiveXObject)

{

return new ActiveXObject("Microsoft.XMLHTTP");

}

else

{alert("Maaf browser anda tidak mendukung ajax.");}

return false;

}

/*--------*/

/**--------**/

//-->

That's all!! File lengkap untuk tutorial ini bisa anda download DI SINI. atau VIEW DEMO

Thanx buat yang sudah berkunjung, kasih komentar n ngisi shoutbox.. ^^
Ditunggu komentar, saran, kritiknya.. Kalo ada yang mau tanya silahkan kasih komentar disini n jangan lupa kasih alamat email biar jawabannya bisa dikabarin lewat email..!!Hohoho..

Ow ya maaf y klo yang udah kasih komentar,nanya tp lom sempet dibales soalnya saya lagi ngerjain proyek akhir saya nih, Insya Allah januari sidang, mohon doanya yaaah..hohohoho ^O^V

30 Oktober 2010

Script Halaman Web Pantau Merapi Real Time (Live)

Sekarang(30-10-2010) kan merapi lagi aktif tuh,jogja jam 02:00 tadi mulai hujan abu..
Nah pemerintah sudah menyediakan web yang bisa kita gunakan untuk memantau real time (live) keadaan merapi, mulai dari situasi keadaan disana yang dipantau melalui cctv dan catatan seismograf. Tapi, web yang disediakan pemerintah untuk mendapatkan data realtime (live) perlu kita refresh setiap kita ingin mendapatkan data tersebut. Nah disini saya menyediakan script untuk menampilkan gambar dari cctv dan catatan seismograf dengan autorefresh (autoreload) jadi kita gak perlu cape-cape refresh (reload) manual.
Langsung aja,cekidot scriptnya:

<html>
<head>
<title>Pantau Merapi Yuks..</title>
<script type="text/javascript" language="javascript">
var delay=30000;
function merapi(get)
{window.location="?"+get;}
function image(view)
{
if(view=="?1")
{
document.getElementById('image').src="http://merapi.bgl.esdm.go.id/view.php?id=18";
setTimeout("merapi('1')",delay);
}
else
{
document.getElementById('image').src="http://merapi.bgl.esdm.go.id/view.php?id=1";
setTimeout("merapi('')",delay);
}
}
</script>
</head>
<body onLoad="image(window.location.search);">
<div align="center">
<input type="button" value="Webcam" onClick=alert("a");merapi(''); />
<input type="button" value="Seismograf" onClick=alert("b");merapi('1'); />
</div>
<div align="center" id="imagex"><img src="" id="image" alt="Loading Image.." onLoad="window.status='asd';" /></div>
<div align="center">Supported By: <a href="http://catment.blogspot.com" target="_blank">catment.blogspot.com</a></div>
</body>
</html>

29 Maret 2010

Javascript Checkbox Checked / Javascript Check All Checkbox

Kalian tahu kan fungsi checkall? Yupz, ini adalah fungsi yang digunakan untuk mencentang semua kolom cek list ataupun sebaliknya untuk menghilangkan semua centang yang ada pada kolom cek list. Untuk membuat fungsi ini kita hanya memerlukan sebuah script javascript yang digunakan untuk mencentang semua cek list maupun menghilangkan semua centang pada cek list.

Secara keseluruhan script tersebut seperti dibawah ini:

<html>
<body>
<center>
<table border="1px" width="180">
<tr>
<td>
<ul>
<li>
<input type="checkbox" name="check_ctrl" onClick="Check(document.myform.check_list)" /> <b id=message>Check All</b>
</li>
<li><input type="button" name="button" id="button" onClick="Check(document.myform.check_list)" value="Check All" /></li>
</ul>
<hr>
<ol>
<li><input type="checkbox" name="check_list" value="1"> ASP</li>
<li><input type="checkbox" name="check_list" value="2"> PHP</li>
<li><input type="checkbox" name="check_list" value="3"> JavaScript</li>
<li><input type="checkbox" name="check_list" value="4"> HTML</li>
<li><input type="checkbox" name="check_list" value="5"> MySQL</li>
</ol>
</td>
</tr>
</table>
</form>
<script type="text/javascript" language="javascript">

</script>
</center>
</body>
</html>

Untuk melihat demonya silahkan kunjungi:
[Demo @ catment.co.cc/demo/checkall]
Download scriptnya:
http://catment.co.cc/download/check_all.zip

9 Maret 2010

Tutorial script Javascript : Membuat kalender sederhana dengan Javascript

Di sini saya memilih javascript untuk membuat kalender.
Mengapa saya memilih menggunakan Javascript???? karena javascript menggunakan teknologi client-side. Artinya proses programnya terjadi di client, dan tidak membutuhkan server,.
Script Javascriptnya sebagai berikut :
Kalender.html

<html>
<head>
<title>Kalender</title>
</head>
<body>
<script type="Text/Javascript">
var months = new Array();
months[0] = "Januari";
months[1] = "Peburari";
months[2] = "Maret";
months[3] = "April";
months[4] = "Mei";
months[5] = "Juni";
months[6] = "Juli";
months[7] = "Agustus";
months[8] = "September";
months[9] = "Oktober";
months[10] = "Nopember";
months[11] = "Desember";

var currentDate = new Date();
var currentMonth = currentDate.getMonth();
var hariini=currentDate.getDate();
currentDate.setDate(1);
document.write("<table align='center' border=1 cellpadding=3 cellspacing=0>");
document.write("<tr>");
document.write("<td colspan=7 align='center'><strong>"+ months[currentMonth] +"</strong></td>");
document.write("</tr>")
document.write("<tr bgcolor='#AAAAAA'>");
document.write("<td align='center'>Minggu</td>");
document.write("<td align='center'>Senin</td>");
document.write("<td align='center'>Selasa</td>");
document.write("<td align='center'>Rabu</td>");
document.write("<td align='center'>Kamis</td>");
document.write("<td align='center'>Jumat</td>");
document.write("<td align='center'>Sabtu</td>");
document.write("</tr>");

if (currentDate.getDay() != 0)
{
document.write("<tr>");
for (i = 0; i < currentDate.getDay(); i++)
{
document.write("<td> </td>");
}
}

while (currentDate.getMonth() == currentMonth)
{
if (currentDate.getDay == 0)
{
document.write("<tr>");
}

if (hariini==currentDate.getDate())
{
document.write("<td align='center' bgcolor='#00FF00′> <font color='#0000FF'><strong>" + currentDate.getDate() + "</strong></font></td>");
}

else
{
document.write("<td align='center'>" + currentDate.getDate() + "</td>");
}

if (currentDate.getDay() == 6)
{
document.write("</tr>");
}
currentDate.setDate(currentDate.getDate() + 1);
}

for (i = currentDate.getDay(); i <= 6; i++)
{
document.write("<td> </td>");
}

document.write("</table>");
</script>
</body>
</html>

[View Demo @ http://catment.co.cc/demo/kalender.html]

6 Maret 2010

Tutorial script Javascript : Jam digital dengan javascript

Untuk membuat efek tampilan web agar menarik biasanya di tambahkan aksesoris, jam digital salah satunya. untuk membuat jam digital bisa juga menggunakan script javascript, karena javascript mempunyai fungsi Date() dan setTimeout() yang berfungsi untuk merefresh halaman.
contoh jam digital sederhana menggunakan script javascript.
jam.html

<html>
<head>
<title>Jam Digital</title>
<script type="text/javascript">
// 1 detik = 1000
window.setTimeout("waktu()",1000);
function waktu()
{
var tanggal = new Date();
setTimeout("waktu()",1000);
document.getElementById("output").innerHTML = tanggal.getHours()+":"+tanggal.getMinutes()+":"+tanggal.getSeconds();
}
</script>
</head>
<body bgcolor="white" text="black" onload="waktu()">
<table align=center style="border:1px solid black" bgcolor="#CCCCCC"><tr><td>
<div id="output">
</div></td></tr>
</table>
</body>
</html>

simpan script javascript di atas dengan nama jam.html
selamat mencoba....
[Download jam.html]
[View Demo @ http://catment.co.cc/demo/jam.html]

4 Maret 2010

Tutorial script PHP : Tes koneksi ke server MySQL menggunakan script PHP

Sebelum melakukan pengetesan koneksi, pastikan server MySQL anda telah aktif. Karena kalau belum aktif bagaimana bisa melakukan koneksi... hehehehe...

Srirpt untuk melakukan tes koneksi :

TesKoneksi.php

<?php
$host="localhost";
$user="root";
$password="";
$koneksi=mysql_connect("$host","$user","$password");
if($koneksi)
{
echo"Koneksi ke server MySQL menggunakan script PHP berhasil";
}
else
{
echo"Koneksi ke server MySQL menggunakan script PHP gagal";
}
?>

Keterangan script PHP di atas:

Isi $host dengan nama host anda, biasanya bila menggunakan local server namanya localhost.

Isi $user dengan user name SQL anda.

Isi $password dengan password SQL anda.

Jalankan TestKoneksi.php apabila koneksi berhasil maka di browser akan muncul Koneksi ke server MySQL menggunakan script PHP berhasil, sedangkan apabila koneksi ke server gagal maka kan muncul Koneksi ke server MySQL menggunakan script PHP gagal.

---o0o--- Selamat mencoba ---o0o---

[Download Tutorial]

3 Maret 2010

Tutorial script PHP : membulatkan bilangan pecahan dengan script PHP

Dalam pembagian biasanya sering di jumpai hasil yang pecahan. Misalnya 10 dibagi 15 hasilnya adalah 0.66666666. biasanya untuk bilagan pecahan saya lebih suka mengambil dua angka di belakang koma, sehingga hasilnya menjadi 0.67. sekarang bagaimana bila hal tersebut ingin di pakai dalam pemrograman PHP. Script PHP-nya adalah sebagai berikut:

$hasil=round($nilai,2);

Pada script di atas $hasil adalah hasil yang sudah dibulatkan, $nilai adalah nilai dari bilangan pecahan yang akan di bulatkan dan 2 adalah angka yang dibelakang koma.

contoh.php

<?php

$nilai=10/15;

$hasil=round($nilai,2);

echo"$nilai<br>";

echo"$hasil";

?>

Dari hasil script PHP di atas akan muncul hasil $nilai dan $hasil, untuk $nilai keluaranya adalah 0.666666666667 sedangkan untuk $hasil keluaranya adalah 0.67

[Download tutorial]

2 Maret 2010

Tutorial script PHP : script untuk menampilkan informasi ip dan browser

Script untuk menampilan informasi IP address

Script ini di gukana untuk melihat ip adrress pada client, scripnya adalah sebagai berikut:

ip_address.php

<?php

$ip_address=$_SERVER['REMOTE_ADDR'];

echo "$ip_address";

?>

Hasil dari script di atas adalah informasi tentang ip address client, bila anda mengakses menggunakan localhost maka informasi yang keluar adalah 127.0.0.1 karena ip address dari localhost adalah 127.0.0.1

Script untuk menampilan informasi Browser dan operating system

Script ini di gunakan untuk melihat informasi browser dan operating system pada client, scripnya adalah sebagai berikut:

info.php

<?php

$info=$_SERVER['HTTP_USER_AGENT'];

echo "$info";

?>

Hasil dari script di atas adalah informasi tentang browser dan operating sistem pada client.

[Download tutorial]

1 Maret 2010

Check Javascript Browser Enabled / Disabled

Javascript biasa digunakan untuk membuat suatu validasi dari suatu form input karena javascript merupakan bahasa pemrograman web yang bersifat client side, yaitu bahasa pemrograman yang proses eksekusi perintahnya dilakukan pada sisi client, sehingga membuat validasi dengan javascript tanpa perlu mereload suatu halaman. Tetapi javascript memiliki suatu kelamahan. Dalam hal validasi seseorang bisa saja memasukan data yang tidak sesuai dengan aturan validasi yang dibuat dengan script javascript, untuk memasukan data yang tidak valid tersebut user cukup mematikan / disable javascript browser yang digunakan, selanjutnya user dapat menginputkan data yang tidak sesuai dengan aturan validasi yang dibuat. Bayangkan jika validasi extensi file upload bisa diabaikan..? Jika validasi extensi file upload tersebut hanya memperbolehkan seorang user mengupload file extensi jpg, dan user tersebut me- nonaktif / disable javascript browser yang digunakan, maka ia dapat mengupload file dengan extensi apa saja misalkan exe. Bayangkan jika user tersebut mengupload sebuah virus?

Untuk mengatasi masalah tersebut kita dapat membuat suatu aturan yang mengharuskan user meng- aktif / enable javascript browser yang digunakan, jika javascript browser disable / nonaktif kita dapat meng-kick user tersebut sehingga ia tidak dapat memasukan data jika javascript browser disable / nonaktif. Untuk dapat membuat aturan tersebut kita harus dapat melakukan check javascript browser enabled / disabled dengan membuat suatu script yang akan disisipkan ditiap halaman atau dihalaman yang anda anggap perlu, dan sebuah halaman kita buat sebagai output dari user yang kita kick.

- Script yang disisipkan:

<noscript>
<meta http-equiv="refresh" content="0;URL=js_disable.php" />
</noscript>

js_disable.php adalah halaman tujuan kick dari user yang nonaktif / disable javascript browser yang digunakannya.

- js_disable.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=iso-8859-1" />
<title>Javascript Disabled</title>
</head>
<body>
<center>
<noscript>
<h3>Javascript anda tidak aktif mohon aktifkan / enabled javascript browser anda.</h3>
</noscript>
</center>
</body>
</html>

Dengan begitu user yang nonaktif / disable javascript browser yang digunakannya akan dialihkan kehalaman js_disable.php dan diberikan sebuah peringatan untuk meng- aktif / enable javascript browser yang digunakannya.
[DOWNLOAD SCRIPT DISINI]

25 Februari 2010

Script untuk mengubah ukuran ( resize ) gambar menggunakan javascript

Di sini saya akan mencoba membahas bagaimana cara mengubah ukuran gambar menggunakan javascript. Karena script yang saya gunakan adalah javascript maka proses dari mengubah ukuran gambar ini tidak memerlukan local server, seperti php.

ukuran Gambar normal

Ukuran gambar di perkecil

Ukuran gambar di perbesar

Scriptnya seperti ni:

<html>

<head>

<title>mengubah ukuran gambar menggunakan javascript</title>

<script type="text/javascript">

var panjang;

var lebar;

var x = 0;

function bacaUkuran()

{

panjang = document.getElementById("gambar").width;

lebar = document.getElementById("gambar").height;

}

function tambahSize()

{

x++;

document.getElementById("gambar").width = Math.pow(2, x) * panjang;

document.getElementById("gambar").height = Math.pow(2, x) * lebar;

}

function kurangiSize()

{

x--;

document.getElementById("gambar").width = Math.pow(2, x) * panjang;

document.getElementById("gambar").height = Math.pow(2, x) * lebar;

}

function resetSize()

{

x = 0;

document.getElementById("gambar").width = Math.pow(2, x) * panjang;

document.getElementById("gambar").height = Math.pow(2, x) * lebar;

}

</script>

</head>

<body onload="bacaUkuran()">

<div align="center">

<h1>contoh mengubah ukuran gambar dengan javascript</h1>

<input type="button" value="perkecil" onclick="kurangiSize()" />

<input type="button" value="ukuran semula" onclick="resetSize()" />

<input type="button" value="perbesar" onclick="tambahSize()" />

<br/><br/>

<img id="gambar" src="Sunset.jpg"/>

</div>

</body>

</html>

Keterangan dari javascript di atas adalah :

var panjang;

var lebar;

var x = 0;

function bacaUkuran()

{

panjang = document.getElementById("gambar").width;

lebar = document.getElementById("gambar").height;

}

Buat 3 button/tombol, yang masing-masing namanya perbesar, perkecil dan ukuran semula. Tombol “perbesar” di gunakan untuk memperbesar ukuran gambar 2 kali dari ukuran gambar seblumnya. Tombol “perkecil” di gunakan untuk untuk memperkecil ½ kali dari ukuran gambar sebelumnya. Dan tombol “ ukuran semulah digunakan untuk mengubah gambar ke ukuran aslinya.

Perhatikan Javascript di atas, bahwa variabel panjang dan lebar sengaja dibuat sebagai variabel global karena nantinya akan digunakan dalam proses perhitungan untuk setiap proses (perbesar ukuran dan perkecil ukuran). Apabila kedua variabel tersebut dibuat lokal dalam function bacaUkuran() maka nilai-nilainya hanya bisa dikenal dalam function tersebut saja.

Misalkan mula-mula panjang imagenya adalah x. Setelah diperbesar 2 kali maka panjang imagenya adalah 2x. Bila diperbesar lagi maka panjang imagenya menjadi 4x, dst. Secara umum panjang image setelah diperbesar n kali adalah 2nx. Bila n = 0, maka akan diperoleh panjang image mula-mula. Hal yang sama juga berlaku untuk lebar imagenya. Nah… ide ini bisa kita terapkan dalam bentuk script.

Perintah Math.pow(2, x) digunakan untuk menghitung 2x pada Javascript.

Perintah document.getElementById("gambar").width = Math.pow(2, x) * panjang; digunakan untuk mengubah panjang image yang tampil dalam browser menjadi 2x * panjang aslinya.

Sedangkan untuk memperkecil ukuran image, kita cukup melakukan decrement pada variabel x nya saja (x--). Misal mula-mula panjang image adalah x (20x) pixel, lalu diperbesar menjadi 2x (20+1x = 21x), lalu diperbesar lagi menjadi 4x (21+1x = 22x). Selanjutnya diperkecil, maka panjangnya menjadi kembali ke 2x (22-1x = 21x). Bila diperkecil lagi menjadi x (21-1x = 20x), dan bila diperkecil lagi menjadi 1/2 x (20 – 1x = 2-1x) dst.

Yang terakhir, untuk tombol ketiga (=) dimana bila tombol ini ukuran image akan direset menjadi ukuran aslinya. Idenya adalah dengan memberi nilai x = 0, untuk mendapatkan panjang dan lebar image aslinya. Bila nilai x = 0, dan panjang image aslinya x, maka 20x = x (sama seperti ukuran aslinya), demikian pula untuk lebarnya

[download script]

dasar-dasar HTML

Sebenarnya, dokumen HTML hanyalah sebuah dokumen teks biasa dan sebut sebagai Markup Language yakni bahasa yang mendukung kode penanda yang si sebut HTML yang di gunakan untuk mengatur format tampilan suatu dokumen. Kode ini di selipkan ke dalam teks HTML, berfungsi untuk mengontrol format dan layout dalam dokumen, menunjuk ke suatu hyperlink, dan lain-lain. Tag HTML ini menggunakan simbol khusus dan untuk menandakan suatu kode instruksi, simbol ini adalah kurung siku < dan >.

Hal yang harus di perhatikan adalah kode tag HTML ini taidak bersifat case-senditif artinya <body> sama dengan <BODY> ataupun <bOdY>. Pada umumnya banyak dari pemakai HTML menggunakan hufur besar dalam penulisan tag HTML sehingga kode-kode ini terlihat jelas, sehingga mempermudah proses pembacaan. Semua bagian HTML terdiri dari dua bagian logikal yaitu :

Bagian kepala (head). Secara umum, bagian kepala terdiri dari dokumen HTML berisi informasi umum mengenai dokumen.
Dan bagian badan (body) yaitu berisi dokumen yang sebenarnya.

Setiap dokumen HTML harus dimulai dan di akhiri dengan tag <HTML> yang mendeklarasikan suatu dokumen sebagai dokumen HTML. Sruktur dasarnya adalah sebagai berikut:

<html>
<head>
<title>Judul</title>
</head>
<body>
ISI WEB
</body>
</html>

Keterangan:

<html> ... </html>

Mendefinisika bahwa text yang berada di antara kedua tag tersebut adalah file HTML.

<head> ... </head>

Sebagai informasi tag header. Di dalam tag ini kita bisa meletakan tag-tag TITLE, BASE, ISIINSEX, LINK, SCRIP, STYLE dan META

<title> ...</title>

Sebagai titel atau judul halaman/form, digunakan sebagai identifikasi dokumen. Dokumen yang terletak dalam tag ini akan muncul pada bagian atas browser anda (pada title bar).

<body> ...</body>

Mendefinisikan teks beserta formatnya yang hendak di tampilkan sebagi isi halam web. Di dalam tag ini bisa di letakan berbagai page atribut seperti bgcolor, baground, text, dan lain-lain.
[download ebook]

Dasar-dasar javascript

Javascript adalah bahasa yang berbentuk kumpulan script yang pada fungsinya berjalan pada suatu dokumen HTML, sepanjang sejarah internet bahasa ini adalah bahasa script pertama untuk web programing. Bahasa ini adalah bahasa web programing untuk memberikan kemampuan tambahan terhadap bahasa HTML dengan mengijinkan pengeksekusian perintah-perintah di sisi user.

Javascript bergantung kepada browser(navigator) yang memanggil halaman web yang berisi script-script dari javascript dan tentusaja terselip di dalam dokumen HTML. Javascript juga tidak memerlukan kompilator atau penterjemah khusus untuk menjalankannya(pada kenyataannya kompilator javascript sendiri sudah termasuk di dalam browser tersebut). Lain halnya dengan bahasa “java” (dengan nama javascript selalu di banding-bansingkan) yang memerlukan kompilator khusus untuk menterjemahkan di sisi user/client.

Javascript adalah bahasa web programing yang berbasis objek, artinya saat menuliskan javascript, anda menggunakan objek-objek bawaan atau objek-objek yang anda ciptakan sendiri. Javascript adalah bahasa yang “case-sensitive” artinya membedakan penamaan variabel dan fungsi yang menggunakan huruf besar dan hurus kecil, contoh variabel dan nama fungsi dengan nama TEST berbeda dengan variabel dengan nama test. Dan yang terakhir seperti bahasa java ataupun C, setiap intruksi di akhiri dengan karakter titi koma (;).

Sruktur dasar javasript

Program javascript di tuliskan pada file HTML (.html atau .htm) dengan menggunakan tag <SCRIPT>. Derati anda tidak perlu menulisakan program javaScript pada file terpisah dengan file HTML (meskipun anda bisa melakukanya).

Berikut adalah sintak umum penulisan javascript :

//perintah javascript

</script>

Atribut language=”javascript” memberitahukan browser bahwa script yang anda tulis adalah javascript.

[Download ebook]

23 Februari 2010

Javascript For Email Validation (Javascript Untuk Validasi Email)

When validating an e-mail address, you are looking for the typical format found in such addresses. There may be some domain names that are more than three characters, but it isn't typical. Also, just because the user types what looks like a valid e-mail address, that does not mean that it is; for example, the e-mail address santa@northpole.org uses a valid syntax, but that fact does not prove that santa is a real user.

E-mail addresses usually have the following format:

An @ sign between the username and address (lequig@aol.com)
At least one dot between the address and domain name ( .com, .mil, .edu, .se)
At least six characters (a@b.se)^[3]
^[3] As of this writing, domain names have at least two characters.

Examples of valid e-mail addresses:

username@mailserver.com
username@mailserver.info
username@mailserver.org.se
username.moretext@mailserver.mil
username@mailserver.co.uk
user-name.moretext.sometext@mailserver.se

To break down the regular expression

/^(([\-\w]+)\.?)+@(([\-\w]+)\.?)+\.[a-zA-Z]{2,4}$/;

use the following steps:

Step 1:	^	Go to the beginning of the line.
Step 2:	([\-\w]+)\.?	The user name consists of one or more dashes or word characters grouped by parentheses, followed by one (or not one) literal period. Because the dot is outside the parentheses there will be either one or zero dots for the list of word characters, not two or three dots in a row.
Step 3:	(([\-\w]+)\.?)+	The user name may consist of more than one set of word characters separated by a single dots, as in Joe.Shmoe.somebody.
Step 4:	@	A literal @ symbol is required in the e-mail address.
Step 5:	([\-\w]+)\.?)+	The mail server's name is like the user's name, a group of word characters separated by a dot. Same as step 3.
Step 6:	[a-zA-Z]{2,4}	The domain name follows the mail server's name. A single dot separates the server from the domain. The domain name consists of between two and four alphabetic characters; e.g., savageman@imefdm.usmc.mil or patricia.person@sweden.sun.com.
Step 7:	$	The end of the line anchor assures that no extra characters can be added onto the end of the e-mail address.

<body>
<h2> Checking for Valid Email Address </h2>
<h2><?php echo "$user_email"; ?></h2>
<form name="formtest" action="#" method="post" onSubmit="return ok_Email(this);">
<p>
Please enter your email address: <BR>
<input type="text" size=40 name="user_email">
</p>
<p>
<input type=submit value="Send">
</p>
</form>
</body></html>

[Download Sript]

EXPLANATION

A function called ok_Email is defined. It takes one parameter, a reference to the form started on line 6.
The regular expression is assigned the variable regex. The regular expression reads: Start at the beginning of the string (^), look for one or more alphanumeric characters and/or a dash followed by a literal dot (or not one). The literal period is outside the parentheses, meaning that in each group of word characters, there will be only one (or not one) period; e.g., abc.xyz. The entire expression is in parentheses followed by a + sign. This means that the pattern can be repeated one or more times; e.g., abc.xyz.yaddy.yady.yady. Next comes a literal @ symbol, required in all e-mail addresses. The mail server name comes right after the @ sign. Like the user name, it is represented by one or more alphanumeric characters or a dash, followed by a literal dot (\.). Now we have Joe.Blow@aol or DanSav@stamford, etc. This pattern, like the first pattern, can be repeated one or more times. The domain name part of the address comes next; a literal dot, and at least two but not more than four alphabetic characters, [a-zA-Z]{2,4}; e.g., JoeBlow@Chico.com, danny@Stamford.edu, .se, .uk, etc. There are other varieties that could also be considered, such as john@localhost, but for most e-mail addresses, the regular expression used in this example should suffice.
The regular expression test() method takes the value of the user input, user_email.value, and returns true if the pattern in the regular expression matched the user's input.
The e-mail address entered is tested to be valid. A true value is returned and the form will be submitted to the server. A valid e-mail address does not mean that if mail is sent to that address it will necessarily be delivered; e.g., santa@northpole.org is syntactically valid, but there is no guarantee that santa is a real user (unless you still believe!).
If an invalid e-mail address was entered, the alert box will appear with this message. The ok_Email() function will return false, and the form will not be submitted.
The form named formtest starts here.
This is the URL of the CGI script that will be called on the server side when the form is submitted.
The onSubmit event handler is triggered when the user presses the submit button. The value assigned to the event is a function called ok_Email that will return true if the e-mail address is valid and false, if not. The form will be sent to the server only if the return value is true.

Subscribe Now!

Shoutbox and Chat

Produk Catment

E-book web programing gratis

Tips and Trik

Blog Archive

Kontributor