Add Create route to submit a new blog in RESTfulBlogApp

anku255 · anku255 · commit 33b30da95332 · 2017-06-22T16:00:14.000+05:30
diff --git a/RESTfulBlogApp/app.js b/RESTfulBlogApp/app.js
@@ -30,6 +30,7 @@ app.get("/", function(req, res) {
 	res.redirect("/blogs");
 });
 
+// INDEX ROUTE
 app.get("/blogs", function(req, res) {
 	Blog.find({}, function(err, blogs) {
 		if(err) {
@@ -40,7 +41,24 @@ app.get("/blogs", function(req, res) {
 	});
 });
 
+// NEW ROUTE
+app.get("/blogs/new", function(req, res) {
+	res.render("new");
+});
 
+// CREATE ROUTE
+app.post("/blogs", function(req, res) {
+	// create blog
+	Blog.create(req.body.blog , function(err, newBlog) {
+		if(err) {
+			res.render("new");
+		} else {
+			// redirect to the index
+			res.redirect("/blogs");
+		}
+	}); 
+	
+});
 
 app.listen(3000, function() {
 	console.log("Server has started at PORT 3000");
diff --git a/RESTfulBlogApp/public/stylesheets/app.css b/RESTfulBlogApp/public/stylesheets/app.css
@@ -1,3 +1,7 @@
 i.icon {
 	font-size: 2em;
+}
+
+.container.main {
+	margin-top: 7.0em;
 }
diff --git a/RESTfulBlogApp/views/new.ejs b/RESTfulBlogApp/views/new.ejs
@@ -0,0 +1,21 @@
+<% include partials/header %>
+
+<div class="ui main text container segment">
+	<div class="ui huge header">New Blog</div>
+	<form class="ui form" action="/blogs" method="POST">
+		<div class="field">
+			<label>Title</label>
+			<input type="text" name="blog[title]" placeholder="title">
+		</div>
+		<div class="field">
+			<label>Image</label>
+			<input type="text" name="blog[image]" placeholder="image">
+		</div>
+		<div class="field">
+			<label>Title</label>
+			<textarea name="blog[body]"></textarea>
+		</div>
+		<input class="ui big violet basic button" type="submit">
+	</form>
+</div>
+<% include partials/footer %>
diff --git a/RESTfulBlogApp/views/partials/header.ejs b/RESTfulBlogApp/views/partials/header.ejs
@@ -3,7 +3,7 @@
 	<head>
 		<title>Blog App</title>
 		<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.10/semantic.min.css">
-		<link rel="stylesheet" type="text/css" href="stylesheets/app.css">
+		<link rel="stylesheet" type="text/css" href="/stylesheets/app.css">
 	</head>
 	<body>
 		<div class="ui fixed inverted menu">

Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,7 @@`
`1`	`1`	`i.icon {`
`2`	`2`	`font-size: 2em;`
	`3`	`+}`
	`4`	`+`
	`5`	`+.container.main {`
	`6`	`+ margin-top: 7.0em;`
`3`	`7`	`}`