Fast create CMS/Dashboard Admin with Admin On Rest

Sumber : https://marmelab.com/admin-on-rest

According to wikipedia CMS(Content Management System) is software used to add and manipulate content of dynamic web. The point is to manage content of dynamic web. Admin on rest is frontend Framework for building admin applications running in the browser on top of REST services. This framework(Admin on rest) can be used to create CMS/Admin Dashboard easier. Before going further on how to use Admin On Rest there are some things you need to know. Admin On Rest is a framework built with REST API, using ES6, React and Material Design.

Before using Admin On Rest you need some things :

1. Fundamental of Javasript (with ES6)
2. Fundamental of React
3. REST API for dashboard/CMS to be build

Build Basic Dasboard

In this example we will use JSONPlaceholder, a fake REST API as the datasource for the admin. We will build Create, Read (List), Update, and Delete (CRUD) for this basic tutorial. But remember that JSONPlaceholder is a read-only API; although it seems to accept POST , PUT and DELETE requests, it doesn’t take into account the creations and edits - that’s why, in this particular case, you will see errors after creation, and you won’t see your edits after you save them. It’s just an artifact of JSONPlaceholder.

1. Instalation

If you have not install create-react-app , please run npm install -g create-react-app

We will build basic dashboard with Facebook’s create-react-app to create an empty React app. Please run command below :

create-react-app cms
cd cms
yarn add admin-on-rest

2. Modify src/App.js

<Admin> component is the main component of admin-on-rest. This component has props restClient which expects a REST client as a parameter — a function capable of translating REST commands into HTTP requests.

jsonServerRestClient will handle responses in the same format as the endpoints from JSONPlaceholder. Other than that, you can find REST clients for various backends in third-party repositories here: https://marmelab.com/admin-on-rest//RestClients.html#available-clients. If you have different format you must custom REST client to handle it. Please check the code from the simple REST client: it’s a good starting point for a custom rest client implementation.

3. Create resource component ( src/posts.js )

Create file src/posts.js and copy source code below:

Source code above is used for create : list, form edit, form create, show detail and delete title for resource Post (endpoint /post).

• List (line 13–24)

Main component for PostList is <List> component. This component responsible for grabbing the information from the API, displaying the page title, and handling pagination. <List> component have child <Datagrid> component . This <Datagrid> component have one or more child and this child determine colunms to render. Each Field component maps a different field in the API response, specified by the source prop. You can find all field type here: https://marmelab.com/admin-on-rest/Fields.html.

There are <EditButton>, <ShowButton> and <DeleteButton> as <Datagrid> child. This button will appear in each row of list. If you put <EditButton> don’t forget to create Edit component and pass the component to Resource edit props. If you put <ShowButton> don’t forget to create Show Component and pass that component to Resource show props. And if you put <DeleteButton> don’t forget to pass the Delete component from admin-on-rest to Resource remove props. This button is not required. The most important when you want to build feature to Edit or Show is the component.

• Create and Edit Form

Line 43–50 is Create Component and line 32–40 is Edit Component. Main component for create is <Create> and main component for edit is <Edit>. That component responsible for fetching record. They pass the record down to <SimpleForm>. <SimpleForm> uses its children to determine the form inputs to display.

You can find all field type input here: https://marmelab.com/admin-on-rest/Inputs.html.

• Show detail

Line 53–60 is Show Component. Main component for show is <Show> which responsible for fetching record and pass down that record to child (<SimpleShowLayout>). <SimpleShowLayout> uses its children to determine field to display.

You can find all field type here: https://marmelab.com/admin-on-rest/Fields.html.

• Delete

If you want to build feature Delete you just need to pass Delete Component (import from admin-on-rest) to props remove in <Resource> and put <DeleteButton> on List Component. If you want to custom delete title line 63–65 is the solution. Default title for delete on admin on rest is Delete {idElementToDelete}.

4. Import resources to src/App.js

Modify src/App.js like source code below :

• Import PostList, PostEdit, PostCreate and PostShow from src/posts.js (line 4)
• Create Resource on child of Admin (line 8 – 14). Resource has 5 props: list, create, edit, show, and remove. This 5 props is not required.
• Note : Admin component can contain one or more <Resource> components, each resource being mapped to an endpoint in the API.

5. Run app : yarn start

6. Open : http://localhost:3000

You will see list, form create and form edit for endpoint /post like below:

Thats all basic tutorial for list, edit, create, delete and show detail on admin-on-rest. Thanks.
Source : https://marmelab.com/admin-on-rest/