Membuat PopUp dengan CSS3 Murni

Dalam pembuatan suatu web aplikasi kita sering sekali menggunakan popup / modal dalam menyampaikan informasi misalnya menampilkan informasi keberhasilan dalam menginput data, pengisian form untuk guest book, menampilkan informasi about me atau bisa juga digunakan dalam pencarian data.
Pada artikel ini akan di bahas mengenai pembuatan popup dengan CSS3 murni tanpa menggunakan script seperti javascript. Akan tetapi popup ini hanya akan berjalan pada browser-browser yang terbaru yang sudah support dengan CSS3 sehingga untuk browser yang lama atau jadul script ini tidak akan berfungsi. Untuk lebih jelasnya anda bisa mengikuti contoh berikut :

Pertama buat script HTML seperti berikut

<div id="closed"></div>
<a href="#popup" class="popup-link">Klik untuk memunculkan Popup</a>
<div class="popup-wrapper" id="popup">
<div class="popup-container">
<h2>Isi dari popup</h2>
<p>Ini adalah isi dari popup menggunakan CSS3 murni tanpa jquery atau javascript.</p>
<a class="popup-close" href="#closed">X</a>
</div>
</div>

Kemudian buat style CSS3

a.popup-link {
padding:17px 0;
text-align: center;
margin:7% auto;
position: relative;
width: 300px;
color: #fff;
text-decoration: none;
background-color: #FFBA00;
border-radius: 3px;
box-shadow: 0 5px 0px 0px #eea900;
display: block;
}
a.popup-link:hover {
background-color: #ff9900;
box-shadow: 0 3px 0px 0px #eea900;
-webkit-transition:all 1s;
-moz-transition:all 1s;
transition:all 1s;
}
/* end link popup*//*style untuk popup */
#popup {
visibility: hidden;
opacity: 0;
margin-top: -200px;
}
#popup:target {
visibility:visible;
opacity: 1;
background-color: rgba(255,255,255,0.7);
position: fixed;
top:0;
left:0;
right:0;
bottom:0;
margin:0;
z-index: 99999999999;
-webkit-transition:all 1s;
-moz-transition:all 1s;
transition:all 1s;
}@media (min-width: 768px){
.popup-container {
width:600px;
}
}
@media (max-width: 767px){
.popup-container {
width:100%;
}
}
.popup-container {
position: relative;
margin:7% auto;
padding:30px 50px;
background-color: #333;
color:#fff;
border-radius: 3px;
}a.popup-close {
position: absolute;
top:3px;
right:3px;
background-color: #fff;
padding:7px 10px;
font-size: 20px;
text-decoration: none;
line-height: 1;
color:#333;
}/* style untuk isi popup */.popup-form {
margin:10px auto;
}
.popup-form h2 {
margin-bottom: 5px;
font-size: 37px;
text-transform: uppercase;
}
.popup-form .input-group {
margin:10px auto;
}
.popup-form .input-group input {
padding:17px;
text-align: center;
margin-bottom: 10px;
border-radius:3px;
font-size: 16px;
display: block;
width: 100%;
}
.popup-form .input-group input:focus {
outline-color:#FB8833;
}
.popup-form .input-group input[type="email"] {
border:0px;
position: relative;
}
.popup-form .input-group input[type="submit"] {
background-color: #FB8833;
color: #fff;
border: 0;
cursor: pointer;
}
.popup-form .input-group input[type="submit"]:focus {
box-shadow: inset 0 3px 7px 3px #ea7722;
}

Setelah HTML dan CSS nya dibuat jalankan di browser dan lihat hasilnya. Untuk contoh diatas bisa dilihat di link Berikut

Selamat mencoba dan semoga bermanfaat.

Baca Selengkapnya »

Membuat Validasi Form Dengan JQuery (2)

Pada artikel sebelumnya pernah di bahas bagaimana menerapkan validasi form menggunakan JQuery tetapi hanya dibahas beberapa aturan / rule seperti penulisan email, text harus diisi dan inputan hanya boleh angka. Pada artikel ini akan dibahas lebih banyak aturan / rule validasi nya seperti berikut, 

