Web Stuff

TQC ASP.NET證照考試

課程屬性：電腦與通訊學系大學部專業選修課程
課程概要：
本課程主要教授以ASP(Active Server Page)環境設計網際網路(Web)應用程式之相關知識與技術。將從HTML語言基礎開始，介紹Javascript、XML與CSS等相關技術與網頁和傳統程式語言結合的方式，使同學能夠具備辨識與讀取網頁及網頁程式的基本能力。之後將以VB程式及SQL語言為主，介紹伺服端程式設計之原理、環境與資料庫處理技術；亦將介紹AJAX機制與延伸工具項的原理與使用技巧。
參考書籍：
1.ASP.NET 2.0 網頁程式設計範例教本，陳會安著，學貫行銷股份有限公司出版
2.ASP.NET 2.0 由初學邁向程式設計于還莒、陳世訓編著金禾資訊出版
3.ASP.NET AJAX 應用剖析立即上手，董大偉著，博碩文化出版
4.Visual Basic 2005 網路程式設計，黃嘉輝編著，文魁資訊出版
5.Windows Mobile 6 應用程式設計與操控實務，許清榮、買大誠，博碩文化出版
6.SQL Server 2005 資料庫管理實務，方盈著，博碩文化出版
7.Access 2003 程式設計，位元文化編著，文魁資訊出版

8. AJAX

暖身運動：製作本課程點名單網頁 (名單)

1.資料庫檔案建置

2. Visual Web Developer 軟體操作

3. ASP 網站運作流程與原理

4. 查看本機 IP 的 DOS指令：ipconfig

5.查看本機 Port 使用狀況的DOS指令：netstate -a

單元一：網路點名系統相關網頁製作 (資料庫)

A.首頁

1.日期顯示； 2.訪客人數； 3.系單選顯示； 4.系課程顯示

B.課程資訊

1.班級課表：系所(簡稱)→班級→課程&時間&教室...

2.教室課表；系所(簡稱)→教室→課程&時間&教室...

3.老師課表；

4.同學課表；

5.今天課表；

※.點名網頁

1.登入網頁； 2.電子點名單組成； 3.點名資料讀寫

單元二：問卷填寫式網頁

1.資料庫設計：題庫、答案資料

2.題目顯示、選項設計

3.版面與表格設計

4.資料上傳

5.後台管理頁面

A.登入頁面

B.原始資料檢視編輯，密碼修改，後門管制

C.統計報表，後門管制

單元三：報名資料填寫網頁(如這個頁面)

1.資料庫設計：個人資料項目，如姓名、學號、電話、電郵以及檔案上傳

2.資料驗證控制項的使用：A.有無資料、B.電子郵件、C.電話

3.單選介面Radioboxlist(如葷素)與複選介面Checkboxlist

4.上傳時間紀錄

