Board logo

標題: [教學] (實戰專題) 資料庫聯絡簿 中篇 [打印本頁]
作者: 小誌    時間: 2010-5-26 00:43     標題: (實戰專題) 資料庫聯絡簿 中篇

留言顯示網頁的管理模式
我們的『家庭聯絡簿』因為必須具備發言內容涉及敏感話題或是涉及私人隱私的家長發言可用『悄悄話』的方式發言與顯示，同時也希望老師能針對某位特定學生家長所發表的意見作出獨立的回應，因此，我們『顯示留言意見』的網頁就必須具備顯示模式選擇的功能，當顯示模式在一般情況時要能顯示家長們的一般性發言，同時還得將『悄悄話』的發言隱藏起來：

[attach]929[/attach]

    當老師以密碼登入成為管理模式時，則必須將一般性發言與悄悄話發言的資料全部顯示出來，同時還得讓老師們可以針對某位特定學生家長所發表的意見作出獨立的回應：

[attach]930[/attach]

密碼登入管理模式的ASP程式

您應該發現到：當我們在一般顯示模式時(不會顯示悄悄話的發言)，在網頁最下方將會有一個輸入密碼進入『教師管理』模式的欄位，而當我們以密碼登入管理模式時，則在網頁最下方會有一個『離開管理模式』的按鈕！

我們先來看看這兩個情況是如何產生的，請先檢視下列這段網頁敘述：
  1. <!--------管理模式選擇----------->
  2. <form method="post">
  3. <%IF session("checkedit")="yes" then%>
  4. <input type="hidden" value="yes" name="goexit">
  5. <input type="submit" value="離開管理模式">
  6. <%else%>
  7. 密碼：
  8. <input type="text" name="password"
  9. size="4"maxlength="4">
  10. &nbsp&nbsp<input type="submit" value="教師管理">
  11. <%End IF%>
  12. </form>
複製代碼
在上面這段網頁敘述中，我們可以清楚的知道要顯示一般模式或管理模式，完全得靠一個Session物件來決定！Session 物件為紀錄使用者的相關資訊，提供使用者再次對此網頁伺服器要求時作確認，例如使用者帳號與密碼的確認，有 Session 物件的建立，來保留身分認證的結果，則使用者不用於每一頁網頁 登錄時都需輸入密碼作確認。在本範例中，我們則利用Session物件來記錄目前的工作模式。


　既然我們是利用Session物件來記錄目前的工作模式，那我們該如何變更Session物件記錄的『變數』值呢？很容易！請接著來看看我們管理模式的ASP程式：
  1. '以下為進入管理模式的敘述
  2. password=Request.Form("password")
  3. IF password="test" then '<-----管理密碼
  4. session("checkedit")="yes"
  5. End IF
  6. '以下為脫離管理模式的程式敘述
  7. goexit=Request.Form("goexit")
  8. IF goexit="yes" then
  9. session("checkedit")="no"
  10. End IF
複製代碼
當我們第一次進入『顯示留言意見』網頁的時候，我們所見的網頁畫面一定是一般模式！為什麼？因為Session尚未被建立，因此它的『變數』值一定不會是"yes"，所以網頁中會出現一個輸入密碼進入『教師管理』模式的欄位，只有當我們輸入密碼按下『教師管理』的按鈕引發ASP程式中的進入管理模式敘述後，Session物件才會被建立，同時，『checkedit』Session物件變數值被設定為"yes"，所以我們就進入了能將一般性發言與悄悄話發言的資料全部顯示出來，同時還讓老師們可以針對某位特定學生家長所發表的意見作出獨立回應的管理模式頁面。

[attach]931[/attach]

當我們進入管理模式頁面後，你將發現網頁最下方，原本的密碼登入欄位不見了，而以『離開管理模式』的按鈕取代，這是因為Session物件被建立了，而且變數值被設定為"yes"，網頁中的敘述就變為：
  1. <input type="hidden" value="yes" name="goexit">
  2. <input type="submit" value="離開管理模式">
複製代碼
[attach]932[/attach]

    在我們要脫離管理模式而按下『離開管理模式』的按鈕後，則會引發脫離管理模式的ASP程式敘述：
  1. '以下為脫離管理模式的程式敘述
  2. goexit=Request.Form("goexit")
  3. IF goexit="yes" then
  4. session("checkedit")="no"
  5. End IF
