Tutorial CRUD PHP, MySQL And JQuery In 10 Minutes (Bonus Source Code)

By Sigit Prasetya Nugroho ∙ April 8, 2016 ∙ PHP ∙ 101 Comments

Create CRUD web applications (Create, Read, Update, and Delete) using PHP, Jquery, and adminLTE is fast and efficient. The application of CRUD is the basis of making information systems. So, you must be adept at implementing CRUD specifically to learn PHP CRUD.

Why?

If you master the PHP CRUD, you can quickly build dynamic websites.

On this occasion, I show you how to make a CRUD application using PHP and JQuery. See the following tutorial

Here’s the deal:

In this CRUD tutorial, you will learn several things, such as:

How to create a table, add, edit and delete data on MySQL.
How to use PHP PDO to communicate with the MySQL Database.
How to display database tables using Datatable in 5 minutes.
Using JQuery to interact with HTML and PHP services to update the MySQL Database.
Using the AdminLTE CSS Framework to create responsive mobile applications.
Understanding PHP MVC concept.
And as a bonus article, you can download PHP crud tutorial source code for free.

Table of Contents

1 Tutorial Create Simple CRUD APPLICATION Using PHP and Mysql
2 Bonus
3 CONCLUSION

Tutorial Create Simple CRUD APPLICATION Using PHP and Mysql

To start the crud tutorial, you must prepare several tools so that the application runs smoothly.

Requirements

1. PHP

Must install PHP Server, to run this application you need PHP version 5 and above (5.6 or PHP 7)

2. MySQL Database

the MySQL Database version that I used 5.7

3. AdminLTE CSS Framework.

Why do I use AdminLTE? I think adminLTE is the best free CSS framework available today. Besides that, AdminLTE has an excellent layout and is very well maintained. Please download AdminLTE version 2.4 here. (Check out my tips how to make adminLTE framework more powerfull)

4. Bootstrap Framework version 3

Because the adminLTE 2.4 uses bootstrap version 3, it automatically uses bootstrap framework version 3

5. Datatables Plugins (already contained in the adminLTE component).

Datatables is a table plugin for displaying the database tables with an interactive interface and easy to use. Also, datatables supported the mobile responsive display.

I will share the tutorial using datatables and JQuery to display data from the server to the browser using AJAX so that the table looks more attractive.

6. JQuery Framework (already contained in adminLTE component).

The JQuery version used is adapted to the AdminLTE Framework version

7. SweetAlert plugin

SweetAlert plugin used to beautify the JavaScript alert box (let’s read tutorial Javascript alert box to understand about Javascript dialog box).

8. SQLYOG

An application that I used to updating and deleting the MySQL database. If you don’t have an SQLYog, you can use phpmyadmin or other database tools

Create a database and table on MySQL

Create a database with the name “crud.”

Creating a customer table

Add dummy data to the customer table

INSERT INTO customer(NAME,gender,country,phone) VALUES('Sigit Prasetya N','Male','Indonesia','000-857489');
INSERT INTO customer(NAME,gender,country,phone) VALUES('Taylor Swift','Female','United State','0858774858');
INSERT INTO customer(NAME,gender,country,phone) VALUES('Kristen Stewart','Female','British','888-985859');

INSERT INTO customer(NAME,gender,country,phone) VALUES('Sigit Prasetya N','Male','Indonesia','000-857489');

INSERT INTO customer(NAME,gender,country,phone) VALUES('Taylor Swift','Female','United State','0858774858');

INSERT INTO customer(NAME,gender,country,phone) VALUES('Kristen Stewart','Female','British','888-985859');

Create a new PHP CRUD project

1. Create a new web applications project folder with the file names “crud” in your public folder (if using xampp, put the project in the htdocs folder, for Ubuntu machine, set in the folder /var/www/html/).

2. Extracts adminlte.zip and copy bower_components, dist, plugins folder into “crud” folder

3. Install the sweetalert plugin using bower with the following code:
After installed, added sweetalert plugin component in the “bower_components” folder.

4. Create a new folder named “application” in the “crud” folder . The “application” folder used to put our crud apps file.

5. Create a new folder (database and customer) and put in the “application” folder

Database folder

Add 2 new file in the “database” folder with file names dbconn.php and sql.php

dbconn.php

dbconn.php used to record your database configuration using PDO. Add the following code into dbconn.php:

<?php
class dbconn {
	public $dblocal;
	public function __construct()
	{

	}
	public function initDBO()
	{
		$user = 'root';
		$pwd = '123456';
		$dbname = 'crud';
		try {
			$this->dblocal = new PDO("mysql:host=localhost;dbname=".$dbname.";charset=latin1",$user,$pwd,array(PDO::ATTR_PERSISTENT => true));
			$this->dblocal->setAttribute(PDO::ATTR_ERRMODE,PDO::ERRMODE_EXCEPTION);
		}
		catch(PDOException $e)
		{
			die("Can't connect database");
		}
		
	}
	
}

<?php

