Terkait tulisan sebelumnya, ada beberapa pertanyaan masuk mengenai cara menggunakan template SB Admin yang saya pakai di demo postingan tersebut. Ok berhubung lagi mood nulis, kita akan bahas cara memecah template HTML untuk web dinamis, entah itu template SB Admin, Admin LTE, Smart Admin, pokoknya semua template HTML bisa digunakan dengan teknik ini.

Untuk memudahkan pemahaman, kita akan menggunakan salah satu template sederhana dari Bootstrap sebagai kelinci percobaan. Saya asumsikan kompie/ lapie manteman sudah ter-install Xampp, text editor,  familiar dengan folder htdocs/ www dan sejenisnya. Selanjutnya silakan buat folder baru di dalam folder htdocs (untuk non xampp silakan menyesuaikan), beri nama “pecah” atau nama lain sesuai keinginan. Ready? Ok kita mulai.

 

  1. Download Bootstrap

    Silakan download Bootstrap 4 di sini, kemudian extract di folder “pecah”. Hasil extract memunculkan dua folder baru yaitu “css” dan “js”.

  2. Copy Template

    Kita akan menggunakan “Off Canvas”, template contoh dari Bootstrap.

    • Klik di sini untuk melihat template
    • Selanjutnya press Ctrl+u pada keyboard untuk melihat source code template
    • Ctrl+a kemudia Ctrl+c untuk meng-copy seluruh source code tersebut
    • Buat file baru persis di dalam folder “pecah”, beri nama index.html, dan paste source code tadi
    • Buat folder baru dengan nama “view” di dalam folder “pecah”, sehingga kedudukan folder “view” sejajar dengan “css” dan “js”

    Struktur File dan Folder - Pecah Template

  3. Membagi Layout

    Sekarang kita coba perhatikan front-end Off Canvas ini. Dapat dilihat di sana ada top menu, kemudian left menu atau sidebar, main content, dan footer.

    Layout - Pecah Template

    Dengan demikian kita sudah memiliki clue untuk tiap-tiap bagian, seperti top menu, ada tulisan “Navbar” dan diakhiri dengan “Search”. Kemudian sidebar yang berisikan “Link” dst. Di main content terdapat “Hello World” dan “Heading”, hingga copyright yang ada di bagian footer. Clue ini akan kita jadikan acuan untuk memecah template menjadi empat bagian.

  4. Mulai Potong Memotong

    Sebelumnya silakan buat file header.php, topmenu.php, sidebar.php, main.php, dan footer.php dan letakkan di dalam folder “view”. Kode yang dipotong dari index.html nantinya akan di-paste ke setiap halaman tadi sesuai bagiannya. 

    Bagian2 Halaman - Pecah Template

Berikut adalah code index.html yang akan menjadi acuan kita dalam memotong template.

 

 

Baris 1 s.d 19 kita copy dan paste di header.php.

 

Selanjutnya di baris 21 kita melihat tag nav yang tag penutupnya ada di baris 52, kemudian di baris 49 terdapat tag button dengan text “Search”, sehingga bisa dipastikan mereka adalah rombongan top menu. Langsung saja blok dari baris 21 s.d 52, copy dan paste ke topmenu.php

 

Next dari baris 54 s.d 98 nampaknya ini rombongan main content. So langsung hajar copy n paste ke main.php

 

Di baris selanjutnya yaitu baris 100 s.d 113 merupakan paketan sidebar. Copy n paste ke sidebar.php

 

Baris selanjutnya sampai mentok kita deklarasikan sebagai footer. Copy n paste ke footer.php

 

Ok, selesai sudah tahap potong memotong template HTML ini. Sekarang kita akan menyatukan halaman ini ke dalam satu halaman index.php. Silakan kosongkan index.html kemudian rename menjadi index.php. Selanjutnya kita akan meng-include-kan halaman-halaman tadi ke index.php sesuai urutan pemecahannya.

 

Terakhir, teman-teman bisa menyesuaikan path file css dan jquery-nya dengan file local yang ada di folder “css” dan “js”. Setelah itu jalankan di browser. Bagaimana hasilnya? Sama saja? Tentu, karena kita belum membuat konten yang bersifat dinamis, yang InsyaAllah akan dibahas pada postingan selanjutnya.