Chương 1: Tổng quan đề tài Chương 2: Cơ sở lý thuyết Chương 3: Phân tích hệ thống Chương 4: Thiết kế hệ thống Chương 5: Kết quả thực nghiệm 1.2 Mục tiêu của đề tài Xây dựng một website giới thiệu và bán điện thoại đáp ứng được yêu cầu người dùng, do đó trang web cần có các chức năng sau: Giúp khách hàng tìm kiếm, xem thông tin sản phẩm nhanh chóng, đơn giản, đặt mua sản phẩm. Sau khi khách hàng chọn và đặt hàng trực tiếp thì phải hiện lên đơn hàng để khách hàng có thể nhập thông tin mua và xem hóa đơn mua hàng. Hoàng Văn Tường – Lớp Khoa học máy tính K65 12 án tt nghip ngành Công ngh thông tin Quản lý thông tin các sản phẩm: Cập nhật, sửa, xóa các mặt hàng, loại hàng, nhà sản xuất, tồn kho, tin tức. Quản lý thông tin khách hàng.
Quản lý giao dịch. Lập báo cáo, thống kê doanh thu theo ngày, tuần, tháng. Hoàng Văn Tường – Lớp Khoa học máy tính K65 13 án tt nghip ngành Công ngh thông tin 1.3 Phạm vi của đề tài Xây dựng trang web giới thiệu và bán điện thoại cho cửa hàng CellphoneS. Trang web thực hiện được các chức năng cơ bản của một trang thương mại điện tử, với hình thức thanh toán trực tuyến hoặc trực tiếp khi nhận hàng, chăm sóc khách hàng qua chatbot.4 Nội dung nghiên cứu Công nghệ ứng dụng web: Ngôn ngữ lập trình: Java, JavaScript, HTML/CSS Cơ sở dữ liệu: MySQL Phần mềm: Postman, Visual Studio Code, IntelliJ IDE Framework/Library: ReactJS, Spring Boot, Spring Security, Hibernate, TailwinCSS Nghiên cứu nội dung các chương: Tổng quan đề tài: Lý do chọn đề tài, mục tiêu, phạm vi và nội dung nghiên cứu.
Cơ sở lý thuyết: Tìm hiểu về thương mại điện tử, các công nghệ thiết kế website, hệ quản trị cơ sở dữ liệu Phân tích hệ thống: Khảo sát, phân tích yêu cầu, các biểu đồ Thiết kế hệ thống: Thiết kế biểu đồ lớp, CSDL, giao diện Kết quả thực nghiệm: Cài đặt môi trường, giao diện website Hoàng Văn Tường – Lớp Khoa học máy tính K65 14 án tt nghip ngành Công ngh thông tin CHƯƠNG 2: CƠ SỞ LÝ THUYẾT VÀ CÔNG NGHỆ 2.1 Các công nghệ lựa chọn để sử dụng 2.1 HTML HTML là viết tắt của từ Hyper Text Markup Language, có nghĩa là ngôn ngữ đánh dấu siêu văn bản. HTML được sử dụng để định dạng và hiển thị văn bản trên trình duyệt tới người sử dụng. Nó là xương sống của một trang web. Hyper Text: siêu văn bản có nghĩa là "văn bản trong văn bản".
Một văn bản có chứa một liên kết (link) là một siêu văn bản. Mỗi lần bản click vào một từ đó đưa tới một trang web mới, đó là siêu văn bản. Markup Language: ngôn ngữ đánh dấu là một ngôn ngữ lập trình được sử dụng để giúp văn bản dễ tương tác và linh động hơn. Nó có thể đặt văn bản vào trong các ảnh, bảng, liên kết.
Một tài liệu HTML chứa nhiều thẻ HTML và mỗi thẻ HTML chứa các nội dung khác nhau. Các đặc điểm của HTML: Đây là một ngôn ngữ rất dễ dàng và đơn giản. Dễ dàng để trình bày hiệu quả với HTML vì nó có nhiều thẻ định dạng. Đây là một ngôn ngữ đánh dấu vì vậy có thể sử dụng nó một cách linh hoạt để thiết kế trang web cùng với văn bản.
Có thể liên kết đến các trang web khác. Là một nền tảng độc lập vì nó có thể hiển thị trên bất kỳ nền tảng nào khác như Windows, Linux và MacOS. Có thể thêm các hình ảnh, video, âm thanh vào các trang web khiến nó hấp dẫn và dễ tương tác hơn. Hoàng Văn Tường – Lớp Khoa học máy tính K65 15 án tt nghip ngành Công ngh thông tin Các trình duyệt web phổ biến được sử dụng: Chrome Internet Explore Safari Opera Firefox 2.2 CSS CSS là chữ viết tắt của Cascading Style Sheets, nó là một ngôn ngữ được sử dụng để tìm và định dạng lại các phần tử được tạo ra bởi các ngôn ngữ đánh dấu (ví dụ như HTML).
có thể hiểu đơn giản rằng, nếu HTML đóng vai trò định dạng các phần tử trên website như việc tạo ra các đoạn văn bản, các tiêu đề, bảng,… thì CSS sẽ giúp chúng ta có thể thêm một chút “phong cách” vào các phần tử HTML đó như đổi màu sắc trang, đổi màu chữ, thay đổi cấu trúc,… CSS được phát triển bởi W3C (World Wide Web Consortium) vào năm 1996, vì HTML không được thiết kế để gắn tag để giúp định dạng trang web. Phương thức hoạt động của CSS là nó sẽ tìm dựa vào các vùng chọn, vùng chọn có thể là tên một thẻ HTML, tên một ID, class hay nhiều kiểu khác. Sau đó là nó sẽ áp dụng các thuộc tính cần thay đổi lên vùng chọn đó. Mối tương quan giữa HTML và CSS rất mật thiết.
HTML là ngôn ngữ markup (nền tảng của site) và CSS định hình phong cách (tất cả những gì tạo nên giao diện website), chúng là không thể tách rời. Hoàng Văn Tường – Lớp Khoa học máy tính K65 16 án tt nghip ngành Công ngh thông tin 2.3 Ngôn ngữ lập trình JavaScript JavaScript là một ngôn ngữ lập trình của HTML và WEB. Nó nhẹ và được sử dụng phổ biến nhất như là một phần của các trang web, mà sự thi hành của chúng cho phép Client-Side script tương tác với người sử dụng và tạo các trang web động. Nó là một ngôn ngữ chương trình thông dịch với các khả năng hướng đối tượng.
JavaScript được biết đến đầu tiên với tên Mocha, và sau đó là LiveScript, nhưng công ty Netscape đã đổi tên của nó thành JavaScript, bởi vì sự phổ biến như là một hiện tượng của Java lúc bấy giờ. JavaScript xuất hiện lần đầu trong Netscape 2.0 năm 1995 với tên LiveScript. Core đa năng của ngôn ngữ này đã được nhúng vào Netscape, IE, và các trình duyệt khác. Client-side JavaScript: Client-Side JavaScript là form phổ biến nhất của ngôn ngữ này.
Script nên được bao gồm trong một tài liệu HTML cho việc mã hóa để được thông dịch bởi trình duyệt. Nghĩa là một trang web không cần là một HTML tĩnh, nhưng có thể bao gồm các chương trình mà tương tác với người dùng, điều khiển trình duyệt, và tạo nội dung HTML động. Kỹ thuật Client-Side JavaScript cung cấp nhiều lợi thế hơn các CGI Server-Side Script. Ví dụ, có thể sử dụng JavaScript để kiểm tra nếu người sử dụng đã nhập một địa chỉ Email hợp lệ trong một trường Form.
JavaScript code được thực thi khi người sử dụng đệ trình Form, và chỉ nếu tất cả đầu vào là hợp lệ, chúng sẽ được đệ trình tới Web Server. Hoàng Văn Tường – Lớp Khoa học máy tính K65 17 án tt nghip ngành Công ngh thông tin JavaScript có thể được sử dụng để nắm bắt các sự kiện được khởi tạo từ người sử dụng như nhấp chuột, điều hướng link, và các hoạt động khác mà người dùng khởi tạo. Các lợi thế của JavaScript: Sự tương tác Server ít hơn: có thể xác nhận đầu vào (input) người sử dụng trước khi gửi trang tới Server. Điều này làm tiết kiệm lưu lượng tải ở Server, nghĩa là Server sẽ tải ít hơn.
Phản hồi ngay lập tức tới khách truy cập: Họ không phải chờ cho một trang web tải lại để thấy xem nếu họ đã quên nhập cái gì đó. Khả năng tương tác tăng lên: có thể tạo các giao diện mà phản ứng lại khi người sử dụng rê chuột qua chúng hoặc kích hoạt chúng thông qua bàn phím. Giao diện phong phú hơn: có thể sử dụng JavaScript để bao gồm những mục như các thành phần Drag và Drop (DnD) và các con trượt (Slider) để cung cấp một Rich Interface (Giao diện giàu tính năng) tới site khách truy cập. Hạn chế của JavaScript: Chúng ta không thể đối xử JavaScript như là một ngôn ngữ chương trình chính thức (full-fledged).
Nó thiếu các tính năng quan trọng sau: Client-side JavaScript không cho phép đọc và ghi các file, bởi vì lý do bảo mật JavaScript không được sử dụng cho việc kết nối mạng các ứng dụng bởi vì không có những hỗ trợ có sẵn. JavaScript không có bất kỳ khả năng đa luồng hoặc đa xử lý. Hoàng Văn Tường – Lớp Khoa học máy tính K65 18 án tt nghip ngành Công ngh thông tin Một lần nữa, JavaScript là một ngôn ngữ chương trình thông dịch, nhẹ mà cho phép xây dựng khả năng tương tác trong các trang HTML tĩnh. Các công cụ phát triển JavaScript: Một trong những điểm mạnh lớn nhất của JavaScript là nó không yêu cầu các công cụ phát triển tốn kém, có thể bắt đầu với một bộ biên soạn (Editor) văn bản đơn giản như Notepad.
Khi nó là một ngôn ngữ thông dịch bên trong context của một trình duyệt web, không cần phải mua một Compiler (bộ phiên dịch). Để làm cuộc sống của đơn giản hơn, nhiều nhà cung cấp đã cho ra đời các công cụ chỉnh sửa JavaScript đẹp, được liệt kê dưới đây: Microsoft FrontPage: Microsoft đã phát triển một HTML Editor phổ biến được gọi là FrontPage. FrontPage cũng cung cấp cho nhà lập trình các công cụ JavaScript để giúp đỡ tạo các Website có tính tương tác. Macromedia Dreamweaver MX: là một HTML và JavaScript Editor rất phổ biến trong cộng đồng lập trình web chuyên nghiệp.
Nó cung cấp các thành phần JavaScript đã xây dựng trước mà thuận tiện, tích hợp tốt với cơ sở dữ liệu, và theo các chuẩn mới như XHTML và XML. Macromedia HomeSite 5: là một HTML và JavaScript Editor từ Macromedia mà có thể được sử dụng để quản lý các Website cá nhân một cách hiệu quả. Chuẩn ECMAScript 2024 (ES15) là phiên bản mới nhất của ngôn ngữ JavaScript, được phát hành hằng năm với những cải tiến và tính năng mới. JavaScript hiện đại tuân theo chuẩn ECMAScript, Hoàng Văn Tường – Lớp Khoa học máy tính K65 19 án tt nghip ngành Công ngh thông tin mà trong các phiên bản trước đây như ECMAScript 6 (ES6), đã mang đến những thay đổi lớn.
Sự khác biệt giữa các phiên bản JavaScript của các nhà cung cấp trình duyệt ngày nay là rất nhỏ nhờ vào việc tuân thủ chặt chẽ các tiêu chuẩn ECMAScript. Các trình duyệt hiện đại, bao gồm Chrome, Firefox, và Edge, đều hỗ trợ gần như toàn bộ các tính năng của ECMAScript. Dù vẫn có những tính năng đặc biệt không thuộc chuẩn chung, nhưng JavaScript hiện đại ngày càng trở nên đồng nhất nhờ sự phát triển và tiêu chuẩn hóa của ECMAScript.4 Mô hình RESTful API RESTful API là viết tắt của Representational State Transferful Application Programming Interface.