• PEMROGRAMAN WEB DINAMIS

    Pengertian web dinamis adalah suatu web yang konten atau isinya dapat berubah-ubah setiap saat. Sebab dalam teknologi pembuatan web dinamis sudah dirancang semudah mungkin bagi pemakai atau user yang menggunakan web tersebut..

  • SIMULASI DAN KOMUNIKASI DIGITAL

    Suatu proses peniruan dalam bentuk visual yang dideskripsikan menyerupai kata, gambar dan grafis..

  • SISTEM KOMPUTER

    Sistem komputer adalah suatu jaringan elektronik yang terdiri dari perangkat lunak dan perangkat keras yang melakukan tugas tertentu (menerima input, memproses input, menyimpan perintah-perintah, dan menyediakan output dalam bentuk informasi). Selain itu dapat pula diartikan sebagai elemen-elemen yang terkait untuk menjalankan suatu aktivitas dengan menggunakan komputer..

  • DASAR DESAIN GRAPIS

    Banyak yang berpikiran kalau desain yang baik adalah yang membutuhkan jam kerja yang banyak, membutuhkan skill tinggi dan aplikasi yang mahal. Ya, memang, tapi sebenarnya desain yang baik adalah desain yang sederhana, yang membuat setiap orang yang melihatnya mudah menangkap maksud dari sebuah bentuk visual tersebut..

  • BASIS DATA

    Pangkalan data atau basis data (bahasa Inggris: database) adalah kumpulan informasi yang disimpan di dalam komputer secara sistematik sehingga dapat diperiksa menggunakan suatu program komputer untuk memperoleh informasi dari basis data tersebut. Perangkat lunak yang digunakan untuk mengelola dan memanggil kueri (query) basis data disebut sistem manajemen basis data (database management system, DBMS). Sistem basis data dipelajari dalam ilmu informasi.

Proses Terjadinya Transaksi Jual Beli: Materi Dasar Pemasaran Kelas X SMK

Proses Terjadinya Transaksi Jual Beli: Materi Dasar Pemasaran Kelas X SMK


Dalam kehidupan sehari-hari, kita hampir selalu melakukan transaksi jual beli. Saat membeli makanan di kantin, membeli alat tulis, membayar ongkos transportasi, hingga belanja online di marketplace, semuanya termasuk transaksi jual beli. Karena itu, memahami proses transaksi sangat penting bagi siswa jurusan Pemasaran.

Materi ini menjadi dasar untuk mempelajari dunia bisnis, pelayanan pelanggan, penjualan, hingga kewirausahaan.


Apa Itu Transaksi Jual Beli?

Transaksi jual beli adalah kegiatan pertukaran barang atau jasa antara penjual dan pembeli yang disertai kesepakatan harga.

Artinya:

  • Penjual menyediakan barang/jasa

  • Pembeli membutuhkan barang/jasa

  • Terjadi kesepakatan

  • Pembeli membayar

  • Penjual menyerahkan barang

Jika salah satu unsur tersebut tidak ada, maka transaksi belum sempurna.


Contoh Transaksi Jual Beli di Kehidupan Siswa

Agar mudah dipahami, berikut contoh yang dekat dengan kehidupan siswa:

Di Sekolah

  • Membeli es teh di kantin

  • Membeli pulpen di koperasi

  • Membeli makanan saat istirahat

Di Rumah / Lingkungan

  • Membeli gas elpiji

  • Membeli sembako di warung

  • Membeli pulsa

Online

  • Checkout barang di Shopee

  • Membeli voucher game

  • Membeli pakaian melalui TikTok Shop


Unsur-Unsur Transaksi Jual Beli

Agar transaksi terjadi, dibutuhkan beberapa unsur berikut:

1. Penjual

Pihak yang menawarkan barang atau jasa.

2. Pembeli

Pihak yang membutuhkan dan membeli barang/jasa.

3. Barang/Jasa

Objek yang diperjualbelikan.

4. Harga

Nilai uang yang disepakati.

5. Kesepakatan

Persetujuan antara penjual dan pembeli.

