Домой / HELP / Codeigniter / CRUD Without Reload Page Using Ajax and Codeigniter

CRUD Without Reload Page Using Ajax and Codeigniter

Даже не буду переводить. В двух словах — CRUD без перегрузки страниц в Codeigniter используя Ajax.

I think you’ll agree if I say this:

“It is very difficult to create CRUD (Create Read Update Delete) application without reload page using Codeigniter and AJAX.”

Good News:

Well, It turns out, you can easily create CRUD application without reload page using Codeigniter and AJAX Jquery,

Right Now.!

This is the way I used a few months ago for my own project.

Today, in this tutorial, I will explain to you clearly how to make CRUD application without reload page using Codeigniter and Ajax Jquery.

STEP-BY-STEP!

What is AJAX?

AJAX (Asynchronous Javascript And XML) is a method or technique of web-based programming to create interactive web application.

With Ajax, Web applications can send and retrieve data from a server asynchronously (in the background) without interfering with the display and behavior of the existing page.

Pretty cool right?

In this tutorial, I use BOOTSTRAP modals to create input and update form.

BOOTSTRAP modals helps us make it easier to create CRUD(Create Read Update Delete) applications in just one page.

Awesome right?

Before bootstrap coming up, to make a CRUD application requires several pages.

There are page to display data from database, create form page, and edit form page.

OK, Let’s get start it!

Step 1. Preparation

This is important!

If you missed this step, it means you missed the whole of this tutorial.

Good preparation will determine your success following this tutorial. The better your preparation, the more likely you will succeed in following this tutorial.

Do not skip this step, though it feels complex.

So, what do you need to prepare?

Here’s the list:

1. Codeigniter

Codeigniter is the main php framework we will use in this tutorial. If you do not have it yet, please download it at the official website:

www.codeigniter.com

2. Bootstrap

Bootstrap is a framework to beautify the user interface (UI). If you do not have it yet, please download it first at the official website:

www.getbootstrap.com 

3. Jquery

This is important!

Jquery is a javascript framework that works to help simplify the writing of AJAX-based scripts.

If you do not have it yet, please download it first at the official website:

www.jquery.com

4. Datatables

Datatables is a plugin built from jquery to display data in table form and has integrated with filters, show per page, and pagination.

To download datatables please download at following link: https://datatables.net/download/index.

Ok, Let’s continue!

Step 2. Creating of database structures

In this tutorial, I use mysql as Database Management System (DBMS).

If you also use mysql, you will love this tutorial.

But,

If you are using other DBMS like Oracle, SQL Server, Maria DB, or MongoDB.

No, Problem!

Provided you understand SQL (Structured Query Language) better.

Ok, Let’s continue!

Please create a database, here I create a database with name db_crud.

If you create a database with the same name it will be better.

Please execute this query to create the database:

That query will generate a database with name db_crud.

After that,

Create a table with name product:

To create a table with structure like that, Please execute this query:

Step 3. Setup Codeigniter

Extract codeigniter that has been downloaded earlier to www folder (if you use wampserver) or htdocs (if you use XAMPP).

Because I use wampserver. So, I extract it to c:/wamp/www/

And then, rename codeigniter project to be crud_ajax.

Open crud_ajax folder and create assets folder. And then include the bootstrap, datatables, and jquery files inside the assets folder.

Step 4. Configuration Codeigniter

Next step is the configuration on the codeigniter.

Here are some files you need to configure:

1. Autoload.php

To configure the autoload.php, please open the folder:

application/config/autoload.php

 

Open autoload.php using text editor like Notepad++

And then find this code:

Set to be like this:

2. Config.php

To configure the config.php, please open the folder:

application/config/config.php

Open config.php file using text editor, and then find this code:

Set to be like this:

3. Database.php

To configure the database.php, please open the folder:

application/config/database.php

Open database.php file using text editor, and then find this code:

Set to be like this:

Step 5. Controller

Go ahead and create a controller file controllers/Product.php with the following this code:

Step 6. Model

Go ahead and create a model file models/Product_model.php with the following this code:

Step 7. View

Go ahead and create a view file views/product_view.php with the following this code:

Now, go ahead and access our custom page at http://localhost/crud_ajax/index.php/product and you will see the final result.

So, that’s it, We’ve done it!

Please click add new button to add new product, click edit button to update record, and click delete button to delete record.

Congratulations!

You did it. Now, you can create a crud application without reloading the page with codeigniter and ajax.

If you feel this tutorial is useful for you. Please share! Perhaps, this tutorial is useful also for your friend!

Thank you very much.

Про Александр

Здравствуйте, меня зовут Александр Мороз. Профессионально занимаюсь созданием сайтов . Выражаюсь на диалектах PHP, SQL, JavaScript, HTML, CSS, XML, jQuery. Иногда и матом в особо сложных случаях :)

Проверьте также

Как с помощью CSS прижать footer к низу окна браузера

Задача прижать footer к низу окна браузера – это одна из самых часто встречаемых задач …

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *