以下代碼可以去https://github.com/x-hansong/bidoubbs下載
由於這個是針對手機開發的論壇,首先,我使用的是jquery mobile框架,也就是前端的元素,不瞭解的可以去jQuery Mobile 教程入門一下.此外,針對手機頁面的特點,我們不能像電腦頁面一樣用富文本編輯器,只能用普通的輸入框.所以我們的前端只需要有一個標題輸入框,一個文本輸入框,一個單選按鈕,一個圖片上傳控件,一個提交按鈕就夠了.
注意:雖然我用的是jquery mobile,但是這個框架有點不成熟,它默認用ajax加載所有頁面,每次切換頁面並沒有加載其他頁面的全部內容,只加載page內的內容,也就是說如果你的js寫在head標籤內,就不能使用,因爲並沒有被加載,這個問題也是困擾我很久.後來解決辦法是將js寫在首頁,因爲首頁(第一個打開的網頁)的內容是全部加載的.然後我用的是最新的1.4.3,把js寫在page內就會導致頁面無法打開.反正就是各種麻煩.還有就是表單提交要注意把ajax關掉,不然無法實現跳轉.
爲什麼jquery mobile這麼麻煩我還要用呢,因爲一開始用的時候只發現它的優點--簡單,界面設計好看.後來發現這些問題已經是開發了一大半了,就繼續用下去了.當然了,這個框架用熟悉了還是比較好用的,只是對於初學者來說要學的東西就更多了.現在我也明白了爲什麼有人說初學者不要用框架,用原始的東西最好.因爲框架濃縮了別人的思想精華,但是裏面涉及到很多的基礎知識,作爲初學者去用難免有些地方不理解.本來用框架是爲了提高開發效率,最後因爲框架的使用反而降低了效率.說了這麼多,用不用框架也是見仁見智.下面的前端代碼我是使用了jquery mobile來寫的,可以用普通的html代碼替代.
我的代碼結構是這樣的,用一個templates文件夾存放前端的代碼,根目錄存放後臺代碼.然後用include語句把前端和後臺的代碼連接到一起.其實寫在一個文件裏面也是一樣的效果,只是分開寫比較直觀,容易管理.
首先貼出前端代碼:
templates/create.php
<!DOCTYPE html>
<html>
<head>
<?php header("Content-type: text/html; charset=utf-8"); ?>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.css">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.js"></script>
<script type="text/javascript">
</script>
</head>
<body>
<div data-role="page" id="create">
<div data-role="header">
<a href="index.php" class="ui-btn-left ui-icon-back ui-btn ui-btn-inline ui-mini ui-corner-all ui-btn-icon-left " data-rel="back" >返回</a>
<h1>發佈逗貼</h1>
</div>
<form action="<?php echo htmlspecialchars($_SERVER["REQUEST_URI"]);?>" method="post"
data-ajax="false" >
<ul data-role="listview" data-inset="true">
<li class="ui-field-contain">
<label for="fullname">標題</label>
<input type="text" name="title" id="title">
</li>
<li class="ui-field-contain">
<label for="bday">內容</label>
<textarea placeholder="請輸入帖子內容..." name="content" id="editor" ></textarea>
</li>
<li class="ui-field-contain">
<fieldset data-role="controlgroup">
<legend>請選擇分類：</legend>
<?php
foreach ($category as $id => $name) {
echo '<label for="',$id,'">',$name,'</label>
<input type="radio" name="classic" id="',$id,'" value="',$name,'">';
}
?>
</fieldset>
</li>
<li class="ui-field-contain">
<input type="submit" value="提交">
</li>
</ul>
</form>
<p><?php echo $error ?></p>
</div>
</body>上面代碼是典型的html+php混編.這一節內容有點多,分爲兩節來講.下一篇將介紹後臺的數據操作及調試工具.