Membuat Website Menggunakan WordPress

62
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

description

Presented on Science Carnaval 2009, BEM FMIPA UI, with topics "Workshop Pembuatan Website menggunakan WordPress". FMIPA UI, 20 November 2009

Transcript of Membuat Website Menggunakan WordPress

Page 1: Membuat Website Menggunakan WordPress

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

Workshop Pembuatan Website menggunakan WordPress

Science Carnival, FMIPA UIJum’at, 20 November 2009

Page 2: Membuat Website Menggunakan WordPress

Workshop Pembuatan Website Menggunakan .

Science Carnival FMIPA UI, 20 November 2009

Muhammad Ilman Akbara blogger, entrepreneur, web lover, co-founder of Univind, founder & lead admin of anakUI.com, and more importantly, WordPress enthusiast! ;)

[email protected]/ilmanakbarilmanakbar.web.idslideshare.net/ilmanakbar

presented by:

Page 3: Membuat Website Menggunakan WordPress

Workshop Pembuatan Website Menggunakan .

Science Carnival FMIPA UI, 20 November 2009

Outline

• Website Dinamis• Persiapan• Install XAMPP• Install WordPress• Mengatur WordPress• Topik Lanjutan

Page 4: Membuat Website Menggunakan WordPress

Workshop Pembuatan Website Menggunakan .

Science Carnival FMIPA UI, 20 November 2009

Website Dinamis (1)

• Website yang interaktif, bisa di-update isinya denga mudah, bisa komentar, dsb.

• Terdiri dari file dan database

Page 5: Membuat Website Menggunakan WordPress

Workshop Pembuatan Website Menggunakan .

Science Carnival FMIPA UI, 20 November 2009

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

Page 6: Membuat Website Menggunakan WordPress

Workshop Pembuatan Website Menggunakan .

Science Carnival FMIPA UI, 20 November 2009

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

Page 7: Membuat Website Menggunakan WordPress

Workshop Pembuatan Website Menggunakan .

Science Carnival FMIPA UI, 20 November 2009

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)

Page 8: Membuat Website Menggunakan WordPress

Workshop Pembuatan Website Menggunakan .

Science Carnival FMIPA UI, 20 November 2009

Install XAMPP (1)

• Jalankan Installer XAMPP: xampp-win32-1.6.7-installer.exe

Page 9: Membuat Website Menggunakan WordPress

Workshop Pembuatan Website Menggunakan .

Science Carnival FMIPA UI, 20 November 2009

Install XAMPP (2)

• Install di My Documents, terus Next, dan Install

Page 10: Membuat Website Menggunakan WordPress

Workshop Pembuatan Website Menggunakan .

Science Carnival FMIPA UI, 20 November 2009

Install XAMPP (3)

Page 11: Membuat Website Menggunakan WordPress

Workshop Pembuatan Website Menggunakan .

Science Carnival FMIPA UI, 20 November 2009

Install XAMPP (4)

Page 12: Membuat Website Menggunakan WordPress

Workshop Pembuatan Website Menggunakan .

Science Carnival FMIPA UI, 20 November 2009

Jalankan XAMPP, klik Start pada Apache dan MySQL

Page 13: Membuat Website Menggunakan WordPress

Workshop Pembuatan Website Menggunakan .

Science Carnival FMIPA UI, 20 November 2009

Tes buka http://localhost

Page 14: Membuat Website Menggunakan WordPress

Workshop Pembuatan Website Menggunakan .

Science Carnival FMIPA UI, 20 November 2009

XAMPP

• My Documents\xampp\htdocs– Tempat menaruh file-file kita– Diibaratkan dengan File Manager di cPanel server hosting

beneran

Page 15: Membuat Website Menggunakan WordPress

Workshop Pembuatan Website Menggunakan .

Science Carnival FMIPA UI, 20 November 2009

XAMPP

• http://localhost/phpmyadmin > tempat database

Page 16: Membuat Website Menggunakan WordPress

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

Install WordPressMempersiapkan file-file

Page 17: Membuat Website Menggunakan WordPress

Workshop Pembuatan Website Menggunakan .

Science Carnival FMIPA UI, 20 November 2009

Buat folder My Documents\ XAMPP\htdocs\websiteku

Page 18: Membuat Website Menggunakan WordPress

Workshop Pembuatan Website Menggunakan .

Science Carnival FMIPA UI, 20 November 2009

Extract WordPress di sana

Page 19: Membuat Website Menggunakan WordPress

Workshop Pembuatan Website Menggunakan .

Science Carnival FMIPA UI, 20 November 2009

Pindahkan dari dalam folder websiteku/wordpress ke luar

Page 20: Membuat Website Menggunakan WordPress

Workshop Pembuatan Website Menggunakan .

Science Carnival FMIPA UI, 20 November 2009

Summary: Install WordPress

Mempersiapkan file-file• Download dari website (buka dari CD)• Buat folder My Documents\XAMPP\htdocs\

websiteku• Extract di sana

Page 21: Membuat Website Menggunakan WordPress

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

Install WordPressMempersiapkan database

Page 22: Membuat Website Menggunakan WordPress

Workshop Pembuatan Website Menggunakan .

Science Carnival FMIPA UI, 20 November 2009

Buka http://localhost/phpmyadmin

Page 23: Membuat Website Menggunakan WordPress

Workshop Pembuatan Website Menggunakan .

Science Carnival FMIPA UI, 20 November 2009

Buat database, masukkan websiteku

Page 24: Membuat Website Menggunakan WordPress

Workshop Pembuatan Website Menggunakan .

Science Carnival FMIPA UI, 20 November 2009

Buat database selesai

Catat informasi ini:Nama database: websiteku

Nama user: rootPassword: (tidak ada password)

Note: di server hosting sebenarnya, ada password

Page 25: Membuat Website Menggunakan WordPress

Workshop Pembuatan Website Menggunakan .

Science Carnival FMIPA UI, 20 November 2009

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 ‘’)

Page 26: Membuat Website Menggunakan WordPress

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

Install WordPressMenginstall WordPress

Page 27: Membuat Website Menggunakan WordPress

Workshop Pembuatan Website Menggunakan .

Science Carnival FMIPA UI, 20 November 2009

Buka http://localhost/websiteku

• Klik “Create a Configuration File”

Page 28: Membuat Website Menggunakan WordPress

Workshop Pembuatan Website Menggunakan .

Science Carnival FMIPA UI, 20 November 2009

Siapkan informasi database yang tadi sudah disiapkan

Page 29: Membuat Website Menggunakan WordPress

Workshop Pembuatan Website Menggunakan .

Science Carnival FMIPA UI, 20 November 2009

Masukkan informasi-informasi itu

Page 30: Membuat Website Menggunakan WordPress

Workshop Pembuatan Website Menggunakan .

Science Carnival FMIPA UI, 20 November 2009

Lanjut..

Page 31: Membuat Website Menggunakan WordPress

Workshop Pembuatan Website Menggunakan .

Science Carnival FMIPA UI, 20 November 2009

Hampir Selesai..

Page 32: Membuat Website Menggunakan WordPress

Workshop Pembuatan Website Menggunakan .

Science Carnival FMIPA UI, 20 November 2009

Selesai!

• Catat username dan password sementara itu di notepad

Page 33: Membuat Website Menggunakan WordPress

Workshop Pembuatan Website Menggunakan .

Science Carnival FMIPA UI, 20 November 2009

http://localhost/websiteku

Page 34: Membuat Website Menggunakan WordPress

Workshop Pembuatan Website Menggunakan .

Science Carnival FMIPA UI, 20 November 2009

Summary: Install WordPress

• Buka http://localhost/websiteku• Install > masukin informasi database, judul

blog dsb• Selesai > catat password• Bikin website selesai

Page 35: Membuat Website Menggunakan WordPress

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

Mengatur WordPressMembuat tulisan baru

Page 36: Membuat Website Menggunakan WordPress

Workshop Pembuatan Website Menggunakan .

Science Carnival FMIPA UI, 20 November 2009

Buka http://localhost/websiteku, masukkan username + password

Page 37: Membuat Website Menggunakan WordPress

Workshop Pembuatan Website Menggunakan .

Science Carnival FMIPA UI, 20 November 2009

Halaman Admin WordPress (disebut dashboard)

Page 38: Membuat Website Menggunakan WordPress

Workshop Pembuatan Website Menggunakan .

Science Carnival FMIPA UI, 20 November 2009

Page 39: Membuat Website Menggunakan WordPress

Workshop Pembuatan Website Menggunakan .

Science Carnival FMIPA UI, 20 November 2009

Dashboard WordPress

Page 40: Membuat Website Menggunakan WordPress

Workshop Pembuatan Website Menggunakan .

