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
Related
When I hit http://127.0.0.1:8000/welcome everything renders fine.
But with http://127.0.0.1:8000/hh/welcome the page looks like it has no CSS references or anything at all.
Any idea why it is like this and how to solve it?
Thanks a lot!
routes > web.php
Route::get('/hh/welcome', [BikeController::class, 'show']);
Route::get('welcome', [BikeController::class, 'show']);
app > Http > Controllers > BikeController.php
public function show(Bike $bike)
{
return view('bikes.show', [
'bike' => $bike
]);
}
resources > views > bikes > show.blade.php
<x-layout>
<h1>Hello World!</h1>
</x-layout>
resources > views > components > layout.blade.php
<!DOCTYPE html>
<html lang="de" dir="ltr">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>BM | Dashboard & Web App Template</title>
<link rel="apple-touch-icon" sizes="180x180" href="assets/img/favicons/apple-touch-icon.png" />
<link rel="icon" type="image/png" sizes="32x32" href="assets/img/favicons/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="assets/img/favicons/favicon-16x16.png" />
<link rel="shortcut icon" type="image/x-icon" href="assets/img/favicons/favicon.ico" />
<link rel="manifest" href="assets/img/favicons/manifest.json" />
<meta name="msapplication-TileImage" content="assets/img/favicons/mstile-150x150.png" />
<meta name="theme-color" content="#ffffff" />
<script src="assets/js/config.js"></script>
<script src="vendors/overlayscrollbars/OverlayScrollbars.min.js"></script>
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,500,600,700%7cPoppins:300,400,500,600,700,800,900&display=swap" rel="stylesheet" />
<link href="vendors/overlayscrollbars/OverlayScrollbars.min.css" rel="stylesheet" />
<link href="assets/css/theme-rtl.min.css" rel="stylesheet" id="style-rtl" />
<link href="assets/css/theme.min.css" rel="stylesheet" id="style-default" />
<link href="assets/css/user-rtl.min.css" rel="stylesheet" id="user-style-rtl" />
<link href="assets/css/user.min.css" rel="stylesheet" id="user-style-default" />
<script>
var isRTL = JSON.parse(localStorage.getItem("isRTL"));
if (isRTL) {
var linkDefault = document.getElementById("style-default");
var userLinkDefault = document.getElementById("user-style-default");
linkDefault.setAttribute("disabled", true);
userLinkDefault.setAttribute("disabled", true);
document.querySelector("html").setAttribute("dir", "rtl");
} else {
var linkRTL = document.getElementById("style-rtl");
var userLinkRTL = document.getElementById("user-style-rtl");
linkRTL.setAttribute("disabled", true);
userLinkRTL.setAttribute("disabled", true);
}
</script>
</head>
<body>
<main class="main" id="top">
<div class="container" data-layout="container">
<script>
var isFluid = JSON.parse(localStorage.getItem("isFluid"));
if (isFluid) {
var container = document.querySelector("[data-layout]");
container.classList.remove("container");
container.classList.add("container-fluid");
}
</script>
#include('_nav-vertical')
<div class="content">
#include('_nav-top')
{{ $slot }}
#include('_footer')
</div>
{{-- #include('_modal') --}}
</div>
</main>
<script src="vendors/popper/popper.min.js"></script>
<script src="vendors/bootstrap/bootstrap.min.js"></script>
<script src="vendors/anchorjs/anchor.min.js"></script>
<script src="vendors/is/is.min.js"></script>
<script src="vendors/echarts/echarts.min.js"></script>
<script src="vendors/fontawesome/all.min.js"></script>
<script src="vendors/lodash/lodash.min.js"></script>
<script src="https://polyfill.io/v3/polyfill.min.js?features=window.scroll"></script>
<script src="vendors/list.js/list.min.js"></script>
<script src="assets/js/theme.js"></script>
</body>
</html>
Because you are currently loading your CSS relative to your URL
Try the following:
<link href="{{asset('assets/css/example.css')}}" rel="stylesheet"/>
or take a look at: https://laravel.com/docs/9.x/helpers#method-asset
You are loading assets in the wrong way actually in your layout.blade.php made these modifications. Then it will work fine. Apply this to your all assets like Images, CSS, and JS files. Apply asset function with every asset like this in curly braces.
<link href="{{ asset('assets/css/theme-rtl.min.css') }}" rel="stylesheet" id="style-rtl" />
Apply this on all CSS also on JS like this
<script src="{{ asset('vendors/popper/popper.min.js') }}"></script>
Also make sure all files are aviable on disk.
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">
This code work before this. after i format my laptop, i cant use this code anymore. please help me to solve this. this is my final year project. Fatal error: Cannot redeclare class data in D:\xampp\htdocs\Test1\tedboy\include\home\header.php on line 11
?php include('db.php'); ?>
<?php session_start(); ?>
<?php //print_r($_SESSION['cart']); ?>
<?php date_default_timezone_set('Asia/Kuala_Lumpur'); ?>
<?php
$jim = new data();
$countproduct = $jim->countproduct();
$cat = $jim->getcategory();
class data {
function countproduct(){
$count = 0;
$cart = isset($_SESSION['cart']) ? $_SESSION['cart']:array();
foreach($cart as $row):
if($row['qty']!=0){
$count = $count + 1;
}
endforeach;
return $count;
}
function getcategory(){
$result = mysql_query("SELECT * FROM category");
return $result;
}
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<title>Tedboy Bakery</title>
<link rel="icon" href="images/home/Tedboy.png" type="image" />
<link href="css/bootstrap1.min.css" rel="stylesheet">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/font-awesome.min.css" rel="stylesheet">
<link href="css/main1.css" rel="stylesheet">
<link href="css/responsive1.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<script src="js/respond.min.js"></script>
<![endif]-->
</head><!--/head-->
<body>
<header id="header"><!--header-->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Tedboy Bakery</title>
<link rel="icon" href="images/home/damailers_logo.png" type="image" />
<link href="styles/style.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
<div id="container">
<header>
<nav>
<ul id="nav">
<li>Home</li>
<li>Menu</li>
<li>Cart <span class="badge"></span></li>
<li>Gallery</li>
<li><a href="contact.php" >Contact</a></li>
<li>About Us</li>
</ul>
</nav>
</header>
<div class="wrapper">
<div class="border"></div>
</div>
</body>
</html>
</header><!--/header-->
that's because you are using the class before defining it!
Move the Definition of the data class before this line:
$jim = new data();
First, you should declare your data class before using it.
class data { ...
$jim = new data();
Then, double check that your included files don't have the data class declaration already.
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.
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