Content Management with Strapi Headless CMS – Part 2

How can we help?
< All Topics
Print

Content Management with Strapi Headless CMS – Part 2

So, we have successfully installed Strapi from the previous tutorial. Now, let’s go to the next step, creating content in Strapi. In this tutorial we will discuss the steps to create contents in Strapi and how to access it from API testing platform, Postman.

Building Content Structure

First, let’s create the content structure in Content-Type Builder.

Inside, you can find multiple content collections you can use. Choose which content type you want to use based on your need.

For example, when we use “Website Article“, we need to define the title and the content within the appropriate field, thus creating the structure of the content. By filling these fields, we can easily fill the content in the structure.

There are 3 content structure example given by Strapi based on the functionality in the Contenty-Type Builder:

  1. Collection Types
    This types is suitable to managed contents with similar characteristic from more than one kinds. For example, a web article site may contain a lot of article with multiple titles and contents. Collection Types can be used to create “articles”.

  2. Single Types
    This type is suitable to managed a unique content. For example, a website may contain only one “Title” and one “About Us“. Thus, you create “Home Page” using Single Types.

  3. Components
    This type is a collections of fields suitable for repeated use in multiple different content frames. For example, if multiple content frames have the same field, Components can make it easier for you.

You can refer to the following page to know more about these three content frame.

Creating content structure with Collection Type

We will use “Collection Type” to create our article.

Click ‘Create new collection type’ and fill in the “Display Name”. Make sure the name is in singular format since Strapi will automatically create the plural format for us. In this tutorial, we will fill it with  ‘article‘,  and ‘Continue‘.

Next is to define the fields.

Add ‘Text‘ so we can create our title.

Let’s named it ‘title‘ in this field.

If necessary, we can configure it the default value to ‘required’ or ‘unique’ to ensure no two articles is the same or based on your need.

+ Add another field‘ when you finished configure the the field.

Add ‘body‘ as the body or content of the article and choose “Rich Text” so we can format the content.

Choose ‘Finish‘ when you are done.

Choose ‘Save‘ to apply the configuration.

Filling the Conten

Now we have the basic structure for our content.

To start creating the content, open ‘Content Manager’, and choose ‘Add new entry‘ in the content structure ‘article’ we just made.

You will see previously made fields, such as title and body. Fill the fields accordingly and choose ‘Save‘ when you want to keep it as a draft or ‘Publish‘ if you want to immediately publish it.

User Configuration & Content Data Access Permision

The next step after we publish our first article is to configure the access permission of data for the public. This will ensure that only designated users can access our data.

To do the configuration go to ‘Settings’ -> ‘Users & Permissions Plugin’ -> ‘Roles.’

Note that there are two ‘Roles‘, one for Administration Panel, and the other one for Users & Permissions Plugin.

Administration Panel Roles

  • Used to manage permissions regarding Strapi administration.
  • Users have access to Strapi’s administration panel.
  • Three types are available: Author, Editor, and Super Admin, each with their own access rights

Users & Permissions Plugin Roles

  • User does not have access to Strapi’s administration panel.
  • Limited to only frontend side.
  • Two types are available: Authenticated, and Public

In simple terms, “Administration Panel Roles” is used to managed permissions regarding Strapi’s administration, while “Users & Permissions Plugin Roles” is used to managed permissions regarding access and manipulation of data by external user through frontend application.

This time, we will configure the “Users & Permissions Plugin Roles“.

Open ‘Public‘ role, which is for all users accessing the site without login.

List of articles accessible for this role will be visible here.

By ticking “Find” and “FindOne”, we will ensure all users designated as public will only see the content of the article.

Content Interaction Using Postman

Our tutorial’s last destination is to call and interact with the article through the website frontend, so visitors can interact with it.

To start, let’s test the endpoint using Postman. Postman is an excellent tool you can use to test the REST API endpoint and multiple CRUD requests (Create, Read, Update, Delete) for free.

Open Postman, create a new “Collection”, and fill in the name. Let’s name it ‘Strapi‘.

Now, let’s create a new API request.

Make sure the API request is based on what test we need to do.

Data Display

▶ Multiple Data

As the first example, we will use “Get Articles” using GET request.

The Request URL is based on the Strapi server endpoint + the URL content we want to access, as the following:

				
					GET http://163.53.195.233:1337/api/articles
				
			

Click ‘Send‘.

You can see the output of the API response as the above.

▶ Single Data

To call single data, we can use the following endpoint:

				
					GET http://163.53.195.233:1337/api/articles/1
				
			

By using the above endpoint, we will receive the article data with an ID “1”. Make sure to fill the correct ID to access the right article.

▶ Specific Field

To gather data from specific fields, change the endpoint URL by adding ‘fields‘ parameter. For example, to gather “title“, “body“, and “publishedAt” data, use the following endpoint:

				
					GET http://163.53.195.233:1337/api/articles?fields=title&fields=body&fields=publishedAt
				
			

▶ Relation Between Content

It is better for an article to have as many categories as it can. To achieve this, we need to create relation between ‘Content-Type Article’ with ‘Content-Type Category.’

We need to create a new content-type which is ‘Category‘ with the appropriate content structure.

Now, we will fill the content throgh the ‘Content Manager.’

Setelah itu, kita masuk kembali ke After that, we will go back to ‘Content-Type Builder’, in the Article we choose ‘Add another field‘, and choose ‘Relation.’

We will use ‘Many to Many’ relation, so that each article can connect to many categories and vice versa.

Click ‘Finish‘ to apply the changes.

Now, let’s edit the article we have made previously.

New field will appear at the bottom of the page to choose the categories that you can connect it to the article as you need.

To expand the relation, you need to add it based on your need.

▶ Using Populate

By default, Strapi’s REST API does not allow populate in relation, media fields, component, or dynamic zone for performance reason.

First, make sure you have open Public permissions for ‘Category’ type content like in the previous section.

To populate, we need to modify the endpoint URL.

  • To show data category connected to each article, use the following URL:
				
					GET http://163.53.195.233:1337/api/articles?populate=categories
				
			
  • If there are many relations in the contents and you want to populate it one level deep all of the relations, use the wildcard as follows:
				
					GET http://163.53.195.233:1337/api/articles?populate=*
				
			

Strapi also support performing populate for deeper level. You can refer to the following documentation for more information.

Populate helps you to efficiently gathering data and maintain relations.

▶ Combine Population With Other Operator

In Strapi, we can combine the populate operation with other operator to obtain more specific data. This will allow us to filter the data we want to display based on what we need.

For example, if we want to display the “title”, “body”, and “publication date”, while also connected it to data category with only “category name”, we can use the following endpoint:

				
					GET http://163.53.195.233:1337/api/articles?fields=title&fields=body&fields=publishedAt&populate[categories][fields]=name
				
			

With this endpoint, we will get filtered article data containing the desired category, and the data category will only show the “category name” column.

Also, we can add populate for a few levels deep with additional parameters. Such as, if we want to combine it with the second-level populate, we can use the following endpoint:

				
					GET http://163.53.195.233:1337/api/articles?fields=title&fields=body&fields=publishedAt&populate[categories][populate][0]=subcategories
				
			

We can utilize the “✨Interactive Query Builder” tool from Strapi to generate a more complex URL query rather than manually write the code up.

Managing Data

It is better for only authorized users, based on the roles we discussed previously, to be able to insert data into the Strapi.

For example, we have created a Comment-Type “Comment“, where this tutorial have configure the role “Authenticated” as such. This tutorial do it as such since we only want authenticated user to be able to write comments.

The user table is where you want to store the authenticated user data in our application. This table contains the username, email, and password, which is stored for authentication purposes.

▶ Registering Users

To register authenticated users, you can use the following endpoint:

				
					POST http://163.53.195.233:1337/api/auth/local/register
				
			

Next, use the following data format in the Postman Request Body:

				
					{
    "username"  : "Commenter 1",
    "email"     : "commenter1@comment.com",
    "password"  : "password123"
}
				
			

In the POST request, we need to include the credential of the user such as the username, email, and password as the data input.

When successful, Strapi will encrypt the password and safe the new user data in the “User” table.

After the user is successfully stored in the “User” table, a JSON Web Token (JWT) will also be generated for the user.

JWT needs to be stored as it is used to identify and authenticate the user for future API requests. JWT will become a part of the API request header as a Token Bearer for actions that require authentication.

▶ Add Data

Let’s try adding comments in the article with the following endpoint:

				
					POST http://163.53.195.233:1337/api/comments
				
			

