Alvin的學習筆記Log: 1月 2014

2014年1月26日星期日

iOS開發筆記－ iOS6及iOS7的Status bar的Interface問題

在iOS6及iOS7上，最上面的Status bar最大不同就是一個是佔了20px，一個是變成可以使用且讓電池或訊號的影示浮貼在上面。但這就造成一個很大的問題，在iOS6上面看來好好的，到了iOS7上就往上移了20px，在Interface builder上往下調20px，在iOS6上也真的往下調了20px，這真完全不是我要的，而偏偏我沒有用autolayout（說實在是不知道怎使用，跟storyboard一樣難用），找半天發現Interface builder多了底下的調整選項

這部分就是調整兩者間的差距，例如我這邊選的UIImageView的大小是548*320，在iPhone5的iOS6的是正常的，但在iOS7就會整個往上移了20px，所以要像底下這樣設定

Y設20，但iOS 6/7 Deltas的△Y部分要設-20，這樣這UIImageView在這兩個系統中都是在你想要的位置上了。

參考網址：
Supporting iOS 6
iOS 7 is out, but we can't completely forget about iOS 6 just yet.
點我參考Apple的iOS 7 UI轉換指南PDF

2014年1月23日星期四

iOS開發筆記－放入舊的SDKs

弄完了PHP的單元測試，回過頭來看看iOS的，下載了最新的xCode 5.0.2（安裝網址）並安裝後，發現整個介面變了，完全是iOS 7的介面。這這這！！！第一個想到的是那SDK 6.0會不會也不在了，開Terminator

$ cd /Applications/Xcode.app/Contents/Developer/Platforms/iPhoneOS.platform/Developer/SDKs
$ ls -l

果然剩iOS 7.0了，其實是沒太大的差別，以前也一直都這樣，不過這次改變實在太大，加上舊專案都還在用，還是最好有舊的SDK比較放心，查了下資料，可以去下載以前舊的xcode版本或找出舊版xcode，好在我都有備份，將dmg打開，開Terminator，基本上都是放在/Volumes，目錄名稱叫Xcode

$ cd /Volumes/Xcode/Xcode.app/Contents/Developer/Platforms/iPhoneOS.platform/Developer/SDKs/
$ ls

我這邊是看到iPhoneOS6.1.sdk，所以就

$ mkdir /Applications/Xcode.app/Contents/Developer/Platforms/iPhoneOS.platform/Developer/SDKs/iPhoneOS6.1.sdk
$ cp -ri iPhoneOS6.1.sdk/ /Applications/Xcode.app/Contents/Developer/Platforms/iPhoneOS.platform/Developer/SDKs/iPhoneOS6.1.sdk

其他版本也一樣的做法。

How To Support Old iOS SDK’s in Xcode 5文中提到

Update: @rekle points out that it’s possible to get older versions of Xcode from the Downloads area of the Apple Dev Center. Even once Xcode 5 hits the App Store, it should still be possible to get an old SDK version.

有申請開發帳號的人，可以點擊get older versions of Xcode，登入後找以前的版本下載

PS. 建議是在安裝前，先將這目錄下的原SDK都先備份起來，若有同名的，當然是以新的為主

參考網址：
iOS 5 SDK is gone after upgrade to Xcode 4.5
How To Support Old iOS SDK’s in Xcode 5

測試開發學習筆記－PHP篇

從上星期一弄到昨天，將整個從Mac的PHP開發環境安裝一直到WordPress的TDD及BDD的安裝整理完畢，照著整個過程列出，方便自己及大家看。

看起來還有很多要再加上去，後續再更新

2014年1月22日星期三

WordPress開發筆記－使用Selenium測試的第一步

WordPress開發筆記－一個簡單的WordPress Plugin Unit Test這篇寫的是TDD（Test Deriven Develpment），另有一種是BDD（Behavior Deriven Develpment），這次來寫寫BDD的測試。

查了不少資料，看起來都是指向Selenium，另外有Behavior，但看來是給Python用，不知道還有沒有其他的，不過也不想再花時間找了，這邊一樣以WordPress當例子，但只會介紹到環境建好，剩下的就像是在開發WordPress的流程，就由看倌再自己找囉～

開始之前可以先看看這影片How to Use Selenium 2 With PHPUnit。

Step1 安裝Selenium2 Server及phpunit/PHPUnit_Selenium套件

到http://phpunit.de/manual/3.7/en/selenium.html可以找到下載點，如下：

點選"Selenium Server"後，再點選紅框部分，就可以取得jar檔。

執行底下指令將jar檔移到/usr/local及啟動（PS. 在影片中是移到/usr/local/bin，但在mac中，那邊是只有root可以執行的，有點麻煩）

$ sudo mv selenium-server-standalone-2.39.0.jar /usr/local
$ java -jar /usr/local/selenium-server-standalone-2.39.0.jar

接下安裝phpunit/PHPUnit_Selenium，若沒有裝過PHPUnit可以參考PHPUnit學習筆記－PHPUnit安裝（使用PEAR），另外文中提及安裝PHPUnit_Selenium，指令如下

$sudo pear install phpunit/PHPUnit_Selenium

若沒有成功，可能是沒有找到，可以先下底下指令，再執行剛才的指令

$sudo pear channel-discover pear.symfony-project.com 
$sudo pear channel-discover pear.symfony.com

