JQuery Lanjutan

PART 1 Membuat modal dialog dengan JQuery (Tanpa Plugin)

By Diki Alfarabi Hadi
7 February 2016
JQuery

Membuat modal dialog dengan JQuery – halo apa kabar.. pada kesempatan kali ini saya akan membagikan tutorial untuk membuat modal dialog dengan JQuery. dan tanpa menggunakan plugin yang banyak tersedia untuk membuat modal dialog. tapi kali ini kita akan membuat modal dialog sederhana tanpa menggunakan plugin tersebut dengan tujuan untuk memahami cara kerja dalam membuat modal dialog. pada tutorial-tutorial sebelumnya kita saya telah membahas tentang tutorial-tutorial jquery dasar. teman-teman bisa melihatnya DI SINI untuk tutorial dasar jquery yang telah saya buatkan.

Tutorial JQuery lainnya :

Membuat modal dialog dengan JQuery (Tanpa Plugin)

Cara membuat modal dialog dengan jquery yang pertama kali harus di pahami adalah tentang event dan effect jQuery.

Pertama teman-teman siapkan dulu library jQuery nya. download di situs resmi nya aja biar jelas. klik di sini. setelah selesai mendownload library jquery nya selanjutnya kita buatkan file html dan css nya.

index.html

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

<!DOCTYPE html>

<html>

<head> 

 <title>Membuat modal dialog dengan JQuery | MalasNgoding.com</title>

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

 <link rel="stylesheet" type="text/css" href="style.css">

</head>

<body> 

 <center><h1>Membuat modal dialog dengan JQuery | MalasNgoding.com</h1></center>

 <button id="tombol">KLIK SAYA !!</button> 

 KLIK TOMBOL UNTUK MENAMPILKAN MODAL DIALOG

 <div id="bg"></div>

 <div id="modal-kotak">

  <div id="atas">

   Halo . ini adalah modal dialog | MalasNgoding.com

  </div>

  <div id="bawah">

   <button id="tombol-tutup">CLOSE</button>

  </div>

 </div> 

 <script type="text/javascript">

  $(document).ready(function(){

   $('#tombol').click(function(){

    $('#modal-kotak , #bg').fadeIn("slow");

   });

   $('#tombol-tutup').click(function(){

    $('#modal-kotak , #bg').fadeOut("slow");

   });

  });

 </script>

</body>

</html>

style.css

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

body{

 background: #ecf0f1;

 font-family: sans-serif;

 font-size: 11pt;

}

#modal-kotak{

 margin:5% 30% 30% 30%;

 width: 500px; 

 height: 200px;

 position: absolute;

 position:fixed;

 z-index:1002;

 display: none;

 background: white; 

}

#atas{

 font-size: 15pt;

 padding: 20px; 

 height: 80%;

}

#bawah{

 background: #fff;

}

#tombol-tutup{ 

 background: #e74c3c;

}

#tombol-tutup,#tombol{

 height: 30px;

 width: 100px;

 color: #fff;

 border: 0px;

}

#bg{

 opacity:.80;

 position: absolute;

 display: none;

 position: fixed;

 top: 0%;

 left: 0%;

 width: 100%;

 height: 100%;

 background-color: #000;

 z-index:1001;

 opacity: 0.8;

}

#tombol{

 background: #e74c3c;        

}

Membuat modal dialog dengan JQuery

coba di perhatikan pada syntax di atas. jadi intinya modal yang sudah kita buat kita sembunyikan dulu dengan menetapkan “display:none” pada css. dan kita buat event click pada tombol agar pada saat tombol di klik maka akan memunculkan modal dialog yang tadinya kita sembunyikan dengan css. jadi intinya sederhana saja. kita berikan event klik pada tombol dan effect fadeIn untuk menampilkan modal.

1

2

3

4

5

6

7

8

9

10

<script type="text/javascript">

 $(document).ready(function(){

  $('#tombol').click(function(){

    $('#modal-kotak , #bg').fadeIn("slow");

  });

  $('#tombol-tutup').click(function(){

   $('#modal-kotak , #bg').fadeOut("slow");

  });

 });

</script>

lalu kemudian pada tombol-tutup kita juga memberikan event klik. agar ketika di klik modal di sembunyikan dengan menggunakan effect fadeOut() agar lebih menarik. hehe sekarang coba jalankan file index.html

membuat modal dialog dengan jquery

lalu klik pada tombol cara membuat modal dialog dengan jquery

cara membuat modal dialog dengan jquery

Pengertian modal dialog

