Andmevahetusvormingud XML/JSON/YAML

1. XML → JSON teisendamine PHP abil

convert.php kood:

<?php
// Laeme XML faili
$xml = simplexml_load_file("Reisid.xml");

// Täiendame XML objektist JSON-iks
$json = json_encode($xml, JSON_PRETTY_PRINT | JSON_UNESCAPED_UNICODE);

// Salvestame faili
file_put_contents("Reisid.json", $json);

echo "Konverteerimine valmis! Vaata faili Reisid.json";

Tulemus:

2. JSON andmete kuvamine lehel jQuery abil

  • Leht peab lugema JSON-faili ja võtma sealt andmed.
  • Andmed kuva tabelina: igast JSON-i elemendist saab tabelisse üks rida.

Loon Reisid_jquery.html

Kood:

<!DOCTYPE html>
<html lang="ee">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>jquery ja JSON</title>
    <script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
    <link rel="stylesheet" href="styles_jquery.css" />
    <script>
        $(document).ready(function () {
            $.ajax({
                type: "GET",
                url: "Reisid.json",
                dataType: "json",
                success: KuvaJson,
                error: vigaJson,
            });
        });

        function vigaJson() {
            $("#container").append('<p style="color:red;">Probleemid JSON failiga!</p>');
        }

        function KuvaJson(json) {
            var table = '<table border="1">' +
                '<tr>' +
                '<th>ID</th>' +
                '<th>Reisi number</th>' +
                '<th>Lennufirma</th>' +
                '<th>Sihtkoht</th>' +
                '<th>Algus aeg</th>' +
                '<th>Lõppu aeg</th>' +
                '<th>Valjumine</th>' +
                '<th>Saabumine</th>' +
                '<th>Hind</th>' +
                '</tr>';

            $.each(json.Reis, function (voti, vaartus) {
                var id = vaartus['@attributes'].id;
                var reisi_number = vaartus['@attributes'].reisi_number;
                var lennufirma = vaartus.Lennufirma;
                var sihtkoht = vaartus.Sihtkoht;
                var algus_aeg = vaartus.Lennujaamad['@attributes'].algus_aeg;
                var loppu_aev = vaartus.Lennujaamad['@attributes'].loppu_aev;
                var valjumine = vaartus.Lennujaamad.Valjumine;
                var saabumine = vaartus.Lennujaamad.Saabumine;
                var hind = vaartus.Hind['@attributes'].value;

                table +=
                    '<tr>' +
                    '<td>' + id + '</td>' +
                    '<td>' + reisi_number + '</td>' +
                    '<td>' + lennufirma + '</td>' +
                    '<td>' + sihtkoht + '</td>' +
                    '<td>' + algus_aeg + '</td>' +
                    '<td>' + loppu_aev + '</td>' +
                    '<td>' + valjumine + '</td>' +
                    '<td>' + saabumine + '</td>' +
                    '<td>' + hind + '</td>' +
                    '</tr>';
            });

            table += '</table>';

            $("#container").append(table);
        }
    </script>
</head>
<body>
<div id="container"></div>
</body>
</html>

Tulemus:

3. JSON andmete kuvamine lehel PHP abil

  • Tee uus PHP-leht.
  • PHP peab lugema JSON-faili ja töötlema selle sisu.
  • Andmed tuleb kuvada samuti tabelina veebilehel (nt veergudes on nimi, sihtkoht, kuupäev vms).

Loon index.php

Mu kood:

<?php
$file = "Reisid.json";
$data = json_decode(file_get_contents($file), true);
?>


<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Reisid</title>
    <style>
        table, th, td { border: 1px solid black; border-collapse: collapse; padding: 5px; }
        th { background: grey; }
    </style>
