Vývoj

web aplikace s Joomla frameworkem


Jan Linhart


Ukázková aplikace

Calculoid






Podobnost s existujícími či budoucími aplikacemi čistě náhodná.



Proč JF?

Joomla! CMS



Stabilita
vs
Inovace



Mootolls, jQuery, Bootstrap, ...

Joomla!

Framework


Inovace
Svoboda


Composer, PHP Namespaces, 
jakýkoli PHP/JS/CSS framework





Jak začít s JF

Sample App

by David Hurley




$ git clone https://github.com/dbhurley/framework-app.git$ composer install


Dokumentace


Příklad: Google oAuth2

  1. Google
  2. GitHub README
  3. Github /Tests/
  4. Google PHP knihovna

Odlišnost od Joomla! CMS

JFactory není
JFactory::getApplication();JFactory::getDbo();JFactory::getUser();
Instance modelu
$model = new UserModel($this->getApplication()         $this->getInput()$this->getContainer()->get('db')); 
PHP Namespaces
$object = new stdClass();        // error$object = new \stdClass();

Single page web app - JSON API



JSON API

Návrh API v apiary.io
 GET /calculators/
< 200
< Content-Type: application/json
{
    "calcs": [ 
        {
            "id": 49,
            "name": "Body Mass Index", 
            "slug": "body-mass-index", 
            "url": "/calculator/body-mass-index", 
            "description": "Calculate the best weight for you." 
        },{
            "id": 48,
            "name": "Cubic calculator", 
            "slug": "body-mass-index", 
            "url": "/calculator/body-mass-index", 
            "description": "Calculate one number ^ 2."
        }
    ]
}


AngularJS


= MVC JavaScript framework

  • Controllers - zpracovává uživatelské interakce
  • Services - služby, např. model
  • Directives - nové HTML elementy
  • Filters - filtrování, seřazení pole
  • {{Templating system}}

Angular template



<div ng-app>
    <h1>Hello {{sometext}}</h1>
    <input ng-model="sometext">
</div>

Directive - Slider

     
     Různé možnosti vytvoření nové directivy
     
     A)
<div data-slider data-field-id="{{field.id}}"></div>
     B)
<div slider field-id="{{field.id}}"></div>
     C)
<slider field-id="{{field.id}}" />

App, router


 var calculoid = angular.module('calculoid', [
  'ngRoute',
  'calculoidControllers',
  'calculoidServices'
]);
 
calculoid.config(['$routeProvider', '$httpProvider', function($routeProvider, $httpProvider) {


    $httpProvider.defaults.useXDomain = true;
    $httpProvider.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
    $httpProvider.defaults.withCredentials = true;

    $routeProvider.
        when('/calculators', {
            templateUrl: 'partials/calc-list.html',
            controller: 'CalcListCtrl'
        }).
        when('/calculator/:slug', {
            templateUrl: 'partials/calc-detail.html',
            controller: 'CalcDetailCtrl'
        }).
        when('/calculator/config/:slug', {
            templateUrl: 'partials/calc-config.html',
            controller: 'CalcDetailCtrl'
        }).
        when('/new', {
            templateUrl: 'partials/calc-config.html',
            controller: 'CalcDetailCtrl'
        }).
        when('/calculator/', {
            templateUrl: 'partials/calc-detail.html',
            controller: 'CalcDetailCtrl'
        }).
        otherwise({
            redirectTo: '/calculators'
        });
}]);






Jan Linhart
jan@easy.cz


Joomla Framework

By Jan Linhart

Joomla Framework

  • 2,045