This is the third question I have posted in this site in regards to my forum app and I'm still having an issue with posting data to the html. The object is to post new comments to the HTML and have them displayed there. I have received numerous of suggestions and I have been struggling too long trying to find a solution.
In the comments table, each comment has a person_created, input, and topic_id (which references the id from the topics table). Right now the topic_id is being undefined and I have no idea how to define it. Only the sample data from the schema is being displayed right now at the current being.
forum.js
var express = require('express');
var sqlite3 = require('sqlite3');
var fs = require('fs');
var Mustache = require ('mustache');
var morgan = require('morgan');
var bodyParser = require('body-parser');
var methodOverride = require('method-override');
var db = new sqlite3.Database('./forum.db');
var app = express();
app.use(morgan('dev'));
app.use(bodyParser.urlencoded({extended: true}));
app.use(methodOverride('_method'));
app.get('/', function(req, res){
res.send(fs.readFileSync('./views/topics/index.html', 'utf8'));
});
app.get('/topics', function(req,res) {
var template = fs.readFileSync('./views/topics/topics.html', 'utf8');
db.all("SELECT * FROM topics;", function(err, topics){
var html = Mustache.render(template, {listoftopics: topics});
res.send(html);
});
});
app.get('/topics/new', function(req, res){
res.send(fs.readFileSync('./views/topics/new.html', 'utf8'));
});
app.post('/topics/new', function(req, res){
console.log(req.body);
db.run("INSERT INTO topics(title, creator, date, body) VALUES ('" + req.body.title + "','" + req.body.creator + "','" + req.body.date + "','" + req.body.body + "')");
res.redirect("/topics")
});
app.get('/topics/:id/comments/new', function(req, res)
{
res.locals.id = req.params.id
console.log(res.locals.id)
var template = fs.readFileSync('./views/comments/newComment.html', 'utf8')
db.all("SELECT * FROM topics;", function(err, topics) {
var html = Mustache.render(template, {form:topics})
res.send(html);
});
});
app.post('/topics/:id/comments/new', function(req, res){
var id = req.params.id
console.log(id)
db.run("INSERT INTO comments (person_created, input, topic_id) VALUES ('" + req.body.person_created + "','" + req.body.input + "', '" + req.body.topic_id + "')", function(error, topic_id){
if (error) {
console.log('Error')
}
else {
console.log('Success')
}
console.log(req.body)
});
res.redirect("/topics/" + id + "/comments")
});
app.get('/topics/:id/comments', function(req, res){
var id = req.params.id;
console.log(id)
db.all("SELECT * FROM topics WHERE id = " + id + ";", {}, function(err, topics){
console.log(topics)
db.all("SELECT * FROM comments WHERE topic_id = " + id + ";", {}, function(err, comments){
fs.readFile('./views/topics/show.html', 'utf8', function(err, html){
var renderedHTML = Mustache.render(html, {body:topics, person_created:comments, input:comments, form:topics});
res.send(renderedHTML);
console.log(comments);
});
});
});
});
app.listen(3000, function(){
console.log("LISTENING!");
});
schema.js
var sqlite3 = require ('sqlite3');
var db = new sqlite3.Database('./forum.db');
db.serialize(function(){
db.run("CREATE TABLE topics(id integer primary key AUTOINCREMENT, title varchar, creator varchar, date varchar, body varchar);")
db.run("CREATE TABLE comments(person_created varchar, input varchar, topic_id integer, FOREIGN KEY (topic_id) references topics(id));")
db.parallelize(function(){
db.run("INSERT INTO topics(title, creator, date, body) VALUES ('Top R&B Hits of the 80s', 'Michael', '4/15/15', 'Please share some of your favorite R&B Hits from the decade!' );")
db.run("INSERT INTO comments(person_created, input, topic_id) VALUES ('Sheila', 'Billie Jean by Michael Jackson', 1);")
db.run("INSERT INTO comments(person_created, input, topic_id) VALUES ('George ', 'Get Outta of My Dreams by Billy Ocean', 1); ")
})
})
newComment.html
<!DOCTYPE html>
<html lang='en'>
<head>
<style type="text/css">
body{
background-color: gray;
}
</style>
<meta charset='UTF-8'>
<title>Create New Comment</title>
</head>
<body>
{{#form}}
<form action="/topics/{{id}}/comments/new" method="POST">
{{/form}}
<center>
<label>
Name:
<br />
<input type="text" name="person_created" rows="10" cols="50" />
</label>
<br />
<label>
Comment:
<br />
<textarea type="text" name="input" >
</textarea>
</label>
<br />
<input type='submit' value='Submit' />
</center>
</form>
</body>
</html>
