PHP + MySQL 搭建網(wǎng)站－文章編輯、圖片上傳

文章編輯、圖片上傳

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

從頁面上來直觀的體驗：

add new 和 edit 都是打開的 story.php 頁面，所以我們應該能提前想到，這個頁面會先檢測下是哪種請求。首先我們來搞定比較簡單的 logout.php 頁面

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

unset 函數(shù)其實就是將一些特定的變量置為空；

session_destroy 函數(shù)是銷毀當前的 session，當然，當前 session 中的數(shù)據(jù)也隨著一并銷毀了；

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

Menu 和 Public Site 都很簡單，一個是返回到 admin 文件夾下的 index 頁面，另一個是返回當上級目錄，默認是 index.php，就是我們整個網(wǎng)站的主頁面。

接下來看重頭戲，

story.php

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

<?php  
    # Script User to Create or Edit a Story  
    include_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>  
                <?php  
                    if (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>  

        <?php  
            if ($story[picture]) {  
                $size = getimagesize('../'.$story['picture']);  
                $width = $size[0];  
                $height = $size[1];  
        ?>  

            <tr>  
                <td>  
                    <img src="/attachments/image/wk/phpandmysqlweb/'.$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 頁面，所以，這里就是根據(jù) request 中有沒有 story 這個變量來決定到底是 add new 還是 edit 了。當然，我們很容易能夠想到，如果沒有參數(shù) story，那就是 add new，如果有 story 參數(shù)，那一定是 edit 了。

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

第 6 行

我們用 get_story_record 函數(shù)來獲取當前 story 的各個詳細信息，包括 id，作者，主體內容，創(chuàng)建時間，修改時間，發(fā)布時間，圖片內容等等。

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

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

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

接下來，頁面輸入了兩個屬性為 hidden 的參數(shù)，一個是 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 類別的下拉選擇項

這里依舊是根據(jù)參數(shù)中有無 story 來判斷，如果有，則根據(jù)當前 story 的 id 號來找到屬于哪一類別的，并且顯示出來；如果沒有，則查看當前用戶有發(fā)表那幾種文章的權限，例如當前我登陸的用戶，只有兩個權限：

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

然后 select 語句寫好了之后，我們就通過 query_select 函數(shù)來顯示下拉框

50-60 行

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

62-80 行

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

81-96 行

這部分 php 代碼用來顯示已經(jīng)存儲于服務器上的圖片，當然前提是要能從 story 表中獲取到 picture 字段的內容

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

get_story_record 函數(shù)

這個函數(shù)存在于 db_fns.php，你知道它是存放在根目錄的對吧？

query_select 函數(shù)

依舊是在 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>  

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

本文由 kaka 創(chuàng)作，采用 知識共享署名-相同方式 3.0 (CC協(xié)議) 中國大陸許可協(xié)議 進行許可。轉載、引用前需聯(lián)系作者，并署名作者且注明文章出處。