Workshop Pembuatan Website Menggunakan WordPress. Science Carnival FMIPA UI, 20 November 2009 Menjelaskan cara membuat website dinamis menggunakan WordPress melalui 3 langkah yaitu persiapan, instalasi WordPress, dan pengaturan WordPress. Langkah persiapan meliputi instalasi XAMPP dan membuat database. Langkah instalasi WordPress membahas cara menginstal WordPress ke folder website. Langkah pengaturan WordPress membahas cara membuat tulisan baru dan mengatur template

1. Workshop
Pembuatan Website
menggunakan
WordPress
Science Carnival, FMIPA UI
Jum’at, 20 November 2009
Workshop Pembuatan Website Menggunakan WordPress. Science Carnival FMIPA UI, 20 November 2009

2. presented by:
Muhammad Ilman Akbar
a blogger, entrepreneur, web lover, co-founder of
Univind, founder & lead admin of anakUI.com, and
more importantly, WordPress enthusiast! ;)
ilmanakbar@gmail.com
pyrokinesis88
twitter.com/ilmanakbar
ilmanakbar.web.id
slideshare.net/ilmanakbar
Workshop Pembuatan Website Menggunakan .
Science Carnival FMIPA UI, 20 November 2009

3. Outline
• Website Dinamis
• Persiapan
• Install XAMPP
• Install WordPress
• Mengatur WordPress
• Topik Lanjutan
Workshop Pembuatan Website Menggunakan .
Science Carnival FMIPA UI, 20 November 2009

4. Website Dinamis (1)
• Website yang interaktif, bisa di-update isinya
denga mudah, bisa komentar, dsb.
• Terdiri dari file dan database
Workshop Pembuatan Website Menggunakan .
Science Carnival FMIPA UI, 20 November 2009

5. 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
Workshop Pembuatan Website Menggunakan .
Science Carnival FMIPA UI, 20 November 2009

6. 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
Workshop Pembuatan Website Menggunakan .
Science Carnival FMIPA UI, 20 November 2009

7. 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)
Workshop Pembuatan Website Menggunakan .
Science Carnival FMIPA UI, 20 November 2009

8. Install XAMPP (1)
• Jalankan Installer XAMPP: xampp-win32-1.6.7-
installer.exe
Workshop Pembuatan Website Menggunakan .
Science Carnival FMIPA UI, 20 November 2009

9. Install XAMPP (2)
• Install di My Documents, terus Next, dan Install
Workshop Pembuatan Website Menggunakan .
Science Carnival FMIPA UI, 20 November 2009

10. Install XAMPP (3)
Workshop Pembuatan Website Menggunakan .
Science Carnival FMIPA UI, 20 November 2009

11. Install XAMPP (4)
Workshop Pembuatan Website Menggunakan .
Science Carnival FMIPA UI, 20 November 2009

12. Jalankan XAMPP, klik Start pada
Apache dan MySQL
Workshop Pembuatan Website Menggunakan .
Science Carnival FMIPA UI, 20 November 2009

13. Tes buka http://localhost
Workshop Pembuatan Website Menggunakan .
Science Carnival FMIPA UI, 20 November 2009

14. XAMPP
• My Documentsxampphtdocs
– Tempat menaruh file-file kita
– Diibaratkan dengan File Manager di cPanel server hosting
beneran
Workshop Pembuatan Website Menggunakan .
Science Carnival FMIPA UI, 20 November 2009

15. XAMPP
• http://localhost/phpmyadmin > tempat
database
Workshop Pembuatan Website Menggunakan .
Science Carnival FMIPA UI, 20 November 2009

16. Install WordPress
Mempersiapkan file-file
Workshop Pembuatan Website Menggunakan WordPress. Science Carnival FMIPA UI, 20 November 2009

17. Buat folder My Documents
XAMPPhtdocswebsiteku
Workshop Pembuatan Website Menggunakan .
Science Carnival FMIPA UI, 20 November 2009

18. Extract WordPress di sana
Workshop Pembuatan Website Menggunakan .
Science Carnival FMIPA UI, 20 November 2009

19. Pindahkan dari dalam folder
websiteku/wordpress ke luar
Workshop Pembuatan Website Menggunakan .
Science Carnival FMIPA UI, 20 November 2009

20. Summary: Install WordPress
Mempersiapkan file-file
• Download dari website (buka dari CD)
• Buat folder My
DocumentsXAMPPhtdocswebsiteku
• Extract di sana
Workshop Pembuatan Website Menggunakan .
Science Carnival FMIPA UI, 20 November 2009

21. Install WordPress
Mempersiapkan database
Workshop Pembuatan Website Menggunakan WordPress. Science Carnival FMIPA UI, 20 November 2009

22. Buka http://localhost/phpmyadmin
Workshop Pembuatan Website Menggunakan .
Science Carnival FMIPA UI, 20 November 2009

23. Buat database, masukkan websiteku
Workshop Pembuatan Website Menggunakan .
Science Carnival FMIPA UI, 20 November 2009

24. Buat database selesai
Catat informasi ini:
Nama database: websiteku
Nama user: root
Password: (tidak ada password)
Note: di server hosting sebenarnya, ada password
Workshop Pembuatan Website Menggunakan .
Science Carnival FMIPA UI, 20 November 2009

25. 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 ‘’)
Workshop Pembuatan Website Menggunakan .
Science Carnival FMIPA UI, 20 November 2009

26. Install WordPress
Menginstall WordPress
Workshop Pembuatan Website Menggunakan WordPress. Science Carnival FMIPA UI, 20 November 2009

27. Buka http://localhost/websiteku
• Klik “Create a Configuration File”
Workshop Pembuatan Website Menggunakan .
Science Carnival FMIPA UI, 20 November 2009

