Conectar-se

Esqueci minha senha

Os membros mais ativos do mês

Quem está conectado
2 usuários online :: Nenhum usuário registrado, Nenhum Invisível e 2 Visitantes

Nenhum

[ Ver toda a lista ]


O recorde de usuários online foi de 19 em Ter Jan 03, 2012 9:38 am
Últimos assuntos
» Equipe Web ASA Fórum
Dom Jun 24, 2012 11:15 am por Alisson Silva

» [Re-Apresentação] Fábio
Sex Maio 25, 2012 4:45 pm por Fábio

» PixelZIP ~ design&programção em só lugar
Sex Maio 25, 2012 4:44 pm por Fábio

» Pedido de logo
Dom Maio 20, 2012 10:06 am por Alisson Silva

» Kernel - Apresentação
Sab Maio 19, 2012 9:49 am por Alisson Silva

» [Galeria] Gabriel Schiavi - Atualizado (20/02 - !5:21)
Sab Maio 19, 2012 9:48 am por Alisson Silva

»  HEBBO HOTEL 24 HORAS ONLINE !!
Sex Maio 04, 2012 7:20 pm por Alisson Silva

» Pedido de Layout
Sex Maio 04, 2012 5:23 pm por Fonsecca

» [RESOLVIDO]TV CCE HPS 2071-D (IMAGEM SÓ EMBAIXO, ACIMA, LINHAS DE RETRAÇO E FAIXA PRÊTA NO TOPO DA TELA).
Qua Abr 11, 2012 4:07 pm por Fry

» [contato] Deixo aqui meus contatos virtuais
Qua Abr 11, 2012 3:25 pm por Fry


[TUTORIAL] Criar um formulário de postagens

Ir em baixo

[TUTORIAL] Criar um formulário de postagens

Mensagem por Fry em Sex Dez 30, 2011 7:46 am

[Você precisa estar registrado e conectado para ver esta imagem.] Formulário de postagens

Em algumas seções do fórum é necessário que as mensagens sigam um mesmo padrão. Para que seja mais fácil para os usuários usamos formulários que geram a mensagem ao final e que ele somente tem de preencher o que realmente é necessário. Verá neste tutorial como criar e colocar para funcionar um formulário. Atenção, é sempre bom ter conhecimentos de HTML e Javascript para fazer formulários!



--> Tutoriais e astúcias <--
Criar um formulário de postagens




- 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: [Você precisa estar registrado e conectado para ver este link.].



- 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: [Você precisa estar registrado e conectado para ver este link.]



- 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:

[Você precisa estar registrado e conectado para ver esta imagem.] 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:
<input type="text" name="sform_nome" value="valor padrão" />
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.
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.


[Você precisa estar registrado e conectado para ver esta imagem.] 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:
<textarea name="sform_nome" rows="7" cols="7">Valor padrão</textarea>
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.
Laranja: estes valores determinam o tamanho do campo de texto. Basta ir alterando conforme desejar para que ele fique do tamanho adequado.


[Você precisa estar registrado e conectado para ver esta imagem.] 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:
<input type="tipo" name="sform_nome" value="valor padrão" />
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.
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.

[Você precisa estar registrado e conectado para ver esta imagem.] 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:
<select name="sform_nome">Opções</select>
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.
Laranja: para cada uma das opções que você colocar deverá adicionar a seguinte linha dentro da baliza select:
<option value="valor">Texto de exemplo</option>
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:
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>



[Você precisa estar registrado e conectado para ver esta imagem.] 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:
<input type="hidden" name="sform_nome" value="valor padrão" />
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.
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.



- 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ópicosubject
Descrição do tópicodescription
Fórum em que será postadof
Botão que envia a mensagem (terá que ter obrigatoriamente este valor)post
Toda a mensagemmessage

Exemplo de um campo oculto com o título da mensagem predefinido:
<input type="hidden" value="Título do tópico" name="subject"



- Estruturar o formulário:
Na página que criamos deverá colocar o seguinte código:
<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>

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.

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.



- 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:
formulario.definir('message', formulario.valor('texto1') + formulario.valor('texto2');
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', 'Dimensões do pedido: ' + formulario.valor('dimensoes') + '\n Tipo ' + formulario.valor('tipo');
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.



- Ativar o formulário nos fóruns desejados:
Agora deverá criar uma nova página HTML com o seguinte código:
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');
}
});
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!

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!
<script src="Endereço da página"></script>
Exemplo:
<script src="[Você precisa estar registrado e conectado para ver este link.]"></script>





© Fórum dos Fóruns
avatar
Fry
Admintradores
Admintradores

Posts Posts : 175
Idade Idade : 19
Respeito Respeito : 0
Web Moedas Web Moedas : 415

http://Em breve...

Voltar ao Topo Ir em baixo

Re: [TUTORIAL] Criar um formulário de postagens

Mensagem por Fry em Sex Dez 30, 2011 7:46 am

Ativação do formulário de postagens - Vídeo tutorial


Melhor visualização no seguinte endereço:
[Você precisa estar registrado e conectado para ver este link.]
avatar
Fry
Admintradores
Admintradores

Posts Posts : 175
Idade Idade : 19
Respeito Respeito : 0
Web Moedas Web Moedas : 415

http://Em breve...

Voltar ao Topo Ir em baixo

Voltar ao Topo

- Tópicos similares

 
Permissão deste fórum:
Você não pode responder aos tópicos neste fórum