返回列表 上一主題 發帖

[教學] (實戰專題) 線上報名

[教學] (實戰專題) 線上報名

『線上報名』顧名思義就是你坐在家中電腦前,只要透過網路連線就可以進行各項活動的報名,不管是旅遊活動或是各項研討會喔!

 本範例中的報名程式是針對校園活動而設計,管理者可訂定多個項目,報名者只要透過表單中的下拉式功能表選擇自己要參加的活動項目及填寫自己的姓名與學號即可線上報名,雖說是簡易版,但程式功能已與一般商業網站不相上下了喔。

程式流程

   本程式範例共分為四個部分,分別是:

  • 活動報名首頁In.asp,此網頁是報名者填寫個人資料及選擇欲參加活動項目的主網頁!

    14-1.png
    2010-5-26 21:55


  • 儲存報名者資料的add.asp程式網頁,本程式網頁負責將在報名網頁In.asp中所填寫的相關的資料寫入至資料庫檔案中,並且將報名結果顯示出來。

    14-2.png
    2010-5-26 21:55


  • 參加人員清單列表程式網頁list.asp,當我們在儲存報名者資料的add.asp程式中點選了"查看已參加人員"按鈕後就會連結進入此一網頁,本程式網頁將會將已報名參加活動的人員列示出來。

    14-3.png
    2010-5-26 21:55


  • 儲存報名資料的資料庫檔案report.mdb。



請注意:
 我們資料庫的設計是依據"活動項目"來設計,也就是說,有幾個活動項目在資料庫檔案中就有幾個資料表,例如本範例中可參加的研討會項目有"網頁設計"與"影像處理"兩個主題,因此在資料庫檔案中就存在有與項目名稱相同的"網頁設計"與"影像處理"這兩個資料表!如下圖所示:

14-4.png
2010-5-26 21:56


 資料表的結構很簡單,只有姓名與學號兩個欄位,你可以依需要報名者填寫的資料項目而自行增加其他欄位項目。

14-5.png
2010-5-26 21:56
心安,平安   
發表任何無意義的感謝或灌水文章一律砍,珍惜帳號,請詳閱版規!!

活動報名首頁In.asp


  • 依照目前可讓報名者參加的活動項目建立一個下拉式功能表,讓報名者直接選取欲參加的活動項目:

    14-7.png
    2010-5-26 21:59


    注意
     在備選項目命名的部分,一定要配合資料庫的資料表名稱來設定Option標籤的『Value』屬性值,因為這個屬性質關係到我們資料庫資料表的開啟!因此Option標籤的『Value』屬性值必須是資料庫中已經存在的資料表名稱:

    14-8.png
    2010-5-26 21:59


  • 當報名者填寫好個人資料與選定欲參加的活動項目後按下"確認參加"按鈕,則表單中的資料是交由add.asp程式網頁來處理,因此在FORM標籤中必須將action屬性設定為add.asp,同時,資料的傳送方式method屬性設定為POST。


in.asp
  1. <HTML>
  2. <head>
  3. <title>研討會報名單</title>
  4. </head>
  5. <BODY>
  6. <p align="center"><img border="0" src="tit.gif"></p>
  7. <hr width="80%" color="#FF9900">
  8. <form method="POST" action="add.asp">
  9. <div align="center">
  10. <center>
  11. <table border="1" bordercolor="#FFFFFF" bgcolor="#3399FF">
  12. <tr>
  13. <td width="50%"><font color="#FFFFFF" size="2">研討會課程選擇:</font></td>
  14. <td width="50%"><font size="2"><select size="1" name="actname">
  15. <option value="網頁設計">網頁設計</option>
  16. <option value="影像處理">影像處理</option>
  17. </select></font></td>
  18. </tr>
  19. <tr>
  20. <td width="50%"><font color="#FFFFFF" size="2">姓名:</font></td>
  21. <td width="50%"><font size="2"><input type="text" name="name" size="20"></font></td>
  22. </tr>
  23. <tr>
  24. <td width="50%"><font color="#FFFFFF" size="2">學號:</font></td>
  25. <td width="50%"><font size="2"><input type="text" name="id" size="20"></font></td>
  26. </tr>
  27. <tr>
  28. <td width="100%" colspan="2">
  29. <p align="center"><input type="submit" value="確認參加" style="background-color: #00FFFF; border-style: groove; border-color: #FFFFFF">
  30. <input type="reset" value="清除重寫" style="background-color: #FF66CC; border-style: ridge; border-color: #FFFFFF"></p>
  31. </td>
  32. </tr>
  33. </table>
  34. </center>
  35. </div>
  36. </form>
  37. <hr width="80%" color="#FF9900">
  38. </BODY>
  39. </HTML>
複製代碼
心安,平安   
發表任何無意義的感謝或灌水文章一律砍,珍惜帳號,請詳閱版規!!

TOP

資料儲存與狀態顯示

儲存報名者資料的add.asp程式網頁其任務有兩項:將資料寫入資料庫,顯示報名狀態與參加者清單列表連結。


  • 報名者在報名網頁In.asp中填寫好相關的資料,則表單中的資料將由本程式網頁來寫入至資料庫檔案中:

    14-9.png
    2010-5-26 22:02


    請特別注意到『actname』這個變數值,這個變數是用來接取報名者所要參加的活動項目(下欄選單的選項值)!我們利用此變數值來開啟相對應的資料庫資料表,而且將此變數值用來作為網頁顯示的標題;如下圖所示。

    14-10.png
    2010-5-26 22:02


  • 查看已參加人員的連結設計是採用"表單"方式建立,雖然報名者所看到的網頁畫面只有"查看已參加人員"這個按鈕,但是,當報名者按下此一按鈕時卻有一項欄位資料被送出,不是按鈕的值(Value)喔,而是我們所建立的一個隱藏欄位:actname!

    14-11.png
    2010-5-26 22:03


  • 當報名者按下"查看已參加人員"按鈕,則表單中的資料是交由list.asp程式網頁來處理,因此在FORM標籤中必須將action屬性設定為list.asp,同時,資料的傳送方式method屬性設定為POST。

    14-12.png
    2010-5-26 22:03



  add.asp
  1. <%
  2. '接收資料
  3. actname=Request("actname")
  4. name=Request("name")
  5. id=Request("id")

  6. '建立資料庫連結物件
  7.         Set CN = Server.CreateObject("ADODB.Connection")
  8.         DBPath = Server.MapPath("report.mdb")
  9. '連結資料庫       
  10.         CN.Open "Driver={Microsoft Access Driver (*.mdb)};DBQ="&DBPath
  11. '建立資料庫存取物件       
  12.         Set RS=Server.CreateObject("ADODB.Recordset")
  13. '寫入資料       
  14.        
  15. Function chgStr( data )
  16.    chgStr = "'" & Replace( data, "'", "''" ) & "'"
  17. End Function
  18. sql = "Insert Into " & actname &" (姓名, 學號) Values ("
  19. sql = sql & chgStr(name) & ", "
  20. sql = sql & chgStr(id) & ")"
  21. CN.Execute sql

  22. %>
  23. <html>
  24. <head>
  25. <meta http-equiv="Content-Type" content="text/html; charset=big5">
  26. <title>線上報名</title>
  27. </head>
  28. <body>
  29. <p align="center"><img border="0" src="tit.gif" width="231" height="40"></p>
  30. <p align="center">你已經順利完成<font color="#FF3300"><%=actname%></font>研討會報名</p>
  31. <hr width="80%" color="#FF9900">
  32. <form method="POST" action="list.asp">
  33.   <p align="center">
  34.   <input type="hidden" value="<%=actname%>" name="actname">
  35.   <input type="submit" value="查看已參加人員" style="background-color: #008000; color: #FFFFFF; border-style: groove"></p>
  36. </form>
  37. </body>
  38. </html>
複製代碼
心安,平安   
發表任何無意義的感謝或灌水文章一律砍,珍惜帳號,請詳閱版規!!

