I am very new in codeigniter and I am facing lots of problems while I develop my website with it. I am facing basic navigation problem. First of all I've to say where my files are situated. My css,js and image file are situated at the root folder, that is where the application folder is situated. And my other files which contains html, php, js code are situated in view folder . My controller is like that:
<?php
class Saffron extends CI_Controller
{
function index()
{
$this->load->view('header');
$this->load->view('index');
$this->load->view('footer');
}
function book_table()
{
$this->load->view('book_table');
}
}
?>
I am trying to navigate to my 'book_table.php' page from my home page. Now see my nevigation.php page from where I am navigating my webpages (just showing the basic header part and anchor tags):
<!DOCTYPE html>
<html lang="en">
<head>
<title>Home</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" media="screen" href="css/reset.css">
<link rel="stylesheet" type="text/css" media="screen" href="css/style.css">
<link rel="stylesheet" type="text/css" media="screen" href="css/slider.css">
<link rel="stylesheet" type="text/css" media="screen" href="css/book.css">
<!--<link href='http://fonts.googleapis.com/css?
family=Great+Vibes' rel='stylesheet' type='text/css'>-->
<script src="js/jquery-1.7.min.js"></script>
<script src="js/jquery.easing.1.3.js"></script>
<script src="js/tms-0.4.1.js"></script>
<script src="js/vpb_script.js"></script>
<script src="js/pop.js"></script>
<!--start popup window ref-->
<link href="css/colorbox.css" rel="stylesheet" type="text/css" media="all" />
<script src="js/jquery_002.js"></script>
<script>
$(document).ready(function(){
$(".image_show").colorbox({rel:'image_show', transition:"fade"});
});
</script>
<!--end popup window ref-->
<script>
$(document).ready(function(){
$('.slider')._TMS({
show:0,
pauseOnHover:true,
prevBu:false,
nextBu:false,
playBu:false,
duration:700,
preset:'fade',
pagination:true,
pagNums:false,
slideshow:8000,
numStatus:false,
banners:false,
waitBannerAnimation:false,
progressBar:false
})
});
</script>
<style type='text/css'>
/*This will work for chrome */
#vpb_general_button{
padding:5px 2px 4px 2px;
}
/*This will work for firefox*/
#-moz-document url-prefix() {
#vpb_general_button{
padding:5px 2px 6px 2px;
}
}
</style>
<!--[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="nav_b">
<nav>
<ul class="menu">
<li ><a href="index.html">
Online Order
</a>
</li>
<li>
<a href="<?php echo base_url(); ?>
index.php/saffron/book_table">Book Table
</a>
</li>
<li><a href="#">
Gallery
</a>
</li>
<li>
<a href="#">
About Us
</a>
</li>
<li>
<a href="#">
Awards
</a>
</li>
<li>
<a href="#">
Contact Us
</a>
</li>
</ul>
<div class="clear"></div>
</nav>
</div>
</body>
Now the problem is that I can navigate my Book table page but without the design. It's loading just like a basic html page, I can't understand why it's happening, because it doesn't find the css, js and images, isn't it? But my home page finds all and is fine, then why not the page(Book table) i am nevigating not finding the css,js and images?
In this scenario make use of base_url();. In application/config/config.php specify $config['base_url'] = 'http://www.yoursite.com';
Then in view change the link href and script src
<link rel="stylesheet" type="text/css" media="screen" href="<?php echo(base_url());?>css/reset.css">
<script src="<?php echo(base_url());?>js/jquery-1.7.min.js"></script>
Related
I have a basic webpage made up of a few PHP pages and a few CSS stylesheets. One of these stylesheets is style_common.css which is used by all pages on the website to provide a constant theme. I am having a bit of trouble with this file. I currently have only 2 PHP pages which reference this common CSS file.
The home page (index.php) references the CSS file fine, and the stylesheet styles it as you would expect. I copied the entire contents of index.php and pasted it into a second PHP file, then changed a few minor details such as the heading caption. This new page however, doesn't link to the CSS stylesheet.
My code is below:
style_common.css:
body {
background-color: #32BEED;
}
.header {
text-align: center;
padding: 0px;
}
index.php:
<!DOCTYPE HTML>
<html>
<head>
<title>324 SQN Canteen Manager</title>
<link type="text/css" rel="stylesheet" href="style_index.css"/>
<link type="text/css" rel="stylesheet" href="style_common.css"/>
</head>
<body>
<div class="header">
<img src="images/logo.png" class="aafclogo">
<h3> Canteen Manager</h3>
<h6>Designed by Me</h6>
</div>
<div class="buttonContainer">
<a href="addstock.php"><div class="button">
<p>Add Stock</p>
</div></a>
<a href="sellitems.php"><div class="button">
<p>Sell Items</p>
</div></a>
<a href="recordstocktake.php"><div class="button">
<p>Record Stocktake</p>
</div></a>
</div>
The second page which I copied from index.php and changed a few minor fields:
<!DOCTYPE HTML>
<html>
<head>
<title>324 SQN Canteen Manager</title>
<link type="text/css" rel="stylesheet" href="style_index.css"/>
<link type="text/css" rel="stylesheet" href="style_addstock.css"/>
</head>
<body>
<div class="header">
<img src="images/aafclogo.png" class="aafclogo">
<h3>Add Stock</h3>
</div>
<div class="buttonContainer">
<a href="index.php"><div class="button">
<p>Home</p>
</div></a>
</div>
Just to give you an example, the background colour of the second page is white, not the colour specified in the CSS file.
Where am I going wrong? Thanks.
You are having the problem because you never linked
style_common.css
to the second page. Instead you have
<link type="text/css" rel="stylesheet" href="style_index.css"/>
<link type="text/css" rel="stylesheet" href="style_addstock.css"/>
FIX:
add
<link type="text/css" rel="stylesheet" href="style_common.css"/>
to the second page.
1.Image of nivo slider display in my template . But when I use it into codeIgniter then it can not display.
2.Others content of template shows but only image does not show .
3.With firebug I saw when nivoslider div act then it show image tag where visibility:hidden and background show url of image not found.
I am newbie . Please help me.
Master page :
This is code:
<title>This is Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="<?php echo base_url();?>css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="<?php echo base_url();?>css/bootstrap-theme.min.css" rel="stylesheet" media="screen">
<!-- Amazing Mobile Menu CSS -->
<link href="<?php echo base_url();?>css/jquery.fs.naver.css" rel="stylesheet" type="text/css" />
<!-- News Tickr CSS -->
<link href="<?php echo base_url();?>css/ticker-style.css" rel="stylesheet" type="text/css" />
<!-- Bebas Webfont -->
<link href="<?php echo base_url();?>fonts/stylesheet.css" rel="stylesheet" media="screen">
<!-- Nivo Slider CSS -->
<link rel="stylesheet" href="<?php echo base_url();?>css/themes/default/default.css" type="text/css" media="screen" />
<link rel="stylesheet" href="<?php echo base_url();?>css/nivo-slider.css" type="text/css" media="screen" />
<!-- Main CSS -->
<link href="<?php echo base_url();?>css/style.css" rel="stylesheet" media="screen">
<!-- Responsive Framework -->
<link href="<?php echo base_url();?>css/responsive.css" rel="stylesheet" media="screen">
**html code for nivoslider:**
<div id="slider" class="nivoSlider">
<img src="<?php echo base_url();?>img/toystory.jpg" alt="" />
<img src="<?php echo base_url();?>img/up.jpg" alt="" />
<img src="<?php echo base_url();?>img/walle.jpg" alt="" />
<img src="<?php echo base_url();?>img/nemo.jpg" title="#htmlcaption" alt="" />
</div>
''''''''''''''''''''''''''''
''''''''''''''''''''''''''' **others code here**![enter image description here][1]
this code for script:
<script src="http://code.jquery.com/jquery-1.9.0.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="<?php echo base_url();?>js/jquery.nivo.slider.pack.js"></script>
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider({
controlNav: false
});
});
</script>
<script src="<?php echo base_url();?>js/jquery.ticker.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$('#js-news').ticker();
});
</script>
<script src="<?php echo base_url();?>js/jquery.fs.naver.min.js"></script>
<script type="text/javascript">
$("nav").naver({
animated: true
});
</script>
<script src="<?php echo base_url();?>js/bootstrap.min.js"></script>
[1]: http://i.stack.imgur.com/JsaIJ.png
Change
<?php echo base_url();?>img/toystory.jpg
into
<?php echo base_url();?>/img/toystory.jpg
(note the slash).
Or even better: remove all <?php echo base_url();?> and add in your head:
<base href="/" /> or <base href="<?php echo base_url();?>/" />
I am a little bit new to yii. I am using the following code to create the main template:
<html xmlns="http://www.w3.org/1999/xhtml">
<title>Schedule an appointment with My business</title>
<link href='https://fonts.googleapis.com/css?family=Signika' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="<?php echo Yii::app()->request->baseUrl; ?>/css/bookpage/style.css" type="text/css">
<link rel="stylesheet" media="all" type="text/css" href="<?php echo Yii::app()->request->baseUrl; ?>/css/modal-form-css/jquery-ui.css" />
<link rel="stylesheet" href="<?php echo Yii::app()->request->baseUrl; ?>/css/bookpage/appointpress.css" type="text/css">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="<?php echo Yii::app()->request->baseUrl; ?>/css/datepickercss/jquery.ui.datepicker.css" type="text/css">
<link rel="stylesheet" href="<?php echo Yii::app()->request->baseUrl; ?>/css/datepickercss/jquery.ui.theme.css" type="text/css">
<link rel="stylesheet" href="<?php echo Yii::app()->request->baseUrl; ?>/css/datepickercss/jquery-ui.css" type="text/css">
<!--<script type="text/javascript" src="//sslstatic.wix.com/services/js-sdk/1.19.0/js/Wix.js"></script> -->
<div class="header" style="height:60px;">
<div id="inner_header" style="padding-top:5px;">
<span style="float:right;color:rgb(68, 68, 68); margin-top:-10px;">Appointpress | Powerful Online Scheduling</span>
</div>
</div>
<body style="background-color:FFFFFF; font-family:Signika">
<div class="container-fluid">
<?php echo $content; ?>
</div>
<script src="<?php echo Yii::app()->request->baseUrl; ?>/css/appcal/jquery-1.9.1.js"></script>
<script src="<?php echo Yii::app()->request->baseUrl; ?>/css/appcal/jquery-ui-1.10.2.custom.js"></script>
<!--date validation-->
<script type="text/javascript" src="<?php echo Yii::app()->request->baseUrl; ?>/js/date.js" /></script>
</body>
</html>
But in console I am getting some CDATA added in the last of the file when I see it into console.
<script type="text/javascript" src="/customers/js/date.js" /></script>
<script type="text/javascript">
/*<![CDATA[*/
jQuery(function($) {
jQuery('a[rel="tooltip"]').tooltip();
jQuery('a[rel="popover"]').popover();
});
/*]]>*/
</script>
</body>
thats not a problem in Firefox or Google chrome. but is problematic in IE. I am not able to figure out that from where it is coming out and how to remove this ?
Please guys help in out of this problem ?
Thanks
This is automatically created by Yii to prevent misinterpretation by old browsers, XML-Files or non JavaScript aware browsers.
This should not cause any problems at all.
Can you post a error message?
Furthermore when using Yii, you should use these "Yii-methods" to include JavaScript:
<?php
$baseUrl = Yii::app()->baseUrl;
Yii::app()->getClientScript()->registerScriptFile($baseUrl.'/js/someJs.js');
?>
Also check the Yii-Docu on JS: http://www.yiiframework.com/wiki/394/javascript-and-ajax-with-yii/#hh6
i have used kendoui grid in my codeigniter web application.
The grid is showingup, but there no data loaded in that.
Here is the details of what i have done.
i have used the query and did echoed it in file in json encode
The output of echo is.
{"data":[{"Username":"admin","FirstName":"System","MiddleNames":"Default","LastName":"Administrator","City":"Sakhakot","Email":"kifayat#zorkif.com"},{"Username":"guest","FirstName":"System","MiddleNames":"Default","LastName":"Guest","City":"Peshawar","Email":"kifayat#zorkif.com"}]}
the location of this data file in which i have done the above echo. is
http://localhost:12/projects/zorkif_nextgen/user_management/manage_users/list_view/
here is my view file in which i want to show the grid.
<?php
/**
* Created by JetBrains PhpStorm.
* User: Kill3rCoder-Lapi
* Date: 3/21/13
* Time: 10:58 AM
* To change this template use File | Settings | File Templates.
*/
?>
<div id="grid"></div>
<script>
$(function(){
$("#grid").kendoGrid({
dataSource:{
read: {
read: "<?php echo base_url() ?>/index.php/user_management/manage_users/list_view/"
},
schema:{
data: "data"
}
},
columns: [
{ field: "Username",
title:"Username"
},
{ field: "FirstName",
title:"First Name"
},
{field:"MiddleNames"},
{field:"LastName"},
{field:"City"},
{field:"Email"}
]
});
});
</script>
This is my Head Section for of my application.
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta charset="utf-8">
<title>Zorkif Business One Next Generation</title>
<link href="<?php echo base_url('kendo_ui/styles/kendo.common.min.css'); ?>" rel="stylesheet">
<link href="<?php echo base_url('kendo_ui/styles/kendo.default.min.css'); ?>" rel="stylesheet">
<script src="<?php echo base_url('kendo_ui/js/kendo.web.min.js'); ?>"></script>
<script src="<?php echo base_url('kendo_ui/js/kendo.grid.min.js'); ?>"></script>
<link href="<?php echo base_url('styles/zorkif_fluid_main.css'); ?>" rel="stylesheet" type="text/css">
<!-- Designed By Zorkif.com Team -->
<link href="<?php echo base_url('styles/messages.css'); ?>" rel="stylesheet" type="text/css">
<!-- The main message boxes appearing on the top of the page -->
<link href="<?php echo base_url('styles/header.css'); ?>" rel="stylesheet" type="text/css">
<!-- To style the header of the page -->
<link href="<?php echo base_url('styles/tab_bar.css'); ?>" rel="stylesheet" type="text/css">
<!-- To style the Tabs Menu and the Title Section of the page -->
<link href="<?php echo base_url('styles/action_buttons.css'); ?>" rel="stylesheet" type="text/css">
<!-- To style the action buttons and search box of the page -->
<link href="<?php echo base_url('styles/footer.css'); ?>" rel="stylesheet" type="text/css">
<!-- To style the header of the page -->
<link href="<?php echo base_url('styles/zorkif_slider.css'); ?>" rel="stylesheet" type="text/css">
<!-- To style the header of the page -->
<link href="<?php echo base_url('styles/login_form.css'); ?>" rel="stylesheet" type="text/css">
<!-- To style the header of the page -->
<link href="<?php echo base_url('styles/forms.css'); ?>" rel="stylesheet" type="text/css">
<!-- To style the form elements in the page -->
<link href="<?php echo base_url('styles/tables.css'); ?>" rel="stylesheet" type="text/css">
<!-- To style the default tables and data view and data entry tables in page -->
<link href="<?php echo base_url('styles/tiles_cpanel.css'); ?>" rel="stylesheet" type="text/css">
<!-- To style the information Tiles tabs for the cpanel -->
<link href="<?php echo base_url('styles/page_columns.css'); ?>" rel="stylesheet" type="text/css">
<!-- The file is used to privide column based division of the page design -->
<script src="<?php echo base_url('scripts/jquery-1.8.3.min.js'); ?>" type="text/javascript"></script>
<!--<script type="text/javascript" src="<?php /*base_url('scripts/cssrefreshNONE.js'); */?>"></script><!-- for Develoment Perpose Only and must be removed in the production version -->
-->
<!-- Start of Accordion Menu -->
<link href="<?php echo base_url('scripts/horz_accordion_menu/accordion_menu.css'); ?>" rel="stylesheet" type="text/css">
<script src="<?php echo base_url('scripts/horz_accordion_menu/accordion_menu.js'); ?>" type="text/javascript"></script>
<!-- End of Accordion Menu -->
<!-- Nivo Image Slider -->
<link rel="stylesheet" href="<?php echo base_url('scripts/nivo-slider/themes/default/default.css'); ?>" type="text/css" media="screen" />
<link rel="stylesheet" href="<?php echo base_url('scripts/nivo-slider/nivo-slider.css'); ?>" type="text/css" media="screen" />
<!-- End of Image Slider -->
<link rel="shortcut icon" href="<?php echo base_url('favicon.ico'); ?>" />
<!-- Kendo UI Start -->
<!-- Kendo UI Web styles -->
<link href="<?php echo base_url('kendo_ui/styles/kendo.common.min.css'); ?>" type="text/css" />
<link href="<?php echo base_url('kendo_ui/styles/kendo.default.min.css'); ?>" type="text/css" />
<!-- Kendo UI Web scripts -->
<script src="<?php echo base_url('kendo_ui/js/jquery.min.js'); ?>" type="text/javascript"></script>
<script src="<?php echo base_url('kendo_ui/js/kendo.web.min.js'); ?>" type="text/javascript"></script>
</head>
So now i cant figure out where is it i am stuck???
anyone with Kendoui expertise??
You wrote:
read: {
read: ...
}
when it should be:
transport: {
read: ...
}
By the way, did you realize that are including KendoUI twice? also, the first time that you include it you include Kendo not having include jQuery before. I don't think that that will work
I basically use php variables to store the value of the title and the body's ID.
This last one is a technique to have my button (pressed) in the navigation according to which section of the page the user is (in this case the user will know he is currently at "home").
Beginning of my index.php:
<?php
$title = "New Project";
$body = "home";
include("common/header.php");
?>
<div id="content">
<div class="container">
<div id="tagline">
Beginning of my header.php
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>
<title><?php echo $title; ?></title>
<link rel="stylesheet" type="text/css" href="styles/slimbox2.css" />
<link rel="stylesheet" type="text/css" href="styles/global.css" />
<link rel="stylesheet" type="text/css" href="styles/home.css" />
<link rel="stylesheet" type="text/css" href="styles/contact.css" />
<script type="text/javascript" src="scripts/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="scripts/jquery.corner.js"></script>
<script type="text/javascript" src="scripts/jquery.validate.js"></script>
<script type="text/javascript" src="scripts/slimbox2.js"></script>
<script type="text/javascript" src="scripts/custom.js"></script>
</head>
</head>
<body id="<?php echo $body; ?>">
<div id="header">
<div class="container">
<div id="topbar">
<h1>wider design</h1>
<ul id="lang">
<li>English</li>
<li>Español</li>
<li>中文(繁體)</li>
<li>中文(简体)</li>
</ul>
<ul id="nav">
<li class="home">home</li>
<li class="products">products</li>
<li class="about">about</li>
<li class="contact">contact</li>
</ul>
To let the user know in which section he/she is:
#home li.home a, #products li.products a, #contact li.contact {
color: #999;
}
is there a simpler way of doing this?
Am I using unnecessary those PHP variables?
Yes, what you're doing is fine. I do something similar with a PageTemplate class. In addition to setting the title and navigation, it allows navigation links to appear based on user authentication, allows javascript and css to be added to the head section, etc.
What you're doing is very common. There are a million ways to do it, but they'll all require setting some variables.
janoChen,
I use the following method:
// get the url
$url= $_SERVER['PHP_SELF'];
// add a class on the menu item
<ul id="lang">
<li><a href="index.php" <?php if (strpos($url, "index.php")) { echo " class='active'"; } ?>>English</a></li>
//with css I set a style for the class active
li a.active {
color: #990000;
}
But you method also works.
Or else use an MVC framework like CakePHP
This works, but you should consider using a template engine such as Smarty instead.