JS & JQUERY – Erkamoo https://www.erkamoo.com Learn, Playing and Tech Sun, 13 Oct 2024 08:50:31 +0000 id hourly 1 https://wordpress.org/?v=6.7.2 Display datatables with json and groups based on certain columns https://www.erkamoo.com/2024/04/18/display-datatables-with-json-and-groups-based-on-certain-columns/ https://www.erkamoo.com/2024/04/18/display-datatables-with-json-and-groups-based-on-certain-columns/#respond Thu, 18 Apr 2024 14:19:09 +0000 https://www.erkamoo.com/?p=3866 dt-json

Display datatables with json and groups based on certain columns]]> Postingan kali ini akan membahas mengenai datatables, atau cara lain menampilkan datatables yaitu dengan json. Sebelumnya ada di artikel ini dengan judul Menampilkan Database Server Side dengan jQuery Datatables

Selain itu kali ini akan dibahas mengenai bagaimana cara menampilkan group di datatables. Berikut contoh tampilan hasilnya.

Jadi bisa di lihat diatas bahwa baris “My Company” awalnya merupakan kolom pada datatables. Dibawah merupakan kode lengkap untuk menampilkan grouping, dan juga ada custom filter dan penomoran otomatis.

var division = $('#DT_division').DataTable({
	"autoWidth": false,
	"lengthChange": true,
	"searching": true,
	"ordering": true,
	"info": true,
	"responsive": true,
	"lengthMenu": [[5, 10, 25, 50, 100, -1], [5, 10, 25, 50, 100, "All"]],
	"pagingType": "full_numbers",
	"language": {
		"oPaginate": {
			'sNext': '<i class="fa fa-angle-right"></i>',
			'sPrevious': '<i class="fa fa-angle-left"></i>',
			'sFirst': '<i class="fa fa-angle-double-left"></i>',
			'sLast': '<i class="fa fa-angle-double-right"></i>'
		}
	},
	"ajax": {
		url: URL + "setting/master/division/division_data",
		dataSrc: 'data'
	},
	"initComplete": function () {
		this.api().columns([3]).every(function () {
			var column = this;
			var select = $('<select class="form-control select2" style="width: 100%;"><option value="">** All</option></select>')
				.appendTo($("#divisionId").empty())
				.select2()
				.on('change', function () {
					var val = $.fn.dataTable.util.escapeRegex(
						$(this).val()
					);
					column
						.search(val ? '^' + val + '$' : '', true, false)
						.draw();
				});
			column.data().unique().sort().each(function (d, j) {
				select.append('<option value="' + d + '">' + d + '</option>');
			});
		});
	},
	"columns": [
		{ data: 'id', className: "text-center", orderable: false },
		{ data: 'companyId' },
		{ data: 'divisionCode' },
		{ data: 'divisionName' },
		{ data: 'status' },
		{ 
			data: 'action', 
			title: '<i class="fa fa-ellipsis-h"></i>',
			className: "text-center", 
			orderable: false, 
		},
	],
	"rowGroup": {
		startRender: function (rows, group, level) {
			if (level === 0) {
				return group;
			}
			else if (level === 1) {
				return group +' ('+rows.count()+' rows)';
			}
		},
		dataSrc: ["companyId"]
	},
	"columnDefs": [
		{
			"visible": false, 
			"targets": [1] 
		}
	],
});

division.on( 'draw.dt', function () {
	var PageInfo = $('#DT_division').DataTable().page.info();
	division.column(0, { page: 'current' }).nodes().each( function (cell, i) {
		cell.innerHTML = i + 1 + PageInfo.start;
	});
	$("#totalData").html(PageInfo.recordsDisplay+' Records');
});

Jangan lupa pada table berikan ID id=”DT_division” supaya table bisa dikenali oleh kode baris diatas.

Pada baris ini untuk menampilkan custom filter (select2), sumber datanya berasal dari kolom “divisionName” dengan tampilan berikut:

"initComplete": function () {
		this.api().columns([3]).every(function () {
			var column = this;
			var select = $('<select class="form-control select2" style="width: 100%;"><option value="">** All</option></select>')
				.appendTo($("#divisionId").empty())
				.select2()
				.on('change', function () {
					var val = $.fn.dataTable.util.escapeRegex(
						$(this).val()
					);
					column
						.search(val ? '^' + val + '$' : '', true, false)
						.draw();
				});
			column.data().unique().sort().each(function (d, j) {
				select.append('<option value="' + d + '">' + d + '</option>');
			});
		});
	},

Pada baris ini untuk menampilkan Jumlah Entries dan auto number ketika pencarian data dilakukan.

division.on( 'draw.dt', function () {
	var PageInfo = $('#DT_division').DataTable().page.info();
	division.column(0, { page: 'current' }).nodes().each( function (cell, i) {
		cell.innerHTML = i + 1 + PageInfo.start;
	});
	$("#totalData").html(PageInfo.recordsDisplay+' Records');
});

Terakhir, untuk menampilkan grouping terdapat pada baris kode berikut:

"rowGroup": {
		startRender: function (rows, group, level) {
			if (level === 0) {
				return group;
			}
			else if (level === 1) {
				return group +' ('+rows.count()+' rows)';
			}
		},
		dataSrc: ["companyId"]
	},
	"columnDefs": [
		{
			"visible": false, 
			"targets": [1] 
		}
	],

Dijelaskan diatas bahwa group tersebut bisa terdiri dari 2 level grouping yaitu level 0 dan level 1, pada scrip diatas hanya dilakukan 1 level saja yaitu grouping berdasarkan companyId kemudian di hide dari kolom.

Data json hanya contoh, silakan custom sendiri pada query yang digunakan.

header("Content-Type: application/json; charset=UTF-8");

$result = $db->query("QUERY Anda disini");
$data = [];

$i = 0;
foreach ($result as $row)
{
	$data[] = [
		"id"			=> $i+1,
		"divisionId"	=> $row->divisionId,
		"companyId"		=> $row->companyName,
		"divisionCode"	=> $row->divisionCode,
		"divisionName"	=> $row->divisionName,
		"status"		=> $row->status',
		"action"		=> ''
	];
	$i++;
}
$response = [
	"draw"            	=> 0,
	"recordsTotal"    	=> intval(count($result)),
	"recordsFiltered" 	=> intval(count($result)),
	"data"            	=> $data,
	"success"			=> true,
	"timestamp"			=> time()
];
echo json_encode($response);

Kurang lebih hasil akhir akan seperti berikut

]]> https://www.erkamoo.com/2024/04/18/display-datatables-with-json-and-groups-based-on-certain-columns/feed/ 0 Simple Quiz Using JSON https://www.erkamoo.com/2020/09/20/simple-quiz-using-json/ https://www.erkamoo.com/2020/09/20/simple-quiz-using-json/#respond Sun, 20 Sep 2020 13:11:21 +0000 https://www.erkamoo.com/?p=531 json data

Quiz ini untuk mencari kemungkinan terpapar Covid-19 sebagai Instrumen Self Assessment untuk mengumpulkan informasi berupa sikap, perilaku atau karakteristik]]> Selamat malam sahabat Bar-bar! Kali ini admin akan membuat Quiz sederhana dari data json. Quiz ini bertujuan untuk mengumpulkan informasi dari user berupa sikap, perilaku atau karakteristik.

Kuesioner

Merupakan pertanyaan-pertanyaan yang tersusun untuk digunakan sebagai alat pengumpulan data melalui survey.

Untuk pertanyaan kuesioner akan admin sajikan dari darya-varia.com mengenai Instrumen Self Assessment Covid-19

Jumlah pertanyaan berjumlah 6 dengan Scor yang sudah ditentukan sebagai berikut.

NOKETERANGANJIKA YAJIKA TIDAK
1.Apakah pernah keluar rumah/ tempat umum (pasar, fasyankes, kerumunan orang, dan lain lain)?10
2.Apakah pernah menggunakan transportasi umum?10
3.Apakah pernah melakukan perjalanan ke luar kota/internasional? (wilayah yang terjangkit/zona merah)10
4.Apakah anda mengikuti kegiatan yang melibatkan orang banyak?10
5.Apakah memiliki riwayat kontak erat dengan orang yang dinyatakan ODP, PDP atau konfirm COVID-19 (berjabat tangan, berbicara, berada dalam satu ruangan/ satu rumah)?50
6.Apakah pernah mengalami demam/ batuk/pilek/sakit tenggorokan/sesak dalam 14 hari terakhir?50
0 = Risiko Kecil
1-4 = Risiko Sedang
5 = Risiko Besar

Tindak Lanjut

  • Risiko besar, agar dilakukan investigasi dan tidak diperkenankan masuk ke tempat acara. Tamu dilakukan pemeriksaan RT-PCR, jika tidak tersedia dapat dilakukan Rapid Tes oleh petugas kesehatan/fasyankes setempat.
  • Risiko kecil – sedang, diperbolehkan masuk namun dilakukan pemeriksaan suhu di pintu masuk. Apabila didapatkan suhu ≥ 37,3°C agar dilakukan investigasi dan pemeriksaan petugas kesehatan. Jika dipastikan tamu tidak memenuhi kriteria OTG, ODP atau PDP. Tamu dapat masuk ke tempat acara.

Implementasi

Pertanyaan-pertanyaan diatas kemudian di tuangkan kedalam bentuk JSON seperti berikut.