1. Inputan KTP hanya boleh diisi 16 digit angka (tidak boleh diisi huruf) 
2. Inputan TANGGAL LAHIR diisi dengan format DD/MM/YYYY 
3. Inputan UMUR diisi dengan angka antara 0-100
4. Inputan PASSWORD dan ULANGI PASSWORD harus sama.

Sebelum menerapkan aturan / rule validasi buatlah terlebih dahulu sintak form HTML sebagai berikut,


<form id="form" method="post" action="proses.php">
<label for="ktp">No. KTP</label>         
<input type="text" name="ktp" id="ktp" maxlength="10" size="15"/> 
<label for="umur">umur</label>
<input type="text" name="umur" id="umur" maxlength="3" size="7"/>
<label for="tgl">Tanggal Lahir</label>
<input type="text" name="tgl" id="tgl" maxlength="10" size="15"/>
<label for="pass1">Password</label>
<input type="password" name="pass1" id="pass1" size="15"/> 
<label for="pass2">Ulangi Password</label>
<input type="password" name="pass2" id="pass2" size="15"/> 
<input class="submit" type="submit" value="Daftar"/>
</form>

Seperti artikel sebelumnya, untuk menerapkan aturan / rules validasi yang telah kita tentukan, panggil fungsi validate() saat halaman pertama kali dimunculkan. Di dalam fungsi validate() kita dapat membuat aturan-aturan di atas. Sebagai langkah awal, tambahkan potongan script berikut ini di antara tag <head>

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

Pada sintak diatas, $(document).ready(function() menerangkan bahwa perintah didalamnya dijalankan ketika halaman pertama kali muncul. $("#form") merupakan id dari form yang akan di pasang aturan validasi. Selanjutnya kita akan menerapkan aturan validasi diatas.

1. Inputan KTP hanya boleh diisi 16 digit angka (tidak boleh diisi huruf)
Untuk aturan yang ini, dapat dirinci menjadi 3 rule yaitu tidak boleh huruf (digits), panjang minimal isian adalah 16 digit dan panjang maksimal juga 16digit. Kita dapat menambahkan rule pada pemanggilan fungsi validate() sehingga berubah menjadi sebagai berikut: 

$('#form').validate({
    rules: {
        ktp: {
            digits: true, minlength:10, maxlength:10 
        } 
    } 
});

2. Inputan TANGGAL LAHIR diisi dengan format DD/MM/YYYY
Untuk aturan ini, kita akan membuat format yang harus diisikan pada inputan tanggal. Jika format yang diinginkan adalah MM/DD/YYYY atau YYYY-MM-DD, Kkta dapat menggunakan rule bawaan JQuery yaitu menambahkan sintak date:true. Namun dalam rule diatas, diinginkan format tanggalnya adalah DD/MM/YYYY sehingga kita perlu membuat fungsi validator sendiri.

Perhatikan fungsi indonesianDate() beserta penerapannya berikut ini:

$(document).ready(function() {
    $('#form').validate({
            rules: {
                tgl: {
                    indonesianDate:true
                }
            }
    });
});

$.validator.addMethod("indonesianDate",
    function(value, element) {
        return value.match(/^\d\d?\/\d\d?\/\d\d\d\d$/);
    }, 
    "Isikan tanggal dengan format DD/MM/YYYY"
);

3. Inputan UMUR diisi dengan angka antara 0-100
Pada aturan ini kita dapat menggunakan fungsi bawaan yaitu range serta batasan inputan berupa angka (digits). 

$(document).ready(function() {
    $('#form').validate({
            rules: {
                umur: {
                    digits: true,
                    range: [0, 100]
                }
            }
    });
});

4. Inputan PASSWORD dan ULANGI PASSWORD harus sama 
Pada aturan ini bahwa ulangi password harus sama dengan password, untuk itu kita bisa menggunakan fungsi bawaan equalsTo.

$(document).ready(function() {
    $('#form').validate({
            rules: {
                pass2: {
                    qualTo: "#pass1"
                }
            }
    });
});

Berikut sintak keseluruhan aturan 1 - 4

$(document).ready(function() {
    $('#form').validate({
            rules: {
                nim : {
                    digits: true,
                    minlength:10,
                    maxlength:10
                },
                tgl: {
                    indonesianDate:true
                },
                umur: {
                    digits: true,
                    range: [0, 100]
                },
                pass2: {
                    equalTo: "#pass1"
                }
            }
    });
});

$.validator.addMethod(
    "indonesianDate",
    function(value, element) {
        return value.match(/^\d\d?\/\d\d?\/\d\d\d\d$/);
    },
    "Isikan tanggal dengan format DD/MM/YYYY"
);

Baca Selengkapnya »

Membuat Validasi Form Dengan JQuery

Validasi form pada web aplikasi merupakan hal yang wajid dilakukan untuk melakukan pengecekan data yang diinputkan oleh user. Jika data yang diinputkan user tersebut sudah sesuai maka akan diproses untuk disimpan di database sedangkan jika terjadi kesalahan penginputan maka data tersebut tidak akan disimpan dan dikembalikan ke user dengan muncul peringatan atau pesan yang menyatakan data tersebut tidak valid.
Ada banyak cara memvalidasi form berbasis web, namun cara yang paling simple dan menarik menurut penulis adalah menggunakan jQuery, lebih tepatnya menggunakan jquey Plugin bernama JQuery validate.
Untuk penggunaan jquery validate ikuti langkah berikut :
1. Download Jquery.js dan jquery.validate.js
2. Include-kan file js tersebut ke dalam tag <head> di HTML seperti berikut

<head>

<title>Sample Validasi</title>

<script type="text/javascript" src="jquery-1.10.2.js"></script>

<script type="text/javascript" src="jquery.validate.js"></script>

</head>

3. Tuliskan script untuk menjalankan validasi di form

<script type="text/javascript">

$(document).ready(function() {

    $("#form").validate(); //id form

});

</script>

4. Buat sintak HTML nya

<form id="form" method="post" action="proses.php"> 

<label for="nama">Name</label>           

<input id="nama" name="nama" size="25" class="required" minlength="2" />

<label for="umur">umur</label> 

<input id="umur" name="umur" size="25" class="required number" /> 

<label for="email">E-Mail</label> 

<input id="email" name="email" size="25"  class="required email" /> 

<input class="submit" type="submit" value="Daftar"/> 

</form>

Untuk menempelkan validasi di tiap inputan atau tag <input>, kita harus menambahkan nama class seperti di sintak di atas. Berikut penjelasan nama class untuk validasi,
required, inputan tersebut wajib diisi.
number, yang diinputkan harus angka tidak boleh huruf.
email, yang diinputkan harus berformat email misalnya : nama@mail.com


Berikut sintak keseluruhan untuk menjalankan validasi di form inputan

<html>
<head>

<title>Sample Validasi</title>

<script type="text/javascript" src="jquery-1.10.2.js"></script>

<script type="text/javascript" src="jquery.validate.js"></script>

<script type="text/javascript">

$(document).ready(function() {

    $("#form").validate(); //id form

});

</script>

</head>
<body>

<form id="form"> 

<label for="nama">Name</label>           

<input id="nama" name="nama" size="25" class="required" minlength="2" />

<label for="umur">umur</label> 

<input id="umur" name="umur" size="25" class="required number" /> 

<label for="email">E-Mail</label> 

<input id="email" name="email" size="25"  class="required email" /> 

<input class="submit" type="submit" value="Daftar"/> 

</form>
</body>
</html>

Untuk lebih memahami bisa dilihat di link Berikut.

Semoga bermanfaat..

Baca Selengkapnya »

Menampilkan Pilihan Bulan dan Tahun (Dropdown) Dan Menentukan Range Tahun Pada JQuery UI Datepicker

Pada artikel sebelumnya sudah dibahas mengenai penggunaan datepicker dalam membantu pembuatan aplikasi web terutama dalam penulisan tanggal. Pada artikel ini akan dibahas bagaimana cara memilih tahun dan bulan dengan lebih mudah seperti pada saat kita akan memilih bulan dan tahun pada tanggal lahir diperlukan dropdown / pilihan untuk memudahkan dalam memilih bulan dan tahun lahir kita.
Berikut adalah sintak untuk pemanggilan datepicker biasa,
$(function() {
      $("#datepicker").datepicker();
});  

Pada syntak javascript pemanggilan datepicker diatas untuk membuat tambahan dropdown pada bulan dan tahun, kita hanya cukup menambahkan changeYear dan changeMonth di dalam datepicker tersebut seperti berikut,
$(function() {
      $("#datepicker").datepicker({
           changeMonth : true,
           changeYear : true
      });
});


Sehingga tampilan dari jQuery datepicker tersebut menjadi seperti ini

Pada gambar diatas terlihat pada bagian atas terdapat pilihan / dropdown untuk bulan dan tahun.
Untuk pilihan tahun kita juga bisa membatasi berapa tahun kedepan dan berapa tahun kebelakang yang perlu di tampilkan di dropdown tersebut, dengan cara menambahkan sintak yearRange seperti berikut,
$(function() {
      $("#datepicker").datepicker({
           changeMonth : true,
           changeYear : true,
           yearRange : -50:+50
      });
});

Pada yearRange terdapat nilai -50:+50 menandakan bahwa -50 adalah 50 tahun kebelakang dari tahun sekarang sedangkan +50 adalah 50 tahun kedepan dari tahun sekarang. Misalnya sekarang tahun 2015, yang akan tampil di dropdown dari tahun 1965(2015-50) s/d 2065 (2015+50).

Semoga bermanfaat.

Baca Selengkapnya »

Membuat Input Tanggal Pada Textbox Menggunakan JQuery UI Datepicker

Dalam membuat sebuah aplikasi terkadang kita membuat inputan untuk tanggal misalnya tanggal lahir atau tanggal invoice, dan pada proses penginputan data tanggal tersebut kita sering mengalami kesalahan terutama dalam penulisan format tanggal, oleh karena itu diperlukannya bantuan atau fasilitas untuk memudahkan user / pengguna dalam memasukan tanggal. Pada artikel ini akan di jelaskan bagaiman membuat fasilitas tersebut dengan menggunakan JQuery Datepicker.
JQuery Datepicker adalah salah satu jquery yang sering digunakan dalam memilih tanggal, bulan, dan tahun. jQuery Datepicker cukup populer dikalangan web designer karena jQuery Datepicker memberikan kemudahan bagi pengguna website.

Berikut langkah penggunaan JQuery Datepicker,
1. Download JQuery UI di link Berikut, kemudain lakukan ekstrak file yang di download tersebut.

2. Buat folder js untuk menyimpan file jquery-1.10.2.js dan  jquery-ui.js. Folder themes untuk menyimpan file style jquery-ui.css.

3. Include-kan file css dan js yang ada dalam folder ter-ekstrak tadi ke dalam tag <head> seperti berikut

<head>
<title>Sample Datepicker</title>
<link rel="stylesheet" href="themes/smoothness/jquery-ui.css">
<script src="js/jquery-1.10.2.js"></script>
<script src="ui/jquery-ui.js"></script>
</head>

4. Tuliskan script untuk memanggil datepicker,

<script type="text/javascript">
$(function() {
      $("#datepicker").datepicker();
});
</script>

5. Buat tag HTML nya,

<p><input type="text" id="datepicker"></p>

6. Berikut hasil dari script datepicker diatas














Script keseluruhan untuk memanggil datepicker

<html>
<head>
<title>Sample Datepicker</title>
<link rel="stylesheet" href="themes/smoothness/jquery-ui.css">
<script src="js/jquery-1.10.2.js"></script>
<script src="ui/jquery-ui.js"></script>
<script type="text/javascript">
$(function() {
  $("#datepicker").datepicker();
});
</script>
</head>
<body>
<p><input type="text" id="datepicker"></p>
</body>
</html> 

Selamat mencoba dan semoga bermanfaat.

Baca Selengkapnya »