Building Web Apps with Statamic

Statamic is built for creating and managing websites. You get to build your way, allowing you to tackle almost any kind of website. You can also easily extend capabilities with your own add-ons, so as long as you know enough PHP to do your thing, there's really no end to the options available to you.

Recently I have been exploring what Statamic and Raven can do together to build more "app like" sites. It's fair to say that I have pushed both to their limits a few times. With the continued updates made to both Statamic and Raven (sometimes out of my experiments) I can safely say that out of the box, with no PHP knowledge, you can build some pretty neat and powerful things.

Exploring Things Further

Okay, enough talk. Let's go on a little Statamic road trip shall we? Grab your jerky, scotch, a notebook, and let's do this.

As you may know, pairing Statamic and Raven together allows you to create content from the front-end of your site. You may also know that if you sprinkle some membership in there you have a way to quickly allow visits to create a secure account that can be used to login and submit content/data to a site. Great. So how can this be used practically in the wild? I thought you'd never ask.

The Real Life Example

So a project came up for me recently which required three types of users to be able to log into a system. The first type was "Customers", and they would need to raise a "job" which would have multiple types of data attached to it. Dates, descriptions, costs and so on. I will not bore you with too much detail, but lets just say I used a good number of fieldtypes to manage this.

Next were "Contractors", able to log in and once assigned to a job, able to see its details and request funds to be sent to them at different "stages" of that job. (I should point out that no payments were paid through the site but using Bison a third-party add-on by Jason Varga would have made that possible, but for now we're keeping things simple.)

Finally "Admins" are be notified of these "transactions" and would be able to assign contractors to jobs.

Putting It All Together

Lets summarize:

  1. A user needs to be able to sign up for an account.
  2. There will be two types of sign up (customer and contractor) neither of which will have admin access to the control panel.
  3. A user will need to be able update their details (contact details, username/password, etc).
  4. A user will need to be able to reset their password should they forget it.
  5. The customer will be able to raise a job with all the required details.
  6. The admin will be set an email notification once the job is submitted and assign a contractor to it.
  7. The contractor will sign in and see the job and be able to make requests for payments against that job.
  8. A customer will either approve or decline each request for funds and both the admin and contractor will be notified.
  9. Everything needs to be repeatable so that customers can raise multiple jobs and contractors can be assigned to multiple jobs.

Solving Steps 1-4

For steps 1-4 Statamic can do this right out of the box using its membership functionality. I have some helper modules that I use for building out membership sites. Nothing too fancy, but they get me up and running quickly. Feel free to dive in and look through those files, which are written based on the membership documentation.

Solving 5

Next, a customer will need to be able to raise a job, but a contractor will not, how do I go about that? Well Statamic doesn’t have user groups yet (hint hint) but I can quite easily set up this simple functionality by having two different sign up forms, one for customers and one for contractors. On each form I can just set a hidden field which assigns a “group” to that user’s membership profile. This is just a simple text field that either has a value of “customer” or “contractor”. In my front end templates I will always have access to the current logged in user and can grab the “member_group” variable I created, then conditionally load forms and content depending on the logged in user’s group.

{{ if current_member:member_group == "customer" }}
  {{# content or Raven form goes here #}}
{{ endif }}

So I can now create job using a Raven form that saves to file and then emails both the customer and admin with the job details. I wanted each job file name to be named in a specific way so in the Raven formset I add this:

submission_save_path: _content/_jobs/
filename_format: "{{ year }}-{{ month }}-{{ day }}-{{ customer_username }}-{{ title|lower|slugify }}"

What this does is use the customer’s username and the title of the job to help quickly distinguish which jobs are associated to which users. The full formset is quite long so I have saved it as a gist for you to review at you leisure.

Solving 6

This was an easy one, when the job is created then an admin is notified by email (notification is set in the new-job formest) and they can login to the Statamic control panel and assign the contractor to the job using a suggest field. If the contractor has not signed up then they can be notified via the contact details collected using the create job form.

Solving 7

The contractor signs up for and account and then has the job related to them using a suggest field (yes you can search through members using the suggest field) by an admin. Now I want the contractor to raise a request for funds against that job. So using another Raven form and the same conditional logic for the member group as before they submit a request for funds which gets saved in a separate hidden and protected content folder. The formset for this is again saved as gist for you viewing but its fairly straight forward, both the admin and customer are notified by email. To protect the hidden _funds content folder I just drop the following folder.yaml file into the _funds folder the contents of which is:

---
_protect:
allow:
_logged_in: true
_template: jobs/funds_detail
---

Solving 9

Now came the tricky part, when a customer signed in and approved or declined the request for funds I needed the request for funds entry to be updated with this information. Up until Statamic v1.9.2 and Raven v2.0.3 this was not possible but now as of Statamic v1.10 and Raven v2.1 you can now edit existing entries. So using another Raven form but this time with the new edit="{current_url}” parameter I am able to update the request for funds with either approved or declined and notify the contractor/admin of these changes. Wow, now I have a real app with not one line of PHP written by me.

Solving 10

I don’t need to put too much here but it stands to reason that once you have this working for one customer with one job, and one assigned contractor you can scale the app to work for all members who sign up.

Back at Camp

So this was a brief introduction to some of the real power the Statamic has when you combine it with Raven. I skipped over a lot of detail to try and keep things readable but I would be more than happy to answer any questions you have over at the lodge. The take away should be that with a bit of planning and forward thinking that next web app project you take on could be more than achievable using Statamic and minimal add-ons.

Happy app building.