PHP Quick start guide

Estimated duration: 10 minutes

This guide shows you how to connect Prepr to a PHP project to get data from Prepr CMS. You’ll learn how to build a simple blog with PHP and Prepr CMS. When you reach the end of this guide, you'll have a working app that looks something like the image below.

blog site end result

If you want to skip ahead, clone the repository on GitHub (opens in a new tab) to run the demo locally.

Prerequisites

You need to have the following setup before you connect your PHP project to Prepr.

Step 1: Create a new PHP project

Before creating your first PHP project, you should ensure that your local machine has PHP and Composer (opens in a new tab) installed. If you are developing on macOS, PHP and Composer can be installed via Homebrew (opens in a new tab).

This guide is based on the 8.2 PHP version. The instructions below will guide you on how to create an empty PHP project for your blog app. If you have an existing PHP project then you can skip this step.

  1. Create a new folder called prepr-php. Open this new project in your preferred code editor and create a new folder called public. In this folder create a new file called index.php.

  2. Add the following code to the index.php:

<!-- ./public/index.php -->
 
<?php
 
echo '<div>';
 
    echo '<h1>My blog site</h1>';
 
echo '</div>';
  1. Run the following command in the terminal to start the server:
php -S localhost:8000
  1. You should now be able to view your app on your localhost http://localhost:8000/public/index.php (opens in a new tab).

Step 2: Install the Prepr Graphql SDK

The Prepr Graphql SDK is an integration tool that helps to retrieve CMS data with GraphQL. The instructions below show you how to install the Prepr Graphql SDK so that you can add GraphQL queries to request data from the Prepr API.

  1. Execute the following command in the terminal:
composer require preprio/php-graphql-sdk
  1. Next, you need to assign the URL of the endpoint. This URL includes the access token for the environment you want to query from. Get this URL by logging into your Prepr account:
    a. Go to Settings > Access tokens to view all the access tokens.
    b. Copy the API URL value from the GraphQL Production access token to only retrieve published content items.

    access token list

Use the GraphQL Production API URL to request published content items for your live app and use the GraphQL Preview value to make a preview of unpublished content items for your content editors.

  1. Update the index.php file in public folder with the following code and paste the API URL that you copied in the previous step to connect to Prepr:
<!-- ./public/index.php -->
 
<?php
 
// Enable autoload of the Prepr SDK
require '../vendor/autoload.php';
 
// Use the Prepr SDK
use Preprio\Prepr;
 
// Connect to the Prepr GraphQL API
$apiRequest = new Prepr('<YOUR-PREPR-API-URL>');
 
echo '<div>';
 
    echo '<h1>My blog site</h1>';
 
echo '</div>';
  1. Refresh the page in your browser. If the app runs without errors, then the setup above was done correctly. The next step is to fetch content from Prepr using the installed GraphQL SDK.

Step 3: Fetch multiple articles

Now that your Prepr Graphql SDK is installed and connected to Prepr, fetch the blog articles from Prepr.

Add a GraphQL query

  1. Create a queries directory in the root directory of your project and create a file named get-articles.graphql.

  2. Add the following query to this file to retrieve all articles:

# ./queries/get-articles.graphql
 
query {
    Articles {
        items {
            _id
            _slug
            title
        }
    }
}

You can create and test GraphQL queries using the Apollo explorer (opens in a new tab) from Prepr. Open the API Explorer from the Article content item page in Prepr or the access token page.

If you’re using preloaded demo data in your Prepr CMS environment as mentioned above in the Prerequisites section, you should have a few published articles as shown in the below image. The query will retrieve the ID, Slug, and Title of each article.

demo articles

In the next step, we'll fetch and process the query response.

Fetch data

Now that the query has been added, fetch the articles from Prepr and display them in the app.

  1. Open the index.php file in the public folder and add the code below to display the data retrieved from the query.
 <!-- ./public/index.php -->
<?php
require '../vendor/autoload.php';
 
use Preprio\Prepr;
 
