Artikel

Selamat Tinggal Upload Manual: Cara Edit Kode Hostinger Langsung dari IDE

Pernahkah kamu merasa lelah saat sedang asyik merombak fitur aplikasi, tapi harus bolak-balik mengompres file, buka panel hosting, lalu upload ulang hanya untuk melihat perubahan satu baris kode PHP?

Proses manual ini tidak hanya membuang waktu, tapi juga menguras tenaga. Kabar baiknya, kalau kamu menggunakan IDE agentic seperti Antigravity (atau VS Code), ada jalan pintasnya! Kamu bisa mengedit, menyimpan, dan mengunduh file langsung dari server Hostinger tanpa harus meninggalkan layar kodemu.

Mari kita bahas cara praktis menyulap IDE kamu menjadi “remote control” untuk servermu.

Persiapan Awal

Sebelum mulai, pastikan kamu sudah menyiapkan:

Akun Hostinger yang sudah aktif.
IDE (Antigravity/VS Code) yang sudah terbuka di komputermu.
Koneksi internet yang stabil.

4 Langkah Mudah Menghubungkan IDE ke Hostinger

1. Pasang Ekstensi “Ajaib”

Langkah pertama adalah menambahkan alat bantu ke dalam IDE kamu.

Buka menu Extensions di bilah kiri layar (ikon kotak-kotak).
Ketik SFTP di kolom pencarian.
Cari ekstensi buatan Natizyskunk dan klik Install.

2. Intip “Kunci Rahasia” di Hostinger

Agar IDE bisa masuk ke server, ia butuh izin akses.

Masuk ke dashboard hPanel Hostinger.
Buka menu Files, lalu pilih FTP Accounts.
Catat tiga hal penting ini: IP Server (Host), Username FTP, dan Password FTP.

3. Jembatani IDE dan Server

Sekarang, mari kita buat jembatannya agar IDE dan Hostinger bisa saling mengobrol.

Buat sebuah folder kosong di komputermu, lalu buka folder tersebut di IDE kamu.
Tekan tombol Ctrl + Shift + P (atau Cmd + Shift + P di Mac).
Ketik SFTP: Config lalu tekan Enter.
Sebuah file bernama sftp.json akan muncul. Hapus semua isinya, lalu copy-paste format standar di bawah ini:

JSON

{
    "name": "Server Hostinger Saya",
    "host": "193.xxx.xxx.xx", 
    "protocol": "ftp",
    "port": 21,
    "username": "usernamekamu",
    "password": "PasswordFTPkamu!",
    "remotePath": "/public_html/",
    "uploadOnSave": true,
    "ignore": [
        ".vscode",
        ".git",
        ".DS_Store"
    ]
}

Penjelasan Singkat Konfigurasi:

"host": Ganti dengan angka IP Server Hostinger kamu.
"username": Ganti dengan Username FTP kamu.
"password": Ganti dengan Password FTP kamu.
"remotePath": Ini adalah folder tempat website-mu berada di server (biasanya /public_html/).
"uploadOnSave": true: Bagian ajaibnya! Setiap kamu Ctrl + S, file akan otomatis terkirim ke server.

Setelah semuanya diganti dengan data milikmu, simpan file sftp.json tersebut.

4. Tarik Kode ke Komputer Lokal

Koneksi sudah tersambung! Sekarang saatnya menarik kodemu dari internet ke komputer.

Tekan lagi Ctrl + Shift + P.
Ketik SFTP: Download Project lalu tekan Enter.
Voila! Seluruh file proyekmu akan otomatis terunduh ke komputer lokal.

Mulai sekarang, setiap kali kamu mengedit file dan menyimpannya, file tersebut akan otomatis diperbarui di Hostinger secara real-time.

Sering Gagal Login? Cek 3 Hal Ini!

Untuk pemula, gagal terhubung di percobaan pertama itu hal yang sangat wajar. Jika muncul error atau timeout, segera periksa bagian ini:

Password Berbeda: Password hPanel (untuk login ke website Hostinger) sering kali berbeda dengan password FTP. Pastikan kamu menggunakan password khusus FTP.
Salah Alamat Host: Terkadang, menggunakan nama domain (seperti ftp.webkamu.com) bisa gagal. Gunakan format angka IP Address dari server Hostinger (seperti contoh di atas) agar lebih stabil.
Salah Pasangan Port: Jika kamu mengatur "protocol": "ftp", pastikan port-nya wajib 21. Jika ingin koneksi yang lebih aman memakai "protocol": "sftp", port-nya wajib 22 (dengan catatan fitur SSH di Hostinger harus diaktifkan dulu).