PHP Slim Framework with Angular

PHP Slim Framework &
AngularJS Framework
함께 써보기
2015.10.07
@XeHub
정진태, wePlanet
ModernPHP User Group 10월 정기모임
부제: 두 개를 어떻게 섞어서 사용하였는가?

Webframeworks.kr 의 홍보
2015 wePlanet 2

WHY – 어떤 프로젝트?
2015 wePlanet 3
(내부망)(외부망)
모바일
어플리케이션
서버
관리자
웹콘솔
• 서버는2대로 구성해주세요
1. Mobile Application Server - 외부망
2. Web Console Server + Database – 내부망
• 개발 언어는 PHP 나 ASP로 해주세요.
• php로는 api만, angular로는 프론트만 구성
• KISA SEED 암호화 사용 (PHP, JSP, ASP 지원)

WHY – 왜 이프레임워크를?
2015 wePlanet 4
• 개발 생산성 높은 웹 프론트 프레임워크가 필요.
• by Google.
• 웹 개발자가 쓰고싶데요!
• 고객사 및 우리 팀에 익숙했던 언어 => PHP 선택.
• 모바일 어플리케이션을 지원하기 위해 REST API 개발이 필요하지만,
보안관련 솔류션으로 생각보다 개발 범위가 좁았기에 Micro framework으로 결정
=> Slim.
• 모던한 느낌의 웹 디자인이 필요.
• 내부 관리자용 웹콘솔이기 때문에, 콤포넌트에 대한 수정요구는 적음.
• by Twitter.

Slim Framework : micro framework for PHP
2015 wePlanet 5

Angular JS Framework : HTML Enhanced for web apps!
• 템플릿
• 양방향 데이터 바인딩
• MVC 구조
• 지시자 Directive를 이용한 HTML 확장
• 의존관계 주입 Dependency Injection
• 단일 페이지 웹 어플리케이션(SPA)을 위한 Router
• $q를 이용한 자바스크립트 비동기 프로그래밍 지원
• 자바스크립트 테스팅 지원
• CSS3 Animation 처리 지원
• 모바일 터치 이벤트 지원
2015 wePlanet 6
출처 http://webframeworks.kr/getstarted/angularjs/

설치 및 구성 - 설치
• Slim 설치 - composer 이용
• $composer require slim/slim 혹은 composer.json 에 slim 추가
• $ php composer.phar install
• index.php 에서 호출
<?php
require ‘vendoer/autoload.php’;
• Angular 설치
• npm 이용시
• $ npm install angular
• index.html에 <script> 추가
<script src=“/node_modules/angular/angular.js”></script>
• bower 이용시
• $ bower install angular
• index.html에 <script> 추가
<script src=“/bower_components/angular/angular.js”></script>
2015 wePlanet 7

설치 및 구성 - 구성
+ app
+ backend // php파일들 위치
+ images
+ scripts // angular 파일들 위치
+ assets
+ controllers
+ directives
+ filters
+ services
- app.js
+ styles
+ vendor // composer를 통한 설치
- autoload.php
+ views // html 파일
- composer.json
- index.html
- index.php
- .htaccess
+ bower_components
+ node_modules
+ test
+ dist
- bower.json
- package.json
2015 wePlanet 8

설치 및 구성 – index.php
• <?php
require 'vendor/autoload.php';
session_cache_limiter(false);
session_cache_expire(15);
session_start();
$app = new SlimSlim();
/**
* API routing
*/
$app->group('/api', function() use ($app) {
$app->response->headers->set('Content-Type', 'application/json');
$app->response->headers->set('Access-Control-Allow-Origin', '*');
/**
* REST /api/user
*/
$app->group(’/user', function() use ($app) {
$app->get('/xxxx', function () use ($app) {
include './backend/xxxx.php';
});
});
});
/**
* Rendering page
*/
$app->get('/', function () use ($app) {
$app->response->headers->set('Content-Type', 'text/html');
readfile('index.html');
});
$app->notFound(function () use ($app) {
$app->response->headers->set('Content-Type', 'text/html');
readfile('404.html');
});
$app->run();
2015 wePlanet 9

설치 및 구성 – index.html
• <body ng-app=“angularApp”>
<script src="scripts/app.js"></script>
2015 wePlanet 10

설치 및 구성 – app.js
• 'use strict';
angular
.module(‘angularApp', [
'ngResource',
'ngRoute',
...
'angular-loading-bar'
])
.config(['$routeProvider', function ($routeProvider) {
$routeProvider
.when('/login', {
templateUrl: 'views/login.html',
controller: 'LoginCtrl',
access: {
isFree: true
}
})
.when('/', {
templateUrl: 'views/main.html',
controller: 'MainCtrl',
resolve: ensureAuth()
})
.when('/users', {
templateUrl: 'views/users.html',
controller: 'UsersCtrl',
resolve: ensureAuth()
})
.otherwise({
redirectTo: '/'
});
//$locationProvider.html5Mode(false);
function ensureAuth() {
return {
isAuth: ['$http', '$location', ‘SampleAuth ', function ($http, $location, SampleAuth) {
return SampleAuth.get().then(function() {
// success
}, function() {
$location.path('/login');
});
}]
};
}
}]);
2015 wePlanet 11

설치 및 구성 – Angular
+ scripts // angular 파일들 위치
+ assets // 앵귤러 프레임워크에서 공통으로 사용하려는 자원들 (라이브러리 등)
+ controllers // Controller 파일들 위치
+ directives // Extended HTML. view단에서 태그와 같이 사용
+ filters // Controller에서 데이터 값을 변형하기 위해 사용
+ services // api 호출을 위한 로직을 담당(DAO 역활)
- app.js
2015 wePlanet 12

후기
• 발표자료를 만들기 위해 Slim에 대한 내용을 다시 검색 중 이런
글을 발견
“슬림은 ‘PHP: The Right Way’라는 글로 유명한 조쉬 록하트(Josh Lockhart)가 개발한
마이크로 프레임워크다. 조쉬 록하트가 라라벨(Laravel)을 보고 슬림 개발을 중단 할까
고민했지만 다행이도 계속 소소하게 개발이 이뤄지고 있다. 여담이지만 그만큼 라라벨은
대단한 프레임워크다. 루비에 루비 온 레일즈(Ruby on Rails), 파이썬에 장고(Django)가
있다면 PHP에는 라라벨이 있다고 할 수 있다. ”
– 출처 http://bookworm.pe.kr/wordpress/2014/02/06/2873
• 다음 번 발표는 라라벨로 도전!
2015 wePlanet 13

PHP Slim Framework with Angular

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

En vedette

En vedette (20)

Similaire à PHP Slim Framework with Angular

Similaire à PHP Slim Framework with Angular (20)

PHP Slim Framework with Angular

Notes de l'éditeur