Sistema de noticias php mysql jquery para web…

Este es un pequeño sistema de noticias php mysql jQuery, con el cual podrás realizar ingresos y eliminaciones físicas de pequeñas noticias , y agregar un enlace directo a la noticia OjO este sistema no tiene un inicio de sesion por lo cual está expueta a que cualquier usuario ingrese datos ,la demostración está ajustada para esta web por lo tanto tendrás que modificar ciertos datos ejm los enlaces siempre van a ser dirigidos a bloguer-ec.com y el ingreso de datos estará restringido por ciertos parámetros que podrán modificar a su conveniencia.

Sientase libre de modificar y usar a su gusto y conveniencia el codigo fuente…

Los demos serán eliminados automaticamente despues de ciertos dís para eliminar registros de las bases de datos..

Datos a utilizar:

index.php

ingresar_noticias.php

eliminar_noticias.php

config.php

delete.php

main.js

estilo.css

jquery.js

index.php se encargará de mostrar las noticias por categorías ingresadas previamente por el administrador.

//incluimos la conexion 
<?php
require "config.php";
?>
//iniciamos html
<!DOCTYPE html>
<html lang="es">
    <head> 
        <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
        <title>Sistema de noticias con jQuery, PHP MYSQL....!!!</title> 
        //enlazamos el css
        <link type="text/css" href="estilo.css" rel="stylesheet" />
		//enlazamos la libreria jquery
		<script type="text/javascript" src="jquery.js"></script>
		//creamos el javascript que actulizará la pagina por categoria
		<SCRIPT LANGUAGE='JavaScript'>
		<!--
		// Función que actualiza la página al cambiar la categoría de noticia
   	function actualizaPagina ()
   		{
      		i = document.forms.selecciona.categoria.selectedIndex;
      		categoria = document.forms.selecciona.categoria.options[i].value;
      		window.location = 'index.php?categoria=' + categoria;
   		}
		// -->
		</SCRIPT>
        
    </head>
<body>
        <div id="central">
            <div class="service_category">Sistema de Noticias Php mysql Ajax</div>
<?

	  // Mostrar formulario con elemento SELECT para seleccionar categoría de noticia
      print ("<FORM NAME='selecciona' ACTION='index.php' METHOD='POST'>\n");
      print ("<P>Elija la categoría:\n");
      print ("<SELECT NAME='categoria' ONCHANGE='actualizaPagina()'>\n");

   // Obtener los valores del tipo enumerado
      $instruccion = "SHOW columns FROM noticias LIKE 'nombre_categoria'";
      $consulta = mysql_query ($instruccion, $conexion);
      $row = mysql_fetch_array ($consulta);

   // Pasar los valores a una tabla y añadir el valor "Todas" al principio
      $lis = strstr ($row[1], "(");
      $lis = ltrim ($lis, "(");
      $lis = rtrim ($lis, ")");
      $lis = "'Todas'," . $lis;
      $lista = explode (",", $lis);

   // Mostrar cada valor en un elemento OPTION
      $categoria = $_REQUEST['categoria'];
      if (isset($categoria))
         $selected = $categoria;
      else
         $selected = "Todas";
      for ($i=0; $i<count($lista); $i++)
      {
         $cad = trim ($lista[$i], "'");
         if ($cad == $selected)
            print ("   <OPTION VALUE='$cad' SELECTED>$cad\n");
         else
            print ("   <OPTION VALUE='$cad'>$cad\n");
      }

      print ("</SELECT></P>\n");
      print ("</FORM>\n");

   // Enviar consulta
      $instruccion = "select * from noticias";

      if (isset($categoria) && $categoria != "Todas")
         $instruccion = $instruccion . " where nombre_categoria='$categoria'";

      $instruccion = $instruccion . " order by fecha_post_ini desc";
      $consulta = mysql_query ($instruccion, $conexion)
         or die ("Fallo en la consulta");

   // Mostrar resultados de la consulta
      $nfilas = mysql_num_rows ($consulta);
      if ($nfilas > 0)
      {

         for ($i=0; $i<$nfilas; $i++)
         {
            $resultado = mysql_fetch_array ($consulta);
            echo "<div class='service_list' id='". $resultado['noticia_id'] ."' data='". $resultado['noticia_id'] ."'>";
			echo "<div class='center_block'>";

			echo "<a href='". $resultado['url'] ."' class='product_img_link' target='_blank' title='". $resultado['titulo'] ."'> <img width='129' height='129' src='images/". $resultado['imagen'] ."'></a>"; 
			echo '<span class="info_categoria">Categoria: '. $resultado['nombre_categoria'] .'</span>';
			echo '<h3><a title="'. $resultado['titulo'] .'" href="'. $resultado['url'] .'" target="_blank">'. $resultado['titulo'] .'</a></h3>';
			echo '<p class="product_desc">' . $resultado['descripcion'] . '<br></p>';

             echo"</div>";
             echo '<p class="info_general">Publicado: '. $resultado['fecha_post_ini'] .' visto: '. $resultado['leido'] .' veces</p> ';
             echo "</div>";

}

      }
      //si no hay noticias mostramos el mensaje
      else
        print '<div class="no_noticia">No hay noticias disponibles... </div><a class="product_desc" href="ingresar_noticia.php">Ingresar noticia nueva</a>';
             echo "</div>";
