inf104: web design membangun website dengan...
TRANSCRIPT
![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](https://reader033.vdocuments.site/reader033/viewer/2022041714/5e4a3f42ed7fb539f82f2826/html5/thumbnails/1.jpg)
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](https://reader033.vdocuments.site/reader033/viewer/2022041714/5e4a3f42ed7fb539f82f2826/html5/thumbnails/2.jpg)
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](https://reader033.vdocuments.site/reader033/viewer/2022041714/5e4a3f42ed7fb539f82f2826/html5/thumbnails/3.jpg)
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](https://reader033.vdocuments.site/reader033/viewer/2022041714/5e4a3f42ed7fb539f82f2826/html5/thumbnails/4.jpg)
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](https://reader033.vdocuments.site/reader033/viewer/2022041714/5e4a3f42ed7fb539f82f2826/html5/thumbnails/5.jpg)
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](https://reader033.vdocuments.site/reader033/viewer/2022041714/5e4a3f42ed7fb539f82f2826/html5/thumbnails/6.jpg)
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 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](https://reader033.vdocuments.site/reader033/viewer/2022041714/5e4a3f42ed7fb539f82f2826/html5/thumbnails/8.jpg)
• Click “Start your free wordpress Blog” atau langsung ke http://wordpress.com/signup/
wsuparta
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](https://reader033.vdocuments.site/reader033/viewer/2022041714/5e4a3f42ed7fb539f82f2826/html5/thumbnails/9.jpg)
• 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](https://reader033.vdocuments.site/reader033/viewer/2022041714/5e4a3f42ed7fb539f82f2826/html5/thumbnails/10.jpg)
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](https://reader033.vdocuments.site/reader033/viewer/2022041714/5e4a3f42ed7fb539f82f2826/html5/thumbnails/11.jpg)
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](https://reader033.vdocuments.site/reader033/viewer/2022041714/5e4a3f42ed7fb539f82f2826/html5/thumbnails/12.jpg)
Pemilihan Template Wordpress
Klik: Appearance Theme
Klik: Appearance Menu Add to Menu
![Page 13: 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](https://reader033.vdocuments.site/reader033/viewer/2022041714/5e4a3f42ed7fb539f82f2826/html5/thumbnails/13.jpg)
Manage Template Wordpress
https://www.niagahoster.co.id/kb/cara-update-theme-wordpress
1. Pilih menu Appearence » Themes, jika terdapat theme yang minta untuk di-update
akan ada notifikasi seperti gambar di bawah.
![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](https://reader033.vdocuments.site/reader033/viewer/2022041714/5e4a3f42ed7fb539f82f2826/html5/thumbnails/14.jpg)
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](https://reader033.vdocuments.site/reader033/viewer/2022041714/5e4a3f42ed7fb539f82f2826/html5/thumbnails/15.jpg)
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](https://reader033.vdocuments.site/reader033/viewer/2022041714/5e4a3f42ed7fb539f82f2826/html5/thumbnails/16.jpg)
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](https://reader033.vdocuments.site/reader033/viewer/2022041714/5e4a3f42ed7fb539f82f2826/html5/thumbnails/17.jpg)
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](https://reader033.vdocuments.site/reader033/viewer/2022041714/5e4a3f42ed7fb539f82f2826/html5/thumbnails/18.jpg)
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](https://reader033.vdocuments.site/reader033/viewer/2022041714/5e4a3f42ed7fb539f82f2826/html5/thumbnails/19.jpg)
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](https://reader033.vdocuments.site/reader033/viewer/2022041714/5e4a3f42ed7fb539f82f2826/html5/thumbnails/20.jpg)
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](https://reader033.vdocuments.site/reader033/viewer/2022041714/5e4a3f42ed7fb539f82f2826/html5/thumbnails/21.jpg)
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](https://reader033.vdocuments.site/reader033/viewer/2022041714/5e4a3f42ed7fb539f82f2826/html5/thumbnails/22.jpg)
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](https://reader033.vdocuments.site/reader033/viewer/2022041714/5e4a3f42ed7fb539f82f2826/html5/thumbnails/23.jpg)
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](https://reader033.vdocuments.site/reader033/viewer/2022041714/5e4a3f42ed7fb539f82f2826/html5/thumbnails/24.jpg)
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](https://reader033.vdocuments.site/reader033/viewer/2022041714/5e4a3f42ed7fb539f82f2826/html5/thumbnails/25.jpg)
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](https://reader033.vdocuments.site/reader033/viewer/2022041714/5e4a3f42ed7fb539f82f2826/html5/thumbnails/26.jpg)
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.