Đồ án WEB(có cả soure CODE) Xây dựng website mạng xã hội lưu trữ chia sẻ tài liệu

Đồ án WEB(có cả soure CODE) Xây dựng website mạng xã hội lưu trữ chia sẻ tài liệu Cài đặt trang web xong. user: admin pass: 123456 Bạn nào có thắc mắc gì gửi mail về ydinhdoan95@gmail.com

Qua ba năm học tập và rèn luyện tại trường Trường Cao đẳng Công nghệ thôngtin hữu nghị Việt - Hàn, được sự chỉ bảo và giảng dạy nhiệt tình của quý thầy cô, đặcbiệt là quý thầy cô Khoa Công nghệ thông tin đã truyền đạt cho em những kiến thức về

lý thuyết và thực hành trong suốt thời gian học ở trường Cùng với sự nổ lực của bảnthân, em đã hoàn thành đồ án tốt nghiệp của mình

Từ những kết quả đạt được này, em xin chân thành cám ơn Quý thầy cô trườngTrường Cao đẳng Công nghệ thông tin hữu nghị Việt - Hàn, đã truyền đạt cho emnhững kiến thức bổ ích trong thời gian qua Đặc biệt, là thầy Ths Trần Văn Đại đã tậntình hướng dẫn em hoàn thành tốt đồ án tốt nghiệp này

Do kiến thức còn hạn hẹp nên không tránh khỏi những thiếu sót trong cách làm

đồ án, lỗi trình bày Em rất mong nhận được sự đóng góp ý kiến của quý thầy cô vàban lãnh đạo nhà trường, để đồ án tốt nghiệp đạt được kết quả tốt hơn

Em xin chân thành cảm ơn !

Đà Nẵng, tháng 06 năm 2017

Sinh viên thực hiện

Đoàn Đình Ý

LỜI CẢM ƠN i

MỤC LỤC ii

DANH MỤC HÌNH ẢNH iv

LỜI MỞ ĐẦU 1

CHƯƠNG 1 GIỚI THIỆU TỔNG QUAN 2

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

1.2 Giới thiệu chung về Bootstrap Framework 2

1.2.1 Bootstrap là gì ? 2

1.2.2 Tại sao phải sử dụng Bootstrap ? 2

1.2.3 Cách cài đặt Framework Bootstrap 4

1.3 Giới thiệu chung về công nghệ Ajax 5

1.3.1 AJAX là gì? 5

1.3.2 Các công nghệ được sử dụng trong AJAX 6

1.3.3 Một số ví dụ về các website sử dụng AJAX 6

1.3.4 Ưu điểm khi sử dụng Ajax 6

1.3.5 Hạn chế khi sử dụng Ajax 6

CHƯƠNG 2 PHÂN TÍCH VÀ THIẾT KẾ 8

2.1 Khảo sát hệ thống 8

2.1.1 Khảo sát hiện trạng 8

2.1.2 Yêu cầu chức năng của hệ thống 8

2.1.3 Yêu cầu phi chức năng 8

2.2 Mô hình hóa yêu cầu 8

2.2.1 Xác định các tác nhân 8

2.2.2 Trường hợp sử dụng 8

2.2.3 Biểu đồ trường hợp sử dụng (Diagram) 12

2.3 Mô hình khái niệm 12

2.3.1 Xác định các lớp đối tượng 12

2.3.2 Mối quan hệ giữa các lớp 13

2.3.3 Các gói trong hệ thống 13

2.4 Mô hình hóa tương tác đối tượng 15

2.4.1 Biểu đồ trình tự 15

2.5 Mô hình hóa hành vi 17

2.5.1 Biểu đồ trạng thái thành viên chỉnh sửa hồ sơ 17

2.5.2 Biểu đồ hoạt động thống kê 18

2.6 Thiết kế kiến trúc vật lý 18

2.6.1 Biểu đồ thành phần 18

2.6.2 Biểu đồ triển khai 19

CHƯƠNG 3 HƯỚNG DẪN SỬ DỤNG CHƯƠNG TRÌNH 20

