Archive for September 2025

Konsep dan Sifat Obyek

8:44 PM Add Comment

 





Video


https://www.youtube.com/watch?v=GKA_xI3NQko


Latihan

Visualisasikan dalam diagram dan buat kodenya. Aplikasi sistem pengambilan mata kuliah yang melibatkan Dosen, Mahasiswa, dan mata kuliah yang diambil


Pengumpulan Tugas


Referensi : Buku Object First Java

Absensi Kelas B

Latihan Grouping Object

7:50 PM Add Comment

Java - Clock Display

12:29 AM Add Comment

 


Versi 1

Project Java sederhana berbasis OOP untuk menampilkan jam (hour, minute, second), hari, kalender (tanggal, bulan, tahun), dan suhu ruang.

Struktur project akan terdiri dari beberapa class agar lebih OOP:

  1. Clock → mengatur waktu (jam, menit, detik).

  2. CalendarDisplay → menampilkan hari, tanggal, bulan, tahun.

  3. TemperatureSensor → menampilkan suhu ruang (simulasi random).

  4. ClockDisplayApp → main class untuk menjalankan aplikasi.

SC 1



Versi 2



Menggunakan  GUI (Swing) dari Clock Display App. Aplikasinya akan menampilkan:

  • Jam digital (update real-time).

  • Tanggal + hari kalender.

  • Suhu ruang (simulasi random).


SC


Versi 3



Fitur Modern

  • Dark mode background dengan gradasi biru tua.

  • Emoji icon cuaca:

    • ❄ → suhu dingin (<23°C)

    • ☀ → suhu normal (23–27°C)

    • 🔥 → suhu panas (>27°C)

  • Jam digital besar berwarna cyan.

  • Tanggal putih dan suhu oranye agar kontras.

SC


Versi 4


Hasil Dashboard

  • Bagian atas → Jam digital, tanggal, suhu, dan ikon cuaca.

  • Kiri → Kalender mini bulan berjalan.

  • Kanan → Grafik suhu (line chart real-time).

SC

PWEB - CSS

4:27 PM Add Comment
Spesifikasi Website Course Web Programming

1. Tujuan Website

Menyediakan platform pembelajaran online interaktif untuk siswa/mahasiswa/pemula yang ingin mempelajari dasar-dasar Web Programming dengan materi terstruktur: HTML, CSS, PHP, dan JavaScript.

2. Target Pengguna

  • Siswa/mahasiswa jurusan IT atau non-IT yang ingin belajar membuat website.

  • Pemula yang ingin belajar dasar web programming dari nol.

  • Profesional yang ingin memperdalam keterampilan front-end & back-end.

3. Fitur Utama

🔹 Homepage

  • Banner kursus (hero section) dengan tagline motivatif.

  • Informasi singkat tentang course (durasi, level, sertifikat).

  • Daftar topik utama (HTML, CSS, PHP, JavaScript).

  • Tombol Call-to-Action: "Daftar Sekarang" / "Mulai Belajar".

🔹 Halaman Course

  • Daftar materi per bab:

    1. HTML Dasar → struktur dokumen, heading, paragraf, link, image, tabel, form.

    2. CSS → selector, box model, layout, positioning, flexbox, grid.

    3. JavaScript → variabel, function, DOM, event, interaksi web.

    4. PHP → syntax dasar, form handling, koneksi database MySQL, CRUD sederhana.

  • Konten pembelajaran berupa:

    • Video tutorial

    • Teks & catatan

    • Kode contoh (code snippet)

    • Latihan interaktif

🔹 Dashboard Pengguna

  • Progress bar belajar per modul.

  • Riwayat materi yang sudah dipelajari.

  • Sertifikat setelah menyelesaikan semua course.

🔹 Forum Diskusi

  • Tanya jawab antar siswa & instruktur.

  • Dukungan komentar dengan notifikasi.

🔹 Quiz & Evaluasi

  • Soal pilihan ganda & coding exercise per bab.

  • Ujian akhir berbasis proyek (misalnya membuat website sederhana).

🔹 Admin Panel

  • Manajemen pengguna (siswa/instruktur).

  • Upload materi course (video, teks, file).

  • Melihat progress & statistik pengguna.

4. Spesifikasi Teknis

  • Front-End:

    • HTML5, CSS3, JavaScript (ES6), Bootstrap/Tailwind CSS.

    • Responsif untuk mobile & desktop.

  • Back-End:

    • PHP 8.x

    • Framework opsional: Laravel/CodeIgniter.

    • REST API untuk integrasi data.

  • Database:

    • MySQL/MariaDB (untuk data user, progress, materi, quiz).

  • Hosting & Deployment:

    • Shared hosting / VPS.

    • Domain khusus e-learning.

  • Keamanan:

    • Autentikasi login (JWT/session).

    • Enkripsi password (bcrypt).

5. Desain UI/UX

  • Warna utama: biru & putih (profesional, bersih).

  • Layout: minimalis, fokus pada konten belajar.

  • Navigasi: menu atas → Home, Course, Dashboard, Forum, Login/Register.

