Introduction to Craft
Tags: php, craft, learning
Published: 2019-01-18 10:19:34

---
title: Introduction to Craft
published: true
description: Davina learning and exploring Craft
tags: php, craft, learning
cover_image: https://thepracticaldev.s3.amazonaws.com/i/jlcnhwhcgcif4sz5y36w.png
---
I first chanced upon [Craft](https://craftcms.com/) at work while working on a small side project. This is the [tutorial](https://craftquest.io/courses/craft-cms-3-tutorials) I followed.

# Local Env Setup
- [AMPPS](https://www.ampps.com/)
- Apache
- PHP 7.1
- MySQL
- Craft 3

# First Impressions
I must say, I'm quite impressed with Craft's ease-of-use. I did initially run into problems during the setup process, especially with regards to the plugin store. But this was due more to my lack of experience with [AMPPS](https://www.ampps.com/) (akin to MAMP, XAMPP, etc) rather than Craft itself. _(I'll write a separate post on the issues I faced and my resolutions to them.)_ But once I got it up and running, Craft is a joy to use!

# Walkthrough
After setup, you will be brought to the admin dashboard.
![admin dashboard](https://thepracticaldev.s3.amazonaws.com/i/53r1nu46vxxcyqldffth.png)

Most of your development work will be done here on the admin panel. Coding is only needed when you create templates to display your content on. Even so, template-creation is a breeze with [Twig](https://twig.symfony.com/). In fact, I hadn't touch any PHP code (apart from the configs) while exploring Craft. Here are some sample code:

Main layout, `/layouts/main.twig`:
```twig
<!doctype html>
<html>
<head>
  <title>Website</title>
</head>
<body>
  <h1>Website</h1>

  {% block content %}
  {% endblock %}

  <footer>Website, 2019</footer>
</body>
</html>
```

About page, `/about/index.twig`:
```twig
{% extends "_layouts/main" %}

{% block content %}
<h2>About</h2>

<p>Lorem ipsum</p>
{% endblock %}
```

## The Dashboard
Anyways, back to the admin dashboard. A few things you should note immediately (besides the obvious widgets): that yellow-dashed line at the top of the sidebar, your current license (more on that later) as well as the "C" and "<" buttons towards the lower-right corner.
![admin dashboard](https://thepracticaldev.s3.amazonaws.com/i/53r1nu46vxxcyqldffth.png)

## DevMode
The yellow-dashed line indicates that `devMode` is currently set to `true` in Craft. To remove the yellow-dashed line, open `/config/general.php` and set `devMode` under `dev` to `false`.

```php
// Dev environment settings
'dev' => [
    // Base site URL
    'siteUrl' => null,

    // Dev Mode (see https://craftcms.com/support/dev-mode)
    'devMode' => true, // <= set this to false
],
```

In `devMode`, Craft gives you a stack trace when there are errors in your code. While this is useful for debugging, it obviously poses a security hazard.
![devMode = true](https://thepracticaldev.s3.amazonaws.com/i/f86qjyaujgvcuk713u8h.png)

With `devMode` set to `false`, Craft just throws an HTTP error.
![devMode = false](https://thepracticaldev.s3.amazonaws.com/i/97i0dyypkmi8z9ox3r8y.png)

## Yii Toolbar
The "C" and "<" buttons in the lower-left corner of the page is actually the collapsed Yii toolbar.
![yii toolbar](https://thepracticaldev.s3.amazonaws.com/i/1zsbag4x7jn3xlgmsyaa.png)

Expanded
![yii toolbar - expanded](https://thepracticaldev.s3.amazonaws.com/i/sn8zklweab6o6szxzyv1.png)

Already you can see various information about the page, like its status, memory usage, etc. You can expand it to see more details too! I haven't used it yet though, so I can't comment much on it. But at a glance, seems like this toolbar could potentially replace Chrome's DevTools.

## Licenses
Craft has 3 licenses: Solo, Pro and Enterprise. The main difference I've seen between the Solo and Pro licenses so far is the ability to have multiple admin accounts in Pro. As for the Enterprise license, I presume it's for customised solutions.

## Content Creation
As I've said before, most of your content creation will be done on the admin panel itself. Below is a screenshot of the field-creation form.
![field-creation form](https://thepracticaldev.s3.amazonaws.com/i/mxyfmkvq16wu88frz9di.png)

Craft's content-creation workflow is (generally) as such: **Sections > Fields > Entries**. Sections is the types or kinds of content the website will have like news, posts, etc. Fields are where you create, literally, the fields that will be used to create content of a section to be displayed, like a news' title and body. Entries are the actual records of the content created from these fields.

(to my understanding) So, you have a News section. Then you create the fields to allow users to input data for the news' title and body content, and _that_ record of a new's title and body is a news entry. This is where you might also see the separation of roles too! That feature is available via the Pro license. [More reading](https://docs.craftcms.com/v3/sections-and-entries.html)
![arranging fields for entry creation](https://thepracticaldev.s3.amazonaws.com/i/79nq939wgx6uhum5vg6z.png)

The thing is, fields in Craft is separated from sections. This means you are able to reuse fields in other sections. Say now you have a Blogs section. Well, blogs usually have posts and comments. Each blogpost will also (at least) have a title and body content. In this case, you can reuse the fields used for the news' title and body content-creation for blog content-creation. And then create fields specific to blog, like a field for a cover-image.

## The Matrix Field
I'm just going to specifically point out this really cool feature in Craft: the matrix field.

Creating the matrix field
![matrix field - creation](https://thepracticaldev.s3.amazonaws.com/i/ebkg6j4m1gp5boaflrid.png)

Using the matrix field
![matrix field - usage](https://thepracticaldev.s3.amazonaws.com/i/l94rbpum862z748l42le.png)

Matrix field content
![matrix field - content](https://thepracticaldev.s3.amazonaws.com/i/bteie4djiodovr1gvnd6.png)

Everything below the "Recipe Snapshot" is generate by the matrix field. This allows you to arrange and sort your content however you like. Better yet, you only have to define the template of each content block once, and Craft will know to use template for that content. In the screenshot above, the template for the "tips" div for example, was only defined once!

```twig
{# Recipe Tip end #}
  {% case 'recipeTip' %}
    <div class="panel tip">
        <p>{{ block.tipContent }}</p>
    </div>
{# Recipe Tip end #}
```

Pretty cool huh?!

Well that wraps up my introduction to Craft!

# Links
**Related**
- [Craft](https://craftcms.com/)
- [Twig](https://twig.symfony.com/)
- [Tutorial: Up and Running with Craft](https://craftquest.io/courses/craft-cms-3-tutorials)
- [AMPPS](https://www.ampps.com/)

**Others**
- [Yii](https://www.yiiframework.com/)
- [CraftQuest (Craft tutorials)](https://craftquest.io/)
- [Tutorial: The Craft Mindset](https://craftquest.io/courses/the-craft-mindset)