[Bachkhoa-Aptech] Hướng dẫn lập trình web doanh nghiệp

www.bachkhoa-software.com
TRUNG TÂM PHẦN MỀM BACHKHOA-SOFTWARE
HỆ THỐNG ĐÀO TẠO CNTT QUỐC TẾ BACHKHOA-APTECH
GIÁO TRÌNH GIẢNG DẠY
KHÓA: LẬP TRÌNH WEB DOANH NGHIỆP

Hà Nội - 2011
HƯỚNG DẪN GIẢNG DẠY
A.GIỚI THIỆU
Sau khi hoàn thành khóa học, học viên sẽ có khả năng:
- Nắm vững kiến thức đồ họa cơ bản dành cho lập trình
- Biết cách phân tích bài toán lập trình web
- Kỹ thuật dựng và dàn trang
- Thực tập với một dự án Lập trình Web cho doanh nghiệp
o Kiến trúc một Framework cơ bản
o Kỹ thuật lâợ trình Cơ sở dữ liệu SQL Server & Visual Studio 2010
o Phát triển một trang Web động cho doanh nghiệp
o Các kỹ năng cần thiết cho việc xây dựng các dự án thực tế
Với thời lượng 06 buổi học, mang đến cho học viên một cái nhìn khái quát cơ bản về
kỹ thuật đồ họa lập trình trong các doanh nghiệp, cách thức triển khai dự án thực tế và
minh họa một Framework 3 ứng dụng 3 lớp
Trung tâm phần mềm www.bachkhoa-software.com
www.bachkhoa-aptech.com
2/52

1. ĐỀ CƯƠNG GIẢNG DẠY BUỔI 1
• Thời lượng
− Thời gian học 2h
• Mục tiêu
− Sau khi hoàn thành buổi học này, học viên được biết nhiều hơn về trung
tâm Bachkhoa-Aptech và bachkhoa-software, những lợi ích khi học khóa học
này và các chương trình học.
− Nắm bắt được một số kiến thức cơ bản về đồ họa, các đối tượng và một
số thao tác cơ bản.
• Phần bố bài giảng
TT Bài học Số phút lý
thuyết
Số phút thực
hành
1. Giới thiệu trung tâm bkap & bk-sw 30’
2. Các chương trình học 25’
3. Lợi ích của học viên khi tham gia 5’
4.
Giới thiệu cơ bản về đồ họa và thực
hành một số thao tác cơ bản
40’ 20’
3/52

• Thời lượng
• Mục tiêu
− Sau khi hoàn thành buổi học này, học viên hiểu được bố cục, các thành
phần của 1 website.
− Biết cách sử dụng một cách cơ bản về phần mềm cắt ảnh Photoshop như
thực hiện chạy file chương trình, chọn đối tượng, chọn Layer, cắt một đối tượng
và lưu ra ảnh mới.
• Phần bố bài giảng
thuyết
Số phút thực
hành
1.
Giới thiệu về cấu hình, các thành phần
đồ họa của 1 website
15’
2.
Đưa ra một số mẫu website để làm ví dụ
trực quan
15’
3.
Giới thiệu về phần mềm cắt ghép ảnh
photoshop cũng như tầm quan trọng của
đồ họa với việc xây dựng web
15’
4.
Thực hiện chạy chương trình cắt ảnh và
thao tác mở file ảnh.
5’
5.
Giới thiệu về một số thành phần chức
năng của phần mềm Photoshop.
10’
6.
Giới thiệu về cách chọn công cụ để cắt
ảnh, chọn vùng đối tượng cắt.
10’
7.
Giới thiệu về cách cắt ảnh, tạo file mới
và đưa vùng được cắt sang file mới
20’
8.
Giới thiệu về cách lưu file ảnh theo các
dạng đuôi và lưu vào thư mục, ổ đĩa.
25’
4/52

• Thời lượng
• Mục tiêu
− Sau khi hoàn thành buổi học này, học viên hiểu được cơ bản về CSS và
HTML
− Dựng được một trang HTML đơn giản
− Nắm bắt rõ hơn về ý nghĩa và tầm quan trọng của đồ họa đối với công
việc thiết kế xây dựng website.
Phần bố bài giảng
thuyết
Số phút thực
hành
1. Các thẻ cơ bản về HTML 15’
2. Thực hiện một số ví dụ về thẻ HTML 15’
3.
Giới thiệu các thành phần cơ bản về
CSS
20’
4. Dựng trang HTML mẫu 50’
5. Tổng kết về HTML và CSS 15’
6.
Tổng kết tầm quan trọng của đồ họa đối
với công việc thiết kế xây dựng website
5’
5/52

• Thời lượng
• Mục tiêu
− Kiến trúc tổng thể của mô hình 3 lớp, ý nghĩa và tác dụng
− Giới thiệu 01 Framework ví dụ mẫu về dự án Web doanh nghiệp
− Cấu trúc và các thành phần của phần mềm Website
− Thực hành các thao tác cơ bản, hiểu rõ các thành phần
thuyết
Số phút thực
hành
1.
Kiến trúc tổng thể mô hình lập trình 3
lớp
15’
2.
Giới thiệu Framework mẫu Website
doanh nghiệp
15’
3. Các thành phần trong ứng dụng 20’
4. Mở ứng dụng, nghiên cứu cấu trúc 50’
5. Trao đổi, thảo luận và hỏi đáp 20’
6/52

• Thời lượng
• Mục tiêu
− Lý thuyết cơ bản, đưa ra mẫu Template lập trình thêm các Form vào ứng
dụng
− Lập trình Form màn hình của ứng dụng
− Các kỹ thuật nâng cao: Công cụ lập trình tự động (tool generate code)
thuyết
Số phút thực
hành
1.
Lý thuyết cơ bản, Template các bước
lập trình vào ứng dụng
30’
2.
Giới thiệu cách sử dụng công cụ tự động
sinh mã code
20’
3. Lập trình ứng dụng Form màn hình 70’
7/52

• Thời lượng
• Mục tiêu
− Tổng quát về ứng dụng, các màn hình quản trị
− Phương hướng phát triển ứng dụng trong tương lai
− Trao đổi và thảo luận
− Kết thúc khóa học
thuyết
Số phút thực
hành
1. Giới thiệu về các ứng dụng quản trị 30’
2.
Các kỹ thuật lập trình nâng cao, cách
thức mở rộng các tính năng
20’
3.
Trao đổi, thảo luận về cơ hội nghề
nghiệp, kiến tạo tương lại và các khóa
học chuyên đề ngắn hạn
20’
4.
Kết thúc, bế mạc khóa học. Trao giấy
chứng nhận tham gia khóa học lập trình
50
8/52

B.HƯỚNG DẪN PHẦN LÝ THUYẾT (P1)
1. Phân tích về thành phần, cấu hình đồ họa một website
− Một website được cấu hình bởi nhiều thành khác nhau, trong đó các thành phần
chính được phân chia như sau:
+ Banner
+ Footer
+ Menu: menu top, menu trái…
+ Các khối nội dung, quảng cáo…
+ ….
9/52

Bố cục toàn cảnh 1 website
Trên đây là toàn cảnh bố cục của 1 website toàn cảnh đầy đủ. Để phần biệt rõ hơn
chúng ta sẽ đi vào từng phần của một website.
Phần banner, logo:
10/52
Phần header của
website chứ logo, menu
top, quảng cáo banner…

Phần bo viền màu đỏ là phần header của một website, nó báo gồm logo bên trái, bên
phải là phần menu top và mục tìm kiếm.
Hình ảnh trên được khoanh viền màu đỏ là logo.
11/52
Logo

Hình ảnh trên là phần menu top của trang, phần này có thể có hoặc không nó phụ
thuộc vào giao diện và chức năng của từng site. Một số website thì phần bên phải
banner là banner quảng cáo của website.
Hình ảnh dưới đây là một ví dụ:
12/52
Menu top

Một phần cũng rất quan trọng trong cấu trúc của website nữa đó là chân trang(footer).
13/52
Đây là phần quảng cáo
banner

Phần nội dung của website được bố trí thành các box khác nhau giữa trang như ví dụ
sau:
14/52
Phần chân
trang(footer)

2. Các kỹ thuật đồ họa dành cho lập trình
Sử dụng phần mềm Adobe Photoshop để thực hiện thao tác cắt và xử lý ảnh
Máy tính phải được cài đặt phần mềm đồ họa này
1. Dùng chường trình Photoshop để cắt ảnh:
− Máy phải được cài đặt chương trình Photoshop
− Chạy chương trình: Vào Start => chọn Programs => tìm đến Adobe
Photoshop để chạy chương trình.
15/52
Nội dung site
Menu chính
Menu bottom

− Sau khi khởi động xong chương trình mở file ảnh cần cắt.
− Vào file chọn Open:
− Sau khi chọn Open thì hộp thoại xuất hiện:
16/52

− Tại hộp chọn Look in chúng ta tìm đến ổ đĩa thư mục chưa file ảnh => chọn
file ảnh cần mở và tiếp tục chọn nút Open.
− Mở file ảnh cần cắt như màn hình ví dụ sau:
2. Kỹ thuật stylesheet cơ bản dùng cho đồ họa
Bước 1: Xác định vùng chọn và vị trí cần cách ảnh, ví dụ chúng ta cắt nền của menu
chính. Dùng đồng thời 2 phím Ctrl công với phím + hoặc phím trừ để phóng to thu nhỏ
vùng ảnh cần cắt.
Bước 2: Dùng công cụ Rectangular Marquee (phím tắt là chữ M): để tạo vùng
chọn hình chữ nhật hoặc hình vuông.
Bước 3: Cách sử dụng công cụ: sau khi chọn công cụ xong thì đưa chuột vào vị trí
vùng ảnh cần cắt nhấn dữ và kéo chuột từ vị trí xác định ban đầu đến góc đối diện. Sau
khi chọn xong ta có được như hình vẽ dưới đây:
17/52

Bước 4: Thực hiện copy sang một file mới: sau khi chọn xong chúng ta dùng tổ hợp
phím Ctrl cộng với phím C trên bàn phím hoặc vào menu Edit chọn copy  tiếp theo
dùng tổ hợp phím Ctrl cộng phím N trên bàn phím hoặc vào menu File chọn New… để
tạo một file mới.
 hộp thoại xuất hiện:
18/52
Vùng sau khi được chọn

Trong đó:
− Name: là đặt tên cho file ảnh
− Width: độ rộng của file ảnh
− Height: chiều cao ảnh
− Các chức năng khác như đơn vị tính độ rộng và chiều cao…..
Bước 5: Sau khi cấu hình đặt tên, độ rộng và chiều cao…thì chúng ta dùng tổ hợp
phím Ctrl + phím V hoặc vào Edit chọn Paste để dán ảnh sang file mới ta có được màn
hình kết quả như sau:
19/52

Bước 6: Lưu file ảnh vào máy tính
− Sau khi chỉnh sửa xong chúng ta tiến hành lưu ảnh vào máy, dùng tổ hợp phím Alt
+ Shift + Ctrl và phím S hoặc vào file chọn Save for web…
20/52
Đây là nội dung vùng
ảnh

21/52

Hộp thoại xuất hiện để nhập tên file ảnh, đường dẫn đến ổ đĩa và thư mục chứa file
ảnh:
Để hoàn tất chúng ta bấm vào nút Save trên hộp thoại.
22/52

Ngoài ra, chúng ta còn phải thành thạo các công cụ khác như: tìm mã mầu ảnh, chọn
layer và ẩn hiện, công cụ text, font size, font name, …
- Công cụ ẩn/hiện Layer
Chọn hiển thị tự động chọn layer
- Công cụ lấy màu background
23/52

- Công cụ đổ màu Gradient
- Kỹ thuật chỉnh size ảnh
- Kỹ thuật Transform
- Công cụ Text/font size, font-name
24/52

3. Kỹ thuật soạn thảo Stylesheet
CSS là gì:
- CSS (Cascading Style Sheets) được hiểu một cách đơn giản đó là cách mà
chúng ta thêm các kiểu hiển thị (font chữ, kích thước, màu sắc...) cho một tài
liệu Web
Một số đặc tính cơ bản của CSS
- CSS quy định cách hiển thị của các thẻ HTML bằng cách quy định các thuộc
tính của các thẻ đó (font chữ, màu sắc). Để cho thuận tiện bạn có thể đặt toàn
bộ các thuộc tính của thẻ vào trong một file riêng có phần mở rộng là ".css".
- CSS nó phá vỡ giới hạn trong thiết kế Web, bởi chỉ cần một file CSS có thể cho
phép bạn quản lí định dạng và layout trên nhiều trang khác nhau. Các nhà phát
triển Web có thể định nghĩa sẵn thuộc tính của một số thẻ HTML nào đó và sau
đó nó có thể dùng lại trên nhiều trang khác.
25/52

- Có thể khai báo CSS bằng nhiều cách khác nhau. Bạn có thể đặt đoạn CSS của
bạn phía trong thẻ <head>...</head>, hoặc ghi nó ra file riêng với phần mở rộng
".css", ngoài ra bạn còn có thể đặt chúng trong từng thẻ HTML riêng biệt
Tuy nhiên tùy từng cách đặt khác nhau mà độ ưu tiên của nó cũng khác nhau.
Mức độ ưu tiên của CSS sẽ theo thứ tự sau.
1. Style đặt trong từng thẻ HTML riêng biệt
2. Style đặt trong phần <head>
3. Style đặt trong file mở rộng .css
4. Style mặc định của trình duyệt
Mức độ ưu tiên sẽ giảm dần từ trên xuống dưới.
- CSS có tính kế thừa: giả sử rằng bạn có một thẻ <div id="vidu"> đã được khai
báo ở đầu file css với các thuộc tính như sau:
2. #vidu {
3. width: 200px;
4. height: 300px;
5. }
Ở một chỗ nào đó trong file css bạn lại khai báo một lần nữa thẻ <div id="vidu"> với
các thuộc tính.
#vidu {
width: 400px;
background-color: #CC0000;
}
Sau đoạn khai báo này thì thẻ <div id="vidu"> sẽ có thuộc tính:
#vidu {
width: 400px; /* Đè lên khai báo cũ */
height: 300px;
background-color: #CC0000;
}
Cú pháp của CSS
26/52

Cú pháp của CSS được chia làm 3 phần. phần thẻ chọn (selector), phần thuộc tính
(property), phần nhãn (value).
selector {property: value}
Nếu nhãn của bạn có nhiều từ bạn nên đặt nhãn của bạn vào trong dấu nháy kép
p {font-family: "sans serif"}
Trong trường hợp thẻ chọn của bạn nhiều thuộc tính thì các thuộc tính sẽ được ngăn cách bởi dấu (;).
p {text-align:center;color:red}
Khi thẻ chọn có nhiều thuộc tính thì chúng ta nên để mỗi thuộc tính ở trên một dòng riêng biệt.
p {
text-align: center;
color: black;
font-family: arial
}
Làm sao để chèn css vào trang web
Bạn đã có một file CSS của bạn, bây giờ công việc tiếp theo là làm thế nào để chèn
những đoạn CSS của bạn vào trong trang, Và xem chúng hoạt động như thế nào.
Trong phần này chúng ta sẽ đi tìm hiểu chi tiết về cách chèn một đoạn style trong trang
HTML hay liên kết tới một file CSS viết sẵn.
Khi trình duyệt đọc đến CSS, thì toàn bộ Website sẽ được định dạng theo các thuộc
tính đã được khai báo trong phần CSS. Có ba cách cho phép chúng ta chèn định dạng
CSS vào trong Website.
• CSS được khai báo trong file riêng.
Toàn bộ mã CSS được chứa trong file riêng có phần mở rộng .css là một ý tưởng được
dùng khi một file CSS sẽ được áp dụng cho nhiều trang khác nhau. Bạn có thể thay đổi
cách hiển thị của toàn bộ site mà chỉ cần thay đổi một file CSS. Trong cách này thì file
CSS sẽ được chèn vào văn bản HTML thông qua thẻ <link>...</link>. Ta có cú pháp
như sau:
<html>
<head>
27/52

color: #333333;
}
• Đặt màu nền cho đoạn văn bản.
Bạn có thể đặt màu nền (background) cho đoạn văn bản bằng thuộc tính background-
color: #mã màu;
p {
background-color: #FFFF00;
}
• Căn chỉnh khoảng cách giữa các ký tự.
Khoảng cách giữa các ký tự trong một đoạn văn bản có thể được tăng hoặc giảm bởi
thuộc tínhletter-spacing: khoảng cách;
h3 {
letter-spacing: 2em;
}
h1 {
letter-spacing: -3em;
}
• Căn chỉnh khoảng cách giữa các dòng.
Thuộc tính line-height: khoảng cách; sẽ giúp bạn căn chỉnh khoảng cách giữa các
dòng trong một đoạn văn bản.
p {
line-height: 150%; // line-height: 15px;
}
• Dóng hàng
Để gióng hàng cho một đoạn văn bản chúng ta sẽ dùng thuộc tính text-align: vị trí;
p {
text-align: left; /* left | center | right */
}
• Trang hoàng thêm cho đoạn văn bản.
Một đường gạch chân hoặc đường gạch ngang dòng văn bản sẽ làm cho đoạn văn bản
của bạn thêm sinh động. Để tô điểm thêm cho đoạn văn bản chúng ta sẽ dùng thuộc
tính text-decoration: thuộc tính;
30/52

h3 {
text-decoration: underline; /* Gạch chân */
}
h2 {
text-decoration: line-through; /* Gạch ngang */
}
h1 {
text-decoration: overline; /* kẻ trên */
}
• Chỉnh vị trí của đoạn văn bản (indent).
Thuộc tính text-indent: vị trí; sẽ căn chỉnh vị trí của dòng văn bản theo chiều ngang.
h1 {
text-indent: -2000px; /* text-indent: 30px; */
}
• Điều kiển các ký tự trong một đoạn văn bản.
Bạn có thể điều khiển toàn bộ đoạn văn bản là chữ hoa hay chữ thường bởi thuộc
tính text-transform: kiểu chữ;
p.uppercase {
text-tranform: uppercase;
}
p.lowercase {
text-tranform: lowercase;
}
p.capitalize {
text-tranform: capitalize;
}
• Đặt hướng cho đoạn văn bản.
Hướng của đoạn văn bản có thể từ trái qua phải hay từ phải qua trái chúng ta có thể
điều khiển bởi thuộc tính direction: hướng;
div.rtl {
direction: rtl; /* Right to left */
}
31/52

