Label
Kamis

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.

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.

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!

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.

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.

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.

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.

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.

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.

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. 


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.

Sayangnya, langkah di atas masih tergantung pada XAMPP sebagai web server yang harus selalu aktif agar website bisa diakses. Singkatnya, website Anda belum online.


Labels:

Komentar

Posting Komentar

Postingan Populer