Laravel and Foundation working together (forms and modals)

Following on from Continuous Learning for Techies , here's a couple of quick notes on one of Treehouse's  newer courses.

Laravel is a PHP framework, and a really good one too. I could never get to grips with Symfony, but somehow Laravel just seems to make sense it a way that other MVC environments didn't (to me anyway). My team has used Laravel on quite a few jobs, and there's no question that the technology can dramatically speed up the delivery time on backend development (if developers are happy with the structure...) but I've always kept it at arm's length.

However, I've just completed Laravel Basics Treehouse's Laravel Basics course and it's given me a much stronger appreciation of the benefits of this framework [and strangely I feel much more relaxed about Magento, even though that's based on Zend's framework]. Fair warning to anyone in my Project teams - I now know enough to be dangerous. In this course, Hamilton Paulk used Foundation as the front end library to handle styling. So that got me thinking about how easy it would be to integrate some of the more interesting bits of Foundation Javascript into a Laravel project. It turns out that it's really easy. These examples assume you've got Foundation's CSS and JS files available as assets in Laravel. Here's a quick Codepen of what your main.blade.php should look like (approximately) to achieve this.

Reveal Modal Dialogs

So let's say you've built a View using Laravel. You've got links in the files that reference specific routes and associated controllers. But maybe sometimes you'd like to open those as Foundation Reveal modal dialogs. Is that easy? Yes it is, particularly if you use Laravel's Helper Functions. Our goal is to click a link generated by Laravel that open a modal, and fills that box with relevant content using an AJAX call. The starting point is to use a Helper like:

link_to_route('', $title, $parameters = array(), $attributes = array());

in our Blade template. By using the second $attributes array, we can very easily pass in the required stuff to make Reveal Modal do its thing.

  ['class' => 'tiny button',
   'data-reveal-id' => 'MyModal',
   'data-reveal-ajax' => 'true',

{{-- Include blank modal in the layout --}}
<div id="MyModal" class="reveal-modal" data-reveal></div>

By adding those attributes, we've built a device that creates an anchor, which on click attempts to open the content of that link in a modal dialog. But... the content of the modal will repeat the headers and footer of the site. Ideally all you want is just the content. Can we do that? Yup, all it needs is a little bit of conditional logic in the view associated with a controller:

{{-- views/myModels/action.blade.php --}}
@extends(((Request::ajax()) ? 'layouts.modal' : 'layouts.main'))

This conditional checks whether the new request is an AJAX/XHR request [checking for the X-Requested-With header], and if so it replaces the main page layout with a cutdown version containing no headers or footers.

{{-- modal.blade.php --}}
<div class="row">
  <div class="small-12 column">

  <a class="close-reveal-modal">&#215;</a>

And you're done - links using these structures will open as responsive modals; but the underlying routes will still work as standalone pages, and if javascript is unavailable all this behaviour gracefully degrades.

Abide Validation

Can Laravel forms incorporate client-side verification using Foundation Abide? Yes, they can. As above, the goals is to output the required attributes in the Form after which everything else is handled by Foundation's javascript. The documentation seems a little bit confusing on this point, but all of the Form generation methods appear to be able to pass custom attributes; you just need to include them in the declaration as additional key/value pairs in the array of parameters.

{{ Form::model($mymodel, [
      "route" => ["",
      'method' => 'POST',
      'data-abide' => '',
      'class' => "my-form-class"

{{-- Set data-abide to 'ajax' to intercept submit --}}

Once you have the data-abide attribute output on the form, you can then add patterns and required attributes to individual form elements.

{{ Form::text(
  ['required' =>; '',
   'pattern' => '[a-zA-Z]+',
   'placeholder' => 'Enter Text Here'

And that's it!