Modul 3

PHP Fundamental

1
 REQUIREMENT
1. Web Browser (Google Chrome/Chromium (Ms Edge, Opera) atau Firefox)
2. Source Code Editor (disarankan Visual Studio Code)
3. XAMPP Web Server (atau yang sepadan) (tutorial instalasi ada di modul)
4. Version Control System & GitHub (tutorial install Git ada di modul)

DAFTAR ISI
Silakan skip ke bagian tertentu sesuai kebutuhan kalian :)

1. Instalasi Web Server ............................................................................................................. 1

2. PHP Introduction.................................................................................................................. 4
3. Syntax, Operators, Conditional Statements, Loops ............................................................. 5
4. User Input & File Upload Handling..................................................................................... 8
5. Session Management ......................................................................................................... 12
6. GUIDED ............................................................................................................................ 14

PENJELASAN
Instalasi Web Server
PHP berbeda dengan HTML di mana halaman HTML dapat dibuka secara langsung
tanpa memerlukan “penerjemah”, di sisi lain halaman PHP memerlukan sebuah web server
yang men-support bahasa PHP agar semua code PHP dapat “diterjemahkan” menjadi code
HTML. Pada mata kuliah ini, kita akan menggunakan web server dari XAMPP. Langkah-
langkah mengunduh dan menginstal XAMPP:

1. Buka situs web https://www.apachefriends.org/ kemudian download dan jalankan installer

versi terbaru sesuai OS (versi 8.2.12 per 23 Juli 2024)

Jika muncul warning berikut, klik “OK”:

1
2. Pada saat menentukan component, disaranken menginstall minimal komponen berikut:

3. Ketika ditanya installation folder, disaranakn diinstall di drive C, default: C:\xampp

4. Klik next hingga instalasi dimulai.

2
 Apabila ada notifikasi Windows Defender, pilihlah yang private dan public network

5. Setelah instalasi selesai, centang “Do you want to start the control panel now?” kemudian
klik Finish untuk membuka control panel.

6. Control panel akan terbuka, aktifkan bagian service Apache (dan MySQL jika ingin)

3
 Jika ada error saat hendak menjalankan Apache, silakan tanya mbah Google dulu :)
7. Selamat! Web Server sudah diinstall dengan PHP. Untuk membuka halaman web,
silakan klik tombol “Admin” yang ada di sebelah tombol “Start/Stop” module Apache

PHP Introduction
PHP adalah sebuah bahasa pemrograman yang digunakan untuk mengembangkan situs
web dinamis. PHP adalah bahasa server-side yang berarti kode PHP dijalankan di web server
dan hasil (output) dikirim ke browser sebagai halaman web yang sudah jadi. Berbeda dengan
beberapa bahasa lain seperti C atau Java yang merupakan compiled language, PHP adalah salah
satu jenis interpreted language, ini berarti kita tidak perlu meng-compile ulang project kita
setelah melakukan update file.

PHP umumnya digunakan untuk menghasilkan konten web yang dapat berubah atau di-
customise untuk setiap user, contohnya halaman web yang berisi data dari database, formulir
interaktif, dan lainnya. Sebenarnya output dari PHP tidak selamanya merupakan halaman
HTML (defaultnya memang HTML), tetapi bisa juga kita atur dalam bentuk JSON, XML, atau
format lain.

Dengan mendownload XAMPP Web Server, kita sudah otomatis mendownload PHP
juga. Di XAMPP, PHP diinstall di module Apache.

4
Syntax, Operators, Conditional Statements, Loops
Syntax: Sama seperti semua bahasa pemrograman, tentu ada extension khusus untuk
membuat file PHP: .php. Setelah membuat file ini, kita menggunakan opening tag ‘<?php’
dan closing tag ‘?>’ untuk menandai bagian code PHP yang akan dievaluasi (di-execute) dulu
sebelum ditampilkan di web browser.

1 <?php /* Kode PHP disini */ ?>

2 <p>Ini adalah contoh elemen HTML di luar tag PHP</p>
3 <?php /* Ini adalah lanjutan code PHP */ ?>

Sama seperti bahasa lain, PHP juga memiliki variabel. Variabel adalah ‘wadah’ untuk
menyimpan data. Setiap variabel memiliki tipe data yang menentukan jenis data yang dapat
disimpan di dalamnya. Beberapa tipe data dasar dalam PHP antara lain:

1. String: digunakan untuk menyimpan teks, seperti nama atau pesan. String dapat
dideklarasikan dengan tanda kutip ganda atau tunggal, contoh:
1 $nama = "John"; // valid
2 $nama = 'John'; // valid
3 $nama = John; // tidak valid

2. Integer: digunakan untuk menyimpan bilangan bulat, contoh:

1 $umur = 17;

3. Float (desimal): digunakan untuk menyimpan angka desimal, contoh:

1 $nilai = 93.4;

4. Boolean: hanya memiliki 2 value: ‘true’ (benar) atau ‘false’ (salah), contoh:
1 $lulus = true;
2 $remedial = false;

5
 Perlu diingat bahwa PHP adalah weakly typed language mirip seperti JS. Ini berarti
semua variabel dalam PHP tidak perlu dideklarasi dengan tipe tertentu dan berarti kita
dapat mengubah sebuah variabel yang semula String menjadi Integer tanpa error.

1 // Deklarasi awal
2 $inputan = "Hello, world";
3
4 // Mengubah menjadi angka:
5 $inputan = 90.2;

Sama seperti bahasa lain, bahasa PHP juga memiliki naming convention (pola
penamaan). Saat kita memberi nama variabel dalam PHP, baiknya kita mengikuti pola
penamaan dengan benar:

• Nama variabel harus diawali dengan tanda dollar ($) diikuti oleh huruf atau garis bawah.
• Variabel dianggap case-sensitive, artinya ‘$nama’ dan ‘$Nama’ dianggap berbeda.
• Sebaiknya berikan nama variabel yang deskriptif sehingga mudah dipahami dan
didokumentasikan, misalnya gunakan ‘$umur’ daripada ‘$u’.
• Gunakan gaya penamaan yang konsisten dalam seluruh project. Pilih antara camelCase atau
snake_case dan stick with it (pertahankan gaya yang sama).
• Hindari menggunakan reserved word seperti ‘$if’, ‘$else’, atau ‘$echo’.

Contoh penamaan yang baik:

Contoh penamaan yang kurang baik (namun tidak ada error):

Operators: Operator dasar yang sering digunakan dalam PHP itu sama seperti operator
dasar dalam bahasa JavaScript (yang mirip juga seperti C dan Java). Secara singkat, beberapa
jenis operator dalam PHP antara lain:

• Aritmetika (cth +, -, *, /, %, **)

• Assignment (cth. =, +=, -=, *=, /=. %/)

6
• Comparison (cth. ==, ===, != atau <>, !==, >, <, >=, <=, dan <=> )
• Increment/decrement (cth. ++$x, $x++, --$y, $y--)
• Logical (cth. &&, ||, !, XOR)

(Hampir) semua operator dasar ini tentu sudah diketahui sejak Dasar Pemrograman.
Ada beberapa operator yang mungkin cukup asing:

• $x === $y atau $x !== $y: Memastikan bahwa $x benar-benar sama/tidak sama dengan
$y
• $x <=> $y: Spaceship operator, dipakai kalau ada sorting. “Mengembalikan bilangan bulat
yang kurang dari, sama dengan, atau lebih besar dari nol, bergantung pada apakah $x lebih
kecil, sama dengan, atau lebih besar dari $y.”
• $x XOR $y: Exclusive OR

Conditional Statements: Dalam PHP ada statement ‘if’, ‘else’, ‘elseif’, dan ‘switch’.

1 $umur = 10;
2 if ($umur >= 17) {
3 echo "Anda sudah boleh buat KTP";
4 } else if ($umur >= 5) {
5 // 'elseif' juga boleh dipisah menjadi 'else if'
6 echo "Anda boleh membuat KIA 5+";
7 } else {
8 echo "Anda boleh membuat KIA 0+";
9 }

7
 1 $status = "jomblo";
