Skip to content

Instantly share code, notes, and snippets.

@AlifArnado

AlifArnado/CRUD Sederhana CI 3 + Firebase

Created April 12, 2021 09:00
Show Gist options
  • Save AlifArnado/98a47722a46844208a0306a87fe73b45 to your computer and use it in GitHub Desktop.
Save AlifArnado/98a47722a46844208a0306a87fe73b45 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
CRUD Sederhana CI 3 + Firebase
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<title>CRUD Sederhana CI 3 + Firebase</title>
</head>
<body>
<div class="container" style="margin-top: 50px;">
<h4 class="text-center">CRUD Sederhana CI 3 + Firebase</h4><br>
<h5># Tambah Siswa</h5>
<div class="card card-default">
<div class="card-body">
<form id="addStudent" class="form-inline" method="POST" action="">
<div class="form-group mb-2">
<label for="nis" class="sr-only">Nomor Induk Siswa</label>
<input id="nis" type="text" class="form-control" name="nis" placeholder="Nomor Induk Siswa" required>
</div>
<div class="form-group mx-sm-3 mb-2">
<label for="name" class="sr-only">Nama Siswa</label>
<input id="name" type="text" class="form-control" name="name" placeholder="Nama Siswa" required>
</div>
<div class="form-group mb-2">
<label for="age" class="sr-only">Usia</label>
<input id="age" type="text" class="form-control" name="age" placeholder="Usia" required>
</div>
<button id="submitStudent" type="button" class="btn btn-primary mx-sm-3 mb-2">Tambah</button>
</form>
</div>
</div>
<br>
<h5># Data Siswa</h5>
<table class="table table-bordered">
<tr>
<th>NIS</th>
<th>Nama Siswa</th>
<th>Usia</th>
<th width="180" class="text-center">Action</th>
</tr>
<tbody id="tbody">
</tbody>
</table>
</div>
<!-- Update Model -->
<form action="" method="POST" class="users-update-record-model form-horizontal">
<div id="update-modal" data-backdrop="static" data-keyboard="false" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="custom-width-modalLabel"
aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" style="width:55%;">
<div class="modal-content" style="overflow: hidden;">
<div class="modal-header">
<h4 class="modal-title" id="custom-width-modalLabel">Update</h4>
<button type="button" class="close" data-dismiss="modal"
aria-hidden="true">×
</button>
</div>
<div class="modal-body" id="updateBody">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-light" data-dismiss="modal">Close
</button>
<button type="button" class="btn btn-success updateStudent">Update
</button>
</div>
</div>
</div>
</div>
</form>
<!-- Delete Model -->
<form action="" method="POST" class="users-remove-record-model">
<div id="remove-modal" data-backdrop="static" data-keyboard="false" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="custom-width-modalLabel"
aria-hidden="true" style="display: none;">
<div class="modal-dialog modal-dialog-centered" style="width:55%;">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="custom-width-modalLabel">Delete</h4>
<button type="button" class="close remove-data-from-delete-form" data-dismiss="modal" aria-hidden="true">×
</button>
</div>
<div class="modal-body">
<p>Apakah Anda yakin ingin menghapus data siswa ini?</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default waves-effect remove-data-from-delete-form" data-dismiss="modal">Close
</button>
<button type="button" class="btn btn-danger waves-effect waves-light deleteStudent">Delete
</button>
</div>
</div>
</div>
</div>
</form>
<script src="https://code.jquery.com/jquery-3.4.0.min.js"></script>
<!-- <script src="https://www.gstatic.com/firebasejs/5.10.1/firebase.js"></script> -->
<script src="https://www.gstatic.com/firebasejs/5.4.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/5.4.0/firebase-database.js"></script>
<script src="https://www.gstatic.com/firebasejs/6.0.2/firebase-messaging.js"></script>
<script type="text/javascript">
// Initialize Firebase
var firebaseConfig = {
apiKey: "AIzaSyDoK2YDdrD5JayHuitLBSSvxQYquNDjY58",
authDomain: "crud-codeigniter-84ffe.firebaseapp.com",
databaseURL: "crud-codeigniter-84ffe-default-rtdb.firebaseio.com",
storageBucket: "crud-codeigniter-84ffe.appspot.com",
messagingSenderId: "934808239287",
appId: "1:934808239287:web:59ac2fa1cae376b7a9a132",
measurementId: "934808239287",
appId: "1:934808239287:web:59ac2fa1cae376b7a9a132"
};
firebase.initializeApp(firebaseConfig);
var database = firebase.database();
var userId = 0;
nim = '125410148';
// ADD
// firebase.database().ref('/'+nim).set({
// nim: '125410148',
// nama: 'alif benden',
// umur: '27'
// });
// READ
firebase.database().ref('/'+nim).on('value', function (snapshot) {
var value = snapshot.val();
var htmls = [];
htmls.push('<tr>\
<td>' + value.nim + '</td>\
<td>' + value.nama + '</td>\
<td>' + value.umur + '</td>\
<td><button data-toggle="modal" data-target="#update-modal" class="btn btn-info updateStudent" data-id="' + value.nim + '">Update</button>\
<button data-toggle="modal" data-target="#remove-modal" class="btn btn-danger removeStudent" data-id="' + value.nim + '">Delete</button></td>\
</tr>');
$('#tbody').html(htmls);
$("#submitStudent").removeClass('disabled');
});
// UPDATE
var postData = {
nim: '125410148',
nama: 'alif benden arnado',
umur: '110',
};
console.log(postData);
var updates = {};
updates['/'+nim] = postData;
firebase.database().ref().update(updates);
// DELETE
// firebase.database().ref('/'+ nim).remove();
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment