So I have this view1.php where I want to pass different values from different links to view2.php.
I manage to pass and get the value, but the css I put in my layout.php just won't work for view2.php.
I don't know where I'm doing it wrong.
Are there another way to pass different values other than this?
view1.php
#extends('layouts.layout')
#section('content')
<div>
OP 6000
OP 10000
OP 20000
</div>
#endsection
web.php
Route::get('/pass/{id}','User\MyController#postID');
MyController.php
public function postID($id) {
return view('user.view2', [
'id' => $id
]);
}
view2.php
#extends('layouts.layout')
#section('content')
<div>
{{$id}}
</div>
#endsection
layout.php
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</title>
<link rel="stylesheet" type="text/css" href="css/materialize.css" media="screen,projection"/>
<link rel="stylesheet" href="css/bootstrap/bootstrap.css">
<link rel="stylesheet" href="css/user.css">
<script type="text/javascript" src="js/main.js"></script>
</head>
<body>
<nav> </nav>
<main class="">
#yield('content')
</main>
<footer> </footer>
#yield('alert')
</body>
<script type="text/javascript" src="js/materialize.min.js"></script>
</html>
Seems the css is not loading in view2.php. You need to use baseurl to load css.
Example : <link rel="stylesheet" href="{{URL::asset('css/user.css')}}">
This issue occurs because when you redirect another view your CSS not load properly.
My advice to you is using the assets method.
<link rel="stylesheet" type="text/css" href="{{ asset('css/materialize.css') }}" media="screen,projection"/>
<link rel="stylesheet" href="{{ asset('css/bootstrap/bootstrap.css') }}">
<link rel="stylesheet" href="{{ asset('css/user.css') }}">
Just because the URL of your view2 are http://something.com/pass/some_id and you are linking stylesheets by css/some_css.css so that, it is searching in the current directory i.e. pass so that, the URLs of the stylesheets are becoming like http://something.com/pass/css/some_css.css. That's an issue.
If you will use /css/some_cs.css, it will try to locate the files from the home directory i.e. the / directory, so the URL will become http://something.com/css/some_css.css and everything will work perfectly.
else, you should use the helper provided by Laravel
{{asset('css/some_css.css')}}
It will generate URL, where the files are located without fail.
Related
I'm new to laravel. I use master.blade as the main layout of my website. Just wondering if there is any way to add an extra word with CSS links written inside master.blade from the child class.
For example, below is master.blade inside the layouts folder of views.
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<title>#yield('title')</title>
#section('meta_tags')
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="format-detection" content="telephone=no">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
#show
<!-- CSS Style -->
#section('styles')
<link rel="icon" type="image/png" href="assets/images/favicon.png"><!-- fonts -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400,400i,500,500i,700,700i"><!-- css -->
<link rel="stylesheet" href="assets/vendor/bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="assets/vendor/owl-carousel/assets/owl.carousel.min.css">
<link rel="stylesheet" href="assets/vendor/photoswipe/photoswipe.css">
<link rel="stylesheet" href="assets/vendor/photoswipe/default-skin/default-skin.css">
<link rel="stylesheet" href="assets/vendor/select2/css/select2.min.css">
<link rel="stylesheet" href="assets/css/style.css">
<link rel="stylesheet" href="assets/css/style.header-spaceship-variant-one.css" media="(min-width: 1200px)">
<link rel="stylesheet" href="assets/css/style.mobile-header-variant-one.css" media="(max-width: 1199px)">
<!-- font - fontawesome -->
<link rel="stylesheet" href="assets/vendor/fontawesome/css/all.min.css">
#show
</head>
<body>
<div class="site">
{{-- ------------------ H E A D E R ------------------ --}}
#section('header')
#include('includes.header')
#show
{{-- ------------------ C O N T E N T ------------------ --}}
#section('content')
<div class="container-fluid">
#include('includes.message')
#yield('content')
</div>
#show
{{-- ------------------ F O O T E R ------------------ --}}
#section('footer')
#include('includes.footer')
#show
</div>
</body>
</html>
Below is the class in which CSS is loading perfectly fine because it is inside the UI folder of the view and the links are
welcome.blade.php
#extends('layouts.master')
#section('title', 'Saleem Motors')
#section('content')
// Some content
#endsection
But when the blade file is inside the subfolder of the ui folder, it is not loading. I have to copy all the CSS links and paste them into each blade file manually and add ../ to make it CSS files work there. i.e. I have to change
<link rel="stylesheet" href="assets/css/style.css">
to this in each subfolder blade file
<link rel="stylesheet" href="../assets/css/style.css">
Now my question is,
Is there any way to automatically add ../ or this ../../ for subfolder blade files to get CSS links added in master.blade layout file to make it work as desired???
I'm bad at explaining things, I hope you get the point.
I'm building a website using Laravel 8 where i have one component called app.blade.php.
This component is the body of the project and includes the navbar.
The problem that i'm facing is that this compenent is correctly showing in every view, while in a view called article.blade.php it is showing but without showing the logo image, only the ALT text.
I have also tried to use other images in the view but no one of these images is showing, while on the other views everything is correct.
The images at the moment are in the public folder, later i will move everything to the storage.
Here's my component
<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</title>
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}" defer></script>
<!-- Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#300;400;500&family=Readex+Pro:wght#200;300;400;500;600;700&display=swap" rel="stylesheet">
{{-- Icone --}}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.0/css/all.min.css" integrity="sha512-10/jx2EXwxxWqCLX/hHth/vu2KY3jCF70dCQB8TSgNjbCVAC/8vai53GfMDrO2Emgwccf2pJqxct9ehpzG+MTw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Glide.js/3.2.0/css/glide.core.css" integrity="sha512-ShLuspGzRsTiMlQ2Rg0e+atjy/gVQr3oYKnKmQkHQ6sxcnDAEOtOaPz2rRmeygV2CtnwUawDyHkGgH4zUbP3Hw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
<div id="app">
<x-navbar/>
<main>
{{$slot}}
</main>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Glide.js/3.2.0/glide.js" integrity="sha512-vZGsugWaSqQZuW8N5Z3ild7Tk8NqiZjKffeIQGpnnIs6g7HVZaFZjlLKPIw1qDsrQ5KAxAGfBinglQWu6i/8DA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</body>
</html>
And here's how i'm calling it :
<x-app></x-app>
Does anybody has any idea on what it can depends? For me sound strange that it's correctly working on every other view.
Thank you.
In the code that displays the image, you are probably using a path that is relative to the current route.
The image needs to be loaded with an absolute path (starts with /) or by using the asset() helper.
As you don't show the offending code, its hard to give specific advice
I created a new Laravel project and downloaded the bootstrap CSS and JS files and put the CSS file in resources/css and the JS files of bootstrap and popper and jQuery in resources/js and in the welcome.blade.php I linked the CSS file and the JS files like this
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Osama The Coder</title>
<link rel="stylesheet" href="{{ asset('css/bootstrap.min.css') }}">
<link rel="stylesheet" href="{{ asset('css/app.css') }}">
</head>
<body>
<section class="text-danger">
Hello World
</section>
<script src="{{ asset('js/jquery-3.6.0.min.js') }}"></script>
<script src="{{ asset('js/popper.min.js') }}"></script>
<script src="{{ asset('js/bootstrap.min.js') }}"></script>
</body>
</html>
when I opened the project it was just the text without any styles or Bootstrap font-family
even when I linked the app.css and applied color red to the section element I doesn't see any changes
Please follow the following steps
Put all your static assets in public directory
Organize your assets in different folders e.g public/js for js related files and public/css for css related files
Then access your files using the helper method like below
<link rel="stylesheet" href="{{ asset('css/bootstrap.min.css') }}">
/* or js files */
<script src="{{ asset('js/jquery-3.6.0.min.js') }}"></script>
Situation:
I'm creating a web application using Laravel, but for the moment CSS that i created aren't loading.
Folder Structure
Laravel Version
Laravel Framework version 5.2.36
master.blade.php code
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>#yield('title')</title>
<link rel ="stylesheet" href= "{{ URL::secure('src/css/main.css') }}">
#yield('styles')
</head>
<body>
#include('includes.header')
<div class="main">
#yield('content')
</div>
</body>
</html>
Write like this:
<link rel ="stylesheet" href= "{{ asset('src/css/main.css') }}">
Another alternative:-
<link rel="stylesheet" href="{{ url('/') }}./src/css/main.css" type="text/css"/>
I have a php file which is in the name of index.php. In that I have included another page like "xyz.php".
I have included "xyz.php" in index.php using #include('xyz').
When I am trying to include external css and js in xyz using
{{ URL::asset('assets/js/jsfile.js') }}
{{ URL::asset('assets/css/cssfile.css') }}
It is not working. In source it displays as it is.
How can I solve this issue.
index.blade.php
<!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">
<title>My Laravel page</title>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic' rel='stylesheet' type='text/css'>
<link href="{{ URL::asset('assets/netbramha/css/bootstrap.min.css') }}" rel="stylesheet">
<script src="{{ URL::asset('assets/netbramha/js/modernizr.custom.js') }}"></script>
</head>
<body>
#include('home-search')
</body>
</html>
home-search.blade.php
<div class="video-modal">
<img class="lazy-load" data-original="{{ URL::asset('/') }}/assets/netbramha/images/video-img.jpg" src="images/grey.gif" width="598" height="336" alt="" />
</div>
Maybe this will help
{{ URL::asset('/') }}/location of you css/scripts
cheers
You are using blade templating in the xyz.php file. It should be named xyz.blade.php
You have to use helper functions
include(public_path() . '/xyz.php')