Kategori Random

Modal Bootstrap tahap II : Membawa kode unik ke modal

Posted : 04 April 2017 | 07:34:44 , Dibaca 1587 kali

Wah lama banget gak nulis artikel, karna kesibukan sana sani. Kali ini saya kita akan membahas kembali modal boostrap. Pada artikel sebelum-sebelumnya saya sudah pernah membahas mengenai modal bootstrap namun masih hanya tahap awal saja, yang belum baca artikelya bisa dibaca di Membuat Modal Bootstrap PHP, dan sesuai janji saya pada artikel tersebut saya akan melanjutkan pada artikel ini dengan materi pembahasan modal bootstrap dengan manipulusi data.

 

Untuk langkah awal agar kita dapat menggunakan modal pada project yang lebih besar maka kita harus memulai dengan hal yang mudah terlebih dahulu yaitu kita dapat membawa sebuah kode unik ke modal bootstrap melalui action yang kita gunakan melalui klik atau link, yang dimana nantinya akan berfungsi pada edit, hapus maupun view pada sebuah data.

Oke langsung saya kita praktek penjelas baris kedua diatas, saya akan buat sebuah skrip html yang berisi beberapa isi data tabel barang yang memiliki kode barang berbeda (unik). seperti pada gambar dibawah :

Gambar Tabel data barang

Pada gambar diatas, pada tabel ada beberapa data barang yang akan kita implementasikan ke modal. Dimana ketika klik tombol view maka data setiap baris barang akan dibawa ke modal. Penasaran gimana skrip nya baiklah tanpa berlama-lama silakan diikuti script dibawah ini

Struktur Folder

nama folder project
--- assets
--- --- css
--- --- --- bootstrap.min.css
--- --- --- style.css
--- --- js
--- --- --- bootstrap.min.js
--- --- --- jquery-2.1.3.min.js
--- index.php

 

style.css


/* Custom page CSS
-------------------------------------------------- */
html {
    position: relative;
    min-height: 100%;
}
body {
    /* Margin bottom by footer height */
    margin-bottom: 60px;
    padding-top: 20px;
}
.table-template {
    padding: 40px 15px;
}
.footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    /* Set the fixed height of the footer here */
    height: 60px;
    background-color: #f5f5f5;
    border-top:solid 1px #eee;
}

body > .container {
    padding: 60px 15px 0;
}
.container .text-muted {
    margin: 20px 0;
}

.footer > .container {
    padding-right: 15px;
    padding-left: 15px;
}

code {
    font-size: 80%;
}

 

skrip index.php

<!DOCTYPE html>
<html>
<head>
  <title>Membawa Kode Unik ke Modal Bootstrap</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">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">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">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">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">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>
          <br>
          Stok Barang : <div id="vstok"></div>
          <br>
          Satuan Barang : <div id="vsatuan"></div>
          <br>
          Keterangan : <div id="vket"></div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>
<!-- /end modal -->
</body>
</html>

 

pada script index.php hanya berupa tag html biasa jadi bisa juga disimpan dengan format .html tidak mesti .php, jika sudah selesai diketik silakan dijalankan. apa yang terjadi?

 

sampai disini modal sudah berhasil ditampilkan namun data yang kita inginkan tampil belum berhasil ditampilkan. karena kita membutuhkan skrip action click untuk tombol nya, dan script ini silakan di sisipkan setelah <!-- /end modal --> buat seperti dibawah ini :

<script>
 $(".view").on("click",function(){
    var row = $(this).closest('tr'); //variabel baris yang di klik
    var columns = row.find('td');  //variabel kolom yang di klik
     var tableData = columns.map(function() {
        return $(this).text(); // mengambil teks pada kolom tabel sesuai dengan posisi tombol view di klik
    }).get();

    var val1 = $.trim(tableData[1]);
    var val2 = $.trim(tableData[2]);
    var val3 = $.trim(tableData[3]);
    var val4 = $.trim(tableData[4]);
    var val5 = $.trim(tableData[5]);
    var val6 = $.trim(tableData[6]);
    var val7 = $.trim(tableData[7]);

    $("#vkode").text(val1).css('font-weight','bold');
    $("#vnmbrg").text(val2).css('font-weight','bold');
    $("#vjenis").text(val3).css('font-weight','bold');
    $("#vharga").text(val4).css('font-weight','bold');
    $("#vstok").text(val5).css('font-weight','bold');
    $("#vsatuan").text(val6).css('font-weight','bold');
    $("#vket").text(val7).css('font-weight','bold');
 });
</script>

 

dan setelah skrip diatas kita sisipkan hasilnya akan muncul seperti dibawah :

 

bagaimana berhasilkah? Jika tidak berhasil silakan buat komentar dibawah

Demikian tutorial kali ini, semoga bermanfaat Bersambung Ke Tahap III


Next tutorial modal bootstrap untuk operasi data CRUD dari database

Postingan Terkait
» Modal Bootstrap tahap III: Membawa kode unik ke modal ( 05 Apr 2017 | 06:24:03 , 1801 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 )