Let's have a look at the article/create.ftl page, which implements the Create Article page and makes use of the common template shown in the preceding section's code:

<#import "../common/standardPage.ftl" as p>


<@p.page title="${(article.title)!'New Post'}">
<script type="text/javascript" src="/webjars/ckeditor/4.7.0/standard/ckeditor.js"></script>
        

The preceding code imports the CKEditor JavaScript library to enable rich text writing for the content section:

<!-- Post Content Column -->
<div class="col-lg-8">
<form action="/article" method="post">
  

The preceding code creates a form that can be submitted to a URL/article as a POST request to create or update a blog article:

<#if article?? >
  <input type="hidden" id="id" name="id" value="${article.id}"/>
  <div class="form-group">
    <label for="postTitle">Title</label>
    <input type="text" class="form-control" id="title" name="title" 
     placeholder="Post Title" value="${article.title}" required="true">
  </div>
  <div class="form-group">
    <label for="postLink">Perma Link</label>
    <input type="text" class="form-control" id="link" name="link" 
    placeholder="Post Perma Link" value="${article.link}" 
    required="true">
  </div>
  <div class="form-group">
    <label for="postSummary">Summary</label>
    <textarea class="form-control" id="summary" name="summary" rows="3" 
    required="true">${article.summary}</textarea>
  </div>
  <div class="form-group">
    <label for="postBody">Body</label>
    <textarea class="form-control" id="body" name="body" rows="10" 
    required="true">${article.body}</textarea>
  </div>
  

If an article is already there (update article scenario) then the preceding code will store the ID of that article in a hidden field to be submitted and will populate the Title, Perma Link, Summary, and Body with the existing values so that they can be edited, shown as follows:

<#else>
  <div class="form-group">
    <label for="postTitle">Title</label>
    <input type="text" class="form-control" id="title" name="title" 
     placeholder="Post Title" required="true">
  </div>
  <div class="form-group">
    <label for="postLink">Permalink</label>
    <input type="text" class="form-control" id="link" name="link" 
    placeholder="Post Permalink" required="true">
  </div>
  <div class="form-group">
    <label for="postSummary">Summary</label>
    <textarea class="form-control" id="summary" name="summary" rows="3" 
    required="true"></textarea>
  </div>
  <div class="form-group">
    <label for="postBody">Body</label>
    <textarea class="form-control" id="body" name="body" rows="10"  
    required="true"></textarea>
  </div>
  </#if>
  <div class="form-group">
    <input class="form-control btn btn-primary" type="submit"  
    value="Save"/>
  </div>

If it is an entirely new article then the preceding code will create empty Title, Perma Link, Summary, and Body fields. Eventually, the page will have a Save button for both the create and update use cases:

<script type="text/javascript">
  CKEDITOR.replace( 'body' );

  $("#title").keyup(function(){
       var str = $(this).val();
       str = str.replace(/[^a-zA-Z0-9s]/g,"");
       str = str.toLowerCase();
       str = str.replace(/s/g,'-');
       $("#link").val(str);
    });
</script>
</form>
</div>
</@p.page>

For styling, the body section with bold, italic, and so on, on a fully fledged JavaScript editor named CKEDITOR is used. The following dependency in pom.xml is required to enable that:

<dependencies>
    ...
    <dependency>
        <groupId>org.webjars</groupId>
        <artifactId>ckeditor</artifactId>
        <version>4.7.0</version>
    </dependency>
</dependencies>

The following JavaScript code in the front-end page can be used to enable CKEDITOR on an HTML element:

<script type="text/javascript">
  CKEDITOR.replace( 'body' );
  ...
</script>

This page also makes use of the common template. It also has a piece of jQuery JavaScript code that takes the text typed in for the title and converts it into a permanent link URL by replacing spaces with '-' and rendering all other characters in a simple case.