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 baithosupermarket@yahoo.com, 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 baithosupermarket@yahoo.com, 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 administrators@eBuy.com.vn, 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ử 11 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 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Ử 12 BÀI THỰC HÀNH 2 Mục đích và yêu... Kích nút Thanh toán, sẽ lưu giỏ hàng vào cơ sở dữ liệu Giảng viên Nguyễn Thị Minh Thi Khoa CNTT - Đại học Duy Tân Bài tập thực hành Kỹ thuật thương mại điện tử Giảng viên Nguyễn Thị Minh Thi 30 Khoa CNTT - Đại học Duy Tân 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Ử 31 BÀI THỰC HÀNH 6 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ích nút Thanh toán, sẽ lưu giỏ hàng vào cơ sở dữ liệu Giảng viên Nguyễn Thị Minh Thi Khoa CNTT - Đại học Duy Tân Bài tập thực hành Kỹ thuật thương mại điện tử Giảng viên Nguyễn Thị Minh Thi 32 Khoa CNTT - Đại học Duy Tân 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Ử 33 BÀI THỰC HÀNH 7 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... muahang.aspx, gồm các thông tin loại hàng, mặt hàng, giỏ hàng đọc từ cơ sở dữ liệu tương tự bài thực hành 3, 4, nhưng tất cả thông tin trên hiển thị trên cùng một trang muahang.aspx Giảng viên Nguyễn Thị Minh Thi Khoa CNTT - Đại học Duy Tân 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Ử 28 BÀI THỰC HÀNH 5 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ệ... 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 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Ử 26 BÀI THỰC HÀNH 4 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à cập nhật cơ sở dữ liệu: select, update,... 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 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Ử 17 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... mahang, soluong) 1 Thiết kế trang Masterpage như sau - Tạo User Control header.ascx, footer.ascx, và menu.ascx Giảng viên Nguyễn Thị Minh Thi Khoa CNTT - Đại học Duy Tân Bài tập thực hành Kỹ thuật thương mại điện tử 34 - Thiết kế tập tin bảng kiểu định dạng css, kết hợp với trang Master page - Bổ sung các trang nội dung sau cho trang Master page 2 Tạo Web form dangky.aspx cho phép người dùng nhập thông... 15%">    Giảng viên Nguyễn Thị Minh Thi Khoa CNTT - Đại học Duy Tân Bài tập thực hành Kỹ thuật thương mại điện tử 19       . 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. 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. } } 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