Noticias con php parte II

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

Noticias con php

Hola amigos aqui en como crear mi web seguimos con nuestro sistema de noticias con php y mysql y en esta parte vamos a crear el formulario desde el cual vamos a insertar las noticias, para crear este formulario vamos a coger el mismo documento index.php que creamos al principio y lo vamos a copiar y ponerle de nombre enviar-noticias.php.

Lo que vamos hacer en este nuevo documento es cambiar algunas etiquetas HTML para adecuar el espacio para nuestro formulario. En este caso yo quite la parte donde iban las noticias del index.php.

Aquí agrego el código con los cambios. enviar-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’>Inisiar Sesion | Registrarme</div>  
</header>
<nav>
    <a href=”index.php” title=”Ir a la pagina principal” id=”link”><menu>Home</menu></a>
    <menu>Noticias</menu>
    <menu>Facebook</menu>
    <menu>Twitter</menu>
</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>Borrar Noticias</div>
<div>Editar Noticias</div>
<div>Lista de Noticias</div>
</aside>
</section>
<footer>
copiry@2012 | comocrearmiweb.com | Diseñado por Eriberto Peguero
</footer>
</body>
</html>

Si te fijas es el mismo código de la pagina que creamos en la entrada anterior solo que a este le hemos cambiado algunas cositas Y lo que le hemos agregado de nuevo es el formulario que es el siguiente.

<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> 

Tambien en el aside hemos cambiado ese panel y les pusimos los datos para la administracion de nuestras noticias con php.

<aside>
<div id=’publicaciones’><h2>Administracion de noticias </h2></div>
<div>Borrar Noticias</div>
<div>Editar Noticias</div>
<div>Lista de Noticias</div>
</aside>

Lo que hemos agregado en nuestra hoja de estilo es un nuevo trozo de codigo css nuevo el cual tienes que copiarlo y agregarlo a la oja de estilo lo puedes copiar donde quieras.

Codigo CSS

#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;
    }

Bueno con esto terminamos la segunda parte de nuestro tutorial para crear Noticias con php.

En la tercera parte vamos a crear las 3 paginas que estan en nuestro aside que son Borrar Notiias, Editar Noticias y Lista de Noticias luego de esto empezaremos a crear nuestras aplicaciones con php para procesar todos estos datos y echar a andar nuestras Noticias.

Como siempre verifica que te valla quedando igual que ami
Noticias con php ejemplo parte II

Comments

  1. By Anonymous

  2. By Anónimo

Deja un comentario

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