báo cáo phân tích thiết kế website bán hoa tươi. Cùng với sự phát triển của công nghệ thông tin, nhu cầu xây dựng website hiện tại ở bất cứ đâu đều cần. trong đó cửa hàng hoa cũng không ngoại lệ. Tôi tải lên bản phân tích này giúp mọi người có thể có thêm tài liệu
MỞ ĐẦU Ngày nay, với phát triển mạnh mẽ Công nghệ thông tin ảnh hưởng sâu rộng tới mặt đời sống Nó tảng kinh tế tri thức thước đo trình độ phát triển quốc gia Và yếu tố hàng đầu định đến phát triển công ty hay tổ chức Xã hội kinh tế phát triển đòi hỏi công nghệ phải phát triển Công nghệ phát triển người phát minh nhiều thiết bị công nghệ số để phục vụ nhiều mặt sống Nhất thời đại Việt Nam hội nhập vào WTO với phát triển mạnh mẽ công nghệ thông tin áp dụng mạnh mẽ lĩnh vực sống Việc xây dựng website để phục vụ nhu cầu riêng cá nhân, tổ chức không lấy làm xa lạ Với vài thao tác đơn giản bạn làm chủ website mà bạn yêu thích: website xe hơi, website giới thiệu gia đình, bạn bè, Đối với hoạt động công ty kinh doanh có quy mô lớn tăng cường, mở rộng xây dựng website tốt quảng bá hình ảnh công ty dịch vụ, sản phẩm đến với khách hàng có nhu cầu Xuất phát từ ý tưởng với sở thích kinh doanh nhóm em định chọn đề tài :”Xây dựng website giới thiệu hỗ trợ bán hàng cho cửa hàng hoa tươi ngọc anh” Bài báo cáo gồm: Chương 1: Tổng quan ngôn ngữ HTML, CSS, mã nguồn mở Wordpress Chương 2: Phân tích thiết kế website giới thiệu hỗ trợ bán hàng cho cửa hàng hoa tươi ngọc anh Chương 3: Xây dựng website mô Kết luận: Tổng kết việc làm hướng phát triển CHƯƠNG 1: TỔNG QUAN VỀ NGÔN NGỮ HTML VÀ CSS, MÃ NGUỒN MỞ WORDPRESS 1.1 Tìm hiểu HTML 1.1.1 Giới thiệu HTML HTML( HyperText Markup Language ) ngôn ngữ đánh dấu siêu văn thiết kế để tạo nên trang web với mẫu thông tin trình bày World Wide Web HTML định nghĩa ứng dụng đơn giản SGML sử dụng tổ chức cần đến yêu cầu xuất phức tạp Tên gọi ngôn ngữ đáng dấu siêu văn có ý nghĩa sau: Đánh dấu(Markup): HTML ngôn ngữ thẻ đánh dấu(tag) Các thẻ xác định cách thức trình bày đoạn văn tương ứng hình Ngôn ngữ(Language): HTML ngôn ngữ tương tự ngôn ngữ lập trình, nhiên đơn giản Nó có cú pháp chặt chẽ để viết lệnh thực việc trình diễn văn Các từ khóa có ý nghĩa xác định cộng đồng Internet thừa nhận sử dụng lại Ví dụ b= bold, ul= unordered list,… Siêu văn bản(HyperText): HTML cho phép liên kết nhiều trang văn rải rác khắp nơi Internet Nó có tác dụng che dấu phức tạp Internet người sử dụng Người dùng Internet đọc văn mà không cần biết đến văn nằm đâu, hệ thống xây dựng phức tạp nào, HTML thực vượt khuân khổ khái niệm văn cổ điền 1.1.2 Các phiên HTML HTML Tim Berners-Lee phát triển vào năm 1989 viện thí nghiệm CERN- Thụy Sĩ Điều đánh dấu bước phát triển cho xã hội thông tin Ban đầu, ông làm việc cho viện thí nghiệm CERN mà việc thí nghiệm phải hợp tác nghiên cứu với nhiều viện khác giới Tim nảy ý tưởng cho phép nhà nghiên cứu tham khảo liệu từ nơi mà liệu tập hợp tổ chức lại cho đọc tài liệu này, nhà nghiên cứu xem tài liệu liên quan cách nhấn vào liên kết hiển thị hình HTML phát triển dựa ngôn ngữ Standard Generalized Markup Language(SGML) SGML hệ thống tổ chức găn thẻ tài liệu Ngôn ngữ không quy định định dạng, nguyên tắc mà quy định cụ thể quy tắc cho thẻ Tuy nhiên, đến năm 1990, phiên HTML tung gần sau năm, ngôn ngữ HTML ứng dụng Tháng năm 1993, trình duyệt Mosaic xuất nhóm Mosaic mở rộng thêm số thẻ images,… HTML trải qua phiên gồm: HTML phiên đầu tiên(1990), HTML2(1994), HTML3(1995),HTML4(1997) Vào năm 1994, tập đoàn tài World Wide Web(W3c) thành lập với người đứng đầu Tim Bernes-Lee đứng hỗ trợ cho phát triển HTML Qua phiên phát triển, HTML ngày có nhiều thẻ mới, tính tính đơn giản hóa ngày cao HTML4 đươc phát triển vào năm 1997 phiên thành công sử dụng phổ biến Với nhiều thẻ Button, FieldSet, Frame, Iframe,Span, Ngoài ra, HTML4 hỗ trợ hiển thị hầu hết ngôn ngữ giới dựa theo chuẩn Universal Character Set Thay phiên trước thị theo chuẩn ISO-8859-1 HTML4 hỗ trợ số tính quan trọng sau: - Đã hỗ trợ ngôn ngữ lập trình client-script nhúng thêm tập tin script bên vào Hỗ trợ kiện client-script onclick, onchange,… cho thẻ - Đặc biệt HTML4 hỗ trợ CSS với thuộc tính ID,Class Style Ba thuộc tính giúp thẻ liên kết với style khai báo CSS Ví dụ: ta có CSS : .header{ font-size: small; - } Việc tích hợp với CSS có ý nghĩa quan trọng cho nhàthiết kế web Họ sử dụng CSS chung cho kiểu thị thoải mái sáng tạo giao diện mà không cần tốn công sức trước đây(khai báo thuộc tính kiểu cho thẻ) - HTML4 hỗ trợ nhiều cho thẻ table thẻ table nhứ , , 1.1.3 Các thẻ HTML Để biểu diễn thông tin trang web, nhà thiết kế sử dụng ngôn ngữ HTML để trình bày thông tin Mỗi thông tin chi tiết đươc trình bày định dạng dựa vào cặp thẻ(tag) HTML tương ứng - Mỗi cặp thẻ bao gồm: thẻ mở thẻ đóng Tên thẻ mở thẻ đóng giống đặt cặp dấu - Trong thẻ mở thêm tham số phía sau tên thẻ - Trong thẻ đóng có thêm dấu / phía trước tên thẻ - Dữ liệu cần trình bày đặt cặp thẻ mở đóng - Có số thẻ không thiết phải viết thẻ đóng - Có thể đặt cặp thẻ HTML lồng - Cấu trúc chung thẻ HTML sau: < Ten_The thamso1= giatri1 thamso2= giatri2 …>Thông tin cần trình bày Ví dụ: chữ đậm chữ nghiêng chữ gạch chân chữ vừa đậm vừa in nghiêng 1.1.4 Cấu trúc trang HTML Tiêu đề trang web Nội dung trang web 1.1.5 Các thẻ định dạng cấu trúc tài liệu - - - - Các tham số thẻ : Tham số link alink Vlink Background Bgcolor Text Scroll Topmargin Rightmargin Ý nghĩa Chỉ định màu văn liên kết Chỉ định màu văn siêu liên kết chọn Chỉ định màu văn siêu liên kết mở Chỉ định địa ảnh dùng làm Chỉ định màu Chỉ định màu văn tài liệu Có hay cuộn Lề Lề phải 1.1.6 Các thẻ định dạng - Các thẻ định dạng đề mục: - - , , , - chỉ số trên, chỉ số dưới Căn lề văn trang web: tham số align, thẻ Định dạng font chữ: Thẻ: This is a paragraph Khi muốn thay đổi cỡ font dùng: … Trong X cỡ font có giá trị 1(nhỏ nhất) đến 7(lớn nhất) Để làm cho trang web thêm sinh động, nhiều bạn muốn trình bày nhiều kiểu font khác nhau, bạn sử dụng thuộc tính face tag để thực việc đổi font chữ … Trong fontname tên font chữ có máy tính người đọc trang web Muốn thêm màu sắc cho chữ, ta thêm thuộc tính color vào tag font Ví dụ: … … Sáu mức tiêu đề: Khi trình bày trang web, bạn phải cần đến tiêu đề theo kích cỡ, phông chữ khác HTML có tag để thực việc Để tạo tiêu đề dùng: Tên tiêu đề Trong x giá trị từ đến kích cỡ tiêu đề Sau số ví dụ: Tiêu đề cỡ Tiêu đề cỡ Tiêu đề cỡ Tiêu đề cỡ Tiêu đề cỡ Tiêu đề cỡ 1.1.7Thẻ tạo link dòng văn bản Trong đó: - Href: địa vùng trang web liên kết, url - Name: đặt tên cho vị trí đặt thẻ - Tabindex: thứ tự di chuyển ấn phím Tab - Title: văn hiển thị di chuyển chuột siêu liên kết - Target: mở trang web cửa sổ mới(_blank) cửa sổ tại(_self) frame(tên frame) Ghi chú: - Nếu đặt thuộc tính hreft= thẻ giá trị mail to: address@domain kích hoạt kết nối kích hoạt chức thư điện tử trình duyệt Ví dụ: Liên hệ: Đại học Công Nghệ Thông Tin Truyền Thông Thái Nguyên Email: contact@ictu.edu.vn Điện thoại: 02803456789 Khi nhấn vào dòng chữ Email: contact@ictu.edu.vn(dòng chữ xuất giống siêu liên kết khác) chức thư tín trình duyệt kích hoạt địa thư điện tử contact@ictu.edu.vn chèn vào địa nhận thư chương trình gửi thư 1.1.8 Thẻ chèn ảnh Tag dùng để nhúng image vào văn HTML Tag có thuộc tính cần thiết src alt, src: đường truyền tham chiếu đến image, alt: sử dụng văn thay di chuyển chuột lên image, muốn văn hiển thị di chuyển chuột lên image dùng thuộc tính title thay Ví dụ: để chèn hình ảnh có tên doiche.jpg ta làm sau: [...]... Zealand và Ý Với đội ngũ chuyên gia có nhiều năm kinh nghiệm trong kỹ thuật chăm sóc hoa, Hoa tươi ngọc 28 anh luôn cam kết mang đến cho khách hàng những sản phẩm chất lượng với giá hợp lý Về phía cửa hàng: Hàng ngày cửa hàng liên tục làm ra các sản phẩm mới Liên tục và nhanh chóng cập nhật những mặt hàng mới In catalog để giới thiệu các sản phẩm mới cũng như các đợt khuyến mại của cửa hàng Thực hiện giới. .. Thực hiện giới thiệu và bán hàng cho khách hàng có nhu cầu, lưu hóa đơn thanh toán để tổng kết báo cáo Về phía khách hàng: Trực tiếp đến cửa hàng để mua các sản phẩm có nhu cầu Khách hàng đến với cửa hàng sẽ được phục vụ nhiệt tình chu đáo Tại siêu thị có phiếu thăm dò dành cho khách hàng Khách hàng có thể đánh giá, nhận xét hoặc góp ý với cửa hàng Nếu là khách quen của siêu thị hoặc khách hàng mua với... 2.3.3.2 UC gửi hỗ trợ trực tuyến Mục đích: Khách hàng hỏi đáp trực tiếp với hệ thống, hệ thống tiếp nhận và trả lời lại khách hàng yêu cầu hỗ trợ Tác nhân: Khách hàng Mô tả : Khách hàng lựa chọn hỗ trợ trực tuyến trên giao diện hỗ trợ trực tuyến của website Các luồng sự kiện chính: Hành động của tác nhân Phản ứng của hệ thống 1 Khách hàng gửi hỗ trợ trực tuyến tới 2 Hệ thống tiếp nhận và trả lời yêu... hỗ trợ bán hàng cho cửa hàng hoa tươi Hiện nay việc kinh doanh càng ngày càng phát triển.Các siêu thị mọc lên càng ngày càng nhiều, sự cạnh tranh càng ngày càng trở nên khốc liệt nên việc quản lý hay giới thiệu sản phẩm đến với khách hàng ngày càng trở nên khó khăn và phức tạp Do đó, tin học hóa việc giới thiệu sản phẩm đến khách hàng là điều tất yếu 2.1 Khảo sát hiện trạng Hoa tươi ngọc anh là kết quả... giai đoạn này đều hỗ trợ CSS1 Năm 1998, CSS2 ra đời và đã thêm vào rất nhiều tính năng mới cho CSS CSS2 cho phép canh chỉnh vị trí cho các thẻ của HTML, cho phép thay đổi font chữ trong trang web và cho phép định dạng kiểu in Hầu hết các trình duyệt ngày nay đều hỗ trợ CSS2 1.2.3 Các thuộc tính cơ bản trong CSS 1.2.3.1 Các vấn đề về văn bản và cách định dạng văn bản Thuộc tính CSS text cho phép bạn hoàn... vào address bar: localhost/web-wp Điền các thông số về Site title, tên user và mật khẩu, email quản trị của bạn Click vào Install WordPress - Ok, xong 26 4- Tiến hành login để vào trang quản trị để điền thông tin như hình Sau này, khi muốn truy cập trang quản trị, các bạn chỉ cần sử dụng đường dẫn có dạng http://yourdomain.com/wp-admin.php: 27 CHƯƠNG 2: PHÂN TÍCH THIẾT KẾ WEBSITE GIỚI THIỆU và hỗ trợ. .. ra Khi lượng thông tin nhập vào lớn như cần cập nhập thường xuyên, cần có cơ chế lưu trữ hợp lý 2.3 Phân tích thiết kế 2.3.1 Các tác nhân và Use Case của hệ thống Tác nhân Khách hàng Use Case Xem thông tin Gửi hỗ trợ trực tuyến Người quản trị Liên hệ Đăng nhập hệ thống Quản lý liên hệ Quản lý sản phẩm Quản lý loại sản phẩm 31 Quản lý tài khoản Quản lý giới thiệu Quản lý hỗ trợ trực tuyến Quản lý thông... các ứng dụng trên công nghệ thông tin vào quá trình hoạt động của cửa hàng, từ đó xây dựng wensite giới thiệu đảm bảo yêu cầu sau: • Tự động trong quản lý thông tin đầu vào của các mặt hàng như: thêm, sửa, xoá, cập nhật • Tự động trong việc tìm kiếm hàng hoá theo tiêu chí đề trước • Hỗ trợ lập báo cáo, thống kê mặt hàng, khách hàng, • Quản lý thông tin của khách hàng, nhân viên… • Hệ thống phải thân... tuyến tới 2 Hệ thống tiếp nhận và trả lời yêu cầu hệ thống khách hàng hỗ trợ Biểu đồ trình tự và cộng tác UC gửi hỗ trợ trực tuyến 35 Hình 2.6 Biểu đồ trình tự UC gửi hỗ trợ trực tuyến Hình 2.7 Biểu đồ cộng tác UC gửi hỗ trợ trực tuyến 2.3.3.3 UC Liên hệ Mục đích: Giúp cho khách hàng có thể gửi những yêu cầu hoặc thắc mắc tới người quản trị website 36 ... nhân Khách hàng 32 Hình 2.2 Biểu đồ UseCase mức chi tiết cho tác nhân Khách hàng o Tác nhân Người quản trị Hình 2.3 Biểu đồ UseCase mức chi tiết cho tác nhân Người quản trị 33 2.3.3 Đặc tả Use Case 2.3.3.1 UC Xem thông tin Mục đích: Khách hàng xem thông tin về sản phẩm, xem giới thiệu về cửa hàng, các hình ảnh, bản đồ đường đi đến cửa hàng, các thông tin khuyến mãi, các tin tức cập nhật hàng ngày của ... chân, chữ màu,…) khiến mã nguồn trang web gọn gàng hơn, tách nội dung trang web định dạng hiển thị, dễ dàng cho việc cập nhật nội dung - Tạo kiểu dáng áp dụng cho nhiều trang Web, giúp tránh lặp... danh sách Danh sách dùng để trình bày thông tin thành dạng dễ đọc Chẳng hạn để tạo bảng mục, nội dung dãy tài liệu hay chương trình HTML có hai kiểu danh sách, danh sách có thứ tự(ordered) danh... nghiêng 1.1.4 Cấu trúc trang HTML Tiêu đề trang web Nội dung trang web 1.1.5 Các thẻ định dạng cấu trúc tài liệu - -