iT邦幫忙

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

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

ColdFusion 練習: webucator.com

11th鐵人賽
1181 瀏覽

  • 分享至 

  • xImage
    •  

學習資源

webucator - form-validation

Form Validation

Basic

  1. <cfform> attr for HTML: name, method, action, format
  2. 範例: 
    <cfform name="RunningForm" method="post" action="AddEntry-cfform.cfm" format="html">
<table>
<tr>
	<td>Date:</td>
	<td><cfinput type="text" name="date" size="20"></td>
</tr>
<tr>
	<td>Distance:</td>
	<td><cfinput type="text" name="distance" size="20"></td>
</tr>
<tr>
	<td>Time:</td>
	<td><cfinput type="text" name="time" size="20"></td>
</tr>
<tr>
	<td>Comments:</td>
	<td><cftextarea rows="3" cols="40" name="comments"></cftextarea></td>
</tr>
<tr>
	<td colspan="2" align="right">
		<cfinput type="submit" name="Add Entry" value="Add Entry">
	</td>
</tr>
</table>
</cfform>

<Auto-generated Form Validation>

  1. 使用 <cfform> 可以在 form 真正之前，就可以在 client-side 使用 javascript 去使用 form 的資料
  2. <cfinput>可以檢驗 (validation) 輸入的資料，使用屬性 required="yes"在<cfinput> 裡面
  3. 檢驗輸入的資料，可以在 client-side 或 server-side
  4. validate values: numeric, integer, float, range, date, time, creditcard, email, URL, boolean, SubmitOnce, ...
  5. 範例: 
    <cfform name="RunningForm" method="post" action="#CGI.SCRIPT_NAME#" format="html">
<table>
<tr>
	<td>Date:</td>
	<td><cfinput type="text" name="date" size="20" required="yes" validate="date" validateat="onsubmit" message="You must enter a valid date."></td>
</tr>
<tr>
	<td>Distance:</td>
	<td><cfinput type="text" name="distance" size="20" required="yes" validate="float" validateat="onsubmit" message="You must enter a valid number for the distance."></td>
</tr>
<tr>
	<td>Time:</td>
	<td><cfinput type="text" name="time" size="20" required="yes" validate="regex" pattern="^\d{1,3}:\d{0,2}$" validateat="onsubmit" message="You must enter a valid time in the format mm:ss."></td>
</tr>
<tr>
	<td>Comments:</td>
	<td><cftextarea rows="3" cols="40" name="comments" required="yes" validate="maxlength" maxlength="50" validateat="onsubmit" message="The comment must be between 1 and 50 characters."></cftextarea></td>
</tr>
<tr>
	<td colspan="2" align="right">
		<cfinput type="submit" name="AddEntry" value="Add Entry">
	</td>
</tr>
</table>
</cfform>

Masking Input Values

Custom Server-Side Form Validation

Custom Form Validation

Database access and Authentication

  1. A database-less login form
  2. <cfquery>
  3. creating a Registration page
  4. outputting database data
  5. using <cfoutput> to display query results

<cfquery>

送出 queries 給 database 與 把 database送回來的結果 存儲在 query variable 中

  1. Attribute: name, datasource, dbtype, username, password, timeout, ...

  2. Query object: 用 tag 建立的物件，有下列的 property

  3. current row : Current record of the query being processed

  4. columnList : 欄位的名稱，用 ,分隔

  5. recordCount : query 回傳記錄的數量

  6. executionTime: 執行query的時間

練習 Passing Variables on the URL

pass_variables_on_the_URL

  • HelloHi.html 
    <html>
<head>
	<title>Preferred Greeting</title>
</head>
<body>
	Do you prefer a formal greeting or an informal greeting?
	<ul>
	<li><a href="HelloHi.cfm?greet=Hello">Formal</a></li>
	<li><a href="HelloHi.cfm?greet=Hi">Informal</a></li>
	<li><a href="HelloHi.cfm?greet=Howdy">Friendly</a></li>
	</ul>
</body>
</html>
  • HelloHi.cfm 
    <html>
<head>
	<title><cfoutput>#URL.greet#</cfoutput> World!</title>
</head>
<body>
<cfoutput>#URL.greet# World!</cfoutput>
</body>
</html>

pass_variables_via_query_string

  • 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 
    <html>
