Guia para Crear Un Sistema de Inicio de Sesión Y Registro Usando PHP Y MySQL - Blog Hostdime Colombia

11/2/2016
GuiaParaCrearUnSistemaDeInicioDeSesinYRegistroUsandoPHPYMySQL|BlogHostdimeColombia
Guia Para Crear Un Sistema De Inicio De Sesin Y Registro Usando PHP Y

MySQL
Like
Tweet
Unsistemasegurodeiniciodesesinyregistroesunodelosrequerimientosprincipalesalcrearunsistema.Esporesto,
queenestaoportunidaddaremosunabreveguadecomocrearunsistemadeiniciodesesinyregistro,usando
MySQLyPHP.NoharemosusodealgnFramework(6FrameWorksPHPparaeldesarrollogil),solamenteusaremos
PHPdesdeceroparalograrlo
Noestandifcildehacerlo,solotienesquetenerconocimientosbsicosde
programacin,HTML,yalgodeCSS(porsideseasmodificarlaapariencia).Esperamosquenuestroanteriorarticulo,
sobre10consejosparaserunmejorprogramadorenPHP,seadegranutilidad.
Lo Que Se Necesita
Xampp(PHPversin5.3posteriorylaversindeMySQL4.1.3posterior)
ConocimientosbsicossobrePHP,HTMLyCSS
Algodetiempoypaciencia
http://blog.hostdime.com.co/guiaparacrearunsistemadeiniciodesesionyregistrousandophpymysql/
1/14
11/2/2016
Resultado Final
EnlassiguientesimgenespodrsverelresultadofinaldelsistemadeiniciodesesinyregistroalusarPHPy
MySQL.
2/14
11/2/2016
Tegustacomoseveelformulario?Puedesdescargarelcdigodeformulariodeusistemadeiniciodesesinyregistro.
Configuracin Del Servidor

PuedesusarcualquierserviciodealojamientowebquetengaPHPyMySQLyainstalados(sloasegresedetenerla
versinPHP5.3superioryMySQL4.1.3superior).Paraestaguia,seusXamppcomoservidor.Tegustaratenertu
propioservidoronline,teinvitamosaconocernuestrosplanesenservidorescompartidos,servidoresVPSyservidores
Dedicados
Paso 1 MySQL
Enprimerlugar,esnecesarioquecreelabasededatosylatablaquealmacenaratodoslosregistros.Puedeshacerestode
formamanualutilizandolainterfazgrficadeusuariodePhpMyAdminusarSQLparainsertarestainformacin.Si
deseasusarSQL,lassiguienteslineastecrearantantolabasededatoscomolatabla:
/*CreateDatabase*/
CREATEDATABASEuserlitdb;
/*CreateTable*/
CREATETABLEùsertbl`(
ìdìnt(11)NOTNULLauto_increment,
`full_name`varchar(32)collateutf8_unicode_ciNOTNULLdefault'',
èmail`varchar(32)collateutf8_unicode_ciNOTNULLdefault'',
ùsername`varchar(20)collateutf8_unicode_ciNOTNULLdefault'',
`password`varchar(32)collateutf8_unicode_ciNOTNULLdefault'',
PRIMARYKEY(ìd`),
UNIQUEKEYùsername`(ùsername`)
)ENGINE=MyISAMDEFAULTCHARSET=utf8COLLATE=utf8_unicode_ci;
Observequetodosellossondetipovarchar,inclusolacontraseaqueseconvertirmstardeenmd5paraasegurarla
contraseadelusuario.Adems,useunAUTO_INCREMENTparaasignarautomticamenteunIDunnmerode
usuariosqueseregistraranmstarde.
Ahoraquelatablasehacreado,loquetienesquehaceresimplementarlaestructuraconHTMLydiseoconCSS,luego
vendrelPHP.
Paso 2 El HTML
3/14
11/2/2016
Yaqueelprocesoloharemosdelladodelservidor(porusarsoloPHP),usaremostresarchivosPHPencualsecuentacon
lasfuncionesylaestructuraconelHTML.Enprimerlugar,secreaelarchivologin.php.Sientetelibredecopiarel
siguientecdigo:
<?php
session_start();
?>
<?phprequire_once("includes/connection.php");?>
<?phpinclude("includes/header.php");?>
<?php
if(isset($_SESSION["session_username"])){
//echo"Sessionisset";//fortestingpurposes
header("Location:intropage.php");
}
if(isset($_POST["login"])){
if(!empty($_POST['username'])&&!empty($_POST['password'])){
$username=$_POST['username'];
$password=$_POST['password'];
$query=mysql_query("SELECT*FROMusertblWHEREusername='".$username."'AND
password='".$password."'");
$numrows=mysql_num_rows($query);
if($numrows!=0)
{
while($row=mysql_fetch_assoc($query))
{
$dbusername=$row['username'];
$dbpassword=$row['password'];
}
if($username==$dbusername&&$password==$dbpassword)
$_SESSION['session_username']=$username;
/*Redirectbrowser*/
header("Location:intropage.php");
}
}else{
$message="Nombredeusuariocontraseainvalida!";
}
}else{
$message="Todosloscampossonrequeridos!";
}
}
?>
<divclass="containermlogin">
<divid="login">
<h1>Logueo</h1>
<formname="loginform"id="loginform"action=""method="POST">
<p>
<labelfor="user_login">NombreDeUsuario<br/>
<inputtype="text"name="username"id="username"class="input"value=""size="20"/></label>
</p>
Inicio Web Hosting Servidores Dedicados Contacto
<p>
<labelfor="user_pass">Contrasea<br/>
4/14
11/2/2016
<inputtype="password"name="password"id="password"class="input"value=""size="20"/></label>
</p>
<pclass="submit">
<inputtype="submit"name="login"class="button"value="Entrar"/>
</p>
<pclass="regtext">Noestasregistrado?<ahref="register.php">RegistrateAqu</a>!</p>
</form>
</div>
</div>
<?phpinclude("includes/footer.php");?>
<?phpif(!empty($message)){echo"<pclass=\"error\">"."MESSAGE:".$message."</p>";}?>
Acontinuacin,creamoselarchivoregister.php.Copieypegueelsiguientecdigo:
<?phprequire_once("includes/connection.php");?>
<?php
if(isset($_POST["register"])){
if(!empty($_POST['full_name'])&&!empty($_POST['email'])&&!empty($_POST['username'])&&
!empty($_POST['password'])){
$full_name=$_POST['full_name'];
$email=$_POST['email'];
$username=$_POST['username'];
$password=$_POST['password'];
$query=mysql_query("SELECT*FROMusertblWHEREusername='".$username."'");
$numrows=mysql_num_rows($query);
if($numrows==0)
{
$sql="INSERTINTOusertbl
(full_name,email,username,password)
VALUES('$full_name','$email','$username','$password')";
$result=mysql_query($sql);
if($result){
$message="CuentaCorrectamenteCreada";
}else{
$message="Erroralingresardatosdelainformacion!";
}
}else{
$message="Elnombredeusuarioyaexiste!Porfavor,intentaconotro!";
}
}else{
$message="Todosloscamposnodebendeestarvacios!";
}
}
?>
<?phpif(!empty($message)){echo"<pclass=\"error\">"."Mensaje:".$message."</p>";}?>
<divclass="containermregister">
<divid="login">
<h1>Registrar</h1>
<formname="registerform"id="registerform"action="register.php"method="post">
<p>
<labelfor="user_login">NombreCompleto<br/>
5/14
11/2/2016
<labelfor="user_login">NombreCompleto<br/>
<inputtype="text"name="full_name"id="full_name"class="input"size="32"value=""/></label>
</p>
<p>
<labelfor="user_pass">Email<br/>
<inputtype="email"name="email"id="email"class="input"value=""size="32"/></label>
</p>
<p>
<labelfor="user_pass">NombreDeUsuario<br/>
<inputtype="text"name="username"id="username"class="input"value=""size="20"/></label>
</p>
<p>
<inputtype="password"name="password"id="password"class="input"value=""size="32"/></label>
</p>
<pclass="submit">
<inputtype="submit"name="register"id="register"class="button"value="Registrar"/>
</p>
<pclass="regtext">Yatienesunacuenta?<ahref="login.php">EntraAqu!</a>!</p>
</form>
</div>
</div>
Acontinuacin,secrealapaginadebienvenidaenelarchivointropage.php.Estoservircomolapginaprincipalunavez
queunusuarioiniciasesinexitosamente.
<?php
session_start();
if(!isset($_SESSION["session_username"])){
header("location:login.php");
}else{
?>
<divid="welcome">
<h2>Bienvenido,<span><?phpecho$_SESSION['session_username'];?>!</span></h2>
<p><ahref="logout.php">Finalice</a>sesinaqu!</p>
</div>
<?php
}
?>
SilaestructurasemanejaconHTML,porqueusarPHPconHTML?Simple,PHPestanflexiblequenospermiteusar
HTMLincrustado,siprefieresyquieresprobaratumodo,puedessepararlaestructuradelHTMLdelcdigoPHP
Pero
bueno,queseriadelHTMLsinelCSSenestosdas?
Paso 3 El CSS
Paradarleunaspectobieninteresantealejercicio,ledaremosunpequeoretoqueconCSS,esporestoquesevebastante
llamativoelformulario
*=GENERALSTYLES
6/14
11/2/2016
*=GENERALSTYLES
*/
body{
background:#efefef;
fontfamily:'OpenSans',sansserif;
color:#777;
}
a{
color:#f58220;
fontweight:400;
}
span{
fontweight:300;
color:#f58220;
}
.mlogin{
margin:170pxauto0;
}
.mregister{
margin:80pxauto0;
}
.error{
margin:40pxauto0;
border:1pxsolid#777;
padding:3px;
color:#fff;
textalign:center;
width:650px;
background:#f58220;
}
.regtext{
fontsize:13px;
margintop:26px;
color:#777;
}
/*=CONTAINERS
*/
.container{
padding:25px16px25px10px;
fontweight:400;
overflow:hidden;
width:350px;
height:auto;
background:#fff;
webkitboxshadow:01px3pxrgba(0,0,0,.13);
mozboxshadow:01px3pxrgba(0,0,0,.13);
boxshadow:01px3pxrgba(0,0,0,.13);
}
#welcome{
width:500px;
padding:30px;
background:#fff;
margin:160pxauto0;
webkitboxshadow:01px3pxrgba(0,0,0,.13);
mozboxshadow:01px3pxrgba(0,0,0,.13);
boxshadow:01px3pxrgba(0,0,0,.13);
}
.containerh1{
color:#777;
textalign:center;
7/14
11/2/2016
textalign:center;
fontweight:300;
border:1pxdashed#777;
margintop:13px;
}
.containerlabel{
color:#777;
fontsize:14px;
}
#login{
width:320px;
margin:auto;
paddingbottom:15px;
}
.containerform.input,.containerinput[type=text],.containerinput[type=password],.container
input[type=e]{
background:#fbfbfb;
fontsize:24px;
lineheight:1;
width:100%;
padding:3px;
margin:06px5px0;
outline:none;
border:1pxsolid#d9d9d9;
}
.containerform.input:focus{
border:1pxsolid#f58220;
webkitboxshadow:003px0rgba(245,130,32,0.75);
mozboxshadow:003px0rgba(245,130,32,0.75);
boxshadow:003px0rgba(245,130,32,0.75);
}
/*=BUTTONS
*/
.button{
border:solid1px#da7c0c;
background:#f78d1d;
background:webkitgradient(linear,lefttop,leftbottom,from(#faa51a),
to(#f47a20));
background:mozlineargradient(top,#faa51a,#f47a20);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a',
endColorstr='#f47a20');
color:#fff;
padding:7px12px;
webkitborderradius:4px;
mozborderradius:4px;
borderradius:4px;
float:right;
cursor:pointer;
}
.button:hover{
background:#f47c20;
background:webkitgradient(linear,lefttop,leftbottom,from(#f88e11),
to(#f06015));
background:mozlineargradient(top,#f88e11,#f06015);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f88e11',
endColorstr='#f06015');
}
/*=FOOTER
*/
footer{
color:#777;
8/14
11/2/2016
color:#777;
fontsize:12px;
textalign:center;
margintop:20px;
}
Puntos A Tener En Cuenta

Seusolareutilizacindecdigohaciendousodelinclude,estoloencontramosbastanteenelheaderyelfooter.
Variablesconstantesparalaconexinalabasededatos,estoloencontramosenelarchivoconnection.php.
Lasesindemanejaconsession_destroy,cuandoelusuariodeseafinalizarlasesin,haremosusodeestafuncin.
Sierescurioso,ymiraselcdigofuentedentrodelnavegador,noseveraelcdigoPHP
Finalmente
HoyhasaprendidoacrearunsencillosistemadeiniciodesesinutilizandoPHPyMySQL.Aunquehaymuchascosasa
considerarcuandosetratadeseguridad,estoesunbuencomienzoparaaquellosprincipiantes.Ereslibredemodificarlos
anteriorescdigosparatuproyecto.Sitienealgunaideaparamejorarloscdigos,porfavor,dejaunbuencomentariocon
elcdigoyexplicandoelporque
desarrollador
desarrolladores
desarrollo
html
MySQL
php
Post Relacionados
CmoMostrarLosDatosEnLaConsolaDel
Usar TogetherJS Para Implementar

Entorno Colaborativo En Tiempo Real En
Su Sitio Web
Qu Tipo De Cmara Fotogrfica

Comprar?
NavegadorWebAnteriormentehabamos
Nosepuedenegarquelacolaboracinen
Cuandosetratadecomprarunacmara
habladosobrelas
tiemporealsehaconvertidoenuna
fotogrfica,enrealidadtienesbastantede
La Consola Del Navegador Web,
dondeelegir.
Este post tiene 24 comentarios

josue
3June,2015at8:13
hlaunsaludomegustoeltutorialestabuenisimodeseariasabercomopuedohacerpararedireccionaracada
9/14
11/2/2016
clienteaunapaginadistintagracias
josue
2June,2015at23:25
unsaludoeltutorialesexelenteesmiprimerabasededatos,unaconsultaysiquieroredireccionaracada
usuarioaunapaginadiferente
Harold
1June,2015at10:43
Holatengoproblemasconheader(location:intropage.php)luegodehacerloginnoseredireccionatoca
actualizarlapaginaparaqueversiestaconectado.gracias
anonymous
27May,2015at0:39
amigomegustariasaberconquenombreseguardariaelcss
Hugo
12May,2015at12:42
Unaduda:Dondepuedoconseguirelconection.php?
jesus
6May,2015at14:37
ysiesteesunformularioenlaweb,comolehagoparaingresarporlapuertatrasera?
miguel.argentina
3May,2015at18:12
loadaptyfuncionperfectamente
Graciasportodo
German
30April,2015at12:45
memarcaesteerrorcuandopongoellogin
10/14
11/2/2016
Warning:Cannotmodifyheaderinformationheadersalreadysentby(outputstartedatC:\xamppwin32
1.7.3\xampp\htdocs\phpform\login.php:5)inC:\xamppwin321.7.3\xampp\htdocs\phpform\login.phponline
12
Ricardo
29April,2015at11:13
Muybuenagua,meayudobastantesolomencionarsobremd5queactualmenteyaesbastantevulnerableyes
aconsejableotroalgoritmo(ysiasiendoaladotantascosasdeseguridadquefaltaranporimplementary
mencionar).
peronolequitalobuenoaestomuchasgraciasporlaayuda
AlvaroAngulo
28April,2015at11:21
Enelposthayunarchivoquediceheader.phpdondeimplementasteesearchivoenelpost?
Gustavo
28April,2015at8:52
comohagoqueparalapartequedicebienvenido(porejemplo)tambienmuestreotrodatocomofull_name
Bienvenido,!
Finalicesesinaqu!
jorge
27April,2015at17:10
Buenastardes,sigoestetutorialperonoencuentrodonderealiceselconnection.phpqueloincluyesenlos
archivosydondesedefinelabasededatosylasdemasconstantes,tampocolarealizacindelheader.phpydel
footer.php,esquesoyprincipianteypuesquisierasaberqueesloqueserealizaenesosarchivos?
Milgracias!
Solis
24April,2015at10:07
Estamuybuenotucodigoperobuscolaconeccionconlabdynolaconsigoyquierosaberdequemanerahicistes
laconecion
11/14
11/2/2016
Crist
7April,2015at11:22
Buenda
Tengounapregunta,estuvecreandolabasededatosporlapartegrficadephpmyadminylaparte
auto_incrementnolaencuentroparaconfigurarla,soynovatoagradezcosucolaboracin.
Anonymous
5April,2015at18:11
Excelentemuchasgracias
Andrs
3April,2015at14:44
Felicidadesporelpost,mehaservido.Miconsultasedebeaquenohevistoquesehayaaplicadolaseguridad
md5quemencionaalprincipioCmosehara?.Agradezcosutiempoyempeo.Uncordialsaludo.
francisco
20March,2015at1:41
estamuybientupost.sinceramenteloqueandobuscandoesquealmomentoquehacesellogueoynoeste
registradoelusuario..enesemomentotedelaopcinderegistrar..eslonicoquelefaltaalpost..osilotiene
porfavorseriastanamabledemostrarmelo!!graciasportodoamigo
daniel
2March,2015at8:04
MUCHASGRACIAS!
MESIRVIOPEROOOOOJOCONELHEADERLOCATION
Androidfastblog@gmail.com
2January,2015at13:38
Holabuenasestoybuscandoquientengalagentilezaparaayudarmeaponerunlonginenmiblogen
wordpress.comnosoypremiumsolopuedocolocarwidgetyhtmlpudieranayudarmeesquealmenosenestono
poseomuchoconocimientoquienseAnima
Derek
12/14
11/2/2016
11December,2014at21:00
Megustaesexcelente,graciasporcompartirlo!
JulianGonzales
7November,2014at8:46
ComopuedesverenlalineadelHTML,exactamenteenlalineade<?php
include("includes/header.php")?>,sellamaalarchivoheader.php,enlestalalineaqueinvocaelarchivo
CSS,porlotanto,unavezsellameestearchivo,noesnecesarioaadirelCSSencadaarchivo,despusdelas
imgenesencuentraselenlacededescarga.
Danielarmadillo
Graciasporelexcelenteaporteaprogramarwebc:
Anonymous
comoseasociaelcssalosdemasarchivos?
Anonymous
29October,2014at12:03
ExcelenteGua.saludos
Leave a Reply
Youremailaddresswillnotbepublished.
Name
Email
Website
CAPTCHACode*
Comment
13/14
11/2/2016
Post Comment
Cmo Respaldar Y Migrar Archivos De Configuracin De Linux
3 Mtodos Psicologicos para Mejorar Entorno De Trabajo
HostDime Colombia Blog 2015
14/14

Guia para Crear Un Sistema de Inicio de Sesión Y Registro Usando PHP Y MySQL - Blog Hostdime Colombia

Hochgeladen von

Dokumentinformationen

Originalbeschreibung:

Originaltitel

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Guia para Crear Un Sistema de Inicio de Sesión Y Registro Usando PHP Y MySQL - Blog Hostdime Colombia

Hochgeladen von

Copyright:

Verfügbare Formate

11/2/2016

Guia Para Crear Un Sistema De Inicio De Sesin Y Registro Usando PHP Y

Configuracin Del Servidor

Puntos A Tener En Cuenta

Usar TogetherJS Para Implementar

Qu Tipo De Cmara Fotogrfica

La Consola Del Navegador Web,

Este post tiene 24 comentarios

Cmo Respaldar Y Migrar Archivos De Configuracin De Linux

3 Mtodos Psicologicos para Mejorar Entorno De Trabajo

HostDime Colombia Blog 2015

Das könnte Ihnen auch gefallen