[
    {
		"qNum": "1",
        "question": "Apakah pernah keluar rumah/ tempat umum (pasar, fasyankes, kerumunan orang, dan lain lain)?",
        "choices": ["Ya", "Tidak"],
        "correctAnswer": [1, 0]
    },
    {
		"qNum": "2",
        "question": "Apakah pernah menggunakan transportasi umum?",
        "choices": ["Ya", "Tidak"],
        "correctAnswer": [1, 0]
    },
    {
		"qNum": "3",
        "question": "Apakah pernah melakukan perjalanan ke luar kota/internasional? (wilayah yang terjangkit/zona merah)",
        "choices": ["Ya", "Tidak"],
        "correctAnswer": [1, 0]
    },
    {
		"qNum": "4",
        "question": "Apakah anda mengikuti kegiatan yang melibatkan orang banyak?",
        "choices": ["Ya", "Tidak"],
        "correctAnswer": [1, 0]
    },
    {
		"qNum": "5",
        "question": "Apakah memiliki riwayat kontak erat dengan orang yang dinyatakan ODP, PDP atau konfirm COVID-19 (berjabat tangan, berbicara, berada dalam satu ruangan/ satu rumah)?",
        "choices": ["Ya", "Tidak"],
        "correctAnswer": [5, 0]
    },
    {
		"qNum": "6",
        "question": "Apakah pernah mengalami demam/ batuk/pilek/sakit tenggorokan/sesak dalam 14 hari terakhir?",
        "choices": ["Ya", "Tidak"],
        "correctAnswer": [5, 0]
    }
]

Siapkan file php atau html seperti berikut.

<div class="col-md-6">
	<div class="box box-widget">
		<div class="box-header with-border">
			<div class="user-block">
				<h3 class="box-title">Simple Quiz Using JSON</h3>
			</div>
		</div>
		<div class="box-body">
			<div id="result"></div>
			<div id="loadAlert"></div>
			<div id="isValid"></div>
		</div>
		<div id="content">
			<div class="box-body" id="quiz">
				<form id="myForm" action="" method="post">
					<div class="form-group questions"></div>
					<div class="form-group answers"></div>
				</form>	
			</div>
		</div>
		<button class="btn btn-primary" name="nextButton" id="nextButton">Selanjutnya</button>
	</div>
</div>

Kemudian load json dengan menggunakan httprequest dan letakan pada halaman yang sama dengan quiz.html diatas.

<script type="text/javascript">
var allQuestions = null;
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        allQuestions = JSON.parse(this.responseText);

        var currentPage = -1;
        var totalScore = 0;
        var review = false;
		var res = 0;

        $(document).ready(function () {
            $("#quiz").hide();
			$("#isValid").hide();
            $("#loadAlert").hide();
			$("#result").hide();
            $("#nextButton").html("Mulai");
            $("#nextButton").click(function(){
                $("#nextButton").html("Selanjutnya");
                var answerArray = $("#myForm").serializeArray();
                if(answerArray.length==0 && currentPage>=0 && review==true)
				{
                    $("#loadAlert").html("<h3 class='alert alert-warning'>Silakan pilih jawaban.</h3>");
                    $("#loadAlert").fadeIn('fast');
                }
				else {
                    $("#loadAlert").hide();
					for(var i = 0, len = answerArray.length; i < len; i++)
					{
						totalScore += parseFloat(answerArray[i].value);
					}
					$("#content").fadeOut('slow',function(){
						currentPage++;
						if(currentPage==allQuestions.length)
						{
							$("#isValid").show().html('<input type="checkbox" id="myBtn2" name="Terms" required=""> <b>Saya menyatakan informasi yang saya sampaikan adalah benar dan sesuai dengan Syarat dan Ketentuan yang berlaku</b>');
							$("#quiz").hide();
							$('#nextButton').attr("disabled",true);
							$("#myBtn2").click(function(){
									if($(this).prop("checked") == true){
										$('#nextButton').prop("disabled", false);
									}
									else if($(this).prop("checked") == false){
										$('#nextButton').prop("disabled", true);
									}
								});
							$("#nextButton").html("Kirimkan");
							
							$("#nextButton").click(function(){
								$("#nextButton").hide();
								$.post("submit.php", {value: totalScore}, function(result){
									$("#result").show().html(result);
									$("#isValid").hide();
								});
							});
						}
						else {
							review = true;
							var thisQ = allQuestions[currentPage];
							$("#quiz").show();
							$(".questions").html(thisQ.qNum+'. '+thisQ.question);
							$(".answers").empty();
							var choiceArray = thisQ.choices;
							var correctAnswer = thisQ.correctAnswer;
							for(var i=0; i<choiceArray.length; i++) {
								$(".answers").append('<div class="a'+i+'"><input type="radio" id="q'+currentPage+'" name="q'+currentPage+'" value="'+correctAnswer[i]+'"> ' + choiceArray[i] + '</div>');
							}
						}
					});
					$("#content").fadeIn('slow');
                }
            })
        });
    }
};
xmlhttp.open("GET", "data.json", true);
xmlhttp.send();
</script>

Jangan lupa load library jQuery terlebih dahulu pada tag head di html

<script src="https://code.jquery.com/jquery-3.1.0.js"></script>

Keterangan

xmlhttp.open("GET", "data.json", true);

script diatas untuk mendapatkan data dari data.json kemudian di parsing dengan JSON.parse allQuestions = JSON.parse(this.responseText);

Untuk mendapatkan nilai array pada tiap jawaban, maka di perlukan script berikut untuk mengirim setiap jawabannya.

var answerArray = $("#myForm").serializeArray();

Untuk menampung nilai array tiap jawaban, maka diakumulasi pada array berikut.

for(var i = 0, len = answerArray.length; i < len; i++)
{
	totalScore += parseFloat(answerArray[i].value);
}

Untuk pengiriman data dan menampilkan result, diperlukan file submit.php seperti yang terlampir pada kode javascipt dibawah dengan fungsi $.post() kemudian di kirim parameter value dengan nilai totalScore 

$("#nextButton").click(function(){
	$("#nextButton").hide();
	$.post("submit.php", {value: totalScore}, function(result){
		$("#result").show().html(result);
		$("#isValid").hide();
	});
});

Dibawah merupaka file submit.php untuk menangkap parameter yang sebelumnya di kirimkan oleh fungsi $.post()

if(isset($_POST))
{
	echo '<h3>Result</h3>';
	if($_POST['value'] == 0)
	{
		$res = "Risiko Kecil";
		$scr = "Diperbolehkan masuk namun dilakukan pemeriksaan suhu di pintu masuk. Apabila
			didapatkan suhu ≥ 37,3°C agar dilakukan investigasi dan pemeriksaan petugas kesehatan. Jika dipastikan
			tamu tidak memenuhi kriteria OTG, ODP atau PDP. Tamu dapat masuk ke tempat acara.";
	}
	else if($_POST['value'] >= 1 && $_POST['value'] <= 4){
		$res = "Risiko  Sedang";
		$scr = "Diperbolehkan masuk namun dilakukan pemeriksaan suhu di pintu masuk. Apabila
			didapatkan suhu ≥ 37,3°C agar dilakukan investigasi dan pemeriksaan petugas kesehatan. Jika dipastikan
			tamu tidak memenuhi kriteria OTG, ODP atau PDP. Tamu dapat masuk ke tempat acara.";
	}
	else{
		$res = "Risiko  Besar";
		$scr = "Agar dilakukan investigasi dan tidak diperkenankan masuk ke tempat acara. Tamu dilakukan pemeriksaan RT-PCR, jika tidak tersedia dapat dilakukan Rapid Tes oleh petugas kesehatan/fasyankes setempat.";
	}
		
	echo '<p>Nilai Kuesioner Anda : '.$_POST['value'].' ('.$res.')</p>';
	echo '<p><b>Tindak Lanjut</b></p>';
	echo $scr;
}

Screenshot

Klik Mulai untuk memulai load pertanyaan pertama
Pilih jawaban atas pertanyaan kuesioner
Jika pertanyaan belum di isi, akan tampil informasi error seperti diatas.
Setelah pertanyaan terakhir, akan di konfirmasi untuk mengirim parameter array totalScore. klik Checkbox kemudian klik Kirimkan untuk mendapatkan Hasil Kuesioner.
Result/Hasil diatas merujuk pada tabel Scrore dan Tindak Lanjut diatas.

Demikian, semoga bisa dijadikan referensi dalam pembuatan kuesioner Instrumen Self-Assessment covid-19.

Referensi

darya-varia.com

]]> https://www.erkamoo.com/2020/09/20/simple-quiz-using-json/feed/ 0 How can I print using JQuery https://www.erkamoo.com/2020/08/09/how-can-i-print-using-jquery/ https://www.erkamoo.com/2020/08/09/how-can-i-print-using-jquery/#respond Sun, 09 Aug 2020 08:08:48 +0000 https://www.erkamoo.com/?p=431 How can I print using JQuery

Menggunakan Metode window.print(); yaitu membuka Kotak Dialog Cetak, yang memungkinkan pengguna memilih opsi pencetakan dengan library dari jquery.print]]> Hai, balik lagi bareng admin.. kali ini admin akan share bagaimana cara dan tips untuk print halaman atau selector yang dipilih.

Walaupun pada browser sudah disediakan tools untuk print dengan menekan tombol keyboard Ctrl+P, Anda juga dapat mencetak melalui Print dialog dengan menekan tombol keyboard Ctrl+Shift+P.

Tapi pada beberapa web biasanya juga disediakan fasilitas untuk print bagian tertentu saja diperbolehkan di print. Misalnya disediakan pada bagian untuk mencetak artikel.

Berikut beberapa tips untuk mencetak halaman atau bagian yang diselector saja yg bisa di print.

Menggunakan Metode window.print(); yaitu membuka Kotak Dialog Cetak, yang memungkinkan pengguna memilih opsi pencetakan yang disukai. Umumnya hanya pada halaman yang terbuka.

$('.printMe').click(function(){
     window.print();
});

Bagaimana jika kita ingin mencetak pada bagian tertentu pada web yang di tentukan. Pada contoh dibawah kita akan print kotak “Please print me!” dengan selector #sample2

How can I print using JQuery
$('.sample2').click(function(){
	$("#sample2").print();
});

Pada fungsi diatas, admin menggunakan library yang bisa di unduh dari github DoersGuild, ada beberapa opsi yang bisa digunakan jika menggunakan library tersebut.

$("#myElementId").print(/*options*/);
$.print("#myElementId" /*, options*/);

