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
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
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:
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:
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 configuration123$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
- $db->prepare
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
- 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
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
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 element
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">×</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:
Add the Javascript code before
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.
- 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
- 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
Hi! Your link has been disable by google url shortener. Please fix. Tolong perbaiki link nya ๐
Cheers
terimakasih atas infonya.. download link sudah saya perbaiki. saya tidak mengerti mengapa google mendisable google short saya.
silahkan download..terimakasih
Thank you so much, You are great!
can i download the source of this project? the tutorial is so awesome. thanks for the share.
Yes you can. You can download the full source after share that content. ๐
I shared but does not appear unlocked
Those others do not get into trouble, please try it again, or enabled your cookies
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
seegatesite.com
thanks
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.
Please i don’t understand. Thank you
before loop, insert $html variable
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
Yes, you’re welcome ๐
thanks for the tutorial. the download has password… i am referring to the crud.zip
In the bottom of article, there are social media icon that must be shared, after you sharing to other, your download password will appear ๐
I have downloaded the file, but it is asking for a password… Can you please be kind enough to give the password?
awesome…thanks
Terima Kasih atas tutorialnya, tapi kok ada error muncul ya “DataTables warning: table id=table_cust – Invalid JASON response”. ini error kenapa ya?
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 ๐
Terima Kasih banyak om, dengan sedikit modifikasi sudah bisa teratasi ๐
bagaimana?
bagaimana gmn mas ? ๐
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]
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
Semoga membantu, atau kalo boleh saya lihat script anda.. ๐
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.
Akhirnya saya akalin convert date nya di query sql nya pakai field dateFromCon
Tetapi saya masih ragu dengan menggunakan convcert di query untuk kedepannya, apakah sudah benar convert di query apa ada cara lain? Terima kasih sebelumnya
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
Di query anda menggunakan nama dateFromCon bukan dateFrom
CMIIW, semoga membantu
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 ๐
hello mas angga,
bisa coba di cek dulu var_dump($key[โdateFromConโ]) ? hasilnya apa ๐
var_dump($key[โdateFromConโ]) => string(10) “08/08/2016” (field dateFromCon sudah saya convert dahulu di query nya)
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’]));
dear mas angga,
gmn kalo dicoba date(โd/m/Yโ,strtotime($key[โdateFromโ][‘date’])); ? karena hasil dari dateFrom anda berupa object.
Semoga membantu ๐
how to download the source program
thanks
share content locked form with your social media account (twitter or fb or g+) ๐
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!
are you use xampp that support php7 ? mysql_connect() doesnt support on PHP7. CMIIW ๐
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!
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 ๐
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,
I usually use the $_SESSION to do this.
#OPTION 1
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/
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 !
error when you use -> ‘, read here http://stackoverflow.com/questions/19176024/how-to-escape-special-characters-in-building-a-json-string
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.
Thank you for downloading,
I’m not sure there are no errors. maybe you can send the file back on me?
Tq Mas Sigit… Barokah ilmunya njenengan… Sehat Selalu buat mas Brow dan pasti lancar rejekinya.. Aamiin.
Salam Kenal, Ony.
terimakasih mas Ony. ๐
Hello la connection mysql n’est plus ร jour.
Pouvez vous refaire une connection avec mysqli?
Thank you
S’il vous plaรฎt lire le tutoriel Tutorial PHP Class For Simple CRUD with PDO For Beginners
Hi why when i create a new customer or edit one customer after click Save button the form does not closes automatically
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 ๐
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
Please read the article from beginning again.. i wrote the password in article
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”:[]}
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
The 2 buttons, edit and delete are appearing one below other. What could be the issue? Is it that I missed a css?
Can you send the screenshot ?
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.
Sorry I never used the JSF, but I will try on the other occasion ๐
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! ๐
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
Terima kasih, mas. Kalau tutorialnya sudah ada, tolong diinformasikan mas. Hehe ๐
Mas, mohon bantuannya. Saya coba edit dengan menambahkan beberapa input, tapi ada error (invalid order). Kira” apa yang harus diperhatikan?
coba di salin sini kodenya mas ๐
Mohon bantuannya soal fitur notifikasi yang saya pernah request mas :’D . Soalnya tinggal satu fitur itu aja yang saya butuhin. Stuck banget.
mungkin 2-3 hari lagi baru bisa coba untuk bikin mas… kebetulan saya sedang ada project diluar kota, jadi blom bisa bikin artikel ๐
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 ?
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. 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
Silahkan buka file data.php dan ubah dengan kode berikut :
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:)
Sudah saya kirim email mas ๐
Email kmn ya? Ke sgt86slo@yahoo.com saja
Sudah mas ๐
okay sudah saya balas email anda ๐
Output from de debugger. I see that there is an error in the buttons but I don’t know how to solve this.
Check your code in data.php below:
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
nama field databasenya saya salah ๐
Mas, bagaimana caranya saat menambah item baru, waktu menekan tombol save, modalnya hilang.
di javascript nya di di btnsavenya di ubah seperti berikut
ada penambahan
$("#modalcust").modal("hide");
Semoga membantu
Mas untuk fungsi edit, muncul notifikasi sukses, tapi data di db tidak terupdate. Mohon pencerahannya mas. ๐
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 ) ๐
pake php 7 error di baris mysqli_error(), untuk solusinya bagaimana?
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
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
coba di F12, lihat bagian console..lihat apa errornya ๐
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
can you explain to me more detail ?
sory i dont understand ๐
Link code full nya mna gan?
sudah ada diatas gan ๐
This example code is vulnerable to SQL Injections! Please use PDO or at least MySQLi.
read more here
https://seegatesite.com/tutorial-php-class-for-simple-crud-with-pdo-for-beginners/
izin download gan..mau coba dulu
NIce,effort , I downloaded the file , i want to extract it ,Its asking starter password, can u tell me the password of the file.
If you read my article to finish, you will get the password ๐
pass : seegatesite.com
I share the article to tweet, but the download link did not show up.
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
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
habis di klik +new customer coba di inspect element/f12 trus pilih tab console…dilihat apakah ada error?
semoga membantu
Errornya bnyak sekali mas sigit ..hehe
1. Could not be loaded 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
mungkin bisa di copykan kesini, biar dapat saya bantu ๐
izin pak
Hi!!! download link pls!!!
please check the link in the bottom of article