Noticias con php parte III

#codigo{background:#000;color:#fff;}

Sistema de noticias con php y mysql

Hola amigos como están, espero que bién en esta ocasión vamos a seguir con la parte 3 de nuestro tutorial de noticias con php, en esta tercera parte vamos a terminar nuestros documentos HTML para entrarnos ya en lo que es la programación con php.

A continuación les pongo los códigos de los documentos HTML que faltan que como mencione en la primera entrada están totalmente vacios ya que los datos que vamos a mostrar lo vamos a extraer desde la base de datos pero esto será más adelante.

No voy a explicar el código porque creo que está más que claro y si no es así me lo pueden dejar saber con un comentario.

edita-noticias.php 

<!DOCTYPE html>
<html lang=”es”>
<head>
    <meta charset=”utf-8″ />
    <title>Insertar Nuevas Noticias </title>
    <link rel=”stylesheet” href=”style/stylo.css” type=”text/css” />
</head>
<body>
<header>
    <div id=’titulo’><h1>www.comocrearmiweb.com</h1></div>
    <div id=’sesion’><a href=”entrar-user.php”>Inisiar Sesion</a> | <a href=”login.php”>Registrarme</a></div>
</header>
<nav>
    <a href=”index.php” title=”Ir a la pagina principal” id=”link”><menu>Home</menu></a>
    <a href=”index.php”><menu>Home</menu></a>
    <a href=”http://www.facebook.com”><menu>Facebook</menu></a>
    <a href=”http://www.twitter.com”><menu>Twitter</menu></a>
</nav>
<section id=’cuerpo’>
    <section id=’contenido’>
        <div id=”titulo”>
        <h1>Bienvenidos al sistema de publicaci&oacute;n de noticias</h1>        </div>  <br /><br />
        <div id=”formulario”><br />
        <form action=”procesar-noticias.php” method=”post”>
        <b>Titulo de la noticia</b><br />
        <input type=”text” name=”titulo” id=”form1″ /><br />
        <b>Descripcion de la noticia</b><br />
        <textarea cols=”50″ rows=”3″ name=”descripcion” id=”texto1″></textarea><br />
        <b>Desarrollo de la noticia</b><br />
        <textarea cols=”70″ rows=”10″ name=”noticia” id=”texto”></textarea><br /><br />
        <input type=”submit” value=”PUBLICAR” id=”submit” />
        <input type=”reset” value=”BORRAR TODO” id=”submit”/>
        </form>
        </div>
    </section>
    <aside>
<div id=’publicaciones’><h2>Administracion de noticias </h2></div>
<div><a href=”lista-noticias.php” >Borrar Noticias</a></div>
<div><a href=”edita-noticias.php”>Editar Noticias</a></div>
<div><a href=”lista-noticias.php”>Lista de Noticias</a></div>
</aside>
</section>
<footer>
copiry@2012 | <a href=”http://www.comocrearmiweb.com”>comocrearmiweb.com</a> | Diseñado por Eriberto Peguero
</footer>
</body>
</html>

entrar-user.php