Disini supaya tampilannya sama persis dengan selektor yang diinginkan, anda bisa menambahkan CSS sendiri pada options stylesheet: css_anda.css

$("#myElementId").print({
	globalStyles: true,
	mediaPrint: false,
	stylesheet: null,
	noPrintSelector: ".no-print",
	iframe: true,
	append: null,
	prepend: null,
	manuallyCopyFormValues: true,
	deferred: $.Deferred(),
	timeout: 750,
	title: null,
	doctype: '<!doctype html>'
});

Jangan lupa sisipkan jquery print nya seperti berikut.

<script type="text/JavaScript" src="path/to/jquery.print.js"></script>

Untuk demo bisa anda jumpai pada halaman demo Print.

Selain library diatas, ada beberapa library lainnya sebagai referensi:

  1. printThis
  2. jquery.printPage.js
  3. jQuery PrintMe
  4. jQuery PrintArea

Demikian tips untuk print pada halaman web yang bisa anda kembangkan. Salam Barbar dari admin.

]]> https://www.erkamoo.com/2020/08/09/how-can-i-print-using-jquery/feed/ 0 How to Upload File and Change Avatar Image without Refresh https://www.erkamoo.com/2020/08/06/how-to-upload-file-and-change-avatar-image-without-refresh/ https://www.erkamoo.com/2020/08/06/how-to-upload-file-and-change-avatar-image-without-refresh/#respond Thu, 06 Aug 2020 09:27:23 +0000 https://www.erkamoo.com/?p=394 How to Upload File and Change Avatar Image without Refresh

Contoh simple untuk mengupload menggunakan PHP jQuery dan untuk upload banyak file sangat berguna di mana Anda perlu mengunggah banyak file dalam aplikasi web]]> Hi, kali ini admin akan menulis mengenai cara upload file dan change avatar tanpa refresh halaman.

Contoh simple untuk mengupload banyak file menggunakan PHP jQuery. Dan untuk upload banyak file ini sangat berguna di mana Anda perlu mengunggah banyak file dalam aplikasi web.

Langkah 1

  • Siapkan 2 file, v_upload.php dan submit.php
  • Es teh manis dan pisang goreng 🙂

Langkah 2

Langkah 3

Siapkan file v_upload.php dan buat kurang lebih seperti tampilan dibawah

How to Upload File and Change Avatar Image without Refresh
  • Include jQuery library.
  • CSS & HTML page with upload field.
  • jquery/javascript code.
  • PHP script to store the file.
<form method="POST" action="" class="form-horizontal" enctype="multipart/form-data">
	<div id="drop_file_zone" ondrop="upload_file(event)" ondragover="return false">
		<div id="drag_upload_file">
			<p>Drop file here</p>
			<p>or</p>
			<p><input type="button" value="Browse" onclick="file_explorer();"></input></p>
			<input type="file" id="selectfile" multiple></input>
		</div>
	</div>
	<div id="isView_file"></div>
	<input type="hidden" name="fileLain" id="fileLain" style="width:100%" value=""></input>
</form>	

<form method="POST" action="" class="form-horizontal" enctype="multipart/form-data">
	<div id="preview">
		<input name="file" id="file" onchange="$(this).parent().parent();" style="display: none;" type="file"></input>
		<img class="profile-user-img img-responsive img-circle hilang" src="<?php echo "assets/images/avatar.png"; ?>" alt="User profile picture" onclick="$(this).parent().find('input[type=file]').click();">
	</div>
</form>

Tambahkan CSS supaya tampilan pada Simple upload seperti diatas

<style type="text/css">
#drop_file_zone {
    background-color: #f5f5f5; 
    border: #ccc 2px dashed;
    padding: 8px;
    font-size: 18px;
}
#drag_upload_file {
  width:100%;
  margin:0 auto;
}
#drag_upload_file p {
  text-align: center;
}
#drag_upload_file #selectfile {
  display: none;
}
</style>

Tambahkan juga jquery / javascript seperti dibawah ini. Fungsi ini untuk post action supaya tidak refresh saat browse dan panggil submit.php

<script type="text/javascript">
// SIMPLE UPLOAD
var fileobj;
function upload_file(e) {
    e.preventDefault();
    ajax_file_upload(e.dataTransfer.files);
}
 
function file_explorer() {
    document.getElementById('selectfile').click();
    document.getElementById('selectfile').onchange = function() {
        files = document.getElementById('selectfile').files;
        ajax_file_upload(files);
    };
}
 
function ajax_file_upload(file_obj) {
    if(file_obj != undefined) {
        var form_data = new FormData();
        for(i=0; i<file_obj.length; i++) {  
            form_data.append('file[]', file_obj[i]);  
        }
        $.ajax({
            type: 'POST',
            url: "submit.php?upload=sample1",
            contentType: false,
            processData: false,
            data: form_data,
            success:function(response) {
				var convert = response.slice (0, -1);
                $('#fileLain').val(convert);
				
				$('#isView_file').html(convert.split(",").join("<br />"));
                $('#selectfile').val('');
            }
        });
    }
}
$(function() {
	// CHANGE AVATAR IMAGE
	$("#file").change(function() {
		var fd = new FormData();
		var files = $('#file')[0].files[0];
		fd.append('file',files);
		
		// AJAX request
		$.ajax({
			type: 'POST',
			url: "submit.php",
			data: fd,
			contentType: false,
			processData: false,
			success: function(response){
				if(response !== 'error'){
					// Show image preview
					$('#preview').html("<img class='profile-user-img img-responsive img-circle ada' src='file/"+response+"' alt=\"User profile picture\">");
					$('.image').html("<img src=\"file/"+response+"\" class=\"img-circle\" alt=\"User Image\">");
				}
				else{
					alert('Info : Please select a valid image file (JPEG/JPG/PNG).');
				}
			}
		});
	});
   
});
</script>

Langkah 4

Buat file submit.php, isinya seperti berikut

  • require / include file class yang sudah di download tadi
  • masukan function berikut untuk membantu filtering dan cek httprequest
  • script request upload dan berikut file lengkapnya
<?php
require "../../../includes/upload.php";
require "../../../includes/zebra_image.php";
// AJAX request
function is_ajax() 
{
	return isset($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest';
}
function filter($str) 
{
	$str = preg_replace('|%([a-fA-F0-9][a-fA-F0-9])|', '', $str);
	$str = preg_replace('/[a-z0-9]+;/i','',$str); 
	$str = preg_replace('/\s+/', ' ', $str); // spasi lebih
	$str = preg_replace('/[^%.,+&@#?$=()\/A-Za-z0-9 _-]/', '', $str);
	return $str;
}
if(is_ajax())
{
	if(isset($_REQUEST['upload']))
	{	
		foreach($_FILES['file']['name'] as $key=>$val)
		{
			$file_name = $_FILES['file']['name'][$key];
		 
			$ext = strtolower(pathinfo($file_name, PATHINFO_EXTENSION));
		 
			$filenamewithoutextension = pathinfo($file_name, PATHINFO_FILENAME);
		 
			$filename_to_store = filter($filenamewithoutextension). '_' .uniqid(). '.' .$ext;
			move_uploaded_file($_FILES['file']['tmp_name'][$key], getcwd(). '/file/'.$filename_to_store);
			
			echo $filename_to_store.",";
		}
	}
	else{
		if (isset($_FILES['file']))
		{
			$allowedFile = array("jpeg", "jpg","png");
			$upload = new Upload($_FILES['file'],"file/",1000000,$allowedFile);
			$uploadedFile = $upload->GetResult()['path'];
			
			$temporary 			= explode(".", $_FILES["file"]["name"]);
			$file_extension 	= end($temporary);
			
			$resize_image = new Zebra_Image();
			$resize_image->source_path = getcwd(). 'file/'.$uploadedFile;
			// indicate a target image
			$resize_image->target_path = getcwd(). 'file/' . $uploadedFile;
			// resize
			// and if there is an error, show the error message
			if (!$resize_image->resize(100, 100, ZEBRA_IMAGE_CROP_CENTER));
			// from this moment on, work on the resized image
			$resize_image->source_path = getcwd(). 'file/' . $uploadedFile;
			
			$resize_image->preserve_aspect_ratio = true;
			$resize_image->enlarge_smaller_images = true;
			$resize_image->preserve_time = true;
		}
		
        if(!empty($_FILES))
		{			
			try
			{
				## ALERT
				if(!empty($_FILES["file"]["name"])){
					
					if(in_array(strtolower($file_extension), $allowedFile))
					{
						/*
						// Modify here for saving into database
						
						$data = array();
						if(!empty($uploadedFile)){
							array_push($data['usr_img'] = $uploadedFile);
						}
						db->update();
						*/
						echo $uploadedFile;
					}
					else{
						echo "error";
					}
				}
			}
			catch(Exception $e){
				echo $e->getMessage();
			}
        }
		else{
			echo 'Error: fail upload data.';
		}
	}
}

Langkah 5

Jangan lupa siapkan folder “file” untuk menampung file-file hasil upload tersebut

Demikian tutorial untuk kali ini, di lanjutkan ke tutorial selanjutnya.

]]> https://www.erkamoo.com/2020/08/06/how-to-upload-file-and-change-avatar-image-without-refresh/feed/ 0 Create Update Delete database dengan PHP MySQL dan jQuery https://www.erkamoo.com/2020/07/05/create-update-delete-database-dengan-php-mysql-dan-jquery/ https://www.erkamoo.com/2020/07/05/create-update-delete-database-dengan-php-mysql-dan-jquery/#respond Sun, 05 Jul 2020 04:56:32 +0000 https://erkamoo.com/?p=302 Create Update Delete database dengan PHP MySQL dan jQuery

Paling dicari web programmer! Membuat update delete database dengan PHP MySQL dan jQuery, sehingga saat update dan delete form tidak memerlukan refresh halaman.]]> Seperti yang admin janjikan pada tutorial sebelumya “jQuery DataTables with Custom Search Filter“, pada tutorial kali ini admin akan membuat tutorial mengenai CUD (Create Update Delete) dengan database MySQL.

Adapun yang harus di siapkan yaitu:

  1. Tabel Database
    Admin akan melanjutkan pada table database sebelumnya (tbl_employee) bisa di lihat pada tutorial “Menampilkan Database Server Side dengan jQuery Datatables“
  2. Form Input
    Seperti biasa, admin akan menggunakan bootstrap template AdminLTE
  3. Library jQuery
    Link library sudah tersedia pada tutorial “Menampilkan data dengan jQuery DataTables“
  4. Es teh manis (untuk menemani supaya tidak dehidrasi)

Lanjutkan!

Kembali ke tutorial sebelumnya “jQuery DataTables with Custom Search Filter” tambahkan kolom Action pada tabel di akhir, seperti berikut.

Create Update Delete database dengan PHP MySQL dan jQuery

Tambahkan juga link untuk tombol +Add kemudian arahkan link tersebut pada halaman form. misal datatables_form_cud.php

Sehingga untuk link edit data form bisa menggunakan datatables_form_cud.php?id=1 untuk parameter querynya.

Untuk menambahkan kolom Action diatas, berikut script penambahannya.

"columns": [
	{ data: 'emp_id', orderable: false }, 
	{ data: 'emp_name' }, 
	{ data: 'emp_position' },
	{ data: 'emp_office' },
	{ data: 'emp_age' },
	{ data: 'emp_startdate' },
	{ data: 'emp_salary' },
	{ data: 'control', className: "text-center", orderable: false }
]

Data control ini nanti akan di tambahkan juga pada data.php untuk menampilkan tombol Edit dan Delete

foreach($empQuery as $rows)
{
	$control = '<div class="btn-group">';
		$control .= '<a class="btn btn-primary btn-xs" title="Edit Data" href="datatables_form_cud?id='.$rows["emp_id"].'"><i class="fa fa-pencil"></i></a> ';
		
		$control .= '<button type="button" class="btn btn-danger btn-xs" title="Hapus Data" onClick="Delete('submit.php?del=', 'table_id', ''.$rows["emp_id"].''); return false;"><i class="fa fa-close"></i></button> ';
	$control .= '</div>';
	
	$data[] = array(
		"emp_id"		=> $i+1,
		"emp_name"		=> $rows['emp_name'],
		"emp_position"	=> $rows['emp_position'],
		"emp_office"	=> $rows['emp_office'],
		"emp_age"		=> $rows['emp_age'],
		"emp_startdate"	=> to_date($rows['emp_startdate'],'ymd-dmy'),
		"emp_salary"	=> rp_digit($rows['emp_salary']),
		"control"		=> $control
   );
   $i++;
}
onClick="Delete('submit.php?del=', 'table_id', ''.$rows["emp_id"].''); return false;"
function Delete(func, data, id)
{
	var confm = confirm("Hapus data ini?");
	
	if(confm)
	{
		$.ajax({
			url: func+""+id,
			type: "POST",
			cache: false,
			success: function(html){
				if($.trim(html) == 'OK')
				{
					if(data == 'REFRESH')
					{
						document.location.reload();
					}
					else{
						$("#"+data).DataTable().ajax.reload(null, false);
					}
					eModal.alert('<div class="alert alert-success" role="alert">Data berhasil di hapus!!</div>', 'Info');
				}
				else{
					eModal.alert('<div class="alert alert-danger" role="alert">'+$.trim(html)+'</div>', 'Warning');
				}
			},
			error:function(xhr, status, error){
				alert(error);
			}
		});
	}
}

Siapkan form html nya, kurang lebih seperti dibawah

<form id="runForm" method="POST" action="" class="form-horizontal">
	<div class="row">
	
		<div class="col-md-5">									
			<div class="box box-widget">
				<div class="box-header with-border">
					<div class="user-block">
						<h3 class="box-title">Data <?php echo ($id) ? $data[0]['emp_id'] : "";?></h3>
					</div>
				</div>
				<div class="box-body">
					
					<div class="form-group">
						<label class="col-sm-4 control-label box_labels">Name*</label>
						<div class="col-md-8"><input type="text" name="emp_name" class="form-control emp_name" value="<?php echo ($id) ? $data[0]['emp_name'] : "";?>"></div>	
					</div>
					
					<div class="form-group">
						<label class="col-sm-4 control-label box_labels">Position*</label>
						<div class="col-md-8"><input type="text" name="emp_position" class="form-control" value="<?php echo ($id) ? $data[0]['emp_position'] : "";?>"></div>	
					</div>
					
					<div class="form-group">
						<label class="col-sm-4 control-label box_labels">Office*</label>
						<div class="col-md-8"><input type="text" name="emp_office" class="form-control" value="<?php echo ($id) ? $data[0]['emp_office'] : "";?>"></div>	
					</div>
					
					<div class="form-group">
						<label class="col-sm-4 control-label box_labels">Age*</label>
						<div class="col-md-5"><input type="text" name="emp_age" class="form-control" value="<?php echo ($id) ? $data[0]['emp_age'] : "";?>"></div>	
					</div>
					
					<div class="form-group">
						<label class="col-sm-4 control-label box_labels">Salary*</label>
						<div class="col-md-5"><input type="text" name="emp_salary" class="form-control" value="<?php echo ($id) ? $data[0]['emp_salary'] : "";?>"></div>	
					</div>
					
					<div class="form-group">
						<label class="col-sm-4 control-label box_labels">Start Date*</label>
						<div class="col-md-5">
							<div class="input-group">
								<div class="input-group-addon"><i class="fa fa-calendar"></i></div>
								<input type="text" name="emp_startdate" class="form-control datepicker" value="<?php echo ($id) ? to_date($data[0]['emp_startdate'],'ymd-dmy') : date('d/m/Y');?>" autocomplete="off">
							</div>
						</div>
					</div>
						
				</div>
			</div>
		</div>
		
		<div class="col-md-3">
			<div class="box box-widget">
				<div class="box-header with-border">
					<div class="user-block">
						<span class="pull-right">
							<a href="<?php echo BASE_URL; ?>datatables_form" class="btn btn-default btn-sm"><i class="fa fa-reply"></i> Back</a>
							<input type="submit" class="btn btn-primary btn-sm save" value="Save" />
						</span>
					</div>
				</div>
			</div>
			
			<div style="display:nome;" id="loadAlert"></div>
		</div>
		
	</div>
	
	<input type="hidden" name="emp_id" value="<?php echo ($id) ? $data[0]['emp_id'] : "";?>">
</form>
Create Update Delete database dengan PHP MySQL dan jQuery

Karna pengiriman parameter form ini menggunakan ajax jQuery, jadi saat tombol Save di klik, maka atribut ID=runForm pada form akan di kenali oleh function jquery dibawah.

$(function() {
		
   $(".emp_name").focus();
   $("#runForm").submit(function(e) {
		e.preventDefault();
		var form = $(this);
		$.ajax({
			url: "submit.php",
			type: "POST",
			dataType : 'json',
			data: form.serialize(),
			cache: false,
			beforeSend: function(){ $(".save").val('Saving...');},
			success: function(html){
				if($.trim(html.msg) == 'OK'){
					var xx = window.location.href = "datatables_form/";
					if(xx){
						$("#loadAlert").html('<div class="alert alert-success alert-dismissible"><button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>Data berhasil di simpan!!</div>');
					}
				}
				else{
					$(".save").val('Save');
					$(".emp_name").focus();
					$("#loadAlert").html('<div class="alert alert-warning alert-dismissible"><button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>'+$.trim(html.msg)+'</div>');
				}
			},
			error:function(xhr, status, error){
				$("#loadAlert").html('<div class="alert alert-danger alert-dismissible"><button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>'+error+'</div>');
			}
		});
		return false;
	});
});

Kemudian siapkan file submit.php untuk action post ketika save di click.

if(is_ajax())
{
	if(isset($_REQUEST['del'])){
		delForm($_REQUEST['del']);
	}
	else{
		$data	= array(
			'emp_name'		=> $_POST['emp_name'],
			'emp_position'	=> $_POST['emp_position'],
			'emp_office'	=> $_POST['emp_office'],
			'emp_age'		=> to_number($_POST['emp_age']),
			'emp_salary'	=> to_number($_POST['emp_salary']),
			'emp_startdate'	=> to_date($_POST['emp_startdate'],"dmy-ymd")
		);
		runForm($data, $_POST['emp_id']);
	}
}

fungsi is_ajax() untuk menecek http request

function is_ajax() 
{
	return isset($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest';
}

Setelah pengiriman data pada form, terakhir siapkan tangkapan untuk menampung data post submit.php yang akan di kirim ke database.

### runForm
function runForm($gData, $id) 
{
	global $db_mysql;
	
	$arr 	= array();
	
	if($gData['emp_name'] == "")
	{
		$arr['msg'] = 'Name is empty!';
	}
	else if($gData['emp_position'] == "")
	{
		$arr['msg'] = 'Position is empty!';
	}
	else if($gData['emp_office'] == "")
	{
		$arr['msg'] = 'Office is empty!';
	}
	else if($gData['emp_age'] == "")
	{
		$arr['msg'] = 'Age is empty!';
	}
	else if($gData['emp_salary'] == "")
	{
		$arr['msg'] = 'Salary is empty!';
	}
	else if($gData['emp_startdate'] == "")
	{
		$arr['msg'] = 'Start date is empty!';
	}
	else{
		if(empty($id)){
			$data = $db_mysql->insert("tbl_employee", $gData);
		}
		else{
			$data = $db_mysql->update("tbl_employee", $gData, "emp_id = '$id'");
		}
		
		if($data > 0)
		{			
			$arr['msg'] = 'OK';
		}
		else{
			$arr['msg'] = 'Failed!!';
		}
	}
	echo json_encode($arr);
}
function delForm($id = null)
{	
	global $db_mysql;
	
	if($id != null){
		$db_mysql->delete("tbl_employee", "emp_id = '$id'");
		echo 'OK';
	}
	else{
		echo "Error : delete data.";
	}
}

Hasil akhir yang di harapkan akan jadi seperti berikut:

Create Update Delete database dengan PHP MySQL dan jQuery
Create Update Delete database dengan PHP MySQL dan jQuery

Demikian, untuk kode lengkap bisa di cek pada Link download dibawah

Share to Unlock Contentimage/svg+xml
Unlock this exclusive content by using one of the sharing buttons below.
ShareTweet
]]> https://www.erkamoo.com/2020/07/05/create-update-delete-database-dengan-php-mysql-dan-jquery/feed/ 0 jQuery DataTables with Custom Search Filter https://www.erkamoo.com/2020/06/26/jquery-datatables-with-custom-search-filter/ https://www.erkamoo.com/2020/06/26/jquery-datatables-with-custom-search-filter/#respond Fri, 26 Jun 2020 08:31:07 +0000 https://erkamoo.com/?p=247 jQuery DataTables with Custom Search Filter

