+ All Categories
Transcript
Page 1: Workshop Pembuatan 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: Workshop Pembuatan Website menggunakan WordPress

Workshop Pembuatan Website Menggunakan .

Science Carnival FMIPA UI, 20 November 2009supported by

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

[email protected] 829788facebook.com/ilmanakbarpyrokinesis88twitter.com/ilmanakbarilmanakbar.dagdigdug.comslideshare.net/ilmanakbar

presented by:

Page 3: Workshop Pembuatan Website menggunakan WordPress

Workshop Pembuatan Website Menggunakan .

Science Carnival FMIPA UI, 20 November 2009supported by

Outline

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

Page 4: Workshop Pembuatan Website menggunakan WordPress

Workshop Pembuatan Website Menggunakan .

Science Carnival FMIPA UI, 20 November 2009supported 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

Page 5: Workshop Pembuatan Website menggunakan WordPress

Workshop Pembuatan Website Menggunakan .

Science Carnival FMIPA UI, 20 November 2009supported by

Website Dinamis (1)

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

• Terdiri dari file dan database

Page 6: Workshop Pembuatan Website menggunakan WordPress

Workshop Pembuatan Website Menggunakan .

Science Carnival FMIPA UI, 20 November 2009supported 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

Page 7: Workshop Pembuatan Website menggunakan WordPress

Workshop Pembuatan Website Menggunakan .

Science Carnival FMIPA UI, 20 November 2009supported 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

Page 8: Workshop Pembuatan Website menggunakan WordPress

Workshop Pembuatan Website Menggunakan .

Science Carnival FMIPA UI, 20 November 2009supported 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)

Page 9: Workshop Pembuatan Website menggunakan WordPress

Workshop Pembuatan Website Menggunakan .

Science Carnival FMIPA UI, 20 November 2009supported by

Install XAMPP (1)

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

Page 10: Workshop Pembuatan Website menggunakan WordPress

Workshop Pembuatan Website Menggunakan .

Science Carnival FMIPA UI, 20 November 2009supported by

Install XAMPP (2)

• Install di My Documents, terus Next, dan Install

Page 11: Workshop Pembuatan Website menggunakan WordPress

Workshop Pembuatan Website Menggunakan .

Science Carnival FMIPA UI, 20 November 2009supported by

Install XAMPP (3)

Page 12: Workshop Pembuatan Website menggunakan WordPress

Workshop Pembuatan Website Menggunakan .

Science Carnival FMIPA UI, 20 November 2009supported by

Install XAMPP (4)

Page 13: Workshop Pembuatan Website menggunakan WordPress

Workshop Pembuatan Website Menggunakan .

Science Carnival FMIPA UI, 20 November 2009supported by

Jalankan XAMPP, klik Start pada Apache dan MySQL

Page 14: Workshop Pembuatan Website menggunakan WordPress

Workshop Pembuatan Website Menggunakan .

Science Carnival FMIPA UI, 20 November 2009supported by

Tes buka http://localhost

Page 15: Workshop Pembuatan Website menggunakan WordPress

Workshop Pembuatan Website Menggunakan .

Science Carnival FMIPA UI, 20 November 2009supported by

XAMPP

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

beneran

Page 16: Workshop Pembuatan Website menggunakan WordPress

Workshop Pembuatan Website Menggunakan .

Science Carnival FMIPA UI, 20 November 2009supported by

XAMPP

• http://localhost/phpmyadmin > tempat database

Page 17: Workshop Pembuatan Website menggunakan WordPress

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

Install WordPressMempersiapkan file-file

Page 18: Workshop Pembuatan Website menggunakan WordPress

Workshop Pembuatan Website Menggunakan .

Science Carnival FMIPA UI, 20 November 2009supported by

Buat folder My Documents\ XAMPP\htdocs\websiteku

Page 19: Workshop Pembuatan Website menggunakan WordPress

Workshop Pembuatan Website Menggunakan .

Science Carnival FMIPA UI, 20 November 2009supported by

Extract WordPress di sana

Page 20: Workshop Pembuatan Website menggunakan WordPress

Workshop Pembuatan Website Menggunakan .

Science Carnival FMIPA UI, 20 November 2009supported by

Pindahkan dari dalam folder websiteku/wordpress ke luar

Page 21: Workshop Pembuatan Website menggunakan WordPress

