- Laravel

Laravel Elixir with Bootstrap SASS and Font Awesome

2015-04-12T00:00:00+00:00

This is my current Gulpfile for Laravel Elixir which is heavily influenced from this gist</a> and the comments within it.</p> </span>

All I've done is added Font Awesome, set it compile all scripts in resources/javascripts</code> which is where I keep my own Javascript code and added asset versioning.</p>

// gulpfile.js
</span>var </span>paths </span>= {
</span>'</span>jquery</span>': '</span>./vendor/bower_components/jquery/</span>',
</span>'</span>bootstrap</span>': '</span>./vendor/bower_components/bootstrap-sass-official/assets/</span>',
</span>'</span>fontawesome</span>': '</span>./vendor/bower_components/fontawesome/</span>'
</span>}
</span> 
</span>elixir</span>(</span>function</span>(</span>mix</span>) {
</span>	</span>mix</span>.</span>sass</span>('</span>*</span>', '</span>public/css/</span>', {includePaths: [</span>paths</span>.</span>bootstrap </span>+ '</span>stylesheets</span>', </span>paths</span>.</span>fontawesome </span>+ '</span>scss</span>']})
</span>		.</span>copy</span>(</span>paths</span>.</span>bootstrap </span>+ '</span>fonts/bootstrap/**</span>', '</span>public/fonts/bootstrap</span>')
</span>		.</span>copy</span>(</span>paths</span>.</span>fontawesome </span>+ '</span>fonts/**</span>', '</span>public/fonts/fontawesome</span>')
</span>		.</span>scripts</span>([
</span>			</span>paths</span>.</span>jquery </span>+ "</span>dist/jquery.js</span>",
</span>			</span>paths</span>.</span>bootstrap </span>+ "</span>javascripts/bootstrap.js</span>",
</span>			'</span>./resources/javascripts/**/*.js</span>',
</span>		], '</span>public/js/app.js</span>', '</span>./</span>')
</span>		.</span>version</span>([
</span>			'</span>css/app.css</span>',
</span>			'</span>js/app.js</span>'
</span>		])
</span>});
</span></code></pre>
// bower.json
</span>{
</span>  "</span>name</span>": "</span>Laravel Application</span>",
</span>  "</span>dependencies</span>": {
</span>    "</span>bootstrap-sass-official</span>": "</span>~3.3.1</span>",
</span>    "</span>fontawesome</span>": "</span>~4.3.0</span>"
</span>  }
</span>}
</span></code></pre>
// .bowerrc
</span>{
</span>  "</span>directory</span>": "</span>vendor/bower_components</span>"
</span>}
</span></code></pre>
Make sure you have Bower installed globally</p>
npm install -g bower
</span></code></pre>
Install the bower packages</p>
bower install
</span></code></pre>
After that, you can run the gulp watch</code> command which will copy Glyphicons and Font Awesome into public/fonts</code>. </p>
resources/assets/sass</code> and resources/javascripts</code> will be watched for changes and concatenated into public/css/app.css</code> and public/js/app.js</code> respectively.</p>
Your resources/assets/sass/app.scss</code> should include the following to look for the fonts in the correct place and import their stylesheets.</p>
$</span>icon-font-path</span>: "</span>/fonts/bootstrap/</span>";
</span>$</span>fa-font-path</span>:   "</span>/fonts/fontawesome</span>";
</span>@import </span>"</span>bootstrap</span>";
</span>@import </span>"</span>font-awesome</span>";
</span></code></pre>
That's it! Note that I'm using Elixir's handy asset versioning, too.  In your HTML layout you can use the elixir</code> function.</p>
	<</span>link </span>href</span>="</span>{{ elixir('css/app.css') }}</span>" </span>rel</span>="</span>stylesheet</span>">
</span>	<</span>script </span>src</span>="</span>{{ elixir('js/app.js') }}</span>"></</span>script</span>>
</span></code></pre>


Making moderation easy
2015-04-06T00:00:00+00:00
For just over a year I've been working on a website called Eurekar. To describe it briefly, it's a cool little website which has news articles for cars, a fairly complex article search and another search for UK car dealerships.</p>
</span>
I have built an insane amount of content management systems in Laravel but what makes Eurekar unique is that the content is pulled from an external XML feed rather than created first hand in the CMS.</p>
My first thoughts that were that having the content brought in from an external system would make things easier.  If the content is made elsewhere then there is no need for an administration area. Unfortunately, due to the feed being out of my control the opposite is true and moderation has become more crucial than ever.</p>
Some of the hurdles this brings include:</p>

Keeping the website's content up to date with the feed.</li>
XML data not having the ideal structure.</li>
Difficulty importing certain characters from the XML into MySQL.</li>
Parsing XML data in general.</li>
</ul>
There is two other issues that were by the far the most difficult to deal with. </p>

