Developing a Business Directory Using CodeIgniter and MySQL

CodeIgniter is a PHP MVC framework used to build web applications rapidly. It provides out-of-box libraries for connecting to databases such as MySQL, and performing various tasks such as sending emails, uploading files, and managing sessions. <!--more--> In this article, we will be using CodeIgniter and MySQL to build a simple business directory. Since CodeIgniter is an MVC framework, the model will be related to the database, view will be the HTML part seen on the web browser, and controller will be the logic that connects our models to the views.

Table of contents #

• Introduction
• Prerequisites
• Installation and setup
• Database setup
• Coding the application
• Routing
• Wrapping up

Prerequisites #

To follow through this article, you will need to have:

• CodeIgniter installed
• XAMPP installed
• Working knowledge of PHP and MySQL
• A web browser, we will be using Google Chrome

Installation and setup #

First, we will install XAMPP software in our development environment. The software package comes preinstalled with Apache, MySQL, and PHP.

You can decide to install them separately, but in our case, we will use XAMPP to provide an environment for developing PHP and MySQL applications.

We will also set up CodeIgniter. First visit their download page to get the latest version, then follow the installation instructions provided in their documentation.

We will unzip the folder and place it in our server's root directory, which in XAMPP is htdocs, and rename it to bizdir.

To verify that everything is working as expected, we will start up our Apache server, launch our web browser, and access the link http://localhost/bizdir.

Database setup #

We will create a database named bizdir by running the command below in the MySQL Console terminal:

create database bizdir;

Inside the database created, we will create a table by the name business_dir by executing the command below:

create table business_dir
(
   id int auto_increment primary key,
   biz_name varchar(255) not null,
   cat varchar(255) not null,
   addr varchar(255) not null,
   tel varchar(255),
   website varchar(255),
   email varchar(255)
);

Back to our project directory, go to application/config/database.php and edit the desired configuration for our database by setting the value in $db[‘default’] array. We will need to edit the database username, password, and name as shown below:

$db['default'] = array(
    'dsn' => '',
    'hostname' => 'localhost',
    'username' => 'root',       	// <-- your username
    'password' => '',               // <-- your password
    'database' => 'bizdir',         // <-- your database
    ...
    ...
    'save_queries' => TRUE
);

Coding the application #

As mentioned earlier, CodeIgniter is an MVC framework, meaning we have models, views, and controllers. In our case, models are database-related.

The view is the application's front end; the HTML part seen in the web browser. The controller is the logic that connects our models with views. The controller forms the business logic of the application.

Model #

We will first define our models. We create a file named Bizdir_model.php inside application/models and add the code below:

<?php
class Bizdir_model extends CI_Model {
    public function __construct()
    {
        $this->load->database();
    }
}

In the code snippet above, we have created a class named Bizdir_model, which inherits the properties of CI_Model class prebuilt in the CodeIgniter framework. The constructor loads the database using $this->db.

Next, we have to insert and retrieve data into our database. We will achieve this by adding a method get_bizdir() to retrieve data as shown below:

public function get_bizdir()
    {
        $query = $this->db->get('business_dir');
        return $query->result_array();
    }

Inside the function get_bizdir, we are fetching all the data stored inside our directory table. The function does the same purpose as the query SELECT * FROM business_dir;.

We will insert dummy data into our table via PHPMyAdmin or even MySQL console window by running the command below:

INSERT INTO `business_dir` (`id`, `biz_name`, `cat`, `addr`, `tel`, `website`, `email`) VALUES
(1, 'VILLA ROSA KEMPINSKI', 'Hotels', 'Waiyaki Way, Nairobi', '+254 703 049 000', 'https://www.kempinski.com/en/nairobi/hotel-villa-rosa/', 'info@kempinski.com'),
(2, 'COOPERATIVE BANK OF KENYA', 'Financial Institution', 'Moi Avenue, Nairobi', '+254 701 255 265', 'https://www.coop-net.com', 'info@coop-net.com'),
(3, 'CHESTER HOTEL', 'Hotels', 'Kariba, Nakuru', '+254 705 442 636', 'https://www.chester.co.ke', 'info@chester.co.ke'),
(4, 'JAJOS FAST FOODS', 'Cafe', 'Freehold, Nakuru', '+254 708 699 536', 'https://www.jajos.co.ke', 'info@jajos.co.ke'),
(5, 'THIKA MOTOR HUB', 'Car Bazaar', 'Kenyatta Avenue, Thika', '+254 721 639 856', 'https://www.thika-hub.com', 'admin@thika-hub.com');

