Simple Code Ignitor 4 CRUD System with Bootstrap 4 Pagination

Hello guys, it’s me again, writing this for new topic for you guys. Code Ignitor 4 or CI4, a PHP Framework following the Model-View-Controller Design Pattern. It is a loosely typed MVC framework. For this, you need to visit a few websites and perform a few changes with your PHP framework and download content. First of all, you will need a local Apache server from a program like XAMPP/WAMP/MAMP. You can download it from Apache Friends. After this you need to install it literally like any other program.

Once you have installed it, what you need to test is if your Apache server is running. For that, you need to launch the server by clicking on Start written next to Apache

Installation and setting up environment:

One it is ready, what you need to do is enable Internationalization in your Configuration of your Apache server. For this reason, click on Config beside Admin in the row adjacent to Apache as shown below:

Open the php.ini file and press Ctrl + F and search for intl, once found, just remove the “; ” which is written before extension=intl, once done your file will be looking like this:

Once done. you are clear to move to next part, go to Get Composer website. Download and install it like any other program.

Note: Do not forget to Add PHP to PATH when installing Composer.

After this step, restart your system because system environment variables have been changed. After this, press Win + R and write command like php –version and press Enter

If the command returns you the version of PHP you installed, PHP has been added to your path. Boo yeah, just another small test to check for a proper installation of Composer. Write another command in your command prompt like composer and press Enter.

If it gives you something like this, lets get into the good work. Now we have to create a project. For this, you need to write a command like composer create-project codeigniter/appstarter crud. Wait for all the files to downloads to complete. Now you will have to write a command like “php spark serve” and press Enter. This command will initiate a server on an empty port like localhost:8080, this might be different for you and others. Anyways, we have now set up the environment and we will see a folder named crud in your htdocs folder. Voila, let’s start coding, the fun part.

Note, you will also have to start MySQL port from XAMPP or any other server.

Open the folder crud with VS Code or Sublime Text 3 or any of your default editor.

Database Configuration:

Step 1:

Navigate to app/Config and view the first group with array consisting of 'DBdriver'=>'MySQLi', set the hostname to 'localhost' , username to 'root' and database to 'ci'.

In your browser, navigate to localhost:80/phpmyadmin/index.php and create a new database named ci as shown below.

Program Logic:

Step 2:

After this, you will have to start working with the MVC workflow of Codeigniter 4 framework. Navigate to your /app/Controller/ and create a file with name Crud.php. This will serve as the command logic for your Crud application. Also, to add a table and scheme to your database, you will need to import a file into your phpmyadmin by navigating to your database ci>Import and create upload a file named ci.sql.

Now modify your Crud.php in your directory as shown below:

Step 3:

Here, the index method will be used to call data in our view named crud_view.php which we will create in our /app/Views folder. This method will be used to fetch data to be shown in the table. Also in our /app/Models/ create a file named CrudModel.php, this model will be used in our Crud.php file to provide the business logic to our code. Every other function in our application is self explanatory so it will be explaining itself to you.

Here most of our work is basically is complete, now we completing our views for the models to be implemented. Create 3 files named add_data.php, crud_view.php and edit_data.php. These are the views which the controller will show the result for us.

Step 4:

For crud_view.php with the following code:

Step 5:

For add_data.php with the following code:

Step 6:

For edit_data.php with the following code:

Voila, we are done with the php here, just go to the bowser and if you havent, just write php spark serve in your cmdlet. Just add /crud to your folder to your URL. Easy peasy, your application is working like a charm.

If you have any queries, leave them in the comment. If you want the complete source code for this project, visit my Github profile and ci-crud repository. You are free to use this code at your own discretion. Do not forget to leave a star on my repo. Happy Coding! 😉

Leave a Reply

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