2015年12月24日 星期四

解決 json_decode 結果為 null 的問題

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

原因請看這篇

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

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

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

2015年12月19日 星期六

安裝 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. 安裝以下套件
  • git
  • ant
  • lib32z1
  • lib32ncurses5 
  • lib32bz2-1.0
  • lib32stdc++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 clean
ant
6. 啟動 main server
~/appengine-java-sdk/bin/dev_appserver.sh \
--port=8888 --address=0.0.0.0 appengine/build/war/
7. 啟動 build server
cd buildserver
ant RunLocalBuildServer

8. 開啟瀏覽器,http://localhost:8888 or http://YOUR_IP:8888,可以開始使用囉


2015年12月18日 星期五

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


參考資料:

2015年12月14日 星期一

PHP 產生 PDF 中文問題解決

今天發現在 homestead 下用 phantomjs 或 wkhtmltopdf 產生 PDF 時中文變成方塊,查了一下、發現是 server 端缺少中文字型的關係,試了兩種方法都可以解決。

方法一:

server 端安裝中文字型,如:文泉驛、思源字型

安裝文泉驛

sudo apt-get install xfonts-wqy

參考:



安裝思源字型

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

參考:


方法二:

使用 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 中字型檔載入路徑。

參考:




2015年11月26日 星期四

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 xdebug 溝通
server 送出 HTTP Response

情況二
debug client IP 未知或多人開發時,設定 xdebug.remote_connect_back=1


debug client 發起 HTTP Request
server xdebug 偵測到 debug client IP
server 上之 xdebug 以 DBGP 協定連線至 debug client 9000 port
debug client 以 DBGP 協定與 server xdebug 溝通
server 送出 HTTP Response



參考資料

2015年11月21日 星期六

將 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,

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

dompdf

github

DOMPDF Wrapper for Laravel 5

安裝好之後要在 storage 下新增 fonts 資料夾(要有寫入權限),會下載一些字型檔

大概測試了一下,結果....我覺得不好用,有時有些 css 會造成問題........


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

參考資料

強制換頁

CSS 在列印文件上的運用

utf-8 支援

CSS background-image Property

CSS3 Backgrounds

Paged Media Properties

http://t301000.blogspot.tw/2015/11/html-phantomjs-pdf.html

2015年11月1日 星期日

Debian / Ubuntu update-rc.d 用法

Debian / Ubuntu update-rc.d 用法

ubuntu 開機自動執行

小小工程師的生活雜記: [Ubuntu]關於update-rc.d 用法

讓ubuntu開機後自動執行指定的script

https://wiki.debian.org/RunLevel

用 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/

2015年10月28日 星期三

vagrant status vs vagrant global-status

vagrant status

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

vagrant global-status

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

2015年10月27日 星期二

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

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

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

2015年10月9日 星期五

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

重灌狂人的介紹文

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

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

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

2015年9月28日 星期一

2015年9月24日 星期四

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 吧。

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

2015年9月14日 星期一

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

介紹文


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

2015年9月12日 星期六

設定 Restangular 之 base url


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('./');

為了避免寫死,測試結果可以相對路徑的方式設定為當前位置( ./ ),可以達到我的目的



相關文章:









2015年9月6日 星期日

font for coding

還不錯的字型 for coding

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

Hack  (介紹)

2015年8月26日 星期三

手動下載 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

2015年8月24日 星期一

[ 收集 ] 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 都可以改

2015年8月21日 星期五

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,可以覆寫預設設定

2015年8月9日 星期日

2015年8月7日 星期五

2015年8月5日 星期三

SweetAlert,不錯的訊息提示工具

官網

for angularjs :


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/myapp

6. myapp 下之 storage 與 bootstrap/cache 目錄記得開啟寫入權限

cd /var/www/myapp

chmod -R 777 storage

chmod -R 777 bootstrap/cache

7. 修改 .env,若無則先產生再修改

cd /var/www/myapp

cp .env.example .env

php artisan key:generate


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

到這裡應該就可以 work 囉,開啟瀏覽器看看囉

http://server/myapp

2015年7月31日 星期五

用單一 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

2015年7月27日 星期一

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


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

2015年7月20日 星期一

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

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

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

官網 Github

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

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

程式碼範例第二版

第一版的差別:

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

2015年7月19日 星期日

Laravel 中實現無窮分類列表

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



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

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

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

2015年7月16日 星期四

[ 工具 ] wow.js + animate.css

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

教學:

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

2015年7月12日 星期日

[ 筆記 ] PHP 之 ArrayAccess interface

官網文件

用途:把物件當陣列操作

須實作的方法,以陣列方式操作物件實會自動呼叫相對應的方法:
offsetExists
依據 key 是否有值,回傳 boolean

offsetGet
依據 key 取值

offsetSet
依據 key 賦值,無回傳值

offsetUnset
依據 key 取消(unset)其值,無回傳值

