updated forms to koa

210CT-1819OCTJAN · Jan 2, 2019 · 56cbd014bc4e477f3416a47a45f91574a677aaf4 · 56cbd01
1 parent b75b876
commit 56cbd014bc4e477f3416a47a45f91574a677aaf4
Show file tree

Hide file tree

Showing 23 changed files with 505 additions and 150 deletions.
diff --git a/08 Forms.md b/08 Forms.md
diff --git a/exercises/02_html/template.html b/exercises/02_html/template.html
@@ -10,4 +10,4 @@
 	<body>
 
 	</body>
-</html>
+</html>
diff --git a/exercises/07_templating/02_bookshop/index.js b/exercises/07_templating/02_bookshop/index.js
@@ -1,7 +1,5 @@
 #!/usr/bin/env node
 
-'use strict'
-
 const Koa = require('koa')
 const Router = require('koa-router')
 const bodyParser = require('koa-bodyparser')

diff --git a/exercises/08_forms/01_simple/express.js b/exercises/08_forms/01_simple/express.js
@@ -0,0 +1,57 @@
+
+'use strict'
+
+const express = require('express')
+const bodyParser = require('body-parser')
+const app = express()
+app.use(bodyParser.urlencoded({ extended: true }))
+app.use(express.static('public'))
+
+const port = 8080
+
+app.get('/postform', (req, res) => {
+	res.sendFile(`${__dirname}/html/post.html`)
+})
+
+app.get('/getform', (req, res) => {
+	res.sendFile(`${__dirname}/html/get.html`)
+})
+
+app.get ('/lists', (req, res) => {
+	res.sendFile(`${__dirname}/html/lists.html`)
+})
+
+app.get ('/semantic', (req, res) => {
+	res.sendFile(`${__dirname}/html/form-skel.html`)
+})
+
+// this route processes data in the querystring
+app.get('/', (req, res) => {
+	res.write('<html><body><h1>Retrieving Data in Querystring</h1><table>')
+	for (const param in req.query) {
+		res.write(`<tr><td>${param}</td><td>${req.query[param]}</td></tr>`)
+ 	}
+	res.write('</table></body></html>')
+})
+
+// this route processes data in the request body
+app.post('/', (req, res) => {
+
+	console.log(req.body)
+
+	const data = req.body
+	res.write('<html><body><h2>Retrieving Data in Body</h2><table>')
+	for (const key in data) {
+		if (data.hasOwnProperty(key)) {
+			console.log(key)
+			console.log(data[key])
+			res.write(`<tr><td>${key}</td><td>${data[key]}</td></tr>`)
+		}
+	}
+	res.write('</table></body></html>')
+	res.end()
+})
+
+app.listen(port, () => {
+	console.log(`app listening on port ${port}`)
+})
diff --git a/exercises/08_forms/01_simple/index.js b/exercises/08_forms/01_simple/index.js
@@ -1,57 +1,46 @@
-
-'use strict'
-
-const express = require('express')
-const bodyParser = require('body-parser')
-const app = express()
-app.use(bodyParser.urlencoded({ extended: true }))
-app.use(express.static('public'))
-
+#!/usr/bin/env node
+
+const Koa = require('koa')
+const Router = require('koa-router')
+const app = new Koa()
+const router = new Router()
+const views = require('koa-views')
+app.use(require('koa-static')('public'))
+const bodyParser = require('koa-bodyparser')
+app.use(bodyParser())
 const port = 8080
 
-app.get('/postform', (req, res) => {
-	res.sendFile(`${__dirname}/html/post.html`)
-})
+app.use(views(`${__dirname}/views`, { extension: 'html' }, {map: { handlebars: 'handlebars' }}))
 
-app.get('/getform', (req, res) => {
-	res.sendFile(`${__dirname}/html/get.html`)
-})
-
-app.get ('/lists', (req, res) => {
-	res.sendFile(`${__dirname}/html/lists.html`)
-})
+router.get('/postform', async ctx => await ctx.render('post'))
+router.get('/getform', async ctx => await ctx.render('get'))
+router.get('/lists', async ctx => await ctx.render('lists'))
+router.get('/semantic', async ctx => await ctx.render('form-skel'))
 
