Membuat Table of Content Otomatis dengan Javascript - Code Pelajar


Membuat Table of Content Otomatis dengan Javascript

Code Pelajar - Assalamualaikum sobat Code Pelajar, pada kesempatan kali ini saya membuat script table content otomatis dengan javascript. Caranya gampang-gampang susah tapi kalau kita ingin belajar caranya pasti bisa kok. berikut demo hasil jadinya disini (ini hanya contoh)



"Gan ini bisa di blogger?", "Gan di wordpress gimana?", "Apaa di wordpress tinggal install pluggin beres". Saya tidak tahu menahu tentang pertanyaan seperti itu, yang jelas ini bisa di semua karena dibangun dengan HTML, CSS, dan Javascript tinggal tergantu sobat saja mengasah cara implementasinya. Bukan untuk keren-kerenan atau gaya-gayaan, tapi untuk berkarya dan menuangkan hasrat ngoding saja. Coba klik iklan dibawah ini.



Oke tanpa berlama-lama mari kita bersenang-senang membuat trik auto table content ini. Namun sebelumnya kamu bisa melihat koding jadinya di Code Pen yang sudah saya buat disini. Jika sobat sudah merasa kebingungan bagaimana script ini bekerja, selamat anda perlu belajar lagi. Tapi jangan khawatir. Pada tutorial kali ini saya akan memandu sampai bagaimana hasilnya bisa sekeren pada demo diatas. Inspirasi saya membuat ini ketika saya melihat pengaturan profil di setting Pinterest (silahkan cek sendiri).


Pada tutorial yang saya berikan ini, saya harap kalian sudah bisa menguasai HTML, CSS, Javascript, jQuery, Fundamental dan logika. Jika belum sampai situ belajarlah di w3school atau penyedia online lainnya via Google dan Youtube.


Langkah Awal Sebelum Berkarya dan Bermain Koding

Baikah, saya tidak akan memerintah kalian untuk menginplementasikannya di CMS (Blogger/Wordpress). Karena kali ini kita hanya memerlukan 1 file html saja. Buat 1 file html baru dengan nama "automatic-table-content-by-codepelar.html" (kalau kepanjangan kasih nama index.html aja lah).



Membuat Struktur Dummy HTML

Sebagai tester saja kita buat struktur HTML sesederhana mungkin agar mempersingkat waktu. Dalam hal ini kita hanya membuat 2 saja yaitu sidebar dan main content. Struktur kode HTML untuk awalnya kita buat misalnya seperti berikut ini:


<!DOCTYPE html>
<html>
<head>
    <title>Automatic Table Content by Code Pelajar</title>
</head>
<body>
    <div id='table-content'></div>
    <div class='container'>
        <div class='content-row'>
            <div class='content-left'>
                <div class='sticky-sidebar'>
                    
                </div>
            </div>
            <div class='content-right'>
                <div class='content-article'>
                    
                </div>
            </div>
        </div>
    </div>
</body>
</html>

Pada struktur diatas tentu saja tidak akan menghasilkan apapa karena kita belum mengisi kontennya. Maka langkah selanjutnya adalah menambahkan table content juga dummy artikelnya.


HTML untuk Table Content

Taruh kode berikut dalam tag div dengan class sticky-sidebar


<div class='table-content'>
    <h4>Table of Content</h4>
    <ul id='table-show'></ul>
</div>


HTML untuk Dummy Article

Saya juga menyiapkan dummy untuk artikelnya yang sudah saya sisipkan 6 Judul dengan tag title <h2>. Masukan kode berikut ini kedalam tag div dengan class content-article


