Electron App: How to post electron app HTML form fields to the corresponding postgreSQL table columns

Question

I am making an electron app. I created a table on pgadmin4 called "test". I want to submit the form "test" on my app's interface - for each corresponding field (TestLastName, TestFirstName, TestMRN, TestDateOfBirth), I want it to be added to each corresponding column on my "test" table in pgadmin4. The front-end of the form works, but I think the connection is not really connecting. Thus, the adding to the table in pgadmin4 isn't working. I came up with this code after digging around but it's still not working. What could be the issue?

This is my "wf_Main.js"

/* --------------- IMPORT NODE.JS --------------- */ 
const { app, BrowserWindow} = require('electron');
const path = require('node:path')
const url = require('url');


// Require electron-reload for live-reloading
if (process.env.NODE_ENV === 'development') {
  require('electron-reload')(__dirname, {
    electron: require('electron'),
  });
}


/* --------------- VARIABLES --------------- */ 
let mainWindow;
let widthVariable = 800;
let heightVariable = 600;




/* --------------- FUNCTIONS --------------- */ 
// Function 1: Open Login Page
function openLoginPage() {
  // Create the browser window
  mainWindow = new BrowserWindow({ 
    width: widthVariable, 
    height: heightVariable, 
    webPreferences: {
      nodeIntegration: true, // This allows button navigation.
      preload:path.join(__dirname, 'wf_Preload.js')
    }, 
  });

  // Load the initial HTML page
  mainWindow.loadFile('wf_Index.html');

  // Listen for the window being closed. Then set window to be nothing:
  mainWindow.on('closed', function () {
    mainWindow = null;
  });
}


// Create the main window when the app is ready. In Electron, app's "ready" event must fire to open browser.:
app.whenReady().then(openLoginPage);


// Quit the app when all windows are closed, except on macOS (Darwin means macOS):
app.on('window-all-closed', function () {
  if (process.platform !== 'darwin') app.quit();
});


// Create a new window when the app is activated, except on macOS
app.on('activate', function () {
  if (mainWindow === null) openLoginPage();
});

While my launch html is wf_Index.html, I have a "Login" button that takes me to wf_App.html

This is form in my "wf_App.html"

                        <!---ADD NEW CLIENT:-->
                        <div class="FormBox Test">
                            <form id="form-test" action="/" method="POST">
                                <!---Last Name:-->
                                <div class="FormItem InputBox">
                                    <input type="text" placeholder="Last Name" required id="form-postgreSQL-test-lastNameInput" required name="TestLastName">
                                    <span class="Form ErrorMessage" id="form-postgreSQL-test-lastNameError"></span><br>
                                </div>

                                <!---First Name:-->
                                <div class="FormItem InputBox">
                                    <input type="text" placeholder="First Name" required id="form-postgreSQL-test-firstNameInput" required name="TestFirstName">
                                    <span class="Form ErrorMessage" id="form-postgreSQL-test-firstNameError"></span><br>
                                </div>

                                <!---MRN:-->
                                <div class="FormItem InputBox">
                                    <input type="number" placeholder="MRN" required id="form-postgreSQL-test-MRNInput" required name="TestMRN">
                                    <span class="Form ErrorMessage" id="form-postgreSQL-test-MRNError"></span><br>
                                </div>

                                <!---Date of Birth:-->
                                <div class="FormItem InputBox">
                                    <input type="text" placeholder="Date of Birth (YYYY-MM-DD)" class="Datepicker" required id="form-postgreSQL-test-DOBDatepicker" required name="TestDateOfBirth">
                                    <span class="Form ErrorMessage" id="form-postgreSQL-test-DOEBError"></span><br>
                                </div>
                    
                                <!---Submit button:-->
                                <button type="submit" class="FormItem BtnRegWhiteBackground" id="btn-form-postgreSQL-test-addClients-submit">Submit</button>
                            </form>
                        </div>
                    </div>
                    

I also have <script src="wf_PostgreSQL.js"></script> at the bottom on my "wf_App.html"

This is my "wf_PostgreSQL.js"

/* --------------- STEP 1: RENDERING THE FORM --------------- */ 
const express = require('express');
const app = express();
const port = 9000;

const bodyParser = require('body-parser'); 

app.use(express.static(__dirname));

app.get("/", (req, res) => {
  res.sendFile("file://" + __dirname + "/wf_App.html");
});

app.use(bodyParser.urlencoded({extended: false}))
app.get('/submit',function(req,res){
  console.log("Data Saved");
})



/* --------------- STEP 2: SETUP DATABASE FOR CONNECTION --------------- */ 
/* --------------- Step 2a: Import "Pool" class from the 'pg' (PostgreSQL) Library --------------- */ 
const { Pool, Client } = require('pg');
    // Explanation:  This class is used to manage connections to the PostgreSQL database.

/* --------------- Step 2b: Method 2 - PostgreSQL Connection Set up --------------- */ 
const myPostgresqlConnectionVar = 'postgresql://postgres:mypassword@localhost:5432/My database name'
const client = new Client({
    connectionString:myPostgresqlConnectionVar
})




/* --------------- STEP 3: "POST" FUNCTION LEADING TO INSERTING DATA --------------- */ 
app.post("/",(req,res)=>{
  const { 
      TestLastName,
      TestFirstName,
      TestMRN,
      TestDateOfBirth
  }=req.body
      // Note: Make sure to use the form's names.
  
  client.connect()
    
  client.query(
    'INSERT INTO public.test VALUES ($1, $2, $3, $4)', 
    [TestLastName, TestFirstName, TestMRN, TestDateOfBirth], 
    (err,res)=> {
      console.log(err,res);
      client.end() 
      //alert("Data Saved");        
  })
 
  //res.sendFile(__dirname + "/wf_App.html");
  res.sendFile("file://" + __dirname + "/wf_App.html");
})

app.listen(port, () => {
  console.log(`Console Message: App listening on port ${port}!`)
});

I am expecting that by pressing the submit button that I will see what I wrote in the Form Fields to be added to the corresponding columns in my "test" table in my pgadmin4 (a postgreSQL table) but I get this error in my terminal: 2024-03-09 15:53:26.458 Electron[78711:10876475] WARNING: Secure coding is not enabled for restorable state! Enable secure coding by implementing NSApplicationDelegate.applicationSupportsSecureRestorableState: and returning YES. (node:78711) electron: Failed to load URL: file:/// with error: ERR_FILE_NOT_FOUND (Use Electron --trace-warnings ... to show where the warning was created)

Ultimately, I don't see my data getting added to my pgadmin4 table.