Website tin tức Hưng Yên 2010
TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT HƯNG YÊN
KHOA CÔNG NGHỆ THÔNG TIN
BÀI TẬP LỚN
HỌC
PHẦN
LẬP TRÌNH WEB ĐỘNG VỚI ASP.NET
ĐỀ TÀI
Website tin tức Hưng Yên
Giảng
viên:
Vũ Xuân Thắng
Lớp:
TK7LC2
(201092)
GVHD: Vũ Xuân Thắng
Website tin tức Hưng Yên 2010
Mục lục
LỜI MỞ ĐẦU 2
Chương 1: Giới thiệu đề tài 4
Lý do chọn đề tài: 4
Mục tiêu xây dựng đề tài : 5
Chương 2: Khảo sát đề tài 5
I. Địa điểm khảo sát 6
II.Kết quả khảo sát 6
Chương 3: Thiết kế cơ sở dữ liệu 8
Chương 4:Thiết kế tổng thể 15
I.Thiết kế trang master page 15
II. Các trang Web trong hệ thống Webside tin tức Hưng Yên ( HungYen Inform) 20
Chương 5: Hướng dẫn sử dụng 29
Kết luận 30
* Kết quả thực hiện website: 30
Hướng phát triển của đề tài 30
Danh mục tài liệu tham khảo: 31
LỜI MỞ ĐẦU
Hiện nay tại Việt Nam, cùng với sự phát triển bùng nổ, mạnh mẽ của công
nghệ thông tin và truyền thông, Internet đang bước vào giai đoạn phát triển rộng
khắp trên toàn quốc. Do đó việc tìm hiểu tin tức rất cần thiết đặc biệt là trên
Internet với thế mạnh về tốc độ sẽ gia tăng rất nhanh trong tương lai. Song song
với sự phát triển của các dịch vụ trên Internet là yêu cầu phát triển nhanh chóng
các website tin tức cập nhật những thông tin thiết thực, vần đề dư luận Nhận thức
được nhu cầu đó chúng em đã quyết định tìm hiều để xây dựng một website tin
GVHD: Vũ Xuân Thắng
Website tin tức Hưng Yên 2010
tức mà cụ thể là trang “Website tin tức Hưng Yên” dựa vào công nghệ ASP.NET
trên môi trường C#.
Do thời gian thực hiện đề tài có hạn và kiến thức của chúng em còn nhiều hạn
chế nên kết quả báo cáo đề tài còn nhiều thiếu xót. Chúng em rất mong nhận được
sự góp ý chỉ bảo của thầy và các bạn để đề tài của chúng em có thể hoàn thiện hơn
nữa.
Trong thời gian thực hiện đề tài chúng em đã nhận được rất nhiều sự giúp đỡ
từ các thầy cô và các bạn, đặc biệt là thầy Vũ Xuân Thắng - giảng viên khoa Công
nghệ thông tin- Trường Đại học SPKT Hưng Yên.
Chúng em xin chân thành cảm ơn!
NHẬN XÉT CỦA GIẢNG VIÊN HƯỚNG DẪN
……………………………………………………………………………………….
……………………………………………………………………………………….
……………………………………………………………………………………….
……………………………………………………………………………………….
……………………………………………………………………………………….
……………………………………………………………………………………….
……………………………………………………………………………………….
……………………………………………………………………………………….
GVHD: Vũ Xuân Thắng
Website tin tức Hưng Yên 2010
……………………………………………………………………………………….
……………………………………………………………………………………….
……………………………………………………………………………………….
……………………………………………………………………………………….
……………………………………………………………………………………….
……………………………………………………………………………………….
……………………………………………………………………………………….
……………………………………………………………………………………….
……………………………………………………………………………………….
……………………………………………………………………………………….
………………………………………………………………………………………
……………………………………………………………………………………….
Chương 1: Giới thiệu đề tài
Lý do chọn đề tài:
1. Trong những năm gần đây, với sự phát triển mạnh mẽ của công nghệ thông tin
và truyền thông, đặc biệt là sự phát triển bùng nổ của mạng Internet thì việc
update thông tin một cách nhanh chóng và liên tục ngày càng trở lên cần thiết.
2. Do đó nhu cầu xây dựng các website tin tức trực tuyến tăng cao về số lượng và
yêu cầu về tính thẩm mỹ và tính đa chức năng, tính tiện dụng.
3. Website tin tức đem lại những cái nhìn nhanh nhất và thiết thực nhất về mọi
lĩnh vực, vấn đề dư luận của địa phương, trong nước và thế giới cùng nhiều
GVHD: Vũ Xuân Thắng
Website tin tức Hưng Yên 2010
thông tin nổi bật khác. Tuy đã có khá nhiều website tin tức nhưng hầu hết các
website này chưa có tính tiện dụng và thân thiện cao đối với người dùng.
4. Qua những tìm hiểu trên, chúng em đã quyết định tìm hiều và xây dựng một
website tin tức: Website tin tức Hưng Yên dựa vào công nghệ ASP.NET trên
môi trường C# – là công nghệ mạnh đáp ứng tốt cho việc xây dựng một
website có tính thẩm mỹ cao và hỗ trợ nhiều chức năng một các dễ dàng hơn.
Mục tiêu xây dựng đề tài :
- Mục tiêu của nhóm chúng em khi xây dựng website này nhằm phục vụ
cho mọi người có được các thông tin một cách nhanh nhất và chính xác
nhất về mọi vấn đề của đời sống xã hội thông qua Internet.
- Website cho phép quản trị viên dễ dàng thao tác các bản tin, tùy chọn các
hình ảnh một cách sinh động và đẹp mắt
- Đối với người dùng là độc giả, trang web này sẽ cung cấp một giao diện
thân tiện, hấp dẫn,có tính thẩm mĩ cao và thông tin hiển thị đa dạng. Các
chức năng hỗ trợ tới người dùng là độc giả cũng như quản trị viên được
bố trí hợp lý, thuận tiện sử dụng.
- Website hỗ trợ các phím tắt, các hiệu ứng và các kỹ thuật cao để người
dùng có thể tương tác với website một cách trực quan và dễ dàng nhất.
- Nội dung trang web phong phú, đa dạng, hỗ trợ nhiều liên kết tới các
dịch vụ khác mà người đọc thường quan tâm.
Chương 2: Khảo sát đề tài
GVHD: Vũ Xuân Thắng
Website tin tức Hưng Yên 2010
I. Địa điểm khảo sát
- Chúng em đã tìm hiểu và tham khảo 1 số website tin tức trực tuyến như :
báo điện tử Hưng Yên, Quảng Ninh, Dân trí, VnExpress…
- Tra cứu thông tin trên website: google.com.vn
II. Kết quả khảo sát
• Sau quá trình tìm hiểu, tham khảo, phân tích chúng em đã đưa ra cấu trúc
chung nhất của một website tin tức (mô tả trong phần thiết kế trang
masterpage).
• Các dữ liệu nhập vào cho nội dung trang web, các dữ liệu hiển thị lên
phía website của độc giả , các dữ liệu hiển thị trên phần quản trị cho quản
trị viên.
• Một số nhận xét, đánh giá về ưu điểm và nhược điểm của các website tin
tức đã có như các website đã được xây dựng hầu hết đã đáp ứng được các
chức năng chính của một website tin tức .Tuy nhiên giao diện còn chưa
hấp dẫn người sử dụng , các hỗ trợ cho người dùng là độc giả còn ít và
đơn giản nên chưa lôi cuốn độc giả ở lại lâu xem trang web.
III Yêu cầu đối với hệ thống mới.
Từ thực tế trên, chúng em cần thấy cần có một hệ thống website tin
tức. Website của chúng em có phạm vi giới thiệu về Hưng Yên trên các mặt
như: tình hình kinh tế, chính trị-xã hội, làng nghề…
1 Các yêu cầu người quản trị.
- website có giao diện đẹp, nội dung phong phú, hình ảnh sinh động, luôn
cập nhật những thông tin mới nhất.
- Có khá năng nhập, xuất dữ liệu cho mỗi lần.
- Xử lý được việc sửa dữ liệu khi nhập sai.
- Xử lý xóa dữ liệu khi dữ liệu đó là không cần thiết.
2 Các yêu cầu của độc giả.
GVHD: Vũ Xuân Thắng
Website tin tức Hưng Yên 2010
- website có giao diện đẹp, hình ảnh sinh động, thể loại phong phú…
- Cỡ chữ.
- Độ sâu của website.
IV. Chiến lược điều tra.
- Các nguồn thông tin điều tra: tham khảo từ sách báo, hệ thống website…
- Quan sát hoạt động của hệ thống đang sử dụng.
- Tự đặt mình vào vị trí của người đọc để thấy được rõ những yêu cầu thực
tế mà hệ thống cần thực hiện.
V. Các chức năng chính của hệ thống.
Hệ thống website tin tức Hưng Yên do chúng em thiết kế có thể mô tả khái
quát bao gồm những chức năng chính sau:
+ Trang quản trị:
- Quản lý bản tin gồm các chức năng thêm, sửa, xóa các bản tin.
- Quản lý phân loại tin gồm các chức năng thêm, sửa, xóa các loại tin.
- Quản lý người dùng gồm các chức năng thêm, sửa, xóa các người
dùng.
- Quản lý Linkweb gồm các chức năng thêm, sửa, xóa các đường
linkweb.
+ Trang chủ
Menu dọc gồm có: hệ thống menu được thiết kế nguồn từ CSDL với giao
diện thân thiện và dễ dàng sử dụng.
GVHD: Vũ Xuân Thắng
Website tin tức Hưng Yên 2010
Chương 3: Thiết kế cơ sở dữ liệu
I Mô hình thực thể liên kết.
1 Thực thể bản tin.
Lưu trữ các thông tin chi tiết về một bản tin: mã bản tin, mã loại tin, tiêu đề, nội
dung chính, nội dung chi tiết, ngày đăng, tác giả, ảnh minh họa.
GVHD: Vũ Xuân Thắng
Mabanti
n
Maloait
in
Tieude
NDchin
h
NDchiti
et
Ngaydang
Tacgia
Anhminhho
a
Maloaitin
Tenloaiti
n
Ghichu
Ban tin
Loaitin
Phânlo
ại
Mabanti
n
Maloait
in
Tieude
NDchin
h
NDchiti
et
Ngaydang Tacgia
Anhminhho
a
Ban tin
Website tin tức Hưng Yên 2010
2 Thực thể phân loại tin.
Phân loại cho các loại tin: chính trị - xã hội, kinh tế, công nghiệp Hưng yên, Văn
hóa – văn nghệ,…
3 Thực thể liên kết Web
Chứa các đường link web tới các trang web khác.
GVHD: Vũ Xuân Thắng
Maloaitin
Tenloaiti
n
Ghichu
Loaitin
Malienket
Tenlienket
websit
e
LienKetWeb
Ghichu
Website tin tức Hưng Yên 2010
4 Thực thể người dùng.
Chứa các thông tin về người dùng.
II Các bảng cơ sở dữ liệu.
tblBanTin(MaBanTin, MaLoaiTin, TieuDe, NoiDungChinh, NoiDungChiTiet,
NgayDang, TacGia, AnhMinhHoa ).
tblLoaiTin(MaLoaiTin, TenLoaiTin, GhiChu).
tblLienKetWeb(MaLienKet, TenLienKet, Website, GhiChuLK, Image).
tblUser( id, password, email)
1 Bảng tblBanTin
Stt Tên trường Kiểu dl Độ
rộng
Khóa Null Ghi chú
1 MaBanTin int Khóa chính Not null Mã bản
tin
2 MaLoaiTin Int Mã loại
tin
3 TieuDe Nvarchar 500 Tiêu đề
GVHD: Vũ Xuân Thắng
Image
id
password
email
User
Website tin tức Hưng Yên 2010
4 NoiDungChinh Nvarchar 500 Nội dung
chính
5 NoiDungChiTiet Nvarchar Max Nội dung
chi tiết
6 NgayDang Datetime Ngày
đăng
7 TacGia Nvarchar 100 Tác giả
8 AnhMinhHoa Nvarchar 500 Ảnh minh
họa
2 Bảng tblLoaiTin
Stt Tên trường Kiểu dl Độ
rộng
Khóa Null Ghi chú
1 MaLoaiTin int Khóa chính Not null Mã loại
tin
2 TenLoaiTin Nvarchar 500 Tên loại
tin
3 GhiChu Nvarchar max Ghi chú
3 Bảng tblLienKetWeb
Stt Tên trường Kiểu dl Độ
rộng
Khóa Null Ghi chú
1 MaLienKet int Khóa chính Not null Mã bản
tin
2 TenLienKet Nvarchar 100 Tên liên
kết
GVHD: Vũ Xuân Thắng
Website tin tức Hưng Yên 2010
3 Website Nvarchar 500 Website
4 GhiChuLK Nvarchar 500 Ghi chú
liên kết
5 Image Nvarchar 500 ảnh
4 Bảng tblUser
Stt Tên trường Kiểu dl Độ
rộng
Khóa Null Ghi chú
1 id Nchar 20 Khóa chính Not null Tên user
2 password Nchar 20 Mật khẩu
3 email Nchar 40 email
III Biểu đồ Diagram
GVHD: Vũ Xuân Thắng
Website tin tức Hưng Yên 2010
IV Phân tích các ràng buộc.
Khi nhập, sửa, xóa thông tin từ một bảng thì các trường liên quan đến bảng đó
cũng bị thay đổi theo.
1 Bảng tblBanTin.
+ Khi nhập bản ghi vào bảng tblBanTin: Kiểm tra xem MaLoaiTin đã tồn tại trong
bảng tblLoaiTin chưa?
Nếu tồn tại thì cho nhập vào, ngược lại thì không cho nhập.
+ Khi sửa bản ghi vào bảng tblBanTin : Kiểm tra xem MaLoaiTin mới đã tồn tại
trong bảng tblLoaiTin chưa?
Nếu tồn tại thì cho sửa, ngược lại thì không cho sửa.
+ Khi xóa bản ghi trong bảng tblBanTin thì xóa bản tin đó tương ứng trong CSDL.
GVHD: Vũ Xuân Thắng
Website tin tức Hưng Yên 2010
2 Bảng tblLoaiTin.
+ Khi nhập bản ghi vào bảng tblLoaiTin thì cho phép nhập.
+ Khi sửa TenLoaiTin trong bảng tblLoaiTin thì các bản ghi tương ứng trong bảng
tblBanTin cũng thay đổi theo.
+ Khi xóa MaLoaiTin trong bảng tblLoaiTin thì các bản ghi tương ứng trong bảng
tblBanTin cũng bị mất theo.
GVHD: Vũ Xuân Thắng
Website tin tức Hưng Yên 2010
Chương 4:Thiết kế tổng thể
I. Thiết kế trang master page
1. Bố cục giao diện trang master page
Mô tả các phần trong trang master page:
- Phần “Header”, hiển thị banner quảng cáo cho Website “HungYen
Inform”.
- Phần “menu ngang” được đặt dưới phần Banner và trên phần Footer chứa
danh mục các trang cũng như các chức năng chính của hệ thông website
này như Trang chủ, Đăng ký, Đăng nhập, Liên hệ website.
GVHD: Vũ Xuân Thắng
Website tin tức Hưng Yên 2010
- Phần “Left menu”: chứa các menu về các lĩnh vực tin tức khác nhau, các
thông tin liên hệ, số lượt người truy cập, liên kết với các các trang báo
điện tử của các tỉnh bạn.
- Phần nội dung : sử dụng để hiện thị nội dung của các trang web content
được kế thừa từ trang master page.
GVHD: Vũ Xuân Thắng
Website tin tức Hưng Yên 2010
- Phần “Right menu”:chưa thông tin nổi bật nhất “Tin nóng – Hot News” ,
các liên kết với các báo khác, các thông tin quảng cáo .
GVHD: Vũ Xuân Thắng
Website tin tức Hưng Yên 2010
- Phần “Footer” : hiển thị nội dung gồm thông tin bản quyền ,thương hiệu
địa chỉ liên hệ , thông tin liên lạc trang HungYen Inform . Kèm theo là
menungang như đã đề cập phần trên
* Mô tả kỹ thuật sử dụng css của ASP .Net thiết kế giao diện trang
master page.
- Để đáp ứng nhu cầu thẩm mĩ cao cho giao diện của trang web ,chúng em đã
sử dụng CSS của ASP.NET để mô tả giao diện của trang master page vì CSS
là một kỹ thuật được áp dụng cho xây dựng giao diện website khá mạnh.
- Chúng em đã sử dụng CSS kết hợp với các thẻ HTM như thẻ div,thẻ a,thẻ
body, nhằm :
- Phân chia bố cục giao diện cho trang master page
- Thiết lập kích thước hiển thị cho trang master page và kích thước cho
mỗi phần trong trang .
- Định dạng hiển thị cho các thành phần trong trang master page như:
phông chữ, màu chữ, căn lề, màu nền, hình ảnh nền, đường viền, độ giãn
cách giữa các đối tượng hiển thị, các hiệu ứng trong khi hiển thị như khi
click chọn, khi di chuyển mouse qua.
- Sử dụng các thẻ HTML kết hợp với CSS và các điều khiển sẵn có của
ASP.NET để xây dựng các menu và thực hiện các tương tác người sử
dụng.
- Bảng màu , chủ điểm màu trắng và xanh lục. Font chư màu đen…
GVHD: Vũ Xuân Thắng
Website tin tức Hưng Yên 2010
- Các bảng màu được phối hợp với nhau một cách hài hoà ,lam nổi bật
những nội dung cần thể hiện thông qua việc sử dụng CSS để mô tả .
- Một số liên kết từ website tới các trang khác được gắn vào trang này
thông qua thẻ a hoặc sử dụng Hyperlink.
2. Chức năng của trang Master page
Trong Master page không được sử dụng trực tiếp để hiển thị lên phía trình
duyệt, mà đây chỉ là một khung sườn chung cho các trang Web kế thừa từ nó
có thể thêm các phần riêng của mỗi trang tuỳ theo chức năng cụ thể của mỗi
trtang đó.
Trang Master page chứa tất cả những menu chính thường được sử dụng để
có thể hỗ trợ cho người dung tương tác với Webside khi họ đang ở bất kỳ
một trang nào của hệ thống,
GVHD: Vũ Xuân Thắng
Website tin tức Hưng Yên 2010
II. Các trang Web trong hệ thống Webside tin tức Hưng Yên ( HungYen Inform)
1. Trang chủ ( trangchu.aspx )
- Trang chủ là trang được hiển thị đầu tiên khi người sử dụng tới thăm hệ
thống này.
- Nội dung của trang chủ là hiển thị phần nội dung mô tả trong trang
Masterpage như các menu tác vụ, các thông tin quảng cáo và nội dung
riêng của trang chủ, hiển thị thông tin mới nhất của hầu hết các lĩnh vực
trong đời sống xã hội.
GVHD: Vũ Xuân Thắng
Website tin tức Hưng Yên 2010
2. Trang đăng ký (Dky.aspx).
- Cho phép người dung là khách hàng đăng ký một tài khoản đối với
Webside “HungYen Inform”. Được kế thừa giao diện từ trang
MasterPage. Phần khung giao diện đăng ký
3. Trang đăng nhập (Dnhap.aspx).
- Cho phép người dùng (độc giả hoặc quản trị viên) đăng nhập vào hệ
thống Webside này khi chưa đăng nhập mà muốn đăng nhập hoặc yêu
cầu phải đăng nhập trước khi sử dụng một chức năng nào đó của hệ
thống.
4. Trang chuyên đề, lĩnh vực (trangchuyende.aspx).
- Trang này xuất hiện khi khách hàng chọn vào một lĩnh vực nào đó trên
menu Left “chọn chuyên đề”. Tuỳ thuộc vào lĩnh vực được chọn mà nội
dung hiển thị của trang này sẽ là các bản tin của lĩnh vực đó.
- Để thực hiện được nhiệm vụ của trang thông tin lĩnh vực, chúng em sử
dụng điều khiển datalist và điều khiển sqldatasource của ASP.NET.
- Điều khiển datalist định dạng hiển thị và nội dung cần hiển thị thông qua
temple Item của nó và cho phép chọn nguồn dữ liệu để hiển thịthông qua
việc chọn data source cho datalist.
GVHD: Vũ Xuân Thắng
Website tin tức Hưng Yên 2010
- Điều khiển sql datasource dùng để lọc và lưu trữ dữ liệu được lấy ra từ cơ
sở dữ liệu thông qua các Procedure hoặc các Query và cập nhật lại các
thay đổi của thông tin hàng hoá khi muốn cập nhật vào cơ sở dữ liệu.
- Datalist, Grid View là một điều khiển hỗ trợ cơ chế Databinding và hỗ
trợ tuỳ biến template khá mạnh trong ASP.NET. Do đó điều khiển này rất
phù hợp cho việc hiển thị thông tin lên Website.
- Thông tin hiển thị trong trang lĩnh vực được hiển thị trên nhiều page nhỏ
cụ thể ở đây chúng em sử dụng điều khiển Multi View mỗi khi người
dùng chọn một view thì thông tin hiển thị các bản tin sẽ được select từ
mới đến cũ. Cụ thê: 1- 2 - cũ hơn.
. Ví dụ: ta nhấn vào menuLeft chọn thể thao thì ta sẽ có trang chuyên đề hiển
thị nội dung về thể thao, tượng tự các lĩnh vực khác cũng thực hiện như vậy.
GVHD: Vũ Xuân Thắng
Website tin tức Hưng Yên 2010
5. Trang thông tin chi tiết bản tin (chitiet.aspx).
- Trang này hiển thị khi người sử dụng (khách hàng) click vào hình ảnh
hiển thị hay tiêu đề hoặc Hyperlink “Xem tiếp” hoặc phần tiêu đề, ảnh hỗ
trợ của mỗi bản tin bên trang lĩnh vực hoặc bên trang chủ. Thông tin hiển
thị của bản tin ở trang này chi tiết và đầy đủ hơn so với trang lĩnh vực và
trang chủ.
- Để thực hiện các chức năng như trên thì trang thông tin chi tiết hàng
chúng em cũng sử dụng hai điều khiển Datalist và Sql Datasource của
ASP.NET và cấu hình lại các điều khiển cho phù hợp với nội dung hiển
thị.
Vi dụ: ta nhấn vào phần tiêu đề “Messi lập cú đúp, Barca thăng hoa tại La
Romareda ”của bản tin bên trang chuyên đề ban nãy thì trình duyệt sẽ tự
động đi tới trang chi tiết với nội dung chi tiết của bản tin đó.
GVHD: Vũ Xuân Thắng
Website tin tức Hưng Yên 2010
6. Trang danh mục loại tin(DMLoaiTin.aspx):
- Người dùng sau khi truy cập với quyền sẽ đăng nhập tới trang. Tại đây
người dùng có thể thêm sửa xóa các thông tin về Loại Tin. Với giao diện
làm việc trực quan người dùng có thể dễ dàng thao tác.
7. Trang danh mục bản tin (DMBanTin.aspx).
- Trang này chỉ cho phép quản trị viên sau khi đã đăng nhập vào hệ thống
và đã được cấp quyền có thể sửa đổi, thêm mới hoặc xóa thông tin các
bản tin.
- Trang cập nhật thông tin có giao diện trực quan giúp quản trị viên dễ
dàng thao tác.
GVHD: Vũ Xuân Thắng
Website tin tức Hưng Yên 2010
- Trang này hiển thị chi tiết thông tin của các thông tin có trong CSDL tùy
theo yêu cầu của Quản trị viên và cho phép Quản trị viên có thể sửa đổi
lại các thông tin khi click vào nút edit. Sau khi đã sửa đổi, nhân viên bán
hàng chọn nút update để cập nhật lại cơ sở dữ liệu.
- Để thực hiện những chức năng vừa nêu cho trang cập nhật thông tin
hàng, chúng em đã sử dụng điều khiển tới thao tác với CSDL như
datalist, Grid view và sqldatasource của ASP.NET. Ngoài ra còn có các
điều khiển thông dụng khác: Button, Textbox, DropDownList. Trong đó,
để có thể sửa đổi thông tin hàng hoá chọn edit template, chọn edit Item
GVHD: Vũ Xuân Thắng