</head>
<body>
<h2>Reiside tabel</h2>
<table>
    <tr>
        <th>ID</th>
        <th>Reisi number</th>
        <th>Lennufirma</th>
        <th>Sihtkoht</th>
        <th>Väljumine</th>
        <th>Saabumine</th>
        <th>Algus aeg</th>
        <th>Lõpp aeg</th>
        <th>Hind (€)</th>
    </tr>
    <?php foreach($data["Reis"] as $reis): ?>
        <tr>
            <td><?= $reis["@attributes"]["id"] ?></td>
            <td><?= $reis["@attributes"]["reisi_number"] ?></td>
            <td><?= $reis["Lennufirma"] ?></td>
            <td><?= $reis["Sihtkoht"] ?></td>
            <td><?= $reis["Lennujaamad"]["Valjumine"] ?></td>
            <td><?= $reis["Lennujaamad"]["Saabumine"] ?></td>
            <td><?= $reis["Lennujaamad"]["@attributes"]["algus_aeg"] ?></td>
            <td><?= $reis["Lennujaamad"]["@attributes"]["loppu_aev"] ?></td>
            <td><?= $reis["Hind"]["@attributes"]["value"] ?></td>
        </tr>
    <?php endforeach; ?>
</table>
</body>
</html>

Tulemus:

4. Andmete otsing

  • Lisa veebilehele otsinguväli.
  • Otsing peab toimima ühe või kahe välja järgi (nt otsi sihtkoha või kuupäeva järgi).

Lisatud funktsioon ja otsing vorm

Otsing funktsioon:

function otsing($otsing, $kriterium){
    $data = json_decode(file_get_contents("Reisid.json"), true);
    $leitud = [];
    $otsing = strtolower(trim($otsing));

    foreach ($data["Reisid"]["Reis"] as $reis) {
        if ($kriterium === "Sihtkoht" || $kriterium === "Firma") {
            $var = strtolower(trim($reis[$kriterium]));
            if (strpos($var, $otsing) !== false) {
                $leitud[] = $reis;
            }
        }
    }
    return $leitud;
}

if (!empty($_POST['search']) && !empty($_POST['kriterium'])) {
    $tulemused = otsing($_POST['search'], $_POST['kriterium']);
} else {
    $tulemused = $data["Reisid"]["Reis"];
}
?>

Otsing vorm 

<div class="failid">
        <form method="POST">
            Otsing: <input type="text" name="search" value="<?= isset($_POST['search']) ? htmlspecialchars($_POST['search']) : '' ?>">
            <select name="kriterium">
                <option value="Sihtkoht" <?= (isset($_POST['kriterium']) && $_POST['kriterium']=="Sihtkoht") ? "selected" : "" ?>>Sihtkoht</option>
                <option value="Firma" <?= (isset($_POST['kriterium']) && $_POST['kriterium']=="Firma") ? "selected" : "" ?>>Firma</option>
            </select>
            <input type="submit" value="Otsi">
        </form>
    </div>

Muudatud tabeli kood:

<table border="1">
        <tr>
            <th>ID</th>
            <th>Reisi number</th>
            <th>Firma</th>
            <th>Sihtkoht</th>
            <th>Kestus</th>
            <th>Väljumine</th>
            <th>Saabumine</th>
            <th>Hind (€)</th>
            <th>Kogumaksumus (€)</th>
        </tr>
        <?php if (empty($tulemused)): ?>
            <tr><td colspan="9" style="text-align:center;">Midagi ei leitud</td></tr>
        <?php else: ?>
            <?php foreach($tulemused as $reis): ?>
                <?php
                $transp = (float)$reis["Transport"]["@attributes"]["value"];
                $majutus = (float)$reis["Majutus"]["@attributes"]["value"];
                $eksk = (float)$reis["Ekskursioonid"]["@attributes"]["value"];
                $muud = (float)$reis["MuudKulud"]["@attributes"]["value"];
                $kogumaksumus = $transp + $majutus + $eksk + $muud;
                ?>
                <tr>
                    <td><?= $reis["@attributes"]["id"] ?></td>
                    <td><?= $reis["@attributes"]["reisi_number"] ?></td>
                    <td><?= $reis["Firma"] ?></td>
                    <td><?= $reis["Sihtkoht"] ?></td>
                    <td><?= $reis["Lennujaamad"]["@attributes"]["kestus"] ?></td>
                    <td><?= $reis["Lennujaamad"]["Valjumine"] ?></td>
                    <td><?= $reis["Lennujaamad"]["Saabumine"] ?></td>
                    <td><?= $reis["Hind"]["@attributes"]["value"] ?></td>
                    <td><?= $kogumaksumus ?></td>
                </tr>
            <?php endforeach; ?>
        <?php endif; ?>
    </table>

