ỨNG DỤNG BOOTSTRAP TRONG XÂY DỰNG MẠNG XÃ HỘI CHIA SẺ VÀ LƯU TRỮ TÀI LIỆU

TRƯỜNG CĐ CNTT HỮU NGHỊ VIỆT HÀN
KHOA CÔNG NGHỆ THÔNG TIN
----------

BÀI BÁO CÁO ITC 2016
ĐỀ TÀI: ỨNG DỤNG BOOTSTRAP TRONG XÂY DỰNG MẠNG XÃ HỘI
CHIA SẺ VÀ LƯU TRỮ TÀI LIỆU

GVHD: Lương Khánh Tý
SVTH: Trịnh Lâm Vũ
Phan Quốc Việt
Đoàn Đình Ý
Demo online:

Đà Nẵng, tháng 5 năm 2016


Cuộc thi ITC


Cuộc thi ITC


Cuộc thi ITC
LỜI NÓI ĐẦU
Với sự phát triển của công nghệ thông tin, việc tìm tòi học hỏi, tìm kiếm tài
liệu,… nhu cầu ngày càng tăng cao. Tìm kiếm tài liệu hiện nay khá đơn giản vì
kho tài liệu được phân chia riêng biệt theo từng ... chia sẻ tài liệu trực tuyến được
nhiều người biết đến. Việc tạo ra các diễn đàn để học hỏi lẫn nhau là thiết yếu.
Với mong muốn phát triển hệ thống chia sẽ tài liệu, cũng là bước khởi đầu
trong sự nghiệp, chúng em đặt ra mục tiêu và mong muốn phát triển hệ thống này

tiến xa hơn nữa và trong tương lai sẽ là một trang web uy tín và thành công.
Trong quá trình thực hiện đề tài sẽ còn nhiều thiết sót, chúng em mong muốn
nhận được sự góp ý từ các thầy cô để hệ thống hoàn thiện hơn nữa. Thông qua đây,
chúng em cũng xin gửi lời chúc sức khỏe, lời cảm ơn đến các thầy cô khoa Công
nghệ thông tin, các bạn sinh viên và gửi lời cảm ơn chân thành đến thầy Lương
Khánh Tý đã hỗ trợ chúng em rất nhiều đề hoàn thành được đề tài này.


Cuộc thi ITC
MỤC LỤC


ĐỀ TÀI: ỨNG DỤNG BOOTSTRAP TRONG XÂY DỰNG
MẠNG XÃ HỘI CHIA SẺ VÀ LƯU TRỮ TÀI LIỆU
I.
1.
-

2.
-

3.

4.
-

II.

GIỚI THIỆU CHUNG
Giới thiệu sản phẩm

Xuất phát từ nhu cầu quản lý, lưu trữ và chia sẻ các tập tin học tập trong môi
trường sinh viên thì sản phẩm mang tên “Mạng xã hội chia sẻ và lưu trữ
tài liệu” được ra đời. Toàn bộ giao diện sản phẩm được ứng dụng Font-end
Framework Bootstrap điều này giúp sản phẩm hoạt động và hiển thị ổn
định trên mọi hệ điều hành và các đời máy, đó là tính năng Responsive của
Bootstrap.
Sản phẩm còn được ứng dụng công nghệ Ajax, giúp người dùng thao tác
nhanh hơn, mượt mà hơn, tiết kiệm thời gian duyệt web.
Sản phẩm mang tới cho người sử dụng các giải pháp lưu trữ, chia sẻ, xem
trực tiếp, backup tài liệu … mọi thứ đều rất dễ dàng.
Sản phẩm đã được chạy online bằng địa chỉ :
Công nghệ Boostrap
Bootstrap là một Font-end Framework được viết bằng SASS và biên dịch
thành CSS, nó là một bộ thư viện mạnh mẽ được tích hợp nhiều CSS có sẵn
giúp cho việc lập trình HTML & CSS trở nên đơn giản và dễ dàng.
Điều đặc biệt là Bootstrap chuẩn HTML5 và CSS3, Boostrap rất phổ biến và
được đông đảo lập trình viên sử dụng.
Một vài website sử dụng Bootstrap: fshare.vn, tenlua.vn, itc.viethanit.edu.vn
…
Công nghệ Ajax
AJAX, viết tắt từ Asynchronous JavaScript and XML (JavaScript và XML
không đồng bộ), là bộ công cụ cho phép tăng tốc độ ứng dụng web bằng
cách cắt nhỏ dữ liệu và chỉ hiển thị những gì cần thiết, thay vì tải đi tải lại
toàn bộ trang web. AJAX không phải một công nghệ đơn lẻ mà là sự kết hợp
một nhóm công nghệ với nhau.
Công nghệ Responsive
Responsive là một công nghệ dùng cho ngành thiết kế website, sử dụng để
website phù hợp trên tất cả các kích thước màn hình từ một cơ sở dữ liệu và
một layout gốc. Trước đây người thiết kế phải thiết kế 2 bản riêng biệt một
cho màn hình máy tính và một cho màn hình thiết bị di động.

CÁC CHỨC NĂNG
Trang 6


1.
•
•
2.
•
•
-

3.
•
•

Đăng ký
Mô tả: Nơi tạo tài khoản mới
Chi tiết:
Sử dụng html5 và các hàm php để kiểm tra dữ liệu đăng ký, kiểm tra trùng
lặp thành viên
Sử dụng mã hóa md5 2 lần để mã hóa mật khẩu, đảm bảo bảo mật
Đăng nhập
Mô tả: Nơi đăng nhập vào hệ thống
Chi tiết:
Kiểm tra tài khoản và mật khẩu trong cơ sở dữ liệu nếu đúng thì sử dụng
cookie để lưu id của tài khoản và hoàn tất đăng nhập
Quên mật khẩu
Mô tả: Được sử dụng trong trường hợp người dùng quên mật khẩu
Chi tiết:

Trang 7


-

4.
•
•
-

5.

•
•
-

6.
•
•

Kiểm tra tên đăng nhập và mail của người quên mật khẩu, nếu tên tài
khoản và mail đúng thì gửi 1 mail chứa link khôi phục mật khẩu về mail đã
nhập.
Link khôi phục được mã hóa bằng một chuỗi md5 và tồn tại trong 10 phút,
quá 10 phút link khôi phục sẽ mất hiệu lực
Trong thời gian chờ khôi phục, không thể yêu cầu thêm lệnh khôi phục
Đăng xuất
Mô tả: Được sử dụng để thoát khỏi hệ thống
Chi tiết:

Sử dụng hàm php để hủy cookie người dùng, đồng thời chuyển người dùng
về trang chủ
Tìm kiếm

Mô tả: Tìm kiếm thành viên và tập tin
Chi tiết:
Tìm kiếm thành viên: tìm kiếm dựa trên tên đăng nhập hoặc tên hiển thị
Tìm kiếm tập tin: dựa tên tên file hiển thị hoặc tên file gốc

Chatbox
Mô tả: chức năng chat dành cho tất cả thành viên
Chi tiết:
Trang 8


-

7.

Sử dụng công nghệ ajax giúp người dùng chat không cần load lại trang
Sử dụng hệ thống icon bắt mắt bằng cách biên dịch các ký tự icon ra html
hình ảnh
Chống spam, hủy tin nhắn nếu tin nhắn trước chưa cách tin nhắn sau đủ 3s
Làm sạch chat box bằng chuỗi nhập vào bí mật

Trang cá nhân

Trang 9

•
•
-

-

-

8.

Mô tả: Tường nhà của thành viên, mỗi thành viên có một trang cá nhân,
chứa các thông tin, thư mục và tập tin của thành viên
Chi tiết:
Hình bìa: là hình bìa của thành viên, nếu chưa cập nhật hình bìa thì được
đặt sẵn 1 hình ảnh mặc định
Hình đại diện: là hình đại diện của thành viên, cũng tương tự ảnh bìa nếu
chưa được cập nhật
Tạo thư mục: tạo một thư mục mới, có thể tạo được thư mục dạng cây đa
cấp, kiểm tra tên các thư mục trùng tên trong cùng 1 thư mục
Tải file lên: tải lên các tập tin văn phòng và chỉ chấp nhận các tập tin txt,
pdf, ppt, pptx, doc, docx, xls, xlsx. Chặn các tập tin quá lớn, định dạng tên
file tải lên về 1 định dạng đặc biệt.
Chi tiết thư mục: hiển thị các thông tin về thư mục
Thêm thư mục yêu thích: lưu thư mục thành thư mục yêu thích trong chức
năng link yêu thích
Hiển thị thông tin: hiển thị các thông tin về tên tài khoản, tên đăng nhập,
mail, số điện thoại, trạng thái online, giới tính, dung lượng, ngày tham gia
…
Breadcrumb: hiển thị đường dẫn của thư mục, con trỏ trở lại thư mục trước
đó

