ĐỒ ÁN CƠ SỞ 1/BÁO CÁO THỰC TẬP DOANH NGHIỆP…. ĐỀ TÀI: Website bán laptop. ThS. ĐẶNG THỊ KIM NGÂN

ĐẠI HỌC ĐÀ NẴNG KHOA CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG ĐỒ ÁN CƠ SỞ 1/BÁO CÁO THỰC TẬP DOANH NGHIỆP… ĐỀ TÀI: Website bán laptop Sinh viên thực : ĐINH NHƯ ĐỨC Giảng viên hướng dẫn : ThS ĐẶNG THỊ KIM NGÂN Lớp : 19IT5 Đà nẵng,29 tháng 12 năm 2020 ĐẠI HỌC ĐÀ NẴNG KHOA CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG ĐỒ ÁN CƠ SỞ WEBSITE BÁN LAPTOP Đà Nẵng, 29 tháng 12 năm 2020 MỞ ĐẦU Với phát triển nhảy vọt cơng nghệ thơng tin nay, Internet ngày có vai trò quan trọng lĩnh vực khoa học kĩ thuật đời sống Với mạng Internet, tin học thật tạo nên cách mạng trao đổi thơng tin lĩnh vực văn hóa, xã hội, trị, kinh tế Trong thời đại ngày nay, việc có Website để quảng bá cơng ty hay Website cá nhân khơng cịn điều xa xỉ Thơng qua Website khách hàng lựa chọn sản phẩm mà cần cách nhanh chóng hiệu Với cơng nghệ Word Wide Web, hay cịn gọi Web giúp bạn đưa thơng tin mong muốn lên mạng Internet cho người xem dễ dàng với công cụ ngơn ngữ lập trình khác Sự đời ngơn ngữ lập trình cho phép xây dựng trang Web đáp ứng nhu cầu người sử dụng PHP (Personal Home Page) kịch phía máy chủ (Server Script) cho phép xây dựng trang Web sở liệu Với ưu điểm bật mà PHP MySQL nhiều người sử dụng Với lí đó, hướng dẫn giúp đỡ cô Đặng Thị Kim Ngân em chọn đề tài “Xây dựng Website bán laptop” làm đề tài cho đồ án mơn Lập trình Web LỜI CẢM ƠN Trong trình thực đồ án em nhận giúp đỡ, bảo tận tình Đặng Thị Kim Ngân Nhờ mà em hoàn chỉnh đồ án quan trọng hết em tiếp thu kinh nghiệm quý giá suốt trình thực đồ án Tuy nhiên, thời gian hạn hẹp, nỗ lực khó tránh khỏi thiếu sót Em mong nhận thơng cảm, góp ý bảo tận tình q Thầy Cơ bạn Em xin chân thành cảm ơn! NHẬN XÉT (Của giảng viên hướng dẫn) ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… … Đà Nẵng, ngày … tháng … năm …… Giảng viên hướng dẫn ThS Đặng Thị Kim Ngân MỤC LỤC MỞ ĐẦU…………………………………………………………………………1 CHƯƠNG CÔNG CỤ KĨ THUẬT………………………………………… 1.1 Tìm hiểu HTML………………………………………………………… 1.2 Giới thiệu tổng quan ngơn ngữ lập trình javascrip……………………… 1.3 Tìm hiểu Css……………………………………………………………… 1.4 Tìm hiểu Bootstrap……………………………………………………… 1.5 Tìm hiểu ngơn ngữ PHP………………………………………………… 1.6 Tìm hiểu sở liệu MYSQL………………………………………… 11 CHƯƠNG XÂY DỰNG ỨNG DỤNG THỰC TẾ………………………… 13 2.1 Phân tích yêu cầu đề tài……………………………………………………… 13 2.2 Xác định yêu cầu khách hàng………………………………………… 14 2.3 Yêu cầu giao diện website…………………………………………………….16 CHƯƠNG PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG…………………… 16 3.1 Phân tích chức hệ thống……………………………………… 16 3.2 Các chức đối tượng Customer (Khách vãng lai)……………… .17 3.3 Các chức đối tượng Member (thành viên)………………………….19 3.4 Chức Administrator……………………………………………… 19 3.5 Biểu đồ phân tích thiết kế hệ thống………………………………………… 21 3.6 Đặc tả Use-case………………………………………………………… 33 3.7 Cách tổ chức liệu thiết kế chương trình cho trang Web……………… 38 3.8 Yêu cầu bảo mật………………………………………………………… 42 CHƯƠNG MỘT SỐ HÌNH ẢNH GIAO DIỆN WEBSITE……………… 42 4.1Thiết kế giao diện ……………………………………………………… 42 4.2 Giao diện Form đăng nhập…………………………………………………… 43 4.3 Giao diện Form đăng ký thành viên………………………………………… 43 4.4 Giao diện trang giỏ hang……………………………………………… 44 4.4 Giao diện trang chi tiết sản phẩm……………………………………… 44 4.6 Giao diện trang chi tiết sản phẩm……………………………………… 45 4.7 Giao diện trang quản trị Admin……………………………………………… 46 KẾT LUẬN……………………………………………………………………… 47 TÀI LIỆU THAM KHẢO….…………………………………………………… 48 CHƯƠNG CÔNG CỤ KĨ THUẬT 1.1 Tìm hiểu HTML 1.1.1 HTML gì? HTML chữ viết tắt Hypertext Markup Language Nó giúp người dùng tạo cấu trúc thành phần trang web ứng dụng, phân chia đoạn văn, heading, links, blockquotes, vâng HTML ngơn ngữ lập trình, đồng nghĩa với việc khơng thể tạo chức “động” Nó giống Microsoft Word, dùng để bố cục định dạng trang web 1.1.2 Lịch sử HTML: HTML sáng tạo Tim Berners-Lee, nhà vật lý học trung tâm nghiên cứu CERN Thụy Sĩ Anh ta nghĩ ý tưởng cho hệ thống hypertext Internet Hypertext có nghĩa văn chứa links, nơi người xem truy cập Anh xuất phiên HTML năm 1991 bao gồm 18 tag HTML Từ đó, phiên HTML có thêm tag attributes Theo Mozilla Developer Network: HTML Element Reference, có 140 HTML tags, vài số chúng bị tạm ngưng (không hỗ trợ trình duyệt đại) Nhanh chóng phổ biến mức độ chóng mặt, HTML xem chuẩn mật website Các thiết lập cấu trúc HTML vận hành phát triển World Wide Web Consortium (W3C) Bạn kiểm tra tình trạng ngơn ngữ lúc trang W3C’s website Nâng cấp gần vào năm 2014, mắt chuẩn HTML5 Nó thêm vài tags vào markup, để xác định rõ nội dung thuộc loại gì, , , 1.1.3 Ưu nhược điểm HTML: Ưu điểm: Ngôn ngữ sử dụng rộng lớn có nhiều nguồn tài nguyên hỗ trợ cộng đồng sử dụng cực lớn Sử dụng mượt mà hầu hết trình duyệt - Có q trình học đơn giản trực tiếp - Mã nguồn mở hồn tồn miễn phí - Markup gọn gàng đồng - Chuẩn web vận hành World Wide Web Consortium (W3C) - Dễ dàng tích hợp với ngơn ngữ backend PHP Node.js Khuyết điểm: - Được dùng chủ yếu cho web tĩnh Đối với tính động, bạn cần sử dụng JavaScript ngôn ngữ backend bên thứ PHP - Nó thực thi số logic định cho người dùng Vì vậy, hầu hết trang cần tạo riêng biệt, kể sử dụng yếu tố, headers hay footers - Một số trình duyệt chậm hỗ trợ tính - Khó kiểm sốt cảnh thực thi trình duyệt (ví dụ, trình duyệt cũ khơng render tag mới) Ví dụ minh họa + kết quả: Thẻ HTML Đoạn code minh hoạ (1): demo Thẻ HTML Hình 1.1: Kết đoạn code minh họa (1) 1.2 Tìm hiểu ngơn ngữ lập trình JavaScript - JavaScript ngôn ngữ kịch (scripting language) dùng để tương tác với trang HTML dựa đối tượng (object-based scripting language) Ngôn ngữ chủ yếu dùng cho kỹ thuật lập trình phía client - Các chương trình JavaScript thường nhúng (embedded) trực tiếp vào tập tin HTML tag tích hợp (integrated) vào trang web thông qua tập tin khai báo tag - JavaScript có số đặc điểm sau: o Là ngôn ngữ thông dịch (interpreted language), nghĩa script thi hành không cần biên dịch trước (precomplie) Trình duyệt dịch script, phân tích thi hành tức thời o Lập trình theo cấu trúc (Structured programing) o Giống C Java, có phân biệt chữ HOA thường Đoạn code minh họa (2) : DemoJavascript JavaScript var element = document.getElementById('demoscript'); Hình 1.2: Kết đoạn code minh họa (2) 1.3 Tìm hiểu CSS – Cascading Style Sheets - a Style Sheet gì? Là tập hợp qui định cú pháp khai báo dùng để định dạng trang web, xác nơi dùng để định nghĩa style Nói đơn giản hơn, Style Sheet giống cơng cụ dùng để “trang trí” trang web b Giới thiệu CSS – Cascading Style Sheets b.1 CSS gì? CSS ngơn ngữ tạo phong cách cho trang web – Cascading Style Sheet language Nó dùng để tạo phong cách định kiểu cho yếu tố viết dạng ngôn ngữ đánh dấu, HTML Nó điều khiển định dạng nhiều trang web lúc để tiết kiệm công sức cho người viết web Nó phân biệt cách hiển thị trang web với nội dung trang cách điều khiển bố cục, màu sắc, font chữ CSS phát triển W3C (World Wide Web Consortium) vào năm 1996, lý đơn giản HTML không thiết kế để gắn tag để giúp định dạng trang web Bạn dùng để “đánh dấu” lên site b.2 Ưu điểm CSS: - Tiết kiệm băng thông (bandwith) - Kết hợp làm tăng sức mạnh cho HTML - Có thể “đặt” đối tượng vị trí webpage - CSS tương thích với hầu hết trình duyệt - Hỗ trợ cho việc in ấn webpage - Hỗ trợ tối đa việc tùy biến webpage - Hỗ trợ cơng cụ tìm kiếm - Giúp webpage có đồng tuyệt đối, dễ dàng nâng cấp giao diện Đoạn code minh họa (3): p.fontArial { font-family: Arial, Helvetica, sans-serif; } p.fontCourier { font-family: "Courier New", Courier, monospace; }

font Arial

font Courier

• Use-case quản lý sản phẩm Hình 17 Use-case quản lý sản phẩm - Lớp biên: Login, Interface - Lớp điều khiển: Control - Lớp thực thể: Database Hình 18 Biểu đồ cộng tác chức cập nhật 34 • Chức thêm sản phẩm Hình 19 Biểu đồ chức thêm sản phẩm • Chức sửa thơng tin sản phẩm Hình 20 Biểu đồ chức sửa thơng tin sản phẩm 35 • Chức xóa sản phẩm: Hình 21 Biểu đồ chức xóa sản phẩm Tương tự Use-case quản lý người dùng hệ thống quản lý khách hàng (với chức thêm, sửa, xóa) 36 • Chức đăng nhập: Hình 22 Biểu đồ chức đăng nhập 37 • Chức đăng ký thành viên Hình 23 Biểu đồ chức đăng ký thành viên 3.7 Cách tổ chức liệu thiết kế chương trình cho trang Web Việc tổ chức liệu phải giải yêu cầu phân tích để lúc hiển thị lên trang Web có giao diện dễ nhìn, dễ dàng, hấp dẫn khách hàng Một phương pháp sử dụng rộn rãi từ trước đến quản lí theo nhóm sản phẩm Mỗi nhóm có mã nhóm tên nhóm để nhận biết Đối với Website này, với sản phẩm, sản phẩm tương ứng với mã hãng mã loại sản phẩm mã làm khóa bảng Sau số bảng sở liệu toàn sở liệu: 38 Bảng giohang Dùng để lưu thông tin giỏ hàng khách hàng Name Type Null Chú thích Id_giohang Int(10) No Mã giỏ hàng id Int(10) No Mã sản phẩm user Varchar(255) No Tên user soluong Int(10) No Số lượng tinhtrang Text No Tình trạng ngaydat datetime No Ngày đặt hàng Bảng Bảng giohang Bảng hoadon Dùng để lưu thông tin đơn hàng Name Type Null Id-hoadon Int(10) No hoten Varchar(255) No diachi Text No email Varchar(255) No dienthoai Int(20) No fax Int(20) No cty Varchar(255) No id Int(10) No soluong Int(10) No Bảng Bảng hoadon Chú thích Mã hóa đơn Tên khách hàng Địa Email Điện thoại Fax Công ty Mã sản phẩm Số lượng Bảng lienhe Dùng để quản lí thắc mắc liên hệ khách hàng Name Type Null Id-lienhe Int(10) No hoten Text No cty Text No email Text No dienthoai Int(20) No fax Int(20) No diachi Text No noidung Text No ngaylienhe Datetime No Bảng Bảng lienhe Chú thích Mã liên hệ Họ tên Công ty Email Điện thoại Fax Địa Nội dung Ngày liên hệ 39 Bảng loaisanpham Dùng để quản lí danh mục loại sản phẩm Name Type Null Id-loai Int(10) No Id_nhom Int(11) No tenloaisp Text No ghichu Varchar(255) No Bảng Bảng loaisanpham Bảng nhomsanpham Dùng để quản lý nhóm sản phẩm Name Type Id_nhom Int(10) tennhom Varchar(255) Chuthich Text Bảng Bảng nhomsanpham Bảng sanpham Dùng để quản lý sản phẩm Name Type Id Int(20) Id_loai Int(10) tensp Text mota Text hinh Text gia Int(15) ghichu Text soluongban Int(10) Id_menu Int(10) Bảng Bảng sanpham Bảng thanhvien Dùng để quản lý thành viên Type Name hoten Varchar(255) diachi Varchar(255) email Varchar(255) dienthoai Int(20) user Varchar(255) pass Varchar(32) hieuluc Int(10) capquyen Int(10) Bảng Bảng thanhvien Null No No No Chú thích Mã loại sp Mã nhóm sản phẩm Tên loại sản phẩm Ghi Chú thich Mã nhóm sản phẩm Tên nhóm sản phẩm Chú thích Null No No No No No No No No No Chú thích Mã sản phẩm Mã loại sản phẩm Tên sản phẩm Mơ tả Hình ảnh Đơn giá Ghi Số lượng Mã menu Null Chú thích No No No No No No No No Họ tên Địa Email Điện thoại Tên đăng nhập password Hiệu lực Quyền 40 3.7.1 Sơ đồ thực thể liên kết Hình 24 Sơ đồ thực thể liên kết 41 3.8 Yêu cầu bảo mật Có tính bảo mật cao, đảm bảo khơng có username, password cho phép hoạt động Admin khơng có User thay đổi thông tin sản phẩm tồn Website ngồi việc thay đổi thơng tin cá nhân User việc quản lý liệu mật đăng nhập: + Tên đăng nhập + Mật đăng nhập Các thông tin khách hàng bảo mật Hệ thống quản trị tuyệt đối an tồn, khơng thể bị truy cập lỗi hệ thống Như vậy, từ biểu đồ Use Case biểu đồ hoạt động hệ thống thể chức tác nhân hệ thống làm việc nào, xuất phát từ hệ thống yêu cầu hệ thống, yêu cầu khách hàng, nên xây dựng cho trang Website có đầy đủ chức người quản trị người dùng phải đảm bảo có tính bảo mật cao CHƯƠNG THIẾT KẾ GIAO DIỆN 4.1 Giao diện trang chủ Hình 25 Giao diện trang chủ Trang chủ “Index.php”: Là trang chính, chứa tất mục để lựa chọn Từ trang chủ khách hàng tìm thấy thơng tin cần thiết: 42 - Thông tin loại sản phẩm với giao diện gần gũi, thân thiện dễ sử dụng từ khách hàng đặt mua cho sản phẩm yêu thích, phù hợp với túi tiền - Các viết hay thể giới máy tính quản trị hệ thống chọn lọc - Bạn có thắc mắc, góp ý với cơng ty… 4.2Giao diện Form đăng nhập Hình 26 Giao diện form đăng nhập Trang “login.php” trang mà khách hàng nhập User Pass để đăng nhập vào website, chưa có tài khoản khách hàng nhấn vào nút Đăng ký để tạo cho tài khoản 4.3 Giao diện Form liên hệ 43 Hình 27 Giao diện form liên hệ Trang “lienhe.php” cầu nối khách hàng cửa hàng, khách hàng gửi thắc mắc ý kiến tới cửa hàng khách hàng phải nhập đầy đủ thông tin cá nhân form 4.4 Giao diện trang giỏ hàng Hình 28 Giao diện giỏ hàng Trang “giohang.php” trang mà khách hàng xem sản phẩm chọn Tại khách hàng biết số lượng mặt hàng chọn tổng số tiền phải tốn Khách hàng thêm, cập nhập xóa sản phẩm giỏ hàng Tại có chức lưu lịch sử mua hàng khách hàng 4.5 Giao diện Form đăng ký thành viên 44 Hình 29 Giao diện form đăng ký thành viên Trang “register.php” Tại khách hàng điền đầy đủ thông tin cá nhân đăng ký cho tài khoản, để dùng cho việc mua hàng website 4.6 Giao diện trang chi tiết sản phẩm Hình 30 Giao diện trang chi tiết sản phẩm 45 Trang “chitiet.php” trang hiển thị thông tin chi tiết sản phẩm: giá, bảo hành, thông số kỹ thuật…giúp cho khách hàng có nhìn tổng quan sản phẩm Là sở để khách hàng có định mua sản phẩm hay khơng 4.7 Giao diện trang quản trị Admin Hình 31 Giao diện trang quản trị Admin Đây trang quản trị dành cho người Admin cửa hàng, cung cấp đầy đủ tính cho người quản trị như: quản lý sản phẩm, quản lý thành viên, quản lý đơn đặt hàng… 46 KẾT LUẬN Đề tài “Xây dựng Website bán laptop” xuất phát từ thực tế ngày nhằm tạo tảng sở ban đầu để hỗ trợ thêm cho bạn muốn thiết kế Website cho công ty hay Website cá nhân Mặc dù có nhiều cố gắng, tìm hiểu kiến thức học, kết hợp tra cứu tài liệu chuyên nghành hạn chế thời gian, khả kinh nghiệm nên khơng tránh khỏi thiếu sót định nên đề tài hồn thành mức độ sau: - Tìm hiểu ngơn ngữ lập trình Web PHP & MySQL - Áp dụng xây dựng ứng dụng thực nghiệm trang Website bán laptop Hướng nghiên cứu phát triển: - Tìm hiểu sâu ngơn ngữ PHP & MySQL để đáp ứng nhiều nhu cầu người sử dụng, phát triển tối ưu hóa hệ thống, - Kết hợp ngôn ngữ PHP với hệ quản trị sở liệu lớn hơn: SQL Server, Oracle… - Tìm hiểu thêm số ngơn ngữ, phần mềm ứng dụng để nâng cao giao diện đồ họa đẹp mắt, thân thiện hơn… - Xây dựng trang Web quy mô lớn với nhiều ứng dụng, chức Để hoàn thành đề tài này, lần em xin chân thành cảm ơn cô Đặng Thị Kim Ngân người quan tâm, giúp đỡ em suốt thời gian qua Em xin chân thành cảm ơn ! 47 TÀI LIỆU THAM KHẢO [1] http://www.php.net [2] http://www mysql.com [3] http://www.w3school.com 48