Informatika • Penelitian • Publikasi Ilmiah • Teknologi
Berbagi pengetahuan dan pengalaman dalam informatika, pengelolaan jurnal ilmiah, perkuliahan, serta pengembangan teknologi.
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
Pada artikel sebelumnya, Design
Simple Template, kita telah membahas pembuatan template website menggunakan
HTML, CSS, dan PHP, mulai dari tampilan halaman utama hingga halaman
administrator.
Materi kali ini melanjutkan
latihan tersebut dengan menghubungkan template ke database MySQL agar website
dapat digunakan untuk mengelola konten dan menyimpan data.
Pengembangan Website dengan PHP dan MySQL
Praktikum dimulai dengan
menyiapkan database design, yang berisi tabel administrator, artikel, dan buku
tamu. Selanjutnya, kita membuat koneksi PHP ke MySQL dan menambahkan fungsi
login administrator.
Melalui halaman admin,
pengguna dapat menambah, mengubah, dan menghapus artikel. Konten yang disimpan
dalam database kemudian ditampilkan pada halaman website.
Materi ini juga mencakup pembuatan formulir pendaftaran mahasiswa. Data pendaftaran disimpan dalam tabel tersendiri, kemudian dapat ditampilkan dan dicari melalui halaman administrator.
Gambar 1. Contoh
tampilan halaman administrator pada latihan Design Web.
Unduh Materi Praktikum
Untuk mengikuti latihan,
tersedia tiga file berikut:
Pelajari modul terlebih
dahulu, kemudian siapkan database dan ikuti tahapan pembuatan program sesuai
petunjuk.
Materi ini disusun menggunakan PHP dan MySQL versi lama. Beberapa fungsi yang digunakan dalam modul, seperti mysql_connect(), sudah tidak didukung pada PHP versi terbaru. Jika ingin menjalankan latihan menggunakan PHP modern, bagian koneksi dan pengolahan database perlu disesuaikan dengan MySQLi atau PDO.
