Local Storage untuk Ganti Warna Background Setelah diKlik

LocalStorage

Ketik dalam daftar data tabel anda, jika jumlahnya banyak pasti user sangat kesulitan untuk menentukan dimana bagian yang terpilih atau terakhir kita klik. Untuk itu, saya contohkan javascript bagaimana untuk mengatasi itu. Berikut contohnya:

<script type="text/javascript">
    $(document).ready(function (e) {
        var index = Cookies.get('bg-success');
        $('.light').removeClass('bg-success');
        $(".light").eq(index).addClass('bg-success');
        $('.light').on('click', function (e) {
            e.preventDefault();
            $('.light').removeClass('bg-success');
            $(this).addClass('bg-success');
            Cookies.set('bg-success', $('.light').index(this));
        });
        var index = Cookies.get('bg-warning');
        $('.light2').removeClass('bg-warning');
        $(".light2").eq(index).addClass('bg-warning');
        $('.light2').on('click', function (e) {
            $('.light2').removeClass('bg-warning');
            $(this).addClass('bg-warning');
            Cookies.set('bg-warning', $('.light2').index(this));
        });

    });
</script>

Sekian, terimakasih atas kunjungannya.

Salam,

PHP Aku : Membangun web terorganisasi dan mudah dimengerti, contoh tutorial dengan menggunakan HTML, CSS, JavaScript, SQL, PHP, dan XML.

Perfect Full Page Background Image

Bagaimana supaya gambar latar belakang di situs web yang mencakup seluruh jendela browser setiap saat. Berikut beberapa teknik cara membuatnya:

Cara 1
img.bg {
  /* Set rules to fill background */
  min-height: 100%;
  min-width: 1024px;

  /* Set up proportionate scaling */
  width: 100%;
  height: auto;

  /* Set up positioning */
  position: fixed;
  top: 0;
  left: 0;
}

@media screen and (max-width: 1024px) { /* Specific to this particular image */
  img.bg {
    left: 50%;
    margin-left: -512px;   /* 50% */
  }

}


Cara 2
<img src="images/bg.jpg" id="bg" alt="">

#bg {
  position: fixed; 
  top: 0; 
  left: 0; 

  /* Preserve aspet ratio */
  min-width: 100%;
  min-height: 100%;
}


Cara 3
<div id="bg">
  <img src="images/bg.jpg" alt="">
</div>

#bg {
  position: fixed; 
  top: -50%; 
  left: -50%; 
  width: 200%; 
  height: 200%;
}
#bg img {
  position: absolute; 
  top: 0; 
  left: 0; 
  right: 0; 
  bottom: 0; 
  margin: auto; 
  min-width: 50%;
  min-height: 50%;
}

HTML
<div id="bg">
  <img src="images/bg.jpg" alt="">

</div>


Cara 4:
<img src="images/bg.jpg" id="bg" alt="">

#bg { position: fixed; top: 0; left: 0; }
.bgwidth { width: 100%; }
.bgheight { height: 100%; }

$(window).load(function() {    

var theWindow        = $(window),
   $bg              = $("#bg"),
   aspectRatio      = $bg.width() / $bg.height();
       
function resizeBg() {

if ( (theWindow.width() / theWindow.height()) < aspectRatio ) {
   $bg
    .removeClass()
    .addClass('bgheight');
} else {
   $bg
    .removeClass()
    .addClass('bgwidth');
}

}
                 
theWindow.resize(resizeBg).trigger("resize");


});

Sekian, terimakasih atas kunjungannya.

Salam,

PHP Aku : Membangun web terorganisasi dan mudah dimengerti, contoh tutorial dengan menggunakan HTML, CSS, JavaScript, SQL, PHP, dan XML.

Cara Membuat DataTable Menggunakan JSon di CodeIgniter

DataTable

Bagaimana cara menggunakan dataTable dengan data JSon di CodeIgniter? Di bawah contoh penggunaan secara singkatnya.

Controllers 
function get_data() {
        $list = $this->daftar_m->daftar();
        $data = array();
        $i = 1;
        $no = 1;
        foreach ($list as $row) { //ini kalau datanya dari database
            $row = array();
            $row[] = $no;
            $row[] = $row->nama;
            $row[] = $row->skpd;            $row[] = $row->deviasi. "%";
            $data[] = $row;
            $no++;
        }
        $output = array(
            //"recordsTotal" => 10,
            "data" => $data,
        );
        echo json_encode($output);
}


Models
//query kamu di model daftar_m


View
<table class="table table-bordered table-striped" id="table">
    <thead>
        <tr>
            <th style="vertical-align: middle" class="text-center" width="5%">NO.</th>
            <th style="vertical-align: middle" class="text-center" width="40%">NAMA</th>
            <th style="vertical-align: middle" class="text-center" width="45%">SKPD</th>
            <th style="vertical-align: middle; background: transparent !important;" class="text-center" width="10%;">DEVIASI</th>
        </tr>
    </thead>
</table>


JavaScript

