This website - software under the surface

Published on: 12th February 2023

Tagged in website

So I had some hardware (see previous article) and now I needed something to run. I tend to start writing software at the ‘lowest’ level, with databases and code to work with them, then worry about how everything looks at the end. Most of the code I was planning to write would never been seen directly by a visitor (hence the title ‘under the surface’) but obviously everything had to work.

A LAMP system seemed like the way to go, at least initially. I already had Linux installed on the Pi and it was easy to add Apache, MariaDB and PHP. They’re not lightweight options for the Pi but I was keen to start somewhere and if there were performance wins waiting for me further down the line, so much the better.

A list of code
Some of the code that generates the tags
I’ve used CakePHP lots over the last (gulp) 15 years so automatically reached for the latest version and got stuck in. I got into CakePHP as it helped me to understand the whole MVC thing and, although it was easy to get started, there was plenty under the hood to draw me in and extend the projects I was working on. I would need a list of models to build my views and controllers around. Obviously I would need articles - you’re reading one now - and tags would be nice pro providing categories (e.g. ‘click here to view more articles tagged x). I wanted to include photos so I’d need a model for that, and as I didn’t want everyone to create articles I’d need a user model as well. I’d need some actions; viewing, adding and editing were all must-haves although unusually I didn’t want a generic ‘just-list-everything’ index action. All of that gave me a basic diagram and checklist of things to add. So I fired up Visual Studio Code and got to work.

It was also an excuse to play with some features I hadn’t bothered with before. I’ve been envious of some websites’ drag and drop for image uploading and really wanted to add that to my form for adding and editing articles. I had a look at some options and after seeing how other people had managed it, I wrote some brief lines of JavaScript’s and PHP to handle file uploads. All I can say is that it looks easy, the steps are straightforward but there are plenty of traps for the unwary. Definitely look at some implementations online before plunging in. Definitely check out Mozilla’s guide to the Fetch API and other people’s pages of how to cope with it.

What if I uploaded the wrong image by mistake? It happens (a lot). So I wrote some more JavaScript/Fetch/PHP to handle getting rid up images I’d uploaded. Thankfully that was easier than uploading, partly because I’d already learned the process and where it could go wrong.

Once uploaded, I wanted to be able to re-order the images in the gallery. I could do this using a jQueryUI Sortable object, although I’d be adding and taking away items as they were uploaded or deleted. So I’d need to incorporate the Sortable options into the file upload code I’d writter earlier.

Not everything went to plan. I’ve written my own authorisation functions in the past but decided to have a go with CakePHP policies. They’re interesting but maybe not helpful for such a small-scale project: after all, everyone needs to be able to read articles, and only I should be able to add and edit them. It was still useful to try the baked-in facility but won’t depend on it. And there’s so much else to concentrate on: actions, permissions, database management as well as actually write some articles!

Gallery

Click to view larger versions.

A list of code