Belajar membuat website dengan PHP pdo dan MySQL #seri 4# Sistem Templating

Sistem templating adalah sebuah penggabungan dari beberapa kerangka potongan. Dan kerangka potongan tersebut di pisah menjadi beberapa bagian, yaitu bagian header, navbar, konten dinamis dan terakhir bagian bawah yaitu footer.

Dalam pembuatan template website seperti pada worpress maupun blogspot, sistem templating sudah wajib di gunakan. Karena dapat menghemat penulisan yang sama secara berulang-ulang.

Saya pernah membuat artikel sistem templating, tetapi dengan menggunakan framework codeigniter dengan konsep HMVC. Kamu bisa mempelajarinya disini:

Baca : Tutorial codeigniter hmvc sistem templaing

Ada beberapa poin pokok dalam pembahasan kali ini. Yaitu menulis kode secara utuh, kemudian di pecah dalam beberapa bagian dan menyatukannya dengan cara memanggil bagian tersebut, hingga menjadi template kesatuan yang utuh.

Kalau kita amati mudah bukan membuat sistem templating pada website. Silahkan coba tulis kode di bawah ini. saya akan membahas konsep pemecahan dan penggabungannya saja.

kode utuh kita letakkan pada index.php buat file baru berinama index.php

Kode diatas adalah template keseluruhan. Semua komponen exsternal css dan javascript semuanya bermasis CDN. Jadi pastikan komputer anda terhubung dengan internet. Sekarang coba potong-potong dan masukkan kode tersebut dalam beberapa bagian sistem templating seperti di bawah ini.

Bagian header.php

Bagian header hanya mengambil baris 1 sampai 25 pada kode index.php diatas

Kemudian simpan file header diatas. jangan lupa untuk memasukkannya kedalam folder template jika belum ada silahkan buat terlebih dahulu folder template di dalam folder nama webkita yaitu bimbelnf

Bagian navbar.php

Bagian navbar hanya mengambil baris 26 sampai 60 pada kode index.php diatas

Simpan juga didalam folder template

Bagian footer.php

Kemudian yang terakhir yaitu footer. Footer akan mengambil baris 65 sampai 89 pada kode index.php diatas

Bagian footer terdapat komponen external javascript yang nantinya sebagai pendukung pembuatan website ini selanjutnya. Pastikan komputer kamu terhubung ke internet, Karena external javascript juga berbasis CDN. Kemudian ada slot juga untuk menuliskan kode javascript pada bagian bawah. Kenapa saya letakkan pada bagian bawah?.. karena setelah external javascript dari CDN berhasil di panggil, berarti tinggal menjalankan fungsi javascriptnya

Berarti file index.php setelah di potong-potong kedalam beberapa bagian akan menjadi seperti berikut ini :

Dari sini tentu saja tugas kita dalam membuat sistem templating belum selesai akan ada tahapan selanjutnya yaitu penggabungan dari komponen tempating diatas diantaranya yaitu header.php navbar.php dan footer.php

Untuk penggabungannya sekarang buka file index.php dan tuliskan seperti berikut ini:

Naah… selesai. dari gabungan kode index.php gabungan, akan menghasilkan template keseluruhan seperti index.php paling atas.

Selanjutnya di setiap kamu membuat file baru jangan lupa untuk menyisipkan komponen bagian header.php navbar.php

dan bagian bawah yaitu footer.php

Dan selesai…

Oiya… hasilnya silahkan bisa dilihat pada gambar dibawah ini, saya menggunakan bootstrap versi 4 ya..Untuk tambahan menu lebih lengkapnya silahkan bisa kamu kembangkan sendiri. Intinya kamu sudah bisa membuat sistem templating berjalan dengan baik. Ini adalah modal dasar untuk kamu bisa membuat template worpress juga.

#Kesimpulan

Pada intinya artikel sistem templating diatas hanyalah sebuah penggabungan dari komponen kode yang terpisah, agar nantinya kamu tidak usah menulis hal yang serupa secara berulang-ulang pada setiap halaman yang kamu buat. cukup dengan memanggil komponen pecahannya seperti pada inde.php penggabungan, maka seluruh external css dan javascript akan bisa di jalankan.

Semoga artikel ini bermanfaat dan jangan lupa lanjutkan untuk membaca langkah selanjutnya pada seri 5.

You May Also Like

About the Author: admin initekno

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *