0 di Windows 7
Setelah sekian lama tidak mencoba software yang satu ini, saya sempat dibuat bingung pada saat
mencoba menginstall. Sebelum-sebelumnya saya memang hanya melakukan instalasi di sistem
operasi Windows XP, nah baru kali ini saya mencoba menginstall Appserv di sistem operasi terbaru
dari Windows yakni Windows 7.
Berikut langkah-langkah instalasinya :
1. Download Appserv melalui website http://www.appservnetwork.com(dijamin 100% free)
2. Setelah selesai, lakukan instalasi software seperti biasa
3. Jika pada saat instalasi diminta Server name dan email silahkan isi dengan localhost dan
alamat email Anda
4. Jika diminta password, isikan saja root di kedua kolom
5. Setelah proses instalasi tuntas, permasalahan biasanya akan terjadi disini, untuk mengatasinya
silahkan baca langkah selanjutnya
6. Buka UACS (User Account Control Setting) di Control Panel System and Security Change
User Account Control Setting
7. Ubah UACS ke posisi default
8. Namun tidak berhenti disini saja, Anda juga perlu merubah file hosts yang terdapat di
C\Windows\System32\Drivers\etc\
9. Buka aplikasi notepad terlebih dahulu, eittssjangan langsung dibuka, tetapi klik kanan dulu
icon notepad, lalu pilih Run as administrator
10. Setelah notepad terbuka, baru pilih open dan browse file hosts di lokasi tadi
11. Kemudian Anda tinggal menghapus tanda hashtag/pagar (#) yang ada di baris # 127.0.0.1
localhost
12. Simpan file, dan tutup notepad
13. Selamat menggunakan Appserv
Baik, kali ini kita akan membahas tentang software apa saja yang nantinya akan kita gunakan. Selain
itu, penulis juga memberikan langkah-langkah installasi server package software AppServ, untuk
menciptakan server lokal beserta paket PHP, MySQL, dan phpMyAdmin di Komputer kita.
Apa
itu
Server
Package
Software?
Server Package Software adalah aplikasi yang digunakan untuk menjalankan paket aplikasi Apache
Server (localhost), PHP 5, Database MySQL, dan phpMyAdmin untuk manajemen Database MySQL.
Jadi dengan adanya aplikasi ini kita tidak perlu lagi menginstall aplikasi-aplikasi diatas satu persatu.
Tinggal
Sekarang
klik
saya
Software AppServ.
sana
akan
menetapkan
Untuk
sini,
bahwa
mendownload
kita
akan
AppServ,
beres
deh
menggunakan
Server
Package
Link
berikut:
silahkan
kunjungi
:D
http://prdownloads.sourceforge.net/appserv/appserv-win32-2.5.10.exe?download
Untuk Versi, silahkan download AppServ versi 2.5.10 dengan spesifikasi sebagai berikut:
1.
Apache
2.
PHP
3.
2.2.8
5.2.6
MySQL
2.
3.
5.0.5.1b
4.
phpMyAdmin-2.10.3
Sedangkan untuk sistem operasi, Penulis tetapkan kita akan menggunakan Windows XP atau
Windows 7 sebagai latihan. Namun, Jika para pembaca ada yang menggunakan Linux, maka penulis
harap tahapan installasi paket-paket pada artikel "Pengertian PHP" Sebelumnya sudah dituntaskan
semua.
Apa
itu
Code
Editor
PHP?
Code Editor PHP adalah aplikasi yang digunakan untuk mengetik kode-kode PHP. Bahasa gaulnya itu
tempat
untuk
Contoh
aplikasi
coding
:D
code
editor:
Notepad, Notepad++, Netbeans, Dreamweaver, dan masih banyak lagi. Kalian bebas memilih :)
Installasi
Catatan: cermati
1.
Download
AppServ
setiap
terlebih
langkah
dahulu
yang
2.5.10
diberikan
AppServ
supaya
2.5.10
nya
paham.
disini:
http://prdownloads.sourceforge.net/appserv/appserv-win32-2.5.10.exe?download
2. Setelah itu anda jalankan dengan melakukan KLIK 2 KALI pada icon installer-nya.
3. Jika sudah, kemudian akan muncul jendela AppServ 2.5.10 Setup, Klik Next untuk melanjutkan
4. Setelah itu akan muncul jendela License Agreement, Klik I Agree untuk melanjutkan
5. Kemudian akan muncul lagi jendela pemberitahuan Choose Install Location, biarkan defaultnya
berada di C:\AppServ setelah itu Klik Next
6. Selanjutnya, kita tentukan components apa saja yang ingin di install. Check List Semuanya,
kemudian klik Next untuk melanjutkan
7. Sekarang kita akan mengisi kotak inputan Server Name, Administrators Email Address,
Dan Apache
HTTP
Port.
Server
Administrators
Isilah
dengan
spesifikasi
berikut:
Name
= localhost
Address
= webmaster@localhost
8. Setelah itu, akan muncul jendela MySQL Server Configuration. Pada kotak inputan Enter Root
Password & Re-Enter Root Password kita isi dengan password sesuka kita (bebas). Saya
asumsikan Passwordnya kodok . Lanjut klik Install. *Dilarang protes :))
9. Biarkan proses installasi berjalan apa adanya, seperti cinta... dan tunggu hingga selesai
10. Oke, sekarang klik finish, hingga muncul Prompt hitam. Sampai disini, kita telah sukses
menginstallasi AppServ dikomputer Windows :D
Menjalankan AppServ
Untuk mencoba web server lokal yang baru saja kita install, Ikuti langkah berikut.
1.Buka Browser anda. (misalnya: Mozilla Firefox)
2.Ketikan http://localhost atau http://127.0.0.1 di address bar
Jika muncul tampilan seperti diatas, berarti web server kita sukses berjalan dengan lancar :D
anda
yang
contohnya
seperti
http://maskodok.com/berita/1/judika_aku_yang_tersakiti
bedakan jika tidak menggunakan mod_rewrite, maka hasilnya akan seperti ini:
http://maskodok.com/?page=berita&id=1&titleslug=judika_aku_yang_tersakiti
ini:
Tentu tidak google friendly banget kan. oleh sebab itu kita harus mengaktifkannya terlebih dahulu.
ikuti langkah-langkah dibawah ini pemirsah.
1. Klik Start Menu -> All Programs -> AppServ -> Configuration Server -> Apache the edit
httpd.conf
4. Kemudian kita hilangkan tanda pagar # yang ada pada baris: LoadModule rewrite_module
modules/mod_rewrite.so
Sebelum:
#LoadModule rewrite_module modules/mod_rewrite.so
Sesudah:
LoadModule rewrite_module modules/mod_rewrite.so
7. Jika sudah, maka ya sudah =)) tandanya modul mod_rewrite sudah siap digunakan
1. Klik Start Menu -> AppServ -> Configuration Server -> PHP the edit php.ini
Catatan:
- Cari sampai ketemu bagian Resource Limits
- Kemudian setting seperti gambar dibawah ini. (HARUS SAMA) *jika mau mengikuti alur cinta mas
kodok* =))
4. Setelah diganti, sekarang RESTART Apache anda seperti langkah sebelumnya. (ini dilakukan
untuk mencegah terjadinya hal-hal yang tidak di inginkan)
- See more at: http://stringlabs.blogspot.com/2013/03/installasi-appserv-2510konfigurasi.html#sthash.IeC2HYBx.dpuf
Haiah :D ketemu lagi bareng mas kodok dalam acara bagi-bagi ilmu. Kali ini saya akan berbagi
tentang bagaimana caranya membuat sebuah toko online untuk media pemasaran dengan
Wordpress
Offline.
Nah, Sebelumnya, anda harus mempersiapkan beberapa peralatan tempur terlebih dahulu:
1.
AppServ
untuk
web
server
lokal
Jika ada yang belum punya dan belum pernah menginstalasi AppServ, nih mas kodok ada tutorialnya
:D
-
Ini
Link
Download
AppServ:
http://prdownloads.sourceforge.net/appserv/appserv-win32-2.5.10.exe?download
-
Ini
Link
Tutorial
Instalasi
AppServ
di
Localhost:
http://www.stringlabs.blogspot.com/2013/03/installasi-appserv-2510-konfigurasi.html
2.
Wordpress
versi
terbaru
(ini wordpress offline, jadi kita nginstal sendiri di komputer, bukan wordpress yang dapat kita registrasi
secara online) Jadi, anda harus mendownload source codenya terlebih dahulu sebelum membuat
katalog
-
toko
Ini
Link
Download
online:
Wordpress
versi
terbaru:
http://wordpress.org/latest.zip
3. Udah itu aja, gak ada lagi yang lain :D Kalau buat coding, kita bisa pakai macromedia
dreamweaver
-
Link
atau
Download
Macromedia
Dreamweaver
notepad++
buat
yang
belum
punya:
http://www.4shared.com/rar/UnvTtcTz/dreamweaver.html
Installasi
Wordpress
di
Localhost
2. Nah wordpress yang sudah kita download tadi sekarang kita letakkan di folder tokoteko. kurang
lebih seperti skrinsyuuuut dibawah ini:
3. Sekarang kita Extract Wordpress yang sudah kita download tadi dengan WinRar, seperti contoh
dibawah ini:
5.
Oke,
sekarang delete
folder /tokoteko/wordpress/
terlebih
dahulu
wordpress.zip,
setelah
itu
masuk
ke
6.
CTRL+A
(pilih
semua
file
dan
folder)
kemudian
klik
7. Lalu PASTE di luar direktori /wordpress/ berarti kita paste di folder /tokoteko/
kanan
CUT
8.
Jika
sudah,
delete
aja
folder /wordpress/
10. Sebelum melangkah lebih jauh, kita diharuskan untuk membuat Database terlebih dahulu.
Sekarang bukalah Browser anda, lalu login ke phpmyadmin: http://localhost/phpmyadmin. Jika
sudah, maka langsung saja buat database baru dengan nama tokoteko, contohnya seperti gambar
dibawah ini:
13. Selanjutnya, ketikan: http://localhost/tokoteko/ di browser anda. Jika sudah muncul, selanjutnya
KLIK Create a Configuration File. seperti skrinsyut berikut:
14. Setelah itu, akan muncul penjelasan untuk melakukan konfigurasi ke database, klik Let's Go!
15. Kemudian isi form untuk konfigurasi ke database, contohnya seperti ini:
Penjelasan
a.
Database
Name:
adalah
b.
Username:
adalah
username
c.
d.
e.
16.
Password:
password
Database
MySQL
nama
MySQL
(sesuaikan
Host:
Table
isi
Prefix:
Jika
saat
isi
sudah
database
MySQL
(default:
root)
menginstalasi
AppServ)
dengan localhost
dengan tokoteko_
Klik Submit
18. Setelah itu akan muncul form Information Needed, isikan seperti contoh berikut:
Penjelasan
a.
Site
Title:
Judul
Web
b.
Username:
digunakan
untuk
username
login
ke
halaman
admin
c.
Password:
digunakan
untuk
password
login
ke
halaman
admin
d.
Setelah
Your
itu
E-Mail:
langsung
email
aja
klik Install
anda
Wordpress
19. Oke, sekarang wordpress sudah berhasil kita install. Sekarang kita akan mencoba login ke
halaman admin wordpress. Langsung saja klik Login
20. Selanjutnya kita akan diarahkan ke halaman wp-login.php , halaman ini merupakan tempat
dimana
kita
Catatan: URL
memasukan
Admin
username
sebenarnya
dan
ada
password
untuk
login
ke
admin.
di: http://localhost/tokoteko/wp-admin/
17. Yak! langsung saja isikan username dan password yang sudah kita buat pada langkah-langkah
sebelumnya, jika sudah klik Login
18. Selamat! anda sudah berhasil login ke dalam halaman admin. dihalaman ini ada beberapa menu
yang dapat digunakan untuk memanajemen konten website.
19. Sebelum beralih ke pembicaraan yang lain, sekarang kita lihat terlebih dahulu tampilan website
kita seperti apa. Caranya, arahkan mouse ke tulisan Toko Teko di pojok kiri atas, Lalu pilih Visite
Site
20. Dan inilah tampilan website anda ! anda telah berhasil melewati satu fase dimana anda berhasil
menciptakan sebuah website menggunakan engine wordpress.
Download
Themes
Untuk menyulap tampilan website anda menjadi toko sendal eh toko online, maka anda harus
mendownload terlebih dahulu theme yang sesuai dengan website anda. Karena kita ingin membuat
sebuah katalog toko online, maka theme yang kita cari harus berbentuk seperti toko online. Supaya
tidak
1.
Download
default
Theme
Wordpress
lagi
Gratis,
Buka
tab
baru
tampilannya.
di
browser,
lalu
akses
situs
3. Setelah itu, akan tampil berbagai macam theme yang siap anda download. karena di halaman
pertama tidak ada theme yang mirip seperti toko online, maka kita scroll saja kebawah, lalu pindah
dari halaman 1 ke halaman 2 atau ke 3 atau seterusnya:
4. Nah, sekarang saya sudah menemukan theme yang mirip dengan toko online. Nama theme
nya Viper , jika ingin mendownload theme tersebut klik Details
5. Sebelum mendownload theme ini, kita diharuskan dulu untuk share melalui icon social media yang
ada di menu right seperti gambar dibawah ini, pilih salah satu saja contoh Google +
6. Oke, jika sudah kita share, maka link downloadnya akan muncul. Langsung saja kita download
pemirsah!! JEBREEET
Mengubah
1.
Masuk
Theme
ke
halaman
admin,
dengan
browser: http://localhost/tokoteko/wp-admin/
2. Pilih menu Apperance -> kemudian klik Themes
Wordpress
mengetikan
alamat
berikut
di
4. Klik Upload untuk meng-upload theme yang sudah kita download tadi
5. Klik Choose File untuk mengupload file theme ber-ekstensi ZIP yang telah anda download tadi.
Jika sudah klik Install Now
6. Yes! Theme berhasil di Instal ! Sekarang kita aktifkan theme nya dengan cara KLIK ACTIVATE!
7. Setelah anda berhasil menginstal theme, sekarang kita coba lihat hasilnya dengan cara KLIK Visit
Site!
8. Wooow! tampilannya sudah berubah! tapi kok acak-acakan yo :'( gak seperti yang ada di gambar
tadi hadeeh...
Kustomisasi
Tampilan
1. Sekarang PR anda adalah bagaimana cara membuat tampilan website seperti tampilan yang
sudah
2.
anda
Masuk
ke
halaman
download?
admin http://localhost/tokoteko/wp-admin/
3. Setelah itu pilih menu Apperance -> KLIK Widgets untuk menghilangkan Right Menu yang ada di
template bawaan wordpress.
4. Kita hilangkan widgets nya dengan cara memindahkan posisi widgets ke available widgets. tarik aja
pak :v wkwkwk
5.
Untuk
membuktikan
widgets
hilang
apa
belum,
akses
web
depan
anda
contoh: localhost/tokoteko/
6. Oke sudah hilang ya sepertinya, tapi kok sponsor nya error???? why??? asudahlah, nanti kita
benerin
rame2
:D
Mengetahui
Lebih
Banyak
Tentang
Theme
VIPER
1. Kita dapat mengetahui informasi lebih banyak tentang theme VIPER pada menu theme
documentation. karena biasanya, theme yang kita download itu memiliki dokumentasi dan options
yang berbeda-beda.
3. Kita akan mencoba melihat theme documentation. biasanya ada di menu apperance. klik
Menu Apperance -> kemudian Theme Documentation
4. Disini terdapat penjelasan bahwa Theme ini membutuhkan Plugin Options Framework. oleh
karena itu mari kita download, install, dan aktifkan plugin tersebut. Langsung saja klik link Options
Framework
5. Selanjutnya kita akan diarahkan ke lokasi link download plugin options framework.
KLIK Download seperti gambar berikut:
6. Oke, jika pluginnya sudah anda download. sekarang kita masuk ke menu PLUGINS -> Add
New
7. Setelah itu KLIK upload untuk mengupload plugin yang sudah kita download tadi.
8. Pilih Choose File, lalu masukan file plugin .ZIP , setelah itu klik INSTALL NOW !
9. YAAAK! Plugin sukses di install! selanjutnya kita aktivasi terlebih dahulu. KLIK ACTIVATE PLUGIN
11.
Selanjutnya
kita
lihat
dokumentasi
kembali,
apa
saja
yang
harus
kita
setting.
12. Nah, Gambar dibawah ini akan menjelaskan kenapa halaman HOME tetap saja masih berbentuk
postingan??? ternyata itu karena settingannya belum diatur sesuai dengan pengaturan yg ada di
theme VIPER ini.
13. Oke kita ikuti saja instruksinya. yang pertama, kita di haruskan untuk membuat PAGES
baru dengan nama home.
15. Isi Pages nya seperti gambar dibawah ini: Jangan lupa klik Publish
16.
Oke,
page
home
berhasil
dibuat! JEBREEEET!
17. Kemudian langkah selanjutnya, menurut dokumentasi kita harus membuat satu page lagi
bernama Blog. Lakukan hal yang sama seperti yang barusan kita lakukan. Samakan seperti gambar
berikut, jika sudah klikPublish!
18. Setelah itu, kita di haruskan untuk pergi ke menu SETTING -> KLIK READING
19. Next, Ikuti pengaturannya sesuai dengan gambar berikut ini, jika sudah KLIK SAVE CHANGE!
20. REFRESH halaman depan website anda. dialamat: http://localhost/tokoteko/ apakah yang
terjadi? YEEES! halaman berubah drastis! selamat anda telah berhasil !
21. Selanjutnya kita akan melakukan SETTING DEPARTMENT! atau CATEGORY PRODUCT.
22. Masuk ke Halaman Admin, http://localhost/tokoteko/wp-admin/ lalu pilih menu PRODUCTS > KLIK DEPARTMENT
23. Isi DEPARTMENT , contohnya: T-Shirt Pria. Kemudian klik Add New Department
24. Kalau berhasil, maka Department akan tampil di pojokan seperti ini
25. Misalkan kita punya produk lebih dari satu, kita dapat menambahkannya lagi. Contoh disini saya
menambahkan department baru bernama T-Shirt Wanita. Lalu saya klik Add New Department!
26. Oke berhasil ! Sekarang Saya akan mencoba menambahkan 1 Buah Produk. KLIK menu
Product -> Add New. Lalu isi sebagai berikut:
27. Klik Set Featured Image untuk menambah gambar, maka akan muncul dialog Upload Files
28. Klik Select Files untuk memilih gambar yang ingin anda upload.
29. Setelah anda menekan tombol Set Featured Image, maka hasilnya akan tampak seperti ini:
32. Sekarang kita cek halaman depan website, apakah ada yang berubah? Langsung saja akses link
berikut: http://localhost/tokoteko/ . maka kurang lebih hasilnya akan tampak seperti berikut:
33.
YAKKK!
Berhasil
berhasil
bisa
jadi
bisa
jadi
yaak!
horeee!
=))
34. Lakukan hal yang sama untuk penambahan Product, disini saya akan menambahkan beberapa
product lagi untuk Department T-Shirt Pria dan Wanita.
Membuat
Top
Menu
Pada
VIPER
Theme
1. Karena top menu belum ada di website toko teko, maka kita harus membuatnya terlebih dahulu.
Pilih menu Apperance -> kemudian klik Menus
2. Setelah itu akan muncul halaman untuk setting top menu. Lakukan setting top menu seperti
gambar berikut ini:
3. Jika sudah, maka REFRESH website anda. Ketik: http://localhost/tokoteko/ di browser, maka
kurang lebih akan tampak seperti gambar dibawah ini:
4. Yaksip, Selanjutnya saya akan menambahkan halaman lagi untuk memperbanyak Menu Top.
karena kalau sedikit kurang enak di pandang pemirsah. Untuk menambah halaman, klik Pages > New
5. Kemudian buat halaman baru dengan nama Catalog seperti skrinsyuut berikut:
Page
6. Setelah itu Refresh Website anda. Maka akan tampil menu top baru dengan nama catalog. Karena
tadi sudah kita sinkronasikan, jika ada halaman baru yang dibuat, otomatis akan bertambah sendiri di
menu top.
7. Okesip, Selanjutnya kita buat lagi halaman baru dengan nama Cara Pembelian. Isi formnya
seperti gambar berikut:
9. Masih ada lagi, yang terakhir buat halaman baru dengan nama Hubungi Kami, halaman ini akan
kita gunakan untuk Kontak toko online.
10. Klik Publish, lalu refresh kembali website anda. maka akan terlihat seperti ini:
Menghilangkan
Kotak
Komentar
Jika anda tidak ingin ada orang yang komen sembarangan, maka lebih baik kita close saja box
komentarnya.
1. Untuk menghilangkan box komentar, edit salah satu page yang terdapat box komentar, contohnya
seperti halaman hubungi kami. Lalu klik Screen Options yang ada diatas, kemudian CENTANG
Discussion
2. Setelah itu Centang lagi 2 Checkbox yang ada dibawah, Lanjut Klik Publish.
3. Untuk melihat hasilnya, Refresh kembali halaman hubungi kami yang ada diluar admin. tepatnya
yang ada di Front-end (halaman depan) website anda.
Mengganti
Permalinks
Permalinks pada wordpress dapat kita atur sesuai dengan keinginan kita, biasanya ini berguna untuk
media pemasaran online dengan teknik SEO (Search Engine Optimization).
Untuk mengoptimalkan website agar cepat terindex dengan baik oleh google. maka dari itu kita
setting
terlebih
dahulu
permalinknya.
2. Setting permalinknya seperti gambar dibawah ini, kemudian klik Save Changes
3. Untuk melihat hasilnya, seperti biasa, akses kembali salah satu halaman yang ada di website. Dan
hasilnya akan tampak seperti berikut:
Menghapus
dan
Mengganti
Sponsor
Nah ini yang saya bilang tadi, sponsor yang tadi error dikarenakan kita belum menginstal plugin
options framework. jika kita sudah menginstalasinya, maka sponsor tidak akan error.
Namun, terkadang kita ingin menghapus atau mengganti sponsor sesuai dengan keinginan kita.
Bagaimana
1.
Caranya?
oke
Mengganti
ikuti
tutorial
berikut
Sponsor
Untuk mengganti sponsor, Klik menu Apperance yang ada di wp-admin -> kemudian klik Theme
Options -> setelah itu klik Tab Banner Settings. Didalam menu inilah kita dapat mengubah gambar
sponsor yang tadi kita simak bersama-sama :D
2.
Menghapus
Sponsor
Untuk menghapus sponsor, KLIK Menu Apperance -> Editor, kemudian klik sponsors.php pada
pojok kanan list files theme.
Selanjutnya terserah anda, jika memang berniat ingin menghapus, hapus saja semua skrip atau kode
yang
ada
Menghilangkan
di
file
sponsors.php
Tombol
kemudian
Purchase
klik Update
File :D
Now
Karena website yang kita buat adalah katalog, maka kita tidak memerlukan tombol purchase now.
oleh karena itu tombol ini harus kita hilangkan.
1. Klik menu Editor -> Pilih file content-products.php kemudian hapus beberapa kode seperti yang
ada di gambar berikut, jika sudah klik Update File.
Mengubah
Deskripsi
Website
Untuk mengubah Judul atau Deskripsi website, Klik menu Apperance -> Customize. Kemudian edit
deskripsinya, lalu klik Save & Publish
1. Pilih menu Apperance -> Klik Theme Options -> Kemudian Klik tab Homepage -> lalu akan
muncul Form Offer Banner.
2. Sebelum kita menambahkan gambar, kita harus mengupload terlebih dahulu gambarnya di menu
media
upload.
4. Pilih salah satu gambar yang sekiranya anda butuhkan untuk dipasang dipojok kanan banner
6. Sekarang KLIK EDIT pada gambar yang ingin kita pasang, Kemudian kita COPY alamat URL
gambar
7. Balik lagi ke menu Apperance -> Theme Options -> Homepage -> Offer Banner. masukan tag
html Image , lalu paste urlnya didalam tag image tersebut. setelah itu klik Save Options. ya kurang
lebihnya seperti ini. (Kalau gambarnya ga keliatan di klik aja)
Okeeeeeee siiiiippp ! selamat anda sudah berhasil membuat toko online anda sendiri :D yeyeyeye....
Cukup sekian postingan dari mas kodok, apabila ada yang kurang faham, silahkan Mention aja di
twitter.