Menguasai Web: Panduan Lengkap Membuat Aplikasi CRUD PHP dengan Foto dan Hosting Gratis

Aplikasi CRUD (Create, Read, Update, Delete) adalah keterampilan dasar yang wajib dimiliki setiap developer web. Ia adalah tulang punggung untuk mengelola data di hampir semua sistem informasi.

Dalam panduan ini, kita akan membuat aplikasi CRUD sederhana menggunakan PHP dan MySQL yang memungkinkan pengelolaan data pengguna, termasuk unggahan foto, lalu membawanya online menggunakan layanan hosting gratis seperti yang ditunjukkan dalam video tutorial.

Konsep Dasar

Apa itu CRUD?

CRUD adalah akronim dari empat fungsi dasar interaksi dengan database (Halomoan dkk., 2021):

• Create (Membuat): Menambahkan data baru (INSERT).

• Read (Membaca): Mengambil dan menampilkan data (SELECT).

• Update (Memperbarui): Mengubah data yang sudah ada (UPDATE).

• Delete (Menghapus): Menghilangkan data dari database (DELETE).

Tujuan dan Manfaat

Tujuan utamanya adalah menyediakan antarmuka lengkap agar pengguna dapat mengelola seluruh siklus data. Manfaatnya, aplikasi ini menjadi fondasi utama (misalnya sistem registrasi, inventori, atau manajemen konten) dan merupakan cara terbaik untuk menguasai alur kerja pemrograman web server-side (Hanani dkk.,2025).

Garis Besar Tutorial

Bagian ini mengikuti alur pengerjaan aplikasi, mulai dari server lokal hingga online.

Tahap Awal: Persiapan Server Lokal (XAMPP)

1. Jalankan Server: Buka XAMPP Control Panel. Klik Start pada modul Apache dan MySQL untuk menjalankan server lokal dan database.

2. Buat Folder Proyek: Akses folder xampp/htdocs/. Buat folder baru (misalnya, DB) di dalam htdocs. Ini adalah lokasi semua file kode PHP kita.

3. Folder Uploads: Di dalam folder DB yang baru dibuat, buat folder uploads khusus untuk menyimpan file foto yang diunggah.

Tahap 1: Membuat Database di phpMyAdmin

1. Akses phpMyAdmin: Buka browser dan ketik localhost/phpmyadmin.

2. Buat Database: Klik Database dan buat database baru (misalnya photo_db). Pilih Collation latin1_swedish_ci.

3. Buat Tabel users: Buat tabel bernama users dengan 4 kolom:

• ID: Tipe INT, panjang 11. Centang A I (Auto Increment) dan jadikan Primary Key.

• name: Tipe VARCHAR, panjang 100.

• email: Tipe VARCHAR, panjang 100.

• foto: Tipe VARCHAR, panjang 255 (menyimpan nama file foto).

Tahap 2: Menulis Kode PHP

Gunakan code editor (seperti VS Code) untuk membuat file-file di dalam folder proyek (DB).

1. db.php: File ini berisi kode untuk koneksi ke database MySQL lokal (localhost, root, password kosong, photo_db).

2. edit.php: File yang menangani fungsionalitas Update data.

3. index.php: File utama yang menangani fungsionalitas Create (tambah data), Read (menampilkan tabel data), dan Delete (hapus data). File ini juga mengatur proses pemindahan file foto ke folder uploads.

Tahap 3: Menjalankan Aplikasi Lokal

1. Buka browser dan akses aplikasi dengan mengetik: localhost/nama folder proyek/ (misalnya: localhost/DB/).
2. Lakukan tes fungsi CRUD (Tambah, Lihat, Edit, Hapus) dan pastikan unggah foto berjalan sempurna. Cek apakah nama foto sudah tersimpan di tabel users dan file fotonya ada di folder uploads.

Hosting Gratis di InfinityFree

Setelah aplikasi berjalan di lokal, inilah cara membawanya online menggunakan layanan InfinityFree.

1. Persiapan File Upload

1. Export Database: Di phpMyAdmin lokal, Export database photo_db dalam format SQL dan simpan file .sql tersebut
2. Compress Folder: Kompres folder uploads menjadi .zip file.

2. Konfigurasi Hosting (InfinityFree)

1. Login & File Manager: Login ke akun InfinityFree kamu. Akses File Manager, dan navigasikan ke folder htdocs.
2. Upload File: Unggah semua file PHP (db.php, index.php, edit.php) satu per satu ke folder htdocs online.
3. Upload Folder Uploads: Unggah file uploads.zip lalu ekstrak di htdocs.

3. Setup Database Online

1. Buat Database Baru: Di Control Panel InfinityFree, cari MySQL Database. Buat nama database baru (misalnya photo_db), lalu catat MySQL Host Name, MySQL Username, dan MySQL DB Name yang diberikan oleh sistem.
2. Import Data: Klik Admin (untuk mengakses phpMyAdmin online), lalu gunakan fitur Import untuk mengunggah file .sql yang kamu export di awal.

4. Perbarui Koneksi (db.php)

• Di File Manager online, edit file db.php.

• Ubah variabel $host, $user, $pass, dan $db agar sesuai dengan detail database yang baru (yang dari InfinityFree), bukan yang lokal (root, password kosong). $host: Isi dengan MySQL Host Name.

• $host: Isi dengan MySQL Host Name.

• $user: Isi dengan MySQL Username.

• $pass: Isi dengan MySQL Password (password akun hostingmu).

• $db: Isi dengan MySQL DB Name.

• Save file tersebut.

Cek Aplikasi Online

Aplikasi web CRUD PHP dengan foto kamu kini sudah online dan dapat diakses melalui URL website yang diberikan oleh InfinityFree!

Tonton dan Kuasai Kodenya! 🎬

Untuk melihat demonstrasi visual penuh dan langkah detailnya, terutama pada proses coding dan hosting yang seringkali menjadi tantangan, langsung tonton video tutorial berikut:

Referensi

Halomoan, M. A., Kharisma, A. P., & Marji. (2021). Pengembangan Domain Specific Language Untuk Aplikasi CRUD Berbasis Web. Jurnal Pengembangan Teknologi Informasi dan Ilmu Komputer, 5(1), 34–41.

Hanani, N. F., Ingnasia, C. R., Pratama, L. P., Alfarizi, S., Al, A. Z., & Akbar, F. A. (2025). Optimalisasi Manajemen Stok UMKM Kosmetik Melalui Aplikasi Inventaris dengan Notifikasi Kadaluarsa Otomatis. ISSN(Online)2747-0563Volume5Tahun2025, 5, 281–290.

Selamat ngoding dan semoga proyekmu sukses!