WordPress Customised Data Entry Interface – PT2

December 18, 2017

#AJAX #JavaScript #jQuery #JSON #PHP #WordPress

Our [ Product ] entity is as a Custom Post Type. Looking at the list of product items, we want to be able to choose which fields are shown as columns. We can simply achieve this result by combining manage_{$post_type}_posts_columns & manage_{$post_type}_posts_custom_column

simple data model
Custom [ Product ] listing – selected fields only shown here

Show Code

WordPress Customised Data Entry Interface – PT1

December 16, 2017

#AJAX #JavaScript #jQuery #JSON #PHP #Relational Models #WordPress

The client needed a customised backend for a WordPress site to facilitate data entry for a small catalogue of products (fewer than 100 items in total). There were 3 different specific types of product over multiple lines.

Clearly we need to begin by establishing a logical data model. The entity relationships look like this:

simple data model
Simple data model

[ Product ] is a Custom Post Type. I also created additional Custom Taxonomies for fields which would potentially need to be searchable using WP_Query or WP_Term_Query. This is a rather simplified version of what I successfully implemented – the client version included several additional taxonomy fields. [ Product Type ] and [ Product Line ] are logical entities. [ Product Version ] is arguably just a grouping of [ Product ] fields. We don’t actually need to worry about that distinction here – because of the way in which the underlying database structure is abstracted by the WordPress API.

Product - as a Custom Post Type
Product – as a Custom Post Type – with additional Custom Taxonomies
client products plugin
Client products plugin

In this case it made sense to separate the product catalogue functionality by coding it as a WordPress plugin. It comprises two files – the PHP and the JavaScript. With WordPress we can customise the backend user interface (the Dashboard) using custom meta boxes. The user needs to be able to enter the data for each field. As shown in the example here which is demonstrated with dummy data for an imaginary product. There is a good description of the metabox api at Theme Foundation’s WordPress Meta Boxes: a Comprehensive Developer’s Guide.

Custom Data Entry Interface
Custom data entry interface for [ Product Item ] fields
Custom Data Entry Interface
Custom data entry interface for [Product Item] fields

Some of those fields are just text boxes – the user can type in anything (though obviously that data needs to be sanitized before being written to the db). Sometimes the user will be selecting an image (or a PDF) from the Media Library (or uploading a new media item). Other times the user may selected from a predefined list (with radio buttons). Or the user may choose an item from a list where the option also exists to add a new item to the list.

When the user has completed or finished editing the fields for a product – then they publish, the same as any other post. But if a user is adding a new field item – for example a new [ Product Line ] then we want them to be able to do that without the need to reload the page in full. We use AJAX to update the database and the page. There is a good tutorial here at wpmudev.org – about how to implement and secure wp-ajax. Even with this being on the admin side, rather than user facing, it is important that the callback is properly secured. The following PHP shows how the metabox for [ Product Version ] is implemented:

taxonomy options
Taxonomy options

Show Code

Here is the corresponding JavaScript (jQuery). Any taxonomy which has an add button will use the same function. The client version has several additional similarly coded taxonomies which I am not including in this simplified example.

Show Code

This is how the AJAX side of that is implemented back in the PHP:

Show Code

Finally saving [ Product Version ] – called on post:

Show Code

iOS Swift development

December 15, 2017

#Apple #iOS #Swift #Xcode

Lists App Icon

It’s been over two years since I looked at it because other projects came along. But I spent much of 2015 learning Swift – initially working through Developing iOS 8 Apps with Swift course on Stanford's iTunes U. I very much enjoyed being completely immersed in the code and concepts. During this period I was also fairly active on stackoverflow. Most of my questions and answers over there still relate to Swift. During that period the language was transitioned through various version 2 releases. Today I would almost need to start again. Especially given that syntactically it shares many similarities with other basically C – like languages. I used various different programming languages and environments over the years (including COBOL, Pascal, Basic, C, C++, Visual Basic, PHP, Javascript + jQuery). I feel that I only really know a thing well whilst I am fully involved in using it. It’s the patterns we remember most.

