BÁO CÁO THỰC TẬP CÔNG NHÂN : Đề tài Xây dựng website quản lý thông báo theo tag

Ngày nay công nghệ thông tin đang rất phát triển và việc chia sẻ thông tin là nhu cầu thiết yếu của mỗi con người. Và trong môi trường Đại học của chúng em hiện nay, tất cả các thông tin, thông báo đến từ nhiều nguồn tin khác nhau đều được đăng và lan truyền rộng rãi trên các mạng xã hội lớn như Facebook hay Google+. Vậy tự hỏi rằng là nếu như một ngày nào đó có một thông báo rất là quan trọng đối với tất cả mọi sinh viên trong lớp và như thường lệ nó lại được đăng trênGroup Facebook, nhưng có một vài bạn lại không sử dụng Facebook, vậy làm thế nào để các bạn ấy có thể tiếp cận được với thông báo quan trọng này? Và nhóm chúng em đã bắt tay vào để giải quyết vấn đề đó. Công việc đặt ra là phát triển một hệ thống website quản lý các thông tin, thông báo theo các thẻ Tag. Giúp cho mọi người có thể chia sẻ thông tin cũng như là tiếp nhận thông tin hữu ích từ tất cả mọi người. Hệ thống xây dựng góp phần giải quyết một phần nhu cầu của mọi người và tạo tiền đề để phát triển ngày càng cao. • Mục đích và ý nghĩa đề tài • Mục đích: Tạo ra một website quản lý các bài đăng, các thông báo, thông tin tiện ích. Với giao diện thân thiện giúp tất cả mọi người có thể nhận được thông tin cần thiết cho bản thân và từ đó mọi người cũng có thể chia sẻ thông tin đến người khác. • Ý nghĩa: Sẽ là một địa điểm thú vị và hữu ích để cho mọi người có thể nắm bắt được thông tin và chia sẻ thông tin đến mọi người. • Phương pháp thực hiện: Trong hệ thống này, chúng em sử dụng các phương pháp sau đây: • Phương pháp phân tích tổng hợp từ tài liệu • Phương pháp phân tích ý kiến người dùng • Phương pháp thử nghiệm, đánh giá kết quả • Bố cục đề tài: Trong thời đại hiện nay, việc phát triển của công nghệ thông tin ngày càng mạnh mẽ. Đi đôi theo đó, ngày càng có nhiều công nghệ mới ra đời phục vụ cho nhu cầu của nhà phát triển web nói chung và lập trình viên nói riêng .Vì thế, trong chương trình thực tập công nhân lần này. Nhóm chúng em đã xây dựng trên hai phương pháp khác nhau .Từ đó, mọi người sẽ nhận ra và hiểu rõ hơn về quá trình phát triển 1 trang web .

Tel:(84-511)3736 949 Fax(84-511)3842 771 Website:itf.dut.udn.vn Email:cntt@dut.udn.vn

Nhóm: 14.11

Lời cảm ơn

Để chúng em có thể hoàn thành khóa thực tập công nhân này, ngoài sự

nỗ lực của bản thân còn có sự giúp đỡ tận tình và không thể thiếu của quý thầy

cô giáo, quý anh chị, bạn bè và gia đình Đó thực sự là nguồn động lực, động viên to lớn và ý nghĩa.

Trước hết em xin gửi lời cảm ơn đến quý thầy cô giáo trường Đại Học Bách Khoa Đại Học Đà Nẵng đặc biệt là các thầy cô Khoa Công Nghệ Thông Tin đã tận tình dạy dỗ và truyền đặt kiến thức cho chúng em khi còn trên ghế giảng đường đại học Đó là những kiến thức vô cùng quý giá để em có thể hoàn thành tốt khóa luận này và là hành trang mang theo vào đời.

Em xin chân thành cảm ơn thầy giáo ThS Võ Đức Hoàng đã tận tình hướng dẫn vào giúp đỡ em trong suốt thời gian thực hiện khóa thực tập công nhân.

