Đồ án: Xây dựng website bán hàng điện tử - SV. Trần Hữu Thắng, ĐH Đà Nẵng

Tài liệu đồ án xây dựng website bán hàng điện tử đầy đủ. Bao gồm cơ sở lý thuyết, phân tích thiết kế hệ thống, CSDL và các bước triển khai.

• Tác giả: Trần Hữu Thắng
• Người hướng dẫn: TS. Trần Văn Hưng
• Trường học: Trường Đại học Sư phạm - Đại học Đà Nẵng
• Chuyên ngành: Công nghệ thông tin
• Đề tài: Xây dựng Website bán hàng điện tử
• Loại tài liệu: Đồ án chuyên ngành
• Năm xuất bản: 2020
• Địa điểm: Đà Nẵng

Tóm tắt

I. Khái Niệm Cơ Bản Về Website Bán Hàng Điện Tử

Website bán hàng điện tử là một nền tảng kỹ thuật số cho phép các doanh nghiệp trưng bày, bán và phân phối sản phẩm trực tuyến. Đây là một hình thức thương mại điện tử hiện đại giúp kết nối người bán với hàng triệu khách hàng tiềm năng. Việc xây dựng website thương mại điện tử đòi hỏi sự kết hợp giữa công nghệ, thiết kế giao diện và chiến lược kinh doanh. Một website bán hàng hiệu quả cần có giao diện thân thiện, hệ thống thanh toán an toàn, và quản lý kho sản phẩm tự động. Nền tảng e-commerce phải đảm bảo trải nghiệm người dùng mượt mà, từ lúc khách hàng tìm kiếm sản phẩm cho đến khi hoàn tất đơn hàng. Sự phát triển của công nghệ web đã làm cho việc xây dựng website bán hàng trở nên dễ tiếp cận hơn với các doanh nghiệp vừa và nhỏ.

1.1. Định Nghĩa Frontend và Backend

Frontend là phần giao diện mà khách hàng tương tác trực tiếp, bao gồm các trang web, nút bấm và biểu mẫu nhập liệu. Backend là phần xử lý dữ liệu phía máy chủ, quản lý cơ sở dữ liệu, xác thực người dùng và xử lý thanh toán. Cả hai phần này đều quan trọng để tạo nên một website bán hàng hoàn chỉnh và hiệu quả.

1.2. Mô Hình MVC Trong Phát Triển Web

Mô hình MVC (Model-View-Controller) là kiến trúc phổ biến trong phát triển ứng dụng web. Model quản lý dữ liệu, View hiển thị giao diện, và Controller xử lý logic ứng dụng. Mô hình này giúp tổ chức mã nguồn rõ ràng, dễ bảo trì và mở rộng cho hệ thống bán hàng điện tử.

II. Phân Tích Yêu Cầu Hệ Thống Website Thương Mại

Phân tích yêu cầu là bước quan trọng trong xây dựng website bán hàng. Cần xác định rõ ràng những tính năng mà website e-commerce phải có để đáp ứng nhu cầu khách hàng và mục tiêu kinh doanh. Yêu cầu chức năng bao gồm quản lý sản phẩm, xử lý đơn hàng, thanh toán trực tuyến và quản lý khách hàng. Yêu cầu phi chức năng liên quan đến hiệu năng, bảo mật, khả năng mở rộng và khả dụng của hệ thống. Phần mềm quản lý website bán hàng cần hỗ trợ nhiều phương thức thanh toán, tích hợp hệ thống quản lý kho, và cung cấp báo cáo chi tiết về doanh số bán hàng.

2.1. Yêu Cầu Chức Năng Của Hệ Thống

Hệ thống quản lý website cần có các tính năng: đăng ký và đăng nhập người dùng, tìm kiếm và lọc sản phẩm, giỏ hàng, thanh toán, quản lý đơn hàng và đánh giá sản phẩm. Admin dashboard phải cho phép quản lý danh mục sản phẩm, giá cả, kho hàng và khách hàng. Các chức năng này là nền tảng của một nền tảng thương mại điện tử thành công.

2.2. Yêu Cầu Phi Chức Năng

Website bán hàng phải đạt tốc độ tải nhanh, có bảo mật cao để bảo vệ thông tin khách hàng, và có khả năng chịu tải lớn. Hệ thống cần được thiết kế để dễ dàng mở rộng khi lượng người dùng tăng. Bảo mật dữ liệu và mã hóa thông tin thanh toán là những yêu cầu không thể bỏ qua trong hệ thống e-commerce.

III. Thiết Kế Cơ Sở Dữ Liệu Cho Website Bán Hàng

Cơ sở dữ liệu là trái tim của bất kỳ website thương mại điện tử nào. Thiết kế cơ sở dữ liệu tốt giúp đảm bảo dữ liệu được lưu trữ, quản lý và truy xuất hiệu quả. Các bảng chính bao gồm bảng khách hàng, bảng sản phẩm, bảng danh mục, bảng đơn hàng và bảng người dùng quản trị. Mỗi bảng có các trường dữ liệu cụ thể để lưu trữ thông tin chi tiết. MySQL Workbench là công cụ phổ biến để thiết kế và quản lý cơ sở dữ liệu SQL. Mối quan hệ giữa các bảng phải được định nghĩa rõ ràng để đảm bảo tính toàn vẹn và nhất quán của dữ liệu trong hệ thống bán hàng.

3.1. Các Bảng Chính Trong Cơ Sở Dữ Liệu

Bảng khách hàng lưu trữ thông tin cá nhân và địa chỉ. Bảng sản phẩm chứa tên, mô tả, giá và hình ảnh. Bảng đơn hàng ghi lại các giao dịch mua bán. Bảng danh mục phân loại sản phẩm. Bảng người dùng quản lý tài khoản quản trị và phân quyền truy cập. Các mối quan hệ khóa ngoài kết nối các bảng này với nhau.

3.2. Công Cụ Thiết Kế Cơ Sở Dữ Liệu

MySQL Workbench cung cấp giao diện trực quan để tạo và chỉnh sửa schema cơ sở dữ liệu. Công cụ này hỗ trợ thiết kế ERD (Entity-Relationship Diagram) giúp hình dung mối quan hệ giữa các thực thể. Ngoài ra, MySQL Workbench còn cho phép tạo stored procedures, triggers và thực thi truy vấn SQL cho quản lý website bán hàng.

IV. Triển Khai Và Cài Đặt Website E commerce

Triển khai website bán hàng điện tử bao gồm cài đặt môi trường phát triển, cấu hình máy chủ web và tích hợp các thư viện cần thiết. Framework Laravel và Vue.js là các công nghệ phổ biến cho phát triển ứng dụng web hiện đại. Docker được sử dụng để containerize ứng dụng, đảm bảo tính nhất quán giữa các môi trường phát triển, kiểm tra và sản xuất. Visual Studio Code là trình soạn thảo mã được nhiều lập trình viên ưa chuộng. Quá trình cài đặt bao gồm cài đặt PHP, Composer, MySQL, cấu hình database, thiết lập REST API với Axios, và triển khai giao diện với Vue Router. Hosting và domain cũng cần được lựa chọn phù hợp với nhu cầu của nền tảng thương mại.

4.1. Cài Đặt Môi Trường Phát Triển

Cài đặt Laravel sử dụng Composer, thiết lập MySQL database, cấu hình file environment. Visual Studio Code với các extension hữu ích giúp tăng năng suất lập trình. Docker được sử dụng để tạo container chứa ứng dụng và cơ sở dữ liệu. Quá trình cài đặt phải đảm bảo all dependencies được cài đặt đúng cho hệ thống web.

4.2. Tích Hợp Frontend và API Backend

Vue.js được tích hợp vào Laravel để xây dựng giao diện tương tác. Vue Router quản lý điều hướng ứng dụng. Axios được sử dụng để gọi REST API từ frontend đến backend. Instance Lifecycle Hooks giúp kiểm soát vòng đời của Vue component. Tích hợp này cho phép tạo ra một website bán hàng mượt mà với trải nghiệm người dùng tốt.

Trích đoạn nội dung tài liệu

CHƯƠNG 1: CƠ SỞ LÝ THUYẾT 1.1 Khái Niệm Fontend Phần front-end của một trang web là phần tương tác với người dùng. Tất cả mọi thứ bạn nhìn thấy khi điều hướng trên Internet, từ các font chữ, màu sắc cho tới các menu xổ xuống và các thanh trượt, là một sự kết hợp của HTML, CSS, và JavaScript được điều khiển bởi trình duyệt máy tính của bạn.2 Khái Niệm Backend Phần back end của một trang web bao gồm một máy chủ, một ứng dụng, và một cơ sở dữ liệu. Một lập trình viên back-end xây dựng và duy trì công nghệ mà sức mạnh của những thành phần đó, cho phép phần giao diện người dùng của trang web có thể tồn tại được.3 HTML HTML là một ngôn ngữ đánh dấu được thiết kế ra để tạo nên các trang web trên World Wide Web. Cùng với CSS và JavaScript, HTML là một trong những ngôn ngữ quan trọng trong lĩnh vực thiết kế website.1 CSS CSS là ngôn ngữ tạo phong cách cho trang web – Cascading Style Sheet language.

Nó dùng để tạo phong cách và định kiểu cho những yếu tố được viết dưới dạng ngôn ngữ đánh dấu, như là HTML. Nó có thể điều khiển định dạng của nhiều trang web cùng 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ị của trang web với nội dung chính của trang bằng cách điều khiển bố cục, màu sắc, và font chữ. Ngoài ra nó còn tên gọi SASS bản chất cũng giống nhau 1.2 SCSS SCSS sử dụng cú pháp giống với Ruby (vì đơn giản nó được thiết kế bởi các lập trình viên Ruby).

Có phần mở rộng là .scss , SCSS ra đời sau SASS và có cú pháp viết tương tự như cách viết CSS. Cú pháp này được tạo ra nhằm thu hẹp khoảng cách giữa SASS và CSS bằng cách mang lại một thứ gì đó thân thiện với CSS. Ta phân biệt nó trong hình dưới đây SVTH: Trần Hữu Thắng - Lớp 18CNTT3 13 Bên trái SCSS , Bên phải CSS 1.1 Khái Niệm Bootstrap là một front-end framework miễn phí giúp quá trình phát triển web được nhanh và dễ dàng hơn. Bootstrap bao gồm các mẫu thiết kế dựa trên HTML và CSS như typography, forms, buttons, tables, navigation, modals, image carousels… cũng như các plugin JavaScript tùy chọn.

Bootstrap cũng cung cấp cho bạn khả năng tạo ra các responsive designs một cách dễ dàng.2 Vì sao nên sử dụng - Dễ sử dụng: Bất kỳ ai có kiến thức cơ bản về HTML và CSS đều có thể bắt đầu sử dụng Bootstrap. - Các tính năng đáp ứng (Responsive features): responsive CSS của Bootstrap điều chỉnh cho điện thoại, máy tính bảng và máy tính để bàn. - Cách tiếp cận Mobile-first: Trong Bootstrap 3, mobile-first styles là một phần của core framework. - Khả năng tương thích trình duyệt: Bootstrap tương thích với tất cả các trình duyệt hiện đại (Chrome, Firefox, Internet Explorer, Edge, Safari và Opera).3 Cài đặt Có 2 cách để có thể sử dụng Bootstrap trên web của bạn.

Download Bootstrap packet từ getbootstrap. Thêm Bootstrap từ CDN SVTH: Trần Hữu Thắng - Lớp 18CNTT3 14 <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="//netdna.css"> <!-- Optional theme --> <link rel="stylesheet" href="//netdna.1/css/bootstrap- theme.css"> <!-- Latest compiled and minified JavaScript --> <script src="//netdna.1Khái niệm Javascript JavaScript là một ngôn ngữ lập trình của HTML và WEB. Nó là 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 1.1 DOM là gì ? DOM là viết tắt của chữ Document Object Model, dịch tạm ra là mô hình các đối tượng trong tài liệu HTML.

mỗi thẻ HTML sẽ có những thuộc tính (Properties) và có phân cấp cha - con với các thẻ HTML khác. Sự phân cấp và các thuộc tính của thẻ HTML này ta gọi là selector và trong DOM sẽ có nhiệm vụ xử lý các vấn đề như đổi thuộc tính của thẻ, đổi cấu trúc HTML của thẻ, .2 Các loại DOM trong JS - DOM document: có nhiệm vụ lưu trữ toàn bộ các thành phần trong tài liệu của website - DOM element: có nhiệm vụ truy xuất tới thẻ HTML nào đó thông qua các thuộc tính như tên class, id, name của thẻ HTML SVTH: Trần Hữu Thắng - Lớp 18CNTT3 15 - DOM HTML: có nhiệm vụ thay đổi giá trị nội dung và giá trị thuộc tính của các thẻ HTML - DOM CSS: có nhiệm vụ thay đổi các định dạng CSS của thẻ HTML - DOM Event: có nhiệm vụ gán các sự kiện như onclick(), onload() vào các thẻ HTML - DOM Listener: có nhiệm vụ lắng nghe các sự kiện tác động lên thẻ HTML đó - DOM Navigation dùng để quản lý, thao tác với các thẻ HTML, thể hiện mối quan hệ cha - con của các thẻ HTML - DOM Node, Nodelist: có nhiệm vụ thao tác với HTML thông qua đối tượng (Object) 1.3 Các Kiểu dữ liệu trong JS Trong JS có 6 kiểu dữ liệu cơ bản: - Number - Boolean - String - Null - Undefined - Object 1.4 Biến và khai báo biến 1.1 Khái niệm về biến Giống như nhiều ngôn ngữ lập trình khác, JavaScript có các biến. Các biến có thể được coi là các thùng chứa có tên. Bạn có thể đặt dữ liệu vào các vùng chứa này và sau đó tham khảo dữ liệu chỉ bằng cách đặt tên vùng chứa.2 Khai Báo biến Để khai báo một biến ta sử dụng từ khóa const, let, var.

const được sử dụng để khai báo 1 hằng số, và giá trị của nó không thay đổi trong suốt chương trình. let khai báo biến chỉ có thể truy cập được trong block bao quanh nó được xác định bằng cặp {}. var khai báo biến có thể truy cập ở phạm vi hàm số hoặc bên ngoài hàm số, toàn cục. Giống như ngôn ngữ khác, cách đặt tên biến của JS cũng phải tuân theo 1 số quy tắc sau : SVTH: Trần Hữu Thắng - Lớp 18CNTT3 16 - Tên biến phải là các chữ không dấu viết hoa hoặc viết thường, các chữ số từ 0-9 và dấu gạch dưới () và kí hiệu $.

- Tên biến bắt đầu phải là chữ hoặc dấu gạch dưới (_), nếu bắt đầu bằng số là sai. - Không thể sử dụng các từ dành riêng (như từ khóa JavaScript) làm tên. - Các tên có phân biệt chữ hoa chữ thường Ví dụ khai báo biến đúng var person; var _person; var __person; var __person1; 1.5 Function Function JavaScript (hàm số) là một thành phần không thể thiếu trong cấu trúc chương trình. Function giúp cho chương trình trở nên rõ ràng, dễ hiểu bằng cách gộp những đoạn code lặp lại thành một hàm số.

Nhờ vậy mà việc bảo trì phần mềm cũng dễ dàng hơn 1.6 Các Framework JS - React : React được xem là framework đứng đầu trong thế giới JavaScript. Framework này dùng cách tiếp cận phản ứng và cũng đưa ra nhiều ý tưởng riêng cho việc phát triển web front-end. Muốn sử dụng React, bạn phải học cách dùng một loạt các công cụ bổ sung để có thể linh hoạt tối đa trong phát triển web front-end. Danh sách chưa đầy đủ các thư viện mà bạn có thể dùng với React, gồm: Redux, MobX, Fluxy, Fluxible, hay RefluxJS.

Ngoài ra, React cũng có thể được dùng với jQuery AJAX, fetch API, Superagent, và Axios. - Vue Gọi tắt là Vue (phát âm là /vjuː/, giống như view trong tiếng Anh), Vue.js là một framework linh động (nguyên bản tiếng Anh: progressive – tiệm tiến) dùng để xây dựng giao diện người dùng (user interfaces). - Angular hay AngularJS là một web framework JavaScript được phát triển và tài trợ bởi Google và cộng đồng để giải quyết các vấn đề gặp phải trong việc phát triển ứng dụng đơn trang. Ngoài ra, AngularJs còn có các thành phần bổ sung cho Cordova, framework sử thường dùng để viết các ứng dụng di động.

SVTH: Trần Hữu Thắng - Lớp 18CNTT3 17 1.1 Khái niệm về Framework Framework chính là một thư viện với các tài nguyên có sẵn cho từng lĩnh vực để lập trình viên sử dụng thay vì phải tự thiết kế. Có Framework, lập trình viên chỉ tìm hiểu và khai thác những tài nguyên đó, gắn kết chúng lại với nhau và hoàn chỉnh sản phẩm của mình. Đối với lập trình viên trong mỗi một lĩnh vực, họ cần phải xây dựng các lớp chương trình để xây dựng nên những phần mềm, ứng dụng thành phẩm.2 Laravel Là gì ? Laravel là một PHP framework, có mã nguồn mở và miễn phí, được xây dựng nhằm hỗ trợ phát triển các phần mềm, ứng dụng, theo kiến trúc MVC.3 Ưu điểm và nhược điểm của Laravel 1.1 Ưu điểm -Sử dụng các tính năng mới nhất của PHP Sử dụng Laravel 5 giúp các lập trình viên tiếp cận những tính năng mới nhất mà PHP cung cấp, nhất là đối với Namespaces, Interfaces, Overloading, Anonymous functions và Shorter array syntax. -Nguồn tài nguyên vô cùng lớn và sẵn có Nguồn tài nguyên của Laravel rất thân thiện với các lập trình viên với đa dạng tài liệu khác nhau để tham khảo.

Các phiên bản được phát hành đều có nguồn tài liệu phù hợp với ứng dụng của mình. -Tích hợp với dịch vụ mail Lavarel là framework được trang bị API sạch trên thư viện SwiftMailer, do đó, bạn có thể gửi thư qua các dịch vụ dựa trên nền tảng đám mây hoặc local.2 Nhược điểm So với các PHP framework khác, Laravel bộc lộ khá ít nhược điểm. Vấn đề lớn nhất có thể kể đến của framework này là thiếu sự liên kết giữa các phiên bản, nếu cố cập nhật code, có thể khiến cho ứng dụng bị gián đoạn hoặc phá vỡ. Bên cạnh đó, Lavarel cũng quá nặng cho ứng dụng di động, khiến việc tải trang trở nên chậm chạp.4 Cài đặt Bạn mở Terminal (CMD hoặc Git Bash), gõ dòng lệnh sau: “composer global require “laravel/installer””.

SVTH: Trần Hữu Thắng - Lớp 18CNTT3 18  Đối với Windows, đường dẫn là “%appdata%Composervendorbin”.  Đối với macOS và Linux, đường dẫn là “~/.composer/vendor/bin”. Sau khi cài đặt xong, bạn di chuyển vào thư mục htdocs của XAMPP. Sau đó mở cửa sổ lệnh (đối với windows thì nhấp Shift + chuột phải và chọn Command Window Here hoặc Git Bash Here) và gõ: “laravel new blog”.

Trong đó blog chính là tên thư mục laravel project của bạn. Vậy là chúng ta đã cài đặt xong Laravel Cài đặt theo composer Di chuyển thẳng vào thư mục htdocs của XAMPP,, tại đây mở cửa sổ lệnh và gõ “composer create-project –prefer-dist laravel/laravel blog” Trong đó blog chính là tên thư mục laravel project của bạn.5 Mô hình MVC MVC (Model-View-Controller) là mẫu kiến trúc phần mềm trên máy tính nhằm mục đích tạo lập giao diện cho người dùng. Theo đó, hệ thống MVC được chia thành ba phần có khả năng tương tác với nhau và tách biệt các nguyên tắc nghiệp vụ với giao diện người dùng.