szit

Ez az oldal csak olvasható. Megtekintheted a forrását, de nem változtathatod meg. Ha úgy gondolod, hogy ez helytelen, kérdezd az Adminisztrátorokat!
[[oktatas:programozás:php:php_rest_api|< PHP REST API]]

====== PHP REST API mocking ======

  * **Szerző:** Sallai András
  * Copyright (c) Sallai András, 2022
  * [[https://creativecommons.org/licenses/by-sa/4.0/|CC Attribution-Share Alike 4.0 International]]
  * Web: http://szit.hu

===== Végpont =====

^  Végpont  ^^^
|  products  | GET | az összes terméket adja  |


===== Egyszerűen tömbből =====

<code php src/api/products/index.php>
<?php
header('Access-Control-Allow-Origin: *');
header('Content-Type: application/json');

read_data();

function read_data() {
    $data = [
        [ "id"=>1, "name"=>"vaj", "price"=>1.8 ],
        [ "id"=>2, "name"=>"kenyér", "price"=>0.8 ],
        [ "id"=>3, "name"=>"tej", "price"=>0.9 ]
    ];
    
    $res = json_encode(
        $data,
        JSON_UNESCAPED_UNICODE | JSON_PRETTY_PRINT 
    );
    echo $res;
}
</code>

A tömb egyszerűsített verzióját használtuk PHP-ban. Így is írhatjuk:
<code php>
    $data = array(
        array( "id"=>1, "name"=>"vaj", "price"=>1.8 ),
        array( "id"=>2, "name"=>"kenyér", "price"=>0.8 ),
        array( "id"=>3, "name"=>"tej", "price"=>0.9 )
    );
</code>

A product tulajdonság megadása:

<code php>
    $data = [
        "products" => [
        [ "id"=>1, "name"=>"vaj", "price"=>1.8 ],
        [ "id"=>2, "name"=>"kenyér", "price"=>0.8 ],
        [ "id"=>3, "name"=>"tej", "price"=>0.9 ]
        ]
    ];
</code>

Ezek után csak a termékekre így hivatkozunk:
<code php>
    $res = json_encode(
        $data['products'],
        JSON_UNESCAPED_UNICODE | JSON_PRETTY_PRINT 
    );
</code>




<code php>
    $data = [
        "products" => [
            [ "id"=>1, "name"=>"vaj", "price"=>1.8 ],
            [ "id"=>2, "name"=>"kenyér", "price"=>0.8 ],
            [ "id"=>3, "name"=>"tej", "price"=>0.9 ]
            ],
        "customers" => [
            ["id"=>1, "name"=>"Penge Béla", "city"=>"Szeged"],
            ["id"=>2, "name"=>"Ezres Irén", "city"=>"Szeged"],
            ["id"=>3, "name"=>"Látó Ervin", "city"=>"Szeged"],
        ]
    ];
</code>


===== Egyszerűen JSON fájlból =====

<code javascript src/api/database.json>
[
    {
        "id": 1,
        "name": "vaj",
        "price": 2
    },
    {
        "id": 2,
        "name": "kifli",
        "price": 0.7
    },
    {
        "id": 3,
        "name": "vaj",
        "price": 2
    }
]
</code>


<code php src/api/products/index.php>
<?php
header('Access-Control-Allow-Origin: *');
header('Content-Type: application/json');

read_data();

function read_data() {
    $page = file_get_contents('../database.json');
    echo $page;
}

</code>

===== A products tulajdonsággal =====

<code javascript src/api/database.json>
{
    "products": [
        {
            "id": 1,
            "name": "vaj",
            "price": 2
        },
        {
            "id": 2,
            "name": "kifli",
            "price": 0.7
        },
        {
            "id": 3,
            "name": "vaj",
            "price": 2
        }
    ]
}
</code>


<code php src/api/products/index.php>
<?php
header('Access-Control-Allow-Origin: *');
header('Content-Type: application/json');

read_data();

function read_data() {
    $page = file_get_contents('../database.json');
    $obj = json_decode($page);
    $res = json_encode(
        $obj->{'products'}, 
        JSON_UNESCAPED_UNICODE | JSON_PRETTY_PRINT 
    );
    echo $res;
}

</code>


===== Lehetséges JavaScript kliens =====

<code javascript app.js>
var url = 'http://localhost:3000/api/products';
fetch(url)
.then(res => res.json())
.then(res => {
    console.log(res );
});
</code>


==== Rendereléssel ====

Táblázat a HTML oldalon. 
<code html5>
        <table class="table table-striped">
            <thead>
                <tr>
                    <th>#</th>
                    <th>Név</th>
                    <th>Ár</th>
                </tr>
            </thead>
            <tbody id="tableBody">
            </tbody>
        </table>
</code>


<code javascript app.js>
const tableBody = document.querySelector('#tableBody');

var url = 'http://localhost:3000/api/products';
fetch(url)
.then(res => res.json())
.then(res => {
    res.forEach(prod => {
        console.log(prod.name);
        let tr = document.createElement('tr');
        let tdId = document.createElement('td');
        let tdName = document.createElement('td');
        let tdPrice = document.createElement('td');
        
        tableBody.appendChild(tr);
        tr.appendChild(tdId);
        tr.appendChild(tdName);
        tr.appendChild(tdPrice);
        tdId.textContent = prod.id;
        tdName.textContent = prod.name;
        tdPrice.textContent = prod.price;

    });
});
</code>