mis.hwai.edu.twmis.hwai.edu.tw/im/project103/a5.docx · web view動機....

動機隨著網路購物者的增加，讓網際網路帶來了商機，因此建立此網站，本網站具有漂亮的版面及最完善的規劃，也因網路方便性可自行上網觀看進行商品購買，不需要因為時間而延誤自己的行程規劃，建立網站品牌忠誠度及信用，讓網路上的人們知道我們的服務品質而想來我們網站購買來增加利益。行動電子商務，以手機或 PDA 等無線接收及上網的設備結合電子商務的構想，隨著資訊科技的進步，已經逐漸的被實現發展起來。以手機隨時隨地上網進行即時資訊的瀏覽、接收簡訊、金融轉帳、甚至股票下單等，成為大哥大相關業者為吸引消費者申辦手機門號的必備附帶產品，在不久之後，行動電子商務服務可能取代手機商品，而成為主角。

目的1

電子商務的主要目的是在降低成本、增加與顧客之間的互動，以及增進服務的品質。降低成本 : 大多數人都傾向選擇省時、省事的方式，獲得想要的東西，因此電子商務一旦造就這樣的便利性，就能持續成長；相對地，實體商務便會隨之萎縮。

增加與顧客之間的互動 : 客戶服務－產品售後服務、退換貨問題－銷售前的各種資訊的整理與應用－是否提供即時的訂單查詢與物品的寄送狀態。

增進服務的品質 : 透過電腦與資訊網路從事各種商業交易活動，目的在於因應企業組織及商業需求，達到降低成本、增進商品及服務品質、加強服務提供效率的目標。

2

目錄動機 1

目的 2

關於 FU 網站商店 4

製作 FU 軟體 5

主頁、程式碼 6~7

首頁、程式碼 8~9

會員登入、程式碼 10~11

會員註冊、程式碼、PHP 12~14

產品介紹、程式碼 15~18

本週熱賣、程式碼 19~21

購物車、程式碼、PHP 24~35

甘特圖 36

專題成果 37

3

關於 FU 網路商店網路行銷，是指從瀏覽、訂購、付款、扣帳等所有交易流程都在網路完成的，才可以稱為網路商店！消費者透過電腦網路，進入網路上之電子商店，瀏覽商品並購買商品，稱之為線上購物。所購買之商品，可為數位化產品透過網路或實體商品實體配送。網路商店是建立在網路世界中的虛擬商店，與傳統超市及百貨公司不同的是，到網路商店消費的顧客不必出門，而是在家中透過電腦的連線選購。而商店的老闆也不用將笨重的商品搬到店鋪中等著上門，而是將商品的型錄及影像以多媒體的方式透過全球資訊網，呈現在消費者的電腦畫面。無貨架商店的網路商店購物，與傳統型錄購物及電視購物最大的不同點是具有高度的互動性及娛樂性。消費者透過電腦可以輕鬆到任何一家電子商店瀏覽及比價，對於陌生的商品也可以進一步察看產品說明。而如果你依然對這項產品有疑問，你也可以立刻發一封電子郵件詢問更進一步的資料。

4

製作 FU 網站商店

使用 Front Page 2003 軟體PHP+ MySQL 資料庫

利用 FrontPage網頁編輯工具，網頁製作方式就完全改觀了。它是個所見即所得的網頁製作工具。您可以利用拖拉滑鼠的方式製作出非常美觀的網頁，在這選擇想要的版面，接下來就是放自己想要的資料。

利用到 PHP+ MySQL 資料庫在網站裡加入了會員登入、註冊會員、購物車、留言版。

5

製作 FU 過程主頁

以 FRONT PAGE 2003 製作的主頁，以圖片方式顯示點即可進入首頁。

6

主頁程式碼

<html>

<head><meta http-equiv="Content-Language" content="zh-tw"><meta http-equiv="Content-Type" content="text/html; charset=big5"><title>外套專賣店</title></head>

<body background="0001.jpg">

<p align="center"><b><i><font face="Algerian" size="7">fu 網路商店</font></i></b></p><p align="center"><a href="index.htm"><img border="0" src="th.jpg" width="424" height="414"></a></p><p align="center">　</p><p align="center">　</p><p align="center"><i><font color="#FF0000" face="標楷體" size="6">進入主頁點擊圖片</font></i></p>

</body>

</html>

7

首頁以 FRONT PAGE 2003 作版面設計，此版面為首頁，在左面板設需要的功能，點擊後會顯示在中間面板。

8

首頁程式碼<html>

<head><meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=big5"><title>新增網頁 2</title></head>

<frameset cols="150,*"><frame name="left" scrolling="no" noresize target="rtop" src="menu.htm"><frameset rows="16%,*"><frame name="rtop" target="rbottom" src="top.htm"><frame name="rbottom" src="main.htm" target="_self"></frameset><noframes><body>

<p>此網頁使用框架，但是您的瀏覽器不支援框架。</p>

</body></noframes></frameset>

</html>

9

會員登入以 FRONT PAGE 2003 製作會員登入，利用表單的功能輸入文字構成，購買時需要登入帳號、密碼才能進行購物。

10

會員登入程式碼<html>

<head><meta http-equiv="Content-Language" content="zh-tw"><meta http-equiv="Content-Type" content="text/html; charset=big5"><title>會員登入</title></head>

<body background="000002.gif">

<form method="POST" action="login_do.php"><p align="center"><b><font size="6">會員登

入</font></b></p><p align="center"><font size="6">帳號：</font><font

size="6"><input type="text" name="T1" size="20"></font></p><p align="center"><font size="6">密碼：</font><font

size="6"><input type="text" name="T2" size="20"></font></p><p align="center"><font

size="6">

</font><font size="6"><input type="submit" value="確認" name="B1"></font><font size="6"><input type="reset" value="重新輸入" name="B2">

<br><br><br> </font><b><font size="6"> <a href="add_view.php">會員註冊</a></font></b></p>

</form>11

</body>

</html>

會員註冊

以 FRONT PAGE 2003製作會員註冊，利用表單的功能修改成註冊會員需要的文字，來針對未註冊的會員。

12

會員註冊程式碼<html>

<head>

13

PHP 會員註冊資料庫，會員註冊帳號密碼時我會看到，經通過後才能在網頁上登入。

產品介紹

15

以 FRONT PAGE 2003 產品介紹，會把需要賣出的商品放置產品介紹，以方便對商品感興趣的會員購買。

產品介紹程式碼16

<html>

<head><meta http-equiv="Content-Language" content="zh-tw"><meta http-equiv="Content-Type" content="text/html; charset=big5"><title>編號 1</title></head>


<p align="center"><i><b><font size="7">產品介紹</font></b></i></p>

<table border="1" width="100%" height="674"><tr>

<td width="297"><p align="center"><img border="0" src="002.jpg" width="237"

height="274"> 編號 1</td><td width="512"><h1 style="font-weight: bold; display: block; color: rgb(0, 0,

0); font-family: 新細明體; font-style: italic; font-variant: normal; letter-spacing: normal; line-height: 22.164154052734375px; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-text-stroke-width: 0px; margin: 0px; padding: 0px" align="center">

<span itemprop="name"><font size="3">**Nina's Closet** Abercrombie &

Fitch A&F Rocky Falls Hoodie </font></span></h1><h1 style="font-weight: bold; display: block; color: rgb(0, 0,


17

　</h1><h1 style="font-weight: bold; display: block; color: rgb(0, 0,


<span itemprop="name"><font size="3">麋鹿重磅數立領連帽外套</font></span></h1>

<p>　</td><td>價格:3500</td>

</tr><tr>


height="203"> 編號 2</td><td width="512"><p align="center"><b><i>adidas Originals</i></b><p

align="center"><b><i><br>男生水藍螢光黃小 LOGO棉質外套</i></b><p

align="center"><b><i><br>SIZE : XL</i></b><p align="center"><b><i><br>衣長 : 77cm 腋下寬 : 59cm</i></b></td><td>價格:2000</td>

</tr><tr>


height="215"> 編號 3</td>

<td width="512"><h1 style="font-size: 18px; font-weight: bold; display: block;

color: rgb(0, 0, 0); font-family: 標楷體; font-style: italic; font-variant: normal; letter-spacing: normal; line-height: 22.164154052734375px;

18

orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-text-stroke-width: 0px; margin: 0px; padding: 0px" align="center">

<span itemprop="name">Hollister HCO 男生 Paradise Cove Hoodie </span></h1>

<h1 style="font-size: 18px; font-weight: bold; display: block; color: rgb(0, 0, 0); font-family: 標楷體; font-style: italic; font-variant: normal; letter-spacing: normal; line-height: 22.164154052734375px; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-text-stroke-width: 0px; margin: 0px; padding: 0px" align="center">

　</h1><h1 style="font-size: 18px; font-weight: bold; display: block;

color: rgb(0, 0, 0); font-family: 標楷體; font-style: italic; font-variant: normal; letter-spacing: normal; line-height: 22.164154052734375px; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-text-stroke-width: 0px; margin: 0px; padding: 0px" align="center">

<span itemprop="name">海鷗 logo棉質刷毛連帽外套<span class="Apple-converted-space"> </span></span></h1>

<p style="font-size: 18px; font-weight: bold; display: block; color: rgb(0, 0, 0); font-family: 標楷體; font-style: italic; font-variant: normal; letter-spacing: normal; line-height: 22.164154052734375px; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-text-stroke-width: 0px; margin: 0px; padding: 0px" align="center">

　</p><p style="font-size: 18px; font-weight: bold; display: block;

color: rgb(0, 0, 0); font-family: 標楷體; font-style: italic; font-variant: normal; letter-spacing: normal; line-height: 22.164154052734375px; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-text-stroke-width: 0px; margin: 0px; padding: 0px" align="center">

19

L 號尺寸: 肩寬:ˋ44cm 衣長:70cm 胸寬:56cm 袖長:77cm</td><td>價格:3000</td>

</tr></table>

<p>　</p>

</body>

</html>

本週熱賣

20

以 FRONT PAGE 2003 製作本週熱賣，選出這禮拜賣出最多的商品來增加收益。

本週熱賣程式碼<html>

21

<head><meta http-equiv="Content-Language" content="zh-tw"><meta http-equiv="Content-Type" content="text/html; charset=big5"><title>HOT</title></head>


<p>　</p><p align="left"> <font size="7"> <font color="#FF0000" face="標楷體"><i><b>HOT</b></i></font></font></p><table border="1" width="100%">

<tr><td width="372"><p align="center"><img border="0" src="11.jpg"

width="292" height="295"></td><td width="348"><p align="center">　</p><p align="center"><b style="color: #0000FF; font-family: arial, helvetica,

clean, sans-serif; font-style: normal; font-variant: normal; letter-spacing: normal; line-height: 16px; orphans: 2; text-align: -webkit-auto; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px">

<font size="5">風格：休閒風</font></b></p><p align="center"><b id="yui_3_11_0_1_1395811908159_1005" style="color:

#0000FF; font-family: arial, helvetica, clean, sans-serif; font-style: normal; font-variant: normal; letter-spacing: normal; line-height: 16px; orphans: 2; text-align: -webkit-auto; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing:

22

0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px"><font size="5" id="yui_3_11_0_1_1395811908159_1004">

材質：皮革+聚酯纖維</font></b></p><p align="center"><b style="color: #0000FF; font-family: arial, helvetica,

clean, sans-serif; font-style: normal; font-variant: normal; letter-spacing: normal; line-height: 16px; orphans: 2; text-align: -webkit-auto; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px">

<font size="5">特色：機車領釦環絨毛保暖</font></b></p><p align="center"><b id="yui_3_11_0_1_1395811908159_996" style="color:

#0000FF; font-family: arial, helvetica, clean, sans-serif; font-style: normal; font-variant: normal; letter-spacing: normal; line-height: 16px; orphans: 2; text-align: -webkit-auto; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px">

<font size="5" id="yui_3_11_0_1_1395811908159_995">內裡：裡布加絨</font></b></p>

<p>　</td><td><p align="center"><font size="7" color="#0000FF">價格 :

1300</font></td></tr>

</table><p align="center"><img border="0" src="111.jpg" width="550" height="528" align="left"></p>

</body>

</html>