Lists is a Universal iOS app I built in in Xcode. 100% Swift – it was also an exercise to find out how to build and deploy an iOS app. The various generations of source code usefully document much of what I learned along the way. I built it using the UISplitViewController class with UITableViews. The split view adjusts automatically depending upon whether the app is used vertically or horizontally. Built using Auto Layout and Size Classes, the app resizes intelligently and is responsive to the type of device it is run on.

Simple One-To-Many Relationship
Simple One-To-Many Relationship

Early versions of the app persisted data using XML files. Finding out how to save and parse XML using Swift was a useful learning process but I quickly switched to using Apple’s Core Data framework. Core Data provides a layer of classes which encapsulate a variety of mechanisms including SQLite for persisting and querying data. Whilst various third-party alternatives exists, Core Data is a robust technology which offers the clear advantage of not risking 3rd-party dependencies.

The app synced via iCloud between iOS devices logged into the same account. My experience of this at the time was that it was not always especially reliable – this also seemed to be the opinion of much of the developer community. I got it mostly working – but then there would be unexpected glitches. Especially when using mobile data. Perhaps it is more stable today.

Device specific settings data were stored using NSUserDefaults – for example the need to know whether the app was being run for the first time after installation on any specific device. The app incorporated Twitter’s cross-platform Fabric framework for crash reporting and analytics. Fabric has since become part of Firebase, Google’s mobile development platform. The app was tested and tweaked (memory allocation etc) using Apple’s Instruments and distributed for beta testing via TestFlight.

 

Storyboard Layout
Storyboard Layout
Xcode IDE
Xcode IDE

Sulby WordPress theme

December 15, 2017

#CSS #HTML5 #JavaScript #jQuery #LEMP #MySQL #NGINX #PHP #Redux Framework #Sulby Theme #thenakedbrunch.com #WordPress

the naked brunch
thenakedbrunch.com

Sulby is an in-house standalone WordPress theme developed by bunhill.com. Designed and built from scratch to be lightweight, fast, secure and efficient, the theme is ideally suited to many typical small business and / or presentation requirements.

The theme works effectively on both phones and larger devices and can be quickly tailored and styled to a client specification. Written in PHP, jQuery, HTML5 and CSS all of the required functionality is included within the theme itself – rather than depending on additional or potentially insecure and poorly documented third-party plugins which may be poorly maintained over time. Total knowledge of everything included in the theme offers significant advantages with respect to quickly and effectively meeting specific client requirements. Deliberately stripped back and bare-bones, there is none of the superfluous bloat and legacy code often found in commercially available themes. The aim has been to include only what is actually required – to create a flexible framework into which additional specific functionality could then be added as required.

Sulby WordPress theme
Sulby WordPress theme

This site has been built using the theme and there is a more comprehensive demo at thenakedbrunch.com. The Naked Brunch is an imaginary restaurant / café business with 3 branches. The site runs on a LEMP (Linux, Nginx, MySQL, PHP) stack and is hosted by bunhill.com at Digital Ocean. HTTPS (SSL/TLS) certificates are via Let’s Encrypt. In most cases this combination is also likely to be the best client hosting solution since the setup has been carefully optimized and tested. A site based on this theme and code base could however also be easily implemented on existing or alternative hosting elsewhere.

The theme incorporates the Redux Framework which enables us to quickly customize the use of typography – Google Fonts are available as standard enabling the look and feel of a site to be quickly changed (fig 1). Additionally the backend administration dashboard can be customized – such that, for example, functionality can be simplified for clients to include only what they actually need (fig 2). At the thenakedbrunch.com, for example, the client-user would need to be able to edit the restaurant menus and upload new pdfs (fig 3). In this example the ‘Restaurant Menu’ entity is a Custom Post Type defined in functions.php.

typography options
fig 1
client dashboard
fig 2
client dashboard
fig 3
1 2 3 4 5