Movatterモバイル変換


[0]ホーム

URL:


Skip to content
DEV Community
Log in Create account

DEV Community

Cover image for Introduction to Craft
Davina Leong
Davina Leong

Posted on • Edited on

     

Introduction to Craft

I first chanced uponCraft at work while working on a small side project. This is thetutorial 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 withAMPPS (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 withTwig. 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>{%blockcontent%}{%endblock%}<footer>Website, 2019</footer></body></html>
Enter fullscreen modeExit fullscreen mode

About page,/about/index.twig:

{%extends"_layouts/main"%}{%blockcontent%}<h2>About</h2><p>Lorem ipsum</p>{%endblock%}
Enter fullscreen modeExit fullscreen mode

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 thatdevMode is currently set totrue in Craft. To remove the yellow-dashed line, open/config/general.php and setdevMode underdev tofalse.

// Dev environment settings'dev'=>[// Base site URL'siteUrl'=>null,// Dev Mode (see https://craftcms.com/support/dev-mode)'devMode'=>true,// <= set this to false],
Enter fullscreen modeExit fullscreen mode

IndevMode, 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

WithdevMode set tofalse, 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, andthat 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'%}<divclass="panel tip"><p>{{block.tipContent}}</p></div>{# Recipe Tip end #}
Enter fullscreen modeExit fullscreen mode

Pretty cool huh?!

Well that wraps up my introduction to Craft!

Links

Related

Others

Top comments(3)

Subscribe
pic
Create template

Templates let you quickly answer FAQs or store snippets for re-use.

Dismiss
CollapseExpand
 
ashtonlance profile image
Ashton Lance
  • Joined

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.

CollapseExpand
 
thegeoffstevens profile image
Geoff Stevens
Building things at Software.com
  • Location
    New York
  • Joined

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

CollapseExpand
 
davinaleong profile image
Davina Leong
Web developer, designer, storyteller, Jesus follower, lifelong learner, Singaporean.
  • Location
    Singapore
  • Pronouns
    Her/She
  • Joined
• Edited on• Edited

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

Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment'spermalink.

For further actions, you may consider blocking this person and/orreporting abuse

Web developer, designer, storyteller, Jesus follower, lifelong learner, Singaporean.
  • Location
    Singapore
  • Pronouns
    Her/She
  • Joined

More fromDavina Leong

DEV Community

We're a place where coders share, stay up-to-date and grow their careers.

Log in Create account

[8]ページ先頭

©2009-2025 Movatter.jp