ACTIVITY 6.
3 – TRANSACTION PROCESSING
Video Demo Desktop: https://youtu.be/JgWwrD5eEsM Video Demo Mobile: https://youtu.be/oPvWSPJfm8I
Instructions:
1. SETUP CUSTOMER AND TRANSACTION TABLE
A. Add a tblcustomer and tbltransaction tables in api_db_initials database.
CREATE TABLE `tblcustomer` (
`id` int(12) NOT NULL auto_increment,
`Customer_No` varbinary(50) default NULL,
`Last_Name` varchar(50) default NULL,
`First_Name` varchar(50) default NULL,
`Middle_Name` varchar(50) default NULL,
`Gender` varchar(50) default NULL,
`Mobile_No` varchar(50) default NULL,
`Home_Address` varchar(50) default NULL,
PRIMARY KEY (`id`)
);
INSERT INTO
`tblcustomer`(`id`,`Customer_No`,`Last_Name`,`First_Name`,`Middle_Name`,`Gender`,`Mobile_No`,`
Home_Address`) values (1,'001','Dela Cruz','Juan','Dizon','Male','0917222344','Bacolor
Pampanga'),(2,'002','Di Magkamali','Perfecto','Mahusay','Male','0916111234','San Fernando
Pampanga');
CREATE TABLE `tbltransaction` (
`id` int(12) NOT NULL auto_increment,
`Transaction_No` varchar(50) default NULL,
`Customer_No` varchar(50) default NULL,
`Product_ID` int(12) default NULL,
`Quantity` int(12) default NULL,
`Total_Amount` double(8,2) default NULL,
PRIMARY KEY (`id`)
);
2. SETUP CUSTOMER METHODS AND OBJECTS FOR THE READONE API
A. Right Click objects in api-initials and add a new file customer.php and type following codes:
<?php
class Customer{
// database connection and table name
private $conn;
// object properties
public $Customer_No;
public $Last_Name;
public $First_Name;
public $Middle_Name;
// constructor with $db as database connection
public function __construct($db){
$this->conn = $db;
}
function readOne(){
// query to read single record
$query = "SELECT
*
FROM
tblcustomer
WHERE
Customer_No = ?";
// prepare query statement
$stmt = $this->conn->prepare( $query );
// bind id of product to be updated
$stmt->bindParam(1, $this->Customer_No);
// execute query
$stmt->execute();
// get retrieved row
$row = $stmt->fetch(PDO::FETCH_ASSOC);
// set values to object properties
$this->Customer_No = $row['Customer_No'];
$this->Last_Name = $row['Last_Name'];
$this->First_Name = $row['First_Name'];
$this->Middle_Name = $row['Middle_Name'];
}
}
?>
3. SETUP THE READ-ONE-CUST API
A. Go module5-files directory >> Right click api-initials folder and create a new folder customers
B. Right Click customers folder in api-initials directory >> Add a new file read-one-cust.php and
type following codes:
<?php
// required headers
header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Headers: access");
header("Access-Control-Allow-Methods: GET");
header("Access-Control-Allow-Credentials: true");
header('Content-Type: application/json');
// include database and object files
include_once '../config/database.php';
include_once '../objects/customer.php';
// get database connection
$database = new Database();
$db = $database->getConnection();
// prepare product object
$customer = new Customer($db);
// set ID property of record to read
$customer->Customer_No = isset($_GET['id']) ? $_GET['id'] : die();
// read the details of product to be edited
$customer->readOne();
if($customer->Customer_No!=null){
// create array
$customer_arr = array(
"Customer_No" => $customer->Customer_No,
"Last_Name" => $customer->Last_Name,
"First_Name" => $customer->First_Name,
"Middle_Name" => $customer->Middle_Name
);
// set response code - 200 OK
http_response_code(200);
// make it json format
echo json_encode($customer_arr);
}
else{
// set response code - 404 Not found
http_response_code(404);
// tell the user product does not exist
echo json_encode(array("message" => "Customer does not exist."));
}
?>
4. SETUP TRANSACTIONS METHODS AND OBJECTS FOR THE TRANSACTIONS API
B. Right Click objects in api-initials and add a new file transaction.php and type following codes:
<?php
class Transaction{
// database connection and table name
private $conn;
// object properties
public $Transaction_ID;
public $Transaction_No;
public $Customer_No;
public $Last_Name;
public $First_Name;
public $Middle_Name;
public $Product_ID;
public $Product_Name;
public $Product_Price;
public $Quantity;
public $Total_Amount;
// constructor with $db as database connection
public function __construct($db){
$this->conn = $db;
}
// create product
function create(){
// query to insert record
$query = "INSERT INTO
tbltransaction
SET
Transaction_No=:transNo,
Customer_No=:custNo,
Product_ID=:prodID,
Quantity=:qty,
Total_Amount=:totAmount";
// prepare query
$stmt = $this->conn->prepare($query);
// sanitize
$this->Transaction_No=htmlspecialchars(strip_tags($this->Transaction_No));
$this->Customer_No=htmlspecialchars(strip_tags($this->Customer_No));
$this->Product_ID=htmlspecialchars(strip_tags($this->Product_ID));
$this->Quantity=htmlspecialchars(strip_tags($this->Quantity));
$this->Total_Amount=htmlspecialchars(strip_tags($this->Total_Amount));
// bind values
$stmt->bindParam(":transNo", $this->Transaction_No);
$stmt->bindParam(":custNo", $this->Customer_No);
$stmt->bindParam(":prodID", $this->Product_ID);
$stmt->bindParam(":qty", $this->Quantity);
$stmt->bindParam(":totAmount", $this->Total_Amount);
// execute query
if($stmt->execute()){
return true;
}
return false;
}
//read product list
function readall(){
// select all query
$query = "SELECT
t.id as Transaction_ID, Transaction_No, c.Customer_No, Last_Name, First_Name, Middle_Name,
p.name as Product_Name, p.price as Product_Price,Quantity,Total_Amount
FROM
tbltransaction t
LEFT JOIN
tblcustomer c
ON t.Customer_No = c.Customer_No
LEFT JOIN
products p
ON t.Product_ID = p.id";
// prepare query statement
$stmt = $this->conn->prepare($query);
// execute query
$stmt->execute();
return $stmt;
}
// read products with pagination
public function readPaging($from_record_num, $records_per_page){
// select query
$query = "SELECT
t.id as Transaction_ID, Transaction_No, c.Customer_No, Last_Name, First_Name,
Middle_Name,
p.name as Product_Name, p.price as Product_Price,Quantity,Total_Amount
FROM
tbltransaction t
LEFT JOIN
tblcustomer c
ON t.Customer_No = c.Customer_No
LEFT JOIN
products p
ON t.Product_ID = p.id
ORDER BY t.id ASC
LIMIT ?, ?";
// prepare query statement
$stmt = $this->conn->prepare( $query );
// bind variable values
$stmt->bindParam(1, $from_record_num, PDO::PARAM_INT);
$stmt->bindParam(2, $records_per_page, PDO::PARAM_INT);
// execute query
$stmt->execute();
// return values from database
return $stmt;
}
// used for paging products
public function count(){
$query = "SELECT COUNT(*) as total_rows FROM tbltransaction";
$stmt = $this->conn->prepare( $query );
$stmt->execute();
$row = $stmt->fetch(PDO::FETCH_ASSOC);
return $row['total_rows'];
}
// search products
function search($keywords){
// select all query
$query = "SELECT
t.id as Transaction_ID, Transaction_No, c.Customer_No, Last_Name, First_Name,
Middle_Name,
p.name as Product_Name, p.price as Product_Price,Quantity,Total_Amount
FROM
tbltransaction t
LEFT JOIN
tblcustomer c
ON t.Customer_No = c.Customer_No
LEFT JOIN
products p
ON t.Product_ID = p.id
WHERE
Last_Name LIKE ? OR p.name LIKE ? OR Transaction_No LIKE ?
ORDER BY
t.id DESC";
// prepare query statement
$stmt = $this->conn->prepare($query);
// sanitize
$keywords=htmlspecialchars(strip_tags($keywords));
$keywords = "%{$keywords}%";
// bind
$stmt->bindParam(1, $keywords);
$stmt->bindParam(2, $keywords);
$stmt->bindParam(3, $keywords);
// execute query
$stmt->execute();
return $stmt;
}
}
?>
5. SETUP THE CREATE-REC-TRANS API
A. Go module5-files directory >> Right click api-initials folder and create a new folder
transactions
B. Right Click transactions folder in api-initials directory >> Add a new file create-rec-trans.php
and type following codes:
<?php
// required headers
header("Access-Control-Allow-Origin: *");
header("Content-Type: application/json; charset=UTF-8");
header("Access-Control-Allow-Methods: POST");
header("Access-Control-Max-Age: 3600");
header("Access-Control-Allow-Headers: Content-Type, Access-Control-Allow-Headers,
Authorization, X-Requested-With");
// get database connection
include_once '../config/database.php';
// instantiate product object
include_once '../objects/transaction.php';
$database = new Database();
$db = $database->getConnection();
$transaction = new Transaction($db);
// get posted data
$data = json_decode(file_get_contents("php://input"));
// make sure data is not empty
if(
!empty($data->Transaction_No) &&
!empty($data->Customer_No) &&
!empty($data->Product_ID) &&
!empty($data->Quantity) &&
!empty($data->Total_Amount)
){
// set product property values
$transaction->Transaction_No = $data->Transaction_No;
$transaction->Customer_No = $data->Customer_No;
$transaction->Product_ID = $data->Product_ID;
$transaction->Quantity = $data->Quantity;
$transaction->Total_Amount = $data->Total_Amount;
// create the product
if($transaction->create()){
// set response code - 201 created
http_response_code(201);
// tell the user
echo json_encode(array("message" => "Transaction was created."));
}
// if unable to create the product, tell the user
else{
// set response code - 503 service unavailable
http_response_code(503);
// tell the user
echo json_encode(array("message" => "Unable to create Transaction."));
}
}
// tell the user data is incomplete
else{
// set response code - 400 bad request
http_response_code(400);
// tell the user
echo json_encode(array("message" => "Unable to create Transaction. Data is incomplete."));
}
?>
6. SETUP THE READ-ALL-TRANS API
A. Right Click transactions folder in api-initials directory >> Add a new file read-all-trans.php
and type following codes:
<?php
// required headers
header("Access-Control-Allow-Origin: *");
header("Content-Type: application/json; charset=UTF-8");
// include database and object files
include_once '../config/database.php';
include_once '../objects/transaction.php';
// instantiate database and product object
$database = new Database();
$db = $database->getConnection();
// initialize object
$transaction = new Transaction($db);
// query products
$stmt = $transaction->readall();
$num = $stmt->rowCount();
// check if more than 0 record found
if($num>0){
// products array
$transaction_arr=array();
$transaction_arr["records"]=array();
// retrieve our table contents
// fetch() is faster than fetchAll()
// http://stackoverflow.com/questions/2770630/pdofetchall-vs-pdofetch-in-a-loop
while ($row = $stmt->fetch(PDO::FETCH_ASSOC)){
// extract row
// this will make $row['name'] to
// just $name only
extract($row);
$transaction_item=array(
"Transaction_ID" => $Transaction_ID,
"Transaction_No" => $Transaction_No,
"Customer_No" => $Customer_No,
"Last_Name" => $Last_Name,
"First_Name" => $First_Name,
"Middle_Name" => $Middle_Name,
"Product_Name" => $Product_Name,
"Product_Price" => $Product_Price,
"Quantity" => $Quantity,
"Total_Amount" => $Total_Amount
);
array_push($transaction_arr["records"], $transaction_item);
}
// set response code - 200 OK
http_response_code(200);
// show products data in json format
echo json_encode($transaction_arr);
}
else{
// set response code - 404 Not found
http_response_code(404);
// tell the user no products found
echo json_encode(
array("message" => "No Transaction found.")
);
}
?>
7. SETUP THE READ-PAGING-TRANS API
A. Right Click transactions folder in api-initials directory >> Add a new file read-paging-
trans.php and type following codes:
<?php
// required headers
header("Access-Control-Allow-Origin: *");
header("Content-Type: application/json; charset=UTF-8");
// include database and object files
include_once '../config/core.php';
include_once '../shared/utilities.php';
include_once '../config/database.php';
include_once '../objects/transaction.php';
// utilities
$utilities = new Utilities();
// instantiate database and transaction object
$database = new Database();
$db = $database->getConnection();
// initialize object
$transaction = new Transaction($db);
// query transaction
$stmt = $transaction->readPaging($from_record_num, $records_per_page);
$num = $stmt->rowCount();
// check if more than 0 record found
if($num>0){
// transaction array
$transaction_arr=array();
$transaction_arr["records"]=array();
$transaction_arr["paging"]=array();
// retrieve our table contents
// fetch() is faster than fetchAll()
// http://stackoverflow.com/questions/2770630/pdofetchall-vs-pdofetch-in-a-loop
while ($row = $stmt->fetch(PDO::FETCH_ASSOC)){
// extract row
// this will make $row['name'] to
// just $name only
extract($row);
$transaction_item=array(
"Transaction_ID" => $Transaction_ID,
"Transaction_No" => $Transaction_No,
"Customer_No" => $Customer_No,
"Last_Name" => $Last_Name,
"First_Name" => $First_Name,
"Middle_Name" => $Middle_Name,
"Product_Name" => $Product_Name,
"Product_Price" => $Product_Price,
"Quantity" => $Quantity,
"Total_Amount" => $Total_Amount
);
array_push($transaction_arr["records"], $transaction_item);
}
// include paging
$total_rows=$transaction->count();
$page_url="{$home_url}transactions/read-paging-trans.php?";
$paging=$utilities->getPaging($page, $total_rows, $records_per_page, $page_url);
$transaction_arr["paging"]=$paging;
// set response code - 200 OK
http_response_code(200);
// make it json format
echo json_encode($transaction_arr);
}
else{
// set response code - 404 Not found
http_response_code(404);
// tell the user transaction does not exist
echo json_encode(
array("message" => "No Transactions found.")
);
}
?>
8. SETUP THE SEARCH-REC-TRANS API
A. Right Click transactions folder in api-initials directory >> Add a new file search-rec-trans.php
and type following codes:
<?php
// required headers
header("Access-Control-Allow-Origin: *");
header("Content-Type: application/json; charset=UTF-8");
// include database and object files
include_once '../config/core.php';
include_once '../config/database.php';
include_once '../objects/transaction.php';
// instantiate database and transaction object
$database = new Database();
$db = $database->getConnection();
// initialize object
$transaction = new Transaction($db);
// get keywords
$keywords=isset($_GET["s"]) ? $_GET["s"] : "";
// query products
$stmt = $transaction->search($keywords);
$num = $stmt->rowCount();
// check if more than 0 record found
if($num>0){
// transaction array
$transaction_arr=array();
$transaction_arr["records"]=array();
// retrieve our table contents
// fetch() is faster than fetchAll()
// http://stackoverflow.com/questions/2770630/pdofetchall-vs-pdofetch-in-a-loop
while ($row = $stmt->fetch(PDO::FETCH_ASSOC)){
// extract row
// this will make $row['name'] to
// just $name only
extract($row);
$transaction_item=array(
"Transaction_ID" => $Transaction_ID,
"Transaction_No" => $Transaction_No,
"Customer_No" => $Customer_No,
"Last_Name" => $Last_Name,
"First_Name" => $First_Name,
"Middle_Name" => $Middle_Name,
"Product_Name" => $Product_Name,
"Product_Price" => $Product_Price,
"Quantity" => $Quantity,
"Total_Amount" => $Total_Amount
);
array_push($transaction_arr["records"], $transaction_item);
}
// set response code - 200 OK
http_response_code(200);
// show products data
echo json_encode($transaction_arr);
}
else{
// set response code - 404 Not found
http_response_code(404);
// tell the user no products found
echo json_encode(
array("message" => "No Transactions found.")
);
}
?>
9. ADDING THE DROP DOWN MENU AND TRANSACTIONS JAVASCRIPT FILES IN HOME.HTML
A. Extend api-initials working directory >> Double Click home.html and add the following codes
after the drop down codes for Categories:
<!-- Drop Down Menu For Transactions -->
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-
expanded="false">Transactions<span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#" id='read-cat' class='read-transaction-button'>Transactions
List</a></li>
<li><a href="#" id='create-cat' class='create-transaction-button'>Add New
Transaction</a></li>
</ul>
</li>
B. Add the following codes before the </body> tag:
<!-- transactions scripts -->
<script src="app/transactions/create-trans.js"></script>
<script src="app/transactions/read-all-trans.js"></script>
<script src="app/transactions/search-trans.js"></script>
<script src="app/transactions/transactions.js"></script>
10. SETUP THE AJAX FOR TRANSACTIONS
A. Right click app folder in api-initials working directory and create a new folder transactions
B. Right Click transactions folder in app directory >> Add a new file transactions.js and type
following codes:
// transaction list html
function readTransactionTemplate(data, keywords){
var read_transaction_html=`
<!-- search transactions form -->
<form id='search-transaction-form' action='#' method='post'>
<div class='input-group pull-left w-30-pct'>
<input type='text' value='` + keywords + `' name='keywords' class='form-control
transaction-search-keywords' placeholder='Search transactions...' />
<span class='input-group-btn'>
<button type='submit' class='btn btn-default' type='button'>
<span class='glyphicon glyphicon-search'></span>
</button>
</span>
</div>
</form>
<!-- when clicked, it will load the create transaction form -->
<div id='create-transaction' class='btn btn-primary pull-right m-b-15px create-transaction-
button'>
<span class='glyphicon glyphicon-plus'></span> Create Transaction
</div>
<!-- start table -->
<table class='table table-bordered table-hover'>
<!-- creating our table heading -->
<tr>
<th class='w-11-pct'>Transaction No</th>
<th class='w-10-pct'>Customer No</th>
<th class='w-20-pct'>Customer Name</th>
<th class='w-8-pct'>Product Name</th>
<th class='w-5-pct'>Quantity</th>
<th class='w-5-pct'>Total Amount</th>
<th class='w-25-pct text-align-center'>Action</th>
</tr>`;
// loop through returned list of data
$.each(data.records, function(key, val) {
// creating new table row per record
read_transaction_html+=`<tr>
<td>` + val.Transaction_No + `</td>
<td>` + val.Customer_No + `</td>
<td>` + val.Last_Name + ", " + val.First_Name + " " + val.Middle_Name + `</td>
<td>` + val.Product_Name + `</td>
<td>` + val.Quantity + `</td>
<td>` + val.Total_Amount + `</td>
<!-- 'action' buttons -->
<td style='text-align:center'>
<!-- read transaction button -->
<button class='btn btn-primary m-r-10px read-one-transaction-button' data-id='` +
val.Transaction_ID + `'>
<span class='glyphicon glyphicon-eye-open'></span> Read
</button>
<!-- edit button -->
<button class='btn btn-info m-r-10px update-transaction-button' data-id='` +
val.Transaction_ID + `'>
<span class='glyphicon glyphicon-edit'></span> Edit
</button>
<!-- delete button -->
<button class='btn btn-danger delete-transaction-button' data-id='` + val.Transaction_ID
+ `'>
<span class='glyphicon glyphicon-remove'></span> Delete
</button>
</td>
</tr>`;
});
// end table
read_transaction_html+=`</table>`
// pagination
if(data.paging){
read_transaction_html+="<ul class='pagination pull-left margin-zero padding-bottom-
2em'>";
// first page
if(data.paging.first!=""){
read_transaction_html+="<li><a data-page-transaction='" + data.paging.first + "'>First
Page</a></li>";
}
// loop through pages
$.each(data.paging.pages, function(key, val){
var active_page=val.current_page=="yes" ? "class='active'" : "";
read_transaction_html+="<li " + active_page + "><a data-page-transaction='" + val.url +
"'>" + val.page + "</a></li>";
});
// last page
if(data.paging.last!=""){
read_transaction_html+="<li><a data-page-transaction='" + data.paging.last + "'>Last
Page</a></li>";
}
read_transaction_html+="</ul>";
}
// inject to 'page-content' of our app
$("#page-content").html(read_transaction_html);
}
11. SETUP THE AJAX FOR READ-ALL-TRANS
A. Right Click transactions folder in app directory >> Add a new file read-all-trans.js and type
following codes:
$(document).ready(function(){
// when a 'read transactions' button was clicked
$(document).on('click', '.read-transaction-button', function(){
showTransactionFirstPage();
});
// when a 'page' button was clicked
$(document).on('click', '.pagination li', function(){
// get json url
var json_url=$(this).find('a').attr('data-page-transaction');
// show list of transactions
showTransaction(json_url);
});
});
function showTransactionFirstPage(){
var json_url= getUrl() + "transactions/read-paging-trans.php";
showTransaction(json_url);
}
// function to show list of transactions
function showTransaction(json_url){
// get list of transactions from the API
$.getJSON(json_url, function(data){
// html for listing transactions
readTransactionTemplate(data, "");
// chage page title
changePageTitle("Read Transactions");
});
}
12. SETUP THE AJAX FOR SEARCH-TRANS
A. Right Click transactions folder in app directory >> Add a new file search-trans.js and type
following codes:
$(document).ready(function(){
// when a 'search transactions' button was clicked
$(document).on('submit', '#search-transaction-form', function(){
// get search keywords
var keywords = $(this).find(":input[name='keywords']").val();
// get data from the api based on search keywords
$.getJSON(getUrl() + "transactions/search-rec-trans.php?s=" + keywords, function(data){
// template in transactions.js
readTransactionTemplate(data, keywords);
// chage page title
changePageTitle("Search transactions: " + keywords);
});
// prevent whole page reload
return false;
});
});
13. SETUP THE AJAX FOR CREATE-TRANS
A. Right Click transactions folder in app directory >> Add a new file create-trans.js and type
following codes:
$(document).ready(function(){
// show html form when 'create product' button was clicked
$(document).on('click', '.create-transaction-button', function(){
//Randomize Number for Transantion No
var strYear = new Date().getFullYear();
var intRand1 = parseInt(Math.random() * (9 - 0) + 1);
var intRand2 = parseInt(Math.random() * (9 - 0) + 1);
var intRand3 = parseInt(Math.random() * (9 - 0) + 1);
var intRand4 = parseInt(Math.random() * (9 - 0) + 1);
var transNo = "TRS-" + strYear + "-" + intRand1 + intRand2 + intRand3 + intRand4;
// load list of product names
$.getJSON(getUrl() + "products/read-all-prod.php", function(data){
// build categories option html
// loop through returned list of data
var products_options_html=`<select id="Product_ID" name='Product_ID' class='form-
control search-product-button'>`;
$.each(data.records, function(key, val){
products_options_html+=`<option value='` + val.id + `'>` + val.name + `</option>`;
});
products_options_html+=`</select>`;
// we have our html form here where transaction information will be entered
// we used the 'required' html5 property to prevent empty fields
var create_transaction_html=`
<!-- 'read transactions' button to show list of transactions -->
<div id='read-transactions' class='btn btn-primary pull-right m-b-15px read-transaction-
button'>
<span class='glyphicon glyphicon-list'></span> Read transactions
</div>
<!-- 'create transaction' html form -->
<form id='create-transaction-form' action='#' method='post' border='0'>
<table class='table table-hover table-responsive table-bordered'>
<!-- Transaction No field -->
<tr>
<td class='w-25-pct'>Transaction No:</td>
<td class='w-75-pct'><input type='text' id="Transaction_No"
name='Transaction_No' value="` + transNo +`" class='form-control' required readonly/></td>
</tr>
<!-- Customer No field -->
<tr>
<td>Customer No:</td>
<td><input type='text' id="Customer_No" name='Customer_No' class='form-control'
required /> </td>
<td>
<div id='search-customer' class='btn btn-primary pull-right m-b-15px search-
customer-button'>
<span class='glyphicon glyphicon-search'></span>
</div>
</td>
</tr>
<!-- Last Name field -->
<tr>
<td>Last Name:</td>
<td><input type='text' id="Last_Name" name='Last_Name' class='form-control'
required readonly/></td>
</tr>
<!-- First Name field -->
<tr>
<td>First Name</td>
<td><input type='text' id="First_Name" name='First_Name' class='form-control'
required readonly/></td>
</tr>
<!-- Middle Name field -->
<tr>
<td>Middle Name</td>
<td><input type='text' id="Middle_Name" name='Middle_Name' class='form-control'
required readonly/></td>
</tr>
<!-- Products 'select' field -->
<tr>
<td>Category</td>
<td>` + products_options_html + `</td>
</tr>
<!-- Unit Price field -->
<tr>
<td>Unit Price:</td>
<td><input type='number' id="Price" min='1' name='Price' class='form-control'
required readonly/></td>
</tr>
<!-- Quantity field -->
<tr>
<td>Quantity:</td>
<td><input type='number' id="Quantity" min='1' name='Quantity' class='form-
control' required /></td>
</tr>
<!-- Total Amount field -->
<tr>
<td>Total Amount:</td>
<td><input type='number' id="Total_Amount" min='1' name='Total_Amount'
class='form-control' required readonly/></td>
</tr>
<tr>
<td>
</td>
<td>
<!-- button to compute -->
<div id='compute-transactions' class='btn btn-primary compute-transaction-
button'>
<span class='glyphicon glyphicon-list'></span> Compute Amount
</div>
<!-- button to submit form -->
<button type='submit' class='btn btn-primary'>
<span class='glyphicon glyphicon-plus'></span> Create Transaction
</button>
</td>
</tr>
</table>
</form>`;
// inject html to 'page-content' of our app
$("#page-content").html(create_transaction_html);
// chage page title
changePageTitle("Create Transaction");
});
});
// will run if create transaction form was submitted
$(document).on('submit', '#create-transaction-form', function(){
// get form data
var form_data=JSON.stringify($(this).serializeObject());
// submit form data to api
$.ajax({
url:getUrl() + "transactions/create-rec-trans.php",
type : "POST",
contentType : 'application/json',
data : form_data,
success : function(result) {
// transaction was created, go back to transactions list
showTransactionFirstPage();
},
error: function(xhr, resp, text) {
// show error to console
console.log(xhr, resp, text);
}
});
return false;
});
$(document).on('click', '.search-customer-button', function(){
var id = document.getElementById("Customer_No").value;
// read one record based on given product id
$.getJSON(getUrl() + "customers/read-one-cust.php?id=" + id, function(data){
// values will be used to fill out our form
var strLName = data.Last_Name;
var strFName = data.First_Name;
var strMName = data.Middle_Name;
document.getElementById("Last_Name").value=strLName;
document.getElementById("First_Name").value=strFName;
document.getElementById("Middle_Name").value=strMName;
});
});
$(document).on('change', '.search-product-button', function(){
var id = document.getElementById("Product_ID").value;
// read one record based on given product id
$.getJSON(getUrl() + "products/read-one-prod.php?id=" + id, function(data){
// values will be used to fill out our form
var strPrice= data.price;
document.getElementById("Price").value=strPrice;
});
});
$(document).on('click', '.compute-transaction-button', function(){
var dblPrice = document.getElementById("Price").value;
var intQty = document.getElementById("Quantity").value;
var dblAmount = dblPrice * intQty;
document.getElementById("Total_Amount").value=dblAmount;
});
});
14. IMPLEMENTING DATE AND TIME PICKER
A. Go to app folder of api-initials workspace >> Open app.js >> Provide the code after the closing
curly brackets and semicolon };
//GET SYSTEM DATE
function getAldo(){
var date = new Date();
var day = ("0" + date.getDate()).slice(-2);
var month = ("0" + (date.getMonth() + 1)).slice(-2);
var strDate = date.getFullYear() + "-" + (month) + "-" + (day);
return strDate;
}
//GET SYSTEM TIME
function getOras(){
var date = new Date();
var hours = date.getHours();
hours = ("0" + hours).slice(-2);
var minutes = date.getMinutes();
minutes = ("0" + minutes).slice(-2);
var seconds = date.getSeconds();
seconds = ("0" + seconds).slice(-2);
var strTime = hours + ':' + minutes + ':' + seconds;
return strTime;
}
B. Extend transactions folder inside app directory of api-initials workspace >> Open create-
trans.js >> Provide the code after the closing </tr> tag of <!-- Transaction No field -->:
<!-- Date field -->
<tr>
<td>Transaction Date:</td>
<td><input type='date' id="Transaction_Date" name='Transaction_Date'
class='form-control' value="` + getAldo() + `" required/></td>
</tr>
<!-- Time field -->
<tr>
<td>Transaction Time:</td>
<td><input type='time' id="Transaction_Time" name='Transaction_Time'
class='form-control' required/></td>
</tr>
15. TEST THE WEB PAGE AND PROCESS FIVE (5) TRANSACTIONS
Notes:
Use the worksheet provided in assignment section of the course in the LMS and provide a
screenshot of the codes and output.
Using any screen recording software (Open Broadcaster Software, Bandicam or Filmora),
record the machine problem output demonstration.
Submit the activity in the assignment section of the course in the LMS:
o YouTube link or URL of the recorded output demonstration.
Five (5) points deductions will be given to each submission protocol violations:
o Not including initials in variable names, object names, class names, method
names and project names.
o Not using activity and machine problem worksheets.
o Incorrect Filename Format: ACTIVITY_TITLE_INITIALS.PDF
o Incomplete Source codes and output screenshots in PDF Format.
o Broken Links or no video demonstration outputs.
Any similarities on the source codes or any sign of “Copy and Paste” codes will be
marked as CHEATING and will be graded ZERO (0).
