I built this site using PHP and the Slim Framework

November 21, 2016 PHP Slim

In the past, this website has always been built using WordPress. It has gone through three different variations. This time around, I decided that I needed (and wanted) something different. In comes the Slim Framework

When I first started to learn PHP, I thought that I needed to build everything from scratch. That's how the web worked ten years ago (at least for me) and I knew very little about it or how to achieve things in the back-end. So when I was introduced to WordPress, I thought that this was going to be the end all for sites for me. Anything I ever wanted to build would be using that as a framework. So of course my site would always be built using it.

I tried Laravel, I did...

Late last year, I started looking for a PHP framework I could get behind. Among all the available frameworks, I found that Laravel was very popular among the PHP community (some say it's the king of PHP frameworks) and it had a lot of support as well as many free tutorials.

I started to learn how to use it by reading it's documentation and watching a few videos on YouTube (as most developers do, ha). I built a couple of web apps using it and thought it was great. I even started to build this site and even went as far as to create a pretty substantial CMS with it.

The homepage Login screen Edit post screen

But something about it made me want to try something different. I can't quite put my finger on it yet, I'll update this post when I figure it out. Don't get me wrong, I do like it and think it has its place on the web for sure, but I felt that it wasn't for this site. So I started all over again, from scratch.

In comes Slim 3

Albeit small, Josh Lockhart created an amazing framework. I think it's probably most ideal for creating RESTful APIs or services, but I used it for this site (which did end up having a few API endpoints); I created a simple blog for myself.

Just like Laravel, I spent a few nights going through the documentation and watching a few video series on it. I liked the idea that I could read the entire thing (its so small!) in a couple of nights and get my head around it. I like the idea that it doesn't come prepackaged with a database connector or a templating engine. It's pretty much just a container, router, a bit of middleware sprinkled in there and the rest was up to me.

What did I end up using?

Well one thing that I loved about Laravel, was its ORM: Eloquent. Although Blade is great, I ended up liking Twig. It's recommended by the Slim 3 docs and theres a nifty little package, Twig View, that connects it to Slim.

I could go on and on about each package I used to make this site, but instead, here's a snapshot of my composer.json file. I'll eventually write a series of posts that goes through the entire code base for this.

{
    "name": "aod/aortegadesign_site",
    "description": "Official website for Adrian Ortega",
    "type": "project",
    "license": "MIT",
    "authors": [
        {
            "name": "Adrian Ortega",
            "email": "hello@aortegadesign.com"
        }
    ],
    "autoload" : {
        "psr-4" : {
            "AOD\\" : "app"
        }
    },
    "minimum-stability": "dev",
    "require": {
        "vlucas/phpdotenv": "^2.3",
        "oscarotero/env": "^1.0",
        "illuminate/database": "^5.2",
        "respect/validation": "^1.1",
        "slim/slim": "^3.0",
        "slim/flash": "^0.1.0",
        "slim/twig-view": "^2.1",
        "erusev/parsedown": "^1.6",
        "erusev/parsedown-extra": "^0.7.1",
        "cocur/slugify": "^2.3",
        "fzaninotto/faker": "^1.6",
        "intervention/image": "^2.3"
    }
}

If you're interested in what front-end technologies/libraries I used, heres a snapshot of my bower.json file.

{
  "name": "aod_aortegadesign_site",
  "description": "Official website for Adrian Ortega",
  "main": "gulpfile.js",
  "authors": [
    "Adrian Ortega "
  ],
  "license": "MIT",
  "homepage": "aortegadesign.com",
  "private": true,
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "test",
    "tests"
  ],
  "dependencies": {
    "font-awesome": "^4.6.3",
    "jquery": "^3.0.0",
    "normalize-scss": "normalize.scss#^5.0.3",
    "breakpoint-sass": "^2.7.0",
    "simplemde": "^1.11.2"
  }
}

I ended up using Node Js and Gulp to compile everything together.

What does the CMS look like?

Even though I built this site for me, just me, I still like to flex my front end muscles and try to do a good job at creating something pretty. Here are a few snapshots of that admin.

Login screen Posts list Edit post Categories list

One of the cooler things I did for this is include a JavaScript markdown editor (SimpleMDE Markdown Editor) for the CMS. It makes it easy for me to create posts with HTML and a little bit of flair. Plus, I really like the split pane feature.

Split pane feature

I'm happy

All in all, I like my how this project turned out. I have myself a cool little blog and CMS that I built from scratch using tools I studied over a year. Although it did take me a year, and for the most part, my site looked like this, I'm happy. I look forward to creating posts about the things that excite me in the web.