Modul Wordpress Dan XAMPP
-
Upload
ary-winahyu-prayudha -
Category
Documents
-
view
242 -
download
7
Transcript of Modul Wordpress Dan XAMPP
Halaman | 1
2013
Ary Winahyu Prayudha
REKAYASA PERANGKAT LUNAK
Tutorial Wordpress dan XAMPP
Halaman | 2
BAB 1
Sekilas Tentang Wordpress dan XAMPP
A. Apakah Wordpress dan XAMPP?
Wordpress adalah penyedia layanan pembuatan blog dan/atau
website. Disini wordpress kita gunakan sebagai database dalam
pembuatan web dinamis. Data base tersebut memudahkan kita dalam
membuat website tanpa harus terhubung dengan internet. Lantas bgaimana
kita bisa membuat website tanpa terhubung dengan internet?
Untuk bisa membuat website tanpa terhubung dengan internet, kita
membutuhkan software yang menyediakan layanan local hosting. Local hosting sendiri
adalah pemanfaatan computer pribadi sebagai server dari jaringan yang kita buat. Jadi yang
kita akses ketika kita menggunakan software local hosting adalah file-file yang ada dalm
computer kita yang kita akses dengan kombinasi lamat-alamta tertentu sesuai dengan
software local hosting yang kita gunakan.
Di sini kita menggunakan XAMPP sebagai pendukung local hosting di
computer kita. Software tersebut dapat di download dengan mudah di
website-website yang memang menyediakan file XAMPP untuk
didownload. Fungsinya adalah sebagai server yang berdiri sendiri
(localhost), yang terdiri atas program Apache HTTP Server, MySQL
database, dan penerjemah bahasa yang ditulis dengan bahasa pemrograman PHP dan Perl.
Nama XAMPP merupakan singkatan dari X (empat sistem operasi apapun), Apache,
MySQL, PHP dan Perl. Program ini tersedia dalam GNU (General Public License) dan bebas,
merupakan web server yang mudah digunakan yang dapat melayani tampilan halaman web
yang dinamis.
B. Menggunakan Wordpress dan XAMPP
Untuk mulai menggunakan XAMPP dan Wordpress yang pertama harus kita lakukan
adalah mengintegrasikan computer kita dengan kedua software tersebut. Kita install XAMPP
di computer kita. Prosedur penginstalan dilakukan seperti biasa kita melkukan instalasi
software. Berikut cara menginstal XAMPP :
1. Jalankan file xampp-win32-1.7.3.exe (atau versi lainnya)
Halaman | 3
2. Kemudian akan tampil pilihan untuk memilih driver dimana kita akan menempatkan
file XAMPP. Kita pilih drive C. Kemudian pilih Install. Tunggu sampai selesai
proses.
3. Setelah itu akan muncul windows comman editor. Ketik “y” dan ikuti instruksi
selanjutnya.
Halaman | 4
4. Jika muncul seperti gambar di atas, ketik R dan ketik X pada pilihan berikutnya. Dan
proses instalasi selesai.
5. Untuk memulai menggunakan XAMPP, masuk ke windows – all program – XAMPP
for Windows – XAMPP Control Panel.
6. Akan muncul tampilan seperti berikut. Pilih “Start” pada bagian Apache dan MySql.
Halaman | 5
BAB 2
Mulai Bekerja dengan Wordpress dan XAMPP
A. Membuat Database pada LocalHost
Setelah semua prosedur penginstallan selesai dilaksanakan, selanjutnya adalah mulai
bekerja dengan XAMPP dan Wordpress. Saat kita memutuskan untuk mulai membangun
sebuah web berbasis wordpress, berarti kita sudah siap dengan konsep web yang akan kita
bangun. Konsep yang kita siapkan meliputi tema dari web kita, apakah web pribadi, web
sekolah atau web bisnis.
Kemudian, kita tentukan desain kasar dari web yang akan kita bangun, seperti menetukan
letak menu utama, menentukan jumlah sheet (kolom), menentukan konten apa saja yang akan
ditampilkan dan yang tidak kalah penting adalah menentukan warna. Warna yang kita pilih
disesuaikan dengan tema web yang kita usung. Untuk web pribadi, bisa menggunakan warna-
warna cerah dan tajam sebagai bentuk penonjolan identitas pribadi kita. Sedangkan untuk
web sekolah, kita pilih warna-warna lembut dengan kontras sedang.
Berikut prosedur pembuatan database pada LocalHost :
1. Buka browser dan ketikkan “http://localhost/phpmyadmin” pada kolom pengisian
alamat (address bar). Pastikan bahwa anda sudah mengaktifkan Apache dan MySql
service pada control panel XAMPP.
Maka akan muncul halaman seperti berikut :
2. Kita buat database baru. Masukan nama database pada kolom yang tersedia.
Akan muncul halaman konfirmasi bahwa pembuatan database berhasil dilakukan.
Halaman | 6
3. Selanjutnya adalah mengolah database wordpress. Database wordpress bisa kita
dapatkan dengan mendownload dari situs resmi wordpress (wordpress.org) atau bisa
kita cari di search engine dengan kata kunci “database wordpress”. Isi dari database
wordpress adalah file-file dengan ekstensi .php seperti berikut :
4. Folder database wordpress kita letakkan pada folder XAMPP – htdocs. Selanjutnya
kita rubah nama folder database tersebut sesuai dengan nama database yang telah kita
buat di localhost/phpmyadmin. Kemudian kita buka file wp-config.php dengan
notepad.
Halaman | 7
Kita rubah DB_NAME sesuai dengan nama folder database. Jadi kita berikan nama
yang sama kepada tiga komponen, yaitu : database pada mySql, folder database pada
htdocs dan DB_NAME pada file wp-config.php.
B. Menginstall Wordpress pada LocalHost
Perlu dipahami disini, menginstall wordpress pada localhost adalah memasang script
wordpress pada computer local agar kita dapat melakukan personalisasi pada web yang akan
kita bangun. Jadi ada kesinambungan anatara menginstall XAMPP, membuat databasae dan
menginstall Wordpress. Semua prosedur harus dilakukan secara urut. Kita tidak akan bisa
membuat database jika kita belum menginstall XAMPP. Kita juga tidak akan bisa melakukan
personalisasi web jika kita belum membuat database.
Berikut langkah penginstallan wordpress pada localhost :
1. Langkah pertama setelah kita menyelesaikan prosedur sebelumnya adalah mengakses
database yang sudah kita buat dengan mengetikan localhost/namadatabase pada
kolom alamat (address bar) dan akan muncul jendela penginstallan wordpress.
2. Isikan semua data yang diminta. Site tittle kita isi dengan nama yang akan menjadi
judul dari website kita. Username kita isikan dengan “admin”, password kita isi sesuai
keinginan. Setelah semua field diisi, pilih “Install Wordpress”.
3. Pada bagian username kita biarkan isinya dengan default username. Default username
disini adalah admin. Mengapa admin? Karena dalam pembuatan sebuah website,
admin ada pada posisi tertinggi yang memungkinkan kita untuk bise mengedit (read-
write) seluruh bagian dari website kita. Sedangkan level di bawahnya adalah “editor”
yang memiliki hak hanya mengedit isi (desain, konten, widget). Berikutnya adalah
“author” memiliki hak hanya menerbitkan isi (posting, berita, artikel). Dan yang
terakhir adalah “subscriber” yaitu pelanggan atau pembaca website kita.
Halaman | 8
4. Setelah kita tekan Install Wordpress, akan tampil halaman seperti berikut :
5. Isi field Username dengan “admin” dan field password dengan password yang kita
buat saat pertama menginstall wordpress. Setelah itu pilih Log In.
C. Personalisasi Web
Dari Log In yang kita lakukan, kita akan dibawa menuju halaman dashboard admin.
Halaman tersebut menyediakan menu – menu penunjang dalam pengembangan website yang
kita buat. Dari menu tersebut kita bisa melakukan personalisasi tampilan, menambah menu,
membuat posting hingga visualisasi widget.
Halaman | 9
C.I Menyesuaikan Nama Web dan Membuat Menu Utama
1. Langkah pertama yang kita lakukan untuk personalisasi website kita adalah me-
rename judul dan membuat slogan web yang kita buat serta merubah time zone..
Caranya adalah melalu menu Settings – general.
2. Setelah selesai, simpan perubahan dengan memilih , untuk melihat
hasilnya, pilih Visit Site pada kolom Judul Website.
3. Hasilnya akan terlihat seperti berikut
4. Berikutnya, personalisasi yang kita lakukan adalah membuat menu utama. Saat awal
pembuatan sudah disediakan dua (2) contoh menu utama, yaitu Home dan Sample
Page. Untuk membuat menu, masuk ke menu Page – Add New.
Nama Site
Slogan
Menu Utama
Nama Site
Slogan
Halaman | 10
5. Pada field judul kita isikan dengan nama menu yang akan kita buat. Kita coba
membuat menu Profil, Galery, Download, Contact Us. Maka pada field judul page
kita is dengan Profil, Galery, Download, Contact Us.
6. Pengisisan dilakukan satu per satu. Perlu diingat, setelah mengisi field judul yang
harus kita lakukan adalah memilih menu Publish. Dan untuk memulai membuat lagi,
kita pilih Add New.
7. Setelah dirasa cukup, kita kembali ke halaman dashboard. Dan selanjutnya adalah
membuat primary menu. Primary menu kita umpamakan sebagai tempat penyimpanan
dari menu-menu yang kita buat yang akan ditampilkan sebagai menu utama. Umunya,
primary menu diberi nama Top Menu. Cara membuatnya, kita masuk ke menu
Apperanace – Menus kemudian pilih Save Menu.
Halaman | 11
8. Untuk mengaktifkan Primary Menu, pilih Theme Location dan scroll ke bagian Top
Menu kemudian Save.
9. Sekarang kita mulai menata menu – menu yang akan ditampilkan sebagai menu
utama. Masih di halaman yang sama, parahkan mouse pada bagian Pages – select all –
add to menu. Maka menu – menu tersebut akan masuk ke dalam primary menu yang
kita beri nama Top Menu tadi.
10. Untuk menata/merubah urutan menu, drag menu – menu yang ada di dalam primary
menu dan geser sesuai posisi yang anda inginkan. Setelah itu pilih Save.
Halaman | 12
11. Untuk melihat hasilnya, pilih Visit Site. Bisa dengan klik kanan – Visit site.
12. Jika kita ingin membuat menu yang akan kita hubungkan dengan sebuah link
(web/blog lain) maka ada sedikit perbedaan dengan pembuatan menu yang
sebelumnya. Jika tadi kita membuat melalui menu Page, maka pada menu yang satu
ini kita buat melalui menu Custom Link.
13. Dan untuk melihat hasilnya, kita lakukan prosedur sebelumnya (Visit Site). Maka
ketika menu tersebut kita pilih, kita akan diwarahkan langsung pada blog/web dengan
alamat yang kita isaikan.
Menu yang kita buat sebelum
disusun ulang
Menu yang kita buat setelah disusun
ulang
Halaman | 13
C.II Merubah Tampilan Dasar Web dengan Tema Pribadi (Self Themed)
Tampilan dasar web adalah tampilan bawaan dengan tema yang disediakan wordpress
ketika kita menginstall wordpress. Untuk merubah menjadi tampilan yang lain, kita bisa
mendownload tema dari situs resmi wordpress ( www.wordpress.org ) atau bisa kita buat
sendiri dengan bantuan software pembuat tema dan yang akan kita gunakan adalah
Artisteer. Untuk langkah menggunakan wordpress akan dijelaskan pada kesempatan lain.
Kali ini kita langsung pada prosedur penginstallan tema. Langkahnya sebagai berikut :
1. Pertama kita tentuakan terlebih dahulu letak file tema yang akan kita install. Bila tema
yang akan kita pakai adalah hasil men-download, maka letak file ada di folder
Download. Namun jika kita akan memakai tema yang kita buat pada artisteer, maka
file tersebuat ada di Document - Artisteer Template. File yang akan kita install harus
dalam bentul .zip.
2. Selanjutnya dari halaman Dashboard kita pilih menu Appearance – Themes – Install
Themes – Upload.
3. Pada kolom pencarian, kita pilih Telusuri dan kita akan masuk pada My Computer.
Dari itu kita cari folder dimana kita tempatkan file tema yang akan kita pakai.
Halaman | 14
4. Setelah itu, pilih Install Now, tunggu hingga proses selesai dan Activte
5. Ada yang perlu diperhatikan seteluh kita aktivasi tema yaitu susuna menu utama akan
kembali menjadi acak. Untuk itu, pada halaman kustomisasi tema kita pilih menu
Menus dan pada bagian Primary Navigation kita pilih Top Menu (seperti awal kita
kustomisasi menu) dan jangan lupa pilih Save.
6. Untuk melihat perubahan yang kita buat, pilih Visit Site.
Halaman | 15
C.III Membuat Artikel (Posting)
Atikel/Posting yang kita buat adalah dokumen yang berisikan sebuah materi yang
akan kita share kepada para pengunjung web. Artikel yang kita buat harus benar – benar
disesuaikan dengan tema web yang kita angkat.
Karena tema yang kita angkat kali ini adalah web sekolah/jurusan, maka artikel yang
kita buat adalah yang berkaitan dengan siswa/jurusan. Berikut adalah prosedur membuat
dan mem-publish artikel/posting :
1. Pada halaman Dashboard kita pilih menu Posts – Add New.
2. Setelah selesai, pilih Publish.
3. Untuk melihat hasilnya, pilih Preview.
Judul Artikel
Isi Artikel
Halaman | 16
C.IV Merubah Copy Right (Hak Cipta)
Hak cipta (lambang internasional: ©, Unicode: U+00A9) adalah hak eksklusif
Pencipta atau Pemegang Hak Cipta untuk mengatur penggunaan hasil penuangan gagasan
atau informasi tertentu. Pada dasarnya, hak cipta merupakan "hak untuk menyalin suatu
ciptaan". Hak cipta dapat juga memungkinkan pemegang hak tersebut untuk membatasi
penggandaan tidak sah atas suatu ciptaan. Pada umumnya pula, hak cipta memiliki masa
berlaku tertentu yang terbatas.
Dalam hal ini hak cipta menegaskan kepemilikan dari web yang dibuat. Hal ini
damaksudkan agar para pengunjung web mengerti siapa yang bertanggung jawab atas
segala hal yang dimuat di web tersebut agar nantinya bila pengunjung merasa ada sesuatu
yang perlu dilaporkan, pengunjung mengetahui kepada siapa harus melapor.
Copy Right atau Hak Cipta biasa dibubuhkan pada web (situs) resmi atau web non
pribadi. Misal untuk web SMKN 1 Muara Enim, dibagian footer tercantum Copyright ©
SMKN 1 Muara Enim. Dari itu kita mengerti bahwa web yang kita kunjungi adalah milik
dari instansi SMKN 1 Muara Enim dan bila ada sesuatu yang kita pandang sebagai sebuah
kekeliruan, kita bisa melaporkan hal tersebut kepada pihak pemilik hak cipta tersebut.
Berikut prosedur merubah hak cipta pada web yang kita kembangkan :
1. Pada halaman Dashboard pilih menu Appearance – Editor. Dari itu kita masuk pada
sebuah halaman yang menampilkan script-script web yang sedang kita buat.
2. Lihat di bagian kanan editor, disitu tersedia pilihan menu ber-extensi .php. kita pilih
Footer.
Halaman | 17
3. Akan muncul script seperti berikut
4. Selanjutnya kita cari kalimat “Powered by xxxxx”. <p class="art-page-footer">Powered by <a href="http://wordpress.org/"
target="_blank">WordPress</a> and <a href="http://www.artisteer.com/?p=wordpress_themes"
target="_blank">WordPress Theme</a> created with Artisteer by <a
href="www.facebook.com/ary.winy/" target="_blank">Ary Winahyu Prayudha</a>.</p>
5. Ubahlah kata yang dicetak tebal dengan nama anda. Dan untuk bagian <a
href="http://wordpress.org/" target="_blank">, ubah yang dicetak tebal dengan alamat web
identitas anda, misal alamat facebook anda.
6. Sedangkan untuk bagian and <a href="http://www.artisteer.com/?p=wordpress_themes"
target="_blank">WordPress Theme</a> created with Artisteer by <a
href="www.facebook.com/ary.winy/" target="_blank">Ary Winahyu Prayudha</a>.</p> bisa anda
hapus. Atau mengganti kalimat yang dicetak tebal hitam dengan kalimat “Created
by”. Untuk yang berwarna merah anda isikan alamat facebook anda. Sedangkan yang
berwaran biru ganti dengan nama anda. Jangan lupa untuk memilih
7. Ada sedikit perbedaan prosedur ketika kita menggunakn tema yang kita buat dengan
artisteer. Untuk mengganti copyright, kita masuk menu Apperance – Theme Options –
Footer.
8. Anda akan menjumpai script seperti ini : <p><a href="#">Link1</a> | <a
href="#">Link2</a> | <a href="#">Link3</a></p><p>Copyright © Ary Winahyu Prayudha [2012]. All
Rights Reserved.</p>
Halaman | 18
9. Anda bisa hapus bagian <p><a href="#">Link1</a> | <a href="#">Link2</a> | <a
href="#">Link3</a></p>. Karena yang akan kita ubah hanya bagian copyright. Jadi pada
bagian <p>Copyright © Ary Winahyu Prayudha [2012]. All Rights Reserved.</p> anda ubah yang
dicetak tebal dengan nama anda. Jangan lupa untuk mengisi field tahun [year].
10. Terakhir jangan lupa pilih atau bila anda merasa tidak yakin dan
ingin megembalikanseperti semula, anda cukup pilih
C.IV Personalisasi Side Bar Widget
Side bar widget adalah konten di bagian sisi samping (kanan/kiri) halaman web.
Ketika awal kita mebuat web dengan wordpress, side bar widget yang disertakan adalah
Categories, Archives, Search Field dan Log In admin. Kita bisa menambhkan widget lain
sesuai keinginan. Widget tersebut dapat berupa jam, kalender, animasi, polling web site, dll.
Untuk menambahkan widget yang kita inginkan, kita bisa mendapatkan dari situs –
situs yang memang menyediakan widget. Atau bisa kita cari di search engine dengan kata
kunci “widget wordpress” atau yang berhubungan dengan itu.
Ada berbagai macam widget yang bisa kita tempatkan di website kita. Yang paling
umum digunakan adalah kalender, jam, music player, form login dan register, sampai pada
animasi-animasi yang digunakan hanya sekedar untuk memepercantik tampilan website
kita.
Widget-widget yang kita dapatkan biasanya hanya berupa scrypt-scrypt atau kode
html. Agar widget muncul sesuai yang direncanakan, kita copy dan pastekan pada widget
text. Letaknya adalah pada halaman dashboard-appearance-widget-text. Disini tidak
dibahas secara detail mengenai personalisasi widget. Karena personalisasi widget
tergantung pada kreativitas masing-masing developer web (admin).
Halaman | 19
BAB 3
Memindahkan Web dari Local Host (Intranet) ke Hosting Online (Internet)
A. Perbedaan Local Host dengan Hosting Online
Internet berasal dari kata Interconnection Networking yang mempunyai arti hubungan
komputer dengan berbagai tipe yang membentuk sistem jaringan yang mencakup seluruh
dunia (jaringan komputer global) dengan melalui jalur telekomunikasi seperti telepon, radio
link, satelit dan lainnya. Dalam mengatur integrasi dan komunikasi jaringan komputer ini
digunakan protokol yaitu TCP/IP. TCP (Transmission Control Protocol) bertugas memastikan
bahwa semua hubungan bekerja dengan benar, sedangkan IP (Internet Protocol) yang
mentransmisikan data dari satu komputer ke komputer lain. TPC/IP secara umum berfungsi
memilih rute terbaik transmisi data, memilih rute alternatif jika suatu rute tidak dapat di
gunakan, mengatur dan mengirimkan paket-paket pengiriman data.
Untuk dapat ikut serta menggunakan fasilitas Internet, biasanya Anda harus
berlangganan ke salah satu ISP (Internet Service Provider) yang ada di kota Anda. ISP ini
biasanya disebut penyelenggara jasa internet. Dengan memanfaatkan internet, pemakaian
komputer di seluruh dunia dimungkinkan untuk saling berkomunikasi dan pemakaian
bersama informasi dengan cara saling kirim e-mail, menghubungkan ke komputer lain,
mengirim dan menerima file, membahas topik tertentu pada newsgroup dan lain-lain.
Selain jaringan yang sangat luas yang dapat menghubungkan komputer di seluruh dunia
(biasa disebut internet), terdapat pula bentuk jaringan yang memiliki skala jaringan yang
lebih kecil yang disebut localhost atau Local Area Network (LAN). Pada localhost/LAN, kita
juga dapat melakukan pertukaran informasi atau file data, yaitu dengan menggunakan
minimal 2 komputer. Jadi, perbedaan antara Internet dengan localhost secara garis besar
adalah wilayah cakupan atau luas jaringannya. Internet mampu melakukan hubungan
antarkomputer ke seluruh dunia, sedangkan localhost hanya mampu untuk melakukan
hubungan antar computer yang ada dalam jaringan tersebut (LAN).
B. Komparasi Hosting Gratis (Free Hosting) dengan Hosting Berbayar (Premium
Hosting)
Banyak penyedia hosting yang menawarkan beragam pilihan hosting, baik paket hosting,
fitur hosting, bahkan variasi harga, namun kita tentunya harus mengingat bahkan dari semua
varian yang ditawarkan tentunya mempunyai plus dan minus, kali ini kami akan sedikit
memberikan evaluasi tentang hosting gratis dan hosting berbayar dilihat dari sudut plus
minus.
HOSTING GRATIS
Hosting gratis dibuat biasanya dengan berbagai kepentingan, seperti untuk
memperkenalkan brands, sebagai promo, menaikan trafik website, dan lain-lain
Kelebihan :
1. Kelebihan hosting gratis ini anda tidak perlu mengeluarkan sepeserpun untuk
mendapatkannya.
2. Cara mendapatkannya sangat mudah, anda tinggal search di search engine dan
tinggal anda pilih sesuka hati anda.
Halaman | 20
3. Paket hosting gratis ini biasanya mempunyai space yang besar-besar seperti 10GB
space disc hingga unlimited space disc, begitu juga dengan bandwith rata-rata
unmetered atau bandiwith yang ditawarkan adalah beratus-ratus GB. ini semata
dilakukan untuk menarik minat customer untuk menggunakan layanan hosting gratis
mereka.
Kekurangan :
1. Kekurangan hosting gratis ini low support yang diterima bila hosting anda down dan
bahkan tidak ada support sama sekali.
2. Berisikan iklan-iklan atau banner di website anda.
3. Tidak bergaransi baik soal keamanan website, database dan lain-lain ( bisa
dibayangkan bila themes atau artikel yang anda buat tiba-tiba hilang atau dicuri oleh
pihak penyedia hosting gratis ini, anda tidak bisa menuntut anda tidak bisa
mendapatkannya kembali, mengingat layanan hosting yang anda gunakan adalah
gratisan) dan lain-lain.
HOSTING BERBAYAR
Kelebihan :
1. Kelebihan yang didapat rata-rata penyedia hosting berbayar memiliki support yang
bagus ada yang benar-benar menawarkan support 24Jam.
2. Hosting Berbayar rata-rata memiliki garansi pengembalian uang dalam kurun waktu
tertentu.
3. Memiliki Hosting Berbayar lebih aman dan terjamin soal kualitas yang didapat,
karena kita membayar sesuai kualitas yang ditawarkan oleh pihak penyedia hosting
berbayar ini.
4. Hosting Berbayar ini lebih profesional.
5. Hosting Berbayar ini memberikan control penuh kepada pemesannya untuk
mengelola websitenya.
6. Hosting Berbayar Terjamin Aman untuk Data-Data yang kita kelola atau simpan di
server hosting berbayar.
Kekurangan :
1. Kekurangan Hosting Berbayar kita mengeluarkan sejumlah uang untuk
mendapatkannya, dan rata-rata bervariasi harga tergantung dengan kemampuan kita.
2. Dalam urusan pembayaran rata-rata pihak penyedia hosting hanya menerima sistem
Tranfer Bank, namun ada penyedia hosting yang menerapkan dua sistem pembayaran
yaitu Tranfer Bank dan Bayar di Tempat Penyedia Hosting
C. Memindahkan Web dari Local Host ke Internet
Sebelum kita memulai memindahkan web yang kita buat di local host ke internet, ada
beberapa hal yang perlu diperhatikan. Pertama, pilih server dengan penyedia bandwidth
terbesar. Hal ini dimaksudkan untuk mempercepat proses loading web kita ketika data yang
tersimpan pada database kita sudah cukup banyak. Kedua, usahakan untuk membuat desain
web yang sudah siap tampil, bukan siap pakai. Jadi yang akan kita upload adalah database
web ketika belum diisi konten yang beraneka ragam. Karena semakin banyak konten yang
Halaman | 21
disertakan ketika kita mengupload database akan semakin memperlambat proses upload. Dan
dikhawatirkan file yang kita upload akan tidak utuh lagi (corrupted).
Selanjutnya, sebelum ke tahap memilih server (penyedia domain gratis), kita siapakan
terlebih dahulu database web yang kita buat. File database tersedia di folder XAMPP-htdocs.
Database yang kita gunakan kali ini adalah wordpress. Kita compress folder-folder yang ada
dalam file database –selain folder content- (ubdah menjadi format .zip). Sedangkan file-file
dengan extensi .php kita biarkan dulu.
Sekarang kita mulai memilih web penyedia domain gratis. Disini kita coba menggunakan
http://www.byethost.com/ .
1. Masuk ke halaman http://www.byethost.com/. Kita akan dihadapkan pada halaman
yang menyediakan pilihan antara hosting gratis dan hosting premium. Kita pilih Free
Hosting – Click here to sign up for free hosting
Ubah menjadi format .zip
Halaman | 22
2. Setelah itu akan muncul halaman registrasi. Setelah semua data terisi, pilih “register”.
Pada bagian Script to install kita pilih wordpress karena yang kita gunakan adalah
database dengan script wordpress.
3. Selanjutnya, akan muncul halaman konfirmasi email untuk aktivasi member. Jadi
yang harus anda lakukan adalah buka email anda dan buka pesan dari byethost.com.
Klik link alamat yang disediakan.
Halaman | 23
4. Anda akan diarahkan pada halaman aktivasi account. Tunggu hingga proses selesai.
5. Akan muncul halaman seperti berikut. Ini menandakan bahwa acoount anda telah
aktif. Buka kembali email anda. Akan muncul pesan baru dari byethost. Jadi total kita
menerima dua buah pesan dari byethost.
6. Kill link alamat kontrolpanel yang disediakan.
Halaman | 24
7. Anda akan dibawa menuju halaman login CPanel, Masukan username dan password.
Bila anda lupa, lihat kembali email anda. Disana terdapat keternagan lengkap data
registrasi anda.
8. Pada halaman dashboard, kita pilih Online File Manager untuk memastiakan
penginstallan scrypt wordpress yang tadi kita lakukan berhasil atau tidak. Bila kita
menjumpai folder htdocs berarti penginstallan kita berhasil. Buka folder dan hapus
semua isi folder keculai folder wp-content dan file wp-config.php. Nantinya akan kita
gantikan dengan file-file database dari folder xampp-htdocs.
9. Sekarang kita upload folder-folder dari xampp-htdocs yang tadi sudah kita compress.
Pilih upload-telusuri.
Menunjukan kapasitas
file maksimum yang bisa
di upload setiap proses
peng-upload-an
Halaman | 25
10. Pilih tanda centang jika anda telah selesai memilih file yang akan di upload. Tunggu
hingga proses selesai.
11. Jika semua file sudah berhasil kita upload, sekarang kita coba mengakses halaman
web yang baru kita online-kan. Alamat web kita dapat dilihat pada email yang
dikirimkan oleh byethost.
12. Halaman yang akan muncul adalah halaman install wordpress, sama persis seperti
awal kita menginstall wordpress pada localhost. Yang perlu anda lakukan adalah
melengkapi form yang disediakan.
13. Lakukan prosedur masuk halaman wordpress seperti biasa. Setelah login, masuk ke
halaman dashboard.
14. Kita akan menjumpai halaman standar web wordpress. Untuk menambahkan tema dan
plugin yang sebelumnya sudah terdapat pada web yang kita buat di localhost, kita
hanya perlu mengkompress file/folder plugin dan tema tersebut. File/folder tema dan
plugin terdapat pada folder xampp – htdocs - “nama folder database anda” - wp-
contetnt
15. Yang perlu diperhatikan disini adalah jika ukuran @folder plugins dan themes lebih
dari 10 Mb, kita harus mengkompress file – file yang ada dalam folder tersebut secara
terpisah.
16. Setelah selesai, langkah selanjutnya adalah meng-upload file – file .zip tersebut ke
folder wp-content pada Online File Manager di CPanel account hosting kita. Caranya
sama seperti langkah 9-10.
Halaman | 26
17. Jika semua prosedur dilakukan dengan benar, maka ketika kita masuk halaman
dashboard wordpress-appearance-themes dan dashboard-plugins akan dijumpai file
tema dan plugin yang kita upload.
18. Selanjutnya, agar kita tidak perlu repot manata ulang web, yang perlu dilakukan
adalah meng-import file .xml dan .sql dari wordpress dan phpmyadmin di localhost.
19. Buka web wordpress anda yang ada di localhost, login sebagai admin. Pada halaman
dashboard, pilih menu tools-export. Langkah ini dilakukan untuk membackup data-
data yang sudah kita masukan, seperti posting, artikel dll. Jika wordpress anda belum
memiliki tool export/impoerter, anda harus mendownload terlebih dulu.
20. Berikutnya, buka localhost/phpmyadmin. Pilih nama database dari web anda – export
– go.
Halaman | 27
21. Langkah terakhir adalah meng-impor file-file yang tadi kita export. Untuk file
xxxx.xml, kita impor melalui halaman dashboard wordpress online kita. Sedangkan
file xxxx.sql kita impor melalui halaman phpmyadmin online kita.
22. Letak phpmyadmin online kita adalah pada halaman CPanel – databse – phpmyadmin.
23. Jika prosedur dilakukan dengan benar, akan muncul notifikasi seperti berikut.
24. Untuk memastikan semua langkah peng-upload-an berhasil dilakukan, silakan buka
kembali halaman wordpress online anda. Jika menu – menu yang tampil sesuai
dengan web wordpress anda ketika di localhost, berarti prosedur berhasil dilakukan.
Halaman | 28
LAMPIRAN
A. Beberapa Contoh Scrypt Widget
<img style="visibility:hidden;width:0px;height:0px;" border=0 width=0 height=0
src="http://c.gigcount.com/wildfire/IMP/CXNID=2000002.0NXC/bT*xJmx*PTEzNDg*
MDY4MTA4NTMmcHQ9MTM*ODQwNjkwNDY5OCZwPTI5MzMzMSZkPSZnPTE
mbz*zYjY1ZGZjYmExNWM*ZDFjYjBh/NTE2ZTYyYTNmYzZhZCZvZj*w.gif"
/><center><a target="_blank" href="http://videokeman.com"><img border="0"
src="http://i39.photobucket.com/albums/e159/normanski/players/ewualizer.gif"
alt="videokeman mp3" /></a><br /><a target="_blank"
href="http://videokeman.com/green-day/21-guns-the-cast-of-american-idiot-with-green-
day/">21 Guns – The Cast of American Idiot With Green Day Song Lyrics</a><br
/><embed src="http://videokeman.com/music/videokemanplay.swf" width="300"
height="44" wmode="transparent"
FlashVars="playerID=1&bg=0xffffff&leftbg=0xCA4536&lefticon=0xffffff&rightbg=0x
CA4536&rightbghover=0x999999&righticon=0xffffff&righticonhover=0xffffff&text=0
xCA4536&slider=0x303030&track=0xFFFFFF&border=0x666666&loader=0xC52C24
&autostart=yes&loop=yes&soundFile=http://videokeman.com/dload/nm1/0907/Green_
Day_-_21_Guns_-_The_Cast_Of_American_Idiot_and.vkm" ></embed></center>
<div style="position: fixed; bottom: 0px; left: 10px;width:110px;height:140px;"><a
href="http://permathic.blogspot.com/" target="_blank"><img border="0"
src="http://content.sweetim.com/sim/cpie/emoticons/000203C0.gif" title="Click to get
more." /></a><small><center><a
href="http://permathic.blogspot.com/2012/04/kumpulan-widget-animasi-yang-lucu-
dan.html" target="_blank" title="Cara Memasang Widget Animasi">Widget
Animasi</a></center></small></div>
<div style="position: fixed; bottom: 0px; left: 10px;width:110px;height:160px;"><a
href="http://permathic.blogspot.com/" target="_blank"><img border="0"
src="http://content.sweetim.com/sim/cpie/emoticons/000203BA.gif" title="Click to get
more." /></a><small><center><a
href="http://permathic.blogspot.com/2012/04/kumpulan-widget-animasi-yang-lucu-
dan.html" target="_blank" title="Cara Memasang Widget Animasi">Widget
Animasi</a></center></small></div>
<div style="position: fixed; bottom: 0px; left: 20px;width:120px;height:160px;"><a
href="http://permathic.blogspot.com/" target="_blank"><img border="0"
src="http://content.sweetim.com/sim/cpie/emoticons/000203BC.gif" title="Click to get
more." /></a><small><center><a
href="http://permathic.blogspot.com/2012/04/kumpulan-widget-animasi-yang-lucu-
dan.html" target="_blank" title="Cara Memasang Widget Animasi">Widget-
Animasi</a></center></small></div>
Halaman | 29
<div style="position: fixed; bottom: 0px; left: 10px;width:130px;height:160px;"><a
href="http://permathic.blogspot.com/" target="_blank"><img border="0"
src="http://s.myniceprofile.com/myspacepic/712/th/71266.gif" title="My widget"
alt="animasi bergerak gif" /></a><small><center><a
href="http://permathic.blogspot.com/2012/04/kumpulan-widget-animasi-yang-lucu-
dan.html" target="_blank" title="Cara Memasang Widget Animasi">My
Widget</a></center></small></div>
<div style="position: fixed; top: 5px; right: 30px;width:110px;height:130px;"><a
href="ary prayudha/" target="_blank"><img border="0"
src="http://content.sweetim.com/sim/cpie/emoticons/00020389.gif" title="ary prayudha"
alt="animasi bergerak naruto dan onepiece"/></a><small><center><a
href="http://permathic.blogspot.com/2012/04/kumpulan-widget-animasi-yang-lucu-
dan.html" target="_blank" title="Cara Memasang Widget
Animasi"></a></center></small></div>
<div style="position: fixed; bottom: 0px; left: 10px;width:110px;height:140px;"><a
href="" target="_blank"><img border="0"
src="http://content.sweetim.com/sim/cpie/emoticons/000203C0.gif" title="Zzzzzzzzzzz"
/></a><small><center><a href="http://permathic.blogspot.com/2012/04/kumpulan-
widget-animasi-yang-lucu-dan.html" target="_blank" title="Cara Memasang Widget
Animasi"></a></center></small></div>
<img style="visibility:hidden;width:0px;height:0px;" border=0 width=0 height=0
src="http://c.gigcount.com/wildfire/IMP/CXNID=2000002.0NXC/bT*xJmx*PTEzNDg*
MDY4MTA4NTMmcHQ9MTM*ODQwNjkwNDY5OCZwPTI5MzMzMSZkPSZnPTE
mbz*zYjY1ZGZjYmExNWM*ZDFjYjBh/NTE2ZTYyYTNmYzZhZCZvZj*w.gif"
/><center><a target="_blank" href="http://videokeman.com"><img border="0"
src="http://i39.photobucket.com/albums/e159/normanski/players/ewualizer.gif"
alt="videokeman mp3" /></a><br /><a target="_blank"
href="http://videokeman.com/green-day/21-guns-the-cast-of-american-idiot-with-green-
day/">21 Guns – The Cast of American Idiot With Green Day Song Lyrics</a><br
/><embed src="http://videokeman.com/music/videokemanplay.swf" width="300"
height="44" wmode="transparent"
FlashVars="playerID=1&bg=0xffffff&leftbg=0xCA4536&lefticon=0xffffff&rightbg=0x
CA4536&rightbghover=0x999999&righticon=0xffffff&righticonhover=0xffffff&text=0
xCA4536&slider=0x303030&track=0xFFFFFF&border=0x666666&loader=0xC52C24
&autostart=yes&loop=yes&soundFile=http://videokeman.com/dload/nm1/0907/Green_
Day_-_21_Guns_-_The_Cast_Of_American_Idiot_and.vkm" ></embed></center>
<script language="javascript">
nd_mode="ufo";
nd_sound="on";
nd_vAlign="bottom";
Halaman | 30
nd_hAlign="right";
nd_vMargin="10";
nd_hMargin="10";
nd_target="_blank";
</script>
<script language="javascript"
src="http://tateluproject.googlecode.com/files/efek.js"></script>
<div style="position: fixed; bottom: 0px; right:
20px;width:100px;height:30px;"><small><center><a href="http://goo.gl/SwXbQ"
target="_blank">Efek Blog</a></center></small></div>
<div id="MicrosoftTranslatorWidget" style="width: 280px; min-height: 83px; border-
color: #0A560F; background-color: #1AAB1F;"><noscript><a
href="http://www.microsofttranslator.com/bv.aspx?a=http%3a%2f%2fHERE YOUR
BLOG URL%2f">Translate this page</a><br />Powered by <a
href="http://www.microsofttranslator.com">Microsoft®
Translator</a></noscript></div> <script type="text/javascript"> /* <![CDATA[ */
setTimeout(function() { var s = document.createElement("script"); s.type =
"text/javascript"; s.charset = "UTF-8"; s.src = ((location && location.href &&
location.href.indexOf('https') == 0) ? "https://ssl.microsofttranslator.com" :
"http://www.microsofttranslator.com" ) +
"/ajax/v2/widget.aspx?mode=notify&from=en&layout=ts"; var p =
document.getElementsByTagName('head')[0] || document.documentElement;
p.insertBefore(s, p.firstChild); }, 0); /* ]]> */ </script>
http://gue-galau.mywapblog.com/files/blink-182-whats-my-ag.mp3
<script src="http://gue-galau.googlecode.com/files/gue-galauMP3player.js"
type="text/javascript">
</script>
<script type="text/javascript">
musikDongBang('http://gue-galau.mywapblog.com/files/blink-182-whats-my-ag.mp3');
</script>
<a style="position:fixed;top:270px;left:10px;"
href="http://www.facebook.com/irfan.handi" title="My Facebook" target="_blank"
rel="nofollow"><img src="http://irfanhandi.files.wordpress.com/2012/06/facebook-
64x64.png"></a>
<a style="position:fixed;top:335px;left:10px;" href="http://twitter.com/#!/irfanhandi80"
title="My Twitter" target="_blank" rel="nofollow"><img
src="http://irfanhandi.files.wordpress.com/2012/06/twitter-64x64.png"></a></div>
Halaman | 31
<div style="display:scroll;position:fixed;top:224px;left:0;"><a href="http://terserah
Anda" title="terserah Anda"><img
src="http://irfanhandi.files.wordpress.com/2012/06/tombol-sosial-media.png"></a>
<a style="position:fixed;top:270px;left:10px;"
href="http://www.facebook.com/irfan.handi" title="My Facebook" target="_blank"
rel="nofollow"><img src="http://irfanhandi.files.wordpress.com/2012/06/facebook-
64x64.png"></a>
<a style="position:fixed;top:335px;left:10px;" href="http://twitter.com/#!/irfanhandi80"
title="My Twitter" target="_blank" rel="nofollow"><img
src="http://irfanhandi.files.wordpress.com/2012/06/twitter-64x64.png"></a></div>
<a style="position:fixed;bottom:45px;right:0;"
href="http://www.facebook.com/irfan.handi" title="Berteman Yuk!!!"
target="_blank"><img src="http://irfanhandi.files.wordpress.com/2012/05/fb.png" alt=""
width="" height="" /></a>
<a style="position:fixed;top:0px;left:0;" href="http://twitter.com/#!/irfanhandi80"
title="Follow Me" target="_blank"><img
src="http://irfanhandi.files.wordpress.com/2011/09/twitter-irfanhandi80.png" alt=""
width="" height="" /></a>