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

Trang 1

ĐẠI HỌC QUỐC GIA THÀNH PHỐ HỒ CHÍ MINH

ĐẠI HỌC CÔNG NGHỆ THÔNG TIN

Hoàng Đức Thiện 09520663

Trang 2

MỤC LỤC

MỞ ĐẦU 3

PHÂN TÍCH 4

I Về nội dung 4

II Về giao diện 4

III Về cơ sở dữ liệu : 4

THIẾT KẾ GIAO DIỆN 5

XÂY DỰNG WEB SITE 11

I Xây dựng cơ sở dữ liệu : 11

II Xây dựng trang web 14

1 Các thành phần có chung của mỗi trang : 14

2 Phần riêng của mỗi trang 16

KIỂM THỬ 37

NHẬN XÉT CỦA GIÁO VIÊN 38

Trang 3

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

Trang 4

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

Trang 5

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

Trang 6

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

Trang 7

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

Trang 8

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

Trang 9

Hình 1.4 Giao diện trang thông tin thành viên

- Trang đăng nhập

Trang 10

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

Trang 11

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

Trang 12

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

Trang 13

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

Trang 14

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

Trang 15

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 uploadfile ả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

Trang 16

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

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

Trang 17

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

Trang 18

Hình 2.2.7 Danh sách được chú ý và bình luậnMặ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

Trang 19

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 hoverTù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 đượcchú ý 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

Trang 20

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 đổinội dung 2 thẻ div, tạo thành slide show

Trang 21

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.phpTrang 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ụcMỗ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ũ

Trang 22

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

Trang 24

Hình 2.2.16 Nút chức năng thêm bài viếtThà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

Hình 2.2.17 Trang thembaiviet.php

Trang 26

Hình 2.2.19 Nội dung bài viết

Hình 2.2.19 Code nội dung bài viết

Nút chức năng xóa, sửa bài viết

Trang 27

Hình 2.2.19 Nút chức năng xóa, sửaThà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 những button này

Hình 2.2.16 Code nút chức năng sửa, xóa bài viếtNếu chưa đăng nhập hoặc tài khoản user thường truy cập vào trang delete.php sẽ bị đưa

ra trang chủ ngay lập tức

Hình 2.2.17 Trang delete.php

Bài viết cùng chuyên mục

Trang 28

Hình 2.2.18 Bài viết cùng chuyên mụcLấy tiêu đề của những bài viết có cùng ForumID

Hình 2.2.19 Code bài viết cùng chuyên mục

Bình luận

Hình 2.2.20 Chưa đăng nhập

Hình 2.2.21 Đã đăng nhập

Trang 29

Hình 2.2.22 Code phần thêm bình luận

Các bình luận đã có của bài viết

Chỉ người bình luận và admin (permission == 2) mới có quyền xóa bài viết

Hình 2.2.23 Bình luận

Hình 2.2.24 Code bình luận

Trang 30

Hình 2.2.25 Chỉ người gửi hoặc admin mới có thể xóa commentNếu không phải admin, hoặc người gửi comment truy cập vào trang delete_comment.php

sẽ bị đưa về trang chủ ngay lập tức

Hình 2.2.26 Trang delete_comment.php

E Trang profile.php

Hình 2.2.27 Thông tin cá nhânChỉ có chủ tài khoản hoặc admin mới có quyền sửa đổi avatar

Trang 31

Hình 2.2.28 Code thông tin cá nhân

Các bài viết và bình luận đã đăng

Hình 2.2.29 Các bài viết và bình luận đã đăngChọn các bài viết, comment có user == $_GET[‘username’]

Trang 32

Hình 2.2.30 Code bài viết đã đăng

Hình 2.2.31 Code bình luận đã đăng

Chỉnh sửa thông tin cá nhân

Chỉ có chủ tài khoản hoặc admin mới có quyền sửa đổi thông tin cá nhân

Hình 2.2.32 Sửa thông tin cá nhân

Trang 34

Hình 2.2.35 Code phần tim kiếm

G Trang login.php

Hình 2.2.36 Trang đăng nhậpCheckbox ghi nhớ để lưu cookie vào máy client, tự động đăng nhập ở lần truy cập sau

Trang 35

Hình 2.2.37 Code kiểm tra đăng nhậpForm đăng nhập thiết kế bằng jquery, hiện ra khi click vào chữ “Đăng Nhập” trên thanh menu

Hình 2.2.38 Form đăng nhập

Trang 36

Thiết kế sẵn form đăng nhập, đặt ở giữa trang web, sẽ dụng effect fadeout và fadein của jquery để ẩn, hiện form đăng nhập khi cần thiết

Hình 2.2.39 Code form đăng nhập bằng jquery

H Trang dangky.php

Bắt sự kiện blur để kiểm tra dữ liệu trong textfield có hợp lệ hay không

Trang 37

Hình 2.2.40 Bắt sự kiện blur

Trang 38

KIỂM THỬ

Website chạy tốt trên trình duyệt Firefox, Chrome, IE 8+

Trang 39

NHẬN XÉT CỦA GIÁO VIÊN

………

Định dạng
Số trang	40
Dung lượng	2,03 MB