div.ltr {
direction: ltr; /* Left to right */
}
• Tăng khoảng cách giữa các từ.
Khoảng cách giữa các từ có thể được tăng bởi thuộc tính word-spacing: khoảng cách;
word-spacing: 30px;
• Làm mất tác dụng của đường bao của một thẻ HTML.
Để làm mất tác dụng đường bao của một thẻ HTML chúng ta dùng thuộc tính white-
space: giá trị;
p {
white-space: nowrap;
}
Thuộc tính white-space sẽ làm cho toàn bộ đoạn văn bản ở trên một dòng.
Các thuộc tính của Font chữ và các định nghĩa font chữ cho văn bản
Các thuộc tính về font chữ sẽ cho phép bạn thay đổi họ font (font family), độ đậm
(boldness), kích thước (size) và kiểu font (style).
• Đặt font cho đoạn văn bản.
Để đặt một loại font chữ nào đó cho đoạn văn bản thì chúng ta sẽ sử dụng thuộc
tính font-faily:
p {
font-family: Arial, Tahoma, Verdana, sans-serif;
}
Thông thường bạn cần phải khai báo họ của font ở cuối (trong ví dụ trên thì sans-serif
là chỉ tới 1 họ font) để trong trường hợp máy của người duyệt Web không có các font
như mình đã đặt thì nó sẽ lấy font mặc định của họ font trên.
• Đặt đoạn văn bản sử dụng font nhãn caption.
p.caption {
font: caption;
}
• Đặt kích thước font cho đoạn văn bản.
32/52

Khi chúng ta muốn những đoạn văn bản hoặc tiêu đề có kích thước của chữ khác nhau,
chúng ta có thể sử dụng thuộc tính font-size:
h1 {
font-size: 20px;
}
h3 {
font-size: 12px;
}
• Định lại kích thước font bằng thuộc tính font-size-ajust:
p {
font-size-ajust: 0.60;
}
• Đặt kiểu font cho đoạn văn bản.
Chữ đậm, chữ nghiêng,... được đặt với thuộc tính font-style:
p {
font-style: italic; /* normal | italic | oblique */
}
• Muốn hiển thị font ở dạng small-caps hoặc ở dạng normal thì chúng ta sẽ
sử dụng thuộc tínhfont-variant. Thuộc tính này có hai giá
trị normal và small-caps
p {
font-variant: normal; /* normal | small-caps */
}
• Đặt độ đậm nhạt của font.
Khi chúng ta muốn thay đổi độ đậm nhạt của văn bản chúng ta sẽ dùng thuộc
tính font-weight:. Chúng ta có thể đặt giá 3 loại giá trị cho thuộc tính này 1.
normal(bình thường), 2. bold(đậm), 3. 300(đặt dạng số)
h3 {
font-weight: bold;
}
• Khai báo các thuộc tính font ở dạng shorthand.
p {
font: italic small-caps 900 12px arial;
33/52

}
Đường viền và các thuộc tính về đường viền
Các thuộc tính của đường viền (border) sẽ cho phép đặt các giá trị đặc biệt cho đườn
viền như kiểu đường viền, kích thước, màu sắc. Thuộc tính này sẽ được áp dụng cho
các thẻ HTML như <div>, <li>, <table>,...
Trong thuộc tính đường viền (border) chúng ta có 3 giá trị cơ bản đó là:
border-color:
border-width:
border-style:
• Thuộc tính màu của đường viền
Để đặt màu cho đường viền chúng ta sẽ đặt thông số màu cho thuộc tính border-
color:
div.color {
border-color: #CC0000;
}
• Đặt chiều rộng cho đường viền (border)
Nếu muốn đặt chiều rộng của đường viền chúng ta sẽ đặt giá trị cho thuộc
tính border-width:
div.borerwidth {
border-width: 2px;
}
STT Giá trị
1 thin
2 medium
3 thick
4 length
• Chọn kiểu của đường viền
Bạn có thể sử dụng thuộc tính border-style để đặt kiểu cho đường viền. Chúng ta có
thể gán cho thuộc tính này 9 giá trị khác nhau tương ứng với 9 kiểu đường viền khác
nhau.
div.borderstyle {
border-style: solid;
34/52

}
STT border-style
1 none
2 hidden
3 dotted
4 dashed
5 solid
6 double
7 groove
8 ridge
9 inset
10 outset
Với 4 phía của đối tượng ta có 4 thuộc tính border tương ứng:
1. border-top:
2. border-right:
3. border-bottom:
4. border-left:
Ứng với đường viền của mỗi phía chúng ta đều có 3 giá trị (color, width, style)
STT Phía Thuộc tính
1 top
border-top-color:
border-top-width:
border-top-style:
2 right
border-right-color:
border-right-width:
border-right-style:
3 bottom
border-bottom-color:
border-bottom-width:
border-bottom-style:
4 left
border-left-color:
border-left-width:
border-left-style:
35/52

Chúng ta có thể dùng phương pháp viết mã giản lược (shorthand) để viết các thuộc
tính của đường viền gọn hơn. Giả sử chúng ta đặt thuộc tính border của thẻ <div> với
độ rộng bằng 1, kiểusolid và màu là #CC0000
div.border {
border: 1px solid #CC0000;
}
Các thuộc tính của margin
Thuộc tính margin sẽ định nghĩa khoảng trắng bao quanh một phần tử HTML. Nó có
thể dùng giá trị âm để lồng nội dung vào với nhau. Tương ứng với 4 phía của một phần
tử chúng ta có 4 thuộc tính tương ứng. Mặt khác để viết cho gọn chúng ta cũng có thể
dùng cách viết giản lược để định nghĩa các giá trị cho thuộc tính margin.
Đối với các trình duyệt Netcape và IE thì giá trị mặc định của thuộc tính margin là
8px. Nhưng Opera thì không hỗ trợ như vậy. Để cho thống nhất chúng ta có thể
đặt margin mặc định cho toàn bộ các phần tử.
Các giá trị mà thuộc tính margin có thể nhận được đó là: auto, length, %. Chúng ta đặt
giá trị nào là tùy thích cộng với việc tương ứng tỉ lệ với các phần tử khác.
Tương ứng với 4 phía ta có 4 thuộc tính:
1. margin-top:
2. margin-right:
3. margin-bottom:
4. margin-left:
Để cho gọn chúng ta cũng có thể việt thuộc tính margin dưới dạng shorthand
div.margin {
margin: 10px 4px 5px 9px; /* top | right | bottom | left*/
}
Các thuộc tính của padding
CSS padding sẽ định nghĩa khoảng trống giữa mép của các phần tử tới các phần tử con
hoặc nội dung bên trong. Chúng ta không thể gán giá trị âm cho thuộc tính này. Cũng
giống như margin thuộc tính padding cũng tương ứng với 4 phía của phần tử.
Tương ứng với 4 phía của phần tử chúng ta có 4 thuộc tính padding tương ứng đó là:
1. padding-top:
36/52

2. padding-right:
3. padding-bottom:
4. padding-left:
Các giá trị có thể gán cho các thuộc tính này là : % hoặc length
Để viết cho gọn chúng ta cũng có thể viết thuộc tính padding dưới dạng shorthand.
div.padding {
padding: 5px 3px 2px 8px;
}
C.HƯỚNG DẪN THỰC HÀNH (P1)
1. Thao tác cắt ảnh và thực hành với file photoshop
Bài thực hành: Có 1 giao diện đồ họa được thiết kế bằng file photoshop do họa sỹ
thiết kế, thực hiện các bước sau:
Bước 1: Sử dụng photoshop cắt lấy các nội dung cần thiết như:
o Lấy logo
o Lấy background của menu
o Lấy mầu mẫu, chuẩn
o Cắt ảnh dựng khung Container
o Lấy font-name, font-size
Bước 2: Hoàn thiện và tổ chức thư mục lưu trữ ảnh
o Lưu trữ thư mục ảnh
o Quy tắc đặt tên cho các ảnh
o Phân tích sử dụng ảnh hay sử dụng màu nền background-color
o Sử dụng các hiệu ứng của Javascript or Jquery
2. Dựng trang demo Giao diện theo đồ họa
Bài thực hành: Với các thông số đầu vào như bài thực hành 1, tổ chức các file .css,
các file javascript, dựng thành trang dưới gốc độ của lập trình viên
Bước 1: Tổ chức file css:
37/52

o Tạo file stylesheet
o Định nghĩa các thành phần trong Css
o Định nghĩa css cho tiêu đề tin
o Định nghĩa css cho tóm tắt
o Định nghĩa css cho nội dung tin
o Định nghĩa css cho các hyperlink
o Định nghĩa css cho các thành phần khác
Bước 2: Tổ chức file javascript
o Tổ chức cấu trúc và các hiệu ứng nếu có
o Ứng dụng vào trong trang web
Bước 3: Hoàn thiện trang giao diện đồ họa bằng HTML
o Tạo trang HTML
o Dựng trang HTML theo đúng giao diện đồ họa thiết kế của họa sỹ
o Demo
D.GIẢI PHÁP WEB DOANH NGHIỆP (P2)
1. Kiến trúc về mô hình lập trình 3 lớp
Mô hình lập trình ứng dụng Web:
38/52

Mô hình 3 lớp (3 layers)
Trong phát triển ứng dụng, để dễ quản lý các thành phần của hệ thống, cũng như
không bị ảnh hưởng bởi các thay đổi, người ta hay nhóm các thành phần có cùng chức
năng lại với nhau và phân chia trách nhiệm cho từng nhóm để công việc không bị
chồng chéo và ảnh hưởng lẫn nhau. Ví dụ trong một công ty bạn có từng phòng ban,
mỗi phòng ban sẽ chịu trách nhiệm một công việc cụ thể nào đó, phòng này không
được can thiệp vào công việc nội bộ của phòng kia như Phòng tài chính thì chỉ phát
lương, còn chuyện lấy tiền đâu phát cho các anh phòng Marketing thì các anh không
cần biết. Trong phát triển phần mềm, người ta cũng áp dụng cách phân chia chức năng
này. Bạn sẽ nghe nói đến thuật ngữ kiến trúc đa tầng/nhiều lớp, mỗi lớp sẽ thực hiện
một chức năng nào đó, trong đó mô hình 3 lớp là phổ biến nhất. 3 lớp này là gì? Là
Presentation, Business Logic, và Data Access. Các lớp này sẽ giao tiếp với nhau thông
qua các dịch vụ(services) mà mỗi lớp cung cấp để tạo nên ứng dụng, lớp này cũng
39/52

không cần biết bên trong lớp kia làm gì mà chỉ cần biết lớp kia cung cấp dịch vụ gì cho
mình và sử dụng nó mà thôi.
Lưu ý: Các bạn không nên nhầm lẫn khái niệm lớp(layer) trong phần này với khái
niệm lớp(class) của các ngôn ngữ lập trình hướng đối tượng.
Presentation Layer
Lớp này làm nhiệm vụ giao tiếp với người dùng cuối để thu thập dữ liệu và hiển thị kết
quả/dữ liệu thông qua các thành phần trong giao diện người sử dụng. Lớp này sẽ sử
dụng các dịch vụ do lớp Business Logic cung cấp. Trong .NET thì bạn có thể dùng
Windows Forms, ASP.NET hay Mobile Forms để hiện thực lớp này.
Trong lớp này có 2 thành phần chính là User Interface Components và User Interface
Process Components.
UI Components là những phần tử chịu trách nhiệm thu thập và hiển thị thông tin cho
người dùng cuối. Trong ASP.NET thì những thành phần này có thể là các TextBox,
các Button, DataGrid…
UI Process Components: là thành phần chịu trách nhiệm quản lý các qui trình chuyển
đổi giữa các UI Components. Ví dụ chịu trách nhiệm quản lý các màn hình nhập dữ
liệu trong một loạt các thao tác định trước như các bước trong một Wizard…
Lưu ý : lớp này không nên sử dụng trực tiếp các dịch vụ của lớp Data Access mà nên
sử dụng thông qua các dịch vụ của lớp Business Logic vì khi bạn sử dụng trực tiếp như
vậy, bạn có thể bỏ qua các ràng buộc, các logic nghiệp vụ mà ứng dụng cần phải có.
Business Logic Layer
Lớp này thực hiện các nghiệp vụ chính của hệ thống, sử dụng các dịch vụ do lớp Data
Access cung cấp, và cung cấp các dịch vụ cho lớp Presentation. Lớp này cũng có thể
sử dụng các dịch vụ của các nhà cung cấp thứ 3 (3rd parties) để thực hiện công việc
của mình(ví dụ như sử dụng dịch vụ của các cổng thanh tóan trực tuyến như VeriSign,
Paypal…).
Trong lớp này có các thành phần chính là Business Components, Business Entities và
Service Interface.
40/52

Service Interface là giao diện lập trình mà lớp này cung cấp cho lớp Presentation sử
dụng. Lớp Presentation chỉ cần biết các dịch vụ thông qua giao diện này mà không cần
phải quan tâm đến bên trong lớp này được hiện thực như thế nào.
Business Entities là những thực thể mô tả những đối tượng thông tin mà hệ thống xử
lý. Trong ứng dụng chúng ta các đối tượng này là các chuyên mục(Category) và bản
tin(News). Các business entities này cũng được dùng để trao đổi thông tin giữa lớp
Presentation và lớp Data Access.
Business Components là những thành phần chính thực hiện các dịch vụ mà Service
Interface cung cấp, chịu trách nhiệm kiểm tra các ràng buộc logic(constraints), các qui
tắc nghiệp vụ(business rules), sử dụng các dịch vụ bên ngoài khác để thực hiện các yêu
cầu của ứng dụng.
Trong ứng dụng của chúng ta, lớp này sẽ chứa các thành phần là CategoryService và
NewsService làm nhiệm vụ cung cấp các dịch vụ quản lý chuyên mục và các bản tin
(thêm, xóa, sửa, xem chi tiết, lấy danh sách…).
Data Access Layer
Lớp này thực hiện các nghiệp vụ liên quan đến lưu trữ và truy xuất dữ liệu của ứng
dụng. Thường lớp này sẽ sử dụng các dịch vụ của các hệ quản trị cơ sở dữ liệu như
SQL Server, Oracle,… để thực hiện nhiệm vụ của mình. Trong lớp này có các thành
phần chính là Data Access Logic, Data Sources, Servive Agents).
Data Access Logic components (DALC) là thành phần chính chịu trách nhiệm lưu trữ
vào và truy xuất dữ liệu từ các nguồn dữ liệu – Data Sources như RDMBS, XML, File
systems…. Trong .NET Các DALC này thường được hiện thực bằng cách sử dụng thư
viện ADO.NET để giao tiếp với các hệ cơ sở dữ liệu hoặc sử dụng các O/R Mapping
Frameworks để thực hiện việc ánh xạ các đối tượng trong bộ nhớ thành dữ liệu lưu trữ
trong CSDL. Chúng ta sẽ tìm hiểu các thư viện O/R Mapping này trong một bài viết
khác.
Service Agents là những thành phần trợ giúp việc truy xuất các dịch vụ bên ngòai một
cách dễ dàng và đơn giản như truy xuất các dịch vụ nội tại.
41/52

Chúng ta đã tìm hiểu qua các lớp của mô hình 3 lớp. Lý thuyết hơi nhiều một chút có
thể làm bạn khó hiểu vì khả năng trình bày có hạn, nên bây giờ thử tìm hiểu một qui
trình cụ thể hơn để biết các lớp này giao tiếp với nhau như thế nào. Ví dụ trong ứng
dụng của chúng ta có thao tác tạo một chuyên mục mới, thì các lớp sẽ ltương tác với
nhau như sau:
Lớp Presentation
- Trình bày một web form, có các text box cho phép người sử dụng nhập tên và mô tả
cho chuyên mục
- Khi người dùng nhấn nút tạo trên form này, ứng dụng sẽ thực hiện việc tạo một
Business Entity Category mới như đoạn code sau minh họa:
public void CreateNewCategory()
{
Category category = new Category();
category.Name = name.Text;
category.Description = description.Text;
// sử dụng dịch vụ do lớp Business cung cấp để tạo chuyên mục
CategoryService.CreateCategory(category);
}
Lớp Business Logic
Để cung cấp dịch vụ tạo một chuyên mục, thành phần CategoryService sẽ cung cấp
hàm sau:
public static void CreateCategory(Category category)
{
// kiểm tra xem tên khóa của chuyên mục đã tồn tại chưa?
…
// kiểm tra tên khóa của chuyên mục có hợp lệ không?
…
// sử dụng DV của lớp Data Access để lưu chuyên mục mới này vào CSDL
CategoryDAO categoryDAO = new CategoryDAO();
categoryDAO.CreateCategory(category);
}
Lớp Data Access
Tương tự, để cung cấp dịch vụ lưu một chuyên mục mới vào CSDL, thành phần
CategoryDAO sẽ cung cấp hàm sau (sử dụng ADO.NET để kết nối với CSDL):
42/52

