文章

目前顯示的是 2015的文章

[ 收集 ]How to create Helpers file in Laravel 5

解決 json_decode 結果為 null 的問題

事情是這樣滴,今天在試著介接新北市 OAuth 時發現收到的 json 字串格式看起來正確,可是 json_decode 出來都是 null ,卡了半天終於找到答案了.....

原因請看這篇

解法請看這篇,我是採用 str_replace

在取得 access_token 以及取得詳細 user 資料(回傳 xml)時先處理掉 BOM 就可以了

PS. 看來可能又是 Windows 闖的禍,看這篇

安裝 MIT App Inventor 2 官方離線版 in Ubuntu

環境:

 Virtualbox + Vagrant

vm 記憶體至少 1G(否則 ant 編譯會失敗)

OS:Ubuntu 14.04 Server x64

MIT App Inventor Public Open Source

GitHub:mit-cml/appinventor-sources

1. 安裝 oracle jdk 7(WEB UPD8
sudo add-apt-repository ppa:webupd8team/java
sudo apt-get update
sudo apt-get install oracle-java7-installer 2. 安裝以下套件
gitantlib32z1lib32ncurses5 lib32bz2-1.0lib32stdc++6 sudo apt-get install git ant lib32z1 lib32ncurses5 lib32bz2-1.0 lib32stdc++6 3. 下載 Google App Engine SDK for Java ,解壓縮到家目錄下,將資料夾更名為 appengine-java-sdk
!!注意!! 最新版(測試時是 1.9.30)可能有問題,目前確定 1.9.17 版是正常的,可從這裡下載 cd ~
wget http://central.maven.org/maven2/com/google/appengine/appengine-java-sdk/1.9.17/appengine-java-sdk-1.9.17.zip
unzip appengine-java-sdk-1.9.17.zip
mv appengine-java-sdk-1.9.17 appengine-java-sdk 如果沒有安裝 unzip,則先安裝之: sudo apt-get install unzip 
4. 下載 source code(git clone 或下載 zip),取得其中的 appinventor 資料夾(假設複製到家目錄)
git clone https://github.com/mit-cml/appinventor-sources.git
cp -Rf appinventor-sources/appinventor ~ 5. 編譯
cd ~/appinventor
ant cl…

Ubuntu 下批次變更 EXIF 的工具:exiftool

官網

最近忘了調整相機日期,以至於照片日期時間都不對,於是找到了 exiftool ,有個超棒的時間平移功能(Date/Time Shift Feature),一道指令就可以調整全部的相片。
OS:Ubuntu 15.10 x64
安裝: sudo apt-get install libimage-exiftool-perl 使用:

先將要修改的相片集中在某個資料夾,例如:fix

執行以下指令

exiftool "-DateTimeOriginal+=5:10:2 10:48:0" DIR
上面的指令是修改 DateTimeOriginal 欄位,增加(+=) 5年10個月2天(5:10:2)10小時48分0秒(10:48:0),DIR 為 fix 資料夾的路徑。

與時間有關的欄位可能不只一個,如:DateTime、DateTimeOriginal、DateTimeDigitized,不同廠牌可能有不同欄位(不確定....)。


GUI:pyExifToolGUI

安裝起來可是操作時沒有動作...... Orz


參考資料:

在 Linux Shell 使用 exiftool 清除 / 修改 EXIF 資訊用 exiftool 查看/(整批)編修圖檔裡面的文字資訊

PHP 產生 PDF 中文問題解決

今天發現在 homestead 下用 phantomjs 或 wkhtmltopdf 產生 PDF 時中文變成方塊,查了一下、發現是 server 端缺少中文字型的關係,試了兩種方法都可以解決。
方法一:
server 端安裝中文字型,如:文泉驛、思源字型
安裝文泉驛
sudo apt-get install xfonts-wqy
參考:
phantomjs截图中文网站网页页面乱码,安装字体解决
Phantomjs / Casperjs 中文网站截图乱码,安装字体解决
安裝思源字型
ubuntu 15.10 套件庫已有,之前版本可透過 ppa:createsc/3beol 安裝
sudo add-apt-repository ppa:ppa:createsc/3beol
sudo apt-get update
sudo apt-get install fonts-noto-cjk
參考:
Ubuntu環境下,手動安裝思源字型
方法二:
使用 web font,Google 有提供中文的(Google Fonts 早鳥頁
Noto Sans TC (Chinese Traditional) 還不錯呦,使用方法很簡單,以此為例
匯入 css
@import url(http://fonts.googleapis.com/earlyaccess/notosanstc.css);
在用到的 class or id 樣式加入
font-family: 'Noto Sans TC', sans-serif;
注意事項:
因為要從網路下載字型,中文字型檔通常不小,可能會跑到 timeout ,所以要注意 timeout 時間之設定,或是將匯入之 css 設定加入 server 端的 css,字型檔也下載到 server 端,然後更改 css 中字型檔載入路徑。
參考:
Google 中文網頁字型
GOOGLE FONTS 提供五種中文 WENFONT,早起的鳥兒有的玩

flexbox 學習資源

PHP remote debugging using xdebug:PhpStorm 設定

圖片
以下擷圖使用 PhpStorm 10,使用 Laravel 與 Homestead

=============================================

設定 PHP Interpreter


設定 Server,與 Homestead.yaml 對照


設定 Debug Configuration



=============================================
設定完囉!!!!


相關文章:

http://www.sitepoint.com/install-xdebug-phpstorm-vagrant/

http://www.sitepoint.com/debugging-and-profiling-php-with-xdebug/

PHP remote debugging using xdebug:server side setup

圖片
server 端設定(ubuntu)方法一:php.ini
[Xdebug] zend_extension=/path/to/xdebug.so xdebug.remote_enable=1 # xdebug.remote_connect_back=1 xdebug.remote_host=debug client's(IDE or browser) IP xdebug.remote_port=9000
方法二:新增 /etc/php5/mods-available/xdebug.ini,內容如下
zend_extension=/path/to/xdebug.so xdebug.remote_enable=1 # xdebug.remote_connect_back=1 xdebug.remote_host=debug client's(IDE or browser) IP xdebug.remote_port=9000
然後建立軟連結至 /etc/php5/apache2/conf.d/20-xdebug.ini
設定完重新啟動 apache2
Note: 1. 當 xdebug.remote_connect_back=1 時,xdebug.remote_host 的設定會被忽略 2. 以下是 laravel/homestead 的 /etc/php5/mods-available/xdebug.ini
zend_extension=xdebug.so xdebug.remote_enable = 1 xdebug.remote_connect_back = 1 xdebug.remote_port = 9000 xdebug.max_nesting_level = 512

xdebug 工作原理 (圖片來源:http://xdebug.org/docs/remote
debug client 預設監聽 9000 port
情況一: debug client IP 已知或單人開發,設定 xdebug.remote_host

debug client 發起 HTTP Request server 上之 xdebug 以 DBGP 協定連線至 debug client 9000 port debug client 以 DBGP 協定與 server x…

將 HTML 轉成 PDF

PhantomJS官網

Generating PDF files from HTML and CSS

composer package for Laravel:

danielboendergaard/phantom-pdf

-------------------------------------------------------------
wkhtmltopdf官網

Snappy PDF/Image Wrapper for Laravel 5

1. 利用 composer 安裝:

composer require barryvdh/laravel-snappy
composer require h4cc/wkhtmltopdf-amd64 0.12.x
composer require h4cc/wkhtmltoimage-amd64 0.12.x

2. publish config/snappy.php:

php artisan vendor:publish --provider="Barryvdh\Snappy\ServiceProvider" --tag=config

3. 編輯 config/snappy.php,設定 path:

for pdf:
'binary' => base_path('vendor/h4cc/wkhtmltopdf-amd64/bin/wkhtmltopdf-amd64'),

for image:
'binary' => base_path('vendor/h4cc/wkhtmltopdf-amd64/bin/wkhtmltoimage-amd64'),

4. 編輯 config/app.php,加入 ServiceProvider 和 Facade:

Barryvdh\Snappy\ServiceProvider::class,

'PDF' => Barryvdh\Snappy\Facades\SnappyPdf::class,
'Image' => Barryvdh\Snappy\Facades\SnappyImage::class,

--------------------------…

將 phpstorm 10 加入 ubuntu 啟動器

檔案上傳與圖片處理套件 for Laravel

laravel with docker

Debian / Ubuntu update-rc.d 用法

用 HTML + PhantomJS 產生 PDF

用 HTML + CSS 設計版面,透過 PhantomJS 產生 PDF

參考:

Generating PDFs from HTML and PhantomJS(以 Laravel 為例)

Generating PDF files from HTML and CSS(YouTube)

分頁:(沒試過,不知道可不可行)

How to handle PDF pagination in PhantomJS

PhantomJs - How to render a multi page PDF

Phantomjs generates multiple page PDF

安裝新版 adminer on ubuntu 14.04

Adminer 官網

套件庫中的版本為舊版的 3.3.x版,所以要用新版的就要自己裝囉,不難啦。

參考資料:
https://www.leaseweb.com/labs/2014/06/install-adminer-manually-ubuntu-14-04/
http://idroot.net/tutorials/how-to-install-adminer-on-ubuntu-14-04/

vagrant status vs vagrant global-status

vagrant status

依據當前目錄下之 Vagrantfile 或 VM id(可由 vagrant global-status 查到)查詢 VM 狀態

vagrant global-status

查詢系統中目前登入之 user 的 VM 狀態,其列表是基於 cache,可能與真實狀態不符,已移除之 VM 仍有可能存在列表之中,因此執行時最好加入參數 --prune

ubuntu-make:輕鬆安裝開發工具

Ubuntu 15.10 新增了 ubuntu-make,可以方便安裝一些開發工具,如 webstorm、phpstorm、android-studio

https://wiki.ubuntu.com/ubuntu-make

[ 好文 ] 关于 Seeder 的 truncate table 的使用

关于 Seeder 的 truncate table 的使用

有設連外鍵的要注意啊....

不錯的 lightbox javascript 套件

Lity

PhotoSwipe

看起來不錯,以後有機會試試

Laravel / Lumen 送推播的套件:laravel-push-notification

laravel-push-notification


看文件可支援 iOS 和 android 的推播,沒用過,以後可以試試

Google reCAPTCHA v2.0 教學影片

ClipGrab v3.5.1 跨平台免費 YouTube 下載軟體(Windows, Mac, Linux)

重灌狂人的介紹文

在 Ubuntu 14.04 x64 試了一下,操作還滿容易的。

下載後解壓縮,直接執行即可。

可同時下載多個檔案,但不支援播放清單下載,可搜尋播放清單

Laravel 5 angular material starter

Laravel 5 angular material starter

已經預先設定好不少東西,包括之前弄了很久的 JWT Token,下次有機會來試試看。

匯入大型 CSV 檔 in Laravel

避免跑太久 timeout 了,這篇文章用的方法 65000 筆紀錄只用了大約 10 秒就匯入 MySQL 了,超快的....

IMPORTING LARGE CSV FILES WITH PHP PART 1: IMPORT USING ONE QUERY

PSR-2 中文版

barryvdh/laravel-elfinder 中文語系調整

https://github.com/barryvdh/laravel-elfinder

在 config/app.php 中 locale 設定通常設為 zh-TW,有些套件的語系也是用 zh-TW,但 elfinder 的語系檔為 elfinder.zh_TW.js ....

記得先將 view and assets publish 出來。

asset publish 之後路徑在:

public/packages/barryvdh/elfinder

view publish 之後路徑在:

resources/views/vendor/elfinder/

步驟1:複製 public/packages/barryvdh/elfinder/js/i18n/elfinder.zh_TW.js 為 elfinder.zh-TW.js,其實開一個空檔案也可以啦,因為 controller 中只是判斷有沒有檔案而已。

步驟2:修改 view

檔案:resources/views/vendor/elfinder/elfinder.php

有兩個地方要改:

<script src="<?= asset($dir."/js/i18n/elfinder.$locale.js") ?>"></script>

lang: '<?= $locale ?>',

把 $locale 直接改成 zh_TW 吧。

如果套件有更新,記得要檢查須不需要再修改喔。

可用於非商業用途的「新蒂字體」

介紹文
下載點
我在 ubuntu 15.04 x64 下似乎無法直接用  字型檢視程式  開啟,後來是在 nautilus 中對該檔案更改屬性,在  以此開啟  加入  字型檢視程式  後,右鍵即可以  字型檢視程式  開啟。

設定 Restangular 之 base url

GitHub
Restangular 是一個方便存取 rest API 的 service for AngularJS,
症狀 若網站網址是在 web server document root,則沒有問題,如: 網址
http://www.my-site.com/
存取 users resources 時,其 request url 為
http://www.my-site.com/users

但網站網址在下層時就有問題啦,如:
網址
http://www.my-site.com/main-site/
存取 users resources 時,其 request url 正確應為
http://www.my-site.com/main-site/users
可是 Restangular 仍會存取
http://www.my-site.com/users
解法 透過 RestangularProvider 或 Restangular service 設定 Restangular 存取時之 base url 為 /main-site
參考文件
我是在 .config 中透過 RestangularProvider 設定
RestangularProvider.setBaseUrl('./');
為了避免寫死,測試結果可以相對路徑的方式設定為當前位置( ./ ),可以達到我的目的



相關文章:
use RestAngular.setBaseUrl for two api access pointsRestangular setBaseUrl in the run messed up?(有兩個例子,正確版錯誤版,可以加入 console.log方便觀察執行順序)Implementing REST services in AngularJS using Restangular(不錯的教學文)Restangular GitBookHow to use restangular(有 setBaseUrl 與 addResponseInterceptor 的例子)






font for coding

還不錯的字型 for coding

Fira Code => Jeffrey Way 偏好的字型,當然要 follow 大神囉

Hack  (介紹)

手動下載 Laravel Homestead 之 vagrant box

有時學術網路下載太慢,在家下載好在匯入比較方便啦。

1、查看版本

https://atlas.hashicorp.com/laravel/boxes/homestead

2、下載,例如下載 0.2.7 版

https://atlas.hashicorp.com/laravel/boxes/homestead/versions/0.2.7/providers/virtualbox.box

3、加入 box

vagrant box add laravel/homestead box的路徑

資料來源:

http://laravel.io/forum/05-06-2015-how-to-download-vagrant-box-manually

[ 收集 ] composer package for Laravel

以下是我常用的套件清單。

composer package 版本查詢:

Packagist Semver Checker

加速:

hirak/prestissimo: composer parallel install plugin

composer global require hirak/prestissimo

可以加快composer安裝速度的套件,可以讓 composer 也能多進程並行下載

編輯器:

barryvdh/laravel-ide-helper

除錯:

guidovanbiemen/laravel-whoops

barryvdh/laravel-debugbar

recca0120/laravel-tracy

laravel/telescope

資料庫:

doctrine/dbal

HTML:

laravelcollective/html (參考)

虛擬機:

laravel/homestead (參考)

第三方認證:

t301000/laravel-ntpc-openid

kounta/lightopenid

laravel/socialite (參考)

JWT:

tymondesigns/jwt-auth (參考)

語系:

caouecs/Laravel-lang: List of 68 languages for Laravel 5

overtrue/laravel-lang => 將 caouecs/laravel4-lang 包成 Laravel package

mcamara/laravel-localization => caouecs/laravel4-lang 單純只是語系檔,這個可以用來作多國語系網站,連 url 都可以改

laravel-tracy:另一個 Laravel Debug Tool

GitHub

安裝簡單,照著 github 上的步驟即可,debug bar 預設浮動在畫面右下角,可以拖拉移動位置,看 service provider 中的 register method,有判斷是否綁定到 container,只有在 debug 打開且不是在 console 執行時才會進行綁定,所以在 composer.json 中放在 require 即可。

將 設定檔 publish 到 config 目錄:

php artisan vendor:publish --provider="Recca0120\LaravelTracy\LaravelTracyServiceProvider"

設定檔會複製到 config/tracy.php,可以覆寫預設設定

[ 參考 ] Dealing with Exceptions in a Laravel API application

Dealing with Exceptions in a Laravel API application

例外處理真的蠻重要的,尤其是前後端分離的時候啊

AdobeAir is now available for Ubuntu 16.10/16.04/14.04/12.04/Linux Mint 18/17/13

rEFInd:UEFI 多重開機管理

官網

for windows 開機

方法1:在 linux 下

將 /boot/efi/EFI/Microsoft/Boot/bootmgfw.efi 以 /boot/efi/EFI/refind/refind_x64.efi 取代

方法2:在 windows 下執行,可參考官網文件

bcdedit /set {bootmgr} path \EFI\refind\refind_x64.efi


在我的 sony 筆電方法1本來都有效,升到 windows 10 之後似乎失效了,只要用 windows 開機,之後都直接以 windows 開機,使用方法2才恢復正常


其他相關資料:

UEFI, GPT, WINDOWS 10, FREEBSD 10, AND REFIND

rEFInd启动管理器配置文件详解

How to install rEFInd to dual boot Windows 8 and Linux in UEFI Mode


[ 參考 ] Angular路由深入浅出,重點是 ui-router 啊

Angular路由深入浅出

其實 ui-router 官網的文件已經很詳細了,不過還是中文比較親切呀......雖然是簡中

SweetAlert,不錯的訊息提示工具

官網

for angularjs :

ngSweetAlert
Ng-sweet-alert => 號稱使用上最簡單的

不錯看喔~~

[ 參考 ] 建立 private git server

Git on the Server - Setting Up the Server

可以建立 ssh git server,可多人共用,如果不想放在公開的 repository service 的可以參考

Deploy Laravel 5.1 on Ubuntu 14.04 LTS

Server OS:Ubuntu 14.04.2 LTS x64

部署方式:

Laravel app 放置於 /var/www/myapp ,將 /var/www/myapp/public 建立符號連結至 /var/www/html/myapp
====================================
以下指令若遇權限問題請加 sudo
====================================
1. 安裝套件
sudo apt-get install apache2 php5 php5-mcrypt mysql-server phpmyadmin
PS. php5-mcrypt 是 phpmyadmin 需要用到的,phpmyadmin 可用 adminer 替代,兩者都不裝也可以
2. apache 啟用 rewrite 以支援網址改寫
sudo a2enmod rewrite
sudo service apache2 restart
3. 開啟 AllowOverride 使 .htaccess 生效
編輯 /etc/apache2/apache2.conf 或是 virtual host 的設定檔
找到:
<Directory />         Options FollowSymLinks         AllowOverride None         Require all denied </Directory>
改成:
<Directory />         Options FollowSymLinks         AllowOverride All         Require all denied </Directory>

PS. 上面的方法只適用 apache2.conf
或新增一段,只針對某目錄開放:
<Directory /var/www/html/myapp>         AllowOverride All </Directory>
4. sudo service apache2 restart
5. 建立符號連結
sudo ln -s /var/www/myapp/public /var/www/html/myap…

用單一 Middleware 進行所有 Model 的資料驗證

Laravel 5 的 Form Request 很好用,不過對於每一個 Model 都要建立一個 Form Request 也有點小麻煩,下面這篇文章的作法值得參考,原則上就是把驗證規則寫在 Model Class,建立一個 Middleware,接受 Model Class Name 為參數,在 handle() 執行 input 驗證,在套用 Middleware 時將 Model Class Name 傳入即可。

LARAVEL 5.1.X – MIDDLEWARE FOR INPUT VALIDATION

這一篇用 Middleware 做 ACL 也不錯:

LARAVEL – 5.1.X ACL USING MIDDLEWARE

Laravel 5.1 自訂忘記密碼之信件主旨

忘記密碼即重設密碼是由 Auth/PasswordController.php 處理,其中使用了 ResetsPasswords trait,查看 vendor/laravel/framework/src/Illuminate/Foundation/Auth/ResetsPasswords.php,其中:

protected function getEmailSubject(){return isset($this->subject) ? $this->subject : 'Your Password Reset Link';}

看到 $this->subject 了沒....

所以要自訂忘記密碼之信件主旨,只要在
app/Http/ControllersAuth/PasswordController.php 中:


use ResetsPasswords;protected $redirectTo = '/';protected $subject = '重設密碼';

另外重設密碼之後預設會將 user 登入並轉向至 /home,要更改就如上面所示,設定 $redirectTo 即可。

ps. $redirectPath 也可以,且優先於 $redirectTo


如果考慮多國語系,則可以參考這一個討論串

[ 工具 ] 往下捲隱藏導覽列,往上捲顯示:Bootstrap Auto-Hiding Navbar

網頁超過一頁的長度時,往下捲動一定距離後自動隱藏導覽列,往上捲動時顯示導覽列。

Bootstrap Auto-Hiding Navbar 可以很方便的作到。

官網Github

官網上的說明很詳細,要注意 jquery css selector 要依據實際的情況設定

無窮分類選單列表 in Laravel ver. 2

程式碼範例第二版

第一版的差別:

在Model中定義關聯(1對多,自己關聯自己,只需要 多 的部份即可)Controller中只取第一層分類View中遞迴引入相同模板,在模板中處理子分類

Laravel 中實現無窮分類列表

圖片
無窮分類列表中,每一個分類可能有子分類,也可能有上層分類,階層深度理論上可以無限分層,如果要將所有階層的分類像目錄結構一般一次列出,在 laravel 中該怎麼做?



傳統 PHP 的寫法可以參考 tad 的這一篇文章,基本上就是運用遞迴函數,從最上層一層一層抓出來,然後組合出 html 碼。

Laravel 因為是 MVC 架構,所以資料和畫面要分開處理。(程式碼範例

資料部份在 controller 中取得,同樣是利用遞迴方式,每個節點都是一個包含2個元素的陣列:

[ 工具 ] wow.js + animate.css

wow.js + animate.css 真是像我這種一點藝術天份也沒有的苦手救星啊~~~~

教學:

http://tt5.org/tag/animate-css/

[ 筆記 ] PHP 之 ArrayAccess interface

官網文件

用途:把物件當陣列操作
須實作的方法,以陣列方式操作物件實會自動呼叫相對應的方法: offsetExists 依據 key 是否有值,回傳 boolean
offsetGet 依據 key 取值
offsetSet 依據 key 賦值,無回傳值
offsetUnset 依據 key 取消(unset)其值,無回傳值

Laravel 分頁變更頁碼參數名稱

Laravel 的分頁很方便,不過如果要將預設頁碼參數由page更改為其他名稱要怎麼做?

官網的使用手冊好像沒有提到,於是從 api 文件挖了出來....

http://laravel.com/api/5.1/Illuminate/Database/Eloquent/Builder.html#method_paginate

paginate 有 3 個參數,意義如下:

參數1:分頁筆數,預設每頁 15 筆

參數2:Model 取出之欄位,為一個陣列,預設為全部 ['*']

參數3:頁碼參數名稱,預設為 'page'


example:

$posts = \App\Post::paginate(10, null, 'p');

代表一頁 10 筆,取出所有欄位,頁碼參數為 p

Laravel seeder for foreign key

當資料表設定連外鍵時,seed 時要特別注意,否則會失敗喔。 

解法: https://gist.github.com/isimmons/8202227

加入:
// 開始前先關閉外鍵限制
DB::statement('SET FOREIGN_KEY_CHECKS=0;');

// 最後再打開外鍵限制
DB::statement('SET FOREIGN_KEY_CHECKS=1;');

Laravel 中依環境註冊 service provider / facade

有些 Service Provider / Facade 只有在開發時才用的到,上線時不需用到,如果不想手動處理,那就讓程式自動判斷吧。

app/Providers/AppServiceProvider.php

register function 中處理:

See the Pen bdvjpd by t301000 (@t301000) on CodePen.

[ 工具 ] 假文 / 假名 產生器

假文產生器

Lorem ipsum ==> for english,還有其他國家的語言

亂數假文產生器

MoreText ==> 有js檔,可在開發時加入class即可使用,也有bookmarklet可用

假名產生器:

中文姓名產生器

夢幻筆名產生器


[ 好文收集 ] CSS 的 !important 意義

原來事實和我想的不一樣啊....

是更重要的意思

CSS 的 !important 意義

[好文收集]Token-Based Authentication for AngularJS and Laravel Apps

之前為了在Laravel 和 AngularJS中使用JWT花了不少時間研究,下面兩篇文章把整個實作交代得很清楚,值得一看。

Token-Based Authentication for AngularJS and Laravel Apps

Token-Based Authentication for AngularJS and Laravel Apps (Part 2)

angular-form-gen:WYSIWYG,用拖拉的方式設計表單

angular-form-gen

看官網的範例還滿有趣的,目前暫時想不到怎麼應用,記下來也許以後有機會可以試試看囉。

angular directive for inline-edit

edit-in-place、inline-edit or click-to-edit 是個蠻方便的功能,最近需要用到所以找了一下,下面幾個都可以作到:

Angular-xeditableng-inline-editangular-meditor angular-xeditable 以前有用過,功能似乎比較完整,也許哪天很閒的時候來寫一些教學文吧。

不過官網其實已經很完整了說.....

[筆記] ngTasty:好用的表格 directive

常以表格形式列出資料,又需要分頁、搜尋、以某欄位排序,自己刻又嫌麻煩?來試試ngTasty吧。

PS.想自己來的可以參考這篇文章

官網&Demo
官網文件與sample code其實還算詳細,只是兩種表格沒有說明差別在哪,只好自己try囉....
因為目前用到的部份,資料是非同步抓取回來的,所以目前只用到兩種: Table with simple $http load resourceTable server side complete
Table with simple $http load resource 感覺上比較適合用在資料量不多,一次全部抓回來使用,因為是透過promise非同步抓取的,所以使用上要搭配watch-resource="collection"才能在資料抓回來之後正常顯示出來。
Table server side 感覺上比較適合資料量較多,尤其是分頁時,一次只抓一頁的量,換頁、改變排序、搜尋或改變每頁顯示數量時都會自動抓取一次資料。

PS.排序功能似乎有些問題,在最近的使用的專案中,使用 Table with simple $http load resource 學生的成績列表似乎只能按照座號(第一個欄位)排序,即使使用其他欄位排序時依然如此,原因不明......所以目前暫時關閉任何排序:bind-not-sort-by 設為 [](空陣列)

[筆記] angularjs 中匯出 Excel 檔

如果 controller 中有個物件陣列要匯出成一個excel檔,除了藉由server端產生之外,也可以由client端處理(反正資料已經在client端了嘛,就不必再操server了....)。

可以輸出excel檔的library有好幾個(可參考這篇),這篇筆記採用alasql來處理,因為....目前為止看起來最簡單囉! ^_^
官網
範例

手冊@slideshare

步驟: 1、下載後在 html 中載入 alasql.min.js 2、在 controller 中,假設 $scope.items 為欲輸出之物件陣列,$scope.export為執行輸出之function $scope.export = function() { alasql('SELECT * INTO XLSX( "john.xlsx", {headers:true} ) FROM ?', [ $scope.items ] ); }; 3、在 html 中設置一個按鈕,設定 ng-click="export()"

收工~~

PS.如果只想輸出部份資料而不是全部欄位,可以如下

SELECT id, name INTO ........  ==>只輸出 id 和 name 兩欄

[筆記] parse excel in angularjs

圖片
以往要匯入excel的資料到資料庫,需要將檔案上傳到server端,然後在server端處理,有點小麻煩。現在有另一種選擇,在client端讀取,然後傳送到server端寫入。這篇筆記前端是以angularjs為例子,但不包含server端的程式。

運作流程:
讀入excel檔,xls or xlsx都可以,xlsx為佳選擇資料表以json格式將資料傳送到server端處理 需要的library與目前使用版本:
angularjs(官網)v.1.3.15JS Xlsx(Github相關網站)v.0.8.0xlsx-reader.js(Github)v.0.0.1lodash(Github官網)v.3.9.3 檔案結構:



為 angularjs 加入其他好用的 filter

Github:angular-filter

angularjs 內建的 filter 不夠用嗎,試試 angular-filter 吧

angular-formly

用 angularjs 產生表單欄位,可依條件顯示 / 隱藏某些欄位,還可做驗證。可以簡化 view 的 html code

不錯的模組,值得試試!!

Github

官網

教學:
Easy AngularJS Forms with angular-formly

egghead.io

收集:了解 angularjs 2 的一些文章

參考資料:了解 angularjs directive 的 scope

圖片
Angular Directive Scope Explained & Code Structure


Understanding AngularJS Isolated Scope
http://onehungrymind.com/infographic-understanding-angularjs-isolated-scope/

好文收集:搞懂 q 先生和 promise

好用的提示訊息模組 for angular

[筆記] angular-loading-bar

圖片
ngmodules.org

Github

Demo

用途:

使用 XHR 的方式向後端發出 request 時,於頁面上方顯示進度條與 spinner

用法:

1、module dependency,ngAnimate 可不加

angular.module('myApp', ['angular-loading-bar', 'ngAnimate']);

2、引入 css、js,路徑及載入檔案依實際狀況調整

<link href="build/loading-bar.min.css" media="all" rel="stylesheet" type="text/css"></link> <script src="build/loading-bar.min.js" type="text/javascript"></script>

3、可以調整 css 以自訂外觀、位置,基本上這樣就可以用囉。

----------------------------------------------------

進階設定:

預設 loading bar (頁面頂端)和 spinner (上 10px、左 10px)都會出現,在 XHR request 發起後 100ms 啟動。















1、關閉 loading bar 或 spinner,設定啟動延遲時間

.config(['cfpLoadingBarProvider', function(cfpLoadingBarProvider) { cfpLoadingBarProvider.includeSpinner = false; // 關閉 spinner cfpLoadingBarProvider.includeBar = false; // 關閉 loading bar cfpLoadingBarProvider.latencyThreshold = 500; // 設定啟動延遲時間為 500ms }])

2、忽略指定的 XHR request

於 headers 物件加入 i…

SQLite GUI tools in Ubuntu

圖片
最近用 Laravel 開發時本機資料庫都是用 SQLite ,找了 2 個 GUI tool 來用,Ubuntu 軟體中心用 sqlite 搜尋一下就有了。

Sqliteman ==> 目前比較喜歡用這個 ^_^



















SQLite Database Browser


Laravel Eager Loading 時選擇要載入的欄位

Eager Loading 是個很方便的功能,不過預設會載入所有欄位,如果只想載入部份欄位呢?

可以在取資料時以 closure 處理或是在 model 中定義 relation 時指定。


public function roles() { //指定只要 Role 的 id 與 name 欄位 return $this->belongsToMany('App\Role')->select(['id','name']); }

User::with(['roles'=>function($query){ $query->addSelect('id','name'); }])->get();

PS.傳入select和addSelect之參數應該用陣列或字串形式都可以吧....

參考資料:
Eager Loading in Laravel 4
Laravel Eager Loading - Load only specific columns
Column selection in eager loading

如果有 group 又有分頁和 Eager Loading,效能問題要考慮一下囉
Laravel pagination with grouping and eager loading

interceptors in angularjs 相關文章

angularjs $scope 的 $root 屬性

angularjs 中所有的 $scope 都是 $rootScope 的 child,$scope 其中一個 $root 屬性,為 $rootScope 的參照,所以以下兩種用法是一樣的:

假設 $rootScope.mydata = "Hello";

console.log( $rootScope.mydata ); console.log( $scope.$root.mydata );
在 view 裡要取用 $rootScope.mydata 可以這樣用:

{{ $root.mydata }}

-------------------------------------------------------
參考資料:
https://docs.angularjs.org/api/ng/type/$rootScope.Scope
最下方的 Properties

stackoverflow:what-is-the-difference-between-scope-root-and-rootscope

好文收集:JWT in Angular

圖片

apache 修正 for JWT token

一般取得 token 之後,會在向 server 發出 request 時將 token 附加於 headers 送出:
Authorization: Bearer {yourtokenhere}
在 Laravel 之 homestead 環境下(web server 為 Nginx)是正常的,如果是 apache 無法正常動作(原因:參考資料)。

修正方式1:

於 apache 設定中加入以下設定:

RewriteEngine On RewriteCond %{HTTP:Authorization} ^(.*) RewriteRule .* - [e=HTTP_AUTHORIZATION:%1]
我是加在 Laravel 的 public/.htaccess

修正方式2:

將 token 附加在 query string 送出


參考資料:

https://github.com/tymondesigns/jwt-auth/wiki/Authentication

安裝 OpenShift Client Tools for Ubuntu

官網文件
一段時間沒裝了,把連結記錄下來備用

為 Laravel5 新增 email 啟動帳號功能

預設 Laravel 5 內建的註冊功能其行為是註冊後立即登入,下面這篇文章是更改成註冊後寄含有啟動連結的 email,使用者須從 email 進行啟動帳號的動作。

http://www.codeanchor.net/blog/email-activation-laravel/

問題解決: Only variables should be passed by reference

最近在 Laravel 5 中使用 lightopenid 實作新北市 openid 時遇到 "Only variables should be passed by reference" 的問題,查出是取得自訂帳號的程式碼的問題。

end(array_values(explode('/', $openid->identity)))
查了一下文件,原因如下:
因為傳入 end 的陣列是傳 reference,只有真正的變數可以傳 reference,不可以是經由 function 回傳之陣列

解法:
分兩步驟執行,先取得陣列,再傳入 end

$identity = array_values(explode('/', $openid->identity)); //取得陣列 $username = end($identity); //取得陣列最後一個元素值

Laravel5 中取得 config 變數值

// config/jwt.php 'secret' => env('JWT_SECRET', 'mysecret'),
要取得 secret 之設定值:
$secret = config('jwt.secret');

Laravel Schema Designer

Laravel Schema Designer

好用的資料庫設計工具 for Laravel

可以匯出相關 php 檔案

Angular Growl 2

不錯用的 notification 模組

教學

Github

Demo

手冊

Laravel 5 內建之 Auth 機制,自訂註冊或登入後重導向之路徑

app/Http/Controllers/Auth/AuthController.php 中用到了一個 trait:

use AuthenticatesAndRegistersUsers;

vendor/laravel/framework/src/Illuminate/Foundation/Auth/AuthenticatesAndRegistersUsers.php

function postRegister、postLogin 分別處理註冊與登入,成功後會重導向,

由 function redirectPath 回傳導向路徑,預設是 /home


/** * Get the post register / login redirect path. * * @return string */ public function redirectPath() { if (property_exists($this, 'redirectPath')) { return $this->redirectPath; } return property_exists($this, 'redirectTo') ? $this->redirectTo : '/home'; }
return property_exists($this, 'redirectTo') ? $this->redirectTo : '/home';
}


若要變更,可在AuthController.php 中新增一個屬性 redirectTo 即可

use AuthenticatesAndRegistersUsers; protected $redirectTo = '/path_to_somewhere';

換掉 Angularjs 的大括號(變數取用符號)

app.config(function($interpolateProvider){ $interpolateProvider.startSymbol('<%'); $interpolateProvider.endSymbol('%>'); });
結果:

{{  換成  <%

}}  換成  %>

Laravel5 + Angularjs +JWT

Cookie-Free Authentication with JSON Web Tokens: An Example in Laravel and AngularJS

偶然找到這一篇,剛好前一陣子想要試試看的主題,值得參考。

相關 composer package
jwt-auth
laravel-cors

關於 jwt
The Anatomy of a JSON Web Token
Base64

相關文章
Cookies vs Tokens. Getting auth right with Angular.JS
Json Web Tokens: Examples

筆記:

關於 jwt-auth 的設定有誤,for laravel 5 的請看:jwt-auth 的 wiki

publish laravel-cors 的 config:
php artisan vendor:publish --provider="Barryvdh\Cors\CorsServiceProvider" only angularjs 的部份:Simple AngularJS Authentication with JWTHandling JWTs on Angular is finally easier!相關 angularjs library:auth0/angular-jwt$http interceptors:$http Interceptors

Forms in Laravel 5

forms in laravel

整理出 form 的語法範例和對應輸出之 html code,不錯的參考資料。

幫你產生 iOS 和 Android APP icon 的網站

http://makeappicon.com/

支援格式:jpg、png、psd

最好是 1024*1024 的

也許以後會有需要吧

Laravel 之 IoC、provider、facade 參考

Angular Formly

看起來是個表單欄位產生器,可以用 javascript 控制表單欄位的產生,讓 view 的 html code 可以簡化。

官網

GitHub

egghead 的介紹影片

程式設計輔助工具

解決 PHP 5.6 OpenSSL 錯誤

xampp 5.6.3 版,其 PHP 為 5.6.3 版

在執行 composer selfupdate 時發生錯誤:

[Composer\Downloader\TransportException] The "https://getcomposer.org/version" file could not be downloaded: SSL ope ration failed with code 1. OpenSSL Error messages: error:14090086:SSL routines:SSL3_GET_SERVER_CERTIFICATE:certificate verify failed Failed to enable crypto failed to open stream: operation failed 解法:
檢查預設 cert 檔(default_cert_file)

php -r "var_dump(openssl_get_cert_locations());" array(8) { ["default_cert_file"]=> string(33) "/opt/lampp/share/openssl/cert.pem" ["default_cert_file_env"]=> string(13) "SSL_CERT_FILE" ["default_cert_dir"]=> string(30) "/opt/lampp/share/openssl/certs" ["default_cert_dir…

PHP Traits 的一些參考文章

Install Laravel IDE Helper for Sublime Text 3 and PhpStorm

PHP 的 reflection 參考文章

What is Reflection in PHP?
這一篇解釋的還算看得懂啦,最後也大概解釋了一下 Laravel IoC 的原理。

Exploring Laravel’s IoC container

Reflection in PHP - Tuts+ Code Tutorial
這一篇大致上也看得懂

Introspection and Reflection in PHP


PHP namespace 相關文章

為blogger加入語法hightlight

進入後台 / 範本 / 編輯HTML
在</head>之前加入:

<link href='//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.4/styles/monokai_sublime.min.css' rel='stylesheet'/> <script src='//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.4/highlight.min.js'/> <script>hljs.initHighlightingOnLoad();</script>
使用方法:
<pre> <code> your code ...... </code> </pre>
參考:
http://goofyz.30sparks.com/2012/08/another-syntax-highlight-highlightjs.html
http://72note.blogspot.tw/2013/05/test-js.html

GCM Advanced Topics 筆記

這兩天用功的成果....果然還是有一些眉角啊

筆記在此

原文

可用的 php library for GCM Server Side

最近看到的套件,都可以用 composer 安裝,也許可以關注一下後續發展。

https://github.com/lkorth/php-gcm

沒實際用過,不過看說明使用上應該不難

https://github.com/davibennun/laravel-push-notification

在 laravel 4.2 上測試了一下,安裝、設定都很方便,使用上也算簡單,但不知道如何取出推播失敗的 regid,如果可以解決就....大推啊

結論:

還是用目前的方法吧,雖然程式碼醜了點、長了點,但至少必備功能都有了。

Laravel 新增自設定檔

故事是這樣的,最近幾天在測試gcm,server 端使用 Laravel 實作,基本功能已完成,可以接受設備登記與撤銷 regid,訊息推播也正常,但是 api key 是寫在 controller 中,如果有人要自己架設,還要找到對的檔案修改,比較不人性化啦......

於是想到乾脆把設定檔寫在 app/config 目錄下,這樣應該比較方便囉。找了一下,還真的找到了,方法如下:


在 app/config 下新增 mygcmserver.php(檔名可自訂,不要造成衝突就好),內容如下:

<? return array{     'apiKey' => 'key放這裡呦'  };

陣列索引名稱(如:apiKey)可自定


要使用時:

$apiKey = Config::get('mygcmserver.apiKey');

參數格式說明:

設定檔名不含副檔名 陣列索引名稱

收工啦!!



測試環境:Laravel 4.2

參考資料:

http://laravelsnippets.com/snippets/custom-config-files-values