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:
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”.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.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:
- CRUD with REST API Strapi: https://docs.strapi.io/dev-docs/api/rest/
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.