Está en la página 1de 15

PHP – MySQL – CSS

Ejemplos básicos.

En esta oportunidad, trataremos los lenguajes y diferentes


tecnologías que usaremos en el desarrollo de Páginas Dinámicas.

Lenguaje
PHP
Es un lenguaje de programación diseñado para la creación de páginas
dinámicas. También es utilizado para la interpretación del lado
servidor. PHP significa PHP (Personal Home Page) Hypertext Pre-
processor.

<?php
include "mysql.php";
//Se está incluyendo el archivo mysql.php que se encarga de realizar
la conexión a la base de datos. La siguiente línea llama a la función
del archivo incluido para saber si fue exitosa o no. El archivo
mysql.php puede ser similar al ejemplo que se muestra en la parte
de MySQL.
$conexion_ exito = conectar();
$nombre=$_POST['name'];
$comentario=$_POST['coment'];
$noticia=$_POST['noticia'];
//El php recibe los valores de un formulario en otro documento donde
los campos (input text) del HTML han sido rellenados previamente.,
por ejemplo el $_POST[‘name’] muestra que el campo name ha
recibido un valor y se va a guardar en la variable $nombre. Lo
mismo ocurre con coment y $comentario, noticia y $noticia.

//La cadena $sql se encarga de realizar el query de Insertar


comentarios. Se inserta el comentario, fecha, nombre de quien
escribió el comentario y el código de la noticia en que se realizó el
comentario, esos nombres que se muestran son los campos en la
tabla COMENTARIOS que está en la base de datos. Después de
VALUES se muestran los valores que van a ser agregados en el
comentario, que son precisamente las variables que han recibido los
datos del formulario: el comentario, la fecha que va con NOW() que
va a capturar la fecha y hora actual, el nombre y la noticia en que se
agregó.
$sql = "INSERT INTO COMENTARIOS
(notCom,notFecha,notNombre,notCodigo) VALUES ('".
$comentario."',NOW(),'".$nombre."',".$noticia.")";
if(consulta($sql))
{
//Si la consulta es realizada exitosamente se mostrará el mensaje a
través del echo.
echo "<strong>¡Agregado!
</strong><br/>Gracias por su comentario <hr/>";
}
//Si la consulta es falla se mostrará el mensaje a través del echo.
else
{
echo "<br/>Error al insertar. Vuelve a intentar";
}
?>

Scripts
Javascript
Es un lenguaje de script (archivo de procesamiento por lotes)
utilizado para acceder a objetos en aplicaciones. Permite el desarrollo
de interfaces de usuario mejoradas y webs dinámicas.

Ejemplo: Script de validación


En esta ocasión, el script al ser una validación de un formulario para
evitar valores incorrectos en los campos, puede ir en el
<head> o en un archivo a parte de extensión .js vinculado con
la página HTML, de esa forma, al ejecutar se procesará la validación
antes de aceptar los datos.

Si va en el <head> entonces tiene que ir entre los


<script>, como se muestra a continuación:

<script language="javascript" type="text/javascript">


//Inicio del script
function validacion() //El nombre del script es validacion
{
if(document.fvalida.nombre.value==""||
document.fvalida.email.value==""||
document.fvalida.email.value.indexOf('@') == -1||
document.fvalida.email.value.indexOf('.') == -1||
document.fvalida.consulta.value=="")
//La primera parte del if no permite valores vacios en el text
nombre del formulario fvalida. Lo mismo ocurre en la segunda
parte, sólo que el campo es email. En la tercera parte,
seguimos validando email, donde el indexOf detecta si existe el
@ dentro del campo. En la cuarta parte, también se usa en
indexOf pero en esta ocasión con el punto es quien se valida,
todavía dentro del campo email. En la última parte,
nuevamente se verifica que los datos dentro del campo
consulta no este vacío.
{
alert("Debe rellenar los campos correctamente para poder
responder a su consulta.") //En caso que los campos no cumplan
con la validación, se mostrará una alerta
return(false);
}
else
{
alert("Consulta enviada, en breve responderemos a través
de su e-mail") //En caso que los campos estén rellenados
correctamente, se lanza un aviso confirmando el envio de la consulta.
En la siguiente línea se aprecia el action que realizará: consulta.php
dando la opción submit.
fvalida.action = "consulta.php";
fvalida.submit()
}
} //Finaliza el script
</script>

En caso de ir en un documento a parte de extensión .js no es


necesario que lleve los <script> dicho código, más bien el que
lo necesita es el HTML para vincularse con el archivo de extensión .js,
y se da de la siguiente forma:

<script src="archivo.js"></script>

Para la conexión a Base de Datos


MySQL
Sistema de gestión de base de datos relacional. Software libre muy
utilizado en aplicaciones de tipo web. Altamente vinculado con el PHP
debido a que son usados comúnmente para la creación de webs. Es
muy rápida en la lectura pero puede ocasionar problemas de
integridad en entornos de altas modificaciones.

Ejemplo: Conexión a la base de datos utilizando PHP

$link = mysql_connect("localhost", "user", "password");


//Se realiza la conexión a la base de datos. Primero va el servidor al
que nos conectaremos, en este caso, sólo es el localhost, luego va el
nombre de usuario con el que se conectará que es user. Finalmente,
va la contraseña que es password. El usuario o contraseña cambian
según cómo hayas configurado tu conexión a la base de datos, por
ejemplo cuando se instala el AppServ por default lleva de usuario:
root y no necesita contraseña.
//Todo el query (consulta) queda almacenada en la variable $link.
El mysql_connect se encarga de la conexión.
mysql_select_db ("basedatos", $link);
//El mysql_select_db selecciona la base de datos a la que se
conectará, por ejemplo aquí se llama basedatos, en la siguiente
parte se puede ver el $link que como expliqué en la parte anterior,
es la consulta que realiza la conexión.

Para agregar estilos:


CSS
Es un lenguaje utilizado en documentos HTML o XHTML, separando la
estructura de su presentación.
Tiene tres formas de aplicar el estilo en una web:
• Hoja de estilos externa, en extensión css, que es vinculada a
través del Head del documento HTML. Puede ser vinculada a
varios documentos para que conserven un mismo estilo.

Ejemplo:
La hoja de estilos con extensión .css puede presentarse así:
Las características como Font-family cambian la fuente (por
ejemplo, Verdana, Arial, Comic Sans, etc). Font-size, cambia el
tamaño de la fuente. En la parte, myform da las características
de el formulario.

body{
font-family:'Lucida Grande', 'Lucida Sans Unicode', Verdana,
Arial, Helvetica, sans-serif;
font-size:12px;
}
.myform{
margin:0 auto;
width:400px;
padding:14px;
}
#stylized{
border:solid 2px #888888;
background:#666666;
}
#stylized h1 {
font-size:14px;
font-weight:bold;
margin-bottom:8px;
}
#stylized p{
font-size:11px;
color:#FFCC00;
margin-bottom:20px;
border-bottom:solid 1px #FFFFFF;
padding-bottom:10px;
}

El documento HTML puede presentarse así:

<head>
<title>Hola Mundo</title>
<link rel="stylesheet" type="text/css"
href="estilos.css" />
</head>
<body>
<!--
El DIV tiene estilo stylized y llama a la CLASS myform, que
ya están definidos en el archivo estilos.css
También H1, P tienen estilos y como ya están definidos, a la
hora de añadir esas características en el archivo HTML se
incluye inmediatamente el estilo que le corresponde.
-->
<div id='stylized' class='myform'>
<form id='form' name='form' method='post'
action='usuario.php' onSubmit="return validacion()">
<h1>Creación de usuario</h1>
<p>Nueva cuenta</p>

<label>Usuario
<span class='small'>Coloca tu
usuario</span>
</label>
<input type='text' name='usuario' id=’usuario’
/>

<label>Contraseña
<span class='small'>Coloca tu
contraseña</span>
</label>
<input type='text' name='email' id='email' />
<input type=’submit’ name=’enviar’
value=’Enviar’>
</form>
</body>

• Hoja de estilos interna, que se encuentra dentro del Head y usa


<style> para definir el área del css. Sólo se aplica en la
página donde se ha escrito y no puede ser llamado desde otras
páginas.

Ejemplo:
El Estilo1 mostrará una fuente grande y en negrita.
El Estilo2 mostrará una fuente pequeña en arial y de color azul.
En el body el primer párrafo llama a la class Estilo1. Mientras
que el segundo párrafo, llama al class Estilo2.

<head>
<style type="text/css">
.Estilo1 {
font-size: x-large;
font-weight: bold;
}
.Estilo2 {
font-family: Arial, Helvetica, sans-serif;
font-size: small;
color: #0066CC;
}
</style>
</head>
<body>
<p class="Estilo1">Bienvenido</p>
<p class="Estilo2">Hola, Mundo</p>
</body>

• Estilo en línea, un método no muy recomendable. Incluye el


código css dentro de la codificación del body, sólo es utilizable
para aquel sector donde afecta.

Ejemplo:

<span style='font-size:11px'>Letras con estilo


de tamaño 11</span>

Bueno, son ejemplos simples de lo que se puede hacer con esas


herramientas tan útiles a la hora de crear páginas dinámicas. Espero
que haya sido de su agrado, si tienen dudas no teman en dejar un
comentario e intentaré ayudarles en lo que pueda.

Saludos.
En esta oportunidad, trataremos los lenguajes y diferentes
tecnologías que usaremos en el desarrollo de Páginas Dinámicas.

Lenguaje

PHP

Es un lenguaje de programación diseñado para la creación de páginas


dinámicas. También es utilizado para la interpretación del lado
servidor. PHP significa PHP (Personal Home Page) Hypertext Pre-
processor.

<?php

include "mysql.php";

//Se está incluyendo el archivo mysql.php que se encarga de realizar


la conexión a la base de datos. La siguiente línea llama a la función
del archivo incluido para saber si fue exitosa o no. El archivo
mysql.php puede ser similar al ejemplo que se muestra en la parte
de MySQL.

$conexion_ exito = conectar();

$nombre=$_POST['name'];

$comentario=$_POST['coment'];

$noticia=$_POST['noticia'];

//El php recibe los valores de un formulario en otro documento donde


los campos (input text) del HTML han sido rellenados previamente.,
por ejemplo el $_POST[‘name’] muestra que el campo name ha
recibido un valor y se va a guardar en la variable $nombre. Lo
mismo ocurre con coment y $comentario, noticia y $noticia.

//La cadena $sql se encarga de realizar el query de Insertar


comentarios. Se inserta el comentario, fecha, nombre de quien
escribió el comentario y el código de la noticia en que se realizó el
comentario, esos nombres que se muestran son los campos en la
tabla COMENTARIOS que está en la base de datos. Después de
VALUES se muestran los valores que van a ser agregados en el
comentario, que son precisamente las variables que han recibido los
datos del formulario: el comentario, la fecha que va con NOW() que
va a capturar la fecha y hora actual, el nombre y la noticia en que se
agregó.

$sql = "INSERT INTO COMENTARIOS