6. Rencana Pengembangan

  1. Versi 1.0: Materi HTML & CSS + latihan dasar.

  2. Versi 2.0: Tambah JavaScript interaktif.

  3. Versi 3.0: Tambah PHP & database.

  4. Versi 4.0: Quiz online & sertifikat otomatis.

  5. Versi 5.0: Fitur forum diskusi & marketplace mini project siswa.

Referensi

Monitoring


Absensi

Spesifikasi Proyek Website

7:55 PM Add Comment

 


Dokumen Spesifikasi Proyek Website

1. Pendahuluan

Website merupakan media digital yang memiliki peran penting dalam menyampaikan informasi, memperluas jangkauan bisnis, serta membangun citra sebuah entitas. Berdasarkan tujuan dan fungsinya, website dapat dibagi menjadi beberapa kategori utama, yaitu: Website Perusahaan (Company Profile), E-Commerce / Online Store, Portal Berita, Blog / Personal Website, Forum / Komunitas Online, dan Landing Page.

Dokumen ini menjelaskan spesifikasi detail masing-masing kategori website sebagai acuan dalam perencanaan dan pengembangan proyek.

2. Spesifikasi Proyek Website per Kategori

2.1 Website Perusahaan (Company Profile)

  • Tujuan:
    Menyediakan informasi resmi tentang perusahaan/instansi untuk meningkatkan kredibilitas dan kepercayaan publik.

  • Fitur Utama:

    • Halaman profil perusahaan

    • Visi & misi

    • Portofolio & klien

    • Produk/jasa yang ditawarkan

    • Kontak & lokasi perusahaan

  • Contoh Implementasi:
    Website resmi sekolah, instansi pemerintah, atau perusahaan swasta.

2.2 E-Commerce / Online Store

  • Tujuan:
    Menjadi platform digital untuk transaksi jual beli produk/jasa.

  • Fitur Utama:

    • Katalog produk lengkap dengan deskripsi & foto

    • Keranjang belanja

    • Sistem pembayaran online (payment gateway)

    • Status & pelacakan pesanan

    • Integrasi ekspedisi/logistik

  • Contoh Implementasi:
    Tokopedia, Shopee, atau toko online brand tertentu.

2.3 Portal Berita / Media Online

  • Tujuan:
    Menyajikan informasi aktual, terpercaya, dan cepat dalam berbagai kategori.

  • Fitur Utama:

    • Artikel berita terbaru

    • Kategori berita (politik, ekonomi, teknologi, hiburan, dll.)

    • Sistem manajemen konten (CMS)

    • Komentar pembaca

    • Integrasi media sosial untuk berbagi berita

  • Contoh Implementasi:
    Detik, Kompas, Tempo.

2.4 Blog / Personal Website

  • Tujuan:
    Menjadi media personal untuk berbagi opini, pengalaman, atau pengetahuan tematik.

  • Fitur Utama:

    • Artikel/blog post dengan kategori

    • Komentar pembaca (opsional)

    • Arsip tulisan

    • Integrasi sosial media

  • Contoh Implementasi:
    Blog traveling, blog teknologi, blog pendidikan.

2.5 Forum / Komunitas Online

  • Tujuan:
    Menjadi ruang interaksi digital bagi komunitas dengan minat atau kebutuhan yang sama.

  • Fitur Utama:

    • Registrasi & login anggota

    • Kategori forum dan thread diskusi

    • Sistem komentar & voting

    • Moderasi dan aturan komunitas

    • Profil pengguna & sistem reputasi

  • Contoh Implementasi:
    Kaskus, Reddit, forum otomotif, forum teknologi.

2.6 Landing Page

  • Tujuan:
    Mengarahkan pengunjung agar melakukan tindakan spesifik (konversi), seperti mendaftar, membeli, atau mengikuti event.

  • Fitur Utama:

    • Headline & subheadline persuasif

    • Hero image/video sebagai daya tarik

    • Call to Action (CTA) jelas

    • Formulir singkat (misalnya pendaftaran)

    • Testimoni atau social proof

    • Informasi singkat tentang produk/event

  • Contoh Implementasi:
    Landing page pendaftaran webinar, promosi event wisata, promo aplikasi digital.

3. Persyaratan Teknis Umum

  • Desain: Responsif (mobile-friendly), user-friendly, dan konsisten.

  • Teknologi: HTML5, CSS3, JavaScript, serta framework (Bootstrap/Tailwind, React, atau CMS sesuai kebutuhan).

  • Keamanan: SSL (HTTPS), proteksi data pengguna.

  • Integrasi: Media sosial, payment gateway, API eksternal sesuai kategori.

  • Optimasi: SEO-friendly, kecepatan loading optimal.

4. Kesimpulan

Dokumen ini merangkum spesifikasi proyek website sesuai dengan kategori utamanya. Setiap kategori memiliki tujuan, fitur, dan implementasi yang berbeda. Dengan acuan ini, proses perancangan, pengembangan, dan implementasi website dapat lebih terarah sesuai kebutuhan pengguna atau organisasi.


