Panduan Lengkap Docker untuk DevOps: Automasi Aplikasi Web

Daftar Isi

Pengantar PHP
Instalasi dan Setup PHP
Dasar-dasar PHP
PHP dan Database MySQL
Pengantar Bootstrap 3
Struktur dan Grid System Bootstrap 3
Komponen Bootstrap 3
Membangun CMS Sederhana dengan PHP & Bootstrap 3
Source Code Lengkap
Referensi dan Channel Pembelajaran Lainnya

1. Pengantar PHP

PHP (Hypertext Preprocessor) adalah bahasa pemrograman server-side yang banyak digunakan untuk membangun website dinamis dan aplikasi web. PHP dapat menyisipkan kode ke dalam HTML dan berinteraksi dengan database untuk menghasilkan konten yang dinamis.

Ilustrasi kode PHP yang berjalan di server menghasilkan halaman web dinamis

PHP sangat populer karena mudah dipelajari, memiliki komunitas besar, dan didukung oleh banyak hosting provider.

2. Instalasi dan Setup PHP

Untuk mulai belajar PHP, Anda perlu menginstal web server dan PHP di komputer Anda. Cara termudah adalah menggunakan paket software seperti XAMPP atau MAMP yang sudah menggabungkan Apache, PHP, dan MySQL.

Download XAMPP dari https://www.apachefriends.org
Install XAMPP sesuai sistem operasi Anda
Jalankan Apache dan MySQL dari control panel XAMPP
Buat folder project di dalam htdocs (misal: htdocs/myproject )
Buka browser dan akses http://localhost/myproject

Screenshot tampilan control panel XAMPP dengan tombol start Apache dan MySQL

3. Dasar-dasar PHP

Berikut adalah contoh kode PHP sederhana yang menampilkan teks "Hello, World!".

<?php
  echo "Hello, World!";
?>

PHP menggunakan tag <?php ?> untuk menulis kode. Fungsi echo digunakan untuk menampilkan output ke browser.

Variabel dan Tipe Data

Variabel di PHP diawali dengan tanda $ . Contoh:

<?php
  $nama = "Budi";
  $umur = 25;
  echo "Nama saya $nama dan umur saya $umur tahun.";
?>

Kontrol Alur: If, Else, dan Loop

Contoh penggunaan if-else dan loop for:

<?php
  $nilai = 80;
  if ($nilai >= 75) {
    echo "Lulus";
  } else {
    echo "Tidak lulus";
  }

  for ($i = 1; $i <= 5; $i++) {
    echo "Nomor: $i <br>";
  }
?>

4. PHP dan Database MySQL

PHP dapat berinteraksi dengan database MySQL untuk menyimpan dan mengambil data. Berikut contoh koneksi dan query sederhana menggunakan MySQLi:

<?php
  $host = "localhost";
  $user = "root";
  $pass = "";
  $db = "mydatabase";

  $conn = new mysqli($host, $user, $pass, $db);

  if ($conn->connect_error) {
    die("Koneksi gagal: " . $conn->connect_error);
  }

  $sql = "SELECT * FROM users";
  $result = $conn->query($sql);

  if ($result->num_rows > 0) {
    while($row = $result->fetch_assoc()) {
      echo "ID: " . $row["id"] . " - Nama: " . $row["nama"] . "<br>";
    }
  } else {
    echo "0 hasil";
  }

  $conn->close();
?>

Pastikan Anda sudah membuat database dan tabel users dengan kolom id dan nama .

Diagram ilustrasi koneksi PHP ke database MySQL dengan query SELECT

5. Pengantar Bootstrap 3

Bootstrap 3 adalah framework CSS yang memudahkan pembuatan tampilan website yang responsif dan modern. Bootstrap menyediakan komponen siap pakai, grid system, dan utilitas CSS.

Untuk menggunakan Bootstrap 3, Anda bisa menambahkan link CDN berikut di bagian <head> HTML Anda:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">

6. Struktur dan Grid System Bootstrap 3

Bootstrap 3 menggunakan sistem grid 12 kolom yang fleksibel untuk membuat layout responsif. Contoh struktur grid:

<div class="container">
  <div class="row">
    <div class="col-md-6">Kolom 1</div>
    <div class="col-md-6">Kolom 2</div>
  </div>
</div>

Container membungkus seluruh konten dan memberikan padding. Row adalah baris yang berisi kolom. Col-md-6 artinya kolom tersebut mengambil 6 dari 12 kolom pada layar medium ke atas.

Ilustrasi grid system Bootstrap 3 dengan 2 kolom berukuran sama

7. Komponen Bootstrap 3

Bootstrap 3 menyediakan banyak komponen siap pakai seperti tombol, navbar, form, panel, dan lain-lain.

Contoh Tombol

Contoh Navbar

Contoh Form

8. Membangun CMS Sederhana dengan PHP & Bootstrap 3

Berikut adalah langkah-langkah membuat CMS sederhana untuk mengelola artikel menggunakan PHP dan Bootstrap 3.

Langkah 1: Buat Database dan Tabel

CREATE DATABASE cms_db;
USE cms_db;

CREATE TABLE articles (
  id INT AUTO_INCREMENT PRIMARY KEY,
  title VARCHAR(255) NOT NULL,
  content TEXT NOT NULL,
  created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

Langkah 2: Koneksi Database (db.php)

<?php
$host = "localhost";
$user = "root";
$pass = "";
$db = "cms_db";

$conn = new mysqli($host, $user, $pass, $db);

if ($conn->connect_error) {
  die("Koneksi gagal: " . $conn->connect_error);
}
?>

Langkah 3: Halaman Daftar Artikel (index.php)

<?php
include 'db.php';

$sql = "SELECT * FROM articles ORDER BY created_at DESC";
$result = $conn->query($sql);
?>

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Daftar Artikel</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
</head>
<body>
<div class="container">
  <h1>Daftar Artikel</h1>
  <a href="create.php" class="btn btn-primary">Tambah Artikel</a>
  <table class="table table-striped">
    <thead>
      <tr>
        <th>ID</th>
        <th>Judul</th>
        <th>Tanggal</th>
        <th>Aksi</th>
      </tr>
    </thead>
    <tbody>
      <?php
      if ($result->num_rows > 0) {
        while($row = $result->fetch_assoc()) {
          echo "<tr>";
          echo "<td>" . $row["id"] . "</td>";
          echo "<td>" . htmlspecialchars($row["title"]) . "</td>";
          echo "<td>" . $row["created_at"] . "</td>";
          echo "<td><a href='edit.php?id=" . $row["id"] . "' class='btn btn-warning btn-xs'>Edit</a> ";
          echo "<a href='delete.php?id=" . $row["id"] . "' class='btn btn-danger btn-xs' onclick='return confirm(\"Yakin ingin hapus?\")'>Hapus</a></td>";
          echo "</tr>";
        }
      } else {
        echo "<tr><td colspan='4'>Tidak ada artikel</td></tr>";
      }
      ?>
    </tbody>
  </table>
</div>
</body>
</html>

Langkah 4: Form Tambah Artikel (create.php)

<?php
include 'db.php';

if ($_SERVER["REQUEST_METHOD"] == "POST") {
  $title = $_POST["title"];
  $content = $_POST["content"];

  $stmt = $conn->prepare("INSERT INTO articles (title, content) VALUES (?, ?)");
  $stmt->bind_param("ss", $title, $content);
  $stmt->execute();
  $stmt->close();

  header("Location: index.php");
  exit;
}
?>

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Tambah Artikel</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
</head>
<body>
<div class="container">
  <h1>Tambah Artikel</h1>
  <form method="POST">
    <div class="form-group">
      <label for="title">Judul</label>
      <input type="text" class="form-control" id="title" name="title" required />
    </div>
    <div class="form-group">
      <label for="content">Isi Artikel</label>
      <textarea class="form-control" id="content" name="content" rows="5" required></textarea>
    </div>
    <button type="submit" class="btn btn-success">Simpan</button>
    <a href="index.php" class="btn btn-default">Batal</a>
  </form>
</div>
</body>
</html>

Dengan langkah-langkah di atas, Anda sudah bisa membuat CMS sederhana untuk menambah, melihat, mengedit, dan menghapus artikel.

9. Source Code Lengkap

Berikut ini adalah ringkasan file penting yang harus Anda buat untuk CMS sederhana ini:

db.php - Koneksi database MySQL
index.php - Daftar artikel dengan opsi edit dan hapus
create.php - Form tambah artikel
edit.php - Form edit artikel (mirip create.php, dengan prefill data)
delete.php - Script untuk menghapus artikel berdasarkan ID

Pastikan semua file berada di folder project yang sama dan server XAMPP Anda berjalan.

Ilustrasi struktur folder project CMS PHP Bootstrap3 dengan file db.php, index.php, create.php, edit.php, delete.php

10. Referensi dan Channel Pembelajaran Lainnya

Untuk memperdalam pembelajaran PHP dan Bootstrap 3, berikut beberapa sumber dan channel yang direkomendasikan:

Selalu praktikkan langsung kode yang Anda pelajari agar pemahaman semakin kuat.

Ilustrasi orang belajar online menggunakan laptop dengan tampilan kode PHP dan Bootstrap di layar

Panduan Lengkap Docker untuk DevOps: Automasi Aplikasi Web

Detail Pembelajaran

Baca Online

Pelajari PHP dan Bootstrap3: Kursus Lengkap untuk CMS!

Daftar Isi

1. Pengantar PHP

2. Instalasi dan Setup PHP

3. Dasar-dasar PHP

Variabel dan Tipe Data

Kontrol Alur: If, Else, dan Loop

4. PHP dan Database MySQL

5. Pengantar Bootstrap 3

6. Struktur dan Grid System Bootstrap 3

7. Komponen Bootstrap 3

Contoh Tombol

Contoh Navbar

Contoh Form

8. Membangun CMS Sederhana dengan PHP & Bootstrap 3

Langkah 1: Buat Database dan Tabel

Langkah 2: Koneksi Database (db.php)

Langkah 3: Halaman Daftar Artikel (index.php)

Langkah 4: Form Tambah Artikel (create.php)

9. Source Code Lengkap

10. Referensi dan Channel Pembelajaran Lainnya

Edukasi Terkait

Panduan Lengkap Docker untuk DevOps: Automasi Aplikasi Web

Panduan Praktis Docker dan Kubernetes: Pelajari dari Dasar!

Pelajari Docker: Kembangkan dan Terapkan Aplikasi Web Efisien!

Membangun Aplikasi .NET 8: Panduan Dasar Docker yang Efektif

Optimalkan Workflow Anda: Cara Efektif Menggunakan Docker untuk CI/CD