itsgreggreg/README.md

## README.md

      
    Raw
  

              README.md
            
          
    ##What?
A quick lesson in serverside javascript. Creates a super basic blog that gets and posts via AJAX and saves to a JSON file. Demonstrates many important web development concepts. After finishing the project get students to talk about how they would implement other features like editing posts and basic security.
##Features

posts.json holds all the posts, students can see just how data is stored and can edit it manually.
jquery handles ajax requests for geting and posting blog posts.
post form is initially hidden, shows when there is a location.search like ?admin
handlebars handles templates for super simple templating, just two lines of JS and the templates are written in HTML

##Setup

cd ~/workspace
Copy blogServer.js here (~/workspace)
mkdr blog
Copy all files except blogServer.js to ~/workspace/blog
npm install express body-parser

##Running

Stop any running servers
cd ~/workspace
node blog/blogServer.js
If a popup tells you you need to kill running processes, kill them, usually by pressing a green button that pops up.
Navigate to your workspace's webserver root url. IE http://itsgreggreg-github-io-itsgreggreg2.c9.io not http://itsgreggreg-github-io-itsgreggreg2.c9.io/blog/index.html


## blog.js
$(document).on("ready", function(){
  // Grab and compile the handlebars template
  var postTemplateSource   = $("#blog-template").html();
  var postTemplate = Handlebars.compile(postTemplateSource);

  // Show the form only if ?admin or something
  if(window.location.search){
    $("form").show();
  }

  // Get existing posts
  $.get("posts.json", function(data){
      for(var i = 0; i < data.length; i = i + 1){
          $('#posts').prepend(blogTemplate(data[i]));
      }
  });

  // Handle form submission
  $("form").on("submit", function(event){
      event.preventDefault();

      var newPost = {
          title: $('input[name=title]').val(),
          body: $('textarea').val()
      }
      $('#posts').prepend(blogTemplate(newPost));
      $.post("posts", newPost);
  });
});

## blogServer.js
var express = require('express');
var path = require('path');
var fs = require('fs');
var app = express();

app.use(require('body-parser')());
app.use(express.static(path.resolve(process.env.PWD, 'blog/')));

var fileName = path.resolve(process.env.PWD, 'blog/posts.json');

var server = app.listen(process.env.PORT || 3000, process.env.IP || "0.0.0.0", function(){
  var addr = server.address();
  console.log("Blog server listening at", addr.address + ":" + addr.port);
});

app.get('/test', function(req,res){res.send("working");});

app.get('/posts', function(req, res){
  var postsString = fs.readFileSync(fileName).toString();
  res.send(postsString);
});

app.post('/posts', function(req, res){
  var posts = JSON.parse(fs.readFileSync(fileName).toString());
  posts.push({
    title: req.body.title.trim(),
    body: req.body.body.trim()
  });
  var postsString = JSON.stringify(posts);
  fs.writeFileSync(fileName, postsString);
  res.send(postsString);
});

## bog.css
form {display: none};

## index.html
<!DOCTYPE html>
<html>
    <head>
        <script src="https://code.jquery.com/jquery-2.1.4.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/3.0.3/handlebars.js"></script>
        <script src="blog.js"></script>
        <link rel="stylesheet" href="blog.css">
        <script id="blog-template" type="text/x-handlebars-template">
            <div class="blog-post">
              <h3>{{title}}</h3>
              <div>{{body}}</div>
              <hr>
            </div>
        </script>
    </head>
    <body>
        <form>
            <fieldset>
                <legend>New Post</legend>
                <div>
                    <input type="text" name="title" placeholder="Title">
                </div>
                <div>
                    <textarea name="body" placeholder="Body"></textarea>
                </div>
                <div>
                    <input type="submit" value="Submit">
                </div>
            </fieldset>
        </form>
        <h1>My Blog Posts</h1>
        <div id="posts"></div>
    </body>
</html>

## posts.json
[{"title":"My First Post","body":"This is a test for my first post."}]
	$(document).on("ready", function(){
	// Grab and compile the handlebars template
	var postTemplateSource = $("#blog-template").html();
	var postTemplate = Handlebars.compile(postTemplateSource);

	// Show the form only if ?admin or something
	if(window.location.search){
	$("form").show();
	}

	// Get existing posts
	$.get("posts.json", function(data){
	for(var i = 0; i < data.length; i = i + 1){
	$('#posts').prepend(blogTemplate(data[i]));
	}
	});

	// Handle form submission
	$("form").on("submit", function(event){
	event.preventDefault();

	var newPost = {
	title: $('input[name=title]').val(),
	body: $('textarea').val()
	}
	$('#posts').prepend(blogTemplate(newPost));
	$.post("posts", newPost);
	});
	});
	var express = require('express');
	var path = require('path');
	var fs = require('fs');
	var app = express();

	app.use(require('body-parser')());
	app.use(express.static(path.resolve(process.env.PWD, 'blog/')));

	var fileName = path.resolve(process.env.PWD, 'blog/posts.json');

	var server = app.listen(process.env.PORT \|\| 3000, process.env.IP \|\| "0.0.0.0", function(){
	var addr = server.address();
	console.log("Blog server listening at", addr.address + ":" + addr.port);
	});

	app.get('/test', function(req,res){res.send("working");});

	app.get('/posts', function(req, res){
	var postsString = fs.readFileSync(fileName).toString();
	res.send(postsString);
	});

	app.post('/posts', function(req, res){
	var posts = JSON.parse(fs.readFileSync(fileName).toString());
	posts.push({
	title: req.body.title.trim(),
	body: req.body.body.trim()
	});
	var postsString = JSON.stringify(posts);
	fs.writeFileSync(fileName, postsString);
	res.send(postsString);
	});
	<!DOCTYPE html>
	<html>
	<head>
	<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/3.0.3/handlebars.js"></script>
	<script src="blog.js"></script>
	<link rel="stylesheet" href="blog.css">
	<script id="blog-template" type="text/x-handlebars-template">
	<div class="blog-post">
	<h3>{{title}}</h3>
	<div>{{body}}</div>
	<hr>
	</div>
	</script>
	</head>
	<body>
	<form>
	<fieldset>
	<legend>New Post</legend>
	<div>
	<input type="text" name="title" placeholder="Title">
	</div>
	<div>
	<textarea name="body" placeholder="Body"></textarea>
	</div>
	<div>
	<input type="submit" value="Submit">
	</div>
	</fieldset>
	</form>
	<h1>My Blog Posts</h1>
	<div id="posts"></div>
	</body>
	</html>