Step2. 安裝好一個WordPress
安裝WordPress的方式，這邊就不多說了，大概流程如下：
下載WordPress繁中版（這裡）
-> 解開後直接放在自己目錄下的Sites，命名為wordpress
-> 建立Database
-> 設定wp-config.php
-> 開啟http://localhost/~alvin/wordpress，做初始設定，按下一步即可。
我這邊網誌是命為Hello WordPress，使用者admin，密碼1234。

Step3. 寫第一個測試

cd ~/Sites/
vim WpSeleniumTest.php

加入底下的程式

<?php
class WpSeleniumTest extends PHPUnit_Extensions_Selenium2TestCase
{
    protected function setUp()
    {
        $this->setHost('localhost');
        $this->setPort(4444);
        $this->setBrowser('firefox');
        $this->setBrowserUrl('http://localhost/wordpress/');
    }

    public function testTitle()
    {
        $this->url('http://localhost/~alvin/longda/');
        $this->assertRegExp('/Hello WordPress/i', $this->title());
    }
}
?>

執行

phpunit WpSeleniumTest.php

得到這結果

這邊就可以看到ok了，另外再測測登入的功能加入底下的程式

public function testLogin()
{
    $this->url('http://localhost/~alvin/wordpress/wp-login.php');
    $form = $this->byCssSelector('form');

    $action_page = $form->attribute('action');
    $this->assertStringEndsWith('wp-login.php',$action_page);
    $this->byId('user_login')->value('admin');
    $this->byId('user_pass')->value('1234');
    $form->submit();

    $this->url('http://localhost/~alvin/wordpress/wp-admin');
    $this->assertRegExp('/Hello WordPress/i',$this->title());
}

再度ok

當然也可以用別的帳密測測，會得到Fail，因為沒登入成功，我這邊是硬要它轉用wp-admin，因為title不是期望的，所以Fail。

PS. 命名php檔要注意，不能用"_"分隔，否則會被取代成"/"，而造成找不到檔案。

Selenium預設是只支援FireFox，所以要支援其他browser要另外再安裝其他的WebDriver，可以仔細看看http://docs.seleniumhq.org/download/。

感覺起來，用先用BDD建起一個期望的行為，再建立WordPress的function時，再用TDD的概念將每個function建起它的unit test，就可以建構完整的測試，之後修改就不怕會有side effect，當然超出預期的動作或結果也是會有的，但也可以藉此一個個補強囉

PS. 看到一篇文章不要盲目的 BDD / TDD，我對寫測試的看法，嗯～就看看囉！

參考網址：
Chapter 17. PHPUnit and Selenium
Selenium Downloads
https://github.com/stuartherbert/sublime-phpunit

2014年1月20日星期一

WordPress開發筆記－一個簡單的WordPress Plugin Unit Test

無法查看此摘要。請按這裡查看文章。

2014年1月17日星期五

Maven or Gradle？

最近有想要抽時間學學何謂Maven，本來是準備用用了，但查到現在有些專案改用Gradle，例如：Hibernate、Spring等，在思考是否應該學新的，畢竟可能還不夠成熟，查了下資料，這邊做點記錄，看到不少不錯的文章，重點先著重在了解，尤其有中文，對英文不好的我真是一大福音

【簡報檔】淺談 Groovy 與 Gradle
CodeData 技術文章 / Tags: Gradle

Java Tutorial 第三堂（3）使用 Servlet、JSP 開發 Web 應用程式

Gradle
Wiki - Gradle
【認識 Gradle】（1）講古的時間 Apache Ant
【認識 Gradle】（2）講古的時間 Apache Maven
【認識 Gradle】（3）Gradle 起手式
【認識 Gradle】（4）看懂 Gradle Script
【認識 Gradle】（5）Gradle Task 觀念導讀
【認識 Gradle】（6）Java 專案與 Build Script 客製化
【認識 Gradle】（7）Java 專案相依管理

講Maven（舊文）
Maven 实战在InfoQ上的内容
Maven实战（一）——坐标规划
Maven实战（二）——POM重构之增还是删
Maven实战（三）——多模块项目的POM重构
Maven实战（四）——基于Maven的持续集成实践
Maven实战（五）——自动化Web应用集成测试
Maven实战（六）——Gradle，构建工具的未来？
Maven实战（七）——常用Maven插件介绍（上）
Maven实战（八）——常用Maven插件介绍（下）
Maven实战（九）——打包的技巧
Maven实战（十）——Maven 3，是时候升级了

Blogger筆記－SyntaxHighlighter放進Blogger

越來越覺得在Blogger上寫code上去很麻煩，看看別人的排的真好看，找半天找到這個很多人在用的javascript library: SyntaxHighlighter。

看了一下還蠻容易使用的。

Step1. 先到Blogger的範本，按“編輯HTML”，如下圖

Step2. 找到</head>

Step3. 在</head>前面貼下下面的code

<link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/>
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPlain.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js' type='text/javascript'/>
<script type='text/javascript'>
    SyntaxHighlighter.config.bloggerMode = true;
    SyntaxHighlighter.all();
</script>

Step4. 加入code。
在HTML格式下加入<pre code="brush: html" name="code"></pre>，回到撰寫模式再copy你的程式進來即可。