Sedikit tambahan mungkin ada di antara teman-teman yang belum mengetahui untuk apa sih modal dialog, kapan sih bisa di gunakan. sebenarnya tidak ada ketentuan khusus tentang penggunaan modal pada sebuah website atau aplikasi. tergantung dari keinginan dan design sebuah website atau aplikasi. biasanya modal dialog di gunakan untuk membuat pesan peringatan, pesan informasi yang bisa di tujukan pada si user. dan bisa juga di gunakan untuk membuat form login dalam bentuk modal dialog. jadi terserah pada teman-teman pribadi kapan ingin menggunakan modal dialognya.

sekian dulu tutorial Membuat modal dialog dengan JQuery (Tanpa Plugin). semoda dapat bermanfaat untuk teman-teman yang ingin belajar membuat modal dialog dengan menggunakan jQuery tapi tidak ingin menggunakan plugin yang sudah banyak tersedia.

PART 2

Membuat Form Validasi Sendiri Dengan JQuery Tanpa Plugin

Membuat Form Validasi Sendiri Dengan JQuery Tanpa Plugin – halo teman-teman malasngoding.com yang mudah-mudahan gak malas ngoding kayak nama blog saya ini ya. hehe.. biar lah nama blog nya saja yang malas ngoding. kitanya mudah-mudahan gak malas ngoding ya teman-teman. karena salah satu di buat nya blog ini adalah untuk mengobati rasa malas ngoding yang hinggap pada diri sebagian teman-teman. hehe. dengan tutorial-tutorial yang ada di www.malasngoding.com ini mudah-mudahan dapat menghilangkan rasa malas ngoding.

Oke teman-teman. sesuai dengan judul pada artikel ini “Membuat Form Validasi Sendiri Dengan JQuery Tanpa Plugin“. di kesempatan kali ini saya akan membahas tentang bagaimana sih cara membuat form validation sendiri. tanpa menggunakan library jquery yang lainnya seperti jquery.validate.js. tetapi kita hanya akan menggunakan jquery.js saja. oh ya jika teman-teman ada yang belum mempelajari tentang tutorial jquery dasar, teman-teman bisa langsung membaca tutorial jquery yang sudah kita bahas sebelumnya : Belajar Pengenalan Jquery Dasar.

Walaupun mungkin akan sangat sederhana, tapi mungkin dapat bermanfaat lah untuk menambah-nambah ilmu pengetahuan tentang function-function nya jquery. pembahasan nya masih sangat sederhana. teman-teman bisa mengembangkan nya lagi. atau mungkin teman-teman bisa membuat sendiri library jquery untuk menangani form validasi. mudah-mudahan Membuat Form Validasi Sendiri Dengan JQuery Tanpa Plugin ini dapat bermanfaat.

Form Validasi / Form Validation

Seperti yang kita ketahui bersama. validasi form sangat lah di butuhkan pada sebuah website atau sistem. ini untuk meminimalisir kekurangan data yang di inputkann oleh user. sudah semua aplikasi pasti menerapkan validasi pada form. untuk mengatasi kekosongan data yang di anggap data penting.

Untuk mengatasi kekosongan data atau data yang penting harus di isi, maka kita dapat membuat teknik form validasi pada sebuah form.

Apa Saja Yang Di butuhkan ?

Yang di butuhkan tidak banyak teman-teman, kita hanya perlu library jquery.js. teman-teman bisa mendownloadnya di situs resmi nya. https://jquery.com/. lalu yang kita butuhkan untuk mengikuti tutorial form validasi ini adalah sebuah file. bisa itu file html ataupun php. terserah teman-teman. karena ini hanya contoh, maka saya gunakan html saja. yaitu dengan membuat file validasi.html. pada file validasi.html ini kita akan membuat simulasi form yang akan kita buatkan pegecekan validasinya. bahwa form wajib di isi. jika tidak di isi maka akan muncul pesan bahwa user harus mengisi form tersebut. kemudian yang ketika kita membutuhkan file css untuk mempercantik tampilan contoh saja sih teman-teman. tapi wajib teman-teman buat ya. agar contoh ini dengan yang teman-teman buat sama. gak ada yang error ntar.

validasi.html
validasi.css
library jquery.js

Membuat Form Validasi Sendiri Dengan JQuery

Langsung saja masuk ke tahap membuat form validasi tanpa plugin. hanya menggunakan jquery.js. silahkan teman-teman buat sebuah file dengan nama validasi.html dan letakkan satu directory dengan jquery.js . agar mudah kita hubungkan.

validasi.html

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

<!DOCTYPE html>

<html>

<head>

 <title>Membuat Form Validasi Dengan JQuery (Tanpa Plugin) | www.malasngoding.com</title> 

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

 <link rel="stylesheet" type="text/css" href="validasi.css">

