[Bachkhoa-Aptech] Lập trình Web doanh nghiệp

CHƯƠNG TRÌNH ĐÀO TẠO
LẬP TRÌNH WEB DOANH NGHIỆP

Bài 1:
Phân tích về thành phần, cấu hình đồ
họa một website

1


 Tổng quát về cấu hình đồ họa 1
websitre
 Các thành phần cụ thể của một
website

2


 Tổng quát về cấu hình đồ họa 1
website
 Các thành phần cụ thể của 1 website

3


 Logo & banner
 Menu chính
 Menu trái
 Chân trang(Footer)
 Nội dung website
 Các thành phần quảng cáo
 Một số thành phần khác…

4


 Logo, banner

Logo Banner

5


 Menu chính

• Trên đây là ví dụ một phần menu
chính của 1 website, nội dung menu
do người dùng định nghĩa và thay đổi
động theo ý quản trị.

6


 Menu trái

Ví dụ về chuyên mục
menu trái của
website

7


 Chân trang - Footer

• Chân trang thường là phần được giới thiệu
về cơ quan chủ quản của website, thông tin
như tên doanh nghiệp, điện thoại, fax, địa
chỉ, email…

8


 Các thành phần nội dung website

Một phần nội
dung nhỏ của
website

9


 Các thành phần quảng cáo
• Quảng cáo được sắp xếp xuất hiện nhiều vị
trí khác nhau trên website như quảng cáo
banner, quảng cáo bên phải trang, bên trái
trang hay một số đơn vị yêu cầu khác.

10


 Một số thành phần khác…

Video

Tư vấn trực
tuyến

11


 Bài 2:
Các kỹ thuật Layer, cắt ảnh, đối
tượng phục vụ cho đồ họa lập
trình

12


 Yêu cầu:
 Máy tính phải được cài đặt sẵn
chương trình phần mềm Photoshop
 Có một file ảnh giao diện đã được
thiết kế

13


 Tiến hành các bước:
 Bước 1: Khởi động chương trình
Photoshop: Vào Start => chọn
Programs => tìm đến Adobe
Photoshop để chạy chương trình
 Bước 2: Mở file ảnh cần cắt: Vào file
chọn Open

14


 Xuất hiện hộp thoại Open

Chọn Open và tìm đến file
cần cắt ảnh để mở

15


 Sau khi mở file xong ta tiến hành
các bước sau để cắt ảnh:
 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.
16


 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:


Vùng sau khi
được chọn

17


 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.

18


 hộp thoại xuất hiện:

19


 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: 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.

20


 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…

21


 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:

22


23


 Sau khi tiến hành các bước trên
chúng ta bấm vào nút save để
hoàn tất.
 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, …
24


 Công cụ ẩn/hiện Layer

25


 Chọn hiển thị tự động chọn layer

26


 Công cụ lấy màu background

27


 Công cụ đổ màu Gradient

28


 Kỹ thuật chỉnh size ảnh, Kỹ thuật
Transform, Công cụ Text/font size, font-
name

29


 Bài 3:
Kỹ thuật Stylesheet cơ bản

30


1. 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

31


2. Cú pháp của CSS
 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"}

32


 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
33
}


3. Làm sao để chèn css vào trang web
 CSS được khai báo trong file riêng
<html>
<head>
<link rel="stylesheet" type="text/css"
href="/mystyle.css" medial="all" />
</head>
<body>
</body>
</html>

34


 CSS được khai báo trong file riêng
 Chèn thẳng CSs trong tài liệu được áp dụng trong
trường hợp những định dạng CSS này chỉ giành
riêng cho tài liệu HTML đó. Khi bạn chèn trực tiếp
thì đoạn mã của bạn phải đặt trong thẻ <style> và
đặt trong phần <head> .

<head>
<style type="text/css">
hr {color: sienna}p {margin-left: 20px}
body {background-image: url("images/back40.gif")}
</style>

</head> 35


 Chèn trực tiếp vào thẻ của HTML(inline
style)
 Inline style được sử dụng nhiều trong trường hợp
một thẻ HTML nào đó cần có style riêng cho nó.
 Inline style được áp dụng cho chính thẻ HTML đó,
cách này sẽ có độ ưu tiên lớn nhất so với hai cách
trên. Dưới đây là một ví dụ mà chúng ta dùng Inline
style
<p style="color: sienna; margin-left: 20px">
Đây là phần nội dung hiển thị
</p> 36


4. Nhiều Stylesheet
 Trong trường hợp mà có một số thẻ có cùng
định dạng, chúng ta có thể gộp chúng lại với
nhau. Giả sử như sau:
h1, h2, h3
{ margin-left: 10px;
font-size: 150%; ...
}

