Tag Archive for: PHP

DB.php : Como definir los parametros de conexión de tu base de datos

Categories: MySQL, PHP, Tutoriales - Tags: , ,

En mis diseños siempre defino los valores de conexión a la base de datos en un archivo php llamado db.php  (database name, username, password, database host), de forma que cada vez que necesito conectarme tan solo tengo que hacer un include del mismo.

Una vez que tengamos creado nuestra base de datos a traves de phpMyAdmin o desde nuestro gestor en el hosting, tan solo tenemos que crear este archivo, que es muy sencillo y solo ocupa unas lineas.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<?
//datos de conexion que hay que editar con los que corresponda
$GLOBALS['DB_IP'] = 'localhost';
$GLOBALS['DB_USER'] = 'unnombredeusuario';
$GLOBALS['DB_PASS'] = 'unpassword';
$GLOBALS['DB_NAME'] = 'nombredelabasededatos';
 
//
// Funcion que vamos a usar para realizar la conexion (Acá no se edita nada)
//
function get_db_conn() {
$conn = mysql_connect($GLOBALS['DB_IP'], $GLOBALS['DB_USER'], $GLOBALS['DB_PASS']);
 
mysql_select_db($GLOBALS['DB_NAME'], $conn);
if (!$conn) {
echo "No pudo conectarse a la BD: " . mysql_error();
exit;
}
 
return $conn;
}
?>

Con eso ya tendriamos los datos de conexión listos, aunque yo siempre agrego una pequeña funcion para proteger los datos de inyección SQL (o como dicen en ingles SQL INJECTIONS).Por lo que me aseguro que cada vez que carga una conexion , cargo también la funcion que me va a ayudar a protegerme.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
//PARA PROTEGER SQL INJECT
function cleanQuery($string){
 
if(get_magic_quotes_gpc())   {
 
$string = stripslashes($string);
}
if (phpversion() >= '4.3.0') {
 
$string = mysql_real_escape_string($string);
}
else {
 
$string = mysql_escape_string($string);
}
return $string;
}

Por lo tanto nuestro archivo db.php queria de la siguiente manera:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
 
<?
$GLOBALS['DB_IP'] = 'localhost';
$GLOBALS['DB_USER'] = 'unnombredeusuario';
$GLOBALS['DB_PASS'] = 'unpassword';
$GLOBALS['DB_NAME'] = 'nombredelabasededatos';
 
//
// Database queries
//
function get_db_conn() {
$conn = mysql_connect($GLOBALS['DB_IP'], $GLOBALS['DB_USER'], $GLOBALS['DB_PASS']);
 
mysql_select_db($GLOBALS['DB_NAME'], $conn);
if (!$conn) {
echo "No pudo conectarse a la BD: " . mysql_error();
exit;
}
 
return $conn;
}
 
//PARA PROTEGER SQL INJECT
function cleanQuery($string)
{
if(get_magic_quotes_gpc())  // prevents duplicate backslashes
{
$string = stripslashes($string);
}
if (phpversion() >= '4.3.0')
{
$string = mysql_real_escape_string($string);
}
else
{
$string = mysql_escape_string($string);
}
return $string;
}
?>

Una vez armado el db.php , solo nos queda incluirlo en nuestras páginas. y lo haremos de la siguiente manera:

1
<?php include('config.php'); ?>

Una vez incluido nuestro archivo podemos realizar una nueva conexión de la siguiente forma:

1
2
//Creamos la variable $conn y le asignamos la conexión a la base de datos
$conn=get_db_conn();

La función cleanQuery la vamos a usar para “limpiar” las variables. Si juntamos todo los visto anteriormente y suponiendo que tenemos un archivo llamado busquedas.php al cual le pasamos una variable $_GET['pelicula'] podriamos dejar el código de la siguiente manera:

EJ:busquedas.php?pelicula=killBill

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<?php
include('config.php');
$conn=get_db_conn();
 
$nombrePelicula= cleanQuery($_GET['pelicula']);
 
$consulta="SELECT * FROM peliculas WHERE nombre='$nombrePelicula'";
 
$peliculas=mysql_query($consulta, $conn);
 
if(!$peliculas){
 die('Invalid query: ' . mysql_error());
}else{
  //la consulta se ejecuto correctamente y mostramos los datos
   ?> <table><thead>
        <tr><th>Título</th><th>Director</th><th> Año de producción</th></tr>
        </thead>
        <tbody>
    <? while($row = mysql_fecth_assoc($peliculas)){  ?>
        <tr><td><? echo $row['nombre']; ?> </td><td> <? echo $row['director']; ?> </td><td> <?echo $row['año']; ?> </td></tr>
       <?  } ?>
      </tbody>
      </table>

Esta sería la forma sencilla de configurar las conexiones a una base de datos. Por favor comenten cualquier duda que vaya surgiendo. Un Saludo

Descargar db.php

Como instalar apache + php + mysql + phpMyAdmin en windows

Categories: Tutoriales, Windows - Tags: , , , ,

AppServ es un software que nos permite instalar sobre Windows: Apache, PHP, MySQL y phpMyAdmin (interfaz gráfica para adminsitrar MySQL) de forma conjunta. Es una aplicación muy útil porque en unos pocos pasos podemos tener un servidor corriendo y listo para hacer pruebas. Así que no nos va a hacer falta contratar un servidor , dominio, etc..

Home Page Appserv

Home Page Appserv

Esta es la forma más facil de diseñar sin tener que estar subiendo archivos a tu servidor, ya que una vez que tenemos todo listo lo subimos y punto.

Para instalar AppServ tenemos que seguir los siguientes pasos:

  • En primer lugar descargamos el último paquete desde SourceForge
  • Una vez descargado el ejecutable procedemos a ejecutar la instalación, vamos a ver el  mensaje de bienvenida y hacemos Click en Next
  • Directorio de Instalación: en esta pantalla nos solicita el directorio en el que queremos instalar la aplicación, por defecto nos marca “c:/appserv”, lo cambiamos si queremos y pulsamos Next.
  • Tipo de Instalación: Elegimos Typical.
  • Server Information: La casilla Server Name la dejamos como viene por defecto con “Localhost” y en la casilla Administrator E-mail Address o lo dejamos como viene por defecto y luego lo cambiamos, o le introducimos una cuenta de correo que sera la del administrador. El campo “HTTP Port” lo dejamos como viene por defecto (80), salvo que queramos que el servidor atienda les peticiones en otro puerto. Pulsamos en Next
  • MySql Information: Este es uno de los apartados más importantes ya que empezamos a instalar MySQL. En la casilla Username introduciremos el nombre del administrador de la base de datos y en la casilla Password le introducimos la contraseña, aunque si queremos hacerlo más fácil ponemos como usuario: root y el apartado contraseña lo dejamos vacio ya que posteriormente podemos cambiarlo con phpMyAdmin. El apartado Charset lo dejamos tal como viene por defecto. Pulsamos en Next
  • Progreso de la instalación: Empieza realmente la instalación mostrandonos una barra de progreso hasta que aparece una pantalla que nos avisa de que ha finalizado la misma, debiendo dejar marcadas las opciones que vienen por defecto. Finalmente pulsamos en Close.
  • Comprobación de la instalación: Si hemos hecho bien los deberes al poner en nuestro navegador: http://localhost nos debe aparecer la pantalla de AppServ Open Project con algunos link como el phpInfo o a phpmyadmin

Si esta pantalla no aparece supone que bien Apache o MySQL no están funcionado bien, y debemos volver a instalarlo.

Y por ultimo nos queda empezar a diseñar nuestros archivos html ,php, etc y poder practicar un poco en nuestra maquina local antes de lanzarnos a internet.

Introducción al diseño web con PHP + CSS – Parte III -

Categories: Tutoriales - Tags: , ,

En el primer post vimos como sería la estructura básica de una web y su correspondiente código HTML. En el segundo tutorial le aplicamos estilo mediante CSS y le añadimos una barra de navegación.

Bien , en esta última parte del tutorial vamos a ver como vamos a ir cargando las diferentes “secciones” de la web en lo que sería la columna izquierda de nuestra web. Para ello necesitamos comprobar el valor de la variable $_GET['page'] y segun sea su valor cargar un contenido u otro. Para ello hacemos lo siguiente:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
       <?php
//Este código lo ponemos dentro del div column_left que es el contenido que vamos a ir cambiando.
//Se comprueba que la variable page esta creada y su valor
if(isset($_GET['page']) && $_GET['page']=='registrarse'){
// include registrarse
include('include/in-registrar.php');
//Si no , se comprueba el valor nuevamente
} elseif(isset($_GET['page']) && $_GET['page']=='login'){
// include login
include('include/in-login.php');
//Si no , se comprueba el valor nuevamente
} elseif(isset($_GET['page']) && $_GET['page']=='contacto'){
// include contacto
include('include/in-contacto.php');
// En cualquier otro caso , mostramos el home
} else {
include('include/in-home.php');
}
?>

Con esto tendriamos la web casi echa, con una columna derecha fija y la parte izquierda dinámica. Podriamos añadir un poquito más de estilo CSS para darle forma, resultando nuestro archivo final asi:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
/* ------------------------------
Estructura de la página
------------------------------ */
 
/*
#container tiene un ancho absoluto de 780 pixeles.
El ancho de los elentos internos estan establecidos a auto,
por lo que todos tendrán el ancho del elemento contenedor.
*/
#container{width:780px; margin:0 auto;
border:7px solid #CCCCCC;
padding:20px;
}
p{
font:11px Verdana;
text-align:justify;
}
/***************Header**********************/
#topbar{width:auto; display:block; height:80px;
border:1px solid #191919;
}
                 /****Barra de navegación*****/