2 switch($status) {
3 case "jomblo":
4 echo "Kamu jomblo, yaudah";
5 break;
6 case "pacaran":
7 echo "Kamu pacaran, selamat ya";
8 break;
9 default:
10 echo "Kamu apa sih?";
11 }

Perulangan: Dalam PHP ada perulangan ‘for’, ‘while’, ‘do…while’, dan ‘foreach’.
Syntax for, while, dan do…while sama seperti yang sudah dipelajari di C, Java, dan JS,
sedangkan syntax foreach adalah:

Code: Output:

User Input & File Upload Handling

User Input: Kita sudah mempelajari HTML Form di pertemuan sebelumnya, namun
form tersebut masih statis (tidak ada pemrosesan data). Dengan menggunakan PHP, kita bisa
mendapat data yang telah diinput di form tersebut.

8
 Beberapa method yang digunakan untuk mengirim form dari halaman HTML antara
lain GET dan POST. Sebenarnya masih ada method-method lain tetapi akan dibahas di modul
Laravel. Jika kita perhatikan pada sebuah HTML form, ada beberapa atribut yang penting:

1 <form action="modul3.php" method="post">

2 <input name="nama" type="text" placeholder="Nama" /> <br/>
3 <input type="radio" name="gender" value="XX" /> Laki-laki
4 <input type="radio" name="gender" value="XY" /> Perempuan <br/>
5
6 <input type="submit" value="Kirim" />
7 </form>

• Pada line 1, ada atribut:

o action: ke mana form akan diproses ketika klik tombol Submit.
o method: metode pengiriman data ke web server (antara GET atau POST).
• Pada line 2, 3, 4, ada atribut:
o name: nama dari input field yang bisa dibaca oleh web server ketika form di-submit.
• Pada line 3 dan 4, ada atribut:
o value: value yang akan di kirim ke web server (jika bukan inputan bebas cth.
radio/checkbox)

Kemudian bagaimana cara membaca form yang sudah disubmit ke web server?
Mengikuti contoh di atas, maka di halaman “modul3.php” kita bisa menambah code:

1 $nama = $_POST["nama"];
2 $gender = $_POST["gender"];
3
4 echo "Nama : " . $nama . "<br>";
5 echo "Gender : " . $gender . "<br>";

Apa itu $_POST? $_POST dan $_GET adalah variabel khusus dalam PHP yang
menyimpan value dari form yang sudah kita submit ke web server. Jika kita perhatikan
Namanya, berarti $_POST digunakan untuk membaca form yang disubmit menggunakan
method POST, dan $_GET digunakan untuk membaca form yang disubmit menggunakan
method GET. Pada line 4 dan 5, kita mencoba menampilkan nama dan gender yang sudah diisi.

$_POST[“gender”] berarti kita meminta PHP memberi kita value dari field dengan
name=”gender”.

Misal kita punya data berikut pada form:

9
 Maka ketika kita klik”Kirim”, yang akan tampil adalah:

Kenapa gender XX bukan Laki-laki? Silakan perhatikan kembali penjelasan di atas

File Upload: Kita bisa mengupload file ke web server melalui HTML form dengan
method POST dan enctype=multipart/form-data. Untuk bisa memilih file, kita
menambahkan sebuah input type=file. Contohnya:

1 <form action="upload.php" method="post" enctype="multipart/form-data">

2 <input type="file" name="berkas" id="berkas" />
3 <input type="submit" value="Kirim" />
4 </form>

Dari contoh di atas, kita akan mengirim sebuah file ke web server dengan
name=”berkas”. Kemudian bagaimana cara mendapatkan file tersebut? Dalam PHP, sudah ada
sebuah variabel khusus yang menampung file kita yakni $_FILES, dengan demikian kita bisa
membaca “berkas” yang telah di-upload dengan memanggil $_FILES[“berkas”]. Contoh
output dari variabel ini adalah:

1 $_FILES["berkas"]["name"]; // nama file

