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
- GitHub README
- Github /Tests/
- 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
Příklad: http://jsfiddle.net/zS9Ex/1/
<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