$apiRequest = new Prepr('<YOUR-PREPR-API-URL>');
 
echo '<div>';
 
        echo '<h1>My blog site</h1>';
    
 
        // Display a list
        echo '<ul>';
 
            // Make a query request for a list of articles
            $apiRequest
                ->query('../queries/get-articles.graphql')
                ->request();
 
            $apiResponse = $apiRequest->getResponse();
 
            $articles = $apiResponse['data']['Articles']['items'];
            if ($articles) {
 
                foreach ($articles as $article) {
                    
                    // Display each article returned by the query
                    echo '<li>
                        <a href="' . $_SERVER['REQUEST_URI'] . '?slug='.$article['_slug'].'">'.$article['title'].'</a>
                    </li>';
                }
            }
 
        echo '</ul>';
    echo '</div>';

Now when you view the website on your localhost, you'll see something like the image below.

Local

Step 4: Fetch individual articles

Now that you have the list of articles, add links to them. When a visitor clicks on a link, your app should open a detailed article page automatically. The instructions below show you how to set up the routing from the main page to the detailed page and how to fetch the article details based on the slug of the article that was clicked.

Fetch article details

Add another query to fetch a specific article by its slug and make this page visible when clicking on an article.

  1. Create a file called get-article-by-slug.graphql in the queries folder and add the following to query a specific article by its slug:
 
# ./queries/get-article-by-slug.graphql
 
query ($slug: String) {
    Article (slug: $slug) {
        _id
        title
        content {
            __typename
            ... on Text {
                body
                text
            }
            ... on Assets {
                items {
                    url
                }
            }
        }
    }
}

Now that the query is added, fetch the individual article by its slug. Fetch the article title and the article content.

The Article content is stored in a Dynamic content field. Check out the GraphQL docs for more details on how to fetch the data within this field.

  1. Open the index.php file in the public folder again and add a condition to display a specific article when the slug is filled.
 <!-- ./public/index.php -->
<?php
require '../vendor/autoload.php';
 
use Preprio\Prepr;
 
$apiRequest = new Prepr('<YOUR-PREPR-API-URL>');
 
echo '<div>';
 
// Show the List of articles if there is no slug
if(!isset($_GET['slug'])) {
        echo '<h1>My blog site</h1>';
    
        echo '<ul>';
 
            $apiRequest
                ->query('../queries/get-articles.graphql')
                ->request();
 
            $apiResponse = $apiRequest->getResponse();
 
            $articles = $apiResponse['data']['Articles']['items'];
            if ($articles) {
 
                foreach ($articles as $article) {
 
                    echo '<li>
                        <a href="' . $_SERVER['REQUEST_URI'] . '?slug='.$article['_slug'].'">'.$article['title'].'</a>
                    </li>';
                }
            }
 
        echo '</ul>';
 
    // Retrieve an article by the slug and show the details
    } else {
        $apiRequest
        ->query('../queries/get-article-by-slug.graphql')
        ->variables([
            'slug' => $_GET['slug']
        ])
        ->request();
 
    $apiResponse = $apiRequest->getResponse();
 
    $article = $apiResponse['data']['Article'];
    if($article) {
 
        echo '<h1>' . $article['title'] . '</h1>';
 
        if($article['content']) {
            foreach($article['content'] as $content) {
 
                if($content['__typename'] === 'Assets') {
 
                    echo '<div class="my-10">
                        <img src="' . $content['items'][0]['url'] . '" width="300" height="250"/>
                    </div>';
 
                } elseif($content['__typename'] === 'Text') {
 
                    echo '<div>
                        ' . $content['body'] . '
                    </div>';
 
                }
            }
        }
    }
}
 
echo '</div>';

Now, when you view your site, you can click on an article which will direct you to that specific article like in the image below.

article detail

All done

Congratulations! You have successfully connected a PHP project to Prepr for a simple Blog app.

Next steps

To learn more on how to expand your project, check out the following resources:

Was this article helpful?

We’d love to learn from your feedback