Creating Image Repository Service (Part 2)

Hello there ! What’s going on ? I hope everyone is doing well and healthy as well. All right, back to the topic, in this opportunity I would like to show CRUD Operation. So, let’s dive in!

Continuing development using Strapi

First, open Command Line Interface (CLI) and change the directory to the imagerepo folder by typing :

$ cd imagerepo

Start yarn using :

$ yarn develop

Note :

If you use npm :

$ npm run develop

Type localhost:1337 in any browser’s address bar, then you will be redirected to strapi login page. Fill in your username and password to login.

Dashboard page is seen immediately if login is successful.

CRUD Operation in Strapi

CRUD stands for Create-Read-Update-Delete, which is a set of operations that enables users to modify contents. These operations are already provided in Strapi, so let’s checkout!

CRUD – Part 1 : Create

Next, click on Imagerepos under Collection Types at the left side of the page.

Next, click on the + Add new Imagerepo button (in the top right corner).

Actually the ‘Foto’ field for uploading images is placed below the ‘Biodata’ field. I would like to set the ‘Foto’ field to the top of the entry, so data is shown in this order, from top to bottom : Photo – Name – Biodata.

“ All right, hmm… how to to configure it ? “

Click the Configure the view button (in the top right side of the page), eventually the screen will be like this :

Notice on the Displayed Fields that ‘Nama’ is the first field of entry. So, just drag the ‘Foto’ field to the top. The result should be like below :

Now click the Save button in the top right corner to save the configuration.

A prompt will appear, but no need to be panic since it only wants to make sure the changes in configuration. Click confirm to make changes.

Great ! The ‘Foto’ field is now placed as desired.

Enter in the following information for your first Image Repository Service !

In the Foto field, choose your image.
In the Nama field, enter your name.
In the Biodata field, enter your biodata.

As an example, my first input is :

In the Biodata field, I gave some edits, such as bold, italic, underscore, etc. to the several words to see effects. In markdown, it is seen like this :

Pressing Switch to preview button on the top right corner will enable the effects like below!

Next, click Save button on the top right corner to save the entry… then… Voila! We have successfully made an input!

CRUD – Part 2 : Update

Like the ‘Create’ operation, update is an essential action as well. It allows users to edit or modify, add, and make changes to the contents that have already been published or added. Now let’s jump right in!

WAIT! Let’s have a quiz before continuing 🙂

Q : To update, a user must press the “pencil” icon on the right side of the content bar. Is this correct?

A : Nope! You can select any area of the content bar EXCEPT the garbage icon, to update.

Ok, click any area of the content bar, then let’s update. In this case, I updated the Nama field to : ‘Ady Putra Al-Hakim’ , and the Biodata field, which I added ‘Java’ to the list of preferred programming languages.

After making changes, click the Save button on the top right of the page, instead of clicking the arrow button on the top left of the page. Otherwise, Strapi won’t update the content!

The changes were successfully made, as shown below :

CRUD – Part 3 : Delete

“ Oopss… the content is entirely wrong”

“ I would like to delete this person. He is not member of this club anymore”

Calm down, Delete operation is there for you. To remove content, this operation is vital.

To understand it better, I added a new entry.

Just like Update operation, Delete operation can be conducted only by clicking any area of the content bar but you will have to click the Delete button eventually.

“ Can I shorten the process ? “

Of course, just click the garbage button, and it will prompt this :

Click the Confirm button to remove the content. Just make sure that you are not deleting any content that you are not supposed to.

Strapi will give you notification like this on the top of the page, only if the Delete operation was done.

CRUD – Part 4 : Read

Read Operation is actually to see table records based on input. It is not complicated as previous operations. Below is the Read operation :

“ What !? No query or pressing any buttons? “

Hmm.. view or what fields are displayed could be set by clicking the setting icon on the right side of the page, below +Add New imagerepo button. Next, click Configure the View button on the dropdown.