2 $_FILES["berkas"]["type"]; // tipe file (ekstensi)
3 $_FILES["berkas"]["size"]; // ukuran file (byte)
4 $_FILES["berkas"]["tmp_name"]; // lokasi file sementara
5 $_FILES["berkas"]["error"]; // kode error
6 $_FILES["berkas"]["full_path"];

Variabel $_FILES[“berkas”][“tmp_name”] adalah variabel terpenting karena

menyimpan lokasi file sementara yang telah diupload sebelum disimpan di disk kita.

Secara sederhana, kita bisa memproses upload dan menyimpan file dengan cara
menambahkan kode berikut di upload.php:

10
 1 if (isset($_FILES["berkas"]["name"])) {
2 // Directory tujuan upload file
3 $folderTujuan = "upload/";
4 $namaBerkas = basename($_FILES["berkas"]["name"]);
5 $alamatFile = $folderTujuan . $namaBerkas;
6
7 // Upload file
8 if (move_uploaded_file($_FILES["berkas"]["tmp_name"], $alamatFile)) {
9 echo "File berhasil diupload";
10 } else {
11 echo "File gagal diupload";
12 }
13 }

Perhatikan $folderTujuan: pastikan sudah ada folder “uploads” di satu folder yang
sama dengan file upload.php agar file bisa disimpan.

Untuk mengujicoba, kita bisa mengupload salah satu file yang kita miliki ke form yang
telah dibuat, contohnya:

Setelah kita klik “Kirim”, akan muncul:

Kemudian perhatikan folder “upload” tadi, akan muncul file yang sudah kita upload:

Info: mungkin teman-teman mengalami gagal upload karena satu dan lain hal,
kemungkinan besar itu karena ukuran file yang ingin diupload melebihi max yang sudah
ditentukan oleh PHP. Untuk mengatasinya, silakan cari di Google “php increase max upload
size xampp”.

11
Session Management
Session adalah cara kita untuk menyimpan informasi tentang user yang sedang
menggunakan situs web. Sebuah session biasanya digunakan untuk menyimpan informasi yang
harus tetap ada selama pengguna menjelajah situs web kita, seperti data login, keranjang
belanja, preferensi pengguna, atau informasi lain yang perlu dipertahankan di antara
permintaan halaman. Beberapa syntax dalam menggunakan session:

1. Inisialisasi sesi: kita bisa menginisialisasi session dengan menggunakan ‘session_start()’

di awal file PHP
1 <?php
2 session_start();

2. Menyimpan dan mengakses data: kitab isa menyimpan dan mengakses data session
dengan menggunakan variabel ‘$_SESSION’. Data ini bisa kita baca selama kita sudah
menginisialisasi sesi di halaman PHP tersebut.

Kita juga bisa menyimpan array pada session, contohnya:

3. Menghapus sesi: kita bisa menghapus semua data sesi dengan memanggil
‘session_destroy()’. Pastikan memanggil session_destroy() setelah kita inisialisasi sesi
(‘session_start()’).
1 session_start();
2 session_destroy();

12
 Contoh penggunaan session sebagai berikut:

session.php:

session2.php:
1 <?php
2 // Memulai sesi
3 session_start();
4
5 // Membaca sesi yang telah disimpan
6 echo "Nama : " . $_SESSION["nama"] . "<br />";
7 echo "NPM : " . $_SESSION["npm"] . "<br />";
8
9 echo "Yey, sesi berhasil dibaca <br />";

Ketika kita menjalankan code tersebut di halaman session.php, maka yang muncul
adalah:

Ketika kita klik link tersebut, maka kita akan membuka session2.php dan yang akan
tampil adalah:
NAMA : Thessalonica
NPM: 210711123
Yey, sesi berhasil dibaca
Selamat! Kita sudah menyelesaikan fundamental PHP. Selamat mengerjakan guided.

13
 GUIDED
1. Buatkan sebuah folder dengan nama “PW3_X_YYYYY” (X = kelas, Y = 5-digit NPM)
yang akan menjadi folder utama (root folder) project. Folder ini dibuat di dalam XAMPP
htdocs Folder (default: C:\xampp\htdocs)

Kalau bingung folder htdocs letaknya di mana, cari saja di Windows Search “xampp htdocs
folder”, nanti akan muncul folder yang dimaksud.

