Tweet about this on TwitterShare on FacebookShare on Google+Share on StumbleUponShare on TumblrShare on RedditPin on PinterestEmail this to someone

 

Step 1 – Download Twitter Bootstrap

Visit http://twitter.github.com/bootstrap/, download the latest version and extract into a folder. Copy all files in ‘css’ folder to ‘lbc/public/css’ folder. Copy all files in ‘img’ folder to ‘lbc/public/img’ folder Create new folder called ‘lib’ under ‘lbc/public/js’ and copy all files in ‘js’ of bootstrap into ‘lib’ folder.

Step 2 – Download Backbone.js and supporting javascript Libraries

A sip of Coffee with Laravel and Backbone - Book

Since we’re planning to use Backbone.js we need few more javascript libraries, We also need jQuery. Download these javascript libraries from following places and copy them into ‘lbc/public/js/lib’ folder. jQuery – http://code.jquery.com/jquery-1.8.1.min.js (or latest version) Underscore.js – http://underscorejs.org/underscore-min.js Backbone.js – http://backbonejs.org/backbone-min.js If you need, you can download the development versions of above libraries instead of production (minified) versions.

Step 3 – Blade Template Engine

If you have worked with ASP.NET or MVC .NET you might know about Layout (Master) pages and content pages. where in Layout page you define general look of every page of your site with some place holders or specially marked areas so that sub/content views can generate part of the complete HTML page and insert into the Layout page. Laravel also provide very powerful template engine known as Blade Template Engine. You can read more about Templating here I would like to place my layout pages in different folder, so we will create folder called ‘layout’ inside ‘lbc/application/views’. Then create ‘_main.blade.php’ file inside ‘layout’ folder. You have to have ‘.blade.php’ if you’re using Blade templating features. Now add below code into ‘_main.blade.php

As you can see this is a normal HTML page with some Blade template engine specific tags. Following section explains what each of these tags. Line 6 – {{ $viewName }} – This is simple place holder which will be replaced by the actual value of $viewName when Laravel render this page. We will later see how we can pass this value. Line 8-11 – Here we tell, this is specific section with the name ‘css’ and ask Blade to render this section to final output together with contents of same section in the content pages, (or sub views). So when we later define our sub view which provides actual body content we can define a section called ‘css’ and let that merged into this place of the final output. You will get better understanding when we design the content page. {{ HTML::style(‘… ‘) }} instruct the engine to generate a link to a css file. Line 16 – same as Line 6 Line 21 – Here we instruct template engine to replace this section from content page, more precisely content define in a section called ‘content’ in any page which uses this as layout page. Line 26-31 – This is same as styles section only difference is here it generates links to javascript files.

Step 4 – Content Page (Sub View)

We will now create the content page (or sub view) which is used to show categories and which also let user to add/edit/delete them. Create new folder ‘category’ under ‘lbc/application/views/’ and add new file ‘index.blade.php’ with following content.

Line 1 – Here we indicate which layout file should be used to render this page. since we created our layout page under ‘layout’ folder with the name ‘_main’, we mention it as ‘layout._main’ here. Line 3-5 – Here we define ‘cs’ section and this is to add any specific style sheet links that may be required by this page. So that we don’t need to add all our style sheets into main layout page if it is only used in this page. By specifying @parent we indicates we need to have all styles we define in ‘cs’ section of the layout page in addition to whatever we’re going to add here. For the moment we have no additional stylesheets given here but will add one at the end of this post. Line 7-9 Similar to ‘cs’ section this is ‘js’ section where we instruct to add javascript files specified in layout page as well as any files we would be adding here. One thing to remember, it doesn’t matter in which order you specify these sections, it will get merged into proper sections of the layout page. for ex: if you remember we had ‘js’ section at the end of layout page, but here we define it at the top for our convenience. Line 12-21 – We define the content of the page and this will replace the  @yield(‘content’) section of the _main.blade.php layout file at the final rendering.

Step 5 – Define the Route

Finally we define a route to this page so that we can test it on browser. Add this section just below the previous Route entry we defined in ‘lbc/application/route.php’ file.

This is another way to define routes using anonymous function without declaring a specific controller. Here we simply say, what is the URL and what view to output. ‘category.index’ represents ‘views/category/index.blade.php’ file. Also remember as I mentioned above, we’re passing a parameter called ‘viewName’ with a value ‘Categories’ so that it will replace the {{$viewName}} tag in views. Now we can open browser and type http://lbc.dev/category and you will get fully rendered paged using both layout and content page.

Category View

Category View

Step 6 – Create a Stylesheet

We will now add some styles to our pages. Just add new stylesheet file ‘style.css’ under ‘lbc/public/css’ folder. and add following content.

Also modify  ‘cs’ section of ‘index.blade.php’ file to include new CSS link as below.

As you can see now it will first output style sheet links in ‘cs’ section of the layout page and just after that this new style sheet will be. Final look would as below.

Category View with Styles

Category View with Styles

Posts of this series
Laravel, Backbone.js + Coffeescript Tutorial Part I – Introduction
Laravel, Backbone.js + Coffeescript Tutorial Part II – Setup
Laravel, Backbone.js + Coffeescript Tutorial Part III – Install Laravel
Laravel, Backbone.js + Coffeescript Tutorial Part IV – Database
Laravel, Backbone.js + Coffeescript Tutorial Part V – Data model
Laravel, Backbone.js + Coffeescript Tutorial Part VI – REST API
Laravel, Backbone.js + Coffeescript Tutorial Part VII – REST API
Laravel, Backbone.js + Coffeescript Tutorial Part VIII – Views
Laravel, Backbone.js + Coffeescript Tutorial Part IX – Coffeescript
Laravel, Backbone.js + Coffeescript Tutorial Part X – Backbone
Laravel, Backbone.js + Coffeescript Tutorial Part XI – Backbone
Laravel, Backbone.js + Coffeescript Tutorial Part XII – Backbone
Laravel, Backbone.js + Coffeescript Tutorial Part XIII – Backbone

Tweet about this on TwitterShare on FacebookShare on Google+Share on StumbleUponShare on TumblrShare on RedditPin on PinterestEmail this to someone