Science Carnival FMIPA UI, 20 November 2009

Membuat tulisan

Page 41: Membuat Website Menggunakan WordPress

Workshop Pembuatan Website Menggunakan .

Science Carnival FMIPA UI, 20 November 2009

Tampil di website kita deh!

Page 42: Membuat Website Menggunakan WordPress

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

Mengatur WordPressMengganti template/themes

Page 43: Membuat Website Menggunakan WordPress

Workshop Pembuatan Website Menggunakan .

Science Carnival FMIPA UI, 20 November 2009

Tempat themes WordPress: http://wordpress.org/extend/themes

Page 44: Membuat Website Menggunakan WordPress

Workshop Pembuatan Website Menggunakan .

Science Carnival FMIPA UI, 20 November 2009

Tempat nyari themes WordPress: Google

Page 45: Membuat Website Menggunakan WordPress

Workshop Pembuatan Website Menggunakan .

Science Carnival FMIPA UI, 20 November 2009

Download themes

Page 46: Membuat Website Menggunakan WordPress

Workshop Pembuatan Website Menggunakan .

Science Carnival FMIPA UI, 20 November 2009

Download themes

Page 47: Membuat Website Menggunakan WordPress

Workshop Pembuatan Website Menggunakan .

Science Carnival FMIPA UI, 20 November 2009

Masukin themesnya ke website kita

Page 48: Membuat Website Menggunakan WordPress

Workshop Pembuatan Website Menggunakan .

Science Carnival FMIPA UI, 20 November 2009

Upload themesnya (tersedia di CD, folder WordPress Theme)

Page 49: Membuat Website Menggunakan WordPress

Workshop Pembuatan Website Menggunakan .

Science Carnival FMIPA UI, 20 November 2009

Page 50: Membuat Website Menggunakan WordPress

Workshop Pembuatan Website Menggunakan .

Science Carnival FMIPA UI, 20 November 2009

Cek websitenya untuk perubahan template

Page 51: Membuat Website Menggunakan WordPress

Workshop Pembuatan Website Menggunakan .

Science Carnival FMIPA UI, 20 November 2009

Bisa edit template?

• Bisa banget!• Perlu sedikit kemampuan HTML, CSS, dan

bahasa pemrograman PHP

Page 52: Membuat Website Menggunakan WordPress

Workshop Pembuatan Website Menggunakan .

Science Carnival FMIPA UI, 20 November 2009

Edit Themes

Page 53: Membuat Website Menggunakan WordPress

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

Topik LanjutanPlugin

Page 54: Membuat Website Menggunakan WordPress

Workshop Pembuatan Website Menggunakan .

Science Carnival FMIPA UI, 20 November 2009

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

Page 55: Membuat Website Menggunakan WordPress

Workshop Pembuatan Website Menggunakan .

Science Carnival FMIPA UI, 20 November 2009

Tempat themes WordPress: http://wordpress.org/extend/plugins

Page 56: Membuat Website Menggunakan WordPress

Workshop Pembuatan Website Menggunakan .

Science Carnival FMIPA UI, 20 November 2009

Install Plugin

Page 57: Membuat Website Menggunakan WordPress

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

Topik LanjutanMembuat/edit themes sendiri

Page 58: Membuat Website Menggunakan WordPress

Workshop Pembuatan Website Menggunakan .

Science Carnival FMIPA UI, 20 November 2009

Contoh edit themes yang sudah ada

Page 59: Membuat Website Menggunakan WordPress

Workshop Pembuatan Website Menggunakan .

Science Carnival FMIPA UI, 20 November 2009

Contoh themes bikin dari 0: tentangcad.com

Page 60: Membuat Website Menggunakan WordPress

Workshop Pembuatan Website Menggunakan .

Science Carnival FMIPA UI, 20 November 2009

Buat dari 0

Yang dibutuhkan• Sedikit kemampuan disain grafis• Sedikit HTML, CSS, dan PHPLangkah-langkah• Buat disain HTML-nya• Ubah jadi Themes WordPress

– Lihat folder Create Wordpress Template

Page 61: Membuat Website Menggunakan WordPress

Workshop Pembuatan Website Menggunakan .

Science Carnival FMIPA UI, 20 November 2009

Selesai

Page 62: Membuat Website Menggunakan WordPress

Workshop Pembuatan Website Menggunakan .

Science Carnival FMIPA UI, 20 November 2009

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