複製代碼
此時我們將回到一般模式的頁面，而且Session物件變數值被設定為"no"，網頁中的敘述就變為：
  1. <input type="text" name="password" size="4"
  2. maxlength="4">
  3. &nbsp&nbsp<input type="submit" value="教師管理">
複製代碼
而網頁中的『離開管理模式』按鈕，也就變回輸入密碼進入『教師管理』模式的欄位。


提示
這個控制顯示模式的Session物件非常重要，它不僅是控制我們的顯示模式，同時我們還將利用它的變數值來決定是否顯示學生家長的悄悄話發言內容！
作者: 小誌    時間: 2010-5-26 00:53

留言顯示網頁的分頁

到現階段，我們已經完成『顯示留言意見』網頁的『管理模式』處理與『資料庫資料讀取』的ASP程式撰寫。現在我們接著進行『顯示留言意見』網頁的分頁瀏覽程式撰寫。

還為何需要進行分頁瀏覽？因為當家長的發言與老師回覆的資料筆數太多時，一次要將全部的資料內容顯示在網頁中，光是等待網頁下載的時間就嚇死人了，因此我們最好是採用固定筆數分頁瀏覽的方式來顯示網頁。

要進行分頁顯示，首先我們得先知道目前有多少筆的留言資料，而這些留言資料筆數可分解成幾個頁次來瀏覽，要想資料資料檔案中目前有幾筆資料錄，我們可以透過Recordset物件的『RecordCount』屬性得知，例如：本例中我們將每１０筆資料為一單位分頁顯示：
  1. '資料總數Count,總頁數TotalPage
  2. Count=RS.RecordCount
  3. If Count/10 > (Count10) then
  4. TotalPage=(Count10)+1
  5. else TotalPage=(Count10)
  6. End If
複製代碼
我們先利用變數『Count』來記錄資料庫檔案中共有多少筆資料這個總筆數我們將顯示在網頁中，要知道總共有多少頁(TotalPage)我們只要以簡單的數學算式即可得之，請參考上列表格中的敘述。

跳頁選擇的ASP程式敘述

    當我們將所有的發言資料採用固定筆數分頁瀏覽的方式來顯示後，最好提供一個跳頁連結顯示的功能，讓瀏覽者可以選擇希望瀏覽的頁次進行瀏覽，因此，我們必須再撰寫一段可以指定瀏覽頁次的ASP程式敘述：
  1. PageCount= 0
  2. RS.MoveFirst
  3. If Request.QueryString("ToPage")<>"" then
  4. PageCount = cint(Request.QueryString("ToPage"))
  5. End If

  7. If PageCount <=0 then PageCount = 1
  8. If PageCount > TotalPage then PageCount = TotalPage
  9. RS.Move (PageCount-1) * 10
複製代碼
在這段指定瀏覽頁次的ASP程式敘述中，我們使用了Recordset物件的『Move』方法來移動資料庫中資料錄的存取位置。
[attach]933[/attach]

顯示跳頁選擇的程式敘述

    完成移動資料庫中資料錄存取位置的Asp程式敘述後，接下來我們要作的就是將這些跳頁選擇的連結資料顯示在網頁中：

[attach]934[/attach]

    在網頁中出現的跳頁選擇列表，瀏覽者正進行瀏覽的頁次將不會有跳頁選擇的超連結功能！非瀏覽中的頁次才具有跳頁選擇的超連結功能！要有這樣的功能，我們則可特過下列這段ASP程式敘述來達成。
  1. <%
  2. for i=1 to TotalPage
  3. If i<>PageCount then
  4. Response.Write "<font color=black>｜</font>
  5. <a href=guest.asp?topage="& i &"><font color=#cb55cc>" & i & "</font></a><font color=black>｜</font>"
  6. else
  7. Response.Write "<font color=black>｜</font>
  8. <font color=#000000>"&i&"</font><font color=black>｜</font>"
  9. end if
  10. next
  11. %>
複製代碼
作者: 小誌    時間: 2010-5-26 00:57

完整的留言顯示網頁
終於完成了『顯示留言意見』網頁中各項功能的ASP程式撰寫，最後就簡單的來為您解說一下『資料顯示』的處理原則，我們以『發言內容』為例來說明。

