INF104: WEB DESIGN Membangun Website dengan...

26
Pertemuan 15: INF104: WEB DESIGN Membangun Website dengan Wordpress Dosen: Wayan Suparta, PhD

Transcript of INF104: WEB DESIGN Membangun Website dengan...

Page 1: INF104: WEB DESIGN Membangun Website dengan …ocw.upj.ac.id/files/Handout-INF104-INF104-Pertemuan-15.pdfDesign Web dengan JAVA 2. Design Web dengan Joomla 3. Design Web dengan WordPress

Pertemuan 15:

INF104: WEB DESIGN

Membangun Website dengan

Wordpress

Dosen: Wayan Suparta, PhD

Page 2: INF104: WEB DESIGN Membangun Website dengan …ocw.upj.ac.id/files/Handout-INF104-INF104-Pertemuan-15.pdfDesign Web dengan JAVA 2. Design Web dengan Joomla 3. Design Web dengan WordPress

Informasi UAS & Tugas

• Bahan UAS (close book): 100 menit

• Tugas Akhir: 1. Buat sebuah website dengan WordPress, pilih salah satu

tema berikut:

Pendidikan Bisnis Konsultasi

2. Kumpulkan LINKnya (alamat websitenya) melalui

EDMODO sebelum 19 Mei 2019.

• Ujian Praktek (salah satu):

1. Design Web dengan JAVA

2. Design Web dengan Joomla

3. Design Web dengan WordPress

• Ujian Teori:

1. XAMPP

2. JAVA

3. Joomla

4. WordPress

Page 3: INF104: WEB DESIGN Membangun Website dengan …ocw.upj.ac.id/files/Handout-INF104-INF104-Pertemuan-15.pdfDesign Web dengan JAVA 2. Design Web dengan Joomla 3. Design Web dengan WordPress

ISI ANGKET/KUESIONER:

Silakan isi angket ini untuk

peningkatan kualitas pengajaran

Web Design

https://forms.gle/LxtgiED7hnvehcw59

Page 4: INF104: WEB DESIGN Membangun Website dengan …ocw.upj.ac.id/files/Handout-INF104-INF104-Pertemuan-15.pdfDesign Web dengan JAVA 2. Design Web dengan Joomla 3. Design Web dengan WordPress

Creating a WordPress Website

Is WordPress for You?

Creating a WordPress Website Is WordPress for You?

Page 5: INF104: WEB DESIGN Membangun Website dengan …ocw.upj.ac.id/files/Handout-INF104-INF104-Pertemuan-15.pdfDesign Web dengan JAVA 2. Design Web dengan Joomla 3. Design Web dengan WordPress

CMS: Benefits vs Creativity

Page 6: INF104: WEB DESIGN Membangun Website dengan …ocw.upj.ac.id/files/Handout-INF104-INF104-Pertemuan-15.pdfDesign Web dengan JAVA 2. Design Web dengan Joomla 3. Design Web dengan WordPress

Apa itu Wordpress • WordPress adalah suatu aplikasi content

management system (CMS) untuk pembuatan blog.

• Aplikasi ini bersifat open source (free) dan gratis (preceless).

• Website wordpress : http://wordpress.com/

• Nama alamat website kadang mengikuti nama email yang didaftarkan untukmembuat blog ini.

• Nama blog adalah unik.

Page 7: INF104: WEB DESIGN Membangun Website dengan …ocw.upj.ac.id/files/Handout-INF104-INF104-Pertemuan-15.pdfDesign Web dengan JAVA 2. Design Web dengan Joomla 3. Design Web dengan WordPress

Memulai Wordpress

https://wayansuparta.wordpress.com/

Link

Page 8: INF104: WEB DESIGN Membangun Website dengan …ocw.upj.ac.id/files/Handout-INF104-INF104-Pertemuan-15.pdfDesign Web dengan JAVA 2. Design Web dengan Joomla 3. Design Web dengan WordPress

• Click “Start your free wordpress Blog” atau langsung ke http://wordpress.com/signup/

wsuparta

[email protected]

X

Page 9: INF104: WEB DESIGN Membangun Website dengan …ocw.upj.ac.id/files/Handout-INF104-INF104-Pertemuan-15.pdfDesign Web dengan JAVA 2. Design Web dengan Joomla 3. Design Web dengan WordPress