Referensi

https://codestudio80.blogspot.com/2025/09/web-design-mastery-booking-hotel.html

https://www.geeksforgeeks.org/css/top-10-projects-for-beginners-to-practice-html-and-css-skills/

PWEB - Landing Page

4:03 PM Add Comment

 

Pengertian

Landing page adalah halaman web tunggal yang dirancang khusus untuk tujuan tertentu, seperti mengumpulkan informasi kontak, mendorong penjualan, atau mengarahkan pengunjung ke tindakan spesifik. 

Landing page biasanya muncul setelah seseorang mengklik sebuah link dari sosial media, google ads, dan link link eksternal lain nya.

Tujuan Landing Page

Tujuan nya adalah seputar marketing atau pemasaran, beberapa penerapan landing page yang sering ditemui diantaranya:

  • Memperkenalkan sebuah produk
  • Mengumpulkan email subscribers
  • Menginformasikan promo spesial dan banyak lain nya.

Karakteristik Landing Page

  • Single Page: Hanya satu halaman dengan fokus utama.
  • Fokus pada CTA (Call to Action): Misalnya "Daftar Sekarang", "Beli Sekarang", "Download Gratis".
  • Minim Navigasi: Agar pengunjung tidak terdistraksi.
  • Desain Menarik & Persuasif: Menggunakan visual, testimoni, dan copywriting yang kuat.
  • Formulir / Tombol Aksi: Biasanya untuk pendaftaran, pembelian, atau pengumpulan data.

Jenis Landing Page

Lead Generation Landing Page
Mengumpulkan data pengunjung (email, nomor telepon, dll).
Contoh: Halaman pendaftaran webinar.

Click-Through Landing Page
Menjembatani sebelum pengunjung diarahkan ke halaman lain.
Contoh: Halaman penjelasan produk sebelum masuk ke checkout.

Sales Landing Page
Fokus menjual produk/jasa dengan CTA langsung beli.
Contoh: Halaman promosi produk digital.

Elemen Landing Page

Agar tidak terjebak dalam kesalahan tersebut, ada 8 elemen penting yang harus ada di landing page Anda. Dengan memahami elemen-elemen ini, Anda akan lebih mudah menarik perhatian pengunjung dan meyakinkan mereka bahwa produk atau jasa Anda adalah solusi terbaik yang mereka butuhkan.

Struktur Elemen Landing Page

1. Header / Hero Section

  • Logo kecil (opsional)

  • Judul utama (headline) yang menarik perhatian

  • Subjudul yang menjelaskan manfaat/penawaran

  • Tombol Call to Action (CTA) → “Daftar Sekarang”, “Beli Sekarang”, “Mulai Gratis”

  • Gambar/ilustrasi/hero image

2. Benefit Section

  • Judul singkat: “Mengapa Memilih Kami?”

  • 3–4 poin keunggulan/fitur utama

  • Bisa menggunakan ikon untuk memperjelas

3. Social Proof / Testimoni

  • Testimoni pengguna

  • Logo perusahaan klien / partner

  • Rating / review

4. Detail Produk / Penjelasan Layanan

  • Deskripsi singkat tentang produk/jasa

  • Gambar atau ilustrasi produk

  • Bisa ditambahkan video demo

5. Offer / Promo (opsional)

  • Penawaran khusus (diskon, bonus, limited time offer)

  • CTA kedua: “Ambil Penawaran Ini”

6. Formulir / Lead Capture

  • Form singkat (nama, email, nomor HP)

  • Tombol submit (misalnya: “Dapatkan Akses”)

7. FAQ (Frequently Asked Questions)

  • 3–5 pertanyaan yang sering ditanyakan calon pengguna

  • Jawaban singkat yang meyakinkan

8. Footer

  • Kontak singkat (email, telepon)

  • Link media sosial

  • Hak cipta ©

Kategori Website

  1. Website Perusahaan (Company Profile)
    Menampilkan informasi tentang profil perusahaan, visi misi, produk/jasa, portofolio, hingga kontak.
    → Contoh: Website resmi perusahaan atau instansi.

  2. E-Commerce / Online Store
    Website untuk menjual produk/jasa secara online lengkap dengan katalog, keranjang belanja, dan pembayaran.
    → Contoh: Tokopedia, Shopee.

  3. Portal Berita / Media Online
    Berisi artikel berita, opini, atau informasi terkini.
    → Contoh: Detik, Kompas.

  4. Blog / Personal Website
    Website berisi tulisan pribadi, opini, atau artikel tematik.
    → Contoh: Blog teknologi, blog traveling.

  5. Forum / Komunitas Online
    Tempat diskusi dan interaksi antar pengguna.
    → Contoh: Kaskus, Reddit.

  6. Landing Page
    Website yang  sering dipakai untuk keperluan pemasaran.

Referensi

Latihan

Membuat Landing Page Objek Wisata di Surabaya
Membuat Form Pengunjung, Menampilkan tabel pengunjung.

Monitoring Kelas


Absensi




Subscribe to: Posts (Atom)