-app.get ('/semantic', (req, res) => {
-	res.sendFile(`${__dirname}/html/form-skel.html`)
-})
-
-// this route processes data in the querystring
-app.get('/', (req, res) => {
-	res.write('<html><body><h1>Retrieving Data in Querystring</h1><table>')
-	for (const param in req.query) {
-		res.write(`<tr><td>${param}</td><td>${req.query[param]}</td></tr>`)
- 	}
-	res.write('</table></body></html>')
+router.get('/getform/process', async ctx => {
+	console.log(ctx.query)
+	let data = '<html><body><h1>Retrieving Data in Querystring</h1><table>'
+	for(const param in ctx.query) {
+		console.log(param)
+		data += `<tr><td>${param}</td><td>${ctx.query[param]}</td></tr>`
+	}
+	data += '</table></body></html>'
+	ctx.body = data
 })
 
-// this route processes data in the request body
-app.post('/', (req, res) => {
-
-	console.log(req.body)
-
-	const data = req.body
-	res.write('<html><body><h2>Retrieving Data in Body</h2><table>')
-	for (const key in data) {
-		if (data.hasOwnProperty(key)) {
+router.post('/postform/process', async ctx => {
+	console.log(ctx.request.body)
+	let data = '<html><body><h2>Retrieving Data in Body</h2><table>'
+	for (const key in ctx.request.body) {
+		if (ctx.request.body.hasOwnProperty(key)) {
 			console.log(key)
-			console.log(data[key])
-			res.write(`<tr><td>${key}</td><td>${data[key]}</td></tr>`)
+			console.log(ctx.request.body[key])
+			data += `<tr><td>${key}</td><td>${ctx.request.body[key]}</td></tr>`
 		}
 	}
-	res.write('</table></body></html>')
-	res.end()
+	data += '</table></body></html>'
+	ctx.body = data
 })
 
-app.listen(port, () => {
-	console.log(`app listening on port ${port}`)
-})
+app.use(router.routes())
+module.exports = app.listen(port, () => console.log(`listening on port ${port}`))
diff --git a/exercises/08_forms/01_simple/package.json b/exercises/08_forms/01_simple/package.json
@@ -0,0 +1,18 @@
+{
+  "name": "01_simple",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "koa": "^2.6.2",
+    "koa-bodyparser": "^4.2.1",
+    "koa-router": "^7.4.0",
+    "koa-static": "^5.0.0",
+    "koa-views": "^6.1.5"
+  }
+}
diff --git a/...es/08_forms/01_simple/html/form-skel.html → ...s/08_forms/01_simple/views/form-skel.html b/...es/08_forms/01_simple/html/form-skel.html → ...s/08_forms/01_simple/views/form-skel.html
diff --git a/exercises/08_forms/01_simple/html/get.html → exercises/08_forms/01_simple/views/get.html b/exercises/08_forms/01_simple/html/get.html → exercises/08_forms/01_simple/views/get.html
@@ -9,7 +9,7 @@
 		<meta name="author" content="Joe Bloggs">
 	</head>
 	<body>
-    <form method="get" action="/">
+    <form method="get" action="/getform/process">
 			First name:<br>
 			<input type="text" name="firstname" value="Mickey">
 			<br>

diff --git a/exercises/08_forms/01_simple/html/lists.html → ...cises/08_forms/01_simple/views/lists.html b/exercises/08_forms/01_simple/html/lists.html → ...cises/08_forms/01_simple/views/lists.html
diff --git a/exercises/08_forms/01_simple/html/post.html → exercises/08_forms/01_simple/views/post.html b/exercises/08_forms/01_simple/html/post.html → exercises/08_forms/01_simple/views/post.html
@@ -9,7 +9,7 @@
 		<meta name="author" content="Joe Bloggs">
 	</head>
 	<body>
-    <form method="post" action="/">
+    <form method="post" action="/postform/process">
 			First name:<br>
 			<input type="text" name="firstname" value="Mickey">
 			<br>

diff --git a/.../08_forms/01_simple/html/sample-form.html → ...08_forms/01_simple/views/sample-form.html b/.../08_forms/01_simple/html/sample-form.html → ...08_forms/01_simple/views/sample-form.html
diff --git a/exercises/08_forms/02_bookshop/books.csv b/exercises/08_forms/02_bookshop/books.csv
@@ -0,0 +1,13 @@
+"Title", "ISBN13", "Author", "Publisher", "Year"
+"Learning Node: Moving to the Server-Side", 9781491943120, "Shelley Powers", "O′Reilly", 2016
+"Web Development with Node and Express: Leveraging the JavaScript Stack",9781491949306, "Ethan Brown", "O'Reilly", 2014
+"JavaScript: The Good Parts", 9780596517748, "Douglas Crockford", "O′Reilly", 2008
+"Understanding Ecmascript 6", 9781593277574, "Nicholas Zakus", "No Starch Press", 2016
+"The Principles of Object-Oriented JavaScript", 9781593275402, "Nicholas C. Zakas", "No Starch Press", 2014
+"Using SQLite", 9780596521189, "Jay A. Kreibich", "O'Reilly", 2010
+"Getting Started with SQL: A hands-on approach for beginners", 9781491938614, "Thomas Nield", "O'Reilly", 2016
+"The Language of SQL", 9780134658254, "Larry Rockoff", "Addison Wesley", 2016
+"Node.js, MongoDB and Angular Web Development", 9780134655536, "Brad Dayley", "Addison Wesley", 2017
+"MongoDB: The Definitive Guide", 9781449344689, "Kristina Chodorow", "O'Reilly", 2013
+"Graph Databases", 9781491930892, "Ian Robinson, Jim Webber, Emil Eifrem", "O'Reilly", 2015
+"HTML5 In Easy Steps", 9781840787542, "Mike McGrath", "In Easy Steps Limited", 2017
diff --git a/exercises/08_forms/02_bookshop/books.sql b/exercises/08_forms/02_bookshop/books.sql
@@ -0,0 +1,18 @@
+
+INSERT INTO books(title, isbn, description) 
+    VALUES(
+        "Graph Databases", 
+        9781491930892, 
+        "Discover how graph databases can help you manage and query highly connected data. 
+        With this practical book, you’ll learn how to design and implement a graph database 
+        that brings the power of graphs to bear on a broad range of problem domains. 
+        Whether you want to speed up your response to user queries or build a database that 
+        can adapt as your business evolves, this book shows you how to apply the schema-free 
+        graph model to real-world problems.
+        
+        This second edition includes new code samples and diagrams, using the latest Neo4j 
+        syntax, as well as information on new functionality. Learn how different 
+        organizations are using graph databases to outperform their competitors. With this 
+        book’s data modeling, query, and code examples, you’ll quickly be able to implement 
+        your own solution."
+    );
diff --git a/exercises/08_forms/02_bookshop/bookshop.db b/exercises/08_forms/02_bookshop/bookshop.db
diff --git a/exercises/08_forms/02_bookshop/index.js b/exercises/08_forms/02_bookshop/index.js
@@ -0,0 +1,76 @@
+#!/usr/bin/env node
+
+const Koa = require('koa')
+const Router = require('koa-router')
+const app = new Koa()
+const router = new Router()
+const views = require('koa-views')
+app.use(require('koa-static')('public'))
+const bodyParser = require('koa-bodyparser')
+app.use(bodyParser())
+const port = 8080
+
+const sqlite = require('sqlite-async')
+
+app.use(views(`${__dirname}/views`, { extension: 'handlebars' }, {map: { handlebars: 'handlebars' }}))
+
+router.get('/', async ctx => {
+	try {
+		const data = {}
+		if(ctx.query.msg) data.msg = ctx.query.msg
+		const db = await sqlite.open('./bookshop.db')
+		data.books = await db.all('SELECT id, title FROM books;')
+		await db.close()
+		await ctx.render('home', data)
+	} catch(err) {
+		await ctx.render('error', {message: err.message})
+	}
+})
+
+// router.get('/', async ctx => {
+// 	try {
+// 		let sql = 'SELECT id, title FROM books;'
+// 		const data = {}
+// 		if(ctx.query.msg) data.msg = ctx.query.msg
+// 		if(ctx.query !== undefined && ctx.query.q !== undefined) {
+// 			sql = `SELECT id, title FROM books 
+// 							WHERE upper(title) LIKE "%${ctx.query.q}%" 
+// 							OR upper(description) LIKE upper("%${ctx.query.q}%");`
+// 			data.query = ctx.query.q
+// 		}
+// 		const db = await sqlite.open('./bookshop.db')
+// 		data.books = await db.all(sql)
+// 		await db.close()
+// 		await ctx.render('newindex', data)
+// 	} catch(err) {
+// 		await ctx.render('error', {message: err.message})
+// 	}
+// })
+
+router.get('/details/:id', async ctx => {
+	try {
+		const db = await sqlite.open('./bookshop.db')
+		const data = await db.get(`SELECT * FROM books WHERE id = ${ctx.params.id};`)
+		await db.close()
+		await ctx.render('details', data)
+	} catch(err) {
+		await ctx.render('error', {message: err.message})
+	}
+})
+router.get('/form', async ctx => await ctx.render('form'))
+
+router.post('/add', async ctx => {
+	try {
+		const body = ctx.request.body
+		console.log(body)
+		const db = await sqlite.open('./bookshop.db')
+		await db.run( `INSERT INTO books(title, isbn, description) VALUES("${body.title}", "${body.isbn}", "${body.description}");`)
+		await db.close()
+		ctx.redirect(`/?msg=inserted "${body.title}"`)
+	} catch(err) {
+		ctx.redirect(`/?msg=ERROR: ${err.message}`)
+	}
+})
+
+app.use(router.routes())
+module.exports = app.listen(port, () => console.log(`listening on port ${port}`))
diff --git a/exercises/08_forms/02_bookshop/package.json b/exercises/08_forms/02_bookshop/package.json
@@ -0,0 +1,20 @@
+{
+  "name": "02_bookshop",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "handlebars": "^4.0.12",
+    "koa": "^2.6.2",
+    "koa-bodyparser": "^4.2.1",
+    "koa-router": "^7.4.0",
+    "koa-static": "^5.0.0",
+    "koa-views": "^6.1.5",
+    "sqlite-async": "^1.0.11"
+  }
+}
diff --git a/exercises/08_forms/02_bookshop/public/css/style.css b/exercises/08_forms/02_bookshop/public/css/style.css
@@ -0,0 +1,11 @@
+
+body {
+  font-family: Arial, Helvetica, sans-serif;
+}
+
+.msg {
+  border: 1px solid red;
+  font-weight: bold;
+  color: red;
+  padding: 1em;
+}
diff --git a/exercises/08_forms/02_bookshop/views/details.handlebars b/exercises/08_forms/02_bookshop/views/details.handlebars
@@ -0,0 +1,16 @@
+
+<!doctype html>
+
+<html lang="en">
+	<head>
+		<meta charset="utf-8">
+		<title>BOOKS</title>
+		<meta name="description" content="The HTML5 Template">
+		<meta name="author" content="Joe Bloggs">
+		<link href="css/style.css" type="text/css" rel="stylesheet" />
+	</head>
+	<body>
+		<h1>{{title}}</h1>
+        <h2>ISBN: {{isbn}}</h2>
+	</body>
+</html>
diff --git a/exercises/08_forms/02_bookshop/views/error.handlebars b/exercises/08_forms/02_bookshop/views/error.handlebars
@@ -0,0 +1,16 @@
+
+<!doctype html>
+
+<html lang="en">
+	<head>
+		<meta charset="utf-8">
+		<title>ERROR</title>
+		<meta name="description" content="The HTML5 Template">
+		<meta name="author" content="Joe Bloggs">
+		<link href="css/style.css" type="text/css" rel="stylesheet" />
+	</head>
+	<body>
+        <h1>An Error Has Occurred</h1>
+        <h2>{{message}}</h2>
+	</body>
+</html>