Manual para crear un Sitio Web con PHP desde cero

UNIVERSIDAD REGIONAL AUTONOMA DE LOS ANDES “UNIANDES”

CREAR UNA BASE DE DATOS EN MYSQL ¿Qué es una base de datos? “Una base de datos permite organizar ciertos datos de manera que sea sencillo extraer cualquier

información de los mismos”. Para entendernos con un ejemplo vamos a trabajar en una base de datos que

servirá para guardar datos de la lista de películas de su colección, así, si los organizamos de una manera

correcta en la base de datos, será muy sencillo obtener por ejemplo una lista ordenada alfabéticamente,

saber cuáles las ha dirigido el mismo director, o en cuantas ha participado un determinado actor etc.

(Ahora ya parece que empezamos a entender lo que es una base de datos).

¿Qué es una tabla?

Como por ejemplo en Word, una tabla es una lista de datos, organizados por columnas y filas.

Por ejemplo, la siguiente tabla muestra unas películas dentro de una lista.

Dentro de un sistema gestor de bases de datos, la información se puede organizar dentro de

tablas, en las que solo tendremos que decidir qué columnas queremos que tenga y de qué tipo va

a ser la información que tendrán (Numérico, texto, etc.)

EMPEZANDO CON LA BASE DE DATOS

Ahora que ya sabemos que es una tabla y una base de datos; Y tenemos nuestro servidor MySQL

instalado con XAMPP y sino, tienes la suerte de poder instalarlo muy sencillamente desde éste

tipo, vamos a empezar creando nuestra primera base de datos. Para ello, vamos a hacerlo

íntegramente desde el PHPmyAdmin que está en http://localhost/phpmyadmin/

CREANDO UNA BASE DE DATOS

El nombre de nuestra base de datos será Videoteca. Crearemos nuestra base de datos dando al

enlace que pone “Bases de datos”, que está abajo, en nuestra página de

http://localhost/phpmyadmin/ como podemos ver en esta imagen:

http://www.cristalab.com/tips/como-instalar-un-servidor-mysql-y-php-c76624l/


Ahora se nos abrirá una nueva ventana, donde abajo del todo veremos “Crear una base de datos”,

en ella escribiremos el nombre de nuestra nueva base de datos, en este caso: Videoteca.

PD: en lo nombres no podemos escribir caracteres como, comas, acentos, ñ, etc.

Si todo ha ido bien, ahora nos pondrá que ya está creada.

CREAR TABLAS Y CAMPOS PARA LA BASE DE DATOS

En el apartado anterior hemos aprendido a crear una base de datos MySQL, y he creado una, a la

cual la he llamado “Videoteca”. Ahora el siguiente paso sería crear las tablas y los campos que

nos hagan falta para posteriormente meter los datos, y eso es precisamente lo que vamos a

aprender en este tutorial.

CREANDO UNA TABLA Y SUS CAMPOS EN MYSQL


Existen varias formas y programas diferentes para crear una tabla en una base de datos MySQL,

pero lo voy a hacer desde phpMyAdmin, el motivo de hacerlo desde phpMyAdmin y no de otra

forma es porque comúnmente, en todos los servidores ya sean caseros o de un hosting privados

siempre suele tener un phpMyAdmin a mano.

En primer lugar vamos a nuestro phpMyAdmin y seleccionamos la base de datos que hemos

creado anteriormente (Videoteca) como vemos en la siguiente imagen:

Ahora se cargara la base de datos y nos saldrá un mensaje que pone “no se han encontrado tablas

en la base de datos” y más abajo veremos un pequeño formulario para crear nuestra primera

tabla.

En nombre pondremos película y en número de campos pondremos 3.

Ahora damos a continuar y se nos cargara la página para crear los campos, en este caso serán los

3 que hemos puesto antes.

Veremos que tendremos que rellenar varios datos, pero no tenemos que preocuparnos, ya que

explicaremos uno a uno lo que significa.

En Campo, pondremos el nombre del campo.

En Tipo, debemos poner el tipo de datos que se van a incluir en el campo, por

ejemplo pondríamos:

VARCHAR si vamos a incluir un texto inferior a 255 caracteres ejemplo

(nombres, DNI, direcciones).

TEXT si vamos a incluir un texto más largo de 255 caracteres ejemplo

(noticias).

INT si deseamos escribir exclusivamente números.

DATE para poner fechas, o DATETIME, si queremos poner hora y fecha.


En Longitud, deberemos de poner el número de caracteres máximo que puede

contener dicho campo, esto no hace falta para todos los tipos de datos, ya que por

ejemplo para los de tipo DATE, o TEXT no hace falta, pero para los INT y

VARCHAR es imprescindible.

En Nulo, podemos elegir Null o Not Null dependiendo si queremos que el campo

pueda estar vacío (sin datos) o no.

En predeterminado, podemos poner lo que queramos que se ponga en el campo en

el caso de que no se rellenen los datos o que se rellene de forma incorrecta.

En extra, vemos que podemos seleccionar Auto_Increment, esto nos sirve para llevar

un orden de los datos que tenemos, por ejemplo, creamos un campo llamado id, de

tipo INT y le ponemos auto_increment, de esta forma cada vez que se cree un nuevo

dato en este campo se le sumara 1 a la id anterior, de forma que podremos llevar un

pequeño orden.

Ahora que ya más o menos he explicado para qué es cada cosa voy a deciros que debemos de

poner en cada uno de los 3 campos:

Campo 1

Nombre: id_pelicula

Tipo: INT

Nulo: Not Null

Extra: Auto_increment

Y marcamos la llave de Primaria

Campo 2

Nombre: pelicula

Tipo: VARCHAR

Longitud: 30

Nulo: Not Null

Campo 3

Nombre: Director

Tipo: VARCHAR

Longitud: 30

Nulo: Not Null

Ahora damos a Grabar y ya tendemos nuestra base de datos "Videoteca" con la tabla "películas"

con la que podremos empezar a trabajar.


CREACION DE UN SITIO WEB

Para crear un sitio web se debe acceder a Dreamweaver, posteriormente presionar en la opción

“Sitio de Dreamweaver”.

En la pantalla que se muestra a continuación se debe asignar el nombre del Sitio Web y

presionar el botón Siguiente.

Seleccionar la opción “Si deseo utilizar una tecnología de servidor” y marcar el nombre de la

tecnología del servidor que se va a utilizar y presionar siguiente.


Posterior en la pantalla que se nos presentara seleccionar la opción deseada y buscar la carpeta

en donde se almacenaran los archivos y presionar Siguiente.

En la pantalla que aparecerá a continuación nos permitirá visualizar la configuración de nuestro

sitio que fue creado y presionar el botón Completado.


En la parte izquierda de la siguiente pantalla se puede visualizar nuestro sitio que fue creado.

CREAR UNA CONEXIÓN CON MYSQL

Para crear una conexión con MySQL hacemos uso de la función mysql_connect y luego

definimos la base de datos que vamos a utilizar por medio de la función mysql_select_db.

1. $conexion = mysql_connect("localhost", "usuario", "clave");

2. mysql_select_db("demo", $conexion);

En la primera línea hemos creado la conexión a un servidor local y luego hemos seleccionado la

base de datos 'demo' la cual utilizaremos para consultar datos según nuestras necesidades.

EXPLICANDO LA CONEXIÓN

En el ejemplo hemos utilizado la función mysql_connect, el cual recibe tres parámetros.

1. mysql_connect("server", "username", "password")

Donde se tienen:

server: es la dirección IP o el nombre del servidor de base de datos.

username: nombre usuario para acceder a MySQL.

password: clave de acceso a MySQL.

http://www.php.net/mysql_connect

http://www.php.net/mysql_select_db


CERRANDO LA CONEXIÓN

Una vez creada la conexión y hecho las consultas necesarias a nuestra base de datos, es necesario

cerrar esa conexión de esta forma liberamos recursos del servidor y mejoramos el rendimiento de

nuestra aplicación.

1. mysql_close($conexion);

Para cerrar la conexión hemos utilizado la función mysql_close que recibe como parámetro el

identificador de la conexión.

Recomendaciones

Se recomienda hacer la conexión en un archivo externo, para poder utilizarlo en

diferentes páginas. De esta forma si cambiamos de servidor solo editamos el archivo de

conexión con los nuevos datos de conexión.

Es recomendable cerrar siempre las conexiones, esto previene que la aplicación tenga

errores por exceso de conexiones.

http://www.php.net/mysql_close


CREACIÓN DE FORMULARIOS EN PHP

Los formularios se utilizan para recoger datos de los usuarios, nos pueden servir para realizar un

pedido en una tienda virtual, crear una encuesta, conocer las opiniones de los usuarios, recibir

preguntas, hacer suscripciones a un boletín o revista que editemos, etc.

Una vez el usuario rellena los datos y pulsa el botón para enviar el formulario se arrancará un

programa que recibirá los datos y hará el tratamiento correspondiente (una base de datos por

ejemplo).

Aquí vamos a ver cómo crear el formulario básico, (insertar campos y botones en el formulario y

validarlos), pero no la parte de tratamiento de los datos, ya que para ello se necesitan nociones de

programación, ya sea en SQL, en JavaScript o en otro lenguaje de programación, y esto no entra

en los objetivos de esta lección.

Un formulario está formado, entre otras cosas, por etiquetas, campos de texto, menús

desplegables, y botones.

ELEMENTOS DE FORMULARIO

Los elementos de formulario pueden insertarse en una página a través del menú Insertar, opción

Objetos de formulario. A través de esta opción se puede acceder a la lista de todos los objetos de

formulario que pueden ser insertados en la página. Vamos a ver uno por uno algunos de los

distintos elementos que pueden formar parte de un formulario, así como algunas de sus

propiedades.

Campo de texto y Área de texto: Permiten añadir un cuadro de texto. El Campo de texto solo

permite escribir una línea al usuario, mientras que el Área de texto permite escribir varias. Se

puede pasar de Campo de texto a Área de texto a través del inspector de propiedades. También

es posible definirlo como Contraseña. A continuación tienes un ejemplo de cada uno de estos

tres tipos.

A través del inspector de propiedades es posible asignar también el ancho del cuadro de texto, el

número máximo de líneas o caracteres, y el valor inicial del cuadro.

Botón: Es el botón tradicional. El botón puede tener asignadas tres opciones: Enviar formulario,

Restablecer formulario (borrar todos los campos del formulario), o Ninguna (para poder

asignarle un comportamiento diferente de los dos anteriores).


También es posible cambiar el texto del botón, a través del campo Etiqueta del inspector de

propiedades.

Casilla de verificación: Es un cuadrito que se puede activar o desactivar. Puede asignársele el

estado inicial como Activado o como Desactivado.

Botón de opción: Es un pequeño botón redondo que puede activarse o desactivarse. Si hay

varios del mismo formulario, solo puede haber uno activado. Cuando se activa uno,

automáticamente se desactivan los demás.

Lista/Menú: Una lista o menú es un elemento de formulario que lleva asociada una lista de

opciones. Los elementos se añaden a través de botón Valores de lista del inspector de

propiedades. Cuando se trata de un menú, solo es posible elegir uno de los elementos, pero si se

trata de una lista, a través de Selecciones puede permitirse que se seleccionen varios

simultáneamente.

Etiqueta: Se utiliza para ponerle nombres al resto de elementos de formulario, para que el

usuario pueda saber qué datos ha de introducir en cada uno de ellos.

CREAR FORMULARIOS

Puedes crear formularios a través del menú Insertar, opción Formulario. Una vez creado un

formulario, este aparecerá en la ventana de Dreamweaver como un recuadro formado por líneas

rojas discontinuas, similar al de la imagen de siguiente.


Dentro de dicho formulario se podrán insertar los elementos de formulario, que como ya sabes

puedes insertarlos a través del menú Insertar, opción Objetos de formulario.

Es muy recomendable utilizar tablas para organizar los elementos de los formularios. Utilizando

tablas se consigue una mejor distribución de los elementos del formulario, lo que facilita su

comprensión y mejora su apariencia.

VALIDAR FORMULARIOS

La validación de formularios sirve para hacer que Javascript valide el formulario antes de que se

envié el formulario, para que en el caso de que hayan campos del formulario que sean

obligatorios, tengan que rellenarse antes de poder enviarse.

Para validar un formulario hay que abrir el panel de Comportamientos. Este panel se puede abrir

a través del menú Ventana, opción Comportamientos, o pulsando Mayús+F3.

En el este panel hay que desplegar el botón pulsando sobre él, y en Mostrar eventos para elegir

una versión de las actuales de entre la lista de navegadores. Por ejemplo, puedes elegir el

navegador IE 6.0. Después de esto, hay que volver a desplegar el botón, y pulsar sobre la opción

Validar formulario.


Entonces se mostrará una ventana como la siguiente, donde aparecen todos los elementos del

formulario.

Puede seleccionarse uno por uno cada elemento del formulario, pudiendo especificar los

requisitos que ha de cumplir. Puede establecerse como campo a rellenar obligatoriamente, y si su

contenido ha de ser numérico, una dirección de correo electrónico, etc.

CREAR PÁGINAS

Ahora que ya tenemos nuestro sitio creado vamos a entrar en DW, dándole clic en PHP.

Y se presentara una pantalla donde se podrá visualizar el área de trabajo con todas sus barras.


Para guardar nuestra página hacemos clic en la Pestaña Archivo de la barra de herramientas

luego presionar en Guardar Como

Se podrá observar que aparecerá una pantalla en donde se deberá poner el nombre de la página,

el tipo de archivo y la ubicación donde será guardara la página.

En el área de trabajo podremos insertar: formularios, tablas, imágenes, botones, texto etc. con las

diferentes opciones de las pestañas de la barra de menú.


COMO CREAR UN VINCULO

Seleccionamos el texto al cual le vamos a colocar un vínculo.

Posterior damos clic en Hipervínculo que se encuentra en la pestaña Común de la barra del

menú.


Daremos clic en la carpeta que sale en el cuadro de texto, con el fin de seleccionar el archivo con

que queremos vincular y después presionar Aceptar.

Para visualizar como está quedando nuestra página, presionamos F12 para verla mediante el

explorador.

VALIDAR CAJAS DE TEXTO

Seleccionamos la caja de texto en la cual vamos a validar los datos que se digiten.


Luego seleccionar la opción Campo de Texto de Validación de Spry que se encuentra en la

pestaña Spry de la barra de menú.

Una vez seleccionada la opción anterior se activaran las propiedades del Campo de Texto de

Spry, en donde se deberá escoger y activar las diferentes opciones de acuerdo a nuestra

necesidad.


INSERTAR DATOS

El formulario no debe cumplir ningún requisito especial, únicamente el atributo action debe

apuntar al script que procesará la información.

<form name="webtaller" action="insertar_datos.php" method="post">

Título: <input type="text" name="titulo"><br>

Contenido: <textarea name="contenido"></textarea><br>

<input type="enviar" value="Enviar">

</form>

Ahora en el archivo "insertar_datos.php" deberemos recoger estos datos e insertarlos en nuestra

base de datos. Suponemos que tenemos una tabla en la base de datos, llamada "noticias" que

tiene los campos "titulo" y "contenido". Miraremos si realmente han enviado datos y si es así,

insertaremos los valores en la base de datos.

<?php

// Primero comprobamos que ningún campo esté vacío y que todos los campos existan.

if(isset($_POST['titulo']) && !empty($_POST['titulo']) &&

isset($_POST['contenido']) && !empty($_POST['contenido'])) {

// Si entramos es que todo se ha realizado correctamente

$link = mysql_connect("localhost","usuario","contraseña");

mysql_select_db("webdb",$link);

// Con esta sentencia SQL insertaremos los datos en la base de datos

mysql_query("INSERT INTO noticias (titulo,contenido)

VALUES ('{$_POST['titulo']}','{$_POST['contenido']}')",$link);

// Ahora comprobaremos que todo ha ido correctamente

$my_error = mysql_error($link);

if(!empty($my_error) {

echo "Ha habido un error al insertar los valores. $my_error";

} else {

echo "Los datos han sido introducidos satisfactoriamente";

}

} else {

echo "Error, no ha introducido todos los datos";

}

?>

Esta es la forma más sencilla de insertar datos en una base de datos MySQL y en la mayoría de

casos, seguirá este esquema. Se puede mejorar alguna cosa, como por ejemplo asegurarse de que


las comillas que se inserten vienen "escapadas", es decir, de esta forma (') para evitar problemas

con MySQL.

ACTUALIZAR DATOS

Este código nos sirve para seleccionar los datos del formulario para luego poderlos modificar en

la base de datos de mysql desde un formulario en php.

<?php

$cn=mysql_connect("localhost","user","clave")or die("Error conexion MySQL");

$db=mysql_select_db("tabla",$cn)or die("No existe BD");

$query=mysql_query("SELECT 1 FROM calendario WHERE 1 AND `date` LIKE

CURDATE()")or die("Error consulta");

$n=mysql_num_rows($query);

if($n)

{

while($campo=mysql_fetch_array($query))

{

echo "<FORM METHOD=POST ACTION='graba.php'>";

echo "---------------------------";

echo "<br>Visitante: <INPUT TYPE='hidden' NAME='visitante'

VALUE='".$campo['visitante']."'>".$campo['visitante'];

echo "<br>Carreras Visitante: <INPUT TYPE='text' NAME='carrerasv'

VALUE='".$campo['carrerasv']."'>";

echo "<br>Home Club: <INPUT TYPE='hidden' NAME='homeclub'

VALUE='".$campo['homeclub']."'>".$campo['homeclub'];

echo "<br>Carreras Home Club: <INPUT TYPE='text' NAME='carrerashc'

VALUE='".$campo['carrerashc']."'>";

echo "<br><INPUT TYPE='submit' value='Grabar'> <br>";

echo "---------------------------<br>";

echo "</FORM>";

}

}

else

{

}

?>

Una vez seleccionados los datos procedemos actualizar los datos con la siguiente sentencia de

mysql.

<?php

$carrerasv=$_POST['carrerasv'];


$carrerashc=$_POST['carrerashc'];

//////////////

$cn=mysql_connect("localhost","user","clave")or die("Error conexion MySQL");

$db=mysql_select_db("tabla",$cn)or die("No existe BD");

$query=mysql_query("UPDATE calendario SET carrerasv='$carrerasv',carrerashc='$carrerashc'

WHERE 1 AND `date` LIKE CURDATE() AND `id`='$id'");

if($query)

{

echo "Actualizacion OK ! ";

}

else

{

echo " No hubo actualizacion";

}

?>

ELIMINAR DATOS

Con la siguiente sentencia nos ayuda a eliminar datos

<?php tu_conexion(); //nombre de la conexión para opder acceder a los datos $consulta = "DELETE FROM tu_tabla WHERE id = ('$cadena')"; $resultado = mysql_query($consulta); echo "Los datos ha sido eliminados."; ?>

Manual para crear un Sitio Web con PHP desde cero

Documents

Transcript of Manual para crear un Sitio Web con PHP desde cero