Ejemplos PHP - Css - Mysql

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>

<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>

<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.

Ejemplos PHP - Css - Mysql

Caricato da

Informazioni sul documento

Descrizione originale:

Titolo originale

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

Ejemplos PHP - Css - Mysql

Caricato da

Copyright:

Formati disponibili

PHP – MySQL – CSS

En esta oportunidad, trataremos los lenguajes y diferentes

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

Ejemplo: Script de validación

Si va en el &lt;head&gt; entonces tiene que ir entre los

&lt;script language="javascript" type="text/javascript"&gt;

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

Para la conexión a Base de Datos

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

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

Para agregar estilos:

El documento HTML puede presentarse así:

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

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

&lt;span style='font-size:11px'&gt;Letras con estilo

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

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

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

$conexion_ exito = conectar();

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

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

$sql = "INSERT INTO COMENTARIOS

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

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

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

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

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

Ejemplo: Script de validación

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

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

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

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

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

alert("Debe rellenar los campos correctamente para poder responder

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

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

Para la conexión a Base de Datos

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

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

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

mysql_select_db ("basedatos", $link);

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

Para agregar estilos:

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

Tiene tres formas de aplicar el estilo en una web:

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

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

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

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

border:solid 2px #888888;

border-bottom:solid 1px #FFFFFF;

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

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

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

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

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

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

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

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

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

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

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

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