Hiện thị danh sách thư mục và tập tin : hiển thị tất cả file và thư mục có
của thành viên
Trang xem file
Trang 10


•
•
-

9.

Mô tả: là trang đọc file và hiển thị các thông tin của file
Chi tiết:
Breadcrumb: hiển thị đường dẫn của thư mục, con trỏ trở lại thư mục trước
đó
Đọc file: hiển thị nội dung của tập tin như đang mở bằng Office
Xem full: xem full màn hình với nội dung của tập tin
Tải về: tải file về máy người dùng, link tải về được mã hóa bằng một chuỗi
m5 đặc biệt, mỗi máy chỉ có 1 link duy nhất, link thay đổi liên tục theo thời
gian
Báo cáo: báo cáo sai phạm của tập tin với ban quản trị, ví dụ: file chứa các
nội dung phản động, đồi trụy …
Thích: chức năng dành cho thành viên, khi nhấn thích thì một thông báo sẽ
được gửi về chủ tập tin
File yêu thích: thêm file vào danh sách link yêu thích
Hiển thị các thông tin của file: tên file, người tải lên, thời gian tải, lượt tải,
lượt xem, lượt thích, mô tả.
Bình luận: Bình luận file sử dụng ajax và biểu cảm.
Lịch sử hoạt động

Trang 11


•
•
-

10.
•
•
11.

Mô tả: chứa lịch sử các hoạt động của người dùng
Chi tiết:
Lịch sử gồm có:
o Tải lên tập tin mới
o Tạo thư mục mới
o Like tập tin
o Theo dõi thành viên nào đó
o Thêm file vào link yêu thích
o Thêm folder và link yêu thích
o Tải về tập tin
o Cập nhật phiên bản file
Ràng buộc: nếu các file hoặc folder bị xóa thì lịch sử cũng bị xóa
Phân trang: nếu lịch sử hoạt động nhiều hơn 20 thì sẽ hiển thị phân trang
Xóa lịch sử: xóa toàn bộ lịch sử hoạt động
Tự động xóa: lịch sử quá 1 tháng sẽ tự động bị xóa
Danh sách theo dõi
Mô tả: chứa danh sách tất cả thành viên đã theo dõi, mỗi khi các thành viên
này tải lên tài liệu người theo dõi sẽ nhận được thông báo

Chi tiết:
Hiển thị thông tin: hiện thị tên, thời gian theo dõi, trạng thái online của
người dùng
Xóa theo dõi: loại bỏ theo dõi ra khỏi danh sách theo dõi
Link yêu thích
Trang 12


•
•
12.
•
•
-

-

13.
•
•
-

-

Mô tả: lưu các thư mục và tập tin hay truy cập để tiện cho các lần truy cập
tiếp theo
Chi tiết:
Hiển thị thông tin: Tên thư mục hoặc tập tin, thời gian tạo của thư mục và
tập tin, kích cỡ của tập tin
Xóa link yêu thích: loại bỏ thư mục hoặc tập tin ra khỏi link yêu thích bằng

ajax
Ràng buộc: nếu các file hoặc folder bị xóa thì link yêu thích cũng bị xóa
Cài đặt
Mô tả: tập chung các cài đặt của người dùng
Chi tiết:
Chỉnh sửa hồ sơ: sử dụng html5 và các hàm php kiểm tra dữ liệu vào, cập
nhật các thông tin về tài khoản.
Thay đổi avatar: kiểm tra ảnh tải lên có đúng hình ảnh và kích thước phải
lớn hơn 150x150px, tự động bóp nhỏ ảnh về định dạng nếu hình quá lớn,
chuyển hình ảnh về png để tiết kiệm tài nguyên hệ thống.
Thay đổi hình bìa: tương tự thay đổi avatar nhưng yêu cầu hình ảnh lớn
hơn 500x150px.
Đổi mật khẩu: sử dụng hàm php kiểm tra các ký tự cấm và mã hóa md5 2
lần cho mật khẩu.
Nhắn tin riêng
Mô tả: nhắn tin riêng giữa các thành viên
Chi tiết:
Danh sách nhắn tin: hiển thị danh sách các cuộc hội thoại sắp xếp theo thời
gian
Xóa tin nhắn: khi 1 bên xóa tin nhắn thì tin nhắn bị ẩn nhưng vẫn tồn tại ở
bên còn lại, nếu cả hai cùng xóa thì tin nhắn mới được loại bỏ khỏi cơ sở
dữ liệu.
Hiển thị tin nhắn: hiển thị tên người nhắn, thời gian, đã xem hoặc chưa
xem tin
Gửi tin nhắn: sử dụng công nghệ ajax để gửi tin nhắn nhanh hơn
Biểu cảm: sử dụng kho biểu cảm phong phú, tăng cảm xúc khi nhắn tin
Chống spam: 10 tin liên tiếp chưa được xem thì người gửi sẽ tạm bị khóa
nhắn tin với thành viên đó.

