iT邦幫忙

第 11 屆 iThome 鐵人賽
DAY 11
0
自我挑戰組

網頁服務開發之路系列 第 11 篇

ColdFusion 練習: ColdFusion MX 網站威力實作 part2

11th鐵人賽
677 瀏覽

  • 分享至 

  • xImage
    •  

表單處理程式與留言版製作

表單處理

處理表單至少兩個部分，兩個部份可以是一個檔案或是寫在一起

  1. 包含表單的 HTML或 Coldfusion網頁，統稱 表單(form) 網頁
  2. 接收並處理表單資料的 動作(action) 網頁
  3. form網頁 範例: 
    <body>
<h2>表單留言</h2>
<form action="actionPage.cfm" method="POST">
 姓名
 <input name="guestName" type="Text" size="30"><br/>
 e-mail
 <input name="email" type="Text" size="30"><br/>
 留言
 <textarea name="message" cols="36" rows="5"></textarea><br/>
 <input type="submit" name="Submit" value="送出">
 <input type="reset" name="Reset" value="重設">
</form>
</body>
  4. action: 指定將表單資料送給actionPage.cfm
  5. method: 兩種方法傳送 GET (預設), POST
  6. 不管哪種類型的表般，都具有替該元素命名 name 的屬性
  7. action網頁 範例: 
    <html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=big5">
<title>確認留言</title>
<body>
<cfif IsDefined("FORM.Submit")> <!-- 如果沒有透過form page執行這個動作頁，會出現錯誤，所以用IsDefined 防範 -->
<cfoutput>
 <p>#FORM.guestName# 您好: </p>
您輸入的資料如下: <br><br>
 <b>姓名: </b>#FORM.guestName#<br>
 <b>email: </b>#FORM.email#<br>
 <b>留言內容: </b>#FORM.message#<br>
</cfoutput>
</body>
</html>

GET

  1. 資料將透過 URL結構變數 傳遞
  2. 範例: HelloWho.cfm?name=John&great=Hello
    • HelloWho.html
    <html>
<head>
    <title>Greeting the Beatles</title>
</head>
<body>
    Choose a Name to greet.
    <ul>
        <li><a href="HelloWho.cfm?name=Paul&great=Hi">Paul</a></li>
        <li><a href="HelloWho.cfm?name=John&great=Hello">John</a></li>
        <li><a href="HelloWho.cfm?name=George&great=Good">George</a></li>
        <li><a href="HelloWho.cfm?name=Ringo&great=Bye">Ringo</a></li>
    </ul>
</body>
</html>
    • HelloWho.cfm
        <cfoutput>#URL.great#</cfoutput>,<cfoutput>#URL.name#</cfoutput>, nice to see u again.
  3. 查詢字串(query striing): guestName=Smith&great=Hello，不同的配對用 & 區隔
  4. 名稱/值配對(name/value pair): 假設用戶在姓名欄填入'Smith'送出表單時，browser將以guestName=Smith的格式送出資料
  5. 利用下面方法，拿到GET的資料 Smith 
    <cfoutput>
#URL.guestName#
</cfoutput>

GET 限制

  1. query string 限制255字元
  2. 機密資料會被看到

POST

  1. 沒有字元上限制
  2. 可以將圖像或其他檔案上傳到 server
  3. browser 不會顯示送出的資料
  4. 利用下面的方法，拿到 POST 的資料 
    <cfoutput>
 #FORM.guestName#
</cfoutput>

i18n編碼問題

(nternationalization)

<cfprocessingdurectuve pageencoding="big5">
<cfcontent type="text/html; charset=big5">
<cfset setEncoding("URL", "big5")>
<cfset setEncoding("Form", "big5")>

實作

ColdFusion + Sql Query

  • todo list: 前端可搭配 Javascript or jQuery
    • table todo_list
      • todo_id(key): int, auto_increament
      • todo_task: varchar(255), not NULL
      • todo_status: tinuint(1), not NULL
      • create_date: timestamp, default: CURRENT_TIMESTAMP
    • 功能
      • 顯示代辦事項: todo_list.cfm
      • 新增: add_todo_act.cfm
      • 修改: modify_todo_act.cfm
      • 刪除: delete_todo_act.cfm
    • 篩選及排序
      • 完成狀態 all / 未完成 / 已完成
  • todo_list.cfm 
    <cfparam name="status" default = "2">
<cfparam name="sortBy" default = "3">

<cfquery name="todo_list" datasource="">
  <cfif #status# EQ 2>    
   select todo_id,todo_task,todo_status,todo_date
   from todo_list 
     <cfif #sortBy# EQ 3>
     order by todo_date ASC;
     <cfelse>
     order by todo_status;
     </cfif>
  <cfelse>
   select todo_id,todo_task,todo_status,todo_date
   from todo_list 
   where todo_status = #status#
     <cfif #sortBy# EQ 3>
     order by todo_date ASC;
     </cfif>   
   </cfif>
</cfquery>