var oTable = $('#table').DataTable({
            "ajax": {
               "url": "<?php echo site_url('controller/get_data') ?>",
               "type": "POST"
            },
            "processing": true,
            columnDefs: [
                {
                    targets: 3,//kolom ke 4 index pertama 0
                    render: function (data, type, row) {//merubah tipe output text
                        return '<input type="text" name="dev[]" class="form-control" value="' + data + '">';
                    }
                }
            ],
            "aoColumns": [//sortable dan styling di setiap kolom
                {
                    "bSortable": true,
                    "className": "text-center"
                },
                {
                    "bSortable": true
                },
                {
                    "bSortable": false
                },
                {
                    "bSortable": false,
                    "className": "text-center excellent",
                }
            ],
            "paging": false,//show hide dropdown pages
            "ordering": true,
            "bFilter": true,//enable disable fitur pencarian
            "iDisplayLength": 10,
            "language": {
                "zeroRecords": "Maaf data tidak ditemukan!",
                "sSearch": "Cari",
                "searchPlaceholder": "Keyword" //placeholder
            },
            columns: [//deklarasi thead
                {title: "No."},
                {title: "Nama"},
                {title: "SKPD"},
                {title: "Deviasi"}
            ]

        });

Sekian, terimakasih atas kunjungannya.

Salam,

PHP Aku : Membangun web terorganisasi dan mudah dimengerti, contoh tutorial dengan menggunakan HTML, CSS, JavaScript, SQL, PHP, dan XML.

Membuat Tabel dengan Accordian Bootstrap

Bagaimana cara membuat accordion di tabel? Berikut ini adalah contohnya:

<table class="table table-bordered table-hover dTable">
                        <thead>
                            <tr>
                                <th class="txt-c" width="20%">NO.AKUN</th>
                                <th class="txt-c" width="35%">NAMA AKUN</th>
                                <th class="txt-c" width="30%">KETERANGAN</th>
                                <th class="txt-c" width="15%">AKSI</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td class="txt-c">1.0.0.00.00</td>
                                <td class="txt-l">Aset</td>
                                <td class="txt-l">Keterangan 1</td>
                                <td class="txt-c">
                                    <?php
                                    echo '<a href="' . site_url('akun/edit') . '"><button type="button" class="btn btn-primary" title="Edit Akun"><i class="fa fa-edit"></i></button></a>
                                    <a href="#"><button type="button" class="btn btn-danger" title="Hapus Akun"><i class="fa fa-remove"></i></button></a>';
                                    ?>
                                </td>
                            </tr>
                            <tr data-toggle="collapse" data-target="#demo1" class="accordion-toggle pointer">
                                <td class="txt-c">1.1.0.00.00</td>
                                <td class="txt-l">Aset Lancar</td>
                                <td class="txt-l">Keterangan 2</td>
                                <td class="txt-c">
                                    <?php
                                    echo '<a href="' . site_url('akun/edit') . '"><button type="button" class="btn btn-primary" title="Edit Akun"><i class="fa fa-edit"></i></button></a>
                                    <a href="#"><button type="button" class="btn btn-danger" title="Hapus Akun"><i class="fa fa-remove"></i></button></a>';
                                    ?>
                                </td>
                            </tr>
                            <tr>
                                <td colspan="12" class="hiddenRow">
                                    <div class="accordian-body collapse" id="demo1">
                                        <table class="table table-bordered table-striped" style="width: 100%">
                                            <tr>
                                                <td class="txt-c" width="20%" style="border-left: none !important;">1.1.1.00.00</td>
                                                <td class="txt-l" width="35%">Kas</td>
                                                <td class="txt-l" width="30%">Keterangan 2.1</td>
                                                <td class="txt-c" width="15%" style="border-right: none !important;">
                                                    <?php
                                                    echo '<a href="' . site_url('akun/edit') . '"><button type="button" class="btn btn-primary" title="Edit Akun"><i class="fa fa-edit"></i></button></a>
                                                        <a href="#"><button type="button" class="btn btn-danger" title="Hapus Akun"><i class="fa fa-remove"></i></button></a>';
                                                    ?>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td class="txt-c" width="20%" style="border-left: none !important;">1.1.2.00.00</td>
                                                <td class="txt-l" width="35%">Investasi Jangka Pendek</td>
                                                <td class="txt-l" width="30%">Keterangan 2.2</td>
                                                <td class="txt-c" width="15%" style="border-right: none !important;">
                                                    <?php
                                                    echo '<a href="' . site_url('akun/edit') . '"><button type="button" class="btn btn-primary" title="Edit Akun"><i class="fa fa-edit"></i></button></a>
                                                        <a href="#"><button type="button" class="btn btn-danger" title="Hapus Akun"><i class="fa fa-remove"></i></button></a>';
                                                    ?>
                                                </td>
                                            </tr>
                                        </table>
                                    </div>
                                </td>
                            </tr>
                        </tbody>
                    </table>

Sekian, terimakasih atas kunjungannya.

Salam,

PHP Aku : Membangun web terorganisasi dan mudah dimengerti, contoh tutorial dengan menggunakan HTML, CSS, JavaScript, SQL, PHP, dan XML.