Invoice System using jQuery PHP MySQL and Bootstrap source code

In our previous tutorial you have learned how develop Inventory System with Ajax, PHP & MySQL. In this tutorial we will explain how to develop your own invoice system with PHP & MySQL.

Invoice or Billing Management Systems are very popular as now most of transactions are done online. Now every sellers and buyers needs invoice system to handle billing online. So if you’re looking for invoice or billing system using PHP and MySQL, then you’re here at right place. In this tutorial you will learn how to develop invoice and billing system using PHP and MySQL.

Also, read:

Build Content Management System with PHP & MySQL
Build Live Chat System with Ajax, PHP & MySQL
Build Comment System with Ajax, PHP & MySQL

We will cover this tutorial in easy steps with live demo to develop complete invoice system to create and edit invoices with invoice print to convert into PDF format. We will also allow to download complete source code of live demo.

As we will cover this tutorial with live example to build invoice system with PHP & MySQL, so the major files for this example is following.

index.php
invoice_list.php
create_invoice.php
edit_invoice.php
action.php
invoice.js
Invoice.php

Step1: Create MySQL Database Tables
First we will create table invoice_user to store user login details to allow logged in user to manage invoices.

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;

Here is the sample user dump data:

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

We will create table invoice_order to store invoice details.

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;

Here is sample dump data for invoice order:

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

We will also create table invoice_order_item to store invoice items details.

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;

Here is sample dump data for invoice order items:

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

Step2: Implement User Login
First we will create user login functionality to provide invoice manage access to logged in users. We will create login form in index.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>

We will handle login functionality on login form submit using method 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!";
}
}
?>

Step3: Display Invoice List
Now we will display user’s invoices list in invoice_list.php file. We will call invoice method getInvoiceList() to get list logged in user’s invoices list.

<div class="container">
<h2 class="title">PHP Invoice System</h2>
<?php include('menu.php');?>
<table id="data-table" class="table table-condensed table-striped">
<thead>
<tr>
<th>Invoice No.</th>
<th>Create Date</th>
<th>Customer Name</th>
<th>Invoice Total</th>
<th>Print</th>
<th>Edit</th>
<th>Delete</th>
</tr>
</thead>
<?php
$invoiceList = $invoice->getInvoiceList();
foreach($invoiceList as $invoiceDetails){
$invoiceDate = date("d/M/Y, H:i:s", strtotime($invoiceDetails["order_date"]));
echo '
<tr>
<td>'.$invoiceDetails["order_id"].'</td>
<td>'.$invoiceDate.'</td>
<td>'.$invoiceDetails["order_receiver_name"].'</td>
<td>'.$invoiceDetails["order_total_after_tax"].'</td>
<td><a href="print_invoice.php?invoice_id='.$invoiceDetails["order_id"].'" title="Print Invoice"><span class="glyphicon glyphicon-print"></span></a></td>
<td><a href="edit_invoice.php?update_id='.$invoiceDetails["order_id"].'"  title="Edit Invoice"><span class="glyphicon glyphicon-edit"></span></a></td>
<td><a href="#" id="'.$invoiceDetails["order_id"].'" class="deleteInvoice"  title="Delete Invoice"><span class="glyphicon glyphicon-remove"></span></a></td>
</tr>
';
}
?>
</table>
</div>

Step4: Implement Invoice Create
Now in create_invoice.php, we will implement functionality to create invoice. We will create invoice form with required fields to save invoice details with items and totals.

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

We will save invoice details using invoice method 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.');

Step5: Implement Invoice Update
Now in edit_invoice.php, we will implement functionality to edit invoice. We will create invoice form with required fields to save invoice edit details with items and totals.

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

We will edit save invoice using invoice method 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.');

Step6: Implement Invoice Print
Now we will implement functionality to create invoice PDF in print_invoice.php file to allow user to print or download invoice. We will get invoice details from database tables using invoice method getInvoice() and getInvoiceItems(). Then we will use PHP library Dompdf to create PDF from 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.');

Step7: Implement Invoice Delete
We will implement invoice delete functionality in invoice.js. We will handle functionality on deleteInvoice handler and make Ajax request to action.php to delete invoice from database table.

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

In action.php, we will check for delete invoice action and invoice id to delete invoice using invoice method deleteInvoice() and return JSON response.

Invoice System using jQuery PHP MySQL and Bootstrap source code

Pos Terkait

Periklanan

BERITA TERKINI

Toplist Popular

Periklanan

Terpopuler

Periklanan

Tentang Kami

Legal

Dukungan

Social