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.
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.
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.
With devMode set to false, Craft just throws an HTTP error.
Yii Toolbar
The "C" and "<" buttons in the lower-left corner of the page is actually the collapsed 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.
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
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
Using the matrix field
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
Top comments (3)
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.