23

購物車來網站逛的顧客可因喜歡的產品放置購物車裡，可在挑選其他有興趣的產品，不讓因產品位置不同而尋找很久，讓費您寶貴的時間。

購物車程式碼<?php

24

session_start();//header("Content-Type: text/html; charset=big5");include("../connMysql.php");$seldb = @mysql_select_db($DB);if (!$seldb) die("資料庫選擇失敗！");

// 會員帳號if (isset($_SESSION["login_id"])) {$member_acc = $_SESSION["login_id"];} else {// 尚未登入 (訪客)$member_acc = "visiter";}// 刪除購物車的商品 by terry0412if (isset($_POST["remove-item"])) {// 流水號$key_id = $_POST["remove-item"];$sql_query = "DELETE FROM shoppingcart where member_acc = '$member_acc' and key_id = '$key_id'";mysql_query($sql_query);}// 加入購物車 by terry0412else if (isset($_POST["item_id"])) {$item_id = $_POST["item_id"];// 檢查是否已經有重複的資料$sql_query2 = "SELECT * FROM shoppingcart where member_acc = '$member_acc' and item_id = '$item_id'";if (mysql_num_rows(mysql_query($sql_query2)) > 0) {// 加入商品數量

25

mysql_query("UPDATE shoppingcart SET item_count = item_count + 1 where member_acc = '$member_acc' and item_id = '$item_id'");} else {// 新增購物車商品mysql_query("INSERT INTO shoppingcart(member_acc, item_id, item_count) values('$member_acc', '$item_id', '1')");}echo "<script>window.alert('已加入到購物車~~~');</script>";}// 更新購物車 by terry0412else if (isset($_POST["update-item"])) {// 商品流水號$key_id = $_POST["update-item"];// 商品數量$item_count = $_POST["$key_id"];// 刪除資料if ($item_count <= 0) {$sql_query = "DELETE FROM shoppingcart where member_acc = '$member_acc' and key_id = '$key_id'";mysql_query($sql_query);}// 更新資料else {$sql_query = "UPDATE shoppingcart SET item_count = '$item_count' where member_acc = '$member_acc' and key_id = '$key_id'";mysql_query($sql_query);

26

}}// 確認結帳 by terry0412else if (isset($_POST["B2"])) {// 讀取使用者資料$sql_query = "SELECT * FROM members WHERE username = '" . $member_acc . "'";$result_user = mysql_fetch_assoc(mysql_query($sql_query));}// else => 最後顯示購物車清單// SQL敘述句 (將關聯資料加進來)$sql_query = "SELECT * FROM shoppingcart JOIN items ON item_id = id and member_acc = '" . $member_acc . "'";// TODO 排序功能 (ASC:由小排到大)$sql_query .= " ORDER BY key_id";// 將 SQL敘述句查詢資料加到 $result 中$result = mysql_query($sql_query);// 計算總筆數$total_records = mysql_num_rows($result);?><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf8"><title>查看購物車</title></head><body background="000002.gif"><?php

27

//mysql_data_seek($result, 0); // 將資料指標索引回到最前面第0筆if ($total_records <= 0) {echo "<form method='POST' action='cart.php'>";echo "<table border='1' width='60%'>";echo "我的購物車：<br><br>";

echo "(購物車內目前是空的)";echo "</table>";} else {if (!isset($result_user)) { // 購物車echo "<form method='POST' action='cart.php'>";echo "<table border='1' width='60%'>";echo "我的購物車：<br><br>";

// 表頭內容echo "<tr>";echo " <th width='5%'>　</th>";echo " <th width='9%'>　</th>";echo " <th width='60%'>商品名稱</th>";

echo " <th width='6%'>單價</th>";

echo " <th width='7%'>數量</th>";

echo " <th width='10%'>小計</th>";echo "</tr>";// 累計金額$total_price = 0;// 表格內容

28

while ($row_result = mysql_fetch_assoc($result)) {echo "<tr>";echo " <td>";echo " <p align='center'>";// 刪除購物車內的商品echo " <button name='remove-item' value='" . $row_result["key_id"] . "'>移除</button></td>";echo " <td>";echo " <p align='center'>";echo " <img border='0' src='../images/" . $row_result["item_id"] . ".jpg' width='150' height='150'></td>";echo " <td>" . $row_result["name"] . "</td>";echo " <td>" . $row_result["price"] . "</td>";echo " <td>";echo " <input type='text' name='" . $row_result["key_id"] . "' size='4' value='" . $row_result["item_count"] . "' style='border-style: solid; border-width: 1px; padding-left: 4px; padding-right: 4px; padding-top: 1px; padding-bottom: 1px'>";echo " <button name='update-item' value='" . $row_result["key_id"] . "'>更新</button></td>";

// 將小計金額計算出來$calc_count = $row_result["price"] * $row_result["item_count"];echo " <td>NT " . $calc_count . "</td>";echo "</tr>";// 最後加入總價中$total_price += $calc_count;}// 顯示總計金額echo "<tr>";

29

echo " <td colspan='6'><p align='right' size='14'>總計: NT " . $total_price . " </td>";echo "</tr>";// 結帳選項echo " <table border='0' width='60%'>";echo " <tr>";echo " <td align='center' width='107'>";echo " <input type='submit' value='確認結帳' name='B2' style='float: right'></td>";echo " </tr>";echo " </table>";echo "</table>";echo "</form>";} else { // 結帳echo " <p>=== 您的訂單===</p>";echo "<table border='1' width='60%'>";// 表頭內容echo " <tr>";echo " <th width='9%'>　</th>";echo " <th width='60%'>商品名稱</th>";

echo " <th width='6%'>單價</th>";

echo " <th width='7%'>數量</th>";

echo " <th width='10%'>小計</th>";echo " </tr>";// 累計金額$total_price = 0;

30

// 表格內容while ($row_result = mysql_fetch_assoc($result)) {echo " <tr>";echo " <td>";echo " <p align='center'>";echo " <img border='0' src='../images/" . $row_result["item_id"] . ".jpg' width='50' height='50'></td>";echo " <td>" . $row_result["name"] . "</td>";echo " <td>" . $row_result["price"] . "</td>";echo " <td>" . $row_result["item_count"] . "</td>";// 將小計金額計算出來$calc_count = $row_result["price"] * $row_result["item_count"];echo " <td>NT " . $calc_count . "</td>";echo " </tr>";// 最後加入總價中$total_price += $calc_count;}echo "</table>";// 表單加註 name 是為了接收至 javascript 動作echo "<form method='POST' action='check_out.php' name='cart'>";echo " <p>===請確認收件人資訊===</p>";

echo " <p>姓名 : <input type='text' name='T2' size='15' value='" . $result_user["name"] . "'></p>";echo " <p>送貨地址 : <input type='text' name='T3' size='30' value='" . $result_user["address"] . "'></p>";echo " <p>電話 : <input type='text' name='T4' size='10' value='" . $result_user["tel"] . "'></p>";

31

echo " <p>電子信箱 : <input type='text' name='T6' size='15' value='" . $result_user["email"] . "'></p>";echo " <p>　</p>";echo " <p>付款方式:";echo " <select size='1' name='D1'>";echo " <option value='1'>臨櫃匯款</option>";

echo " <option value='2'>ATM匯款</option>";

echo " <option value='3'>貨到付款</option>";echo " </select></p>";echo " <p><input type='submit' value='送出訂單' name='B3'></p>";echo "</form>";}}?></body><script type="text/javascript">function check_price() {var total_price = <?php echo $total_price; ?>;// 強制轉型十進位整數document.cart.price.value = parseInt(document.cart.R1.value, 10) + parseInt(total_price, 10);}function show_alert() {window.alert("已成功送出訂單!");}</script></html>

32

購物車 PHP利用到 PHP 資料庫，讓顧客想買的商品先存到自己購物車裡面再進行購買，不會單單購買一件商品。

33

甘特圖2013/12月

1月 2月 3月 4月 5月 6月

討論主題

網頁架設

尋找資料

網頁美觀

輸入資料庫

討論書面報告

書面報告

34

註記 : 完成預計完成專題成果

35

mis.hwai.edu.twmis.hwai.edu.tw/im/project103/a5.docx · web view動機....

Documents