Permalink
Browse files

Deleted unused files. Added more detail around using npm. Renamed/rel…

…ocated some files to reduce confusion
  • Loading branch information...
1 parent e84d3e8 commit 1b9c7168be3636d07971d2636bf63f98d741912b @ciaranj ciaranj committed Jul 24, 2011
@@ -4,6 +4,7 @@ Date: Thu Feb 18 2010 21:28:42 GMT+0000 (UTC)
Node: v0.4.10
> Article and Code updated by [loarabia (Larry Olson)][loarabiaSite].
+> Article and Code updated by Toby Clemson
In this article I hope to take you through the steps required to get a fully-functional (albeit feature-light) persistent blogging system running on top of [node][].
@@ -141,40 +142,35 @@ If the app is re-run and you browse to [localhost:3000][] you will see the objec
###A view to a kill###
-Now we have a way of reading and storing data (patience, memory is only the beginning!) we'll want a way of displaying and creating the data properly. Initially we'll start by just providing an index view of all the blog articles. To do this create the following two files in your views sub-directory (be very careful about the indentation, that first lines should be up against the left-hand margin!):
+Now we have a way of reading and storing data (patience, memory is only the beginning!) we'll want a way of displaying and creating the data properly. Initially we'll start by just providing an index view of all the blog articles.
+Fortunately the `express` command we executed earlier to bootstrap our blogging application has already constructed a layout and an index page for us to use. The layout file is Ok as it is, but we need to adjust the index page to look as follows: (be very careful about the indentation, that first lines should be up against the left-hand margin!):
-<express-mongodb/views/layout.jade>
-
-and
-
-<express-mongodb/views/blog_index.jade>
+<express-mongodb/views/index.jade>
Next change your `get('/')` routing rule in your `app.js` to be as follows:
-<express-mongodb/app2.js#root>
+<express-mongodb/2/app.js#root>
Now you should be able to restart the server and browser to [localhost:3000][]. Et voila! We'll not win any design awards, but you should now see a list of 3 very 'functional' blog postings (don't worry we'll come back to the style in a moment).
There are two important things to note that we've just done;
-The first is the change to our application's routing rules. What we've done is say that for any browser requests that come in to the route ('/') we should ask the data provider for all the articles it knows about (a future improvement might be 'the most recent 10 posts etc.') and to 'render' those returned articles using the [jade][] template `blog_index.jade`.
+The first is the change to our application's routing rules. What we've done is say that for any browser requests that come in to the route ('/') we should ask the data provider for all the articles it knows about (a future improvement might be 'the most recent 10 posts etc.') and to 'render' those returned articles using the [jade][] template `index.jade`.
The second is the usage of a 'layout' [jade][] file `layout.jade`. This file will be used whenever a call to 'render' is made (unless over-ridden in that particular call) and provides a simple mechanism for common style across all page requests.
> If you're familiar with [jade][] then you may want to skip this section, otherwise please read-on! [jade][] is yet-another templating language, however this one is driven by the rule that 'Markup should be beautiful'. It provides a lightweight syntax for declaring markup with a bare minimum of typed characters.
>
> Reading a [jade][] template is simple. The hierarchy of elements is expressed as indentation on the left hand-side; that is, everything that starts in a given column shares the same parent. Each line of [jade][] represents either a new element in the (eventual) HTML document or a function within [jade][] (which offers conditions and loops etc). Effectively [jade][] takes a JSON object and binds it to any `literal` text in the [jade][] template, applies the rules that define [jade][] and then processes the resulting bag of stuff to produce a well-formed and valid HTML document of the specified DOCTYPE. (Yay!)
-As is probably obvious we need a little styling to be applied here, to do that we'll need to change our layout a little to request a stylesheet:
+As is probably obvious we need a little styling to be applied here, fortunately we can see that the default layout requests a stylesheet already:
-<express-mongodb/views/layout2.jade>
+<express-mongodb/views/layout.jade>
-Add a stylus template to the `views` folder in order to generate the css:
+Not only that, but the default stylesheet has already been populated for us in `public/styesheets/style.styl', however sadly the contents don't fully meet our requirements so lets change that file to look more like this:
<express-mongodb/public/stylesheets/style.styl>
-Since we configure the express application template to use Stylus, css based on our new sheet should be applied.
-
Again after restarting your app and browsing to [localhost:3000][] you should see the posts, with a little more style (admittedly not much more!).
Something to notice here:
@@ -190,20 +186,25 @@ Now we can view a list of blog posts it would be nice to have a simple form for
Add two new routes to app.js
-<express-mongodb/app2.js#blog>
+<express-mongodb/2/app.js#blog>
Upon restarting your app if you browse to [new post][] you will be able to create new blog articles, awesome! Looking at the post route we can see that upon successfully saving we redirect back to the index page where all the articles are displayed.
-If I've lost you along the way you can get a zip of this fully working (but non-persisting) blog here: [Checkpoint 1][]. This patch should apply cleanly to the previously described SHA of express :)
+If I've lost you along the way you can get a zip of this fully working (but non-persisting) blog here: [Checkpoint 1][]. (please be aware that upon extracting the zip file you will need to re-perform the `npm install -d` command within the folder to install the project dependencies.)
### Adding permanent persistence to the mix ###
I promised that by the end of this article we'd be persisting our data across restarts of node, I've not yet delivered on this promise but now I will ..hopefully ;)
-To do this we need to install a dependency on [node-mongodb-native][], which will allow our burgeoning application to access [mongoDB][]. Once again our friend npm comes to the rescue. If we open the console up and enter the blog directory we created earlier or if that is still your working directory, then we will be able to type the following command to install the driver.
+To do this we need to install a dependency on [node-mongodb-native][], which will allow our burgeoning application to access [mongoDB][]. Once again our friend npm comes to the rescue. The dependencies of node applications can be expressed with a small JSON file in the root of the application `package.json` the `npm` tool understands how to read this file and install the dependencies on our behalf! (Yay! Go Tools!)
+
+To add a dependency on [mongoDB][] you need to make your `package.json` look as follows:
+
+<express-mongodb/package.json>
- #!sh
- npm install mongodb
+Once you have saved the file you then just need to execute the following command to have `npm` talk to the internet-tubes, download and then install the nodejs client for mongoDB.
+
+ npm install -d
Now we need to replace our old memory based data provider with one thats capable of using mongodb:
@@ -268,7 +269,7 @@ We'll also need a new route to allow the article to be referenced by a URL and w
We need to update the index page's view:
-<express-mongodb/views/blogs_index-final.jade>
+<express-mongodb/views/index-final.jade>
The page that shows a single blog entry:
@@ -26,7 +26,7 @@ var articleProvider= new ArticleProvider();
//root
app.get('/', function(req, res){
articleProvider.findAll( function(error,docs){
- res.render('blog_index.jade', { locals: {
+ res.render('index.jade', { locals: {
title: 'Blog',
articles:docs
}
@@ -40,14 +40,9 @@ ArticleProvider.prototype.findAll = function(callback) {
this.getCollection(function(error, article_collection) {
if( error ) callback(error)
else {
- article_collection.find(function(error, cursor) {
+ article_collection.find().toArray(function(error, results) {
if( error ) callback(error)
- else {
- cursor.toArray(function(error, results) {
- if( error ) callback(error)
- else callback(null, results)
- });
- }
+ else callback(null, results)
});
}
});
@@ -90,5 +85,3 @@ ArticleProvider.prototype.save = function(articles, callback) {
}
});
};
-
-exports.ArticleProvider = ArticleProvider;
@@ -9,6 +9,8 @@ ArticleProvider = function(host, port) {
this.db.open(function(){});
};
+//getCollection
+
ArticleProvider.prototype.getCollection= function(callback) {
this.db.collection('articles', function(error, article_collection) {
if( error ) callback(error);
@@ -21,14 +23,9 @@ ArticleProvider.prototype.findAll = function(callback) {
this.getCollection(function(error, article_collection) {
if( error ) callback(error)
else {
- article_collection.find(function(error, cursor) {
+ article_collection.find().toArray(function(error, results) {
if( error ) callback(error)
- else {
- cursor.toArray(function(error, results) {
- if( error ) callback(error)
- else callback(null, results)
- });
- }
+ else callback(null, results)
});
}
});
Binary file not shown.
Binary file not shown.
@@ -0,0 +1,11 @@
+{
+ "name": "application-name"
+ , "version": "0.0.1"
+ , "private": true
+ , "dependencies": {
+ "express": "2.4.3"
+ , "stylus": ">= 0.0.1"
+ , "jade": ">= 0.0.1"
+ , "mongodb": ">= 0.9.6-7"
+ }
+}
@@ -1,8 +0,0 @@
-h1= title
-#articles
- - each article in articles
- div.article
- div.created_at= article.created_at
- div.title
- a(href="/blog/"+article._id.toHexString())!= article.title
- div.body= article.body
@@ -1,11 +0,0 @@
-%h1= title
-%form{ method: 'post' }
- %div
- %div
- %span Title :
- %input{ type: 'text', name: 'title', id: 'editArticleTitle' }
- %div
- %span Body :
- %textarea{ name: 'body', rows: 20, id: 'editArticleBody' }
- %div#editArticleSubmit
- %input{ type: 'submit', value: 'Send' }
@@ -1,21 +0,0 @@
--# views/blog_show.html.haml
-%h1= title
-%div.article
- %div.created_at= article.created_at
- %div.title= article.title
- %div.body= article.body
- - each comment in article.comments
- %div.comment
- %div.person= comment.person
- %div.comment= comment.comment
- %div
- %form{ method: 'post', action:"/blog/addComment" }
- %input{ type: "hidden", name:"_id", value: article._id.toHexString()}
- %div
- %span Author :
- %input{ type: 'text', name: 'person', id: 'addCommentPerson' }
- %div
- %span Comment :
- %textarea{ name: 'comment', rows: 5, id: 'addCommentComment' }
- %div#editArticleSubmit
- %input{ type: 'submit', value: 'Send' }
@@ -1,20 +0,0 @@
-h1= title
-div.article
- div.created_at= article.created_at
- div.title= article.title
- div.body= article.body
- - each comment in article.comments
- div.comment
- div.person= comment.person
- div.comment= comment.comment
- div
- form( method="post", action="/blog/addComment")
- input( type="hidden", name="_id", value=article._id.toHexString())
- div
- span Author :
- input( type="text", name="person", id="addCommentPerson")
- div
- span Comment :
- textarea( name="comment", rows=5, id="addCommentComment")
- div#editArticleSubmit
- input(type="submit", value="Send")
@@ -1,9 +0,0 @@
--# views/blogs_index.html.haml
-%h1= title
-#articles
- - each article in articles
- %div.article
- %div.created_at= article.created_at
- %div.title
- %a{href:"/blog/"+article._id.toHexString()}= article.title
- %div.body= article.body
@@ -1,7 +0,0 @@
-%h1= title
-#articles
- - each article in articles
- %div.article
- %div.created_at= article.created_at
- %div.title= article.title
- %div.body= article.body
@@ -1,11 +0,0 @@
-h1= title
-form( method="post")
- div
- div
- span Title :
- input(type="text", name="title", id="editArticleTitle")
- div
- span Body :
- textarea( name="body", rows=20, id="editArticleBody)
- dev#editArticleSubmit
- input(type="submit", value="Send")
@@ -1,20 +0,0 @@
-h1= title
-div.article
- div.created_at= article.created_at
- div.title= article.title
- div.body= article.body
- - each comment in article.comments
- div.comment
- div.person= comment.person
- div.comment= comment.comment
- div
- form( method="post", action="/blog/addComment")
- input( type="hidden", name="_id", value=article._id.toHexString())
- div
- span Author :
- input( type="text", name="person", id="addCommentPerson")
- div
- span Comment :
- textarea( name="comment", rows=5, id="addCommentComment")
- div#editArticleSubmit
- input(type="submit", value="Send")
@@ -1,2 +1,8 @@
h1= title
-p Welcome to #{title}
+#articles
+ - each article in articles
+ div.article
+ div.created_at= article.created_at
+ div.title
+ a(href="/blog/"+article._id)!= article.title
+ div.body= article.body
@@ -1,6 +0,0 @@
-%html
- %head
- %title= title
- %body
- #wrapper
- != body
@@ -1,8 +0,0 @@
--# views/layout.html.haml
-%html
- %head
- %title= title
- %link{rel: 'stylesheet', href: '/style.css' }
- %body
- #wrapper
- != body
@@ -1,7 +0,0 @@
-!!!
-html
- head
- title= title
- link(rel='stylesheet', href='/stylesheets/style.css')
- body!= body
-
@@ -1,41 +0,0 @@
--# views/style.css.sass
-body
- :font-family "Helvetica Neue", "Lucida Grande", "Arial"
- :font-size 13px
- :text-align center
- =text-stroke 1px rgba(255, 255, 255, 0.1)
- :color #555
-h1, h2
- :margin 0
- :font-size 22px
- :color #343434
-h1
- :text-shadow 1px 2px 2px #ddd
- :font-size 60px
-#articles
- :text-align left
- :margin-left auto
- :margin-right auto
- :width 320px
- .article
- :margin 20px
- .created_at
- :display none
- .title
- :font-weight bold
- :text-decoration underline
- :background-color #eee
- .body
- :background-color #ffa
-#article
- .created_at
- :display none
- input[type =text]
- :width 490px
- :margin-left 16px
- input[type =button]
- :text-align left
- :margin-left 440px
- textarea
- :width 490px
- :height 90px
@@ -1,28 +0,0 @@
-body
- :font-family "Helvetica Neue", "Lucida Grande", "Arial"
- :font-size 13px
- :text-align center
- =text-stroke 1px rgba(255, 255, 255, 0.1)
- :color #555
-h1, h2
- :margin 0
- :font-size 22px
- :color #343434
-h1
- :text-shadow 1px 2px 2px #ddd
- :font-size 60px
-#articles
- :text-align left
- :margin-left auto
- :margin-right auto
- :width 320px
- .article
- :margin 20px
- .created_at
- :display none
- .title
- :font-weight bold
- :text-decoration underline
- :background-color #eee
- .body
- :background-color #ffa

0 comments on commit 1b9c716

Please sign in to comment.