Javascript laravel's friend

6,554 views
6,236 views

Published on

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
6,554
On SlideShare
0
From Embeds
0
Number of Embeds
48
Actions
Shares
0
Downloads
121
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

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!

×