Sebuah website biasanya dikembangkan terlebih dahulu di komputer lokal. Selama masih berada di lingkungan lokal, website tersebut hanya dapat digunakan pada komputer atau jaringan tertentu.

Agar aplikasi dapat digunakan melalui internet, aplikasi perlu dipindahkan ke server yang dapat diakses secara publik. Proses inilah yang disebut deployment.

Pada artikel ini saya akan membahas proses deployment BloodConnect, sebuah website pendaftaran donor darah untuk PMI (Palang Merah Indonesia) yang saya kembangkan di lingkungan lokal (XAMPP) kemudian dipindahkan menuju hosting publik InfinityFree.

1. Mengenal Project BloodConnect

BloodConnect merupakan website sistem pendaftaran donor darah untuk PMI. Website ini memungkinkan calon pendonor mendaftar secara online, sementara panitia dapat meninjau, menyetujui, atau menolak pendaftaran tersebut melalui dashboard khusus.

Beberapa halaman utama yang terdapat pada BloodConnect antara lain:

• Login & Register pengguna
• Login Panitia (dashboard terpisah)
• Halaman utama (Home)
• Informasi seputar PMI & kegiatan donor darah
• Informasi event/jadwal donor
• Form pendaftaran donor darah
• Dashboard panitia (approve/reject peserta)
• Profile pengguna
• Saran dan Kontak

Teknologi yang Digunakan

Project ini menggunakan beberapa teknologi web, yaitu:

• HTML — membuat struktur halaman.
• CSS — mengatur tampilan website.
• JavaScript — menangani fungsi pada sisi client, termasuk komunikasi ke server (fetch API).
• PHP — menangani proses pada sisi server (login, register, pendaftaran donor, approval).
• MySQL — menyimpan data pengguna dan data pendaftaran donor darah.
• InfinityFree Hosting — menyediakan server publik gratis agar website dapat diakses melalui internet dengan dukungan HTTPS.

2. Menyiapkan Project Sebelum Deployment

Langkah pertama adalah memastikan semua file project sudah lengkap dan berada dalam satu folder utama agar proses pemindahan ke server lebih mudah.

Struktur folder project BloodConnect adalah sebagai berikut:

PendaftaranDonorDarah_/
├── login.html
├── register.html
├── daftar.html          (form pendaftaran donor)
├── home.php
├── health.php           (health check endpoint)
├── admin/               (dashboard & login panitia)
├── auth/                (proses login, register, middleware)
├── config/              (konfigurasi database & env loader)
├── css/
├── js/
├── images/
├── mail/                (PHPMailer, notifikasi email)
├── docs/                (dokumentasi)
├── .env                 (kredensial database, tidak diupload ke publik)
└── README.md

Struktur folder yang rapi seperti ini membantu memudahkan proses upload dan verifikasi setelah file dipindahkan ke hosting.

Hal yang Perlu Dicek

• Halaman utama (login.html, home.php) sudah berjalan lancar di localhost.
• File CSS dan JavaScript dapat dimuat tanpa error.
• Form pendaftaran donor berhasil menyimpan data ke database.
• File PHP (auth, admin, mail) sudah lengkap.
• File konfigurasi database (config/database.php dan .env) sudah disiapkan.

3. Menyiapkan Hosting Publik (InfinityFree)

Setelah project siap, langkah selanjutnya adalah mendaftar dan menyiapkan hosting publik. Saya memilih InfinityFree karena mendukung PHP dan MySQL secara gratis, serta dapat diakses selama 24 jam tanpa perlu perangkat pribadi tetap menyala.

Beberapa informasi koneksi yang perlu dicatat dari dashboard hosting meliputi:

Informasi tersebut nantinya digunakan untuk menghubungkan komputer dengan server hosting melalui FTP.

4. Menghubungkan FileZilla dengan Hosting

Untuk memindahkan file BloodConnect, saya menggunakan FileZilla, sebuah aplikasi FTP client gratis yang memudahkan proses transfer file antara komputer lokal dan server hosting.

Pada bagian atas FileZilla, saya memasukkan informasi koneksi dari hosting:

Host      : ftpupload.net
Username  : if0_xxxxxxx
Password  : ********
Port      : 21

