Build your First Application with CodeIgniter 3 & Install Bootstrap

Rhed AliganRhed Aligan
5 min read

Hi, my name is Rhed N. Aligan, aspiring Junior Developer of PHP. To get start this documentation. Please be ready your devices. MUST BE KNOWLEDGEABLE IN PHP BEFORE TAKING CODEIGNITER OR ANY PHP FRAMEWORK

My current device specifications are:

Ryzen 5700G
16GB RAM (1 stick RAM)
Monitor 100Hz
500GB SSD (STORAGE)
(If your devices above this tools, much better)

SOFTWARE TOOLS REQUIREMENTS:

Visual Studio Code (or any IDE can be able to run CodeIgniter 3 and, but most recommend is Visual Studio Code)

Node JS v18.20.3

XAMMP Control Panel v.3.3.0

PHP VERSION: 7.4.xxx (Recommended for CodeIgniter 3)

Browser

DOCUMENTATION

Download first the CodeIgniter 3 (You can search it on the internet)

Figure 1: Search CodeIgniter 3 download and you can see this

Figure 2: Go to the Installation Instructions

Figure 3 (Go to the latest version of CodeIgniter 3 which is v3.1.13)

It will download a ZIP file. Extract it. Once you download (You can rename it base on your project, recommended put the signage of 3.1.13 version in the name). You can put it in XAMMP if you use it in your localhost.

Go to local disk, find xammp, inside, find htdocs, put your CodeIgniter 3 you extract.

Now open it in your IDE (for this documentation, I use Visual Studio Code)

Figure 4: Visual Studio Code

This looks a new CodeIgniter 3 project.

Now to view in your browser follow this:

Go to Application→Config(Folder)→config.php

Inside of config.php, find the line ($config['base_url'] = '';)

$config['base_url'] = ' http://localhost/CodeIgniter-3.1.13_Bootstrap/'; 

// http://localhost/CodeIgniter-3.1.13_Bootstrap/

This line provides the URL of localhost to view put your project (Folder name) inside of localhost. For this Project we name it as CodeIgniter-3.1.13_Bootstrap. should be the input of base URL is http://localhost/CodeIgniter-3.1.13_Bootstrap/ .

For the mean time, we focus how to have bootstrap in our project CodeIgniter.

First best practices make a folder in a view under application or follow this guideline for folder and files creation. We need create a folder named “components” (For organized files purpose), and inside this create a files name header.php and footer.php

Application→views→components (this is we create) → header and footer files.

Create inside the header for this: (Header.php)

<?php 
    defined('BASEPATH') OR exit('No direct script access allowed')
?> //This is security guard for every file to not visible when they access 
   //it through URL


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HEADER</title>
</head>
<body>

//It should be a seperate so don't worry about the end tags of which is 
// </body>, </html>

Create inside the footer for this: (footer.php)

<?php 
    defined('BASEPATH') OR exit('No direct script access allowed')
?> //This is security guard for every file to not visible when they access 
   //it through URL


</body>
</html>

As you imagine it like a puzzle file and need to integrate each other. This is the best practices to make reusable the files in our CodeIgniter 3 Project.

Figure 5: Create a Home.php under the view folder

After you do this create for the BODY files to make it as a whole but this time not under in the file “components”. Only under the views. or see below the guide image. We name the file as Home.php.

BOOTSTRAP SET UP

Step 1: Open your CMD within the Project (The name of the folder project is CodeIgniter-3.1.13_Bootstrap in my own) or you can do in your terminal (CMD) this

cd path\to\your\ci3\project (your path in xammp)

Step 2: Follow this below:

CMD

npm init -y

npm install bootstrap jquery 

mkdir assets
mkdir assets\css
mkdir assets\js //mkdir stand for make directory

copy node_modules\bootstrap\dist\css\bootstrap.min.css assets\css\
copy node_modules\bootstrap\dist\js\bootstrap.bundle.min.js assets\js\
copy node_modules\jquery\dist\jquery.min.js assets\js\ //will copy the specific modules inside of  node_modules

