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

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.

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.

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/).

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

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.

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.

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,

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 !

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.

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.

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