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
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
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 $
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
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!