Pada materi ini saya membagikan latihan membuat template website sederhana menggunakan HTML, CSS, dan PHP. Materi ini merupakan bagian dari pembelajaran pemrograman web yang membahas penyusunan tampilan halaman serta pemisahan komponen website ke dalam beberapa file.
Melalui
latihan ini, kita akan membuat halaman utama website, menu navigasi, sidebar,
dan footer. Selain halaman yang dapat diakses pengunjung, materi juga
memperkenalkan tampilan login dan halaman admin sebagai bagian dari pengelolaan
konten website.
Membuat
Struktur Template Website
Sebelum
mulai membuat tampilan, kita perlu menyiapkan folder proyek pada direktori htdocs
di XAMPP. Dalam modul, proyek disimpan dengan nama design.
Beberapa
file yang digunakan antara lain index.php sebagai halaman utama, header.php
untuk bagian atas website, nav.php untuk menu navigasi, serta sidebar.php dan footer.php
untuk melengkapi struktur halaman.
Pemisahan
file tersebut memudahkan pengelolaan tampilan karena komponen yang digunakan
pada beberapa halaman tidak harus ditulis berulang kali.
Materi
juga membahas penggunaan style.css untuk mengatur warna, ukuran huruf, dan
tampilan menu. Salah satu contoh yang diperkenalkan adalah efek hover,
yaitu perubahan tampilan ketika kursor diarahkan ke elemen tertentu.
Halaman
Admin
Selain
membuat halaman untuk pengunjung, modul ini memperlihatkan contoh halaman login
dan halaman admin. Bagian tersebut digunakan untuk mengenalkan perbedaan antara
tampilan publik dan area pengelolaan website.
Contoh
halaman admin dalam modul merupakan bagian dari latihan desain dan penyusunan
komponen website, bukan sistem autentikasi yang sudah diuji untuk penggunaan
online.
Unduh
Modul Praktikum
Materi
lengkap, termasuk contoh tampilan dan kode yang digunakan dalam latihan,
tersedia dalam file PowerPoint berikut.
Unduh Modul Design Simple
Template
