Báo cáo môn dự Án công nghệ thông tin 1 tìm hiểu quy trình xây dựng một website và xây dựng một website tin tức bằng wordpress

Ngoài ra còn áp dụng các kiến thức này để tạo ra mộtwebsite tin tức để người dùng có thể vào xem được các tin tức mới sử dụng WordPress.Mục đích em tạo website này để trau dồi thêm kiến

BÁO CÁO MÔN

DỰ ÁN CÔNG NGHỆ THÔNG TIN 1

TÌM HIỂU QUY TRÌNH XÂY DỰNG MỘT WEBSITE VÀ XÂY DỰNG MỘT WEBSITE TIN TỨC BẰNG WORDPRESS

Người hướng dẫn: PHẠM THỊ CẨM **** Người thực hiện: NGUYỄN NGỌC ĐĂNG QUANG – ********

Lớp : 19****** Khoá : ** THÀNH PHỐ HỒ CHÍ MINH, NĂM 2023

BÁO CÁO MÔN

DỰ ÁN CÔNG NGHỆ THÔNG TIN 1

TÌM HIỂU QUY TRÌNH XÂY DỰNG MỘT WEBSITE VÀ XÂY DỰNG MỘT WEBSITE TIN TỨC BẰNG WORDPRESS

Người hướng dẫn: PHẠM THỊ CẨM **** Người thực hiện: NGUYỄN NGỌC **** ***** – ********

Lớp : 19****** Khoá : ** THÀNH PHỐ HỒ CHÍ MINH, NĂM 2023

LỜI CẢM ƠN

Em xin gửi lời cảm ơn đến công ty Cenvisco, chị Giang, anh Thìn cũng như mọingười trong công ty đã tạo cho em một môi trường học tập, trải nghiệp các hoạt độngthực tế khi đi làm Em đã có quãng thời gian tuyệt vời với công ty và mọi người, emxin chân thành cảm ơn

ĐỒ ÁN ĐƯỢC HOÀN THÀNH TẠI TRƯỜNG ĐẠI HỌC TÔN ĐỨC THẮNG

Tôi xin cam đoan đây là sản phẩm đồ án của riêng tôi và được sự hướng dẫn củachị Phạm Thị Cẩm Giang Các nội dung nghiên cứu, kết quả trong đề tài này là trungthực và chưa công bố dưới bất kỳ hình thức nào trước đây Những số liệu trong cácbảng biểu phục vụ cho việc phân tích, nhận xét, đánh giá được chính tác giả thu thập từcác nguồn khác nhau có ghi rõ trong phần tài liệu tham khảo

Ngoài ra, trong đồ án còn sử dụng một số nhận xét, đánh giá cũng như số liệucủa các tác giả khác, cơ quan tổ chức khác đều có trích dẫn và chú thích nguồn gốc

Nếu phát hiện có bất kỳ sự gian lận nào tôi xin hoàn toàn chịu trách nhiệm

về nội dung đồ án của mình Trường đại học Tôn Đức Thắng không liên quan đến

những vi phạm tác quyền, bản quyền do tôi gây ra trong quá trình thực hiện (nếu có)

TP Hồ Chí Minh, ngày tháng năm

Tác giả (ký tên và ghi rõ họ tên)

Nguyễn Ngọc **** *****

PHẦN XÁC NHẬN VÀ ĐÁNH GIÁ CỦA GIẢNG VIÊNPhần xác nhận của GV hướng dẫn

_ _ _ _ _ _ _

Tp Hồ Chí Minh, ngày tháng năm (kí và ghi họ tên)

Phần đánh giá của GV chấm bài

_ _ _ _ _ _ _

Tp Hồ Chí Minh, ngày tháng năm (kí và ghi họ tên)

TÓM TẮT

Báo cáo tìm hiểu về quy trình sản xuất một website từ công đoạn lên ý tưởng,thu thập yêu cầu cho đến các công đoạn thiết kế, triển khai, tối ưu sản phẩm và phânphối sản phẩm ra thị trường Ngoài ra còn áp dụng các kiến thức này để tạo ra mộtwebsite tin tức để người dùng có thể vào xem được các tin tức mới sử dụng WordPress.Mục đích em tạo website này để trau dồi thêm kiến thức cũng như thực hành những thứ

mà em học được trong quá trình thực tập

MỤC LỤC

DANH MỤC CÁC BẢNG BIỂU, HÌNH VẼ, ĐỒ THỊ DANH MỤC HÌNH

Hình 1.1: Logo CÔNG TY TNHH CENVISCO 4

Hình 1.2 Logo WordPress 5

Hình 2: Giao diện trang bảng tin của wordpress 12

Hình 3: Admin bar (Thanh admin) 12

Hình 4: Sidebar Menu (Menu thanh bên) 14

Hình 5.1: Thiết lập chủ đề giao diện 24

Hình 5.2: Đặt logo cho website 25

Hình 5.3: Thêm chuyên mục 25

Hình 5.4: Các plugin đã cài đặt 26

Hình 5.5: Các trang đã tạo 27

Hình 5.5: Menu chính đã tạo 27

Hình 5.6: Giao diện trang thêm bài viết mới 28

Hình 5.6: Quyền của nhóm quyền Admin 29

Hình 5.7: Quyền của nhóm quyền Biên tập viên 29

Hình 5.8: Quyền của nhóm quyền Phóng viên 30

Hình 5.9: Quyền của nhóm quyền Đọc giả 30

Hình 5.10: Tạo tài khoản để test quyền Phóng viên 31

Hình 5.11: Giao diện quản lý tất cả bài viết ở quyền Phóng viên 32

Hình 5.12: Giao diện Thêm bài viết mới ở quyền Phóng viên 32

Hình 5.13: Giao diện chỉnh sửa bài viết của mình ở quyền Phóng viên 33

Hình 5.14: Tạo tài khoản để test quyền Biên tập viên 33

Hình 5.15: Giao diện quản lý bài viết của quyền Biên tập viên 34

Hình 5.16: Biên tập viên có thể đăng bài ở trạng thái chờ duyệt được gửi lên từ Phóng viên 34

Hình 5.17: Tạo tâì khoản với quyền Đọc giả 35Hình 5.18: Giao diện tài khoản có quyền đọc giả 35Hình 5.19: Giao diện quản lý của tài khoản với quyền admin 36

DANH MỤC BẢNG

Bảng 1: các phiên bản của WordPress và tên nhạc sĩ được dùng làm tên phiên bản và ngay phát hành của phiên bản 7

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

1.1 Công ty TNHH Cenvisco

Tên doanh nghiệp: CÔNG TY TNHH CENVISCO

Tên quốc tế: Cenvisco Co., Ltd

1.1.2 Thành tựu của Công ty TNHH Cenvisco

Bên cạnh đó công ty cũng đã thực hiện thành công nhiều dự án Web & App chothị trường quốc tế như Úc, Mỹ, Canada, Châu Âu, Nhật, Hàn Quốc, Thái Lan,Singapore,

1.1.3 Một số sản phẩm của Công ty TNHH Cenvisco

 Nhận outsource chỉnh sửa, thêm module chức năng cho website nôngnghiệp “ttcagris” Thực hiện chỉnh sửa giao diện, code module chức năngbanner của trang chủ và quản lý tin tức.

 Thực hiện website bán trả góp xe hơi của tfsvn Code chức năng dự toánvay, các gói sản phẩm vay, các trang của website

 Website tích hợp với ứng dụng di động để quản lý tro cốt, nhân thân gửi

Hình 1.2 Logo WordPress1.2.2 Lịch sử phát triển của WordPress

b2/cafelog, thường được biết đến với cái tên đơn giản hơn là b2 hay cafelog làtiền thân của WordPress b2/cafelog theo ước lượng đã được sử dụng ở khoảng 2000blog trong tháng 5 năm 2003 Nó cũng được viết bằng ngôn ngữ lập trình PHP để dùng

với MySQL bởi Michel Valdrighi, người đã trở thành nhà phát triển chính củaWordPress hiện nay Mặc dù WordPress là hậu duệ chính thức nhưng một dự án khác,b2evolution, cũng đang được song song phát triển.

Vào năm 2004, thời hạn cấp phép của gói sản phẩm cạnh tranh Movable Type bịthay đổi bởi Six Apart, và rất nhiều người dùng của nó chuyển sang sử dụngWordPress, tạo nên một bước ngoặt lớn trong sự phát triển và phổ biến của WordPress.Năm 2007, WordPress giành giải thưởng Packt Open Source CMS Năm 2009.WordPress dẫn đầu về mã nguồn CMS tốt nhất

Vào ngày 06 tháng 12 năm 2018, WordPress ra mắt phiên bản 5.0 với cải tiếnlớn, giới thiệu Trình soạn thảo block mang tên Gutenberg giúp tùy chỉnh bố cục bàiviết phong phú và phức tạp hơn Có nhiều cuộc tranh cãi về sự ra mắt của Gutenberg,bao gồm cả phong trào tách riêng đến từ nhiều lập trình viên không muốn sử dụng tínhnăng này

Bảng 1: các phiên bản của WordPress và tên nhạc sĩ được dùng làm tên phiênbản và ngay phát hành của phiên bản

5.4 Nat Adderley 31 Tháng Ba, 20205.3 Rahsaan Roland Kirk 12 Tháng Mười Một, 2019

2.8 Chet Baker 11 Tháng Sáu, 2009

 Dễ sử dụng: WordPress rất dễ làm quen và sử dụng với bất kỳ đối tượng

nào Giao diện ưa nhìn, dễ hiểu và đơn giản nên người dùng chhhỉ cần một ítthời gian là người dùng đã quen với thao tác

 Dễ quản lý nội dung: Các danh mục trong WordPress được sắp xếp dễ hiểu,

có trật tự và khoa học vì thế sẽ giúp người dùng thuận tiện hơn trong việcquản lý nội dung trang web

 Tiện ích và công cụ hỗ trợ: Nhờ vào các công cụ được thiết lập sẵn nên

giúp tối ưu hoá SEO nhanh và hiệu quả hơn

 Đa dạng ngôn ngữ: WordPress hỗ trợ đa dạng ngôn ngữ khác nhau và có cả

Tiếng Việt, điều này giúp WordPress kết nối được với nhiều đối tượng ngườidùng khác nhau

 Khả năng tuỳ chỉnh cao: WordPress cho phép người dùng thiết kế và tuỳ

chỉnh web theo ý muốn và sở thích của mình WordPress có rất nhiều chủ đề(theme) được thiết kế sẵn với nhiều màu sắc và thiết kế khác nhau, ngườidùng có thể chọn sử dụng chủ đề phù hợp với ý muốn của mình

Nhược điểm:

 Bảo mật: WordPress được rất nhiều người dùng sử dụng nên việc trở thành

đối tượng tấn công cho các tin tặc là không thể tránh khỏi Trong quá khứ,WordPress đã bị tấn công nhiều lần vì bị khai thác một số lỗ hổng bảo mật

để xâm nhập vào hệ thống

 Tốc độ: Mặc dù WordPress có thể được tối ưu hoá để tăng tốc độ tải trang

nhưng trong một số trường hợp nếu không được cấu hình đúng thì tốc độ tảitrang có thể bị ảnh hưởng

 Quản lý plugin: WordPress có một hệ sinh thái plugin phong phú nhưng

việc quản lý các plugin sẽ trở nên rất phức tạp Nếu sử dụng quá nhiềuplugin không cần thiết hoặc có xung đột sẽ làm giảm hiệu suất của trangweb

 Tuỳ chỉnh hạn chế: Mặc dù người dùng tuỳ chỉnh giao diện và chức năng

của WordPress bằng cách sử dụng chủ đề (theme) và plugin nhưng trongmột số trường hợp thì người dùng có thể bị hạn chế về các tuỳ chỉnh do cácbên làm theme cung cấp Điều này vô tình hạn chế khả năng thiết ế và pháttriển trang web theo ý muốn

 Phiên bản: Người dùng WordPress vì một số lí do mà vẫn chọn sử dụng các

phiên bản cũ Việc này sẽ tồn tại nhiều rủi ro như phiên bản cũ sẽ khôngtương thích với phiên bản mới hoặc các plugin mới của WordPress; ngoài ranhững lỗ hổng ở phiên bản cũ có thể bị kẻ xấu lợi dụng để tấn công

1.2.3 Các chức năng mà WordPress cung cấp

Vì WordPress ban đầu được tạo ra chủ yếu để viết blog nên các chức năng chính

mà nó cung cấp rất thuận tiện và đầy đủ để tạo một blog cho riêng mình Các chứcnăng mà WordPress có thể làm bao gồm: quản lý tài khoản (thêm, xoá, sửa, xem), quản

lý bài viết (thêm xoá, sửa, xem, đăng), quản lý giao diện website (chỉnh sửa, thêm mới)

 Quản lý tài khoản: Ngoài việc thêm sửa xoá tài khoản như các CMS

khác cung cấp, WordPress còn hỗ trợ thêm nhiều tính năng khác như: xácthực 2 yếu tố (two-factor authentication), cài đặt giới hạn đăng nhập,quản lý quyền truy cập

Khi bật xác thực 2 yếu tố thì lúc đăng nhập, người dùng sẽ phảinhập mã xác nhận được gửi về số điện thoại hoặc email; điều này giúpbảo vệ tài khoản người dùng ngay cả khi mật khẩu của họ bị lộ Tính năng giới hạn số lần đăng nhập thất bại của người dùng hoạtđộng theo cơ chế là nếu nhập sai mật khẩu quá nhiều lần thì tài khoản đó

sẽ bị khoá, cần phải được admin hoặc tài khoản có quyền mới thực hiện

mở khoá được; điều này có thể ngăn chặn việc hacker cố gắng dò mậtkhẩu của người dùng

Tính năng quản lý quyền truy cập cho phép phân quyền ngườidùng được phép truy cập vào các phần khác nhau của website, ví dụ nhưadmin cấp quyền cho một tài khoản là có thể thêm bài viết nhưng chỉđược gửi để duyệt chứ không được phép đăng

 Quản lý bài viết: Ngoài việc thêm, sửa, xoá các bài viết như CMS thông

thường thì WordPress còn cho phép người dùng tạo và phân loại bài viếttheo thẻ, theo chủ đề Ví dụ để quản lý một bài viết với chủ đề du lịch thì

có thể gắn thẻ nó là: du lịch, Việt Nam, du lịch nghỉ dưỡng, khám phá,…

Và cùng lúc đó đặt nó trong chủ đề liên quan như du lịch Ngoài ra, trong

bài viết cũng có thể chèn thêm hình, âm thanh và video để làm bài viếtsinh động hơn

 Quản lý giao diện website: WordPress hỗ trợ người dùng tuỳ chỉnh nội

dung website một cách dễ dàng Có thể chỉnh sửa, thay đổi giao diệnwebsite bằng nhiều cách: Sử dụng chủ đề (theme), thêm plugin hoặc canthiệp chỉnh sửa bằng mã nguồn

Việc sử dụng chủ đề cho phép người dùng chọn chủ đề phù hợpvới mong muốn của mình nhất giữa hàng nghìn chủ đề có sẵn trênWordPress

Chức năng plugin cung cấp thêm công cụ do những người kháctạo nên, cho phép người dùng tối ưu hoá website mà gần như không cầnphải đụng đến một dòng code nào, vì mọi thứ đã có sẵn chỉ cần tải xuống

và sử dụng

Ngoài ra nếu người dùng là lập trình viên muốn thay đổi giao diệnwebsite bằng cách thao tác với source code thì vẫn có thể làm được bằngcách truy cập vào source và sửa code như các CMS khác

 Quản lý bình luận: WordPress cho phép người dùng quản lý bình luận

trên blog một cách đơn giản, người dùng có thể xem sửa xoá bình luậnchỉ bằng vài nút bấm

 Bảo mật: WordPress thường xuyên tung ra các bản vá hoặc cập nhật mới

để bảo vệ website của người dùng khỏi những hacker

1.3 Cấu trúc, giao diện quản lý của WordPress

1.3.1 Dashboard (Bảng tin)

Hình 2: Giao diện trang bảng tin của wordpress

Dashboard của WordPress cho phép truy cập, chỉnh sửa tất cả mọi thứ trênwebsite Đây là trang mặc định sau khi người dùng thực hiện thao tác đăng nhập Nó sẽhiển thị mọi thứ đang diễn ra với website của người dùng Người dùng có thể kiểm tratrạng thái, bình luận, cài đặt của website

Các nội dung quản lý trên dashboard đều được chia thành các Widget, cácwidget này có thể được ẩn hoặc hiện tự động dựa trên phân quyền của tài khoản 1.3.2 Admin bar (Thanh admin)

Hình 3: Admin bar (Thanh admin)Thanh được hiển thị ở góc trên cùng là thanh admin, nó được gọi như vậy là vìthanh này chỉ hiển thị khi login bằng tài khoản admin Nó chứa một số icon như sau(tính theo thứ tự từ trái sang phải):

 Icon WordPress: chứa các công tin về WordPress đang dùng như phiênbản, tài liệu, giới thiệu, phản hồi.

 Tin tức tổng hợp: là nơi hiển thị tên website mà người dùng đặt, khi clickvào sẽ được điều hướng đến trang chủ của website

 Icon thông báo: Số lượng thông báo sẽ được hiện ở đây, hiện tại đang có

4 thông báo Các thông báo thường là về bản cập nhật mới củaWordPress, các plugin có cập nhật,…

 Icon comment: Hiển thị số lượng bình luận trên website, blog mà ngườidùng có thể chỉnh sửa, phản hồi hoặc xoá

 Icon thêm mới: Có thể click để thêm trang, bài viết, tập tin hoặc thậm chí

là thêm tài khoản mới

 Tên admin: hiển thị ở bên phải ngoài cùng của thanh admin, hiển thị têntài khoản đang dùng Người dùng có thể chỉnh sửa thông tin cá nhân trêntài khoản bằng cách click vào đó

1.3.2 Sidebar Menu (Menu Thanh bên)

Hình 4: Sidebar Menu (Menu thanh bên)Hiển thị các nhóm chức năng mà tài khoản đang đăng nhập có thể thao tác Cóthể rê chuột lên từng mục để xem các chức năng con bên trong từng mục Với tàikhoản webmaster có quyền admin trên toàn bộ chức năng của website sidebar mới hiểnthị nhiều như vậy, nếu tài khoản được phân quuyền thấp hơn sẽ hiển thị ít chức nănghơn và ngược lại

Các nội dung trong menu (từ trên xuống dưới):

 Trang chủ (Dashboard): hiển thị các bản cập nhật hiện có

 Bài viết: Quản lý bài viết trên website của người dùng

 Media: Quản lý thư viện tập tin như ảnh, video, âm thanh trên websitecủa người dùng.

 Trang: Tạo và quản lý trang

 Bình luận: Hiển thị tất cả bình luận tên website của người dùng

 Giao diện: Quản lý giao diện của website

 Plugin: Cài đặt, quản lý các plugin cho website của người dùng

 Thành viên: Hiển thị tất cả tài khoản người dùng trên hệ thống, cho phépchỉnh sửa tài khoản bằng cách sửa tên và mật khẩu tài khoản

 Công cụ: Các công cụ hỗ trợ của wordPress hỗ trợ người dùng như nhậpxuất dữ liệu, kiểm tra tình trạng website, …)

 Cài đặt: Cài đặt của website như đường dẫn, quyền riêng tư,…

CHƯƠNG 2 – QUY TRÌNH LÀM MỘT WEBSITE

2.1 Thu thập yêu cầu

Là giai đoạn đầu của dự án, cho phép đội ngũ phát triển có cái nhìn tổng quanwebsite cần làm Các nội dung chính cần đạt được ở bước này bao gồm:

 Nghiên cứu mục tiêu: Hiểu được mục tiêu của website, biết được thôngtin về lĩnh vực hoạt động, đối tượng khách hàng và mục tiêu kinh doanh

 Phân tích yêu cầu chức năng: Xác định các chức năng cần có cho website(Ví dụ: Đăng ký, đăng nhập, phân quyền truy cập, tìm kiếm, chia sẻ nộidung, bình luận,…)

 Đưa ra các ý tưởng về thiết kế giao diện: Đưa ra các ý tượng phù hợp vớiyêu cầu để thiết kế giao diện, bố cục, cấu trúc trang và trải nghiệm ngườidùng để phục vụ cho việc thiết kế mockup và wireframe

 Xác định mô hình phát triển của dự án: Việc chọn trước mô hình pháttriển của dự án phụ thuộc vào tính chất, yêu cầu của khách hàng cũngnhư tính đặc thù của dự án Dựa theo các thông tin trên mà đưa ra mô

hình phù hợp để tiết kiệm thời gian và chi phí cho việc phát triển và tránhphát sinh vấn đề trong quá trình thực hiện.

2.2 Thiết kế giao diện

Là bước quan trọng tiếp theo ngay sau khi thu thập yêu cầu, cho phép đội ngũgiao tiếp và thống nhất về giao diện của website với khách hàng Các nội dung cần đạtđược trong bước này bao gồm:

 Tạo wireframe: Vẽ sơ đồ cấu trúc, xác định vị trí nội dung và các phần tửgiao diện trên website nhằm mục đích tạo ra một caáu trúc hợp lý đểngười dùng cảm thấy thoải mái, dễ sử dụng các tính năng của website

 Tạo mockup: Xây dựng prototype (bản mẫu thiết kế) thông qua các công

cụ như Photoshop, Sketch hoặc Figma để trực quan hoá giao diện, màusắc, Font chữ nhằm tạo ra bản mẫu thiết kế để người dùng thấy được saukhi phát triển thì website sẽ trông như thế nào

2.3 Hiện thực hoá giao diện

Bước này nhằm mục đích hiện thực hoá giao diện từ giai đoạn thiết kế sang giaodiện front end thực tế cho website Các nội dung cần đạt được trong bước này baogồm:

 Xác định công nghệ và công cụ thực hiện: Chọn các công cụ phù hợpnhư HTML, CSS, JavaScript và các công cụ CMS như WordPress,Joomla, Drupal hoặc các công cụ CMS khác

 Xây dựng giao diện: Chuyển đổi các thiết kế từ mockup và wireframethành mã HTML, CSS, JavaScript để tạo giao diện trực quan vầ có thểtương tác được