<h2>Chapter 1: Permulaan</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mauris lacus, vehicula non placerat et, condimentum ut nibh. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla tortor leo, sollicitudin eleifend arcu non, tincidunt volutpat sem. Nullam hendrerit ipsum porta, vestibulum libero nec, vulputate libero. Quisque venenatis faucibus tincidunt. Curabitur molestie ligula non imperdiet luctus. Nam condimentum dictum mi in facilisis. Curabitur vitae rutrum arcu, et euismod arcu.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mauris lacus, vehicula non placerat et, condimentum ut nibh. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla tortor leo, sollicitudin eleifend arcu non, tincidunt volutpat sem. Nullam hendrerit ipsum porta, vestibulum libero nec, vulputate libero. Quisque venenatis faucibus tincidunt. Curabitur molestie ligula non imperdiet luctus. Nam condimentum dictum mi in facilisis. Curabitur vitae rutrum arcu, et euismod arcu.</p>
<h2>Chapter 2: Misi</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mauris lacus, vehicula non placerat et, condimentum ut nibh. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla tortor leo, sollicitudin eleifend arcu non, tincidunt volutpat sem. Nullam hendrerit ipsum porta, vestibulum libero nec, vulputate libero. Quisque venenatis faucibus tincidunt. Curabitur molestie ligula non imperdiet luctus. Nam condimentum dictum mi in facilisis. Curabitur vitae rutrum arcu, et euismod arcu.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mauris lacus, vehicula non placerat et, condimentum ut nibh. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla tortor leo, sollicitudin eleifend arcu non, tincidunt volutpat sem. Nullam hendrerit ipsum porta, vestibulum libero nec, vulputate libero. Quisque venenatis faucibus tincidunt. Curabitur molestie ligula non imperdiet luctus. Nam condimentum dictum mi in facilisis. Curabitur vitae rutrum arcu, et euismod arcu.</p>
<h2>Chapter 3: Tanggung Jawab</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mauris lacus, vehicula non placerat et, condimentum ut nibh. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla tortor leo, sollicitudin eleifend arcu non, tincidunt volutpat sem. Nullam hendrerit ipsum porta, vestibulum libero nec, vulputate libero. Quisque venenatis faucibus tincidunt. Curabitur molestie ligula non imperdiet luctus. Nam condimentum dictum mi in facilisis. Curabitur vitae rutrum arcu, et euismod arcu.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mauris lacus, vehicula non placerat et, condimentum ut nibh. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla tortor leo, sollicitudin eleifend arcu non, tincidunt volutpat sem. Nullam hendrerit ipsum porta, vestibulum libero nec, vulputate libero. Quisque venenatis faucibus tincidunt. Curabitur molestie ligula non imperdiet luctus. Nam condimentum dictum mi in facilisis. Curabitur vitae rutrum arcu, et euismod arcu.</p>
<h2>Chapter 4: Rendah Hati</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mauris lacus, vehicula non placerat et, condimentum ut nibh. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla tortor leo, sollicitudin eleifend arcu non, tincidunt volutpat sem. Nullam hendrerit ipsum porta, vestibulum libero nec, vulputate libero. Quisque venenatis faucibus tincidunt. Curabitur molestie ligula non imperdiet luctus. Nam condimentum dictum mi in facilisis. Curabitur vitae rutrum arcu, et euismod arcu.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mauris lacus, vehicula non placerat et, condimentum ut nibh. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla tortor leo, sollicitudin eleifend arcu non, tincidunt volutpat sem. Nullam hendrerit ipsum porta, vestibulum libero nec, vulputate libero. Quisque venenatis faucibus tincidunt. Curabitur molestie ligula non imperdiet luctus. Nam condimentum dictum mi in facilisis. Curabitur vitae rutrum arcu, et euismod arcu.</p>
<h2>Chapter 5: Amarah</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mauris lacus, vehicula non placerat et, condimentum ut nibh. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla tortor leo, sollicitudin eleifend arcu non, tincidunt volutpat sem. Nullam hendrerit ipsum porta, vestibulum libero nec, vulputate libero. Quisque venenatis faucibus tincidunt. Curabitur molestie ligula non imperdiet luctus. Nam condimentum dictum mi in facilisis. Curabitur vitae rutrum arcu, et euismod arcu.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mauris lacus, vehicula non placerat et, condimentum ut nibh. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla tortor leo, sollicitudin eleifend arcu non, tincidunt volutpat sem. Nullam hendrerit ipsum porta, vestibulum libero nec, vulputate libero. Quisque venenatis faucibus tincidunt. Curabitur molestie ligula non imperdiet luctus. Nam condimentum dictum mi in facilisis. Curabitur vitae rutrum arcu, et euismod arcu.</p>
<h2>Chapter 6: Kasih Sayang</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mauris lacus, vehicula non placerat et, condimentum ut nibh. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla tortor leo, sollicitudin eleifend arcu non, tincidunt volutpat sem. Nullam hendrerit ipsum porta, vestibulum libero nec, vulputate libero. Quisque venenatis faucibus tincidunt. Curabitur molestie ligula non imperdiet luctus. Nam condimentum dictum mi in facilisis. Curabitur vitae rutrum arcu, et euismod arcu.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mauris lacus, vehicula non placerat et, condimentum ut nibh. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla tortor leo, sollicitudin eleifend arcu non, tincidunt volutpat sem. Nullam hendrerit ipsum porta, vestibulum libero nec, vulputate libero. Quisque venenatis faucibus tincidunt. Curabitur molestie ligula non imperdiet luctus. Nam condimentum dictum mi in facilisis. Curabitur vitae rutrum arcu, et euismod arcu.</p>