<head>
	<title>Hello</title>
</head>
<body>
  <cfoutput>#URL.great#</cfoutput>,<cfoutput>#URL.name#</cfoutput>, nice to see u again.
</body>
</html>

練習 Processing Form Input

Marathon Time Calculator

  • calculator.html 
    <html>
<head>
	<title>Marathon Time Calculator</title>
</head>
<body>
<h1>Marathon Time Calculator</h1>
<form method="post" action="processCalculator.cfm">
<table>
<tr>
	<td>Your Name:</td>
	<td><input name="yourname" type="text" size="30"></td>
</tr>
<tr>
	<td>Your Speed:</td>
	<td><input name="yourspeed" type="text" size="4"></td>
</tr>
<tr valign="top">
	<td>Friend's Name:</td>
	<td><input name="friendname" type="text" size="30"></td>
</tr>
<tr>
	<td>Friend's Speed:</td>
	<td><input name="friendspeed" type="text" size="4"></td>
</tr>
<tr>
	<td>Units</td>
	<td>
		<select name="units">
			<option value="mph">MPH</option>
			<option value="kph">KPH</option>
		</select>
	</td>
</tr>
<tr>
	<td colspan="2" align="right">
		<input type="submit" name="Submit" value="Calculate">
	</td>
</tr>
</table>
</form>
</body>
</html>
  • processCalculator.cfm 
    <html>
<head>
	<title>Calculator Entries</title>
</head>
<body>
<h1>Calculator Entries</h1>
<cfif IsDefined("FORM.Submit")>
<cfoutput>
You have entered:
<ul>
  <li><b>Your name:</b>    #FORM.yourname#</li>
  <li><b>Your speed:</b>   #FORM.yourspeed#</li>
  <li><b>Your friend:</b>  #FORM.friendname#</li>
  <li><b>Friend's speed:</b>#FORM.friendspeed#</li>
  <li><b>Units:</b>        #FORM.units#</li>
</ul>
</cfoutput>
</cfif>
</body>
</html>
  • AddEntry-onsubmit.cfm 
    <html>
<head>
  <title>Running Log</title>
</head>
<body>
<cfabort>
<cfform name="RunningForm" method="post" action="" format="html">
<table>
<tr>
	<td>Date:</td>
	<td><cfinput type="text" name="date" size="20" required="yes" validate="date" validateat="onsubmit" message="You must enter a valid     date."></td>
</tr>
<tr>
	<td>Distance:</td>
	<td><cfinput type="text" name="distance" size="20" required="yes" validate="float" validateat="onsubmit" message="You must enter a     valid number for the distance."></td>
</tr>
<tr>
	<td>Time:</td>
	<td><cfinput type="text" name="time" size="20" required="yes" validate="regex" pattern="^\d{1,3}:\d{0,2}$" validateat="onsubmit"     message="You must enter a valid time in the format mm:ss."></td>
</tr>
<tr>
	<td>Comments:</td>
	<td><cftextarea rows="3" cols="40" name="comments" required="yes" validate="maxlength" maxlength="50" validateat="onsubmit"     message="The comment must be between 1 and 50 characters."></cftextarea></td>
</tr>
<tr>
	<td colspan="2" align="right">
		<cfinput type="submit" name="AddEntry" value="Add Entry">
	</td>
</tr>
</table>
</cfform>
</body>
</html>

練習 login with noDB

  • register.cfm 
    <html>
<head>
<title>Register</title>
</head>
<body>

<cfif NOT isDefined("FORM.submitted")>

	<h2>Registration Form</h2>
	<cfoutput><form method="post" action="#CGI.SCRIPT_NAME#"></cfoutput>
	<input type="hidden" name="submitted" value="true">
	<table>
	<tr>
		<td>Email:</td>
		<td>
			<input type="text" name="email" size="30">
		</td>
	</tr>
	<tr>
		<td>Password:</td>
		<td>
			<input type="password" name="password" size="10">
		</td>
	</tr>
	<tr>
		<td>Repeat Password:</td>
		<td>
			<input type="password" name="password2" size="10">
		</td>
	</tr>
	<tr>
		<td>First name:</td>
		<td>
			<input type="text" name="firstname" size="10">
		</td>
	</tr>
	<tr>
		<td>Last name:</td>
		<td>
			<input type="text" name="lastname" size="10">
		</td>
	</tr>
	<tr>
		<td colspan="2" align="center">
			<input type="submit" value="Register">
		</td>
	</tr>
	</table>
	</form>
