kyle'sBlog: 12月 2014

2014年12月30日星期二

使用自訂頁面整合Google表單

參考文件：
- https://blog.toomore.net/2008/07/google_15.html
- https://www.arno.tw/google-doc-advanced/
在Google文件建立表單 (表單範例)
- https://docs.google.com/forms/d/1sOkOsk6_mHcT_aT1CQ78We9KfK0iwE_a852pWyKfGCw/edit

設定好表單之後，檢視其原始碼，將其原始碼複製出來改寫。
改寫內容如下：


	<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
	<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>測試google表單</title>

	</head>

	<body>
	<form method='POST' action='https://docs.google.com/forms/d/1sOkOsk6_mHcT_aT1CQ78We9KfK0iwE_a852pWyKfGCw/formResponse'>
	<a href='https://docs.google.com/forms/d/1sOkOsk6_mHcT_aT1CQ78We9KfK0iwE_a852pWyKfGCw/formResponse'>重新填寫</a>
	<div class="ss-form-question errorbox-good" role="listitem">
	<div dir="ltr" class="ss-item ss-item-required ss-text">
	<div class="ss-form-entry">
	<label class="ss-q-item-label" for="entry_9265193">
	<div class="ss-q-title">
	姓名
	<label for="itemView.getDomIdToLabel()" aria-label="(必填欄位)"></label>
	<span class="ss-required-asterisk" aria-hidden="true">*</span>
	</div>
	<div class="ss-q-help ss-secondary-text" dir="ltr">請輸入姓名</div>
	</label>
	<input type="text" name="entry.9265193" value="" class="ss-q-short" id="entry_9265193" dir="auto" aria-label="姓名請輸入姓名 " aria-required="true" required="" title="" />
	<div class="error-message" id="746091792_errorMessage"></div>
	<div class="required-message">這是必填問題</div>
	</div>
	</div>
	</div> <div class="ss-form-question errorbox-good" role="listitem">
	<div dir="ltr" class="ss-item ss-item-required ss-radio">
	<div class="ss-form-entry">
	<label class="ss-q-item-label" for="entry_951819516">
	<div class="ss-q-title">
	性別
	<label for="itemView.getDomIdToLabel()" aria-label="(必填欄位)"></label>
	<span class="ss-required-asterisk" aria-hidden="true">*</span>
	</div>
	<div class="ss-q-help ss-secondary-text" dir="ltr"></div>
	</label>

	<ul class="ss-choices" role="radiogroup" aria-label="性別 ">
	<li class="ss-choice-item">
	<label>
	<span class="ss-choice-item-control goog-inline-block"><input type="radio" name="entry.186054663" value="男" id="group_186054663_1" role="radio" class="ss-q-radio" aria-label="男" required="" aria-required="true" /></span>
	<span class="ss-choice-label">男</span>
	</label>
	</li>
	<li class="ss-choice-item">
	<label>
	<span class="ss-choice-item-control goog-inline-block"><input type="radio" name="entry.186054663" value="女" id="group_186054663_2" role="radio" class="ss-q-radio" aria-label="女" required="" aria-required="true" /></span>
	<span class="ss-choice-label">女</span>
	</label>
	</li>
	</ul>
	<div class="error-message" id="951819516_errorMessage"></div>
	<div class="required-message">這是必填問題</div>
	</div>
	</div>
	</div> <div class="ss-form-question errorbox-good" role="listitem">
	<div dir="ltr" class="ss-item ss-item-required ss-text">
	<div class="ss-form-entry">
	<label class="ss-q-item-label" for="entry_948976255">
	<div class="ss-q-title">
	電話
	<label for="itemView.getDomIdToLabel()" aria-label="(必填欄位)"></label>
	<span class="ss-required-asterisk" aria-hidden="true">*</span>
	</div>
	<div class="ss-q-help ss-secondary-text" dir="ltr">請輸入連絡電話</div>
	</label>
	<input type="text" name="entry.948976255" value="" class="ss-q-short" id="entry_948976255" dir="auto" aria-label="電話請輸入連絡電話 " aria-required="true" required="" title="" />
	<div class="error-message" id="237314664_errorMessage"></div>
	<div class="required-message">這是必填問題</div>
	</div>
	</div>
	</div> <div class="ss-form-question errorbox-good" role="listitem">
	<div dir="ltr" class="ss-item ss-item-required ss-text">
	<div class="ss-form-entry">
	<label class="ss-q-item-label" for="entry_760882479">
	<div class="ss-q-title">
	信箱
	<label for="itemView.getDomIdToLabel()" aria-label="(必填欄位)"></label>
	<span class="ss-required-asterisk" aria-hidden="true">*</span>
	</div>
	<div class="ss-q-help ss-secondary-text" dir="ltr">請輸入電子郵件</div>
	</label>
	<input type="text" name="entry.760882479" value="" class="ss-q-short" id="entry_760882479" dir="auto" aria-label="信箱請輸入電子郵件 " aria-required="true" required="" title="" />
	<div class="error-message" id="1172677821_errorMessage"></div>
	<div class="required-message">這是必填問題</div>
	</div>
	</div>
	</div> <div class="ss-form-question errorbox-good" role="listitem">
	<div dir="ltr" class="ss-item ss-item-required ss-text">
	<div class="ss-form-entry">
	<label class="ss-q-item-label" for="entry_687106558">
	<div class="ss-q-title">
	信件主旨
	<label for="itemView.getDomIdToLabel()" aria-label="(必填欄位)"></label>
	<span class="ss-required-asterisk" aria-hidden="true">*</span>
	</div>
	<div class="ss-q-help ss-secondary-text" dir="ltr">請輸入信件主旨</div>
	</label>
	<input type="text" name="entry.687106558" value="" class="ss-q-short" id="entry_687106558" dir="auto" aria-label="信件主旨請輸入信件主旨 " aria-required="true" required="" title="" />
	<div class="error-message" id="1107808288_errorMessage"></div>
	<div class="required-message">這是必填問題</div>
	</div>
	</div>
	</div> <div class="ss-form-question errorbox-good" role="listitem">
	<div dir="ltr" class="ss-item ss-item-required ss-paragraph-text">
	<div class="ss-form-entry">
	<label class="ss-q-item-label" for="entry_902898693">
	<div class="ss-q-title">
	信件內容
	<label for="itemView.getDomIdToLabel()" aria-label="(必填欄位)"></label>
	<span class="ss-required-asterisk" aria-hidden="true">*</span>
	</div>
	<div class="ss-q-help ss-secondary-text" dir="ltr">請輸入信件內容</div>
	</label>
	<textarea name="entry.902898693" rows="8" cols="0" class="ss-q-long" id="entry_902898693" dir="auto" aria-label="信件內容請輸入信件內容 " aria-required="true" required=""></textarea>
	<div class="error-message" id="1504906042_errorMessage"></div>
	<div class="required-message">這是必填問題</div>
	</div>
	</div>
	</div>
	<input type="submit" name="submit" value="提交" id="ss-submit" class="jfk-button jfk-button-action " />
	</form>
	</body>
	</html>

