El documento describe la arquitectura de tres capas para un sistema de nóminas, incluyendo capas de presentación, procesamiento de datos y almacenamiento de datos. Se proporcionan ejemplos de código para cada capa, con scripts en HTML, CSS, PHP y SQL para la interfaz, procesamiento y almacenamiento respectivamente. El objetivo es mostrar de manera inicial la estructura y algunos componentes clave del software.

1. Contenido del Modelo de Diseño
1. Introducción
En la realización del software se programara en tres capaz tanto la presentación,
negocio y datos haciendo uso de TIC’s para el sistema web a realizar.
1.1. Propósito
El objetivo del presente documento es dar a conocer la arquitectura del sistema de
nóminas y mostrar de manera inicial algunos scripts de las distintas capas que
componen el software.
1.2. Vista General
La arquitectura por capas se subdivide al proceso de desarrollo en 3 capas:
Capa de Presentación
Capa de Procesamiento de Datos
Capa de Almacenamiento de Datos

2. 1.3. Referencias
- Glosario.
- Plan de desarrollo de software.
- Diagrama de casos de uso.
- Manual de uso del sistema
- Manual de instalación
1.4. Definición de Términos, Abreviaturas y Siglas
-RUP
-PHP
2. Diseño Arquitectónico
Define la relación entre cada uno de los elementos estructurales del programa.En
nuestro software la primera capa mostrara la presentacion dinamica de nuestro
sistema,en la segunda los datos a ingresar y posteriormente la tercera capa sera
la de negocio de acuerdo a los requerimientos que inicialmente se dio a conocer.
2.1. Diseño de la Capa de Presentación (Vista)
Para el diseño de la capa de presentación se utilizaran frames en html y hojas de
estilos (CSS).

3. <style type="text/css">
<!--
.Estilo1 {
font-family: "comic Sans MS";
font-size: 24px;
}
.Estilo2 {
font-family: "comic Sans MS";
font-size: 18px;
}
.Estilo3 {font-family: "comic Sans MS"}
-->
</style>
<?
include("validar.php")
?>
<style type="text/css">
<!--
.Estilo1 {
font-family: "old English Text MT";
font-size: 36px;
}
.Estilo2 {font-family: "comic Sans MS";

4. font-size: 16px;
color: #FF0000;
}
body {
background-image: url(fonditito.png);
background-repeat: repeat-x;
background-color: #FFFFFF;
}
-->
</style>
<style type="text/css">
<!--
.Estilo2 {font-size: 12px}
.Estilo3 {
color: #FF0000;
font-size: 14px;
}
.Estilo18 {font-size: 12px; font-weight: bold; }
.Estilo19 {font-size: 16px}
.Estilo7 {color: #999999}
.Estilo8 { color: #0066FF;
font-weight: bold;
font-size: 18px;

5. }
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: none;
}
a:active {
text-decoration: none;
}
.Estilo59 {font-family: "comic Sans MS"}
-->
</style>
<styletype="text/css">
<!--
.Estilo1 {
font-family: "old English Text MT";
font-size: 36px;
}
.Estilo2 {font-family: "comic Sans MS";

6. font-size: 16px;
color: #FF0000;
}
body {
background-image: url(fonditito.png);
background-repeat: repeat-x;
background-color: #FFFFFF;
}
-->
</style>
<style type="text/css">
<!--
.Estilo1 {
font-family: "old English Text MT";
font-size: 36px;
}
.Estilo2 { font-family: "comic Sans MS";
font-size: 16px;
color: #FF0000;
}
body {
background-image: url(fonditito.png);
background-repeat: repeat-x;

7. }
2.1.1 Scripts Capa de Presentación
<script type="text/javascript">
<!--
functionMM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
vari,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
functionMM_swapImgRestore() { //v3.0
vari,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++)
x.src=x.oSrc;
}
//-->
</script>
2.2. Diseño de la Capa de Almacenamiento de Datos (Persistencia)
Para el diseño de la capa de Almacenamiento de Datos se utilizaran scripts con
extensión sql.
<?
require('conectar.php');
$sel_prod = "SELECT * FROM producto";
$eje_prod = mysql_query($sel_prod);

8. while($ver_prod = mysql_fetch_array($eje_prod))
{
$empre = $ver_prod['empresa'];
$img = "<imgsrc='empresa_logo/$ver_prod[logo]' width=100 height=60 border=0>";
}
?>
<?php require("validar.php"); ?>
<?
if(isset($_POST["enviar"]))
{
$depa = $_POST["depa"];
$sucursal = $_POST["sucursal"];
require("conectar.php");
$sqly="select * from departamento where nombre_depa='$depa'";
$cony=mysql_query($sqly);
if(mysql_num_rows($cony))
{
echo "
<script>
location.href='agregar_depa.php'

9. alert('Departamento ya esta agregado')
</script>";
}
else
{
$inser = "INSERT INTO departamento
VALUES(NULL,'$depa',$sucursal)";
if(mysql_query($inser))
{
$texto = "Departamento Agregado Exitosamente";
header("location: ver_depa.php?send=$texto");
exit;
}
}
}
else
{
?>
<script>
functionvalida_envia(){
//valido el nombre
if (document.form1.depa.value.length==""){
//location.href("agregar_tipo_egre.php");

10. alert("Debe de Digitar el Nombre del Cargo");
document.form1.cargo.focus()
return false;
}
}
functionkeyLock(e){
kc=e.keyCode?e.keyCode:e.which;
if(kc<32) return true;
kc=String.fromCharCode(kc);
if(/[^a-zA-Zñ]/.test(kc))
{
alert("No puede ingresar Numeros");
return false;
}
}
</script>
2.2.1. Scripts Capa Control
<script type="text/javascript">
<!--
functionMM_preloadImages() { //v3.0

11. var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
vari,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
functionMM_swapImgRestore() { //v3.0
vari,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++)
x.src=x.oSrc;
}
//-->
</script>
<script>
location.href='agregar_usuario.php'
alert('Usuario ya esta agregado')
</script>";
<script language="javascript" type="text/javascript">
functionbotonCancelar (){
location.href="";
}
</script>