Kali ini saya akan Membahas mengenai bahaimana cara Membuat form agar dilihat lebih menarik menggunakan Css

Pertama cobalah buat html dengan nama form.html, kemudian ketik kode html untuk form nya seperti ini:

 
<html>
<head>
<title>Form Pelanggan</title>
</head>
<div id="wrapper">
<form>
<fieldset>
    <legend>Form pelanggan</legend>
  <table cellpadding="0" >
 <tr>
 <td width="122" >Nama</td>
   <td width="26" align="center" valign="top">:</td>

  <td width="353" ><input name=nama type=text value=""   required>
 </td>
</tr>
<tr>
 <td >Alamat</td>
 <td align="center" valign="top">:</td>
<td ><input name="alamat" type=text  value=""  /></td>
</tr>
 <tr>
 <td >Kota</td>
 <td align="center" valign="top">:</td>
 <td ><input name="kota" type=text  value=""  /></td>
</tr>
 <tr>
 <td >Agama</td>
 <td align="center" valign="top">:</td>
<td >
<select name="agama" >
<option value=0 selected>ISLAM</option>
<option value=1 selected>KRISTEN</option>
 <option value=2 selected>HINDU</option>
<option value=3 selected>BUDHA</option>
 </select>
 </td>
 </tr>
<tr>
 <td >Telepon</td>
 <td align="center" valign="top">:</td>
<td ><input name=notelp type=text  value="" size=20 ></td>
</tr>
 <tr>
   <td valign="top" >Keterangan</td>
    <td align="center" valign="top">:</td>
    <td ><textarea name=ket cols="45" rows="5"  id="textarea"></textarea>
      </td>
  </tr>
  <tr>
    <td valign="top" >&nbsp;</td>
    <td>&nbsp;</td>
    <td >
      <input type=submit value="Simpan" ></td>
    </tr>
</table>
</fieldset>
</form>
</div>
</body>
</html>

Hasilnya nanti akan terlihat seperti ini :

Setelah itu tambahkan kode Css sebelum koding </head> sepetri ini:

<style type="text/css">
<!--
.judul {font-size: large;font-weight: bold;}
-->
 #wrapper {
        width:60%;
        margin:0 ;
        font-family:Arial, Helvetica, sans-serif;
    }
    legend {
        color:#ed1fdf;
        font-size:16px;
        padding:0 8px;
        background:#fff;
        -moz-border-radius:4px;
        box-shadow: 0 1px 5px rgba(4, 129, 177, 0.5);
        padding:10px 8px;
        text-transform:uppercase;
        font-family:Helvetica, sans-serif;
        font-weight:bold;
    }
    fieldset {
 border-radius:1px;
 background: #fff;
 background: -moz-linear-gradient(#fff, #ed1fdf);
 background: -o-linear-gradient(#fff, #ed1fdf);
 background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), to(#e668ed));
/
        background: -webkit-linear-gradient(#fff, #ed1fdf);
 padding:20px;
 border-color:rgba(4, 129, 177, 0.4);
 font-size: 12px;
    }
    input,
    textarea {
        color: #373737;
        background: #fff;
        border: 1px solid #CCCCCC;
        color: #aaa;
        font-size: 14px;
        line-height: 1.2em;
        margin-bottom:1px;
        -moz-border-radius:1px;
        -webkit-border-radius:1px;
        border-radius:1px;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) inset, 0 1px 0 rgba(255, 255, 255, 0.2);
    }
    input[type="text"]{
        padding: 1px 1px;
       height: 25px;
        width:280px;
    }
    input[type="text"]:focus,
    input[type="password"]:focus {
        background:#ffc7f7;
        text-indent: 0;
        z-index: 1;
        color: #373737;
        -webkit-transition-duration: 400ms;
        -webkit-transition-property: width, background;
        -webkit-transition-timing-function: ease;
        -moz-transition-duration: 400ms;
        -moz-transition-property: width, background;
        -moz-transition-timing-function: ease;
        -o-transition-duration: 400ms;
        -o-transition-property: width, background;
        -o-transition-timing-function: ease;
        width: 310px;
        border-color:#ccc;
        box-shadow:0 0 5px rgba(4, 129, 177, 0.5);
        opacity:0.6;
    }
    input[type="submit"], input[type="reset"] {
        background: #3498db;
    background-image: -webkit-linear-gradient(top, #3498db, #2980b9);
   background-image: -moz-linear-gradient(top, #3498db, #2980b9);
    background-image: -ms-linear-gradient(top, #3498db, #2980b9);
    background-image: -o-linear-gradient(top, #3498db, #2980b9);
    background-image: linear-gradient(to bottom, #3498db, #2980b9);
    -webkit-border-radius: 7;
    -moz-border-radius: 7;
    border-radius: 7px;
    font-family: Arial;
    color: #ffffff;
    font-size: 15px;
    padding: 5px 14px 5px 12px;
    text-decoration: none;
    }
    textarea {
        padding:1px;
        width:96%;
        height:100px;
    }
    textarea:focus {
        background:#ffc7f7;
        text-indent: 0;
        z-index: 1;
        color: #373737;
        opacity:0.6;
        box-shadow:0 0 5px rgba(4, 129, 177, 0.5);
        border-color:#ccc;
    }
    .small {
        line-height:14px;
        font-size:12px;
        color:#999898;
        margin-bottom:3px;
        }
select:focus{  background:#ffc7f7;
        color: #373737;
        box-shadow:0 0 5px rgba(4, 129, 177, 0.5);
        border-color:#ccc;
 }
</style>

Hasil dari form yang kita buat tadi akan terlihat seperti ini:

Pertama buat file dengan nama Tanggal.html
Ketikkan kode di bawah ini:

Tanggal : <input name="tanggal" type="text" id="tanggal"  size="20" maxlength="10"  />

Untuk ukuran kolom bisa di atur di code Size:" "
 Kemudian isikan jquery diatas code </head> seperti dibawah ini:

<link href="jquery-ui-1.10.3.custom.css" rel="stylesheet">

<script src="jquery-1.9.1.js"></script>
<script src="jquery-ui-1.10.3.custom.js"></script>

<script type="text/javascript">

$(document).ready(function(){

$("#tanggal").datepicker({
      showOn: "both", buttonImage: "calendar.png", buttonImageOnly: true, changeMonth: true, changeYear: true, dateFormat: "mm-dd-yy"});


})

</script>

Jika ingin menghilangkan scroll pilihan bulan/ tahun tinggal mengganti "changeMonth: true" menjadi "changeMonth: false" jika ingin mengganti format tanggal , tinggal mengganti (dateFormat: "mm-dd-yy") menjadi (dateFormat: "dd-mm-yy")
Untuk file css dan Js nya anda bisa download disini
jquery-ui-1.10.3.custom.css
jquery-1.9.1.js
jquery-ui-1.10.3.custom.js
jadikan 1 folder dengan tanggal.html, coba jalankan ^_^
Hasilnya nanti akan seperti ini :

jika anda malas ketik bisa di download disini

Jquery versi berbeda dalam satu php

Postingan kali ini adalah pengalaman pribadi saya dimana waktu itu saya mengunakan 2 jquery versi yang berbeda untuk satu file php, saya mencari beberapa reverensi di google, akhirnya setelah 1 minggu mencari hahahahaha saya menemukan solusi untuk itu, langsung saja saya akan memberikan coding nya di artikel ini yaitu menggunakan var disalah satu fuction sebagai contoh seperti ini:

<script type="text/javascript">
         $(document).ready(function() {
            $("#formulir").validationEngine();    
         });
      </script>

Untuk $ diganti menjadi seperti ini:

 <script type="text/javascript">
 var $jnoc = jQuery.noConflict();
         $jnoc(document).ready(function() {
            $jnoc("#formulir").validationEngine();      
         });
      </script> 

Keterangan:
 jQuery.noConflict();  (dibuat agar jquery dengan versi berbeda tidak terjadi konflik atau kres)
var $jnoc                     ( nama variable untuk pengganti $ untuk $jnoc bisa diganti nama sesuai dengan keinginan anda misal seperti $ganti  )

untuk script jquery yang satu tidak usah menggunakan jQuery.noConflict()

Kali ini saya akan share mebuat form login dengan css, agar lebih menarik

Pertama buat dulu form login dengan nama login.html, kodenya seperti ini:

<form method="post" action="hasillogin.php">
  <fieldset class="account-info">
    <label>
      Username
      <input type="text" name="id_user" >
    </label>
    <label>
      Password
      <input type="password" name="password">
    </label>
  </fieldset>
  <fieldset class="account-action">
    <input class="btn" type="submit" name="submit" value="Login">
    <label>
      <input type="checkbox" name="remember"> Stay signed in
    </label>
  </fieldset>
</form>

Hasilnya nanti akan terlihat seperti di bawah ini:

Setelah itu buat code untuk css nya

<style>
*,
*:before,
*:after {
   box-sizing: border-box;
}
form {
  border: 1px solid #c6c7cc;
  border-radius: 5px;
  font: 14px/1.4 "Helvetica Neue", Helvetica, Arial, sans-serif;
  overflow: hidden;
  width: 202px;
}
fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}
input {
  border-radius: 5px;
  font: 14px/1.4 "Helvetica Neue", Helvetica, Arial, sans-serif;
  margin: 0;
}
.account-info {
  padding: 10px 10px 0 10px;
}
.account-info label {
  color: #395870;
  display: block;
  font-weight: bold;
  margin-bottom: 20px;
}
.account-info input {
  background: #fff;
  border: 1px solid #c6c7cc;
   box-shadow: inset 0 1px 1px rgba(0, 0, 0, .1);
  color: #636466;
  padding: 3px;
  margin-top: 3px;
  width: 100%;
}
.account-action {
  background: #f0f0f2;
  border-top: 1px solid #c6c7cc;
  padding: 10px;
}
.account-action .btn {
  background: linear-gradient(#49708f, #293f50);
  border: 0;
  color: #fff;
  cursor: pointer;
  font-weight: bold;
  float: left;
  padding: 5px 10px;
}
.account-action label {
  color: #7c7c80;
  font-size: 12px;
  float: left;
  margin: 5px 0 0 5px;
}

</style>

Taruh code css di atas sebelum code </head>

Hasilnya akan jadi seperti ini :

Untuk warnanya anda bisa mengganti di coding style nya sesuai selera ^_^

Setelah itu  buatlah database dengan table login field ya user dan pass, isikan field user dan pass untuk percobaan login

Kemudian buatlah php untuk koneksi ke data base simpan dengan nama konek.php:

<?php
$host = "localhost";
$user = "root";
$pass = "";
$db ="blogku";
$koneksi = mysql_connect($host, $user, $pass);
if (!$koneksi) {
echo "Koneksi ke server tidak berhasil";
};
$database = mysql_select_db($db);
if (!$database) {

}
mysql_select_db($db) or die ("Database not Found !");

?>

Simpan dengan nama konek.php
Setelah itu untuk proses loginnya buatlah php lagi dengan nama hasillogin.php ketikkan coding dibawah ini:

<?php session_start();
include("konek.php");
$user = $_POST['id_user'];
$user = str_replace("'","&acute;",$user);
$psw=$_POST['password'];
$psw= str_replace("'","&acute;",$psw);
$cek = "Select * from login where user='".$user."' and pass='".($psw)."'";
$hasil = mysql_query($cek);
$hasil_cek = mysql_num_rows($hasil);
if ($hasil_cek==0){
header("location:login.html");
echo "Username dan Password yang Anda isi salah...!!!";
}else{
$_SESSION['userlogin'] =$user;
header("location:hasil.php");
}
?>

Untuk hasil login setelah berhasil  buatlah html/ php nya untuk contoh saya buat file hasil.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>Untitled Document</title>
</head>

<body>
Login Berhasil ^_^
</body>
</html>

Anda bisa download file ya disini