We often get articles with the same images because different authors can write articles about the same cars.  Because of this they use same press release images.  It can look silly having the same thumbnail show up 2-3 times in a list of articles so it's important that they show different images.</li>
On a similar note, on certain pages such as the home page we didn't want multiple articles showing for the same cars so as to show a wider variety.</li>
</ol>
As all of these issues cropped up it gradually became clear that being able to moderate the website easily was incredibly important.</p>
Editing Article Content</h2>
The XML feed is fetched every 30 minutes with a cron job that uses PHP's SimpleXML extension to parse it.  We have to run a bunch of character replacements on this feed so that we don't get any issues with certain symbols. Even with this in place the £ symbol occasionally manages to elude me which is why I wanted editing articles to be incredibly quick and simple.</p>
If you take a look at this page as an example Mercedes scores a triple</a> Below is a screen shot of how it looks when logged in as an administrator.</p>
</p>
On the left side there are 2 buttons: Quick Edit and Full Edit.  Full Edit takes you to the admin area for editing all of the content of the article. Then there's quick edit which uses jQuery to bring up the right side of the image. Here a user can edit the title and the content on the same page which is perfect for fixing minor grammatical errors.  The save button returns the administrator back to the normal page after the content is updated.</p>
Editing Image Order</h2>
Very often an image of a car boot gets uploaded first from the feed and therefore becomes the image that shows up on all of the article thumbnails.  Obviously this isn't ideal. A car boot is not what our readers are initially interested in.  What make matters more difficult is that articles sometimes have the same images and we wanted to avoid showing duplicates images on pages which listed articles.</p>
There are two parts to this solution. The easiest part was allowing administrators to reorder images.</p>
</p>
The above screenshot is how the image gallery looks as an administrator.  The green button uses HTML5 drag and drop to sort image ordering and is updated via an AJAX request when an image is dropped from the mouse drag.  The pause button toggles the image being viewable as a thumbnail on a list of articles (I'll get to why this is important in a moment).  The bin button deletes the image entirely which is useful when a low quality image is uploaded.</p>
Now to the more challenging problem: preventing duplicate images from being  shown on a list of articles.  Eurekar has many sections which list articles. Some articles might have the same preferred first image (If the images came from the same press release) but they may not always appear in the same sections.</p>
In an ideal situation the next article which wants to use the same image needs to skip to the next image in it's gallery.  This is why image reordering and the pause toggle button from earlier are important.  This is how we can make sure the best images get rotated on the website.</p>
This is probably the most irregular code I've had to create in Laravel and in honesty I am not 100% happy with how I implemented it. Here's a snippet of code which generates JSON for our "View More"  AJAX requests. This code sits in a repository and is called by methods for different sections of the website.</p>

</span><?php
</span>protected function </span>generateJSON</span>($</span>articles</span>, $</span>hide_from</span>)
</span>{
</span>  $</span>c </span>= </span>new </span>\Illuminate\Database\Eloquent\</span>Collection</span>;
</span>  $</span>image_index </span>= </span>0</span>;
</span>  $</span>used_images </span>= [];
</span>  </span>foreach</span>($</span>articles </span>as $</span>article</span>) {
</span>    </span>foreach</span>($</span>article</span>-></span>images </span>as $</span>image</span>) {
</span>      </span>if</span>(</span>in_array</span>($</span>image</span>-></span>filename</span>, $</span>used_images</span>)) {
</span>        $</span>image_index</span>++;
</span>      } </span>else </span>{
</span>        $</span>used_images</span>[] = $</span>image</span>-></span>filename</span>;
</span>        </span>break</span>;
</span>      }
</span>    }
</span>    </span>if</span>($</span>image_index </span>>= $</span>article</span>-></span>images</span>-></span>count</span>()) {
</span>      </span>foreach</span>($</span>article</span>-></span>images</span>-></span>slice</span>(</span>0</span>, $</span>image_index</span>) as $</span>image</span>) {
</span>        </span>if</span>($</span>key </span>= </span>array_search</span>($</span>image</span>-></span>filename</span>, $</span>used_images</span>) !== </span>false</span>) {
</span>          </span>unset</span>($</span>used_images</span>[$</span>key</span>]);
</span>        }
</span>      }
</span>      $</span>image_index </span>= </span>0</span>; 
</span>    }
</span>    $</span>blurb </span>= </span>word_slice</span>($</span>article</span>-></span>content</span>, </span>490</span>);
</span>    $</span>c</span>-></span>add</span>([
</span>      '</span>id</span>' => $</span>article</span>-></span>id</span>,
</span>      '</span>title</span>' => $</span>article</span>-></span>title</span>,
</span>      '</span>slug</span>' => $</span>article</span>-></span>slug</span>,
</span>      '</span>url</span>' => </span>route</span>('</span>articles.show</span>', $</span>article</span>-></span>slug</span>),
</span>      '</span>content</span>' => $</span>article</span>-></span>content</span>,
</span>      '</span>blurb</span>' => $</span>blurb</span>,
</span>      '</span>published_at</span>' => $</span>article</span>-></span>published_at</span>-></span>toDateTimeString</span>(),
</span>      '</span>filename</span>' => $</span>article</span>-></span>images</span>[$</span>image_index</span>]-></span>filename</span>,
</span>      '</span>full_image</span>' => </span>Config</span>::</span>get</span>('</span>assets.aws</span>').</span>Config</span>::</span>get</span>('</span>assets.image-medium</span>').$</span>article</span>-></span>images</span>[$</span>image_index</span>]-></span>filename</span>,
</span>      '</span>thumbnail</span>' => </span>Config</span>::</span>get</span>('</span>assets.aws</span>').</span>Config</span>::</span>get</span>('</span>assets.image-small</span>').$</span>article</span>-></span>images</span>[$</span>image_index</span>]-></span>filename</span>,
</span>      '</span>hide_from</span>' => $</span>hide_from</span>,
</span>    ]);
</span>  }
</span>  </span>return </span>[
</span>    '</span>total</span>' => $</span>articles</span>-></span>getTotal</span>(), 
</span>    '</span>from</span>' => $</span>articles</span>-></span>getFrom</span>(),
</span>    '</span>to</span>' => $</span>articles</span>-></span>getTo</span>(),
</span>    '</span>articles</span>' => $</span>c</span>-></span>toArray</span>(),
</span>  ];
</span>}
</span></code></pre>
A paginated collection of articles is passed through to the method as well as a second paramater which isn't important to this problem - it is just a value which I need to pass to the JSON.</p>
On line 4 I made a custom collection with \Illuminate\Database\Eloquent\Collection</code> which is going to hold all of the data for the JSON API.</p>
On lines 5-6 I've initiated 2 variables: image_index</code> and used_images</code> which will be a list of images that have been used so that I can keep track of when I need to show a the next image.</p>
Through lines 7-38 I'm looping through all of the articles and then looping through every image in each article. If the image exists in the used_images</code> array then I skip to the next image.  If it doesn't exist then I add it to used_images</code> and break the images loop.</p>
The next if statement checks if the image_index</code> is more than the amount of images available. This means there's no more images left to go through so I use array_search</code> to remove all of the current articles images from the used_images</code> array and set the index back to the beginning. This resets the images used for a certain selection and allows them to be rotated through again.</p>
After all that hard work all that's left is to add the article, its main image and a few other useful attributes to the custom collection which will then be sent off as a JSON response.</p>
Editing article listings</h2>
Lastly we wanted to be able to show more variety on certain pages of the website. This problem arose due to author's releasing articles about the same car at the same time. Meaning we occasionally get 3 Suzuki Celerio articles hogging the front page which isn't ideal.  The only circumstance where we want 3 or more Suzuki Celerios to show in a list of articles is if a user searched for that car model specifically.</p>
My solution for this is to have hide buttons for each article in an article list.  Take for example the home page latest news shown below:</p>
</p>
Each section of the website has a boolean field which dictates whether it can be shown on its page. When hide is pressed in a section then it can no longer be in the article listing for that section. There is a separate admin page to revert this change incase of hider's remorse.</p>
Final Thoughts</h2>
There's a lot of work that goes into making a good admin area and what I've shown you is just a tiny glimpse of the overall system.</p>
I realise there is a severe lack of code in this article but I hope that you've  at least found it insightful and that I've given you some ideas to work in to your own systems.</p>


Realtime chat with Laravel, Ember JS and Pusher
2015-03-29T00:00:00+00:00
I've been hearing a lot of noise about Firebase recently. Lots of good noise.  When I first started making this article I wanted to make use of Firehose which is an open source alternative to Firebase. </p>
</span>
Setting up the API with Laravel was a breeze.  The only stumbling block was with my Ubuntu Vagrant box which installed a version of Redis which was too old (Firehose requries 2.6+ where as Ubuntu's package manager only has 2.2).   This was a pretty simple to fix and if you are</em> interested in Firehose then you can find instructions for getting the latest Redis here</a>.</p>
Anyway I started building my Ember application and I hit a brick wall.  Firehose touts Ember support out of the box but I can see literally no documentation on how to get started with it.</p>
I decided to switch to Pusher which I'm already familiar with.  Unfortunately Pusher isn't open source but it does have a reasonable free package.  This allowed me to continue the use of my Laravel application where as switching to Firebase would not.  Also, there is already a pretty amazing Firebase Ember tutorial here</a> so it seems pointless to do the same thing.</p>
This article will show you a very bare bones chat system with Laravel 5, Ember JS 1.10 and Pusher.</p>
</span>
Laravel</h2>
Start off by making a new Laravel application</p>
laravel</span> new realtimechat
</span></code></pre>
For this application you'll use 2 packages:  laracasts/Laravel-5-Generators-Extended</a> and vinkla/pusher</a>.</p>
Install the two packages</p>
composer</span> require laracasts/generators</span> --dev
</span>composer</span> require vinkla/pusher:</span>~</span>1.0
</span></code></pre>
In app/Providers/AppServiceProvider.php</code> add the generator service provider as suggested in the documentation.</p>
if ($this->app->environment() == 'local') {
</span>  $this->app->register('Laracasts\Generators\GeneratorsServiceProvider');
</span>}
</span></code></pre>
In config/app.php</code> Add the Pusher service provider.  Do not add the facade as at the time of writing there is an issue with it.</p>
'Vinkla\Pusher\PusherServiceProvider'
</span></code></pre>
Create a new migration for a table called messages</p>
php artisan make:migration:schema create_messages_table --schema="name:string, body:string"
</span></code></pre>
The first field, name</code>, will be the user's name.  The second field, body</code>, will be the content of the message.  You might be tempted to rename body</code> to content</code> (as I was).  I recommend that you don't because Ember's controllers and templates set content</code> to the current model which makes things unnecessaryly confusing.</p>
If you haven't configured your database settings then now is the time.  I'm using Sqlite for this application which works perfectly well. Run the migration afterwards.</p>
php</span> artisan migrate
</span></code></pre>
You will need to remove the global CSRF token protection provided by Laravel.  If your app has other non-API routes then I recommend wrapping them in Route::group</code> with the CSRF middleware.  You can remove the global middleware in app/Http/Kernal.php</code> by removing the App\Http\Middleware\VerifyCSRFToken</code> line.</p>
At this point make sure you have signed up at Pusher</a> and create your first application. </p>
In your terminal publish the Pusher configuration file with this command</p>
php</span> artisan vendor:publish
</span></code></pre>
Open up app/config/pusher.php</code> and add your auth_key</code>, secret</code> and app_id</code> to the main</code> array. These can be found on your Pusher application's dashboard.</p>
In app/Http/routes.php</code> add a new resource route.</p>
<?php
</span>Route</span>::</span>resource</span>('</span>messages</span>', '</span>MessagesController</span>', ['</span>only</span>' => ['</span>index</span>', '</span>store</span>', '</span>show</span>']]);
</span></code></pre>
You'll only be using index</code> and store</code> but it's worth defining show</code> incase Ember tries to fetch a single row.</p>
Now create the controller</p>
php</span> artisan make:controller MessagesController
</span></code></pre>
Open up app/Http/Controllers/MessagesController.php</code> and update the code as follows:</p>
<?php </span>namespace </span>App\Http\</span>Controllers</span>;
</span>
</span>use </span>App\Http\</span>Requests</span>;
</span>use </span>App\Http\Controllers\</span>Controller</span>;
</span>use </span>App\</span>Message</span>;
</span>
</span>use </span>Illuminate\Http\</span>Request</span>;
</span>use </span>Input</span>;
</span>use </span>Response</span>;
</span>use </span>GuzzleHttp\</span>Client</span>;
</span>use </span>Vinkla\Pusher\</span>PusherManager</span>;
</span>
</span>
</span>class </span>MessagesController </span>extends </span>Controller </span>{
</span>
</span>  </span>protected </span>$</span>message</span>;
</span>  </span>protected </span>$</span>pusher</span>;
</span>
</span>  </span>public function </span>__construct</span>(</span>Message </span>$</span>message</span>, </span>PusherManager </span>$</span>pusher</span>)
</span>  {
</span>    </span>$</span>this</span>-></span>message </span>= $</span>message</span>;
</span>    </span>$</span>this</span>-></span>pusher </span>= $</span>pusher</span>;
</span>  }
</span>
</span>	</span>/**
</span>	 * Display a listing of the resource.
</span>	 *
</span>	 * </span>@return</span> Response
</span>	 */
</span>	</span>public function </span>index</span>()
</span>	{
</span>    </span>$</span>messages </span>= $</span>this</span>-></span>message</span>-></span>orderBy</span>(</span>'</span>id</span>'</span>, </span>'</span>desc</span>'</span>)-></span>take</span>(</span>5</span>)-></span>get</span>();
</span>
</span>    </span>return </span>Response</span>::</span>json</span>([</span>'</span>messages</span>' => $</span>messages</span>-></span>toArray</span>()]);
</span>	}
</span>
</span>	</span>/**
</span>	 * Store a newly created resource in storage.
</span>	 *
</span>	 * </span>@return</span> Response
</span>	 */
</span>	</span>public function </span>store</span>()
</span>	{
</span>    </span>$</span>message </span>= $</span>this</span>-></span>message</span>-></span>create</span>(</span>Input</span>::</span>get</span>(</span>'</span>message</span>'</span>));
</span>
</span>    </span>$</span>this</span>-></span>pusher</span>-></span>trigger</span>(</span>'</span>messages</span>'</span>, </span>'</span>new-message</span>'</span>, [</span>'</span>message</span>' => $</span>message</span>-></span>toArray</span>()]);
</span>
</span>    </span>return </span>Response</span>::</span>json</span>([</span>'</span>message</span>' => $</span>message</span>-></span>toArray</span>()]);
</span>	}
</span>
</span>	</span>/**
</span>	 * Display the specified resource.
</span>	 *
</span>	 * </span>@param</span>  int  $id
</span>	 * </span>@return</span> Response
</span>	 */
</span>	</span>public function </span>show</span>(</span>$</span>id</span>)
</span>	{
</span>    </span>$</span>message </span>= $</span>this</span>-></span>message</span>-></span>findOrFail</span>(</span>$</span>id</span>);
</span>
</span>    </span>return </span>Response</span>::</span>json</span>([</span>'</span>message</span>' => $</span>message</span>-></span>toArray</span>()]);
</span>	}
</span>}
</span></code></pre>
I have used dependancy injection for the Message</code> model and for PusherManager</code> which are set in the constructor.</p>
You may also notice that the JSON responses wrap message</code> for single objects and messages</code> for collections.  This is how Ember will expect its data.</p>
If you're familiar with Ember then you might be already be considering converting the keys to camel case (created_at to createdAt etc). Don't worry about this for now.</p>
You can also see this line of code</p>
$this->pusher->trigger('messages', 'new-message', ['message' => $message->toArray()]);
</span></code></pre>
When you create a new row in the database you want to tell Pusher so that each client can be notified.</p>
The index</code> method on line 30 takes the latest 5 messages.  This as a nice way to introduce newly connected users to the chat without bombarding them with thousands of messages.  Feel free to adjust this to your preference.</p>
At this point it's a good idea to test that the API for creating messages works because it's the trickiest to debug.</p>
There are a few ways that you can do this.  I've been using Paw</a> which is a really sweet REST client.  Postman - REST client</a> is an incredible free alternative. </p>
If you're thinking, "stop throwing all of these stupid apps in my face. Give me the Curl command!" then here you go.</p>
curl -X</span> POST</span> -d </span>"</span>message[name]=Mitch</span>"</span> -d </span>"</span>message[body]=this is a message</span>" '</span>http://realtime.dev/messages</span>'
</span></code></pre>
Ember</h2>
Here's a preview of the final application:</p>
</p>
Once the messages reach the input fields a scrollbar will appear. The scrollbar will automatically scroll to the bottom when a new message is received.</p>
Go ahead and install Ember CLI if you haven't already</p>
npm</span> install</span> -g</span> ember-cli phantomjs
</span></code></pre>
For reference I'm using the following package versions with IO.js v1.2.0</a></p>

Ember-CLI 0.2.1</li>
Ember 1.10</li>
Ember-CLI-HTMLBars 0.7.4</li>
Ember Data 1.0.0-beta.16</li>
jQuery 1.11.2</li>
</ul>
Make a new Ember application.  I recommend doing so outside of your Laravel directory.</p>
ember</span> new realtime
</span></code></pre>
After it's set up install the following add ons</p>
ember</span> install:addon ember-cli-pusher
</span>npm</span> install</span> --save-dev</span> ember-cli-content-security-policy
</span></code></pre>
In your configuration file located at config/environment.js</code> add your pusher key to the APP</code> property.</p>
PUSHER_OPTS: {
</span> key: '</span><KEYHERE></span>',
</span> connection: {},
</span> logAllEvents: </span>false
</span>}
</span></code></pre>
Then above the return ENV;</code> add these Content Security Policy settings - this is necessary for Pusher's data to be retrieved. You can remove the bootstrap stylesheet in style-src</code> if you wish to include it locally or not at all.</p>
ENV</span>['</span>contentSecurityPolicy</span>'] = {
</span>    '</span>default-src</span>': "</span>'none'</span>",
</span>    '</span>script-src</span>': "</span>'self' http://stats.pusher.com/</span>",
</span>    '</span>connect-src</span>': "</span>'self' ws://ws.pusherapp.com/</span>", 
</span>    '</span>img-src</span>': "</span>'self'</span>",
</span>    '</span>style-src</span>': "</span>'self' 'unsafe-inline' http://maxcdn.bootstrapcdn.com/</span>",
</span>    '</span>media-src</span>': "</span>'self'</span>",
</span>  };
</span></code></pre>
Make messages</code> the root route in app/router.js</code></p>
import </span>Ember </span>from </span>'</span>ember</span>';
</span>import </span>config </span>from </span>'</span>./config/environment</span>';
</span>
</span>var </span>Router </span>= </span>Ember</span>.</span>Router</span>.</span>extend</span>({
</span>  location: </span>config</span>.</span>locationType
</span>});
</span>
</span>Router</span>.</span>map</span>(</span>function</span>() {
</span>  </span>this</span>.</span>resource</span>('</span>messages</span>', {path: '</span>/</span>'}, </span>function</span>() {});
</span>});
</span>
</span>export default </span>Router</span>;
</span></code></pre>
Run the following command to change the RestAdapter</code> to one that will work with our API.</p>
ember g adapter application
</span></code></pre>
In app/adapters/application.js</code> update the adapter name like so:</p>
import </span>DS </span>from </span>'</span>ember-data</span>';
</span>
</span>export default </span>DS</span>.</span>ActiveModelAdapter</span>.</span>extend</span>({
</span>});
</span></code></pre>
ActiveModel</code> is a thin wrapper around the Ruby on Rails' ORM ActiveRecord</code>.  I'm using this adapter because the API expects data in the same format. This is why you don't need to worry about updating camel case properties to snake case: ActiveModelAdapter</code> handles it all for you.</p>
Create a message</code> model which defines the message properties.</p>
ember</span> g model message
</span></code></pre>
// app/models/message.js
</span>import </span>DS </span>from </span>'</span>ember-data</span>';
</span>
</span>export default </span>DS</span>.</span>Model</span>.</span>extend</span>({
</span>  name: </span>DS</span>.</span>attr</span>('</span>string</span>'),
</span>  body: </span>DS</span>.</span>attr</span>('</span>string</span>'),
</span>  createdAt: </span>DS</span>.</span>attr</span>('</span>string</span>'),
</span>  updatedAt: </span>DS</span>.</span>attr</span>('</span>string</span>')
</span>});
</span></code></pre>
Now create the messages route which will use the message model</p>
ember</span> g route messages
</span></code></pre>
// app/routes/messages.js
</span>import </span>Ember </span>from </span>'</span>ember</span>';
</span>
</span>export default </span>Ember</span>.</span>Route</span>.</span>extend</span>({
</span>  </span>model</span>: </span>function</span>() {
</span>    </span>return </span>this</span>.</span>store</span>.</span>find</span>('</span>message</span>');
</span>  }
</span>});
</span></code></pre>
The messages controller is the most complex part of the application. Create it with the following command.</p>
ember</span> g controller messages
</span></code></pre>
// app/controllers/messages.js
</span>import </span>Ember </span>from </span>'</span>ember</span>';
</span>import </span>{ </span>Bindings </span>} </span>from </span>'</span>ember-pusher/bindings</span>';
</span>
</span>export default </span>Ember</span>.</span>ArrayController</span>.</span>extend</span>(</span>Bindings</span>, {
</span>  sortProperties: ['</span>createdAt</span>'],
</span>  sortAscending: </span>true</span>,
</span>  logPusherEvents: </span>true</span>,
</span>  PUSHER_SUBSCRIPTIONS: {
</span>    messages: ['</span>new-message</span>']
</span>  },
</span>  </span>isValid</span>: </span>function</span>() {
</span>    </span>return </span>(</span>this</span>.</span>get</span>('</span>name</span>') && </span>this</span>.</span>get</span>('</span>body</span>'));
</span>  }.</span>property</span>('</span>name</span>', '</span>body</span>'),
</span>  actions: {
</span>    </span>newMessage</span>: </span>function</span>(</span>data</span>) {
</span>      </span>var </span>_this </span>= </span>this</span>,
</span>      </span>chat </span>= </span>jQuery</span>('</span>#chat</span>');
</span>
</span>      </span>Ember</span>.</span>run</span>.</span>later</span>((</span>function</span>() {
</span>        </span>_this</span>.</span>store</span>.</span>push</span>('</span>message</span>', </span>_this</span>.</span>store</span>.</span>normalize</span>('</span>message</span>', </span>data</span>.</span>message</span>));
</span>        </span>Ember</span>.</span>run</span>.</span>schedule</span>( '</span>afterRender</span>', </span>function </span>() {
</span>          </span>chat</span>.</span>animate</span>({scrollTop: </span>chat</span>[</span>0</span>].</span>scrollHeight </span>});
</span>        });
</span>      }), </span>200</span>);
</span>    },
</span>    </span>send</span>: </span>function</span>() {
</span>      </span>var </span>_this </span>= </span>this</span>;
</span>      </span>if</span>(</span>this</span>.</span>get</span>('</span>isValid</span>')) {
</span>        </span>var </span>message </span>= </span>this</span>.</span>store</span>.</span>createRecord</span>('</span>message</span>', {
</span>          name: </span>this</span>.name,
</span>          body: </span>this</span>.body
</span>        });
</span>        </span>message</span>.</span>save</span>().</span>then</span>(</span>function</span>() {
</span>          </span>_this</span>.</span>set</span>('</span>body</span>', '');
</span>        });
</span>      } </span>else </span>{
</span>        </span>alert</span>('</span>Please enter a name and a message.</span>');
</span>      }
</span>    }
</span>  }
</span>});
</span></code></pre>
There's a lot of interesting stuff going on here.</p>
You're importing Ember-pusher on line 2 and on lines 8-10 we subscribe to the 'new-message' event from Pusher.  When you receive this event Ember will automatically call the action of the same name (but camel cased).</p>
On lines 6 and 7 you're setting how the data will be sorted.  Chat systems generally show the latest messages at the bottom so that's why createdAt</code> is sorted ascending. Do not sort by id because sortProperties</code> only supports strings and therefore '10' comes before '2'. This will give the appearance of a completely random order.</p>
This newMessage</code> action pushes the new message onto the model.  It waits a short moment to prevent duplicate entries on the client of the original message with Ember.run.later</code>.</p>
The scrollbar for the chat system needs to automatically scroll to the bottom so that new messages can be seen. To do this Ember.run.schedule</code> is run with afterRender</code> (after the new message has been added to the DOM) and then jQuery is used to animate the chat to the bottom of the screen.</p>
The last action, send</code>, is called when the form in the template is submitted.  The isValid</code> property checks that the name</code> and body</code> has been filled in before sending to the API. Then after the message is saved the body</code> value is cleared so the user can start writing new messages in the input field.</p>
For the user interface I've chosen to use Twitter Bootstrap 3.2.</p>
Add the bootstrap stylesheet it into app/index.html</code></p>
<</span>link </span>rel</span>="</span>stylesheet</span>" </span>href</span>="</span>//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css</span>">
</span></code></pre>
and add the following styles into app/styles/app.css</code></p>
.</span>message </span>{
</span>  background-color: </span>#f3f3f4</span>;
</span>  color: </span>rgba</span>(</span>0</span>, </span>0</span>, </span>0</span>, </span>0.5</span>);
</span>  border-color: </span>rgba</span>(</span>0</span>, </span>0</span>, </span>0</span>, </span>0.1</span>);
</span>  margin-top: </span>20px</span>;
</span>  margin-bottom: </span>0px</span>;
</span>  padding: </span>15px</span>;
</span>  border: </span>1px </span>solid;
</span>  border-radius: </span>4px</span>;
</span>}
</span>.</span>message</span>:</span>first-child </span>{
</span>  margin-top: </span>0px</span>;
</span>}
</span>
</span>#chat </span>{
</span>  overflow: auto;
</span>  height: </span>340px</span>;
</span>}
</span>
</span>.</span>form-chat </span>{
</span>  margin-top: </span>20px</span>;
</span>}
</span></code></pre>
Update app/templates/application.hbs</code> like so</p>
<</span>div </span>class</span>="</span>container</span>">
</span>  <</span>div </span>class</span>="</span>row</span>">    
</span>    <</span>div </span>class</span>="</span>col-xs-12</span>">
</span>      <</span>h2 </span>id</span>="</span>title</span>">Ember Chat</</span>h2</span>>
</span>    </</span>div</span>>
</span>  </</span>div</span>>
</span>  {{outlet}}
</span></</span>div</span>>
</span></code></pre>
Then in app/templates/messages.hbs</code></p>
  <</span>div </span>class</span>="</span>row</span>">    
</span>    <</span>div </span>class</span>="</span>col-xs-12</span>">
</span>      <</span>div </span>id</span>="</span>chat</span>">
</span>        {{#each message in arrangedContent}}
</span>          {{message-row message=message}}
</span>        {{/each}}
</span>      </</span>div</span>>
</span>    </</span>div</span>>
</span>  </</span>div</span>>
</span>  <</span>form </span>{{action </span>"</span>send</span>"</span> </span>on</span>="</span>submit</span>"</span>}} class</span>="</span>form-chat</span>">
</span>    <</span>div </span>class</span>="</span>row</span>">    
</span>      <</span>div </span>class</span>="</span>col-xs-2</span>">
</span>        {{input placeholder="Name" classNames="form-control" value=name}}
</span>      </</span>div</span>>
</span>      <</span>div </span>class</span>="</span>col-xs-9</span>">
</span>        {{input placeholder="Message" classNames="form-control" value=body}}
</span>      </</span>div</span>>
</span>      <</span>div </span>class</span>="</span>col-xs-1 text-right</span>">
</span>        <</span>button </span>{{bind-attr class</span>="</span>:btn :btn-primary isValid::disabled</span>"</span>}}</span>>Send</</span>button</span>>
</span>      </</span>div</span>>
</span>    </</span>div</span>>
</span>  </</span>form</span>>
</span></code></pre>
Here there is a form with an action send</code> which is sent to the messages controller. The send button has 2 static classes and 1 dynamic one.  When the controller's isValid</code> property is false then the disabled</code> class will be added to the button - giving it the appearance of being unusable.</p>
On lines 4-6 the messages are looped through and sent to a message-row</code> component which we'll create next.</p>
ember g component message-row
</span></code></pre>
in app/components/message-row.js</code></p>
import </span>Ember </span>from </span>'</span>ember</span>';
</span>
</span>export default </span>Ember</span>.</span>Component</span>.</span>extend</span>({
</span>  tagName: '</span>div</span>',
</span>  classNames: ['</span>message</span>'],
</span>  message: </span>null
</span>});
</span></code></pre>
And for the template in app/templates/components/message-row.hbs</code></p>
[{{message.createdAt}}] {{message.name}}: {{message.body}}
</span></code></pre>
Components are partials with no context.  You can adjust their settings in app/components/*.js</code> and adjust the templates in app/templates/components/*.hbs</code>.</p>
If you haven't already then fire up Ember! Note the proxy argument which allows you to use Ember with your Laravel API.</p>
ember server --proxy http://realtime.dev
</span></code></pre>
Preview</h2>
Here's a short video of the system in action. There are two browser windows are used to show the new messages being loaded in realtime.</p>

</iframe>
</div>
Conclusion</h2>
In this article I have shown you how to set up a simple Laravel 5 API that's compatible with Ember JS.  I used Pusher to send realtime notifications to clients and discussed some of the alternatives briefly.  I then set up the chat system in Ember which sends and receives messages in realtime.</p>
In some ways I've found this project easy but in others I feel I have failed. I'm quite disapointed that I couldn't get Firehose to work with Ember and if I had more time I would have liked to have pursued it further.</p>
This application was done in one weekend and in my opinion it is far from finished. It could definitely do with authentication and there are some kinks that need to be ironed out.</p>
One kink in particular is when a client sends a message it's pushed to the top of the chat because the createdAt</code> timestamp is not set.  This fixes itself when the Pusher event updates it but it's not ideal.</p>
I believe this could easily be fixed by adding moment.js</code> and inserting the current time when creating a new record. If you've created the application yourself then I definitely recommend doing this as the next step.</p>


Bootstrap 2 pagination in Laravel 5
2015-03-21T00:00:00+00:00
I recently had to help port a website that used Twitter Bootstrap 2 to Laravel 5 and discovered that changing the pagination template is completely different in Laravel 5.</p>
</span>
Thanks to this StackOverflow thread</a> I came up with this solution.</p>
In short: Laravel 5 makes use of presenter classes to style pagination.</p>
You can put this class wherever you like. It's down to how you structure your project.</p>
In this example I put the class in a file named BootstrapTwoPresenter.php</code> which lives inside of a newly created app/Presenters</code> directory.</p>
The class inherits from Laravel 5's BootstrapThreePresenter</code> because Bootstrap 2 and Bootstrap 3 pagination are very similar.</p>
<?php </span>namespace </span>App\</span>Presenters</span>;
</span> 
</span>use </span>Illuminate\Pagination\</span>BootstrapThreePresenter</span>;
</span> 
</span>class </span>BootstrapTwoPresenter </span>extends </span>BootstrapThreePresenter
</span>{
</span>  </span>public function </span>render</span>()
</span>  {
</span>    </span>if</span>( </span>! $</span>this</span>-></span>hasPages</span>())
</span>      </span>return </span>''</span>;
</span>
</span>    </span>return </span>sprintf</span>(
</span>      </span>'</span><div class="pagination"><ul>%s %s %s</ul></div></span>'</span>,
</span>      </span>$</span>this</span>-></span>getPreviousButton</span>(),
</span>      </span>$</span>this</span>-></span>getLinks</span>(),
</span>      </span>$</span>this</span>-></span>getNextButton</span>()
</span>    );
</span>  }
</span>}
</span></code></pre>
In your views you can insert the new class into the render</code> method for the desired results.</p>
{!! $users->render(new App\Presenters\BootstrapTwoPresenter($users)) !!}
</span></code></pre>
If you wish to customise the pagination further then the following methods are available to override.</p>
<?php </span>namespace </span>App\</span>Presenters</span>;
</span> 
</span>use </span>Illuminate\Pagination\</span>BootstrapThreePresenter</span>;
</span> 
</span>class </span>BootstrapTwoPresenter </span>extends </span>BootstrapThreePresenter
</span>{
</span>  </span>public function </span>render</span>()
</span>  {
</span>    </span>if</span>( </span>! $</span>this</span>-></span>hasPages</span>())
</span>      </span>return </span>''</span>;
</span>
</span>    </span>return </span>sprintf</span>(
</span>      </span>'</span><div class="pagination"><ul>%s %s %s</ul></div></span>'</span>,
</span>      </span>$</span>this</span>-></span>getPreviousButton</span>(),
</span>      </span>$</span>this</span>-></span>getLinks</span>(),
</span>      </span>$</span>this</span>-></span>getNextButton</span>()
</span>    );
</span>  }
</span>
</span>  </span>protected function </span>getDisabledTextWrapper</span>(</span>$</span>text</span>)
</span>  {
</span>    </span>return </span>'</span><li class="disabled"><a href="#"></span>'.$</span>text</span>.'</span></a></li></span>'</span>;
</span>  }
</span>  </span>protected function </span>getActivePageWrapper</span>(</span>$</span>text</span>)
</span>  {
</span>    </span>return </span>'</span><li class="active"><a href="#"></span>'.$</span>text</span>.'</span></a></li></span>'</span>;
</span>  }
</span>  </span>protected function </span>getDots</span>()
</span>  {
</span>    </span>return </span>$</span>this</span>-></span>getDisabledTextWrapper</span>(</span>'</span>&hellip;</span>'</span>);
</span>  }
</span>}
</span></code></pre>


Simple Search with Laravel and ElasticSearch
2015-01-10T00:00:00+00:00
I was recently asked to make a search engine for a client's website. Normally I would go down the MySQL fulltext search route but I was feeling rather adventurous at the time.  I had no experience with ElasticSearch, Apache Solr or any other search system prior to this so I decided to pick ElasticSearch and dive in head first. This tutorial is a result of some of the things I picked up while learning it.</p>
I aim to show you how to set up the Elasticquent</a> Laravel package and some basic ways to fine tune your search engine.</p>
</span>
Note:</strong> This tutorial is aimed at developers who are already familiar with Laravel but are new to ElasticSearch and want some guidance on getting them to work together.</p>
Installing ElasticSearch</h2>
If you haven't installed ElasticSearch then make sure you check the ElasticSearch documentation</a> for setting it up. Although not necessary it's worth running through the rest of the getting started guide to understand the basics of how ElasticSearch works.</p>
I also recommend Postman App</a> if you use Chrome.  Postman will let you run REST commands in a nice GUI rather than using command line.</p>
Confirm that your ElasticSearch instance is running by the following command in your command line / Postman App.</p>
curl -XPOST 'http://localhost:9200/?pretty'
</span></code></pre>
You should see a nice prettified json response if everything is working okay.</p>
{
</span>    "</span>status</span>": </span>200</span>,
</span>    "</span>name</span>": "</span>Mystique</span>",
</span>    "</span>cluster_name</span>": "</span>elasticsearch_mitch</span>",
</span>    "</span>version</span>": {
</span>        "</span>...</span>"
</span>    },
</span>    "</span>tagline</span>": "</span>You Know, for Search</span>"
</span>}
</span></code></pre>
Setting up Laravel</h2>
I have a fresh Laravel App up and running with a MySQL database. If you are unfamiliar see the Laravel docs on installing</a>.</p>
Packages</h2>
We'll be using 2 packages in this tutorial, Elasticquent and Faker.  You can ignore faker if you plan on importing your own data. For the sake of the tutorial I'll include it.</p>
Open composer.json and add the following to the require</code> object:</p>
"fairholm/elasticquent": "1.0.*",
</span>"fzaninotto/Faker": "1.4.*"
</span></code></pre>
Run composer update --prefer-dist</code> and we'll create our database table.</p>
Generating our database table</h2>
We're going to set up a "posts" table with 3 fields: title, content and tags.</p>
php</span> artisan migrate:make create_posts_table
</span></code></pre>
In your migration file (located in app/db/migrations/<DATETIME>_create_posts_table.php</code>) use the following code:</p>
<?php
</span>
</span>use </span>Illuminate\Database\Migrations\</span>Migration</span>;
</span>use </span>Illuminate\Database\Schema\</span>Blueprint</span>;
</span>
</span>class </span>CreatePostsTable </span>extends </span>Migration </span>{
</span>
</span>	</span>/**
</span>	 * Run the migrations.
</span>	 *
</span>	 * </span>@return</span> void
</span>	 */
</span>	</span>public function </span>up</span>()
</span>	{
</span>		</span>Schema</span>::</span>create</span>(</span>'</span>posts</span>'</span>, </span>function</span>(</span>Blueprint </span>$</span>table</span>)
</span>		{
</span>			</span>$</span>table</span>-></span>increments</span>(</span>'</span>id</span>'</span>);
</span>			</span>$</span>table</span>-></span>string</span>(</span>'</span>title</span>'</span>);
</span>			</span>$</span>table</span>-></span>text</span>(</span>'</span>content</span>'</span>);
</span>			</span>$</span>table</span>-></span>string</span>(</span>'</span>tags</span>'</span>);
</span>			</span>$</span>table</span>-></span>timestamps</span>();
</span>		});
</span>	}
</span>
</span>
</span>	</span>/**
</span>	 * Reverse the migrations.
</span>	 *
</span>	 * </span>@return</span> void
</span>	 */
</span>	</span>public function </span>down</span>()
</span>	{
</span>		</span>Schema</span>::</span>drop</span>(</span>'</span>posts</span>'</span>);
</span>	}
</span>
</span>}
</span></code></pre>
Do a migration and then we'll move on to generating some dummy data.</p>
php artisan migrate
</span></code></pre>
Dummy data</h2>
We're going to set up a bunch of test data in a seeder file.  This will let us test that the search works without the hassle of inserting data manually.</p>
Our initial post model should look like this app/model/Post.php</code></p>
<?php
</span>
</span>class </span>Post </span>extends </span>Eloquent </span>{
</span>  </span>public </span>$</span>fillable </span>= </span>[</span>'</span>title</span>'</span>, </span>'</span>content</span>'</span>, </span>'</span>tags</span>'</span>];
</span>}
</span></code></pre>
Create app/database/seeds/PostsTableSeeder.php</code> and add the following code</p>
<?php 
</span>
</span>class </span>PostsTableSeeder </span>extends </span>Seeder </span>{
</span>
</span>
</span>    </span>public function </span>run</span>()
</span>    {
</span>        </span>// Remove any existing data
</span>        </span>DB</span>::</span>table</span>(</span>'</span>pages</span>'</span>)-></span>truncate</span>();
</span>
</span>        </span>$</span>faker </span>= </span>Faker\</span>Factory</span>::</span>create</span>();
</span>        
</span>        </span>// Generate some dummy data
</span>        </span>for</span>(</span>$</span>i</span>=</span>0</span>; </span>$</span>i</span><</span>30</span>; </span>$</span>i</span>++</span>) {
</span>          </span>Post</span>::</span>create</span>([
</span>            </span>'</span>title</span>' => $</span>faker</span>-></span>sentence</span>(</span>3</span>),
</span>            </span>'</span>content</span>' => $</span>faker</span>-></span>paragraph</span>(</span>5</span>),
</span>            </span>'</span>tags</span>' => </span>join</span>(</span>'</span>,</span>'</span>, </span>$</span>faker</span>-></span>words</span>(</span>5</span>))
</span>          ]);
</span>        }
</span>    }
</span>
</span>}
</span></code></pre>
After running php artisan db:seed --class="PostsTableSeeder"</code> we should now have plenty of test data to work with!</p>
Setting up Elasticquent</h2>
Let's edit our model in app/models/Post.php</code> and add the following:</p>
<?php
</span>use </span>Elasticquent\</span>ElasticquentTrait</span>;
</span>
</span>class </span>Post </span>extends </span>\Eloquent </span>{
</span>  </span>use </span>ElasticquentTrait</span>;
</span>
</span>  </span>public </span>$</span>fillable </span>= </span>[</span>'</span>title</span>'</span>, </span>'</span>content</span>'</span>, </span>'</span>tags</span>'</span>];
</span>
</span>  </span>protected </span>$</span>mappingProperties </span>= </span>array</span>(
</span>    </span>'</span>title</span>' => </span>[
</span>      </span>'</span>type</span>' => '</span>string</span>'</span>,
</span>      </span>"</span>analyzer</span>" => "</span>standard</span>"</span>,
</span>    ],
</span>    </span>'</span>content</span>' => </span>[
</span>      </span>'</span>type</span>' => '</span>string</span>'</span>,
</span>      </span>"</span>analyzer</span>" => "</span>standard</span>"</span>,
</span>    ],
</span>    </span>'</span>tags</span>' => </span>[
</span>      </span>'</span>type</span>' => '</span>string</span>'</span>,
</span>      </span>"</span>analyzer</span>" => "</span>stop</span>"</span>,
</span>      </span>"</span>stopwords</span>" => </span>[</span>"</span>,</span>"</span>]
</span>    ],
</span>  );
</span>}
</span>
</span></code></pre>
On line 2 we create the Elasticquent Trait shortcut and on line 5 we include it in our class.</p>
Line 9 we add our mapping configuration for ElasticSearch.  You can read more about mappings here</a>.</p>
Each mapping has a type and an analyzer. Type's can be various data types including strings, numbers and dates.  For now we will stick to the string type but be aware that different types allow you to take advantage of different things.  You can learn more about the types that ElasticSearch supports here</a></p>
The analyzer determines how ElasticSearch stores your data for searching. I've chosen standard</code> for title and content and stop</code> for tags.  The standard analyzer will remove HTML and grammar and index each word separately.  The stop analyzer can be set to choose which characters split the words for indexing.</p>
As an example take this sentence:</p>

I love laravel, ElasticSearch and Laravel work well together.</p>
</blockquote>
With a standard analyzer ElasticSearch will create a list like this:</p>

i</li>
love</li>
laravel,</li>
elasticsearch</li>
and</li>
laravel</li>
work</li>
well</li>
together</li>
</ul>
With our settings the stop analyzer will group them like this:</p>

I love laravel</li>
ElasticSearch and Laravel work well together.</li>
</ul>
This can be advantagous if you want to prioritise certain phrases.</p>
Now we've configured how we want our search to operate it's time to index our database!</p>
Let's use Laravel's REPL to generate our ElasticSearch data. Go to your command line and type </p>
php</span> artisan tinker
</span></code></pre>
Type the following commands</p>
Post::createIndex($shards = null, $replicas = null);
</span>
</span>Post::putMapping($ignoreConflicts = true);
</span>
</span>Post::addAllToIndex();
</span></code></pre>
The first command sets up our index.  An index is sort of like a database table in the ElasticSearch world.</p>
putMapping()</code> takes the mapping properties we set in the model so that ElasticSearch knows how to index all of our data.</p>
addAllToIndex()</code> takes all the data from the database and puts it into ElasticSearch</p>
Useful ElasticSearch API methods</h2>
Elasticquent sets up our index as "default" by default.  We can view our mappings by using the following curl request</p>
curl</span> localhost:9200/default/_mapping?pretty
</span></code></pre>
{
</span>  "</span>default</span>" : {
</span>    "</span>mappings</span>" : {
</span>      "</span>posts</span>" : {
</span>        "</span>properties</span>" : {
</span>          "</span>content</span>" : {
</span>            "</span>type</span>" : "</span>string</span>",
</span>            "</span>analyzer</span>" : "</span>standard</span>"
</span>          },
</span>          "</span>created_at</span>" : {
</span>            "</span>type</span>" : "</span>string</span>"
</span>          },
</span>          "</span>id</span>" : {
</span>            "</span>type</span>" : "</span>long</span>"
</span>          },
</span>          "</span>tags</span>" : {
</span>            "</span>type</span>" : "</span>string</span>",
</span>            "</span>analyzer</span>" : "</span>stop</span>"
</span>          },
</span>          "</span>title</span>" : {
</span>            "</span>type</span>" : "</span>string</span>",
</span>            "</span>analyzer</span>" : "</span>standard</span>"
</span>          },
</span>          "</span>updated_at</span>" : {
</span>            "</span>type</span>" : "</span>string</span>"
</span>          }
</span>        }
</span>      }
</span>    }
</span>  }
</span>}
</span></code></pre>
In ElasticSearch a table is called a type.  We can view all of the documents in a specific type with this query:</p>
curl 'localhost:9200/default/posts/_search?pretty'
</span></code></pre>
We can do a basic do a basic search by altering the above command slightly</p>
curl </span>'</span>localhost:9200/default/posts/_search?q=title:searchterm&pretty</span>'
</span></code></pre>
And we can view a specific document with this</p>
curl </span>'</span>localhost:9200/default/posts/1?pretty</span>'
</span></code></pre>
For more info on the ElasticSearch API check out the documentation</a></p>
Creating the front end</h2>
Add a route to app/routes.php</code></p>
<?php
</span>Route</span>::</span>get</span>('</span>/</span>', ['</span>as</span>' => '</span>search</span>', '</span>uses</span>' => </span>function</span>() {
</span>
</span>  </span>// Check if user has sent a search query
</span>  </span>if</span>($</span>query </span>= </span>Input</span>::</span>get</span>('</span>query</span>', </span>false</span>)) {
</span>    </span>// Use the Elasticquent search method to search ElasticSearch
</span>    $</span>posts </span>= </span>Post</span>::</span>search</span>($</span>query</span>);
</span>  } </span>else </span>{
</span>    </span>// Show all posts if no query is set
</span>    $</span>posts </span>= </span>Post</span>::</span>all</span>(); 
</span>  }
</span>
</span>  </span>return </span>View</span>::</span>make</span>('</span>home</span>', </span>compact</span>('</span>posts</span>'));
</span>  
</span>}]);
</span></code></pre>
Make a template in app/views/home.blade.php</code></p>
<</span>html</span>>
</span><</span>body</span>>
</span>{{ Form::open(['method' => 'get', 'route' => 'search']) }}
</span>
</span>  {{ Form::input('search', 'query', Input::get('query', ''))}}
</span>  {{ Form::submit('Filter results') }}
</span>
</span>{{ Form:: close() }}
</span>
</span>@foreach($posts as $post)
</span> <</span>div</span>>
</span>  <</span>h2</span>>{{{ $post->title }}}</</span>h2</span>>
</span>  <</span>div</span>>{{{ $post->content }}}</</span>div</span>>
</span>  <</span>div</span>><</span>small</span>>{{{ $post->tags }}}</</span>small</span>></</span>div</span>>
</span> </</span>div</span>>
</span>@endforeach
</span></</span>body</span>>
</span></</span>html</span>>
</span></code></pre>
In the above snippet we create a form that allows us to type in a search term. Below the form we iterate either through all of the posts or all of the search results depending on whether the user has entered a search term.</p>
Here's how it looks currently.</p>
</p>
We could stop now and the search would work fairly well. But where is the fun in that? Let's tinker and see how we can improve our search results.</p>
Fine-tuning your search</h2>
Elasticquent has another method called searchByQuery()</code> which will allow us to specify more details on how we want ElasticSearch to query our data. Here's an example (taken and modified from the Elasticquent docs)</p>
<?php
</span>$</span>posts </span>= </span>Post</span>::</span>searchByQuery</span>(['</span>match</span>' => ['</span>title</span>' => </span>Input</span>::</span>get</span>('</span>query</span>', '')]]);
</span></code></pre>
In the above example only the title is searched. How does this differ from the search()</code> method behind the scenes? The search()</code> query will match all parameters including our content and tags fields.</p>
If we try searching our data now with text from the content</code> field you will notice drastically different results.  We may even notice different results when you take data from the title fields, too.  This is because ElasticSearch generates a score from the data it searches. Any relevant text in the queried fields will improve that score.</p>
Let's give our title</code> priority so that searches that match our titles will appear above those that only appear in the content.</p>
<?php
</span>$</span>posts </span>= </span>Post</span>::</span>searchByQuery</span>([
</span>  '</span>multi_match</span>' => [
</span>    '</span>query</span>' => </span>Input</span>::</span>get</span>('</span>query</span>', ''),
</span>    '</span>fields</span>' => [ "</span>title^5</span>", "</span>content</span>"]
</span>  ],
</span>]);
</span></code></pre>
The caret symbol (^) lets ElasticSearch know we want the title field to have added weight to it by the number that follows it.</p>
That's all well and good, but now we want to search our tags because they have specific keywords and phrases we want to match in the search results.</p>
<?php
</span>$</span>posts </span>= </span>Post</span>::</span>searchByQuery</span>([
</span>  '</span>match_phrase</span>' => [
</span>    '</span>tags</span>' => </span>Input</span>::</span>get</span>('</span>query</span>', '')
</span>  ]
</span>]);
</span></code></pre>
To make use of both searches we need to do a compound query.  There are many types of compound query but the one we'll use is the bool</code> query.</p>
<?php
</span>$</span>posts </span>= </span>Post</span>::</span>searchByQuery</span>([
</span>  "</span>bool</span>" => [
</span>    '</span>must</span>' => [
</span>      '</span>multi_match</span>' => [
</span>        '</span>query</span>' => </span>Input</span>::</span>get</span>('</span>query</span>', ''),
</span>        '</span>fields</span>' => [ "</span>title^2</span>", "</span>content</span>"]
</span>      ],
</span>    ],
</span>    "</span>should</span>" => [
</span>      '</span>match</span>' => [
</span>        '</span>tags</span>' => [
</span>          "</span>query</span>" => </span>Input</span>::</span>get</span>('</span>query</span>', ''),
</span>          "</span>type</span>" => "</span>phrase</span>"
</span>        ]
</span>      ]
</span>    ]
</span>  ]
</span>]);
</span></code></pre>
In a bool</code> query we can specify three parameters: must</code>, should</code> and must_not</code>.  In ours we have specified we must get a match from the title or content field and that we can optionally also get a match from the tags field.</p>
We can also completely filter out specific terms if they are irrelevent with a filter.  Here we're using the not_filter</a>.  You can read more on filters here</a></p>
<?php
</span>$</span>posts </span>= </span>Post</span>::</span>searchByQuery</span>([
</span>  '</span>filtered</span>' => [
</span>    '</span>filter</span>' => [
</span>      '</span>not</span>' => [
</span>        '</span>terms</span>' => ['</span>title</span>' => ['</span>impedit</span>', '</span>voluptatem</span>']]
</span>      ]
</span>    ],
</span>    '</span>query</span>' => [
</span>      "</span>bool</span>" => [
</span>        '</span>must</span>' => [
</span>          '</span>multi_match</span>' => [
</span>            '</span>query</span>' => </span>Input</span>::</span>get</span>('</span>query</span>', ''),
</span>            '</span>fields</span>' => [ "</span>title^2</span>", "</span>content</span>"]
</span>          ],
</span>        ],
</span>        "</span>should</span>" => [
</span>          '</span>match</span>' => [
</span>            '</span>tags</span>' => [
</span>              "</span>query</span>" => </span>Input</span>::</span>get</span>('</span>query</span>', ''),
</span>              "</span>type</span>" => "</span>phrase</span>"
</span>            ]
</span>          ]
</span>        ]
</span>      ]
</span>    ],
</span>  ],
</span>]);
</span></code></pre>
Between lines 2-7 we're specifying that when 'impedit' or 'voluptatem' are not in the title. </p>
If we had a published</code> field in out database another useful filter would be to only search published posts.</p>
<?php
</span>$</span>pages </span>= $</span>this</span>-></span>page</span>-></span>searchByQuery</span>([
</span>  '</span>filtered</span>' => [
</span>    '</span>filter</span>' => [
</span>      '</span>term</span>' => ['</span>published</span>' => '</span>1</span>']
</span>    ],
</span>    '</span>query</span>' => [
</span>      '</span>multi_match</span>' => [
</span>        '</span>query</span>' => </span>Input</span>::</span>get</span>('</span>query</span>', ''),
</span>        '</span>fields</span>' => [ "</span>title^2</span>", "</span>content</span>"]
</span>      ],
</span>    ],
</span>  ],
</span>]);
</span></code></pre>
Summary</h2>
That's it for our search.  We've looked at setting up Elasticquent with our model and looked several ways we can customise our search results. </p>
We can use queries to order our search results by score, we can create compound queries for more complex search results and filters for simple boolean queries.</p>
Although Elasticquent is great for a basic search engine there's also the official ElasticSearch client for PHP</a> for when you need something more advanced such as fragment highlighting or autocomplete. </p>
I'm really enjoying what I've learned so far with ElasticSearch and I'm very glad that I decided to pick it up.  I also really recommend ElasticSearch Server - Second Edition</a> (Amazon referral link).  I'm about 40% of the way through and I've learned a lot already.</p>



Laravel 4.1 one-to-one polymorphic relationships
2014-01-20T00:00:00+00:00
To use one-to-one polymorphic relationships in Laravel 4.1  use the "morphOne" method in your models.</p>
For example: I have two tables, pages and products.  I want to be able to add one featured image to each of these.</p>
The Product model would look like this:</p>
<?php
</span>class </span>Product </span>extends </span>Eloquent </span>{
</span>	</span>public function </span>image</span>() {
</span>		</span>return </span>$</span>this</span>-></span>morphOne</span>(</span>'</span>FeaturedImage</span>'</span>, </span>'</span>imageable</span>'</span>);
</span>	}
</span>}
</span></code></pre>
The Page model would be:</p>
<?php
</span>class </span>Page </span>extends </span>Eloquent </span>{
</span>	</span>public function </span>image</span>() {
</span>		</span>return </span>$</span>this</span>-></span>morphOne</span>(</span>'</span>FeaturedImage</span>'</span>, </span>'</span>imageable</span>'</span>);
</span>	}
</span>}
</span></code></pre>
</span>
For the FeaturedImage table you would need to columns imageable_id:integer</code> and imageable_type</code>.</p>
Then in your FeaturedImage model you can have:</p>
<?php
</span>class </span>FeaturedImage </span>extends </span>Eloquent </span>{
</span>	</span>public function </span>imageable</span>()
</span>	{
</span>			</span>return </span>$</span>this</span>-></span>morphTo</span>();
</span>	}
</span>}
</span></code></pre>
This will allow you to use polymorphism on one-to-one relationships</p>


Creating a Twitter Feed in Laravel 4
2013-08-16T00:00:00+00:00
This tutorial is now out of date - checkout philo/laravel-twitter</a> or thujohn/twitter</a> for an easier and more up to date solution.</em></p>
In this tutorial I aim to show three things</p>

How to get Twitteroath working with Laravel 4</li>
How to create and access a new configuration file for your twitter settings</li>
How  to create a  helper method for your tweets</li>
</ul>
To start off install twitteroath</a> via composer.</p>
Put line 4 in your composer.json</code> with the rest of the Laravel Composer set up and run composer update</code> or composer install</code> if you haven't already</p>
{
</span>	"</span>require</span>": {
</span>		"</span>laravel/framework</span>": "</span>4.0.*@dev</span>",
</span>		"</span>abraham/twitteroauth</span>": "</span>dev-add-composer-json</span>"
</span>	},
</span>	"</span>autoload</span>": {
</span>		"</span>classmap</span>": [
</span>			"</span>app/commands</span>",
</span>			"</span>app/controllers</span>",
</span>			"</span>app/models</span>",
</span>			"</span>app/database/migrations</span>",
</span>			"</span>app/database/seeds</span>",
</span>			"</span>app/tests/TestCase.php</span>"
</span>		]
</span>	},
</span>	"</span>scripts</span>": {
</span>		"</span>post-update-cmd</span>": "</span>php artisan optimize</span>"
</span>	},
</span>	"</span>minimum-stability</span>": "</span>dev</span>"
</span>}
</span></code></pre>
</span>
While that's running head over to dev.twitter.com</a> and sign in with your Twitter account.  If you haven't already made consumer tokens and access tokens now is the time to do so!</p>
Making access and consumer tokens</h2>
Go to my applications, create a new application and fill in the details.  After you create your application you will be asked if you want to create an access token from your Twitter account.  Make sure you do it!</p>
After that's done you can view your applications details by going to My applications.</p>
</p>
Click on your newly created application and take note of your Consumer key, Consumer secret, Access token and Access token secret.</p>
Now in your Routes you should be able to do the following</p>
Route::get('/', function()
</span>{
</span>$connection = new TwitterOAuth('consumer\_key', 'consumer\_secret', 'access\_token', 'access\_secret\_token');
</span>	$tweets = $connection->get("https://api.twitter.com/1.1/statuses/user\_timeline.json?screen\_name=TWITTER\_ACCOUNT\_NAME&count=2");
</span>return json_encode($tweets);
</span>});
</span></code></pre>
Going to your applications route should show your tweets in JSON format now - however, I hardly find this organization in the spirit of Laravel so let's clean it up a little!</p>
Creating and accessing a new configuration file</h2>
Within app/config</code> create a new file called twitter.php</code> with the following:</p>
return array(
</span>  'consumer_key' => 'consumer_key_here',
</span>  'consumer_secret' => 'consumer_secret_here',
</span>  'access_token' => 'access_token_here',
</span>  'access_secret_token' => 'access_secret_token_here',
</span>  'twitter_user' => 'mitchartemis'
</span>);
</span></code></pre>
Now we can change our route.php</code> to have the following:</p>
$connection = new TwitterOAuth(Config::get('twitter.consumer_key'), Config::get('twitter.consumer_secret'), Config::get('twitter.access_token'), Config::get('twitter.access_secret_token'));
</span>$tweets = $connection->get("https://api.twitter.com/1.1/statuses/user_timeline.json?screen_name=".Config::get('twitter.twitter_user')."&count=5");
</span></code></pre>
Now that's working you might feel that you need to use this multiple times within the application.  Having it in a route or controller method isn't ideal for this.</p>
Creating a helper method for your tweets</h2>
Create a new file called helpers.php</code> in theapp/</code> folder.</p>
Now we can put any functions we want to use more than once in here.  So let's make a simple one for Twitter.</p>
function twitterFeed()
</span>{
</span>	$connection = new TwitterOAuth(Config::get('twitter.consumer_key'), Config::get('twitter.consumer_secret'), Config::get('twitter.access_token'), Config::get('twitter.access_secret_token'));
</span>	$tweets = $connection->get("https://api.twitter.com/1.1/statuses/user_timeline.json?screen_name=".Config::get('twitter.twitter_user')."&count=5");
</span>
</span>	return $tweets;
</span>}
</span></code></pre>
Inside of routes we can now remove the 2 lines of code and use</p>
$tweets = twitterFeed();
</span></code></pre>
At this point if you try the code you will most likely not be able to access the twitterFeed()</code> funtion.  To use we must add it to composer.json</code> as shown below</p>
{
</span>	"</span>require</span>": {
</span>		"</span>laravel/framework</span>": "</span>4.0.*@dev</span>",
</span>		"</span>abraham/twitteroauth</span>": "</span>dev-add-composer-json</span>"
</span>	},
</span>	"</span>autoload</span>": {
</span>		"</span>classmap</span>": [
</span>			"</span>app/commands</span>",
</span>			"</span>app/controllers</span>",
</span>			"</span>app/models</span>",
</span>			"</span>app/database/migrations</span>",
</span>			"</span>app/database/seeds</span>",
</span>			"</span>app/tests/TestCase.php</span>"
</span>		],
</span>		"</span>files</span>": [
</span>			"</span>app/helpers.php</span>"
</span>		]
</span>	},
</span>	"</span>scripts</span>": {
</span>		"</span>post-update-cmd</span>": "</span>php artisan optimize</span>"
</span>	},
</span>	"</span>minimum-stability</span>": "</span>dev</span>"
</span>}
</span></code></pre>
Between lines 15-18 I have added the helpers.php to an array with the key of "files".  Now run composer update</code> and you're all set!</p>


Automating Configurations with Laravel
2013-08-07T00:00:00+00:00
One of my favourite features of Laravel is how it handles configurations for different environments.  You can have different settings for development, staging, beta, production and even separate configurations for each developer working on the project.</p>
With a fresh version of Laravel installed: take a look at the app/bootstrap/start.php</code> file.  Near the top of the file you should see the following snippet of code:</p>
<?php
</span>$</span>env </span>= $</span>app</span>-></span>detectEnvironment</span>(</span>array</span>(
</span>	'</span>local</span>' => </span>array</span>('</span>your-machine-name</span>'),
</span>));
</span></code></pre>
Within the detectEnvironment()</code> method you can define an array of configurations.</p>
If you and a friend or coworker are working on a project and using Git to keep track of changes you could use the following:</p>
<?php
</span>$</span>env </span>= $</span>app</span>-></span>detectEnvironment</span>(</span>array</span>(
</span>	'</span>mitch</span>' => </span>array</span>('</span>mitch-machine-name</span>'),
</span>	'</span>tom</span>' => </span>array</span>('</span>tom-machine-name</span>'),
</span>));
</span></code></pre>
Laravel will detect which configuration to use from your computer's hostname.</p>
</span>Finding your Hostname</h3>
To get your machine's name go in to the command prompt and enter hostname</code>.  The output should be your computer's hostname put this in your array.</p>
If you want to use the same settings across multiple computers you can add multiple values to the second array like so:</p>
<?php
</span>$</span>env </span>= $</span>app</span>-></span>detectEnvironment</span>(</span>array</span>(
</span>	'</span>development</span>' => </span>array</span>('</span>mitch-machine-name1</span>', '</span>mitch-machine-name2</span>'),
</span>));
</span></code></pre>
Editing your New Configurations</h3>
The key of the array corresponds with the name of a folder.  In my case I would add a development/</code> folder within app/config/</code> to become app/config/development/</code>.  Any files or settings you put in here will override the default settings!</p>
Copy your app/config/database.php</code> to app/config/development/database.php</code>.  Now any settings you change in this new file will be used on your machine.</p>
It's a little unnecessary to include the whole database.php</code> again.  With Laravel we can pick and choose which settings we want to update as simply as this:</p>
<?php
</span>return </span>array</span>(
</span>
</span>	'</span>connections</span>' => </span>array</span>(
</span>
</span>		'</span>sqlite</span>' => </span>array</span>(
</span>			'</span>driver</span>'   => '</span>sqlite</span>',
</span>			'</span>database</span>' => </span>__DIR__</span>.'</span>/../database/production.sqlite</span>',
</span>			'</span>prefix</span>'   => '',
</span>		),
</span>
</span>		'</span>mysql</span>' => </span>array</span>(
</span>			'</span>driver</span>'    => '</span>mysql</span>',
</span>			'</span>host</span>'      => '</span>localhost</span>',
</span>			'</span>database</span>'  => '</span>database</span>',
</span>			'</span>username</span>'  => '</span>root</span>',
</span>			'</span>password</span>'  => '',
</span>			'</span>charset</span>'   => '</span>utf8</span>',
</span>			'</span>collation</span>' => '</span>utf8_unicode_ci</span>',
</span>			'</span>prefix</span>'    => '',
</span>		),
</span>
</span>		'</span>pgsql</span>' => </span>array</span>(
</span>			'</span>driver</span>'   => '</span>pgsql</span>',
</span>			'</span>host</span>'     => '</span>localhost</span>',
</span>			'</span>database</span>' => '</span>database</span>',
</span>			'</span>username</span>' => '</span>root</span>',
</span>			'</span>password</span>' => '',
</span>			'</span>charset</span>'  => '</span>utf8</span>',
</span>			'</span>prefix</span>'   => '',
</span>			'</span>schema</span>'   => '</span>public</span>',
</span>		),
</span>
</span>		'</span>sqlsrv</span>' => </span>array</span>(
</span>			'</span>driver</span>'   => '</span>sqlsrv</span>',
</span>			'</span>host</span>'     => '</span>localhost</span>',
</span>			'</span>database</span>' => '</span>database</span>',
</span>			'</span>username</span>' => '</span>root</span>',
</span>			'</span>password</span>' => '',
</span>			'</span>prefix</span>'   => '',
</span>		),
</span>
</span>	),
</span>);
</span></code></pre>
Notice how the only settings I'm returning in the whole of database.php</code> are the connections</code>.  That's because I want everything else to use the default settings!</p>
Final Laravel configuration example</h3>
At the beginning of this blog I mentioned that you could have a configuration for development, staging, beta, production.  Well just as a reference here's an example of what it would look like!</p>
<?php
</span>$</span>env </span>= $</span>app</span>-></span>detectEnvironment</span>(</span>array</span>(
</span>    '</span>development</span>' => </span>array</span>('</span>your-machine-name</span>', '</span>your-second-machine-name</span>'),
</span>    '</span>staging</span>' => </span>array</span>('</span>staging-machine-name</span>'),
</span>    '</span>beta</span>' => </span>array</span>('</span>beta-machine-name</span>'),
</span>    '</span>production</span>' => </span>array</span>('</span>production-machine-name</span>'),
</span>));
</span></code></pre>
I hope you found this blog useful! For more information on Laravel configurations make sure to check out the documentation</a></p>

- Laravel

Laravel Elixir with Bootstrap SASS and Font Awesome

Making moderation easy

Realtime chat with Laravel, Ember JS and Pusher

Ember</h2> Here's a preview of the final application:</p> </p> Once the messages reach the input fields a scrollbar will appear. The scrollbar will automatically scroll to the bottom when a new message is received.</p> Go ahead and install Ember CLI if you haven't already</p>

Bootstrap 2 pagination in Laravel 5

Simple Search with Laravel and ElasticSearch

Setting up Laravel</h2> I have a fresh Laravel App up and running with a MySQL database. If you are unfamiliar see the Laravel docs on installing</a>.</p>

Dummy data</h2> We're going to set up a bunch of test data in a seeder file. This will let us test that the search works without the hassle of inserting data manually.</p> Our initial post model should look like this app/model/Post.php</code></p>

Fine-tuning your search</h2> Elasticquent has another method called searchByQuery()</code> which will allow us to specify more details on how we want ElasticSearch to query our data. Here's an example (taken and modified from the Elasticquent docs)</p>

Laravel 4.1 one-to-one polymorphic relationships

Creating a Twitter Feed in Laravel 4

Automating Configurations with Laravel

Setting up Laravel</h2>
I have a fresh Laravel App up and running with a MySQL database. If you are unfamiliar see the Laravel docs on installing</a>.</p>