Membuat Lanjutan Custom Search Filter yang keren dengan jQuery DataTables. Dimana Filter diletakan di luar library datatables yang di sediakan secara default.]]> Hai! Seperti rencana sebelumnya, admin akan membuat jQuery DataTables dengan custom Search Filter. Dimana Filter terdapan di luar library datatables yang di sediakan secara default.

Sebelumnya cek kembali Tutorial sebelumnya Menampilkan Database Server Side dengan jQuery Datatables. Yang ditambahkan ada disisi kodingan, tidak pada databasenya.

Check This Out..

1. Buat Filter

di contoh pakai AdminLTE berikut tampilannya

jQuery DataTables with Custom Search Filter

kode lengkap seperti berikut

<select class="form-control select2" style="width: 100%;" name="emp_position" id="emp_position">
	<option value="">** All</option>
	<?php
	if(count(getAllEmployee_position()))
	{
		foreach(getAllEmployee_position() as $getPosition)
		{
		?>
		<option value="<?php echo $getPosition['emp_position'];?>"><?php echo $getPosition['emp_position'];?></option>
		<?php
		}
	}
	?>
</select>

<select class="form-control select2" style="width: 100%;" name="emp_office" id="emp_office">
	<option value="">** All</option>
	<?php
	if(count(getAllEmployee_office()))
	{
		foreach(getAllEmployee_office() as $getOffice)
		{
		?>
		<option value="<?php echo $getOffice['emp_office'];?>"><?php echo $getOffice['emp_office'];?></option>
		<?php
		}
	}
	?>
</select>
		
<div class="form-group">
	<label class="col-sm-4 control-label box_labels">Total Data</label>
	<div class="col-md-7 label_pas" id="totalData"> </div>
</div>

2. Tambahkan model fungsi database

# Untuk filter Position
function getAllEmployee_position()
{	
	global $db_mysql;
	
	$result = $db_mysql->select("SELECT distinct emp_position FROM tbl_employee");
	return $result;
}

# Untuk filter Office
function getAllEmployee_office()
{	
	global $db_mysql;
	
	$result = $db_mysql->select("SELECT distinct emp_office FROM tbl_employee");
	return $result;
}

3. Edit dan tambahkan pada library Datatables

Cek kembali pada kode library tutorial sebelumnya, di baris 21 point 3

"ajax": {
	"url": "data.php",
	"data": function(data){
		// Read values
		var emp_position = $('#emp_position').find(':selected').val();
		var emp_office = $('#emp_office').find(':selected').val();

		// Append to data
		data.emp_position = emp_position;
		data.emp_office = emp_office;
   }
},
"drawCallback": function( settings, start, end, max, total, pre ) {  
	$("#totalData").html(this.fnSettings().json.iTotalDisplayRecords+" Record"); // total number of rows
},
"initComplete" : function () {
	table_id.buttons().container().appendTo( $('.box-tools'));
},
"buttons": [
   {
		extend: 'excel',
		text: 'Tombol Excel',
		title: 'Excel',
		sheetName: 'Excel'
	},
   {
		extend: 'pdf',
		text: 'Tombol Pdf',
		title: 'PDF',
		sheetName: 'PDF'
	}
],

Terakhir tambahkan kode berikut supaya filter yang dijalankan menjadi auto realod saat pemilihan data pada filter.

$('#emp_position').on('change', function () {
	table_id.draw();
});

$('#emp_office').on('change', function () {
	table_id.draw();
});

4. Edit kode baris pada

## Custom Field value
$emp_position 	= $_POST['emp_position'];
$emp_office 	= $_POST['emp_office'];

## Search 
$searchQuery = "";
if($emp_position != ''){
   $searchQuery .= " AND emp_position = '".$emp_position."'";
}
if($emp_office != ''){
   $searchQuery .= " AND emp_office = '".$emp_office."'";
}

KETERANGAN:

Pada baris ini ditambahkan untuk mengirimkan jumlah data yang di panggil pada blok ID #totalData filter Total Data

"drawCallback": function( settings, start, end, max, total, pre ) {  
	$("#totalData").html(this.fnSettings().json.iTotalDisplayRecords+" Record"); // total number of rows
},

Baris ini untuk menampilkan tombol library adds-on Datatables, tombol Excel, PDF, Print dll.. di contoh hanya dilampirkan Excel dan PDF

"initComplete" : function () {
	table_id.buttons().container().appendTo( $('.box-tools'));
},
"buttons": [
   {
		extend: 'excel',
		text: 'Tombol Excel',
		title: 'Excel',
		sheetName: 'Excel'
	},
   {
		extend: 'pdf',
		text: 'Tombol Pdf',
		title: 'PDF',
		sheetName: 'PDF'
	}
],

Jangan lupa tambahkan library untuk adds-on Datatable Button diatas, bisa di download via CDN di link berikut https://cdn.datatables.net/buttons/1.5.6/

Demikian tutorial kali ini mengenai custom DataTables, selanjutnya admin akan menyajikan tutorial mengenai CUD (Create, Update, Delete)

Tampilan hasil compile script diatas.

jQuery DataTables with Custom Search Filter
Tampilan data penuh
jQuery DataTables with Custom Search Filter
Tampilan data saat filter

]]> https://www.erkamoo.com/2020/06/26/jquery-datatables-with-custom-search-filter/feed/ 0 Menampilkan Database Server Side dengan jQuery Datatables https://www.erkamoo.com/2020/06/25/menampilkan-database-server-side-dengan-jquery-datatables/ https://www.erkamoo.com/2020/06/25/menampilkan-database-server-side-dengan-jquery-datatables/#respond Thu, 25 Jun 2020 10:29:24 +0000 https://erkamoo.com/?p=242 Menampilkan Database Server Side dengan jQuery Datatables

Menampilkan Database Server Side dengan jQuery Datatables untuk memanipulasi data kedalam tabel HTML dengan data diambil dari database MySQL dengan AdminLTE]]> Melanjutkan tutorial sebelumnya yang menampilkan data dengan jquery datatables, selanjutnya akan kita ganti metode penyajian datanya.

Jika sebelumnya data disajikan dari html, kali ini data akan di tampilkan dari database. di contoh admin memakai template dari AdminLTE.

Apa saja yang harus di siapkan?

  1. Tabel untuk menampung data
CREATE TABLE IF NOT EXISTS `tbl_employee` (
  `emp_id` int(11) NOT NULL AUTO_INCREMENT,
  `emp_name` varchar(200) NOT NULL,
  `emp_position` varchar(100) NOT NULL,
  `emp_office` varchar(100) NOT NULL,
  `emp_age` int(11) NOT NULL,
  `emp_salary` float NOT NULL,
  `emp_startdate` date NOT NULL,
  PRIMARY KEY (`emp_id`)
) ENGINE=InnoDB;
  1. Tampilkan tabel untuk menampung datatables
<table class="table table-striped" id="table_id" style="width:100%">
	<thead>
		<tr>
			<th style="width: 10px">#</th>
			<th>Name</th>
			<th>Position</th>
			<th>Office</th>
			<th>Age</th>
			<th>Start date</th>
			<th>Salary</th>
		</tr>
	</thead>
</table>
  1. Kode library datatables
$(document).ready(function(){
				 
	var table_id = $('#table_id').DataTable({
		"processing": true,
		"serverSide": true,
		"autoWidth": false,
		"serverMethod": 'POST',
		"iDisplayLength": 10,
		"lengthMenu": [[5, 10, 25, 50, 100, -1], [5, 10, 25, 50, 100, "All"]],
		"pagingType": 'full_numbers',
		"language": {
			"oPaginate": {
				'sNext': '<i class="fa fa-angle-right"></i>',
				'sPrevious': '<i class="fa fa-angle-left"></i>',
				'sFirst': '<i class="fa fa-angle-double-left"></i>',
				'sLast': '<i class="fa fa-angle-double-right"></i>'
			},
			'loadingRecords': ' ',
			'processing': '<strong>Please wait...</strong>'
		},
		"ajax": {
			"url": "data.php",
		},
		"columns": [
			{ data: 'emp_id', orderable: false }, 
			{ data: 'emp_name' }, 
			{ data: 'emp_position' },
			{ data: 'emp_office' },
			{ data: 'emp_age' },
			{ data: 'emp_startdate' },
			{ data: 'emp_salary' }
		]
	});
});
  1. Function model database

Berikut untuk memanggil fungsi dari model database, untuk menampilkan database. misal buat model database m_setting.php

function getAllEmployee($opsi = null, $short = null)
{	
	global $db_mysql;
	
	$result = $db_mysql->select("SELECT * FROM tbl_employee WHERE 1 ".$opsi.$short);
	return $result;
}
  1. Data ajax URL di library

Siapkan data.php untuk pemanggilan URL yang terdapat di fungsi library datatable diatas. Point 3

## Read value
$draw				= $_POST['draw'];
$row				= $_POST['start'];
$rowperpage			= $_POST['length']; // Rows display per page
$columnIndex		= $_POST['order'][0]['column']; // Column index
$columnName 		= $_POST['columns'][$columnIndex]['data']; // Column name
$columnSortOrder 	= $_POST['order'][0]['dir']; // asc or desc
$searchValue 		= $_POST['search']['value']; // Search value

## Custom Field value

## Search 
$searchQuery = "";
if($searchValue != ''){
	$searchQuery .= " AND (emp_name like '%".$searchValue."%' or 
	emp_position like '%".$searchValue."%' or 
	emp_office like '%".$searchValue."%' or 
	emp_age like '%".$searchValue."%' or 
	emp_salary like'%".$searchValue."%' or 
	emp_startdate like'%".$searchValue."%' ) ";
}

## Total number of records without filtering
$allcount = getAllEmployee();

$totalRecords = count($allcount);

## Total number of records with filtering
$allcountFilter = getAllEmployee($searchQuery);
$totalRecordwithFilter = count($allcountFilter);

## Fetch records
if (isset($rowperpage) && $rowperpage == '-1'){
	$sLimit = $totalRecords;
}
else{
	$sLimit = $rowperpage;
}
$empQuery = getAllEmployee($searchQuery, " ORDER BY ".$columnName." ".$columnSortOrder." limit ".intval($row).",".intval($sLimit));

$data = array();
$i=$row;
foreach($empQuery as $rows)
{	
	$data[] = array(
		"emp_id"		=> $i+1,
		"emp_name"		=> $rows['emp_name'],
		"emp_position"	=> $rows['emp_position'],
		"emp_office"	=> $rows['emp_office'],
		"emp_age"		=> $rows['emp_age'],
		"emp_startdate"	=> to_date($rows['emp_startdate'],'ymd-dmy'),
		"emp_salary"	=> rp_digit($rows['emp_salary'])
   );
   $i++;
}

## Response
$response = array(
	"draw" => intval($draw),
	"iTotalRecords" => $totalRecords,
	"iTotalDisplayRecords" => $totalRecordwithFilter,
	"aaData" => $data
);

echo json_encode($response);

Berikut hasil compile dari script diatas, menggunakan template AdminLTE.

Menampilkan Database Server Side dengan jQuery Datatables
Tampilan semua data
Menampilkan Database Server Side dengan jQuery Datatables
Tampilan dengan filter

Demikian tutorial lanjutan dari menampilkan data dengan jquery datatables. Di tutorial selanjutnya akan menambahkan filter pencarian custom dengan penambahan text/filter.

]]> https://www.erkamoo.com/2020/06/25/menampilkan-database-server-side-dengan-jquery-datatables/feed/ 0 Menampilkan data dengan jQuery DataTables https://www.erkamoo.com/2020/05/10/menampilkan-data-dengan-jquery-datatables/ https://www.erkamoo.com/2020/05/10/menampilkan-data-dengan-jquery-datatables/#respond Sun, 10 May 2020 14:13:13 +0000 https://erkamoo.com/?p=221 Menampilkan data dengan jQuery DataTables

Permudah penyajian data dengan library Datatables untuk memanipulasi data kedalam tabel HTML. Memungkinkan kita untuk menampilkan pencarian, membuat pagination]]> Kali ini admin akan membuat toturial cara menampilkan data MySQL dengan jquery Datatables.

Apa itu Datatables?

Datatables merupakan sebuah plug-in jQuery untuk memanipulasi data kedalam tabel HTML. Jadi memungkinkan kita untuk menampilkan pencarian, membuat pagination, freeze column/rows atau fixed label table dan memungkinkan kita untuk menampilkan data yang banyak. Data ini bisa berupa text/json

1.Plug-in Datatable.

Untuk memulainya silakan sisipkan library jQuery terlebih dahulu, dan jangan lupa library dataTables js/css pada tag HEAD script berikut yang harus di tambahkan.

<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script src="//cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css">

2.Menampilkan dari table HTML.

Table HTML berikut sebagai contoh

