Diberdayakan oleh Blogger
Gambar tema oleh Igniel
Beranda  ›  jQuery  ›  PHP

Create Checkbox Stylish Toggles with PHP Ajax

Posting Komentar

Tutorial kali ini cara membuat tombol checkbox Stylish dari kotak centang Tag HTML dengan menggunakan plugin Bootstrap Toggle Jquery dan setelah membuat tombol tolak ukur kotak centang bagaimana kita bisa melewatkan nilai tombol itu ke dalam Form dengan menggunakan Jquery dan Insert ke dalam tabel Mysql dengan menggunakan Ajax with PHP . Kita semua tahu aplikasi web harus dengan user interface yang stylish, jadi jika UI dari aplikasi web apapun memiliki sesuatu yang berbeda maka akan semakin banyak pengguna dan pengguna juga dapat dengan mudah mengerti bagaimana kita bisa menggunakan aplikasi ini.

Plugin Bootstrap Toggle akan mengubah kotak centang sederhana menjadi tombol matikan yang sangat fleksibel. Jadi jika pengguna telah datang di situs maka dia bisa mengerti bagaimana bisa menggunakan aplikasi web kita. Jika Anda sudah menggunakan Bootstrap untuk UI aplikasi web kami maka plugin ini bisa dengan mudah diintegrasikan ke dalam aplikasi kami. Karena plugin ini kompatibel dengan Bootstrap Library.

Misalkan Anda telah mengembangkan bentuk yang sederhana dan dalam hal ini Anda telah menggunakan tag kotak centang untuk tujuan apa pun, namun kotak centang sederhana sangat umum dan dapat kami lihat di aplikasi berbasis web namun jika Anda ingin membuat UI yang berbeda bentuknya untuk kotak centang, kami dapat menggunakannya. Plugin ini karena akan mengonversi kotak centang sederhana menjadi tombol toggle yang stylish dengan dua pilihan dan pengguna bisa memilih pilihan dan dengan menggunakan plugin ini kita bisa menggunakan satu kotak centang untuk memilih satu pilihan dari dua pilihan yang tersedia. Plugin ini akan mudah untuk user.

Jadi, posting ini sudah kita bahas bagaimana cara menginisialisasi plugin ini dan kita juga membahas beberapa pilihan dasar seperti bagaimana kita bisa mendefinisikan teks pada tombol toggle bagaimana kita bisa mengubah warna latar belakang tombol toggle. Lalu setelah kita lihat bagaimana kita bisa menggunakan nilai tombol toggle sebagai form field dan terakhir bagaimana cara memasukkan nilai tombol toggle ke tabel Mysql dengan menggunakan Ajax dengan PHP.

Sebelum masuk ke script kode silakan buat tabel :
CREATE TABLE IF NOT EXISTS `tbl_users` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `name` varchar(25) NOT NULL,
  `gender` varchar(25) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=27 ;
Buat file index.php script kode :
<!DOCTYPE html>
<html>
 <head>
  <title>Latihan Stylish Toggles Checkboxes with PHP Ajax</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
  <link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet">
 </head>
 <body>
  <br /><br />
  <div class="container" style="width:600px;">
   <h2 align="center">Latihan Stylish Toggles Checkboxes with PHP Ajax</h2><br /><br />
   <form method="post" id="insert_data">
    <div class="form-group">
     <label>Enter Name</label>
     <input type="text" name="name" id="name" class="form-control" />
    </div>
    <div class="form-group">
     <label>Define Gender</label>
     <div class="checkbox">
      <input type="checkbox" name="gender" id="gender" checked />
     </div>
    </div>
    <input type="hidden" name="hidden_gender" id="hidden_gender" value="Male" />
    <br />
    <input type="submit" name="insert" id="action" class="btn btn-info" value="Insert" />
   </form>
  </div>
  <!-- script -->
  <script>
 $(document).ready(function(){
  
  $('#gender').bootstrapToggle({
   on: 'Male',
   off: 'Female',
   onstyle: 'success',
   offstyle: 'danger'
  });

  $('#gender').change(function(){
   if($(this).prop('checked'))
   {
    $('#hidden_gender').val('Male');
   }
   else
   {
    $('#hidden_gender').val('Female');
   }
  });

  $('#insert_data').on('submit', function(event){
   event.preventDefault();
   if($('#name').val() == '')
   {
    alert("Please Enter Name");
    return false;
   }
   else
   {
    var form_data = $(this).serialize();
    $.ajax({
     url:"save_data.php",
     method:"POST",
     data:form_data,
     success:function(data){
      if(data == 'done')
      {
       $('#insert_data')[0].reset();
       $('#gender').bootstrapToggle('on');
       alert("Data Inserted");
      }
     }
    });
   }
  });

 });
 </script>
 </body>
</html>
lalu anda buat file save_data.php script kode :
<?php
if(isset($_POST["name"]))
{
 $connect = new PDO("mysql:host=localhost;dbname=name database", "root", "password");
 $query = "
 INSERT INTO tbl_users (name, gender) 
 VALUES(:name, :gender)
 ";
 $statement = $connect->prepare($query);
 $statement->execute(
  array(
   ':name'   => $_POST['name'],
   ':gender'  => $_POST['hidden_gender']
  )
 );

 $result = $statement->fetchAll();
 if(isset($result))
 {
  echo 'done';
 }
}
silakan di copas tuntas koding diatas
jQuery PHP
SHARE WhatsApp

Related Posts

Posting Komentar

Posting Komentar