Melanjutkan postingan sebelumnya, kali ini kita akan menerapkan code PHP untuk membuat konten web menjadi lebih dinamis. Bagi teman-teman yang belum mendapatkan tampilan yang sesuai dengan template aslinya, silakan sesuaikan path file js dan css-nya.

Oh ya untuk jQuery, popper, dan offcanvas bisa di download di sini, sini, dan sini, kemudian letakkan di folder js. Demikian juga untuk offcanvas.css bisa di download di sini, letakkan di folder css. Sehingga struktur folder dan file serta code di header dan footer seperti berikut :

Struktur File n Folder I - Pecah Template II

 

Ok sekarang ceritanya kita menginginkan agar ketika link menu tertentu di klik, maka halaman menu tersebut akan ditampilkan di main content. Kita ambil contoh menu yang ada di topmenu.php.

Untuk memudahkan identifikasi menu, saya akan rename menu pada topmenu.php. Kemudian membuat halaman konten untuk masing-masing menu, dan terakhir memodifikasi main.php sehingga tampilan sesuai dengan konten menu yang dipanggil.

1. Rename Menu pada topmenu.php

Top Menu - Pecah Template II

Perhatikan line 13, 16, 21, dan 22 pada code topmenu.php di atas, selain mengubah nama, kita juga mengubah url tujuan dari menu tersebut dari yang semula # menjadi ?page=menu1 dst. Di url tersebut saya menggunakan “page” sebagai parameter untuk memanggil halaman yang akan ditampilkan. Sehingga jika ?page=halaman1, maka halaman1.php yang akan ditampilkan, dst. Apakah boleh menggunakan nama lain selain “page”? Tentu saja. Teman-teman bebas berkreasi untuk penamaan parameter url ini.

Selanjutnya kita akan membuat variabel PHP di index.php, yang menangkap nilai dari parameter “page” ini dengan $_GET method. Silakan modif index.php sesuai kode berikut :

 

2. Membuat Halaman Konten Masing-masing Menu

Sesuai code di atas, kita akan membuat empat halaman yaitu halaman1.php, halaman2.php, profile.php, dan logout.php. Isinya bebas namun tidak boleh sama. Intinya agar bisa dibedakan mana menu 1, menu 2, profile, dan logout.

Konten Menu - Pecah Template II

3. Modifikasi main.php

Isi halaman utama dimulai dari div class col-12 col-md-9. Silakan hapus semua konten yang ada di dalam div ini dan ganti dengan kode berikut :

 

Perhatikan kode PHP di baris 6 s.d 12. Variabel $page yang kita declare di index.php tadi akan dibaca di halaman ini.  Intinya sih kalo variabel $page-nya ga kosong, include-kan halaman-yang-ditunjuk-di-parameter-page-pada-url, ditambah ekstensi .php, selain itu tampilkan dashboard.php. Oh iya silakan buat dashboard.php masing-masing ya.

Nah sekarang kita sudah memiliki sebuah web dinamis sederhana, teman-teman tinggal melengkapi konten menu sesuai imajinasi fantasi masing-masing huahahahaha…

DOWNLOAD PROJECT

Terima kasih telah berkunjung, please share, rate, comment, follow sosmed kami, karena itu bisa nambah semangat dan membuat kita bahagia…