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

11/2/2016 GuiaParaCrearUnSistemaDeInicioDeSesinYRegistroUsandoPHPYMySQL|BlogHostdimeColombia

http://blog.hostdime.com.co/guiaparacrearunsistemadeiniciodesesionyregistrousandophpymysql/ 1/14

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

Tweet

Unsistemasegurodeiniciodesesinyregistroesunodelosrequerimientosprincipalesalcrearunsistema.Esporesto,queenestaoportunidaddaremosunabreveguadecomocrearunsistemadeiniciodesesinyregistro,usandoMySQLyPHP.NoharemosusodealgnFramework(6FrameWorksPHPparaeldesarrollogil),solamenteusaremosPHPdesdeceroparalograrlo Noestandifcildehacerlo,solotienesquetenerconocimientosbsicosdeprogramacin,HTML,yalgodeCSS(porsideseasmodificarlaapariencia).Esperamosquenuestroanteriorarticulo,sobre10consejosparaserunmejorprogramadorenPHP,seadegranutilidad.

Lo Que Se NecesitaXampp(PHPversin5.3posteriorylaversindeMySQL4.1.3posterior)ConocimientosbsicossobrePHP,HTMLyCSSAlgodetiempoypaciencia

8Like



Resultado FinalEnlassiguientesimgenespodrsverelresultadofinaldelsistemadeiniciodesesinyregistroalusarPHPyMySQL.



Tegustacomoseveelformulario?Puedesdescargarelcdigodeformulariodeusistemadeiniciodesesinyregistro.

Configuracin Del ServidorPuedesusarcualquierserviciodealojamientowebquetengaPHPyMySQLyainstalados(sloasegresedetenerlaversinPHP5.3superioryMySQL4.1.3superior).Paraestaguia,seusXamppcomoservidor.Tegustaratenertupropioservidoronline,teinvitamosaconocernuestrosplanesenservidorescompartidos,servidoresVPSyservidoresDedicados

Paso 1 MySQLEnprimerlugar,esnecesarioquecreelabasededatosylatablaquealmacenaratodoslosregistros.PuedeshacerestodeformamanualutilizandolainterfazgrficadeusuariodePhpMyAdminusarSQLparainsertarestainformacin.SideseasusarSQL,lassiguienteslineastecrearantantolabasededatoscomolatabla:

Observequetodosellossondetipovarchar,inclusolacontraseaqueseconvertirmstardeenmd5paraasegurarlacontraseadelusuario.Adems,useunAUTO_INCREMENTparaasignarautomticamenteunIDunnmerodeusuariosqueseregistraranmstarde.

Ahoraquelatablasehacreado,loquetienesquehaceresimplementarlaestructuraconHTMLydiseoconCSS,luegovendrelPHP.

Paso 2 El HTML

/*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;



Yaqueelprocesoloharemosdelladodelservidor(porusarsoloPHP),usaremostresarchivosPHPencualsecuentaconlasfuncionesylaestructuraconelHTML.Enprimerlugar,secreaelarchivologin.php.Sientetelibredecopiarelsiguientecdigo:



Acontinuacin,creamoselarchivoregister.php.Copieypegueelsiguientecdigo:

ContraseaNoestasregistrado?RegistrateAqu!



Acontinuacin,secrealapaginadebienvenidaenelarchivointropage.php.Estoservircomolapginaprincipalunavezqueunusuarioiniciasesinexitosamente.

SilaestructurasemanejaconHTML,porqueusarPHPconHTML?Simple,PHPestanflexiblequenospermiteusarHTMLincrustado,siprefieresyquieresprobaratumodo,puedessepararlaestructuradelHTMLdelcdigoPHP Perobueno,queseriadelHTMLsinelCSSenestosdas?

Paso 3 El CSSParadarleunaspectobieninteresantealejercicio,ledaremosunpequeoretoqueconCSS,esporestoquesevebastantellamativoelformulario

NombreCompletoEmailNombreDeUsuarioContrasea

Yatienesunacuenta?EntraAqu!!

Bienvenido,!Finalicesesinaqu!

*=GENERALSTYLES



*=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;



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],.containerinput[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;



desarrollador desarrolladores desarrollo html MySQL php

La Consola Del Navegador Web,CmoMostrarLosDatosEnLaConsolaDelNavegadorWebAnteriormentehabamoshabladosobrelas

Usar TogetherJS Para ImplementarEntorno Colaborativo En Tiempo Real EnSu Sitio WebNosepuedenegarquelacolaboracinentiemporealsehaconvertidoenuna

Qu Tipo De Cmara FotogrficaComprar?Cuandosetratadecomprarunacmarafotogrfica,enrealidadtienesbastantededondeelegir.

Puntos A Tener En CuentaSeusolareutilizacindecdigohaciendousodelinclude,estoloencontramosbastanteenelheaderyelfooter.Variablesconstantesparalaconexinalabasededatos,estoloencontramosenelarchivoconnection.php.Lasesindemanejaconsession_destroy,cuandoelusuariodeseafinalizarlasesin,haremosusodeestafuncin.Sierescurioso,ymiraselcdigofuentedentrodelnavegador,noseveraelcdigoPHP

FinalmenteHoyhasaprendidoacrearunsencillosistemadeiniciodesesinutilizandoPHPyMySQL.Aunquehaymuchascosasaconsiderarcuandosetratadeseguridad,estoesunbuencomienzoparaaquellosprincipiantes.Ereslibredemodificarlosanteriorescdigosparatuproyecto.Sitienealgunaideaparamejorarloscdigos,porfavor,dejaunbuencomentarioconelcdigoyexplicandoelporque

Post Relacionados

Este post tiene 24 comentarios

color:#777;fontsize:12px;textalign:center;margintop:20px;}

josue3June,2015at8:13

hlaunsaludomegustoeltutorialestabuenisimodeseariasabercomopuedohacerpararedireccionaracada



clienteaunapaginadistintagracias

josue2June,2015at23:25

unsaludoeltutorialesexelenteesmiprimerabasededatos,unaconsultaysiquieroredireccionaracadausuarioaunapaginadiferente

Harold1June,2015at10:43

Holatengoproblemasconheader(location:intropage.php)luegodehacerloginnoseredireccionatocaactualizarlapaginaparaqueversiestaconectado.gracias

anonymous27May,2015at0:39

amigomegustariasaberconquenombreseguardariaelcss

Hugo12May,2015at12:42

Unaduda:Dondepuedoconseguirelconection.php?

jesus6May,2015at14:37

ysiesteesunformularioenlaweb,comolehagoparaingresarporlapuertatrasera?

miguel.argentina3May,2015at18:12

loadaptyfuncionperfectamenteGraciasportodo

German30April,2015at12:45

memarcaesteerrorcuandopongoellogin



Warning:Cannotmodifyheaderinformationheadersalreadysentby(outputstartedatC:\xamppwin321.7.3\xampp\htdocs\phpform\login.php:5)inC:\xamppwin321.7.3\xampp\htdocs\phpform\login.phponline12

Ricardo29April,2015at11:13

Muybuenagua,meayudobastantesolomencionarsobremd5queactualmenteyaesbastantevulnerableyesaconsejableotroalgoritmo(ysiasiendoaladotantascosasdeseguridadquefaltaranporimplementarymencionar).

peronolequitalobuenoaestomuchasgraciasporlaayuda

AlvaroAngulo28April,2015at11:21

Enelposthayunarchivoquediceheader.phpdondeimplementasteesearchivoenelpost?

Gustavo28April,2015at8:52

comohagoqueparalapartequedicebienvenido(porejemplo)tambienmuestreotrodatocomofull_name

Bienvenido,!Finalicesesinaqu!

jorge27April,2015at17:10

Buenastardes,sigoestetutorialperonoencuentrodonderealiceselconnection.phpqueloincluyesenlosarchivosydondesedefinelabasededatosylasdemasconstantes,tampocolarealizacindelheader.phpydelfooter.php,esquesoyprincipianteypuesquisierasaberqueesloqueserealizaenesosarchivos?Milgracias!

Solis24April,2015at10:07

Estamuybuenotucodigoperobuscolaconeccionconlabdynolaconsigoyquierosaberdequemanerahicisteslaconecion



Crist7April,2015at11:22

Buenda

Tengounapregunta,estuvecreandolabasededatosporlapartegrficadephpmyadminylaparteauto_incrementnolaencuentroparaconfigurarla,soynovatoagradezcosucolaboracin.

Anonymous5April,2015at18:11

Excelentemuchasgracias

Andrs3April,2015at14:44

Felicidadesporelpost,mehaservido.Miconsultasedebeaquenohevistoquesehayaaplicadolaseguridadmd5quemencionaalprincipioCmosehara?.Agradezcosutiempoyempeo.Uncordialsaludo.

francisco20March,2015at1:41

estamuybientupost.sinceramenteloqueandobuscandoesquealmomentoquehacesellogueoynoesteregistradoelusuario..enesemomentotedelaopcinderegistrar..eslonicoquelefaltaalpost..osilotieneporfavorseriastanamabledemostrarmelo!!graciasportodoamigo

daniel2March,2015at8:04

MUCHASGRACIAS!MESIRVIOPEROOOOOJOCONELHEADERLOCATION

[email protected],2015at13:38

Holabuenasestoybuscandoquientengalagentilezaparaayudarmeaponerunlonginenmiblogenwordpress.comnosoypremiumsolopuedocolocarwidgetyhtmlpudieranayudarmeesquealmenosenestonoposeomuchoconocimientoquienseAnima

Derek



Leave a ReplyYouremailaddresswillnotbepublished.

Name Email Website

CAPTCHACode

Comment

11December,2014at21:00

Megustaesexcelente,graciasporcompartirlo!

JulianGonzales7November,2014at8:46

ComopuedesverenlalineadelHTML,exactamenteenlalineade,sellamaalarchivoheader.php,enlestalalineaqueinvocaelarchivoCSS,porlotanto,unavezsellameestearchivo,noesnecesarioaadirelCSSencadaarchivo,despusdelasimgenesencuentraselenlacededescarga.

Danielarmadillo6November,2014at17:40

Graciasporelexcelenteaporteaprogramarwebc:

Anonymous5November,2014at19:13

comoseasociaelcssalosdemasarchivos?

Anonymous29October,2014at12:03

ExcelenteGua.saludos

*



3 Mtodos Psicologicos para Mejorar Entorno De Trabajo Cmo Respaldar Y Migrar Archivos De Configuracin De Linux

Post Comment

HostDime Colombia Blog 2015

Documents

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