版面設計#終版

其實版面有修改過幾次，主要是 Logo 上的背景圖。
（最後決定採取去除的方式，這點看起來較佳。）

之後應該會抽空製成 WordPress 的版面。
結構上採取參考 WSQ 大大的方式，即是網站混合WordPress的作法。
（簡單說，網誌只是其中一個頁面。）

最後，就是要期待最後的暑假摟！
（我的編曲軟體老是裝不成功，這樣我要怎麼弄社團光碟呢？有些音效自己做還是比較好呢～～）

Enter-Page.png

因為是走「極簡風」所以我盡可能讓畫面變得乾淨。

而較大的圓，則是我在想如何產生律動感。
（之前書上看到是利用翻轉和大小變化，因為我沒辦法翻轉，所以只採用放大。）

說真的，有時候這類東西其實很需要思考。
就像我現在，還在思考如何設計內頁，才能配上這樣的入口畫面呢！
設計，真的沒有我想像的單純。

也許我該多研究些，畢竟我的路還很長！
這個網站是關於什麼的呢？
這邊小小透露，是關於「音樂」的網站喔！

裡面有四個虛擬角色，並由四個人提供聲音。
我想，大家應該清楚網站大概試作什麼的吧！
（而網站其實也很快就會登場，大概是最近就會有東西可以「聽」到喔！）

那麼，請期待！
（網站可是會變化的，別忘記時常上去晃晃！）

1. 撰寫公會日誌功能
2. 撰寫訪客留言功能

其實就這樣，整個很「普通」

系統是採用之前參考 Goolog 的製作方式，也就是單檔案儲存。
雖然挺想學「晉級留言板」製作升級功能，不過總覺得麻煩（汗

公會日誌製作完畢後，是否加入 RSS 功能還要等我考慮（掩面
為什麼要考慮呢？
（因為……如果沒設定好是會被打的！！）

據說今天是Mabinogi的「王城宴會日」
因為有抽獎，而我想拿抽獎券看看（限量100名）
所以我只好草草結束這篇文章拉！

不過下次寫公會網站製作時，會分享「一些技巧」給大家，別忘記再次拜訪喔！

不過這次可以說是「下定決心」要長期待在 Mabinogi 的世界，所以就比過去更專注。
不過，也是因為我的技術提昇很多，才可以這樣搞。

以前做過挺多次遊戲網站，不過最後都化為灰燼。
其實挺慘的，不過這也算是「事實」吧！

—

目前首頁做好之後，還有許多部份需要開發。
Ex. 公會日誌、訪客留言等……

今天除了很高興的 ACG 一下之外，就是把內頁成型。
並且製作公會日誌的部份（不然感覺我好像很久沒動工了！？）

不過這次還是有「新挑戰」
因為，公會日誌為了要能在奇幻世界（瑪奇資訊站）上顯示聯播，所以需要 RSS 功能。
不過我對 XML 不熟，也沒做過 RSS 所以其實挺具有挑戰性的！？

這次的網站圖示，其實挺精美的！？
（大概是我有進步吧～～）

技能，如果在現實世界中，可以說是「會使用的技巧與擁有的能力」
那麼，我的技能系統就是用來「紀錄」的系統。

不過，仰賴 7.2 的強大插件擴充，讓我開發上非常順手。

目前系統共兩個資料檔案：「技能資訊」與「修煉資訊」
會這樣做其實很簡單，因為要避免「隨意的升級」

每項技能想要升級，就得通過「修煉選項」的達成，才可以進行升級。
整體來看，可以說是不錯的系統了！

下面就簡單分享使用到的「技巧」
不過說真的，有使用到的就只有 Discuz 上的 Ajax 控制屬於高難度。

我使用的是 Ajax 視窗，因此用 showWindow() 的 JavaScript函式呼叫。

<a href="plugin.php?id=dofskill:upskill&skillid=$key" onclick="javascript:showWindow('upskill', this.href);return false;" title="升級技能">升級技能！</a>

整體上為模仿 Discuz 的作法，而 showWindow 的參數共四個：
1. id 名稱(方便控制)
2. 目標位子
3. 傳遞資料方式，預設get (post用法我其實不會)
4. 是否緩存預設似乎是開啟的

而目標位子的頁面，就很講究了！
Discuz 設計成「直接讀取正常版模」的設計。

所以設計版模時，要照常加入 {template header} 與 {template footer}
否則，就會看空白畫面！

其餘大多是使用 PHP 達成的控制，其實也沒有什麼特別。

說實在的，其實技能系統只是一個基礎系統，實際上沒有太大的意義。

$paths = glob("./data/*.txt"); //讀取留言路徑

glob是一個依照「路徑」讀取檔案的函式，這點大家一定都很清楚。
不過卻可以使用 * 字元，把所有路徑都讀取。
如 data 目錄下有 a.txt , b.txt, c.dat 3個檔案，在上述的情況下，會將 a.txt 與 b.txt 的路徑存入陣列。

而留言需要排序，因此使用 sort() 函式。

sort($paths, SORT_NUMERIC); //將路徑以數值排序

通過 sort 排序陣列，如果鎮列原本是混亂的，那麼會被排列整齊，並且依照規則。
如：依照字母、數字大小等等
SORT_NUMERIC 則是「將值以數字排序」
當然，也可以利用「自訂排列規則」的方式進行排列。

接著我們需要能夠讀取檔案。

$contents = file_get_contents('./data/comments.txt'); //讀取 ./data/comments.txt 的內容

file_get_contents() 是 PHP4 新增的函式，我想市面上應該沒有 PHP3 的主機。
如果不確定版本，可以使用 phpinfo() 來檢查。

這個函式原理很簡單，把路徑的檔案內容一次不漏的讀取，並且放進變數。

不過我們的留言是特殊的規則：

;subject
留言標題
;nickname
暱稱
;contents
留言
換行

因此需要使用迴圈搭配，來找出各數值的內容。
*其實也可以用preg_match之類的方式把數值抓出，使用迴圈慢慢讀取是為了「可擴充欄位」

$contents = file_get_contents('./data/comments.txt'); //讀取
$contents = explode(PHP_EOL, $contents); //用換行字元分割 *Linux以 \n 換行， Windows 以 \r\n 換行
foreach($contents as $line){ //foreach 是把陣列值一一讀取
  if(!$line) continue;
  if($line[0] == ';'){
    $dKey = substr(1, $line);
    continue;
  }
  if(!$dKey) continue;
  if($dkey == 'contents')
    $data[$dkey][] = $line;
  else
    $data[$dkey] .= $line;
}

exoplde() 函式會依照指定的字元、字串，將字串切割。
如：a|b|c 以 | 為切割字元，則傳回 Array( [0] => a [1] => b [2] => c )

接著在迴圈中，做非常多的判斷。
Ex. if(!$line) continue;
! 為相反字元，當變數有值時也相當於 boolen 的 true, 因此 false 反轉就是 true
而執行 continue; 結束本次迴圈。
這類用法也有 break; 結束迴圈，可以在某條件下停止。

substr() 則是擷取字串，如 abcdef 使用 substr(2, ‘abcdef’) 則傳回 cdef
這點原理何在呢？

程式中，字串其實是由 char[] 陣列組成，因此 $line[0] 即是 $line 字串的第一個字元。
而 substr 就是把字串從指定的陣列key開始讀取到最後一個。

經過這些步驟之後，終於完成了「讀取」的效果。
傳回的 $data 可以讀到檔案中各種資料。

不過仍有一個小 bug 會發生，在正式的實作時，這個會直接修正掉。
( 在這之前，檢查看看讀取的判斷式，哪裡出現矛盾，資料中含有什麼會發生問題。 )

但是現在反思，「這個留言板要給誰用？讓誰學會呢？」

一開始我的目標是針對「新手」
那麼這些功能是否太困難了？
「是的，真的太困難！」

那個改進方向呢？
「針對『製作留言板』來進行重點教學」

結論：
1. 留言、回覆留言
2. BBCode ( 基於安全性，這點要重點教學 )
3. 管理功能 ( 就算再討厭，還是得做 )

下次的教學會和大家分享留在「資料存取(一)提到的讀取技巧，並且加以改善」

<?php

function removeComment(array $paths){ //建立移除函式
	foreach($paths as $path){ //將路徑陣列一個一個讀取
		if(!is_file($path)) continue; //如果不是檔案則切到下一個繼續
		unlink($path); //刪除檔案
		++$i;
	}
	return $i;
}

function getSubject($file){ //建立 getSubject 函式
	$data = file_get_contents($file); //讀取檔案內容
	$data = explode(PHP_EOL, $data); //以斷行分割檔案內容( PHP_EOL 會依照作業系統切換 \n 或 \r\n )

	foreach($data as $key => $line){ //將內容陣列放入 foreach 運作
		if($line == ';subject'){ //檢查是否為註解
			$logSubject = (bool) true; //啟動紀錄主旨
			continue; //直接結束本次迴圈
		}

		if(!$logSubject) continue; //如果非主旨則跳過，並且繼續尋找

		$subject = $line; //紀錄主旨
		break; //離開迴圈

	}

	return $subject; //傳回取得之主旨
}

if($_POST['submit']){ //檢查是否有送出表單
	$dels = removeComment($_POST['del']); //傳入移除陣列
	echo "
成功移除{$dels}筆留言

";//產生表單(送出)
}

$glob = glob('./data/*.txt'); //搜尋資料檔案
sort($glob, SORT_NUMERIC); //排序檔案( 由大到小 )

$_GET['page'] = !$_GET['page'] ? 1 : $_GET['page'];  //檢查是否有指定頁碼
$start = ($_GET['page'] - 1) * 15; //設定迴圈開始編號
$end = $_GET['page'] * 15; //設定回圈結束編號

echo '
'; //產生表單
for($i = $start; $i < $end; ++$i){ //從開始編號運作到結束編號。
	if(empty($glob[$i])) break; //檢查是否有此筆資料，無則跳出
	$subject = getSubject($glob[$i]); //呼叫 getSubject 函式取得主旨
	/* 開始產生畫面 */
	echo "
主題: {$subject} -


";

}
echo '



';//產生表單(送出)
echo '

';//產生表單

?>

上方的 HTML 部份可能會有問題，請各位在使用時稍微注意。

原理大致解說：

顯示部份和 comment.php 無異，只是將讀取部份改為「只讀取標題」
並且為了防止意外，只在「確認為標題時」才會做儲存。

而另外就是加入了「刪除函式」
構造很簡單，將傳入的陣列依序使用 unlink 刪除檔案函式刪除。

而 name="del[]" 為表單的陣列用法，在 PHP 收到為 $_POST['del'] 的陣列(method="post" 狀況)
每個 checkbox 儲存的 value 都是該筆留言路徑，因此刪除時只需將取得的路徑陣列傳入。

—

到了這部份，其實已經準備好製作留言板的技術。
明天，即將開始的就是「正式製作」

不過到了這個部份，其實整個架構是很混亂的。
因此明天要先做「重新規劃、整理」的處理，以免成品過度混亂。

<form method="post" action="post.php">
主旨：<input type="text" size="20" name="subject" /><br />
暱稱：<input type="text" size="20" name="nickname" /><br />
留言：<textarea name="contents"></textarea>
<input type="submit" name="submit" value="送出" />
</form>

因為表單指向 post.php 因此，新增 post.php 接收留言資訊：

<?php

function createComment(array $data){ //建立產生檔案函式
	$eol = PHP_EOL; //指定換行字元 \n 或 \r\n
	foreach($data as $key => $value){ //讀取傳入的資料
		/*
			寫入格式：
			;(陣列鍵值) Ex. ;subject
			(資料)
		*/
		if($i > 0) //檢查是否為第1筆
			$contents .= "{$eol};{$key}{$eol}{$value}"; //如果為非，則在每筆資料前加入換行
		else
			$contents .= ";{$key}{$eol}{$value}"; //如果為真，則照一般方式儲存
		++$i; //增加1 做為判斷資料筆數
	}
	$dataPath = './data/'.time().'.txt'; //指定儲存路徑
	if(PHP_VERSION > 5){ //檢查 PHP 版本
		file_put_contents($dataPath, $contents); //使用PHP5新增函式
	}else{
		$fp = fopen($dataPath, 'w'); //開啟檔案
		fwrite($fp, $contents); //寫入資料
		fclose($fp); //關閉檔案
	}
}

$subject = $_POST['subject'] ? $_POST['subject'] : '無主題'; //檢查主題，無則自動設定
$nickname = $_POST['nickname'] ? $_POST['nickname'] : '匿名'; //檢查暱稱，無則自動設定
$contents = $_POST['contents'] ? $_POST['contents'] : false; //檢查內容，無則傳回假

