Form that we provide must be validated to ensure that user input is correct. eg for postal codes are digits, the username must be filled and at least 5 letters, and others. surely this validation we adjust the form that we have.
With jQuery, we can make validation easier, because each user to fill in data into the form we will always be in check. and this is obviously easier for users when the input data, because users will know where he's wrong.
how do we make it? actually quite easy because we will use the functions that already exist and we just adjusting to the needs of all.
example script is follows:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Belajar Komputer</title>
<link href="css/cmxform.css" rel="stylesheet" type="text/css" media="screen" />
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery.validate.js" type="text/javascript"></script>
<script src="js/cmxforms.js" type="text/javascript"></script>
<script type="text/javascript">
$.validator.setDefaults({
submitHandler: function() { alert("submitted!"); }
});
$().ready(function() {
// validate signup form on keyup and submit
$("#pendaftaran").validate({
rules: {
firstname: "required",
username: {
required: true,
minlength: 5
},
password: {
required: true,
minlength: 5
},
konPass: {
required: true,
minlength: 5,
equalTo: "#password"
},
email: {
required: true,
email: true
}
},
messages: {
firstname: "Please enter your lastname",
username: {
required: "Please enter a username",
minlength: "Your username must consist of at least 2 characters"
},
password: {
required: "Please provide a password",
minlength: "Your password must be at least 5 characters long"
},
konPass: {
required: "Please provide a password",
minlength: "Your password must be at least 5 characters long",
equalTo: "Please enter the same password as above"
},
email: "Please enter a valid email address"
}
});
});
</script>
</head>
<body>
<h1 id="banner"><a href="http://komputerbelajar.blogspot.com">Validasi Form</a> Demo</h1>
<div id="main">
<p>Kunjungi <a href="http://komputerbelajar.blogspot.com">blog saya</a> jika ada yang kurang jelas </p>
<form action="" class="jNice" id="pendaftaran" name="pendaftaran" method="POST">
<fieldset>
<table>
<tr>
<td valign="top">Username </td>
<td width="20px" valign="top">: </td>
<td>
<input name="username" class="text-medium" id="username">
</td>
</tr>
<tr>
<td valign="top">Password </td>
<td width="20px" valign="top">: </td>
<td>
<input type="password" name="password" class="text-medium" id="password">
</td>
</tr>
<tr>
<td valign="top">konfirmasi Password </td>
<td width="20px" valign="top">: </td>
<td>
<input type="password" name="konPass" class="text-medium" id="konPass">
</td>
</tr>
<tr>
<td valign="top">Nama </td>
<td width="20px" valign="top">: </td>
<td>
<input name="nama" class="text-long" id="firstname">
</td>
</tr>
<tr>
<td valign="top">Nomor KTP</td>
<td width="20px" valign="top">: </td>
<td>
<input name="ktp" class="text-long">
</td>
</tr>
<tr>
<td valign="top">Alamat</td>
<td width="20px" valign="top">: </td>
<td>
<textarea name="alamat"></textarea>
</td>
</tr>
<tr>
<td valign="top">Kota</td>
<td width="20px" valign="top">: </td>
<td>
<input name="kota" class="text-long">
</td>
</tr>
<tr>
<td valign="top">Kode Pos</td>
<td width="20px" valign="top">: </td>
<td>
<input name="kodePos" class="text-medium">
</td>
</tr>
<tr>
<td valign="top">Nomor Telepon</td>
<td width="20px" valign="top">: </td>
<td>
<input name="tlp" class="text-medium" >
</td>
</tr>
<tr>
<td valign="top">E-mail</td>
<td width="20px" valign="top">: </td>
<td>
<input name="email" class="text-long" id="email">
</td>
</tr>
<tr>
<td valign="top">Jabatan</td>
<td width="20px" valign="top">: </td>
<td>
<label>
<select name="idGroup">
<option value="1">Kecamatan</option>
<option value="2">Kabupaten</option>
<option value="3">Propinsi</option>
</select>
</label>
</td>
</tr>
<tr>
<td valign="top">Pertanyaan Keamanan</td>
<td width="20px" valign="top">: </td>
<td>
<input name="pertanyaan" class="text-long">
</td>
</tr>
<tr>
<td valign="">Jawaban</td>
<td width="20px" valign="top">: </td>
<td>
<textarea name="jawaban"></textarea>
</td>
</tr>
</table>
<input type="submit" value="Masukkan Data" />
</form>
</body>
</html>
in the example above of the most important thing is we have to include a jquery.js and jquery.validate.js. you can download it.
for validation, I give an example for a password, the html code for password input.
password: {
required: true,
minlength: 5
},purpose of validating the password is the password must be filled and a minimum length of password is 5 characters.
You can download source code here.
Jumat, 22 Oktober 2010
Java: Using MySQL with Java
I will discuss about the java connection to the Mysql database.
To be more easy in practice, I will give the source code and follow the steps, though more smoothly...
1. download the database here
2. download the source code here (opened with netbeans)
3. Create a data base with the name "testkon" and import the data base that you downloaded in step one
Try to Run .. if there is trouble, please ask ... :-)
To be more easy in practice, I will give the source code and follow the steps, though more smoothly...
1. download the database here
2. download the source code here (opened with netbeans)
3. Create a data base with the name "testkon" and import the data base that you downloaded in step one
Try to Run .. if there is trouble, please ask ... :-)
Selasa, 19 Oktober 2010
PHP : Create a CAPTCHA with PHP and MySQL
A CAPTCHA (Completely Automated Public Turing test to tell Computers and Humans Apart) is a challenge-response test most often placed within web forms to determine whether the user is human.
The purpose of CAPTCHA is to ensure that executing truly human and to block form submissions by spambots, which are automated scripts that post spam content everywhere they can. Lots of facilities that provide a captcha and we can use it. But this time we will create a captcha. In this tutorial, concept of captcha is users will choose an appropriate image name with a picture beside, the picture will be displayed randomly.
how to make it ...
1. Prepare the database and create a table with the following code:
CREATE TABLE IF NOT EXISTS `captcha` (
`id_captcha` int(11) NOT NULL AUTO_INCREMENT,
`nama_captcha` varchar(50) NOT NULL,
`gambar_captcha` varchar(50) NOT NULL,
PRIMARY KEY (`id_captcha`)
)
2. Fill the table with the following code:
INSERT INTO `captcha` (`id_captcha`, `nama_captcha`, `gambar_captcha`) VALUES
(1, 'domba', '02.jpg'),
(2, 'kepala kuda', '03.jpg'),
(3, 'anak ayam', '04.jpg'),
(4, 'ayam jago', '06.jpg'),
(5, 'Tikus', '07.jpg');
3. download image files here. (We can add as needed)
4. Database connection can be viewed here or downloaded here
5. Make a php file as below
<?php
if(isset($_POST['captcha'])){
if($_POST["cap_cek"] != $_POST["pilihan"])
{
die('{"salah nda..."}');
}
else
die('{"bener nda..."}');
}
require_once('class.mysql.php');
$mysql = new Mysql();
$mysql->connect();
if($mysql->execute("select * from captcha order by rand() limit 1")){
$data = $mysql->getDataSet();
}else{
$data = 0;
}
$nama = $data[0][1];
$gambar = $data[0][2];
$id_c = $data[0][0];
if($mysql->execute("select * from captcha where id_captcha!=$id_c order by rand() limit 3 ")){
$data = $mysql->getDataSet();
}else{
$data = 0;
}
//gabungkan hasil dalam satu array
for($i=0;$i<4;$i++){
if($i<3){
$captcha_nama[$i] = $data[$i][1];
}
else{
$captcha_nama[$i] = $nama;
}
}
$rand_keys=array_rand($captcha_nama,4);
?>
<form method="post" action="" name="captcha">
<table border="0">
<tr>
<td colspan="3">Apakah nama Hewan Di Bawah ini: </td>
</tr>
<tr>
<td ><img src="<?=$gambar?>" /></td>
<td > </td>
<td >
<?php
for($i=0;$i<4;$i++){
?>
<input name="pilihan" type="radio" value="<?=$captcha_nama[$rand_keys[$i]] ?>" /> <?=$captcha_nama[$rand_keys[$i]] ?>
<?php
}
?>
</td>
</tr>
<tr>
<td colspan="3">
<input type="hidden" name="cap_cek" value="<?=$nama ?>" >
<input type="submit" name="captcha" value="cek captcha!">
</td>
</tr>
</table>
</form>
6. finish. you can download full code here.
The purpose of CAPTCHA is to ensure that executing truly human and to block form submissions by spambots, which are automated scripts that post spam content everywhere they can. Lots of facilities that provide a captcha and we can use it. But this time we will create a captcha. In this tutorial, concept of captcha is users will choose an appropriate image name with a picture beside, the picture will be displayed randomly.
how to make it ...
1. Prepare the database and create a table with the following code:
CREATE TABLE IF NOT EXISTS `captcha` (
`id_captcha` int(11) NOT NULL AUTO_INCREMENT,
`nama_captcha` varchar(50) NOT NULL,
`gambar_captcha` varchar(50) NOT NULL,
PRIMARY KEY (`id_captcha`)
)
2. Fill the table with the following code:
INSERT INTO `captcha` (`id_captcha`, `nama_captcha`, `gambar_captcha`) VALUES
(1, 'domba', '02.jpg'),
(2, 'kepala kuda', '03.jpg'),
(3, 'anak ayam', '04.jpg'),
(4, 'ayam jago', '06.jpg'),
(5, 'Tikus', '07.jpg');
3. download image files here. (We can add as needed)
4. Database connection can be viewed here or downloaded here
5. Make a php file as below
<?php
if(isset($_POST['captcha'])){
if($_POST["cap_cek"] != $_POST["pilihan"])
{
die('{"salah nda..."}');
}
else
die('{"bener nda..."}');
}
require_once('class.mysql.php');
$mysql = new Mysql();
$mysql->connect();
if($mysql->execute("select * from captcha order by rand() limit 1")){
$data = $mysql->getDataSet();
}else{
$data = 0;
}
$nama = $data[0][1];
$gambar = $data[0][2];
$id_c = $data[0][0];
if($mysql->execute("select * from captcha where id_captcha!=$id_c order by rand() limit 3 ")){
$data = $mysql->getDataSet();
}else{
$data = 0;
}
//gabungkan hasil dalam satu array
for($i=0;$i<4;$i++){
if($i<3){
$captcha_nama[$i] = $data[$i][1];
}
else{
$captcha_nama[$i] = $nama;
}
}
$rand_keys=array_rand($captcha_nama,4);
?>
<form method="post" action="" name="captcha">
<table border="0">
<tr>
<td colspan="3">Apakah nama Hewan Di Bawah ini: </td>
</tr>
<tr>
<td ><img src="<?=$gambar?>" /></td>
<td > </td>
<td >
<?php
for($i=0;$i<4;$i++){
?>
<input name="pilihan" type="radio" value="<?=$captcha_nama[$rand_keys[$i]] ?>" /> <?=$captcha_nama[$rand_keys[$i]] ?>
<?php
}
?>
</td>
</tr>
<tr>
<td colspan="3">
<input type="hidden" name="cap_cek" value="<?=$nama ?>" >
<input type="submit" name="captcha" value="cek captcha!">
</td>
</tr>
</table>
</form>
6. finish. you can download full code here.
Senin, 18 Oktober 2010
String Split with Some Delimiters and Remove Duplicate
in this tutorial, I Want To show how to split a String into tokens with some delimiters and remove duplicate. thus, the result is a unique tokens. I am using Java.
For example:
String input = "AAAA AAAA BBBB BBBB CCCC djgu";
the result should be: {AAAA, BBBB, digu, CCCC}
The following is the complete source code:
String s2 = "cahdt aaaa aaaa bbbbb ddddd";
List li = new ArrayList ();
StringTokenizer st = new StringTokenizer (s2 ,";&@! - ");
while (st.hasMoreTokens ()) {
String temp = st.nextToken ();
li.add (temp);
}
Set set2 = new HashSet <string> <string> (li);
String [] result2 = new String [set2.size ()];
set2.toArray (result2);
for (String s: result2) {
System.out.print (s + ",");
}
For example:
String input = "AAAA AAAA BBBB BBBB CCCC djgu";
the result should be: {AAAA, BBBB, digu, CCCC}
The following is the complete source code:
String s2 = "cahdt aaaa aaaa bbbbb ddddd";
List li = new ArrayList ();
StringTokenizer st = new StringTokenizer (s2 ,";&@! - ");
while (st.hasMoreTokens ()) {
String temp = st.nextToken ();
li.add (temp);
}
Set set2 = new HashSet <string> <string> (li);
String [] result2 = new String [set2.size ()];
set2.toArray (result2);
for (String s: result2) {
System.out.print (s + ",");
}
Java: How to Install GWT in Netbeans
Google Web Toolkit (GWT) is an open source web development framework that allows developers to easily create high-performance AJAX applications using Java. Google Web Toolkit is getting a lot of attention in the web developer community thanks to its interesting way of avoiding the need to write JavaScript code for interactive web applications. You can download this GWT plug-in here and start developing GWT-based applications in NetBeans.
With GWT, you are able to write your front end in Java, and it compiles your source code into highly optimized, browser-compliant JavaScript and HTML. "Writing web apps today is a tedious and error-prone process. You spend 90% of your time working around browser quirks, and JavaScript's lack of modularity makes sharing, testing, and reusing AJAX components difficult and fragile. It doesn't have to be that way," reads the Google Web Toolkit site.
In this tutorial, you learn how the above principles are applied to real applications. At the same time, you are introduced to NetBeans IDE's support for GWT and you build a simple application that makes use of some of these features.
1. Download GWT plugin here
2. Install the plug-in using the Plug-in manager. Go to the "Tools | Plugins" menu action, switch to the "Downloaded" tab and locate the plug-in on your disk drive.
You don't even have to restart your IDE - GWT support is instantly available for you!
Creating the Source Structure of a GWT Application
1. Choose File > New Project (Ctrl-Shift-N). Under Categories, select Web (or Java Web). Under Projects, select Web Application. Click Next.
2. In step 2, Name and Location, type HelloGWT in Project Name. You can also specify the location of the project by typing in a path on your computer in Project Location field. Click Next.
3. In the Server and Settings step, select any server that you have registered in the IDE. If you included Tomcat or the GlassFish server when installing the IDE, they display in the drop-down list.
4. Specify the Java version you are using. Click Next.
5. In the framework Step, select GWT:
6. click finish.
7. In the Projects window, right-click the project node and choose Run. The application is built and a web archive (WAR) is created. It is deployed to the server. The server starts, if it is not running already. Your computer's default browser opens and the welcome page of the application is displayed.
source : http://netbeans.org/kb/docs/web/quickstart-webapps-gwt.html
With GWT, you are able to write your front end in Java, and it compiles your source code into highly optimized, browser-compliant JavaScript and HTML. "Writing web apps today is a tedious and error-prone process. You spend 90% of your time working around browser quirks, and JavaScript's lack of modularity makes sharing, testing, and reusing AJAX components difficult and fragile. It doesn't have to be that way," reads the Google Web Toolkit site.
In this tutorial, you learn how the above principles are applied to real applications. At the same time, you are introduced to NetBeans IDE's support for GWT and you build a simple application that makes use of some of these features.
1. Download GWT plugin here
2. Install the plug-in using the Plug-in manager. Go to the "Tools | Plugins" menu action, switch to the "Downloaded" tab and locate the plug-in on your disk drive.
You don't even have to restart your IDE - GWT support is instantly available for you!
Creating the Source Structure of a GWT Application
1. Choose File > New Project (Ctrl-Shift-N). Under Categories, select Web (or Java Web). Under Projects, select Web Application. Click Next.
2. In step 2, Name and Location, type HelloGWT in Project Name. You can also specify the location of the project by typing in a path on your computer in Project Location field. Click Next.
3. In the Server and Settings step, select any server that you have registered in the IDE. If you included Tomcat or the GlassFish server when installing the IDE, they display in the drop-down list.
4. Specify the Java version you are using. Click Next.
5. In the framework Step, select GWT:
6. click finish.
7. In the Projects window, right-click the project node and choose Run. The application is built and a web archive (WAR) is created. It is deployed to the server. The server starts, if it is not running already. Your computer's default browser opens and the welcome page of the application is displayed.
source : http://netbeans.org/kb/docs/web/quickstart-webapps-gwt.html
Java: Arabict text encoding in Java and Mysql
I do not have a problem when retrieving arabic text data from mysql database. But when the input Arabic text into my database is having problems. Arabic text changed to "????", so it can not be read. after looking for a solution, I found a way to solve it.
First, the Arabic text should be encoded first by using the code:
StrToEncode String = "بسم الله";
String encoded = URLEncoder.encode (strToEncode, "UTF-8");
now, that has been encoded strToEncode changed to:
% D8% A8% D8% B3% D9% 85 +% D8% A7% D9% 84% D9% 84% D9% 87
encode the string that is inserted into the mysql. then to read the Arabic text data from mysql database needs to be decoded using the code:
String correctDecoded = URLDecoder.decode (encoded, "UTF-8");
and the results of correctDecode:
بسم الله
First, the Arabic text should be encoded first by using the code:
StrToEncode String = "بسم الله";
String encoded = URLEncoder.encode (strToEncode, "UTF-8");
now, that has been encoded strToEncode changed to:
% D8% A8% D8% B3% D9% 85 +% D8% A7% D9% 84% D9% 84% D9% 87
encode the string that is inserted into the mysql. then to read the Arabic text data from mysql database needs to be decoded using the code:
String correctDecoded = URLDecoder.decode (encoded, "UTF-8");
and the results of correctDecode:
بسم الله
Minggu, 17 Oktober 2010
PHP: Dinamyc list of a combobox
Database requiered to fill the combobox list with dynamic data. we need simply steps. The steps are listed below:
1. Create a table, you can use this script:
CREATE TABLE `komputerbelajar`.`mahasiswa` (
`NIM` VARCHAR( 25 ) NOT NULL ,
`NAMA` VARCHAR( 25 ) NOT NULL ,
`ALAMAT` VARCHAR( 25 ) NOT NULL ,
PRIMARY KEY ( `NIM` )
) ENGINE = MYISAM
2. Fill the table:
INSERT INTO `komputerbelajar`.`mahasiswa` (
`NIM` ,
`NAMA` ,
`ALAMAT`
)
VALUES (
'550022551', 'Budi', 'Semarang'
), (
'550022552', 'Najib', 'Surabaya'
), (
'550022553', 'Ahmad', 'Bandung'
), (
'550022554', 'Slamet', 'Jakarta'
), (
'550022555', 'Sanjaya', 'Semarang'
);
3. Download connection file (php to mysql) in here or view it in here.
4. Create a php code like below:
<?php
include 'class.mysql.php';
$mysql = new Mysql();
$mysql->connect();
if($mysql->execute("select nim, nama from mahasiswa")){
$data = $mysql->getDataSet();
}else{
$data = 0;
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Combo-Box</title>
</head>
<body>
<select name="listmenu">
<?php
for($i=0;$i<count($data);$i++){
?>
<option value="<?=$data[$i][0]?>"><?=$data[$i][1]?> </option>
<?php
}
?>
</select>
</body>
</html>
5. Finish you can download in here and try it.... thanks.
1. Create a table, you can use this script:
CREATE TABLE `komputerbelajar`.`mahasiswa` (
`NIM` VARCHAR( 25 ) NOT NULL ,
`NAMA` VARCHAR( 25 ) NOT NULL ,
`ALAMAT` VARCHAR( 25 ) NOT NULL ,
PRIMARY KEY ( `NIM` )
) ENGINE = MYISAM
2. Fill the table:
INSERT INTO `komputerbelajar`.`mahasiswa` (
`NIM` ,
`NAMA` ,
`ALAMAT`
)
VALUES (
'550022551', 'Budi', 'Semarang'
), (
'550022552', 'Najib', 'Surabaya'
), (
'550022553', 'Ahmad', 'Bandung'
), (
'550022554', 'Slamet', 'Jakarta'
), (
'550022555', 'Sanjaya', 'Semarang'
);
3. Download connection file (php to mysql) in here or view it in here.
4. Create a php code like below:
<?php
include 'class.mysql.php';
$mysql = new Mysql();
$mysql->connect();
if($mysql->execute("select nim, nama from mahasiswa")){
$data = $mysql->getDataSet();
}else{
$data = 0;
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Combo-Box</title>
</head>
<body>
<select name="listmenu">
<?php
for($i=0;$i<count($data);$i++){
?>
<option value="<?=$data[$i][0]?>"><?=$data[$i][1]?> </option>
<?php
}
?>
</select>
</body>
</html>
5. Finish you can download in here and try it.... thanks.
Langganan:
Postingan (Atom)