loading...
Cover image for Introduction to Craft

Introduction to Craft

davinaleong profile image Davina Leong Updated on ・4 min read

I first chanced upon Craft at work while working on a small side project. This is the tutorial I followed.

Local Env Setup

  • AMPPS
  • 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 (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

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. 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:

<!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:

{% 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

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.

// 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

With devMode set to false, Craft just throws an HTTP error.
devMode = false

Yii Toolbar

The "C" and "<" buttons in the lower-left corner of the page is actually the collapsed Yii toolbar.
yii toolbar

Expanded
yii toolbar - expanded

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

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
arranging fields for entry creation

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

Using the matrix field
matrix field - usage

Matrix field content
matrix field - content

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!

{# 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

Others

Posted on Jan 18 '19 by:

davinaleong profile

Davina Leong

@davinaleong

PHP/JS web dev who loves food, video & board games and socializing.

Discussion

markdown guide
 

I really love Craft. I'd recommend using Laravel Valet or the fork Valet-plus for local dev environment setup. So much easier and clear than MAMP.

 

Do you think you'll stick with Craft on future projects? Nice writeup, btw.

 

Yup, definitely! Would definitely replace Wordpress as the primary CMS for website-projects. Though, I have not delve enough into it enough to see how effective it is for API projects. While it can have API functionality through plugins, I'm not sure how well integrated it will be.

Edit: Since we don't have direct control over the database, querying can be quite limited.