thiết kế xây dựng giao diện website booking golf ngành công nghệ thông tin

- Tăng khả năng tương tác của khách hàng: Một giao diện website được thiết kế tốtgiúp cho khách hàng có thể dễ dàng tìm kiếm thông tin hoặc sản phẩm mà họ đangquan tâm và thực hiện các h

HỌC VIỆN QUẢN LÝ GIÁO DỤC

KHOA CÔNG NGHỆ THÔNG TIN

- -

ĐỀ TÀI THỰC TẬP CƠ SỞ

THIẾT KẾ XÂY DỰNG GIAO DIỆN WEBSITE BOOKING GOLF

NGÀNH CÔNG NGHỆ THÔNG TIN

HÀ NỘI, 4 – 2023

HỌC VIỆN QUẢN LÝ GIÁO DỤC

KHOA CÔNG NGHỆ THÔNG TIN

-

-ĐỀ TÀI THỰC TẬP CƠ SỞ

THIẾT KẾ XÂY DỰNG GIAO DIỆN WEBSITE BOOKING GOLF

NGÀNH CÔNG NGHỆ THÔNG TIN

Giáo viên hướng dẫn: ThS Vũ Lê Quỳnh Giang Sinh viên thực hiện: Nông Xuân Hiếu

Đỗ Tiến HùngĐào Thị XuânHoàng Thị Trang

HÀ NỘI, 4 – 2022

MỤC LỤC

PHẦN I: TỔNG QUAN VỀ ĐỀ TÀI

1 Lí do chọn đề tài

2 Mục tiêu của đề tài

3 Phạm vi đề tài

Công cụ giải quyết

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

Mục đích

Yêu cầu của khách hàng

CHƯƠNG 2: CÔNG CỤ HỖ TRỢ

2.1 Visual studio code

2.2 HTML

2.3 CSS

2.4 Angurlar

2.5 Bootstrap

2.6 Figma

CHƯƠNG 3: THIẾT KẾ VÀ XÂY DỰNG GIAO DIỆN WEBSITE

3.1 Form đăng ký tài khoản bằng Tiếng Việt

3.2 Form đăng nhập tài khoản

3.3 Trang Home

3.4 Trang tin tức

3.5 Trang chi tiết tin tức

3.5 Trang golf tour

3.6 Trang thanh toán

KẾT LUẬN

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

1.2 Hướng phát triển

TÀI LIỆU THAM KHẢO

LỜI MỞ ĐẦU

Hiện nay xu hướng số hóa đang ngày càng phát triển và trở thành một phần khôngthể thiếu trong kinh doanh hiện đại Với sự gia tăng của số lượng người truy cập internet,việc thiết kế giao diện website trở nên càng quan trọng hơn bao giờ hết Một giao diệnwebsite đẹp, thân thiện và dễ sử dụng sẽ giúp tăng khả năng tương tác của khách hàng vàtạo ra ấn tượng tích cực với họ Trong bối cảnh đó, đề tài "Thiết kế giao diện websitebooking Golf" sẽ trở thành một chủ đề hấp dẫn và cần thiết để giúp cho các doanh nghiệptrong ngành Golf có thể phát triển và tăng doanh thu thông qua việc sử dụng trang webcủa mình để đặt lịch và quảng bá sản phẩm của mình

PHẦN I: TỔNG QUAN VỀ ĐỀ TÀI

1 Lí do chọn đề tài

Thiết kế giao diện website là rất quan trọng vì nó là mặt nạ đầu tiên mà kháchhàng của bạn sẽ nhìn thấy khi truy cập vào trang web của bạn Nếu giao diện website củabạn không hấp dẫn hoặc khó sử dụng, khách hàng có thể sẽ không muốn dành thời gian

và công sức để khám phá và sử dụng trang web của bạn Dưới đây là những lý do cầnthiết kế giao diện website:

- Tạo ấn tượng với khách hàng: Một giao diện website được thiết kế chuyên nghiệp

và hấp dẫn có thể giúp tạo ra một ấn tượng tích cực với khách hàng Nó giúpkhách hàng cảm thấy tin tưởng hơn về chất lượng sản phẩm hoặc dịch vụ của bạn

