I am developing a web app where users can enter data into a spreadsheet like like UI and click on a submit button, and the data gets stored in a mysql database table.
I built the project with vite and have the basic UI ready. However, I am having trouble getting started with the backend implementation.My main.js file looks like this
import './style.css';
import HyperFormula from 'hyperformula';
document.querySelector('#app').innerHTML = `
<div id="example1" class="hot "></div>
<button class="btn">SUBMIT</button>
`;
import Handsontable from 'handsontable';
import 'handsontable/dist/handsontable.full.min.css';
import { registerAllModules } from 'handsontable/registry';
registerAllModules();
const fakeDataset = [
{
id: 1,
name: 'John',
secondName: 'Doe',
age: 30,
location: 'New York',
},
];
const hyperformulaInstance = HyperFormula.buildEmpty({
// to use an external HyperFormula instance,
// initialize it with the `'internal-use-in-handsontable'` license key
licenseKey: 'internal-use-in-handsontable',
});
const container = document.querySelector('#example1');
const hot = new Handsontable(container, {
//data: fakeDataset, commenting this out will load mockup data
startCols: 9, //number of empty columns
startRows: 100, //numbver of empty rows
height: 500, //hight in pixels
colHeaders: [
'Date of Service',
'Claimant Number',
'Service Type',
'Quantity per Claimant',
'Pay Rate each',
'Pay Rate extended',
'Zip code',
'Mobile',
'E-mail',
], //can pass true to get default A,B,C column headers
columns: [
{
type: 'date',
dateFormat: 'MM/DD/YYYY',
correctFormat: true,
defaultDate: '01/01/1900',
// datePicker additional options
// (see https://github.com/dbushell/Pikaday#configuration)
datePickerConfig: {
// First day of the week (0: Sunday, 1: Monday, etc)
firstDay: 0,
showWeekNumber: true,
/*disableDayFn(date) {
// Disable Sunday and Saturday
return date.getDay() === 0 || date.getDay() === 6;
}*/ //this is to disable Sundays and Saturdays
},
},
{
type: 'text',
allowInvalid: false,
},
{
type: 'dropdown',
source: ['a', 'b', 'c', 'd', 'e', 'f'],
allowInvalid: false,
},
{
type: 'numeric',
allowInvalid: false,
},
{
type: 'numeric',
allowInvalid: false,
},
{
type: 'numeric',
source: 'PROD(D:E)',
allowInvalid: false,
},
],
rowHeaders: true, //this enables the 1, 2, 3 row headers
contextMenu: true, //this is a menu that will allow to add/remove row/column if you open it up with RMB on any cell
autoWrapRow: true, //this allows to move to another row with arrows when you are in the last cell
autoWrapCol: true, //this allows to move to another row with arrows when you are in the last cell
licenseKey: 'non-commercial-and-evaluation', //this is only for evaluation, after the purchase you will replace that with your own key
});
document.querySelector('.save').addEventListener('click', () => {
let alteredDataset = hot.getData();
console.log(alteredDataset);
//this is the place to send it back to the server
});
This is how it looks on the browser.
I want to implement a functionality where users can enter data into the data grid and click on the submit button to store the data into a mysql database table with the same fields. I am new to node.js and am confused as to how to get started.
