Registration form and HTML plans without database

Asked

Viewed 851 times

0

I downloaded a registration form and plans step by step and with html already ready and free, but not write to the database.

What you need to write to the database?

Code:

</head>
	<body ng-controller="formPassosCtrl">
		<div class="container">
			<div class="col-lg-6 col-centered">
				<div id="cadastroTopTop" class="cadastro fade-in">
					<div class="box-cadastro" ng-hide="passo == 5">
				        <div class="passos">
				            <div class="line"></div>
				            <div class="circ-passos">
				                <div ng-class="{active_passo: passo == 1}" class="circ-passos-item fade-in">
				                    <span>1</span>
				                </div>
				                <p>Escolha o<br>plano desejado</p>
				            </div>
				            <div class="circ-passos">
				                <div ng-class="{active_passo: passo == 2}" class="circ-passos-item fade-in">
				                    <span>2</span>
				                </div>
				                <p>Dados da<br>conta</p>
				            </div>
				            <div class="circ-passos">
				                <div ng-class="{active_passo: passo == 3}" class="circ-passos-item fade-in">
				                    <span>3</span>
				                </div>
				                <p>Dados<br>pessoais</p>
				            </div>
				            <div class="circ-passos">
				                <div ng-class="{active_passo: passo == 4}" class="circ-passos-item fade-in">
				                    <span>4</span>
				                </div>
				                <p>Dados da<br>loja virtual</p>
				            </div>
				        </div>
				        <div class="form-passos">
				            <div ng-show="passo == 1" class="passo passo-1 fade-in">
				                <form role="form" name="cadastro_1" novalidate>
				                    <div class="form-group">
				                        <span class="fnt-12 fade-in" ng-show="ir && !cadastro.plano"><strong>ERRO: É obrigatório escolher um plano</strong></span>
				                        <span class="fnt-12 fade-in" ng-hide="ir && !cadastro.plano || cadastro.plano">Escolha um plano abaixo</span>
				                    </div>
				                    <div class="form-group">
				                        <div class="col-lg-3 text-center">
				                            <div class="planos planos-cadastro one" id="plano-mensal" ng-click="marcaPlano('plano-mensal');">
				                                <div class="header-plano">
				                                    <h2>Plano<br>Mensal</h2>
				                                    <p>Menor preço<br>do mercado</p>
				                                </div>
				                                <div class="preco-plano">
				                                    <span>R$</span>
				                                    <strong>60,00</strong>
				                                </div>
				                            </div>
				                        </div>
				                        <div class="col-lg-3 text-center">
				                            <div class="planos planos-cadastro two" id="plano-trimestral" ng-click="marcaPlano('plano-trimestral');">
				                                <div class="header-plano">
				                                    <h2>Plano Trimestral</h2>
                                                        <p><strong>10%</strong> de desconto</p>
                                                    </div>
                                                    <div class="preco-plano">
                                                        <span>R$</span>
                                                        <strong>162,00</strong>
				                                </div>
				                            </div>
				                        </div>
				                        <div class="col-lg-3 text-center">
				                            <div class="planos planos-cadastro three" id="plano-semestral" ng-click="marcaPlano('plano-semestral');">
				                                <div class="header-plano">
				                                    <h2>Plano Semestral</h2>
                                                        <p><strong>15%</strong> de desconto</p>
                                                    </div>
                                                    <div class="preco-plano">
                                                        <span>R$</span>
                                                        <strong>306,00</strong>
				                                </div>
				                            </div>
				                        </div>
				                        <div class="col-lg-3 text-center">
				                            <div class="planos planos-cadastro four"  id="plano-anual" ng-click="marcaPlano('plano-anual');">
				                                <div class="header-plano header-destaque">
												<span class="label label-warning plano-destaque">Mais Vendido</span>
				                                    <h2>Plano<br>Anual</h2>
                                                    <p><strong>20%</strong> de desconto</p>
				                                </div>
				                                <div class="preco-plano">
                                                <span>R$</span>
                                                <strong>576,00</strong>
				                                </div>
				                            </div>
				                        </div>
										<div class="col-md-12 text-center planos-30dias-desconto">
                                                <label class="fnt-17">Todos os planos com 30 dias grátis</label>
                                                <br>
                                                <a href="./planos">Conheça as caracteristicas de cada plano</a>
                                            </div>
				                        <input type="hidden" id="planoInput" ng-model="cadastro.plano" ng-required="!voltar">
				                    </div>
				                    <div class="controls-passos text-right">
				                        <button id="btnPassoOne" ng-click="passosCadastro(true, cadastro, 'cadastro_1');voltar=false;ir=true" class="fade-in btn btn-primary">Pr&oacute;ximo <i class="fa fa-long-arrow-right" aria-hidden="true"></i></button>
				                    </div>
				                </form>
				            </div>
				            <div ng-show="passo == 2" class="passo passo-2 fade-in">
				                <form role="form" name="cadastro_2" novalidate>
				                    <div class="form-group emailCampo">
				                        <input type="email" class="form-control" ng-model="cadastro.email" placeholder="Informe um e-mail válido!" ng-required="!voltar">
				                        
				                        <i class="fa fa-exclamation-triangle" aria-hidden="true" ng-mouseover="colocarCorTooltip()" ng-show="emailInvalido" ng-hide="!emailInvalido" data-toggle="tooltip" data-placement="left" title="Deve conter @ e .com"></i>
				                        
				                        <div class="fnt-10 text-left emailja fade-in" ng-show="emailja" ng-hide="!emailja">E-mail j&aacute; cadastrado. Deseja <a href="#modal-login" data-toggle="modal" target="_self" data-target="#modal-login" class="green">acessar sua conta</a>?</div>
				                    </div>
				                    <div class="row">
				                        <div class="form-group col-lg-6 col-xs-6 senha-cadastro">
				                            <input type="password" class="form-control" name="senha" id="senha" ng-model="cadastro.senha" placeholder="Senha" ng-required="!voltar">
				                            <ul ng-show="forca_senha" ng-class="{red: forca_senha <= 10, orange: forca_senha > 10, yellow: forca_senha > 30, green: forca_senha > 50}">
				                                <li><i ng-show="forca_senha > 1" class="fa fa-square" aria-hidden="true"></i></li>
				                                <li><i ng-show="forca_senha > 10" class="fa fa-square" aria-hidden="true"></i></li>
				                                <li><i ng-show="forca_senha > 30" class="fa fa-square" aria-hidden="true"></i></li>
				                                <li><i ng-show="forca_senha > 50" class="fa fa-square" aria-hidden="true"></i></li>
				                            </ul>
				                        </div>
				                        <div class="col-lg-6 col-xs-6">
				                            <input type="password" class="form-control" name="confirm_senha" id="confirm_senha" ng-model="cadastro.confirm_senha" placeholder="Confirme a senha" ng-required="!voltar" pw-check="senha">
				                        </div>
				                        <span ng-show="cadastro_2.confirm_senha.$error.pwmatch && cadastro.confirm_senha" class="aviso fade-in">senhas diferentes</span>
				                    </div>
				                    <div class="row">
				                        <div class="form-group col-lg-6 col-xs-6 senha-cadastro text-left fade-in" ng-show="senhaFraca" ng-hide="!senhaFraca">
				                            <div>
				                                <span class="fnt-10 fade-in">For&ccedil;a m&iacute;nima:</span>
				                                <ul class="orange fade-in">
				                                    <li><i class="fa fa-square" aria-hidden="true"></i></li>
				                                    <li><i class="fa fa-square" aria-hidden="true"></i></li>
				                                </ul>
				                            </div>
				                        </div>
				                    </div>
				                    <div class="controls-passos">
				                        <div class="row">
				                            <div class="col-xs-6 text-left">
				                                <button ng-show="passo > 1" ng-click="passosCadastro(false, cadastro, 'cadastro_2');voltar=true" class="btn btn-primary fade-in"><i class="fa fa-long-arrow-left" aria-hidden="true"></i> Voltar</button>
				                            </div>
				                            <div class="col-xs-6 text-right">
				                                <button ng-click="passosCadastro(true, cadastro, 'cadastro_2');voltar=false" class="fade-in btn btn-primary">Pr&oacute;ximo <i class="fa fa-long-arrow-right" aria-hidden="true"></i></button>
				                            </div>
				                        </div>
				                    </div>
				                </form>
				            </div>
				            <div ng-show="passo == 3" class="passo passo-3 fade-in">
				                <form role="form" name="cadastro_3" novalidate>
				                    <div class="form-group">
				                        <input type="text" class="form-control" ng-model="cadastro.nome" placeholder="Seu nome" ng-required="!voltar">
				                    </div>
				                    <div class="form-group">
				                        <input type="text" class="form-control" ng-model="cadastro.cpf" placeholder="Seu CPF" ng-required="!voltar" mask="999.999.999-99" mask-restrict="reject">
				                    </div>
				                    <div class="form-group">
				                        <div class="input-group">
				                            <input type="text" class="form-control" id="dtNascimento" maxlength="10" placeholder="Sua data de nascimento" aria-describedby="basic-addon2" ng-model="cadastro.dtNascimento" mask="99/99/9999" ng-required="!voltar" mask-restrict="reject">
				                            <span class="input-group-addon" id="basic-addon2"><i class="fa fa-calendar" aria-hidden="true"></i></span>
				                        </div>
				                    </div>
				                    <div class="controls-passos">
				                        <div class="row">
				                            <div class="col-xs-6 text-left">
				                                <button ng-show="passo > 1" ng-click="passosCadastro(false, cadastro, 'cadastro_3');voltar=true" class="btn btn-primary fade-in"><i class="fa fa-long-arrow-left" aria-hidden="true"></i> Voltar</button>
				                            </div>
				                            <div class="col-xs-6 text-right">
				                                <button ng-click="passosCadastro(true, cadastro, 'cadastro_3');voltar=false" class="fade-in btn btn-primary">Pr&oacute;ximo <i class="fa fa-long-arrow-right" aria-hidden="true"></i></button>
				                            </div>
				                        </div>
				                    </div>
				                </form>
				            </div>
				            <div ng-show="passo == 4" class="passo passo-4 fade-in">
				                <form role="form" name="cadastro_4" novalidate>
				                    <div class="row">
				                        <div class="form-group col-lg-6 col-xs-6">
				                            <input type="text" class="form-control" ng-model="cadastro.cnpj" placeholder="CNPJ" mask="99.999.999/9999-99" mask-restrict="reject">
				                        </div>
				                        <div class="form-group col-lg-6 col-xs-6">
				                            <input type="text" class="form-control" ng-required="!voltar" ng-model="cadastro.telefone" placeholder="Telefone" mask="(99) 9999-9999?9" mask-restrict='reject'>
				                        </div>
				                    </div>
				                    <div class="form-group">
				                        <div class="input-group emailCampo">
				                            <span class="input-group-addon" id="basic-addon3">www.</span>
				                            <input id="siteUrl" type="text" class="form-control" aria-describedby="basic-addon3" ng-model="cadastro.dominioDesejado" ng-required="!voltar" placeholder="Qual dom&iacute;nio deseja utilizar?">
				                            <i class="fa fa-exclamation-triangle" aria-hidden="true" ng-mouseover="colocarCorTooltip()" ng-show="siteInvalido" ng-hide="!siteInvalido" data-toggle="tooltip" data-placement="left" title="Deve conter .com, .br ou semelhantes"></i>
				                        </div>
				                    </div>
				                    <hr>
				                    <div class="row">
				                        <div class="form-group col-lg-6 col-xs-6 cepCampo">
				                            <input type="text" class="form-control" ng-required="!voltar" ng-model="cadastro.cep" placeholder="CEP" mask="99.999-999" mask-restrict='reject' ng-blur="buscaCep(cadastro.cep)">
				                            <i class="fa {{loadingCepImage}}" ng-show="loadingCep"></i>
				                        </div>
				                        <div class="form-group col-lg-6 col-xs-6">
				                            <select class="form-control" ng-model="cadastro.estado" ng-options="estado.uf as estado.nome for estado in estados" ng-required="!voltar" ng-change="cidade(cadastro.estado)">
				                                <option value="" disabled selected>Estado</option>
				                            </select>
				                        </div>
				                    </div>
				                    <div class="form-group">
				                        <input type="text" class="form-control" ng-model="cadastro.endereco" placeholder="Endere&ccedil;o" ng-required="!voltar">
				                    </div>
				                    <div class="row">
				                        <div class="form-group col-lg-6 col-xs-6">
				                            <input type="text" class="form-control" ng-model="cadastro.numero" placeholder="N&uacute;mero" ng-required="!voltar" mask="9999999999999999999999999999" mask-restrict='reject' mask-validate='false'>
				                        </div>
				                        <div class="form-group col-lg-6 col-xs-6">
				                            <input type="text" class="form-control" ng-model="cadastro.complemento" placeholder="Complemento">
				                        </div>
				                    </div>
				                    <div class="row">
				                        <div class="form-group col-lg-6 col-xs-6">
				                            <input type="text" class="form-control" ng-model="cadastro.bairro" placeholder="Bairro" ng-required="!voltar">
				                        </div>
				                        <div class="form-group col-lg-6 col-xs-6">
				                            <input type="text" class="form-control" ng-model="cadastro.cidade" placeholder="Cidade">
				                        </div>
				                    </div>
				                    <hr>
				                    <div class="row">
				                        <div class="form-group col-lg-6 col-xs-6">
				                            <input type="text" class="form-control" ng-model="cadastro.codPromocional" placeholder="C&oacute;digo Promocional?">
				                        </div>
				                        <div class="form-group col-lg-6 col-xs-6">
				                            <div class="checkbox">
				                              <label ng-required="!cadastro.termos"><input type="checkbox" ng-required="!voltar" ng-model="cadastro.termos" value="aceito">Aceito os <a href="termo.html" class="green">termos de uso</a></label>
				                            </div>
				                        </div>
				                    </div>
				                    <div class="controls-passos">
				                        <div class="row">
				                            <div class="col-xs-6 text-left">
				                                <button ng-show="passo > 1" ng-click="passosCadastro(false, cadastro, 'cadastro_4');voltar=true" class="btn btn-primary fade-in"><i class="fa fa-long-arrow-left" aria-hidden="true"></i> Voltar</button>
				                            </div>
				                            <div class="col-xs-6 text-right">
				                                <button ng-click="passosCadastro(true, cadastro, 'cadastro_4');voltar=false" class="fade-in btn btn-primary">Pr&oacute;ximo <i class="fa {{loadingSend}}" aria-hidden="true"></i></button>
				                            </div>
				                        </div>
				                    </div>
				                </form>
				            </div>
				        </div>
				        <i class="fa fa-lock" aria-hidden="true" data-toggle="tooltip" data-placement="bottom" title="Informa&ccedil;&otilde;es seguras! Fique tranquilo :)"></i>
				    </div>
				    <!-- Mensagem de cadastrado com  sucesso -->
	                <div ng-show="passo == 5" class="row padding-cadastro cadastro wow pulse" data-wow-duration="1500ms" data-wow-iteration="2">
	                    <div class="col-lg-12">
	                        <div class="box-cadastro fade-in">
	                            <div class="passo passo-5 fade-in finalAgradecimento">
                                    <i class="fa fa-check fade-in one" aria-hidden="true"></i>
                                    <p class="fade-in two">Sua loja virtual foi criada</p>
									<p class="fade-in three fnt-17"><strong>Foi lhe enviado um e-mail com as informações necessárias</strong></p>
									
