(Get the app code on github.)
In part 1 and part 2 of these mini-series, I went over the basics of installation of CakePHP 3, as well as setting up the initial database and table for our application.
Now that the data modeling part is done :), it’s time consider the actual application.
So what am I building?
It is indeed a to-do app, a very basic checklist of things “to do” with the ability to mark them as “done” as well the list of some recently added and completed ones. There’s about a million of such apps out there, so my goal was to keep it simple and to show off a couple of things as far as new features of CakePHP 3 are concerned.
As I kind of hinted in the previous post, the app is only going to work off of a single table, and all-in-all it will be just a one-page app.
For the front end styling and CSS it almost goes without saying, that I am just going to stick with Bootstrap. As a matter of fact, to get some basic colors and elements that are slightly different from the default look & feel of bootstrap, I’ll just grab this particular theme:
http://bootswatch.com/flatly/.
Once I download the bootstrap.min.css. file and place it in the webroot/css directory, it’s time to go ahead and modify the default layout file.
Template/Layout/default.ctp
<html>
<head>
<?= $this->Html->charset() ?>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>
<?= 'To-do : an awesome CakePHP 3 app : ' . $this->fetch('title') ?>
</title>
<?= $this->Html->css('bootstrap.min') ?>
<?= $this->Html->css('app') ?>
<?= $this->fetch('meta') ?>
<?= $this->fetch('css') ?>
</head>
<body>
<div id="container">
<?= $this->fetch('content') ?>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<?= $this->fetch('script') ?>
</body>
</html>
This layout is the default “template” that our entire site will use. (Yes, the entire one page). Here we can load all the necessary CSS and JS that will be used throughout our application. As you see we’ve added jQuery, jQuery UI and Bootstrap CSS. Additionally there will be a little CSS file just for our app (called app.css). You can see it loaded at the top of the page. This is where you can add and override some default styling. It’s a cleaner way to make your changes, rather than messing around in the bootstrap.css file directly.
Anyways, I do have one page (or view) to create. Let’s take a look here:
src/Template/Todos/index.ctp
<div class="col-md-4 col-md-offset-4">
<form action="/todos/add.json" class="form-inline" role="form" id="add-to-do">
<div class="form-group">
<div class="input-append" id="task-input">
<input class="form-control input-lg" name="to-do" type="text" id="inputLarge" placeholder="Enter a task...">
<button type="submit" class="btn btn-primary btn-lg">Add To-do</button>
</div>
</div>
</form>
<div class="task-container" id="to-dos">
<form action="/todos/finish.json" class="form-inline" role="form" id="finish-to-do">
<div id="incomplete-label"><h5>To do:</h5></div>
<div class="form-group" id="incomplete-to-dos"></div>
</form>
</div>
<div class="task-container">
<div id="done-label"><h5>Recently done...</h5></div>
<div id="done"></div>
</div>
</div>
The very first line will load a file from webroot/js/app.js, into our layout (remember $this->fetch(‘script’))? …
I am not making a use of the CakePHP’s Form Helper here, for a couple of reasons:
- I don’t really have any forms, only one input field and technically just one checkbox…
- Most events will be captured and processed by jQuery, so the field names aren’t as important. Also error handling is done a little differently, so again no real need to rely on the input() method.
- It’s much faster (although less secure) to just write simple HTML in a case like this one
If you take a look at the form URL’s that is what I’ll need to build in CakePHP to tie everything together. Based on the structure alone, that hints at the fact that we’ll have some sort of:
controller and action.
With all that said, the basic set up for the front-end is actually done. In the next post I’ll talk about adding some logic to both the front-end and connecting everything to our back-end (via the Controller and the Model layer).
For now, here’s a temporary screenshot of what the application will look like (albeit, still in-progress)…
Also, I hope this makes things a bit more clear as to how everything is going to work, once I build out the rest of the application.
