đồ án i xây dựng phần mềm thanh toán hóa đơn bán lẻ

Một trong những ứng dụng không thể thiếu dành cho các siêu thị, cửa hàng tiện lợi được sử dụng rất nhiều đó là phần mềm thanh toán hóa đơn.Hiện nay có rất nhiều ngôn ngữ lập trình đã đượ

ĐẠI HỌC BÁCH KHOA HÀ NỘI

Điện tử viễn thông

Hà Nội, 9/2023

Nhận xét của giảng viên

Ngày: … /9 / 2023 Người nhận xét (Ký và ghi rõ họ tên) Mục lục LỜI CẢM ƠN 4

LỜI MỞ ĐẦU 5

Chương 1 Giới thiệu chung 6

1 Đặt vấn đề 6

2 Phạm vi, mục tiêu của bài toán 7

2.1 Phạm vi bài toán 7

2.2 Mục tiêu cần đạt được 7

3 Định hướng giải pháp 7

3.1 Giải pháp xây dưng 7

3.2 Nhiệm vụ cần thực hiện 8

Chương 2 Cơ sở lý thuyết 8

1 Nguyên lý của bài toán 8

2. Ứng dụng và khó khăn, thách thức của bài toán 9

2.1 Ứng dụng bài toán 9

2.2 Khó khăn của bài toán 9

Chương 3 Xây dựng chương trình 9

1 Môi trường xây dựng 9

2 Sơ đồ và cấu trúc hoạt động 10

3 Thiết kế Frontend 11

3.1 Thiết kế file code style.css 11

3.2 Thiết kế file code index.html 13

3.3 Thiết kế file code script.js 15

4 Cài đặt và kiểm thử 20

4.1 Cài đặt 20

4.2 Kiểm thử 26

Chương 5 Kết quả đạt được , vấn đề tồn tại và hướng phát triển 28

1 Kết quả đạt được 28

2 Vấn đề tồn tại 28

3 Hướng phát triển 28

KẾT LUẬN 29

TÀI LIỆU THAM KHẢO 30

LỜI CẢM ƠN

Lời đầu tiên em xin gửi lời cảm ơn vô cùng sâu sắc và chân thành tới thầy Nguyễn Việt Tùng, người đã hướng dẫn em rất tận tình trong suốt quá trình học tập cũng như thực hiện đồ án này

Do thời gian và kiến thức có hạn nên không thể tránh khỏi những thiếu sót nhất định nhưng được sự hỗ trợ và góp ý của thầy, bạn bè, các anh chị đi trước nên nhóm đã hoàn thành đồ án

Em xin chân thành cảm ơn!

LỜI MỞ ĐẦU

Trong thời buổi hiện nay, công nghệ đã và đang được ứng dụng vào hầuhết các lĩnh vực của đời sống, kinh doanh cũng như buôn bán Việc ứng dụng công nghệ thông tin vào quản lý bán hàng không những tiết kiệm thời gian, tiện lợi mà còn thể hiện được độ chính xác cao Một trong những ứng dụng không thể thiếu dành cho các siêu thị, cửa hàng tiện lợi được sử dụng rất nhiều đó là phần mềm thanh toán hóa đơn

Hiện nay có rất nhiều ngôn ngữ lập trình đã được sử dụng như C, C++, C#, JAVA, PYTHON,… Cùng với C,C++ thì Javascript cũng là một ngôn ngữ phổ biến hiện nay, nhờ tính linh hoạt cũng như sự dễ dàng khi dùng của

nó Chính vì vậy em đã chọn ngôn ngữ Javascript để tạo nên phần mềm thanhtoán hóa đơn này

Trong quá trình tìm hiểu ngôn ngữ và viết chương trình, dù đã rất cố gắng nhưng do kiến thức còn hạn chế nên không thể tránh khỏi những sai sót,rất mong nhận được sự đóng góp ý kiến của thầy cô

Chương 1 Giới thiệu chung

1 Đặt vấn đề

Ngày nay, việc đi siêu thị, cửa hàng tiện lời đã trở nên phổ biến Cùng với việc công nghệ thông tin đang trở nên ứng dụng vào hầu hết các lĩnh vực của đời sống, kinh doanh cũng như buôn bán Việc ứng dụng công nghệ thông tin vào quản lý bán hàng không những tiết kiệm thời gian, tiện lợi mà còn thể hiện được độ chính xác cao Một trong những phần mềm hỗ trợ rất nhiều đó là phần mềm thanh toán hóa đơn bán lẻ được các doanh nghiệp, siêuthị cũng như cửa hàng tiện lợi ưu tiên sử dụng

2 Phạm vi, mục tiêu của bài toán

