Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Javascript laravel's friend

7,794 views

Published on

Published in: Technology
  • Be the first to comment

Javascript laravel's friend

  1. 1. Javascript Laravel's friend
  2. 2. Introduction ● Bart (@denbatte) ● Teacher ● PHP/Laravel enthousiast ● Slides will be available on slideshare
  3. 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. 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. 5. The game - Login
  6. 6. The game - Dashboard
  7. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 17. Giving PHP data to Javascript Request Response Grab response $
  18. 18. Giving PHP data to Javascript The easy way
  19. 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. 20. Giving PHP data to Javascript The even more easy “Jeffrey” way
  21. 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. 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. 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. 24. Making a ajax call to a controller Request Response
  25. 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. 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. 27. Using named routes ● Import generated routes.js using JQuery or require.js JQuery snippet $.getScript( "ajax/test.js");
  28. 28. Questions ● Shoot, I will try to answer them now or I will come back to you later. ● Now lets play this game!

×