[TUTORIAL] Criar um formulário de postagens
2 participantes
Página 1 de 1 • Compartilhe
[TUTORIAL] Criar um formulário de postagens
Formulário de postagens |
--> Tutoriais e astúcias <--
Criar um formulário de postagens
Criar um formulário de postagens
1º - Adiquirir conhecimentos básicos de Javascript
Antes de mais nada é preciso que você tenha, pelo menos, uma vaga noção dessa linguagem de programação, para que consiga lidar com o formulário e fazer as alterações que bem quiser nele. O HTML também é interessante, mas menos necessário, porém se estiver com vontade de fazer algo bom, terá de aprender também. Na Internet é muito fácil de encontrar tutoriais explicativos sobre ambas as linguagens.
Se tiver um editor de códigos HTML será melhor ainda, pois eles irão guiá-lo na hora de fazer a parte visual como também na hora de criar os campos. Se estiver interessado em um, veja esta lista: Editores HTML.
2º - Criar uma página HTML para suportar o formulário:
Para o nosso formulário será preciso criar uma página HTML personalizada. Lembre-se de que é preciso que ela tenha o topo e o fim do fórum, para que seja possível usar os recursos do jQuery, necessários no formulário. Dê à página o título que desejar, ele não terá efeitos neste momento. Para aprender a criar uma página HTML basta ler o seguinte tutorial: Criar uma página HTML personalizada
3º - Noção da função e tipo dos campos que podem ser adicionados:
Agora temos que compreender como funcionam os campos, seus atributos e os tipos que serão necessários no formulário. Geralmente eles se resumem em alguns principais:
Campo de texto simples
Este é o mais clássico, o campo de escrita normal para poucos caracteres, como para o título do tópico ou para a descrição. Ele é composto da seguinte forma:
Exisem alguns outros atributos, como maxlength (número máximo de caracteres), class (classe CSS), porém estes você deverá conhecer mais profundamente em um tutorial específico para códigos HTML.<input type="text" name="sform_nome" value="valor padrão" />
Vermelho: especifique um nome para o campo, deverá ser um simples, sem acentos ou espaços, para o identificar. Irá utilizá-lo mais para frente para compor os conteúdos. Verá também que esta propriedade pode ser modificada, para que o campo assuma o lugar de campos especiais, como o título do tópico, por exemplo.
Verde: o valor que deseja que o campo tenha assim que a página for carregada, se não quiser nada basta remover o que está em verde.
Caixa de texto
Caixa para a escrita de mensagens mais longas, como por exemplo a caixa de escrita dos tópicos. A caixa de texto é formada da seguinte forma:
Vermelho: especifique um nome para o campo, deverá ser um simples, sem acentos ou espaços, para o identificar. Irá utilizá-lo mais para frente para compor os conteúdos. Verá também que esta propriedade pode ser modificada, para que o campo assuma o lugar de campos especiais, como o título do tópico, por exemplo.<textarea name="sform_nome" rows="7" cols="7">Valor padrão</textarea>
Verde: o valor que deseja que o campo tenha assim que a página for carregada, se não quiser nada basta remover o que está em verde.
Laranja: estes valores determinam o tamanho do campo de texto. Basta ir alterando conforme desejar para que ele fique do tamanho adequado.
Botões (enviar ou funções)
Com este tipo poderá submeter o formulário ou então aplicar uma função criada previamente com Javascript. Ele é composto da seguinte forma:
Exisem alguns outros atributos, como maxlength (número máximo de caracteres), class (classe CSS), porém estes você deverá conhecer mais profundamente em um tutorial específico para códigos HTML.<input type="tipo" name="sform_nome" value="valor padrão" />
Vermelho: especifique um nome para o campo, deverá ser um simples, sem acentos ou espaços, para o identificar. Irá utilizá-lo mais para frente para compor os conteúdos. Verá também que esta propriedade pode ser modificada, para que o campo assuma o lugar de campos especiais, como o título do tópico, por exemplo.
Verde: o valor que será exibido dentro dele.
Violeta: Poderá escolher entre submit para que a ação do botão seja enviar o formulário ou então button, para que ele faça uma ação diferente, que já foi definida.
Caixa de seleção
A caixa de seleção é aquela em que você deve escolher um dos valores pré-determinados, como por exemplo Sim ou Não. Ela funciona da seguinte forma:
Vermelho: especifique um nome para o campo, deverá ser um simples, sem acentos ou espaços, para o identificar. Irá utilizá-lo mais para frente para compor os conteúdos. Verá também que esta propriedade pode ser modificada, para que o campo assuma o lugar de campos especiais, como o título do tópico, por exemplo.<select name="sform_nome">Opções</select>
Laranja: para cada uma das opções que você colocar deverá adicionar a seguinte linha dentro da baliza select:
Em preto deverá colocar o valor que será definido para o campo quando clicar na opção X, e no Texto de exemplo o texto que será exibido para o usuário. Por exemplo, ficaria assim um código desenvolvido:<option value="valor">Texto de exemplo</option>
- Exemplo:
- <select name="f"> <option value="7">Problemas de conexão</option> <option value="8">Questões sobre códigos</option> <option value="9">Questões sobre a aparência do fórum</option> <option value="10">Questões sobre o Painel de controle</option> </select>
Campos ocultos
Pode parecer algo inútil, porém não é. Estes campos serão usados quando queremos que vários campos formem um único, por exemplo, vários campos componham o que, na postagem comum será a mensagem enviada ou o título do tópico. Ele se estrutura da seguinte maneira:
Exisem alguns outros atributos, como maxlength (número máximo de caracteres), class (classe CSS), porém estes você deverá conhecer mais profundamente em um tutorial específico para códigos HTML.<input type="hidden" name="sform_nome" value="valor padrão" />
Vermelho: especifique um nome para o campo, deverá ser um simples, sem acentos ou espaços, para o identificar. Irá utilizá-lo mais para frente para compor os conteúdos. Verá também que esta propriedade pode ser modificada, para que o campo assuma o lugar de campos especiais, como o título do tópico, por exemplo.
Verde: o valor que deseja que o campo tenha assim que a página for carregada, se não quiser nada basta remover o que está em verde.
4º - Compreendendo os campos especiais:
Quando queremos formar um formulário, os resultados dos campos que criamos acima terão que ser enviados para o sistema de postagem do fórum de uma forma que ele possa entender como os dados são processados. Para isso usamos campos ocultos com nomes que são reconhecidos pelo sistema como título do tópico, ou mensagem ou ainda como descrição. Vejamos os tipos e os valores do atributo name para cada um deles:
Campos especiais | |
Parte do tópico | Valor do atributo name |
Título do tópico | subject |
Descrição do tópico | description |
Fórum em que será postado | f |
Botão que envia a mensagem (terá que ter obrigatoriamente este valor) | post |
Toda a mensagem | message |
<input type="hidden" value="Título do tópico" name="subject"
5º - Estruturar o formulário:
Na página que criamos deverá colocar o seguinte código:
Na linha em verde deverá criar os campos que foram estudados no ponto 3, de acordo com o que você deseja fazer. Basta criar, ainda não se preocupe com a forma como eles serão interpretados, isso trataremos no próximo ponto, que será o que deveremos substituir no que está em vermelho.<script>
formulario = {
valor: function(input, attribute) {
if(!attribute) {
return jQuery('*[name=sform_' + input + ']').val();
}
else {
return jQuery('*[name=sform_' + input + ']').attr(attribute);
}
},
definir: function(input, value) {
jQuery('*[name=' + input + ']').val(value);
}
}
jQuery(document).ready(function() {
//Valores que precisam ser definidos (estudaremos no próximo ponto)
});
</script>
<form action="/posting.forum" method="post" enctype="multipart/form-data">
Campos que foram estudados no ponto 3 devem estar aqui
<input type="hidden" name="mode" value="newtopic" />
<input type="hidden" name="lt" value="0" />
<input value="Submeter formulário" type="submit" class="button1" name="post" />
</form>
Pode parecer que fizemos pouco, mas o formulário está quase pronto na sua parte funcional, somente não trataremos neste tutorial a parte estética, que deverá ser feita por você, caso tenha um entendimento sobre as balizas HTML que são necessárias para criar efeitos CSS.
6º - Interpretando os campos:
Você no ponto anterior deve ter criado campos para os valores predefinidos, como a ID do fórum onde o tópico será postado, o título... a não se que eles sejam dinâmicos, ou sejam dependendendo de como outros valores se comportarem ele se comportará de uma forma, que é o que trabalharemos neste ponto.
Temos vários campos, por exemplo texto1, texto2, texto3 e outros, que foram criados tento como base o ponto 3, onde substituía-se o valor em vermelho pelo nome que gostaria de dar ao campo. Para por exemplo gerarmos a mensagem que está em um campo oculto e que é gerada tendo como base 3 outros campos teríamos de colocar na parte vermelha referida no ponto anterior o seguinte código:
Isso faz com que o campo especial message seja o valor 1 mais o valor 2, dois campos que o usuário teve que preencher acima. Pode fazer isso como quiser, somente tenha em mente que para qubrar linhas em Javacript deverá usar \n, veja um segundo exemplo de como ficaria para um formulário de pedidos gráficos:formulario.definir('message', formulario.valor('texto1') + formulario.valor('texto2');
Viu que temos duas funções para usarmos, a formulario.definir que define um valor para um campo especial e que deve ser usada da seguinte forma: formulario.definir('NOME DO CAMPO', 'VALOR QUE ELE DEVERÁ TER'); e também a função valor: formulario.valor('NOME DO CAMPO'); esta retornará o valor do campo que deverá ser o que substituiu pelo que estava em vermelho no ponto 3. Depois de tudo pronto salve a página, iremos partir para a aplicação do botão na hora de criar um tópico.formulario.definir('message', 'Dimensões do pedido: ' + formulario.valor('dimensoes') + '\n Tipo ' + formulario.valor('tipo');
7º - Ativar o formulário nos fóruns desejados:
Agora deverá criar uma nova página HTML com o seguinte código:
Deverá alterar o valor em vermelho para o fórum em que deverá aparecer o botão com esta nova função, o valor numérico pode ser obtido acessando o fórum em questão, verá que no final do endereço existe: -f4 por exemplo, neste caso deverá pegar o 4 e substituir!jQuery(document).ready(function() {
if(window.location.href.match(/-f/((?|#).+)?/)) {
jQuery('a[href^="/post?f=3&mode=newtopic"]').attr('href', 'endereço da primeira página HTML com o formulário');
}
});
No endereço da página deverá colocar o endereço da nova página que criamos para o formulário HTML, que deve estar salva. Feito isso agora temos que fazê-la funcionar em todo o fórum, para que quando o fórum ou o tópico pertecer ao fórum indicado o botão Novo terá a nova função. Para isso devemos copiar o endereço dessa nova página HTML que acabamos de criar que contém o código dos fóruns, provavelmente, se não criou outras páginas, ela será a -h2! Depois somente é necessário aceder a:
Painel de controle -> Geral -> Fórum -> Configuração
No campo descrição do site deverá adicionar antes de tudo o seguinte código, substituindo o que está em vermelho pelo link da página que criamos, que deve ser a -h2!
Exemplo:<script src="Endereço da página"></script>
<script src="https://ajuda.forumeiros.com/h2-testes"></script>
table][tr][td] [/td][td]Se tiver alguma dúvida relacionada com este tópico crie um tópico com o seguinte título:
Criar um formulário de postagens [/td][/tr][/table]
© Fórum dos Fóruns
Ativação do formulário no fórum
Ativação do formulário de postagens - Vídeo tutorial
Assista em HD (720p) para obter melhor visualização:
https://www.youtube.com/watch?v=EnqmuP_OvZY
Assista em HD (720p) para obter melhor visualização:
https://www.youtube.com/watch?v=EnqmuP_OvZY
Tópicos semelhantes
» [TUTORIAL] Formulário de Postagens
» Criar formulário de postagens
» Criar um formulário de postagens
» Criar formulário de postagens
» Criar um formulário de postagens
» Criar formulário de postagens
» Criar um formulário de postagens
» Criar formulário de postagens
» Criar um formulário de postagens
Página 1 de 1
Permissões neste sub-fórum
Não podes responder a tópicos