Workshop ini memberikan panduan lengkap untuk membuat website dinamis menggunakan WordPress, mulai dari persiapan server simulasi menggunakan XAMPP, instalasi WordPress, pengaturan konten dan template website, hingga penambahan fitur menggunakan plugin. Peserta akan belajar cara membuat tulisan baru, mengubah template desain website, serta menginstal plugin untuk memperluas fungsionalitas website.
1. Workshop Pembuatan Website Menggunakan WordPress. Science Carnival FMIPA UI, 20 November 2009
Workshop
Pembuatan Website
menggunakan
WordPress
Science Carnival, FMIPA UI
Jum’at, 20 November 2009
2. Workshop Pembuatan Website Menggunakan .
Science Carnival FMIPA UI, 20 November 2009
supported by
Muhammad Ilman AkbarMuhammad Ilman Akbar
a blogger, entrepreneur, weba blogger, entrepreneur, web loverlover, co-founder of, co-founder of
Univind, founder & lead admin of anakUI.com, andUnivind, founder & lead admin of anakUI.com, and
more importantly,more importantly, WordPress enthusiastWordPress enthusiast! ;)! ;)
ilmanakbar@gmail.com
0817 829788
facebook.com/ilmanakbar
pyrokinesis88
twitter.com/ilmanakbar
ilmanakbar.dagdigdug.com
slideshare.net/ilmanakbar
presented by:
3. Workshop Pembuatan Website Menggunakan .
Science Carnival FMIPA UI, 20 November 2009
supported by
Outline
• Isi CD
• Website Dinamis
• Persiapan
• Install XAMPP
• Install WordPress
• Mengatur WordPress
• Topik Lanjutan
4. Workshop Pembuatan Website Menggunakan .
Science Carnival FMIPA UI, 20 November 2009
supported by
Isi CD
• WordPress 2.8.6: wordpress-2.8.6.zip
• Installer XAMPP: xampp-win32-1.6.7-
installer.exe
• WordPress Plugin dan WordPress Themes
• Tutorial pembuatan WordPress Themes
• Tutorial pembuatan website dengan hosting
dan domain gratisan
• Materi presentasi ini
5. Workshop Pembuatan Website Menggunakan .
Science Carnival FMIPA UI, 20 November 2009
supported by
Website Dinamis (1)
• Website yang interaktif, bisa di-update isinya
denga mudah, bisa komentar, dsb.
• Terdiri dari file dan database
6. Workshop Pembuatan Website Menggunakan .
Science Carnival FMIPA UI, 20 November 2009
supported by
Website Dinamis (2)
• File-file
– File-file PHP yang membuat website terlihat oleh
mata kita dan berfungsi sesuai fungsinya
– File-file gambar, musik, dsb
• Database
– Tempat penyimpanan data-data yang dimasukkan
oleh pengguna: tulisan, komentar, link menuju file
gambar, dsb
7. Workshop Pembuatan Website Menggunakan .
Science Carnival FMIPA UI, 20 November 2009
supported by
Persiapan
• Server hosting dan domain
– Server hosting: tempat nyimpen file2
– Domain: alamat www.namadomain.com /.net
/.org /dsb..
• Sewa dimana? Banyaak! Googling: web
hosting dan domain Indonesia
• Pilih ini aja: [N]eoHoster www.neohoster.com
8. Workshop Pembuatan Website Menggunakan .
Science Carnival FMIPA UI, 20 November 2009
supported by
Karena kita ga konek Internet
• Program “simulasi” server hosting, namanya
XAMPP
• Di komputer sendiri
• Butuh program untuk ngebuka dan ngezip
(mis. WinZip, WinRar, IZArc, 7Zip, dsb)
9. Workshop Pembuatan Website Menggunakan .
Science Carnival FMIPA UI, 20 November 2009
supported by
Install XAMPP (1)
• Jalankan Installer XAMPP: xampp-win32-1.6.7-
installer.exe
10. Workshop Pembuatan Website Menggunakan .
Science Carnival FMIPA UI, 20 November 2009
supported by
Install XAMPP (2)
• Install di My Documents, terus Next, dan Install
11. Workshop Pembuatan Website Menggunakan .
Science Carnival FMIPA UI, 20 November 2009
supported by
Install XAMPP (3)
12. Workshop Pembuatan Website Menggunakan .
Science Carnival FMIPA UI, 20 November 2009
supported by
Install XAMPP (4)
13. Workshop Pembuatan Website Menggunakan .
Science Carnival FMIPA UI, 20 November 2009
supported by
Jalankan XAMPP, klik Start pada
Apache dan MySQL
14. Workshop Pembuatan Website Menggunakan .
Science Carnival FMIPA UI, 20 November 2009
supported by
Tes buka http://localhost
15. Workshop Pembuatan Website Menggunakan .
Science Carnival FMIPA UI, 20 November 2009
supported by
XAMPP
• My Documentsxampphtdocs
– Tempat menaruh file-file kita
– Diibaratkan dengan File Manager di cPanel server hosting
beneran
16. Workshop Pembuatan Website Menggunakan .
Science Carnival FMIPA UI, 20 November 2009
supported by
XAMPP
• http://localhost/phpmyadmin > tempat
database
17. Workshop Pembuatan Website Menggunakan WordPress. Science Carnival FMIPA UI, 20 November 2009
Install WordPress
Mempersiapkan file-file
18. Workshop Pembuatan Website Menggunakan .
Science Carnival FMIPA UI, 20 November 2009
supported by
Buat folder My Documents
XAMPPhtdocswebsiteku
19. Workshop Pembuatan Website Menggunakan .
Science Carnival FMIPA UI, 20 November 2009
supported by
Extract WordPress di sana
20. Workshop Pembuatan Website Menggunakan .
Science Carnival FMIPA UI, 20 November 2009
supported by
Pindahkan dari dalam folder
websiteku/wordpress ke luar
21. Workshop Pembuatan Website Menggunakan .
Science Carnival FMIPA UI, 20 November 2009
supported by
Summary: Install WordPress
Mempersiapkan file-file
• Download dari website (buka dari CD)
• Buat folder My
DocumentsXAMPPhtdocswebsiteku
• Extract di sana
22. Workshop Pembuatan Website Menggunakan WordPress. Science Carnival FMIPA UI, 20 November 2009
Install WordPress
Mempersiapkan database
23. Workshop Pembuatan Website Menggunakan .
Science Carnival FMIPA UI, 20 November 2009
supported by
Buka http://localhost/phpmyadmin
24. Workshop Pembuatan Website Menggunakan .
Science Carnival FMIPA UI, 20 November 2009
supported by
Buat database, masukkan websiteku
25. Workshop Pembuatan Website Menggunakan .
Science Carnival FMIPA UI, 20 November 2009
supported by
Buat database selesai
Catat informasi ini:
Nama database: websiteku
Nama user: root
Password: (tidak ada password)
Note: di server hosting sebenarnya, ada password
26. Workshop Pembuatan Website Menggunakan .
Science Carnival FMIPA UI, 20 November 2009
supported by
Summary: Install WordPress
Mempersiapkan database
• Jalankan XAMPP
• Buka http://localhost/phpmyadmin
• Buat database bernama ‘websiteku’ (tanpa
kutip, boleh juga dengan nama lain)
• Catat nama database, nama username dan
password (root dan ‘’)
27. Workshop Pembuatan Website Menggunakan WordPress. Science Carnival FMIPA UI, 20 November 2009
Install WordPress
Menginstall WordPress
28. Workshop Pembuatan Website Menggunakan .
Science Carnival FMIPA UI, 20 November 2009
supported by
Buka http://localhost/websiteku
• Klik “Create a Configuration File”
29. Workshop Pembuatan Website Menggunakan .
Science Carnival FMIPA UI, 20 November 2009
supported by
Siapkan informasi database yang tadi
sudah disiapkan
30. Workshop Pembuatan Website Menggunakan .
Science Carnival FMIPA UI, 20 November 2009
supported by
Masukkan informasi-informasi itu
31. Workshop Pembuatan Website Menggunakan .
Science Carnival FMIPA UI, 20 November 2009
supported by
Lanjut..
32. Workshop Pembuatan Website Menggunakan .
Science Carnival FMIPA UI, 20 November 2009
supported by
Hampir Selesai..
33. Workshop Pembuatan Website Menggunakan .
Science Carnival FMIPA UI, 20 November 2009
supported by
Selesai!
• Catat username dan password sementara itu di
notepad
34. Workshop Pembuatan Website Menggunakan .
Science Carnival FMIPA UI, 20 November 2009
supported by
http://localhost/websiteku
35. Workshop Pembuatan Website Menggunakan .
Science Carnival FMIPA UI, 20 November 2009
supported by
Summary: Install WordPress
• Buka http://localhost/websiteku
• Install > masukin informasi database, judul
blog dsb
• Selesai > catat password
• Bikin website selesai
36. Workshop Pembuatan Website Menggunakan WordPress. Science Carnival FMIPA UI, 20 November 2009
Mengatur WordPress
Membuat tulisan baru
37. Workshop Pembuatan Website Menggunakan .
Science Carnival FMIPA UI, 20 November 2009
supported by
Buka http://localhost/websiteku,
masukkan username + password
38. Workshop Pembuatan Website Menggunakan .
Science Carnival FMIPA UI, 20 November 2009
supported by
Halaman Admin WordPress (disebut
dashboard)
40. Workshop Pembuatan Website Menggunakan .
Science Carnival FMIPA UI, 20 November 2009
supported by
Dashboard WordPress
41. Workshop Pembuatan Website Menggunakan .
Science Carnival FMIPA UI, 20 November 2009
supported by
Membuat tulisan
42. Workshop Pembuatan Website Menggunakan .
Science Carnival FMIPA UI, 20 November 2009
supported by
Tampil di website kita deh!
43. Workshop Pembuatan Website Menggunakan WordPress. Science Carnival FMIPA UI, 20 November 2009
Mengatur WordPress
Mengganti template/themes
44. Workshop Pembuatan Website Menggunakan .
Science Carnival FMIPA UI, 20 November 2009
supported by
Tempat themes WordPress:
http://wordpress.org/extend/themes
45. Workshop Pembuatan Website Menggunakan .
Science Carnival FMIPA UI, 20 November 2009
supported by
Tempat nyari themes WordPress:
Google
46. Workshop Pembuatan Website Menggunakan .
Science Carnival FMIPA UI, 20 November 2009
supported by
Download themes
47. Workshop Pembuatan Website Menggunakan .
Science Carnival FMIPA UI, 20 November 2009
supported by
Download themes
48. Workshop Pembuatan Website Menggunakan .
Science Carnival FMIPA UI, 20 November 2009
supported by
Masukin themesnya ke website kita
49. Workshop Pembuatan Website Menggunakan .
Science Carnival FMIPA UI, 20 November 2009
supported by
Upload themesnya (tersedia di CD,
folder WordPress Theme)
51. Workshop Pembuatan Website Menggunakan .
Science Carnival FMIPA UI, 20 November 2009
supported by
Cek websitenya untuk perubahan
template
52. Workshop Pembuatan Website Menggunakan .
Science Carnival FMIPA UI, 20 November 2009
supported by
Bisa edit template?
• Bisa banget!
• Perlu sedikit kemampuan HTML, CSS, dan
bahasa pemrograman PHP
53. Workshop Pembuatan Website Menggunakan .
Science Carnival FMIPA UI, 20 November 2009
supported by
Edit Themes
54. Workshop Pembuatan Website Menggunakan WordPress. Science Carnival FMIPA UI, 20 November 2009
Topik Lanjutan
Plugin
55. Workshop Pembuatan Website Menggunakan .
Science Carnival FMIPA UI, 20 November 2009
supported by
Plugin
• ‘Tambahan’ untuk WordPress, membuat fitur-
fitur website bisa lebih banyak daripada fitur
dari instalasi WordPress standar
• Contoh:
– bikin kalender kegiatan
– bikin galeri foto
– bikin form kontak
56. Workshop Pembuatan Website Menggunakan .
Science Carnival FMIPA UI, 20 November 2009
supported by
Tempat themes WordPress:
http://wordpress.org/extend/plugins
57. Workshop Pembuatan Website Menggunakan .
Science Carnival FMIPA UI, 20 November 2009
supported by
Install Plugin
58. Workshop Pembuatan Website Menggunakan WordPress. Science Carnival FMIPA UI, 20 November 2009
Topik Lanjutan
Membuat/edit themes sendiri
59. Workshop Pembuatan Website Menggunakan .
Science Carnival FMIPA UI, 20 November 2009
supported by
Contoh edit themes yang sudah ada
60. Workshop Pembuatan Website Menggunakan .
Science Carnival FMIPA UI, 20 November 2009
supported by
Contoh themes bikin dari 0:
tentangcad.com
61. Workshop Pembuatan Website Menggunakan .
Science Carnival FMIPA UI, 20 November 2009
supported by
Buat dari 0
Yang dibutuhkan
• Sedikit kemampuan disain grafis
• Sedikit HTML, CSS, dan PHP
Langkah-langkah
• Buat disain HTML-nya
• Ubah jadi Themes WordPress
– Lihat folder Create Wordpress Template
62. Workshop Pembuatan Website Menggunakan .
Science Carnival FMIPA UI, 20 November 2009
supported by
Selesai
63. Workshop Pembuatan Website Menggunakan .
Science Carnival FMIPA UI, 20 November 2009
supported by
bersama Matt Mullenweg, founder WordPress.com, 16 Januari 2009 di Jakarta
~ semoga kesuksesannya menginspirasi saya dan seluruh masyarakat Indonesia ~
“..don’t be scared to share your idea, tell a lot of
people, so you could get feedback about it..”
terima kasih..