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

Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (931.72 KB, 27 trang )

<span class="text_page_counter">Trang 1</span><div class="page_container" data-page="1">

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

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

Hà Nội, 9/2023

</div><span class="text_page_counter">Trang 2</span><div class="page_container" data-page="2">

<i><b>Nhận xét của giảng viên</b></i>

</div><span class="text_page_counter">Trang 3</span><div class="page_container" data-page="3">

<small>Chương 2. Cơ sở lý thuyết...8</small>

<small>2.</small> <b><small>Ứng dụng và khó khăn, thách thức của bài tốn...9</small></b>

<small>Chương 3. Xây dựng chương trình...9</small>

<small>1.Mơi trường xây dựng...9</small>

<small>3.Thiết kế Frontend...11</small>

<small>3.1Thiết kế file code style.css...11</small>

<small>3.2Thiết kế file code index.html...13</small>

<small>3.3Thiết kế file code script.js...15</small>

</div><span class="text_page_counter">Trang 4</span><div class="page_container" data-page="4">

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 đã hồn thành đồ án.

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

</div><span class="text_page_counter">Trang 5</span><div class="page_container" data-page="5">

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 tố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 thanhtốn hóa đơn này.

Trong q 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ơ.

</div><span class="text_page_counter">Trang 6</span><div class="page_container" data-page="6">

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 tố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

</div><span class="text_page_counter">Trang 7</span><div class="page_container" data-page="7">

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 tốn

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

Đặc tả hành vi “ thanh tốn hóa đơn”:Nhập mã, qt 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 tốn tiền cho khách

In ra hóa đơn

</div><span class="text_page_counter">Trang 8</span><div class="page_container" data-page="8">

Hình 12. Ứng dụng và khó khăn, thách thức của bài tố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.

</div><span class="text_page_counter">Trang 9</span><div class="page_container" data-page="9">

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

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

</div><span class="text_page_counter">Trang 10</span><div class="page_container" data-page="10">

Hình 33. Thiết kế Frontend

Hình 4

</div><span class="text_page_counter">Trang 11</span><div class="page_container" data-page="11">

Đ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

</div><span class="text_page_counter">Trang 12</span><div class="page_container" data-page="12">

<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ể:

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

</div><span class="text_page_counter">Trang 13</span><div class="page_container" data-page="13">

<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.

</div><span class="text_page_counter">Trang 14</span><div class="page_container" data-page="14">

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

</div><span class="text_page_counter">Trang 15</span><div class="page_container" data-page="15">

"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.

</div><span class="text_page_counter">Trang 16</span><div class="page_container" data-page="16">

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;

</div><span class="text_page_counter">Trang 17</span><div class="page_container" data-page="17">

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

</div><span class="text_page_counter">Trang 18</span><div class="page_container" data-page="18">

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

</div><span class="text_page_counter">Trang 19</span><div class="page_container" data-page="19">

Hình 14

Hình 15

</div><span class="text_page_counter">Trang 21</span><div class="page_container" data-page="21">

Hình 18

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

Hình 20

</div><span class="text_page_counter">Trang 24</span><div class="page_container" data-page="24">

Hình 25

Hình 26

</div><span class="text_page_counter">Trang 25</span><div class="page_container" data-page="25">

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

</div><span class="text_page_counter">Trang 26</span><div class="page_container" data-page="26">

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 tố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 tốn hóa đơn ứng dụng cơng nghệ thơng tin. Qua q 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 tố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.

</div><span class="text_page_counter">Trang 27</span><div class="page_container" data-page="27">

TÀI LIỆU THAM KHẢO