MUSTEKERS

11:17:00 PM

Setelah bahan sudah ada,anda tinggal upload ke hosting anda,atau bisa ke blog anda sendiri,setelah itu copy alamat URL gambar tersebut.

Contoh,alamat URL gambar yang saya punya:

http://2.bp.blogspot.com/--V2U6dRSJKA/UHEevEPRTtI/AAAAAAAAARo/voMKgq6Z2W4/s1600/d.gif

Rubahlah menjadi seperti ini:

<img src='http://2.bp.blogspot.com/--V2U6dRSJKA/UHEevEPRTtI/AAAAAAAAARo/voMKgq6Z2W4/s1600/d.gif'></img>

Warna merah,ganti dengan alamat URL gambar yang telah anda siapkan tadi.

Simpan di Notepad dulu,jangan disimpan dan jangan pula di hapus,aaaaalah!

Setelah itu,pergilah ke Dashboard Blog anda,lalu pilih Tata Letak,selanjutnya pilih tab Edit HTML.
Contreng Expand Widget Templates,lalu cari kode berikut :

<a expr:href='data:post.url'><data:post.title/></a>

Untuk mempermudah pencarian,Tekan Ctrl+F pada keyboard,dan tuliskan kode tersebut,nantinya kode akan terdeteksi secara otomatis!

Setelah ketemu,sisipkan alamat URL gambar anda (yang sudah anda simpan di notepad tadi),di antara kode tersebut.

Setelah kode URL alamat gambar anda disisipkan,akan menjadi seperti ini :

<a expr:href='data:post.url'>
<img src='http://2.bp.blogspot.com/--V2U6dRSJKA/UHEevEPRTtI/AAAAAAAAARo/voMKgq6Z2W4/s1600/d.gif'></img>
<data:post.title/></a>

Semoga Bermanfaat

11:07:00 PM

Untuk membuat Favicon sangat gampang caranya, yaitu :
1. Loggin ke Blogger
2. Buat Tulisan Baru
3. Insert gambar
4. Pilih HTML
5. Ambil alamat direct link gambar" http://...."

copy alamat direct linknya dan masukan urlnya ke script dibawah ini :

untuk animated favicon :

letakan script tersebut diatas kode </head> atau dibawah kode ]]></b:skin> dan Save.

Semoga Bermanfaat

9:25:00 AM

hari ini saya akan membuat tutorial membuat menu header melayang seperti di blog ini contoh pada gambar atau lihat pada bagian atas blog ini:

Tambah code ini dibagian mana saja terserah.

<style type='text/css'>
* Menu Horizontal Dropdown
----------------------------------------------- */
#menuwrapperpic {background:#2a4375 top center;width:100%;margin:0 auto;padding:0 auto;border-bottom:1px solid #165D92;}
#menuwrapper {width:110%;margin:0 auto;height:41px; background:#2a4375;}
.clearit {clear: both;height: 0;line-height: 0.0;font-size: 0;}
#menubar {width:100%;}
#menubar, #menubar ul {padding: 0;margin: 0;list-style: none;font-family:Arial, sans-serif;}
#menubar a {display: block;text-decoration: none;padding: 13px 12px 12px 12px;font-size:12px;font-weight:bold;text-transform:none;color:#d1d8e5;border-left:1px solid #165D92}
#menubar a.trigger {background-image: url(http://1.bp.blogspot.com/-Ou5V60iU-C8/TeQD01cinhI/AAAAAAAABjQ/_0_myiMPkL0/s1600/arrow.gif);background-repeat: no-repeat;padding: 13px 24px 12px 12px;background-position: right center;}
#menubar li {float: left;position: relative;}
/* hide from IE mac \*/
#menubar li {position: static; width: auto;}
/* end hiding from IE5 mac */
#menubar li ul, #menubar ul li {width:165px;}
#menubar ul li a  {text-align:left;color:#13598D;padding: 6px 12px;font-size: 12px;font-weight:bold;text-transform:none;font-family:Arial;}
#menubar li ul {z-index:100;position: absolute;display: none;background:#0F4E7D;padding-bottom:5px;}
#menubar li ul {-moz-border-radius-bottomleft:5px; -moz-border-radius-bottomright:5px; -webkit-border-bottom-left-radius:5px; -webkit-border-bottom-right-radius:5px; border-bottom-left-radius:5px; border-bottom-right-radius:5px;}
#menubar li ul {-moz-box-shadow:0 5px 5px rgba(0, 0, 0, 0.6); -webkit-box-shadow:0 5px 5px rgba(0, 0, 0, 0.6);filter:alpha(opacity=95);-moz-opacity:.95;opacity:.95;}
#menubar li:hover a, #menubar a:active, #menubar a:focus, #menubar li.hvr a{background-color:#115383;color:#d1d8e5;text-decoration:none;}
#menubar li:hover ul, #menubar li.hvr ul {display: block;}
#menubar li:hover ul a, #menubar li.hvr ul a {color:#d1d8e5;background-color:transparent;text-decoration:none;}
#menubar li ul li.hr {border-bottom:1px solid #296A99; border-top:1px solid #0E4064; display:block; font-size: 1px; height: 0px; line-height: 0px; margin:4px 0; }
#menubar ul a:hover {background-color: #0E3B5D!important;color: #d1d8e5 !important;text-decoration:none;}
#menubar li.home a, #menubar li.home a:visited {background:url(http://4.bp.blogspot.com/-b5CZZuwYUKM/TeQD2DHXOvI/AAAAAAAABjc/VEl5dmwPyO8/s1600/menu_hover.gif) repeat-x top left;border-left:none}
#menubar li.home a:hover {background:#1d335d;}
/* Fixed Position */
#inner{padding-top:41px;}
#fixed {position:fixed;top:0;left:0;width:100%;height:41px;z-index:999;}
#fixedinner{text-align:center;background:transparent;height:41px;position:relative;z-index:999;}
* html, * html body{overflow-y:hidden;height:100%;}
* html #fixedinner{margin-right:-143px;voice-family: "\"}\""; voice-family:inherit; }
* html #fixedinner{margin-right:17px;}
* html #fixed {position:absolute;}
/* -- SET FOR STATUS MESSAGE -- */

