I am trying to upload a laravel project to cpanel hosting server. My laravel version is 5.3 and php version on the server is 5.6.
What I have done is:
Create a folder called "online_system" to root of file manager.
Copy contents of laravel project except public folder.
Create a folder called "online_system" to public_html.
Copy contents of public folder of laravel project.
Jump to index.php file.
Edit require __DIR__.'/../../online_system/bootstrap/autoload.php';
Edit $app = require_once __DIR__.'/../../online_system/bootstrap/app.php';
Change .env to link DB.
Open domain/online_system.
Home page is working fine, but as long as I click login or register provided by laravel, then the website looks plain without css load.
How can I solve this problem?
Give it a try
<link rel="stylesheet" type="text/css" href="{{ url('online_system/css/styl.css') }}" />
I guess this will do the trick:
<link rel="stylesheet" type="text/css" href="/public/css/style.css"/>
If your project is on the server and change your views, So clear view cache:
php /path_to_your_project/ artisan view:clear
i have installed Laravel 5.4 in localhost. I'm using XAMPP to host the application. I'm using Laravel's inbuilt Blade template structure to show the data. I have used asset() helper to load my assets files which is inside the public folder. A sample code is here.
<link href="{{URL::asset('backend/vendors/bootstrap/dist/css/bootstrap.min.css')}}" rel="stylesheet" type="text/css">
But CSS file is not loading. I discovered this from Chrome developer tool's Network section. I have worked with Laravel before with it's other version and this is the first time that i'm working with version 5.4. Hope someone will assist me to solve this.
you can use only asset function like this i hope you have css folder inside public folder as mentioned in the path.
<link href="{{asset('backend/vendors/bootstrap/dist/css/bootstrap.min.css')}}" rel="stylesheet" type="text/css">
asset()
Generate a URL for an asset using the current scheme of the request (HTTP or HTTPS):
Ref: https://laravel.com/docs/5.4/helpers
I'm using Laravel 5.3 and on some pages the css isn't loading. I tried the suggestions from this question, but they didn't help.
This is what I did so far:
I installed Laravel on wamp inside www/lblog directory so I access laravel's main page via http://localhost:8080/lblog/
To get rid of the "public" part from the URL I moved the index.php and htaccess files from the "public" directory to the root directory and changed two lines in index.php like this:
require DIR.'./bootstrap/autoload.php';
$app = require_once DIR.'./bootstrap/app.php';
In "resources/views/layouts/app.blade.php" I have the styles linked like this:
I tried to remove the / before the "css", it didn't work that way either.
The main page is ok, but if I go to http://localhost:8080/lblog/login for example, the style is broken.
Don't hack the core, use it as it is which is recommended.
Use laravel's built in helpers for generating URL for your assets that are on public directory
<link rel="stylesheet" href="{{ asset('css/styles.css') }}">
which will properly generate URL for your files that are on public directory
I am currently using Laravel 5.2 framework for my web dev project and stuck on problem. In my dashboard.blade.php i want specify the link to an external css file which is in public/src/css/main.css.
I used URL::to() and URL::asset() methods to get the absolute path to the CSS file but still it is not working.
When i placed my CSS file just inside the public directory everything worked fine but when i place it inside any subdirectory in the public directory it doesnot work.
I am homestead along with the laravel as development environment.
dashboard.blade.php file
directory structure of the project
Please put your css in public folder
<link type="text/css" rel="stylesheet" href="{{ asset('css/style.css')}}">
No matter where you place your css file inside public folder you can get it using the code :
<link rel=stylesheet" href="{{asset('src/css/main.css')}}">
For this code place your css file inside public/src/css
In your image of directory there is no folder as css inside src
I'm a web newbie programmer,
I'm trying to learn from home to make my own web.
I have notions of php, html, js and css.
But I've found something that is not how to solve.
I'm trying to use Composer to manage Bootstrap. I installed Composer and I have run this line of code
composer require twbs/bootstrap
that has dropped a folder with files.
I do not understand is how I make html links to find the js and css files, you should do indicating the full path?
vendor / twbs / bootstrap / dist / js / bootstrap.js
Excuse me if the question is stupid but I do not know how I should continue.
Amd excuse my English, I'm learning too but by now I use google translate
You could use a post update command in the composer.json file:
"scripts": {
"post-update-cmd": [
"rm -rf public/bootstrap",
"cp -R vendor/twbs/bootstrap/dist public/bootstrap"
]
}
And then just include the javascript- and css-files like this:
<script type="text/javascript" src="{{ ROOT_URL }}bootstrap/js/bootstrap.min.js"></script>
<link href="{{ ROOT_URL }}bootstrap/css/bootstrap.min.css" rel="stylesheet">
Yes, Composer downloads the dependencies by default into the vendor folder. So Bootstrap will also land in the vendor folder, which is not the correct place to reference it or include it.
composer require twbs/bootstrap ➔ vendor/twbs/bootstrap/dist/js/bootstrap.js
Your next step would be to write a little helper script to copy the Boostrap files you need, into your public/assets folder. You could copy the complete dist folder including sub-folders (vendor\twbs\bootstrap\dist) into public or public\assets.
Please overwrite existing files, e.g. if a file exists remove it, then copy it. This allows to easily update the files, when you need to update the Bootstrap vendor package again.
Of course, you could also just copy the files manually or create a symlink. It depends.
That gives you the following directory structure:
public
\- assets
|- css
|- js
\- fonts
\- index.html
When the Boostrap assets are copied you can start to include them, in your index.html or template (assets\js\bootstrap.min.js, etc.).
Referencing: https://stackoverflow.com/a/34423601/1163786 which shows also other solutions to this problem, e.g. fxp/composer-asset-plugin, bower, grunt.
Unless you need customization inside bootstrap (e.g. building scss), the most simple solution is relying on a CDN (as a bonus, you get super-fast caching of assets)
So, simply call your assets like so:
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<script src="//code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
Composer is a super-excellent tool for backend dependencies, but not the best one for frontend.
If you want to have the files in your server, and you don't want to use npm, grunt or another frontend library manager, you can simply download the files listed in Massimiliano's answer and put them inside your js/css folders:
First download these files (updated to the most recent Bootstrap 3 version):
http://netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css
http://code.jquery.com/jquery-2.2.4.min.js
http://netdna.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js
And put them in these folders (starting from the root of your project):
public/css/bootstrap.min.css
public/js/jquery-2.2.4.min.js
public/js/bootstrap.min.js
Now, you want to be able to call them in the blade templates for your views. It's simple: just add <link> and <script> tags as normal for any css/js file, adding the following to your blade template:
<link href="{{ url('css/bootstrap.min.css') }}" rel="stylesheet" type="text/css" />
<script src="{{ url('js/jquery-2.2.4.min.js')}}"></script>
<script src="{{ url('js/bootstrap.min.js')}}"></script>
P.s.: if you see the console, it shows something as the following error message:
Source map error: request failed with status 404
Resource URL: http://localhost:8000/css/bootstrap.min.css
Source Map URL: bootstrap.min.css.map
This will not affect the style of your page, and you can simply ignore this message, or remove a line from the bootstrap file as the answers to this question suggest. This answer explain a bit more.