Kalau kalian baru pertama kali membuka folder htdocs, mungkin akan muncul file-file
default, semuanya boleh dihapus saja.

2. Download asset yang dibutuhkan: https://github.com/charliepalangan/assetGD3_web.git ,

ditempatkan di dalam folder “assets” sehingga susunan folder kelihatan seperti ini:

Catatan: kalau tidak mau pakai gambar dan/atau yang dikasih silakan diganti saja.

14
3. Di dalam folder utama (root projeect), buatkan file “index.php”

Diisi dengan code:

a. Deklarasi variabel PHP yang akan digunakan di halaman:

b. Tag head dari halaman HTML:

Variabel yang dideclare di line 6-11 digunakan di line 26 dan 30.

Contoh cara meng-echo (mem-print) variabel PHP: <?php echo $variabel;?>
Bisa juga lebih singkat menggunakan <?=$variabel?> tetapi mungkin belum di-enable
di XAMPP kalian

15
 c. Navbar:
<body>
<header class="fixed-top" id="navbar">
<nav class="container d-flex justify-content-between align-items-center py-2">

<a href="./" class="rounded py-2 px-3 d-flex align-items-center nav-home-btn "

style="background-color: #EE4D2D;">
<img src="<?php echo $detail['logo']; ?>" class="crown-logo" />
<div>
<p class="mb-0 fs-5 fw-bold text-"><?php echo $detail['name']; ?></p>
<p class="small mb-0"><?php echo $detail['tagline']; ?></p>
</div>
</a>

<ul class="nav nav-pills">

<li class="nav-item">
<a href="#" class="nav-link active text-white" aria-current="page"
style="background-color: #EE4D2D;">Home</a>
</li>
<li class="nav-item ms-3">
<a href="./login.php" class="nav-link" style="color: #EE4D2D;">Admin
Login</a>
</li>
</ul>

</nav>
</header>

d. Carousel untuk menampilkan gambar:

16
 Line 74 dan 88 menggunakan foreach utk menampilkan variabel $gambar dari line 14.
Perhatikan juga cara penggunaan syntax ternary di line 81 dan 91.

e. Menambah beberapa “featurette”

Tambahkan nama dan NPM kalian di line 124 dan 127.

f. Menambah footer:
<!-- FOOTER -->
<div class="container">
<footer class="d-flex flex-wrap justify-content-between align-
items-center py-3 my-4 border-top">
<div class="col-md-4 d-flex align-items-center">
<span class="mb-3 mb-md-0 text-body-light">© 2024
<?php echo $detail["name"], $detail["user"]; ?></span>
</div>
</footer>
</div>
</main>

<!-- Bootstrap 5.3 JS -->

<script src="./assets/js/bootstrap.min.js"></script>

<!-- Custom JS untuk Navbar -->

<script src="assets/js/home-nav.js"></script>
</body>

</html>

17
4. Di dalam folder utama, buatkan lagi file “login.php” diisi dengan code:
a. Deklarasi variabel PHP yang akan digunakan di halaman:

b. Isi tag head dari halaman HTML (kurang lebih sama dengan halaman index.php, tapi
ada penambahan tag <style>)

18
c. Tambahkan header (kurang lebih sama dengan halaman index.html, beda sedikit di line
61-62 file login.php)

d. Tambahkan bagian utama halaman (form login)

19
Perhatikan:
• Line 76: saat klik submit, akan di-direct ke halaman “./processLogin.php”.
Method=POST dan enctype=”multipart/form-data” agar bisa mengirim file (di line
102)
• Line 84: ada $_SESSION[“error”] → karena variabel session bisa dibaca di
halaman mana saja, kita bisa mengeset error dari halaman “./processLogin.php” dan
error itu akan dibaca di halaman login.php.
• Line 89: setelah kita menampilkan error, jangan lupa di-unset (dihapus) agar tidak
muncul lagi saat reload halaman.
• Line 112: karena semua input/select/textarea yang punya atribut “name” akan
dikirim dalam form, kita bisa mengirimkan “mencoba_login=1” supaya di backend,
kita tau kalau user sedang mencoba login.

