RINGKASAN CP PPLG

        Program Pengembangan Perangkat Lunak dan GIM atau sebelumnya keahlian Rekayasa    Perangkat Lunak (RPL) adalah salah satu kompetensi keahlian dalam bidang Teknologi Komputer dan Informatika yang secara khusus mempelajari tentang pemrograman komputer.

Seorang pelajar harus bisa mempelajari berbagai berbagai wawasan karena pada intinya kita sudah memasuki kedunia kerja dan juga kewirausahawan dengan melalkukan cara passion atau keinginan kita lakukan passion/gairah agar kita dapat memotivasikan diri kita sendiri dalam merencanakan serta melaksanakan aktivitas belajar.     Untuk proses bisnis pengembangan perangkat lunak dan gim (PPLG) adalah serangkaian langkah terstruktur yang digunakan untuk menghasilkan perangkat lunak atau gim yang berkualitas tinggi. Proses ini melibatkan berbagai aktivitas, mulai dari ide awal hingga peluncuran dan pemeliharaan produk.

pada intinya penggunaan AI dan Machine Learning: Semakin banyak perusahaan yang memanfaatkan kecerdasan buatan dan machine learning untuk meningkatkan produk dan layanan mereka.

    Keamanan Informasi: Permintaan akan spesialis keamanan informasi terus meningkat dengan ancaman keamanan cyber yang semakin kompleks.

    Teknologi Cloud dan Edge Computing: Solusi cloud digunakan lebih banyak untuk menyimpan dan mengelola data, sementara edge computing semakin populer untuk pemrosesan data yang cepat.

    Pertumbuhan eSports: Industri gim, khususnya eSports, berkembang pesat, menciptakan peluang baru dalam manajemen acara, pemasaran, dan produksi konten.

    Realitas Virtual (VR) dan Augmented Reality (AR): Penggunaan VR dan AR semakin meluas dalam pengembangan gim dan aplikasi perangkat lunak lainnya.

    Remote Work: Adopsi kerja jarak jauh meningkat pesat, didorong oleh pandemi COVID-19, dengan banyak perusahaan mencari profesional yang dapat bekerja secara efektif dari jarak jauh.

    Kehadiran Blockchain: Teknologi blockchain menjadi penting dalam berbagai industri, termasuk perangkat lunak, dengan pengembangan aplikasi desentralisasi dan smart contracts.

Perkembangan dunia kerja bidang perangkat lunak dan gim

    Perkembangan Teknologi:Adopsi Industri 4.0 dalam pengembangan perangkat lunak dan gim.
    
    Peningkatan penggunaan kecerdasan buatan, machine learning, VR, dan AR.
Isu-Isu Penting:Dampak Gim: Baik positif (hiburan, edukasi) maupun negatif (kesehatan mental, ketergantungan).

    IoT: Peluang baru tetapi juga tantangan keamanan dan privasi data.
Cloud Computing: Skalabilitas dan aksesibilitas yang lebih baik namun meningkatkan risiko keamanan.

    Keamanan Informasi: Perlindungan data penting mengingat serangan cyber yang meningkat.

    Big Data: Wawasan berharga tetapi memunculkan masalah privasi dan etika.
Hak Atas Kekayaan Intelektual (HAKI): Perlindungan hukum diperlukan untuk mendorong inovasi dan melindungi kekayaan intelektual.

Profesi dan kewirausahan (job profile dan technopreneurship) serta peluang usaha di bidang industri perangkat lunak dan gim

Jenis Profesi:Pengembang Perangkat Lunak: Merancang, mengembangkan, dan menguji perangkat lunak.

Desainer Grafis: Bertanggung jawab atas elemen visual dalam permainan.
Insinyur Kualitas Perangkat Lunak: Menjamin kualitas produk perangkat lunak melalui pengujian.

Manajer Produk: Mengelola siklus hidup produk perangkat lunak.
Analis Data: Mengumpulkan dan menganalisis data untuk memberikan wawasan.
Ahli Keamanan Cyber: Bertanggung jawab atas keamanan sistem perangkat lunak dan data.

Kewirausahaan dan Personal Branding:Technopreneurship: Menciptakan bisnis berbasis teknologi, termasuk perangkat lunak dan gim.
Personal Branding: Membangun citra dan reputasi profesional yang kuat.

Peluang Usaha:Pengembangan Aplikasi Mobile: Menciptakan aplikasi untuk platform mobile.
Pengembangan Gim Indie: Membuat gim independen dengan fokus pada kreativitas.
Layanan Konsultasi Perangkat Lunak: Menyediakan layanan konsultasi untuk pengembangan perangkat lunak.