28. Siapkan informasi database yang tadi
sudah disiapkan
Workshop Pembuatan Website Menggunakan .
Science Carnival FMIPA UI, 20 November 2009

29. Masukkan informasi-informasi itu
Workshop Pembuatan Website Menggunakan .
Science Carnival FMIPA UI, 20 November 2009

30. Lanjut..
Workshop Pembuatan Website Menggunakan .
Science Carnival FMIPA UI, 20 November 2009

31. Hampir Selesai..
Workshop Pembuatan Website Menggunakan .
Science Carnival FMIPA UI, 20 November 2009

32. Selesai!
• Catat username dan password sementara itu di
notepad
Workshop Pembuatan Website Menggunakan .
Science Carnival FMIPA UI, 20 November 2009

33. http://localhost/websiteku
Workshop Pembuatan Website Menggunakan .
Science Carnival FMIPA UI, 20 November 2009

34. Summary: Install WordPress
• Buka http://localhost/websiteku
• Install > masukin informasi database, judul
blog dsb
• Selesai > catat password
• Bikin website selesai
Workshop Pembuatan Website Menggunakan .
Science Carnival FMIPA UI, 20 November 2009

35. Mengatur WordPress
Membuat tulisan baru
Workshop Pembuatan Website Menggunakan WordPress. Science Carnival FMIPA UI, 20 November 2009

36. Buka
http://localhost/websiteku, masukka
n username + password
Workshop Pembuatan Website Menggunakan .
Science Carnival FMIPA UI, 20 November 2009

37. Halaman Admin WordPress (disebut
dashboard)
Workshop Pembuatan Website Menggunakan .
Science Carnival FMIPA UI, 20 November 2009

38. Workshop Pembuatan Website Menggunakan .
Science Carnival FMIPA UI, 20 November 2009

39. Dashboard WordPress
Workshop Pembuatan Website Menggunakan .
Science Carnival FMIPA UI, 20 November 2009

40. Membuat tulisan
Workshop Pembuatan Website Menggunakan .
Science Carnival FMIPA UI, 20 November 2009

41. Tampil di website kita deh!
Workshop Pembuatan Website Menggunakan .
Science Carnival FMIPA UI, 20 November 2009

42. Mengatur WordPress
Mengganti template/themes
Workshop Pembuatan Website Menggunakan WordPress. Science Carnival FMIPA UI, 20 November 2009

43. Tempat themes WordPress:
http://wordpress.org/extend/themes
Workshop Pembuatan Website Menggunakan .
Science Carnival FMIPA UI, 20 November 2009

44. Tempat nyari themes WordPress:
Google
Workshop Pembuatan Website Menggunakan .
Science Carnival FMIPA UI, 20 November 2009

45. Download themes
Workshop Pembuatan Website Menggunakan .
Science Carnival FMIPA UI, 20 November 2009

46. Download themes
Workshop Pembuatan Website Menggunakan .
Science Carnival FMIPA UI, 20 November 2009

47. Masukin themesnya ke website kita
Workshop Pembuatan Website Menggunakan .
Science Carnival FMIPA UI, 20 November 2009

48. Upload themesnya (tersedia di
CD, folder WordPress Theme)
Workshop Pembuatan Website Menggunakan .
Science Carnival FMIPA UI, 20 November 2009

49. Workshop Pembuatan Website Menggunakan .
Science Carnival FMIPA UI, 20 November 2009

50. Cek websitenya untuk perubahan
template
Workshop Pembuatan Website Menggunakan .
Science Carnival FMIPA UI, 20 November 2009

51. Bisa edit template?
• Bisa banget!
• Perlu sedikit kemampuan HTML, CSS, dan
bahasa pemrograman PHP
Workshop Pembuatan Website Menggunakan .
Science Carnival FMIPA UI, 20 November 2009

52. Edit Themes
Workshop Pembuatan Website Menggunakan .
Science Carnival FMIPA UI, 20 November 2009

53. Topik Lanjutan
Plugin
Workshop Pembuatan Website Menggunakan WordPress. Science Carnival FMIPA UI, 20 November 2009

54. 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
Workshop Pembuatan Website Menggunakan .
Science Carnival FMIPA UI, 20 November 2009

55. Tempat themes WordPress:
http://wordpress.org/extend/plugins
Workshop Pembuatan Website Menggunakan .
Science Carnival FMIPA UI, 20 November 2009

56. Install Plugin
Workshop Pembuatan Website Menggunakan .
Science Carnival FMIPA UI, 20 November 2009

57. Topik Lanjutan
Membuat/edit themes sendiri
Workshop Pembuatan Website Menggunakan WordPress. Science Carnival FMIPA UI, 20 November 2009

58. Contoh edit themes yang sudah ada
Workshop Pembuatan Website Menggunakan .
Science Carnival FMIPA UI, 20 November 2009

59. Contoh themes bikin dari 0:
tentangcad.com
Workshop Pembuatan Website Menggunakan .
Science Carnival FMIPA UI, 20 November 2009

60. 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
Workshop Pembuatan Website Menggunakan .
Science Carnival FMIPA UI, 20 November 2009

61. Selesai
Workshop Pembuatan Website Menggunakan .
Science Carnival FMIPA UI, 20 November 2009

62. terima kasih..
“..don’t be scared to share your idea, tell a lot of
people, so you could get feedback about it..”
bersama Matt Mullenweg, founder WordPress.com, 16 Januari 2009 di Jakarta
Workshop Pembuatan Website Menggunakan .
~ semoga kesuksesannya menginspirasi saya danScience Carnival FMIPA UI, 20 November 2009 ~
seluruh masyarakat Indonesia