I was trying to implement a website where there is a driver and passenger(carpool).
So when a driver gives his details and clicks submit he goes to a URL (select) where he can choose the passenger which he wants.
I have written the following snippet:-
app.post('/passenger',function(req,res){
var user = new User({profile:{name:req.body.uname},
type:"passenger",
phone_no:req.body.contact,
origin:{city:req.body.pick},
destination:{city:req.body.drop}
// email:req.body.email,
// password:req.body.password
})
user.save();
res.redirect('/');
});
app.post('/driver',function(req,res){
var user = new User({profile:{name:req.body.uname},
type:"driver",
phone_no:req.body.contact,
origin:{city:req.body.pick},
destination:{city:req.body.drop}
// email:req.body.email,
// password:req.body.password
})
user.save();
console.log("heyyyy")
res.redirect('/select');
});
app.get('/select',function(req,res){
// User.find(function(err,type){
// res.render('select',{type:type});
// });
if (req.user){
console.log("U are inside")
if(req.user.type="passenger")
{
res.render('select');
}
else{
res.send("You ar not admin");
}
}
console.log("u are outside")
console.log(req.body.uname)
console.log()
});
The values are getting saved in the database but I am not able to retrieve the information (i.e. the list of all the passengers).
I am not able to process it (i.e. giving error).
Please help me out..
It is hard to pinpoint the source of the problem without knowing how you are configuring your express server anyway I have created an example based on your context.
app.js file:
var express = require('express');
var app = express();
var bodyParser = require('body-parser');
var engine = require('ejs-locals');
var querystring = require('querystring');
var drivers = [];
var passengers = [{name: 'Wilson'}, {name: 'Raul'}];
app.engine('ejs', engine);
app.set('view engine', 'ejs');
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended: true}));
app.get('/', function(req, res) {
res.render('driver');
});
app.post('/driver', function(req, res) {
var driver = {
name: req.body.name,
age: req.body.age
};
drivers.push(driver);
var data = {
driver: driver,
passengers: passengers
};
res.render('passengers', data);
});
app.get('/result', function(req, res) {
var data = {
driverName: '',
passengerNames: []
};
data.driverName = req.query.driverName;
data.passengerNames = data.passengerNames.concat(req.query.passengerNames);
res.render('result', data);
});
app.post('/api/passengers', function(req, res) {
var data = {
passengerNames: req.body.passengerNames,
driverName: req.body.driverName
};
var qs = querystring.stringify(data);
res.redirect('/result?' + qs);
});
app.listen(4040, function() {
console.log('server up and running at port 4040');
});
views/layout.ejs file:
<!doctype html>
<html>
<head>
<title>Drivers App</title>
</head>
<body>
<div id="app">
<%- body %>
</div>
<script>
document.addEventListener('DOMContentLoaded', function(e) {
var btnNext = document.getElementById('btnNext');
btnNext.onclick = function(e) {
var allPassengers = document.querySelectorAll('input[type=checkbox]');
var selectedPassengers = [].filter.call(allPassengers, function(p) {
return p.checked;
});
var passengerNames = [].map.call(selectedPassengers, function(p) {
return p.value;
});
var driverName = document.getElementById('driverName').innerHTML;
var r = new XMLHttpRequest();
r.open('POST', '/api/passengers');
r.setRequestHeader('Content-type', 'application/json;charset=UTF-8');
r.onreadystatechange = function() {
if (r.readyState != 4 || r.status != 200) return;
document.getElementById('app').innerHTML = r.responseText;
};
r.send(JSON.stringify({
passengerNames: passengerNames,
driverName: driverName
}));
};
});
</script>
</body>
</html>
views/driver.ejs file:
<% layout('layout.ejs') -%>
<h1> Driver </h1>
<form method="POST" action="/driver">
<label>Name:</label>
<input id="name" name="name" type="text"/>
<br />
<label>Age:</label>
<input id="age" name="age" type="text"/>
<br />
<br />
<input type="submit" value="Submit" />
</form>
`views/passengers.ejs`
<% layout('layout') -%>
<h1> Driver </h1>
<p>Name: <span id="driverName"><%= driver.name%></span></p>
<h1> Passengers </h1>
<% passengers.forEach(function(p) {%>
<input type="checkbox" value=<%= p.name %> /> <%= p.name %> <br />
<% }); %>
<br />
<button id="btnNext">Next</button>
views/result.ejs file:
<h1>Success!</h1>
<h2>Driver</h2>
<h3><%= driverName %></h3>
<br />
<h2>Selected Passengers</h2>
<% passengerNames.forEach(function(name) { %>
<h3><%= name%></h3>
<% }); %>
Related
Javascript code
require('dotenv').config();
const express = require("express");
const path = require("path");
const crypto = require("crypto");
const multer = require("multer");
const {GridFsStorage} = require('multer-gridfs-storage');
const Grid = require("gridfs-stream");
const methodOverride = require("method-override");
const bodyParser = require("body-parser");
const ejs = require("ejs");
const mongoose = require("mongoose");
const session = require("express-session");
const passport = require("passport");
const passportLocalMongoose = require("passport-local-mongoose");
const GoogleStrategy = require("passport-google-oauth20").Strategy;
const findOrCreate = require("mongoose-findorcreate")
const app = express();
app.set('view engine', 'ejs');
app.use(bodyParser.json());
app.use(methodOverride('_method'));
app.use(bodyParser.urlencoded({extended: true}));
app.use(express.static("public"));
const mongoURI = 'mongodb://127.0.0.1:27017/userDB';
const conn = mongoose.createConnection(mongoURI);
//mongoose.connect("mongodb://127.0.0.1:27017/userDB", {useNewUrlParser: true});
let posts = [];
let gfs, gridfsBucket;
conn.once("open",() => {
gridfsBucket = new mongoose.mongo.GridFSBucket(conn.db, {
bucketName: "upload"
});
gfs = Grid(conn.db, mongoose.mongo);
gfs.collection("upload");
});
const storage = new GridFsStorage({
url: mongoURI,
file: (req, file) => {
return new Promise((resolve, reject) => {
crypto.randomBytes(16, (err, buf) => {
if(err) {
return reject(err);
}
const filename = buf.toString("hex") + path.extname(file.originalname);
const fileInfo = {
filename: filename,
bucketName: "upload"
};
resolve(fileInfo);
});
});
}
});
const upload = multer({storage});
app.get("/", function(req, res){
res.render("review");
});
app.post("/review", (req, res) => {
const post = {
name: req.body.userName,
hotel: req.body.hotelName,
address: req.body.hotelAddress,
star: req.body.rating,
userexperience: req.body.experience
};
posts.push(post);
//res.json({ file: req.file});
res.redirect("/content");
});
app.get("/content", function(req, res){
gfs.files.find().toArray((err, files) => {
// Check if files
if (!files || files.length === 0) {
res.render("content", {files: false});
} else {
files.map(file => {
if(file.contentType === "image/jpeg" || file.contentType === "image/png"){
file.isImage = true;
}else{
file.isImage = false;
}
});
res.render("content", {files: files});
}
});
});
app.get("/content", function(req, res){
res.render("content", {posts: posts});
});
//#route GET /files
//#desc Display all files in JSON
app.get("/files", (req, res) => {
gfs.files.find().toArray((err, files) => {
// Check if files
if (!files || files.length === 0) {
return res.status(404).json({
err: "No files exist"
});
}
// Files exist
return res.json(files);
});
});
app.get("/files/:filename", (req, res) => {
gfs.files.findOne({ filename: req.params.filename }, (err, file) => {
// Check if file
if (!file || file.length === 0) {
return res.status(404).json({
err: "No file exists"
});
}
// File exists
return res.json(file);
});
});
// #route GET /image/:filename
// #desc Display Image
app.get("/image/:filename", (req, res) => {
gfs.files.findOne({ filename: req.params.filename }, (err, file) => {
// Check if file
if (!file || file.length === 0) {
return res.status(404).json({
err: "No file exists"
});
}
// Check if image
if (file.contentType === "image/jpeg" || file.contentType === "image/png") {
// Read output to browser
const readstream = gridfsBucket.openDownloadStreamByName(file.filename);
readstream.pipe(res);
} else {
res.status(404).json({
err: "Not an image"
});
}
});
});
// Server setup
app.listen(3000, function(req, res) {
console.log("Connected on port:3000");
});
HTML Code where the review should be displayed - this is content page
<section class="review-content">
<% posts.forEach(function(post){ %>
<h6><b>User Name:</b><%=post.name%></h6>
<h5><b>Hotel Name:</b><%=post.hotel%></h5>
<p><b>Hotel Address:</b><%=post.address%></p>
<%if(post.star == 5){%>
<p><b>Rating: </b>⭐⭐⭐⭐⭐ - Luxury</p>
<%}%>
<%if(post.star == 4){%>
<p><b>Rating: </b>⭐⭐⭐⭐ - First Class</p>
<%}%>
<%if(post.star == 3){%>
<p><b>Rating: </b>⭐⭐⭐ - Comfort</p>
<%}%>
<%if(post.star == 2){%>
<p><b>Rating: </b>⭐⭐ - Standard</p>
<%}%>
<%if(post.star == 1){%>
<p><b>Rating: </b>⭐ - Basic</p>
<%}%>
<% if(files){ %>
<% files.forEach(function(file) { %>
<% if(file.isImage) { %>
<img src="image/<%= file.filename %>" alt="">
<% } %>
<% }) %>
<% } else { %>
<p>No files to show</p>
<% } %
<p><b>User experience:</b><%=post.userexperience%></p>
<%});%>
HTML Code where the review should be displayed - this is review page
<form class="" action="/review" method="post" enctype="application/x-www-form-urlencoded" enctype="multipart/form-data" action="submit.php">
<section class="review-section-height">
<section class="review-section">
<div class="review-section-div">
<div class="user-name-review">
<label for="hotel-name">User Name:</label>
<input type="text" id="user-id-name" name="userName" placeholder="User Name" size="40"><br>
</div>
<div class="review-hotel-name">
<label for="hotel-name">Hotel Name:</label>
<input type="text" id="hotel-id-name" name="hotelName" placeholder="Hotel Name" size="40"><br>
</div>
<div class="hotel-address-div">
<label for="hotel-address-name">Hotel Address:</label>
<input type="text" id="hotel-id-address" name="hotelAddress" placeholder="Hotel Address" size="40"><br>
</div>
</div>
</section>
<section class="star-rating-section">
<div class="food-experience-div">
<h5>Rate your experience in hotel:</h5>
<div class="rating">
<input type="radio" name="rating" value="5" id="5"><label for="5">☆</label>
<input type="radio" name="rating" value="4" id="4"><label for="4">☆</label>
<input type="radio" name="rating" value="3" id="3"><label for="3">☆</label>
<input type="radio" name="rating" value="2" id="2"><label for="2">☆</label>
<input type="radio" name="rating" value="1" id="1"><label for="1">☆</label>
</div>
</div>
</section>
</section>
<div class="container">
<div class="wrapper">
<div class="image">
<img width="50%" height="450vh" src="" alt="">
</div>
<div class="content">
<div class="icon">
<i class="fas fa-cloud-upload-alt"></i>
</div>
<div class="text">
No file chosen, yet!
</div>
</div>
<div id="cancel-btn">
<i class="fas fa-times"></i>
</div>
<div class="file-name">
File name here
</div>
</div>
<input name="file" id="default-btnn" type="file" >
</div>
<section class="overall-user-review">
<div class="overall-user-review-div">
<label for="experience-write-box">Write your experience:</label><br>
<textarea class="experience-textarea" name="experience" rows="10" cols="47" placeholder="Elaborate your experince in the hotel..."></textarea>
</div>
</section>
<script>
const wrapper = document.querySelector(".wrapper");
const fileName = document.querySelector(".file-name");
const defaultBtn = document.querySelector("#default-btnn");
const customBtn = document.querySelector("#custom-btn");
const cancelBtn = document.querySelector("#cancel-btn i");
const img = document.querySelector("img");
let regExp = /[0-9a-zA-Z\^\&\'\#\{\}\[\]\,\$\=\!\-\#\(\)\.\%\+\~\_ ]+$/;
function defaultBtnActive() {
defaultBtnn.click();
}
defaultBtn.addEventListener("change", function() {
const file = this.files[0];
if (file) {
const reader = new FileReader();
reader.onload = function() {
const result = reader.result;
img.src = result;
wrapper.classList.add("active");
}
cancelBtn.addEventListener("click", function() {
img.src = "";
wrapper.classList.remove("active");
})
reader.readAsDataURL(file);
}
if (this.value) {
let valueStore = this.value.match(regExp);
fileName.textContent = valueStore;
}
});
</script>
[Output at hyper terminal]
[Output at localhost at chrome]
Looking forward if someone can help me with this...
I need both image and text to be rendered on the screen
I am stuck with this problem for several days...
It's saying posts not defined... at eval... and so on...
Hoping a positive reply from developers...
Thank you for your help...
I'm building a NodeJS Express & MongoDB Web application.
However, since I'm trying to use some AJAX feature to load and display comments on the post page, I'm getting an issue and the "post-detail" page is not displaying.
My code seems fine though. So, I'm not able to find where is the mistake.
When I check this error message:
Failed to load resource: the server responded with a status of 500
(Internal Server Error)
Is there someone who can check my code and let me know what's wrong with it?
I think there is a problem in the route or the paths?
app.js:
const path = require('path');
const express = require('express');
const db = require('./data/database');
const adminRoutes = require('./routes/admin/blog');
const defaultRoutes = require('./routes/home/default');
const postsRoutes = require('./routes/home/posts');
const quotationsRoutes = require('./routes/home/quotations');
const contactsRoutes = require('./routes/home/contacts');
const app = express();
app.set('views', [
path.join(__dirname, 'views/home'),
path.join(__dirname, 'views/admin')
]);
app.set('view engine', 'ejs');
app.use(express.static('public'));
app.use('/public/admin/images', express.static('public/admin/images'));
app.use(express.urlencoded({ extended: true }));
app.use('/', adminRoutes);
app.use('/', defaultRoutes);
app.use('/', postsRoutes);
app.use('/', quotationsRoutes);
app.use('/', contactsRoutes);
app.use(function (req, res) {
res.status(404).render('404');
});
app.use(function (error, req, res, next) {
res.status(500).render('500');
});
db.connectToDatabase().then(function () {
app.listen(3000);
});
routes\home\posts.js:
const express = require('express');
const mongodb = require('mongodb');
// const uuid = require('uuid');
const db = require('../../data/database');
const ObjectId = mongodb.ObjectId;
const router = express.Router();
router.get('/blog', async function (req, res) {
const posts = await db
.getDb()
.collection('posts')
.find({})
.project({ title: 1, summary: 1, 'author.name': 1, imagePath: 1 })
.toArray();
res.render('posts', { posts: posts });
});
router.get('/blog/:id', async function (req, res, next) {
let postId = req.params.id;
try {
postId = new ObjectId(postId);
} catch (error) {
return res.status(404).render('404');
// return next(error);
}
const post = await db
.getDb()
.collection('posts')
.findOne({ _id: postId }, { summary: 0 });
if (!post) {
return res.status(404).render('404');
}
post.humanReadableDate = post.date.toLocaleDateString('en-US', {
weekday: 'long',
year: 'numeric',
month: 'long',
day: 'numeric'
});
post.date = post.date.toISOString();
res.render('post-detail', { post: post });
});
router.get('/blog/:id/comments', async function (req, res) {
const postId = new ObjectId(req.params.id);
const comments = await db
.getDb()
.collection('comments')
.find({ postId: postId })
.toArray();
res.json(comments);
});
router.post('/blog/:id/comments', async function (req, res) {
const postId = new ObjectId(req.params.id);
const newComment = {
postId: postId,
title: req.body.title,
text: req.body.text
};
await db.getDb().collection('comments').insertOne(newComment);
res.redirect('/blog/' + req.params.id);
});
module.exports = router;
views\home\post-detail.ejs:
<!DOCTYPE html>
<html lang="en">
<head>
<%- include('../admin/includes/head', { title: 'Post title' }) %>
<link rel="stylesheet" href="/admin/styles/posts.css" />
<link rel="stylesheet" href="/admin/styles/forms.css" />
<script src="/home/scripts/comments.js" defer></script>
</head>
<body>
<%- include('../admin/includes/header') %>
<main id="post-detail">
<article class="post-item">
<img src="/<%= post.imagePath %>" alt="<%= post.title %>" />
<h1><%= post.title %></h1>
<section id="post-meta">
<address>
<a href="mailto:<%= post.author.email %>"
><%= post.author.name %></a
>
</address>
|
<time datetime="<%= post.date %>"><%= post.humanReadableDate %></time>
</section>
<hr />
<section>
<p id="body"><%= post.body %></p>
</section>
</article>
<section id="comments">
<% if (!comments) { %>
<p>
This post might have comments. You can load them if you want to view
them.
</p>
<button
id="load-comments-btn"
class="btn btn-alt"
data-postid="<%= post._id %>"
>
Load Comments
</button>
<% } else if (comments.length === 0) { %>
<p>No comments found.</p>
<% } else { %>
<ol>
<% for (const comment of comments) { %>
<li><%- include('includes/comment-item', { comment: comment }) %></li>
<% } %>
</ol>
<% } %>
</section>
<section id="comments-form">
<h2>Leave a comment</h2>
<form action="/posts/<%= post._id %>/comments" method="POST">
<div class="form-control">
<label for="title">Comment title</label>
<input type="text" id="title" name="title" required />
</div>
<div class="form-control">
<label for="text">Your comment</label>
<textarea name="text" id="text" rows="3" required></textarea>
</div>
<button class="btn">Save Comment</button>
</form>
</section>
</main>
</body>
</html>
views\home\includes\comments\comment-item.ejs:
<article class="comment-item">
<h2><%= comment.title %></h2>
<p><%= comment.text %></p>
</article>
public\home\scripts\comments.js:
const loadCommentsBtnElement = document.getElementById('load-comments-btn');
async function fetchCommentsForPost() {
const postId = loadCommentsBtnElement.dataset.postid;
const response = await fetch(`/blog/${postId}/comments`);
const responseData = await response.json();
console.log(responseData);
}
loadCommentsBtnElement.addEventListener('click', fetchCommentsForPost);
I have noticed that when I remove the code logic for displaying comments on "post-detail.ejs", the page displays and the form for adding comments as well.
Edit: I added console.error(error) before res.status(500).render('500') and I get the following error message:
ReferenceError:
C:\Users\DELL\Desktop\node-com4muz-filedata-database\views\home\post-detail.ejs:30
28|
29|
30| <% if (!comments) { %>
31|
32| This post might have comments. You can load them if you want to view
33| them.
comments is not defined
at eval ("C:\Users\DELL\Desktop\node-com4muz-filedata-database\views\home\post-detail.ejs":40:8)
at post-detail (C:\Users\DELL\Desktop\node-com4muz-filedata-database\node_modules\ejs\lib\ejs.js:703:17)
at tryHandleCache (C:\Users\DELL\Desktop\node-com4muz-filedata-database\node_modules\ejs\lib\ejs.js:274:36)
at View.exports.renderFile [as engine] (C:\Users\DELL\Desktop\node-com4muz-filedata-database\node_modules\ejs\lib\ejs.js:491:10)
at View.render (C:\Users\DELL\Desktop\node-com4muz-filedata-database\node_modules\express\lib\view.js:135:8)
at tryRender (C:\Users\DELL\Desktop\node-com4muz-filedata-database\node_modules\express\lib\application.js:657:10)
at Function.render (C:\Users\DELL\Desktop\node-com4muz-filedata-database\node_modules\express\lib\application.js:609:3)
at ServerResponse.render (C:\Users\DELL\Desktop\node-com4muz-filedata-database\node_modules\express\lib\response.js:1039:7)
at C:\Users\DELL\Desktop\node-com4muz-filedata-database\routes\home\posts.js:49:7
at processTicksAndRejections (node:internal/process/task_queues:96:5) { path:
'C:\Users\DELL\Desktop\node-com4muz-filedata-database\views\home\post-detail.ejs'
}
I fixed the issue.
On views\home\post-detail.ejs on line 49, I replaced:
res.render('post-detail', { post: post });
by:
res.render('post-detail', { post: post, comments: null });
I have an Index Site (EJS) that reads an array into a select form.
index.ejs
<html>
<head>
</head>
<body>
<center>
<form action="/dates" method="POST">
<b>INDEX:</b>
<select id="index" name="index" onchange="this.form.submit()">
<option id="0"> Please choose Index </option>
<% collectionnames.map(item=> { %>
<option id="<%= item._id%>"> <%= item %> </option>
<% }) %>
</select>
<br>
</form>
</body>
</html>
When the Index is chosen it posts the index value to /dates in app.js
app.js
var express = require('express');
var MongoClient = require('mongodb').MongoClient;
var app = express();
var bodyParser = require('body-parser');
app.set('view engine', 'ejs');
app.use(bodyParser.urlencoded({ extended: false }));
app.use( bodyParser.json() );
app.use(express.static('public'));
app.get('/', function(req, res) {
var collectionnames = [];
MongoClient.connect('mongodb://localhost:27017', { useNewUrlParser: true }, function (err, client) {
if (err) {
console.log("Error");
} else {
console.log("Connected to MongoDB to get collections...");
}
var db = client.db('my-mongodb');
db.listCollections().toArray(function (err,collections) {
collections.forEach(function(collection){
var elem = new Object();
if (collection.name !== "system.indexes"){
//console.log(collection.name);
elem = collection.name;
collectionnames.push(elem);
};
});
console.log("got collections...")
res.render('index.ejs' , { collectionnames: collectionnames } );
});
});
});
app.post('/dates', function (req, res) {
const postBody = req.body;
index = postBody.index;
var dates = [];
MongoClient.connect('mongodb://localhost:27017', { useNewUrlParser: true }, function (err, client) {
if (err) {
console.log("Error");
} else {
console.log("Connected to fetch results");
}
var db = client.db('my-mongodb');
db.collection (postBody.index, function(err, values){
values.find().sort({VALUETIME:+1}).toArray( function (err,results){
results.forEach(function(result){
dates.push(result.VALUEDATE);
//console.log(elem)
});
console.log("got results...")
function onlyUnique(value, index, self) {
return self.indexOf(value) === index;
}
var unique = dates.filter( onlyUnique );
console.log(unique);
res.send(unique);
});
});
});
});
How can i just pass the array "unique" back to my index.ejs to process it in another select form? What happens right now (with res.send(unique)) is that i receive a list in the browser with the array values:
0 "2018-09-01"
1 "2018-09-02"
2 "2018-09-05"
3 "2018-09-03"
4 "2018-09-04"
5 "2018-08-31"
More specific: how to retrieve the array/values back to my index.ejs and do something with it?
Thanks.
You can use for loop on collectionnames like:
//Assuming your `collectionnames = ['2018-09-01', '2018-09-02', '2018-09-03', '2018-09-04']`
<select id="selectId">
<option value="">Select</option>
<% if (collectionnames.length) { %>
<% for (var i = 0; i < collectionnames.length; i++) { %>
<option value="<%=collectionnames[i]%>"><%=collectionnames[i] %> </option>
<% } %>
<% } %>
</select>
EDIT: How to send data back to same ejs page?
In order to use same ejs page you need to use Single Page Application approach. For single-page you need to submit data using Ajax call and not form-submit. Check out this repository and various example of how to implement single-page application.
Also if you don't want to go into single-page application just change your api response, render same page with new data:
app.post('/dates', function (req, res) {
const postBody = req.body;
index = postBody.index;
var dates = [];
MongoClient.connect('mongodb://localhost:27017', { useNewUrlParser: true }, function (err, client) {
if (err) {
console.log("Error");
} else {
console.log("Connected to fetch results");
}
var db = client.db('my-mongodb');
db.collection (postBody.index, function(err, values){
values.find().sort({VALUETIME:+1}).toArray( function (err,results){
results.forEach(function(result){
dates.push(result.VALUEDATE);
//console.log(elem)
});
console.log("got results...")
function onlyUnique(value, index, self) {
return self.indexOf(value) === index;
}
var unique = dates.filter( onlyUnique );
console.log(unique);
// Change here
res.render('index.ejs' , { collectionnames: unique });
});
});
});
});
I am writing a Node.js script and having problems with integration of a "login" form. I can do it using a static HTML page, however using a dynamic ".ejs" page is causing problems...my form fields are reported as "undefined".
var helmet = require('helmet');
var bodyParser = require('body-parser')
//var cookieParser = require('cookie-parser');
//var csurf = require('csurf');
//Use Express module
var express = require('express');
var app = express();
var io = require("socket.io"); //web socket external module
var easyrtc = require("easyrtc"); //EasyRTC external module
app.use(helmet());
//Statically serve files in these directories
app.use("/js", express.static(__dirname + '/easyrtc/js'));
app.use("/images", express.static(__dirname + '/easyrtc/images'));
app.use("/css", express.static(__dirname + '/easyrtc/css'));
//For my homepage
app.set('views', __dirname + '/views');
app.set('view engine', 'ejs') //set the view engine to ejs
app.use("/css", express.static(__dirname + '/public/css'));
app.use("/img", express.static(__dirname + '/public/img'));
//Needed to parse form data
app.use(bodyParser());
//var csrfProtection = csurf({ cookie: true });
//parse cookies...we need this because "cookie" is true in csrfProtection
//app.use(cookieParser());
//global variables
var loggedIn = false,
password = 'password';
var title = 'This is a heading';
var message = 'Steve is NOT available';
var presenter = 'Username'
var passport = 'Password'
//Temporary home page
app.get('/', function (req, res) {
var site = req.hostname; //example returns "localhost"
var splits = site.split("."); //"split" on "periods"
console.log("site is: " + site);
console.log("first split is: " + splits[0]);
console.log("second split is: " + splits[1]);
if (loggedIn == true) {
res.render('index', {title: 'available', message: 'Steve is available...'});
console.log("homepage -logged in");
}
else {
console.log("homepage -not logged in");
res.render('login', {
usr: {},
pword: {},
data: {},
errors: {}//,
// csrfToken: req.csrfToken()
});
}
});
//Respond to POST from login form
app.post('/login', function (req, res) {
console.log('post to /login');
var usr_STR = String(req.body.usr)
var pass_STR = String(req.body.pword)
console.log("req.body.usr: " + req.body.usr + " req.body.pword: " + req.body.pword);
console.log("usr_STR: " + usr_STR + " pass_STR: " + pass_STR);
if (loggedIn == true) {
res.send("Already logged in.");
}
else {
console.log("Posted data:" + JSON.stringify(req.body));
console.log("req.body.pw:" + req.body.pw);
console.log("req.body.pword:" + req.body.pword);
console.log("req.body.usr:" + req.body.usr);
if (req.body.pword == password) {
loggedIn = true;
res.send("You are logged in.");
console.log("Logged in");
// Start EasyRTC server
var easyrtcServer = easyrtc.listen(app, socketServer);
}
else {
res.render('login', {
data: req.body, //{ presenter, passport }
errors: {
presenter: {
msg: 'Your username does not look right'
},
passport: {
msg: 'Your password does not look right'
}
}//,
// csrfToken: req.csrfToken()
});
}
}
});
//Error Handling
app.use((req, res, next) => {
res.status(404).send("Sorry can't find that!")
});
app.use((err, req, res, next) => {
console.error(err.stack)
res.status(500).send('Something broke!')
});
// Start server on port 8080
var webServer = app.listen(8080);
console.log('Listening on port ' + 80);
// Start Socket.io so it attaches itself to Express server
var socketServer = io.listen(webServer);
I am seeing my console report back the following to me:
Posted data:{}
req.body.pword:undefined
req.body.usr:undefined
I am still somewhat new to working with Node.Js and obviously I'm having some confusion about how to pass the parameters from my (.ejs) form to my route handler within the req.body ...any advice would be GREATLY appreciated, I'm really struggling trying to figure this out. Thank you in advance. Regards.
NOTE: As can be seen in my code, I removed the references to "csurf" and "cookieparser" since in my earlier runs this information WAS returned within the "req.body"...so I thought they were somehow interfering...however it seems there is something else going on.
Here is the associated HTML for the login form:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="form-header">
<% if (Object.keys(errors).length === 0) { %>
<h2>Login Form</h2>
<% } else { %>
<h2 class="errors-heading">Oops, please correct the following:</h2>
<ul class="errors-list">
<% Object.values(errors).forEach(error => { %>
<li><%= error.msg %></li>
<% }) %>
</ul>
<% } %>
</div>
<form method="post" action="/login" novalidate>
<div class="imgcontainer">
<img src="img_avatar2.png" alt="Avatar" class="avatar">
</div>
<div class="container">
<label for="usr"><b>Username</b></label>
<input type="text" placeholder=<%= data.presenter %> name="usr" required>
<% if (errors.presenter) { %>
<div class="error"><%= errors.presenter.msg %></div>
<% } %>
<label for="pword"><b>Password</b></label>
<input type="password" placeholder=<%= data.passport %> name="pword" required>
<% if (errors.passport) { %>
<div class="error"><%= errors.passport.msg %></div>
<% } %>
<button type="submit">Login</button>
</div>
<div class="container" style="background-color:#f1f1f1">
<button type="button" class="cancelbtn">Cancel</button>
<span class="psw">Forgot password?</span>
</div>
</form>
</body>
</html>
You need to use body-parser, just importing it won't work out.
Also checkout body-parser docs
// configure the app to use bodyParser()
// parse urlencoded data type as JSON
app.use(bodyParser.urlencoded({
extended: true
}));
// parse various different custom JSON types as JSON
app.use(bodyParser.json({ type: 'application/*+json' }));
// parse some custom thing into a Buffer
app.use(bodyParser.raw({ type: 'application/vnd.custom-type' }));
// parse an HTML body into a string
app.use(bodyParser.text({ type: 'text/html' }));
I am trying to use CKEDITOR for my express app, but I'm running into an issue where I try to use the list element tags, but instead of displaying my content with the appropriate HTML format, I am shown the tags. I recently configured the editor to remove the <p> tags from appearing, but it appears that there is something else I need to add to get tags appearing in the correct HTML format.
UPDATE: Attached is a screenshot of what the source code looks like for those <ul> and <li> elements.
blogpost-create.ejs:
<html>
<head>
<% include ../partials/head %>
<script src="//cdn.ckeditor.com/4.4.5/standard/ckeditor.js"></script>
</head>
<body>
<header>
<% include ../partials/header %>
</header>
<div class="grid grid-pad">
<div class="col-1-1">
<h1>Blog Create</h1>
<form action="/admin/posts/create" method="POST">
Title: <input type="text" name="title"><br>
Author:
<select name="author">
<option value="Author">Author</option>
</select><br>
Category:
<select name="category">
<option value="Analytics/SEO/SEM">Analytics/SEO/SEM</option>
<option value="Advice">Advice</option>
<option value="Programming">Programming</option>
<option value="Thoughts">Thoughts</option>
</select><br>
Tagline: <input type="text" maxlength="160" name="tagline"><br>
Content:<br>
<textarea name="content" id="blog-editor" rows="10" cols="80">
</textarea><br>
Tags: <input type="text" name="tags"><br>
<input type="submit" value="Submit">
</form>
</div>
</div>
<script>
// Replace the <textarea id="blog-editor"> with a CKEditor
// instance, using default configuration.
CKEDITOR.replace( 'blog-editor' );
CKEDITOR.config.enterMode = 2;
</script>
<footer>
<% include ../partials/footer %>
</footer>
</body>
</html>
routes.js:
var express = require('express');
var router = express.Router();
var blogDB = require('../config/blogDB.js');
var Blogpost = require('./models/blogModel.js');
var paginate = require('express-paginate');
//index
router.use(paginate.middleware(10, 50));
router.route('/')
// START GET method
.get(function(req, res, next) {
Blogpost.paginate({}, req.query.page, req.query.limit, function(err, pageCount, blogpost, itemCount) {
if (err) return next(err)
if (err)
res.send(err);
function dateDisplayed(timestamp) {
var date = new Date(timestamp || Date.now() );
return (date.getMonth() + 1 + '/' + date.getDate() + '/' + date.getFullYear());
}
blogpost.title = req.body.title; // get the blog title
blogpost.author = req.body.author; // get the author name
blogpost.tagline = req.body.tagline; // get tagline
blogpost.content = req.body.content; // get the blog content
blogpost.category = req.body.category; // get the category
blogpost.tags = req.body.tags; // get the tags
blogpost.date = dateDisplayed(req.body.date);
console.log(blogpost.date);
res.format({
html: function() {
res.render('pages/index', {
blogpost: blogpost,
pageCount: pageCount,
itemCount: itemCount
})
},
json: function() {
res.json({
object: 'blogpost',
has_more: paginate.hasNextPages(req)(pageCount),
data: blogpost
})
}
}); // END res.format(html, json)
}); // END Blogpost.paginate
}); // END GET method
router.route('/admin/posts/create')
// START POST method
.post(function(req, res) {
console.log("New instance");
var blogpost = new Blogpost(); // create a new instance of a Blogpost model
blogpost.title = req.body.title; // set the blog title
blogpost.blogUrl = blogpost.title.toLowerCase().replace(/\s+/g,"-");
blogpost.author = req.body.author; // set the author name
blogpost.tagline = req.body.tagline; // set the tagline
blogpost.content = req.body.content; // set the blog content
blogpost.category = req.body.category; // set the category
blogpost.tags = req.body.tags; // set the tags
//Save Blog Post
blogpost.save(function(err) {
if (err)
res.send(err);
res.redirect(303, '/'); //NEEDS TO BE CHANGED
});
}) // END POST method
.get(function(req, res) {
res.render('pages/blogpost-create');
});
function getSearchCriteria(params) {
return {
blogUrl: params.blogpost_blogUrl
};
}
router.route('/blog/:blogpost_blogUrl')
.get(function (req, res) {
var searchCriteria = getSearchCriteria(req.params);
Blogpost.findOne(searchCriteria, function (err, blogpost) {
if (err)
res.send(err);
res.render('pages/blogpost', {
blogpost: blogpost
})
})
})
.put(function (req, res) {
var searchCriteria = getSearchCriteria(req.params);
var updated = getBlogpostUpdate(req.body)
Blogpost.findOneAndUpdate(searchCriteria, updated, function (err, updated) {
if (err)
res.send(err);
res.json({ message: 'Blog updated.' });
});
})
.delete(function (req, res) {
var searchCriteria = getSearchCriteria(req.params);
Blogpost.findOneAndRemove(searchCriteria, function (err, removed) {
if (err)
res.send(err);
res.json({ message: 'Successfully deleted' });
});
});
module.exports = router;
blogpost.ejs:
<html>
<head>
<% include ../partials/head %>
</head>
<body>
<header>
<% include ../partials/header %>
</header>
<div class="grid">
<div class="col-1-1">
<div class="blog-content">
<h1><%= blogpost.title %></h1>
<p><%= blogpost.content %></p>
</div>
</div>
</div>
<footer>
<% include ../partials/footer %>
</footer>
</body>
</html>