王冠鋁業股份有限公司之網頁開發

(1)

I

摘要

台灣的鋁製品產業日發興盛，許多產品的零組件加工都需要仰賴精緻的加工與客製化處理，但隨著時代與資訊科技的進步，鋁製品產業也逐漸向國際化經營發展。現今有許多知名鋁製品產業都需要透過網頁來呈現公司的產品與製程能力，因此，一個完整且詳細的網頁來介紹公司是不可或缺的。因此，本專題與位於高雄的一家王冠鋁業合作，重新設計一個王冠鋁業的網站，以系統分析技術去進行需求分析，網站以及後台的開發工具都以 Dreamweaver 製作，並透過 MySQL 資料庫建置其網站，網站的功能有詳細的公司介紹及產品資訊，並提供連絡、交通方式，其目的就是期望有王冠鋁業能有一個專業的網站，透過網頁能將公司資訊傳遞到網路中，讓有需要的客戶第一時間了解王冠鋁業，並與王冠鋁業合作，未來將進一步完成多國語言版本，讓公司資訊能透過網站往國際化發展。關鍵字：王冠鋁業、國際化、鋁製品、網頁

(2)

II

摘要_{... I} 目錄_{... II} 表目錄_{... III} 圖目錄_{... IV} 第一章_{緒論 ... 1} 1-1 研究背景與動機 ... 1 1-2 目的 ... 2 1-3 限制 ... 2 第二章_{文獻探討 ... 3} 2.1 王冠鋁業簡介 ... 3 2-2 鋁業網站探討 ... 4 2.3 程式設計與網頁頁面美工設計軟體介紹 ... 29 第三章_{專題設計與規劃 ... 33} 3.1 專題規劃與目標 ... 33 3.2 系統開發方法 ... 34 3.3 系統藍圖描述 ... 36 3-4 專題設備及工具 ... 38 3-5 專題時程規劃與分工 ... 39 第四章_{專題成果 ... 41} 4-1 需求分析 ... 41 4-2 資料庫表格設計 ... 42 4-3 系統分析 ... 43 4-4 循序圖 ... 47 4-5 系統介紹 ... 50 第五章_{結論與建議 ... 56} 5-1 結論 ... 56 5-2 建議 ... 56 5-3 未來研究方向 ... 56 參考文獻_{... 57} 附錄_{... 58}

(3)

III

表目錄