6. Pembayaran

Penyerahan uang sesuai harga.

7. Penyerahan Barang

Barang diberikan kepada pembeli.


Proses Terjadinya Transaksi Jual Beli

Berikut urutan proses transaksi:

1. Muncul Kebutuhan atau Keinginan

Pembeli merasa membutuhkan sesuatu.

Contoh:

  • Lapar → ingin beli makanan

  • Pulpen habis → ingin beli alat tulis

2. Mencari Produk

Pembeli mencari barang yang dibutuhkan.

Contoh:

  • Pergi ke kantin

  • Membuka marketplace

3. Penawaran dari Penjual

Penjual menawarkan barang, menjelaskan kualitas, harga, promo, atau manfaat.

4. Negosiasi / Tanya Jawab

Pembeli bertanya harga, stok, warna, ukuran, atau menawar harga.

5. Kesepakatan

Jika cocok, pembeli setuju membeli.

6. Pembayaran

Pembayaran dapat dilakukan:

  • Tunai

  • Transfer

  • QRIS

  • COD

7. Penyerahan Barang

Barang diterima pembeli.

8. Pelayanan Setelah Penjualan

Contoh:

  • Garansi

  • Tukar barang

  • Respon chat pelanggan


Contoh Simulasi Transaksi

Pembeli:
“Saya mau beli pulpen.”

Penjual:
“Harganya Rp5.000.”

Pembeli:
“Kalau dua jadi Rp8.000 boleh?”

Penjual:
“Boleh.”

Pembeli membayar Rp8.000 dan menerima dua pulpen.

Itulah transaksi jual beli.


Mengapa Pelayanan Penting?

Dalam pemasaran, pembeli tidak hanya melihat harga, tetapi juga pelayanan.

Contoh pelayanan baik:

  • Ramah

  • Cepat melayani

  • Jujur

  • Menjawab pertanyaan dengan sopan

  • Memberi solusi

Jika pelayanan baik, pelanggan bisa datang lagi.


Kesalahan yang Harus Dihindari Saat Transaksi

  • Tidak jujur soal harga

  • Barang tidak sesuai

  • Kasar kepada pelanggan

  • Salah menghitung uang

  • Lambat melayani


Manfaat Belajar Materi Ini untuk Siswa SMK

Dengan memahami transaksi jual beli, siswa akan belajar:

Soft Skills

  • Komunikasi

  • Percaya diri

  • Kerja sama

  • Sikap ramah

Hard Skills

  • Penjualan

  • Pelayanan pelanggan

  • Menghitung transaksi

  • Membuat catatan penjualan

Jiwa Wirausaha

  • Berani jualan

  • Melihat peluang usaha

  • Memahami kebutuhan konsumen


Praktik di Kelas

Guru dapat membuat simulasi mini market:

  • Ada penjual

  • Ada pembeli

  • Ada kasir

  • Ada daftar harga

  • Ada pencatatan transaksi

Dengan praktik langsung, siswa akan lebih paham dibanding hanya membaca teori.

Contoh struk transaksi:


Kesimpulan

Transaksi jual beli adalah kegiatan yang sangat dekat dengan kehidupan kita. Prosesnya dimulai dari kebutuhan, pencarian barang, penawaran, kesepakatan, pembayaran, hingga penyerahan barang.

Bagi siswa jurusan Pemasaran, materi ini penting karena menjadi dasar untuk belajar penjualan, pelayanan pelanggan, dan usaha mandiri.

Siapa yang paham cara melayani pelanggan dengan baik, punya peluang sukses lebih besar di dunia usaha.


Tugas Siswa

  1. Sebutkan 3 contoh transaksi yang kamu lakukan minggu ini.

  2. Jelaskan proses salah satu transaksi tersebut.

  3. Menurutmu, lebih penting harga murah atau pelayanan ramah? Jelaskan.

Share:

🚀 Praktikum Flutter: Langkah Sederhana Membangun Aplikasi Jadwal Pelajaran

 

Dalam pembelajaran Pemrograman Mobile, peserta didik diajak untuk tidak hanya memahami teori, tetapi juga langsung praktik membuat aplikasi nyata. Salah satu kegiatan yang dilakukan adalah praktikum pembuatan Aplikasi Jadwal Pelajaran berbasis Flutter dengan konsep CRUD (Create, Read, Update, Delete) dan penggunaan setState().

Agar proses pembelajaran berjalan efektif dan siswa dapat mengikuti dengan mudah, kegiatan praktikum disusun dalam tahapan sederhana dan terstruktur.


🟢 Tahap 1 – Memahami Masalah

Siswa diajak untuk membaca studi kasus terkait kebutuhan aplikasi jadwal pelajaran di sekolah. Pada tahap ini, siswa menjawab pertanyaan pemantik untuk membangun pemahaman awal mengenai pentingnya aplikasi dalam kehidupan sehari-hari.


💻 Tahap 2 – Menjalankan Project

Peserta didik mulai membuat project Flutter, mengganti kode pada file utama, dan menjalankan aplikasi di emulator. Hasil tampilan awal kemudian didokumentasikan sebagai bukti praktik.


🔄 Tahap 3 – Menguji Fitur CRUD

Siswa melakukan uji coba fitur utama aplikasi, yaitu:

  • Menambahkan data jadwal
  • Mengedit data
  • Menghapus data

Melalui kegiatan ini, siswa memahami bagaimana aplikasi dapat berinteraksi dengan data serta melihat perubahan tampilan secara langsung.


🧠 Tahap 4 – Memahami Struktur Kode

Pada tahap ini, siswa menganalisis bagian-bagian penting dalam kode, seperti fungsi setState(), penggunaan ListView, serta fungsi untuk menambah dan menghapus data. Diskusi kelompok sangat dianjurkan untuk memperkuat pemahaman.


🎨 Tahap 5 – Pengembangan Aplikasi

Untuk meningkatkan kreativitas, siswa diberikan tantangan pengembangan dengan beberapa pilihan level:

  • Level dasar: menambahkan informasi hari dan jam pelajaran
  • Level menengah: memberikan variasi warna pada tampilan
  • Level lanjutan: menambahkan dialog konfirmasi saat menghapus data

🗣 Tahap 6 – Refleksi Pembelajaran

Sebagai penutup, siswa melakukan refleksi terhadap pengalaman belajar yang telah dilalui, termasuk tantangan yang dihadapi, pemahaman baru yang diperoleh, serta ide pengembangan aplikasi ke depan.


🎯 Penutup

Melalui tahapan yang sistematis dan berbasis praktik ini, diharapkan peserta didik mampu memahami konsep pemrograman mobile secara lebih mendalam, sekaligus mengembangkan keterampilan berpikir kritis dan kreatif.

Pembelajaran tidak hanya berfokus pada hasil akhir, tetapi juga pada proses mencoba, mengalami kesalahan, dan memperbaikinya. Karena sejatinya, dalam dunia pemrograman, keberanian untuk mencoba adalah kunci utama keberhasilan.

Share:

🧑‍💻 Praktikum Flutter: Aplikasi Jadwal Pelajaran Sederhana (CRUD + setState)

 

🧑‍💻 Praktikum Flutter: Aplikasi Jadwal Pelajaran Sederhana (CRUD + setState)

📅 14 April 2026
✍️ Oleh: Guru RPL


🎯 Tujuan Pembelajaran

Pada praktikum hari ini, siswa diharapkan mampu:

  • Memahami konsep dasar CRUD (Create, Read, Update, Delete)
  • Menggunakan setState() untuk memperbarui tampilan
  • Membuat aplikasi sederhana menggunakan Flutter
  • Melatih logika dan kreativitas dalam pengembangan aplikasi mobile

💻 Deskripsi Praktikum

Siswa akan membuat aplikasi Jadwal Pelajaran Sederhana dengan fitur:

  • ✅ Tambah data
  • ✅ Edit data
  • ✅ Hapus data
  • ✅ Menampilkan data menggunakan ListView
  • ✅ Input menggunakan dialog (AlertDialog)

