Print bookPrint book

Web Statis

Site: Elearning Muhidin Saimin
Course: Web Development
Book: Web Statis
Printed by: Guest user
Date: Thursday, 21 November 2024, 7:35 PM

Table of contents

1. Web Statis

Cara Membuat Website dengan PHP

Anda ingin membuat website sendiri, tapi bingung mulai dari mana? Tenang, ada cara membuat website dengan PHP dari awal yang bisa Anda coba. 

Kenapa harus menggunakan PHP? Sebab, PHP adalah bahasa pemrograman populer  untuk membuat website statis maupun dinamis sesuai kebutuhan Anda.

Penasaran bagaimana  cara membuat website menggunakan PHP? Apa saja yang harus dipersiapkan? 

Simak artikel ini selengkapnya mulai dari memahami sintaks dasar PHP dan struktur website!

Sintaks Dasar PHP

Secara umum, sintaks dasar PHP dibuka dengan tag <?php dan diakhiri dengan tag ?> seperti berikut:

<?php [code]; ?>

Nah, bagian ; bisa Anda isi dengan perintah apapun. Misalnya, kami ingin menampilkan teks “Selamat Datang di Niagahoster”, maka sintaksnya adalah:

<?php echo “Selamat Datang di Niagahoster”; ?>

Berikut hasilnya ketika ditampilkan di browser:

sintaks dasar website php

Jangan lupa, simpan file PHP tersebut dengan ekstensi .php.

Baca juga: 10 Tips Menjadi PHP Developer Handal

Struktur Dasar Website

Sebelum membuat website, penting untuk  paham struktur dasarnya terlebih dahulu. Secara umum, struktur dasar website adalah sebagai berikut:

  1. Header - Terletak di bagian paling atas website dan biasanya memuat informasi singkat seputar website, seperti logo, judul, dan tagline website.
  2. Menu - Bagian website yang berfungsi sebagai jalan pintas menuju konten-konten yang ada di website, sering juga disebut dengan navigasi.
  3. Isi / Konten - Bagian utama pada website yang berisi artikel atau informasi yang ingin disampaikan pemilik website kepada pengunjung.
  4. Footer - Terletak di bagian paling bawah website dan biasanya terdiri dari informasi pemilik website dan copyright.

Inilah contoh penerapan struktur website di atas:

struktur cara membuat website dengan php dan css

Nah, selanjutnya kami akan menjelaskan panduan website development menggunakan PHP sesuai dengan struktur website di atas.

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:

  1. Mempersiapkan software yang digunakan
  2. Membuat file index.php
  3. Membuat file style.css
  4. Membuat file home.php
  5. Membuat file about.php
  6. Membuat file contact.php
  7. Mencoba website di browser

Yuk, langsung praktikkan cara membuat website PHP dengan langkah di atas!

Baca juga: Cara Membuat Website dengan HTML dan CSS

Langkah 1: Persiapan

Inilah berbagai tools yang perlu Anda persiapkan sebelum membuat website PHP:

  1. PHP Editor - Digunakan untuk membuat file website dan menulis kodenya. Kali ini kami menggunakan Sublime Text.
  2. Web Browser - Berguna untuk mengecek tampilan website. Kami menggunakan Google Chrome pada tutorial kali ini.
  3. Web Server - Sebagai tempat untuk menyimpan folder website. Disini kami memakai XAMPP lalu membuat folder bernama websitephp di c:\xampp\htdocs.

Baca juga: Cara Menghubungkan PHP ke Database MySQL

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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Membuat Website dengan PHP | Niagahoster</title>
    <meta charset="UTF-8">
    <meta name="description" contents="Niagahoster">
    <link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
    <header>
        <h1 class="title">Niagahoster</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>
        &copy Copyright Niagahoster 2021 | Web Hosting Terbaik Indonesia
    </footer>
</body>
</html>

Jika sudah, simpan file dengan nama index.php pada folder websitephp.

Baca juga: Perbedaan PHP dan HTML yang Wajib Anda Ketahui

