{"id":4310,"date":"2024-12-20T00:23:36","date_gmt":"2024-12-20T00:23:36","guid":{"rendered":"https:\/\/yininit.nl\/?post_type=blossom-portfolio&#038;p=4310"},"modified":"2024-12-20T14:36:44","modified_gmt":"2024-12-20T14:36:44","slug":"toepassing-van-de-kba-agent","status":"publish","type":"blossom-portfolio","link":"https:\/\/yininit.nl\/index.php\/portfolio\/toepassing-van-de-kba-agent\/","title":{"rendered":"KBA Plugin maken (webservice integratie met WordPress)"},"content":{"rendered":"\n<h3 class=\"wp-block-heading\"><strong>Plugin-mappenstructuur<\/strong><\/h3>\n\n\n\n<p>Maak een map in <code>wp-content\/plugins\/<\/code>:<\/p>\n\n\n\n<p>wp-content\/plugins\/kba-plugin\/<br>\u251c\u2500\u2500 kba-plugin.php<br>\u251c\u2500\u2500 js\/<br>\u2514\u2500\u2500 kba-api.js<\/p>\n\n\n\n<p><strong>PHP: Verbind het JavaScript-bestand met WordPress<\/strong><\/p>\n\n\n\n<p>Maak een bestand <code>kba-plugin.php<\/code> met deze inhoud:<\/p>\n\n\n\n<p><strong>Code om het JS-bestand te registreren<\/strong>: In je plugin-bestand (<code>kba-plugin.php<\/code>), moet je ervoor zorgen dat het JavaScript-bestand wordt geladen.<\/p>\n\n\n\n<p><strong>Shortcode voor het formulier<\/strong>: Zodat het formulier in je WordPress-pagina verschijnt:<\/p>\n\n\n\n<?php\n\/*\nPlugin Name: KBA Plugin\nDescription: Verbind met KBA API.\nVersion: 1.0\nAuthor: Jouw Naam\n*\/\n\nfunction kba_enqueue_scripts() {\n    \/\/ Registreer en laad het JavaScript-bestand\n    wp_enqueue_script(\n        'kba-api-script', \/\/ Unieke naam\n        plugins_url('js\/kba-api.js', __FILE__), \/\/ Pad naar het bestand\n        array('jquery'), \/\/ Vereisten (optioneel)\n        null, \/\/ Versie (null = geen cache)\n        true \/\/ Plaats in de footer\n    );\n}\nadd_action('wp_enqueue_scripts', 'kba_enqueue_scripts');\n\nfunction kba_shortcode_form() {\n    ob_start();\n    ?>\n    <form id=\"kbaForm\">\n        <label for=\"kbaVraag\">Stel je vraag:<\/label>\n        <input type=\"text\" id=\"kbaVraag\" name=\"vraag\" required>\n        <button type=\"submit\">Verstuur<\/button>\n    <\/form>\n    <div id=\"kbaResult\"><\/div>\n    <?php\n    return ob_get_clean();\n}\nadd_shortcode('kba_form', 'kba_shortcode_form');\n\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Code voor <code>kba-api.js<\/code><\/strong><\/h3>\n\n\n\n<p>Plaats dit bestand in de <code>js<\/code>-map van je plugin, zoals:<\/p>\n\n\n\n<p>Deze code zorgt ervoor dat het formulier een vraag naar je webservice stuurt en het antwoord toont op de pagina.<\/p>\n\n\n\ndocument.addEventListener(&#8220;DOMContentLoaded&#8221;, function () {\n    \/\/ Selecteer het formulier en het resultaatgedeelte\n    const form = document.getElementById(&#8220;kbaForm&#8221;);\n    const resultDiv = document.getElementById(&#8220;kbaResult&#8221;);\n\n    \/\/ Voeg een eventlistener toe aan het formulier\n    form.addEventListener(&#8220;submit&#8221;, async function (event) {\n        event.preventDefault(); \/\/ Voorkom standaardformuliergedrag\n\n        \/\/ Haal de vraag op uit het formulier\n        const vraag = document.getElementById(&#8220;kbaVraag&#8221;).value;\n\n        \/\/ Verstuur de vraag naar de API\n        try {\n            const response = await fetch(&#8220;https:\/\/jouw-api.onrender.com\/kba&#8221;, {\n                method: &#8220;POST&#8221;,\n                headers: {\n                    &#8220;Content-Type&#8221;: &#8220;application\/json&#8221;,\n                },\n                body: JSON.stringify({ vraag }), \/\/ Vraag als JSON\n            });\n\n            if (!response.ok) {\n                throw new Error(`API fout: ${response.status}`);\n            }\n\n            \/\/ Parseer de respons en toon het antwoord\n            const data = await response.json();\n            resultDiv.innerHTML = `<p><strong>Antwoord:<\/strong> ${data.antwoord}<\/p>`;\n        } catch (error) {\n            \/\/ Toon een foutmelding\n            resultDiv.innerHTML = `<p style=\"color: red;\">Fout: ${error.message}<\/p>`;\n        }\n    });\n});\n\n\n\n\n<p><strong>Ga naar je WordPress-dashboard:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Plugins &gt; Ge\u00efnstalleerde Plugins &gt; Activeer je plugin<\/strong>.<\/li>\n<\/ul>\n\n\n\n<p><strong>Voeg de shortcode <code>    <form id=\"kbaForm\">\n        <label for=\"kbaVraag\">Stel je nieuwe vraag:<\/label>\n        <input type=\"text\" id=\"kbaVraag\" name=\"vraag\" required>\n        <button type=\"submit\">Verstuur<\/button>\n    <\/form>\n    <div id=\"kbaResult\"><\/div>\n    <p>kba_shortcode_form<\/p>\n    <\/code> toe aan een pagina of bericht.<\/strong><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Plugin-mappenstructuur Maak een map in wp-content\/plugins\/: wp-content\/plugins\/kba-plugin\/\u251c\u2500\u2500 kba-plugin.php\u251c\u2500\u2500 js\/\u2514\u2500\u2500 kba-api.js PHP: Verbind het JavaScript-bestand met WordPress Maak een bestand kba-plugin.php met deze inhoud: Code om het JS-bestand te registreren: In je plugin-bestand (kba-plugin.php), moet je ervoor zorgen dat het JavaScript-bestand wordt geladen. Shortcode voor het formulier: Zodat het formulier in je WordPress-pagina verschijnt: Stel je [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"template":"","blossom_portfolio_categories":[17],"class_list":["post-4310","blossom-portfolio","type-blossom-portfolio","status-publish","hentry","blossom_portfolio_categories-kba"],"_links":{"self":[{"href":"https:\/\/yininit.nl\/index.php\/wp-json\/wp\/v2\/blossom-portfolio\/4310","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/yininit.nl\/index.php\/wp-json\/wp\/v2\/blossom-portfolio"}],"about":[{"href":"https:\/\/yininit.nl\/index.php\/wp-json\/wp\/v2\/types\/blossom-portfolio"}],"author":[{"embeddable":true,"href":"https:\/\/yininit.nl\/index.php\/wp-json\/wp\/v2\/users\/1"}],"wp:attachment":[{"href":"https:\/\/yininit.nl\/index.php\/wp-json\/wp\/v2\/media?parent=4310"}],"wp:term":[{"taxonomy":"blossom_portfolio_categories","embeddable":true,"href":"https:\/\/yininit.nl\/index.php\/wp-json\/wp\/v2\/blossom_portfolio_categories?post=4310"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}