Kode program telah disediakan sebagai dasar pembelajaran, dan siswa diperbolehkan untuk memodifikasi atau mencari referensi tambahan.


⏰ Alur Kegiatan Pembelajaran

🟢 1. Pembuka (08.45 – 09.00)

Guru memberikan arahan terkait:

  • Tujuan praktikum
  • Target yang harus dicapai
  • Gambaran hasil akhir aplikasi

🟡 2. Setup & Menjalankan Project (09.00 – 09.30)

Langkah-langkah:

  1. Membuat project baru:

    flutter create jadwal_app
  2. Mengganti file main.dart dengan kode yang telah diberikan
  3. Menjalankan aplikasi:

    flutter run

🎯 Target:
Aplikasi berhasil dijalankan dan menampilkan halaman awal.


🔵 3. Eksplorasi Fitur CRUD (09.45 – 11.00)

Siswa mencoba seluruh fitur:

  • Menambah data jadwal
  • Mengedit data
  • Menghapus data

🎯 Tujuan:
Memahami alur perubahan data dan penggunaan setState().


🟣 4. Pemahaman Kode (11.00 – 12.00)

Fokus pada bagian penting:

  • Fungsi tambahData()
  • Fungsi editData()
  • Fungsi hapusData()
  • Penggunaan ListView.builder
  • Penggunaan AlertDialog

🔴 5. Modifikasi Aplikasi (12.30 – 14.00)

Siswa diminta mengembangkan aplikasi dengan pilihan berikut:

Level Dasar:

  • Menambahkan format hari dan jam
    Contoh: Senin - Matematika - 08:00

Level Menengah:

  • Menambahkan warna berbeda pada setiap item

Level Lanjutan (Opsional):

  • Menambahkan konfirmasi sebelum menghapus data

📸 6. Pengumpulan Hasil (14.00 – 14.45)

Siswa mengumpulkan:

  • Screenshot tampilan utama
  • Screenshot saat tambah data
  • Screenshot saat edit data

Upload ke Google Drive yang telah disediakan.


🟢 7. Penutup & Refleksi (14.45 – 15.00)

Siswa melakukan refleksi:

  • Apa fungsi setState()?
  • Apa kendala yang dialami?
  • Apakah semua fitur CRUD berhasil?

🧪 Tugas Praktikum

Instruksi untuk siswa:

  1. Jalankan aplikasi yang diberikan
  2. Pastikan fitur berikut berjalan:
    • Tambah jadwal
    • Edit jadwal
    • Hapus jadwal
  3. Lakukan modifikasi:
    • Tambahkan hari & jam
    • Percantik tampilan
  4. Screenshot hasil
  5. Upload ke Google Drive

💡 Catatan

Kode yang digunakan pada praktikum ini:

  • Sederhana dan mudah dipahami
  • Cocok untuk pemula
  • Mudah dikembangkan ke tahap lanjutan

🚀 Rencana Pengembangan Selanjutnya

Sebagai tindak lanjut, siswa akan belajar:

  • Menggunakan database lokal (SQLite / Hive)
  • State management menggunakan Provider
  • Struktur project yang lebih rapi (clean architecture)

📌 Penutup

Melalui praktikum ini, siswa diharapkan tidak hanya memahami konsep dasar Flutter, tetapi juga mampu mengembangkan aplikasi sederhana secara mandiri sebagai bekal menuju pengembangan aplikasi yang lebih kompleks.


💻 Kode Program Lengkap Flutter

🎯 Aplikasi: Jadwal Pelajaran Sederhana (CRUD)

Berikut kode full yang bisa langsung digunakan:

import 'package:flutter/material.dart';

void main() {
runApp(MyApp());
}

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: JadwalPage(),
);
}
}

class JadwalPage extends StatefulWidget {
@override
_JadwalPageState createState() => _JadwalPageState();
}

