In this task we will create a simple database to store a customers collection of data. We will be able to add new customers, delete customers and search for specific customers. The web app will be able to display the customers in a neat list.
The customers collection will have the following properties:
First
Last
StreetAddress
Suburb
Postcode
State
Mobile
Email Address
The application will be made up of the following files:
Index.html (home page)
db.js
AddCustomers.html
addCustomer.js
Getting Started
I have created a templated website and JS file on SEQTA.
Download the zip folder below, unzip and save to your OneDrive.
Open files in Visual Studio
Challenge - Add new customers to the database via a form input in addCustomers.js
Create a function to capture each of the inputs from the user when the button is clicked
Pass these values as a document to the collection called customers
Here is an example of pushing data to a collection:
db.collection('users').add({
id: 1,
name: 'Bill',
age: 47
})
Extension: Can you validate the data to make sure its all there?
Make the page redirect to index.html if all successful
Challenge 1: Display all the customer details in a table with a button to reveal more data about them
Create a function to grab all the data from the collection called customers. Here is an example:
db.collection('users').get({ keys: true }).then(users => {
console.log(users)
})
Loop over the array of results and print into the customersTable
You can access a property from this array like this using the .data:
list[i].data.first
let rowCount = customerTable.rows.length;
for (var i = rowCount; i > 1; i--) {
customerTable.deleteRow(i - 1);
}
console.log(list);
console.log(list[0].data.first)
for (var i = 0; i < list.length; i++) {
var row = customerTable.insertRow(-1);
row.insertCell(0).innerHTML = list[i].data.first
row.insertCell(1).innerHTML = list[i].data.last
row.insertCell(2).innerHTML = '<button class="button" onclick = "showDetails(\'' + list[i].key + '\')">Details</button>';
}
Add a button in the column which passes the key into the onclick function
Create another function called showDetails(id). This function will fetch the key for just one document so that you reveal all the data about a customer. You can search via key like this:
db.collection('customers').doc(id).get().then(document => {
customerDetails.innerHTML = "Full Name: " + document.first;
});
You notice above that you can access the data via the keyword document. In the example above we join a string of HTML to display the customers data. You can extend.
Challenge 2: Create a search function to find a specific customer by first or last name
Note: Localbase is unable to search and return more then one document. So you will need to fetch all the data and use another function called filter.
Create a search function called search()
Fetch the users request from the text box when the search button is clicked and store in a variable
Fetch all the data from the customers collection
Use the filter finunction to search for criteria
function searchCustomer() {
let search = searchInput.value;
let result;
db.collection('customers').orderBy('last').get({ keys: true }).then(customers => {
result = customers.filter(function (el) {
return el.data.first == search || el.data.last == search;
});
console.log(result)
if (result.length > 0) {
printTable(result);
} else {
console.log("No customers found");
}
})
}
NOTE: The above function requires some more work. The filter function requires an exact match i.e. whole term plus it needs to be case sensitive. You may need to convert the strings to lowercase to allow for a full match in each situation.
Create a way to delete or remove customers from the database.
Validate the data in the add Customers form. The form should not add data if its missing.
Create a way to update values from the database via a form.
Improve the searching function to look for partial matches.