Thiết kế và xây dựng website bán hàng mỹ phẩm

VIỆN ĐẠI HỌC MỞ HÀ NỘI KHOA CÔNG NGHỆ ĐIỆN TỬ - VIỄN THÔNG - ĐỒ ÁN TỐT NGHIỆP ĐẠI HỌC ĐỀ TÀI: “THIẾT KẾ VÀ XÂY DỰNG WEBSITE BÁN HÀNG MỸ PHẨM” Giáo viên hướng dẫn : THS QUÁCH THỊ HẠNH Sinh viên thực : NGUYỄN THỊ LOAN Lớp : K16A Khóa : 2013 - 2017 Hệ : ĐẠI HỌC CHÍNH QUY Hà Nội, Tháng năm 2017 BÁO CÁO ĐỒ ÁN TỐT NGHIỆP VIỆN ĐẠI HỌC MỞ HÀ NỘI CỘNG HOÀ XÃ HỘI CHỦ NGHĨA VIỆT NAM KHOA CN ĐIỆN TỬ - THÔNG TIN Độc lập - Tự – Hạnh phúc ĐỀ TÀI ĐỒ ÁN TỐT NGHIỆP ĐẠI HỌC Họ tên sinh viên: Nguyễn Thị Loan Lớp: K16A Khoá: 2013 - 2017 Ngành đào tạo: Công nghệ Kỹ thuật điện tử, Truyền thông Hệ đào tạo: ĐHCQ Tên đề tài đồ án tốt nghiệp: “THIẾT KẾ VÀ XÂY DỰNG WEBSITE BÁN HÀNG MỸ PHẨM” Nội dung - Cơ sở lý thuyết - Phân tích chức website - Thiết kế website - Tổng kết Cơ sở liệu ban đầu Ngày giao: 20 /02/2017 Ngày nộp: 13/05/2017 TRƯỞNG KHOA GIÁO VIÊN HƯỚNG DẪN (Ký, ghi rõ họ tên) (Ký, ghi rõ họ tên) GVHD: ThS QUÁCH THỊ HẠNH SVTH: NGUYỄN THỊ LOAN BÁO CÁO ĐỒ ÁN TỐT NGHIỆP MỞ ĐẦU Internet sản phẩm có giá trị lớn lao ngày trở thành công cụ thiếu, tảng cho truyền tải, trao đổi thơng tin tồn cầu Giờ đây, việc liên quan đến thông tin trở nên thật dễ dàng cho người sử dụng: cần có máy tính kết nối internet dòng liệu truy tìm gần giới vấn đề mà bạn quan tâm ra, có đầy đủ thơng tin, hình ảnh … Cùng với cơng nghệ ngày phát triển người có tay cơng cụ hữu hiệu làm tăng suất lao động hiệu cơng việc thương mại điện tử cơng cụ Bill Gate nói: “Năm 2015, bạn có lựa chọn: kinh doanh internet, bạn không kinh doanh nữa” Thương mại điện tử trở thành phương tiện giao dịch quen thuộc công ty thương mại lớn giới Nó có tốc độ phát triển mạnh Và hầu hết công ty bán hàng công ty thương mại điện tử mua sắm qua mạng trở thành thói quen hàng ngày nhiều người Giờ đây, thương mại điện tử khẳng định vai trò xúc tiến thúc đẩy phát triển doanh nghiệp Đối với cửa hàng hay công ty, việc quảng bá giới thiệu đến khách hàng sản phẩm đáp ứng nhu cầu khách hàng cần thiết Vậy phải quảng bá xây dựng Website cho cửa hàng quảng bá tất sản phẩm bán Để hiểu kỹ website thương mại điện tử nên em chọn đề tài: “THIẾT KẾ VÀ XÂY DỰNG WEBSITE BÁN HÀNG MỸ PHẨM” Sử dụng ngôn ngữ PHP, HTML, MYSQL,CSS, JAVASCRIPT cơng cụ hỗ trợ lập trình Dreamweaver phần mền Xampp Nội dung bao đồ án gồm có chương: Chương 1: Cơ sở lý thuyết Chương 2: Phân tích chức website Chương 3: Thiết kế website Chương 4: Tổng kết GVHD: ThS QUÁCH THỊ HẠNH SVTH: NGUYỄN THỊ LOAN BÁO CÁO ĐỒ ÁN TỐT NGHIỆP LỜI CẢM ƠN Lời em xin chân thành kính gửi đến Ths.Qch Thị Hạnh lời cảm ơn chân thành sâu sắc Em cảm ơn nhiệt tình, tận tinh bảo, hướng dẫn em suốt trình làm báo cáo thực tập Em xin chân thành gửi lời cảm ơn đến tồn thể thầy giáo Khoa Điện tử - Thông tin Trường Viện Đại Học Mở Hà Nội cung cấp cho em đầy đủ kiến thức chuyên môn kinh nghiệm sống ngày suốt thời gian qua Tuy nhiên, thời gian có hạn kiến thức kinh nghiệm thực tiễn em nhiều hạn chế nên em tránh khỏi thiếu xót chưa phát huy hết ý tưởng, khả hỗ trợ ngôn ngữ kỹ thuật lập trình vào đề tài Trong trình xây dựng website, khơng thể tranh khỏi sai xót Vì thế, em mong nhận góp ý thầy cô bạn để đề tài em hoàn chỉnh Một lần em xin chân thành cảm ơn! SINH VIÊN THỰC HIỆN Nguyễn Thị Loan GVHD: ThS QUÁCH THỊ HẠNH SVTH: NGUYỄN THỊ LOAN BÁO CÁO ĐỒ ÁN TỐT NGHIỆP MỤC LỤC DANH MỤC BẢNG DANH MỤC HÌNH DANH SÁCH CÁC THUẬT NGỮ VIẾT TẮT CHƯƠNG 1: CƠ SỞ LÝ THUYẾT I GIỚI THIỆU CHUNG 1 Khái niệm Website Tên miền (Domain) Hosting Mã nguồn (source code) 5 Phân loại Website II TÌM HIỂU VỀ CÁC NGƠN NGỮ LẬP TRÌNH WEB Tìm hiểu HTML Tìm hiểu CSS 16 Tìm hiểu Javascrip 17 Tìm hiểu ngơn ngữ lập trình PHP 31 III HỆ CƠ SỞ DỮ LIỆU MYSQL 41 Các khái niệm 41 Các kiểu liệu 41 Các lệnh thao tác với CSDL 43 Các câu lệnh truy vấn liệu 45 Kết hợp PHP MYSQL ứng dụng website 45 IV QUY TRÌNH THIẾT KẾ MỘT WEBSITE 46 Quy trình thiết kế website 46 Cách thức xuất website 47 Lựa chọn mua tên miền 47 Lựa chọn thiết lập web server 48 Upload website 48 Cập nhật chỉnh sửa website 48 Quảng bá 48 GVHD: ThS QUÁCH THỊ HẠNH SVTH: NGUYỄN THỊ LOAN BÁO CÁO ĐỒ ÁN TỐT NGHIỆP Bảo trì 49 CHƯƠNG 2: PHÂN TÍCH CÁC CHỨC NĂNG CỦA WEB 50 I GIỚI THIỆU CHUNG VỀ WEBSITE 50 Mục tiêu 50 Yêu cầu 50 II CHỨC NĂNG WEBSITE 51 Những chức website 51 Sơ đồ phân cấp chức 52 CHƯƠNG 3: THIẾT KẾ WEBSITE 58 I CÔNG CỤ HỖ TRỢ THIẾT KẾ WEBSITE 58 II THIẾT KẾ CƠ SƠ DỮ LIỆU 59 Tạo sở liệu 59 Thiết kế giao diện 61 CHƯƠNG 4: TỔNG KẾT 70 TÀI LIỆU THAM KHẢO 71 GVHD: ThS QUÁCH THỊ HẠNH SVTH: NGUYỄN THỊ LOAN BÁO CÁO ĐỒ ÁN TỐT NGHIỆP DANH MỤC BẢNG Bảng 1: thẻ nhóm inline 13 Bảng 2: thuộc tính thẻ 14 Bảng 3: thuộc tính thẻ 15 Bảng 4: thuộc tính thẻ 15 Bảng 5: thuộc tính thẻ 16 Bảng 6: thuộc tính thẻ 16 Bảng 7: ký tự đặc biệt ý nghĩa javascript .20 Bảng 8: thuộc tính mảng .26 Bảng 9: thuộc tính đối tượng math 28 Bảng 10: phương thức đối tượng math 28 Bảng 11: phương thức đối tượng string .30 Bảng 12: nhóm phương thức đối tượng date 30 Bảng 13: kiểu liệu số mysql .42 Bảng 14: kiểu liệu string mysql .43 Bảng 15: kiểu liệu ngày tháng mysql 43 Bảng 16: thuộc tính thẻ cột mysql 44 GVHD: ThS QUÁCH THỊ HẠNH SVTH: NGUYỄN THỊ LOAN BÁO CÁO ĐỒ ÁN TỐT NGHIỆP DANH MỤC HÌNH Hình 1: phân cấp đối tượng 27 Hình 2: q trình thơng dịch trang php 31 Hình 3: sơ đồ luồng liệu ngữ cảnh 52 Hình 4: sơ đồ phân cấp chức cho khách hàng 53 Hình 5: sơ đồ phân cấp chức cho quản trị viên 55 Hình 6: kết nối bảng sở liệu 59 Hình 7: bảng danh mục sản phẩm .59 Hình 8: bảng sản phẩm .60 Hình 9: bảng thơng tin nội dung liên hệ khách hàng gửi tới cửa hàng 60 Hình 10: bảng tin tức 60 Hình 11: bảng đơn hàng 61 Hình 12: bảng thơng tin đăng kí thành viên 61 Hình 13: trang chủ .62 Hình 14: trang chủ cuộn lên 62 Hình 15: trang sản phẩm 63 Hình 16: trang chi tiết sản phẩm 64 Hình 17: trang giỏ hàng 64 Hình 18: trang đặt hàng 65 GVHD: ThS QUÁCH THỊ HẠNH SVTH: NGUYỄN THỊ LOAN BÁO CÁO ĐỒ ÁN TỐT NGHIỆP DANH SÁCH CÁC THUẬT NGỮ VIẾT TẮT WWW ………………… World Wide Web HTTP ……………… HyperText Transfer Protocol HTTPS………………… Hypertext Transfer Protocol Secure HTML …………… HyperText Markup Language DHTML ……………… Dynamic HyperText Markup Language ASP ………………… Active Server Pages Perl CMS ………………… Content Management System CGI …………………… Common Gateway Interface XHTML ……………… Extensible Hypertext Markup Language URL ………………… Unform Resource Locator DNS …………………… Domain Name System PHP …………………… Hypertext Preprocessor CSDL ………………… Cơ Sở Dữ Liệu CSS …………………… Cascading Style Sheets SQL ……………… … Structured Query Language GVHD: ThS QUÁCH THỊ HẠNH SVTH: NGUYỄN THỊ LOAN BÁO CÁO ĐỒ ÁN TỐT NGHIỆP CHƯƠNG 1: CƠ SỞ LÝ THUYẾT CHƯƠNG 1: CƠ SỞ LÝ THUYẾT I GIỚI THIỆU CHUNG Khái niệm Website Website tập hợp trang web bao gồm văn bản, hình ảnh, video, … mà thơng thường nằm tên miền tên miền phụ quản lý World Wide Web(WWW) internet Một trang web bao gồm nhều tệp tin HTML XHTML truy nhập giao thức HTTP, HTTPS Website xây dựng từ tệp tin HTML( trang mạng tĩnh) vận hành CMS chạy máy chủ(trang mạng động) Website xây dựng nhiều ngơn ngữ khác (PHP,.NET, Java, Ruby and Rails,…) Hiện nay, để Website vận hành mơi trường WWW,cần bắt buộc phải có phần chính: - Tên miền (Domain) - Hosting - Mã nguồn (Source code) Tên miền (Domain) Tên miền địa website, chuỗi ký tự bảng Alphabet xếp giống tên riêng có khơng có ý nghĩa 2.1 Cấu tạo tên miền Tên miền bao gồm nhiều thành phần cấu tạo nên cách dấu (.) Ví dụ: abc.com.vn - Thành phần thứ “abc” tên miền máy chủ - Thành phần thứ “com” thường gọi tên miền thứ 2(second domain name level) quốc gia noi chung tên miền mức tổ chức quản lý quốc gia định nghĩa, định nghĩa khác nhiều hay - Thành phần cuối “vn” tên miền múc cao (top level domain ) bao gồm mã quốc gia nước tham gia internet quy định chữ theo tiêu chuẩn ISO-3166 Viêt Nam VN, Mỹ US,… linh vực dùng chung Dùng chung - COM: thương mại(COMmercial) GVHD: THS QUÁCH THỊ HẠNH SVTH: NGUYỄN THỊ LOAN BÁO CÁO ĐỒ ÁN TỐT NGHIỆP CHƯƠNG 2: PHÂN TÍCH CÁC CHỨC NĂNG CỦA WEBSITE hàng cần hủy xuống database để hủy đơn hàng Khi chọn xem chi tiết gửi đến trang chi tiết đơn đặt hàng - Đầu ra: Hiển thị thông tin đơn hàng 2.3.6 Quản lý phản hồi Người quản trị kiểm tra phẩn hồi nhận từ khách hàng Gửi trả lời phản hồi cho khách hàng 2.3.7 Quản lý Banner Người quản trị thay đổi banner slidershow GVHD: THS QUÁCH THỊ HẠNH SVTH: NGUYỄN THỊ LOAN 57 BÁO CÁO ĐỒ ÁN TỐT NGHIỆP CHƯƠNG 3: THIẾT KẾ WEBSITEE CHƯƠNG 3: THIẾT KẾ WEBSITE I Công cụ hỗ trợ thiết kế website • Adobe Dreamweaver CS6 • XAMPP - XAMPP viết tắt X + Apache + Mysql + PHP + Perl - XAMPP thể chạy hệ điều hành Window, Linux, Solaris Mac - Xampp "chương trình tạo máy chủ Web" (Web Server) tích hợp sẵn Apache, PHP, MySQL, FTP Server, Mail Server công cụ php MyAdmin - Xampp phần mềm cho phép giả lập môi trường server hosting cho phép chạy thử demo website máy vi tính mà khơng cần thiết phải mua hosting hay vps GVHD: THS QUÁCH THỊ HẠNH SVTH: NGUYỄN THỊ LOAN 58 BÁO CÁO ĐỒ ÁN TỐT NGHIỆP II CHƯƠNG 3: THIẾT KẾ WEBSITEE Thiết kế sơ liệu Tạo sở liệu Gồm bảng: Hình 6: Kết nối bảng sở liệu 1.1 Bảng danh mục sản phẩm Hình 7: Bảng danh mục sản phẩm GVHD: THS QUÁCH THỊ HẠNH SVTH: NGUYỄN THỊ LOAN 59 BÁO CÁO ĐỒ ÁN TỐT NGHIỆP CHƯƠNG 3: THIẾT KẾ WEBSITEE 1.2 Bảng sản phẩm Hình 8: Bảng sản phẩm 1.3 Bảng thông tin nội dung liên hệ khách hàng gửi tới cửa hàng Hình 9: Bảng thông tin nội dung liên hệ khách hàng gửi tới cửa hàng 1.4 Bảng tin tức Hình 10: Bảng tin tức GVHD: THS QUÁCH THỊ HẠNH SVTH: NGUYỄN THỊ LOAN 60 BÁO CÁO ĐỒ ÁN TỐT NGHIỆP CHƯƠNG 3: THIẾT KẾ WEBSITEE 1.1 Bảng đơn hàng Hình 11: Bảng đơn hàng 1.2 Bảng thơng tin đăng kí thành viên Hình 12: Bảng thơng tin đăng kí thành viên Thiết kế giao diện 2.1 Thiết kế frontend 2.1.1 Trang chủ Với giao diện trang chủ gốm phần : ➢ Phần top : Trong phần gồm có số điện thoại liên hệ , giỏ hàng phần đăng nhập đăng kí ➢ Phần header : Trong phần gồm có logo website, cơng cụ tìm kiếm ➢ Phần Menu : Chứa nội dung menu bao gồm mục website ➢ Phần Slide : Chạy slide ➢ Phần Content : GVHD: THS QUÁCH THỊ HẠNH SVTH: NGUYỄN THỊ LOAN 61 BÁO CÁO ĐỒ ÁN TỐT NGHIỆP CHƯƠNG 3: THIẾT KẾ WEBSITEE + Content – left: Chứa danh mục sản phẩm, giỏ hàng bạn tiêu đề phần tin tức + Content -right: Hiện sản phẩm bật, sản phẩm khuyến mại ➢ Phần Footer : Chứa liên kết website thông tin cửa hàng Hình 13: Trang chủ Hình 14: Khi trang chủ cuộn lên GVHD: THS QUÁCH THỊ HẠNH SVTH: NGUYỄN THỊ LOAN 62 BÁO CÁO ĐỒ ÁN TỐT NGHIỆP CHƯƠNG 3: THIẾT KẾ WEBSITEE 2.1.2 Trang sản phẩm Hình 15: Trang sản phẩm GVHD: THS QUÁCH THỊ HẠNH SVTH: NGUYỄN THỊ LOAN 63 BÁO CÁO ĐỒ ÁN TỐT NGHIỆP CHƯƠNG 3: THIẾT KẾ WEBSITEE 2.1.3 Trang chi tiết sản phẩm Hình 16: Trang chi tiết sản phẩm 2.1.4 Trang giỏ hàng Hình 17: Trang giỏ hàng GVHD: THS QUÁCH THỊ HẠNH SVTH: NGUYỄN THỊ LOAN 64 BÁO CÁO ĐỒ ÁN TỐT NGHIỆP CHƯƠNG 3: THIẾT KẾ WEBSITEE 2.1.5 Trang đặt hàng Hình 18: Trang đặt hàng 2.1.6 Sau đặt hàng thành công 2.1.7 Đăng nhập GVHD: THS QUÁCH THỊ HẠNH SVTH: NGUYỄN THỊ LOAN 65 BÁO CÁO ĐỒ ÁN TỐT NGHIỆP CHƯƠNG 3: THIẾT KẾ WEBSITEE 2.2 Thiết kế Backend Để truy cập vào trang quản trị có admin(quản trị viên) truy cập vào Mật đăng nhập vào trang quản trị : Username: admin Password: admin 2.2.1 Quản lý sản phẩm GVHD: THS QUÁCH THỊ HẠNH SVTH: NGUYỄN THỊ LOAN 66 BÁO CÁO ĐỒ ÁN TỐT NGHIỆP CHƯƠNG 3: THIẾT KẾ WEBSITEE 2.2.2 Thêm sản phẩm 2.2.3 Sửa sản phẩm GVHD: THS QUÁCH THỊ HẠNH SVTH: NGUYỄN THỊ LOAN 67 BÁO CÁO ĐỒ ÁN TỐT NGHIỆP CHƯƠNG 3: THIẾT KẾ WEBSITEE 2.2.4 Quản lý danh mục sản phẩm 2.2.5 Quản lý viết GVHD: THS QUÁCH THỊ HẠNH SVTH: NGUYỄN THỊ LOAN 68 BÁO CÁO ĐỒ ÁN TỐT NGHIỆP CHƯƠNG 3: THIẾT KẾ WEBSITEE 2.2.6 Quản lý đơn hàng GVHD: THS QUÁCH THỊ HẠNH SVTH: NGUYỄN THỊ LOAN 69 BÁO CÁO ĐỒ ÁN TỐT NGHIỆP CHƯƠNG 4: TỔNG KẾT CHƯƠNG 4: TỔNG KẾT Trên toàn nội dung đề tài : “ Thiết kế xây dựng website bán hàng chuyên mỹ phẩm Nhật”:, xây dựng xử lý chức ngơn ngữ lập trình PHP hệ quản trị sở liệu MySql Những điều đạt - Giao diện thân thiện với người sử dụng - Đáp ứng yêu cầu chức website: + Về chức dành cho khách hàng: xem thông tin chi tiết sản phẩm, tin tức chăm sóc làm đẹp, quản lý giỏ hàng đặt hàng + Về chức dành cho quản trị viên: quản lý thông tin chi tiết sản phẩm, quản lý tin tức, quản lý đơn hàng quản lý thành viên Hướng phát triển website - Xây dựng thêm phương thức khuyến mại quảng cáo - Thêm phần đánh giá xếp hạng sản phẩm - Hỗ trợ phương thức toán trực tuyến - Kiểm soát chặt chẽ đặt hàng - Khắc phục bảo mật - Xử lý tăng tốc tốc độ website Qua đồ án giúp em hiểu cách thiết kế website, ngơn ngữ lập trình web HTML, PHP,… Dù em cố gắng kiến thức kĩ em hạn chế, nên khó tránh khỏi thiếu xót Em mong nhận góp ý bổ xung thầy để website em hoàn thiện Em xin chân thành cảm ơn Một lần em xin chân thành cảm ơn cô Quách Thị Hạnh giúp em hoàn thành đồ án GVHD: THS QUÁCH THỊ HẠNH SVTH: NGUYỄN THỊ LOAN 70 BÁO CÁO ĐÒ ÁN TỐT NGHIỆP TÀI LIỆU THAM KHẢO TÀI LIỆU THAM KHẢO [1] Nguyễn Trường Sinh, “ Sử dụng PHP MySQL thiết kế web động, NXB Thống Kê [2] Các website ➢ Trang : http://www.sinhvienit.net ➢ Trang : http://www.vietjack.com ➢ Trang: https://freetuts.net ➢ Trang: http://www.php.com.vn ➢ Trang: http://laptrinh.vn GVHD: THS.QUÁCH THỊ HẠNH SVTH: NGUYỄN THỊ LOAN 71 ... ĐHCQ Tên đề tài đồ án tốt nghiệp: “THIẾT KẾ VÀ XÂY DỰNG WEBSITE BÁN HÀNG MỸ PHẨM” Nội dung - Cơ sở lý thuyết - Phân tích chức website - Thiết kế website - Tổng kết Cơ sở liệu ban đầu Ngày giao:... cửa hàng hay công ty, việc quảng bá giới thiệu đến khách hàng sản phẩm đáp ứng nhu cầu khách hàng cần thiết Vậy phải quảng bá xây dựng Website cho cửa hàng quảng bá tất sản phẩm bán Để hiểu kỹ website. .. tất sản phẩm bán Để hiểu kỹ website thương mại điện tử nên em chọn đề tài: “THIẾT KẾ VÀ XÂY DỰNG WEBSITE BÁN HÀNG MỸ PHẨM” Sử dụng ngôn ngữ PHP, HTML, MYSQL,CSS, JAVASCRIPT cơng cụ hỗ trợ lập