[attach]935[/attach]

      我們如何判斷要不要將『悄悄話』的發言內容顯示出來？有兩個判斷原則：第一為確認是不是在『管理模式』，如果是在管理模式就得將『悄悄話』的發言內容顯示出來，第二就是如果在『一般模式』的時候判斷發言性質是不是『悄悄話』，因此是，則發言的內容就以預設的文字內容代替：
  1. <% IF RS("私人公開") = "NO" OR
  2. session("checkedit")="yes" THEN%>
  3. <font color="#FF0080">留言主題：</font>
  4. <font color="#0000FF"><%=RS("留言主題")%></font>
  5. <br><font color="#000000"><%=RS("留言內容")%></font>
  6. <%ELSE%>
  7. <FONT COLOR=BLUE>:) 這是留給老師的悄悄話...</FONT>
  8. <br><font color="#FF00F00">私人討論</font>
  9. <%END if%>
複製代碼
我們先利用IF判斷資料庫檔案中『私人公開』欄位中的資料內容是否是"NO"，如果為"NO"代表並不是『悄悄話』的發言，則開將發言內容公開出來，又或者Session物件的變數"checkedit"值為"yes"，如果Session物件的變數值為　"yes"，代表在管理模式，就必須將『悄悄話』的發言顯示出來：

[attach]936[/attach]

guest.asp
  1. <%
  2. '*************開啟資料庫message.mdb
  3. Set CN = Server.CreateObject("ADODB.Connection")
  4. CN.Open "Driver={Microsoft Access Driver (*.mdb)};DBQ="&Server.MapPath("message.mdb")
  5. Set RS=Server.CreateObject("ADODB.Recordset")
  6. SQL="SELECT*From allmessage order by 留言日期 Desc"
  7. RS.Open SQL,CN,1,1
  8. '**************顯示頁選擇與分頁設定
  9. '資料總數Count,總頁數TotalPage
  10. Count=RS.RecordCount
  11. If Count/10 > (Count\10) then
  12. TotalPage=(Count\10)+1
  13. else TotalPage=(Count\10)
  14. End If

  16. PageCount= 0
  17. RS.MoveFirst
  18. if Request.QueryString("ToPage")<>"" then PageCount = cint(Request.QueryString("ToPage"))
  19. if PageCount <=0 then PageCount = 1
  20. if PageCount > TotalPage then PageCount = TotalPage
  21. RS.Move (PageCount-1) * 10
  22. '***************管理模式檢驗
  23. '以下為進入管理模式的敘述
  24. password=Request.Form("password")
  25. IF password="test" then '<-----管理密碼
  26.   session("checkedit")="yes"
  27. End IF
  28. '以下為脫離管理模式的程式敘述
  29. goexit=Request.Form("goexit")
  30. IF goexit="yes" then
  31. session("checkedit")="no"
  32. End IF
  33. %>
  34. <html>
  35. <head>
  36. <meta http-equiv="Content-Type" content="text/html; charset=big5">
  37. <title>家庭聯絡簿</title>
  38. </head>
  39. <body>
  40. <div align="center">
  41. <img src="title.gif"><br><a href="addmsg.asp">家長發言請按此</a>
  42. </div>
  43. <center>
  44. <form method="post" name="formpage">
  45. <!-------顯示頁選擇與分頁設定---------->
  46. <table border="0" width="100%" cellpadding="0" cellspacing="0">
  47. <tr>
  48. <td><p align=right>
  49. <%
  50. for i=1 to TotalPage
  51.   If i<>PageCount then
  52.   Response.Write "<font color=black>｜</font><a href=guest.asp?topage="& i &"><font color=#cb55cc>" & i & "</font></a><font color=black>｜</font>"
  53.   else
  54.   Response.Write "<font color=black>｜</font><font color=#000000>"&i&"</font><font color=black>｜</font>"
  55.   end if
  56. next
  57. %>
  58.   </p>
  59. </td>
  60. <td align=right>
  61. 共<%=Count%>筆留言&nbsp&nbsp第 <% =PageCount %> 頁 / 共 <% =TotalPage %> 頁</td>
  62. </tr></table>
  63. <hr size="1" align="center" width="100%" >
  64. </form>
  65. <!-----讀入與顯示資料錄----->
  66. <%
  67. i=0
  68. Do While Not RS.EOF and i<10
  69. i=i+1
  70. %>
  71. <table border=0 width=90% bgcolor=#99CCFF>
  72. <tr>
  73. <td><fieldset id=info align=center style='margin:5'>
  74.   <img src="<% =RS("爸媽") %>.gif" border="0">&nbsp<%=RS("家長姓名")%>&nbsp於<% =RS("留言時間") %>發表&nbsp&nbsp
  75. <% if len(TRIM(RS("聯絡信箱")))<>0 then %> <a href="mailto:<% =RS("聯絡信箱") %>">
  76. <img src="mail.gif" alt="聯絡信箱 <% =RS("聯絡信箱") %>" border="0"></a>
  77. <% end if %>
  78. <table border="0" width=100%>
  79.   <tr>
  80. <td  valign="top" align="left">
  81. <% IF RS("私人公開") = "NO" OR session("checkedit")="yes" THEN%>
  82. <font color="#FF0080">留言主題：</font>
  83. <font color="#0000FF"><%=RS("留言主題")%></font>
  84. <br><font color="#000000"><%=RS("留言內容")%></font>
  85. <%ELSE%>
  86. <FONT COLOR=BLUE>:) 這是留給老師的悄悄話...</FONT>
  87.   <br><font color="#FF00F00">私人討論</font>
  88. <%END if%>
  89.   </td></tr>
  90. <%if RS("老師回覆")<>"" then%>
  91. <tr bgcolor="#3399FF">
  92.   <td align="left" valign=top >  
  93.   <font color="#800000">老師於<%=RS("老師回覆時間")%>回覆：</font>
  94.   <br>
  95. <font color="FFFFFF"><%=RS("老師回覆")%></font>
  96. </td></tr>
  97.   <% end if%>
  98.   <% IF session("checkedit")="yes" then %>
  99. <tr><td>
  100.   <DIV ALIGN=RIGHT>【<a href=teachans.asp?ID=<%=RS("編號")%>>老師回覆</a>】</DIV>
  101. </td></tr>
  102.   <%END IF%>
  103. </table>
  104. </td></tr></table><br>
  105. <% RS.MoveNext
  106. loop
  107. RS.Close
  108. CN.Close
  109. %>
  110. <p>
  111. <!-----管理模式選擇---------->
  112. <form method="post">
  113. <%IF session("checkedit")="yes" then%>
  114. <input type="hidden" value="yes" name="goexit">
  115. <input type="submit" value="離開管理模式">
  116. <%else%>
  117. 密碼：<input type="text" name="password" size="4" maxlength="4">&nbsp&nbsp<input type="submit" value="教師管理">
  118. <%End IF%>
  119. </form>
  120. </center>
  121. </body>  
  122. </html>  
複製代碼
作者: 小誌    時間: 2010-5-26 01:02

發言表單網頁製作
當我們要在網頁中提供一個可以讓學生家長發表意見或反映的聯絡簿時，我們首先必須設計一個『意見發表表單』，讓學生家長可以在上面發表意見，並且要能將這些意見資料送給我們處理家長發言資料的ASP程式『add.asp』來紀錄以及處理這些意見資料。

    現在我們就來製作一個可以讓學生家長可以在上面發表意見的表單網頁『addmsg.asp』：

[attach]937[/attach]

編號

欄位

欄位名稱

表單元件

１

留言主題

subject

單行文字方塊

２

您的大名

parent

單行文字方塊

３

E-Mail

email

單行文字方塊

４

爸爸還是媽媽

dadmam

選擇鈕

５

留言性質

personal

下拉式功能表

６

留言內容

memo

多行文字方塊

７

送出意見

Submit

按鈕

８

清除重寫

／

按鈕



『留言主題』網頁敘述標籤
  1. <input type="text" name="subject" size="50" maxlength="20">
複製代碼
『您的大名』網頁敘述標籤
  1. <input type="text" name="parent" size="20" maxlength="20">
複製代碼
『E-Mail』網頁敘述標籤
  1. <input type="text" name="email" size="35" maxlength="40">
複製代碼
『爸爸還是媽媽』網頁敘述標籤
  1. <input type="radio" name="dadmam" value="1" checked >
  2. <img src="1.gif">
  3. <input type="radio" name="dadmam" value="2">
  4. <img src="2.gif">