if(!$contents){ //檢查是否有內容
	echo "填寫不完整";
	header("Location: post.htm"); //導回發表頁
}else{
	createComment(array('subject' => $subject, 'nickname' => $nickname, 'contents' => $contents)); //產生資料檔案( 目前需依照順序才能正常讀取資料 )
	header("Location: comments.php"); //引導至觀看留言頁
}

?>

到此，留言板的基本功能已經完成。
明天會加入簡易的刪除留言功能，希望到此各位都能理解。

;title
測試留言標題
;nickname
蒼時 弦
;contents
這是測試留言，
主要是對資料解析做測試
;responds
奏>>回復了留言！
影賜>>回復留言～

接著是新的讀取程式 data.php

<?php

function setdata($content, array $eArrs){
	$datas = explode(PHP_EOL, $content);
	foreach($datas as $key => $line){
		if($line[0] == ';'){
			++$dKey;
			if(in_array($line, $eArrs))
				$enableArr = (bool) true;
			else
				$enableArr = (bool) false;
			continue;
		}
		if($enableArr)
			$dataGroup[$dKey][] = $line;
		else
			$dataGroup[$dKey] .= $line;
	}

	return $dataGroup;
}

$eArrs = array(';contents', ';responds');
$content = file_get_contents('data.txt');

$data = setdata($content, $eArrs);

print_r($data);

?>

輸出結果是一組依照順序的陣列，如果是「同一組，則再建立新陣列儲存。」

以上就是初步完成資料讀取了！

接下來就是呈現留言以及排序的處理。

現在新增一個 comments.php 來製作模型。

<?php

function getComment($file, array $eArrs){ //建立 getComment 函式
	$data = file_get_contents($file); //讀取檔案內容
	$data = explode(PHP_EOL, $data); //以斷行分割檔案內容( PHP_EOL 會依照作業系統切換 \n 或 \r\n )

	foreach($data as $key => $line){ //將內容陣列放入 foreach 運作
		if($line[0] == ';'){ //檢查是否為註解
			++$dKey; //如果是則 +1
			if(in_array($line, $eArrs)) //檢查是否產生陣列(兩行以上資料需要)
				$enableArr = (bool) true; //傳回真
			else
				$enableArr = (bool) false; //傳回假
			continue; //直接結束本次迴圈
		}
		if($enableArr) //檢查是否開啟產生陣列
			$dataGroup[$dKey][] = $line; //如為真，則產生陣列儲存(二維)
		else
			$dataGroup[$dKey] .= $line; //如為假，則直接儲存資料(並且連接起來)
	}

	return $dataGroup; //傳回解析後陣列
}

$glob = glob('./data/*.txt'); //搜尋資料檔案
sort($glob, SORT_NUMERIC); //排序檔案( 由大到小 )

$eArr = array(';contents', ';responds'); //指定需要產生二維鎮列的註解

$_GET['page'] = !$_GET['page'] ? 1 : $_GET['page'];  //檢查是否有指定頁碼
$start = ($_GET['page'] - 1) * 2; //設定迴圈開始編號
$end = $_GET['page'] * 2; //設定回圈結束編號

for($i = $start; $i < $end; ++$i){ //從開始編號運作到結束編號。
	if(empty($glob[$i])) break; //檢查是否有此筆資料，無則跳出
	$comments = getComment($glob[$i], $eArr); //呼叫 getComment 函式分析檔案
	$contents = implode('', $comments[3]); //將內容部份特別分析，用結合
	/* 開始產生畫面 */
	echo "
主題:{$comments[1]}暱稱：{$comments[2]}內容：{$contents}

";

}

?>

之後請新增一個 /data 資料夾，並且新增大於二的「檔案」
檔名： 1.txt ~ ?.txt (一律數字)
檔案內容：

;title
留言標題
;nickname
留言者暱稱
;contents
留言內容，
可以換行輸入，並不會影響。

接著打開 comments.php 會發現檔名最大的兩篇被顯示，其餘的並沒有顯示。
原因在哪裡呢？

http://網址/?page=2

輸入之後，會發現 (檔名最大-2) 和 (檔名最大-3) 的檔案被顯示出來。
沒錯，這次讀取資料時，順便將分頁功能加入了系統。

明天將會繼續改善讀取功能，並且加入「發表留言」的模型。