Đề 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.pdf

Một giao diện website đẹ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 webs

DE TAI THUC TAPCO SO

THIET KE XAY DUNG GIAO DIEN WEBSITE BOOKING GOLF

NGANH CONG NGHE THONG TIN

HÀ NỘI, 4— 2023

DE TAI THUC TẬP CƠ SỞ

THIET KE XAY DUNG GIAO DIEN WEBSITE BOOKING GOLF

NGANH CONG NGHE THONG TIN

Giáo viên hướng dẫn: ThS Vũ Lê Quynh Giang

Sinh viên thực hiện: Nông Xuân Hiếu

Đỗ Tiến Hùng

Đào Thị Xuân Hoàng Thị Trang

HÀ NỘI, 4— 2022

Công cụ giải QUYẾT St 12111 122111 1211121 1 1 n1 nh ng 11 HH1 re

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

CHƯƠNG 3: THIET KE VA XAY DUNG GIAO DIEN WEBSITE

3.1 Form đăng ký tài khoản bằng Tiếng VIỆP - - S1 11 1E E1 122121012111 1t ngay 3.2 Form đăng nhập tài khoản c2 221121112221 121 1511155115115 1111115111511 1111911011101 khu

“is an

EN Noi hioế4s 3.5 Trang chỉ tiết tin tỨC - s1 1 1121111111 111112121 1 1 H11 nh ng tên

“S5 209 a 3.6 in “111

KÉT LUẬN

1.1Két N1 Nc0).90NGƯÝ

1.2 Hướng phát triỂn 5 ST 1 1 1121111211 1111111 1 H11 1 n1 1 tt tt ng yeu

TÀI LIỆU THAM KHẢO

LOI MO DAU

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ông thê 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 điện website trở nên cảng quan trọng hơn bao giờ hết Một giao diện website đẹ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 website

booking Golf" sẽ trở thành một chủ dé hap dẫn và cần thiết dé giúp cho các doanh nghiệp trong ngành Golf có thể phát triển và tăng doanh thu thông qua việc sử dụng trang web của mình đề đặt lịch và quảng bá sản phẩm của mình

PHAN I: TONG QUAN VE DE TAI

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ách

hà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ủa bạ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ần

thiết kế giao diện website:

2

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úp khá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 điện website được thiết kế tốt giúp cho khách hàng có thê dễ dàng tìm kiếm thông tin hoặc sản pham ma ho dang quan 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 điện website phải được tối

ưu hóa để trang web của bạn có thé truy cập va sử dụng được trên các thiết bị khác

nhau, đặ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ủa khá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úp tạ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ủa

bạ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ố quan

trọ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ếu giao diện website của bạn được thiết kề tốt, khách hàng có thể sẵn sang tra tién dé

su dung san pham hoặc dịch vụ của bạn hơn là của đối thủ cạnh tranh

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 dep, 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 Golf một cách đề đàng và nhanh chóng

Cu thé, dé tai sé tập trung vào các mục tiêu sau:

3

Thiết kế giao diện trang web booking Golf đẹp và chuyên nghiệp: Dam bao rang giao diện trang web được thiết kế đẹp và chuyên nghiệp để tạo sự tin tưởng và thu hú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ính nă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ới cá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ống

quả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ý

lich danh cua 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ác

sâ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ách

hiệu quả

Phạm vi đề tài

hạ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ăng tương tác và chia sẻ để 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ẻ đề định dạ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 đề định dạng giao diện của trang web CSS sử dụng các quy tắc để xác định cách mà các phan 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ữ

web responsive và tối ưu hóa trải nghiệm người dùng trên nhiều thiết bị khác nhau

- JavaScript la mét ngôn ngữ lập trình phía clhient (client-side) được sử dụng rộng rãi trong thiết kế giao diện web JavaScript cho phép các lập trình viên thêm các tính nă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ốt

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

về các sân golÊ giá cả và các dịch vụ khác

© Thiết kế hap dẫn và chuyên nghiệp đề thu hút khách hàng

® Câu trúc trang web rõ ràng, dé dang tim kiêm và truy cập thong 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à để 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àng mà không cần phải mắt quá nhiều thời gian và nỗ lực

e Hỗ trợ đa ngôn ngữ và đa thiết bị: Khách hàng muốn website hỗ trợ nhiều ngôn

ngữ khác nhau để phục vụ cho nhiều đối tượng khách hàng khác nhau, đồng thời

cũ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ác

nhau như điện thoại di động, máy tính bang, laptop.,

e 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ực

tuyế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ới

sâ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

e® 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 dé chủ sân golf có thể quan lý các đơn hàng và thông tin

củ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àn hao gitra IDE va Code Editor

Visual Studio Code hé tro chire nang debug, di kém véi Git, cd syntax highlighting,

tự hoàn thành mã thông minh, snippets, va cai 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ọn khá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ình nhu C/C++, C#, F#, Visual Basic, HTML, CSS, JavaScript, Vi vay, nd dé dang phat hiệ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:

- Bat dau vdi 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

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 1a 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ác phần tử HTML đó như đổi màu sắc trang, đổi màu chữ, thay đổi cấu trú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ẽ áp

dụ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 Single Page Application (SPA) bang JavaScript, HTML va TypeScript Angular cung cap cac tính năng tich hop cho animation, http service va c6 cac tinh nang nhu auto-complete, navigation, toolbar, menus,

2.5, Bootstrap

Bootstrap la m6t framework bao gdm cac HTML, CSS va JavaScript template dù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ường dùng để thiết kế UI và dựng prototypes Figma cung cấp tải nguyên cho mọi khâu của quá trình tô chức thiết kế, từ brainstorm ý tưởng concept cho đến khởi tạo code từ mẫu

thiế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ư Does hay Sheets, Figma cho phép nhiều người cộng tác trực tuyến trong một “ñle” Các

thà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ận phứ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 DUNG GIAO DIEN WEBSITE

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

Alegolf Hotdsal Bảnggá Golftou Ge#event Tintức BáohếmHIO Ưeđãihộiviên (ĐAngeme

ĐANG NHP TÀI KHOẢN

© Sân gclt nạn muốn cơ Ghigo tine thank

MIỄN BÁC MIỆM THƯNG MOE SA Danny Mew rayne a

HO Thee (

€ ! #0 290 VMD cs 10.000 YO Đa% xem Codi tale

soma one bee canna

Hotdeal

Toda Ba Mê Chơi Gọit, Tiệt Ki@= Thời Gian Và Chí Pry

11

U.S, Women's Open @n thứ 76 sẽ bắt đầu tại Câu lọc bộ Otyrrorc nồi tiếng

© San Francigoa, Calitomia, vào thử Ni, roày 3/8/2021 Dưới đây là “ân,

chân tỐ đáng theo đội khì sắn chơi gồm 168 ngô sao chuẩn bạ cạnh tranh:

chức vÓ địch lm xr hal cua rtm

Coxld trợ tạ khiến Aus4rsban Open bi tet hon

Shee revdien lứ vơng Oe eee

bì wo DMuele teen out + Baal) wd thee har gale ve ttyl nh

cô ÚC 4Ð vớ đổi 91, Khổng cft: đơn thuần (à gái

pad bent

BRIDGESTONE

00000660056 copsia nong noi co&f

vệ ich sau lost pray

ns edi aoe PGA Taw #6

nà one ee hộ vô có hết

Meenoruẻ đự kiến có khoảng #Ô0O khác giá

Sự kiện

trên Được địa

dn a ttn sin gat ) phền kmớng thổ tsểu tn PK Tea bo vo ing pid

an cho ahora yoter f 3z biện Marrone! đâm = rên hen) ? tôi sẽ được tho phú | đại Moso ko sàn gàsên sản thực

The Match thờ 2 kết Đước với chiến thẳng độc Tìgee Woodu

hờn 24/5 kgày địa pseoegf vợa vềt trận đầu gây Quý tơ f>iện gấra 2 cập đi Tuye=

ok, Fe Mang và Phể Melafsen, om Ênuy đã đến ra rừi an Macha

oF D tân đụng tít nike) tole OA Basie st bd Od Woods ~ Manning Tigur Woods gin lợi tế

re Cowsd trời lực khiển AuzsAraban On bị trị hoán 2À số “Qườt lự vững đo Cư«d, 19 lái “ưa lắng Ấc

© Auszraian Open quyết lăn vệ Đợt hợn g6 và hôi điềm sôm nh!

Hộ 2001, Không chỉ đơa tuần là Oi số xưa nhớ:

BSt ge tl Chartes Schwab Challenge Danie! Berger

VO Gtch am last play off Ses tra Bs ners cn Coed 8 e wen wy NO! Beg PK Tog ach Hee Mới CÝc nile DAY DAN Thông se cai chợ Si lim Ï6, Chases

i

13

- trên ®xực địa

„ tên mb Cho pháo đón kho#rg BỘ „9 yên

Bt ne tai Charles Scrat Challenge Dune Berger

vd dion saw loot pay off

19 1a) Ausvotlo tag Hn) chong nit

số PAE hen GaN về thin aden Grn rit

te den thun tà gái c6 nhắc + tiết nage tai Charles Schwab Challenge Cane Berger v6 dich sau last olay off

Sy kiện Momorig đự kiến có khoang @000 khán giá trên tực địa

EỒ owgkmensn c= Bồ Hot: nà) 860 0075

pee 214á2ð) YÀI ỞNG OUUNG FANPAGE

TRUYỀN THÔNG &

ÐU LIC# P*4I

h PP Gor Det CB Vi, Chu Din,

BÀ BAN) XÝ

14