Untitled

<!DOCTYPE HTML>
<html>
    <head>
        <title>Membuat Aplikasi Sederhana dengan HTML</title>
        <script src="files/js/jquery.min.js"></script>
        <script src="files/bootstrap/js/bootstrap.min.js"></script>
		<link rel="stylesheet" href="files/bootstrap/css/bootstrap.min.css">
    </head>
    <body onload="muatDaftarData();">

        <div class="col-md-8 col-md-offset-2" ng-controller="listContactCtrl">
            <div class="page-header">
                <h1>
                    FORMULIR DATA SISWA SMAN 6 TANGSEL
                </h1>
                <ul class="nav nav-pills">
                  <li><a id="nav-list-data" href="javascript:void(0);" onclick="gantiMenu('list-data');">list of data</a></li>
                  <li><a id="nav-tambah-data" href="javascript:void(0);" onclick="gantiMenu('tambah-data');">add data</a></li>
                </ul>

            </div>
            <div id="tambah-data" class="well" style="display:none;">
                <form id="form-data">
                    <div id="name-group" class="form-group">
                        <label>Name:</label>
                        <input type="text" class="form-control" id="nama" name="nama" placeholder="example: Purnama Raya" /><br/>
                    </div>
                    <div id="alamat-group" class="form-group">
                        <label>Class:</label>
                        <input type="text" class="form-control" id="alamat" name="alamat" placeholder="example: XI IPS 5" /><br/>
                    </div>
                    <div id="ket-group" class="form-group">
                        <label>address:</label>
                        <textarea class="form-control" id="ket" name="ket" placeholder="example: Jl. raya pamoelang"></textarea><br/>
                    </div>
                    <input type="button" value="Simpan" onclick="simpanData();" class="btn btn-success btn-small"/>
                    <input type="reset" value="Reset" onclick="" class="btn btn-warning btn-small"/>
                </form>
            </div>
            <div id="edit-data" class="well" style="display:none;">
                <form id="eform-data">

                    <div id="name-group" class="form-group" style="display:none;">
                        <label>id data:</label>
                        <input type="text" class="form-control" id="eid_data" name="nama" placeholder="" /><br/>
                    </div>

                    <div id="name-group" class="form-group">
                        <label>Nama Lengkap:</label>
                        <input type="text" class="form-control" id="enama" name="nama" placeholder="contoh: Ramadhan Abiyasa Harianto" /><br/>
                    </div>
                    <div id="alamat-group" class="form-group">
                        <label>Kelas:</label>
                        <input type="text" class="form-control" id="ealamat" name="alamat" placeholder="contoh: XI IPS 5" /><br/>
                    </div>
                    <div id="ket-group" class="form-group">
                        <label>Alamat:</label>
                        <textarea class="form-control" id="eket" name="ket" placeholder="contoh: Griya Jakarta Blok M5/No. 8"></textarea><br/>
                    </div>
                    <input type="button" value="Simpan" onclick="simpanEditData();" class="btn btn-success btn-small"/>
                    <input type="reset" value="Reset" onclick="" class="btn btn-warning btn-small"/>
                    <input type="button" value="Cancel" onclick="gantiMenu('list-data');" class="btn btn-warning btn-small"/>
                </form>
            </div>
            <div id="list-data" class="well">
                , Tidak ada data...
            </div>
        </div>

    </body>
    <script type="text/javascript">
        function muatDaftarData(){
            if (localStorage.daftar_data && localStorage.id_data){

                daftar_data = JSON.parse(localStorage.getItem('daftar_data'));

                var data_app = "";

                if (daftar_data.length > 0){
                    data_app = '<table class="table">';
                    data_app += '<thead>'+
                                        '<th>ID</th>'+
                                        '<th>NAMA</th>'+
                                        '<th>KELAS</th>'+
                                        '<th>ALAMAT</th>'+
                                        '<th>aksi</th>'+
                                        '<th>aksi 2</th>'+
                                      '</thead><tbody>';

                    for (i in daftar_data){
                        data_app += '<tr>';
                        data_app += '<td>'+ daftar_data[i].id_data + ' </td>'+
                                          '<td>'+ daftar_data[i].nama + ' </td>'+
                                          '<td>'+ daftar_data[i].alamat + ' </td>'+
                                          '<td>'+ daftar_data[i].ket + ' </td>'+
                                          '<td><a class="btn btn-danger btn-small" href="javascript:void(0)" onclick="hapusData(\''+daftar_data[i].id_data+'\')">Hapus</a></td>'+
                                          '<td><a class="btn btn-warning btn-small" href="javascript:void(0)" onclick="editData(\''+daftar_data[i].id_data+'\')">Edit</a></td>';
                        data_app += '</tr>';

                    }
                   data_app += '</tbody></table>';

                }
                else {
                    data_app = "oops! no data...";
                }


               $('#list-data').html(data_app);
               $('#list-data').hide();
               $('#list-data').fadeIn(100);
            }
        }

		function editData(id){

            if (localStorage.daftar_data && localStorage.id_data){
                daftar_data = JSON.parse(localStorage.getItem('daftar_data'));
				idx_data = 0;
                for (i in daftar_data){
                    if (daftar_data[i].id_data == id){
						$("#eid_data").val(daftar_data[i].id_data);
						$("#enama").val(daftar_data[i].nama);
						$("#ealamat").val(daftar_data[i].alamat);
						$("#eket").val(daftar_data[i].ket);
						daftar_data.splice(idx_data, 1);
                    }
                    idx_data ++;
                }
				gantiMenu('edit-data');

            }

		}


        function simpanData(){
            nama = $('#nama').val();
            alamat = $('#alamat').val();
            ket = $('#ket').val();

            if (localStorage.daftar_data && localStorage.id_data){
                daftar_data = JSON.parse(localStorage.getItem('daftar_data'));
                id_data = parseInt(localStorage.getItem('id_data'));
            }
            else {
                daftar_data = [];
                id_data = 0;
            }

            id_data ++;
            daftar_data.push({'id_data':id_data, 'nama':nama, 'alamat':alamat, 'ket':ket});
            localStorage.setItem('daftar_data', JSON.stringify(daftar_data));
            localStorage.setItem('id_data', id_data);
            document.getElementById('form-data').reset();
            gantiMenu('list-data');

            return false;
        }

        function simpanEditData(){
            id_data = $('#eid_data').val();
            nama = $('#enama').val();
            alamat = $('#ealamat').val();
            ket = $('#eket').val();

            daftar_data.push({'id_data':id_data, 'nama':nama, 'alamat':alamat, 'ket':ket});
            localStorage.setItem('daftar_data', JSON.stringify(daftar_data));
            document.getElementById('eform-data').reset();
            gantiMenu('list-data');

            return false;
        }

        function hapusData(id){
            if (localStorage.daftar_data && localStorage.id_data){
                daftar_data = JSON.parse(localStorage.getItem('daftar_data'));

                idx_data = 0;
                for (i in daftar_data){
                    if (daftar_data[i].id_data == id){
                        daftar_data.splice(idx_data, 1);
                    }
                    idx_data ++;
                }

                localStorage.setItem('daftar_data', JSON.stringify(daftar_data));
                muatDaftarData();
            }
        }


        function gantiMenu(menu){
            if (menu == "list-data"){
                muatDaftarData();
                $('#tambah-data').hide();
                $('#list-data').fadeIn();
				$('#edit-data').hide();
            }
            else if (menu == "tambah-data"){
                $('#tambah-data').fadeIn();
                $('#list-data').hide();
				$('#edit-data').hide();
            }else if (menu == "edit-data"){
                $('#edit-data').fadeIn();
                $('#tambah-data').hide();
                $('#list-data').hide();
            }
        }
    </script>
</html>