Website Development Process

conn.php

<?php

$conn = mysqli_connect(“localhost”,”user”,”12345″,”newdata”);
if (mysqli_connect_errno()) {
echo “failed to connect to mysql” . mysqli_connect_errno();
}

Models.php

<?php

class inventory {

public function meralcoList($hours, $days, $quantity){

require_once ‘../../conn.php’;

if ($days == 0){

$query = mysqli_query($conn, “SELECT id, name, watts, type, ‘$hours’ as hours, ‘0’ as days, ‘$quantity’ as quantity, sum( watts * ‘$hours’) as TotalWatts, 8.32 as phpPerKwH, sum(watts * ‘$hours’ / 1000 * 8.32 * ‘$quantity’) as total
From meralco_inventory

group by name”);
}

else {

$query = mysqli_query($conn, “SELECT id, name, watts, type, ‘$hours’ as hours, ‘$days’ as days, $quantity as quantity, sum( watts * ‘$hours’ *’$days’) as TotalWatts, 8.32 as phpPerKwH, sum(watts * ‘$hours’ * ‘$days’ / 1000 * 8.32 * ‘$quantity’) as total
From meralco_inventory

group by name”);
}

$results = array();

while( $q = mysqli_fetch_array($query)){

$result = new stdClass;
$result->name = $q[‘name’];
$result->watts = $q[‘watts’];
$result->type = $q[‘type’];
$result->hours = $q[‘hours’];
$result->days = $q[‘days’];
$result->quantity = $q[‘quantity’];
$result->TotalWatts = $q[‘TotalWatts’];
$result->phpPerKwH = $q[‘phpPerKwH’];
$result->total = round($q[‘total’],2);

$results[$q[‘type’]][] = $result;

}

return $results;

}
public function meralcoViewProduct($id){

require_once ‘../../conn.php’;

$query = mysqli_query($conn, “SELECT id,name,watts,type
FROM meralco_inventory
WHERE id = ‘$id’
“);

$results = array();

while($q = mysqli_fetch_array($query)){

$result = new stdclass;
$result->id = $q[‘id’];
$result->name = $q[‘name’];
$result->watts = $q[‘watts’];

$result->type = $q[‘type’];

$results[] = $result;
}

return $results;
}
}

?>

 

Controller.php

<?php
require ‘../models/tables.php’;

if ($_POST[‘type’] == ‘meralcoViewList’){

$inventory = new inventory;

$hours = $_POST[‘hours’];
$days = $_POST[‘days’];
$quantity = $_POST[‘quantity’];

echo json_encode($inventory->meralcoList($hours, $days, $quantity));
}

if($_POST[‘type’] == ‘meralcoViewProduct’){

$inventory = new inventory;

$id = $_POST[‘id’];

echo json_encode($inventory->meralcoViewProduct($id));
}

?>

inventoryList.js

