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:
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!