Skip to content

Instantly share code, notes, and snippets.

@itsgreggreg

itsgreggreg/README.md

Last active August 29, 2015 14:24
Show Gist options
  • Save itsgreggreg/fada628de860d3e540ba to your computer and use it in GitHub Desktop.
Save itsgreggreg/fada628de860d3e540ba to your computer and use it in GitHub Desktop.
Download ZIP
blog server
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

Raw
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);
});
});
Raw
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);
});
Raw
bog.css
form {display: none};
Raw
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>
Raw
posts.json
[{"title":"My First Post","body":"This is a test for my first post."}]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment