Rabu, 19 Februari 2025

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;
}
di Tidak ada komentar:

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>
di Tidak ada komentar:

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>

di Tidak ada komentar:

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>
di Tidak ada komentar:

Kamis, 06 Februari 2025

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.

 

di Tidak ada komentar:

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













    di Tidak ada komentar:

    Minggu, 02 Februari 2025

    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.

    di Tidak ada komentar:
    Langganan: Komentar (Atom)