Untuk setiap paragrap dan judulnya bebas mau diganti sama apapun yang jelas setiap judul wajib menggunakan tag <h2>


Merapihkan Struktur dengan CSS

Mari kita lihat sementara hasil jadinya di bawah ini:


Membuat Table of Content Otomatis dengan Javascript

Ternyata masih acak-acakan hehe... oke kita rapihkan dengan css. Oh ya untuk sidebarnya saya ingin membuatnya menjadi melayang atau stiky juga. Kita tambahkan kode css berikut ini:


/* CSS RESET */
* {
  margin:0;
  padding:0;
  box-sizing:border-box;
}
body {
  background-color:#efefef
}
h2 {
  line-height:32px;
  margin-bottom:14px;
  padding-top:24px;
}
p {
  line-height:1.8;
  margin-bottom:14px;
}
/* Global */
.container {
  max-width:700px;
  margin:40px auto 40px auto;
  padding:14px;
}
.content-row {
  display:flex;
  flex-wrap:wrap;
  width:100%;
}
.content-left {
  width:30%;
}
.content-right{
  width:70%;
  padding-left:14px;
}
/* Sidebar */
.sticky-sidebar {
  position:sticky;
  top:14px;
  width:100%;
}
/* Artilce */
.content-article{
  position:relative;
  width:100%;
  background-color:#fff;
  padding:14px;
}

/* Table Content */
.table-content {
  padding:14px;
  width:100%;
  position:relative;
  background-color:#fff;
  line-height:1.8;
}
.table-content li a {
  text-decoration:none;
  color:rgba(0,0,0,0.8);
  font-weight:bold;
  transition:.1s;
}
.table-content li a.active {
  color:red;
}
#table-show {
  list-style:none;
}

Kalian bebas mau memodifikasinya bagaimanapun yang penting hasilnya rapih saja. Untuk penempatan css juga terserah mau inline kek mau outline atau di file baru di include menggunakan tag link itu terserah anda. gimana enaknya saja. Kalau kamu mengikuti tutorial saya maka tampilannya akan seperti berikut ini.



Membuat Table of Content Otomatis dengan Javascript

Membuat Script Auto Table of Content

Sip, sudah rapih dan sidebarnya juga sudah dalam posisi sticky. Kita bisa melihatnya di sidebar kalau "Table of Contentnya masih kosong". Oleh karena ini kita mulai scripting menggunakan Javascript dibantu jQuery. Karena ini menggunakan jQuery, maka kita tambahkan dulu jquerynya via CDN dan taruh di dalam tag <head> saja.