Controller #

Next, we will create a controller that fetches the data from the model and passes it to our view. We will create a file named Bizdir.php inside the application/controllers directory and add the code below:

<?PHP
class Bizdir extends CI_Controller {

   public function __construct()
   {
      parent::__construct();
      $this->load->model('bizdir_model');
   }

   public function index()
   {
      $data['directories'] = $this->bizdir_model->get_bizdir();
      $data['title'] = 'Business Directory';

      $this->load->view('templates/header', $data);
      $this->load->view('bizdir/index', $data);
      $this->load->view('templates/footer');
   }

   public function any()
   {
      $data['title'] = 'Business Directory: Any Page';
      $this->load->view('bizdir/any', $data);
   }
}

The Bizdir class inherits the CI_Controller class. Inside the constructor, we call CI_Controller; our parent class. Then next line loads the model by making it accessible using $this->load->model('bizdir_model');.

We fetched all the data in the index method and stored it in $data['directories']. Then, another key named title is added to the variable $data, and in the rest of the code, we pass the variable and render the views.

The key $data will be accessible to our views like $title and $directories. The any() method redirects any other URL that is not matched.

View #

Next, we will create the views for our application. First create a new directory called templates inside the application/views folder, then create two files, header.php and footer.php, inside the templates folder.

The application/views/templates/header.php file will appear as shown below:

<html>
<head>
   <title><?php echo $title; ?>: This is a business directory</title>
</head>
<body>
<h1 style="text-align: center"><?php echo $title; ?></h1>

And the application/views/templates/footer.php file will have the code below:

<p style="text-align: center; margin-top: 15px">&copy; 2021 Business Directory. All rights reserved.</p>
</body>
</html>

Then we can proceed to create a new directory named bizdir and write the code below in the file index.php located inside application/views/bizdir/index.php:

<table>
<style>
table {
  border-collapse: collapse;
  width: 100%;
  font-family: arial, sans-serif;
}
td, th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}
tr:nth-child(even) {
  background-color: #dddddd;
}
</style>
   <thead>
   <tr>
      <th>Business Name</th>
      <th>Category</th>
      <th>Address</th>
      <th>Phone</th>
      <th>Website</th>
      <th>Email</th>
   </tr>
   </thead>
   <tbody>
   <?php foreach ($directories as $dir): ?>
      <tr>
         <td><?php echo $dir['biz_name']; ?></td>
         <td><?php echo $dir['cat']; ?></td>
         <td><?php echo $dir['addr']; ?></td>
         <td><?php echo $dir['tel']; ?></td>
         <td><?php echo $dir['website']; ?></td>
         <td><?php echo $dir['email']; ?></td>
      </tr>
   <?php endforeach; ?>
   </tbody>
</table>

In the header section, we are displaying the title that we defined in the controller. Inside the index.php file, we have created a loop that iterates through the list of businesses stored in our database.

A new <tr> is created on each loop, and all values are displayed inside <td>.

We will create any.php file inside application/views/bizdir and add the code below:

<div style="text-align: center; margin-top: 50px; padding-top: 50px;">
   <h2>Error</h2>
   <p>Click <a href="">here</a> to go to home page</p>
</div>

Routing #

We are now done setting up our MVC, next step is to create the routes to the specific views. We start by opening the application/config/router.php file and edding the code below:

$route['dir'] = 'bizdir';
$route['dir/(:any)'] = 'bizdir/any';
$route['default_controller'] = 'welcome';

In the code snippet above, the key $route appears in the browser URL. Then the value on the right points the method from the controller that will be called.

If only the controller's name is given, such as bizdir in our case, it will call the index() method. Also, if the URL contains anything after dir/, it will call the any() method.

Now we can visit http://localhost/bizdir/index.php/dir to verify if everything works as expected.

The results will be as shown below:

As you can seen, data is fetched from the database and rendered on the browser.

Conclusion #

Much functionality can be added and implemented in the application. However, that goes beyond the purpose of this tutorial.

The primary goal of this tutorial was to show you how to get started with CodeIgniter.

The code snippets used in this tutorial can be found at this GitHub Repository.

---

Peer Review Contributions by: Jerim Kaura