此為備份,原文請看我的文章:

[習題]泡沫紅茶店 飲料訂購[小]系統--觀念篇

[習題]泡沫紅茶店 飲料訂購[小]系統--HTML畫面篇

 

 

坊間的泡沫紅茶店,要自己搞一個網站訂購系統。

下面的範例不難,但湊在一起,很討厭。

對初學者來說,最難的應該是「自訂資料表」,然後是寫程式。

 

先來看看這支程式的執行結果:

=================================================

1. 一開始,有客戶來訂飲料。   先留下他的個人資料

 

2. 寫完客戶資料後,請按下按鈕。畫面就會出現這次的「訂單編號」

(給資料庫自動產生ID編號,比較不用傷腦筋!)   此舉便完成了一張全新的訂單!

 

3. 在畫面的橘色部份,可以開始訂購飲料。

       每次訂一種飲料(飲料已經事先建立好,在 drink_product資料表裡面,後面會介紹)

      這種產品,訂幾杯?要去冰還是少冰?要全糖或是半糖?

按下確認按鈕,畫面最下方會立刻出現一份小報表(GridView),即時列出這名客人訂購的所有飲料品項~

這個範例我寫得很粗糙,思慮不週,請莫見怪。

只是告訴初學者,學個幾招。

如果能夠熟練,還是能拼湊出很多花樣的 

 

 

 

自訂資料表:

=================================================

一般的訂單系統,通常會分成Master / Detail兩種。

[drink_order_m] 資料表,用來記錄客戶的名稱與電話(Master)。

       id(自動編號) / order_time(訂單日期) / user_name(客戶名稱) / user_phone(電話) / meno(備註)

[drink_order_d] 資料表,用來記錄客戶的名稱與電話(Detail)。

       id(自動編號) / order_id(跟上面的Master作關聯,也就是上表的id欄位) / drink_name(飲料名稱) / ice_degree(冰度) / sweet_degree(糖度) /  drink_no(客戶訂購幾杯)

[drink_product] 資料表,本店販售的所有飲料種類、售價、成本。事先都Key in在裡面囉~

      例如:  紅茶(大) /  20(售價)  / 15(成本)
                    可樂(大) /  25  / 17

 

各位看官(初學者),當您看到我上面規劃的三個資料表,卻看不出其中的關聯性?

那.....下面就不用看下去了。

因為您的「問題」不在於「不會寫程式」,而是連基礎規劃都作不到。

您最好先用一個簡單的Table(別人規劃好的),當成DB樣本,寫幾支程式。把資料存取先學好再說囉!

小弟廣告一下,我的書裡面的範例,剛好就是這樣入門的。

 

HTML畫面 & 程式:

=================================================

這支程式,分成三層。

  • 最上面一層,是給客戶留下個人資料的。對應[drink_order_m] 資料表。
  • 中間那一層,是給客戶點飲料(點菜)。對應[drink_order_d] 資料表。  一對多!一個客戶可以訂購多杯飲料
    • 飲料種類,已經是先寫好在[drink_product]資料表。我們只是撈出來,放在 DropDownList控制項來呈現。
    • 這是整支程式最基本、最簡單的部份,請看本書 3.7節。如果您看了卻不會,那基礎太薄弱了,這篇文章千萬不要看下去了。
  • 最底下那一層,是把客戶剛剛訂的飲料,列出一張明細表(用GridView來作,最簡單)。
    • 每點一份飲料,就會把這筆資料 & 訂單編號一起新增到[drink_order_d]資料表
    • 重新作資料繫結(DataBinding),把這份訂單的最新資料,呈現在GridView裡面。
    • 這也是整支程式最基本、最簡單的部份,請看本書第七章。如果您看了卻不會,那基礎太薄弱了,這篇文章千萬不要看下去了。

 

HTML畫面,要社定的東西有點多。     我下一篇文章再來慢慢解釋~

 

為了縮減寫程式的時間,我大量使用現成的 SqlDataSource控制項,

因為他會幫我們自動產生程式碼,尤其是 Insert / Select這些SQL指令。

能自己寫,當然最好......

 

 

抱歉!我下班了,HTML畫面與程式的部份,下回分解。

 

 

有了上一篇文章的經驗,我們直接寫程式吧。

這個簡單的飲料訂購系統,HTML畫面的設計,卻有點小複雜。
我只能說:這範例是給本書讀者的售後服務

