Underc0de

Programación Web => Zona Webmaster => Mensaje iniciado por: BigBear en Enero 23, 2015, 12:52:05 PM

Título: [Guia] Creacion de una pagina con BD
Publicado por: BigBear en Enero 23, 2015, 12:52:05 PM
[Titulo] : Creacion de una pagina con BD
[Autor] : Doddy Hackman

[Temario]

--========================================================--

0x00 : Introduccion
0x01 : Creacion del diseño de la pagina
0x02 : Creacion un un logo estilo GTA
0x03 : Creacion de un footer animado
0x04 : Creacion de botones en Fireworks
0x05 : Creacion de un menu desplegable
0x06 : Creacion un panel de administracion

--========================================================--

0x00 : Introduccion

En este manual vamos a ver como hacer una pagina web en PHP que tengo un sistema de noticias y un panel de administracion y para poder entender este manual necesitan conocer HTML,CSS y PHP por lo menos de forma basica para entender su contenido y tambien necesitan los siguientes programas :

* Adobe Dreamweaver
* Adobe Photoshop
* Adobe Fireworks
* XAMPP O Easy PHP
* Anim-FX
* GifCam
* Un pack de imagenes que pueden descargar aca (http://doddyhackman.webcindario.com/descargas/pack_manual.rar) que contiene los fondos que necesitan en el manual y los ultimos dos programas

Cuando descarguen el pack copian los datos a una carpeta llamada "images" para usar durante el manual.

0x01 : Creacion del diseño de la pagina

Ahora vamos a hacer un diseño como este :

(http://doddyhackman.webcindario.com/images/dream_segunda_fase.jpg)

Para eso vamos a tener que seguir los siguientes pasos :

Descargamos el pack que esta en la seccion de "Requisitos" que contiene las imagenes necesarias para hacer la pagina de ejemplo.

Iniciamos el Dreamweaver y creamos una nueva pagina como PHP , una vez creado guardamos el proyecto con formato PHP , el directorio puede ser cualquiera.

Despues copiamos en el directorio de la pagina la carpeta "images" del pack en el directorio que eligieron para guardar la pagina.

Ahora cambiamos volvemos a Dreamweaver y cambiamos el titulo de la pagina "Documento sin título" por "Plantilla".

Despues agregamos <center> entre el inicio y final del <body> para centrar la pagina.

Ahora nos vamos a "Insertar -> Objectos de diseño -> Etiqueta DIV" y despues ponemos como nombre de clase "container" y le damos a "Nueva regla" , le damos al boton "aceptar" a la ventana que se nos aparece , como es la primera vez que usamos un div nos va a preguntar con que nombre guardamos el css , entonces ponganle "style.css" y guarden , despues de eso nos va a aparecer una ventana nueva , en esa ventana nos vamos a la categoria "Cuadro" y ponemos las dimensiones 1050x768 , 1050 de ancho y 768 de largo , le damos al boton "aceptar" y de nuevo aceptar a la ventana que se nos aparece , despues borren el texto por defecto del container.

Todo como en las imagenes :

(http://doddyhackman.webcindario.com/images/dream_cuadro_1.jpg)

(http://doddyhackman.webcindario.com/images/dream_cuadro_2.jpg)

(http://doddyhackman.webcindario.com/images/dream_cuadro_3.jpg)

(http://doddyhackman.webcindario.com/images/dream_cuadro_4.jpg)

(http://doddyhackman.webcindario.com/images/dream_cuadro_5.jpg)

Para crear el banner hagan los mismos pasos pero ponganle de nombre "banner" y las dimensiones "1024x100" , ponganle 3 px de margen a todos y de relleno pongan los valores "5,10,5,10" seguidos , tambien pongan la opcion "flotar" en alineacion izquierda.

Como en la imagen :

(http://doddyhackman.webcindario.com/images/dream_banner.jpg)

* Cambien el texto por defecto por "Banner"

Ahora para crear el contenido vamos a crear otro div con el nombre de "box" con las dimensiones 1024x500 , ponganle 3 px de margen a todos y de relleno tambien 5,10,5,10 , tambien pongan alineacion izquierda.

Como en la imagen :

(http://doddyhackman.webcindario.com/images/dream_box.jpg)

* Borren el texto por defecto

Despues de insertar el box vamos a agregar otro div que sera el primer menu de categorias o lo que sea , de nombre pongan "menu" y tendra las dimensiones 200x500 , alineacion izquierda , margen 3 a todo y de relleno pongan 5,10,5,10

Como en la imagen :

(http://doddyhackman.webcindario.com/images/dream_menu.jpg)

* Cambien el texto por defecto por "Menu"

Ahora para crear lo mas importante que es el body vamos a tener que crear otro div nuevo con el nombre de "body" con las dimensiones 566x500 , alineacion izquierda , margen 3 a todo , y de relleno solo pongan el primero que seria 5 los demas lo dejan en blanco.

Como en la imagen :

(http://doddyhackman.webcindario.com/images/dream_body.jpg)

* Cambien el texto por defecto por "Body"

Ahora para crear la parte de afiliados vamos a crear otro div con el nombre de "otromenu" , las dimensiones serian de 200x500 , alineacion izquierda , margen 3 para todo y de relleno 5,10,5,10

Como en la imagen :

(http://doddyhackman.webcindario.com/images/dream_otormenu.jpg)

* Cambien el texto por defecto por "OtroMenu"

Despues de eso ahora vamos al div final que es el footer , entonces creamos otro div con el nombre de "footer" con las dimensiones 1024x100 , margen 3 a todos menos al inferior que sera 10 , como relleno ponemos 5,10,5,10 y tambien le ponemos alineacion izquierda.

Como en la imagen :

(http://doddyhackman.webcindario.com/images/dream_footer.jpg)

* Cambien el texto por defecto por "Footer"

Ahora comenzamos con el codigo CSS , primero vamos a la pestaña de style.css y en la parte del codigo cambien en las etiquetas banner,box,menu,body,otromenu y footer el "height" por "min-height" esto nos va a ayudar que cuando el texto sobrepase el div , el div se alargara.

Despues agregamos el siguiente codigo al archivo CSS para poner una imagen de fondo :

Código (html5) [Seleccionar]

body {
background:transparent url("images/fondo1.jpg") repeat scroll 0 0;
color:white;
font-family:helvetica,arial,sans-serif;
font-size:14px;
text-align:center;
}


En las etiquetas banner,box,footer agreguen el siguiente codigo para darle bordes a los div y una imagen de fondo :

Código (html5) [Seleccionar]

background-image:url("images/fondo2.jpg");
background-color:#000;
border: 3px dashed #00FFFF;


Si hacemos F12 para ver como nos queda la pagina se nos deberia ver algo asi en el navegador :

(http://doddyhackman.webcindario.com/images/dream_primera_fase.jpg)

Ahora agregamos el siguiente codigo al archivo CSS , para poder agregar el cuadro en el que estaran las categorias,posts y los afiliados :

Código (html5) [Seleccionar]

.categorias {
color:white;
border: 3px dashed #00FFFF;
width:200px;
word-wrap: break-word;
}

.post {
background-image:url("images/fondo2.jpg");
background-color:#000;
color:white;
border: 3px dashed #00FFFF;
margin-bottom:10px;
width:560px;
word-wrap: break-word;
}



Despues de eso agregamos el siguiente codigo entre las etiquetas "menu" del archivo PHP que vendria a ser las "Categorias" :

Código (html5) [Seleccionar]

<div class="categorias">
<h3>Categorias</h3>
  Link1<br />
  Link2<br />
  Link3<br />
  Link4<br />
  Link5<br />
  Link6<br />
  Link7<br />
  Link8<br />
  Link9<br />
  Link10<br />
  <br />
</div>


Ahora vamos a por los afiliados , vamos a agregar el siguiente codigo entre las etiquetas "otromenu" en el codigo del archivo PHP :

Código (html5) [Seleccionar]

<div class="categorias">
<h3>Afiliados</h3>
  Link1<br />
  Link2<br />
  Link3<br />
  Link4<br />
  Link5<br />
  Link6<br />
  Link7<br />
  Link8<br />
  Link9<br />
  Link10<br />
  <br />
</div>


Despues vamos a agregar el siguiente codigo entre las etiquetas "body" para colocar noticias de ejemplo en el archivo PHP :

Código (html5) [Seleccionar]

<div class="post">
<h3>Noticia1</h3>
<p>Contenido de Noticia1</p>
</div>

<div class="post">
<h3>Noticia2</h3>
<p>Contenido de Noticia2</p>
</div>


<div class="post">
<h3>Noticia3</h3>
<p>Contenido de Noticia3</p>
</div>


<div class="post">
<h3>Noticia4</h3>
<p>Contenido de Noticia4</p>
</div>


<div class="post">
<h3>Noticia5</h3>
<p>Contenido de Noticia5</p>
</div>


<div class="post">
<h3>Noticia6</h3>
<p>Contenido de Noticia6</p>
</div>


Todo el codigo HTML del archivo PHP nos deberia haber quedado algo asi :

Código (html5) [Seleccionar]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Plantilla</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
<center>
<div class="container">
  <div class="banner">Banner</div>
  <div class="box">
    <div class="menu">
    <div class="categorias">
<h3>Categorias</h3>
  Link1<br />
  Link2<br />
  Link3<br />
  Link4<br />
  Link5<br />
  Link6<br />
  Link7<br />
  Link8<br />
  Link9<br />
  Link10<br />
  <br />
</div>
    </div>
    <div class="body">
<div class="post">
<h3>Noticia1</h3>
<p>Contenido de Noticia1</p>
</div>

<div class="post">
<h3>Noticia2</h3>
<p>Contenido de Noticia2</p>
</div>


<div class="post">
<h3>Noticia3</h3>
<p>Contenido de Noticia3</p>
</div>


<div class="post">
<h3>Noticia4</h3>
<p>Contenido de Noticia4</p>
</div>


<div class="post">
<h3>Noticia5</h3>
<p>Contenido de Noticia5</p>
</div>


<div class="post">
<h3>Noticia6</h3>
<p>Contenido de Noticia6</p>
</div>
    </div>
    <div class="otromenu">
<div class="categorias">
<h3>Afiliados</h3>
  Link1<br />
  Link2<br />
  Link3<br />
  Link4<br />
  Link5<br />
  Link6<br />
  Link7<br />
  Link8<br />
  Link9<br />
  Link10<br />
  <br />
</div>
    </div>
  </div>
  <div class="footer">Footer</div>
</div>
</center>
</body>
</html>


Si hicieron todo bien la pagina les deberia haber quedado algo como esto :

(http://doddyhackman.webcindario.com/images/dream_segunda_fase.jpg)

Eso seria todo por ahora en el diseño.

0x02 : Creacion un logo estilo GTA

Para crear un logo estilo GTA en Photoshop deben instalar primero la fuente necesaria del siguiente link (http://www.dafont.com/es/pricedown.font?text=pricedown) , para instalar la fuente descargado solo arrastran y copian los archivos del comprimido en el directorio "c:/windows/fonts de Windows" , despues de eso cargamos Photoshop y seguimos los siguiente pasos :

Creamos un proyecto con las dimensiones 995x108 y fondo transparente como en la siguiente imagen :

(http://doddyhackman.webcindario.com/images/photo_logo_1.jpg)

Una vez creado ponganle de fondo una imagen cualquiera en mi caso recorto una imagen con paint y lo copio en el proyecto quedando algo asi :

(http://doddyhackman.webcindario.com/images/photo_logo_2.jpg)

Despues hacemos click en la opcion "Texto horizontal" y seleccionamos el tipo de fuente "Pricedown" , tamaño de letra 80 pt y tipo de color #ffffcc , entonces una vez hecho esto agregamos el texto "Probando" con la herramienta "Texto horizontal" seleccionada , todo deberia verse algo asi :

(http://doddyhackman.webcindario.com/images/photo_logo_3.jpg)

Ahora hacemos click derecho en la capa llamada "PROBANDO" que es el texto creado y hacemos click en "Opciones de Fusion" , entonces activamos el estilo "Trazo" , de tamaño pongan 3 y pongan de color #000000 , entonces hagan click en "OK" y les deberia quedar algo asi :

(http://doddyhackman.webcindario.com/images/photo_logo_4.jpg)

(http://doddyhackman.webcindario.com/images/photo_logo_5.jpg)

Ahora tenemos que seleccionar la "Capa 1" para ir despues a "Edicion->Contornear" , ponemos de anchura 8px  y de color #ffffcc , le damos a "OK" y se deberia ver algo asi :

(http://doddyhackman.webcindario.com/images/photo_logo_6.jpg)

(http://doddyhackman.webcindario.com/images/photo_logo_7.jpg)

Como detalle final sino les gusta la posicion del texto pueden mover el texto al centro o como mas les guste , en mi caso queda asi :

(http://doddyhackman.webcindario.com/images/photo_logo_8.jpg)

Para terminar guardamos el proyecto como "png" y volvemos a la plantilla creada con Dream y nos vamos al div "banner" , borramos el texto "Banner" y insertamos el logo creado con Photoshop , para eso nos vamos a "Insertar->Imagen" y ponemos en la ventana que nos abre la ruta de la imagen.

Nos deberia quedar algo asi :

(http://doddyhackman.webcindario.com/images/photo_logo_9.jpg)

0x03 : Creacion de un footer animado

Cargamos el programa "Anim-FX" y llenamos los campos de la siguiente forma :

Text 1 : TEST 1
2 : TEST 2
3 : TEST 3
4 : TEST 4
5 : TEST 5

Tipo de efecto : flash

Tamaño de letra : 145
Color de letra : El color es celeste claro que vendria a ser 52FEFD

Se les deberia ver algo asi :

(http://doddyhackman.webcindario.com/images/footer_1.jpg)

Ahora cargamos el GifCam y hacemos click en "Rec" sobre la zona de la animacion que quieren grabar.
Despues de terminar de grabar hacemos click en "Stop" y despues en "Save" para despues grabar el gif donde quieran

Una vez terminado todo nos vamos al proyecto de dream y en el div footer borramos el texto "Footer" y insertamos el gif animado , para eso nos vamos a "Insertar->Imagen" y ponemos en la ventana que nos abre la ruta del gif.

Se les deberia ver algo asi :

(http://doddyhackman.webcindario.com/images/footer_2.jpg)

Eso seria todo el footer animado.

0x04 : Creacion de botones en Fireworks

Para crear un boton en Fireworks primer cargamos el programa y hacemos click en crear un nuevo "Documento de Fireworks (PNG)" con las dimensiones de 100x50 y de colo de lienzo "transparente".

Les deberia quedar asi :

(http://doddyhackman.webcindario.com/images/boton_fireworks_1.jpg)

Una vez hecho esto vamos al cuadro de herramientas y seleccionamos "Rectangulo redondeado" de la herramienta "Rectangulo" que se encuentra en la seccion "Vector".
Ya seleccionado creamos un rectangulo redondeado en la zona de trabajo del color que quieran , para ponerle un estilo primero seleccionen el rectangulo creado y despues seleccionen el estilo que quieran en el cuadro de herramientas derecho llamado "Activos->Estilos" quedando todo asi : 

(http://doddyhackman.webcindario.com/images/boton_fireworks_2.jpg)

(http://doddyhackman.webcindario.com/images/boton_fireworks_3.jpg)

(http://doddyhackman.webcindario.com/images/boton_fireworks_4.jpg)

En mi caso elegi el estilo mas parecido a Tron y desactivo el filtro "Sombra" porque no me gustaba como quedaba , los filtros estan en la parte de abajo del programa y se puede ver cuando estan aplicando el estilo.

Como ven ya tenemos la forma del boton , ahora vamos a ponerle texto , entonces seleccionamos la herramienta "herramienta de texto" para escribir "click" sobre el boton redondeado con el color que quieran , pueden mover el texto de posicion con la "herramienta puntero" si no les gusta como quedo.

Les deberia quedar algo asi , yo en mi caso elegi letra blanca :

(http://doddyhackman.webcindario.com/images/boton_fireworks_5.jpg)

Para terminar vamos a "Archivo->Guardar como" y guardamos el boton con el nombre que quieran , el formato que tendra sera de PNG.

Para usarlo en la plantilla que creamos con Dream vamos al div "otromenu" , borramos los links de ejemplo y pongan el siguiente codigo entre los div :

Código (html5) [Seleccionar]

<a href="http://www.petardas.com"><img src="images/click.png"></a><br />


Recuerden que el boton creado tiene que estar en una carpeta llamada images sino nunca se va a encontrar el boton.

Cambien petardas por el link que quieran y cambien click.png por el verdadero nombre y ruta del boton.

En mi caso use tres veces esa linea de codigo como ejemplo.

Les deberia quedar algo asi :

(http://doddyhackman.webcindario.com/images/boton_fireworks_6.jpg)

(http://doddyhackman.webcindario.com/images/boton_fireworks_7.jpg)

Y en el navegador se deberia ver asi :

(http://doddyhackman.webcindario.com/images/boton_fireworks_8.jpg)

Eso seria todo con los botones.

0x05 : Creacion de un menu desplegable

Bueno para hacer esto volvemos a la plantilla inicial con Dream y  borramos los links de ejemplo que estan la seccion de categorias justamente en el div "menu" y agregamos un <br/> antes del </div> y otro despues del <h3> de categorias ,  y para terminar insertamos un menu vertical de la siguiente forma :

Insertar->Spry->Barra de menus de Spry y en la ventana que aparece seleccionamos "Vertical".

Deberiamos ver algo asi :

(http://doddyhackman.webcindario.com/images/menu_dream_1.jpg)

Primero vamos hacer click en el menu creado y desde ahi cambiar los textos de todos los "elementos" por "test" , cambien tanto en la columna 1 o en la columna 2 si es que se desplega otro menu a partir de ese.

Despues para poner un vinculo solo lo hacen desde la casilla correspondiente que esta abajo de la de "texto" , en mi caso solo voy a poner un link y va a ser en el "test2"

Deberian ver algo asi :

(http://doddyhackman.webcindario.com/images/menu_dream_2.jpg)

Ahora vamos a tunear el menu con colores raros con las siguientes pasos :

Para empezar seleccionamos el menu vertical y desde la seccion de "Estilos CSS" hacemos click en "Actual" para despues seleccionar y hacer doble click en "border" 

(http://doddyhackman.webcindario.com/images/menu_dream_3.jpg)

Ahora vamos a la categoria "Borde" , en Estilo seleccionamos "doble" para todos , ancho 3 para todos y de color #2EFEF7 para todos.

Deberia quedar asi :

(http://doddyhackman.webcindario.com/images/menu_dream_4.jpg)

Despues vamos a "Estilos CSS" y despues a "Todo" para despues desplegar SpryMenuBarVertical.css.

Seleccionamos y hacemos doble click en "ul.MenuBarVertical a" para ir a la categoria "Tipo" y cambiar el color de la letra por celeste claro , ahora nos vamos a la categoria "Fondo" ponemos el color de fondo negro y para terminar ponemos la imagen de fondo "normal.jpg" con la opcion de "no repetir"

Quedando asi :

(http://doddyhackman.webcindario.com/images/menu_dream_5.jpg)

(http://doddyhackman.webcindario.com/images/menu_dream_6.jpg)

(http://doddyhackman.webcindario.com/images/menu_dream_7.jpg)

Ahora hacemos lo mismo con el "ul" que esta abajo del anterior solo que la fuente la dejan como esta y  la imagen de fondo va ser el fondo "hover.jpg" con la opcion de "no repetir".

(http://doddyhackman.webcindario.com/images/menu_dream_8.jpg)

(http://doddyhackman.webcindario.com/images/menu_dream_9.jpg)

(http://doddyhackman.webcindario.com/images/menu_dream_10.jpg)

Como menu final se les deberia ver algo asi :

(http://doddyhackman.webcindario.com/images/menu_dream_11.jpg)

Eso seria todo en el menu.

0x06 : Creacion un panel de administracion

Para empezar activemos el XAMPP o Easy PHP , despues creen las siguientes clases PHP en el directorio donde esta la pagina :

login_now.php

Código (php) [Seleccionar]

<?php

/*

Class : LoginNow

(c) Doddy Hackman 2015

*/

class LoginNow
{
    
    private 
$host;
    private 
$db;
    private 
$user;
    private 
$pass;
    private 
$tabla;
    private 
$columna1;
    private 
$columna2;
    private 
$usereal;
    private 
$passreal;
    private 
$campouser;
    private 
$campopass;
    private 
$cookiename;
    
    public function 
campos($campouser$campopass)
    {
        if (isset(
$_POST[$campouser])) {
            
$this->campouser $_POST[$campouser];
            
$this->campopass md5($_POST[$campopass]);
        } else {
            
$this->campouser $campouser;
            
$this->campopass $campopass;
        }
    }
    
    public function 
database($host$dbuser$dbpass$db$tabla$columna1$columna2)
    {
        
mysql_connect($host$dbuser$dbpass);
        
mysql_select_db($db);
        
$que mysql_query("SELECT * FROM " $tabla);
        while (
$test mysql_fetch_array($que)) {
            if (
$this->campouser == $test[$columna1] and $this->campopass == $test[password]) {
                
$this->usereal  $test[$columna1];
                
$this->passreal $test[$columna2];
                return 
true;
            }
        }
    }
    
    public function 
secure($user$pass)
    {
        if (
$this->campouser == $user and $this->campopass == $pass) {
            
$this->usereal  $user;
            
$this->passreal $pass;
            return 
true;
        } else {
            return 
false;
        }
    }
    
    public function 
cookienow($cookiename)
    {
        
setcookie($cookienamebase64_encode($this->usereal "@" $this->passreal));
    }
    
}

?>



noticion.php

Código (php) [Seleccionar]

<?php

/*

PHP Class : Noticion 1.0

(C) Doddy Hackman 2015

*/


class noticion
{
    
    private 
$db;
    
    public function 
datos($host$user$pass$db)
    {
        
        
$this->db $db;
        
        if (@
mysql_connect($host$user$pass)) {
            if (@
mysql_select_db($db)) {
                return 
true;
            }
        }
    }
    
    public function 
crear_categoria($nuevacategoria)
    {
        
        
$todo1 "create table categoria_$nuevacategoria (
id int(10) UNSIGNED NOT NULL AUTO_INCREMENT,
titulo VARCHAR(255) NOT NULL,
contenido TEXT NOT NULL,
fecha VARCHAR(255) NOT NULL,
PRIMARY KEY (id));
"
;
        
        
$todo2 "create table comentarios_$nuevacategoria (
id_noticia int(10),
id_comentario int(10) UNSIGNED NOT NULL AUTO_INCREMENT,
mensaje TEXT NOT NULL,
apodo VARCHAR(255) NOT NULL,
fecha VARCHAR(255) NOT NULL,
PRIMARY KEY (id_comentario));
"
;
        
        if (@
mysql_query($todo1)) {
            if (@
mysql_query($todo2)) {
                return 
true;
            }
        }
        
    }
    
    public function 
eliminar_categoria($eliminarcategoria)
    {
        
        if (@
mysql_query("DROP TABLE categoria_$eliminarcategoria")) {
            if (@
mysql_query("DROP TABLE comentarios_$eliminarcategoria")) {
                return 
true;
            }
            
        }
    }
    
    
    public function 
eliminar($id$categoria)
    {
        if (
is_numeric($id)) {
            if (@
mysql_query("DELETE FROM categoria_$categoria where id='$id'")) {
                return 
true;
            }
        }
    }
    
    public function 
nueva_noticia($x_titulo$x_contenido$x_fecha$categoria)
    {
        
$sumo mysql_query("SELECT MAX(id) FROM categoria_$categoria");
        
        
$s mysql_fetch_row($sumo);
        
        foreach (
$s as $d) {
            
$x_id $d 1;
        }
        if (@
mysql_query("INSERT INTO categoria_$categoria(id,titulo,contenido,fecha)values('$x_id','$x_titulo','$x_contenido','$x_fecha')")) {
            return 
true;
        }
    }
    
    public function 
ver_este($id$categoria)
    {
        if (
is_numeric($id)) {
            
$total = array();
            if (
$que = @mysql_query("SELECT id,titulo,contenido,fecha FROM categoria_$categoria WHERE id='$id'")) {
                while (
$ver = @mysql_fetch_array($que)) {
                    return array(
                        
$ver[0],
                        
$ver[1],
                        
$ver[2],
                        
$ver[3]
                    );
                }
            }
        }
    }
    
    public function 
listar_categorias()
    {
        
        
$found = array();
        
        if (
$re = @mysql_query("show tables from " $this->db)) {
            
            while (
$dat mysql_fetch_row($re)) {
                
$separo split("_"$dat[0]);
                
array_push($found$separo[1]);
            }
            return array(
                
$found
            
);
        }
        
    }
    
    public function 
ver_todo($categoria)
    {
        
$total = array();
        if (
$que = @mysql_query("SELECT id,titulo,contenido,fecha FROM categoria_$categoria")) {
            while (
$ver = @mysql_fetch_array($que)) {
                
array_push($total$ver);
            }
            return array(
                
$total
            
);
        }
    }
    
    public function 
mod($categoria$id$tit$con$fech)
    {
        if (@
mysql_query("UPDATE categoria_$categoria SET id='$id',titulo='$tit',contenido='$con',fecha='$fech' where id='$id'")) {
            return 
true;
        }
    }
    
    public function 
crear_comentario($categoria$id_noticia$fecha$apodo$mensaje)
    {
        
        
$sumo mysql_query("SELECT MAX(id_comentario) FROM comentarios_$categoria");
        
        
$s mysql_fetch_row($sumo);
        
        foreach (
$s as $d) {
            
$x_id $d 1;
        }
        
        if (
mysql_query("INSERT INTO comentarios_$categoria(fecha,apodo,mensaje,id_noticia,id_comentario)values('$fecha','$apodo','$mensaje','$id_noticia','$x_id')")) {
            return 
true;
        }
        
    }
    
    public function 
mod_comentario($categoria$id$fecha$apodo$contenido)
    {
        if (@
mysql_query("UPDATE comentarios_$categoria SET id_comentario='$id',fecha='$fecha',apodo='$apodo',mensaje='$contenido' where id_comentario='$id'")) {
            return 
true;
        }
    }
    
    public function 
ver_comentarios($categoria$id)
    {
        
$todo = array();
        if (
$ver = @mysql_query("SELECT id_noticia,id_comentario,apodo,mensaje,fecha FROM comentarios_$categoria")) {
            while (
$que = @mysql_fetch_array($ver)) {
                if (
$que[0] == 1) {
                    
array_push($todo$que);
                }
            }
            return array(
                
$todo
            
);
        }
        
    }
    
    
    public function 
borrar_comentario($categoria$id)
    {
        if (
is_numeric($id)) {
            if (@
mysql_query("DELETE FROM comentarios_$categoria where id_comentario='$id'")) {
                return 
true;
            }
        }
    }
    
    
    public function 
cantidad_posts($categoria)
    {
        
$valor    mysql_query("SELECT MAX(id) FROM categoria_$categoria");
        
$cantidad mysql_fetch_row($valor);
        return 
$cantidad[0];
    }
    
    
    public function 
cerrar()
    {
        if (
mysql_close()) {
            return 
true;
        }
    }
    
}

// The End ?

?>



Ahora creen el siguiente codigo llamado admin.php :

Código (php) [Seleccionar]

<?php

include("login_now.php"); // LLamamos al archivo LoginNow.php
include("noticion.php"); // Llamamos al archivo noticion.php

$username "admin"// Declaramos el usuario
$password "21232f297a57a5a743894a0e4a801fc3"// Declaramos el password "admin" en md5

$host_mysql  "localhost"// Establecemos el host mysql
$user_mysql  "root"//Establecemos el usuario mysql
$pass_mysql  ""// Establecemos el password mysql
$db_mysql    "noticias"// Establecemos la BD Mysql
$tabla_mysql "test"// Declaramos el nombre de la tabla que contendra las noticias

$categoria "test"// Declaramos la categoria de las noticias

if (isset($_COOKIE['test'])) { // Si existe el cookie test ...
    
$comprobar base64_decode($_COOKIE['test']); // Decodificamos sub contenido que esta en base64 y guardamos su contenido en la variable $comprobar
    
$parte     preg_split("/@/"$comprobar); // Dividimos el usuario y el password que estan en entre @
    
$cookie    = new LoginNow// Creamos el objeto de la clase LoginNow
    
$cookie->campos($parte[0], $parte[1]); // Establecemos los valores del usuario y el password que estan en la variable $parte
    
if ($cookie->secure($username$password)) { // Verificamos con los valores globales que sean realmente los mismos passwords
        
        
$noticia = New noticion// Creamos el objeto noticion
        
$noticia->datos($host_mysql$user_mysql$pass_mysql$db_mysql); // Establecemos los datos Mysql
        
        
if (mysql_num_rows(mysql_query("show tables like 'categoria_$tabla_mysql'"))) { // Verificamos si existe la categoria
            
            
echo "
<title>Administrador</title>
<br><h1><center>Administrador</center></h1><br>
"
;
            
            list(
$noticias) = $noticia->ver_todo($categoria); // Cargamos la lista de noticias
            
            
echo "<center><table border=1>";
            
            foreach (
$noticias as $ver) { // Listamos la lista de noticias
                
echo "<td>" htmlentities($ver[0]) . "</td><td>" htmlentities($ver[1]) . "</td><td>" htmlentities($ver[3]) . "</td><tr>"// Mostramos el ID,Titulo y Fecha
            
}
            echo 
"</table></center><br>";
            
            echo 
"
<center>
<form action='' method=POST>
Titulo : <input type=text name=titulo value=titulo><br><br>
Contenido : <input type=text name=contenido value=test><br><br>
<input type=submit name=publicar value=Publicar>
</form>
</center>
"
;
            
            if (isset(
$_POST['publicar'])) {
                
                if (
$noticia->nueva_noticia(addslashes($_POST['titulo']), addslashes($_POST['contenido']), addslashes(date('Y-m-d')), $categoria)) { // Creamos la noticia ...
                    
echo "<center>Noticia Subida</center>";
                } else {
                    echo 
"<center>Error</center>";
                }
            }
            
        } else {
            
$noticia->crear_categoria($categoria); // Creamos la categoria sino existe
            
echo "Tabla creada , reinicie la pagina";
        }
        
        
$noticia->cerrar();
        
    }
} else {
    
    echo 
"
<title>Login</title>
<br><h1><center>Login</center></h1><br>
<center>
<form action='' method=POST>
Usuario : <input type=text name=usuario><br>
Password : <input type=password name=password><br><br>
<input type=submit name=login value=Entrar><br>
</form>
</center>
"
;
    
    if (isset(
$_POST['login'])) {
        
        
$login1 = new LoginNow// Creamos el objeto de la calse LoginNow 
        
$login1->campos("usuario""password"); // Establecemos los campos html del formulario donde estan el usuario y el password
        
if ($login1->secure($username$password)) { // Verificamos que sean los mismos que los globales
            
$login1->cookienow("test"); // Creamos una cookie llamada "test"
            
echo "<center>Bienvenido administrador</center>";
        } else {
            echo 
"<center>Error en el inicio de sesion</center>";
        }
    }
    
}

?>



Primero modifiquen los datos mysql por los suyos en el admin.php despues entren con el user y pass : "admin" , deberian ver esto :

(http://doddyhackman.webcindario.com/images/panel_dream_1.jpg)

Una vez logeados :

(http://doddyhackman.webcindario.com/images/panel_dream_2.jpg)

Ahora creen las noticias que quieran , yo en mi caso voy a publicar 5 sucesivamente con "titulo" y "test".

Despues de eso mi panel se vera asi :

(http://doddyhackman.webcindario.com/images/panel_dream_3.jpg)

Ahora cargamos la plantilla creada y usada anteriormente con Dream para ir al div "body" y borrar todo lo que contiene para copiar el siguiente codigo en PHP :

Código (php) [Seleccionar]

<?php

include("noticion.php"); // Llamamos al archivo noticion.php

$host_mysql  "localhost"// Establecemos el host mysql
$user_mysql  "root"//Establecemos el usuario mysql
$pass_mysql  ""// Establecemos el password mysql
$db_mysql    "noticias"// Establecemos la BD Mysql
$tabla_mysql "test"// Declaramos el nombre de la tabla que contendra las noticias

$categoria "test"// Declaramos la categoria de las noticias

$noticia = New noticion// Creamos el objeto noticion
$noticia->datos($host_mysql$user_mysql$pass_mysql$db_mysql); // Establecemos los datos Mysql

list($noticias) = $noticia->ver_todo($categoria); // Cargamos la lista de noticias

foreach ($noticias as $ver) { // Listamos la lista de noticias
    
echo "<div class='post'>
<h3>" 
htmlentities($ver[1]) . "</h3> 
<p>" 
htmlentities($ver[2]) . "</p>
</div>"
;
}

?>



Los dos codigos estan identados y comentados para que puedan entender.

Deberian ver algo como esto :

(http://doddyhackman.webcindario.com/images/panel_dream_4.jpg)

Y el resultado de la pagina con el sistema de noticias seria :

(http://doddyhackman.webcindario.com/images/panel_dream_5.jpg)

Eso seria todo.

--========--
The End ?
--========--

Version PDF (http://doddyhackman.webcindario.com/descargas/creacion_de_pagina_con_bd.pdf).

Version en VideoTutoriales :













Cualquier error o sugerencia diganla para mejorar.