I have developed website using CodeIgniter that uses MySQL to populate a results page. I would now like to improve all the pages appearances and most places recommend using Bootstrap. I have tried to add Bootstrap to my CodeIgniter project but with no success.
Does anyone know of an up-to-date guide I could follow to complete this?
Thanks
A simple way would be to use Bootstrap CDN. For CSS, simply include this line in the <head> section of every webpage (somewhere in your view files, depending on how you have structured them):
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
Bootstrap's plugins depend on jQuery, so you'll need to include jQuery before Bootstrap's JavaScript:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
Simple example page:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Your great site!</title>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="jumbotron">
<div class="container">
<h1>Hello, world!</h1>
</div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>
</html>
Alternatively you could host the files on your web server. Upload the relevant files to a publicly accessible directory. I'm going to assume that they are in an assets folder, in your web root, like this:
+-- public_html
| +-- index.php
| +-- assets
| | +-- css
| | | +-- boostrap.css
| | +-- js
| | | +-- bootstrap.js
| | | +-- jquery.js
| (other files/directories...)
To include them in your view files, you can link them like this:
<link rel="stylesheet" href="<?php echo base_url("assets/css/bootstrap.css"); ?>">
<script type="text/javascript" src="<?php echo base_url("assets/js/jquery.js"); ?>"></script>
<script type="text/javascript" src="<?php echo base_url("assets/js/bootstrap.js"); ?>"></script>
You'll need to have loaded the URL Helper to use the base_url() function.
First time using PHP CodeIgniter , Bootstrap and Bitnami mampstack.
( All develope code in local notebook)
1. To extract the file CodeIgniter 3.x and Boostrap 3.x(Twitter)
Here my directory :
/Applications/mampstack-5.4.26-2/apache2/htdocs/TestCoceIginter_Bootstra
/Applications/mampstack-5.4.26-2/apache2/htdocs/TestCoceIginter_Bootstrap/application
/Applications/mampstack-5.4.26-2/apache2/htdocs/TestCoceIginter_Bootstrap/assets
2.Modification (Add)
a. application/controller/Welcome.php
<?php defined('BASEPATH') OR exit('No direct script access allowed');
class Welcome extends CI_Controller
{
public function __construct() {
parent::__construct();
$this->load->helper('url');
public function index(){
$this->load->view('welcome_message');
}
}
b.application/views/welcome_message.php
<?php defined('BASEPATH') OR exit('No direct script access allowed');?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Welcome to CodeIgniter</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="<?php echo base_url("assets/css/bootstrap.css"); ?>">
<script type="text/javascript" src="<?php echo base_url("assets/js/jquery.min.js"); ?>"></script>
<script type="text/javascript" src="<?php echo base_url("assets/js/bootstrap.js"); ?>"></script>
</head>
If you tried to remove the 'index.php' from url like in the official example then you should try this
<IfModule mod_rewrite.c>
RewriteEngine on
RewriteBase /
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ index.php/$1 [NC,L,QSA]
</IfModule>
Open the config.php in /CodeIgniter/application/config directory,
And edit it as:
$config['base_url'] = 'http://localhost/your_folder/';
Related
I am new to codeigniter, i am still learning about it. My problem it's that the css file is not applying on the page, it is linked, I can seet it but it doesnt work.
My header file.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Proyectos makers</title>
<link rel="stylesheet" type="text/css" src="<?php echo base_url('assets/estilos.css'); ?>">
</head>
<body>
My css file:
body{
background-color: #CC00CC;
}
In my config/autoload.php I load the url helper
$autoload['helper'] = array('url');
I have yet removed my index.php page in config.php
And this is my .htacces file:
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ index.php/$1 [L]
When i view the source code, the css file is linked. I clic on it and shows me the code of the css file. But doesn´t change the aspect of my site.
I have found my error. It is not src, it is href in my link.
Bad:
<link rel="stylesheet" type="text/css" src="<?php echo base_url('assets/estilos.css'); ?>">
Good:
<link rel="stylesheet" type="text/css" href="<?php echo base_url('assets/estilos.css'); ?>">
i'm new to codeigniter. I'm making crud from a tutorial, whenever I run it.
It links to..http://localhost/gis-crud/
and it show error 404
i think it's just a problem on the uri or pagination of the controllers. What would be the problem?
apps.php - controller
class Apps extends CI_Controller{
function __construct(){
parent::__construct();
$this->load->model('m_data_lokasi','lokasi');
}
function index(){
$data['q']=$this->lokasi->semua()->result();
$this->tampil->display('apps/index.php',$data);
}
Tampil.php - libraries
function __construct(){
$this->_CI=&get_instance();
}
function display($tampil,$data=null){
$data['_content']=$this->_CI->load->view($tampil,$data,true);
$data['_header']=$this->_CI->load->view('tampil/header',$data,true);
$data['_footer']=$this->_CI->load->view('tampil/footer',$data,true);
$this->_CI->load->view('/tampil.php',$data);
}
Tampil.php - view
<html>
<head>
<meta charset="utf-8">
<title>CRUD-GIS</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes"/>
<link href="<?php echo base_url(); ?>/assets/jquery.mobile-1.4.4.min.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="<?php echo base_url(); ?>/assets/jquery.min.js"></script>
<script type="text/javascript" src="<?php echo base_url(); ?>/assets/jquery.mobile-1.4.4.min.js"></script>
<style>
#map-page, #map-canvas { width: 100%; height: 100%; padding: 0; }
</style>
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
</head>
<body onLoad="Initialize()">
<?php echo $_header;?>
<div role="main" class="ui-content">
<?php echo $_content;?>
</div>
<?php echo $_footer;?>
</div>
</body>
</html>
config.php
$config['base_url'] = 'http://localhost/gis-crud/';
$config['index_page'] = '';
$config['uri_protocol'] = 'REQUEST_URI';
save this code as .htaccess file
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ index.php/$1 [L]
In your config folder
look for routes.php change the
default controller
$route['default_controller'] = 'welcome';
To your Controller named Apps
$route['default_controller'] = 'apps';
once you call your $config['base_url'] = 'http://localhost/gis-crud/'; it will execute the default_controller above.
Hi I am newbie learning laravel 4 for creating an application. I am trying to link twitter bootstrap3 files to views using laravel blades. I installed a new laravel application folder.
To remove public from url path i removed all the file in public folder and kept outside of public folder. I changed paths as per the above changes in index.php file.As per my needs i will have two sections in my application one is for users and another is for admin.
So for this i changed my routes.php file like this below.
Route::get('/', 'HomeController#index');
Route::get('/admin', 'AdminController#index');
I created two controllers one for users and another for admin named as HomeController and AdminController. Both files will look like below.
HomeController for Users
<?php
class HomeController extends BaseController {
public function index()
{
return View::make('index');
}
}
AdminController for admin section
<?php
class AdminController extends BaseController {
public function index()
{
return View::make('admin.index');
}
}
Now i created admin folder under views folder for admin section. Thats why i kept admin.index to call admin index page when the url is like this http://localhost/laravel/admin.
Now i created assets folder which has css folder for css files, js folder js files and images folder for images. I want to link these css and js files to my admin view. So i created a layout.blade.php like below.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Laravel</title>
<link rel="stylesheet" href="{{ asset('assets/css/bootstrap.css') }}">
<link rel="stylesheet" href="{{ asset('assets/css/style.css') }}">
<script type="text/javascript" src="{{ asset('assets/js/jquery-1.10.1.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('assets/js/bootstrap.min.js') }}"></script>
</head>
<body>
#yield('content')
</body>
</html>
After this i changed my view into like this below.
#extends('layout')
#section('content')
<div class="container">
<div class="row clearfix">
<div class="col-md-12 column">
<p>Here Comes Admin Section</p>
</div>
</div>
</div>
#stop
But the assets are not linking. May i know where i am going wrong.
If your asset folder is inside public folder of laravel then user this:
Suppose your folder structure is public/assets/css/bootstrap: Then
<script src="{{ URL::asset('assets/css/bootstrap.css') }}"></script>
Use a virtual host on your server or local machine to remove public from your URL. It's pretty straightforward. Simply Google on how to setup a virtual host for Laravel.
Once you have your virtual host setup, simply place your assets folder in your public directory.
Then in your Blade layout, use:
<link rel="stylesheet" href="{{ URL::asset('assets/css/bootstrap.css') }}">
i am very new in codeigniter.I have a static web page.i just want to convert it into dynamic web page.First of all i pasted all the files in the view folder of the MVC of the codeigniter.Here i have css, javascript and images folder and my php files.
I have created a controller like this..
<?php
class Saffron extends CI_Controller
{
function index()
{
$this->load->view('home');
}
}
?>
and my home.php page is just like this..
<!DOCTYPE html>
<html lang="en">
<head>
<title>Home</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css"
media="screen" href="<?= base_url() ?>application/views/css/reset.css">
<link rel="stylesheet" type="text/css"
media="screen" href="<?= base_url() ?>application/views/css/style.css">
<link rel="stylesheet" type="text/css"
media="screen" href="<?= base_url() ?>application/views/css/slider.css">
<script src="<? echo base_url(); ?>application/views/js/jquery-1.7.min.js"></script>
<script src="<? echo base_url(); ?>application/views/js/jquery.easing.1.3.js"></script>
<script src="<? echo base_url(); ?>application/views/js/tms-0.4.1.js"></script>
<script src="<? echo base_url(); ?>application/views/js/vpb_script.js"></script>
<script src="<? echo base_url(); ?>application/views/js/pop.js"></script>
<!--start popup window ref-->
<link href="application/views/css/colorbox.css"
rel="stylesheet" type="text/css" media="all" />
<script src="<? echo base_url(); ?>application/views/js/jquery_002.js"></script>
<script>
$(document).ready(function(){
$(".image_show").colorbox({rel:'image_show', transition:"fade"});
});
</script>
<!--end popup window ref-->
<!--[if lt IE 8]>
<div style=' clear: both; text-align:center; position: relative;'>
<a href="http://windows.microsoft.com/en-US/
internet-explorer/products/ie/home?ocid=ie6_countdown_bannercode">
<img src="http://storage.ie6countdown.com/assets/100/
images/banners/warning_bar_0000_us.jpg" border="0" height="42"
width="820" alt="You are using an outdated browser. For a faster,
safer browsing experience, upgrade for free today." />
</a>
</div>
<![endif]-->
<!--[if lt IE 9]>
<script type="text/javascript" src="js/html5.js"></script>
<link rel="stylesheet" type="text/css" media="screen" href="css/ie.css">
<![endif]-->
</head>
<body>
<!--<div class="bg-top">-->
<div class="bgr">
<!--==============================Wrapper=================================-->
<div class="wrapper">
<!-----------------------Header --------------------------->
<header>
<div class="head">
<h1>
<a href="index.html">
<img src="<?php echo base_url(); ?>application/views/images/logo.jpg" alt=""></a>
sign up
<a href="javascript:void(0);"
class="classname1" onClick="vpb_show_login_box();">login</a>
</h1>
</div>
<?php
include_once('navigation.php');
include_once('slider.php');
include_once('offers.php');
include_once('invite.php');
include_once('testimonial.php');
include_once('special_item.php');
include_once('footer.php');
include_once('popup.php');
?>
Now what the mistake there...or anyelse that i can't recognizing??...please hlp me.
Thanks in Advance...
You forgot to put echo on several places.
I can show you my solution for putting files in header. First I made a folder in the root and named it public, and in that folder I created folders for needed documents (css, img, js...). In constants.php I made this:
$root = "http://".$_SERVER['HTTP_HOST'];
$root .= str_replace(basename($_SERVER['SCRIPT_NAME']),"",$_SERVER['SCRIPT_NAME']);
define('ABSOLUTE_PATH', str_replace('system/','', BASEPATH));
define('BASE', $root);
define('CSS', BASE . 'public/css/');
define('JS', BASE . 'public/js/');
define('IMG', BASE . 'public/img/');
So in the header you can do this:
<link rel="stylesheet" href="<?php echo CSS ?>reset.css">
This is a easy way to maintain and update your files.
Sasha gave a good solution, but to answer your question: all your CSS, images, JS should not reside inside the application folder, but in a folder on the same level as application. assetsis a common name for such a folder.
Try this:
in your config file, define the base_url() ex, base_url() = 'yoursite';
in root directory create a folder and name it resource and put all your css, js, img folders inside
in your html/php view file (ex. application/views/test.php) along with html code put these php codes, example
NOTE: don't worry about echoing the base_url in every js or css file that you link because base has been already defined.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Home</title>
<meta charset="utf-8">
<base href="<?php echo base_url(); ?>" />
<link rel="stylesheet" type="text/css" media="screen" href="resource/css/reset.css">
<link rel="stylesheet" type="text/css" media="screen" href="resource/css/style.css">
<link rel="stylesheet" type="text/css" media="screen" href="resource/css/slider.css">
<script src="resource/js/jquery-1.7.min.js"></script>
<script src="resource/js/jquery.easing.1.3.js"></script>
<script src="resource/js/tms-0.4.1.js"></script>
<script src="resource/js/vpb_script.js"></script>
<script src="resource/js/pop.js"></script>
I am trying to add a calender in my application. The following code that I have is not working in codeigntier but it works fine if I put it into another folder outside codeigniter. Would you please kindly help me find out what the problem is?
Thanks in Advance
<html>
<head>
<link href="calendar/calendar.css" rel="stylesheet" type="text/css" />
<script language="javascript" src="calendar/calendar.js"></script>
</head>
<body>
<?php
//get class into the page
require_once('tc_calendar.php');
$myCalendar = new tc_calendar("date5", true, false);
$myCalendar->setIcon ("calendar/images/iconCalendar.gif");
$myCalendar->setDate(date('d'), date('m'), date('Y'));
$myCalendar->setPath("calendar/");
$myCalendar->setYearInterval(1971, 2035);
$myCalendar->dateAllow('1971-01-01', '2035-01-01');
$myCalendar->setDateFormat('j F Y');
//$myCalendar->setHeight(350);
//$myCalendar->autoSubmit(true, "form1");
$myCalendar->setAlignment('left', 'bottom');
$myCalendar->writeScript();
?>
</body>
</html>
It's likely that the paths to your assets are off. Try using base_url() in the calls to your assets and see if that helps. Your JS and CSS files would be loaded like this:
<link href="<?php echo base_url(); ?>calendar/calendar.css" rel="stylesheet" type="text/css" />
<script language="javascript" src="<?php echo base_url(); ?>calendar/calendar.js"></script>
base_url() will get you to the root of the application, so if the calendar directory is not at the root then update that path accordingly. Inspect the HTML that is produced and see if it is actually loading the assets.