Lấy thông tin sản phẩm cần thanh toán từ cơ sở dữ liệu

Tính tổng số tiền các sản phẩm cho hóa đơn

Xóa đi những sản phẩm không muốn mua

Xuất ra hóa đơn cần thanh toán

Xây dựng phần mềm có thể lấy thông tin các sản phẩm từ cơ sở dữ liệu

đã có trước, qua đó tính toán được số lượng sản phẩm, số tiền cần thanh toán cũng như xuất ra hóa đơn

3 Định hướng giải pháp

Xây dựng frontend cho hệ thống sử dụng ngôn ngữ lập trình

HTML/CSS

HTML (HyperText Markup Language) : là một ngôn ngữ đánh dấu đượcthiết kế ra để tạo nên các trang web, nghĩa là các mẩu thông tin được trình bàytrên World Wide Web

CSS (Cascading Style Sheets) : định nghĩa về cách hiển thị của một tài liệu HTML CSS đặc biệt hữu ích trong việc thiết kế Web Nó giúp cho người

thiết kế dễ dàng áp đặt các phong cách đã được thiết kế lên bất kì page nào của website một cách nhanh chóng, đồng bộ.

Xây dựng backend cho hệ thống sử dụng ngôn ngữ lập trình JavaScript.JavaScript là một ngôn ngữ lập trình dành cho việc tạo và phát triển web Nó được nhúng vào trong file HTML giúp cho website trở nên sống động và đẹp hơn JavaScript có thể cập nhật và thay đổi cả HTML và CSS

Từ những định hướng và giải pháp như trên,em xin đưa ra các yêu cầu

và nhiệm vụ cần thực hiện trong bài toán này:

Tìm hiểu về mô hình phần mềm thanh toán hóa đơn

Nghiên cứu về ngôn ngữ lập trình HTML/CSS

Nghiên cứu, tìm hiểu về ngôn ngữ lập trình JavaScript

Chương 2 Cơ sở lý thuyết

1 Nguyên lý của bài toán

Sử dụng các ngôn ngữ lập trình để xây dựng một phần mềm thanh toán hóa đơn

Đặc tả hành vi “ thanh toán hóa đơn”:

Nhập mã, quét mã sản phẩm

Hiện thông tin sản phẩm

Hệ thống tính tổng số tiền cần trả, trừ đi số tiền chiết khấu

Nhân viên thanh toán tiền cho khách

In ra hóa đơn

Hình 1

2 Ứng dụng và khó khăn, thách thức của bài toán

Tìm kiếm thông tin sản phẩm trên hệ thống

Tính tổng số tiền cần thanh toán

Chinh sửa thông tin hóa đơn trước khi in ra

In ra hóa đơn

Chưa móc nối được với cơ sở dữ liệu

Chương 3 Xây dựng chương trình

1 Môi trường xây dựng

Ngôn ngữ lập trình Frontend: HTML, CSS

Ngôn ngữ lập trình Backend: JavaScript

IDE: Visual Studio Code

2 Sơ đồ và cấu trúc hoạt động

Sơ đồ use case

Hình 2

Sơ đồ nguyên lý hoạt động:

Hình 3

3 Thiết kế Frontend

Hình 4

Đoạn mã CSS này cung cấp các kiểu và quy tắc định dạng cho trang web Dưới đây là tác dụng của từng phần trong mã CSS:

body { background-color: rgb(24, 23, 23); }: Đây định dạng màu nền của trang web thành màu đen sẫm (rgb(24, 23, 23))

{ color: #fdfdfd; }: Đây định dạng màu chữ của toàn bộ nội dung trang web thành trắng (#fdfdfd), tức là màu văn bản sẽ hiển thị trên nền đen

#cart-table th, #cart-table td { text-align: center; }: Đoạn mã này căn giữa nội dung trong các ô của bảng có id "cart-table" Nó áp dụng cho cả thẻ <th> và

<td> trong bảng

#total-cost { font-size: 24px; font-weight: bold; }: Đoạn mã này tạo một kiểu cho phần tử có id "total-cost" Nó đặt kích thước phông chữ thành 24px và đặt độ đậm (font-weight) là đậm (bold) Điều này có thể làm cho tổng giá trị hiển thị trên trang web nổi bật và dễ đọc hơn

@media print { no-print { display: none; } }: Đoạn mã này xác định một quy tắc phương tiện (@media) cho trường hợp khi trang web được in ra giấy Nó đặt thuộc tính display của các phần tử có lớp "no-print" thành "none", điều này có nghĩa là các phần tử với lớp "no-print" sẽ bị ẩn khi trang web được in

ra giấy Điều này thường được sử dụng để ẩn các phần tử không cần thiết khi

in hóa đơn hoặc tài liệu từ trang web

Mã HTML mô tả cấu trúc và giao diện của trang web "Billing system application" Dưới đây là các phần quan trọng và tác dụng của từng phần trong

mã HTML:

Hình 5

<head>: Phần này chứa thông tin về trang web và liên kết đến các tệp CSS và JavaScript cần thiết Cụ thể:

<meta charset="UTF-8">: Định rõ bộ ký tự UTF-8 cho trang web <metahttp-equiv="X-UA-Compatible" content="IE=edge">: Thông báo cho trình duyệt sử dụng chế độ tương thích với Edge

<meta name="viewport"

content="width=device-width,initial-scale=1.0">: Điều chỉnh thiết lập cho khả năng phản hồi và tỷ lệ kích thước chocác thiết bị di động

Các liên kết đến tệp CSS: Đây là các liên kết đến tệp CSS từ Bootstrap

và các biểu tượng từ Font Awesome, cũng như tệp CSS tùy chỉnh được gọi

"style.css" Các tệp CSS này quyết định kiểu dáng và trình bày của trang web

Hình 6

Hình 7

<body>: Phần này chứa nội dung thực tế của trang web Điểm đáng chú ý bao gồm:

<h1>: Đây là tiêu đề chính của trang web, hiển thị "Billig System

Application"

Biểu mẫu <form>: Đây là một biểu mẫu chứa các trường nhập liệu (<input>)

để người dùng nhập thông tin về mục hàng, bao gồm tên, giá và giảm giá.Bảng <table>: Đây là bảng sẽ được sử dụng để hiển thị danh sách các mục hàng đã thêm vào giỏ hàng Có các cột cho tên sản phẩm, giá và nút xóa mục hàng

Phần tử <p>: Hiển thị tổng giá trị của giỏ hàng với id "total-cost"

Nút <button>: Nút "Generate Invoice" để tạo hóa đơn

Liên kết đến thư viện jQuery và script.js: Các tệp JavaScript liên kết dưới đây,bao gồm thư viện jQuery và tệp script.js, chứa mã JavaScript để thực hiện cácchức năng của ứng dụng, bao gồm thêm, xóa mục hàng, tính tổng giá trị và tạo hóa đơn

Hình 8

$(document).ready(function() { });: Đây là một sự kiện jQuery Nó đảm bảorằng mã JavaScript chỉ chạy sau khi trang HTML đã được tải hoàn toàn.var items = [];: Đây là một mảng để lưu trữ các mục trong giỏ hàng

$("#item-form").on("submit", addItemToCart);: Khi biểu mẫu có id form" được gửi đi (submit), hàm addItemToCart sẽ được gọi để thêm một mục mới vào giỏ hàng

"item-$("#cart-table").on("click", ".btn-danger", removeItemFromCart);: Khi một nút có lớp "btn-danger" trong bảng có id "cart-table" được nhấp vào, hàm removeItemFromCart sẽ được gọi để xóa mục khỏi giỏ hàng.

$("#generate-invoice").on("click", generateInvoice);: Khi nút có id invoice" được nhấp vào, hàm generateInvoice sẽ được gọi để tạo hóa đơn

"generate-Hình 9

addItemToCart(event): Hàm này được gọi khi người dùng gửi biểu mẫu để thêm một mục vào giỏ hàng Nó lấy tên và giá sản phẩm từ các trường nhập liệu trên biểu mẫu, tạo một đối tượng mục và thêm nó vào mảng items Sau đó, nó cập nhật bảng hiển thị giỏ hàng và tổng giá trị của giỏ hàng

function addItemToCart(event): Đây là khai báo của hàm addItemToCart,

mà sẽ được gọi khi người dùng gửi biểu mẫu để thêm một mục vào giỏ hàng

event.preventDefault(); : Dòng này ngăn chặn hành vi mặc định của biểu mẫu, tức là không làm trang web chuyển đổi hoặc tải lại sau khi biểu mẫu được gửi

var itemName = $("#item-name").val();

o var itemPrice = $("#item-price").val();

o Dòng này lấy giá trị từ hai trường nhập liệu có id name" và price" trong biểu mẫu và lưu chúng vào các biến itemName và itemPrice

"item-if (itemName !== "" && itemPrice !== ""){ : Dòng này kiểm tra xem itemName và itemPrice có giá trị không rỗng.

var item = { name: itemName,

price: parseFloat(itemPrice), };

Dòng này tạo một đối tượng item chứa tên và giá của mục, sau đó đưa nó vào mảng items

items.push(item); : Dòng này thêm item mới vào mảng items

$("#cart-table tbody").append( "<tr><td>"+ item.name + "</td><td>$"+ item.price.toFixed(2)+ '</td><td><buttom class="btn btn-sm btn-

danger"><i class="fa fa-trash-alit"></i></button></td></tr>' ); : Dòng này cập nhật bảng giỏ hàng bằng cách thêm một hàng mới với tên và giá của item

updateTotalCost(); : Dòng này gọi hàm updateTotalCost() để cập nhật tổng giá trị của giỏ hàng sau khi thêm một mục vào giỏ hàng

$("#item-name").val("");

$("#item-price").val("");

Dòng này đặt giá trị của trường nhập liệu có id name" và price" về chuỗi rỗng sau khi đã thêm một mục vào giỏ hàng để làm sạch biểu mẫu

"item-Hình 10removeItemFromCart(): Hàm này xóa một mục khỏi giỏ hàng Nó xác định chỉ mục của hàng trong bảng và loại bỏ nó khỏi mảng items, sau đó cập nhật bảng và tổng giá trị của giỏ hàng

var index=$(this).closest("tr").index(); : Dòng này xác định chỉ mục của hàng trong bảng mà nút xóa được nhấp vào.

items.slice(index,1); : Dòng này xóa mục khỏi mảng items bằng cách sửdụng slice để cắt bỏ mục tại chỉ mục index

$(this).closest("tr").remove(); : Dòng này loại bỏ hàng chứa nút xóa mục khỏi bảng

updateTotalCost(); : Dòng này gọi hàm updateTotalCost() để cập nhật tổng giá trị của giỏ hàng sau khi xóa một mục khỏi giỏ hàng

Hình 11

updateTotalCost(): Hàm này tính tổng giá trị của các mục trong giỏ hàng

và cập nhật nó trên trang web

Hình 12

generateInvoice(): Hàm này tạo một trang HTML mới chứa thông tin hóa đơn dựa trên các mục trong giỏ hàng Nó tạo một cửa sổ mới và hiển thị hóađơn bên trong nó

var invoice =`<html> </html>`; : Dòng này tạo một chuỗi invoice chứa HTML mã hóa cho đơn vị

invoice += '</tbody></table><p class="text-right">Total Cost:

$'+getTotalCost()+"</p></div></body></html>"; : Dòng này kết thúc chuỗihóa đơn bằng cách thêm kết thúc tổng giá trị thông tin của giỏ hàng và thẻ HTML

var popup = window.open("","_blank");

popup.document.write(invoice);

popup.document.close();

Dòng này tạo một cửa sổ mới bằng cách sử dụng window.open(), sau đó mở

và viết nội dung hóa đơn vào cửa sổ đó

Hình 13

getTotalCost(): Hàm này tính tổng giá trị của các mục trong giỏ hàng và trả

về nó dưới dạng chuỗi số thập phân có hai chữ số sau dấu phẩy

Hình 14

Hình 15

Hình 18

Hình 19Cài đặt live server

Hình 20

Hình 25

Hình 26

Hình 27

Chương 5 Kết quả đạt được , vấn đề tồn tại và hướng phát

triển

1 Kết quả đạt được

các yêu cầu của bài toán đặt ra

kế hệ thống trên nền web Bản thiết kế đầy đủ và chi tiết, đảm bảo chất lượng

để dễ dàng chuyển sang chương trình, hệ thống

2 Vấn đề tồn tại

3 Hướng phát triển

KẾT LUẬN

Nhờ sự hướng dẫn của thầy Nguyễn Việt Tùng và qua quá trình tìm hiểu,

đề tài “Xây phần mềm thanh toán hóa đơn bán lẻ” giúp nhóm em có cơ hội ápdụng kiến thức về quản lý bán hàng và thanh toán hóa đơn ứng dụng công nghệ thông tin Qua quá trình thực hiện, em hiểu rõ hơn về các bước quan trọng trong quá trình xây dựng một chương trình thanh toán hóa đơn

Do môn học có rất nhiều kiến thức, mang tính hệ thống trong khi trình độ

em còn hạn chế, nhiều phần kiến thức chúng em chưa hiểu sâu và cần cố gắng nhiều để thực hành được thêm các nội dung đã học

Cuối cùng, em muốn gửi lời cảm ơn chân thành tới thầy Nguyễn Việt Tùng đã hỗ trợ và đồng hành cùng em trong quá trình thực hiện đề tài

TÀI LIỆU THAM KHẢO

tien-voi-javascript.html

https://gitiho.com/blog/huong-dan-chi-tiet-cach-khoi-tao-chuong-trinh-dau-hang-theo-chuoi-cung-cap-hay

https://www.slideshare.net/trongthuy1/luan-van-chuong-trinh-quan-li-ban-https://www.youtube.com/watch?v=pEXDyn3uC3o&t=8595s