<!DOCTYPE html>
<html lang=”es”>
<head>
    <meta charset=”utf-8″ />
    <title>Entrar al sitio web</title>
    <style>
    *{margin:0px;padding:0px;}  
    section#contenido{
        position:fixed;
        width:300px;
        height:200px;
        top:180px;
        padding:10px;
        margin:0px;
        border-radius:5px;
        left:350px;
        color:#03C;
        border:solid 1px #DEDEDE;
        background:-moz-linear-gradient(#f0f0f0 0%,#f9f9f9 100%);      
        }
        a{text-decoration:none;background:none;}
        a:hover{color:orange;}
        div{background:none;border-bottom:solid 1px #DEDEDE;font-size:18px;color:#06F;padding-bottom:10px;}
        b{background:none;}
        #input1{width:150px;height:25px;border:solid 1px #DEDEDE;border-radius:5px;}
        #ENTRAR{width:100px;background:#DEDEDE;border:solid 1px #DEDEDE;margin-top:5px;height:25px;color:red;border-radius:5px;}
    </style>
</head>
<body>
<section id=”contenido”>
<div>Bienvenidos a comocrearmiweb.com</div><br />
<form action=”entrar.php” method=”post”>
<b>Correo:</b><br /><input type=”email” name=”correo” id=’input1’/><br />
<b>Password:</b><br /><input type=”password” name=”pass” id=’input1’/><br />
<input type=”submit” value=”ENTRAR” id=”ENTRAR”/><br /></form>
<a href=”#”>Olvide mis datos</a> || <a href=”login.php”>Registrarme</a>
</section>
</body>
</html>

lista-noticias.php

<!DOCTYPE html>
<html lang=”es”>
<head>
    <meta charset=”utf-8″ />
    <title>Noticiero con php y mysql</title>
    <link rel=”stylesheet” href=”style/stylo.css” type=”text/css” />
</head>
<body>
<header>
    <div id=’titulo’><h1>www.comocrearmiweb.com</h1></div>
    <div id=’sesion’><a href=”entrar-user.php”>Inisiar Sesion</a> | <a href=”login.php”>Registrarme</a></div>
</header>
<nav>
    <a href=”index.php”><menu>Home</menu></a>
    <a href=”http://www.facebook.com”><menu>Facebook</menu></a>
    <a href=”http://www.twitter.com”><menu>Twitter</menu></a>
</nav>
<section id=’cuerpo’>
    <section id=’contenido’>
        <article id=’titulo’><h2>Lista de noticias ordenadas por fecha de publiaccion</h2></article>
        <section id=’lis-noticias’><b>Paginacion de noticias</b><div><a href=”edita-noticias.php”>Editar</a> | <a href=”borrar.php”>Borrar </a></section>
        <section id=’lis-noticias’><b>Paginacion de noticias</b></section>
        <section id=’lis-noticias’><b>Paginacion de noticias</b></section>
        <section id=’lis-noticias’><b>Paginacion de noticias</b></section>
        </article>
    </section>
    <aside>
<div id=’publicaciones’><h2>Ultimas publicaciones </h2></div>
Noticias mas resientes
</aside>
</section>
<footer>
copiry@2012 | <a href=”http://www.comocrearmiweb.com”>comocrearmiweb.com</a> | Diseñado por Eriberto Peguero
</footer>
</body>
</html>

login.php

<!DOCTYPE html>
<html lang=”es”>
<head>
    <meta charset=”utf-8″ />
    <title>Noticiero con php y mysql</title>
    <link rel=”stylesheet” href=”style/stylo.css” type=”text/css” />
</head>
<body>
<header>
    <div id=’titulo’><h1>www.comocrearmiweb.com</h1></div>
    <div id=’sesion’><a href=”entrar-user.php”>Inisiar Sesion</a> O <a href=”login.php”>Registrarme</a></div>
</header>
<nav>
    <a href=”index.php”><menu>Home</menu></a>
    <a href=”http://www.facebook.com”><menu>Facebook</menu></a>
    <a href=”http://www.twitter.com”><menu>Twitter</menu></a>
</nav>
<section id=’cuerpo’>
    <section id=’contenido’>
        <article id=’titulo’><h2>Bienvenidos a como crear mi web</h2></article>    
        <article id=’login’>
         <font size=”+1″ color=”#f00″>Eres usuario registrado</font><br />
        <form action=”entrar.php” method=”post” >
        <b>Correo:</b><br />
           <input type=”email” name=”correo” id=”input1″ /><br />
        <b>Password:</b><br />
        <input type=”password” name=”pass” id=”input1″ /><br />
        <input type=”submit” value=”ENTRAR” id=”input2″ />
        </form>
        </article><br />
        <article id=’registrar’>
        <p>
        <font size=”+2″ color=”#FF6600″>Quiero Registrarme</font><br />
        <form action=”registrar.php” method=”post” >
        <b>Nombre:</b><br />
        <input type=”text” name=”nombre” id=”input3″ /><br />
        <b>Apellido:</b><br />
        <input type=”text” name=”apellido” id=”input3″ /><br />
        <b>Correo:</b><br />
           <input type=”email” name=”correo” id=”input3″ /><br />
                <b>Password:</b><br />
        <input type=”password” name=”pass” id=”input3″ /><br />
        <b>Repetir Password:</b><br />
        <input type=”password” name=”rpass” id=”input3″ /><br />
        <input type=”submit” value=”Registrar” id=”input2″ /><br />
        </form>
        </article>
    </section>
    <aside>
<div id=’publicaciones’><h2>Ultimas publicaciones </h2></div>
Noticias mas resientes
</aside>
</section>
<footer>
copiry@2012 | <a href=”http://www.comocrearmiweb.com”>comocrearmiweb.com</a> | Diseñado por Eriberto Peguero
</footer>
</body>
</html>

Agrego la hoja de estilo css que estamos creando esta es nuestra hoja de estilo principal asi que no piensen que es otra diferente.

style.css

*{
margin:0px;
padding:0px;
}
h1{
color:blue;
}
h2{font-size:20px;}
body{
background:#f9f9f9;
}
header{
max-width:100%;
height:75px;
padding-top:10px;
font-size:18px;
background:-moz-linear-gradient(#f1f1f1 0%, #f9f9f9 100%);;
}
a{ text-decoration:none;}
a:hover{color:orange;}
a:active{color:red;}
a:visited{color:blue;}
#sesion{
float:right;
margin-top:30px;
margin-right:10px;
color:#06C;
font-size:14;
}
nav{
background:#000;
height:30px;
max-width:100%;
color:#FFf;
padding-left:10px;
box-shadow:0 0 5px #f2f2f2;
}
menu{
float:left;
margin-left:10px;
height:25px;
color:#FFF;
width:100px;
text-align:center;
padding-top:5px;
}
menu:hover{
background:#333;
}
#titulo{
padding:5px;
margin:10px;
float:left;
}
b{color:#03F;}

section#cuerpo{
max-width:100%;
height:500px;
background:#f9f9f9;
padding:5px;
}
section#contenido{
display:inline-block;
border:solid 1px #DEDEDE;
vertical-align:top;
max-width:700px;
background:#FFF;
}
article#foto{
width:45%;
float:left;
margin-right:10px;
border-bottom:solid 1px #DEDEDE;
margin-bottom:5px;
margin-left:10px;
}
#login{text-align:justify;
padding:20px;
float:left;
border-right:solid 1px #DEDEDE;
}
#registrar{
text-align:justify;
padding:20px;
float:left;
margin-right:20px;
margin-left:20px;
}
#input1{
    width:150px;
    height:20px;
    border:solid 1px #DEDEDE;
    }
