Sesaat setelah mendaftarkan domain dan aktif halaman web awal, seringkali kita mendapatkan tampilan default web kita apa adanya yang diberikan oleh penyedia layanan. Maka dari itu kita bisa modifikasi halaman index.php default menjadi desain yang kita inginkan.
Berikut ini salah satu contoh landing page yang dapat kita gunakan:
<?php
// Mengambil protokol (http atau https)
$protocol = (!empty($_SERVER[‘HTTPS’]) && $_SERVER[‘HTTPS’] !== ‘off’ || $_SERVER[‘SERVER_PORT’] == 443) ? “https://” : “http://”;// Mengambil domain / host
$host = $_SERVER[‘HTTP_HOST’];// Mengambil path folder tempat file berada (tanpa nama file index.php)
$dir = rtrim(dirname($_SERVER[‘PHP_SELF’]), ‘/\\’);// Menggabungkan menjadi alamat lengkap folder/domain tempat file berada
$full_url = $protocol . $host . $dir;
?>
<!DOCTYPE html>
<html lang=”id”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>SELAMAT DATANG</title><link rel=”preconnect” href=”https://fonts.googleapis.com”>
<link rel=”preconnect” href=”https://fonts.gstatic.com” crossorigin>
<link href=”https://fonts.googleapis.com/css2?family=Montserrat:wght@500;800;900&display=swap” rel=”stylesheet”><style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}body {
font-family: ‘Montserrat’, sans-serif;
background-color: #0f172a; /* Warna latar belakang gelap elegan */
color: #ffffff;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
overflow: hidden;
}/* Container utama di tengah layar */
.main-container {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
padding: 20px;
}/* Teks Selamat Datang Proporsional */
.welcome-text {
font-size: clamp(2.5rem, 7vw, 5.5rem); /* Responsif */
font-weight: 900;
letter-spacing: 2px;
text-transform: uppercase;
/* Efek animasi kelap-kelip warna */
animation: colorGlow 3s infinite alternate ease-in-out;
}/* Sub-kalimat / Alamat URL Otomatis */
.sub-text {
font-size: clamp(1rem, 2.5vw, 1.8rem);
font-weight: 500;
margin-top: 15px;
color: #e2e8f0;
word-break: break-all;
}.highlight-url {
color: #38bdf8;
font-weight: 800;
text-decoration: underline;
}/* Animasi pergantian warna */
@keyframes colorGlow {
0% {
color: #38bdf8; /* Biru terang */
text-shadow: 0 0 20px rgba(56, 189, 248, 0.6);
}
33% {
color: #f43f5e; /* Merah/Pink menyala */
text-shadow: 0 0 20px rgba(244, 63, 94, 0.6);
}
66% {
color: #a855f7; /* Ungu */
text-shadow: 0 0 20px rgba(168, 85, 247, 0.6);
}
100% {
color: #34d399; /* Hijau Mint */
text-shadow: 0 0 20px rgba(52, 211, 153, 0.6);
}
}/* Bagian Footer */
footer {
padding: 20px;
font-size: 0.9rem;
color: #94a3b8;
letter-spacing: 1px;
}footer a {
color: #94a3b8;
text-decoration: none;
transition: color 0.3s ease;
}footer a:hover {
color: #ffffff;
}
</style>
</head>
<body><main class=”main-container”>
<h1 class=”welcome-text”>SELAMAT DATANG</h1>
<p class=”sub-text”>
Di Halaman Resmi <span class=”highlight-url”><?php echo $full_url; ?></span>
</p>
</main><footer>
<p>© <?php echo date(‘Y’); ?> <a href=”https://bayu3a.com” target=”_blank”>bayu3a.com</a>. All Rights Reserved.</p>
</footer></body>
</html>
Cara Kerja Deteksi Otomatis:
$_SERVER[‘HTTP_HOST’]: Mengambil domain tempat file disimpan (misal: domainanda.com atau localhost).
$_SERVER[‘PHP_SELF’] & dirname(): Mendeteksi folder tempat file diletakkan (misalnya jika diletakkan dalam folder domainanda.com/landing/, maka yang muncul adalah alamat lengkap beserta foldernya).
$full_url: Ditampilkan tepat setelah kalimat “Di Halaman Resmi …”.
Simpan seluruh kode di atas dengan nama file index.php yang ditempatkan pada folder website