<table id="table-id" class="display" style="width:100%">
	<thead>
		<tr>
			<th>Name</th>
			<th>Position</th>
			<th>Office</th>
			<th>Age</th>
			<th>Start date</th>
			<th>Salary</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Tiger Nixon</td>
			<td>System Architect</td>
			<td>Edinburgh</td>
			<td>61</td>
			<td>2011/04/25</td>
			<td>$320,800</td>
		</tr>
		<tr>
			<td>Garrett Winters</td>
			<td>Accountant</td>
			<td>Tokyo</td>
			<td>63</td>
			<td>2011/07/25</td>
			<td>$170,750</td>
		</tr>
		<tr>
			<td>Ashton Cox</td>
			<td>Junior Technical Author</td>
			<td>San Francisco</td>
			<td>66</td>
			<td>2009/01/12</td>
			<td>$86,000</td>
		</tr>
		<tr>
			<td>Cedric Kelly</td>
			<td>Senior Javascript Developer</td>
			<td>Edinburgh</td>
			<td>22</td>
			<td>2012/03/29</td>
			<td>$433,060</td>
		</tr>
		<tr>
			<td>Airi Satou</td>
			<td>Accountant</td>
			<td>Tokyo</td>
			<td>33</td>
			<td>2008/11/28</td>
			<td>$162,700</td>
		</tr>
		<tr>
			<td>Brielle Williamson</td>
			<td>Integration Specialist</td>
			<td>New York</td>
			<td>61</td>
			<td>2012/12/02</td>
			<td>$372,000</td>
		</tr>
		<tr>
			<td>Herrod Chandler</td>
			<td>Sales Assistant</td>
			<td>San Francisco</td>
			<td>59</td>
			<td>2012/08/06</td>
			<td>$137,500</td>
		</tr>
		<tr>
			<td>Rhona Davidson</td>
			<td>Integration Specialist</td>
			<td>Tokyo</td>
			<td>55</td>
			<td>2010/10/14</td>
			<td>$327,900</td>
		</tr>
		<tr>
			<td>Colleen Hurst</td>
			<td>Javascript Developer</td>
			<td>San Francisco</td>
			<td>39</td>
			<td>2009/09/15</td>
			<td>$205,500</td>
		</tr>
		<tr>
			<td>Sonya Frost</td>
			<td>Software Engineer</td>
			<td>Edinburgh</td>
			<td>23</td>
			<td>2008/12/13</td>
			<td>$103,600</td>
		</tr>
		<tr>
			<td>Jena Gaines</td>
			<td>Office Manager</td>
			<td>London</td>
			<td>30</td>
			<td>2008/12/19</td>
			<td>$90,560</td>
		</tr>
		<tr>
			<td>Quinn Flynn</td>
			<td>Support Lead</td>
			<td>Edinburgh</td>
			<td>22</td>
			<td>2013/03/03</td>
			<td>$342,000</td>
		</tr>
		<tr>
			<td>Charde Marshall</td>
			<td>Regional Director</td>
			<td>San Francisco</td>
			<td>36</td>
			<td>2008/10/16</td>
			<td>$470,600</td>
		</tr>
		<tr>
			<td>Haley Kennedy</td>
			<td>Senior Marketing Designer</td>
			<td>London</td>
			<td>43</td>
			<td>2012/12/18</td>
			<td>$313,500</td>
		</tr>
		<tr>
			<td>Tatyana Fitzpatrick</td>
			<td>Regional Director</td>
			<td>London</td>
			<td>19</td>
			<td>2010/03/17</td>
			<td>$385,750</td>
		</tr>
		<tr>
			<td>Michael Silva</td>
			<td>Marketing Designer</td>
			<td>London</td>
			<td>66</td>
			<td>2012/11/27</td>
			<td>$198,500</td>
		</tr>
		<tr>
			<td>Paul Byrd</td>
			<td>Chief Financial Officer (CFO)</td>
			<td>New York</td>
			<td>64</td>
			<td>2010/06/09</td>
			<td>$725,000</td>
		</tr>
		<tr>
			<td>Gloria Little</td>
			<td>Systems Administrator</td>
			<td>New York</td>
			<td>59</td>
			<td>2009/04/10</td>
			<td>$237,500</td>
		</tr>
		<tr>
			<td>Bradley Greer</td>
			<td>Software Engineer</td>
			<td>London</td>
			<td>41</td>
			<td>2012/10/13</td>
			<td>$132,000</td>
		</tr>
		<tr>
			<td>Dai Rios</td>
			<td>Personnel Lead</td>
			<td>Edinburgh</td>
			<td>35</td>
			<td>2012/09/26</td>
			<td>$217,500</td>
		</tr>
		<tr>
			<td>Jenette Caldwell</td>
			<td>Development Lead</td>
			<td>New York</td>
			<td>30</td>
			<td>2011/09/03</td>
			<td>$345,000</td>
		</tr>
		<tr>
			<td>Yuri Berry</td>
			<td>Chief Marketing Officer (CMO)</td>
			<td>New York</td>
			<td>40</td>
			<td>2009/06/25</td>
			<td>$675,000</td>
		</tr>
		<tr>
			<td>Caesar Vance</td>
			<td>Pre-Sales Support</td>
			<td>New York</td>
			<td>21</td>
			<td>2011/12/12</td>
			<td>$106,450</td>
		</tr>
		<tr>
			<td>Doris Wilder</td>
			<td>Sales Assistant</td>
			<td>Sydney</td>
			<td>23</td>
			<td>2010/09/20</td>
			<td>$85,600</td>
		</tr>
		<tr>
			<td>Angelica Ramos</td>
			<td>Chief Executive Officer (CEO)</td>
			<td>London</td>
			<td>47</td>
			<td>2009/10/09</td>
			<td>$1,200,000</td>
		</tr>
		<tr>
			<td>Gavin Joyce</td>
			<td>Developer</td>
			<td>Edinburgh</td>
			<td>42</td>
			<td>2010/12/22</td>
			<td>$92,575</td>
		</tr>
		<tr>
			<td>Jennifer Chang</td>
			<td>Regional Director</td>
			<td>Singapore</td>
			<td>28</td>
			<td>2010/11/14</td>
			<td>$357,650</td>
		</tr>
		<tr>
			<td>Brenden Wagner</td>
			<td>Software Engineer</td>
			<td>San Francisco</td>
			<td>28</td>
			<td>2011/06/07</td>
			<td>$206,850</td>
		</tr>
		<tr>
			<td>Fiona Green</td>
			<td>Chief Operating Officer (COO)</td>
			<td>San Francisco</td>
			<td>48</td>
			<td>2010/03/11</td>
			<td>$850,000</td>
		</tr>
		<tr>
			<td>Shou Itou</td>
			<td>Regional Marketing</td>
			<td>Tokyo</td>
			<td>20</td>
			<td>2011/08/14</td>
			<td>$163,000</td>
		</tr>
		<tr>
			<td>Michelle House</td>
			<td>Integration Specialist</td>
			<td>Sydney</td>
			<td>37</td>
			<td>2011/06/02</td>
			<td>$95,400</td>
		</tr>
		<tr>
			<td>Suki Burks</td>
			<td>Developer</td>
			<td>London</td>
			<td>53</td>
			<td>2009/10/22</td>
			<td>$114,500</td>
		</tr>
		<tr>
			<td>Prescott Bartlett</td>
			<td>Technical Author</td>
			<td>London</td>
			<td>27</td>
			<td>2011/05/07</td>
			<td>$145,000</td>
		</tr>
		<tr>
			<td>Gavin Cortez</td>
			<td>Team Leader</td>
			<td>San Francisco</td>
			<td>22</td>
			<td>2008/10/26</td>
			<td>$235,500</td>
		</tr>
		<tr>
			<td>Martena Mccray</td>
			<td>Post-Sales support</td>
			<td>Edinburgh</td>
			<td>46</td>
			<td>2011/03/09</td>
			<td>$324,050</td>
		</tr>
		<tr>
			<td>Unity Butler</td>
			<td>Marketing Designer</td>
			<td>San Francisco</td>
			<td>47</td>
			<td>2009/12/09</td>
			<td>$85,675</td>
		</tr>
		<tr>
			<td>Howard Hatfield</td>
			<td>Office Manager</td>
			<td>San Francisco</td>
			<td>51</td>
			<td>2008/12/16</td>
			<td>$164,500</td>
		</tr>
		<tr>
			<td>Hope Fuentes</td>
			<td>Secretary</td>
			<td>San Francisco</td>
			<td>41</td>
			<td>2010/02/12</td>
			<td>$109,850</td>
		</tr>
		<tr>
			<td>Vivian Harrell</td>
			<td>Financial Controller</td>
			<td>San Francisco</td>
			<td>62</td>
			<td>2009/02/14</td>
			<td>$452,500</td>
		</tr>
		<tr>
			<td>Timothy Mooney</td>
			<td>Office Manager</td>
			<td>London</td>
			<td>37</td>
			<td>2008/12/11</td>
			<td>$136,200</td>
		</tr>
		<tr>
			<td>Jackson Bradshaw</td>
			<td>Director</td>
			<td>New York</td>
			<td>65</td>
			<td>2008/09/26</td>
			<td>$645,750</td>
		</tr>
		<tr>
			<td>Olivia Liang</td>
			<td>Support Engineer</td>
			<td>Singapore</td>
			<td>64</td>
			<td>2011/02/03</td>
			<td>$234,500</td>
		</tr>
		<tr>
			<td>Bruno Nash</td>
			<td>Software Engineer</td>
			<td>London</td>
			<td>38</td>
			<td>2011/05/03</td>
			<td>$163,500</td>
		</tr>
		<tr>
			<td>Sakura Yamamoto</td>
			<td>Support Engineer</td>
			<td>Tokyo</td>
			<td>37</td>
			<td>2009/08/19</td>
			<td>$139,575</td>
		</tr>
		<tr>
			<td>Thor Walton</td>
			<td>Developer</td>
			<td>New York</td>
			<td>61</td>
			<td>2013/08/11</td>
			<td>$98,540</td>
		</tr>
		<tr>
			<td>Finn Camacho</td>
			<td>Support Engineer</td>
			<td>San Francisco</td>
			<td>47</td>
			<td>2009/07/07</td>
			<td>$87,500</td>
		</tr>
		<tr>
			<td>Serge Baldwin</td>
			<td>Data Coordinator</td>
			<td>Singapore</td>
			<td>64</td>
			<td>2012/04/09</td>
			<td>$138,575</td>
		</tr>
		<tr>
			<td>Zenaida Frank</td>
			<td>Software Engineer</td>
			<td>New York</td>
			<td>63</td>
			<td>2010/01/04</td>
			<td>$125,250</td>
		</tr>
		<tr>
			<td>Zorita Serrano</td>
			<td>Software Engineer</td>
			<td>San Francisco</td>
			<td>56</td>
			<td>2012/06/01</td>
			<td>$115,000</td>
		</tr>
		<tr>
			<td>Jennifer Acosta</td>
			<td>Junior Javascript Developer</td>
			<td>Edinburgh</td>
			<td>43</td>
			<td>2013/02/01</td>
			<td>$75,650</td>
		</tr>
		<tr>
			<td>Cara Stevens</td>
			<td>Sales Assistant</td>
			<td>New York</td>
			<td>46</td>
			<td>2011/12/06</td>
			<td>$145,600</td>
		</tr>
		<tr>
			<td>Hermione Butler</td>
			<td>Regional Director</td>
			<td>London</td>
			<td>47</td>
			<td>2011/03/21</td>
			<td>$356,250</td>
		</tr>
		<tr>
			<td>Lael Greer</td>
			<td>Systems Administrator</td>
			<td>London</td>
			<td>21</td>
			<td>2009/02/27</td>
			<td>$103,500</td>
		</tr>
		<tr>
			<td>Jonas Alexander</td>
			<td>Developer</td>
			<td>San Francisco</td>
			<td>30</td>
			<td>2010/07/14</td>
			<td>$86,500</td>
		</tr>
		<tr>
			<td>Shad Decker</td>
			<td>Regional Director</td>
			<td>Edinburgh</td>
			<td>51</td>
			<td>2008/11/13</td>
			<td>$183,000</td>
		</tr>
		<tr>
			<td>Michael Bruce</td>
			<td>Javascript Developer</td>
			<td>Singapore</td>
			<td>29</td>
			<td>2011/06/27</td>
			<td>$183,000</td>
		</tr>
		<tr>
			<td>Donna Snider</td>
			<td>Customer Support</td>
			<td>New York</td>
			<td>27</td>
			<td>2011/01/25</td>
			<td>$112,000</td>
		</tr>
	</tbody>
	<tfoot>
		<tr>
			<th>Name</th>
			<th>Position</th>
			<th>Office</th>
			<th>Age</th>
			<th>Start date</th>
			<th>Salary</th>
		</tr>
	</tfoot>
</table>

Berikut kode untuk menyisipkan Datatables ke dalam tabel HTML.

<script>
    $(document).ready(function(){
        $('#table-id').DataTable();
    });
</script>

Metode ini $().DataTable(); merupakan fungsi sederhana untuk menerapkan Datatables pada tabel HTML yang dipilih.

Menampilkan data dengan jQuery DataTables
hasil render dari kode diatas

Untuk tingkat advance, kita bisa menambahkan option pada fungsi $().DataTable();

<script>
$(document).ready(function() {
    $('#table-id').DataTable( {
        "processing": true,
        "serverSide": true,
        "ajax": "server_processing.php"
    } );
} );
</script>

Referensi:

]]> https://www.erkamoo.com/2020/05/10/menampilkan-data-dengan-jquery-datatables/feed/ 0 Dynamic Sidebar Menu with AdminLTE https://www.erkamoo.com/2020/03/08/dynamic-sidebar-menu-with-adminlte/ https://www.erkamoo.com/2020/03/08/dynamic-sidebar-menu-with-adminlte/#respond Sun, 08 Mar 2020 16:54:14 +0000 https://erkamoo.com/?p=209 Dynamic Sidebar Menu with AdminLTE

Script untuk membuat Dynamic Sidebar Menu dengan AdminLTE, menggunakan database MySQL dan php sebagia bahasa pemrogaman dengan bantuan fungsi array sederhana]]> Melanjutkan tutorial sebelumnya, setelah login kemudian kita buat menu yang ada di samping kiri AdminLTE. Tutorial sebelumnya :

Tabel yang akan kita gunakan cukup dengan satu tabel saja seperti berikut

DROP TABLE IF EXISTS `tbl_menu`;
CREATE TABLE IF NOT EXISTS `tbl_menu` (
  `menu_id` int(11) NOT NULL AUTO_INCREMENT,
  `menu_name` varchar(200) NOT NULL,
  `menu_link` text NOT NULL,
  `menu_level` int(11) DEFAULT NULL,
  `menu_parent` int(11) NOT NULL,
  `status` int(11) NOT NULL,
  `short` int(11) NOT NULL,
  `menu_icon` text NOT NULL,
  `menu_desc` varchar(50) DEFAULT NULL,
  PRIMARY KEY (`menu_id`)
) ENGINE=InnoDB AUTO_INCREMENT=9 DEFAULT CHARSET=latin1;

--
-- Dumping data for table `tbl_menu`
--

