Blog for Learning

| lesson material | material summary | questions and answers | definitions | types and examples | other information | materi pelajaran | ringkasan materi | pertanyaan dan jawaban | definisi | jenis-jenis dan contoh-contoh | informasi lainnya |

Powered by Blogger.


Tutorial Codeigniter # 3: How to Use Bootstrap on Codeigniter

Codeiginter Bootstrap
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
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:
This is the address that we can access from localhost.
When the web has finished, then change the address to the domain address.
How to set the Base URL, please open the file config/config.phpThen fill in the section$config['base_url'] = ''; like this:
Base URL configuration

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:
Add a URL helper

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:
Add a URL helper

2. Download and extract SB Admin

Please download SB Admin from the website .
Download SB Admin
After that, we will get a ZIP file. Extract the file so we have an admin SB file like this:
Admin SB files
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.
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.
Copy the template folder to the CI project
After that, we can start creating templates for admin views.

Please continue ...

0 Komentar untuk "Tutorial Codeigniter # 3: How to Use Bootstrap on Codeigniter"

Silahkan berkomentar sesuai artikel

Template By Kunci Dunia
Back To Top