(function($) {

var inventorList = function(kitchen,laundry,personal){

// $(“tr[name=list]”).html (function(){

// });

var table = ”;
var table2 = ”;
var table3 = ”;
$.each(kitchen, function(key, object){
// console.log(object);
table += ‘<tr id=”‘+object.id+'”>’;

// table += “<td>”+object.id+”</td>”;
table += “<td>”+object.name+”</td>”;
table += “<td>”+object.watts+”</td>”;
table += “<td>”+object.type+”</td>”;
table += “<td>”+object.hours+”</td>”;
table += “<td>”+object.days+”</td>”;
table += “<td>”+object.quantity+”</td>”;
table += “<td>”+object.TotalWatts+”</td>”;
table += “<td>”+object.phpPerKwH+ ” php</td>”;
table += “<td><center><b>Php “+object.total+”</b></center></td>”;

$(“tbody[name=list]” ).html(table);
});

$.each(laundry, function(key, object2){
// console.log(laundry);

table2 += ‘<tr id=”‘+object2.id+'”>’;

table2 += “<td>”+object2.name+”</td>”;
table2 += “<td>”+object2.watts+”</td>”;
table2 += “<td>”+object2.type+”</td>”;
table2 += “<td>”+object2.hours+”</td>”;
table2 += “<td>”+object2.days+”</td>”;
table2 += “<td>”+object2.quantity+”</td>”;
table2 += “<td>”+object2.TotalWatts+”</td>”;
table2 += “<td>”+object2.phpPerKwH+ ” php</td>”;
table2 += “<td><center><b>Php “+object2.total+”</b></center></td>”;
$(“tbody[name=listLaundry]” ).html(table2);

});

$.each(personal, function(key, object3){
// console.log(laundry);

table3 += ‘<tr id=”‘+object3.id+'”>’;

table3 += “<td>”+object3.name+”</td>”;
table3 += “<td>”+object3.watts+”</td>”;
table3 += “<td>”+object3.type+”</td>”;
table3 += “<td>”+object3.hours+”</td>”;
table3 += “<td>”+object3.days+”</td>”;
table3 += “<td>”+object3.quantity+”</td>”;
table3 += “<td>”+object3.TotalWatts+”</td>”;
table3 += “<td>”+object3.phpPerKwH+ ” php</td>”;
table3 += “<td><center><b>Php “+object3.total+”</b></center></td>”;
$(“tbody[name=listPersonal]” ).html(table3);

});

}

var viewProduct = function(data){
var productview = ”;

$.each(data, function(key, object){

productview = ‘<b> Product Name: ‘+object.name+'</b> <br>’
+ ‘<b> Watts: ‘+object.watts+'</b> <br>’
+ ‘<input type=”text” value=”0″/>’
+ ‘<b> Type: ‘+object.type+'</b> <br>’;

});
$(“h2[name=viewProducts]”).html (productview);
// console.log(productview);
}
// var selected = $(“#method option:selected”).text();

// View product
var loadData2 = function(id){

// console.log(id);
if(id == undefined) { id = ‘1’};

// id = ‘2’;

$.post(‘/backend/controller/tables.php’, {type: ‘meralcoViewProduct’, id: id}, function(data){

data = JSON.parse(data);

// console.log(data);
viewProduct(data);
});

};

// $(“#hoursOptions”).click (function(){

// var Hours = $(this).val();

// loadData();
// })

// var daysOptions = $(“#daysOptions”).click (function(){

// var Days = $(this).val();
// loadData();
// })
// console.log(daysOptions.Days);

// View List

$(‘#hoursPicker, #daysPicker, #quantityPicker’).change (function(){

loadData();

});
var loadData = function(){

var Hours = $(“#hoursPicker”).val();
var Days = $(“#daysPicker”).val();
var Quantity = $(“#quantityPicker”).val();

console.log(Hours);

if(!Quantity){Quantity = 1};
if(!Hours){Hours = 1};

$.post(‘/backend/controller/tables.php’, { type: “meralcoViewList”, hours: Hours, days: Days, quantity: Quantity}, function(data){

data = JSON.parse(data);

var kitchen = data[‘Kitchen Appliances’];
var laundry = data[‘Laundry Appliances’];
var personal = data[‘Personal Items’];
inventorList(kitchen,laundry,personal);
});
};
// var label = quantitytools();

// console.log(label);
$(“#toggleKitchen”).click (function(){

$(“table[name=kitchenAppliances]”).toggle ();
});

$(“#toggleLaundry”).click (function(){

$(“table[name=laundryAppliances]”).toggle ();
});

$(“#togglePersonal”).click (function(){

$(“table[name=personalAppliances]”).toggle ();
});
$(document).on(‘click’,’tr’, function(){

var id = $(this).attr(‘id’);
// console.log(id);
// console.log(id);
// loadData2(id);
// window.open(‘viewproduct.php’, ’45’);

});

$(document).on(‘click’,’button’, function(){

var sum = $(this).attr(‘sum’);
// window.open(‘viewproduct.php’, ’45’);

});

$(‘button[name=triggerButton]’).click(function(){
loadData();
});

loadData();
loadData2();

})(jQuery);

 

index.php

<html>

<head>
<meta charset=”UTF-8″>
<meta name=”description” content=”Free Meralco Calculator”>
<meta name=”keywords” content=”Meralco, Meralco Calculator, How to Compute Meralco, Meralco Bills, Meralco Computation, Compute Meralco, Buhay Manila Calculator”>
<meta name=”author” content=”Buhay Manila”>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<link href=”css/style.css” type=”text/css” rel=”stylesheet”/>
<link href=”components/bootstrap/dist/css/bootstrap.min.css” type=”text/css” rel=”stylesheet”>
<script type=”text/javascript” src=”components/jquery/dist/jquery.min.js”></script>

</head>

<body>

<div class=”row-fluid”>
<div id=”header”>
<div class=”logo”>
<center><a href=”http://buhaymanila.com”><img src=”images/logoBM.png”></a><br>

</center>
</div>
</div>
</div>
<div class=”container forCenter”>

<div class=”row-fluid”>

<!– product list –>

<center><br>
<a href=”http://buhaymanila.com”> <button class=’btn btn-success’ >Go to Homepage</button><a>
<a href=”javascript:history.go(0)”><button class=’btn btn-info’ > Refresh</button></a>
<b><h2> Electric “Meralco” Bill Calculator </h2></b>
<h4> -Adjust Hour/s, Day/s and Quantiy- </h4>

<b> Select Hours </b> <select id=”hoursPicker”>
<option value=’1′>1</option>
<option value=’2′>2</option>
<option value=’3′>3</option>
<option value=’4′>4</option>
<option value=’5′>5</option>
<option value=’6′>6</option>
<option value=’7′>7</option>
<option value=’8′>8</option>
<option value=’9′>9</option>
<option value=’10’>10</option>
<option value=’11’>11</option>
<option value=’12’>12</option>
<option value=’13’>13</option>
<option value=’14’>14</option>
<option value=’15’>15</option>
<option value=’16’>16</option>
<option value=’17’>17</option>
<option value=’18’>18</option>
<option value=’19’>19</option>
<option value=’20’>20</option>
<option value=’21’>21</option>
<option value=’22’>22</option>
<option value=’23’>23</option>
<option value=’24’>24</option>
</select>

