Kategori Random

Modal Bootstrap tahap III: Membawa kode unik ke modal

Posted : 05 April 2017 | 06:24:03 , Dibaca 1801 kali

Salam coding kembali bagi para pembaca blog saya, masih membahas mengenai modal bootstrap pada artikel sebelumnya kita sudah membahas mengenai penggunaan data pada modal bootstrap yaitu melalui action pada bagian baris tabel bisa dibaca disini Modal Bootstrap tahap II : Membawa kode unik ke modal , dan pada artikel ini saya akan membahas cara lain untuk membawa data juga, seperti pepatah kuno mengatakan bayak jalan menuju roma ;D :D begitu juga dengan hal ini kita akan menggunakan cara lain untuk membawa data yang ada pada tabel melalui attribute data-*.

 

Untuk template saya akan ambil dari tutorial yang tahap II nya, karena kita hanya akan rombak cara penampilan datanya. Baik mari kita mulai buat skrip seperti dibawah ini :

<!DOCTYPE html>
<html>
<head>
  <title>Membawa Kode Unik ke Modal Bootstrap II</title>
<link rel="stylesheet" href="assets/css/bootstrap.min.css" />
<link rel="stylesheet" href="assets/css/style.css" />
<script type="text/javascript" src="assets/js/jquery-2.1.3.min.js"></script>
<script type="text/javascript" src="assets/js/bootstrap.min.js"></script>
</head>
<body>
    <nav class="navbar navbar-inverse navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">Gtech Labs</a>
        </div>
        <div id="navbar" class="collapse navbar-collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </nav>

    <div class="container">

      <div class="table-template">
        <h1>Data Barang</h1>
        <table class="table" id="tabelbarang">
            <thead>
                <tr>
                    <th></th>
                    <th>Kode</th>
                    <th>Nama Barang</th>
                    <th>Jenis</th>
                    <th>Harga</th>
                    <th>Jumlah Stok</th>
                    <th>Satuan</th>
                    <th>Keterangan</th>
                </tr>
            </thead>
            <tbody>
            <tr>
        <td><a href="#" class="btn btn-primary view" data-toggle="modal" data-target="#modalview" data-kode="B11" data-nama="Lenovo E200" data-jenis="Elektronik" data-harga="7.000.000">View</a></td>
        <td>B11</td>
        <td>Lenovo E200</td>
        <td>Elektronik</td>
        <td>7.000.000</td>
        <td>200</td>
        <td>Unit</td>
        <td>Laptop lenovo E200 adalah tipe laptop thinkpad.</td>
    </tr>
        <tr>
        <td><a href="#" class="btn btn-primary view" data-toggle="modal" data-target="#modalview" data-kode="B12" data-nama="Piring Kaca" data-jenis="Kelontong" data-harga="21.000">View</a></td>
        <td>B12</td>
        <td>Piring Kaca</td>
        <td>Kelontong</td>
        <td>21.000</td>
        <td>10</td>
        <td>Lusin</td>
        <td>Piring Kaca dengan motif cantik</td>
    </tr>
        <tr>
        <td><a href="#" class="btn btn-primary view" data-toggle="modal" data-target="#modalview" data-kode="B13" data-nama="Tisu Basah" data-jenis="Tools" data-harga="2.500">View</a></td>
        <td>B13</td>
        <td>Tisu Basah</td>
        <td>Tools</td>
        <td>2.500</td>
        <td>10</td>
        <td>buah</td>
        <td>Tisu basah untuk muka</td>
    </tr>
        <tr>
        <td><a href="#" class="btn btn-primary view" data-toggle="modal" data-target="#modalview" data-kode="B14" data-nama="Aqua 600 ml" data-jenis="Minuman" data-harga="25.000">View</a></td>
        <td>B14</td>
        <td>Aqua 600 ml</td>
        <td>Minuman</td>
        <td>25.000</td>
        <td>40</td>
        <td>kardus</td>
        <td>Air Mineral AQUA 600 ml</td>
    </tr>
        <tr>
        <td><a href="#" class="btn btn-primary view" data-toggle="modal" data-target="#modalview" data-kode="B15" data-nama="Mie Sedap" data-jenis="Makanan" data-harga="45.000">View</a></td>
        <td>B15</td>
        <td>Mie Sedap</td>
        <td>Makanan</td>
        <td>45.000</td>
        <td>40</td>
        <td>kardus</td>
        <td>Mie Instan Mie Sedap </td>
    </tr>
            </tbody>
        </table>
      </div>

    </div><!-- /.container -->

    <!-- footer -->
    <footer class="footer">
      <div class="container">
        <p class="text-muted">Modal Bootstrap by gtech &copy; 2017</p>
      </div>
    </footer>

<!-- Modal -->
<div class="modal fade" id="modalview" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Data Barang</h4>
      </div>
      <div class="modal-body">
          Kode Barang : <div id="vkode"></div>
          <br>
          Nama Barang : <div id="vnmbrg"></div>
           <br>
          Jenis Barang : <div id="vjenis"></div>
       <br>
          Harga Barang : <div id="vharga"></div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>
<!-- /end modal -->
<script>
 $(".view").on("click",function(){
    var kode = $(this).data('kode'); // attribute data-kode
    var nama = $(this).data('nama');  //variabel attribut data-nama
    var harga = $(this).data('harga');
    var jenis = $(this).data('jenis');

    $("#vkode").text(kode).css('font-weight','bold');
    $("#vnmbrg").text(nama).css('font-weight','bold');
    $("#vjenis").text(jenis).css('font-weight','bold');
    $("#vharga").text(harga).css('font-weight','bold');
 });
</script>
</body>
</html>

Jadi untuk membawa datanya kita sisipkan attribute data-* didalam tombol link nya dimana setiap data atributenya akan di defenisikan pada saat tombol view diklik.

 

dan untuk hasilnya dapat dilihat dibawah ini, tampilan tidak ada perbedaan dengan cara yang sebelumnya.

 

 

 

Bagaimana mudah bukan, kini kita sudah dapat menggunakan beberapa cara untuk membawa data ke modal. 
Demikian tutorial kali ini semoga bermanfaat 

 

Next Tutorial : Modal Bootstrap penerapan crud data dari database

 

 

Postingan Terkait
» Modal Bootstrap tahap II : Membawa kode unik ke modal ( 04 Apr 2017 | 07:34:44 , 1588 hits )
» Membuat Template Bootstrap dengan Cepat dan Gampang ( 12 Feb 2016 | 09:00:29 , 5798 hits )
» Trik Zoom Image View pada postingan dengan CSS ( 23 Sep 2015 | 07:05:18 , 3022 hits )
» Membuat Modal Bootstrap PHP ( 19 Mar 2015 | 03:00:11 , 15678 hits )
» Bootstrap : Membuat Tab Horizontal ( 20 Feb 2015 | 04:58:20 , 6140 hits )