3.登入IP檢視 ( Dim IPs As String = Request.UserHostAddress 'IPs=客戶端IP )

單元四：網路預約系統(以訂房旅館為例...)

參考程式碼：

單元五：電影院座位(使用SQL資料庫，Ajax...)

1.操作介面：程式產生勾選項目

2.SQL資料庫建置

3.預設資料產生

4.資料轉勾選：讀出

5.勾選轉資料：寫入

6.統計值

單元六：勤務班表管理系統

單元七：網路考試網頁(點名單)

1.身分認證

2.時間認證

3.IP認證

3.考卷上傳

單元八：Web Service 網路服務 (測試網站)

1. Web Service的目的與意義

2.操作：

A.建立ASP.NET Web 服務網站

B.上傳至測試網站

C.叫用Web Service

D.修改服務內容

E.更新服務測試新功能

F.溫標轉換(數學)

G.學號姓名查詢(資料庫)

這是使用ADO.NET的方法，需匯入命名空間

Imports System.Data

Imports System.Data.Oledb

副程式如下：

<WebMethod()> _

Public Function ID2Name(ByVal ID As String) As String

Dim Con As New OleDbConnection

Con.ConnectionString = "Provider = Microsoft.Jet.OLEDB.4.0; Data Source =" & Server.MapPath("App_Data/db.mdb")

Con.Open()

Dim Cmd As OleDbCommand = New OleDbCommand("Select [學號], [姓名] From [M]", Con)

Dim R As OleDbDataReader = Cmd.ExecuteReader

Dim N As String = ""

While R.Read

If R.Item(0).ToString = ID Then

N = R.Item(1).ToString

Exit While

End If

End While

Return N

End Function

單元九：網路地圖程式

UrMap 範例

GoogleMap 範例

修改以下範例成為你需要的地區的網路地圖網頁：

http://code.google.com/intl/zh-TW/apis/maps/documentation/examples/map-simple.html

修改以下範例成為可以點出經緯度座標的程式：

http://code.google.com/intl/zh-TW/apis/maps/documentation/examples/event-arguments.html

修改以下範例成為標示特定地點的網頁：

http://code.google.com/intl/zh-TW/apis/maps/documentation/examples/map-markers.html

修改以下範例成為有線條顯示的網頁：

http://code.google.com/intl/zh-TW/apis/maps/documentation/examples/polyline-simple.html

將經緯度轉為平面座標的網路服務

1. 選取『網站』→『加入Web參考

2. URL(網址)輸入：http://ycc.tsu.edu.tw/trans/Trans.asmx

3. 將出現的參考名稱改為簡單的名稱，如 Coor，之後按下『加入參考』按鍵

4. 方案總管內會出現 App_WebReferences的Coor新項目

5. 在程式內宣告服務物件，測試轉換一個經緯度字串，程式如下：

Dim C As New Coor.Service
Dim A As String = C.Trans("25, 120")
Response.Write(A)
網頁回應：

2768300.219,197181.312

(即 Y,X 公尺座標)

使用此項服務可以將自 Google Maps 取得的經緯度座標轉換為如上以『公尺』為單位的座標，執行計算距離等功能。

如果你取得 Google的座標點物件(GLatLng) ，可以直接放到上述程式碼的 C.Trans(GLatLng)裡面轉換。

單元十：使用 HTTP 網路協定的 VB.NET 通訊程式

匯入命名空間(函式庫)

Imports System.Net
Imports System.Text
Imports System.IO

伺服端：
Dim Sv As New HttpListener '建立一個 HTTP 監聽器
Sv.Prefixes.Add("http://*:8000/") '指定以通訊埠 8000 收訊
Sv.Start() '啟動監聽到達本機通訊埠 8000 的 HTTP 訊息
While True '無窮迴圈，只有程式結束時會停止
Dim Ct As HttpListenerContext = Sv.GetContext '自監聽器取得客戶呼叫內容
Dim Rq As HttpListenerRequest = Ct.Request '取得 Request 物件
Dim Rp As HttpListenerResponse = Ct.Response'取得 Response 物件
Dim Buf As String = Rq.RawUrl '收到的客戶訊息

'在此依據收到的客戶訊息產生回覆，包括：計算或查詢資料庫等等
Dim b() As Byte = Encoding.Default.GetBytes("OK " + Buf) '回覆客戶的文字訊息轉為二進位碼
Rp.ContentLength64 = b.Length '二進位碼的長度
Dim out As Stream = Rp.OutputStream '建立回傳客戶的資料流
out.Write(b, 0, b.Length) '回傳
out.Close()
End While
Sv.Stop()

客戶端：

Dim Rq As WebRequest = HttpWebRequest.Create(網址+通訊埠+上傳訊息) '對伺服器發出訊息, ex: http://ycc.tsu.edu.tw:8000/hello
Dim Rp As WebResponse = Rq.GetResponse '取得來自伺服器的回應
Dim S As Stream = Rp.GetResponseStream '取得來自伺服器的資料流
Dim R As StreamReader = New StreamReader(S, Encoding.Default) '取得來自伺服器的資料流讀取物件
顯示物件 = R.ReadToEnd '顯示來自伺服器的回應
　

請試用以上的程式核心建立一個簡單的聊天看板。
　

URL編碼與解碼語法：

In Normal VB:

Dim S As String = Uri.EscapeDataString("張逸中")
Dim T As String = Uri.UnescapeDataString(S)

In ASP Pages:
Dim S As String = Server.UrlEncode("張逸中")
Dim T As String = Server.UrlDecode(S)

for independent Thread

單元十一：AJAX聊天室 (VWD 2008)

網頁模式的聊天室的必須可以讓遠端發言者的資料主動的出現在你的網頁上，不能依賴使用者自己一直按重新整理按鍵來取得新資訊，否則就與電子郵件一樣了！這表示網站必須有辦法主動(而且自動的)更新客戶的網頁，這就必須使用到AJAX機制的協助。基本上就是以計時器定時檢查使用者的資料版本(時間)與伺服端的最新資料版本是否相同，如果不同，資料會在使用者未動作的情況下自動更新。

請先布置物件如下：

1.在網頁最前(上)端布置一個ScriptManager，也就是一般介紹AJAX的書上說的AJAX引擎，其內包含執行AJAX需要的JavaScript程式碼。

2.緊接著布置一個Timer，此物件會在伺服器端執行檢查資料變化的情況，有需要時主動改變網頁內容。

3.再布置一個UpdatePanel，此物件劃定頁面必須更新的範圍，可以避面整頁更新造成的頁面閃爍。

4.在UpdatePanal裡面布置一個文字看板、發言文字框與按鍵。

並將UpdatePanel1的屬性調整：

UpdateMode->Conditional

ChildrenAsTRiggers->False

並在Page_Load事件中寫：(註冊Timer1為非同步元件)

Me.ScriptManager1.RegisterAsyncPostBackControl(Timer1)

這會使得更新動作完全由程式控制，否則這些元件常常會意外的觸發不必要的更新動作。

程式碼如下：

單機電腦測試多人連線的方式：

1.按下Visual Studio的開始偵錯鈕(Play)，出現瀏覽器視窗後複製其網址(類似：http://localhost:1234...)

2.開啟另一個瀏覽器視窗，將上述網址貼入網址列之後連線即可

說明：

Visual Studio軟體的原理是先執行一個虛擬的網站伺服器，我們設計的網站就在此伺服器中執行，

在使用者第一次開始偵錯之後到整個軟體關閉之前，這個伺服器一直處於運作中的狀態，

所以網路可連線的範圍(本機電腦)內所有瀏覽器都視此為一個可連線的網站！

以上程式上有很多改進的空間，譬如：

1.應該加入發言者的名稱，就是簡單的登入表明身分，之後每次發言要加發言者名稱。

2.總和的留言內容會持續變大，可以設定限制總留言(Application("W"))的最高字數或行數。

3.這種機制沒有存檔功能，Application僅存在於記憶體，最終不會記錄到某個檔案，可加入存檔功能。

有關 DataSource 之SQL語法

宣告連結本站的資料庫

Dim Ads As New AccessDataSource("~/App_Data/db.mdb", "")

SQL指令語法範例：藍字為變數

新增：(3 欄資料)

Ads.InsertCommand = "Insert Into [Table] ([C1], [C2], [C3]) Values('" + D1 + "', '" + D2 + "', '" + D3 + "')"

Ads.Insert()

更新(編輯)：

Ads.UpdateCommand = "Update [Table] set [C1]='"+D1+"', [C2]='"+D2+"' Where [C0]='"+D0+"'

Ads.Update()

刪除：

Ads.DeleteCommand = "Delete From [Table] Where [C0] = '"+D0+"'

Ads.Delete()

使用ADO.NET的程式碼資料庫操作

for Access Database

'1. Imports System.Data.OleDb

'2.宣告資料庫連結物件 OleDbConnection

Dim Con As New OleDbConnection
Con.ConnectionString = "Provider=Microsoft.Jet.OLEDB.4.0; Data Source=" + Server.MapPath("App_Data\db.mdb")
Con.Open()

'3.宣告命令物件 OleDbCommand

Dim Cmd As OleDbCommand = New OleDbCommand(SQL指令, Con)

'4-1.產生讀取器物件

Dim R As OleDbDataReader = Cmd.ExecuteReader()

R.Read '讀一行資料

'4-2.修改資料庫

'產生Insert, Delete or Update的SQL Command，如：

Dim Cmd As OleDbCommand = New OleDbCommand(SQL指令, Con)

Cmd.ExecuteNonQuery() '執行Command

'5. 關閉資料庫連結

'Con.Close

'指定『本網站』App_Data內資料庫的寫法可以是：

Con.ConnectionString = "Provider=Microsoft.Jet.OLEDB.4.0; Data Source=|DataDirectory|db.mdb"

for Sql Database

1. Imports System.Data.SqlClient

2.宣告資料庫連結物件 OleDbConnection

Dim Cs As String = "Data Source=.\SQLEXPRESS;AttachDbFilename=" + Server.MapPath("App_Data\Database.mdf") + _

";;Integrated Security=True;Connect Timeout=30;User Instance=True"
Dim Con As New SqlConnection(Cs)
Con.Open()

3.宣告命令物件 OleDbCommand

Dim Cmd As SqlCommand = New SqlCommand(SQL指令, Con)

4-1.產生讀取器物件

Dim R As SqlDataReader = Cmd.ExecuteReader()

R.Read '讀一行資料

4-2.修改資料庫

產生Insert, Delete or Update的SQL Command，如：

Dim Cmd As SqlCommand = New SqlCommand(SQL指令, Con)

Cmd.ExecuteNonQuery() '執行Command

5. 關閉資料庫連結

Con.Close()

指定『本網站』App_Data內資料庫的寫法可以是：

AttachDbFilename=|DataDirectory|Database.mdf")

使用 DataAdapter 與 Dataset(可省略Connection & Command)

for Access database:

Dim Adp As New OleDbDataAdapter(SQL指令, ConnectionString)

for Sql database:

Dim Adp As New SqlDataAdapter(SQL指令, ConnectionString)
Dim ds As New DataSet
Adp.Fill(ds)

'資料叫用方式(例)：

ds.Tables(0).Rows(1).Item(1).ToString

'資料叫用方式(Gridview)：

GridView1.DataSource = ds
GridView1.DataBind()

Example:

Dim SQL As String = "Select * From M Where 班級='幼教系一A'"
Dim Cons As String = "Provider=Microsoft.Jet.OLEDB.4.0; Data Source=|DataDirectory|db.mdb"
Dim Adp As New OleDbDataAdapter(SQL, Cons)
Dim ds As New DataSet
Adp.Fill(ds)

音效播放器程式

Dim P As Media.SoundPlayer = New Media.SoundPlayer(Server.MapPath("檔名.WAV"))
P.Play()

網頁繪圖程式

Javascript 向量式繪圖模組教學與下載網站：http://www.walterzorn.com/jsgraphics/jsgraphics_e.htm