<b> Select Days </b> <select id=”daysPicker”>
<option value=’0′>0</option>
<option value=’1′>1</option>
<option value=’2′>2</option>
<option value=’3′>3</option>
<option value=’4′>4</option>
<option value=’5′>5</option>
<option value=’6′>6</option>
<option value=’7′>7</option>
<option value=’8′>8</option>
<option value=’9′>9</option>
<option value=’10’>10</option>
<option value=’11’>11</option>
<option value=’12’>12</option>
<option value=’13’>13</option>
<option value=’14’>14</option>
<option value=’15’>15</option>
<option value=’16’>16</option>
<option value=’17’>17</option>
<option value=’18’>18</option>
<option value=’19’>19</option>
<option value=’20’>20</option>
<option value=’21’>21</option>
<option value=’22’>22</option>
<option value=’23’>23</option>
<option value=’24’>24</option>
<option value=’25’>25</option>
<option value=’26’>26</option>
<option value=’27’>27</option>
<option value=’28’>28</option>
<option value=’29’>29</option>
<option value=’30’>30</option>
<option value=’31’>31</option>
</select>

<b> Select Quantity </b> <select id=”quantityPicker”>
<option value=’1′>1</option>
<option value=’2′>2</option>
<option value=’3′>3</option>
<option value=’4′>4</option>
<option value=’5′>5</option>
<option value=’6′>6</option>
<option value=’7′>7</option>
<option value=’8′>8</option>
<option value=’9′>9</option>
<option value=’10’>10</option>
<option value=’11’>11</option>
<option value=’12’>12</option>
<option value=’13’>13</option>
<option value=’14’>14</option>
<option value=’15’>15</option>
<option value=’16’>16</option>
<option value=’17’>17</option>
<option value=’18’>18</option>
<option value=’19’>19</option>
<option value=’20’>20</option>
<option value=’21’>21</option>
<option value=’22’>22</option>
<option value=’23’>23</option>
<option value=’24’>24</option>
<option value=’25’>25</option>
<option value=’26’>26</option>
<option value=’27’>27</option>
<option value=’28’>28</option>
<option value=’29’>29</option>
<option value=’30’>30</option>
</select>

<br>

<!– <form class=”form-inline”> –>
<!– <input type=”text” name=’hours’ id=”hoursPicker” placeholder=”Number of Hour/s use” required > –>
<!– <input type=”text” name=’days’ id=”daysPicker” placeholder=”Number Day/s use” required >
<input type=”text” name=’quantity’ id=”quantityPicker” placeholder=”Quantity of Items” required > –>
<!– <button type=’button’ name=”triggerButton” id=’loadoutages’ class=’btn btn-info’>Load Data</button>
</form> –>

<br>

<button id=”toggleKitchen” class=”btn-info”> Click to View / Hide Kitchen Appliances </button>
</center>
<table class=”table table-striped” name=”kitchenAppliances”>
<thead>

<!– <th>Product id </th> –>
<th> Appliances / Item </th>
<th> Watts</th>
<th> Type </th>
<th> Hours Used</th>
<th> Days Used </th>
<th> Quantity </th>
<th> TotalWatts </th>
<th> Price Per KiloWatts </th>
<th> Total Estimated Bill </th>
</thead>

<tbody name=”list”>

</tbody>

</table>

<br>

<center><button id=”toggleLaundry” class=”btn-info” > Click to View / Hide Laundry Appliances </button></center>

<table class=”table table-striped” name=”laundryAppliances”>
<thead>

<!– <th>Product id </th> –>
<th> Appliances / Item </th>
<th> Watts</th>
<th> Type </th>
<th> Hours Used</th>
<th> Days Used </th>
<th> Quantity </th>
<th> TotalWatts </th>
<th> Price Per KiloWatts </th>
<th> Total Estimated Bill </th>
</thead>
<br>
<tbody name=”listLaundry”>

</tbody>

</table>

<center><button id=”togglePersonal” class=”btn-info”> Click to View / Hide Personal Items </button></center>
<table class=”table table-striped” name=”personalAppliances”>
<thead>

<!– <th>Product id </th> –>
<th> Appliances / Item </th>
<th> Watts</th>
<th> Type </th>
<th> Hours Used</th>
<th> Days Used </th>
<th> Quantity </th>
<th> TotalWatts </th>
<th> Price Per KiloWatts </th>
<th> Total Estimated Bill </th>
</thead>

<tbody name=”listPersonal”>

</tbody>

</table>
</div>
</div>

<!– View Product –>

<!– <div class =”container”>
<div class=”row-fluid”>

<h2 name=”viewProducts”> Product Information </h2>

</div>
</div> –>

<!– Components –>
<script type=”text/javascript” src=”components/bootstrap/dist/js/bootstrap.js”></script>
<script type=”text/javascript” src=”js/inventoryList.js”></script>
</body>

</html>