表 3-1 本專題進行流程表_{... 35} 表 3-2 專題文件製作規劃_{... 38} 表_{3-3 系統開發環境規劃 ... 38} 表 3-4 伺服器運作環境規劃_{... 38} 表_{3-5 平台測試規劃 ... 38} 表_{3-6 硬體規劃 ... 38} 表_{3-7 組員分工表 ... 40} 表_{4-1 系統資料表 ... 42} 表_{4-2 使用案例(最新消息) ... 44} 表 4-3 使用案例(公司介紹..._.44 表_{4-4 使用案例(產品資訊) ... 45} 表_{4-5 使用案例(客服中心) ... 45} 表_{4-6 使用案例(後台管理) ... 466}

(4)

IV

圖目錄

圖 3-1 SDLC 系統生命週期_{... 34} 圖 3-_{2 系統前台架構圖 ... 37} 圖 3-3 系統後台架構圖_{... 37} 圖_{3-4 進度甘特圖(一) ... 39} 圖_{3-5 進度甘特圖(二) ... 39} 圖_{3-6 進度甘特圖(三) ... 39} 圖_{4-1 使用案例圖 ... 43} 圖_{4-2 循序圖(最新消息) ... 47} 圖_{4-3 循序圖(公司介紹) ... 47} 圖_{4-4 循序圖(產品資訊) ... 48} 圖_{4-5 循序圖(客服中心) ... 48} 圖_{4-6 循序圖(後台管理) ... 48} 圖_{4-7 系統介紹（首頁） ... 50} 圖_{4-8 系統介紹(最新消息) ... 51} 圖_{4-9 系統介紹(最新消息內容) ... 52} 圖_{4-10 系統介紹(公司介紹) ... 53} 圖_{4-11 系統介紹(產品資訊) ... 54} 圖_{4-12 系統介紹(產品資訊內容) ... 錯誤! 尚未定義書籤。} 圖_{4-13 系統介紹(客服中心) ... 55}

(5)

1

第一章

緒論

1-1 研究背景與動機

背景鋁的基本介紹與用途：鋁的發現，至今不超過二百年，鋁的顏色呈現銀白色，在地殼上存量豐富約 (8%)，居冠各類金屬之冠，由於鋁，質輕、不生鏽、易導電的特性且鋁的無毒性易回收，是很好的天然金屬材料，使鋁金屬的運用非常廣泛。鋁金屬在建築材料、機械、家庭用具、交通運輸、電氣導體等都佔有重要地位，並在某些鄉下地方建築代替鋼鐵、銅等其他金屬，另外鋁還可以製作出各式各樣的鋁製品：鋁壺、鋁窗、鋁罐、鋁鍋、天線、奇異筆、顏料罐等，且鋁箔的防潮效果很好，所以是食品工業上常見的包裝材料。暴露在空氣中的鋁，表面會生成一層氧化鋁膜，所以不會生鏽，看起來很光亮，也常運用在裝飾中，而全球使用鋁製品的比例僅次於鋼材，因此鋁成為一種重要基本金屬原料。鋁業的歷史：鋁合金產業的發展從日治時期至今已有 100 年以上的歷史，經過長期的發展，其應用發展的用廣又深，已經成為現今製造材料重要的基本材料之一。日本財閥在 1935 年合資成立「日本鋁株式會社」，選擇台灣高雄作為煉鋁廠設立的地點，成為我國煉鋁廠工業的先驅。鋁業產業定義與規範：依｢中華民國行業分類標準｣、將鋁基本工業定義為:凡從事鋁金屬治煉、製造、擠型、軋延、伸線等、以製造鋁片、皮、箔、管、條、棒、及線材等基本製品之行業均屬之。細項產業方面分為煉鋁業(凡從事鋁攀土煉治成鋁，商用純鋁精煉成高純度鋁，或配製鋁合金之行業均屬之)、鋁鑄造業(凡從事已初生鋁或再生鋁加入合金原料成金屬液注入特定模具內而形成鋁件之行業均屬之)及鋁材軋延、伸線、擠型業(以軋壓、伸線、鍛造、擠型等方式產製鋁或鋁合金粗製品或基本鋁件之行業均屬之)以三項子產業。鋁業的產業結構與關聯性: 我國鋁工業廠商總數約 450 餘家，九成以上為中小企業，除了鋁軋延業中鋁公司產值 12%外，其餘廠商產值佔 88%，屬於分散型產業。屬內銷導向再生鋁錠及各項半成品出口比例皆未達 50%，鑄造/鍛造品也都是在國內組裝後間接出口，然而近年出口量漸增，漸具國際競爭力。原料成本高國內因初生鋁錠原料皆仰賴

(6)

2 進口，且原諒占成本比重大、控制不易，因此產品價格及獲利容易受全球景氣、原料價格及匯率波動影響。能源消耗大鋁合金錠、鑄造、鍛造及一貫作業鋁半成品廠商具備冶煉或加熱設備，故對天然氣、電力、重油等能源消耗較大。動機

由於資通訊產業的磅礡發展以致許多資訊都能輕易的在各種通訊、網路訊息上取得資訊，在網路科技與數位生活互相融合下，人們不管到哪資訊就跟著到哪，隨著時代與資訊科技的進步，鋁製品產業也逐漸向國際化經營發展。現今有許多知名鋁製品產業都需要透過網頁來呈現公司的產品與製程能力，因此一個完整且詳細的網頁來介紹公司是不可或缺的，因目前王冠公司網站的產品資訊無法做修改，因此委託本組重新製作全新網頁而本組決定以王冠鋁業公司做為本次的專題，並且為王冠鋁業重新開發一個新網站，為了走向國際化，本組在未來規劃會將為該公司製作英文版網頁，讓更多國外廠商能夠與王冠公司進行互動，走向國際化。

1-2 目的

隨著時代與資訊科技的進步，鋁製品產業也逐漸向國際化經營發展。現今有許多知名鋁製品產業都需要透過網頁來呈現公司的產品與製程能力，因此，一個完整且詳細的網頁來介紹公司是不可或缺的。因此，本專題與位於高雄的一家王冠鋁業合作，重新設計一個王冠鋁業的網站，以系統分析技術去進行需求分析，開發網站的工具與後台都以 Dreamweaver 製作，並透過 MySQL 資料庫建置其網站，網站的功能有詳細的公司簡介及產品資訊，並提供連絡、交通方式，其目的就是期望有王冠鋁業能有一個專業的網站，透過網頁能將公司資訊傳遞到網路中，讓有需要的客戶第一時間了解王冠鋁業，並與王冠鋁業合作讓公司資訊能透過網站往國際化發展，並且介紹王冠鋁業這公司的產品資訊、製作流程、公司簡介，讓使用者可以了解到所有關鋁製品的資訊，製作互動式的網頁讓王冠鋁業可以隨時做修改、新增產品的相關資訊。

1-3 限制

由於台灣關於鋁業的專欄資訊介紹較少加上本組剛開始對鋁業的不熟悉且而造成收集資訊上的困難，所以在起初並不好掌握相關資訊。

(7)

3

第二章

文獻探討

本章將依序介紹：2.1 節-王冠鋁業簡介；2.2 節-瀏覽其他相關鋁業，列出其優、缺點；2.3 節-程式設計與網頁頁面美工設計軟體介紹。

2.1 王冠鋁業簡介

• 王冠鋁業於 1979 年 6 月創立於高雄市永安區的永安工業區現址，專業產製各種高品質鋁擠型料，至今發展已超過 30 年。 • 王冠鋁門窗於 1986 年６月榮獲經濟部頒發的《鋁門第五項字標記》。 • 1988 年起王冠即致力於將產品轉向朝工業用鋁擠型料為主。 • 1995 年 6 月先後通過了經濟部標準檢驗局與英國 BSI 之 ISO-9002 國際品保制度之認證，為國內鋁業界第一家獲此殊榮之廠商。 • 2000 年起與成功大學材料系所建立合作關係，致力於提升鋁合金、鋁擠型產製之技術，迄今合作關係仍持續當中。 • 2000 年取得新北市市政府新建行政中心帷幕牆工程案，2003 年順利完工。 • 2002 年 6 月通過 ISO-9001 品保制度 2000 年版之追查，順利取得 2000 年版 ISO-9001 之資格。 • 2008 年取得『2009 年糕徐世界運動會』左營主場館太陽能光電板結構用鋁擠型料的訂單，2009 年順利完工，並於 7 月份成功主辦高雄世運會，獲極高評價。 • 2008 年申請通過經濟部技術處科專案｢易擠薄型航空貨櫃用之 7006 新型鋁合金材料研製計畫｣，計畫依既定時程於 2009 年順利結案。 • 2009 年 5 月通過 ISO-9001 品保制度 2008 年版之追查，順利取得 2008 年版 ISO-9001 之資格。

(8)

4

2-2 鋁業網站探討

本組分析王冠鋁業及其他十九家相關網站，分析這些網站版面配置及網頁功能，並列出其優、缺點，以下將列出瀏覽的公司網站及優、缺點。 • 王冠鋁業http://www.crownal.com.tw/ • 中鋼鋁業http://www.csalu.com.tw/ • 新富鋁業http://shin-fu.com.tw/page_abouts.html • 開南鋁業http://www.alingotkainan.com/ • 九州鋁業http://www.windowking.com.tw/ • 景記鋁業http://www.jarlgene.com.tw/ • 明明鋁業http://www.mingming.com.tw/ • 暉巨鋁業http://www.fizial.com.tw/ • 受興鋁業http://www.sowshin.com/?act=def • 保技鋁業http://www.bon-tech.com.tw/ • 日清鋁業http://www.rongli.com.tw/ • 喬泰鋁業http://www.chiaoalu.com.tw/K2.htm • 詠盛鋁業http://www.ysalum.com.tw/about-us.html • 佳靓鋁業http://www.caal.com.tw/ • 鈺誠鋁業http://yuchengal.tw.sayato.com/ • 晉煌鋁業http://www.al-jh.com.tw/ • 生光鋁業http://www.alyuco.com.tw/index.asp • 全鍇鋁業http://www.chuan-kai.com/ • 信元鋁業http://www.fsyc.com.tw/index.asp?lang=1 • 煌益鋁業http://www.die-castings.com.tw/

(9)

5  王冠鋁業http://www.crownal.com.tw/ 優點:  功能齊全  跑馬燈缺點:  網站首頁主打 3C 手機與腳踏車，產品介紹卻無相關資料網站頁面太過死板

(10)

6  中鋼鋁業股份有限公司 http://www.csalu.com.tw/ 優點：  進入首頁後，中間的廣告牆經過固定時間會自動變更至下一頁，讓首頁看起來不至於太過死板。  左方最新消息專區，點進後有分新聞訊息、活動影像及影片區，可以以更多樣的方式關注消息。  右上角有＂站內搜尋＂，若趕時間或是找不到產品時，可以直接搜尋，非常方便。  網頁上列標籤分類齊全，滑鼠移過去一目了然。  產品資訊非常齊全，還有列出內含多少的化學成分。產品分類詳細，製程也分得很清楚。  ＂聯絡我們＂底下有部門分類，找到對的部門可以更快速解決問題。缺點：  首頁的廣告牆沒有設置超連結，若換到使用者想要的產品時，不能直接點擊進入產品資訊，是個小缺點。  整體背景有些單調。  跟我們這次瀏覽的其他四家鋁業相比，其他鋁業的首頁下方都有連絡資訊，中鋼的部分並沒有。

(11)

7  新富鋁業股份有限公司 http://shin-fu.com.tw/page_abouts.html 優點:  左側有跑馬式最新消息，方便即時瀏覽。  網頁頁面精緻。缺點：  產品介紹只看得到圖示，無法得知詳細規格。  相較於中鋼鋁業，新富鋁業的公司資訊顯得少很多。

(12)

8  開南金屬工業股份有限公司 http://www.alingotkainan.com/ 優點：  首頁廣告牆固定秒數變換，且可手動點選要看哪個廣告。  左側有＂產品搜索＂，若趕時間或是找不到產品時，可以直接搜尋，非常方便。  點進產品資訊，可直接發詢價信，非常方便。缺點：  網頁顯示為＂台灣鋁合金、鋁管、鋁錠-開南金屬工業＂，應將公司名稱放在前面。  公司資訊過少。  點進產品展示，網頁無 title(標題)，直接顯示網址。  產品僅有型號，沒有明確規格，且詢價信網頁沒有 title，僅顯示網址，且必填的驗證碼無法顯示，完全不能寄信。

(13)

9  九州鋁業 http://www.windowking.com.tw/ 優點：  網頁內容詳細。  內容排版整齊美觀，一目了然。  網頁功能齊全。缺點：  首頁排版過密集，看起來像廣告。  部分按鈕功能重複。  聯絡資訊僅首頁下方有註明。

(14)

10  景記鋁業http://www.jarlgene.com.tw/ 優點：  進入網站的一開始有公司的形象動畫  網站各功能齊全排版美觀缺點：  部分功能內容與標題毫無關係  首頁發生錯誤不能開啟

(15)

11  明明鋁業http://www.mingming.com.tw/ 優點：  網頁內容詳細，能充分了解這家公司  排版合理缺點：  頁面色彩暗沉，造成使用者壓力

(16)

12  暉巨鋁業http://www.fizial.com.tw/ 優點：  有”鋁材知識”標籤，可充分了解成分。  有"現貨”與"現模"二類，點進後分類詳細，且規格也分得很清楚。缺點：  首頁排版詭異

(17)

13  受興鋁業http://www.sowshin.com/?act=def 優點：  "員工中心"標籤內有員工活動、大型作業等相簿，以相片記錄公司事件。  每項產品規格清楚，還有附產品解剖圖。缺點：  網頁無背景。  首頁還有"回首頁"標籤，是多餘的。

(18)

14  保技鋁業http://www.bon-tech.com.tw/ 優點：  產品流程清楚。  有 MSN、Skype、QQ 三種客服服務可選。缺點：  只有顯示三種產品。  部分標籤是空白、或是錯誤網頁。

(19)

15  日清鋁業http://www.rongli.com.tw/ 優點：  用影片介紹公司讓人更了解這公司的資料缺點：  網頁內容過於單調

(20)

16  喬泰鋁業http://www.chiaoalu.com.tw/K2.htm 優點：  產品資料詳細，主要做什麼。缺點：  排版過於混雜，背景單調。

(21)

17  詠盛鋁業http://www.ysalum.com.tw/about-us.html 優點：  可以與手機配合缺點：  手機版網頁做不完全

(22)

18  佳靓鋁業http://www.caal.com.tw/ 優點：  功能配置齊全缺點：  管理者容易被破解

(23)

19  鈺誠鋁業http://yuchengal.tw.sayato.com/ 優點：  功能配置齊全缺點：  部分功能無內容

(24)

20  晉煌鋁業http://www.al-jh.com.tw/ 優點：  功能配置齊全，版面配置美觀缺點：  產品規格不明顯、不詳細。

(25)

21  生光鋁業http://www.alyuco.com.tw/index.asp 優點：  產品資料詳細，網頁有配合動態圖示缺點：  部分功能重複

(26)

22  全鍇鋁業http://www.chuan-kai.com/ 優點：  可以直接從產品介紹中可以詢問該系列產品的價格缺點：  內容過於繁雜

(27)

23  信元鋁業http://www.fsyc.com.tw/index.asp?lang=1 優點：  可以在站內搜尋要的資料缺點：  部分功能重複

(28)

24  煌益鋁業http://www.die-castings.com.tw/ 優點：  網頁資料詳細，設計手機版的網頁缺點：  部分資料過於籠長

(29)

25 2-2-1 網頁評分表 鋁業網站網站功能王冠鋁業中鋼鋁業開南鋁業九州鋁業新富鋁業最新消息 ● ● ● 公司概況 ● ● ● ● ● 產品資訊 _● _● _● _● _● 產房介紹 _● 客服中心 ● ● ● ● ● 版面配置普通優良普通優良優良

(30)

26 鋁業網站網站功能景記鋁業明明鋁業暉巨鋁業受興鋁業保技鋁業最新消息 ● ● ● ● 公司概況 ● ● ● ● ● 產品資訊 _● _● _● _● _● 產房介紹客服中心 ● ● ● ● ● 版面配置普通優良普通普通普通

(31)

27 鋁業網站網站功能日清鋁業喬泰鋁業詠盛鋁業佳靓鋁業鈺誠鋁業最新消息 ● ● ● ● 公司概況 ● ● ● ● ● 產品資訊 _● _● _● _● _● 產房介紹客服中心 ● ● ● ● ● 版面配置優良普通普通普通優良

(32)

28 鋁業網站網站功能晉煌鋁業生光鋁業全鍇鋁業信元鋁業煌益鋁業最新消息 ● 公司概況 ● ● ● ● ● 產品資訊 _● _● _● _● _● 產房介紹 _● 客服中心 ● ● ● ● ● 版面配置優良普通普通優良優良

(33)

29

2.3 程式設計與網頁頁面美工設計軟體介紹

本節介紹程式設計與網頁頁面美工設計軟體，有下列幾項： 2.3.1 美工軟體-Photoshop 軟體介紹 本組美工人員以 Photoshop 軟體製作圖片修改，加工等特效。實用的特效功能有以下幾種：調整面板：輕鬆存取所需工具，在不破壞原圖的條件下調整＆加強影像色彩與色調，使影像調整更輕鬆簡單。遮色片面板：提供工具來建立可編輯的像素和向量遮色片、調整遮色片密度和羽化效果，以及輕鬆選取非連續物件等。畫布旋轉：按一下滑鼠即可將畫布旋轉成任何角度，檢視不失真，繪圖時也不用歪著頭畫。加深景深：利用增強的自動混合圖層指令，從不同焦點的相片輕鬆建立單一影像，能調整景深，自動校正暈映和鏡頭失真。順暢的平移和縮放功能：使用全新的縮放和平移功能，可輕鬆導覽至影像的任何區域，拉近檢視個別像素時仍保有清晰度，使用像素隔點功能，在最大比例下仍可輕鬆編輯。內容感應縮放：隨著影像調整大小重新合成影像，在影像適應新尺寸的同時可保留重要部分。只要一個步驟就能產生完美影像，不須花時間才切和潤飾。色彩校正功能：利用加量、加深和海綿工具，增強色彩較正功能，可保留色彩和色調細節。 2.3.2 美工軟體 Adobe Illustrator cs6 Illustrator 為 Adobe 公司所出品的向量繪圖設計軟體，可透過工具設計出線條與填色的向量圖形，廣泛運用在 DM、名片、海報，並可切割出網頁專用的最佳化影像，還可以將設計出的向量圖形直接貼入 Flash 動畫軟體中製作精美的動畫成品，並支援直接匯入 Photoshop 的 psd 檔案於軟體編輯，是目前許多平面設計師的最有力設計軟體。性能強化:

Adobe 這次的 CS6 版本有 4 個軟件支持 OpenCL 加速，其中之一就是 AI。這次的 AI 傳說全部重寫的軟件代碼，解決了一些以前一直都存在的性能問題，出了一個 64 位版本。所以這次第一個加強就是 Mercury Performance System。64 位版本意為著可以調用更多的內存，加上 GPU，官方的目標是消滅所有“內存不足”報錯。至於實際效果麼，大家可以用 64 位軟件去試試以前報錯的操作，看看能行麼。同時這次 AI 增加了防奔潰機制，但是由於不像 PS 那樣有明確的設置，實際效果還有待考證。圖案功能強化: 這個更新應該是 CS6 最有代表性的加強之一了。AI CS6 為自定義圖案增加

(34)

30 了一個面板來設置，可以輕鬆創建“四方連續填充"。在“色板”中雙擊一個圖案就可以打開“圖案選項”面板，通過它可以快速創建出無縫拼貼的效果，還有充分的參數可以調整。 2.3.3 網頁設計軟體-Dreamweaver 軟體 將網頁中與資料庫的互動流程標準化，能經過一定程序的設定與編輯，開發出適合的互動程式。提供相當完善的多人開發環境，讓團隊在工作中彼此檢視進度、檔案取用與上傳紀錄等。提供不受平台和技術限制的開發環境，可支援 ASP、JSP、PHP、ASP.NET、 ColdFusion 等程式語言，並且可在 Microsoft Windows 和 Apple Macintosh 上執行。

能支援是市面上大部分的資料庫型式，包括 Microsoft Access 、Microsoft SQL Server、MySQL、Oracle、informix 等主流資料庫。可即時產生結果，減少製作網站的時間。

2.3.4 網頁設計軟體-AppServ

AppServ = Apache + PHP + MySQL + phpMyAdmin 的合體。Apache 是一款免費又強大的網站伺服器軟體，能跨平台使用，比 Windows 的 IIS(Internet Information Server)還要更強大！PHP 是 Hypertext Preprocessor 的簡稱，是伺服器端的程式語言，嵌入 HTML 語法中，讓伺服器能與使用者互動。MySQL 是 SQL 資料庫伺服器，網站的資料都儲存在這裡。phpMyAdmin 是一種網頁程式，能讓使用者方便管理 MySQL。 2.3.5 資料庫軟體-MySQL 軟體介紹 MySQL 效能高、成本低、可靠性好，被廣泛地應用在 Internet 上的中小型網站中。使用 C 和 C++編寫，並使用了多種編譯器進行測試，保證原始碼的可移植性。支援 AIX、BSDi、FreeBSD、HP-UX、Linux、Mac OS、Novell NetWare、 NetBSD、OpenBSD、OS/2 Wrap、Solaris、Windows 等多種作業系統。為多種程式語言提供了 API。這些程式語言包括 C、C++、C#、VB.NET、 Delphi、Eiffel、Java、Perl、PHP、Python、Ruby 和 Tcl 等。支援多執行緒，充分利用 CPU 資源，支援多用戶。最佳化的 SQL 查詢演算法，有效地提高查詢速度。既能夠作為一個單獨的應用程式在客戶端服務器網路環境中執行，也能夠作為一個程式庫而嵌入到其他的軟體中。提供多語言支援，常見的編碼如中文的 GB 2312、BIG5，日文的 ShiftJIS 等都可以用作資料表名和資料列名。

(35)

31 提供 TCP/IP、ODBC 和 JDBC 等多種資料庫連接途徑。提供用於管理、檢查、最佳化資料庫操作的管理工具。可以處理擁有上千萬條記錄的大型資料庫。與其他的大型資料庫例如 Oracle、IBM DB2、MS SQL 等相比，MySQL 自有它的不足之處，如規模小、功能有限等，但是這絲毫也沒有減少它受歡迎的程度。對於一般的個人使用者和中小型企業來說，MySQL 提供的功能已經綽綽有餘，而且由於 MySQL 是開放原始碼軟體，因此可以大大降低總體擁有成本。 2.3.6 頁設計軟體-Apache

有很多系統能夠部署網頁伺服器，最常用的是 Windows 的 IIS 和 Linux 的 Apache，前者只要購買一個 Windows 2012 標準版授權本就會包含在內，後者是完全免費的，因此中小企使用是最適合，大大節省開資。

Apache HTTP Server（簡稱 Apache）是 Apache 軟件基金會的一個開放源碼的網頁服務器，可以在大多數計算機操作系統中運行，由於其多平台和安全性被廣泛使用，是最流行的 Web 服務器端軟件之一。它快速、可靠並且可通過簡單的 API 擴展，將 Perl/Python 等解釋器編譯到服務器中。 Apache 支持許多特性，大部分通過編譯的模塊實現。這些特性從服務器端的編程語言支持到身份認證方案。一些通用的語言接口支持 Perl，Python，Tcl，和 PHP。流行的認證模塊包括 mod_access，mod_auth 和 mod_digest。其他的例子有 SSL 和 TLS 支持(mod_ssl)，代理服務器(proxy)模塊，很有用的 URL 重寫(由 mod_rewrite 實現)，定制日誌文件(mod_log_config)，以及過濾支持(mod_include 和 mod_ext_filter)。Apache 日誌可以通過網頁瀏覽器使用免費的腳本 AWStats 或 Visitors 來進行分析。 APACHE 介紹：

Apache HTTP Server（簡稱 Apache）是一個開放源碼且免費的架站軟體，可以在大多數的電腦系統中運行，由於其多平台和安全性被廣泛使用，是最流行的 Web 服務器端軟件之一。 2.3.7 網頁設計軟體-PHP 與 Apache 配合非常的完美。而 Apache 是幾乎所有目前大型網站都使用的伺服器。與 Unix-like 平台上的程式支援度很足夠。因為 Apache 在各種機器上都有版，本所以 PHP 應該也可以在所有機器上執行。如果今天在 Win32 上面沒有 Apach，PHP 也可以直接支援 IIS ，讓 IIS 跑 PHP。語法近似 C 語言，適合熟悉 C 語言開發環境的人。C 語言是最基本的語言，這也是優勢。廣大的使用社群。並且使用 Open Source 開發的方式。

(36)

32

2.3.8 用案例圖與循序圖設計軟體-Astah Professional

Astah Professional 原名為 JUDE-Community。隨著 UML 的擴大，UML 建模工具也越來越龐大。不過，許多功能並不是用戶所尋求的。因此，JUDE 聽取用戶心聲，根據用戶需要打造，按照使用習慣設計，輕便簡單，友好易用，使用者以輕鬆使用 JUDE 高速建模，極大的提高了效率。JUDE 安裝文件只有幾兆，可以快速完成下載，快速安裝，並立即上手使用。

簡單並不影響 JUDE 的強大。JUDE 支持 UML1.4 中所有圖和主要的圖形，元模（Meta Model）及屬性，全面滿足您建模所需，還集成了思維導圖，工程合並，協作開發等十余項特色功能，以及許多方便用戶的貼心實用的功能。 JUDE 是 100% 純 Java 應用程序，可以跨平台在各種主流操作系統中使用。支持 OMG XMI 標准格式，可以與其它建模工具交互模型。爲方便用戶書寫 Office 文檔，JUDE 支持以 Microsoft EMF 增強圖元拷貝粘貼至 Microsoft Office，也可以將模型信息導出到 Office Excel。JUDE 提供了內容豐富的使用手冊，全面查看 JUDE 所有的功能。

(37)

33

第三章專題設計與規劃

本章包含五節，第一節介紹專題規劃與目標，第二節介紹專題系統開發方法，第三節介紹系統藍圖，第四節介紹專題設備及工具，第五節介紹專題時程規劃與分工。

3.1 專題規劃與目標

協助王冠鋁業建立一個互動式網站，讓許多想多了解王冠鋁業的使用者不必的親身去一趟工廠，就可以藉由網路查詢，也可以藉由這個網站查詢各種型號的鋁製品之相關製作流程與廠房、產品、公告、聯絡資訊(google 地圖)等。 • 建構網站系統平台 • 建構產品資料庫 • 系統管理 • 產品資訊蒐集

(38)

34

3.2 系統開發方法

本專題所採用的系統開發方法為系統發展生命週期(System Development Life Cycle ; SDLC)，是一有組織的方式用來開發一個企業的資訊系統。 SDLC 又稱為瀑布模式 (Waterfall Model)，系統發展生命週期又分為初步調查(Preliminary Investigation)、系統分析(System Analysis)、系統設計(System Design)、系統開發 (System Development)、系統實施與評估(System Implementation and Evaluation)五個階段。此模式為系統的每個階段定義出相當嚴謹的開發程序與步驟，每個階段必須完成之後，才可以轉移到下一個階段，若在某個階段發生問題，可回朔至前面的階段(如下圖 3-1)

(39)

35 表 3-1 本專題進行流程表 SDLC 階段系統相關工作產出物預定完成日期初步調查 • 工作分配 • 資料蒐集整合 • 計畫書撰寫專題計劃書 2014/5/15 系統分析 • 網站功能 • 資料分析、系統分析系統分析報告書 2014/8/31 系統設計 • 網站架構設計 • 網頁介面設計 • 資料庫設計 • 網頁視覺設計系統設計規劃書 2014/9/30 系統開發 • 資料庫建置 • 網頁美工 • 程式撰寫 • 網站建置、架設伺服器功能完整網站 2014/11/15 系統維護與支援 • 偵錯 • 網站修改 • 書面資料修改 • 撰寫使用說明書 • 撰寫結案報告 • 維護結案報告書、使用手冊 2014/12/10

(40)

36

3.3 系統藍圖描述

專題系統的整題架構，以圖 3-2 架構圖表示系統主要功能主是介紹王冠鋁業的最新消息、公司介紹、產品資訊、客服中心，其中最新消息以及產品資訊的內容透過 Server 資料存在後端資料庫裡，使用者可以透過後台管理平台進入，就可以使用本系統提供相關瀏覽功能。  最新消息：提供王冠鋁業最新的資訊給使用者。  產品資訊：介紹各個鋁業產品的資料，讓使用者能隨時得看自己想要了解的鋁業相關產品。 1. 電腦用散熱片：提供電腦散熱片的原物料相關諮詢 2. 運動器材：部分零件毀壞可以查詢相關零件 3. 其他：想要了解到有關於鋁製品的零件類型、以及相關資料  公司介紹：介紹公司的重大歷程、經營理念以及生產與檢驗。  後台管理： 1. 最新消息管理：管理近期最新消息(新增、刪除、修改) 2. 產品資訊管理：管理產品資訊（修改產品資訊） 3. 管理者帳戶管理：管理者對帳戶的修改、維護

(41)

37

圖 3-₂系統前台架構圖

(42)

38

3-4 專題設備及工具

本專題系統所需適用的軟體規畫及工具如下: 3-4.1 軟體規劃 表 3-2 專題文件製作規劃專題文件製作 Office word 2010 製作書面報告 Office Power point 製作投影片

PhotoShop CS6 製作網站 logo 及圖片

Astah Professional 製作相關系統檔案圖（使用案例圖、流程圖...等）

Software Ideas Modeler 製作相關系統檔案圖（使用案例圖）表 3-3 系統開發環境規劃

系統開發環境 PHP

資料庫建置 Apache

Micromedia Dream Weaver CS6

網站架設 Flash 表 3-4 伺服器運作環境規劃伺服器運作環境 PHP 資料庫管理 Apache 表 3-5 平台測試規劃平台執行測試 Internet Explorer 11 測試平台是否顯示錯誤、運作錯誤 Google 34.0 FireFox 29.0 3-4.2 硬體規劃 表 3-6 硬體規劃專題文件製作社區數位發展研究中心 PC 3 台規格:HP z400，MSI AE2400，HP ML110 HP CM1017 彩色雷射複合機開發、測試及展示運作平台學校主機規格 : HP z400 ， MSI AE2400 ， HP ML110 觸控電腦規格:MSI AE2400

(43)

39

3-5 專題時程規劃與分工

本章節共有四張圖表分別介紹本專題的時程規劃與分工，以甘特圖來表示時程規劃，本組將依據此圖預定完成系統。而各項工作分配的詳細內容則以組員分工表來表示。圖 3-4 進度甘特圖(一) 圖 3-5 進度甘特圖(二) 圖 3-6 進度甘特圖(三)

(44)

40 表 3-7 組員分工表組員分工項目屠哲綸楊士樺王耘翰田自強蒐集資料 √ √ √ √ 資料統整 _√ _√ 摘要 √ √ √ 緒論 _√ _√ 文獻探討 √ √ √ 撰寫計畫書 √ √ 需求分析 √ √ √ √ 網頁製作 √ √ 美工 √ 程式 √ √ 撰寫結案報告 _√ _√ _√ _√

(45)

41

第四章專題成果

本章包含第四節,第一節介紹專題「需求分析」，第二節介紹本專題「系統分析」第三節介紹本專題「系統介紹」，介紹王冠鋁業網頁與設計理念，第四節介紹王冠鋁業「使用手冊」說明書，用來說明王冠鋁業網站的使用方法。

4-1 需求分析

4-1.1 問題描述 隨著時代的進步，鋁製品產業也逐漸向國際化經營發展。為此，一個精緻且詳細的網頁來介紹公司是不可或缺的。因此本專題組與王冠鋁業合作，設計一個王冠鋁業的網站，有詳細的公司簡介及產品資訊，並提供連絡、交通方式，其目的就是希望有這方面需求的人利用本專題的這項網站，來找到自己所需要的資訊。 4-1.2 使用者需求 介紹王冠鋁業這公司的產品資訊、製作流程、公司簡介，讓使用者了解鋁製品的資訊，讓王冠鋁業可以隨時做修改、新增產品的相關資訊。 4-1.3 可行性分析 (1)操作性需求 a.使用者可以利用此網站來了解鋁業的相關知識。 (2)使用性需求 a.使用者不需經過訓練即可上手瀏覽本網站。 (3)成本性需求 a.可以減少紙張成本，節省時間及維護人員。此外，系統是在校園裡開發的，所有的製作皆使用校園內的軟體，所以我們不必耗費經費來購買軟體。 4-1.4 系統目標 協助王冠鋁業建立一個互動式網站，讓許多想多了解王冠鋁業的使用者不必的親身去一趟工廠，就可以藉由網路查詢，也可以藉由這個網站查詢各種型號的鋁製品之相關製作流程與廠房、產品、公告、聯絡資訊(google 地圖)等。

(46)

42

4-2 資料庫表格設計

此節主要是在說明我們所設計的網頁，在資料庫裡會有哪些表格，而表格的格式有哪些，而欄位的底線的為其主鍵。說明表如下表 4-1 系統資料表欄位名稱資料型態 n no smallint(6) n_title text n_date text day_time timestamp p no varchar(20) p_name text p_img varchar(30) p_date text s_id text s_pw text

(47)

43

4-3 系統分析

本小節內容包括本專題的使用案例圖,使用案例說明書,循序圖,在以下章節說明。 4-3.1 使用案例圖 使用案例圖的重點在於利用圖型的方式來討論系統所應提供的功能,對系統的能提供一個清晰的輪廓。使用案例圖(如圖 4-1)從高層次的觀點描繪系統功能, 並且將系統功能視覺化。也就是說,這個模型適合用來與計畫相關之管理階層人員解說。圖 4-1 使用案例圖

(48)

44 使用案例(如表 4-2)的定義:「一個系統執行並且可產生觀察且對使用者有價值的結果之一序列動作的描述」。所以使用案例圖示動作的描述，並且他還是一個序列動作的描述。使用案例描述系統行為的執行步驟，並且包含過程中的可能發生狀況。表 4-2 使用案例(最新消息)

Use Case Name:最新消息 Use Case ID:1 Use Case Type: 明細，必需 Importance Level:High

Primary Actor:使用者

Stakeholders and interests:使用者-獲得王冠鋁業最新消息資訊 Brief Description:使用者可在系統上得到最新消息相關資訊

Trigger:使用者點連結 Type:外部

Normal Flow OF Events:

1:使用者點選王冠鋁業首頁進入 2:使用者點選最新消息選項

3:使用者可獲得王冠鋁業最新消息資訊

表 4-3 使用案例(公司介紹)

Use Case Name:公司介紹 Use Case ID:2 Use Case Type: 明細，必需 Importance Level:High

Stakeholders and interests:使用者-獲得王冠鋁業公司介紹資訊 Brief Description:使用者可在系統上得到公司介紹資訊

1:使用者點選王冠鋁業首頁進入 2:使用者點選公司介紹選項

(49)

45

表 4-4 使用案例(產品資訊)

Use Case Name:產品資訊 Use Case ID:3 Use Case Type: 明細，必需 Importance Level:High

Stakeholders and interests:使用者-獲得王冠鋁業產品資訊

Brief Description:使用者可在系統上得到王冠鋁業產品相關資訊

1:使用者點選王冠鋁業首頁進入 2:使用者點選產品資訊選項

3:使用者獲得王冠鋁業公司產品資訊

表 4-5 使用案例(產品介紹)

Use Case Name:產品介紹 Use Case ID:4 Use Case Type: 明細，必需 Importance Level:High

Stakeholders and interests:使用者-獲得王冠鋁業產品介紹資訊 Brief Description:使用者可在系統上得到王冠產品介紹資訊

1:使用者點選王冠鋁業首頁進入 2:使用者點選產品資訊選項進入 3:使用者點選產品介紹選項 4:使用者獲得產品介紹資訊

(50)

46

表 4-6 使用案例(客服中心)

Use Case Name:客服中心 Use Case ID:5 Use Case Type: 明細，必需 Importance Level:High

Stakeholders and interests:使用者-獲得王冠鋁業客服中心資訊 Brief Description:使用者可在系統上得到王冠鋁業客服中心資訊

1:使用者點選王冠鋁業首頁進入 2:使用者點選客服中心選項 3:使用者獲得客服中心資訊

表 4-7 使用案例(後台管理)

Use Case Name:後台管理 Use Case ID:6 Use Case Type: 明細，必需 Importance Level:High

Primary Actor:管理者

Stakeholders and interests:管理者-對王冠鋁業系統維護，做一些新增.修改.刪除. 等功能

Brief Description:管理者對後台的一些管理 Trigger:管理者點連結管理

Type:外部

1:管理者點選王冠鋁業首頁進入系統 2:管理者從後台管理登入進入

A. 最新消息管理 B. 產品資訊管理 C. 管理者帳戶管理

(51)

47

4-4 循序圖

循序圖(如圖 4-2~6)是顯示使用者與系統之間的互動。

圖 4-2 循序圖(最新消息)

(52)

48

圖 4-4 循序圖(產品資訊)

(53)

49

(54)

50

4-5 系統介紹

系統介紹(如圖 4-8~4-13)是介紹本專題系統的主要功能與相關資訊畫面功能與目的:進入「王冠鋁業」系統的首頁，中間有六個區塊即為本系統主要功能，分別為回首頁，最新消息、公司介紹、產品資訊、客服中心。畫面功能與目的:首頁，可看見王冠鋁業最新公告以及公司簡介。圖 4-2 系統介紹（首頁）

(55)

51

畫面功能與目的:顯示最新消息的標題及題目，點選消息標題可以進入公告的詳細內容。

(56)

52 畫面功能與目的:顯示公告的詳細內容。

(57)

53

畫面功能與目的:公司介紹，可看見王冠鋁業的歷史發展與歷程。

(58)

54

畫面功能與目的:顯示王冠鋁業各項產品類別的產品名稱及圖片，可點選產品名稱進入產品類別詳細介紹。

(59)

55

畫面功能與目的:顯示王冠鋁業的交通資訊以及連絡方式，並配合 Google 地圖方面使用者參考。

(60)

56

第五章結論與建議

5-1 結論

本組製作此專題的出發點，起初是希望讓有需要的使用者能夠透過王冠鋁業去瞭解國內的鋁業發展與未來走向，並且透過此專題所製作之網站所提供鋁業資訊，讓使用者瞭解關於鋁業的相關知識，使用者也可以透過本專題的產品資訊、製作流程、公司簡介，讓使用者不必親自造訪工廠，即可藉由網路查詢相關資訊，也能藉由此網站查詢各種型號的鋁製品之相關製作流程與廠房、產品、公告、聯絡資訊、交通方式等。

5-2 建議

本專題的製作起源是因目前王冠公司網站的產品資訊無法做修改，所以本組協助王冠鋁業建立一個互動式網站，使王冠鋁業可以隨時做修改、新增產品的相關資訊。但若是使用者對於本網站之內容有疑惑想提出問題時，目前網站並無法給予即時的回覆，因此未來希望網站能提供留言版功能，以便使用者獲得即時之互動需求。

5-3 未來研究方向

由於製作本專題的時間有限，所以無法製作出空能完善的網站，因此，本專題組員討論出待開發的功能與目標，使本專題網站功能更加充實及豐富，以下是本專題待增加的功能及未來希望能繼續導入之目標: 功能: 1. 留言板:一個留言版功能，以便提供使用者即時的互動需求。 2. 產品搜索:若是找不到某樣產品時，可以直接搜尋。 3. 新增產品類別:提供給管理者新增產品類別之功能。目標: 1. 製作多國版本網業:製作英文版網頁，讓更多國外廠商能夠與王冠公司進行互動，走向國際化。 2. 設計手機板網頁:新增此功能可以在沒有電腦的環境下使用手機、平板 達到瀏覽目的。

(61)

57

參考文獻

Dreamweaver：http://terry55wu.blogspot.tw/search/label/Dreamweaver Illustrator：http://www.flycan.com/article/photoshop/illustrator-cs6-1517.html 王冠鋁業http://www.crownal.com.tw/ 中鋼鋁業http://www.csalu.com.tw/ 新富鋁業http://shin-fu.com.tw/page_abouts.html 開南鋁業http://www.alingotkainan.com/ 九州鋁業http://www.windowking.com.tw/ 景記鋁業http://www.jarlgene.com.tw/ 明明鋁業http://www.mingming.com.tw/ 暉巨鋁業http://www.fizial.com.tw/ 受興鋁業http://www.sowshin.com/?act=def 保技鋁業http://www.bon-tech.com.tw/ 日清鋁業http://www.rongli.com.tw/ 喬泰鋁業http://www.chiaoalu.com.tw/K2.htm 詠盛鋁業http://www.ysalum.com.tw/about-us.html 佳靓鋁業http://www.caal.com.tw/ 鈺誠鋁業http://yuchengal.tw.sayato.com/ 晉煌鋁業http://www.al-jh.com.tw/ 生光鋁業http://www.alyuco.com.tw/index.asp 全鍇鋁業http://www.chuan-kai.com/ 信元鋁業http://www.fsyc.com.tw/index.asp?lang=1 煌益鋁業http://www.die-castings.com.tw/ 王冠鋁業http://www.crownal.com.tw/

(62)

58

附錄

1. 會議記錄

會議紀錄表

專題名稱王冠鋁業時間 2014/2/26 地點 A304 主席老師記錄王耘翰出席者屠哲倫,楊士樺,王耘翰內容 1,3/15 前針對第二章製作雛型。 2,開會時間暫訂每周一,三,五。 3,組員聯絡方式確認使用 Line。 4,確認組員可配合時間。待辦事項 1,建立 Google 專題專用帳號。 2,熟悉使用工具。 3,製作開會紀錄。 4,製作開會時間表。決議 1,使用的工具:Dreamweaver.MySQL.Photoshopo。 2,出版完成時間 3/10。老師建議 2.1 王冠鋁業簡介 2.2 遊覽相關鋁業網站.列出優缺點。 2.3 程式,資料庫,美工工具介紹

(63)

59 2. 會議記錄

會議紀錄表

專題名稱王冠鋁業時間 2013/3/5 地點 A304 主席老師記錄王耘翰出席者王耘翰,屠哲倫,楊士樺內容 1.專題(一).(二)結案時間.內容。 2.軟體安裝檔案源。 3.專題範本借閱。待辦事項 1.安裝使用工具。 2.前置企劃書。決議 1.企劃書結案時間五月初。 2.網頁成品初版五月中。老師建議 1.軟體安裝檔於網路上找下載點。

(64)

60 3. 會議記錄