Pages

Sunday 21 August 2016

Bootstrap Select auto Live Search "Pencarian dengan Select"

Assalamualaikum. 
Satu kata yang ingin kuucapkan  "Bootstrap memang TOP BGT".
Alhamdulilah dengan bantuan framework bootstrap ini, membuat web semakin mudah. Selain mudah, web yang dihasilkan pun lebih responsive, dinamis, simple dan menarik.

Pada kesempatan ini saya akan sedikit berbagi mengenai bootstrap-select untuk pencarian otomatis.
Pencarian otomatis yang dimaksud yaitu pada waktu kita mempunyai data lumayan banyak, dan ingin menampilkan secara otomatis saat melakukan penginputan data tanpa menekan tombol apapun.




Apa itu bootstrap select?
bootstrap select merupakan plugin JQuery yang disediakan oleh bootstrap untuk menambhakan fungsionalitas dari  select elemen.

Dimana saya bisa mendapatkannya?
untuk tutorial lengkap dan demo secara live mengenai bootstrap-select, kita bisa mengunjungi alamat http://silviomoreto.github.io/bootstrap-select 


Bagaiman cara membuat Pencarian otomatis dengan select seperti tampak pada gambar diatas?
1. Siapkan framework bootstrap 3 yang bisa didownonload di http://getbootstrap.com/
    Saat ini versinya sudah mencapai V3.3.7
2. Siapkan bootstrap select, http://silviomoreto.github.io/bootstrap-select 

Filenya dalam bentuk .zip maka untuk menggunakannya lakukan extrak ke xampp/htdocs/

berikut scritnya:
<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap-select test page</title>

  <meta charset="utf-8">

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
  <link rel="stylesheet" href="dist/css/bootstrap-select.css">

  <style>
    body {
      padding-top: 70px;
    }
  </style>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
  <script src="dist/js/bootstrap-select.js"></script>
</head>
<body>

      <select id="lunch" class="selectpicker" data-live-search="true" title="Please select a lunch ...">
        <option>Hot Dog, Fries and a Soda</option>
        <option>Burger, Shake and a Smile</option>
        <option>Sugar, Spice and all things nice</option>
        <option>Baby Back Ribs</option>
        <option>A really really long option made to illustrate an issue with the live search in an inline form</option>
      </select>
    </div>
  </form>

  <hr>
  <form class="form-horizontal" role="form">
    <div class="form-group form-group-lg">
      <label for="error" class="col-lg-2 control-label">error</label>

      <div class="col-lg-10 error">
        <select id="error" class="selectpicker show-tick form-control">
          <option>pen</option>
          <option>pencil</option>
          <option selected>brush</option>
        </select>
      </div>
    </div>
 
</body>
</html>

catatan: untuk link rel  dan script
- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> bisa diganti disesuaikan dengan lokasi kita menaruh bootstrap.min.css semisal distributor_bsp/css/bootstrap.min.css
-  <script src="dist/js/bootstrap-select.js">
  <link rel="stylesheet" href="dist/css/bootstrap-select.css"></script>
  disesuaikan dengan lokasi file bootsrap-select.js berada








Posted by jam No comments:

Monday 8 August 2016

Javascript Pesan Konfirmasi Sebelum Proses Hapus PHP Bootstrap


Alhamdulilah,
Setelah hampir setengah jam mencari-cari script untuk menampilkan pesan konfirmasi sebelum penghapusan data, akhirnya ketemu. Terimakasih http://stackoverflow.com.

Untuk membuat pesan konfirmasi hapus data, kita dapat menggunakan javascript:
Jalannya program:
1. Select row/data yang akan dihapus
2. Klik pada tombol tong sampah, maka muncul pesan konfirmasi
3. Jika Ok maka data dihapus, jika tidak maka tutup pesan konfirmasi kembali ke form tampil data.


untuk tombol hapus:

echo '<a href="hapususer.php?id='.$row['username'].'" onclick="return deleteconfig()"><span class="glyphicon glyphicon-trash" ></span></a>';


untuk javascriptnya dapat diletakkan di atas tag </body>

<script type="text/javascript">
        function deleteconfig(){
        var tujuan=$(this).attr('id');
        var hapusin=confirm("Apakah Anda yakin ingin menghapus data ini?");
        if(hapusin==true){
            window.location.href=tujuan;
            }
            else{
            alert("Data Batal dihapus");
            }
            return hapusin;
            }
        </script>


Script lengkapnya:
 <div id="page-wrapper">
            <div class="container-fluid">
                <!-- Page Heading -->
                <div class="row">
                    <div class="col-md-12">
                        <h3 class="page-header">
                            Data User
                        </h3>
                        <ol class="breadcrumb">
                            <li>
                                <i class="fa fa-dashboard"></i>Data Master
                            </li>
                            <li class="active">
                                <i class="fa fa-edit"></i>Data User
                            </li>
                        </ol>
                    </div>
                </div>

<div class="row">
                    <div class="col-md-12">
                     <div class="table-responsive">
                        <table class="table table-bordered table-hover table-striped">
                            <thead>
                            <tr class="info">
                            <th>No</th>
                            <th>Nama User</th>
                            <th>Nama Lengkap</th>
                            <th>Email</th>
                            <th>No Telepon</th>
                            <th>Aksi</th>
                            </tr>
                            </thead>
                            <tbody>
                            <?php
                            include 'koneksi.php';
                            $sql=mysql_query('select*from pengguna order by username DESC');
                            $no=1;
                            while($row=mysql_fetch_array($sql))
                            {
                            echo '<tr>';
                            echo '<td>'.$no.'</td>';
                            echo '<td>'.$row['username'].'</td>';
                            echo '<td>'.$row['nama_lengkap'].'</td>';
                            echo '<td>'.$row['email'].'</td>';
                            echo '<td>'.$row['no_telp'].'</td>';
                            echo '<td>';
                            echo '<a href="#" data-href="edituser.php?id='.$row['username'].'"><span class="glyphicon glyphicon-pencil"></span> </a>';
                            echo ' ';
                            echo '<a href="hapususer.php?id='.$row['username'].'" onclick="return deleteconfig()"><span class="glyphicon glyphicon-trash" ></span></a>';
                            echo '</td>';
                            echo'</tr>';
                            $no++;
                            }
                            ?>
                            <tbody>
                        </table>
                     </div>
                    </div>
                </div>
<tbody>
                        </table>
                     </div>
                    </div>
                </div>
                  
                   
            </div>
            <!-- /.container-fluid -->

        </div>
        <!-- /#page-wrapper -->

    </div>
    <!-- /#wrapper -->
    <script type="text/javascript">
        function deleteconfig(){
        var tujuan=$(this).attr('id');
        var hapusin=confirm("Apakah Anda yakin ingin menghapus data ini?");
        if(hapusin==true){
            window.location.href=tujuan;
            }
            else{
            alert("Data Batal dihapus");
            }
            return hapusin;
            }
        </script>
     </body>

Posted by jam No comments:

Saturday 6 August 2016

Merubah Pesan Validasi "please fill out this field" dengan Bahasa Sendiri Bootstrap

Setelah sebelumnya kita berhasil membuat pesan peringatan error,
maka selanjutnya kita membahas bagaimana cara merubah pesan peringatan dalam bahasa inggris ""please fill out this field" menjadi pesan peringatan sesuai dengan bahasa keinginan kita.
Tujuan utama merubah pesan ini adalah untuk memudahkan user  memahami apa yang sebenarnya diinginkan oleh sistem.


Semisal kita menginginkan pesan error/pesan peringatannya adalah " data tidak boleh kosong " atau teman-teman
Caranya cukup mudah dengan menambahkan

oninvalid="this.setCustomValidity('data tidak boleh kosong')" oninput="setCustomValidity('')"
pada tag input

Penerapannya:

 <form role="form" class="form-horizontal" action="simpanuser.php" method="post">
          <div class="form-group">
          <label class="control-label col-sm-2" for="username">Username</label>
          <div class="col-sm-8">
           <input type="text" name="username" class="form-control" required oninvalid="this.setCustomValidity('data tidak boleh kosong')" oninput="setCustomValidity('')">
             </div>
             </div>
</form>

Hasil:

 Gambar: Pesan Validasi Bahasa Kita Sendiri

 Script secara keseluruhan:

<form role="form" class="form-horizontal" action="simpanuser.php" method="post">
                        <div class="form-group">
                            <label class="control-label col-sm-2" for="username">Username</label>
                            <div class="col-sm-8">
                            <input type="text" name="username" class="form-control" required oninvalid="this.setCustomValidity('data tidak boleh kosong')" oninput="setCustomValidity('')">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-sm-2" for="nama lengkap">password</label>
                            <div class="col-sm-8">
                            <input type="text" name="password" class="form-control" required oninvalid="this.setCustomValidity('data tidak boleh kosong')" oninput="setCustomValidity('')">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-sm-2" for="nama lengkap" >Nama Lengkap</label>
                            <div class="col-sm-8">
                            <input type="text" name="nama_lengkap" class="form-control" required oninvalid="this.setCustomValidity('data tidak boleh kosong')" oninput="setCustomValidity('')">
                            </div>
                       
                       
                        </div>
                        <div class="form-group">
                            <label class="control-label col-sm-2" for="nama lengkap">Email</label>
                            <div class="col-sm-8">
                            <input type="text" name="email" class="form-control" required oninvalid="this.setCustomValidity('data tidak boleh kosong')" oninput="setCustomValidity('')">
                            </div>
                       
                        </div>
                        <div class="form-group">
                            <label class="control-label col-sm-2" for="No Telepon">No Telepon</label>
                            <div class="col-sm-8">
                            <input type="text" name="no_telp" class="form-control" required oninvalid="this.setCustomValidity('data tidak boleh kosong')" oninput="setCustomValidity('')">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-sm-2" for="Level">Level</label>
                            <div class="col-sm-8">
                            <input type="text" name="level" class="form-control" required oninvalid="this.setCustomValidity('data tidak boleh kosong')" oninput="setCustomValidity('')">
                            </div>
                       
                        </div>
                        <div class="form-group">
                            <div class="col-sm-offset-2 col-sm-10">
                            <button type="submit" class="btn btn-primary" name="submitted" value="simpan">Simpan</button>
                            <button type="reset" class="btn btn-danger" onclick="self.history.back()">Batal</button>
                            </div>
                        </div>
                    </form>



Selain cara diatas, ada banyak cara lain yang bisa digunakan untuk merubah pesan validasi. Sebagai referensi dapat dicari di  www.stackoverflow.com

semoga bermanfaat.

Tutorial Lengkap Soal Bootstrap dapat dikunjungi di www.howeby.blogspot.com
Posted by jam 2 comments:

Pesan Validasi untuk Input Bootstrap

Gambar : Form Input dengan Validasi

Apa jadinya jika pada saat kita/user menginput data  kosong kemudian langsung diklik simpan?

Tentu saja error, 
apalagi jika bidang yang diinputkan bidang pokok (primary key). Untuk mengatasi hal ini maka kita perlu mensiasatinya dengan membuat pesan peringatan atau pesan error sehingga kesalahan penginputan dapat diminimalisir.
pesan peringatan dapat dibuat dengan menambahkan required pada tag <input>

Berikut penerapannya :

<form role="form" class="form-horizontal" action="simpanuser.php" method="post">
    <div class="form-group">
                 <label class="control-label col-sm-2" for="nama lengkap">password</label>
                  <div class="col-sm-8">
                            <input type="text" name="password" class="form-control" required">
                  </div>
    </div>
</form>


 Hasilnya:

 saat user tidak menekan tombol simpan tanpa mengisi kolom username maka muncul pesan peringatan "Please fill out this field".

 Gambar: Form Input Setelah diberi Pesan Peringatan/Pesan Error


Posted by jam No comments:
Subscribe to: Posts (Atom)