#navbar{width:auto; display:block; height:24px;}
#navbar ul, #navbar ul li{padding:0; margin:0; list-style:none; float:left;}
#navbar a{color:#FFFFFF; font-weight:bold;}
#navbar a:hover{color:red;}
#navbar li a:link, #navbar li a:visited {background:#444444; text-decoration:none; height:24px; line-height:24px; display:inline; float:left; width:auto; padding:0px 10px;}
 
/***************Contenido principal************/
#main{width:auto; display:block;}
#column_left{width:560px; margin-right:20px; float:left;}
#column_right{width:200px; float:left;}
 
/*
div.spacer, soluciona el alto de #main en diseños con 2 columnas
*/
div.spacer{clear:both; height:10px; display:block;}
 
/***************footer*********************/
#footer{width:auto; display:block; height:24px;
border-top:1px solid;
text-align:center;
}

Y el código HTML de la siguiente forma:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitio nal.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 
<link href="css/default.css" rel="stylesheet" type="text/css" />
<title>page title</title>
</head>
 
<body>
<div id="container">
               <div id="topbar"> ...Contenido del topbar donde podemos poner un logo por ej </div>
               <div id="navbar"><ul>
                                            <li><a href="index.php?page=home"> Home</a></li>
                                            <li><a href="index.php?page=registrarse"> Registrarse </a></li>
                                            <li><a href="index.php?page=login"> Login</a></li>
                                            <li><a href="index.php?page=contacto"> Contacto</a></li>
                                            </ul>
                </div>
<!-- Sección principal en la cual cargaremos las páginas usando variables URL y la función de PHP include() -->
               <div id="main">
                     <div id="column_left"> 
                     <?php
//Este código lo ponemos dentro del div column_left que es el contenido que vamos a ir cambiando.
//Se comprueba que la variable page esta creada y su valor
if(isset($_GET['page']) && $_GET['page']=='registrarse'){
// include registrarse
include('include/in-registrar.php');
//Si no , se comprueba el valor nuevamente
} elseif(isset($_GET['page']) && $_GET['page']=='login'){
// include login
include('include/in-login.php');
//Si no , se comprueba el valor nuevamente
} elseif(isset($_GET['page']) && $_GET['page']=='contacto'){
// include contacto
include('include/in-contacto.php');
// En cualquier otro caso , mostramos el home
} else {
include('include/in-home.php');
}
?>
                     </div>
                     <div id="column_right"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></div>
