Yayan Ahyani

Kamis, 30 April 2026

MANAJEMEN BASIS DATA (BACKUP)

MATERI: MANAJEMEN BASIS DATA (BACKUP)

🎯 Tujuan Pembelajaran

Peserta didik mampu:

Memahami konsep backup database
Menjelaskan jenis-jenis backup
Melakukan backup database menggunakan tools
Mengembalikan (restore) database dari hasil backup

🧠 A. Pengertian Backup Database

Backup database adalah proses menyalin data dari database ke media lain untuk mencegah kehilangan data jika terjadi:

Kerusakan sistem
Human error (kesalahan pengguna)
Serangan virus/malware
Kegagalan hardware

👉 Intinya: backup = cadangan data

⚠️ B. Pentingnya Backup

Tanpa backup, risiko yang bisa terjadi:

Data hilang permanen ❌
Sistem tidak bisa digunakan ❌
Kerugian besar (terutama perusahaan) ❌

Dengan backup:

Data aman ✅
Bisa dikembalikan kapan saja ✅
Mendukung keamanan sistem ✅

📂 C. Jenis-Jenis Backup

1. Full Backup

Backup seluruh data dalam database

✔ Kelebihan:

Data lengkap
Mudah restore

❌ Kekurangan:

Memakan waktu lama
Ukuran file besar

2. Incremental Backup

Backup hanya data yang berubah sejak backup terakhir

✔ Kelebihan:

Lebih cepat
Hemat penyimpanan

❌ Kekurangan:

Restore lebih rumit

3. Differential Backup

Backup data yang berubah sejak full backup terakhir

✔ Kelebihan:

Restore lebih cepat dibanding incremental

❌ Kekurangan:

Ukuran file lebih besar dari incremental

🛠️ D. Tools untuk Backup Database

Beberapa tools yang sering digunakan:

MySQL / MariaDB
phpMyAdmin
XAMPP (paket server lokal)

💻 E. Cara Backup Database (MySQL)

1. Menggunakan phpMyAdmin

Langkah:

Buka browser → http://localhost/phpmyadmin
Pilih database
Klik menu Export
Pilih format SQL
Klik Go

📌 Hasil: file .sql

2. Menggunakan Command Line (CMD)

Perintah:

mysqldump -u root -p nama_database > backup.sql

atau tentukan lokasi penyimpanan backup:

C:\xampp\mysql\bin\mysqldump -u root -p db_latihan > C:\backup\db_latihan.sql

Penjelasan:

mysqldump → tool backup
-u root → user database
-p → password
nama_database → database yang dibackup
backup.sql → file hasil backup

🔄 F. Cara Restore Database

1. Menggunakan phpMyAdmin

Buat database baru
Klik menu Import
Pilih file .sql
Klik Go

2. Menggunakan CMD

mysql -u root -p nama_database < backup.sql

🔐 G. Strategi Backup yang Baik

Agar backup efektif:

Lakukan backup secara rutin (harian/mingguan)
Simpan di tempat berbeda (cloud/flashdisk)
Gunakan lebih dari satu metode backup
Uji hasil backup (test restore)

📊 H. Contoh Kasus

Sebuah sekolah memiliki database absensi.
Jika server rusak dan tidak ada backup:
➡️ Semua data absensi hilang

Jika ada backup:
➡️ Data bisa dikembalikan dengan cepat

Selasa, 07 April 2026

LOG AKTIVITAS

🔹 1. Pengertian Log Aktivitas

Log aktivitas adalah catatan semua aktivitas yang terjadi di dalam sistem, seperti:

Login / logout user
Menambah data
Mengedit data
Menghapus data
Akses halaman tertentu

🔹 2. Struktur Data (Database)

Buat tabel khusus, misalnya: activity_log

