Tài liệu hướng dẫn thực hành Thiết kế và lập trình web: Phần 1 - Trường ĐH Thủ Dầu Một

Tài liệu hướng dẫn thực hành học phần Thiết kế và Lập trình Web với mục đích: Cung cấp nguồn tài liệu hỗ trợ giảng viên trong việc giảng dạy học phần; Hỗ trợ sinh viên học tập học phần một cách hiệu quả. Mời các bạn cùng tham khảo nội dung phần 1 tài liệu dưới đây.

2

MỤC LỤC

IỚI T IỆU 4

C N 1 N ÔN N Ữ TML 5

1.1 Mục tiêu 5

1.2 Yêu cầu chung 5

1.3 Bài tập thực hành 5

Bài tập 1 Thiết kế trang Gioithieu.html 7

Bài tập 2 Thiết kế trang Left.html 10

Bài tập 3 Thiết kế trang Sanpham.html 11

Bài tập 4 Thiết kế trang Chitietsanpham.html 12

Bài tập 5 Thiết kế trang Dangnhap.html 13

Bài tập 6 Thiết kế trang Dangky.html 15

Bài tập 7 Thiết kế trang Right.html 17

Bài tập 8 Thiết kế trang Header.html 19

Bài tập 9 Thiết kế trang Nav.html 20

Bài tập 10 Thiết kế trang Trangchu.html 20

1.4 Bài tập áp dụng 24

C N 2 N ÔN N Ữ CSS 25

2.1 Mục tiêu 25

2.2 Bài tập thực hành 25

Bài tập 1 Định dạng phần Header 26

Bài tập 2 Định dạng phần Nav 27

Bài tập 3 Định dạng phần Body 30

Bài tập 4 Định dạng phần Footer 37

Bài tập 5 Định dạng trang Dangky.html 37

2.3 Bài tập áp dụng 38

C N 3 N ÔN N Ữ J V SCRIPT 39

3.1 Mục tiêu 39

3.2 Bài tập thực hành 39

Bài tập 1 Tạo trang Hello.html 39

Bài tập 2 Tạo trang Time.html 40

Bài tập 3 Kiểm tra thông tin trên trang Dangky.html 41

Bài tập 4 Tạo calendar 44

Bài tập 5 Tạo Slider chuyển hình 48

3.3 Bài tập áp dụng 50

3

C N 4 N ÔN N Ữ SP.NET 51

4.1 Mục tiêu 51

4.2 Tài nguyên sử dụng 51

4.3 Bài tập thực hành 55

Bài tập 1 Tạo Website và xây dựng lớp xử lý dữ liệu 55

Bài tập 2 Tạo các User Control và MasterPage 58

Bài tập 3 Xây dựng các trang hiển thị thông tin sách 65

Bài tập 4 Xây dựng các trang Đăng nhập, Đổi mật khẩu, Đăng ký 69

Bài tập 5 Xây dựng các trang xử lý giao dịch mua hàng 77

Bài tập 6 Xây dựng các trang quản trị 89

4.4 Bài tập áp dụng 100

TÀI LIỆU T M K ẢO 101

4

IỚI T IỆU Chúng tôi biên soạn tài liệu hướng dẫn thực hành học phần Thiết kế và Lập trình Web với mục đích:

 Cung cấp nguồn tài liệu hỗ trợ giảng viên trong việc giảng dạy học phần

 Hỗ trợ sinh viên học tập học phần một cách hiệu quả

Tài liệu được phân bố làm 4 chương:

Chương 1 - Ngôn ngữ HTML (HyperText Markup Language): Trình bày các

dạng bài tập để sinh viên hình thành kỹ năng thiết kết trang Web với các thẻ HTML Các bài tập đi theo cấu trúc của một Website để sinh viên có cái nhìn tổng quan về quá

trình thiết kế một Website

Chương 2 - Ngôn ngữ CSS (Cascading Style Sheets): Áp dụng ngôn ngữ CSS

vào việc định dạng các bài tập ở Chương 1 Giúp sinh viên sử dụng được ngôn ngữ CSS để định dạng trang Web

Chương 3 - Ngôn ngữ JAVASCRIPT: Trình bày một số bài tập có sử dụng ngôn

ngữ Javascript để điều khiển một số hành vi của trang

Chương 4 - Ngôn ngữ ASP.NET: Hệ thống các bài tập tổng hợp các trang trong

quá trình thiết kế trên HTML được chuyển qua ASP.NET và phát triển thêm một số trang để hoàn thiện một website cơ bản Mỗi phần bài tập đi theo trình tự từ thiết kế trang tổng thể tới trang chi tiết Giúp sinh viên nắm được quy trình thiết kế và lập trình một Website trên ngôn ngữ ASP.NET

