Desarrollo de aplicaciones web: marzo 2020

martes, 17 de marzo de 2020

Ejemplo 1.21.5. Archivo de conexión para altas y modificación de especialidad

<?php
include "conectar.php";
$vCveEsp=$_POST['cveEspecialidad'];
$vNomEsp=$_POST['nomEspecialidad1;
$vNomArea=$_POST['nombreArea'];
$vBoton=S_POST['boton'];
$resConectar=conecta();
$sqlArea="SELECT cveArea FROM AREA
WHERE nomArea='SvNomArea';";
$sqlCveArea=mysql_query($sqlArea.$resConectar);
$resulCveArea= mysql_fetch_array($sqlCveArea);
$vCveArea=$resulCveArea["cveArea");
if ($vBoton=="Guardar"){
$sqlAltaEsp="INSERT INTO ESPECIALIDAD VALUES('$vCveEsp','$vNomEsp','$vCveArea');";
$guarda=mysql_query($sqlAltaEsp,$resConectar);
if (!$guarda){
echo "<SCRIPT LANGUAGE='Javascript' TYPE='text/Javascript'>
alert('Ocurrió un error. Posible clave repetida')
Javascript:history.back(1)
</SCRIPT>";
}
else{
echo "<SCRIPT LANGUAGE= 'Javascript' TYPE='text/Javascript'>
alert('Especialidad registrada')
window.location='../index.html'
</SCRIPT>";
}
else{
$sqlModEsp="UPDATE ESPECIALIDAD
SET nomEsp='$vNomEsp',cveArea='$vCveArea'
WHERE cveEsp='$vCveEsp';";
$modifica r=mysql_query($sqlModEsp,$resConectar);
if (!$modificar){
echo "<SCRIPT LANGUAGE='Javascript' TYPE='text/ Javascript'>
alert('Ocurrió un error: No se guardó el registro')
Javascript: history.back(1)
</SCRIPT>";
}
else{
echo "<SCRIPT LANGUAGE='Javascript' TYPE='text/Javascript'>
alert('Especialidad modificada')
window.location='consulta Especialidad.php'
</SCRIPT>";
}
}

jueves, 12 de marzo de 2020

Ejemplo 1.21.4. Creación del formulario

<HTML XMLNS="http://www.w3.org/1999/xhtml">
<HEAD>
<META HTTP-EQUIV="content-Type" CONTENT ="text/html;
CHARSET =utf-8"/>
<TITLE>Formulario de Altas de Especialidades</TITLE>
<LINK HREF="../estilos/estiloEspecialidad.css"
REL="stylesheet" TYPE="text/css" />
</HEAD>
<BODY>
<FORM ID="form 1" NAME="form 1" METHOD="post"
ACTION="actBase.php">
<P CLASS="titulo">ALtas de Especialidades</P>
<BR/><BR/>
<LABEL FOR="clave">CLave:</LABEL>
<INPUT NAME="cveEspecialidad" TYPE="text"
ID="claveEspecialidad" SIZE="100px"
MAXLENGTH="6"/><BR/>
<LABEL FOR="nombre">Nombre:</LABEL>
<INPUT NAME="nomEspecialidad" TYPE="text"
ID="nombreEspecialidad" SIZE="100"
MAXLENGTH="25"/><BR/>
<LABEL FOR="area">Área:</LABEL>
<SELECT NAME="nombreArea" ID="nombreArea">
<7php
include "conectar.php";
$resConectar=conecta();
$sqlAreas="SELECT * FROM AREA";
$tablaArea = mysql_query($sqlAreas);
$numfilasAreas = mysql_num_rows($tablaArea);
for {$i=O; $i<$numfilasAreas; $i++){
$filaArea = mysql_fetch_array($tablaArea);
echo'<OPTION>'.$filaArea['nomArea'].' </OPTION>';
}
?>
</SELECT><BR/><BR/>
<INPUT TYPE="submit" NAME="boton"
ID="botonGuardar" VALUE="Guardar" />
<INPUT TYPE="reset" NAME="botonNuevo"
ID="botonNuevo" VALUE="Nuevo" /><BR/>
</FORM>
<IMG SRC=".../imagEscuela/regresar.gif"
WIDTH="60" HEIGHT ="40" ONCLICK="history.back()"/>
</BODY>
</HTML>

Ejemplo 1.21.3. Index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Documento sin título</title>
<link href="Estilo/estiloEspecialidad.css" rel="stylesheet" type="text/css" />
<style type="text/css">

</style>
</head>

<body>
<div align="center">
<p><img src="ImagEscuela/CBTIS 121 Fachada Principal.jpeg" width="1000" height="400" alt="._.XD" /></p>
</div>
<p align="center"><span class="Estilo1">Especialidades</span></p>
<p align="left">Altas | Consulta</p>
<p align="left">Ejemplos de sitios web dinámicos</p>
<p align="left">Acceso a la gestión de las especialidades en el CBTis 121.</p>
<p align="left">Podrá realizar:</p>
<ol>
<li> Dar de alta una nueva especialidad.</li>
<li> Consultar las especialidades.</li>
<li> Modificar algún dato de las especialidades guardadas .</li>
<li>Elimina alguna especialidad. </li>
</ol>
<p>Todo esto con sólo a una base de datos de prueba instalada de manera local </p>
</body>
</html>

Visto desde el navegador:

Ejemplo 1.21.2. Archivo de conexión

<?php
function conecta(){
//Conexión a la base de datos
$vServidor="localhost";
$vUsuarioBD="root";
$vContraseniaBD="";
$vBD="escuela";
$errorServ="No se puede conectar con el servidor";
$errorBD="No se puede seleccionar la base de datos";
//conexión al servidor local
$conexion = mysql_connect (SvServidor, SvUsuarioBD,
$vContraseniaBD) or die ($errorServ);
//seleccionar la base de datos
mysql_select_db ($vBD) or die ($errorBD);
//retorno de la conexión
return ($conexion);
}
?>

Ejemplo 1.21.1. Diseño de una hoja de estilo.

body{
margin-left: 10px;
margin-top: 20px;
margin-right: 10px;
margin-bottom: 5px;
}
input{
display:blok;
width: 150px;
float: left;
margin-bottom: 10px;
}
label{
display:blok;
text-align:right;
width: 120px;
float: left;
padding-right: 10px;
}
#recordar{
width:1em;
}
br{
clear:left;
}
#enviar{
width:50px;
margin-left:140px
.titulo {
font-family: Cambria, "HoeflerText": "Times New Roman", serif;
font-size: 20px;
line-height: 30px;
background-color: #FFFF66;
color: #FF0000;
text-align: center;
font-style: normal;
}

Ejemplo 1.21. Tabla 1.21. Atributos empleados en la hoja de estilo para el diseño de formularios

miércoles, 11 de marzo de 2020

Ejemplo 1.20. Creación de un script

DROP DATABASE IF EXISTS ESCUELA;
CREATE DATABASE ESCUELA;
USE ESCUELA;
CREATE TABLE AREA(
cveArea CHAR(1) PRIMARY KEY NOT NULL,
nomArea VARCHAR(25) NOT NULL
);
CREATE TABLE ESPECIALIDAD(
cveEsp CHAR(6) PRIMARY KEY NOT NULL,
nomEsp VARCHAR(25) NOT NULL,
cveArea CHAR(1) NOT NULL,
FOREIGN KEY (cveArea) REFERENCES AREA (cveArea)
ON UPDATE CASCADE
);
INSERT INTO AREA VALUES('E'; 'ECONOMICO-ADMINISTRATIVA');
INSERT INTO AREA VALUES('F'; 'FISICO-MATEMATICA');

Tabla 1.20. Diccionario de datos de la tabla ESPECIALIDAD

Tabla 1.19. Diccionario de datos de la tabla AREA

Tabla 1.18. Comandos del DML

Tabla 1.17. Comandos del DDL

martes, 10 de marzo de 2020

Ejemplo 1.19. Hoja de estilo

Código de estilo (CSS):

body{

margin-left: 10px;

margin-top: 20px;

margin-right: 10px;

margin-bottom: 5px;

background-color: #EDD9FC;

}

color: #7B18A7;

}

