Tutorial Codeigniter # 3: How to Use Bootstrap on Codeigniter

Bootstrap is a CSS framework that is popular in web development. Even Petanikode templates are also made with Bootstrap.

In this tutorial, we will not discuss bootstrap in detail. Because I've made a bootstrap tutorial in a different article.

If you don't understand bootstrap ...

... calm down, just follow this tutorial while studying.

Later you will understand yourself, hehehe.

Continue ...

The plan is for the application that we will create, we will use the SB Admin template .

Why SB Admin?

Because it's simple, creative, using Bootstrap 4 , and easy to implement on CodeIgniter.

Display SB Admin Template

Steps that must be done to use bootstrap (SB Admin template) on Codeigniter:

1. Codeigniter configuration;
2. Download SB Admin;
3. SB Admin Extract;
4. Copy the file assets needed;
5. Making Templates;
6. Make a partial template;
7. Use partial on the template;
8. Finish ...

It sounds easy, but in practice, we will get many obstacles and problems.

Therefore, make sure you follow this tutorial carefully. 

1. Initial Codeigniter Configuration

Before starting to create a template, please configure it first ...

Base URL configuration

Base URL serves to determine the address or URL that will be used by the web.

When developing the web, we will use the following Base URL:

http://localhost/tokobuah

This is the address that we can access from localhost.

When the web has finished, then change the address to the domain address.

Example:

https://www.petanikode.com

How to set the Base URL, please open the file config/config.php. Then fill in the section$config['base_url'] = ''; like this:

Configure Autoload

Next we have to load a helper into memory automatically throughautoload.php .

Helper is a Codeigniter function that will help us in various ways, such as: creating forms, accessing URLs, etc.

One of the helper we need in making templates is a helperurl .

Helper urlcontains functions for accessing a URL such as base_url(), site_url(),$this->uri , etc.

How to activate the helper url:

First open the file config/autoload.php, then search $autoload['helper']. Add url, so that it looks like this:

Making Constants

After that, create a constant SITE_NAMEto save the web name. We will need this constant to retrieve the web title in the template.

If you don't understand about constants in PHP, please read:What are Constants?

Continue ...

Please open the file config/constants.php, then add the following code ...

/*
|--------------------------------------------------------------------------
| Constants for Site
|--------------------------------------------------------------------------
|
*/

define('SITE_NAME', 'Tokobuah');

... at the end:

2. Download and extract SB Admin

Please download SB Admin from the website .

After that, we will get a ZIP file. Extract the file so we have an admin SB file like this:

This is the template file that we will use on the Codeigniter project.

3. Adding the SB Admin in Codeigniter

Our next task is to add the SB Admin file to the Codeigniter project.

How:

We just need to copy / paste the files and folders needed. Here is the folder that we must copy :

1. Folder  css
2. Folder  js
3. The  vendor–rename folder becomes–> assets

For folders  vendor, we will rename it  assets in order to not interfere with the folder vendorof the composer .

Folders  vendorcontain front-end libraries from third parties, such as: Bootstrap, awesome fonts for icons , chart.js, datatables, and jquery.

We  sasscan also copy folders if we want to modify and use sass on the project.

However, because we will only use it. We just copy the three folders.

After that, we can start creating templates for admin views.

Please continue ...

Sumber: https://www.petanikode.com/codeigniter-bootstrap/