• Masukkan Blog Title. – Contoh : Wayan Suparta Homepage

• Klik “Signup”

Page 10: INF104: WEB DESIGN Membangun Website dengan …ocw.upj.ac.id/files/Handout-INF104-INF104-Pertemuan-15.pdfDesign Web dengan JAVA 2. Design Web dengan Joomla 3. Design Web dengan WordPress

Successful Activation Wordpress

Page 11: INF104: WEB DESIGN Membangun Website dengan …ocw.upj.ac.id/files/Handout-INF104-INF104-Pertemuan-15.pdfDesign Web dengan JAVA 2. Design Web dengan Joomla 3. Design Web dengan WordPress

MEMULAI MENDESAIN HOMEPAGE DENGAN

WORDPRESS

https://drwayansuparta.wordpress.com/wp-admin/

The Dashboard

Page 12: INF104: WEB DESIGN Membangun Website dengan …ocw.upj.ac.id/files/Handout-INF104-INF104-Pertemuan-15.pdfDesign Web dengan JAVA 2. Design Web dengan Joomla 3. Design Web dengan WordPress

Pemilihan Template Wordpress

Klik: Appearance Theme

Klik: Appearance Menu Add to Menu

Page 14: INF104: WEB DESIGN Membangun Website dengan …ocw.upj.ac.id/files/Handout-INF104-INF104-Pertemuan-15.pdfDesign Web dengan JAVA 2. Design Web dengan Joomla 3. Design Web dengan WordPress

2. Untuk mengupdate theme tersebut, Anda cukup mengklik theme

yang akan di-aktivasi kemudian memilih ”Activate”.

Page 15: INF104: WEB DESIGN Membangun Website dengan …ocw.upj.ac.id/files/Handout-INF104-INF104-Pertemuan-15.pdfDesign Web dengan JAVA 2. Design Web dengan Joomla 3. Design Web dengan WordPress

3. Tunggu bebepa detik, jika theme berhasil Update akan muncul

seperti gambar di bawah.

1. Jika kita klik “Visit site”, maka

aktivasi yang telah dilakukan

belum berdampak pada tampilan.

2. Kemudian, kita harus klik

“Customize”

3. Lalu klik “Activate & Publish “

seperti gambar di bawah ini.

1

2

3

Page 16: INF104: WEB DESIGN Membangun Website dengan …ocw.upj.ac.id/files/Handout-INF104-INF104-Pertemuan-15.pdfDesign Web dengan JAVA 2. Design Web dengan Joomla 3. Design Web dengan WordPress

Themes vs Templates vs

Frameworks

• Templates can be used with HTML websites

