FU網路商店行銷

(1)

動機

隨著網路購物者的增加，讓網際網路帶來了商機，因此建立此網站，本網站具有漂亮的版面及最完善的規劃，也因網路方便性可自行上網觀看進行商品購買，不需要因為時間而延誤自己的行程規劃，建立網站品牌忠誠度及信用，

讓網路上的人們知道我們的服務品質而想來我們網站購買來增加利益。

行動電子商務，以手機或 PDA 等無線接收及上網的設備結合電子商務的構想，隨著資訊科技的進步，已經逐漸的被實現發展起來。

以手機隨時隨地上網進行即時資訊的瀏覽、接收簡訊、金融轉帳、甚至股票下單等，成為大哥大相關業者為吸引消費者申辦手機門號的必備附帶產品，在不久之後，行動電子商務服務可能取代手機商品，而成為主角。

目的

電子商務的主要目的是在降低成本、增加與顧客之間的互動，

以及增進服務的品質。

降低成本 : 大多數人都傾向選擇省時、省事的方式，獲得想要的東西，因此電子商務一旦造就這樣的便利性，就能持續成長；相對地，實體商務便會隨之萎縮。

增加與顧客之間的互動 : 客戶服務

－產品售後服務、退換貨問題

－銷售前的各種資訊的整理與應用

－是否提供即時的訂單查詢與物品的寄送狀態。

(2)

增進服務的品質 : 透過電腦與資訊網路從事各種商業交易活

動，目的在於因應企業組織及商業需求，達到降低成本、增

進商品及服務品質、加強服務提供效率的目標。

(3)

關於 FU 網路商店

網路行銷，是指從瀏覽、訂購、付款、扣帳等所有交易流程都在網路完成的，才可以稱為網路商店！消費者透過電腦網路，進入網路上之電子商店，瀏覽商品並購買商品，稱之為線上購物。所購買之商品，可為數位化產品透過網路或實體商品實體配送。

網路商店是建立在網路世界中的虛擬商店，與傳統超市及百貨公司不同的是，到網路商店消費的顧客不必出門，而是在家中透過電腦的連線選購。而商店的老闆也不用將笨重的商品搬到店鋪中等著上門，而是將商品的型錄及影像以多媒體的方式透過全球資訊網，呈現在消費者的電腦畫面。

無貨架商店的網路商店購物，與傳統型錄購物及電視購物最大的不同點是具有高度的互動性及娛樂性。消費者透過電腦可以輕鬆到任何一家電子商店瀏覽及比價，對於陌生的商品也可以進一步察看產品說明。而如果你依然對這項產品有疑問，你也可以立刻發一封電子郵件詢問更進一步的資料。

(5)

製作 FU 網站商店

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

利用FrontPage 網頁編輯工具，網頁製作方式就完全改觀了。它是個

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

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

(6)

製作 FU 過程

主頁

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

主頁程式碼

(7)

<html>

<head>

charset=big5">

<title>外套專賣店</title>

</head>

<img border="0" src="th.jpg" width="424"

height="414"></a></p>

<p align="center"><i><font color="#FF0000" face="標楷體"

size="6">進入主頁點擊圖片</font></i></p>

</body>

</html>

(8)

首頁

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

首頁程式碼

(9)

<html>

<head>

charset=big5">

</head>

<frame name="left" scrolling="no" noresize target="rtop"

src="menu.htm">

</frameset>

<body>

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

</body>

</noframes>

</frameset>

</html>

(10)

會員登入

以 FRONT PAGE 2003 製作會員登入，利用表單的功能

輸入文字構成，購買時需要登入帳號、密碼才能進行購物。

(11)

會員登入程式碼

<html>

<head>

charset=big5">

</head>

<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">        &

nbsp; 

</font><font size="6">

</font><font size="6">

        </font><b

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

</form>

</body>

(12)

</html>

會員註冊

以 FRONT PAGE 2003 製作會員註冊，利用

表單的功能修改成註冊會員需要的文字，來針

對未註冊的會員。

