If you are a beginner and just thinking sbout creating a simple web application using CodeIgniter 3, then this topic is right for you. This topic is about how to display data from MySQL database in a web page using CodeIgniter 3.
In this topic, we will show how you can create a simple web application in CodeIgniter 3. All we will be doing is just select all the products from a database table and display them in a html table. If you have done this in core PHP, then you can very easily code this in CodeIgniter 3. You will learn about CodeIgniter basics.
You have to create a Model to select all products from the database, create a Controller function that will get details from the database and send them to a view, and then, create a view to display the products.
Below is a screenshot of the page in which products are displayed.
Step 1 - Create a MySQL table to store product details
Let us create the table named 'product' in MySQL database. Table structures is given below:
This table stores details of all products, such as product id, product name, price etc.
Below are the columns in this table.
- product_id - It is the primary key and auto incremented id of the product
- product_name - Name of the product
- price - Price of the product
- stock - Stock available for the product
Create table script and insert statements for this table are given below; you can use this code to create the table and populate data in it.
After you create the table, verify if table structure is same as above. Also make sure all rows are populated. I have just inserted few rows in the table for displaying purpose. We are not going to update any data in this table. Below are the rows in this table:
Step 2 - Write Model code (ModelProduct.php)
We will simply select all rows from product table. So, our model will be very simple with a method to select data from product table and return the result set. Below is the model code, keep
ModelProduct.php in application/models folder.
You can see it just selects all rows from product table with an order by clause using product_id. It returns the result set to the controller.
Step 3 - Write Controller code (ProductController.php)
Our controller method will simply call the
get_products() method of the model. Controller will get product data and load the view with this data. Let's see the code.
index() method I am just calling the
get_products() method of the model.
Step 4 - Write View (product.php)
In the view I will define a html table and use the data sent by the controller to display them as table rows using a foreach loop.
You can see I have a html table and I am displaying data in it using a
foreach loop on
$product_data which was sent by the controller.
Let me give you the stylesheet also below:
I just added few simple styles here, you can always add more and better styles.
Step 5 - Update CodeIgniter configuration files and Test the Application
Let us now update few setup files before we run the application. Before that, let me show you the folder structure I am using. I have created a folder named 'stock' under xampp/htdocs and kept all project files in this folder. So, the root directory is xampp/htdocs/stock.
style.css which is kept in assets/css folder. Just make sure you give correct path for css file in the view. For our case it is added in the view
product.php as below:
We will update below files in config folder and also, we will have
.htaccess file in the root directory. See below:
I have added 'database' in autoload libraries.
You can add it here if you need database most of the time, otherwise manually you can load database in the controller class in constructor using
$this->load->database() for database access.
- Update config file (application/config/config.php)
Set 'base_url' and 'index_page' as below in this file:
- Update database setup file (application/config/database.php)
As I mentioned before, I am using a database named 'demo' in localhost with user 'root' with no password, so I updated
database.php as below:
- Update routes file (application/config/routes.php)
routes.php for default controller which is ProductController. So below code is in
Here I only updated default_controller as product, rest all in the file remain same.
.htaccess (hypertext access) file to remove
index.php from the URL
.htaccess file is used to do configuration changes for a directory. I have kept
.htaccess file in the root folder which is xampp/htdocs/stock.
.htaccess file is given below:
Using URL rewriting rule, it redirects all request except those which are not existing files or directories.
Test The Application
Make sure in your XAMPP control panel Apache web server and MySQL services are running. Open the browser and run localhost/stock. You will see the home page as displayed below:
You will see the list of products displayed in a html table. Check with database table 'product' if all products are displayed.
That's it! Our development and testing are done. Hope you could understand all the steps and could test it successfully.
I have put codes for controller, model and view in a zip file. You can download it by clicking on the Download button below. You do not need to register yourself to download it. You can use the code as is or you can modify them as per your requirements.
This was an example of a simple CodeIgniter application using MySQL database. Those who are new to CodeIgniter, can use this as starting point to use a database in CodeIgniter. Hope it was useful for you.