Tampilkan postingan dengan label Arsip. Tampilkan semua postingan
Tampilkan postingan dengan label Arsip. Tampilkan semua postingan

Jumat, 12 September 2014

Recipe of KLEPON | Traditional Java’s food

Leave a Comment

Sugeng Siang, Lur.

Yep, Good Afternoon, My Bro-Sist—well, in Midle Java, i call my fams as Lur. J

This is my first post about traditional Java Recipes. I’ll tell to all of you about a simple recipe that be my family’s favourite foods—so do i (of course). We call this as klepon, we usually enjoy it with hot tea in the morning or when evening will comes.

Ingredient:

a.       250 gr of sticky or glutinous rice powder

b.      50 gr of pulverize rice

c.       100 gr of pulverized Java Sugar

d.      Scraped young coconut

e.      1 stablespoon of salt

f.        1 teaspoon of sugar

g.       250 ml of warm water

h.      1 molasse of green dye

Direction:

a.       Mix well sticky powder, pulverized rice, pulverized java sugar, and green dye with warm water.

b.      Take a tablespoon of dough, put dawn into your palm of hand and flat that dough.

c.       Pour a pinch of pulverized java sugar and cover until the dough is organized as orb.

d.      Pour into boiling water.

e.      Repeat step a-d until the dough used up.

f.        Steam scraped young coconut, salt and sugar, put dawn into a mould.

g.       Take when klepon is afloat and put dawn into the mould, stir well.

 

If any question, please write it in the comment form, I’ll tell to you next.

See you. Happy Cooking, Lur.

Recipe of KLEPON Traditional Java’s food

Read More..

JQuery $(this) & addClass

Leave a Comment
Fungsi addClass() digunakan untuk menambahkan class baru pada element-element tertentu yang diinginkan. Misalnya ketika mau membuat tabbed menu pada sebuah website, kita bisa menggunakan fungsi addClass untuk memudahkannya.

So, Guys! mari kita belajar bersama, simaklah short tutorial di bawah ini:

Membuat element h2 yang akan diberi event untuk menambah class pada element h2. Untuk melihat apakah penambahan class berhasil atau tidak, silahkan klik element h2 lalu seleksi/blok element h2 dan div yang muncul setelah diklik. Setelah itu klik kanan dan pilih view selection source di Mozilla.
//perhatikan id yang digunakan 
<h2>Klik aku dan lihat di source code apakah classnya bertambah atau tidak</h2>

Membuat element div untuk diberi event klik, ID digunakan untuk pemanggilan element dari JQuery nanti.
//perhatikan id yang digunakan 
<div class="answer">
Hore!!! Classnya h2 bertambah, aku berhasil.</div>

Script JQuery hover
//import file jQuery
<script type="text/javascript" src="sumber/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
 $('.answer').hide();
 $('.main h2').toggle(
  function() {
        $(this).next('.answer').slideDown();
     $(this).addClass('close');
  },
  function() {
     $(this).next('.answer').fadeOut();
     $(this).removeClass('close');
   }
 ); // end toggle
}); // end ready
</script>
Keterangan: fungsi $(this) digunakan sebagai kata ganti dari elemnent yang fungsinya memuat $(this). Pada script di atas, $(this) merujuk (sebagai kata ganti) pada element h2. Jadi, ketika event h2 dijalankan, $(this) akan mewakili h2 sebagai pemilik event.

Contoh

Klik aku dan lihat di source code apakah classnya bertambah atau tidak

Hore!!! Classnya bertambah, aku berhasil.
Read More..

Mengisi input Jquery

Leave a Comment
Tadi malam melakukan blogwalking untuk mencari bagaimana caranya mengisi elemen input dengan menggunakan JQuery. Cara ini kubutuhkan untuk melanjutkan pembuatan pembelajaran berbasis simulasi untuk materi penghitungan kependudukan. Dulu, sebenarnya sudah pernah membuat dengan Java Script, namun scriptnya terlalu panjang dan membuat pusing kepala. Dengan JQuery, sepertinya script itu bisa disederhanakan.

Setelah cara itu didapat, sekarang saatnya diarsipkan di sini. :-)

Membuat element input dengan name istilah, NAME digunakan untuk inisiasi value element input dengan JQuery nanti.
//perhatikan id yang digunakan 
<input type="text" name="istilah">
Membuat element div untuk diberi event klik, ID digunakan untuk pemanggilan element dari JQuery nanti.
//perhatikan id yang digunakan 
<div id="klik">Klik aku</div>

Script JQuery hover
//import file jQuery
<script type="text/javascript" src="sumber/jquery.js"></script>
<script type="text/javascript">
//agar jQuery bekerja ketika dokumen siap
$(documen).ready(function(){
//memberi event klik pada id klik
$('#klik').click(function(){
//memberi tugas pada id istilah agar terisi value sesuai variabel
$("input[name='istilah']").val("Ok! saya muncul"); 
});
});
</script>
Keterangan: fungsi val() digunakan untuk mengidentifikasi value dari input untuk kemudian ditindaklanjuti dengan event lanjutan.

Contoh

Klik Aku
Read More..

Kamis, 11 September 2014

JQuery fadeIn & fadeOut

Leave a Comment
Cara menggunakan fungsi fadeIn() dan fadeOut() pada JQuery adalah sebagai berikut.

ELemen yang akan diberi event, dalam hal ini menggunakan event hover
//perhatikan id yang digunakan 
<div id="hover">Hover/sorot aku</div>
Tampilan/pesan ketika sudah dihover/disorot
//perhatikan id yang digunakan 
<div id="msg">Horee!! Aku berhasil membuat fadeIn() dan fadeOut()</div>

Script JQuery hover
//import file jQuery
<script type="text/javascript" src="sumber/jquery.js"></script>
<script type="text/javascript">
//agar jQuery bekerja ketika dokumen siap
$(document).ready(function(){
//menyembunyikan isi pesan 
$('#msg').hide();
//memberi event hover pada id hover
$('#hover').hover(function(){
//memberi tugas pada id msg agar tampil dengan animasi slideDown
$('#msg').fadeIn(600);  
},
function(){
//menyembunyikan id msg ketika tidak dihover dengan animasi slideUp
$('#msg').fadeOut(600);  
});
});
</script>
Keterangan: fungsi fadeIn() digunakan untuk menampilkan isi element HTML dengan animasi fadeIn atau terlihat sediki demi sedikit dengan pengurangan alpa/transparansi sesuai dengan angka yang ditentukan pada argumen. dalam hal ini, penambahan tersebut 600ms fadeIn(600). Sedangkan fungsi fadeOut() digunakan untuk menyembunyikan isi element HTML dengan animasi fadeOut atu menyembunyikan secara sedikit demi sedikit dengan penambahan alpha sesuai yang ditentukan pada argumen fungsi. dalam hal ini 600ms fadeOut(600).
ms dalam hal ini berarti milisecond atau milidetik.

Contoh
Sorot/hover aku
Horee!! Aku berhasil membuat fadeIn() dan fadeOut()
Read More..

JQuery slideDown & slideUp

Leave a Comment
Pernah melihat menu yang ketika disorot menampilkan sub menu dengan animasi slide? pernah bertanya bagaimana cara membuatnya? sudah ketemu? sudah bisa? Pada artikel ini akan dibahas fungsi JQuery dasar sebelum melanjutkan ke pembahasan pembuatan menu drop down dengan animasi slide.
Sekarang, pelajari dulu dasar-dasarnya, berlatih terus menerus dan coba dimodifikasi sesuai kehendak hati. Kalau kesulitan, tanyakan pada ahlinya. Kalau sudah mahir, silahkan kembangkan ke fungsi yang lebih rumit. Langsung saja ke pembahasan.

Cara menggunakan fungsi slideDown() dan slideUp() pada JQuery adalah sebagai berikut.

ELemen yang akan diberi event, dalam hal ini menggunakan event hover
//perhatikan id yang digunakan 
<div id="hover">Hover/sorot aku</div>
Tampilan/pesan ketika sudah dihover/disorot
//perhatikan id yang digunakan 
<div id="msg">Terimakasih telah berkenan menyentuhku</div>

Script JQuery hover
//import file jQuery
<script type="text/javascript" src="sumber/jquery.js"></script>
<script type="text/javascript">
//agar jQuery bekerja ketika dokumen siap
$(document).ready(function(){
//menyembunyikan isi pesan 
$('#msg').hide();
//memberi event hover pada id hover
$('#hover').hover(function(){
//memberi tugas pada id msg agar tampil dengan animasi slideDown
$('#msg').slideDown(300); 
},
function(){
//menyembunyikan id msg ketika tidak dihover dengan animasi slideUp
$('#msg').slideUp(300); 
});
});
</script>
Keterangan: fungsi slideDown() digunakan untuk menampilkan isi element HTML dengan animasi slideDown atau muncul sedikit demi sedikit secara horisontal, sedangkan fungsi slideUp() digunakan untuk menyembunyikan isi element HTML dengan animasi slideUp atau dengan cara hilang sedikit demi sedikit secara horisontal.

Contoh
Sorot/hover aku
Hore! Berhasilllllll!!!!!
Read More..

JQuery Hover, Show, Hide

Leave a Comment
Fungsi hover biasanya digunakan untuk membuat menu dropdown pada sebuah website.  Namun, tidak hanya untuk itu fungsi hover digunakan. Misalnya ketika kita ingin gambar yang disorot melakukan animasi berputar, zoom, fade, slide dan lain sebagainya, maka kita memerlukan fungsi hover jika menggunakan JQuery.
Di bawah ini sedikit contoh penggunaan fungsi hover untuk menampilkan dan menyembunyikan sebuah element div.

Cara menggunakan fungsi hover atau ketika mouse berada di atas element tertentu pada JQuery adalah sebagai berikut.

ELemen yang dihover/disorot mouse
//perhatikan id yang digunakan 
<div id="hover">Hover/sorot aku</div>
Tampilan/pesan ketika sudah dihover/disorot
//perhatikan id yang digunakan 
<div id="msg">Terimakasih telah berkenan menyentuhku</div>

Script JQuery hover
//import file jQuery
<script type="text/javascript" src="sumber/jquery.js"></script>
<script type="text/javascript">
//agar jQuery bekerja ketika dokumen siap
$(document).ready(function(){
//menyembunyikan isi pesan 
$('#msg').hide();
//memberi event hover pada id hover
$('#hover').hover(function(){
//memberi tugas pada id msg agar tampil
$('#msg').show();
},
function(){
//menyembunyikan id msg ketika tidak dihover
$('#msg').hide();
});
});
</script>
Keterangan: fungsi hide() digunakan untuk menyembunyikan isi element HTML, sedangkan fungsi show() digunakan untuk menampilkan isi element HTML.

Contoh
Sorot/hover aku
Terimakasih telah berkenan menyentuhku
Read More..

JQuery onClick, toggleFade

Leave a Comment
Cara menggunakan fungsi onClick pada JQuery adalah sebagai berikut.

ELemen yang diklik
//perhatikan id yang digunakan 
<div id="klik">klik aku</div>
Tampilan/pesan ketika sudah diklik
//perhatikan id yang digunakan 
<div id="msg">Terimakasih telah berkenan menyentuhku</div>

Script JQuery onClick
//import file jQuery
<script type="text/javascript" src="sumber/jquery.js"></script>
<script type="text/javascript">
//agar jQuery bekerja ketika dokumen siap
$(document).ready(function(){
//menyembunyikan isi pesan 
$('#msg').hide();
//memberi event onclick pada id klik
$('#klik').click(function(){
//memberi tugas pada id msg agar tampil
$('#msg').fadeToggle(500);
});
});
</script>
Keterangan: fungsi fadeToggle digunakan untuk even ganda. Pada script ini, event (klik) pertama menampilkan isi pesan dengan animasi fade. event (klik) kedua menyembunyikan isi pesan dengan animasi fade.

Contoh
klik aku
Terimakasih telah berkenan menyentuhku
Read More..

Daftar Fungsi JQuery 1.7.2

Leave a Comment
0
_toggle
add
addClass
after
ajaxComplete
ajaxError
ajaxSend
ajaxStart
ajaxStop
ajaxSuccess
andSelf
animate
append
appendTo
attr
before
bind
blur
change
children
clearQueue
click
clone
closest
constructor
contents
context
contextmenu
css
data
dblclick
delay
delegate
dequeue
detach
die
domManip
each
empty
end
eq
error
extend
fadeIn
fadeOut
fadeTo
fadeToggle
filter
find
first
focus
focusin
focusout
get
has
hasClass
height
hide
hover
html
index
init
innerHeight
innerWidth
insertAfter
insertBefore
is
jquery
keydown
keypress
keyup
last
length
live
load
map
mousedown
mouseenter
mouseleave
mousemove
mouseout
mouseover
mouseup
next
nextAll
nextUntil
not
off
offset
offsetParent
on
one
outerHeight
outerWidth
parent
parents
parentsUntil
position
prepend
prependTo
prev
prevAll
prevUntil
promise
prop
push
pushStack
queue
ready
remove
removeAttr
removeClass
removeData
removeProp
replaceAll
replaceWith
resize
scroll
scrollLeft
scrollTop
select
selector
serialize
serializeArray
show
siblings
size
slice
slideDown
slideToggle
slideUp
sort
splice
stop
submit
text
toArray
toggle
toggleClass
trigger
triggerHandler
unbind
undelegate
unload
unwrap
val
width
wrap
wrapAll
wrapInner
Read More..

Rabu, 10 September 2014

Membuat Autocomplete Searchform dari Database

Leave a Comment
Membuat autocomplete searchform dari database yang dimaksud di sini adalah membuat suggestion term sebagaimana yang ada pada pencarian Google. Misalnya, ketika memasukkan keyword pada searchform Google dengan kata Pepaya, maka akan muncul istilah terkait pepaya yang disajikan. Entah itu pepaya muda, pepaya Hongkong,  pepaya untuk diet, pepaya untuk ibu hamil dan lain sebagainya. Pembuatan autocomplete searchform ini menggunakan PHP dan Jquery.

Selanjutnya silahkan dicermati cara pembuatannya seperti di bawah ini:

Membuat file index.html
<html> 
<head> 
    <title>Membuat Autocomplete Searchform dari Database</title> 
    <script type="text/javascript" src="http://geodik.com/jquery-1.4.2.min.js"></script> 
    <script type="text/javascript" src="http://geodik.com/jquery-ui-1.8.2.custom.min.js"></script> 
    <script type="text/javascript"> 

        jQuery(document).ready(function(){
            $('#cari').autocomplete({source:'saran.php', minLength:1}); // saran.php di sini
        });

    </script> 
    <link rel="stylesheet" href="http://geodik.com/smoothness/jquery-ui-1.8.2.custom.css" /> 
    <style type="text/css"><!--
    
            /* style the auto-complete response */
            li.ui-menu-item { font-size:12px !important; }
    
    --></style> 
</head> 

<body> 

<form onSubmit="return false;"> //membuat form pencarian
    Isilah kata yang dicari
    <input id="cari" type="text" /> //membuat input form
</form> 

</body> 
</html>

Membuat saran.php
<?php

if ( !isset($_REQUEST['term']) )
    exit;

$dblink = mysql_connect('localhost', 'root', '') or die( mysql_error() );//membuat koneksi
mysql_select_db('siswa'); //memilih dtatabase

$rs = mysql_query('select istilah, definisi from prfx_data where istilah like "'. mysql_real_escape_string($_REQUEST['term']) .'%" order by istilah asc limit 0,10', $dblink);

$data = array();
if ( $rs && mysql_num_rows($rs) )
{
    while( $row = mysql_fetch_array($rs, MYSQL_ASSOC) )
    {
        $data[] = array(
            'label' => $row['istilah'] , //isi dengan nama kolom yang dijadikan rujukan
            'value' => $row['istilah']
        );
    }
}

echo json_encode($data);
flush();
?>
Read More..

Cara Cek Apakah Data Sudah Ada di Database

Leave a Comment
Cara cek apakah user atau data yang akan diinput sudah ada pada database adalah sebagai berikut:

Buat form untuk cek
<h4>Tambah Data</h4>
<form name="tambah" id="tambah" action="t.php" method="post">
<fieldset>
<input name="is" type="text"/><br/>
<textarea name="de" type="text"></textarea><br/>
<input type="submit" value="Tambah" name="tambah"/>
</fieldset>
</form>

Buat setting koneksi PHP-Mysql
 <?php
session_start();
$hostname_kon = "Localhost";
$database_kon = "siswa";
$username_kon = "root";
$password_kon = "";
$kon = mysql_pconnect($hostname_kon, $username_kon, $password_kon)
or die("Could not connect: " . mysql_error()); 
mysql_select_db($database_kon, $kon);

Buat script untuk cek
$cek=mysql_num_rows(mysql_query("SELECT istilah FROM prfx_data WHERE istilah='$istilah'")) or die (mysql_error());
     if($cek){ echo"data sudah ada"; }
  ?> 

Kode lengkap
<?php
session_start();
$hostname_kon = "Localhost";
$database_kon = "siswa";
$username_kon = "root";
$password_kon = "";
$kon = mysql_pconnect($hostname_kon, $username_kon, $password_kon)  or die("Could not connect: " . mysql_error()); 
mysql_select_db($database_kon, $kon);
$cek=mysql_num_rows(mysql_query("SELECT istilah FROM prfx_data WHERE istilah='$istilah'")) or die (mysql_error());
     if($cek){ echo"data sudah ada"; }
  ?> 
