PANDUAN BIKIN WEB GRATIS
Kata Pengantar
Tahukah anda syarat MUTLAK yang
harus dimiliki untuk memenangkan
persaingan di dunia maya?
Jawabannya adalah anda harus mengetahui cara
membuat website (situs) dan
memiliki website itu sendiri.
Semakin hari dunia internet
semakin akrab dengan kehidupan masyarakat.
Bahkan saat ini banyak
perangkat sudah dikonvergensikan agar bisa terhubung
dengan jaringan internet. Di
masa yang akan datang internet akan menjadi
kebutuhan mendasar bagi setiap
orang, sama seperti kebutuhan orang akan
sarana telekomunikasi saat ini.
Bahkan diprediksikan bahwa
bisnis masa depan sangat bergantung kepada
jaringan internet, saat inipun
sudah kelihatan. Berbagai kemudahan bisa
didapatkan dari internet. Akses
yang tidak terbatas 24 jam sehari, jangkauan
yang luas ke seluruh dunia, dan
kecepatan menjadi kekuatan yang hanya bisa
diberikan oleh internet.
Kelebihan internet ini juga
dimanfaatkan oleh banyak pengguna internet untuk
menghasilkan uang dari
internet. Ini bukan rahasia umum lagi. Beberapa orang
muncul sebagai Milyarder karena
internet. Sebutlah Jeff Bezos si pemilik toko
buku online Amazon.com sebagai
salah satu multi jutawan yang berhasil
memanfaatkan kekuatan internet.
Di Indonesia juga sudah muncul banyak
nama, sebutlah misalnya Anne Ahira,
Cosa Aranda, Joko Susilo, G.M. Susanto,
Welly Mulia, Peter Kohar, Asnawi (narsis deh… hehehe… maaf
yang ini belum
termasuk ).
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
Trims Respon
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.
Salam sukses selalu,
