I added a bootstrap template to laravel 5 Resources directory.
And added only the index.php to views in Resources.
The index.php file is pointing the files like :
<link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
And its not loading.
In my routes.php i am loading :
Route::get('/', function () {
return view('index');
});
As I can see in the code, ViewFinder does a case sensitive search for a template based on whatever you provide to the view() helper.
Pass Index to view() instead of index or change the template name from Index.php to index.php.
If your view renders correctly, but CSS file is not loaded, it means it's inaccessible to the browser. Files that are not returned via Laravel need to end up somewhere in /public folder so that web server can read them and return to the browser. You need to place them there manually or using some build toos (gulp, grunt, ...).
In your case, your bootstrap file must end up in public/bootstrap/css/ folder.
You could also fetch the bootstrap file from a CDN by using one of absolute URLs you can find here: http://www.bootstrapcdn.com/, e.g.:
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
Add bootstrap files inside the public folder. Suppose your bootstrap file inside the laravel\public\css then:
{!! Html::style('css/style.css') !!}
and jquery files laravel\public\js
{!! Html::script('js/jquery.js') !!}
Related
I'm currently trying to set up a project in Fat-Free-Framework 3.6 - but I dislike the idea of having to manually add all my basic routes to routes.ini, and I decided I wanted to try my hand at more dynamic routes.
For this, I've made 2 new GET routes. Here is what I have:
$f3->route('GET /#module','{#module}_controller->index');
$f3->route('GET /#module/#method','{#module}_controller->#method');
The first one is to load a controller and it's default method (Which I have made index in these examples).
The first route works great, if I navigate my browser to http://example.com/ex1, it will load controller ex1_controller and run the index method, and everything will run and display properly.
The second route however, does not work as expected. When trying to run the exact same method within the second route, I get no CSS. For example, if I now navigate to http://example.com/ex1/index, there is no CSS on the page - but when I inspect the page source, I see the CSS should be loaded in as <link rel="stylesheet" type="text/css" href="assets/css/uikit.min.css"> is in the page.
Upon further investigation, I followed the link to the CSS file in my source code which brought me to the incorrect link. During the 2nd route, for some reason it's not trying to load from the root. It's trying to load from the URL ./ex1/assets/css/uikit.min.css, but the CSS actually exists in ./assets/css/uikit.min.css
Structure:
index.php - Where routes are defined
| app
| controllers
Controller.php
ex1_controller.php
| models
ex1.php
| views
| ex1
index.htm
| assets
| css
uikit.min.css
| js
uikit.min.js
ex1_controller.php
<?php
class ex1_controller extends Controller {
function index() {
$example = new ex1($this->db);
$output = $example->returnOutput();
$this->f3->set('output', $output);
echo $this->template->render('ex1/index.htm');
}
}
The Controller.php file is run on every route, which is then extended by the controller for the module. This is where the main_header.htm file is loaded in, which contains the css/js links. This is how the links are defined in main_header.htm;
<link rel="stylesheet" type="text/css" href="assets/css/uikit.min.css">
<script src="assets/js/uikit.min.js"></script>
<script src="assets/js/uikit-icons.min.js"></script>
Why is F3 trying to load CSS/JavaScript from the wrong directory when using dynamic routes such as this, and how can I fix it?
The fix for this seems to be quite easy.
Simply add a slash to the beginning of the linked resource path.
<link rel="stylesheet" type="text/css" href="/assets/css/uikit.min.css">
<script src="/assets/js/uikit.min.js"></script>
<script src="/assets/js/uikit-icons.min.js"></script>
In the application I built I have a view called main (http://127.0.0.1:8000/main). Following is how I load the view file from Route file, web.php.
Route::resources(['/main' => 'pages\MainController']);
Above loads the 'main.blade.php' view controller from the index function of MainController.php file.
public function index() {
return view('pages\'main');
}
My problem is, I have an edit button in the view which the href value is set as following.
<a href="main/{{$data->id}}/edit" >Edit</a>
Click of the above will direct me to 'http://127.0.0.1:8000/main/1/edit' route
and this route will not load any styles and javascript files like it was loaded in 'http://127.0.0.1:8000/main' . What is the work around to retain the resource styles and js functionality ?
Following is one example I have linked my resource css in my main layout blade
<link href="vendors/font-awesome/css/font-awesome.min.css" rel="stylesheet
You need to include the resource URLs within url php function.
{{url('vendors/font-awesome/css/font-awesome.min.css')}}
So the complete code is.
<link href="{{url('vendors/font-awesome/css/font-awesome.min.css')}}" rel="stylesheet">
href="{{ URL :: asset ( ' your css path ') }}"
Make sure you css is in public directory
like the public folder given by laravel default i tried to create something like that for easy make up of my css, js, picture and so on. I tried configuring it like this. In my application/helpers/utility_helpers.php
<?php
function asset_url()
{
return base_url().'assets/';
}
?>
I have my assests folder along with application, system, user_guide etc.
i confugured the autoload function of application/config as :
$autoload['helper'] = array('url','utility');
when i hit any url in browser now, it says
An Error Was Encountered
Unable to load the requested file: helpers/utility_helper.php
how can i make it and can you explain me if i need to specify root for that helpers also.And if not can i simply access the assets like this:
<img src="assets/base_components/build/banner.png">
in my view
In fact the answer is very simple, you only need to put ../ before every file that is under assets folder, because the root of the codeigniter is in application folder, but how you can't put the assets folder there and for the best practices, let the structure of the project like below and apply this solution to the path of the files:
Website Folder structure
|---|application\
|-------(CodeIgniter application folders...)
|---|assets\
|-------css\
|-------images\
|-------js\
|-------robots.txt
|---|system
|-----(CodeIgniter system folder...)
|index.php
Path of the files
ex.:
CSS
<link href="../assets/css/bootstrap.min.css" rel="stylesheet">
<link href="../assets/css/plugins/font-awesome.css" rel="stylesheet">
IMAGES and others
<img src="../assets/images/build/banner.png">
JAVASCRIPT
<script src="../assets/js/jquery-2.1.4.js"></script>
<script src="../assets/js/plugins/jquery.scrollSpeed.js"></script>
Note.:
Always remember to applay the best practices to the code too (this will help for the performance of the the page too), like below:
<html>
<head>
meta tags
favicons
css files styles
</head>
<body>
page structure code
javascript files
</body>
</html>
Yo can do this instead:
<img src="<?= base_url('assets/base_components/build/banner.png') ?>">
Your code looks ok, it should work.
According to the error
Unable to load the requested file: helpers/utility_helper.php
there is no utility_helper.php file in application/helpers/ folder. Check if the file exists in that folder or if you don't have a typo in the file name.
hallo I am running CodeIgniter 3.0.6 and this is my directory structure:
/application
/assets
/js
/mycss.css
/system
My default controller is loading this file in the index.php just fine but when i load another page, the whole page loads afresh but although this file is getting loaded, it is not doing what i want it to do. When i view sourcepage, the links are OK. What could be the problem. I am using base_url('assets/js/mycss') to load it
To put it simpler i have my default controller as welcome. In the index() method of this controller i have $this->load->view('template/index'). This works fine. Now if i load the same page in another method, uniserve(), in the same controller my css file does not do what i want it to do (my page layout is distorted) but all other css files are doing well. What is the problem here. Kindly help.
This link provide exact problem and exact code but my beyond.min.css is not working after it loads fine. How can i achieve the same solution provided in php's codeigniter? Thank you:
Why can't I load js and css files on my pages?
You could also use link_tag().
<?= link_tag('assets/js/mycss.css') ?>
will give
<link href="http://yoursite.com/assets/js/mycss.css" rel="stylesheet" type="text/css" />
And make sure that base_url is specified in your config.php file
I have a sub-view that extend my master-view, and for some reasons all my css doesn't seem to load only on that page. I extend them as usual like I normally do.
view show.blade.php
#extends('layouts.internal.master')
#section('content')
TESTING ...
#stop
I notice, it only break on that route : /account/112
Any hints / suggestion on this will be much appreciated !
Without seeing your file paths or how you are loading your CSS, it's very difficult for us to say but it sounds like your file paths are wrong.
There is a difference between these two:
<link rel="stylesheet" href="css/app.css">
<link rel="stylesheet" href="/css/app.css">
Note the forward slash.
The first one is relative to your current path. So, for example, if you're currently at http://localhost:8000/account/112, the first one is like saying http://localhost:8000/account/css/app.css, which is most likely unwanted behavior. The second one is relative to the root directory so it will always be http://localhost:8000/css/app.css, which is probably what you want to do.
Laravel also comes with helpers function like asset so if you decide to use that and do something like this:
<link rel="stylesheet" href="{{ asset('css/app.css') }}">
It will generate an absolute URL / full path from your root URL. So, it'll generate something like this:
<link rel="stylesheet" href="http://localhost:8000/css/app.css">
/account and /account/112 can not access same path in same way. Like if /account access a image like 'images/img/img.jpg' , /account/112 need to access it like '../images/img/img.jpg'. Its all about folder structure. Now for your problem you need to use asset like below (laravel 5 specific)
// if you have save css file at as root/public/css/main.css
{!! HTML::style('css/app.css') !!}
remember to add to composer.json
"illuminate/html": "5.*"
And to aliases
'Form' => Illuminate\Html\FormFacade::class,
'HTML' => Illuminate\Html\HtmlFacade::class
Point to be noted:
{{asset('css/some.css')}}
this is for laravel4. you wont get it working in laravel 5.