Tổng quan về công nghệ thông tin Đề tài thực hành thiết kế website dựa trên phần mềm wordpress

BỘ GIÁO DỤC VÀ ĐÀO TẠOTRƯỜNG QUẢN TRỊ VÀ KINH DOANH ĐẠI HỌC QUỐC GIA HÀ NỘI --- ---HỌC PHẦN: TỔNG QUAN VỀ CÔNG NGHỆ THÔNG TIN ĐỀ TÀI: THỰC HÀNH THIẾT KẾ WEBSITE DỰA TRÊN PHẦN MỀM W

BỘ GIÁO DỤC VÀ ĐÀO TẠO

TRƯỜNG QUẢN TRỊ VÀ KINH DOANH ĐẠI HỌC QUỐC GIA HÀ NỘI

-

 -HỌC PHẦN: TỔNG QUAN VỀ CÔNG NGHỆ THÔNG TIN

ĐỀ TÀI: THỰC HÀNH THIẾT KẾ WEBSITE DỰA

TRÊN PHẦN MỀM WORDPRESS

GIẢNG VIÊN GIẢNG DẠY: TS Tạ Văn Cánh

HỌC VIÊN: Nhóm Gia Đình Hạt Nhài

LỚP: HAT2

KHOA: Quản trị Nhân lực và Nhân tài

LỜI CAM ĐOAN Nhóm em xin cam đoan đề tài báo cáo Thực hành thiết kế website dựa trên phần mềm Wordpress là công trình nghiên cứu của nhóm chúng em Các trích

dẫn, tài liệu tham khảo, các số liệu thống kê được sử dụng trong bài nghiên cứu

là trung thực, có nguồn gốc rõ ràng và đáng tin cậy.

Nhóm chúng em xin bày tỏ lòng biết ơn tới các thầy cô giáo Trường Quản trị

và Kinh doanh - Đại học Quốc gia Hà Nội, các thầy cô của trường đã luôn tạo điều kiện cho nhóm trong quá trình học tập, nghiên cứu, giúp chúng em hoàn thành được bài báo cáo dự án này Đặc biệt, nhóm chúng em xin gửi lời cảm

ơn chân thành nhất tới Giảng viên Tạ Văn Cánh – giảng viên hướng dẫn đã luôn nhiệt tình chỉ bảo, dẫn dắt chúng em trong quá trình học tập và hoàn

thành bài báo cáo dự án.

Bài báo cáo không tránh gặp phải những thiếu sót nhất định, rất mong nhận được những ý kiến đóng góp đến từ các thầy cô để nhóm có kinh nghiệm hơn cho các bài báo cáo lần sau.

Chúng em xin trân trọng cảm ơn!

Nhóm tác giả Ngô Hà Vy Phạm Thanh Vân Nguyễn Minh Ngọc

Đỗ Nguyễn Hằng Nga Phan Thanh Hằng

1.2 Khách hàng mục tiêu

 Học sinh, sinh viên cần định hướng ngành học và nghề nghiệp

 Phụ huynh tìm kiếm các chương trình đào tạo phù hợp cho con trẻ

 Doanh nghiệp cần tổ chức cần đào tạo kỹ năng cho nhân viên

 Người đi làm muốn nâng cao kỹ năng giao tiếp hoặc thay đổi công việc.

1.3 Lợi ích mang lại cho xã hội

 Hỗ trợ người học tiếp cận với nền giáo dục chất lượng, phủ sóng Tiếng Anh đến toàn quốc

 Tạo cơ hội phát triển sự nghiệp bền vững

 Kết nối chuyên gia tư vấn với người học

 Ứng dụng công nghệ số trong giáo dục, tối ưu hóa quy trình tư vấn

1.4 Ý nghĩa của đề tài

 Ứng dụng công nghệ web vào lĩnh vực giáo dục

 Tăng khả năng tiếp cận thông tin giáo dục cho mọi đối tượng

 Thực hành xây dựng một website hoàn chỉnh trên nền tảng WordPress

II PHÂN TÍCH YÊU CẦU & LẬP KẾ HOẠCH

2.1 Yêu cầu và mục tiêu của dự án

 Xây dựng website hoàn chỉnh, thao tác dễ sử dụng

 Hỗ trợ tư vấn trực tuyến, tích hợp form đăng ký và AI Chatbot

 Tối ưu tốc độ tải trang và bảo mật cơ bản

 Thiết kế giao diện thân thiện, tương thích trên mọi thiết bị

 Đảm bảo tốc độ tải nhanh, hệ thống vận hành ổn định

2.2 Công nghệ sử dụng

 Nền tảng: WordPress

 Công cụ thiết kế: Figma, Elementor 

 Công cụ tối ưu: Rank Math SEO, Google Search Console, Google Maps

 Công cụ bảo mật: Wordfence Security, SSL

 Tích hợp: Google Forms, Tidio Chatbot

III LỘ TRÌNH THỰC HIỆN DỰ ÁN

Lên ý tưởng &

Giai đoạn Thời gian Nội dung công việc

Lên ý tưởng &

Thiết lập dự án 5-7/3/2025 Xác định chức năng website, nghiên cứu thị trườngvà công nghệ

Cài đặt nền tảng 8-13/3/2025 Đăng ký tên miền, mua hosting, cài đặt WordPress

và các plugin cần thiết

website trang nội dung, thêm tính năng như Chatbox, form

liên hệ, trang tin tức, tuyển dụng

Kiểm thử & tối

ưu

20-21/3/2025 Kiểm tra UX/UI, sửa lỗi, tối ưu tốc độ, bảo mật

website

IV QUÁ TRÌNH TRIỂN KHAI & GIẢI PHÁP KỸ THUẬT

4.1 Thiết kế giao diện (UI/UX)

 Sử dụng Figma để thiết kế wireframe trước khi triển khai

 Đảm bảo giao diện đơn giản, dễ sử dụng

 Thiết kế responsive, hỗ trợ đa thiết bị (desktop, mobile, tablet)

4.2 Lập trình & phát triển website

 Sử dụng WordPress và Elementor để dễ dàng quản lý nội dung

 Tích hợp form đăng ký tư vấn kết nối với Google Sheets

 Dùng Tidio AI Chatbox để tối ưu quá FAQs của khách hàng

 Bảo mật website với Wordfence Security và chứng chỉ SSL

V KẾT QUẢ ĐẠT ĐƯỢC

Độ tương thích trên thiết bị di động 85% 100%

VI KẾ HOẠCH BẢO TRÌ & NÂNG CẤP

6.1 Hướng dẫn sử dụng website

 Cách đăng bài, cập nhật nội dung

 Quản lý form đăng ký và dữ liệu khách hàng

 Theo dõi hiệu suất website bằng Google Analytics

6.2 Kế hoạch bảo trì website

 Hàng tháng: Cập nhật plugin, kiểm tra bảo mật, tối ưu hiệu suất

 Hàng quý: Backup dữ liệu, rà soát và cập nhật nội dung SEO

CHƯƠNG 2: MÔ TẢ DỰ ÁN

Tên dự án: Thiết kế Website Lexa., JSC

Người quản lý dự án: Gia đình Hạt nhài

Ngày bắt đầu dự án: 5/3/2025

Ngày kết thúc dự kiến: 21/3/2025

Dự án được chia thành 4 giai đoạn chính với các công việc cụ thể như sau:

I.GIAI ĐOẠN 1 – LÊN Ý TƯỞNG VÀ THIẾT LẬP DỰ ÁN

 Thời gian: 5/3/2025 - 7/3/2025 (3 ngày)

 Hoạt động chính:

 Nghiên cứu thị trường (5%):

 Khảo sát nhu cầu học tiếng Anh và các chứng chỉ tại Hà Nội

 Phân tích đối thủ cạnh tranh (VD: các trung tâm tiếng Anh lớn, nền tảng học trực tuyến)

 Thu thập thông tin về các xu hướng thiết kế website giáo dục hiện đại

 Lên ý tưởng, mục tiêu website (10%):

 Xác định giao diện website theo phong cách chuyên nghiệp nhưng thân thiện với người dùng

 Định hướng giao diện lấy tông màu xanh dương làm chủ đạo để tạo sự tin cậy

Mục tiêu website: Làm kênh thông tin chính thức của LEXA, kết hợp trang khóa học, tin tức, tuyển dụng.

- Xác định nội dung website (20%):

 Xác định các trang chính bao gồm: 

  Đề ra định hướng tổng thể về nội dung và giao diện.

  Có bộ khung các trang cần xây dựng

II GIAI ĐOẠN 2 – XÂY DỰNG VÀ PHÁT TRIỂN

 Thời gian: 8/3/2025 - 19/3/2025 (16 ngày)

 Quá trình cài đặt website:

Bước 1: Cài đặt phần mềm hỗ trợ Localhost

1 Tải XAMPP để hỗ trợ chạy Localhost

o Tải xuống XAMPP Cài đặt XAMPP, chọn các module cần thiết:

o Apache (Máy chủ web)

o MySQL (Cơ sở dữ liệu)

o PHP (Ngôn ngữ lập trình cho WordPress)

2 Khởi động Apache & MySQL trong XAMPP Control Panel

Bước 2: Tải xuống và cài đặt WordPress

1 Tải WordPress từ https://wordpress.org/download/

2 Giải nén file zip và đặt vào thư mục htdocs trong thư mục cài đặt XAMPP

2 Chọn Databases → Nhập tên database (giadinhhatnhai) → Nhấn Create

Bước 4: Cấu hình WordPress

1 Mở trình duyệt và nhập: http://localhost/giadinhhatnhai/

2 Chọn ngôn ngữ Tiếng Việt → Nhấn Tiếp tục

3 Nhập thông tin kết nối database:

o Tên Database: giadinhhatnhai

o Tên người dùng: giadinhhatnhai

o Mật khẩu: (để trống)

o Máy chủ CSDL: localhost

4 Nhấn Gửi → Cài đặt WordPress

5 Nhập thông tin quản trị:

o Tiêu đề trang: Lexa Company

o Tên đăng nhập: admin

o Mật khẩu: giadinhhatnhaiHAT2

o Email: hat22080290@hsb.edu.vn

6 Nhấn Cài đặt WordPress → Đăng nhập

Đăng ký tên miền và mua hosting (22%):

 Mua tên miền lexajsc.id.vn trên dịch vụ Domain và Vinahost

 Chọn hosting phù hợp (ưu tiên tốc độ tải nhanh, bảo mật tốt)

Cài đặt WordPress (25%):

 WordPress được chọn do dễ sử dụng và hỗ trợ nhiều plugin

 Elementor AI được cài đặt để hỗ trợ thiết kế giao diện

Cài đặt theme và plugin (30%):

 Theme được tối ưu hóa cho giáo dục với bố cục hiện đại

 Cài đặt plugin hỗ trợ: 

  Elementor AI – Thiết kế giao diện

  Rank Math SEO – Tối ưu SEO

 WPForms – Thiết lập biểu mẫu liên hệ

Bước 5: Tùy chỉnh giao diện và cài đặt Plugin

 Cài đặt giao diện: Vào Giao diện → Thêm mới để chọn theme phù hợp

 Cài đặt Plugin: Vào Plugin → Cài mới để thêm các tính năng như:

o Elementor (Thiết kế website kéo thả)

o Yoast SEO (Tối ưu SEO)

o Contact Form 7 (Biểu mẫu liên hệ)

Bước 6: Tạo nội dung trang web

 Tạo trang: Trang → Thêm mới (ví dụ: Trang chủ, Giới thiệu, Dịch vụ)

 Tạo bài viết: Bài viết → Thêm mới

 Tùy chỉnh menu: Giao diện → Menu → Thêm các trang vào menu

Thiết lập cấu trúc trang (40%):

 Tạo các trang cơ bản với khung nội dung sơ bộ

Thiết kế giao diện tổng quát Lexa (45%):

 Sử dụng Elementor AI để tạo bố cục trang chủ chuyên nghiệp, đầy đủ nội dung quan trọng

 Thiết lập các trang nội dung chính:

Trang Giới thiệu (50%): Trình bày thông tin về tầm nhìn , sứ mệnh và giá trị cốt lõi.

Trang Chúng tôi (55%): Giới thiệu về lịch sử hình thành và các bài báo liên quan.

Phần Tin tức (60%): Cung cấp các bài viết hướng dẫn học tập, thông tin sự kiện.

Trang Điều khoản (65%): Các chính sách của công ty

Trang Dịch vụ (70%): Thông tin chi tiết về các khóa học và chương trình học đặc biệt

Trang Tuyển dụng (75%): Danh sách các vị trí tuyển dụng, quy trình ứng tuyển.

Mục Liên hệ cuối các trang (80%): Biểu mẫu liên hệ, bản đồ địa chỉ công ty, thông tin liên hệ.

Thiết lập chatbox (80%): Sử dụng các plugin Tidio hoặc LiveChat để tích hợp hệ thống trò

chuyện trực tuyến

III Giai đoạn 3 - Kiểm tra (Testing)

  Thời gian: 20/3/2025 - 21/3/2025 (2 ngày)

   Hoạt động chính:

Kiểm tra toàn bộ các chức năng quan trọng:

  Các nút CTA dẫn tới đúng trang mục tiêu

  Các biểu mẫu gửi email đúng địa chỉ quản trị viên

  Hệ thống chatbox hoạt động mượt mà, không bị gián đoạn

  Kiểm tra giao diện hiển thị trên các thiết bị khác nhau (PC, tablet, smartphone)

  Kiểm tra tốc độ tải trang, đặc biệt khi người dùng truy cập nhiều trang liên tiếp

     Kết quả đạt được:

  Các trang chính được xây dựng hoàn chỉnh

  Hệ thống quản lý nội dung (CMS) hoạt động ổn định

IV GIAI ĐOẠN 4 – CHÍNH THỨC RA MẮT WEBSITE

CHƯƠNG III: CÁCH THỨC VẬN HÀNH WEBSITE CHỨC NĂNG CỦA TỪNG HẠNG MỤC WEBSITE

A CÁCH THỨC VẬN HÀNH WEBSITE

I Giao diện

 Trang chủ:

o Phần đầu trang sử dụng một banner lớn với tiêu đề nổi bật “Learn Smart –

Achieve More” để thu hút sự chú ý

o Có các nút CTA như "Khám phá" hoặc trên thanh navbar giúp điều hướng

người dùng đến trang dịch vụ hoặc thông tin khóa học

 Các section dịch vụ: Trình bày thông tin về các khóa học, dịch vụ với bố cục rõ ràng,

mỗi mục có trang riêng biệt để tạo sự nhận diện

 Footer (Chân trang): Chứa các thông tin liên hệ, liên kết mạng xã hội và địa chỉ công

ty

II Quản lý nội dung

 Các trang như "Về chúng tôi", "Điều khoản", "Dịch vụ" đều được quản lý trong mục

Trang (Pages) trong WordPress.

 Nội dung các trang được xây dựng bằng Elementor AI với các thành phần như:

o Tiêu đề (Heading)

o Nội dung văn bản (Text)

o Hình ảnh minh họa

o Biểu mẫu đăng ký (dùng Elementor Forms)

 Elementor AI giúp chỉnh sửa trực tiếp trên giao diện trang, chỉ cần nhấn vào phần muốn thay đổi mà không cần vào mã nguồn

III Cách vận hành

 Trang chủ đóng vai trò trung tâm, định hướng người dùng tới các trang con thông qua

các nút CTA hoặc menu chính

 Trang dịch vụ trình bày nội dung theo cấu trúc rõ ràng: tiêu đề → các sản phẩm →

hoạt động nổi bật 

 Trang liên hệ sử dụng biểu mẫu (form) để thu thập thông tin khách hàng, thông tin

này có thể:

o Gửi về email quản trị

o Lưu trữ trong mục "Form liên hệ" trên WordPress

➡️ Ví dụ trực quan trên trang liên hệ: Người dùng gửi mail qua textbox đầu và cuối trang

hoặc trao đổi qua chatbox sẽ nhận được thông báo xác nhận gửi thành công hoặc được tư vấn trực tuyến. 

IV Plugin hỗ trợ

1 Contact Form 7

 Chức năng: Tạo form liên hệ đơn giản, dễ quản lý.

 Ưu điểm: Miễn phí, nhẹ nhàng, phổ biến với cộng đồng WordPress.

2 Ecomus Addons

 Chức năng: Thêm các thành phần mở rộng cho Elementor, chủ yếu phục vụ theme Ecomus.

 Ưu điểm: Tích hợp tốt nếu bạn đang dùng theme Ecomus.

 Nhược điểm: Plugin này không phổ biến rộng rãi, có thể dư thừa nếu không dùng

theme Ecomus

3 Elementor

 Công dụng: Trình tạo trang (page builder) mạnh mẽ, kéo-thả trực quan, không cần

biết code

 Ưu điểm: Hỗ trợ thiết kế giao diện chuyên nghiệp dễ dàng.

4 Essential Addons for Elementor

 Công dụng: Bộ tiện ích mở rộng mạnh mẽ nhất cho Elementor, cung cấp thêm nhiều

thành phần (widgets) đa dạng

 Ưu điểm: Cung cấp nhiều tính năng cần thiết giúp tăng tính sáng tạo trong thiết kế.

5 Essential Blocks

 Công dụng: Bộ tiện ích bổ sung cho Gutenberg (khác với Elementor).

 Ưu điểm: Tối ưu cho người dùng thích sử dụng trình soạn thảo Gutenberg (mặc định

của WordPress)

6 MC4WP: Mailchimp for WordPress

 Công dụng: Kết nối trang web của bạn với Mailchimp để thu thập email từ khách

hàng

 Ưu điểm: Tích hợp mượt mà, dễ tạo form đăng ký email.

7 Rank Math SEO

 Công dụng: Plugin SEO mạnh mẽ, hỗ trợ tối ưu hóa nội dung, từ khóa, sitemap, v.v.

 Ưu điểm: Dễ dùng, giao diện trực quan, nhiều tính năng mạnh mẽ hơn Yoast SEO

trong bản miễn phí

8 Soo Demo Importer

 Công dụng: Nhập dữ liệu demo cho website từ theme có sẵn.

 Ưu điểm: Giúp thiết kế nhanh với các bản mẫu giao diện có sẵn.

9 Templately

 Chức năng: Thư viện mẫu giao diện miễn phí cho Elementor & Gutenberg.

 Ưu điểm: Cung cấp nhiều mẫu chuyên nghiệp, dễ sử dụng.

10 Tidio Chat

 Công dụng: Công cụ chat trực tiếp với khách hàng ngay trên website.

 Ưu điểm: Hỗ trợ chatbot tự động, giao diện thân thiện.

11 WooCommerce - Products Compare và WCBoost - Products Compare

 Công dụng: Tạo bảng so sánh sản phẩm cho website thương mại điện tử.

 Ưu điểm: Hữu ích nếu bạn bán nhiều sản phẩm tương tự nhau.

12 MC4WP: Mailchimp for WordPress

 Công dụng: Kết nối trang web với Mailchimp để thu thập email khách hàng và thực

hiện các chiến dịch email marketing

 Ưu điểm: Hỗ trợ tạo form đăng ký email, tăng cường marketing qua email.

V Quản trị

 Đăng nhập WordPress: Thông qua đường dẫn /wp-admin, bạn có thể vào giao diện quản trị viên

 Chỉnh sửa giao diện: Vào mục Trang (Pages) → chọn trang cần chỉnh sửa → nhấn

"Edit with Elementor" để mở giao diện kéo-thả trực quan

 Quản lý bài viết (Posts): Dễ dàng thêm, chỉnh sửa hoặc xóa các bài blog nhằm tối ưu

SEO

 Phân quyền quản trị viên và biên tập viên giúp quản lý nội dung mà không sợ bị

thay đổi giao diện chính

➡️ Ví dụ trực quan: Trong mục Elementor, bạn có thể thêm section mới, chỉnh sửa hình ảnh

hoặc thay đổi bố cục chỉ bằng các thao tác kéo-thả

NHƯ VẬY:

Website lexajsc.id.vn vận hành theo cách:

- Thiết lập giao diện trực quan nhờ Elementor AI

- Nội dung quản lý trong WordPress qua mục Trang/Bài viết

- Hệ thống CTA, biểu mẫu và các trang thông tin vận hành logic để dẫn dắt khách hàng

- Việc quản trị website rất dễ dàng với giao diện Elementor kéo-thả

B CHỨC NĂNG TỪNG HẠNG MỤC WEBSITE

I.Trang Tổng quát

- Nội dung:

 Trang này giới thiệu tổng quan về Lexa Company với các điểm nhấn chính như:

o Slogan: Learn Smart - Achieve More thể hiện định hướng giáo dục thông

minh, hiệu quả

o Giới thiệu công ty: Khẳng định Lexa là đơn vị hoạt động trong lĩnh vực tư

vấn giáo dục và phát triển định hướng học tập cho nhiều đối tượng

o Các chương trình đào tạo nổi bật: Liệt kê các chương trình phù hợp với

nhiều lứa tuổi và mục tiêu học tập khác nhau

o Số liệu thành tựu: Số lượng học viên thành công, đối tác hợp tác và thành tựu

nổi bật được trình bày trực quan

o Phần đánh giá từ học viên và đối tác: Tăng thêm độ tin cậy cho doanh

nghiệp

- Ý nghĩa:

 Trang chủ giúp tạo ấn tượng ban đầu mạnh mẽ, định vị Lexa là một tổ chức chuyên nghiệp trong lĩnh vực giáo dục

 Thiết kế trực quan với các chỉ số thành tựu giúp củng cố uy tín của doanh nghiệp

II Trang Về Chúng tôi

- Nội dung:

 Phần này trình bày rõ các yếu tố:

o Tầm nhìn: Lexa cam kết giúp học viên tiếp cận môi trường học tập hiệu quả

và khoa học

o Sứ mệnh: Hỗ trợ học viên phát triển kỹ năng tiếng Anh và đạt được thành tích

tốt nhất trong môi trường học thuật và công việc

o Giá trị cốt lõi: Tập trung vào sáng tạo trong giáo dục, tận tâm hỗ trợ học viên

và hướng tới hợp tác bền vững

o Đội ngũ nhân sự: Giới thiệu các thành viên chủ chốt trong đội ngũ quản lý và

giáo viên của Lexa