Platform E-learning: Membangun platform e-learning untuk pendidikan online.
Studio Animasi dan Efek Visual: Menciptakan animasi dan efek visual untuk gim, film, dan iklan.

Pada intinya peserta didik diharapkan dapat mengembangkan visi dan passion mereka dalam industri ini melalui pembelajaran proyek nyata, yang akan mempersiapkan mereka untuk berkarir atau memulai usaha di bidang perangkat lunak dan gim.

Keselamatan dan Kesehatan Kerja Lingkungan Hidup (K3LH) dan budaya kerja industri

    K3LH:Praktik Kerja Aman: Melaksanakan tindakan yang aman untuk mencegah kecelakaan dan cedera.

    Identifikasi Bahaya: Mengenali dan mengevaluasi potensi bahaya di tempat kerja, termasuk faktor fisik, kimia, biologis, dan ergonomi.
Prosedur Darurat: Menyiapkan dan melatih prosedur darurat untuk merespons situasi seperti kebakaran atau kecelakaan.


    Budaya Kerja Industri:Ringkas: Menyederhanakan proses kerja untuk meningkatkan efisiensi.

Rapi     :    Menjaga kebersihan dan keteraturan tempat kerja.
Resik   :   Mengurangi risiko dengan penerapan langkah-langkah pencegahan yang sesuai.
Rawat  :  Merawat peralatan dan fasilitas kerja secara teratur.
Rajin    :  Mendorong kedisiplinan dan tanggung jawab dalam menjalankan tugas sesuai prosedur.

Pada intinya peserta didik diharapkan mampu menerapkan praktik-praktik ini untuk meminimalkan risiko kecelakaan kerja, menghadapi situasi darurat dengan tepat, dan memperkuat budaya kerja yang aman dan efisien dalam lingkungan industri.

Orientasi dasar pengembangan perangkat lunak dan gim

    Penggunaan Perangkat dan Aplikasi:Basis Data: Pengelolaan informasi menggunakan sistem basis data.

    Tools Pengembangan: Penggunaan berbagai tools dan lingkungan pengembangan.
Sistem Operasi: Familiar dengan berbagai sistem operasi seperti Windows, macOS, dan Linux.

    Pengelolaan Aset dan Antarmuka Pengguna: Desain yang efektif dengan pengelolaan aset dan antarmuka pengguna yang baik.

    Prinsip Dasar Algoritma Pemrograman:Variabel dan Invarian: Konsep dasar tentang variabel dan invarian.

Alur Logika Pemrograman: Merancang algoritma dengan logika yang tepat.
Flowchart: Representasi visual dari algoritma menggunakan flowchart.
Teknik Dasar Algoritma Umum: Menggunakan teknik dasar seperti pengulangan, percabangan, dan rekursi.

    Diharapkan peserta didik dapat mengaplikasikan pengetahuan dan keterampilan ini dalam pengembangan perangkat lunak dan gim, sehingga mampu menciptakan aplikasi yang efektif dan efisien sesuai dengan kebutuhan.

Pemrograman terstruktur

1.) Struktur Data:Data Statis: Penggunaan array dengan berbagai dimensi, panjang, tipe data, dan pengurutan.
Data Dinamis: Pemanfaatan list dan stack untuk pengelolaan data yang fleksibel.


2.) Tipe Data:Pemilihan dan penggunaan tipe data yang sesuai untuk menyimpan informasi dalam pengembangan perangkat lunak dan gim.


3.) Struktur Kontrol:Perulangan: Penggunaan struktur kontrol perulangan seperti for, while, dan do-while.
Percabangan: Implementasi struktur kontrol percabangan seperti if, else, dan switch untuk pengambilan keputusan berdasarkan kondisi.

Pada intinya peserta didik diharapkan mampu mengimplementasikan pemrograman terstruktur ini dalam proyek pengembangan perangkat lunak sederhana dan gim, sehingga dapat menghasilkan solusi yang efektif dan efisien.

Pemrograman berorientasi obyek

Tentu, berikut adalah ringkasan singkat tentang pemrograman berorientasi objek (OOP) pada akhir fase E:

1. Konsep Dasar OOP

   - Class: Blueprint untuk membuat objek dengan atribut dan perilaku tertentu.

   - Objek: Instansi konkret dari sebuah class.

   - Method: Fungsi atau perilaku yang terkait dengan objek atau class.

   - Package: Pengelompokan class dan interface terkait dalam satu unit.

2. Access Modifier

   - Berbagai macam access modifier seperti public, private, protected, dan default mengatur aksesibilitas terhadap class, atribut, dan method.

3. Konsep Lanjutan OOP

   - Enkapsulasi: Membatasi akses langsung ke atribut atau method, dan menyembunyikan implementasi internal class.

   - Interface: Mendefinisikan sekumpulan method tanpa implementasi yang diimplementasikan oleh class lain.

   - Pewarisan (Inheritance): Mewarisi atribut dan method dari class lain, memungkinkan perluasan atau modifikasi perilaku class induk.

   - Polimorfisme: Kemampuan untuk menggunakan method dengan nama yang sama pada class-class yang berbeda.

Peserta didik diharapkan mampu menerapkan konsep-konsep ini dalam proyek pengembangan perangkat lunak sederhana, sehingga dapat menciptakan solusi yang terstruktur dan mudah dipelihara.

Mini Project 5 (Modul 5)

 NAMA : BINTANG DWI ANGGARA

 KELAS : X-RPL

   Contoh Codenya :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body onchange="textColor(), hoverColor()">
    <ul id="unorderedList">
    </ul>

    <hr>

    <span style="font-size: 4vh;"><b>Konfigurasi</b></span>
    <form onchange="generateList()">
        <label style="margin-right: 17px;">Teks:</label>
        <input type="text" id="inputIsiList"> <br>
        <label>Jumlah:</label>
        <input type="number" id="inputJumlahList">
    </form>

    <br>

    <span style="font-size: 4vh;"><b>Warna Text</b></span>
    <form id="warnaText">
        <input type="radio" name="clr" id="textBiru-Btn">
        <label>Biru</label>
        <input type="radio" name="clr" id="textHijau-Btn">
        <label>Hijau</label>
        <input type="radio" name="clr" id="textKuning-Btn">
        <label>Kuning</label>
    </form>

    <br>

    <span style="font-size: 4vh;"><b>Warna Hover</b></span>
    <form id="warnaHover">
        <input type="radio" name="clr" id="hoverMerah-Btn">
        <label>Merah</label>
        <input type="radio" name="clr" id="hoverCokelat-Btn">
        <label>Cokelat</label>
        <input type="radio" name="clr" id="hoverPink-Btn">
        <label>Pink</label>
    </form>

    <script>
        // simpan list dan unordered list
        let list = document.getElementsByTagName("li");
        let ul = document.getElementById("unorderedList");

        // Simpan input konfigurasi
        let isiText = document.getElementById("inputIsiList");
        let jumlahList = document.getElementById("inputJumlahList");

        // simpan elemen radio untuk text color
        let textBiru = document.getElementById("textBiru-Btn");
        let textHijau = document.getElementById("textHijau-Btn");
        let textKuning = document.getElementById("textKuning-Btn");

        // simpan elemen radio untuk hover color
        let hoverMerah = document.getElementById("hoverMerah-Btn");
        let hoverCokelat = document.getElementById("hoverCokelat-Btn");
        let hoverPink = document.getElementById("hoverPink-Btn");

        // Fungsi Konfigurasi
        function generateList() {
            // agar page tidak refresh
            event.preventDefault();
            // clear isi ul untuk membuat list baru
            ul.innerHTML = '';
            // check input jika memiliki value
            if ((isiText && isiText.value) && (jumlahList && jumlahList.value)) {
                // loop untuk membuat element list
                for (let i = 0; i < Number(jumlahList.value); i++) {
                    let li = document.createElement("li");
                    li.appendChild(document.createTextNode(isiText.value + (i + 1)));
                    ul.appendChild(li);
                }
            } 
        }

        // Untuk otomatis mengganti Isi list jika input diganti valuenya
        isiText.addEventListener('input', generateList);
        jumlahList.addEventListener('input', generateList);

        // Fungsi Ganti color list text
        // buat fungsi, iterasi List buat ganti color
        function iterateListColor(property, value) {
            for (let index = 0; index < list.length; index++) {
                list[index].style[property] = value;
            }
        }

        // fungsi ganti color list text
        function textColor() {
            if (textBiru.checked) {
                iterateListColor("color", "blue");
            } else if (textHijau.checked) {
                iterateListColor("color", "green");
            } else if (textKuning.checked) {
                iterateListColor("color", "yellow");
            }
        }


        // Fungsi ganti color text saat di hover
        function hoverColor() {
            for (let index = 0; index < list.length; index++) {
                list[index].onmouseover = function() {
                    if (hoverMerah.checked) {
                        list[index].style.color = "red";
                    } else if (hoverCokelat.checked) {
                        list[index].style.color = "brown";
                    } else if (hoverPink.checked) {
                        list[index].style.color = "pink";
                    }
                }
                
                list[index].onmouseout = function() {
                    if (textBiru.checked || textHijau.checked || textKuning.checked) {
                        textColor();
                    } else {
                        list[index].style.color = "";
                    }
                }
            }
        }
    </script>
</body>
</html>

Haslinya :

Langkah - Langkah dan Kegunaanya :

1. Struktur Dasar HTML

Fungsi dan Kegunaan:

Daftar List (<ul>): Menampilkan daftar list dalam elemen <ul>.
Form Konfigurasi: Memungkinkan pengguna mengatur teks dan jumlah list.
Form Warna Text dan Hover: Memberikan opsi untuk mengubah warna teks dan warna saat di-hover.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Aplikasi Pengaturan List</title>
</head>
<body onchange="textColor(), hoverColor()">
    <!-- Daftar List ditampilkan dalam elemen ul -->
    <ul id="unorderedList">
    </ul>

    <hr>

    <!-- Konfigurasi untuk membuat list baru -->
    <span style="font-size: 4vh;"><b>Konfigurasi</b></span>
    <form onchange="generateList()">
        <label style="margin-right: 17px;">Teks:</label>
        <input type="text" id="inputIsiList"> <br>
        <label>Jumlah:</label>
        <input type="number" id="inputJumlahList">
    </form>

    <br>

    <!-- Pengaturan Warna Teks -->
    <span style="font-size: 4vh;"><b>Warna Text</b></span>
    <form id="warnaText">
        <input type="radio" name="clr" id="textBiru-Btn">
        <label>Biru</label>
        <input type="radio" name="clr" id="textHijau-Btn">
        <label>Hijau</label>
        <input type="radio" name="clr" id="textKuning-Btn">
        <label>Kuning</label>
    </form>

    <br>

    <!-- Pengaturan Warna Saat Hover -->
    <span style="font-size: 4vh;"><b>Warna Hover</b></span>
    <form id="warnaHover">
        <input type="radio" name="clr" id="hoverMerah-Btn">
        <label>Merah</label>
        <input type="radio" name="clr" id="hoverCokelat-Btn">
        <label>Cokelat</label>
        <input type="radio" name="clr" id="hoverPink-Btn">
        <label>Pink</label>
    </form>

    <!-- Skrip JavaScript untuk logika aplikasi -->
    <script>
        // ... (diberikan dalam kode) ...
    </script>
</body>
</html>

2. Skrip JavaScript

. Fungsi generateList()

Fungsi dan Kegunaan:Inisialisasi Variabel:

Menyimpan referensi ke elemen-elemen HTML yang akan diakses.
generateList(): Fungsi untuk membuat list baru berdasarkan konfigurasi yang dimasukkan pengguna.
textColor() dan hoverColor(): Fungsi untuk mengatur warna teks dan warna saat di-hover berdasarkan pilihan pengguna.

<script>
    // ... (diberikan dalam kode) ...
</script>

3.Fungsi generateList()

Fungsi dan Kegunaan:

Validasi Input: Memastikan bahwa teks dan jumlah list diisi sebelum membuat list baru.

Menghapus List Lama: Membersihkan daftar list sebelum membuat yang baru.
Loop Pembuatan List: Membuat elemen list sejumlah yang dimasukkan pengguna dan menambahkannya ke dalam elemen <ul>.

function generateList() {
    // ... (diberikan dalam kode) ...
}

4. Fungsi textColor()

Fungsi dan Kegunaan:

Mengganti Warna Teks: Mengubah warna teks pada semua elemen list berdasarkan pilihan pengguna.

function textColor() {
    // ... (diberikan dalam kode) ...
}

5. Fungsi hoverColor()

Fungsi dan Kegunaan:

Mengubah Warna Saat Hover: Mengubah warna teks saat elemen di-hover berdasarkan pilihan pengguna, dan mengembalikannya ke warna asal saat mouse meninggalkan elemen.

function hoverColor() {
    // ... (diberikan dalam kode) ...
}

6.Inisialisasi Variabel

Fungsi dan Kegunaan:

