LARPBuilder Wiki
Page
  • Zobrazit stránku
  • Starší verze
  • Zpětné odkazy
  • Nahoru
    • Site
  • Poslední úpravy
  • Správa médií
  • Mapa stránek
    • User

    Page tools

  • Zobrazit stránku
  • Starší verze
  • Zpětné odkazy
  • Nahoru

    • Site tools

  • Poslední úpravy
  • Správa médií
  • Mapa stránek

    • User tools
    Historie: • api • dokuwiki

    Rozdíly

    Zde můžete vidět rozdíly mezi vybranou verzí a aktuální verzí dané stránky.

    Odkaz na výstup diff

    Obě strany předchozí revizePředchozí verze
    Následující verze    		Předchozí verze
    cs:api [2025/04/05 13:29] – admincs:api [2025/04/05 13:49] (aktuální) – [Jak vložit formulář do WordPress (nebo jiného CMS)] admin
    Řádek 50: Řádek 50:
       - Server zkontroluje, zda doména (Origin) je povolená a API klíč je platný. Pokud ano, vytvoří nového hráče a vrátí JSON s výsledkem.     - Server zkontroluje, zda doména (Origin) je povolená a API klíč je platný. Pokud ano, vytvoří nového hráče a vrátí JSON s výsledkem.  
      
    -====== Nová funkcionalita: Generování embed kódu formuláře ====== +====== Generování embed kódu formuláře vytvořeného v LARPBuilderu ====== 
    -V nové verzi API LARP Builderu je k dispozici metoda, která automaticky generuje kompletní embed kód formuláře na základě uložených dat. Tento kód obsahuje kompletní HTML dokument s inline styly, dynamicky aktualizovanými select poli (např. pro výběr postavy či hráče), speciálními typy polí jako je **scale** (bodovací škála), **paragraph** (odstavec) či **button** (tlačítko) a skrytými poli s aktuálním API klíčem. +V sekci **Seznam formulářů** je u již vytvořených formulářů k dispozici akce **Zobrazit HTML kód**, která automaticky generuje kompletní embed kód formuláře na základě uložených dat. Tento kód obsahuje kompletní HTML dokument s inline styly, speciálními typy polí jako je **scale** (bodovací škála), **paragraph** (odstavec) či **button** (tlačítko) a skrytými poli s aktuálním API klíčem který je uložitelný jako samostatná .html stránka nebo vložitelný například do Wordpressu bez nutnosti se více starat o HTML kód.
    - +
    -=== Jak to funguje === +
    -* Metoda **get_form_as_embed_code()** načte formulář z databáze a ověří, že patří aktuálnímu projektu (pomocí `project_id`). +
    -* Dynamicky doplní možnosti select polí z aktuální databáze (například u **character_ids** a **player_ids**). +
    -* Na základě uložených definic formuláře sestaví kompletní HTML kód, který obsahuje: +
    -  - Inline CSS podle nastavení formuláře (barvy, font, velikost textu). +
    -  - Všechny vstupní prvky formuláře. +
    -  - Skrytá pole, kde je automaticky vložen aktuální API klíč. +
    -  - Načtení minimálně potřebných skriptů (jQuery a apiControl.js) pro zpracování odeslání. +
    -* Výsledný embed kód lze zkopírovat a vložit do jakéhokoli webu (například do WordPressu) bez nutnosti další konfigurace. +
    - +
    -=== Příklad embed kódu === +
    -<code html> +
    -<!DOCTYPE html> +
    -<html lang="cs"> +
    -<head> +
    -  <meta charset="UTF-8"> +
    -  <meta name="viewport" content="width=device-width, initial-scale=1.0"> +
    -  <title>Registrace</title> +
    -  <style>body { background-color: #004708; color: #FFF200; font-size: 23px; font-family: Georgia, serif; }</style> +
    -</head> +
    -<body> +
    -  <form id="apiForm" action="#" method="post" enctype="multipart/form-data"> +
    -    <p>Nějaký třeba nadpisový text</p><br> +
    -    <label for="firstname">Jméno:</label> +
    -    <input type="text" id="firstname" name="firstname" required><br> +
    -    <label for="lastname">Příjmení:</label> +
    -    <input type="text" id="lastname" name="lastname" required><br> +
    -    <label for="email">E-mail:</label> +
    -    <input type="email" id="email" name="email" required><br> +
    -    <!-- Další pole podle uložených dat formuláře, včetně dynamických selectů a speciálních typů --> +
    -    ... +
    -    <input type="hidden" id="api_key" name="api_key" value="VAŠ_API_KLÍČ"> +
    -    <input type="hidden" id="lang" name="lang" value="cs"> +
    -    <input type="hidden" id="alerts_enabled" name="alerts_enabled" value="1"> +
    -    <input type="hidden" id="form_submit" name="form_submit" value="1"> +
    -    <button type="submit">Odeslat</button> +
    -  </form> +
    -  <script src="https://larpbuilder.cz/api/js/jquery-3.7.1.slim.min.js"></script> +
    -  <script src="https://larpbuilder.cz/api/js/apiControl.js"></script> +
    -</body> +
    -</html> +
    -</code>+
      
     === Výhody === === Výhody ===
    Řádek 103: Řádek 60:
      
     ====== Jak vložit formulář do WordPress (nebo jiného CMS) ====== ====== Jak vložit formulář do WordPress (nebo jiného CMS) ======
    -Pokud chcete formulář umístit například na WordPress web, postupujte následovně:+Pokud chcete snadno vložit vygenerovaný HTML kód formuláře do WordPressu, stačí postupovat následovně:
      
    -**1) Získání API klíče v LARP Builderu** (pokud jej nekopírujete z vygenerovaného formuláře jako HTML kód tam již váš klíč je) +**Zkopírujte embed kód:**  Použijte postup tak jak je napsán o odstavec výše (tento kód obsahuje všechny potřebné části a je připravený ke kopírování), nebo si vytvořte vlastní formulář a připojte k němu nutná pole a potřebné javaskripty. 
    -    - V administraci LARP Builderu otevřete daný projekt.   +
    -    - Přejděte do sekce //Nastavení projektu//.   +
    -    - Najděte **API klíč** (obvykle v dolní části nastavení) a zkopírujte jej.   +
    -    - Zároveň v této sekci přidejte //doménu//, ze které budete formulář volat (např. `moje-stranka.cz`), a uložte změny.+
      
    -**2) Vložení HTML formuláře do WordPressu**   +**Vložte kód do příspěvku:**  Ve WordPressu přejděte na tvorbu nebo úpravu příspěvku. V editoru (Gutenberg) přidejte blok „Vlastní HTML“ a do něj vložte zkopírovaný embed kód. Pokud používáte klasický editor, přepněte na záložku HTML a vložte kód přímo tam.
    -    - **Možnost A – úprava šablony**: Otevřete soubor //page.php// (nebo jiný .php soubor vaší šablony) a na vhodné místo vložte výše uvedený kód formuláře. Změňte `value="VAŠ_API_KLÍČ"` na váš skutečný klíč.   +
    -    - **Možnost B – použití pluginu** (doporučeno, pokud nechcete zasahovat do šablony):   +
    -         - Nainstalujte a aktivujte plugin, který umožňuje vkládat vlastní HTML/JS. Například:   +
    -              - [[https://cs.wordpress.org/plugins/insert-headers-and-footers/|Insert Headers and Footers]]   +
    -              - [[https://cs.wordpress.org/plugins/code-snippets/|Code Snippets]]   +
    -         - V administraci WP přejděte do //Nastavení → Insert Headers and Footers// (nebo do rozhraní Code Snippets) a do sekce, kde lze vkládat kód, vložte HTML formulář (u Code Snippets zvolte typ „HTML Snippet“ či „Shortcode“).   +
    -         - Případně upravte `value="VAŠ_API_KLÍČ"` na reálnou hodnotu.   +
    -         - Uložte. Na stránce se pak objeví formulář.+
      
    -**3) Načtení skriptů** (`apiControl.js` a jQuery)   +**Uložte a publikujte:** Uložte změny a publikujte příspěvek. Formulář by se měl zobrazit přesně tak, jak byl vygenerován – s vlastními styly a funkcemi pro odeslání dat přes API.
    -    - Pokud už WordPress načítá jQuery, můžete link na `jquery-3.7.1.slim.min.js` vynechat.   +
    -    - Kód `<nowiki><script src="https://larpbuilder.cz/api/js/apiControl.js"></script></nowiki>` vložte do //Insert Headers and Footers// v sekci „Scripts in Footer“ nebo pomocí `wp_enqueue_script()` ve functions.php.   +
    -    - Ujistěte se, že se skripty načítají //po// načtení formuláře, aby mohl JavaScript reagovat na událost //submit//.+
      
    -**4) Otestování**   +** Otestování**: Otevřete stránku s formulářem, vyplňte jej a klikněte //Odeslat//. Po úspěchu se v administraci LARP Builderu objeví nový hráč s vyplněnými údaji. Pokud dojde k chybě (např. špatná doména, chybějící povinné pole), zobrazí se chybová hláška (v případě že je <input type="hidden" id="alerts_enabled" name="alerts_enabled" value="1"> jinak se chybové hlášení nezobrazí). 
    -    - Otevřete stránku s formulářem, vyplňte pole a klikněte //Odeslat//.   + 
    -    - Po úspěchu se v administraci LARP Builderu objeví nový hráč s vyplněnými údaji. Pokud dojde k chybě (např. špatná doména, chybějící povinné pole), zobrazí se chybová hláška.+Tento postup nevyžaduje žádné složité nastavení ani zásahy do šablony. Stačí zkopírovat hotový kód a vložit jej na stránku. WordPress se postará o zobrazení kódu bez zásahu do dalších souborů či nastavení.
      
     **Tip:** Pokud se kód HTML a `<script>` v klasickém WordPress editoru //nezobrazí správně// nebo se //zahodí//, použijte místo toho blok //Vlastní HTML// (v novém Gutenberg editoru), případně shortcody v Code Snippets.   **Tip:** Pokud se kód HTML a `<script>` v klasickém WordPress editoru //nezobrazí správně// nebo se //zahodí//, použijte místo toho blok //Vlastní HTML// (v novém Gutenberg editoru), případně shortcody v Code Snippets.  
     +
     +===== Kde získám API klíč =====
     +    - V administraci LARP Builderu otevřete daný projekt.  
     +    - Přejděte do sekce //Nastavení projektu//.  
     +    - Najděte **API klíč** (obvykle v dolní části nastavení) a zkopírujte jej.  
     +    - Zároveň v této sekci přidejte //doménu//, ze které budete formulář volat (např. `moje-stranka.cz`), a uložte změny.
      
     ====== Použití API v Postmanu ====== ====== Použití API v Postmanu ======
    cs/api.1743852565.txt.gz · Poslední úprava: 2025/04/05 13:29 autor: admin