In this post, I will give foundation development tutorial by using HTML and Javascript.
Open VS 2013 and create a new Windows Store App using JavaScript. Name it as ‘Store_Working_with_IndexDB’.
Open Default.html and add the below HTML in it:
<body>
<p>Content goes here</p>
<table>
<thead>
<tr> <td >Manage Medicine Orders</td> </tr>
</thead>
<tr> <td>Order Id</td> <td>
<input id="txtordno" required="required" />
</td>
</tr>
<tr> <td>Pharmacist Name</td> <td>
<input autocomplete="on" id="txtpharmacist" required="required"/>
</td>
</tr>
<tr> <td>Order Date </td>
<td> <div id="datePicker" data-win-control="WinJS.UI.DatePicker" data-win-options="{current: '01/01/2013',maxYear:2040,minYear:2012}"></div> </td>
</tr>
<tr> <td>Medicine Ordered </td>
<td> <input id="txtordermedicine" required="required"/> </td>
</tr>
<tr> <td>Medicine Quantity </td>
<td> <input id="txtqty" required="required" /> </td>
</tr>
<tr> <td>Unit Price </td>
<td> <input id="txtunitprice" required="required"/> </td>
</tr>
<tfoot>
</tfoot>
</table>
<!--To display Table Dynamically-->
<div id="dvData"></div>
</body>
Add a script tag in the default.html and add the following script in it:
<script>
var selectedDate = "";
var orderDB;
var dbCreated = false;
var orderToEdit = {};
var transaction;
var tbl;
WinJS.UI.processAll().done(function () {
document.getElementById('btnnew').addEventListener("click", neworder, false);
document.getElementById('btnsave').addEventListener("click", saveOrder,
false);
document.getElementById('btnedit').addEventListener('click', editOrder,
false);
document.getElementById('btndelete').addEventListener('click', deleteOrder,
false);
document.getElementById('btnloadrecord').addEventListener('click',
loadOrderById, false);
datePickerControl = document.getElementById('datePicker').winControl;
datePickerControl.current = new Date(); //The Current Date
selectedDate = datePickerControl.current; //The Default Date
datePickerControl.addEventListener("change", dateChanged, false);
});
//The method to Get the Selected Date from the Date Picker
function dateChanged(evt) {
selectedDate = datePickerControl.current;
if (selectedDate < new Date())
{
var Msg = new Windows.UI.Popups.MessageDialog("Date Cannot be less than Todays Date");
Msg.showAsync();
return;
}
}
//Ends Here
//Method to Create Database and Table
function createdatabase()
{
//code to create DB
}
//Ends Here
//The Method to Create New Order
function neworder()
{
//Code to clear all Textboxes
}
//Ends Here
//The method to Save Record
function saveOrder()
{
}
//Ends Here
//The method to Edit Record
function editOrder()
{
//Code to Edit Record
}
//Ends Here
//The Method to Delete Record
function deleteOrder()
{
//Code to delete record
}
//Ends Here
//The Metod to Read all Records
function loadOrder()
{
//Code to load all Records here
}
//Ends Here
//The method to Load the Record by Id
function loadOrderById(id)
{
//Method to Load Record for a specific Id
}
//Ends Here
//The Initial method to be executed
window.addEventListener("DOMContentLoaded", createdatabase, false);
</script>