<?php preg_replace( '/[^a-z][A-Z]/', '', $stringOfText )
CakePHP3 and Gulp file
Step 1. – Install Cakephp3 using
composer create-project --prefer-dist cakephp/app my_app_name
Step 2. – I’ve already installed npm on my machine…
Step 3. In cake’s folder src/Template/Pages/home.ctp we’ll add inside <head></head> tags this line:
<?php= $this->element('assets'); ?>
Step 3. Let’s create the assets.ctp file though…
In src/Template/Element/dev create assets.ctp file with this content
<?php
echo $this->Html->css('{{css}}');
echo $this->Html->script('{{main}}');
echo $this->fetch('css');
echo $this->fetch('script');
echo $this->fetch('meta');
echo $this->Html->meta('favicon.ico', '/favicon.ico', array('type' => 'icon'));
?>
This file is going to be used as a template when creating the src/Template/Element/assets.ctp – but this file will be created on the fly by gulp.
Step 4. In the ./ of our project create the gulpfile.js with this content:
var gulp = require('gulp'),
uglify = require('gulp-uglify'),
jshint = require('gulp-jshint'),
jshintStylish = require('jshint-stylish'),
concat = require('gulp-concat'),
less = require('gulp-less'),
minifyCSS = require('gulp-minify-css'),
replace = require('gulp-replace'),
sourcemaps = require('gulp-sourcemaps'),
del = require('del'),
rename = require('gulp-rename'),
gutil = require('gulp-util'),
browserSync = require('browser-sync'),
typescript = require('gulp-typescript');
//Random number we'll use to append to JS and CSS files
var myLess = [
'webroot/css/main.less',
'webroot/css/variables.less',
'webroot/css/base.css'
];
var vendorScripts = [
];
var myScripts = [
"webroot/js/test.js",
"webroot/js/services.js",
"webroot/js/controllers/search.js",
"webroot/js/filters.js",
"webroot/js/directives.js",
"webroot/js/chartjs-directive.js",
"webroot/js/controllers/**/*.js",
];
var allScripts = vendorScripts.concat(myScripts);
var randNumber = Math.floor((Math.random() * 1000000) + 1);
//Minify JS files
gulp.task('scripts', function() {
return gulp.src(allScripts)
.pipe(uglify())
.pipe(concat('main-' + randNumber + '.min.js'))
.pipe(gulp.dest('webroot/js'));
});
gulp.task('legacyScripts', function() {
return gulp.src([
//"webroot/js/legacy/expenses.js",
])
.pipe(uglify({mangle: false}))
.pipe(concat('main.min.js'))
.pipe(gulp.dest('webroot/js/legacy'));
});
//Linting
gulp.task('scriptlint', function () {
return gulp.src(myScripts)
.pipe(jshint({
//camelcase: true,
forin: true,
freeze: true,
funcscope: true,
newcap: true,
nonbsp: true,
latedef: true,
unused: true,
maxcomplexity: 14
}))
.pipe(jshint.reporter(jshintStylish));
});
//Convert LESS to CSS and minify
gulp.task('less', function() {
return gulp.src('webroot/css/main.less')
.pipe(less())
.pipe(rename(function(path){
path.extname = '-' + randNumber + '.css';
}))
.pipe(minifyCSS())
.pipe(gulp.dest('webroot/css'))
// .pipe('bower_components/angular-chart.js/dist/angular-chart.css')
.pipe(browserSync.reload({stream:true}));
});
gulp.task('legacyLess', function() {
return gulp.src('webroot/js/legacy/legacy.less')
.pipe(less())
.pipe(minifyCSS())
.pipe(gulp.dest('webroot/css'))
.pipe(browserSync.reload({stream:true}));
});
gulp.task('bs-reload', function () {
browserSync.reload();
});
//Update base.ctp with random file name
gulp.task('filecache', function() {
return gulp.src(['src/Template/Element/dev/assets.ctp'])
.pipe(replace(/{{main}}/g, 'main-' + randNumber + '.min'))
.pipe(replace(/{{css}}/g, 'main-' + randNumber))
.pipe(gulp.dest('src/Template/Element/'));
});
gulp.task('browser-sync', function () {
browserSync({
proxy: 'internal.dev:8000',
});
});
gulp.task('startup', function() {
del(['webroot/js/main*']);
del(['webroot/css/main-*']);
gulp.watch(allScripts, ['scripts', 'scriptlint', 'filecache', 'bs-reload']);
gulp.watch(myLess, ['less', 'filecache']);
gulp.watch(['src/Template/**/*.ctp', '!src/Template/Element/dev/assets.ctp', '!Template/Element/assets.ctp'], ['bs-reload']);
});
gulp.task('default', ['startup', 'filecache', 'scripts', 'less', 'legacyScripts', 'legacyLess', 'browser-sync']);
Step 5. The file above assumes you have
- webroot/js/test.js – is just for testing that it’s working..
- webroot/css/main.less – content bellow:
@path: "";
@import "@{path}base.css";
@import "@{path}cake.css";
Now execute ‘gulp’ on CLI
Good React Tutorial
Angular JS bind data to page with CakePhp
<?php $response = array(); $response[] = array( 'policy_id' => $policy['Policy']['id'],
'letter_send_date' => $this->JobsLetter->getLetterSendDate($policy['AccountItem']['relation_id'])
);
$this->set([
'response' => $response,
'_serialize' => ['response']
]);
?>
<js>
(function (angular) {
"use strict";
angular.module('coreApp')
.directive('peterCoxRenewals', function () {
return {
restrict: 'E',
templateUrl: '/partials/petercox-renewals.html',
};
})
.filter (
'policyLetterAmount',
function() {
return function (p) {
return p.amount_inc_tax;
}
}
)
.controller(
'PeterCoxIndexCtrl',
['$scope', '$http', 'pagination',
function ($scope, $http, pagination) {
}
]
)
.controller(
'PeterCoxRenewalsCtrl',
['$scope', '$http', 'pagination', '$window',
function ($scope, $http, pagination) {
pagination.init($scope, '/peterCox/getRenewals.json');
$scope.limits = ['100', '500', '1000', '1300'];
$scope.processSelected = function() {
$scope.processSaving = true;
$http.post('/peterCox/processRenewals.json', {id: $scope.getSelectedIds()})
.then(function (amounts) {
angular.forEach($scope.items, function (item) {
if (item.selected) {
item.already_processed = true;
}
angular.forEach(amounts.data.new_amounts_inc_tax, function(k) {
if (k.policy_id == item.id) {
item.amount_inc_tax = k.amount_inc_tax;
item.letter_send_date = k.letter_send_date;
}
});
});
$scope.processSaving = false;
//window.location.reload();
return true;
}, function () {
return false;
}
);
}
}
]
)
;
}(angular));
And in HTML we have
<tr ng-repeat="p in items" ng-if="!paginatorLoading">
<td ng-if="!hideProcess"><input type="checkbox" ng-change="select(p)" ng-model="p.selected" ng-if="itemSelectable(p)"></td>
<td><a ng-href="/policy/get/{{p.id}}/{{p.scheme_prefix}}{{p.policy_id | lpad:6}}.pdf" target="_blank">{{::p.alpha_id}}</a></td>
<td>{{::p.next_renewal_date}}</td>
<td><a href="/core#/jobs/{{::p.job_id}}">{{::p.job_id}}</a></td>
<!--
<td>{{::p.amount_inc_tax | coreCurrency:'£'}}</td>
-->
<td ng-bind-html="p | policyLetterAmount"></td>
<!--
<td>{{::p.letter_send_date}}</td>
-->
<td ng-bind-html="p | policyLetterSendDate"></td>
<td>{{::p.address}}</td>
<td ng-bind-html="p | policyLetterStatus"></td>
</tr>
Install Cakephp 3 on docker
1. create a folder ‘cakephp’
2. create this docker-compose.yml file:
version: ‘2’
services:
webapp:
image: reinblau/lamp:latest
ports:
– “80:80”
depends_on:
– postgres
– memcached
volumes:
– ~/development/docker/cakephp:/var/www/html
env_file: env_vars/webapp_env_vars.env
memcached:
image: memcached:latest
postgres:
image: postgres:9.3
3. run $ docker-compose up –build -d
[iMac daniel.oraca cakephp]$ docker ps
CONTAINER ID IMAGE COMMAND CREATED STATUS PORTS NAMES
c83b622a28c1 reinblau/lamp:latest “apache2-foreground” 10 minutes ago Up 2 minutes 0.0.0.0:80->80/tcp cakephp_webapp_1
7195d09fbd10 postgres:9.3 “/docker-entrypoint.s” 11 minutes ago Up 10 minutes 5432/tcp cakephp_postgres_1
db475665040f memcached:latest “docker-entrypoint.sh” 11 minutes ago Up 10 minutes 11211/tcp cakephp_memcached_1
4. exec the shell of lamp container:
$ docker exec -it c83b622a28c1 /bin/bash
5. Navigate to /var/www/html
6. Install composer (https://getcomposer.org/download/)
$ php -r “copy(‘https://getcomposer.org/installer’, ‘composer-setup.php’);”
$ php -r “if (hash_file(‘SHA384’, ‘composer-setup.php’) === ‘e115a8dc7871f15d853148a7fbac7da27d6c0030b848d9b3dc09e2a0388afed865e6a3d6b3c0fad45c48e2b5fc1196ae’) { echo ‘Installer verified’; } else { echo ‘Installer corrupt’; unlink(‘composer-setup.php’); } echo PHP_EOL;”
$ php composer-setup.php
$ php -r “unlink(‘composer-setup.php’);”
7. $ mv composer.phar /usr/local/bin/composer
8. composer self-update && composer create-project –prefer-dist cakephp/app my_app_name
9. install vim:
$ apt-get update
$ apt-get install vim
10. vim /etc/apache2/sites-enabled/000-default.conf
11. Change DocumentRoot /var/www/html/{{my_app_name}}
12. $ service apache2 reload
env_vars/webapp_env_vars.env file contains this:
DB_HOST=postgres
DB_PORT=5432
DB_USER=some_cool_dev
DB_PASSWORD=OMG_PLS_K33P_4_S3CRET
MEMCACHED_HOST=memcached
MEMCACHED_PORT=11211
SOME_VARIABLE_MY_WEBAPP_READS=a_value_i_use_to_configure_it
Don't Forget 