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

 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

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: http://ShareAbc.Net

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

Cu c thi ITC ộc thi ITC 2016

Cu c thi ITC ộc thi ITC 2016

Cu c thi ITC ộc thi ITC 2016

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 ộc thi ITC 2016

MỤC LỤC

I GIỚI THIỆU CHUNG 1

1 Giới thiệu sản phẩm 1

2 Boostrap là gì ? 1

3 Ajax là gì ? 1

4 Responsive là gì ? 1

II CÁC CHỨC NĂNG 2

1 Đăng ký 2

2 Đăng nhập 2

3 Quên mật khẩu 2

4 Đăng xuất 2

5 Tìm kiếm 2

6 Chatbox 3

7 Trang cá nhân 3

8 Trang xem file 3

9 Lịch sử hoạt động 4

10 Danh sách theo dõi 4

11 Link yêu thích 4

12 Cài đặt 5

13 Nhắn tin riêng 5

14 Chuyên mục cho tập tin 5

15 Thông báo 6

16 Giao diện di động, tablet 6

17 Admin Cpanel 6

18 Các chức năng khác 7

III BẢO MẬT 8

1 Tại sao cần bảo mật 8

2 Các chức năng bảo mật 8

ĐỀ 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

1 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ỉ : http://ShareAbc.Net

2 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

…

3 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

4 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

Trang 1

II CÁC CHỨC NĂNG

1 Đă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

2 Đă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

3 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 2

- 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

4 Đă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ủ

5 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

6 Chatbox

 Mô tả: chức năng chat dành cho tất cả thành viên

 Chi tiết:

- Sử dụng công nghệ ajax giúp người dùng chat không cần load lại trang

Trang 3

- 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

7 Trang cá nhân

Trang 4

 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

8 Trang xem file

Trang 5

 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.

9 Lịch sử hoạt động

Trang 6

 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

10 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

Trang 7

11 Link yêu thích

 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

12 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

13 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

Trang 8

 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ý

 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

15 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

16 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

Trang 9

17 Admin Cpanel

 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

Trang 10

- 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

- 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.

18 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

Trang 11

III BẢO MẬT

1 Tại sao cần bảo mật

- 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:

http://ShareAbc.Net

Trang 12