đồ á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

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.1Thiết kế file code style.css 11

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

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

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

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.

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ẩmHiệ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ấuNhân viên thanh toán tiền cho khách

In ra hóa đơn

Hình 12 Ứng dụng và khó khăn, thách thức của bài toá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, CSSNgôn ngữ lập trình Backend: JavaScriptIDE: Visual Studio Code.

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

Hình 2Sơ đồ nguyên lý hoạt động:

Hình 33 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 "item-

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.

$("#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.

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 10

removeItemFromCart(): 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.

items.forEach(function(item){totalCost+=item.price;

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");

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.

items.forEach(function(item){totalCost += item.price;

Chương 4 Cài đặt và kiểm thử

1 Cài đặt

Cài đặt HTML, CSS

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áttriể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

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