DFD LV0 peminajamn barang dengan login

 

DFD (Data Flow Diagram) penjelasan definisi&contoh

 DFD

Data Flow Diagram (DFD) adalah alat visual untuk memodelkan aliran data di dalam suatu sistem—bagaimana data masuk, diproses, disimpan, dan keluar. Berikut penjelasan elemen-elemen dan level-level DFD, serta tips agar tidak bingung saat menggunakan Visual Paradigm:

---

1. Elemen-elemen Dasar DFD

1. 

2. External Entity (Sumber/Tujuan Data)
   – Bentuk: kotak persegi
   – Menunjukkan aktor di luar sistem: pengguna, lembaga, sistem lain
   – Contoh: “Pelanggan”, “Bank”, “Sistem Pembayaran”

3. Process (Proses)
   – Bentuk: lingkaran atau persegi berbibir melengkung
   – Menggambarkan transformasi data (input → output)
   – Beri nomor dan nama jelas, misalnya 1.0 Proses Pemesanan

4. Data Store (Tempat Penyimpanan Data)
   – Bentuk: dua garis sejajar (atau persegi terbuka di Visual Paradigm)
   – Menunjukkan basis data atau file
   – Contoh: D1: Data Pelanggan, D2: Data Produk

5. Data Flow (Aliran Data)
   – Bentuk: panah berarah
   – Menunjukkan perpindahan data antar-elemen
   – Label panah harus jelas, misal “Informasi Pesanan”, “Struk Pembayaran”

---

2. Level-Level DFD

1. Context Diagram (Level 0)
   – Hanya satu proses utama (digambarkan sebagai lingkaran tunggal)
   – Menunjukkan boundary sistem: semua external entity dan alirannya ke/dari sistem
   – Memberi gambaran umum tanpa rincian

   [Pelanggan] → (Sistem Pemesanan) → [Penyedia Logistik]
   

2. DFD Level 1
   – Memecah proses utama menjadi beberapa sub-proses (biasanya 3–7)
   – Menampilkan data store dan aliran data internal
   – Contohnya, “1.0 Terima Pesanan”, “2.0 Verifikasi Pembayaran”, “3.0 Persiapan Pengiriman”

3. DFD Level 2 (dan seterusnya)
   – Jika sub-proses di Level 1 masih kompleks, Anda bisa memecahnya lebih lanjut
   – Prinsipnya sama: tiap level memecah satu proses menjadi detail lebih rinci

---

3. Tips Menggunakan Visual Paradigm

1. Gunakan Notasi Baku
   – Pilih “Yourdon & Coad” atau “Gane & Sarson” sesuai kebutuhan, tapi konsisten
   – Visual Paradigm menyediakan palette elemen; pakai stensil (stencil) yang sesuai

2. Penomoran Proses
   – Di Context: proses 0
   – Level 1: 1.0, 2.0, …
   – Level 2: 1.1, 1.2, … untuk pecahan proses 1.0

3. Penamaan yang Jelas
   – Nama proses: kata kerja + objek (“Proses Pembayaran”, bukan hanya “Pembayaran”)
   – Nama data flow: substansial, misal “Data Faktur”, jangan cuma “Data”

4. Hubungan Antar Level
   – Pastikan semua input/output di Level 1 sesuai dengan aliran di Context
   – Setiap data store yang muncul di satu level harus muncul juga (atau dijelaskan) di level lain

5. Verifikasi Konsistensi
   – Data flow yang masuk suatu proses harus ditangani (tidak hilang)
   – Data store tidak boleh tanpa aliran data masuk atau keluar
   – Tidak ada aliran langsung antar external entity tanpa melewati proses

---

4. Contoh Sederhana

Context Diagram

[Pelanggan] ── “Pesanan” ─▶ (0.0 Sistem Order) ── “Konfirmasi” ─▶ [Pelanggan]

Level 1

[Pelanggan] ─▶ (1.0 Terima Pesanan) ─▶ D1: Data Pesanan
D1: Data Pesanan ─▶ (2.0 Verifikasi Stok) ─▶ D2: Stok Barang
(2.0) ─▶ (3.0 Proses Pembayaran) ─▶ D3: Data Pembayaran
(3.0) ─▶ [Bank] ─▶ (4.0 Konfirmasi Pembayaran) ─▶ [Pelanggan]

---

Dengan memahami tiap elemen dan level DFD secara bertahap, serta konsisten mengikuti notasi dan penomoran, Anda akan lebih mudah menggambar diagram yang jelas di Visual Paradigm.

