Skip to content

Techdegree Java Web Development Project 4 - Blog with Spark

Notifications You must be signed in to change notification settings

nikiforov-alexander/pt4-spark-blog

Repository files navigation

Techdegree project 4

Blog with Spark


### Table of Contents ### Installation instructions * [Eclipse installation instructions.] (#eclipse)

Tasks

  • [1.] (#task-1) Use supplied mockup files to build personal blog.
  • [2.] (#task-2) In IntelliJ IDEA, create a Gradle project. Add all required Spark dependencies, and create the directory and package structure of the application. Save all static assets into the proper directory.
  • [3.] (#task-3) Create model classes for blog entries and blog comments.
  • [4.] (#task-4) Create a DAO interface for data storage and access and implement it.
  • [5.] (#task-5) Add necessary routes.
  • [6.] (#task-6) Create index view as the homepage. This view contains a list of blog entries, which displays Title, Date/Time Created. Title should be hyperlinked to the detail page for each blog entry. Include a link to add an entry.
  • [7.] (#task-7) Create detail page displaying blog entry and submitted comments. Detail page should also display a comment form with Name and Comment. Include a link to edit the entry.
  • [8.] (#task-8) Create a password page that requires a user to provide 'admin' as the username. This page should display before adding or editing a comment if there is no cookie present that has the value 'admin'.
  • [9.] (#task-9) Create add/edit page that is blocked by a password page, using before filter.
  • [10.] (#task-10) Use CSS to style headings, font colors, blog entry container colors, body colors.

Extra Credit

  • [11.] (#task-11) Add tags to blog entries, which enables the ability to categorize. A blog entry can exist with no tags, or have multiple tags.
  • [12.] (#task-12) Add the ability to delete a blog entry.
  • [13.] (#task-13) Issue a cookie upon entering the password, and check for it upon adding or editing a post.

Eclipse Installation instructions


I generated necessary `.classpath`, `.project` and `blog.userlibraires` files with IntellijIdea. I also made a video how I imported my project to my home Kubuntu 14.04 laptop with Eclipse Mars 1: https://www.youtube.com/watch?v=7ygSsvATNpQ I will provide instructions here, and hopefully with this video and instructions it will be possible to import project to Mac Eclipse. NOTE: I have gradle buildship plugin installed in Eclipse:
  1. In opened Eclipse app, I go File -> Import -> Gradle Project
  2. Pick up a project downloaded from GitHub
  3. Follow default necessary steps until the end.
  4. I also make sure Gradle is using right JDK.
  5. Then I configure Source folders on build path, leaving only two, see video.
  6. Then I uncomment apply plugin 'eclipse' in build.gradle
  7. After that I go to project root directory, make gradlew executable
  8. Run gradlew clean, gradlew eclipse
  9. After that I go to properties of project, to Build Path
  10. There I mark select all, to import all jars from dependencies in Gradle
  11. Say yes to warning.
  12. Then run Main method.

### Tasks 1. Use the supplied mockup files to build a personal blog.
All 5 html files were used to create according .hbs files. CSS files are used as well, with some tiny changes, like adding class for tag and remove button.
2. In IntelliJ IDEA, create a Gradle project. Add all required Spark dependencies, and create the directory and package structure of the application. Save all static assets into the proper directory.
Gradle project created with all spark dependencies. Resources directory [resources] is created and marked as dir. CSS files are in [css] dir. Template .hbs files are in [templates] dir.
3. Create model classes for blog entries and blog comments.
Model classes are: - [BlogEntry] - [Comment]
Both classes have two additional methods, that return
date in right machine-readable format for html datetime element: 
`getHtmlCreationDate()` 
and return date in format provided in mockup files for users to see
`getCreationDateString()`

4. Create a DAO interface for data storage and access and implement it.
DAO interface is [BlogDao]. It has 4 methods: - `addEntry(BlogEntry blogEntry)` - `findAllEntries()` - `findEntryById(int id)` - `removeEntryById(int id)`
First three methods were given. `removeEntryById` method I added in 
order to remove entry on edit page and when old entry is edited,
old one is removed, preserving the comments, and new one is added.
Method `findEntryById` actually find entries by unique id
generated for each blog entry from date and title.

Implementation of dao is called [Sql2oBlogDao]. 

5. Add necessary routes
Following routes were added: - password page : `get("/password")` and `post("/password")`. - home page : `get("/")`. - entries detail page: `get("/entries/detail/:id/:slugFromTitle")` - post comments on entries detail page: `post("/entries/detail/:id/:slugFromTitle")` - new entry page (password-protected): with `get("/entries/new")` and `post("/entries/new")` - edit entry page (password-protected: `get("/entries/edit/:id/:slugFromTitle")` - save entry on edit entry page: `post("/entries/save/:id/:slugFromTitle")` - remove entry on edit page (made through get request) : `get("/entries/remove/:id/:slugFromTitle")` - when Exceptions are thrown, user is redirected to: `exception(ApiError.class)` not-found page
6. Create index view as the homepage. This view contains a list of blog entries, which displays Title, Date/Time Created. Title should be hyperlinked to the detail page for each blog entry. Include a link to add an entry.
Index page `get("/")` is modeled exactly as in mockup, also tags are added after creation date. Three test entries displayed on the page, as asked. Link to add an entry is bound to top right button. Titles of entries will redirect to detailed entry pages. Top left Spark blog logo will lead to homepage. "Contact us" and "Terms" at the bottom of the page right now do not lead anywhere.
7. Create detail page displaying blog entry and submitted comments. Detail page should also display a comment form with Name and Comment. Include a link to edit the entry.
Detail page `get("/entries/detail/:id/:slugFromTitle")` displays title, comment, body of entry. User can add comments, however author field and entry field right now are required. From this page user can edit entry. Link is right before entry's body. Links to add new entry, go home, "contact us" and "terms", are also here, just like at home page
8. Create a password page that requires a user to provide 'admin' as the username. This page should display before adding or editing a comment if there is no cookie present that has the value 'admin'.
Password page is implemented in `get("/password")` with post request `post("/password")`. Filter is implemented in `before` lambda to check if the cookie with name "password" and value "admin" is set. The before filter is applied for: - edit entry page : `/entries/edit/*` - new entry page: `/entries/new` - save entry post request: `/entries/save/*` - remove entry get request: `/entries/remove/*`
Note: In `before` filter address of protected page saved to session 
attribute, so that later after right password, user will be 
redirected to page where he was before.

9. Create add/edit page that is blocked by a password page, using before filter.
See [task 8](#task-8).
10. Use CSS to style headings, font colors, blog entry container colors, body colors.
Provided CSS files are used, with couple of small additions, see [site.css].
### Extra Credit
11. Add tags to blog entries, which enables the ability to categorize. A blog entry can exist with no tags, or have multiple tags.
Not realized
12. Add the ability to delete a blog entry.
Entry can be removed from edit page, using `get("/entries/remove/")` request. It is a get request, because we don't need any information from user. I added remove button, changed styling a bit, for it to fit. It is password protected action, so that if we don't have cookie with name "password" and name "admin", this action is prohibited.
13. Issue a cookie upon entering the password, and check for it upon adding or editing a post.
See [Task 8](#task-8)