a:visited {

color: #D6A6FA;

}

a:hover {

color: #FAEFA6;

}

table {

border-collapse:collapse;

border:2px solid violet;

table-layout:fixed;

width: 100%

}

td {

padding:5px;

border:1px solid violet;

}

th {

color:white;

background-color:violet;

padding:5px;

}

tr{

height:45px;

}

titulo {

font-family: Cambria, "Hoefler Text"; "Times New Roman": serif;

font-size: 20px;

line-height: 30px;

background-color: #7B18A7;

color: #FFFF66;

text-align: center;

font-style: normal;

}

.subtitulo1 {

font-family: "Lucida Grande"; "Lucida Sans Unicode"; Verdana;

font-size: 17px;

line-height: 20px;

fonr-weight: bold;

color: #7B18A7;

font-style: normal;

text-align: center;

}

.normal {

font-family: Cambria, "Hoefler Text"; "Liberation Serif'; Times;

font-size: 14px;

line-height: 20px;

font-weight: bold;

color: #7B18A7;

font-style: normal;

text-align: justify;

}

.derecha {

font-family: Cambria, "HoeflerText'; "Liberation Serif'; Times;

font-size: 14px;

line-height: 20px;

font-weight: bold;

color: #7B18A7;

font-style: normal;

text-align: right;

}

