Coding | Starck Lin

Modern Testing with Laravel 4

Coding, Log — Tags: Laravel, PHP, Thinking — Posted by Starck on June 18, 2013

Behavior-Driven Development

簡稱 BDD, 簡單地說就是用一種情境設定的方式來進行開發的過程。

在 Laravel 4 我們需要以下三種組合之一:

Codeception
[email protected] and Mink – (optional)
Selenium2, PhantomJS and Mink – (optional)

Codeception Installation

# 下載 codecept
$ wget http://codeception.com/codecept.phar
# 初始化 codecept, 它會建立所需的檔案在目前的目錄中的 tests 資料夾
$ php codecept.phar bootstrap

查看有什麼指令可以使用:

php codecept.phar

修改 tests/functional.suite.yml:

class_name: TestGuy
modules:
    enabled: [Laravel4, TestHelper]

class_name: TestGuy

modules:

enabled: [Laravel4, TestHelper]

因為我們新增了一個 Laravel4 的 module, 所以讓 Codeception 再次重新建立所需的 Class:

php codecept.phar build

Codeception Usage

建立第一個測試:

php codecept.phar generate:cept acceptance Fisrt

Codeception 會在 tests/acceptance/ 下建立一個 FirstCept.php 檔案

內容為:

<?php
$I = new WebGuy($scenario);

1 2	<?php $I = new WebGuy($scenario);

First Scenario

我要到 / (網站首頁)。
我看到了 Hello World! 這段文字出現在首頁上。

這樣的情境，寫成測試檔就變成如下:

<?php
$I = new WebGuy($scenario);
$I->wantTo('goto homepage, and see hello word');
$I->amOnPage('/');
$I->see('Hello World!');

<?php

$I = new WebGuy($scenario);

$I->wantTo('goto homepage, and see hello word');

$I->amOnPage('/');

$I->see('Hello World!');

執行測試:

php codecept.phar run

Zombie.JS and Mink

由於 Codeception 的 PhpBrowser 是基於 PHP Curl 去實現模擬 Browser 的操作, 所以面對一些會有 Javascript 互動的網頁，在測試上就會顯得力不從心。還好 Codeception 提供了 ZombieJS module, 我們可以得到一個更真實的模擬測試。

Zombie.JS

Zombie.JS 是一個 NPM 的 package, 所以在這之前我們必須先安裝好 NPM 的環境。

將 zombie 1.4.1 版安裝到全域環境:

sudo npm install -g [email protected]

2013-06-18 註: 經測試, 目前只能裝 1.4.1 的版本, 版本太新 Mink 不支援.

開啟 ~/.bashrc, 加上 NODE_PATH 的設定

export NODE_PATH="/usr/local/lib/node_modules"

Mink

在 composer.json 中加入到 require:

"behat/mink": "1.5.*@dev"

重新更新 composer:

composer update

目前已知問題： checkOption(), uncheckOption(), executeJs() 無作用

Selenium2 and PhantomJS

比起 Zombie.JS, 我更喜歡 PhantomJS, 更穩定且資源豐富. 主要看到官方的一些範例, 真得相當地強大, 甚至可以 Screenshot… (Codeception 用來當發生測試失敗時會將快照存在 log 資料夾, 相當地方便!)

要使用 PhantomJS 當作 Browser, 我們需要 Selenium2 作 driver.

先執行 Selenium2:

java -jar selenium-server-standalone-2.33.0.jar

將會啟動一個 Selenium2 Server, 預設會使用 port 4444, 如需修改可在後面加上 -port 參數:

java -jar selenium-server-standalone-2.33.0.jar -port 8888

08:17:34.571 INFO - Java: Apple Inc. 20.45-b01-451
08:17:34.572 INFO - OS: Mac OS X 10.7.5 x86_64
08:17:34.584 INFO - v2.33.0, with Core v2.33.0. Built from revision 4e90c97
08:17:34.691 INFO - RemoteWebDriver instances should connect to: http://127.0.0.1:4444/wd/hub
08:17:34.692 INFO - Version Jetty/5.1.x
08:17:34.692 INFO - Started HttpContext[/selenium-server/driver,/selenium-server/driver]
08:17:34.693 INFO - Started HttpContext[/selenium-server,/selenium-server]
08:17:34.693 INFO - Started HttpContext[/,/]
08:17:34.738 INFO - Started org.openqa.jetty.jetty.servlet.ServletHandler@56d73c7a
08:17:34.738 INFO - Started HttpContext[/wd,/wd]
08:17:34.746 INFO - Started SocketListener on 0.0.0.0:4444
08:17:34.746 INFO - Started org.openqa.jetty.jetty.Server@54cbf30e

接著啟動 PhantomJS 跟 Selenium2 連接:

phantomjs --webdriver=4444

PhantomJS is launching GhostDriver...
[INFO  - 2013-06-18T00:17:27.627Z] GhostDriver - Main - running on port 4444

然後設定 Codeception 的 tests/acceptance.suite.yml 設定檔, 指定用 Selenium2 module:

modules:
   enabled: [Selenium2]
   config:
      Selenium2:
         url: 'http://starck-macmini'
         browser: firefox
         capabilities:
             unexpectedAlertBehaviour: 'accept'
             # delay: 500

modules:

enabled: [Selenium2]

config:

Selenium2:

url: 'http://starck-macmini'

browser: firefox

capabilities:

unexpectedAlertBehaviour: 'accept'

# delay: 500

url (required) – start url for your app
browser (required) – browser that would be launched
host – Selenium server host (localhost by default)
port – Selenium server port (4444 by default)
delay – To set delay between actions in milliseconds (1/1000 of second) if they run too fast
capabilities – To set Selenium2 desired capabilities. Should be a key-value array.

Comments (0)

Laravel 4 – Resources

Coding — Tags: Laravel, PHP — Posted by Starck on June 14, 2013

Starter

Package

IDE helper

Comments (1)

PHP – passthru with output buffering

Coding — Tags: PHP — Posted by Starck on June 7, 2013

將 passthru 輸出內容存在變數中:

ob_start();
passthru('php artisan', $return);
$return = ob_get_clean();

ob_start();

passthru('php artisan', $return);

$return = ob_get_clean();

Comments (0)

Laravel – Inject inline content into a section.

Coding — Tags: Laravel, PHP — Posted by Starck on June 7, 2013

手動注入 section 內容:

$view = View::make('layouts.scaffold');
$view->getEnvironment()->inject('main',$return);

1 2	$view = View::make('layouts.scaffold'); $view->getEnvironment()->inject('main',$return);

layouts/scaffold.blade.php:

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Scaffold</title>
        <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
        <style>
            table form { margin-bottom: 0; }
            form ul { margin-left: 0; list-style: none; }
            .error { color: red; font-style: italic; }
            body { padding-top: 20px; }
        </style>
    </head>

    <body>

        <div class="container">
            @if (Session::has('message'))
                <div class="flash alert">
                    {{ Session::get('message') }}
                </div>
            @endif

            @yield('main')
        </div>

    </body>

</html>

<!doctype html>

<html>

<head>

<title>Scaffold</title>

<style>

table form { margin-bottom: 0; }

form ul { margin-left: 0; list-style: none; }

.error { color: red; font-style: italic; }

body { padding-top: 20px; }

</style>

</head>

<body>

@if (Session::has('message'))

</div>

@endif

@yield('main')

</div>

</body>

</html>

Comments (0)

Laravel with Gmail

Coding — Tags: Laravel, PHP — Posted by Starck on June 6, 2013

修改 app/config/mail.php:

host 為 smtp.gmail.com
port 為 465
encryption 為 ssl

<?php

return array(

    'driver' => 'smtp',
    'host' => 'smtp.gmail.com',
    'port' => 465,
    'encryption' => 'ssl',

);

<?php

return array(

'driver' => 'smtp',

'host' => 'smtp.gmail.com',

'port' => 465,

'encryption' => 'ssl',

);

Test:

Route::get('/MailTest', function()
{
    $data['name'] = 'Starck Lin';
    Mail::send('emails.welcome', $data, function($message)
    {
        $message->to('xxx@xxx.com')->subject('Welcome!!!');
    });
});

