Scribd Logo
Upload

Welcome to Scribd!

  • Section 12 - Method-Delegate

    Uploaded by

    Raditya Danar
    21 views5 pages
    This document provides instructions for a programming assignment involving creating a student data form and table using HTML, CSS, and jQuery. The steps include: 1. Creating an index.html page with form inputs and a table to display data. 2. Adding a style.css file to style the page elements. 3. Adding a data-grid.js file containing jQuery code to add new rows to the table when the form is submitted and remove rows when the delete button is clicked. 4. Viewing the working program in a web browser.

    Original Description:

    Implementing Delegate Methode JQuery

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    This document provides instructions for a programming assignment involving creating a student data form and table using HTML, CSS, and jQuery. The steps include: 1. Creating an index.html page with form inputs and a table to display data. 2. Adding a style.css file to style the page elements. 3. Adding a data-grid.js file containing jQuery code to add new rows to the table when the form is submitted and remove rows when the delete button is clicked. 4. Viewing the working program in a web browser.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as pdf or txt
    21 views5 pages

    Section 12 - Method-Delegate

    Uploaded by

    Raditya Danar
    This document provides instructions for a programming assignment involving creating a student data form and table using HTML, CSS, and jQuery. The steps include: 1. Creating an index.html page with form inputs and a table to display data. 2. Adding a style.css file to style the page elements. 3. Adding a data-grid.js file containing jQuery code to add new rows to the table when the form is submitted and remove rows when the delete button is clicked. 4. Viewing the working program in a web browser.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as pdf or txt
    of 5

    Section12

    MethodDelegate

    A. Requirement
    1. TextEditor
    SublimeText3,Notepad++,Intype,AdobeDreamweaver,dll
    2. WebServer
    ApacheyangsudahdisediakanolehXampp
    3. JqueryLibrary
    4. WebBrowser
    GoogleChrome,MozillaFirefox,InternetExplorer,dll

    B. HirarkiProject

    a) PreviewProject

    C. LangkahLangkahPraktikum1

    1. KonstruksiDokumenHTML5dengannamaindex.htmlsepertidibawahini

    <!doctype html>
    <html>
    <head>
    <title></title>
    <link rel="stylesheet" type="text/css" href="css/style.css">
    </head>
    <body>
    <div id="main-container">
    <div id="form-input">
    <h3>Input Data Mahasiswa</h3>
    <label>NIM :</label>
    <Input id="input-nim">
    <label>Nama :</label>
    <Input id="input-nama">
    <label>Prodi :</label>

    <SELECT id="input-prodi">
    <option value="1">Teknik Informatika</option>
    <option
    value="2">Manajemen
    Informatika</option>
    <option value="3">Komputer Akuntansi</option>
    </SELECT>
    <label>Alamat :</label>
    <textarea id="input-alamat"></textarea>
    <button id="tombol-input">Tambah Data</button>
    </div><!-- Akhir dari id form-input -->
    <div id="data-mahasiswa">
    <h3>Data Mahasiswa</h3>
    <table>
    <thead>
    <tr>
    <th>NO</th>
    <th>NIM</th>
    <th>NAMA</th>
    <th>PRODI</th>
    <th>ALAMAT</th>
    <th>ACTION</th>
    </tr>
    </thead>
    <tbody>
    <tr>
    <td>1</td>
    <td>99523022</td>
    <td>Agus Melas</td>
    <td>Teknik Informatika</td>
    <td>Jl. Perjuangan No 302</td>
    <td><button
    id="tombolhapus">Delete</button></td>
    </tr>
    </tbody>
    </table>
    </div><!-- Akhir dari id data-mahasiswa -->
    </div><!-- Akhir dari id main-container -->
    <script type="text/javascript" src="js/jquery-min.js"></script>
    <script type="text/javascript" src="js/data-grid.js"></script>
    </body>
    </html>

    2. Lakukanprosesstylingdengnamembuatfilestyle.css

    body, h3 {
    margin: 0px;
    }
    h3 {
    margin-bottom: 15px;
    padding-bottom: 10px;

    border-bottom: 1px solid #827F7F;


    }
    body {
    background: #DAD5D5;
    font-family: sans-serif;
    }
    #main-container {
    width: 700px;
    margin: auto;
    background: white;
    }
    #main-container, #form-input, #data-mahasiswa {
    padding: 15px;
    border:1px solid #C0B9B9;
    margin-bottom: 15px;
    }
    table {
    border-collapse: collapse;
    }
    table th, table td {
    border:1px solid #837F7F;
    padding: 4px 8px;
    }
    label, input, textarea, select {
    display: block;
    font-size: 16px;
    font-family: sans-serif;
    }
    input, textarea, select {
    margin-top: 5px;
    margin-bottom: 15px;
    width: 200px;
    }
    input, select {
    padding: 4px 0px;
    }
    textarea {
    height: 50px;
    }
    #tombol-input {
    padding: 4px 6px;
    }

    3. Tambahkanfiledatagrid.js
    $(document).ready(function() {
    $('#tombol-input').on('click', function() {
    var myNIM = $('#input-nim').val();
    var myName = $('#input-nama').val();
    var myProdi = $('#input-prodi').val();
    var myAddress = $('#input-alamat').val();
    var no = parseInt($('table tbody tr:last-child td:firstchild').text());
    no++;
    if (myProdi==1) {
    myProdi = "Teknik Informatika";
    } else if (myProdi==2) {
    myProdi = "Manajemen Informatika";
    } else if (myProdi==3) {
    myProdi = "Komputer Akuntansi";
    }
    $('table tbody').append("<tr><td>" + no + "</td><td>" + myNIM
    + "</td><td>" + myName + "</td><td>" + myProdi + "</td><td>" + myAddress +
    "</td><td><button id='tombol-hapus'>Delete</button></td></tr>");
    });
    $('tbody').delegate('#tombol-hapus','click', function() {
    //alert('Delete');
    $(this).closest('tr').remove();
    });
    });

    4. JalankanProgrampadawebbrowser,laluamati.

    You might also like