[PHP] Composer 教學筆記

現在寫php一定要會用的套件管理工具composer

安裝

參考一下這篇
http://iambigd.blogspot.tw/2013/07/php-composer.html

快速安裝使用

1. 首先要在專案下建立composer.json，加入你要引用的套件(管理套件相依性)

{
    "require": {
        "monolog/monolog": "1.2.*"
    }
}

2. 然後執行composer install

3. 接著就會在專案下產生composer.lock檔案以及vendor目錄

composer.lock

在首次安裝套件完畢後，會產生這個檔案，裡面記錄了所安裝套件的資訊。這個檔案的真正作用是：如果目錄中有這個檔案，執行安裝時，就不會去搜尋更新的版本，而是依照這個檔案中記錄的版本來安裝。這個設計很重要，因為新版的套件很有可能與目前使用的版本不相容，如果不是使用同樣版本，很難保證系統的穩定。過去在使用pear來管理套件時，如果不注意，就有可能發生升級導致的慘劇。

vendor目錄(預設目錄)

主要含以下內容

• vender/autoload.php

只要引用這個檔案，就可以載入套件中所有對外公開的類別。

require 'vendor/autoload.php';

• vender/composer

自動載入的載入器與快取檔

• 各套件資料夾目錄

依造命名規則/

場景應用注意(From 大澤小木鐵phpconf簡報):

1. Git只需要加入composer.json 與composer.lock，方便其他成員使用
2. 請由專案負責人進行composer的第一次安裝與之後的更新
3. 不要將vendor資料夾送入Git，其他團隊成員應該只要透過composer install安裝
4. Library的composer.lock不要加入Git

參考

1. https://speakerdeck.com/jaceju/begining-composer
2. http://ithelp.ithome.com.tw/question/10136653

[EC2] 安裝 ffmpeg

記錄一下成功安裝ffmepg在EC2的步驟。

1. 首先建立ffmepg資料夾

$cd /usr/local/bin/

$sudo mkdir ffmpeg

$cd ffmpeg

2. weget下載stable 包

$sudo wget http://ffmpeg.gusari.org/static/64bit/ffmpeg.static.64bit.2014-07-16.tar.gz

3. 解開下載的tar檔

$sudo tar -xzf ffmpeg.static.64bit.2014-07-16.tar.gz

之後會解出ffmpeg與ffprobe二個資料夾

$ls -al

ffmpeg  ffmpeg.static.64bit.2014-07-16.tar.gz  ffprobe

4. 執行測試

$./ffmpeg -version

列出這一版的資訊

ffmpeg version N-63893-gc69defd

built on Jul 16 2014 05:38:01 with gcc 4.6 (Debian 4.6.3-1)

configuration: --prefix=/root/ffmpeg-static/64bit --extra-cflags='-I/root/ffmpeg-static/64bit/include -static' --extra-ldflags='-L/root/ffmpeg-static/64bit/lib -static' --extra-libs='-lxml2 -lexpat -lfreetype' --enable-static --disable-shared --disable-ffserver --disable-doc --enable-bzlib --enable-zlib --enable-postproc --enable-runtime-cpudetect --enable-libx264 --enable-gpl --enable-libtheora --enable-libvorbis --enable-libmp3lame --enable-gray --enable-libass --enable-libfreetype --enable-libopenjpeg --enable-libspeex --enable-libvo-aacenc --enable-libvo-amrwbenc --enable-version3 --enable-libvpx

libavutil      52. 89.100 / 52. 89.100

libavcodec     55. 66.101 / 55. 66.101

libavformat    55. 43.100 / 55. 43.100

libavdevice    55. 13.101 / 55. 13.101

libavfilter     4.  8.100 /  4.  8.100

libswscale      2.  6.100 /  2.  6.100

libswresample   0. 19.100 /  0. 19.100

libpostproc    52.  3.100 / 52.  3.100

5. 如果要在每個路徑下都能使用請做一下symbol link

$sudo ln -s /usr/local/bin/ffmpeg/ffmpeg /usr/bin/ffmpeg

TIP: 軟連結請勿打錯路徑，否則在/usr/bin/ffmpeg 會顯示紅色!!

參考資源

官網stable build
http://ffmpeg.gusari.org/static/64bit/

本文參考
http://stackoverflow.com/questions/15057151/installing-ffmpeg-on-amazon-linux-cpp-gcc-libstdc-dependancies

[快快樂樂學WordPress] 記錄一些wordpress plugin需要用的資料

Google到的Wordpress plugin教學蒐集

//好像很老的玩家lol
http://blog.wpjam.com/article/write-plugin-by-yourself/

//官方
http://codex.wordpress.org/Writing_a_Plugin
http://codex.wordpress.org/Adding_Administration_Menus
http://codex.wordpress.org/Plugin_API

fullpage.js 一頁式的網站樣版工具

如果你需要一頁式的網站樣版，可以參考一下fullpage.js這個套件

http://alvarotrigo.com/fullPage/#firstPage

[CSS3] CSS transform/transition/animation 初學筆記

最近幫朋友弄了一個網站，需要使用很多CSS transition與animation的效果，
順道找了一些不錯的資訊學習，看完就可以馬上上手許多:D，很適合初學者們

短語法

可用屬性

參考如下：

https://www.openfoundry.org/tw/tech-column/9233-css3-animation
http://www.ruanyifeng.com/blog/2014/02/css_transition_and_animation.html
http://blog.iwege.com/posts/the-different-between-transform-transition-animation.html

超強transform解說：
https://desandro.github.io/3dtransforms/

[CSS] 讓youtube影片放入DIV後能夠填滿寬高的解法

如果你有需要使用youtube連結當背景播放影片的話，可以參考以下網址的解法，
試過是可行的:D 有需要的朋友可以看看。

https://www.h3xed.com/web-development/how-to-make-a-responsive-100-width-youtube-iframe-embed

[jQuery] scroll animation 外掛

快速上手的scroll animation外掛

https://github.com/mpalpha/animate-scroll

[Apache] Could not reliably determine the server's fully qualified domain name 錯誤訊息

AH00558: apache2: Could not reliably determine the server's fully qualified domain name, using 127.0.1.1. Set the 'ServerName' directive globally to suppress this message

只要在
sudo vim /etc/apache2/apache2.conf

加入ServerName localhost

即可

[快快樂樂學Wordpress] wordpress來指定某個用戶登入以實作SSO(單點登入)

最近實作了一個wp的SSO機制，
主要用了get_user_by的方法來取得用戶的資訊後，
再透過wp_set_current_user與wp_set_auth_cookie設定用戶的session並執行wp_login的hook即可。

if($user){

   //do the single sing on
   wp_set_current_user( $user_id, $user->user_login );
      wp_set_auth_cookie( $user_id );
      
      //email
      // echo $user->user_login;

      do_action( 'wp_login', $user->user_login,$user );
  }
 

REF

http://carlofontanos.com/auto-login-to-wordpress-from-another-website/

[快快樂樂學Wordpress] 新增plugin教學

//註冊文章類型->也會產生一個admin的側欄，多一個類型就會多一個側欄
register_post_type

//新增外掛至admin的側欄
add_menu_page

REF
https://developer.wordpress.org/reference/functions/add_menu_page/
https://codex.wordpress.org/Function_Reference/register_post_type

[Wordpress] 自訂的php頁面呼叫wp function

require_once(dirname(dirname(__FILE__)).'/wp-load.php');

Markdown-Cheatsheet 參考表

現在流行使用Markdown來寫文件了了，
有興趣的朋友可以看一下下面這個github repo。
看一下就可以快速入門了。

https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet

update:

這裡有更多語法
http://pages.tzengyuxio.me/pandoc/

[WordPress] Woocomerce login hook筆記

記錄一下woocommerce hook的筆記

//一般wp_login的hook

function so_26675676_your_function($user_login, $user) {
 // your code
}
add_action('wp_login', 'so_26675676_your_function', 10, 2);

//woocommerce login hook，你可以自訂_wp_http_referer參數

add_filter( 'woocommerce_login_redirect', 'krex_redirect'); add_filter( 'woocommerce_registration_redirect', 'krex_redirect'); function krex_redirect( $redirect_to ) { if ( ! empty( $_REQUEST['_wp_http_referer'] ) ){ $ref = wp_unslash( $_REQUEST['_wp_http_referer'] ); } return $ref; }

//shortcode

[woo_social_login redirect_url="轉頁的網址"]

/*----------------------------------------------------
------------------------*/
// redirects for login / logout
/*----------------------------------------------------------------------------*/
add_filter('woocommerce_login_redirect', 'login_redirect');

function login_redirect($redirect_to) {

 $location = $_SERVER['HTTP_REFERER'];
wp_safe_redirect($location);
exit();

}

add_action('wp_logout','logout_redirect');

function logout_redirect(){

$location = $_SERVER['HTTP_REFERER'];
wp_safe_redirect($location);
exit();

}

• https://www.skyverge.com/blog/advanced-woocommerce-social-login/
• https://github.com/woothemes/woocommerce/commit/014e31952828377bf7a1ebf4e812a43d0bcefa67#commitcomment-3351995

[Wordpress Plugin] 多國語言插件

好用但要付錢的WPML多國語言插件 :D

有提供一些變數的常數

Constant	Description	Example
ICL_LANGUAGE_CODE	Code for the current language	fr
ICL_LANGUAGE_NAME	Name of current language, in the current language	Français
ICL_LANGUAGE_NAME_EN	Name of the current language name in English	French

ICL_LANGUAGE_CODE

Code for the current language

fr

ICL_LANGUAGE_NAME

Name of current language, in the current language

Français

ICL_LANGUAGE_NAME_EN

Name of the current language name in English

French

REF
https://wpml.org/
https://wpml.org/documentation/support/wpml-coding-api/

[CSS] 使用Media Query來處理不同裝置所需的樣式筆記

記錄一下相關media query的筆記。

• media query可用來依據裝置特性套用樣式。
• min-width (而不是 min-device-width) 以確保獲得最通用的體驗。
• 針對元素使用相對大小，避免版面走樣。

實作方法

使用link標籤

使用import語法

查詢語法

一般RWD最常使用以下屬性

屬性	結果
min-width	任何超過查詢中指定寬度的瀏覽器都會套用規則。
max-width	任何未超過查詢中指定寬度的瀏覽器都會套用規則。
min-height	任何超過查詢中指定高度的瀏覽器都會套用規則。
max-height	任何未超過查詢中指定高度的瀏覽器都會套用規則。
orientation=portrait	任何高度大於或等於寬度的瀏覽器都會套用規則。
orientation=landscape	任何寬度大於高度的瀏覽器都會套用規則

[CSS] 重設 絕對定位的值

今天在試media query重新定位某個icon時，發現一直無法清掉left，

查了一下google大神，可以在覆寫的css中改加上 left:auto; ，瀏覽器即會使用預設的值。

[Html5]多國語系 i18n 字串符設定

新版的lang設定值已進化成以下的列表了，有需求要朋友可以參考一下。

Lang對應清單

zh-Hans 簡體中文

zh-Hans-CN 大陸地區使用的簡體中文

zh-Hans-HK 香港地區使用的簡體中文

zh-Hans-MO 澳門使用的簡體中文

zh-Hans-SG 新加坡使用的簡體中文

zh-Hans-TW 臺灣使用的簡體中文

zh-Hant 繁體中文

zh-Hant-CN 大陸地區使用的繁體中文

zh-Hant-HK 香港地區使用的繁體中文

zh-Hant-MO 澳門使用的繁體中文

zh-Hant-SG 新加坡使用的繁體中文

zh-Hant-TW 臺灣使用的繁體中文

其他舊式用法，PS：不符合RFC 4646規範

zh-hakka 客家話

zh-cmn 普通話

[快快樂樂學Wordpress] 自訂樣版: 基礎架構 (1)

記錄一下新增wordpress樣版的筆記

樣版基本需求檔案

請在theme folder之下新增下面三個檔案

index.php

style.css

function.php

之後後台就會出現你的樣版了

DEMO

因為index.php與function.php什麼都沒寫，因此網站會呈現一片空白 Orz

完成的佈景主題所需要的檔案

 style.css

 header.php

 footer.php

 index.php

 single.php

 page.php

 sidebar.php

 comments.php

 archives.php

 search.php

 searchform.php

 404.php

 functions.php

[Html5] 在網頁播放midi音樂檔

因為工作需求需要在網頁上播放midi，

查了一下使用html5 audio的播放器是無法播放的，

使用舊式的object tag chrome會跳出禁用的警告，

最後使用https://github.com/chenx/MidiPlayer 這個方法是最簡單處理的，

只需要下載一個js檔就可以簡單使用了!!

Features

Can specify these in constructor parameter list: midi, target, loop, maxLoop, end_callback.

• - midi: MIDI file path. 
• - target: Target html element that this MIDI player is attached to. 
• - loop: Optinoal. Whether loop the play. Value is true/false, default is false. 
• - maxLoop: Optional. max number of loops to play when loop is true. Negative or 0 means infinite. Default is 1. 
• - end_callback: Optional. Callback function when MIDI ends. 
• e.g., use this to reset target button value from "stop" back to "play".
• Can specify a debug div, to display debug message: setDebugDiv(debug_div_id).
• Start/stop MIDI by: start(), stop().
• If a MIDI started play, call start() again will stop and then restart from beginning.

範例

//初始化
 // * @param midi    MIDI file path.
                    // * @param target  Target html element that this MIDI player is attached to.
                    // * @param loop    Optinoal. Whether loop the play. Value is true/false, default is false.
                    // * @param maxLoop Optional. max number of loops to play when loop is true.
                    // *                Negative or 0 means infinite. Default is 1.
                    // * @param end_callback Optional. Callback function when MIDI ends.
                    midiPlayer = new MidiPlayer(url, MIDI_ELEM_ID, true, 1, function() {
                        console.log('midi done');
                    });

//播放
 midiPlayer.play();
//停止
 midiPlayer.stop();

參考連結

https://github.com/mudcube/MIDI.js => 功能最強大的midi庫
https://developer.mozilla.org/zh-TW/docs/Web_Audio_API
http://stackoverflow.com/questions/5789734/does-the-html5-audio-tag-encompass-mid-midi-unofficially
http://homeofcox-cs.blogspot.tw/2015/04/play-midi-in-browser-by-javascript-only.html
https://github.com/chenx/MidiPlayer

[Bootstrap 3] 變更modal overlay的背景色方法

本文記錄一下如何修改bootstrap modal overlay的背景色

http://stackoverflow.com/questions/10585689/change-the-background-color-in-a-twitter-bootstrap-modal

To change the color via:

CSS

Put these styles in your stylesheet after the bootstrap styles:

.modal-backdrop {
   background-color: red;
}

Less

Changes the bootstrap-variables to:

@modal-backdrop-bg:           red;

Source

Sass

Changes the bootstrap-variables to:

$modal-backdrop-bg:           red;