class _JadwalPageState extends State<JadwalPage> {
List<String> jadwalList = [];

void tambahData(String data) {
setState(() {
jadwalList.add(data);
});
}

void editData(int index, String dataBaru) {
setState(() {
jadwalList[index] = dataBaru;
});
}

void hapusData(int index) {
setState(() {
jadwalList.removeAt(index);
});
}

void tampilDialog({String? dataLama, int? index}) {
TextEditingController controller =
TextEditingController(text: dataLama ?? "");

showDialog(
context: context,
builder: (context) {
return AlertDialog(
title: Text(dataLama == null ? "Tambah Jadwal" : "Edit Jadwal"),
content: TextField(
controller: controller,
decoration: InputDecoration(
hintText: "Contoh: Senin - Matematika - 08:00",
),
),
actions: [
TextButton(
onPressed: () => Navigator.pop(context),
child: Text("Batal"),
),
ElevatedButton(
onPressed: () {
if (controller.text.isNotEmpty) {
if (dataLama == null) {
tambahData(controller.text);
} else {
editData(index!, controller.text);
}
}
Navigator.pop(context);
},
child: Text("Simpan"),
),
],
);
},
);
}

void konfirmasiHapus(int index) {
showDialog(
context: context,
builder: (context) {
return AlertDialog(
title: Text("Konfirmasi"),
content: Text("Yakin ingin menghapus data ini?"),
actions: [
TextButton(
onPressed: () => Navigator.pop(context),
child: Text("Batal"),
),
ElevatedButton(
onPressed: () {
hapusData(index);
Navigator.pop(context);
},
child: Text("Hapus"),
),
],
);
},
);
}

Color getWarnaItem(String data) {
if (data.toLowerCase().contains("senin")) return Colors.blue.shade100;
if (data.toLowerCase().contains("selasa")) return Colors.green.shade100;
if (data.toLowerCase().contains("rabu")) return Colors.orange.shade100;
if (data.toLowerCase().contains("kamis")) return Colors.purple.shade100;
if (data.toLowerCase().contains("jumat")) return Colors.red.shade100;
return Colors.grey.shade200;
}

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Jadwal Pelajaran"),
centerTitle: true,
),
body: jadwalList.isEmpty
? Center(child: Text("Belum ada jadwal"))
: ListView.builder(
itemCount: jadwalList.length,
itemBuilder: (context, index) {
return Card(
color: getWarnaItem(jadwalList[index]),
margin: EdgeInsets.all(8),
child: ListTile(
title: Text(
jadwalList[index],
style: TextStyle(fontWeight: FontWeight.bold),
),
trailing: Row(
mainAxisSize: MainAxisSize.min,
children: [
IconButton(
icon: Icon(Icons.edit, color: Colors.blue),
onPressed: () => tampilDialog(
dataLama: jadwalList[index],
index: index,
),
),
IconButton(
icon: Icon(Icons.delete, color: Colors.red),
onPressed: () => konfirmasiHapus(index),
),
],
),
),
);
},
),
floatingActionButton: FloatingActionButton(
onPressed: () => tampilDialog(),
child: Icon(Icons.add),
),
);
}
}

🌐 Alternatif Praktikum Tanpa Install (Online)

Siswa bisa langsung coding tanpa install Flutter 👇

🟢 Rekomendasi:

Share:

Praktikum Flutter : 🎯 Aplikasi: Jadwal Pelajaran Sederhana

Berikut contoh kode praktikum Flutter yang sederhana
(Boleh menggunakan code program ini, boleh juga cari referensi lain asal tentang 
Fitur: CRUD sederhana (Tambah, Edit, Hapus) + setState )

👉 Cocok untuk pembelajaran mandiri hari ini 



💻 📱 KODE PRAKTIKUM FLUTTER

🎯 Aplikasi: Jadwal Pelajaran Sederhana

✅ Sudah include:

  • Tambah data

  • Edit data

  • Hapus data

  • ListView

  • Dialog input


📌 LANGKAH AWAL

  1. Buat project baru:

flutter create jadwal_app
  1. Ganti isi file lib/main.dart dengan kode berikut


🧩 KODE LENGKAP

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: JadwalPage(),
    );
  }
}

