Đóng góp của đề tài Ph愃⌀m vi thực hiện đA án dựa trên những ki Ān thức thu đưFc từnhững môn học trong quá trPnh học t p t愃⌀i trư>ng và tham khảothêm một s Ā tài liệu bên ngoài để bổ sung
Trang 1TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN &
TRUYỀN THÔNG VIỆT HÀN
Khoa Khoa Học Máy Tính
Trang 2Thiết kế website forum ii
TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN &
TRUYỀN THÔNG VIỆT HÀN
Khoa Khoa Học Máy Tính
Trang 3Thiết kế website forum iii
NHẬN XÉT CỦA GIẢNG VIÊN HƯỚNG DẪN ………
………
………
………
………
Trang 4Thiết kế website forum iv
LỜI CẢM ƠN
Trong th>i gian làm đA án, nhóm em đD nh n đưFc nhiGu sự gi甃Āp
đJ, đóng góp 礃Ā ki Ān và chN bảo nhiệt tPnh cQa thRy cô và b愃⌀n bV
Em xin gYi l>i cảm ơn chân thành đ Ān cô TS Lê Thị Thu Ngangư>i đD t n tPnh hướng dẫn, chN d愃⌀y nhóm em trong su Āt quá trPnhthực hiện ĐA án cơ sở 1 Em xin chân thành cảm ơn cô đD hỗ trF,gi甃Āp nhóm em có thể thực hiện đA án lRn này
Nhóm em xin chân thành cảm ơn!
Trang 5Thiết kế website forum v
MỤC LỤC Danh mục các từ viết tắt vii
Danh mục hình vẽ viii
Mở Đầu 1
1 Giới thiệu 1
2 Mục tiêu, nhiệm vụ cQa đG tài 1
3 Phương pháp nghiên cứu 1
4 Ph愃⌀m vi nghiên cứu 1
5 B Ā cục cQa lu n văn 1
Chương 1 TỔNG QUAN VỀ ĐỀ TÀI 3
1 Tổng quan vG forum trực tuy Ān 3
1.1 Khái niệm forum trực tuy Ān 3
1.2 Các đặc trưng cQa forum trực tuy Ān 3
2 Các công cụ để xây dựng website 3
2.1 Khái quát vG HTML 3
2.1.1 Khái quát 4
2.1.2 Ưu, nhược điểm 5
2.2 Khái quát vG CSS 5
2.2.1 Khái quát 5
2.2.2 Ưu, nhược điểm 6
2.3 Khái quát vG Bootstrap 7
2.3.1 Khái quát 7
Trang 6Thiết kế website forum vi
2.3.2 Ưu, nhược điểm 7
2.4 Khái quát vG JavaScript 7
2.3.1 Khái quát 8
2.3.2 Ưu, nhược điểm 8
3 K Āt chương 1 9
Chương 2 PHÂN TÍCH THIẾT KẾ WEBSITE 10
1 Xác định yêu cRu 10
1.1 Đ Āi với admin 10
1.2 Đ Āi với ngư>i dùng 10
2 Phân tích yêu cRu 10
2.1 Đặc tả use case 10
2.2 Use case diagram 14
Chương 3 XÂY DỰNG WEBSITE 16
1 Cấu tr甃Āc folder dự án 16
2 Demo sản phẩm 17
2.1 Trang ChQ 17
2.2 Trang ChQ đG 18
KẾT LUẬN 20
1 K Āt quả đ愃⌀t đưFc 20
2 Hướng phát triển 20
TÀI LIỆU THAM KHẢO i
Trang 7Thiết kế website forum vii
DANH MỤC CÁC TỪ VIẾT TẮT
Trang 8Thiết kế website forum
viii
DANH MỤC HÌNH VẼ
Hình 2.1 Use case đăng kí 14 Hình 2.2 Use case đăng kí 15
Trang 9Thiết kế website forum 1
MỞ ĐẦU
1 Giới thiệu
Th Ā kỷ XXI, con ngư>i ch甃Āng ta luôn có nhu cRu k Āt n Āi vớinhững ngư>i xung quanh và với sự phát triển cQa công nghệ vàinternet như hiện, ch甃Āng ta hoàn toàn có thể làm điGu đó với sự xuấthiện cQa những trang web như forum, chat Chính vP v y trong ph愃⌀m
vi ĐA Án Cơ Sở 1, nhóm em chọn đG tài “Thi Āt k Ā website forum”gi甃Āp mọi ngư>i giao ti Āp và chia sẻ với nhau một cách dễ dàng,nhanh chóng và hiệu quả
2 Mục tiêu, nhiệm vụ của đề tài
Mục tiêu cQa đG tài nhằm:
- Xây dựng giao diện bên ngoài cQa website forum
- Nắm bắt đưFc công nghệ thi Āt k Ā Website bằng HTML, CSS,JavaScript
- Website hiển thị thông tin mà ngư>i dùng mu Ān xem một cách
rõ ràng
- Website đơn giản, dễ nhPn
3 Đối tượng, phạm vi và phương pháp tiếp cận
Phương pháp nghiên cứu l礃Ā lu n:
- Nghiên cứu qua việc đọc sách, báo, tài liệu liên quan nhằmxây dựng cơ sở l礃Ā thuy Āt cQa đG tài và các biện pháp cRn thi Āt đểgiải quy Āt các vấn đG cQa đG tài Phương pháp nghiên cứu thựcnghiệm:
- Thông qua quan sát thực t Ā, yêu cRu cQa cơ sở những l礃Ā lu nđưFc nghiên cứu, Website sẽ đưFc đưa vào ho愃⌀t động từ đó có nhưngđiGu chNnh phù hFp hơn Ph愃⌀m vi nghiên cứu
Trang 10Thiết kế website forum 2
4 Đóng góp của đề tài
Ph愃⌀m vi thực hiện đA án dựa trên những ki Ān thức thu đưFc từnhững môn học trong quá trPnh học t p t愃⌀i trư>ng và tham khảothêm một s Ā tài liệu bên ngoài để bổ sung thêm những ki Ān thứcnhằm hoàn thiện đA án tôt hơn, đáp ứng đưFc những mục tiêu đA án
5 Bố cục của đề tài
Sau phRn Mở đRu, báo cáo đưFc trPnh bày 03 chương, cụ thểnhư sau:
Chương 1 Tổng quan vG đG tài
Chương 2 Phân tích thi Āt k Ā Website
Chương 3.Xây dựng Website
Cu Āi cùng là K Āt lu n và Tài liệu tham khảo liên quan đ Ān đGtài
Trang 11Thiết kế website forum 3
Chương 1 TỔNG QUAN VỀ ĐỀ TÀI
1 Tổng quan về Forum trực tuyến
1.1 Khái niệm về Forum trực tuyến
Forum trực tuy Ān là một hPnh thức truyGn thông và tương tácqua m愃⌀ng internet, cho phép ngư>i dùng thảo lu n, chia sẻ thông tin
và giao ti Āp với nhau trong một cộng đAng trực tuy Ān Nó cung cấpmột nGn tảng cho ngư>i dùng để đăng bài vi Āt, bPnh lu n và tham giavào các cuộc thảo lu n trên các chQ đG khác nhau
Các thành viên trong một forum trực tuy Ān có thể t愃⌀o ra cácchQ đG mới, đăng bài vi Āt, trả l>i bài vi Āt cQa ngư>i khác và thảo lu nvới nhau Các cuộc thảo lu n thư>ng đưFc tổ chức thành các diễnđàn hoặc các danh mục khác nhau, dựa trên các chQ đG cụ thể.Ngư>i dùng có thể theo dõi các diễn đàn và tham gia vào các cuộctrò chuyện quan tâm cQa họ
Forum trực tuy Ān cung cấp một nGn tảng mở và không địnhhướng theo th>i gian thực, cho phép ngư>i dùng đăng bài và nh nphản hAi từ các thành viên khác trong cộng đAng Nó t愃⌀o ra một môitrư>ng tương tác, khuy Ān khích trao đổi 礃Ā ki Ān, chia sẻ thông tin vàxây dựng m Āi quan hệ trong cộng đAng trực tuy Ān
1.2 Các đặc trưng của Forum trực tuyến
Giao diện đa d愃⌀ng: Forum trực tuy Ān thư>ng cung cấp giaodiện đa d愃⌀ng để ngư>i dùng có thể dễ dàng tương tác và tham giavào các cuộc thảo lu n Giao diện có thể đưFc tùy chNnh để phù hFpvới nhu cRu và phong cách cQa cộng đAng
Diễn đàn và chQ đG: Forum trực tuy Ān đưFc tổ chức thành cácdiễn đàn và chQ đG khác nhau, gi甃Āp ngư>i dùng tPm ki Ām và thamgia vào những cuộc thảo lu n mà họ quan tâm Các diễn đàn và chQ
đG thư>ng đưFc phân lo愃⌀i và sắp x Āp một cách logic và cấu tr甃Āc.Bài vi Āt và phản hAi: Ngư>i dùng có thể đăng bài vi Āt và trả l>ibài vi Āt cQa ngư>i khác trong forum ĐiGu này t愃⌀o ra một môi trư>ng
Trang 12Thiết kế website forum 4 tương tác, cho phép trao đổi 礃Ā ki Ān, chia sẻ thông tin và giao ti Āp vớinhau.
Hệ th Āng quản l礃Ā thành viên: Forum trực tuy Ān thư>ng có hệ
th Āng đăng k礃Ā thành viên, cho phép ngư>i dùng t愃⌀o tài khoản riêng
và quản l礃Ā thông tin cá nhân Thành viên có thể theo dõi các diễnđàn, theo dõi bài vi Āt và tương tác với nhau
Hệ th Āng quản l礃Ā bài vi Āt: Forum trực tuy Ān cung cấp các công
cụ quản l礃Ā bài vi Āt, bao gAm việc chNnh sYa, xóa, đánh dấu là yêuthích, đánh giá và báo cáo bài vi Āt không phù hFp ĐiGu này gi甃Āpduy trP tính chất chất lưFng và an toàn cQa diễn đàn
Tính năng tPm ki Ām: Forum trực tuy Ān thư>ng có tính năng tPm
ki Ām nội dung, gi甃Āp ngư>i dùng dễ dàng tPm ki Ām thông tin cụ thểhoặc các cuộc thảo lu n liên quan đ Ān chQ đG mPnh quan tâm
Tương tác xD hội: Forum trực tuy Ān t愃⌀o ra một môi trư>ng xDhội trực tuy Ān, cho phép ngư>i dùng xây dựng m Āi quan hệ, t愃⌀o k Āt
n Āi và chia sẻ ki Ān thức với nhau ĐiGu này t愃⌀o ra sự gắn k Āt trongcộng đAng và th甃Āc đẩy ho愃⌀t động thảo lu n và chia sẻ thông tin
2 Công cụ sử dụng
2.1 Khái quát về HTML
2.1.1 Khái quát
HTML (vi Āt tắt cQa từ Hypertext Markup Language, hay là
“Ngôn ngữ Đánh dấu Siêu văn bản”) là một ngôn ngữ đánh dấu đưFcthi Āt k Ā ra để t愃⌀o nên các trang web trên World Wide Web Nó có thểđưFc trF gi甃Āp bởi các công nghệ như CSS và các ngôn ngữ kịch bản
gi Āng như JavaScript
Các trPnh duyệt web nh n tài liệu HTML từ một web server hoặcmột kho lưu trữ cục bộ và render tài liệu đó thành các trang web đaphương tiện HTML mô tả cấu tr甃Āc cQa một trang web vG mặt ngữnghĩa và các dấu hiệu ban đRu đưFc bao gAm cho sự xuất hiện cQatài liệu Các phRn tY HTML là các kh Āi xây dựng cQa các trang HTML.Với cấu tr甃Āc HTML, hPnh ảnh và các đ Āi tưFng khác như biểu mẫutương tác có thể đưFc nh甃Āng vào trang đưFc hiển thị HTML cung cấpmột phương tiện để t愃⌀o tài liệu có cấu tr甃Āc bằng cách biểu thị ngữ
Trang 13Thiết kế website forum 5 nghĩa cấu tr甃Āc cho văn bản như headings, paragraphs, lists, links,quotes và các mục khác.
Các phRn tY HTML đưFc phân định bằng các tags, đưFc vi Ātbằng dấu ngoặc nhọn Các tags như và giới thiệu trực ti Āp nội dungvào trang Các tags khác như bao quanh và cung cấp thông tin vGvăn bản tài liệu và có thể bao gAm các thẻ khác làm phRn tY phụ.Các trPnh duyệt không hiển thị các thẻ HTML, nhưng sY dụng ch甃Āng
để diễn giải nội dung cQa trang
HTML có thể nh甃Āng các chương trPnh đưFc vi Āt bằng scriptingnhư JavaScript, điGu này ảnh hưởng đ Ān hành vi và nội dung cQa cáctrang web Việc bao gAm CSS xác định giao diện và b Ā cục cQa nộidung World Wide Web Consortium (W3C), trước đây là đơn vị bảo trPHTML và là ngư>i duy trP hiện t愃⌀i cQa các tiêu chuẩn CSS, đD khuy Ānkhích việc sY dụng CSS trên HTML trPnh bày rõ ràng kể từ năm 1997
2.1.2 Ưu, nhược điểm
Ưu điểm:
- Ngôn ngữ đưFc sY dụng rộng lớn này có rất nhiGu nguAn tàinguyên hỗ trF và cộng đAng sY dụng cực lớn
- SY dụng mưFt mà trên hRu h Āt mọi trPnh duyệt
- Có quá trPnh học đơn giản và trực ti Āp
- Chuẩn chính cQa web đưFc v n hành bởi World Wide WebConsortium (W3C)
- Dễ dàng tích hFp với các ngôn ngữ backend như PHP MDnguAn mở và hoàn toàn miễn phí
- Markup gọn gàng và đAng nhất
Nhược điểm:
- Nó có thể thực thi một s Ā logic nhất định cho ngư>i dùng
- VP Khó kiểm soát cảnh thực thi cQa trPnh duyệt (ví dụ: nhữngtrPnh duyệt cũ không render đưFc tag mới)
- ĐưFc dùng chQ y Āu cho web tĩnh
- Đ Āi với các tính năng động, b愃⌀n cRn sY dụng JavaScript hoặcngôn ngữ backend bên thứ 3 như PHP
- V y, hRu h Āt các trang đGu cRn đưFc t愃⌀o riêng biệt, kể cả khi
Trang 14Thiết kế website forum 6
- Một s Ā trPnh duyệt ch m hỗ trF tính năng mới
2.2 Khái quát về CSS
2.2.1 Khái quát
CSS là vi Āt tắt cQa Cascading Style Sheets, một ngôn ngữ thi Āt
k Ā đơn giản, xY l礃Ā một phRn giao diện cQa trang web CSS mô tảcách các phRn tY HTML hiển thị trên màn hPnh và các phương tiệnkhác SY dụng CSS, b愃⌀n có thể kiểm soát màu chữ, cJ chữ, kiểu chữ,khoảng cách giữa các đo愃⌀n văn bản, kích thước cQa các thành phRntrên trang web, màu nGn, thi Āt k Ā b Ā cục và cách trang web hiển thịtrên những màn hPnh có kích thước khác nhau cũng như hàng lo愃⌀thiệu ứng khác CSS rất hữu ích và tiện lFi Nó có thể kiểm soát tất cảcác trang trên một Website
2.2.2 Ưu, nhược điểm
- CSS gi甃Āp khả năng tải trang nhanh chóng: Đặc trưng cQa CSSkhi sY dụng là ít mD hơn Bởi th Ā mà th>i gian tải xu Āng nhanhchóng, gi甃Āp ti Āt kiệm th>i gian đáng kể Khi vi Āt đưFc một quy tắcCSS cQa một thẻ cụ thể và l甃Āc này ch甃Āng ta có thể áp dụng nó chomọi lRn xuất hiện ti Āp theo cQa thẻ đó, đAng th>i hoàn toàn khôngcRn ti Ān hành thay đổi thuộc tính cQa thẻ HTML
- Dễ dàng khi thực hiện bảo trP: Khi cRn ch甃Āng ta chN cRn thayđổi một kiểu và mọi thành phRn trong tất cả những Website thP l甃Ācnày CSS sẽ hỗ trF c p nh t hoàn toàn tự động
- CSS sở hữu thuộc tính rộng CSS đưFc đánh giá cao nh> sở hữunhững thuộc tính rộng hơn n Āu đánh giá và so sánh với HTML
- Khả năng tương thích t Āt: Khả năng tương thích với nhiGuthi Āt bị cũng là ưu điểm cQa CSS Cùng sY dụng một tài liệu HTMLsong với nhiGu phiên bản Website khác nhau đưFc trPnh bày ở từngthi Āt bị di động đGu đưFc hỗ trF t Āt, có độ tương thích cao
Trang 15Thiết kế website forum 7
Nhược điểm:
- CSS ho愃⌀t động khác biệt cho từng trPnh duyệt: Với những thayđổi ban đRu cQa CSS trên một Website rất dễ dàng Tuy nhiên, khithay đổi đD đưFc thực hiện đòi h•i ch甃Āng ta phải xác nh n đưFc tínhtương thích khi CSS hiển thị hiệu ứng thay đổi tương tự cho từngtrPnh duyệt ĐiGu này xuất hiện do CSS sẽ ho愃⌀t động khác biệt chotừng trPnh duyệt cụ thể
- Khá khó khăn cho ngư>i mới: Ngôn ngữ l p trPnh phát triển đad愃⌀ng và vô cùng ph甃Āc t愃⌀p, đặc biệt là khó khăn với những ngư>i mớibắt đRu Bởi th Ā, với nhiGu cấp độ cQa CSS thP việc tPm hiểu, có thểnắm bắt để sY dụng càng trở nên khó khăn hơn
- Định d愃⌀ng cQa web có khả năng gặp rQi ro: CSS là hệ th Āngdựa trên văn bản mở nên việc truy c p khá dễ dàng ĐiGu này khi Ānđịnh d愃⌀ng toàn bộ cQa web hoàn toàn có thể chịu tổn thương, gặpgián đo愃⌀n khi có hành động, hoặc tai n愃⌀n nào xảy ra với tệp L甃Āc này
nó sẽ yêu cRu truy c p đọc hoặc ghi vào Website dự định để có thểghi đV lên đưFc các thay đổi
2.3 Khái quát về Boostrap
2.3.1 Khái quát
Bootstrap là một front-end framework mD nguAn mở miễn phígi甃Āp quá trPnh phát triển web đưFc nhanh và dễ dàng hơn Bootstrapbao gAm các mẫu thi Āt k Ā dựa trên HTML và CSS như typography,forms, buttons, tables, navigation, modals, image carousels… cũngnhư các plugin JavaScript tùy chọn B愃⌀n có thể t愃⌀o các giao diệnresponsive design cho các thi Āt bị khác nhau với Bootstrap
2.3.2 Ưu, nhược điểm
Ưu điểm:
- Dễ sY dụng: Bất kỳ ai có ki Ān thức cơ bản vG HTML và CSSđGu có thể bắt đRu sY dụng Bootstrap
- Các tính năng đáp ứng (Responsive features): responsive CSScQa Bootstrap điGu chNnh cho điện tho愃⌀i, máy tính bảng và máy tính
để bàn
- Cách ti Āp c n Mobile-first: Trong Bootstrap 3, mobile-firststyles là một phRn cQa core framework
Trang 16Thiết kế website forum 8
- Khả năng tương thích trPnh duyệt: Bootstrap tương thích vớitất cả các trPnh duyệt hiện đ愃⌀i (Chrome, Firefox, Internet Explorer,Edge, Safari và Opera)
Nhược điểm:
- Nặng, t Āc độ t Āi ưu chưa cao: Đây là một điểm trừ khá lớn choBootstrap, bởi framework cQa nó ôm quá nhiGu chức năng tổng dunglưFng lên tới gRn 7MB
- Chưa hoàn thiện: Hiện nay, Bootstrap vẫn đang ti Āp tục pháttriển chưa có đRy đQ các thư viện cRn thi Āt để t愃⌀o ra một frameworkhoàn hảo
- NhiGu code thừa: Bootstrap cung cấp gRn như đRy đQ nhữngtính năng cơ bản cQa một trang web responsive hiện đ愃⌀i Tuy nhiên,mặt trái cQa việc này là Website cQa b愃⌀n sẽ phải tải thêm rất nhiGudòng code không cRn thi Āt khi mà b愃⌀n chN cRn chưa đ Ān 10% những
gP Bootstrap cung cấp
- H愃⌀n ch Ā sáng t愃⌀o: Bootstrap không khuy Ān khích sáng t愃⌀o:ChN cRn nhét Bootstrap vào themes sẵn có, gọi ra cái .class từstylesheet và th Ā là b愃⌀n đD có một trang web responsive Tuy v ycác theme này sẽ khi Ān b愃⌀n gò bó và khó sáng t愃⌀o hơn
2.4 Khái quát về JavaScript
2.4.1 Khái quát
Javascript chính là một ngôn ngữ l p trPnh web rất phổ bi Ānngày nay Javascript đưFc tích hFp đAng th>i nh甃Āng vào HTML để hỗtrF cho Website trở nên s Āng động hơn Ch甃Āng cũng đóng vai tròtương tự như một phRn cQa Website, cho phép Client-side Script từngư>i dùng tương tự máy chQ (Nodejs) để t愃⌀o ra những Websiteđộng
2.4.2 Ưu, nhược điểm
Trang 17Thiết kế website forum 9
- JS có thể ho愃⌀t động ở trên nhiGu nGn tảng và các trPnh duyệtweb khác nhau
- ĐưFc các chuyên gia đánh giá là một lo愃⌀i ngôn ngữ l p trPnhnhẹ và nhanh hơn nhiGu so với các ngôn ngữ l p trPnh khác
- JS còn có thể đưFc gắn trên một s Ā các element hoặc nhữngevents cQa các trang web
- Những Website có sY dụng JS thP ch甃Āng sẽ gi甃Āp cho trang web
đó có sự tương tác cũng như tăng thêm nhiGu trải nghiệm mới chongư>i dùng
- Ngư>i dùng cũng có thể t n dụng JS với mục đích là để kiểmtra những input thay vP cách kiểm tra thQ công thông qua ho愃⌀t độngtruy xuất database
- Giao diện cQa ứng dụng phong ph甃Ā với nhiGu thành phRn nhưDrag and Drop, Slider để cung cấp đ Ān cho ngư>i dùng một RichInterface (giao diện giàu tính năng)
- Gi甃Āp thao tác với ngư>i dùng phía Client và tách biệt giữa cácClient với nhau
Nhược điểm:
- JS Code Snippet khá lớn
- JS dễ bị các hacker và scammer khai thác hơn
- JS cũng không có khả năng đa luAng hoặc đa d愃⌀ng xY l礃Ā
- Có thể đưFc dùng để thực thi những mD độc ở trên máy tínhcQa ngư>i sY dụng
- Những thi Āt bị khác nhau có thể sẽ thực hiện JS khác nhau, từ