1

Membuat Website
Dengan PHP

PHP
2

Daftar Isi

Bab I
Pendahuluan 04 Mengenal PHP
Lebih Dalam 06

• Apa Itu PHP? 06

• Fungsi PHP 07
• Cara Kerja PHP 08

Bab II Bab III

Belajar Dasar-Dasar Persiapan untuk
Sintaks PHP 10 Membuat Website
10
dengan PHP 24
• PHP Dasar
• PHP Array 17 • Web Server 24
• PHP Functions 18 • PHP Editor 30
• PHP Class and Objects 20 • Web Browser 34
• PHP Form 21
• PHP Include and Require 23
 3

Bab IV Bab V
Cara Membuat Cara Membuat
Website Sederhana 36 Website Online 56
dengan PHP
• Memesan Domain
dan Hosting 56
• Membuat Folder Website
di Localhost 36 • Memindahkan File dan
• Membuat Bagian Header 39 Database Website
ke Hosting 57
• Membuat Bagian Footer 43
• Membuat Bagian
Halaman Home 45
• Menghubungkan Form
dengan Database 50
• Membuat Bagian
Halaman About dan
Contact 53

Bab VI
Selamat, Ya! Website
Anda Sudah Online! 69
4 Pendahuluan

Belajar Bikin Website

dengan PHP? Why Not?

PHP

Mungkin Anda merasa CMS sudah cukup lah untuk

membuat website yang perfect sesuai kebutuhan Anda.

Apalagi sudah tersedia banyak templates yang siap pakai

dan mudah untuk Anda customize.

Tetapi, apakah betul demikian?

Kalau Anda perhatikan, tidak semua templates dan fitur di

CMS bisa mewujudkan website sesuai dengan keinginan

Anda, lho. Ya, kalaupun ada, Anda harus merogoh kocek

karena hanya tersedia untuk layanan premium. Uang lagi,

uang lagi.

Jadi, apa yang harus dilakukan?

Anda harus mempelajari cara membuat website dari

dasarnya alias belajar membuat website dengan PHP.

Pendahuluan 5

PHP memberikan Anda kebebasan untuk membuat dan

mendesain website impian Anda.

Dan poin pentingnya adalah Anda tidak perlu mengeluarkan

biaya sepeserpun untuk membuat website

dengan PHP. Keren, kan?

Tapi, saya nggak paham coding-codingan.

Pasti susah! Gimana dong?

Eits, siapa bilang belajar coding PHP

itu susah? Itu hanya pikiran Anda

saja karena belum mengenal PHP.

Belajar membuat website dengan PHP itu

sangat seru, kok! Tidak sulit sama sekali!

Ada banyak sumber belajar di internet yang bisa membantu

Anda. Selain itu, banyak juga sumber kode yang bisa Anda

gunakan untuk membuat website PHP Anda sendiri.

Nah, kalau mau mendapat sumber belajar dan kode

sekaligus, ebook ini adalah jawabannya! Di dalam ebook ini,

Anda akan mempelajari dasar-dasar PHP dan gimana sih

cara PHP bekerja dalam menjalankan website.

Dan tentunya, panduan membuat website dengan PHP dari

nol sampai online lengkap dengan kodenya.

Daripada lama berpikir, ayo kita mulai belajar membuat

website dengan PHP bersama!

6 Bab I

Mengenal PHP Lebih Dalam

Apa yang pertama kali muncul di benak Anda saat

mendengar soal PHP? Apakah Anda memikirkan tentang

coding, website dan aplikasi? Jika iya, artinya Anda sudah

selangkah lebih maju dalam mengenal PHP.

Sebetulnya, ketiga hal itulah yang memang berkaitan erat

dengan PHP. Tetapi, sebetulnya apa sih PHP itu?

Dan, apa fungsinya?

<?php
Nah, untuk menjawab pertanyaan echo “Hello
Anda, simak penjelasan lengkap
World!”;
PHP ?>
di bawah ini, yuk!
CSS

A. Apa Itu PHP?

</>
PHP: Hypertext Preprocessor

atau disingkat PHP adalah

bahasa pemrograman open-source yang cukup populer

di kalangan web developer.

PHP digunakan secara luas dalam dunia web development.

Seperti mengembangkan website statis menjadi dinamis,

hingga membuat aplikasi web yang interaktif.

Sebut saja Facebook, Wikipedia dan Tumblr, deretan website

global yang menggunakan PHP. Bahkan, WordPress si CMS

populer pun juga menggunakan PHP, lho.

 7

Nah, PHP ini bekerja pada bagian server-side alias back-

end. Ibarat restoran, PHP letaknya di dapur yang tak terlihat

oleh pengunjung.

Selain PHP, ada HTML dan CSS yang juga berperan penting

dalam pengembangan website.

Tetapi, posisi HTML dan CSS ini berada di bagian front-end

atau tampilan muka website yang terlihat oleh pengunjung.

Bisa dibilang, peran ketiganya ini saling melengkapi dalam

mengembangkan sebuah website.

B. Fungsi PHP

Di atas sudah sempat disinggung mengenai fungsi dari PHP

sebagai bahasa pemrograman. Yup, secara sederhana PHP

berfungsi untuk mengembangkan website statis menjadi

dinamis dan aplikasi web.

Nah, supaya lebih paham, mari kita ambil contoh dari situs
Facebook yang juga dibuat dengan PHP.

Facebook adalah sosial media yang memungkinkan Anda

untuk mendaftar sebagai penggunanya.

Sebagai pengguna, Anda bisa posting status berupa teks,

gambar atau video yang Anda inginkan. Selain itu,

Anda juga bisa berinteraksi dengan sesama pengguna

melalui fitur komentar atau messenger.

Semua profil, status maupun komentar yang Anda buat

bisa diganti dan dihapus sesuka hati.

8

Nah, semua aktivitas posting, komentar,

mengubah profil, menghapus status

dan membuat akun ini dilakukan oleh

PHP.

Inilah yang disebut dengan dinamis.

Ada aktivitas atau perubahan yang

bisa dilakukan oleh user maupun

pengunjung di dalam website tersebut.

C. Cara Kerja PHP

Sekarang, Anda sudah memahami apa

itu PHP

dan fungsinya. Tetapi, gimana sih cara PHP bekerja dan

menghasilkan website seperti Facebook?

Gampangnya, Anda bisa melihat ilustrasi

di bawah ini.

Source: https://github.com/xeroxism/
 9

Nah, mari kita ambil kembali contoh dari Facebook. Saat

Anda membuat status dan klik posting, browser akan

mengirimkan request atau perintah tersebut ke web server.

Di dalam web server, request yang tadi Anda buat akan

diproses oleh script PHP. Setelah itu, PHP akan meminta

konten ke database sesuai dengan perintah dari browser.

Kemudian, database akan mengirimkan apa yang diminta

oleh PHP tadi dalam bentuk HTML. Nah, inilah yang akan

diteruskan oleh web server ke browser dan akhirnya

menampilkan status yang bisa Anda lihat di Facebook.

Nah, semua proses ini akan terjadi setiap Anda ingin

membuat akun, status, komentar, menambah teman,

mengubah profil dan sebagainya di Facebook. Sampai di

sini, sudah paham atau belum?

PHP
10 Bab II

Belajar Dasar-Dasar
Sintaks PHP
Dalam bab sebelumnya, Anda sudah dijelaskan nih

mengenai bagaimana script PHP memproses perintah atau

permintaan dari user di website dan browser.

Nah, pada bab ini, Anda akan mempelajari apa saja jenis

script PHP yang bisa Anda gunakan untuk membuat sebuah

website. Atau biasa disebut dengan sintaks.

Di PHP sendiri, ada banyak jenis sintaks yang bisa Anda

gunakan untuk membuat sebuah website atau aplikasi web.

Setidaknya ada 6 jenis sintaks dengan fungsi berbeda yang

harus Anda pelajari seperti menghasilkan tulisan, membuat

form dan sebagainya.

Supaya Anda lebih paham, simak penjelasan

di bawah ini, yuk!

A. PHP Dasar

Yang pertama, ada program dasar PHP. Nah, bisa dibilang

ini adalah sintaks PHP yang paling dasar dan umum.

Dalam program dasar PHP ini pun juga ada beberapa jenis.

Tetapi, kali ini kita akan mempelajari 4 jenis program dasar

PHP. Yuk, simak paparan yang telah disiapkan berikut ini!

 11

Escaping to PHP

Dalam bahasa PHP, kode yang paling dasar adalah

<?php …; ?> atau yang disebut dengan Escaping to PHP.

Script atau kode ini digunakan untuk membedakan kode

PHP dan HTML. Anda bisa menggunakan Escaping to PHP

untuk memuat apapun.

Misalnya yang paling sederhana seperti berikut ini.

<?php

echo “Halo Dunia!”;

?>

Dari kode ini, akan menghasilkan output berupa Halo Dunia!

pada halaman website Anda.

Comments PHP

Kalau sebelumnya kode paling dasar, yang satu ini

merupakan lanjutan dari <?php …?>.

Comments berfungsi untuk membuat

catatan kecil untuk Anda sendiri terhadap

suatu kode.

Catatan ini bukan kode, ya, jadi tidak akan

dibaca atau dieksekusi oleh PHP. Ada 2 jenis

komentar yang bisa Anda buat di PHP, yaitu:

12

• Single line untuk membuat komentar pendek hanya

dalam 1 baris dan diawali dengan // atau #.

Contohnya seperti berikut ini:

<?php

// You can write single line comment here

// Write another single line comment here

echo “Halo Dunia!”;

?>

Atau seperti ini:

<?php

# You can write single line comment here

# Write another single line comment here

echo “Halo Dunia!”;

?>

Dari kode di atas, hasil pada website Anda tetap akan

menjadi Halo Dunia!.

• Multi-line untuk membuat komentar lebih dari satu baris

dan diawali dengan /*...*/.

Contohnya seperti berikut ini:

<?php

/* You can write multi line comment here

you can add comment here too

until here as required by the user. */

echo “Halo Dunia!”;

?>

Hasil dari kode di atas pada website Anda akan tetap

menjadi Halo Dunia!.

 13

Echo dan Print PHP

Kalau Anda perhatikan, dalam 2 contoh sebelumnya

terdapat statement echo. Misalnya saja seperti contoh

pertama yang menghasilkan kalimat Halo Dunia!.

Echo berfungsi untuk membuat teks pada halaman website.

Nah, selain echo, ada juga statement print.

Statement echo dan print ini fungsinya sama yaitu untuk

menghasilkan teks pada halaman website. Contohnya

seperti ini.

Statement echo.

Statement print.

See? Sama saja, kan? Lha, kalau sama saja, terus bedanya
apa dong?

Good question! Meski keduanya menghasilkan output yang

sama, tetapi ada perbedaan nih antara print dan echo.

Supaya lebih gampang, kita list saja, yuk!

14

• Print hanya bisa menerima 1 argumen dalam satu

waktu. Sedangkan, echo bisa menerima lebih dari

1 argumen yang dipisahkan dengan koma seperti

berikut ini.

• Print selalu mengembalikan 1 nilai. Sedangkan, echo

tidak mengembalikan nilai apapun. Sehingga, print

mengeksekusi perintah lebih lambat dari echo.

Variabel PHP

Setelah mengenal fungsi PHP untuk membuat teks, kini

saatnya Anda beralih ke fungsi variabel.

Variabel PHP berfungsi untuk menyimpan nilai berupa

angka, karakter, string karakter dan sebagainya, untuk

digunakan di setiap bagian program.

Nah, setiap variabel PHP akan diawali dengan tanda $ dan

dengan struktur $variabel = nilai. Tetapi, ada

aturan khusus untuk nama variabel nih.

Setiap nama variabel hanya boleh mengandung

angka, huruf (besar dan kecil) dan underscore

(_). Misalnya seperti $nama_variabel,

$naMaVariabel atau $variabel2.

Terus, gimana cara menggunakan variabel PHP?

 15

Variabel bisa digunakan bersama semua macam sintaks di

PHP. Supaya lebih paham, coba lihat contoh berikut ini.

Atau bisa juga menggunakan variabel untuk menyimpan

angka seperti contoh berikut ini.

Loops PHP

Saat sedang mengembangkan website, terkadang ada 1

kode yang butuh diulang beberapa kali.

Kalau begini, Anda bisa menggunakan loop di PHP untuk

mengulangi kode yang sama pada blok tersebut.

Nah, untuk menggunakannya, loop akan diawali dengan

tanda { dan diakhiri dengan tanda }.

Ada 4 jenis loop yang bisa Anda gunakan dalam scripting

PHP, yaitu:

• Loop for yang digunakan untuk mengulangi kode

beberapa kali. Contohnya seperti berikut ini.

16

• Loop while berfungsi untuk mengeksekusi kode jika

ekspresi atau kondisinya benar. Contohnya seperti

berikut ini.

• Loop do while akan mengeksekusi kode setidaknya

sekali. Lalu, akan diulangi jika ekspresi atau kondisinya

(antara $index dan while) benar seperti berikut ini.

Contoh kondisi benar.

Contoh kondisi salah.

• Loop foreach digunakan untuk mengulangi kode

dalam data array. Contohnya seperti berikut ini.

 17

B. PHP Array

Array merupakan salah satu tipe struktur data di

PHP untuk menyimpan beberapa data dalam satu

variabel yang diawali dengan array (variabel).

Fungsi yang satu ini bisa Anda gunakan untuk menyimpan

beberapa data yang masih satu tipe. Misalnya seperti

variabel nama, angka, identitas atau alamat.

Dasarnya, ada 3 jenis array yang bisa digunakan

di PHP, yaitu:
• Indexed array berfungsi untuk menyimpan nilai

dalam indeks numerik secara linear yang dimulai dari

nol seperti contoh berikut ini.

• Associative array memiliki fungsi yang sama

seperti indexed array. Bedanya, array yang satu ini

menetapkan nilainya dengan tipe data string seperti

berikut ini.
18

• Multidimensional berfungsi untuk menyimpan array

lain dalam setiap indeks. Untuk lebih jelasnya, lihat

contoh di bawah ini.

Nah, semua jenis array di atas, bisa Anda kombinasikan

dengan fungsi lain. Misalnya seperti mengkombinasikan

dengan fungsi loop.

C. PHP Functions

Terkadang, dalam membuat script, ada beberapa bagian

yang membutuhkan kode yang sama.

Menulis kembali kode tersebut dari awal tentu akan

membuat waktu dan tenaga. Supaya proses membuat

 19

script ini menjadi lebih mudah, Anda bisa menggunakan

function di PHP.

Dengan function, Anda bisa menjalankan tugas tertentu

dan memanggilnya kembali di bagian manapun yang Anda

inginkan. Untuk menggunakannya, Anda bisa menuliskan

sintaks function berikut ini.

