Cara Membuat Daftar Isi atau Table Of Contents Menggunakan Script PHP

DailyBlog.id - Pernahkah kalian semua disaat membaca laporan di Word atau membaca artikel di sebuah website lalu melihat terdapat Daftar Isi atau sering disebut juga dengan Table of Contents? pasti pernah kan. Nah, daftar isi atau Table of Contents ini berisikan bab dan sub-bab yang ada pada halaman, baik itu halaman pada laporan di Word atau pun pada halaman artikel di web. Dan daftar isi ini mempermudah kita juga dalam melihat bagian-bagian halaman yang ingin kita lihat / yang ingin kita ketahui. Jadi kita tidak perlu lagi untuk mencari satu-persatu di laporan atau artikel tersebut, hanya melihat dari Daftar isi atau Table of Contents tersebut, lalu kita bisa melihat bagian yang ingin kita langsung buka nantinya. Jadi, dengan daftar isi ini kita sangat dibantu.

Dan disini saya akan memberikan tutorial pada kalian semua untuk membuat Daftar Isi atau Table of Contents menggunakan Script PHP tentunya, jadi nantinya website kalian bisa mempunyai Daftar Isi atau Table of Contents secara otomatis, tanpa harus membuat secara manual. Dan seperti biasanya, kalian hanya mengcopas script php yang ada dibawah ini nantinya, dan ikuti langkah-langkah yang sudah saya berikan nantinya. Oke, langsung saja.. berikut ini langkah-langkahnya:

Cara Membuat Daftar Isi atau Table of Contents Menggunakan PHP

1. Langkah pertama, kalian bisa menggunakan Xampp untuk tempat mencoba atau yang sejenisnya. atau kalian juga bisa mencobanya secara langsung di website kalian. Jika kalian menggunakan Xampp atau sejenisnya pastikan sudah aktif, untuk apachenya.

2. Jika sudah, kalian bisa membuat file baru dengan nama daftar_isi.php , pastikan ekstensinya yaitu .php. Jika sudah membuat filenya, kalian bisa copas script php yang sudah saya buat dibawah ini:

<?php

function DaftarIsi($html)
{
    preg_match_all("/(<h([0-6]{1})[^<>]*>)([^<>]+)(<\/h[0-6]{1}>)/", $html, $matches, PREG_SET_ORDER);

    $konten = '';
    if (count($matches) > 0)
    {
        $daftarisi = '';
        foreach ($matches as $i => $val)
        {
            $i++;
            $tag[$i]    = $val[1].$val[3].$val[4];
            $buat_id    = strtolower(preg_replace('/[^A-Za-z0-9-]+/', '-', $val[3]));
            $baru[$i]   = '<h'.$val[2].' id="'.$buat_id.'"<'.$val[3].$val[4];
            $daftarisi .= '
            <span class="h'.$val[2].'">
                '.($val[2] > 2 ? '•' : '').' <a href="#'.$buat_id.'" >'.$val[3].'</a>
            </span>';
        }

        $konten = '
        <div class="daftarisi">
            <div class="konten">
                <div class="title">Daftar isi</div>
                '.$daftarisi.'
            </div>
        </div>';

        $html = str_replace($tag, $baru, $html);
    }

    return str_replace('{{daftar:isi}}', $konten, $html);
}

echo DaftarIsi(file_get_contents('konten.html'));

?>


3. Jika sudah, kalian bisa membuat file baru lagi dengan nama konten.html , pastikan file yang dibuat satu folder dengan file daftar_isi.php. Dan isi dari file konten.html yaitu:

<!DOCTYPE html>
<html lang="id">
    <head>
        <title>Uji Coba Daftar Isi</title>

        <style type="text/css">
            .daftarisi {margin: 10px 2px}
            .daftarisi .konten {padding: 15px;background: #f0f0f0;display:inline-block;border: 1px solid #ccc;width: 250px;}
            .daftarisi a {text-decoration: none;color: #5472b3}
            .daftarisi span {display: block;margin: 8px 0;}
            .daftarisi .title {font-size: 18px;font-weight: bold;margin-bottom: 10px}
            .daftarisi .h3 {margin-left: 1em}
            .daftarisi .h4 {margin-left: 2.2em}
            .daftarisi .h5 {margin-left: 3.5em}
            .daftarisi .h6 {margin-left: 4.8em}
        </style>
    </head>

    <body>
        {{daftar:isi}}

        Dibawah ini merupakan heading yang dipasang:<br/>

        <h1>Ini adalah heading h1</h1>
        <h2>Ini adalah heading h2</h2>
        <h3>Ini adalah heading h3</h3>
        <h4>Ini adalah heading h4</h4>
        <h5>Ini adalah heading h5</h5>
        <h6>Ini adalah heading h6</h6>
        <h6>Ini adalah heading h6</h6>

        <h2>Heading 2</h2>
    </body>
</html>


4. Jika sudah semuanya, kalian bisa membuka URL http://urlkalian/daftar_isi.php (contoh saja) . Dan hasilnya akan seperti ini:


Cara Membuat Daftar Isi atau Table Of Contents Menggunakan Script PHP


5. Selesai, Daftar isi atau Table of Contents sudah berhasil dibuat. Kalian bisa menggunakan fungsi DaftarIsi untuk membuat daftar isi secara otomatis, dimana setiap kali kalian memasang html heading, maka dari fungsi tersebut akan mendeteksi secara otomatis dan membuat daftar isi secara otomatis, tanpa kalian harus membuatnya secara manual.

Nah, gimana? mudah kan, cukup memanggil fungsi DaftarIsi, kalian bisa membuat Daftar isi atau Table of Contents secara otomatis, tanpa harus membuatnya secara manual, dan di daftar isi tersebut, jika kalian klik linknya, maka secara otomatis juga, akan mengarah kebagian yang kalian klik tersebut. Seperti biasanya, saya mengucapkan semoga artikel yang saya buat ini dapat bermanfaat bagi kalian yang membacanya atau mencobanya, dan jika ada salah kata, mohon maaf. Sekian dan terima kasih...

Selamat mencoba!

Previous Post Next Post