Pada kali ini saya akan mencoba membuat sebuah halaman dengan php,html dan css. Jadi saya ingin membuat sebuah halaman yang menggunakan background dinamis berdasarkan input kita nantinya.
Kode yang saya pergunakan adalah kode html yang dulu pernah saya tulis pada artikel saya terdahulu, yaitu artikel mengenai pembuatan fullscreen background.
Karena artikel tersebut ditulis di file HTML, maka untuk merubahnya ke PHP, kita wajib menyimpanya di file dengan ekstension PHP. Namun perlu diingat, File PHP tidak bisa langsung di gunakan di browser. Ia memerlukan software lain untuk menggunakan fungsi PHP nya.
Misalnya untuk windows, kamu perlu menginstall software XAMPP atau WAMPP. Setelah kamu install tersebut, barulah kamu bisa menjalankan file PHP nantinya.
Mungkin nanti saya akan coba buat tutorial mengenai penginstallan dan penggunaan XAMPP ini.
Peralatan yang dibutuhkan & dipersiapkan untuk cara membuat background gambar di PHP ini:
- Wajib menggunakan localserver software seperti XAMPP,WAMPP agar bisa menjalankan file PHP nantinya.
- Siapkan editor HTML,PHP dan CSS nya. Contohnya Dreamweaver atau editor versi gratis Atom , Sublime Text atau bisa juga menggunakan Notepad.
- Siapkan url atau alamat background image / gambar latar belakang yang ingin kamu gunakan. Kamu bisa mencari gambar yang gratis dan berkualitas di situs-situs yang ada di artikel ini.
- Siapkan file PHP yang ingin kamu gunakan. Contoh misal nama filenya index.php
- Siapkan file CSS nya yang akan kamu gunakan nanti. Dan usahakan diletakan di folder berbeda dengan HTML agar lebih rapih. Misal buat folder css dan nama filenya style.css. Namun untuk tutorial ini, saya tidak akan memisahkannya. Agar kamu bisa mengerti dan tidak terlalu bingung.
Langkah-langkah untuk membuat background gambar di PHP:
Buat file dengan nama index.php,lalu masukkan kode yang berasal dari artikel saya sebelumnya seperti ini.
<!DOCTYPE html>
<html>
<head>
<title>Halaman Background</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<style type="text/css">
html,body{height: 100%;}
.bg-utama{
background-image: url(https://placekitten.com/g/1280/720);
background-size: cover;
background-position: center;
text-align: center;
height: 100%;
width: 100%;
display: table;
vertical-align: middle;
}
h1,p{color: white;}
.konten-ditengah {
display: table-cell;
vertical-align: middle;
}
</style>
</head>
<body>
<div class="bg-utama">
<div class="konten-ditengah">
<h1>Ini adalah Judul</h1>
<p>Ini adalah paragraf teks.</p>
</div>
</div>
</body>
</html>
Seperti yang kita lihat diatas, kita masih menggunakan semua kode dengan HTML. Dan saya menggunakan bootstrap untuk framework nya.
Kalau kamu ingin mengetahui penjelasan dari masing-masing kode diatas, kamu bisa cek artikel saya sebelumnya disini untuk memahami maksud-maksud kodenya.
Seperti yang kita lihat diatas, kode ini menggunakan url “https://placekitten.com/g/1280/720” untuk mendapatkan background imagenya. Nah disini saya akan mengganti url tersebut menjadi kode PHP. Sehingga nantinya kita akan mendapatkan background yang dinamis atau berganti-ganti sesuai keingininan kita.
Jadi nanti css untuk background image ini akan saya rubah menjadi seperti ini:
background-image: url(<?php echo $gambar; ?>);
Penjelasannya:
$gambar disini nantinya akan menjadi variabel untuk kode PHP kita. Dimana variabel ini nantinya akan berupa url atau link untuk gambar kita nanti.
Untuk value dari $gambar ini nantinya ditentukan dari variabel global **$_GET**.
Untuk penjelasan mengenai $_GET ini kamu bisa langsung menchecknya di link ini.
Oleh karena itu, kita perlu menambahkan kode PHP untuk memberi value untuk variable ini dari value $_GET ini. Dan inilah kode yang akan kita tambahkan di paling atas file PHP kita.
$gambar = $_GET['gambar'];
Maksud kode diatas berarti kalau nanti variabel $gambar akan menggunakan value $_GET yang memiliki value url.
Pusing kan maksudnya? Tapi nanti kalau kamu sudah mencobanya berulang-ulang pasti akan paham kok :D
Oke kalau kamu sudah memasukan semua kode diatas, nantinya file PHP kita akan berisi kode seperti ini:
<?php
$gambar = $_GET['url'];
?>
<!DOCTYPE html>
<html>
<head>
<title>Halaman Background</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<style type="text/css">
html,body{height: 100%;}
.bg-utama{
background-image: url(<?php echo $gambar; ?>);
background-size: cover;
background-position: center;
text-align: center;
height: 100%;
width: 100%;
display: table;
vertical-align: middle;
}
h1,p{color: white;}
.konten-ditengah {
display: table-cell;
vertical-align: middle;
}
</style>
</head>
<body>
<div class="bg-utama">
<div class="konten-ditengah">
<h1>Ini adalah Judul</h1>
<p>Ini adalah paragraf teks.</p>
</div>
</div>
</body>
</html>
Setelah kamu copy dan paste ke file kamu, coba jalankan file atau alamat file tersebut di browser. Misalnya (apabila kamu sudah benar menggunakan localserver) localhost/index.php .
Ketika kamu sudah benar menjalankan localserver dan menggunakan alamat yang benar untuk file tersebut, pasti akan keluar error seperti ini
Notice: Undefined index: url in /tempat-file-kamu/index.php on line 2
Nah untuk memperbaiki error atau kesalahan itu, kamu harus memasukan url atau link gambar yang akan digunakan nantinya di alamat browser.
Contoh: localhost/index.php?url=https://placekitten.com/g/1280/720
Yang musti diperhatikan dari alamat url diatas adalah value ?url=https://placekitten.com/g/1280/720. Value ini berarti kita memerintahkan file PHP kita untuk menangkap value url kita, yang nantinya akan di transfer valuenya melalui $_GET, dan value ini akan di gunakan menjadi value $gambar.
Nah setelah value dari $gambar didapatkan, value tersebut akan di echo pada css kita. Pada baris echo $gambar (didalam css).
Jadi nantinya, setiap kamu memasukan url(untuk background gambar) berbeda untuk value “url” di alamat browser, maka gambar background yang keluar adalah gambar background dari value “url” tersebut.
Misal localhost/index.php?url=https://source.unsplash.com/random
Kalau kode kamu benar dan tidak ada salah, pasti nanti gambar yang keluar akan berbeda dari yang sebelumnya.
Catatan
Kalau misal tehnik memasukan url langsung kedalam alamat browser kurang baik, kamu bisa membuat form sederhana untuk memasukan value $gambar nantinya.
Mungki nanti saya akan coba update artikel ini untuk memasukan form kedalam file PHP ini nantinya.
Nah sekarang kamu coba praktekan untuk membuat sendiri kode tersebut. Cukup mudah kan cara membuat full screen background / latar belakang di HTML dan CSS?
Kalau kamu tertarik untuk belajar PHP, HTML dan CSS ini lebih lanjut, kamu bisa mencoba mengunjungi situs ini.
Disitus itu selain kamu bisa berlangganan kursus-kursus online, kamu juga mendapatkan langganan untuk Digital Asset yang cukup banyak. Mulai dari gambar, musik, video bahkan sampai HTML template juga ada.
Buat kamu yang pengen tau berapa ukuran gambar yang tepat untuk website berlayout full screen, kamu bisa liat disini.
