lunes, 27 de julio de 2015

DISEÑO DE PÁGINA WEB

1.- PARA SU ELABORACIÓN SE UTILIZA LOS SIGUIENTES DOCUMENTOS:





2.-  DISEÑO DE PANTALLA DE INICIO


CÓDIGO HTML. 

              DOCUMENTO: proy_investigacion.html

<!doctype html>

<html lang="en">

<head> <title> Mi menú </title> </head>
<body >
<link rel="stylesheet" type="text/css" href="estiloproy.css">
<center> <img src="cuadrado.png" class="imagen1"> </center> <br><br>
<h1><center> DEPARTAMENTO DE INVESTIGACION </center></h1>
<div id="menu">
<ul class="opciones">
<li><a href="">INICIO</a>
<ul>
<li><a href="">¿QUIÉNES SOMOS?</a></li>
<li><a href="especialidades.html">ESPECIALIDADES</a></li>
</ul>
</li>
<li><a href="">ESTUDIANTES</a>
<ul>
<li><a href="estudiante.html">DATOS PERSONALES</a></li>
<li><a href="detallesegreso1.php">DETALLES DE EGRESO                                                             DEL ESTUDIANTE</a></li>
</ul>
</li>
<li><a href="">TUTORES</a>
<ul>
<li><a href="tutor.html">DATOS PERSONALES</a></li>
</ul>
</li>
<li><a href="">SEGUIMIENTO DE PROYECTOS</a>
<ul>
<li><a href="detalles_proyecto1.php">DETALLES DE                                                                            PROYECTO</a></li>
<li><a href="registroasistencia1.php">REGISTRO DE                                                                          ASISTENCIA</a></li>
</ul>
</li>
</ul>
</div>


</body>
</html>


CÓDIGO CSS. (Para el estilo de la página).

                DOCUMENTO: estiloproy.css

                        body{
background-image:url("http://www.mactualidad.com/wp-                                                               content/uploads/2014/07/smooth-ice.jpg");
font-family:Arial, Helvetica, sans-serif;
text-align:center;
               
                         

}
#menu {
margin:auto;
width:650px;
font-family:Arial, Helvetica, sans-serif;
}
ul, ol {
list-style:none;
}
.opciones > li {
float:left;
}

.opciones li a {
background-color:#000;
color:#fff;
text-decoration:none;
padding:10px 12px;
display:block;
}
.opciones li a:hover {
background-color:#434343;
}

.opciones li ul {
display:none;
position:absolute;
min-width:140px;
}

.opciones li:hover > ul {
display:block;
}

.opciones li ul li {
position:relative;
}

.opciones li ul li ul {
right:-140px;
top:0px;
}


3.- DISEÑO DE PANTALLA INICIO: 

OPCIÓN: ESPECIALIDADES

PARA EL INGRESO SELECCIONAMOS LA OPCIÓN EN EL MENÚ:


Y OBTENEMOS LA SIGUIENTE PANTALLA PARA EL MANEJO DE DATOS:


CÓDIGO HTML:

              DOCUMENTO: especialidades.html

<!doctype html>

<html lang="en">

<head> <title> ESPECIALIDADES </title> </head>
<body>
<link rel="stylesheet" type="text/css" href="estiloproy.css">
<a href="proy_investigacion.html"> <img src="Inicio.gif" width=80 height=80 align="left"> </a>
<form method="POST" action="especialidad.php">
        CODIGO DE LA ESPECIALIDAD: <input type="text" name="txtcodigo"> <BR> <BR>
        NOMBRE DE LA ESPECIALIDAD:<input type="text" name="txtnombre"> <BR> <BR>

        <input type= "submit" name="listar" value="LISTAR DATOS">
<input type= "submit" name="almacenar" value="ALMACENAR DATOS">
 
</form>
</body>

</html>

CÓDIGO PHP:

               DOCUMENTO: especialidad.php

<?php
$c=$_POST["txtcodigo"];
$n=$_POST["txtnombre"];



$link=mysql_connect('localhost','root','') or die ('Existe un problema con la conexión con el servidor'.mysql_error());
echo "Conexión con el servidor...ok <br>";
mysql_select_db ('respaldo')or die ('No se estableció conexión en la BD');
echo "Conexión con la base de datos...ok <br>";

if (isset($_POST["listar"]))
{

$consulta='select * from especialidades';

$resultado=mysql_query($consulta) or die ('Consulta fallida'.mysql_error());
while ($registro=mysql_fetch_array($resultado))

{
echo $registro["ESP_COD"]."<br>";
echo $registro["ESP_NOM"]."<br>";

}

}

else

{

$consulta= "insert into especialidades(ESP_COD,ESP_NOM) values('$c','$n')";
$resultado=mysql_query($consulta) or die ('Consulta fallida'.mysql_error());

}


?>


4.- DISEÑO DE PANTALLA ESTUDIANTES.

OPCIÓN: DATOS PERSONALES

PARA EL INGRESO SELECCIONAMOS LA OPCIÓN EN EL MENÚ:


Y OBTENEMOS LA SIGUIENTE PANTALLA PARA EL MANEJO DE DATOS:




CÓDIGO HTML:

              DOCUMENTO: estudiante.html

<!doctype html>

<html lang="en">

<head> <title> ESTUDIANTE </title> </head>
<body>
<link rel="stylesheet" type="text/css" href="estiloproy.css"
<a href="proy_investigacion.html"> <img src="Inicio.gif" width=80 height=80 align="left"> </a>
<form method="POST" action="estudiante.php">

        CODIGO ESTUDIANTE: <input type="text" name="txtcodigo"> <BR> <BR>
        ESTUDIANTE NOMBRE:<input type="text" name="txtnombre"> <BR> <BR>
ESTUDIANTE APELLIDO: <input type="text" name="txtapellido"> <BR> <BR>
        DIRECCION DEL ESTUDIANTE: <input type="text" name="txtdireccion"> <BR> <BR>
ESTUDIANTE TELEFONO: <input type="text" name="txttelefono"> <BR> <BR>
ESTUDIANTE EMAIL <input type="text" name="txtemail"> <BR> <BR>

     
<input type= "submit" name="listar" value="LISTAR DATOS">
<input type= "submit" name="almacenar" value="ALMACENAR DATOS">
</form>
</body>

</html>


CÓDIGO PHP:

              DOCUMENTO: estudiante.php

<?php

$c=$_POST["txtcodigo"];
$n=$_POST["txtnombre"];
$a=$_POST["txtapellido"];
$d=$_POST["txtdireccion"];
$t=$_POST["txttelefono"];
$e=$_POST["txtemail"];

$link=mysql_connect('localhost','root','') or die ('Existe un problema con la conexión con el servidor'.mysql_error());
echo "Conexión con el servidor...ok <br>";
mysql_select_db ('respaldo')or die ('No se estableció conexión en la BD');
echo "Conexión con la base de datos...ok <br>";

if (isset($_POST["listar"]))
{

$consulta='select * from estudiante';

$resultado=mysql_query($consulta) or die ('Consulta fallida'.mysql_error());
while ($registro=mysql_fetch_array($resultado))

{
echo $registro["EST_COD"]."<br>";
echo $registro["EST_NOM"]."<br>";
echo $registro["EST_APE"]."<br>";
                echo $registro["EST_DIR"]."<br>";
echo $registro["EST_TEL"]."<br>";
echo $registro["EST_EMAIL"]."<br>";
}

}

else

{

$consulta= "insert into estudiante(EST_COD,EST_NOM,EST_APE,EST_DIR,EST_TEL,EST_EMAIL) values('$c','$n','$a','$d',$t,'$e')";
$resultado=mysql_query($consulta) or die ('Consulta fallida'.mysql_error());

}


?>


OPCIÓN: DETALLES DE EGRESO DEL ESTUDIANTE:

PARA EL INGRESO SELECCIONAMOS LA OPCIÓN EN EL MENÚ:




Y OBTENEMOS LA SIGUIENTE PANTALLA PARA EL MANEJO DE DATOS:






CÓDIGO PHP:

              DOCUMENTO: detallesegreso.php

<?php
$link=mysql_connect('localhost','root','') or die ('Existe un problema con la conexión con el servidor'.mysql_error());
echo "Conexión con el servidor...ok <br>";
mysql_select_db ('respaldo')or die ('No se estableció conexión en la BD');
echo "Conexión con la base de datos...ok <br>";
?>


<html>
  <head> <title> Mi ejemplo </title> </head>
