Ứ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: http://ShareAbc.Net Đà Nẵng, tháng năm 2016 Cuộc thi ITC Cuộc thi ITC Cuộc thi ITC LỜI NÓI ĐẦU Với phát triển 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 tăng cao Tìm kiếm tài liệu đơn giản kho tài liệu phân chia riêng biệt theo chia sẻ tài liệu trực tuyến nhiều người biết đến Việc tạo diễn đàn để học hỏi lẫn thiết yếu Với mong muốn phát triển hệ thống chia tài liệu, bước khởi đầu nghiệp, chúng em đặt mục tiêu mong muốn phát triển hệ thống tiến xa tương lai trang web uy tín thành công Trong trình thực đề tài nhiều thiết sót, chúng em mong muốn nhận góp ý từ thầy cô để hệ thống hoàn thiện Thông qua đây, chúng em xin gửi lời chúc sức khỏe, lời cảm ơn đến thầy cô khoa Công nghệ thông tin, bạn sinh viên gửi lời cảm ơn chân thành đến thầy Lương Khánh Tý hỗ trợ chúng em nhiều đề hoàn thành đề tài 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 - - - 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ữ chia sẻ tập tin học tập môi trường sinh viên sản phẩm mang tên “Mạng xã hội chia sẻ lưu trữ tài liệu” đời Toàn giao diện sản phẩm ứng dụng Font-end Framework Bootstrap điều giúp sản phẩm hoạt động hiển thị ổn định hệ điều hành đời máy, tính Responsive Bootstrap Sản phẩm ứ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 giải pháp lưu trữ, chia sẻ, xem trực tiếp, backup tài liệu … thứ dễ dàng Sản phẩm chạy online địa : http://ShareAbc.Net Công nghệ Boostrap Bootstrap Font-end Framework viết SASS biên dịch thành CSS, thư viện mạnh mẽ 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 dễ dàng Điều đặc biệt Bootstrap chuẩn HTML5 CSS3, Boostrap phổ biến đô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 XML không đồng bộ), công cụ cho phép tăng tốc độ ứng dụng web cách cắt nhỏ liệu hiển thị cần thiết, thay tải tải lại toàn trang web AJAX công nghệ đơn lẻ mà kết hợp nhóm công nghệ với Công nghệ Responsive Responsive công nghệ dùng cho ngành thiết kế website, sử dụng để website phù hợp tất kích thước hình từ sở liệu layout gốc Trước người thiết kế phải thiết kế riêng biệt cho hình máy tính cho hình thiết bị di động CÁC CHỨC NĂNG Trang • • • • - • • Đăng ký Mô tả: Nơi tạo tài khoản Chi tiết: Sử dụng html5 hàm php để kiểm tra liệu đăng ký, kiểm tra trùng lặp thành viên Sử dụng mã hóa md5 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 mật sở liệu sử dụng cookie để lưu id tài khoản hoàn tất đăng nhập Quên mật Mô tả: Được sử dụng trường hợp người dùng quên mật Chi tiết: Trang - • • - • • - • • Kiểm tra tên đăng nhập mail người quên mật khẩu, tên tài khoản mail gửi mail chứa link khôi phục mật mail nhập Link khôi phục mã hóa chuỗi md5 tồn 10 phút, 10 phút link khôi phục hiệu lực Trong thời gian chờ khôi phục, 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 trang chủ Tìm kiếm Mô tả: Tìm kiếm thành viên tập tin Chi tiết: Tìm kiếm thành viên: tìm kiếm dựa tên đăng nhập tên hiển thị Tìm kiếm tập tin: dựa tên tên file hiển thị tên file gốc Chatbox Mô tả: chức chat dành cho tất thành viên Chi tiết: Trang - 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 cách biên dịch ký tự icon html hình ảnh Chống spam, hủy tin nhắn tin nhắn trước chưa cách tin nhắn sau đủ 3s Làm chat box chuỗi nhập vào bí mật Trang cá nhân Trang • • - - - Mô tả: Tường nhà thành viên, thành viên có trang cá nhân, chứa thông tin, thư mục tập tin thành viên Chi tiết: Hình bìa: hình bìa thành viên, chưa cập nhật hình bìa đặt sẵn hình ảnh mặc định Hình đại diện: hình đại diện thành viên, tương tự ảnh bìa chưa cập nhật Tạo thư mục: tạo thư mục mới, tạo thư mục dạng đa cấp, kiểm tra tên thư mục trùng tên thư mục Tải file lên: tải lên tập tin văn phòng chấp nhận tập tin txt, pdf, ppt, pptx, doc, docx, xls, xlsx Chặn tập tin lớn, định dạng tên file tải lên định dạng đặc biệt Chi tiết thư mục: hiển thị thông tin 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 chức link yêu thích Hiển thị thông tin: hiển thị thông tin 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 thư mục, trỏ trở lại thư mục trước Hiện thị danh sách thư mục tập tin : hiển thị tất file thư mục có thành viên Trang xem file Trang 10 • • - Mô tả: trang đọc file hiển thị thông tin file Chi tiết: Breadcrumb: hiển thị đường dẫn thư mục, trỏ trở lại thư mục trước Đọc file: hiển thị nội dung tập tin mở Office Xem full: xem full hình với nội dung tập tin Tải về: tải file máy người dùng, link tải mã hóa chuỗi m5 đặc biệt, máy có link nhất, link thay đổi liên tục theo thời gian Báo cáo: báo cáo sai phạm tập tin với ban quản trị, ví dụ: file chứa nội dung phản động, đồi trụy … Thích: chức dành cho thành viên, nhấn thích thông báo gửi 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ị thông tin 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 biểu cảm Lịch sử hoạt động Trang 11 • • - 10 • • 11 Mô tả: chứa lịch sử hoạt động người dùng Chi tiết: Lịch sử gồm có: o Tải lên tập tin o Tạo thư mục o Like tập tin o Theo dõi thành viên o Thêm file vào link yêu thích o Thêm folder link yêu thích o Tải tập tin o Cập nhật phiên file Ràng buộc: file folder bị xóa lịch sử bị xóa Phân trang: lịch sử hoạt động nhiều 20 hiển thị phân trang Xóa lịch sử: xóa toàn lịch sử hoạt động Tự động xóa: lịch sử tháng tự động bị xóa Danh sách theo dõi Mô tả: chứa danh sách tất thành viên theo dõi, thành viên tải lên tài liệu người theo dõi nhận thông báo Chi tiết: Hiển thị thông tin: thị tên, thời gian theo dõi, trạng thái online người dùng Xóa theo dõi: loại bỏ theo dõi khỏi danh sách theo dõi Link yêu thích Trang 12 • • 12 • • - - 13 • • - - Mô tả: lưu thư mục tập tin hay truy cập để tiện cho lần truy cập Chi tiết: Hiển thị thông tin: Tên thư mục tập tin, thời gian tạo thư mục tập tin, kích cỡ tập tin Xóa link yêu thích: loại bỏ thư mục tập tin khỏi link yêu thích ajax Ràng buộc: file folder bị xóa link yêu thích bị xóa Cài đặt Mô tả: tập chung cài đặt người dùng Chi tiết: Chỉnh sửa hồ sơ: sử dụng html5 hàm php kiểm tra liệu vào, cập nhật thông tin tài khoản Thay đổi avatar: kiểm tra ảnh tải lên có hình ảnh kích thước phải lớn 150x150px, tự động bóp nhỏ ảnh định dạng hình lớn, chuyển hình ảnh png để tiết kiệm tài nguyên hệ thống Thay đổi hình bìa: tương tự thay đổi avatar yêu cầu hình ảnh lớn 500x150px Đổi mật khẩu: sử dụng hàm php kiểm tra ký tự cấm mã hóa md5 lần cho mật Nhắn tin riêng Mô tả: nhắn tin riêng thành viên Chi tiết: Danh sách nhắn tin: hiển thị danh sách hội thoại xếp theo thời gian Xóa tin nhắn: bên xóa tin nhắn tin nhắn bị ẩn tồn bên lại, hai xóa tin nhắn loại bỏ khỏi sở liệu Hiển thị tin nhắn: hiển thị tên người nhắn, thời gian, xem chưa xem tin Gửi tin nhắn: sử dụng công nghệ ajax để gửi tin nhắn nhanh Biểu cảm: sử dụng kho biểu cảm phong phú, tăng cảm xúc nhắn tin Chống spam: 10 tin liên tiếp chưa xem người gửi 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 tập tin vào chuyên mục, tạo thuận lợi cho việc tìm kiếm quản lý Trang 13 • 15 • • - 16 • • - 17 Chi tiết: Gồm có chuyên mục cha chuyên mục Quản lý chuyên mục trực tiếp linh động toàn hệ thống Thông báo Mô tả: hiển thị thông báo từ thành viên 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 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: thông báo nhiều 20, hệ thống tự phân sang trang khác Xóa thông báo: xóa tất thông báo Ràng buộc: file folder bị xóa thông báo 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 tablet Chi tiết: Giao diện tự động thu nhỏ vừa với thiết bị di động tablet, tính responsive Khi người dùng truy cập vào hệ thống di dộng tablet giao diện hệ thống lược bỏ menu bên phải thay vào dạng menu xổ xuống Giúp lướt nhẹ nhàng dễ sử dụng Admin Cpanel Trang 14 • • - - Mô tả: trang quản lý ban quản trị, quản lý mặt 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 số hệ thống Danh sách thành viên: hiển thị danh sách tất thành viên, thời gian đăng ký Danh sách Folder: hiển thị tất folder, ban quản trị xóa sửa nội dung Danh sách file: hiển thị tất file, ban quản trị xóa sửa nội dung Danh sách chuyên mục: thị chuyên mục kèm sửa xóa, mức độ ưu tiên chuyên mục cha, tạo chuyên mục cha, tạo chuyên mục Trang 15 18 - - - - - III Báo cáo tập tin: hiển thị báo cáo sai phạm tập tin, xóa báo cáo, xóa tất báo cáo Báo cáo thành viên: hiển thị báo cáo sai phạm thành viên, xóa báo cáo, xóa tất 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 trang chủ, chỉnh sửa tin tức, xóa tin tức Cài đặt hệ thống: cài đặt thông tin quan trọng hệ thống Các chức khác Backup: Hệ thống nén toàn file tải lên người dùng vào tập tin zip tải xuống tập tin Các file tập tin định dạng, tránh lộ link file gốc Ban quản trị quản lý file zip xóa chúng hệ thống Hiển thị tất file folder : hiển thị tất file folder thành viên xếp theo thời gian, tiện cho việc tìm kiếm sử dụng Đặt mật cho file: người dùng đặt mật cho tập tin mình, người đặt mật truy cập vào file không cần nhập mật khẩu, lại bị chặn không xem file cần nhập mật xem Tạo file ghi txt trực tiếp: đặt tên tạo ghi hệ thống Cập nhật phiên cho file: tải lên sửa đổi cho tập tin, hệ thống thay file cũ file up lên Id file giữ nguyên nội dụng 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ự update thư mục Báo cáo sai phạm: báo cáo tập tin thành viên có dấu hiệu sai phạm, từ ban quan trị có cách giải thích hợp Khóa thành viên: khóa thành viên chia làm trường hợp, tùy theo mức độ vi phạm thành viên Thành viên bị khóa truy cập trang hệ thống Tin tức: hiển thị trang chủ, hiển thị tin tức thông báo ban quản trị, tùy chọn gửi mail không gửi tin tức hộp mail thành viên Phân quyền: tài khoản ‘admin’ phân quyền giáng quyền trực tiếp hệ thống Ngoài nhiều chức nhỏ khác BẢO MẬT Tại cần bảo mật Trang 16 - - - - Nếu hệ thống bị lỗi bảo mật khiến hệ thống bị tê liệt khó sửa chữa bị hacker công thay đổi liệu hệ thống Không có hệ thống an toàn tuyệt đối hack cần có biện pháp bảo mật tối thiểu để phòng vệ Các chức bảo mật Chống XSS SQL Injection: Sử dụng hàm htmlspecialchars áp dụng toàn hệ thống Các liệu POST GET bọc hàm htmlspecialchars Theo tìm hiểu hàm chống lỗi bảo mật XSS SQL Injection, lỗi bảo mật thường xuyên xảy hệ thống website Mã hóa md5: mật link quan trọng mã hóa md5, tránh bị thất thoát mật lộ phương thức link Mã hóa Id: Toàn ID hệ thống mã hóa với quy tắc đặc biệt, hệ thống có Tránh trường hợp hacker truy cập hàng loạt file nhắn tin đến toàn thành viên… Cách làm website tiếng thực Vd: fshare, mp3 zing … Quét file php: Thực quét nhanh, ngóc ngách tất file php có hệ thống Nhằm theo dõi tập tin php trái phép Mã hóa code: Hệ thống khởi chạy mã hóa, kèm hàm ràng buộc, code chạy website Chmod thư mục file: Các thư mục file hệ thống chmod, đảm bảo người dùng xem đảm bảo bảo mật Chống DDOS: Hệ thống trang bị chức chống DDOS, chặn lại ip có số lần request nhiều khoảng thời gian ngắn Do thời gian gấp rút, nên số tính chưa nghiên cứu, thời gian tới hệ thống tiếp tục phát triển Cảm ơn thầy cô đọc đề tài nhóm • Lưu ý: hai chức xem file quên mật không hỗ trợ localhost Thầy cô test trực tiếp Demo Online: http://ShareAbc.Net Trang 17 ... tài 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 - - - 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ữ. .. quản lý, lưu trữ chia sẻ tập tin học tập môi trường sinh viên sản phẩm mang tên Mạng xã hội chia sẻ lưu trữ tài liệu đời Toàn giao diện sản phẩm ứng dụng Font-end Framework Bootstrap điều giúp... 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 tăng cao Tìm kiếm tài liệu đơn giản kho tài liệu phân chia riêng biệt theo chia sẻ tài liệu trực tuyến nhiều người biết đến Việc