<h4>Tambah Data</h4>
<form name="tambah" id="tambah" action="t.php" method="post">
<fieldset>
<input name="is" type="text"/><br/>
<textarea name="de" type="text"></textarea><br/>
<input type="submit" value="Tambah" name="tambah"/>
</fieldset>
</form>
Read More..

Cara Update Database dengan PHP

Leave a Comment
Membuat form untuk update dtabase

<h4>Update</h4>
<form name="update" id="update" action="t.php" method="post">         
<fieldset>
<input name="isi" type="text" value="<?php echo $a;?>"/>
<textarea style="width:100%"  name="def" type="text">
<?php echo $b."<p>".$definisi."</p>";?></textarea>
<input type="submit" value="Update" name="update"/>
</fieldset>
</form>


Membuat koneksi database PHP-Mysql

<?php
session_start();
$hostname_kon = "Localhost"; // server
$database_kon = "siswa"; // nama database
$username_kon = "root"; //nama user database
$password_kon = ""; // password database
$kon = mysql_pconnect($hostname_kon, $username_kon, $password_kon)  
or die("Could not connect: " . mysql_error()); //membuat koneksi database
mysql_select_db("siswa", $kon); //memilih database

Membuat script update database

<?php }}}
if(isset($_POST['update'])){ // jika tombol update diklik
$i = $_POST['isi']; // isi yang diupdate
$d = $_POST['def']; // isi yang diupdate
$u=mysql_query ("UPDATE prfx_data SET istilah='$i', definisi='$d' 
WHERE istilah='$i'",$kon)or die (mysql_error()); //script update
echo "Berhasil diupdate"; //pemberitahuan berhasil diupdate
}
?>
Read More..

Membuat Sitemap dari Database dengan PHP

Leave a Comment
Cara membuat sitemap atau kumpulan link dinamis dari database menggunakan PHP dan Mysql adalah sebagai berikut.
<?php       
  $databaseServer = "localhost";        
$databaseUsername = "username";        
$databasePassword = "password";        
$databaseName = "database";        
$databaseTable = "tablename";        
header("Content-Type: text/xml");        
  function xmlentities($text)        
  {        
$search = array('&','<','>','"','\'');        
$replace = array('&amp;','&lt;','&gt;','&quot;','&apos;');        
    return str_replace($search,$replace,$text);   
  }        
  print chr(60)."?xml version='1.0' encoding='UTF-8'?".chr(62);        
  print chr(60)."urlset xmlns='http://www.google.com/schemas/sitemap/0.84' xmlns:xsi='http://www.w3.org/2001/XMLSchema-instance' xsi:schemaLocation='http://www.google.com/schemas/sitemap/0.84 http://www.google.com/schemas/sitemap/0.84/sitemap.xsd'".chr(62);        
$sql = "SELECT * FROM `".$databaseTable."`";        
$link = @mysql_connect($databaseServer,$databaseUsername,$databasePassword);        
  @mysql_select_db($databaseName,$link);        
$result = mysql_unbuffered_query($sql,$link);        
  while($row = mysql_fetch_array($result,MYSQL_ASSOC))        
  {        
// create the loc (URL) value based on the $row array, for example:        
$loc = $row["url"];        
    print "<url>";        
    print "<loc>".xmlentities($loc)."</loc>";        
    print "</url>";        
  }        
  print "</urlset>";        
?>
Read More..

Selasa, 04 Maret 2014

PHP | Membuat Signup Page

Leave a Comment

1.         File signup.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Geodik | Team Registration</title>

</head>

<style>

input{

    border: 2px solid #55ACEE;

    border-radius: 7px;

                transition: all 0.25s ease-in-out;

    -webkit-transition: all 0.25s ease-in-out;

    -moz-transition: all 0.25s ease-in-out;transition: all 0.25s ease-in-out;

    -webkit-transition: all 0.25s ease-in-out;

    -moz-transition: all 0.25s ease-in-out;

}

input:focus {

    outline: none;

    border-color: #55ACEE;

    box-shadow: 0 0 10px #55ACEE;

                box-shadow: 0 0 5px rgba(0, 0, 255, 1);

    -webkit-box-shadow: 0 0 5px rgba(0, 0, 255, 1);

    -moz-box-shadow: 0 0 5px rgba(0, 0, 255, 1);

}

#daftar{

    box-shadow: 0px 1px 0px #FFF;

    height: 30px;

                background: none repeat scroll 0% 0% #55ACEE;

border-color: #FFF;

color: #FFF;

}