Workshop Pembuatan Website Menggunakan .

Science Carnival FMIPA UI, 20 November 2009supported by

Summary: Install WordPress

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

websiteku• Extract di sana

Page 22: Workshop Pembuatan Website menggunakan WordPress

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

Install WordPressMempersiapkan database

Page 23: Workshop Pembuatan Website menggunakan WordPress

Workshop Pembuatan Website Menggunakan .

Science Carnival FMIPA UI, 20 November 2009supported by

Buka http://localhost/phpmyadmin

Page 24: Workshop Pembuatan Website menggunakan WordPress

Workshop Pembuatan Website Menggunakan .

Science Carnival FMIPA UI, 20 November 2009supported by

Buat database, masukkan websiteku

Page 25: Workshop Pembuatan Website menggunakan WordPress

Workshop Pembuatan Website Menggunakan .

Science Carnival FMIPA UI, 20 November 2009supported by

Buat database selesai

Catat informasi ini:Nama database: websiteku

Nama user: rootPassword: (tidak ada password)

Note: di server hosting sebenarnya, ada password

Page 26: Workshop Pembuatan Website menggunakan WordPress

Workshop Pembuatan Website Menggunakan .

Science Carnival FMIPA UI, 20 November 2009supported 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 ‘’)

Page 27: Workshop Pembuatan Website menggunakan WordPress

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

Install WordPressMenginstall WordPress

Page 28: Workshop Pembuatan Website menggunakan WordPress

Workshop Pembuatan Website Menggunakan .

Science Carnival FMIPA UI, 20 November 2009supported by

Buka http://localhost/websiteku

• Klik “Create a Configuration File”

Page 29: Workshop Pembuatan Website menggunakan WordPress

Workshop Pembuatan Website Menggunakan .

Science Carnival FMIPA UI, 20 November 2009supported by

Siapkan informasi database yang tadi sudah disiapkan

Page 30: Workshop Pembuatan Website menggunakan WordPress

Workshop Pembuatan Website Menggunakan .

Science Carnival FMIPA UI, 20 November 2009supported by

Masukkan informasi-informasi itu

Page 31: Workshop Pembuatan Website menggunakan WordPress

Workshop Pembuatan Website Menggunakan .

Science Carnival FMIPA UI, 20 November 2009supported by

Lanjut..

Page 32: Workshop Pembuatan Website menggunakan WordPress

Workshop Pembuatan Website Menggunakan .

Science Carnival FMIPA UI, 20 November 2009supported by

Hampir Selesai..

Page 33: Workshop Pembuatan Website menggunakan WordPress

Workshop Pembuatan Website Menggunakan .

Science Carnival FMIPA UI, 20 November 2009supported by

Selesai!

• Catat username dan password sementara itu di notepad

Page 34: Workshop Pembuatan Website menggunakan WordPress

Workshop Pembuatan Website Menggunakan .

Science Carnival FMIPA UI, 20 November 2009supported by

http://localhost/websiteku

Page 35: Workshop Pembuatan Website menggunakan WordPress

Workshop Pembuatan Website Menggunakan .

Science Carnival FMIPA UI, 20 November 2009supported by

Summary: Install WordPress

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

blog dsb• Selesai > catat password• Bikin website selesai

Page 36: Workshop Pembuatan Website menggunakan WordPress

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

Mengatur WordPressMembuat tulisan baru

Page 37: Workshop Pembuatan Website menggunakan WordPress

Workshop Pembuatan Website Menggunakan .

Science Carnival FMIPA UI, 20 November 2009supported by

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

Page 38: Workshop Pembuatan Website menggunakan WordPress

Workshop Pembuatan Website Menggunakan .

Science Carnival FMIPA UI, 20 November 2009supported by

Halaman Admin WordPress (disebut dashboard)

Page 39: Workshop Pembuatan Website menggunakan WordPress

Workshop Pembuatan Website Menggunakan .

Science Carnival FMIPA UI, 20 November 2009supported by

Page 40: Workshop Pembuatan Website menggunakan WordPress

Workshop Pembuatan Website Menggunakan .

Science Carnival FMIPA UI, 20 November 2009supported by

Dashboard WordPress

Page 41: Workshop Pembuatan Website menggunakan WordPress

Workshop Pembuatan Website Menggunakan .

Science Carnival FMIPA UI, 20 November 2009supported by

Membuat tulisan

Page 42: Workshop Pembuatan Website menggunakan WordPress

Workshop Pembuatan Website Menggunakan .

Science Carnival FMIPA UI, 20 November 2009supported by

Tampil di website kita deh!

Page 43: Workshop Pembuatan Website menggunakan WordPress

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

Mengatur WordPressMengganti template/themes

Page 44: Workshop Pembuatan Website menggunakan WordPress

Workshop Pembuatan Website Menggunakan .

Science Carnival FMIPA UI, 20 November 2009supported by

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

Page 45: Workshop Pembuatan Website menggunakan WordPress

Workshop Pembuatan Website Menggunakan .

Science Carnival FMIPA UI, 20 November 2009supported by

Tempat nyari themes WordPress: Google

Page 46: Workshop Pembuatan Website menggunakan WordPress

Workshop Pembuatan Website Menggunakan .

Science Carnival FMIPA UI, 20 November 2009supported by

Download themes

Page 47: Workshop Pembuatan Website menggunakan WordPress

Workshop Pembuatan Website Menggunakan .

Science Carnival FMIPA UI, 20 November 2009supported by

Download themes

Page 48: Workshop Pembuatan Website menggunakan WordPress

Workshop Pembuatan Website Menggunakan .

Science Carnival FMIPA UI, 20 November 2009supported by

Masukin themesnya ke website kita

Page 49: Workshop Pembuatan Website menggunakan WordPress

Workshop Pembuatan Website Menggunakan .

Science Carnival FMIPA UI, 20 November 2009supported by

Upload themesnya (tersedia di CD, folder WordPress Theme)

Page 50: Workshop Pembuatan Website menggunakan WordPress

Workshop Pembuatan Website Menggunakan .

Science Carnival FMIPA UI, 20 November 2009supported by

Page 51: Workshop Pembuatan Website menggunakan WordPress

Workshop Pembuatan Website Menggunakan .

Science Carnival FMIPA UI, 20 November 2009supported by

Cek websitenya untuk perubahan template

Page 52: Workshop Pembuatan Website menggunakan WordPress

Workshop Pembuatan Website Menggunakan .

Science Carnival FMIPA UI, 20 November 2009supported by

Bisa edit template?

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

bahasa pemrograman PHP

Page 53: Workshop Pembuatan Website menggunakan WordPress

Workshop Pembuatan Website Menggunakan .

Science Carnival FMIPA UI, 20 November 2009supported by

Edit Themes

Page 54: Workshop Pembuatan Website menggunakan WordPress

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

Topik LanjutanPlugin

Page 55: Workshop Pembuatan Website menggunakan WordPress

Workshop Pembuatan Website Menggunakan .

Science Carnival FMIPA UI, 20 November 2009supported 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

Page 56: Workshop Pembuatan Website menggunakan WordPress

Workshop Pembuatan Website Menggunakan .

Science Carnival FMIPA UI, 20 November 2009supported by

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

Page 57: Workshop Pembuatan Website menggunakan WordPress

Workshop Pembuatan Website Menggunakan .

Science Carnival FMIPA UI, 20 November 2009supported by

Install Plugin

Page 58: Workshop Pembuatan Website menggunakan WordPress

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

Topik LanjutanMembuat/edit themes sendiri

Page 59: Workshop Pembuatan Website menggunakan WordPress

Workshop Pembuatan Website Menggunakan .

Science Carnival FMIPA UI, 20 November 2009supported by

Contoh edit themes yang sudah ada

Page 60: Workshop Pembuatan Website menggunakan WordPress

Workshop Pembuatan Website Menggunakan .

Science Carnival FMIPA UI, 20 November 2009supported by

Contoh themes bikin dari 0: tentangcad.com

Page 61: Workshop Pembuatan Website menggunakan WordPress

Workshop Pembuatan Website Menggunakan .

Science Carnival FMIPA UI, 20 November 2009supported by

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 62: Workshop Pembuatan Website menggunakan WordPress

Workshop Pembuatan Website Menggunakan .

Science Carnival FMIPA UI, 20 November 2009supported by

Selesai

Page 63: Workshop Pembuatan Website menggunakan WordPress

Workshop Pembuatan Website Menggunakan .

Science Carnival FMIPA UI, 20 November 2009supported 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..


Top Related