view raw googleForm hosted with ❤ by GitHub

填完發送之後，一樣可以成功收到內容。

使用者可以自訂通知規則，讓使用者填完表單之後，通知管理者。

所以我們就可以擺脫掉醜醜的google表單，自訂喜歡的樣式。

因為資料是POST給google表單，所以會導到已收到回覆表單的確認頁面。

所以容易讓使用者離開原來的網站，所以這邊可以做一些改寫。
透過jquery post後導頁到自訂確認畫面。


	<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
	<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>測試google表單</title>
	<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
	<script type="text/javascript">

	$(function () {
	var $form = $('form');
	$form.submit(function () {
	//event.preventDefault();
	$.post($(this).attr('action'), $(this).serialize(), function (response) {
	alert('success');
	}, 'json').always(function () {
	location.href = 'thankyou.html';
	});

	return false;
	})
	});
	</script>
	</head>

	<body>
	<form method='POST' action='https://docs.google.com/forms/d/1sOkOsk6_mHcT_aT1CQ78We9KfK0iwE_a852pWyKfGCw/formResponse'>
	<a href='https://docs.google.com/forms/d/1sOkOsk6_mHcT_aT1CQ78We9KfK0iwE_a852pWyKfGCw/formResponse'>重新填寫</a>
	<div class="ss-form-question errorbox-good" role="listitem">
	<div dir="ltr" class="ss-item ss-item-required ss-text">
	<div class="ss-form-entry">
	<label class="ss-q-item-label" for="entry_9265193">
	<div class="ss-q-title">
	姓名
	<label for="itemView.getDomIdToLabel()" aria-label="(必填欄位)"></label>
	<span class="ss-required-asterisk" aria-hidden="true">*</span>
	</div>
	<div class="ss-q-help ss-secondary-text" dir="ltr">請輸入姓名</div>
	</label>
	<input type="text" name="entry.9265193" value="" class="ss-q-short" id="entry_9265193" dir="auto" aria-label="姓名請輸入姓名 " aria-required="true" required="" title="" />
	<div class="error-message" id="746091792_errorMessage"></div>
	<div class="required-message">這是必填問題</div>
	</div>
	</div>
	</div> <div class="ss-form-question errorbox-good" role="listitem">
	<div dir="ltr" class="ss-item ss-item-required ss-radio">
	<div class="ss-form-entry">
	<label class="ss-q-item-label" for="entry_951819516">
	<div class="ss-q-title">
	性別
	<label for="itemView.getDomIdToLabel()" aria-label="(必填欄位)"></label>
	<span class="ss-required-asterisk" aria-hidden="true">*</span>
	</div>
	<div class="ss-q-help ss-secondary-text" dir="ltr"></div>
	</label>

	<ul class="ss-choices" role="radiogroup" aria-label="性別 ">
	<li class="ss-choice-item">
	<label>
	<span class="ss-choice-item-control goog-inline-block"><input type="radio" name="entry.186054663" value="男" id="group_186054663_1" role="radio" class="ss-q-radio" aria-label="男" required="" aria-required="true" /></span>
	<span class="ss-choice-label">男</span>
	</label>
	</li>
	<li class="ss-choice-item">
	<label>
	<span class="ss-choice-item-control goog-inline-block"><input type="radio" name="entry.186054663" value="女" id="group_186054663_2" role="radio" class="ss-q-radio" aria-label="女" required="" aria-required="true" /></span>
	<span class="ss-choice-label">女</span>
	</label>
	</li>
	</ul>
	<div class="error-message" id="951819516_errorMessage"></div>
	<div class="required-message">這是必填問題</div>
	</div>
	</div>
	</div> <div class="ss-form-question errorbox-good" role="listitem">
	<div dir="ltr" class="ss-item ss-item-required ss-text">
	<div class="ss-form-entry">
	<label class="ss-q-item-label" for="entry_948976255">
	<div class="ss-q-title">
	電話
	<label for="itemView.getDomIdToLabel()" aria-label="(必填欄位)"></label>
	<span class="ss-required-asterisk" aria-hidden="true">*</span>
	</div>
	<div class="ss-q-help ss-secondary-text" dir="ltr">請輸入連絡電話</div>
	</label>
	<input type="text" name="entry.948976255" value="" class="ss-q-short" id="entry_948976255" dir="auto" aria-label="電話請輸入連絡電話 " aria-required="true" required="" title="" />
	<div class="error-message" id="237314664_errorMessage"></div>
	<div class="required-message">這是必填問題</div>
	</div>
	</div>
	</div> <div class="ss-form-question errorbox-good" role="listitem">
	<div dir="ltr" class="ss-item ss-item-required ss-text">
	<div class="ss-form-entry">
	<label class="ss-q-item-label" for="entry_760882479">
	<div class="ss-q-title">
	信箱
	<label for="itemView.getDomIdToLabel()" aria-label="(必填欄位)"></label>
	<span class="ss-required-asterisk" aria-hidden="true">*</span>
	</div>
	<div class="ss-q-help ss-secondary-text" dir="ltr">請輸入電子郵件</div>
	</label>
	<input type="text" name="entry.760882479" value="" class="ss-q-short" id="entry_760882479" dir="auto" aria-label="信箱請輸入電子郵件 " aria-required="true" required="" title="" />
	<div class="error-message" id="1172677821_errorMessage"></div>
	<div class="required-message">這是必填問題</div>
	</div>
	</div>
	</div> <div class="ss-form-question errorbox-good" role="listitem">
	<div dir="ltr" class="ss-item ss-item-required ss-text">
	<div class="ss-form-entry">
	<label class="ss-q-item-label" for="entry_687106558">
	<div class="ss-q-title">
	信件主旨
	<label for="itemView.getDomIdToLabel()" aria-label="(必填欄位)"></label>
	<span class="ss-required-asterisk" aria-hidden="true">*</span>
	</div>
	<div class="ss-q-help ss-secondary-text" dir="ltr">請輸入信件主旨</div>
	</label>
	<input type="text" name="entry.687106558" value="" class="ss-q-short" id="entry_687106558" dir="auto" aria-label="信件主旨請輸入信件主旨 " aria-required="true" required="" title="" />
	<div class="error-message" id="1107808288_errorMessage"></div>
	<div class="required-message">這是必填問題</div>
	</div>
	</div>
	</div> <div class="ss-form-question errorbox-good" role="listitem">
	<div dir="ltr" class="ss-item ss-item-required ss-paragraph-text">
	<div class="ss-form-entry">
	<label class="ss-q-item-label" for="entry_902898693">
	<div class="ss-q-title">
	信件內容
	<label for="itemView.getDomIdToLabel()" aria-label="(必填欄位)"></label>
	<span class="ss-required-asterisk" aria-hidden="true">*</span>
	</div>
	<div class="ss-q-help ss-secondary-text" dir="ltr">請輸入信件內容</div>
	</label>
	<textarea name="entry.902898693" rows="8" cols="0" class="ss-q-long" id="entry_902898693" dir="auto" aria-label="信件內容請輸入信件內容 " aria-required="true" required=""></textarea>
	<div class="error-message" id="1504906042_errorMessage"></div>
	<div class="required-message">這是必填問題</div>
	</div>
	</div>
	</div>
	<input type="submit" name="submit" value="提交" id="ss-submit" class="jfk-button jfk-button-action " />
	</form>
	</body>
	</html>

