2019-05-06 16:17:16 +02:00
# Tutorial
2019-09-05 18:53:51 +02:00
This **tutorial** is written for developers to **teach and explain** a step-by-step introduction to Strapi. (The [Quick Start Guide ](/3.0.0-beta.x/getting-started/quick-start.html ) is a more concise **How-to** version.) This tutorial takes you through the beginning steps of how you start a project like ** "FoodAdvisor"** ([Github ](https://github.com/strapi/foodadvisor/ ))([Demo ](https://foodadvisor.strapi.io/ )).
2019-05-06 16:17:16 +02:00
2019-09-05 18:53:51 +02:00
You get a good overview of the features developers love found in Strapi.
2019-05-06 16:17:16 +02:00
2019-09-12 10:13:28 +02:00
< iframe width = "800" height = "450" src = "https://www.youtube.com/embed/vulcVRQ4X8A" frameborder = "0" allow = "accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen > < / iframe >
2019-09-05 18:53:51 +02:00
By following this tutorial, you install and create your first Strapi project.
2019-05-06 16:17:16 +02:00
::: tip NOTE
2019-09-05 18:53:51 +02:00
You need to have **_Node.js and npm_** installed on your system before following these steps. If you do not have Node.js and npm installed (or are not sure), please visit our [Installation Requirements ](/3.0.0-beta.x/getting-started/install-requirements.html ).
2019-08-01 15:50:56 +02:00
2019-05-06 16:17:16 +02:00
:::
2019-08-01 15:50:56 +02:00
**Table of Contents**
2019-05-06 16:17:16 +02:00
2019-09-05 18:53:51 +02:00
1. [Install Strapi and create project ](/3.0.0-beta.x/getting-started/quick-start-tutorial.html#_1-install-strapi-and-create-a-project )
2019-08-01 15:50:56 +02:00
2. [Create an Administrator and front-end User ](/3.0.0-beta.x/getting-started/quick-start-tutorial.html#_2-create-an-adminstrator-and-front-end-user )
2019-07-30 18:48:27 +02:00
3. [Create a new Content Type called, "Restaurant" ](/3.0.0-beta.x/getting-started/quick-start-tutorial.html#_3-create-a-new-content-type-called-restaurant )
2019-08-01 15:50:56 +02:00
4. [Create a new Content Type called, "Category" ](/3.0.0-beta.x/getting-started/quick-start-tutorial.html#_4-create-a-new-content-type-called-category )
2019-09-05 18:53:51 +02:00
5. [Create a new Group and Repeatable Field called, "Hours of Operations" ](/3.0.0-beta.x/getting-started/quick-start-tutorial.html#_5-create-a-new-group-and-repeatable-field-called-hours-of-operation )
6. [Manage and add content to the "Restaurant" Content Type ](/3.0.0-beta.x/getting-started/quick-start-tutorial.html#_6-manage-and-add-content-to-a-restaurant-content-type )
7. [Set Roles and Permissions ](/3.0.0-beta.x/getting-started/quick-start-tutorial.html#_7-set-roles-and-permissions )
2019-07-30 18:48:27 +02:00
8. [Consume the Content Type API ](/3.0.0-beta.x/getting-started/quick-start-tutorial.html#_8-consume-the-content-type-api )
2019-05-06 16:17:16 +02:00
2019-09-05 18:53:51 +02:00
## 1. Install Strapi and create a project
2019-05-06 16:17:16 +02:00
2019-08-01 15:50:56 +02:00
- Navigate to your parent `Projects/` directory from your command line.
2019-05-06 16:17:16 +02:00
2019-09-09 16:27:42 +02:00
**Note:** In this tutorial, the example assumes a **Projects** folder on your **Desktop** . However, this is not required, and you may put your project where you want.
2019-09-05 18:53:51 +02:00
2019-07-30 18:48:27 +02:00
Path: `~/Desktop/Projects/`
2019-05-06 16:17:16 +02:00
2019-08-01 15:50:56 +02:00
Use **only one** of the following commands to create a new Strapi project:
---
2019-09-09 19:15:18 +02:00
- Use **yarn** to install the Strapi project (**recommended**). [Install yarn with these docs ](https://yarnpkg.com/lang/en/docs/install/ )
2019-05-06 16:17:16 +02:00
2019-07-30 18:48:27 +02:00
```bash
2019-08-23 19:01:03 +02:00
yarn create strapi-app my-project --quickstart
2019-05-06 16:17:16 +02:00
```
2019-08-01 15:50:56 +02:00
**or**
2019-09-09 19:15:18 +02:00
- Use **npm/npx** to install the Strapi project
2019-05-06 16:17:16 +02:00
```bash
2019-08-23 19:01:03 +02:00
npx create-strapi-app my-project --quickstart
2019-05-06 16:17:16 +02:00
```
2019-08-01 15:50:56 +02:00
---
2019-05-06 16:17:16 +02:00
2019-09-05 18:53:51 +02:00
The command creates a Strapi project `my-project/` folder within your parent `Projects/` directory.
2019-05-06 16:17:16 +02:00
2019-08-01 15:50:56 +02:00
::: tip NOTE
2019-06-14 18:53:32 +02:00
2019-09-05 18:53:51 +02:00
When you create a new Quick Start(`--quickstart` ) project, Strapi downloads the node modules and the Strapi files needed. Using `--quickstart` automatically completes an **additional** step of **building the administration panel** for Strapi and then **starting** Strapi for you. This opens the browser for you and brings you to the [Welcome ](http://localhost:1337/admin/plugins/users-permissions/auth/register ) page.
2019-05-06 16:17:16 +02:00
:::
::: tip NOTE
2019-09-05 18:53:51 +02:00
You can replace the `my-project` name with any name you want. E.g., `yarn create strapi-app my-foodadvisor-project --quickstart` creates a folder `./Projects/my-foodadvisor-project` .
2019-05-06 16:17:16 +02:00
:::
2019-09-05 18:53:51 +02:00
You see something like this. The output below indicates that your Strapi project is being downloaded and installed.
2019-05-06 16:17:16 +02:00
```bash
2019-07-30 18:48:27 +02:00
yarn create v1.17.3
[1/4] 🔍 Resolving packages...
[2/4] 🚚 Fetching packages...
[3/4] 🔗 Linking dependencies...
[4/4] 🔨 Building fresh packages...
success Installed "create-strapi-app@3 .0.0-beta.14" with binaries:
- create-strapi-app
[#####################################################################] 71/71Creating a new Strapi application at /Users/paulbocuse/Desktop/Projects/my-project.
2019-05-06 16:17:16 +02:00
2019-07-30 18:48:27 +02:00
Creating a quickstart project.
Creating files.
Dependencies installed successfully.
2019-05-06 16:17:16 +02:00
2019-07-30 18:48:27 +02:00
Your application was created at /Users/paulbocuse/Desktop/Projects/my-project.
2019-05-06 16:17:16 +02:00
2019-07-30 18:48:27 +02:00
Available commands in your project:
2019-05-06 16:17:16 +02:00
2019-07-30 18:48:27 +02:00
yarn develop
Start Strapi in watch mode.
2019-06-14 18:53:32 +02:00
2019-07-30 18:48:27 +02:00
yarn start
Start Strapi without watch mode.
yarn build
Build Strapi admin panel.
yarn strapi
Display all available commands.
You can start by doing:
cd /Users/paulbocuse/Desktop/Projects/my-project
yarn develop
Running your Strapi application.
2019-05-06 16:17:16 +02:00
```
2019-09-05 18:53:51 +02:00
Next, you notice the following that builds your Strapi administration panel and automatically starts up Strapi:
2019-07-30 18:48:27 +02:00
```bash
> my-project@0.1.0 develop /Users/paulbocuse/Desktop/Projects/my-project
> strapi develop
Building your admin UI with development configuration ...
✔ Webpack
Compiled successfully in 52.21s
[2019-07-30T15:21:17.698Z] info File created: /Users/paulbocuse/Desktop/Projects/my-project/extensions/users-permissions/config/jwt.json
[2019-07-30T15:21:17.701Z] info The server is restarting
[2019-07-30T15:21:19.037Z] info Time: Tue Jul 30 2019 17:21:19 GMT+0200 (Central European Summer Time)
[2019-07-30T15:21:19.037Z] info Launched in: 910 ms
[2019-07-30T15:21:19.038Z] info Environment: development
[2019-07-30T15:21:19.038Z] info Process PID: 70615
[2019-07-30T15:21:19.038Z] info Version: 3.0.0-beta.14 (node v10.16.0)
[2019-07-30T15:21:19.038Z] info To shut down your server, press < CTRL > + C at any time
[2019-07-30T15:21:19.038Z] info ☄️ Admin panel: http://localhost:1337/admin
[2019-07-30T15:21:19.039Z] info ⚡️ Server: http://localhost:1337
```
2019-05-06 16:17:16 +02:00
2019-08-23 19:01:03 +02:00

2019-05-06 16:17:16 +02:00
::: tip NOTE
2019-09-09 16:27:42 +02:00
Using the `--quickstart` flag installs Strapi using an [SQLite ](https://www.sqlite.org/index.html ) database. You may, at any time, leave off the ** --flag**, but you need to follow a few configuration steps for your database choice. **You need to have your database choice installed and running locally before creating your project.**
2019-07-30 18:48:27 +02:00
2019-09-05 18:53:51 +02:00
**Note:** An **SQLite** database is an excellent database to use for prototyping and _developing_ Strapi projects. **SQLite** is a light database that ports effortlessly to the other relational databases (**MySQL**, **PostgreSQL** , and **MariaDB** ). It is recommended to **develop** with SQLite and to use another relational database (MySQL, PostgreSQL or MariaDB) in production.
2019-09-02 19:44:44 +02:00
2019-09-05 18:53:51 +02:00
**Note:** If you would like to use **MongoDB** in production, you need to [install, run, and use MongoDB to develop your Strapi project (in development) ](/3.0.0-beta.x/guides/databases.html#mongodb-installation ).
2019-05-06 16:17:16 +02:00
:::
2019-07-30 18:48:27 +02:00
You are now ready to create a new **Administrator** and new front-end **User** .
## 2. Create an Adminstrator and front-end User
2019-05-06 16:17:16 +02:00
2019-09-09 16:27:42 +02:00
The first step is to create an **Administrator** (or "root user") for your project. An **Administrator** has all administrator privileges and access rights. (You can read more about why **Administrators** and front-end **Users** are separate [here ](https://blog.strapi.io/why-we-split-the-management-of-the-admin-users-and-end-users/ ).)
2019-09-05 18:53:51 +02:00
You need to complete the following fields:
2019-05-06 16:17:16 +02:00
2019-09-05 18:53:51 +02:00
- **Username**, create a username for login access to your project, e.g., `paulbocuse`
2019-08-01 15:50:56 +02:00
- **Password**, create a unique password for logging into your project
2019-09-05 18:53:51 +02:00
- **Email address**, this is used for recovery
2019-08-01 15:50:56 +02:00
- Check **Receive news** , this is optional but **recommended**
- Click the **Ready to Start** button
2019-05-06 16:17:16 +02:00
2019-08-23 19:01:03 +02:00

2019-05-06 16:17:16 +02:00
2019-09-05 18:53:51 +02:00
After your **Administrator** registration is complete, you see the Strapi _Administration Dashboard_ :
2019-05-06 16:17:16 +02:00
2019-09-02 19:44:44 +02:00

2019-07-30 18:48:27 +02:00
2019-08-01 15:50:56 +02:00
**Administrators** and front-end **Users** are separate roles.
2019-07-30 18:48:27 +02:00
2019-09-05 18:53:51 +02:00
**A.** An **Administrator** has access and rights to the Administration Dashboard (or backend) of Strapi. **Administrators** can, for example, add content, add plugins, and upload images.
2019-07-30 18:48:27 +02:00
2019-09-09 16:27:42 +02:00
**B.** A front-end **User** is someone who interacts with your project through the front-end. A front-end **User** can, for example, be an "Author" of an article, make a purchase, has an account, leaves a review, or leaves a comment.
2019-07-30 18:48:27 +02:00
2019-09-09 16:27:42 +02:00
Up until this point, you have created an **Administrator** , and so you next want to create a front-end **User** .
**Note:** It is not necessary to always create a front-end **User** for your **Administrators** ; in this case, the **Administrator** is also a front-end **User** as an "Author" of content in the application.
2019-07-30 18:48:27 +02:00
2019-08-23 19:01:03 +02:00
- Click on `Users` located under **CONTENT TYPES** in the left-hand menu
- Click the blue ** + Add New User** button in the top right corner
- Next, complete the `Username` , `Email` , and `Password` fields
- Select `ON` for the **Confirmed** toggle field
- To the right, under **Role** , select `Authenticated`
2019-09-05 18:53:51 +02:00
- Save the new user by clicking the blue **Save** button (top right)
2019-07-30 18:48:27 +02:00
2019-09-02 19:44:44 +02:00

2019-07-30 18:48:27 +02:00
2019-08-01 15:50:56 +02:00
You are now ready to create your first **Content Type** .
2019-07-30 18:48:27 +02:00
2019-09-05 18:53:51 +02:00
## 3. Create a new Content Type called "Restaurant"
2019-07-30 18:48:27 +02:00
2019-09-05 18:53:51 +02:00
**Content Types** are a collection of entered data represented by fields. For example, a **Content Type** called `Restaurant` may be intended to display information regarding restaurants. A `restaurant` **Content Type** could have fields that include a `name` , the main `image` , and a `description` - _at a minimum_ . However, a `restaurant` could also have a `category` or multiple `categories` , and a `restaurant` could perhaps need to show `hoursofoperation` .
2019-07-30 18:48:27 +02:00
2019-09-05 18:53:51 +02:00
A **Content Type** can be considered a sort of _blueprint_ for the data created. In other words, a **Content Type** is the schema of the data structure.
2019-09-02 19:44:44 +02:00
2019-09-05 18:53:51 +02:00
The next section guides you through the steps needed for each of these above **Content Type** fields.
2019-07-30 18:48:27 +02:00
2019-08-01 15:50:56 +02:00
::: tip NOTE
2019-07-30 18:48:27 +02:00
2019-09-05 18:53:51 +02:00
Additional **Restaurant** themed **Content Types** and fields can be seen in the [FoodAdvisor demo site ](https://foodadvisor.strapi.io/ ).
2019-07-30 18:48:27 +02:00
2019-08-01 15:50:56 +02:00
:::
2019-07-30 18:48:27 +02:00
2019-08-01 15:50:56 +02:00
### The Restaurant Content Type
2019-07-30 18:48:27 +02:00
2019-09-09 19:15:18 +02:00
- Go to the **Content Type Builder** plugin, located in the left menu: Under **PLUGINS** : --> **Content Type Builder**
2019-05-06 16:17:16 +02:00
2019-09-09 19:15:18 +02:00
You are now able to see the three available **Content Types** . At this point, three Content Types are available `Permission` , `Role` , and `Users` .
2019-09-05 18:53:51 +02:00
2019-09-02 19:44:44 +02:00

2019-05-06 16:17:16 +02:00
2019-09-05 18:53:51 +02:00
You need to create a new **Content Type** for `Restaurants` .
2019-09-02 19:44:44 +02:00
2019-09-05 18:53:51 +02:00
1. Complete these steps to **Add a Restaurant Content Type** :
2019-09-02 19:44:44 +02:00
2019-09-09 16:27:42 +02:00
- Click the `+ Add A Content Type` link (under existing **CONTENT TYPES** )
2019-09-05 18:53:51 +02:00
- Enter a **Name** for your new **Content Type** (call this `restaurant` ), and you can write `Restaurant Listings` for the **Description**
2019-08-23 19:01:03 +02:00
- Click the `Done` button
2019-05-06 16:17:16 +02:00
2019-09-02 19:44:44 +02:00

2019-05-06 16:17:16 +02:00
2019-06-14 18:53:32 +02:00
::: tip NOTE
2019-05-06 16:17:16 +02:00
2019-08-23 19:01:03 +02:00
The Content Type **Name** is always **singular** . For example, `restaurant` not `restaurants` .
2019-05-06 16:17:16 +02:00
2019-06-14 18:53:32 +02:00
:::
2019-05-06 16:17:16 +02:00
2019-09-02 19:44:44 +02:00
2. You are now at the **Field Selection** panel:
2019-05-06 16:17:16 +02:00
2019-09-05 18:53:51 +02:00
You may add your first field, a **String** field for the **Restaurant** name.
2019-05-06 16:17:16 +02:00
2019-09-02 19:44:44 +02:00

2019-05-06 16:17:16 +02:00
2019-08-23 19:01:03 +02:00
- Click on the `String` field
2019-09-09 19:15:18 +02:00
- In the **Name** field, type `name`
2019-05-06 16:17:16 +02:00
2019-09-02 19:44:44 +02:00

2019-05-06 16:17:16 +02:00
2019-08-23 19:01:03 +02:00
- Click on the `ADVANCED SETTINGS` tab
- Check the `Required field` checkbox
- Check the `Unique field` checkbox
2019-05-06 16:17:16 +02:00
2019-09-02 19:44:44 +02:00

- Click the `+ Add Another Field` button
2019-05-06 16:17:16 +02:00
2019-08-23 19:01:03 +02:00
You are now ready to add the second field, a **Rich Text** field for the **Restaurant** description.
2019-05-06 16:17:16 +02:00
2019-09-02 19:44:44 +02:00

2019-05-06 16:17:16 +02:00
2019-08-23 19:01:03 +02:00
- Click the `Rich Text` field
2019-05-06 16:17:16 +02:00
2019-09-09 19:15:18 +02:00
- In the **Name** field, type `description`
2019-05-06 16:17:16 +02:00
2019-09-02 19:44:44 +02:00

- Click the `+ Add Another Field` button
2019-05-06 16:17:16 +02:00
2019-08-23 19:01:03 +02:00
You are now ready to add the third field, a **Media** field for the **Restaurant** thumbnail image.
2019-05-06 16:17:16 +02:00
2019-09-02 19:44:44 +02:00

2019-05-06 16:17:16 +02:00
2019-08-23 19:01:03 +02:00
- Click the `Media` field
2019-05-06 16:17:16 +02:00
2019-09-09 16:27:42 +02:00
- In the **Name** field, type `image`
2019-09-02 19:44:44 +02:00

2019-08-23 19:01:03 +02:00
- Click on the **ADVANCED SETTINGS** tab
- Check the `Required field` checkbox
2019-09-02 19:44:44 +02:00

- Click the `Done` button
2019-08-23 19:01:03 +02:00
2019-09-09 16:27:42 +02:00
Your new Content Type called **Restaurant** is ready to be **Saved** .
2019-08-23 19:01:03 +02:00
2019-09-02 19:44:44 +02:00

2019-05-06 16:17:16 +02:00
2019-09-02 19:44:44 +02:00
- Click the `Save` button
2019-05-06 16:17:16 +02:00
2019-08-23 19:01:03 +02:00
- Wait for Strapi to restart
2019-05-06 16:17:16 +02:00
2019-09-02 19:44:44 +02:00

2019-05-06 16:17:16 +02:00
2019-09-05 18:53:51 +02:00
After Strapi has restarted, you are ready to continue to create the `Category` **Content Type** .
2019-05-06 16:17:16 +02:00
2019-09-05 18:53:51 +02:00
## 4. Create a new Content Type called "Category"
2019-05-06 16:17:16 +02:00
2019-08-01 15:50:56 +02:00
### The Category Content Type
2019-05-06 16:17:16 +02:00
2019-09-09 16:27:42 +02:00
The `Category` **Content Type** will have a **String** field named `category` , and a **Relation field** with a **Many to Many** relationship.
2019-06-14 18:53:32 +02:00
2019-09-02 19:44:44 +02:00

2019-05-06 16:17:16 +02:00
2019-09-05 18:53:51 +02:00
1. Complete these steps to **add a Category Content Type** :
2019-05-06 16:17:16 +02:00
2019-09-09 19:15:18 +02:00
- Click the `+ Add A Content Type` link
- Enter a **Name** for your new **Content Type** (call this `category` )
- Enter `Restaurant Categories` for the **Description**
2019-05-06 16:17:16 +02:00
2019-09-02 19:44:44 +02:00

2019-05-06 16:17:16 +02:00
2019-09-09 19:15:18 +02:00
- Click the `Done` button
2019-05-06 16:17:16 +02:00
2019-09-02 19:44:44 +02:00
2. Now, you are ready to add fields to your **Category** :
2019-05-06 16:17:16 +02:00
2019-09-02 19:44:44 +02:00

2019-05-06 16:17:16 +02:00
2019-09-09 19:15:18 +02:00
- Click on the `String` field
- In the **Name** field, type `name`
2019-05-06 16:17:16 +02:00
2019-09-02 19:44:44 +02:00

2019-05-06 16:17:16 +02:00
2019-08-23 19:01:03 +02:00
- Click on the `ADVANCED SETTINGS` tab
- Check the `Required field` checkbox
- Check the `Unique field` checkbox
2019-05-06 16:17:16 +02:00
2019-09-02 19:44:44 +02:00

2019-05-06 16:17:16 +02:00
2019-09-02 19:44:44 +02:00
- Click the `+ Add Another Field` button
2019-05-06 16:17:16 +02:00
2019-09-02 19:44:44 +02:00
You are now ready to add the second field, a **Relation** field for creating a **Many to Many** relationship between the **Category** and **Restaurant** Content Types.
2019-05-06 16:17:16 +02:00
2019-09-09 19:15:18 +02:00
- Click on the `Relation` field
2019-05-06 16:17:16 +02:00
2019-09-02 19:44:44 +02:00

2019-05-06 16:17:16 +02:00
2019-09-05 18:53:51 +02:00
This brings you to the **Add New Relation** screen.
2019-05-06 16:17:16 +02:00
2019-09-02 19:44:44 +02:00

2019-05-06 16:17:16 +02:00
2019-09-09 19:15:18 +02:00
- Click on _right dropdown_ with `Permission (Users-Permissions)` and change it to `Restaurant`
2019-05-06 16:17:16 +02:00
2019-09-02 19:44:44 +02:00

2019-05-06 16:17:16 +02:00
2019-09-09 19:15:18 +02:00
- Click the `Many to Many` icon (from the middle icon choices). It should now read, ** "Categories has and belongs to many Restaurants"**
2019-09-02 19:44:44 +02:00

2019-05-06 16:17:16 +02:00
2019-09-09 19:15:18 +02:00
- Click the `Done` button
2019-09-05 18:53:51 +02:00
2019-09-02 19:44:44 +02:00

2019-05-06 16:17:16 +02:00
2019-09-09 19:15:18 +02:00
- Click the `Save` button
2019-09-09 16:27:42 +02:00
2019-09-09 19:15:18 +02:00
- Wait for Strapi to restart
2019-05-06 16:17:16 +02:00
2019-09-02 19:44:44 +02:00

2019-05-06 16:17:16 +02:00
2019-09-05 18:53:51 +02:00
After Strapi has restarted, you are ready to create a `Group and Repeatable Field` called ** "Hours of Operations."**
2019-05-06 16:17:16 +02:00
2019-09-05 18:53:51 +02:00
## 5. Create a new Group, and Repeatable Field called, "Hours of Operation"
2019-05-06 16:17:16 +02:00
2019-09-02 19:44:44 +02:00
### The Hours of Operation Group
2019-05-06 16:17:16 +02:00
2019-09-09 16:27:42 +02:00
The `Restaurant` Content Type has a **Group** field named `Hours_of_operation` . This Group is **Repeatable** and for displaying the **Opening hours** and **Closing hours** of a **Restaurant** .
2019-05-06 16:17:16 +02:00
2019-09-02 19:44:44 +02:00
1. Complete these steps to **add a new Group** :
2019-05-06 16:17:16 +02:00
2019-09-09 19:15:18 +02:00
- Click the `+ Add A Group` link to add a new **Group**
- Enter a **Name** for your new **Group** (call this `hours_of_operation` ), and you can write `Hours of Operation` for the **Description**
2019-08-01 15:50:56 +02:00
2019-09-02 19:44:44 +02:00

2019-08-01 15:50:56 +02:00
2019-09-02 19:44:44 +02:00
- Click the `Done` button
2019-08-01 15:50:56 +02:00
2019-09-02 19:44:44 +02:00
2. Now, you are ready to add fields to your **Group** :
2019-08-01 15:50:56 +02:00
2019-09-02 19:44:44 +02:00

2019-05-06 16:17:16 +02:00
2019-09-02 19:44:44 +02:00
- Click on the `String` field
2019-09-09 19:15:18 +02:00
- In the **Name** field, type `day_interval` . This is to enter the **Day (or Days)** with **Hours of Operation**
2019-05-06 16:17:16 +02:00
2019-09-02 19:44:44 +02:00

2019-05-06 16:17:16 +02:00
2019-09-02 19:44:44 +02:00
- Click on the `ADVANCED SETTINGS` tab
- Check the `Required field` checkbox
2019-05-06 16:17:16 +02:00
2019-09-02 19:44:44 +02:00

2019-05-06 16:17:16 +02:00
2019-09-02 19:44:44 +02:00
- Click the `+ Add Another Field`
2019-05-06 16:17:16 +02:00
2019-09-02 19:44:44 +02:00
You are now ready to add a second field, another **String** field for the **Opening Hours** .
2019-05-06 16:17:16 +02:00
2019-09-02 19:44:44 +02:00

2019-05-06 16:17:16 +02:00
2019-09-02 19:44:44 +02:00
- Click on the `String` field
2019-09-09 19:15:18 +02:00
- In the **Name** field, type `opening_hours`
2019-05-06 16:17:16 +02:00
2019-09-02 19:44:44 +02:00

2019-05-06 16:17:16 +02:00
2019-09-02 19:44:44 +02:00
- Click the `+ Add Another Field` button
2019-05-06 16:17:16 +02:00
2019-09-02 19:44:44 +02:00
You are now ready to add a third field, another **String** field for the **Closing Hours** .
2019-05-06 16:17:16 +02:00
2019-09-02 19:44:44 +02:00

2019-05-06 16:17:16 +02:00
2019-09-02 19:44:44 +02:00
- Click on the `String` field
2019-09-09 19:15:18 +02:00
- In the **Name** field, type `closing_hours`
2019-05-06 16:17:16 +02:00
2019-09-02 19:44:44 +02:00

2019-05-06 16:17:16 +02:00
2019-09-09 19:15:18 +02:00
- Click the `Done` button
2019-05-06 16:17:16 +02:00
2019-09-02 19:44:44 +02:00

2019-05-06 16:17:16 +02:00
2019-09-09 19:15:18 +02:00
- Click the `Save` button
- Wait for Strapi to restart
2019-05-06 16:17:16 +02:00
2019-09-02 19:44:44 +02:00

2019-05-06 16:17:16 +02:00
2019-09-09 16:27:42 +02:00
After Strapi has restarted, you are ready to assign this **Hours_of_operation** group to the **Restaurant** Content Type.
2019-09-05 18:53:51 +02:00
2019-09-09 16:27:42 +02:00
**Note:** It would be possible to assign the **Hours_of_operation** group to another **Content Type** , let's say, a **Cafe** Content Type. You have the option to reuse this group across your application.
2019-05-06 16:17:16 +02:00
2019-09-09 16:27:42 +02:00
3. Next, you need to assign the **Hours_of_operation** Group to the **Restaurant** Content Type.
2019-05-06 16:17:16 +02:00
2019-09-09 16:27:42 +02:00
To access the **Hours_of_operation** Group from within the **Restaurant** Content Type, you need to **edit** the **Restaurant** Content Type in the **Content Type Builder** .
2019-05-06 16:17:16 +02:00
2019-09-09 19:15:18 +02:00
- If needed, navigate back to the **Content Type Builder**
2019-06-14 18:53:32 +02:00
2019-09-02 19:44:44 +02:00

2019-05-06 16:17:16 +02:00
2019-09-09 19:15:18 +02:00
- Click on the `Restaurant` Content Type, under **CONTENT TYPES**
2019-05-06 16:17:16 +02:00
2019-09-02 19:44:44 +02:00

2019-09-09 19:15:18 +02:00
- Click one of the `+ Add Another Field` buttons, to add the **Group**
2019-09-02 19:44:44 +02:00

2019-09-09 16:27:42 +02:00
- Click on the `Group` field
2019-09-09 19:15:18 +02:00
- Ensure `hours_of_operation` is displayed in the **Select a group** dropdown
2019-09-09 16:27:42 +02:00
- Provide a **name** for this group in the **Restaurant** Content Type. E.g., `restaurant_hours`
2019-09-02 19:44:44 +02:00
- Check the `Repeatable field` box

- Click on the `ADVANCED SETTINGS` tab
- Check the `Required field` checkbox

2019-09-05 18:53:51 +02:00
- Click the `Done` button
2019-09-02 19:44:44 +02:00

2019-09-09 16:27:42 +02:00
- Click the `Save` button
2019-09-09 19:15:18 +02:00
- Wait for Strapi to restart
2019-09-02 19:44:44 +02:00

2019-09-05 18:53:51 +02:00
After Strapi has restarted, you are ready to continue to the next section where you customize the user-interface of your **Restaurant** Content Type.
2019-09-02 19:44:44 +02:00
2019-09-09 16:27:42 +02:00
4. Next, you edit the **View Settings** for the new **Hoursofoperation Group** from within the **Content Manager** .
2019-09-02 19:44:44 +02:00
2019-09-05 18:53:51 +02:00
You can _drag and drop_ fields into a different layout, as well as, _rename the labels_ as two examples of how you can customize the user interface for your **Content Types** .
2019-09-02 19:44:44 +02:00
2019-09-05 18:53:51 +02:00
- Navigate to and click on the `Content Manager` , under **PLUGINS** in the left-hand menu
2019-09-02 19:44:44 +02:00

2019-05-06 16:17:16 +02:00
2019-09-02 19:44:44 +02:00
- Click on the `Groups(1)` tab
2019-05-06 16:17:16 +02:00
2019-09-02 19:44:44 +02:00

2019-05-06 16:17:16 +02:00
2019-09-09 16:27:42 +02:00
- Click on `Hours_of_operation` to modify the **View Settings**
2019-05-06 16:17:16 +02:00
2019-09-02 19:44:44 +02:00

2019-05-06 16:17:16 +02:00
2019-09-12 10:13:28 +02:00
- Rearrange the fields and make them more user friendly. Grab the `opening_hours` and slide it next to `closing_hours`
2019-05-06 16:17:16 +02:00
2019-09-02 19:44:44 +02:00

2019-05-06 16:17:16 +02:00
2019-09-02 19:44:44 +02:00
Next, you will change the **field labels** to make them easier to understand:
2019-05-06 16:17:16 +02:00
2019-09-02 19:44:44 +02:00
- Click on the `day_interval` field
- Edit the **Label** to read, `Day (or Days)`
2019-09-09 19:15:18 +02:00
- Add a **Description** , `You can type in one day or a series of days to complete this field. E.g. "Tuesday" or "Tues - Wed"`
2019-05-06 16:17:16 +02:00
2019-09-02 19:44:44 +02:00

2019-05-06 16:17:16 +02:00
2019-09-09 16:27:42 +02:00
- Click on the `opening_hours` field
2019-09-02 19:44:44 +02:00
- Edit the **Label** to read, `Opening Hours`
2019-05-06 16:17:16 +02:00
2019-09-02 19:44:44 +02:00

2019-05-06 16:17:16 +02:00
2019-09-09 16:27:42 +02:00
- Click on `closing_hours` field
2019-09-02 19:44:44 +02:00
- Edit the **Label** to read, `Closing Hours`

2019-09-09 19:15:18 +02:00
- Click the `Save` button, and then the `Confirm` button to save your settings
2019-09-02 19:44:44 +02:00
2019-09-05 18:53:51 +02:00
Your settings have now saved.
Whenever anyone enters in information for a **Restaurant** , the entry form is clear. With Strapi you can modify these and more settings to provide the best experience possible.
You are ready to start inputting actual content.
## 6. Manage and add content to a "Restaurant" Content Type
You are now ready to add some **Restaurants** and **Categories** .
2019-09-09 19:15:18 +02:00
1. You are now going to enter a new **Restaurant**
2019-09-05 18:53:51 +02:00
- Navigate to and click on the `Restaurants` , under **CONTENT TYPES** in the left-hand menu

- Next, click on the ** + Add new Restaurant** button (in the top right corner)
- Enter in the following information for your first **Restaurant** called **Biscotte Restaurant**
2019-09-09 16:27:42 +02:00
- In the **Name** field, enter `Biscotte Restaurant`
2019-09-05 18:53:51 +02:00
- In the **Description** field, enter `Welcome to Biscotte restaurant! Restaurant Biscotte offers a cuisine based on fresh, quality products, often local, organic when possible, and always produced by passionate producers.`
- Upload an **Image** to represent the **Restaurant**
2019-09-09 19:15:18 +02:00
**Note:** At this point, you would generally select the **Categories** for this **Restaurant** . You have not entered any **Categories** , so you do this step after entering this first **Restaurant** .
2019-09-05 18:53:51 +02:00

- Next scroll down to **RestaurantHours|(0)** and click the `+ ADD NEW ENTRY` button
- In the **Create an Entry** section, enter the following details:
- In the **Days (or Days)** field, enter `Sun - Mon`
- In the **Opening Hours** field, enter `Closed`
2019-09-09 19:15:18 +02:00
- **Skip** the **Closing Hours** field, as this **Restaurant** is closed all day
- Click the `+ ADD NEW ENTRY` button to create another new entry
2019-09-05 18:53:51 +02:00
- In the **Days (or Days)** field, enter `Tues - Fri`
- In the **Opening Hours** field, enter `12:00`
- In the **Closing Hours** field, enter `22:30`
2019-09-09 19:15:18 +02:00
- Click the `+ ADD NEW ENTRY` button to create the last entry
2019-09-05 18:53:51 +02:00
- In the **Days (or Days)** field, enter `Sat`
- In the **Opening Hours** field, enter `11:30`
- In the **Closing Hours** field, enter `16:00`
You have now entered in all the information necessary, for your first **Restaurant** .

2019-09-09 19:15:18 +02:00
- **Scroll up** and click the `Save` button
2019-09-05 18:53:51 +02:00
Next, you need to enter in some **Categories** that can relate to the above and other **Restaurants** .
- Navigate to and click on the `Categories` , under **CONTENT TYPES** in the left-hand menu

2019-09-09 16:27:42 +02:00
You are going to enter two **Categories** , but you could add as many **Categories** as you need to. Later, you can add additional **Categories** and assign them to existing and new **Restaurants** .
2019-09-05 18:53:51 +02:00
- Click on the `+ Add New Category` button
2019-09-09 16:27:42 +02:00
- In the **Name** field, enter `French food`
2019-09-05 18:53:51 +02:00
- In the **Restaurants(0)** dropdown, select `Biscotte Restaurant`

- Click the `Save` button
You now enter your second **Category** .
- Click on the `+ Add New Category` button
2019-09-09 16:27:42 +02:00
- In the **Name** field, enter `Brunch`
2019-09-05 18:53:51 +02:00
- In the **Restaurants(0)** dropdown, select `Biscotte Restaurant`

- Click the `Save` button
2019-09-02 19:44:44 +02:00
2019-09-05 18:53:51 +02:00
You have now entered your first **Restaurant** Content Type. You have also assigned two **Categories** to this **Restaurant** . Your next step is to set the **Roles and Permissions** .
2019-09-02 19:44:44 +02:00
## 7. Set Roles and Permissions
By default, Strapi publishes all **Content Types** with restricted permissions. Which means you have to explicitly give permissions to each **Content Type** you create. You are going to give **Public** API (or URL) access to both the **Restaurant** Content Type and **Category** Content Type.
2019-09-09 19:15:18 +02:00
- Click on the `Roles & Permissions` menu item, under **PLUGINS** in the left-hand-menu
- Locate and click on the **Roles & Permissions** menu item under **PLUGINS** on the left menu
2019-09-02 19:44:44 +02:00

2019-09-09 19:15:18 +02:00
- Next, click on the **Public** Role
2019-09-02 19:44:44 +02:00

2019-09-05 18:53:51 +02:00
- Next, scroll down under **Permissions** and locate the **Restaurant** and **Category** Content Types
2019-09-09 19:15:18 +02:00
- Click the checkbox for **find** and **findone** in the **Restaurant** Content Type
- Click the checkbox for **find** and **findone** in the **Category** Content Type
2019-09-02 19:44:44 +02:00

2019-09-09 19:15:18 +02:00
- Scroll back to the top, and click the **Save** button
2019-09-02 19:44:44 +02:00

You have now opened the API and are ready to consume your content.
## 8. Consume the Content Type API
Each of your **Content Types** are accessible by following their automatically generated routes.
Both your **Restaurant** and **Category** Content Types can now be accessed:
2019-09-09 19:15:18 +02:00
- In your browser, follow `http://localhost:1337/restaurants` to return the data for the allowed **Find** value of your **Restaurant** Content Type
2019-09-02 19:44:44 +02:00
2019-09-05 18:53:51 +02:00

2019-09-02 19:44:44 +02:00
2019-09-09 19:15:18 +02:00
- In your browser, follow `http://localhost:1337/categories` to return the data for the allowed **Find** value of your **Category** Content Type
2019-09-05 18:53:51 +02:00

2019-05-06 16:17:16 +02:00
::: tip NOTE
2019-09-05 18:53:51 +02:00
If you have incorrectly or not set permissions to your content type, you get a ** "403"** permission error. See the below example.
2019-05-06 16:17:16 +02:00
Forbidden Access Looks like this:
2019-09-02 19:44:44 +02:00

:::
::: tip NOTE
2019-09-05 18:53:51 +02:00
If you would like to see the route of any specific **Content Type** , you need to navigate to the **Content Type** under the **Roles and Permissions** plugin and click the ⚙️ next to the value. On the right, you see the route:
2019-09-02 19:44:44 +02:00

2019-05-06 16:17:16 +02:00
:::
::: tip CONGRATULATIONS
2019-09-05 18:53:51 +02:00
👏 Congratulations, you have now completed the **Strapi Getting Started Tutorial** . Where to go next?
2019-05-06 16:17:16 +02:00
- Learn how to use Strapi with React ([Gatsby ](https://blog.strapi.io/building-a-static-website-using-gatsby-and-strapi ) or [Next.js ](https://blog.strapi.io/strapi-next-setup/ )) or Vue.js ([Nuxt.js ](https://blog.strapi.io/cooking-a-deliveroo-clone-with-nuxt-vue-js-graphql-strapi-and-stripe-setup-part-1-7/ )).
2019-09-09 19:15:18 +02:00
- Read the [concepts ](../concepts/concepts.html ) to deep dive into Strapi
- Get help on [StackOverflow ](https://stackoverflow.com/questions/tagged/strapi )
- Read the [source code ](https://github.com/strapi/strapi ), [contribute ](https://github.com/strapi/strapi/blob/master/CONTRIBUTING.md ) or [give a star ](https://github.com/strapi/strapi ) on GitHub
- Follow us on [Twitter ](https://twitter.com/strapijs ) to get the latest news
- [Join the vibrant and active Strapi community ](https://slack.strapi.io ) on Slack
2019-05-06 16:17:16 +02:00
:::