function namafunction () {

kode yang ingin dijalankan;

Gimana? Masih belum paham cara penggunaannya? Kalau

begitu, coba lihat contoh berikut ini.

Selain cara di atas, Anda juga dapat menggunakan function

dalam bentuk parameter. Parameter adalah informasi atau

variabel yang berada di dalam fungsi seperti contoh

berikut ini.
20

Bisa dibilang, fungsi class ini digunakan untuk

mendefinisikan tipe data tertentu. Misalnya seperti variable,

function dan sebagainya.

Selain itu, Anda juga bisa memasukkan properti dan metode

ke dalam PHP class. Nah, semua isi yang berada di dalam

class ini kemudian disebut dengan object.

Untuk menggunakan fungsi yang satu ini, Anda harus

mengawali dengan keyword class dan diikuti dengan nama

kelas. Misalnya seperti berikut ini.

D. PHP Class dan Object

PHP class adalah struktur data yang berfungsi untuk

memodelkan sesuatu, apapun itu. Misalnya seperti mobil,

kendaraan atau gedung.

Bisa dibilang, fungsi class ini digunakan untuk mendefinisikan

tipe data tertentu. Misalnya seperti variable, function dan

sebagainya.

Selain itu, Anda juga bisa memasukkan properti dan metode

ke dalam PHP class.

 21

Nah, semua isi yang berada di dalam class ini kemudian

disebut dengan object.

Untuk menggunakan fungsi yang satu ini, Anda harus

mengawali dengan keyword class dan diikuti dengan nama

kelas. Misalnya seperti berikut ini.

E. PHP Form

Apakah Anda pernah mengisi form subscribe di suatu

website? Atau mungkin kolom komentar di suatu blog?

Jika iya, artinya Anda sudah sedikit mengenal fungsi PHP

form nih. Yup, semua form yang pernah Anda isi tersebut

sebetulnya terbuat dari fungsi PHP form ini, lho.

Dalam fungsi yang satu ini, sebetulnya sintaks HTML lah yang

digunakan untuk membuat form. Lha, terus fungsi PHP-nya

apa dong?

Nah, di sini PHP berfungsi untuk mengelola data yang masuk

ke dalam form HTML tersebut. Semua data tersebut akan

dikelola dengan bantuan metode POST dan GET.

22

Eits, tetapi kita tidak akan menggunakan keduanya dalam

satu script, ya. Anda bisa memilih salah satu dari kedua

metode ini sesuai dengan kebutuhan form yang

akan dibuat.

JIka ingin membuat form untuk mengoleksi data yang

sensitif seperti password. Sebaiknya, gunakan metode POST

dengan variabel $_POST supaya data tidak muncul di URL

setelah pengunjung input.

Tetapi, kalau datanya tidak sensitif, Anda bisa menggunakan

metode GET dengan variabel $_GET untuk menampilkan

data dalam URL. Untuk cara menggunakannya, Anda bisa

simak contoh berikut ini.

Di atas adalah contoh form HTML yang paling sederhana

dengan metode POST dengan variabel $_POST. Nah,

variabel $_POST ini diletakkan di dalam file form.php yang

berada pada baris pertama seperti contoh berikut ini.

 23

Jadi, begitu Anda mengisi dan mengirimkan data pada

form tersebut, pesan Halo akan muncul secara otomatis

seperti contoh di atas.

F. PHP Include dan Require

Membuat script PHP memang sangat rumit karena semua

bagian harus ditulis satu per satu. Bisa saja untuk membuat

1 halaman website, butuh ratusan barisan script PHP. Kalau

begini, mau memodifikasi 1 baris saja pasti jadi ribet.

Nah, untuk memudahkan dalam hal modifikasi atau

organisir kode, Anda bisa menggunakan statement include

dan require.

Kedua statement ini memiliki fungsi yang sama, yaitu untuk

memasukkan kode dalam 1 file ke file lainnya.

Misalnya, Anda ingin membuat bagian header dan footer

pada setiap halaman website. Supaya script PHP lebih

terorganisir dan mudah dimodifikasi, Anda bisa membuat

file untuk header dan footer secara terpisah lebih dulu.

Setelah itu, barulah Anda masukkan kedua file tersebut

ke dalam file utama dengan statement include() atau

require() seperti contoh di bawah ini.

<?php

require(“header.php”);

?>
24 Bab III

Persiapan untuk Membuat

Website dengan PHP
Dalam bab sebelumnya, Anda sudah mengenal beberapa

sintaks PHP yang paling umum digunakan untuk membuat

website. Itu tandanya, Anda sudah semakin siap untuk

membuat website dengan PHP.

Nah, sebelum mulai membuat website dengan PHP, Anda

harus mempersiapkan alat-alatnya lebih dulu. Ada 3 alat

yang harus dipersiapkan, yaitu web server, PHP editor dan

web browser.

Untuk lebih lengkapnya, simak penjelasan berikut ini, yuk!

A. Web Server

Web server adalah software yang berfungsi

untuk menyimpan semua data website dalam database

dan mengirimkannya ke browser saat ada request.

Ada beberapa jenis web server yang bisa Anda gunakan.

Misalnya seperti Apache yang cukup banyak digunakan.

Nah, salah satu software yang bisa Anda gunakan sebagai

web server adalah XAMPP. XAMPP adalah kepanjangan dari

Cross-Platform (X), Apache (A), MySQL (M), PHP (P)

and Perl (P).

Seperti kepanjangannya, XAMPP memiliki semua yang Anda

butuhkan untuk membangun website.

 25

Mulai dari web server Apache, database hingga PHP si

bahan utama untuk membuat website.

Anda tidak perlu khawatir dengan sistem operasi yang

digunakan karena XAMPP bisa Anda gunakan baik di

Windows, Linux maupun Mac. Dan, tentunya XAMPP gratis

untuk digunakan.

Untuk menggunakannya, Anda bisa ikuti cara

di bawah ini, ya!

1. Download file XAMPP di sini sesuai dengan kebutuhan

sistem operasi yang digunakan.

2. Buka file XAMPP yang sudah Anda download. Lalu, klik

Yes untuk menjalankan aplikasi XAMPP di

perangkat Anda.
26

3. Klik Next pada window aplikasi XAMPP untuk mulai

proses setup.

4. Pilih komponen yang ingin Anda install di XAMPP. Atau

bisa dibiarkan dalam keadaan default. Lalu, klik Next.

 27

5. Pilih lokasi folder atau direktori tempat XAMPP akan

Anda install. Biasanya, berada di C:\xampp.

Lalu, klik Next.

6. Pilih bahasa yang ingin digunakan. Lalu, klik Next.

28

7. Klik Next lagi untuk memulai proses instalasi XAMPP di

perangkat Anda.

8. Tunggu sampai proses instalasi selesai. Lalu, klik Next

dan Finish.
 29

9. Akan muncul tampilan seperti gambar di bawah

Pilih network yang diperbolehkan untuk mengakses

web server. Lalu, klik Allow Access.

10. Buka aplikasi XAMPP di perangkat Anda. Lalu, klik

Start pada Apache dan MySQL untuk membuat

website dengan PHP.

Sekarang, XAMPP sudah siap untuk digunakan untuk

menyimpan semua data website Anda.

30

Yuk, lanjut ke penjelasan berikutnya!

B. PHP Editor

PHP editor adalah aplikasi text editor khusus coding yang

digunakan untuk menulis dan menyunting script PHP.

Sebetulnya, untuk menulis dan menyunting script PHP, Anda

bisa menggunakan text editor standar seperti Notepad di

Windows. Akan tetapi, text editor standar tidak memiliki

beberapa fitur yang dimiliki oleh text editor khusus coding.

Misalnya saja seperti highlight sintaks yang tidak bisa kita

temukan di text editor standar seperti Notepad. Ini tentu

akan menyulitkan Anda saat ingin menyunting bagian

tertentu dari script yang sudah dibuat.

Itulah mengapa lebih baik menggunakan PHP editor yang

memang khusus untuk mengelola coding.

Salah satu PHP editor yang cukup populer adalah Visual

Studio Code. Aplikasi yang satu ini juga mendukung banyak

bahasa pemrograman lainnya. Selain itu, Visual Studio Code

juga sudah mendukung sistem operasi Linux, Windows dan

Mac.

Nah, untuk instalasi Visual Studio Code, Anda bisa ikuti

langkah-langkah berikut ini, ya!

1. Download file Visual Studio Code di sini sesuai dengan

kebutuhan sistem operasi yang digunakan.

 31

2. Buka aplikasi Visual Studio Code yang sudah

Anda download.

3. Akan muncul tampilan seperti gambar di bawah.

Pilih I accept the agreement. Lalu, klik Next.

32

4. Pilih lokasi folder atau direktori tempat Visual Studio

Code akan Anda install. Lalu, klik Next.

5. Pilih folder yang Anda inginkan untuk menyimpan

data Visual Studio Code. Lalu, klik Next.

6. Pilih tambahan setup yang Anda inginkan atau bisa

checklist semua pilihan yang ada. Lalu, klik Next.

 33

7. Klik Install untuk memulai proses instalasi Visual

Studio Code. Lalu, tunggu hingga proses

instalasi selesai.

8. Klik Finish untuk menyelesaikan proses instalasi.

34

C. Web Browser

Web browser adalah software yang berfungsi untuk

mengakses internet dan semua halaman website

di dalamnya.

Anda tentunya sudah tahu dong contoh web browser yang

bisa digunakan. Yup, contohnya adalah Google, si browser

paling populer di dunia.

Nah, kira-kira apa sih fungsi web browser di sini?

Kalau Anda masih ingat nih, dalam bab pertama kita sempat

belajar tentang cara kerja PHP dalam sebuah website.

Setiap ada request dari web browser, PHP di dalam

web server akan mengelola script yang sudah dibuat.

Nah, hasilnya nanti akan ditampilkan kembali

di web browser.
 35

Bisa dibilang, kita membutuhkan web browser untuk

menampilkan website yang sudah dibuat dengan script

PHP. Tanpa web browser, Anda tidak akan tahu hasil akhir

website dari script PHP yang sudah dibuat.

36 Bab IV

Cara Membuat Website

Sederhana dengan PHP
Setelah Anda mempelajari dasar teori dari PHP, sekarang

saatnya Anda mulai praktik membuat website dengan PHP.

Tetapi, sebelum itu ada yang perlu Anda ketahui nih dari

bab ini. Kita tidak akan membuat website hanya dengan

PHP. Lho, kok gitu?

Oke, mari kita recall sedikit materi di bab awal, ya. Dalam

bab pertama, kita membahas mengenai PHP yang bekerja

bersama HTML dan CSS. Apakah Anda masih ingat?

Nah, sementara PHP bekerja untuk mengelola fungsi di

website, HTML dan CSS bekerja untuk membuat tampilan

website supaya menarik.

Artinya, dalam bab ini kita akan menggunakan PHP, HTML

dan CSS untuk membuat website. Supaya tidak bingung,

kita langsung mulai membuat website sederhana, yuk!

A. Membuat Folder Website di Localhost

Setiap website pasti memiliki 1 direktori di mana semua data

tersimpan. Mulai dari teks, gambar, video dan script.

Untuk itu, yang pertama kali harus dilakukan adalah

membuat folder website ini lebih dulu di localhost. Kalau

begitu, ikuti cara di bawah ini, ya!

 37

1. Buka lokasi folder XAMPP disimpan. Lalu, buka folder

htdocs seperti gambar di bawah.

2. Buat folder baru untuk website dengan cara

klik kanan > New > Folder. Berikan nama folder sesuai

keinginan Anda, misalnya mywebsite.

3. Buka folder website yang sudah dibuat. Lalu, mulai

menulis script PHP dengan cara klik kanan > Open

with Code
38

4. Akan muncul tampilan aplikasi Visual Studio Code

seperti berikut ini

5. Klik icon folder di samping kanan nama folder website.

Lalu, buat folder baru untuk css dan images.

Penjelasan:

• Folder css berfungsi untuk mengatur style dan layout

halaman website.
 39

• Folder images berfungsi untuk menyimpan gambar yang

dibutuhkan dalam setiap halaman website. Misalnya

logo, gambar produk dan lainnya.

6. Klik folder CSS > icon file di samping kanan nama folder

website. Lalu, buat file baru dengan nama style.css.

7. Buka Pindahkan semua gambar ke folder images

dalam folder mywebsite di komputer seperti

gambar berikut.

B. Membuat Bagian Header

Sekarang, semua persiapan sudah selesai, nih. Tandanya,

Anda sudah bisa mulai membuat website dengan PHP

pertama Anda nih.

 40

Dalam setiap halaman website, pasti memiliki bagian

header yang sama. Misalnya saja seperti setiap halaman di

website Qwords.com.

Untuk itu, bagian pertama yang akan kita buat adalah

header dengan membuat file header.php. Yuk, simak

langkah-langkah di bawah ini!

1. Klik pada layar kosong di bawah folder images.

Lalu, klik icon file di samping kanan nama folder website.

Lalu, buat file baru dengan nama header.php.

2. Hubungkan file header.php dengan file css (link) dan

jQuery (script) dengan kode berikut ini.

<?php
echo “Hello
World!”; </>
 41

Penjelasan:

• <!DOCTYPE html> untuk memberitahu browser jenis

HTML apa yang ditulis.

• <title>Fast Service</title> untuk membuat nama

website muncul di tab browser. Silahkan ganti

bagian Fast Service dengan nama website Anda,

ya.

• <link rel=”stylesheet” …> untuk menghubungkan

file header.php dengan file css berupa link untuk

mengatur style dan layout.

• <script src=” “ …> untuk menghubungkan file

header.php dengan file jQuery. Ini berfungsi untuk <?php

mengakses perpustakaan JavaScript dengan
echo “Hello
World!”;
mudah seperti Ajax, animasi dan sebagainya. ?>
3. Di bawahnya, buat bagian navigation bar dengan PHP

memasukkan kode berikut. Lalu, simpan file dengan </>

tekan CTRL + S.
42

Penjelasan:

• <nav class=”... navbar-dark” style=”background-

color: #...;”> untuk membuat link navigation bar

dengan warna tertentu.

• <a class=”navbar-brand” href=”index.php”>Fast

Services</a> untuk membuat bagian logo website

yang diarahkan ke file index.php atau halaman

utama. Ubah Fast Service sesuai nama website

Anda.

• <div class=”collapse navbar-collapse” …> untuk

membuat navigation bar.

 43

• <a class=”nav-link” href=”index.php”>Home …>

untuk membuat menu Home yang diarahkan

ke file index.php sebagai halaman utama. Ubah

Home dan index.php sesuai dengan kebutuhan

Anda.

• <li class=”nav-item dropdown”> untuk membuat

menu dropdown dengan submenu di dalamnya.

• <a class=”dropdown-item”

href=”#busana”>Busana Wanita</a> untuk

membuat submenu Busana Wanita di dalam menu

dropdown. Ganti bagian Busana Wanita sesuai

dengan website Anda.

• href=”#busana” untuk mengarahkan menu Busana

Wanita ke id=”busana” di file index.php. Silahkan

ganti sesuai kebutuhan website Anda.

4. Kode di atas akan menampilkan tampilan header

seperti berikut ini. Cek dengan mengetikkan localhost/

namafolderwebsiteAnda/header.php pada

search bar di browser Anda.

C. Membuat Bagian Footer

Selain header, setiap halaman website tentu memiliki

bagian footer yang sama, bukan?

Oleh karena itu, bagian inilah yang akan kita buat selanjutnya

dengan membuat file footer.php. Umumnya, footer yang

paling sederhana hanya memuat tanda Copyright.

44

Ikuti langkah-langkah berikut ini, ya!

1. Klik pada layar kosong di bawah folder images. Lalu,

klik icon file di samping kanan nama folder

website. Lalu, buat file baru dengan nama footer.php.

2. Buat footer Copyright sederhana dengan memasukkan

kode di bawah. Lalu, simpan file dengan

tekan CTRL + S.

Penjelasan:

• <div class=”d-flex flex-column h-100”> untuk

membuat kolom Copyright di bagian bawah

halaman.

• <footer class=”mt-auto …”> untuk membuat

bagian footer supaya menetap di bagian bawah

halaman website.

• <div class=”text-center p-3” …> untuk mengatur

posisi dan style dari text.

• © 2022 Copyright adalah text untuk footer

halaman website. Bisa diganti sesuai dengan

keinginan.

3. Kode di atas akan menghasilkan footer seperti

gambar berikut ini. Cek dengan mengakses

localhost/namafolderwebsiteAnda/footer.php

pada browser Anda.

 45

Penjelasan:

• Bagian footer menjadi seperti ini karena tidak

dihubungkan ke file css dan jQuery seperti header.

• Jika ingin tampilan sesuai dengan kode, Anda bisa

copy kode css dan jQuery pada header dari bari

<meta> sampai <script> yang ketiga.

• Atau bisa juga dengan menggunakan fungsi

include PHP seperti pada langkah selanjutnya.

D. Membuat Bagian Halaman Home

Setelah bagian header dan footer jadi, sekarang kita akan

membuat halaman home dari website Anda dengan

membuat file index.php.

Nah, dalam file ini, kita akan memasukkan kode dari file

header.php dan footer.php dengan fungsi include di PHP.

Dengan fungsi ini, Anda tidak perlu lagi menulis ulang kode

dari header dan footer untuk membuat halaman home

yang lengkap.

1. Klik pada layar kosong di bawah folder images.

Lalu, klik icon file di samping kanan nama

folder website. Lalu, buat file baru dengan nama

index.php.
46

2. Masukkan kode dari file header.php dan

index.php dengan fungsi include PHP berikut ini.

Penjelasan:

• <?php include “...”; ?> untuk memasukkan

kode dari file header.php dan footer.php ke file

index.php.

3. Buat bagian heading halaman home dengan

memasukkan kode berikut di antara

header dan footer.

Penjelasan:

• <div class=”text-center bg-image”> untuk

membuat bagian heading yang terdiri dari

gambar dan teks di dalamnya.

• - <h1 class=”...”> untuk memasukkan teks dengan

ukuran h1. Bisa ganti bagian isi teks sesuai dengan

website Anda.

4. Buka folder CSS > style.css dan masukkan kode

berikut untuk mengatur tampilan atau

style background.
 47

Penjelasan:

• .bg-image,.text-hero dan .center menunjukkan

jika kode css tersebut untuk class bg-image dan

text-hero.

• Silahkan sesuaikan pengaturan seperti ukuran,

align, margin dan warna sesuai dengan

keinginan Anda, ya.

5. Kembali ke file index.php. Lalu, buat bagian

untuk menampilkan jasa atau produk yang Anda

tawarkan dengan melanjutkan kode berikut

di baris selanjutnya.
48

Penjelasan:

• <a id=”...”> untuk mengidentifikasi elemen tertentu

ketika ingin menghubungkan ke bagian lain.

• <section class=”...”> dan <div class=”...”> untuk

membuat section baru di halaman tersebut.

Misalnya dalam contoh ini untuk membuat section

bagian produk yang dijual.

• <h4 class=”text-center”>Kaos Oblong</h4> untuk

membuat teks yang berada di tengah. Anda bisa

ganti bagian Kaos Oblong sesuai dengan yang

Anda inginkan.

• - <img src=”images/t-shirt.jpg” …> untuk

memasukkan gambar t-shirt.jpg dari folder

images.

6. Buat form subscribe dengan memasukkan

kode berikut. Lalu, simpan file dengan tekan CTRL + S.

 49

Penjelasan:

• <a id=”...”> untuk mengidentifikasi elemen tertentu

ketika ingin menghubungkan ke bagian lain.

• <section class=”...”> dan <div class=”...”> untuk

membuat section baru di halaman tersebut.

Misalnya dalam contoh ini untuk membuat section

bagian produk yang dijual.

• <form action=”form.php”> untuk menghubungkan

bagian form ini dengan file form.php yang berisi

script koneksi PHP ke MySQL.

• <div class=”form-outline …> untuk membuat form

dengan jenis input nama dan email.

• <label class=”form-label” …> untuk membuat

label atau nama dari form yang Anda buat.

7. Kode di atas akan menghasilkan tampilan seperti

gambar di bawah. Cek dengan mengakses

localhost/namafolderwebsiteAnda pada

browser Anda.
50

E. Menghubungkan Form dengan Database

Sebelum Anda membuat halaman selanjutnya, Anda

harus menghubungkan form subscribe yang sudah dibuat

dengan database lebih dulu.

Nah, bagian ini sangat penting lho dalam membuat

website dengan PHP. Tanpa menghubungkan form dengan

database, semua data yang pengunjung masukkan tidak

akan tersimpan.

Untuk itu, Anda perlu menghubungkannya ke database

dengan cara membuat file form.php. Di dalamnya, kita

akan menulis script PHP supaya bisa terkoneksi dengan

database MySQL. Yuk, langsung kita buat!

1. Buka database di localhost dengan

mengakses localhost/phpmyadmin pada

browser Anda.
 51

2. Klik New di sebelah kiri untuk membuat database

baru. Lalu, masukkan nama database di kolom yang

tersedia dan klik Create.

3. Masukkan nama tabel database di kolom yang

tersedia. Lalu, pilih jumlah kolom sesuai kolom form

yang dibuat dan klik Create.

4. Di bagian Name, masukkan nama variabel sesuai

jenis data pada form yang dibuat. Misalnya name dan

email. Lalu, sesuaikan pengaturan seperti gambar di

bawah dan klik Save.

52

5. Kembali ke Visual Studio Code. Klik pada layar kosong

di bawah folder images. Lalu, klik icon file di samping

kanan nama folder website. Lalu, buat file baru dengan

nama form.php.

6. Masukkan kode di bawah untuk menghubungkan PHP

dengan database MySQL.

Penjelasan:

• <?php ?> untuk memulai dan menutup script PHP.

• $con = mysqli_connect untuk menghubungkan

PHP ke database MySQL.

• $name dan $email untuk memasukkan variabel

name dan email pada database.

• $sql = “INSERT INTO namatabeldatabaseAnda …”;

untuk memasukkan variabel yang ada ke tabel

database yang sudah dibuat.

 53

F. Membuat Bagian Halaman About dan Contact

Sekarang, menu Home, Service dan form subscribe sudah

bisa beroperasi. Tetapi, jika Anda klik menu About dan

Contact, pasti tidak akan menampilkan halaman apapun.

Ini karena kita belum membuat halaman dari kedua menu

tersebut. Untuk itu, pada tahap ini, kita akan membuat

halaman untuk menu About dan Contact.

1. Klik pada layar kosong di bawah folder images. Lalu,

klik icon file di samping kanan nama folder website.

Lalu, buat file baru dengan nama about.php dan

contact.php.

2. Masukkan kode dari file header.php dan index.php

dengan fungsi include PHP berikut ini ke dalam file

about.php dan contact.php.

3. Buat teks untuk halaman About dengan

memasukkan kode berikut ini di antara kode header

dan footer. Lalu, simpan file dengan tekan CTRL + S.

54

Penjelasan:

• <div class=”container my-5 text-center bg-light”

…> untuk membuat kolom teks yang posisinya

berada di tengah halaman website.

• style=”....” untuk mengatur style kolom teks

tersebut. Misalnya, tinggi halaman (height)

sebesar 550px.

• <p class=”mb-3”>Perusahaan …</p> untuk

membuat teks biasa dengan jarak spasi tertentu.

Anda bisa ganti isi teks sesuai dengan keinginan

Anda.

4. Buat teks untuk halaman Contact dengan

memasukkan kode berikut ini di antara kode header

dan footer. Lalu, simpan file dengan tekan CTRL + S.

5. Kode di atas akan menghasilkan tampilan seperti

berikut ini. Cek dengan klik menu About dan

Contact di website Anda.

55
56 Bab V

Cara Membuat
Website Online
Wow, Anda sudah berhasil membuat website dengan PHP!

Selamat, ya! Tetapi, ada yang kurang nih dari website Anda.

Sesuai dengan judul bab ini, website Anda harus dijadikan

online lebih dulu. Lho, sebelumnya belum online, ya?

Yup, meski website Anda sudah jadi dengan segala

fungsinya, tetapi belum bisa diakses oleh semua orang

secara online. Hal ini karena sebelumnya Anda membuat

website ini di localhost atau komputer.

Nah, untuk membuat website menjadi online, ada 2 hal nih

yang harus Anda lakukan. Pertama, Anda harus memesan

layanan hosting dan domain.

Selanjutnya, Anda harus memindahkan semua file dan

database website ke hosting yang Anda gunakan. Untuk

lebih lengkapnya, simak hingga tuntas penjelasan

berikut, yuk!

A. Memesan Domain dan Hosting

Untuk membuat website Anda menjadi online, Anda harus

memiliki domain dan hosting lebih dulu.

Nah, keduanya ini berperan dalam membuat website Anda

untuk mudah ditemukan dan dapat diakses di internet.

 57

Meski begitu, keduanya memiliki fungsi yang berbeda, tetapi

saling melengkapi. Gimana tuh maksudnya?

Domain adalah nama unik yang menjadi alamat atau

identitas dari website. Misalnya seperti blogsaya.com atau

qwords.com.

Dengan domain, website Anda jadi mudah untuk ditemukan

oleh siapapun. Tinggal mengetikkan blogsaya.com di

browser, website Anda langsung terbuka.

Sedangkan, hosting adalah server atau gudang

penyimpanan di mana semua file dan database website

Anda berada.

Jadi, setiap pengunjung mengetikkan blogsaya.com di

internet, browser akan meminta hosting mengirimkan

seluruh data website yang tersimpan. Setelah itu, browser

akan menampilkan website Anda di perangkat

pengunjung deh.

Nah, domain dan hosting ini bisa Anda dapatkan dengan

mengunjungi website Qwords.com.

B. Memindahkan File dan Database Website ke Hosting

Jika Anda sudah memiliki domain dan hosting, sekarang

saatnya memindahkan file dan database website Anda

dari localhost ke hosting.

58

Dalam setiap halaman website, pasti memiliki bagian

header yang sama. Misalnya saja seperti setiap halaman di

website Qwords.com.

Untuk itu, bagian pertama yang akan kita buat adalah

header dengan membuat file header.php. Yuk, simak

langkah-langkah di bawah ini!

Ada 6 langkah yang harus Anda lakukan untuk memindahkan

website dari localhost ke hosting, yaitu:

• Kompres folder website menjadi .zip.

• Ekspor database dari phpMyAdmin di localhost.

• Upload file website ke hosting.

• Membuat user dan database baru di hosting.

• Impor database dari localhost ke hosting.

• Ganti konfigurasi database di file .php.

Yuk, kita mulai memindahkan website dari localhost ke

hosting sekarang!

Langkah 1 - Kompres Folder Website menjadi .Zip

Untuk memindahkan website dari localhost ke hosting, kita

akan mengompres seluruh file website dalam satu file .zip.

Simak cara berikut ini, ya!

1. Masuk ke /C/xampp/htdocs. Atau ke lokasi folder

website Anda disimpan.

 59

2. Klik kanan pada folder website. Lalu, pilih Send to

Compressed (zipped) folder.

Langkah 2 - Ekspor Database dari phpMyAdmin di Localhost

Sebelumnya, kita ada membuat database untuk menyimpan

data dari form subscribe. Nah, database ini harus diekspor

lebih dulu dari phpMyAdmin di localhost. Simak langkah-

langkah di bawah ini, ya!

1. Pastikan Anda sudah mengaktifkan Apache dan

MySQL di XAMPP lebih dulu, ya.

60

2. Buka phpMyAdmin di localhost dengan mengakses

localhost/phpMyAdmin di browser.

3. Pilih database yang ingin diekspor di sebelah kiri. Lalu,

klik Export pada menu bar di sebelah kanan.

4. Pilih Quick untuk Export method dan SQL untuk Format

Bagian Export templates abaikan saja, ya.

Lalu, klik Export.

5. File database akan diunduh secara otomatis dalam

bentuk .sql.
 61

Langkah 3 - Upload File Website ke Hosting

Nah, semua file dan database website sudah selesai kita

download. Selanjutnya, kita akan upload file website ke

hosting yang digunakan.

Dalam contoh ini, kami akan menggunakan cPanel.

1. Login ke akun cPanel Anda dengan mengakses

halaman https://namadomain:2083 di browser.

2. Pilih menu File Manager di bagian Files.

62

3. Klik folder public_html di sebelah kanan

untuk menyimpan semua file website. Lalu, klik menu

Upload di bagian atas halaman.

4. Klik Select File dan pilih file mywebsite.zip yang sudah

Anda download sebelumnya. Tunggu hingga proses

uploading selesai.

5. Klik link Go Back to di bagian bawah kanan untuk

kembali ke folder public_html.

 63

6. Di sana terdapat file mywebsite.zip yang sudah Anda

upload. Ekstrak file dengan klik kanan pada file

> Extract.

7. Masukkan /public_html di kolom yang tersedia

sebagai direktori tempat file website Anda disimpan.

Lalu, klik Extract Files.

8. Masuk ke folder mywebsite yang sudah Anda ekstrak.

Lalu, pindahkan semua file ke folder /public_html

dengan klik kanan > Move.

64

9. Masukkan /public_html pada kolom yang tersedia

Lalu, klik Move Files.

Langkah 4 - Buat User dan Database Website di Hosting

Sebelum import database website ke hosting, Anda harus

membuat user dan database baru lebih dulu di cPanel. Jadi,

jangan keluar dari cPanel Anda dulu, ya.

1. Pilih menu MySQL Database di bagian Databases.

 65

2. Masukkan nama database baru untuk website

Anda di bagian Create New Database. Pastikan nama

database di cPanel dan localhost sama, ya.

Lalu, klik Create Database.

3. Scroll ke bawah sampai di bagian Add New User.

Masukkan username dan password di kolom yang

tersedia. Lalu, klik Create User.

66

4. Scroll lagi ke bawah sampai di bagian Add User To

Database. Pilih user dan database yang sudah dibuat.

Lalu, klik Add.

5. Anda akan langsung diarahkan ke bagian Manage

User Privileges. Klik checkbox All Privileges. Lalu, klik

Make Changes.

Langkah 5 - Import Database Website ke Hosting

Sebagai langkah terakhir, kita akan import database website

yang sudah kita download sebelumnya ke hosting.

1. Pilih menu phpMyAdmin di bagian Databases.

 67

2. Pilih database yang baru Anda buat sebelumnya di

sebelah kiri. Lalu, klik Import pada menu bar

di sebelah kanan.

3. Klik Choose File di bagian File to Import. Lalu, pilih file

database dalam format .sql yang sudah Anda ekspor

sebelumnya.

4. Klik Go.

Langkah 6 - Ganti Konfigurasi Database di File .PHP

Sebelumnya, saat membuat form subscribe di website,

kita menghubungkan file .php tersebut dengan database

MySQL.
68

Nah, karena database sudah pindah ke hosting, Anda harus

mengganti username dan password dengan sudah dibuat

sebelumnya.

1. Pilih menu File Manager di bagian Files.

2. Pilih folder public_html dan cari file form.php. Lalu,

cari baris seperti gambar di bawah.

3. Ganti bagian root menjadi username database user

di hosting yang baru Anda buat tadi. Lalu, ganti bagian

‘ ‘ dengan password database user yang baru Anda

buat.

4. Ganti bagian namadatabaseAnda dengan nama

database di hosting yang juga baru Anda buat. Lalu,

klik Save Changes.

Bab V 69

Selamat, Ya! Website

Anda Sudah Online!

Gimana nih

pengalaman pertama

Anda membuat

website dengan PHP?

Sangat seru dan

menantang, bukan?

Meski dengan segala

kerumitannya, Anda

nyatanya berhasil

membuat website

dengan PHP sampai

online. Ini menjadi bukti kalau PHP tidak sesulit itu

untuk dipelajari.

Dengan PHP, Anda bisa lebih fleksibel dalam membuat

website tanpa ada batasan template maupun fitur. Mau

membuat website untuk company profile, absensi karyawan

atau bahkan CMS sendiri, semuanya bisa.

Anda juga tidak perlu mengeluarkan modal besar di awal

untuk membuat website dengan PHP. Cukup install XAMPP

dan Visual Studio Code secara gratis, website Anda sudah

siap dibangun.
70

Selain PHP, ada banyak bahasa pemrograman lainnya yang

juga harus Anda pelajari untuk membangun website yang

lebih kompleks dan tentunya menarik. Seperti Javascript

yang siap membuat website Anda menjadi lebih atraktif.

Tenang saja, tidak perlu susah mencari sumber di internet,

cukup subscribe Qwords dan nantikan deretan e-book dari

kami yang siap membantu Anda. Jadi, sampai jumpa di

e-book selanjutnya, ya!

 71

www.qwords.com