I have a strange problem. Im usining Codeigniter with MaterializeCSS. I want to create navs to create menu. The problem is when I use localhost/page everything works fine, navbars are visible, but When I'll use a site.url, page looks like materalize is not included. I don't know what to do. I can quess there is something with URL in browser
Controller:
class main extends CI_Controller {
public function __construct()
{
parent::__construct();
$this->load->database();
$this->load->view('head');
$this->load->view('index');
}
public function index()
{
$this->load->model('quiz_model');
$data['result'] = $this->quiz_model->get_data();
$this->load->view('content/quiz', $data);
}
public function addquestion()
{
$this->load->view('content/addquestion');
}
}
index.php
<?php
$this->load->helper('html');
$this->load->helper('url');
?>
<nav>
<div class="nav-wrapper">
Logo
<ul id="nav-mobile" class="right hide-on-med-and-down">
<?php echo '<li>web page</li>' ?>
<?php echo '<li>Dodaj pytanie</li>' ?>
</ul>
</div>
</nav>
head.php
<!DOCTYPE html>
<html>
<head>
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Import materialize.css-->
<link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection"/>
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="js/materialize.min.js"></script>
<title>Strona</title>
</head>
<body>
<div class="container">
You need to set the base url you have IP showing in url.
config/config.php
$config['base_url'] = 'http://localhost/yourprojectname/';
You need to change few line :
Controller :
...
public function __construct()
{
parent::__construct();
$this->load->database();
$this->load->helper('url'); // move url helper here, so it could be used on head view
$this->load->view('head');
$this->load->view('index');
}
...
head.php :
<!DOCTYPE html>
<html>
<head>
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Import materialize.css-->
<link type="text/css" rel="stylesheet" href="<?php echo site_url() ?>css/materialize.min.css" media="screen,projection"/>
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="<?php echo site_url() ?>js/materialize.min.js"></script>
<title>Strona</title>
</head>
<body>
<div class="container">
Related
This is my directory:
miuse/application
miuse/application/views/templates/header.php
miuse/bootstrap/css
miuse/bootstrap/js
miuse/bootstrap/fonts
This is my controller code:
<?php
class page extends CI_controller{
public function view($page= 'home')
{
if(!file_exists(APPPATH.'views/pages/'.$page.'.php'))
{
show_404();
}
$data['title']='Moodlist home';
$this->load->view('templates/header', $data);
}
}
?>
This is my view code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>
<?php echo $title; ?>
</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<link rel="stylesheet" href="http://localhost/miuse/bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="header.css" type="text/css">
</head>
<body>
<header class="container">
<div class="row">
<h1 class="col-sm-4">List</h1>
<nav class="col-sm-8 text-right">
<p>Home</p>
<p>Category</p>
<p>About us</p>
</nav>
</div>
</header>
</body>
</html>
when i run my view normally in a browser it shows proper output but when i load it with codeigniter view then it shows different output which i dont want.
I guess your header.css file is not being loaded.
Put the header.css file in miuse/bootstrap/css directory.
And change your code from,
<link rel="stylesheet" href="header.css" type="text/css">
to
<link rel="stylesheet" href="http://localhost/miuse/bootstrap/header.css" type="text/css">
When loading css and other stuff I would recommend using base_url() in your head area
<head>
<link rel="stylesheet" type="text/css" href="<?php echo base_url('bootstrap/css/bootstrap.css');?>">
<link rel="stylesheet" type="text/css" href="<?php echo base_url('assets/css/header.css');?>">
</head>
Make sure you have set the base url in config.php and autoload the url helper.
1- Step one correct work
1 index.blade.php page
<nav class="navigation">
<ul class="sf-menu">
<li>Home
</li>
<li>About Us</li>
<li>Category
<ul class="dropdown">
<li>Buy and Sell</li>
<li>Car and Vehicles</li>
<li>Real Estate</li>
<li>Pets</li>
<li>Jobs</li>
<li>Community</li>
<li>Resumes</li>
</ul>
</li>
2 Route code
Route::resource('/', 'BasicController');
Route::resource('about', 'BasicController#about');
Route::resource('contact', 'BasicController#contact');
Route::resource('grid', 'BasicController#grid');
3 BasicController code
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Http\Requests;
use App\Http\Controllers\Controller;
class BasicController extends Controller
{
public function index()
{
return view('index');
}
public function about()
{
return view('about');
}
public function contact()
{
return view('contact');
}
public function grid()
{
return view('buy-and-sell/grid');
}
public function create()
{
//
}
}
4 view image for help
5 correct work
2- In this step css not work
please help in this step
1 index.blade.php page. grid/1 pass to url and equal to if or elseif statement
<nav class="navigation">
<ul class="sf-menu">
<li>Home
</li>
<li>About Us</li>
<li>Category
<ul class="dropdown">
<li>Buy and Sell</li>
<li>Car and Vehicles</li>
<li>Real Estate</li>
<li>Pets</li>
<li>Jobs</li>
<li>Community</li>
<li>Resumes</li>
</ul>
</li>
2 Route code
Route::resource('/', 'BasicController');
Route::resource('about', 'BasicController#about');
Route::resource('contact', 'BasicController#contact');
Route::resource('grid', 'BasicController#grid');
3 BasicController code
class BasicController extends Controller
{
public function index()
{
return view('index');
}
public function about()
{
return view('about');
}
public function contact()
{
return view('contact');
}
public function grid(Request $request, $id)
{
if ($id == 1) {
return view('buy-and-sell/grid');
}
elseif ($id == 2) {
return view('car-and-vehicels/grid');
}
elseif ($id == 3) {
return view('country/grid');
}
else{
return view('other/grid');
}
}
public function create()
{
//
}
}
4 image for your help
css is not work
Change your scrip src and link href as folloing
<link href="{{ URL::to('/')}}/template/css/bootstrap.css" rel="stylesheet" type="text/css">
<link href="{{ URL::to('/')}}/template/css/style.css" rel="stylesheet" type="text/css">
<link href="{{ URL::to('/')}}/template/plugins/prettyphoto/css/prettyPhoto.css" rel="stylesheet" type="text/css">
<link href="{{ URL::to('/')}}/template/plugins/owl-carousel/css/owl.carousel.css" rel="stylesheet" type="text/css">
<link href="{{ URL::to('/')}}/template/plugins/owl-carousel/css/owl.theme.css" rel="stylesheet" type="text/css">
<link href="{{ URL::to('/')}}/template/css/custom.css" rel="stylesheet" type="text/css"><!-- custom css apply -->
<!--[if lte IE 9]><link rel="stylesheet" type="text/css" href="{{ URL::to('/')}}/css/ie.css" media="screen" /><![endif]-->
<!-- Color Style -->
<link href="{{ URL::to('/')}}/template/colors/color1.css" rel="stylesheet" type="text/css">
<!-- SCRIPTS
================================================== -->
<script src="{{ URL::to('/')}}/template/js/modernizr.js"></script><!-- Modernizr -->
When you move to another route, your href can't find the css files.
Also you need to Update your route from
Route::resource('grid', 'BasicController#grid');
to
Route::resource('grid/{$id}', 'BasicController#grid');
so that your grid(Request $request, $id) function can receive the $id from the url.
index.blade.php page
<!DOCTYPE HTML>
<html class="no-js">
<head>
<!-- Basic Page Needs
================================================== -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Real Spaces - #yield('title')</title>
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="author" content="">
<!-- Mobile Specific Metas
================================================== -->
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
<meta name="format-detection" content="telephone=no">
<!-- CSS
================================================== -->
<link href="template/css/bootstrap.css" rel="stylesheet" type="text/css">
<link href="template/css/style.css" rel="stylesheet" type="text/css">
<link href="template/plugins/prettyphoto/css/prettyPhoto.css" rel="stylesheet" type="text/css">
<link href="template/plugins/owl-carousel/css/owl.carousel.css" rel="stylesheet" type="text/css">
<link href="template/plugins/owl-carousel/css/owl.theme.css" rel="stylesheet" type="text/css">
<link href="template/css/custom.css" rel="stylesheet" type="text/css"><!-- custom css apply -->
<!--[if lte IE 9]><link rel="stylesheet" type="text/css" href="css/ie.css" media="screen" /><![endif]-->
<!-- Color Style -->
<link href="template/colors/color1.css" rel="stylesheet" type="text/css">
<!-- SCRIPTS
================================================== -->
<script src="template/js/modernizr.js"></script><!-- Modernizr -->
</head>
<html>
<head>
This is my Master header in laravel for all page
I have some pages i am loading the normal way by calling a view like you'ld expect, $this->load->view('foo') but the file i have put all my javascript main.js is giving errors on firebug if it misses the html it requires.
To stop the errors,i would like to avoid loading main.js in all pages and instead load only the javascript that specific pages uses.
I have tried this
public function index(){
echo <<<'EOT'
$(document).ready(function(){
$(".btn").click(function(){
$(this).hide();
});
});
EOT;
echo '<button class="btn btn-primary">'.$this->lang->line('lorem_ipsum').'</button>';
//$this->load->view('foo');
}
I know EOT will display the code and not inject it into the fetched view but that's the idea i am having.
Is there a way i can inject javascript or css into foo from the the controller index?.
You can always set the view variable and use if when you want to load that JS file (or any other file that will be used only on certain pages). Try something like this:
In your controller:
$this->load->view('foo', array('loadMainJS'=>true));
Then in your view:
<?php if (isset($loadMainJS) && $loadMainJS): ?>
<script src="main.js"></script>
<?php endif; ?>
You can even make a separate view that will only load that file and then load that view from the controllers only where needed. Plenty of ways to do this, actually.
Adding to what Shomz ,i was able to create a variable in controller
public function index(){
$data['custom_js'] = <<<EOT
<script>
$(document).ready(function(){
$( '.btn' ).click(function() {
alert( 'Handler for .click() called.' );
});
});
</script>
EOT;
$this->load->view('header',$data);
echo '<button class="btn btn-primary">'.$this->lang->line('lorem_ipsum').'</button>';
$this->load->view('body');
$this->load->view('footer');
}
and use it in the view,
<!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="">
<link rel="icon" href="<?php echo base_url("assets/ico/favicon.ico"); ?>">
<title>Sticky Footer Navbar Template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="<?php echo base_url("assets/css/bootstrap.min.css"); ?>" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="<?php echo base_url("assets/css/sticky-footer-navbar.css"); ?>" rel="stylesheet">
<link href="<?php echo base_url("assets/jui/jquery-ui.min.css"); ?>" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<script src="<?php echo base_url("assets/js/jquery.min.js"); ?>"></script>
<script src="<?php echo base_url("assets/jui/jquery-ui.min.js"); ?>"></script>
<script src="<?php echo base_url("assets/js/bootstrap.min.js"); ?>"></script>
<script src="<?php echo base_url("assets/js/isotopeSearchFilter.jquery.min.js"); ?>"></script>
<?php echo $custom_js; ?>
</head>
<body>
the site in question is http://www.ziplinegolive.com/
I have built this in CI and currently there is 2 "views" folders
-pages
and
-news
I want to make a news directory to organize my posts and not have them interfere with the other pages. My problem that im having though is once i enter http://www.ziplinegolive.com/news/home I noticed that when i check my header links...all the urls acquire the news/ directory...which doestn allow me to go back.... does anyone know how i can fix this? i currently have one routes config files and 2 controllers.
first here is my routes.php
$route['news/(:any)'] = 'news/view/$1';
$route['(:any)'] = 'pages/view/$1';
$route['default_controller'] = 'pages/view';
here is my standard pages controller
<?php
class Pages extends CI_Controller {
public function view($page = 'home')
{
if ( ! file_exists(APPPATH.'/views/pages/'.$page.'.php'))
{
// Whoops, we don't have a page for that!
show_404();
}
$data['title'] = ucfirst($page); // Capitalize the first letter
$this->load->view('templates/header', $data);
$this->load->view('pages/'.$page, $data);
$this->load->view('templates/footer', $data);
}
}
and here is my news controller
<?php
class News extends CI_Controller {
public function view($page = 'home')
{
$data['title'] = ucfirst($page); // Capitalize the first letter
$this->load->view('templates/header', $data);
$this->load->view('news/'.$page);
$this->load->view('templates/footer', $data);
}
}
ive been busting my head in to try and figure this out.... any help is GREATLY appreciated!
thank you!
UPDATE: ADDED HEADER.PHP - as you can see the css and js files are static linked because of this routing debacle....
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<title>ZipLine™</title>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="HandheldFriendly" content="true" />
<meta name="apple-touch-fullscreen" content="yes" />
<!-- All Animations CSS -->
<link href="http://www.ziplinegolive.com/css/animate.css" rel="stylesheet" type="text/css">
<!-- Image Lightbox CSS-->
<link rel="stylesheet" href="http://www.ziplinegolive.com/css/imagelightbox.css" type="text/css" media="screen">
<!-- Theme styles and Menu styles -->
<link href="http://www.ziplinegolive.com/css/style.css" rel="stylesheet" type="text/css">
<link href="http://www.ziplinegolive.com/css/mainmenu.css" rel="stylesheet" type="text/css">
<!-- Call Fontawsome Icon Font from a CDN -->
<link href="http://netdna.bootstrapcdn.com/font- awesome/4.1.0/http://www.ziplinegolive.com/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="js/jquery.fancybox.css" type="text/css" media="screen">
<!--FlexSlider -->
<link rel="stylesheet" href="js/woothemes-FlexSlider-06b12f8/flexslider.css" type="text/css" media="screen">
<!--Isotope Plugin -->
<link rel="stylesheet" href="js/isotope/http://www.ziplinegolive.com/css/style.css" type="text/css" media="screen">
<!--Simple Text Rotator -->
<link href="http://www.ziplinegolive.com/css/simpletextrotator.css" rel="stylesheet" type="text/css">
<!--Modernizer Custom -->
<script type="text/javascript" src="js/modernizr.custom.48287.js"></script>
<!-- Fav and touch icons -->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="apple-touch-icon-114x114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="apple-touch-icon-72x72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="apple-touch-fa-57x57-precomposed.png">
<link rel="shortcut icon" href="favicon.png">
</head>
<body class="sticky_header">
<div class="overflow_wrapper">
<header>
<div class="container">
<div class="logo"><a class="brand" href="index.html"><img src="http://www.ziplinegolive.com/images/logo.png" alt="optional logo"></a></div>
<!-- MAIN MENU -->
<div id="mainmenu" class="menu_container">
<label class="mobile_collapser">MENU</label>
<!-- Mobile menu title -->
<ul>
<li class="active">Home</li>
<li>About Us
<div class="dmui_dropdown_block">
<ul class="dmui-submenu">
<li>The Company</li>
<li>Media</li>
<li>Partners</li>
</ul>
</div>
</li>
<li>Products and Services</li>
<li>News</li>
<li>Contact</li>
</ul>
</div>
<!-- /MAIN MENU -->
<div class="triangle-up-left"></div>
<div class="triangle-up-right"></div>
</div>
</header>
Change your links.
For example
<li>The Company</li>
=>
<li>The Company</li>
And also, you can link to css/js files like this:
<link href="<?php echo base_url('assets');?>/css/mainmenu.css" rel="stylesheet" type="text/css">
This of course expects that you have your css files in project/assets/css
When I go to :
codeigniter/index.php
Bootstrap styles load fine. Actually is the content from
codeigniter/application/views/frontpage.php :
<div class="container">
<div class="hero-unit">
<h2>CodeIgniter Bootstrap</h2>
<p>CodeIgniter Bootstrap kick starts the development process of the web development process by including Twitter Bootstrap into CodeIgniter. It also includes certain libraries such as AWS and Facebook in-case you are developing applications requiring those SDKs. So stop writing the same code over again and start working on your idea.</p>
<a class="btn btn-primary btn-large" href="https://github.com/sjlu/CodeIgniter-Bootstrap">View on Github</a>
</div>
</div>
The problem is that when I copy-paste the same content into my own file
codeigniter/application/views/index.php
It does not load correctly. My controller looks like this:
<?php
class Cart extends CI_Controller {
function __construct()
{
parent::__construct();
$this->load->model('cart_model'); // Load our cart model for our entire class
}
function index()
{
$data['products'] = $this->cart_model->retrieve_products(); // Retrieve an array with all products
$data['content'] = 'products'; // Select our view file that will display our products
$this->load->view('index', $data); // Display the page with the above defined content
}
}
/* End of file cart.php */
/* Location: ./application/controllers/cart.php */
and the frontpage controller is:
<?php if (!defined('BASEPATH')) die();
class Frontpage extends Main_Controller {
public function index()
{
$this->load->view('include/header');
$this->load->view('frontpage');
$this->load->view('include/footer');
}
}
/* End of file frontpage.php */
/* Location: ./application/controllers/frontpage.php */
Use base_url() like
<link href="<?php echo base_url();?>assets/css/bootstrap.css" rel="stylesheet">
I solved by including header and footer in the index() method of controller:
function index()
{
$data['products'] = $this->cart_model->retrieve_products(); // Retrieve an array with all products
$data['content'] = 'products'; // Select our view file that will display our products
$this->load->view('include/header');
$this->load->view('index', $data); // Display the page with the above defined content
$this->load->view('include/footer');
}
include/header.php adds all the bootstrap stuff
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html" charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="author" content="">
<title>Car application</title>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.no-icons.min.css" rel="stylesheet">
<link href="//netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.min.css" rel="stylesheet">
<link href="<?php echo base_url('assets/css/custom.css') ?>" rel="stylesheet">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/1.2.1/lodash.min.js"></script>
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
<script src="<?php echo base_url('assets/js/custom.js') ?>"></script>
</head>
<body>