MATERI PERTEMUAN 14

E-Commerce Dasar &

Form Builder Lanjutan

Pengenalan WooCommerce atau Form Builder Lanjutan sesuai kebutuhan website

Mata Diklat: CMS & Web Development (WordPress 7) · Program Studi Digital Office Specialist

Dua jalur praktik — pilih sesuai kebutuhan website: berjualan online atau formulir kantor yang kompleks.

14 / 16

Pertemuan

2

Jalur Praktik

100%

Praktik Lab

CMS & Web Development · Pertemuan 14

01

Agenda Hari Ini

Dua bagian utama: pengenalan e-commerce dan form builder lanjutan.

JALUR A

E-Commerce Dasar (WooCommerce)

Apa itu WooCommerce

Setup awal & menambahkan produk

Mengelola pesanan & pembayaran dasar

JALUR B

Form Builder Lanjutan

Fitur lanjutan & contoh kasus

Conditional logic

Notifikasi & integrasi

CMS & Web Development · Pertemuan 14

02

Memilih Jalur: E-Commerce atau Form Lanjutan?

Kedua jalur bersifat opsional — pilih sesuai kebutuhan website yang sedang dikelola.

Pilih WooCommerce jika…

Website menjual produk atau jasa

Perlu keranjang belanja & pembayaran online

Membutuhkan katalog produk

Pilih Form Lanjutan jika…

Butuh formulir kompleks (bukan jual-beli)

Perlu logika bersyarat antar pertanyaan

Contoh: pengajuan izin, pendaftaran acara

CMS & Web Development · Pertemuan 14

03

JALUR A

Apa itu WooCommerce?

WooCommerce adalah plugin e-commerce gratis dan paling populer untuk WordPress, memungkinkan website menjual produk atau jasa lengkap dengan katalog, keranjang belanja, dan proses checkout.

Katalog Produk

Keranjang Belanja

Checkout & Pembayaran

Manajemen Pesanan

CMS & Web Development · Pertemuan 14

04

JALUR A

Langkah Setup Awal & Menambahkan Produk

1

Instal dan aktifkan plugin WooCommerce, lalu ikuti wizard setup (info toko, mata uang, lokasi).

2

Atur minimal 1 metode pembayaran dasar (contoh: transfer bank atau bayar di tempat).

3

Tambahkan produk baru: nama, deskripsi, harga, gambar, dan kategori produk.

4

Publikasikan produk dan periksa tampilannya di halaman Shop.

CMS & Web Development · Pertemuan 14

05

JALUR A

Mengelola Pesanan & Pembayaran Dasar

Status Pesanan

Pending, Processing, Completed — memantau tahapan setiap pesanan.

Metode Pembayaran

Transfer bank, bayar di tempat (COD), atau payment gateway.

Pengiriman Dasar

Menentukan biaya dan area pengiriman produk sederhana.

CMS & Web Development · Pertemuan 14

06

JALUR B

Form Builder Lanjutan: Fitur & Contoh Kasus

Berbeda dari form kontak dasar, form builder lanjutan mendukung logika bersyarat, unggah berkas, dan integrasi — cocok untuk formulir kantor yang lebih kompleks.

Conditional Logic

Unggah Berkas

Notifikasi Email

Multi-step Form

Contoh kasus: formulir pengajuan cuti/izin, pendaftaran acara kantor, atau permohonan layanan internal.

CMS & Web Development · Pertemuan 14

07

JALUR B

Langkah Membuat Form Lanjutan

1

Buka plugin form builder yang telah dipasang (Pertemuan 9), atau instal plugin dengan fitur lanjutan bila diperlukan.

2

Buat form baru dengan minimal 5 field, termasuk 1 field lanjutan (dropdown/pilihan ganda/unggah berkas).

3

Terapkan conditional logic (contoh: field tambahan muncul hanya jika opsi tertentu dipilih).

4

Atur notifikasi email, lalu sisipkan form ke halaman yang sesuai dan uji coba pengisiannya.

CMS & Web Development · Pertemuan 14

08

Praktik Baik Memilih & Mengelola

Sesuaikan dengan Kebutuhan

Jangan pasang WooCommerce jika website tidak berjualan — pilih yang benar-benar diperlukan.

Data Produk/Form yang Rapi

Nama, deskripsi, dan kategori yang konsisten memudahkan pengelolaan jangka panjang.

Uji Alur Secara Menyeluruh

Selalu coba proses checkout atau pengisian form dari sudut pandang pengunjung.

Pastikan Notifikasi Aktif

Pengelola harus tahu setiap ada pesanan atau pengisian form baru masuk.

CMS & Web Development · Pertemuan 14

09

Ringkasan Pertemuan 14

WooCommerce cocok untuk website yang menjual produk/jasa secara online.

Form builder lanjutan cocok untuk formulir kompleks non-transaksi, seperti pengajuan izin.

Pilih jalur sesuai kebutuhan nyata website — tidak harus keduanya sekaligus.

Persiapan Pertemuan 15

Penyusunan proyek akhir: struktur konten, desain, plugin, dan keamanan terintegrasi.

CMS & Web Development · Pertemuan 14

10