INSERT INTO `tbl_menu` (`menu_id`, `menu_name`, `menu_link`, `menu_level`, `menu_parent`, `status`, `short`, `menu_icon`, `menu_desc`) VALUES
(1, 'HOME', 'home', 1, 0, 1, 1, 'fa fa-file-text-o', 'm_home'),
(2, 'LEFT MENU', 'menu', 2, 0, 1, 2, 'fa fa-file-text-o', 'm_menu'),
(3, 'DATATABLES', 'datatables', 3, 0, 1, 3, 'fa fa-file-text-o', 'm_datatables'),
(4, 'CRUD', 'crud', 4, 0, 1, 4, 'fa fa-file-text-o', 'm_crud'),
(5, 'PRINT', 'print', 5, 0, 1, 5, 'fa fa-file-text-o', 'm_print'),
(6, 'UPLOAD', 'upload', 6, 0, 1, 6, 'fa fa-file-text-o', 'm_upload'),
(7, 'CRUD DENGAN FORM', 'crud/form', 4, 4, 1, 7, 'fa fa-circle-o', 'm_crud_form'),
(8, 'CRUD DENGAN eModal', 'crud/emodal', 4, 4, 1, 7, 'fa fa-circle-o', 'm_crud_emodal');

setelah menambahkan tabel diatas, tiba saatnya untuk membuat kode skrip dengan nama nav_left.php

Kode php tersebut nanti akan kita panggil pada header.php yang sudah kita buat sebelumnya pada artikel Login dengan jQuery, PHP + MySQL

<?php
$leftMenu = getAllMenu_byRole();

if(count($leftMenu) > 0)
{
	$refs = array();
	$list = array();
	
	$i=0;
	foreach($leftMenu as $leftMenu)
	{
		$thisref = &$refs[$leftMenu['menu_id']];
		$thisref['menu_parent'] = $leftMenu['menu_parent'];
		$thisref['menu_name'] = $leftMenu['menu_name'];
		$thisref['menu_link'] = $leftMenu['menu_link'];
		$thisref['menu_icon'] = $leftMenu['menu_icon'];
		$thisref['menu_desc'] = $leftMenu['menu_desc'];
		
		if($leftMenu['menu_parent'] == 0){
			$list[$leftMenu['menu_id']] = &$thisref;
		}
		else{
			$refs[$leftMenu['menu_parent']]['children'][$leftMenu['menu_id']] = &$thisref;
		}
		$i++;
	}
	function create_list($arr, $urutan)
	{
		if($urutan==0){
			$html = '';
		}
		else{
			$html = '<ul class="treeview-menu">';
		}
		foreach($arr as $key=>$v)
		{
			if(array_key_exists('children', $v)){
				$html .= '<li class="treeview '.$v['menu_desc'].'">';
				$html .= '<a href="#">
							<i class="'.$v['menu_icon'].'"></i> <span>'.$v['menu_name'].'</span>
							<span class="pull-right-container"><i class="fa fa-angle-left pull-right"></i></span>
						</a>';
				$html .= create_list($v['children'],1);
				$html .= "</li>";
			}
			else{
				if($urutan==0){
					$html .= '<li class="'.$v['menu_desc'].'"><a href="'.BASE_URL.$v['menu_link'].'"><i class="'.$v['menu_icon'].'"></i> <span>'.$v['menu_name'].'</span></a></li>';
				}
				else{
					$html .= '<li class="'.$v['menu_desc'].'"><a href="'.BASE_URL.$v['menu_link'].'"><i class="'.$v['menu_icon'].'"></i> '.$v['menu_name'].'</a></li>';
				}
			}
		}
		if($urutan==0){
			$html .= "";
		}
		else{
			$html .= "</ul>";
		}
		return $html;
	}
	echo create_list($list, 0);
}
?>

Terakhir buatkan function model mysqli dengan kode seperti berikut

function getAllMenu_byRole()
{	
	global $db_mysql;
		
	$result = $db_mysql->query("SELECT m.* FROM tbl_menu m WHERE 1 ORDER BY m.short ASC");
	return $result;
}

Jika semua sudah dilakukan, kemudian refresh halaman /home dan menu dynamic akan tampil seperti berikut

Dynamic Sidebar Menu with AdminLTE
dynamic left menu
]]> https://www.erkamoo.com/2020/03/08/dynamic-sidebar-menu-with-adminlte/feed/ 0 Login dengan jQuery, PHP + MySQL https://www.erkamoo.com/2019/12/04/login-dengan-jquery-php-mysql/ https://www.erkamoo.com/2019/12/04/login-dengan-jquery-php-mysql/#respond Wed, 04 Dec 2019 06:49:17 +0000 https://erkamoo.com/?p=149 Login dengan jQuery, PHP + MySQL

Cara gampang pembuatan script login dengan library jQuery, php dan MySQL menggunakan template AdminLTE sebagai form. Dan database wrapper sebagai model database]]> Kali ini admin akan menulis mengenai Login dengan PHP, MySQL + jQuery. Pada dasarnya login merupakan suatu halaman yang berfungsi untuk membatasi hak akses user. Berikut yang harus di persiapkan.

Template AdminLTE bisa di download disini. Biasanya pada Bundle Template sudah termasuk library jQuery dan Plugins pendukung lainnya yang terdapat pada AdminLTE.

Tampilan pada halaman Login akan terlihat seperti berikut:

login.php

Berikut adalah form pada halaman login.php

<form action="" method="post" id="runLogin">
	<div class="form-group has-feedback">
		<input type="text" class="form-control username" name="username" placeholder="Username">
		<span class="glyphicon glyphicon-user form-control-feedback"></span>
	</div>
	<div class="form-group has-feedback">
		<input type="password" class="form-control password" name="password" placeholder="Password">
		<span class="glyphicon glyphicon-lock form-control-feedback"></span>
	</div>
	<div class="row">
		<div class="col-xs-6 pull-right">
			<input type="submit" class="btn btn-primary btn-block btn-flat" id="login" value="Sign In">
		</div>
	</div>
</form>

Jika di lihat pada baris pertama terdapat atribut id=”runLogin”, jadi atribut tersebut yang akan digunakan untuk initial pengiriman data serialize nya.

jQuery function nya akan terlihat seperti berikut

$(function() {
		
   $(".username").focus();

   $("#runLogin").submit(function(e) {
		e.preventDefault();
		
		$.ajax({
			url: "apps/Views/login/submit.php",
			type: "POST",
			dataType : 'json',
			data: $("#runLogin").serialize(),
			cache: false,
			beforeSend: function(){ $("#login").val('Connecting...');},
			success: function(html){
				if($.trim(html.msg) == 'OK'){
					window.location.href = "home";
				}
				else{
					$("#login").val('Sign In');
					$(".username").focus();
					$("#loadAlert").html('<div class="alert alert-warning alert-dismissible"><button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>'+$.trim(html.msg)+'</div>');
				}
			},
			error:function(xhr, status, error){
				$("#loadAlert").html('<div class="alert alert-danger alert-dismissible"><button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>'+error+'</div>');
			}
		});
		return false;
	});
});

Kemudian pada baris ini kita akan mengirimkan data dalam bentuk JSON

url: "apps/Views/login/submit.php",
type: "POST",
dataType : 'json',

kemudian pengiriman data tersebut akan di tampung pada submit.php sebagai action formnya. Berikut isi pada halaman submit.php

$data	= array(
	'username'	=> $_POST['username'],
	'password'	=> $_POST['password']
);

if(is_ajax())
{
	checkUser($data);
}

## FUNCTION
function checkUser($getData) 
{
	global $db_mysql;
	
	$arr 	= array();
	
	if($getData['username'] == "")
	{
		$arr['msg'] = 'Username masih kosong!';
	}
	else if($getData['password'] == "")
	{
		$arr['msg'] = 'Password masih kosong!';
	}
	else{
		$data = $db_mysql->select("SELECT * FROM tbl_users WHERE username = '$getData[username]' AND password = md5('$getData[password]') AND active = '1'");
		
		if(count($data) > 0)
		{
			$_SESSION['SESS_ID'] 	    = $data[0]['user_id'];
            $_SESSION['SESS_LOGIN_ID'] 	= $data[0]['username'];
			$_SESSION['SESS_NAME']		= $data[0]['first_name'].' '.$data[0]['last_name'];
			$_SESSION['SESS_GROUP'] 	= $data[0]['group_id'];
			$_SESSION['SESS_ACTIVE'] 	= $data[0]['active'];
			
			$arr['msg'] = 'OK';
		}
		else{
			$arr['msg'] = 'Login gagal, coba lagi!!';
		}
	}
	echo json_encode($arr);
}

Untuk koneksi dan database wrapper bisa di cek pada postingan sebelumnya. Simple PHP Database Wrapper

Cara gampang pembuatan script login dengan library jQuery, php dan MySQL menggunakan template AdminLTE sebagai form. Dan database wrapper sebagai model database
Informasi ketika login dan masuk halaman utama

Berikut table yang diperlukan pada database.

--
-- Table structure for table `tbl_users`
--
DROP TABLE IF EXISTS `tbl_users`;
CREATE TABLE `tbl_users` (
  `user_id` int(11) NOT NULL,
  `username` varchar(50) DEFAULT NULL,
  `password` varchar(32) DEFAULT NULL,
  `group_id` tinyint(4) DEFAULT NULL,
  `first_name` varchar(50) DEFAULT NULL,
  `last_name` varchar(50) DEFAULT NULL,
  `email` varchar(255) DEFAULT NULL,
  `active` tinyint(4) DEFAULT NULL,
  `usr_img` text,
  `updateBy` int(11) NOT NULL,
  `create_date` datetime DEFAULT NULL,
  `modified_date` datetime DEFAULT NULL
) ENGINE=MyISAM DEFAULT CHARSET=latin1;
--
-- Indexes for table `tbl_users`
--
ALTER TABLE `tbl_users`
  ADD PRIMARY KEY (`user_id`);
--
-- AUTO_INCREMENT for table `tbl_users`
--
ALTER TABLE `tbl_users`
  MODIFY `user_id` int(11) NOT NULL AUTO_INCREMENT;
Share to Unlock Contentimage/svg+xml
Unlock this exclusive content by using one of the sharing buttons below.
ShareTweet
]]> https://www.erkamoo.com/2019/12/04/login-dengan-jquery-php-mysql/feed/ 0