HOLA GENTE!!!! Todo bien?
Les traigo un tutorial de cómo crear un sistema de usuarios para tu proyecto
Lo que usaremos se llama programación en PHP, y es distinto al html que uno mismo puede editar y retocar en la internet (sin producir cambios globales, solo en tu pc). El PHP funciona del lado del servidor, osea que ningún usuario puede generar un quilombo en tu sistema
RECUERDEN CHEKEAR ALGUN TUTO BASICO DE PHP Y MYSQL COMO TAMBIÉN DE HTML/CSS
Les dejo uno mío
http://www.taringa.net/posts/hazlo-tu-mismo/16321783/Queres-crear-tu-propia-web-Tutorial-HTML-y-CSS.html
Necesitas una host si no tenes, con este programa podés tener tu propio localhost.
Una vez descargado e instalado, lo iniciamos (RECUERDEN DONDE LO INSTALARON):
Seleccionamos en START en MYSQL Y APACHE. Si quieren que siempre esté funcionando su localhost (sin necesidad de abrir el programita), tienen que instalar MYSQL Y APACHE haciendo click en el checkbox
Se dirigen a la carpeta donde lo instalaron: (en mi caso disco C) C:/xampp/htdocs y creamos una carpeta para luego ir a nuestro navegador y poder entrar con http://localhost/nuestranombrecarpeta
Donde no tendrán nada todavía, obviamente.
Dirijámonos a http://localhost/phpmyadmin que es nuestra BASE DE DATOS
Hacemos click en base de datos (arriba en el menú) y ponemos el nombre a nuestra db, por ahora: miweb.
Lo que está la costado, llamado cotejamiento esta en lenguaje español para que permita subir informacion a la base de datos como ñ tildes, etc.
Nos dirigimos a la sección SQL para crear una tabla y ponemos lo siguiente:
CREATE TABLE IF NOT EXISTS `usuarios` (
`id` int(10) unsigned NOT NULL AUTO_INCREMENT,
`usuario` varchar(45) COLLATE utf8mb4_spanish_ci NOT NULL,
`password` varchar(45) COLLATE utf8mb4_spanish_ci NOT NULL,
`foto_perfil` varchar(120) COLLATE utf8mb4_spanish_ci NOT NULL DEFAULT 'sin-avatar.jpg',
`email` varchar(60) COLLATE utf8mb4_spanish_ci NOT NULL,
`pais` varchar(100) COLLATE utf8mb4_spanish_ci NOT NULL,
`fecha` date NOT NULL,
`ip` varchar(15) COLLATE utf8mb4_spanish_ci NOT NULL,
`nombre` varchar(20) COLLATE utf8mb4_spanish_ci NOT NULL,
`apellido` varchar(20) COLLATE utf8mb4_spanish_ci NOT NULL,
PRIMARY KEY (`id`)
)
Damos guardar y a la derecha nos aparecerá, hacemos click.. y veremos que se ha creado :3
Ahora crearemos unos archivos con las siguientes extensiones que irán adentro de la carpeta que sería nuestro "dominio":
mysql.php
index.php
iniciando.php
logout.php
nuevo-usuario.php
mysql.php
<?php
$bd_host = "localhost";
$bd_usuario = "root";
$bd_password = "";
$bd_base = "miweb"; //nombre de la basedd
$con = mysql_connect($bd_host, $bd_usuario, $bd_password);
mysql_select_db($bd_base, $con);
?>
Explicación: son los datos de la base de datos donde tomaremos los datos
index.php
<?php
include("mysql.php");
session_start();
if(isset($_SESSION['usuario']))
{
$sql = mysql_query("SELECT * FROM usuarios WHERE usuario='".$_SESSION["usuario"]."'");
$row = mysql_fetch_array($sql);
$foto=$row["foto_perfil"];
$usuarios=mysql_query("SELECT * FROM usuarios");
if($user_ok = mysql_fetch_array($usuarios))
{
echo '
<table background="img/menu-perfil.png" width="112" class="cuadro-foto">
<tr align="center">
<td width="70">
<img src="'.$foto.'" width="73" class="foto" height="58">
</td>
<td>
<b>Bienvenido </b>'.$_SESSION["usuario"].'!
</td>
</tr>
</table>
<a href="logout.php">cerrar sesion</a>
';
}
}else{
echo '
<table>
<form action="iniciando.php" class="contacto" method="POST">
<tr>
<td> </td>
<td width="100">Usuario:</td>
<td><input type="text" name="usuario" size="15"></td>
<td rowspan="2" style="padding-left: 30px;">
</td>
</tr>
<tr>
<td> </td>
<td>Password:</td>
<td><input type="password" name="password" size="15"></td>
</tr>
<tr style="text-align:right;">
<td> </td>
<td><a href="nuevo-usuario.php">Registrarme!</a></td>
<td><input type="submit" name="submit" value="Iniciar sesión"></td>
</tr>
<form>
</table>
';
}
?>
Explicación del código: Hay una condicional que pregunta que si ya ha habido una sesión iniciada, recoge los datos de la base de datos y los imprime.. si no es así vuelve a poner el formulario
iniciando.php
<?php
include('mysql.php');
session_start();
$usuario = $_POST["usuario"];
$password = $_POST["password"];
if( ($usuario == ' ' or $password == ' '))
{
header("location: index.php");
}else{
$usuarios=mysql_query("SELECT * FROM usuarios WHERE usuario='".$usuario."' AND password='".$password."' limit 1");
$user_ok=mysql_fetch_array($usuarios);
if($user_ok > 0)
{
$_SESSION['usuario'] = $user_ok["usuario"];
$_SESSION['password'] = $user_ok["password"];
$_SESSION['id'] = $user_ok["id"];
$_SESSION['foto_perfil'] = $user_ok["foto_perfil"];
$_SESSION['pais'] = $user_ok["pais"];
$_SESSION['email'] = $user_ok["email"];
header("location: ".$_SERVER['HTTP_REFERER']);
}else{
echo '<script>javascript:alert("Usuario y/o password incorrectos");</script>
<script>javascript:history.back(1)</script>';
}
}
?>
Explicacion: recoge los datos del formulario, los compara con los de la base de datos y si son correctos inicia, sino vuelve.
logout.php
<?php
include('mysql.php');
$sql="DELETE FROM `usuarios` (status) WHERE id='$_SESSION[id]'";
session_destroy();
header("location: index.php");
?>
Explicación: destruye la sesión.
nuevo-usuario.php
<html>
<head>
<title>Registro de usuarios</title>
<link rel="stylesheet" href="registro.css">
</head>
<body>
<form class="contacto" method="POST">
<div><label>Usuario:</label><input type="text" name="usuario" value=""></div>
<div><label>Password:</label><input type="password" name="password" value=""></div>
<div><label>Confirmar password:</label><input type="password" name="repassword" value=""></div>
<div><label>Email:</label><input type="text" name="email" value=""></div>
<div><label>Nombre:</label><input type="text" name="nombre" value=""></div>
<div><label>Apellido:</label><input type="text" name="apellido" value=""></div>
<div><label>Nacionalidad:</label>
<select name="pais">
<option select></option>
<option value="Afganistán">Afganistán</option>
<option value="Albania">Albania</option>
<option value="Alemania">Alemania</option>
<option value="Andorra">Andorra</option>
<option value="Angola">Angola</option>
<option value="Anguilla">Anguilla</option>
<option value="Antártida">Antártida</option>
<option value="Antigua y Barbuda">Antigua y Barbuda</option>
<option value="Antillas Holandesas">Antillas Holandesas</option>
<option value="Arabia Saudíta">Arabia Saudíta</option>
<option value="Argelia">Argelia</option>
<option value="Argentina">Argentina</option>
<option value="Armenia">Armenia</option>
<option value="Aruba">Aruba</option>
<option value="Australia">Australia</option>
<option value="Austria">Austria</option>
<option value="Azerbaiyán">Azerbaiyán</option>
<option value="Bahamas">Bahamas</option>
<option value="Bahrein">Bahrein</option>
<option value="Bangladesh">Bangladesh</option>
<option value="Barbados">Barbados</option>
<option value="Bélgica">Bélgica</option>
<option value="Belice">Belice</option>
<option value="Benin">Benin</option>
<option value="Bermudas">Bermudas</option>
<option value="Bielorrusia">Bielorrusia</option>
<option value="Birmania">Birmania</option>
<option value="Bolivia">Bolivia</option>
<option value="Bosnia y Herzegovina">Bosnia y Herzegovina</option>
<option value="Botswana">Botswana</option>
<option value="Brasil">Brasil</option>
<option value="Brunei">Brunei</option>
<option value="Bulgaria">Bulgaria</option>
<option value="Burkina Faso">Burkina Faso</option>
<option value="Burundi">Burundi</option>
<option value="Bután">Bután</option>
<option value="Cabo Verde">Cabo Verde</option>
<option value="Camboya">Camboya</option>
<option value="Camerún">Camerún</option>
<option value="Canadá">Canadá</option>
<option value="Catalunya">Catalunya</option>
<option value="Chad">Chad</option>
<option value="Chile">Chile</option>
<option value="China">China</option>
<option value="Chipre">Chipre</option>
<option value="Ciudad del Vaticano (Santa Sede)">Ciudad del Vaticano (Santa Sede)</option>
<option value="Colombia">Colombia</option>
<option value="Comores">Comores</option>
<option value="Congo">Congo</option>
<option value="Rep. Dem. del Congo">República Democrática del Congo</option>
<option value="Corea">Corea</option>
<option value="Corea del Norte">Corea del Norte</option>
<option value="Costa de Marfíl">Costa de Marfíl</option>
<option value="Costa Rica">Costa Rica</option>
<option value="Croacia">Croacia</option>
<option value="Cuba">Cuba</option>
<option value="Dinamarca">Dinamarca</option>
<option value="Djibouti">Djibouti</option>
<option value="Dominica">Dominica</option>
<option value="Ecuador">Ecuador</option>
<option value="Egipto">Egipto</option>
<option value="El Salvador">El Salvador</option>
<option value="Emiratos Árabes Unidos">Emiratos Árabes Unidos</option>
<option value="Eritrea">Eritrea</option>
<option value="Eslovenia">Eslovenia</option>
<option value="España">España</option>
<option value="Estados Unidos">Estados Unidos</option>
<option value="Estonia">Estonia</option>
<option value="Etiopía">Etiopía</option>
<option value="Fiji">Fiji</option>
<option value="Filipinas">Filipinas</option>
<option value="Finlandia">Finlandia</option>
<option value="Francia">Francia</option>
<option value="Gabón">Gabón</option>
<option value="Gambia">Gambia</option>
<option value="Georgia">Georgia</option>
<option value="Ghana">Ghana</option>
<option value="Gibraltar">Gibraltar</option>
<option value="Granada">Granada</option>
<option value="Grecia">Grecia</option>
<option value="Groenlandia">Groenlandia</option>
<option value="Guadalupe">Guadalupe</option>
<option value="Guam">Guam</option>
<option value="Guatemala">Guatemala</option>
<option value="Guayana">Guayana</option>
<option value="Guayana Francesa">Guayana Francesa</option>
<option value="Guinea">Guinea</option>
<option value="Guinea Ecuatorial">Guinea Ecuatorial</option>
<option value="Guinea-Bissau">Guinea-Bissau</option>
<option value="Haití">Haití</option>
<option value="Honduras">Honduras</option>
<option value="Hungría">Hungría</option>
<option value="India">India</option>
<option value="Indonesia">Indonesia</option>
<option value="Irak">Irak</option>
<option value="Irán">Irán</option>
<option value="Irlanda">Irlanda</option>
<option value="Isla Bouvet">Isla Bouvet</option>
<option value="Isla de Christmas">Isla de Christmas</option>
<option value="Islandia">Islandia</option>
<option value="Islas Caimán">Islas Caimán</option>
<option value="Islas Cook">Islas Cook</option>
<option value="Islas de Cocos o Keeling">Islas de Cocos o Keeling</option>
<option value="Islas Faroe">Islas Faroe</option>
<option value="Islas Heard y McDonald">Islas Heard y McDonald</option>
<option value="Islas Malvinas">Islas Malvinas</option>
<option value="Islas Marianas del Norte">Islas Marianas del Norte</option>
<option value="Islas Marshall">Islas Marshall</option>
<option value="Islas menores de Estados Unidos">Islas menores de Estados Unidos</option>
<option value="Islas Palau">Islas Palau</option>
<option value="Islas Salomón">Islas Salomón</option>
<option value="Islas Svalbard y Jan Mayen">Islas Svalbard y Jan Mayen</option>
<option value="Islas Tokelau">Islas Tokelau</option>
<option value="Islas Turks y Caicos">Islas Turks y Caicos</option>
<option value="Islas Vírgenes (EE.UU.)">Islas Vírgenes (EE.UU.)</option>
<option value="Islas Vírgenes (Reino Unido)">Islas Vírgenes (Reino Unido)</option>
<option value="Islas Wallis y Futuna">Islas Wallis y Futuna</option>
<option value="Israel">Israel</option>
<option value="Italia">Italia</option>
<option value="Jamaica">Jamaica</option>
<option value="Japón">Japón</option>
<option value="Jordania">Jordania</option>
<option value="Kazajistán">Kazajistán</option>
<option value="Kenia">Kenia</option>
<option value="Kirguizistán">Kirguizistán</option>
<option value="Kiribati">Kiribati</option>
<option value="Kuwait">Kuwait</option>
<option value="Laos">Laos</option>
<option value="Lesotho">Lesotho</option>
<option value="Letonia">Letonia</option>
<option value="Líbano">Líbano</option>
<option value="Liberia">Liberia</option>
<option value="Libia">Libia</option>
<option value="Liechtenstein">Liechtenstein</option>
<option value="Lituania">Lituania</option>
<option value="Luxemburgo">Luxemburgo</option>
<option value="Macedonia">Macedonia</option>
<option value="Madagascar">Madagascar</option>
<option value="Malasia">Malasia</option>
<option value="Malawi">Malawi</option>
<option value="Maldivas">Maldivas</option>
<option value="Malí">Malí</option>
<option value="Malta">Malta</option>
<option value="Marruecos">Marruecos</option>
<option value="Martinica">Martinica</option>
<option value="Mauricio">Mauricio</option>
<option value="Mauritania">Mauritania</option>
<option value="Mayotte">Mayotte</option>
<option value="México">México</option>
<option value="Micronesia">Micronesia</option>
<option value="Moldavia">Moldavia</option>
<option value="Mónaco">Mónaco</option>
<option value="Mongolia">Mongolia</option>
<option value="Montserrat">Montserrat</option>
<option value="Mozambique">Mozambique</option>
<option value="Namibia">Namibia</option>
<option value="Nauru">Nauru</option>
<option value="Nepal">Nepal</option>
<option value="Nicaragua">Nicaragua</option>
<option value="NÍger">NÍger</option>
<option value="Nigeria">Nigeria</option>
<option value="Niue">Niue</option>
<option value="Norfolk">Norfolk</option>
<option value="Noruega">Noruega</option>
<option value="Nueva Caledonia">Nueva Caledonia</option>
<option value="Nueva Zelanda">Nueva Zelanda</option>
<option value="Omán">Omán</option>
<option value="Países Bajos">Países Bajos</option>
<option value="Panamá">Panamá</option>
<option value="Papúa Nueva Guinea">Papúa Nueva Guinea</option>
<option value="Paquistán">Paquistán</option>
<option value="Paraguay">Paraguay</option>
<option value="Perú">Perú</option>
<option value="Pitcairn">Pitcairn</option>
<option value="Polinesia Francesa">Polinesia Francesa</option>
<option value="Polonia">Polonia</option>
<option value="Portugal">Portugal</option>
<option value="Puerto Rico">Puerto Rico</option>
<option value="Qatar">Qatar</option>
<option value="Reino Unido">Reino Unido</option>
<option value="República Centroafricana">República Centroafricana</option>
<option value="República Checa">República Checa</option>
<option value="República de Sudáfrica">República de Sudáfrica</option>
<option value="República Dominicana">República Dominicana</option>
<option value="República Eslovaca">República Eslovaca</option>
<option value="Reunión">Reunión</option>
<option value="Ruanda">Ruanda</option>
<option value="Rumania">Rumania</option>
<option value="Rusia">Rusia</option>
<option value="Sahara Occidental">Sahara Occidental</option>
<option value="Saint Kitts y Nevis">Saint Kitts y Nevis</option>
<option value="Samoa">Samoa</option>
<option value="Samoa Americana">Samoa Americana</option>
<option value="San Marino">San Marino</option>
<option value="San Vicente y Granadinas">San Vicente y Granadinas</option>
<option value="Santa Helena">Santa Helena</option>
<option value="Santa Lucía">Santa Lucía</option>
<option value="Santo Tomé y PrÍncipe">Santo Tomé y PrÍncipe</option>
<option value="Senegal">Senegal</option>
<option value="Seychelles">Seychelles</option>
<option value="Sierra Leona">Sierra Leona</option>
<option value="Singapur">Singapur</option>
<option value="Siria">Siria</option>
<option value="Somalia">Somalia</option>
<option value="Sri Lanka">Sri Lanka</option>
<option value="St. Pierre y Miquelon">St. Pierre y Miquelon</option>
<option value="Suazilandia">Suazilandia</option>
<option value="Sudán">Sudán</option>
<option value="Suecia">Suecia</option>
<option value="Suiza">Suiza</option>
<option value="Surinam">Surinam</option>
<option value="Tailandia">Tailandia</option>
<option value="Taiwán">Taiwán</option>
<option value="Tanzania">Tanzania</option>
<option value="Tayikistán">Tayikistán</option>
<option value="Territorios franceses del Sur">Territorios franceses del Sur</option>
<option value="Timor Oriental">Timor Oriental</option>
<option value="Togo">Togo</option>
<option value="Tonga">Tonga</option>
<option value="Trinidad y Tobago">Trinidad y Tobago</option>
<option value="Túnez">Túnez</option>
<option value="Turkmenistán">Turkmenistán</option>
<option value="Turquía">Turquía</option>
<option value="Tuvalu">Tuvalu</option>
<option value="Ucrania">Ucrania</option>
<option value="Uganda">Uganda</option>
<option value="Uruguay">Uruguay</option>
<option value="Uzbekistán">Uzbekistán</option>
<option value="Vanuatu">Vanuatu</option>
<option value="Venezuela">Venezuela</option>
<option value="Vietnam">Vietnam</option>
<option value="Yemen">Yemen</option>
<option value="Yugoslavia">Yugoslavia</option>
<option value="Zambia">Zambia</option>
<option value="Zimbabue">Zimbabue</option>
</select></div>
<div><input type="submit" name="registro" value="Registrarme"><input type="reset" value="Limpiar datos"></div>
</form>
</body>
</html>
<?php
include("mysql.php");
if(isset($_POST["registro"])) {
if($_POST['usuario'] == '' or $_POST['password'] == '' or $_POST['repassword'] == '' or $_POST['email'] == '' or $_POST['pais'] == '' or $_POST['nombre'] == '' or $_POST['apellido'] == '')
{
echo '<script>javascript:alert("Por favor llene todos los campos");</script>';
}else{
$sql = "SELECT * FROM usuarios";
$rec = mysql_query($sql);
$verificar_usuario = 0;
while($result = mysql_fetch_object($rec))
{
if($result->usuario == $_POST['usuario'])
{
$verificar_usuario = 1;
}
}
if($verificar_usuario == 0)
{
if($_POST['password'] == $_POST['repassword'])
{
$usuario = $_POST['usuario'];
$password = $_POST['password'];
$email = $_POST['email'];
$pais = $_POST['pais'];
$nombre = $_POST['nombre'];
$apellido = $_POST['apellido'];
$ip = $_SERVER['REMOTE_ADDR'];
$scl = "INSERT INTO usuarios (usuario,password,email,pais,ip,nombre,apellido) VALUES ('".$usuario."','".$password."','".$email."','".$pais."','".$ip."','".$nombre."','".$apellido."')";
mysql_query($scl);
echo '<script>javascript:alert("Registro exitoso!");</script>
<script language="JavaScript" type="text/javascript">
var pagina="index.php"
function redireccionar()
{
location.href=pagina
}
setTimeout ("redireccionar()", 10);
</script>
';
}
else
{
echo '<script>javascript:alert("Passwords no iguales");</script>';
}
}
else
{
echo '<script>javascript:alert("Usuario registrado anteriormente");</script>';
}
}
}
?>
y les dejo un regalito de estilo para el registro
*{
font-family: sans-serif;
font-size: 12px;
color: #798e94;
}
body{
width: 400px;
margin: auto;
}
.contacto{
border: 1px solid #CED5D7;
border-radius: 6px;
padding: 45px 45px 20px;
margin-top: 50px;
background-color: white;
box-shadow: 0px 5px 10px #B5C1C5, 0 0 0 10px #EEF5F7 inset;
}
.contacto label{
display: block;
font-weight: bold;
}
.contacto div{
margin-bottom: 15px;
}
.contacto input[type='text'], .contacto textarea{
padding: 7px 6px;
width: 294px;
border: 1px solid #CED5D7;
resize: none;
box-shadow:0 0 0 3px #EEF5F7;
margin: 5px 0;
}
.contacto input[type='text']:focus, .contacto textarea:focus{
outline: none;
box-shadow:0 0 0 3px #dde9ec;
}
.contacto input[type='submit']{
border: 1px solid #CED5D7;
box-shadow:0 0 0 3px #EEF5F7;
padding: 8px 16px;
border-radius: 20px;
font-weight: bold;
text-shadow: 1px 1px 0px white;
background: #e4f1f6;
background: -moz-linear-gradient(top, #e4f1f6 0%, #cfe6ef 100%);
background: -webkit-linear-gradient(top, #e4f1f6 0%,#cfe6ef 100%);
}
.contacto input[type='submit']:hover{
background: #edfcff;
background: -moz-linear-gradient(top, #edfcff 0%, #cfe6ef 100%);
background: -webkit-linear-gradient(top, #edfcff 0%,#cfe6ef 100%);
}
.contacto input[type='submit']:active{
background: #cfe6ef;
background: -moz-linear-gradient(top, #cfe6ef 0%, #edfcff 100%);
background: -webkit-linear-gradient(top, #cfe6ef 0%,#edfcff 100%);
}
.contacto input[type='password'], .contacto textarea{
padding: 7px 6px;
width: 294px;
border: 1px solid #CED5D7;
resize: none;
box-shadow:0 0 0 3px #EEF5F7;
margin: 5px 0;
}
.contacto input[type='password']:focus, .contacto textarea:focus{
outline: none;
box-shadow:0 0 0 3px #dde9ec;
}
.contacto select, .contacto textarea{
padding: 7px 6px;
width: 294px;
border: 1px solid #CED5D7;
resize: none;
box-shadow:0 0 0 3px #EEF5F7;
margin: 5px 0;
}
.contacto select:focus, .contacto textarea:focus{
outline: none;
box-shadow:0 0 0 3px #dde9ec;
}
.contacto input[type='reset']{
border: 1px solid #CED5D7;
box-shadow:0 0 0 3px #EEF5F7;
padding: 8px 16px;
border-radius: 20px;
font-weight: bold;
text-shadow: 1px 1px 0px white;
background: #e4f1f6;
background: -moz-linear-gradient(top, #e4f1f6 0%, #cfe6ef 100%);
background: -webkit-linear-gradient(top, #e4f1f6 0%,#cfe6ef 100%);
}
.contacto input[type='reset']:hover{
background: #edfcff;
background: -moz-linear-gradient(top, #edfcff 0%, #cfe6ef 100%);
background: -webkit-linear-gradient(top, #edfcff 0%,#cfe6ef 100%);
}
.contacto input[type='reset']:active{
background: #cfe6ef;
background: -moz-linear-gradient(top, #cfe6ef 0%, #edfcff 100%);
background: -webkit-linear-gradient(top, #cfe6ef 0%,#edfcff 100%);
}
Y PRUEBEN

INGRESAN TODOS LOS DATOS, ETC...
CONSIGAN UNA IMAGEN PARA EL USUARIO QUE RECIÉN ENTRA y llamenla sin-avatar.jpg
Pueden usar todos los datos para mostrar al principio cuando logean, ejemplo $_SESSION["email"] o pais..
SALUDOS CORDIALES!

