How to turn server response into page contents?

Support
1

Sorry for the noob questions. I do write in PHP and Javascript, but am struggling to use the examples to write a simple page to (for instance) list out a series of items in a collection :-/

All the examples (here and across the web) just show the data with console.log. I’ve mucked around trying to get data onto the page, but am finding it really long-winded and complicated.

I’m hoping someone can show be a few lines of PHP or Javascript that pulls a list of items from a collection, and/or lists the contents of all the fields in an item.

2

Hi, personally I think its best to use some kind of front end framework like React or Vue to display the data since its a lot easier to manage using a shared component/ layout template.

The basic idea is to store your initial fetch data to some kind of state or variable in your application. You can then map through the data and display it however you need. If you’re familiar with the basics of React, here’s a super simple example:

For the demo, I created a new collection called ‘people’ with 3 fields called ‘name’, ‘age’, and ‘isDriver’.

  const [personInfo,setPersonInfo] = useState([]);

  useEffect(() =>{

    fetch(`https://www.example.com/api/collections/get/people?token=xxx`)
    .then(res => res.json())
    .then((res)=>{
      console.log(res);
      setPersonInfo(res.entries)
    })

  },[])

Which will return a javascript object for the collection. You will need to access the ‘entries’ object to use the data. Should look something like this for each individual entry:

Screenshot 2021-10-18 at 13.31.13
Screenshot 2021-10-18 at 13.31.13630×518 30.1 KB

After you have stored you’re fetched data to state or some kind of variable, you can then use display it:

  return (

    <div className="App">
      <h1>Cockpit Demo</h1>

      <div className="people-info">

        {
          personInfo.map((p)=>{
            return (
              <div className="single-person">
                  <div className="single-name">{p.name}</div>
                  <div className="single-age">{p.age}</div>
                  <div className="single-driver">
                    {p.isDriver ? 'Can Drive' : 'Cant drive'}
                  </div>
              </div>
            )
          })
        }
      </div>

    </div>
  )

Essentially you are looping through each single entry and displaying your field properties. Obviously you don’t have to use React or you can write everything in PHP, it’s whatever you prefer, but as long as you understand how to loop through arrays and objects thats the basic idea.

The backend collection

Screenshot 2021-10-18 at 13.30.12
Screenshot 2021-10-18 at 13.30.122246×1010 121 KB

The consumed data on the frontend

Screenshot 2021-10-18 at 13.28.33
Screenshot 2021-10-18 at 13.28.332738×922 144 KB

Hopefully you get the idea

1 Like
3

Hey Snewmn, thanks so much for replying to me. I’ll work through your steps and see if I can get closer to understanding and making this work.

I’ve tried using vue - which looks great, but I’m quickly getting bogged down with learning more and more new markup etc.

Thanks again, I’ll post when I get a bit further!!

4

Heres also a quick introduction point if you want to stay using PHP:

<?php 

$res = file_get_contents('https://www.example.com/api/collections/get/people?token=xxx');
$res = json_decode($res, true);

// so you can see the data, since theres no console
// echo '<pre>'; var_dump($res[entries]); echo '</pre>';

foreach($res[entries] as $entry) : ?>

    <div class="box">
       <div><?= $entry[name]; ?></div>
       <div><?= $entry[age]; ?></div>
       <div>
           <?php 
            if($entry[isDriver]){
                echo 'Can drive a car';
            }
            else {
                echo 'Cant drive a car';
            }
           ?>
       </div>
    </div>

<?php endforeach; ?>

Since you are inside the loop, all the properties can be accessed. Although it’s bad practice to use php file_get_contents over an api.

5

@snewmn
Just a Quick-note on your PHP Code: Never use barewords

6

If you run Cockpit on the same server as your frontend code you can also directly include cockpit into your project and access all its functionality and data right away.

Directory Structure

 `-- cockpit/ // <-- your cockpit installation
  |- test1.php
  |- ...
  `- // the other files of your project

// test1.php
<?php

include(__DIR__ . '/cockpit/bootstrap.php');

if(!isset($cockpit)){
    $cockpit = cockpit();
}

$entries = $cockpit->module('collections')->find('people');
foreach($entries as $entry){ ...

See also GitHub - raffaelj/cockpit-lib-skeleton: A skeleton to use Cockpit CMS as a library with all core admin ui features

7

See also Cheatsheet connect getcockpit with vanilla PHP

8

Thanks again to both of you for responding. I’m sure I’ll be able to get off the ground with one or both of these answers.

I wasn’t sure I’d get a response - but you’ve been so helpful :slight_smile:

9

You can also use Guzzle to do this :

:wink:

1 Like