#input2{
    width:100px;
    height:25px;
    border:solid 1px #DEDEDE;
    background:#DEDEDE;
    margin-top:10px;
    color:#03F;
    }
#input3{
    width:200px;
    height:30px;
    border:solid 1px #DEDEDE;
    }
article#titulo{
border-bottom:solid 1px #DEDEDE;
margin-bottom:10px;
width:670px;
}
article#noticias{
text-align:justify;
padding:10px;
}
aside{
background:#fff;
width:260px;
height:auto;
float:right;
margin-right:10px;
border:solid 1px #DEDEDE;
padding:10px;
}
#publicaciones{
text-align:center;
padding:5px;
border-bottom:solid 1px #DEDEDE;
}
#paginacion{
width:700px;
text-align:center;
color:#06F;
margin-top:50px;
}
footer{
width:100%;
height:30px;
text-align:center;
background:#f0f0f0;
padding-top:10px;
color:blue;
font-size:12px;
border-top:solid 1px #DEDEDE;
}
 #link{color:#FFF;}
#formulario{
    width:685px;
    text-align:left;
    padding-left:10px;
    border-top:solid 1px #DEDEDE;
    margin-bottom:10px;
    color:orange;
    }
#form1{
    width:430px;
    color:#000;
    font-size:24px;
    height:30px;
    border:solid 1px #DEDEDE;
    }
#form1:focus{border:solid 1px #0F3;border-radius:3px;}
#texto1{
border:solid 1px #DEDEDE;
padding:5px;
font-size:18px;
color:#03F;

}
#texto1:focus{
border:solid 1px #0F3;
border-radius:3px;
    }
#texto{
border:solid 1px #DEDEDE;
padding:5px;
 
}
#texto:focus{
border:solid 1px #0F3;
border-radius:3px;
    }
#submit{
    width:150px;
    height:30px;
    background:#f0f0f0;
    border:0px;
    border-radius:3px;
    color:blue;
    }
#submit:hover{
    background:#DEDEDE;
    border:solid 1px #DEDEDE;
    color:blue;
    }
#lis-noticias{
    padding:10px;
    border-bottom:solid 1px #DEDEDE;
    }

Bueno con esto ya terminamos nuestra tercera parte de nuestro tutorial de noticias con php en la cuarta parte vamos a crear el sistema de usuario y vamos a crear la aplicación para enviar las noticias a la base de datos nos vemos en la próxima.

Comments

Deja un comentario

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