class dbconn {

public $dblocal;

public function __construct()

{

}

public function initDBO()

{

$user = 'root';

$pwd = '123456';

$dbname = 'crud';

try {

$this->dblocal = new PDO("mysql:host=localhost;dbname=".$dbname.";charset=latin1",$user,$pwd,array(PDO::ATTR_PERSISTENT => true));

$this->dblocal->setAttribute(PDO::ATTR_ERRMODE,PDO::ERRMODE_EXCEPTION);

}

catch(PDOException $e)

{

die("Can't connect database");

}

Explanation:

PDO used to create connection between php and mysql.
We created a new PHP class named “dbconn.”
PDO using try catch exception to create connection both of PHP and Database. Using try-catch in PHP easier for us to maintain the error code.
To connect the “crud” database tables, we use the following configuration. Adjust the below code with your DB configuration

$user = 'root'; $pwd = '123456'; $dbname = 'crud';

1
2
3

$user = 'root';
$pwd = '123456';
$dbname = 'crud';

sql.php

sql.php used as a model. The sql.php file contains a PHP class and list of PHP functions used to keep the MySQL Query command. All queries related to the database written in this class.

<?php
class sql extends dbconn {
	public function __construct()
	{
		$this->initDBO();
	}

	public function new_customer($name,$country,$phone,$gender)
	{
		$db = $this->dblocal;
		try
		{
			$stmt = $db->prepare("insert into customer(name,country,phone,gender) values (:name,:country,:phone,:gender)");
			$stmt->bindParam("name",$name);
			$stmt->bindParam("country",$country);
			$stmt->bindParam("phone",$phone);
			$stmt->bindParam("gender",$gender);
			$stmt->execute();
			$stat[0] = true;
			$stat[1] = "Success save customer";
			return $stat;
		}
		catch(PDOException $ex)
		{
			$stat[0] = false;
			$stat[1] = $ex->getMessage();
			return $stat;
		}
	}

	public function list_customer()
	{
		$db = $this->dblocal;
		try
		{
			$stmt = $db->prepare("select * from customer");
			$stmt->execute();
			$stat[0] = true;
			$stat[1] = "List customer";
			$stat[2] = $stmt->fetchAll(PDO::FETCH_ASSOC);
			return $stat;
		}
		catch(PDOException $ex)
		{
			$stat[0] = false;
			$stat[1] = $ex->getMessage();
			$stat[2] = [];
			return $stat;
		}
	}

	public function edit_customer($id,$name,$country,$phone,$gender)
	{
		$db = $this->dblocal;
		try
		{
			$stmt = $db->prepare("update customer set name = :name, country = :country, phone = :phone , gender = :gender where id_cust = :id ");
			$stmt->bindParam("id",$id);
			$stmt->bindParam("name",$name);
			$stmt->bindParam("country",$country);
			$stmt->bindParam("phone",$phone);
			$stmt->bindParam("gender",$gender);
			$stmt->execute();
			$stat[0] = true;
			$stat[1] = "Success edit customer";
			return $stat;
		}
		catch(PDOException $ex)
		{
			$stat[0] = false;
			$stat[1] = $ex->getMessage();
			return $stat;
		}
	}

	public function delete_customer($id)
	{
		$db = $this->dblocal;
		try
		{
			$stmt = $db->prepare("delete from customer where id_cust = :id");
			$stmt->bindParam("id",$id);
			$stmt->execute();
			$stat[0] = true;
			$stat[1] = "Success delete customer";
			return $stat;
		}
		catch(PDOException $ex)
		{
			$stat[0] = false;
			$stat[1] = $ex->getMessage();
			return $stat;
		}
	}

}

<?php

class sql extends dbconn {

public function __construct()

{

$this->initDBO();

}

public function new_customer($name,$country,$phone,$gender)

{

$db = $this->dblocal;

try

{

$stmt = $db->prepare("insert into customer(name,country,phone,gender) values (:name,:country,:phone,:gender)");

$stmt->bindParam("name",$name);

$stmt->bindParam("country",$country);

$stmt->bindParam("phone",$phone);

$stmt->bindParam("gender",$gender);

$stmt->execute();

$stat[0] = true;

$stat[1] = "Success save customer";

return $stat;

}

catch(PDOException $ex)

{

$stat[0] = false;

$stat[1] = $ex->getMessage();

return $stat;

}

public function list_customer()

{

$db = $this->dblocal;

try

{

$stmt = $db->prepare("select * from customer");

$stmt->execute();

$stat[0] = true;

$stat[1] = "List customer";

$stat[2] = $stmt->fetchAll(PDO::FETCH_ASSOC);

return $stat;

}

catch(PDOException $ex)

{

$stat[0] = false;

$stat[1] = $ex->getMessage();

$stat[2] = [];

return $stat;

}

public function edit_customer($id,$name,$country,$phone,$gender)

{

$db = $this->dblocal;

try

{

$stmt = $db->prepare("update customer set name = :name, country = :country, phone = :phone , gender = :gender where id_cust = :id ");

$stmt->bindParam("id",$id);

$stmt->bindParam("name",$name);

$stmt->bindParam("country",$country);

$stmt->bindParam("phone",$phone);

$stmt->bindParam("gender",$gender);

$stmt->execute();

$stat[0] = true;

$stat[1] = "Success edit customer";

return $stat;

}

catch(PDOException $ex)

{

$stat[0] = false;

$stat[1] = $ex->getMessage();

return $stat;

}

public function delete_customer($id)

{

$db = $this->dblocal;

try

{

$stmt = $db->prepare("delete from customer where id_cust = :id");

$stmt->bindParam("id",$id);

$stmt->execute();

$stat[0] = true;

$stat[1] = "Success delete customer";

return $stat;

}

catch(PDOException $ex)

{

$stat[0] = false;

$stat[1] = $ex->getMessage();

return $stat;

}

Explanation:

We created new php class named sql, The sql class extend from dbconn class.
We have 4 functions (list_customer, new_customer, delete_customer, edit_customer) in sql class. This class used to create read update delete tables in database.
We created constructor function to call pdo configuration from dbconn class.
list_customer function used to read all data from crud table.
We use 4 PDO object in this example to communicate with database ($db->prepare,$stmt->execute(),$stmt->bindParam(), $stmt->fetchAll(PDO::FETCH_ASSOC))
- $db->prepare
  used to prepares a statement to execution and returns a PDO statement object.
- $stmt->execute()
  used to execute prepared statement.
- $stmt->bindParam()
  used to binding parameter into specified variable in prepare statement.
- $stmt->fetchAll(PDO::FETCH_ASSOC)
  used to fetch all result set rows as an array

Until this step, you finished creating the business rule of your app. Next, we generate front-end of the crud application

Customer folder

Create 2 files named customer.php and index.php. customer.php used as controller. This controller will be the link between index.php as front-end and sql.php as a database model

customer.php

Add the code below into customer.php

<?php 

include "../database/dbconn.php";
include "../database/sql.php";
if( isset( $_SERVER['HTTP_X_REQUESTED_WITH'] ) && ( $_SERVER['HTTP_X_REQUESTED_WITH'] == 'XMLHttpRequest' ) )
{
	$method=$_POST['method'];
	$dtbs = new sql();
	$retval = [];

	if($method == 'list_customer'){
		$list = $dtbs->list_customer();
		$retval['status'] = $list[0];
		$retval['message'] = $list[1];
		$retval['data'] = $list[2];
		echo json_encode($retval);
	}

	if($method == 'new_customer'){
		$name = $_POST['name'];
		$country = $_POST['country'];
		$phone = $_POST['phone'];
		$gender = $_POST['gender'];

		$new = $dtbs->new_customer($name,$country,$phone,$gender);
		$retval['status'] = $new[0];
		$retval['message'] = $new[1];
		echo json_encode($retval);
	}

	if($method == 'edit_customer'){
		$id_cust = $_POST['id_cust'];
		$name = $_POST['name'];
		$country = $_POST['country'];
		$phone = $_POST['phone'];
		$gender = $_POST['gender'];

		$edit = $dtbs->edit_customer($id_cust,$name,$country,$phone,$gender);
		$retval['status'] = $edit[0];
		$retval['message'] = $edit[1];
		echo json_encode($retval);
	}

	if($method == 'delete_customer'){
		$id_cust = $_POST['id_cust'];
		$delete = $dtbs->delete_customer($id_cust);
		$retval['status'] = $delete[0];
		$retval['message'] = $delete[1];
 		echo json_encode($retval);
	}



}else{
	header("HTTP/1.1 401 Unauthorized");
    exit;
}

<?php

include "../database/dbconn.php";

include "../database/sql.php";

if( isset( $_SERVER['HTTP_X_REQUESTED_WITH'] ) && ( $_SERVER['HTTP_X_REQUESTED_WITH'] == 'XMLHttpRequest' ) )

{

$method=$_POST['method'];

$dtbs = new sql();

$retval = [];

if($method == 'list_customer'){

$list = $dtbs->list_customer();

$retval['status'] = $list[0];

$retval['message'] = $list[1];

$retval['data'] = $list[2];

echo json_encode($retval);

}

if($method == 'new_customer'){

$name = $_POST['name'];

$country = $_POST['country'];

$phone = $_POST['phone'];

$gender = $_POST['gender'];

$new = $dtbs->new_customer($name,$country,$phone,$gender);

$retval['status'] = $new[0];

$retval['message'] = $new[1];

echo json_encode($retval);

}

if($method == 'edit_customer'){

$id_cust = $_POST['id_cust'];

$name = $_POST['name'];

$country = $_POST['country'];

$phone = $_POST['phone'];

$gender = $_POST['gender'];

$edit = $dtbs->edit_customer($id_cust,$name,$country,$phone,$gender);

$retval['status'] = $edit[0];

$retval['message'] = $edit[1];

echo json_encode($retval);

}

if($method == 'delete_customer'){

$id_cust = $_POST['id_cust'];

$delete = $dtbs->delete_customer($id_cust);

$retval['status'] = $delete[0];

$retval['message'] = $delete[1];

echo json_encode($retval);

}

}else{

header("HTTP/1.1 401 Unauthorized");

exit;

}

Explanation:

To prevent Unauthorized access from the direct link to the customer.php file, we can use the following code
We declared “sql” class object into a dtbs variable. The dtbs variable used to call the database controller that we created before.
To divide the code into sections(function to show list customer, to add new customer, edit and delete customer), I used $_POST[‘method’] using specified string value.
Cause we use JQuery ajax to call the function, we need to return the result with “echo” function. The array result transformed into a json string using the json_encode method

index.php

index.php used as a front-end layout of these apps. Also, all of the JQuery code to doing the CRUD function will be set in this file.

To more comfortable using the adminlte template, we can copy the whole code from their blank template, blank.html. The blank.html located in the adminlte source code folder (/pages/example/blank.html).

After copied these code, we first add the sweetalert and datatables plugin into index.php. Add the sweetalert and datatables CSS code before

  	<link rel="stylesheet" href="../../bower_components/bootstrap-sweetalert/dist/sweetalert.css"> 
  	<link rel="stylesheet" href="../../bower_components/datatables.net-bs/css/dataTables.bootstrap.css">

1 2	<link rel="stylesheet" href="../../bower_components/bootstrap-sweetalert/dist/sweetalert.css"> <link rel="stylesheet" href="../../bower_components/datatables.net-bs/css/dataTables.bootstrap.css">

Then, copy the code below to add sweetalert and datatables js file before

	<script src="../../bower_components/bootstrap-sweetalert/dist/sweetalert.min.js"></script>
	<script src="../../bower_components/datatables.net/js/jquery.dataTables.min.js"></script>
	<script src="../../bower_components/datatables.net-bs/js/dataTables.bootstrap.js"></script>

Add the HTML code below into element

<div class="content-wrapper">
		<!-- Content Header (Page header) -->
		<section class="content-header">
			<h1>
				TUTORIAL PHP CRUD
				<small>visit <a href="https://seegatesite.com">seegatesite.com</a> for more tutorial</small>
			</h1>
		</section>
		<!-- Main content -->
		<section class="content">
			<!-- Default box -->
			<div class="box">
				<div class="box-body">
					<button class="btn btn-primary margin" id="btn-add" title="New button"><i class="fa fa-plus"></i> New Customer</button>
					<div class="table-responsive margin">
						<table id="table-customer" class="table table-bordered">
							<thead>
								<tr>
									<th style="width: 10px">#</th>
									<th style="width: 150px">Name</th>
									<th style="width: 50px">Gender</th>
									<th style="width: 50px">Country</th>
									<th style="width: 25px;">Phone</th>
									<th style="width: 50px;"></th>
								</tr>
							</thead>
						</table>
					</div>
				</div>
				<!-- /.box-body -->
			</div>
			<!-- /.box -->
		</section>
		<!-- /.content -->
	</div>

<h1>

TUTORIAL PHP CRUD

<small>visit <a href="https://seegatesite.com">seegatesite.com</a> for more tutorial</small>

</h1>

</section>

<button class="btn btn-primary margin" id="btn-add" title="New button"><i class="fa fa-plus"></i> New Customer</button>

<thead>

<tr>

<th style="width: 50px">Gender</th>

<th style="width: 50px">Country</th>

<th style="width: 25px;">Phone</th>

</tr>

</thead>

</table>

</div>

</div>

</section>

</div>

Add bootstrap modal dialog code:

<div class="modal fade" id="modal-customer" tabindex="-1"  role="dialog" aria-labelledby="myModalLabel">
		<div class="modal-dialog" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
					<h4 class="modal-title" id="myModalLabel">Form Customer</h4>
				</div>
				<div class="modal-body">
					<div class="box-body">
						<div class="form-horizontal">
							<div class="form-group">
								<label class="col-sm-3 control-label">Name</label>
								<div class="col-sm-9">
									<input type="hidden" id="crud">
									<input type="hidden" id="txtcode">
									<input type="text" class="form-control" id="txtname" placeholder="Customer Name">
								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-3 control-label">Gender</label>
								<div class="col-sm-9">
									<select class="form-control" id="cbogender">
										<option value="Male">Male</option>
										<option value="Female">Female</option>
									</select>
								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-3 control-label">Country</label>
								<div class="col-sm-9">
									<input type="text" class="form-control" id="txtcountry" placeholder="Country Name">
								</div>
							</div>

							<div class="form-group">
								<label class="col-sm-3 control-label">Phone</label>
								<div class="col-sm-9">
									<input type="text" class="form-control" id="txtphone" placeholder="phone number">
								</div>
							</div>

						</div>
					</div>						
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default pull-left" data-dismiss="modal">Close</button>
					<button type="button" class="btn btn-primary" title="save button" id="btn-save"> <i class="fa fa-save"></i> Simpan</button>
				</div>
			</div>
		</div>
	</div>

<h4 class="modal-title" id="myModalLabel">Form Customer</h4>

</div>

</div>

<label class="col-sm-3 control-label">Gender</label>

<option value="Female">Female</option>

</select>

</div>

<label class="col-sm-3 control-label">Country</label>

</div>

<label class="col-sm-3 control-label">Phone</label>

</div>

<button type="button" class="btn btn-default pull-left" data-dismiss="modal">Close</button>

<button type="button" class="btn btn-primary" title="save button" id="btn-save"> <i class="fa fa-save"></i> Simpan</button>

</div>

Make sure the application layout like the following image:

Add the Javascript code before

			// function to repair keyboard tab in modal dialog adminlte
			(function (){
				var close = window.swal.close;
				var previousWindowKeyDown = window.onkeydown;
				window.swal.close = function() {
					close();
					window.onkeydown = previousWindowKeyDown;
				};
			})();


			$('#table-customer').DataTable({
				"paging": true,
				"lengthChange": false,
				"searching": false,
				"processing": true,
				"ordering": false,
				"info": false,
				"responsive": true,
				"autoWidth": false,
				"pageLength": 100,
				"dom": '<"top"f>rtip',
				"fnDrawCallback": function( oSettings ) {
				},
				"ajax": {
					"url": "customer.php",
					"type": "POST",
					"data" : {
						method : "list_customer"
					},
					error: function (request, textStatus, errorThrown) {
						swal(request.responseJSON.message);
					}
				},

				columns: [
				{ "data": null,render :  function ( data, type, full, meta ) {
					return  meta.row + 1;
				}},
				{ "data": "name" },
				{ "data": "gender" },
				{ "data": "country" },
				{ "data": "phone" },
				{ "data": null, render : function(data,type,row){
					return "<button title='Edit' class='btn btn-edit btn-warning btn-xs'><i class='fa fa-pencil'></i> Edit</button>  <button title='Delete' class='btn btn-hapus  btn-danger btn-xs'><i class='fa fa-remove'></i> Delete</button> ";
				} 		},
				]
			});

			$("#btn-save").click(function(){
				if($("#txtname").val() == ''){
					swal("Please enter name");
					return;
				}
				if($("#txtcountry").val() == ''){
					swal("Please enter country");
					return;
				}
				if($("#txtphone").val() == ''){
					swal("PLease enter contact number");
					return;
				}


				if($("#crud").val() == 'N'){
					swal({
						title: "New",
						text: "Create new customer ?",
						type: "warning",
						showCancelButton: true,
						confirmButtonClass: "btn-primary",
						confirmButtonText: "Save",
						closeOnConfirm: false,
						showLoaderOnConfirm: true
					},
					function(){

						add_customer($("#txtname").val(),$("#txtcountry").val(),$("#cbogender").val(),$("#txtphone").val());
					});
				}else{
					swal({
						title: "Edit",
						text: "Edit customer ?",
						type: "warning",
						showCancelButton: true,
						confirmButtonClass: "btn-primary",
						confirmButtonText: "Update",
						closeOnConfirm: false,
						showLoaderOnConfirm: true
					},
					function(){
						edit_customer($("#txtcode").val(),$("#txtname").val(),$("#txtcountry").val(),$("#cbogender").val(),$("#txtphone").val());

					});
				}
			});

			$("#btn-add").click(function(){
				$("#modal-customer").modal("show");
				$("#txtname").val("");
				$("#txtcountry").val("");
				$("#txtphone").val("");
				$("#crud").val("N");
			});
		});



		$(document).on("click",".btn-edit",function(){
			var current_row = $(this).parents('tr'); 
			if (current_row.hasClass('child')) { 
				current_row = current_row.prev(); 
			}
			var table = $('#table-customer').DataTable(); 
			var data = table.row( current_row).data();
			$("#txtname").val(data.name);
			$("#txtcode").val(data.id_cust);
			$("#txtcountry").val(data.country);
			$("#cbogender").val(data.gender)
			$("#txtphone").val(data.phone)
			$("#modal-customer").modal("show");
			setTimeout(function(){ 
				$("#txtname").focus()
			}, 1000);

			$("#crud").val("E");

		});

		$(document).on("click",".btn-hapus",function(){
			let current_row = $(this).parents('tr'); 
			if (current_row.hasClass('child')) { 
				current_row = current_row.prev(); 
			}
			let table = $('#table-customer').DataTable(); 
			let data = table.row( current_row).data();
			let idcust = data.id_cust;
			swal({
				title: "Delete",
				text: "Delete customer ?",
				type: "warning",
				showCancelButton: true,
				confirmButtonClass: "btn-danger",
				confirmButtonText: "Delete",
				closeOnConfirm: false,
				showLoaderOnConfirm: true
			},
			function(){

				let ajax = {
					method : "delete_customer",
					id_cust : idcust,
				}
				$.ajax({
					url:"customer.php",
					type: "POST",
					data: ajax,
					success: function(data, textStatus, jqXHR)
					{
						$resp = JSON.parse(data);
						if($resp['status'] == true){
							swal("Success delete customer");
							let xtable = $('#table-customer').DataTable(); 
							xtable.ajax.reload( null, false );
						}else{
							swal("Error delete customer : "+$resp['message'])
						}
						
					},
					error: function (request, textStatus, errorThrown) {
						swal("Error ", request.responseJSON.message, "error");
					}
				});
			});
		});


		function add_customer(nm,ctr,gdr,phn){
			let ajax = {
				method: "new_customer",
				name : nm,
				country:ctr,
				gender:gdr,
				phone:phn

			}
			$.ajax({
				url: "customer.php",
				type: "POST",
				data: ajax,
				success: function(data, textStatus, jqXHR)
				{
					$resp = JSON.parse(data);
					if($resp['status'] == true){
						$("#txtname").val("");
						$("#txtcountry").val("");
						$("#txtphone").val("");
						$("#txtcode").val("");
						$("#txtcode").focus();
						let xtable = $('#table-customer').DataTable(); 
						xtable.ajax.reload( null, false );
						swal("Success save new customer");
					}else{
						swal("Error save customer : "+$resp['message'])
					}
				},
				error: function (request, textStatus, errorThrown) {
					swal("Error ", request.responseJSON.message, "error");
				}
			});
		}
		
		function edit_customer(id,nm,ctr,gdr,phn){
			let ajax = {
				method: "edit_customer",
				id_cust :  id,
				name : nm,
				country:ctr,
				gender:gdr,
				phone:phn

			}
			$.ajax({
				url:  "customer.php",
				type: "POST",
				data: ajax,
				success: function(data, textStatus, jqXHR)
				{
					$resp = JSON.parse(data);

					if($resp['status'] == true){
						$("#modal-customer").modal("hide");
						swal("Success edit customer ");
						let xtable = $('#table-customer').DataTable(); 
						xtable.ajax.reload( null, false );
					}else{
						swal("Error save customer : "+$resp['message'])
					}
				},
				error: function (request, textStatus, errorThrown) {
					swal("Error ", request.responseJSON.message, "error");

				}
			});
		}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

// function to repair keyboard tab in modal dialog adminlte

(function (){

var close = window.swal.close;

var previousWindowKeyDown = window.onkeydown;

window.swal.close = function() {

close();

window.onkeydown = previousWindowKeyDown;

};

})();

$('#table-customer').DataTable({

"paging": true,

"lengthChange": false,

"searching": false,

"processing": true,

"ordering": false,

"info": false,

"responsive": true,

"autoWidth": false,

"pageLength": 100,

"dom": '<"top"f>rtip',

"fnDrawCallback": function( oSettings ) {

"ajax": {

"url": "customer.php",

"type": "POST",

"data" : {

method : "list_customer"

error: function (request, textStatus, errorThrown) {

swal(request.responseJSON.message);

}

columns: [

{ "data": null,render : function ( data, type, full, meta ) {

return meta.row + 1;

}},

{ "data": "name" },

{ "data": "gender" },

{ "data": "country" },

{ "data": "phone" },

{ "data": null, render : function(data,type,row){

return "<button title='Edit' class='btn btn-edit btn-warning btn-xs'><i class='fa fa-pencil'></i> Edit</button> <button title='Delete' class='btn btn-hapus btn-danger btn-xs'><i class='fa fa-remove'></i> Delete</button> ";

} },

]

});

$("#btn-save").click(function(){

if($("#txtname").val() == ''){

swal("Please enter name");

return;

}

if($("#txtcountry").val() == ''){

swal("Please enter country");

return;

}

if($("#txtphone").val() == ''){

swal("PLease enter contact number");

return;

}

if($("#crud").val() == 'N'){

swal({

title: "New",

text: "Create new customer ?",

type: "warning",

showCancelButton: true,

confirmButtonClass: "btn-primary",

confirmButtonText: "Save",

closeOnConfirm: false,

showLoaderOnConfirm: true

function(){

add_customer($("#txtname").val(),$("#txtcountry").val(),$("#cbogender").val(),$("#txtphone").val());

});

}else{

swal({

title: "Edit",

text: "Edit customer ?",

type: "warning",

showCancelButton: true,

confirmButtonClass: "btn-primary",

confirmButtonText: "Update",

closeOnConfirm: false,

showLoaderOnConfirm: true

function(){

edit_customer($("#txtcode").val(),$("#txtname").val(),$("#txtcountry").val(),$("#cbogender").val(),$("#txtphone").val());

});

}

});

$("#btn-add").click(function(){

$("#modal-customer").modal("show");

$("#txtname").val("");

$("#txtcountry").val("");

$("#txtphone").val("");

$("#crud").val("N");

});

$(document).on("click",".btn-edit",function(){

var current_row = $(this).parents('tr');

if (current_row.hasClass('child')) {

current_row = current_row.prev();

}

var table = $('#table-customer').DataTable();

var data = table.row( current_row).data();

$("#txtname").val(data.name);

$("#txtcode").val(data.id_cust);

$("#txtcountry").val(data.country);

$("#cbogender").val(data.gender)

$("#txtphone").val(data.phone)

$("#modal-customer").modal("show");

setTimeout(function(){

$("#txtname").focus()

}, 1000);

$("#crud").val("E");

});

$(document).on("click",".btn-hapus",function(){

let current_row = $(this).parents('tr');

if (current_row.hasClass('child')) {

current_row = current_row.prev();

}

let table = $('#table-customer').DataTable();

let data = table.row( current_row).data();

let idcust = data.id_cust;

swal({

title: "Delete",

text: "Delete customer ?",

type: "warning",

showCancelButton: true,

confirmButtonClass: "btn-danger",

confirmButtonText: "Delete",

closeOnConfirm: false,

showLoaderOnConfirm: true

function(){

let ajax = {

method : "delete_customer",

id_cust : idcust,

}

$.ajax({

url:"customer.php",

type: "POST",

data: ajax,

success: function(data, textStatus, jqXHR)

{

$resp = JSON.parse(data);

if($resp['status'] == true){

swal("Success delete customer");

let xtable = $('#table-customer').DataTable();

xtable.ajax.reload( null, false );

}else{

swal("Error delete customer : "+$resp['message'])

}

error: function (request, textStatus, errorThrown) {

swal("Error ", request.responseJSON.message, "error");

}

});

function add_customer(nm,ctr,gdr,phn){

let ajax = {

method: "new_customer",

name : nm,

country:ctr,

gender:gdr,

phone:phn

}

$.ajax({

url: "customer.php",

type: "POST",

data: ajax,

success: function(data, textStatus, jqXHR)

{

$resp = JSON.parse(data);

if($resp['status'] == true){

$("#txtname").val("");

$("#txtcountry").val("");

$("#txtphone").val("");

$("#txtcode").val("");

$("#txtcode").focus();

let xtable = $('#table-customer').DataTable();

xtable.ajax.reload( null, false );

swal("Success save new customer");

}else{

swal("Error save customer : "+$resp['message'])

}

error: function (request, textStatus, errorThrown) {

swal("Error ", request.responseJSON.message, "error");

}

});

}

function edit_customer(id,nm,ctr,gdr,phn){

let ajax = {

method: "edit_customer",

id_cust : id,

name : nm,

country:ctr,

gender:gdr,

phone:phn

}

$.ajax({

url: "customer.php",

type: "POST",

data: ajax,

success: function(data, textStatus, jqXHR)

{

$resp = JSON.parse(data);

if($resp['status'] == true){

$("#modal-customer").modal("hide");

swal("Success edit customer ");

let xtable = $('#table-customer').DataTable();

xtable.ajax.reload( null, false );

}else{

swal("Error save customer : "+$resp['message'])

}

error: function (request, textStatus, errorThrown) {

swal("Error ", request.responseJSON.message, "error");

}

});

}

Explanation

We used $(document).ready() to execute all JQuery code when the page is fully loaded.
The below function used to resolve modal dialog adminLTE when using the sweetalert plugin. There are bugs in modal dialog bootstrap and sweetalert plugin. The keyboard tab does not work correctly after sweetalert API fired. I already discussed in the article [Resolved] SweetAlert Prompt Not Working On Modal Dialog Bootstrap In Firefox.
To declare datatables plugin we call $(‘#table-customer’).DataTable({}) method with some parameter. Datatables load all customer data dynamically using ajax.
I create 2 Javascript functions to make new customer and update customer data (add_customer and edit_customer).
Using jQuery.ajax() to perform HTTP request without loading a page (this is one of the advantage using jQuery, speed up writing code to use the HTTP request function in Javascript). Ajax() method send a data object. Each object has a property named “method” who have a specific value to call the function on the controller file (customer.php)
To parse the data from the web server, we use JSON.parse function. When exchange data from a web server, the data is always a string. We transform the JSON string into a JSON object. Since JQuery 3 version, don’t use jQuery.parseJSON again because it’s deprecated.

Until this step, you successfully create PHP crud application. Run from the browser “http://localhost/crud/application/customer/” and your application must be like the following snippet video.

Bonus

Download the source code php crud tutorial below. Please unlock the content below with share this article to another friend from the button link.

CONCLUSION

You learned the simplest MVC concept from the example PHP crud above. The advantage is you easily understand the workflow of the PHP framework when learning laravel and codeigniter.
You learned the PDO concept in PHP. The advantage is you not to worry when upgrading your PHP version from PHP 5 to PHP 7. Because, mysql_connect() function deprecated in PHP 7. PDO class more secure and more effective when maintaining database connection. Besides, you implemented and learned how to use OOP technique in PHP when creating dbconn dan sql class.
You learned how to use adminLTE framework template to your web applications.
Using JQuery to create a to-do list app relatively easier and fast without refreshing the page.

Related posts: I create new Tutorial CRUD Client and API Server Using JQuery And Lumen Part 1,

Thus my article about the PHP CRUD tutorial. With 10 minutes, you have mastered the real concept of crud application. Hopefully useful

About Sigit Prasetya Nugroho

This site is a personal Blog of Sigit Prasetya Nugroho, a Desktop developer and freelance web developer working in PHP, MySQL, WordPress.

Comments

nolbyte says

April 9, 2016 at 8:45 am

Hi! Your link has been disable by google url shortener. Please fix. Tolong perbaiki link nya 🙂
Cheers

Reply
- Sigit Prasetya Nugroho says
  
  April 11, 2016 at 8:52 am
  
  terimakasih atas infonya.. download link sudah saya perbaiki. saya tidak mengerti mengapa google mendisable google short saya.
  
  silahkan download..terimakasih
  
  Reply
Uros says

May 4, 2016 at 11:09 am

Thank you so much, You are great!

Reply

andrew says

June 10, 2016 at 6:16 pm

can i download the source of this project? the tutorial is so awesome. thanks for the share.

Sigit Prasetya Nugroho says

June 14, 2016 at 5:54 am

Yes you can. You can download the full source after share that content. 🙂

Mauricio says

November 7, 2016 at 4:47 am

I shared but does not appear unlocked

Reply
- Sigit Prasetya Nugroho says
  
  November 7, 2016 at 6:37 am
  
  Those others do not get into trouble, please try it again, or enabled your cookies
  
  Reply

Patrick says

December 3, 2016 at 9:24 am

Hello,
I am french et i haven’t the wordpass to charged “Create Simple Crud with AdminLTE”.

Can you please get the password?

Thank you and your work is exceptionnel

Sigit Prasetya Nugroho says

December 4, 2016 at 3:20 pm

seegatesite.com

Reply
- addoul says
  
  December 5, 2019 at 12:02 pm
  
  thanks

bohn says

December 10, 2016 at 9:34 am

Hello

Please help me.
I have a problem with the video “Backend User CRUD Module” with “all-records.php” for Users, the message is “Notice: Undefined variable: html in Z:\AdminLTE\modules\users\all-records.php on line 14” this concern la variable $html.

{
	$html .= ' 
					'. $row['id'] .''. $row['username'] .'
					'. $row['email'] .'
					'. $row['genre'] .'
					'. $row['created_at'] .'
					<a href="http://127.0.0.1/AdminLTE/modules/users/update-form.php?id='. $row['id'] .'" rel="nofollow"><i></i></a>
					<a href="http://127.0.0.1/AdminLTE/modules/users/delete-submit.php?id='. $row['id'] .'" rel="nofollow"><i></i></a>
				 ' ;
	}

{

$html .= '

'. $row['id'] .''. $row['username'] .'

'. $row['email'] .'

'. $row['genre'] .'

'. $row['created_at'] .'

' ;

}

Please i don’t understand. Thank you

Sigit Prasetya Nugroho says

December 11, 2016 at 8:12 am

before loop, insert $html variable

$html = '';
for......
$html .= ' 
					'. $row['id'] .''. $row['username'] .'
					'. $row['email'] .'
					'. $row['genre'] .'
					'. $row['created_at'] .'
					<a href="http://127.0.0.1/AdminLTE/modules/users/update-form.php?id='. $row['id'] .'" rel="nofollow"><i></i></a>
					<a href="http://127.0.0.1/AdminLTE/modules/users/delete-submit.php?id='. $row['id'] .'" rel="nofollow"><i></i></a>
				 ' ;
	}

$html = '';

for......

$html .= '

'. $row['id'] .''. $row['username'] .'

'. $row['email'] .'

'. $row['genre'] .'

'. $row['created_at'] .'

' ;

}

hope fix your problem 🙂

bohn says

December 11, 2016 at 5:13 pm

Thank you for your quickly reply,

But can you specifie me the values to put in the first declaration de la variable “$html” with the loop for.

I’m sorry to bother you. Good Day or good night, I do not know the time difference.
bohn says

December 11, 2016 at 6:40 pm

Hi

Sublime, i understood.

I have see the example on your new “Tutorial showing MySQL data to HTML tables with many options with Jquery and AdminLTE”.
A thousand times thank you, and you are the best.
Friendship
Sigit Prasetya Nugroho says

December 12, 2016 at 2:58 am

Yes, you’re welcome 🙂

ahmed says

July 26, 2016 at 9:38 pm

thanks for the tutorial. the download has password… i am referring to the crud.zip

Reply
- Sigit Prasetya Nugroho says
  
  July 27, 2016 at 1:26 am
  
  In the bottom of article, there are social media icon that must be shared, after you sharing to other, your download password will appear 🙂
  
  Reply
  - ahmed says
    
    July 27, 2016 at 12:58 pm
    
    I have downloaded the file, but it is asking for a password… Can you please be kind enough to give the password?
    
    Reply
toto says

August 7, 2016 at 8:36 pm

awesome…thanks

Reply
Angga says

August 15, 2016 at 9:20 am

Terima Kasih atas tutorialnya, tapi kok ada error muncul ya “DataTables warning: table id=table_cust – Invalid JASON response”. ini error kenapa ya?

Reply
- Sigit Prasetya Nugroho says
  
  August 15, 2016 at 9:44 am
  
  Error tersebut ada kesalahan pada ajax datatablesnya (untuk menampilkan data pada table html). Untuk mengeceknya silahkan tampilkan console browser anda (F12), kemudian tekan tab “network” cari path ‘data.php’ errornya akan kelihatan.
  
  Semoga terbantu 🙂
  
  Reply
  - Angga says
    
    August 16, 2016 at 4:52 am
    
    Terima Kasih banyak om, dengan sedikit modifikasi sudah bisa teratasi 🙂
    
    Reply
    - Adam says
      
      February 23, 2017 at 9:21 pm
      
      bagaimana?
      
      Reply
      - Sigit Prasetya Nugroho says
        
        February 24, 2017 at 1:09 am
        
        bagaimana gmn mas ? 🙂

Angga says

August 18, 2016 at 10:10 am

Mau nanya om, untuk nampilin format tanggal di datatable bagaimana ya caranya? dalam DB saya format tanggalnya yyyy-mm-dd, tapi yang muncul dalam datatables [object][object]

Sigit Prasetya Nugroho says

August 18, 2016 at 12:20 pm

Hello angga,
Anda menampilkan pake ajax ? pada data php yang dipanggil untuk menampilkan tabel ditambahkan date(‘d/m/Y’,strtotime(table[‘field_tanggal’])) seperti contoh berikut

$i=0;
foreach($table as $key)
{
$table[i]['field_tanggal'] = date('d/m/Y',strtotime($key['field_tanggal']));
$i++;
}

$i=0;

foreach($table as $key)

{

$table[i]['field_tanggal'] = date('d/m/Y',strtotime($key['field_tanggal']));

$i++;

}

Semoga membantu, atau kalo boleh saya lihat script anda.. 🙂

Angga says

August 19, 2016 at 2:57 am

dear Om Sigit..terima kasih untuk bantuannya sepertinya masih ada error kalo pake script om di atas. muncul “Warning: strtotime() expects parameter 1 to be string, object given in ..\data.php on line 11”
Berikut script saya.

include "../config.php";
$query="SELECT CONVERT(VARCHAR(10),dateFrom,103) as dateFromCon,* FROM(SELECT ROW_NUMBER() OVER (ORDER BY Id) AS urutan, * FROM HULL_WORKSHEET) AS EMP";
$hasil = sqlsrv_query($conn,$query);
$data = array();
while($r = sqlsrv_fetch_array($hasil)) {
	$data[] = $r;
}
$i=0;
foreach ($data as $key) {
	$data[$i]['dateFrom'] = date('d/m/Y',strtotime($key['dateFrom']));
		// add new button
	$data[$i]['button'] = '<i></i><i></i>';
	$i++;
}
$datax = array('data' =&gt; $data);
echo json_encode($datax);

include "../config.php";

$query="SELECT CONVERT(VARCHAR(10),dateFrom,103) as dateFromCon,* FROM(SELECT ROW_NUMBER() OVER (ORDER BY Id) AS urutan, * FROM HULL_WORKSHEET) AS EMP";

$hasil = sqlsrv_query($conn,$query);

$data = array();

while($r = sqlsrv_fetch_array($hasil)) {

$data[] = $r;

}

$i=0;

foreach ($data as $key) {

$data[$i]['dateFrom'] = date('d/m/Y',strtotime($key['dateFrom']));

// add new button

$data[$i]['button'] = '<i></i><i></i>';

$i++;

}

$datax = array('data' => $data);

echo json_encode($datax);

Akhirnya saya akalin convert date nya di query sql nya pakai field dateFromCon

Angga says

August 19, 2016 at 3:01 am

Tetapi saya masih ragu dengan menggunakan convcert di query untuk kedepannya, apakah sudah benar convert di query apa ada cara lain? Terima kasih sebelumnya

Sigit Prasetya Nugroho says

August 19, 2016 at 3:18 am

Helo mas angga,
Maaf saya masih bingung, untuk apa menggunakan convert ? apakah anda menggunakan sqlserver ? Jika Mysql, format date akan seperti ini “YYYY-mm-dd”, sehingga waktu di parsing ke php akan menjadi string, contohnya ketika saya memiliki field tgl_transaksi, ketika saya cek menggunakan var_dump() hasilnya seperti ini ‘ string(10) “2016-08-12” ‘. dari hasil tersebut agar menjadi format “d/m/Y” tinggal diubah menggunakan

foreach ($data as $key) {
	$data[$i]['dateFromCon'] = date('d/m/Y',strtotime($key['dateFromCon']));
		// add new button
	$data[$i]['button'] = '<i></i><i></i>';
	$i++;
}
$datax = array('data' => $data);
echo json_encode($datax);

foreach ($data as $key) {

$data[$i]['dateFromCon'] = date('d/m/Y',strtotime($key['dateFromCon']));

// add new button

$data[$i]['button'] = '<i></i><i></i>';

$i++;

}

$datax = array('data' => $data);

echo json_encode($datax);

Di query anda menggunakan nama dateFromCon bukan dateFrom

CMIIW, semoga membantu

Angga says

August 19, 2016 at 4:10 am

Dear Om Sigit, melanjutkan pertanyaan sebelumnya, iya om saya pakai MSSQL Server. kalau saya pakai

$data[$i][‘dateFromCon’] = date(‘d/m/Y’,strtotime($key[‘dateFromCon’]));

muncul error “Warning: strtotime() expects parameter 1 to be string, object given in ..\data.php on line 11”

field dateFrom ada di dalam table HULL_WORKSHEET, karena ada error makanya saya convert saja di querynya, mucul lah field baru dateFromCon.

Maaf ni saya banyak tanya 🙂

Sigit Prasetya Nugroho says

August 19, 2016 at 4:23 am

hello mas angga,
bisa coba di cek dulu var_dump($key[‘dateFromCon’]) ? hasilnya apa 🙂

Angga says

August 19, 2016 at 7:24 am

var_dump($key[‘dateFromCon’]) => string(10) “08/08/2016” (field dateFromCon sudah saya convert dahulu di query nya)

var_dump($key[‘dateFrom’])  =&gt; 
 object(DateTime)#63 (3) {
  ["date"]=&gt;
  string(26) "2016-08-08 00:00:00.000000"
  ["timezone_type"]=&gt;
  int(3)
  ["timezone"]=&gt;
  string(13) "Europe/Berlin"
}

var_dump($key[‘dateFrom’]) =>

object(DateTime)#63 (3) {

["date"]=>

string(26) "2016-08-08 00:00:00.000000"

["timezone_type"]=>

int(3)

["timezone"]=>

string(13) "Europe/Berlin"

}

Yang saya inginkan tidak usah convert di query, yang artinya field dateFromCon tidak dipakai, hanya menggunakan field dateFrom saja.
Sebenarnya dengan menggunakan field dateFromCon di datatables tanggal sudah muncul dengan benar tanpa menggunakan $data[$i][‘dateFromCon’] = date(‘d/m/Y’,strtotime($key[‘dateFromCon’]));

Sigit Prasetya Nugroho says

August 19, 2016 at 7:30 am

dear mas angga,
gmn kalo dicoba date(‘d/m/Y’,strtotime($key[‘dateFrom’][‘date’])); ? karena hasil dari dateFrom anda berupa object.

Semoga membantu 🙂

Reply

Cris says

September 5, 2016 at 5:22 am

how to download the source program
thanks

Reply
- Sigit Prasetya Nugroho says
  
  September 9, 2016 at 2:12 am
  
  share content locked form with your social media account (twitter or fb or g+) 🙂
  
  Reply
Delshire says

September 25, 2016 at 2:56 pm

Friend i have this error, I NEED HELP PLEASE!!!

Fatal error: Uncaught Error: Call to undefined function mysql_connect() in C:\xampp\htdocs\crud\application\config.php:7 Stack trace: #0 C:\xampp\htdocs\crud\application\customer\data.php(2): include() #1 {main} thrown in C:\xampp\htdocs\crud\application\config.php on line 7

HELP PLEASE, and! I FOLLOW YOU!

Reply
- Sigit Prasetya Nugroho says
  
  September 25, 2016 at 3:03 pm
  
  are you use xampp that support php7 ? mysql_connect() doesnt support on PHP7. CMIIW 🙂
  
  Reply
Delshire says

September 25, 2016 at 5:12 pm

Ohh yes! use php 7 and now I am installing php5, a solution for use in php7 should I do? …
Thanks in advance testing in php5!

Reply
- Sigit Prasetya Nugroho says
  
  September 26, 2016 at 1:20 am
  
  You need to learn PDO PHP.. read my article
  
  Tutorial PHP Class For Simple CRUD with PDO For Beginners
  
  and you will understand :). Using PDO more flexsible and efficient to create application database using PHP. CMIIW 🙂
  
  Reply

Eric says

October 4, 2016 at 4:19 am

I need to select individual records by filtering the results in the data.php with a regular WHERE clause like WHERE name=”John”. How do I achieve that with your code in MySQL statement in data.php? I need your help, please,

Sigit Prasetya Nugroho says

October 4, 2016 at 5:24 am

I usually use the $_SESSION to do this.

#OPTION 1

$_SESSION['xname'] = 'JOHN';

$query=mysql_query("SELECT @rownum := @rownum + 1 AS urutan,t.*
    FROM customer t, 
    (SELECT @rownum := 0) r") where name = ".$_SESSION['xname'];

$_SESSION['xname'] = 'JOHN';

$query=mysql_query("SELECT @rownum := @rownum + 1 AS urutan,t.*

FROM customer t,

(SELECT @rownum := 0) r") where name = ".$_SESSION['xname'];

Create script to change $_SESSION value immediately 🙂

Second Option

Read my article https://seegatesite.com/showing-mysql-data-to-html-tables-with-many-options-with-jquery-and-adminlte/

fcafra says

October 18, 2016 at 3:03 pm

Hi, really great article ! Thank’s for sharing. I need a help please… when the column of mysql is very lange and contains strange character like ‘ or \n or \r ….. the datatables respond with this error message “Datatables warning Invalid JSON response”. … please, there is a method or hint to solve ? Thank’s very much !

Reply
- Sigit Prasetya Nugroho says
  
  October 19, 2016 at 4:26 am
  
  error when you use -> ‘, read here http://stackoverflow.com/questions/19176024/how-to-escape-special-characters-in-building-a-json-string
  
  Reply
Saurabha says

October 30, 2016 at 7:24 am

I downloaded your code and tried to execute. I am able to save the data. But the data.php doesn’t seem to load any data. I see no errors as well. Any suggestions would be helpful.

Reply
- Sigit Prasetya Nugroho says
  
  October 31, 2016 at 9:35 am
  
  Thank you for downloading,
  I’m not sure there are no errors. maybe you can send the file back on me?
  
  Reply
ONY says

November 13, 2016 at 8:45 am

Tq Mas Sigit… Barokah ilmunya njenengan… Sehat Selalu buat mas Brow dan pasti lancar rejekinya.. Aamiin.
Salam Kenal, Ony.

Reply
- Sigit Prasetya Nugroho says
  
  November 14, 2016 at 6:32 am
  
  terimakasih mas Ony. 🙂
  
  Reply
bohn says

December 3, 2016 at 5:46 pm

Hello la connection mysql n’est plus à jour.
Pouvez vous refaire une connection avec mysqli?

Thank you

Reply
- Sigit Prasetya Nugroho says
  
  December 4, 2016 at 3:23 pm
  
  S’il vous plaît lire le tutoriel Tutorial PHP Class For Simple CRUD with PDO For Beginners
  
  Reply
Alexis Gaitan says

December 18, 2016 at 6:51 am

Hi why when i create a new customer or edit one customer after click Save button the form does not closes automatically

Reply
- Sigit Prasetya Nugroho says
  
  December 19, 2016 at 4:58 am
  
  Every programmer has his own style in making applications. If you need to closes form automatically, add this code below in the save button after success save the data
  [php]
  
  $("#modalcust").modal("hide");
  
  [/php]
  
  I hope answer your questions 🙂
  
  Reply
altaf says

December 28, 2016 at 8:16 am

hi i am trying to download the zip document, and successfully downloaded the material but i am not able to extract that its asking some password to extract so please let me know the procedure to extract.

thank you

Reply
- Sigit Prasetya Nugroho says
  
  December 28, 2016 at 8:47 am
  
  Please read the article from beginning again.. i wrote the password in article
  
  Reply
aififffff says

January 10, 2017 at 10:36 pm

hi..saya ada dapat error ini..
Warning: mysqli_query() expects parameter 1 to be mysqli, object given in C:\xampp\htdocs\sriidu2\application\student\data.php on line 5

Warning: mysqli_fetch_assoc() expects parameter 1 to be mysqli_result, null given in C:\xampp\htdocs\sriidu2\application\student\data.php on line 7
{“data”:[]}

Reply
- Sigit Prasetya Nugroho says
  
  January 12, 2017 at 3:10 am
  
  halo mas aififff,
  
  maaf keterangan errornya kurang spesifik, coba di trace dengan mysql_error(). Sebaiknya beralih menggunakan PDO saja, karena di PHP yang baru sudah tidak ada support lagi untuk mysqli_query / mysql_query.
  
  silahkan baca pdo disini Tutorial PHP Class For Simple CRUD with PDO For Beginners
  
  Semoga membantu
  
  Reply
Bala says

February 18, 2017 at 4:03 pm

The 2 buttons, edit and delete are appearing one below other. What could be the issue? Is it that I missed a css?

Reply
- Sigit Prasetya Nugroho says
  
  February 20, 2017 at 2:04 am
  
  Can you send the screenshot ?
  
  Reply
Yosra says

March 27, 2017 at 1:18 am

Hello, thank you for the great tutorial, I want to know if it is possible to integrate your source code into my Java Enterprise Edition Application ( with JSF), my initial problem was how to have dynamic data into AdminLTE table.

Reply
- Sigit Prasetya Nugroho says
  
  March 27, 2017 at 1:27 am
  
  Sorry I never used the JSF, but I will try on the other occasion 🙂
  
  Reply
Bayu Kurniawan says

April 6, 2017 at 8:49 am

How if the notification similar to facebook notification? Can you make tutorial about it? If us insert or delete data from table, the notification will be showed in the ‘bell’ icon (AdminLTE). Thanks! 🙂

Reply
- Sigit Prasetya Nugroho says
  
  April 10, 2017 at 2:30 pm
  
  halo mas Bayu,
  untuk membuat notifikasi seperti itu intinya sama dengan artikel ini.
  1. Ketika anda tambah atau hapus data, anda perlu menambahkan 1 field flag agar dapat dicek sistem apakah notifikasi sudah di broadcast atau belum.
  2. Anda dapat melakukan pengecekan flag delete atau tambah data dengan ajax jquery yang diset interval tiap 1 menit atau 2 menit. atau ketika halaman diload.
  
  Maaf saya belum sempat membuatkan tutorialnya karena ada project diluar kota. akan saya bikinkan tutorialnya secepat mungkin jika telah kembali ke kota asal saya 🙂
  
  Terimakasih telah berkunjung
  
  Reply
  - Bayu Kurniawan says
    
    April 12, 2017 at 12:47 am
    
    Terima kasih, mas. Kalau tutorialnya sudah ada, tolong diinformasikan mas. Hehe 😀
    
    Reply
  - Bayu Kurniawan says
    
    April 12, 2017 at 1:04 pm
    
    Mas, mohon bantuannya. Saya coba edit dengan menambahkan beberapa input, tapi ada error (invalid order). Kira” apa yang harus diperhatikan?
    
    Reply
    - Sigit Prasetya Nugroho says
      
      April 12, 2017 at 11:36 pm
      
      coba di salin sini kodenya mas 🙂
      
      Reply
  - Bayu Kurniawan says
    
    April 24, 2017 at 12:45 pm
    
    Mohon bantuannya soal fitur notifikasi yang saya pernah request mas :’D . Soalnya tinggal satu fitur itu aja yang saya butuhin. Stuck banget.
    
    Reply
    - Sigit Prasetya Nugroho says
      
      April 24, 2017 at 2:06 pm
      
      mungkin 2-3 hari lagi baru bisa coba untuk bikin mas… kebetulan saya sedang ada project diluar kota, jadi blom bisa bikin artikel 🙂
      
      Reply

avocalipso says

April 13, 2017 at 5:11 pm

DataTables warning: table id=table_cust – Requested unknown parameter ‘country’ for row 0. For more information about this error, please see http : //datatables.net/tn/4

ini kenapa ya mas ?

Sigit Prasetya Nugroho says

April 14, 2017 at 2:26 am

Maaf mas ada kekeliruan di pembuatan struktur table customer, bukan field borndate tetapi country. Artikel sudah saya perbaiki pada bagian pembuatan tabel dan insert tabel. Terimakasih 🙂

INSERT INTO customer(NAME,gender,country,phone) VALUES('Sigit Prasetya N','Male','Indonesia','000-857489');
INSERT INTO customer(NAME,gender,country,phone) VALUES('Taylor Swift','Female','British','0858774858');
INSERT INTO customer(NAME,gender,country,phone) VALUES('Kristen Stewart','Female','United State','888-985859');

INSERT INTO customer(NAME,gender,country,phone) VALUES('Sigit Prasetya N','Male','Indonesia','000-857489');

INSERT INTO customer(NAME,gender,country,phone) VALUES('Taylor Swift','Female','British','0858774858');

INSERT INTO customer(NAME,gender,country,phone) VALUES('Kristen Stewart','Female','United State','888-985859');

Niko says

April 14, 2017 at 3:34 am

1. DataTables warning: table id=tablea – Invalid JSON response. For more information about this error

2. Ada error seperti diatas, data masuk ke database, tapi tidak tampil ke dalam tabel.

Mohon pencerahannya mas

Sigit Prasetya Nugroho says

April 14, 2017 at 4:22 am

Silahkan buka file data.php dan ubah dengan kode berikut :

<?php
include "../config.php";
$query=mysql_query("SELECT @rownum := @rownum + 1 AS urutan,t.*
	FROM customer t, 
	(SELECT @rownum := 0) r");
if(mysql_error())
{
	die(print_r($mysql_error()));

}
$data = array();
while($r = mysql_fetch_assoc($query)) {
	$data[] = $r;
}
$i=0;
foreach ($data as $key) {
		// add new button
	$data[$i]['button'] = '<button type="submit" id_cust="'.$data[$i]['id_cust'].'" class="btn btn-primary btnedit" ><i class="fa fa-edit"></i></button> 
							   <button type="submit" id_cust="'.$data[$i]['id_cust'].'" name_cust="'.$data[$i]['name'].'" class="btn btn-primary btnhapus" ><i class="fa fa-remove"></i></button>';
	$i++;
}
$datax = array('data' => $data);
echo json_encode($datax);
?>

<?php

include "../config.php";

$query=mysql_query("SELECT @rownum := @rownum + 1 AS urutan,t.*

FROM customer t,

(SELECT @rownum := 0) r");

if(mysql_error())

{

die(print_r($mysql_error()));

}

$data = array();

while($r = mysql_fetch_assoc($query)) {

$data[] = $r;

}

$i=0;

foreach ($data as $key) {

// add new button

$data[$i]['button'] = '<button type="submit" id_cust="'.$data[$i]['id_cust'].'" class="btn btn-primary btnedit" ><i class="fa fa-edit"></i></button>

<button type="submit" id_cust="'.$data[$i]['id_cust'].'" name_cust="'.$data[$i]['name'].'" class="btn btn-primary btnhapus" ><i class="fa fa-remove"></i></button>';

$i++;

}

$datax = array('data' => $data);

echo json_encode($datax);

Coba tekan F12 pada browser dan buka tab network , kemudian tambahkan data baru pastikan mendapat response json array seperti gambar berikut

Jika masih error dapat anda kirimkan project anda ke saya agar dapat saya lihat . Semoga membantu:)

Niko says

April 14, 2017 at 7:10 am

Sudah saya kirim email mas 🙂

Reply
- Sigit Prasetya Nugroho says
  
  April 14, 2017 at 8:51 am
  
  Email kmn ya? Ke sgt86slo@yahoo.com saja
  
  Reply
  - Niko says
    
    April 15, 2017 at 3:59 am
    
    Sudah mas 🙂
  - Sigit Prasetya Nugroho says
    
    April 15, 2017 at 8:33 am
    
    okay sudah saya balas email anda 🙂

Chiefphreak says

September 9, 2017 at 12:39 pm

[{"urutan":"1","id_cust":"1","name":"Sigit Prasetya N","gender":"Male","country":"Indonesia","phone":"000-857489","button":"<i>\n<i>"},{"urutan":"2","id_cust":"20","name":"mario","gender":"Male","country":"Duitsland","phone":"23456111","button":"<i>\n<i>"},{"urutan":"3","id_cust":"19","name":"test","gender":"Male","country":"Nederlans","phone":"123456789120","button":"<i>\n<i>"}]

[{"urutan":"1","id_cust":"1","name":"Sigit Prasetya N","gender":"Male","country":"Indonesia","phone":"000-857489","button":"<i>\n<i>"},{"urutan":"2","id_cust":"20","name":"mario","gender":"Male","country":"Duitsland","phone":"23456111","button":"<i>\n<i>"},{"urutan":"3","id_cust":"19","name":"test","gender":"Male","country":"Nederlans","phone":"123456789120","button":"<i>\n<i>"}]

Output from de debugger. I see that there is an error in the buttons but I don’t know how to solve this.

Sigit Prasetya Nugroho says

September 11, 2017 at 1:52 am

Check your code in data.php below:

foreach ($data as $key) {
 $data[$i]['button'] = '<button type="submit" id_cust="'.$data[$i]['id_cust'].'" class="btn btn-primary btnedit" ><i class="fa fa-edit"></i></button> 
    <button type="submit" id_cust="'.$data[$i]['id_cust'].'" name_cust="'.$data[$i]['name'].'" class="btn btn-primary btnhapus" ><i class="fa fa-remove"></i></button>';
 $i++;
}

foreach ($data as $key) {

$data[$i]['button'] = '<button type="submit" id_cust="'.$data[$i]['id_cust'].'" class="btn btn-primary btnedit" ><i class="fa fa-edit"></i></button>

<button type="submit" id_cust="'.$data[$i]['id_cust'].'" name_cust="'.$data[$i]['name'].'" class="btn btn-primary btnhapus" ><i class="fa fa-remove"></i></button>';

$i++;

}

avocalipso says

April 21, 2017 at 12:33 pm

solvednya diapain bang? ko mendadak sama ya nongol Invalid JSON response. For more information about this error, please see http://datatables.net/tn/1 hihi
Mohon bantuannya

Reply
- Sigit Prasetya Nugroho says
  
  April 22, 2017 at 5:49 am
  
  nama field databasenya saya salah 🙂
  
  Reply

Bayu Kurniawan says

April 17, 2017 at 3:47 am

Mas, bagaimana caranya saat menambah item baru, waktu menekan tombol save, modalnya hilang.

Sigit Prasetya Nugroho says

April 17, 2017 at 5:59 am

di javascript nya di di btnsavenya di ubah seperti berikut

$(document).on("click","#btnsave",function(){
      var id_cust = $("#txtid").val();
      var name = $("#txtname").val();
      var gender = $("#cbogender").val();
      var country = $("#txtcountry").val();
      var phone = $("#txtphone").val();
      var crud=$("#crudmethod").val();
      if(name == '' || name == null ){
        swal("Warning","Please fill customer name","warning");
        $("#txtname").focus();
        return;
      }
      var value = {
        id_cust: id_cust,
        name: name,
        gender:gender,
        country:country,
        phone:phone,
        crud:crud
      };
      $.ajax(
      {
        url : "save.php",
        type: "POST",
        data : value,
        success: function(data, textStatus, jqXHR)
        {
          var data = jQuery.parseJSON(data);
          if(data.crud == 'N'){
            if(data.result == 1){
              $.notify('Successfull save data');
              var table = $('#table_cust').DataTable(); 
              table.ajax.reload( null, false );
              $("#txtname").focus();
              $("#txtname").val("");
              $("#txtcountry").val("");
              $("#txtphone").val("");
              $("#crudmethod").val("N");
              $("#txtid").val("0");
              $("#txtnama").focus();
            }else{
              swal("Error","Can't save customer data, error : "+data.error,"error");
            }
          }else if(data.crud == 'E'){
            if(data.result == 1){
              $.notify('Successfull update data');
              var table = $('#table_cust').DataTable(); 
              table.ajax.reload( null, false );
              $("#txtname").focus();
            }else{
             swal("Error","Can't update customer data, error : "+data.error,"error");
            }
          }else{
            swal("Error","invalid order","error");
          }
$("#modalcust").modal("hide");
        },
        error: function(jqXHR, textStatus, errorThrown)
        {
           swal("Error!", textStatus, "error");
        }
      });
    });

$(document).on("click","#btnsave",function(){

var id_cust = $("#txtid").val();

var name = $("#txtname").val();

var gender = $("#cbogender").val();

var country = $("#txtcountry").val();

var phone = $("#txtphone").val();

var crud=$("#crudmethod").val();

if(name == '' || name == null ){

swal("Warning","Please fill customer name","warning");

$("#txtname").focus();

return;

}

var value = {

id_cust: id_cust,

name: name,

gender:gender,

country:country,

phone:phone,

crud:crud

};

$.ajax(

{

url : "save.php",

type: "POST",

data : value,

success: function(data, textStatus, jqXHR)

{

var data = jQuery.parseJSON(data);

if(data.crud == 'N'){

if(data.result == 1){

$.notify('Successfull save data');

var table = $('#table_cust').DataTable();

table.ajax.reload( null, false );

$("#txtname").focus();

$("#txtname").val("");

$("#txtcountry").val("");

$("#txtphone").val("");

$("#crudmethod").val("N");

$("#txtid").val("0");

$("#txtnama").focus();

}else{

swal("Error","Can't save customer data, error : "+data.error,"error");

}

}else if(data.crud == 'E'){

if(data.result == 1){

$.notify('Successfull update data');

var table = $('#table_cust').DataTable();

table.ajax.reload( null, false );

$("#txtname").focus();

}else{

swal("Error","Can't update customer data, error : "+data.error,"error");

}

}else{

swal("Error","invalid order","error");

}

$("#modalcust").modal("hide");

error: function(jqXHR, textStatus, errorThrown)

{

swal("Error!", textStatus, "error");

}

});

ada penambahan $("#modalcust").modal("hide");

Semoga membantu

Bayu Kurniawan says

April 19, 2017 at 3:10 am

Mas untuk fungsi edit, muncul notifikasi sukses, tapi data di db tidak terupdate. Mohon pencerahannya mas. 🙂

Reply
- Sigit Prasetya Nugroho says
  
  April 20, 2017 at 1:12 am
  
  coba di bagian save.php di cek dl mungkin ada yang salah, atau buka f12 pada browser tab bagian network, kemudian coba tekan tombol update. ntar bagian save.php akan muncul, lihat response nya. (Tutorial saya ini hanya projek sederhana, dasar membuat CRUD saja, jadi kemungkinan tidak lengkap, silahkan dikembangkan sendiri ) 🙂
  
  Reply
Taufik says

May 14, 2017 at 6:15 pm

pake php 7 error di baris mysqli_error(), untuk solusinya bagaimana?

Reply
- Sigit Prasetya Nugroho says
  
  May 15, 2017 at 1:08 am
  
  Solusinya cuman 1 , beralih ke PDO. Tutorial nya bisa baca disini Tutorial Build Point Of Sale With PHP, PDO, MySQL And Jquery Part 1. Menurut saya lebih powerful dan efisien dalam pembuatan aplikasi
  
  Reply
ian says

December 25, 2017 at 4:51 am

gan, ane coba pake script agan..sukses utk post data, tapi gk show results di page nya..script agan gk ad yg ane rubah..kra2 dmn salahnya y gan ? tlg dbantu gan…thanks

Reply
- Sigit Prasetya Nugroho says
  
  December 26, 2017 at 3:08 am
  
  coba di F12, lihat bagian console..lihat apa errornya 🙂
  
  Reply
ARjun P Yadav says

March 17, 2018 at 9:22 am

Hi Friend
I have a problem and i think you can help me .
Can you please tell me how to show the image column of a table in pdf when use export button in Datatable

Reply
- Sigit Prasetya Nugroho says
  
  March 19, 2018 at 6:49 am
  
  can you explain to me more detail ?
  
  sory i dont understand 🙂
  
  Reply
Joko Supriyanto says

March 31, 2018 at 3:44 pm

Link code full nya mna gan?

Reply
- Sigit Prasetya Nugroho says
  
  April 2, 2018 at 1:36 am
  
  sudah ada diatas gan 🙂
  
  Reply
r15ch13 says

April 11, 2018 at 4:22 pm

This example code is vulnerable to SQL Injections! Please use PDO or at least MySQLi.

Reply
- Sigit Prasetya Nugroho says
  
  April 12, 2018 at 1:37 am
  
  read more here
  
  https://seegatesite.com/tutorial-php-class-for-simple-crud-with-pdo-for-beginners/
  
  Reply
hendri yan says

May 15, 2018 at 3:38 am

izin download gan..mau coba dulu

Reply
dinesh says

July 12, 2018 at 9:00 am

NIce,effort , I downloaded the file , i want to extract it ,Its asking starter password, can u tell me the password of the file.

Reply
- Sigit Prasetya Nugroho says
  
  July 12, 2018 at 9:17 am
  
  If you read my article to finish, you will get the password 🙂
  
  pass : seegatesite.com
  
  Reply
ashily says

September 1, 2019 at 4:54 pm

I share the article to tweet, but the download link did not show up.

Reply
- Sigit Prasetya Nugroho says
  
  September 2, 2019 at 2:17 am
  
  Sorry for experiencing unpleasant events.
  Please re-check the link above or you can directly use the following link
  
  http://www.mediafire.com/file/unl5ab8ibl83eu0/php_source_code_tutorial_crud_php_jquery_mysql_in_10_minutes_for_beginners.zip/file
  
  Reply
Gatot says

October 30, 2019 at 3:34 am

Sebelumnya terima kasih mas sigit atas ilmunya, sekalian ijin download meski terlambat …
Mas sigit Yth, aplksi dijalankan dikomputer saya tampil sesuai gambar ditutorial , hnya saja tombol +new customer diklik ga ada respon apa2 / diam .. mohon bantuannya

Reply
- Sigit Prasetya Nugroho says
  
  October 30, 2019 at 2:29 pm
  
  habis di klik +new customer coba di inspect element/f12 trus pilih tab console…dilihat apakah ada error?
  
  semoga membantu
  
  Reply
  - Gatot says
    
    October 30, 2019 at 11:54 pm
    
    Errornya bnyak sekali mas sigit ..hehe
    1. Could not be loaded https://fonts.googleapis.com/css?family dst dst
    2.unknown property ‘moz-text-decoration’. Declaration dropped
    3. Unknown pseudo-class or pseudo-element ‘-webkit-inner-spin-button’. Ruleset ignored due to bad selector
    & masih bnyak yg lain…
    
    Info : aq pake php 5.4.16
    Terima kasih
    
    Reply
    - Sigit Prasetya Nugroho says
      
      November 2, 2019 at 6:49 am
      
      mungkin bisa di copykan kesini, biar dapat saya bantu 🙂
      
      Reply

Tutorial Create Simple CRUD APPLICATION Using PHP and Mysql

Requirements

Create a database and table on MySQL

Create a new PHP CRUD project

Bonus

CONCLUSION

About Sigit Prasetya Nugroho

Reader Interactions

Comments

Leave a Reply to Sigit Prasetya Nugroho Cancel reply