3.1 Giới thiệu chương trình 20

3.2 Giao diện chương trình 20

3.3 Hướng dẫn sử dụng cho quản trị viên 24

KẾT LUẬN 25

TÀI LIỆU THAM KHẢO v

Hình 1.1 Logo HTML5 và CSS3 2

Hình 1.2 Công nghệ Responsive 3

Hình 1.3 Logo Bootstrap Framework 4

Hình 1.4 Cây thư mục của Bootstrap 5

Hình 1.5 Code trong trang index.html 5

Hình 1.6 Logo công nghệ Ajax 5

Hình 2.1 Biểu đồ trường hợp sử dụng 12

Hình 2.2 Các lớp biên 13

Hình 2.3 Các lớp điều khiển 14

Hình 2.4 Biểu đồ lớp mức phân tích 14

Hình 2.5 Biểu đồ trình tự đăng nhập 15

Hình 2.6 Biểu đồ trình tử tải lên tài liệu 15

Hình 2.7 Biểu đồ trình tự tìm kiếm 16

Hình 2.8 Biểu đồ cộng tác tạo thư mục 16

Hình 2.9 Biều đồ cộng tác nhắn tin 17

Hình 2.10 Biểu đồ trạng thái thành viên chỉnh sửa hồ sơ 17

Hình 2.11 Biểu đồ hoạt động thống kê 18

Hình 2.12 Biều đồ thành phần 18

Hình 2.13 Biều đồ triển khai 19

Hình 3.1 Giao diện đăng nhập 20

Hình 3.2 Giao diện đăng ký 21

Hình 3.3 Giao diện trang cá nhân 21

Hình 3.4 Giao diện trang xem file 22

Hình 3.5 Giao diện nhắn tin riêng 22

Hình 3.6 Giao diện quản lý của Admin 23

Hình 3.7 Giao diện thống kê của Admin 23

LỜI MỞ ĐẦU

Ngày nay, ứng dụng công nghệ thông tin và việc tin học hóa được xem là mộttrong những yếu tố mang tính quyết định trong hoạt động của các chính phủ, tổ chức,cũng như của các công ty, nó đóng vai trò hết sức quan trọng, có thể tạo ra những bướcđột phá mạnh mẽ

Cùng với sự phát triển không ngừng về kỹ thuật máy tính và mạng điện tử, côngnghệ thông tin cũng được những công nghệ có đẳng cấp cao và lần lượt chinh phục hếtđỉnh cao này đến đỉnh cao khác Mạng Internet là một trong những sản phẩm có giá trịhết sức lớn lao và ngày càng trở nên một công cụ không thể thiếu, là nền tảng chínhcho sự truyền tải, trao đổi thông tin và thanh toán trên toàn cầ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àiliệ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ườibiế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 xahơn nữa và trong tương lai sẽ là một trang web uy tín và thành công

CHƯƠNG 1 GIỚI THIỆU TỔNG QUAN

 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 “Website lưu trữ và chia sẻ 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ẻ, xemtrự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://DoanDinhY.Com

1.2.1 Mô hình kiến trúc MVC

Trong MVC, dữ liệu được nhận bởi View, View sẽ chuyển cho Controller cậpnhật vào Model, rồi sau đó dữ liệu trong Model sẽ được đưa lại cho View mà khôngthông qua Controller, do vậy luồng xử lý này có hình tam giác

Hình 1.1 Mô hình kiến trúc MVC

 Model

Đây là thành phần chứa tất cả các nghiệp vụ logic, phương thức xử lý, truy xuấtdatabase, đối tượng mô tả dữ liệu như các Class, hàm xử lý

 View

Đảm nhận việc hiển thị thông tin, tương tác với người dùng, nơi chứa tất cả cácđối tượng GUI như textbox, images Hiểu một cách đơn giản, nó là tập hợp các formhoặc các file HTML - Hyper Text Markup Language

 Controller

Giữ nhiệm vụ nhận điều hướng các yêu cầu từ người dùng và gọi đúng nhữngphương thức xử lý chúng Chẳng hạn thành phần này sẽ nhận request từ url và form

để thao tác trực tiếp với Model

1.2.2 MVC làm việc như thế nào?

Nhìn lại sơ đồ phía trên, ta thấy có mũi tên nét liền và những mũi tên nét đứt.Những mũi tên nét đứt được hình thành trên quan điểm của người dùng mà không phải

là của những nhà thiết kế phần mềm thực sự Do đó chúng ta chỉ quan tâm đến nhữngmũi tên còn lại

Đây là một cách đơn giản để mô tả lại luồng sự kiện được xử lý trong MVC:

 User tương tác với View, bằng cách click vào button, user gửi yêu cầu đi

 Controller nhận và điều hướng chúng đến đúng phương thức xử lý ởModel

 Model nhận thông tin và thực thi các yêu cầu

 Khi Model hoàn tất việc xử lý, View sẽ nhận kết quả từ Model và hiển thịlại cho người dùng

Hình 2 Mô hình xử lý trong kiến trúc MVC

1.2.3 Ưu điểm và nhược điểm của kiến trúc MVC

 Ưu điểm:

Thể hiện tính chuyên nghiệp trong lập trình, phân tích thiết kế Do được chiathành các thành phần độc lập nên giúp phát triển ứng dụng nhanh, đơn giản, dễ nângcấp, bảo trì…

1.3.2 Tại sao phải sử dụng Bootstrap ?

Bootstrap có các ưu điểm nổi bật hơn so với các framework khác như:

 Rất dễ để sử dụng: Nó đơn giản vì nó được base trên HTML, CSS vàJavascript chỉ cẩn có kiến thức cơ bản về 3 cái đó là có thể sử dụng bootstrap tốt

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

Hình 1.1 Logo HTML5 và CSS3

Một vài website sử dụng Bootstrap: fshare.vn, tenlua.vn, itc.viethanit.edu.vn …

phù hợp với đa thiết bị trở nên dễ dàng hơn bao giờ hết Đây là xu hướng phát triểngiao diện website đang rất được ưu chuộng trên thế giới

Bản demo các mẫu giao diện được hiển thị trên các thiết bị:

Hình 1.2 Công nghệ Responsive

 Tương thích với trình duyệt: Nó tương thích với tất cả các trình duyệt

(Chrome, Firefox, Internet Explorer, Safari, and Opera) nhưng lưu ý vì IE vẫn rất hạnchế với IE phiên bản cũ vì thế việc IE9 hay IE8 đổ xuống không hỗ trợ là điều đáng longại

 Tiết kiệm thời gian: Boostrap giúp người thiết kế giao diện website tiết kiệm

rất nhiều thời gian Các thư viện Bootstrap có những đoạn mã sẵn sàng cho bạn ápdùng vào website của mình Bạn không phải tốn quá nhiều thời gian để tự viết codecho giao diện của mình

 Tùy biến cao: Bạn hoàn toàn có thể dựa vào Bootstrap và phát triển nền tảng

giao diện của chính mình Bootstrap cung cấp cho bạn hệ thống Grid System mặc địnhbao gồm 12 bột và độ rộng 940px Bạn có thể thay đổi, nâng cấp và phát triển dựa trênnền tảng này

