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

文章編輯、圖片上傳

本篇我們將來重點(diǎn)看文章編輯頁面 story.php，因?yàn)檫@個(gè)頁面說實(shí)話代碼量是挺多的，還涉及到了圖片的上傳。

從頁面上來直觀的體驗(yàn)：

add new 和 edit 都是打開的 story.php 頁面，所以我們應(yīng)該能提前想到，這個(gè)頁面會(huì)先檢測(cè)下是哪種請(qǐng)求。首先我們來搞定比較簡(jiǎn)單的 logout.php 頁面

這個(gè)頁面其實(shí)很簡(jiǎn)單了，主要是幾個(gè)函數(shù)

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

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

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

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

接下來看重頭戲，

story.php

因?yàn)檫@部分的代碼算是比較長的，我們還是先把代碼貼出來，先整體講解下，然后再就個(gè)別細(xì)節(jié)進(jìn)行深入講解。

<?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>  

因?yàn)榇a比較長，所以就不整個(gè)截圖了，然后我們來走一遍代碼：

第 5 行

我們之前有提到過，無論點(diǎn)擊 add new 還是 edit，顯示的都是 story.php 頁面，所以，這里就是根據(jù) request 中有沒有 story 這個(gè)變量來決定到底是 add new 還是 edit 了。當(dāng)然，我們很容易能夠想到，如果沒有參數(shù) story，那就是 add new，如果有 story 參數(shù)，那一定是 edit 了。

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

第 6 行

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

接下去的整個(gè)代碼構(gòu)造出來的是一個(gè)表單內(nèi)容 form

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

因?yàn)槲覀冞@個(gè)頁面可能會(huì)傳文件上去，所以enctype要是 multipart/form-data。

接下來，頁面輸入了兩個(gè)屬性為 hidden 的參數(shù)，一個(gè)是 story，一個(gè)是 destination。story 不用多解釋，如果是新建的話，那 story 是空的；而 destination 是為了在 story_submit.php 頁面可以直接返回到當(dāng)前頁面的前一個(gè)頁面(其實(shí)準(zhǔn)確的說法，這里并不是前一個(gè)頁面，而是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 頁面，其實(shí)這里 _SERVER['HTTP_REFERER']里面其實(shí)就是 writer.php 頁面。

關(guān)于更多 _SERVER 的內(nèi)容，參見：http://php.net/manual/en/reserved.variables.server.php

16-23 行

是 headline 的表單行，這部分比較簡(jiǎn)單

25-48 行

是 page 類別的下拉選擇項(xiàng)

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

當(dāng)然，這個(gè)權(quán)限是存儲(chǔ)在 writer_permissions 表中的，

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

50-60 行

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

62-80 行

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

81-96 行

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

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

get_story_record 函數(shù)

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

query_select 函數(shù)

依舊是在 db_fns.php 中

這部分組合成了最終要顯示的HTML格式的內(nèi)容，我們可以查看下源代碼：

<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>  

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

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