(yeah, let’s save 100+ hours of programming.

• Themes are used with CMS

• Frameworks: Built on a solid core theme with

quality code that includes a lot of “inbuilt”

functionality; continually being updated and

improved; easier customization; doesn’t break.

• Thesis, Genesis highly rated themes.

Page 17: INF104: WEB DESIGN Membangun Website dengan …ocw.upj.ac.id/files/Handout-INF104-INF104-Pertemuan-15.pdfDesign Web dengan JAVA 2. Design Web dengan Joomla 3. Design Web dengan WordPress

The Dashboard

• Cara Mengganti Template dalam Wordpress

Cara -1 – Login dan Install Template

WordPress di Dashboard

Kemudian, menuju menu appearance

lalu pilih themes dan kemudian pilih

add new. Singkatnya, appearance ->

themes -> add new.

Jika anda bingung dan pusing buka

link berikut:

https://idwebhost.com/blog/mengganti-template-wordpress/

Page 18: INF104: WEB DESIGN Membangun Website dengan …ocw.upj.ac.id/files/Handout-INF104-INF104-Pertemuan-15.pdfDesign Web dengan JAVA 2. Design Web dengan Joomla 3. Design Web dengan WordPress

WordPress Plugins

• Update ke Premium Plan

Page 19: INF104: WEB DESIGN Membangun Website dengan …ocw.upj.ac.id/files/Handout-INF104-INF104-Pertemuan-15.pdfDesign Web dengan JAVA 2. Design Web dengan Joomla 3. Design Web dengan WordPress

WordPress Pages

• Untuk membuat Menu dan Submenu

https://drwayansuparta.wordpress.com/wp-admin/

Page 20: INF104: WEB DESIGN Membangun Website dengan …ocw.upj.ac.id/files/Handout-INF104-INF104-Pertemuan-15.pdfDesign Web dengan JAVA 2. Design Web dengan Joomla 3. Design Web dengan WordPress

WordPress Customize • Klik Homepage setting A Static Page

• Current header Header image (pilih header yang anda suka)

• Font juga dapat anda atur termasuk juga Widgets

• Tagline bisa anda sisipkan sesuai motto Anda.

Page 21: INF104: WEB DESIGN Membangun Website dengan …ocw.upj.ac.id/files/Handout-INF104-INF104-Pertemuan-15.pdfDesign Web dengan JAVA 2. Design Web dengan Joomla 3. Design Web dengan WordPress

WordPress EDIT • Anda dapat melakukan editing dimana saja terhadap menu atau fitur yang

dibuat dengan melakukan login terlebih dahulu. Klik tanda “Edit” untuk melakukan updating, dll.

• Editing juga dapat dilakukan secara visualisasi atau HTML.

• Setelah Edit, klik “Update” di pojok kanan atas untuk menyimpan dan mempublikasi hasil perubahannya.

Page 22: INF104: WEB DESIGN Membangun Website dengan …ocw.upj.ac.id/files/Handout-INF104-INF104-Pertemuan-15.pdfDesign Web dengan JAVA 2. Design Web dengan Joomla 3. Design Web dengan WordPress

WordPress Update

• Fitur “Update” ada di pojok kanan atas. Sementara

edit HTML dengan klik tanda vertikal titik tiga.

Page 23: INF104: WEB DESIGN Membangun Website dengan …ocw.upj.ac.id/files/Handout-INF104-INF104-Pertemuan-15.pdfDesign Web dengan JAVA 2. Design Web dengan Joomla 3. Design Web dengan WordPress

WordPress Edit HTML • Fitur “HTML” berada setelah klik tanda vertikal titik tiga.

• Selesai edit maka pilih “Update” dan klik “View Post”.

Page 24: INF104: WEB DESIGN Membangun Website dengan …ocw.upj.ac.id/files/Handout-INF104-INF104-Pertemuan-15.pdfDesign Web dengan JAVA 2. Design Web dengan Joomla 3. Design Web dengan WordPress

Menu My Account/ Profile http://drwayansuparta.wordpress.com/wp-admin/profile.php

• Your Profile and Personal Options

– Name

– About yourself

– Contact Info

– Update Your Password : jika ingin merubah

password

Page 25: INF104: WEB DESIGN Membangun Website dengan …ocw.upj.ac.id/files/Handout-INF104-INF104-Pertemuan-15.pdfDesign Web dengan JAVA 2. Design Web dengan Joomla 3. Design Web dengan WordPress

Rangkuman

• Keunggulan Wordpress

1. Website gratis dengan kapasitas 3 GB dan dilengkapi tema gratis serta CMS.

2. Setiap selesai membuat sebuah artikel, klik Update/PUBLISH untuk melihat hasilnya.

3. Rancanglah tema terlebih dahulu sebelum mengisi atau menulis artikel dalam website.

4. Wordpress dapat diperbaharui kapan saja dengan fasilitas “EDIT” setelah akun wordpress aktif.

5. Dengan website berbasis wordpress anda dapat melakukan aktivitas tertentu sesuai kebutuhan.

Page 26: INF104: WEB DESIGN Membangun Website dengan …ocw.upj.ac.id/files/Handout-INF104-INF104-Pertemuan-15.pdfDesign Web dengan JAVA 2. Design Web dengan Joomla 3. Design Web dengan WordPress

TUGAS 3 1. Buat sebuah website dengan WordPress, pilih salah satu

tema berikut:

Pendidikan

Bisnis

Konsultasi

2. Kumpulkan LINKnya (alamat websitenya) melalui

EDMODO sebelum 19 Mei 2019.

3. Kriteria penilaian adalah

• Kreativitas sesuai tema yang dipilih

• User friendly dan menu-menu yang dibuat serta gambar-gambar

yang dipilih harus bernilai seni (estetika)

• Setiap menu yang dibuat harus memuat informasi yang lengkap

• Sebuah website yang bernilai jual yang dapat melakukan

aktivitas promosi, bisnis atau kemanfaatan lainnya.