TOP

已報名者清單列表

當報名者在資料儲存與狀態顯示網頁中按下"查看已參加人員"按鈕,則表單中的資料就由list.asp程式網頁作清單列表的動作:

14-13.png
2010-5-26 22:07



  • 利用接收來自資料儲存與狀態顯示網頁中的活動項目選項資料開啟相對應的資料庫資料表:

    14-14.png
    2010-5-26 22:07


    在本程式中我們同樣要將actname變數作為網頁標題:

    14-15.png
    2010-5-26 22:08


    14-16.png
    2010-5-26 22:08


  • 已報名者資料讀取與列表
     當資料庫被連結,相對應於活動項目的資料表開啟後,接著就是將資料表中的欄位資料讀取出來,同時配合表格網頁標籤的使用,以表格的方式列表出來:

    14-17.png
    2010-5-26 22:09


     利用While Wend 迴圈敘述將所有資料表中資料錄欄位的資料全部取出列表,迴圈敘述停止執行的條件為 not rs.eof,意思就是說動作中資料錄的位置,若超過資料錄最後一筆資料時就停止迴圈敘述,當然,在迴圈中敘述執行讀取一筆資料錄資料後,我們還必須利用資料錄的MoveNext方法將作用中資料錄的位置移至下一筆資料上!


list.asp
  1. <%
  2. '接收查詢班級資料
  3. actname=Request("actname")

  4. '建立資料庫連結物件
  5.         Set conobject = Server.CreateObject("ADODB.Connection")
  6.         DBPath = Server.MapPath("report.mdb")
  7. '連結資料庫       
  8.         conobject.Open "Driver={Microsoft Access Driver (*.mdb)};DBQ="&DBPath
  9. '建立資料庫存取物件       
  10.         Set RS=Server.CreateObject("ADODB.Recordset")
  11. '打開資料表       
  12. SQL = "Select * From " & actname
  13.         RS.Open SQL,conobject,1,3
  14. %>
  15. <HTML>
  16. <head>
  17. <title><%=actname%>研討會報名人員清單</title>
  18. </head>
  19. <BODY>
  20. <p align="center">
  21. <img border="0" src="tit.gif">
  22. <p Align="Center">
  23. <font color="#FF9900"><%=actname%>研討會報名人員清單</font></p>
  24. <div align="center">
  25.   <center>
  26. <TABLE Border=1 Cellspacing=1 bordercolor="#800000">     
  27. <TR BgColor=#00FFFF>     
  28. <TD align="center" bgcolor="#0066FF"><font size="2" color="#FFFFFF">姓名</font></TD>   
  29. <TD align="center" bgcolor="#0066FF"><font size="2" color="#FFFFFF">學號</font></TD>   
  30. </TR>   
  31.    
  32. <% While not rs.eof%>   
  33.    <TR Valign=TOP>   
  34.    <TD align="center">   
  35.     <p align="center"><font size="2"><%=rs("姓名")%></font></TD>   
  36.    <TD align="center">   
  37.     <p align="center"><font size="2"><%=rs("學號")%></font></TD>   

  38.    </TR>   
  39. <%   
  40.    rs.MoveNext   
  41. Wend      
  42. %>   
  43. </TABLE>   
  44.   </center>
  45. </div>
  46. <p align="center"><font size="2"><a href="in.asp">返回登錄頁</a></font></p>
  47. </body>
  48. </html>
複製代碼
注意
活動欄位選項數量、名稱必須與資料表數量、名稱相符:您可以自行增減活動項目,但是,活動欄位的名稱務必是資料庫檔案中已經存在的資料表:

14-18.png
2010-5-26 22:10




(實戰專題) 線上報名 完整範例壓縮檔: report.zip (14.56 KB)
心安,平安   
發表任何無意義的感謝或灌水文章一律砍,珍惜帳號,請詳閱版規!!

TOP

        靜思自在 : 真正的愛心,是照顧好自己的這顆心。
返回列表 上一主題