Với vốn kiến thức hạn hẹp và thời gian thực tập có hạn nên không thể tránh khỏi những thiếu sót, chúng em rất mong nhận được những ý kiến đóng góp của thầy (cô) Đó chính là động lực quý giá để chúng em tiếp tục hoàn thiện vốn kiến thức của mình.

Một lần nữa chúng em xin chân thành cám ơn !

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

MỤC LỤC

Lời cảm ơn 1

MỤC LỤC 2

Chương I CƠ SỞ LÝ THUYẾT 5

I.1 Công nghệ Angular: 5

I.1.1 Các đặc tính của Angular: 5

I.1.2 Ưu điểm: 5

I.1.3 Nhược điểm: 5

I.2 Công nghệ ruby: 5

I.2.1 Ưu điểm: 6

I.2.2 Nhược điểm: 6

CHƯƠNG II: PHÂN TÍCH THIẾT KẾ HỆ THỐNG THÔNG TIN 7

II.1 Phân tích yêu cầu hệ thống: 7

II.2 Sơ đồ khối chức năng: 7

II.3 Chi tiết quyền hạn và các chức năng chính của website: 8

II.4 Thiết kế cơ sở dữ liệu 8

II.4.1 Danh sách các đối tượng chính 8

II.4.2 Mô hình cơ sở dữ liệu 11

MỞ ĐẦU

1 Tổng quan về đề tài:

Đề tài: Xây dựng website quản lý bài viết theo Tag

Ngày nay công nghệ thông tin đang rất phát triển và việc chia sẻ thông tin là nhucầu thiết yếu của mỗi con người Và trong môi trường Đại học của chúng em hiện nay,tất cả các thông tin, thông báo đến từ nhiều nguồn tin khác nhau đều được đăng và lantruyền rộng rãi trên các mạng xã hội lớn như Facebook hay Google+ Vậy tự hỏi rằng

là nếu như một ngày nào đó có một thông báo rất là quan trọng đối với tất cả mọi sinhviên trong lớp và như thường lệ nó lại được đăng trênGroup Facebook, nhưng có mộtvài bạn lại không sử dụng Facebook, vậy làm thế nào để các bạn ấy có thể tiếp cậnđược với thông báo quan trọng này?

Và nhóm chúng em đã bắt tay vào để giải quyết vấn đề đó Công việc đặt ra là pháttriển một hệ thống website quản lý các thông tin, thông báo theo các thẻ Tag Giúpcho mọi người có thể chia sẻ thông tin cũng như là tiếp nhận thông tin hữu ích từ tất

cả mọi người Hệ thống xây dựng góp phần giải quyết một phần nhu cầu của mọingười và tạo tiền đề để phát triển ngày càng cao

2 Mục đích và ý nghĩa đề tài

Tạo ra một website quản lý các bài đăng, các thông báo, thông tin tiện ích Vớigiao diện thân thiện giúp tất cả mọi người có thể nhận được thông tin cần thiết chobản thân và từ đó mọi người cũng có thể chia sẻ thông tin đến người khác

Sẽ là một địa điểm thú vị và hữu ích để cho mọi người có thể nắm bắt được thông tin và chia sẻ thông tin đến mọi người

3 Phương pháp thực hiện:

Trong hệ thống này, chúng em sử dụng các phương pháp sau đây:

 Phương pháp phân tích tổng hợp từ tài liệu

 Phương pháp phân tích ý kiến người dùng

 Phương pháp thử nghiệm, đánh giá kết quả

4 Bố cục đề tài:

Trong thời đại hiện nay, việc phát triển của công nghệ thông tin ngày càng

mạnh mẽ Đi đôi theo đó, ngày càng có nhiều công nghệ mới ra đời phục vụ cho nhu cầu của nhà phát triển web nói chung và lập trình viên nói riêng Vì thế, trong chương trình thực tập công nhân lần này Nhóm chúng em đã xây dựng trên hai phương pháp khác nhau Từ đó, mọi người sẽ nhận ra và hiểu rõ hơn về quá trình phát triển 1 trang web

5 Phân công tổ chức công việc:

BẢNG PHÂN CÔNG CÔNG VIỆC

Họ và tên Sinh viên Phân công công việc