Route::get('/MailTest', function()

{

$data['name'] = 'Starck Lin';

Mail::send('emails.welcome', $data, function($message)

{

$message->to('[email protected]')->subject('Welcome!!!');

});

Comments (1)

Media Query for different Device or Screen

Coding — Tags: CSS, Media Query — Posted by Starck on May 17, 2013

from Media Query Builder

/* (320x480) iPhone (Original, 3G, 3GS) */
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
    /* insert styles here */
}

/* (320x480) Smartphone, Portrait */
@media only screen and (device-width: 320px) and (orientation: portrait) {
    /* insert styles here */
}

/* (320x480) Smartphone, Landscape */
@media only screen and (device-width: 480px) and (orientation: landscape) {
    /* insert styles here */
}

/* (480x800) Android */
@media only screen and (min-device-width: 480px) and (max-device-width: 800px) {
    /* insert styles here */
}

/* (640x960) iPhone 4 & 4S */
@media only screen and (min-device-width: 640px) and (max-device-width: 960px) {
    /* insert styles here */
}

/* (720x1280) Galaxy Nexus, WXGA */
@media only screen and (min-device-width: 720px) and (max-device-width: 1280px) {
    /* insert styles here */
}

/* (720x1280) Galaxy Nexus, Landscape */
@media only screen and (min-device-width: 720px) and (max-device-width: 1280px) and (orientation: landscape) {
    /* insert styles here */
}

/* (1024x768) iPad 1 & 2, XGA */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
    /* insert styles here */
}

/* (768x1024) iPad 1 & 2, Portrait */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
    /* insert styles here */
}

/* (1024x768) iPad 1 & 2, Landscape */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {
    /* insert styles here */
}

/* (2048x1536) iPad 3 */
@media only screen and (min-device-width: 1536px) and (max-device-width: 2048px) {
    /* insert styles here */
}

/* (1280x720) Galaxy Note 2, WXGA */
@media only screen and (min-device-width: 720px) and (max-device-width: 1280px) {
    /* insert styles here */
}

/* (1366x768) WXGA Display */
@media  screen and (max-width: 1366px) {
    /* insert styles here */
}

/* (1280x1024) SXGA Display */
@media  screen and (max-width: 1280px) {
    /* insert styles here */
}

/* (1440x900) WXGA+ Display */
@media  screen and (max-width: 1440px) {
    /* insert styles here */
}

/* (1680x1050) WSXGA+ Display */
@media  screen and (max-width: 1680px) {
    /* insert styles here */
}

/* (1920x1080) Full HD Display */
@media  screen and (max-width: 1920px) {
    /* insert styles here */
}

/* (1600x900) HD+ Display */
@media  screen and (max-width: 1600px) {
    /* insert styles here */
}

/* (320x480) iPhone (Original, 3G, 3GS) */

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {

/* insert styles here */

}

/* (320x480) Smartphone, Portrait */

@media only screen and (device-width: 320px) and (orientation: portrait) {

/* insert styles here */

}

/* (320x480) Smartphone, Landscape */

@media only screen and (device-width: 480px) and (orientation: landscape) {

/* insert styles here */

}

/* (480x800) Android */

@media only screen and (min-device-width: 480px) and (max-device-width: 800px) {

/* insert styles here */

}

/* (640x960) iPhone 4 & 4S */

@media only screen and (min-device-width: 640px) and (max-device-width: 960px) {

/* insert styles here */

}

/* (720x1280) Galaxy Nexus, WXGA */

@media only screen and (min-device-width: 720px) and (max-device-width: 1280px) {

/* insert styles here */

}

/* (720x1280) Galaxy Nexus, Landscape */

@media only screen and (min-device-width: 720px) and (max-device-width: 1280px) and (orientation: landscape) {

/* insert styles here */

}

/* (1024x768) iPad 1 & 2, XGA */

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {

/* insert styles here */

}

/* (768x1024) iPad 1 & 2, Portrait */

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {

/* insert styles here */

}

/* (1024x768) iPad 1 & 2, Landscape */

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {

/* insert styles here */

}

/* (2048x1536) iPad 3 */

@media only screen and (min-device-width: 1536px) and (max-device-width: 2048px) {

/* insert styles here */

}

/* (1280x720) Galaxy Note 2, WXGA */

@media only screen and (min-device-width: 720px) and (max-device-width: 1280px) {

/* insert styles here */

}

/* (1366x768) WXGA Display */

@media screen and (max-width: 1366px) {

/* insert styles here */

}

/* (1280x1024) SXGA Display */

@media screen and (max-width: 1280px) {

/* insert styles here */

}

/* (1440x900) WXGA+ Display */

@media screen and (max-width: 1440px) {

/* insert styles here */

}

/* (1680x1050) WSXGA+ Display */

@media screen and (max-width: 1680px) {

/* insert styles here */

}

/* (1920x1080) Full HD Display */

@media screen and (max-width: 1920px) {

/* insert styles here */

}

/* (1600x900) HD+ Display */

@media screen and (max-width: 1600px) {

/* insert styles here */

}

Comments (0)

Viewing Chrome Cache

Coding — Tags: Chrome, javascript — Posted by Starck on May 14, 2013

In Chrome chrome://cache/
Click on whichever file you want to view
Settings > Tools > JavaScript Console
Paste code below:

(function() {
    var preTags = document.getElementsByTagName('pre');
    var preWithHeaderInfo = preTags[0];
    var preWithContent = preTags[2];

    var lines = preWithContent.textContent.split('\n');
    var text = '';
    for (var i = 0; i < lines.length; i++) {
        var line = lines[i];
        var firstIndex = 11; // first index of the chars to match
        var indexJump = 4;
        var totalCharsPerLine = 16;
        index = firstIndex;
        for (var j = 0; j < totalCharsPerLine; j++) {
            var hexValAsStr = line.substr(index, 2);
            if (hexValAsStr == '  ') {
                // no more chars
                break;
            }

            var asciiVal = parseInt(hexValAsStr, 16);
            text += String.fromCharCode(asciiVal);

            index += indexJump;
        }
    }

    var headerText = preWithHeaderInfo.textContent;
    var elToInsertBefore = document.body.childNodes[0];
    var insertedDiv = document.createElement("div");
    document.body.insertBefore(insertedDiv, elToInsertBefore);

    // find the filename
    var nodes = [document.body];
    var filepath = '';
    while (true) {
        var node = nodes.pop();
        if (node.hasChildNodes()) {
            var children = node.childNodes;
            for (var i = children.length - 1; i >= 0; i--) {
                nodes.push(children[i]);
            }
        }

        if (node.nodeType === Node.TEXT_NODE && /\S/.test(node.nodeValue)) {
            // 1st depth-first text node (with non-whitespace chars) found
            filepath = node.nodeValue;
            break;
        }
    }
    
    outputResults(insertedDiv, convertToBase64(text), filepath, headerText);

    insertedDiv.appendChild(document.createElement('hr'));

    function outputResults(parentElement, fileContents, fileUrl, headerText) {
        // last updated 1/27/12
        var rgx = /.+\/([^\/]+)/;
        var filename = rgx.exec(fileUrl)[1];

        // get the content type
        rgx = /content-type: (.+)/i;
        var match = rgx.exec(headerText);
        var contentTypeFound = match != null;
        var contentType = "text/plain";
        if (contentTypeFound) {
            contentType = match[1];
        }

        var dataUri = "data:" + contentType + ";base64," + fileContents;

        // check for gzipped file
        var gZipRgx = /content-encoding: gzip/i;
        if (gZipRgx.test(headerText)) {
            filename += '.gz';
        }
        
        // check for image
        var imageRgx = /image/i;
        var isImage = imageRgx.test(contentType);
            
        // create link
        var aTag = document.createElement('a');
        aTag.textContent = "Left-click to download the cached file";
        aTag.setAttribute('href', dataUri);
        aTag.setAttribute('download', filename);
        parentElement.appendChild(aTag);
        parentElement.appendChild(document.createElement('br'));
    
        // create image
        if (isImage) {
            var imgTag = document.createElement('img');
            imgTag.setAttribute("src", dataUri);
            parentElement.appendChild(imgTag);
            parentElement.appendChild(document.createElement('br'));
        }
    
        // create warning
        if (!contentTypeFound) {
            var pTag = document.createElement('p');
            pTag.textContent = "WARNING: the type of file was not found in the headers... defaulting to text file.";
            parentElement.appendChild(pTag);
        }
    }

    function getBase64Char(base64Value) {
        if (base64Value < 0) {
            throw "Invalid number: " + base64Value;
        } else if (base64Value <= 25) {
            // A-Z
            return String.fromCharCode(base64Value + "A".charCodeAt(0));
        } else if (base64Value <= 51) {
            // a-z
            base64Value -= 26; // a
            return String.fromCharCode(base64Value + "a".charCodeAt(0));
        } else if (base64Value <= 61) {
            // 0-9
            base64Value -= 52; // 0
            return String.fromCharCode(base64Value + "0".charCodeAt(0));
        } else if (base64Value <= 62) {
            return '+';
        } else if (base64Value <= 63) {
            return '/';
        } else {
            throw "Invalid number: " + base64Value;
        }
    }

    function convertToBase64(input) {
        // http://en.wikipedia.org/wiki/Base64#Example
        var remainingBits;
        var result = "";
        var additionalCharsNeeded = 0;

        var charIndex = -1;
        var charAsciiValue;
        var advanceToNextChar = function() {
            charIndex++;
            charAsciiValue = input.charCodeAt(charIndex);
            return charIndex < input.length;
        };

        while (true) {
            var base64Char;

            // handle 1st char
            if (!advanceToNextChar()) break;
            base64Char = charAsciiValue >>> 2;
            remainingBits = charAsciiValue & 3; // 0000 0011
            result += getBase64Char(base64Char); // 1st char
            additionalCharsNeeded = 3;

            // handle 2nd char
            if (!advanceToNextChar()) break;
            base64Char = (remainingBits << 4) | (charAsciiValue >>> 4);
            remainingBits = charAsciiValue & 15; // 0000 1111
            result += getBase64Char(base64Char); // 2nd char
            additionalCharsNeeded = 2;

            // handle 3rd char
            if (!advanceToNextChar()) break;
            base64Char = (remainingBits << 2) | (charAsciiValue >>> 6);
            result += getBase64Char(base64Char); // 3rd char
            remainingBits = charAsciiValue & 63; // 0011 1111
            result += getBase64Char(remainingBits); // 4th char
            additionalCharsNeeded = 0;
        }

        // there may be an additional 2-3 chars that need to be added
        if (additionalCharsNeeded == 2) {
            remainingBits = remainingBits << 2; // 4 extra bits
            result += getBase64Char(remainingBits) + "=";
        } else if (additionalCharsNeeded == 3) {
            remainingBits = remainingBits << 4; // 2 extra bits
            result += getBase64Char(remainingBits) + "==";
        } else if (additionalCharsNeeded != 0) {
            throw "Unhandled number of additional chars needed: " + additionalCharsNeeded;
        }

        return result;
    }
})()

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

(function() {

var preTags = document.getElementsByTagName('pre');

var preWithHeaderInfo = preTags[0];

var preWithContent = preTags[2];

var lines = preWithContent.textContent.split('\n');

var text = '';

for (var i = 0; i < lines.length; i++) {

var line = lines[i];

var firstIndex = 11; // first index of the chars to match

var indexJump = 4;

var totalCharsPerLine = 16;

index = firstIndex;

for (var j = 0; j < totalCharsPerLine; j++) {

var hexValAsStr = line.substr(index, 2);

if (hexValAsStr == ' ') {

// no more chars

break;

}

var asciiVal = parseInt(hexValAsStr, 16);

text += String.fromCharCode(asciiVal);

index += indexJump;

}

var headerText = preWithHeaderInfo.textContent;

var elToInsertBefore = document.body.childNodes[0];

var insertedDiv = document.createElement("div");

document.body.insertBefore(insertedDiv, elToInsertBefore);

// find the filename

var nodes = [document.body];

var filepath = '';

while (true) {

var node = nodes.pop();

if (node.hasChildNodes()) {

var children = node.childNodes;

for (var i = children.length - 1; i >= 0; i--) {

nodes.push(children[i]);

}

if (node.nodeType === Node.TEXT_NODE && /\S/.test(node.nodeValue)) {

// 1st depth-first text node (with non-whitespace chars) found

filepath = node.nodeValue;

break;

}

outputResults(insertedDiv, convertToBase64(text), filepath, headerText);

insertedDiv.appendChild(document.createElement('hr'));

function outputResults(parentElement, fileContents, fileUrl, headerText) {

// last updated 1/27/12

var rgx = /.+\/([^\/]+)/;

var filename = rgx.exec(fileUrl)[1];

// get the content type

rgx = /content-type: (.+)/i;

var match = rgx.exec(headerText);

var contentTypeFound = match != null;

var contentType = "text/plain";

if (contentTypeFound) {

contentType = match[1];

}

var dataUri = "data:" + contentType + ";base64," + fileContents;

// check for gzipped file

var gZipRgx = /content-encoding: gzip/i;

if (gZipRgx.test(headerText)) {

filename += '.gz';

}

// check for image

var imageRgx = /image/i;

var isImage = imageRgx.test(contentType);

// create link

var aTag = document.createElement('a');

aTag.textContent = "Left-click to download the cached file";

aTag.setAttribute('href', dataUri);

aTag.setAttribute('download', filename);

parentElement.appendChild(aTag);

parentElement.appendChild(document.createElement('br'));

// create image

if (isImage) {

var imgTag = document.createElement('img');

imgTag.setAttribute("src", dataUri);

parentElement.appendChild(imgTag);

parentElement.appendChild(document.createElement('br'));

}

// create warning

if (!contentTypeFound) {

var pTag = document.createElement('p');

pTag.textContent = "WARNING: the type of file was not found in the headers... defaulting to text file.";

parentElement.appendChild(pTag);

}

function getBase64Char(base64Value) {

if (base64Value < 0) {

throw "Invalid number: " + base64Value;

} else if (base64Value <= 25) {

// A-Z

return String.fromCharCode(base64Value + "A".charCodeAt(0));

} else if (base64Value <= 51) {

// a-z

base64Value -= 26; // a

return String.fromCharCode(base64Value + "a".charCodeAt(0));

} else if (base64Value <= 61) {

// 0-9

base64Value -= 52; // 0

return String.fromCharCode(base64Value + "0".charCodeAt(0));

} else if (base64Value <= 62) {

return '+';

} else if (base64Value <= 63) {

return '/';

} else {

throw "Invalid number: " + base64Value;

}

function convertToBase64(input) {

// http://en.wikipedia.org/wiki/Base64#Example

var remainingBits;

var result = "";

var additionalCharsNeeded = 0;

var charIndex = -1;

var charAsciiValue;

var advanceToNextChar = function() {

charIndex++;

charAsciiValue = input.charCodeAt(charIndex);

return charIndex < input.length;

};

while (true) {

var base64Char;

// handle 1st char

if (!advanceToNextChar()) break;

base64Char = charAsciiValue >>> 2;

remainingBits = charAsciiValue & 3; // 0000 0011

result += getBase64Char(base64Char); // 1st char

additionalCharsNeeded = 3;

// handle 2nd char

if (!advanceToNextChar()) break;

base64Char = (remainingBits << 4) | (charAsciiValue >>> 4);

remainingBits = charAsciiValue & 15; // 0000 1111

result += getBase64Char(base64Char); // 2nd char

additionalCharsNeeded = 2;

// handle 3rd char

if (!advanceToNextChar()) break;

base64Char = (remainingBits << 2) | (charAsciiValue >>> 6);

result += getBase64Char(base64Char); // 3rd char

remainingBits = charAsciiValue & 63; // 0011 1111

result += getBase64Char(remainingBits); // 4th char

additionalCharsNeeded = 0;

}

// there may be an additional 2-3 chars that need to be added

if (additionalCharsNeeded == 2) {

remainingBits = remainingBits << 2; // 4 extra bits

result += getBase64Char(remainingBits) + "=";

} else if (additionalCharsNeeded == 3) {

remainingBits = remainingBits << 4; // 2 extra bits

result += getBase64Char(remainingBits) + "==";

} else if (additionalCharsNeeded != 0) {

throw "Unhandled number of additional chars needed: " + additionalCharsNeeded;

}

return result;

}

})()

Comments (0)

Git Deployment Solution

Coding, Log — Tags: deployment, git, strategy, Thinking, workflow — Posted by Starck on April 2, 2013

Why we need a Git Deployment Solution ?

In our past website develop workflow, we may often update files to production server by FTP, but it maybe causes some problems due to human factors, and it can’t be controlled and tracked for file version. As we increasingly need to maintain our projects by Git, if we are able to update server files while we do Git push, it sounds like a good idea, right? so we dont need to check which files want to upload any more. even we can push our project to development server and production server according to our needs.

在以往網站建置的工作流程中, 我們可能常常是用 FTP 的方式來更新 production server 的檔案. 這之中, 常會發生一些人為因素的失誤造成混亂, 而且也沒有一個紀錄來追蹤檔案的版本情況. 現在的工作愈來愈需要 Git 來維護專案, 而如果我們在每次 Git push 的時候, 也更動 server 的檔案, 似乎是個不錯的 idea? (我們不再需要用 FTP 自已判斷要上傳哪些有被異動過的檔案了!) 甚至我們可以先在本機測完, Git push 到 development server, 沒問題後, 再正式發佈到 production server 上線.

聽起來好像不錯? 那該怎麼作?

需要的工具

Git
一台已經設好 SSH-Server 的主機 ex: production.com

設定流程

假設我們現在是這個情況:

伺服器的 domain name 叫 production.com
伺服器網站的根目錄設在 /var/www/production.com

本機端 (local)

mkdir "your project folder"
cd "your project folder"
# 建立 git 檔案庫
git init
# create release branch
git branch master
git checkout master
git remote add prod-server [email protected]:/var/www/production.com

伺服器端 (production server)

cd /var/www/production.com
git init
git config receive.denyCurrentBranch ignore
git branch master
git checkout master

我們需要用到 Git post-receive hook 來實現當收到 push 資料之後更新到最後版本:

vim .git/hooks/post-receive

將以下 script 內容加上去

#!/bin/sh
cd ..
env -i git reset --hard
env -i git submodule update

#!/bin/sh

cd ..

env -i git reset --hard

env -i git submodule update

別忘了讓 post-receive 是可被執行的:

chmod +x .git/hooks/post-receive

實作流程

本機端 (local)

我們先建立一個 README.md, 然後用 Git push 看看是否伺服器上也會同步:

touch README.md
git add .
git commit -m 'first commit'
git push prod-server master

touch README.md

git add .

git commit -m 'first commit'

git push prod-server master

Git 會用 SSH 的方式連線, 所以請先確認是否能用該 user 連線登入 production server.

–

如果想要之後只打 git push 就佈署到主機, 請加上 -u 參數 git push -u prod-server master

伺服器端 (production server)

ls
-rw-rw-r-- 1 starck starck 32 2013-04-01 19:49 README.md

1 2	ls -rw-rw-r-- 1 starck starck 32 2013-04-01 19:49 README.md

確認 README.md 存在, 成功!

現在, 我們現在有一個比 FTP 上傳更聰明的佈署方式了.

–

2013-04-03 update: 今天在找資料的時候發現 Stack Overflow 有人在討論這個方式.

Stack Overflow: Deploying a Project using Git Push

Comments (0)

Using CodeKit with Foundation and Bootstrap

Coding — Tags: Bootstrap, CodeKit, CSS, Foundation, Framework — Posted by Starck on March 28, 2013

需要軟體與 Framework

CodeKit

CodeKit Interface

Continue reading “Using CodeKit with Foundation and Bootstrap” »

Pages: 1 2

Comments (0)

Laravel 4 Tutorial Part 1 – Installation and Configuration

Coding — Tags: Laravel, PHP — Posted by Starck on March 26, 2013

Laravel

根據官網的說法:

Laravel is a clean and classy framework for PHP web development. Freeing you from spaghetti code, Laravel helps you create wonderful applications using simple, expressive syntax.

Development should be a creative experience that you enjoy, not something that is painful. Enjoy the fresh air.

–

大略看了文件後，覺得跟 Ruby on Rails 的概念很接近，以下幾點特色很吸引我:

Artisan : command-line 的操作方式, 支持擴充指令
Autoloading : 採用 Composer 的 autoload 機制, 不用再一直忘了 require 了
Blade Template Engine : 簡單好用的模版引擎
Migration / Seeding : 資料庫的版本管理
Query Builder : 幾乎所有的 MVC Framework 都會有這樣的 SQL 操作類
Eloquent ORM / Auth : 直接就有 ORM 可以用! 並有一個簡單的 Authentication 機制
Dependency Injection
IoC Container

–

安裝

Get Laravel from Github

$ mkdir {project_folder}
$ cd {project_folder}
$ get clone git://github.com/laravel/laravel.git
$ git checkout develop

–

Laravel 從 4 開始就不再用舊有的 Bundle, 而採用 Composer 來作 packages 的管理與安裝.

下載 Composer

$ curl -sS https://getcomposer.org/installer | php

付予 Composer 可執行的權限

這時專案資料夾會有一個 composer.phar 的文件, 我習慣把它命名為 composer 並付予可執行的權限:

$ chmod +x ./composer.phar
$ mv composer.phar composer

–

安裝 Composer

$ composer install

安裝 Laravel 所需的 packages

$ composer update

到這裡如果都沒有發生任何錯誤, Laravel 4 就算安裝完成了.

–

開發工具

我個人偏好用 SublimeText 2 or Vim 來作為我開發的 IDE, 而基於 Laravel 我比較建議用 SublimeText, 因為有一個方便的 LaravelGenerator, 使用這個 Plugin 前需要安裝 Laravel-4-Generators.

安裝 LaravelGenerator SublimeText Plugin

在 SublimeText 中:

Command + Shift + p

出現提示後然後輸入:

install 選擇 Package Control: Install Package

接著輸入: LaravelGenerator 選擇我們要安裝的 Plugin

這樣我們就已經把 LaravelGenerator Plugin 裝進 SublimeText 了

–

安裝 Laravel-4-Generators Package

開啟專案根目錄下的 composer.json, 在 require 設定加入 "way/generators": "dev-master"

"require": {
    "laravel/framework": "4.0.*",
    "way/generators": "dev-master"
},

"require": {

"laravel/framework": "4.0.*",

"way/generators": "dev-master"

更新並下載所需的 packages

$ composer update

加入 Laravel 的 ServiceProvider

開啟 app/config/app.php

在 providers 中加上 'Way\Generators\GeneratorsServiceProvider', 讓 artisan 運行時自動載入所需的類別

檢查 Laravel-4-Generators 是否安裝成功

$ php artisan

如果出現訊息有包含以下資訊就代表 package 安裝成功了:

generate
  generate:migration   Generate a new migration.
  generate:model       Generate an Eloquent model.
  generate:resource    Generate a new resource.
  generate:seed        Generate a DB seed class.
  generate:test        Generate a PHPUnit Test.
  generate:view        Generate a new view

generate

generate:migration Generate a new migration.

generate:model Generate an Eloquent model.

generate:resource Generate a new resource.

generate:seed Generate a DB seed class.

generate:test Generate a PHPUnit Test.

generate:view Generate a new view

可以參考 Pro Workflow in Laravel and Sublime Text 中的影片教學.

–

設定

儲存區目錄權限設定

將 app/storage 這個資料夾裡所有文件和目錄都設為可寫入的權限:

$ chmod -R 777 ./app/storage/

在 Server 上因為我習慣上會把網站文件的群組設為 apache (CentOS) or www-data (Ubuntu), 再付予群組的寫入權限.

$ chown -R user:group ./app/storage
$ chmod -R g+x ./app/storage

環境設定

Laravel 的設定檔都統一放置在 app/config/ 裡, 而 Laravel 可以依據 HTTP host 來決定讀取不同的設定檔, 例如測試主機和正式主機的資料庫設定可能會有所不同.

設定檔預設就是用在 production 環境, 如果有特定的設定需要在 localhost 本機環境下作變動, 只要在 app/config/ 建立一個 local 資料夾, 並把設定檔放置其中即可, 例如 database.php.

example:

app/config/ - 放置正式上線的 production 設定
app/config/local/ - 放置本機環境的設定
app/config/testing/ - Unit Testing 用的設定

環境的定義請見 /bootstrap/start.php 中

/*
|--------------------------------------------------------------------------
| Detect The Application Environment
|--------------------------------------------------------------------------
|
| Laravel takes a dead simple approach to your application environments
| so you can just specify a machine name or HTTP host that matches a
| given environment, then we will automatically detect it for you.
|
*/

$env = $app->detectEnvironment(array(

    'local' => array('your-machine-name'),

));

|--------------------------------------------------------------------------

| Detect The Application Environment

|--------------------------------------------------------------------------

| Laravel takes a dead simple approach to your application environments

| so you can just specify a machine name or HTTP host that matches a

| given environment, then we will automatically detect it for you.

$env = $app->detectEnvironment(array(

'local' => array('your-machine-name'),

));

Laravel 已經事先幫你定義好 local 的環境定義, 所以你只需把 your-machine-name 置換成你的電腦名稱或是 localhost.

Encryption Key

在編寫任何程式之前, 請先修改 app/config/app.php 的 key (Encryption Key).

你也可以用 artisan 自動產生一組隨機文字的 key, 在這之前需要先將原本的 key 刪除:

/*
|--------------------------------------------------------------------------
| Encryption Key
|--------------------------------------------------------------------------
|
| This key is used by the Illuminate encrypter service and should be set
| to a random, long string, otherwise these encrypted values will not
| be safe. Make sure to change it before deploying any application!
|
*/

    'key' => '',

|--------------------------------------------------------------------------

| Encryption Key

|--------------------------------------------------------------------------

| This key is used by the Illuminate encrypter service and should be set

| to a random, long string, otherwise these encrypted values will not

| be safe. Make sure to change it before deploying any application!

'key' => '',

接著在 Terminal 下達:

$ php artisan key:generate

–

Comments (0)

« Previous Page — Next Page »