Loading

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">
<!--
function Check(chk)
{
if(document.myform.check_ctrl.checked==true || document.getElementById("button").value=="Check All")
{
for(i=0;i<chk.length;i++)
chk[i].checked=true ;
document.getElementById("message").innerHTML="UnCheck All";
document.getElementById("button").value="UnCheck All";
}
else
{
for(i=0;i<chk.length;i++)
chk[i].checked=false;
document.getElementById("message").innerHTML="Check All";
document.getElementById("button").value="Check All";
}
}
//-->
</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

Membuat Link tanpa garis bawah dengan CSS


Sebelumnya saya sudah pernah menulis tentang CSS atau Cascading Style Sheet. Tapi kali ini saya akan sharing trik penggunaan script CSS untuk menghilangkan garis bawah pada Link Text, dan menhhilangkan border pada Link Gambar.

Menghilangkan Garis Bawah Semua Link pada Halaman Web

Pada dasarnya sebuah link otomatis akan mempunyai garis bawah. Tapi dengan menggunakan CSS/Cascading Style Sheet, garis bawah itu bisa dihilangkan dengan mudah. Caranya, tempatkan script CSS berikut di bagian <head>...</head> halaman web yang Anda buat (bersama title, description, dan keyword). Dengan menggunakan kode ini, garis bawah pada seluruh link di halaman web Anda akan hilang.


<html>

<head>

<title>menghilangkan garis bawah pada link</title>

<style type="text/css">

a {text-decoration:none;}

</style>

</head>

<body>

<a href=" http://catment.blogspot.com">Link belajar web programing</a>

</body>

</html>



Menghilangkan Garis Bawah Sebagian Link pada Halaman Web

Jika hanya ingin menghilangkan garis bawah pada link-link tertentu, bukan pada seluruh link seperti yang terjadi kalau memakai kode di atas, anda dapat menyisipkan kode script ke dalam style Link atau memanggilnya dengan class. Contoh dan kodenya seperti yang berikut ini.


<html>

<head>

<title>menghilangkan garis bawah pada link</title>

</head>

<body>

<a href=" http://catment.blogspot.com" style="text-decoration:none;">Link belajar web programing</a>

</body>

</html>


Atau


<html>

<head>

<title>menghilangkan garis bawah pada link</title>

<style type="text/css">

.tanpaGarisBawah {text-decoration:none;}

</style>

</head>

<body>

<a href="http://catment.blogspot.com" class="tanpaGarisBawah">Link belajar web programing</a>

</body>

</html>



Menghilangkan Border Semua Link Gambar pada Halaman Web

Pada dasarnya apabila kita membuat Link Gambar akan terdapat border di sekeliling gambar yang di buat Link, tapi ada sebagian browser yang tidak memunculkan border tersebut. Apabila anda pengguna Opera dan Firefox, border tersebut muncul pada browser Opera dan Firefox. Dengan CSS border tersebut dapat dihilangkan,caranya sisipkan kode CSS ke tag <head>...</head>.contoh scriptnya sebagai berikut:


<html>

<head>

<title>menghilangkan garis bawah pada link</title>

<style type="text/css">

img {border:0;}

</style>

</head>

<body>

<a href="catment.blogspot.com"><img src="catment.jpg" /></a>

</body>

</html>


Menghilangkan Border tertentu pada Link Gambar pada Halaman Web

Anda juga bisa menghilangkan border di bagian Link gambar tertentu saja, caranya sama denga menghilangkan garis pada Text Link tertentu di atas yaitu dengan cara menyisipkan sript CSS pada tag <img>. Untuk contoh bisa di lihat pada script di bawah ini:


<html>

<head>

<title>menghilangkan garis bawah pada link</title>

</head>

<body>

<a href="catment.blogspot.com"><img src="catment.jpg" style="border:0;" /></a>

</body>

</html>


28 Maret 2010

Tutorial Script Javascript: Promptbox

Promtbox adalah fungsi bawaan dari javascript yang berfungsi untuk memasukan vareabel, tampilan dari promptbot dapat dilihat seperti gambar di atas,.
dan di bawah ini saya akan memberikan concoh membuat promptbox sederhana ,.

<html>
<head>
<script type="text/javascript">
function show_prompt()
{
var name=prompt("masukan nama","");
if (name!=null && name!="")
{
document.write("Apa kabar " + name + "?????");
}
else if (name=="")
{
alert("anda belum memasukan nama");
}
}
</script>
</head>
<body>

<input type="button" onClick="show_prompt()" value="prompt box" />

</body>
</html>


