TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN & TRUYỀN THÔNG VIỆT HÀN Khoa Khoa Học Máy Tính ĐỒ ÁN CƠ SỞ 1 Xây dựng Website Kinh Doanh Áo Thun LỜI CẢM ƠN Nhóm đề tài xin chân thành cảm ơn Khoa Công nghệ thông ti[.]
TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN & TRUYỀN THÔNG VIỆT HÀN Khoa Khoa Học Máy Tính ĐỒ ÁN CƠ SỞ Xây dựng Website Kinh Doanh Áo Thun LỜI CẢM ƠN Nhóm đề tài xin chân thành cảm ơn Khoa Công nghệ thông tin Trường Đại học Công nghệ thông tin Truyền thông Việt-Hàn tạo điều kiện tốt cho nhóm đề tài thực tốt Đồ án sở Đặc biệt nhóm đề tài xin chân thành cảm ơn nhiệt tình hướng dẫn đóng góp ý kiến thầy Hồ Văn Phi giúp nhóm đề tài hồn thành tốt Đồ án sở Nhóm đề tài xin chân thành cảm ơn! MỤC LỤC MỞ ĐẦU Giới thiệu Mục tiêu đề tài Nội dung kế hoạch thực Bố cục báo cáo Chương TỔNG QUAN VỀ CÔNG NGHỆ THIẾT KẾ WEBSITE 1.Tìm hiểu ngơn ngữ lập trình .8 Phương pháp, kết 10 Kết chương 10 Chương PHÂN TÍCH THIẾT KẾ HỆ THỐNG 11 Phân tích hệ thống 11 Các trang xây dựng 11 Thiết kế hệ thống 13 Mô tả chức 14 Chương XÂY DỰNG WEBSITE 15 Giao diện phân hệ khách hàng 15 Giao diện phân hệ quản trị 19 KẾT LUẬN 20 Kết đạt 20 Hạn chế 20 Hướng nghiên cứu .20 Thiết kế nhận diện thương hiệu 21 Phần phân công thực dự án: 21 DANH MỤC HÌNH VẼ Hình Biểu đồ usecase chức đặt hàng Hình Biểu đồ usecase chức đăng ký Hình Biểu đồ usecase chức đăng nhập Hình Biểu đồ usecase chức tìm kiếm Hình Giao diện trang chủ hiển thị Hình Giao diện sản phẩm áo Hình Giao diện danh mục tư vấn phối đồ Hình Giao diện dịch vụ tư vấn làm đẹp Hình Giao diện giỏ hàng Hình 10 Giao diện tốn Hình 11 Giao diện đăng nhập, đăng ký Hình 12 Giao diện liên hệ Hình 13 Giao diện admin MỞ ĐẦU Giới thiệu - Ngày nay, ứng dụng công nghệ thông tin việc tin học hóa xem yếu tố định hoạt động phủ, tổ chức cơng ty, cửa hàn; đóng vai trị quan trọng tạo nên bước đột phá -Việc xây dựng website để phục vụ cho nhu cầu riêng tổ chức, cơng ty chí cá nhân, ngày nay, khơng cịn q xa lạ Một vài thao tác đơn giản, người trở chủ website giới thiệu gia đình , thân hay website trình bàycác sưu tập xe chẳng hạn -Hoạt động cơng ty hay cửa hang có quy mơ lớn tăng cườngvà mở rộng họ xây website tốt Bắt nguồn từ ý tưởng này, với gợi ý Thầy giáo Võ Ngọc Đạt , chúng em thực đồ án sở “Xây dựng Wesite Kinh Doanh Áo Thun” Website giải phần khó khăn cho nhà bán hàng người tiêu dùng Mục tiêu đề tài - Xây dựng website bán hàng tương đối hoàn chỉnh, phục vụ người dùng nhanh chóng, tiện lợi Website có đầy đủ giao diện như: đưa thông tin sản phẩm, giúp người dùng mua hàng website cách nhanh chóng dễ dàng, giúp người dùng tin tức, hỏi đáp tư vấn Nội dung kế thực Trên sở mục tiêu nghiên cứu, chúng em triển khai nội dung nghiên cứu cụ thể sau: Khảo sát trạng Phân tích thiết kế hệ thống 2.1 Phân tích yêu cầu 2.2 Thiết kế Cài đặt Kết kết luận Nội dung kế hoạch thực Trang chủ: -Trình bày trang nhã, đơn giản, thân thiện với đầy đủ menu ,slide show, banner với hiệu ứng đẹp mắt Trang sản phẩm: - Hiển thị sản phẩm,chức xem thông tin chi tiết sản phẩm Trang tư vấn: Trang giỏ hàng Trang đăng ký,đăng nhập Trang quản trị website,thống kê Bố cục báo cáo Sau phần Mở đầu, báo cáo trình bày ba chương, cụ thể sau: Chương Tổng quan ngơn ngữ lập trình + Tìm hiểu ngơn ngữ lập trình + Phương pháp, kết + Kết chương Chương Phân tích thiết kế hệ thống + Phân tích hệ thống + Biểu đồ usecase + Mô tả chức Chương Xây dựng Website Kết luận Tài liệu tham khảo Chương TỔNG QUAN VỀ CƠNG NGHỆ THIẾT KẾ WEBSITE Tìm hiểu ngơn ngữ lập trình 1.1 Ngơn ngữ HTML HTML (HyperText Markup Language) - Ngôn ngữ đánh dấu siêu văn sử dụng để tạo tài liệu truy cập mạng Tài liệu HTML tạo nhờ dùng thẻ phần tử HTML File lưu máy chủ dịch vụ web với phần mở rộng “.htm” “.html” Các trình duyệt đọc tập tin HTML hiển thị chúng dạng trang web Các thẻ HTML ẩn đi, hiển thị nội dung văn đối tượng khác: hình ảnh, media Với trình duyệt kahcs hiển thị tập HTML với kế định Các trang HTML gửi qua mạng internet theo giao thức HTTP HTML cho phép nhúng thêm đối tượng hình ảnh, âm mà cịn cho phép nhúng kịch vào ngôn ngữ kịch Javascript để tạo hiệu ứng động cho trang web HTML chuẩn ngôn ngữ internet tạo phát triển tổ chức World Wide Web Consortium viết tắt W3C Trước HTML xuất theo chuẩn RFC HTML tương thích với hệ điều hành trình duyệt Khả dễ học, dễ viết ưu điểm HTML việc soạn thảo đòi hỏi đơn giản, dùng word, notepad hay trình soạn thảo văn để viết cần lưu với định dạng “.html” “.htm” tạo file chứa HTML Hiện nay, phiên HTML HTML với nhiều tính ưu việt so với phiên HTML cải tiến nhiều đặc biệt hỗ trợ mạnh mẽ phần tử multimedia mà không cần plugin HTML5 nói chung mạnh mẽ nhiều khơng tốc độ thích ứng cao mà khả hỗ trợ API (Application Programming Interface - giao diện lập trình ứng dụng) DOM (Document Object Model - đối tượng thao tác văn bản) 1.2 Ngôn ngữ CSS CSS (Cascading Style Sheets) ngôn ngữ quy định cách trình bày tài liệu viết HTML, XHTML, XML, SVG, hay UMI…CSS quy định cách hiển thị thẻ HTML cách quy định thuộc tính thẻ (font chữ, kích thước, màu sắc,…) Các đặc điểm kĩ thuật CSS trì tổ chức W3C CSS có cấu trúc đơn giản sử dụng từ tiếng anh để đặt tên cho thuộc tính CSS sử dụng viết trực tiếp xen lẫn vào mã HTML tham chiếu từ file css riêng biệt Hiện CSS thường viết riêng thành tập tin với mở rộng “.css” Chính mà trang web có sử dụng CSS mã HTML tở nên ngắn gọn Ngồi sử dụng tập tin CSS cho nhiều web site tiết kieemk nhiều thời gian công sức Một đặc điểm quan trọng tính kế thừa CSS giảm số lượng dòng code mà đạt yêu cầu Tuy nhiên, CSS trình duyệt hiểu theo kiểu riêng Do vậy, việc trình bày nội dung trình duyệt khác không thống CSS cung cấp hàng trăm thuộc tính trình bày dành cho đối tượng với sáng tạo cao kết hợp thuộc tính giúp mang lại hiệu 1.3 Ngôn ngữ PHP PHP(Hypertext preprocessor) ngơn ngữ lập trình kịch hay mã loại lệnh chủ yếu dùng để phát triển ứng dụng viết cho máy chủ, mã nguồn mở, cho mục đích tổng qt Nó thích hợp với web dễ dàng nhúng vào trang HTML Do tối ưu hóa cho ứng dụng web, tốc độ nhanh, nhỏ gọn, cú pháp giống ngơn ngữ lập trình C ngơn ngữ laaoj trình Java Dễ học thời giang xây dựng sản phẩm tương đối ngắn so với ngôn ngữ khác nên PHP nhanh chóng trở thành ngơn ngữ lập trình web phổ biến giới Một tập tin PHP có phần mở rộng *.php, chứa văn bản, mã nguồn HTML, CSS, Javascript, Jquery…và đương nhiên chứa mã nguồn PHP Đối với trang PHP có yêu cầu xem trang web Server tiến hành phát sinh trang web từ mã nguồn PHP sang ma nguồn HTML, sau chuyển mã nguồn trình duyệt web để người dùng xem Vì trình duyệt web khơng thể đọc mã nguồn PHP mà đọc mã nguồn HTML 1.4 Thư viện hỗ trợ JavaScript JavaScript ngôn ngữ dạng script thường sử dụng cho việc lập trình web phía client, tn theo chuẩn ECMAScript Là ngơn ngữ linh động, cú pháp dễ sử dụng ngôn ngữ khác dễ dàng lập trình JavaScript khơng liên quan tới ngơn ngữ lập trình java, hầu hết trình duyệt ngày hỗ trợ Với JavaScript, ứng dụng web bạn trở nên vô sinh động, mang tính trức quan tương tác cao JavaScript theo phiên hành ngôn ngữ lập trình kịch dựa đối tượng phát triển từ ý niệm nguyên mẫu Ngôn ngữ dùng rộng rãi cho trang web, dùng để tạo khả viết script sử dụng đối tượng nằm sẵn ứng dụng Giống Java, JavaScript có cú pháp tương tự ngơn ngữ lập trình C, gần với Self Java “.js” phần mở rộng thường dùng cho tập tin mã nguồn java 1.5 Thư viện hộ trợ Bootstrap Bootstrap Framework có chưa HTML, CSS, JavaScript, Framework tiếng Việt có nghĩa “khn khổ” giúp tiết kiệm thời gian, công sức việc xây dựng hai teamplate cho giao diện Desktop Mobile lỗi thời thay vào Responsive Responsive giúp website bạn hiển thị nhiều loại hình khác Ưu điểm Bootstrap Tiết kiệm thời gian: Bootstrap giúp người thiết kế giao diện website tiết kiệm nhiều thời gian Các thư viện Boostrap có đoạn mã sẵn sàng cho bạn áp dụng vào website Bạn khơng phải tốn q nhiều thời gian để tự viết code cho giao diện Tùy biến cao: Bạn hồn tồn dựa vào Bootstrap phát triển giao diện tảng cảu Bootstrap cung cấp cho bạn hệ thống Grid System mặc định bao gồm 12 hộp độ rộng 940px Bạn thay đổi, nâng cấp phát triển dựa tảng Responsive Web Design: Vời Bootstrap, việc phát triển giao diện website để phù hợp với đa thiết bị trở nên dễ dàng hết Đây xu hướng phát triển giao diện website ưa chuộng giới Phương pháp, kết 1.1 Phương pháp - Về mặt lý thuyết : + Tìm hiểu kỹ thuật lập trình, cách thức hoạt động đối tượng HTML + Tìm hiểu cách xây dựng hệ thống - Về mặt lập trình : + Sử dụng ngơn ngữ HTML thư viện hỗ trợ CSS, Boostrap, Javascript để xây dựng layout trang Web - Về mặt hoạt động : + Chương trình thực đầy đủ chức phạm vi thành phố 1.2 Kết - Xây dựng website bán hàng tương đối hoàn chỉnh, phục vụ người dùng nhanh chóng, tiện lợi Website có đầy đủ giao diện, hoạt động như: đưa thông tin sản phẩm, giúp người dùng mua hàng website cách nhanh chóng dễ dàng, giúp người dùng tin tức, hỏi đáp tư vấn Kết chương Thơng qua tìm hiểu ngơn ngữ lập trình HTML,CSS thư viện hỗ trợ từ đó, làm sở đề xuất “Website bán điện thoại, phụ kiện điện thoại” trình bày chương Chương PHÂN TÍCH THIẾT KẾ HỆ THỐNG Giới thiệu sơ lược hệ thống xây dựng Website có bố cục xếp hợp lí, dễ quan sát: logo góc trái góc phải giỏ hàng, menu ngang giao diện phần điều hướng trang web, góc phải tìm kiếm, menu dọc sản phẩm cụ thể, điều giúp người sử dụng dễ dàng chọn lọc sản phẩm thân Tiếp theo banners, quảng cáo chạy mang tính sinh động, đánh giá người sử sụng giúp tăng nhìn trực quan trang web Phần nội dung trang web phần cuối thông tin số điện thoại, địa chỉ,… Phân tích hệ thống 1.1.Yêu cầu chức - Sau hoàn thiện Website hiển thị đầy đủ giao diện chức trang web bán hàng như: + Sản phẩm + Tìm kiếm sản phẩm + Đặt hàng + Hỗ trợ đặt hàng + Hiển thị danh sách mặt hàng theo loại + Liên hệ tổng đài giải thắc mắc vấn đề 1.2.Yêu cầu phi chức - Để đảm bảo website/hệ thống phần mềm hoạt động tốt thì: + Website chạy 24/24 + Giao diện hệ thống dễ sử dùng, trực quan, thân thiện với người dùng + Hệ thống xử lý nhanh chóng, xác + Ln sẵn sàng hỗ trợ người dùng gặp khó khăn + Đảm bảo mơi trường website bán hàng uy tín 1.3.u cầu hệ thống - Website hoạt động tốt hệ điều hành hỗ trợ trình duyệt web IE, Firefox, Chrome,Coccoc,… Biểu đồ use case - Chức Đặt hàng : o Ca sử dụng Đặt hàng o Tác nhân: Người dùng Mô tả: Ca sử dụng Đặt hàng người dùng (khách hàng) thực việc mua hàng cách cung cấp thông tin hàng hóa cấn mua như: tên hàng, số lượng, mẫu mã,…Ca sử dụng yêu cầu sử dụng ca sử dụng Đăng nhập để đăng nhập vào hệ thống trước thực đặt hàng Hình Biểu đồ usecase chức đặt hàng - Chức Đăng ký : o Ca sử dụng Đăng ký o Tác nhân: Người dùng Mô tả: Người dùng – thành viên đăng kí tài khoản với hệ thống sử dụng hệ thống Hệ thống phân quyền mặc định user cho tài khoản đăng kí Hình Biểu đồ usecase chức đăng ký - Chức Đăng nhập : o Ca sử dụng Đăng nhập o Tác nhân: Người dùng, Admin Mô tả: Người dùng nhập tài khoản mật vào hệ thống 10 Nếu tài khoản hệ thống hiển thị giao diện sử dụng chức hệ thống Hình Biểu đồ usecase chức đăng nhập - Chức Tìm kiếm : o Ca sử dụng Tìm kiếm o Tác nhân: Người dùng, Admin Mô tả: Người dùng sử dụng chức tìm kiếm theo từ khóa Hình Biểu đồ usecase chức tìm kiếm Thiết kế hệ thống - Thiết kế giao diện gồm phần : + Phần Header khu vực giới thiệu trang web nằm (đỉnh) trang web gồm có : Logo Ưu đãi đặt hàng Hỗ trợ qua hotline Thời gian làm việc Nút chức giỏ hàng 11 + Phần Menu điều hướng thành phần thiếu website Thanh điều hướng có nhiệm vụ hiển thị danh mục nội dung website trình bày theo cấp bậc Gồm có : Trang chủ Sản phầm (Điện thoại - Phụ kiện) Khuyến Hỗ trợ Tin tức Đăng nhập Đăng ký + Phần body chứa nội dung trang web hiển thị sản phẩm bày bán , sản phẩm bật , tin tức, quảng cáo, v.v Trong sản phẩm bày bán có nút chức để người dùng xem thông tin đặt hàng + Phần footer hay gọi chân trang nằm vị trí cuối trang web Chân trang hiển thị thông tin gồm : Địa liên hệ, Thông tin quyền website Link liên kết đến trang mạng xã hội Menu nhỏ Chính sách Hỗ trợ khách hàng Đăng ký Mô tả chức + Tìm kiếm sản phẩm : Chức cho phép người dùng tìm kiếm sản phẩm trang web tên hàng, mã hàng, đơn giá….Để dễ dàng tiết kiệm thời gian + Sản phầm : Chức cho phép người dùng xem chi tiết thông tin sản phẩm hàng tên hàng, đánh giá, đơn giá, số hiệu,… + Nút đăng ký: Chức giúp người dùng tạo tài khoản để lưu trữ thông tin người dùng, tạo nhờ thêm người dùng vào hệ thống + Nút đăng nhập: Chức cho phép người dùng nhập tên đăng nhập mật để sử dụng hệ thống + Chức đặt hàng: Chức giúp người dùng điền đầy đủ thông tin: tên người nhận, số điện thoại, địa chỉ,… đặt hàng 12 Chương XÂY DỰNG WEBSITE Giao diện phân hệ khách hàng 1.1 Giao diện trang chủ hiển thị Hình Giao diện trang chủ hiển thị 1.2 Giao diện sản phẩm áo 13 Hình Giao diện sản phẩm áo 1.3.Giao diện danh mục tư vấn phối đồ Hình Giao diện danh mục tư vấn phối đồ 1.4.Giao diện dịch vụ tư vấn làm đẹp Hình Giao diện dịch vụ tư vấn làm đẹp 14 1.5.Giao diện giỏ hàng Hình Giao diện giỏ hàng 1.6.Giao diện tốn Hình 10 Giao diện tốn 15 1.7.Giao diện đăng nhập, đăng ký Hình 11 Giao diện đăng nhập, đăng ký 1.8.Giao diện liên hệ Hình 12 Giao diện liên hệ 16 Giao diện phân hệ quản trị Hình 13 Giao diện admin 17 Kết đạt Chương KẾT LUẬN Trong trình vài tháng ngắn ngủi để lên ý tưởng, tìm hiểu nội dung thực dự án, nhóm MTH chúng em đạt kết sau -Về mặt lý thuyết: Nghiên cứu,tìm hiểu cách tạo website,các tính năng, thành phần cần có website Học thêm ngơn ngữ dùng để thiết kế website HTML,CSS,JavaScript,các thư viện ,framework Jquery,Bootstrap -Về mặt thực nghiệm: Áp dụng kiến thức học vào thực tế Vận dụng ngôn ngữ ,áp dụng thư viện,framework để xậy dựng nên website “ Bán Thực Phẩm Sạch” Biết cách tổ chức, xếp, quản lý đồ án Học hỏi thêm số kỹ mềm quan trọng cho nghề nghiệp tương lai kỹ soạn thảo báo cáo, làm việc nhóm, quản lý dự án nhiều kỹ khác Có sản phẩm thiết kế website “Bán Thực Phẩm Sạch”, báo cáo Hạn chế Tuy cố gắng mày mò nghiên cứu, chỉnh sửa, trau chuốt cho đồ án sai lầm lúc tiến hành đồ án khơng thể tránh khỏi Kính mong thầy bỏ qua đóng góp ý kiến cho chúng em để chúng em ngày hoàn thiện sản phẩm -Sản phẩm website chưa tối ưu với thiết bị có hình nhỏ điện thoại -Các hiệu ứng tương tác trang web thiếu nhiều,chưa chuyên nghiệp -Sản phẩm có phần giao diện nên chưa thể tương tác,xử lí với liệu Hướng nghiên cứu Với hạn chế tồn nêu trên, hướng nghiên cứu phát triển dự kiến sau:Sản phẩm đồ án website, hạn chế kiến thức kỹ năng, 18 website đứa trẻ, không ngừng học tập để bổ sung, phát triển hoàn thân theo thời gian Chúng em cố gắng hồn thiện, sửa chữa sai sót phát triển trang web thời gian tới, sau số dự kiến cho phương hướng phát triển sau website: Cải thiện giao diện : +Trở nên dễ nhìn hơn, đẹp mắt chuyên nghiệp +Dùng nhiều JavaScript để trở nên sinh động Cải thiện nội dung: +Liên tục cập nhật thứ mới, không để nội dung loại thức ăn không ưa chuộng +Thêm số tin tức ăn hot mạng xã hội Thêm số chức mới: +Dùng Php để tạo trang web hồn chỉnh up lên Server +Tương thích tốt với loại thiết bị điện thoại Thiết kế nhận diện thương hiệu -Thiết kế logo: Phần phân công thực dự án: Bảng phân công công việc thực dự án STT Tên sinh viên Việc phân công Nguyễn Vinh Hiếu Báo Cáo Đồ Án, Thiết Kế Trang Chủ, Đăng Nhập & Đăng Ký, Liên Hệ tuần Võ Hoàng Trung Kiên Báo Cáo Đồ Án, Thiết Kế trang Sản Phẩm,Hiển Thị Thông Tin Sản Phẩm,Tư Vấn,Giỏ Hàng tuần 19