penjelasan : 

 Perbedaan DFD & UML dan penjelasan mengapa memiliki Lv

DFD dan UML memang sama‐sama alat untuk memodelkan sistem, tetapi fokus dan cara kerjanya berbeda—makanya DFD punya “level” sedangkan UML tidak.

---

1. Fokus: Data vs. Struktur/Perilaku

• DFD (Data Flow Diagram)
  – Fokus pada aliran data masuk, diproses, disimpan, dan keluar dari sistem.
  – Tidak menggambarkan detail struktur data (atribut, tipe) atau urutan aksi, tapi hanya “data apa” bergerak “dari mana ke mana.”

• UML (Unified Modeling Language)
  – Kumpulan diagram:

  • Class Diagram → struktur kelas, atribut, relasi

  • Use Case Diagram → fungsi/fitur sistem dan aktor

  • Sequence/Activity Diagram → urutan aksi dan interaksi

  • … dan lain-lain
    – Tiap diagram UML menekankan sudut pandang yang berbeda (statik vs. dinamik).

---

2. Mengapa DFD Punya Level?

1. Level 0 (Context Diagram)
   – Skema awal atau “peta besar” sistem: satu proses tunggal (biasanya diberi label 0) berinteraksi dengan entitas luar.
   – Tujuannya: tunjukkan boundary sistem—apa yang masuk dan keluar—tanpa detail internal.

2. Level 1
   – Pecahan dari proses tunggal di Level 0 menjadi beberapa sub-proses.
   – Menambahkan data store dan detail aliran data internal.
   – Membantu memahami bagaimana sistem melakukan transformasi data secara garis besar.

3. Level 2, 3, …
   – Jika sub-proses di Level 1 masih kompleks, Anda bisa uraikan lagi menjadi Level 2, 3, dan seterusnya.
   – Prinsipnya: dekomposisi bertahap, dari gambaran umum ke detail spesifik.

Analogi:
Bayangkan Anda punya peta rute perjalanan:

• Level 0 seperti peta dunia—hanya garis besar (benua ke benua).

• Level 1 seperti peta negara—tampil provinsi dan jalan utama.

• Level 2 seperti peta kota—tampil jalan kecil, gang, dan landmark.

Dengan cara ini, Anda bisa memulai dari gambaran besar dulu (Level 0), lalu “zoom in” ke detail yang Anda butuhkan (Level 1, 2, dst.). Ini memudahkan tim untuk fokus pada level detail yang relevan tanpa langsung tenggelam di kompleksitas penuh sistem.

---

3. Ringkasan Perbedaan dan Fungsi Level

Aspek	DFD	UML
Fokus	Aliran data	Struktur dan/atau perilaku
Notasi utama	Entitas, Proses, Data Store, Data Flow	Berbagai diagram (Class, Use Case, Sequence, dll.)
Level/detail	Terstruktur: Context → Level 1 → …	Tidak berjenjang, tapi tiap diagram punya tujuan sendiri
Kegunaan tipikal	Analisis kebutuhan aliran data	Desain detail sistem (kode, interaksi)

Dengan memahami perbedaan fokus ini—DFD untuk bagaimana data mengalir dan UML untuk struktur atau urutan aksi—serta alasan dekomposi bertingkat pada DFD, semoga sekarang konsep “level” menjadi lebih jelas!

contoh : 

gambar sumber : https://arna.lecturer.pens.ac.id/Modul_RPL_S2/03%20Data%20Flow%20Diagram.pdf

sequence diagram peminjaman barang dengan login

 

sequence diagram peminjaman barang TANPA LOGIN

BERDASARKAN USE CASE DAN ACTIVITY DIAGRAM

Sequence Diagram (DIY), Perpus Online

Tentang Sequence Diagram

 Sequence Diagram

Sequence Diagram adalah salah satu jenis diagram dalam UML (Unified Modeling Language) yang memodelkan interaksi antar objek dalam suatu sistem dari sudut waktu. Fokusnya pada “siapa” (lifeline objek/aktor) mengirim “apa” (pesan/metode) dan “kapan”. Cocok untuk menggambarkan skenario use case—misalnya proses login, pemesanan, atau alur checkout.

Ciri-ciri utama

• Lifeline: garis vertikal yang merepresentasikan objek atau aktor sepanjang waktu.

• Activation bar: kotak tipis di atas lifeline yang menandai periode objek sedang aktif menjalankan proses.

• Messages: panah horizontal (synchronous, asynchronous, return) menunjukkan panggilan metode atau balasan.

• 
  
  

1. User mengisi form dan memanggil enterCred().

2. LoginPage meneruskan ke AuthService lewat validate().

3. AuthService men‐query Database untuk mencocokkan data.

4. Database mengembalikan hasil, AuthService lalu memberi tahu LoginPage apakah login berhasil atau tidak.

5. LoginPage menampilkan hasil ke User.

Diagram di atas cukup padat dan mudah diikuti, karena setiap langkah dijalankan berurutan sesuai panah—persis sesuai tujuan Sequence Diagram.

LANJUTAN PERPUS ONLINE (Activity Diagram)

 

koreksi jika salah.

laman peminjaman barang use case & activity diagram

 

ExternalCSS

 3.ExternalCSS

html :

<!DOCTYPE html>

<html lang="id">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Contoh External CSS</title>

    <link rel="stylesheet" href="styles.css"> <!-- Menghubungkan file CSS eksternal -->

</head>

<body>

    <h1>3.Pengertian External CSS</h1>

    <h2>Apa itu External CSS?</h2>

    <p>External CSS adalah metode penulisan CSS yang diletakkan di dalam file terpisah dengan ekstensi .css. File CSS ini kemudian dihubungkan ke dokumen HTML menggunakan tag <code>&lt;link&gt;</code>. Gaya yang ditentukan di sini dapat digunakan di beberapa halaman.</p>

   

    <h2>Keuntungan External CSS</h2>

    <p>1. Memudahkan pengelolaan gaya untuk banyak halaman.</p>

    <p>2. Mengurangi ukuran file HTML, sehingga lebih cepat dimuat.</p>

    <p>3. Memungkinkan penggunaan kembali gaya di berbagai halaman.</p>

   

    <p class="external">Ini adalah contoh teks dengan External CSS.</p>

</body>

</html>

style.css :

/* styles.css */

/* Gaya untuk seluruh halaman */

body {

    font-family: Arial, sans-serif;

    background-color: #d0baa4;

    padding: 20px;

}

/* Gaya untuk elemen h1 */

h1 {

    color: rgb(81, 144, 253);

}

/* Gaya untuk elemen h2 */

h2 {

    color: darkgreen;

}

/* Gaya untuk elemen p */

p {

    color: black;

    line-height: 1.6;

}

/* Gaya untuk elemen dengan kelas external */

.external {

    color: red;

    font-weight: bold;

}

InlineCSS

 2.InlineCSS

<!DOCTYPE html>

<html lang="id">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Contoh Inline CSS</title>

</head>

<body style="font-family: Arial, sans-serif; background-color: #f4f4f4; padding: 20px;">

    <h1 style="color: blue;">2.Pengertian Inline CSS</h1>

    <h2 style="color: darkgreen;">Apa itu Inline CSS?</h2>

    <p style="color: black; line-height: 1.6;">Inline CSS adalah metode penulisan CSS yang diterapkan langsung pada elemen HTML menggunakan atribut <code>style</code>. Gaya yang ditentukan di sini hanya berlaku untuk elemen tersebut.</p>

   

    <h2 style="color: darkgreen;">Keuntungan Inline CSS</h2>

    <p style="color: black; line-height: 1.6;">1. Memungkinkan penyesuaian gaya yang cepat untuk elemen tertentu.</p>

    <p style="color: black; line-height: 1.6;">2. Tidak memerlukan file CSS terpisah.</p>

    <p style="color: black; line-height: 1.6;">3. Berguna untuk pengujian atau penyesuaian gaya sementara.</p>

   

    <p style="color: red; font-weight: bold;">Catatan: Penggunaan inline CSS sebaiknya dibatasi untuk situasi tertentu, karena dapat membuat kode HTML menjadi sulit dibaca dan dikelola.</p>

</body>

</html>

InternalCSS

 1. Internal CSS

<!DOCTYPE html>

<html lang="id">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Contoh Internal CSS</title>

    <style>

        /* Internal CSS */

        body {

            font-family: Arial, sans-serif;

            background-color: #f4f4f4;

            margin: 0;

            padding: 20px;

        }

        h1 {

            color: rgb(0, 123, 255);

        }

        h2 {

            color: darkgreen;

        }

        p {

            color: black;

            line-height: 1.4;

        }

    </style>

</head>

