This document summarizes a presentation about integrating JavaScript with Laravel. The speaker will explore building a game using Laravel and demonstrate how to: 1) Prepare Laravel by installing packages, generating database migrations and models, and setting up routes and controllers. 2) Add jQuery and custom scripts to views using Blade templating. 3) Pass PHP data to JavaScript in templates, either directly or using the laracasts/utilities package. 4) Make AJAX calls from JavaScript to Laravel controllers to retrieve and update data, including using named routes from the laravel-js-routes package.

1. Javascript Laravel's friend

2. Introduction
● Bart (@denbatte)
● Teacher
● PHP/Laravel enthousiast
● Slides will be available on slideshare

3. Objectives
● Creating the best game ever!
● Exploring Laravel by doing the previous.
● Learning how Javascript integrates with Laravel
– Not using JS Frameworks (Angular) for now!

4. Preparing Laravel with composer
composer.json
"require": {
"laravel/framework": "4.1.*",
"laracasts/utilities": "1.0",
// Development packages
"way/generators": "2.*",
"barryvdh/laravel-ide-helper": "1.*",
"fzaninotto/faker": "v1.3.0",
"fedeisas/laravel-js-routes": "1.3"
}
Do not forget to add the serviceProviders at app/config/app.php

5. The game - Login

6. The game - Dashboard

7. Road map
● Preparing Laravel
– Database and models
– Routes and controllers
● Adding Jquery and custom scripts using blade
● Giving PHP data to Javascript
– The easy way
– The even more easy “Jeffrey” way
● Making a ajax call to a controller
– Using named routes
– Named routes as import

8. Preparing the database
● Migration files for users/score table
● Seeding with faker
terminal
user@device: php artisan generate:migration create_<name>_table
user@device: php artisan generate:seed
user@device: php artisan migrate –-seed
Do not forget to add database settings at app/config/database.php

9. Preparing the database
● Migration files for users/score table
● Seeding with faker
terminal
user@device: php artisan migrate –-seed
Migration file Seed file

10. Generating database models
● A model will make Eloquent understand your data.
– User.php is already there
– Adding Score.php model
terminal
user@device: php artisan generate:model Score

11. Preparing routes
app/routes.php
// Game: sessions resource – login and logout
Route::resource('sessions', 'SessionsController');
Route::get('/', 'sessionsController@create');
Route::get('login', 'sessionsController@create');
Route::get('logout', 'sessionsController@destroy');
// Actual game view
Route::get('game', "ScoreController@highscore")->before("auth");
// Score: Ajax route retrieving high score
Route::post( '/score/{level}', array(
'as' => 'score.index',
'uses' => 'ScoreController@index'
) );
// Score: Ajax route updating player score
Route::post( '/score/update', array(
'as' => 'score.update',
'uses' => 'ScoreController@update'
) );

12. Generating controllers
terminal
user@device: php artisan generate:controller ScoreController
app/controllers/ScoreController.php
public function index($level = “normal”)
{
$scoreList = Score::where("level", "=", $level)
->take("5")
->join("users", "user.id", "=", "scores.user_id")
->orderBy(“score”, “desc”);
->get()
->toJson();
return $scoreList;
}

13. Road map
● Preparing Laravel
– Database and models
– Routes and controllers
● Adding Jquery and custom scripts using blade
● Giving PHP data to Javascript
– The easy way
– The even more easy “Jeffrey” way
● Making a ajax call to a controller
– Using named routes
– Named routes as import

14. Adding Jquery and custom scripts
● Using Laravel's blade templating engine
● Global scripts/css in master template
● Specific scripts/css in sub views
Code snippet
{{ HTML::script("js/jquery.js") }}
{{ HTML::style("css/style.css") }}
● Using a asset manager
● CodeSleeve/asset-pipeline gives tons of options

15. Adding Jquery and custom scripts
Using blade
● We are inserting into layouts/default.blade.php:
SCRIPTS
● JQuery + knob
● Game mechanics
● Demo purpose scripts
STYLES
● Fontawesome
● Game css
● Google Orbitron font
Have a look for yourself at layouts/default.blade.php!

16. Road map
● Preparing Laravel
– Database and models
– Routes and controllers
● Adding Jquery and custom scripts using blade
● Giving PHP data to Javascript
– The easy way
– The even more easy “Jeffrey” way
● Making a ajax call to a controller
– Using named routes
– Named routes as import

17. Giving PHP data to Javascript
Request
Response Grab response $

18. Giving PHP data to Javascript
The easy way

19. Giving PHP data to Javascript
PHP snippet
// Response with variable
$name = “denbatte”;
return View::make(“game”, compact(“name”));
HTML/JS snippet
// Grab response variable
<script> var name = “<?php echo $name; ?>”; </script>
// Laravel blade way
<script> var name = “{{ $name }}”;</script>
● Not very scalabe
● Javascript needs to be inline

20. Giving PHP data to Javascript
The even more easy
“Jeffrey” way

21. Giving PHP data to Javascript
PHP snippet
// Response with variable
$name = “denbatte”;
Javascript::put(array("name" => $name));
return View::make(“game”);
● Making use of the laracasts/utilities plugin
● Binds arrays with variables to one view!
● game.blade.php
Have a look for yourself at scoreController.php @ highscore

22. Giving PHP data to Javascript
● Setup:
● Composer
● Add serviceprovider
● Artisan config:publish
Have a look for yourself at config.php
terminal
user@device: php artisan config:publish laracasts/utilities

23. Road map
● Preparing Laravel
– Database and models
– Routes and controllers
● Adding Jquery and custom scripts using blade
● Giving PHP data to Javascript
– The easy way
– The even more easy “Jeffrey” way
● Making a ajax call to a controller
– Using named routes
– Named routes as import

24. Making a ajax call to a controller
Request
Response

25. Making a ajax call to a controller
Jquery code snippet
$.post("score/{level}").done(function(data) {
var data = $.parseJSON(data);
// Do stuff with the data
}, 'json');
scoreController@index
public function index($level = "normal")
{
$scoreList = Score::where("level", "=", $level)
->take("5")
->join("users", "users.id", "=", "scores.user_id")
->orderBy("score", "DESC")
->get()
->toJson();
return $scoreList;
}
routes.php
Have a look for yourself at scoreController.php @ index | lara...ajax.js

26. Using named routes
● Named routes? → laravel-js-routes package
– Generates a routes.js helper file in root.
– Gives a Router object
Layout.blade.php
{{ HTML::script("/path/to/routes.js") }}
Layout.blade.php
Router.route(route_name:string, params:array)
https://github.com/fedeisas/laravel-js-routes

27. Using named routes
● Import generated routes.js using JQuery or require.js
JQuery snippet
$.getScript( "ajax/test.js");

28. Questions
● Shoot, I will try to answer them now or I will
come back to you later.
● Now lets play this game!