2015年7月9日 星期四

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;');

2015年7月8日 星期三

Laravel 中依環境註冊 service provider / facade

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

app/Providers/AppServiceProvider.php

register function 中處理:

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

2015年7月4日 星期六

2015年6月14日 星期日

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

angular-form-gen

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

angular directive for inline-edit

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

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

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

2015年6月12日 星期五

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

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

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


官網文件與sample code其實還算詳細,只是兩種表格沒有說明差別在哪,只好自己try囉....

因為目前用到的部份,資料是非同步抓取回來的,所以目前只用到兩種:

Table with simple $http load resource 感覺上比較適合用在資料量不多,一次全部抓回來使用,因為是透過promise非同步抓取的,所以使用上要搭配watch-resource="collection"才能在資料抓回來之後正常顯示出來。

Table server side 感覺上比較適合資料量較多,尤其是分頁時,一次只抓一頁的量,換頁、改變排序、搜尋或改變每頁顯示數量時都會自動抓取一次資料。

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

2015年6月7日 星期日

[筆記] angularjs 中匯出 Excel 檔

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

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


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端的程式。

運作流程:
  1. 讀入excel檔,xls or xlsx都可以,xlsx為佳
  2. 選擇資料表
  3. 以json格式將資料傳送到server端處理
需要的library與目前使用版本:
檔案結構:



2015年6月4日 星期四

angular-formly

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

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

Github

官網

教學:
Easy AngularJS Forms with angular-formly

egghead.io

2015年5月11日 星期一

好用的提示訊息模組 for angular

Angular Growl 2    Demo  ==> 目前使用中

angular-inform    Demo

angular-bootstrap-growl

bootstrap-notify    Demo  ==> 值得試試

[筆記] 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 物件加入 ignoreLoadingBar: true

$http.get('/status', {
    ignoreLoadingBar: true
});

$http.post('/save', data, {
    ignoreLoadingBar: true
});

.factory('Restaurant', function($resource) {
    return $resource('/api/restaurant/:id', {id: '@id'}, {
        query: {
            method: 'GET',
            isArray: true,
            ignoreLoadingBar: true
        }
    });
});

一般使用大概就這樣囉。

如果不使用 interceptor,只使用 service ,或是想了解相關 event,請參考 Github 頁面。

PS. 我搭配 restangular 加入 ignoreLoadingBar: true 時似乎沒有作用....

SQLite GUI tools in Ubuntu

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

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



















SQLite Database Browser


2015年5月7日 星期四

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

2015年5月2日 星期六

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

2015年4月27日 星期一

好文收集:JWT in Angular

Authentication made simple in Single Page AngularJS Applications


Github : angularjs-jwt-authentication-tutorial

Slider : Make your SPA a maximum security prison

相關套件:

angular-storage

angular-jwt

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

2015年4月20日 星期一

為 Laravel5 新增 email 啟動帳號功能

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

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

2015年4月18日 星期六

問題解決: 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); //取得陣列最後一個元素值

2015年4月15日 星期三

Laravel5 中取得 config 變數值


// config/jwt.php
  'secret' =>  env('JWT_SECRET', 'mysecret'),

要取得 secret 之設定值:

$secret = config('jwt.secret');


2015年4月7日 星期二

2015年3月25日 星期三

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';

2015年3月24日 星期二

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


app.config(function($interpolateProvider){

$interpolateProvider.startSymbol('<%');

$interpolateProvider.endSymbol('%>');

});

結果:

{{  換成  <%

}}  換成  %>

2015年3月21日 星期六

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 JWT
Handling JWTs on Angular is finally easier!

相關 angularjs library:
auth0/angular-jwt

$http interceptors:
$http Interceptors

2015年3月18日 星期三

2015年3月14日 星期六

Angular Formly

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

官網

GitHub

egghead 的介紹影片

2015年3月5日 星期四

解決 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_env"]=>
  string(12) "SSL_CERT_DIR"
  ["default_private_dir"]=>
  string(32) "/opt/lampp/share/openssl/private"
  ["default_default_cert_area"]=>
  string(24) "/opt/lampp/share/openssl"
  ["ini_cafile"]=>
  string(0) ""
  ["ini_capath"]=>
  string(0) ""
}


下載 cert.pem

sudo curl http://curl.haxx.se/ca/cacert.pem -o /opt/lampp/share/openssl/cert.pem

參考資料:
Hill 的網路實驗室

2015年2月28日 星期六

PHP namespace 相關文章

因為Laravel5開始大量使用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

2015年2月4日 星期三

可用的 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 目錄下,這樣應該比較方便囉。找了一下,還真的找到了,方法如下:


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


<?

return array{

    'apiKey' => 'key放這裡呦' 

};


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


  1. 要使用時:


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


參數格式說明:

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

收工啦!!




測試環境:Laravel 4.2

參考資料:

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