Membuat Kerangka Dasar HTML
Semua halaman web harus dimulai dengan deklarasi doctype , element root , dan juga element dan . Berikut adalah contoh kerangka dasar dari HTML:
Mulai Buat Halaman Lainnya
Agar website bisa berfungsi dengan baik dan menyediakan fitur yang dibutuhkan pengguna, Anda perlu membuat beberapa halaman penting. Setiap halaman ini akan membantu menghadirkan pengalaman pengguna yang lebih optimal di website Anda.
Di bagian ini, kami akan memandu Anda membuat halaman yang sebaiknya ditambahkan ke website, lengkap dengan contoh kodenya.
Di halaman ini, Anda bisa menambahkan menu navigasi website untuk mengarahkan pengunjung ke halaman lainnya, serta menampilkan deskripsi website.
Anda bisa menyatukan halaman homepage dalam file index.php saja apabila hanya ingin membuat website PHP sederhana. Dengan begitu, saat pengunjung mengakses website Anda, mereka akan langsung diarahkan ke homepage.
Buka file index.php Anda, lalu tambahkan kode HTML berikut ke dalamnya:
Kode di atas menyertakan tag
Kemudian, terdapat tag
Pastikan Anda sudah menyiapkan semua file yang dirujuk di menu navigasi, seperti about.php dan contact.php. Kalau tidak, link di homepage Anda akan mengarah ke halaman kosong atau menampilkan error.
Untuk mempercantik tampilan halaman, tambahkan kode berikut ini ke file style.css di bawah kode pertama tadi:
Berikut tampilannya setelah halaman ini diberi style melalui CSS:
2. Halaman Tentang Saya
Halaman Tentang Saya membantu memberikan sentuhan yang lebih personal pada website. Halaman ini bisa digunakan untuk memperkenalkan diri Anda atau kisah yang menginspirasi Anda membuat website ini.
Siapkan halaman dengan membuat file baru bernama about.php. Tambahkan kode berikut untuk mengisi kontennya:
Selain itu, Anda bisa menambahkan foto diri menggunakan tag agar halaman ini terlihat lebih menarik. Berikut contoh kodenya, yang bisa Anda sisipkan di dalam tag
Pastikan file gambar disimpan di folder proyek website Anda dan dirujuk dengan benar dalam kode. Pada contoh di atas, file gambar kami diletakkan di folder tambahan bernama images, dan diberi nama gambar.jpg.
Kemudian, tambahkan kode CSS berikut ke file style.css di bawah kode sebelumnya untuk mempercantik halaman yang sudah Anda buat:
Tampilannya akan menjadi lebih rapi dan profesional seperti berikut ini:
Anda perlu menyediakan halaman kontak agar pengunjung bisa mendapatkan informasi lebih lanjut untuk menghubungi Anda.
Caranya, buat file baru bernama contact.php dan tambahkan kode berikut:
Formulir ini memiliki tiga kolom input, yaitu nama, email, dan pesan. Setelah itu, sisipkan kode berikut ini ke dalam file style.css Anda untuk mengatur tampilan halaman Kontak:
Halaman Kontak Anda pun akan terlihat lebih menarik dan fungsional setelah diberi stylesheet, seperti berikut ini:
Apabila website Anda menyediakan layanan yang membutuhkan data atau kredensial pengguna, Anda perlu membuat halaman login. Di sini, kami akan membuat formulir login website sederhana yang memproses data pengguna dengan validasi statis.
Mulailah dengan membuat file baru bernama login.php di folder proyek website Anda. Selanjutnya, tambahkan kode berikut ke dalam file tersebut:
Kode ini akan membuat formulir login dengan dua input, yaitu nama pengguna dan kata sandi. Pada contoh ini, kredensialnya adalah admin untuk nama pengguna, dan 1234 untuk kata sandi.
Penting! Harap diperhatikan bahwa validasi statis dalam kode di atas hanyalah contoh untuk memeriksa kecocokan kombinasi nama pengguna dan kata sandi. Metode ini tidak dianjurkan untuk website sungguhan, karena tidak aman.
Untuk mempercantik tampilannya, masukkan kode CSS berikut ke file style.css, setelah kode halaman Kontak tadi:
Setelah pengguna mengklik tombol Login, data formulir akan diproses oleh PHP. Apabila validasi berhasil, pesan Login berhasil akan ditampilkan. Kalau tidak, pengguna akan melihat pesan error tentang login yang gagal.
Dengan menambahkan halaman-halaman ini, website Anda sudah memiliki kerangka dasar yang siap digunakan.
Setelah ini, Anda bisa melengkapi fitur-fitur website dengan mengedit file CSS untuk menyesuaikan tampilannya, menambahkan validasi yang lebih aman, atau menghubungkan website ke database.
Membuat File style.css
Setelah membuat file php, kamu harus melengkapinya dengan menambahkan file CSS.
CSS atau Cascading Style Sheet berfungsi untuk mengatur tampilan elemen yang tertulis dalam bahasa markup seperti HTML.
Tujuan penggunaan CSS adalah agar tampilan dari website semakin menarik.
Membuat file CSS dapat kamu lakukan dengan Klik File > New File Text atau New File, kemudian salin source code berikut :
color: rgb(119, 0, 255);
color: rebeccapurple;
list-style-type: none;
background-color: rgb(13, 207, 143);
font-family: sans-serif;
text-decoration: none;
background-color: rgb(0, 212, 250);
Jika sudah, simpan dengan nama style.css pada folder myphpwebsite.
Mencoba Website pada Browser
Setelah selesai menuliskan keseluruhan file coding yang diperlukan, kamu dapat mulai melakukan pengecekan apakah website kamu sudah dapat diakses atau belum.
Untuk mengeceknya kamu dapat menggunakan XAMPP dengan membuka XAMPP Control Panel yang ada pada folder C: lalu klik Start pada Module Apache dan MySQL.
Setelah itu buka browser dan ketikkan localhost/myphpwebsite. Jika berhasil akan muncul tampilan seperti berikut.
Jika file source code yang kamu buat sudah benar, secara default website akan menampilkan halaman utama atau Home seperti pada gambar di bawah ini.
Skrip tersebut sesuai dengan apa yang sudah ditulis pada file index.php.
Jangan lupa untuk mengecek bagian halaman lain yang sudah kamu buat seperti about dan contact. Jika kamu klik About, kurang lebih tampilannya seperti gambar di bawah ini.
Sedangkan untuk halaman Contact tampilannya akan seperti gambar berikut:
Selamat! Kamu sudah berhasil mengikuti langkah- langkah cara membuat website dengan PHP.
Jika kamu sudah dapat menuliskan HTML dan CSS dengan benar, kamu dapat lebih berkreasi dengan mengubah tampilan header dan footer, menambahkan menu navigasi, mengganti halaman default dan mempercantik halaman website kamu dengan menggunakan CSS.
Jika website mu sudah memiliki banyak traffic, kamu bisa upgrade dari hosting ke VPS
Baca Juga : Cara Mudah Membuat Website Bagi Pemula
Menambahkan CSS ke HTML
Ada tiga cara untuk menambahkan CSS ke halaman HTML, yaitu:
Style CSS ditulis langsung di dalam tag HTML menggunakan atribut ‘style’.
Style CSS ditulis di dalam tag