Panduan Lengkap CMS & Web Development (WordPress 7): Dari Nol Sampai Jago dalam 16 Pertemuan

By | September 27, 2026

MWI – Halo sahabat semuanya! πŸ‘‹

Kita sebenarnya bisa membuat website yang rapi, kencang, aman, dan tampil profesional dengan jauh lebih mudah dari perkiraanmu. Melalui mata diklat CMS & Web Development di program studi Digital Office Specialist (Fakultas Bisnis & Teknologi Digital), kita bakal membedah tuntas seluk-beluk pembuatan website berbasis WordPress 7 secara praktis!

Mata diklat ini berbobot 5 SKS (160 Jam Pelajaran) dengan porsi 70% Praktik dan 30% Teori. Kami menjamin kamu bakal lebih banyak memegang keyboard dan langsung hands-on membuat project nyata daripada sekadar mendengarkan teori.

Kami membuka semua materi pembelajaran dan slide presentasi dalam kurikulum ini secara bebas, sehingga kamu bisa mengunduh dan mengandalkannya kapan saja melalui Drive resmi berikut:

πŸ“š Materi Presentasi

Setiap pertemuan dirancang bertahap, mulai dari fondasi dasar sampai optimasi tingkat lanjut. Kamu bisa langsung mengunduh slide presentasinya lewat tautan berikut:

  1. Pertemuan 1: Pengantar CMS & Web Development. Memahami arsitektur web, konsep Client-Server, dan alasan kenapa WordPress masih jadi raja CMS.πŸ”— Download Slide Pertemuan 1
  2. Pertemuan 2: Instalasi & Konfigurasi WordPress 7. Langkah praktis pasang WordPress di server lokal (XAMPP/LocalWP) atau hosting, plus atur wp-config.php & permalink.πŸ”— Download Slide Pertemuan 2
  3. Pertemuan 3: Manajemen Konten DasarBedanya Pages vs Posts, kelola media, bikin hirarki kategori, dan optimasi Featured Image.πŸ”— Download Slide Pertemuan 3
  4. Pertemuan 4: Gutenberg Block Editor & Pattern. Bikin layout keren pakai Block Editor, racik Custom Pattern, dan pakai Synced Pattern biar makin efisien.πŸ”— Download Slide Pertemuan 4
  5. Pertemuan 5: Full Site Editing (FSE) & Site Editor. Ubah tampilan situs secara menyeluruh! Mengatur Global Styles, warna, font, dan Template Parts.πŸ”— Download Slide Pertemuan 5
  6. Pertemuan 6: Fitur Kolaborasi & AI Native WordPress 7. Manfaatkan AI Connectors untuk bantu bikin konten dan simulasi review tim dengan fitur Notes & @mentions.πŸ”— Download Slide Pertemuan 6
  7. Pertemuan 7: Menu Navigasi, Submenu & Header/Footer. Menyusun struktur navigasi yang ramah pengguna (user-friendly) di desktop maupun layar HP.πŸ”— Download Slide Pertemuan 7
  8. Pertemuan 8: Ujian Tengah Semester (UTS). Evaluasi pemahaman teori dasar dan ujian praktik mengelola struktur halaman situs.πŸ”— Panduan & Soal UTS
  9. Pertemuan 9: Manajemen Plugin Esensial. Memilih plugin yang tepat untuk formulir kontak, SEO, dan cara jaga performa agar website tidak lemot.πŸ”— Download Slide Pertemuan 9
  10. Pertemuan 10: Optimasi SEO On-Page & Performa Web. Bikin website cepat dibuka lewat caching, kompresi gambar otomatis (WebP), dan racik Meta Description yang pas.πŸ”— Download Slide Pertemuan 10
  11. Pertemuan 11: Amankan Website dari Serangan Peretas. Pasang benteng keamanan: backup otomatis, batasi percobaan login, sertifikat SSL/HTTPS, dan update rutin.πŸ”— Download Slide Pertemuan 11
  12. Pertemuan 12: Sentuhan HTML & CSS Kustom. Belajar sedikit sentuhan kode HTML dan CSS agar tampilan tombol atau elemen visual bisa diubah sesuka hati.πŸ”— Download Slide Pertemuan 12
  13. Pertemuan 13: Dasar PHP & Pembuatan Child Theme. Cara aman memodifikasi fungsi tema tanpa takut hilang saat ada pembaruan (update) sistem.πŸ”— Download Slide Pertemuan 13
  14. Pertemuan 14: Fitur Lanjutan (E-Commerce / Advance Form). Simulasi pembuatan toko online dengan WooCommerce atau pembuatan form pendaftaran dengan logika dinamis.πŸ”— Download Slide Pertemuan 14
  15. Pertemuan 15: Integrasi Proyek Akhir Website. Sesi pendampingan intensif untuk menyempurnakan seluruh fitur website portofolio pribadi/organisasi.πŸ”— Download Slide Pertemuan 15
  16. Pertemuan 16: Ujian Akhir Semester (UAS). Presentasi dan live demo hasil pembuatan website di depan dosen dan rekan-rekan.πŸ”— Panduan & Rubrik UAS

(Materi suplemen tentang Domain, DNS, & Hosting bisa diakses di sini)

πŸ› οΈ Modul Praktik

Berikut adalah rincian kegiatan beserta tautan modul instruksi kerja/panduan praktik untuk tiap sesi:

  1. Pertemuan 1 β€” Cek ‘Dapur’ Server: Buka terminal/CMD, cek koneksi IP & DNS, serta analisis arsitektur WordPress 7.πŸ› οΈ Panduan Praktik Pertemuan 1
  2. Pertemuan 2 β€” Nyalakan Engine: Bikin database baru, selesaikan instalasi WordPress, dan rapikan struktur permalink.πŸ› οΈ Panduan Praktik Pertemuan 2
  3. Pertemuan 3 β€” Bikin Konten Pertama: Terbitkan 4 halaman utama (Beranda, Tentang Kami, Layanan, Kontak) serta artikel blog pertama.πŸ› οΈ Panduan Praktik Pertemuan 3
  4. Pertemuan 4 β€” Mainkan Block Editor: Gabung-gabungkan blok teks, gambar, dan pattern untuk bikin halaman layanan yang cantik.πŸ› οΈ Panduan Praktik Pertemuan 4
  5. Pertemuan 5 β€” Jadi Designer via FSE: Atur skema warna dan tata letak header-footer tanpa perlu paham coding rumit.πŸ› οΈ Panduan Praktik Pertemuan 5
  6. Pertemuan 6 β€” Nyobain AI & Kerja Tim: Minta AI bikin draf tulisan di editor, lalu kasih catatan revisi ke teman sekelompok.πŸ› οΈ Panduan Praktik Pertemuan 6
  7. Pertemuan 7 β€” Bikin Navigasi Rapi: Buat dropdown menu, tautkan ke halaman penting, dan pasang ikon media sosial di footer.πŸ› οΈ Panduan Praktik Pertemuan 7
  8. Pertemuan 8 β€” Evaluasi Praktik (UTS): Pengerjaan lembar kerja dan uji ketangkasan merapikan layout secara mandiri.πŸ› οΈ Lembar Kerja Praktik UTS
  9. Pertemuan 9 β€” Bedah Plugin: Pasang plugin formulir dan SEO, lalu bersihkan plugin yang nggak penting biar server nggak berat.πŸ› οΈ Panduan Praktik Pertemuan 9
  10. Pertemuan 10 β€” Bikin Web Kencang: Ubah format gambar jadi WebP, nyalakan caching, dan cek skor kecepatan web di Google PageSpeed.πŸ› οΈ Panduan Praktik Pertemuan 10
  11. Pertemuan 11 β€” Kunci Pintu Belakang: Pasang plugin backup, amankan halaman login, dan pastikan status HTTPS sudah hijau/aman.πŸ› οΈ Panduan Praktik Pertemuan 11
  12. Pertemuan 12 β€” Bermain Kode Sederhana: Tulis sedikit kode CSS tambahan untuk mengubah warna tombol atau efek hover.πŸ› οΈ Panduan Praktik Pertemuan 12
  13. Pertemuan 13 β€” Bikin Child Theme: Buat folder tema turunan biar kustomisasi kode PHP tetap aman saat tema utama diperbarui.πŸ› οΈ Panduan Praktik Pertemuan 13
  14. Pertemuan 14 β€” Tambah Fitur Keren: Pilih mau coba bikin katalog toko online atau formulir pendaftaran interaktif.πŸ› οΈ Panduan Praktik Pertemuan 14
  15. Pertemuan 15 β€” Finishing Touches: Cek ulang semua tombol, link, halaman, dan tampilan mobile sebelum dirilis ke publik.πŸ› οΈ Panduan Praktik Pertemuan 15
  16. Pertemuan 16 β€” Show Time (UAS)!: Tampilkan hasil karya websitemu di depan kelas dan tunjukkan fitur-fitur unggulannya!πŸ› οΈ Lembar Penilaian & Praktik UAS

Semoga alur pembelajaran ini membantu kamu membangun website impian! Kalau ada kendala teknis saat praktik, jangan ragu untuk berdiskusi langsung di kelas atau tinggalkan komentar di bawah ya. Selamat belajar! πŸš€

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

Situs ini menggunakan Akismet untuk mengurangi spam. Pelajari bagaimana data komentar Anda diproses