CREATE TABLE activity_log (
    id INT AUTO_INCREMENT PRIMARY KEY,
    user_id INT,
    aktivitas VARCHAR(255),
    keterangan TEXT,
    ip_address VARCHAR(50),
    user_agent TEXT,
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

Penjelasan:

user_id → siapa yang melakukan
aktivitas → jenis aktivitas (login, tambah data, dll)
keterangan → detail aktivitas
ip_address → alamat IP user
user_agent → browser/device
created_at → waktu kejadian

🔹 3. Contoh Implementasi (PHP Native)

🔸 Fungsi untuk menyimpan log

function simpanLog($user_id, $aktivitas, $keterangan) {
    global $koneksi;

    $ip = $_SERVER['REMOTE_ADDR'];
    $user_agent = $_SERVER['HTTP_USER_AGENT'];

    $query = "INSERT INTO activity_log
              (user_id, aktivitas, keterangan, ip_address, user_agent)
              VALUES
              ('$user_id', '$aktivitas', '$keterangan', '$ip', '$user_agent')";

    mysqli_query($koneksi, $query);
}

🔸 Contoh penggunaan

Saat login berhasil:

simpanLog($user_id, "LOGIN", "User berhasil login");

Saat tambah data:

simpanLog($user_id, "TAMBAH DATA", "Menambahkan data siswa");

Saat hapus data:

simpanLog($user_id, "HAPUS DATA", "Menghapus data produk ID: 10");

🔹 4. Menampilkan Log Aktivitas

$query = mysqli_query($koneksi, "SELECT * FROM activity_log ORDER BY created_at DESC");

while($data = mysqli_fetch_assoc($query)) {
echo $data['created_at']." - ".$data['aktivitas']." - ".$data['keterangan']."<br>";
}

🔹 5. Pengembangan Lebih Lanjut 🚀

Agar lebih profesional, bisa ditambahkan:

✅ Filter log

Berdasarkan tanggal
Berdasarkan user
Berdasarkan aktivitas

✅ Pagination

Agar tidak berat saat data banyak

✅ Level log

INFO → aktivitas biasa
WARNING → aktivitas mencurigakan
ERROR → kesalahan sistem

✅ Integrasi Framework

Jika pakai:

Laravel → gunakan built-in logging (Log::info())
CodeIgniter → gunakan log_message()

🔹 6. Tips Best Practice 🔐

Jangan simpan password di log
Batasi akses log (hanya admin)
Backup log secara berkala
Gunakan index pada kolom created_at untuk performa

🔹 7. Contoh Output Log

2026-04-07 08:00:01 - LOGIN - User berhasil login
2026-04-07 08:05:10 - TAMBAH DATA - Menambahkan data siswa
2026-04-07 08:10:22 - HAPUS DATA - Menghapus data ID 5

contoh pembuatan log activity :

1. buat tabel dengan nama activity_log menggunakan cmd

2. buat file dengan nama log.php menggunakan teks editor ( visual studio code )

3. panggil fungsi log di semua aktivitas baik login , tambah data, edit dan hapus.

contoh di proses login

4. uji coba proses login berhasil dan gagal di browser ( crome )

5. kemudian cek hasil aktivitas di tabel menggunakan perintah select di CMD

Senin, 23 Februari 2026

script untuk menampilkan data siswa di tabel pendaftar

<?php
include"session_start.php";
?>
<!-- https://chatgpt.com/c/6976e6cc-76f0-8323-be8b-f3f50a60f99b -->
<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>SMK DIGITAL</title>
  <style>
    * {
      box-sizing: border-box;
      font-family: 'Segoe UI', Tahoma, sans-serif;
    }

    body {
      margin: 0;
      background: #f4f6f9;
      color: #333;
    }

    header {
      background: linear-gradient(135deg, #0d47a1, #1976d2);
      color: white;
      padding: 15px 30px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
    }

    .logo-box {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .logo {
      width: 55px;
      height: 55px;
      border-radius: 50%;
      background: white;
      color: #0d47a1;
      font-weight: bold;
      font-size: 18px;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 0 6px rgba(0,0,0,0.2);
    }

    nav a {
      color: white;
      text-decoration: none;
      margin: 0 12px;
      font-weight: 500;
    }

    nav a:hover {
      text-decoration: underline;
    }

    .hero {
      background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),
                  url("https://images.unsplash.com/photo-1588072432836-e10032774350") center/cover no-repeat;
      color: white;
      padding: 100px 20px;
      text-align: center;
    }

    .hero h1 {
      font-size: 42px;
      margin-bottom: 10px;
    }

    .hero p {
      font-size: 18px;
      margin-bottom: 25px;
    }

    .btn {
      background: #ffc107;
      color: #333;
      padding: 12px 22px;
      border-radius: 6px;
      text-decoration: none;
      font-weight: bold;
      transition: 0.3s;
    }

    .btn:hover {
      background: #ffb300;
    }

    section {
      padding: 60px 20px;
      max-width: 1100px;
      margin: auto;
    }

    section h2 {
      text-align: center;
      margin-bottom: 40px;
      color: #0d47a1;
    }

    .about p {
      text-align: center;
      max-width: 800px;
      margin: auto;
      line-height: 1.7;
    }

    .cards {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
      gap: 20px;
    }

    .card {
      background: white;
      padding: 25px;
      border-radius: 12px;
      box-shadow: 0 4px 10px rgba(0,0,0,0.08);
      text-align: center;
      transition: 0.3s;
    }

    .card:hover {
      transform: translateY(-5px);
    }

    .card h3 {
      margin-bottom: 10px;
      color: #1976d2;
    }

    .contact {
      background: #e3f2fd;
      border-radius: 12px;
      padding: 40px 20px;
    }

    .contact p {
      text-align: center;
      margin: 8px 0;
    }

    footer {
      background: #0d47a1;
      color: white;
      text-align: center;
      padding: 15px;
      margin-top: 50px;
      font-size: 14px;
    }

    @media (max-width: 600px) {
      .hero h1 {
        font-size: 32px;
      }
      nav {
        margin-top: 10px;
      }
    }
  </style>
    <style>
        body { font-family: Arial, sans-serif; margin: 0; padding: 0; background-color: #f4f4f4; }
        
        .container { max-width: 600px; margin: 20px auto; padding: 20px; background: white; border-radius: 8px; box-shadow: 0 0 10px rgba(0,0,0,0.1); }
        .profile-pic { text-align: center; margin-bottom: 20px; }
        .profile-pic img { width: 150px; height: 150px; border-radius: 50%; border: 3px solid #007bff; }
        .info { margin-bottom: 15px; }
        .info label { font-weight: bold; display: inline-block; width: 150px; }
        .info span { color: #555; }
        footer { text-align: center; padding: 10px; background: #007bff; color: white; margin-top: 20px; }
    </style>
</head>
<body>

  <!-- HEADER -->
  <header>
    <div class="logo-box">
      <div class="logo"><img src="../img/logo.png" width="80" height="80"></div>
      <div>
        <strong>SMK DIGITAL</strong><br>
        <small>Sekolah Teknologi Masa Depan</small>
      </div>
    </div>
    <nav>
      <a href="#">Beranda</a>
      <a href="profile.php">Profile</a>
      <a href="upload_berkas.php">Upload berkas</a>
      <a href="kontak.php">Kontak</a>
      <a href="bantuan.php">Bantuan</a>
      <a href="logout.php">keluar</a>
    </nav>
  </header>
<?php
include"../koneksi.php";
$perintah="select * from pendaftar";
$query=mysqli_query($conn,$perintah);
$data=mysqli_fetch_array($query);
?>
<div class="container">
        <div class="profile-pic">
            <img src="img/ahmad.jpg" alt="Foto Profil Siswa">
        </div>
        
        <div class="info">
            <label>Nama Lengkap</label>
            <span><?=$data['nama'];?></span>
        </div>
        
        <div class="info">
            <label>NISN </label>
            <span><?=$data['nisn'];?></span>
        </div>
        
        <div class="info">
            <label>Tempat Lahir</label>
            <span><?=$data['tempat_lahir'];?></span>
        </div>
        
        <div class="info">
            <label>Tanggal Lahir</label>
            <span><?=$data['tanggal_lahir'];?></span>
        </div>
        
        <div class="info">
            <label>jenis Kelamin</label>
            <span><?=$data['jenis_kelamin'];?></span>
        </div>
        
        <div class="info">
            <label>Asal Sekolah</label>
            <span><?=$data['asal_sekolah'];?></span>
        </div>
        
        <div class="info">
            <label>Jurusan </label>
            <span><?=$data['jurusan_pilihan'];?></span>
        </div>
        
        <div class="info">
            <label>Nomor HP</label>
            <span><?=$data['no_hp'];?></span>
        </div>
        
        <div class="info">
            <label>Alamat</label>
            <span><?=$data['alamat'];?></span>
        </div>
        <div class="info">
            <label>Tanggal Daftar</label>
            <span><?=$data['tanggal_daftar'];?></span>
        </div>
        
        <div class="info">
            <label>Username</label>
            <span><?=$data['username'];?></span>
        </div>
        
        <div class="info">
            <label>Password</label>
            <span>***</span>
        </div>
    </div>

    

  <!-- FOOTER -->
  <footer>
    &copy; 2026 SMK DIGITAL | Website Resmi Sekolah
  </footer>

</body>
</html>

Senin, 16 Februari 2026

Membuat Halaman Profile Siswa

<?php
include"session_start.php";
?>
<!-- https://chatgpt.com/c/6976e6cc-76f0-8323-be8b-f3f50a60f99b -->
<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>SMK DIGITAL</title>
  <style>
    * {
      box-sizing: border-box;
      font-family: 'Segoe UI', Tahoma, sans-serif;
    }

    body {
      margin: 0;
      background: #f4f6f9;
      color: #333;
    }

    header {
      background: linear-gradient(135deg, #0d47a1, #1976d2);
      color: white;
      padding: 15px 30px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
    }

    .logo-box {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .logo {
      width: 55px;
      height: 55px;
      border-radius: 50%;
      background: white;
      color: #0d47a1;
      font-weight: bold;
      font-size: 18px;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 0 6px rgba(0,0,0,0.2);
    }

    nav a {
      color: white;
      text-decoration: none;
      margin: 0 12px;
      font-weight: 500;
    }

    nav a:hover {
      text-decoration: underline;
    }

    .hero {
      background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),
                  url("https://images.unsplash.com/photo-1588072432836-e10032774350") center/cover no-repeat;
      color: white;
      padding: 100px 20px;
      text-align: center;
    }

    .hero h1 {
      font-size: 42px;
      margin-bottom: 10px;
    }

    .hero p {
      font-size: 18px;
      margin-bottom: 25px;
    }

    .btn {
      background: #ffc107;
      color: #333;
      padding: 12px 22px;
      border-radius: 6px;
      text-decoration: none;
      font-weight: bold;
      transition: 0.3s;
    }

    .btn:hover {
      background: #ffb300;
    }

    section {
      padding: 60px 20px;
      max-width: 1100px;
      margin: auto;
    }

    section h2 {
      text-align: center;
      margin-bottom: 40px;
      color: #0d47a1;
    }

    .about p {
      text-align: center;
      max-width: 800px;
      margin: auto;
      line-height: 1.7;
    }

    .cards {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
      gap: 20px;
    }

    .card {
      background: white;
      padding: 25px;
      border-radius: 12px;
      box-shadow: 0 4px 10px rgba(0,0,0,0.08);
      text-align: center;
      transition: 0.3s;
    }

    .card:hover {
      transform: translateY(-5px);
    }

    .card h3 {
      margin-bottom: 10px;
      color: #1976d2;
    }

    .contact {
      background: #e3f2fd;
      border-radius: 12px;
      padding: 40px 20px;
    }

    .contact p {
      text-align: center;
      margin: 8px 0;
    }

    footer {
      background: #0d47a1;
      color: white;
      text-align: center;
      padding: 15px;
      margin-top: 50px;
      font-size: 14px;
    }

    @media (max-width: 600px) {
      .hero h1 {
        font-size: 32px;
      }
      nav {
        margin-top: 10px;
      }
    }
  </style>
    <style>
        body { font-family: Arial, sans-serif; margin: 0; padding: 0; background-color: #f4f4f4; }
        header { background-color: #007bff; color: white; text-align: center; padding: 20px; }
        .container { max-width: 600px; margin: 20px auto; padding: 20px; background: white; border-radius: 8px; box-shadow: 0 0 10px rgba(0,0,0,0.1); }
        .profile-pic { text-align: center; margin-bottom: 20px; }
        .profile-pic img { width: 150px; height: 150px; border-radius: 50%; border: 3px solid #007bff; }
        .info { margin-bottom: 15px; }
        .info label { font-weight: bold; display: inline-block; width: 150px; }
        .info span { color: #555; }
        footer { text-align: center; padding: 10px; background: #007bff; color: white; margin-top: 20px; }
    </style>
</head>
<body>

  <!-- HEADER -->
  <header>
    <div class="logo-box">
      <div class="logo"><img src="../img/logo.png" width="80" height="80"></div>
      <div>
        <strong>SMK DIGITAL</strong><br>
        <small>Sekolah Teknologi Masa Depan</small>
      </div>
    </div>
    <nav>
      <a href="#">Beranda</a>
      <a href="profile.php">Profile</a>
      <a href="upload_berkas.php">Upload berkas</a>
      <a href="kontak.php">Kontak</a>
      <a href="bantuan.php">Bantuan</a>
      <a href="logout.php">keluar</a>
    </nav>
  </header>

<div class="container">
        <div class="profile-pic">
            <img src="img/ahmad.jpg" alt="Foto Profil Siswa">
        </div>
        
        <div class="info">
            <label>Nama Lengkap:</label>
            <span>[Nama Lengkap Siswa, e.g., Ahmad Fauzi]</span>
        </div>
        
        <div class="info">
            <label>NIS (Nomor Induk Siswa):</label>
            <span>[NIS, e.g., 123456789]</span>
        </div>
        
        <div class="info">
            <label>Kelas:</label>
            <span>[Kelas, e.g., XII RPL]</span>
        </div>
        
        <div class="info">
            <label>Jurusan:</label>
            <span>[Jurusan, e.g., Rekayasa Perangkat Lunak]</span>
        </div>
        
        <div class="info">
            <label>Tanggal Lahir:</label>
            <span>[Tanggal Lahir, e.g., 15 Januari 2005]</span>
        </div>
        
        <div class="info">
            <label>Jenis Kelamin:</label>
            <span>[Jenis Kelamin, e.g., Laki-laki]</span>
        </div>
        
        <div class="info">
            <label>Alamat:</label>
            <span>[Alamat Lengkap, e.g., Jl. Raya No. 123, Kota ABC]</span>
        </div>
        
        <div class="info">
            <label>Nomor Telepon:</label>
            <span>[Nomor Telepon, e.g., 081234567890]</span>
        </div>
        
        <div class="info">
            <label>Email:</label>
            <span>[Email Siswa, e.g., ahmad.fauzi@email.com]</span>
        </div>
        <div class="info">
            <label>Nomor WA:</label>
            <span>081234567</span>
        </div>
        
        <div class="info">
            <label>Tahun Masuk:</label>
            <span>[Tahun Masuk, e.g., 2022]</span>
        </div>
        
        <div class="info">
            <label>Prestasi (Opsional):</label>
            <span>[Prestasi, e.g., Juara 1 Lomba Coding 2023]</span>
        </div>
    </div>

    

  <!-- FOOTER -->
  <footer>
    &copy; 2026 SMK DIGITAL | Website Resmi Sekolah
  </footer>

</body>
</html>