Setelah semua data dimasukkan, klik Quickconnect untuk menghubungkan FileZilla dengan server. Jika muncul peringatan sertifikat, saya mencentang “Always trust this certificate” lalu klik OK.

5. Mengupload File BloodConnect

Setelah berhasil terhubung, FileZilla menampilkan dua panel: panel kiri berisi file di komputer lokal, dan panel kanan berisi file pada server (folder htdocs).

Saya memilih seluruh folder project di panel kiri, lalu klik kanan dan pilih Upload untuk memindahkannya ke folder htdocs pada server.

6. Menyiapkan Database

Karena BloodConnect menggunakan database MySQL untuk menyimpan data pengguna dan pendaftaran donor, file website saja belum cukup. Database juga harus disiapkan pada hosting.

Langkah yang saya lakukan adalah:

1. Membuat database baru melalui menu MySQL Databases di dashboard InfinityFree.
2. Membuka phpMyAdmin dari dashboard hosting.
3. Memilih database yang telah dibuat (formatnya if0_xxxxxxx_pmi_connect).
4. Melakukan import file pmi_connect.sql melalui tab Import.
5. Memastikan seluruh tabel (users, login_logs, donor_registrations) berhasil masuk melalui tab Struktur.

7. Mengatur Konfigurasi Database

Konfigurasi database pada server berbeda dengan konfigurasi saat aplikasi masih dijalankan secara lokal (localhost). Pada BloodConnect, kredensial database dipisahkan ke dalam file .env agar tidak tertulis langsung di kode program.

Contoh konfigurasi .env setelah disesuaikan untuk hosting:

DB_HOST=sql302.infinityfree.com
DB_USER=if0_xxxxxxx
DB_PASS=********
DB_NAME=if0_xxxxxxx_pmi_connect
DB_CHARSET=utf8mb4

File config/database.php kemudian membaca nilai-nilai tersebut melalui fungsi loadEnv(), sehingga kredensial tidak pernah ditulis langsung di kode program:

<?php
require_once __DIR__ . '/env_loader.php';
loadEnv(__DIR__ . '/../.env');

define('DB_HOST', $_ENV['DB_HOST'] ?? 'localhost');
define('DB_USER', $_ENV['DB_USER'] ?? 'root');
define('DB_PASS', $_ENV['DB_PASS'] ?? '');
define('DB_NAME', $_ENV['DB_NAME'] ?? 'pmi_connect');

8. Mengecek Path File

Setelah aplikasi dipindahkan, masalah yang saya temui adalah tampilan website menjadi polos tanpa gaya sama sekali, seolah CSS tidak terbaca.

Setelah ditelusuri menggunakan Developer Tools (tab Network) di browser, ternyata folder css/ dan js/ memang belum ikut terupload ke server saat proses upload sebelumnya. Contoh pemanggilan file CSS pada BloodConnect:

<link rel="stylesheet" href="css/style.css">
<script src="js/register.js"></script>

Solusinya, saya mengupload ulang folder css/, js/, beserta folder pendukung lain (admin, auth, config, mail, images) melalui FileZilla, kemudian memastikan tampilan kembali normal.

9. Testing BloodConnect di Hosting Publik

Setelah semua file dan database selesai dipindahkan, aplikasi diuji kembali langsung dari alamat hosting untuk memastikan semua fitur berjalan sebagaimana mestinya.

Halaman yang Diuji

Selain tampilan halaman, saya juga memeriksa langsung isi database melalui phpMyAdmin untuk memastikan data pendaftaran donor benar-benar tersimpan, bukan hanya menampilkan pesan sukses di layar.

10. Masalah yang Ditemui Saat Deployment

Deployment BloodConnect tidak berjalan mulus sepenuhnya. Berikut beberapa masalah nyata yang saya temui, beserta cara mengatasinya.

Folder CSS & JS Tidak Terupload

Tampilan website menjadi polos tanpa styling karena folder css/ dan js/ belum sepenuhnya terupload ke server.

Solusi: memeriksa isi folder htdocs di FileZilla, lalu mengupload ulang seluruh folder pendukung yang belum ada.

Gagal Import Database

Import database gagal dengan pesan “Access denied to database” karena file SQL berisi perintah pembuatan database dengan nama yang tidak diizinkan hosting.

Solusi: menghapus baris CREATE DATABASE dan USE dari file SQL, lalu mengimpor ulang ke database yang sudah dibuat lewat dashboard hosting.

Data Tidak Muncul Saat Diakses dari Perangkat Mobile

Saat form pendaftaran donor disubmit dari HP menggunakan jaringan data seluler, aplikasi menampilkan pesan sukses namun data tidak tersimpan di database.

Solusi: mengaktifkan HTTPS pada domain hosting dan memverifikasi ulang beberapa saat kemudian. Masalah ini kemungkinan disebabkan keterlambatan sinkronisasi pada infrastruktur hosting gratis serta koneksi HTTP biasa yang rentan terhadap gangguan proxy jaringan operator seluler.

11. Hasil Deployment

Setelah file aplikasi, database, dan konfigurasi berhasil dipindahkan, BloodConnect kini dapat diakses secara publik melalui:

🔗 https://bloodconnectpmi.free.nf/login.html

Alur deployment yang dilakukan dapat digambarkan secara sederhana seperti berikut:

LOCAL (XAMPP)
  │
  │ Upload via FileZilla
  ▼
INFINITYFREE HOSTING
  │
  │ Import Database + Konfigurasi .env
  ▼
BLOODCONNECT (HTTPS)
  │
  ▼
INTERNET
  │
  ▼
PENGGUNA (laptop & HP)

Sebelumnya BloodConnect hanya dapat diakses dari komputer lokal saya sendiri. Setelah deployment, aplikasi dapat diakses siapa saja, dari perangkat apa saja — sudah diuji dan berhasil dibuka dari laptop maupun HP dengan jaringan berbeda.

12. Hubungan Deployment dengan DevOps & Cloud

Deployment BloodConnect merupakan contoh sederhana dari workflow DevOps. Selain proses deployment manual ini, saya juga menerapkan beberapa praktik DevOps lain pada project yang sama, yaitu:

• CI/CD Pipeline — GitHub Actions yang otomatis mengecek syntax seluruh file PHP setiap kali kode di-push.
• Logging System — pencatatan otomatis aktivitas login pengguna ke file activity.log.
• Health Check Endpoint — halaman health.php yang menampilkan status server dan database dalam format JSON.
• Automated Backup — script backup.sh/backup.bat untuk mencadangkan database secara otomatis.
• Environment Configuration — pemisahan kredensial sensitif ke file .env yang tidak ikut terunggah ke GitHub.

DEVELOPMENT (localhost)
     ↓
   TESTING
     ↓
  DEPLOYMENT (FileZilla → InfinityFree)
     ↓
CONFIGURATION (.env, database)
     ↓
   TESTING ULANG (lintas device)
     ↓
PUBLIC ACCESS (HTTPS)

🚀 Bisa Dikembangkan Lagi
Deployment manual menggunakan FileZilla pada project BloodConnect dapat menjadi langkah awal sebelum mempelajari deployment otomatis (Continuous Deployment) menggunakan GitHub Actions dan FTP Action, sehingga proses upload tidak perlu dilakukan manual lagi di masa depan.

Kesimpulan

Memindahkan aplikasi PHP dari server lokal ke hosting publik merupakan salah satu tahap penting dalam pengembangan website. Pada project BloodConnect, proses deployment dilakukan dengan mempersiapkan file aplikasi, mengupload file melalui FileZilla, menyiapkan database di InfinityFree, menyesuaikan konfigurasi lewat file .env, dan melakukan testing berulang kali hingga aplikasi benar-benar dapat diakses secara konsisten dari berbagai perangkat.

Dari proses tersebut, saya belajar bahwa aplikasi yang berjalan dengan baik di komputer lokal belum tentu langsung berjalan dengan baik ketika dipindahkan ke server publik. Perbedaan aturan penamaan database, struktur folder yang harus lengkap, hingga perilaku jaringan yang berbeda antar perangkat, semuanya perlu diperhatikan dan diuji satu per satu.

Deployment BloodConnect menjadi praktik nyata untuk memahami bagaimana sebuah aplikasi berpindah dari lingkungan development menuju lingkungan yang dapat digunakan secara publik, sekaligus menjadi fondasi untuk mempelajari praktik DevOps yang lebih lanjut seperti Continuous Deployment, containerization, dan cloud computing.

penulis : Devina Ghea Amanda