Cara Upload & Update Foto Profil PHP + MySQL (Part 6)

🖼️ Cara Upload & Update Foto Profil PHP + MySQL (Part 6)

Halo coder! Di tutorial kali ini, kita akan belajar membuat fitur upload dan update foto profil menggunakan PHP dan MySQL. Fitur ini penting jika kamu ingin membuat sistem user yang lebih personal dan profesional.

🎯 Apa yang Akan Kita Pelajari?

• Form upload gambar dengan preview
• Menyimpan gambar ke folder server
• Menyimpan nama file ke database
• Menampilkan gambar profil user

📦 Struktur Folder

/uploads/             ← folder tempat simpan gambar
edit-foto.php         ← form upload foto
config.php            ← koneksi DB

📋 Tambahkan Kolom photo di Tabel Users

ALTER TABLE users ADD photo VARCHAR(255) DEFAULT NULL;

📄 File: edit-foto.php

<?php
session_start();
require 'config.php';
$user_id = $_SESSION['user_id'];

// Ambil data user
$stmt = $conn->prepare("SELECT photo FROM users WHERE id=?");
$stmt->bind_param("i", $user_id);
$stmt->execute();
$res = $stmt->get_result();
$user = $res->fetch_assoc();

// Proses upload
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
  $file = $_FILES['photo'];
  $folder = 'uploads/';
  $namaBaru = uniqid() . '-' . basename($file['name']);
  $target = $folder . $namaBaru;
  $ext = pathinfo($target, PATHINFO_EXTENSION);
  $allowed = ['jpg','jpeg','png','gif'];

  if (in_array(strtolower($ext), $allowed) && $file['size'] < 1048576) {
    if (move_uploaded_file($file['tmp_name'], $target)) {
      $stmt = $conn->prepare("UPDATE users SET photo=? WHERE id=?");
      $stmt->bind_param("si", $namaBaru, $user_id);
      $stmt->execute();
      $msg = "Foto berhasil diunggah!";
      $user['photo'] = $namaBaru;
    } else {
      $msg = "Gagal mengunggah foto.";
    }
  } else {
    $msg = "File tidak valid! (max 1MB, format: JPG/PNG/GIF)";
  }
}
?>

🖼️ Tampilan Form Upload

<h2>Upload Foto Profil</h2>
<?php if(isset($msg)) echo "<p style='color:green;'>$msg</p>"; ?>

<form method="post" enctype="multipart/form-data">
  <label>Pilih Foto (jpg/png/gif, max 1MB):</label><br>
  <input type="file" name="photo" accept="image/*" onchange="previewFoto(event)" required><br><br>

  <div>
    <img id="preview" src="<?= $user['photo'] ? 'uploads/'.$user['photo'] : 'https://via.placeholder.com/150' ?>" 
         style="max-width:150px; border-radius:50%;" alt="Preview Foto">
  </div><br>

  <button type="submit">Simpan Foto</button>
</form>

<script>
function previewFoto(event) {
  const reader = new FileReader();
  reader.onload = function(){
    document.getElementById('preview').src = reader.result;
  };
  reader.readAsDataURL(event.target.files[0]);
}
</script>

📁 Folder Upload

Buat folder uploads di root proyek kamu dan beri izin write (CHMOD 755 atau 777 jika di localhost):

mkdir uploads

📷 Tampilkan Foto Profil di Halaman Lain

<?php
// Di halaman manapun, tampilkan foto profil user
$foto = $user['photo'] ?? 'default.png';
echo '<img src="uploads/'.$foto.'" alt="Foto Profil" style="max-width:50px; border-radius:50%;">';
?>

🛡️ Tips Keamanan Upload

• Batasi ukuran file < 1MB
• Validasi ekstensi file
• Gunakan nama file unik (dengan uniqid())
• Simpan hanya path file di database
• Jangan izinkan .php atau file eksekusi

✅ Kesimpulan

Dengan fitur ini, user bisa mengatur foto profil mereka sendiri. Lebih personal, lebih keren! Kamu juga bisa menambahkan fitur crop, compress, atau integrasi ke layanan CDN di masa depan.

Di tutorial selanjutnya, kita akan bahas fitur ganti password user (dengan password lama sebagai verifikasi). Jangan sampai ketinggalan ya! 💪