Tutorial kali ini untuk menjawab pertanyaan dari deo yaitu bagaimana jika dari kalender (pada tutorial Javascript Calendar Date Picker / Javascript Calendar Popup / Kalender Javascript) tanggal yang dipilih dapat disimpan di suatu variabel dan digunakan untuk menghitung selisih dari tanggal yang telah dipilih tersebut.DATEDIFF(expr1,expr2)
<?php
$date0=$_POST['date0'];
$date1=$_POST['date1'];
/*konfigurasi koneksi database*/
$hostname_conn="localhost";
$username_conn="root";
$password_conn="";
mysql_connect($hostname_conn,$username_conn,$password_conn) or die ("Maaf sedang ada gangguan dengan database kami.");
/*--------*/
/*selisih tanggal*/
$command="SELECT DATEDIFF('$date0','$date1')";
$select=mysql_query($command);
$row=mysql_fetch_array($select);
/*--------*/
header("Location: index.php?date0=$date0&date1=$date1&hasil=$row[0]");
exit();
?>
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');
<?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>
<?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>
<?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>
<!--
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;
}
/*--------*/
/**--------**/
//-->
Ucapan idul fitri / lebaran pake kartu? itu c udah biasa..nah skalian iseng2..nih,ucapin selamat idul fitri / lebaran pake javascript:
kadang kita butuh suatu halaman web untuk di cetak/print, pertanyaanya bagaimana cara membuat halaman web yang lansung bisa di print,.???
nah denganscript javascript pertanyaan tersebut dapat di jawab,.dengan srcipt javascript tersebut dengan klik,maka halaman web akan ter-print,.
adapun script-nya sebagai berikutUntuk medeteksi browser yang digunakan oleh user yang sedang digunakan untuk browsing bisa menggunakan banyak cara, salah satunya dengan menggunakan Javasript. Berikut ini contoh mendeteksi browser dengan menggunakan script Javascript
deteksiBrowser.html
<html> <head> <title>MENDETEKSI BROWSER YANG DIGUNAKAN USER DENGAN JAVASCRIPT</title> </head> <body> <script type="text/javascript"> document.write("<p>Browser: ") document.write(navigator.appName +"</p>") document.write("<p>BrowserVersion: ") document.write(navigator.appVersion +"</p>") document.write("<p>Code:") document.write(navigator.appCodeName +"</p>") document.write("<p>Platform: ") document.write(navigator.platform +"</p>") document.write("<p>Cookies enabled: ") document.write(navigator.cookieEnabled +"</p>") document.write("<p>Browser's User Agen Header: ") document.write(navigator.userAgent +"</p>") </script> </body> </html> |
Keterangan Script:
<html>
<head>
<meta name="description" content="javascript calendar date picker / javascript calendar popup / kalender javascript" />
<meta name="keyword" content="javascript calendar date picker,script calendar javascript,javascript,calendar,script,kalender" />
<script language="javascript" type="text/javascript">
/*blocker*/
if(window.opener==null)
{
window.location="index.php";
}
/*--------*/
</script>
<title>Script Javascript Kalender / Pick Date Calendar</title>
</head>
<body>
<center>
<h1>Script Javascript Kalender / Pick Date Calendar</h1>
<div id="kalender"></div>
</center>
<script type="text/javascript" language="javascript">
<!--
var array_day=["Minggu","Senin","Selasa","Rabu","Kamis","Jumat","Sabtu"];
var array_month=["Januari","Februari","Maret","April","Mei","Juni","Juli","Agustus","September","Oktober","November","Desember"];
var date;
var year;
var month;
var day;
var go_year;
var go_month;
var fulldate;
var isi;
var now_date=new Date();
var now_day=now_date.getDate();
var now_month=now_date.getMonth();
var now_year=now_date.getYear();
var url=document.location.href;
var tgt=url.lastIndexOf("tgt=");
tgt=url.slice(tgt+4);
tgt=window.opener.document.getElementById(tgt);
now();
/*now*/
function now()
{
date=new Date();
calendar(date);
}
/*--------*/
/*newdate*/
function newdate()
{
go_month=document.getElementById("sel_month");
date=new Date(go_year,go_month.value);
return calendar(date);
}
/*--------*/
/*calendar*/
function calendar(date)
{
year=date.getFullYear();
month=date.getMonth();
day=date.getDate();
isi="<form>";
isi+="<table align='center' border=1 cellpadding=3 cellspacing=0>";
/**baris 1 (menu2 perintah)**/
isi+="<tr>";
isi+="<td colspan='7' align='center'>";
/*today button*/
isi+="<input type='button' name='today' value='Today' onClick='now();' /> ";
/*--------*/
/*select month*/
date.setDate(1);
isi+="<select name='sel_month' id='sel_month'>";
for(i=0;i<10;i++)
{
if(i==month)
{var selected="selected='selected'";}
else{selected="";}
isi+="<option value=\"0"+i+"\" "+selected+">"+array_month[i]+"</option>";
}
for(i=10;i<12;i++)
{
if(i==month)
{var selected="selected='selected'";}
else{selected="";}
isi+="<option value=\""+i+"\" "+selected+">"+array_month[i]+"</option>";
}
isi+="</select> ";
/*--------*/
/*decrease tahun*/
go_year=year;
isi+="<input type='button' name='year_down' value='<' onClick=\"go_year=document.getElementById('sel_year').value-1; document.getElementById('sel_year').value=go_year;\" /> ";
/*--------*/
/*output tahun*/
if(go_year==year)
{go_year=year;}
else{go_year=go_year;}
isi+="<input type='text' name='sel_year' id='sel_year' value='"+go_year+"' size='3' disabled='disabled' /> ";
/*--------*/
/*increase tahun*/
isi+="<input type='button' name='year_up' value='>' onClick=\"go_year=document.getElementById('sel_year').value-1+2; document.getElementById('sel_year').value=go_year;\" /> ";
/*--------*/
/*go button*/
isi+="<input type='button' name='go' id='go' value='Go' onClick=\"newdate();\" />";
/*--------*/
isi+="</td>";
isi+="</tr>";
/**--------**/
/*baris 2 (bulan, tahun)*/
isi+="<tr>";
isi+="<td colspan=7 align='center'><b>"+ array_month[month]+", "+year+"</b></td>";
isi+="</tr>";
/*--------*/
/*baris 3 (header hari)*/
isi+="<tr bgcolor='#00CCFF'>";
for(i=0;i<7;i++)
{
isi+="<td align='center'>"+array_day[i]+"</td>";
}
isi+="</tr>";
/*--------*/
/**baris kalender**/
/*cell tanpa tanggal bagian atas*/
if(date.getDay()!=0)
{
isi+="<tr>";
for(i=0;i<date.getDay();i++)
{
isi+="<td> </td>";
}
}
/*--------*/
/*cell yang ada tanggalnya*/
while(date.getMonth()==month)
{
fulldate=year+"-"+(month+1);
if(date.getDay==0)
{
isi+="<tr>";
}
/*hari ini*/
if(date.getDate()==now_day && date.getMonth()==now_month && date.getYear()==now_year)
{
isi+="<td align='center' bgcolor='#00FF00'><b><a href='#' onClick=\"tgt.value=fulldate+'-'\+"+date.getDate()+"; window.close();\">"+date.getDate()+"</a></b></td>";
}
/*--------*/
/**hari lain**/
else
{
/*minggu+sabtu*/
if(date.getDay()==0 || date.getDay()==6)
{var bgcolor="bgcolor='#FEC281'";}
/*--------*/
/*hari biasa*/
else{bgcolor="";}
/*--------*/
isi+="<td align='center' "+bgcolor+"><a href='#' onClick=\"tgt.value=fulldate+'-'\+"+date.getDate()+"; window.close();\">"+date.getDate()+"</a></td>";
}
/**--------**/
if(date.getDay()==6)
{
isi+="</tr>";
}
date.setDate(date.getDate()+1);
}
/*--------*/
/*cell tanpa tanggal bagian bawah*/
for(i=date.getDay();i<=6;i++)
{
isi+="<td> </td>";
}
/*--------*/
isi+="</table>";
isi+="</form>";
/**--------**/
document.getElementById("kalender").innerHTML=isi;
}
/*--------*/
//-->
</script>
</body>
</html>
<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>
Promtbox adalah fungsi bawaan dari javascript yang berfungsi untuk memasukan vareabel, tampilan dari promptbot dapat dilihat seperti gambar di atas,.<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>
<noscript>
<meta http-equiv="refresh" content="0;URL=js_disable.php" />
</noscript>
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
<script language=”JavaScript”>
//perintah javascript
</script>
[3] As of this writing, domain names have at least two characters.
username@mailserver.comusername@mailserver.infousername@mailserver.org.seusername.moretext@mailserver.milusername@mailserver.co.ukuser-name.moretext.sometext@mailserver.se
/^(([\-\w]+)\.?)+@(([\-\w]+)\.?)+\.[a-zA-Z]{2,4}$/;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. |
