Javascript Laravel's friend

Introduction

Bart (@denbatte)

Teacher

PHP/Laravel enthousiast

Slides will be available on slideshare

Objectives

Creating the best game ever!

Exploring Laravel by doing the previous.

Learning how Javascript integrates with LaravelNot using JS Frameworks (Angular) for now!

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

The game - Login

The game - Dashboard

Road map

Preparing LaravelDatabase and models

Routes and controllers

Adding Jquery and custom scripts using blade

Giving PHP data to JavascriptThe easy way

The even more easy Jeffrey way

Making a ajax call to a controllerUsing named routes

Named routes as import

Preparing the database

Migration files for users/score table

Seeding with faker

terminal

user@device: php artisan generate:migration create__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

Preparing the database

Migration files for users/score table

Seeding with faker

terminal

user@device: php artisan migrate -seed

Migration fileSeed file

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

Preparing routes

app/routes.php

// Game: sessions resource login and logoutRoute::resource('sessions', 'SessionsController');Route::get('/', 'sessionsController@create');Route::get('login', 'sessionsController@create');Route::get('logout', 'sessionsController@destroy');

// Actual game viewRoute::get('game', "ScoreController@highscore")->before("auth");

// Score: Ajax route retrieving high scoreRoute::post( '/score/{level}', array( 'as' => 'score.index', 'uses' => 'ScoreController@index') );

// Score: Ajax route updating player scoreRoute::post( '/score/update', array( 'as' => 'score.update', 'uses' => 'ScoreController@update') );

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;}

Road map

Preparing LaravelDatabase and models

Routes and controllers

Adding Jquery and custom scripts using blade

Giving PHP data to JavascriptThe easy way

The even more easy Jeffrey way

Making a ajax call to a controllerUsing named routes

Named routes as import

Adding Jquery and custom scripts

Using Laravel's blade templating engineGlobal 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

Adding Jquery and custom scripts

Using blade

We are inserting into layouts/default.blade.php:

SCRIPTSJQuery + knob

Game mechanics

Demo purpose scripts

STYLES

Fontawesome

Game css

Google Orbitron font

Have a look for yourself at layouts/default.blade.php!

Road map

Preparing LaravelDatabase and models

Routes and controllers

Adding Jquery and custom scripts using blade

Giving PHP data to JavascriptThe easy way

The even more easy Jeffrey way

Making a ajax call to a controllerUsing named routes

Named routes as import

Giving PHP data to Javascript

RequestResponseGrab response $

Giving PHP data to Javascript

The easy way

Giving PHP data to Javascript

PHP snippet

// Response with variable $name = denbatte; return View::make(game, compact(name));

HTML/JS snippet

// Grab response variable var name = ;

// Laravel blade way var name = {{ $name }};

Not very scalabe

Javascript needs to be inline

Giving PHP data to Javascript

The even more easy Jeffrey way

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

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

Road map

Preparing LaravelDatabase and models

Routes and controllers

Adding Jquery and custom scripts using blade

Giving PHP data to JavascriptThe easy way

The even more easy Jeffrey way

Making a ajax call to a controllerUsing named routes

Named routes as import

Making a ajax call to a controller

RequestResponse

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

Using named routes

Named routes? laravel-js-routes packageGenerates 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

Using named routes

Import generated routes.js using JQuery or require.js

JQuery snippet

$.getScript( "ajax/test.js");

Questions

Shoot, I will try to answer them now or I will come back to you later.

Now lets play this game!