Creating a new article

Summary

In this lesson, Kelvin Omereshone walks through implementing the Create functionality in a Sails.js CRUD application.

Setting up the form:
- A new route (GET /articles/new) is added to display the form.
- A new action (view-new) is generated using sails generate action articles/view-new.
- A corresponding new.ejs view is created, containing a form with title and body fields.
Handling form submission:
- A POST /articles route is defined, mapped to a create-article action.
- The action is generated using sails generate action articles/create-article.
- The inputs (title and body) are validated and required.
- The article is created using await Article.create({ title, body }).fetch().
- The user is redirected to the newly created article page.
Enhancements & testing:
- The body field is updated from an <input> to a <textarea> for longer content.
- The homepage and article list pages are updated to include a "New Article" link.
- A minor UI issue with list rendering is fixed by wrapping items correctly in <li> elements.

Transcript

Now that we've covered the "Read" operation in CRUD, allowing us to fetch and display a single article on its own page, let's move on to the "Create" operation.

Typically, when creating an article, a user clicks a link that navigates to a form page, enters the necessary details, and submits the form. The web application then processes the request and saves the article.

Setting up the route

The first step is to define a route that will display the article creation form:

Create a GET request to /articles/new.
Map it to the view-new action in the ArticlesController.

Run the following command to generate the action:

sails generate action articles/view-new

After creating the action, we need to add a corresponding view:

Create a new.ejs file inside the views/articles directory.

Creating the article form

The new.ejs file should contain a basic HTML form:

<form action="/articles" method="POST">
  <label for="title">Title:</label>
  <input type="text" name="title" required placeholder="Title" />

  <label for="body">Body:</label>
  <textarea name="body" required placeholder="Article body"></textarea>

  <button type="submit">Create Article</button>
</form>

This simple form collects the article's title and body before submitting the data using a POST request to /articles.

Handling the form submission

To handle the form submission, we need to:

Define a POST route for /articles in config/routes.js:

'POST /articles': 'articles/create-article',

Generate the create-article action:

sails generate action articles/create-article

Implement the logic inside api/controllers/articles/create-article.js:

module.exports = {
  friendlyName: 'Create article',
  inputs: {
    title: {
      type: 'string',
      required: true,
    },
    body: {
      type: 'string',
      required: true,
    },
  },
  exits: {
    success: {
      responseType: 'redirect',
    },
  },
  fn: async function (inputs) {
    const { id } = await Article.create({
      title: inputs.title,
      body: inputs.body,
    }).fetch();

    return `/articles/${id}`;
  },
};

Testing the implementation

Start the Sails server:

sails lift

Open /articles/new in a browser.
Fill in the form and submit it.
The application should redirect to the newly created article's page.

Adding navigation links

To improve user experience, add navigation links in views/home.ejs and views/articles.ejs:

<p><a href="/articles/new">New Article</a></p>

Fixing the article list display

Ensure articles are displayed correctly by using proper HTML structure in articles.ejs:

<ul>
  <% articles.forEach(article => { %>
    <li><a href="/articles/<%= article.id %>"><%= article.title %></a></li>
  <% }); %>
</ul>

Conclusion

With this implementation, users can now create articles through a simple form, submit the data, and be redirected to the new article's page. Additionally, navigation links and a properly formatted article list enhance the overall user experience.

Locked video