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ử
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
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
- 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
+ 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">
<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"/>
<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;
<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 />
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
<tr>
<td style="width: 15%"><div align="center">Hình</div></td>
<td style="width: 20%"><div align="center">Tên hàng </div></td>
<td style="width: 30%"><div align="center">Mô tả </div></td>
<td style="width: 10%"><div align="center">Đơn giá </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%"> <asp:Image ImageUrl="<%=img%>" ID="Image1"
runat="server" /></td>
<td style="width: 20%"> <%=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%"> <%=mota%></td>
<td style="width: 10%"> <%=dongia%></td>
<td> <asp:TextBox ID="TextBox1" runat="server"
Width="154px"></asp:TextBox>
<asp:Button ID="Button1" runat="server" Text="Button" /></td>
</tr>
<% }
reader.Close();
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ình</div></td>
<td bordercolor="#F0F0F0"><div align="center">Tên hàng </div></td>
<td bordercolor="#F0F0F0"><div align="center">Mô tả </div></td>
<td bordercolor="#F0F0F0"><div align="center">Đơn giá </div></td>
%>
</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>
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
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();
}
}
Copyright: Tài liệu đại học ©