public void CreateCategory(Category category)
{
// tạo connection
…
// tạo command, khởi tạo các tham số…
command.Parameters.Add(new SqlParameter(“@KeyName”, category.KeyName));
command.Parameters.Add(new SqlParameter(“@Name”, category.Name));
command.Parameters.Add(new SqlParameter(“@Description”, category.Description));
// lưu dữ liệu
command.ExecuteNonQuery();
}
Phân tích và thiết kế
Ứng dụng của chúng ta sẽ viết bằng ASP.NET 2.0 và SQL Server 2000/2005. Ngôn
ngữ được dùng là C#.
Chúng ta đã tìm hiểu qua các thành phần chính trong mô hình 3 lớp, giờ đến lúc bắt
tay vào thiết kế các thành phần đó cho ứng dụng tin tức của chúng ta. Trong ứng dụng
tin tức mà chúng ta đã tìm hiểu yêu cầu qua bài viết trước, chúng ta thấy có hai đối
tượng thông tin chính mà chúng ta cần quản lý là các chuyên mục(category) và tin
tức(news). Ứng dụng quản lý của chúng ta sẽ thu thập những đối tượng dữ liệu này từ
người dùng(phóng viên, biên tập viên) và trình bày lại cho người sử dụng khác
xem(độc giả). Giờ chúng ta bắt tay vào thiết kế các thành phần Business Entities.
Business Entities
Ứng dụng của chúng ta sẽ bao gồm 2 entity chính là Category và News.
Trước hết là Category. Một chuyên mục (Category) sẽ gồm những thông tin sau:
CategoryId: Mã chuyên mục – sẽ được sinh tự động khi tạo mới
Name: Tên chuyên mục. VD: Vi tính, Kinh tế…
KeyName: Tên gợi nhớ dùng để phân biệt chuyên mục với nhau (không được trùng
nhau). VD với VNExpress bạn sẽ thấy có Vi-tinh, Suc-khoe…
Description: Mô tả cho chuyên mục. VD: Description cho Vi-tinh là: thông tin mới
nhất về công nghệ thông tin của Việt Nam và thế giới…
Picture: Hình ảnh đại diện cho chuyên mục
43/52

Trong ứng dụng đơn giản này, chúng ta chỉ thiết kế chuyên mục có một cấp, không có
các chuyên mục con, cháu… Và ứng dụng này cũng không có phần quản lý các nhà
biên tập viên, nhà báo và cơ chế cấp quyền hạn duyệt bài, gửi bài…Tôi dành phần này
cho các bạn phát triển thêm, nhưng tôi cũng sẽ gợi ý cho các bạn cách thiết kế trong
phần mở rộng ứng dụng.
Tiếp theo là News. Mỗi một bản tin sẽ có các thông tin sau:
NewsId: mã bản tin. Sẽ được sinh tự động khi tạo mới.
Title: tiêu đề chính của bản tin. VD: Microsoft tuyên bố phá sản!
Subtitle: tiêu đề phụ của bản tin. VD: Bill Gates từ chức!
Excerpt: phần giới thiệu ngắn gọn của bản tin
Authors: danh sách tác giả bản tin. VD: Nguyễn Văn A, Hoàng Thị B
Keywords: danh sách từ khóa chính trong bản tin dùng để tìm kiếm. VD: Microsoft,
broken
Body: Đây là phần nội dung chính của bản tin.
Picture: Hình ảnh minh họa cho bản tin.
CreationTime: Ngày giờ tạo bản tin
LastModificationTime: Ngày giờ chỉnh sửa cuối cùng của bản tin
PublishedTime: Ngày giờ bản tin được đăng
TotalViews: Tổng số lượt người xem bản tin
TotalRates: Tổng số lượt người đánh giá bản tin
Rate: Điểm đánh giá trung bình của bản tin
Status: Trạng thái hiện tại của bản tin. Có thể là Writting(Đang viết), Approving(Đang
chờ duyệt), Published(Đã được đăng)
Business Service Components
Bước tiếp theo chúng ta sẽ phân tích và thiết kế các Business Service Components.
Các thành phần này sẽ làm nhiệm vụ chính cung cấp các dịch vụ cho lớp Presentation
dùng để lấy và lưu trữ thông tin.
Lớp CategoryService
44/52

Chúng ta cần những thao tách chính trên đối tượng dữ liệu Category:
Tạo mới – CreateCategory(Category category)
Cập nhật – UpdateCategory(Category category)
Xóa – DeleteCategory(int categoryId)
Lấy thông tin chi tiết – GetCategory(int categoryId)
Lấy danh sách các category – GetCategories()
Kiểm tra một Key xem có trong database chưa – CheckKey(string keyName). Thao tác
này dùng để kiểm tra xem khi tạo mới một category thì KeyName đã tồn tại trong hệ
thống chưa. Thao tác này có thể dùng trên lớp Presentation để kiểm tra và thông báo
lỗi cho người dùng khi họ nhập một tên khóa đã có trong hệ thống
Lưu ý: Chúng ta sẽ thực hiện các business logic của hệ thống trong lớp này.
Tương tự đối với lớp NewsService, dựa trên những gì yêu cầu chúng ta phân tích ở bài
viết đầu tiên, chúng ta cần những thao tác chính sau đây trên đối tượng News:
Tạo mới – CreateNews(News news)
Cập nhật – UpdateNews(News news)
Xóa – DeleteNews(int newsId)
Lấy thông tin chi tiết – GetNews(int newsId)
Lấy danh sách các bản tin thuộc một chuyên mục nào đó, sắp xếp theo tin mới nhất –
GetNewsOfCategory(int categoryId, int page, int pageSize, out int totalRecords)
Cập nhật số lần xem của một bản tin – UpdateTotalViews(int newsId)
Cập nhật đánh giá cho một bản tin – UpdateRate(int newsId, int rate)
Tìm bài viết dựa trên từ khóa – SearchNews(string keyWords, int page, int pageSize,
out int totalRecords)
Trong các hàm trên, các bạn chú ý đến hàm GetNewsOfCategory. Trong hàm này có
các tham số dùng để phân trang các bản tin. Chúng ta cần đến chức năng này vì khi
trình bày trên trang tin, chúng ta chỉ trình bày một số lượng có hạn các bản tin của một
chuyên mục nào đó chứ không thể trình bày tất cả trên màn hình được. Khi người
dùng muốn xem thêm, họ có thể chọn trang tiếp theo hoặc nhấp vào link Xem tiếp, lúc
45/52

đó ứng dụng sẽ trình bày các bản tin ở các trang tiếp theo. Tham số totalRecords cho
chúng ta biết được tổng số bản tin thật sự có trong chuyên mục đó.
Lưu ý: Khi phân tích thiết kế ban đầu bạn không thể nào hình dung được hết các yêu
cầu phát sinh để thiết kế trước các thao tác cần thiết. Bạn phải cập nhật bản thiết kế
thường xuyên để phù hợp với yêu cầu. Bản thiết kế này vẫn còn thiếu một số chức
năng cần thiết mà tôi sẽ trình bày cho các bạn trong bài viết tiếp theo, chúng ta sẽ
chỉnh sửa bản thiết kế này trong quá trình phát triển ứng dụng để phù hợp với các yêu
cầu phát sinh mà chúng ta chưa nhìn thấy hết khi thiết kế.
Data Access Components
Bây giờ chúng ta sẽ thiết kế các lớp dùng để truy xuất và cập nhật dữ liệu. Các hàm
của các lớp DAO cũng khá đơn giản, chỉ làm nhiệm vụ cập nhật dữ liệu vào database
và truy xuất dữ liệu từ database. Các bạn cũng thấy chức năng nó giống như trên lớp
Business Logic, nhưng ở đây chúng ta không có bất kỳ ràng buộc logic gì, chỉ đơn
giản thực hiện việc truy xuất dữ liệu mà thôi. Các business logic đã được kiểm tra trên
lớp Business Logic.
Hiện thực lớp Business Logic & Data Access
Sau khi đã xong bước thiết kế, chúng ta sẽ tiến hành hiện thực 2 lớp Business và Data
Access. Các bạn có thể xem source code đính kèm để biết chi tiết cách hiện thực 2 lớp
này như thế nào. Lớp Presentation sẽ được thiết kế và hiện thực trong bài viết tiếp
theo. Phần bên dưới tôi sẽ trình bày một số điểm chính trong cách hiện thực.
Hiện thực Data Access Components
Do ứng dụng của chúng ta đơn giản nên được giới hạn sẽ dùng với CSDL SQL Server
2000/2005 nên lớp này không được thiết kế để chạy cùng lúc với nhiều loại database
khác nhau. Chúng ta sẽ dùng cái Stored Procedures để truy xuất dữ liệu an toàn và dễ
thay đổi hơn, tránh bị các lỗi như SQL Injection(không thể tránh hoàn toàn nếu bạn
không hiện thực đúng). Các bạn có thể xem qua một cách hiện thực một hàm cơ bản
như thế nào:
public void CreateCategory(Category category)
{
46/52

using (SqlConnection connection = GetConnection())
{
SqlCommand command = new SqlCommand(“spCategoriesCreate”, connection);
command.CommandType = CommandType.StoredProcedure;
command.Parameters.Add(new SqlParameter(“@KeyName”, category.KeyName));
command.Parameters.Add(new SqlParameter(“@Name”, category.Name));
command.Parameters.Add(new SqlParameter(“@Description”, category.Description));
command.Parameters.Add(new SqlParameter(“@Picture”, category.Picture));
SqlParameter paramCategoryId = new SqlParameter(“@CategoryId”, SqlDbType.Int, 4);
paramCategoryId.Direction = ParameterDirection.Output;
command.Parameters.Add(paramCategoryId);
connection.Open();
command.ExecuteNonQuery();
if (paramCategoryId.Value != DBNull.Value)
category.CategoryId = (int)paramCategoryId.Value;
else
throw new DataAccessException(String.Format(Resources.Strings.CreateEntityException,
“Category”));
}
Stored Procedure spCategoriesCreate đơn giản được viết như sau:
CREATE PROCEDURE dbo.spCategoriesCreate
@Name nvarchar(50),
@KeyName varchar(30),
@Description ntext,
@Picture varchar(256),
@CategoryId int output
AS
INSERT INTO Categories
(
Name,
KeyName,
Description,
Picture
)
VALUES
(
@Name,
@KeyName,
@Description,
@Picture
47/52

)
SELECT @CategoryId = SCOPE_IDENTITY()
Hiện thực lớp Business Logic
Hiện thực lớp Business Logic đòi hỏi bạn phải nắm rõ các business logic của ứng
dụng. Ví dụ đối với ứng dụng tin tức của chúng ta thì khi tạo một chuyên mục mới,
bạn phải kiểm tra xem KeyName của chuyên mục đó đã có trong hệ thống chưa? Nếu
có rồi thì phải báo lỗi, và nếu chưa có thì chúng ta kiểm tra KeyName đó có hợp lệ hay
không? (Chỉ chứa kí tự alphabet, chữ số, gạch dưới và gạch ngang…).
public static void CreateCategory(Category category)
{
// Has this key name existed?
if (!CheckKey(category.KeyName))
throw new BusinessException(String.Format(Resources.Strings.KeyNameExisted,
category.KeyName));
// is this key name valid?
if (!ValidateKey(category.KeyName))
throw new BusinessException(String.Format(Resources.Strings.InvalidKeyName,
category.KeyName));
// ok , now save it to database
CategoryDAO categoryDAO = new CategoryDAO();
categoryDAO.CreateCategory(category);
}
2. Framework Web mẫu cho doanh nghiệp
Framework được chia làm 4 Project chính:
- Project Website
48/52

- Project Business
- Project Common
- Project Data
1. Project Website
Chứa thư mục mã nguồn các Form màn hình giao diện tương tác với người sử
dụng. Các thông tin sẽ được thao tác và kết nối với các Project khác thông qua
các References
Cấu trúc thư mục trong Project:
Bao gồm các thư mục xử lý cac giao diện người dùng như:
o Admin
o Controls
49/52

o Css
o Script
o …
2. Project Business
Chứa các hàm, các thủ tục xử lý lớp Business Logic Layer
3. Project Common
Chức các hàm xử lý các thủ tục chung của hệ thống như: Cookie, Datetime, Global,
…
50/52

4. Project Data
Chứa các hàm xử lý dữ liệu, thao tác với CSDL, kết nối, truy xuất và cập nhật
51/52

3. Quy trình lập trình vào ứng dụng
Sau khi Solution đã được cấu trúc và thành lập 1 dự án chuẩn, các quy trình thực hiện
dự án sẽ được theo chuẩn và thực hiện từng bước:
4. Công cụ quản trị Website và phát triển
- Công cụ quản trị Website
- Đề xuất hướng phát triển trong tương lai
52/52

[Bachkhoa-Aptech] Hướng dẫn lập trình web doanh nghiệp

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (6)

Ähnlich wie [Bachkhoa-Aptech] Hướng dẫn lập trình web doanh nghiệp

Ähnlich wie [Bachkhoa-Aptech] Hướng dẫn lập trình web doanh nghiệp (20)

Mehr von Phạm Văn Hưng

Mehr von Phạm Văn Hưng (11)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

[Bachkhoa-Aptech] Hướng dẫn lập trình web doanh nghiệp