CakeDC Blog

TIPS, INSIGHTS AND THE LATEST FROM THE EXPERTS BEHIND CAKEPHP

Build a Single Page Application Using CakePHP and InertiaJS

Written by Acampanario on March 06, 2024 •
7703 VIEWS

The Inertia Plugin allows a CakePHP application to integrate Vue 3 components in the front end, without the need to write a specific API for data transfer.

This is done by adding a Middleware and view classes that facilitate the conversion of objects and data in JSON almost automatically, as well as the direct load in the components.

The plugin is thought of as a base to extend and use your app’s specific controllers and views from.

Just because it works out of the box doesn't mean it is intended to be used exactly as is, but this will provide you a good kick start.

See the repo here: https://github.com/CakeDC/cakephp-inertia

Requirements

CakePHP 4.5
PHP >= 8.1
NodeJS 18.9 (only for build Vue Components, not required on running site)

Step 1: Create a basic CakePHP install

For this example I will use a basic installation using Docker and Composer.

First you must create project from cakephp/app

$> composer create-project --prefer-dist cakephp/app:~4.5 inertia_app

$> cd inertia_app

$> cp config/app_local.example.php config/app_local.php

Then write an docker-compose.yml file as:

version: '3'

services:

psql13:

image: postgres:13

container_name: inertia-app-postgres13

volumes:

- ./tmp/data/inertia-postgres13__db:/var/lib/postgresql:delegated

environment:

- POSTGRES_USER=my_app

- POSTGRES_PASSWORD=secret

- POSTGRES_DB=my_app

- PGUSER=my_app

- PGDATABASE=my_app

- PGPASSWORD=secret

ports:

- '7432:5432'

cakephp:

image: webdevops/php-nginx:8.1

container_name: inertia-app-cakephp

working_dir: /application

volumes:

- ./:/application:cached

- ~/.ssh:/home/application/.ssh:ro

environment:

- WEB_DOCUMENT_ROOT=/application/webroot

- DATABASE_URL=postgres://my_app:secret@inertia-app-postgres13:5432/my_app

ports:

- "9099:80"

Launch the container and go to http://localhost:9099/

$> docker-compose up -d

Step 2: Add CakePHP Inertia plugin

Install plugin via command line:

$> composer require cakedc/cakephp-inertia

Once installed enable it in src/Application.php, adding at the bottom of bootstrap function:

$this->addPlugin('CakeDC/Inertia');

or by command line:

$> bin/cake plugin load CakeDC/Inertia

Step 3: Create Vue App and install it

To create Vue App type in command line:

$> bin/cake create_vue_app

This command create in the resources directory the files that use our App, also create in root directory the files:

webpack.mix.js
package.json

Then in root directory install with NPM:

$> npm install

Step 4: Create simple SPA (Single Page Application)

Create a single page called dashboard that show values sets in a controller action

We need to first add InertiaResponseTrait

use CakeDC\Inertia\Traits\InertiaResponseTrait;

class PagesController extends AppController

{

use InertiaResponseTrait;

...

}

Create a new function that would look like this:

public function dashboard()

{

//set default php layout of plugin that use vue

$this->viewBuilder()->setTheme('CakeDC/Inertia');

$page = [

'text' => 'hello world 1',

'other' => 'hello world 2',

];

$this->set(compact('page'));

}

in config/routes.php uncomment lines to catch all routes:

$builder->connect('/{controller}', ['action' => 'index']);

$builder->connect('/{controller}/{action}/*', []);

and comment line:

$builder->connect('/pages/*', 'Pages::display');

Then create file resources/js/Components/Pages/Dashboard.vue that would look like this:

<script setup>

import Layout from '../Layout'

import { Head } from '@inertiajs/vue3'

import {onMounted} from "vue";

defineProps({

csrfToken: String,

flash: Array,

page: Array,

})

onMounted(() => {

console.log('Component Dashboard onMounted hook called')

})

</script>

<template>

<Layout>

<Head title="Welcome" />

<h1>Welcome</h1>

<p>{{page.text}}</p>

<p>{{page.other}}</p>

</Layout>

</template>

On root directory execute:

$> npm run dev

IMPORTANT: Whenever you modify the .vue templates, you must run this script.

Go to http://localhost:9099/pages/dashboard to see that Dashboard Vue Component prints values assignments on Dashboard CakePHP function.

Step 5: Bake CRUD system

For this example, we use sql file on config/sql/example/postgresql.pgsql

That creates a database with the relations

Once the database has been created, bake models and controllers as normal using:

$> bin/cake bake model Pages --theme CakeDC/Inertia

$> bin/cake bake controller Pages --theme CakeDC/Inertia

$> bin/cake bake model Tags --theme CakeDC/Inertia

