Pahami dan di pelajari ya
Cara Membuat Website dengan PHP dari Awal
Untuk membuat website, dasar HTML dan CSS perlu Anda kuasai untuk membangun struktur yang baik dan tampilan yang menarik.
Nah, cara membuat website dengan PHP dari awal bisa dilakukan dengan langkah berikut:
Mempersiapkan software yang digunakan:
- Membuat file index.php
- Membuat file style.css
- Membuat file home.php
- Membuat file about.php
- Membuat file contact.php
- Mencoba website di browser
Langkah 1: Persiapan
Inilah berbagai tools yang perlu Anda persiapkan sebelum membuat website PHP:
PHP Editor – Digunakan untuk membuat file website dan menulis kodenya. Kali ini kami menggunakan Sublime Text.
Web Browser – Berguna untuk mengecek tampilan website. Kami menggunakan Google Chrome pada tutorial kali ini.
Web Server – Sebagai tempat untuk menyimpan folder website. Disini kami memakai XAMPP lalu membuat folder bernama websitephp di c:\xampp\htdocs.
Langkah 2: Membuat File index.php
Bukalah Sublime Text, lalu klik File > New File. Kemudian, masukkan source code di contoh berikut atau source code Anda sendiri sesuai keinginan:
<!DOCTYPE html>
<html lang=”en”>
<head>
<title>Membuat Website dengan PHP | dieng cyber</title>
<meta charset=”UTF-8″>
<meta name=”description” contents=”dieng cyber “>
<link rel=”stylesheet” href=”style.css” type=”text/css”>
</head>
<body>
<header>
<h1 class=”title”>dieng cyber </h1>
<h3 class=”desc”>Membuat Website dengan PHP dari Awal</h3>
<nav id=”navigation”>
<ul>
<li><a href=”index.php?page=home”>Home</a></li>
<li><a href=”index.php?page=about”>About</a></li>
<li><a href=”index.php?page=contact”>Contact</a></li>
</ul>
</nav>
</header>
<div id=”contents”>
<?php
if(isset($_GET[‘page’])){
$page = $_GET[‘page’];
switch ($page) {
case ‘home’:
include “home.php”;
break;
case ‘about’:
include “about.php”;
break;
case ‘contact’:
include “contact.php”;
break;
}
}
else{
include “home.php”;
}
?>
</div>
<footer>
© Copyright dieng cyber 2023| Web Hosting Terbaik Indonesia
</footer>
</body>
</html>
Langkah 3: Membuat File style.css
Cara membuat website PHP tidak lengkap tanpa langkah menambahkan file CSS. Tujuannya, agar tampilan website semakin menarik. Untuk itu, buat file baru, lalu tulis source code berikut:
header h1.title,
header h3.desc{
text-align: center;
}
body {
width: 70%;
margin: auto;
}
a:link {
color: gray;
}
a:visited {
color: green;
}
a:hover {
color: rebeccapurple;
}
a:active {
color: teal;
}
#navigation {
}
p {
font-size: 110%;
color: black;
}
#contents {
float: center;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: black;
font-family: sans-serif;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #fff;
}
footer {
text-align: center;
}
Langkah 4: Membuat File home.php
Cara membuat website menggunakan PHP selanjutnya adalah membuat halaman Home. Inilah halaman yang pertama kali tampil ketika membuka website. Caranya, buat file baru, lalu ketikkan:
<div class=”page”>
<h2>Website Hebat Berawal dari Unlimited Hosting</h2>
<p>Kami berikan penawaran terbaik unlimited web hosting. Fitur terlengkap, harga terjangkau, dan dukungan teknis 24/7 telah tersedia untuk Anda.</p>
</div>
Langkah 5: Membuat File about.php
Anda juga perlu membuat halaman About. Caranya masih sama, klik File > New File lalu tulis source code di bawah:
<div class=”page”>
<h2>Tentang kami</h2>
<p>Telah dipercaya lebih dari banyak klien yang terdaftar dari seluruh Indonesia, dieng cyber selalu berkomitmen menyajikan teknologi terbaik untuk kesuksesan online Anda. Bergabunglah dan temukan kemudahan menciptakan website impian Anda bersama dieng cyber!</p>
</div>
Langkah 6: Membuat File contact.php
Terakhir, buat halaman Contact dengan memilih menu File lalu klik New File. Kemudian salin source code berikut:
<div class=”page”>
<h2>Hubungi Kami</h2>
<p>Telp: 0857-2967-0954
<br>WA: 0857-2967-0954
<br>Senin – Sabtu
24 Jam Non Stop</p>
<p> Jalan S Parman, Semagung, RT.3/RW.3, Sukoyoso, Pagerkukuh, Kec. Wonosobo, Kabupaten Wonosobo, Jawa Tengah 56314 </p>
</div>
Langkah 7: Mencoba Website di Browser
Nah, semua proses coding telah selesai dan website sudah siap. Tapi, apakah website dapat diakses dengan lancar? Mari lakukan pengecekan.
Caranya, buka XAMPP Control Panel, lalu klik Start pada modul Apache dan MySQL.
Anda telah berhasil menyelesaikan cara membuat website dengan PHP dan CSS!
Kalau coding Anda benar, website akan berjalan lancar. Anda bisa terus berkreasi seperti mengganti header dan footer, menambahkan menu baru, mengganti halaman default, sampai mempercantik tampilan melalui CSS.
Editor:ninapj
Tanya & Beli Program?