Penjelasan kode di atas sebagai berikut:

  1. <a href=” … ”</a> digunakan untuk memasukkan menu navigasi.
  1. $_GET [‘...’] digunakan untuk memanggil method GET.

Pada PHP, method GET berfungsi untuk mengambil data dari variabel ke halaman lain. Untuk itu, diperlukan variabel baru bernama page.

Method GET nantinya akan memanggil isian data dari variabel page. Kemudian, isian data tersebut akan ditampilkan sesuai dengan halaman menu yang dituju.

  1. switch (...) {case ‘...’} digunakan untuk berpindah-pindah halaman.
  1. include “home.php”; digunakan untuk mengatur file home.php sebagai halaman default.

Baca juga: Cara Mengatasi Undefined Index dan Undefined Variable pada PHP

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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
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;
}

Save dengan nama style.css.

Baca juga: Kode Warna HTML

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:

1
2
3
4
<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>

Selanjutnya, simpan dengan nama home.php.

Baca juga: Cara Membuat PHP Session Login Logout dengan Mudah

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:

1
2
3
4
<div class="page">
    <h2>Tentang Niagahoster</h2>
    <p>Telah dipercaya lebih dari 500.000 klien yang terdaftar dari seluruh Indonesia, Niagahoster selalu berkomitmen menyajikan teknologi terbaik untuk kesuksesan online Anda. Bergabunglah dan temukan kemudahan menciptakan website impian Anda bersama Niagahoster!</p>
</div>

Simpan file dengan nama about.php.

Baca juga: Cara Membuat CRUD dengan PHP dan MySQL

Langkah 6: Membuat File contact.php

Terakhir, buat halaman Contact dengan memilih menu File lalu klik New File. Kemudian salin source code berikut:

1
2
3
4
5
6
7
8
9
10
11
12
<div class="page">
    <h2>Hubungi Kami</h2>
    <p>Telp: 0274-2885822
        <br>WA: 0895395186038
        <br>Senin - Minggu
    24 Jam Non Stop</p>
 
    <p>Jl. Palagan Tentara Pelajar
        No 81 Jongkang, Sariharjo, Ngaglik, Sleman
        Daerah Istimewa Yogyakarta
    55581</p>
</div>

Jika sudah, simpan file dengan nama contact.php.

Baca juga: 7 Tips PHP Security yang Wajib Anda Tahu

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.

cara membuat website php langkah 7

Kemudian buka browser, lalu ketikkan localhost/websitephp. Jika berhasil, begini tampilannya:

cara membuat website menggunakan php langkah 7.1

Secara default, website akan menampilkan halaman Home seperti skrip yang sudah Anda tulis pada file index.php.

Baca juga: PHP 8.1 Telah Dirilis! Simak Fitur Baru, Perubahan, Cara Upgrade

Sekarang coba buka halaman About dengan cara klik menu navigasi About. Begini kira-kira hasilnya:

cara membuat website php langkah 7.2

Sedangkan untuk halaman Contact, tampilan yang dihasilkan seperti berikut:

cara membuat website dengan php dari awal langkah 7.3

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. 

Baca juga: Cara Membuat PHP Session Login dan Logout dengan Mudah

Ayo Buat Website Anda Sendiri dengan PHP!

Anda sudah tahu cara membuat website dengan PHP dari awal. Tidak sulit, bukan? Selama coding yang dilakukan tepat dan tools yang dibutuhkan tersedia, hasilnya akan sesuai harapan.

Jika sudah semakin mahir, jangan ragu menambahkan fungsi lain pada website. Misalnya, membuat fitur login dan logout atau menghubungkannya dengan database.


2. Free Web Hosting

  1. HostAwesome
  2. AccuWeb Hosting
  3. 000webhost
  4. FreeHostingNoAds
  5. x10hosting
  6. Freehostia
  7. WordPlus.host
  8. Byethost
  9. Biz.nf
  10. AwardSpace
  11. 100 WebSpace
  12. Free Hosting
  13. Infinity Free
  14. WPNode

Saran Infinity Free