Despachando um json pelo PHP [Resolvido]

[Frank K Hosaka]

Lá em 2020, o Wash me informou que era possível despachar um json pelo PHP, eu tentei e como não consegui acabei desistindo.

Aqui em 2023, o Wash bateu na mesma tecla: o PHP consegue sim despachar o json. Ele passou esse tutorial: https://github.com/w-studies/ajax-json

Para o tutorial dele funcionar, você precisar criar o arquivo index.html no diretório raiz, e o arquivo index.php na pasta api.

O tutorial do Wash é acadêmico, ele usa o Ajax. Eu ainda estou no primário, só ontem é que consegui chegar até o JavaScript, usando o famoso método da tentativa e erro:

index.php

<script>
async function json(){
    response = await fetch("teste.php")
    produtos = await response.json()
    categorias = {}
    produtos.forEach(function(produto){
        key=produto.tipo
        if(!categorias[key]){categorias[key]=[]}
        categorias[key].push(produto.tipo)})
}
</script>
===============================================================================

teste.php

<?php
$mysqli=new mysqli("localhost","root","","laravel");
$query=$mysqli->query("select * from mat join tipomat on tipomat.id = mat.idtipo");
die(json_encode($query->fetch_all(MYSQLI_ASSOC)));

Esse código não faz o menor sentido. O PHP ajunta duas tabelas e monta o json (eu fiquei feliz com esse código, essa foi a primeira vez que eu vi o PHP mostrar o json em carne e osso), e na outra ponta usei a função fetch para pegar o json do PHP mas o máximo que eu consegui ontem foi separar as categorias dos produtos.

O problema é como eu passo as categorias para o HTML? Eu não consegui.

O Bard me ensinou que eu não posso usar o recurso da variável global no JavaScript, quando trabalho com uma função assíncrona. Ou seja, agora que eu consegui mandar o json para o HTML, descobri que não posso fazer mais nada, a menos que eu estude Ajax e o tutorial do Wash.

 

====================================

 

Depois de estudar um pouco o tutorial do Wash, eu consegui colocar o Json do Javascript dentro do HTML assim:

 

dados.php

<?php
// mysql mat(id,material,valor,idtipo)
// mysql tipomat (id,tipo)
$mysqli=new mysqli("localhost","root","","laravel");
$tarefa=$_GET['tarefa'];
if($tarefa=="categoria"){
    $query=$mysqli->query("select * from tipomat");}
if($tarefa!=="categoria"){
    $query=$mysqli->query(
    "select * from mat join tipomat on mat.idtipo=tipomat.id where tipo='$tarefa'");}
die(json_encode($query->fetch_all(MYSQLI_ASSOC)));

==================================================================================

<script>
    async function json(){
        response=await fetch("dados.php?tarefa=categoria");
        dados=await response.json();
        first.innerHTML="<option>Selecione uma Categoria</option>"
        dados.forEach(function(dado){
            first.innerHTML+="<option>"+dado.tipo+"</option>"})}
    async function json2(){
        modal2.style='display:block;margin-top:50px'
        response=await fetch("dados.php?tarefa="+first.value);
        dados=await response.json();
        second.innerHTML="<option>Selecione um Produto</option>"
        dados.forEach(function(dado){
            second.innerHTML+="<option>"+dado.material+"</option>"})}
</script>

<button onclick="modal.style='display:block;margin-top:50px'">
Abrir modal
</button>

<div id=modal style='display:none'>
<select id=first onchange=json2()>
<script>json()</script>
</select>
</div>

<div id=modal2 style='display:none'>
<select id=second>
</select>
</div>

 

Editado Setembro 18, 2023 por Frank K Hosaka

[ikkinet]

Sobre misturar php com javascript, acho que foi mais questao de postar aqui. Ate porque ele referencia o dados.php na chamada async. então eu assumo que aquele ============= é justamente para separar que são dois arquivos diferentes, um dados.php, que vai fazer a parte do backend, e responder um json, e a parte do front-end que consumira essa api. Sobre a questao de colocar varios blocos ou um so, não sei, porque não sou bom nisso de front-end.

[ikkinet]

Se funcionou, otimo, mas talvez voce queira especificar no header da resposta que esse corpo é um json. Voce faz isso usando o 

header('Content-Type: application/json; charset=utf-8');

antes do echo.

[wash]

O php é backend (é interpretado/funciona no servidor)
Esse tipo de javascript é frontend (é interpretado/funciona no browser)

Logo, não faz sentido misturar javascript no meio do php
nem criar vários blocos <script></script>

Pode-se definir esse trecho javascript uma única vez, depois do html, pois a intenção é que o javascript "rode" depois que todo o html estiver carregado.

Costuma-se definir o trecho javascript logo antes de fechar a tag body.
Ex.: 
 

...
<script src='/assets/app.js'></script>
<script>
// javascript code here
</script>
</body>
</html>

 

[Frank K Hosaka]

Valeu ikkinet, eu esqueci de colocar o nome do arquivo da segunda listagem. Às vezes tento fazer duas listagens separadas, mas o fórum acaba ajuntando tudo. Mesmo assim, o fórum Script é o melhor que eu encontrei. Já o DivMedia é um horror, você monta o código de um jeito, e no final é publicado de maneira diferente.

Por outro lado, eu ainda tenho essa dificuldade de separar o lado do servidor e o lado do cliente: por exemplo, para mostrar os dados de um produto, você precisa que o usuário selecione um item. Se eu pedir para o servidor jogar todos os produtos no HTML, isso não vai afetar o desempenho do cliente que geralmente tem um notebook de 2 gb de RAM? Sinceramente, eu não sei o que é back-end e front-end.

Eu sou péssimo em HTML. Estou aprendendo alguma coisa com a ajuda do PHP. Eu escrevo echo "olá mundo", e o PHP monta <html><body>olá mundo</body></html>.

Editado Novembro 7, 2023 por Frank K Hosaka