Integration Between CodeIgniter With Bootstrap Framework [part 1] ~ Appmurah

Please follow the steps below to upload images or other files. If an error occurs when trying to please comment below.

Step 1
Download bootstrap framework here.

Step 2
Open file config.php in /application/config/config.php

$config['base_url'] = 'http://localhost/appmurah_blog/';

Step 3
Open file routes.php in /application/config/routes.php

$route['default_controller'] = 'welcome';
$route['404_override'] = '';
$route['translate_uri_dashes'] = TRUE

Step 4
Create new file with name Welcome.php in /application/controllers/Welcome.php

<?php
class Welcome extends CI_Controller {

    var $data = array();

    public function __construct() {
        parent::__construct();
    }
    
    public function index() {
        $this->template->set('title', 'Dashboard');
        $this->template->load('main_template', 'content/dashboard', $this->data);
    }

}

if it is, then an error
Step 5
Create new file with name Template.php in /application/libraries/Template.php

<?php
class Template {

    var $template_data = array();

    public function __construct() {
        $this->CI = & get_instance();
    }

    public function set($name, $value) {
        $this->template_data[$name] = $value;
    }

    public function load($template = '', $view = '', $view_data = array(), $return = false) {
        $this->set('contents', $this->CI->load->view($view, $view_data, true));
        return $this->CI->load->view($template, $this->template_data, $return);
    }

    public function load_file($name) {
        return $this->CI->load->view($name);
    }

}

Step 6
Create new file with name style_helper.php in /application/helpers/style_helper.php

<?php
function css_tag($href = '', $type = 'text/css', $index_page = false) {
    $CI =& get_instance();
    
    $link = '';
    if (is_array($href)) {
        foreach ($href as $v) {
            $link .= css_tag($v, $type, $index_page);
        }
    } else {
        $link .= '<link ';
        if (strpos($href, '://') !== false) {
            $link .= 'href="'.$href.'"';
        } elseif ($index_page === true) {
            $link .= 'href="'.$CI->config->site_url($href).'"';
        } else {
            $link .= 'href="'.$CI->config->slash_item('base_url').$href.'"';
        }
        $link .= " type=\"{$type}\" rel=\"stylesheet\" />";
    }
    return $link;
}

function script_tag($src = '', $type = "text/javascript", $index_page = false) {
    $CI =& get_instance();
    
    $link = '';
    if (is_array($src)) {
        foreach ($src as $v) {
            $link .= script_tag($v, $type, $index_page);
        }
    } else {
        $link .= '<script ';
        if (strpos($src, '://') !== false) {
            $link .= 'src="'.$src.'"';
        } elseif ($index_page === true) {
            $link .= 'src="'.$CI->config->site_url($src).'"';
        } else {
            $link .= 'src="'.$CI->config->slash_item('base_url').$src.'"';
        }
        $link .= " type=\"{$type}\"></script>";
    }
    return $link;
}

function load_file($file) {
    $CI =& get_instance();
    
    return $CI->template->load_file($file);
}

Step 7
Open file autoload.php in /application/config/autoload.php

$autoload['libraries'] = array(
    'template'
);

$autoload['helper'] = array(
    'style'
);

Step 8
Create new folder with name content in /application/views/content
Step 9
Create new file with name main_template.php in /application/views/main_template.php

<!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">
    <meta name="description" content="">
    <meta name="author" content="">
    <title><?php echo $title;?></title>
    <?php
    echo css_tag('bootstrap/css/bootstrap.min.css');
    ?>
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body>
    <?php
    load_file('content/menu');
    echo $contents;
    echo script_tag('https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js');
    echo script_tag('bootstrap/js/bootstrap.min.js');
    ?>
</body>
</html>

Step 10
Create new file with name menu.php in /application/views/content/menu.php

<nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">Project name</a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
            <form class="navbar-form navbar-right">
                <div class="form-group">
                    <input type="text" placeholder="Email" class="form-control">
                </div>
                <div class="form-group">
                    <input type="password" placeholder="Password" class="form-control">
                </div>
                <button type="submit" class="btn btn-success">Sign in</button>
            </form>
        </div>
    </div>
</nav>

Step 11
Create new file with name dashboard.php in /application/views/content/dashboard.php

<div class="jumbotron">
    <div class="container">
        <h1>Hello, world!</h1>
        <p>This is a template for a simple marketing or informational website. It includes a large callout called a jumbotron and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
        <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more &raquo;</a></p>
    </div>
</div>
<div class="container">
    <div class="row">
        <div class="col-md-4">
            <h2>Heading</h2>
            <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p>
            <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
        </div>
        <div class="col-md-4">
            <h2>Heading</h2>
            <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p>
            <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
        </div>
        <div class="col-md-4">
            <h2>Heading</h2>
            <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
            <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
        </div>
    </div>
</div>

Appmurah

Wednesday, October 5, 2016

Integration Between CodeIgniter With Bootstrap Framework [part 1]

0 comments:

Post a Comment

Donate

Popular Posts