#search {
}
#search input[type="text"] {
    background: #fffff;
    border: 0 none;
    font: bold 12px Arial,Helvetica,Sans-serif;
    color: #0000;
    width: 150px;
    padding: 6px 15px 6px 35px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    text-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
    -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
    -webkit-transition: all 0.7s ease 0s;
    -moz-transition: all 0.7s ease 0s;
    -o-transition: all 0.7s ease 0s;
    transition: all 0.7s ease 0s;
    }

#search input[type="text"]:focus {
    width: 150px;
    }
</style>

Lalu tambahkan code HTMLnya dibawah code </head>

<div id='menuwrapper'>
<ul id='menubar'>
<li><a href='http://trevolutions.blogspot.com/'>Home</a></li>
<li><a href='#'>Downloads</a>
<ul class='children'>
<li><a href='http://nasrulcivil.blogspot.com/search/label/Software'>Software</a></li>
<li><a href='http://trevolutions.blogspot.com/search/label/Keygen'>Keygen</a></li>
<li><a href='http://trevolutions.blogspot.com/search/label/Games'>Games</a></li>
<li><a href='#'>My Plugins</a></li>

<li><a href='#'>My Theme</a></li>
<li><a href='#'>My Product</a>
</li>
</ul>
</li>
<li><a href='#'>MyBB</a>
<ul class='children'>
<li><a href='#'>MyBB Mods</a>
<ul class='children'>
<li><a href='http://mods.mybb.com/theme'>Theme</a></li>
<li><a href='http://mods.mybb.com/mods'>Plugins</a></li>

<li><a href='http://mods.mybb.com/resources'>Source</a></li>
</ul>
</li>
<li><a href='http://trevolutions.blogspot.com/search/label/MyBB%20Tips'>MyBB Tips</a></li>
<li><a href='http://trevolutions.blogspot.com/search/label/MyBB%20Tutorial'>MyBB Tutorial</a></li>
<li><a href='http://trevolutions.blogspot.com/search/label/MyBB%20Plugins'>MyBB Plugins</a></li>
</ul>
</li>
<li><a href='#'>WebCorner</a>
<ul class='children'>
<li><a href='http://trevolutions.blogspot.com/search/label/Javascript'>Javascript</a></li>

<li><a href='http://trevolutions.blogspot.com/search/label/CSS'>CSS</a></li>
<li><a href='#'>jQuery Plugins</a></li>
<li><a href='http://trevolutions.blogspot.com/search/label/Open%20Source'>Open Source</a></li>
</ul>
</li>
<li><a href='#'>Template</a>
<ul class='children'>
<li><a href='http://trevolutions.blogspot.com/search/label/Blogger%20Template'>Blogger Template</a></li>
<li><a href='http://trevolutions.blogspot.com/search/label/MyBB%20Template'>MyBB Template</a></li>
<li><a href='#'>Wordpress Template</a></li>

<li><a href='http://trevolutions.blogspot.com/search/label/Joomla Template'>Joomla Template</a></li>
</ul>
</li>
<li><a href='#'>Partner</a>
<ul class='children'>
<li><a href='http://komunitas.mybbindonesia.com'>MyBB Indonesia</a></li>
<li><a href='#'>Public Indonesia</a></li>
<li><a href='http://indomodding.tk/index.php'>IndoModding</a></li>
</ul>
</li>
<li><a href='#'>Uncategorized</a></li>

<li><a href='http://facebook.com/ambrizal.desginerforums'><img alt='Home' border='0' src='http://facebook.com/favicon.ico' style='padding:0px;'/></a></li>
<li><a href='http://twitter.com/ambrizals'><img alt='Home' border='0' src='http://twitter.com/favicon.ico' style='padding:0px;'/></a></li>
</ul>
<br class='clearit'/>
</div>

Link URL dapat diganti sesuai dengan keinginan anda.

Sumber

9:05:00 AM

Anda mungkin sering jengkel dengan form yang telah Anda buat. Berharap form input email hanya diisi dengan email, tapi ternyata orang yang iseng memasukkan data bukan email, jengkel bukan? Belum lagi ketika pengunjung tidak mengisi data dan yang muncul hanya pesan error dari SQL. Panjang password dan username yang harusnya 6 karakter tapi ternyata banyak user yang memasukkan 4 karakter. Lalu bagaimana memberikan filter pada form yang Anda buat sehingga data yang diinput mendekati akurat? Note: Tutorial ini ditujukan bagi pengguna CS4 ke atas.
Tutorial ini akan mengkombinasikan fungsi Spry (AJAX) yang dimiliki oleh Dreamweaver dan script PHP untuk memfilter data yang diinput oleh user. Dari tutorial ini Anda diharapkan dapat:

Membuat form registrasi dengan filter AJAX/JavaScript
Mengaktifkan form Insert Record
Memfilter data sebelum masuk ke database

Sebelum masuk ke tutorial ini, pastikan Anda telah mempelajari kedua tutorial ini:

Kebutuhan database MySQL

Dalam contoh ini, Anda akan membuat tabel users dengan kolom-kolom berikut ini:

id, merupakan primary key
nama, field untuk menyimpan data nama
email, field untuk menyimpan data email
username, field untuk menyimpan data email. Diharapkan panjang username minimal 6 karakter.
password, field untuk menyimpan data password. Diharapkan panjang password minimal 6 karakter dan enkripsi SHA1.
tanggal, untuk menyimpan tanggal update data

