Section 12 - Method-Delegate
5
Section 12 Method Delegate A. Requirement 1. Text Editor Sublime Text 3, Notepad ++, Intype, Adobe Dreamweaver, dll 2. Web Server Apache yang sudah disediakan oleh Xampp 3. Jquery Library 4. Web Browser Google Chrome, Mozilla Firefox, Internet Explorer, dll B. Hirarki Project a) Preview Project
-
Upload
raditya-danar -
Category
Documents
-
view
214 -
download
1
description
Implementing Delegate Methode JQuery
Transcript of Section 12 - Method-Delegate
Section 12
Method Delegate
A. Requirement
1. Text Editor
Sublime Text 3, Notepad ++, Intype, Adobe Dreamweaver, dll
2. Web Server
Apache yang sudah disediakan oleh Xampp
3. Jquery Library
4. Web Browser
Google Chrome, Mozilla Firefox, Internet Explorer, dll
B. Hirarki Project
a) Preview Project
C. Langkah – Langkah Praktikum 1
1. Konstruksi Dokumen HTML 5 dengan nama index.html seperti di bawah ini
<!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="tombol-hapus">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. Lakukan proses styling dengna membuat file style.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. Tambahkan file data‐grid.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:first-child').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. Jalankan Program pada web browser, lalu amati.
