Feeds
Newsletter
Barra Developer (Dreamweaver) - Cadastro com Validação em Ajax - Parte 01
Uma coisa é inegável: por mais que muitos programadores falem que o que vale é saber código, eu afirmo: "o seu cliente não está nem aí para a forma como você desenvolve o sistema dele, o que importa é que funcione."
Com essa série de artigos sobre a Barra Developer do Dreamweaver CS3, você vai conseguir desenvolver sistemas com recursos fantásticos em fração de minutos. Se fizéssemos apenas usando os recursos padrões do Dreamweaver já se levaria um bom tempo, programando por código então, nem se fala.Lembrando que para esse primeiro exemplo serão necessários três artigos. Este será o primeiro na série!
Veja os recursos do primeiro artigo:- Formulário de Cadastro
- Validação de Cada Campo via Ajax com Personalização da Mensagem de Erro
Para que você consiga fazer todos os exemplos que envolvem a barra de plugins Developer, é necessário adquirir a mesma através do link abaixo:
Download da Versão Trial
Link para Comprar a Barra Developer
A Developer Toolbox é paga, porém você pode fazer o download da versão TRIAL e acompanhar todos os exemplos criados aqui.É importante lembrar que a barra é para a versão CS3 do Dreamweaver, segundo o site da Adobe, no início de 2009 será lançada uma atualização para que a mesma funcione na versão CS4.
Para este exemplo você precisa apenas de uma tabela, estou usando um cadastro simples de funcionário. Para que você não tenha trabalho de criar a tabela, salve o arquivo SQL que eu utilizei e importe para um banco mysql a ser criado por você. DICA: Para que você trabalhe bem este exemplo, é necessário criar um site informando que a tecnologia a ser usada é PHP/MySQL e também criar uma conexão com o banco de dados que você criou e importou a tabela SQL.Após ter criado o site e a conexão com o banco de dados, vamos começar nosso artigo.
Crie um arquivo novo PHP e salve-o como Cadastro.php. Em seguida, na parte superior, juntamente com os menus common, layout, forms, entre outros, apareceu um chamado Developer Toolbox. Clique no menu e em seguida clique no primeiro botão (da esquerda para a direita) chamado Insert Record Form Wizard.
Temos quatro itens a serem configurados, veja a explicação de cada um:
Connection: conexão a ser utilizada com o banco de dados, escolha a que você criou.Insert into table: a tabela da conexão escolhida onde os dados serão cadastrados, caso não tenha feito nada além do que eu pedi, você deve ter apenas uma tabela.
Primary key column: campo que é a chave primária. Se você importou a tabela que deixei para download, o campo chave primária é FuncID.After inserting, go to: pra qual arquivo será redirecionado após cadastrar no banco de dados.
Veja agora a tela preenchida:
Depois que configurar, clique no botão Next. Na próxima tela teremos:
Aqui podemos personalizar como os campos serão criados. No lado esquerdo, em Column, temos os nomes dos campos. Observe que de forma muito inteligente o Dream já retirou o campo FuncID, visto que auto_increment.
No lado direito, temos o item Label, que são os nomes dos campos que vão aparecer no form. Você pode clicar em cima de cada um, e abaixo onde tem Label alterar o nome para o que você desejar. Se quiser alterar também o tipo do campo, altere no item Display as. Veja abaixo as alterações que eu fiz:
Clique no primeiro campo, FuncNome, e em seguida marque a opção Required, ou seja, seu preenchimento será obrigatório.
Ao marcar, você poderá também no item Validation format determinar o tipo de informação que será permitida ou não, como números, endereço de email, e etc. Mas para o nome não precisaremos.Mais abaixo, temos Min char (quantidade mínima de caracteres) e Max char (quantidade máxima de caracteres). Também vou deixar em branco para o nome.
Abaixo temos uma opção chamada Custom message, marque a opção e digite uma frase. Essa frase aparecerá sempre que alguém tentar cadastrar deixando este campo em branco.Veja como ficou a validação do primeiro campo:
Repita o mesmo processo para cada campo criando suas regras de validação e suas respectivas mensagens de erro. Após terminar, clique em Finish. Veja o que foi criado:
Salve as alterações.
Antes de testarmos, é importante criar um arquivo chamado CadastroOK.php que é o arquivo para onde redirecionamos após o cadastro. Você pode colocar uma mensagem do tipo: CADASTRO REALIZADO COM SUCESSO.Em seguida, abra o arquivo Cadastro.php no navegador. Observe que os campos que você atribuiu como Obrigatório aparecem com um asterisco vermelho.
Caso você queira fazer outras validações mesmo já tendo clicado em Finish, observe o painel Application na parte superior direita da tela:
O formulário ficou assim:
Observe que apenas o campo Nome está com o asterisco vermelho. Caso eu tente cadastrar sem preenchê-lo, aparecerá a mensagem que eu personalizei agora a pouco. Veja:
Com isto finalizo o primeiro artigo sobre a barra Developer.
Até o próximo. Abraço a todos!Interação
1 comentário
Nilson Gapski
25/10/2009 11h04
menu
Tenho um menu com 1 sub-menu, gostaria que expandisse para mais outro sub-menu..
ex:
item A
Item Aa
Item Aaa
Item B
Item Bb
Item Bbb
etc...
segue cod. php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>teste-menu</title>
<style type="text/css">
<!--
.titulo {
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
color: #FFFFFF;
}
.texto1 {
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: normal;
color: #000000;
}
.texto2 {
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #000000;
}
.menutitle{
cursor:pointer;
margin-bottom: 5px;
color:#FFFFFF;
width:140px;
padding:2px;
text-align:left;
font-weight:bold;/* */
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
text-decoration: none;
border: 0px solid #000000;
}
.submenu{
margin-bottom: 0.5em;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9px;
color: #999999;
text-decoration: none;
}
a:link {
color: #999999;
text-decoration: none;
}
a:visited {
color: #999999;
text-decoration: none;
}
a:hover {
text-decoration: none;
color: #FF00FF;
}
-->
</style>
</head>
<script type="text/javascript">
/***********************************************
* Switch Menu script- by Martial B of http://getElementById.com/
* Modified by Dynamic Drive for format & NS4/IE4 compatibility
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/
var persistmenu="yes" //"yes" or "no". Make sure each SPAN content contains an incrementing ID starting at 1 (id="sub1", id="sub2", etc)
var persisttype="sitewide" //enter "sitewide" for menu to persist across site, "local" for this page only
if (document.getElementById){ //DynamicDrive.com change
document.write('<style type="text/css">\n')
document.write('.submenu{display: none;}\n')
document.write('</style>\n')
}
function SwitchMenu(obj){
if(document.getElementById){
var el = document.getElementById(obj);
var ar = document.getElementById("masterdiv").getElementsByTagName("span"); //DynamicDrive.com change
if(el.style.display != "block"){ //DynamicDrive.com change
for (var i=0; i<ar.length; i++){
if (ar[i].className=="submenu") //DynamicDrive.com change
ar[i].style.display = "none";
}
el.style.display = "block";
}else{
el.style.display = "none";
}
}
}
function get_cookie(Name) {
var search = Name + "="
var returnvalue = "";
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) {
offset += search.length
end = document.cookie.indexOf(";", offset);
if (end == -1) end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}
function onloadfunction(){
if (persistmenu=="yes"){
var cookiename=(persisttype=="sitewide")? "switchmenu" : window.location.pathname
var cookievalue=get_cookie(cookiename)
if (cookievalue!="")
document.getElementById(cookievalue).style.display="block"
}
}
function savemenustate(){
var inc=1, blockid=""
while (document.getElementById("sub"+inc)){
if (document.getElementById("sub"+inc).style.display=="block"){
blockid="sub"+inc
break
}
inc++
}
var cookiename=(persisttype=="sitewide")? "switchmenu" : window.location.pathname
var cookievalue=(persisttype=="sitewide")? blockid+";path=/" : blockid
document.cookie=cookiename+"="+cookievalue
}
if (window.addEventListener)
window.addEventListener("load", onloadfunction, false)
else if (window.attachEvent)
window.attachEvent("onload", onloadfunction)
else if (document.getElementById)
window.onload=onloadfunction
if (persistmenu=="yes" && document.getElementById)
window.onunload=savemenustate
</script>
<!-- Keep all menus within masterdiv-->
<table width="175" align="left" cellpadding="0" cellspacing="0">
<tr>
<td width="175" align="left" valign="top" bgcolor="#000000"><div id="masterdiv">
<div class="menutitle" onclick="SwitchMenu('sub1')"> Adesivos</div>
<span class="submenu" id="sub1">
<a href="01.php"> Papel</a><br />
<a href="02.php"> Vinil</a><br />
<a href="03.php"> PVC</a><br />
</span>
<div class="menutitle" onclick="SwitchMenu('sub2')"> Calendários</div>
<span class="submenu" id="sub2">
<a href="04.php"> Bolso</a><br />
<a href="05.php"> Mesa</a><br />
</span>
<p><span class="submenu"><br />
</span> </p>
</div></td>
</tr>
</table>
se puder me ajudar..
obrigado
CD-ROM Curso Completo - Dreamweaver MX 2004
Desenvolvendo WEBSERVICES: Guia Rápido Usando Visual Studio.Net com Banco de Dados SQL Server
PostgreSQL - Guia do Programador
Use a Cabeça SQL
iMasters
- Sobre o iMasters
- Política de privacidade
- Anuncie
- Feeds iMasters
- Fóruns iMasters
- Fale conosco
2001 - iMasters FFPA Informática Ltda - Todos os direitos reservados.