bài tập lớn thiết kế và xây dựng website đề tài thiết kế website bán đá quý kim cương

Chào mừng đến với dự án lớn thiết kế web của chúng em - nơi mà chúng em sẽ cùng nhau xây dựng một trang web bán đá quý kim cương đẳng cấp và đầy đủ chức năng.Đá quý kim cương không chỉ l

TRƯỜNG ĐẠI HỌC ĐẠI NAM

BÀI TẬP LỚN TÊN HỌC PHẦN: THIẾT KẾ VÀ XÂY DỰNG WEBSITE

ĐỀ TÀI: THIẾT KẾ WEBSITE BÁN ĐÁ QUÝ KIM CƯƠNG

Giáo viên hướng dẫn : Th.S Trịnh Hồng Điệp Sinh viên thực hiện : Lê Thế Dũng

Hà Nội, năm 2022

Chào mừng đến với dự án lớn thiết kế web của chúng em - nơi mà chúng

em sẽ cùng nhau xây dựng một trang web bán đá quý kim cương đẳng cấp và đầy đủ chức năng

Đá quý kim cương không chỉ là những viên đá quý, mà còn là biểu tượng của sự quý phái, sang trọng và đẳng cấp Trong thời đại ngày nay, việc thiết kế một trang web bán đá quý kim cương không chỉ là việc trình bày sản phẩm mà còn là cơ hội để chúng em tạo ra một trải nghiệm mua sắm trực tuyến độc đáo và thú vị

Chúng em sẽ không chỉ tập trung vào việc hiển thị sản phẩm một cách nổi bật mà còn đảm bảo rằng trang web sẽ thúc đẩy sự tương tác và hiểu biết về thế giới đá quý kim cương Qua từng góc nhìn, từng chi tiết, chúng em sẽ xây dựng một trải nghiệm trực tuyến tuyệt vời, từ việc tìm hiểu về loại đá quý, quy trình khai thác, đến việc lựa chọn và mua sắm một cách thuận tiện và an toàn Chúng em cũng sẽ đặt ra mục tiêu làm cho trang web không chỉ là nơi mua sắm mà còn là điểm đến để khám phá và chia sẻ đam mê về đá quý kim cương Chúng em sẽ tích hợp các chức năng xã hội, diễn đàn và cơ hội tương tác để xây dựng cộng đồng yêu đá quý mạnh mẽ

Với sự sáng tạo và nhiệt huyết của mỗi thành viên, chúng em có thể đưa trang web này lên một tầm cao mới và tạo ra một không gian trực tuyến tuyệt vời cho những người yêu thích đá quý kim cương Hãy cùng nhau khám phá và tạo nên điều đặc biệt!

MỤC LỤC

CHƯƠNG 1: GIỚI THIỆU TỔNG QUÁT VỀ WEBSITE 1.1 Lịch sử hình thành

1.2 Ứng dụng của website

1.3 Tương lai

CHƯƠNG 2: PHÂN TaCH THIẾT KẾ HỆ THbNG 2.1 Phcn tdch yêu cgu đi tài

2.2 Xác định yêu cgu của khách hàng

2.3 Yêu cgu giao diện của website

CHƯƠNG 3: THIẾT KẾ VÀ XÂY DỰNG WEBSITE 3.1 Tổng quát vi công nghệ sử dụng

3.1.1 Đôi nét vi HTML VÀ CSS

3.1.2 Đôi nét vi NOTEPAD++

3.2 Xcy dựng sản phẩm

3.3 Các chức năng cụ thể

CHƯƠNG 4: TỔNG KẾT

MỤC LỤC HÌNH ẢNH 1.1 Hình ảnh website

1.2 Ứng dụng

1.3 Tương lai

2.1 Kim cương đá quý

3.1 Header

3.2 Banner

3.3 Hình ảnh sản phẩm

3.4 Footer

3.5 Các chức năng

BẢNG CÁC TỪ VIẾT TẮT

(Nếu có)

web

trang web

giới thiệu

internet

1. GIỚI THIỆU TỔNG QUÁT VỀ WEBSITE

1.1 Lịch Sử Hình Thành

Lịch sử hình thành của website bán đá quý kim cương không chỉ là một chặng đường kỹ thuật mà còn là câu chuyện về sự phát triển và tiến bộ trong ngành công nghiệp trang sức Từ những bước đầu tiên với những trang web đơn giản giới thiệu sản phẩm, đến sự đa dạng hóa ngày nay, chúng ta sẽ đàm phán về những xu hướng và thách thức đã hình thành và ảnh hưởng đến việc thiết kế trang web của chúng em

1.2 Ứng Dụng Của Website

Website bán đá quý kim cương không chỉ là nơi để thực hiện giao dịch mua bán, mà còn đóng vai trò quan trọng trong việc giáo dục và tạo cơ hội cho người tiêu dùng hiểu rõ hơn về thế giới đá quý Chúng ta sẽ tìm hiểu về những ứng dụng tiêu biểu như cung cấp thông tin chất lượng, hướng dẫn chăm sóc và bảo quản đá quý, cũng như tương tác xã hội để tạo nên một cộng đồng yêu thích trang sức đá quý

1.3 Tương Lai

Đối mặt với những thách thức và cơ hội của thị trường trang sức trực tuyến, chúng ta sẽ đưa ra những triển vọng về tương lai của website bán đá quý kim cương Phân tích xu hướng công nghệ, thị trường và sở thích người tiêu dùng sẽ giúp chúng ta dự đoán và đáp ứng những thay đổi trong tương lai, từ việc cải thiện trải nghiệm người dùng đến các chiến lược tiếp thị mới

2. PHÂN TÍCH THIẾT KẾ HỆ THỐNG

2.1 Phân tích yêu cầu đề bài

 Đưa ra thông tin cơ bản nhất về trang cửa hàng trực tuyến

 Lưu trữ, hiển thị dữ liệu các đầu sách, các nhà xuất bản hiện có tại cửa hàng

 Cập nhật, sửa đổi bảng giá, đầu sách mới liên tục nhằm đáp ứng nhu cầu của người sử dụng

2.2 Xác định yêu cầu khách hàng

 Chất lượng sản phẩm chính xác với mô tả trên cửa hàng

 Giá cả cập nhật phù hợp với thị trường

 Giao diện thân thiện, dễ sử dụng

 Tính bảo mật, an toàn cao Tránh nhầm lẫn, sai lệch thông tin 2.3 Yêu cầu giao diện Website

 Giao diện dễ nhìn, dễ sử dụng, dễ làm quen

 Đầy đủ các chức năng: hiển thị, mua bán, mô tả sản phẩm

 Mượt mà trong quá trình sử dụng, tránh các thao tác thừa không đáng

có gây ảnh hưởng đến trải nghiệm của người dùng

 Cho ph}p truy nhập trực tiếp: cần thiết kế cấu trúc thông tin hiệu quả nhất, giảm tối đa các bước qua hệ thống menu Càng ít màn hình→càng dễ thao tác

 Đơn giản và nhất quán: Sử dụng nhất quán màu sắc, bố cục, kiểu dạng (phông chữ, nút bấm) để tránh gây rối cho người dùng

 Có chức năng phản hồi, đối thoại

 Cung cấp một tập hợp phong phú các điều khiển đồ hoạ và liên kết tương tác trong trang web→tang thu hút sự chú ý của độc giả xuống trang web, quên đi các liên kết đa năng của trình duyệt và lôi cuốn họ vào nội dung

 Liên kết và điều khiển linh hoạt, cho ph}p đọc giả đến mọi trang đích tại trang hiện tại

3 THIẾT KẾ, XÂY DỰNG WEBSITE

3.1 Tổng Quát về công nghệ sử dụng

3.1.1 Đôi n}t về HTML VÀ CSS

a) HTML

HTML là từ viết tắt của Hypertext Markup Language, là sự kết hợp của Hypertext và Markup, hay còn được gọi là ngôn ngữ siêu văn bản HTML có chức năng giúp người dùng xây dựng và cấu trúc các phần trong trang web hoặc ứng dụng, thường được sử dụng trong phân chia các đoạn văn, heading, link, blockquotes,

Cụ thể HTML là một loại ngôn ngữ đánh dấu siêu văn bản, với mục đích cấu trúc thành các cấu trúc cơ bản của một trang web để website trở thành một

hệ thống hoàn chỉnh→ HTML dùng ngôn ngữ của mình để đánh dấu siêu văn bản, điều này sẽ giúp các văn bản trên trên website được chia bố cục rõ ràng, chia khung sườn các thành phần của trang web, tạo trang web thành một hệ thống hoàn chỉnh

*u – nhc đim ca HTML:

- ƒu điểm:

 HTML được ra đời từ rất lâu, do đó HTML có nguồn tài nguyên khổng lồ, hỗ trợ một cộng đồng người dùng lớn Bên cạnh đó, cộng đồng HTML ngày càng phát triển trên thế giới

 Mã nguồn của HTML là mã nguồn mở, do đó người dùng có thể sử dụng hoàn toàn miễn phí

 HTML được sử dụng và được sử dụng trên nhiều trình duyệt được nhiều người dùng ưa chuộng hiện nay như Internet Explorer, Chrome, FireFox, Cốc cốc,

 Học và tìm hiểu HTML đơn giản nên người học dễ dàng nắm được kiến thức và vận dụng trong xây dựng trang web căn bản

 HTML được quy định theo một tiêu chuẩn nhất định nên việc markup sẽ trở nên gọn gàng, đồng nhất bởi HTML được vận hành bởi World Wide Web Consortium (W3C)

 HTML được thực hiện dễ dàng bởi HTML được tích hợp nhiều ngôn ngữ khác nhau như PHP, Java, NodeJs, Ruby, Điều này sẽ giúp tạo thành một website hoàn chỉnh với nhiều tính năng

- Nhược điểm:

 Nhược điểm lớn nhất của HTML đó chính là chỉ có thể web tˆnh, web tˆnh có thể hiểu là những trang web chỉ hiện thông tin mà không có sự tương tác cho người dùng Do đó, khi xây dựng tính năng động hoặc xây dựng hệ thống website có sự tương tác với người dùng, lập trình viên cần phải dùng thêm JavaScript hoặc ngôn ngữ backend của bên thứ ba

 HTML thường chỉ có thể thực thi những thứ logic và cấu trúc nhất định, HTML không có khả năng tạo sự khác biệt và mới mẻ

 Một số trình duyệt vẫn còn chậm trong viết hỗ trợ các phiên bản mới của HTML, đặc biệt là HTML5

 Một số trình duyệt không thể render những tag mới trong HTML5 b) CSS

CSS – Cascading Style Sheet là một ngôn ngữ lập trình được thiết kế vô cùng đơn giản, dễ sử dụng Với CSS hướng tới mục tiêu chính là giúp đơn giản hóa được quá trình tạo ra các website

Nhiệm vụ chính của CSS là thực hiện việc xử lý giao diện của một trang web cụ thể Đó là những yếu tố như màu sắc văn bản, hay khoảng cách giữa các đoạn, hoặc kiểu font chữ, hình ảnh, bố cục, màu nền, đều có thể thay đổi, chỉnh sửa theo ý muốn với hỗ trợ của CSS

*u – nhc đim ca CSS:

- ƒu điểm:

 Khả năng tiết kiệm thời gian: CSS khi sử dụng có thể viết lần đầu, đồng thời sử dụng lại trong các trang HTML tiếp theo KHông chỉ vậy, chúng ta hoàn toàn có thể xác định được một kiểu cho từng thành phần HTML và cũng áp dụng được cho nhiều trang web khác khi cần thiết

 CSS giúp khả năng tải trang nhanh chóng: Đặc trưng của CSS khi sử dụng là ít mã hơn Bởi thế mà thời gian tải xuống nhanh chóng, giúp tiết kiệm thời gian đáng kể

 Dễ dàng khi thực hiện bảo trì: Khi cần chúng ta chỉ cần thay đổi một kiểu và mọi thành phần trong tất cả những website thì lúc này CSS sẽ hỗ trợ cập nhật hoàn toàn tự động

 CSS sở hữu thuộc tính rộng: CSS được đánh giá cao nhờ sở hữu nhữ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

-Nhược điểm:

 CSS hoạt động khác biệt cho từng trình duyệt.

 Khá khó khăn cho người mới

 Định dạng của web có khả năng gặp rủi ro: CSS là hệ thống dựa trên văn bản mở nên việc truy cập khá dễ dàng→định dạng toàn bộ của web hoàn toàn có thể chịu tổn thương, gặp gián đoạn khi có hành động, hoặc tai nạn nào xảy ra với tệp

3.1.2 Tổng quan về NOTEPAD++

Notepad++ là trình soạn thảo văn bản và trình soạn thảo mã nguồn cho

Microsoft Windows Phần mềm hỗ trợ chỉnh sửa theo thẻ, cho ph}p làm việc với nhiều tệp đang mở trong một cửa sổ Tên của dự án xuất phát từ C điều hành tăng

Notepad++ được phân phối dưới dạng phần mềm miễn phí Lúc đầu, dự

án được lưu trữ trên SourceForge.net, từ đó phần mềm đã được tải xuống hơn 28 triệu lần, và hai lần giành Giải thưởng Lựa chọn Cộng đồng SourceForge cho Công cụ dành cho nhà phát triển tốt nhất Dự án đã được lưu trữ trên TuxF Family từ năm 2010 đến 2015; kể từ năm 2015, Notepad ++ đã được lưu trữ trên GitHub Notepad++ sử dụng thành phần soạn thảo Scrintilla

3.2 Chi tiết website

* Tạo Folder lưu trữ

Hình 3.1 : Folder lu trữ web trong XAMPP

*Xây Dựn thành phần

-Phần Header:

 code :

 Sản Phẩm :

Hình 3.2 : Phần Header và menu trang

-Phần Banner :

 code :

 Sản Phẩm :

Hình 3.3 : Phần banner đầu trang

-Phần body :

 code :

 Sản phẩm :

Hình 3.4 : Phần body danh mục sản phẩm

-Phần Footer:

 code :

 Sản phẩm :

Hình 3.5 : Phần Footer

3.3 Các Chức Năng Cụ Thể

3.3.1 Tìm Kiếm và Lọc Sản Phẩm:

Tìm Kiếm Nâng Cao: Cung cấp công cụ tìm kiếm nâng cao với các tiêu chí như loại đá, màu sắc, giá, và nguồn gốc để giúp khách hàng dễ dàng lựa chọn theo nhu cầu cụ thể

3.3.2 Danh Mục và Sắp Xếp:

Danh Mục Rõ Ràng: Phân chia sản phẩm vào các danh mục rõ ràng như

đá quý theo loại, màu sắc, hoặc mức giá, giúp người dùng dễ dàng chọn lựa

Sắp Xếp Theo Nhu Cầu: Cho ph}p sắp xếp sản phẩm theo mức độ phổ biến, giảm giá, hay sản phẩm mới để khách hàng có cái nhìn tổng quan về sự đa dạng

3.3.3 Chi Tiết Sản Phẩm:

Mô Tả Sản Phẩm: Cung cấp mô tả chi tiết về từng sản phẩm, bao gồm nguồn gốc, chất lượng, kích thước và các thông số kỹ thuật khác

Hình Ảnh 360 Độ: Cho ph}p xem sản phẩm từ nhiều góc độ để hiểu rõ hơn về chi tiết và vẻ ngoại hình của đá quý

3.3.4 Tương Tác Xã Hội:

Chia Sẻ và Bình Luận: Tích hợp các chức năng chia sẻ và bình luận giúp khách hàng chia sẻ ý kiến, trải nghiệm và hình ảnh về sản phẩm

Đánh Giá Sản Phẩm: Cho ph}p khách hàng đánh giá sản phẩm, giúp tạo ra một nguồn thông tin đáng tin cậy cho người mua sắm

3.3.5 Giỏ Hàng và Thanh Toán:

Giỏ Hàng Tiện Lợi: Khả năng thêm, sửa đổi và xem lại giỏ hàng trước khi thanh toán

Thanh Toán An Toàn: Sử dụng các phương thức thanh toán an toàn và tiện lợi, kèm theo các chứng chỉ bảo mật đảm bảo an toàn thông tin cá nhân của khách hàng

3.3.6 Trang Cá Nhân:

Quản Lý Tài Khoản: Cho ph}p khách hàng đăng ký tài khoản, theo dõi đơn hàng, và quản lý thông tin cá nhân một cách dễ dàng

ƒu Đãi và Thông Báo: Gửi thông báo về ưu đãi đặc biệt và sự kiện quan trọng cho người dùng đã đăng ký

3.3.7 Chăm Sóc Khách Hàng:

Chat Trực Tuyến: Cung cấp tính năng chat trực tuyến để hỗ trợ khách hàng trong quá trình mua sắm

Hỗ Trợ Trực Tuyến: Duy trì hệ thống hỗ trợ trực tuyến để giải đáp thắc mắc và giúp đỡ khách hàng nhanh chóng

3.3.8 Tin Tức và Bài Viết:

Blogs và Tin Tức: Cung cấp nội dung giáo dục và thú vị về thế giới đá quý, giúp tạo nên trải nghiệm mua sắm thông tin và đầy đủ

3.3.9 Bảo Mật và Quản Lý Dữ Liệu:

Chính Sách Bảo Mật: Đảm bảo rằng thông tin cá nhân của khách hàng được bảo vệ một cách an toàn và tuân thủ các chuẩn bảo mật hiện đại

Chúng tôi cam kết mang đến cho khách hàng trải nghiệm mua sắm trực tuyến toàn diện và đầy đủ thông tin, đồng thời đảm bảo sự an toàn và tiện lợi trong quá trình giao dịch

TỔNG KẾT

Trong quá trình thiết kế website bán đá quý kim cương, chúng tôi đã hết sức tận tâm để xây dựng một nền tảng trực tuyến không chỉ đẹp mắt mà còn mang lại trải nghiệm mua sắm thú vị và chất lượng cho khách hàng Dưới đây là một số điểm tổng kết về những gì chúng tôi đã đạt được và những gì chúng tôi mong đợi:

Thành Tựu Đạt Được:

 Thiết Kế Sang Trọng: Website được thiết kế với sự chú ý đặc biệt đến các yếu tố thiết kế, tạo nên một không gian trực tuyến đẳng cấp

và thú vị

 Đa Dạng Sản Phẩm: Danh mục sản phẩm đa dạng, từ các viên đá quý nhỏ xinh đến những tác phẩm nghệ thuật lớn, đảm bảo đáp ứng đầy đủ nhu cầu và sở thích của khách hàng

 Trải Nghiệm Người Dùng Tốt: Giao diện thân thiện và tích hợp nhiều chức năng tương tác giúp người dùng dễ dàng điều hướng và tìm kiếm sản phẩm

 Nội Dung Giáo Dục: Blogs và tin tức cung cấp thông tin giáo dục

và thú vị về thế giới đá quý, tăng cường kết nối với cộng đồng yêu trang sức

Những Kỳ Vọng Cho Tương Lai:

 Mở Rộng Danh Mục Sản Phẩm: Tiếp tục mở rộng danh mục sản phẩm để mang lại sự đa dạng và lựa chọn đa dạng hơn cho khách hàng

 Phát Triển Cộng Đồng: Xây dựng cộng đồng trực tuyến đam mê đá quý kim cương thông qua việc tương tác xã hội và diễn đàn

 Cải Thiện Trải Nghiệm Khách Hàng: Liên tục nâng cao trải nghiệm khách hàng bằng cách tối ưu hóa giao diện, cải thiện dịch vụ hỗ trợ,

và đáp ứng nhanh chóng với phản hồi của khách hàng

 Bền Vững và Trách Nhiệm Xã Hội: Tăng cường nỗ lực về bền vững trong ngành và đảm bảo nguồn gốc của sản phẩm để thúc đẩy trách nhiệm xã hội và môi trường

Chúng tôi hy vọng rằng trang web bán đá quý kim cương này không chỉ là nơi mua sắm, mà còn là điểm đến đặc biệt cho những người yêu thích vẻ đẹp tinh

tế và quý phái của thế giới đá quý kim cương Xin chân thành cảm ơn sự quan tâm và ủng hộ của quý khách hàng!

TÀI LIỆU THAM KHẢO