一步一步教你用PHP+MySql搭建網站 No.4 文章編輯、圖片上傳，

一步一步教你用PHP+MySql搭建網站 No.4 文章編輯、圖片上傳，

本篇blog我們將來重點看文章編輯頁面story.php，因為這個頁面說實話代碼量是挺多的，還涉及到了圖片的上傳。

從頁面上來直觀的體驗：

add new  和 edit都是開啟的story.php頁面，所以我們應該能提前想到，這個頁面會先檢測下是哪種請求。

首先我們來搞定比較簡單的 logout.php頁面

這個頁面其實很簡單了，主要是幾個函數

unset函數其實就是將一些特定的變數置為空白；

session_destroy函數是銷毀當前的session，當然，當前session中的資料也隨著一併銷毀了；

接下來再執行header函數，也就是writer.php,當然就會執行到這個代碼塊中去了：

Menu和Public Site都很簡單，一個是返回到admin檔案夾下的index頁面，另一個是返回當上級目錄，預設是index.php，就是我們整個網站的首頁面。

接下來看重頭戲，

story.php

因為這部分的代碼算是比較長的，我們還是先把代碼貼出來，先整體講解下，然後再就個別細節進行深入講解。

<?php# Script User to Create or Edit a Storyinclude_once('include_fns.php');if (isset($_REQUEST['story'])) {$story = get_story_record($_REQUEST['story']);}?><form action = "story_submit.php" method = "POST" enctype="multipart/form-data"><input type = "hidden" name="story" value = "<?php echo $_REQUEST['story'];?>"><input type = "hidden" name = "destination"value = "<?php echo $_SERVER['HTTP_REFERER']; ?>"><table><tr><td>Headline</td></tr><tr><td><input size="80" name="headline"value ="<?php echo $story['headline'];?>" ></td></tr><tr><td>Page</td></tr><tr><td><?phpif (isset($_REQUEST['story'])) {# code...$query = "select p.code, p.description from pages p, writer_permissions wp, stories s where p.code = wp.page  and wp.writer = s.writer  and s.id = ".$_REQUEST['story']; }else{$query = "select p.code, p.description   from pages p, writer_permissions wp   where p.code = wp.page   and wp.writer = '{$_SESSION['auth_user']}'";}echo query_select('page', $query , $story['page']);?></td></tr><tr><td>Story text (can contain HTML tags)</td></tr><tr><td><textarea cols = "80" rows="7" name="story_text" wrap="virtual"><?php echo $story['story_text'];?></textarea></td></tr><tr><td>Or upload HTML file</td></tr><tr><td><input type = "file" name = "html" size="40"></td></tr><tr><td>Picture</td></tr><tr><td><input type="file" name= "picture" size="40"></td></tr><?phpif ($story[picture]) {$size = getimagesize('../'.$story['picture']);$width = $size[0];$height = $size[1];?><tr><td><img src="<?php echo '../'.$story['picture'];?>" width="<?php echo $width;?>" height="<?php echo $height;?>"></td></tr><?php}?><tr><td algin="center"><input type="submit" value="Submit"></td></tr></table> </form>

因為代碼比較長，所以就不整個了，然後我們來走一遍代碼：

第5行

我們之前有提到過，無論點擊add new 還是edit，顯示的都是story.php頁面，所以，這裡就是根據request中有沒有story這個變數來決定到底是add new還是edit了。當然，我們很容易能夠想到，如果沒有參數story，那就是add new，如果有story參數，那一定是edit了。

這也可以從writer.php的代碼中看出來。

第6行

我們用get_story_record函數來擷取當前story的各個詳細資料，包括id，作者，主體內容，建立時間，修改時間，發布時間，圖片內容等等。。。

接下去的整個代碼構造出來的是一個表單內容 form

看到表單submit的請求頁面是story_submit.php，請求方式是POST，關於enctype，我們來看一下stackoverflow上面大神的解答吧：

因為我們這個頁面可能會傳檔案上去，所以enctype要是  multipart/form-data。

接下來，頁面輸入了兩個屬性為hidden的參數，一個是story，一個是destination。story不用多解釋，如果是建立的話，那story是空的；而destination是為了在story_submit.php頁面可以直接返回到當前頁面的前一個頁面(其實準確的說法，這裡並不是前一個頁面，而是The address of the page (if any) which referred the user agent to the current page. This is set by the user agent.)，也就是writer.php頁面，其實這裡 _SERVER['HTTP_REFERER']裡面其實就是writer.php頁面。

關於更多_SERVER的內容，參見：

http://php.net/manual/en/reserved.variables.server.php

16-23行

是headline的表單行，這部分比較簡單

25-48行

是page類別的下拉選擇項

這裡依舊是根據參數中有無story來判斷，如果有，則根據當前story的id號來找到屬於哪一類別的，並且顯示出來；如果沒有，則查看目前使用者有發表那幾種文章的許可權，例如當前我登陸的使用者，只有兩個許可權：

當然，這個許可權是儲存在writer_permissions 表中的，

然後select語句寫好了之後，我們就通過query_select函數來顯示下拉框

50-60行

這部分用來顯示story的主體部分，和headline類似。

62-80行

是用來上傳檔案的部分，第一部分是上傳html格式的檔案，第2部分是上傳圖片

81-96行

這部分php代碼用來顯示已經儲存於伺服器上的圖片，當然前提是要能從story表中擷取到picture欄位的內容

好了，整個代碼走完了一遍，我們來看具體用到的幾個函數吧：

get_story_record函數

這個函數存在於db_fns.php，你知道它是存放在根目錄的對吧？

query_select 函數

依舊是在db_fns.php中

這部分組合成了最終要顯示的HTML格式的內容，我們可以查看下原始碼：

<select name = 'page'><option value="" selected>-- Choose --</option><option value='news'>[news] The Top News Stories From Around the World</option><option value='sport'>[sport] Sports Latest - All The Winners and Losers</option></select>

好了，這部分的內容就到此為止，我們下一章章節來看我們新輸入的內容是如何上傳到伺服器上的。