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