list: Menyimpan semua elemen <li> yang ada pada halaman.
ul: Menyimpan referensi ke elemen dengan id "unorderedList" (elemen <ul>).
isiText dan jumlahList: Menyimpan referensi ke elemen input untuk teks dan jumlah list.
Elemen Radio Warna Text (textBiru, textHijau, textKuning): Menyimpan referensi ke elemen radio yang mengontrol warna teks.
Elemen Radio Warna Hover (hoverMerah, hoverCokelat, hoverPink): Menyimpan referensi ke elemen radio yang mengontrol warna saat di-hover.

let list = document.getElementsByTagName("li");
let ul = document.getElementById("unorderedList");
let isiText = document.getElementById("inputIsiList");
let jumlahList = document.getElementById("inputJumlahList");
let textBiru = document.getElementById("textBiru-Btn");
let textHijau = document.getElementById("textHijau-Btn");
let textKuning = document.getElementById("textKuning-Btn");
let hoverMerah = document.getElementById("hoverMerah-Btn");
let hoverCokelat = document.getElementById("hoverCokelat-Btn");
let hoverPink = document.getElementById("hoverPink-Btn");

7. Fungsi generateList()

Fungsi dan Kegunaan:

event.preventDefault(): Mencegah refresh halaman saat form diubah.
ul.innerHTML = '';: Menghapus isi dari elemen <ul> untuk membersihkan list sebelum membuat yang baru.
Validasi Input: Memastikan bahwa teks dan jumlah list diisi sebelum membuat list baru.
Loop Pembuatan List: Membuat elemen list sejumlah yang dimasukkan pengguna dan menambahkannya ke dalam elemen <ul>.

let list = document.getElementsByTagName("li");
let ul = document.getElementById("unorderedList");
let isiText = document.getElementById("inputIsiList");
let jumlahList = document.getElementById("inputJumlahList");
let textBiru = document.getElementById("textBiru-Btn");
let textHijau = document.getElementById("textHijau-Btn");
let textKuning = document.getElementById("textKuning-Btn");
let hoverMerah = document.getElementById("hoverMerah-Btn");
let hoverCokelat = document.getElementById("hoverCokelat-Btn");
let hoverPink = document.getElementById("hoverPink-Btn");

8. Event Listener untuk Input 

Fungsi dan Kegunaan:

isiText.addEventListener('input', generateList);: Memanggil generateList() ketika isi teks berubah.
jumlahList.addEventListener('input', generateList);: Memanggil generateList() ketika jumlah list berubah.

isiText.addEventListener('input', generateList);
jumlahList.addEventListener('input', generateList);

9. Fungsi textColor()

Fungsi dan Kegunaan:

Pilihan Warna Text: Mengganti warna teks pada semua elemen list berdasarkan pilihan pengguna.

function textColor() {
    if (textBiru.checked) {
        iterateListColor("color", "blue");
    } else if (textHijau.checked) {
        iterateListColor("color", "green");
    } else if (textKuning.checked) {
        iterateListColor("color", "yellow");
    }
}

10. Fungsi hoverColor()

Fungsi dan Kegunaan:

Mengubah Warna Saat Hover: Mengubah warna teks saat elemen di-hover berdasarkan pilihan pengguna, dan mengembalikannya ke warna asal saat mouse meninggalkan elemen.

function hoverColor() {
    for (let index = 0; index < list.length; index++) {
        // ...
    }
}

11. Fungsi iterateListColor(property, value)

Fungsi dan Kegunaan:

Iterasi dan Pengaturan Warna: Iterasi melalui semua elemen list dan mengatur properti warna sesuai dengan parameter yang diberikan.

function iterateListColor(property, value) {
    for (let index = 0; index < list.length; index++) {
        list[index].style[property] = value;
    }
}

terimakasih :)

Mini Project 4 (Modul 5)

 Nama : Bintang Dwi Anggara

 Kelas : X-RPL

CODE NYA :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table tr td, table tr th {
            border: 1px solid;
            text-align: center;
        }
        button {
            margin: 0 auto;
            display: block;
        }
        .berat {
            border-color: black;
            animation: beratAnimation 1s ease 0s infinite alternate;
        }
        @keyframes beratAnimation {
            0% {background-color: rgb(255, 114, 114); color: white;}
            100% {background-color: red; color: white;}
        }
    </style>
