Posted by : GaNz Sabtu, 28 September 2013

Php Tutorial Register, Logout & Login
Selama seminggu ini banyak para teman-teman menanyakan bagaimana cara membuat Register-Login-Logout script. Seb’a aplikasi ini memanfaatkan fungsi $_SESSION yg ada dalam PHP, untuk penjelasan apa dan bagaimana menggunakan fungsi $_SESSION bisa dilihat di PHP.net
Kali ini saya tidak menggunakan MySql sebagai database kita, tapi hanya memanfaatkan file txt saja. Seb’a konsep’a sama saja, teman-teman bisa mengubah’a nanti’a untuk sekuritas yang lebih terjaga.
Disini saya membuat beberapa file untuk aplikasi ini :
- index.php
- register.php
- login.php
- logout.php
- common.php
- style.css
1. Pertama kita buat file common.php
<?php session_start();
function registerUser($user,$pass1,$pass2){
$errorText = ”;
// Check password
if ($pass1 != $pass2) $errorText = “Password tdk sama dgn confirm password!”;
elseif (strlen($pass1) < 6) $errorText = “Password terlalu pendek!”;
// Check apakah user sudah terdaftar
$pfile = fopen(“userpwd.txt”,”a+”);
rewind($pfile); while (!feof($pfile)) {
$line = fgets($pfile);
$tmp = explode(‘:’, $line);
if ($tmp[0] == $user) {
$errorText = “Username telah terdaftar!”;
break;
}
}
// Jika semuanya ok -> Simpan data user
if ($errorText == ”){
// Enkripsi string password
$userpass = md5($pass1);
fwrite($pfile, “\r\n$user:$userpass”);
}
fclose($pfile);
return $errorText;
}
function loginUser($user,$pass){
$errorText = ”;
$validUser = false;
// Check apakah user terdaftar
$pfile = fopen(“userpwd.txt”,”r”);
rewind($pfile); while (!feof($pfile)) {
$line = fgets($pfile);
$tmp = explode(‘:’, $line);
if ($tmp[0] == $user) {
// User terdaftar, check password
if (trim($tmp[1]) == trim(md5($pass))){
$validUser= true;
$_SESSION['userName'] = $user;
}
break;
}
}
fclose($pfile); if ($validUser != true) $errorText = “Invalid username atau password!”;
if ($validUser == true) $_SESSION['validUser'] = true;
else $_SESSION['validUser'] = false;
return $errorText;
}
function logoutUser(){
// Logout User
unset($_SESSION['validUser']);
unset($_SESSION['userName']);
}
function checkUser(){
// Check user apakah guest? Jika ya -> redirect ke login.php
if ((!isset($_SESSION['validUser'])) || ($_SESSION['validUser'] != true)){
header(‘Location: login.php’);
}
} ?>
Ada beberapa fungsi yang kita buat dalam file di atas. Fungsi-fungsi tsb yg nanti’a kita perlukan di login, register dan file index.
2. Membuat file index.php
<?php
require_once(‘common.php’);
checkUser();
?>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “DTD/xhtml1-transitional.dtd”>
<html>
<head>
<title>Simple Login System</title>
<link href=”style/style.css” rel=”stylesheet” type=”text/css” />
</head>
<body>
<div>
<div>Simple Login System Demo</div>
<div>&nbsp;</div>
<div>
Hello <?php echo $_SESSION['userName']; ?> ! <br/>
<p>Ini hanya demonstrasi bagaimana menggunakan simple login system</p>
<p><a href=”logout.php”> Utk logout klik disini!</a></p>
</div>
<div>
<a href=”http://freetutorialwebsite.com”&gt;
FreeTutorialWebsite.com</a></div>
</div>
</body>
Tidak ada yang baru di file index.php di atas.
3. Membuat file register.php
<?php
require_once(‘common.php’); if (isset($_POST['submitBtn'])){
$username = isset($_POST['username']) ? $_POST['username'] : ”;
$password1 = isset($_POST['password1']) ? $_POST['password1'] : ”;
$password2 = isset($_POST['password2']) ? $_POST['password2'] : ”;
$error = registerUser($username,$password1,$password2);
}
?>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “DTD/xhtml1-transitional.dtd”>
<html>
<head>
<title>Simple Login System</title>
<link href=”style/style.css” rel=”stylesheet” type=”text/css” />
</head>
<body>
<div>
<?php if ((!isset($_POST['submitBtn'])) || ($error != ”)) {?>
<div>Register user</div>
<div>&nbsp;</div>
<form action=”<?php echo $_SERVER['PHP_SELF']; ?>” method=”post”>
<table width=”100%”>
<tr><td>Username:</td><td> <input class=”text” /></td></tr>
<tr><td>Password:</td><td> <input name=”password1″ /></td></tr>
<tr><td>Confirm password:</td><td> <input class=”text” /></td></tr>
<tr><td colspan=”2″ align=”center”><input class=”text” value=”Register” /></td></tr>
</table>
</form>
<?php
}
if (isset($_POST['submitBtn'])){ ?>
<div>Registration result:</div>
<div>&nbsp;</div>
<div>
<table width=”100%”><tr><td><br/>
<?php
if ($error == ”) {
echo ” User: $username telah berhasil terdaftar!<br/><br/>”;
echo ‘ <a href=”login.php”>Login Disini</a>’;
}
else echo $error; ?>
<br/><br/><br/></td></tr></table>
</div>
<?php
}
?>
<div>
<a href=”http://freetutorialwebsite.com”&gt;
FreeTutorialWebsite.com</a></div>
</div>
</body>
4. Membuat file login.php
<?php
require_once(‘common.php’);
$error = ’0′;
if (isset($_POST['submitBtn'])){
// Mengambil input user
$username = isset($_POST['username']) ? $_POST['username'] : ”;
$password = isset($_POST['password']) ? $_POST['password'] : ”;
$error = loginUser($username,$password);
} ?>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “DTD/xhtml1-transitional.dtd”>
<html>
<head>
<title>Simple Login System</title>
<link href=”style/style.css” rel=”stylesheet” type=”text/css” />
</head>
<body>
<div>
<?php if ($error != ”) {?>
<div>Site login</div>
<div>&nbsp;</div>
<form action=”<?php echo $_SERVER['PHP_SELF']; ?>” method=”post”>
<table width=”100%”>
<tr><td>Username:</td><td> <input class=”text” /></td></tr>
<tr><td>Password:</td><td> <input class=”text” /></td></tr>
<tr><td colspan=”2″ align=”center”><input class=”text” value=”Login” /></td></tr>
</table>
</form>
&nbsp;<a href=”register.php”>Register</a>
<?php
}
if (isset($_POST['submitBtn'])){ ?>
<div>Login result:</div>
<div>&nbsp;</div>
<div>
<table width=”100%”><tr><td><br/>
<?php
if ($error == ”) {
echo “Selamat Datang $username! <br/>Anda berhasil login!<br/><br/>”;
echo ‘<a href=”index.php”>Sekarang anda dapat mengunjungi halaman index!</a>’;
}
else echo $error; ?>
<br/><br/><br/></td></tr></table>
</div>
<?php
}
?>
<div>
<a href=”http://freetutorialwebsite.com”&gt;
FreeTutorialWebsite.com</a></div>
</div>
</body>
5. Membuat Logout.php
<?php
require_once(‘common.php’);
logoutUser();
header(‘Location: index.php’);
?>
6. Membuat file style.css
#main {
margin: auto;
border: 1px solid #cccccc;
width: 400px;
font-family: Arial, Helvetica, sans-serif;
font-weight:bold;
font-size : 12px;
background-color: #66FF00;
}
form {
margin-left: 80px;
border: 1px solid #cccccc;
width: 270px;
background: #E9ECEF;
font-family: Arial, Helvetica, sans-serif;
font-weight:bold;
font-size : 12px;
padding:5px;
margin-bottom:10px;
}
#result {
margin-left: 80px;
border: 1px solid #cccccc;
width: 270px;
font-family: Arial, Helvetica, sans-serif;
font-weight:bold;
font-size : 12px;
padding:5px;
margin-bottom:10px;
background-color: #66FF99;
}
.text {
border: 1px solid #cccccc;
}
input {
border: 0px solid #cccccc;
}
.values{
font-family: verdana;
font-weight:normal;
font-size : 10px;
align:top;
vertical-align:top;
}
.key{
font-family: verdana;
font-weight:bold;
font-size : 12px;
padding-bottom:15px;
}
.caption{
font-family: Arial, Helvetica, sans-serif;
font-weight:bold;
margin:10px;
font-size : 14px;
color:#C64934;
}
#icon{
width:80px;
height:80px;
float:left;
background-image:url(sm_secure2.gif);
background-repeat: no-repeat;
background-position:center center;
}
#icon2{
width:80px;
height:80px;
float:left;
background-image:url(warning.gif);
background-repeat: no-repeat;
background-position:center center;
}
#source{
text-align:right;
align:right;
padding-right:10px;
font-family: Arial, Helvetica, sans-serif;
font-weight:normal;
font-size : 10px;
color:#CCCCCC;
}

php tutorial
Membuat ShoutBox

Halo teman-teman, ni wa mo kasih satu lagi tutorial tentang PHP, yaitu bagaimana memuat sebuah shoutbox, shoutbox adalah sebuah aplikasi yang digunakan untuk berinteraksi dengan para pengunjung web, biasanya diletakkan di halaman depan web.
Di sini kita akan membahas bagaimana membuat shoutbox dengan menggunakan PHP & MySql, HTML dan sedikit pengetahuan tentang CSS tentunya..
Database
Buatlah database shoutboxdb di MySql. Gunakan phpMyAdmin atau eksekusi langsung dari command line MySql dengan perintah
CREATE DATABASE shoutboxdb
di dalama database shoutbox, perlu dibuat sebuah tabel untuk menyimpan komentar pengunjung yaitu tabel shoutbox. Tabel ini berisi :
- id
- nama
- email
- komentar
Kode SQL untuk membuat tabel shoutbox adalah :
CREATE TABLE ‘dummy’.'shoutbox’(
id’ INTEGER UNSIGNED NOT NULL AUTO_INCREMENT,
‘nama’ VARCHAR(45)NOT NULL,
‘email’ VARCHAR(45) NOT NULL,
‘komentar’ TEXT NOT NULL,
PRIMARY KEY(‘id’)
);
Koneksi Database
Diperlukan satu file PHP yang digunakan untuk menyimpan data-data mengenai database yang digunakan. ketik kode PHP di bawah ini dan simpan dengan nama db.php
<?php
$host = ‘localhost’;//biasanya localhost
$username = ‘root’//username database
$password = ‘password’;//password database
$database = ‘shoutboxdb’//nama database
?>
Koneksi antara PHP dan MySql tahap berikutnya yaitu interaksi antar PHP dan MySql. PHP digunakan untuk mengambil data shoutbox dari database dan menampilkannya ke web. Sedangkan MySql digunakan untuk menyimpan data shoutbox yang diisi oleh pengunjung web.
ketik kode di bawah dan simpan dengan nama index.php
<html>
<body>
<?php
$self = $_SERVER['PHP_SELF'];
include(‘db.php’);
$connect = mysql_connect($host,$username,$password) or die(‘koneksi ke mysql gagal’); mysql_select_db($dataase,$connect) or die (“koneksi ke databse $database gagal”);
Variabel global $_SERVER['PHP_SELF'] digunakan untuk mendapatkan nama file PHP yang sedang dieksekusi. Dengan menggunakan fungsi include(‘db.php’), artinya seluruh variabel atau fugnsi yang ada di file db.php datpat digunakan di file index.php.$connect menyimpan koneksi ke database agar koneksi dapat terus berlangsung. Bila gagal, akan ditampilkan pesan error “Koneksi ke MySql gagal”.
Setelah menghubungkan PHP dan MySql, lakukan pengecekan apakah form telah dikirim atau tidak. Apabila tidak, maka data shoutbox yang ada di database akan ditampilkan. Tambahkan kode di bawah ini ke file index.php
if(isset($_POST['kirim']))
{ if(empty($_POST['nama']) || empty($_POST['email']) || empty($_POST['komentar'])) { echo(‘anda tidak mengisi shoutbox’); }
else{ $nama = htmlspecialchars(mysql_real_escape_string
($_POST['nama'])); $email = htmlspecialchars(mysql_real_escape_string
($_POST['email'])); $komentar = htmlspecialchars(mysql_real_escape_string
($_POST['komentar'])); $sql = “INSERT INTO shoutbox SET nama=’$nama’, email=’$email’, komentar=’$komentar;’”; if(@mysql_query($sql)){echo(‘Terima kasih…’); }else {echo(‘Pengiriman gagal..’); } } }
Mengambil Data Shoutbox
Nah, sekarang saatnya mengambil data shoutbox yang ada di dalama database tamabahkan kde di bawah ini ke file index.php
$query = “SELECT * FROM shoutbox ORDER BY id DESC LIMIT 8″; $result = @mysql_query($query) or die(‘Gagal mengambil data’); ?> <div><?php while($row = mysql_fetch_array($resul)) {$nama2 = stripslashes($row['nama']); $email2 = stripslashes($row['email']; $komentar2 = stripslashes($row['komentar']; echo ‘<divkomentar”>’.$komentar2.’</div> } ?>
Form
Langkah terakhir yaitu menambajkan form untuk mengirimkan komentar. Tambahkan kode berikut ke file index.php
<form action=”<?php $self?>” method=”post”>
<h2>Shout!</h2>
<p>Name : <input cols=”20″ /></p>
<p>Email : <input cols=”20″ /></p>
<textarea rows=”5″ cols=”22″></textarea>
<input />
<p><input value=”kirim” /></p>
</form>
</div>
</body>
</html>
Variabel $self digunakan sebaai tujuan pengiriman form.
Tanpa CSS, tampilan shoutbox terlihat sederhana saja. Tambahkan sedikit kode CSS di bawah ini pada bagian HEAD dan lihat hasilnya
<style>
#shoutbox{
margin-left:0px;
width:200px;
font-family:Verdana, Arial, Helvetica, sans-serif;
list-style:none;
font-size:x-small;
margin:auto;
padding:10px;
background-color:#33FF33;
border:1px dotted #00cc00;
}
.nama{
color:#fff;
font-weight:700px;
margin-top:10px;
padding:5px;
background:#009900;
}
.komentar{
color:#fff;
padding:5px;
background:#00cc00;
}
</style>

php tutorial
Membuat Subscriber Newslettesr

Dalam sebuah website, perlu adanya sebuah database pengunjung yang bisa digunakan untuk mengirimkan berita-berita atau tips-tips baru kepada mereka. Untuk itu kita harus menambahkan sebuah subscriber di dalamnya. Kebanyakan pemilik blog atau website menggunakan layanan subscriber gratisan yg telah tersedia, seperti feedburner, dll. Tapi sayang, yg gratisan seperti itu biasanya selalu ada iklan di dlmnya, gk asik..Ni ada script utk membuatnya, ni saya dapat dari bukunya Sams Publishing..
ok lets start…
  1. Buat dulu database utk menampung e-mail yg masuk..
CREATE TABLE subscribers (
id int not null primary key auto_increment,
email varchar (150) unique not null
);
Query OK, 0 rows affected (0.00 sec)
  1. Buka program notepad, kemudian copy-kan script di bawah, dansave as manage.php
<?php
//set up a couple of functions
function doDB() {
global $conn;
//connect to server and select database; you may need it
$conn = mysql_connect(“hostname“, “username“, “yourpass“)
or die(mysql_error());
mysql_select_db(“databasename“,$conn) or die(mysql_error());
}
function emailChecker($email) {
global $conn, $check_result;
//check that email is not already in list
$check = “select id from subscribers where email = ‘$email’”;
$check_result = mysql_query($check,$conn) or die(mysql_error());
}
//determine if they need to see the form or not
if ($_POST[op] != “ds”) {
//they do, so create form block
$display_block = “
<form method=POST action=\”$_SERVER[PHP_SELF]\”>
<p><strong>Your E-Mail Address:</strong><br>
<input name=\”email\” size=40 maxlength=150>
<p><strong>Action:</strong><br>
<input name=\”action\” value=\”sub\” checked> subscribe
<input name=\”action\” value=\”unsub\”> unsubscribe
<input type=\”hidden\” name=\”op\” value=\”ds\”>
<br />
<p><input name=\”submit\” value=\”Submit Form\”></p>
</form>”;
} else if (($_POST[op] == “ds”) && ($_POST[action] == “sub”)) {
//trying to subscribe; validate email address
if ($_POST[email] == “”) {
header(“Location: manage.php”);
exit;
}
//connect to database
doDB();
//check that email is in list
emailChecker($_POST[email]);
//get number of results and do action
if (mysql_num_rows($check_result) < 1) {
//add record
//header(“Location: manage.php”);
$sql = “insert into subscribers values(”, ‘$_POST[email]‘)”;
$result = mysql_query($sql,$conn) or die(mysql_error());
$display_block = “<P>Thanks for signing up!</P>”;
} else {
//print failure message
//header(“Location: manage.php”);
$display_block = “<P>You’re already subscribed!</P>”;
}
} else if (($_POST[op] == “ds”) && ($_POST[action] == “unsub”)) {
//trying to unsubscribe; validate email address
if ($_POST[email] == “”) {
header(“Location: manage.php”);
exit;
}
//connect to database
doDB();
//check that email is in list
emailChecker($_POST[email]);
//get number of results and do action
if (mysql_num_rows($check_result) < 1) {
//print failure message
$display_block = “<P>Couldn’t find your address!</P>
<P>No action was taken.</P>”;
} else {
//unsubscribe the address
$id = mysql_result($check_result, 0, “id”);
$sql = “delete from subscribers where id = ‘$id’”;
$result = mysql_query($sql,$conn) or die(mysql_error());
$display_block = “<P>You’re unsubscribed!</p>”;
}
}
?> <?php echo “$display_block”; ?>
  1. Kemudian copy-kan script di bawah ini :
<?php
if ($_POST[op] != “send”) {
//haven’t seen the form, so show it
print “
<HTML>
<HEAD>
<TITLE>Send a Newsletter</TITLE>
</HEAD>
<BODY>
<h1>Send a Newsletter</h1>
<form method=\”post\” action=\”$_SERVER[PHP_SELF]\”>
<P><strong>Subject:</strong><br>
<input type=\”text\” name=\”subject\” size=30></p>
<P><strong>Mail Body:</strong><br>
<textarea name=\”message\” cols=50 rows=10 wrap=virtual></textarea>
<input type=\”hidden\” name=\”op\” value=\”send\”>
<p><input type=\”submit\” name=\”submit\” value=\”Send It\”></p>
</FORM>
</BODY>
</HTML>”;
} else if ($_POST[op] == “send”) {
//want to send form, so check for required fields
if (($_POST[subject] ==”") || ($_POST[message] == “”)) {
header(“Location: sendmymail.php”);
exit;
}
//connect to database
$conn = mysql_connect(“yourhost“, “username“, “yourpass“)
or die(mysql_error());
mysql_select_db(“testDB”,$conn) or die(mysql_error());
//get emails from subscribers list
$sql = “select email from subscribers”;
$result = mysql_query($sql,$conn) or die(mysql_error());
//create a From: mailheader
$headers = “From: peugotwebsite.co.cc <admin@tutorialwebsite.site90.net>\n”;
//loop through results and send mail
while ($row = mysql_fetch_array($result)) {
set_time_limit(0);
$email = $row['email'];
mail(“$email”, stripslashes($_POST[subject]),
stripslashes($_POST[message]), $headers);
print “newsletter sent to: $email<br>”;
}
}
?>

php tutorial
Membuat Counter

Baik kali ini kita akan membuat sebuah script untuk mengetahui jumlah pengunjung, dan juga mengetahui hits dari website kita. Seperti yg terdapat dalam website ini.
  1. Pertama-tama kita membuat database-nya..
CREATE TABLE `counter` (
`count_id` varchar(225) NOT NULL default ”,
`count` longtext NOT NULL,
`hits` longtext NOT NULL
);
  1. Kemudian membuat script untuk configurasi, visitor dan hits-nya.
<?php
session_start();
$dbhost = ‘localhost’;
$dbusername = ‘username‘;
$dbpasswd = ‘yourpass‘;
$database_name = ‘databasename‘;
$connection = mysql_pconnect(“$dbhost”,”$dbusername”,”$dbpasswd”) or die (“Couldn’t
connect to server.”);
$db = mysql_select_db(“$database_name”, $connection) or die(“Couldn’t select database.”);
if (!session_is_registered(“counted”)){
mysql_query(“UPDATE counter SET count=(count + 1) WHERE count_id=1″);
session_register(“counted”);
}
?>
Visitor:
<?php
/* —– tampilkan nilai/value dari table “counter” kolom ke-2 yg berarti kolom “count” ——-
*/
$sql = mysql_query(“SELECT * FROM counter LIMIT 1″);
while($row = mysql_fetch_array($sql)){
echo $row[1];
}
?>
Hits:
<?php
/* —– untuk hits, kita tidak perlu fungsi “IF” ——- */
/* —– Update cell “hits” dengan menambah kan +1 ——- */
mysql_query(“UPDATE counter SET hits=(hits + 1) WHERE count_id=1″);
/* —– tampilkan nilai/value dari table “counter” kolom ke-3 yg berarti kolom “hits” ——- */
/* —– yang telah di update dari dari proses di atas ——- */
$sql = mysql_query(“SELECT * FROM counter LIMIT 1″);
while($row = mysql_fetch_array($sql)){
echo $row[2];
}
?>

php tutorial
Membuat Guestbook

Ni dia bagi teman-teman yang ingin berinteraksi dengan pengunjung, dapat menambahkan sebuah guestbook, selain untuk menunjang sebuah website, guestbook juga berfungsi untuk menerima masukan-masukan dari pengunjung..
Ok deh kalo gitu langsung aja saya menjelaskan source code-nya, kali ini kita menggunakan PHP, dan MySql sebagai database-nya,
Here we go..
  1. Buat dulu database-nya ya..
CREATE TABLE bukutamu (
tanggal DATETIME default ’0000-00-00 00:00:00′,
nama VARCHAR(100) NOT NULL,
lokasi VARCHAR(100) NOT NULL,
email VARCHAR(100) NOT NULL,
url VARCHAR(100) NOT NULL,
referensi VARCHAR(100),
pesan TEXT NOT NULL
);
  1. Buka program notepad, kemudian copy-kan script di bawah, dansave as manage.php
<?
// di bawah ini adalah fungsi untuk membuka koneksi ke mySQL
function connect_db() {
$host=”yourhot“;
$database=”databasename“;
$username=”username“;
$password=”yourpass“;
mysql_connect ($host,$username,$password) or
die (“Tidak dapat konek ke database”);
mysql_select_db($database) or
die(“Tidak dapat memilih database”);
}
//fungsi untuk menampilkan select referensi
function referensi_dari() {
$select=”";
$s = “<select size=1>”;
if ((isset($_POST[referensi])) && ($_POST[referensi]==”teman”) )
$select=”SELECTED”;
$s.=”<option value=teman $select>Teman”;
$select=”";
if ((isset($_POST[referensi])) && ($_POST[referensi]==”google”) )
$select=”SELECTED”;
$s.=”<option value=google $select>Google”;
$select=”";
if ((isset($_POST[referensi])) && ($_POST[referensi]==”yahoo”) )
$select=”SELECTED”;
$s.=”<option value=yahoo $select>Yahoo”;
$select=”";
if ((isset($_POST[referensi])) && ($_POST[referensi]==”milis”) )
$select=”SELECTED”;
$s.=”<option value=milis $select>Mailing List”;
$select=”";
$s.=”</select>”;
return $s;
}
//fungsi untuk mengecek validitas email
function is_email(&$m){
if(ereg (“^.+@.+\\..+$”, $m)){
$mail = explode(“@”, $m);
$email_user = $mail[0];
$email_host = $mail[1];
return 1;
}
return 0;
}
//pemanggilan fungsi untuk membuka koneksi ke database
connect_db();
//inisilalisasi variable
$pesan_error=”";
$form1=”<FORM method=post action=bukutamu.php?act=ok><TABLE align=center>”;
$form2=”";
$form3=”<TR><TD>&nbsp;</TD><TD><INPUT type=submit value=Kirim></TD></TR><TABLE></FORM>”;
$navigasi=”<br><Table align=center><TR><TD><a href=bukutamu.php>Isi Buku tamu</a> | <a href=bukutamu.php?act=lihat>Lihat Buku tamu</a></TD></TR></TABLE>”;
//judul bukutamu
echo “<center><h3>Mirza Ilhami + PHP + MySQL Guesbook!</h3></center>”;
if ( (isset($_GET['act'])) && ($_GET['act']==”ok”) ){
//STEP-2
//checking pengisian input fieldnya
if (empty($_POST['nama'])) {
$pesan_error.=”<li>Silahkan isi kotak nama</li>”;
}
$form2.=”<TR><TD align=right>Nama :</TD><TD><INPUT size=40  value=\”$_POST[nama]\”></TD></TR>”;
//cheking lokasi
if (empty($_POST['lokasi'])) {
$pesan_error.=”<li>Silahkan isi dimana lokasi anda</li>”;
}
$form2.=”<TR><TD align=right>Lokasi :</TD><TD><INPUT size=40 value=$_POST[lokasi]></TD></TR>”;
//cheking email
if (!is_email($_POST['email'])){
$pesan_error .=”<li>Alamat email anda invalid</li>”;
}
$form2.=”<TR><TD align=right>Email :</TD><TD><INPUT size=40 value=$_POST[email]></TD></TR>”;
//kotak url tidak dicheking
$form2.=”<TR><TD align=right>URL :</TD><TD><INPUT size=40 value=$_POST[url]></TD></TR>”;
//tampilkan select referensi
$form2.=”<TR><TD align=right>Tahu web ini dari :</TD><TD>”.referensi_dari().”</TD></TR>”;
//cheking textarea untuk pesan
if (empty($_POST['pesan'])) {
$pesan_error.=”<li>Silahkan isi kotak pesannya</li>”;
}
$form2.=”<TR><TD valign=top align=right>Pesan :</TD><TD><textarea cols=40 rows=7>$_POST[pesan]</textarea></TD></TR>”;
//chek apakah $pesan_error tidak ada
//jika tidak ada lagnsung action ke pemasukankan database
//STEP-4
if (empty($pesan_error)){
$waktu=date(“Y-m-d H:m:s”);
$filter_pesan=htmlentities($_POST['pesan']);
$sql=”INSERT INTO bukutamu  VALUES(‘$waktu’,'$_POST[nama]‘,’$_POST[lokasi]‘,
‘$_POST[email]‘,’$_POST[url]‘,’$_POST[referensi]‘,
‘$filter_pesan’)”;
if (mysql_unbuffered_query($sql) ){
echo “<center>Terima kasih telah mengisi guesbook-ku. God Bless You.<br></center>”;
}
else{
echo “<center>Mohon Maaf, database sedang dalam perbaikan.<br></center>”;
}
echo $navigasi;
}else { //jika terdapat pesan error do this konfirmasi
//STEP-3
echo “<TABLE align=center><TR><TD><b>Ada kesalahan di form buku tamu yang anda isi:</b></TD></TR>”;
echo “<TR><TD>”.$pesan_error.”</TD></TR></TABLE>”;
echo $form1;
echo $form2;
echo $form3;
echo $navigasi;
}//end dari else konfirmasi
} else if ( (isset($_GET['act'])) && ($_GET['act']==”lihat”) ) {
//di sini adalh section untuk melihat buku tamu
//STEP-5
$sql=”SELECT* FROM bukutamu”;
$hasil=mysql_query($sql);
if (mysql_numrows($hasil)>0){
while ($baris=mysql_fetch_row($hasil)){
$TGL=$baris[0];
$NAMA=$baris[1];
$LOKASI=$baris[2];
$EMAIL=$baris[3];
$URL=$baris[4];
$REFERENSI=$baris[5];
$PESAN=$baris[6];
echo “<TABLE align=\”center\” width=400>”;
echo “<TR><TD colspan=2>$TGL</TD></TR>”;
echo “<TR><TD width=80><b>Nama</b> </TD><TD align=left>$NAMA</TD></TR>”;
echo “<TR><TD><b>Lokasi</b></TD><TD align=left>$LOKASI</TD></TR>”;
echo “<TR><TD><b>Email</b></TD><TD align=left>$EMAIL</TD></TR>”;
echo “<TR><TD><b>URL</b></TD><TD align=left>$URL</TD></TR>”;
echo “<TR><TD><b>Referensi</b></TD><TD align=left>$REFERENSI</TD></TR>”;
echo “<TR><TD><b>Pesan</b></TD><TD>&nbsp;</TD></TR>”;
echo “<TR><TD colspan=2>$PESAN</TD></TR>”;
echo “</TABLE><br><br>”;
}
echo $navigasi;
} else {
echo “Data guestbook masih kosong”;
}
} else {
//STEP-1
echo $form1;
echo “<TD align=right>Nama :</TD><TD><INPUT size=40></TD></TR>”;
echo “<TR><TD align=right>Lokasi :</TD><TD><INPUT     size=40></TD></TR>”;
echo “<TR><TD align=right>Email :</TD><TD><INPUT size=40></TD></TR>”;
echo “<TR><TD align=right>URL :</TD><TD><INPUT size=40 value=http://></TD></TR>”;
echo “<TR><TD align=right>Tahu web ini dari :</TD><TD>”.referensi_dari().”</TD></TR>”;
echo “<TR><TD valign=top align=right>Pesan :</TD><TD><textarea cols=40 rows=7></textarea></TD></TR>”;
echo $form3;
echo $navigasi;
}
?>

php tutorial
Mengetahui User Online

Dengan script ini, kita akan mengetahui berapa orang user online di halaman website, baik yg sudah jadi member atau belum menjadi member..
Ok Kita mulai ya..
  1. Buat dulu database-nya ya..
CREATE TABLE dy_sessions (
session_id varchar(70) NOT NULL default ”,
session_username varchar(40) default NULL,
session_usermode varchar(5) default NULL,
session_time varchar(40) default NULL,
session_visit varchar(40) default NULL,
session_address varchar(125) default NULL,
session_page varchar(255) default NULL,
PRIMARY KEY (session_id)
)
TYPE=MyISAM;
  1. Buka program notepad, kemudian copy-kan script di bawah, dansave as bukutamu.php
<?php
$sqlhost=”localhost”; 
//MySQL host
$sqluser=”username-mu”; 
//MySQL user
$sqlpasswd=”password-mu”; 
//MySQL password
/* MySQL Database and Table PrefixDatabase ganti dengan nama database kamu*/
$sqldb=”db_member”; //database
$prefix=”member_”; //table prefix
// Sekarang lakukan Koneksi ke database MySQL
$conn=mysql_connect(“$sqlhost”,”$sqluser”,
“$sqlpasswd”)or die(“<palign=center>CAN NOT CONNECT TO MYSQL SERVER”);
mysql_select_db($sqldb) or die(“Warning database not exists!”);
//Global Variable/* register global untuk variable terutama jika register_global=off */
extract($_SERVER,”EXTR_PREFIX_SAME”);
extract($HTTP_ENV_VARS,”EXTR_PREFIX_SAME”);
extract($HTTP_GET_VARS,”EXTR_PREFIX_SAME”);
extract($HTTP_POST_VARS,”EXTR_PREFIX_SAME”);

//timezone format
$gmt=date(“Z”);
//Session Time
$session_time=date(“U”);
//session ID
$session_id=session_id();
//cek apakah sudah login atau belum
if (!$HTTP_SESSION_VARS["userakses"]) {
$session_user=”Guest”;
$session_mode=”-1″;
}
else
{
$session_user=$HTTP_SESSION_VARS["userakses"];
$session_mode=$HTTP_SESSION_VARS["usermode"];
}
//mengambil record lama session dari database
$sesGet=mysql_query(“select * from “. $prefix .
“sessions wheresession_id=’$session_id’”);
$session=mysql_fetch_array($sesGet);
//IP address
$ipaddress=$REMOTE_ADDR;
//update user session jika suda ada dan jika
tidak ada bikin baru
if ($session[session_id]) {
mysql_query(“update “. $prefix .”sessions setsession_time=’$session_time’, session_page=’”.
$REQUEST_URI .”‘,session_username=’$session_user’, session_address=’$ipaddress’,session_usermode=
‘$session_mode’ where session_id=’$session_id’”);
}
else {
mysql_query(“insert into “. $prefix .”sessions(session_time,session_visit,
session_username,session_usermode,
session_id,session_address,session_page)
values(‘$session_time’,'$session_time’,
‘$session_user’,
‘$session_mode’,
‘$session_id’,'$ipaddress’,'”. $REQUEST_URI .”‘
)
“);}
//Batas Session Time
$cekSess=$session_time-300;
//Total Semua yang online
$sesGets=mysql_query(“select count(*) from “. 
$prefix .
“sessions where session_time>=’$cekSess’”);
$session_crt=mysql_fetch_row($sesGets);
//Total online non member
$sesGetss=mysql_query(“select count(*) from “. $prefix .
“sessions wheresession_time>=’$cekSess’ and
session_usermode<=0″);
$session_crts=mysql_fetch_row($sesGetss);
//Total Online Member
$sesGetsss=mysql_query(“select count(*) from “. $prefix .
“sessions wheresession_time>=’$cekSess’ and 
session_usermode>=1″);
$session_crtss=mysql_fetch_row($sesGetsss);
//Hapus session yang sudak ekspire
mysql_query(“delete from “. $prefix .”sessions wheresession_time<’$cekSess’”);
echo “Online $session_crt[0] : Member 
$session_crtss[0] – Non Member$session_crts[0]“;
?>

php tutorial
PHP Validation and Verification

Pasti teman-teman tidak asing lagi dengan validation and verification, ya sekarang kita akan membahas bagaimana mengatasi human error saat mengisi form, baik itu form guestbook, form member dll. Sering para pengunjung melakukan salah input ke dlm form, untuk mengatasi masalah tersebut saya akan memberikan tutorial bagaimana untuk membuat validasi, kali ini kita membuat nya dengan php, kawan-kawan juga bisa menggunakan javascript.
Pertama kita membutuhkan beberapa field yg disertakan di dlm form registrasi:
  • Full Name
  • Address
  • Passport
  • E-Mail
  • Phone
  • Zip Code
  • Date
  • Username
  • Password
Kemudian kita harus mendefinisikan beberapa variabel untuk menampung pesan error nantinya. Value-nya harus di kosongkan setiap kali kita me-reload halaman.
  • $errName = “”;
  • $errAddress = “”;
  • $errEmail = “”;
  • $errPassport = “”;
  • $errPhone = “”;
  • $errZip = “”;
  • $errDate = “”;
  • $errUser = “”;
  • $errPass = “”;
Setelah membuat variable penampungnya, kita harus membuat sebuah pengecekan yg berfungsi untuk mengecek terhadap field-field yg diinput oleh user, kita akan menggunakan fungsi preg_match() untuk mengeceknya, karena fungsi ini lebih cepat dan support terhadap syntax umum regular expression
Pertama kita akan mulai dengan validasi user name. Kita hanya mengizinkan huruf saja, spasi dan tanda pisah.
//Full Name must contain letters, dashes and spaces only and must start with upper case letter.
if(preg_match(“/^[A-Z][a-zA-Z -]+$/”, $_POST["name"]) === 0)
$errName = ‘<p>Name must be from letters, dashes, spaces and must not start with dash</p>’;
Kedua kita membuat validasi alamat. Disini kita akan mengecek apakah karakter yg diisi salah satu dari a-z, A-Z, 0-9, spasi, underscore, tanda pisah, titik, comma, titik dua, double and sigle tanda kutip
// Address must be word characters only
if(preg_match(“/^[a-zA-Z0-9 _-.,:\"\']+$/”, $_POST["address"]) === 0)
$errAddress = ‘<p>Address must be only letters, numbers or one of the following _ – . , : ” ‘</p>’;
Ketiga kita membuat validasi E-Mail. Kita akan mengecek apakah e-mail yg diisi diikuti dengan tanda @ dan diakhir kita harus mengecek apakah terdapat tanda. dan diikuti 2 atau 4 kata sesudahnya.
// Email mask
if(preg_match(“/^[a-zA-Z]\w+(\.\w+)*\@\w+(\.[0-9a-zA-Z]+)*\.[a-zA-Z]{2,4}$/”, $_POST["email"]) === 0)
$errEmail = ‘<p>Email must comply with this mask: chars(.chars)@chars(.chars).chars(2-4)</p>’;
Setelah itu kita membuat validasi untuk passport, passport biasanya terdiri dari 10 atau 12 digits nomor.
/ Passport must be only digits
if(preg_match(“/^\d{10}$|^\d{12}$/”, $_POST["passport"]) === 0)
$errPassport = ‘<p>Passport must be 10 or 12 digits</p>’;
Kemudian kita membuat validasi phone, misalnya kita menggunakan kode telepon daerah medan, untuk itu kita akan mengecek apakah nomor yg diisi dimulai dengan 061 diikuti dengan tanda – dan diikuti dengan 7 digit nomor.
// Phone mask 061-1111111
if(preg_match(“/^\d{3}-\d{7}$/”, $_POST["phone"]) === 0)
$errPhone = ‘<p>Phone must comply with this mask: 061-1111111 </p>’;
Untuk zip code kita hanya mengecek apakah yg diisi terdiri dari 5 digits angka.
// Zip must be 5 digits
if(preg_match(“/^\d{5}$/”, $_POST["zip"]) === 0)
$errZip = ‘<p>Zip must be 4 digits</p>’;
Nah, sekarang kita membuat validasi untuk tanggal, bulan, dan tahun. Semua harus terdiri dari angka 0-9. Untuk tanggal dan bulan terdiri dari 2 digits, tahun terdiri 4 digits. Formatnya DD-MM-YYYY.
// Date mask DD-MM-YYYY
if(preg_match(“/^[0-9]{1,2}-[0-9]{1,2}-[0-9]{4}$/”, $_POST["date"]) === 0)
$errDate = ‘<p>Date must comply with this mask: DD-MM-YYYY </p>’;
Hal terakhir yg harus dicek dalam form registrasi adalah username dan password, username terdiri dari huruf, angka, underscore. Username juga harus lebih dari 5 karakter.
// User must be digits and letters
if(preg_match(“/^[0-9a-zA-Z_]{5,}$/”, $_POST["user"]) === 0)
$errUser = ‘<p>User must be bigger that 5 chars and contain only digits, letters and underscore</p>’;
Untuk membuat password yg benar-benar kuat, password tsb harus terdiri dari satu huruf kecil, satu huruf besar, dan satu angka. Password juga harus terdiri 8 digits.
// Password must be strong
if(preg_match(“/^.*(?=.{8,})(?=.*[0-9])(?=.*[a-z])(?=.*[A-Z]).*$/”, $_POST["pass"]) === 0)
$errPass = ‘<p>Password must be at least 8 characters and must contain at least one lower case letter, one upper case letter and one digit</p>’;
}

php tutorial
Membuat Formulir Online

Salah satu bagian penting dari sebuah website adalah fasilitas pengisian formulir online, baik untuk keperluan pemesanan, kontak ke pemilik website atau untuk pendaftaran secara online. Pada bagian ini akan dibahas pembuatan formulir online yang data isiannya dikirimkan ke alamat e-mail tertentu.
Algoritma’a adalah
1. Membuat formulir dengan menggunakan tag FORM pada HTML. Dengan data yang dimasukkan adalah nama, e-mail, alamat, kota, telepon dan pesanan.
2. Semua data masukkan disimpan dalam beberapa variable dan dikirimkan ke sebuah file PHP lain yang fungsinya untuk menerima variable yang dikirimkan oleh formulir.
3. Mengirimkan ke alamat e-mail tertentu yang isinya sesuai yang diisikan pada formulir.
4. Selesai
Save as file berikut dengan nama forumulir1.php
<html>
<head>
<title>
Formulir Online
</title>
</head>
<body bgcolor=”#FFFFFF”>
<form action=formulir2.php method=POST>
<font face=verdana size=2 color=”#000000″>
<h3 align=left>
FORMULIR ONLINE
</h3>
</font>
<pre>
Nama : <input size=15>
E-Mail : <input size=20>
Alamat : <input size=20>
Kota : <input size=12>
Telepon : <input size=12>
Tulis pesanan Anda dibawah ini:
<textarea rows=5 cols=30>
</textarea>
<input value=”Kirim”> <input value=”Hapus”>
</pre>
</form>
</body>
</html>

javacript tutorial
Membuat Jam Analog

Ni ada script untuk menampilkan jam analog, semua’a dibuat menggunakan karakter-karakter, tidak menggunakan image.
Copy script ini ke notepad and save dengan ektensi html..
<html>
<head>
<title>Jam Analog</title>
<style>
.jarum{
font-family:’Times New Roman’;
font-size:20px;
font-weight:bold;
position:absolute;
top:0px;
left:0px;
z-index:10;
}
.angka{
font-family:arial;
font-size:9px;
font-weight:bold;
position:absolute;
top:0px;
left:0px;
text-align:center;
z-index:10;
}
</style> <script>
var rdetik=new Array(0,9,18,27,36);
var rmenit=new Array(0,7,14,21,28);
var rjam= new Array(0,6,12,18,24);
var pi=Math.PI;
var yd=new Array;
var xd=new Array;
var ym=new Array;
var xm=new Array;
var yj=new Array;
var xj=new Array;
var ypos=50;
var xpos=60;
sudutdetik=0;
var xdetik=0;
var ydetik=0;
sudutmenit=0;
var xmenit=0;
var ymenit=0;
sudutjam=0;
var xjam=0;
var yjam=0;
function jam(){
var waktu=new Date();
var detik=waktu.getSeconds();
var menit=waktu.getMinutes();
var jam=waktu.getHours();
sudutdetik=-(pi/180*90)+(pi/30*detik);
sudutmenit=-(pi/180*90)+(pi/30*menit);
sudutjam=-(pi/180*90)+(pi/6*jam)+(pi/360*menit);
for(i=0;i<rdetik.length;i++){
yd[i]=Math.round(rdetik[i]*Math.sin(sudutdetik));
xd[i]=Math.round(rdetik[i]*Math.cos(sudutdetik));
ym[i]=Math.round(rmenit[i]*Math.sin(sudutmenit));
xm[i]=Math.round(rmenit[i]*Math.cos(sudutmenit));
yj[i]=Math.round(rjam[i]*Math.sin(sudutjam));
xj[i]=Math.round(rjam[i]*Math.cos(sudutjam));
}
for(i=0;i<rdetik.length;i++){
ydetik=yd[i]+ypos;
xdetik=xd[i]+xpos;
ymenit=ym[i]+ypos;
xmenit=xm[i]+xpos;
yjam=yj[i]+ypos;
xjam=xj[i]+xpos;
eval(‘document.all.iddetik’+i+’.style.top=’+ydetik);
eval(‘document.all.iddetik’+i+’.style.left=’+xdetik);
eval(‘document.all.idmenit’+i+’.style.top=’+ymenit);
eval(‘document.all.idmenit’+i+’.style.left=’+xmenit);
eval(‘document.all.idjam’+i+’.style.top=’+yjam);
eval(‘document.all.idjam’+i+’.style.left=’+xjam);
}
waktu=null;
detik=null;
menit=null;
jam=null;
setTimeout(“jam()”,1000);
}
function angkajam(){
var x=0;
var y=0;
var radius=40;
var sudutangka=150;
for(i=1;i<=12;i++){
x=radius*Math.sin(sudutangka*pi/180);
x+=xpos-2;
y=radius*Math.cos(sudutangka*pi/180);
y+=ypos+10;
sudutangka-=30;
eval(‘document.all.angka’+i+’.style.top=’+y);
eval(‘document.all.angka’+i+’.style.left=’+x);
}
jam();
}
</script>
</head> <body>
<!– ANGKA –>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
<div>11</div>
<div>12</div>
<!– JAM –>
<div style=”color:red”>.</div>
<div style=”color:red”>.</div>
<div style=”color:red”>.</div>
<div style=”color:red”>.</div>
<div style=”color:red”>.</div>
<!– MENIT –>
<div style=”color:blue”>.</div>
<div style=”color:blue”>.</div>
<div style=”color:blue”>.</div>
<div style=”color:blue”>.</div>
<div style=”color:blue”>.</div>
<!– DETIK –>
<div style=”color:black”>.</div>
<div style=”color:black”>.</div>
<div style=”color:black”>.</div>
<div style=”color:black”>.</div>
<div style=”color:black”>.</div>
</body>
</html>
Setelah file di atas save, kemudian kita membuat script berikutnya, save as file ini dengan nama formulir2.php
<html>
<head>
<title>
Formulir Online
</title>
</head>
<body bgcolor=”#FFFFFF”>
<font face=verdana size=2 color=”#000000″>
<h3 align=left>
FORMULIR ONLINE
</h3>
</font>
<pre>
<?php
// —– buat header email
$to=”mirza.ilhami@yahoo.com”;//hanya contoh saja
$subject=”Formulir Online”;
$from=”From: $nama <$email>”;
// —– isi email
$content=”";
$content.=”Formulir Online\n”;
$content.=”Nama : $nama\n”;
$content.=”E-Mail : $email\n”;
$content.=”Alamat : $alamat\n”;
$content.=”Kota : $kota\n”;
$content.=”Telepon : $telepon\n”;
$content.=”Pesanan Anda:\n”;
$content.=”$pesanan\n”;
// —– kirim ke email
mail($to,$subject,$content,$from);
// —– tampilkan pesan di browser
echo(“Terima kasih, data yang Anda kirimkan sebagai berikut:\n”);
echo(“Nama : $nama\n”);
echo(“E-Mail : $email\n”);
echo(“Alamat : $alamat\n”);
echo(“Kota : $kota\n”);
echo(“Telepon : $telepon\n”);
echo(“\n”);
echo(“Pesanan Anda:\n”);
?>
</pre>
<?php
echo(“$pesanan”);
?>
</body>
</html>

javacript tutorial
Efek Bubble di Halaman Web

Dibandingkan dengan efek salju, sepertinya yang satu ini lebih keren, konsep’a sama saja dengan efek salju, tapi klo yang satu ini memerlukan sebuah file image untuk membuat’a seolah-olah seperti gelembung-gelembung air.
Script ini termasuk baru juga, karena setelah keliling website tutorial website yang lain kesana-kemari belum menemukan yang memakai script ini.
Pokok’a keren deh, coba di tes aja ntar ya..
<html>
<BODY>
<script> var no = 50; // Banyaknya gelembung yang ingin ditampilkan, mis: 50 gelembung
var speed = 1; // kecepatan dari gerak gelembung, semakin kecil semakin cepat
var snow = new Array();
snow[0] = “bubble.gif” // file image yang dibutuhkan
snow[1] = “bubble.gif”
snow[2] = “bubble.gif” var ns4up = (document.layers) ? 1 : 0; // browser sniffer
var ie4up = (document.all) ? 1 : 0;
var ns6up = (document.getElementById&&!document.all) ? 1 : 0;
var dx, xp, yp; // koordinat and posisi variabel
var am, stx, sty; // amplitude and step variablel
var i, doc_width = 800, doc_height = 1800; if (ns4up||ns6up) {
doc_width = self.innerWidth;
doc_height = self.innerHeight;
} else if (ie4up) {
doc_width = document.body.clientWidth;
doc_height = document.body.clientHeight;
} dx = new Array();
xp = new Array();
yp = new Array();
am = new Array();
stx = new Array();
sty = new Array();
j = 0; for (i = 0; i < no; ++ i) {
dx[i] = 0; // set koordinate variabel
xp[i] = Math.random()*(doc_width-50); // set posisi variabel
yp[i] = Math.random()*doc_height;
am[i] = Math.random()*20; // set amplitude variabel
stx[i] = 0.02 + Math.random()/10; // set step variabel
sty[i] = 0.7 + Math.random(); // set step variabel
if (ns4up) { // set layers
if (i == 0) {
document.write(“<layer name=\”dot”+ i +”\” left=\”15\” top=\”15\” visibility=\”show\”><img src=\”"+ snow[j] + “\” border=\”0\”></layer>”);
} else {
document.write(“<layer name=\”dot”+ i +”\” left=\”15\” top=\”15\” visibility=\”show\”><img src=\”"+ snow[j] + “\” border=\”0\”></layer>”);
} } else if (ie4up||ns6up) { if (i == 0)
{
document.write(“<div id=\”dot”+ i +”\” style=\”POSITION: absolute; Z-INDEX: “+ i +”VISIBILITY: visible; TOP: 15px; LEFT: 15px; width:1;\”><img src=\”" + snow[j] + “\” border=\”0\”></div>”);
} else {
document.write(“<div id=\”dot”+ i +”\” style=\”POSITION: absolute; Z-INDEX: “+ i +”VISIBILITY: visible; TOP: 15px; LEFT: 15px; width:1;\”><img src=\”" + snow[j] + “\” border=\”0\”></div>”);
}
}
if (j == (snow.length-1)) { j = 0; } else { j += 1; }
} function snowNS() { // Fungsi animasi untuk Netscape
for (i = 0; i < no; ++ i) { // iterasi untuk setiap dot
yp[i] -= sty[i]; if (yp[i] < -50) {
xp[i] = Math.random()*(doc_width-am[i]-30);
yp[i] = doc_height;
stx[i] = 0.02 + Math.random()/10;
sty[i] = 0.7 + Math.random();
doc_width = self.innerWidth;
doc_height = self.innerHeight; }
dx[i] += stx[i];
document.layers["dot"+i].top = yp[i]+pageYOffset;
document.layers["dot"+i].left = xp[i] +
am[i]*Math.sin(dx[i]);
}
setTimeout(“snowNS()”, speed);
} function snowIE_NS6() { // Fungsi animasi untuk IE
for (i = 0; i < no; ++ i) { // iterasi untuk setiap dot
yp[i] -= sty[i];
if (yp[i] < -50) {
xp[i] = Math.random()*(doc_width-am[i]-30);
yp[i] = doc_height;
stx[i] = 0.02 + Math.random()/10;
sty[i] = 0.7 + Math.random();
doc_width = ns6up?window.innerWidth-5:document.body.clientWidth;
doc_height = ns6up?window.innerHeight-5:document.body.clientHeight;
}
dx[i] += stx[i];
if (ie4up){
document.all["dot"+i].style.pixelTop = yp[i]+document.body.scrollTop;
document.all["dot"+i].style.pixelLeft = xp[i] + am[i]*Math.sin(dx[i]);
}
else if (ns6up){
document.getElementById(“dot”+i).style.top=yp[i]+
pageYOffset;
document.getElementById(“dot”+i).style.left=xp[i] + am[i]*Math.sin(dx[i]);
}
}
setTimeout(“snowIE_NS6()”, speed);
} if (ns4up) {
snowNS();
} else if (ie4up||ns6up) {
snowIE_NS6();
}
// akhir –>
</script>
</body>
</html>

javacript tutorial
Membuat Nostree

Ni ada satu lagi tutorial keren, membuat menu tree, menu tree ini bisa kita tempatkan di bagian kiri sebuah halaman website. Ya bentuknya persis seperti tree yang di windows explorer komputer kita.
Untuk membuatnya, ada beberapa file yang harus kita persiapkan.
1. tree.css
2.tree_format.js
3. tree_nodes
4. nostree.js
Pertama kita buat file tree.css-nya, file ini gunanya untuk membuat style menu tree kita
BODY, TD, TH, A, P,H1,H2,H3{
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
} .clsNode, .clsNode:visited{
color: black;
font-weight : bold;;
font-size : 9pt;
text-decoration : none;
}
.clsNode:hover{
color: blue;
font-weight : bold;;
font-size : 9pt;
text-decoration : underline;
}
Kemudian kita membuat file tree_format.js
var TREE_FORMAT =
[
//0. left position
0,
//1. top position
5,
//2. show +/- buttons
true,
//3. couple of button images (collapsed/expanded/blank)
["img/c.gif", "img/e.gif", "img/b.gif"],
//4. size of images (width, height,ident for nodes w/o children)
[16,16,16],
//5. show folder image
true,
//6. folder images (closed/opened/document)
["img/fc.gif", "img/fe.gif", "img/i.gif"],
//7. size of images (width, height)
[16,16],
//8. identation for each level [0/*first level*/, 16/*second*/, 32/*third*/,...]
[0,16,32,48],
//9. tree background color (“” – transparent)
“”,
//10. default style for all nodes
“clsNode”,
//11. styles for each level of menu (default style will be used for undefined levels)
[],//["clsNodeL0","clsNodeL1","clsNodeL2",
"clsNodeL3","clsNodeL4"],
//12. true if only one branch can be opened at same time
false,
//13. item pagging and spacing
[0,2],
];
Setelah itu, kita membuat file tree_nodes.js, file ini untuk mengatur link yg jika pengunjung meng-klik menu tersebut.
var TREE_NODES = [
['Web Basic', null, null,
['HTML Tutorial', 'http://www.freetutorialwebsite.com/html_tutorial', '_top'],
['CSS Tutorial', 'http://www.freetutorialwebsite.com/css_tutorial', '_top'],
['SEO Tutorial', null, null,
['Optimasi Search Engine', 'http://www.freetutorialwebsite.com/seo_tutorial', '_top'],
['Belajar Membuat Website', 'http://www.freetutorialwebsite.com', '_top'],
['Belajar Membuat Website', 'http://www.freetutorialwebsite.com', '_top'],
],
],
['Web Dynamic', null, null,
['Javascript Tutorial', 'http://www.freetutorialwebsite.com/
javascript_tutorial', '_top'],
['PHP Tutorial','http://www.freetutorialwebsite.com/
php_tutorial', '_top'],
['Ajax Tutorial', 'http://www.freetutorialwebsite.com/ajax_tutorial', '_top'],
]
];
Yang terakhir kita membuat file nostree.js
function NTreeFormat( fmt, tree )
{
this.init = function( fmt, tree )
{
this.left = fmt[0];
this.top = fmt[1];
this.showB = fmt[2];
this.clB = fmt[3][0];
this.exB = fmt[3][1];
this.iE = fmt[3][2];
this.Bw = fmt[4][0];
this.Bh = fmt[4][1];
this.Ew = fmt[4][2];
this.showF = fmt[5];
this.clF = fmt[6][0];
this.exF = fmt[6][1];
this.iF = fmt[6][2];
this.Fw = fmt[7][0];
this.Fh = fmt[7][1];
this.ident = fmt[8];
this.back = new NTreeBack(this.left, this.top, fmt[9], ‘cls’+tree.name+’_back’);
this.nst = fmt[10];
this.nstl = fmt[11];
this.so = fmt[12];
this.pg = fmt[13][0];
this.sp = fmt[13][1];
//preloading
if (this.showB){
this.e = new Image();
this.e.src = this.clB;
this.e1 = new Image();
this.e1.src = this.exB;
this.e5 = new Image();
this.e5.src = this.iE;
}
if (this.showF){
this.e2 = new Image();
this.e2.src = this.exF;
this.e3 = new Image();
this.e3.src = this.clF;
this.e4 = new Image();
this.e4.src = this.iF;
}
}
this.nstyle = function ( lvl )
{
return ( und(this.nstl[lvl]) ) ? this.nst : this.nstl[lvl];
}
this.idn = function( lvl )
{
var r = ( und(this.ident[lvl]) ) ? this.ident[0]*lvl : this.ident[lvl];
return r;
}
this.init(fmt, tree);
}
function NosTree( name, nodes, format )
{
this.name = name;
this.fmt = new NTreeFormat(format, this);
NTrees[this.name] = this;
this.Nodes = new Array();
this.rootNode = new NTreeNode(null, “”, “”, “”, null);
this.rootNode.treeView = this;
this.selectedNode = null;
this.maxWidth = 0;
this.maxHeight = 0;
this.ondraw = null;
this.nbn = function( nm ){
for (var i = 0;i<this.Nodes.length;i++)
if (this.Nodes[i].text == nm)
return this.Nodes[i];
return null;
}
this.addNode = function (node)
{
var parentNode = node.parentNode;
this.Nodes = this.Nodes.concat([node]);
node.index = this.Nodes.length – 1;
if (parentNode == null) {
this.rootNode.children = this.rootNode.children.concat([node]);
}
else
parentNode.children = parentNode.children.concat([node]);
return node;
}
this.rebuildTree = function()
{
var s = “”;
for (var i = 0; i < this.Nodes.length; i++){
s += this.Nodes[i].init();
}
document.write(s);
for (var i = 0; i < this.Nodes.length; i++)
if (bw.ns4) {
this.Nodes[i].el = document.layers[this.Nodes[i].id()+”d”];
if (this.fmt.showF)
this.Nodes[i].nf = this.Nodes[i].el.document.images
[this.Nodes[i].id()+”nf”];
if (this.fmt.showB)
this.Nodes[i].nb = this.Nodes[i].el.document.images
[this.Nodes[i].id()+”nb”];
} else {
this.Nodes[i].el = document.all? document.all[this.Nodes[i].id()+”d”] : document.getElementById(this.Nodes[i].id()+”d”);
if (this.fmt.showB)
this.Nodes[i].nb = document.all? document.all[this.Nodes[i].id()+”nb”] : document.getElementById(this.Nodes[i].id()+”nb”);
if (this.fmt.showF)
this.Nodes[i].nf = document.all? document.all[this.Nodes[i].id()+”nf”] : document.getElementById(this.Nodes[i].id()+”nf”);
}
}
this.draw = function()
{
this.currTop = this.fmt.top;
this.maxHeight =0; this.maxWidth=0;
for (var i = 0; i < this.rootNode.children.length; i++)
this.rootNode.children[i].draw(true);
this.fmt.back.resize(this.maxWidth-this.fmt.left, this.maxHeight – this.fmt.top);
if (this.ondraw != null) this.ondraw();
}
this.updateImages = function ( node )
{
var srcB = node.expanded? this.fmt.exB : this.fmt.clB;
var srcF = node.expanded? this.fmt.exF : this.fmt.clF;
if (node.treeView.fmt.showB &&
node.nb && node.nb.src != srcB) node.nb.src = srcB;
if (node.treeView.fmt.showF &&
node.nf && node.nf.src != srcF) node.nf.src = node.hasChildren() ? srcF : this.fmt.iF;
}
this.expandNode = function( index )
{
var node = this.Nodes[index];
if (!und(node) && node.hasChildren())
{
node.expanded = !node.expanded;
this.updateImages(node);
if (!node.expanded){
node.hideChildren();
} else {
if (this.fmt.so && node.parentNode == null)
{
for (var i = 0; i < this.Nodes.length; i++){
this.Nodes[i].show(false);
if ( this.Nodes[i] != node && this.Nodes[i].parentNode == null) {
this.Nodes[i].expanded = false;
this.updateImages(this.Nodes[i]);
}
}
}
}
this.draw();
}
} this.selectNode = function( index )
{
var node = this.Nodes[index];
if ( !und(node) )
this.selectedNode = node;
node.draw();
}
this.readNodes = function (nodes)
{
var ind = 0;
var par = null;
function readOne( arr , tree)
{
if (und(arr)) return;
var text = arr[0];
var url = arr[1] == null? “javascript:none()”: arr[1];
var targ = arr[2] == null? “”: arr[2];
var node = tree.addNode(new NTreeNode(tree, par, text, url, targ))
var i = 3;
while (!und(arr[i]))
{
par = node;
readOne(arr[i], tree);
i++;
}
}
if (und(nodes) || und(nodes[0]) || und(nodes[0][0])) return;
for (var i = 0; i < nodes.length; i++){
par = null;
readOne(nodes[i], this);
}
}
this.collapseAll = function( rd )
{
for (var i = 0; i < this.Nodes.length; i++){
if (this.Nodes[i].parentNode != this.rootNode)
this.Nodes[i].show(false);
this.Nodes[i].expanded = false;
this.updateImages(this.Nodes[i]);
}
if (rd) this.draw();
}
this.expandAll = function( rd )
{
for (var i = 0; i < this.Nodes.length; i++){
this.Nodes[i].expanded = true;
this.updateImages(this.Nodes[i]);
}
if (rd) this.draw();
}
this.init = function()
{
this.readNodes(nodes);
this.rebuildTree();
this.draw();
}
this.init();
} function NTreeNode( treeView, parentNode , text, url, target){
this.index = -1;
this.treeView = treeView;
this.parentNode = parentNode;
this.text = text;
this.url = url;
this.target = target;
this.expanded = false;
this.children = new Array();
this.level = function(){
var node = this;
var i = 0;
while (node.parentNode != null){
i++;
node = node.parentNode;
}
return i;
}
this.hasChildren = function(){
return this.children.length > 0;
}
this.init = function(){
var s = “”;
if (bw.ns4) {
s = ‘<layer z-index=”‘+this.index+10+’” visibility=”hidden”>’+this.getContent()+’</layer>’;
} else {
s = ‘<div style=”position:absolute;visibility:hidden;z-index:’+this.index+10+’;”>’+
this.getContent()+’</div>’;
}
return s;
}
this.getH = function(){return bw.ns4 ? this.el.clip.height : this.el.offsetHeight;}
this.getW = function(){return bw.ns4 ? this.el.clip.width : this.el.offsetWidth;}
this.id = function(){return ‘nt’+this.treeView.name+this.index;}
this.getContent = function(){
function itemSquare(node){
var img = node.hasChildren() ? (node.expanded ? node.treeView.fmt.exF : node.treeView.fmt.clF) : node.treeView.fmt.iF;
var w = node.treeView.fmt.Fw; var h = node.treeView.fmt.Fh;
return “<td valign=\”middle\” width=\”"+w+”\”><img id=\”"+node.id()+”nf\” name=
\”"+node.id()+”nf\” src=\”" + img + “\” width=”+w+” height=”+h+” border=0></td>\n”;
}
function buttonSquare(node){
var img = node.expanded ? node.treeView.fmt.exB : node.treeView.fmt.clB;
var w = node.treeView.fmt.Bw; var h = node.treeView.fmt.Bh;
return ‘<td valign=\”middle\” width=”‘+w+’”>
<a href=”javascript:none()” onclick=
“javascript:NTrees
[\''+node.treeView.name+'\'].
expandNode(‘+node.index+’)”><img name=\”+node.id()+’nb\’ id=
\”+node.id()+’nb\’ src=”‘ + img + ‘” width=”‘+w+’” height=”‘+h+’” border=0></a></td>\n’;
}
function blankSquare(node, ww){
var img = node.treeView.fmt.iE;
return “<td width=\”"+ww+”\”><img src=\”" + img + “\” width=”+ww+” height=1 border=0></td>\n”
}
var s = ”;
var ll = this.level();
s += ‘<table cellpadding=’+this.treeView.fmt.pg+’ cellspacing=’+this.treeView.fmt.sp+’ border=0 class=”cls’+this.treeView.name+’_back’+ll+’”><tr>’;
//ident
var idn = this.treeView.fmt.idn(ll);
if (idn > 0)
s += blankSquare(this, idn);
if ( this.treeView.fmt.showB)
s += this.hasChildren() ? buttonSquare(this) :
blankSquare(this, this.treeView.fmt.Ew);
if ( this.treeView.fmt.showF)
s += itemSquare(this);
s += ‘<td nowrap=\”1\”>
<a href=
“‘+this.url+’”
target=”‘+this.target+’”>
‘+this.text+’</a></td></tr></table>’;
return s;
}
this.moveTo = function( x, y )
{
if (bw.ns4)
this.el.moveTo(x,y);
else
{
this.el.style.left=x;
this.el.style.top=y;
}
}
this.show = function(sh)
{
if (this.visible == sh)
return;
this.visible = sh;
var vis = bw.ns4 ? (sh ? ‘show’: ‘hide’) : (sh ? ‘visible’: ‘hidden’);
if (bw.ns4)
this.el.visibility=vis;
else
this.el.style.visibility = vis;
}
this.hideChildren = function(){
this.show(false);
for (var i = 0; i < this.children.length; i++)
this.children[i].hideChildren();
}
this.draw = function()
{
var ll = this.treeView.fmt.left;//this.
treeView.fmt.idn(this.level());
this.moveTo(this.treeView.fmt.left, this.treeView.currTop);
if (ll+this.getW() > this.treeView.maxWidth)
this.treeView.maxWidth = ll+this.getW();
this.show(true);
this.treeView.updateImages(this);
this.treeView.currTop += this.getH();
if (this.treeView.currTop>this.treeView.maxHeight)
this.treeView.maxHeight = this.treeView.currTop;
if (this.expanded && this.hasChildren() )
for (var i = 0; i < this.children.length; i++)
this.children[i].draw();
}
} function NTreeBack( aleft, atop, color, name )
{
this.left = aleft;
this.top = atop;
this.name = name;
this.color = color;
this.resize = function(w,h){
if (bw.ns4){
this.el.resizeTo(w,h);
}
else
{
this.el.style.width=w;
this.el.style.height=h;
}
}
this.init = function(){
if (bw.ns4) {
var bgc = this.color == “”? “” : ‘ bgcolor=”‘+this.color+’” ‘;
document.write(‘<layer ‘+bgc+’ top=”‘+this.top+’”
left=”‘+this.left+’” z-index=”0″></layer>’);
this.el = document.layers[this.name];
} else {
document.write(‘<div
style=”background-color:’+this.color+’;position:absolute;z-index:0;top:’+this.top+’px;left:
‘+this.left+’px”></div>’);
this.el = document.all? document.all[this.name] : document.getElementById(this.name);
}
}
this.init();
} function none(){} function lib_bwcheck(){
this.ver=navigator.appVersion
this.agent=navigator.userAgent
this.dom=document.getElementById?1:0
this.opera=this.agent.indexOf(“Opera”)>-1
this.ie5=(this.ver.indexOf(“MSIE 5″)>-1 && this.dom
&& !this.opera)?1:0;
this.ie6=(this.ver.indexOf(“MSIE 6″)>-1 && this.dom
&& !this.opera)?1:0;
this.ie4=(document.all &&
!this.dom && !this.opera)?1:0;
this.ie=this.ie4||this.ie5||this.ie6
this.mac=this.agent.indexOf(“Mac”)>-1
this.ns6=(this.dom && parseInt(this.ver) >= 5) ?1:0;
this.ns4=(document.layers && !this.dom)?1:0;
this.bw=(this.ie6 || this.ie5 ||
this.ie4 || this.ns4
|| this.ns6 || this.opera);
} function und( val )
{
return typeof(val) == ‘undefined’;
} var bw = new lib_bwcheck();
var NTrees;
if (typeof(NTrees) == ‘undefined’)
NTrees = new Array();
Ok, kita sudah selesai membuat semua file yang diperlukan, tahap akhirnya adalah membuat file html-nya, untuk memanggil semua fungsi-fungsi yang ada pada file-file javascript di atas
<html>
<head> <link href=”tree.css” rel=”styleSheet” type=”text/css”>
</head>
<body>
<!————– nos tree ————–>
<script src=”tree_nodes.js”></script>
<script src=”tree_format.js”></script>
<script src=”nostree.js”></script>
<script>
var treeName = “Tree”;
new NosTree (treeName, TREE_NODES, TREE_FORMAT); </script>
</body>
</html>
Alright, selesai deh semuanya, coba dijalankan file html’a

javacript tutorial
Membuat Mouse Trail

——
script ini hanya jalan di Internet Explorer
——
Pernah gk ngeliat cursor mouse keren?Di javascript kita juga bisa membuat cursor keren, ni ada script-nya..
Copy script ini ke notepad and save dengan ektensi html..
<html>
<head>
<title>Tulisan teks mengikuti gerakan mouse</title>
<script>
<!–
var x,y;
var step=20;
var flag=0; var message=”Mirza Ilhami “;
message=message.split(“”); var xpos=new Array()
for (i=0;i<message.length-1;i++) {
xpos[i]=-50;
} var ypos=new Array()
for (i=0;i<message.length-1;i++) {
ypos[i]=-50;
} function handlerMM(e) {
x=(document.layers)?e.pageX:event.clientX
y=(document.layers)?e.pageY:event.clientY
flag=1;
} function textfollow() {
if (flag==1 && document.all) {
for (i=message.length-1;i>=1;i–) {
xpos[i]=xpos[i-1]+step;
ypos[i]=ypos[i-1]
}
xpos[0]=x+step;
ypos[0]=y;
for (i=0;i<message.length-1;i++){
var thisspan = eval(“document.all.span”+(i)+”.style”)
thisspan.posLeft=xpos[i]
thisspan.posTop=ypos[i]
}
}
if(flag==1 && document.layers){
for(i=message.length-1;i>=1;i–) {
xpos[i]=xpos[i-1]+step;
ypos[i]=ypos[i-1];
}
xpos[0]=x+step;
ypos[0]=y;
for(i=0;i>message.length-1;i++){
var thisspan = eval(“document.span”+i)
thisspan.left=xpos[i];
thisspan.top=ypos[i];
}
}
//nilai 10 adalah gerakan tulisan mengikuti mouse selama 10 milisekon
var timer=setTimeout(“textfollow()”,10);
}
//–>
</script> <style>
.spanstyle{
position:absolute;
visibility:visible;
top:-50px;
font-size:8pt;
font-family:verdana;
color:black;
font-weight:bold;
}
a {color:ffffcc;text-decoration:none;}
a:hover {color:ffff99; text-decoration:underline;}
a:visited {color:ffff99;}
</style> <script type=”text/javascript”>
<!–
for (i=0;i<message.length-1;i++){
document.write(“<span id=’span”+i+”‘ class=’spanstyle’>”)
document.write(message[i]);
document.write(“</span>”);
}
if(document.layers){
document.captureEvents(Event.MOUSEMOVE);
}
document.onmousemove=handlerMM;
//–>
</script>
</head>
<body>
<div align=”center”><font size=”2″ face=”arial”>Gerakkan mouse..</font><br>
Tulisan akan mengikuti gerakan mouse
</div>
</body>
</html>

javascript tutorial
Membuat Jam Image

  1. Copy script ini ke notepad and save dengan ektensi html..
<html>
<head>
<title>Menampilkan Jam dengan Image</title>
<script>
<!–
var dn
c1=new Image(); c1.src=”c1.gif”
c2=new Image(); c2.src=”c2.gif”
c3=new Image(); c3.src=”c3.gif”
c4=new Image(); c4.src=”c4.gif”
c5=new Image(); c5.src=”c5.gif”
c6=new Image(); c6.src=”c6.gif”
c7=new Image(); c7.src=”c7.gif”
c8=new Image(); c8.src=”c8.gif”
c9=new Image(); c9.src=”c9.gif”
c0=new Image(); c0.src=”c0.gif”
cb=new Image(); cb.src=”cb.gif”
cam=new Image(); cam.src=”cam.gif”
cpm=new Image(); cpm.src=”cpm.gif”
function extract(h,m,s,type){
if (!document.images)
return
if (h<=9){
document.images.a.src=cb.src
document.images.b.src=eval(“c”+h+”.src”)
}
else {
document.images.a.src=eval
(“c”+Math.floor(h/10)+”.src”)
document.images.b.src=eval(“c”+(h%10)+”.src”)
}
if (m<=9){
document.images.d.src=c0.src
document.images.e.src=eval(“c”+m+”.src”)
}
else {
document.images.d.src=eval
(“c”+Math.floor(m/10)+”.src”)
document.images.e.src=eval(“c”+(m%10)+”.src”)
}
if (s<=9){
document.g.src=c0.src
document.images.h.src=eval(“c”+s+”.src”)
}
else {
document.images.g.src=eval
(“c”+Math.floor(s/10)+”.src”)
document.images.h.src=eval(“c”+(s%10)+”.src”)
}
if (dn==”AM”) document.j.src=cam.src
else document.images.j.src=cpm.src
}
function show3(){
if (!document.images)
return
var Digital=new Date()
var hours=Digital.getHours()
var minutes=Digital.getMinutes()
var seconds=Digital.getSeconds()
dn=”AM”
if ((hours>=12)&&(minutes>=1)||(hours>=13)){
dn=”PM”
hours=hours-12
}
if (hours==0)
hours=12
extract(hours,minutes,seconds,dn)
setTimeout(“show3()”,1000)
}
//–>
</script> </head>
<body bgcolor=black>
<img src=”cb.gif”>
<img src=”cb.gif”>
<img src=”colon.gif”><img src=”cb.gif”>
<img src=”cb.gif”><img src=”colon.gif”>
<img src=”cb.gif”><img src=”cb.gif”>
<img src=”cam.gif”>
</body>
</html>

javacript tutorial
Membuat Kalender

——
script ini hanya jalan di Internet Explorer
——
Ni ada script untuk ngebuat kalender, selain dengan javascript, kita juga bisa membuat kalender dengan php..
Copy script ini ke notepad and save dengan ektensi html..
<html>
<head>
<title>Kalender</title>
<script>
function ambilnamabulan(e){
var daftarbulan=new Array(“Januari”, “Februari”, “Maret”, “April”, “Mei”, “Juni”, “Juli”, “Agustus”, “September”, “Oktober”, “November”, “Desember”);
return daftarbulan[e];
}
function ambilhariawalbulan(t,b){
var i=new Date(t, b, 1);
return i.getDay();
}
function ambiljumlahhari(t,b){
var kabisat=false;
if(t%4==0) kabisat=true;
var a=new Array;
a[0]=31;
a[1]=(kabisat)?29:28;
a[2]=31;
a[3]=30;
a[4]=31;
a[5]=30;
a[6]=31;
a[7]=31;
a[8]=30;
a[9]=31;
a[10]=30;
a[11]=31;
return a[b];
}
function ambilkalender(tahun,namabulan,mulai,hariawalbulan,
angka,jumlahhari,tanggal){
var warna=”#ffffff”;
var tabelkal=new String;
tabelkal=”<table border=’1′>”;
tabelkal=tabelkal+”<tr><td align=’center’ bgcolor=’#00ffff’ colspan=’7′><b>”+namabulan+”, “+tahun+”</b></td></tr>”;
tabelkal=tabelkal+”<tr><th>M</th><th>S</th>
<th>S</th><th>R
</th><th>K</th><th>J</th><th>S</th></tr>”;
for(baris=0;baris<=5;baris++){
tabelkal=tabelkal+”<tr>”;
for(kolom=0;kolom<=6;kolom++){
if(kolom==hariawalbulan) mulai=true;
if(mulai&&(angka<=jumlahhari)){
if((kolom==0)&&(angka!=tanggal)) warna=”#ff00ff”;
else{
if(angka==tanggal) warna=”#00ff00″;
else warna=”#ffffff”;
}
tabelkal=tabelkal+”<td align=’center’
bgcolor=”+warna+”>”;
tabelkal=tabelkal+angka;
angka++;
}else{
warna=”#ffffff”;
tabelkal=tabelkal+”<td bgcolor=”+warna+”>”;
}
}
tabelkal=tabelkal+”</tr>”;
}
tabelkal=tabelkal+”</table>”;
return tabelkal;
}
function init(){
var tgl=new Date();
var tahun=tgl.getYear();
var bulan=tgl.getMonth();
var tanggal=tgl.getDate();
var namabulan=ambilnamabulan(bulan);
var hariawalbulan=ambilhariawalbulan(tahun,bulan);
var jumlahhari=ambiljumlahhari(tahun,bulan);
var kalender=new String;
kalender=ambilkalender(tahun,namabulan,false,
hariawalbulan,1,jumlahhari,tanggal);
if(document.all) tempatkalender.innerHTML=kalender;
}
</script>
</head> <body>
<div style=”position:
relative;top:0px;
left:0px”></div>
</body>
</html>

javacript tutorial
Membuat Teks Bergelombang

Copy script ini ke notepad and save dengan ektensi html..
<html>
<head>
<title>Membuat Teks Bergelombang</title>
<script>
<!–
//arah=1 : dari kecil ke besar
//arah=0 : dari besar ke kecil
var arah=1; function Gelombang(t)
{
var teks=t;
var size=1;
for(var i=0;i<teks.length;i++)
{
document.write(teks.charAt(i).fontsize(size))
if(arah==1)
{
if(size<7)
{
size+=1;
}
else
{
arah=0;
}
}
else
{
if(size>1)
{
size–;
}
else
{
arah=1;
}
}
}
}
Gelombang(‘Tulisan ini di buat bergelombang dengan Java Script’);
//–>
</script>
</head>
<body>
</body>
</html>

javascript tutorial
Validasi E-Mail

Ni ada script untuk validasi e-mail dengan javascript.
<html>
<head>
<title>Memeriksa validitas Email</title>
<script>
<!–
function Validasi()
{
if(!CekEmail(document.form1.alamat.value))
{
alert(“Alamat email Anda salah! “);
}
else
{
alert(“Anda sudah memasukkan alamat email yang benar”);
}
} function CekEmail(teks)
{
if((teks==”")||(teks.indexOf(‘@’)==-1)||(teks.indexOf(‘.’)==-1)) return false;
return true;
}
//–>
</script> </head>
<body>
Masukkan Alamat Email pada form di bawah ini<br>
<form>
Email : <input size=”25″> *<br>
* : harus di-isi<br>
<input value=”CEK EMAIL” name=”B3″>
</form>
</body>
</html>

javascript tutorial
Membuat Tulisan Lampu Neon

Welcome to TutorialWebsite

Copy script ini ke notepad and save dengan ektensi html..
<h1>
<script>
<!–
var message=”Welcome to TutorialWebsite”
var neonbasecolor=”gray”
var neontextcolor=”yellow”
var flashspeed=100 //dalam milisekon var n=0
if (document.all||document.getElementById){
document.write(‘<font color=”‘+neonbasecolor+’”>’)
for (m=0;m<message.length;m++)
document.write(‘<span id=”neonlight’+m+’”>’+message.charAt(m)+’</span>’)
document.write(‘</font>’)
}
else
document.write(message) function crossref(number){
var crossobj=document.all? eval(“document.all.neonlight”+number) : document.getElementById(“neonlight”+number)
return crossobj
} function neon(){
if (n==0){
for (m=0;m<message.length;m++)
//eval(“document.all.neonlight”+m).style.color=
neonbasecolor
crossref(m).style.color=neonbasecolor
}
crossref(n).style.color=neontextcolor if
(n<message.length-1)
n++
else{
n=0
clearInterval(flashing)
setTimeout(“beginneon()”,1500)
return
}
} function beginneon(){
if (document.all||document.getElementById)
flashing=setInterval(“neon()”,flashspeed)
}
beginneon()
//–>
</script>
</h1>

javacript tutorial
Membuat Tulisan Pelangi

Copy script ini ke notepad and save dengan ektensi html..
<html>
<head>
<title>Efek Tulisan seperti Pelangi</title>
<font size=”6″><b>
<script>
<!–
var text=”Mirza ILhami” // Teks yang ditampilkan
var speed=80 // kecepatan berubah warna
if (document.all||document.getElementById){
document.write(‘<span>’ + text + ‘</span>’)
var storetext=document.getElementById? document.getElementById(“highlight”) : document.all.highlight
}
else
document.write(text)
var hex=new Array(“00″,”14″,”28″,”3C”,”50″,”64″,”78″,”8C”,
“A0″,”B4″,”C8″,”DC”,”F0″)
var r=1
var g=1
var b=1
var seq=1
function changetext(){
rainbow=”#”+hex[r]+hex[g]+hex[b]
storetext.style.color=rainbow
}
function change(){
if (seq==6){
b–
if (b==0)
seq=1
}
if (seq==5){
r++
if (r==12)
seq=6
}
if (seq==4){
g–
if (g==0)
seq=5
}
if (seq==3){
b++
if (b==12)
seq=4
}
if (seq==2){
r–
if (r==0)
seq=3
}
if (seq==1){
g++
if (g==12)
seq=2
}
changetext()
}
function starteffect(){
if (document.all||document.getElementById)
flash=setInterval(“change()”,speed)
}
starteffect()
//–>
</script>
</b></font>
</head>
<body>
</body>
</html>

Leave a Reply

Subscribe to Posts | Subscribe to Comments

Connect

My Song

Ads 468x60px

Featured Posts

Welcome to My Blog
Free CSS Vertical Menu Designs at exploding-boy.com

Tab Menu 12

Popular Post

™[]Selamat Datang Di Blog kami!![]™

Visitor

free counters

Total

Sharingan

Sharingan

Blogroll

Labels

Poto PropiL

NavBar

Kunai

Background

COMEN

WAU_colored('aycw41907oxu', '000000f7efff')

Translate

English French German Spain Italian Dutch Russian Portuguese Japanese Korean Arabic Chinese Simplified

this widget by www.AllBlogTools.com

Online

CLOCK

Labels

Labels

Followers

GaNz Cheaterz

ℤ[]Trima Kasih Datang Di Blog kami!![]ℤ

- Copyright © 2013 Ninja Saga Hack Insyndicate -Dark Amaterasu Template -