Alt Text

Welcome to part-9 of the series.

As told in the earlier post, this series is based on the learning from this awesome udemy course by John Smilga

Now, it’s time to get out data and display it in our project. We can do this with internal data, but we will use headless CMS to store our data and then will consume it.

We will use contentful for our project. So, go ahead and signup. Now, when you go to the dashboard for the first time you will get the below screen.

Contentful spaceContentful space

Once we click on Add a space, we will be displayed the below pop-up. It shows that we have two free spaces and can have up-to 5000 records in the free account.

Add a spaceAdd a space

Once you click on the Free tab, it will open the below pop-up. Here, you have to type the Space name.

amazing hampiamazing hampi

Once you clicked on Proceed to confirmation on the above screen, it will show the below Confirmation screen.

ConfirmConfirm

Once you clicked on Confirm and create space, it will take to the below screen. Here, Content model and Content are the important tabs.

Home pageHome page

The Content model describes the fields of data and the Content describes the data. So, head over to the Content model tab and click on Add content type.

Add content typeAdd content type

Next, we have to give a Name and Description and click on Create.

NameName

We are basically creating data about different places to visit in Hampi. The next screen will ask us to add some fields.

Add fieldAdd field

So, let’s add some fields by clicking on the Add field button. The next screen will show as the type of fields. We will select Text by clicking on it.

Add new fieldAdd new field

In the below screen give a Name. In our case it is name and then click on Create and configure.

New Text fieldNew Text field

Then in the next screen first click on the tab Validations and then select the checkbox Required field. We are doing this, so that the user cannot leave this field empty. After this click on the Save button.

ValidationsValidations

The next field will be slug and it will be a text field and required like name. This field basically for the text at the end of url, which represent each place. Follow the same process as name and create the field.

slugslug

Next, we will create Time Required field. This field tells the tourist the time required to visit a place. This will be an integer field, but not a required field.

So, once you clicked on Add field, in the pop-up click on Number.

NumberNumber

Give it a Name and then click on Create, since it is not a required field.

CreateCreate

Next, create Timings and Entry Fees field. Both of them will be short text and not required.

timings and entry-feestimings and entry-fees

Next, we will create the field Description. It will be Long text and required.

DescriptionDescription

In the Home page we will have Featured places, which will contain the top 3 places to visit in Hampi. So, let’s create a Boolean field for it.

Once you click on Add Field, select Boolean as below screen.

BooleanBoolean

Give it a name featured and click on Create and configure to make it required field.

featuredfeatured

Next, we will create the field for images. It will hold one or more images, required for a place.

Once you click on Add Field, select Media as below screen.

Media selectedMedia selected

In the Name give images, then select the radio box for Many files. Then click on Create and configure to make it required field, before Saving.

imagesimages

Now, we are done with all the model. So, press the Save button on the top right corner.

Save itSave it

This completes part-9 of the series.

We will start adding data in part-10.

This post is also available on DEV.