14.

•

Chuyên mục cho tập tin
Mô tả: phân loại các tập tin vào các chuyên mục, tạo sự thuận lợi cho việc
tìm kiếm cũng như quản lý.
Trang 13


•
15.
•
•
-

16.
•
•
-

17.

Chi tiết:
Gồm có chuyên mục cha và chuyên mục con
Quản lý các chuyên mục này trực tiếp và linh động trên toàn hệ thống
Thông báo
Mô tả: hiển thị các thông báo từ thành viên hoặc hệ thống
Chi tiết:
Thông báo gồm có
o Thông báo hệ thống
o Thông báo theo dõi

o Thông báo có tài liệu mới từ danh sách theo dõi
o Thông báo có thành viên thích tài liệu
Phân trang: nếu thông báo nhiều hơn 20, hệ thống tự phân sang các trang
khác
Xóa thông báo: xóa tất cả thông báo
Ràng buộc: nếu các file hoặc folder bị xóa thì thông báo cũng bị xóa
Giao diện di động, tablet
Mô tả: giao diện dành cho người dùng sử dụng di động hoặc tablet
Chi tiết:
Giao diện tự động thu nhỏ vừa với thiết bị di động hoặc tablet, đây là tính
năng responsive.
Khi người dùng truy cập vào hệ thống bằng di dộng hoặc tablet thì giao
diện hệ thống được lược bỏ các menu bên phải thay vào đó là dạng menu
xổ xuống. Giúp lướt nhẹ nhàng và dễ sử dụng hơn.

Admin Cpanel

Trang 14


•
•
-

-

Mô tả: trang quản lý của ban quản trị, quản lý mọi mặt của hệ thống
Chi tiết:
Admin Cpanel gồm có:
o Thống kê

o Danh sách thành viên
o Danh sách folder
o Danh sách file
o Danh sách chuyên mục
o Báo cáo tập tin
o Báo cáo thành viên
o Thành viên bị phạt
o Cài đặt tin tức
o Cài đặt hệ thống
Thống kê: thống kê tất cả các chỉ số của hệ thống
Danh sách thành viên: hiển thị danh sách tất cả thành viên, thời gian đăng
ký
Danh sách Folder: hiển thị tất cả folder, ban quản trị có thể xóa và sửa nội
dung tại đây
Danh sách file: hiển thị tất cả file, ban quản trị có thể xóa và sửa nội dung
tại đây
Danh sách chuyên mục: hiện thị cây chuyên mục kèm sửa xóa, mức độ ưu
tiên của chuyên mục cha, tạo chuyên mục cha, tạo chuyên mục con.
Trang 15


18.
-

-

-

-

-

III.