這些小技巧,我在書裡面都有提過,也提供章節讓您回頭參考。

 

首先,先設計ASP.NET的HTML畫面(我昨晚回家時稍微想了一下,畫面有些更動)

HTML畫面分成三層,對初學者可能有點複雜:

--------------------------------------------------------------------------------------------------------------------------------

最上面的第一層,主要是輸入客戶的個人資料,對應[drink_order_m]資料表。

SqlDataSource_Order_M,幫我們寫好了 Insert的SQL指令,這段的作法請看我以前發表過的文章,ADO.NET #4(改),自己設定輸入畫面,讓SqlDataSource幫我們完成「新增」一筆資料

操作畫面如下:

輸入完成後,會把「開始訂購」這個按鈕隱藏(Button1.Visible = false),避免重複輸入。

然後撈出這筆訂單的「id編號」,以 Label1_order_id呈現在畫面上。

您可以使用 ViewState或是 Session來記錄這個 「訂單的id編號」,因為下面會重複用到。

ViewState與Session,都是屬於「狀態管理」。請看本書第十六章,這也是本書特色,別的書可能覺得太基本了,都不提這一部份。

第一層的HTML碼如下:

01 客戶名稱:<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
02         <br />
03         客戶電話:<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
04         <br />
05         備&nbsp;&nbsp;&nbsp; 註:<asp:TextBox ID="TextBox3" runat="server" Height="50px"  
06             Width="250px"></asp:TextBox>
07 &nbsp;
08 <asp:Button ID="Button1_Order" runat="server" Text="==開始訂購==" onclick="Button1_Order_Click" />
09         &nbsp;<asp:Label ID="Label1_order_id" runat="server" ForeColor="Red"></asp:Label>
10         <br />
11         <asp:SqlDataSource ID="SqlDataSource_Order_M" runat="server"  
12             ConnectionString="<%$ ConnectionStrings:testConnectionString %>"  
13             InsertCommand="INSERT INTO [drink_order_m] ([order_time], [user_name], [user_phone], [memo]) VALUES (getdate(), @user_name, @user_phone, @memo)" >
14             <InsertParameters>
15                 <asp:ControlParameter ControlID="TextBox1" Name="user_name" PropertyName="Text" Type="String" />
16                 <asp:ControlParameter ControlID="TextBox2" Name="user_phone" PropertyName="Text" Type="String" />
17                 <asp:ControlParameter ControlID="TextBox3" Name="memo" PropertyName="Text" Type="String" />
18             </InsertParameters>
19         </asp:SqlDataSource>

 

--------------------------------------------------------------------------------------------------------------------------------

中間的第二層,也是本範例最複雜的部份。

主要是輸入「訂購的飲料(產品)種類」,對應[drink_product]與[drink_order_d]資料表。

 

第二層#1

我們用 DropDownList1 + SqlDataSource_Drink,自動撈出[drink_product]資料表的內容。

並且設定 DropDownList1 為「AutoPostBack」,當我們一挑選飲料, Lable2就會自動出現「飲料的名稱」。

這是整支程式最基本、最簡單的部份,請看本書 3.7節

操作畫面如下:

 

01 <b><span class="style2">飲料:
02     <asp:DropDownList ID="DropDownList1" runat="server"  
03         DataSourceID="SqlDataSource_Drink" DataTextField="drink_name"  
04         DataValueField="id"  
05         onselectedindexchanged="DropDownList1_SelectedIndexChanged"  
06         AutoPostBack="True">
07     </asp:DropDownList>  
08  
09     <asp:SqlDataSource ID="SqlDataSource_Drink" runat="server"  
10         ConnectionString="<%$ ConnectionStrings:testConnectionString %>"  
11         SelectCommand="SELECT [drink_name], [id], [drink_price] FROM [drink_product]">
12     </asp:SqlDataSource>    

 

 

第二層#2

每次訂購一種飲料,就會立即寫入 [drink_order_d]資料表裡面。操作畫面如下:

這裡要解釋的,是圖片中紅色框框的部份。

為了讓初學者好入門,我盡量不寫程式,交給 SqlDataSource自動產生 Insert的SQL指令。

這部份的操作,請看我以前發表過的文章,ADO.NET #4(改),自己設定輸入畫面,讓SqlDataSource幫我們完成「新增」一筆資料 (相同作法,本範例用了兩次了)

01 <asp:Label ID="Label2_drink_name" runat="server" ForeColor="Blue"></asp:Label>
02 &nbsp;&nbsp; / &nbsp; &nbsp;
03  
04     <asp:TextBox ID="TextBox4_no" runat="server" Width="50px"></asp:TextBox>
05     杯&nbsp;&nbsp;&nbsp;
06      
07     <asp:DropDownList ID="DropDownList2_ice" runat="server">
08         <asp:ListItem Value="去冰" Selected>去冰</asp:ListItem>
09         <asp:ListItem Value="少冰">少冰</asp:ListItem>
10     </asp:DropDownList>
11 &nbsp;&nbsp;&nbsp;
12     <asp:DropDownList ID="DropDownList3_sweet" runat="server">
13         <asp:ListItem Value="無糖" Selected>無糖</asp:ListItem>
14         <asp:ListItem Value="少糖">少糖</asp:ListItem>
15         <asp:ListItem Value="全糖">全糖</asp:ListItem>
16     </asp:DropDownList>
17 &nbsp;&nbsp;&nbsp;
18     <asp:Button ID="Button2_Drink" runat="server" Text="訂購的飲料種類"  
19         onclick="Button2_Drink_Click" />
20      
21     </span></b><br />&nbsp;&nbsp;&nbsp;</span>
22      
23  
24      
25     <asp:SqlDataSource ID="SqlDataSource_Order_D" runat="server"  
26         ConnectionString="<%$ ConnectionStrings:testConnectionString %>"          
27         InsertCommand="INSERT INTO [drink_order_d] ([order_id] ,[drink_id], [drink_name], [ice_degree], [sweet_degree], [drink_no]) VALUES (@order_id, @drink_id, @drink_name, @ice_degree, @sweet_degree, @drink_no)" >
28         <InsertParameters>
29             <asp:SessionParameter Name="order_id" SessionField="order_m_id" />
30             <asp:ControlParameter ControlID="DropDownList1" Name="drink_id"  
31                 PropertyName="SelectedValue" />
32             <asp:ControlParameter ControlID="Label2_drink_name" Name="drink_name"  
33                 PropertyName="Text" Type="String" />
34             <asp:ControlParameter ControlID="DropDownList2_ice" Name="ice_degree"  
35                 PropertyName="SelectedValue" Type="String" />
36             <asp:ControlParameter ControlID="DropDownList3_sweet" Name="sweet_degree" PropertyName="SelectedValue"  
37                 Type="String" />
38             <asp:ControlParameter ControlID="TextBox4_no" Name="drink_no" PropertyName="Text"  
39                 Type="Int32" />
40         </InsertParameters>

 

--------------------------------------------------------------------------------------------------------------------------------

最下方的第三層,最簡單!只是利用 GridView的現成功能。

如上圖,當我們訂購一種飲料。  GridView就會立即出現目前訂購的飲料清單

我們將要解釋下圖「紅色框框」的部份

 

這很簡單啊,當他按下「訂購」按鈕之後,除了把資料寫入,並且讓GridView重新撈資料出來(重新資料繫結,重新DataBinding)如此而已。

本書有五大章(約250頁)都在介紹 GridView各種作法,而這是最簡單的一種。

 

 

 ====================================================================

想不到這個範例,不好說明啊。     

完整的程式,請自行下載參閱。Drink_order.rar

本範例不提供任何保固與回答,僅供參考。

 

如果您是初學者,卻看不懂上面的範例。

    第一,您的基礎不穩,很多基本動作都不熟練。

    第二,我在BLOG上面無法解釋太詳細,這是我的錯。

              BLOG上面放太多圖片,文章排版很容易亂掉。很麻煩、速度也會很慢。

永遠不要認為自己看不懂,就是「笨」、就是「沒有寫程式的天分」

 

 

 

.....................................................................................................................................................................................
ASP.NET專題實務ASP.NET專題實務(文魁出版 / P8187)

2008/八月份 天瓏書局排行榜前十名

.............................................................................................................. 寄信給我    mis2000lab (at) 雅虎.com.台灣 ........

創作者介紹

MIS2000 Lab -- ASP.NET專題實務 / 線上教學文件

MIS2000 Lab 發表在 痞客邦 PIXNET 留言(0) 人氣()