Báo cáo đồ án môn học lập trình ứng dụng mạng

ĐẠI HỌC QUỐC GIA THÀNH PHỐ HỒ CHÍ MINH
ĐẠI HỌC CÔNG NGHỆ THÔNG TIN
  
BÁO CÁO ĐỒ ÁN
Môn học: Lập trình ứng dụng mạng
Giáo viên:
Mai Xuân Hùng
Sinh viên thực hiện:
Hoàng Đức Thiện 09520663
Tp.Hồ Chí Minh, tháng 5 năm 2012
Lập trình ứng dụng mạng
MỤC LỤC
Đại học công nghệ thong tin Page 2
Lập trình ứng dụng mạng
MỞ ĐẦU
Ngày nay, xem tin tức hàng ngày đã trở thành thói quen và nhu cầu thiết yếu của
rất nhiều người nhằm cập nhật thông tin về văn hóa, chính trị, khoa học, xã hội… trong
nước và ngoài nước. Xem tin tức cũng có nhiều hình thức khác nhau : đọc báo, xem tivi,
nghe radio… đặc biệt là xem báo mạng, phương thức này đang rất được ưa chuộng và sử
dũng ngày càng phổ biến. Xem báo mạng có nhiều lợi ích hơn các phương pháp khác như
: miễn phí, cập nhật tin tức nhanh chóng, đều đặn, tiện lợi, có thể xem ở mọi lúc mọi nơi
chỉ với một thiết bị cầm tay có thể truy cập internet.
Là một sinh viên ngành công nghệ thong tin, hàng ngày em thường xem các tin
tức về lĩnh vực này nhằm tiếp thu thêm nhiều kiến thức chuyên ngành, cập nhật các tin
tức về công nghệ, kỹ thuật để bắt kịp với thời đại.
Với những lý do trên em quyết định chọn đồ án thiết kế website đưa tin với nội
dung nói về các lĩnh vực của ngành công nghệ thông tin
Đại học công nghệ thong tin Page 3
Lập trình ứng dụng mạng
PHÂN TÍCH
I. Về nội dung

Tùy theo đánh giá của mỗi người, một trang web đưa tin có thể có nhiều chuyên
mục khác nhau, với bản thân mình em sẽ xây dựng trang web với các chuyên mục như
sau :
- Thông tin công nghệ : đưa các tin tức nói chung về ngành công nghệ thong tin
- Phần mềm : đưa các tin tức về các phần mềm, đánh giá…
- Khoa học kỹ thuật : đưa các tin tức về lĩnh vực khoa học kỹ thuật
- Sản Phẩm : đưa các tin tức về các sản phẩm công nghệ
- Game : đưa các tin tức về game
II. Về giao diện
Gồm có :
- Trang chủ
- Trang hiển thị các bài viết của từng chuyên mục :
- Trang hiển thị nội dung bài viết :
- Trang đăng nhập
- Trang đăng ký
- Trang thông tin thành viên :
III. Về cơ sở dữ liệu :
Gồm các table có các chức năng như sau
- Lưu giữ thông tin về bài viết
- Lưu giữ thong tin thành viên
- Lưu giữ thông tin về các bài bình luận
Đại học công nghệ thong tin Page 4
Lập trình ứng dụng mạng
THIẾT KẾ GIAO DIỆN
- Trang sẽ chủ hiển thị :
+ Thanh menu đăng nhập, đăng ký, tìm kiếm
+ Thanh menu vào các trang chuyên mục
+ Các bài viết mới nhất
+ Các bài viết được xem nhiều nhất
+ Các bài viết được quan tâm, bình luận nhiều nhất

+ Các bình luận mới nhất về các bài viết
+ Các bài viết mới nhất của từng chuyên mục
Đại học công nghệ thong tin Page 5
Lập trình ứng dụng mạng
Hình 1.1 Giao diện trang chủ
- Trang chuyên mục hiển thị :
+ Tiêu đề bài viết
+ Thời gian đưa bài viết
+ Hình ảnh biểu tượng của bài viết
+ Mô tả đơn giản nội dung bài viết
+ Nút chức năng thêm bài viết
Đại học công nghệ thong tin Page 6
Lập trình ứng dụng mạng
Hình 1.2 Giao diện trang chuyên mục
- Trang bài viết hiển thị :
+ Nội dung, người gửi, thời gian gửi bài viết
+ Các bài viết có cùng chuyên mục
+ Bình luận bài viết
+ Nút chức năng sửa, xóa bài viết
Đại học công nghệ thong tin Page 7
Lập trình ứng dụng mạng
Hình 1.3 Giao diện trang bài viết
- Trang thông tin thành viên :
+ Thông tin cơ bản về thành viên
+ Các bài viết đã đăng
+ Các bình luận đã đăng
+ Nút chức năng sửa thong tin, xóa thành viên
Đại học công nghệ thong tin Page 8
Lập trình ứng dụng mạng
Hình 1.4 Giao diện trang thông tin thành viên

- Trang đăng nhập
Đại học công nghệ thong tin Page 9
Lập trình ứng dụng mạng
Hình 1.5 Giao diện trang đăng nhập
- Trang đăng ký
Hình 1.6 Giao diện trang đăng ký
- Trang tìm kiếm
Đại học công nghệ thong tin Page 10
Lập trình ứng dụng mạng
Hình 1.6 Giao diện trang tìm kiếm
- Trang thêm bài viết
Hình 1.7 Giao diện trang thêm bài viết
Đại học công nghệ thong tin Page 11
Lập trình ứng dụng mạng
XÂY DỰNG WEB SITE
I. Xây dựng cơ sở dữ liệu :
Tên database : ttcn bao gồm 4 table
Hình 2.1.1 Database “ttcn”
Table name “table” : lưu trữ thong tin các bài viết
Gồm các filed :
- MaBV : mã bài viết
- TieuDe : tiêu đề của bài viết
- BieuTuong : biểu tượng của bài viết
- NoiDung : nội dung bài viết
- ForumID : chuyên mục chứa bài viết
- View : số lượt xem bài viết
- Date : thời gian gửi bài viết
- MoTa : sơ lược đơn giản về nội dung bài viết
- SoBL : tổng số bình luận của bài viết
- User : người đăng bài viết

Đại học công nghệ thong tin Page 12
Lập trình ứng dụng mạng
Hình 2.1.2 Table “table”
Table “comment” lưu trữ thong tin về các bình luận
Gồm các field :
- ID : mã bài bình luận
- User : người gửi bình luận
- Mabv : bình luận trong bài viết nào
- Noidung : nội dung bình luận
- Date : ngày gửi bình luận
Đại học công nghệ thong tin Page 13
Lập trình ứng dụng mạng
Hình 2.1.3 Table “comment”
Table “account” : lưu trữ thông tin của các thành viên
Gồm các field :
- Username : tên đăng nhập
- Password : mật khẩu đăng nhập
- HoTen : họ tên thành viên
- Permission : quyền hạn (thành viên thường có permission = 1, admin = 2, mod
= 3)
- Date : ngày đăng ký thành viên
- Avatar : ảnh đại diện
- Email : địa chỉ lien lạc
Đại học công nghệ thong tin Page 14
Lập trình ứng dụng mạng
Hình 2.1.4 Table “Account”
Table “image” : lưu trữ số lượng file ảnh đã upload lên sever từ user (mỗi lần user upload
file ảnh làm avatar, tên file sẽ được đính kèm thêm một số thứ tự, tránh trường hợp tên
file bị trùng lặp)
Hình 2.1.5 Table “image”

II. Xây dựng trang web
1. Các thành phần có chung của mỗi trang :
Thanh menu đăng nhập :
- Nếu đã đăng nhập vào trang web thì hiển thị thong tin thành viên, thoát và
thành tìm kiếm
Đại học công nghệ thong tin Page 15
Lập trình ứng dụng mạng
Hình 2.2.1 Đã đăng nhập
- Nếu chưa đăng nhập thì hiển thị đăng nhập, tìm kiếm
Hình 2.2.2 Chưa đăng nhập
Hình 2.2.3 Code thanh menu đăng nhập
Thanh menu hiển các chuyên mục
Hình 2.2.3 Menu chuyên mục
Hình 2.2.4 Code menu chuyên mục
Đại học công nghệ thong tin Page 16
Lập trình ứng dụng mạng
Danh sách các bài viết được xem nhiều nhất, trình bày ở bên trái trái web
Hình 2.2.5 Các bài viết được xem nhiều nhất
Hình 2.2.6 Code bài viết được xem nhiều nhất
2. Phần riêng của mỗi trang
A. Trang chủ : index.php
Danh sách các bài viết được chú ý và các bình luận mới
Khi đưa chuột vào chữ “ĐƯỢC CHÚ Ý” hoặc “BÌNH LUẬN” sẽ bắt sự kiện hover và
gọi các hàm ajax để thay đổi thẻ DIV bên dưới
Đại học công nghệ thong tin Page 17
Lập trình ứng dụng mạng
Hình 2.2.7 Danh sách được chú ý và bình luận
Mặc định ban đầu sẽ là danh sách các bài viết được chú ý
Hình 2.2.8 Code danh sách được chú ý và bình luận
Đại học công nghệ thong tin Page 18

Lập trình ứng dụng mạng
Bắt sự kiện hover và gửi thông tin đến trang select3.php để xử lý
Hình 2.2.9 Bắt sự kiện hover
Tùy theo yêu cầu được đưa đến mà trang select3.php sẽ trả về dữ liệu là các bài viết được
chú ý hoặc các bài bình luận được đăng gần đây nhất
Hình 2.2.10 Select3.php
Slide show các bài viết mới nhất
Đại học công nghệ thong tin Page 19
Lập trình ứng dụng mạng
Hình 2.2.11 Silde show các bài viết mới
Đặt 2 thẻ div có tọa độ chồng lên nhau (tọa độ được thiết kế trong file style.css), 1 thẻ
chứa hình ảnh bài viết, 1 thẻ chứa tiêu đề và mô tả về bài viết
Hình 2.2.12 Hai thẻ div của silde show
Dùng hàm setInterval của javascript, sau 4s gọi hàm ajax lấy ảnh và dữ liệu mới, thay đổi
nội dung 2 thẻ div, tạo thành slide show
Đại học công nghệ thong tin Page 20
Lập trình ứng dụng mạng
Trang select.php lấy hình ảnh biểu tượng của bài viết
Hình 2.2.13 Trang select.php
Trang select2.php lấy tiêu đề và mô tả cả bài viết tương ứng với ảnh
Hình 2.2.14 Trang select2.php
Bài viết mới nhất cho từng chuyên mục
Hình 2.2.15 Bài viết mới trong chuyên mục
Mỗi chuyên mục có một ForumID khác nhau, select bài viết theo chuyên mục, Order by
MaBV DESC, bài viết mới sẽ có mã bài viết (MaBV) lớn hơn bài viết cũ
Đại học công nghệ thong tin Page 21
Lập trình ứng dụng mạng
Hình 2.2.15 Code bài viết mới trong chuyên mục
Hình 2.2.15 Nội dung trang news.php
Đại học công nghệ thong tin Page 22

Lập trình ứng dụng mạng
B. Trang thongtincongnghe.php
Hiển thị các bài viết của từng chuyên mục theo Forum_ID được đưa vào bởi biến
$_GET[‘forum_id’]
Hình 2.2.15 Hiển thị bài viết theo chuyên mục
Với mỗi bài viết, lấy hình biểu tượng, tiêu đề, ngày gửi và mô tả của bài viết
Hình 2.2.16 Select bài viết
Đại học công nghệ thong tin Page 23
Lập trình ứng dụng mạng
Hình 2.2.16 Nút chức năng thêm bài viết
Thành viên thường ($_Session[‘permission’] = = 1) và người không đăng nhập
(isset($_Session[‘permission’])==false) sẽ không thấy được button này
Hình 2.2.16 Code nút chức năng thêm bài viết
C. Trang thembaiviet.php
Đại học công nghệ thong tin Page 24
Lập trình ứng dụng mạng
Hình 2.2.17 Trang thembaiviet.php
Hình 2.2.18 Code phần insert vào cơ sở dữ liệu của trang thembaiviet.php
Phần textarea nội dung bài viết sử dụng tool hỗ trợ ckeditor
D. Trang baiviet.php
Tiêu đề, nội dung bài viết, ngày gửi, người gửi
Đại học công nghệ thong tin Page 25