<cfset dataID = ValueList(todo_list.todo_id)>
<cfset dataTask = ValueList(todo_list.todo_task)>
<cfset dataStatus = ValueList(todo_list.todo_status)>
<cfset dataDate = ValueList(todo_list.todo_date)>

  <cfoutput> 篩選及排序</cfoutput>
  <form method = "GET" action="todo_list.cfm">  
  <input type = "radio" value = "2" id="all" name="status" <cfif status EQ 2>
    checked = "checked"
  </cfif> > all   
  <input type = "radio" value = "0" id="todo" name="status" <cfif status EQ 0>
    checked = "checked"
  </cfif>> 未完成
  <input type = "radio" value = "1" id="done" name="status" <cfif status EQ 1>
    checked = "checked"
  </cfif>> 已完成  
  <select name = "sortBy">
    <option value = "3" <cfif sortBy EQ 3>
    selected="selected"</cfif>> 依日期排序</option>
    <option value = "4" <cfif sortBy EQ 4>
    selected="selected"</cfif>> 依完成狀態排序</option>
  </select>
  </br>
  <input type="submit" value="篩選及排序">
  </form>
  </br>

  <cfoutput> 待辦事項</cfoutput>
  <form action="add_todo_act.cfm" method="POST" >
  <input type="text" id="add" name = "needToDo">
  <input type="submit" name="Submit" value="新增待辦事項">
  </form>
  </br>

<table>
	<tr>
      <td colspan="2" align="center" bgcolor="#FFFFFF"><font color="647bcf">待辦事項</font></td>
	  <td colspan="2" align="center" bgcolor="#FFFFFF"><font color="647bcf">新增日期</font></td>
	  <td colspan="2" align="center" bgcolor="#FFFFFF"><font color="647bcf">功能</font></td>
	  <td colspan="2" align="center" bgcolor="#FFFFFF"><font color="647bcf">&nbsp</font></td>
	  <td colspan="2" align="center" bgcolor="#FFFFFF"><font color="647bcf">狀態</font></td>
    </tr>
<cfoutput>

<cfloop index = "ii" from = "1" to = #ListLen(dataID)#>
			<tr>
        <td colspan="2" align="center">#ListGetAt(dataTask, ii)#</td>
				<td colspan="2" align="center">#ListGetAt(dataDate, ii)#</td>
        <td colspan="2">
          <form action="modify_todo_act.cfm" method="POST" >          
          <input type="button" name="beModify" value="更新狀態" onclick =     "modifyStatus(#ListGetAt(dataID, ii)#, #ListGetAt(dataStatus, ii)#)">
          </form>
        </td>  
        <td colspan="2">
          <form action="delete_todo_act.cfm" method="POST">          
          <input type="button" name="beDone" value="刪除" onclick = "deleteID    (#ListGetAt(dataID, ii)#)">
          </form>
        </td>
        <td colspan="2" align="center"><cfif #ListGetAt(dataStatus, ii)# EQ 1 >完成    <cfelse>未完成</cfif></td>
			</tr>
</cfloop>
</cfoutput>
</table>
<script>
  deleteID = function(dataID){
    var r=confirm("確認刪除?");    
    if (r==true) {      
      location.href = "delete_todo_act.cfm?dataID=" + dataID;
      }else {    
    };    
  };
  modifyStatus = function(dataID, dataStatus){
    if(dataStatus == "0"){
        var r = confirm("你真的完成了嗎?");
        if( r== true) location.href = "modify_todo_act.cfm?dataID=" + dataID + "&    dataStatus=" + dataStatus;        
    }else{ 
        var r = confirm("發現還有東西要弄?");
        if( r== true) location.href = "modify_todo_act.cfm?dataID=" + dataID + "&    dataStatus=" + dataStatus;
    };
  };  
</script>
  • add_todo_act.cfm 
    <cfif '#FORM.needToDo#' NEQ "">
<cfquery name="insert" datasource="#">
    INSERT INTO todo_list (todo_task, todo_status)
    VALUES 
    ('#FORM.needToDo#',0);
</cfquery>
<cflocation url = "todo_list.cfm">
<cfelse>
<cflocation url = "todo_list.cfm">
</cfif>
  • modify_todo_act.cfm 
    <cfquery name="beModify" datasource="">
  <cfif #URL.dataStatus# EQ false>
    UPDATE todo_list
    SET todo_status = '1'
    WHERE todo_id = #URL.dataID#;
  <cfelse>
    UPDATE todo_list
    SET todo_status = '0'
    WHERE todo_id = #URL.dataID#;
   </cfif> 
</cfquery>

<cflocation url = "todo_list.cfm">
  • delete_todo_act.cfm 
    <cfquery name="beDone" datasource="#m012001_ODBC_i#">
    DELETE FROM todo_list
    WHERE todo_id = #URL.dataID#;
</cfquery>

<cflocation url = "todo_list.cfm">

上一篇
ColdFusion: TryCF.com
下一篇
ColdFusion 練習: webucator.com
系列文
網頁服務開發之路 共 30 篇
  1. 26
    Day 26. Chrome Develop Tool: Network
  2. 27
    Day 27. Search Engine Optimization (SEO)
  3. 28
    Day 28. 受眾分析
  4. 29
    Day 29. 【資訊安全】資訊安全政策與基本概念
  5. 30
    Day 30. 資料庫類型介紹與索引建立
完整目錄
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言
iThome鐵人賽
參賽組數
1064 組
團體組數
40 組
累計文章數
22189 篇
完賽人數
602 人
iT+看影片追技術 看影片追技術 看更多
熱門tag 看更多
15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽 鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# windows server linux css react vue.js
熱門問題
熱門回答
熱門文章
IT邦幫忙