#daftar:hover{

background-color: #55ACEE;

background-image: linear-gradient(transparent, rgba(0, 0, 0, 0.15));

border-color: #3B88C3;

}

 

#daftar:focus{

background-color: #3B88C3;

background-image: linear-gradient(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.15));

border-color: #3B88C3;

}

#atas{

border-top-left-radius:10px;

border-top-right-radius:10px;

background:#55ACEE;

width:550px;

height:30px;

color:#FFFFFF;

font-size:20px;

padding-top:10px;

margin-bottom:10px;

text-align:center;

}

#header{

background:#006666;

height:45px;

color:#FFFFFF;

font-size:20px;

margin-bottom:10px;

margin-top:0px;

text-align:center;

}

marquee{

padding-top:5px;

color:#00FF66;

}

#bawah{

border-bottom-left-radius:10px;

border-bottom-right-radius:10px;

background:#55ACEE;

width:550px;

height:30px;

}

.error {color: #FF0000;}

table{

border-top-left-radius:10px;

border-top-right-radius:10px;

border-bottom-left-radius:10px;

border-bottom-right-radius:10px;

}

body{

background: radial-gradient(circle, #94D2F8, #3A92C8) repeat scroll 0% 0% transparent;

}

.style13 {color: #33FFFF;font-size:14px;}

.style15 {color: #FFFFFF}

.valid{color:red;};

</style>

<body onload="btn()" style="margin:0px;">

<div align="center">

<div id="header"></div>

 

<div align="center">

<div id="inner">

<form action="cek.php" method="post" id="signup" name="signup">

 

  <table bgcolor="#339999" width="550">

    <tr>

    <td  colspan="3"><div id="atas">.: TEAM REGRISTRATION :.</div></td>

    </tr>

  <tr>

    <td width="131"><span class="style13">Nama</span></td>

    <td width="14">:</td>

    <td width="397"><label>

      <input placeholder="isikan nama lengkap" onkeyup="names()" size="40" type="text" name="nama" id="nama" />&nbsp;<span id="nv" class="valid">*</span>

    </label></td>

  </tr>

  <tr>

    <td width="131"><span class="style13">Panggilan</span></td>

    <td width="14">:</td>

    <td width="397"><label>

      <input  size="40" type="text" name="panggilan" id="panggilan" />

    </label></td>

  </tr>

  <tr>

    <td><span class="style13">Alamat</span></td>

    <td>:</td>

    <td><label>

      <input placeholder="isikan alamat rumah" onkeyup="alamats()" size="40" type="text" name="alamat" id="alamat" />&nbsp;<span id="av" class="valid">*</span>

    </label></td>

  </tr>

  <tr>

    <td><span class="style13">Email</span></td>

    <td>:</td>

    <td><label>

      <input placeholder="email valid untuk validasi" onkeyup="ve()" size="40" type="email" name="email" id="email" />&nbsp;<span id="ev" class="valid">*</span>

    </label></td>

  </tr>

  <tr>

    <td><span class="style13">No. HP</span></td>

    <td>:</td>

    <td><label>

      <input placeholder="opsional (tidak akan ditampilkan)" size="40" type="text" name="nohp" id="nohp" />

    </label></td>

  </tr>

  <tr>

    <td><span class="style13">Universitas</span></td>

    <td>:</td>

    <td><label>

      <input size="40" type="text" onkeyup="univs()" name="univ" id="univ" />&nbsp;<span id="uv" class="valid">*</span>

    </label></td>

  </tr>

  <tr>

    <td><span class="style13">Jurusan</span></td>

    <td>:</td>

    <td><label>

    <select name="status" id="status">

      <option value="Guru Besar">Guru Besar</option>

      <option value="Dosen">Dosen</option>

      <option value="Mahasiswa">Mahasiswa</option>

      <option value="Pelajar">Pelajar</option>

    </select>

    </label></td>

  </tr>

  <tr>

    <td><span class="style13">Jenis Kelamin</span></td>

    <td>:</td>

    <td><label>

    <select name="kelamin" id="kelamin">

      <option value="Pria">Pria</option>

      <option value="Wanita">Wanita</option>

    </select>

    </label></td>

  </tr>

  <tr>

    <td><span class="style13">Password</span></td>

    <td>:</td>

    <td><label>

      <input placeholder="minimal 4 karakter (A-Z, a-z, 0-9)" size="40" type="password" name="password" onkeyup="pass1()" id="password" />&nbsp;<span id="pv" class="valid">*</span><div id=’hasil’></div>

    </label></td>

  </tr>

  <tr>

    <td><span class="style13">Ulangi Password</span></td>

    <td>:</td>

    <td><label>

      <input onkeyup="pass2()" placeholder="ketik ulang password" size="40" type="password" name="upassword" id="upassword" />&nbsp;<span id="pv1" class="valid">*</span>

    </label></td>

  </tr>

      <tr>

    <td  colspan="3">&nbsp;</td>

    </tr>

    <tr>

    <td>&nbsp;</td>

    <td>&nbsp;</td>

    <td>

       </td>

  </tr>

    <tr>

    <td  colspan="3"></td>

    </tr>

                    <tr>

    <td  colspan="3"><span style="color:red;font-size:12px"><i>* Kolom wajib diisi</i></span></td>

    </tr>

    <tr>

    <td align="right" colspan="3"><div id="bawah"><marquee style="width:435px">

      <span class="style15">Selamat bergabung dengan tim pengembang www.geodik.com | Growing With Loving Environment</span>

    </marquee><input  type="submit" name="daftar" id="daftar" value="Daftar" /> </div></td>

    </tr>

</table>

</form>

</div>

</div>

</div>

 

2.         File Cek.php

<?php

$con=mysql_connect("localhost","root","");

mysql_select_db("wave",$con);

$nama=$_POST['nama'];

$panggilan=$_POST['panggilan'];

$alamat=$_POST['alamat'];

$email=addslashes($_POST['email']);

$nohp=$_POST['nohp'];

$univ=$_POST['univ'];

$status=$_POST['status'];

$kelamin=$_POST['kelamin'];

$password=$_POST['password'];

$e_password=md5($password);

mysql_query("INSERT INTO user(nama,panggilan,alamat,email,nohp,univ,status,kelamin,password) values('$nama','$panggilan','$alamat','$email','$nohp','$univ','$status','$kelamin','$e_password')");

header('location:login.php');

Read More..

PHP | Membuat Login Page

Leave a Comment

1. file koneksi.php

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

2. file login.php

<?php require_once('koneksi.php'); ?>
<?php
if (!function_exists("GetSQLValueString")) {
function GetSQLValueString($theValue, $theType, $theDefinedValue = "", $theNotDefinedValue = "")
{
  $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;
}
}

mysql_select_db($database_koneksi, $koneksi);
$query_Con = "SELECT * FROM `user`";
$Con = mysql_query($query_Con, $koneksi) or die(mysql_error());
$row_Con = mysql_fetch_assoc($Con);
$totalRows_Con = mysql_num_rows($Con);
?><?php
// *** Validate request to login to this site.
if (!isset($_SESSION)) {
  session_start();
}

$loginFormAction = $_SERVER['PHP_SELF'];
if (isset($_GET['accesscheck'])) {
  $_SESSION['PrevUrl'] = $_GET['accesscheck'];
}

if (isset($_POST['email'])) {
  $loginUsername=$_POST['email'];
  $password=$_POST['password'];
  $MM_fldUserAuthorization = "";
  $MM_redirectLoginSuccess = "sukses.php";
  $MM_redirectLoginFailed = "login.php";
  $MM_redirecttoReferrer = true;
  mysql_select_db($database_koneksi, $koneksi);
 
  $LoginRS__query=sprintf("SELECT email, password FROM `user` WHERE email=%s AND password=%s",
    GetSQLValueString($loginUsername, "text"), GetSQLValueString($password, "text"));
  
  $LoginRS = mysql_query($LoginRS__query, $koneksi) or die(mysql_error());
  $loginFoundUser = mysql_num_rows($LoginRS);
  if ($loginFoundUser) {
     $loginStrGroup = "";
   
    //declare two session variables and assign them
    $_SESSION['MM_Username'] = $loginUsername;
    $_SESSION['MM_UserGroup'] = $loginStrGroup;         

    if (isset($_SESSION['PrevUrl']) && true) {
      $MM_redirectLoginSuccess = $_SESSION['PrevUrl'];   
    }
    header("Location: " . $MM_redirectLoginSuccess );
  }
  else {
    header("Location: ". $MM_redirectLoginFailed );
  }
}
?>
<!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=utf-8" />
<title>Geodik | Team Registration</title>
</head>
<style>
input{
    border: 2px solid #55ACEE;
    border-radius: 7px;
    transition: all 0.25s ease-in-out;
    -webkit-transition: all 0.25s ease-in-out;
    -moz-transition: all 0.25s ease-in-out;transition: all 0.25s ease-in-out;
    -webkit-transition: all 0.25s ease-in-out;
    -moz-transition: all 0.25s ease-in-out;
}
input:focus {
    outline: none;
    border-color: #55ACEE;
    box-shadow: 0 0 10px #55ACEE;
    box-shadow: 0 0 5px rgba(0, 0, 255, 1);
    -webkit-box-shadow: 0 0 5px rgba(0, 0, 255, 1);
    -moz-box-shadow: 0 0 5px rgba(0, 0, 255, 1);
}
#login{
    box-shadow: 0px 1px 0px #FFF;
    height: 30px;
    background: none repeat scroll 0% 0% #55ACEE;
border-color: #FFF;
color: #FFF;
}
#login:hover{
background-color: #55ACEE;
background-image: linear-gradient(transparent, rgba(0, 0, 0, 0.15));
border-color: #3B88C3;
}

#login:focus{
background-color: #3B88C3;
background-image: linear-gradient(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.15));
border-color: #3B88C3;
}
#atas{
border-top-left-radius:10px;
border-top-right-radius:10px;
background:#55ACEE;
width:400px;
height:30px;
color:#FFFFFF;
font-size:20px;
padding-top:10px;
margin-bottom:10px;
text-align:center;
}
#header{
background:#006666;
height:45px;
color:#FFFFFF;
font-size:20px;
margin-bottom:10px;
margin-top:0px;
text-align:center;
}
marquee{
padding-top:5px;
color:#00FF66;
}
#bawah{
border-bottom-left-radius:10px;
border-bottom-right-radius:10px;
background:#55ACEE;
width:400px;
height:30px;
}
table{
border-top-left-radius:10px;
border-top-right-radius:10px;
border-bottom-left-radius:10px;
border-bottom-right-radius:10px;
}
body{
background: radial-gradient(circle, #94D2F8, #3A92C8) repeat scroll 0% 0% transparent;
}
.style13 {color: #33FFFF;font-size:14px;}
.style15 {color: #FFFFFF}
</style>
<body style="margin:0px;">

<div align="center">
<div id="header"></div>

<div align="center">
<div id="inner">
<form action="<?php echo $loginFormAction; ?>" method="POST" name="login">

  <table bgcolor="#339999" width="400">
    <tr>
    <td  colspan="3"><div id="atas">TEAM REGRISTRATION</div></td>
    </tr>
  <tr>
    <td width="122"><span class="style13">Email</span></td>
    <td width="8">:</td>
    <td width="254"><label>
      <input size="40" type="email" name="email" id="email" />
    </label></td>
  </tr>
  <tr>
    <td width="122"><span class="style13">Password</span></td>
    <td width="8">:</td>
    <td width="254"><label>
      <input  size="40" type="password" name="password" id="password" />
    </label></td>
  </tr>
      <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td align="right">
    <input type="submit" name="login" id="login" value="Login" />    </td>
  </tr>
    <tr>
    <td  colspan="3"></td>
    </tr>
        <tr>
    <td  colspan="3"></td>
    </tr>
    <tr>
    <td colspan="3"><div id="bawah"><marquee>
      <span class="style15">Selamat bergabung dengan tim pengembang www.geodik.com | Growing With Loving Environment</span>
    </marquee></div></td>
    </tr>
</table>
</form>
</div>
</div>
</div>
</body>
</html>
<?php
mysql_free_result($Con);
?>

3. file sukses.php

<?php $user=$_SESSION['MM_Username']; echo"<div style='float:right;display:inline'>Anda sudah login

sebagai $user </div>";?>
<a href="logout.php">logout</a>

4. logout.php

<?php
// *** Logout the current user.
$logoutGoTo = "login.php";
if (!isset($_SESSION)) {
  session_start();
}
$_SESSION['MM_Username'] = NULL;
$_SESSION['MM_UserGroup'] = NULL;
unset($_SESSION['MM_Username']);
unset($_SESSION['MM_UserGroup']);
if ($logoutGoTo != "") {header("Location: $logoutGoTo");
exit;
}
?>

Read More..