PHP Posts

I recently helped to complete development work on a pretty unique web application. The organization had an idea to create a place for people find out about the accessibility of many different business locations. Their hope is help people with physical disabilities better plan out any business or errands they have ahead of time, so they can choose the most accessible locations. They also believe this will help push demand for businesses to become more handicap accessible.

The solution our team came up with was to create a site based around Google Maps API, and provide an interface for users to submit reviews for individual locations. Users can search for a location on the site using the same functionality as Google Maps. Once they’ve selected a location, they can see the average ratings for that location’s facilities (parking, access, bathrooms, tables, mobility, and an overall score). They can also see what other people have written about the business in terms of its accessibility.

My role in the project was to make sure the site and server could perform well under a large user load. The original version of the site quickly ran into problems hitting request limits on the Maps API, and general slowness from poor database design. My contribution was to cache the Maps data into the WordPress database, and integrate some other custom tables into WordPress.

I added logic to the site so that whenever a user selects a location that has never been clicked on before, WordPress creates a post in a ‘locations’ custom post type. The location name, map ID string, address, phone number, website, and images are all saved to the post’s meta. So whenever that location is selected in the future, the data can be pulled quickly from the local database rather than called from an external API. Each locations post also includes meta for when its data was last pulled from the API. If it has been two weeks since it was pulled from the API, the next time a user selects it, it will update its data from Google. I also added functionality for the comment ratings meta to be cached into the location post, so it no longer has to be calculated on each view.

This project stood out from my typical development work because of its unique challenges. You can see the current version of the site here.

Recently I’ve been working on some custom development work for a few Shopify eCommerce sites. My work so far has included plugin apps and theme development.

On the theme development side, Shopify only exposes the front-end view code (HTML, SCSS, and JS) in the theme templates, enhanced with a templating language they call Liquid. The Liquid templating language seems exactly like Twig, which I’ve used countless times in the WordPress theme MVC framework I use. So the transition to Shopify theme development was pretty smooth.

On the one hand, keeping theme development exclusive to front-end code makes a lot of sense from a programming standpoint. It keeps the views ignorant to back-end controller implementation, which is something I strive for in my WordPress theme MVC setup. On the other hand, it can make any extra functionality initially more difficult to implement. In WordPress theme development, it’s almost too easy to add things like content filters, meta fields, and new taxonomies. In Shopify, that sort of functionality is relegated to plugin app development, which can help organize code and pays off in the long-term. Overall I think Shopify takes the right approach to theme development.

On the plugin app development side, Shopify provides a robust API for any functionality additions or modifications you might want to make. A standard Shopify instance is locked down on the hosting they provide, so all apps have to run on your own external server. The app has to either provide its own UI on its own domain that the Shopify admin links out to, or hook into Shopify’s Embedded App SDK to display in a frame within the admin.

I’m wrapping up work on two embedded Shopify apps built in PHP. The first provides extra admin fields to products, so admins can control some custom functionality for product pages. The goal is to provide something like an Advanced Custom Field experience to the Shopify admin. For now, the fields are configured by a developer through a JSON file, so the client admin doesn’t have to bother with creating and implementing fields. I’m using it to create product fields for custom warning messages and minimum order quantities. The second app integrates Shopify orders with Amazon S3 storage. The use-case for the client is to have customers upload images with a customized order, and store those images in an S3 bucket. Right now the app uses Shopify’s CDN as temporary storage for the image as the customer completes the order, and then hooks into Amazon’s PHP SDK to upload the image to the S3 bucket.

I’ve really enjoyed working in Shopify so far. I like the strong separation between back-end functionality and templating. It’s been a nice refresher from the many WordPress projects I’ve had lately.

I’ve had some time to reflect on my work from the past few months, so I’d like to write about a couple of projects and some insights I’ve gained from them.

One of the organizations I work for is going through a major overhaul on its eCommerce platform. We are moving inventory to a new warehouse, changing shipping policies, adding new products, and working towards simplifying our customers’ experience. My role so far has been to rework our SQL databases to conform to our new data structures, rewrite the back-end (PHP) logic associated with those tables, and rework our store website’s custom admin panel. It’s been a lot of work, but I’ve really enjoyed the chance to stretch out my SQL knowledge.

I also started a just-for-fun personal project of developing a web-based computer game. The idea for the game is in the same vein as old text-based adventure games like Zork or Colossal Cave Adventure. I’m working to include multiplayer capabilities as well, similar to games like MUD1. My reason for starting this project is to familiarize myself with a more Javascript-centric stack. I’m exclusively using JSON data structures to store and pass data between the web app and the server, no databases included. The current prototype does have a PHP back-end, but my goal is to transition to Node. It’s been a fun and very unique project so far.

Data structures seem to be a common thread between my work projects lately. My work involves different ways of organizing data, like JSON, SQL, and associative arrays, and how to communicate that data around different programming frameworks. It’s always satisfying when all the different parts of a system fit together nicely and churn out exactly what you expect.

I’m not able to link directly to the web-based admin dashboard for the PHP/MySQL eCommerce platform I helped build, so I’d like to describe it here in more detail.

My job was to overhaul the UX and capabilities of the outdated admin dashboard. When I started, the only site functions available in the dashboard were creating coupon codes, managing images in a featured products section, and viewing orders. The functionality I added included product listing layout options, product pricing management, and Google Shopping integration.

Along with the new functionality, I had to restructure parts of the platform’s database to be compatible with the some of the new dashboard systems. This also involved re-integrating the system with an external product management service.

I really enjoyed working on this project because it took me out of my WordPress/Drupal comfort-zone. Personal projects are the only opportunities I’ve had to code in PHP outside of a larger CMS, so it was a new experience working in vanilla PHP on a larger scale project. It was also great to work with and learn from some veteran developers.

I’ve been working on an interactive map WordPress plugin on and off since last September. It’s been an awesome learning experience.

What it is:

• A world map graphic rendered on the page using HTML5’s SVG element
• Clickable regions on the map
• An infographic rendered on the page using HTML5’s canvas element

What it does:

When a visitor clicks on a region of the map graphic, the infographic is populated with the data corresponding to the clicked region. It also loads a post on the page with text content about that region. This all happens through one AJAX call, so no page reload necessary!

I’ve had a few interesting iterations of how the map functions. I’ve had it loading a few of the most recent posts from a category associated with the clicked region. I’ve had it loading a single post’s content up to the Read More tag, and then including a button to the full post. For my current needs, I’m just loading up the full content of a single post corresponding to the clicked region.

There’s still a good chunk of work left before I’d call it finished. I’m working on getting as many options integrated into the Admin as possible. Right now I only have the infographic’s data values and post selection available in an admin screen. Eventually I also hope to give users control over how post content is displayed, and how regions are grouped together, but these options will be more of a challenge.

I’m currently using JQVMaps and NewChart.js for the plugin.

A long term goal would be to include all of JQVMap’s API, so users could control what type of map they want. I also haven’t worked toward including all of NewChart.js’ API options yet. It’s as if the more progress I make on this project, the bigger it becomes. But the bigger it gets, the more enthusiasm I have to work on it.

Here’s a link to the current WIP.