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>
Related
I have a default blade file that yields other contents this is where im calling the link to style sheet and javascript i downloaded bootstrap 3.3.5 and created a link to it here is my default blade
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="bootstrap335/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/plug- ins/1.10.7/integration/bootstrap/3/dataTables.bo‌​otstrap.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"> </script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>
</head>
<body>
<div class="container">
#yield('content')
</div>
</body>
</html>
The bootstrap is working properly in my views except one. i don't know the problem because it works fine on the others and it is extends the default blade file
I am probably missing something very simple but, when I link my style sheet I get:
<link media="all" type="text/css" rel="stylesheet" href="http://laravel.dev:8000/public/css/masterCss.css">
showing on the webpage rather then linking to my css file.
My Html looks like:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>The Nub Life</title>
{{ Html::style('/public/css/masterCss.css') }}
</head>
<body>
#yield('content')
</body>
</html>
Why is this happening and how can I fix it?
the stylesheet href url, should not contain the word public. this is how you can generate url for your css asset files
<link media="all" type="text/css" rel="stylesheet" href="{{ URL::asset('css/masterCss.css') }}">
Suppose you have a .css file in your public/your_project_name/css/style.css
Simply write
<link href="{{ URL::asset('your_project_name/css/style.css') }}" rel="stylesheet">
I am very new in Codeigniter...i have some basic ideas..but not sufficient.lets talk about the problem....
I have a static website..which will be dynamic soon.Now this static website contains css,css3 in a css forlder, javascript in javascript folder,image in images folder.Now i am wanting to set this static website into codeigniter.I copy paste the whole codes including index.php and other pages and the folders(css,javascript.images)into the view folder of codeigniter.for all of your kind information my index.php page is just like that...
<!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 href='http://fonts.googleapis.com/css?family=Great+Vibes'
rel='stylesheet' type='text/css'>-->
<script src="<?= base_url() ?>path/images/js/jquery-1.7.min.js"></script>
<script src="<?= base_url() ?>path/images/js/jquery.easing.1.3.js"></script>
<script src="<?= base_url() ?>path/images/js/tms-0.4.1.js"></script>
<script src="<?= base_url() ?>path/images/js/vpb_script.js"></script>
<script src="<?= base_url() ?>path/images/js/pop.js"></script>
<!--start popup window ref-->
<link href="css/colorbox.css" rel="stylesheet" type="text/css" media="all" />
<script src="<?= base_url() ?>path/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="bg-top">-->
<div class="bgr">
<!--==============================Wrapper=================================-->
<div class="wrapper">
<?php
include_once('header.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');
?>
and my conroller is like that...
<?php
class Site extends CI_Controller
{
function home()
{
$this->load->view('index');
}
}
?>
the problem is that my webpage is loading but without the design,may b its not finding the javascript or css
i know i am making a mistake here..bur i can't fix it out,please help me to fix it out..
usually we put all files like that into an "assets" folder in the application root, and then make sure to use an Asset_Helper to point to those files. This is what CodeIgniter suggests
The folders (css, javascript, images) should NOT be pasted into the views folder, but in the folder where your Code Igniter's index.php is. (Usually, the parent folder of the application folder, i.e., your site public root.)
You can add <?= base_url() ?> to all your css link.
<link rel="stylesheet" type="text/css" media="screen"
href="<?= base_url() ?>path/to/css/reset.css">
There is a more comprehensive answer here. You may want to consider permissions issues that could be going on as a result of placing your css dir within the application/views dir.
Create an assets dir outside the application dir and use the URL helper by loading it into your controller like this.
This is a test page. There is a button that on click should load an entire external page extern2.php into the content div. Extern2.php works in both Safari and Firefox, however index.php only works in Safari.
The main page:
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>jQuery Ajax Test</title>
<script type="text/javascript" src="jquery_1.6.1.js"></script>
<script type="text/javascript">
function foo() {
$('#content').load('extern2.php', function() {
alert('Load was performed.');
});
}
</script>
<meta name="robots" content="index, follow, noarchive" />
<link rel="stylesheet" href="style.css" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
</head>
<body>
<form action="<?php echo htmlentities($_SERVER['PHP_SELF']); ?>" method="post">
<input type="submit" name="formSubmit" value="Submit" />
</form>
<?php
if(isset($_POST['formSubmit']))
{
?>
<script type="text/javascript">
$(document).ready(function() {
$('#content').load('extern2.php');
});
</script>
<?
}
?>
<div id="content">Initial content in test.html</div>
</body>
</html>
The external page:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
<meta name="robots" content="index, follow, noarchive" />
<link rel="stylesheet" href="style.css" type="text/css" />
<!-- This includes the ImageFlow CSS and JavaScript -->
<link rel="stylesheet" href="imageflow.packed.css" type="text/css" />
<script type="text/javascript" src="imageflow.packed.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
</head>
<body>
<?php
// Connecting to database
$con = mysql_connect('CONNECT INFO HERE');
if (!$con)
{
die('Could not connect: ' . mysql_error());
}
mysql_select_db("CONNECT INFO HERE", $con);
$userID=2;
$getPage="SELECT * FROM pages,thumbnails WHERE thumbnails.thumbnailID=pages.thumbnailID AND pages.userID=".$userID." AND pages.projectID='8' LIMIT 3";
$pageResult = mysql_query($getPage) or die(" ". mysql_error());
?>
<!-- This is all the XHTML ImageFlow needs -->
<div id="myImageFlow" class="imageflow">
<? while($line = mysql_fetch_array($pageResult)) {
$thumb = $line['fileName'];
$title = $line['title'];
$link = $line['url'];
echo "<img src='../../thumbnails/small/".$thumb."' longdesc='".$link."' alt='".$title."' />";
}
?>
</div>
<?
mysql_close($con);
?>
</body>
</html>
What does the error console (CTRL-SHIFT-J) say? Also does Firebug help at all?
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.