Berikut ini adalah SQL dari tabel users.

CREATE TABLE IF NOT EXISTS `users` (
 `id` int(11) NOT NULL AUTO_INCREMENT,
 `nama` varchar(64) NOT NULL,
 `email` varchar(64) NOT NULL,
 `username` varchar(64) NOT NULL,
 `password` varchar(64) NOT NULL,
 `tanggal` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
 PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ;

Struktur File dan Form registrasi

Tutorial ini menggunakan file yang disimpan dengan nama validasi_data.php. Sedangkan file style.css disimpan dalam folder css. Berikut struktur folder dan file tutorial kali ini:

Connections, folder untuk menyimpan file koneksi database: koneksi.php.
css, folder untuk menyimpan file style.css
validasi_data.php adalah file yang akan digunakan untuk latihan.

Koneksi database: koneksi.php
File ini berfungsi untuk mengkoneksikan database:

<?php
# FileName="Connection_php_mysql.htm"
# Type="MYSQL"
# HTTP="true"
$hostname_koneksi = "localhost";
$database_koneksi = "tutorial_blog";
$username_koneksi = "root";
$password_koneksi = "";
$koneksi = mysql_pconnect($hostname_koneksi, $username_koneksi, $password_koneksi) or trigger_error(mysql_error(),E_USER_ERROR);
?>

File style.css untuk mengatur tampilan halaman web
Berikut adalah file tersebut:

body {
 background-color: #063;
 margin: 0px;
 padding: 0px;
}
form {
 background-color: #E7E7E7;
 padding: 20px;
 border: thin solid #CECECE;
 border-radius: 5px;
}
label {
 font-size: 14px;
 font-weight: bold;
 text-transform: capitalize;
 display: block;
}
input {
 padding: 5px 10px;
}
h1 {
 padding-bottom: 10px;
 border-bottom: solid thin #D4D4D4;
 font-size: 18px;
}
a, a:visited {
 text-decoration: none;
}
a:hover {
 color: #900;
}
#wrapper {
 font-family: Tahoma, Geneva, sans-serif;
 background-color: #FFF;
 margin: auto;
 padding: 20px 30px;
 height: auto;
 width: 960px;
 border-right-width: 5px;
 border-right-style: solid;
 border-right-color: #CCC;
 border-bottom-width: 5px;
 border-left-width: 5px;
 border-bottom-style: solid;
 border-left-style: solid;
 border-bottom-color: #CCC;
 border-left-color: #CCC;
 border-bottom-left-radius: 5px;
 border-bottom-right-radius: 5px;
}
img {
 max-width: 900px;
 padding: 10px;
 border: solid thin #F9F;
 background-color: #FFC;
 height: auto;
}
.warning {
 background-color: #FCF;
 color: #900;
 padding: 5px 10px;
 border: solid thin #900;
 border-radius: 5px;
}

File latihan validasi_data.php

File ini adalah file utama yang akan dikerjakan dalam tutorial ini, berikut adalah script file tersebut:

Java Web Media: Graphic Design Course Depok

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link href="css/style.css" rel="stylesheet" type="text/css">
</head><body>
<div id="wrapper">
 <h1><a href="http://www.javawebmedia.com">Home</a> | <a href="http://www.javawebmedia.com">About Java Web Media</a> | <a href="http://www.javawebmedia.com">Course</a> | <a href="http://www.javawebmedia.com">Contact Us</a></h1>
 <h2>Registration form</h2>
 <p>Form registrasi ada di sini</p>
</div>
</body>
</html>

Membuat form input data

Langkah selanjutnya adalah membuat form untuk memasukkan data. Lihat gambar di atas.

Ubah tampilan Workspace Anda menjadi Design View. Lihat gambar di atas
Seleksi tulisan Registrasi form ada di sini. Hapus tulisan tersebut.
Klik Insert > Form > Form
Klik Insert > Spry > Spry Validation Textfield.
Pada kolom ID: nama dan Label: Nama Anda:. Klik OK.
Letakkan kursor Anda di samping kanan form input nama lalu tekan Enter.
Klik Insert > Spry > Spry Validation Textfield. Pada kolom ID: email dan Label: Alamat email Anda:. Klik OK.
Letakkan kursor Anda di samping kanan form input email, lalu tekan Enter.
Klik Insert > Spry > Spry Validation Textfield. Pada kolom ID: username dan Label: Username Anda:. Klik OK.
Letakkan kursor Anda di samping kanan form input username, lalu tekan Enter.
Klik Insert > Spry > Spry Validation Password (fitur ini baru ada pada Dreamweaver CS4 ke atas). Pada kolom ID: password dan Label: Password Anda:. Klik OK.
Letakkan kursor Anda di samping kanan form input password, lalu tekan Enter.
Klik Insert > Form > Button. Pada kolom ID: submit. Biarkan Label tetap kosong lalu klik OK.
Klik pada tombol Submit yang sudah muncul lalu copy dan letakkan di samping tombol Submit.
Klik tombol Submit kedua yang baru saja Anda paste, lalu melalui panel Properties ubah menjadi Reset form.
Simpan hasil pekerjaan Anda. Jika ada pop-up menu keluar untuk menanyakan apakah file Spry akan disimpan, klik OK.

Memilih type dan panjang data yang ingin difilter menggunakan AJAX/Spry