keterangan dari script javascript di atas, saat di klik button prompt box maka akan membangkitkan fungsi javascript swow_prompt, dan promptboxpun muncul dan jika anda masukan nama, maka akan muncul tulisan apakabar (nama)???
dan jika nama anda kosongkan maka akan muncul javascript alert yang memberitaukan bahwa bagian nama kosong,.

[view demo via catment.co.cc/demo/promptbox.htlm]

24 Maret 2010

Tutorial Script Ajax: Combobox dengan ajax

Combobox mungkin bagi sebagian dari anda sudah tak asing lagi dengan istilah ini. combobox adalah 2 atau lebih menu dropdown yang mempunyai keterkaitan antara menu dropdown, yang sepesial disini adalah metode yang di gunakan adalah Ajax. Kenapa Ajax? Apa kelebihan dari Ajax??

Dengan menggunakan Ajax halaman kita tidak perlu me-reload semua halaman. Sekarang langsung saja ke study kasus, study kasus kali ini adalah saat memilih dropdown propinsi maka dropdown kabupaten berubah.
Langkah-langkah untuk membuat combobox dengan ajax adalah sebagai berikut:
Pertama-tama buatlah database dengan nama combobox beserta tabelnya..

buat database dengan nama combobox, lalu buat tabel propinsi yang di dalamnya terdapat idPropinsi dan propinsi. buat tabel kabupaten yang didalamnya terdapat idKabupaten, kabupaten dan idPropinsi

CREATE DATABASE combobox;
CREATE TABLE propinsi (
idPropinsi varchar(5) NOT NULL,
propinsi varchar(50) NOT NULL,
PRIMARY KEY (idPropinsi)
);
INSERT INTO propinsi VALUES ('001', 'propinsi A');
INSERT INTO propinsi VALUES ('002', 'propinsi B');
INSERT INTO propinsi VALUES ('003', 'propinsi C');
INSERT INTO propinsi VALUES ('004', 'propinsi D');

CREATE TABLE kabupaten (
idKabupaten varchar(5) NOT NULL,
kabupaten varchar(50) NOT NULL,
idPropinsi varchar(5) NOT NULL,
PRIMARY KEY (idKabupaten)
);
INSERT INTO kabupaten VALUES ('001', 'kabupaten A1', '001');
INSERT INTO kabupaten VALUES ('002', 'kabupaten A2', '001');
INSERT INTO kabupaten VALUES ('003', 'kabupaten A3', '001');
INSERT INTO kabupaten VALUES ('011', 'kabupaten B1', '002');
INSERT INTO kabupaten VALUES ('012', 'kabupaten B2', '002');
INSERT INTO kabupaten VALUES ('013', 'kabupaten B3', '002');
INSERT INTO kabupaten VALUES ('021', 'kabupaten C1', '003');
INSERT INTO kabupaten VALUES ('022', 'kabupaten C2', '003');
INSERT INTO kabupaten VALUES ('023', 'kabupaten C3', '003');
INSERT INTO kabupaten VALUES ('031', 'kabupaten D1', '004');
INSERT INTO kabupaten VALUES ('032', 'kabupaten D2', '004');
INSERT INTO kabupaten VALUES ('033', 'kabupaten D3', '004');

Setelah itu buat index.php


<?php
include"config.php";
?>
<html>
<head>
<title>Tes Combobox</title>
</head>
<body>
<script type='text/javascript'>
function createRequestObject()
{
var ro;
var browser = navigator.appName;
if(browser == "Microsoft Internet Explorer")
{
ro = new ActiveXObject("Microsoft.XMLHTTP");
}
else
{
ro = new XMLHttpRequest();
}
return ro;
}

var xmlhttp = createRequestObject();
function rubah(pilih)
{
var idPropinsi = pilih.value;

if (!idPropinsi) return;
xmlhttp.open('get', 'ambildata.php?idPropinsi='+idPropinsi, true);
xmlhttp.onreadystatechange = function()
{
if ((xmlhttp.readyState == 4) && (xmlhttp.status == 200))
document.getElementById("kabupaten").innerHTML = xmlhttp.responseText;
return false;
}

xmlhttp.send(null);
}
</script>
<form>
<select name="idPropinsi" onChange="javascript:rubah(this)">
<option value=''>-pilih Propinsi-</option>
<?php
$pilih="SELECT * FROM propinsi";
$query=mysql_query($pilih);
while($row=mysql_fetch_array($query))
{
echo"
<option value='$row[idPropinsi]'>$row[propinsi]</option>
";
}
?>
</select>
<select id="kabupaten">
</select>
</form>
</body>
</html>

Langkah berikutnya adalah membuat config.php untuk konfigurasi dan koneksi antara web dan databese MySQL



<?php
//tentukan host, bila anda menggunakan local biasanya localhost
$hostname_conn="host";