(13)

會員註冊程式碼

<html>

<head>

</head>

<p align="center">新增會員資料</p>

<hr>

<p align="center"><font size="5">帳號 : <input type="text"

name="T1" size="20"></font></p>

<p align="center"><font size="5">姓名 : <input type="text"

<p align="center"><font size="5">性別 : <input type="radio"

value="0" checked name="R1">男

<p align="center"><font size="5">電話 : <input type="text"

<p align="center"><font size="5">住址 : <input type="text"

<p align="center"><font size="5"><input type="submit"

value="送出" name="B1"><input type="reset" value="重新設定"

name="B2"></font></p>

</form>

</body>

(14)

</html>

PHP

PHP 會員註冊資料庫，會員註冊帳號密碼時

我會看到，經通過後才能在網頁上登入。

(15)

產品介紹

以 FRONT PAGE 2003 產品介紹，會把需要

賣出的商品放置產品介紹，以方便對商品感興

趣的會員購買。

(16)

產品介紹程式碼

<html>

<head>

charset=big5">

</head>

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

</font></b></i></p>

<tr>

<img border="0" src="002.jpg" width="237"

height="274">    編號 1</td>

<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, 0); font-family: 新細明體; font-style: italic; font-variant: normal; letter-

(17)

spacing: normal; line-height: 22.164154052734375px; orphans:

　</h1>

<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:

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

</tr>

<tr>

height="203">      

編號2</td>

<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>

</tr>

<tr>

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

(18)

<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">Hollister HCO 男生 Paradise Cove Hoodie </span></h1>

align="center">

　</h1>

align="center">

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

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

align="center">

　</p>

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

(19)

align="center">

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

</tr>

</table>

</body>

</html>

本週熱賣

(20)

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

本週熱賣程式碼

<html>

<head>

(21)

charset=big5">

</head>

<p

align="left">       &nbs p;        

<font size="7">    <font color="#FF0000"

face="標楷體"><i><b>

HOT</b></i></font></font></p>

<tr>

<p align="center"><img border="0" src="11.jpg"

width="292" height="295"></td>

　</p>

<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">

<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:

0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px">

(22)

材質：皮革+聚酯纖維</font></b></p>

<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>

<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">

<td>

</tr>

</table>

<img border="0" src="111.jpg" width="550" height="528"

align="left"></p>

</body>

</html>

(23)

購物車

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

讓費您寶貴的時間。

購物車程式碼

<?php

session_start();

//header("Content-Type: text/html; charset=big5");

(24)

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 terry0412 if (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 terry0412

else 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) { // 加入商品數量

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>";

}

(25)

// 更新購物車 by terry0412

else 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'";

}

// 更新資料 else {

$sql_query = "UPDATE shoppingcart SET item_count = '$item_count' where member_acc = '$member_acc' and key_id = '$key_id'";

} }

// 確認結帳 by terry0412

else 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);

(26)

?>

<html>

<head>

charset=utf8">

<title>查看購物車</title>

</head>

<?php

//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 "我的購物車：<br><br>";

// 表頭內容 echo "<tr>";

echo " <th width='5%'>　</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;

// 表格內容

