Bootstrap 3.3.7 with codeigniter - php

I am trying to use bootstrap navigator bar but it doesn't work.
I have created a template folder which contain the CSS of the front page in the view.
My code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml: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> TTS</title>
<link rel="stylesheet" href="<?php echo base_url("asset/css/bootstrap.css"); ?>" />
<style type="text/css">
#img{
display:block;
position:relative;
left:0px;
float:left;
margin-left:10px;
}
#img2{
display:block;
position:relative;
right:0px;
float:right;
margin-right:10px;
}
#img3{
display:block;
position:relative;
left:0px;
float:left;
}
</style>
</head>
<body>
<script type="text/javascript" src="<?php echo base_url("asset/js/jquery.js"); ?>"></script>
<script type="text/javascript" src="<?php echo base_url("asset/js/bootstrap.js"); ?>"></script>
</body>
</html>
and the php file for the view is:
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">TTS</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li>Services</li>
<li>Contact</li>
</ul>
</div>
</nav>
the controller is:
<?php defined('BASEPATH') OR exit('No direct script access allowed');
class firstpage extends CI_Controller {
public function __construct() {
parent::__construct();
$this->load->helper('url');
$this->load->helper('html');
$this->load->helper('form');
}
public function index(){
$this->load->view('templates/front_template/front');
$this->load->view('front_page/firstpage');
}
} ?>
Can I get help in this.searched everywhere didn't get the right answer.

Check if it has ip in url in your firefox firebug or developer tools if so make sure you have set your base_url it is required
$config['base_url'] = 'http://localhost/projectname/';
And your missing the type="text/css"
And no need to close controllers with ?>

I'm not sure if this would help but try removing the echo from the this line
<link rel="stylesheet" href="<?php echo base_url("asset/css/bootstrap.css"); ?>" />
it should be like this
<link rel="stylesheet" href="<?php base_url("asset/css/bootstrap.css"); ?>" />

Related

problem with the path of the uploads folder to the host

I have an "uploads" folder that according to the database with php and mysql shows some videos, the problem is that in localhost it works, but when I insert the files in the file manager of the host (000webhost), the host cannot recognize the path "uploads", this is full code, the problem is in the video src at the end of the code.
<?php
require_once("config.php");
$result=' ';
$cerca=$_POST["cerca"];
$sql = "SELECT * FROM artisti WHERE nome like '%".$cerca."%'";
$result = $conn->query($sql);
if ($result->num_rows > 0)
{
//echo "<h1>Artisti trovato</h1>";
while ($row = $result->fetch_assoc()) {
$ID=$row["ID"];
$nome=$row["nome"];
$link=$row["link"];
$album=$row["album"];
//echo "<h2>ID: "."$ID"."</h2>";
//echo "nome: "."$nome"."<br>";
}
}
else {
echo "nessun artista trovato";
$conn->close();
exit;
}
?>
<!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.0">
<title>Utopia-Playlist</title>
<!--Reset css per ogni broswer-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css" integrity="sha512-NmLkDIU1C/C88wi324HBc+S2kLhi08PN5GDeUVVVC/BVt/9Izdsc9SVeVfA1UZbY3sHUlDSyRXhCzHfr6hmPPw==" crossorigin="anonymous" />
<!--Script scroll-->
<script src="https://unpkg.com/scrollreveal#4.0.0/dist/scrollreveal.min.js"></script>
<!--Icone-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" />
<!--Icona tab di google-->
<link rel="icon" href="Fulmine viola bianco.png">
<link rel="stylesheet" href="hero.css">
<link rel="stylesheet" href="nav.css">
<link rel="stylesheet" href="playlist1.css">
<style>
#import url('https://fonts.googleapis.com/css2?family=Overpass&display=swap');
</style>
</head>
<body>
<!--NavBar-->
<header class="he">
<h1 class="developers">Utopia Playlist</h1>
<nav>
<div class="listanav">
<li class="icon">Home</li>
<li>Playlist <i class="fas fa-caret-down"></i>
<ul class="submenu">
<li>Consigli</li>
<li>
Consigli-DV
</li>
<li> Top 50</li>
</ul>
</li>
<li>Contattaci</li>
</div>
</div>
</nav>
<button type="button" class="accedi">Accedi</button>
</header>
<!--Hero--> <!-- class="btn" -->
<div class="hero">
<div class="hero-cn scroll">
<p class="intro-text">ASCOLTA I NOSTRI CONSIGLI!</p>
<?php echo "<h1 class=grande-text>"."$nome"."</h1>"?>
<?php echo "<a class=btn href=$album>Scopri di piĆ¹</a>" ?>
</div>
<video autoplay muted loop class="vd">
<source src="uploads/<?php echo $link?>" type="video/mp4" >
</video>
</div>
maybe there are some that you should check again:
The $link variable hasn't gotten the value it got
Placement of folders is not the same right
Check the connection whether it is connected to the hosting database or not

How can I change title using php?

