Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Javascript Laravel's friend

Javascript Laravel's friend

How to use Javascript in combination with the Laravel 4 framework.

35617c1bde6460e06755ffada7d55ee8?s=128

Bart Van den Brande

March 27, 2015
Tweet

Transcript

  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!