I have a small problem about nodejs and html. There is an error somewhere that I couldn't see. I have been getting this error for 2 days. (cannot get /aP.html)
There is nothing wrong about sql connection, and first and second pages. But when I want to go aP.html from secondpage I keep getting this error.
My nodejs code:
var mysql = require('mysql');
var express = require('express');
var bodyParser = require('body-parser');
var path = require('path');
var connection = mysql.createConnection({
......
});
connection.connect((err) => {
if(err){
throw err;}
else console.log("connected");
});
var app = express();
app.use(bodyParser.urlencoded({extended : true})); //forma girilen datanın parse edilebilmesi için
//başka directorylerdeki klasörleri kullanacaksan
app.use('/js', express.static(__dirname + '.....'));
//gidilecek sayfa
app.get('/', function(request, response) {
res.render('/aP.html', {});;
});
console.log("got it");
app.post('/aP.html', function(request, response) {
var p_name = request.body.urun_adi;
var code = request.body.barkod;
var quantity = request.body.stok_sayi;
var price = request.body.satis_fiyati;
var cost = request.body.maliyet;
var supplier = request.body.firma_adi;
// var username = request.body.id;
/* foreign key olan user id burada kullanılacak mı?*/
console.log(p_name);
connection.query( "INSERT INTO `stok` (`urun_adi`, `barkod`, `stok_sayi`, `satis_fiyati`, `maliyet`, `firma_adi`) VALUES ('"+p_name +"','"+ code +"','"+ quantity +"','"+ price +"','"+ cost +"','"+ supplier+"')");
if(err) throw err;
response.send('save succesful');
});
app.listen(3000);
My HTML code(just for trying):
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<form action="/aP.html" method="post" class= "col s12">
<input type="hidden" name="e_id" value="">
<div class="form-group row">
<label for="p_name" class="col-2 col-form-label"> Adı</label>
<div class="col10">
<input type="text" name="p_name" value="" class="form-control">
</div>
</div>
<div class="form-group row">
<label for="code" class="col-2 col-form-label"> Barkod</label>
<div class="col10">
<input type="text" name="code" value="" class="form-control">
</div>
</div>
<div class="form-group row">
<label for="quantity" class="col-2 col-form-label"> Adet</label>
<div class="col10">
<input type="text" name="quantity" value="" class="form-control">
</div>
</div>
<div class="form-group row">
<label for="price" class="col-2 col-form-label"> Fiyat</label>
<div class="col10">
<input type="text" name="price" value="" class="form-control">
</div>
</div>
<div class="form-group row">
<label for="cost" class="col-2 col-form-label"> Maliyet</label>
<div class="col10">
<input type="text" name="cost" value="" class="form-control">
</div>
</div>
<div class="form-group row">
<label for="supplier" class="col-2 col-form-label"> Tedarikçi</label>
<div class="col10">
<input type="text" name="supplier" value="" class="form-control">
<input type="submit" name="submit" value="Save Stock">
</div>
</div>
</form>
</body>
</html>
What view engine are you using? If it is ejs you will have to require it and change some of your code. Look at my example and maybe it will clear things up for you. If this is your question.
first npm install ejs
Index.js or server.js depending on what you name it. (start file)
const express = require('express');
const bodyParser = require('body-parser');
const app = express();
app.use(express.static("public"))
app.use(bodyParser.urlencoded({ extended: true }));
app.set('view engine', 'ejs');
app.set("port", 3001)
app.get('/', function (req, res) {
res.render('index')
});
app.use('*', function (req, res) {
res.status(400);
res.json({
'error': 'Deze URL is niet beschikbaar.'
});
});
app.listen(process.env.PORT || 3001, function() {
console.log('De server luistert op port ' + app.get('port'));
});
module.exports = app;
Then create a views directory in the root of the project. (same level as the index.js) It is important that you name it that.
In the views folder create a file (in your case aP) with .ejs extension. No HTML extension, because you will use the ejs view engine. It will automatically search in de views directory for the ejs files. Put the html code from aP.html into the newly created aP.ejs file.
I hope this is the answer you are looking for if there are any other problems or you want to do it differently, please let me know.
Edit: different way without ejs
Change this line:
app.get('/', function(request, response) {
res.render('/aP.html', {});;
});
Into this:
app.get('/', function(request, response) {
response.sendFile(path.join(__dirname+'/aP.html'));;
});
Make sure the aP.html is on the same level as the index.js file.
Your problem was (I think) that is didn't recognize res because you name it response. Furthermore you should use sendFile and it will work. I hope this helped.
Related
I'm working with Express v^4.18.2, I have some routing and controller files and an html form with post method. When I make the post, I try to get the server to show me the req.body sent in the request through the console, but I get an empty object. It should be noted that I am following a tutorial and I do it step by step. Could someone with more knowledge of Express tell me what is going on?
Routes.js
import { Router } from "express";
import dashBoardObject from "../Controller/DashboardsController.js";
import { DashboardContoroller} from "../Controller/DashboardsController.js";
const router = Router();
const { formDashboardController,
postFormDashboardController,
putDashboardContoller
} = dashBoardObject;
router
.get('/DashBoard', DashboardContoroller)
.get('/DashBoard/createdDasboard', formDashboardController)
router
.post('/DashBoard/createdDasboard', postFormDashboardController)
router
.put('/DashBoard/updateDashboard', putDashboardContoller)
export default router;
As you can see, in the routes I try to destruct the object that I get from the controller.
Controller.js
const dashBoardObject = {};
export const DashboardContoroller= (req, res) =>{
res.send(`indicators/Indicators`);
}
dashBoardObject.formDashboardController = (req, res) =>{
res.render(`indicators/Indicators`);
}
dashBoardObject.postFormDashboardController = (req, res) =>{
// let values = Object.values();
console.log(`request: ${req.body}`);
res.send(`<h3> CREATED! 🆗 ${req.body} </h3>`);
}
dashBoardObject.putDashboardContoller = (req, res) =>{
res.send(`<h3> UPDATED! 🆗 </h3>`);
}
export default dashBoardObject;
HTML
<div style="display: flex; flex-direction: column; justify-content: center;">
<div>
<form action="/DashBoard/createdDasboard" method="POST">
<div class="mb-2 row">
<label for="" class="col-sm-2 col-form-label">Titulo</label>
<div>
<input class="form-control" placeholder="Titulo" type="text" autofocus>
</div>
</div>
<div class="mb-2 row">
<label for="" class="col-sm-2 col-form-label">Titulo</label>
<div>
<input class="form-control" name="Title" placeholder="Titulo" type="text">
</div>
</div>
<div class="mb-2 row">
<label for="" class="col-sm-2 col-form-label">enviar</label>
<div>
<button class="btn btn-primary" >Actualizar</button>
</div>
</div>
</form>
</div>
This is what I get in the browser:
If req.body is empty, you should add a middleware on top of your router:
router.use(express.urlencoded())
Also, to correctly show the object in the html response:
res.send(`<h3> CREATED! 🆗 ${JSON.stringify(req.body)} </h3>`);
I am new at pug and nodejs.
I am trying to create a validation form before i can send to the next page, but i am struggling with it. I have already succeed with form validation using html, but when i've changed to pug, i encountered issues and i get 'invalid input' with all the data i send.
here is the error:
{"errors":[{"msg":"Invalid value","param":"boardname","location":"body"},{"msg":"Invalid value","param":"ipaddress","location":"body"},{"msg":"Invalid value","param":"portnum","location":"body"}]}
Here is index form
<form action="/board" method="post" class="cntbox" enctype = multipart/form-data id="formBoard" name="formOfBoard" onsubmit="validateIndexForm(event)">
<!--Close Button of the pop up-->
<div class="righttopicon" onclick="closeForm()">
<img src="images/square-x.png" alt="close icon">
</div>
<!--Form with the necessary inputs (Name of the Board, IP Address, Port and upload file). All the inputs are required-->
<div class="col-100">
<h3>Add new board:</h3>
</div>
<!--Input for the boards name with max length of 50 characters-->
<div class="col-75">
<label for="bname">Name of the Board: *</label><br>
<input type="text" id="boardname" name="boardname" placeholder="Ex: Board 1" maxlength="75">
</div>
<!--Input for the IP Address that can only accept IP's and with a max length of 15 characters-->
<div class="row">
<div class="col-75">
<label for="ipaddress">IP Address: *</label><br>
<input type="text" name="ipaddress" id="ipaddress" placeholder="Ex: 192.168.1.1" maxlength="15">
</div>
</div>
<!--Input for the Port that can only accept numbers with a max length of 4-->
<div class="row">
<div class="col-75">
<label for="portnum">Port: *</label><br>
<input type="text" name="portnum" id="portnum" placeholder="Ex: 8080" maxlength="4" minlength="2">
</div>
</div>
<!--Input for the upload of the boards image that can only accept .png files-->
<div class="row">
<div class="col-75">
<label for="imgadd">Upload image:</label><br>
<img src="images/file-upload.png" alt="Insert image" class="insrtimg" name="imageboard" id="insertimage">
<input type="file" id="myFile" name="myFile" onchange="fileValidation(event)">
</div>
</div>
<!--'Save' and 'Discard' buttons -->
<div class="row">
<div class="col-80">
<div class="btnformcontainer">
<input type="submit" class="btnfrm btnconfrm" value="Save">
<div class="btnfrm btndel" onclick="discardValues()">Discard</div>
</div>
</div>
</div>
</form>
and the server (named servertest2 for test purposes)
var express= require('express');
var path = require('path');
var app = express();
var bodyParser = require('body-parser');
var {check, validationResult} = require('express-validator');
app.use(bodyParser.urlencoded({extended: true}));
app.use(bodyParser.json());
//Allow to send json to the server
app.use(express.json());
//Serve images, css files and javascript files in the directory named 'public'
app.use(express.static(path.join(__dirname, 'public')));
//Load view engine
app.set('view engine', 'pug');
app.set('views', path.join(__dirname, './public/views'));
app.get('/', function(req,res){
res.sendFile(path.join(__dirname, '/public/views/index.html'));
});
app.get('/index', function(req,res){
res.sendFile(path.join(__dirname, '/public/views/index.html'));
})
app.get('/board', function(req,res){
res.render('board.pug');
})
app.post('/board', [
check('boardname').notEmpty().isLength({max : 75}),
//check if ipaddress is an IP
check('ipaddress').isIP() || check('ipaddress').equals('localhost' === 'localhost'),
//check if port is a number with max length of 4
check('portnum').isPort({max:4}),
],
function(req,res){
let errors = validationResult(req)
//check for errors and return json with results
if(!errors.isEmpty()){
return res.status(422).json({errors: errors.array()})
}
console.log(req.body.boardname);
console.log(req.body.ipaddress);
console.log(req.body.portnum);
//console.log(req.body.myFile);
let nameboard = req.body.boardname;
res.render(('board.pug'), {name : nameboard});
})
//Start Server
app.listen(3000, function(){
console.log('Server listening at port 3000');
});
!= messages('message', locals)
if errors
each error, i in errors
div(class='alert alert-danger') #{error.msg}
I would like to send some data from client to NodeJS server using POST method.
Below is my part of html code.
<form action="http://localhost:8080/data/name/:name/ssn/:ssn" method="post" id="signup">
<h1>Personal info post example</h1>
<div class="field">
<label for="name">Name:</label>
<input type="text" id="name" placeholder="Enter your fullname" />
<small></small>
</div>
<div class="field">
<label for="ssn">SSN:</label>
<input type="text" id="ssn" placeholder="Enter your SSN" />
<small></small>
</div>
<button type="submit">Submit</button><br><br>
</form>
Below is my part of server.js.
I tried to print out everything that I can think of what I can.
I wrote down the results as comments as well.
This is the result when I enter 'a' for the name and 'b' for the ssn and submit it.
app.post('/data/name/:name/ssn/:ssn', function(req, res) {
console.log('req.query: ', req.query); // {}
console.log('req.query.name: ',req.query.name); // undefined
console.log('req.query.ssn: ',req.query.ssn); // undefined
console.log('req.params: ',req.params); // { name: ':name', ssn: ':ssn' }
console.log('req.params.name: ',req.params.name); // :name
console.log('req.params.ssn: ',req.params.ssn); // :ssn
});
When I type 'a' and 'b' into search boxes and hit the submit button, the web browser starting to load but never ends and my VSC shows the result.
Can anyone help me what I need to fix?
looks like you're mixing req.params and req.query, while you actually need req.body
try this:
add this to server.js (you need to install body-parser):
const bodyParser = require('body-parser');
// parse application/x-www-form-urlencoded
app.use(bodyParser.urlencoded({ extended: true }));
// parse application/json
app.use(bodyParser.json());
app.post('/data', function(req, res) {
console.log('req.body: ', req.body);
const {name, ssn} = req.body;
console.log('name: ', name);
console.log('ssn: ', ssn);
res.json(req.body);
});
and change HTML form (add name attribute, that's your data):
<form action="http://localhost:8080/data" method="post" id="signup">
<h1>Personal info post example</h1>
<div class="field">
<label for="name">Name:</label>
<input type="text" id="name" name="name" placeholder="Enter your fullname" />
<small></small>
</div>
<div class="field">
<label for="ssn">SSN:</label>
<input type="text" id="ssn" name="ssn" placeholder="Enter your SSN" />
<small></small>
</div>
<button type="submit">Submit</button><br><br>
</form>
your code is good. But you are facing this problem because the server is not sending any data after submit.
First, there should be something to handle GET:
var express = require('express');
var app = express();
app.get('/', (req, res)=>{
res.sendFile('index.html');
console.log('Someone saw your website!');
})
app.listen(80);
Secondly, return something after submit:
app.post('/data/name/:name/ssn/:ssn', function(req, res) {
console.log('req.query: ', req.query); // {}
console.log('req.query.name: ',req.query.name); // undefined
console.log('req.query.ssn: ',req.query.ssn); // undefined
console.log('req.params: ',req.params); // { name: ':name', ssn: ':ssn' }
console.log('req.params.name: ',req.params.name); // :name
console.log('req.params.ssn: ',req.params.ssn); // :ssn
res.end('Thankyou, \n Your Name:'+req.params.name+'\n Your Ssn:'+req.params.ssn);
});
I am beginner to web development. I created a simple form using HTML and CSS, which contained three widgets i.e. name, email and phone. Now I want to send data to the server and store in it using NodeJS.
What should I do?
Here is my HTML file.
<!DOCTYPE html>
<html>
<head>
<Meta charset = "uft-8">
<title> Singing up for The Event </title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<form action = "/registration-form" method = "post">
<div>
<label for="name"> Name: </label>
<input type="text" id="name" name="user_name">
</div>
<div>
<label for="mail"> E-mail: </label>
<input type="email" id="mail" name="user_mail">
</div>
<div>
<label for="phone"> Phone:</label>
<input type="number" id="phone" name="user_phone"></input>
</div>
<div class="button">
<button type="submit">Register!</button>
</div>
<div class="button">
<button type="Reset">Reset!</button>
</div>
</form>
</body>
</html>
Here is my server.js file.
var express = require('express');
var app = express();
var bodyParser = require('body-parser');
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
var port = process.env.PORT || 63342;
//POST
app.post('/api/users', function(req, res) {
var user_name = req.body.user_name;
var user_mail = req.body.user_mail;
var user_phone = req.body.user_phone;
res.send(user_name + ' ' + user_mail + ' ' + user_phone);
})
//starting the server
app.listen(port);
console.log("Running at port 63342...");
I am not sure what to do next. How to check if the request was successful and is there any way to make a request via opening and filling the HTML form directly.
How did you define your model schema(database) or collections : you can check value of the response(res).
if(err) {
res.json({success: false, message: `Failed to create a new list. Error: ${err}`});
}
else
res.json({success:true, message: "Added User successfully."});
For a school project I need to insert data from a html form into my database. The problem is, I never worked with NodeJS, Express, Handlebars or JavaScript before and I cant seem to figure out how it works, I currently have this form in my .hbs file
<div class="row">
<form action="" method="post" class="col s12">
<div class="row">
<div class="col s3 offset-s1">
<label>Sensor Type</label><br>
<label>
<input id="combo" class="with-gap" name="sensorType" type="radio"/>
<span>Temperature & Humidity</span>
</label><br>
<label>
<input id="temp" class="with-gap" name="sensorType" type="radio"/>
<span>Temperature</span>
</label><br>
<label>
<input id="humid" class="with-gap" name="sensorType" type="radio"/>
<span>Humidity</span>
</label>
</div>
</div>
<div class="row">
<div class="input-field col s3 offset-s1">
<select id="sensorForest">
<option value="" disabled selected>Choose your forest</option>
<optgroup label="The Netherlands">
<option value="streekbos">Streekbos Bovenkarspel</option>
</optgroup>
<optgroup label="United States of America">
<option value="losAngeles">Los Angeles National Forest</option>
</optgroup>
</select>
<label>Forest</label>
</div>
<div class="input-field col s3">
<textarea id="textarea2" class="materialize-textarea" data-length="50"></textarea>
<label for="textarea2">Enter sensor Location</label>
</div>
</div>
<div class="row">
<div class="input-field col s6 offset-s1">
<div class="input-field col s6">
<input id="latitude" type="text" class="validate">
<label for="latitude">Latitude</label>
</div>
<div class="input-field col s6">
<input id="longitude" type="text" class="validate">
<label for="longitude">Longitude</label>
</div>
</div>
</div>
<div>
<div class="row">
<div class="col s12 offset-s1">
<button class="btn waves-effect waves-light" id="submit">Submit
<i class="material-icons right">send</i>
</button>
</div>
</div>
</div>
</form>
</div>
Ive also managed to extract the values of the fields in the form using the following script, but I dont think I can use this since I have to use NodeJS
<script>
var submit = document.getElementById("submit");
submit.onclick = function () {
//var sensorType = document.getElementById("sensorType").value;
var sensorForest = document.getElementById("sensorForest").value;
var sensorLocation = document.getElementById("textarea2").value;
var latitude = document.getElementById("latitude").value;
var longitude = document.getElementById("longitude").value;
console.log(sensorForest, sensorLocation, latitude, longitude);
};
</script>
Does anyone know how I'm supposed to send the data to my database or know a good tutorial that explains me how to do it?
Thank you
To connect your NodeJS/ExpressJS application to a database (mongodb, mysql,...) you need an ORM library. For your case i suggest Sequelize. All infos at http://docs.sequelizejs.com/
no you don't need an ORM library. You can just use mysql package from npm
Well before you save anything to a database, you have to get it to your server. I recommend using built-in fetch or if you want better browser support use axios, request-promise or superagent. All of these packages can be found on npm
Client
Underneath your click handler
fetch('http://localhost:3000/sensors', {
method: 'POST',
headers: {
'content-type': 'application/json'
},
body: JSON.stringify({
sensorForest,
sensorLocation,
latitude,
longitude,
})
})
.then(function (results) {
return results.json()
})
.then(function (results) {
console.log('got results', results)
})
.catch(function (ex) {
console.error(ex)
})
Dependencies
npm init -y && npm i --save express body-parser
Server
const express = require('express')
const { json } = require('body-parser')
const app = express()
const PORT = process.env.PORT || 3000
app.post('/sensors', json(), (req, res, next) => {
const body = req.body
// ...save `body` to database
// use mysql, sequelize, or knex
res.send(body)
})
app.listen(PORT, () => console.info(`Server listening on port "${PORT}"`))