Với những ưu thế nổi bật trên thì Bootstrap cũng có những hạn chế nhất định

 Sản phẩm nặng, tốc độ tối ưu chưa cao: nên nếu dự án của bạn đòi hỏi sảnphẩm nhẹ thì việc sử dụng bootstrap sẽ là cả một gánh nặng cho web

 Chưa hoàn thiện: Bootstrap chưa đầy đủ các thư viện cần thiết Các phát triểnchưa thể tạo ra một framework riêng hoàn hảo, do đó một số trang web vẫn phải dùngphiên bản dành riêng cho mobile

 Quá nhiều code thừa: Không thể phủ nhận rằng Bootstrap có rất nhiều ưuđiểm khi nó cũng cấp gần như đầy đủ những tính năng cơ bản của một trang webresponsive hiện đại Tuy nhiên, mặt trái của việc này là website của bạn sẽ phải tảithêm rất nhiều dòng code không cần thiết khi mà bạn chỉ cần chưa đến 10% những gìBootstrap cung cấp

 Bootstrap không khuyến khích sáng tạo: Chỉ cần nhét Bootstrap vào themessẵn có, gọi ra cái class từ stylesheet và thế là bạn đã có một trang web responsivetrông cũng ổn ổn Sự tiện dụng và dễ dàng của Bootstrap nhiều khi sẽ khuyễn khíchtính lười sáng tạo, vốn luôn thường trực trong mỗi chúng ta Kết quả là, chúng tathướng thoả hiệp những gì mình thực sự muốn cho website để đổi lấy sự tiện dụng vàtiết kiệm thời gian mà Bootstrap mang lại

Hình 1.3 Logo Bootstrap Framework

1.3.3 Cách cài đặt Framework Bootstrap

Twitter Bootstrap giúp chúng ta giảm thiểu thời gian thiết kết html và css.TwitterBootstrap định nghĩa sẳn các class css công việc của chúng ta chỉ là sử dụng các class

Hình 1.4 Cây thư mục của Bootstrap

bootstrap vừa giải nén phía trên

Hình 1.5 Code trong trang index.html

1.4.1 AJAX là gì?

AJAX là cụm từ viết tắt của Asynchronous JavaScript and XML, nghĩa làJavaScript và XML không đồng bộ

Hình 1.3 Logo công nghệ Ajax

AJAX không phải là một ngôn ngữ mới, nhưng nó là một cách thức mới bao gồmviệc sử dụng một nhóm nhiều công công nghệ với nhau nhằm giúp ích cho việc tạo racác ứng dụng web có tính năng trao đổi dữ liệu với server mà không cần phải tải lạitoàn bộ trang web như cách thông thường

1.4.2 Các công nghệ được sử dụng trong AJAX

AJAX sử dụng XHTML để tạo nội dung, CSS để trình bày, DOM(DocumentObject Model) và Javascript để tạo các nội dung động Vì vậy, trước khi làm quen vớiAJAX, người lập trình cần có các kiến thức cơ bản nhất định về HTML, CSS vàJavascript

AJAX cũng sử dụng đối tượng XMLHttpRequest để trao đổi dữ liệu không đồng

bộ với máy chủ

1.4.3 Một số ví dụ về các website sử dụng AJAX

Hiện nay thì hầu hết các website nổi tiếng đều đã và đang sử dụng AJAX Có thể

kể tên một số trang web như sau:

Các trang mạng xã hội như Facebook, Twitter sử dụng AJAX để load các tin bàimới mà không khiến người dùng phải tải lại toàn bộ trang web

Google map: người dùng có thể di chuyển trong google map bằng việc kéo conchuột đến vị trí cần tìm thay vì phải nhấn vào bất kỳ nút nào

1.4.4 Ưu điểm khi sử dụng Ajax

- Nó giúp việc thiết kế web đa dạng hơn và tăng tính tương tác của website vớingười dùng

- Nó sử dụng các công nghệ đã có sẵn nên dễ học và sử dụng

- Nhờ tính phổ biến của nó, đã khuyến khích việc phát triển các khuôn mẫu mà

sẽ giúp lập trình viên tránh khỏi các vết xe đổ trước

- Được hỗ trợ trong các trình duyệt phổ biến hiện nay

- Không thể sử dụng nút back vì back cũng là chính nó

- Với một số trình duyệt, do nhu cầu bảo mật, sẽ tắt chức năng thực hiệnjavascript nên ajax không thể chạy, hay trong một vài host, không hỗ trợ vào sâu cấuhình server nên hay bị lỗi “Access denied”