20
 • Line 94, 98, 105, dan 112: ada atribut “name=…” berarti inputan2 ini yang akan
dikirim ke backend
5. Di dalam folder utama, buatkan lagi file “processLogin.php”. Halaman ini digunakan
sebagai backend untuk memproses request login. Diisi dengan code:
a. Check kalau user sudah login atau belum, kalau sudah redirect ke halaman
dashboard.php (akan dibuat nanti)

b. Check apakah user mencoba_login? → kalau iya, check username & password sudah
diisi atau belum

Perhatikan line 18: jika ada error, kita mengeset error tersebut. Kemudian di line 21,
kita redirect user kembali ke login.php, dan error itu akan dibaca dan ditampilkan.
c. Proses bukti sedang ngantor

21
 Cara upload & simpan file sama seperti yang dijelaskan di modul. Pastikan folder
“bukti_ngantor” dibuat juga di root folder!
d. Set user dan redirect ke halaman dashboard

Di line 51, kita menyimpan link ke bukti kantor, karena gambar tersebut akan di show
di halaman dashboard.php

Di line 53, kita menambahkan waktu login (waktu saat ini) menggunakan function
date(FORMAT_OUTPUT).

6. Di dalam folder utama, buatkan lagi file “dashboard.php” diisi dengan code:
a. Deklarasi variabel yang akan digunakan

22
<?php
session_start();

if (!isset($_SESSION["user"])) {
header("Location: ./login.php");
exit;
}

if (!isset($_SESSION["room_list"])) {
$_SESSION["room_list"] = [];
}

$detail = [
"name" => "Atma Kitchen",
"tagline" => "Restaurant & Bar",
"page_title" => "Atma Kitchen Restaurant & Co",
"logo" => "./assets/images/HatCook.png",
"user" => " nama/npm"
];

?>

b. Tag head (kurang lebih sama seperti index.php dan login.php, perhatikan perbedaan tag
<style>

23
c. Header (kurang lebih sama dengan index.php dan login.php, tapi perhatikan perbedaan
isi navigasi di line 65-73):

d. Isi konten utama:

24
7. Terakhir, di dalam folder utama buatkan file “processLogout.php” diisi dengan code:
1 <?php
2 session_start();
3
4 if (isset($_SESSION["user"]["bukti_ngantor"])) {
5 // Hapus bukti sedang ngantor menggunakan fungsi unlink()
6 unlink($_SESSION["user"]["bukti_ngantor"]);
7 }
8
9 // Hapus session user
10 session_destroy();
11
12 // Redirect ke halaman login
13 header("Location: ./login.php");

Perhatikan line 6: cara menghapus file bisa dengan menggunakan function unlink()
Setelah selesai GD, struktur folder kalian akan menjadi seperti ini:

Cara Menjalankan Guided

Untuk menjalankan Guided, silakan buka XAMPP Control Panel kemudian hidupkan module
Apache. Setelah module hidup, klik “Admin”, nanti akan terbuka halaman web XAMPP.

Setelah halaman web XAMPP terbuka, tambahkan path ke folder GD (di dalam folder htdocs
XAMPP) di dalam URL website.

25
Jadi, semisal folder GD disimpan di <folder htdocs>\PW3_X_YYYYY → berarti cara
mengaksesnya di web: <localhost>/PW3_X_YYYYY.

→
Format pengumpulan GD:
Project diupload ke GitHub dengan nama repository = PW3_X_YYYYY dan visibility =
private.
X = kelas
Y = 5-digit NPM

Catatan Pengumpulan:
• Setelah diupload, invite collaborator charliepalangan.
• Kumpulkan link HTTPS nya di situs kuliah (cara copy link ada di uploader sitkul).
• Tata cara pengumpulan yang lebih detail ada di situs kuliah.
• Dikumpulkan di situs kuliah, maks. 2 jam setelah selesai sesi.

Note: code ada yang bisa dicopas dan ada juga yang tidak, makasih.

Tetap Semangat walaupun masih mengerjakan Tugas

HORAS!!!

26