Commit 10 Nodejs Wordbucket : can add word to database

Nodejs : Wordbucket GitHub Link

Commit 10 Nodejs Wordbucket : can add word to database

Commits on May 1, 2018

Link GitHub Commit 10 Wordbucket Nodejs

config/config.json

- แก้ config ให้ชื่อ database เหมือนของ project wordbucket django แล้ว undo migrate และ migrate ใหม่

6  config/config.json

		@@ -3,21 +3,21 @@
		"username": "root",
		"password": null,
		"database": "database_development",
		- "host": "127.0.0.1",
		+ "host": "db.sqlite3",
		"dialect": "sqlite"
		},
		"test": {
		"username": "root",
		"password": null,
		"database": "database_test",
		- "host": "127.0.0.1",
		+ "host": "db.sqlite3",
		"dialect": "sqlite"
		},
		"production": {
		"username": "root",
		"password": null,
		"database": "database_test",
		- "host": "127.0.0.1",
		+ "host": "db.sqlite3",
		"dialect": "sqlite"
		}
		}

BIN  127.0.0.1 → db.sqlite3

index.js

- ทำการ import models มาใช้โดยใช้ชื่อ db และแยกเป็นของ Word และ Explanation
- เปลี่ยนจาก body-parser เก็บในตัวแปรเป็นใช้ database โดย create object โดย ใช้ Word ที่เรา import มา "Word.create({ word: req.body.word_input, });" ใน function addingNewWord (คือ add_word ใน django เพื่อนได้ใช้ชื่อนี้มา ผมเลยไม่ได้เปลี่ยนชื่อ)
- เปลี่ยนจากการส่งค่าตัวแปรโดยไปตรงไปยัง template เป็น query ค่าจากตาราง Word เข้าตัวแปรแล้วส่งไป render ใน template index.ejs

24  index.js

		@@ -1,24 +1,37 @@
		var express = require('express'); //require the just installed express app
		var app = express(); //then we call express
		+var db = require('./models');
		+var Word = db.Word;
		+var Explan = db.Explanation;
		var bodyParser = require("body-parser");
		app.use(bodyParser.urlencoded({ extended: true }));
		app.set('view engine', 'ejs'); //template
		-//the word array with initial placeholders for added word
		-var word = ["socks", "practise"];
		var complete = [];
		//function
		function addingNewWord (req, res) { //post route for adding new word
		- var newWord = req.body.newword;
		- word.push(newWord); //add the new word from the post route into the array
		+ //var newWord = req.body.word_input;
		+ //word.push(newWord);
		+ Word.create({
		+ word: req.body.word_input,
		+ }); //add the new word from the post route into the array
		res.redirect("/"); //after adding to the array go back to the root route
		}
		function renderDisplay(req, res) { //render the ejs and display added word
		+ Word.findAll({
		+ attributes: ['word'],
		+ raw : true
		+ }).then(function(query) {
		+ var word = [];
		+ query.forEach(function(item) {
		+ word.push(item.word);
		+ });
		res.render("index", { word: word, complete: complete });
		+ });
		}
		// call function
		@@ -48,5 +61,6 @@ app.post("/removeword", function(req, res) {
		app.get("/", renderDisplay)
		//the server is listening on port 3000 for connections
		app.listen(3000, function () {
		- console.log('Example app listening on port 3000!')
		+ //db.sequelize.sync();
		+ //console.log('Example app listening on port 3000!')
		});

models/explanation.js

- แก้ associate function ของ sequelize จากเดิม Word เพราไม่มี model. เลยมองไม่เห็น เพื่อให้ Explanation มี relation ต่อกันกับ Word

2  models/explanation.js

		@@ -8,7 +8,7 @@ module.exports = (sequelize, DataTypes) => {
		}, {});
		Explanation.associate = function(models) {
		// associations can be defined here
		- Explanation.belongsTo(Word, {foreignKey: 'word', targetKey: 'word'});
		+ Explanation.belongsTo(models.Word);
		};
		return Explanation;
		};

views/index.ejs

- แก้ให้มีช่องใส่ explanation แบบใน project wordbucket django(แต่ยังใช้ไม่ได้ใน commit นี้)

7  views/index.ejs

		@@ -11,12 +11,13 @@
		<h1> A Simple WordBucket App </h1>
		- <form action ="/addword" method="POST">
		- <input type="text" name="newword" placeholder="add new word">
		+ <form action ="/addword" method="POST">
		+ <input name="word_input" id="id_new_word" placeholder="Add new word" />
		+ <input name="explanation_input" id="id_new_eplanation" placeholder="Add explanation" />
		<button> Add Word </button>
		<h2> Added Word </h2>
		-
		+ <% word %>
		<% for( var i = 0; i < word.length; i++){ %>
		<li><input type="checkbox" name="check" value="<%= word[i] %>" /> <%= word[i] %> </li>