Xây dựng website quản lý lý lịch khoa học cho cán bộ giảng viên trường đại học sư phạm thái nguyên
Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (2.75 MB, 63 trang )
LỜI CẢM ƠN
Sau thời gian tìm hiểu và thực hiện đề tài " Xây dựng website quản lý lý
lịch khoa học cho cán bộ giảng viên trường đại học sư phạm Thái Nguyên" em
cơ bản đã hoàn thành. Để đạt được kết quả này, em đã nỗ lực hết sức, đồng thời
nhận được rất nhiều sự giúp đỡ, quan tâm đóng góp ý kiến và chỉ bảo nhiệt tình
của thầy cô, bạn bè và gia đình.
Em xin gửi lời cảm ơn chân thành đến cô Nguyễn Hiền Trinh, Bộ môn
Khoa học máy tính, Khoa Công nghệ thông tin, Trường Đại học Công nghệ
thông tin và Truyền Thông, Đại học Thái Nguyên, cùng các anh bên trường Đại
học sư phạm Thái Nguyên đã tận tình hướng dẫn, chỉ bảo em trong suốt quá trình
làm đồ án.
Em cũng xin chân thành cảm ơn các thầy cô giáo Trường Đại Học Công
nghệ thông tin và Truyền Thông - Thái Nguyên đã tận tình giảng dạy, trang bị
cho em những kiến thức quý báu trong những năm học vừa qua.
Cuối cùng, em xin chân thành cảm ơn tới bạn bè, gia đình, đã luôn tạo
điều kiện, quan tâm, giúp đỡ em trong suốt quá trình học tập và làm đồ án.
Đề tài đã hoàn thành với một số kết quả nhất định, tuy nhiên vẫn không
tránh khỏi thiếu sót. Em rất mong nhận được sự thông cảm và đóng góp ý kiến
của các thầy cô và các bạn.
Thái Nguyên, tháng 06 năm 2016
Sinh viên thực hiện
Bùi Tiến Uy
1
LỜI CAM ĐOAN
Em xin cam đoan rằng số liệu và kết quả nghiên cứu trong đồ án này là
trung thực và không trùng lặp với các đề tài khác. Em cũng xin cam đoan rằng
mọi sự giúp đỡ cho việc thực hiện đồ án này đã được cảm ơn và các thông tin
trích dẫn trong đồ án đã được chỉ rõ nguồn gốc.
Sinh viên
Bùi Tiến Uy
2
MỤC LỤC
LỜI CẢM ƠN .....................................................................................................1
LỜI CAM ĐOAN................................................................................................2
MỤC LỤC ..........................................................................................................3
DANH MỤC HÌNH ẢNH ...................................................................................5
MỞ ĐẦU ............................................................................................................6
CHƯƠNG 1 CƠ SỞ LÝ THUYẾT VÀ CÔNG CỤ THỰC HIỆN.......................8
1.1 Công nghệ INTERNET ..............................................................................8
1.1.1 Giới thiệu về internet............................................................................8
1.1.2 Lợi ích của internet ..............................................................................8
1.1.3 Các trình duyệt web và hệ quản trị nội dung phổ biến ..........................9
1.1.4 Lịch sử của internet ..............................................................................9
1.2 Ngôn ngữ HTML VÀ CSS .......................................................................10
1.2.1 Tổng quan về HTML..........................................................................10
1.2.2 Tổng quan về CSS..............................................................................18
1.2.3 Ngôn ngữ lập trình PHP .....................................................................22
1.3 Giới thiệu về UML ...................................................................................24
1.3.1 Khái niệm và đặc điểm của UML.......................................................24
1.3.2 Mô hình khái niệm của UML .............................................................25
CHƯƠNG 2 KHẢO SÁT TRƯỜNG ĐẠI HỌC SƯ PHẠM THÁI NGUYÊN..29
2.1 Khảo sát hệ thống.....................................................................................29
2.1.1 Thông tin khảo sát..............................................................................29
2.1.2 Sơ đồ tổ chức .....................................................................................32
2.1.3 Quy trình quản lý ...............................................................................33
2.1.4 Thực trạng quản lý lí lịch khoa học của trường đại học sư phạm Thái
Nguyên .......................................................................................................35
2.1.5 Tính cấp thiết xây dựng website quản lý lí lịch khoa học cho cán bộ
giảng viên trường đại học sư phạm Thái Nguyên. .......................................35
CHƯƠNG 3: PHÂN TÍCH THIẾT KẾ HỆ THỐNG.........................................36
3.1 Thông tin vào/ra của hệ thống ..................................................................36
3.2 Các tác nhân và UC của hệ thống .............................................................36
3
3.3 Biểu đồ Use case(UC) ..............................................................................37
3.3.1 Biểu đồ UC mức tổng thể...................................................................37
3.3.2 Biểu đồ UC mức chi tiết.....................................................................38
3.4 Đặc tả một số UC chính............................................................................39
3.4.1 UC đăng nhập hệ thống ......................................................................39
3.4.2 UC tìm kiếm.......................................................................................41
3.4.3 UC quản lý các user(cán bộ giảng viên) .............................................42
3.5. Biểu đồ lớp..............................................................................................44
3.5.1 Các lớp chính .....................................................................................44
3.5.2 Vẽ biểu đồ lớp cho toàn bộ hệ thống ..................................................48
3.6 Danh sách các bảng cơ sở dữ liệu ............................................................49
CHƯƠNG 4: XÂY DỰNG WEBSITE QUẢN LÝ LÍ LỊCH KHOA HỌC........53
4.1.Giao diện trang chủ ..................................................................................53
4.2.Giao diện một số chức năng cơ bản khác..................................................54
KẾT LUẬN.......................................................................................................61
TÀI LIỆU THAM KHẢO .................................................................................62
4
DANH MỤC HÌNH ẢNH
Hình 1: Trường đại học sư phạm Thái Nguyên ..................................................29
Hình 2: Thầy hiệu trưởng Phạm Hồng Quang trong lễ kỷ niệm 50 năm thành lập
trường................................................................................................................30
Hình 3: Kỷ niệm 50 năm thành lập trường đại học sư phạm Thái Nguyên .........30
Hình 4: Sơ đồ tổ chức cán bộ trường đại học sư phạm Thái Nguyên..................32
Hình 5: Lý lịch khoa học cán bộ trường đại học sư phạm Thái Nguyên .............34
Hình 6: Biểu đồ UC mức tổng thể......................................................................37
Hình 7: Biểu đồ UC chi tiết tác nhân quản trị viên.............................................38
Hình 8: Biểu đồ UC chi tiết tác nhân cán bộ giảng viên.....................................38
Hình 9: Biểu đồ UC chi tiết tác nhân khách .......................................................39
Hình 10: Biểu đồ trình tự UC đăng nhập hệ thống .............................................40
Hình 12: Biểu đồ trình tự UC tìm kiếm..............................................................41
Hình 13: Biểu đồ cộng tác UC tìm kiếm ............................................................42
Hình 14: Biểu đồ trình tự UC quản lý các user ..................................................43
Hình 15: Biểu đồ cộng tác UC quản lý user .......................................................43
Hình 16: Biểu đồ lớp cho toàn bộ hệ thống........................................................48
5
MỞ ĐẦU
Cùng với sự phát triển của còn người, công nghệ thông tin (CNTT) cũng
không ngừng phát triển, CNTT đóng vai trò quan trọng và có những bước phát
triển mạnh mẽ cả về chiều rộng lẫn chiều sâu, dần khẳng định tầm quan trọng của
mình trong các hoạt động của đời sống như quản lý, kinh tế, thông tin… Với hoạt
động quản lý nói riêng, tin học đang từng bước khẳng định vị trí quan trọng và
ngày càng chiếm ưu thế bởi: Tốc độ xử lý thông tin nhanh chóng và chính xác
theo yêu cầu của người sử dụng; có khả năng lưu trữ và xử lý lượng thông tin
lớn; lưu trữ dữ liệu an toàn, thuận tiện và tính khoa học cao; làm giản hóa công
tác quản lý. Vì thế, tin học được ứng dụng vào quản lý đang ngày một nhiều hơn, đa
dạng hơn và việc áp dụng tin học vào trong quản lý cũng là một xu hướng tất yếu.
Trường đại học Sư phạm Thái Nguyên là một trường đào tạo lớn của nước
ta nhưng thực tế hiện nay, trường vẫn quản lý hồ sơ cá nhân của cán bộ (công
chức hay hợp đồng) chủ yếu bằng phần mềm Access, Office hoặc lưu trữ hồ sơ
trong các tủ. Việc lưu trữ và quản lý như vậy đem lại không ít những khó khăn
cho cán bộ trực tiếp làm công tác quản lý: Thứ nhất là khó khăn trong việc lưu
trữ và bảo quản sổ sách; thứ hai là khó khăn trong việc tra cứu thông tin, thống
kê – báo cáo và đòi hỏi nhiều nhân lực, công sức, thời gian.
Xuất phát từ thực tế khó khăn như vậy, em quyết định lựa chọn đề tài
“Thiết kế website quản lý lý lịch khoa học cho cán bộ giảng viên trường đại học
sư phạm Thái Nguyên” nhằm mục đích tin học hóa công tác quản lý, hỗ trợ cho
cán bộ quản lý được quản lý hồ sơ một cách gọn gàng, nhanh chóng và chính
xác.
Vận dụng các kiến thức về ngôn ngữ lập trình Php, hệ quản trị cơ sở dữ
liệu SQL Server, UML, phân tích thiết kế để thiết kế website quản lý lý lịch khoa
học cho cán bộ giảng viên trường đại học sư phạm Thái Nguyên.
Phạm vi của đề tài là ứng dụng kết quả nghiên cứu được cùng với kiến
thức đã học để thiết kế website quản lý lý lịch khoa học cho cán bộ giảng viên
trường đại học sư phạm Thái Nguyên.
6
Các nội dung thực hiện:
- Khảo sát thực tế yêu cầu của trường về Website quản lý lý lịch khoa học
cho cán bộ giảng viên trường đại học sư phạm Thái Nguyên.
- Phân tích các yêu cầu nghiệp vụ của hệ thống quản lý
- Thiết kế đặc tả module cho hệ thống
- Thiết kế cơ sở dữ liệu cho hệ thống
- Lập trình giao diện các mudule, chức năng của hệ thống
- Triển khai thực nghiệm hệ thống trên mạng internet.
Đề tài được thực hiện nhờ phương pháp tiếp cận: Khảo sát các yêu cầu
thực tế từ phía người dùng về module và chức năng đối với hệ thống. Phương
pháp nghiên cứu:
+ Phương pháp đọc tài liệu
+ Phương pháp phân tích mẫu
+ Phương pháp thực nghiệm
7
CHƯƠNG 1
CƠ SỞ LÝ THUYẾT VÀ CÔNG CỤ THỰC HIỆN
1.1 Công nghệ INTERNET
1.1.1 Giới thiệu về internet
Internet là một hệ thống thông tin toàn cầu có thể được truy nhập công
cộng gồm các mạng máy tính được liên kết với nhau. Hệ thống này truyền thông
tin theo kiểu nối chuyển gói dữ liệu (packet switching) dựa trên một giao thức
liên mạng đã được chuẩn hóa (giao thức IP). Hệ thống này bao gồm hàng ngàn
mạng máy tính nhỏ hơn của các doanh nghiệp, của các viện nghiên cứu và các
trường đại học, của người dùng cá nhân và các chính phủ trên toàn cầu.
1.1.2 Lợi ích của internet
Mạng Internet mang lại rất nhiều tiện ích hữu dụng cho người sử dụng,
một trong các tiện ích phổ thông của Internet là hệ thống thư điện tử (email), trò
chuyện trực tuyến (chat), máy truy tìm dữ liệu (search engine), các dịch vụ
thương mại và chuyển ngân và các dịch vụ về y tế giáo dục như là chữa bệnh từ
xa hoặc tổ chức các lớp học ảo. Chúng cung cấp một khối lượng thông tin và
dịch vụ khổng lồ trên Internet.
Nguồn thông tin khổng lồ kèm theo các dịch vụ tương ứng chính là hệ
thống các trang Web liên kết với nhau và các tài liệu khác trong WWW (World
Wide Web). Trái với một số cách sử dụng thường ngày, Internet và WWW
không đồng nghĩa. Internet là một tập hợp các mạng máy tính kết nối với nhau
bằng dây đồng, cáp quang, v.v.; còn WWW, hay Web, là một tập hợp các tài liệu
liên kết với nhau bằng các siêu liên kết (hyperlink) và các địa chỉ URL và nó có
thể được truy nhập bằng cách sử dụng Internet. Trong tiếng Anh, sự nhầm lẫn
của đa số dân chúng về hai từ này thường được châm biếm bằng những từ như
"the intarweb". Tuy nhiên việc này không có gì khó hiểu bởi vì Web là môi
trường giao tiếp chính của người sử dụng trên internet. Đặc biệt trongthập kỷ đầu
của thế kỷ 21 nhờ sự phát triển của các trình duyệt web và hệ quản trị nội dung
nguồn mở đã khiến cho website trở nên phổ biến hơn, thế hệ web 2.0 cũng góp
phần đẩy cuộc cách mạng web lên cao trào, biến web trở thành một dạng phần
mềm trực tuyến hay phần mềm như một dịch vụ.
8
Các cách thức thông thường để truy cập Internet là quay số, băng rộng,
không dây, vệ tinh và qua điện thoại cầm tay.
1.1.3 Các trình duyệt web và hệ quản trị nội dung phổ biến
Các chương trình duyệt Web thông dụng ở thời điểm này là:
Internet Explorer có sẵn trong Microsoft Windows, của Microsoft
Mozilla Firefox của Tập đoàn Mozilla
Google Chrome của Google
Netscape Navigator của Netscape
Opera của Opera Software
Safari trong Mac OS X, của Apple Computer
Maxthon của MySoft Technology
Avant Browser của Avant Force (Ý).
Các hệ quản trị nội dung nguồn mở thông dụng ở Việt Nam :
DotNetNuke (ASP.Net+VB/C#), phát triển bởi Perpetual Motion
Interactive Systems Inc.
Drupal (PHP), phát triển bởi Dries Buytaert
Joomla (PHP), phát triển bởi Open Source Matters
Liferay (Jsp, Servlet), phát triển bởi Liferay, Inc
Magento (PHP), phát triển bởi Magento Inc.
Mambo (PHP), phát triển bởi Mambo Foundation Inc., do Miro
Software Solutions - Úc - quản lý.
NukeViet (PHP), phát triển bởi VINADES.,JSC - Việt Nam
PHP-Nuke (PHP), phát triển bởi Francisco Burzi
Wordpress (PHP), phát triển bởi WordPress Foundation
Xoops (PHP), phát triển bởi The XOOPS Project
1.1.4 Lịch sử của internet
Tiền thân của mạng Internet ngày nay là mạng ARPANET. Cơ quan quản
lý dự án nghiên cứu phát triển ARPA thuộc bộ quốc phòng Mỹ liên kết 4 địa
điểm đầu tiên vào tháng 7 năm 1969 bao gồm: Viện nghiên cứu Stanford, Đại
học California, Los Angeles, Đại học Utah và Đại học California, Santa Barbara.
Đó chính là mạng liên khu vực (Wide Area Network - WAN) đầu tiên được xây dựng.
9
Thuật ngữ "Internet" xuất hiện lần đầu vào khoảng năm 1974. Lúc đó
mạng vẫn được gọi là ARPANET. Năm 1983, giao thức TCP/IP chính thức được
coi như một chuẩn đối với ngành quân sự Mỹ và tất cả các máy tính nối với
ARPANET phải sử dụng chuẩn mới này. Năm 1984, ARPANET được chia ra
thành hai phần: phần thứ nhất vẫn được gọi là ARPANET, dành cho việc nghiên
cứu và phát triển; phần thứ hai được gọi là MILNET, là mạng dùng cho các mục
đích quân sự.
Giao thức TCP/IP ngày càng thể hiện rõ các điểm mạnh của nó, quan
trọng nhất là khả năng liên kết các mạng khác với nhau một cách dễ dàng. Chính
điều này cùng với các chính sách mở cửa đã cho phép các mạng dùng cho nghiên
cứu và thương mại kết nối được với ARPANET, thúc đẩy việc tạo ra một siêu mạng
(SuperNetwork). Năm 1980, ARPANET được đánh giá là mạng trụ cột của Internet.
Mốc lịch sử quan trọng của Internet được xác lập vào giữa thập niên
1980 khi tổ chức khoa học quốc gia Mỹ NSF thành lập mạng liên kết các trung
tâm máy tính lớn với nhau gọi là NSFNET. Nhiều doanh nghiệp đã chuyển từ
ARPANET sang NSFNET và do đó sau gần 20 năm hoạt động, ARPANET
không còn hiệu quả đã ngừng hoạt động vào khoảng năm 1990.
Sự hình thành mạng xương sống của NSFNET và những mạng vùng khác
đã tạo ra một môi trường thuận lợi cho sự phát triển của Internet. Tới năm 1995,
NSFNET thu lại thành một mạng nghiên cứu còn Internet thì vẫn tiếp tục phát triển.
Với khả năng kết nối mở như vậy, Internet đã trở thành một mạng lớn nhất
trên thế giới, mạng của các mạng, xuất hiện trong mọi lĩnh vực thương
mại, chính trị, quân sự, nghiên cứu, giáo dục,văn hoá, xã hội... Cũng từ đó, các
dịch vụ trên Internet không ngừng phát triển tạo ra cho nhân loại một thời kỳ
mới: kỷ nguyên thương mại điện tử trên Internet.
1.2 Ngôn ngữ HTML VÀ CSS
1.2.1 Tổng quan về HTML
1.2.1.1 Giới thiệu về HMTL
HTML tên tiếng anh là Hypertext Markup Language , là ngôn ngữ siêu
văn bản, được đưa vào chuẩn web năm 1994. HTML là 1 ngôn ngữ đánh dấu chứ
10
không phải 1 ngôn ngữ lập trình, nhằm tạo ra các trang web tĩnh dựa trên các thẻ
đánh dấu. Dựa vào các thẻ đánh dấu trình duyệt xác định cách hiển thị.
1.2.1.2 Cấu trúc HTML
- HTML là 1 file văn bản chứa các thẻ đánh dấu.
- HTML phải có đuôi là .html, .htm…
Vd: index.html, default.htm
<html></html>Xác định 1 tài liệu html.
<head></head>: Xác định phần đầu của website. Chứa các thông tin về
website như thể tiêu đề, tác giả, mô tả….
<body></body>:Xác định phần thân của website. Nơi chứa toàn bộ nội
dung website.
1.2.1.3 Một số thẻ cơ bản
Mỗi thẻ có cấu trúc < tên-thẻ>. vd: <head>
- Thẻ gồm thẻ đóng và thẻ mở:
<tên-thẻ>: thẻ mở
</tên-thẻ>:thẻ đóng
Ví dụ: <head>
</head>
- Thẻ không phân biệt in hoa và in thường
hay <P>, nhưng theo
truyền thống thì chúng ta cứ dùng chữ thường.
- Thuộc tính và giá trị có thể có hoặc không: <body>Nội dung</body>
- Một số thẻ không cần thẻ đóng ( Để đúng chuẩn chúng ta thêm dấu gạch
chéo vào phía sau):
, <hr /> , <img src=“viettin.jpg” /> , …
Thẻ <head>
- Vị trí: Sau thẻ mở <html> và trước thẻ mở <body>.
- Chứa thông tin về website( nhưng không hiển thị) cho trình duyệt.
Thẻ <body>
- Vị trí: Sau cặp thẻ <head></head>.
- Chứa toàn bộ nội dung website( Hiển thị trên trình duyệt).
Thẻ <title>
- Nằm trong cặp thẻ <head>, nhằm tạo tiêu đề cho website.
Các thẻ heading
11
- Gồm 6 thẻ từ
đến theo chiều kích thước giảm dần
- Là thẻ xác định tiêu đề( khác với thẻ title) cho các chuyên mục, danh
mục, bài viết,…
Câu lệnh: Công ty thương mại và giáo dục Việt Tâm Đức
-
Nên sử dụng các thẻ heading cho:
+ Danh mục menu
+ Tiêu đề bài viết
+ Chuyên mục
Một số thẻ định dạng văn bản
a) Thẻ định dạng đoạn văn bản
- Là thẻ xác định tiêu đề( khác với thẻ title) cho các chuyên mục, danh
mục, bài viết,…
Câu lệnh:
Công ty thương mại và giáo dục Việt Tâm Đức
-
Nên sử dụng các thẻ heading cho:
+ Danh mục menu
+ Tiêu đề bài viết
+ Chuyên mục
Một số thẻ định dạng văn bản
a) Thẻ định dạng đoạn văn bản
-
Cú pháp:
Đoạn văn bản
-
Thẻ
xác định cho 1 đoạn văn bản và tự động xuống dòng
Ví dụ:
Đây là đoạn văn bản
b) Thẻ định dạng ký tự
-
<b></b>: In đậm
-
<i></i>: In nghiêng
-
<u></u>: Gạch chân
-
<s></s>: Gạch ngang
-
<sup></sup>: Đưa 1 ký tự lên trên( mũ) . AX2+ BX+C= 0
-
<sub></sub>: Đưa 1 ký tự xuống dưới. H2O
-
</pre>: Giữ nguyên đoạn văn bản( Như khi code)
Một số thẻ khác
- Thẻ <div>:
Là 1 thẻ quan trọng trong HTML, được sử dụng để phân chia các lớp
trong website thay cho việc dùng bảng( table) như trước đây( Sẽ nghiên cứu thêm
ở phần CSS).
- Thẻ xuống dòng
:
Trong HTML để xuống 1 dòng mới ta phải sử dụng thẻ xuống dòng
hoặc
( Theo chuẩn XHTML). Có 1 số thẻ mặc định nội dung bên trong xuống
dòng như:
12, <div>,
đến
,…
- Thẻ hình ảnh <img />
- Cú pháp: <img src=” đường dẫn ảnh” />
Các thuộc tính đi kèm:
+ Src=” ”: đường dẫn của ảnh cần hiển thị.
+ width=” ”: độ rộng của ảnh, đơn vị pixel. Vd: width=”200px”
+ Height=””: chiều cao của ảnh, đơn vị pixel. Vd: height=”200px”
+ alt=””: Nội dung hiển thị thay thế hình ảnh khi không được hiển thị.
+title=””: tiêu đề của ảnh khi đưa chuột qua.
Chú ý:
Khi sử dụng thẻ <img> nên đặt thuộc tính alt và title trong mọi trường
hợp. Hai thuộc tính này có tác dụng khi làm SEO và chuẩn w3c.
-Thẻ liên kết
- Cú pháp: <a href=”duong_dan”>nội dung</a>
- Thuộc tính bên trong thẻ a
+href=”” : đường dẫn tới trang cần tới vd:href=”
/>+target=””: phương thức khi mở liên kết.
_selft : mở liên kết ở trang hiện tại
_blank: mở ở tab mới
+ title: tiêu đề của liên kết
- Thẻ Table:
Trước đây bảng (table) được sử dụng để xây dựng bố cục website nhưng
bây giờ thì dùng (div).
Để biểu diễn bảng trong thẻ html chúng ta sử dụng cặp thẻ
<table></table>.
Bên trong thẻ này chứa 1 số thẻ khác có chức năng định nghĩa các thuộc
tính trong bảng như : dòng và cột..
Thẻ table
Cặp thẻ <table></table> dùng để khai báo 1 bảng
Các thuộc tính:
13
+width: độ rộng của bảng, thường sử dụng giá trị là px.
+height: chiều cao của bảng.
+border: độ lớn đường viền của bảng.
+cellspacing: định độ dày của khung.
+cellpadding: định khoảng cách từ nội dung đến đường bao của bảng.
Ví dụ:
<table width=”500” border=”3” cellspacing=”0” cellpadding=”20”>
……
</table>
- Thẻ <tr></tr> : table row
Xác định dòng trong bảng, nằm bên trong cặp thẻ <table></table>.
Ví dụ:
<table>
<tr>…..</tr>
<tr>……</tr>
</table>
Bao nhiêu cặp thẻ <tr> ứng với từng đó dòng trong 1 bảng
Thẻ <td></td> : table data
Thẻ định nghĩa cột trong bảng, chứa dữ liệu của bảng
Cặp thẻ <td></td> nằm bên trong cặp thẻ <tr></tr>
- Thẻ danh sách:
- Trong HTML có 3 loại danh sách
+ ol: ordered list: Danh sách có đánh trật tự
+ ul: unordered list: Danh sách không đánh trật tự
+ dl: definition list: Danh sách định nghĩa
- Ngoài để tạo danh sách các thẻ trên còn sử dụng để xây dựng hệ thống
Menu
của website
- Bên trong các cặp thẻ <ol></ol> , <dl></dl> và <ul></ul> là các cặp thẻ
<li></li> hay <dd></dd> và <dt></dt>
Danh sách có trật tự <ol></ol>
14
- Tạo nên danh sách có đánh thứ tự 1, 2, 3,…bên trong là các cặp thẻ định nghĩa
Danh sách <li></li>
- Có thể thay đổi cách hiển thị khi sử dụng <ol> bằng cách sử dụng thuộc
tính type.
+ a: Hiển thị theo kiểu ký tự thường a, b, c…
+ A: Hiển thị theo dạng ký tự hoa A, B, C..
+ i: Hiển thị dạng La Mã thường i, ii, iii, iv,..
+ I: Hiển thị dang La Mã I, II, III, IV,..
+ square: Hình ô vuông
+ circle: Hình tròn màu rỗng ( màu trắng)
+ disc: Hình tròn đặc( chấm tròn màu đen)
- Để bắt đầu với 1 giá trị khác 1 chúng ta sử dụng thuộc tính start=“n” với
n là giá trị bắt đầu của danh sách.
Danh sách không trật tự <ul></ul>
- Là kiểu danh sách đánh thứ tự các list mặc định là các hình tròn đặc
( chấm tròn đen)
- Có thể tùy biến sang các kiểu khác: đánh trật tự, ô vuông, hình tròn rỗng,..
Tương tự như đối với <ol></ol>
- Để loại bỏ các kiểu đánh thứ tự đối với 2 loại “ol” và “ul” chúng ta sử
dụng thuộc tính type với giá trị là none
Danh sách định nghĩa
- Khác với “ol” và “ul”, cặp thẻ <dl></dl> được dùng để định nghĩa 1 đối
tượng nào đó
- Bên trong cặp thẻ “dl” chứa các cặp thẻ
+ “dd” (Definition Description): Thẻ mô tả định nghĩa
+ “dt” ( Definition term): Thẻ định nghĩa 1 thuật ngữ nào đó
- Biểu mẫu Form:
Form là một thành phần thường gặp và quan trọng trong mỗi website,
form tạo nên tính tương tác giữa website và người dùng qua những phần nhập,
truy xuất dữ liệu
Như: đăng ký, đăng nhập, tìm kiếm….
15
Cú pháp <form action=”” name=”” method=””></form>
Action: link tới file xử lý dữ liệu.
Method: phương thức truyền dữ liệu, như POST và GET.
Các đối tượng trong form:
- Thẻ input :
a) Textbox
- Tạo nên đối tượng cho phép nhập dữ liệu văn bản
- Cú pháp: <input type=“text” name=“” value=“” size=“” />
+ name: Tên của textbox, đặt tùy ý, được kết hợp với PHP hay Javascript
để tạo tính tương tác trên website .
+ value: Giá trị ban đầu của textbox, hiển thị như dòng “Tìm kiếm…
+ size: Độ rộng của textbox
Nếu thẻ input không sử dụng thuộc tính type=“text” thì trình duyệt tự hiểu
dạng Textbox
b) Password
-
Đối với các form như đăng nhập chúng ta dùng loại này để ẩn đối
tượng password
- Cú pháp: <input type=“password” value=“ ” name=“” size=“” />
- Checkbox :
- Cú pháp: <input type=“checkbox” name=“” value=“” />
+ name: Tên của checkbox, sử dụng kết hợp PHP hay Javascript( JS)
+ value: Giá trị của checkbox, sử dụng kết hợp PHP hay JS, gửi kết quả
lên server và ngược lại
+ Có thể sử dụng thêm thuộc tính checked để chọn mặc định cho đối tượng
Lưu ý: Đối với các đối tượng cùng nhóm thì name phải đặt giống nhau
- Radio :
- Tạo chức năng chọn dạng núm Radio
- Cú pháp: <input type=“radio” name=“” value=“” />
- Các thuộc tính name, value và checked sử dụng tương tự như Checkbox
- Upload :
- Tạo chức năng duyệt file từ máy tính
16
- Cú pháp: <input type=“file” name=“” />
+ name: Tên của đối tượng file
- Submit :
- Tạo nút gửi dữ liệu tới file xử lý ( Tới link khai báo ở thuộc tính Action)
- Cú pháp: đầu, hiển thị ở nút submit” />
- Button :
- Tương tự như Submit tuy nhiên khi sử dụng Button dữ liệu sẽ không
được gửi tới file xử lý( Khai báo phần action) mà thường kết hợp với JS để tạo
tương tác
- Cú pháp: đầu, hiển thị ở nút submit” />) Reset
- Trả lại giá trị ban đầu khi chưa nhập liệu cho tất cả các đối tượng trong
form
- Cú pháp: ở nút reset”
- Select tags :
a) Tạo danh sách sổ xuống
- Cú pháp
<select name=“Tên danh sách”>
<option value=“hn”> Hà Nội</option>
<option value=“hcm”> TP. HCM</option>
<option value=“hp”> Hải Phòng</option>
<option value=“tn”> Thái Nguyên</option>
</select>
+ Cặp thẻ <select> </select> khai báo 1 phiên làm việc với kiểu danh sách
+ Cặp thẻ <option></option> : bên trong cặp thẻ <option></option>
- Thuộc tính value: Giá trị của lựa chọn( Sử dụng kết hợp với JS hoặc
PHP)
- Các thuộc tính khác: label, selected, disabled
- Hộp thoại soạn thảo
17
- Để tạo 1 hộp thoại cho phép soạn thảo( dạng bình luận) chúng ta sử dụng thẻ
- Textarea :
- Cú pháp
phép”> Nội dung
</textarea>
1.2.2 Tổng quan về CSS
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
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.
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ẻ ..., 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:
Style đặt trong từng thẻ HTML riêng biệt
Style đặt trong phần
Style đặt trong file mở rộng .css
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ẻ đã được khai báo ở đầu
file css với các thuộc tính như sau:
#vidu {
width: 200px;
height: 300px;
18
}
Ở một chỗ nào đó trong file css bạn lại khai báo một lần nữa thẻ
với các thuộc tính.
#vidu {
width: 400px;
background-color: #CC0000;
}
Sau đoạn khai báo này thì thẻ
sẽ có thuộc tính:
#vidu {
width: 400px; /* Đè lên khai báo cũ */
height: 300px;
background-color: #CC0000;
}
Các thuộc tính cơ bản của CSS:
Type:
Font : Font chữ. Bạn có thể thêm font chữ cho các Class, thẻ Div - được
dùng chung cho font chữ và size chữ
Ví dụ:
font: bold 13px Arial, Helvetica, sans-serif;
Và đó là cách viết tắt nhằm rút gọn css cho nhẹ web hơn và tối ưu website
của bạn
Size : Cỡ chữ
Weight : độ dày font. Thường dùng Normal và Bold hay 999. Các giá trị
100-900 diễn tả độ dày nhưng không phải browser nào cũng hỗ trợ.
Ví dụ: font-weight: 13px;
Style(Italic và Oblique là như nhau): nghiêng
Variant : Bình thường hoặc Small-Cap (hoa nhỏ)
Line Height: độ cao hàng chữ trong paragraph. Có thể dùng % (>100% là
giãn ra)
Decoration: cách gạch ngang
Underline: gạch dưới chữ
19
Strikethrough: gạch giữa chữ
Overline: gạch đầu chữ
None: không gạch (thường dùng với liên kết)
Color: màu chữ. Có thể chọn từ bảng màu hiện ra hoặc trích màu từ đối
tượng khác, trong trang web khác.
Color thì có thể viết nhiều cách.
Kiểu chữ:
Sử dụng lệnh: text-decoration: cho các hiệu ứng bên dưới.
Capitalize: In hoa chữ hoa đầu tiên
Ví dụ: Theheweb Thiet Ke Website Chuyên Nghiệp
Uppercase: In hoa hết tấc cả, 100% chữ Hoa
Lowercase: Toàn chữ thường
None: Bình thường.
Background
Có 4 cách để viết background nhé các bạn.
Background: màu nền
Background: hình nền
Background-color: màu nền. Có thể chọn từ bảng màu hiện ra hoặc trích
màu từ đối tượng khác, trong trang web khác
Background-image: ảnh nền
Repeat: cách lặp lại ảnh nền (repeat-x, repeat-y, repeat: 2 chiều)
Attachment: (fixed, scroll) ảnh nền sẽ cuộn theo chữ hay cố định. Mặc
định là scroll.
Horizontal position, Vertical position: vị trí ảnh nền theo chiều ngang/dọc.
Block:
Word Spacing: Khoảng cách giữa các từ (một inch bằng 72 point. Một
pica bằng 12 point, ems là đơn vị đo tương đối, 1 ems = default font size. Ví dụ
brower đang hỗ trợ cỡ font mặc định là 14 pixel thì mỗi ems= 14 pixel.)
Letter Spacing: Khoảng cách giữa các ký tự
Vertical Alignment:
Đưa chữ lên (super), hạ chữ xuống (sub) nhưng không làm nhỏ cỡ chữ
20
Có thể gõ 90% (số>0) để đưa chữ lên, -90% (số âm) để hạ chữ xuống)
Chọn top, bottom, middle để canh nội dung cell trong table
Chọn baseline để canh theo chân hàng chữ
Text-top, text-bottom: canh hình
Text Align: canh chữ, left, right, center, justify
Text Indent: canh hàng đầu tiên của paragraph, số dương: thụt vào, số âm:
thụt ra
Whitespace: normal, pre, nowrap: bình thường, giữ nguyên định dạng,
không wraptext
Display:
block: đối tượng là khối tách biệt với những cái khác ở trên và dưới nó.
Giống paragraph. Có thể apply cho link để toàn chiều rộng có thể click thay vì
user chỉ click vào text của link
inline: các đối tượng có giá trị này sẽ nằm cùng 1 hàng. Vd: các li cùng 1
hàng, để làm menu ngang thay vì dọc (không gán cho ul)
none: đối tượng không xuất hiện.
Box:
Width: độ rộng
Height: độ cao
Float: (left, right) Cho đối tượng trôi qua trái hoặc qua phải
Clear: Thuộc tính ngược với float: left, right, both, none.
Padding: Khoảng cách từ lề của đối tượng với nội dung bên trong
Margin: Khoảng cách từ lề của đối tượng với những đối tượng bên ngoài
Border:
Style: kiểu đường viền. (Bỏ qua same for all để chỉ định riêng từng đường viền)
Width: độ dày. Có thể dùng thick, medium, thin hoặc 1 con số
Color: Màu đường viền.
List:
Type: Kiểu bullet (disc: tròn đen; circle: tròn trắng; square: vuông;
decimal: 1 2 3; lower-roman: i ii, iii; upper-roman: I II III; lower
Alpha: a b c; upper-alpha: A B C)
21
Bullet image: hình dùng thay thế ký tự bullet
Position: vị trí của ký hiệu bullet (ở ngoài hay bên trong lề trái của các item)
Định dạng các liên kết:
THW:link: định dạng cho tất cả liên kết chưa được nhắp trong trang
THW:visited: định dạng cho tất cả liên kết đã được nhắp trong trang
THW:hover: định dạng cho liên kết trong trang đang được đưa chuột vào
THW:active: định dạng cho liên kết trong trang đang được nhắp (chưa nhả chuột)
THW: định dạng cho tất cả liên kết trong trang
#menu THW:link: định dạng cho tất cả liên kết khi ta rê chuột vào có dán
link trong vùng có tên là menu
#menu THW:visited: định dạng cho tất cả liên kết đã được nhấp chuột
trong vùng có tên là menu
#menu THW:hover: định dạng cho liên kết đang được rê chuột vào trong
vùng có tên là menu
#menu THW: định dạng cho tất cả liên kết trong vùng có tên là menu
.menu THW:link: định dạng cho tất cả liên kết khi ta rê chuột có dán link
trong vùng có class là menu
.menu THW:visited: định dạng cho tất cả liên kết đã được nhấp chuột
trong vùng có class là menu
.menu THW:hover: định dạng cho liên kết đang được đưa chuột vào trong
vùng có class là menu
.menu THW: định dạng cho tất cả liên kết trong vùng có class là menu
.tieude:link: định dạng cho liên kết có class là tieude, chưa được nhấp chuột.
.tieude:visited: định dạng cho liên kết có class là tieude, đã được nhấp chuột
.tieude:hover: định dạng cho liên kết có class là tieude, đang được đưa
chuột vào.
.tieude: định dạng cho liên kết có class là tieude
1.2.3 Ngôn ngữ lập trình PHP
1.2.3.1 Giới thiệu về PHP
PHP (Hypertext Preprocessor) được giới thiệu năm 1994 bởi R. Lerdoft,
như một bộ sưu tập của ngôn ngữ chưa chặt chẽ dựa vào Perl và các công cụ của
22
trang chủ. Vì quá trình xử lý dựa trên máy chủ nên các trang Web được
viết bằng PHP sẽ dễ dàng hơn ở bất cứ hệ điều hành nào. Nói một cách ngắn gọn:
PHP là một ngôn ngữ lập trình kiểu script, chạy trên Server và trả về mã
HTML cho trình duyệt. Xu hướng sử dụng PHP trong việc thiết kế Web đang
ngày càng phát triển trong giai đoạn hiện nay và trong tương lai.
PHP là một ngôn ngữ lập trình được kết nối chặt chẽ với máy chủ nói một
cách đơn giản không theo thuật ngữ khoa học thì một quá trình xử lý PHP được
thực hiện trên máy chủ (Windowns hoặc Unix), khi một trang Web muốn dùng
PHP thì phải đáp ứng được tất cả các quá trình xử lý thông tin trong trang Web
đó, sau đó đưa ra kết quả như ngôn ngữ HTML, vì quá trình xử lý này diễn ra
trên máy chủ nên trang Web được viết bằng PHP sẽ dễ nhìn hơn ở bất kì hệ điều
hành nào.
Cũng giống như hầu hết các ngôn ngữ lập trình khác, PHP có thể nối trực
tiếp với HTML, Mã PHP tách biệt với HTML bằng các thực thể đầu và cuối.
Khi một tài liệu được đưa ra phân tích, quá trình xử lý PHP chỉ được thực
hiện ở những điểm quan trọng, rồi sau đó đưa ra kết quả.
Mã PHP được đặt trong một kiểu tag đặc biệt cho phép ta có thể vào hoặc
ra khỏi chế độ PHP, cú pháp của PHP cơ bản cũng giống như một số ngôn
ngữ lập trình khác, đặc biệt là C và Perl.
PHP được nhận dạng dưới 4 dạng phiên bản.
a.
// bắt đầu php
<?php echo “Hello World”; ?>
// kết thúc php
b.
0px;"> </script language = “php”>
<?php Echo “Hello, World”; ?>
c.
<?php Echo “Hello, World”; ?>
23
d.
Tuy nhiên phiên bản đầu tiên vẫn được ưa chuộng và dùng phổ biến hơn.
1.2.3.2 Lịch sử ra đời và phát triển
Lịch sử ra đời của PHP
PHP ra đời vào khoảng năm 1994 do một người phát minh mang tên Rasm
us Lerdof, dần dần nó được phát triển bởi nhiều người đó cho đến nay.
Tới năm 1998 việc công bố phiên bản 3 thì PHP mới chình thức phát triển
theo hướng tác riêng của mình, giống như C và Perl, PHP là một ngôn
ngữ lậptrình có cấu trúc và tính năng đa dạng, chính vì những điểm giống
nhau này đã khuyến khích các nhà thiết kế Web chuyên nghiệp qua sử dụng PHP.
Với phiên bản 3 này PHP cũng cung cấp một số lượng cơ sở dữ liệu
khá
đồ sộ gồm cả MySQL, mySQL OPBC và Oracle, nó cũng có thể làm việc
với các hình ảnh các file dữ liệu, FTP, XML và host của các kĩ thuật ứng
dụng khác.
Cho đến nay thì PHP đã được công bố tới phiên bản 5 và càng ngày càng
hoàn hảo và dễ sử dụng, và là một dịch vụ hàng đầu miễn phí. Một số nhà phát
triển ứng dụng web, thường sử dụng PHP để xây dựng các ứng dụng thương mại
điện tử cho đến thời điểm tháng 1 năm 2001 có 5 triệu tên miền trên thế giới sử
dụng PHP.
PHP là open source, điều này có nghĩa là bạn có thể làm việc trên mã ngu
ồn, thêm, sửa, sử dụng và phân phối chúng.
1.3 Giới thiệu về UML
1.3.1 Khái niệm và đặc điểm của UML
UML là ngôn ngữ mô hình hóa thống nhất(Unified Modeling Language),
trước hết nó là mô tả ký pháp thống nhất, ngữ nghĩa và các định nghĩa về
metamodel(mô tả định nghĩa chính ngôn ngữ mô hình hóa), nó không mô tả
phương pháp phát triển. UML được sử dụng để hiển thị, đặc tả, xây dựng và làm
tài liệu các vật phẩm của quá trình phân tích xây dựng hệ thống phần mềm theo
hướng đối tượng. UML được sử dụng cho mọi tiến trình phát triển phần mềm,
xuyên suốt vòng đời phát triển và độc lập với các công nghệ cài đặt hệ thống.
24
UML là ngôn ngữ chuẩn để viết các kế hoạch chi tiết phần mềm. Nó phù
hợp cho việc mô hình hóa các hệ thông tin doanh nghiệp, các ứng dụng phân tán
trên nền Web, hệ thống nhúng thời gian thực… Các khung nhìn của ngôn ngữ
được quan sát từ góc độ phát triển và triển khai hệ thống, nó không khó sử dụng
và dễ hiểu. UML là ngôn ngữ mô hình được cả con người và máy sử dụng.
Đặc điểm của UML
UML là ngôn ngữ.
UML là ngôn ngữ để hiển thị.
UML làm ngôn ngữ đặc tả
UML là ngôn ngữ dễ xây dựng
UML là ngôn ngữ tài liệu
1.3.2 Mô hình khái niệm của UML
Phần tử mô hình UML
Các khối hình thành mô hình UML gồm ba loại như sau: phần tử, quan hệ
và biểu đồ. Phần tử là trừu tượng căn bản trong mô hình, các quan hệ gắn các
phần tử này lại với nhau, còn biểu đồ nhóm tập hợp các phần tử. Trong UML có
bốn loại phần tử mô hình, đó là cấu trúc, hành vi, nhóm và chú thích. Các phần tử
này là các khối để xây dựng hướng đối tượng cơ bản của UML.
Phần tử cấu trúc là các danh từ trong mô hình UML. Chúng là bộ phận
tĩnh của mô hình để biểu diễn các thành phần khái niệm hay vật lý. Có bảy loại
phần tử cấu trúc, đó là: lớp, giao diện, phần tử cộng tác, trường hợp sử dụng(Use
Case), lớp tích cực(active class), thành phần, nút(node).
Phần tử hành vi là bộ phận động của mô hình UML. Chúng là các động
từ của mô hình, biểu diễn hành vi theo thời gian và không gian. Có hai loại chính
là tương tác và máy trạng thái.
Phần tử nhóm là bộ phận tổ chúc của mô hình UML. Chỉ có một phần
tử thuộc nhóm này có tên là gói(package). Gói là cơ chế đa năng để tổ chức các
phần tử của nhóm. Các phần tử cấu trúc, hành vi và ngay cả phần tử nhóm có thể
cho vào gói.
25
