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ó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á 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ça mí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ó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ó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í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ç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ú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ó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ó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çõ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
– Angelino
I don’t have to, I have to create a @Leocaracciolo
– Angelino
OK friend I will do now, I will try to create the database as soon as it is ready I warn @Leocaracciolo
– Angelino
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
– Angelino
The code to create the table works, but the codes of the pages are not about to work. It is very funny.
– user60252
See source https://github.com/MuriloEduardo/formulario-passo-a-passo-design-clin @Leocaracciolo
– Angelino
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
– Angelino
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
– Angelino
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
– Angelino