Modul Website Personal dengan PHP
Native (Responsif)
1. Pendahuluan
Website personal adalah sebuah situs web yang dikelola dan dimiliki oleh individu
untuk tujuan pribadi. Isi dari website ini biasanya mencerminkan identitas, pengalaman,
minat, karya, dan aktivitas pemiliknya. Website personal dapat digunakan sebagai media
untuk membangun personal branding, menyimpan portofolio, berbagi tulisan (blog), atau
menyampaikan informasi kepada publik.
Modul ini menjelaskan cara membuat website personal sederhana menggunakan
PHP Native. Website ini dilengkapi dengan navigasi berupa navbar dan sidebar, serta desain
responsif yang dapat menyesuaikan dengan ukuran layar perangkat.
2. Struktur Folder
my-website/
├── [Link]
├── [Link]
├── [Link]
├── [Link]
├── includes/
│ ├── [Link]
│ ├── [Link]
│ └── [Link]
└── assets/
└── [Link]
3. File CSS (assets/[Link])
Kode berikut digunakan untuk mengatur tampilan website agar responsif:
body {
margin: 0;
font-family: Arial, sans-serif;
}
.sidebar {
width: 200px;
background-color: #2c3e50;
height: 100vh;
padding-top: 20px;
position: fixed;
color: white;
transition: transform 0.3s ease;
}
.sidebar a {
display: block;
padding: 10px;
color: white;
text-decoration: none;
}
.sidebar a:hover {
background-color: #34495e;
}
.main-content {
margin-left: 200px;
padding: 0;
}
.navbar {
background-color: #3498db;
color: white;
padding: 15px;
font-size: 20px;
display: flex;
justify-content: space-between;
align-items: center;
}
.menu-icon {
display: none;
font-size: 26px;
cursor: pointer;
}
@media (max-width: 768px) {
.sidebar {
transform: translateX(-100%);
position: fixed;
z-index: 999;
}
.[Link] {
transform: translateX(0);
}
.main-content {
margin-left: 0;
}
.menu-icon {
display: block;
}
}
4. File PHP
includes/[Link]
<!DOCTYPE html>
<html>
<head>
<title>My Personal Website</title>
<link rel="stylesheet" href="assets/[Link]">
</head>
<body>
<script>
function toggleSidebar() {
const sidebar = [Link]('.sidebar');
[Link]('active');
}
</script>
includes/[Link]
<div class="sidebar">
<h2 style="text-align:center;">MySite</h2>
<a href="[Link]">Home</a>
<a href="[Link]">About Me</a>
<a href="[Link]">Projects</a>
<a href="[Link]">Contact</a>
</div>
<div class="main-content">
<div class="navbar">
<span>Welcome to My Personal Website</span>
<span class="menu-icon" onclick="toggleSidebar()">☰</span>
</div>
includes/[Link]
</div> <!-- close main-content -->
</body>
</html>
[Link]
<?php include 'includes/[Link]'; ?>
<?php include 'includes/[Link]'; ?>
<div class="content">
<h1>Home</h1>
<p>Welcome! This is the homepage of my personal site.</p>
</div>
<?php include 'includes/[Link]'; ?>
[Link]
<?php include 'includes/[Link]'; ?>
<?php include 'includes/[Link]'; ?>
<div class="content">
<h1>About Me</h1>
<p>I am a PHP developer who loves building web applications.</p>
</div>
<?php include 'includes/[Link]'; ?>
[Link]
<?php include 'includes/[Link]'; ?>
<?php include 'includes/[Link]'; ?>
<div class="content">
<h1>Projects</h1>
<p>Here are some of my projects.</p>
</div>
<?php include 'includes/[Link]'; ?>
[Link]
<?php include 'includes/[Link]'; ?>
<?php include 'includes/[Link]'; ?>
<div class="content">
<h1>Contact</h1>
<p>Email: yourname@[Link]</p>
</div>
<?php include 'includes/[Link]'; ?>
