Skip to main content

Merge Bootstrap to your current codeIgniter project in PhpStorm on ubuntu 16.04

I will be leading you how to merge bootstrap into your codeIgniter project. There are two ways that you can bootstrap in your project.

Method 1 - Load bootstrap online 

In this method you have to give links of following libraries inside the head tag in view pages.
//css
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
//jquery
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
//javascript
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Method 2 - Download and load bootstrap 

You can download Bootstrap and merge it with your project.
Step 1 : Download Lastest Bootstrap and Jquery into your computer.
Step 2 : Create a folder called asserts in your codeIgniter project folder.
Step 3 : Extract it and copy css, fonts, js folders to assets folder.
Step 4 : Copy jquery.js file to assets folder.
Then there are two ways that you can call these libraries

Method 1 - Import in head tag every view file.
<link rel="stylesheet" href="/assets/css/bootstrap.css" />
<link rel="stylesheet" href="/assets/css/custom.css" />
<link href="/assets/css/bootstrap.min.css" rel="stylesheet">
We have to import js files for jquery and bootstrap just before the </body> tag 
<footer>
<script type="text/javascript" src="/assets/js/jquery-3.1.1.js"></script> 
<script type="text/javascript" src="/assets/js/bootstrap.js"></script> 
</footer>
Method 2 - Create a template to load bootstrap.
Create a folder in views called template and inside that create php files called header.php and footer.php and page.php. In the header.php you can put common contain from <html> to <body> tag for whole project. You can send title which is stored in the head title tag, as a variable. The header.php will be as follows
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="/assets/css/bootstrap.css" />
<link rel="stylesheet" href="/assets/css/custom.css" />
<link href="/assets/css/bootstrap.min.css" rel="stylesheet">
<title><?php echo $title?></title>
</head>
<body>
Then in the footer.php we can put from </body> to </html>. It is as follows.
<script type="text/javascript" src="/assets/js/jquery-3.1.1.js">
</script>
<script type="text/javascript" src="/assets/js/bootstrap.js">
</script>
</body>
 </html>
Those script tags are the js files of jQuery and bootstrap. Since those code segments are common for the whole project, you can put before </body>

Then you can combine header and footer inside page.php with the requested view file as follows.
<?php $this->load->view('template/header'); ?> 
<?php $this->load->view($template);?> 
<?php $this->load->view('template/footer'); ?>
First this will load the header.php that you have already created. Then the requested header file will be loaded. $template is the requested view file, which will be called by the controller. As an example let’s see how we called the login page till now
$this->load->view('login');
You can replace this with
$data['template'] = 'login';
$data['title']='User Login';
$this->load->view('template/page', $data);
In here, $data[template] is the requested view, $data[title] is the relevant title for the view. Template/page is the page.php file in the template folder that you have created. for the view pages at the head, we have to import bootstrap and set meta data
<head>
<meta charset="utf-8"> 
<meta http-equiv="X-UA-Compatible" content="IE=edge"> 
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="/assets/css/bootstrap.css" />
<link href="/assets/css/bootstrap.min.css" rel="stylesheet">
<title>User Login</title> 
</head>

Have nice coding !!!

Like us on facebook

Comments

Post a Comment

Popular posts from this blog

Start coding with CodeIgniter using PhpStorm on Ubuntu 16.04

CodeIgniter uses MVC architecture.  Model  Stores php files which are communicate with the database. Get, store, update informations to the database are handled by php files in model. Login, registration, etc...  View  Stores php files which display informations in the browser. Tables, images, descriptions, etc..  Controller   Stores php files which make the connection between model and the view. When files in the model get information, the controller will call the relevant file in the view and display them to the user. Let's start coding with CodeIgniter framework.  Step 1 : Download codeIgniter framework from  CodeIgniter . Step 2 : Copy files to a folder called Login (in my case the folder path /home/shyamali/Projects/CodeIgniter/Login) Step 3 : Then open Login folder by using PhpStorm. If you have not yet installed PhpStrom  How to install PhpStrom in Ubuntu 16.04 . Step 4 :  If you have not yet in...
3 comments
Read more

Useful git commands for pushing and pulling

First go to relevant folder from the terminal. cd 'project path' To clone existing git project, git clone 'project git clone link given by git' When you finish setting up new project, you need to download 3 rd  party directories to your project. To do that first go to relevant project folder in terminal and type following command. php composer.phar update After setting up the new project, you need to setup the database also. To do that you have to execute the sql as well. You can do your changes in a separate branch and merge it into main branch To create a new branch git checkout -b "developer_develop" You can do your developing and push it to your branch. git status It will display all files in the project that you have edited. You can set the file paths that you want to push. You can put more than one file at a time. To do that use a keyboard space between two files. git add application/modules/property/models/propert...
2 comments
Read more