Pada langkah ini, Anda akan belalajar menggunakan fasilitas Spry yang disediakan oleh Dreamweaver. Fitur spry ini bekerja selayaknya AJAX. Ketika Anda bekerja menggunakan mode Design View, maka setiap kali Anda melakukan hover (atau mengarahkan kursor di atas form yang tadi Anda beri fasilitas spry, maka Dreamweaver akan langsung menampilkan notifikasi berwarna biru pada masing-masing spry.
Fitur spry tidak terlalu susah untuk dipelajari, dan mudah untuk Anda gunakan.
Klik Notifikasi atau Pop-up menu tersebut, maka fasilitas pengaturan Spry akan muncul di jendela Properties yang terletak di bagian bawah work space Anda. Pada contoh di bawah dipilih pada Spry Textfield2.

Beberapa fitur yang harus Anda pahami antara lain:

Type, adalah type data yang akan Anda validasi. Dalam contoh ini Email Address
Format, adalah format penulisan. Dalam contoh ini tidak digunakan
Patern, pola dari teks. Dalam contoh ini tidak digunakan
Hint, akan menampilkan teks panduan bagi pengunjung web tentang type dan format data seperti apa yang ingin dimasukkan.
Min chars, minimal karakter yang harus diketik
Max chars, maksimal karakter yang boleh dimasukkan.
Validate on, adalah kapan validasi data harus diaktifkan. Secara Default Dreamweaver akan memilih Submit. Dalam contoh ini dipilih ketiganya (Blur dan Change) juga diaktifkan. Ini artinya fitur spry akan langsung menampilkan pesan error meskipun data yang Anda ketik belum selesai.
Required, artinya wajib atau harus diisi. Jika form input tidak wajib diisi, maka Anda bisa memilih untuk meng-Unchecked-nya.

Java Web Media: Web Design Company in Depok

Dengan menggunakan fitur spry di atas, lakukan pengaturan filter data seperi berikut ini. Dalam contoh ini, berikut beberapa filter data yang akan diberikan di setiap form input data:

nama, minimal 5 huruf dan harus diisi (Required). Validate on: Blur and Change aktif.
email, type harus alamat email, dan hint-nya: contact@javawebmedia.com. Validate on: Blur and Change aktif.
username, minimal menggunakan 6 karakter/huruf dan maximal 16 karakter/huruf. Validate on: Blur and Change aktif.
password, minimal 6 karakter dan maximal 32 karakter. Validate on: Blur and Change aktif.
Simpan kembali pekerjaan Anda

Mengubah tampilan Spry melalui CSS

Jika Anda perhatikan, lay out bawaan Spry sangatlah tidak menarik. Pesan peringatan muncul dengan warna merah dan bingkai merah. Pada langkah ini, Anda akan belajar melakukan kustomisasi tampilan CSS.

SpryValidationTextfield.css

Jika Anda menggunakan Dreamweaver CS4 ke atas, klik file SpryValidationTextfield.css yang ada pada menu related file. Lalu pada baris kode ke-33 lakukan perubahan sehingga menjadi:

textfieldRequiredState .textfieldRequiredMsg, 
.textfieldInvalidFormatState .textfieldInvalidFormatMsg, 
.textfieldMinValueState .textfieldMinValueMsg,
.textfieldMaxValueState .textfieldMaxValueMsg,
.textfieldMinCharsState .textfieldMinCharsMsg,
.textfieldMaxCharsState .textfieldMaxCharsMsg
{
 display: block;
 color: #CC3333;
}

Lalu pada baris ke-73 yang semula adalah sebagai berikut:
.textfieldHintState input, input.textfieldHintState { /*color: red !important;*/ }Ubah menjadi:
.textfieldHintState input, input.textfieldHintState { /*color: red !important;*/ color: #CCC; }

Simpan kembali file SpryValidationTextfield.css Anda. Anda dapat melakukan perubahan pada SpryValidationPassword.css dengan cara yang kurang lebih sama. Berikut hasil kustomisasi dari layout file Spry tadi.

Java Web Media: Web Design Company Depok

Mengaktifkan form Insert Record

Anda telah membuat filter data yang akan dientry pada tingkat dasar. Fitur Spry ini akan sangat berguna jika user tidak mematikan fitur JavaScript pada browser yang mereka gunakan. Jika fitur JavaScript mereka disable atau dinonaktifkan, maka fungsi Spry tidak akan ada gunanya.

Langkah selanjutnya adalah mengaktifkan form Insert Record. Berikut langkah-langkahnya:

Klik kembali pada file Source code di Dreamweaver Anda (lihat gambar).
Klik Insert > Data Objects > Insert Record > Insert Record
Submit values from: form1
Connections: koneksi
Insert table: users
Columns:, pastikan hanya id dan tanggal yang tidak mendapatkan value.
After inserting, go to: validasi_data.php
Klik OK
Simpan kembali hasil pekerjaan Anda.

Anda telah berhasil mengaktifkan form Insert Record.

Validasi Server Side menggunakan PHP

Validasi atau filter Server Side adalah langkah kedua setelah validasi JavaScript/AJAX Anda didisable oleh user.
Di sekitar baris kode ke-37, Anda akan menemukan kode ini:

$editFormAction = $_SERVER['PHP_SELF'];

if (isset($_SERVER['QUERY_STRING'])) {

$editFormAction .= “?” . htmlentities($_SERVER['QUERY_STRING']);

}

Tekan Enter setelah kode tersebut, lalu tambahkan kode ini:

$editFormAction .= "?" . htmlentities($_SERVER['QUERY_STRING']);
}//Chek jika terjadi error
$error = array();
$MM_flag="MM_insert";
// Validasi input 
if (isset($_POST[$MM_flag])) {
 //Check panjang nama, jika kosong atau kurang dari 5 ERROR
 if((strlen($_POST['nama']) < 5)) {
 $error['nama'] = "Nama harus diisi dengan minimal 5 karakter";
 }
 // Check alamat email
 $checkEmail = '/^[^@]+@[^\s\r\n\'";,@%]+$/';
 if (!preg_match($checkEmail, trim($_POST['email']))) {
 $error['email'] = "Alamat email salah";
 }
 //Check panjang username
 $_POST['username'] = trim($_POST['username']);
 if(strlen($_POST['username']) < 6 || strlen($_POST['username']) > 16) {
 $error['username'] = "Username minimal 6 karakter dan maksimal 16 karakter";
 }
 // Check password
 $_POST['password'] = trim($_POST['password']);
 if(strlen($_POST['password']) < 6 || strlen($_POST['password']) > 32){
 $error['password'] = "Password 6 karakter dan maksimal 32 karakter";
 }
}
// Jika tidak terjadi error
if(!$error) {
if ((isset($_POST["MM_insert"])) && ($_POST["MM_insert"] == "form1")) {

Lalu pada baris ke-82 yang semula seperti ini:

}
 header(sprintf("Location: %s", $insertGoTo));
}

Lalu ubah menjadi:

header(sprintf("Location: %s", $insertGoTo));
}
$_POST = array();
}

Simpan kembali hasil pekerjaan Anda

Menampilkan pesan error

Langkah selanjutnya adalah menampilkan pesan error jika type data yang dikirimkan oleh pengunjung ternyata tidak memenuhi kriteria yang Anda tetapkan.

Cari kode di bawah ini:

<h2>Registration form</h2> <form name="form1" method="POST" action="<?php echo $editFormAction; ?>">

Lalu ubah menjadi:

<h2>Registration form</h2>
 
 <?php if($error) { ?>
 <p class="warning">
 <strong>Ada kesalahan dalam proses pengisian data:</strong><br/>
 <?php foreach($error as $peringatan) { ?>
 - <?php echo $peringatan; ?><br/>
<?php } ?>
</p>
<?php } ?>

<form name="form1" method="POST" action="<?php echo $editFormAction; ?>">

Untuk melakukan pengetesan pada level Server Side ini, pastikan Anda mendisable fungsi JavaScript, lalu klik tombol Submit.

Java Web Media: Web Design Company in Depok

Anda telah menyelesaikan paket dasar tutorial validasi data. Selamat mencoba.
Hasil akhir Script adalah sebagai berikut:

<?php require_once('Connections/koneksi.php'); ?>
<?php
if (!function_exists("GetSQLValueString")) {
function GetSQLValueString($theValue, $theType, $theDefinedValue = "", $theNotDefinedValue = "") 
{
 if (PHP_VERSION < 6) {
 $theValue = get_magic_quotes_gpc() ? stripslashes($theValue) : $theValue;
 }

$theValue = function_exists("mysql_real_escape_string") ? mysql_real_escape_string($theValue) : mysql_escape_string($theValue);

switch ($theType) {
 case "text":
 $theValue = ($theValue != "") ? "'" . $theValue . "'" : "NULL";
 break; 
 case "long":
 case "int":
 $theValue = ($theValue != "") ? intval($theValue) : "NULL";
 break;
 case "double":
 $theValue = ($theValue != "") ? doubleval($theValue) : "NULL";
 break;
 case "date":
 $theValue = ($theValue != "") ? "'" . $theValue . "'" : "NULL";
 break;
 case "defined":
 $theValue = ($theValue != "") ? $theDefinedValue : $theNotDefinedValue;
 break;
 }
 return $theValue;
}
}

$editFormAction = $_SERVER['PHP_SELF'];
if (isset($_SERVER['QUERY_STRING'])) {
 $editFormAction .= "?" . htmlentities($_SERVER['QUERY_STRING']);
}

//Chek jika terjadi error
$error = array();
$MM_flag="MM_insert";
// Validasi input 
if (isset($_POST[$MM_flag])) {
 //Check panjang nama
 if((strlen($_POST['nama']) < 5)) {
 $error['nama'] = "Nama minimal 5 karakter";
 }
 // Check alamat email
 $checkEmail = '/^[^@]+@[^\s\r\n\'";,@%]+$/';
 if (!preg_match($checkEmail, trim($_POST['email']))) {
 $error['email'] = "Alamat email salah";
 }
 //Check panjang username
 $_POST['username'] = trim($_POST['username']);
 if(strlen($_POST['username']) < 6 || strlen($_POST['username']) > 16) {
 $error['username'] = "Username minimal 6 karakter dan maksimal 16 karakter";
 }
 // Check password
 $_POST['password'] = trim($_POST['password']);
 if(strlen($_POST['password']) < 6 || strlen($_POST['password']) > 32){
 $error['password'] = "Password 6 karakter dan maksimal 32 karakter";
 }
}
// Jika tidak terjadi error
if(!$error) {
if ((isset($_POST["MM_insert"])) && ($_POST["MM_insert"] == "form1")) {
 $insertSQL = sprintf("INSERT INTO users (nama, email, username, password) VALUES (%s, %s, %s, %s)",
 GetSQLValueString($_POST['nama'], "text"),
 GetSQLValueString($_POST['email'], "text"),
 GetSQLValueString($_POST['username'], "text"),
 GetSQLValueString($_POST['password'], "text"));

mysql_select_db($database_koneksi, $koneksi);
 $Result1 = mysql_query($insertSQL, $koneksi) or die(mysql_error());

$insertGoTo = "validasi_data.php";
 if (isset($_SERVER['QUERY_STRING'])) {
 $insertGoTo .= (strpos($insertGoTo, '?')) ? "&" : "?";
 $insertGoTo .= $_SERVER['QUERY_STRING'];
 }
 header(sprintf("Location: %s", $insertGoTo));
}
$_POST = array();
}
?>
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link href="css/style.css" rel="stylesheet" type="text/css">
<script src="SpryAssets/SpryValidationTextField.js" type="text/javascript"></script>
<script src="SpryAssets/SpryValidationPassword.js" type="text/javascript"></script>
<link href="SpryAssets/SpryValidationTextField.css" rel="stylesheet" type="text/css">
<link href="SpryAssets/SpryValidationPassword.css" rel="stylesheet" type="text/css">
</head>

<body>
<div id="wrapper">
 <h1><a href="http://www.javawebmedia.com">Home</a> | <a href="http://www.javawebmedia.com">About Java Web Media</a> | <a href="http://www.javawebmedia.com">Course</a> | <a href="http://www.javawebmedia.com">Contact Us</a></h1>
 <h2>Registration form</h2>
 
 <?php if($error) { ?>
 <p class="warning">
 <strong>Ada kesalahan dalam proses pengisian data:</strong><br/>
 <?php foreach($error as $peringatan) { ?>
 - <?php echo $peringatan; ?><br/>
<?php } ?>
</p>
<?php } ?>

<form name="form1" method="POST" action="<?php echo $editFormAction; ?>">
 <span id="sprytextfield1">
 <label for="nama">Nama Anda:</label>
 <input type="text" name="nama" id="nama">
 <span class="textfieldRequiredMsg">A value is required.</span><span class="textfieldMinCharsMsg">Minimum number of characters not met.</span></span>
 <p><span id="sprytextfield2">
 <label for="email">Alamat email Anda:</label>
 <input type="text" name="email" id="email">
 <span class="textfieldRequiredMsg">A value is required.</span><span class="textfieldInvalidFormatMsg">Invalid format.</span></span></p>
 <p><span id="sprytextfield3">
 <label for="username">Username Anda:</label>
 <input type="text" name="username" id="username">
 <span class="textfieldRequiredMsg">A value is required.</span><span class="textfieldMinCharsMsg">Minimum number of characters not met.</span><span class="textfieldMaxCharsMsg">Exceeded maximum number of characters.</span></span></p>
 <p><span id="sprypassword1">
 <label for="password">Password Anda:</label>
 <input type="password" name="password" id="password">
 <span class="passwordRequiredMsg">A value is required.</span><span class="passwordMinCharsMsg">Minimum number of characters not met.</span><span class="passwordMaxCharsMsg">Exceeded maximum number of characters.</span></span></p>
 <p>
 <input type="submit" name="submit" id="submit" value="Submit">
 <input type="reset" name="submit2" id="submit2" value="Reset">
 </p>
 <input type="hidden" name="MM_insert" value="form1">
 </form>
 <p>&nbsp;</p>
</div>
<script type="text/javascript">
var sprytextfield1 = new Spry.Widget.ValidationTextField("sprytextfield1", "none", {minChars:5, validateOn:["blur", "change"]});
var sprytextfield2 = new Spry.Widget.ValidationTextField("sprytextfield2", "email", {validateOn:["blur", "change"], hint:"contact@javawebmedia.com"});
var sprytextfield3 = new Spry.Widget.ValidationTextField("sprytextfield3", "none", {minChars:6, maxChars:16, validateOn:["blur", "change"]});
var sprypassword1 = new Spry.Widget.ValidationPassword("sprypassword1", {minChars:6, maxChars:32, validateOn:["blur", "change"]});
</script>
</body>
</html>

 Sumber

3:39:00 AM

Sign in di blogger.com

Pada menu Drop Down, Klik Layout dan klik Add a Gadget

Copy Paste kode berikut :

<div align="center" style="background:url(http://2.bp.blogspot.com/-Abhz6PEffhA/T4ThTExu0WI/AAAAAAAAAFA/tPf7QJlGEJQ/s1600/feed+sidebar.jpg)"><a href="http://feeds.feedburner.com/tutorialblogspot/PbmK" imageanchor="1" style="margin-left: .5em; margin-right: 1em; float: center;" rel="nofollow" target="blank"><img border="0" height="40" src="http://3.bp.blogspot.com/-sK94EIzryeg/TiGSrGeLOFI/AAAAAAAAAB4/PPMKclGxbGU/s400/Untitled-5.png" width="290" /></a>
<style></style><style class="text/css"></style>
<div class="center">
Masukan alamat Email kamu disini untuk mendapatkan artikel terbaru..!</div><div class="mbtips-email">
<form action="http://feedburner.google.com/fb/a/mailverify" id="feedform" method="post" target="popupwindow" onsubmit="window.openundefined'http://feedburner.google.com/fb/a/mailverify?uri=tutorialblogspot/pbmk', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<input gtbfieldid="3" class="textarea" name="email" value="Ketik email disini..." type="text" onblur="if undefinedthis.value == "") {this.value = "Ketik email disini...";}" onfocus="if undefinedthis.value == "Ketik email disini...") {this.value = "";}" />
<input type="hidden" value="tutorialblogspot/PbmK" name="uri" /><input type="hidden" name="loc" value="en_US" />
<input class="mbtips-emailsubmit" value="Submit" type="submit" />
</form>
</div>
<style class="text/css"></style>
<div class="table">
<table><tbody><tr align="right"><td align="right"><div class="subicons"><a class="Fadeout" href="http://www.facebook.com/TutorialforBlogspot" imageanchor="1" target="_blank" rel="nofollow"><img border="0" width="30" src="http://3.bp.blogspot.com/-czBbDmQRQhQ/TvCTKhaK4zI/AAAAAAAAAZY/E_fHny3fDBs/s1600/facebook-48.png" /></a></div></td><td><div class="subicons"><a class="Fadeout" href="https://twitter.com/#!/2torialBlogspot" imageanchor="1" target="_blank" rel="nofollow"><img border="0" width="30" src="http://4.bp.blogspot.com/-k5cV1pvQp4g/TvCTMHqoxZI/AAAAAAAAAZs/hYpUi-qzKaw/s1600/twitter-48.png" /></a></div></td><td><div class="subicons"><a class="Fadeout" href="http://feeds.feedburner.com/tutorialblogspot/PbmK" imageanchor="1" target="_blank" rel="nofollow"><img border="0" width="30" src="http://1.bp.blogspot.com/-tANmA_fOkTk/TvCTLg2BGvI/AAAAAAAAAZk/vE6qGJK50t8/s1600/rss-48.png" /></a></div></td><td><a class="Fadeout" href="https://plus.google.com/108329354747256877665?rel=publisher" imageanchor="1" target="_blank" rel="nofollow"><img width="30" border="0" src="http://3.bp.blogspot.com/-H-LHpGxfe5k/TvCTLL3ovmI/AAAAAAAAAZc/AT2pMexo7RE/s1600/google-48.png" /></a></td></tr></tbody></table>
</div></div>

Save widget FeedBurner sahabat

Dari kode di atas, yang harus di rubah atau diganti adalah :

Ganti tutorialblogspot/PbmK dengan nama Feed blog sobat
Ganti http://feeds.feedburner.com/tutorialblogspot/PbmK dengan URL FeedBurner sobat
Ganti http://www.facebook.com/TutorialforBlogspot dengan URL Facebook sobat.
Ganti https://twitter.com/#!/2torialBlogspot dengan URL Twitter sobat
Ganti https://plus.google.com/108329354747256877665 dengan URL akun Google Plus sobat

Semoga kotak berlangganan FeedBurner yang keren ini semakin memperindah tampilan blog sobat.

Sumber

11:19:00 PM

Sharing button sangat penting kehadirannya dalam blog. Karena dengan adanya sharing button tersebut, maka akan mempermudah pengunjung blog kita untuk membagikan artikel yang kita tulis. Selain mempermudah pengunjung untuk berbagi artikel yang kita posting di blog, sharing button juga berguna untuk meningkatkan traffik blog kita. Jadi, dengan adanya sharing button yang kita pasang di blog, maka akan banyak manfaat yang kita peroleh.

Sharing button, biasanya terdiri dari share ke facebook, tweet ke twitter, G+, delicious, technorati, digg, dan masih banyak lagi. Begitupun dengan jenis - jenisnya, banyak sekali jenis - jenis widget sharing button yang bisa kita pilih untuk blog kita. Seperti widget sharing is sexy, widget sharing is caring, share the knowledge, add this, sampai berbagai widget sharing melayang yang memiliki banyak jenis dengan css yang berbeda - beda.

Namun, sangat - sangat tidak mungkin apabila saya harus menjelaskan berbagai widget tersebut satu persatu. Karena keterbatasan waktu, dan keterbatasan tempat pula (karena yang mau pake ni komputer lagi ngantri). Jadi saya hanya bisa bagikan tiga widget yang paling populer saja. Namun, jika ada yang ingin widget yang lainnya, silahkan katakan saja apa yang sobat inginkan di form komentar.

Kembali ke Topik, di bawah ini adalah tiga widget sharing button yang paling banyak di gunakan sobat - sobat blogger Indonesia. Mari kita perhatikan satu persatu.

1. Widget Sharing Is Sexy

Widget sharing is sexy adalah widget share button paling popular versi saya. Dan saya sendiri - pun menggunakan widget ini untuk ditempatkan di bawah postingan saya untuk mempermudah pengguna berbagi tulisan saya. Karena, jika kita ingin berbagi artikel karya orang lain, alangkah lebih baik jika men-share dari pada meng copy paste, supaya tidak melanggar tentang pelanggaran hak cipta.

Widget ini berisi fasilitas untuk share ke berbagai social media dan social network, seperti delicious, digg, technorati, reddit, stumbleupon, designfloat, facebook, twitter, furl, RSS Feed, dan Fasilitas untuk e-mail this.

Berikut Ini adalah script dan tutorial untuk membuat widget sharing is sexy :

Pertama - tama, masuk ke Tata Letak/Rancangan, dan Klik Edit HTML. Selanjutnya, tambahkan kode dibawah tepat setelah ]]</b:skin>

Lalu, cari kode <data:post.body/>, dan tambahkan kode dibawah :

NOTE : Ganti dengan url feed sobat pada script di atas yang ditandai dengan huruf berwarna merah. Untuk melihat url feed (feedburner sobat) bisa klik http://feedburner.google.com.

2. Add This

Add This adalah widget share button terbaik ke dua versi saya. Mengapa demikian? Add This, merupakan widget share button yang bisa men-share ke 101 social bookmark dan jejaring sosial. Selain itu, ukurannya juga kecil dan tidak begitu mengganggu. Maka dari itu tak aneh apabila banyak blog yang menggunakan widget add this untuk blog mereka. Untuk cara membuat widget add this, silahkan kunjungi link berikut http://www.addthis.com.

3. Sedang dalam Rancangan

Karena saya tidak menemukan widget sharing button lainnya yang baik dan layak menurut saya, maka pada saat ini saya sedang merancang sendiri widget share button supaya membuat orang ingin men-share tulisan kita, tapi tidak terganggu oleh kehadirannya. Jadi, mohon maaf jika widget ini belum bisa saya publiksasikan. Karena masih rancangan, dan belum selesai. Tapi, kedua widget di atas juga sudah layak untuk di coba.

Sumber

11:15:00 PM

Langkah praktis menyimpan gambar di blog dan memperoleh alamat url gambar

1. Upload gambar ke blog,
insert gambar misalnya :

ini url gambarnya :

Cara mendapatkan urlnya dengan mencet tombol Edit Html yang berada disamping Compos sewaktu sobat akan posting artikel

Sumber

11:06:00 PM

Ikuti langkah - langkah di bawah ini untuk membuat facebook comment di blog.

Pertama - tama, log in ke akun blog sobat,
Lalu, Masuk Ke Rancangan/Tata Letak, dan Edit HTML,
Jangan lupa beri centang pada expand template widget,
Untuk Permulaan, kita simpan di bawah posting blog. Caranya, cari kode <data:post.body/> (gunakan Ctrl + F untuk mencari) dan simpan kode / script di bawah, di bawah kode <data:post.body/>,

<b:if cond="data:blog.pageType == "item"">
<div id='fb-root'/><script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/><fb:comments expr:href='data:post.url' num_posts='2' width='500'/>
</b:if>

Terakhir, Simpan Template dan lihat hasilnya.

Sumber

9:13:00 PM

Kode Warna HTML

Cara Mengetahui Kode warna HTML - Kode Warna HML sangat diperlukan dalam proses mengedit template blog. Untuk mengubah warna pada bagian - bagian blog ( warna sidebar, warna garis pinggir, warna link, warna huruf, dll ), kita bisa menggunakan bahasa inggris warna yang kita inginkan. Misalnya, RED untuk warna merah, BLACK untuk warna hitam, WHITE untuk warna putih, GREY untuk warna abu abu, dll. Masalahnya, dengan menggunakan bahasa inggris dari warna yang diinginkan, kita tidak bisa mendapatkan warna yang pas. Untuk membuat warna abu abu tua, kita tidak bisa menggunakan kata GREY, begitu juga untuk warna yang lain seperti biru muda, coklat tua, dll. Karena itu, kita harus menggunakan KODE WARNA HTML agar kita bisa mendapatkan warna yang sangat pas untuk sesuai dengan yang kita inginkan. Sayangnya ~~lagi~~, kita tidak mungkin bisa menghafal semua KODE WARNA HTML. Untuk itu, saya menyediakan tools di blog ini untuk memudahkan anda melihat dan menambahkan KODE WARNA HTML. Ada 2 tools di handphone eh, maksud saya blog ini yang bisa anda gunakan baik untuk melihat "KODE HTML warna" , maupun untuk melihat "WARNA kode html". Berikut kedua TOOLS dan cara menggunakannya :

Tools untuk melihat Kode Warna
Melihat KODE HTML warna yang diinginkan.
Klik warna yang anda inginkan lalu secara otomatis kode dari warna yang anda klik akan terlihat pada kotak kecil di sampingnya ( kotak pertama / kotak yang paling atas ). 3 kotak warna di bawahnya sebagai warna alternatif yang mungkin anda inginkan juga. Anda tinggal mengcopy paste kode warna tersebut.

Melihat WARNA kode html

Anda punya kode warna di template blog tapi tidak tahu kode warna tersebut untuk warna apa ? Masukkan atau ketikkan kode warna anda pada KOTAK yang ada di bawah tulisan "Insert the hex code ( without"#") below and press the Update button". Ingat...!!! jangan masukkan tanda pagar ( # ), misalnya anda ingin mengetahui warna dari kode warna #FF3300 maka masukkan kode FF3300 saja pada kotaknya lalu klik tombol "UPDATE". Secara otomatis, anda akan melihat warna dari kode warna #FF3300 pada kotak kecil di atasnya beserta 3 pilihan warna alternatif.

Notes :
Jika anda tidak bisa melihat tollsnya, berarti anda membutuhkan Adobe Plash Player. Download versi terbaru "Disini"

Kekurangan dari tolls di atas adalah tidak tersedia pilihan untuk warna HITAM dan PUTIH ,untuk itu, gunakan tolls kedua di bawah ini.

Notes :

Cara menggunakannya hampir sama dengan tolls pertama

Semoga Tolls untuk melihat kode warna HTML di atas bermanfaat.... Happy blogging....

MUSTEKERS

Bahasa

Kategori

Pengunjung

Followers

Saturday, October 6, 2012

Langkah Memasang Icon Gambar Sebelum Entri / Judul Posting

Cara mudah mengganti favicon dengan script

Wednesday, October 3, 2012

Cara membuat Header Melayang

Form Registrasi dengan Validasi AJAX dan PHP

Kebutuhan database MySQL

Struktur File dan Form registrasi

File latihan validasi_data.php

Membuat form input data

Memilih type dan panjang data yang ingin difilter menggunakan AJAX/Spry

Mengubah tampilan Spry melalui CSS

Mengaktifkan form Insert Record

Validasi Server Side menggunakan PHP

Menampilkan pesan error

Langkah-langkah Membuat Kotak Berlangganan Email FeedBurner Keren

Tuesday, October 2, 2012

3 Pilihan Sharing Button Untuk Blog

Cara Pasang dan Memperoleh Url Gambar

Cara Membuat Facebook Comment di Blog

Cara mengetahui Kode Warna HTML

Gabung di Facebook

Selamat Bergabung di MUSTEKER

Persahabatan Adalah Kunci Pergaulan

Tutorial Blog

Member Login

Not a member yet? Sign Up!

Bahasa

Kategori

Pengunjung

Followers

Saturday, October 6, 2012

Wednesday, October 3, 2012

Kebutuhan database MySQL

Struktur File dan Form registrasi

File latihan validasi_data.php

Membuat form input data

Memilih type dan panjang data yang ingin difilter menggunakan AJAX/Spry

Mengubah tampilan Spry melalui CSS

Mengaktifkan form Insert Record

Validasi Server Side menggunakan PHP

Menampilkan pesan error

Tuesday, October 2, 2012

Social Profiles

Gabung di Facebook

Selamat Bergabung di MUSTEKER

Persahabatan Adalah Kunci Pergaulan

Tutorial Blog

Member Login

Not a member yet? Sign Up!