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

How to Read and Write files using CodeIgniter - PHP

How to read a file This post will explain how to read and write files using php. When reading a file from php, we can let the user select the file or we can give a specific file manually. Here is a explanation for reading and writing a csv file. if (!empty($_POST) && $_POST['file_upload']) {     $target_file = '/tmp/'  . basename($_FILES["file_name"]["name"]);     $fileType = pathinfo($target_file,PATHINFO_EXTENSION);     if($fileType =='csv'){ // read the csv file. Discussed below }else{     $this->session->set_flashdata('error_message', "Please upload valid file type"); } Here we have check if the is a post(that means submit button has been pressed). Then we have uploaded the file to a folder called tmp. Then we check the file format(whether it is csv or not).   Then we set some config $config['upload_path'] = '/tmp'; $config['allowed_types'] = '*'; $config[...
Post a Comment
Read more