HTMX

Muito bom! Mas existe poucas comunidades trabalhando na ferramenta

Arquivo: index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Exemplo htmx</title>
    <!-- Inclua a biblioteca htmx.js via CDN -->
    <script src="https://unpkg.com/htmx.org@1.9.4" integrity="sha384-zUfuhFKKZCbHTY6aRR46gxiqszMk5tcHjsVFxnUo8VMus4kHGVdIYVbOYYNlKmHV" crossorigin="anonymous"></script>
</head>
<body>
    <h1>Exemplo htmx</h1>
    <p>Clique no bot&atilde;o para carregar conte&uacute;do assincronamente:</p>
    <button hx-get="conteudo.html" hx-target="#conteudo" hx-swap="outerHTML">Carregar Conte&uacute;do</button>

    <div id="conteudo">
        <!-- O conteúdo carregado será inserido aqui -->
    </div>
</body>
</html>
Arquivo: conteudo.html
<p>Este &eacute; o conte&uacute;do carregado dinamicamente atrav&eacute;s do htmx!"</p>

Exemplo com Formulário

Arquivo: index.html
<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Exemplo htmx</title>
    <!-- Inclua a biblioteca htmx.js via CDN -->
    <script src="https://unpkg.com/htmx.org@1.9.4" integrity="sha384-zUfuhFKKZCbHTY6aRR46gxiqszMk5tcHjsVFxnUo8VMus4kHGVdIYVbOYYNlKmHV" crossorigin="anonymous"></script>
</head>
<body>
    <form hx-post="content.php" hx-target="#content">
    Name: <input type="text" name="name" value="Jonh"><br>
    Age: <input type="text" name="age" value="27"><br>
    Profession: <input type="text" name="profession" value="Seller"><br>
    <button type="submit">Submit</button>
    </form>

    <div id="content">
        <!-- Uploaded content will be inserted here -->
    </div>
</body>
</html>
Arquivo: content.php
<h1 align="center">Content</h1>
<?php
    $name = $_POST['name'];
    $age = $_POST['age'];
    $profession = $_POST['profession'];

    echo "Name: ".$name."<br>";
    echo "Age: ".$age."<br>";
    echo "Profession: ".$profession;
?>

CRUD

CRUD é uma sigla em inglês que significa "Create", "Read", "Update" e "Delete". Em português, significa "Criar", "Ler", "Atualizar" e "Excluir".

Na programação, CRUD é um conjunto de operações básicas que se referem ao armazenamento e manipulação de dados. São fundamentais para a maioria dos sistemas que lidam com informações, como bancos de dados e aplicativos

Atributo Descrição do produto Descrição
hx-get CRUD para GET solicitar o URL de dados
hx-post CRUD para POST solicitar o URL de dados
hx-put CRUD para PUT solicitar o URL de dadoss
hx-patch CRUD para PATCH solicitar o URL de dados
hx-delete CRUD para DELETE solicitar o URL de dados