I'm starting in on a Laravel project, and having come from past projects using BEM style folder layout (sort by block, not by type), I'd like to do the same within the views folder provided by Laravel. The benefits of having keeping these files together seem obvious, versus mirroring the folder structure in the js/sass folders, but there's some skepticism, prompting the question.
As an example, if I have a modal component, it would exist in:
views/components/modal
and it would consist of:
modal.blade.php
modal.scss
modal.js
So I'm wondering if there are any Laravel specific reasons why I wouldn't want to have a css & js file alongside an #component blade template.
Many people in the Laravel community are using a CRUD/MVC like structure.
Example for views.
views/users/index.blade.php
views/users/show.blade.php
views/users/create.blade.php
views/posts/index.blade.php
views/posts/show.blade.php
views/posts/create.blade.php
Routes (with corresponding methods)
Route::get('/users', 'UserController#index);
Route::get('/users', 'UserController#show);
Route::get('/users', 'UserController#create);
Route::get('/posts', 'PostController#index);
Route::get('/posts', 'PostController#show);
Route::get('/posts', 'PostController#create);
Method example
public function show(User $user)
{
return view('users.show', ['user' => $user]);
}
Blade example
<head>
<!-- Styles -->
<link href="{{ asset(css/posts.css) }}" rel="stylesheet">
</head>
<body>
<div id="app">
#yield('content')
</div>
<!-- Scripts -->
<script src="{{ asset('js/posts.js) }}"></script>
</body>
Related
I am using Laravel for a project and would like to switch Vue. This is a sample of my setup right now:-
"routes/web.php"
Route::get('/home', 'HomeController#home');
Route::get('/about', 'HomeController#about');
Route::get('/blogs', 'HomeController#blogs');
"views/master.blade.php"
<!DOCTYPE html>
<html>
<head>
<title>#yield('title')</title>
<!-- AND OTHER STUFF -->
</head>
<body>
<!-- NAV BAR -->
<div id="app">
#yield('content')
</div>
<script src="app.build.js"></script>
</body>
</html>
"views/pages/home.blade.php"
#extends('master')
#section('title', "Home")
#section('content')
<home-content
customproperties="{{ $somedata }}"
></home-content>
#endsection
"app.js"
var vm = new Vue({
data(){
return {
}
},
components: {
HomeContent,
AboutContent,
BlogsContent
}
})
Let's suppose I have all the components ready and working just fine. The problem is, am I doing it the right way? I don't want to make it a single page application for project complexity, instead I want to do it hybrid way. All vue components will have their respective pages, and some pages will not even have a vue component, just a Plain Blade page.
For example, a static page may look like this:-
#extends('master')
#section('title', "Static Page")
#section('content')
Just a static page, it has nothing to do with vue, but still sitting inside Vue instance's template scope.
#endsection
For these pages, the vue script is being loaded and "#app" is getting interpreted as a template. But this page will have no use for vue. Is it good to leave it this way? Or a more optimal way exists for this?
Any suggestions regarding best practices for Laravel-Vue multi page application is welcome.
im using a laravel 5.4 and i have a problem with urls, when i send value with urls like http://localhost:8000/Music/{id} , laravel does not load styles but if use url without value to get that view it loads styles properly, it also does not load styles if an slash get added to end of url like http://localhost:8000/videos/ but without that slash http://localhost:8000/videos works without problem ..sorry i cant speak english good.
here is my code :
Route::get('Music/{id}','homeController#Music');
public function Music(music $item)
{
return view('music',['item'=>$item]);
}
this works by route model binding properly and does what i want but when it returns music blade file it does not load styles that i linked but if use this instead :
Route::get('Music','homeController#Music');
a
public function Music()
{
$item = music::find(1); //for example
return view('music',['item'=>$item]);
}
that works perfect.
i checked this many ways its because of {vlaues} in urls
it also does not loads styles or js files if an slash get added to end of urls
what is the problem?
Use the asset() function...
<html>
<head>
<link href="{{ asset('css/test.css') }}" rel="stylesheet">
</head>
<body>
<div class="square"></div>
<!-- Same for Javascript... -->
<script src="{{ asset('js/app.js') }}"></script>
</body>
</html>
i tested it on this too
<html>
<head>
<link rel="stylesheet" href="css/test.css" type="text/css">
</head>
<body>
<div class="square"></div>
</body>
</html>
I have a project which has 2 login forms, one for consumers and one for creators.
Both have different "post-login" areas.
But the view should look pretty similar, so I thought why not DRY-it™.
QUESTION: Here is my solution, but I am sure there is a more elegant solution, please enlighten me if there is.
login.blade.php (master template)
#extends('layout.app')
#section('styles')
{{ Html::style('css/login.css') }} // This also looks deprecated, how do I have a specific css only for this page?
#stop
#section('content')
<div class="container">
<form class="form-signin" action="{{ $loginAction }}"> //smells really bad
<h2 class="form-signin-heading">Login {{ $loginTitle }}</h2>
...
#endsection
login_consumer.blade.php
#extends('layout.login', [
'loginTitle' => 'Consumer',
'loginAction' => 'login_consumers'
])
login_creator.blade.php
#extends('layout.login', [
'loginTitle' => 'Creators',
'loginAction' => 'login_creators'
])
Thanks in advance
Common layout containing header, body content and footer
are app.blade.php having #yields('') directive within allows you to inherit it as well as let you extend with new content through #extends('') directive. Also, you can append in master stylesheet through #show and #parent blade directive as below.
<!-- Stored in resources/views/layouts/app.blade.php -->
<html>
<head>
<title>App Name - #yield('title')</title>
#section('stylesheets')
<link rel="stylesheet" type="text/css" href="style.css"> <!-- this is master stylesheet -->
#show
</head>
<body>
<div class="container">
#yield('content')
</div>
</body>
</html>
Extending a layout
<!-- Stored in resources/views/login.blade.php -->
#extends('layouts.app')
#section('title', 'Page Title')
#section('stylesheets')
#parent
<link rel="stylesheet" type="text/css" href="login.css">
#endsection
#section('content')
<p>This is my body content.</p>
#endsection
Now, explaining your second part of your question. Above case was about a common layout, but this case you are trying to achieve common body content so there's Components & Slots for that. Separate your common body content as a component and pass variable as a slot. This came from Laravel 5.4. Previously, it was called partials which was used through #include('') directive.
https://laravel.com/docs/5.5/blade#components-and-slots
I´ve just started using the Phalcon framework, I´ve read through most of the documentation described on their website but it´s still not clear to me how and where I need to include my css, and javascript files to showcase them on my view pages.
I'm currently maintaining the follow folder structure.
For example my assets folder contains all my css/javascript and jquery files how would I be able to include these in my index file.
I want to know where I could declare the path to find these specific files, and how I can include these files in my view.
You must declare it on your controller.
use Phalcon\Mvc\Controller;
class IndexController extends Controller
{
public function index()
{
// Add some local CSS resources
$this->assets->addCss("css/style.css");
$this->assets->addCss("css/index.css");
// And some local JavaScript resources
$this->assets->addJs("js/jquery.js");
$this->assets->addJs("js/bootstrap.min.js");
}
}
After this you can output your js and css link in the view:
<html>
<head>
<title>Some amazing website</title>
<?php $this->assets->outputCss(); ?>
</head>
<body>
<!-- ... -->
<?php $this->assets->outputJs(); ?>
</body>
<html>
Or you can use Volt syntax like this:
<html>
<head>
<title>Some amazing website</title>
{{ assets.outputCss() }}
</head>
<body>
<!-- ... -->
{{ assets.outputJs() }}
</body>
<html>
Hi I am newbie learning laravel 4 for creating an application. I am trying to link twitter bootstrap3 files to views using laravel blades. I installed a new laravel application folder.
To remove public from url path i removed all the file in public folder and kept outside of public folder. I changed paths as per the above changes in index.php file.As per my needs i will have two sections in my application one is for users and another is for admin.
So for this i changed my routes.php file like this below.
Route::get('/', 'HomeController#index');
Route::get('/admin', 'AdminController#index');
I created two controllers one for users and another for admin named as HomeController and AdminController. Both files will look like below.
HomeController for Users
<?php
class HomeController extends BaseController {
public function index()
{
return View::make('index');
}
}
AdminController for admin section
<?php
class AdminController extends BaseController {
public function index()
{
return View::make('admin.index');
}
}
Now i created admin folder under views folder for admin section. Thats why i kept admin.index to call admin index page when the url is like this http://localhost/laravel/admin.
Now i created assets folder which has css folder for css files, js folder js files and images folder for images. I want to link these css and js files to my admin view. So i created a layout.blade.php like below.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Laravel</title>
<link rel="stylesheet" href="{{ asset('assets/css/bootstrap.css') }}">
<link rel="stylesheet" href="{{ asset('assets/css/style.css') }}">
<script type="text/javascript" src="{{ asset('assets/js/jquery-1.10.1.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('assets/js/bootstrap.min.js') }}"></script>
</head>
<body>
#yield('content')
</body>
</html>
After this i changed my view into like this below.
#extends('layout')
#section('content')
<div class="container">
<div class="row clearfix">
<div class="col-md-12 column">
<p>Here Comes Admin Section</p>
</div>
</div>
</div>
#stop
But the assets are not linking. May i know where i am going wrong.
If your asset folder is inside public folder of laravel then user this:
Suppose your folder structure is public/assets/css/bootstrap: Then
<script src="{{ URL::asset('assets/css/bootstrap.css') }}"></script>
Use a virtual host on your server or local machine to remove public from your URL. It's pretty straightforward. Simply Google on how to setup a virtual host for Laravel.
Once you have your virtual host setup, simply place your assets folder in your public directory.
Then in your Blade layout, use:
<link rel="stylesheet" href="{{ URL::asset('assets/css/bootstrap.css') }}">