篇名 : 作者 : 喻千榮大安高工電子三甲佟建達大安高工電子三甲陳逸樵大安高工電子三甲 指導老師 張漢明老師
壹 前言 我們製作的專題是部落格網站, 什麼是 部落格 呢? 部落格 是一種能讓使用者在網頁上發表意見, 並且提供回應的網路平台 ; 使用者不必具備太多電腦知識或網頁撰寫技巧, 就可以輕鬆做出一個屬於自己的個人站台, 這似乎和傳統的 bbs, 就是所謂的 電子告示板系統 差不多, 但它比 bbs 功能更強的地方在於, 它是 全網頁作業 方式, 使用者可以在網頁上輕鬆地張貼文章 上傳圖片 自訂版型, 或引用文章, 它最吸引網友的, 除了是滿足網友的 書寫 與 發表 欲望之外, 更重要的在於它的全個人化功能, 用戶可以自己設計出獨具個人風格的網路日誌形式 部落格亦為網誌, 可說是目前網路上最火紅的網站 一 專題製作方法 步驟與進度 1. 寫計畫書並蒐集相關資料 2. 探討理論並做程式之規劃 3. 程式設計 編撰 4. 程式整合並測試整體的功能 檢錯 5. 呈現成品 二 預期成果本專題預期完成一個 blog 網站, 實用且便利的網站, 能夠讓人留言 打網誌 分享照片和音樂 等等, 就像是現在的奇摩部落格, 希望能做的比他更實用, 現在的部落格網站越來越多, 功能也越來越廣, 希望我們也能做出個令人滿意的部落格 1
貳 正文 : Blog 系統的設置是分為兩個方向加以介紹, 分為系統規劃和功能實作, 整個架構 又分成首頁, 文章瀏覽, 文章回應.. 以下用圖一加以說明 圖 1: 設計流程 1. 網誌首頁 : 首頁功能可以讓你輸入生日 星座 職業等等 讓登入的人能更瞭解你 圖 2: 網誌首頁頁面部份 : 你會發現頁面套用了 masterpage, 包含了兩個部份, 一個部份是基本資料, 另一部分是寫自己的文章, 以下分兩個來介紹 : 2
一 基本資料 基本資料完成的畫面, 如圖 3 所示 基本資料的原始程式碼, 如表 1 所示 圖 3: 基本資料 基本資料的原始程式碼, 如表 1 所示 表 1 基本資料程式碼 Partial Class profile Inherits System.Web.UI.UserControl Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load If My.User.IsAuthenticated = True Then 如果已經登入, 顯示的是自己的資料, 否則是別人的資料 Me.HiddenField1.Value = My.User.Name Else Me.HiddenField1.Value = Request.QueryString("BlogHostName") End If Me.Image1.ImageUrl = "ImageServices.ashx?UserName=" & Me.HiddenField1.Value 處理照片 End Sub End Class 二 發表文章 : 1. 你所發表的東西會放在下面, 可以點回應來進去發表你的感想 2. 發表文章完成的畫面, 如圖 4 所示 3
圖 4: 發表文章 發表文章的原始程式碼, 如表 2 所示 表 2 發表文章程式碼 SelectCommand="SELECT TOP (100) PERCENT a. 編號, a. 標題, a. 內文, a. 建立時間, a. 帳號, a. 文章分類, b.n AS 回應數量 FROM dbo. 文章 AS a left JOIN (SELECT COUNT( 編號 ) AS N, 回應文章編號 FROM dbo. 文章回應 GROUP BY 回應文章編號 ) AS b ON a. 編號 = b. 回應文章編號 WHERE (a. 帳號 = @ 帳號 ) ORDER BY a. 建立時間 DESC"> <SelectParameters><asp:ControlParameter ControlID="hdf_account" Name=" 帳號 " PropertyName="Value" Type="String" /> </SelectParameters> </asp:sqldatasource> <asp:hiddenfield ID="hdf_account" runat="server" /> 這段程式碼的重點在金色 2. 文章選擇 : 1. 當你發表超過一篇的時候, 你可以選擇其中一篇來回味, 上面也有建立的 時間以及發表人的帳號當時的心情等等 2. 文章選擇完成的畫面, 如圖 5 所示 圖 5: 文章選擇 4
文章選擇的原始程式碼, 如表 3 所示 表 3 文章選擇程式碼 因為過濾條件 (selectcommand), 中的值是我的帳號, 因此會篩選出我作品而已 @ Control Language="VB" AutoEventWireup="false" CodeFile="BLOG.ascx.vb" Inherits="BLOG" % <asp:repeater ID="Repeater1" runat="server" DataSourceID="SDS_BLOG_View"> <ItemTemplate> <table border="0" width="100%" cellspacing="0" cellpadding="0"> <tr> <td width="100%"> <table border="0" width="100%" cellspacing="0" cellpadding="0"> <tr > <td width="50%" align=left ><font size=5><br><b><%#eval(" 標題 ")%><B></td> 注意 : 特別語法 EVAL(.) ( 後有解釋用法 ) 3. 個人資訊修改 : 1. 當你發現你有所要更改的, 像暱稱, 喜好等等, 可以利用這個功能, 隨時去 更新 2. 個人資訊修改的畫面, 如圖 6 所示 圖 6: 個人資訊修改 個人資訊修改的原始程式碼, 如表 4 所示 5
表 4 個人資訊修改程式碼 %@ Page Language="VB" MasterPageFile="~/MasterPage.master" AutoEventWireup="false" CodeFile="PersonalInfo.aspx.vb" Inherits="maintain_PersonalInfo" title="untitled Page" %> <asp:content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server"> <asp:sqldatasource ID="SDS_PersonalInfo" runat="server" ConnectionString="<%$ ConnectionStrings:ConnectionString %>" DeleteCommand="DELETE FROM [ 個人資訊 ] WHERE [ 編號 ] = @ 編號 " InsertCommand="INSERT INTO [ 個人資訊 ] ([ 帳號 ], [ 生日 ], [ 星座 ], [ 職業 ], [ 個人簡介 ], [ 喜好 ]) VALUES (@ 帳號, @ 生日, @ 星座, @ 職業, @ 個人簡介, @ 喜好 )" SelectCommand="SELECT * FROM [ 個人資訊 ] WHERE ([ 帳號 ] = @ 帳號 )" UpdateCommand="UPDATE [ 個人資訊 ] SET [ 網誌標題 ]=@ 網誌標題, [ 帳號 ] = @ 帳號, [ 生日 ] = @ 生日, [ 星座 ] = @ 星座, [ 職業 ] = @ 職業, [ 個人簡介 ] = @ 個人簡介, [ 喜好 ] = @ 喜好 WHERE [ 編號 ] = @ 編號 "> <DeleteParameters> <asp:parameter Name=" 編號 " Type="Int32" /> </DeleteParameters> <UpdateParameters> <asp:parameter Name=" 網誌標題 " Type="String" /> <asp:parameter Name=" 帳號 " Type="String" /> <asp:parameter Name=" 生日 " Type="String" /> <asp:parameter Name=" 星座 " Type="String" /> <asp:parameter Name=" 職業 " Type="String" /> <asp:parameter Name=" 個人簡介 " Type="String" /> <asp:parameter Name=" 喜好 " Type="String" /> <asp:parameter Name=" 編號 " Type="Int32" /> </UpdateParameters> <SelectParameters> <asp:controlparameter ControlID="HiddenField1" Name=" 帳號 " PropertyName="Value" Type="String" /> </SelectParameters> <InsertParameters> 當我們進行更新, 電腦如何知道是更新誰的資料? 是透過隱藏欄位, 依淡 page_load 把登入的使用者名稱塞入 HiddenField1 時則電腦就會抓這個人的資訊 4. 網誌內容維護 1. 點選個人網誌後, 會發現你只能去修改自己的東西, 對於自己的網誌也較 有保障 6
2. 網誌內容維護的畫面, 如圖 7 所示 圖 7: 網誌內容維護 網誌內容回覆的原始程式碼, 如表 5 所示 表 5 網誌內容回覆程式碼 %@ Page Language="VB" ValidateRequest="false" MasterPageFile="~/MasterPage.master" AutoEventWireup="false" CodeFile="BLOG_Maintain.aspx.vb" Inherits="BLOG_Maintain" title=" 維護網誌 " %> <%@ Register Assembly="StudyHost.WebControls.HtmlEditor" Namespace="StudyHost.WebControls" TagPrefix="cc1" %> <asp:content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server"> <br /> <asp:panel ID="Panel2" runat="server" Height="50px" HorizontalAlign="Center" Width="100%"> <asp:gridview ID="GridView1" runat="server" AllowPaging="True" AutoGenerateColumns="False" CellPadding="4" DataKeyNames=" 編號 " DataSourceID="SDS_ 文章 " Font-Size="X-Small" ForeColor="#333333" GridLines="None" PageSize="5" Width="98%"> <FooterStyle BackColor="#1C5E55" Font-Bold="True" " 7
SortExpression=" 建立時間 " /> <asp:boundfield DataField=" 文章分類 " HeaderText=" 文章分類 " SortExpression=" 文章分類 " /> <asp:commandfield ButtonType="Image" DeleteImageUrl="~/image/clearicon.gif" ShowDeleteButton="True" /> </Columns> <RowStyle BackColor="#E3EAEB" /> <EditRowStyle BackColor="#7C6F57" /> <SelectedRowStyle BackColor="#C5BBAF" Font-Bold="True" ForeColor="#333333" /> <PagerStyle BackColor="#666666" ForeColor="White" HorizontalAlign="Center" /> <HeaderStyle BackColor="#1C5E55" Font-Bold="True" ForeColor="White" /> <AlternatingRowStyle BackColor="White" /> </asp:gridview> </asp:panel> <asp:sqldatasource ID="SDS_ 文章 " runat="server" ConnectionString="<%$ ConnectionStrings:ConnectionString %>" DeleteCommand="DELETE FROM [ 文章 ] WHERE [ 編號 ] = @ 編號 " InsertCommand="INSERT INTO [ 文章 ] ([ 標題 ], [ 內文 ], [ 建立時間 ], [ 帳號 ], [ 文章分類 ]) VALUES (@ 標題, @ 內文, @ 建立時間, @ 帳號, @ 文章分類 )" SelectCommand="SELECT * FROM [ 文章 ] WHERE ([ 帳號 ] = @ 帳號 ) ORDER BY [ 編號 ] DESC" UpdateCommand="UPDATE [ 文章 ] SET [ 標題 ] = @ 標題, [ 內文 ] = @ 內文, [ 建立時間 ] = @ 建立時間, [ 帳號 ] = @ 帳號, [ 文章分類 ] = @ 文章分類 WHERE [ 編號 ] = @ 編號 "> <DeleteParameters> <asp:parameter Name=" 編號 " Type="Int32" /> </DeleteParameters> <asp:parameter Name=" 標題 " Type="String" /> <asp:parameter Name=" 內文 " Type="String" /> <asp:parameter Name=" 建立時間 " Type="String" /> <asp:parameter Name=" 帳號 " Type="String" /> <asp:parameter Name=" 文章分類 " Type="String" /> <asp:parameter Name=" 編號 " Type="Int32" /> </UpdateParameters> 我們依樣用了之前的技巧, 用隱藏涵數作為它的參數, 電腦就會找的你所要的資料 8
參 結論 1. 結論 在製作這個 BLOG 的過程中, 我們這組可是碰到了不少的困難, 一開始必須先和指導我們的老師把彼此的時間都搞定, 接下來碰到了最難的問題 : 瞭解程式碼 雖然這個程式使用的是我們時所學過的 VB 語法, 但是還是蠻困難的, 現在礙於要先完成報告, 所以我們的進度不得不耽擱一下, 目前大概只做了一小部份, 還是有些許的問題必須要跟我們的指導老師討論一下, 等到這些問題解決後, 相信我們的進度會越來越快 在專題製作的過程中, 我了解到團隊合作的重要性, 因為製作這個專題非常困難, 一個人獨立完成是不容易的, 必須要靠團隊合作才有可能完成 我們這組使用的軟體是 ASP.NET,BLOG 單元裡的內容看似簡單, 其實還是有許多東西是以前沒學過的, 讓我們藉著製作專題的機會學到更高深的語法, 這大概也是老師要我們製作專題的目的吧 我們這組選的專題題目製作方式跟別組有些許的不同, 別組的專題都必須要同時有電路板跟程式碼, 也就是硬體與軟體都必須要具備, 我們這組則是只要有軟體的部份就好了, 但是這也代表著我們這組的專題的程式碼部分比別組的專題還要更複雜, 有些語法老師也不一定有看過, 但是這也是一個很棒的挑戰, 如果真的能夠順利完成, 一定會有非常大的成就感, 畢竟以前實習作的成品都是比較偏向實驗性的, 這次是要作具有功能性的, 我們這組每個人都非常努力的想要完成它 當然啦, 光有那個心是不夠的, 還是有許多關於程式語法的問題有待我們向老師請教, 或者是自己去找與這方面相關的資料來了解這個程式 2. 建議 BLOG 是一個很方便且實用的網站, 很受到大家歡迎, 但一般人不會想到自己架設 BLOG, 這次我們這組想嘗試架設 BLOG, 中間遇到了不少困難, 主要原因還是 VB 語法使用上的不熟悉, 儘管我們過去學過些 VB 語法, 但也還不能夠完全應用在 ASP.NET 上,VB 語法需要配合到 ASP.NET 的控制項, 跟我們過去學的 VB 語法上有些差異, 以致於完全需要程式設計的 BLOG 製作, 讓我們完全沒有頭緒 ; 建議想做此專題的初學者們, 應先多認識 VB 語法與 ASP.NET 的使用, 從頭開始學習, 可以買市面上的範例書參考, 不需要買太進階的, 從簡單的開始學起就好, 不要一開始就買了本很困難的書, 弄到自己看不懂 9
肆 引註資料 [1] 張瑞立 (2007):ASP.NET2.0 教戰手冊範例集 台北市 : 文魁資訊股份有限公司發行 [2] 董大偉 (2006):ASP.NET2.0 深度剖析範例集 台北縣 : 博碩文化股份有限公司發行 [3] 董大偉 許雅婷 (2005):Visual Basic2005 程式設計與案例剖析 台北市 : 旗標出版股份有限公司發行 [4] 南台科技大學 :ASP.NET 線上教材 民 98 年 1 月 2 日, 取自 : http://elearning.stut.edu.tw/information/aspnet/asp.net1/index_1.htm [5] 南台科技大學 :VB.Net 語法 民 98 年 1 月 2 日, 取自 : http://elearning.stut.edu.tw/information/aspnet/asp.net1/index_2.htm [6] 維基百科 : 自由的百科全書 民 98 年 1 月 2 日, 取自 : http://zh.wikipedia.org/w/index.php?title=%e9%a6%96%e9%a1%b5&variant=zh-t w 10