(notCom,notFecha,notNombre,notCodigo) VALUES ('".
$comentario."',NOW(),'".$nombre."',".$noticia.")";

if(consulta($sql))

//Si la consulta es realizada exitosamente se mostrará el mensaje a


través del echo.

echo "<strong>¡Agregado!</strong><br/>Gracias por su comentario


<hr/>";

//Si la consulta es falla se mostrará el mensaje a través del echo.

else

echo "<br/>Error al insertar. Vuelve a intentar";

?>

Scripts

Javascript

Es un lenguaje de script (archivo de procesamiento por lotes)


utilizado para acceder a objetos en aplicaciones. Permite el desarrollo
de interfaces de usuario mejoradas y webs dinámicas.

Ejemplo: Script de validación

En esta ocasión, el script al ser una validación de un formulario para


evitar valores incorrectos en los campos, puede ir en el <head> o en
un archivo a parte de extensión .js vinculado con la página HTML, de
esa forma, al ejecutar se procesará la validación antes de aceptar los
datos.

Si va en el <head> entonces tiene que ir entre los <script>, como


se muestra a continuación:

<script language="javascript" type="text/javascript"> //Inicio del


script

function validacion() //El nombre del script es validacion

if(document.fvalida.nombre.value==""||
document.fvalida.email.value==""||
document.fvalida.email.value.indexOf('@') == -1||
document.fvalida.email.value.indexOf('.') == -1||
document.fvalida.consulta.value=="")

//La primera parte del if no permite valores vacios en el text nombre


del formulario fvalida. Lo mismo ocurre en la segunda parte, sólo
que el campo es email. En la tercera parte, seguimos validando
email, donde el indexOf detecta si existe el @ dentro del campo. En
la cuarta parte, también se usa en indexOf pero en esta ocasión con
el punto es quien se valida, todavía dentro del campo email. En la
última parte, nuevamente se verifica que los datos dentro del campo
consulta no este vacío.

alert("Debe rellenar los campos correctamente para poder responder


a su consulta.") //En caso que los campos no cumplan con la
validación, se mostrará una alerta

return(false);

else

alert("Consulta enviada, en breve responderemos a través de su e-


mail") //En caso que los campos estén rellenados correctamente, se
lanza un aviso confirmando el envio de la consulta. En la siguiente
línea se aprecia el action que realizará: consulta.php dando la opción
submit.

fvalida.action = "consulta.php";

fvalida.submit()

} //Finaliza el script

</script>

En caso de ir en un documento a parte de extensión .js no es


necesario que lleve los <script> dicho código, más bien el que lo
necesita es el HTML para vincularse con el archivo de extensión .js, y
se da de la siguiente forma:

<script src="archivo.js"></script>

Para la conexión a Base de Datos

MySQL

Sistema de gestión de base de datos relacional. Software libre muy


utilizado en aplicaciones de tipo web. Altamente vinculado con el PHP
debido a que son usados comúnmente para la creación de webs. Es
muy rápida en la lectura pero puede ocasionar problemas de
integridad en entornos de altas modificaciones.

Ejemplo: Conexión a la base de datos utilizando PHP

$link = mysql_connect("localhost", "user", "password");

//Se realiza la conexión a la base de datos. Primero va el servidor al


que nos conectaremos, en este caso, sólo es el localhost, luego va el
nombre de usuario con el que se conectará que es user. Finalmente,
va la contraseña que es password. El usuario o contraseña cambian
según cómo hayas configurado tu conexión a la base de datos, por
ejemplo cuando se instala el AppServ por default lleva de usuario:
root y no necesita contraseña.

//Todo el query (consulta) queda almacenada en la variable $link. El


mysql_connect se encarga de la conexión.

mysql_select_db ("basedatos", $link);

//El mysql_select_db selecciona la base de datos a la que se


conectará, por ejemplo aquí se llama basedatos, en la siguiente parte
se puede ver el $link que como expliqué en la parte anterior, es la
consulta que realiza la conexión.

Para agregar estilos:

CSS

Es un lenguaje utilizado en documentos HTML o XHTML, separando la


estructura de su presentación.

Tiene tres formas de aplicar el estilo en una web:

• Hoja de estilos externa, en extensión css, que es vinculada a través


del Head del documento HTML. Puede ser vinculada a varios
documentos para que conserven un mismo estilo.

Ejemplo:

La hoja de estilos con extensión .css puede presentarse así:

Las características como Font-family cambian la fuente (por


ejemplo, Verdana, Arial, Comic Sans, etc). Font-size, cambia el
tamaño de la fuente. En la parte, myform da las características de el
formulario.
body{

font-family:'Lucida Grande', 'Lucida Sans Unicode', Verdana, Arial,


Helvetica, sans-serif;

font-size:12px;

.myform{

margin:0 auto;

width:400px;

padding:14px;

#stylized{

border:solid 2px #888888;

background:#666666;

#stylized h1 {

font-size:14px;

font-weight:bold;

margin-bottom:8px;

#stylized p{

font-size:11px;

color:#FFCC00;

margin-bottom:20px;

border-bottom:solid 1px #FFFFFF;

padding-bottom:10px;

}
El documento HTML puede presentarse así:

<head>

<title>Hola Mundo</title>

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

</head>

<body>

<!--

El DIV tiene estilo stylized y llama a la CLASS myform, que ya


están definidos en el archivo estilos.css

También H1, P tienen estilos y como ya están definidos, a la hora de


añadir esas características en el archivo HTML se incluye
inmediatamente el estilo que le corresponde.

-->

<div id='stylized' class='myform'>

<form id='form' name='form' method='post' action='usuario.php'


onSubmit="return validacion()">

<h1>Creación de usuario</h1>

<p>Nueva cuenta</p>

<label>Usuario

<span class='small'>Coloca tu usuario</span>

</label>

<input type='text' name='usuario' id=’usuario’ />


<label>Contraseña

<span class='small'>Coloca tu contraseña</span>

</label>

<input type='text' name='email' id='email' />

<input type=’submit’ name=’enviar’ value=’Enviar’>

</form>

</body>

• Hoja de estilos interna, que se encuentra dentro del Head y usa


<style> para definir el área del css. Sólo se aplica en la página
donde se ha escrito y no puede ser llamado desde otras páginas.

Ejemplo:

El Estilo1 mostrará una fuente grande y en negrita.

El Estilo2 mostrará una fuente pequeña en arial y de color azul.

En el body el primer párrafo llama a la class Estilo1. Mientras que el


segundo párrafo, llama al class Estilo2.

<head>

<style type="text/css">

.Estilo1 {

font-size: x-large;

font-weight: bold;

.Estilo2 {

font-family: Arial, Helvetica, sans-serif;

font-size: small;
color: #0066CC;

</style>

</head>

<body>

<p class="Estilo1">Bienvenido</p>

<p class="Estilo2">Hola, Mundo</p>

</body>

• Estilo en línea, un método no muy recomendable. Incluye el código


css dentro de la codificación del body, sólo es utilizable para aquel
sector donde afecta.

Ejemplo:

<span style='font-size:11px'>Letras con estilo de tamaño 11</span>

Bueno, son ejemplos simples de lo que se puede hacer con esas


herramientas tan útiles a la hora de crear páginas.