.estilo24 {

font-size: 24pt;

color: #FE7747;

}

.estiloPieTabla {

font-size: 8pt;

color: #FE7747;

text-align: center;

}

La tabla se muestra así:

jueves, 5 de marzo de 2020

Ejemplo 1.18. Insertar videos, en Dreamweaver

Se selecciona la siguiente opción:

Al elegir el archivo, el video se añade a la página. Fin.

Ejemplo 1.17. Inserción de archivos multimedia

La página muestra el archivo de video o de sonido, y se reproduce desde ahí.

miércoles, 4 de marzo de 2020

Ejemplo 1.16. Hipervínculos en Dreamweaver

Primera página:

La sección marcada es el enlace de la imagen.

Al dar clic en esa parte, la página de "Lenguas indígenas" se abre:

Ejemplo 1.15. Propiedades de las tablas, en Dreamweaver

Tabla creada en Dreamweaver:

Ejemplo 1.14. Tablas en Dreamweaver

Tabla creada desde Dreamweaver:

Ejemplo 1.13. Propiedades de la página.

Pestaña de atributos:

Página, vista desde Dreamweaver:

Ejemplo 1.11. Propiedades de las herramientas, en Dreamweaver

Desde Dreamweaver:

martes, 3 de marzo de 2020

Ejemplo 1.12. Cambio de propiedades del texto, en Dreamweaver

<! doctype html>
<html>
<head>
<meta charset= "utf-8">
<title>Artesanía oaxaqueña</title>
<style type= "text/css">
body, td, th {
font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
font-style: obligue;
font-weight: bold;
font-size: 14 px;
color: #078E17;
}
body{
background-color: #9595FF;
background-image: url(ardilla.jpg);
background-repeat: no-repeat;
}
</style>
</head>
<body> <font color="#3300FF">
<h1 align="center">País: México</h1>
<h2 align="center"><br>
Estado: Oaxaca</h2>
<h3 align="center"><br>
Artesanía a presentar:ALEBRIJES</h3>
<h4><br>
Significado:</h4>
<p align="justify">Figura de madera de copal, tallada y pintada a mano con colores vivos, que representa generalmente un animal imagina rio, ángeles o nahuales, aunque también está plasmado
en la figura el espíritu innovador e irreal del alma oaxaqueña mediante la imaginación del creador.</p>
<p align="right"><br>
Localización: San Martín Tilcajete y San Antonio Arrazola. </p> </font>
</body>
</html>