Kontroll:

5. PHP koodi näitamine lehel

Kood vanast teosest

<h3 class="failid">Kood</h3>
<div class="failid">
    <form method="post">
        <button type="submit" name="action" value="php">PHP</button>
        <button type="submit" name="action" value="xml">XML</button>
        <button type="submit" name="action" value="css">CSS</button>
    </form>
</div>
<?php
// koodi kuvamiseks faili valimine
$file = null;
if (isset($_POST['action'])) {
    if ($_POST['action'] == 'php') {
        $file = 'index.php';
    } elseif ($_POST['action'] == 'xml') {
        $file = 'Reisid.xml';
    } elseif ($_POST['action'] == 'css') {
        $file = 'styles.css';
    }
}
?>
<?php
// faili koodi kuvamine
if ($file) {
    echo "<div id='code'>";
    echo "<h3>$file</h3>";
    highlight_file($file);
    echo "</div>";
}
?>

Ekraanipilt:

6. Stiilid

Tingimused:

  • Tee eraldi CSS-fail ja seo see oma veebilehtedega.
  • Kujunda vähemalt järgmised asjad:
    • Tabel – raamid, taustavärvid, joondus.
      Nupud – värv, suurus, hover-efekt.
      Otsinguvorm – joondus ja stiil.
      Lehe üldine kujundus – taust, pealkiri, teksti stiil.

styles.css:

/* navigation */
nav {
    background-color: #333;
    padding: 10px 0;
}
nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
}
nav ul li {
    margin: 0 15px;
}
nav ul li a {
    color: white;
    text-decoration: none;
    font-weight: bold;
    transition: color 0.3s;
}
nav ul li a:hover {
    color: #ffcc00;
}

/* body */
body {
    background-color: #f0f2f5;
    font-family: Arial, sans-serif;
    color: #333;
    margin: 0;
    padding: 0;
}
h1, h2, h3 {
    text-align: center;
    color: #222;
    margin: 20px 0;
}

/* idk */
#container {
    width: 95%;
    margin: 0 auto;
}

/* tabel */
table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}
table td, table th {
    border: 1px solid #888;
    padding: 10px;
    text-align: left;
}
th {
    background-color: #d3d3d3;
}
tr:nth-child(even) {
    background-color: #f9f9f9;
}
tr:nth-child(odd) {
    background-color: #ffffff;
}

button, form input[type="submit"] {
    background-color: #000;
    color: #fff;
    padding: 8px 15px;
    border: none;
    border-radius: 2px;
    cursor: pointer;
    font-size: 14px;
    transition: background-color 0.3s;
}
button:hover, form input[type="submit"]:hover {
    background-color: #333;
}

/* otsinguvorm */
form {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin: 20px 0;
}
form input[type="text"], form select {
    padding: 5px 10px;
    border: 1px solid #888;
    border-radius: 4px;
    font-size: 14px;
}
form input[type="submit"] {
    background-color: #000;
    color: #fff;
    padding: 8px 15px;
    border: none;
    border-radius: 2px;
    cursor: pointer;
    font-size: 14px;
    transition: background-color 0.3s;
}
form input[type="submit"]:hover {
    background-color: #333;
}

/* failid / kood */
.failid {
    display: flex;
    gap: 10px;
    justify-content: center;
}
#code {
    text-align: left;
    margin: 20px auto;
    max-width: 80%;
    background-color: #f8f8f8;
    border: 1px solid #ccc;
    padding: 15px;
    overflow-x: auto;
}

7.JSON andmete täiendamine PHP abil

Scroll to Top