?>

 </body>
</html>

ingresar_noticias.php se encargará de ingresar las noticias a la base de datos…

//incluimos la conexion
<?php
require "config.php";
?>
<?php

function validateTitulo($title){
	//NO cumple longitud minima
	if(strlen($title) < 8)
		return false;
	//SI longitud pero NO cumple acaracteres solo caracteres A-z
	else if(!preg_match("/^[0-9a-z A-Z]+$/", $title))
		return false;
	// SI longitud, SI caracteres A-z
	else
		return true;
}
function validateNoticia($notice){
	//NO cumple longitud minima
	if(strlen($notice) < 40)
		return false;
	//SI longitud pero NO solo caracteres A-z
	else if(!preg_match("/^[0-9a-z A-Z]+$/", $notice))
		return false;
	// SI longitud, y SI caracteres A-z
	else
		return true;
}
function validateEmail($email){
	//NO hay nada escrito
	if(strlen($email) == 0)
		return false;
	// esta escrito,pero  NO es VALIDO email
	else if(!filter_var($_POST['email'], FILTER_SANITIZE_EMAIL))
		return false;
	// todo el mail es ok
	else
		return true;
}
//variables valores por defecto
$titulo = "";
$tituloValue = "";
$noticia = "";
$noticiaValue = "";
$email = "";
$emailValue = "";
$urlnoticiaValue = "";
   $insertar = $_REQUEST['insertar'];
   $titulo = $_REQUEST['titulo'];
   $noticia = $_REQUEST['noticia'];
   $categoria = $_REQUEST['categoria'];
   $email = $_REQUEST['email'];

   $error = false;
//Validacion de datos enviados
   if (isset($insertar))
   {

	if(!validateTitulo($_POST['titulo']))
		$titulo = "error";
	if(!validateNoticia($_POST['noticia']))
		$noticia = "error";
	if(!validateEmail($_POST['email']))
		$email = "error";
	
	//Guardamos valores para que no tenga que reescribirlos
	$tituloValue = $_POST['titulo'];
	$noticiaValue = $_POST['noticia'];
	$emailValue = $_POST['email'];
	$urlnoticiaValue = $_POST['urlnoticia'];


	if($titulo != "error" && $noticia != "error" && $email != "error")
		$status = 1;
		
	   // Subir fichero
      $copiarFichero = false;

   // Copiar fichero en directorio de ficheros subidos
   // Se renombra para evitar que sobreescriba un fichero existente
   // Para garantizar la unicidad del nombre se añade una marca de tiempo
      if (is_uploaded_file ($_FILES['imagen']['tmp_name']))
      {
         $nombreDirectorio = "images/";
         $nombreFichero = $_FILES['imagen']['name'];
         $copiarFichero = true;

      // Si ya existe un fichero con el mismo nombre, renombrarlo
         $nombreCompleto = $nombreDirectorio . $nombreFichero;
         if (is_file($nombreCompleto))
         {
            $idUnico = time();
            $nombreFichero = $idUnico . "-" . $nombreFichero;
         }
      }
   // El fichero introducido supera el límite de tamaño permitido
      else if ($_FILES['imagen']['error'] == UPLOAD_ERR_FORM_SIZE)
      {
      	 $maxsize = $_REQUEST['MAX_FILE_SIZE'];
         $errores["imagen"] = "¡El tamaño del fichero supera el límite permitido ($maxsize bytes)!";
         $error = true;
      }
   // No se ha introducido ningún fichero
      else if ($_FILES['imagen']['name'] == "")
         $nombreFichero = '';
   // El fichero introducido no se ha podido subir
      else
      {
         $errores["imagen"] = "¡No se ha podido subir el fichero!";
         $error = true;
      }
   
}
?>
<!DOCTYPE html>
<html lang="es">
    <head> 
        <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
		<title>Insertar noticias con jQuery , PHP MYSQL....!!!</title> 
        //enlaces al estilo
        <link type="text/css" href="estilo.css" rel="stylesheet" />
        //enlaces al jquery
		<script type="text/javascript" src="jquery.js"></script>
        //enlaces al javascript de funciones y errores
	    <script type="text/javascript" src="main.js"></script>
    </head>
    //posicionamos el foco en el formulario
<body OnLoad="formulario.titulo.focus();">
        <div id="central">
            <div class="service_category">Insertar noticias ...</div>
			<?PHP
			   if (isset($insertar) && $error==false)
   				{
				
			      $fecha = date ("Y-m-d"); // Fecha actual
			      $instruccion = "insert into noticias (titulo, descripcion, nombre_categoria, fecha_post_ini , mail, url ,imagen) values ('$titulo', '$noticia', '$categoria', '$fecha' , '$email','$urlnoticia', '$nombreFichero' )";
      			  $consulta = mysql_query ($instruccion, $conexion)
         			or die ("Fallo en la consulta");
      				mysql_close ($conexion);
					   // Mover fichero de imagen a su ubicación definitiva
			      if ($copiarFichero)
         			move_uploaded_file ($_FILES['imagen']['tmp_name'],
         			$nombreDirectorio . $nombreFichero);
   // Mostrar datos introducidos
      print ("<H2 class='info'>Noticia Insertada con exito</H2>\n");
      print ("<UL>");
      print ("<LI>Título: " . $titulo);
      print ("<LI>Texto: " . $noticia);
      print ("<LI>Categoría: " . $categoria);
      print ("<LI>Email: " . $email);

      if ($nombreFichero != "")
         print ("<LI>Imagen: <A TARGET='_blank' HREF='" . $nombreDirectorio . $nombreFichero . "'>" . $nombreFichero . "</A>");
      else
         print ("<LI>Imagen: (no subió imagen)");
      print ("</UL>");

      print ("<BR>");
      print ("[ <A HREF='ingresar_noticia.php'>Insertar otra noticia</A> ]");
	  print ("[ <A HREF='eliminar_noticia.php'>Eliminar noticia</A> ]");

   }
   else
   {
?>


			<form  id="formulario" action="" method="post" enctype="multipart/form-data">
				
				<label for="titulo">Ingrese el Titulo de la noticia (<span id="req-titulo" class="requisites <?php echo $titulo ?>">Mínimo 8 caracters no caracteres especiales...</span>):</label>
				<input tabindex="1" name="titulo" id="titulo" type="text" class="text <?php echo $titulo ?>" value="<?php echo $tituloValue ?>" />
				
				<label for="noticia">Ingrese Noticia (<span id="req-noticia" class="requisites <?php echo $noticia ?>">Mínimo 40 caracteres no caracteres especiales...</span>):</label>								<input tabindex="2" name="noticia" id="noticia" type="text" class="text <?php echo $noticia ?>" value="<?php echo $noticiaValue ?>" />

				<label for="email">E-mail (<span id="req-email" class="requisites <?php echo $email ?>">Ingrese un email válido por favor</span>) No saldrá publicado:</label>
				<input tabindex="3" name="email" id="email" type="text" class="text <?php echo $email ?>" value="<?php echo $emailValue ?>" />

				<label for="urlnoticia">Ingrese el Url de la noticia : seguido de http://</label>
				<input tabindex="4" name="urlnoticia" id="urlnoticia" type="text" class="text"value="http://" />

				<label for="urlnoticia">Ingrese imagen de la noticia max.102400mb:</label>
				<INPUT tabindex="5"  TYPE="HIDDEN" NAME="MAX_FILE_SIZE" VALUE="102400" >
				<INPUT TYPE="FILE" SIZE="44" NAME="imagen" class="text">
				<?PHP
   if ($errores["imagen"] != "")
      print ("<BR><SPAN CLASS='error'>" . $errores["imagen"] . "</SPAN>");
?>
</P>
				<LABEL for="categoria">Categoría:</LABEL>
<SELECT NAME="categoria"> 
   <OPTION SELECTED>Tecnología
   <OPTION>Celulares
   <OPTION>Hogar
   <OPTION>Personajes
   <OPTION>Farandula
   <OPTION>Redes Sociales
   <OPTION>Cultura
   <OPTION>Cine
   <OPTION>Polémica
   <OPTION>Series
   <OPTION>Animados
   <OPTION>Computadoras
   <OPTION>Empresas
</SELECT>

				<br/>
					<input tabindex="6" name="insertar" id="insertar" type="submit" class="submit" value="Enviar Noticia" />
					

				</div>

				
			</form>

<?PHP
   }
?>

    </body>

eliminar_noticia.php se encargará de elimniar una noticia por id.

//incluimos la conexion
<?php
require "config.php";
?>
<!DOCTYPE html>
<html lang="es">
    <head> 
        <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
        <title>Sistema de noticias con jQuery ,PHP MYSQL....!!!</title> 
        //enlaces al css
        <link type="text/css" href="estilo.css" rel="stylesheet" />
        //enlaces al jquery
		<script type="text/javascript" src="jquery.js"></script>
        
    </head>
<body>
        <div id="central">
            <div class="service_category">Sistema de Noticias Php mysql Ajax</div>
            //escondemos el mensaje hasta que sea necesario
            	<div id="delete-ok" style="display:none;"> </div>
<?
      $instruccion = "select * from noticias order by noticia_id desc";
      $consulta = mysql_query ($instruccion, $conexion)
         or die ("Consulta de datos errónea...");
	  $nfilas = mysql_num_rows ($consulta);
      if ($nfilas > 0)
      {

         for ($i=0; $i<$nfilas; $i++)
         {
            $resultado = mysql_fetch_array ($consulta);
            echo "<div class='service_list' id='". $resultado['noticia_id'] ."' data='". $resultado['noticia_id'] ."'>";
			echo "<div class='center_block'>";

			echo "<a href='". $resultado['url'] ."' class='product_img_link' target='_blank' title='". $resultado['titulo'] ."'> <img width='129' height='129' src='images/". $resultado['imagen'] ."'></a>"; 
			echo '<span class="info_categoria">Categoria: '. $resultado['nombre_categoria'] .'</span>';

			echo '<h3><a title="'. $resultado['titulo'] .'" href="'. $resultado['url'] .'" target="_blank">'. $resultado['titulo'] .'</a></h3>';
			echo '<p class="product_desc">' . $resultado['descripcion'] . '<br></p>';

             echo"</div>";
             echo "<a class='delete' id='". $resultado['noticia_id'] ."'>Eliminar</a>";
             echo "</div>";

}

      }
      else
        print '<p class="no_noticia">No hay noticias para eliminar...</p><a class="product_desc" href="ingresar_noticia.php">Ingresar noticia nueva</a>';
             echo "</div>";
?>

           //creamos el javascript para la elimnacion
<script type="text/javascript">
$(document).ready(function() {

	$('.delete').click(function(){
	
		var parent = $(this).parent().attr('id');
		var noticia = $(this).parent().attr('data');
				
		var dataString = 'id='+noticia;
		
		$.ajax({
            type: "POST",
            url: "delete.php",
            data: dataString,
            success: function() {			
				$('#delete-ok').empty();
				$('#delete-ok').append('<div class="correcto">Noticia # '+noticia+' eliminada correctamente.</div>').fadeIn("slow");
				$('#'+parent).fadeOut("slow");
				//$('#'+parent).remove();
            }
        });
    });                 
});    
</script>
    </body>
</html>

delete.php creará el script a la eliminación de la noticia

<?php
require "config.php";
$elimina = $_POST['id'];
$imagen = $_POST['imagen'];
$instruccion_2 = "select imagen from noticias where noticia_id = $elimina ";
$consulta_2 = mysql_query ($instruccion_2, $conexion);
$resultado_2 = mysql_fetch_array ($consulta_2);
	//variable para almacenar el nobre del archivo
	$nombre_archivo = '../images/'.$resultado_2['imagen'];
	//verificamos si el archivo existe. si existe lo borramos fisicamente
	if(file_exists($nombre_archivo)) unlink($nombre_archivo );
$instruccion = "delete from noticias where noticia_id = $elimina";
$consulta = mysql_query ($instruccion, $conexion)
            or die ("Eliminación errónea");
?>

config.php creamos la conexión

<?php
define('servidor', 'localhost');
define('usuario', 'root'); //Edita tu usuario
define('clave', 'pass'); //Edita tu contraseña
define('basedatos', 'tubase'); //Edita tu bd

$conexion = mysql_pconnect(servidor, usuario, clave) or die ("No se puede conectar con el servidor");
mysql_select_db(basedatos, $conexion) or die ("No se puede seleccionar la base de datos");
?>

main.js crea las funciones y errores del formulario de envio

$(document).ready(function(){
	//variables globales
	var searchBoxes = $(".text");
	var inputTitulo = $("#titulo");
	var reqTitulo = $("#req-titulo");
	var inputNoticia = $("#noticia");
	var reqNoticia = $("#req-noticia");
	var inputEmail = $("#email");
	var reqEmail = $("#req-email");

	//funciones de validacion
	function validateTitulo(){
		//NO cumple longitud minima
		if(inputTitulo.val().length < 8){
			reqTitulo.addClass("error");
			inputTitulo.addClass("error");
			return false;
		}
		//SI longitud pero NO solo caracteres A-z
		else if(!inputTitulo.val().match(/^[0-9a-z A-Z]+$/)){
			reqTitulo.addClass("error");
			inputTitulo.addClass("error");
			return false;
		}
		// SI longitud, SI caracteres A-z
		else{
			reqTitulo.removeClass("error");
			inputTitulo.removeClass("error");
			return true;
		}
	}
	
	
	function validateNoticia(){
		//NO cumple longitud minima
		if(inputNoticia.val().length < 40){
			reqNoticia.addClass("error");
			inputNoticia.addClass("error");
			return false;
		}
		//SI longitud pero solo caracteres A-z
		else if(!inputNoticia.val().match(/^[0-9a-z A-Z]+$/)){
			reqNoticia.addClass("error");
			inputNoticia.addClass("error");
			return false;
		}
		// SI longitud, SI caracteres A-z
		else{
			reqNoticia.removeClass("error");
			inputNoticia.removeClass("error");
			return true;
		}
	}
	
	function validateEmail(){
		//NO hay nada escrito
		if(inputEmail.val().length == 0){
			reqEmail.addClass("error");

			inputEmail.addClass("error");
			return false;
		}
		else if(!inputEmail.val().match(/^[^\s()<>@,;:\/]+@\w[\w\.-]+\.[a-z]{2,}$/i)){
			reqEmail.addClass("error");
			inputEmail.addClass("error");
			return false;
		}
		// SI rellenado, SI email valido
		else{
			reqEmail.removeClass("error");
			inputEmail.removeClass("error");
			return true;
		}
	}
	
	
	//controlamos la validacion en los distintos eventos
	// Perdida de foco
	inputTitulo.blur(validateTitulo);
	inputNoticia.blur(validateNoticia);  
	inputEmail.blur(validateEmail);  
	
	// Pulsacion de tecla
	inputTitulo.keyup(validateTitulo);
	inputNoticia.keyup(validateNoticia);
	
	// Envio de formulario
	$("#formulario").submit(function(){
		if(validateTitulo() & validateNoticia() & validateEmail())
			return true;
		else
			return false;
	});
	
	//controlamos el foco / perdida de foco para los input text
	searchBoxes.focus(function(){
		$(this).addClass("active");
	});
	searchBoxes.blur(function(){
		$(this).removeClass("active");  
	});

});




estilo.css este es el estilo que le e dado.

body {
    background: none repeat scroll 0 0 #F6F6F6;
}

#central {
    background-color: #e7e7f5;
    border-radius: 5px 5px 5px 5px;
    box-shadow: 0 2px 5px #666666;
    overflow: hidden;
    padding: 30px 15px 15px;
	width:900px;
	margin-bottom:50px;
	margin-top:50px;
	margin: 0px auto;
}

.service_category {
    border: 1px solid #bdbdd9;
    border-radius: 3px 3px 3px 3px;
    clear: both;
    font-size: 18px;
    font-weight: bold;
    height: auto;
    margin-bottom: 0.3em;
	color:#356fcc;
	width:280px;
    padding: 6px;
}

.service_list {
	background-color:#FFFFFF;
    border: 1px solid #D0D3D8;
    border-radius: 5px 5px 5px 5px;
    clear: both;
    height: auto;
    margin-bottom: 0.3em;
    min-height: 130px;
    padding: 6px;
	margin-bottom:10px;
}
.service_list  a {
    color: #2D2D28;
    font-weight: bold;
	font-family:Verdana;
	font-size:16px;
    text-decoration: underline;
}

.service_list a:hover{
	color:#2d2d28;
	outline:0;
	text-decoration:none;
	font-weight: bold
}
.no_noticia {
	background: #FFFFFF url(images/admiracion.png) no-repeat scroll 600px;
    border: 1px solid #D0D3D8;
    border-radius: 5px 5px 5px 5px;
    clear: both;
    height: auto;
    margin-bottom: 0.3em;
	font-family:Arial, Helvetica, sans-serif;
	font-size:24px;
	text-align:left;
	color:#FF0000;
    min-height: 130px;
    padding: 6px;
	margin-bottom:10px;
}
.center_block {
    float: left;
    width: 98%;
}
.center_block h3 {
   margin-top:-20px;
}
.product_desc {
    font-size: 0.92em;
    margin-bottom: 0;
	font-family:Verdana;
	font-size:14px;
	font-weight:bold;
    text-align: justify;
}
.product_img_link img{
    border:none;
    float: left;
    margin-right: 0.9em;
}

.service_list img{width:129px; height:104px;}
.delete {
    cursor: pointer;
    margin-left: 800px;

}

.info, .correcto, .ojo, .error, .validation {
    border: 1px solid;
    margin: 10px 0px;
    padding:15px 10px 15px 50px;
    background-repeat: no-repeat;
    background-position: 10px center;
    font-family:Arial, Helvetica, sans-serif;
    font-size:13px;
    text-align:left;
    width:auto;
}
.info {
    color: #00529B;
    background-color: #BDE5F8;
    background-image: url('images/info.jpg');
}
.correcto {
    color: #4F8A10;
    background-color: #DFF2BF;
    background-image:url('images/correcto.jpg');
}
.ojo {
    color: #9F6000;
    background-color: #FEEFB3;
    background-image: url('images/ojo.JPG');
}
.error {
    color: #D8000C;
    background-color: #FFBABA;
    background-image: url('images/error.jpg');
}


//*ingresar noticia*//
input.text, input.submit{
	width: 70%;
	background: #171717 url(img/search.png) no-repeat scroll right 2px;
	padding: 8px;
	color: #8c8c8c;
	border: 1px solid #393939;
	margin-bottom: 15px;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	-khtml-border-radius: 5px;
	font-size: 16px;
}
input.text.active{
	background: #343434 url(img/search.png) no-repeat scroll right -43px;
	border-color: #000;
	color: #fff;
}
input.submit{
	width: auto !Important;
	background: #f5f5f5;
	color: #000;
	border-color: #c8c8c8;
	padding: 5px;
	margin-top: 0.5em;
}
.requisites{
	padding: 0 2px 0 2px;
}
.requisites.error{
	text-decoration: underline;
	background: #fff8cc;
	color: #171717;
}
input.error{
	background: #432323;
	border-color: #171717;
}
table{
	border-collapse: separate;
	border-spacing: 0pt;
}
strong{
	font-weight: 700;
}
caption, th, td{
	font-weight:normal;
	text-align:left;
}
blockquote:before, blockquote:after, q:before, q:after{
	content:"";
}
blockquote, q{
	quotes:"" "";
}
pre{
	font-family: Arial, Helvetica, sans-serif;
}
input{
	border: 0;
	margin: 0;
	font-family: Arial, Helvetica, sans-serif;
}
textarea{
	font-family: Arial, Helvetica, sans-serif;
	color: #888888;
	padding: 7px 3px 0 4px;
	font-size: 11px;
}
select{
	font-size: 11px;
	color: #888888;
	background: #fff;
	font-family: Arial, Helvetica, sans-serif;
	border: 1px solid #CAD2CE;
}
ul{
	list-style: none;
	list-style-type: none;
	list-style-position: outside;
}
a{
	cursor: pointer;
	color: #296ba5;
	text-decoration: none;
	outline: none !Important;
}
html,body{
	height:100%;
}
.clear{
	clear: both;
	height: 0;
	visibility: hidden;
	display: block;
	line-height: 0;
}
.clearfix{
	overflow: hidden;
}
.fleft{
	float: left;
}
.fright{
	float: right;
}
.italic{
	font-style: italic;
}
.info_general {
	font-family:Arial, Helvetica, sans-serif;
	color:#CCCCCC;
	text-decoration:none;
	font-size:13px;
    margin-left: 650px;

}
.info_categoria {
	font-family:Arial, Helvetica, sans-serif;
	color:#666666;
	text-decoration:none;
	display:inline;
	font-size:15px;
    margin-left: 550px;
}

/******* /GENERAL RESET *******/

/******* CONTENT *******/
.wrapper{
	width: 640px;
	margin: 0pt auto;
	padding-top: 10px;
}
h1{
	color: #fff;
	font-size: 26px;
	line-height: 3em;
}
label{
	display: block;
	color: #00FF99;
	line-height: 2em;
	font-size: 14px;
}
form label{
	color: #666666;
	line-height: 2em;
	font-size: 17px;
}

.section{
	margin-bottom: 25px;
}
input.text, input.submit{
	width: 80%;
	background: #B3D5D9;
	padding: 8px;
	color: #000099;
	border: 1px solid #393939;
	margin-bottom: 15px;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	-khtml-border-radius: 5px;
	font-size: 16px;
}
input.text.active{
	background: #a399a3;
	border-color: #000;
	color: #fff;
}
/** boton enviar **/
input.submit{
	width: auto !Important;
	background: #c4bac4;
	color: #000;
	border-color: #c8c8c8;
	padding: 5px;
	margin-top: 0.5em;
	cursor:pointer;
}
.requisites{
	padding: 0 2px 0 2px;
}
/**error de enfoque rojo y blanco en texto**/
.requisites.error{
	text-decoration: underline;
	background: #fa0000;
	color: #ffffff;
	font-size:17px;
	font-family: "Times New Roman", Times, serif;
}
/** error de enfoque rojo y blanco en input**/
input.error{
	color: #D8000C;
    background: #FFBABA url(images/error.jpg) no-repeat scroll right ;
	border-color: #D8000C;
}

SELECT {font-size:16px;
		background:#CCCCCC;
		color:#0066FF;
		font-family:"Times New Roman", Times, serif;
		}
/******* /CONTENT *******/

tabla.sql

CREATE TABLE `noticias` (
  `noticia_id` int(10) NOT NULL auto_increment,
  `titulo` varchar(75) collate utf8_unicode_ci NOT NULL,
  `descripcion` text collate utf8_unicode_ci NOT NULL,
  `nombre_categoria` enum('Tecnología','Celulares','Hogar','Personajes','Farandula','Redes Sociales','Cultura','Cine','Polémica','Series','Animados','Computadoras','Empresas') collate utf8_unicode_ci NOT NULL default 'Tecnología',
  `fecha_post_ini` date NOT NULL,
  `fecha_post_fin` date NOT NULL,
  `estado` varchar(1) collate utf8_unicode_ci NOT NULL,
  `mail` varchar(40) character set utf8 NOT NULL,
  `leido` int(10) NOT NULL default '1',
  `imagen` varchar(255) collate utf8_unicode_ci NOT NULL,
  `url` varchar(300) collate utf8_unicode_ci NOT NULL,
  PRIMARY KEY  (`noticia_id`)
) ENGINE=MyISAM  DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci AUTO_INCREMENT=1 ;

el archivo jquery.js podrá descargar de su página web o usar sus Hosted CDN en varios servidores gratuitos. Adicional para subir las imagenes deberás crear una carpeta llamada images y alojarla en tu hosting , podrás hacer pruebas locales para analizar estos archivos. Es todo en cuanto puedo acotar espero les sirva en algún proyecto.

Este sistema de noticias está desactualizado el admin ha desactivado su demostración cualquier duda dejenos su comentario…

Relacionado