<body>
Esto es una página para cargar el comboBox
<form method="POST" action="comboBox.php">
<select name="nombre">
<?php
while($registro=mysql_fetch_array($resultado))
{
?>
<option value="<?php echo $registro['EST_COD']?>"><?php echo $registro ['ESP_COD']?></option>
<?php?>
</select>
</form>
</body>
</html>


CÓDIGO PHP_1:

              DOCUMENTO: detallesegreso1.php
<?php

$link=mysql_connect('localhost','root','') or die ('Existe un problema con la conexión con el servidor'.mysql_error());
mysql_select_db ('respaldo')or die ('No se estableció conexión en la BD');
$consulta="select * from  estudiante";
$resultado=mysql_query($consulta) or die ('consulta fallida'.mysql_error());
$consulta1="select * from  especialidades";
$resultado1=mysql_query($consulta1) or die ('consulta fallida'.mysql_error());
?>

<!doctype html>

<html lang="en">

<head> <title> DETALLES DE EGRESO DEL ESTUDIANTE </title> </head>
<body>
<link rel="stylesheet" type="text/css" href="estiloproy.css">
<a href="proy_investigacion.html"> <img src="Inicio.gif" width=80 height=80 align="left"> </a>
<form method="POST" action="detallesegreso.php">
        ESTUDIANTE CODIGO:
<select name="nombre">

<?php
while ($registro=mysql_fetch_array($resultado))
{
?>
<option value="<?php echo $registro['EST_COD']?>"> <?php echo $registro['EST_NOM']?> </option>
<?php  } ?>
</select>
  <br> <br>
        ESPECIALIDAD CODIGO:
<select name="nombre">

<?php
while ($registro1=mysql_fetch_array($resultado1))
{
?>
<option value="<?php echo $registro1['ESP_COD']?>"> <?php echo $registro1['ESP_NOM']?> </option>
<?php  } ?>
</select>
  <br> <br>
AÑO DE EGRESO: <input type="text" name="txtañoeg"> <BR> <BR>
     
        <input type= "submit" name="listar" value="LISTAR DATOS">
<input type= "submit" name="almacenar" value="ALMACENAR DATOS">

 
</form>
</body>

</html>


5.- DISEÑO DE PANTALLA TUTORES.

OPCIÓN: DATOS PERSONALES

PARA EL INGRESO SELECCIONAMOS LA OPCIÓN EN EL MENÚ:




Y OBTENEMOS LA SIGUIENTE PANTALLA PARA EL MANEJO DE DATOS:




CÓDIGO HTML:

              DOCUMENTO: tutor.html

<!doctype html>

<html lang="en">

<head> <title> TUTOR </title> </head>
<body>
<link rel="stylesheet" type="text/css" href="estiloproy.css">
<a href="proy_investigacion.html"> <img src="Inicio.gif" width=80 height=80 align="left"> </a>
<form method="POST" action="tutor.php">
        CODIGO DEL TUTOR: <input type="text" name="txtcodigo"> <BR> <BR>
        NOMBRE TUTOR:<input type="text" name="txtnombre"> <BR> <BR>
APELLIDO TUTOR: <input type="text" name="txtapellido"> <BR> <BR>
        DIRECCION TUTOR: <input type="text" name="txtdireccion"> <BR> <BR>
TELEFONO TUTOR: <input type="text" name="txttelefono"> <BR> <BR>
EMAIL TUTOR: <input type="text" name="txtemail"> <BR> <BR>
ESPECIALIDAD TUTOR: <input type="text" name="txtesp"> <BR> <BR>

     
<input type= "submit" name="listar" value="LISTAR DATOS">
<input type= "submit" name="almacenar" value="ALMACENAR DATOS">
 
</form>
</body>
</html>


CÓDIGO PHP:

              DOCUMENTO: tutor.php

<?php
$c=$_POST["txtcodigo"];
$n=$_POST["txtnombre"];
$a=$_POST["txtapellido"];
$d=$_POST["txtdireccion"];
$t=$_POST["txttelefono"];
$e=$_POST["txtemail"];
$esp=$_POST["txtesp"];


$link=mysql_connect('localhost','root','') or die ('Existe un problema con la conexión con el servidor'.mysql_error());
echo "Conexión con el servidor...ok <br>";
mysql_select_db ('respaldo')or die ('No se estableció conexión en la BD');
echo "Conexión con la base de datos...ok <br>";

if (isset($_POST["listar"]))
{

$consulta='select * from tutor';

$resultado=mysql_query($consulta) or die ('Consulta fallida'.mysql_error());
while ($registro=mysql_fetch_array($resultado))

{
echo $registro["TUTOR_COD"]."<br>";
echo $registro["TUTOR_NOM"]."<br>";
echo $registro["TUTOR_APE"]."<br>";
                echo $registro["TUTOR_DIR"]."<br>";
echo $registro["TUTOR_TEL"]."<br>";
echo $registro["TUTOR_EMAIL"]."<br>";
echo $registro["TUTOR_ESP"]."<br>";
}

}

else

{

$consulta= "insert into tutor(TUTOR_COD,TUTOR_NOM,TUTOR_APE,TUTOR_DIR,TUTOR_TEL,TUTOR_EMAIL,TUTOR_ESP) values('$c','$n','$a','$d',$t,'$e','$esp')";
$resultado=mysql_query($consulta) or die ('Consulta fallida'.mysql_error());

}

?>



6.- DISEÑO DE PANTALLA SEGUIMIENTO DE PROYECTOS.

OPCIÓN: DETALLES DE PROYECTO

PARA EL INGRESO SELECCIONAMOS LA OPCIÓN EN EL MENÚ:




Y OBTENEMOS LA SIGUIENTE PANTALLA PARA EL MANEJO DE DATOS:




CÓDIGO PHP:

              DOCUMENTO: detalle_proyecto.php

<?php

$c=$_POST["txtcodestudiante"];
$n=$_POST["txtcodtutor"];
$a=$_POST["txtnomproyecto"];
$d=$_POST["txttemaproy"];
$t=$_POST["txtevidencias"];
$e=$_POST["txtfecregistro"];
$f=$_POST["txtfecculproy"];

$link=mysql_connect('localhost','root','') or die ('Existe un problema con la conexión con el servidor'.mysql_error());
echo "Conexión con el servidor...ok <br>";
mysql_select_db ('respaldo')or die ('No se estableció conexión en la BD');
echo "Conexión con la base de datos...ok <br>";

if (isset($_POST["listar"]))
{

$consulta='select * from detalles_proyecto';

$resultado=mysql_query($consulta) or die ('Consulta fallida'.mysql_error());
while ($registro=mysql_fetch_array($resultado))

{
echo $registro["EST_COD"]."<br>";
echo $registro["TUTOR_COD"]."<br>";
echo $registro["PROY_NOM"]."<br>";
                echo $registro["PROY_TEMA"]."<br>";
echo $registro["EVIDENCIAS_PROY"]."<br>";
echo $registro["FECHA_REGISTRO"]."<br>";
echo $registro["FECHA_CULMINACION_PROY"]."<br>";
}

}

else

{

$consulta= "insert into detalles_proyecto(EST_COD,TUTOR_COD,PROY_NOM,PROY_TEMA,EVIDENCIAS_PROY,FECHA_REGISTRO,FECHA_CULMINACION_PROY) values('$c','$n','$a','$d',$t,'$e','$f')";
$resultado=mysql_query($consulta) or die ('Consulta fallida'.mysql_error());

}

?>


CÓDIGO PHP_1:

              DOCUMENTO: detalles_proyecto1.php

<?php

$link=mysql_connect('localhost','root','') or die ('Existe un problema con la conexión con el servidor'.mysql_error());
mysql_select_db ('respaldo')or die ('No se estableció conexión en la BD');
$consulta="select * from  estudiante";
$resultado=mysql_query($consulta) or die ('consulta fallida'.mysql_error());
$consulta1="select * from  tutor";
$resultado1=mysql_query($consulta1) or die ('consulta fallida'.mysql_error());
?>





<html lang="en">

<head> <title> DETALLE DEL PROYECTO </title> </head>
<body>
<link rel="stylesheet" type="text/css" href="estiloproy.css">
<a href="proy_investigacion.html"> <img src="Inicio.gif" width=80 height=80 align="left"> </a>
<form method="POST" action="detalle_proyecto.php">
        CODIGO DEL ESTUDIANTE:
<select name="nombre">

<?php
while ($registro=mysql_fetch_array($resultado))
{
?>
<option value="<?php echo $registro['EST_COD']?>"> <?php echo $registro['EST_NOM']?> </option>
<?php  } ?>
</select>
 <br> <br>

        CODIGO DEL TUTOR:
<select name="nombre">

<?php
while ($registro1=mysql_fetch_array($resultado1))
{
?>
<option value="<?php echo $registro1['TUTOR_COD']?>"> <?php echo $registro1['TUTOR_NOM']?> </option>
<?php  } ?>
</select>
 <br> <br>

NOMBRE DEL PROYECTO: <input type="text" name="txtnomproyecto"> <BR> <BR>
        TEMA DEL PROYECTO: <input type="text" name="txttemaproy"> <BR> <BR>
EVIDENCIAS: <input type="text" name="txtevidencias"> <BR> <BR>
FECHA DE REGISTRO: <input type="text" name="txtfecregistro"> <BR> <BR>
FECHA DE CULMINACIÓN PROYECTO: <input type="text" name="txtfecculproy"> <BR> <BR>


<input type= "submit" name="listar" value="LISTAR DATOS">
<input type= "submit" name="almacenar" value="ALMACENAR DATOS">
     
</form>
</body>
</html>


OPCIÓN: REGISTRO DE ASISTENCIA

PARA EL INGRESO SELECCIONAMOS LA OPCIÓN EN EL MENÚ:




Y OBTENEMOS LA SIGUIENTE PANTALLA PARA EL MANEJO DE DATOS:




CÓDIGO PHP:

              DOCUMENTO: registroasistencia.php

<?php

$ct=$_POST["txtcodtutor"];
$ce=$_POST["txtcodestudiante"];
$ft=$_POST["txtfectut"];
$a=$_POST["txtavance"];
$o=$_POST["txtobsv"];


$link=mysql_connect('localhost','root','') or die ('Existe un problema con la conexión con el servidor'.mysql_error());
echo "Conexión con el servidor...ok <br>";
mysql_select_db ('respaldo')or die ('No se estableció conexión en la BD');
echo "Conexión con la base de datos...ok <br>";

if (isset($_POST["listar"]))
{

$consulta='select * from reg_asistencia_tutorias';

$resultado=mysql_query($consulta) or die ('Consulta fallida'.mysql_error());
while ($registro=mysql_fetch_array($resultado))

{
echo $registro["TUTOR_COD"]."<br>";
echo $registro["EST_COD"]."<br>";
echo $registro["FECHA_TUTORIA"]."<br>";
                echo $registro["AVANCE_PROY"]."<br>";
echo $registro["OBSV_PROY"]."<br>";

}

}

else

{

$consulta= "insert into reg_asistencia_tutorias(TUTOR_COD,EST_COD,FECHA_TUTORIA,AVANCE_PROY,OBSV_PROY) values('$ct','$ce','$ft','$a','$o')";
$resultado=mysql_query($consulta) or die ('Consulta fallida'.mysql_error());

}

?>


CÓDIGO PHP_1:

              DOCUMENTO: registroasistencia1.php

<?php

$link=mysql_connect('localhost','root','') or die ('Existe un problema con la conexión con el servidor'.mysql_error());
mysql_select_db ('respaldo')or die ('No se estableció conexión en la BD');
$consulta="select * from  tutor";
$resultado=mysql_query($consulta) or die ('consulta fallida'.mysql_error());
$consulta1="select * from  estudiante";
$resultado1=mysql_query($consulta1) or die ('consulta fallida'.mysql_error());
?>

<!doctype html>

<html lang="en">

<head> <title> REGISTRO DE ASISTENCIA </title> </head>
<body>
<link rel="stylesheet" type="text/css" href="estiloproy.css">
<a href="proy_investigacion.html"> <img src="Inicio.gif" width=80 height=80 align="left"> </a>
<form method="POST" action="registroasistencia.php">
        CODIGO DEL TUTOR: <select name="nombre">

<?php
while ($registro=mysql_fetch_array($resultado))
{
?>
<option value="<?php echo $registro['TUTOR_COD']?>"> <?php echo $registro['TUTOR_NOM']?> </option>
<?php  } ?>
</select>
 <br> <br>


        CODIGO DEL ESTUDIANTE:<select name="nombre">

<?php
while ($registro1=mysql_fetch_array($resultado1))
{
?>
<option value="<?php echo $registro1['EST_COD']?>"> <?php echo $registro1['EST_NOM']?> </option>
<?php  } ?>
</select>
 <br> <br>
FECHA DE LA TUTORIA: <input type="text" name="txtfectut"> <BR> <BR>
        AVANCE PROYECTO: <input type="text" name="txtavance"> <BR> <BR>
OBSERVACION DEL PROYECTO: <input type="text" name="txtobsv"> <BR> <BR>

        <input type= "submit" name="listar" value="LISTAR DATOS">
<input type= "submit" name="almacenar" value="ALMACENAR DATOS">
 
</form>
</body>
</html>


No hay comentarios:

Publicar un comentario