實際使用後發現一定要發佈後才看得到效果，無法在編輯時看到，感覺還真是有點點不方便，但免費的能用就好。

另外，為了更好看些（我個人認為），所以我又加入了底下的css，加在script的後面，會讓程式碼被有陰影的框線框起來

<style type="text/css">
.syntaxhighlighter {
 border: 1px solid #999;
 padding: 5px;
 border-radius: 5px;
 box-shadow: inset 0px 0px 4px #555;
}
</style>

參考網址：
SyntaxHighlighter官網
【Blog】Blogger上安裝SyntaxHighlighter
SyntaxHighlighter 在 Blogger 的使用教學

2014年1月16日星期四

PHPUnit學習筆記－測試的第一步

安裝好PHPUnit後，再來當然就是試試看囉

先看了一下這個教學：Test-Driven Development in PHP: First Steps及PHPUnit 入門介紹

我常用的IDE是PDT（Eclipse for PHP），不過看起來沒有好的PHPUnit plugin，想想先用用command line方式來處理好了。

Step1. 先建好project目錄


$mkdir php_test_example/hello/test

$cd php_test_example/hello/

Test-Driven program的理念就是先寫測試然後修複測試，一次只修複一個小error。所以

Step2. 建立測試


$touch test/hello_test.php

$vim test/hello_test.php

填入

<?php

class HelloTest extends PHPUnit_Framework_TestCase
{
public function test_echo_hello()
{
$c = new Hello();
$this->assertEquals('hello',$c->echo_hello());
}
}
?>

再來執行測試
$phpunit test/hello_test.php

得到底下的回應
PHPUnit 3.7.28 by Sebastian Bergmann.


PHP Fatal error:  Class 'Hello' not found in php_test_example/hello/test/hello_test.php on line 7

ok，沒有Hello這個Class。

Step3. 建立實際要用的程式

$vim test/hello_test.php

在class前加入

require_once 'hello.php';



建立hello.php

$touch hello.php

$vim hello.php

填入

<?php 

class Hello

{



}

?>

再次執行
$phpunit test/hello_test.php

這次回應變成

PHPUnit 3.7.28 by Sebastian Bergmann.

PHP Fatal error:  Call to undefined method Hello::echo_hello() in php_test_example/hello/test/hello_test.php on line 10

Step4. 修正錯誤

<?php

class Hello

{

    function echo_hello()

    {

}
}
?>

這邊故意沒加入回傳hello，再次執行
$phpunit test/hello_test.php

回應變成

PHPUnit 3.7.28 by Sebastian Bergmann. 

F

Time: 27 ms, Memory: 2.50Mb

There was 1 failure:

1) HelloTest::test_echo_hello

Failed asserting that null matches expected 'hello'.

php_test_example/hello/test/hello_test.php:10

FAILURES!

Tests: 1, Assertions: 1, Failures: 1.

嘖嘖，果然查出有錯。再重覆這步驟，修正為

<?php
class Hello
{
    function echo_hello()

    {
        return 'hello';

    }
}
?>

再次執行
$phpunit test/hello_test.php

這次就成功啦～！！

PHPUnit 3.7.28 by Sebastian Bergmann.


. 



Time: 16 ms, Memory: 2.25Mb 



OK (1 test, 1 assertion)

大概流程就這樣，實際花不到3分鐘的時間做完。再來就要來試試WordPress上的測試啦，哈哈

參考網址
The session: Test-Driven PHP
It’s Time To Dig In
The Newbie’s Guide to Test-Driven Development

2014年1月15日星期三

Wordpress開發筆記－執行WordPress的Unit test的第一步

想寫WordPress plugin的unit test，還是先看看他們的範例好了，最好的當然是Wordpress開發時的Test case。查了下發現這篇Automated Testing照著做。

Step1: 先安裝好PHPUnit

可參考這篇PHPUnit學習筆記－PHPUnit安裝（使用PEAR）。

Step2: 下載Wordpress正在測試的svn repository

下載的link: http://develop.svn.wordpress.org/trunk/。
在Mac上svn是安裝好的，直接底下的指令即可
$cd (你要放置的目錄位置)
$svn co http://develop.svn.wordpress.org/trunk/ wordpress-develop
$cd wordpress-develop

Step3: 建個資料庫讓測試程式使用

這部分我用phpMyAdmin，隨便建個資料庫及它的名字，字集比對用utf8_general_ci

Step4: 修改wp-test-config.php

$cp wp-tests-config-sample.php wp-tests-config.php
$vim wp-tests-config.php

修改底下的資料
define( 'DB_NAME', '剛建好的資料庫' );
define( 'DB_USER', '使用者號' );
define( 'DB_PASSWORD', '密碼' );
define( 'DB_HOST', 'localhost' );
define( 'DB_CHARSET', 'utf8' );
define( 'DB_COLLATE', 'utf8_general_ci' );

Step5: 執行PHPUnit Test cases啦～！

$phpunit

執行結果如下：

Installing...

Running as single site... To run multisite, use -c tests/phpunit/multisite.xml

Not running ajax tests... To execute these, use --group ajax.

PHPUnit 3.7.28 by Sebastian Bergmann.



Configuration read from /wordpress-develop/phpunit.xml.dist




.............................................................   61 / 1907 (  3%)

............SS...SSSSSS.............S...SS............SS.....  122 / 1907 (  6%)

