modul wordpress dan xampp

31
2013 Ary Winahyu Prayudha REKAYASA PERANGKAT LUNAK Tutorial Wordpress dan XAMPP

Upload: ary-winahyu-prayudha

Post on 08-Aug-2015

234 views

Category:

Documents


7 download

TRANSCRIPT

Page 1: Modul Wordpress Dan XAMPP

Halaman | 1

2013

Ary Winahyu Prayudha

REKAYASA PERANGKAT LUNAK

Tutorial Wordpress dan XAMPP

Page 2: Modul 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)

Page 3: Modul Wordpress Dan XAMPP

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.

Page 4: Modul Wordpress Dan XAMPP

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.

Page 5: Modul Wordpress Dan XAMPP

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.

Page 6: Modul Wordpress Dan XAMPP

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.

Page 7: Modul Wordpress Dan XAMPP

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.

Page 8: Modul Wordpress Dan XAMPP

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.

Page 9: Modul Wordpress Dan XAMPP

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

Page 10: Modul Wordpress Dan XAMPP

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.

Page 11: Modul Wordpress Dan XAMPP

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.

Page 12: Modul Wordpress Dan XAMPP

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

Page 13: Modul Wordpress Dan XAMPP

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.

Page 14: Modul Wordpress Dan XAMPP

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.

Page 15: Modul Wordpress Dan XAMPP

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

Page 16: Modul Wordpress Dan XAMPP

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.

Page 17: Modul Wordpress Dan XAMPP

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>

Page 18: Modul Wordpress Dan XAMPP

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).

Page 19: Modul Wordpress Dan XAMPP

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.

Page 20: Modul Wordpress Dan XAMPP

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

Page 21: Modul Wordpress Dan XAMPP

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

Page 22: Modul Wordpress Dan XAMPP

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.

Page 23: Modul Wordpress Dan XAMPP

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.

Page 24: Modul Wordpress Dan XAMPP

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

Page 25: Modul Wordpress Dan XAMPP

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.

Page 26: Modul Wordpress Dan XAMPP

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.

Page 27: Modul Wordpress Dan XAMPP

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.

Page 28: Modul Wordpress Dan XAMPP

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>

Page 29: Modul Wordpress Dan XAMPP

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";

Page 30: Modul Wordpress Dan XAMPP

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>

Page 31: Modul Wordpress Dan XAMPP

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>