</head>
<body>
    <form >
        <label>Nama Buah:</label>
        <input style="margin-bottom: 1px;" type="text" id="namaBuah"> <br>
        <label style="margin-right: 41px;">Berat:</label>
        <input type="number" id="beratBuah" min="0">
        <span>kg</span> <br>
        <button style="margin: 1px 0 0 84px;" onclick="saveFruit()">Simpan</button>
        <hr>
        <table id="tableBuah">
                <tr>
                    <th width="35px">No</th>
                    <th width="160px">Nama Buah</th>
                    <th width="70px">Berat</th>
                    <th width="75px">Action</th>
                </tr>
        </table>
    </form>
    <script>
        // Simpan elemen dalam variabel
        let tableBuah = document.getElementById("tableBuah");
        let namaBuah = document.getElementById("namaBuah");
        let beratBuah = document.getElementById("beratBuah");
        // Function menyimpan data buah
        function saveFruit() {
            // Check jika input memiliki nilai/value
            if ((namaBuah && namaBuah.value) && (beratBuah && beratBuah.value)) {
                event.preventDefault();
                // Buat element tr
                let tr = document.createElement("tr");
                // Buat variable untuk Nomor Urut
                let nomorUrut = document.createTextNode(tableBuah.childElementCount);
                // Buat variable untuk Nama Buah
                let addNamaBuah = document.createTextNode(namaBuah.value);
                // Buat variable untuk Berat Buah
                let addBeratBuah = document.createTextNode(beratBuah.value + " kg");
                // Buat Tombol Reset
                let deleteButton = document.createElement("button");
                deleteButton.textContent = "Hapus";
                // tambahkan attribute onclick untuk button dengan function deleteFruit
                // 'this' mengambil elemen (button) bila function dipanggil sebagai parameter
                deleteButton.setAttribute("onclick", "deleteFruit(this)");
                // Buat array agar bisa di iterasi for loops
                let tableDataArray = [
                    nomorUrut,
                    addNamaBuah,
                    addBeratBuah,
                    deleteButton
                ];
                // for loops appendChild setiap data di array ke dalam td
                for (let i = 0; i < tableDataArray.length; i++) {
                    let td = document.createElement("td");
                    td.appendChild(tableDataArray[i]);
                    // check jika berat di atas 5, dan apakah index sedang berada di addBeratBuah
                    if (Number(beratBuah.value) > 5 && i == tableDataArray.indexOf(addBeratBuah)) {
                        td.classList.add("berat");
                    }
                    tr.appendChild(td);
                    tableBuah.appendChild(tr);  
                }
            }
            // Jika tidak ada nilai di input, berikan alert
            else {
                window.alert("Masukan Input")
            }
        }
        // function untuk menghapus buah
        function deleteFruit(button) {
            // mencari elemen 'tr' yang terdekat dari elemen button
            let tableButtonRow = button.closest("tr");
            if (tableButtonRow) { // jika true...
                tableBuah.removeChild(tableButtonRow);
                updateNomorUrut();
            }
        }  
        // function update Nomor Urut
        function updateNomorUrut() {
            let rows = tableBuah.getElementsByTagName('tr');
            for (let i = 0; i < rows.length; i++) {
                // check setiap row (ditambah satu karena index 0 merupakan head)
                // check children pertamanya (column pertama)
                // tambahkan text content dengan index + 1
                rows[i + 1].children[0].textContent = i + 1;
            }
        }
    </script>
</body>
</html>

HASILNYA :

1. Struktur Dasar HTML

Kode HTML yang pertama mendefinisikan struktur dasar dokumen. Dengan menggunakan tag <form>, kita membuat formulir untuk memasukkan data buah seperti nama dan berat. Informasi ini kemudian dapat disimpan dan ditampilkan.

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Meta tags dan judul dokumen -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Penyimpanan Data Buah</title>

    <!-- Style untuk tata letak dan animasi -->
    <style>
        /* Style untuk tabel dan tombol */
        /* ... (diberikan dalam kode) ... */
    </style>
</head>
<body>
    <!-- Formulir input dan tabel untuk menampilkan data -->
    <!-- ... (diberikan dalam kode) ... -->

    <!-- Script JavaScript untuk logika aplikasi -->
    <script>
        // ... (diberikan dalam kode) ...
    </script>
</body>
</html>

2. Formulir Input
Formulir input menggunakan elemen <form> dan menyediakan kolom untuk memasukkan nama buah dan beratnya. Tombol "Simpan" diprogram untuk menyimpan data buah ke dalam tabel.

fungsi dan Kegunaan:Input Fields: Menyediakan input untuk nama buah dan beratnya.
<button>: Tombol "Simpan" yang, ketika diklik, memanggil fungsi saveFruit() untuk menyimpan data buah.

<form>
    <label>Nama Buah:</label>
    <input type="text" id="namaBuah"> <br>
    <label>Berat:</label>
    <input type="number" id="beratBuah" min="0">
    <span>kg</span> <br>
    <button onclick="saveFruit()">Simpan</button>
    <!-- ... (diberikan dalam kode) ... -->
</form>

3. Tabel Penyimpanan Data Buah

Tabel digunakan untuk menampilkan data buah yang telah dimasukkan. Setiap baris tabel memiliki nomor urut, nama buah, berat, dan tombol "Hapus" untuk menghapus data buah tertentu.

<table id="tableBuah">
    <tr>
        <th>No</th>
        <th>Nama Buah</th>
        <th>Berat</th>
        <th>Action</th>
    </tr>
</table>

4.Variabel dan Element HTML

Fungsi dan Kegunaan:tableBuah: Menyimpan referensi ke elemen tabel dengan id "tableBuah".
namaBuah dan beratBuah: Menyimpan referensi ke elemen input dengan id "namaBuah" dan "beratBuah" untuk mendapatkan nilai yang dimasukkan pengguna.

let tableBuah = document.getElementById("tableBuah");
let namaBuah = document.getElementById("namaBuah");
let beratBuah = document.getElementById("beratBuah");

5. Fungsi saveFruit().

Fungsi dan Kegunaan:Validasi Input: Memeriksa apakah kedua input, namaBuah dan beratBuah, memiliki nilai atau tidak.
Membuat Elemen Baru: Jika valid, membuat elemen <tr> baru untuk menampilkan data buah di dalam tabel.
Memeriksa Berat: Jika berat buah di atas 5 kg, menambahkan kelas CSS "berat" untuk memberikan efek visual tertentu.
Menambahkan Data ke Tabel: Menambahkan elemen baru ke dalam tabel dengan nomor urut, nama buah, berat, dan tombol "Hapus".
Memanggil updateNomorUrut(): Untuk memastikan nomor urut di tabel diperbarui.

function saveFruit() {
    // ... (diberikan dalam kode) ...
}

6. Fungsi deleteFruit(button)

Fungsi dan Kegunaan:

Menghapus Baris Tabel: Menghapus baris tabel yang sesuai dengan tombol "Hapus" yang diklik.
Memanggil updateNomorUrut(): Untuk memastikan nomor urut di tabel diperbarui setelah penghapusan

function deleteFruit(button) {
    // ... (diberikan dalam kode) ...
}

7.Fungsi updateNomorUrut()

Fungsi dan Kegunaan:

Memperbarui Nomor Urut: Mengubah nomor urut di kolom pertama setiap baris tabel setelah penghapusan.

function updateNomorUrut() {
    // ... (diberikan dalam kode) ...
}

terimakasih :)

Mini Project 3 (modul 5)

 Nama : Bintang Dwi Anggara
 Kelas  : X-RPL

Kali ini kita akan membuat mengubah elemnt text yang akan diubah menjadi text  yang berwarna seperti yang ada dibawah dimana warna elemnt ganjil dan warna elemnt genapa kita dapat setting berbagai warna yang sudah terdapat discript javascript.

Seperti di bawah ini adalah code seperti ada yang diatas dan disini saya akan membahas mengenai code code dan fungsinya :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
        <li>Item 5</li>
        <li>Item 6</li>
        <li>Item 7</li>
        <li>Item 8</li>
    </ul>

    <hr>

    <label>Warna Elemen Genap</label>
    <select name="color" id="selectGenap" onchange="evenColor()">
        <option>Select Color</option>
        <option value="red">Red</option>
        <option value="green">Green</option>
        <option value="blue">Blue</option>
    </select> 
    <br>
    <label>Warna Elemen Ganjil</label>
    <select name="color" id="selectGanjil" onchange="oddColor()">
        <option>Select Color</option>
        <option value="red">Red</option>
        <option value="green">Green</option>
        <option value="blue">Blue</option>
    </select>

    <script>
        let list = document.getElementsByTagName("li");
        let selectGenap = document.getElementById("selectGenap");
        let selectGanjil = document.getElementById("selectGanjil");
        let red = document.getElementById("selectRed");
        let green = document.getElementById("selectGreen");
        let blue = document.getElementById("selectBlue");

        function evenColor() {
            let index = 0;
            while (index < list.length) {
                if (index % 2 == 0) {
                    if (selectGenap.value == "red") {
                        list[index + 1].style.color = "red";
                    } 
                    else if (selectGenap.value == "green") {
                        list[index + 1].style.color = "green";
                    } 
                    else if (selectGenap.value == "blue") {
                        list[index + 1].style.color = "blue";
                    } 
                    else {
                        list[index + 1].style.color = "";
                    }
                }
                index++;
            }
        }

        function oddColor() {
            let index = 0;
            do {
                if (index % 2 == 0) {
                    if (selectGanjil.value == "red") {
                        list[index].style.color = "red";
                    } 
                    else if (selectGanjil.value == "green") {
                        list[index].style.color = "green";
                    } 
                    else if (selectGanjil.value == "blue") {
                        list[index].style.color = "blue";
                    } 
                    else {
                        list[index].style.color = "";
                    }
                }
                index++;
            } while (index < list.length);
        }
    </script>