Nguyễn Thanh Bằng - Lên ý tưởng và các chức năng của website

- Tìm hiểu và lập trình giao diện website bằng AngularJS

Tăng Văn Quốc Chí - Tìm hiểu và lập trình back-end bằng ngôn

ngữ Ruby

Trịnh Minh An - Tìm hiểu, phân tích và thiết kế hệ thống

thông tin

- Tạo cơ sở dữ liệu

- Viết báo cáo

Phan Thị Cẩm - Tìm hiểu và lập trình back-end với PHP

- Viết báo cáo

Cao Thị Anh Đào - Tìm hiểu và lập trình back- end với PHP

- Tìm hiểu và lập trình hiết kế giao diện với Bootrap

- Viết báo cáo

CHƯƠNG I: CƠ SỞ LÝ THUYẾT

I.1 AngularJS:

Angular là một bộ Javascript Framework rất mạnh và thường được sử dụng để xây dựng project Single Page Application (SPA) Nó hoạt động dựa trên các thuộc tính mởrộng HTML (các atributes theo quy tắc của Angular) Đây là một Framework mã nguồn mở hoàn toàn miễn phí và được hàng ngàn các lập trình viên trên thế giới ưa chuộng và sử dụng

I.1.1 Các đặc tính của AngularJS:

 AngularJS là một Framwork phát triển dựa trên Javascript để tạo các ứng dụng web phong phú

 AngularJS thường dùng để phát triển frontend (giao diện khách hàng) thông qua các API để gọi data, sử dụng mô hình MVC rất mạnh mẽ

 Mã nguồn AngularJS tự động fix với các trình duyệt khác nhau nên bạn không cần phải lo vấn đề tương thích trình duyệt

 Angular là mã nguồn mở, hoàn toàn miễn phí và được phát triển bởi hàng ngàn các lập trình viên trên thế giới

I.1.2 Ưu điểm:

 Angular cho phép tạo ra các ứng dụng một cách đơn giản, code sạch

 Angular sử dụng data bind giống NET với tính năng liên kết với HTML nên giúp người dùng cảm thấy dễ chịu

 Angular đang ở giai đoạn thử nghiệm

 Angular có thể chạy trên hầu hết các trình duyệt điện thoại thông minh

I.1.3 Nhược điểm:

Mặc dù angular có nhiều lợi thế ưu điểm nhưng nó cũng có mặt trái ngược lại:

 Không an toàn: Được phát triển từ javascript nên nó không an toàn, phía máy chủ phải thường xuyên xác nhận quyền để hệ thống chạy trơn tru

 Phụ thuộc: Nếu người dùng vô hiệu hóa javascript thì sẽ không có angular

là đối tượng Ruby hỗ trợ kế thừa (inheritance) với dynamic dispatch, mixin và

singleton method (thuộc về, và để định nghĩa cho, một instance đơn hơn là định nghĩa dành cho lớp) Mặc dù Ruby không hỗ trợ đa kế thừa, các lớp vẫn có thể được đưa vàocác module dưới dạng các mixins Cú pháp dạng thủ tục (procedural syntax) vẫn còn được hỗ trợ, có vẻ như là ngoài tầm vực của mọi đối tượng, nhưng thực sự là thuộc một thể hiện của class Object tên là 'main' Vì class này là cha của mọi class khác, nó trở trên ẩn đối với mọi lớp và đối tượng

Ruby là ngôn ngữ lập trình kịch bản bởi mã lệnh của Ruby có thể chạy trực tiếp bởi máy tính mà không cần phải biên soạn thành một tệp thực thi tệp tin exe trên

Windows hay tệp tin binary trên Linux

I.2.1 Ưu điểm:

 Sức mạnh

Ruby được viết thuần hướng đối tượng, vì thế, mọi thứ trong Ruby đều là đối tượng.Tất cả những mặt mạnh của ngôn ngữ hướng đối tượng, Ruby đều kế thừa hoàn toàn, bao gồm cả sự linh động của chính ngôn ngữ Ta có thể viết thêm những function khác vào Ruby mà không hề ảnh hưởng tới những function đã có

