起風前的相遇: 1月 2012

31 1月 2012

Git over Apache2 http server in Ubuntu 11.10

由於手邊的MBP年事已高（五歲多囉），而且RAM最大僅能加到3G，開了IDE與Browser後已經沒什麼多餘的能力來支撐一個VM了。所以把另一台NB裝上Ubuntu 11.10，並將常用的服務裝上去，順便做些更新的筆記。
先前也曾經有個安裝筆記GIT + Apache2 on Ubuntu 8.10 (1)，但現在的Ubuntu安裝又更簡單些；主要是因為現在提供了git-http-backend，設定上可以更簡化了。

安裝apache 與 git
```
sudo apt-get install apache2 git
```
後期的Ubuntu 已將git-core更名為git，但是用git-core也沒問題啦。
建立相關人員帳號密碼，-c代表要建新檔，-m代表密碼要加密
```
sudo htpasswd -cm /etc/apache2/passwd $username
```
第二位成員起就不需要加-c，只要用-m即可
```
sudo htpasswd -m /etc/apache2/passwd $username
```
建立git repositories目錄，依習慣，一定要先有repository root。
```
sudo mkdir /srv/git
```
再建要用的repository，並修改owner為www-data，$reponame代表repository的名稱，.git雖然可加可不加，但建議是要有，.git不會加到clone回來的目錄名稱上
```
sudo git --bare init /srv/git/$reponame.git
sudo chown -R www-data:www-data /srv/git/$reponame.git
```

建立dav_git.conf到/etc/apache2/mods-available，並link到/etc/apache2/mods-enabled，檔名可以隨意，但副檔名一定要是conf.

cd /etc/apache2/mods-available
sudo vim dav_git.conf

編輯內容如下

#若無設定GIT_HTTP_EXPORT_ALL，則在每個repository下必需有git-daemon-export-ok這個檔案才能被外部存取。
SetEnv GIT_PROJECT_ROOT /srv/git
SetEnv GIT_HTTP_EXPORT_ALL
ScriptAlias /git/ /usr/lib/git-core/git-http-backend/
#用Location的話代表讀寫都要認證，如果希望開放給anonymous讀取，請改用LocationMatch即可
<Location /git>
        AuthType Basic
        AuthName "Git"
        Require valid-user
        AuthUserFile /etc/apache2/passwd
</Location>

建立link到/etc/apache2/mods-enabled

cd /etc/apache2/mods-enabled
sudo ln -s ../mods-available/dav_git.conf dav_git.conf

重起apache2即可

02 1月 2012

jQuery Plugin : DataTables (6)

前接jQuery Plugin : DataTables (5)

再來就是DataTables比較費工的地方。
大部份遇到的案子，Table/Grid裡除了顯示，通常還要可以加上checkbox, radio, button, link等操作，以提供多個選取刪除，單選編輯等功能。
這也是我覺得使用了DataTables，程式碼實際不會少多少，開發效率提昇待議的部份，但也可能是我能力的問題，若有大德能指引明燈，小弟會非常感激。

以下以在table裡加上checkbok與button的操作為例，
DataTables裡要多加Column就必需在aoColumns裡以mDataProp標示，由於資料並非自JSON Object裡取得，所以就必需設定為null.
而要顯示自訂的資料，就必需提供"fnRender"這個callback method，其中僅有一個參數oObj，oObj其中的aData就是目前這個Row的JSON Object，所以就可取得你要想的資料。

所以修改一下javascript的aoColumns:

"aoColumns": [
				{ "mDataProp": null, "fnRender": function(oObj){ return "<input type='checkbox' name='id' value='"+oObj.aData.id+"'>"}, "sWidth":"5%", "bSortable":false },
				{ "mDataProp": "id" },
				{ "mDataProp": "name" },
				{ "mDataProp": "phone" },
				{ "mDataProp": null, "fnRender": function(oObj){ return "<input type='button' value='Edit'>"}, "sWidth":"5%", "bSortable":false }
			]

當然對應的Table也要改一下Column的設定

完整的程式碼如下：

	<script type="text/javascript">
		var disTable;
		var gaiSelected = [];
		$().ready(function() {
			disTable = $("#sample").dataTable({
				"sPaginationType":"full_numbers",
				"bProcessing": true,
				"bServerSide":true,
				"sAjaxSource": '/jquery/DataTableServlet02',
				"fnServerParams": function ( aoData ) {
					$.merge(aoData, $("#myform").serializeArray());},
				"aoColumns": [
							  { "mDataProp": null, 
							  	"fnRender": function(oObj){ 
							  		return "<input type='checkbox' name='id' value='"+oObj.aData.id+"'>"}, 
							  	"sWidth":"5%", 
							  	"bSortable":false },
							  { "mDataProp": "id" },
				              { "mDataProp": "name" },
				              { "mDataProp": "phone" },
				              { "mDataProp": null, 
				              	"fnRender": function(oObj){ 
				              		return "<input type='button' value='Edit'>"}, 
				              	"sWidth":"5%", 
				              	"bSortable":false }
				          ]
			});
		});
	</script>
	<form id="myform">
	<table>
		<tr><td>NAME:</td><td><input type="text" name="name" /></td></tr>
		<tr><td>ID:</td><td><input type="text" name="id" /></td></tr>
		<tr><td>PHONE:</td><td><input type="text" name="phone" /></td></tr>
		<tr><td colspan="2"><input id="btnSearch" type="button" value="Search" onclick="disTable.fnDraw();"/></td></tr>
	</table>
	</form>
	<table id="sample" class="display">
		<thead>
			<tr>
				<th>Select</th>
				<th>ID</th>
				<th>Name</th>
				<th>Phone</th>
				<th>Function</th>
			</tr>
		</thead>
		<tbody>
		</tbody>
	</table>

產生的畫面就像下列這樣：

add checkbox and button

看起來似乎還不錯？不過大家實際遇到的例子應會比這更複雜吧，例如依不同的tag顯示不同的圖片，不同的狀態顯示不同的Button，這些全要寫在script中耶....