...........S............S....................................  183 / 1907 (  9%)

........SSS.......SSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSS..S.......  244 / 1907 ( 12%)

.................S............................S.............S  305 / 1907 ( 15%)

...........................SSSSSSSSSS........................  366 / 1907 ( 19%)

..........S..................S.......I.......................  427 / 1907 ( 22%)

.................................SSSS.S..SSSSS...............  488 / 1907 ( 25%)

.............................................................  549 / 1907 ( 28%)

.............................................................  610 / 1907 ( 31%)

.............................................................  671 / 1907 ( 35%)

.............................................................  732 / 1907 ( 38%)

.............................................................  793 / 1907 ( 41%)

...........S.................................................  854 / 1907 ( 44%)

.............................................................  915 / 1907 ( 47%)

...................................SSSSSSSSSSSS..............  976 / 1907 ( 51%)

...............SSSSSS.........S.....S........................ 1037 / 1907 ( 54%)

................................S............................ 1098 / 1907 ( 57%)

.....................S................SSS.......S....SSSS.... 1159 / 1907 ( 60%)

.SS.......................................................... 1220 / 1907 ( 63%)

............................................................. 1281 / 1907 ( 67%)

............................................................. 1342 / 1907 ( 70%)

.....S.........S............................................. 1403 / 1907 ( 73%)

..............S.........................SS................... 1464 / 1907 ( 76%)

..............S..S........................................... 1525 / 1907 ( 79%)

...S...................SSS................................... 1586 / 1907 ( 83%)

............................................................. 1647 / 1907 ( 86%)

............................................................. 1708 / 1907 ( 89%)

............................................................. 1769 / 1907 ( 92%)

............................................................. 1830 / 1907 ( 95%)

.......SS...............SSSSSSSS




Time: 1.71 minutes, Memory: 101.00Mb




OK, but incomplete or skipped tests!

Tests: 1861, Assertions: 8619, Incomplete: 1, Skipped: 131.

看起來，WordPress是參考phpunit.xml.dist這個檔案，不過這檔案非必要。查了下Appendix C. The XML Configuration File，針對WordPress的phpunit.xml.dist稍微記錄一下。

phpunit.xml.dist的內容如下：

<phpunit

bootstrap="tests/phpunit/includes/bootstrap.php"

backupGlobals="false"



        colors="true"

        >

    <testsuites>

        <!-- Default test suite to run all tests -->

        <testsuite>

            <directory suffix=".php">tests/phpunit/tests</directory>

            <exclude>tests/phpunit/tests/actions/closures.php</exclude>

            <exclude>tests/phpunit/tests/image/editor.php</exclude>

            <exclude>tests/phpunit/tests/image/editor_gd.php</exclude>

            <exclude>tests/phpunit/tests/image/editor_imagick.php</exclude>

            <file phpVersion="5.3.0">tests/phpunit/tests/actions/closures.php</file>

            <file phpVersion="5.3.0">tests/phpunit/tests/image/editor.php</file>

            <file phpVersion="5.3.0">tests/phpunit/tests/image/editor_gd.php</file>

            <file phpVersion="5.3.0">tests/phpunit/tests/image/editor_imagick.php</file>

        </testsuite>

    </testsuites>

    <groups>

        <exclude>

            <group>ajax</group>

        </exclude>

    </groups>

    <logging>

        <log type="junit" target="tests/phpunit/build/logs/junit.xml" logIncompleteSkipped="false"/>

    </logging>



</phpunit>

<phpunit>
是phpunit主要的根節點，記載可能的function。v是就指向phpunit的bootstrap.php的路徑，可以不用。

<testsuites>
就眾多的<testsuit>的集合，<testsuit>要放在裡頭

<testsuite>
實際的測試單元，會有name、directory、file等，例如這例子中唯一個testsuite

directory: 指定此testsuite的目錄路徑。
suffix: 例子中是指所有在此目錄下的php檔。
file: 指定某個php要執行，例如此例中closures.php，是php 5.3.0下才執行。
exclude: 指定某個php不執行
phpVersion是指定php的版本。
其實還有phpVersionOperator，若設定phpVersion="5.3.0" phpVersionOperator=">="，表示php的版本要大於等於5.3.0

不過這篇主要是記錄怎樣執行WordPress的unit test的第一步，細節就再看Automated Testing吧。

PS. 也許可以幫忙寫寫WordPress的unit test。哈哈

參考網址：
Automated Testing
PHPUnit
Writing WordPress Plugin Unit Tests

Theme Unit Test
How To Join WPTRT
WP Test: Unit Testing Data for WordPress Themes and Plugins
phpunit.xml.dist設定說明：Appendix C. The XML Configuration File

Wordpress開發筆記－控制"控制台"上的資訊

Wordpress的後台總是個痛，畢竟他不是用來客製化成網站的（雖然可以），不過經過了這麼長的時間，後台多多少少可以做些修改，這次主要是

將控制台中的快貼完全取消掉，連勾選的機會都要沒有

這還真的難倒了，重點是不知道要下什麼key，找半天看到這篇WP客製化 #4: 客製 WordPress 後台登入 LOGO、連結、版權訊息、後台首頁訊息資訊 (非外掛)，寫的不錯，也有我要的答案。解法如下：