I have my index.php in which I am including the header. But the problem is that I want a different header title as I am including it in other pages well. I want it to change dynamically according to page like if its other page like shop then title should be Toys - Shop like this. I am new to PHP can anyone please help me with how to do it? Index.php:
<?php include'headernav.php';?>
<div class="header-outs" id="home">
<div class="header-bar">
<div class="info-top-grid">
<div class="info-contact-agile">
<ul>
<li>
<span class="fas fa-phone-volume"></span>
<p>+(000)123 4565 32</p>
</li>
<li>
<span class="fas fa-envelope"></span>
<p>info#example1.com</p>
</li>
<li>
</li>
</ul>
</div>
</div>
</div>
</div>
Headernav.php:
<!DOCTYPE html>
<html lang="zxx">
<head>
<title>Toys-Home</title>
<!--meta tags -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="" />
<link href="css/style.css" rel='stylesheet' type='text/css' media="all">
<!--//stylesheets-->
<link href="//fonts.googleapis.com/css?family=Sunflower:500,700" rel="stylesheet">
<link href="//fonts.googleapis.com/css?family=Open+Sans:400,600,700" rel="stylesheet">
</head>
<body>
You can do something like this:
index.php:
<?php
$pagename = 'Toys-Home';
include ('headernav.php');?>
<div class="header-outs" id="home">
<div class="header-bar">
<div class="info-top-grid">
<div class="info-contact-agile">
<ul>
<li>
<span class="fas fa-phone-volume"></span>
<p>+(000)123 4565 32</p>
</li>
<li>
<span class="fas fa-envelope"></span>
<p>info#example1.com</p>
</li>
<li>
</li>
</ul>
</div>
</div>
</div>
</div>
headernav.php
<!DOCTYPE html>
<html lang="zxx">
<head>
<title><?php print $pagename; ?></title>
<!--meta tags -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="" />
<link href="css/style.css" rel='stylesheet' type='text/css' media="all">
<!--//stylesheets-->
<link href="//fonts.googleapis.com/css?family=Sunflower:500,700" rel="stylesheet">
<link href="//fonts.googleapis.com/css?family=Open+Sans:400,600,700" rel="stylesheet">
</head>
<body>
You'd have to set the $pagename variable on each page if that's something you're looking for. Each page would have the title you've set in that variable.
#Loupeznik's accepted answer provides a solution. An alternative is to use functions in include files and call them from the main PHP. You will have to write a bit more code, but you will get more flexibility. E.g. you will be able to add different css or js files on different pages letter or use a single include file for both header and footer or other common PHP code.
The way to do this is to add a function called writeHeaderNav() or something similar and then call it from index.php with $pagename as an argument.
headernav.php
<?php
function writeHeaderNav($pagetitle){
echo"<!DOCTYPE html>
<html lang='zxx'>
<head>
<title>$pagetitle</title>
<!--meta tags -->
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<meta name='keywords' content='' />
<link href='css/style.css' rel='stylesheet' type='text/css' media='all'>
<!--//stylesheets-->
<link href='//fonts.googleapis.com/css?family=Sunflower:500,700' rel='stylesheet'>
<link href='//fonts.googleapis.com/css?family=Open+Sans:400,600,700' rel='stylesheet'>
</head>
<body>";
}
//you can have other PHP code here if needed
function writeFooter(){
//echo html for common footer
}
?>
index.php
<?php
$pagename = 'Toys-Home';
include ('headernav.php');
writeHeaderNav($pagename);
// or you can use writeHeaderNav('Toys-Home');
?>
<div class="header-outs" id="home">
<!--rest of code-->
You can put a variable like this in your Headernav.php file and have it defined before your include
< title> < ?php echo "$my_title"; ?>
This variable can be changed by the way you get it
from your url ($_GET)
from a sql query
from a session variable
...

when i normally run html bootstrap enabled code, it shows proper output but when i load it using codeigniter view it shows different output

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.

missing designs in a navigated page developed in codeigniter

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>

CSS stylesheets path not being detected by the server 404 not found error?