class JadwalPage extends StatefulWidget {
  @override
  _JadwalPageState createState() => _JadwalPageState();
}

class _JadwalPageState extends State<JadwalPage> {
  List<String> jadwalList = [];

  void tambahData(String data) {
    setState(() {
      jadwalList.add(data);
    });
  }

  void editData(int index, String dataBaru) {
    setState(() {
      jadwalList[index] = dataBaru;
    });
  }

  void hapusData(int index) {
    setState(() {
      jadwalList.removeAt(index);
    });
  }

  void tampilDialog({String? dataLama, int? index}) {
    TextEditingController controller =
        TextEditingController(text: dataLama ?? "");

    showDialog(
      context: context,
      builder: (context) {
        return AlertDialog(
          title: Text(dataLama == null ? "Tambah Jadwal" : "Edit Jadwal"),
          content: TextField(
            controller: controller,
            decoration: InputDecoration(
              hintText: "Contoh: Matematika - Senin",
            ),
          ),
          actions: [
            TextButton(
              onPressed: () => Navigator.pop(context),
              child: Text("Batal"),
            ),
            ElevatedButton(
              onPressed: () {
                if (controller.text.isNotEmpty) {
                  if (dataLama == null) {
                    tambahData(controller.text);
                  } else {
                    editData(index!, controller.text);
                  }
                }
                Navigator.pop(context);
              },
              child: Text("Simpan"),
            ),
          ],
        );
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Jadwal Pelajaran"),
        centerTitle: true,
      ),
      body: jadwalList.isEmpty
          ? Center(child: Text("Belum ada jadwal"))
          : ListView.builder(
              itemCount: jadwalList.length,
              itemBuilder: (context, index) {
                return Card(
                  margin: EdgeInsets.all(8),
                  child: ListTile(
                    title: Text(jadwalList[index]),
                    trailing: Row(
                      mainAxisSize: MainAxisSize.min,
                      children: [
                        IconButton(
                          icon: Icon(Icons.edit, color: Colors.blue),
                          onPressed: () => tampilDialog(
                            dataLama: jadwalList[index],
                            index: index,
                          ),
                        ),
                        IconButton(
                          icon: Icon(Icons.delete, color: Colors.red),
                          onPressed: () => hapusData(index),
                        ),
                      ],
                    ),
                  ),
                );
              },
            ),
      floatingActionButton: FloatingActionButton(
        onPressed: () => tampilDialog(),
        child: Icon(Icons.add),
      ),
    );
  }
}

🎯 TARGET PRAKTIKUM SISWA

Setelah pakai kode ini, siswa diminta:

✅ Level Wajib

  • Jalankan aplikasi

  • Tambah data

  • Edit data

  • Hapus data


🚀 Level Pengembangan (Opsional)

Suruh siswa modifikasi:

  1. Tambah hari & jam

    Senin - Matematika - 08:00
    
  2. Tambah warna berbeda tiap item

  3. Tambah konfirmasi sebelum hapus


🧪 TUGAS PRAKTIKUM 

👉 Kirim ke siswa:

Tugas Praktikum Flutter:

  1. Jalankan aplikasi yang diberikan

  2. Pastikan fitur berikut berjalan:

    • Tambah jadwal

    • Edit jadwal

    • Hapus jadwal

  3. Modifikasi:

    • Tambahkan keterangan hari & jam

    • Percantik tampilan

  4. Screenshot hasil:

    • Tampilan utama

    • Saat tambah data

    • Saat edit

Upload ke Google Drive


💡 CATATAN 

Kode ini sengaja:

  • Tidak terlalu kompleks ✅

  • Mudah dimodifikasi ✅

  • Minim error untuk pemula ✅


🚀 Rencana Level Berikutnya

Saran Pengembangan:

✅ Versi pakai database (Hive / SQLite)
✅ Versi pakai Provider (lebih profesional)
✅ Versi sudah dipisah folder (clean code)

Salam, Redaksi.

Share:

Blogger Tricks

Blogger Themes