<!--  Esta sección soluciona un problema con el diseño CSS, forzando la altura de la sección main a ocupar la misma altura que las dos columnas(#columnt_left and #column_right) -->
                     <div class="spacer"></div>
<!-- close #main content -->
                </div>
<!-- close #container -->
    <div id="footer"> Ejemplo realizado para <a href="http://masquewordpress.com">Timersys</a>. </div>
</div>
</body>
</html>

Bueno , espero que esto les haya servido de ayuda. Porfavor comentes si ven algun que otro error o quieren cambiar algo.
Ejemplo online
Descargar ejemplo

Introducción al diseño web con PHP + CSS – Parte II -

Categories: Tutoriales - Tags: , ,

En el primer artículo vimos como quedaria la estructura de index.php mediante código html y explique un poco las diferentes secciones que tendrá la página web.

En este tutorial vamos a dar forma a esta estructura mediante una hoja de estilo en cascada o como mayormente conocemos , una hoja CSS.

Lo primero que tenemos que hacer es crear un archivo .css que en este caso le voy a poner default.css. Una vez creado lo guardamos en la carpeta CSS de nuestro sitio web. En default.css vamos a definir la estructura de la siguiente forma:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
/* ------------------------------
Estructura de la página
------------------------------ */
 
/*
#container tiene un ancho absoluto de 780 pixeles.
El ancho de los elentos internos estan establecidos a auto,
por lo que todos tendrán el ancho del elemento contenedor.
*/
#container{width:780px; margin:0 auto;}
 
/***************Header**********************/
#topbar{width:auto; display:block; height:80px;}
#navbar{width:auto; display:block; height:24px;}
/***************Contenido principal************/
#main{width:auto; display:block;}
#column_left{width:560px; margin-right:20px; float:left;}
#column_right{width:200px; float:left;}
 
/*
div.spacer, soluciona el alto de #main en diseños con 2 columnas
*/
div.spacer{clear:both; height:10px; display:block;}
 
/***************footer*********************/
#footer{width:auto; display:block; height:24px;}

Como pueden ver los comentarios en CSS a diferencia de html se encierran entre /* …… y….. */

Una vez guardado nuestro archivo default.css solo nos queda linkearlo a nuestro index.php

link_css

Para ello introducimos dentro de las etiquetas <head </head> el siguiente código:

<link href="css/default.css" rel="stylesheet" type="text/css" />

Añadiendo los links a la barra de navegación

Para la barra de navegación vamos a usar una lista , y cada elemento de la lista será un link.

1
2
3
4
5
6
7
 
<ul>
<li><a href="index.php?page=home">Home</a></li>
<li><a href="index.php?page=registrarse">Registrarse</a></li>
<li><a href="index.php?page=login">Login</a></li>
<li><a href="index.php?page=contacto">Contácto</a></li>
</ul>

El código CSS para el navbar sería:

1
2
3
4
#navbar ul, #navbar ul li{padding:0; margin:0; list-style:none; float:left;}
#navbar a{color:#FFFFFF; font-weight:bold;}
#navbar a:hover{background:#777777;}
#navbar li a:link, #navbar li a:visited {background:#444444; text-decoration:none; height:24px; line-height:24px; display:inline; float:left; width:auto; padding:0px 10px;}

Por lo que el código completo quedaría de la siguiente forma:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitio nal.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
//ARCHIVO CSS AÑADIDO
<link href="css/default.css" rel="stylesheet" type="text/css" />
<title>page title</title>
</head>
 
<body>
<div id="container">
               <div id="topbar"> ...Contenido del topbar... </div>
               <div id="navbar"><ul>
                                            <li><a href="index.php?page=home"> Home</a></li>
                                            <li><a href="index.php?page=registrarse"> Registrarse </a></li>
                                            <li><a href="index.php?page=login"> Login</a></li>
                                            <li><a href="index.php?page=contacto"> Contácto</a></li>
                                            </ul>
                </div>
<!-- Sección principal en la cual cargaremos las páginas usando variables URL y la función de PHP include() -->
               <div id="main">
                     <div id="column_left"> ...Contenido columna izq... </div>
                     <div id="column_right"> ...Contenido columna der... </div>
<!--  Esta sección soluciona un problema con el diseño CSS, forzando la altura de la sección main a ocupar la misma altura que las dos columnas(#columnt_left and #column_right) -->
                     <div class="spacer"></div>
<!-- close #main content -->
                </div>
<!-- close #container -->
                 <div id="footer"> Ejemplo realizado para <a href="http://masquewordpress.com">Timersys</a>. </div>
</div>
</body>
</html>

Y el código CSS completo sería el siguiente:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
/* ------------------------------
Estructura de la página
------------------------------ */
 
/*
#container tiene un ancho absoluto de 780 pixeles.
El ancho de los elentos internos estan establecidos a auto,
por lo que todos tendrán el ancho del elemento contenedor.
*/
#container{width:780px; margin:0 auto;}
 
/***************Header**********************/
#topbar{width:auto; display:block; height:80px;}
                 /****Barra de navegación*****/
#navbar{width:auto; display:block; height:24px;}
#navbar ul, #navbar ul li{padding:0; margin:0; list-style:none; float:left;}
#navbar a{color:#FFFFFF; font-weight:bold;}
#navbar a:hover{background:#777777;}
#navbar li a:link, #navbar li a:visited {background:#444444; text-decoration:none; height:24px; line-height:24px; display:inline; float:left; width:auto; padding:0px 10px;}
 
/***************Contenido principal************/
#main{width:auto; display:block;}
#column_left{width:560px; margin-right:20px; float:left;}
#column_right{width:200px; float:left;}
 
/*
div.spacer, soluciona el alto de #main en diseños con 2 columnas
*/
div.spacer{clear:both; height:10px; display:block;}
 
/***************footer*********************/
#footer{width:auto; display:block; height:24px;}

En el próximo tutorial les explico como cargar las páginas con la función include() de PHP. Saludos!!

Introducción al diseño web con PHP + CSS – Parte I -

Categories: Tutoriales - Tags: , ,

En este tutorial voy a explicar un par de conceptos básicos a la hora de empezar a diseñar webs. Hay muchas formas diferentes de diseñar la estructura de una web pero coincido con Antonio Lupetti en que para empezar esta es una de las formas más cómodas que conozco. Lo que voy a hacer básicamente en este post en juntar y traducir algunos tutoriales suyos y modificarlos según mis criterios y gustos a la hora de diseñar.

Típica estructura de una web:

sitestructure

  • index.php – Archivo principal que contiene todas las diferentes secciones de la página, en ingles dicen “container”. Las secciones son : Barra superior (topbar), barra de navegación (nav´s bar), contenido principal (main content) y el pie de página(footer). Escribo las traducciones al ingles , ya que es el lenguaje que suelo utilizar y el que van a ver en casi todos lados.
  • config – A diferencia de Antonio Lupetti, en vez de un archivo config.php yo creo una carpeta config en la cual incluyo todos mis archivos de configuración como db.php.
  • images - En la carpeta images van todos los archivos de imágenes (jpg, png, gif) y por lo general creo subcarpetas para diferenciar las secciones (productos, contacto, etc).
  • css - En esta carpeta simplemente irán todas las hojas de estilo (CSS).
  • include - En esta carpeta se meten todos los archivos de las diferentes secciones que vamos a in incluyendo.

Estructura de index.php

Nuestro objetivo es que la página se parezca a esto:

estructura

La estructura de la página constará de varias partes. Para empezar tenemos el container que es el contenedor de todas las secciones de la web.

Dentro del container lo primero que encontramos es el topbar, que podés usar para poner el logo y/o nombre de tu web.

Justo abajo esta el navbar o barra de navegación. Desde ahi vamos a acceder a las diferentes páginas mediante los links.

Ahora viene la sección principal o main section, que en este caso consta de 2 columnas de tamaño fijo, column_left y column_right.

Al usar dos columnas tenemos que utilizar el spacer que no es más que un div vacio que sirve para corregir la altura del container.

Por último tenemos el footer o pie de página , donde podés poner algún que otro link o los derechos de autor.

Todo esto traducido a código nos quedaría de la siguiente forma:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitio nal.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 
<title>page title</title>
</head>
 
<body>
<div id="container">
               <div id="topbar"> ...Contenido del topbar... </div>
               <div id="navbar"> ...Contenido del navbar... </div>
<!-- Sección principal en la cual cargaremos las páginas usando variables URL y la función de PHP include() -->
               <div id="main">
                     <div id="column_left"> ...Contenido columna izq... </div>
                     <div id="column_right"> ...Contenido columna der... </div>
<!--  Esta sección soluciona un problema con el diseño CSS, forzando la altura de la sección main a ocupar la misma altura que las dos columnas(#columnt_left and #column_right) -->
                     <div class="spacer"></div>
<!-- close #main content -->
                </div>
<!-- close #container -->
           <div id="footer"> Ejemplo realizado para <a href="http://masquewordpress.com">Timersys</a>. </div>
</div>
</body>
</html>

Siempre recordar que el código se situa entra las etiquetas <body> </body>.

En el próximo tutorial vamos a definir mediante CSS la estructura de la web. Un saludo!