Followed with the follwoing data format in the Request Body:

				
					{
    "data": {
        "comment"   : "bagus, keep up the good work",
        "article"   : 1
    }
}
				
			

Go to the ‘Auth‘ tab, and choose “Token Bearer” within the “Type” option and insert the JWT token in the empty field. Choose ‘Send‘ to complete the step.

We can see that a new comment has been added.

If you want to know more about how Strapi works, you can read it further in the following documentation:

For more specific information about CRUD activity that you can do with Strapi REST API, you can refer to the following documentation:

Conclusion

In this tutorial, we have learned the steps to create and managed multiple content types using Strapi.

We also learned about Postman as a test tool to interact with Strapi REST API endpoint. 

The next Strapi tutorial series will focus on how to implement the data from Strapi backend to the frontend using React.

If you haven’t yet familiarized yourself with Strapi, you can go to the previous tutorial where we discuss the basic.

For other tutorials regarding CloudRaya’s utilization, you can explore our Knowledge Base for more tutorials.

Table of Contents

2 Comments

  1. Hello! Crazy discounts, hurry up!
    We are Drop Dead Studio and our goal is to help companies achieve impressive sales results through automated marketing.
    [b]2 keys left for sale activation key for GSA Search Engine Ranker with a 50% discount[/b], we are selling due to the closure of the department that works on this software. The price is two times lower than the official store. At the output you will receive a name\key to work with.
    [b]Hurry up, keys are limited[/b] Write to us in telegram: https://t.me/DropDeadStudio!

    The fresh database for XRumer and GSA Search Engine Ranker has gone on sale, as well as a premium database collected by us personally, it contains only those links on which you will receive active links, that is, clickable ones + our own database of 4+ million contact links, for selling electronic goods and everything that your imagination allows you!
    [b]ATTENTION! 40% discount only until 04/10/2024[/b]!
    When applying, please indicate the promotional code [b]DD40%[/b] in telegram: https://t.me/DropDeadStudio!

  2. Hello! Crazy discounts, hurry up!
    We are Drop Dead Studio and our goal is to help companies achieve impressive sales results through automated marketing.
    I. [b]We sell fresh databases for GSA Search Engine Ranker.[/b]
    • The databases are updated monthly through 24/7 parsing and by connecting purchased databases from other sources.
    • You have the option to purchase a one-time fresh database or pay for a lifetime subscription for updates.
    [i][b]ATTENTION![/b][/i] 40% discount only until 04/10/2024!
    When applying, please indicate the promotional code [i][b]DD40%[/b][/i] in telegram: [i][b]@DropDeadStudio[/b]![/i]

    II. [b]We sell fresh databases for XRumer 19.0.18 — 23.0.3 StrongAI.[/b]
    • The databases are also updated monthly through 24/7 parsing and by connecting purchased databases from other sources.
    • You have the option to purchase a one-time fresh database or subscribe for lifetime updates.
    [i][b]ATTENTION![/b][/i] 40% discount only until 04/10/2024!
    When applying, please indicate the promotional code [i][b]DD40%[/b][/i] in telegram: [i][b]@DropDeadStudio[/b][/i]!

    III. [b]We sell our own premium databases for XRumer 19.0.18 — 23.0.3 StrongAI.[/b]
    • The databases are updated monthly and compiled by us through selection of all databases + including fresh ones specifically for active links, or in the case of contact forms, those links where your advertisement will be sent to the website owner.
    [i][b]ATTENTION![/b][/i] 40% discount only until 04/10/2024!
    When applying, please indicate the promotional code [i][b]DD40%[/b][/i] in telegram: [i][b]@DropDeadStudio[/b][/i]!

    IV. [b]We are selling the remaining activation keys for GSA Search Engine Ranker.[/b]
    • The activation keys are still available with us from the closed department that used this software, as we have fully transitioned to XRumer.
    [i][b]ATTENTION![/b][/i] 2 keys left for sale activation key for GSA Search Engine Ranker with a 50% discount! Write to us in telegram: [i][b]@DropDeadStudio[/b][/i]!

    V. [b]We can also help you choose and configure servers and virtual machines.[/b]
    • We have 7 XRumer licenses running simultaneously 24/7, and we can also assist with setting up XRumer and Xevil.

Leave a Reply

Your email address will not be published. Required fields are marked *

Post comment

Ready, Set, Cloud

Ready, Set, Cloud