LỜI NÓI ĐẦUNgày nay với nền công nghệ thông tin bùng nổ ở việt nam đã đạt đến mức mà hầu hếtmọi người đều biết đến sử dụng Internet thì việc thiết kế website bán hàng đồng hồ trênmạng là
KHẢO SÁT VÀ PHÂN TÍCH HỆ THỐNG
CHỨC NĂNG
Ngày nay với nền công nghệ thông tin bùng nổ ở việt nam đã đạt đến mức mà hầu hết mọi người đều biết đến sử dụng Internet thì việc thiết kế website bán hàng đồng hồ trên mạng là kênh thông tin không thể thiếu giúp khách hàng tìm thấy các sản phẩm, dịch vụ mà bạn cung cấp Thiết kế website bán hàng đồng hồ có nhiều điểm ưu việt hơn so với những cách mua, bán hàng trực tiếp truyền thống Kỹ thuật số giúp chúng ta tiết kiệm đáng kể các chi phí nhờ chi phí vận chuyển trung gian, chi phí giao dịch và đặc biệt là giúp tiết kiệm thời gian để con người đầu tư vào các hoạt động khác Hơn nữa, thương mại điện tử còn giúp con người có thể tìm kiếm tự động theo nhiều mục đích khác nhau, tự động cung cấp thông tin theo nhu cầu và sở thích của con người Giờ đây, con người có thể ngồi tại nhà để mua sắm mọi thứ theo ý muốn và các website bán hàng trên mạng sẽ giúp ta làm được điều đó Chính vì vậy, các công nghệ mã nguồn mở trở nên được chú ý vì các tính năng của nó Giá thành rẻ và được hỗ trợ rất nhiều trên mạng sẽ giúp ta nhanh chóng Thiết kế các website bán hàng thân thiện và dễ sử dụng với người dùng. Chính vì vậy trong bài báo cáo này tôi chọn đề tài về: “Thiết kế website cửa hàng đồng hồ Đức Thịnh” Đây là một hệ thống đơn giản nhưng đủ mạnh để cho phép khách hàng nhanh chóng tìm được sản phẩm mà mình mong muốn. Đề tài tiểu luận gồm các phần được phân chương như sau:
Chương 1: Khảo sát và phân tích hệ thống
Chương 2: Giới thiệu công nghệ
Chương 4:Kết luận và hướng phát triển
DANH SÁCH CÁC KÝ TỰ, CHỮ VIẾT TẮT 8
CHƯƠNG 1 KHẢO SÁT VÀ PHÂN TÍCH HỆ THỐNG 9
4 MỤC TIÊU CỦA ĐỀ TÀI 10
6 ĐỐI TƯỢNG CỦA ĐỀ TÀI 10
7 MỘT SỐ TRANG CHÍNH CỦA WEBSITE 10
CHƯƠNG 2 GIỚI THIỆU CÔNG NGHỆ 11
2 Giới thiệu về Adobe Dreamweaver 12
CHƯƠNG 3: GIAO DIỆN CHƯƠNG TRÌNH 14
1.2 Giao diện trang đồng hồ nam 16
1.3 Giao diện trang đồng hồ nữ 17
1.4 Giao diện đồng hồ cặp 18
1.5 Giao diện phụ kiện đồng hồ 19
1.9 Giao diện thanh tìm kiếm sản phẩm 23
1.17 Giao diện các hãng đồng hồ 30
1.18 Giao diện các đồng hồ bán chạy và lượt truy cập 31
1.19 Giao diện đồng hồng hãng Casio 32
1.20 Giao diện đồng hồ hãng Rolex 33
1.21 Giao diện đồng hồ hãng Citizen 34
1.22 Giao diện đồng hồ hãng Seiko 35
1.23 Giao diện đồng hồ hãng Bulova 36
1.24 Giao diện đồng hồ hãng Orient 37
1.25 Giao diện đồng hồ hãng Titan 38
1.26 Giao diện đồng hồ hãng Tissot 39
1.27 Giao đồng hồ hãng Fossil 40
1.28 Giao diện chi tiết đồng hồ 41
1.29 Giao diện chi tiết đồng hồ nam 42
1.30 Giao diện chi tiết đồng hồ nữ 43
1.31 Giao diện chi tiết đồng hồ cặp 43
CHƯƠNG 4: KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN 44
3 Hướng phát triển của đề tài 45
Hình 1 1 Giao diện trang chủ 15
Hình 1 2 Giao diện trang đồng hồ nam 16
Hình 1 3 Giao diện trang đồng hồ nữ 17
Hình 1 4 Giao diện trang đồng hồ cặp 19
Hình 1 5 Giao diện phụ kiện đồng hồ 20
Hình 1 6 Giao diện giới thiệu 21
Hình 1 7 Giao diện trang liên hệ 22
Hình 1 8 Giao diện trang Fanpage 23
Hình 1 9 Giao diện thanh tìm kiếm sản phẩm 23
Hình 1 10 Giao diện giỏ hàng 24
Hình 1 11 Giao diện trả góp 25
Hình 1 12 Giao diện trả góp 26
Hình 1 13 Giao diện bảo hành 27
Hình 1 14 Giao diện vận chuyển 28
Hình 1 15 Giao diện đăng nhập 29
Hình 1 16 Giao diện đăng ký 30
Hình 1 17 Giao diện các hãng đồng hồ 31
Hình 1 18 Giao diện các đồng hồ bán chạy 32
Hình 1 19 Giao diện đồng hồng hãng Casio 33
Hình 1 20 Giao diện đồng hồ hãng Rolex 34
Hình 1 21 Giao diện đồng hồ hãng Citizen 35
Hình 1 22 Giao diện đồng hồ hãng Seiko 36
Hình 1 23 Giao diện đồng hồ hãng Bulova 37
Hình 1 24 Giao diện đồng hồ hãng Orient 38
Hình 1 25 Giao diện đồng hồ hãng Titan 39
Hình 1 26 Giao diện đồng hồ hãng Tissot 40
Hình 1 27 Giao đồng hồ hãng Fossil 41
Hình 1 28 Giao diện chi tiết đồng hồ 42
Hình 1 29 Giao diện chi tiết đồng hồ nam 42
Hình 1 30 Giao diện chi tiết đồng hồ nữ 43
Hình 1 31 Giao diện chi tiết đồng hồ cặp 43
Tên Trang Chức năng của trang
1 Trang Chủ Đây là trang chính của cửa hàng, giới thiệu sơ lược về cửa hàng, các loại đồng hồ và bán chạy của cửa hàng
Hồ Nam, Nữ Và Đồng Hồ cặp Đây là trang giúp cho khách hàng có thể dễ dàng lọc sản phẩm theo nhu cầu
Người dùng đăng ký tài khoản để trở thành khách hàng của cửa hàng
Người dùng đăng nhập tài khoản để đặt mua sản phẩm của cửa hàng
Mật Khẩu Đây là trang mà nếu khách hàng có nhu cầu đổi mật khẩu nếu muốn.
Mục Sản Phẩm Đây là trang khách hàng xem hoặc tham khảo các loại sản phẩm có sẵn trong cửa hàng để tùy ý lựa chọn
Tiết Đồng Hồ Đây là trang khách hàng nhấn vào từng loại đồng hồ để xem chi tiết.
Trang Trả góp Khách hàng có thể tra cứu thông tin hỗ trợ trả góp từ cửa hàng
Hãng Đồng Hồ Đây là trang giúp cho khách hàng xem, chọn các hãng đồng hồ mà mình muốn mua một cách nhanh chóng
Hàng Đây là trang khách hàng cần xem lại những sản phẩm mình đã chọn
Trang Chính sách bảo hành
Trang này gồm các chính sách bảo hành của cửa hàng mà khách hàng có thể tham khảo
1 Trang Đổi Trả Trang này giúp khách hàng hiểu rõ hơn về quy
Trang này giúp khách hàng có thể xem qua các phương thức vận chuyển của cửa hàng
Trang này giúp khách hàng có thể tìm kiếm thông tin liên hệ đến website một cách nhanh chóng
Trang giới thiệu Đây là trang giúp cho mọi người xem biết thêm về thông tin của cửa hàng
Trang này giúp khách hàng có thể đi đến trang liên kết với Fanpage của cửa hàng
DANH SÁCH CÁC KÝ TỰ, CHỮ VIẾT TẮT
Từ viết tắt Giải thích
CSDL Cơ sở dữ liệu ĐVT Đơn vị tính
CNTT Công Nghệ thông tin
HTML Hyper Text Markup Language
CHƯƠNG 1 KHẢO SÁT VÀ PHÂN TÍCH HỆ THỐNG
Thiết kế website cho Cửa Hàng Đồng Hồ Đức Thịnh nhằm giới thiệu và bán các mẫu đồng hồ chính hãng, giúp khách hàng dễ dàng tra cứu chi tiết sản phẩm và giá cả chính xác Trang web tích hợp các chức năng quan trọng như thương mại điện tử, thanh toán trực tuyến và tìm kiếm sản phẩm nhanh chóng, nâng cao trải nghiệm mua sắm cho người tiêu dùng Với giao diện chuyên nghiệp, thân thiện, website góp phần tăng khả năng tiếp cận khách hàng và thúc đẩy doanh số bán hàng cho Cửa Hàng Đồng Hồ Đức Thịnh.
- Cho phép cập nhật hàng vào CSDL.
- Hiển thị danh sách các mặt hàng theo từng loại.
- Hiển thị hàng hóa khách hàng đã chọn mua.
- Hiển thị thông tin khách hàng.
- Quản lý đơn đặt hàng.
- Cập nhật hàng hóa, nhà sản xuất,loại hàng,tin tức.
- Thống kê các khách hàng mua trong ngày, trong khoảng thời gian
YÊU CẦU ĐẶT RA
a Thiết bị và phần mềm
- Máy tính có thể thiết kế được web
- Phần mềm thiết kế Web: Dreamwear,sothink,flast b Yêu cầu trang web
Thứ nhất: phần khách hàng:
Khách hàng là những người có nhu cầu mua sắm hàng hóa, họ sẽ tìm kiếm các mặt hàng cần thiết trong hệ thống và đặt mua các sản phẩm phù hợp Để đáp ứng nhu cầu này, nền tảng bán hàng cần có các chức năng chính như: công cụ tìm kiếm dễ sử dụng, hệ thống hiển thị sản phẩm rõ ràng, quy trình đặt hàng nhanh chóng, và các phương thức thanh toán đa dạng nhằm mang lại trải nghiệm mua sắm thuận tiện và hài lòng cho khách hàng.
- Hiển thị danh sách các mặt hàng của cửa hàng để khách hàng xem, lựa chọn và mua
- Khách hàng xem các thông tin tin tức mới, khuyến mãi trên trang web
Sau khi khách hàng chọn và đặt hàng trực tiếp, hệ thống sẽ hiển thị đơn hàng để khách hàng dễ dàng nhập thông tin mua hàng và kiểm tra hoá đơn Việc này giúp quá trình đặt hàng diễn ra thuận tiện và rõ ràng hơn Đảm bảo khách hàng có thể xem và xác nhận đầy đủ các chi tiết trong hoá đơn trước khi hoàn tất giao dịch.
Thứ hai, người quản trị là người làm chủ ứng dụng, có quyền kiểm soát toàn bộ hoạt động của hệ thống Họ được cấp username và password để đăng nhập, từ đó thực hiện các chức năng quản lý và vận hành hệ thống một cách an toàn và hiệu quả.
- Chức năng cập nhật, sửa, xoá các mặt hàng, loại hàng, nhà sản xuất, tin tức.(phải kiểm soát đ ợc hệthống) Nó đòi hỏi sự chính xác.ƣ
- Tiếp nhận kiểm tra đơn đặt hàng của khách hàng Hiển thị đơn đặt hàng.
Trang web cần cung cấp thống kê theo ngày và khoảng thời gian để dễ dàng theo dõi hiệu quả hoạt động Giao diện của trang phải thân thiện và dễ sử dụng, mang tính thẩm mỹ cao để giúp khách hàng dễ dàng tìm thấy thông tin cần thiết Ngoài ra, trang nên cập nhật các thông tin quảng cáo hấp dẫn và tin tức khuyến mãi để thu hút sự chú ý của khách hàng Việc đảm bảo an toàn tuyệt đối cho thông tin khách hàng trong quá trình đặt mua qua mạng là yếu tố quan trọng hàng đầu Đồng thời, trang web cần liên tục đổi mới và làm mới nội dung để duy trì sự hấp dẫn và cạnh tranh trên thị trường.
MỤC TIÊU CỦA ĐỀ TÀI
+ Thiết kế Website cho cửa hàng bán đồng hồ
Ý NGHĨA CỦA ĐỀ TÀI
+ Đưa sản phẩm của công ty đến đến gần hơn với người tiêu dùng.
MỘT SỐ TRANG CHÍNH CỦA WEBSITE
Trong bối cảnh nền công nghệ thông tin phát triển vượt bậc tại Việt Nam, việc thiết kế website bán hàng đồng hồ trực tuyến ngày càng trở nên thiết yếu để khách hàng dễ dàng tiếp cận các sản phẩm và dịch vụ Website bán hàng có nhiều ưu điểm vượt trội so với phương thức truyền thống, như tiết kiệm chi phí vận chuyển và giao dịch, đồng thời giúp người kinh doanh tối ưu hóa thời gian để tập trung vào hoạt động khác Thương mại điện tử còn tự động cung cấp thông tin phù hợp với sở thích và nhu cầu của khách hàng, mang lại trải nghiệm mua sắm tiện lợi ngay tại nhà Các công nghệ mã nguồn mở với chi phí thấp và khả năng hỗ trợ phong phúบน mạng giúp xây dựng các website bán hàng thân thiện, dễ sử dụng cho người dùng Chính vì vậy, đề tài “Thiết kế website cửa hàng đồng hồ Đức Thịnh” được lựa chọn để phát triển hệ thống đơn giản nhưng đủ mạnh, giúp khách hàng nhanh chóng tìm thấy sản phẩm mong muốn Báo cáo này trình bày các phần chính của dự án theo cấu trúc rõ ràng, hướng tới tối ưu hóa trải nghiệm mua sắm trực tuyến.
Chương 1: Khảo sát và phân tích hệ thống
GIỚI THIỆU CÔNG NGHỆ
Giới Thiệu Về HTML
HTML (Ngôn ngữ đánh dấu siêu văn bản) là ngôn ngữ chuẩn用于 soạn thảo các tài liệu trên World Wide Web Nó xác định cách hiển thị của trang web trong trình duyệt, đảm bảo nội dung được trình bày rõ ràng và đẹp mắt.
Ngôn ngữ HTML sử dụng các thẻ và đoạn mã lệnh để hướng dẫn trình duyệt web cách hiển thị các thành phần trên trang, bao gồm văn bản và đồ họa Điều này giúp trang web hiển thị chính xác theo đúng ý muốn của người xây dựng HTML đóng vai trò quan trọng trong việc định dạng nội dung và cấu trúc của trang web, đảm bảo trải nghiệm người dùng tốt hơn.
HTML là ngôn ngữ xác định cấu trúc của thông tin.
HTML sử dụng các thẻ và thuộc tính để hiển thị văn bản và thông tin khác nhau một cách rõ ràng Nó còn cung cấp các siêu liên kết, giúp liên kết tới các tài liệu và trang web khác một cách dễ dàng Nhờ đó, HTML trở thành nền tảng quan trọng trong việc xây dựng và tổ chức nội dung trực tuyến một cách hiệu quả.
Thiết kế được nội dung và hình thức của trang web.
Xuất bản được các tài liệu trực tuyến hay truy xuất các thông tin trực tuyến bằng cách dùng các liên kết được chèn vào trang web.
Tạo ra các biểu mẫu trực tuyến nhằm thu thập các thông tin người dùng, quản lý giao dịch….
Thêm vào đối tượng các hình ảnh video, âm thanh…
Là một tập tin có phần mở rộng là htm hoặc html
Là một tập tin văn bản thuần túy, có chứa các mã đặc biệt gọi là Tag(thẻ), thường được đặt xung quanh một khối văn bản nào đó.
Có thể viết trên nhiều trình soạn thảo: Microsoft Fontpage, notepad…và được sử dụng nhiều nhất đó là adobe dreamweaver.
Giới thiệu về Adobe Dreamweaver
Macromedia Dreamweaver 8 là trình biên soạn HTML chuyên nghiệp, giúp thiết kế, viết mã và phát triển website cùng các ứng dụng web một cách dễ dàng Với khả năng hỗ trợ cho việc viết mã HTML thủ công hoặc làm việc trong môi trường biên soạn trực quan, Dreamweaver cung cấp các công cụ hữu ích để nâng cao trải nghiệm thiết kế web của người dùng Sản phẩm phù hợp cho cả nhà phát triển web chuyên nghiệp và những người đam mê sáng tạo nội dung trực tuyến.
Các tính năng biên soạn trực quan trong Dreamweaver giúp người dùng tạo nhanh các trang web mà không cần viết mã, bằng cách xem và kéo thả các thành phần từ bảng điều khiển dễ sử dụng Bạn có thể nâng cao sản phẩm của mình bằng cách chỉnh sửa hình ảnh trong Macromedia Fireworks hoặc các ứng dụng chỉnh sửa ảnh khác, rồi chèn trực tiếp vào Dreamweaver Ngoài ra, Dreamweaver còn cung cấp các công cụ giúp đơn giản hóa việc chèn nội dung Flash vào trang web, tối ưu hóa trải nghiệm người dùng và hiệu quả thiết kế.
Dreamweaver cho phép bạn thiết kế các ứng dụng web động dựa trên dữ liệu với công nghệ máy chủ như CFML, ASP.NET, ASP, JSP và PHP, giúp phát triển các trang web linh hoạt và tương tác Nếu bạn yêu thích làm việc với dữ liệu XML, Dreamweaver cung cấp các công cụ hỗ trợ tạo trang XSLT, chèn file XML và hiển thị dữ liệu XML một cách dễ dàng trên website của mình.
Dreamweaver có khả năng tùy biến hoàn toàn, cho phép bạn tạo các đối tượng và yêu cầu riêng biệt, chỉnh sửa phím tắt và viết mã JavaScript để mở rộng chức năng Bạn có thể tùy chỉnh theo nhu cầu để thiết lập các hành vi mới, khai thác các chuyên đề Property mới và tạo ra các báo cáo site phù hợp, giúp nâng cao hiệu suất làm việc và tối ưu hóa quy trình phát triển web.
Ngôn ngữ CSS
CSS (Cascading Style Sheets) là một ngôn ngữ quy định cách trình bày cho các tài liệu viết bằng HTML, XHTML, XML, SVG, hay UML,…
CSS cung cấp nhiều thuộc tính trình bày đa dạng cho các đối tượng, giúp người dùng sáng tạo trong việc kết hợp các thuộc tính để tạo ra giao diện hấp dẫn và chuyên nghiệp Việc sử dụng các thuộc tính này không chỉ nâng cao khả năng tùy biến mà còn giúp mang lại hiệu quả cao trong thiết kế web Đặc biệt, các thuộc tính trình bày của CSS giúp tối ưu hóa trải nghiệm người dùng và tạo nên những bố cục độc đáo, sáng tạo.
CSS đã được hỗ trợ bởi tất cả các trình duyệt và hiển thị “như nhau” trên mọi hệ điều hành.
CSS cho phép áp dụng kiểu dáng từ một file CSS bên ngoài, mang lại hiệu quả đồng bộ cho các website có hàng trăm trang hoặc khi cần chỉnh sửa nhanh thuộc tính trình bày Việc sử dụng file CSS ngoài giúp quản lý mã nguồn dễ dàng hơn và nâng cao khả năng duy trì website lâu dài Đây là phương pháp tối ưu để đảm bảo tính nhất quán trong thiết kế và tiết kiệm thời gian chỉnh sửa khi cần cập nhật giao diện.
CSS được cập nhật liên tục mang lại các trình bày phức tạp và tinh vi hơn.
Ngôn ngữ Javascript
Với HTML chỉ biểu diễn thông tin chứ chưa phải là các trang Web động có khả năng đáp ứng các sự kiện từ phía người dùng.
Hãng Netscape đã giới thiệu ngôn ngữ script mang tên LiveScript để thực hiện các chức năng lập trình trong trình duyệt Sau đó, ngôn ngữ này được đổi tên thành JavaScript nhằm tận dụng sức hút và độ phổ biến của ngôn ngữ lập trình Java, giúp tăng cường khả năng ứng dụng và tiếp cận người dùng rộng rãi.
JavaScript là ngôn ngữ dưới dạng script có thể gắn với các file HTML Được trình duyệt diễn dịch, trình duyệt đọc JavaScript dưới dạng mã nguồn.
JavaScript là một ngôn ngữ dựa trên đối tượng, bao gồm nhiều kiểu đối tượng như Math với các chức năng toán học đa dạng Tuy nhiên, JavaScript không phải là ngôn ngữ hướng đối tượng truyền thống như C++ hoặc Java, mà có cách tiếp cận linh hoạt và đa dạng trong lập trình hướng đối tượng.