Skicka HTML-form-data till MySQL-databas

2024-01-13, 20:08 #1

Medlem

Reg: Jun 2019

Inlägg: 108

Hej!

Har en fråga jag grubblar på och har svårt att få vettigt svar på än så länge.

Jag har en mapp med css, js och HTML. Jag har sedan en MySql databas dit jag vill föra in data. Jag vill göra det genom att plocka datan från några <input> genom webbläsaren.

Jag har Node.js installerat och allt funkar bra. Jag kan föra in datan genom terminalen för filen jag kallar "database.js", "node database.js" -> infon i koden kommer in som tänkt i databasen.

Men som jag förstår det måste jag ha 2x JS-filer, en för fronten och en för serverkommunikationen. För när jag lägger in Node-koden (som funkar bra i sig självt) i den andra JS-filen så står det bara "require is not defined", (använder "const mysql = require('mysql')).

Hur löser jag detta? Måste jag ha 2x JS-filer? En som tar upp informationen från HTML-dokumentet, skickar, en som tar emot denna data och sedan för den vidare till MySQL?

Tacksam för svar!

Citera

2024-01-13, 21:27 #2

Bannlyst

Citat:

Ursprungligen postat av toalettrullen14

Hej!

Har en fråga jag grubblar på och har svårt att få vettigt svar på än så länge.

Jag har inte jobbat med node.js på nästan 10 år nu och gjorde det bara en kort period. Då verkade det här ganska bra: https://sailsjs.com/. Du kanske ska kika på det lite? Lita inte på mig när det gäller node.js i någon usträckning alls, men om ingen annan svarar är kanske det här svaret bättre än inget? 🥶

Citera

2024-01-13, 23:56 #3

Moderator

Reg: Aug 2010

Inlägg: 18 652

Nätverk och datorkommunikation --> Webbutveckling och javascript
/Moderator

Citera

2024-01-14, 01:57 #4

Medlem

Reg: Sep 2010

Inlägg: 1 043

NodeJS är server side javascript. "Vanligt" javascript körs i webbläsaren. Webbläsare kan inte exekvera NodeJS-kod. Det är därför den klagar på require, webbläsaren har ingen aning om vad require betyder.

Så ja, du måste ha två olika filer, en som körs som server och en som skickas till webbläsaren och exekveras där.

Du skickar lämpligtvis data mellan dom två filerna via HTTP.

Citera

2024-01-14, 03:26 #5

Medlem

Reg: Jun 2023

Inlägg: 818

Använd express i nodejs för att fixa API:t

T.ex.

https://medium.com/@bipingiri27/crud...l-7ce1d4acb418

Testa:

To create a simple example of HTML communicating with a Node.js Express server to interact with a MySQL database, you need three parts:

1. **HTML Frontend**: This is the user interface where users input data or request data.
2. **Node.js Express Backend**: This acts as the middleman, receiving requests from the HTML frontend, interacting with the MySQL database, and returning responses.
3. **MySQL Database**: This is where your data is stored.

Here's a basic example:

### 1. HTML Frontend (`index.html`)

```html
<!DOCTYPE html>
<html>
<head>
<title>MySQL Data</title>
</head>
<body>
<h1>Data Entry for MySQL</h1>
<form action="/submit-data" method="post">
<input type="text" name="data" placeholder="Enter some data">
<button type="submit">Submit</button>
</form>
</body>
</html>
```

### 2. Node.js Express Backend (`app.js`)

First, install Express and MySQL Node.js modules using npm:

```bash
npm install express mysql
```

Then, create your Express server:

```javascript
const express = require('express');
const mysql = require('mysql');
const bodyParser = require('body-parser');

const app = express();
app.use(bodyParser.urlencoded({ extended: true }));

// MySQL connection
const connection = mysql.createConnection({
host: 'localhost',
user: 'your_username',
password: 'your_password',
database: 'your_database'
});

connection.connect();

app.post('/submit-data', (req, res) => {
const data = req.body.data;
connection.query('INSERT INTO your_table SET ?', {data: data}, (error, results, fields) => {
if (error) throw error;
res.send('Data submitted to MySQL: ' + data);
});
});

app.listen(3000, () => {
console.log('Server is running on port 3000');
});
```

### 3. MySQL Database

You need to have MySQL installed and a database with a table to store the data. For example:

```sql
CREATE DATABASE your_database;
USE your_database;

CREATE TABLE your_table (
id INT AUTO_INCREMENT PRIMARY KEY,
data VARCHAR(255) NOT NULL
);
```

### Running the Example

1. Start your MySQL server and ensure the database and table are set up.
2. Run the Node.js application (`node app.js`).
3. Open `index.html` in a web browser and submit data through the form.

When you submit data via the HTML form, it sends a POST request to the Express server, which then inserts the data into the MySQL database. This is a simplified example and doesn't include error handling or security measures like input validation and sanitization, which are crucial for production applications.

Bara ett snabbt förslag från chatGPT, men a, läs på om express.

__________________
Senast redigerad av Vargtickare 2024-01-14 kl. 03:34.

Citera

2024-01-14, 03:50 #6

Medlem

Reg: Jun 2023

Inlägg: 818

https://developer.mozilla.org/en-US/...s_Nodejs/forms

Express Tutorial Part 6: Working with forms

Previous
Overview: Express Nodejs
Next
In this tutorial we'll show you how to work with HTML Forms in Express using Pug. In particular, we'll discuss how to write forms to create, update, and delete documents from the site's database.

Citera

2024-01-14, 08:38 #7

Moderator

Reg: Sep 2010

Inlägg: 4 005

Nu har tråden flyttats till Systemutveckling. Läs https://www.flashback.org/announcement.php?f=42 och använd kodtaggar.

/Moderator

Citera

2024-01-14, 13:42 #8

Medlem

Reg: Jun 2019

Inlägg: 108

Rikligt tack till er alla som har svarat! Varit väldigt användbart, pekades i rätt riktning lite mer nu. Fastnade dock lite igen nu när jag skulle göra en XHR-req och kommer därför en follow-up-fråga om någon känner sig manad

Vid Fetch får man alltid tillbaka ett Object man kan navigera för att välja ut en viss del av responsen man får, men vid XHR-req verkar hela skiten komma med. Hur kan man lösa det på ett bra sätt?

I fallet här:
https://api.nbp.pl/api/cenyzlota

Får jag med fetch ett Object som sagt, medan med XHR får jag bara en string: "[{"data":"2024-01-12","cena":258.87}]"

Finns det några smidiga vis att få fram bara t.ex. "258.87" ur den datan? Får inga vidare svar från AI kring det..

Återigen, tack för era svar hittills!
________________________________

Edit//
Tog mig ett par minuter efter denna texten innan jag kom ihåg att man ju utan problem ska kunna konvertera mellan alla varianter, i detta fallet med JSON.parse(data)!

Problem solved..

__________________
Senast redigerad av toalettrullen14 2024-01-14 kl. 13:49.

Citera

2024-01-14, 16:13 #9

Medlem

Reg: Jul 2005

Inlägg: 16 337

Citat:

Ursprungligen postat av toalettrullen14

Rikligt tack till er alla som har svarat! Varit väldigt användbart, pekades i rätt riktning lite mer nu. Fastnade dock lite igen nu när jag skulle göra en XHR-req och kommer därför en follow-up-fråga om någon känner sig manad

Vid Fetch får man alltid tillbaka ett Object man kan navigera för att välja ut en viss del av responsen man får, men vid XHR-req verkar hela skiten komma med. Hur kan man lösa det på ett bra sätt?

I fallet här:
https://api.nbp.pl/api/cenyzlota

Får jag med fetch ett Object som sagt, medan med XHR får jag bara en string: "[{"data":"2024-01-12","cena":258.87}]"

Finns det några smidiga vis att få fram bara t.ex. "258.87" ur den datan? Får inga vidare svar från AI kring det..

Återigen, tack för era svar hittills!
________________________________

Edit//
Tog mig ett par minuter efter denna texten innan jag kom ihåg att man ju utan problem ska kunna konvertera mellan alla varianter, i detta fallet med JSON.parse(data)!

Problem solved..

Enklast möjliga (för andra som läser, även om du löst detta själv), om man stoppar in resultatet från XHR i xhrJSON:

Kod:

const cena = JSON.parse(xhrJSON)[0].cena;

Not: man behöver lägga till [0] eftersom JSON-strängen har strukturen att objektet ligger in en omslutande array.

__________________
Senast redigerad av Enterprise 2024-01-14 kl. 16:16.

Citera

2024-01-14, 17:34 #10

Medlem

Reg: Jun 2019

Inlägg: 108

Citat:

Ursprungligen postat av Enterprise

******************

När du ändå ploppade in här måste jag fråga dig en sak!

Försöker göra det så nerdummat som det bara går för att jag ska fatta exakt hur man gör från grunden, men blir fel ändå.

När jag exekverar koden från index.js, så kommer all kod från database.js in i konsollen (istället för responsen som koden skulle generera). Hur kommer det sig? Tanken är ju senare att jag ska sätta ihop den med Mysql-databasen och få in allt till webbläsaren, inte få Node.js-koden i textformat

Har du någon tanke? Koden här nedan!

index.js:
_________________________________
const xhr = new XMLHttpRequest()
xhr.open('GET', '\database.js')

xhr.addEventListener('load', () => {
if(xhr.status === 200){
console.log(xhr)
}
else{
console.log('Connection failed.')
}
})
xhr.send()
_________________________________
database.js:
________________________________________
const http = require('http');

const server = http.createServer((req, res) => {
console.log(req)
res = 'majs'
})
server.listen(3000, () => {
console.log('Server is listening on port 3000.')
})
________________________________________

Citera

2024-01-14, 20:14 #11

Medlem

Reg: Jul 2005

Inlägg: 16 337

Citat:

Ursprungligen postat av toalettrullen14

När du ändå ploppade in här måste jag fråga dig en sak!

Försöker göra det så nerdummat som det bara går för att jag ska fatta exakt hur man gör från grunden, men blir fel ändå.

När jag exekverar koden från index.js, så kommer all kod från database.js in i konsollen (istället för responsen som koden skulle generera). Hur kommer det sig? Tanken är ju senare att jag ska sätta ihop den med Mysql-databasen och få in allt till webbläsaren, inte få Node.js-koden i textformat

Har du någon tanke? Koden här nedan!

index.js:
_________________________________
const xhr = new XMLHttpRequest()
xhr.open('GET', '\database.js')

xhr.addEventListener('load', () => {
if(xhr.status === 200){
console.log(xhr)
}
else{
console.log('Connection failed.')
}
})
xhr.send()
_________________________________
database.js:
________________________________________
const http = require('http');

const server = http.createServer((req, res) => {
console.log(req)
res = 'majs'
})
server.listen(3000, () => {
console.log('Server is listening on port 3000.')
})
________________________________________

Var och hur ligger database.js sparat?
Det ser ut som att det just nu ligger på en filserver. Och du får alltså filen hämtad (och inte exekverad på serversidan). Det verkar alltså som att din klientkod gör precis vad den ska, men problemet ligger på din serverinställning.

Kör du med Node.js eller Apache?
Om du kör Node.js, har du satt upp en web-server t.ex. Express?
I så fall brukar man ha routing-regler för att köra en viss kod. Inte lägga en fil som heter database.js som anropas därigenom.

Edit: Jag tittade nu på din database.js fil och vad du vill göra (antar jag) är att köra denna på servern med node.
Alltså typ:

Kod:

node ./database.js

Då ska server-konsollen visa: "Server is listening on port 3000" och du kan då göra ett anrop till servern. Dock ser database.js inte färdig ut.

Här är kod som i varje fall teoretisk fungerar (dock utan databas-funktionalitet):

Kod:

const http = require('http');

const server = http.createServer((req, res) => {
    console.log(req.url);
    res.statusCode = 200;
    res.setHeader('Content-Type', 'text/plain');
    res.end('majs');
});

server.listen(3000, () => {
    console.log('Server is listening on port 3000.');
});

__________________
Senast redigerad av Enterprise 2024-01-14 kl. 20:23.

Citera

2024-01-15, 14:59 #12

Medlem

Reg: Jun 2019

Inlägg: 108

Citat:

Ursprungligen postat av Enterprise

Var och hur ligger database.js sparat?
Det ser ut som att det just nu ligger på en filserver. Och du får alltså filen hämtad (och inte exekverad på serversidan). Det verkar alltså som att din klientkod gör precis vad den ska, men problemet ligger på din serverinställning.

Kör du med Node.js eller Apache?
Om du kör Node.js, har du satt upp en web-server t.ex. Express?
I så fall brukar man ha routing-regler för att köra en viss kod. Inte lägga en fil som heter database.js som anropas därigenom.

Edit: Jag tittade nu på din database.js fil och vad du vill göra (antar jag) är att köra denna på servern med node.
Alltså typ:

Kod:

node ./database.js

Då ska server-konsollen visa: "Server is listening on port 3000" och du kan då göra ett anrop till servern. Dock ser database.js inte färdig ut.

Här är kod som i varje fall teoretisk fungerar (dock utan databas-funktionalitet):

Kod:

const http = require('http');

const server = http.createServer((req, res) => {
    console.log(req.url);
    res.statusCode = 200;
    res.setHeader('Content-Type', 'text/plain');
    res.end('majs');
});

server.listen(3000, () => {
    console.log('Server is listening on port 3000.');
});

Tack för svaret!

Jag gör egentligen det här mest för att lära mig.

Har filerna liggandes offline, lokalt på datorn i samma mapp. Mysql är installerat på datorn och i den skapade jag en DB.

Du har nog rätt i din analys där.

Database.js, när jag "triggar den" i konsollen genom "node database.js" så funkar allt. Både lägga in och ta ut info från DB.

Vad mitt problem är, är ju att jag inte vet hur jag genom min vanliga index.js-fil kan trigga samma som "node database.js" I konsollen gör, och sedan suga åt mig infon till index.js. Det känns som jag är nära svaret, men man vet inte vad man inte vet, och därför svårt vad man ska googla efter 😅

Ska prova denna kod när jag kommer hem igen!

Får man fråga, du la till detta:

" res.statusCode = 200;
res.setHeader('Content-Type', 'text/plain' "

Är det allt som saknades, och vad exakt är denna "Header"? Om du orkar förklara.

Sedan statuscode 200 trodde jag kom automatiskt när anrop var OK, behöver man manuellt lägga till det?

Tack för hjälpen!

Citera

Skicka HTML-form-data till MySQL-databas

Skapa ett konto eller logga in för att kommentera

Skapa ett konto

Logga in