I.2.2 Nhược điểm:

 Tốc độ chậm

Ruby chậm hơn PHP khoảng 1.75~2 lần và chậm hơn JAVA tới 10 lần

 Thời gian phát triển

Vì Ruby là một ngôn ngữ mới, thực sự phát triển cũng chưa lâu nên có những hạn chế nhất định về mặt môi trường:

- Chưa có nhiều người lập trình viên sử dụng Ruby

- Có ít IDE hỗ trợ cho công việc

- Có ít server hỗ trợ việc deploy bằng Ruby

CHƯƠNG II: PHÂN TÍCH THIẾT KẾ HỆ THỐNG

THÔNG TIN

II.1 Phân tích yêu cầu hệ thống:

Để việc quản lý các bài đăng của người dung trong công ty được đơn giản,nhanh chóng, chính xác thì phần mềm quản lý bài đăng theo tag phải đạt các yêucầu sau:

 Quản trị hệ thống gồm có phân quyền, đăng kí, đăng nhập, đổi mật khẩu

 Quản lý người dùng: quản lý thông tin người dùng, quản lý phân quyền, cấp bậc, quản lý các bài viết và các tag mà người dùng quan tâm

 Quản lý bài viết: website cho phép người dùng đăng bài viết, sửa bài viết,xoá bài viết, tìm kiếm và xem các bài viết liên quan

 Quản lý Tag: người dùng có thể xem , tạo mới, sửa, xoá, tìm kiếm và tuyên bố sở hữu các tag liên quan

II.2 Sơ đồ khối chức năng:

Hình 2.1 Sơ đồ khối chức năng

Thêm/Xóa/ Sửa Tag của mình

Xem/Thêm/Sửa/

Xoá bài viết Của mình

Xem/Thêm/Xoá/Sửa Tất cả người dùng

Xem/Thêm/Xóa/ Sửa Tất cả bài viết

Xem/Thêm/ Xoá/Sửa Tất cả các Tag

Trang chính

Khách Người dùng Nhà quản trỉ

Tìm và xem Bài viết công khai

Đăng kí tài khoản mới

Đăng nhập Đăng nhập

Trang chính nhà Quản Trị

Hình 2.2 Sơ đồ USE-CASE

II.3 Chi tiết quyền hạn và các chức năng chính của website:

Thông tin cá nhân:

Thôn

g tin

Nhìn thấy bởi Sửa được bởi Thông tin Nhìn thấy bởi Sửa được bởi

- Ngày tham gia Tất cả

- Các tag theo dõi Mem, Mod, Ad Mem, Mod,

- Guest lên Member: Thông qua việc đăng ký thành công.

- Member lên Owner:

 Member mặc định là Owner của tag ID của chính mình

 Member trở thành Owner của tag X khi tuyên bố sở hữu (claim) tag đó

- Member lên Moderator:

 Member trở thành Moderator chỉ khi được Admin xét duyệt

- Member / Moderator lên Admin:

 Member trở thành Admin chỉ khi được xét duyệt bởi Founder

Quyền hạn cấp 1:

Khách

Guest

Thành viên

Member

Kiểm duyệt viên

Moderator

Quản trị viên

Admin

Quản trị viên tối cao

FounderXem bài

Quyền hạn cấp 2:

Chủ tag

Owner

Kiểm duyệt viên

Moderator

Quản trị viên

Administrator

Quản trị viên tối cao

FounderChặn theo dõi

[3]: Nguyên tắc bảo vệ bài viết: Ngăn bài viết bị sửa / xóa / bỏ ghim bởi tất cả những người

có quyền hạn nhỏ hơn mình Ví dụ một bài viết được Owner bảo vệ chỉ có thể bị sửa / xóa /

bỏ ghim bởi các Owner của chính tag đó, hoặc bởi Moderator / Admin

[4]: Các hành động đánh dấu "?" nghĩa là phải chờ sự xét duyệt từ các cấp cao hơn Việc thăng / giáng chức Owner phải được xét duyệt bởi Moderator / Admin (trừ việc Member tuyên bố sở hữu tag) Việc thăng / giáng chức Admin phải được xét duyệt bởi chính Founder.[5]: Mặc dù có cùng quyền hạn, Founder được tiếp cận nhiều hơn Admin