I have a Header File by the name header.php which goes like this :
It is inside a folder called includes so the path is includes/header.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html dir="ltr" lang="en-US" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>***</title>
<link rel='stylesheet' href='../_layout/scripts/jquery.fullcalendar/fullcalendar.css' type='text/css' media='screen' />
<link rel='stylesheet' href='../_layout/scripts/jquery.fullcalendar/fullcalendar.print.css' type='text/css' media='print' />
<!-- Styles -->
<link rel='stylesheet' href='style.css' type='text/css' media='all' />
<!--[if IE]>
<link rel='stylesheet' href='../_layout/IE.css' type='text/css' media='all' />
<![endif]-->
<!-- Fonts -->
<link href='http://fonts.googleapis.com/css?family=Droid+Sans:regular,bold|PT+Sans+Narrow:regular,bold|Droid+Serif:i&v1' rel='stylesheet' type='text/css' />
<script type='text/javascript' src='../../../ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min97e1.js?ver=1.7'></script>
<!-- WYSISYG Editor -->
<script type='text/javascript' src='../_layout/scripts/nicEdit/nicEdit.js'></script>
<!-- Forms Elemets -->
<script type='text/javascript' src='../_layout/scripts/jquery.uniform/jquery.uniform.min.js'></script>
<link rel='stylesheet' href='../_layout/scripts/jquery.uniform/uniform.default.css' type='text/css' media='screen' />
<!-- Scripts -->
<script type='text/javascript' src='../_layout/custom.js'></script>
</head>
<body>
<div id="layout">
<div id="header-wrapper">
<div id="header">
<div id="user-wrapper" class="fixed">
<div class="color-scheme">
</div>
<div class='user'>
<?php
if($_SESSION['user'] != 'NULL')
{
?>
<img src="../_content/user-img.png" alt="" />
<span>Welcome Admin <?PHP echo $_SESSION['user']; ?></span>
<span class="logout">Logout</span>
<?php
}
?>
</div>
</div>
<div id="launcher-wrapper" class="fixed"><img src="../_layout/images/NGBU Logo.png" width="68" height="81" alt="logo" style="margin-left:35px;" /> <img src="../_content/NGBU_logo.png" width="777" height="57" alt="logo" longdesc="http://index.php" style="margin-top: 25px; float: left; margin-left: 25px;"/></div>
</div>
</div>
I am calling this file at the beginning of my Index.php but for some reasons its not rendering from the hosted server although it is being rendered when i was testing it under localhost?
My index.php which is inside a folder admin goes like :
<?PHP
session_start();
ob_start();
$_SESSION['user'] = "NULL";
$_SESSION['password'] = "";
$_SESSION['error'] = 0;
include_once("../includes/header.php");
if(!$_SESSION['error'])
$_SESSION['error'] = "Please Login to Continue";
?>
<?PHP
if(isset($_REQUEST['check']))
{
if(!$_REQUEST['User'] == "")
{
if(!$_REQUEST['Password'] == "")
{
$_SESSION['user'] = $_REQUEST['User'];
$_SESSION['password'] = $_REQUEST['Password'];
unset($_SESSION['error']);
header('Location: checklogin.php');
}
else
{
$_SESSION['error'] = "<FONT color='#FF0000'>Both fields are required</FONT>";
}
}
else
{
$_SESSION['error'] = "<FONT color='#FF0000'>Both fields are required</FONT>";
}
}
?>
<DIV class="page fixed">
<DIV id="sidebar" style="height:400px; width:250px; margin-left:5px;"> </DIV>
<DIV id="content">
<?PHP
echo "<h1 style='margin-left:150px;' >".$_SESSION['error']."</h1>";
?>
<FORM action="index.php" method="post" name="loginfrm" class="form-elements-inputs" style="margin-left:150px;width:90px;">
<INPUT class="normal" type="text" name="User" value="User Name" /><BR />
<INPUT class="normal" type="password" name="Password" value="Password" /><BR />
<INPUT type="hidden" name="check" value="login" />
<INPUT type="submit" value="Login" class="button-orange" style="width:100px; margin:auto;" />
</FORM>
</DIV>
</DIV>
</div>
</BODY>
</HTML>
The style.css file is sitting right next to header.php in includes folder then why it is not being applied?
While checking through firebug in mozilla its showing me this output :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 2.0//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html lang="en-US" xmlns="http://www.w3.org/1999/xhtml" dir="ltr">
<head>
<title>***</title>
<link type="text/css" href="style.css" rel="stylesheet">
<html><head>
<title>404 Not Found</title>
</head><body>
<h1>Not Found</h1>
<p>The requested URL /style.css was not found on this server.</p>
<p>Additionally, a 404 Not Found
error was encountered while trying to use an ErrorDocument to handle the request.</p>
<hr>
<address>Apache Server at www.***.com Port 80</address>
</body></html>
</link>
<link media="screen" type="text/css" href="scripts/jquery.fullcalendar/fullcalendar.css" rel="stylesheet">
<link media="print" type="text/css" href="scripts/jquery.fullcalendar/fullcalendar.print.css" rel="stylesheet">
<link media="screen" type="text/css" href="scripts/jquery.uniform/uniform.default.css" rel="stylesheet">
<link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Droid+Sans:regular,bold|PT+Sans+Narrow:regular,bold|Droid+Serif:i&v1">
<script src="../../../ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min97e1.js?ver=1.7" type="text/javascript">
<script src="../_layout/scripts/nicEdit/nicEdit.js" type="text/javascript">
<script src="../_layout/scripts/jquery.uniform/jquery.uniform.min.js" type="text/javascript">
<script src="../_layout/custom.js" type="text/javascript">
</head>
<body>
</html>
Why there is a 404 not found error when the path is correct?
Please help
You're including ../include/header.php and style.css is there too, namely ../include/style.css. So, you must either use the same relative path or an absolute path to your css /include/style.css.
The link to your CSS file should be relative to the URL of the page you are viewing.
For example, if you view your page at example.com, you must reference the CSS file with example.com/includes/style.css.
Maybe it's better to test with header.php absolute path first.
Also path of your scripts and style sheets should be relative to index.php not header.
(Sorry for bad English)

Categories