<script>									
<input type='text' id='email'>
<div id='resposta'></div>

<script language="javascript">
    var email = $("#email"); 
        email.blur(function() { 
            $.ajax({ 
                url: 'js/json/verifica_email.php', 
                type: 'POST', 
                data:{"email" : email.val()}, 
                success: function(data) { 
                console.log(data); 
                data = $.parseJSON(data); 
                $("#resposta").text(data.email);
            } 
        }); 
    }); 
    </script>
                                </div>
	                        </div>
	                    </div>
	                </div>
                </div>
		    </div>
		</div>
	</body>
</html>

verifica_email.php

<?php
#Verifica se tem um email para pesquisa
if(isset($_POST['email'])){ 

    #Recebe o Email Postado
    $emailPostado = $_POST['email'];

    #Conecta banco de dados 
	$myHost = "localhost"; // use seu nome de host
    $myUserName = "usuário";   // nome de usuário
    $myPassword = "senha";   // sua senha de login
    $myDataBaseName = "banco de dados"; // nome do banco de dados

    $con = mysqli_connect( "", "", "", "" );

    $sql = mysqli_query($con, "SELECT * FROM usuarios WHERE email = '{}'") or print mysql_error();

    #Se o retorno for maior do que zero, diz que já existe um.
    if(mysqli_num_rows($sql)>0) 
        echo json_encode(array('email' => 'Ja existe um usuario cadastrado com este email')); 
    else 
        echo json_encode(array('email' => 'Parabéns! Você poderá usar este e-mail como usuário.' )); 
}
?>

Table structure

SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
SET AUTOCOMMIT = 0;
START TRANSACTION;
SET time_zone = "+00:00";


/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
/*!40101 SET NAMES utf8mb4 */;

--
-- Database: `pagamento_aluguel`
--

-- --------------------------------------------------------

--
-- Estrutura da tabela `clientes`
--

DROP TABLE IF EXISTS `clientes`;
CREATE TABLE IF NOT EXISTS `clientes` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `plano-mensal` int(250) NOT NULL,
  `plano-trimestral` int(250) NOT NULL,
  `plano-semestral` int(250) NOT NULL,
  `plano-anual` int(250) NOT NULL,
  `email` int(250) NOT NULL,
  `password` int(250) NOT NULL,
  `nome` int(250) NOT NULL,
  `cpf` varchar(14) NOT NULL,
  `nascimento` varchar(10) NOT NULL,
  `cnpj` varchar(18) NOT NULL,
  `telefone` varchar(9) NOT NULL,
  `dominio` varchar(250) NOT NULL,
  `cep` varchar(8) NOT NULL,
  `endereco` varchar(250) NOT NULL,
  `numero` varchar(40) NOT NULL,
  `complemento` varchar(250) NOT NULL,
  `bairro` varchar(250) NOT NULL,
  `cidade` varchar(250) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8;
COMMIT;

  • Hi friend, I have verifica_email.php already posted @Leocaracciolo

  • I don’t have to, I have to create a @Leocaracciolo

  • OK friend I will do now, I will try to create the database as soon as it is ready I warn @Leocaracciolo

  • Ready friend I made the table is already in the post, I do not know if it is 100% I made as you have in the register @Leocaracciolo

  • The code to create the table works, but the codes of the pages are not about to work. It is very funny.

  • See source https://github.com/MuriloEduardo/formulario-passo-a-passo-design-clin @Leocaracciolo

  • Good morning buddy, actually I got these codes from the verifica_email.php file here in the forum see if the friend can fix the errors and then post here https://answall.com/questions/76686/chec-se-o-email-filled-j%C3%A1-there-in-the-bank-de-data-no-refresh @Leocaracciolo

  • Congratulations friend got show, now I will try to insert in my admin, if I could not I will ask for help with friend, Thanks, I can not thank friend @Leocaracciolo

  • Good morning, I found a site that uses this table is working 100% I sent an email with the link of the site who knows the friend can make work this table @Leocaracciolo

Show 4 more comments

1 answer

0


The script of github pointed out in your comment does not work, because mixing jQuery with Angularjs this way is asking for problems.

The solution is through "desmisturar" the code using only jQuery.

HTML page

<!DOCTYPE html>

    <html class="">

    <head>

        <title>Cadastro</title>

        <link rel="stylesheet" href="normalize.css">

         <!-- Ícones -->
            <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

        <!-- jQuery -->
            <script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js" ></script>

        <!-- Bootstrap Core JavaScript -->
            <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
            <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.maskedinput/1.4.1/jquery.maskedinput.min.js"></script>

        <style>
        .erro{
            border-color: red;
        }
        FONT .obrigatorio {
            color:red;
        }

        .centered {
            margin: 30px auto;
            width: 50%; /* Valor da Largura */
        }

        .btn-primary {
            background: #0099cc;
            color: #ffffff;
        }

        .btn-success{
            background: #198A4E;
            color: #ffffff;
        }

        </style>

        <script src="funcoes.js"></script>

    </head>

<body>
<div class="centered"><div class="container"><div class="row">

<div class="col-lg-6 col-centered">
    <div class="box-cadastro">
        <div class="passos">
            <div class="line"></div>
            <div class="circ-passos">
                <div class="active_passo circ-passos-item fade-in">
                    <span>1</span>
                </div>
                <p>Escolha o<br>plano desejado</p>
            </div>
            <div class="circ-passos" activeTooltip="planos" data-toggle="tooltip" data-placement="top" >
                <div class="circ-passos-item fade-in">
                    <span>2</span>
                </div>
                <p>Dados da<br>conta</p>
            </div>
            <div class="circ-passos">
                <div class="circ-passos-item fade-in">
                    <span>3</span>
                </div>
                <p>Dados<br>pessoais</p>
            </div>
            <div class="circ-passos">
                <div class="circ-passos-item fade-in">
                    <span>4</span>
                </div>
                <p>Dados da<br>loja virtual</p>
            </div>
        </div>
        <form id="form_cadastro">
            <div class="form-passos">
                <div id="passo-1" class="passo passo-1 fade-in">
                    <div class="form-group">
                        <span class="fnt-12 fade-in">Clique no plano escolhido para marca-lo</span>
                    </div>
                    <div class="form-group">
                        <div class="col-lg-3 text-center">
                            <div class="planos planos-cadastro one" id="11">
                                <div class="header-plano">
                                    <h2>Plano<br>Mensal</h2>
                                    <p>Menor pre&ccedil;o do mercado</p>
                                </div>
                                <div class="preco-plano">
                                    <span>R$</span>
                                    <strong>35,00</strong>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-3 text-center">
                            <div class="planos planos-cadastro two" id="12">
                                <div class="header-plano">
                                    <h2>Plano Trimestral</h2>
                                    <p><strong>14%</strong> de desconto</p>
                                </div>
                                <div class="preco-plano">
                                    <span>R$</span>
                                    <strong>90,00</strong>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-3 text-center">
                            <div class="planos planos-cadastro three" id="13">
                                <div class="header-plano">
                                    <h2>Plano Semestral</h2>
                                    <p><strong>28%</strong> de desconto</p>
                                </div>
                                <div class="preco-plano">
                                    <span>R$</span>
                                    <strong>150,00</strong>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-3 text-center">
                            <div class="planos planos-cadastro four" id="14">
                                <div class="header-plano">
                                    <span class="label label-warning plano-destaque">Mais Vendido</span>
                                    <h2>Plano<br>Anual</h2>
                                    <p><strong>42%</strong> de desconto</p>
                                </div>
                                <div class="preco-plano">
                                    <span>R$</span>
                                    <strong>240,00</strong>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-12 text-center planos-30dias-desconto">
                            <label class="fnt-17">Todos os planos com 30 dias gr&aacute;tis</label>
                            <br>
                            <a href="#myModalPlanos" class="btn btn btn-link" data-toggle="modal">Conhe&ccedil;a as caracteristicas de cada plano</a>
                        </div>
                        <input type="hidden" id="planoInput" name="fieldCod_Plano">
                    </div>
                </div>
                <div id="passo-2" class="passo passo-2 fade-in" style="display:none">
                    <div class="form-group emailCampo">
                        <input type="email" id="emailPrimary" autocomplete='email' class="form-control email obrigatorio" name="fieldEmail" placeholder="Informe um e-mail válido!" autofocus>
                    </div>
                    <div class="row form-group">
                        <div class="col-lg-12">
                            <div id="emailja" style="display:none" class="fnt-12 text-left emailja fade-in">E-mail j&aacute; cadastrado. Deseja <a href="#modal-login" data-toggle="modal" target="_self" data-target="#modal-login" class="green">acessar sua conta</a>?
                            </div>
                            <div id="emailerro" style="display:none" class="fnt-12 text-left emailja fade-in">E-mail inválidado. Caso exista <a href="#modal-contato" data-toggle="modal" target="_self" data-target="#modal-contato" class="green">entre em contato conosco</a>!
                            </div>
                        </div>
                    </div>

                    <div class="row form-group">
                            <div class="col-md-4">
                                <input type="password" class="form-control senha obrigatorio" autocomplete="off" name="fieldSenha" id="senha" placeholder="Senha">
                            </div>

                            <div class="col-md-4 fnt-12 text-center">
                                <div id="senhaBarra" class="progress" style="display: none;">
                                   <div id="senhaForca" class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 100%;">
                                   </div>
                                </div>
                            </div>

                            <div class="col-md-4">
                             <input type="password" class="form-control senha obrigatorio" autocomplete="off" name="fieldSenha2" id="confirm_senha" placeholder="Confirme a senha">
                            </div>
                    </div>


                </div>
                <div id="passo-3" class="passo passo-3 fade-in" style="display:none">
                    <div class="form-group emailCampo">
                        <input type="text" class="form-control obrigatorio" autocomplete='name' name="fieldResponsavel" id="nome" placeholder="Seu nome" autofocus>
                    </div>
                    <div class="form-group emailCampo">
                        <input type="text" class="form-control obrigatorio cpf" name="fieldCpf" id="cpf"  placeholder="Seu CPF">
                    </div>
                    <div class="form-group">
                        <div class="input-group">
                            <input type="text" class="form-control obrigatorio data" id="dtNascimento" name="fieldDt_Nascimento" aria-describedby="basic-addon2" placeholder="Data nascimento">
                            <span class="input-group-addon" id="basic-addon2"><i class="fa fa-calendar" aria-hidden="true"></i> (dd/mm/aaaa)</span>
                        </div>
                    </div>
                </div>
                <div id="passo-4" class="passo passo-4 fade-in" style="display:none">
                    <div class="form-group">
                        <input type="text" class="form-control obrigatorio" name="fieldLoja" placeholder="T&iacute;tulo da loja virtual" autofocus>
                    </div>
                    <div class="row form-group">
                        <div class="col-lg-6 col-xs-6">
                            <input type="text" class="form-control cnpj" name="fieldCnpj" id="cnpj" placeholder="CNPJ (opcional)" >
                        </div>
                        <div class="col-lg-6 col-xs-6">
                            <input type="text" class="form-control telefone obrigatorio" autocomplete="tel" name="fieldFone" placeholder="Telefone">
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="input-group emailCampo">
                            <span class="input-group-addon" id="basic-addon3">http://www.</span>
                            <input id="siteUrl" type="text" class="form-control obrigatorio" aria-describedby="basic-addon3" name="fieldUrl_Interna" placeholder="Qual dom&iacute;nio deseja utilizar?">
                        </div>
                    </div>
                    <div class="form-group">
                        <input type="text" class="form-control obrigatorio" name="fieldRamo" id="ramo" autocomplete="off" placeholder="Escolha o ramo da sua loja virtual">
                    </div>
                    <hr>
                    <div class="row">
                        <div class="form-group col-lg-6 col-xs-6 cepCampo">
                            <input type="text" class="form-control cep obrigatorio" name="fieldCep" autocomplete="postal-code" id="cep" placeholder="CEP" maxlength="10">
    <i class="fa {{loadingCepImage}}"></i>
                        </div>
                        <div class="form-group col-lg-6 col-xs-6">
                            <input type="text" id="estado" class="form-control obrigatorio" name="fieldEstado" placeholder="Estado">                                            
                        </div>
                    </div>
                    <div class="form-group">
                        <input type="text" id="endereco" class="form-control obrigatorio" name="fieldRua" autocomplete="address-line1" placeholder="Rua/Avenida">
                    </div>
                    <div class="row">
                        <div class="form-group col-lg-6 col-xs-6">
                            <input type="text" id="numero" class="form-control numero obrigatorio" name="fieldNumero" placeholder="N&uacute;mero">
                        </div>
                        <div class="form-group col-lg-6 col-xs-6">
                            <input type="text" class="form-control" name="fieldComplemento" placeholder="Complemento (opcional)">
                        </div>
                    </div>
                    <div class="row">
                        <div class="form-group col-lg-6 col-xs-6">
                            <input type="text" id="bairro" class="form-control obrigatorio" name="fieldBairro" placeholder="Bairro">
                        </div>
                        <div class="form-group col-lg-6 col-xs-6">
                            <input type="text" id="cidade" class="form-control obrigatorio" name="fieldCidade" placeholder="Cidade">
                        </div>
                    </div>
                    <hr>
                    <div class="row">
                        <div class="form-group col-lg-6 col-xs-6">
                            <div class="input-group">
                                <span class="input-group-addon" id="codPromocionalAddon">
                                <i class="fa fa-gift" aria-hidden="true"></i>
                                </span>
                                <input type="text" class="form-control" name="codPromocional" placeholder="C&oacute;digo Promocional?" aria-describedby="codPromocionalAddon">
                            </div>
                        </div>
                        <div class="form-group col-lg-6 col-xs-6">
                            <div class="checkbox">
                                <label><input type="checkbox" name="termos" id="termos">Aceito os <a href="termo.html" target="_blank" class="green">termos de uso</a></label>
                            </div>
                        </div>
                    </div>

                    <hr>
                    <div class="form-group">
                        <div class="row vertical-align">
                            <div class="form-group col-lg-6 col-xs-6 text-left">
                                <span>
                                C&oacute;digo de seguran&ccedil;a
                                <span id="chaveKey" style="border-radius: 3px;" class="fade-in"></span>
                                </span>
                            </div>
                            <div class="form-group col-lg-6 col-xs-6">
                                <input type="text" class="form-control numero obrigatorio" placeholder="Repita o c&oacute;digo ao lado" name="codSeguranca" id="key">
                            </div>
                        </div>
                    </div>
                </div>

                <div class="form-group text-right" id="msg_erro" style="display:none; font-weight:bold; color:red;"></div>

                    <div class="row controls-passos">
                        <div class="col-xs-6 text-right pull-right">
                            <button type="button" class="continuar fade-in btn btn btn-success pull-right">Continuar <i class="fa fa-long-arrow-right" aria-hidden="true"></i></button>
                    </div>
                    <div class="col-xs-6 text-left pull-left">
                        <button type="button" class="voltar btn btn-link fade-in"><i class="fa fa-long-arrow-left" aria-hidden="true"></i> Voltar</button>
                    </div>
                </div>
            </div>

        </form>

        <i class="fa fa-lock" aria-hidden="true" data-toggle="tooltip" data-placement="bottom" title="Todas as informa&ccedil;&otilde;es s&atilde;o criptografadas!"></i>
    </div>
</div>

</div></div></div>

    <!-- Modal HTML SUCESSO-->
    <div id="myModal" class="modal fade">
        <div class="modal-dialog">
           <div class="modal-content">
             <div class="modal-header">
               <button type="button" class="close" data-dismiss="modal">&times;</button>
               <h4 class="modal-title">Resultado da requisição </h4>
             </div>
             <div class="modal-body">
               <p>Cadastro realizado com sucesso</p>
             </div>
             <div class="modal-footer">
               <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
             </div>
           </div>
        </div>
    </div>

    <!-- Modal HTML ERRO-->
    <div id="myModalErro" class="modal fade">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">Resultado da requisição.</h4>
                </div>
                <div class="modal-body">
                     <div id="resultado"></div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-success waves-effect waves-light" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>


   <!-- Modal HTML CARACTERISTICAS PLANOS -->
   <div id="myModalPlanos" class="modal fade" role="dialog">
     <div class="modal-dialog modal-lg">
       <div class="modal-content">
         <div class="modal-header">
           <button type="button" class="close" data-dismiss="modal">&times;</button>
           <h4 class="modal-title">Caracteristicas dos planos </h4>
         </div>
         <div class="modal-body">
           <p>Os planos são .........</p>
         </div>
         <div class="modal-footer">
           <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
         </div>
       </div>
     </div>
   </div>

   <div id="modal-login" class="modal fade">
       <div class="modal-dialog">
           <div class="modal-content">
               <div class="modal-header">
                   <h4 class="modal-title">Login </h4>
               </div>
               <form id="mudarsenha" method="post" name="form_mudar_senha" action="" autocomplete="off">
               <div class="modal-body">
                    <div class="md-form ml-0 mr-0">
                        <input name="senha" type="password">
                    </div>
               </div>
               <div class="modal-footer">
                  <button type="submit" class="btn btn-success btn-rounded waves-effect waves-light" ><span class="btn-label"><i class="fa fa-send"></i></span> Enviar</button>
                  <button type="button" class="btn btn-success waves-effect waves-light" data-dismiss="modal">Close</button>
               </div>
               </form>
           </div>
      </div>
  </div>


     <!-- Modal erro cep -->
   <div class="modal fade" id="myModalCep" role="dialog">
     <div class="modal-dialog modal-sm">
       <div class="modal-content">
         <div class="modal-header">
           <button type="button" class="close" data-dismiss="modal">&times;</button>
           <h4 class="modal-title">CEP </h4>
         </div>
         <div class="modal-body">
           <p><span id="resultCep"></span></p>
         </div>
         <div class="modal-footer">
           <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
         </div>
       </div>
     </div>
   </div>

</body>

</html>

CSS file - normalize.css --> Anotepad.com

JS file - funcoes.js --> Anotepad.com

key.php

<?php

$numero = rand() % 9000 + 1000;

echo $numero;

?>

verifica_url.php

 <?php

 $url=$_POST['url'];

    if (!checkdnsrr($url)){
        echo 2;
    }
?>

verifica_email.php

<?php

    $email=$_POST['email'];

    $validarDominio = function($dominio)
    {
          if( strstr( $dominio, '@' ) )
            list( $user, $dominio) = explode( '@', $dominio);

          return ( checkdnsrr( $dominio ) )
                ? 1 : 2;
    };

    if ($validarDominio($email)==2){
        echo 2;
    }else{

    //verifica se já existe esse email no banco

        //**********conexão*********    

        #Conecta banco de dados 
        $myHost = "localhost"; // use seu nome de host
        $myUserName = "USUARIO";   // nome de usuário
        $myPassword = "SENHA";   // sua senha de login
        $myDataBaseName = "Nome_DB"; // nome do banco de dados

            $con = mysqli_connect( $myHost, $myUserName, $myPassword, $myDataBaseName );  
            // Check connection
            if (mysqli_connect_errno())
              {
              echo "Failed to connect to MySQL: " . mysqli_connect_error();
              }

        //********** consulta para verificar se email já existe *********

        $sql="SELECT fieldEmail FROM clientela WHERE fieldEmail = '$email'";

        if ($result=mysqli_query($con,$sql))
          {
          // Return the number of rows in result set
          $rowcount=mysqli_num_rows($result);
          printf($rowcount);

          }

        mysqli_close($con);

    }
?>

