一個入門者學習用的小小小小網站範例(4)- 功能導覽:會員登入與資料編輯



網站另外提供了兩組資料編輯的相關的功能,讓網站管理人員可以進行書籍資料以及網站相關訊息資料的編輯作業,這些功能必須完成登入程序才能操作,這一篇從登入功能開始做說明。

預告楔子

站另外提供了兩組資料編輯的相關的功能,讓網站管理人員可以進行書籍資料以及網站相關訊息資料的編輯作業,這些功能必須完成登入程序才能操作,這一篇從登入功能開始做說明。

  • 使用者登入

網站的左上角有一個利用登入控制項實作的登入功能,使用者可以透過這個登入介面,完成登入的程序,如下圖示:

 
當使用者按下「登入」按鈕通過權限的驗證步驟,表示這個使用者具有管理員的身份,此時網頁會有兩個地方發生改變,原來的登入區域被隱藏起來,取而代之的是顯示使用者的歡迎訊息,與一個「登出」的連結。畫面的右邊出現一個選單,包含「書籍」以及「新聞」等兩個項目,將其展開,可以看到編輯功能的連結,底下左邊的畫面是展開「書籍」項目的子功能表,右邊則是展開「新聞」項目的子功能表,使用者可以選取任何一個項目,進行相關資料的編輯作業。
  • 書籍資料的新增與編輯

網站管理員必須在每一本新書出版的時候,將其新增至網站的書籍資料庫,或是針對某筆特定的書籍資料進行編輯。將「書籍」功能選項展開,按一下「新增書籍資料」,會出現以下的畫面:

 
於其中輸入各種書籍資料,按一下畫面下方的「新增」連結,即可將一筆新的書籍資料新增至資料庫中。畫面上一開始的三個欄位,「書籍編號」、「書籍名稱」與「作者」三個欄位是必要欄位,如果沒有完成輸入,則會在按下「新增」時,顯示相關的提示,新增作業將無法完成。
 
畫面最下方有一個資料欄位,讓使用者上傳書籍封面圖檔,按一下「瀏覽...」按鈕,選取所要上傳的封面圖檔,按一下「上傳」按鈕,就可以完成上傳的動作,過程如下圖所示:
 
 
當圖檔上傳完畢之後,會顯示圖檔於伺服器儲存位置的相對路徑,這個路徑檔案字串最後被儲存至書籍資料庫中。另外,請特別注意其中的「出版日期」欄位,當使用者沒有輸入這個值的時候,表示此書還未準備出版,因此,這一筆新增資料,只會出現在「出版預告」的頁面中。
 
針對現存書籍資料的編輯功能,包含了書籍資料的「刪除」與「修改」,按一下「書籍」功能項目底下的「修改書籍資料」項目,出現以下的畫面:
 
 
其中顯示一個搜尋文字欄位,這個搜尋功能與畫面上方頁首的搜尋功能相同,只是它會列舉所找到的書籍資料清單,如下圖,輸入「經濟」關鍵字,得到結果如下頁圖示:
 
 
畫面中出現了書名符合搜尋條件的書籍資料清單,每一筆資料的左邊,均包含了一個「選取」連結,按一下這個連結,會看到此筆書籍資料的詳細內容,如下圖:
 
 
被選取的書籍資料以深色背景的替代樣式顯示,並且於畫面的下方顯示其詳細內容,這個畫面只是單純的顯示資料內容,使用者並不能修改其中的資料。編輯功能在畫面的下方,如果想要將這筆資料刪除,則按一下「刪除」連結即可。按一下「編輯」功能,可以切換至編輯模式,此時的畫面如下,如你所見,每一個欄位的內容,均已經開放編輯:
 
 
當然,其中的「編號」欄位並不能修改,它被用作為識別用途,其它欄位所要調整的內容,均會根據這個編號,於資料庫中找到對應的書籍資料進行使用者所指定的更新,確認所要修改的內容之後,於畫面下方的「更新」連結按一下,即可將資料更新至資料庫,如果不想進行資料的更新作業,則直接按下「取消」,回到原來的畫面。
  • 新聞資料的新增與編輯

點選「新聞」功能項目,於展開的子選單中,按一下「新增新聞項目」,即可開啟新聞資料的編輯作業網頁,如下頁圖示:

在這個畫面中,第一個文字方塊欄位為新聞的日期,預設為今日,第二個文字方塊欄位則是新聞的主旨,下方的文字方塊則是新聞資訊的詳細內容,輸入相關的資料,按一下「新增」連結資料會被新增至資料庫中。現在切換至首頁,讀者會看到其中「最新消息」區塊的第一筆資料,為剛剛新增的新聞資料:

如果切換至其它的網頁,會發現這則新聞亦會即時的出現在左邊功能選單的下方,如下圖:

如果要編輯新聞資料,則按下另外一個「修改新聞資料」功能即可,出現的網頁畫面如下,畫面的上方出現的是最新的六則新聞消息,按一下「選取」連結,可以出現特定新聞的詳細內容。

 
每一個詳細的新聞細節,同樣的有「編輯」以及「刪除」連結,如果要將此則新聞刪除,只要按一下「刪除」連結即可,如果按一下「編輯」連結,切換至編輯畫面如下頁圖示:
 
 
於其中的欄位輸入所要修改的內容,按一下畫面最下方的「更新」連結,即可完成新聞資料的更新作業。到目前為止,本篇完成了範例網站的功能說明,下一篇開始繼續討論相關內容的實作。

預告楔子