Sistema en php y mysql

#codigo{
background:#999;
color:#FFF;
border:solid 1px #DEDEDE;
border-radius:5px;
padding:5px;

}

Sistema en php y mysql

Hola amigos como están en esta ocasión vamos a terminar nuestro sistema en php y mysql maquetado en HTML5 CSS3 para ellos vamos a colocar todo el código de nuestra index.php y donde solo vamos a explicar el código php porque lo otro ya lo vimos antes, primero les pongo el código de la página completa index.php el cual ya lo pueden copiar para que vallamos probando nuestra aplicación.

index.php

co<?php
 session_start();
error_reporting (E_ALL ^ E_NOTICE);
 ?>
<!DOCTYPE html>
<html lang=”es”>
<head>
    <meta charset=”utf-8″ />
        <title>sistema en php y mysql </title>
        <link rel=”stylesheet” href=”style.css” type=”text/css” />
    </head>
    <body>
    <header>
       <div id=”titulo”> <h1>Sistema en php y mysql</h1> </div>
            <div id=”entrar”>
              <form action=”entrar_user.php” method=”post”>
             <label>Correo:</label> <input placeholder=”Correo electronico” type=”email” name=”correo” id=”input1″/>
            <label>Password:</label> <input placeholder=”Contrase&ntilde;a” type=”password” name=”pass” id=”input1″/>
            <input type=”submit” value=”ENTRAR” id=”input-entrar” />
            </form>
        </div>
        </header>
    <section><div id=”error1″><?php
    if($_GET[‘error’]==’no’){
        echo ‘Gracias por registrarte ‘;
            } ?>
    </div>
        <aside id=”registrar”>
        <div id=”h3″><form action=”registrar.php” method=”post”>
            <h3>Registrarme en esta web</h3></div>
            <div>Nombre: <?php if($_GET[‘error’]==’name’){echo ‘<font color=”#FF0000″>Escribe un nombre</font>’;}?></div>
            <div><input placeholder=”Tu nombre” type=”text” name=”nombre” id=”input2″/></div>
            <div>Apellido: <?php if($_GET[‘error’]==’apelle’){echo ‘<font color=”#FF0000″>Escribe un apellido</font>’;}?> </div>
            <div><input placeholder=”Tu apellido” type=”text” name=”apellido” id=”input2″/></div>
            <div>Correo: <?php if($_GET[‘error’]==’mail’){echo ‘<font color=”#FF0000″>Escribe un correo</font>’;}?></div>
            <div><input placeholder=”Correo electronico” type=”email” name=”mail” id=”input2″ /></div>
            <div>Password: <?php if($_GET[‘error’]==’pass’){echo ‘<font color=”#FF0000″>Escribe un password</font>’;}?> </div>
            <div><input placeholder=”Contrase&ntilde;a” type=”password” name=”pass” id=”input2″ /></div>
            <div>Repetir Password: <?php if($_GET[‘error’]==’rpass’){echo ‘<font color=”#FF0000″>Repite el password</font>’;}?> <?php if($_GET[‘error’]==’nocoinciden’){echo ‘<font color=”#FF0000″>Los password no coinciden</font>’;}?></div>
<div><input placeholder=”Repetir contrase&ntilde;a” type=”password” name=”rpass” id=”input2″ /></div>
            <div id=”registrarme”><input type=”submit” value=”REGISTRAR” id=”input-entrar” /></div>  </form>
            </aside>
    </section>
    <footer>
Copyright @2012
</footer>
</body>
</html> digo

Sistema en php y mysql

En esta parte de nuestro codigo HTML5 que vimos en lo que fue la parte de maquetacion de nuestra sistema en php y mysql en la clase pasada maquetando el index.php vimos como construir nuestra pagina pero lo que no vimos fue el codigo php que paso a explicar detenidamente en esta parte ojo solo el codigo php porque lo otro ya lo explicamos en la clase pasada.

Primero en nuestro index.ph vemos que aparece este trozo de codigo antes del DOCTYPE


<?php
session_start();
error_reporting (E_ALL ^ E_NOTICE);
?>

lo primero que hacemos es indicarle al navegador que hay una session en el servidor que tiene que responder a ella en caso de que sea false o true esto lo hacemos con session_start();b> ahora bien como vamos trabajar con validacion de formulario y queremos devolver una variable por la URL entonces tenemos que crear variables que no estaran definidas en nuestro index.php, entonces esto nos probocara noticias en php. Para solucionar eto he agregado la siguiente linea de codigo error_reporting (E_ALL ^ E_NOTICE); Con esto le indico a php que no presente ninguna noticia.

Otros codigos php que vemos que agregamos nuevos a nuestro index.php es el siguiente.


<?php if($_GET[‘error’]==’name’){echo ‘Escribe un nombre’;}?>

Lo que hacemos en esta linea de codigo php es indicarle a nuestro documento index.php que si la variable que se nos envia por la url existe y tiene el nombre que le hemos establecido es porque ha ocurrido un error, y entonces nos indica en que lugar es que esta el error con un mensaje con letras rojas.

Por ejemplo si la variable que nos devuelve la URL es igual a name en este caso nos presentaria el siguiente error.

Escribe un nombre

Osea en esta parte se nos esta indicando que el error esta en el nombre y asi lo hacemos sucesivamente con los demas campos.

Ahora vamos haber las modificaciones que le hemos hecho al home.php donde aqui tambien solo hemos agregado codigo php si no viste como creamos el home.php entonces te invito haber esta parte creando el home.php bueno aqui el codigo listo para copiar.

home.php

<?php
session_start();
error_reporting(E_ALL ^ E_NOTICE);
?>
<!DOCTYPE html>
<html lang=”es”>
<head>
    <meta charset=”utf-8″ />
        <title>Hola <?php echo $_SESSION[‘nombre’].” “.$_SESSION[‘apelle’];?>  </title>
        <link rel=”stylesheet” href=”stylehome.css” />
    </head>
<body>
    <header>
         <div id=”titulo”> <h1>Bienvenidos a mi sitio web</h1> </div>
         <div id=”usuario”> <?php echo $_SESSION[‘nombre’].” “.$_SESSION[‘apelle’];?> || Mi cuenta || <a href=”salir.php”>Serrar Sesion</a></div>
    </header>
    <section id=”cuerpo”>
        <section id=”contenido”>
        <fieldset>
        <legend><div>
        <h3>Deja tu comentarios</h3>
        </div></legend>
        <form action=”config.php” method=”post” >
        <textarea placeholder=”Escribe tu comentario…” rows=”4″ cols=”50″ name=”texto”></textarea>
              <div id=”enviar”>
            <input type=”submit” value=”PUBLICAR” id=”publicar” />
            <input type=”reset” value=”BORRAR TODO” id=”publicar”/>
            </div>
        </form>
        </fieldset>
        </section>
        <article>
        <div id=”mensaje”>
        <?php
        if($_GET){
         if($_GET[‘error’]==’0comenta’){
            echo ‘<div id=”mensaje”>Disculpa pero tienes que enviar un comentario!</div>’;
            }else{
                if($_GET[‘error’]==’enviado’){
                    echo ‘Gracias por enviar tu comentario’;
                    }else{
                    echo ‘Deja tu comentario’;
                                        }
                    }
                }else{
            echo ‘Deja tu comentario’;
            }
         ?></div><br />
         <div id=””>
            <?php
        require_once(‘conexion.php’);
        $db_selecion = mysql_select_db(‘aplicacion’,$conexion) or die(mysql_error());
        //Si se selecciono la base de datos correctamente hacemo una consurta
        //entramos en usuario
        $registro=mysql_query(“select * from comentario”, $conexion);
        while($row=mysql_fetch_assoc($registro)){
        echo ‘<a href=”#”>
        <div id=”comentario”>’;
        echo ‘<div id=”nombre”>’;
        echo $row[‘nombre’].” “.$row[‘apelle’].'<font color=”#333333″ size=”-2″>’.$row[‘fecha’].'</font>’;
        echo ‘</div>’;
        echo $row[‘texto’];echo ‘<br />’;
        echo ‘</div>’;
        echo ‘</a>’;
        echo ‘<br />’;
        }mysql_free_result($registro);
        ?>
         </div>
        </article>
    </section>
    <footer>
    Sitio web creado en www.comocrearmiweb.com
    </footer>
</body>
</html>

En esta parte al igual que el index.php controlamos a los usuarios que no esten autenticados para que no puedan acceder a nuestra pagina de comentarios sin antes logearse y tambien controlarmos las noticias que puede producir php por varibles no definidas


<?php
session_start();
error_reporting(E_ALL ^ E_NOTICE);
?>

Ahora bien en esta parte cabe destacar que hemos agregado en la etiqueta <title> el siguiente codigo php

<?php echo $_SESSION[‘nombre’].” “.$_SESSION[‘apelle’];?>

y si no sabes mucho de php tal vez te preguntaras y para que ese codigo en el title, bueno ese codigo es el codigo que va a contener la session del nombre que esta activo en ese momento, osea si tu entras y tu nombre es Erick Rodriguez ese codigo lo que hace es recuperar de la base de datos el nombre y el apellido del usuario activo en ese momento y ponerlo nos lo presenta en la barra de titulo de nuestra web en este caso seria.

Bienvenido a mi sitio web Erick Rodriguez

Luego vemos el siguiente gropo de codigo


<?php
if($_GET){
if($_GET[‘error’]==’0comenta’){
echo ‘<div id=”mensaje”>Disculpa pero tienes que enviar un comentario!</div>’;
}else{
if($_GET[‘error’]==’enviado’){
echo ‘Gracias por enviar tu comentario’;
}else{
echo ‘Deja tu comentario’;
}
}
}else{
echo ‘Deja tu comentario’;
}
?>

En esta parte recuperamos de la url la variable que nos enviara nuestro archivo config.php el cual veremos mas adelante, aqui lo que le indicamos a nuestro home.php es que si llega un usario se compruebe si ha enviado algun comentario en caso de que no hacemos que aparesca por pantalla el mensaje Deja tu comentario pero en caso de que el usuario envie un mensaje se comprobara si esta vacio el comentario si es asi mandara el siguiente mensaje Disculpa pero tienes que enviar un comentario! y en caso de que si haya enviado un mensaje entonces les damos las gracias a nuestro visitante con el siguiente mansaje Gracias por enviar tu comentario .

Luego solo recuperamos los datos que han sido enviados a la base de datos con el siguiente codigo


<?php
        require_once(‘conexion.php’);
        $db_selecion = mysql_select_db(‘aplicacion’,$conexion) or die(mysql_error());
        //Si se selecciono la base de datos correctamente hacemo una consurta
        //entramos en usuario
        $registro=mysql_query(“select * from comentario”, $conexion);        
        while($row=mysql_fetch_assoc($registro)){
        echo ‘<a href=”#”>
        <div id=”comentario”>’;
        echo ‘<div id=”nombre”>’;
        echo $row[‘nombre’].” “.$row[‘apelle’].'<font color=”#333333″ size=”-2″>’.$row[‘fecha’].'</font>’;
        echo ‘</div>’;
        echo $row[‘texto’];echo ‘<br />’;
        echo ‘</div>’;
        echo ‘</a>’;
        echo ‘<br />’;      
        }mysql_free_result($registro);
        ?>

En esta parte basicamente lo primero que hacemos es que incluimos un archivo de conexion.php el cual conectara directamente a nuestra base de datos el cual vamos a explicar mas adelante y si quieres aprender mas de este tema te aconsejo nuestro tutorial de Programar con php.

Ahora les pongo los codigos php para validar nuestros formumlario tanto del index.php como del home.php

registrar.php

<?php
session_start();
include(‘conexion.php’);

$nom=$_REQUEST[‘nombre’];
$apelle=$_REQUEST[‘apellido’];

$mail=$_REQUEST[‘mail’];
$pas=$_REQUEST[‘pass’];
$rpas=$_REQUEST[‘rpass’];

if($nom==”){
header(‘Location: index.php?error=name’);

}else{
if($apelle==”){
header(‘Location: index.php?error=apelle’);

}else{
if($mail==”){
header(‘Location: index.php?error=mail’);
}else{
if($pas==”){
header(‘Location: index.php?error=pass’);
}else{
if($rpas==”){
header(‘Location: index.php?error=rpass’);
}else{
if($pas==$rpas){
//si todo salio bien limpiamos los datos que nos van a enviar los usuarios a la base de datos
$nombre=strip_tags($nom);
$apellido=strip_tags($apelle);
$email=strip_tags($mail);
$pass=strip_tags($rpas);
mysql_select_db($db, $conexion);
$consurta=”INSERT INTO user (nombre,apellido,correo,clave) values
(‘$nombre’,’$apellido’,’$email’,’$pass’)”;

// ahora hacemos la consulta
$registramos=mysql_query($consurta,$conexion);

if($registramos){
header(‘Location: index.php?error=si’);

}
}else{
header(‘Location: index.php?error=nocoinciden’);
}
}
}
}
}
}
?>

config.php

<?php
//incluimos el archivo de conexion
include(‘conexion.php’);
//recumperamos los datos que ha enviado el usuario
$comentario=$_POST[‘texto’];
//Agregamos la session que esta activa con el nombre y el apellido
$nombre=$_SESSION[‘nombre’].” “.$_SESSION[‘apelle’];
//si no se ha enviado nada mandamos un error que no hay datos en el forumlario
if($comentario==”) {
header(‘Location: home.php?error=0comenta’);
}
else
{
//si existe comentarios lo limpiamos de etiquetas html mal intensionadas
$coment=strip_tags($comentario);
//incluimos la fecha
$dia=date(‘d’);
$mes=date(‘m’);
$ano=date(‘Y’);
$hora=date(‘H:i s’);
$fecha=”Enviado el “.$dia.’/’.$mes.’ /’.$ano.’ a las ‘.$hora;
//conectamos a la base de datos
mysql_select_db($db,$conexion);
//creamos la consulta
$query=”INSERT into comentario(nombre,texto,fecha) VALUES (‘$nombre’,’$comentario’,’$fecha’)”;
//ejecutamos la consulta
$datos=mysql_query($query,$conexion);
//si todo salio bien enviamo un mensaje de que fue correcta la consurta
if($datos)
{
header(‘Location: home.php?error=enviado’);
}
}
?>

conexion.php

<?php
include(‘session.php’);
$server=”localhost”; //el nombre de nuestro servidor en mi caso es localhost
$usuario=”root”; // usuario de la base de datos en nuestro caso root
$clave=””; // clave de la base de datos en este caso no tenemos
$db=”aplicacion”; // nombre de la base de datos en este caso aplicacion
$conexion=mysql_pconnect($server,$usuario,$clave);
if(!$conexion){
echo “Error al establecer la conexion”; // si algo sale mal mandamos este error
}
?>

entrar_user.php

<?php
//$volver=header(‘Location: index.php?error=no’);
error_reporting(E_ALL ^ E_NOTICE);
require_once(‘conexion.php’);
if($_POST){
$mail=$_REQUEST[‘correo’];
$pass=$_REQUEST[‘pass’];
$db_selecion = mysql_select_db(‘aplicacion’,$conexion) or die(mysql_error());
//Si se selecciono la base de datos correctamente hacemo una consurta
//entramos en usuario
$query=(“select id_usuario,nombre,apellido,correo,clave from usuario where correo=’$mail’ and clave=’$pass'”);
$registro=mysql_query($query,$conexion);
if(!$registro){
header(‘Location: index.php?error=no’);
}
//si va todo bien recuperamos los datos en variables de session
if($row=mysql_fetch_array($registro)){
$_SESSION[‘nombre’]= $row[‘nombre’];
$_SESSION[‘apelle’]=$row[‘apellido’];
$_SESSION[‘mail’]= $row[‘correo’];

$_SESSION[‘password’]=$row[‘clave’];
$_SESSION[‘id’] = $row[‘id_ususario’];
$volver=header(‘Location: home.php’);
echo “Graicas por registrarte”;
echo $_SESSION[‘nombre’];
}
}
?>

session.php

<?php
session_start();
if($_SESSION){
}else{
header(‘Location: index.php’);
}
?>

salir.php

<?php
session_start();
session_unset();
session_destroy();
header(‘Location: index.php’);
?>

Tambien agrego el codigo de las tablas que tenemos que crear para que nuestro formulario funciona correctamente aunque se puede modificar por los datos que ustedes quieran pero esto llevaria a una tarea mas ardua ya que tendrian que modificar el codigo completo, pero para los que ya entienden un poco php seria bueno que probaran modificandolo.

Para insertar este codigo solo tenemos que irnos a nuestra base de datos y hacer la consulta SQL y listo se crearan 2 tablas la tabla usuario y la tabla comentario que son las que necesitaremos para este tutorial.

Codigo MySQL

CREATE TABLE IF NOT EXISTS `comentario` (
`id_comentario` int(11) NOT NULL AUTO_INCREMENT,
`nombre` varchar(50) NOT NULL,
`texto` text NOT NULL,
`fecha` varchar(50) NOT NULL,
PRIMARY KEY (`id_comentario`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ;

CREATE TABLE IF NOT EXISTS `usuario` (
`id_usuario` int(11) NOT NULL AUTO_INCREMENT,
`nombre` varchar(50) NOT NULL,
`apellido` varchar(50) NOT NULL,
`correo` varchar(50) NOT NULL,
`clave` varchar(20) NOT NULL,
PRIMARY KEY (`id_usuario`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ;

Por ultimo ponemos las dos hojas de estilos que creamos primero la del inde.php que es style.css

style.css

*{
margin:0px;
padding:0px;
}
#error1{
text-align:right;
float:right;
color:red;
font-size:14px;
margin-right:30px;
height:10px;
width:100%;
}

header{
background:#F9F9F9;
margin:0em;
min-height:70px;
border-bottom:solid 1px #F1F1F1;
max-width:100%;
text-align:right;
}
#h3{
border-bottom:solid 1px #F1F1F1;
text-align:center;
color:#66F;
padding-bottom:10px;
}
#registrar{
background:#F9F9F9;
border-radius:5px;
border:solid 1px #f1f1f1;
color:#66F;
margin-top:40px;
margin-right:20px;
padding:20px;
padding-left:50px;
float:right;
width:300px;
background: -moz-linear-gradient(top, #F8F8F8 0%, #FFF 0%, #DADADA 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#DADADA), color-stop(0%,#FFF), color-stop(100%,#055a8f));
}
#registrarme{
margin-top:10px;
}
#input2{
width:250px;
height:30px;
border:solid 1px #F1F1F1;
border-radius:3px;
}
#input2:focus{
border:solid 1px #0CF;
box-shadow:0 0 10px #0CC;
}
#titulo{
color:#F90;
font-size:12px;
max-width:500px;
margin:20px;
float:left;
min-height:2em;
}
#entrar{
color:blue;
background:;
margin-top:20px;
max-width:500px;
float:right;
}
#input1{
width:130px;
border-radius:3px;
height:25px;
border:solid 1px #0CF;
}
#input1:focus{
box-shadow:0 0 5px #0CF;
border:solid 1px #0CF;
}
#input-entrar{
width:100px;
color:blue;
border-radius:3px;
margin-right:10px;
height:25px;
border:solid 1px #F90;
}
#input-entrar:hover{
background:#F90;
border:solid 1px #0CF;
}

footer{
border-top:solid 1px #f1f1f1;
position:fixed;
bottom:0px;
width:100%;
height:100px;
font-size:12px;
text-align:center;
color:blue;
background: #DADADA; /* Old browsers */
background: -moz-linear-gradient(top, #F8F8F8 0%, #FFF 0%, #DADADA 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#DADADA), color-stop(0%,#FFF), color-stop(100%,#055a8f));
}

Ahora el codigo css3 para nuestra pagina home.php

stylehome.css
< div id=”codigo”>
*{
margin:0px;
padding:0px;
}
header{
background:#F9F9F9;
margin:0em;
min-height:70px;
border-bottom:solid 1px #F1F1F1;
max-width:100%;
text-align:right;
}
#titulo{
color:#F90;
font-size:12px;
max-width:500px;
margin:20px;
float:left;
min-height:2em;
}
#usuario{
color:blue;
text-align:right;
padding-top:20px;
margin-right:20px;
}
#cuerpo{
width:100%;
margin-top:20px;
border-top:solid 1px #F1F1F1;
border-bottom:solid 1px #F1F1F1;
}
#contenido{
border:solid 1px #F1F1F1;
max-width:600px;
margin:20px;
min-height:100px;
padding:10px;
}
fieldset{
padding:20px;
border:solid 1px #F90;
}
textarea:focus{
border:solid 1px #3CF;
-webkit-border:solid 1px #3CF;
}
#enviar{
width:350px;
margin:10px;
}
#publicar{
background:#F9F9F9;
width:120px;
color:blue;
height:25px;
border:solid 1px #f1f1f1;
}
#publicar:hover{
background:#F1F1F1;
border:solid 1px #f9f9f9;
}
article{
border:solid 1px #F1F1F1;
background:#fff;
max-width:600px;
margin:20px;
min-height:10px;
padding:10px;
}
#comentario{
background:-moz-linear-gradient(#F6F6F6 0%,#DEDEDE 100%);
background:-o-linear-gradient(#F6F6F6 0%,#DEDEDE 100%);
background:-ms-linear-gradient(#F6F6F6 0%,#DEDEDE 100%);
background:-webkit-linear-gradient(#F6F6F6 0%,#DEDEDE 100%);
background:gradient(#F6F6F6 0%,#DEDEDE 100%);
margin:0px;
color:#09C;
padding:0px 5px 5px 5px;
text-align:justify;
border-radius:5px;
border:solid 1px #DEDEDE;

}
#comentario:hover{
color:#999;
background:-moz-linear-gradient(#F6F6F6 0%,#DADADA 100%);
}
a{
text-decoration:none;
}
#nombre{
color:#06C;
border-bottom:solid 1px #DEDEDE;
width:100%;
margin-bottom:10px;

}
#nombre:hover{
color:#FC0;
}
#mensaje{
color:red;
}
footer{
text-align:center;
color:#666;
width:100%;
font-size:12px;
min-height:50px;
border-top:solid 1px #dadada;
background:#F7F7F7;

bottom:0px;
}
#fecha{
text-align:right;
margin-right:10px;
font-size:12px;
color:blue;
}

Bueno si copiaste todo el script correctamente y les posiste los nombres que te indique todo estara funcionando sin problema 100% funcionando si no es asi dejamelo sabel y te ayudo aver que salio mal en mi caso esta funcionando de maravilla.

NOTA: Solo se van a guardar los archivos que estan sombreado de negro

En caso de algun problema con los archivos aqui lo pueden descargar systema php y mysql

Si el tutorial te parecio interesante dale a +1 o dejanos tu comentarios…/div>

Comments

  1. By Anonymous

  2. By Anonymous

Deja un comentario

Tu dirección de correo electrónico no será publicada.