<cfelse>

<!---
	Write an if statement that checks to make
	sure the passwords are the same.
--->
	<cfif WRITE_CONDITION_HERE>
		<!---
			Write a query that inserts the new record
			into the Users table. The fields in the
			database have the same names as those in
			the form: firstname, lastname, email, password
		--->
		<cfquery datasource="Runners">

		</cfquery>
		You have registered successfully.
			<p><a href="index.cfm">Home Page</a></p>
	<cfelse>
		<p class="errors"><b>Your passwords
		do not match. Please <a href=
		"Register.cfm">try again</a>.</p>
	</cfif>
</cfif>

</body>
</html>
  • login_noDB.cfm 
                   <cfif isDefined("FORM.submitted")>
	<cfif FORM.email EQ "jiajun.chou@104.com.tw" AND password EQ "password">
		<cflocation url="index.cfm" addtoken="no">
	</cfif>
</cfif>
<cfparam name="FORM.email" default="">
<html>
<head>
<title>Login Page</title>
</head>
<body>

<h2>Log in</h2>
<cfoutput><form method="post" action="#CGI.SCRIPT_NAME#"></cfoutput>
<input type="hidden" name="submitted" value="true">
	<table>
	<tr>
		<td>Email:</td>
		<td><input type="text" name="email"
				value="<cfoutput>#FORM.email#</cfoutput>" size="25"></td>
	</tr>
	<tr>
		<td>Password:</td>
		<td>
		<input type="password" name="password" size="14">
		</td>
	</tr>
	<tr>
		<td align="right" colspan="2">
		<input type="submit" value="Log in">
		</td>
	</tr>
	<tr>
		<td colspan="2">
			<br><a href="register.cfm">Register</a>
		</td>
	</tr>
	</table>
</form>

<h2>Login example</h2>
<ul>
  <li>jiajun.chou@104.com.tw</li>
  <li>password</li>
</ul>
</body>
</html>
  • index.cfm 
    <cfoutput>
    #now()#

<cfset dtThisMonth = CreateDate(Year(Now()),Month(Now()),1) />


<cfset dtThisMonth = dateAdd("m",0,dtThisMonth)>


<cfset dtLastDayOfMonth = (DateAdd( "m", 1, dtThisMonth ) -1) />

<cfset dtFirstDay = (dtThisMonth - DayOfWeek( dtThisMonth ) + 1) />

<cfset dtLastDay = (dtLastDayOfMonth + 7 - DayOfWeek( dtLastDayOfMonth )) />

<h2><cfoutput>#dateformat(dtThisMonth,"mmmm yyyy")#</cfoutput></h2>
<table width="100%" border="1">
<tr>
<th>Sun</th><th>Mon</th><th>Tue</th><th>Wed</th><th>Thu</th><th>Fri</th><th>Sat</th>
</tr>

<cfloop index="dtDay" from="#dtFirstDay#" to="#dtLastDay#" step="1">

<cfif ((DayOfWeek( dtDay ) MOD 7) EQ 1)>
    <tr class="days">
</cfif>

<cfif month(dtDay) eq month(dtThisMonth)>
    <cfset bgColor = '##FFFFFF'>
<cfelse>
    <cfset bgColor = '##DDDDDD'>
</cfif>
<cfoutput>
    <td bgColor="#bgColor#">#Day( dtDay )#</td>
</cfoutput>

<cfif NOT (DayOfWeek( dtDay ) MOD 7)>
</td>
</cfif>

</cfloop>
</table>
</cfoutput>

上一篇
ColdFusion 練習: ColdFusion MX 網站威力實作 part2
下一篇
MySQL query
系列文
網頁服務開發之路 共 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鐵人賽
參賽組數
1123 組
團體組數
52 組
累計文章數
23096 篇
完賽人數
656 人
iT+看影片追技術 看影片追技術 看更多
熱門tag 看更多
15th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽 鐵人賽 2019鐵人賽 2018鐵人賽 javascript 2017鐵人賽 python windows php c# windows server linux css react 程式設計 vue.js
熱門問題
熱門回答
熱門文章
IT邦幫忙