{"id":1907,"date":"2009-01-05T05:45:48","date_gmt":"2009-01-05T12:45:48","guid":{"rendered":"http:\/\/css-tricks.com\/?p=1907"},"modified":"2017-03-20T19:58:46","modified_gmt":"2017-03-21T02:58:46","slug":"php-for-beginners-building-your-first-simple-cms","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/php-for-beginners-building-your-first-simple-cms\/","title":{"rendered":"PHP for Beginners: Building Your First Simple CMS"},"content":{"rendered":"<h3>The Magic of PHP + MySQL<\/h3>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/csstricks-uploads\/phpmysql-1.jpg?resize=570%2C200\" width=\"570\" height=\"200\" alt=\"\" title=\"\" data-recalc-dims=\"1\" \/><\/figure>\n<p>It&#8217;s safe to say that nearly every website that&#8217;s up-to-date these days is using some form of content management system (CMS). While there are a ton of great free options that provide us with a CMS to power a website (WordPress, Drupal, etc.), it doesn&#8217;t hurt to peek under the hood and get a feel for how these systems work.<\/p>\n<p>To get our feet wet as back-end developers, we&#8217;ll be creating a simple PHP class that will:<\/p>\n<ul>\n<li>Create a database<\/li>\n<li>Connect to a database<\/li>\n<li>Display a form with two fields<\/li>\n<li>Save the form data in the database<\/li>\n<li>Display the saved data from the database<\/li>\n<\/ul>\n<p><a href=\"https:\/\/css-tricks.com\/examples\/SimpleCMS.zip\" class=\"button\">Download Files<\/a><\/p>\n<p><!--more--><\/p>\n<p>This class is intended to give you a feel for how PHP and MySQL interact together, and to show the basics of a CMS. I&#8217;ll be skipping explanations of some of the very basic programming stuff, so if at any point you feel lost, checkout the course <a href=\"http:\/\/net.tutsplus.com\/articles\/news\/diving-into-php\/\" rel=\"noopener\">Diving into PHP<\/a> and give yourself a crash-course in PHP. I&#8217;ll try not to lose anyone, though, I promise.<\/p>\n<h3>Building the Class<\/h3>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/csstricks-uploads\/phpmysql-2.jpg?resize=570%2C162\" width=\"570\" height=\"162\" alt=\"\" title=\"\" data-recalc-dims=\"1\" \/><\/p>\n<p>Our first step is to simply lay out the class in a file named &#8216;simpleCMS.php&#8217; so we have a road map to work with.<\/p>\n<pre rel=\"PHP\" class=\"lang-php\"><code>&lt;?php\r\n\r\nclass simpleCMS {\r\n  var $host;\r\n  var $username;\r\n  var $password;\r\n  var $table;\r\n\r\n  public function display_public() {\r\n    \r\n  }\r\n\r\n  public function display_admin() {\r\n    \r\n  }\r\n\r\n  public function write() {\r\n    \r\n  }\r\n\r\n  public function connect() {\r\n    \r\n  }\r\n\r\n  private function buildDB() {\r\n    \r\n  }\r\n}\r\n\r\n?&gt;<\/code><\/pre>\n<p>As you can see, we&#8217;re creating one class with four variables and five methods. I&#8217;ve opted to use PHP&#8217;s <a href=\"http:\/\/en.wikipedia.org\/wiki\/Object_oriented\" rel=\"noopener\">object-oriented approach<\/a> because it makes for cleaner code in large projects, and, in my opinion, it&#8217;s just good practice.<\/p>\n<h3>The Variables<\/h3>\n<p>In this case, all four variables are for connecting to the database: <code>$host<\/code>, <code>$username<\/code>, <code>$password<\/code>, and <code>$table<\/code> provide a path and access to our database on the server. For now, we&#8217;ll leave those empty and move on to our database, which is constructed by the method <code>buildDB()<\/code>.<\/p>\n<h3>Build the Database<\/h3>\n<pre rel=\"PHP\" class=\"lang-php\"><code>private function buildDB() {\r\n    $sql = &lt;&lt;&lt;MySQL_QUERY\r\n        CREATE TABLE IF NOT EXISTS testDB (\r\n            title\tVARCHAR(150),\r\n            bodytext\tTEXT,\r\n            created\tVARCHAR(100)\r\n    )\r\n    MySQL_QUERY;\r\n\r\n    return mysql_query($sql);\r\n}<\/code><\/pre>\n<p>This function runs a MySQL command that checks the database to see if <tt>testDB<\/tt> exists. If so, it simply passes along a notification of success; if not, it creates our table and assigns three columns to hold data.<\/p>\n<h3>Connect to the Database<\/h3>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/csstricks-uploads\/phpmysql-3.jpg?resize=570%2C136\" width=\"570\" height=\"136\" alt=\"\" title=\"\" data-recalc-dims=\"1\" \/><\/p>\n<p>Now that we have a function to build our table, let&#8217;s create the function that will connect to our database.<\/p>\n<pre rel=\"PHP\" class=\"lang-php\"><code>public function connect() {\r\n    mysql_connect($this-&gt;host,$this-&gt;username,$this-&gt;password) or die(\"Could not connect. \" . mysql_error());\r\n    mysql_select_db($this-&gt;table) or die(\"Could not select database. \" . mysql_error());\r\n\r\n    return $this-&gt;buildDB();\r\n}<\/code><\/pre>\n<p>We call <a href=\"http:\/\/us2.php.net\/manual\/en\/function.mysql-connect.php\" rel=\"noopener\">mysql_connect()<\/a> to hook into our database, and then <a href=\"http:\/\/us2.php.net\/manual\/en\/function.mysql-select-db.php\" rel=\"noopener\">mysql_select_db()<\/a> to make sure we save our data in the right place. Both of these functions are accompanied by the <code>die()<\/code> command, which essentially says, &#8220;in the event that this function fails, stop execution of this script and display a message.&#8221;<\/p>\n<p>Our <code>connect()<\/code> function connects to the database and gets us pointed in the right direction, then runs our <code>buildDB()<\/code> function. Remember the grammatically awkward &#8220;IF NOT EXISTS&#8221; part of our MySQL command? Because we&#8217;re going to run this function every time the page is loaded, we have to make sure we&#8217;re not overwriting our database with every function call, and that&#8217;s exactly what that phrase requires.<\/p>\n<h3>Build the Form<\/h3>\n<p>So, we&#8217;ve got a database. Now we just need to put stuff in it!<\/p>\n<pre rel=\"PHP\" class=\"lang-php\"><code>public function display_admin() {\r\n    return &lt;&lt;&lt;ADMIN_FORM\r\n\r\n    &lt;form action=\"{$_SERVER['PHP_SELF']}\" method=\"post\"&gt;\r\n      &lt;label for=\"title\"&gt;Title:&lt;\/label&gt;\r\n      &lt;input name=\"title\" id=\"title\" type=\"text\" maxlength=\"150\" \/&gt;\r\n      &lt;label for=\"bodytext\"&gt;Body Text:&lt;\/label&gt;\r\n      &lt;textarea name=\"bodytext\" id=\"bodytext\"&gt;&lt;\/textarea&gt;\r\n      &lt;input type=\"submit\" value=\"Create This Entry!\" \/&gt;\r\n    &lt;\/form&gt;\r\n\r\nADMIN_FORM;\r\n}<\/code><\/pre>\n<p>Again, this is a very simple function. When called, it simply returns the HTML markup to create our form. You&#8217;ll notice, however, in the <code>action<\/code> attribute of the <code>form<\/code> element, that I&#8217;ve used the variable <code>$_SERVER['PHP_SELF']<\/code>. This is, essentially, a shortcut that references the file you&#8217;re currently using (in our case, it&#8217;s <code>display.php<\/code>). This is useful if you&#8217;ll be reusing your code across a site and don&#8217;t necessarily want to rewrite this function for each page.<\/p>\n<p>I&#8217;m also going to take a second right now to talk about the method I&#8217;m using to return the HTML. It&#8217;s a format used in PHP called HEREDOC syntax, and I <strong>love<\/strong> it.<\/p>\n<p>The primary advantage of HEREDOC is that it allows you to include <em>formatting<\/em> in your output. This is extraordinarily useful for folks like me who take issue with cluttered source code. You can read more about HEREDOC syntax and its ilk in the <a href=\"http:\/\/us2.php.net\/manual\/en\/language.types.string.php#language.types.string.syntax.heredoc\" rel=\"noopener\">PHP manual<\/a>.<\/p>\n<h3>Saving the Data to the Database<\/h3>\n<p>Our form will allow us to input information, so how do we save it? That&#8217;s where our <tt>write()<\/tt> method comes in.<\/p>\n<pre rel=\"PHP\" class=\"lang-php\"><code>public function write($p) {\r\n    if ( $p['title'] )\r\n      $title = mysql_real_escape_string($p['title']);\r\n    if ( $p['bodytext'])\r\n      $bodytext = mysql_real_escape_string($p['bodytext']);\r\n    if ( $title &amp;&amp; $bodytext ) {\r\n      $created = time();\r\n      $sql = \"INSERT INTO testDB VALUES('$title','$bodytext','$created')\";\r\n      return mysql_query($sql);\r\n    } else {\r\n      return false;\r\n    }\r\n}<\/code><\/pre>\n<p>Let&#8217;s start with the function call itself &mdash; we&#8217;re passing a variable to this one, which we haven&#8217;t done so far. Our variable <code>$p<\/code> is going to hold the information sent from our form via the <a href=\"http:\/\/www.html-form-guide.com\/php-form\/php-form-post.html\" rel=\"noopener\">post method<\/a>.<\/p>\n<p>Once inside the function, we start with a <a href=\"http:\/\/us2.php.net\/manual\/en\/control-structures.if.php\" rel=\"noopener\">conditional statement<\/a> that&#8217;s checking to see if the the <code>title<\/code> value was set in the form before it was submitted, and if so, we&#8217;re setting our <code>$title<\/code> variable to the <code>$_POST['title']<\/code> value (<strong>NOTE:<\/strong> we&#8217;re using the function <a href=\"http:\/\/us2.php.net\/manual\/en\/function.mysql-real-escape-string.php\" rel=\"noopener\">mysql_real_escape_string()<\/a> as a precaution against potentially dangerous input, which is important to keep in mind when you&#8217;re building <em>anything<\/em> that will allow users to input information). If <code>$_POST['title']<\/code> wasn&#8217;t set, we skip this line, leaving the <code>$title<\/code> variable unset.<\/p>\n<p>This process is repeated for our second input, and then both variables are checked to make sure nothing is blank before saving to the database. If both variables are set, we then set the <code>$created<\/code> variable with the current <a href=\"http:\/\/en.wikipedia.org\/wiki\/Unix_time\" rel=\"noopener\">Unix timestamp<\/a>, which we&#8217;ll use to sort our entries chronologically when we view them in the future.<\/p>\n<p>We now have three variables, and because we&#8217;ve run checks, we know that all three variables are not empty. Now we can write our MySQL query that will save the entry in the database!<\/p>\n<h3>Displaying the Information from the Database<\/h3>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/csstricks-uploads\/phpmysql-4.jpg?resize=570%2C162\" width=\"570\" height=\"162\" alt=\"\" data-recalc-dims=\"1\"><\/p>\n<p>Now that we have the means to put information <em>into<\/em> our database, we need to create a way to get that information back <em>out.<\/em> This is where <code>display_public()<\/code> comes in. This is by far the most complex of our methods, so let&#8217;s really take our time and figure out what&#8217;s going on inside.<\/p>\n<pre rel=\"PHP\" class=\"lang-php\"><code>public function display_public() {\r\n    $q = \"SELECT * FROM testDB ORDER BY created DESC LIMIT 3\";\r\n    $r = mysql_query($q);\r\n\r\n    if ( $r !== false &amp;&amp; mysql_num_rows($r) &gt; 0 ) {\r\n      while ( $a = mysql_fetch_assoc($r) ) {\r\n        $title = stripslashes($a['title']);\r\n        $bodytext = stripslashes($a['bodytext']);\r\n\r\n        $entry_display .= &lt;&lt;&lt;ENTRY_DISPLAY\r\n\r\n    &lt;h2&gt;$title&lt;\/h2&gt;\r\n    &lt;p&gt;\r\n      $bodytext\r\n    &lt;\/p&gt;\r\n\r\nENTRY_DISPLAY;\r\n      }\r\n    } else {\r\n      $entry_display = &lt;&lt;&lt;ENTRY_DISPLAY\r\n\r\n    &lt;h2&gt;This Page Is Under Construction&lt;\/h2&gt;\r\n    &lt;p&gt;\r\n      No entries have been made on this page. \r\n      Please check back soon, or click the\r\n      link below to add an entry!\r\n    &lt;\/p&gt;\r\n\r\nENTRY_DISPLAY;\r\n    }\r\n    $entry_display .= &lt;&lt;&lt;ADMIN_OPTION\r\n\r\n    &lt;p class=\"admin_link\"&gt;\r\n      &lt;a href=\"{$_SERVER['PHP_SELF']}?admin=1\"&gt;Add a New Entry&lt;\/a&gt;\r\n    &lt;\/p&gt;\r\n\r\nADMIN_OPTION;\r\n\r\n    return $entry_display;\r\n  }<\/code><\/pre>\n<p>The first thing to note when reading from a database is the way PHP and MySQL interact with each other. First, we ask the database a question (query), to which it replies with a result (resource). However, this result isn&#8217;t really useful until we&#8217;ve decoded it using one of several methods that &#8220;fetch,&#8221; or organize, the information that&#8217;s contained inside into a usable form (array).<\/p>\n<p>Our very first action in the above function is to set up our query in the variable <code>$q<\/code>. The asterisk (*) operator in MySQL means &#8220;everything,&#8221; so our query is asking the database to select <em>everything<\/em> from entries in the table <code>testDB<\/code> in reverse chronological order, limited to the first three entries returned.<\/p>\n<p>Now that the query is defined, we send it to the database using the function <a href=\"http:\/\/us2.php.net\/manual\/en\/function.mysql-query.php\" rel=\"noopener\">mysql_query()<\/a>. The resulting resource is stored in the variable <code>$r<\/code>. This is where it gets a bit tricky.<\/p>\n<p>We now run a conditional statement that says, &#8220;IF <code>mysql_query()<\/code> didn&#8217;t fail, AND IF the number of entries returned was greater than zero, process the result, OR ELSE display a default message.&#8221;<\/p>\n<p>If <code>$r<\/code> contains entries from the database, we now have to &#8220;fetch&#8221; that data. Information from the database is returned as an <a href=\"http:\/\/us2.php.net\/manual\/en\/language.types.array.php\" rel=\"noopener\">array<\/a>, which is organized similarly to the database table itself. The function <a href=\"http:\/\/us2.php.net\/manual\/en\/function.mysql-fetch-assoc.php\" rel=\"noopener\">mysql_fetch_assoc()<\/a> will take the resource and break each entry into an associative array (this means that when we save the result of <code>mysql_fetch_assoc()<\/code> into the variable <code>$a<\/code>, the data from the entry will be accessible by the column names in the database, i.e. <code>$a['title']<\/code>).<\/p>\n<p>However, <code>mysql_fetch_assoc()<\/code> only gives us one entry at a time. To get <em>all<\/em> of the returned entries, we have to use a <a href=\"http:\/\/us2.php.net\/while\" rel=\"noopener\">while loop<\/a>. Essentially, we&#8217;re saying, &#8220;WHILE <code>$r<\/code> has values we haven&#8217;t used yet, get the next entry in line and do the following actions with it.&#8221;<\/p>\n<p>In this case, we&#8217;re going to check the entry to make sure that data was returned, then remove the slashes that were added when we saved the information to the database using <a href=\"http:\/\/us2.php.net\/manual\/en\/function.stripslashes.php\" rel=\"noopener\">stripslashes()<\/a>. After that, we simply wrap the variables in some HTML and, <em>voila!<\/em> we&#8217;ve got screen-ready content!<\/p>\n<p>As a final step, the code adds a link to the bottom that allows users to add an entry. It&#8217;s worth noting the use of the &#8220;.=&#8221; operator used in the <code>while<\/code> loop and when creating the &#8220;Add a New Entry&#8221; link; a function can only return one variable, so we need to <em>append<\/em> the new information to the existing variable. If we just used the equals sign (&#8220;=&#8221;), we would overwrite existing data and end up with just a link to the form and no content.<\/p>\n<p>So, you&#8217;ve now written your first CMS class! You can easily write and retrieve data to and from a database. All that&#8217;s left to do is to try it out!<\/p>\n<h3>Using the Class<\/h3>\n<p>To use our class, we need to create a separate file. I&#8217;m going to call it &#8220;display.php&#8221;, which I&#8217;ll save in the main web folder, with our class saved as &#8220;simpleCMS.php&#8221; in a folder called &#8220;_class&#8221; within the main folder. To start, we just set up a document with plain ol&#8217; HTML.<\/p>\n<pre rel=\"HTML\" class=\"lang-html\"><code>&lt;!DOCTYPE html&gt;\r\n&lt;html lang=\"en\"&gt;\r\n\r\n  &lt;head&gt;\r\n    &lt;title&gt;SimpleCMS&lt;\/title&gt;\r\n  &lt;\/head&gt;\r\n\r\n  &lt;body&gt;\r\n\r\n  &lt;\/body&gt;\r\n\r\n&lt;\/html&gt;<\/code><\/pre>\n<p>To use our class, we just have to insert a little PHP between the body tags:<\/p>\n<pre rel=\"PHP\" class=\"lang-php\"><code>&lt;?php\r\n\r\n  include_once('_class\/simpleCMS.php');\r\n  $obj = new simpleCMS();\r\n  $obj-&gt;host = 'database.host.net';\r\n  $obj-&gt;username = 'DB1234567';\r\n  $obj-&gt;password = 'DBpassword';\r\n  $obj-&gt;table = 'DB1234567';\r\n  $obj-&gt;connect();\r\n\r\n  if ( $_POST )\r\n    $obj-&gt;write($_POST);\r\n\r\n  echo ( $_GET['admin'] == 1 ) ? $obj-&gt;display_admin() : $obj-&gt;display_public();\r\n\r\n?&gt;<\/code><\/pre>\n<p>First and foremost, we have to include the class using the <a href=\"http:\/\/us2.php.net\/manual\/en\/function.include-once.php\" rel=\"noopener\">include_once()<\/a> function. Then, we have to instantiate our object so that our code knows what&#8217;s going on. Third, we set all of those variables we talked about toward the beginning of this tutorial. You&#8217;ll have to replace all of those values with the information you get from your own server or hosting company. And fourth, we connect to our database using the <code>connect()<\/code> method.<\/p>\n<p>After we&#8217;ve connected to the database, we check to see if any <code>$_POST<\/code> information exists. This is because we&#8217;re using the same file for input, processing, and display of information. If anything was passed via <code>$_POST<\/code>, we run the <code>write()<\/code> function to validate it and save it to the database. Then, we use some shorthand trickery to run a conditional statement. In essence, we&#8217;re saying, &#8220;IF <code>$_GET['admin']<\/code> is set to 1, then show the form using <code>display_admin()<\/code>, OR ELSE show me the stored entries using <code>display_public()<\/code>.&#8221;<\/p>\n<p>And that&#8217;s it! Once you get a feel for it, this sort of basic programming will allow you to start exercising <em>total control<\/em> over websites you build, whether you decide to really dig in and build your own CMS framework or just improve an existing CMS by, say, <a href=\"http:\/\/codex.wordpress.org\/Writing_a_Plugin\" rel=\"noopener\">writing a WordPress plugin<\/a>.<\/p>\n<p>Really, when it comes to modern web design, you should have at least <em>some<\/em> understanding of how things are working behind the curtain&mdash;understanding <em>how<\/em> a site works will better enable you to design sites that have a more fluid integration of form and function. And besides, adding PHP and MySQL to your <em>curriculum vitae<\/em> definitely won&#8217;t hurt your credibility&#8230;<\/p>\n<p><a href=\"https:\/\/css-tricks.com\/examples\/SimpleCMS.zip\" class=\"button\">Download Files<\/a><\/p>\n<div class=\"explanation\">Jason Lengstorf runs <a href=\"http:\/\/ennuidesign.com\" rel=\"noopener\">Ennui Design<\/a>, a freelance design and development effort. He has a fetish for building custom applications from scratch, including his own content management system. When he&#8217;s not glued to his keyboard, he&#8217;s likely to be wearing cowboy shirts, deadlifting, or pretending to know stuff about wine.<\/div>\n<h3>Important Note<\/h3>\n<p>This code is written for demonstration purposes only. Several security holes have been pointed out in the comments, which I have addressed in <del>Part Two of this tutorial series<\/del> <ins>Editor&#8217;s note: There is no part two of this series anymore. Jason recommends his book <a href=\"http:\/\/www.amazon.com\/PHP-Absolute-Beginners-Jason-Lengstorf\/dp\/1430224738\" rel=\"noopener\">PHP for Absolute Beginners<\/a> as a resource for best practices.<\/ins> Still, I would strongly advise not using it for production websites without further testing.<\/p>\n<p>I have covered some of the bases with security, but other issues may exist. Further reading on security risks and safe PHP code can be found <a href=\"http:\/\/joshduck.com\/blog\/2008\/04\/05\/securing-your-php-code-xss\/\" rel=\"noopener\">here<\/a>. Please read through this before implementing this code on your server to avoid potential security holes.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The Magic of PHP + MySQL It&#8217;s safe to say that nearly every website that&#8217;s up-to-date these days is using some form of content management system (CMS). While there are a ton of great free options that provide us with a CMS to power a website (WordPress, Drupal, etc.), it doesn&#8217;t hurt to peek under [&hellip;]<\/p>\n","protected":false},"author":248113,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":[]},"categories":[4],"tags":[425,772],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"","jetpack-related-posts":[{"id":307172,"url":"https:\/\/css-tricks.com\/drupal-to-jamstack\/","url_meta":{"origin":1907,"position":0},"title":"Drupal to Jamstack","date":"April 21, 2020","format":false,"excerpt":"I've been harping for a while that Jamstack doesn't necessarily mean throwing away your old CMS. In fact, I'd argue that Jamstack is at it's most powerful when paired with a system that you already know, are comfortable with, and perhaps even like. You'd call that decoupling the front end.\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":243580,"url":"https:\/\/css-tricks.com\/learning-cope-microservices\/","url_meta":{"origin":1907,"position":1},"title":"Learning to COPE with Microservices","date":"July 22, 2016","format":false,"excerpt":"I vividly remember my first encounter with a content management system: It was 2002 with a platform called PHP-Nuke. It offered a control panel where site administrators could publish new content that would be immediately available to readers, without the need to create\/edit HTML files and upload them via FTP\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":2979,"url":"https:\/\/css-tricks.com\/the-light-cms-trend\/","url_meta":{"origin":1907,"position":2},"title":"The &#8220;Light&#8221; CMS Trend","date":"June 29, 2009","format":false,"excerpt":"CMSs are beautiful things. Just as CSS allows us to abstract the design away from the markup, a CMS allows us to use a database to abstract the content away from the markup. There are a zillion of them, each with different backend UI's and different ways to doing things.\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/csstricks-uploads\/light-unify.png?resize=350%2C200","width":350,"height":200},"classes":[]},{"id":342182,"url":"https:\/\/css-tricks.com\/building-a-headless-cms-with-fauna-and-vercel-functions\/","url_meta":{"origin":1907,"position":3},"title":"Building a Headless CMS with Fauna and Vercel Functions","date":"June 10, 2021","format":false,"excerpt":"In this tutorial, we will learn and use headless CMS, Fauna, and Vercel functions to build a blogging platform, Blogify After that, you can easily build any web application using a headless CMS, Fauna and Vercel functions.","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/06\/fauna-vercel.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":303539,"url":"https:\/\/css-tricks.com\/what-i-like-about-craft-cms\/","url_meta":{"origin":1907,"position":4},"title":"What I Like About Craft CMS","date":"March 3, 2020","format":false,"excerpt":"Looking at the CMS scene today, there are upwards of 150 options to choose from \u2014 and that\u2019s not including whatever home-grown custom alternatives people might be running. The term \u201cContent Management System\u201d is broad and most site builders fit into the CMS model. Craft CMS, a relatively new choice\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/02\/craftcms.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":302597,"url":"https:\/\/css-tricks.com\/php-is-a-ok-for-templating\/","url_meta":{"origin":1907,"position":5},"title":"PHP is A-OK for Templating","date":"February 4, 2020","format":false,"excerpt":"PHP templating often gets a bad rap for facilitating subpar code \u2014 but that doesn't have to be the case. Let\u2019s look at how PHP projects can enforce a basic Model, View, Controller (MVC) structure without depending on a purpose-built templating engine. But first, a very brief PHP history lesson\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/01\/php-templating.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"featured_media_src_url":null,"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/1907"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/248113"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=1907"}],"version-history":[{"count":26,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/1907\/revisions"}],"predecessor-version":[{"id":252988,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/1907\/revisions\/252988"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=1907"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=1907"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=1907"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}