Modul 7: Trayek Generator [1]

Roihan Fajareno Februari 13, 2024

Tujuan Program

Tujuan Program

Program di atas merupakan sebuah "Trayek Generator" yang memungkinkan pengguna untuk memasukkan daftar trayek (rute perjalanan) dalam bentuk teks yang dipisahkan oleh koma. Setelah pengguna menekan tombol "Generate", program akan memproses teks yang dimasukkan dan menampilkan daftar trayek tersebut dalam sebuah tabel, di mana setiap trayek akan dipisahkan dengan tanda penghubung (-).


Tampilan Awal Program


Tampilan Setelah Generate 

Input Aman


Source Code

Source Code
Source code program ini bisa dilihat di Repository berikut: Source Code Mini Project
Github Repository: Main Repository

Kalian bisa mencoba program ini secara online dengan mengakses link berikut: Github Pages
  index.html 
<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Mini Project 1</title>
        <style>
            tr th, tr td {
                border: 1px solid;
                width: 50vh;
                height: 5vh;
                text-align: center;
            }
        </style>
    </head>
    <body>
        <h1>Trayek Generator</h1>
        <label><b>Trayek:</b> <i>(Beri Koma untuk setiap Trayek)</i></label> <br>
        <textarea id="textArea" cols="40" rows="10"></textarea> <br>
        <button onclick="generateTrayek()">Generate</button>
        <hr>
        <table>
            <thead>
                <tr>
                    <th>Trayek</th>
                </tr>
            </thead>
            <tbody id="trayekTable">
                <!-- Trayek -->
            </tbody>
        </table>
    
        <script src="script.js"></script>
    </body>
    </html>

  script.js 
    let textArea = document.getElementById("textArea");
    let trayekTable = document.getElementById("trayekTable");
    
    function stringToNestedArray(inputString) {
        inputString = inputString.trim();
        let finalArray = [];
        let wordGroupArray = [];
        let word = "";
    
        for (let i = 0; i < inputString.length; i++) {
            const char = inputString[i];
            if (char !== ' ' && char !== ',') {
                word += char;
            }
            else if (char === ' ' && word !== '') {
                wordGroupArray.push(word);
                word = '';
            }
            else if (char === ',') {
                if (word !== '') {
                    wordGroupArray.push(word);
                    word = '';
                }
                if (wordGroupArray.length > 0) {
                    finalArray.push(wordGroupArray);
                }
                wordGroupArray = [];
            }
        }
        if (word !== '') {
            wordGroupArray.push(word);
        }
        if (wordGroupArray.length > 0) {
            finalArray.push(wordGroupArray);
        }
        return finalArray;
    }
    
    
    function generateTrayek() {
        trayekTable.innerHTML = "";
        let trayekArray = stringToNestedArray(textArea.value);
        for (let i = 0; i < trayekArray.length; i++) {
            let tr = document.createElement("tr");
            let td = document.createElement("td");
            let dataTrayek = document.createTextNode(trayekArray[i].join(" - "));
            td.appendChild(dataTrayek);
            tr.appendChild(td);
            trayekTable.appendChild(tr);
        }
    }

Pembahasan

1. Buat Struktur HTML

Buat struktur HTML seperti pada source code. HTML tersebut berguna menampilkan User Interface sederhana dimana terdapat elemen <textarea> untuk memasukkan/input data trayek. Kemudian ada button "Generate" untuk membuat trayek di table.

2. Tambahkan Javascript

Tambahkan tag <script> pada HTML untuk menambahkan Javascript. Bila Javascript berada di file terpisah (external), tambahkan attribute 'src'. Kode seperti pada source code script.js.

Pembahasan Javascript Source Code

1. Inisialisasi Variabel, simpan elemen HTML dengan id textArea dan trayekTable ke dalam variabel. 
let textArea = document.getElementById("textArea");
let trayekTable = document.getElementById("trayekTable");

2. Buat function untuk convert string menjadi array, Buat function bernama stringToNestedArray untuk mengonversi string yang dimasukkan ke dalam bentuk array bersarang (Nested Array). Function ini memproses karakter-karakter dalam string, membangun kata (word), dan mengelompokkannya ke dalam array bersarang (finalArray). Misalnya, jika pengguna memasukkan "A B, C, D", fungsi ini akan menghasilkan array [["A", "B"], ["C", "D"]]. 
function stringToNestedArray(inputString) {
    inputString = inputString.trim();
    let finalArray = [];
    let wordGroupArray = [];
    let word = "";

    for (let i = 0; i < inputString.length; i++) {
        const char = inputString[i];
        if (char !== ' ' && char !== ',') {
            word += char;
        }
        else if (char === ' ' && word !== '') {
            wordGroupArray.push(word);
            word = '';
        }
        else if (char === ',') {
            if (word !== '') {
                wordGroupArray.push(word);
                word = '';
            }
            if (wordGroupArray.length > 0) {
                finalArray.push(wordGroupArray);
            }
            wordGroupArray = [];
        }
    }
    if (word !== '') {
        wordGroupArray.push(word);
    }
    if (wordGroupArray.length > 0) {
        finalArray.push(wordGroupArray);
    }
    return finalArray;
}

3. Buat function untuk menghasilkan tampilan di HTML, Buat function bernama generateTrayek()  yang bertanggung jawab untuk menghasilkan tampilan tabel trayek berdasarkan input yang dimasukkan user. Pertama, isi dari trayekTable dikosongkan agar hanya data baru yang ditampilkan. Kemudian, daftar trayek dari textarea diambil dan diubah menjadi Nested Array menggunakan fungsi stringToNestedArray(). Selanjutnya, setiap trayek dalam array tersebut diproses dan ditambahkan ke dalam tabel sebagai baris-baris (tr) baru. 
function generateTrayek() {
    trayekTable.innerHTML = "";
    let trayekArray = stringToNestedArray(textArea.value);
    for (let i = 0; i < trayekArray.length; i++) {
        let tr = document.createElement("tr");
        let td = document.createElement("td");
        let dataTrayek = document.createTextNode(trayekArray[i].join(" - "));
        td.appendChild(dataTrayek);
        tr.appendChild(td);
        trayekTable.appendChild(tr);
    }
}

End

Jika sudah, kalian bisa mencoba program tersebut dengan mengakses laman ini.
Roihan Fajareno

Diposting oleh Roihan Fajareno

Posting Komentar

0 Komentar