function wpc_dashboard_widgets() {
     global $wp_meta_boxes;
     unset($wp_meta_boxes['dashboard']['side']['core']['dashboard_quick_press']);
}
add_action('wp_dashboard_setup', 'wpc_dashboard_widgets');

仔細看看Dashboard Widgets API，原來做到可以再客製的地步了，例如其中提到

Add an Example Widget

Here's an example of a very basic dashboard widget. This code would go in one of your plugin's files, or in your theme's functions.php, for example.

/**
 * Add a widget to the dashboard.
 *
 * This function is hooked into the 'wp_dashboard_setup' action below.
 */
function example_add_dashboard_widgets() {

 wp_add_dashboard_widget(
                 'example_dashboard_widget',         // Widget slug.
                 'Example Dashboard Widget',         // Title.
                 'example_dashboard_widget_function' // Display function.
        ); 
}
add_action( 'wp_dashboard_setup', 'example_add_dashboard_widgets' );

/**
 * Create the function to output the contents of our Dashboard Widget.
 */
function example_dashboard_widget_function() {

 // Display whatever it is you want to show.
 echo "Hello World, I'm a great Dashboard Widget";
}

也許用這方式可以不用登入後，為了跳過控制台還要轉址到其他地方，直接都拿掉，放入自己的資訊。

PS. 樂在設計的作者是個高一的學生，江山果然代有才人出，年紀只是多活的天數比較多，希望不會只是比他多活幾十年而已 XD

參考網址：
WP客製化 #4: 客製 WordPress 後台登入 LOGO、連結、版權訊息、後台首頁訊息資訊 (非外掛)
Dashboard Widgets API
Example Dashboard Widget

2014年1月14日星期二

Mac學習筆記－Mac OS X 10.8.x later 配置Apache PHP MySQL

之前在Mac中都是用XAMPP，但老遇到有的沒的權限問題，我又懶得一直改，最後還是回到最基本的預設模式好了，都用command line最適合我....

[Apache]

OS X 10.10 更新
參考：
Get Apache, MySQL, PHP and phpMyAdmin working on OSX 10.10 Yosemite
Forbidden 403, You don’t have permission to access /~username/ on this server
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

sudo vim /etc/apache2/httpd.conf

將底下兩個的註解去掉
LoadModule userdir_module libexec/apache2/mod_userdir.so
Include /private/etc/apache2/extra/httpd-userdir.conf

若需要php，則也要去掉libphp5.so的註解
LoadModule php5_module libexec/apache2/libphp5.so

sudo vim /private/etc/apache2/extra/httpd-userdir.conf

