Frosty CMS: Capturing New Post Data In A Form

January 29, 2020

Setting up forms to create new blog posts. Explains how Express captures and parses that data.

Table of Contents

Intro
Scaffolding the Form
Parsing Post Request
GitHub Repo

Intro

Continuing our series on Frosty CMS, where we are building a blog CMS from scratch. In this post we will be creating a “New Post” form and sending that data to our database for retrieval and display in our template.

Scaffolding the Form

The first and easiest step is to create a form with a field for each piece of data that we need our blog posts to contain. Specifically:

Title
Author
Content
Featured Image URL

We can add more options later, but this is the minimum for a bare bones blog.

Since we are using Bootstrap we can reference the Bootstrap Forms guide to create our template.

<!-- fixed width container for content -->
<div class="container-lg mt-5">

    <!--input for title, author, image, content -->
    <form action="/posts" method="post">

        <div class="form-group">
            <label for="featuredImageURL">
                <h4>Featured Image URL</h4>
            </label>
            <input type="text" class="form-control" id="featuredImageURL" name="image">
            <small id="imageHelp" class="form-text text-muted">Paste URL of a hosted image. Will create media database in future update.</small>
        </div>

        <div class="form-group">
            <label for="titleInput">
                <h4>Title</h4>
            </label>
            <input type="text" class="form-control" id="titleInput" placeholder="Enter Post Title" name="title">
        </div>

        <div class="form-group">
            <label for="authorInput">
                <h4>Author</h4>
            </label>
            <input type="text" class="form-control" id="authorInput" placeholder="Enter Author Name" name="author">
        </div>

        <div class="form-group">
            <label for="contentInput">
                <h4>Content</h4>
                </h4>
            </label>
            <textarea class="form-control" id="contentInput" rows="3" placeholder="Content goes here..." name="content"></textarea>
        </div>

        <button type="submit" class="btn btn-primary">Submit</button>

    </form>
</div>

TAKE NOTE OF THE ACTION

<form action="/posts" method="post">

This is key, because it is telling the form what to do when you hit the submit button. We are telling the form to make a POST request, and we are telling it where to send the POST request, which in this case is /posts. In our application we will soon be writing a POST route to capture the data from this form and redirect it for storage.

Additionally take note of the name attribute on the inputs, as that is what we will be referencing in our POST routes.

Parsing Post Request

Next we need to tell our app to listen for POST requests, and we need to parse out the body data that we receive for what is actually meaningful for us. AKA – the new post data. Make sure you have body-parser installed and imported.

// import body-parser
var bodyParser = require("body-parser");

// use body-parser
app.use(bodyParser.urlencoded({extended:true}));

Then we create a POST route that makes variables to capture all those named fields in the form, we combine those variables into one object called newPost and we .push the new object onto our posts array.

app.post("/posts", function(req, res){
    // get data from form and add to posts array
    var title = req.body.title;
    var author = req.body.author;
    var content = req.body.content;
    var image = req.body.image;
    
    var newPost = {title: title, author: author, content: content, image: image};
    posts.push(newPost);
    // redirect back to posts page
    res.redirect("/posts");
});

The next step is to push the data to a real database so that the data is persistent: Frosty CMS: Setting up the Database

GitHub Repo

Ncoughlin: Frosty

Recent Work

Basalt

basalt.software

Free desktop AI Chat client, designed for developers and businesses. Unlocks advanced model settings only available in the API. Includes quality of life features like custom syntax highlighting.

Learn More

Technologies Used

TypeScript

Electron

React

BidBear

bidbear.io

Bidbear is a report automation tool. It downloads Amazon Seller and Advertising reports, daily, to a private database. It then merges and formats the data into beautiful, on demand, exportable performance reports.

Learn More