37


5. Các vấn đề về văn bản và cách
định dạng về văn bản
 Đặt màu cho một đoạn văn bản
 Để đặt màu cho một đoạn văn bản chúng ta có thể
dùng thuộc tính: color: #mã màu;

p {
color: #333333;
}

38


 Đặt nền cho một đ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;}
 Đặt nền cho một đoạn văn bản
 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;}
39


 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 */}
40


6. 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).

41

 Đặ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;
}
 Đặt font cho đoạn văn bản
 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;} 42
h3 { font-size: 12px;}


 Đặ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 */}
 Đặ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;}
43


7. Đường viền và các thuộc tính
đường viền
 Trong thuộc tính đường viền (border)
chúng ta có 3 giá trị cơ bản đó là:
1. border-color:
2. border-width:
3. border-style:

44


 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;}

45


 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;}

46


8. 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.

47

 Các thuộc tính của margin
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*/
}

48


9. 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ử.

49


 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:
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

50

 Để 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;
}

51


 Bài 4
Kiến trúc về mô hình lập trình 3 lớp

52


 Mô hình lập trình ứng dụng Web:

53


 Mô hình 3 lớp (3 layers)
 Presentation Layer
 Business Logic Layer
 Data Access Layer
 Lớp Presentation

54


 Framework Web mẫu cho doanh
nghiệp
 Framework được chia làm 4 Project chính:

55


 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

56


 Cấu trúc thư mục trong Project:

57


 Project Business : Chứa các hàm, các
thủ tục xử lý lớp Business Logic Layer

58


 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, …

59


 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

60


 Bài 4: 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:

61

 Phân tích và thiết kế Database, thiết kế
bảng trong CSDL
 Sử dụng công cụ hoặc tự viết các Form
code màn hình và SP như:
 Các thủ tục: thêm, mới, sửa, xóa
 Các file Object: file Info và Controler
 Các file .aspx, ascx
 Nhúng vào Solution & Project
 Biên dịch và chỉnh sửa
 Lên chương trình demo

62


 Bước 1 : Thiết kế Table lưu trữ dữ liệu
•
Thiết kế bảng sau: TB_MON_HOC

63


 Bước 2 : Tự viết mã nguồn hoặc sử
dụng tool gen code:

64

 Phần mềm có các chức năng:
 Chọn CSDL, chọn Database, và kết nối tới
Database đó
 Lựa chọn các column cần thực hiện việc lập
trình:
 Tên Column
 Tên nhãn hiện thị trên Form
 Thứ tự xuất hiện
 Loại công hiện thị (textbox, checkbox, FCKEditor,
…)
 Ràng buộc dữ liệu
 View/Update
…
65


66


 Cấu hình lựa chọn đối với bảng
TB_MON_HỌC như sau:
o Mã môn học
o Tên môn học
o Diễn giải
o Thứ tự
o Sử dụng textbox/FCKEditor
o Các tùy chọn null/ not null
67


68


 Tự động tạo CSDL:

69


 Lựa chọn các tùy chọn đặt tên:
Tên trang
Có phân trang hay không?
Số hàng
Tên thư mục tạo code

70


71


 Sau khi hoàn thiện việc tạo mã nguồn tự
động, code sẽ được sinh ra và lưu trữ trong
thư mục được chọn:

72

 Folder Admin: chữa mã nguồn trang aspx
 Folder Business Class: chứa các file
Business Object
 Folder Data Class: Chứa các file xử lý dữ
liệu
 Folder Stored Procedures: chứa các file
chứa các thủ tục trong SQL

73


 Thư mục lưu trữ SP:

74


 Tạo các SP vào trong Database:

75


 Mở Solution, add code và Solution:
 Add file code vào lớp Data Access Layer, thực hiện
việc truy xuất dữ liệu

76


77


 Mã nguồn file trong thư mục:

78


 Add các file vào Project Business:

79


80


 Add các form màn hình tương tác với người
dùng vào thư mục, cấu trúc website:

81


82


83


 Biên dịch chương trình:

84


 Cấu hình hiển thị trên Menu:

85


86


 Hiển thị danh sách môn học

87


 Thêm mới môn học:

88


 Màn hình thêm mới môn học:

89


***THE END***

90

[Bachkhoa-Aptech] Lập trình Web doanh nghiệp

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to [Bachkhoa-Aptech] Lập trình Web doanh nghiệp

Similar to [Bachkhoa-Aptech] Lập trình Web doanh nghiệp (20)

More from Phạm Văn Hưng

More from Phạm Văn Hưng (11)

[Bachkhoa-Aptech] Lập trình Web doanh nghiệp