I.3 Thiết kế cơ sở dữ liệu

I.3.1 Danh sách các đối tượng chính

- Bảng phân quyền của Guest

- Xem bài viết trong tag công khai

| - Comment bài viết trong tag công khai, hoặc tag kín mà mình theo dõi

- Theo dõi / Bỏ theo dõi tag

- Đề xuất bài đăng

- Tuyên bố sở hữu tag

- Xóa tag mà mình sở hữu

- Chuyển tag mà mình sở hữu choOwner khác

- Đề xuất đưa Member thành Owner của tag mà mình sở hữu

- Đăng bài trong tag mà mình sở hữu

- Bảo vệ bài viết

Moderator

(kế thừa từ Owner) - Cấp bậc: Moderator- Bảng phân quyền của

Moderator

- Chặn bất kỳ người dùng nào khỏi tag

- Xóa bất kỳ tag nào

- Đặt trạng thái bảo vệ tag

- Thay đổi chủ sở hữu của bất kỳ tag nào

- Đăng bài trong bất kỳ tag nào

- Bảng phân quyền của Admin

- Thăng / Giáng chức Member lên thành Owner, Moderator

- Backup / Tải về dữ liệu của trang (một phần)

- Tác động đến cơ sở dữ liệu, cấu trúc trang (một phần)

- Backup / Tải về dữ liệu của trang (toàn bộ)

- Tác động đến cơ sở dữ liệu, cấu

- Bảng phân quyền của Owner

- Tên đăng nhập: Nguyễn Thanh Bằng

Bài đăng - ID bài viết

- Bộ tag: [Thời tiết][Đà Nẵng]

- Nội dung bài viết: Hôm nay trời mưa to

- Trạng thái ghim: Không ghim

- Trạng thái bảo vệ: Owner

- Trạng thái sở hữu: Không có

- Chế độ công khai: Công khai

- Trạng thái bảo vệ: Moderator

I.3.2 Mô hình cơ sở dữ liệu

Hình 2.3 Mô hình cơ sở dữ liệu

CHƯƠNG III: MÔI TRƯỜNG CÀI ĐẶT VÀ KẾT QUẢ

TRIỂN KHAI ĐÁNH GIÁ

PHẦN 2: XÂY DỰNG HỆ THỐNG VỚI PHP VÀ

BOOSTRAP CHƯƠNG 1: CƠ SỞ LÝ THUYẾT

I.1.Giới thiệu về HTML5 và CSS3

HTML5 và CSS3 là các chương trình mới nhất cho việc thiết kế Web Các ứng dụng web đang trở nên ngày càng tinh vi, và một số tính năng mới trongHTML5 sẽ giúp chúng tiếp tục được cải thiện

HTML5 và CSS3 cũng làm cho các ứng dụng Web và các trang Web hấp dẫnhơn HTML5 có các tính năng mới được thêm vào giúp cho việc xây dựngứng dụng web dễ dàng hơn rất nhiều Ví dụ như nhiều màu sắc hơn và hỗ trợđường cong, việc làm mờ, góc tròn (thay vì ép buộc các nhà thiết kế web sửdụng các hình ảnh để tạo ra các góc tròn), và dĩ nhiên là cả việc lưu trữoffline Tất cả những điều này là một trang Web trở nên dễ nhìn hơn, bắt mắthơn và làm cho mọi thứ trở nên sát với những gì mà nhà thiết kế tưởng tượngtrong đầu hơn

I.2.Giới thiệu về framework Bootstrap

Bootstrap là 1 framework HTML, CSS, và JavaScript cho phép người dùng dễdàng thiết kế website theo 1 chuẩn nhất định, tạo các website thân thiện với cácthiết bị cầm tay như mobile, ipad, tablet,

Tại sao lại như vậy?

Bootstrap bao gồm những cái cơ bản có sẵn như: typography, forms, buttons,tables, navigation, modals, image carousels và nhiều thứ khác Trong bootstrap