Dalam Hal saya sudah membuat scriptnya yang ada di Codepen dengan 3 fungsi yang akan di panggil yaitu getAndSet, smootScroll, dan activeCurrentTable. Kenapa saya dibuat fungsi padahal kita bisa langsung tempel di document ready? Tujuannya agar rapih. Ngoding yang baik itu bukan seberapa singkat dan mahir kamu bisa ngoding, tapi seberapa kamu bisa rapih membuat koding sehingga tidak menyulitkan untuk dibaca, maka dari itu saya klasifikasikan kedalam 3 fungsi saja. Kalau kamu bekerja dalam sebuah project di perusahaan IT dan bekerja secara tim, maka kamu harus membuat kode serapih mungkin agar tidak menyulitkan tim kamu. Intinya jangan bar-bar atau asal copas klo dari google (malah ngebacot si Admin).



Baiklah kita berikut ini kode javascript yang saya buat tadi:


// variable data penampung
var ttlnum = 0;
var ttlarr = [];
var ttlhash = [];
var ttllok = [];
var html = "";

function getAndSet() {
    
    //kita ambil data untuk lis tabel kontenya dari berapa banyak jumblah tag H2
    $('.content-article h2').each(function () {
        ttlnum++

        //membuat id dengan kombinasi nilai string "title" + numerik++
        $(this).attr('id', 'title-' + ttlnum);

        // data di push atau dimasukan ke array
        ttlarr.push($(this).text());
        ttlhash.push($(this).attr('id'))
    });

    //kita set datanya dengan menjalankan looping
    for (var i = 0; i < ttlarr.length; i++) {
        html += "<li data-id='" + ttlhash[i] + "'><a href='#" + ttlhash[i] + "'>" + ttlarr[i] + "</a></li>";
        
        //mengambil nilai offset top dan memasukan datanya ke array untuk dipakai di fungsi activeCurrentTable
        hash_offset_top = $("#" + ttlhash[i]).offset().top
        ttllok.push(hash_offset_top)
    }

    //html di appending juga untuk list pertama tag a diberi class active
    $('#table-show').append(html);
    $('#table-show li:first-child a').addClass('active')
}

function smoothScroll() {

    // smooth scrolling ini diambil dari w3school dengan sedikit modifikasi
    // ketika di klik tag a / linknya maka mencari link dengan hash sesuai judul tadi
    $("#table-show a").on('click', function (event) {
        if (this.hash !== "") {
            event.preventDefault();
            $(this).addClass('active').parents().siblings().find('a').removeClass('active');
            var hash = this.hash;

            //layar akan melakukan scrolling dengan animasi, saya menggunakan animate karena di firefox offset().top tidak kompatibel
            $('html, body').animate({
                scrollTop: $(hash).offset().top
            }, 300, function () {
                window.location.hash = hash;
            });
        }
    });
}

function activeCurrentTable() {
    //ketika layar discroll maka list table content akan berpindah yang aktifnya sesuai lokasi judul
    $(window).on('scroll', function () {
        for (var i = 0; i < ttllok.length; i++) {
            if ($(window).scrollTop() >= ttllok[i]) {
                $('[data-id="' + ttlhash[i] + '"]').find('a').addClass('active').parents().siblings().find('a').removeClass('active')
            }
        }
    })
}

//semua fungsi dipanggil saat document ready / sudah diload semua
$(document).ready(function () {
    getAndSet()
    smoothScroll()
    activeCurrentTable()
})


Tara...!!! tabel konten otomatis pun sudah jadi, kamu boleh mengetes dengan mengubah teks pada judul. Namun harus di ingat, judul harus menggunakan title tag <h2>. Jika kamu tidak ingin menggunakan h2 kamu bisa mengubah kode $('.content-article h2') menjadi $('.content-article h3') atau $('.content-article h4') itu terserah. kamu bisa melihat demonstrasinya sekali lagi melalui tombol dibawah ini.



Sekian artikel yang saya bisa tulis sekarang, tutorial ini sebagai bahan pembelajaran yang asik bagi kamu yang baru mengenal atau iseng-iseng ingin mencoba belajar javascript. Nantikan tutorial selanjutnya di Code Pelajar. Wassalamulaikum.

Table Of Content

    Contact Form

    Kirim