$> bin/cake bake controller Tags --theme CakeDC/Inertia

$> bin/cake bake model Categories --theme CakeDC/Inertia

$> bin/cake bake controller Categories --theme CakeDC/Inertia

and bake templates using vue_template instead of template as:

$> bin/cake bake vue_template Pages --theme CakeDC/Inertia

$> bin/cake bake vue_template Tags --theme CakeDC/Inertia

$> bin/cake bake vue_template Categories --theme CakeDC/Inertia

Again run:

$> npm run dev

You can the results from this example by going to http://localhost:9099/pages/index

In the following recording you can see how to add, edit and delete a record without reloading the page at any time.

Step 6: Using prefix and adding a navigation menu

Add route to prefix Admin on config/routes.php

$builder->prefix('admin', function (RouteBuilder $builder) {

$builder->fallbacks(DashedRoute::class);

});

To generate controllers and template with a prefix use --prefix option of bake command as:

$> bin/cake bake controller Pages --prefix Admin --theme CakeDC/Inertia

$> bin/cake bake controller Tags --prefix Admin --theme CakeDC/Inertia

$> bin/cake bake controller Categories --prefix Admin --theme CakeDC/Inertia

$> bin/cake bake vue_template Pages --prefix Admin --theme CakeDC/Inertia

$> bin/cake bake vue_template Tags --prefix Admin --theme CakeDC/Inertia

$> bin/cake bake vue_template Categories --prefix Admin --theme CakeDC/Inertia

You can add a horizontal menu to navigate through controllers

Edit resources/Components/Layout.vue and put inside header tag links as:

<header>

<Link as="button" href="/pages/index" class="button shadow radius right small">Pages</Link>

<Link as="button" href="/tags/index" class="button shadow radius right small">Tags</Link>

<Link as="button" href="/categories/index" class="button shadow radius right small">Categories</Link>

</header>

Again run:

$> npm run dev

You can see the results from this example by going to http://localhost:9099/admin/pages/index

In the following recording you can see how to add, edit and delete a record without reloading the page at any time and navigate through pages, tags and categories.

Hopefully this example will make your experience easier! Let us know: [email protected].

Latest articles

157 Views

CakeFest 2025 Wrap Up

For years I have heard the team talk about Madrid being one of their favorite cities to visit, because they hosted CakeFest there more than a decade ago. I can now confirm… they were right! What a beautiful city. Another great CakeFest in the books… Thanks Madrid! Not only are we coming down from the sugar high, but we are also honored to be celebrating 20 years of CakePHP. It was amazing to celebrate with the attendees (both physical and virtual). If you watched the cake ceremony, you saw just how emotional it made Larry to reminisce on the last 20 years. I do know one thing, CakePHP would not be where it is without the dedicated core, and community. Speaking of the core, we had both Mark Scherer and Mark Story joining us as presenters this year. It is a highlight for our team to interact with them each year. I know a lot of the other members from the core team would have liked to join us as well, but we hope to see them soon. The hard work they put in day after day is unmatched, and often not recognized enough. It’s hard to put into words how grateful we are for this group of bakers. Our event was 2 jam packed days of workshops and talk presentations, which you can now see a replay of on our YouTube channel (youtube.com/cakephp). We had presenters from Canada, Germany, India, Spain, USA, and more! This is one of my favorite parts about the CakePHP community, the diversity and representation from all over the world. When we come together in one room, with one common goal, it’s just magical. Aside from the conference itself, the attendees had a chance to network, mingle, and enjoy meals together as a group. I could sense the excitement of what’s to come for a framework that is very much still alive. Speaking of which… spoiler alert: CakePHP 6 is coming. Check out the roadmap HERE. I feel as though our team leaves the event each year with a smile on their face, and looking forward to the next. The events are growing each year, although we do like to keep the small group/intimate type of atmosphere. I am already getting messages about the location for next year, and I promise we will let you know as soon as we can (when we know!). In the meantime, start preparing your talks, and send us your location votes. The ovens are heating up….

Written by Amanda on October 16, 2025

433 Views

Polymorphic Relationships in CakePHP: A Beginner's Guide

Have you ever wondered how to make one database table relate to multiple other tables? Imagine a comments table that needs to store comments for both articles and videos. How do you manage that without creating separate tables or complicated joins? The answer is a polymorphic relationship. It sounds fancy, but the idea is simple and super powerful.

What's a Polymorphic Relationship?

Think of it this way: instead of a single foreign key pointing to one specific table, a polymorphic relationship uses two columns to define the connection. Let's stick with our comments example. To link a comment to either an article or a video, your comments table would have these two special columns:

foreign_id: This holds the ID of the related record (e.g., the id of an article or the id of a video).
model_name: This stores the name of the model the comment belongs to (e.g., 'Articles' or 'Videos').

This flexible setup allows a single comment record to "morph" its relationship, pointing to different types of parent models. It's clean, efficient, and saves you from a lot of redundant code. It's not necessary for them to be called "foreign_id" and "model_name"; they could have other names (table, model, reference_key, model_id, etc.) as long as you maintain the intended function of each. Now, let's see how you can set this up in CakePHP 5 without breaking a sweat.

Making It Work in CakePHP 5

While some frameworks have built-in support for polymorphic relationships, CakePHP lets you create them just as easily using its powerful ORM (Object-Relational Mapper) associations. We'll use the conditions key to define the polymorphic link.

Step 1: Set Up Your Database

We'll use a simple schema with three tables: articles, videos, and comments.

-- articles table
CREATE TABLE articles (
    id INT AUTO_INCREMENT PRIMARY KEY,
    title VARCHAR(255)
);

-- videos table
CREATE TABLE videos (
    id INT AUTO_INCREMENT PRIMARY KEY,
    title VARCHAR(255)
);

-- comments table
CREATE TABLE comments (
    id INT AUTO_INCREMENT PRIMARY KEY,
    content TEXT,
    foreign_id INT NOT NULL,
    model_name VARCHAR(50) NOT NULL
);

Notice how the comments table has our special foreign_id and model_name columns.

Step 2: Configure Your Models in CakePHP

Now for the magic! We'll define the associations in our Table classes. ArticlesTable.php In this file, you'll tell the Articles model that it has many Comments, but with a specific condition.

// src/Model/Table/ArticlesTable.php

namespace App\Model\Table;

use Cake\ORM\Table;

class ArticlesTable extends Table
{
    public function initialize(array $config): void
    {
        // ...
        $this->hasMany('Comments', [
            'foreignKey' => 'foreign_id',
            'conditions' => ['Comments.model_name' => self::class], // or 'Articles'
            'dependent' => true, // Deletes comments if an article is deleted
        ]);
    }
}

Use self::class is a best practice in modern PHP, as it prevents bugs if you ever decide to rename your classes, and your IDE can auto-complete and check it for you VideosTable.php You'll do the same thing for the Videos model, but change the model_name condition.

// src/Model/Table/VideosTable.php

namespace App\Model\Table;

use Cake\ORM\Table;

class VideosTable extends Table
{
    public function initialize(array $config): void
    {
        // ...
        $this->hasMany('Comments', [
            'foreignKey' => 'foreign_id',
            'conditions' => ['Comments.model_name' => self::class], // or 'Videos'
            'dependent' => true,
        ]);
    }
}

CommentsTable.php This table is the owner of the polymorphic association. You can add associations here to easily access the related Article or Video from a Comment entity.

// src/Model/Table/CommentsTable.php

namespace App\Model\Table;

use Cake\ORM\Table;

class CommentsTable extends Table
{
    public function initialize(array $config): void
    {
        // ...
        $this->belongsTo('Articles', [
            'foreignKey' => 'foreign_id',
            'conditions' => ['Comments.model_name' => \App\Model\Table\ArticlesTable::class], // or 'Articles'
        ]);

        $this->belongsTo('Videos', [
            'foreignKey' => 'foreign_id',
            'conditions' => ['Comments.model_name' => \App\Model\Table\VideosTable::class], // or 'Videos'
        ]);
    }
}

Step 3: Using the Relationship

Now that everything is set up, you can fetch data as if it were a normal association. Fetching Comments for an Article:

$article = $this->Articles->get(1, ['contain' => 'Comments']);

// $article->comments will contain a list of comments for that article

Creating a new Comment for a Video:

$video = $this->Videos->get(2);
$comment = $this->Comments->newEmptyEntity();

$comment->content = 'This is an awesome video!';
$comment->foreign_id = $video->id;
$comment->model_name = \App\Model\Table\VideosTable::class; // or 'Videos'

$this->Comments->save($comment);

As you can see, the model_name and foreign_id fields are the secret sauce that makes this pattern work.

What About the Future? The Power of This Solution

Now that you've got comments working for both articles and videos, what if your app grows and you want to add comments to a new model, like Photos? With this polymorphic setup, the change is incredibly simple. You don't need to alter your comments table at all. All you have to do is: Create your photos table in the database. Add a new PhotosTable.php model. In the new PhotosTable's initialize() method, add the hasMany association, just like you did for Articles and Videos.

// src/Model/Table/PhotosTable.php

namespace App\Model\Table;

use Cake\ORM\Table;

class PhotosTable extends Table
{
    public function initialize(array $config): void
    {
        // ...
        $this->hasMany('Comments', [
            'foreignKey' => 'foreign_id',
            'conditions' => ['Comments.model_name' => self::class],
            'dependent' => true,
        ]);
    }
}

That's it! You've just extended your application's functionality with minimal effort. This demonstrates the true power of polymorphic relationships: a single, scalable solution that can easily adapt to your application's evolving needs. It's a key pattern for building flexible and maintainable software.

Conclusion

This approach is flexible, scalable, and a great way to keep your database schema simple. Now that you know the basics, you can start applying this pattern to more complex problems in your own CakePHP applications!

Written by Arodriguez on September 24, 2025

2874 Views

Closing Advent Calendar 2024

This article is part of the CakeDC Advent Calendar 2024 (December 24th 2024) That’s a wrap on the CakeDC 2024 advent calendar blog series. Did you get to read all of them? Hopefully you obtained some useful information to use in your future baking. We would love to get your feedback, feel free to share! It is still hard to believe that 2024 is almost over, but we are looking forward to an extraordinary 2025. On behalf of CakeDC, we want to thank our team for all the hours of hard work they put in this year. Also, thank you to our clients for trusting us with your CakePHP projects, it is an absolute pleasure getting to work with each of you. We are thankful for the great relationships we have built, or carried on in the last 12 months. For our CakePHP community, especially the core team, please know how incredibly grateful we are for your support of the framework. There is a reason that Cake is still around after 20 years, and it’s great developers like you, who dedicate their time and efforts to keep the code going. THANK YOU, THANK YOU, THANK YOU. As far as what is to come for CakePHP in 2025, stay tuned. However, I am told that there are some top secret (not really, we are opensource after all) talks about CakePHP 6 happening. With the release of PHP 8.4, I am sure some awesome features will be implemented in Cake specifically. We will also be celebrating 20 years of CakePHP next year, can you believe it? CakeFest will be in honor of all core members past and present, and it may be a good time to introduce some new ones as well. If you are a core member (or former), we would love to have you attend the conference this year. The location will be announced soon. Interested in getting involved or joining the core team? You can find some helpful links here: https://cakephp.org/get-involved We hope you enjoyed our gift this year, it’s the least we could do. Wishing you a happy holiday season from our CakeDC family to yours. See you next year! … sorry, I had to do it. :) Also, here are some final words from our President: Larry Masters.

A Christmas Message to the CakePHP Community

As we gather with loved ones to celebrate the joy and hope of the Christmas season, I want to take a moment to reflect on the incredible journey we’ve shared this year as part of the CakePHP community. This is a special time of year when people around the world come together to celebrate love, grace, and the hope that light brings into the world. It’s also a time to give thanks for the connections that make our lives richer. The CakePHP framework has always been about more than just code, it’s about people. It’s the collective effort of contributors from around the world who believe in building something better, together. To everyone who has shared their expertise, contributed code, written documentation, tested features, or offered guidance to others, I want to express my deepest gratitude for your dedication and passion. As we approach 2025, it brings even greater meaning to reflect on how far we’ve come. Next year marks the 20th anniversary of CakePHP. From the first lines of code to the projects we support today, the journey has been nothing short of remarkable. As we look ahead to the new year, let us carry forward this spirit of generosity, collaboration, and unity. Together, we can continue to empower developers, build exceptional tools, and foster a community that is inclusive, welcoming, and supportive. On behalf of everyone at Cake Development Corporation, I wish you and your families a blessed Christmas filled with peace, joy, and love. May the new year bring us more opportunities to create, connect, and grow together. Thank you for being part of this journey. Merry Christmas and a very Happy New Year to everyone. With gratitude, Larry Masters This article is part of the CakeDC Advent Calendar 2024 (December 24th 2024)

Written by Amanda on December 24, 2024

CakeDC Blog

Build a Single Page Application Using CakePHP and InertiaJS

Written by Acampanario on March 06, 2024 • 7703 VIEWS

Requirements

Step 1: Create a basic CakePHP install

Step 2: Add CakePHP Inertia plugin

Step 3: Create Vue App and install it

Step 4: Create simple SPA (Single Page Application)

Step 5: Bake CRUD system

Step 6: Using prefix and adding a navigation menu

Latest articles

CakeFest 2025 Wrap Up

Polymorphic Relationships in CakePHP: A Beginner's Guide

What's a Polymorphic Relationship?

Making It Work in CakePHP 5

Step 1: Set Up Your Database

Step 2: Configure Your Models in CakePHP

Step 3: Using the Relationship

What About the Future? The Power of This Solution

Conclusion

Closing Advent Calendar 2024

A Christmas Message to the CakePHP Community

Written by Acampanario on March 06, 2024 •
7703 VIEWS