Trong phạm vi hạn hẹp của tài liệu này không thể đề cập được tất cả vấn đề trong

lĩnh vực Thiết kế và Lập trình Web đòi hỏi Nhóm tác giả rất mong muốn nhận được

sự góp ý của độc giả để tài liệu được hoàn thiện tốt hơn

Mùa thu 2017

Nhóm tác giả

5

C N 1 N ÔN N Ữ TML

1.1 Mục tiêu

Thiết kế được giao diện trang Web với các thẻ HTML

1.2 êu cầu chung

 Hình ảnh sử dụng để làm các bài tập được cung cấp sẵn tại địa chỉ https://tinyurl.com/TKvaLTWeb

Sublime text, Atom, …)

6

7

 Gioithieu.html, Dangky.html, Dangnhap.html, Chitietsanpham.html: Tương ứng ở các bài tập 1, 4, 5, 6 Các trang này khi hoàn thiện sẽ được hiển thị tại vùng Sanpham (Hình trên) để tạo thành một Website với các trang có bố cục thống nhất

ài tập 1 Thiết kế trang Gioithieu.html

Left

(Bài tập 2)

Right (Bài tập 7)

Footer (Bài tập 10) Sanpham (Bài tập 3)

8

Ý nghĩa sử dụng:

Là trang giới thiệu công ty chủ quản Website

êu cầu:

khi click chuột vào Liên hệ sẽ liên kết tới trang liên hệ (Lienhe.html)

dung văn bản

ướng dẫn:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>Nhà sách ABC</title>

 Dùng thẻ h2 với thuộc tính align="center" (hoặc thẻ p kết hợp với thẻ font với thuộc tính size (quy định cỡ chữ) và thẻ b (in đậm)) cho đoạn văn bản 1:

<h2 align="center">GIỚI THIỆU CÔNG TY CỔ PHẦN THƯƠNG MẠI VÀ DỊCH VỤ SÁCH ABC</h2>

 Dùng thẻ p kết hợp thẻ b và thẻ a để định dạng và tạo liên kết cho đoạn 2:

<p><b>Cty Cổ phần Thương Mại và Dịch vụ sách ABC</b> là một trong số ít công ty Thương mại điện tử đầu tiên tại Việt Nam bắt đầu với Website <a href="www.abc.com">www.abc.com</a> từ tháng 12/2005.</p>

 Tương tự dùng thẻ p kết hợp thẻ b và font với thuộc tính color để tạo các đoạn “Nguyên tắc hoạt động” và “Định hướng kinh doanh:

9

<p><b><font color="red"><b>NGUYÊN TẮC HOẠT ĐỘNG</font></b></p>

<p><b><font color="blue">ĐỊNH HƯỚNG KINH DOANH</font></b></p>

 Dùng thẻ ul và ol để tạo các danh sách:

<ul>

<li>Tuyệt đối tôn trọng bản quyền và luật xuất bản</li>

<li>Cam kết tạo ra những cuốn sách có chất lượng, có giá trị, luôn bắt kịp xu thế thời đại</li>

<li>Lấy độc giả làm trung tâm</li>

<li>Gia tăng lợi ích cho các đối tác</li>

<li>Khơi dậy và phát huy khả năng sáng tạo của mỗi cá nhân</li>

</ul>

<ol>

<li>Mua bản quyền, dịch và xuất bản các ấn phẩm từ tiếng nước ngoài ra tiếng Việt và ngược lại với các tủ sách:

<ul type="disc">

<li><i>V- Biz:</i> Những cuốn sách cung cấp những cách

tư duy, kinh nghiệm, kĩ năng mang tính ứng dụng cao cho các nhà lãnh đạo, những người hoạt động trong lĩnh vực kinh doanh, nhân viên công sở,… </li>

<li><i>V-Buddism:</i> Tủ sách Phật pháp ứng dụng của Thaihabooks luôn nhận được sự quan tâm, tin tưởng của Phật tử

và bạn đọc Các cuốn sách mang lại những triết lý sâu sắc của nhà Phật nhưng vẫn gắn liên với cuộc sống hàng ngày, giúp mỗi người sống hạnh phúc và có ý nghĩa hơn.</li>

<li><i>V-Parents:</i> Những cuốn sách giúp các bậc cha mẹ nuôi dạy con cái tốt hơn, thấu hiểu con hơn dựa trên sự

tư vấn của những chuyên gia hàng đầu Việt Nam và thế giới.</li> <li><i>V-Teen:</i> Những cuốn sách giúp tháo gỡ vướng mắc, khơi dậy tiềm năng, định hướng nghề nghiệp cho tuổi mới lớn.</li>

<li><i>V-Smile:</i> Bao gồm những các cuốn sách về chủ