nova_loja.php

 <?php

  $fieldCod_Plano=$_POST['fieldCod_Plano'];
  $fieldEmail=$_POST['fieldEmail'];
  $fieldSenha=md5($_POST['fieldSenha']);
  $fieldResponsavel=$_POST['fieldResponsavel'];
  $fieldCpf=$_POST['fieldCpf'];
  $fieldDt_Nascimento=$_POST['fieldDt_Nascimento'];
  $fieldCnpj=$_POST['fieldCnpj'];
  $fieldFone=$_POST['fieldFone'];
  $fieldUrl_Interna=$_POST['fieldUrl_Interna'];
  $fieldCep=$_POST['fieldCep'];
  $fieldRua=$_POST['fieldRua'];
  $fieldNumero=$_POST['fieldNumero'];
  $fieldComplemento=$_POST['fieldComplemento'];
  $fieldBairro=$_POST['fieldBairro'];
  $fieldCidade=$_POST['fieldCidade'];
  $fieldEstado=$_POST['fieldEstado'];
  $codPromocional=$_POST['codPromocional'];
  $termos=$_POST['termos'];


    //**********conexão*********    

        #Conecta banco de dados 
        $myHost = "localhost"; // use seu nome de host
        $myUserName = "USUARIO";   // nome de usuário
        $myPassword = "SENHA";   // sua senha de login
        $myDataBaseName = "Nome_DB"; // nome do banco de dados

        $con = mysqli_connect( $myHost, $myUserName, $myPassword, $myDataBaseName );  


    /********** consulta para verificar se email já existe.
      Embora isso já tenha sido verificado no passo 2,
      vai que até o usuário enviar o formulário no passo 4
      outro usuário cadastrou esse email. 
      Você pode evitar esse tipo de coisas criando
      uma coluna no banco com o valor default 0 (desativado).
      Ao fazer o INSERT mande um email com um token
      que ao ser clicado faz UPDATE na coluna para valor 1 (ativado)
     **************************************************************/

        $sql = mysqli_query($con, "SELECT fieldEmail FROM clientela WHERE fieldEmail = '$fieldEmail'");

        #Se o retorno for maior do que zero, diz que já existe um.
        if(mysqli_num_rows($sql)>0){

            $aviso = $fieldEmail;

        } else {
            /************************** insere dados no banco *********************************/

            $mysql = mysqli_query($con, "INSERT INTO clientela (fieldCod_Plano,fieldEmail,fieldSenha,fieldResponsavel,fieldCpf,fieldDt_Nascimento,fieldCnpj,fieldFone,fieldUrl_Interna,fieldCep,fieldRua,fieldNumero,fieldComplemento,fieldBairro,fieldCidade,fieldEstado,codPromocional,termos) VALUES ('$fieldCod_Plano','$fieldEmail','$fieldSenha','$fieldResponsavel','$fieldCpf','$fieldDt_Nascimento','$fieldCnpj','$fieldFone','$fieldUrl_Interna','$fieldCep','$fieldRua','$fieldNumero','$fieldComplemento','$fieldBairro','$fieldCidade','$fieldEstado','$codPromocional','$termos')");


            if($mysql){

                $aviso = 1;

            }
        }


        echo $aviso;

        mysqli_close($con); 

    ?>

Bank table

some columns are 255 long, it would be better to adapt this length for each case according to your understanding regarding.

DROP TABLE IF EXISTS `clientela`;
CREATE TABLE IF NOT EXISTS `clientela` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `fieldCod_Plano` char(10) NOT NULL,
  `fieldEmail` varchar(255) NOT NULL,
  `fieldSenha` varchar(255) NOT NULL,
  `fieldResponsavel` varchar(255) NOT NULL,
  `fieldCpf` varchar(14) NOT NULL,
  `fieldDt_Nascimento` varchar(10) NOT NULL,
  `fieldCnpj` varchar(18) DEFAULT NULL,
  `fieldFone` varchar(15) DEFAULT NULL,
  `fieldUrl_Interna` varchar(255) NOT NULL,
  `fieldCep` varchar(10) NOT NULL,
  `fieldRua` varchar(255) NOT NULL,
  `fieldNumero` char(10) NOT NULL,
  `fieldComplemento` varchar(255) DEFAULT NULL,
  `fieldBairro` varchar(255) NOT NULL,
  `fieldCidade` varchar(255) NOT NULL,
  `fieldEstado` char(2) NOT NULL,
  `codPromocional` varchar(45) DEFAULT NULL,
  `termos` char(2) DEFAULT NULL,
  `ativo` enum('1','0') DEFAULT '0',
  PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8;
COMMIT;
  • Congratulations Leo stayed Show, only the bank table is missing, if the friend is ready send it to my email or post here @Leocaracciolo

  • Good afternoon, file not found css, Source map error: request failed with status 404 Resource URL: /css/normalize.css Source Map URL: bootstrap.min.css.map @Leocaracciolo

  • @Angelino In the example of the answer normalize.css is in the same folder you don’t have /css/

  • I did exactly so, but still the same error file not found @Leocaracciolo

  • <link rel="stylesheet" href="normalize.css">

  • @Angelino All files are in the same folder. Nothing prevents you from putting css in the css folder but you have to point the way correctly

  • @Angelino, vc posted the codes on your server and is running it or is running my functional example?

  • I’m using Wampserve, what it shows here is the same that shows in your example @Leocaracciolo

  • @Angelino use Chrome and does not appear anything, this must be in Firefox, but does not prevent anything from running the script properly, must be something related to this https://developer.mozilla.org/en-US/Docs/Tools/Debugger/Source_map_errors this normalize.css copied from the site and I cut something that didn’t matter, there must be something else that should be cut, but I’m not with all this patience

  • True friend, I’m using Firefox might be this same reason

  • @Angelino probably cut something in normalize.css that ze there is complaining

  • when I have time, I’ll check

  • friend I can delete the image I posted here?

  • yes can yes friend

Show 9 more comments

Browser other questions tagged

You are not signed in. Login or sign up in order to post.