//username, bila anda menggunakan local biasanya root
$username_conn="username";

//password MySQL
$password_conn="password";

//nama database
$db_conn="database";

mysql_connect($hostname_conn,$username_conn,$password_conn,$db_conn) or die ("Koneksi gagal total". mysql_error());

mysql_select_db ($db_conn);
?>

Terakhir adalah membuat ambildata.php
dari index.php yang menampilkan tampilan dropdown propinsi, dan jika di pilih salah satu propinsi maka akan membangkitkan fungsi yang merequest ke ambildata.php dan selanjutnya respon dari ambildata.php akan di kirimkan ke index.php

<?php
//mengkoneksikan ke server MySQL
include"config.php";

$idPropinsi=$_GET['idPropinsi'];
//men-query yang memiliki id propinsi sama
$pilih="SELECT * FROM kabupaten WHERE idPropinsi=$idPropinsi";
$query=mysql_query($pilih);
while($row=mysql_fetch_array($query))
{
echo"
<option value='$row[idKabupaten]'>$row[kabupaten]</option>
";
}
?>



[download script] <<--->>> [view demo @ http://catment.co.cc/demo/combobox_ajax]

20 Maret 2010

Tutorial Script PHP: Membuat Captcha Dengan Script PHP

Belum tahu captcha?captcha adalah gambar (bisa juga rekaman suara) yang memperlihat kan suatu huruf atau objek lain yang digunakan untuk mengkonfirmasi bahwa kita atau yang menginputkan form atau hal sejenisnya adalah manusia, bukan bot. Sebagai contoh captha:

Untuk membuat captcha yang akan saya berikan pada tutorial kali ini diperlukan beberapa script, gambar, dan font huruf.
Script untuk membuat captcha: (captcha_image.php)

<?
session_start();
$random=md5(microtime());
$random=substr($random,0,5);
$NewImage =imagecreatefrompng("captcha.png");

$LineColor1=imagecolorallocate($NewImage,100,100,255);
$LineColor2=imagecolorallocate($NewImage,255,125,0);
$TextColor=imagecolorallocate($NewImage,255,100,100);

$text_x=rand(0,125);
$text_y=rand(20,75);
$line1_x1=rand(0,199);
$line1_x2=$text_x-5;
$line1_y1=rand(0,80);
$line1_y2=$text_y-5;
$font='font.ttf';
imageline($NewImage,0,0,$line1_x1,$line1_y2,$LineColor2);
imagettftext($NewImage,18,0,$text_x,$text_y,$TextColor, $font, $random);
imageline($NewImage,$line1_x1,$line1_y1,$line1_x2,$line1_y2,$LineColor1);
imageline($NewImage,$line1_x1,$line1_y1,200,0,$LineColor1);
imageline($NewImage,$line1_x1,40,100,$line1_y2,$LineColor2);

$_SESSION['key']=$random;
header("Content-type: image/png");
imagepng($NewImage);
imagedestroy($NewImage);
?>

Pada script diatas membutuhkan sebuah gambar sebagai background captcha (captcha.png) dan font huruf (font.ttf). Disini saya menggunakan gambar berformat .png karena gambar yang dihasilkan lebih baik dari format .jpg. Sehingga perintah yang digunakan untuk membuat gambar yaitu
imagecreatefrompng("captcha.png")
dan perintah untuk menampilkan gambar pada browser yaitu
imagepng($NewImage);
jika anda ingin menggunakan file .jpg maka gunakan perintah
imagecreatefromjpeg("captcha.jpg")
dan
imagejpeg($NewImage);
Font yang digunakan terserah anda tetapi disini saya menggunakan font Comic Sans MS, jika anda mengganti fontnya mungkin akan memerlukan beberapa penyesuaian untuk ukuran font dan peritah $text_x=rand(0,125); $text_y=rand(20,75); karena perintah tersebut digunakan untuk merandom koordinat huruf dan angka yang akan ditampilkan pada gambar captcha.
Script form memasukan dan mencocokan capcta: (form.php)

<?
session_start();
?>
<html>
<head>
<title>Demo Captcha </title>
</head>
<body onLoad="return focuson();">
<center>
<script type="text/javascript" language="javascript">
function focuson()
{document.form1.number.focus()}

function check()
{
if(document.form1.number.value=='')
{
alert("Mohon masukan kode pada gambar");
document.form1.number.focus();
return false;
}
}
</script>
<?
if(isset($_REQUEST['Submit']))
{
$key=$_SESSION['key'];
$number = $_REQUEST['number'];
if($number!=$key)
{echo"Kode yang anda masukan salah!";}
else
{echo"Kode yang anda masukan benar!";}
}
?>
<form name="form1" method="post" action="" onsubmit="return check();">
<img src="captcha_image.php" /><br>
<input name="number" type="text" id="number" />
<input name="Submit" type="submit" value="Submit" />
</form>
<?php
$random=md5(microtime());
$random=substr($random,0,5);
?>
</center>
</body>
</html>

Selesai..!!
Untuk melihat demo captha ini silahkan kunjungi: catment.co.cc/demo/captcha
Untuk mendownload file-file yang dibutuhkan silahkan: [DOWNLOAD]

16 Maret 2010

Consult and Ask Your Problem About Web Programing, Web Application, Script, Database Here!

Do you have any difficulties on web programming?
Do you need some scripts for your web or your web application?
We are ready to help you!
Just write down your problem here and we will help you as fast as possible.. Don't forget to write your email address so we can send you some reply to your email..
Thanks for visiting our blog and don't forget visiting us again to get the update.. ^0^

15 Maret 2010

Konsultasi dan Pertanyaan seputar web programing

Apabila anda mengalami kesulitan atau masalah seputar web programing,.
tentang script-script web programing atau menemui kesulitan dalam membuat web studi kasus,kami siap membantu anda selama kami bisa.
tulis saja masalah anda di sini,.

Kami juga siap menjawab pertanyaan-pertanyaan anda seputar web programing dan script-script web programing dari anda,.
tulis juga pertanyaan di bawah sini,.
kami siap membantu anda selama kami bisa.
jangan lupa lampirkan alamat e-mail anda, agar kami bisa menghubungi dan membalas pertanyaan anda lewat e-mail,.

atau bisa juga e-mail ke:
tawank.x@gmail.com
bobybibbob@gmail.com

14 Maret 2010

Operamini gratis internet dengan telkomsel

kemarin iseng searching2,.
dan nemu yang kaya ginian, trus kepikiran untuk berbagi sama pengunjung blog ini.dan sekarang saya tulislah cara-caranya disini,.

Sebenarnya si agak menyimpang dari tema blog saya ini,tapi itu tadi niat saya hanya ingin berbagi saja dengan pengunjung blog ini,.

saya sudah mencoba'y sendiri dan memang gratis, sebenernya trik ini hampir sama dengan trik milik indos*t beberapa bulan yang lalu,yang gratis internetan mengunakan opera mini yg sudah di rubah querynya. arti gratis di sini g bener2 gratis 100%, tapi 99% soalnya kita hanya bayar koneksi pertama saja. selanjutnya gratis. Ini sudah saya buktikan sendiri untuk browsing, tampilan saya gunakan mode desktop, gambar saya load kualitas tinggi download ringtone dan walpaper cuma habiz Rp.7

langsung saja ke triknya, begini caranya:

pertama-tama kenali hape anda terlebih dulu, karena tiap versi berbeda caranya,.
paling mudah adalah jika anda pengguna nokia Symbian S.60 dan semua sony ericsson yang
bukan netfront 3.3(type G, K850i, w910i, dll), karena hape type di atas 99,9% semuanya bisa.

langkah selanjutnya download file opera mini 5 beta Modif yang sudah di modifikasi, lalu instal di hape anda, Opera minipun siap untuk di ajak berselancar didunia maya.

Jika hape anda type java proxy(seperti nokia 5310 Xpres music, nokia 5610 dan kawan-kawanya).
untuk hape type diatas ada trik tambahan untuk bisa menikmati gratisan, caranya yaitu dengan menginstal file telkomsel.prov. cara instalnya extrak file tersebut lalu kirim lewat bluetooth atau dengan infra red, biasanya klo dengan usb tidak terinstal. setelah file tersebut selesai di kirim akan ada notifikasi seperti waktu anda meminta setingan GPRS dari operator, pilih setuju. dan gunakan setingan tersebut sebagai jalur GPRSnya.
Operaminipun siap diajak selanjar.


kalau file-file tersebut ingin di download via ponsel :
buka alamat : http://www.davch39.org/images/_rpx/index.php dengan browser di ponsel..
akan muncul halama yang berisi link to transload dan referrer
masukan alamat http://www.ziddu.com/download/8955758/Opmin5b2TSEL.jar.html ke link to transload dan bagian referrer kosongkan saja>>klik Transload File.
masukan kode verifikasi trus klik Download.
akan muncul Donload : nama file >>klik nama file


Nb:
Jangan lupa harus dg jalur protokol http.
caranya: menu > pengaturan > lebih lanjut > protokol : http
dan operator yang digunakan telkoms*el tentunya,..

kita tidak akan tahu tanpa pernah mencoba,.

semoga bermanfaat.

12 Maret 2010

Tutorial Script PHP : Sistem Fungsi File pada PHP

sebelumnya saya pernah membahas bagaimana menghapus file dengan menggunakan script PHP, dan kali ini saya akan membahas sistem fungsi file yang ada pada script PHP.

lansung saja ya......

copy()
 <?php
$source = "c:/windows/music.mp3"; // lokasi file yang akan di copy
$destination = "c:/multimedia/music.mp3"; //lokasi file dimana akan di paste
copy($source, $destination); // mengcopy file dari source ke destination
?>
Script PHP di atas di gunakan untuk mengcopy file,.

rmdir()

 <?php
$folder = "c:/multimedia/"; // lokasi folder yang akan di hapus
rmdir($folder); // menghapus folder multimedia yang ada di c:/
?>
Script PHP di atas di gunakan untuk menghapus folder,.

file_exist()

 <?php
$file = "c:/multimedia/music.mp3"; //lokasi file yang akan di cek keberadaanya
if (file_exists($file))
{
echo "File $file ada";
}else{
echo "File $file tidak ditemukan";
}
?>

Script PHP di atas di gunakan untuk memeriksa keberadaan file,.

filesize()

 <?php
$file = "c:/multimedia/music.mp3"; //file yang ingin di ketahui ukuranya
echo filesize($file);
?>

Script PHP di atas di gunakan untuk mengetahui ukuran suatu file,.

rename()

 <?php
$Awal = "c:/multimedia/music.php"; // nama awal file
$Baru = "c:/multimedia/lagu.mp3"; // perubahan nama file
rename($Awal, $Baru); // mengubah nama file music.mp3 menjadi lagu.mp3 yang berada di c:/multimedia

Script PHP di atas di gunakan untuk mengubah nama file,.


semoga bermanfaat....

Tutorial Script Ajax : Test Ajax Browser Support

Sebenarnya Ajax bukanlah bahasa pemrograman baru, tetapi merupakan teknik baru penggunaan standar yang telah ada. Dengan Ajax kita dapat menjadi lebih baik, cepat dan menambah unsur user-friendly dan interaktif pada aplikasi web kita. Ajax berbasiskan pada Javascript dan requestHTTP.

Ajax berbasiskan standart terbuka seperti:

  • Javascript
  • XML
  • HTML/XHTML
  • CSS

Kata kunci dari Ajax adalah obyek XMLHttpRequest. Obyek tersebut terletak di browser sehingga masing-masing browser memilki cara tersendiri untuk membuat obyek XMLHttpRequest. Salah satu parameter membuat aplikasi Ajax yang bagus adalah bagaimana program tersebut dapat berjalan dengan baik di semua browser, walaupun tiap browser memiliki cara yang berdeda. Internet Explorer menggunakan ActiveObject, sedangkan browser lain menggunakan bawaan JavaScript, yaitu XMLHttpRequest. Untuk membuat obyek tersebut tentunya kita harus mengecek terlebih dahulu browser apa yang digunakan.

Contoh membuat XMLHttpRequest dengan JavaScript:

testAjax.html



<html>
<body>
<script type="text/javascript">
function AJAXfunction()
{
var xmlHttp;
try
{
//Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e)
{
//Internet Explorer
try
{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catct (e)
{
try
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e)
{
alert("Browser Anda Tidak Support Ajax");
return false;
}
}
}
}
</script>
</body>
</html>


Script Ajax di atas pertama mendefinisikan vareabel xmlHttp untuk menampung XMLHttpRequest. Kemudian Script Ajax ini akan membuat obyek dengan XMLHttp=new XMLHttpRequest(). Script Ajax ini akan bekerja pada browser Firefox, Opera, dan safari. Jika gagal maka akan di buat xmlHttp=new ActiveObject("Msxml2.XMLHTTP") untuk Internet Explorer 6.0 ke atas, dan jika gagal lagi maka dicoba xmlHttp=new ActiveObject("Microsoft.XMLHTTP") untuk IE 5.5 ke atas. Dan apabila dari ketiga metode di atas tidak ada yang bekerja, brati browser user tidak mendukung Ajax maka akan muncul pesan "Browser Anda Tidak Support Ajax".

10 Maret 2010

Elemen FORM pada HTML

Form pada HTML digunakan untuk menerima masukan uatau isian dari user kemudian di olah lebih lanjut menjadi informasi yang dibutuhkan, baik oleh user ataupun pihak yang punya web. Elemen dari form HTML adalah <form> yang menunjukan awal dari suatau form HTML dan di akhiri dengan </form>. Dalam sebuah dokumen dapat memiliki lebih dari satu form HTML.

Kegunaan Form

Berikut ini adalah beberapa contoh kegunaan form dalam web:

  • Memperoleh data-data user.
  • Untuk mendaftar pada service yang disediakan.
  • Memperoleh feedback dari user mengenai website anda.

Sintak penulisan Form:

<form methode="post atau get" action="url">

Elemen-elemen FORM

</form>

Tag <form> digunakan untuk membuat form dalam dokumen HTML.

Atribut

Deskripsi

method

Menentukan bagaimana data akan dikirim ke server.

get- data akan dikirim dengan menggunakan query string pada url.

post- data akan dikirim ke server sebagai block datake script.

Syntax:

method="post/get"

action

Menentukan lokasi dari script yang akan memproses data dari form

Syntax:

action="url"


Membuat input field


Dalam form, kita dapat membuat input atau kotak isian yang dapat di isi dengan suatu data oleh user. Tag yang digunakan untuk membuat kotak isisan adalah tag<input>. Type-type input yang tersedia adalah sebagai berikut:


# Type=TEXT

Kotak isian bertype text ini menerimadata dari karakter (default) sebanyak satu baris.

Atribut

Deskripsi

Name

Nama vareable dari control yang akan menyimpan nilai dari input field

Type

<input type="text">

Value

Untuk memberikan value ke input field

Size

Jumlah karakter dari input field

Maxlength

Jumlah karakter maxsimum untuk input field

Contoh:

<input type="text" name="text" size="20">

Tampilan:


# Type= PASSWORD

Kotak isian bertipe password ini menerima data karakter, tapi tidak akan ditampilkan karena kebutuhan masukan password yang bersifat rahasia. Atributnya sama denganinput field type text

Atribut

Deskripsi

Name

Nama vareable dari control yang akan menyimpan nilai dari input field

Type

<input type="password">

Value

Untuk memberikan value ke input field

Size

Jumlah karakter dari input field

Maxlength

Jumlah karakter maxsimum untuk input field

Contoh:

<input type="password" name="pwd" size="20">

Tampilan:


# Type=CHECKBOX

Suatu inputan yang memungkinkan kita memilih satu atau lebih pilihan atau tidak memilih samasekali, dengan memberikan tanda pada checkbok tersebut.

Atribut

Deskripsi

Checked

Untuk memberi default check

Name

Nama vareable dari control yang akan menyimpan nilai dari input field

Type

<input type="checkbox">

Value

Untuk pemberian value ke input

Size

Ukuran control

Contoh:

<input type="checkbox" name="renang" value="renang">Renang <br>

<input type="checkbox" name="sepak bola" value="sepak bola">Sepak Bola <br>

<input type="checkbox" name="Tenis Meja" value="Tenis Meja">Tenis Meja <br>

Tampilan :


Renang

Sepak Bola

Tenis Meja


# Type = RADIO

Hanya mengijinkan satu dari banyak pilihan. Setiap radio button control harus memiliki nama yang sama, sehingga user hanya bisa memilih satu option saja. Radio button harus secara explisit memberikan nilai ke atribut value.

Atribut

Deskripsi

Checked

Untuk memberi default check

Name

Nama vareable dari control yang akan menyimpan nilai dari input field

Type

<input type="radio">

value

Untuk memberikan value ke input

Size

Ukuran control

Contoh:

<input type="radio" name="jenis kelamin" value="laki-lahi">Laki-laki <br>

<input type="radio" name="jenis kelamin" value="Perempuan">Perempuan

Tampilan:

Laki-laki

Perempuan


# Type= BUTTON

Atribut

Deskripsi

Name

Nama vareable dari control yang akan menyimpan nilai dari input field

Type

<input type="submit"> : mengirimkan form ke url yang telah di definisikan pada atribut action pada tag <form>

<input type="reset">: Browser mengembalikan field dalam form ke dalam nilai default (mengosongkan nilai semua elemen form)

Value

Memberikan nama label pada button

Size

Memberikan lebar button

Contoh:

<input type="submit" value="Submit"><input type="reset" value="reset">

Tampilan :


# Tag <TEXTAREA>

Tag ini digunakan untuk membuat input text yang lebar, bisa menampung lebih banyak karakter dibanding input field bertype TEXT. Text yang berada di antara tag <TEXTAREA>dan </TEXTAREA> secara default akan ditampilkan sesuai aslinya

Atribut

Deskripsi

Name

Nama vareable dari control yang akan menyimpan nilai dari input field

Rows

Jumlah baris textarea

Cols

Lebar kolom textarea

Wrap

WRAP=PHYSICAL –tampilan word-wrap. Default WRAP=OFF

Contoh:

<textarea name="textarea" cols="15" rows="3">ini adalah textarea</textarea>

Tampilan:



# TYPE=IMAGE NAME=SUBMIT SRC="...."

Mengirimkan informasi form seperti halnya tombol submit, hanya saja berbentuk gambar.

Contoh:

<input type="image" name="submit" src="catment/Pictures/play.jpg">

Tampilan:

# tag <SELECT> dan <OPTION>

Digunakan untuk membuat field yang berbentuk pilihan. Tag <select> dan <option> ini harus digunakan secara bersama-sama. tag <option> mendefinisikan pilihan dari item-item. Tag ini dipasang diantara tag <select> dan </select>.

Atribut

Deskripsi

Name

Nama vareable dari control yang akan menyimpan nilai dari input field

Value

Text yang di tampilkan pada tombol, default = "submit query"

Size

Untuk menampilkan jumlah baris

Multiple

Untuk menentukan apakah user boleh memilih lebih dari satu option apa tidak

Selected

Pilihan ini di pilih secara default

Contoh:

<select name="propinsi">

<option value="">Propinsi</option>

<option value="Jawa Tengah">Jawa Tengah</option>

<option value="Jawa Barat">Jawa Barat</option>

<option value="Jawa Timur">Jawa Timur</option>

</select>

Tampilan:



[Download E-book]



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>&nbsp;</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>&nbsp;</td>");
}

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

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

8 Maret 2010

Tutorial script PHP: menghapus file dengan script PHP

menghapus file menggunakan script PHP, srciptnya sebagai berikut:

<?php

$file = "c:/apache2triad/htdocs/file.txt"; // lokasi file yang akan di hapus

unlink($file); //menghapus file yang ada di apache2triad/htdocs/file.txt

?>

semoga bermanfaat....

6 Maret 2010

CSS (Cascading Style Sheet)


Cascading Style Sheets (CSS) adalah suatu bahasa stylesheet yang digunakan untuk mengatur tampilan suatu dokumen yang ditulis dalam bahasa markup. CSS diperkenalkan untuk perkembangan website pada tahun 1996. Nama CSS didapat dari fakta bahwa setiap deklarasi style yang berbeda dapat diletakan secara berurutan, yang kemudian akam membentuk hubungan parent-chile pada setiap style.

Penggunaan yang paling umum dari CSS adalah untuk memformat halaman web yang ditulis dengan HTML dan XHTML. Spesifikasi CSS diatur oleh World Wide WebConsurtium (W3C).CSS memmungkinkan halaman yang sama untuk ditampilkan dengan cara yang berbeda untuk metode persentasi yang berbeda, seperti melalui layar, cetak, suara (suwaktu dibacakan oleh browser basis-suara atau pembaca layar), dan juga alat pembaca braille. Halaman HTML atau XML yang sama juga dapat di tampilkan secara berbeda, baik dari segi gaya tampilan atau sekema warna dengan menggunakan CSS.

Keuntungan menggunakan CSS
CSS digunakan untuk mempersingkat penulisan tag HTML seperti font, color, text, dan table menjadi lebih ringkas sehingga tidak terjadi perulangan tulisan.
Keuntungan :

  • Memisahkan presentation sebuah dokumen dari content dokumen itu sendiri
  • Mempermudah dan mempersingkat pembuatan dan pemeliharaan dokumen web
  • Mempercepat proses rendering/pembacaan HTML

Penempatan CSS

# Inline Style Sheet
Pada posisi ini, CSS di tuliskan di dalam elemen HTML, dan mempunyai ciri-ciri:

  • - Merupakan style yang terlemah karena editing harus dilakukan dimana inline berada
  • - Mirip dengan atribut biasa
  • - Bagian dari <BODY>

Format statemen : selector {property:value}
Nama selector bisa merujuk ke tag HTML yang akan di edit, sebagai contoh apabila tag paragraf di ubah dengan CSS maka dapat ditulis sebagai berikut :

P {property:value}

Contoh penggunaan inline style sheet:

<html>
<head>
<title>Contoh</title>
<head>
<body>
<p style="font-style:italic">tulisan ini tercetak miring</p>
</body>
</html>

Jika source di atasa di jalankan di web browser, maka akan di dapatkan tulisan miring “tulisan ini tercetak mirirng”.

# Embedded Style Sheet
Penulisan CSS di dalam dokumen HTML dan menggunakan tag <style>....</style> yang di tempatkan pada bagian page header atau diantara tag <head>....</head>. Penggunaan embedded style sheet akan memberikan efek terhadap satu halaman saja.
Format statemen:
"HTML tag" {"CSS property":" value"}
"HTML tag" {"CSS propertyI" : " valueI" ; " CSS property2" : " value2" ;...}
Contoh:

<html>
<head>
<title>Embedded Style Sheet</title>
<style type=" text/css" >
P {font-family: arial, helvetica, sans-serif; font-size: 12pt; color: #FF0000}
</style>
</head>
<body>
<p>Tulisan ini menggunakan Embedded Style Sheed</p>
</body>
</html>

# Linked Style Sheet

Style disimpan dalam file yang berbeda dari file HTML dan disimpan dalam format ”*.css”.
Secara umum, linked style memili ciri-ciri:

  • - Disimpan di file lain sehingga sebuah css dapat dipakai di banyak file HTML lainya
  • - File hanya berisi style bukan tag HTML

Untuk menggunakan file lain yang berisi css pada file HTML, digunakan tag <link> yang ditempatkan pada bagian tag hedaer atau diantara <head>...</head>
Untuk menggunakan linked style sheet, setidaknya di butuhkan 2 file yang masing-masing berfungsi sebagai file css dan HTML.

  • Pertama, buat file css dan simpan menggunakan nama mystyle.css denganisi script css sebagai berikut:

P {font-family: arial, helvetica, sans-serif; font-size: 12pt; color: #FF0000}



  • Selanjutnya buat sebuah file HTML yang disimpan pada direktori yang sama dengan file css yang sudah dibuat dengan script HTML sebagai berikut :

<html>
<head>
<title>Linked Style Sheet</title>
<link rel=" stylesheet" hreft=" mystyle.css" type=" text/css" >
</head>
<body>
<p>Tulisan ini menggunakan Linked Style Sheed</p>
</body>
</html>

Aturan penulisan pada CSS

Sintak CSS dibagi dalam 3 bagian :
Selector{property:value}
Keterangan :

  • -Selektor berisi tag HTML yang akan di definisikan (body, H1, font, dll)
  • -Property merupakan atribut yang akan di-set/diubah
  • -Value merupakan nilai dari property

Contoh penulisan CSS:

H1
{
Font-family : arial;
Color : #0000FF
}

Keterangan:

H1 merupakan selector
Font-family merupakan property, dan
#0000FF merupakan value

Untuk mendeklarasikan property secara berkelompok, dapat menggunakan penghubung koma (,) dan & contoh :

H1, H2 {Color : #0000FF}
H1, H2 & H3 {Color : #0000FF}
Untuk menuliskan komentar pada CSS dapat menggunakan tanda:

  • -/*.....*/ (titik-titik di isi komentar)
  • -<!-- ....--> (titik-titik di isi komentar)
[Download E-book]

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]



Tutorial script PHP : Format date pada PHP

Pada script PHP banyak sekali format untuk menampilkan date. Lihat tabel format date pada PHP

contoh dari penggunaan format date pada script PHP


<?php

$hari=date("w");


$date=date("d F Y");

if($hari==0) {$hari="Minggu";}

if($hari==1) {$hari="Senin";}

if($hari==2) {$hari="selasa";}


if($hari==3) {$hari="Rabu";}

if($hari==4) {$hari="Kamis";}

if($hari==5) {$hari="Jumat";}

if($hari==6) {$hari="Sabtu";}


echo "$hari, $date";

?>


Jika hari ini hari selasa tanggal 2 maret 2010, maka tampilan dari script PHP di atas adalah Selasa, 02 March 2010

Contoh lain untuk menampilkan format hari dan tanggal dalam bahasa indonesia yaitu:


<?php
/*-hari dalam indonesia-*/
$hari=date("w");
$arr_hari=array("Minggu","Senin","Selasa","Rabu","Kamis","Jumat","Sabtu");
$hari=$arr_hari[$hari];
/*--------*/

/*-bulan dalam indonesia-*/
$bln=date("n");
$arr_tgl=array("Januari","Februari","Maret","April","Mei","Juni","Juli","Agustus","September","Oktober","November","Desember");
$bln=$arr_tgl[$bln-1];
/*--------*/

/*-penulisan langsung tanpa menyimpan hari, tanggal, bulan, dan tahun pada suatu variabel-*/
echo"$hari, ".date("d")." $bln ".date("Y");
/*--------*/

echo"<br>";

/*-penulisan dengan menyimpan hari, tanggal, bulan, dan tahun pada suatu variabel-*/
$tgl=date("d");
$thn=date("Y");
$full_date="$hari, $tgl $bln $thn";
echo"$full_date";
/*--------*/
?>

Jam_sekarang.php


<?php


$jam=date("H:i:s");

echo"$jam";

?>



Dari script PHP di atas jam tersebut nampak diam, tetapi sebenarnya berubah sesuai dengan jam di komputer. Setiap browser di refresh maka jam akan berubah sesuai dengan jam pada komputer.

[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]