Challenge 1 - Exigir Login e Senha ao entrar em um campo do formulário
Nível SC: Intermediário
Nível JavaScript: Intermediário/Avançado
Conhecimento Básico de CSS e HTML necessários.
Passo 1:
- Abra o formulário que deseja fazer o seu campo seguro.
- No onLoad acrescente esse código no início:
[verifica_adm] = 'N';
?>
<style>
#overlay {
visibility: hidden;
position: absolute;
left: 0px;
top: 0px;
width:100%;
height:100%;
text-align:center;
z-index: 1000;
}
#overlay div {
width:250px;
height: 165px;
margin: 200px auto;
background-color: #fff;
border:1px solid #000;
padding:0px;
text-align:center;
}
</style>
<div id="overlay">
<div>
<iframe id="muda_forma" src="../teste/teste.php" height="100%" width="100%" border=0 frameborder=NO scrolling=NO>
</iframe>
</div>
</div>
<?php
- Lembrem de colocar a variável global como saída.
Passo 2:
- Vá no menu da app em Programação>Métodos JavaScript>Novo Método
- Crie um método chamado: overlay.
- E cole este código no método:
el = document.getElementById("overlay");
el.style.visibility = (el.style.visibility == "visible") ? "hidden" : "visible";
Passo 3:
- Vá no menu da app, em Formulário>Eventos Ajax>Novo Evento Ajax.
- Crie um evento ajax, escolha o campo que será seguro, e escolha o evento: onFocus.
- Acrescente esse código na função ajax:
if ([verifica_adm] == 'N') {sc_ajax_javascript('overlay');}
Passo 4:
- Crie sua app de controle com 2 campos, Usuário e Senha.
- No onValidate faça a sua verificação, eu copiei a do meu login e alterei algumas coisas vejam abaixo:
$slogin = sc_sql_injection({login});
$spswd = sc_sql_injection(md5({senha}));
$sql = "SELECT
PrvAdm,
SitUsu,
NomUsu,
EmlUsu,
CodUsu
FROM cadusu
WHERE LogUsu = $slogin
AND SenUsu = ".$spswd;
sc_lookup(rs, $sql);
if(count({rs}) == 0)
{
sc_log_add('Falha: Verificação ADM', {lang_login_fail} . {login});
sc_alert('Usuário ou Senha, Errado!');
sc_error_exit();
}
else if({rs[0][1]} == 'Y' && {rs[0][0]} == 'Y')
{
[verifica_adm] = 'Y';
sc_ajax_javascript('overlay');
}
else
{
sc_alert('Esse usuário não é administrador!');
sc_error_exit();
}
- Eu usei sc_alert ao invés de sc_error_message por questões de layout, ficou mais apresentável.
Passo 5:
- Vá no menu da app em Programação>Métodos Javascript>Novo Método
- Crie um método chamado: overlay.
- E cole este código no método:
el = parent.document.getElementById("overlay");
el.style.visibility = (el.style.visibility == "visible") ? "hidden" : "visible";
if (sair != "S") {
parent.document.getElementById('id_sc_field_nomapp').focus();
}
Passo 6:
- Vá no menu da app em Controle>Botões>Novo Botão;
- Crie um botão Sair do tipo javascript;
- No código do botão adicionem:
overlay('S');
Gere os fontes e pronto, agora você tem uma verificação de usuário para um campo.
Vocês podem implementar a vontade.
Aqui vai um demo: AdmLoga
User Adm: robert
Senha: master
User não Adm: wesley
Senha: 1234
Agradecimento especial para o Jon Henshaw, ótimo programador da Raven Internet Marketing Tools, pela dica do modal com JavaScript muito bem feito, com código limpo e simples, evitando o uso de JQuery, e funcionando perfeitamente.
Link do Tutorial do Modal JavaScript: http://raventools.com/blog/create-a-modal-dialog-using-css-and-javascript/
Até a próxima pessoal.
