Menjawab pertanyaan dari pembaca pada artikel Publish ke HTML5 dari Smart Apps Creator tentang bagaimana HTML5 bisa online dan terakses untuk publik dengan hosting gratis? Simak berikut penjelasan dan langkah-langkahnya.
HTML5 untuk Publik
Yang perlu diingat adalah HTML5 merupakan file berbasis web sehingga butuh hosting atau tempat di server dan sebuah nama tertentu yang kita sebut domain atau subdomain agar bisa diakses oleh publik.
Dulu Google Drive sempat bisa digunakan sebagai hosting dan dengan bantuan pihak ketiga yakni Drive to Web , file web statis dari Google Drive tersebut bisa online dengan mudah. Namun, setelah saya cek terakhir ini ternyata fitur Google Drive sebagai hosting tersebut sudah di-drop alias dihapus oleh Google. Mungkin mereka berpikir, “Enak aja ngasih hosting gratis” ?
Saya sudah mencoba berbagai web static yang beredar di dunia maya mulai dari Static App, Tiiny Host, dan sejenisnya dengan hasil yang sama: hanya berlaku dengan masa trial singkat yakni 7 hari. Alhasil, kesimpulan untuk ini adalah tidak cocok jika kalian sangat tidak menyukai masa trial yang tidak bisa diperpanjang kecuali membayar.
Jika melirik bagian paragraf sebelumnya, pertanyaan yang akan muncul biasanya akan seperti ini:
Lalu, apakah harus memakai hosting berbayar untuk bisa mengakses HTML5? Jawabannya adalah tidak harus.
HTML5 dengan Hosting Gratis
Penggunaan hosting bisa bermacam-macam mulai dari versi gratisan dengan berbagai limitasinya hingga versi berbayar termasuk cloud hosting. Sebenarnya jika hanya untuk mencoba, sudah banyak penyedia hosting gratisan yang tersebar di dunia maya. Tentu karena gratisan pasti banyak limitasinya termasuk kuota disk storage yang terbatas.
Dalam tutorial ini saya pilihkan yang gratis dan kuota cukup untuk file HTML5 hingga bisa memiliki koneksi ke database sekalipun. Satu lagi, hosting gratis yang saya gunakan ini memiliki masa aktif gratis selamanya dengan syarat kalian hanya rajin login akun saja. Jika lama tidak login, biasanya akun gratisan akan otomatis terhapus ya.
Langsung saja kita menuju langkah agar HTML5 bisa online dengan menggunakan hosting gratisan. Simak langkah-langkah berikut dengan saksama ?
- Buka id.000webhost.com yang merupakan alamat web sebagai hosting gratisan yang akan kita gunakan. Sebagai intro, sekarang 000webhost ini telah bekerjasama dengan ID Hostinger. Dulu saat saya kuliah (sekitar 7 tahun yang lalu), ID hostinger dan 000webhost ini berdiri sendiri dengan menyediakan fitur hosting gratis masing-masing. Sekarang ternyata sudah terkombinasi di mana 000webhost menjadi bagian dari fitur gratis dari ID Hostinger.
- Setelah terbuka, pilih bagian Daftar Gratis. Jika kalian sudah yakin untuk membeli hosting, silakan langsung aja pilih versi berbayar yang tersedia ya.
- Kemudian akan muncul tampilan untuk login. Jika kalian belum memiliki akun, bisa mendaftar langsung secara gratis dengan email atau bisa langsung login dengan sosmed yang ada yakni akun FB/akun Gmail. Saya sih biasanya pakai akun Gmail saja.
- Kemudian akan muncul bagian intro sebelum memulai project seperti gambar di bawah ini. Intro ini hanya muncul di awal saja setelah mendaftar ya alias jika kalian user baru. Namun, jika sudah user lama lalu login lagi, tampilan intro ini tidak akan muncul kembali dan akan langsung dialihkan ke halaman manajemen website kalian.
- Karena saya menggunakan Firefox, akan muncul tampilan notif di bagian bawah sebagai rekomendasi untuk beralih ke Chrome. Jika ingin tetap di Firefox, tutup saja bagian tersebut dengan klik tanda silang sampingnya.
- Setelah tertutup, akan muncul teks It’s not my first rodeo, take me to the Panel. Klik saja bagian tersebut.
- Kemudian yang perlu kalian lakukan adalah membuat website baru. Perlu diperhatikan bahwa nama yang kalian tuliskan ini nanti akan menjadi subdomain – ingat ya, karena gratis jadi web kalian akan memiliki nama sebagai subdomain – dari 000webhost. Karena nama project akan menjadi subdomain, maka tidak boleh ada karakter seperti spasi ataupun sejenisnya yang sulit dipanggil. Santai saja, jika berhasil nanti akan diproses oleh 000webhost. Begitu pula jika nama project kalian tidak sesuai dengan ketentuan karakter dari 000webhost.
- Setelah memasukkan password untuk project, lanjutkan dengan klik Submit dan tunggu prosesnya sampai selesai.
- Jika berhasil dan muncul tampilan seperti berikut, kalian Logout akun terlebih dahulu. Alasannya adalah kita akan menggunakan FTP yang tidak muncul di pilihan tampilan ini dan hanya muncul di dashboard akun. Jadi, silakan Logout terlebih dahulu ya 😀
Bekerja dengan FTP
FTP adalah singkatan dari File Transfer Protocol, yang merupakan protokol jaringan untuk mentransfer file dari satu komputer ke komputer lain di jaringan. FTP umumnya digunakan oleh pengguna internet untuk mengunggah atau mengunduh file dari server web, seperti halaman web, gambar, video, dan aplikasi.
Dalam hal ini, FTP akan kita gunakan untuk mengakses file melalui koneksi internet dan melakukan operasi seperti mengunggah, mengunduh, memindahkan, dan menghapus file dari komputer ke server ataupun sebaliknya. FTP menggunakan protokol TCP/IP untuk mentransfer data, dan dapat diakses menggunakan klien FTP seperti FileZilla atau sejenisnya.
Untuk dapat menggunakan FTP, download terlebih dahulu software FileZilla FTP Client karena kita sebagai pengguna yang akan mengupload/mengunduh file dari dan ke server. Cus berikut linknya:
Lakukan instalasi seperti biasa hingga selesai. Buka FileZilla dan akan muncul tampilan seperti berikut.
Tanda di nomor-nomor tersebut nanti akan kalian isi sesuai akun FTP yang diberikan oleh 000webhost.
Terlebih dahulu, login kembali ke akun 000webhost kalian hingga nanti otomatis dialihkan ke laman dashboard seperti berikut.
Klik Manage Website untuk memunculkan laman bagian pengelolaan web termasuk bagian akun FTP.
Sebagai catatan, bagian sebelah kanan gambar tersebut yang bertuliskan Get Chrome hanya akan muncul saat menggunakan browser selain Chrome. Jika sudah menggunakan Chrome, bagian ini tidak akan muncul. Ini hanya rekomendasi saja dari 000webhost. Not necessary, actually ????
Lanjukan dengan klik Website Settings.
Kemudian pilih General. Di bagian inilah kalian bisa mendapatkan akses untuk login ke akun FTP dengan FileZilla. Bagian tersebut saya tandai dengan kotak merah, ya.
Masukkan Hostname, Port, Username, dan Password ke bagian yang ada di FileZilla.
Akhiri dengan klik Quickconnect untuk mulai menghubungkan FileZilla dengan server 000webhost akun kalian. Jangan lupa sandinya ya pada saat membuat project baru tadi.
Jika kalian berhasil login, akan ada keterangan successful seperti yang saya tandai dengan kotak merah di atas. Selanjutnya, FileZilla akan menampilkan bagian direktori (folder) antara data di PC/komputer kalian dengan data di server (dalam hal ini kita memakai 000webhost).
Sebelah kiri adalah data di PC/komputer, sedangkan sebelah kanan adalah data di server. Dari interface bagian inilah kalian bisa mulai memindahkan data (upload, download, dan delete) data di server. Namun, jika ingin memodifikasi alias mengedit, FileZilla tidak menyediakan fitur editing secara live. So, ada baiknya kalian mengunduh dulu ke PC, hapus data lama di server, lalu mengunggahnya kembali dengan data baru yang sudah teredit di PC.
Langkah berikutnya adalah kalian harus masuk ke folder public_html di server untuk meletakkan alias mengupload semua file dan folder web (termasuk project HTML5). Yup, semua file dan folder yang ingin tampil di web harus diuplaod ke folder public_html agar bisa dilihat secara online. Jika di luar folder ini, maka tidak akan terlihat saat kalian mengakses web.
Adapun cara masuk ke folder public_html di FileZilla bisa kalian lihat pada bagian keterangan di gambar berikut.
Pastikan juga kalian sudah masuk ke folder project web yang akan kalian unggah di bagian direktori PC (sebelah kiri). Setelah masuk ke folder public_html, akan ada perubahan pada bagian Remote site (sebelah kanan) seperti gambar berikut.
Untuk mengupload, pilih semua file dan folder project web kalian dengan blok keseluruhan > klik kanan > pilih Upload.
Tanda proses sedang berjalan adalah ada kedip-kedip dari dua lingkarana di bagian pojok kanan bawah disertai dengan persentase progress upload seperti di gambar berikut.
Tunggu proses hingga selesai aja.
Pertanyaan yang muncul kemudian adalah apakah dalam proses upload ini bisa terjadi kegagalan?
Jawabannya adalah pasti bisa apalagi kalau koneksi internet kalian tidak lancar. Namun, tenang saja karena FileZilla otomatis akan langsung mencoba ulang untuk mengupload ulang. Jadi, kalian tidak perlu mengupload lagi selama masih terkoneksi internet dan FileZilla kalian masih berproses.
Yang perlu kalian perhatikan adalah pada tanda berikut.
Bagian paling bawah FileZilla yakni Queued files, Failed transfers, dan Successful transfers ini menunjukkan tingkat keberhasilan progress upload.
- Queued file : file dan folder yang masih proses antri untuk upload.
- Failed transfers : file dan folder yang gagal terupload.
- Successful transfers : file dan folder yang sukses terupload.
Pastikan di bagian Failed transfers tidak ada angka kegagalan, ya. Jika ada, klik kanan di bagian Failed transfers > pilih Reset and requeue all. Hal ini akan otomatis memerintahkan FileZilla agar mengupload kembali yang gagal.
Sampai di sini proses upload web selesai.
Mengakses Web dari Hosting Gratis
Setelah proses upload selesai, kalian bisa membuka laman web kalian sesuai nama project yang kalian buat tadi dan akhirnya menjadi subdomain dari 000webhost. Alamat ini bisa kalian lihat pada bagian dashboard saat login akun tadi. Untuk alamat web saya ada di
Done dan semua bisa kalian dapatkan secara gratis yes. Jika kalian ingin menjadikan web ini dengan nama sendiri alias menjadi domain (semacam .com atau .org atau sejenisnya), lakukan pembelian domain terlebih dahulu untuk diarahkan ke web kalian ini. Saran saya sih gak perlu karena terbatas juga space disk untuk kuota host gratis. Mending gratis aja ????
