SquareSpace: How to use PHP and databases like MYSQL

Update 2: Static sites are becoming more and more popular. The trend is called microservices / JAMstack. There are even more choices on how you implement backend work on static sites these days than when the article was written. Cloud functions in particular are very useful. My agency, AM Code, can help you if you need it.

Update: Recently I’ve been using Webflow. It’s a little bit more technical than squarespace but not by much if you know a little html / css. With it you get a CMS feature that would make it a lot easier to implement a native solution like I write below. Be sure to see if that would solve your needs!

So you’re faced with a client who has chosen to use SquareSpace, maybe even before they were your client.

They probably had good enough reasons for it, they didn’t have any complex needs when they set their site up.

But now they have a project for you. They need to add some feature to their site that involves databases and programming.

You can’t write PHP or MySQL directly into SquareSpace, in case you didn’t know. So how do you proceed?

Well if the new feature / interactivity that is needed is small enough that it doesn’t warrant ripping their site out of SquareSpace and remaking it on a self-hosted platform, you use JavaScript.

Thanks to tools like Firebase, you can create an interactive database-driven app purely on the client side using JavaScript. Firebase is a database that can be accessed by Javascript running in the visitor’s browser. It uses AJAX to both retrieve data and save data (like when a form is filled out).

Because this is possible with Firebase, it’s removes the need to have PHP and MySQL — provided the feature you need to create is small enough, say adding a form to a single page in squarespace.

Just write the feature they need as a Single Page Application using the JS framework of your choice, and hook it up to Firebase. There are many Javascript frameworks available that can connect with Firebase through provided addons. JS frameworks help create features like forms quickly because they setup the hard, “fundemental” foundation for you. In my scenario, I used Angular. That’s a solid choice, but you can find more frameworks here.

Once you’ve created the application the client wants in a .html file, you can copy / paste it into the SquareSpace page by adding a “Code Block” like so:

Select the code block after you are in the edit page in SquareSpace

You’ll first want to add the javascript as a code block. Afterwards put the HTML for your app in another code block after it.

Now you have a nifty, database connected single page app hosted on SquareSpace. Neet huh? 🙂

4 Comments

  1. Erik Ljungqvist October 25, 2016
  2. Brandon December 5, 2016
    • Ayub December 5, 2016

Leave a Reply