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.

Cara Merubah Warna Text di Selectbox atau Dropdown

Contoh cara merubah warna text di selectbox:

.dataTables_length select option {
    background: rgba(0,0,0,0.3);
    color:#fff;
    text-shadow:0 1px 0 rgba(0,0,0,0.4);
}

.dataTables_length select option[val="1"]{
    background: rgba(100,100,100,0.3);
}

Contoh hanya value tertentu saja:

select option {
    margin:40px;
    background: rgba(0,0,0,0.3);
    color:#fff;
    text-shadow:0 1px 0 rgba(0,0,0,0.4);
}

select option[val="1"]{
    background: rgba(100,100,100,0.3);
}

select option[val="2"]{
    background: rgba(200,200,200,0.3);
}

Sekian, terimakasih atas kunjungannya.

Salam,

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

Disabled Object Menggunakan CSS

Disabled object:

<!DOCTYPE html>
<html>
<head>
<style> 
input[type=text]:enabled {background: #ffff00;}
input[type=text]:disabled {background: #dddddd;}
</style>
</head>
<body>

<input type="text" disabled="disabled" value="PHP Aku">

</body>
</html>

Sekian, terimakasih atas kunjungannya.

Salam,

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

Bagaimana CSS Desktop, Tabs, dan Mobile

Saya telah melakukan beberapa penelitian tentang pertanyaan media dan saya masih tidak mengerti bagaimana menset tampilan dengan device tertentu, tampilan desktop, tablet dan mobile.

Contoh:

@media (min-width:1101px) { //wide screen
//css
}
@media (min-width:768px) and (max-width: 1100px) { //desktop
//css}
@media (min-width:468px) and (max-width: 767px) { //tabs
//css}
@media (max-width: 467px) {
//css}


IMO these are the best breakpoints:

@media (min-width:320px) { /* smartphones, iPhone, portrait 480x320 phones */ }
@media (min-width:481px) { /* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */ }
@media (min-width:641px) { /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */ }
@media (min-width:961px) { /* tablet, landscape iPad, lo-res laptops ands desktops */ }
@media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ }
@media (min-width:1281px) { /* hi-res laptops and desktops */ }

Sekian, terimakasih atas kunjungannya.

Salam,

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

Daftar Tags dan Nama Class yang dipakai Bootstrap

Bingung mencari nama class di bootstrap? Bootsrap secara default memakai font 14px pada tag <body> dan semua paragraf, sedangkan <p> memakai margin bawah 10px. Berikut saya berikan daftarnya:

Element/Class	Diskripsi
< h1 >< h6 > atau .h1 s/d .h6	h1 - h6 headings
< small >	Text lebih ringan Heading (secondary text)
.small	85% dari ukuran parent (parent= 14px)
.lead	Ukuran lebih besar dari parent (parent= 14px)
< mark > atau < kbd > atau < code >	Mark/ngeblok teks
< del >	Coret teks
< s >	Coret teks untuk yang lebih panjang
< ins >	Menggaris bawahi teks
< u >	Menggaris bawahi teks
< strong >	Teks tebal
< em >	Teks miring
.text-left / center / right / justify	Teks rata kiri / tengah / kanan / justify
.vcenter / .vtop / .vbottom	Teks vertikal middle / top / bottom
.text-nowrap	Teks tanpa pembatas
.text-lowercase	Huruf kecil semua
.text-uppercase	Huruf besar semua
.text-capitalize	Huruf besar huruf depan setiap kata saja
< abbr >	Memberikan title dengan garis putus-putus di bawah katanya
.initialism	Di < abbr > font lebih kecil
< address >	Informasi kontak
< blockquote >	Garis depan vertikal
.blockquote-reverse	Garis belakang vertikal
.list-unstyled	Hapus style di list
.list-inline	List secara horizontal, sudah dengan paddingnya
< pre > atau < pre class="pre-scrollable" >	Menjorok ke kanan
< dl >	Menunjukkan daftar diskripsi
.dl-horizontal	Menunjukkan daftar diskripsi secara horizontal
< var >	x=ab+y
< samp >	Teks renggang

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 Memutar Object dengan CSS

Bagaimana si cara memutar object atau div html menggunakan css? Mudah, berikut saya contohkan bagaimana memutar div dengan id rotate.

<!DOCTYPE html>

<html>

<head>

<style> 

div {

    width: 100px;

    height: 30px;

    background-color: green; color: #fff; margin-top: 50px;

    /* Rotate div */

    -ms-transform: rotate(15deg); /* IE 9 */

    -webkit-transform: rotate(15deg); /* Chrome, Safari, Opera */

    transform: rotate(15deg);

}

</style>

</head>

<body>

<div>Hello word!</div>

</body>

</html>

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 Garis Linear di Sudut Artikel

<style type="text/css">
.border {
    width:80%;
    margin:2em auto;
    padding:2em;
    position:relative;

}
.border::before {
    content:'';
    position:absolute;
    left: -10px;
    top:-10px;
    width: 100px;
    height: 100px;
    background: linear-gradient(to bottom, transparent 24px, #ddd 24px, #ddd 26px, transparent 26px), linear-gradient(to right, transparent 24px, #ddd 24px, #ddd 26px, transparent 26px);
}
.border::after {
    content:'';
    position:absolute;
    width: 100px;
    height: 100px;
    right:-10px;
    bottom:-10px;
    background: linear-gradient(to bottom, transparent 74px, #ddd 74px, #ddd 76px, transparent 76px), linear-gradient(to right, transparent 74px, #ddd 74px, #ddd 76px, transparent 76px);
}
</style>

<div class="border">
    <p>Lorem Ipsum adalah contoh teks atau dummy dalam industri percetakan dan penataan huruf atau typesetting. Lorem Ipsum telah menjadi standar contoh teks sejak tahun 1500an, saat seorang tukang cetak yang tidak dikenal mengambil sebuah kumpulan teks dan mengacaknya untuk menjadi sebuah buku contoh huruf. Ia tidak hanya bertahan selama 5 abad, tapi juga telah beralih ke penataan huruf elektronik, tanpa ada perubahan apapun. Ia mulai dipopulerkan pada tahun 1960 dengan diluncurkannya lembaran-lembaran Letraset yang menggunakan kalimat-kalimat dari Lorem Ipsum, dan seiring munculnya perangkat lunak Desktop Publishing seperti Aldus PageMaker juga memiliki versi Lorem Ipsum.</p>
    <p>Tidak seperti anggapan banyak orang, Lorem Ipsum bukanlah teks-teks yang diacak. Ia berakar dari sebuah naskah sastra latin klasik dari era 45 sebelum masehi, hingga bisa dipastikan usianya telah mencapai lebih dari 2000 tahun. Richard McClintock, seorang professor Bahasa Latin dari Hampden-Sidney College di Virginia, mencoba mencari makna salah satu kata latin yang dianggap paling tidak jelas, yakni consectetur, yang diambil dari salah satu bagian Lorem Ipsum. Setelah ia mencari maknanya di di literatur klasik, ia mendapatkan sebuah sumber yang tidak bisa diragukan. Lorem Ipsum berasal dari bagian 1.10.32 dan 1.10.33 dari naskah "de Finibus Bonorum et Malorum" (Sisi Ekstrim dari Kebaikan dan Kejahatan) karya Cicero, yang ditulis pada tahun 45 sebelum masehi. BUku ini adalah risalah dari teori etika yang sangat terkenal pada masa Renaissance. Baris pertama dari Lorem Ipsum, "Lorem ipsum dolor sit amet..", berasal dari sebuah baris di bagian 1.10.32.</p>
</div>

Sekian, terimakasih atas kunjungannya.

Salam,

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

Jenis-Jenis Pointer

Jenis-Jenis pointer:

<!DOCTYPE html>
<html>
<body>
<p>Mouse over the words to change the cursor.</p>
<span style="cursor:auto">auto</span><br>
<span style="cursor:crosshair">crosshair</span><br>
<span style="cursor:default">default</span><br>
<span style="cursor:e-resize">e-resize</span><br>
<span style="cursor:grab">grab</span><br>
<span style="cursor:help">help</span><br>
<span style="cursor:move">move</span><br>
<span style="cursor:n-resize">n-resize</span><br>
<span style="cursor:ne-resize">ne-resize</span><br>
<span style="cursor:nw-resize">nw-resize</span><br>
<span style="cursor:pointer">pointer</span><br>
<span style="cursor:progress">progress</span><br>
<span style="cursor:s-resize">s-resize</span><br>
<span style="cursor:se-resize">se-resize</span><br>
<span style="cursor:sw-resize">sw-resize</span><br>
<span style="cursor:text">text</span><br>
<span style="cursor:w-resize">w-resize</span><br>
<span style="cursor:wait">wait</span><br>
<span style="cursor:not-allowed">not-allowed</span><br>
<span style="cursor:no-drop">no-drop</span><br>
<span style="cursor:cursor:url(uri)">no-drop</span><br>
</body>
</html>

Sekian, terimakasih atas kunjungannya.

Salam,

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

Beberapa Link Membuat Animasi dengan CSS

Banyak sekali cara membuat animasi dengan menggunakan css, berikut beberapa referensi yang bisa kamu lihat:

• http://www.nyekrip.com/nyekrip-yuk/index.php?fdata=skrip-cara-membuat-animasi-dengan-css-3-dasar
• to be continue...

Sekian, terimakasih atas kunjungannya.

Salam,

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

Thead Fixed Position - 2

<style type="text/css">
    h1,h2,h3,h4,h5,h6{line-height: 1;}

    .clearHeader{
        display: none;
    }
    .darkHeader {
        height: 30px;
        background-color: #fff;
        position: fixed;
        top:50px;
        width: 94%;
        box-shadow: 0 8px 4px -2px #888888;
        -moz-box-shadow: 0 8px 4px -2px #888888;
        -webkit-box-shadow: 0 8px 4px -2px #888888;
    }
    .wrapper {
        height:auto;
    }
</style>
<script type="text/javascript">
    function printDiv(elementId) {
        var a = document.getElementById('printing-oop').value;
        var b = document.getElementById(elementId).innerHTML;
        window.frames["print_frame"].document.body.innerHTML = '<style>' + a + '</style>' + b;
        window.frames["print_frame"].window.focus();
        window.frames["print_frame"].window.print();
    }
</script>
<div id="print-area">

    <div class="table-responsive">
        <div class="clearHeader">
            <table id="maintable" width="100%" class="table table-hover table-bordered" border="1" style="font-size:11px;" cellpadding="2" cellspacing="0">
                <thead style="font-weight: bold; font-size: 11px">
                    <tr>
                        <th id="no" width="3%" style="text-align: center; vertical-align: middle;font-size:11px;">No</th>
                        <th id="prog" width="38%" style="text-align: center; vertical-align: middle;font-size:11px;">NAMA PROGRAM DAN KEGIATAN</th>
                        <th id="ang" width="17%" style="text-align: center; vertical-align: middle;font-size:11px;">ANGGARAN (Rp.)</th>
                        <th id="kel" width="25%" style="text-align: center; vertical-align: middle;font-size:11px;">KELUARAN KEGIATAN</th>
                        <th id="vol" width="10%" style="text-align: center; vertical-align: middle;font-size:11px;">VOLUME</th>
                        <th id="ket" width="7%" style="text-align: center; vertical-align: middle;font-size:11px;">KET</th>
                    </tr>
                </thead>
            </table>
        </div>
        <div class="wrapper">
            <p style="font-size:15px;"><b>IV. Program dan Kegiatan yang dilaksanakan Tahun Anggaran <?php echo $tahun ?> :</b></p>
            <table id="maintable" width="100%" class="" border="1" style="" cellpadding="2" cellspacing="0">
                <thead style="">
                    <tr>
                        <th id="no" width="3%" style="">No</th>
                        <th id="prog" width="38%" style="">NAMA PROGRAM DAN KEGIATAN</th>
                        <th id="ang" width="17%" style="">ANGGARAN (Rp.)</th>
                        <th id="kel" width="25%" style="">KELUARAN KEGIATAN</th>
                        <th id="vol" width="10%" style="">VOLUME</th>
                        <th id="ket" width="7%" style="">KET</th>
                    </tr>
                </thead>
                <tbody id="content">
                </tbody>
            </table>
        </div>
    </div>
    <textarea id="printing-oop" style="display:none;">
    @media print {
        @page {size: legal portrait; margin-left: 2.25cm; margin-bottom: 5cm; margin-top: 2cm; margin-right: 2cm}
        table{
            line-height: 20px;
        }
        .table {
            border-collapse: collapse !important;
        }
        .table td,
        .table th {
            background-color: #fff !important;
        }
        .table td,
        .table th {
            border: 1px solid #000 !important;
        }
        .clearHeader{
            display: none;
        }
    }
    </textarea>
    <iframe id="printing-frame" name="print_frame" src="about:blank" style="display:none;"></iframe>
    <script src="js/jquery-1.11.0.js"></script>
    <script type="text/javascript">
    $(function () {
        var header = $(".clearHeader");
        $(window).scroll(function () {
            var scroll = $(window).scrollTop();

            if (scroll >= 150) {
                header.removeClass('clearHeader').addClass("darkHeader");
            } else {
                header.removeClass("darkHeader").addClass('clearHeader');
            }
        });
    });
    </script>

</div>

Sekian, terimakasih atas kunjungannya.

Salam,

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

Remove Karakter di dalam String Menggunakan preg_replace

Remove karakter atau style di dalam html/string.

Berikut cara meremove style di dalam string menggunakan preg_replace:
function remove_style($text) {
        $string = preg_replace('#(<[a-z ]*)(style=("|\')(.*?)("|\'))([a-z ]*>)#', '\\1\\6', $text);
        return $string;
}


Berikut cara meremove tag span di dalam string menggunakan preg_replace:
function remove_span_tag($text) {
        $string = preg_replace('/<span[^>]+\>/i', '', $text);
        return $string;
}


Berikut cara meremove space di dalam string menggunakan preg_replace:
function remove_space_tag($text) {
        $string = preg_replace("/\s|&nbsp;/",' ',$text);
        return $string;
}


Berikut cara meremove semua tags html dengan php:
$string = strip_tags($text);
return $string;

Berikut cara meremove semua tags html dengan regex:
$val = preg_replace('/<[^<]+?>/g', ' ', $text);
$businessDesc = substr(val,0,110);

Sekian, terimakasih atas kunjungannya.

Salam,

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