Seegatesite.com

Seegatesite.com - Programming Tutorial , Sharing , How and Learn Together

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

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

By ∙ ∙ PHP ∙ 104 Comments

Share : TwitterFacebookTelegramWhatsapp

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

Related Articles :

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.

Tutorial Create Simple CRUD APPLICATION Using PHP and Mysql

 

Tutorial Php Crud Application For Beginners In 10 Minutes Bonus Source Code Min

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.”
Create New Database As Crud Create Simple Crud With Datatables Jquery And Adminlte
Creating a customer table
Create New Table Customer Create Simple Crud With Datatables Jquery And Adminlte Revisi
Add dummy data to the customer table

1
2
3
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:
Bower Install Bootstrap SweetalertAfter 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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<?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
    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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
<?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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
<?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
    How To Prevent Unauthorized Access From The Direct Link Min
  • 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 Head Close

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 Body Close

1
2
3
<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 elementContent Wrapper

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<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>

Add bootstrap modal dialog code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<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>

Make sure the application layout like the following image:

Php Crud Tutorial For Beginners Min

Add the Javascript code before Body Close

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
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.Resolve Keyboard Tab Modal Dialog Adminlte Min
  • 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.

 

Source code tutorial CRUD PHP, JQUERY And AdminLTE Framework

password : seegatesite.com

 

CONCLUSION

  1. 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.
  2. 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.
  3. You learned how to use adminLTE framework template to your web applications.
  4. 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

Another PHP Related Post :

Reader Interactions

Comments

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

    Reply

      • 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

        Reply

        • 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.

          1
          2
          3
          4
          5
          6
          7
          8
          9
          10
          {
          $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>
          ' ;
          }

          Please i don’t understand. Thank you

          Reply

          • before loop, insert $html variable

            1
            2
            3
            4
            5
            6
            7
            8
            9
            10
            11
            $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>
            ' ;
            }

            hope fix your problem 🙂

          • 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.

          • 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

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

    Reply

  7. 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]

    Reply

    • 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

      1
      2
      3
      4
      5
      6
      $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.. 🙂

      Reply

      • 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.

        1
        2
        3
        4
        5
        6
        7
        8
        9
        10
        11
        12
        13
        14
        15
        16
        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);

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

        Reply

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

          Reply

          • 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

            1
            2
            3
            4
            5
            6
            7
            8
            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

  8. 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 🙂

    Reply

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

        1
        2
        3
        4
        5
        6
        7
        8
        9
        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"
        }

        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’]));

        Reply

  10. 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

  11. 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

  12. 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,

    Reply

  13. 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

  14. 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

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

    Reply

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

    Reply

    • 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

  18. 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

  19. 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

  21. 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

  22. 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

    • 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

  23. 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 ?

    Reply

    • 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 🙂

      1
      2
      3
      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');

      Reply

  24. 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

    Reply

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

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      <?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:)

      Reply

      • 1
        [{"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.

        Reply

        • Check your code in data.php below:

          1
          2
          3
          4
          5
          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++;
          }

          Reply

    • di javascript nya di di btnsavenya di ubah seperti berikut

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25
      26
      27
      28
      29
      30
      31
      32
      33
      34
      35
      36
      37
      38
      39
      40
      41
      42
      43
      44
      45
      46
      47
      48
      49
      50
      51
      52
      53
      54
      55
      56
      57
      58
      59
      60
      61
      62
      63
      $(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

      Reply

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

    Reply

    • 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

  28. 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

  29. 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

  33. 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

  35. 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

Leave a Reply

Your email address will not be published. Required fields are marked *

Time limit is exhausted. Please reload CAPTCHA.

This site uses Akismet to reduce spam. Learn how your comment data is processed.