Problema em gerador de carta

Felipe De Souza Ferreira · 17 de maio de 2016

http://www.yugiohcardmaker.net/

O site acima é um gerador de cartas, e eu preciso fazer um, tentei com php e java script, deu certo mas não ficou muito bom pois sou novo na área de programação Web, alguém poderia me ajudar e falar qual o código que uso para poder fazer o mesmo esquema de digitar dados em um formulario e esses dados aparecerem na carta? Outra duvida é qual o codigo da carta também? Desde já agradeço à todos pela atenção

DiF · 17 de maio de 2016

@Felipe De Souza Ferreira Olá,

Primeiramente seja bem vindo no nosso Fórum!

Um código pronto 100% é um pouco difícil, mas podemos te dar um norte e ajudar a implementar seu código.

Inicialmente poderias explicar como tentou fazer, informar o que não ficou bom... que tipo de erros deu, se possível o código que tentou.

O gerador é de nível intermediário pois exige que saiba manipular os elementos pelo DOM no javascript, envolve o possível uso da técnica ajax(requisição assíncrona),envolve a parte back-end na qual o php é responsável por receber os dados do formulário.

Basicamente, o preview da carta é uma imagem jpg, gif ou png. usada como background de um elemento. Dentro deste elemento tem a estrutura da carta, o posicionamento da imagem central, os textos e etc.

Usando o inspecionar(Ctrl + Shift + I) na carta, verás que a carta é uma tabela. É a antiga técnica de criação de layouts. Recomendo usar DIV.

Quando se clica no botão gerar, provavelmente aciona uma requisição assíncrona(ajax) e insere os dados do formulário dentro dos elementos.

É bem fácil usar o ajax em jQuery.

Pesquise sobre as funções $.ajax() e seus atributos.

Bom esta é a parte interativa.

Ainda existe a parte do banco de dados, na qual os dados vindo dele populam os elementos do tipo SELECT como o card type, level e etc. o php será usado para popular estes elementos.

Por enquanto é só que posso fazer por você, por hora aguardo um retorno seu!

Felipe De Souza Ferreira · 18 de maio de 2016

Agradeço muito sua atenção, vou dar uma pesquisada, e em relação ao outro código ele estava em php e eu colocava os dados em um formulário e os dados desse formulário saim em outra página. Muito obrigado mesmo, totalmente grato pela sua ajuda meu amigo :3

A minha intenção principal seria somente que em um formulário eu colocasse os dados e esses dados saíssem numa imagem, uma carta que eu criarei como plano de fundo

DiF · 19 de maio de 2016

@Felipe De Souza Ferreira É exatamente isso. Fico no aguardo de sua tentativa.

55 minutos atrás, Felipe De Souza Ferreira disse:

A minha intenção principal seria somente que em um formulário eu colocasse os dados e esses dados saíssem numa imagem, uma carta que eu criarei como plano de fundo

Dica: Você pode criar um elemento section com a carta de papel de fundo. Crie dentro dele varios elementos DIV para posicionar o conteúdo da carta.

Para inserir os conteúdos na carta, você usa o jQuery. informando qual elemento vai receber o tal dado. Aí podes encaixar o uso do ajax.. com a função $.ajax() nesta função chama o arquivo php que recebe os dados do formulário e ela possui mais de um retorno... então podes usar a função done() quando tudo certo, fail() para algo der errado.. e etc,