Báo cáo tập tin: hiển thị các báo cáo sai phạm của tập tin, xóa báo cáo, xóa
tất cả báo cáo.
Báo cáo thành viên: hiển thị các báo cáo sai phạm của thành viên, xóa báo
cáo, xóa tất cả báo cáo.
Thành viên bị phạt: danh sách thành viên bị phạt, chi tiết lệnh phạt, hủy
lệnh phạt
Cài đặt tin tức: thêm tin tức ngoài trang chủ, chỉnh sửa tin tức, xóa tin tức
Cài đặt hệ thống: cài đặt các thông tin quan trọng của hệ thống.
Các chức năng khác
Backup: Hệ thống nén toàn bộ file đã tải lên của người dùng vào 1 tập tin
zip và tải xuống tập tin này. Các file trong tập tin đã được định dạng, tránh
lộ link file gốc. Ban quản trị có thể quản lý các file zip này và xóa chúng
ngay trên hệ thống.
Hiển thị tất cả file và folder : hiển thị tất cả file và folder của thành viên
sắp xếp theo thời gian, tiện cho việc tìm kiếm và sử dụng
Đặt mật khẩu cho file: người dùng có thể đặt mật khẩu cho tập tin của
mình, duy nhất người đặt mật khẩu khi truy cập vào file không cần nhập
mật khẩu, còn lại bị chặn không xem được file và cần nhập đúng mật khẩu
mới có thể xem.
Tạo file ghi chú txt trực tiếp: đặt tên và tạo ghi chú ngay trên hệ thống.
Cập nhật phiên bản mới cho file: tải lên bản sửa đổi cho tập tin, hệ thống
sẽ thay file cũ bằng file mới up lên. Id của file vẫn được giữ nguyên nhưng
nội dụng đã được cập nhật.
Update thư mục: gồm có xóa, sửa, di chuyển thư mục
Update tập tin: tương tự như update thư mục
Báo cáo sai phạm: báo cáo tập tin hoặc thành viên có dấu hiệu sai phạm,

từ đó ban quan trị có cách giải quyết thích hợp
Khóa thành viên: khóa thành viên được chia làm 5 trường hợp, tùy theo
mức độ vi phạm của thành viên. Thành viên bị khóa sẽ không thể truy cập
bất cứ trang nào trên hệ thống.
Tin tức: hiển thị ngoài trang chủ, hiển thị các tin tức và thông báo của ban
quản trị, tùy chọn gửi mail hoặc không gửi tin tức mới về hộp mail của
thành viên.
Phân quyền: tài khoản ‘admin’ có thể phân quyền hoặc giáng quyền trực
tiếp trên hệ thống
Ngoài ra còn rất nhiều những chức năng nhỏ khác.
BẢO MẬT
1. Tại sao cần bảo mật
Trang 16


-

-

-

-

Nếu hệ thống bị lỗi bảo mật có thể khiến hệ thống bị tê liệt hoặc rất khó
sửa chữa khi đã bị hacker tấn công và thay đổi dữ liệu hệ thống. Không có
hệ thống nào là an toàn tuyệt đối không thể hack nhưng ít nhất cũng cần có
những biện pháp bảo mật tối thiểu để phòng vệ.
2. Các chức năng bảo mật
Chống XSS và SQL Injection: Sử dụng hàm htmlspecialchars áp dụng
toàn bộ trên hệ thống. Các dữ liệu POST và GET sẽ được bọc bởi hàm

htmlspecialchars. Theo như tìm hiểu thì hàm này chống được lỗi bảo mật
XSS và SQL Injection, 2 lỗi bảo mật thường xuyên xảy ra ở các hệ thống
website hiện nay.
Mã hóa md5: mật khẩu và các link quan trọng được mã hóa bằng md5,
tránh bị thất thoát mật khẩu và lộ mất các phương thức của link.
Mã hóa Id: Toàn bộ ID của hệ thống được mã hóa với một quy tắc đặc biệt,
chỉ hệ thống mới có. Tránh trường hợp hacker truy cập hàng loạt file hoặc
nhắn tin đến toàn bộ thành viên… Cách làm này cũng được các website
nổi tiếng thực hiện. Vd: fshare, mp3 zing …
Quét file php: Thực hiện quét nhanh, mọi ngóc ngách tất cả các file php có
trong hệ thống. Nhằm theo dõi các tập tin php trái phép
Mã hóa code: Hệ thống khi khởi chạy đã được mã hóa, kèm đó là hàm
ràng buộc, code chỉ có thể chạy trên 1 website.
Chmod thư mục và file: Các thư mục và file của hệ thống đã được chmod,
đảm bảo người dùng vẫn có thể xem nhưng vẫn đảm bảo bảo mật.
Chống DDOS: Hệ thống được trang bị chức năng chống DDOS, chặn lại
các ip có số lần request quá nhiều trong 1 khoảng thời gian ngắn.

Do thời gian gấp rút, nên một số tính năng chưa được nghiên cứu, trong thời
gian sắp tới hệ thống sẽ tiếp tục được phát triển.
Cảm ơn thầy cô đã đọc đề tài của nhóm.
•

Lưu ý: hai chức năng như xem file và quên mật khẩu không hỗ trợ trên
localhost. Thầy cô có thể test trực tiếp tại Demo Online:


Trang 17