Adding assets in laravel application

A dynamic website almost requires the use of CSS and JavaScript. Using a Laravel asset
package provides an easy way to manage these assets and include them in our views.

Getting ready

For this recipe, we’ll need to use the code created in the Loading a view into another view/
nested views recipe.

How to do it…

To complete this recipe, follow these steps:
1. Open the composer.json file and add the asset package to the require section,
so it looks similar to the following:
“require”: {
“laravel/framework”: “4.0.*”,
“teepluss/asset”: “dev-master”
},

2. In the command line, run composer update to download the package as follows:
php composer.phar update

3. Open the app/config/app.php file and add ServiceProvider to the end of the
providers array as follows:
‘Teepluss\Asset\AssetServiceProvider’,

4. In the same file, in the aliases array, add the alias for the package as follows:
‘Asset’ => ‘Teepluss\Asset\Facades\Asset’

5. In the app/filters.php file, add a custom filter for our assets as follows:
Route::filter(‘assets’, function()
{
Asset::add(‘jqueryui’, ‘http://ajax.googleapis.com/ajax
/libs/jqueryui/1.10.2/jquery-ui.min.js’, ‘jquery’);
Asset::add(‘jquery’, ‘http://ajax.googleapis.com/ajax
/libs/jquery/1.10.2/jquery.min.js’);
Asset::add(‘bootstrap’, ‘http://netdna.bootstrapcdn.com
/twitter-bootstrap/2.3.2/css/
bootstrap-combined.min.css’);
});

Update the home and second routes to use the filter
Route::get(‘home’, array(‘before’ => ‘assets’, function()
{
return View::make(‘myviews.home’)
->nest(‘header’, ‘common.header’)
->nest(‘footer’, ‘common.footer’);
}));
Route::get(‘second’, array(‘before’ => ‘assets’, function()
{
$view = View::make(‘myviews.second’);
$view->nest(‘header’, ‘common.header’)->nest
(‘footer’, ‘common.footer’);
$view->nest(‘userinfo’, ‘common.userinfo’, array
(‘my_name’ => ‘John Doe’, ‘my_city’ => ‘Austin’));
return $view;
}));
6. In the views/common directory, open header.php and use this code as follows:
<!doctype html>
<html lang=”en”>
<head>
<meta charset=”utf-8″>
<title>My Website</title>
<?= Asset::styles() ?>
</head>
<body>

7. In the views/common directory, open footer.php and use the following code:
<footer>&copy; 2013 MyCompany</footer>
<?= Asset::scripts() ?>
</body>
</html>
8. Test the views by going to http://{your-server}/home (where your-server
is our URL), clicking on the link, and viewing the source of the page to see the assets
included.

How its works….

The asset package makes it very easy to add CSS and JavaScript files to our HTML. To begin,
we need to “register” each asset with the routes. To make things a bit simpler, we’ll add the
assets in a filter that will be called before our routes. That way, we only have the code in one
place and making changes will be easy. For our purposes, we’ll use jQuery, jQueryUI, and
bootstrap CSS from a CDN source.

The first parameter of the add() method is the name we’re giving the asset. The second
parameter is the URL of the asset; it could either be a relative path or a full URL. The third,
optional parameter is the dependency of the asset. In our example, jQueryUI requires that
jQuery already be loaded, so we pass in the name of our jQuery asset in the third parameter.
We then update our routes to add the filter. If we add or remove any assets in our filter, it will
automatically be reflected in each of our routes.
Since we’re using nested views, we only need to add the assets to our header and footer
views. Our CSS files are called by the styles() method and the JavaScript is called by the
scripts() method. Laravel checks the file extensions of the assets and automatically puts
them in the right place. If we look at the source code, we’ll notice that Laravel has also made
sure to add the jQuery script before jQueryUI, since we set it as a dependency.

Leave a Reply

Your email address will not be published. Required fields are marked *