có thêm nhiều Component, Javascript hỗ trợ cho việc thiết kế reponsive củabạn dễ dàng, thuận tiện và nhanh chóng hơn

I.3.Giới thiệu về ngôn ngữ PHP

 PHP - viết tắt hồi quy của "Hypertext Preprocessor", là một ngôn ngữ lập

trình kịch bản được chạy ở phía server nhằm sinh ra mã html trên client PHP

đã trải qua rất nhiều phiên bản và được tối ưu hóa cho các ứng dụng web, vớicách viết mã rõ rãng, tốc độ nhanh, dễ học nên PHP đã trở thành một ngônngữ lập trình web rất phổ biến và được ưa chuộng.

CHƯƠNG 2: PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG THÔNG TIN

CHƯƠNG 3: TRIỂN KHAI THỰC HIỆN VÀ KẾT LUẬN

III.1Môi trường cài đặt

III 1.1 Xampp Control Panel

Xampp là chương trình tạo máy chủ Web (Web Server) được tích hợp sẵn Apache, MySQL, FileZilla, Mercury, Tomcat và các công cụ như

phpMyAdmin

Sau đây là những chương trình tự động cài đặt khi bạn cài XAMPP:Apache: chương trình sử dụng máy chủ, cho phép máy chủ phân phátcác trang web, nhưng nó chỉ hiểu HTML thôi!

MySQL: một chương trình rất hữu ích sau này Nó cho phép mình sửdụng cơ sở dữ liệu (CSDL)

III.1.2 Sublime Text 3

Sublime Text là một nền tảng mã nguồn biên tập với một giao diện lậptrình ứng dụng Python (API) Bản này hỗ trợ nhiều ngôn ngữ lập trình vàngôn ngữ đánh dấu, và chức năng của nó có thể được mở rộng bằng cách sửdụng với các plugin, điển hình là cộng đồng được xây dựng và duy trì theogiấy phép phần mềm tự do Phiên bản hiện nay của Sublime Text là 3

III.2 Triển khai thực hiện

III.2.1 Mô tả chức năng

Khi đăng nhập vào hệ thống, trang đăng nhập sẽ hiện ra đầu tiên Nếuđăng nhập đúng thì có hai trường hợp xảy ra:

Nếu là admin của Blog thì vào được trang quản lý thành viên, quản lýbài viết và có thể thực hiện các chức năng thêm, sửa, xóa.

Nếu là thành viên thì được vào trang chính thức của blog Ở đây ,thànhviên chỉ có thể xem bài viết và xem thông tin tất cả thành viên của blog màkhông thực hiện được tác vụ gì

Thành viên chỉ được thêm vào bởi admin

III.2.2 Kết quả thực hiện được các chức năng

2.2.1 Chủ blog(Admin)

Hình2.1:Chức năng đăng nhập

Hình 2.2: Chức năng Xem thành viên

Hình 2.3: Chức năng Xem bài viết

Hình 2.4 :Chức năng sửa thành viên Hình2.5 :Chức năng sửa bài viết

2.2.2 Thành viên của Blog

Hình 2.6 : Chức năng xem tất cả bài viết

Hình 2.7: Chức năng xem chi tiết bài viết

Hình 2.8: Xem tất cả thành viên của blog

III.2.3 Đánh giá hệ thống:

Hệ thống website hoạt động khá ổn đinh, giúp cho chủ blog an tâm vàchia sẻ thông tin đến những nhóm người mà chủ blog muốn chia sẻ

Nhưng vì thời gian có hạn, nên chức năng của hệ thống còn ít Chỉ baogồm các chức năng cơ bản

III.2.4 Kết luận và hướng phát triển

Về mặt thực tiễn, đề tài đã tạo được một trang blog cá nhân

Tuy nhiên , đề tài còn có nhiều vấn đề cần giải quyết :

- Xử lý bắt lỗi

- Thiết kế giao diện ưa nhìn hơn

4.2 Hướng phát triển

Hướng nghiên cứu và phát triển của đề tài

-Xây dựng các chức năng hoàn thiện hơn

-Xây dựng App trên điện thoại