while ($row_result = mysql_fetch_assoc($result)) { echo "<tr>";

echo " <td>";

echo " <p align='center'>";

(27)

// 刪除購物車內的商品

echo " <button name='remove-item' value='" .

$row_result["key_id"] . "'>移除</button></td>";

echo " <td>";

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>";

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>";

(28)

echo " </table>";

echo "</table>";

echo "</form>";

} else { // 結帳

echo " <p>=== 您的訂單===</p>";

// 表頭內容 echo " <tr>";

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;

// 表格內容

while ($row_result = mysql_fetch_assoc($result)) { echo " <tr>";

echo " <td>";

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 動作

(29)

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>";

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>

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>

(30)

購物車 PHP

利用到 PHP 資料庫，讓顧客想買的商品先存到自己購物

車裡面再進行購買，不會單單購買一件商品。

(31)

甘特圖

2013/

12 月

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

討論主題

網頁架設

尋找資料

網頁美觀

輸入資料庫

討論書面報告

書面報告

註記 : 完成預計完成

(32)

專題成果

(33)

(34)

FU網路商店行銷

動機

讓網路上的人們知道我們的服務品質而想來我們網站購買 來增加利益。

行動電子商務，以手機或 PDA 等無線接收及上網的設備結 合電子商務的構想，隨著資訊科技的進步，已經逐漸的被 實現發展起來。

以手機隨時隨地上網進行即時資訊的瀏覽、接收簡訊、金 融轉帳、甚至股票下單等，成為大哥大相關業者為吸引消 費者申辦手機門號的必備附帶產品，在不久之後，行動電 子商務服務可能取代手機商品，而成為主角。

目的

電子商務的主要目的是在降低成本、增加與顧客之間的互動，

以及增進服務的品質。

降低成本 : 大多數人都傾向選擇省時、省事的方式，獲得想 要的東西，因此電子商務一旦造就這樣的便利性，就能持續 成長；相對地，實體商務便會隨之萎縮。

增加與顧客之間的互動 : 客戶服務

－產品售後服務、退換貨問題

－銷售前的各種資訊的整理與應用

－是否提供即時的訂單查詢與物品的寄送狀態。

增進服務的品質 : 透過電腦與資訊網路從事各種商業交易活

動，目的在於因應企業組織及商業需求，達到降低成本、增

進商品及服務品質、加強服務提供效率的目標。

目錄

動機

目的

關於 FU 網站商店

製作 FU 軟體

主頁、程式碼

首頁、程式碼

會員登入、程式碼

會員註冊、程式碼、PHP

產品介紹、程式碼

本週熱賣、程式碼

購物車、程式碼、PHP

甘特圖

專題成果

關於 FU 網路商店

製作 FU 網站商店

製作 FU 過程

主頁

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

主頁程式碼

首頁

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

首頁程式碼

會員登入

以 FRONT PAGE 2003 製作會員登入，利用表單的功能

輸入文字構成，購買時需要登入帳號、密碼才能進行購物 。

會員登入程式碼

會員註冊

以 FRONT PAGE 2003 製作會員註冊，利用

表單的功能修改成註冊會員需要的文字，來針

對未註冊的會員。

會員註冊程式碼

PHP

PHP 會員註冊 資料庫，會員註冊帳號密碼時

我會看到，經通過後才能在網頁上登入。

產品介紹

以 FRONT PAGE 2003 產品介紹，會把需要

賣出的商品放置產品介紹，以方便對商品感興

趣的會員購買。

產品介紹程式碼

本週熱賣

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

本週熱賣程式碼

購物車

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

讓費您寶貴的時間。

購物車程式碼

購物車 PHP

利用到 PHP 資料庫 ，讓顧客想買的商品先存到自己購物

車裡面再進行購買，不會單單購買一件商品。

甘特圖

註記 : 完成 預計完成

專題成果

讓網路上的人們知道我們的服務品質而想來我們網站購買來增加利益。

行動電子商務，以手機或 PDA 等無線接收及上網的設備結合電子商務的構想，隨著資訊科技的進步，已經逐漸的被實現發展起來。

以手機隨時隨地上網進行即時資訊的瀏覽、接收簡訊、金融轉帳、甚至股票下單等，成為大哥大相關業者為吸引消費者申辦手機門號的必備附帶產品，在不久之後，行動電子商務服務可能取代手機商品，而成為主角。

降低成本 : 大多數人都傾向選擇省時、省事的方式，獲得想要的東西，因此電子商務一旦造就這樣的便利性，就能持續成長；相對地，實體商務便會隨之萎縮。

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

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

輸入文字構成，購買時需要登入帳號、密碼才能進行購物。

PHP 會員註冊資料庫，會員註冊帳號密碼時

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

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

利用到 PHP 資料庫，讓顧客想買的商品先存到自己購物

註記 : 完成預計完成