After you command this line each by each. you can now put this link in your header and footer files.


//PUT THIS IN HEADER
<link rel="stylesheet" href="<?= base_url('assets/css/bootstrap.min.css'); ?>">

//PUT THIS IN FOOTER
<script src="<?= base_url('assets/js/jquery.min.js'); ?>"></script>
<script src="<?= base_url('assets/js/bootstrap.bundle.min.js'); ?>"></script>

Figure 6: LOOKS LIKE COMMAND ABOVE IN TERMINAL

Figure 6.1: LOOKS LIKE COMMAND ABOVE IN TERMINAL

Now before the end, it’s time to integrate each in a Controller (Under application folder), create a file name ALFAM.php (Controller name). and put this

<?php defined('BASEPATH')or exit('No direct script access allowed');



class ALFAM extends CI_Controller {

        public function __construct()
        {
            parent::__construct();

        }

        public function Home () {

            $this->load->view('components/header');
            $this->load->view('Home');
            $this->load->view('components/Footer');

        }
    } //This show integrate each to use the links in header and footer our 
      //Home files (under views).

📣 REMEMBER TO NOTICE: MAKE SURE YOUR ROUTES (Application→Config→routes.php) is configure and set based on your Controller name.

<?php
defined('BASEPATH') OR exit('No direct script access allowed');


$route['default_controller'] = 'ALFAM/Home'; //ALFAM Controller and Home is the name of the method inside controller name ALFAM.
$route['404_override'] = '';
$route['translate_uri_dashes'] = FALSE;

One you already configure this. Finally, you can able to use the bootstrap function.

For the illustration put this code as an example in Home.php



<div class="d-flex justify-content-center align-items-center" style="min-height: 100vh;">
    <div class="container" style="max-width: 400px; width:100%;">
    <form action="" method="post">
<h1 class="text-center">Login Form</h1>
        <div>
            <label for="username">Username</label>
            <input type="text" name="username" class="form-control">
        </div>
        <div>
            <label for="password">Password</label>
            <input type="password" name="password" class="form-control">
        </div>

        <div class="text-center p-4">
            <button type="Submit" class="btn btn-primary btn-lg">Login</button>
        </div>
    </form>
</div>
    </div>

Figure 7: OUTPUT (EXAMPLE A LOGIN FORM)

Figure 8: Create an .htaccess for security in files

Advance security put .htaccess file in the Application level (You are the one create that file manually).

PUT THIS CODE FOR TO PREVENT ACCESS YOUR SENSITIVE AND CONFIDENTIAL FILES INSIDE YOUR PROJECT.

<IfModule mod_rewrite.c>

    RewriteEngine On
    RewriteBase /CodeIgniter-3.1.13_Bootstrap/

    <FilesMatch "^\."> // this line show all files with .(dot) are hidden such as .gitignore, .htaccess.editorconfig, etc.. inside your project

        Order Allow,Deny
        Deny from all

    </FilesMatch>

    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d

    RewriteRule ^(.*)$ index.php/$1 [L]

</IfModule>

Thank you for taking the time to read through this documentation. If you'd like to follow my work on GitHub, it would be my pleasure!

RhedDev1 (Rhed)

RhedDev1 (Rhed)

💜💜💜💜💜💜💜💜💜💜💜💜💜💜💜💜💜💜💜💜💜💜💜💜💜💜💜💜💜💜

10
Subscribe to my newsletter

Read articles from Rhed Aligan directly inside your inbox. Subscribe to the newsletter, and don't miss out.

#SetupCodeIgniter#CI3#CodeIgniterWithBootstrap#SetupwithCodeIgniter#BuildApplicationWithCodeIgniter#CI3Setupcodeigniter3php frameworksPHPphpframework codeigniterBootstrap

Written by

Rhed Aligan
Rhed Aligan

Curious about things matter.