TutorialBikinWebGratis Kuyhaa
TutorialBikinWebGratis Kuyhaa
Oleh :
Asnawi, ST.
asnawist@gmail.com
www.asnawi.com
Dipublikasikan :
www.BikinWebGratis.co.cc
Ed. I - Januari Th. 2009
PERINGATAN
Asnawi, ST.
Contact:
HP. 081524164371
e-mail : asnawist@gmail.com
blog : www.asnawi.com
Pemilik Situs :
www.IklanMakassar.com
www.KhususPemula.com
www.PemasarGlobal.com
www.BukuGratis.co.cc
www.DollarsGratis.co.cc
www.BikinWebGratis.co.cc
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.
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:
Home
Download
Kontak
Trims
Respon
Iklan
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
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.
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.
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.
Cek domain
yang anda
inginkan di sini
!
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:
Klik di sini
untuk daftar
Jangan lupa
centang di sini!
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.
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.
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.
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.
Ketik Captcha
di sini !
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.
Masukkan domain
co.cc anda disini!
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
Halaman 23 - 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.
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:
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.
Ini link directory
htdocs
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.
Ini tombol
upload
6. Nah sekarang untuk mengupload file web anda, klik tombol Upload lalu
akan terbuka halaman upload seperti pada gambar berikut.
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.
8. Setelah itu anda tekan tanda check warna hijau untuk mulai melakukan
pengiriman file ke server byethost.
Klik tanda
check ini untuk
mulai upload
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.
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.
Klik untuk
upload e-book
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.
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.
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 33 - Tutorial Bikin Website Gratis dari www.BikinWebGratis.co.cc
Asnawi, ST.
Penulis
Data Kontak :
Blog : www.asnawi.com
E-mail : asnawist@gmail.com
HP : 081524164371 (SMS only)