đề văn hoá, văn học, giáo dục, lịch sử, du ký… làm phong phú thêm đời sống tinh thần, bổ sung những kiến thức và chuyên sâu

về nhiều lĩnh vực trong cuộc sống cho bạn đọc </li>

</ul>

</li>

<li>Cung cấp các dịch vụ liên quan đến bản quyền và xuất bản</li>

10

<li>Cung cấp sách, báo,tạp chí, và các ấn phẩm khác đến tay độc giả</li>

<li>In ấn và các dịch vụ liên quan đến in ấn</li>

<li>Tổ chức các sự kiện liên quan đến sách, báo chí và xuất bản</li>

11

ướng dẫn:

 Sử dụng thuộc tính bgcolor="màu" trong thẻ body để thiết lập màu nền cho trang

bản”

Dùng thẻ ul với thuộc tính type="square" để quy định bullet cho các mục trong danh sách, dùng thẻ li và a với thuộc tính href="#" để tạo các mục có liên kết trong danh sách:

<ul type="square">

<li><a href="#">Ngoại ngữ</a></li>

 Mục “Giáo trình Tin học cơ bản”: Size 6, in đậm, màu xanh Khi click vào mục này sẽ liên kết đến trang Chitietsanpham.html ở Bài tập 4 (Chương 1)

12

ướng dẫn:

 Sử dụng thuộc tính bgcolor="màu" trong thẻ body để thiết lập màu nền cho trang

 Tạo thẻ div với thuộc tính align="center" để canh giữa cho các nội dung

 Dùng thẻ p, thẻ b và thẻ font với thuộc tính size="6" color="blue" để tạo nội dung “Giáo trình tin học căn bản”

 Thẻ tr thứ hai có hai thẻ td, thẻ td đầu dùng thuộc tính rowspan="6" để mở rộng ô xuống phía dưới 6 hàng

 5 thẻ tr tiếp theo chỉ còn lại một thẻ td

 3 thẻ tr cuối mỗi thẻ có một thẻ td với thuộc colspan="2"

với thuộc tính color để đổi màu cho một số nội dung văn bản

ài tập 5 Thiết kế trang Dangnhap.html

14

Ý nghĩa sử dụng:

Dùng để tạo các trang đăng nhập cho Website

êu cầu:

và mật khẩu và nhấn nút Đăng nhập để gửi thông tin

ướng dẫn:

 Dùng các thẻ input với thuộc tính:

 type="submit" cho nút Đăng nhập

 Email yêu cầu phải nhập đúng định dạng email

ướng dẫn:

 Dùng thẻ table để cấu trúc cho mỗi nhóm trong thẻ fieldset

Ví dụ: Trong thẻ fieldset đầu hãy cấu trúc table theo mẫu:

và tên, Năm sinh, Tên đăng nhập Thêm thuộc tính required cho ô Tên đăng nhập

checked cho radio Nam

<input type="radio" name="radGioiTinh" value="Nam" checked>

Nam

<input type="radio" name="radGioiTinh" value="Nữ"> Nữ

 Dùng thẻ input với thuộc tính type="password" và required để tạo các ô nhập liệu cho Mật khẩu và Nhập lại mật khẩu,

 Dùng thẻ input với thuộc tính type="tel" để tạo ô nhập liệu cho Điện thoại

liệu cho Email (thuộc tính required sử dụng để yêu cầu người dùng nhập đúng định dạng email)

17

và type="reset" để tạo nút Hủy

<select name="Ngay">

<option value="01" selected>01</option>

<option value="02">02</option>

</select>

ài tập 7 Thiết kế trang Right.html

18

Ý nghĩa sử dụng:

Là phần hiển thị một số nội dung chung ở bên phải các trang của Website

êu cầu:

chuột vào vùng này thì nội dung sẽ dừng lại

Thủ Dầu Một và Khoa Kỹ thuật – Công nghệ, …

ướng dẫn:

WEBSITE”, “THỐNG KÊ TRUY CẬP”

 Dùng thẻ marquee và thiết lập các thuộc tính direction="up"

nội dung trong phần sách bán nhiều Sử dụng các thẻ p, img và a để tạo nội dung trong thẻ marquee:

<marquee direction="up" scrollamount="3" scrolldelay="100" onMouseMove="stop()" onMouseOut="start()">

<p><a href="#"><img src=" /images/sach/TH008.jpg">Thủ Thuật Lập Trình Visual Basic 6</a></p>

<! Chèn thêm 3 cuốn sách vào >

</marquee>

 Ở nội dung liên kết website, dùng thẻ select kết hợp hợp các thuộc tính để liên kết đến website tương ứng

19

<select

onchange="window.open(this.options[this.selectedIndex].val

ue,'_blank')">

<option selected> - Chọn trang liên kết -</option>

<option value="http://www.tdmu.edu.vn">ĐH Thủ Dầu Một</option>

<option value="http://www.iteee.tdmu.edu.vn">Khoa

 Dùng thẻ div quy định hai khối: khối 1 chứa logo, khối 2 chứa các liên kết

 Các liên kết Đăng nhập, Đăng ký liên kết đến các trang Dangnhap.html, Dangky.html ở Bài tập 5, 6 (Chương 1); liên kết Giỏ hàng đặt liên kết rỗng

ướng dẫn:

 Chèn hình logo.jpg trong thẻ div thứ nhất

20

ài tập 9 Thiết kế trang Nav.html

21

<meta charset="utf-8">

<title>Nhà sách ABC</title>

 Chèn hình có tên là Slider.jpg vào trước thẻ article (đây là vùng sẽ tạo slider cho các hình ảnh thay đổi ở Chương 3)

24

<footer>

<p>©2016 - Nhà sách ABC Allright Reserved</p>

<p>Website được phát triển để sử dụng làm bài tập thực hành môn Thiết kế và Lập trình Web</p>

kế giao diện trang chủ (lưu trong thư mục MyWebsite)

<link rel="stylesheet" type="text/css" href="Script/Style.css">

 Kết quả Trangchu.html cần đạt được sau khi định dạng:

lập thuộc tính margin và padding bằng 0px cho tất cả các thẻ:

27

liên kết ở phần <div id="dn">:

header div# dn a: hover {

bên phải

 Quy định độ rộng và canh giữa cho nội dung trong thẻ nav:

nav div# subnav {

width :1200px;

margin :0px auto;

}

 Chuyển thẻ ul sang trái, bỏ bullet cho các mục trong thẻ ul, chuyển các mục

li lên một hàng và thiết lập thêm một số thuộc tính margin và padding:

 Định dạng cho các nội dung trong thẻ div tìm kiếm:

nav div# subnav >div input[type=text]

lên hình sản phẩm thì hình sẽ di chuyển lớn lên

ướng dẫn:

31

 Đặt id cho thẻ div chứa nội dung phần thân trang (<div id="body">), id cho

2 thẻ aside (id="left", id="right") để phân biệt hai vùng

 Quy định độ rộng, màu nền, đổ bóng và canh giữa cho nội dung trong thẻ

 Định dạng chi tiết cho phần nội dung trong thẻ <aside id="left">:

 Thêm 2 thẻ div bao các nội dung “Sách theo chủ đề” và “Sách theo nhà xuất bản”, xóa thẻ b trong các thẻ p (sẽ dùng thuộc tính font-weight để thay thế):

32

<aside id="left">

<div>

<p>SÁCH THEO CHỦ ĐỀ</p>

<ul type="square">

<li><a href="#">Ngoại ngữ</a></li>

 Thiết lập định dạng cho các khối div trong thẻ <aside id="left">:

/*Khung, bo góc cho khối div*/

aside# left >div{

border :1px solid #206AB5;

 Định dạng chi tiết cho phần nội dung trong thẻ <aside id="right">:

 Thêm ba thẻ div bao các nội dung “Sách bán nhiều”, “Liên kết Website” và

“Thống kê truy cập”, đặt id tương ứng cho ba thẻ này là “sachbannhieu”,

“lienketwebsite” và “thongketruycap” để thiết lập một số định dạng khác nhau cho nội dung trong các thẻ, xóa thẻ b trong các thẻ p

 Thiết lập định dạng cho các khối div trong thẻ <aside id="right">:

aside# right >div{

border :1px solid #206AB5;

/*Ngăn không cho nội dung trong p bị trôi lên (vì trong p

có thẻ img có dùng thuộc tính float để chuyển hình sang trái)*/

/*Định dạng cho thẻ select ở phần liên kết website*/

aside# right >div# lienketwebsite select{

35

}

 Định dạng chi tiết cho phần nội dung trong thẻ <section>:

 Thêm thẻ p sau thẻ section với nội dung “Sách mới”

đơn giá sách, thay thẻ font bằng thẻ span với thuộc tính class để định dạng riêng cho giá:

<section>

<p>Sách mới</p>

<div class="sach">

<p class="tensach"><a href="Chitietsach.html">Hướng

Dẫn Tự Học Photoshop CS (Photoshop 6.0)</a></p>

<img class="hinhsach" src=" /Images/Sach/TH005.jpg">

<p class="dongia">Đơn giá: <span class="gia">50,000

/*Định dạng nền chuyển màu cho thẻ p*/

background : linear-gradient(#a5b4c4, #206AB5, #206AB5); border-top-left-radius :2px;