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)

39. Workshop Pembuatan Website Menggunakan .
Science Carnival FMIPA UI, 20 November 2009
supported by

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)

50. Workshop Pembuatan Website Menggunakan .
Science Carnival FMIPA UI, 20 November 2009
supported by

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