API tools faq
paste
Doddy

[Manual] Creacion de una pagina con BD

Doddy
Jan 21st, 2015
470
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 32.21 KB | None | 0 0
raw download clone embed print report
  1. [Titulo] : Creacion de una pagina con BD
  2. [Autor] : Doddy Hackman
  3.  
  4. [Temario]
  5.  
  6. --========================================================--
  7.  
  8. 0x00 : Introduccion
  9. 0x01 : Creacion del diseño de la pagina
  10. 0x02 : Creacion un un logo estilo GTA
  11. 0x03 : Creacion de un footer animado
  12. 0x04 : Creacion de botones en Fireworks
  13. 0x05 : Creacion de un menu desplegable
  14. 0x06 : Creacion un panel de administracion
  15.  
  16. --========================================================--
  17.  
  18. 0x00 : Introduccion
  19.  
  20. 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 :
  21.  
  22. * Adobe Dreamweaver
  23. * Adobe Photoshop
  24. * Adobe Fireworks
  25. * XAMPP O Easy PHP
  26. * Anim-FX
  27. * GifCam
  28. * Un pack de imagenes que pueden descargar [URL=http://doddyhackman.webcindario.com/descargas/pack_manual.rar]aca[/URL] que contiene los fondos que necesitan en el manual y los ultimos dos programas
  29.  
  30. Cuando descarguen el pack copian los datos a una carpeta llamada "images" para usar durante el manual.
  31.  
  32. 0x01 : Creacion del diseño de la pagina
  33.  
  34. Ahora vamos a hacer un diseño como este :
  35.  
  36. [img]http://doddyhackman.webcindario.com/images/dream_segunda_fase.jpg[/img]
  37.  
  38. Para eso vamos a tener que seguir los siguientes pasos :
  39.  
  40. Descargamos el pack que esta en la seccion de "Requisitos" que contiene las imagenes necesarias para hacer la pagina de ejemplo.
  41.  
  42. Iniciamos el Dreamweaver y creamos una nueva pagina como PHP , una vez creado guardamos el proyecto con formato PHP , el directorio puede ser cualquiera.
  43.  
  44. Despues copiamos en el directorio de la pagina la carpeta "images" del pack en el directorio que eligieron para guardar la pagina.
  45.  
  46. Ahora cambiamos volvemos a Dreamweaver y cambiamos el titulo de la pagina "Documento sin título" por "Plantilla".
  47.  
  48. Despues agregamos <center> entre el inicio y final del <body> para centrar la pagina.
  49.  
  50. 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.
  51.  
  52. Todo como en las imagenes :
  53.  
  54. [img]http://doddyhackman.webcindario.com/images/dream_cuadro_1.jpg[/img]
  55.  
  56. [img]http://doddyhackman.webcindario.com/images/dream_cuadro_2.jpg[/img]
  57.  
  58. [img]http://doddyhackman.webcindario.com/images/dream_cuadro_3.jpg[/img]
  59.  
  60. [img]http://doddyhackman.webcindario.com/images/dream_cuadro_4.jpg[/img]
  61.  
  62. [img]http://doddyhackman.webcindario.com/images/dream_cuadro_5.jpg[/img]
  63.  
  64. 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.
  65.  
  66. Como en la imagen :
  67.  
  68. [img]http://doddyhackman.webcindario.com/images/dream_banner.jpg[/img]
  69.  
  70. * Cambien el texto por defecto por "Banner"
  71.  
  72. 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.
  73.  
  74. Como en la imagen :
  75.  
  76. [img]http://doddyhackman.webcindario.com/images/dream_box.jpg[/img]
  77.  
  78. * Borren el texto por defecto
  79.  
  80. 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
  81.  
  82. Como en la imagen :
  83.  
  84. [img]http://doddyhackman.webcindario.com/images/dream_menu.jpg[/img]
  85.  
  86. * Cambien el texto por defecto por "Menu"
  87.  
  88. 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.
  89.  
  90. Como en la imagen :
  91.  
  92. [img]http://doddyhackman.webcindario.com/images/dream_body.jpg[/img]
  93.  
  94. * Cambien el texto por defecto por "Body"
  95.  
  96. 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
  97.  
  98. Como en la imagen :
  99.  
  100. [img]http://doddyhackman.webcindario.com/images/dream_otormenu.jpg[/img]
  101.  
  102. * Cambien el texto por defecto por "OtroMenu"
  103.  
  104. 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.
  105.  
  106. Como en la imagen :
  107.  
  108. [img]http://doddyhackman.webcindario.com/images/dream_footer.jpg[/img]
  109.  
  110. * Cambien el texto por defecto por "Footer"
  111.  
  112. 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.
  113.  
  114. Despues agregamos el siguiente codigo al archivo CSS para poner una imagen de fondo :
  115.  
  116. [code]
  117. body {
  118. background:transparent url("images/fondo1.jpg") repeat scroll 0 0;
  119. color:white;
  120. font-family:helvetica,arial,sans-serif;
  121. font-size:14px;
  122. text-align:center;
  123. }
  124. [/code]
  125.  
  126. En las etiquetas banner,box,footer agreguen el siguiente codigo para darle bordes a los div y una imagen de fondo :
  127.  
  128. [code]
  129. background-image:url("images/fondo2.jpg");
  130. background-color:#000;
  131. border: 3px dashed #00FFFF;
  132. [/code]
  133.  
  134. Si hacemos F12 para ver como nos queda la pagina se nos deberia ver algo asi en el navegador :
  135.  
  136. [img]http://doddyhackman.webcindario.com/images/dream_primera_fase.jpg[/img]
  137.  
  138. Ahora agregamos el siguiente codigo al archivo CSS , para poder agregar el cuadro en el que estaran las categorias,posts y los afiliados :
  139.  
  140. [code]
  141. .categorias {
  142. color:white;
  143. border: 3px dashed #00FFFF;
  144. width:200px;
  145. word-wrap: break-word;
  146. }
  147.  
  148. .post {
  149. background-image:url("images/fondo2.jpg");
  150. background-color:#000;
  151. color:white;
  152. border: 3px dashed #00FFFF;
  153. margin-bottom:10px;
  154. width:560px;
  155. word-wrap: break-word;
  156. }
  157. [/code]
  158.  
  159.  
  160. Despues de eso agregamos el siguiente codigo entre las etiquetas "menu" del archivo PHP que vendria a ser las "Categorias" :
  161.  
  162. [code]
  163. <div class="categorias">
  164. <h3>Categorias</h3>
  165. Link1<br />
  166. Link2<br />
  167. Link3<br />
  168. Link4<br />
  169. Link5<br />
  170. Link6<br />
  171. Link7<br />
  172. Link8<br />
  173. Link9<br />
  174. Link10<br />
  175. <br />
  176. </div>
  177. [/code]
  178.  
  179. Ahora vamos a por los afiliados , vamos a agregar el siguiente codigo entre las etiquetas "otromenu" en el codigo del archivo PHP :
  180.  
  181. [code]
  182. <div class="categorias">
  183. <h3>Afiliados</h3>
  184. Link1<br />
  185. Link2<br />
  186. Link3<br />
  187. Link4<br />
  188. Link5<br />
  189. Link6<br />
  190. Link7<br />
  191. Link8<br />
  192. Link9<br />
  193. Link10<br />
  194. <br />
  195. </div>
  196. [/code]
  197.  
  198. Despues vamos a agregar el siguiente codigo entre las etiquetas "body" para colocar noticias de ejemplo en el archivo PHP :
  199.  
  200. [code]
  201. <div class="post">
  202. <h3>Noticia1</h3>
  203. <p>Contenido de Noticia1</p>
  204. </div>
  205.  
  206. <div class="post">
  207. <h3>Noticia2</h3>
  208. <p>Contenido de Noticia2</p>
  209. </div>
  210.  
  211.  
  212. <div class="post">
  213. <h3>Noticia3</h3>
  214. <p>Contenido de Noticia3</p>
  215. </div>
  216.  
  217.  
  218. <div class="post">
  219. <h3>Noticia4</h3>
  220. <p>Contenido de Noticia4</p>
  221. </div>
  222.  
  223.  
  224. <div class="post">
  225. <h3>Noticia5</h3>
  226. <p>Contenido de Noticia5</p>
  227. </div>
  228.  
  229.  
  230. <div class="post">
  231. <h3>Noticia6</h3>
  232. <p>Contenido de Noticia6</p>
  233. </div>
  234. [/code]
  235.  
  236. Todo el codigo HTML del archivo PHP nos deberia haber quedado algo asi :
  237.  
  238. [code]
  239. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  240. <html xmlns="http://www.w3.org/1999/xhtml">
  241. <head>
  242. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  243. <title>Plantilla</title>
  244. <link href="style.css" rel="stylesheet" type="text/css" />
  245. </head>
  246.  
  247. <body>
  248. <center>
  249. <div class="container">
  250. <div class="banner">Banner</div>
  251. <div class="box">
  252. <div class="menu">
  253. <div class="categorias">
  254. <h3>Categorias</h3>
  255. Link1<br />
  256. Link2<br />
  257. Link3<br />
  258. Link4<br />
  259. Link5<br />
  260. Link6<br />
  261. Link7<br />
  262. Link8<br />
  263. Link9<br />
  264. Link10<br />
  265. <br />
  266. </div>
  267. </div>
  268. <div class="body">
  269. <div class="post">
  270. <h3>Noticia1</h3>
  271. <p>Contenido de Noticia1</p>
  272. </div>
  273.  
  274. <div class="post">
  275. <h3>Noticia2</h3>
  276. <p>Contenido de Noticia2</p>
  277. </div>
  278.  
  279.  
  280. <div class="post">
  281. <h3>Noticia3</h3>
  282. <p>Contenido de Noticia3</p>
  283. </div>
  284.  
  285.  
  286. <div class="post">
  287. <h3>Noticia4</h3>
  288. <p>Contenido de Noticia4</p>
  289. </div>
  290.  
  291.  
  292. <div class="post">
  293. <h3>Noticia5</h3>
  294. <p>Contenido de Noticia5</p>
  295. </div>
  296.  
  297.  
  298. <div class="post">
  299. <h3>Noticia6</h3>
  300. <p>Contenido de Noticia6</p>
  301. </div>
  302. </div>
  303. <div class="otromenu">
  304. <div class="categorias">
  305. <h3>Afiliados</h3>
  306. Link1<br />
  307. Link2<br />
  308. Link3<br />
  309. Link4<br />
  310. Link5<br />
  311. Link6<br />
  312. Link7<br />
  313. Link8<br />
  314. Link9<br />
  315. Link10<br />
  316. <br />
  317. </div>
  318. </div>
  319. </div>
  320. <div class="footer">Footer</div>
  321. </div>
  322. </center>
  323. </body>
  324. </html>
  325. [/code]
  326.  
  327. Si hicieron todo bien la pagina les deberia haber quedado algo como esto :
  328.  
  329. [img]http://doddyhackman.webcindario.com/images/dream_segunda_fase.jpg[/img]
  330.  
  331. Eso seria todo por ahora en el diseño.
  332.  
  333. 0x02 : Creacion un logo estilo GTA
  334.  
  335. Para crear un logo estilo GTA en Photoshop deben instalar primero la fuente necesaria del siguiente [URL=http://www.dafont.com/es/pricedown.font?text=pricedown]link[/URL] , 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 :
  336.  
  337. Creamos un proyecto con las dimensiones 995x108 y fondo transparente como en la siguiente imagen :
  338.  
  339. [img]http://doddyhackman.webcindario.com/images/photo_logo_1.jpg[/img]
  340.  
  341. 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 :
  342.  
  343. [img]http://doddyhackman.webcindario.com/images/photo_logo_2.jpg[/img]
  344.  
  345. 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 :
  346.  
  347. [img]http://doddyhackman.webcindario.com/images/photo_logo_3.jpg[/img]
  348.  
  349. 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 :
  350.  
  351. [img]http://doddyhackman.webcindario.com/images/photo_logo_4.jpg[/img]
  352.  
  353. [img]http://doddyhackman.webcindario.com/images/photo_logo_5.jpg[/img]
  354.  
  355. 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 :
  356.  
  357. [img]http://doddyhackman.webcindario.com/images/photo_logo_6.jpg[/img]
  358.  
  359. [img]http://doddyhackman.webcindario.com/images/photo_logo_7.jpg[/img]
  360.  
  361. 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 :
  362.  
  363. [img]http://doddyhackman.webcindario.com/images/photo_logo_8.jpg[/img]
  364.  
  365. 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.
  366.  
  367. Nos deberia quedar algo asi :
  368.  
  369. [img]http://doddyhackman.webcindario.com/images/photo_logo_9.jpg[/img]
  370.  
  371. 0x03 : Creacion de un footer animado
  372.  
  373. Cargamos el programa "Anim-FX" y llenamos los campos de la siguiente forma :
  374.  
  375. Text 1 : TEST 1
  376. 2 : TEST 2
  377. 3 : TEST 3
  378. 4 : TEST 4
  379. 5 : TEST 5
  380.  
  381. Tipo de efecto : flash
  382.  
  383. Tamaño de letra : 145
  384. Color de letra : El color es celeste claro que vendria a ser 52FEFD
  385.  
  386. Se les deberia ver algo asi :
  387.  
  388. [img]http://doddyhackman.webcindario.com/images/footer_1.jpg[/img]
  389.  
  390. Ahora cargamos el GifCam y hacemos click en "Rec" sobre la zona de la animacion que quieren grabar.
  391. Despues de terminar de grabar hacemos click en "Stop" y despues en "Save" para despues grabar el gif donde quieran
  392.  
  393. 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.
  394.  
  395. Se les deberia ver algo asi :
  396.  
  397. [img]http://doddyhackman.webcindario.com/images/footer_2.jpg[/img]
  398.  
  399. Eso seria todo el footer animado.
  400.  
  401. 0x04 : Creacion de botones en Fireworks
  402.  
  403. 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".
  404.  
  405. Les deberia quedar asi :
  406.  
  407. [img]http://doddyhackman.webcindario.com/images/boton_fireworks_1.jpg[/img]
  408.  
  409. Una vez hecho esto vamos al cuadro de herramientas y seleccionamos "Rectangulo redondeado" de la herramienta "Rectangulo" que se encuentra en la seccion "Vector".
  410. 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 :
  411.  
  412. [img]http://doddyhackman.webcindario.com/images/boton_fireworks_2.jpg[/img]
  413.  
  414. [img]http://doddyhackman.webcindario.com/images/boton_fireworks_3.jpg[/img]
  415.  
  416. [img]http://doddyhackman.webcindario.com/images/boton_fireworks_4.jpg[/img]
  417.  
  418. 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.
  419.  
  420. 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.
  421.  
  422. Les deberia quedar algo asi , yo en mi caso elegi letra blanca :
  423.  
  424. [img]http://doddyhackman.webcindario.com/images/boton_fireworks_5.jpg[/img]
  425.  
  426. Para terminar vamos a "Archivo->Guardar como" y guardamos el boton con el nombre que quieran , el formato que tendra sera de PNG.
  427.  
  428. 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 :
  429.  
  430. [code]
  431. <a href="http://www.petardas.com"><img src="images/click.png"></a><br />
  432. [/code]
  433.  
  434. Recuerden que el boton creado tiene que estar en una carpeta llamada images sino nunca se va a encontrar el boton.
  435.  
  436. Cambien petardas por el link que quieran y cambien click.png por el verdadero nombre y ruta del boton.
  437.  
  438. En mi caso use tres veces esa linea de codigo como ejemplo.
  439.  
  440. Les deberia quedar algo asi :
  441.  
  442. [img]http://doddyhackman.webcindario.com/images/boton_fireworks_6.jpg[/img]
  443.  
  444. [img]http://doddyhackman.webcindario.com/images/boton_fireworks_7.jpg[/img]
  445.  
  446. Y en el navegador se deberia ver asi :
  447.  
  448. [img]http://doddyhackman.webcindario.com/images/boton_fireworks_8.jpg[/img]
  449.  
  450. Eso seria todo con los botones.
  451.  
  452. 0x05 : Creacion de un menu desplegable
  453.  
  454. 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 :
  455.  
  456. Insertar->Spry->Barra de menus de Spry y en la ventana que aparece seleccionamos "Vertical".
  457.  
  458. Deberiamos ver algo asi :
  459.  
  460. [img]http://doddyhackman.webcindario.com/images/menu_dream_1.jpg[/img]
  461.  
  462. 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.
  463.  
  464. 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"
  465.  
  466. Deberian ver algo asi :
  467.  
  468. [img]http://doddyhackman.webcindario.com/images/menu_dream_2.jpg[/img]
  469.  
  470. Ahora vamos a tunear el menu con colores raros con las siguientes pasos :
  471.  
  472. 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"
  473.  
  474. [img]http://doddyhackman.webcindario.com/images/menu_dream_3.jpg[/img]
  475.  
  476. Ahora vamos a la categoria "Borde" , en Estilo seleccionamos "doble" para todos , ancho 3 para todos y de color #2EFEF7 para todos.
  477.  
  478. Deberia quedar asi :
  479.  
  480. [img]http://doddyhackman.webcindario.com/images/menu_dream_4.jpg[/img]
  481.  
  482. Despues vamos a "Estilos CSS" y despues a "Todo" para despues desplegar SpryMenuBarVertical.css.
  483.  
  484. 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"
  485.  
  486. Quedando asi :
  487.  
  488. [img]http://doddyhackman.webcindario.com/images/menu_dream_5.jpg[/img]
  489.  
  490. [img]http://doddyhackman.webcindario.com/images/menu_dream_6.jpg[/img]
  491.  
  492. [img]http://doddyhackman.webcindario.com/images/menu_dream_7.jpg[/img]
  493.  
  494. 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".
  495.  
  496. [img]http://doddyhackman.webcindario.com/images/menu_dream_8.jpg[/img]
  497.  
  498. [img]http://doddyhackman.webcindario.com/images/menu_dream_9.jpg[/img]
  499.  
  500. [img]http://doddyhackman.webcindario.com/images/menu_dream_10.jpg[/img]
  501.  
  502. Como menu final se les deberia ver algo asi :
  503.  
  504. [img]http://doddyhackman.webcindario.com/images/menu_dream_11.jpg[/img]
  505.  
  506. Eso seria todo en el menu.
  507.  
  508. 0x06 : Creacion un panel de administracion
  509.  
  510. Para empezar activemos el XAMPP o Easy PHP , despues creen las siguientes clases PHP en el directorio donde esta la pagina :
  511.  
  512. login_now.php
  513.  
  514. [code]
  515. <?php
  516.  
  517. /*
  518.  
  519. Class : LoginNow
  520.  
  521. (c) Doddy Hackman 2015
  522.  
  523. */
  524.  
  525. class LoginNow
  526. {
  527.  
  528. private $host;
  529. private $db;
  530. private $user;
  531. private $pass;
  532. private $tabla;
  533. private $columna1;
  534. private $columna2;
  535. private $usereal;
  536. private $passreal;
  537. private $campouser;
  538. private $campopass;
  539. private $cookiename;
  540.  
  541. public function campos($campouser, $campopass)
  542. {
  543. if (isset($_POST[$campouser])) {
  544. $this->campouser = $_POST[$campouser];
  545. $this->campopass = md5($_POST[$campopass]);
  546. } else {
  547. $this->campouser = $campouser;
  548. $this->campopass = $campopass;
  549. }
  550. }
  551.  
  552. public function database($host, $dbuser, $dbpass, $db, $tabla, $columna1, $columna2)
  553. {
  554. mysql_connect($host, $dbuser, $dbpass);
  555. mysql_select_db($db);
  556. $que = mysql_query("SELECT * FROM " . $tabla);
  557. while ($test = mysql_fetch_array($que)) {
  558. if ($this->campouser == $test[$columna1] and $this->campopass == $test[password]) {
  559. $this->usereal = $test[$columna1];
  560. $this->passreal = $test[$columna2];
  561. return true;
  562. }
  563. }
  564. }
  565.  
  566. public function secure($user, $pass)
  567. {
  568. if ($this->campouser == $user and $this->campopass == $pass) {
  569. $this->usereal = $user;
  570. $this->passreal = $pass;
  571. return true;
  572. } else {
  573. return false;
  574. }
  575. }
  576.  
  577. public function cookienow($cookiename)
  578. {
  579. setcookie($cookiename, base64_encode($this->usereal . "@" . $this->passreal));
  580. }
  581.  
  582. }
  583.  
  584. ?>
  585. [/code]
  586.  
  587. noticion.php
  588.  
  589. [code]
  590. <?php
  591.  
  592. /*
  593.  
  594. PHP Class : Noticion 1.0
  595.  
  596. (C) Doddy Hackman 2015
  597.  
  598. */
  599.  
  600.  
  601. class noticion
  602. {
  603.  
  604. private $db;
  605.  
  606. public function datos($host, $user, $pass, $db)
  607. {
  608.  
  609. $this->db = $db;
  610.  
  611. if (@mysql_connect($host, $user, $pass)) {
  612. if (@mysql_select_db($db)) {
  613. return true;
  614. }
  615. }
  616. }
  617.  
  618. public function crear_categoria($nuevacategoria)
  619. {
  620.  
  621. $todo1 = "create table categoria_$nuevacategoria (
  622. id int(10) UNSIGNED NOT NULL AUTO_INCREMENT,
  623. titulo VARCHAR(255) NOT NULL,
  624. contenido TEXT NOT NULL,
  625. fecha VARCHAR(255) NOT NULL,
  626. PRIMARY KEY (id));
  627. ";
  628.  
  629. $todo2 = "create table comentarios_$nuevacategoria (
  630. id_noticia int(10),
  631. id_comentario int(10) UNSIGNED NOT NULL AUTO_INCREMENT,
  632. mensaje TEXT NOT NULL,
  633. apodo VARCHAR(255) NOT NULL,
  634. fecha VARCHAR(255) NOT NULL,
  635. PRIMARY KEY (id_comentario));
  636. ";
  637.  
  638. if (@mysql_query($todo1)) {
  639. if (@mysql_query($todo2)) {
  640. return true;
  641. }
  642. }
  643.  
  644. }
  645.  
  646. public function eliminar_categoria($eliminarcategoria)
  647. {
  648.  
  649. if (@mysql_query("DROP TABLE categoria_$eliminarcategoria")) {
  650. if (@mysql_query("DROP TABLE comentarios_$eliminarcategoria")) {
  651. return true;
  652. }
  653.  
  654. }
  655. }
  656.  
  657.  
  658. public function eliminar($id, $categoria)
  659. {
  660. if (is_numeric($id)) {
  661. if (@mysql_query("DELETE FROM categoria_$categoria where id='$id'")) {
  662. return true;
  663. }
  664. }
  665. }
  666.  
  667. public function nueva_noticia($x_titulo, $x_contenido, $x_fecha, $categoria)
  668. {
  669. $sumo = mysql_query("SELECT MAX(id) FROM categoria_$categoria");
  670.  
  671. $s = mysql_fetch_row($sumo);
  672.  
  673. foreach ($s as $d) {
  674. $x_id = $d + 1;
  675. }
  676. if (@mysql_query("INSERT INTO categoria_$categoria(id,titulo,contenido,fecha)values('$x_id','$x_titulo','$x_contenido','$x_fecha')")) {
  677. return true;
  678. }
  679. }
  680.  
  681. public function ver_este($id, $categoria)
  682. {
  683. if (is_numeric($id)) {
  684. $total = array();
  685. if ($que = @mysql_query("SELECT id,titulo,contenido,fecha FROM categoria_$categoria WHERE id='$id'")) {
  686. while ($ver = @mysql_fetch_array($que)) {
  687. return array(
  688. $ver[0],
  689. $ver[1],
  690. $ver[2],
  691. $ver[3]
  692. );
  693. }
  694. }
  695. }
  696. }
  697.  
  698. public function listar_categorias()
  699. {
  700.  
  701. $found = array();
  702.  
  703. if ($re = @mysql_query("show tables from " . $this->db)) {
  704.  
  705. while ($dat = mysql_fetch_row($re)) {
  706. $separo = split("_", $dat[0]);
  707. array_push($found, $separo[1]);
  708. }
  709. return array(
  710. $found
  711. );
  712. }
  713.  
  714. }
  715.  
  716. public function ver_todo($categoria)
  717. {
  718. $total = array();
  719. if ($que = @mysql_query("SELECT id,titulo,contenido,fecha FROM categoria_$categoria")) {
  720. while ($ver = @mysql_fetch_array($que)) {
  721. array_push($total, $ver);
  722. }
  723. return array(
  724. $total
  725. );
  726. }
  727. }
  728.  
  729. public function mod($categoria, $id, $tit, $con, $fech)
  730. {
  731. if (@mysql_query("UPDATE categoria_$categoria SET id='$id',titulo='$tit',contenido='$con',fecha='$fech' where id='$id'")) {
  732. return true;
  733. }
  734. }
  735.  
  736. public function crear_comentario($categoria, $id_noticia, $fecha, $apodo, $mensaje)
  737. {
  738.  
  739. $sumo = mysql_query("SELECT MAX(id_comentario) FROM comentarios_$categoria");
  740.  
  741. $s = mysql_fetch_row($sumo);
  742.  
  743. foreach ($s as $d) {
  744. $x_id = $d + 1;
  745. }
  746.  
  747. if (mysql_query("INSERT INTO comentarios_$categoria(fecha,apodo,mensaje,id_noticia,id_comentario)values('$fecha','$apodo','$mensaje','$id_noticia','$x_id')")) {
  748. return true;
  749. }
  750.  
  751. }
  752.  
  753. public function mod_comentario($categoria, $id, $fecha, $apodo, $contenido)
  754. {
  755. if (@mysql_query("UPDATE comentarios_$categoria SET id_comentario='$id',fecha='$fecha',apodo='$apodo',mensaje='$contenido' where id_comentario='$id'")) {
  756. return true;
  757. }
  758. }
  759.  
  760. public function ver_comentarios($categoria, $id)
  761. {
  762. $todo = array();
  763. if ($ver = @mysql_query("SELECT id_noticia,id_comentario,apodo,mensaje,fecha FROM comentarios_$categoria")) {
  764. while ($que = @mysql_fetch_array($ver)) {
  765. if ($que[0] == 1) {
  766. array_push($todo, $que);
  767. }
  768. }
  769. return array(
  770. $todo
  771. );
  772. }
  773.  
  774. }
  775.  
  776.  
  777. public function borrar_comentario($categoria, $id)
  778. {
  779. if (is_numeric($id)) {
  780. if (@mysql_query("DELETE FROM comentarios_$categoria where id_comentario='$id'")) {
  781. return true;
  782. }
  783. }
  784. }
  785.  
  786.  
  787. public function cantidad_posts($categoria)
  788. {
  789. $valor = mysql_query("SELECT MAX(id) FROM categoria_$categoria");
  790. $cantidad = mysql_fetch_row($valor);
  791. return $cantidad[0];
  792. }
  793.  
  794.  
  795. public function cerrar()
  796. {
  797. if (mysql_close()) {
  798. return true;
  799. }
  800. }
  801.  
  802. }
  803.  
  804. // The End ?
  805.  
  806. ?>
  807. [/code]
  808.  
  809. Ahora creen el siguiente codigo llamado admin.php :
  810.  
  811. [code]
  812. <?php
  813.  
  814. include("login_now.php"); // LLamamos al archivo LoginNow.php
  815. include("noticion.php"); // Llamamos al archivo noticion.php
  816.  
  817. $username = "admin"; // Declaramos el usuario
  818. $password = "21232f297a57a5a743894a0e4a801fc3"; // Declaramos el password "admin" en md5
  819.  
  820. $host_mysql = "localhost"; // Establecemos el host mysql
  821. $user_mysql = "root"; //Establecemos el usuario mysql
  822. $pass_mysql = ""; // Establecemos el password mysql
  823. $db_mysql = "noticias"; // Establecemos la BD Mysql
  824. $tabla_mysql = "test"; // Declaramos el nombre de la tabla que contendra las noticias
  825.  
  826. $categoria = "test"; // Declaramos la categoria de las noticias
  827.  
  828. if (isset($_COOKIE['test'])) { // Si existe el cookie test ...
  829. $comprobar = base64_decode($_COOKIE['test']); // Decodificamos sub contenido que esta en base64 y guardamos su contenido en la variable $comprobar
  830. $parte = preg_split("/@/", $comprobar); // Dividimos el usuario y el password que estan en entre @
  831. $cookie = new LoginNow; // Creamos el objeto de la clase LoginNow
  832. $cookie->campos($parte[0], $parte[1]); // Establecemos los valores del usuario y el password que estan en la variable $parte
  833. if ($cookie->secure($username, $password)) { // Verificamos con los valores globales que sean realmente los mismos passwords
  834.  
  835. $noticia = New noticion; // Creamos el objeto noticion
  836. $noticia->datos($host_mysql, $user_mysql, $pass_mysql, $db_mysql); // Establecemos los datos Mysql
  837.  
  838. if (mysql_num_rows(mysql_query("show tables like 'categoria_$tabla_mysql'"))) { // Verificamos si existe la categoria
  839.  
  840. echo "
  841. <title>Administrador</title>
  842. <br><h1><center>Administrador</center></h1><br>
  843. ";
  844.  
  845. list($noticias) = $noticia->ver_todo($categoria); // Cargamos la lista de noticias
  846.  
  847. echo "<center><table border=1>";
  848.  
  849. foreach ($noticias as $ver) { // Listamos la lista de noticias
  850. echo "<td>" . $ver[0] . "</td><td>" . $ver[1] . "</td><td>" . $ver[3] . "</td><tr>"; // Mostramos el ID,Titulo y Fecha
  851. }
  852. echo "</table></center><br>";
  853.  
  854. echo "
  855. <center>
  856. <form action='' method=POST>
  857. Titulo : <input type=text name=titulo value=titulo><br><br>
  858. Contenido : <input type=text name=contenido value=test><br><br>
  859. <input type=submit name=publicar value=Publicar>
  860. </form>
  861. </center>
  862. ";
  863.  
  864. if (isset($_POST['publicar'])) {
  865.  
  866. if ($noticia->nueva_noticia(addslashes($_POST['titulo']), addslashes($_POST['contenido']), addslashes(date('Y-m-d')), $categoria)) { // Creamos la noticia ...
  867. echo "<center>Noticia Subida</center>";
  868. } else {
  869. echo "<center>Error</center>";
  870. }
  871. }
  872.  
  873. } else {
  874. $noticia->crear_categoria($categoria); // Creamos la categoria sino existe
  875. echo "Tabla creada , reinicie la pagina";
  876. }
  877.  
  878. $noticia->cerrar();
  879.  
  880. }
  881. } else {
  882.  
  883. echo "
  884. <title>Login</title>
  885. <br><h1><center>Login</center></h1><br>
  886. <center>
  887. <form action='' method=POST>
  888. Usuario : <input type=text name=usuario><br>
  889. Password : <input type=password name=password><br><br>
  890. <input type=submit name=login value=Entrar><br>
  891. </form>
  892. </center>
  893. ";
  894.  
  895. if (isset($_POST['login'])) {
  896.  
  897. $login1 = new LoginNow; // Creamos el objeto de la calse LoginNow
  898. $login1->campos("usuario", "password"); // Establecemos los campos html del formulario donde estan el usuario y el password
  899. if ($login1->secure($username, $password)) { // Verificamos que sean los mismos que los globales
  900. $login1->cookienow("test"); // Creamos una cookie llamada "test"
  901. echo "<center>Bienvenido administrador</center>";
  902. } else {
  903. echo "<center>Error en el inicio de sesion</center>";
  904. }
  905. }
  906.  
  907. }
  908.  
  909. ?>
  910. [/code]
  911.  
  912. Primero modifiquen los datos mysql por los suyos en el admin.php despues entren con el user y pass : "admin" , deberian ver esto :
  913.  
  914. [img]http://doddyhackman.webcindario.com/images/panel_dream_1.jpg[/img]
  915.  
  916. Una vez logeados :
  917.  
  918. [img]http://doddyhackman.webcindario.com/images/panel_dream_2.jpg[/img]
  919.  
  920. Ahora creen las noticias que quieran , yo en mi caso voy a publicar 5 sucesivamente con "titulo" y "test".
  921.  
  922. Despues de eso mi panel se vera asi :
  923.  
  924. [img]http://doddyhackman.webcindario.com/images/panel_dream_3.jpg[/img]
  925.  
  926. 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 :
  927.  
  928. [code]
  929. <?php
  930.  
  931. include("noticion.php"); // Llamamos al archivo noticion.php
  932.  
  933. $host_mysql = "localhost"; // Establecemos el host mysql
  934. $user_mysql = "root"; //Establecemos el usuario mysql
  935. $pass_mysql = ""; // Establecemos el password mysql
  936. $db_mysql = "noticias"; // Establecemos la BD Mysql
  937. $tabla_mysql = "test"; // Declaramos el nombre de la tabla que contendra las noticias
  938.  
  939. $categoria = "test"; // Declaramos la categoria de las noticias
  940.  
  941. $noticia = New noticion; // Creamos el objeto noticion
  942. $noticia->datos($host_mysql, $user_mysql, $pass_mysql, $db_mysql); // Establecemos los datos Mysql
  943.  
  944. list($noticias) = $noticia->ver_todo($categoria); // Cargamos la lista de noticias
  945.  
  946. foreach ($noticias as $ver) { // Listamos la lista de noticias
  947. echo "<div class='post'>
  948. <h3>" . $ver[1] . "</h3>
  949. <p>" . $ver[2] . "</p>
  950. </div>";
  951. }
  952.  
  953. ?>
  954. [/code]
  955.  
  956. Los dos codigos estan identados y comentados para que puedan entender.
  957.  
  958. Deberian ver algo como esto :
  959.  
  960. [img]http://doddyhackman.webcindario.com/images/panel_dream_4.jpg[/img]
  961.  
  962. Y el resultado de la pagina con el sistema de noticias seria :
  963.  
  964. [img]http://doddyhackman.webcindario.com/images/panel_dream_5.jpg[/img]
  965.  
  966. Eso seria todo.
  967.  
  968. --========--
  969. The End ?
  970. --========--
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!