</body>
</html>

Langkah langkah 

1.) Menambahkan elment html dengan menggunakan ('ul') dan ('li')

  <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
        <li>Item 5</li>
        <li>Item 6</li>
        <li>Item 7</li>
        <li>Item 8</li>
    </ul>

2.) Lalu kita tambahkan sebuah element select dengan id select genap(kode yang akan dipanggil ketika javascript dijalankan) dan onchange evencolor(sebuah id untuk memanggil warna ketika code javascript dijalankan) lalu untuk option adalah pilihan antara warna warna dan juga terdapat value berisi warna merah,hijau,dan biru.

<select name="color" id="selectGenap" onchange="evenColor()">
        <option>Select Color</option>
        <option value="red">Red</option>
        <option value="green">Green</option>
        <option value="blue">Blue</option>
    </select> 

3.)  Lalu kita masuk mengenai script berikut contoh codenya :

  let list = document.getElementsByTagName("li");
        let selectGenap = document.getElementById("selectGenap");
        let selectGanjil = document.getElementById("selectGanjil");
        let red = document.getElementById("selectRed");
        let green = document.getElementById("selectGreen");
        let blue = document.getElementById("selectBlue");

(Let) kegunaan dari adalah sebuah id dari kode javascript dan disini kita menggunakan ('documnt.getelmentByid') fungsinya adalah untuk menyimpan sebuah data dan akan berjalan ketika code javascript dijalankan dan code diatas menyimpan sebuah data select genap select ganjil dan data warna merah hijau dan juga biru.

4.)  lalu kita tambahkan code function dan kondisi while,if,dan else

  function evenColor() {
            let index = 0;
            while (index < list.length) {
                if (index % 2 == 0) {
                    if (selectGenap.value == "red") {
                        list[index + 1].style.color = "red";
                    } 
                    else if (selectGenap.value == "green") {
                        list[index + 1].style.color = "green";
                    } 
                    else if (selectGenap.value == "blue") {
                        list[index + 1].style.color = "blue";
                    } 
                    else {
                        list[index + 1].style.color = "";
                    }
                }
                index++;
            }
        }

pertama kita menambahkan function dengan nama evenColor, kegunaannya  menambahkan style color pada list genap. 

kegunaan dari lat index 0 code ini dihitung dari angka 0 dalam array nomer 0 itu adalah satu jika nomernya 1 maka angkanya adalah 2 jadi disni kita menggambil array 0 atau nomer 1 (genap)

dan untuk  while (index < list.length) penjela saanya adalah 

jika index lebih besar dari pada angka list maka kegunaanya adalah untuk mengiterasi melalui elemen-elemen dalam list. Loop ini akan terus berjalan selama nilai index kurang dari panjang list.

if (index % 2 == 0) kegunaan Dalam kondisi ini, kita memeriksa apakah nilai index merupakan angka genap. Jika ya, maka kita melanjutkan untuk mengubah warna teks elemen selanjutnya pada list.
 

if (selectGenap.value == "red") { ... } :

di dalam blok kondisi ini, kita memeriksa nilai yang dipilih dari elemen dengan id selectGenap. Berdasarkan nilai tersebut, kita mengubah warna teks elemen selanjutnya dalam list menjadi merah, hijau, biru, atau kosong (default).

else if (selectGenap.value == "green") { list[index + 1].style.color = "green"; } else if (selectGenap.value == "blue") { list[index + 1].style.color = "blue";}

Bagian ini merupakan salah satu inti dari fungsi evenColor. Di sini, kita memeriksa nilai yang dipilih oleh pengguna melalui suatu elemen dengan ID selectGenap. Jika nilai yang dipilih adalah "green", maka warna teks dari elemen berikutnya pada list akan diubah menjadi hijau. Begitu juga jika nilainya "blue", warna teks akan diubah menjadi biru.