<body>

    <h1>1.Pengertian Internal CSS</h1>

    <h2>Apa itu Internal CSS?</h2>

    <p>Internal CSS adalah metode penulisan CSS yang diletakkan di dalam tag <code>&lt;style&gt;</code> di bagian <code>&lt;head&gt;</code> dari dokumen HTML. Gaya yang ditentukan di sini hanya berlaku untuk halaman tersebut.</p>

   

    <h2>Keuntungan Internal CSS</h2>

    <p>1. Memudahkan pengelolaan gaya untuk satu halaman.</p>

    <p>2. Tidak perlu membuat file CSS terpisah.</p>

    <p>3. Memungkinkan penggunaan gaya yang berbeda untuk setiap halaman.</p>

</body>

</html>

Form HTML

 <!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>formulir pendaftaran</title>

</head>

<body>

    <form action="contact.php" method="post">

        <fieldset>

        <legend>Formulir Pendaftaran</legend>

        <p></p>

           <h3>Biodata Siswa</h3>

            <label>Nama Lengkap </label>  

            <input type="text"  name="nama" placeholder="..." />

<p></p>        

             <label>Tempat Tanggal Lahir</label>  

            <input type="text"  name="nama" placeholder="..." />

<p></p>

             <label>Agama</label>  

            <input type="text"  name="nama" placeholder="..." />

<p></p>

             <label>Alamat</label>  

            <input type="text"  name="nama" placeholder="..." />

<p></p>

             <label>Nomor Telp/Hp</label>  

            <input type="number"  name="nama" placeholder="..." />

<P></P>          

             <label>Asal Sekolah :</label>  

            <input type="text"  name="nama" placeholder="..." />  

<p></p>    

             <label>Jenis Kelamin :</label>  

            <input type="radio"  name="Jenis_Kelamin" value="Laki-Laki" />

                 Laki-Laki

             <label>

            <label><input type="radio" name="Jenis_Kelamin" value="Perempuan" />

                 Perempuan

             </label>  

 

<p>

    <input type="submit" name="submit" value="Kumpulkan" />

    <input type="reset" name="reset" value="Hapus Total " />

</p>

</body>

</html>

Testing Method & Desain System (Mapel PPL - XI RPL 2)

1. Testing Method (Metode Pengujian)

Metode pengujian digunakan untuk memastikan sistem/aplikasi bekerja dengan benar sebelum digunakan oleh pengguna.

a. Blackbox Testing (Pengujian Kotak Hitam)

Pengertian:

• Menguji sistem berdasarkan input dan output tanpa melihat bagaimana proses di dalamnya bekerja.
• Fokus pada fungsi yang terlihat oleh pengguna.

Fungsi:

• Memastikan fitur berjalan sesuai harapan.
• Menguji apakah sistem merespons input dengan benar.

Contoh Sederhana:

• Memasukkan username dan password → jika benar bisa login, jika salah muncul pesan error.
• Menekan tombol "Kirim Pesan" → melihat apakah pesan benar-benar terkirim.

b. Whitebox Testing (Pengujian Kotak Putih)

Pengertian:

• Menguji sistem dengan melihat kode program di dalamnya.
• Fokus pada cara kerja sistem dan logika program.

Fungsi:

• Menganalisis kode untuk menemukan bug atau kesalahan logika.
• Memastikan sistem berjalan efisien dan aman.

Contoh Sederhana:

• Memeriksa apakah ada kesalahan perhitungan di dalam kode.
• Menguji apakah ada celah keamanan dalam proses login pengguna.

---

2. Desain Sistem

Desain sistem digunakan untuk menggambarkan bagaimana sistem bekerja sebelum dibuat.

a. UML (Use Case Diagram)

Pengertian:

• Diagram yang menunjukkan siapa saja yang menggunakan sistem dan apa saja yang bisa mereka lakukan.

Fungsi:

• Memudahkan tim memahami fitur sistem.
• Menjelaskan hubungan antara pengguna dan sistem.

Contoh Sederhana:

• Dalam aplikasi belanja online, "Pelanggan" bisa "Mencari Produk", "Menambahkan ke Keranjang", dan "Membayar".

b. DFD (Data Flow Diagram)

Pengertian:

• Diagram yang menggambarkan bagaimana data bergerak di dalam sistem.

Fungsi:

• Menunjukkan bagaimana informasi diproses dan mengalir dari satu bagian ke bagian lain.
• Berguna untuk merancang database atau sistem pemrosesan data.

Contoh Sederhana:

• Dalam sistem pemesanan makanan online, data dari "Pelanggan" dikirim ke "Restoran" lalu diteruskan ke "Kurir" untuk pengiriman.

---

Kesimpulan sederhana

• Blackbox Testing → Menguji sistem tanpa melihat kode (seperti pengguna).
• Whitebox Testing → Menguji sistem dengan melihat kode program.
• UML (Use Case Diagram) → Gambaran siapa yang bisa melakukan apa dalam sistem.
• DFD (Data Flow Diagram) → Gambaran bagaimana data mengalir dalam sistem.

 

USE CASE PERPUS ONLINE(Mapel : PPL - XI RPL 2)

Diatas adalah contoh use case diagram perpus online

berikut adalah fungsi fungsi dan pengertian simbol diatas :

 

Use Case (Oval)

• Simbol berbentuk oval yang merepresentasikan fungsi atau proses dalam sistem.
• Contoh: "meminjam buku", "cari buku".

Aktor (Stick Figure)

• Simbol manusia (stick figure) yang merepresentasikan pengguna atau sistem eksternal yang berinteraksi dengan sistem.
• Contoh: "pengunjung", "administrator", "pustakawan".

Include (<<include>>)

• Menunjukkan bahwa satu use case selalu menyertakan use case lain sebagai bagian dari eksekusinya. simpelnya <<include>> ini itu seperti hal wajib dilakukan
• Contoh: "meminjam buku" meng-include "daftar/login", artinya pengguna harus login terlebih dahulu sebelum meminjam buku.

Extend (<<extend>>)

• Menunjukkan bahwa suatu use case dapat diperluas dengan tambahan fungsi opsional yang terjadi dalam kondisi tertentu. dan ini itu seperti tidak wajib dilakukan
• Contoh: "membaca buku" bisa diperluas dengan "memberi rating/ulasan" jika pengguna memilih untuk memberikan ulasan.

Website yang saya gunakan untuk Membuat UseCase

https://online.visual-paradigm.com/

sekian, koreksi jika sy salah

Pembahasan terkait tentang PPL

 1. Apa itu PPL?

PPL (Pemrograman Perangkat Lunak):

PPL adalah istilah yang merujuk pada proses pengembangan perangkat lunak secara keseluruhan, termasuk penulisan kode, pengujian, dan pemeliharaan.

2. Apa itu SDLC?

SDLC (Software Development Life Cycle):

SDLC adalah proses yang digunakan untuk merencanakan, mengembangkan, menguji, dan memelihara perangkat lunak. Tahapan umum dalam SDLC meliputi:

• Analisis Kebutuhan: Mengidentifikasi apa yang dibutuhkan    oleh pengguna.

• Desain: Merancang arsitektur dan antarmuka sistem.

• Implementasi: Menulis kode program sesuai desain.

• Pengujian: Memastikan perangkat lunak berfungsi dengan benar.

• Pemeliharaan: Memperbaiki bug dan melakukan pembaruan setelah rilis.

3. Apa itu UML?

UML (Unified Modeling Language)

• UML adalah bahasa pemodelan visual yang digunakan untuk      merancang dan mendokumentasikan sistem perangkat lunak. UML membantu dalam memvisualisasikan desain sistem melalui berbagai jenis diagram, seperti diagram kelas, diagram aktivitas, dan diagram use case.

4. Use Case :

• Use case adalah komponen dalam UML yang menggambarkan interaksi antara pengguna (aktor) dengan sistem untuk mencapai tujuan tertentu. Diagram use case menunjukkan bagaimana sistem akan digunakan oleh aktor untuk menyelesaikan tugas atau mencapai tujuan.

5. Hubungan antara keempatnya:

• Dalam proses SDLC, khususnya pada tahap analisis kebutuhan dan desain, UML digunakan untuk memodelkan dan memvisualisasikan sistem yang akan dikembangkan.

• Use case adalah salah satu jenis diagram dalam UML yang membantu menggambarkan fungsionalitas sistem dari perspektif pengguna.

• PPL mencakup seluruh proses pengembangan perangkat lunak, termasuk penerapan desain yang dibuat menggunakan UML dalam kerangka kerja SDLC.

- Kesimpulan secara ringkas dan mudah dipahami :

SDLC menyediakan kerangka kerja untuk pengembangan perangkat lunak, PPL adalah proses implementasinya, UML adalah alat untuk memodelkan desain, dan use case membantu memahami interaksi antara pengguna dan sistem.

Presentasi Prototype Kelompok 4 PPL