- Tăng khả năng tương tác của khách hàng: Một giao diện website được thiết kế tốtgiúp cho khách hàng có thể dễ dàng tìm kiếm thông tin hoặc sản phẩm mà họ đangquan tâm và thực hiện các hành động khác trên trang web của bạn Điều này có thểgiúp tăng khả năng tương tác của khách hàng trên trang web của bạn

- Tăng khả năng truy cập của khách hàng: Thiết kế giao diện website phải được tối

ưu hóa để trang web của bạn có thể truy cập và sử dụng được trên các thiết bị khácnhau, đặc biệt là các thiết bị di động Điều này giúp tăng khả năng truy cập củakhách hàng vào trang web của bạn

- Tăng tính chuyên nghiệp của trang web: Một giao diện website được thiết kếchuyên nghiệp có thể giúp tăng tính chuyên nghiệp của trang web của bạn, giúptạo sự tin tưởng với khách hàng và tăng khả năng khách hàng trở lại trang web củabạn lần sau

- Tăng tính cạnh tranh trên thị trường: Thiết kế giao diện website là một yếu tố quantrọng trong việc tạo ra sự khác biệt và tăng tính cạnh tranh trên thị trường Nếugiao diện website của bạn được thiết kế tốt, khách hàng có thể sẵn sàng trả tiền để

sử dụng sản phẩm hoặc dịch vụ của bạn hơn là của đối thủ cạnh tranh

2 Mục tiêu của đề tài

Mục tiêu của đề tài "Thiết kế giao diện website booking Golf" là tạo ra một trang webđẹp, thân thiện với người dùng và dễ sử dụng, giúp cho khách hàng có thể đặt lịch đánh

Cụ thể, đề tài sẽ tập trung vào các mục tiêu sau:

● Thiết kế giao diện trang web booking Golf đẹp và chuyên nghiệp: Đảm bảo rằnggiao diện trang web được thiết kế đẹp và chuyên nghiệp để tạo sự tin tưởng và thuhút khách hàng đến sử dụng

● Tối ưu hóa trang web cho trải nghiệm người dùng tốt nhất: Các chức năng và tínhnăng trên trang web sẽ được thiết kế để đảm bảo rằng khách hàng có thể dễ dàng

sử dụng trang web và thực hiện các hành động cần thiết một cách nhanh chóng

● Đảm bảo tính bảo mật và an toàn cho khách hàng: Trang web sẽ được thiết kế vớicác tính năng bảo mật để đảm bảo rằng thông tin khách hàng được bảo vệ vàkhông bị rò rỉ

● Tạo ra một hệ thống quản lý đặt lịch thông minh: Trang web sẽ có một hệ thốngquản lý đặt lịch thông minh để giúp khách hàng có thể dễ dàng đặt lịch và quản lýlịch đánh của mình

● Tăng cường quảng bá cho các sân Golf: Trang web sẽ được thiết kế để giúp cácsân Golf có thể quảng bá và giới thiệu dịch vụ của mình đến khách hàng một cáchhiệu quả

3 Phạm vi đề tài

Phạm vi của đề tài "Thiết kế giao diện website booking Golf" sẽ tập trung vào thiết

kế giao diện và các chức năng liên quan đến đặt lịch đánh Golf trực tuyến

Công cụ giải quyết

● Sử dụng phần mềm Visual Studio Code để viết chương trình

● Figma: Cũng là một phần mềm thiết kế giao diện người dùng chuyên nghiệp, được

sử dụng để tạo ra các thiết kế đẹp và thân thiện với người dùng, với tính năngtương tác và chia sẻ dễ dàng

Ngôn ngữ lập trình

- HTML (HyperText Markup Language) là ngôn ngữ đánh dấu siêu văn bản, được

sử dụng để xác định cấu trúc của một trang web HTML sử dụng các thẻ để địnhdạng nội dung trên trang web, bao gồm văn bản, hình ảnh, liên kết và các phần tửkhác

- CSS (Cascading Style Sheets) là một ngôn ngữ kiểu trang, được sử dụng để địnhdạng giao diện của trang web CSS sử dụng các quy tắc để xác định cách mà cácphần tử HTML được hiển thị trên trang web, bao gồm màu sắc, kích thước, vị trí

và kiểu chữ

- Bootstrap: Là một framework CSS phổ biến, được sử dụng để tạo ra các giao diệnweb responsive và tối ưu hóa trải nghiệm người dùng trên nhiều thiết bị khácnhau.

- JavaScript là một ngôn ngữ lập trình phía client (client-side) được sử dụng rộng rãitrong thiết kế giao diện web JavaScript cho phép các lập trình viên thêm các tínhnăng tương tác động vào trang web, giúp tạo ra các trải nghiệm người dùng tốthơn

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

Mục đích

Mục đích chính của thiết kế giao diện website booking Golf là tạo ra một trangweb thân thiện với người dùng, hấp dẫn và dễ sử dụng Giao diện trang web cần phải tạo

ra một trải nghiệm người dùng tốt, giúp họ dễ dàng tìm kiếm và đặt phòng, xem thông tin

về các sân golf, giá cả và các dịch vụ khác

● Thiết kế hấp dẫn và chuyên nghiệp để thu hút khách hàng

● Cấu trúc trang web rõ ràng, dễ dàng tìm kiếm và truy cập thông tin

● Thông tin về sản phẩm và dịch vụ được đưa ra một cách rõ ràng và dễ hiểu

● Tính năng tương tác với người dùng để giúp họ tìm kiếm và đặt phòng một cách

Yêu cầu của khách hàng

● Thiết kế giao diện trực quan và dễ sử dụng: Khách hàng muốn giao diện websiteđược thiết kế sao cho người dùng có thể tìm kiếm và đặt lịch dễ dàng mà khôngcần phải mất quá nhiều thời gian và nỗ lực

● Hỗ trợ đa ngôn ngữ và đa thiết bị: Khách hàng muốn website hỗ trợ nhiều ngônngữ khác nhau để phục vụ cho nhiều đối tượng khách hàng khác nhau, đồng thờicũng cần đảm bảo website có thể được truy cập và sử dụng trên nhiều thiết bị khácnhau như điện thoại di động, máy tính bảng, laptop,

● Tính năng đặt sân golf online: Khách hàng muốn có chức năng đặt sân golf trựctuyến trên website, giúp khách hàng có thể đặt lịch 24/7 mà không phải liên hệ vớisân golf qua điện thoại hoặc email

● Hỗ trợ thanh toán trực tuyến: Khách hàng muốn có tính năng thanh toán trực tuyến

để thuận tiện cho việc thanh toán và xác nhận đơn hàng của khách hàng

● Chức năng quản lý đặt sân và khách hàng: Khách hàng muốn có chức năng quản

lý đặt sân và khách hàng để chủ sân golf có thể quản lý các đơn hàng và thông tincủa khách hàng một cách hiệu quả

CHƯƠNG 2: CÔNG CỤ HỖ TRỢ

2.1 Visual studio code

Là một trình biên tập lập trình code miễn phí dành cho Windows, Linux và macOS,Visual Studio Code được phát triển bởi Microsoft Nó được xem là một sự kết hợp hoànhảo giữa IDE và Code Editor

Visual Studio Code hỗ trợ chức năng debug, đi kèm với Git, có syntax highlighting,

tự hoàn thành mã thông minh, snippets, và cải tiến mã nguồn Nhờ tính năng tùy chỉnh,Visual Studio Code cũng cho phép người dùng thay đổi theme, phím tắt, và các tùy chọnkhác

Hỗ trợ nhiều ngôn ngữ lập trình: Visual Studio Code hỗ trợ nhiều ngôn ngữ lập trìnhnhư C/C++, C#, F#, Visual Basic, HTML, CSS, JavaScript, … Vì vậy, nó dễ dàng pháthiện và đưa ra thông báo nếu chương chương trình có lỗi

Giao diện visual studio code:

- Bắt đầu với project

- Mở cmd lên để tạo một không gian làm việc với Angurlar với lệnh ng new

2.3 CSS

CSS là chữ viết tắt của Cascading Style Sheets, nó là một ngôn ngữ được sử dụng

để tìm và định dạng lại các phần tử được tạo ra bởi các ngôn ngữ đánh dấu (ví dụ nhưHTML) Nếu HTML đóng vai trò định dạng các phần tử trên website như việc tạo ra cácđoạn văn bản, các tiêu đề, bảng, … thì CSS sẽ thêm một chút “phong cách” vào cácphần tử HTML đó như đổi màu sắc trang, đổi màu chữ, thay đổi cấu trúc, …

Phương thức hoạt động của CSS là nó sẽ tìm dựa vào các vùng chọn, vùng chọn cóthể là tên một thẻ HTML, tên một ID, class hay nhiều kiểu khác Sau đó là nó sẽ ápdụng các thuộc tính cần thay đổi lên vùng chọn đó.

2.4 Angurlar

Angular là một javascript framework do google phát triển để xây dựng các SinglePage Application (SPA) bằng JavaScript, HTML và TypeScript Angular cung cấp cáctính năng tích hợp cho animation, http service và có các tính năng như auto-complete,navigation, toolbar, menus, …

2.5 Bootstrap

Bootstrap là một framework bao gồm các HTML, CSS và JavaScript templatedùng để phát triển website chuẩn responsive Bootstrap cho phép quá trình thiết kếwebsite diễn ra nhanh chóng và dễ dàng hơn dựa trên những thành tố cơ bản sẵn có nhưtypography, forms, buttons, tables, grids, navigation, image carousels…

2.6 Figma

Figma là một công cụ thiết kế đồ họa vector chạy trên trình duyệt web, thườngdùng để thiết kế UI và dựng prototypes Figma cung cấp tài nguyên cho mọi khâu củaquá trình tổ chức thiết kế, từ brainstorm ý tưởng concept cho đến khởi tạo code từ mẫuthiết kế

Figma có thể được xem là Google Docs phiên bản dành cho thiết kế Cũng giống nhưDocs hay Sheets, Figma cho phép nhiều người cộng tác trực tuyến trong một “file” Cácthành viên tham gia dự án có thể cùng chỉnh sửa, bình luận, theo dõi một bản thiết kếtrong thời gian thực, ở các máy chủ khác nhau mà không cần đến quá trình gửi – nhậnphức tạp Nhờ tính linh hoạt này, Figma trở thành công cụ thiết kế ưa chuộng cho các dự

án nhóm hoặc làm từ xa

CHƯƠNG 3: THIẾT KẾ VÀ XÂY DỰNG GIAO DIỆN WEBSITE

3.1 Form đăng ký tài khoản bằng Tiếng Việt

3.2 Form đăng nhập tài khoản

3.3 Trang Home

3.4 Trang tin tức

\

3.5 Trang chi tiết tin tức.

3.5 Trang golf tour

3.6 Trang thanh toán

KẾT LUẬN

Nhận thấy việc thiết kế giao diện website booking Golf là một phần quan trọngtrong quá trình phát triển trang web Mục đích chính của việc thiết kế giao diện là tạo ramột trang web thân thiện với người dùng, hấp dẫn và dễ sử dụng để thu hút khách hàngđặt phòng và sử dụng các dịch vụ của sân golf Để đạt được mục tiêu này, cần thiết phải

sử dụng các công cụ như HTML, CSS và JavaScript để tạo ra một giao diện trang webchuyên nghiệp, tối ưu và linh hoạt Một giao diện trang web tốt sẽ giúp tạo ra trảinghiệm người dùng tốt và đảm bảo sự thành công của trang web trong việc thu hútkhách hàng và tăng doanh thu

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

●Đạt được:

-Tăng cường sự chuyên nghiệp của thương hiệu và thu hút khách hàng tiềm năng

-Tăng tỷ lệ chuyển đổi và doanh thu bằng cách tạo ra trải nghiệm người dùng tốthơn và dễ dàng hơn trong việc đặt phòng và sử dụng dịch vụ

-Cải thiện tốc độ tải trang và tối ưu hóa trải nghiệm người dùng để giữ chân kháchhàng trên trang web trong thời gian dài hơn

-Tăng tính cạnh tranh trong ngành công nghiệp du lịch và giúp đặt sân golf trở nên

TÀI LIỆU THAM KHẢO

Tài liệu Web: