THIẾT KẾ VÀ TRIỂN KHAI HỆ THỐNG WEBSITE BÁN ĐỒNG HỒ SỬ DỤNG NGÔN NGỮ LẬP TRÌNH PHP VÀ CƠ SỠ DỮ LIỆU MYSQL

Kỹ Thuật - Công Nghệ - Công Nghệ Thông Tin, it, phầm mềm, website, web, mobile app, trí tuệ nhân tạo, blockchain, AI, machine learning - Lập trình 1 LỜI CẢM ƠN Trước tiên, em xin phép gửi lời mời cảm ơn sâu sắc tới cô giáo ThS. Nguyễn Thị Minh Châu đã nhiệt Thnh giúp đỡ và hướng dẫn em trong quá trình thực hiện khóa luận này. Em cũng xin gửi đến quý thầy cô đang giảng dạy tại trường Đại học Quảng Nam nói chung và thầy cô trong khoa Toán – Tin nói riêng lời biết ơn chân thành, cảm ơn thầy cô vì đã hết lòng truyền đạt cho em những kiến thức trong những năm tháng học tại Trường. Kính chúc quý thầy cô luôn mạnh khỏe, gặt hái được nhiều thành công trong sự nghiệp Dù đã cố gắng hết sức thực hiện đề tài nhưng cũng khó tránh khỏi những thiếu sót, em rất mong nhận được sự góp ý của quý thầy cô, các anh chị và các bạn để bản thân em khắc phục và tiến bộ hơn. Quảng Nam, tháng 4 năm 2023 Sinh viên thực hiện Thaikeu VATSANGA 2 DANH MỤC CÁC TỪ VIẾT TẮT Từ viết tắt Tiếng Viết Tiếng Anh HTML Ngôn ngữ siêu văn bản HyperText Markup Language CSS Ngôn ngữ định kiểu theo tầng Cascading Style Sheets PHP Lập trình kịch bản Hypertext Preprocessor CSDL Cơ sở dữ liệu Database UC Ca sử dụng Use Case MỤC LỤC PHẦN 1. MỞ ĐẦU ........................................................................................................... 1 1.1. Lý do chọn đề tài ........................................................................................................ 1 1.2. Mục tiêu của đề tài ..................................................................................................... 1 1.3. Đối tượng và phạm vi nghiên cứu ............................................................................... 1 1.4. Phương pháp nghiên cứu ............................................................................................ 2 1.5. Lịch sử nghiên cứu ..................................................................................................... 2 1.6. Đóng góp của đề tài .................................................................................................... 2 1.7. Cấu trúc đề tài ............................................................................................................ 2 PHẦN 2. NỘI DUNG NGHIÊN CỨU............................................................................... 3 CHƯƠNG 1 : CƠ SỞ LÝ THUYẾT.................................................................................. 3 1.1. Giới thiệu về đề tài ..................................................................................................... 3 1.2. Giới thiệu các ngôn ngữ lập trình ................................................................................ 3 1.2.1. Ngôn ngữ HTML ..................................................................................................... 3 1.2.1.1. Các thẻ HTML cơ bản ........................................................................................... 7 1.2.2. Ngôn ngữ CSS ......................................................................................................... 8 1.2.2.1 Định nghĩa CSS ..................................................................................................... 8 1.2.2.2 Cú pháp của CSS ................................................................................................... 8 1.2.2.3 Tại sao phải sử dụng CSS ...................................................................................... 9 1.2.3. Ngôn ngữ PHP ....................................................................................................... 10 1.2.3.1. Khái niệm PHP ................................................................................................... 10 1.2.3.2 Cú pháp của PHP ................................................................................................ 11 1.3. Một số thư viện hỗ trợ .............................................................................................. 14 1.3.1. Thư viện Javascript ................................................................................................ 14 1.3.1.1. Giới thiệu............................................................................................................ 14 1.3.1.2. Cách nhúng Javascript vào trong tập tin HTML.................................................. 15 1.3.1.3. Biến trong JavaScript ......................................................................................... 16 1.3.1.4. Các câu lệnh trong javaScript ............................................................................. 17 1.4. Tổng quan MySQL ................................................................................................... 17 1.4.1. Giới thiệu MySQL ................................................................................................. 17 1.4.2. Ưu điểm của MySQL ............................................................................................. 18 1.4.3. Tại sao sử dụng MySQL ........................................................................................ 20 1.5.Visual studio code ..................................................................................................... 22 1.6. Xampp ...................................................................................................................... 22 CHƯƠNG 2 : PHÂN TÍCH VÀ THIẾT KẾ WEBSITE .................................................. 26 2.1. Khảo sát hiện trạng ................................................................................................... 26 2.1.1. Môi trường hệ thống .............................................................................................. 27 2.1.2. Mô tả hệ thống bán đồng hồ ................................................................................... 28 2.1.3. Đặc tính người dùng .............................................................................................. 29 2.1.4. Yêu cầu về chức năng ............................................................................................ 29 2.1.5. Yêu cầu phi chức năng ........................................................................................... 31 2.2. Phân tích hệ thống .................................................................................................... 31 2.2.1 Xác định Use Case .................................................................................................. 31 2.2.2. Sơ đồ Use Case tổng quát ...................................................................................... 32 2.2.2.1. Đặc tả Use Case ................................................................................................. 32 2.2.3. Biểu đồ tuần tự ...................................................................................................... 37 2.2.3.1. Biểu đồ tuần tự UC đăng nhập .......................................................................... 37 2.2.3.2. Biểu đồ tuần tự UC đăng ký .............................................................................. 38 2.2.3.3. Biểu đồ tuần tự UC đăng xuất ........................................................................... 39 2.2.3.4. Biểu đồ tuần tự UC tìm kiếm ............................................................................. 39 2.2.3.5. Biểu đồ tuần tự UC đặt hàng ............................................................................. 39 2.2.3.6. Biểu đồ tuần tự UC sản phẩm ........................................................................... 40 2.2.3.7. Biểu đồ tuần tự UC loại sản phẩm .................................................................... 40 2.2.3.8. Biểu đồ tuần tự UC danh mục sản phẩm ........................................................... 41 2.2.3.9. Biểu đồ tuần tự UC người dùng......................................................................... 41 2.2.3.10. Biểu đồ tuần tự UC hóa đơn ............................................................................ 42 2.2.4. Biểu đồ lớp ............................................................................................................ 43 2.2.5. Biểu đồ hoạt động .................................................................................................. 43 2.2.5.1. Biểu đồ hoạt động UC đăng nhập ..................................................................... 43 2.2.5.2. Biểu đồ hoạt động UC đăng ký.......................................................................... 44 2.2.5.3. Biểu đồ hoạt động UC đăng xuất ...................................................................... 44 2.2.5.4. Biểu đồ hoạt động UC tìm kiếm......................................................................... 44 2.2.5.5. Biểu đồ hoạt động UC quản lý danh mục sản phẩm .......................................... 45 2.2.5.6. Biểu đồ hoạt động UC quản lý người dùng ........................................................ 46 2.2.5.7. Biểu đồ hoạt động UC đặt hàng ........................................................................ 46 2.2.5.8. Biểu đồ hoạt động UC quản lý hóa dơn............................................................. 47 2.2.5.9 Biểu đồ hoạt động UC thanh toán ...................................................................... 47 2.3. Thiết kế dữ liệu......................................................................................................... 48 CHƯƠNG 3 : XÂY DỰNG WEBSITE ........................................................................... 51 3.1. Cài đặt cơ sở dữ liệu ................................................................................................. 51 3.2. Một số giao diện chính từ trang người dùng .............................................................. 54 3.2.1. Giao diện trang chủ ................................................................................................ 54 3.2.2. Giao diện trang cửa hàng ....................................................................................... 54 3.2.3. Giao diện trang giới thiệu ...................................................................................... 55 3.2.4. Giao diện trang liên hệ ........................................................................................... 55 3.2.5. Giao diện trang giỏ hàng ........................................................................................ 56 3.2.6. Giao diện trang đăng nhập và đăng ký ................................................................... 57 3.2.7. Giao diện trang tìm kiếm sản phẩm ........................................................................ 57 3.2.8. Giao diện trang thanh toán ..................................................................................... 58 3.3. Một số giao diện trang quản trị ................................................................................. 58 3.3.1 Giao diện trang chủ ................................................................................................. 58 3.3.2. Giao diện trang quán lý tài khoản ........................................................................... 59 3.3.3. Giao diện trang quản lý sản phẩm .......................................................................... 59 3.3.4. Giao diện trang thêm sản phẩm .............................................................................. 60 3.3.5. Giao diện trang quản lý loại sản phẩm ................................................................... 60 3.3.6. Giao diện trang xét duyệt hóa đơn(Quản lý hóa đơn) ............................................. 61 3.3.7. Giao diện trang quản lý danh mục sản phẩm .......................................................... 61 3.3.8. Giao diện trang quản lý banner .............................................................................. 62 3.3.9. Giao diện trang quản lý khuyến mãi ....................................................................... 62 PHẦN 3. KẾT LUẬN VÀ KIẾN NGHỊ .......................................................................... 63 1. Kết luận ....................................................................................................................... 63 1.1. Kết quả đạt được của đề tài : ..................................................................................... 63 1.2. Hạn chế : .................................................................................................................. 63 2. Kiến nghị..................................................................................................................... 63 PHẦN 4. TÀI LIỆU THAM KHẢO ................................................................................ 64 4.1. Tài liệu tham khảo .................................................................................................... 64 4.2. Website tham khảo ................................................................................................... 64 DANH MỤC HÌNH ẢNH Hình 1.1: Mô hình của HTML ........................................................................................... 4 Hình 1.2: Mô hình hoạt động JavaScript, CSS, HTML ...................................................... 4 Hình 1.3: Mô hình cấu trúc cơ bản của trang HTML.......................................................... 6 Hình 1.4: Mô hình cú pháp của CSS. ................................................................................ 8 Hình 1.5: Mô hình của Javascript .................................................................................... 15 Hình 1.6: Mô hình của MySQL ....................................................................................... 18 Hình 1.7: Mô hình khả năng MySQL............................................................................... 20 Hình 2.1: sơ đồ hệ thống.................................................................................................. 27 Hình 2.2: Use Case tổng quát website bán đồng hồ .......................................................... 32 Hình 2.3: Biểu đồ tuần tự UC đăng nhập ....................................................................... 38 Hình 2.4: Biểu đồ tuần tự UC đăng ký ........................................................................... 38 Hình 2.5: Biểu đồ tuần tự UC đăng xuất ........................................................................ 39 Hình 2.6: Biểu đồ tuần tự UC tìm kiếm ......................................................................... 39 Hình 2.7: Biểu đồ tuần tự UC đặt hàng .......................................................................... 40 Hình 2.8: Biểu đồ tuần tự UC sản phẩm ......................................................................... 40 Hình 2.9: Biểu đồ tuần tự UC loại sản phẩm .................................................................. 41 Hình 2.10: Biểu đồ tuần tự UC danh mục sản phẩm ....................................................... 41 Hình 2.11: Biểu đồ tuần tự UC người dùng .................................................................... 42 Hình 2.12: Biểu đồ tuần tự UC hóa đơn ......................................................................... 42 Hình 2.13: Biểu đồ lớp .................................................................................................... 43 Hình 2.14: Biểu đồ hoạt động UC đăng nhập ................................................................. 43 Hình 2.15: Biểu đồ hoạt động UC đăng ký..................................................................... 44 Hình 2.16: Biểu đồ hoạt động UC đăng xuất .................................................................. 44 Hình 2.17: Biểu đồ hoạt động UC tìm kiếm ................................................................... 45 Hình 2.18: Biểu đồ hoạt động UC danh mục sản phẩm .................................................. 45 Hình 2.19: Biểu đồ hoạt động UC người dùng ............................................................... 46 Hình 2.20: Biểu đồ hoạt động UC đặt hàng .................................................................... 46 Hình 2.21: Biểu đồ hoạt động UC hóa đơn .................................................................... 47 Hình 2.22: Biểu đồ hoạt động UC thanh toán ................................................................. 47 Hình 3.1: Bảng nguoidung(Người dùng) trong MySQL ................................................... 51 Hình 3.2: Bảng loaisanpham(Loại sản phẩm) trong MySQL ............................................ 51 Hình 3.3: Bảng khuyenmai(Khuyến mãi) trong MySQL .................................................. 51 Hình 3.4: Bảng phanquyen(Phân quyền) trong MySQL ................................................... 51 Hình 3.5: Bảng sanpham(Sản phẩm) trong MySQL ......................................................... 52 Hình 3.6: Bảng hoadon(Hóa đơn) trong MySQL ............................................................. 52 Hình 3.7: Bảng danhmuc(Danh mục) trong MySQL ........................................................ 52 Hình 3.8: Bảng chitiethoadon(Chi tiết hóa đơn) trong MySQL ........................................ 53 Hình 3.9: Bảng banner(Banner) trong MySQL ................................................................ 53 Hình 3.10: Bảng thiết kế dữ liệu trong MySQL ............................................................... 53 Hình 3.11: Giao diện trang chủ ........................................................................................ 54 Hình 3.12: Giao diện cửa hàng ........................................................................................ 54 Hình 3.13: Giao diện trang giới thiệu ............................................................................... 55 Hình 3.14: Giao diện trang liên hệ ................................................................................... 55 Hình 3.15: Giao diện trang giỏ hàng ................................................................................ 56 Hình 3.16: Giao diện trang đăng nhập và đăng ký ............................................................ 57 Hình 3.17: Giao diện trang tìm kiểm sản phảm ................................................................ 57 Hình 3.18: Giao diện trang thanh toán ............................................................................. 58 Hình 3.19: Giao diện trang chủ của người quản trị ........................................................... 58 Hình 3.20: Giao diện trang quản lý tải khoản ................................................................... 59 Hình 3.21: Giao diện trang quản lý sản phẩm .................................................................. 59 Hình 3.22: Giao diện trang thêm sản phẩm ...................................................................... 60 Hình 3.23: Giao diện trang quản lý loại sản phẩm ............................................................ 60 Hình 3.24: Giao diện trang xét duyệt hóa đơn .................................................................. 61 Hình 3.25: Giao diện trang quản lý danh mục sản phẩm .................................................. 61 Hình 3.26: Giao diện trang quản lý banner....................................................................... 62 Hình 3.27: Giao diện trang quản lý khuyến mãi ............................................................... 62 1 PHẦN 1. MỞ ĐẦU 1.1. Lý do chọn đề tài Công nghệ thông tin phát triển ngày càng hiện đại và đổi mới không ngừng, bằng việc chinh phục hết đỉnh cao này đến đỉnh cao khác. Mạng internet đang trở thành mạng truyền thông có sức ảnh hưởng lớn nhất, không thể thiếu trong tất cả các hoạt động của con người trong việc truyền tải và trao đổi dữ liệu. Không như ngày xưa, ngày nay mọi việc liên quan đến thông tin ngày càng dễ dàng hơn cho người sử dụng, bằng việc kết nối internet và một dòng dữ liệu truy tìm, thì ngay lập tức cả kho tài nguyên không chỉ trong nước mà ngoài nước hiện ra không chỉ bằng ngôn ngữ mà cả bằng hình ảnh, âm thanh. Chính vì lợi ích từ internet đã thúc đẩy sự ra đời và phát triển của thương mại điện tử, làm biến đổi bộ mặt văn hoá cũng như nâng cao chất lượng cuộc sống của con người, các hoạt động thông thường như sản xuất, kinh doanh và các doanh nghiệp cũng phát triển. Cuộc sống con người ngày càng phát triển thì nhu cầu sống của con người cũng được nâng cao và những nhu cầu đơn giản nhưng cũng rất thiết thực. Đó là nhu cầu ăn, ở và mặc, đây là vấn đề cũng đang là một bài toán của các nhà kinh doanh, làm sao để đáp ứng nhu cầu của con người để cải thiện đời sống ngày càng cao. Chính lẽ đó để đáp ứng những nhu cầu đó của con người trên cơ sở kế thừa những trang web bán hàng khác, em xây dựng nên một website bán đồng hồ để đáp ứng nhu cầu mua sắm đồng hồ của mọi người, giúp họ tiết kiệm kiệm được thời gian, chi phí trong việc phải đi ra các shop, các cửa hàng hay các chợ truyền thống để mua và tìm kiếm sản phẩm. Thay vào đó chỉ việc ngồi ở nhà với chiếc máy tính đã kết nối internet, mọi người có thể thỏa sức tìm kiếm, lựa chọn sản phẩm đồng hồ mà mình yêu thích mọi lúc mọi nơi. Giúp cho người quản trị dễ dàng trong việc phân quyền quản lý, quản lý khách hàng và các hóa đơn đặt hàng của họ. Vì những lý do trên, nên em chọn đề tài: “Xây dựng website bán đồng hồ”. Cho bài báo cáo khóa luận tốt nghiệp của mình. 1.2. Mục tiêu của đề tài Xây dựng Website bán đồng hồ để quảng cáo và bán hàng đồng hồ trên mạng nhằm tăng thêm hiệu quả kinh doanh của cửa hàng. Đồng thời, thu hút người tiêu dùng đến cửa hàng, từ đó có thể mở rộng quy mô cửa hàng. 1.3. Đối tượng và phạm vi nghiên cứu - Quy trình quản lý bán các mặt hàng đồng hồ. 2 - Các vấn đề cần giải quyết trong quá trình quản lý số lượng đồng hồ trong cửa hàng, tra cứu tìm kiếm các mặt hàng đồng hồ. Từ đó tiến hành xây dựng cơ sở dữ liệu và khai thác dữ liệu phục vụ công tác quản lý. - Theo dõi và thống kê các chức năng : doanh thu tháng nay, năm nay, nhân viên, khách hàng, đồng hồ nam, đồng hồ nữ, đồng hồ trẻ em, hóa đơn chưa duyệt và đáp ứng yêu cầu phát triển của cửa hàng trong tương lai. 1.4. Phương pháp nghiên cứu - Sử dụng những phương pháp nghiên cứu cụ thể như: logic, phân tích, tổng hợp, thống kê. - Phương pháp lý luận thông qua việc tìm hiểu tài liệu từ sách, giáo trình, internet. 1.5. Lịch sử nghiên cứu Trước đây, có rất nhiều Website thương mại điện tử để bán hàng, tuy nhiên bản thân em chọn nghiên cứu sâu về bán đồng hồ, một mặt hàng khá thông dụng hiện nay. 1.6. Đóng góp của đề tài Giúp cho việc quản lí trở nên đơn giản và hiệu quả hơn, nhờ đó tiết kiệm nguồn nhân lực trong việc quản lý sổ sách trong cửa hàng. Tạo được tính chuyên nghiệp trong việc quản lí bán đồng hồ. 1.7. Cấu trúc đề tài Nội dung khóa luận gồm có 3 chương : Chương 1: Cơ sở lý thuyết Chương 2: Phân tích và thiết kế Website Chương 3: Xây dựng Website 3 PHẦN 2. NỘI DUNG NGHIÊN CỨU CHƯƠNG 1 : CƠ SỞ LÝ THUYẾT 1.1. Giới thiệu về đề tài Việc kinh doanh mua bán là nhu cầu không thể thiếu đối với mọi chúng ta. Trong thời đại cạnh tranh hiện nay việc giới thiệu sản phẩm kinh doanh đến từng cá nhân với chi phí thấp, hiệu quả cao là một vấn đề nan giải của người kinh doanh cùng với nhu cầu mua sắm với những sản phẩm đa chủng loại, đạt chất lượng, và hợp túi tiền của người tiêu dùng vì vậy thương mại điện tử đã được ra đời và dần dần phát triển trên toàn thế giới. Việc phổ biến các sản phẩm của cửa hàng kinh doanh đến khách hàng thông qua các bảng báo giá tuy nhiên chi phí khá cao vì số lượng sản phẩm ngày một đa dạng và giá cả thay đổi liên tục và tính phổ biến không cao chưa đáp ứng được nhu cầu người dùng. Mặt khác của hàng còn gặp nhiều khó khăn như chưa quản lý được người dùng, thông tin nhà sản xuất, cập nhật giá sản phẩm, quản lý sản phẩm... Nắm bắt được tình hình trên em tiến hành thiết kế trang web mua bán hàng online để mong sao giúp cho các cửa hàng phát triển nhanh hơn, giúp cho chủ cửa hàng có thể quản lý cửa hàng của mình một cách tốt hơn. 1.2. Giới thiệu các ngôn ngữ lập trình 1.2.1. Ngôn ngữ HTML Ngôn ngữ HTML (HyperText Markup Language – ngôn ngữ siêu văn bản) là một trong các loại ngôn ngữ được sử dụng trong lập trình web. Khi truy cập một trang web cụ thể là click vào các đường link, bạn sẽ được dẫn tới nhiều trang các nhau và các trang này được gọi là một tài liệu HTML (tập tin HTML). Một trang HTML như vậy được cấu thành bởi nhiều phần tử HTML nhỏ và được quy định bằng các thẻ tag. Bạn có thể phân biệt một trang web được viết bằng ngôn ngữ HTML hay PHP thông qua đường link của nó. Ở cuối các trang HTML thường hay có đuôi là HTML hoặc HTM. 4 Hình 1.1: Mô hình của HTML Một trang HTML được cấu thành bởi nhiều phần tử HTML nhỏ và được quy định bằng các thẻ tag. HTML là ngôn ngữ lập trình web được đánh giá là đơn giản. Mọi trang web, mọi trình duyệt web đều có thể hiển thị tốt ngôn ngữ HTML. Hiện nay, phiên bản mới nhất của HTML là HTML 5 với nhiều tính năng tốt và chất lượng hơn so với các phiên bản HTML cũ. Vậy, đối với các website, ngôn ngữ HTML đóng vai trò như thế nào? HTML, theo đúng nghĩa của nó, là một loại ngôn ngữ đánh dấu siêu văn bản, thế nên các chức năng của nó cũng xoay quanh yếu tố này. Cụ thể, HTML giúp cấu thành các cấu trúc cơ bản trên một website (chia khung sườn, bố cục các thành phần trang web) và góp phần hỗ trợ khai báo các tập tin kĩ thuật số như video, nhạc, hình ảnh. Hình 1.2: Mô hình hoạt động JavaScript, CSS, HTML Ưu điểm nổi trội nhất và cũng là thế mạnh của HTML là khả năng xây dựng cấu trúc và khiến trang web đi vào quy cũ một hệ thống hoàn chỉnh. Nếu bạn mong muốn sở hữu một website có cấu trúc tốt có mục đích sử dụng nhiều loại yếu tố 5 trong văn bản, hãy hỏi HTML. Nhiều ý kiến cho rằng tùy theo mục đích sử dụng mà lập trình viên hay người dùng có thể lựa chọn ngôn ngữ lập trình riêng cho website của bạn, tuy nhiên thực chất HTML chứa những yếu tố cần thiết mà dù website của bạn có thuộc thể loại nào, giao tiếp với ngôn ngữ lập trình nào để xử lý dữ liệu thì nó vẫn phải cần đến ngôn ngữ HTML để hiển thị nội dung cho người truy cập. Nói đúng hơn, dù website của bạn được xây dựng như thế nào, trên nền tảng nào thì nó cũng cần đến sự hỗ trợ của HTML, dù ít dù nhiều. Đối với các lập trình viên hay nhà phát triển web, họ đều phải học HTML như một loại ngôn ngữ cơ bản trước khi bắt tay vào thiết kế trang web nào. Cấu trúc cơ bản của một trang HTML Cấu trúc cơ bản của HTML Cấu trúc cơ bản của trang HTMLXHTML có dạng như sau, thường gồm 3 phần: : Phần khai báo chuẩn của html hay xhtml. : Phần khai báo ban đầu, khai báo về meta, title, CSS, javascript... : Phần chứa nội dung của trang web, nơi hiển thị nội dung.  Cấu trúc cơ bản Tiêu đề trang web ...Phần thân viết ở đây... Cấu trúc cơ bản của trang web Mỗi trang web đều có cách thể hiện cấu trúc khác nhau, có trang 1 cột, có trang 2 và cũng có trang chứa nhiều cột, bên dưới đây chúng ta tham khảo một trang đơn giản sử dụng 2 cột để layout. 6  Phần đầu: header, có thể chứa logo, câu slogan, các liên kết, các banner liên kết, các button, đoạn flash, hoặc các form ngắn như form tìm kiếm...  Phần liên kết toàn cục: global navigation, dùng để chứa các liên kết đến những trang quan trọng trong toàn bộ trang, trong phần này có thể chứa thêm các liên kết con (Sub Navigation).  Phần thân của trang: page body, phần này chứa phần nội dung chính (Content) và phần nội dung phụ (Sidebar).  Phần nội dung chính: content, phần này chứa nội dung chính cần thể hiện cho người dùng xem.  Phần nội dung phụ: sidebar, phần này có thể chứa liên kết phụ của từng trang (Local Navigation), hoặc các banner chứa liên kết liên quan, hoặc có thể dùng để chứa các liên kết quảng cáo...  Phần cuối trang web: footer, phần này thường chưa phân liên hệ như: tên công ty, địa chỉ, số điện thoại, mail liên hệ,... và đặc biệt là copyright, hoặc có thể chứa các liên kết toàn trang, các banner liên kết... Hình 1.3: Mô hình cấu trúc cơ bản của trang HTML 7 1.2.1.1. Các thẻ HTML cơ bản Thẻ ...: Tạo đầu mục trang Thẻ ...: Tạo tiêu đề trang trên thanh tiêu đề, đây là thẻ bắt buộc. Thẻ title cho phép bạn trình bày chuỗi trên thanh tựa đề của trang Web mỗi khi trang Web đó được duyệt trên trình duyệt Web. Thẻ …: Tất cả các thông tin khai báo trong thẻ đều có thể xuất hiện trên trang Web. Những thông tin này có thể nhìn thấy trên trang Web. Các thẻ định dạng khác. Thẻ

...

: Tạo một đoạn mới. Thẻ ...: Thay đổi phông chữ , kích cỡ và màu kí tự... Thẻ định dạng bảng ...: Đây là thẻ định dạng bảng trên trang Web. Sau khi khai báo thẻ này, bạn phải khai báo các thẻ hàng và thẻ cột cùng với các thuộc tính của nó. Thẻ hình ảnh : Cho phép bạn chèn hình ảnh vào trang Web. Thẻ này thuộc loại thẻ không có thể đóng. Thẻ liên kết ...: Là loại thẻ dùng để liên kết giữa các trang Web hoặc liên kết đến địa chỉ Internet, Mail hay Intranet (URL) và địa chỉ trong tập tin trong mạng cục bộ (UNC). Bạn đã gửi Hôm nay lúc 13:39 Các thẻ Input: Thẻ Input cho phép người dùng nhập dữ liệu hay chỉ thị thực thi một hành động nào đó, thẻ Input bao gồm các loại thẻ như: text, password, submit button, reset, checkbox, radio, image. The Textarea: ....: The Textarea cho phép người dùng nhập liệu với rất nhiều dòng. Với thẻ này bạn không thể giới hạn chiều dài lớn nhất trên trang Web. Thẻ Select: Thẻ Select cho phép người dùng chọn phần tử trong tập phương thức đã được định nghĩa trước. Nếu thẻ Select cho phép người dùng chọn một phần tử trong danh sách phần tử thì thẻ Select sẽ giống như combobox. Nếu thẻ Select cho phép người dùng chọn nhiều phần tử cùng một lần trong danh sách phần tử, thẻ Select đó là dạng listbox. Thẻ Form: Khi bạn muốn submit dữ liệu người dùng nhập từ trang web phía Client 8 lên phía Server, bạn có hai cách để làm điều nàu ứng với hai phương thức POST và GET trong thẻ form. Trong một trang Web có thể có nhiều thẻ Form khác nhau, nhưng các thẻ Form này không được lồng nhau, mỗi thẻ form sẽ được khai bảo hành động (Action) chỉ đến một trang khác. 1.2.2. Ngôn ngữ CSS 1.2.2.1 Định nghĩa CSS CSS là viết tắt của Cascading Style Sheets. Đây là một ngôn ngữ style sheet được sử dụng để mô tả giao diện và định dạng của một tài liệu viết bằng ngôn ngữ đánh dấu (Markup). Nó cung cấp một tính năng bổ sung cho HTML. Nó thường được sử dụng với HTML để thay đổi phong cách của trang web và giao diện người dùng. Nó cũng có thể được sử dụng với bất kỳ loại tài liệu XML nào bao gồm cả XML đơn giản, SVG và XUL. CSS được sử dụng cùng với HTML và JavaScript trong hầu hết các trang web để tạo giao diện người dùng cho các ứng dụng web và giao diện người dùng cho nhiều ứng dụng di động.  CSS làm được những gì? Bạn có thể thêm giao diện mới vào các tài liệu HTML cũ. Bạn hoàn toàn có thể thay đổi giao diện trang web của mình chỉ với một vài thay đổi trong mã CSS. 1.2.2.2 Cú pháp của CSS Bộ quy tắc CSS chứa selector và khối khai báo. Hình 1.4: Mô hình cú pháp của CSS. Selector: Bộ chọn cho biết phần tử HTML bạn muốn tạo kiểu cách. Nó có thể là bất kỳ thẻ nào như , ,... Declaration Block: Khối khai báo có thể chứa một hoặc nhiều khai báo được phân cách bởi dấu chấm phẩy (;). Đối với ví dụ trên, có hai khai báo: 9 1. color: yellow; 2. font-size: 11 px; Mỗi khai báo chứa một tên thuộc tính và giá trị, được phân cách bởi dấu hai chấm. Property: Một property là một kiểu của thuộc tính của phần tử HTML. Nó có thể là color, border,... Value: Các giá trị được gán cho thuộc tính CSS. Trong ví dụ trên, giá trị “yellow” được gán cho thuộc tính color. Selector{Propertyl: valuel; Property2: value2; .........;} 1.2.2.3 Tại sao phải sử dụng CSS Đây là ba lợi ích chính của CSS:  Giải quyết một vấn đề lớn Trước khi có CSS, các thẻ như phông chữ, màu sắc, kiểu nền, các sắp xếp phần tử, đường viền và kích thước phải được lặp lại trên mọi trang web. Đây là một quá trình rất dài tốn thời gian và công sức. Ví dụ: Nếu bạn đang phát triển một trang web lớn nơi phông chữ và thông tin màu được thêm vào mỗi trang, nó sẽ trở thành một quá trình dài và tốn kém. CSS đã được tạo ra để giải quyết vấn đề này. Đó là một khuyến cáo của W3C.  Tiết kiệm rất nhiều thời gian Định nghĩa kiểu CSS được lưu trong các tệp CSS bên ngoài vì vậy có thể thay đổi toàn bộ trang web bằng cách thay đổi chỉ một tệp.  Cung cấp thêm các thuộc tính CSS cung cấp các thuộc tính chi tiết hơn HTML để định nghĩa giao diện của trang web. Các điểm chính của CSS được đưa ra dưới đây: CSS là viết tắt của Cascading Style Sheet. CSS được sử dụng để thiết kế các thẻ HTML. CSS là một ngôn ngữ được sử dụng rộng rãi trên web. HTML, CSS và JavaScript được sử dụng để thiết kế web. Nó giúp các nhà thiết kế web áp dụng phong cách trên các thẻ HTML.  Ví dụ về CSS 10 h1 { color:white; background-color:00eeee; padding:5px; } p{ color:blue; } Write Your First CSS Example

This is Paragraph

1.2.3. Ngôn ngữ PHP 1.2.3.1. Khái niệm PHP PHP (viết tắt hồi quy “PHP: Hypertext Preprocessor”) là một ngôn ngữ lập trình kịch bản hay một loại mã lệnh chủ yếu được dùng để phát triển các ứng dụng viết cho máy chủ, mã nguồn mở, dùng cho mục đích tổng quát. Nó rất thích hợp với web và có thể dễ dàng nhúng vào trang HTML. Do được tối ưu hóa cho các ứng dụng web, tốc độ nhanh, nhỏ gọn, cú pháp giống C và Java, dễ học và thời gian xây dựng sản phẩm tương đối ngắn hơn so với các ngôn ngữ khác nên PHP đã nhanh chóng trở thành một ngôn ngữ lập trình web phổ biến nhất thế giới. Như đã giới thiệu, PHP là ngôn ngữ máy chủ, mã lệnh PHP sẽ tập trung trên máy chủ để phục vụ các trang Web theo yêu cầu của người dùng thông qua trình duyệt. Khi người dùng truy cập website viết bằng PHP, máy chủ đọc mã lệnh PHP và xử lý chúng theo các hướng dẫn đã được mã hóa. 11 Khác với Website HTML tĩnh ở chỗ: khi có một yêu cầu, máy chủ chỉ đơn thuần gửi dữ liệu HTML đến trình duyệt Web và không xảy ra một sự biến dịch nào từ phía máy chủ. Đối với người dùng cuối và trên trình duyệt web, các trang home. html và home. php trong tương tự như nhau, nhưng thực chất nội dung của trang được tạo theo các cách khác nhau. - Ưu điểm khi dùng PHP + Dùng mã nguồn mở (có thể chạy trên Apache hoặc IIS). + Phổ biến hơn ASP (có thể thấy dựa vào số website dùng PHP). + Dễ học khi đã biết HTML, C. + Dựa vào XAMP (dễ cấu hình). + Nhiều hệ thống CMS miễn phí dùng. + Đi cặp với MYSQL + Hoạt động trên Linux, có thể trên IIS - Windows - Nhược điểm : + Mã nguồn không đẹp. + Chỉ chạy trên ứng dụng web. 1.2.3.2 Cú pháp của PHP a. Nhúng mã PHP vào HTML Cách thông dụng sau để nhúng mã PHP Ví dụ: Các bạn có thể chèn mã này sen kẽ các tag của html hoặc có thể từ mã này echo (in) ra các html theo ý muốn Ví dụ: tôi có thể sử dụng 2 cách như sau hoặc VD01 Câu lệnh của php cũng giống như trong lập trình C kết thúc bởi dấu chấm phẩy ";" b. Chú thích trong PHP PHP hỗ trợ các kiểu chú giải như của C, C++ Ví dụ: Về cơ bản ngôn ngữ lập trình php là ngôn ngữ dễ sử dụng, thông dụng hiện này. Cú pháp PHP chính là cú pháp trong ngôn ngữ C, các bạn làm quen với ngôn ngữ C thì có lợi thế trong lập trình PHP. Để lập trình bằng ngôn ngữ PHP cần chú ý những điểm sau: 1. Cuối câu lệnh có dấu; 2. Biến trong PHP có tiền tố là 3. Mỗi phương thức đều bắt đầu {và đóng bằng dấu} 4. Khi khai báo biến thì không có kiễu dữ liệu 5. Nên có giá trị khởi đầu cho biến khai báo 13 6. Phải có chi chú (Comment) cho mỗi feature mới 7. Sử dụng dấu hoặc để giải thích cho mỗi câu ghi chú 8. Sử dụng và cho mỗi đoạn ghi chú 9. Khai báo biến có phân biệt chữ hoa hay thường c. Khai báo biến Khi thực hiện khai báo biến trong C, bạn cần phải biết tuân thủ quy định như: kiễu dữ liệu trước tên biến và có giá trị khởi đầu, tuy nhiên khi làm việc với PHP thì không cần khai báo kiểu dữ liệu nhưng sử dụng tiền tố trước biến. Xuất phát từ những điều ở trên, khai báo biến trong PHP như sau: tenbien =giá trị; dem=0; đếm strSql = "Select from sanpham where hienthi=1"; mang = array("Họ", "Tên", "cơ quan"); kiemtra = false; Code đầy đủ Tự học PHP Biến 1.3. Một số thư viện hỗ trợ 1.3.1. Thư viện Javascript 1.3.1.1. Giới thiệu JavaScript, theo phiên bản hiện hành, là một ngôn ngữ lập trình thông dịch được phát triển từ các ý niệm nguyên mẫu. Ngôn ngữ này được dùng rộng rãi cho các trang web (phía người dùng) cũng như phía máy chủ (với Nodejs). Nó vốn được phát triển bởi Brendan Eich tại Hãng truyền thông Netscape với cái tên đầu tiên Mocha, rồi sau đó đổi tên thành LiveScript, và cuối cùng thành JavaScript. Giống Java, JavaScript có cú pháp tương tự C, nhưng nó gần với Self hơn Java. js là phần mở rộng thường được dùng cho tập tin mã nguồn JavaScript. Cũng giống như C, JavaScript không có bộ xử lý xuất nhập (input output) riêng. Trong khi C sử dụng thư viện xuất nhập chuẩn, JavaScript dựa vào phần mềm ngôn ngữ được gắn vào để thực hiện xuất nhập. Trên trình duyệt, rất nhiều trang web sử dụng JavaScript để thiết kế trang web động và một số hiệu ứng hình ảnh thông qua DOM. JavaScript được dùng để thực hiện một số tác vụ không thể thực hiện được với chỉ HTML như kiểm tra thông tin nhập vào, tự động thay đổi hình ảnh... Tuy nhiên, mỗi trình duyệt áp dụng JavaScript khác nhau và không tuân theo chuẩn W3C DOM, do đó trong rất nhiều trường hợp lập trình viên phải viết nhiều phiên bản của cùng một đoạn mã nguồn để có thể hoạt động trên nhiều trình duyệt. Một số công nghệ nổi bật dùng JavaScript để tương tác với DOM bao gồm DHTML, Ajax và SPA. Bên ngoài trình duyệt, JavaScript có thể được sử dụng trong tập tin PDF của Adobe Acrobat vả Adobe Reader. Điều khiển Dashboard trên hệ điều hành MacOS X phiên bản 10.4 cũng có sử dụng JavaScript Từ khi Nodejs ra đời vào năm 2009, Javascript được biết đến nhiều hơn là một ngôn ngữ đa nền khi có thể chạy trên cả môi trường máy chủ cũng như môi trường nhúng. Mỗi ứng dụng này đều cung cấp mô hình đối tượng riêng cho phép tương tác với môi trường chủ, với phần lõi là ngôn ngữ lập trình JavaScript gần giống nhau. JavaScript có rất nhiều ưu điểm 15 khiến nó vượt trội hơn so với các đối thủ, đặc biệt trong các trường hợp thực tế. Sau đây chỉ là một số lợi ích của JavaScript: - Chúng ta không cần một compiler vì web browser có thể biên dịch nó bằng HTML: Nó dễ học hơn các ngôn ngữ lập trình khác; - Lỗi dễ phát hiện hơn và vì vậy dễ sửa hơn; Nó có thể được gắn trên một số element của trang web hoặc event của trang web như là thông qua click chuột hoặc di chuột tới; JS hoạt động trên nhiều trình duyệt, nền tảng; Chúng ta có thể sử dụng JavaScript để kiểm tra input và giảm thiểu việc kiểm tra thủ công khi truy xuất qua database: Nó giúp website tương tác tốt hơn với khách truy cập: Nó nhanh hơn và nhẹ hơn các ngôn ngữ lập trình khác. Mọi ngôn ngữ lập trình đều có các khuyết điểm. Một phần là vì ngôn ngữ đó khi phát triển đến một mức độ như JavaScript, nó cũng sẽ thu hút lượng lớn hacker, scammer, và những người có ác tâm luôn tìm kiếm những lỗ hổng và các lỗi bảo mật để lợi dụng nó. Một số khuyết điểm có thể kể đến là: Dễ bị khai thác; Có thể được dùng để thực thi mã độc trên máy tính của người dùng: - Nhiều khi không được hỗ trợ trên mọi trình duyệt; - JS code snippets lớn; - Có thể bị triển khai khác nhau tùy từng thiết bị dẫn đến việc không đồng nhất. 1.3.1.2. Cách nhúng Javascript vào trong tập tin HTML ...

1

LỜI CẢM ƠN

Trước tiên, em xin phép gửi lời mời cảm ơn sâu sắc tới cô

giáo ThS Nguyễn Thị Minh Châu đã nhiệt Thnh giúp đỡ và

hướng dẫn em trong quá trình thực hiện khóa luận này

Em cũng xin gửi đến quý thầy cô đang giảng dạy tại trường Đại học Quảng Nam nói chung và thầy cô trong khoa Toán – Tin nói riêng lời biết ơn chân thành, cảm ơn thầy cô vì đã hết lòng truyền đạt cho em những kiến thức trong những năm tháng học tại Trường Kính chúc quý thầy cô luôn mạnh khỏe, gặt hái được nhiều thành công trong sự nghiệp!

Dù đã cố gắng hết sức thực hiện đề tài nhưng cũng khó tránh khỏi những thiếu sót, em rất mong nhận được sự góp ý của quý thầy cô, các anh chị và các bạn để bản thân em khắc phục và tiến bộ hơn

Quảng Nam, tháng 4 năm 2023 Sinh viên thực hiện

Thaikeu VATSANGA

2

DANH MỤC CÁC TỪ VIẾT TẮT

HTML Ngôn ngữ siêu văn bản HyperText Markup

MỤC LỤC

PHẦN 1 MỞ ĐẦU 1

1.1 Lý do chọn đề tài 1

1.2 Mục tiêu của đề tài 1

1.3 Đối tượng và phạm vi nghiên cứu 1

1.4 Phương pháp nghiên cứu 2

1.5 Lịch sử nghiên cứu 2

1.6 Đóng góp của đề tài 2

1.7 Cấu trúc đề tài 2

PHẦN 2 NỘI DUNG NGHIÊN CỨU 3

CHƯƠNG 1 : CƠ SỞ LÝ THUYẾT 3

1.1 Giới thiệu về đề tài 3

1.2 Giới thiệu các ngôn ngữ lập trình 3

1.3.1.2 Cách nhúng Javascript vào trong tập tin HTML 15

1.3.1.3 Biến trong JavaScript 16

1.3.1.4 Các câu lệnh trong javaScript 17

1.4 Tổng quan MySQL 17

1.4.1 Giới thiệu MySQL 17

1.4.2 Ưu điểm của MySQL 18

1.4.3 Tại sao sử dụng MySQL 20

1.5.Visual studio code 22

1.6 Xampp 22

CHƯƠNG 2 : PHÂN TÍCH VÀ THIẾT KẾ WEBSITE 26

2.1 Khảo sát hiện trạng 26

2.1.1 Môi trường hệ thống 27

2.1.2 Mô tả hệ thống bán đồng hồ 28

2.1.3 Đặc tính người dùng 29

2.1.4 Yêu cầu về chức năng 29

2.1.5 Yêu cầu phi chức năng 31

2.2.3.1 Biểu đồ tuần tự UC_ đăng nhập 37

2.2.3.2 Biểu đồ tuần tự UC_ đăng ký 38

2.2.3.3 Biểu đồ tuần tự UC_ đăng xuất 39

2.2.3.4 Biểu đồ tuần tự UC_ tìm kiếm 39

2.2.3.5 Biểu đồ tuần tự UC_ đặt hàng 39

2.2.3.6 Biểu đồ tuần tự UC_ sản phẩm 40

2.2.3.7 Biểu đồ tuần tự UC_ loại sản phẩm 40

2.2.3.8 Biểu đồ tuần tự UC_ danh mục sản phẩm 41

2.2.3.9 Biểu đồ tuần tự UC_ người dùng 41

2.2.3.10 Biểu đồ tuần tự UC_ hóa đơn 42

2.2.4 Biểu đồ lớp 43

2.2.5 Biểu đồ hoạt động 43

2.2.5.1 Biểu đồ hoạt động UC_ đăng nhập 43

2.2.5.2 Biểu đồ hoạt động UC_ đăng ký 44

2.2.5.3 Biểu đồ hoạt động UC_ đăng xuất 44

2.2.5.4 Biểu đồ hoạt động UC_ tìm kiếm 44

2.2.5.5 Biểu đồ hoạt động UC_ quản lý danh mục sản phẩm 45

2.2.5.6 Biểu đồ hoạt động UC_ quản lý người dùng 46

2.2.5.7 Biểu đồ hoạt động UC_ đặt hàng 46

2.2.5.8 Biểu đồ hoạt động UC_ quản lý hóa dơn 47

2.2.5.9 Biểu đồ hoạt động UC_ thanh toán 47

2.3 Thiết kế dữ liệu 48

CHƯƠNG 3 : XÂY DỰNG WEBSITE 51

3.1 Cài đặt cơ sở dữ liệu 51

3.2 Một số giao diện chính từ trang người dùng 54

3.2.1 Giao diện trang chủ 54

3.2.2 Giao diện trang cửa hàng 54

3.2.3 Giao diện trang giới thiệu 55

3.2.4 Giao diện trang liên hệ 55

3.2.5 Giao diện trang giỏ hàng 56

3.2.6 Giao diện trang đăng nhập và đăng ký 57

3.2.7 Giao diện trang tìm kiếm sản phẩm 57

3.2.8 Giao diện trang thanh toán 58

3.3 Một số giao diện trang quản trị 58

3.3.1 Giao diện trang chủ 58

3.3.2 Giao diện trang quán lý tài khoản 59

3.3.3 Giao diện trang quản lý sản phẩm 59

3.3.4 Giao diện trang thêm sản phẩm 60

3.3.5 Giao diện trang quản lý loại sản phẩm 60

3.3.6 Giao diện trang xét duyệt hóa đơn(Quản lý hóa đơn) 61

3.3.7 Giao diện trang quản lý danh mục sản phẩm 61

3.3.8 Giao diện trang quản lý banner 62

3.3.9 Giao diện trang quản lý khuyến mãi 62

PHẦN 4 TÀI LIỆU THAM KHẢO 64

4.1 Tài liệu tham khảo 64

4.2 Website tham khảo 64

DANH MỤC HÌNH ẢNH

Hình 1.1: Mô hình của HTML 4

Hình 1.2: Mô hình hoạt động JavaScript, CSS, HTML 4

Hình 1.3: Mô hình cấu trúc cơ bản của trang HTML 6

Hình 1.4: Mô hình cú pháp của CSS 8

Hình 1.5: Mô hình của Javascript 15

Hình 1.6: Mô hình của MySQL 18

Hình 1.7: Mô hình khả năng MySQL 20

Hình 2.1: sơ đồ hệ thống 27

Hình 2.2: Use Case tổng quát website bán đồng hồ 32

Hình 2.3: Biểu đồ tuần tự UC_ đăng nhập 38

Hình 2.4: Biểu đồ tuần tự UC_ đăng ký 38

Hình 2.5: Biểu đồ tuần tự UC_ đăng xuất 39

Hình 2.6: Biểu đồ tuần tự UC_ tìm kiếm 39

Hình 2.7: Biểu đồ tuần tự UC_ đặt hàng 40

Hình 2.8: Biểu đồ tuần tự UC_ sản phẩm 40

Hình 2.9: Biểu đồ tuần tự UC_ loại sản phẩm 41

Hình 2.10: Biểu đồ tuần tự UC_ danh mục sản phẩm 41

Hình 2.11: Biểu đồ tuần tự UC_ người dùng 42

Hình 2.12: Biểu đồ tuần tự UC_ hóa đơn 42

Hình 2.13: Biểu đồ lớp 43

Hình 2.14: Biểu đồ hoạt động UC_ đăng nhập 43

Hình 2.15: Biểu đồ hoạt động UC_ đăng ký 44

Hình 2.16: Biểu đồ hoạt động UC_ đăng xuất 44

Hình 2.17: Biểu đồ hoạt động UC_ tìm kiếm 45

Hình 2.18: Biểu đồ hoạt động UC_ danh mục sản phẩm 45

Hình 2.19: Biểu đồ hoạt động UC_ người dùng 46

Hình 2.20: Biểu đồ hoạt động UC_ đặt hàng 46

Hình 2.21: Biểu đồ hoạt động UC_ hóa đơn 47

Hình 2.22: Biểu đồ hoạt động UC_ thanh toán 47

Hình 3.1: Bảng nguoidung(Người dùng) trong MySQL 51

Hình 3.2: Bảng loaisanpham(Loại sản phẩm) trong MySQL 51

Hình 3.3: Bảng khuyenmai(Khuyến mãi) trong MySQL 51

Hình 3.4: Bảng phanquyen(Phân quyền) trong MySQL 51

Hình 3.5: Bảng sanpham(Sản phẩm) trong MySQL 52

Hình 3.6: Bảng hoadon(Hóa đơn) trong MySQL 52

Hình 3.7: Bảng danhmuc(Danh mục) trong MySQL 52

Hình 3.8: Bảng chitiethoadon(Chi tiết hóa đơn) trong MySQL 53

Hình 3.9: Bảng banner(Banner) trong MySQL 53

Hình 3.10: Bảng thiết kế dữ liệu trong MySQL 53

Hình 3.11: Giao diện trang chủ 54

Hình 3.12: Giao diện cửa hàng 54

Hình 3.13: Giao diện trang giới thiệu 55

Hình 3.14: Giao diện trang liên hệ 55

Hình 3.15: Giao diện trang giỏ hàng 56

Hình 3.16: Giao diện trang đăng nhập và đăng ký 57

Hình 3.17: Giao diện trang tìm kiểm sản phảm 57

Hình 3.18: Giao diện trang thanh toán 58

Hình 3.19: Giao diện trang chủ của người quản trị 58

Hình 3.20: Giao diện trang quản lý tải khoản 59

Hình 3.21: Giao diện trang quản lý sản phẩm 59

Hình 3.22: Giao diện trang thêm sản phẩm 60

Hình 3.23: Giao diện trang quản lý loại sản phẩm 60

Hình 3.24: Giao diện trang xét duyệt hóa đơn 61

Hình 3.25: Giao diện trang quản lý danh mục sản phẩm 61

Hình 3.26: Giao diện trang quản lý banner 62

Hình 3.27: Giao diện trang quản lý khuyến mãi 62

PHẦN 1 MỞ ĐẦU 1.1 Lý do chọn đề tài

Công nghệ thông tin phát triển ngày càng hiện đại và đổi mới không ngừng, bằng việc chinh phục hết đỉnh cao này đến đỉnh cao khác Mạng internet đang trở thành mạng truyền thông có sức ảnh hưởng lớn nhất, không thể thiếu trong tất cả các hoạt động của con người trong việc truyền tải và trao đổi dữ liệu Không như ngày xưa, ngày nay mọi việc liên quan đến thông tin ngày càng dễ dàng hơn cho người sử dụng, bằng việc kết nối internet và một dòng dữ liệu truy tìm, thì ngay lập tức cả kho tài nguyên không chỉ trong nước mà ngoài nước hiện ra không chỉ bằng ngôn ngữ mà cả bằng hình ảnh, âm thanh Chính vì lợi ích từ internet đã thúc đẩy sự ra đời và phát triển của thương mại điện tử, làm biến đổi bộ mặt văn hoá cũng như nâng cao chất lượng cuộc sống của con người, các hoạt động thông thường như sản xuất, kinh doanh và các doanh nghiệp cũng phát triển Cuộc sống con người ngày càng phát triển thì nhu cầu sống của con người cũng được nâng cao và những nhu cầu đơn giản nhưng cũng rất thiết thực Đó là nhu cầu ăn, ở và mặc, đây là vấn đề cũng đang là một bài toán của các nhà kinh doanh, làm sao để đáp ứng nhu cầu của con người để cải thiện đời sống ngày càng cao Chính lẽ đó để đáp ứng những nhu cầu đó của con người trên cơ sở kế thừa những trang web bán hàng khác, em xây dựng nên một website bán đồng hồ để đáp ứng nhu cầu mua sắm đồng hồ của mọi người, giúp họ tiết kiệm kiệm được thời gian, chi phí trong việc phải đi ra các shop, các cửa hàng hay các chợ truyền thống để mua và tìm kiếm sản phẩm Thay vào đó chỉ việc ngồi ở nhà với chiếc máy tính đã kết nối internet, mọi người có thể thỏa sức tìm kiếm, lựa chọn sản phẩm đồng hồ mà mình yêu thích mọi lúc mọi nơi Giúp cho người quản trị dễ dàng trong việc phân quyền quản lý, quản lý khách hàng và các

hóa đơn đặt hàng của họ Vì những lý do trên, nên em chọn đề tài: “Xây dựng website bán đồng hồ” Cho bài báo cáo khóa luận tốt nghiệp của mình

1.2 Mục tiêu của đề tài

Xây dựng Website bán đồng hồ để quảng cáo và bán hàng đồng hồ trên mạng nhằm tăng thêm hiệu quả kinh doanh của cửa hàng Đồng thời, thu hút người

tiêu dùng đến cửa hàng, từ đó có thể mở rộng quy mô cửa hàng 1.3 Đối tượng và phạm vi nghiên cứu

- Quy trình quản lý bán các mặt hàng đồng hồ

- Các vấn đề cần giải quyết trong quá trình quản lý số lượng đồng hồ trong cửa hàng, tra cứu tìm kiếm các mặt hàng đồng hồ Từ đó tiến hành xây dựng cơ sở dữ liệu và khai thác dữ liệu phục vụ công tác quản lý

- Theo dõi và thống kê các chức năng : doanh thu tháng nay, năm nay, nhân viên, khách hàng, đồng hồ nam, đồng hồ nữ, đồng hồ trẻ em, hóa đơn chưa duyệt và

đáp ứng yêu cầu phát triển của cửa hàng trong tương lai 1.4 Phương pháp nghiên cứu

- Sử dụng những phương pháp nghiên cứu cụ thể như: logic, phân tích, tổng hợp, thống kê

- Phương pháp lý luận thông qua việc tìm hiểu tài liệu từ sách, giáo trình, internet

1.5 Lịch sử nghiên cứu

Trước đây, có rất nhiều Website thương mại điện tử để bán hàng, tuy nhiên bản thân em chọn nghiên cứu sâu về bán đồng hồ, một mặt hàng khá thông dụng hiện nay

1.6 Đóng góp của đề tài

Giúp cho việc quản lí trở nên đơn giản và hiệu quả hơn, nhờ đó tiết kiệm nguồn nhân lực trong việc quản lý sổ sách trong cửa hàng Tạo được tính chuyên nghiệp trong việc quản lí bán đồng hồ

1.7 Cấu trúc đề tài

Nội dung khóa luận gồm có 3 chương : Chương 1: Cơ sở lý thuyết

Chương 2: Phân tích và thiết kế Website Chương 3: Xây dựng Website

PHẦN 2 NỘI DUNG NGHIÊN CỨU CHƯƠNG 1 : CƠ SỞ LÝ THUYẾT 1.1 Giới thiệu về đề tài

Việc kinh doanh mua bán là nhu cầu không thể thiếu đối với mọi chúng ta Trong thời đại cạnh tranh hiện nay việc giới thiệu sản phẩm kinh doanh đến từng cá nhân với chi phí thấp, hiệu quả cao là một vấn đề nan giải của người kinh doanh cùng với nhu cầu mua sắm với những sản phẩm đa chủng loại, đạt chất lượng, và hợp túi tiền của người tiêu dùng vì vậy thương mại điện tử đã được ra đời và dần dần phát triển trên toàn thế giới Việc phổ biến các sản phẩm của cửa hàng kinh doanh đến khách hàng thông qua các bảng báo giá tuy nhiên chi phí khá cao vì số lượng sản phẩm ngày một đa dạng và giá cả thay đổi liên tục và tính phổ biến không cao chưa đáp ứng được nhu cầu người dùng Mặt khác của hàng còn gặp nhiều khó khăn như chưa quản lý được người dùng, thông tin nhà sản xuất, cập nhật giá sản phẩm, quản lý sản phẩm Nắm bắt được tình hình trên em tiến hành thiết kế trang web mua bán hàng online để mong sao giúp cho các cửa hàng phát triển nhanh hơn, giúp

cho chủ cửa hàng có thể quản lý cửa hàng của mình một cách tốt hơn 1.2 Giới thiệu các ngôn ngữ lập trình

1.2.1 Ngôn ngữ HTML

Ngôn ngữ HTML (HyperText Markup Language – ngôn ngữ siêu văn bản) là một trong các loại ngôn ngữ được sử dụng trong lập trình web Khi truy cập một trang web cụ thể là click vào các đường link, bạn sẽ được dẫn tới nhiều trang các nhau và các trang này được gọi là một tài liệu HTML (tập tin HTML)

Một trang HTML như vậy được cấu thành bởi nhiều phần tử HTML nhỏ và được quy định bằng các thẻ tag Bạn có thể phân biệt một trang web được viết bằng ngôn ngữ HTML hay PHP thông qua đường link của nó Ở cuối các trang HTML thường hay có đuôi là HTML hoặc HTM

Hình 1.1: Mô hình của HTML

Một trang HTML được cấu thành bởi nhiều phần tử HTML nhỏ và được quy định bằng các thẻ tag

HTML là ngôn ngữ lập trình web được đánh giá là đơn giản Mọi trang web, mọi trình duyệt web đều có thể hiển thị tốt ngôn ngữ HTML Hiện nay, phiên bản mới nhất của HTML là HTML 5 với nhiều tính năng tốt và chất lượng hơn so với các phiên bản HTML cũ

Vậy, đối với các website, ngôn ngữ HTML đóng vai trò như thế nào? HTML, theo đúng nghĩa của nó, là một loại ngôn ngữ đánh dấu siêu văn bản, thế nên các chức năng của nó cũng xoay quanh yếu tố này Cụ thể, HTML giúp cấu thành các cấu trúc cơ bản trên một website (chia khung sườn, bố cục các thành phần trang web) và góp phần hỗ trợ khai báo các tập tin kĩ thuật số như video, nhạc, hình ảnh

Hình 1.2: Mô hình hoạt động JavaScript, CSS, HTML

Ưu điểm nổi trội nhất và cũng là thế mạnh của HTML là khả năng xây dựng cấu trúc và khiến trang web đi vào quy cũ một hệ thống hoàn chỉnh Nếu bạn mong muốn sở hữu một website có cấu trúc tốt có mục đích sử dụng nhiều loại yếu tố

trong văn bản, hãy hỏi HTML Nhiều ý kiến cho rằng tùy theo mục đích sử dụng mà lập trình viên hay người dùng có thể lựa chọn ngôn ngữ lập trình riêng cho website của bạn, tuy nhiên thực chất HTML chứa những yếu tố cần thiết mà dù website của bạn có thuộc thể loại nào, giao tiếp với ngôn ngữ lập trình nào để xử lý dữ liệu thì nó vẫn phải cần đến ngôn ngữ HTML để hiển thị nội dung cho người truy cập

Nói đúng hơn, dù website của bạn được xây dựng như thế nào, trên nền tảng nào thì nó cũng cần đến sự hỗ trợ của HTML, dù ít dù nhiều Đối với các lập trình viên hay nhà phát triển web, họ đều phải học HTML như một loại ngôn ngữ cơ bản trước khi bắt tay vào thiết kế trang web nào

Cấu trúc cơ bản của một trang HTML Cấu trúc cơ bản của HTML

Cấu trúc cơ bản của trang HTML/XHTML có dạng như sau, thường gồm 3 phần:

<!Doctype>: Phần khai báo chuẩn của html hay xhtml

<head></head>: Phần khai báo ban đầu, khai báo về meta, title, CSS,

Cấu trúc cơ bản của trang web

Mỗi trang web đều có cách thể hiện cấu trúc khác nhau, có trang 1 cột, có trang 2 và cũng có trang chứa nhiều cột, bên dưới đây chúng ta tham khảo một trang đơn giản sử dụng 2 cột để layout

Phần đầu: header, có thể chứa logo, câu slogan, các liên kết, các banner liên

kết, các button, đoạn flash, hoặc các form ngắn như form tìm kiếm

Phần liên kết toàn cục: global navigation, dùng để chứa các liên kết đến

những trang quan trọng trong toàn bộ trang, trong phần này có thể chứa thêm các liên kết con (Sub Navigation)

Phần thân của trang: page body, phần này chứa phần nội dung chính

(Content) và phần nội dung phụ (Sidebar)

Phần nội dung chính: content, phần này chứa nội dung chính cần thể hiện

cho người dùng xem

Phần nội dung phụ: sidebar, phần này có thể chứa liên kết phụ của từng

trang (Local Navigation), hoặc các banner chứa liên kết liên quan, hoặc có thể dùng để chứa các liên kết quảng cáo

Phần cuối trang web: footer, phần này thường chưa phân liên hệ như: tên

công ty, địa chỉ, số điện thoại, mail liên hệ, và đặc biệt là copyright, hoặc có thể chứa các liên kết toàn trang, các banner liên kết

Hình 1.3: Mô hình cấu trúc cơ bản của trang HTML

1.2.1.1 Các thẻ HTML cơ bản

• Thẻ <head> </head>: Tạo đầu mục trang

• Thẻ <title> </title>: Tạo tiêu đề trang trên thanh tiêu đề, đây là thẻ bắt

buộc Thẻ title cho phép bạn trình bày chuỗi trên thanh tựa đề của trang Web mỗi khi trang Web đó được duyệt trên trình duyệt Web

• Thẻ <body>…</body>: Tất cả các thông tin khai báo trong thẻ <body> đều

có thể xuất hiện trên trang Web Những thông tin này có thể nhìn thấy trên trang Web

• Các thẻ định dạng khác Thẻ <p> </p>: Tạo một đoạn mới Thẻ <font> </font>: Thay đổi phông chữ , kích cỡ và màu kí tự

• Thẻ định dạng bảng <table> <table>: Đây là thẻ định dạng bảng trên trang Web Sau khi khai báo thẻ này, bạn phải khai báo các thẻ hàng <tr> và thẻ cột <td> cùng với các thuộc tính của nó

• Thẻ hình ảnh <img>: Cho phép bạn chèn hình ảnh vào trang Web Thẻ này

thuộc loại thẻ không có thể đóng

• Thẻ liên kết <a> </a>: Là loại thẻ dùng để liên kết giữa các trang Web

hoặc liên kết đến địa chỉ Internet, Mail hay Intranet (URL) và địa chỉ trong tập tin trong mạng cục bộ (UNC)

Bạn đã gửi Hôm nay lúc 13:39

• Các thẻ Input: Thẻ Input cho phép người dùng nhập dữ liệu hay chỉ thị thực

thi một hành động nào đó, thẻ Input bao gồm các loại thẻ như: text, password, submit button, reset, checkbox, radio, image

• The Textarea: <Textarea> <\Textarea>: The Textarea cho phép người

dùng nhập liệu với rất nhiều dòng Với thẻ này bạn không thể giới hạn chiều dài lớn nhất trên trang Web

• Thẻ Select: Thẻ Select cho phép người dùng chọn phần tử trong tập phương

thức đã được định nghĩa trước Nếu thẻ Select cho phép người dùng chọn một phần tử trong danh sách phần tử thì thẻ Select sẽ giống như combobox Nếu thẻ Select cho phép người dùng chọn nhiều phần tử cùng một lần trong danh sách phần tử, thẻ Select đó là dạng listbox

• Thẻ Form: Khi bạn muốn submit dữ liệu người dùng nhập từ trang web phía

Client

lên phía Server, bạn có hai cách để làm điều nàu ứng với hai phương thức POST và GET trong thẻ form Trong một trang Web có thể có nhiều thẻ Form khác nhau, nhưng các thẻ Form này không được lồng nhau, mỗi thẻ form sẽ được khai bảo hành động (Action) chỉ đến một trang khác

1.2.2 Ngôn ngữ CSS

1.2.2.1 Định nghĩa CSS

CSS là viết tắt của Cascading Style Sheets Đây là một ngôn ngữ style sheet được sử dụng để mô tả giao diện và định dạng của một tài liệu viết bằng ngôn ngữ đánh dấu (Markup) Nó cung cấp một tính năng bổ sung cho HTML Nó thường được sử dụng với HTML để thay đổi phong cách của trang web và giao diện người dùng Nó cũng có thể được sử dụng với bất kỳ loại tài liệu XML nào bao gồm cả XML đơn giản, SVG và XUL

CSS được sử dụng cùng với HTML và JavaScript trong hầu hết các trang web để tạo giao diện người dùng cho các ứng dụng web và giao diện người dùng cho nhiều ứng dụng di động

Bạn có thể thêm giao diện mới vào các tài liệu HTML cũ

Bạn hoàn toàn có thể thay đổi giao diện trang web của mình chỉ với một vài thay đổi trong mã CSS

1.2.2.2 Cú pháp của CSS

Bộ quy tắc CSS chứa selector và khối khai báo

Hình 1.4: Mô hình cú pháp của CSS

Selector: Bộ chọn cho biết phần tử HTML bạn muốn tạo kiểu cách Nó có thể là bất kỳ thẻ nào như <h1>, <title>,

Declaration Block: Khối khai báo có thể chứa một hoặc nhiều khai báo được

phân cách bởi dấu chấm phẩy (;) Đối với ví dụ trên, có hai khai báo:

1 color: yellow; 2 font-size: 11 px;

Mỗi khai báo chứa một tên thuộc tính và giá trị, được phân cách bởi dấu hai chấm

Property: Một property là một kiểu của thuộc tính của phần tử HTML Nó có

thể là color, border,

Value: Các giá trị được gán cho thuộc tính CSS Trong ví dụ trên, giá trị

“yellow” được gán cho thuộc tính color

Selector{Propertyl: valuel; Property2: value2; ;}

1.2.2.3 Tại sao phải sử dụng CSS

Đây là ba lợi ích chính của CSS:  Giải quyết một vấn đề lớn

Trước khi có CSS, các thẻ như phông chữ, màu sắc, kiểu nền, các sắp xếp phần tử, đường viền và kích thước phải được lặp lại trên mọi trang web Đây là một quá trình rất dài tốn thời gian và công sức Ví dụ: Nếu bạn đang phát triển một trang web lớn nơi phông chữ và thông tin màu được thêm vào mỗi trang, nó sẽ trở thành một quá trình dài và tốn kém CSS đã được tạo ra để giải quyết vấn đề này Đó là một khuyến cáo của W3C

 Tiết kiệm rất nhiều thời gian

Định nghĩa kiểu CSS được lưu trong các tệp CSS bên ngoài vì vậy có thể thay đổi toàn bộ trang web bằng cách thay đổi chỉ một tệp

CSS cung cấp các thuộc tính chi tiết hơn HTML để định nghĩa giao diện của trang web

Các điểm chính của CSS được đưa ra dưới đây: CSS là viết tắt của Cascading Style Sheet CSS được sử dụng để thiết kế các thẻ HTML

CSS là một ngôn ngữ được sử dụng rộng rãi trên web

HTML, CSS và JavaScript được sử dụng để thiết kế web Nó giúp các nhà thiết kế web áp dụng phong cách trên các thẻ HTML

<!DOCTYPE> <html>

PHP (viết tắt hồi quy “PHP: Hypertext Preprocessor”) là một ngôn ngữ lập trình kịch bản hay một loại mã lệnh chủ yếu được dùng để phát triển các ứng dụng viết cho máy chủ, mã nguồn mở, dùng cho mục đích tổng quát Nó rất thích hợp với web và có thể dễ dàng nhúng vào trang HTML Do được tối ưu hóa cho các ứng dụng web, tốc độ nhanh, nhỏ gọn, cú pháp giống C và Java, dễ học và thời gian xây dựng sản phẩm tương đối ngắn hơn so với các ngôn ngữ khác nên PHP đã nhanh chóng trở thành một ngôn ngữ lập trình web phổ biến nhất thế giới

Như đã giới thiệu, PHP là ngôn ngữ máy chủ, mã lệnh PHP sẽ tập trung trên máy chủ để phục vụ các trang Web theo yêu cầu của người dùng thông qua trình duyệt Khi người dùng truy cập website viết bằng PHP, máy chủ đọc mã lệnh PHP và xử lý chúng theo các hướng dẫn đã được mã hóa

Khác với Website HTML tĩnh ở chỗ: khi có một yêu cầu, máy chủ chỉ đơn thuần gửi dữ liệu HTML đến trình duyệt Web và không xảy ra một sự biến dịch nào từ phía máy chủ Đối với người dùng cuối và trên trình duyệt web, các trang home html và home php trong tương tự như nhau, nhưng thực chất nội dung của trang được tạo theo các cách khác nhau

- Ưu điểm khi dùng PHP

+ Dùng mã nguồn mở (có thể chạy trên Apache hoặc IIS)

+ Phổ biến hơn ASP (có thể thấy dựa vào số website dùng PHP) + Dễ học khi đã biết HTML, C

+ Dựa vào XAMP (dễ cấu hình) + Nhiều hệ thống CMS miễn phí dùng + Đi cặp với MYSQL

+ Hoạt động trên Linux, có thể trên IIS - Windows

Các bạn có thể chèn mã này sen kẽ các tag của html hoặc có thể từ mã này echo (in) ra các html theo ý muốn

Ví dụ: tôi có thể sử dụng 2 cách như sau

echo "<h2>Xin chào các bạn, chúng tôi là <em>tin học Thời Đại</em></h2>"; // Đây là chú thích trên một dòng

/* Đây là chú thích một đoạn văn bản */ echo "Hôm này đẹp trời."; ?>

Về cơ bản ngôn ngữ lập trình php là ngôn ngữ dễ sử dụng, thông dụng hiện này Cú pháp PHP chính là cú pháp trong ngôn ngữ C, các bạn làm quen với ngôn ngữ C thì có lợi thế trong lập trình PHP Để lập trình bằng ngôn ngữ PHP cần chú ý những điểm sau:

1 Cuối câu lệnh có dấu;

2 Biến trong PHP có tiền tố là $

3 Mỗi phương thức đều bắt đầu {và đóng bằng dấu} 4 Khi khai báo biến thì không có kiễu dữ liệu

5 Nên có giá trị khởi đầu cho biến khai báo

6 Phải có chi chú (Comment) cho mỗi feature mới

7 Sử dụng dấu // hoặc # để giải thích cho mỗi câu ghi chú 8 Sử dụng /* và */ cho mỗi đoạn ghi chú

9 Khai báo biến có phân biệt chữ hoa hay thường

c Khai báo biến

Khi thực hiện khai báo biến trong C, bạn cần phải biết tuân thủ quy định như: kiễu dữ liệu trước tên biến và có giá trị khởi đầu, tuy nhiên khi làm việc với PHP thì không cần khai báo kiểu dữ liệu nhưng sử dụng tiền tố $ trước biến

Xuất phát từ những điều ở trên, khai báo biến trong PHP như sau: $tenbien [=giá trị];

$dem=0; //đếm

$strSql = "Select * from sanpham where hienthi=1"; $mang = array("Họ", "Tên", "cơ quan");

$strSql="select * from sanpham"; $mang = array("id", "tensp", "mota"); $mangn[1];

$mangn[0]="Đỏ"; $mangn[1]="Xanh"; echo $mang[1];

JavaScript, theo phiên bản hiện hành, là một ngôn ngữ lập trình thông dịch được phát triển từ các ý niệm nguyên mẫu Ngôn ngữ này được dùng rộng rãi cho các trang web (phía người dùng) cũng như phía máy chủ (với Nodejs) Nó vốn được phát triển bởi Brendan Eich tại Hãng truyền thông Netscape với cái tên đầu tiên Mocha, rồi sau đó đổi tên thành LiveScript, và cuối cùng thành JavaScript Giống Java, JavaScript có cú pháp tương tự C, nhưng nó gần với Self hơn Java js là phần mở rộng thường được dùng cho tập tin mã nguồn JavaScript Cũng giống như C, JavaScript không có bộ xử lý xuất nhập (input/ output) riêng Trong khi C sử dụng thư viện xuất nhập chuẩn, JavaScript dựa vào phần mềm ngôn ngữ được gắn vào để thực hiện xuất nhập Trên trình duyệt, rất nhiều trang web sử dụng JavaScript để thiết kế trang web động và một số hiệu ứng hình ảnh thông qua DOM JavaScript được dùng để thực hiện một số tác vụ không thể thực hiện được với chỉ HTML như kiểm tra thông tin nhập vào, tự động thay đổi hình ảnh Tuy nhiên, mỗi trình duyệt áp dụng JavaScript khác nhau và không tuân theo chuẩn W3C DOM, do đó trong rất nhiều trường hợp lập trình viên phải viết nhiều phiên bản của cùng một đoạn mã nguồn để có thể hoạt động trên nhiều trình duyệt Một số công nghệ nổi bật dùng JavaScript để tương tác với DOM bao gồm DHTML, Ajax và SPA

Bên ngoài trình duyệt, JavaScript có thể được sử dụng trong tập tin PDF của Adobe Acrobat vả Adobe Reader Điều khiển Dashboard trên hệ điều hành MacOS X phiên bản 10.4 cũng có sử dụng JavaScript Từ khi Nodejs ra đời vào năm 2009, Javascript được biết đến nhiều hơn là một ngôn ngữ đa nền khi có thể chạy trên cả môi trường máy chủ cũng như môi trường nhúng Mỗi ứng dụng này đều cung cấp mô hình đối tượng riêng cho phép tương tác với môi trường chủ, với phần lõi là ngôn ngữ lập trình JavaScript gần giống nhau JavaScript có rất nhiều ưu điểm

khiến nó vượt trội hơn so với các đối thủ, đặc biệt trong các trường hợp thực tế Sau đây chỉ là một số lợi ích của JavaScript:

- Chúng ta không cần một compiler vì web browser có thể biên dịch nó bằng HTML: Nó dễ học hơn các ngôn ngữ lập trình khác;

- Lỗi dễ phát hiện hơn và vì vậy dễ sửa hơn; Nó có thể được gắn trên một số element của trang web hoặc event của trang web như là thông qua click chuột hoặc di chuột tới; JS hoạt động trên nhiều trình duyệt, nền tảng; Chúng ta có thể sử dụng JavaScript để kiểm tra input và giảm thiểu việc kiểm tra thủ công khi truy xuất qua database: Nó giúp website tương tác tốt hơn với khách truy cập: Nó nhanh hơn và nhẹ hơn các ngôn ngữ lập trình khác Mọi ngôn ngữ lập trình đều có các khuyết điểm Một phần là vì ngôn ngữ đó khi phát triển đến một mức độ như JavaScript, nó cũng sẽ thu hút lượng lớn hacker, scammer, và những người có ác tâm luôn tìm kiếm những lỗ hổng và các lỗi bảo mật để lợi dụng nó Một số khuyết điểm có thể kể đến là: Dễ bị khai thác; Có thể được dùng để thực thi mã độc trên máy tính của người dùng:

- Nhiều khi không được hỗ trợ trên mọi trình duyệt; - JS code snippets lớn;

- Có thể bị triển khai khác nhau tùy từng thiết bị dẫn đến việc không đồng nhất

1.3.1.2 Cách nhúng Javascript vào trong tập tin HTML

Bạn có thể nhúng JavaScript vào một file HTML theo một trong hai cách chủ yếu sau đây:

 Dùng cặp thẻ <script></script> để nhúng JavaScript vào file HTML

 Dùng thẻ link để nhúng JavaScript vào file HTML (Viết file riêng có đuôi js)

Hình 1.5: Mô hình của Javascript Cách 1 : Dùng cặp thẻ Script để viết js trong cùng HTML

Cặp thẻ Script ta có thể đặt ở trong cặp thẻ <head></head> hoặc

Ở ví dụ trên là ta đang để Script ở trong thẻ head Trong một file HTML có thể viết nhiều đoạn Script, bạn có thể cho nó ở trong cặp thẻ <body></body> cũng được Để sao cho ta quản lý file một cách thuận tiện nhất

Thuộc tính type: <script type= “text/javascript”> thuộc tính này không bắt buộc Không có cũng không sao Js tự mặc định sẵn trong HTML

Cách 2: Dùng link để gọi file js riêng <script src=”custom.js”></script>

Js được đặt ở một file riêng biệt vs html Đuôi js

Thuộc tính src để đặt đường dẫn file js

Trong file js riêng không được chứa cặp thẻ <script></script>

1.3.1.3 Biến trong JavaScript

Giống như nhiều ngôn ngữ chương trình khác, JavaScript có các biến Biến có thể được xem là một nơi chứa (Container) được đặt tên Bạn có thể đặt dữ liệu vào trong nơi chứa này và sau đó tham chiếu đến dữ liệu này một cách đơn giản là đặt tên cho nơi chứa

Trước khi bạn sử dụng một biến trong chương trình JavaScript, bạn phải khai báo nó Biến được khai báo với từ khóa var như sau:

Bạn cũng có thể khai báo nhiều biến với cùng từ khóa var như sau:

Lưu giữ một giá trị trong một biến được gọi là khởi tạo biến Bạn có thể khởi tạo biến tại thời điểm tạo biến hoặc tại thời điểm sau khi bạn cần biến đó

Ví dụ: bạn có thể tạo một biến tên money và gán giá trị 2000.50 cho nó sau

đó Với biến khác, bạn có thể gán một giá trị tại thời điểm khởi tạo như sau:

Ghi chú: Chỉ sử dụng từ khóa var cho khai báo hoặc khởi tạo biến, một lần

cho bất kỳ tên biến nào trong tài liệu Bạn không nên khai báo lại cùng một biến hai lần

1.3.1.4 Các câu lệnh trong javaScript

Câu lệnh dưới đây nói cho trình duyệt hãy ghi dòng “Blog Kiến càng” vào phần tử HTML có id=”website”

Ví dụ:

Document.getElementById(“website”).innerHTML= “Blog kiến càng”;

1.4 Tổng quan MySQL 1.4.1 Giới thiệu MySQL

MySQL là hệ quản trị cơ sở dữ liệu mã nguồn mở miễn phí nằm trong nhóm

LAMP (Linux – Apache -MySQL – PHP) >< Microsoft (Windows, IIS, SQL Server, ASP/ASP.NET), vì MySQL được tích hợp sử dụng chung với apache, PHP nên nó phổ biến nhất thế giới Vì MySQL ổn định và dễ sử dụng (đối với tui thì ko chắc, có tính khả chuyển, hoạt động trên nhiều hệ điều hành cung cấp một hệ thống

lớn các hàm tiện ích rất mạnh và Mysql cũng có cùng một cách truy xuất và mã lệnh tương tự với ngôn ngữ SQL chính vì thế nên MySQL được sử dụng và hỗ trợ của những lập trình viên yêu thích mã nguồn mở Nhưng Mysql không bao quát toàn bộ những câu truy vấn cao cấp như SQL Server Vì vậy Mysql chỉ đáp ứng việc truy xuất đơn giản trong quá trình vận hành của website, thích hợp cho các ứng dụng có truy cập CSDL trên internet và có thể giải quyết hầu hết các bài toán trong PHP, Perl MySQL miễn phí hoàn toàn cho nên bạn có thể tải về MySQL từ trang chủ

Nó có nhiều phiên bản cho các hệ điều hành khác nhau: phiên bản Win32 cho các hệ điều hành dòng Windows, Linux, MacOSX, Unix, FreeBSD, NetBSD, Novell NetWare, SGI Irix, Solaris, SunOS

MySQL là một trong những ví dụ rất cơ bản về Hệ Quản trị Cơ sở dữ liệu quan hệ sử dụng Ngôn ngữ truy vấn có cấu trúc (SQL)

Hình 1.6: Mô hình của MySQL

1.4.2 Ưu điểm của MySQL

 Linh hoạt

Sự linh hoạt về flatform là 1 đặc tính nổi bật của MySQL với các phiên bản đang được hỗ trợ của Linux, Unix, Windows, MySQL,

 Thực thi cao

Các chuyên gia cơ sở dữ liệu có thể cấu hình máy chủ cơ sở dữ liệu MySQL đặc trưng cho các ứng dụng đặc thù thông qua kiến trúc storage - engine MySQL có thể đáp ứng khả năng xử lý những yêu cầu khắt khe nhất của từng hệ thống,

MySQL còn đưa ra các “công cụ” cần thiết cho các hệ thống doanh nghiệp khó tính bằng tiện ích tải tốc độ cao, bộ nhớ cache và các cơ chế xử lý nâng cao khác

 Sử dụng ngay

Các tiêu chuẩn đảm bảo của MySQL giúp cho người dùng vững tin và chọn sử dụng ngay, MySQL đưa ra nhiều tùy chọn và các giải pháp để người sử dụng dùng ngay cho server cơ sở dữ liệu MySQL

 Hỗ trợ giao dịch

MySQL hỗ trợ giao dịch mạnh 1 cách tự động, thống nhất, độc lập và bền vững, ngoài ra khả năng giao dịch cũng được phân loại và hỗ trợ giao dịch đa dạng mà người viết không gây trở ngại cho người đọc và ngược lại

 Nơi tin cậy để lưu trữ web và dữ liệu

Do MySQL có engine xử lý tốc độ cao và khả năng chén dữ liệu nhanh, hỗ trợ tốt cho các chức năng chuyên dùng cho web, Nên MySQL là lựa chọn tốt nhất cho các ứng dụng web và các ứng dụng web doanh nghiệp

 Bảo mật tốt

Doanh nghiệp nào cũng cần tính năng bảo mật dữ liệu tuyệt đối vì đó chính là lợi ích quan trọng hàng đầu và đó cũng là lý do mà các chuyên gia về cơ sở dữ liệu chọn dùng MySQL MySQL có các kỹ thuật mạnh trong việc xác nhận truy cập cơ sở dữ liệu và chỉ có người dùng đã được xác nhận mới có thể truy cập vào server cơ sở dữ liệu

 Phát triển ứng dụng hỗn hợp

MySQL cung cấp hỗ trợ hỗn hợp cho bất kỳ sự phát triển ứng dụng nào nên MySQL được xem là cơ sở dữ liệu mã nguồn mở phổ biến nhất thế giới

 Dễ quản lý

Quá trình cài đặt MySQL diễn ra khá nhanh chóng trên Microsoft Windows, Linux, Macintosh hoặc Unix Sau khi cài đặt, các tính năng tự động mở rộng không gian, tự khởi động lại và cấu hình động được thiết lập sẵn sàng cho người quản trị cơ sở dữ liệu làm việc

 Mã nguồn tự do và hỗ trợ xuyên suốt

Nhiều doanh nghiệp lo lắng việc sử dụng mã nguồn mở là không an toàn và không được hỗ trợ tốt vì đa số tin vào các phần mềm có bản quyền , nhưng đối với

MySQL, các nhà doanh nghiệp hoàn toàn có thể yên tâm về điều này, MySQL có chính sách bồi thường hẳn hoi và luôn hỗ trợ tối đa cho quý doanh nghiệp

 Chi phí thấp

Đối với các dự án phát triển mới , nếu các doanh nghiệp sử dụng MySQL thì đó là một chọn lựa đúng đắn vừa tiết kiệm chi phí vừa đáng tin cậy

1.4.3 Tại sao sử dụng MySQL

- Khả năng mở rộng và tính linh hoạt

Hình 1.7: Mô hình khả năng MySQL

MySQL cho phép người dùng mở rộng và có thể tùy chỉnh để thay đổi linh hoạt cấu trúc bên trong

Máy chủ cơ sở dữ liệu MySQL đáp ứng nhiều tính năng linh hoạt, nó có sức chứa để xử lý các ứng dụng được nhúng sâu với 1MB dung lượng để chạy kho dữ liệu khổng lồ lên đến hàng terabytes thông tin Đặc tính đáng chú ý của MySQL là sự linh hoạt về flatform với tất cả các phiên bản của Windows, Unix và Linux đang được hỗ trợ Và đương nhiên, tính chất mã nguồn mở của MySQL cho phép tùy biến theo ý muốn để thêm các yêu cầu phù hợp cho database server

- Hiệu năng cao

Với kiến trúc storage-engine cho phép các chuyên gia cơ sở dữ liệu cấu hình máy chủ cơ sở dữ liệu MySQL đặc trưng cho các ứng dụng chuyên biệt Dù ứng dụng là website dung lượng lớn phục vụ hàng triệu người/ngày hay hệ thống xử lý giao dịch tốc độ cao thì MySQL đều đáp ứng được khả năng xử lý khắt khe của mọi hệ thống Với những tiện ích tải tốc độ cao, cơ chế xử lý nâng cao khác và đặc biệt bộ nhớ caches, MySQL đưa ra tất cả nhưng tính năng cần có cho hệ thống doanh nghiệp khó tính hiện nay

- Tính sẵn sàng cao

MySQL đảm bảo sự tin cậy và có thể sử dụng ngay MySQL đưa ra nhiều tùy chọn có thể “mì ăn liền” ngay từ cấu hình tái tạo chủ/tớ tốc độ cao, để các nhà phân phối thứ 3 có thể đưa ra những điều hướng có thể dùng ngay duy nhất cho server cơ sở dữ liệu MySQL

- Hỗ trợ giao dịch mạnh mẽ

MySQL đưa ra một trong số những engine giao dịch cơ sở dữ liệu tốt nhất trên thị trường Các đặc trưng bao gôm, khóa mức dòng không hạn chế, hỗ trợ giao dịch ACID hoàn thiện, khả năng giao dịch được phân loại và hỗ trợ giao dịch đa dạng (multi-version) mà người đọc không bao giờ cản trở cho người viết và ngược lại Dữ liệu được đảm bảo trong suốt quá trình server có hiệu lực, các mức giao dịch độc lập được chuyên môn hóa, khi phát hiện có lỗi khóa chết ngay tức thì

- Điểm mạnh của Web và Data Warehouse

1.5.Visual studio code

Visual Studio Code là một trình soạn thảo, biên tập code hoàn toàn miễn phí dành được Microsoft phát triển cho các lập trình viên và có mặt trên hầu hết các hệ điều hành phổ biến như: Windows, Linux và macOS Có thể nói rằng, Visual Studio Code là một sự kết hợp độc đáo – đỉnh cao giữa IDE và Code Editor

Không chỉ là soạn thảo, chỉnh sửa code, Visual Studio Code còn có thể hỗ trợ bạn làm được rất nhiều việc như: đổi theme, hàng loạt phím tắt tiện dụng, có chức năng debug đi kèm, hỗ trợ Git, syntax highlighting hỗ trợ quá trình gõ code, phần gợi ý code thông minh,…

1.6 Xampp

Xampp là một công cụ tích hợp đầy đủ các thành bao gồm Apache, Mysql, PHP, Perl Giúp chúng ta tạo ra môi trường web server trên máy tính của mình, để có thể chạy được kịch bản PHP

1 Apache Là một chương trình máy chủ, dùng để giao tiếp với các giao thức HTTP Apache chạy tốt trên mọi hệ điều hành

2 Mysql Là hệ quản trị cơ sở dữ liệu, được dùng để lưu trữ thông tin của một website Mỗi website có thể sử dụng một hoặc nhiều cơ sở dữ liệu

3 PHP Là ngôn ngữ kịch bản trên phía Server, dùng để xử lý các thao tác của người dùng và làm việc trực tiếp với cơ sở dữ liệu (Database)

4 Perl Là một tầng cao hơn, một ngôn ngữ lập trình năng động hơn Sử dụng rộng rãi trong lập trình mạng và quản trị hệ thống Ít phổ biến cho mục đích phát triển web, Perl thích hợp với rất nhiều ứng dụng

Để có thể chạy được xampp trên máy, các bạn download về theo link này Xampp có hỗ trợ hầu hết các hệ điều hành như window, linux, mac

Sau khi đã download được Xampp về máy, chúng ta tiến hành cài đặt như sau Màn hình mới vào cài đặt

- Nhấn Next để tiếp tục việc cài đặt

- Nhấn Next để tiếp tục cài đặt

- Ở đây, các bạn nên chọn ổ đĩa mà không phải ổ C Để tránh việc cài win hoặc ghost máy bị mất dữ liệu Nhấn Next để tiếp tục

- Nhấn Next để tiếp tục Quá trình cài đặt diễn ra như hình bên dưới

- Tiếp theo ta được màn hình như bên dưới

- Nhấn Finish để hoàn thành việc cài đặt.

CHƯƠNG 2 : PHÂN TÍCH VÀ THIẾT KẾ WEBSITE 2.1 Khảo sát hiện trạng

Hiện nay trào lưu kinh doanh qua mạng ngày càng trở nên phổ biến Internet phát triển kéo theo nhiều dịch vụ phát triển theo Internet hiện nay không còn mấy xa lạ với con người được trở thành phương tiện truyền thông được nhiều người sử dụng nhất trên thế giới

Không chỉ dùng internet làm phương tiện truyền thông tin trao đổi, giải trí, xem tin tức, tìm kiếm thông tin mọi người còn dùng internet để kinh doanh các mặt hàng bình thường đến đặc biệt của mình

Ở Việt Nam cũng có một số trang web kinh doanh bán hàng qua mạng như là www.123mua.com, www.thegioididong.com.vn Và nhiều trang web nổi tiếng khác Các mặt hàng đồng hồ cũng được bán khá nhiều trên nhiều website Tuy nhiên không phải việc kinh doanh qua mạng trở thành một trào lưu phát triển mạnh mẽ và thu hút các nhà kinh doanh, mọi lứa tuổi mà vì một số lý do như không mất chi phí thuê mặt bằng kinh doanh Kinh doanh trực tuyến không phải có một nguồn vốn lớn mới có thể kinh doanh mà chỉ cần nguồn vốn đủ để tích luỹ hàng hay một số dịch vụ khác là có thể bắt tay vào việc kinh doanh của mình, bên cạnh đó nhiều người có thể sử dụng blog cá nhân của mình để tiến hành kinh doanh các mặt hàng đồng hồ của mình

Mặt hàng kinh doanh qua mạng hiện nay thì đồng hồ được coi là đang phổ biến, với các shop online như thế này các chủ cửa hàng chỉ cần thường xuyên lên mạng quảng cáo các mặt hàng của mình với mục đích tìm kiếm và thu hút khách hàng Khách hàng chỉ cần mấy thao tác “click chuột” vào sản phẩm mà mình yêu thích và liên hệ với chủ cửa hàng là có thể chờ hóa đơn chuyển tới nhà của mình

Việc kinh doanh qua mạng giúp nhiều công ty có nhiều cơ hội và thách thức hơn trong việc mở rộng thị trường không chỉ thời gian mà cả không gian, trong nước cũng như ngoài nước Ví dụ như một người nước ngoài muốn mua một đồng hồ xuất xứ từ Việt Nam hay bất cứ một cái gì đó Bên những thuận lợi thì việc kinh doanh qua mạng vẫn có những vấn đề nảy sinh Đòi hỏi phải có hiểu biết về công nghệ thông tin để thiết kế và tạo một trang web để thực hiện hoạt động bán hàng và quảng bá sản phẩm của mình Một thực tế cho thấy Việt Nam cho dù

Internet và việc mua bán hàng trực tuyến phát triển khá nhanh chóng nhưng rất nhiều người dùng vẫn đang lo sợ với phương thức kinh doanh khá mới mẽ này

Khách hàng có tâm lí lo ngại khi mua các mặt hàng nói chung và các mẫu đồng hồ nói riêng vì họ không chắc chắn rằng các mẫu sản phẩm có tốt như quảng cáo của các nhà kinh doanh vì họ không tiếp xúc các hàng trực tiếp được tiền chuyển đi hàng hoá sẽ đến chậm hoặc không chuyển đến Còn phía bên bán hàng cũng phải tốn một chi phí không như trong việc mua hàng hay sản xuất ra một sản phẩm nào đó mà không thể biết được phản ứng của khách hàng, hay giao hàng mà không có người nhận, hay địa chỉ không chính xác

Hình thức kinh doanh nào cũng có những ưu điểm và nhược điểm của nó tuy nhiên sự thành công của một hình thức kinh doanh nó còn phụ thuộc vào ý tưởng và cách kinh doanh của người quản lí

Đối với ngành kinh doanh đồng hồ qua mạng giúp cho ngành hồng hồ ngày càng đa dạng hơn và phù hợp với xu hướng tất yếu của thời đại hiện nay, thời đại công nghệ thông tin

2.1.1 Môi trường hệ thống

Hình 2.1: sơ đồ hệ thống

Quản lý người dùng

2.1.2 Mô tả hệ thống bán đồng hồ

Hoạt động Website bán đồng hồ có thể mô tả như sau:  Hoạt động của khách hàng

Khi khách đã quyết định tham gia vào hoạt động mua hàng của cửa hàng thì mọi khách hàng được cung cấp một giỏ hàng tương ứng Khách hàng tự do lựa chọn loại hàng hóa nào mà mình thích vào giỏ hàng của mình

Thông qua chức năng tìm kiếm của website giúp khách hàng có thể nhanh chóng tìm được loại hàng mà mình muốn mua một cách nhanh nhất

Khách hàng có thể cập nhật các mặt hàng hay thêm mặt hàng vào giỏ hàng của mình nếu muốn mua, có thể xóa mặt hàng trong giỏ hàng mà mình không muốn mua nữa

Nếu khách hàng chấp nhận thanh toán thì hệ thống yêu cầu nhập thông tin chi tiết của khách hàng như họ tên, địa chỉ, email, username, pasword nếu khách hàng chưa đăng ký đăng nhập, ngược lại nếu khách hàng nào đã đăng ký rồi thì họ chỉ cần đăng nhập bằng username và password của mình

Khi khách hàng đã hoàn thành quá trình đặt hàng với hệ thống thì khách hàng tiến hành thanh toán Sau khi hoàn thành quá trình thanh toán khách hàng có thể thực hiện lại quá trình mua hàng của mình nếu khách hàng muốn mua thêm hàng hóa Khi đã đặt hàng rồi, khách hàng có thể theo dõi trực tiếp tình trạng đơn đặt hàng của mình qua website nếu họ có băn khoăn, nếu họ có những gì không đồng ý thì có thể gửi đơn khiếu nại và thông tin phản hồi hệ thống qua chức năng liên hệ khác hàng

• Hoạt động của nhà quản trị

Cung cấp các giỏ hàng cho khách hàng giúp khách hàng cảm thấy an tâm khi mua hàng mà không bị một số lỗi làm gián đoạn quá trình mua hàng của khách hàng, giúp hiệu quả mua hàng của họ nhiều hơn cho đến khi kết thúc việc mua hàng cũng như ấn định số lượng hàng mua

Theo dõi khách hàng: cần phải biết khách hàng tham gia mua là ai và họ cần mua mặt hàng gì trong số khách hàng tham gia vào việc mua hàng Thống kế hóa đơn mua của họ, doanh thu với từng mặt hàng của hóa đơn

Sau khi kết thúc phiên giao dịch của khách hàng, các hóa đơn khách hàng mua sẽ được tổng kết lại và chuyển sang các bộ phận khác để xử lý như các bộ phận kế toán, kinh doanh, và bộ phận chuyển giao hàng cho khách

Để thu hút khách hàng thường xuyên tham gia vào trang web, nhà quản trị cần phải có các biện pháp để xúc tiến đăng tải các chương trình khuyến mãi, giảm giá trong những dịp cần thiết để lôi kéo khách hàng về phía mình, và có các tru đãi với các khách hàng thường xuyên và mua hàng với số lượng lớn Có các hoạt động quản lý và xử lý hóa đơn như: thông tin, hiển thị các mặt hàng dã giao hay chưa giao Kiểm tra tình trạng hóa đơn và đánh dấu tương ứng với mặt hàng đã giao hay chưa giao Lập các hóa đơn giao cho khách hàng

2.1.3 Đặc tính người dùng

- Người dùng phải đăng ký tài khoản thành viên để có tài khoản truy cập vào hệ thống để có thể tiến hành thanh toán sản phẩm trong giỏ hàng và quản lý giỏ hàng của mình

- Quản lý hệ thống hay nhân viên của cửa hàng đều cũng cần có tài khoản riêng để có thể quản lý hệ thống cũng như muốn thực hiện các thao tác mua bán với khách hàng và sử dụng các chức năng của hệ thống để làm việc

- Cửa hàng đó cũng phải có đủ điều kiện để sử dụng được trang web đó 2.1.4 Yêu cầu về chức năng

- Đối với người quản trị

+ Để đảm bảo an toàn cho hệ thống hệ thống còn cung cấp password để người quản trị có thể truy cập vào hệ thống thao tác với cơ sở dữ liệu của website

+ Giúp người quản trị có thể xem, theo dõi quản lý các đơn đặt hàng mua sản phẩm đồng hồ của khách hàng và quản lý khách hàng Thuận lợi trong việc thêm, sửa hàng hóa và kiểm tra dữ liệu nhập vào để đáp ứng kịp thời các nhu cầu của khách hàng các yêu cầu của khách hàng

+ Thống kê tình hình các chức năng : doanh thu tháng nay, năm nay, nhân viên, khách hàng, đồng hồ nam, đồng hồ nữ, đồng hồ trẻ em, hóa đơn chưa duyệt

- Đối với khách hàng

+ Có thể xem thông tin các mẫu đồng hồ mới, tìm kiếm sản phẩm một cách nhanh chóng và chính xác, có thể đóng góp ý kiến, các thắc mắc của mình

+ Khách hàng có thể đặt mua sản phẩm và thanh toán hóa đơn của mình