將底下的註解去掉
Include /private/etc/apache2/users/*.conf

因為OS X 10.10用的是apache 2.4，所以

$sudo vim /private/etc/apache2/users/alvin.conf

<Directory "/Users/alvin/Sites">
    Options Indexes 
    AllowOverride All 
    Order allow,deny
    Allow from all
</Directory>

改成

<Directory "/Users/alvin/Sites">
    Options Indexes 
    AllowOverride All 
    Require all granted
</Directory>

必要時可以更動Apache Web User

$sudo vim /etc/apache2/httpd.conf

更動
User _www
Group _www

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

$which apachectl 

/usr/sbin/apachectl

$sudo apachectl start / stop  （開啟/關閉）

$sudo apachectl -v                （可以看到apache的資訊）

Server version: Apache/2.2.24 (Unix) 

Server built:   Aug 24 2013 21:10:43

我有需要使用Users下的Sites，參考Apache2: UserDir Sites的討論串，是在httpd-userdir.conf設定，不過仔細看了apache2的目錄結構及httpd-userdir.conf的內容，User的個人客製設定是放在/private/etc/apache2/extra/users，以自己的使用名稱來命名，例如：我的使用者名稱alvin，就新建一個alvin.conf，所以動作如下。

$cd /private/etc/apache2/users

$sudo vim alvin.conf

加入底下的資訊

<Directory "/Users/alvin/Sites">

    Options Indexes 

    AllowOverride All 

    Order allow,deny

    Allow from all

</Directory>

$chmod 755 -R /Users/alvin/Sites

儲存後重啟apache即可。

[PHP 5]

預設是不使用PHP的module，所以執行
$sudo vim /private/etc/apache2/httpd.conf

找php5_module，就可以找到，將前面的"#"拿掉再重新啟動apache即可。

若需要更動php的執行的memory及上傳的size，要更動php.ini的設定


$sudo vim /private/etc/php.ini

upload_max_filesize (上傳檔案size)

max_file_uploads (上傳檔案數量)

post_max_size (POST data最大size)

display_errors (Debug php時用)

[MySQL]

本來以為Mac有內建的，查找半天看來是沒有，只能下載MySQL安裝，我安裝的是5.7版，這邊可以看安裝文件MySQL 5.6 Reference Manual :: 2 Installing and Upgrading MySQL :: 2.4 Installing MySQL on Mac OS X。

下載MySQL: Download MySQL Community Server。我下載的是Mac OS X 10.7 (x86, 64-bit), DMG Archive(mysql-5.6.15-osx10.7-x86_64.dmg)，看起來只有支援到10.7的樣子。
下載完成後，點選它，會出現四個檔案，滑鼠雙擊其中mysql-5.6.15-osx10.7-x86_64.pkg，會出現“無法打開「mysql-5.6.15-osx10.7-x86_64.pkg」，因為它來自未識別的開發者。”的提示。這是10.8.x在安裝上的安全性檢查，直接右鍵點選後，選“打開”或“打開檔案的應用程式”再選“安裝程式.app”，一樣會出現警示，但這時按“打開”即可，再來就一直下一步吧。

我個人比較愛在使用時才開啟MySQL，所以這邊就沒安裝MySQLStartupItem.pkg（這邊有安裝說明：2.4.3. Installing the MySQL Startup Item），有需要的人再安裝。
我也也沒有裝MySQL.prefPane，這部分是讓MySQL可以在“系統設定偏好”中可以直接開啟，不過我想用的是command line，就沒有需要了。
所以透過底下的指令開啟或關閉

$sudo /usr/local/mysql/support-files/mysql.server start / stop

另外我為了方便使用MySQL提供的指令，另外在profile上再加上PATH的設定，不過Mac看來不像Linux的系統，都有預設的.bash_profile，只好自己設定

$sudo vim ~/.bash_profile

加入“export PATH="$PATH:/usr/local/mysql/bin"”

之後重新進入終端機程式後，就可以直接使用mysqladmin。

[PhpMyAdmin]

再來安裝PhpMyAdmin來用，在這邊下載。我是下載phpMyAdmin-4.1.4-all-languages.tar.bz2，先移到Sites下後，執行

$tar jxvf phpMyAdmin-4.1.4-all-languages.tar.bz2


$mv phpMyAdmin-4.1.4-all-languages phpmyadmin

將apache及mysql都啟動後，打開browser，打入localhost/~你的使用者名稱/phpmyadmin，就會看到畫面。

遭遇到OS X Mountain Lion 系统配置 Apache+Mysql+PHP 详细教程提到要2002 error的問題，本以為不會有也稍微查了下這是什麼，看起來是檔案權限及設定的問題，所以OS X Mountain Lion 系统配置 Apache+Mysql+PHP 详细教程提到用底下的

$sudo mkdir /var/mysql

$sudo ln -s /tmp/mysql.sock /var/mysql/mysql.sock

這樣他就可以正常使用到/var/mysql/mysql.sock

或看底下兩篇

MySQL Error 2002 - Can't connect through socket '/tmp/mysql.sock' on 64-bit, with a botched 32-bit uninstall complicating things

#2002 – The server is not responding (or the local MySQL server’s socket is not correctly configured)

弄了一整天終於結束....

參考網址：

在Mac OS X中配置Apache ＋ PHP ＋ MySQL

Getting apache to host dropbox files on a mac

MySQL 5.7 Reference Manual :: 2 Installing and Upgrading MySQL :: 2.4 Installing MySQL on Mac OS X

OS X Mountain Lion 系统配置 Apache+Mysql+PHP 详细教程

MySQL Error 2002 - Can't connect through socket '/tmp/mysql.sock' on 64-bit, with a botched 32-bit uninstall complicating things

#2002 – The server is not responding (or the local MySQL server’s socket is not correctly configured)

PHPUnit學習筆記－PHPUnit安裝（使用PEAR）

最近比較閒些，想學學PHP及Wordpress的unit test，當然做之前就要先安裝xUnit，在PHP中就是PHPUnit。

安裝方式主要參考How to Install PHPUnit with MAMP on a Mac及Installing PEAR and PHPUnit on OS X 10.8 (Mountain Lion)

安裝前，先查看php的資訊
php -v -> PHP 5.4.17 (cli) (built: Aug 25 2013 02:03:38)
which php -> /usr/bin/php

再來安裝PEAR

$sudo cp /private/etc/php.ini.default /private/etc/php.ini
$sudo php /usr/lib/php/install-pear-nozlib.phar

$sudo pear config-set php_ini /private/etc/php.ini
$sudo pear channel-update pear.php.net
$sudo pecl channel-update pecl.php.net
$sudo pecl config-set php_ini /private/etc/php.ini
$sudo pear upgrade-all
$sudo vim /private/etc/php.ini

找到include_path，將";"拿掉，在雙引號內加入";/usr/lib/php/pear"

在PHPUnit的Readme中有提到

Alternatively, you may use Composer or the PEAR Installer to download and install PHPUnit as well as its dependencies. Please refer to the documentation for details on how to do this.

可以直接進PEAR Installer查看詳細資料。查看剛安裝好的PEAR。

$ sudo pear -V

PEAR Version: 1.9.4
PHP Version: 5.4.17
Zend Engine Version: 2.4.0
......

再來安裝PHPUnit（此處用PEAR安裝方式，但2014/12/31就停止服務，要改用Composer，方式可看PHPUnit學習筆記－Broken PHP Configuration on Mavericks or later）

$sudo pear config-set auto_discover 1
//sudo pear channel-discover
$sudo pear channel-discover pear.phpunit.de
$sudo pear channel-discover components.ez.no
$sudo pear channel-discover pear.symfony-project.com 
$sudo pear channel-discover pear.symfony.com 
$sudo pear install --alldeps phpunit/PHPUnit
$sudo pear install phpunit/DbUnit --alldeps    <-- 可不裝
$sudo pear install phpunit/PHPUnit_Selenium<-- 可不裝

查看PHPUnit

$phpunit --version
PHPUnit 3.7.28 by Sebastian Bergmann.

這樣就表示安裝成功。

參考網址：
PHPUnit
3.8 Chapter 1. Installing PHPUnit
Installing PEAR and PHPUnit on OS X 10.8 (Mountain Lion)

PEAR
Command line installer (PEAR)
How to Install PHPUnit with MAMP on a Mac
Installing Pear and PHPUnit in Mac Osx 10.8 and PHP 5.4.4

2014年1月13日星期一

使用HTTPS時要注意內容的Link

之前寫過一篇[Block] xxxxxxxxxx ran insecure content from http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css，主要是內容有用到google的jquery，但用http去取得，看起來在https下，最好都是相同的做法，比不會有問題，這時就不該在link上寫入protocol，所以應該用"//"，來取代"http://"或"https://"。

這邊轉載參考的內容如下：
// will give it a realtive protocol. Meaning that if you are accessing http://example.com then the cdn link will also use http:// whereas if you are accessing https://example.com then the cdn link will use https as well.

參考網址
Is Google's jquery CDN script link missing thew leading “https:” for a reason?

2014年1月11日星期六

Mac學習筆記－新增一個Group

之前為了解決XAMPP的權限問題，需要新增一個group，我習慣在linux下直接vim /etc/group或groupadd -r xxx，不過mac的新增方式跟Linux不同，找了下就看到底下例子轉載自How do I add a group in Mac OS X 10.6?

例如新增一個dba
sudo dscl . -create /groups/dba

sudo dscl . -append /groups/dba gid 4200

sudo dscl . -append /groups/dba passwd "*"
參考網址：
How do I add a group in Mac OS X 10.6?
鳥哥的Linux - groupadd

Mac學習筆記－將兩個pdf整合一塊

這幾天在找如何將兩個pdf檔做成一個pdf檔的app，找半天才發現，原來預覽程式就可以了，不用花半毛錢，為了防止之前原文不見，底下就po原文紀錄一下，簡單講的步驟如下：

Step1. 選擇好要合拼的pdf，右鍵 -> 打開檔按的應用程式 -> 預覽程式
Step2. 將另一個PDF中的每頁選好後，拖到目地PDF檔的位置就ok了

這方法還可以移動頁面的位置喲，不過要注意的是，最好先備份，預設是移好後就儲存了。

底下轉載自（Mac OS X v10.6：如何使用預覽程式合併 PDF 文件）

在預覽程式中打開您要合併的 PDF 文件。
顯示每個預覽程式視窗的側邊欄。如果無法顯示側邊欄，請按一下 [預覽程式] 視窗中的 [側邊欄] 按鈕，或選擇顯示方式 > 側邊欄 > 顯示側邊欄。
確認您是否已經把側邊欄設定成顯示縮覽圖（此為預設顯示方式）。如果側邊欄沒有顯示縮覽圖，請選擇顯示方式 > 側邊欄 > 縮覽圖。
把一份 PDF 文件（來源）的縮覽圖，拖移到另一份 PDF 文件（目標）的縮覽圖上，並在指標出現帶有加號的綠色圓形圖像時，放開滑鼠或觸控式軌跡板按鈕。此舉能從來源 PDF 拷貝所有頁面，然後加入目標 PDF 的末尾。

附註：如果您要合併的 PDF 文件已經包含多頁，可選擇只從來源 PDF 拷貝其中幾頁。您也可以選擇把拷貝頁面插入目標 PDF 的現有頁之間。這時多頁 PDF 的縮覽圖上方，會出現中間有箭頭的灰色圓形圖像。如果箭頭指向左邊，在上面按一下就能看到 PDF 中所有頁的縮覽圖。請只選取您要拷貝的頁面，然後拖移到目標 PDF 文件的縮覽圖。如果側邊欄中顯示目標 PDF 的多個縮覽圖，請把拷貝頁拖移到您要加入的正確位置。藍色橫線會出現在要插入拷貝頁的兩頁之間。
如果目標 PDF 中的各頁顯示順序錯誤，請按一下 PDF 文件縮覽圖上方帶有箭頭的灰色圓形圖像，讓箭頭指向右邊，然後把各頁縮覽圖拖移到正確位置。
您要的所有頁面都在目標 PDF 中，而且各頁順序也都正確後，即可選取 [檔案] > [儲存為]，以便儲存包含所有合併頁的 PDF 新文件，或是選取 [檔案] > [儲存]，以便用包含合併頁的版本，取代原版目標 PDF。

附註：[儲存] 或 [儲存為] 指令只能儲存視窗中目前檢視的文件，而非側邊欄中顯示的所有文件。[預覽程式] 視窗的標題列會顯示目前檢視的 PDF 文件名稱、目前檢視文件的頁數、目前的視窗包含多少份（未合併）PDF 文件，以及目前視窗中開啟的所有文件總頁數。例如您在上面的第二個螢幕快照中，可看到目前檢視的「About Stacks.pdf」只有一頁，但是 [預覽程式] 視窗中還有第二份多頁文件。若您在檢視「About Stacks.pdf」時選取 [儲存]，雖然程式能儲存這份單頁文件，卻不會儲存同一個視窗中也開啟的多頁「About Downloads.pdf」。

2014年1月8日星期三

Javascript學習筆記－AJAX使用下更動URL，做個記錄

遇到個需求：使用AJAX的情況下，仍然能夠更動URL！

這主要是因應SEO的需求，因為這樣無法分辦哪頁最受歡迎，不過還真的得承認，我本來還強烈認為不可能，因為朋友及Google大神，看來真的行，不過似乎還是會有瀏覽器及上下頁的問題。

在這邊先做個紀錄。像使用ajax和history.pushState无刷新改变页面URL就寫的不錯。其中提到AJAX的問題

可以无刷新改变页面内容，但无法改变页面URL
为了更好的可访问性，内容发生改变后，通常改变URL的hash
hash的方式不能很好的处理浏览器的前进、后退等问题
进而浏览器引入了onhashchange的接口，不支持的浏览器只能定时去判断hash是否改变
但这种方式对搜索引擎很不友好
twitter和google约定了使用#!xxx（即hash第一个字符为!），搜索引擎进行支持。

要做到這個，分兩種做法

解法1：HTML 5有個History API可以解決瀏覽器上下頁記錄的問題。

例如使用ajax和history.pushState无刷新改变页面URL提到：
var state = { title: title, url: options.url, otherkey: othervalue }; window.history.pushState(state, document.title, url);
之後ajax時，因為state放在event的中，就可以直接用
window.addEventListener('popstate', function(e){

if (history.state){

var state = e.state;

//do something(state.url, state.title);

}

}, false);
在javascript中操作上下頁，可用
window.history.forward()或window.history.back()。

改變URL後要用replaceState讓history知道
state.url = '/another_url';
window.history.replaceState( state, state.title, “/another_url”);

解決2：利用hash

Javascript中的windows.loaction中有個hash（錨點），讓它保持在這個頁面時，也能利用到上下頁按鈕。

例如目前在http://xxx.com/
則用 location.hash = 'yyy';

這樣就可以了。不過瀏覽器版本要

IE8以上
FireFox 3.6以上
Chrome 5以上
Opera 10.6以上
Safari 5.0以上

解法3：用hashchange plugin。

參考網址：
Update URL on AJAX call?
使用ajax和history.pushState无刷新改变页面URL
HTML5: Changing the browser-URL without refreshing page
Update URL after jQuery AJAX pull

Change URL from Javascript like facebook does
Modify Address Bar URL in AJAX App to Match Current State

看HTML5是否支援及HTML5有支援版本：Check here for what browsers support each standard

2014年1月1日星期三

Wordpress開發筆記－加入Google自訂搜尋功能

2014年到，好好的清一清一堆草稿文章。從最近的下手。最近有需要用Google做站內搜尋，做法做個記錄。

Step1. 先進入後台，設定讓Google進入做搜尋索引，如下圖，將勾選拿掉

Step2. 至Google Custom Search page（登入你的Google帳號），會看到底下的管理介面，直接按新增（我這邊是已經有過一個，若沒有的話，會先進入下一張畫面）

Step3. 加入你的網站網址在第一個文字框，選擇語言，再按建立

Step4. 成功後，會看到底下的圖，按下”取得程式碼”，就可以取得javascript程式碼（後續要用到）

紅框部分就是

Step5. 在自己的wordpress的theme中新增search.php，在要顯示的div或html區塊中，加入紅框中的程式碼。

若要改外觀，可以在Step4中的控制台或回到https://www.google.com/cse/all中的列表點選剛才建的搜尋，即可看到下圖，可以設定搜尋的呈現外觀

Step 6. 再來要通知Google來做索引，要先驗證有這個網站的擁有權，先到網站管理員工具加入這個網址，按下新增網址，會跳出對話框請你加入，再加入你的網址，會再看到下一張圖

下載html到自己的網站根目錄，再點選驗證即可。

回到https://www.google.com/cse/all中，點選要search的網址，再點選設定＞建立索引。有兩個方式可以要求做索引，這邊直接使用第一種：特定網址。加入網址（記得前面要有"-"號），再按下“立即建立索引”的按鈕即可。

要看到底下回應，才自成功

若要用sitemap，得再另外再寫一篇了，用那個還有一堆細節要調整。

參考網址：
Custom Search Element Control API
Creating Custom Search Engines programatically
如何在WordPress整合Google自訂搜尋？
Installing Google Custom Search Engine (CSE) On WordPress Site

新增Google CSE搜尋

Wordpress開發筆記－更動文章呈現數

最近用wordpress時有需求

某自訂分類的文章在前台只能呈現9篇，其他則仍是後台設定的呈現篇數

查了半天，只要在theme中的functions.php（或其他需要處）加入

function modify_showcase_posts_per_page($wp_query) {
    if( get_query_var('showcase_cat_1') == null ) return;
    $wp_query->query_vars['posts_per_page'] = 9;
}
add_filter( 'pre_get_posts', 'modify_showcase_posts_per_page' );

註：pre_get_posts在Plugin API/Action Reference/pre get posts有提到，原文如下：

This hook is called after the query variable object is created, but before the actual query is run.

The pre_get_posts action gives developers access to the $query object by reference (any changes you make to $query are made directly to the original object - no return value is necessary).

該好好整理下每個action...

參考網址：
WordPress post per page (Archive)
How can i retrieve default post per page value? from settings->reading. And total number of posts?
Function Reference/query posts

訂閱：文章 (Atom)

網頁

2014年1月26日 星期日

2014年1月23日 星期四

2014年1月22日 星期三