Nhưng với những điểm hạn chế nói trên thì AJAX vẫn đang được các lập trìnhviên sử dụng rộng rãi và đang nghiên cứu để cải thiện nó, ví dụ như vừa update thôngtin trên web, vừa thay đổi trên thanh address để có thể sử đung một số chức năng liênquan tới địa chỉ tuyệt đối này

CHƯƠNG 2 PHÂN TÍCH VÀ THIẾT KẾ

2.1.1 Khảo sát hiện trạng

Hiện nay, các trang lưu trữ chia sẻ tài liệu trên mạng rất nhiều và được ưuchuộng như tailieu.vn, fshare.vn, hay doc24.vn Mặc dù được sử dụng nhiều nhưngnhững trang trên vẫn còn hạn chế như sau:

- Không cho phép các thành viên trò chuyện với nhau

- Hệ thống tìm kiếm tài liệu khó khăn

- Không thể bình luận hoặc nhận xét tài liệu được đăng tải

Vì vậy việc cấp thiết giải quyết những vấn đề trên là cần một website vừa có thểđăng tải tài liệu, vừa có sự tương tác giữa các thành viên với nhau hay hệ thống tìmkiếm nhanh gọn nhẹ

2.1.2 Yêu cầu chức năng của hệ thống

- Xây dựng hệ thống website lưu trữ và chia sẻ tài liệu

- Tạo sự tương tác giữa các thành viên với nhau

- Quản lý và cập nhật các tài liệu một cách dễ dàng

2.1.3 Yêu cầu phi chức năng

- Giao diện đẹp mắt, phù hợp với các loại màn hình, hệ điều hành

- Rút gọn các bước thao tác, giảm tối thiểu lần tải lại trang

- Tốc độ truy cập nhanh chóng

- Bảo mật tốt cho trang web chống lại hacker

2.2.1 Xác định các tác nhân

- Quantrivien (Quản trị viên): Là người điều hành hệ thống.

- Thanhvien (Thành viên): Là người sử dụng các chức năng của website

Tham chiếu tới: Danh sách thành viên

Tác nhân: Quản trị viên, Thành viên

- Mô tả: Tác nhân cần phải đăng nhập tài khoản và mật khẩu để được sử dụngcác chức năng riêng cho thành viên 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

Tham chiếu tới: Danh sách thành viên

Tác nhân: Quản trị viên, Thành viên

- Mô tả: Được sử dụng trong trường hợp người dùng quên mật khẩu, 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 1mail 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ằngmộ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

Tham chiếu tới: Danh sách link khôi phục, Danh sách thành viên

Tác nhân: Quản trị viên, Thành viên

Mô tả: Cho phép tác nhân tìm kiếm tài liệu và thành viên có trong hệ thống

Tham chiếu tới: Danh sách tài liệu, Danh sách thành viên

Tác nhân: Quản trị viên, Thành viên

Mô tả: Cho phép tất cả các thành viên viên được trò chuyện với nhau

Tham chiếu tới: Danh sách chat tổng

Tác nhân: Quản trị viên, Thành viên

Mô tả: Mỗi tác nhân đều có trang cá nhân riêng Là nơi quản lý thư mục và tàiliệu của mình

Tham chiếu tới: Danh sách thành viên, Danh sách thư mục, Danh sách tài liệu

Tác nhân: Quản trị viên, Thành viên

Mô tả: Là nơi xem tài liệu trực tuyến, tác nhân có thể thích hoặc bình luận tàiliệu tại trang này

Tham chiếu tới: Danh sách tài liệu

Tác nhân: Quản trị viên, Thành viên

Mô tả: Lưu lại những lần tương tác của tác nhân với các thành viên khác haythư muc và tài liệu

Tham chiếu tới: Danh sách lịch sử hoạt động

Tác nhân: Quản trị viên, Thành viên

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àytải lên tài liệu người theo dõi sẽ nhận được thông báo

Tham chiếu tới: Danh sách theo dõi

Tác nhân: Quản trị viên, Thành viên

Mô tả: Là nơi nhắn tin riêng giữa hai người với nhau

Tham chiếu tới: Danh sách tin nhắn