view raw googleFormv2 hosted with ❤ by GitHub

延伸閱讀：
- Google表單自動回信使用FormEmailer

2014年12月29日星期一

MSSQL 透過Database Mail發送信件

MSSQL 在【管理】>【Database Mail】提供發信的功能。

透過組態精靈設定：

啟用Database Mail 功能：

點選加入設定你要使用的SMTP帳戶。

新增DatabaseMail帳戶，請設定容易辨識的名稱，在發信時會用到，目前範例為DBMail。

測試是否設定正確：

使用預存程序發送郵件：

	DECLARE @mailitem_id1 varchar(100)

	DECLARE @ErrorID INT
	DECLARE @RtnCode INT
	EXEC @RtnCode =msdb.dbo.sp_send_dbmail
	@recipients = 'admin@gmail.com',
	@profile_name = 'DBMail',
	@subject = 'TestMail From Database',
	@body_format='HTML',
	@body = '<B>TestMail</B><a>Content</a>',
	@mailitem_id=@mailitem_id1 output

	--錯誤內容
	SET @ErrorID = @@ERROR
	IF @RtnCode <> 0 BEGIN
	SELECT @ErrorID
	END
	ELSE
	BEGIN
	SELECT 'success'
	END

view raw DatabaseMail hosted with ❤ by GitHub

但仔細看一下發信的內容使用到了msdb的資料庫權限，所以不是管理者權限的帳號，
必須授權msdb下的DatabaseUserRole。

2014年12月17日星期三

MSSQL修改設計Table不允許儲存變更

"不允許儲存變更，您所做的變更要求下列資料表必須先卸除然後再重新建立…”

其實是環境設定被預設值保護住了，將此選項拿掉就可以了。

2014年12月13日星期六

JQuery跨網域抓取頁面

同上篇說明，還是要透過第三方程式來處理。

以下為yahoo apis的範例：

var yql = '<a href="http://query.yahooapis.com/v1/public/yql?q=">http://query.yahooapis.com/v1/public/yql?q=</a>' + encodeURIComponent('select * from html where url="' + site + '"') + '&format=xml&callback=cbFunc';
編碼範例：<a title="http://jsfiddle.net/ptskl/bysubkhh/" href="http://jsfiddle.net/ptskl/bysubkhh/">http://jsfiddle.net/ptskl/bysubkhh/</a>

http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20html%20where%20url%3D%22http%3A%2F%2Fwww.systemlead.com%22&format=xml&callback=cbFunc
貼上以上連結就可以取到網頁資訊。

JQuery讀取跨網域XML的方法

Javascript沒辦法直接跨網域存取資料。

可能要透過本地程式處理，或是透過第三方程式來處理。

常見的jQuery外掛，如:JGFeed

引用自https://gist.github.com/psynewave/4220821

	/*
	* jGFeed 1.0 - Google Feed API abstraction plugin for jQuery
	*
	* Copyright (c) 2009 jQuery HowTo
	*
	* Licensed under the GPL license:
	* http://www.gnu.org/licenses/gpl.html
	*
	* URL:
	* http://jquery-howto.blogspot.com
	*
	* Author URL:
	* http://me.boo.uz
	*
	*/
	(function($){
	$.extend({
	jGFeed : function(url, fnk, num, key){
	// Make sure url to get is defined
	if(url == null) return false;
	// Build Google Feed API URL
	var gurl = "http://ajax.googleapis.com/ajax/services/feed/load?v=1.0&callback=?&q="+url;
	if(num != null) gurl += "&num="+num;
	if(key != null) gurl += "&key="+key;
	// AJAX request the API
	$.getJSON(gurl, function(data){
	if(typeof fnk == 'function')
	fnk.call(this, data.responseData.feed);
	else
	return false;
	});
	}
	});
	})(jQuery);

view raw jGfeed.js hosted with ❤ by GitHub

有趣的是，其實他還是透過google api去處理跨網域資料存取。

以下為測試範例：

	<html>
	<head>
	<title>測試</title>
	</head>
	<body>
	<div id='rss-styled'></div>
	<script>
	function showBlogData(data) {
	$("#rss-styled").append('<ul>');
	$.each(data.responseData.feed.entries, function(i, item) {
	var htmlStr = '<li><a href="'+item.link+'">'+item.title+'</a> <span class="news-date">'+item.publishedDate+'</span><br>'+item.contentSnippet+'</li>';
	$("#rss-styled").find('ul').append(htmlStr);
	});
	}

	</script>
	<script src="http://ajax.googleapis.com/ajax/services/feed/load?v=1.0&callback=showBlogData&q=http://edm.systemlead.com/syndication.axd">
	</body>
	</html>

view raw showRssData.html hosted with ❤ by GitHub

2014年12月10日星期三

MVC使用錨點

作法一：使用@Html.ActionLink指令
- @Html.ActionLink("linkText","actionName","controlName","protocol","hostName","fragment",routeValues,htmlAttributes)
- @Html.ActionLink("測試錨點一", "feature", "Home", null, null, "test1", null, new {@class="123"})
- 產生的網址為 /Home/feature/#test1
作法二：直接串在原網址後面
- 測試錨點一
作法三：改路由規則
以下路由規則為示意
- routes.MapRoute("fragment", "{action}.html/{id}#{target}", defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional });