bài tập lớn đề tài thiết kế website bán đá quý kim cương

LỜI NÓI ĐẦUChà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 đẳngcấp và đầy đủ chức năng.Đá quý kim cương kh

BỘ GIÁO DỤC VÀ ĐÀO TẠOTRƯỜNG ĐẠI HỌC ĐẠI NAM

MỤC LỤC

LỜI NÓI ĐẦU 1

CHƯƠNG I: GIỚI THIỆU TỔNG QUÁT VỀ WEBSITE 2

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

1.2 Ứng Dụng Của Website 2

1.3 Tương Lai 2

CHƯƠNG II: PHÂN TÍCH THIẾT KẾ HỆ THỐNG 3

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

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

2.3 Yêu cầu giao diện Website 3

CHƯƠNG III: THIẾT KẾ, XÂY DỰNG WEBSITE 4

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

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

TỔNG KẾT 13

MỤC LỤC HÌNH ẢNH

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

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

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

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

Hình 3.5 : Phần Footer 10

LỜI NÓI ĐẦU

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 đẳngcấ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ểutượng của sự quý phái, sang trọng và đẳng cấp Trong thời đại ngày nay, việcthiết kế một trang web bán đá quý kim cương không chỉ là việc trình bày sảnphẩm mà còn là cơ hội để chúng em tạo ra một trải nghiệm mua sắm trựctuyế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áchnổ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ếtvề 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à antoàn.

Chúng em cũng sẽ đặt ra mục tiêu làm cho trang web không chỉ là nơimua sắm mà còn là điểm đến để khám phá và chia sẻ đam mê về đá quý kimcươ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ươngtá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ể đưatrang 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ệtvờ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!

CHƯƠNG I: 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ộtchặng đường kỹ thuật mà còn là câu chuyện về sự phát triển và tiến bộ trongngà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ẽ đàmphán về những xu hướng và thách thức đã hình thành và ảnh hưởng đến việcthiế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ịchmua bán, mà còn đóng vai trò quan trọng trong việc giáo dục và tạo cơ hội chongườ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êuthí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ựctuyế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ườitiê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

CHƯƠNG II: 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ửahà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ầucủ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 phtp 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ươngtá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 phtp đọc giả đến mọi trang đích tạitrang hiện tại

CHƯƠNG III: THIẾT KẾ, XÂY DỰNG WEBSITE

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 để đánhdấ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 webthành một hệ thống hoàn chỉnh

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

- xu điểm:

 HTML được ra đời từ rất lâu, do đó HTML có nguồn tài nguyênkhổng lồ, hỗ trợ một cộng đồng người dùng lớn Bên cạnh đó, cộng đồngHTML 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 đượcnhiề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

4

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

 HTML được thực hiện dễ dàng bởi HTML được tích hợp nhiềungôn ngữ khác nhau như PHP, Java, NodeJs, Ruby, Điều này sẽ giúp tạothà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ựnghệ 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ùngthê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ảnmớ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 đơngiả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 trangweb cụ thể Đó là những yếu tố như màu sắc văn bản, hay khoảng cách giữacá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:

- xu đ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 khisử dụng là ít mã hơn Bởi thế mà thời gian tải xuống nhanh chóng, giúp tiếtkiệ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 đổimộ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ữunhữ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ựatrê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 webhoàn toàn có thể chịu tổn thương, gặp gián đoạn khi có hành động, hoặc tainạ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 phtp làmviệ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ốnghơn 28 triệu lần, và hai lần giành Giải thưởng Lựa chọn Cộng đồngSourceForge cho Công cụ dành cho nhà phát triển tốt nhất Dự án đã được lưutrữ 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.

6

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 :

8

 Sản phẩm :

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

-Phần Footer:  code :

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ướckhi 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âncủa khách hà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ựctuyến toàn diện và đầy đủ thông tin, đồng thời đảm bảo sự an toàn và tiện lợitrong quá trình giao dịch.

12

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ứctậ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ònmang 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:

 Trải Nghiệm Người Dùng Tốt: Giao diện thân thiện và tích hợp nhiềuchứ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ảnphẩ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áchhà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 nhanhchó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 trongngà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ơimua 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âmvà ủng hộ của quý khách hàng!

14