Trutorial Bikin Web Gratis

 

Saat ini ratusan bahkan ribuan situs-situs baru bermunculan setiap hari di
internet. Hal ini didukung oleh semakin banyaknya fasilitas penyedia
pembuatan situs baik gratis maupun berbayar. Juga semakin baiknya
infrastruktur internet karena kebijakan pemerintah yang cukup mendukung.
Pernahkah anda membayangkan memiliki situs sendiri? Umumnya orang
berpikiran bahwa untuk memiliki sebuah website membutuhkan biaya yang
mahal, dan kalau membuatnya sendiri cukup rumit. Padahal, dengan

memanfaatkan fasilitas dan tools gratis di internet, ternyata anda bisa
membuat dan memiliki website professional dengan gratis.
Nah, melalui e-book ini saya akan berusaha membimbing anda dari nol
bagaimana membuat situs gratis dengan studi kasus situs saya sendiri
www.bikinwebgratis.co.cc. Anda tidak perlu beli domain, sewa hosting, dan
membayar web desainer untuk membuatkan situs untuk anda.
Halaman 5 - Tutorial Bikin Website Gratis dari www.BikinWebGratis.co.cc
Saya berusaha semaksimal mungkin agar anda dapat dengan mudah
memahami dan mempraktekkan langsung apa yang saya tulis di sini. Saya
lengkapi langkah demi langkah dengan screenshot gambar.
Namun, bila anda tetap menemui kesulitan dalam mengaplikasikan tutorial ini,
maka jangan ragu silahkan kirim pertanyaan anda ke e-mail saya, sedapat
mungkin akan saya jawab sesuai kemampuan dan pengalaman yang saya
miliki.
Akhirnya, selamat belajar dan praktek …
Halaman 6 - Tutorial Bikin Website Gratis dari www.BikinWebGratis.co.cc
LANGKAH AWAL
Sebagai langkah awal dalam membuat sebuah situs, anda harus menentukan
terlebih dahulu hal-hal sebagai berikut:
1. Situs jenis apa yang ingin anda buat: situs content atau minisite, pakai
bahasa html atau php, menjual produk atau sekadar artikel, dll.
2. Tema website anda : apakah berhubungan dengan teknologi, kesehatan,
gaya hidup, dll.
3. Target pengunjung yang diharapkan : dari dalam negeri atau luar negeri,
laki-laki atau perempuan, pemula atau expert, tua atau muda, dll.
4. Aktifitas pengunjung di situs anda : membeli atau menitip nama dan e-mail,
mendownload, ikut polling/survey, pasang iklan, dll.
5. Tujuan atau manfaat situs tersebut buat anda : membangun list, menjual
produk, memajang artikel agar mudah ditemukan di search engine, dll.
Untuk situs www.bikinwebgratis.co.cc saya rencanakan di awal sebagai berikut:
1. Situs jenis minisite dengan tampilan desain minimalis dan menggunakan
bahasa pemrograman html (statis).
2. Tema website : situs download e-book tutorial
3. Target pengunjung dari dalam negeri untuk semua umur dan jenis kelamin.
4. Aktifitas pengunjung di situs : mengundang teman dan mendownload ebook
5. Tujuan yang ingin dicapai : membangun list dan kredibilitas.
Nah setelah anda mempunyai gambaran tentang situs anda seperti di atas,
selanjutnya anda buat kerangka atau outline tentang situs yang akan anda
buat. Anda bisa bikin outline ini di selembar kertas dengan menggunakan pensil
atau pulpen. Cara yang biasa saya gunakan adalah seperti membuat bagan
alir (flowchart), menghubungkan antara satu halaman dengan halaman
lainnya.
Sebagai contoh saya merencanakan situs www.bikinwebgratis.co.cc ini
menggunakan 5 (lima) halaman, maka saya membuat bagan alirnya sebagai
berikut:
Halaman 7 - Tutorial Bikin Website Gratis dari www.BikinWebGratis.co.cc
Dengan adanya bagan alir ini akan sangat membantu untuk memvisualisasikan
isi setiap halaman dan navigasi antara halaman-halaman web yang akan
dibuat. Di samping itu, bagan alir juga dapat mempermudah pemeliharaan
dan update (pembaharuan) isi atau content situs setiap saat apabila
dibutuhkan.
Selanjutnya agar situs anda bisa online dan diakses dari seluruh dunia maka
anda membutuhkan:
1. Lahan (hosting) untuk menyimpan file situs anda
2. Nama (domain) untuk memanggil/menampilkan situs anda di browser
internet.
3. Desain tampilan dan content (isi) yang akan dilihat oleh pengunjung
Home
Download Kontak
RespoTrims n
Iklan
Halaman 8 - Tutorial Bikin Website Gratis dari www.BikinWebGratis.co.cc
TAHAP PERANCANGAN WEBSITE
Sebelum merancang website, ada beberapa hal yang perlu anda lakukan :
1. Mengumpulkan atau membuat gambar (image) yang akan ditampilkan
di web.
2. Mengumpulkan atau membuat materi/isi (content) web.
3. Merancang desain web atau mencari template gratis di internet.
4. Mencari script yang mendukung.
Lalu anda siapkan juga program atau software yang akan membantu anda
membuat dan mengedit website anda. Saya sendiri menggunakan :
1. Microsoft Frontpage 2003 untuk membuat dan mengedit halaman web.
2. Macromedia Fireworks dan Corel Photopaint untuk mengedit image
(gambar).
3. True Box Shot untuk membuat cover e-book.
Nah, sekarang saya ingin tunjukkan bagaimana cara saya mendapatkan
template gratis yang cocok dengan website yang ingin saya rancang. Seperti
yang saya uraikan sebelumnya bahwa saya ingin membuat situs jenis minisite,
untuk itu saya mencari situs yang menyediakan template minisite gratis di
Google.
Dari beberapa situs hasil pencarian google, akhirnya saya memilih salah satu
situs penyedia template gratis yang memenuhi kriteria yang saya harapkan,
yaitu www.minisitegallery.com. Situs ini menyediakan template minisite dengan
desain professional dan bernilai jual tinggi tapi tetap diberikan gratis.
Halaman 9 - Tutorial Bikin Website Gratis dari www.BikinWebGratis.co.cc
Pada saat e-book ini saya buat, jumlah template minisite gratis yang tersedia di
situs tersebut adalah 15 buah. Saya memilih salah satu di antaranya, yaitu
template dengan nama “Aggressive Blue”.
A. Cara mendownload Template :
1. Buka www.minisitegallery.com
2. Bawa kursor ke atas gambar template yang anda ingin download
3. Klik “details” dari template tersebut, maka akan muncul halaman baru
yang menguraikan lebih detail tentang template tersebut.
4. Klik link “Register” untuk melakukan pendaftaran terlebih dahulu. Bila
anda sudah pernah mendaftar sebelumnya cukup klik link “logged in”
untuk login dan mendownload template yang diinginkan.
5. Lalu akan terbuka halaman login wordpress untuk melakukan
pendaftaran seperti pada gambar berikut.
Halaman 10 - Tutorial Bikin Website Gratis dari www.BikinWebGratis.co.cc
6. Masukkan “Username” yang anda inginkan ke kotak isian username.
7. Masukkan alamat e-mail anda yang masih aktif, karena mereka akan
mengirimkan data login serta password anda ke alamat e-mail yang
anda daftarkan tersebut.
8. Masukkan angka pada kotak isian. Pada contoh gambar di atas,
masukkan angka 8 karena 7 + 1 = 8.
9. Klik tombol “Register” untuk mengirimkan pendaftaran anda.
10. Selanjutnya cek e-mail anda dan cari subject e-mail seperti ini :
[MiniSiteGallery.com] Your username and password. Anda akan
mendapatkan username sesuai yang anda daftarkan, dan password
sementara. Blok dan copy password sementara tersebut.
11. Klik link minisitegallery.com/wp-login.php yang disertakan dalam e-mail
tersebut, lalu akan terbuka halaman login wordpress.
12. Silakan masukkan username dan password sementara pada kotak isian
yang tersedia. Selanjutnya anda akan login ke halaman member area.
Langkah pertama yang harus anda lakukan adalah mengganti password
sementara tersebut dengan password baru yang anda tentukan sendiri.
13. Klik menu “Your Profile” lalu geser layar ke bawah dan temukan kotak
isian “New Password”, isi dengan password baru anda lalu klik tombol
“Update Profile”.
14. Selanjutnya anda kembali ke situs www.minisitegallery.com dan
mendownload template yang anda inginkan.
15. Anda akan mendapatkan file dengan nama seperti “namatemplate.zip”.
Untuk contoh di sini saya mendapatkan file template “aggressiveblue.
zip”.
B. Cara Merancang Web dengan Template
1. Setelah anda mendapatkan file template, lalu ekstrak file template
tersebut ke folder komputer anda. Sebaiknya buat folder khusus agar
memudahkan anda dalam mencarinya. Sebagai contoh, saya
mengekstrak template “aggressive-blue.zip” dan saya mendapatkan 2
Klik Link ini utk
download
Halaman 11 - Tutorial Bikin Website Gratis dari www.BikinWebGratis.co.cc
folder, 1 file css, dan 1 file html. Yang diperlukan di sini adalah folder
images, file style.css, dan file template.html. Sedangkan folder “psd” berisi
file desain situs dan image cover e-book dalam format .psd. Ini
diperuntukkan bagi anda yang ingin merubah atau mengedit tampilan
menggunakan program Photoshop. Saya sendiri tidak menggunakan
Photoshop untuk mengedit image sehingga file psd ini saya hapus saja.
2. Silahkan buka file “template.html” untuk melihat tampilan minisite tersebut
dengan mengklik dua kali file tersebut. Maka akan tampak tampilan
seperti berikut ini.
3. Selanjutnya anda tutup window tampilan tersebut lalu gandakan file
(template.html) dengan cara copy n paste sebanyak jumlah halaman
yang ingin anda buat. Di sinilah manfaat bagan alir yang pernah kita
buat sebelumnya, sehingga kita bisa tahu berapa jumlah halaman yang
akan dibuat. Anda akan mendapatkan nama file baru seperti copy of
template, copy (2) of template, copy (3) of template, dst.
4. Selanjutnya anda rename (ganti nama) file tersebut, dengan nama
halaman yang akan anda buat. Halaman utama (depan) HARUS diberi
nama “index.html”, lalu file “copy of template” ganti namanya menjadi
Halaman 12 - Tutorial Bikin Website Gratis dari www.BikinWebGratis.co.cc
“download”, dst. sehingga saya mendapatkan hasil seperti pada
gambar berikut:
5. Jangan lupa, mengumpulkan semua file gambar yang akan ditampilkan
di web pada folder “images”. Meskipun file gambar tersebut sudah ada
di komputer anda di folder lain, anda tetap harus meng-copy file gambar
tersebut lalu pindahkan ke folder “images” ini.
File gambar anda tidak akan ditampilkan di web apabila gambar anda
berada di folder lain, ini harus anda perhatikan baik-baik. Saya sering
ditanya tentang hal ini, mengapa gambarnya tidak tampil di website
padahal waktu dibuka di komputer semua gambar tampil sempurna.
6. Anda juga dapat mengedit dan atau mengganti file gambar yang ada
di folder images tersebut sebagai bawaan template awal. Sebagai
contoh saya mengganti (mengedit) file header dan cover e-book agar
sesuai dengan tampilan yang saya inginkan, hasilnya seperti pada
gambar berikut.
Ini tampilan awal dari template :
Ini tampilan baru setelah diedit :
7. Setelah semuanya dirasa lengkap, tibalah saatnya mengedit dan mengisi
halaman web template dengan content hingga tercipta website seperti
yang diinginkan. Pertama-tama buka file “index.html” menggunakan
program web creator seperti MS. Frontpage 2003 yang saya gunakan.
Ganti materi/isi template dengan kata atau kalimat yang anda inginkan.
Dan hasilnya bisa tampak seperti pada gambar berikut.
Halaman 13 - Tutorial Bikin Website Gratis dari www.BikinWebGratis.co.cc
8. Lalu anda edit file html lainnya sesuai dengan isi dan tampilan yang anda
inginkan. Hubungkan halaman satu dengan halaman lainnya dengan
menggunakan “Hyperlink” (gunakan menu Insert > Hyperlink). Sebaiknya
anda menggunakan menu link untuk membuat hubungan antar
halaman seperti tampak pada gambar berikut.
9. Setelah dirasa semua sudah OK, sebelum mengupload ke web hosting
sebaiknya anda tes dulu untuk mengetahui apakah situs tersebut telah
berfungsi sebagaimana mestinya. Silahkan klik dua kali file index.html. Klik
link-link yang anda buat apakah semuanya terhubung dan tidak ada lagi
error link.
Periksa juga kata demi kata, kalimat demi kalimat, paragraph demi
paragraph, apakah sudah sesuai dengan kaidah yang baik dan benar
atau masih perlu perbaikan. Jika dirasa ada yang perlu diperbaiki, maka
anda buka kembali file tersebut di Frontpage, lalu perbaiki seperlunya.
Nah, setelah melalui tahap-tahap di atas… sekarang waktunya untuk mengonline-
kan website anda. Untuk itu anda memerlukan lahan (webhosting) untuk
menempatkan semua file yang telah anda buat tersebut, dan nama domain
untuk memanggil file tersebut agar bisa tampil di browser internet.
Halaman 14 - Tutorial Bikin Website Gratis dari www.BikinWebGratis.co.cc
MEMILIH NAMA DOMAIN
Apalah arti sebuah nama. Begitu pujangga William Shakespeare menisbikan arti
penting nama dalam kehidupan. Namun, pujangga romantis ini ternyata tidak
sepenuhnya benar. Dalam dunia bisnis online, nama menjadi sangatlah
penting. Nama domain (domain name) selain sebagai alamat anda di
cyberspace, ia sekaligus juga berperan sebagai brand bisnis atau diri Anda.
Karena pentingnya nama di dunia maya, maka sangat disarankan untuk
memilih domain name yang singkat, mudah dilafalkan atau diucapkan, unik,
mudah untuk diingat, dan mengandung keyword yang anda target.
Untuk memiliki nama domain, anda bisa memilih yang berbayar atau gratis.
Yang berbayar tentu memiliki berbagai kelebihan, namun sebagai pemula
tidak ada salahnya memanfaatkan fasilitas domain gratis seperti yang akan
saya uraikan lebih lanjut melalui e-book ini.
Berikut adalah beberapa penyedia nama domain gratis di internet:
1. www.domain.co.nr
2. www.dot.tk
3. www.co.cc
Dari ketiga penyedia nama domain tersebut, saya paling menyukai “co.cc”
karena adanya fasilitas DNS server sehingga bisa di add-on ke web server yang
kita gunakan. Sedangkan “dot.tk” dan “co.nr” hanya berfungsi sebagai redirect
url.
Dalam tutorial ini hanya akan saya jelaskan cara mendapatkan domain gratis
dari www.co.cc, format nama domain yang anda dapatkan adalah
www.namadomain.co.cc, contohnya : www.bikinwebgratis.co.cc.
Cara Mendapatkan Domain :
1. Buka www.co.cc, lalu ketikkan nama domain yang anda inginkan di
kotak isian yang tersedia, lalu klik tombol “Check availability” untuk
mengecek apakah domain yang anda inginkan belum diambil/
didaftarkan oleh orang lain.
Halaman 15 - Tutorial Bikin Website Gratis dari www.BikinWebGratis.co.cc
2. Jika domain name tersebut belum diambil atau didaftarkan oleh orang
lain, maka akan tampil di halaman berikutnya penyampaian bahwa
domain tersebut masih “available” untuk anda seperti pada gambar
berikut:
3. Klik tombol “Continue to registration” maka akan terbuka halaman untuk
melakukan pendaftaran (bagi member baru) atau login bagi member
yang sudah memiliki account.
Cek domain
yang anda
inginkan di sini
!
Klik di sini
untuk daftar
Halaman 16 - Tutorial Bikin Website Gratis dari www.BikinWebGratis.co.cc
4. Lalu akan terbuka halaman formulir pendaftaran seperti berikut ini.
5. Isi semua kotak isian terutama yang ada tanda  itu berarti harus diisi,
yang lain optional aja boleh tidak diisi. Isilah data sesuai dengan data
sebenarnya, terutama alamat e-mail. Jangan lupa centang pada “I
accept the Terms of Services” sebelum mengklik tombol “Create an
account now”.
6. Selanjutnya akan muncul pemberitahuan bahwa account anda berhasil
dibuat.
Jangan lupa
centang di sini!
Halaman 17 - Tutorial Bikin Website Gratis dari www.BikinWebGratis.co.cc
7. Anda harus men-setting domain anda paling lambat 48 jam setelah
pendaftaran tersebut diterima. Sebaiknya anda langsung setting pada
saat itu juga. Klik tombol “Set up” untuk men-setting domain anda, akan
terbuka halaman baru seperti berikut.
8. Klik pada pilihan no. 1 yaitu “Manage DNS” maka akan terbuka kotak
isian untuk memasukkan kode DNS webhosting yang digunakan. Isilah
pada kotak isian tersebut dengan “ns1.byet.org” dan “ns2.byet.org”
seperti pada gambar berikut. DNS ini mengacu kepada webhosting
gratisan yang akan kita gunakan untuk menempatkan file web kita.
9. Terakhir klik tombol “Set up” untuk mengakhiri proses setting domain
anda. Akan keluar halaman baru yang menyatakan bahwa anda telah
melakukan perubahan pada settingan domain anda. Klik tombol “OK”
untuk mengakhiri.
Halaman 18 - Tutorial Bikin Website Gratis dari www.BikinWebGratis.co.cc
Nah, sekarang anda telah memiliki nama domain yang cukup keren dan semiprofesional
dengan biaya nol rupiah. Bandingkan bila anda beli domain
berbayar, maka anda harus merogoh kocek antara Rp.65.000,- sampai
Rp.120.000,- yang dibayar per tahun.
Di “co.cc” bahkan anda bisa mendapatkan 2 (dua) domain gratis untuk setiap
alamat e-mail yang anda daftarkan. Namun, bila dalam 30 hari web anda
yang menggunakan domain tersebut belum anda online-kan, maka domain
anda otomatis dinon-aktifkan dan bisa diambil oleh orang lain yang mendaftar
kemudian.
Untuk itulah anda harus segera merancang website anda, seperti yang sudah
saya jelaskan sebelumnya, lalu anda upload ke webhosting gratisan yang akan
saya jelaskan berikut ini.
Halaman 19 - Tutorial Bikin Website Gratis dari www.BikinWebGratis.co.cc
MEMILIH WEB HOSTING
Web hosting adalah salah satu komponen utama yang diperlukan agar file kita
bisa diakses melalui web browser. Web hosting atau web server adalah tempat
untuk menyimpan file website yang kita buat agar bisa ditampilkan di internet.
Dari segi biaya, webhosting juga terbagi dua, yakni ada hosting berbayar dan
ada pula hosting gratisan.
Pada tutorial ini saya akan menguraikan bagaimana mendapatkan fasilitas
webhosting gratisan semi professional dengan berbagai fitur yang hampir sama
dengan yang berbayar. Adapun fitur-fitur tersebut di antaranya:
1. Kapasitas space yang cukup besar untuk menyimpan file yakni sebesar
243 MB.
2. Bandwidth bulanan yang cukup besar yakni sebesar 20 GB lebih.
3. Vista Control Panel yang mirip dengan cPanel pada hosting berbayar
4. Support PHP dan MySQL
5. Automatic Script Installer yang mirip dengan Fantastico di hosting
berbayar
6. Gratis unlimited e-mail
7. Fasilitas addon domain dan parked domain
8. Support FTP transfer menggunakan software FTP Client.
9. dan berbagai fitur lainnya.
Cara Mendapatkan Account Hosting di ByetHost.com :
1. Sebelum mendaftar, pastikan anda menggunakan browser Mozilla
Firefox, jangan menggunakan browser Internet Explorer. Lalu buka situs
www.byethost.com akan terbuka halaman seperti berikut ini.
Klik tombol ini
untuk mendaftar
Halaman 20 - Tutorial Bikin Website Gratis dari www.BikinWebGratis.co.cc
2. Klik tombol “Not a member” berwarna hijau seperti pada gambar di atas,
lalu akan terbuka formulir pendaftaran.
3. Isi formulir pendaftaran sesuai dengan data yang sebenarnya, terutama
alamat e-mail anda.
4. Klik tombol “Register” untuk melanjutkan ke step berikutnya. Kalau muncul
halaman berikutnya seperti gambar berikut, maka langsung klik tombol
“Click Me To Continue” untuk melanjutkan ke langkah berikutnya.
5. Setelah itu akan muncul captcha untuk mencegah pendaftaran ilegal,
masukkan 2 kata tersebut ke kotak isian yang tersedia.
Ketik Captcha
di sini !
Halaman 21 - Tutorial Bikin Website Gratis dari www.BikinWebGratis.co.cc
6. Klik tombol “Register” untuk mengirimkan formulir pendaftaran anda. Bila
pendaftaran anda diterima, maka anda akan mendapatkan data
byethost anda seperti berikut ini.
7. Jangan lupa menyimpan atau mencatat data-data tersebut karena
akan digunakan selamanya. Dan harus diingat pula agar data tersebut
terutama password tidak dilihat oleh siapa pun. Jadi, simpan baik-baik
data ini di komputer anda.
Sekarang anda telah memiliki lahan (hosting) di dunia maya. Langkah
selanjutnya adalah menghubungkan domain anda dengan web hosting anda.
Untuk menghubungkan domain “co.cc” dan byethost maka kita gunakan
fasilitas add-on domain di byethost.com.
Klik di sini untuk
download data
hosting panel
byethost anda!
Halaman 22 - Tutorial Bikin Website Gratis dari www.BikinWebGratis.co.cc
ADD-ON DOMAIN
Secara default anda akan mendapatkan alamat sub-domain gratis dari
byethost seperti ini http://username-anda-saat-daftar.byethostXX.com dimana
XX adalah angka acak yang diberikan otomatis oleh byethost.com.
Contoh : pada saat saya mendaftar, saya menggunakan username =
bikinsitusgratis, maka saya diberikan alamat sub-domain menjadi
http://bikinsitusgratis.byethost32.com. Alamat ini terasa kurang professional,
lagipula kita sudah daftarkan domain di “co.cc”. Jadi lebih baik menggunakan
domain semi-profesional dari “co.cc” saja.
Cara Mengkoneksikan Domain (add-on domain) dengan Web Hosting :
1. Login ke Vista cPanel anda, buka www.byethost.com lalu klik menu
“Member Login Here” seperti pada gambar berikut.
2. Masukkan username control panel dan password anda pada kotak isian
yang tersedia, lalu klik tombol “Login” untuk masuk ke Vista cPanel anda.
Username control panel adalah username yang diberikan oleh ByetHost
pada saat mendaftar, formatnya seperti ini bXX_XXXXXXX dimana X
adalah angka acak. Selanjutnya anda akan dibawa masuk ke halaman
Vista cPanel anda seperti pada gambar berikut.
Klik gambar ini untuk
memunculkan kotak
isian “Username”
dan “Password”
Halaman 23 - Tutorial Bikin Website Gratis dari www.BikinWebGratis.co.cc
Di sebelah kiri (yang berwarna biru) adalah data informasi account
webhosting anda, sedangkan sebelah kanan adalah menu-menu untuk
mengelola webhosting anda. Di bagian atas ada iklan banner dan di
tengah-tengah ada penawaran untuk meng-upgrade account anda
menjadi Premium Hosting. Iklan penawaran ini diabaikan saja 
3. Selanjutnya anda klik menu “Addons domain” pada bagian Domains
seperti pada gambar di bawah ini.
4. Akan terbuka halaman baru dengan kotak isian untuk memasukkan
domain anda seperti pada gambar berikut.
5. Ketikkan nama domain “co.cc” anda di kotak isian yang tersedia lalu klik
tombol “Create Domain”. Ketik domain anda tanpa menggunakan http
dan www, contohnya saya ketik “bikinwebgratis.co.cc”. Selanjutnya
Klik di sini
untuk addon
domain
Masukkan domain
“co.cc” anda disini!
Halaman 24 - Tutorial Bikin Website Gratis dari www.BikinWebGratis.co.cc
akan muncul nama domain tersebut seperti pada gambar berikut. Anda
bisa add-on domain sampai 5 (lima) buah dalam 1 (satu) account
webhost.
Nah, setelah melalui langkah-langkah di atas berarti anda telah memiliki
tempat hosting dan domain name sebagai alamat anda di dunia maya.
Sekarang saatnya memasukkan (upload) file web ke server hosting anda agar
situs anda segera online.
Halaman 25 - Tutorial Bikin Website Gratis dari www.BikinWebGratis.co.cc
MENG-UPLOAD FILE KE
SERVER HOSTING
Setelah anda memiliki hosting dan domain, langkah selanjutnya adalah
memindahkan file situs yang telah anda rancang di komputer ke web hosting
tersebut. Proses pemindahan atau transfer file dari komputer ke jaringan internet
ini disebut upload.
Untuk meng-upload file, anda bisa menggunakan 2 (dua) cara, yaitu dengan
menggunakan software FTP client dan atau tanpa menggunakan software
(upload langsung menggunakan fasilitas file manager di vista control panel
byethost.com). Kalau mau pakai software FTP, anda bisa gunakan software
gratisan seperti FileZilla atau SmartFTP, silahkan cari panduan cara
menggunakan software tersebut di google.
Di e-book ini saya hanya akan menjelaskan cara mengupload file tanpa
menggunakan software, cukup melalui file manager saja. Cara yang biasa
dilakukan adalah mengupload file satu demi satu secara manual ke server
byethost, tetapi ini tidak perlu anda lakukan karena makan waktu dan cukup
repot.
Dan juga kalau kita upload file satu demi satu terkadang ada file yang
terlupakan sehingga tentu saja website kita tidak akan tampil sebagaimana
yang diharapkan. Misalnya, ada file gambar yang tidak ikut atau lupa diupload,
maka otomatis di web kita tidak akan tampil gambar tersebut. Yang
muncul hanya gambar kotak segi empat yang mengurangi keelokan tampilan
website kita.
Nah, agar itu tidak terjadi maka sebaiknya kumpulan file web tersebut kita
kompres atau di-zip terlebih dahulu sebelum diupload. File-file yang akan
ditempatkan satu folder di web, di-zip menjadi 1 (satu) file saja.
Contoh file web “bikinwebgratis.co.cc” yang akan saya upload sbb:
Halaman 26 - Tutorial Bikin Website Gratis dari www.BikinWebGratis.co.cc
File yang akan saya upload di folder utama :
- Folder images (berisi beberapa file gambar)
- File download.htm
- File index.htm
- File kontak.htm
- File respon.htm
- File trims.htm
- File style.css
Sedangkan file e-book dengan nama file “tbwg.zip” akan saya tempatkan
pada folder khusus yang saya beri nama “download” di server nantinya.
Nah, file-file dan folder yang akan ditempatkan di folder utama di atas kita pilih
semua lalu di-zip menggunakan program WinZip/WinRAR atau program
kompresi lainnya. Saya sendiri menggunakan WinRAR. Harus diingat bahwa
kompresi yang anda lakukan harus berekstensi dot zip (.zip) bukan dot rar (.rar).
File-file dan folder images tersebut saya zip dan beri nama file “uploadnow.zip”
seperti tampak pada gambar berikut :
Cara Mengupload File ke Server ByetHost :
1. Login ke Vista cPanel Byethost anda.
2. Setelah masuk ke control panel, klik menu “File manager” di bagian FTP
Manager atau Site Management (lihat kotak merah di gambar).
Halaman 27 - Tutorial Bikin Website Gratis dari www.BikinWebGratis.co.cc
3. Selanjutnya anda akan dibawa ke halaman file manager seperti pada
gambar berikut.
4. Klik link directory yang tertulis nama domain yang telah anda masukkan
(add-on domain), contohnya domain yang saya add-on adalah
bikinwebgratis.co.cc. Lalu akan terbuka halaman baru seperti pada
gambar berikut.
5. Klik directory “htdocs” maka akan terbuka halaman baru seperti pada
gambar berikut. Di directory htdocs inilah tempat semua file untuk situs
bikinwebgratis.co.cc akan ditempatkan.
6. Nah sekarang untuk mengupload file web anda, klik tombol “Upload” lalu
akan terbuka halaman upload seperti pada gambar berikut.
Ini directory domain
bikinwebgratis.co.cc
Ini link directory
htdocs
Ini tombol
upload
Halaman 28 - Tutorial Bikin Website Gratis dari www.BikinWebGratis.co.cc
Perhatikan ada 2 (dua) tipe file yang bisa diupload, yakni file tunggal
biasa seperti file html, pdf, doc, jpeg/gif di sebelah kiri dan file arsip
seperti file zip, tar, tgz, gz di sebelah kanan. Jika anda ingin mengupload
satu demi satu file, maka anda gunakan yang sebelah kiri. Sedangkan
bila anda sudah zip-kan file anda (seperti yang saya lakukan) maka kita
gunakan yang sebelah kanan. File yang kita zip secara otomatis akan di
unzip (dimekarkan/diekstrak) ke directory htdocs.
7. Klik tombol “Browse..” untuk mencari file yang sudah kita zip (file
uploadnow.zip) di folder komputer kita. Kalau sudah ketemu file-nya, lalu
tekan tombol open untuk memilih file tersebut. Perhatikan gambar
berikut.
Tekan tombol Browse..
lalu cari file zip yang
akan diupload, pilih file
lalu tekan tombol Open
Halaman 29 - Tutorial Bikin Website Gratis dari www.BikinWebGratis.co.cc
8. Setelah itu anda tekan tanda check warna hijau untuk mulai melakukan
pengiriman file ke server byethost.
9. File zip yang diupload otomatis akan diekstaksi (dimekarkan kembali) ke
dalam folder htdocs. Setelah proses upload selesai maka akan muncul
laporan pengiriman file seperti pada gambar berikut.
10. Selanjutnya klik gambar panah kiri warna biru untuk kembali ke folder
“htdocs” melihat file yang sudah terupload.
11. Perhatikan semua file dan folder images otomatis muncul di directory
htdocs setelah kita mengupload file “uploadnow.zip”. Tinggal 1 (satu) file
yang belum kita upload, tetapi file ini rencananya akan kita tempatkan
pada folder berbeda tetapi masih di directory htdocs juga.
Untuk itu kita perlu membuat directory atau folder baru, klik tombol “New
dir” untuk membuat directory baru. Lalu terbuka halaman untuk
membuat directory baru seperti pada gambar berikut.
Klik tanda
check ini untuk
mulai upload
Tombol “New dir”
Halaman 30 - Tutorial Bikin Website Gratis dari www.BikinWebGratis.co.cc
12. Ketik nama directory baru yang diinginkan, misalnya saya membuat
directory baru dengan nama “ebook”. Klik tanda check untuk
memproses pembuatan directory folder ebook tersebut. Bila berhasil,
maka akan muncul pemberitahuan seperti pada gambar berikut.
13. Selanjutnya anda kembali ke folder htdocs dengan menekan tanda
gambar panah kiri. Anda akan dibawa kembali ke foder htdocs seperti
pada gambar berikut.
Perhatikan bahwa dorectory atau folder e-book sudah ada dalam
directory htdocs. Klik lah link folder ebook tersebut untuk melakukan
upload file e-book “tbwg.zip”.
14. Selanjutnya akan terbuka folder ebook yang masih kosong. Untuk upload,
silahkan klik tombol “Upload” lalu carilah file “tbwg.zip” yang akan
dimasukkan ke folder tersebut.
Klik untuk
upload e-book
Halaman 31 - Tutorial Bikin Website Gratis dari www.BikinWebGratis.co.cc
15. Kali ini kita bermaksud memasukkan file tersebut utuh atau tanpa
diekstrak (tetap dalam file.zip) sehingga kita pilih tempat upload yang
sebelah kiri. Cari file dengan menekan tombol “Browse..” lalu tekan tanda
check untuk mulai proses upload.
16. Selanjutnya file yang kita upload akan muncul di folder ebook seperti
pada gambar berikut.
Nah, selesai sudah proses upload file dari komputer lokal kita ke jaringan
internet (server byethost). Untuk melihat hasilnya, bukalah jendela browser dan
ketikkan alamat web yang telah kita buat dan tekan tombol “Enter”, jika tidak
ada yang salah prosedur maka web anda semestinya sudah online, seperti situs
saya www.bikinwebgratis.cc.cc. Ya, pada saat itu juga langsung online dan
bisa diakses di seluruh dunia, seperti terlihat pada gambar berikut.
Halaman 32 - Tutorial Bikin Website Gratis dari www.BikinWebGratis.co.cc
Selamat… akhirnya situs kita sudah online! Ceklah navigasi situs anda dengan
mengklik link-link yang ada, apakah sudah merujuk ke halaman seperti yang
diharapkan.
Jika ada kekurangan atau kesalahan, anda bisa mengedit atau memperbaiki
web anda. Caranya cukup perbaiki file web yang sudah kita bikin di komputer,
lalu upload ulang dengan cara di atas. Secara otomatis file lama akan tertindis
dan hilang oleh file baru dengan nama file yang sama yang kita masukkan.
Halaman 33 - Tutorial Bikin Website Gratis dari www.BikinWebGratis.co.cc
PENUTUP
Akhirnya, sampailah juga kita pada penutup tentang Tutorial Bikin Website
Gratis ini. Tentu saja anda tidak akan langsung menguasai panduan ini dengan
sekali baca, terutama kepada anda yang benar-benar masih pemula dalam
pembuatan website. Untuk itulah, saya berharap anda bisa membaca
berulang-ulang sampai anda betul-betul menguasai tutorial ini. Dan akan lebih
baik lagi bila anda membaca tutorial ini sambil praktek langsung secara online.
Harapan saya semoga tutorial ini bermanfaat bagi anda para pembaca
sekalian, terutama buat diri saya pribadi sebagai bahan untuk berbagi
pengetahuan dan pengalaman kepada para pembaca.
Setelah tutorial ini, saya berencana akan membuat tutorial gratis baru dengan
judul “Panduan Bikin Blog Gratis”.
Melalui e-book ini, saya akan memandu anda cara membuat blog atau
website berbasis CMS menggunakan WordPress. Dalam tutorial ini tetap saya
gunakan domain “co.cc” dan byethost.com sebagai server webhosting kita.
Bila anda sudah menguasai materi dalam panduan bikin web gratis ini, maka
saya yakin anda bisa lebih mudah membuat website/blog menggunakan
tutorial terbaru saya tersebut.
Saya jamin anda bisa membuat website/blog hanya dalam 15 menit. Tidak
perlu merancang desain web, atau membuat halaman web menggunakan
Halaman 34 - Tutorial Bikin Website Gratis dari www.BikinWebGratis.co.cc
software seperti Frontpage, tetapi semuanya dilakukan secara online. Contoh
blog yang saya buat menggunakan WordPress adalah blog pribadi saya di
www.asnawi.com/blog. Dengan tutorial ini, anda bisa membuat blog seperti
itu, hanya domainnya saja yang masih menggunakan domain gratisan.
Satu hal mengapa anda perlu mempelajari WordPress karena blog WordPress
sangat mudah terindex (disukai) oleh mesin pencari seperti Google dan mesin
pencari lainnya.
Jika anda berminat untuk memiliki e-book tutorial gratis ini, jangan lupa seringsering
berkunjung ke blog saya untuk mengeceknya. Saya berusaha untuk
menyelesaikan pembuatannya dan segera meluncurkannya melalui blog saya.
Mohon dukungan dan doanya ya … .
Terakhir… ada pepatah mengatakan “Tak Ada Gading yang Tak Retak”
demikian pula halnya dengan segala tulisan saya. Di sana-sini masih terdapat
banyak kekurangan dan bahkan kesalahan yang tidak disengaja, olehnya itu
saya senantiasa terbuka menerima pertanyaan, saran dan kritik yang bersifat
membangun dari para pembaca sekalian untuk perbaikan di masa yang akan
datang.
Mudah-mudahan dengan saran dan kritik anda bisa membuat tulisan-tulisan
saya berikutnya akan selalu lebih baik dari tulisan-tulisan sebelumnya.