複製代碼
『留言性質』網頁敘述標籤
  1. <select name="personal" size="1">
  2. <option value="大家來討論" selected>大家來討論</option><option value="只給老師看">只給老師看</option>
  3. </select>
複製代碼
『留言內容』網頁敘述標籤
  1. <textarea name="memo" cols="50" rows="2" ></textarea>
複製代碼
請特別注意：我們表單的名稱為『Addmsg』，而表單內容資料的傳送方式為『Post』，而且當這些意見資料被送達到 IIS/PWS 後，IIS/PWS 的網路伺服器端負責處理意見資料的ASP程式是『add.asp』.
  1. <form name="addmsg" method="POST" action="add.asp">
複製代碼
相關知識：表單的參數



addmsg.asp
  1. <html>
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=big5">
  4. <title>家庭聯絡簿</title>
  5. </head>
  6. <body>
  7. <div align="center">
  8. <p align="center">
  9. <font size="2">
  10. <img src="title.gif">
  11. </font>
  12. </div>
  13. <div align="center">
  14. <p align="right"><a href="guest.asp" ><font size="2">看家長們的意見</font></a>
  15. </div>
  16.   <form name="addmsg" method="POST" action="add.asp">
  17. <div align="center">
  18. <table border="0" cellspacing="1" width="100%">
  19. <tr>  
  20. <td bgcolor="#3399FF" align="center" valign="middle" width="147"><font color="#FFFFFF" size="2">留言主題</font></td>
  21. <td height="25" bgcolor="#99CCFF" width="382"><font size="2"><input type="text" name="subject" size="50" value maxlength="20"></font></td>  
  22.   </tr>  
  23. <tr>  
  24. <td bgcolor="#3399FF" align="center" valign="middle" width="147"><font color="#FFFFFF" size="2">您的大名</font></td>  
  25. <td height="25" bgcolor="#99CCFF" width="382"><font size="2"><input type="text" name="parent" size="20" maxlength="20"></font></td>  
  26. </tr>  
  27. <tr>
  28. <td bgcolor="#3399FF" align="center" valign="middle" width="147"><font color="#FFFFFF" size="2">E-Mail</font></td>  
  29. <td height="25" bgcolor="#99CCFF" width="382"><font size="2"><input type="text" name="email" size="35" maxlength="40"></font></td>  
  30. </tr>  
  31.   <tr>  
  32. <td bgcolor="#3399FF" align="center" height="27" valign="middle" width="147"><font color="#FFFFFF" size="2">您是爸爸還是媽媽？</font></td>  
  33. <td height="27" bgcolor="#99CCFF" width="382">
  34. <font size="2">
  35. <input type="radio" name="dadmam" value="1" checked ><img src="1.gif">  
  36. <input type="radio" name="dadmam" value="2"><img src="2.gif">  
  37. </font>  
  38. </td>
  39.   </tr>  
  40. <!--私人留言或公開-->
  41. <tr>  
  42. <td bgcolor="#3399FF" align="center" width="147"><font color="#FFFFFF" size="2">留言性質</font></td>
  43. <td bgcolor="#99CCFF" width="382">
  44. <font size="2">  
  45. <select name="personal" size="1">  
  46.   <option value="大家來討論" selected>大家來討論</option>
  47.   <option value="只給老師看">只給老師看</option>
  48. </select>
  49. </font>
  50. </td>
  51.   </tr>  
  52. <!--留言內容欄位-->  
  53. <tr>
  54. <td bgcolor="#3399FF" align="Center" height="98" valign="middle" width="147"><font color="#FFFFFF" size="2">留言內容：</font>
  55. </td>  
  56. <td height="98" valign="middle" bgcolor="#99CCFF" width="382">
  57.   <font size="2">
  58.   <textarea name="memo" cols="50" rows="2" ></textarea>  
  59.   </font>  
  60. </td>
  61. </tr>  
  62.   </table>  
  63. </div><div align="center"><center><p><font size="2"><input type="submit"  value="送出意見">
  64. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <input type="reset" value="重填資料"> </font> </p>  
  65.   </div>  
  66.   </form>  
  67. </center>
  68. </body>  
  69. </html>
複製代碼




歡迎光臨 麻辣家族討論版版 (http://forum.twbts.com/)