Bài tập kỹ thuật thương mại điện tử potx

KHOA CÔNG NGHỆ THÔNG TIN ĐẠI HỌC DUY TÂN
KHOA CÔNG NGHỆ THÔNG TIN ĐẠI HỌC DUY TÂN
TÀI LIỆU THỰC HÀNH
Môn:
Giảng viên biên soạn: NGUYỄN THỊ MINH THI
Đà nẵng, năm 2010
Giảng viên Nguyễn Thị Minh Thi Khoa CNTT - Đại học Duy Tân
2
Bài tập thực hành Kỹ thuật thương mại điện tử
KT THƯƠNG MẠI ĐIỆN TỬ
BÀI THỰC HÀNH 1
Mục đích và yêu cầu:
Thiết kế và quản lý web tĩnh HTML bởi Microsoft Frontpage:
- Thao tác với Web Site, các trang Web
- Các định dạng cơ bản
- Tạo Hyperlink
- Tạo Table và định dạng Table
- Định dạng cải tiến
- Tạo Table, Frame
- Tạo Form
- Các hiệu ứng động của Microsoft FrontPage
Phân bổ thời gian: 3 giờ
Nội dung:
Bài 1: Thiết kế Web site Siêu thị Bài thơ Đà nẵng
Khởi động Microsoft FrontPage
1. Tạo Web site mới: File/ New, chọn One page web site, chỉ định thư mục lưu Web site mới
C:\SIEUTHI, OK
2. Thiết kế trang web gioithieu.htm như sau:
Giảng viên Nguyễn Thị Minh Thi Khoa CNTT - Đại học Duy Tân
3
Bài tập thực hành Kỹ thuật thương mại điện tử

- Tạo trang web mới: File/ New, chọn Blank Page (hay nút New)
- Đặt tiêu đề trang là Sieu thi Bai tho Da nang: kích nút phải mouse trên trang, chọn Page
Properties (hay chọn tab Folders, kích phải mouse trên trang gioithieu.htm, chọn Properties),
tab General, ở mục Title, gõ Sieu thi Bai tho Da nang
- Chèn hình ảnh WordArt Lời giới thiệu: Insert/ Picture/ WordArt
- Chèn các hình ảnh thanhngang.gif, emailto.gif, nextpage.jpg: Insert/ Picture/ From File
- Chèn hình ảnh ở đầu các đoạn văn bản: chọn khối văn bản “Siêu thị Bài thơ Đà nẵng…siêu
thị Bài thơ Đà nẵng”, Format/ Bullets and Numbering, chọn tab Picture Bullets, Specify
picture, nút Browse, tìm hình ảnh bullet.gif, OK
- Lưu trang web vào thư mục C:\THUCHANH với tên gioithieu.htm: File/ Save
3. Thiết kế trang web tieude.htm như sau:
- Tạo trang web mới: File/ New, chọn Blank Page (hay nút New)
- Chèn hình ảnh market.gif
- Chèn hình nền trang là nenden.gif: kích nút phải mouse trên trang, chọn Page Properties
(hay Format/ Background), tab Formatting, chọn Background picture, chọn nút Browse để
tìm hình nenden.gif
- Lưu trang web vào thư mục C:\THUCHANH với tên tieude.htm: File/ Save
- Đóng Web site Siêu thị Bài thơ Đà nẵng: File/ Close Site
Chú ý:
- Xem trang web ở chế độ Preview
- Xem trang web trong trình duyệt: File/ Preview in Browser (hay nút Preview in Browser)
- Xem và ghi lại các thẻ (tag) và thuộc tính (Attribute) trang web ở chế độ HTML, tương
ứng với từng thành phần trên trang web
Bài 2
1. Mở Web site Siêu thị Bài thơ Đà nẵng: File/ Open Site, chọn thư mục C:\SIEUTHI, OK
2. Chỉnh sửa thiết kế trang gioithieu.htm
- Mở trang web gioithieu.htm: File/ Open (nút Open, hay chọn tab Folders, kích đúp vào
trang gioithieu.htm)
- Tạo liên kết hình ảnh Nextpage đến trang web mới gianhang.htm:
Kích nút phải mouse trên hình ảnh Nextpage, chọn Hyperlink (hay Insert/ Hyperlink), tab

Create New Document, gõ gianhang.htm, OK
- Tạo liên kết để gởi thư điện tử: chọn khối , kích phải
mouse trên khối, chọn Hyperlink (hay Insert/ Hyperlink), tab E-mail Address, ở mục E-mail
address, gõ địa chỉ E-mail , OK
- Tạo liên kết dạng bookmark trên trang gioithieu.htm:
Chèn hai hình ảnh trangtiep.gif, trangtruoc.gif ở đầu và giữa trang web, rồi chọn từng hình
ảnh, Insert/Bookmark, đặt tên bookmark cho từng hình ảnh lần lượt là trangtiep, trangtruoc
Chọn hình ảnh trangtiep, Insert/ Hyperlink, chọn trang gioithieu.htm, nút Bookmark, chọn
tên bookmark cần liên kết đến là trangtruoc, OK
Chọn hình ảnh trangtruoc, Insert/ Hyperlink, chọn trang gioithieu.htm, nút Bookmark, chọn
tên bookmark cần liên kết đến là trangtiep, OK
- Lưu trang web gioithieu.htm: File/ Save
3. Thiết kế trang chủ của Web site Siêu thị Bài thơ Đà nẵng index.htm như sau:
- Tạo trang web mới có phân chia khung trên, trái, phải: File/ New, More page templates,
tab Frames Pages, Banner and Contents, OK.
Giảng viên Nguyễn Thị Minh Thi Khoa CNTT - Đại học Duy Tân
4
Bài tập thực hành Kỹ thuật thương mại điện tử
Ở khung trên, chọn Set Initial Page, chọn trang tieude.htm, OK
Ở khung phải, chọn Set Initial Page, chọn trang gioithieu.htm, OK
Ở khung trái, chọn New Page để tạo trang web mới
- Bỏ đường viền quanh các khung: kích nút phải mouse trên khung, chọn Frame Properties
(hay Frames/ Frame Properties), chọn nút Frames Page, tab Frames, bỏ chọn Show Borders
- Lưu Web site: File/ Save, đặt tên trang web ở khung trái là menu.htm, chọn Save, tên trang
chủ là index.htm, Save
4. Thiết kế trang menu.htm
- Ở khung trái, trang menu.htm, đặt 2 liên kết:
Liên kết Giới thiệu đến trang gioithieu.htm
Liên kết Gian hàng đến trang gianhang.htm
- Chèn hình ảnh bd14752_.gif vào trước 2 liên kết

- Chọn hình nền cho trang menu.htm là nenxanh.jpg
5. Thiết kế trang Web gianhang.htm như sau:
- Mở trang Web gianhang.htm, thiết kế như sau
- Tạo bảng gồm 2 cột, 3 hàng: Table/ Insert/ Table (hay nút Insert Table)
Chọn 2 cột của hàng đầu tiên, Table/ Merge Cells
- Tạo Marquee cho dòng chữ Mời các bạn tham quan các gian hàng siêu thị: chọn khối dòng
chữ, Insert/ Web Component/ Marquee, chọn màu nền Background color, Finish
- Chèn hình ảnh ao2.jpg, xach.jpg, giay.jpg, banghe.jpg
- Tạo liên kết hình ảnh ao2.jpg đến trang mathang.htm:
Bấm nút phải Mouse trên hình ảnh ao2.jpg, chọn Hyperlink (hay Insert/ Hyperlink), chọn
trang mathang.htm, OK
Giảng viên Nguyễn Thị Minh Thi Khoa CNTT - Đại học Duy Tân
5
Bài tập thực hành Kỹ thuật thương mại điện tử
6. Thiết kế trang mathang.htm như sau:
- Mở trang Web mới: File/ New/ Page, Tab General, chọn Normal Page
- Tạo Marquee cho dòng chữ Các mặt hàng, định dạng phông chữ, cỡ chữ cho Marquee này
- Chèn hình ảnh sao.gif
- Chèn bảng gồm 4 cột, 2 hàng: Table/ Insert/ Table (hay nút Insert Table)
Chọn độ dày, màu đường viền bảng: bấm nút phải Mouse trên bảng, chọn Table Properties
(hay Table/ Properties/ Table), ở mục Borders Size: 2, Borders Color: chọn màu tuỳ ý
- Chèn hình ảnh ao1.jpg, ao2.jpg
- Lưu trang Web với tên mathang.htm: File/ Save
Giảng viên Nguyễn Thị Minh Thi Khoa CNTT - Đại học Duy Tân
6
Bài tập thực hành Kỹ thuật thương mại điện tử
7. Chọn Tab Folders, sao chép các hình ảnh vào thư mục IMAGE, các liên kết sẽ được tự
động cập nhật theo đường dẫn mới
- Lưu Web Site Siêu thị Bài thơ Đà nẵng
- Đóng Web Site

8. - Đóng trang chủ web index.htm: File/ Close
- Đóng Web site Siêu thị Bài thơ Đà nẵng: File/ Close Site
Bài 3
1. Tạo Web site mới: File/ New, chọn One page web site, chỉ định thư mục lưu Web site mới
C:\CTYSACH, OK
2. Thiết kế trang web gioithieu.htm như sau:
- Tạo trang web mới
- Chèn hình ảnh gioithieu.gif, quangcao.gif
- Đặt ký hiệu đầu các đoạn văn bản
- Để xuống dòng nhưng không chuyển sang đoạn mới: ấn Shift + ↵ (hay Insert/ Break/
Normal line break)
- Chèn ký hiệu: Insert/ Symbol, Font Wingdings 2
- Chèn thanh ngang: Insert/ Horizontal Line
- Tạo các liên kết để gởi E-mail , liên kết www.eBuy.com.vn
đến trang chủ mới default.htm
- Tạo hiệu ứng khi chuyển từ trang web gioithieu.htm sang trang web khác: Format/ Page
Transition, chọn Event: Page Exit, Duration: 2, Transition effect: Circle in
Giảng viên Nguyễn Thị Minh Thi Khoa CNTT - Đại học Duy Tân
7
Bài tập thực hành Kỹ thuật thương mại điện tử
3. Thiết kế trang chủ default.htm như sau:
- Tạo trang web mới có phân chia khung đầu, trái, phải, cuối: File/ New, More page
templates, tab Frames Pages, Header Footer and Contents, OK.
Ở khung đầu, trái, cuối chọn New Page để tạo trang web mới
Ở khung phải, chọn Set Initial Page, chọn trang gioithieu.htm, OK
- Bỏ đường viền quanh các khung: kích nút phải mouse trên khung, chọn Frame Properties
(hay Frames/ Frame Properties), chọn nút Frames Page, tab Frames, bỏ chọn Show Borders
- Lưu Web site: File/ Save, đặt tên trang web ở khung đầu là dau.htm, chọn Save, tên trang
web ở khung trái là trai.htm, Save, tên trang web ở khung cuối là cuoi.htm, tên trang chủ là
default.htm, Save

Giảng viên Nguyễn Thị Minh Thi Khoa CNTT - Đại học Duy Tân
8
Bài tập thực hành Kỹ thuật thương mại điện tử
4. Thiết kế trang web dau.htm
- Mở trang web dau.htm, thiết kế như sau
- Tạo bảng gồm có 3 hàng, 4 cột như sau:
Hỗn hợp các ô cần thiết: chọn khối các ô, rồi chọn Table/ Merge Cells




- Chèn các hình ảnh qcsach.gif, banner_eqmuaban.gif, banner2.gif, btntrangchu1.jpg,
btnsanpham1.jpg, btndangnhap1.jpg, btnemail1.jpg, btngiohang1.jpg, btntimkiem1.jpg
- Chèn các đối tượng Textbox, Drop-Down Box
- Chèn hình ảnh timkiem1.jpg, tạo liên kết hình ảnh này đến trang web mới timkiem.htm
- Gõ dòng chữ Welcome to Web site www.eBuy.com.vn
Tạo Marquee cho dòng chữ này: chọn khối, Insert/ Web Component/ Dynamic Effects/
Marquee
- Tạo liên kết hình ảnh btntrangchu1.jpg, btnsanpham1.jpg, btndangnhap1.jpg liên kết đến
trang gioithieu.htm, và các trang web mới sanpham.htm, dangnhap.htm
- Tạo hiệu ứng động khi đưa mouse đến các liên kết: hiển thị thanh công cụ DHTML
Effects: View/ Toolbars/ DHTML Effects, chọn hình ảnh, trên thanh công cụ chọn:
sự kiện đưa mouse đến liên kết: On: Mouse over
hiệu ứng động hoán chuyển hình ảnh: Apply: Swap picture
chọn hình ảnh hoán chuyển: Choose picture
Ví dụ: với liên kết hình ảnh btntrangchu1.jpg, chọn hình ảnh hoán chuyển là
btntrangchu2.jpg
Giảng viên Nguyễn Thị Minh Thi Khoa CNTT - Đại học Duy Tân
9
Bài tập thực hành Kỹ thuật thương mại điện tử

- Tạo hiệu ứng khi chuyển từ trang web gioithieu.htm sang trang web khác: Format/ Page
Transition, chọn Event: Page Exit, Duration: 2, Transition effect: Random
5. Thiết kế trang web trai.htm
- Chèn hình ảnh chudesach.gif
- Định dạng trang:
Chọn màu nền cho trang web
Thiết lập lề trên, lề trái trang về 0
- Gõ các chủ đề sách, ấn Shift - ↵ để xuống dòng (hay Insert/ Break, Normal line break)
- Bạn có thể tạo liên kết các chủ đề sách đến các trang web mới, để hiện các sách tương ứng
với chủ đề chọn
6. Thiết kế trang web cuoi.htm
- Định dạng trang:
Chọn màu nền cho trang web
Thiết lập lề trên, lề trái trang về 0
7. Thiết kế trang web dangnhap.htm như sau:
- Tạo bảng như trên: Table/ Insert/ Table (hay nút Insert Table)
Chọn độ dày đường viền bảng: kích nút phải mouse trên bảng, chọn Table Properties (hay
Table/ Properties/ Table), ở mục Borders Size: 3
- Chèn hình ảnh dangnhap.gif
- Chèn các Textbox: Insert/ Form/ Textbox
- Thay dòng chữ trên nút Submit, và nút Reset: Kích phải mouse trên nút Submit hay nút
Reset, chọn Form Field Properties, ở mục Value: gõ Đăng nhập, hay Làm lại
Định dạng màu chữ trên nút: Format/ Font
- Định dạng form: kích phải mouse trên form, chọn Form Properties (hoặc Insert/ Form/
Form Properties), chọn Send to other, nút Options, xác định khi chọn nút Đăng nhập sẽ
chuyển đến trang sanpham.htm
- Tạo liên kết cho dòng chữ Click vào đây, đến trang dangky.htm
8. Thiết kế trang web dangky.htm như sau:
- Tạo bảng như trên, chèn thêm một bảng vào ô giữa trang
Định dạng màu nền bảng bên trong: kích nút phải mouse trên bảng, chọn Table Properties

(hay Table/ Properties/ Table), chọn màu ở mục Background Color
- Chèn các đối tượng Textbox, Checkbox, Option Button, Text Area
Định dạng Textbox Password để nhập mật khẩu: kích phải mouse trên Textbox, chọn Form
Field Properties, chọn Password field là yes, OK
- Thay nhãn trên nút Submit, và nút Reset: Kích phải mouse trên nút Submit hay nút Reset,
chọn Form Field Properties, ở mục Value: gõ Đăng ký, hay Làm lại
Định dạng đường viền quanh nút: Format/ Borders and Shading
- Định dạng form: kích phải mouse trên form, chọn Form Properties (hoặc Insert/ Form/
Form Properties), chọn Send to other, nút Options, xác định khi chọn nút Đăng ký sẽ chuyển
đến trang dangnhap.htm
Giảng viên Nguyễn Thị Minh Thi Khoa CNTT - Đại học Duy Tân
10
Bài tập thực hành Kỹ thuật thương mại điện tử
9. Chọn tab Folders, sao chép các hình ảnh vào thư mục IMAGE, các liên kết sẽ được tự
động cập nhật theo đường dẫn mới
- Lưu Web site Công ty sách
- Đóng Web site
Giảng viên Nguyễn Thị Minh Thi Khoa CNTT - Đại học Duy Tân
11
Bài tập thực hành Kỹ thuật thương mại điện tử
KT THƯƠNG MẠI ĐIỆN TỬ
BÀI THỰC HÀNH 2
Mục đích và yêu cầu:
- Tạo Web động sử dụng công nghệ lập trình ASP.NET
- Sử dụng môi trường phát triển và tích hợp ứng dụng Visual Studio. NET và ngôn ngữ lập
trình C#
- Các điều khiển trên Web Form:
+ Các điều khiển nhập
+ Các điều khiển danh sách
+ Các điều khiển chỉ thị

+ Các điều khiển kiểm tra giá trị hợp lệ
- Xử lý sự kiện OnClick và các sự kiện change
- Truyền dữ liệu giữa các Web form
- Duyệt giữa các Web form
Phân bổ thời gian: 3 giờ
Nội dung:
1. Xây dựng Web form Default.aspx
Khi kích nút Button hay ImageButton Next sẽ hiển thị dòng chữ Trang tiếp, kích nút Previous
hiển thị dòng chữ Trang trước, kích nút Home hiển thị dòng chữ Trang chủ
2. Tạo Web form Menu.aspx, kích vào các liên kết LinkButton, sẽ chuyển đến Web form
Gianhang.aspx, tuỳ thuộc người dùng chọn gian hàng nào, sẽ hiển thị:
a. Tên gian hàng đó trong một điều khiển Literal hay Label trên Web form hiện hành
b. Tên gian hàng đó trên một Web form khác
Giảng viên Nguyễn Thị Minh Thi Khoa CNTT - Đại học Duy Tân
12
Bài tập thực hành Kỹ thuật thương mại điện tử
3. Xây dựng Website như sau
- Web form Muahang.aspx: khách hàng lựa chọn mặt hàng cần mua, rồi chọn nút Mua, sẽ
chuyển đến Web form Giohang.aspx, chọn nút Xoá sẽ xóa thông tin khách hàng đã nhập vào
- Kiểm tra dữ liệu đơn giá nhập vào phải là số dương
- Kiểm tra dữ liệu số lượng nhập vào phải là số dương
- Tạo Web form Giohang.aspx hiện thông tin mặt hàng mà khách hàng đã chọn mua từ Web
form Muahang.aspx. Nếu khách hàng thuộc đối tượng giảm giá, khách hàng sẽ được giảm
10% thành tiền
Trang Muahang.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Muahang.aspx.cs"
Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
" /><html xmlns=" >
<head runat="server">

<title>Untitled Page</title>
<script language="javascript" type="text/javascript">
</script>
</head>
<body>
<form id="form1" runat="server">
<div style="text-align: center">
<span style="color: #cc0000">MUA HÀNG<br /></span>
<asp:Table ID="Table1" runat="server" HorizontalAlign="Center">
<asp:TableRow runat="server">
<asp:TableCell runat="server">Tên hàng</asp:TableCell>
Giảng viên Nguyễn Thị Minh Thi Khoa CNTT - Đại học Duy Tân
13
Bài tập thực hành Kỹ thuật thương mại điện tử
<asp:TableCell runat="server">
<asp:DropDownList ID="tenhang" runat="server">
<asp:ListItem>&#193;o sơ mi tay d&#224;i</asp:ListItem>
<asp:ListItem>&#193;o sơ mi tay ngắn</asp:ListItem>
<asp:ListItem>&#193;o thun tay ngắn</asp:ListItem>
</asp:DropDownList>
</asp:TableCell>
</asp:TableRow>
<asp:TableRow runat="server">
<asp:TableCell runat="server">Đơn giá</asp:TableCell>
<asp:TableCell runat="server">
<asp:TextBox ID="dongia" runat="server"></asp:TextBox><br />
</asp:TableCell>
</asp:TableRow>
<asp:TableRow runat="server">
<asp:TableCell runat="server">Số lượng</asp:TableCell>

<asp:TableCell runat="server"><asp:TextBox ID="soluong"
runat="server"></asp:TextBox><br /></asp:TableCell>
</asp:TableRow>
<asp:TableRow runat="server">
<asp:TableCell runat="server">Đối tượng</asp:TableCell>
<asp:TableCell runat="server">
<asp:RadioButtonList ID="doituong" runat="server"
RepeatDirection="Horizontal">
<asp:ListItem Value="bt" Selected="True">Binh thuong</asp:ListItem>
<asp:ListItem Value="gg">Giam gia</asp:ListItem>
</asp:RadioButtonList>
</asp:TableCell>
</asp:TableRow>
<asp:TableRow runat="server">
</asp:TableRow>
</asp:Table>
<asp:Button ID="Button1" runat="server" Text="Mua hàng"
OnClick="Button1_Click"/>&nbsp;
<asp:Button ID="Button2" runat="server" Text=" Xóa " OnClick="Button2_Click"/>
</div>
</form>
</body>
</html>
Trang Muahang.aspx.cs
using System;
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;

using System.Web.UI.WebControls;
Giảng viên Nguyễn Thị Minh Thi Khoa CNTT - Đại học Duy Tân
14
Bài tập thực hành Kỹ thuật thương mại điện tử
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
public partial class _Default : System.Web.UI.Page {
protected void Button1_Click(object sender, EventArgs e) {
Context.Items["tenhang"] = tenhang.Text;
Context.Items["dongia"] = dongia.Text;
Context.Items["soluong"] = soluong.Text;
Context.Items["doituong"] = doituong.Text;
Server.Transfer("Giohang.aspx");
}
protected void Button2_Click(object sender, EventArgs e) {
tenhang.SelectedIndex = 0;
soluong.Text = "";
dongia.Text = "";
doituong.SelectedIndex = 0;
}
}
Trang Giohang.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Giohang.aspx.cs"
Inherits="Giohang" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
" /><html xmlns=" >
<head runat="server">
<title>Untitled Page</title>
</head>
<body>

<form id="form1" runat="server">
<div style="text-align: center">
<span style="color: #990033">GIỎ HÀNG<br />
</span>
<br />
<asp:Table ID="Table1" runat="server" BorderColor="Black" GridLines="Both"
Width="711px" BorderStyle="Solid" CellPadding="0" CellSpacing="0"
HorizontalAlign="Center">
<asp:TableRow runat="server" ForeColor="#0000C0" BorderStyle="Solid">
<asp:TableCell runat="server" BorderStyle="Solid">Tên hàng</asp:TableCell>
<asp:TableCell runat="server" BorderStyle="Solid">Đơn giá</asp:TableCell>
<asp:TableCell runat="server" BorderStyle="Solid">Số lượng</asp:TableCell>
<asp:TableCell runat="server" BorderStyle="Solid">Giảm giá</asp:TableCell>
<asp:TableCell runat="server" BorderStyle="Solid">Thành tiền</asp:TableCell>
</asp:TableRow>
<asp:TableRow runat="server">
<asp:TableCell runat="server" BorderStyle="Solid"><%=th%></asp:TableCell>
<asp:TableCell runat="server" BorderStyle="Solid"><%=dg%></asp:TableCell>
<asp:TableCell runat="server" BorderStyle="Solid"><%=sl%></asp:TableCell>
Giảng viên Nguyễn Thị Minh Thi Khoa CNTT - Đại học Duy Tân
15
Bài tập thực hành Kỹ thuật thương mại điện tử
<asp:TableCell runat="server" BorderStyle="Solid"><%=giamgia*100%>
%</asp:TableCell>
<asp:TableCell runat="server" BorderStyle="Solid"><%=thanhtien
%></asp:TableCell>
</asp:TableRow>
</asp:Table>
</div>
<br />

&nbsp;
</form>
</body>
</html>
Trang Giohang.aspx.cs
using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
public partial class Giohang : System.Web.UI.Page {
protected string th;
protected string dg;
protected string sl;
protected double thanhtien;
protected double giamgia;
protected void Page_Load(object sender, EventArgs e){
th = (string) Context.Items["tenhang"];
dg = (string) Context.Items["dongia"];
sl = (string) Context.Items["soluong"];
string gg = (string) Context.Items["doituong"];
long sosl = Convert.ToInt64(sl);
long sodg = Convert.ToInt64(dg);
giamgia = 0;
if (gg.Equals("gg"))

giamgia=(double)10/100;
thanhtien = sosl * sodg * (1 - giamgia);
}
}
Giảng viên Nguyễn Thị Minh Thi Khoa CNTT - Đại học Duy Tân
16
Bài tập thực hành Kỹ thuật thương mại điện tử
KT THƯƠNG MẠI ĐIỆN TỬ
BÀI THỰC HÀNH 3
Mục đích và yêu cầu:
- Tạo Web động truy xuất cơ sở dữ liệu, sử dụng công nghệ lập trình ASP.NET
- Kết nối và truy vấn cơ sở dữ liệu khi thiết kế
- Kết nối và truy vấn cơ sở dữ liệu khi chạy chương trình
- Sử dụng các đối tượng:
+ Đối tượng kết nối Connection
+ Đối tượng Command
+ Đối tượng Data Reader
+ Đối tượng data adapter
+ Đối tượng DataSet
- Sử dụng các điều khiển RadioButtonList, DropDownList, và ràng buộc dữ liệu vào các
điều khiển RadioButtonList, DropDownList
- Sử dụng các điều khiển DataList, GridView và ràng buộc dữ liệu vào các điều khiển này
Phân bổ thời gian: 6 giờ
Nội dung:
- Tạo cơ sở dữ liệu như sau bằng các hệ quản trị cơ sở dữ liệu như Microsoft Access hay
SQL Server:
nhập vào 2, 3 bản ghi cho bảng LOAIHANG, MATHANG
1. Tạo Web form xemhang.aspx, hiển thị các mặt hàng từ bảng MATHANG, sử dụng phương
thức duyệt data reader
Giảng viên Nguyễn Thị Minh Thi Khoa CNTT - Đại học Duy Tân

17
Bài tập thực hành Kỹ thuật thương mại điện tử
Hướng dẫn
Cách 1: Kiểu mẫu Code Inline
Trang Default.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs"
Inherits="Default" %>
<%@ Import Namespace="System.Data" %>
<%@ Import Namespace="System.Data.SqlClient" %>
<script runat="server">
SqlConnection con=null;
SqlDataReader reader = null;
void Page_Load(Object source, EventArgs e)
{
con = new SqlConnection("server=(local);uid=sa;pwd=;database=banhang");
con.Open();
SqlCommand command = new SqlCommand("Select * from mathang", con);
reader = command.ExecuteReader();
}
</script>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
" /><html xmlns=" >
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<table width="100%" border="1" cellpadding="0" cellspacing="0"
bordercolor="#000000">

<tr>
<td style="width: 15%"><div align="center">H&igrave;nh</div></td>
<td style="width: 20%"><div align="center">T&ecirc;n h&agrave;ng </div></td>
<td style="width: 30%"><div align="center">M&ocirc; t&#7843; </div></td>
<td style="width: 10%"><div align="center">&#272;&#417;n gi&aacute; </div></td>
<td><div align="center">
Số lượng</div></td>
</tr>
<% while (reader.Read())
{
string tenhang = reader.GetString(0);
string mota = reader.GetString(1);
string dongia = reader.GetString(2);
string img = reader["hinh"].ToString();
%>
<tr>
<td style="width: 15%">&nbsp;<asp:Image ImageUrl="<%=img%>" ID="Image1"
runat="server" /></td>
<td style="width: 20%">&nbsp;<%=tenhang%></td>
Giảng viên Nguyễn Thị Minh Thi Khoa CNTT - Đại học Duy Tân
18
Bài tập thực hành Kỹ thuật thương mại điện tử
<td style="width: 30%">&nbsp;<%=mota%></td>
<td style="width: 10%">&nbsp;<%=dongia%></td>
<td>&nbsp;<asp:TextBox ID="TextBox1" runat="server"
Width="154px"></asp:TextBox>
<asp:Button ID="Button1" runat="server" Text="Button" /></td>
</tr>
<% }
reader.Close();

con.Close();
%>
</table>
</div>
</form>
</body>
</html>
Cách 2: Kiểu mẫu Code Behind
Trang Default.aspx.cs
using System;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using System.Data;
using System.Data.OleDb;
public partial class Default3 : System.Web.UI.Page {
protected OleDbDataReader reader = null;
protected OleDbConnection con = null;
protected void Page_Load(object sender, EventArgs e) {
con = new OleDbConnection();
try {
con.ConnectionString = "Provider=Microsoft.Jet.OLEDB.4.0;Data Source="
+ Server.MapPath("bh.mdb") + ";Persist Security Info=False";
con.Open();
string query = "select * from mathang";

OleDbCommand command = new OleDbCommand(query, con);
reader = command.ExecuteReader();
}
catch (Exception err)
{
Response.Write("<b>Error</b>" + err.Message + "<p/>");
}
} }
Giảng viên Nguyễn Thị Minh Thi Khoa CNTT - Đại học Duy Tân
19
Bài tập thực hành Kỹ thuật thương mại điện tử
Trang Default.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default3.aspx.cs"
Inherits="Default3" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
" /><html xmlns=" >
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<div>
CHỌN MẶT HÀNG<br />
<table width="100%" border="1" cellpadding="0" cellspacing="0"
bordercolor="#333333">
<tr>
<td bordercolor="#F0F0F0"><div align="center">H&igrave;nh</div></td>
<td bordercolor="#F0F0F0"><div align="center">T&ecirc;n h&agrave;ng </div></td>
<td bordercolor="#F0F0F0"><div align="center">M&ocirc; t&#7843; </div></td>
<td bordercolor="#F0F0F0"><div align="center">&#272;&#417;n gi&aacute; </div></td>

<td bordercolor="#F0F0F0"><div align="center">S&#7889; l&#432;&#7907;ng
</div></td>
</tr>
<%
while (reader.Read())
{
String tenhang = reader["tenhang"].ToString();
String mota = reader["mota"].ToString();
String dongia = reader["dongia"].ToString();
String hinh = reader["hinh"].ToString();
%>
<tr>
<td bordercolor="#F0F0F0"><div align="center"><asp:Image ID="Image1" runat="server"
ImageUrl="<%=hinh%>" /></div></td>
<td bordercolor="#F0F0F0"><div align="center"><%=tenhang%></div></td>
<td bordercolor="#F0F0F0"><div align="center"><%=mota%></div></td>
<td bordercolor="#F0F0F0"><div align="center"><%=dongia%></div></td>
<td bordercolor="#F0F0F0"><div align="center">
<br />
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:Button ID="Button1" runat="server" Text="Button" />
</td>
</tr>
<%
}
reader.Close();
con.Close();
Giảng viên Nguyễn Thị Minh Thi Khoa CNTT - Đại học Duy Tân
20
Bài tập thực hành Kỹ thuật thương mại điện tử

%>
</table>
<br />
</form>
</body>
</html>
2. Tạo Web form loaihang.aspx, hiển thị các loại hàng từ bảng LOAIHANG vào danh sách
nút chọn RadioButtonList. Chọn loại hàng, rồi bấm Mouse vào nút Button Chọn, sẽ chuyển
đến Web form mathang.aspx
- Hay Web Form loaihang.aspx hiển thị các LinkButton loại hàng từ bảng LOAIHANG. Chọn
LinkButton loại hàng, sẽ chuyển đến Web form mathang.aspx
- Hay Web Form loaihang.aspx hiển thị các loại hàng trong hộp danh sách DropDownList.
Chọn loại hàng, sẽ chuyển đến trang Web form mathang.aspx
Giảng viên Nguyễn Thị Minh Thi Khoa CNTT - Đại học Duy Tân
21
Bài tập thực hành Kỹ thuật thương mại điện tử
- Tạo Web form mathang.aspx, truy vấn các mặt hàng từ bảng MATHANG thuộc loại hàng đã
chọn, và hiển thị vào GridView như sau
Trang loaihang.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="loaihang.aspx.cs"
Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
" /><html xmlns=" /><head runat="server">
<title></title>
<style type="text/css">
.style1 {
text-align: center;
}
</style>
</head>

<body>
<form id="form1" runat="server">
<div class="style1">
Giảng viên Nguyễn Thị Minh Thi Khoa CNTT - Đại học Duy Tân
22
Bài tập thực hành Kỹ thuật thương mại điện tử

DANH SÁCH LOẠI HÀNG<br />
<br />
<asp:DropDownList ID="ddlDanhSach" runat="server">
</asp:DropDownList>
<br />
<br />
<asp:Button ID="btnChon" runat="server" onclick="btnChon_Click" Text="Chọn" />

</div>
</form>
</body>
</html>
Trang loaihang.aspx.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using System.Data.SqlClient;
public partial class _Default : System.Web.UI.Page
{

protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
// Create the data connection.
string strcon = "server=(local);uid=sa;pwd=;database=quanlybanhang";
SqlConnection sqlCon = new SqlConnection(strcon);
sqlCon.Open();
// Create a SqlCommand
string query = "select * from loaihang";
SqlCommand command = new SqlCommand(query, sqlCon);
// Create a data reader
SqlDataReader reader = command.ExecuteReader();
// Bind the data to the DataList control
ddlDanhSach.DataSource = reader;
ddlDanhSach.DataTextField = "tenloai";
ddlDanhSach.DataValueField = "maloai";
ddlDanhSach.DataBind();
}
}
protected void btnChon_Click(object sender, EventArgs e)
{
Giảng viên Nguyễn Thị Minh Thi Khoa CNTT - Đại học Duy Tân
23
Bài tập thực hành Kỹ thuật thương mại điện tử
Context.Items["maloai"] = ddlDanhSach.SelectedValue;
Server.Transfer("mathang.aspx");
}
}
Trang mathang.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="mathang.aspx.cs"
Inherits="mathang" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
" /><html xmlns=" /><head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div style="text-align: center">

CHỌN MẶT HÀNG<br />
<br />
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False">
<Columns>
<asp:BoundField DataField="hinh" HeaderText="Hình ảnh" SortExpression="hinh"
/>
<asp:BoundField DataField="tenhang" HeaderText="Tên hàng"
SortExpression="tenhang" />
<asp:BoundField DataField="mota" HeaderText="Mô tả"
SortExpression="mota" />
<asp:BoundField DataField="dongia" HeaderText="Đơn giá" />
</Columns>
</asp:GridView>

</div>
</form>
</body>
</html>
Trang mathang.aspx.cs
using System;

using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using System.Data.SqlClient;
Giảng viên Nguyễn Thị Minh Thi Khoa CNTT - Đại học Duy Tân
24
Bài tập thực hành Kỹ thuật thương mại điện tử
public partial class mathang : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
string maloai = Context.Items["maloai"].ToString();
// Create the data connection.
string strcon = "server=(local);uid=sa;pwd=;database=quanlybanhang";
SqlConnection sqlCon = new SqlConnection(strcon);
sqlCon.Open();
// Create a SqlCommand
string query = "select * from mathang where maloai='" + maloai + "'";
SqlCommand command = new SqlCommand(query, sqlCon);
// Create a data reader
SqlDataReader reader = command.ExecuteReader();
GridView1.DataSource = reader;
GridView1.DataBind();
}
}

}
Giảng viên Nguyễn Thị Minh Thi Khoa CNTT - Đại học Duy Tân
25