Hệ thống hóa đơn sử dụng mã nguồn jQuery PHP MySQL và Bootstrap

Trong hướng dẫn trước của chúng tôi, bạn đã học cách phát triển Hệ thống kiểm kê với Ajax, PHP & MySQL. Trong hướng dẫn này, chúng tôi sẽ giải thích cách phát triển hệ thống hóa đơn của riêng bạn với PHP & MySQL

Hóa đơn hoặc Hệ thống quản lý thanh toán rất phổ biến vì hiện nay hầu hết các giao dịch đều được thực hiện trực tuyến. Bây giờ mọi người bán và người mua đều cần hệ thống hóa đơn để xử lý thanh toán trực tuyến. Vì vậy, nếu bạn đang tìm kiếm hóa đơn hoặc hệ thống thanh toán bằng PHP và MySQL, thì bạn đang ở đây đúng nơi. Trong hướng dẫn này, bạn sẽ học cách phát triển hóa đơn và hệ thống thanh toán bằng PHP và MySQL

Ngoài ra, đọc

Xây dựng hệ thống quản lý nội dung với PHP & MySQL
Xây dựng hệ thống trò chuyện trực tiếp với Ajax, PHP & MySQL
Xây dựng hệ thống bình luận với Ajax, PHP & MySQL

Chúng tôi sẽ trình bày hướng dẫn này theo các bước đơn giản với bản demo trực tiếp để phát triển hệ thống hóa đơn hoàn chỉnh để tạo và chỉnh sửa hóa đơn với bản in hóa đơn để chuyển đổi sang định dạng PDF. Chúng tôi cũng sẽ cho phép tải xuống mã nguồn hoàn chỉnh của bản demo trực tiếp

Vì chúng tôi sẽ giới thiệu hướng dẫn này với ví dụ trực tiếp để xây dựng hệ thống hóa đơn với PHP & MySQL, nên các tệp chính cho ví dụ này sẽ như sau

mục lục. php
hóa đơn_list. php
tạo hóa đơn. php
edit_invoice. php
hoạt động. php
hóa đơn. js
Hóa đơn. php

Bước 1. Tạo bảng cơ sở dữ liệu MySQL
Trước tiên, chúng tôi sẽ tạo bảng hóa đơn_user để lưu trữ chi tiết đăng nhập của người dùng để cho phép người dùng đã đăng nhập quản lý hóa đơn

CREATE TABLE `invoice_user` (
`id` int(11) NOT NULL,
`email` varchar(100) NOT NULL,
`password` varchar(100) NOT NULL,
`first_name` varchar(100) NOT NULL,
`last_name` varchar(100) NOT NULL,
`mobile` bigint(20) NOT NULL,
`address` text NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

ALTER TABLE `invoice_user`
  ADD PRIMARY KEY (`id`);
  
ALTER TABLE `invoice_user`
  MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=123457;

Đây là dữ liệu kết xuất người dùng mẫu

INSERT INTO `invoice_user` (`id`, `email`,
 `password`, `first_name`, `last_name`,
 `mobile`, `address`) 
VALUES
(123456, '[email protected]', '12345', 
'Admin', '', 12345678912, 'New Delhi 110096 India.');

Ta sẽ tạo bảng invoice_order để lưu thông tin chi tiết hóa đơn

CREATE TABLE `invoice_order` (
`order_id` int(11) NOT NULL,
`user_id` int(11) NOT NULL,
`order_date` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP,
`order_receiver_name` varchar(250) NOT NULL,
`order_receiver_address` text NOT NULL,
`order_total_before_tax` decimal(10,2) NOT NULL,
`order_total_tax` decimal(10,2) NOT NULL,
`order_tax_per` varchar(250) NOT NULL,
`order_total_after_tax` double(10,2) NOT NULL,
`order_amount_paid` decimal(10,2) NOT NULL,
`order_total_amount_due` decimal(10,2) NOT NULL,
`note` text NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

ALTER TABLE `invoice_order`
  ADD PRIMARY KEY (`order_id`);
  
ALTER TABLE `invoice_order`
  MODIFY `order_id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=682;

Đây là dữ liệu kết xuất mẫu cho đơn đặt hàng hóa đơn

INSERT INTO `invoice_order` (`order_id`, `user_id`, `order_date`, `order_receiver_name`, 
`order_receiver_address`, `order_total_before_tax`,
 `order_total_tax`, `order_tax_per`, 
`order_total_after_tax`, `order_amount_paid`,
 `order_total_amount_due`, `note`) 
VALUES
(2, 123456, '2021-01-31 19:33:42', 'abcd',
 'Admin\r\nA - 4000, Ashok Nagar, New Delhi,
 110096 India.\r\n12345678912\r\[email protected]',
 342400.00, 684800.00, '200', 1027200.00, 
45454.00, 981746.00, 'this note txt');

Chúng tôi cũng sẽ tạo bảng hóa đơn_order_item để lưu trữ chi tiết các mặt hàng hóa đơn

CREATE TABLE `invoice_order_item` (
`order_item_id` int(11) NOT NULL,
`order_id` int(11) NOT NULL,
`item_code` varchar(250) NOT NULL,
`item_name` varchar(250) NOT NULL,
`order_item_quantity` decimal(10,2) NOT NULL,
`order_item_price` decimal(10,2) NOT NULL,
`order_item_final_amount` decimal(10,2) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

ALTER TABLE `invoice_order_item`
  ADD PRIMARY KEY (`order_item_id`);
  
ALTER TABLE `invoice_order_item`
  MODIFY `order_item_id` int(11) NOT NULL 
AUTO_INCREMENT, AUTO_INCREMENT=4364;

Đây là dữ liệu kết xuất mẫu cho các mục đặt hàng hóa đơn

INSERT INTO `invoice_order_item` (`order_item_id`, 
`order_id`, `item_code`, `item_name`, 
`order_item_quantity`, `order_item_price`,
 `order_item_final_amount`) VALUES
(4100, 2, '13555', 'Face Mask', 120.00, 2000.00, 240000.00),
(4101, 2, '34', 'mobile', 10.00, 10000.00, 100000.00),
(4102, 2, '34', 'mobile battery', 1.00, 34343.00, 34343.00),
(4103, 2, '34', 'mobile cover', 10.00, 200.00, 2000.00),
(4104, 2, '36', 'testing', 1.00, 2400.00, 2400.00);

Bước 2. Thực hiện đăng nhập người dùng
Trước tiên, chúng tôi sẽ tạo chức năng đăng nhập người dùng để cung cấp quyền truy cập quản lý hóa đơn cho người dùng đã đăng nhập. Chúng tôi sẽ tạo biểu mẫu đăng nhập trong chỉ mục. php

<div class="row">
<div class="demo-heading pull">
<h2>Build Invoice System with PHP & MySQL</h2>
</div>
<div class="login-form">
<h4>Invoice User Login:</h4>
<form method="post" action="">
<div class="form-group">
<?php if ($loginError ) { ?>
<div class="alert alert-warning"><?php echo $loginError; ?></div>
<?php } ?>
</div>
<div class="form-group">
<input name="email" id="email" type="email" class="form-control" placeholder="Email address" autofocus="" required>
</div>
<div class="form-group">
<input type="password" class="form-control" name="pwd" placeholder="Password" required>
</div>
<div class="form-group">
<button type="submit" name="login" class="btn btn-info">Login</button>
</div>
</form>
</div>
</div>

Chúng tôi sẽ xử lý chức năng đăng nhập khi gửi biểu mẫu đăng nhập bằng phương thức loginUsers()

<?php
if (!empty($_POST['email']) && !empty($_POST['pwd'])) {
include 'Invoice.php';
$invoice = new Invoice();
$user = $invoice->loginUsers($_POST['email'], $_POST['pwd']);
if(!empty($user)) {
$_SESSION['user'] = $user[0]['first_name']."".$user[0]['last_name'];
$_SESSION['userid'] = $user[0]['id'];
$_SESSION['email'] = $user[0]['email'];
$_SESSION['address'] = $user[0]['address'];
$_SESSION['mobile'] = $user[0]['mobile'];
header("Location:invoice_list.php");
} else {
$loginError = "Invalid email or password!";
}
}
?>

Bước 3. Hiển thị danh sách hóa đơn
Bây giờ chúng tôi sẽ hiển thị danh sách hóa đơn của người dùng trong invoice_list. tập tin php. Chúng ta sẽ gọi phương thức hóa đơn getInvoiceList() để lấy danh sách hóa đơn của người dùng đã đăng nhập

________số 8_______

Bước 4. Triển khai Tạo hóa đơn
Bây giờ trong create_invoice. php, chúng tôi sẽ triển khai chức năng tạo hóa đơn. Chúng tôi sẽ tạo biểu mẫu hóa đơn với các trường bắt buộc để lưu chi tiết hóa đơn với các mặt hàng và tổng số

<div class="container content-invoice">
<form action="" id="invoice-form" method="post" class="invoice-form" role="form" novalidate="">
<div class="load-animate animated fadeInUp">
<div class="row">
<div class="col-xs-8 col-sm-8 col-md-8 col-lg-8">
<h2 class="title">PHP Invoice System</h2>
<?php include('menu.php');?>
</div>
</div>
<input id="currency" type="hidden" value="$">
<div class="row">
<div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
<h3>From,</h3>
<?php echo $_SESSION['user']; ?><br>
<?php echo $_SESSION['address']; ?><br>
<?php echo $_SESSION['mobile']; ?><br>
<?php echo $_SESSION['email']; ?><br>
</div>
<div class="col-xs-12 col-sm-4 col-md-4 col-lg-4 pull-right">
<h3>To,</h3>
<div class="form-group">
<input type="text" class="form-control" name="companyName" id="companyName" placeholder="Company Name" autocomplete="off">
</div>
<div class="form-group">
<textarea class="form-control" rows="3" name="address" id="address" placeholder="Your Address"></textarea>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<table class="table table-bordered table-hover" id="invoiceItem">
<tr>
<th width="2%"><input id="checkAll" class="formcontrol" type="checkbox"></th>
<th width="15%">Item No</th>
<th width="38%">Item Name</th>
<th width="15%">Quantity</th>
<th width="15%">Price</th>
<th width="15%">Total</th>
</tr>
<tr>
<td><input class="itemRow" type="checkbox"></td>
<td><input type="text" name="productCode[]" id="productCode_1" class="form-control" autocomplete="off"></td>
<td><input type="text" name="productName[]" id="productName_1" class="form-control" autocomplete="off"></td>
<td><input type="number" name="quantity[]" id="quantity_1" class="form-control quantity" autocomplete="off"></td>
<td><input type="number" name="price[]" id="price_1" class="form-control price" autocomplete="off"></td>
<td><input type="number" name="total[]" id="total_1" class="form-control total" autocomplete="off"></td>
</tr>
</table>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-3 col-md-3 col-lg-3">
<button class="btn btn-danger delete" id="removeRows" type="button">- Delete</button>
<button class="btn btn-success" id="addRows" type="button">+ Add More</button>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-8 col-md-8 col-lg-8">
<h3>Notes: </h3>
<div class="form-group">
<textarea class="form-control txt" rows="5" name="notes" id="notes" placeholder="Your Notes"></textarea>
</div>
<br>
<div class="form-group">
<input type="hidden" value="<?php echo $_SESSION['userid']; ?>" class="form-control" name="userId">
<input data-loading-text="Saving Invoice..." type="submit" name="invoice_btn" value="Save Invoice" class="btn btn-success submit_btn invoice-save-btm">
</div>
</div>
<div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
<span class="form-inline">
<div class="form-group">
<label>Subtotal:  </label>
<div class="input-group">
<div class="input-group-addon currency">$</div>
<input value="" type="number" class="form-control" name="subTotal" id="subTotal" placeholder="Subtotal">
</div>
</div>
<div class="form-group">
<label>Tax Rate:  </label>
<div class="input-group">
<input value="" type="number" class="form-control" name="taxRate" id="taxRate" placeholder="Tax Rate">
<div class="input-group-addon">%</div>
</div>
</div>
<div class="form-group">
<label>Tax Amount:  </label>
<div class="input-group">
<div class="input-group-addon currency">$</div>
<input value="" type="number" class="form-control" name="taxAmount" id="taxAmount" placeholder="Tax Amount">
</div>
</div>
<div class="form-group">
<label>Total:  </label>
<div class="input-group">
<div class="input-group-addon currency">$</div>
<input value="" type="number" class="form-control" name="totalAftertax" id="totalAftertax" placeholder="Total">
</div>
</div>
<div class="form-group">
<label>Amount Paid:  </label>
<div class="input-group">
<div class="input-group-addon currency">$</div>
<input value="" type="number" class="form-control" name="amountPaid" id="amountPaid" placeholder="Amount Paid">
</div>
</div>
<div class="form-group">
<label>Amount Due:  </label>
<div class="input-group">
<div class="input-group-addon currency">$</div>
<input value="" type="number" class="form-control" name="amountDue" id="amountDue" placeholder="Amount Due">
</div>
</div>
</span>
</div>
</div>
<div class="clearfix"></div>
</div>
</form>
</div>

Chúng tôi sẽ lưu chi tiết hóa đơn bằng phương thức hóa đơn saveInvoice()

INSERT INTO `invoice_user` (`id`, `email`,
 `password`, `first_name`, `last_name`,
 `mobile`, `address`) 
VALUES
(123456, '[email protected]', '12345', 
'Admin', '', 12345678912, 'New Delhi 110096 India.');

Bước5. Thực hiện cập nhật hóa đơn
Bây giờ trong edit_invoice. php, chúng tôi sẽ triển khai chức năng chỉnh sửa hóa đơn. Chúng tôi sẽ tạo biểu mẫu hóa đơn với các trường bắt buộc để lưu chi tiết chỉnh sửa hóa đơn với các mục và tổng số

INSERT INTO `invoice_user` (`id`, `email`,
 `password`, `first_name`, `last_name`,
 `mobile`, `address`) 
VALUES
(123456, '[email protected]', '12345', 
'Admin', '', 12345678912, 'New Delhi 110096 India.');

Chúng tôi sẽ chỉnh sửa lưu hóa đơn bằng cách sử dụng phương thức hóa đơn updateInvoice()

INSERT INTO `invoice_user` (`id`, `email`,
 `password`, `first_name`, `last_name`,
 `mobile`, `address`) 
VALUES
(123456, '[email protected]', '12345', 
'Admin', '', 12345678912, 'New Delhi 110096 India.');

Bước 6. Thực hiện in hóa đơn
Bây giờ chúng ta sẽ triển khai chức năng tạo PDF hóa đơn trong print_invoice. php để cho phép người dùng in hoặc tải xuống hóa đơn. Chúng tôi sẽ lấy chi tiết hóa đơn từ các bảng cơ sở dữ liệu bằng cách sử dụng phương thức hóa đơn getInvoice() và getInvoiceItems(). Sau đó, chúng tôi sẽ sử dụng thư viện PHP Dompdf để tạo PDF từ HTML

INSERT INTO `invoice_user` (`id`, `email`,
 `password`, `first_name`, `last_name`,
 `mobile`, `address`) 
VALUES
(123456, '[email protected]', '12345', 
'Admin', '', 12345678912, 'New Delhi 110096 India.');

Bước7. Thực hiện Xóa hóa đơn
Chúng tôi sẽ triển khai chức năng xóa hóa đơn trong hóa đơn. js. Chúng tôi sẽ xử lý chức năng trên trình xử lý deleteInvoice và thực hiện hành động yêu cầu Ajax. php để xóa hóa đơn khỏi bảng cơ sở dữ liệu

INSERT INTO `invoice_user` (`id`, `email`,
 `password`, `first_name`, `last_name`,
 `mobile`, `address`) 
VALUES
(123456, '[email protected]', '12345', 
'Admin', '', 12345678912, 'New Delhi 110096 India.');

trong hành động. php, chúng tôi sẽ kiểm tra hành động xóa hóa đơn và id hóa đơn để xóa hóa đơn bằng phương thức hóa đơn deleteInvoice() và trả về phản hồi JSON