</head>

<body>

 <h1>Membuat Form Validasi Dengan JQuery (Tanpa Plugin) <br/> www.malasngoding.com</h1> 

 <div class="kotak">  

  <form method="post" class="form">

   <input type="text" id="nama" name="nama" placeholder="Masukkan nama anda..">

   <span class="pesan pesan-nama">Anda harus mengisi nama!</span><br/><br/>

   <input type="submit" value="Simpan">

  </form>

 </div>

</body>

<script type="text/javascript">

 $(document).ready(function() {

  $('.form').submit(function() {

   var nama = $('#nama').val().length;   

   if (nama == 0) {    

    $(".pesan-nama").css('display','block');

    return false;

   }

  });

 });

</script>

</html>

perhatikan di sini.

1

2

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

<link rel="stylesheet" type="text/css" href="validasi.css">

kita hubungkan dengan file css dan jquery nya.

lalu kemudian membuat form sederhana.

1

2

3

4

5

<form method="post" class="form">

 <input type="text" id="nama" name="nama" placeholder="Masukkan nama anda..">

 <span class="pesan pesan-nama">Anda harus mengisi nama!</span><br/><br/>

 <input type="submit" value="Simpan">

</form>

form yang kita buat bertipe text. dan kita beri id dengan value “nama”. ini penting teman-teman. karena kita mendeteksi form yang kosong nya melalui id ini.

dan pada element span kita membuat pesan yang akan di munculkan. berikan class pesan pada element ini. karena penting.

1

<span class="pesan pesan-nama">Anda harus mengisi nama!</span>

bagian javascript nya saya bahas sebentar lagi. saya bahas bagian css nya dulu. biar nyambung ntar pembahasannya.

buat sebuah file lagi dengan nama validasi.css.

validasi.css

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

body{

 font-family: sans-serif;

 background: #fcfcfc;

}

h1{

 text-align: center; 

}

input[type="text"]{

 padding: 10px;

 font-size: 12pt;

 width: 100%;

}

input[type="submit"]{

 padding: 10px;

 font-size: 12pt;

 background: #E84C3D;

 border: none;

 color: #fff;

}

.kotak{

 background: #1ABC9C;

 width: 300px;

 padding:100px;

 margin: 10px auto;

}

.pesan{

 display: none;

 color: white; 

 margin: 10px;

}

yang paling terpenting dari css di atas adalah.

1

2

3

4

5

.pesan{

 display: none;

 color: white; 

 margin: 10px;

}

kenapa saya bilang penting. karena bisa teman-teman lihat di atas. pada class pesan kita berikan perintah untuk menyembunyikan class pesan. agar pesan peringatannya tidak muncul dulu. nanti pesan peringatannya muncul pada saat form di submit.

nah sampailah pada bagian terpenting dari tutorial membuat form validasi dengan jquery ini teman-teman.

teman-teman perhatikan pada syntax javascript yang sudah kita sisipkan tadi pada fiel validasi.html.

1

2

3

4

5

6

7

8

9

10

11

12

<script type="text/javascript">

 $(document).ready(function() {

  $('.form').submit(function() {

   var nama = $('#nama').val().length;   

   if (nama == 0) {    

    $(".pesan-nama").css('display','block');

    return false;

   }

  });

 });

</script>

di sini kita memberikan event submit pada form.

1

$('.form').submit(function() {

jadi pada saat form di submit maka perintah yang berada di dalam function ini akan di jalankan.

1

2

3

4

5

6

var nama = $('#nama').val().length;   

if (nama == 0) {    

 $(".pesan-nama").css('display','block');

 return false;

}

pertama kita tangkap jumlah karakter yang di input pada form.

1

var nama = $('#nama').val().length;

lalu kemudian kita mengecek nya. jika jumlah karakter yang di input sama dengan nol(berarti tidak ada yang di input). maka class pesan nama akan di munculkan. class pesan nama adalah pesan peringatan yang tadinya kita sembunyikan. jadi pada saat form di submit atau di klik pada tombol. maka akan di lakukan pengecekan. jika yang di input kosong maka pesan peringatan pun di tampilkan.

1

2

3

4

if (nama == 0) {    

 $(".pesan-nama").css('display','block');

 return false;

}

yang teman-teman lihat di atas adalah fungsi jquery untuk memanipulasi css. baca tutorial sebelumnya tentang manipulasi css dengan jquery.

dan perintah

1

return false;

berguna untuk menghentikan proses form. sehingga halaman tidak akan di reload/refresh.

oke selesai sudah teman-teman penjelasannya. waktunya melihat hasil dari Membuat Form Validasi Sendiri Dengan JQuery Tanpa Plugin.

jalankan pada browser.

Membuat Form Validasi Sendiri Dengan JQuery Tanpa Plugin

kita tidak akan memasukkan apa-apa pada form. untuk melihat hasil form balidasi yang kita buat. langsung saja kita klik pada tombol simpan. maka akan muncul pesan peringatan bahwa form harus di isi.

Membuat Form Validasi Sendiri Dengan JQuery Tanpa Plugin

nah seperti yang kita lihat. pesan peringatan pun muncul.”anda harus mengisi nama!”.

sekian lah teman-teman tutorial kali ini tentang Membuat Form Validasi Sendiri Dengan JQuery Tanpa Plugin. semoga dapat bermanfaat. mungkin teman-teman kesulitan dalam melihat source code nya karena terpisah-pisah. berikut ini saya lampirkan ulang.

validasi.html

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

<!DOCTYPE html>

<html>

<head>

 <title>Membuat Form Validasi Dengan JQuery (Tanpa Plugin) | www.malasngoding.com</title> 

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

 <link rel="stylesheet" type="text/css" href="validasi.css">

</head>

<body>

 <h1>Membuat Form Validasi Dengan JQuery (Tanpa Plugin) <br/> www.malasngoding.com</h1> 

 <div class="kotak">  

  <form method="post" class="form">

   <input type="text" id="nama" name="nama" placeholder="Masukkan nama anda..">

   <span class="pesan pesan-nama">Anda harus mengisi nama!</span><br/><br/>

   <input type="submit" value="Simpan">

  </form>

 </div>

</body>

<script type="text/javascript">

 $(document).ready(function() {

  $('.form').submit(function() {

   var nama = $('#nama').val().length;   

   if (nama == 0) {    

    $(".pesan-nama").css('display','block');

    return false;

   }

  });

 });

</script>

</html>

validasi.css

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

body{

 font-family: sans-serif;

 background: #fcfcfc;

}

h1{

 text-align: center; 

}

input[type="text"]{

 padding: 10px;

 font-size: 12pt;

 width: 100%;

}

input[type="submit"]{

 padding: 10px;

 font-size: 12pt;

 background: #E84C3D;

 border: none;

 color: #fff;

}

.kotak{

 background: #1ABC9C;

 width: 300px;

 padding:100px;

 margin: 10px auto;

}

.pesan{

 display: none;

 color: white; 

 margin: 10px;

}

Jangan lupa baca juga tutorial jquery lainnya:

Membuat modal dialog dengan jquery(tanpa plugin)

PART 3

Membuat Animasi Form Dengan JQuery

By Diki Alfarabi Hadi
24 March 2016
JQuery

Membuat Animasi Form Dengan JQuery

Membuat Animasi Form Dengan JQuery – Halo teman-teman malasngoding.com. terima kasih sebelumnya saya ucapkan ke pada teman-teman pembaca setia di malasngoding.com. karena telah meluangkan waktu untuk berkunjung di blog yang sederhana ini untuk sama-sama dengan saya belajar bahasa pemrograman web khususnya.

Di kesempatan kali ini, melalui artikel yang berjudul “Membuat Animasi Form Dengan JQuery“, kita akan belajar tentang pengulahan fungsi-fungsi jquery yang sebelumnya telah kita pelajari. silahkan teman-teman lihat pada tutorial sebelumnya tentang tutorial jquery dasar yang sudah di jelaskan. pada tutorial sebelumnya kita telah belajar fungsi event pada jquery dan fungsi-fungsi lainnya. untuk lebih mengasah tentang penggunaan fungsi jquery dasar ini, kita akan mencoba untuk membuat effect animasi sederhana pada form html.

Jangan lupa baca tutorial jQuery lainnya : Tutorial JQuery lengkap

Dengan tujuan untuk lebih mengasah kembali pengenalan tentang function dan event dasar pada jquery yang telah kita pelajari.

Baiklah langsung saja masuk ke contoh membuat efek animasi pada form dengan jquery. apa saja yang harus teman-teman siapkan ?

file html/php
jquery.js

Membuat Animasi Form Dengan JQuery

Tahap awal, kita buat dulu form nya di file html atau php. di sini saya membuat nya di file index.html

index.html

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

<!DOCTYPE html>

<html>

<head>

 <title>Membuat Animasi Form Dengan JQuery | www.malasngoding.com</title> 

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

 <link rel="stylesheet" type="text/css" href="style.css">

</head>

<body>

 <div class="kotak">  

  <h1>

   Membuat Animasi Form Dengan JQuery<br/>   

   www.malasngoding.com

  </h1> 

  <form class="form">

   <input type="text" id="nama" placeholder="Masukkan nama .." name="nama" autocomplete="off">

   <input type="text" id="alamat" placeholder="Masukkan alamat .." name="alamat" autocomplete="off">

   <input type="text" id="pekerjaan" placeholder="Masukkan pekerjaan .." name="pekerjaan" autocomplete="off">

  </form>

 </div>

 <script type="text/javascript">

  $(document).ready(function(){

   $("#nama").keyup(function(){

    $("#alamat").slideDown();

   });

   $("#alamat").keyup(function(){

    $("#pekerjaan").fadeIn();

   });

  });

 </script>

</body>

</html>

style.css

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

body{

 font-family: sans-serif;

 background: #fcfcfc;

}

h1{

 text-align: center; 

 color: #fff;

 font-size: 19pt;

 margin-bottom: 60px;

}

.kotak{

 padding: 40px 40px 70px 40px;

 height: 350px;

 width: 500px;

 margin: 20px auto;

 background: #54ACD2;

}

input[type="text"]{

 width: 95%;

 display: inline-block;

 padding: 10px;

 margin-bottom: 20px;

 font-size: 13pt;

}

#alamat,#pekerjaan{

 display: none;

}

seperti yang bisa di lihat, kita hubungkan dengan jquery.js dan style.css

1

2

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

<link rel="stylesheet" type="text/css" href="style.css">

kemudian kita buat form. perhatikan. kita berikan masing-masing dengan id yang berbeda. untuk membedakan satu form dengan form yang lainnya pada saat pengaksesan menggunakan jquery nantinya.

1

2

3

4

5

<form>

 <input type="text" id="nama" placeholder="Masukkan nama .." name="nama" autocomplete="off">

 <input type="text" id="alamat" placeholder="Masukkan alamat .." name="alamat" autocomplete="off">

 <input type="text" id="pekerjaan" placeholder="Masukkan pekerjaan .." name="pekerjaan" autocomplete="off">

</form>

nah, di sini yang kita tampilkan hanya form nama. form alamat dan form pekerjaan kita sembunyikan dulu dengan css. perhatikan css di atas tadi. di mana kita membuat display:none pada id alamat dan pekerjaan. agar tidak di tampikan.

1

2

3

#alamat,#pekerjaan{

 display: none;

}

dan akan saya jelaskan pada bagian javascript nya.

1

2

3

4

5

6

7

8

$(document).ready(function(){

 $("#nama").keyup(function(){

  $("#alamat").slideDown();

 });

 $("#alamat").keyup(function(){

  $("#pekerjaan").fadeIn();

 });

});

di sini kita berikan event pada id nama. jika terjadi pengetikan pada form nama, maka form alamat akan di tampilkan dengan effect slidedown(). baca tentang tutorial effect pada jquery.

dan jika form nama di ketik maka form pekerjaan akan di tampilkan dengan effect fadeIn(). teman-teman bisa sesuaikan sendiri effect jquery yang mana yg ingin teman-teman gunakan.

Berikut ini adalah hasil Membuat Animasi Form Dengan JQuery nya.

membuat effect animasi pada form dengan jquery

pada saat form nama di ketik, maka form alamat muncul

membuat animasi pada jquery

dan pada saat form alamat di ketik, maka form pekerjaan pun muncul.

contoh menggunakan effect jquery pada form

dan silahkan teman-teman coba hasilnya pada demo berikut ini. Membuat Animasi Form Dengan JQuery

sekian lah tutorial Membuat Animasi Form Dengan JQuery. semoga dapat bermanfaat.

BAHASA PEMOGRAMAN

Cari Blog Ini

JQuery Lanjutan

JQuery Lanjutan

PART 1

Membuat modal dialog dengan JQuery (Tanpa Plugin)

Membuat modal dialog dengan JQuery (Tanpa Plugin)

Membuat modal dialog dengan JQuery

Pengertian modal dialog

PART 2

Membuat Form Validasi Sendiri Dengan JQuery Tanpa Plugin

Membuat Form Validasi Sendiri Dengan JQuery Tanpa Plugin

Form Validasi / Form Validation

Apa Saja Yang Di butuhkan ?

Membuat Form Validasi Sendiri Dengan JQuery

PART 3

Membuat Animasi Form Dengan JQuery

Membuat Animasi Form Dengan JQuery

Membuat Animasi Form Dengan JQuery

PART 4

Komentar

Posting Komentar

Postingan populer dari blog ini

Pemograman R Studio

MIGRASI DATABASE DARI SQLite KE MySQL (Part-1)

Cara Menjadi Pengembang Front End – Keterampilan Front End Web Dev