The Design of an Intranet Application Framework

This article is the second part of a series on intranet application frameworks. Now that we know what the application framework is all about and how it is going to work in an intranet environment, we are going to look at the overall structure and design of the intranet and the applications. Keep reading to see how this will be done.

First we are going to set up a fictitious company so that we have some kind of basis for the intranet applications that we are going to create. Then we are going to look at the file structure of the intranet. And then finally we are going to discuss the CSS and templates that will give the applications a uniform look.

Company/Intranet File structure

Our company is going to be called "Damara Nama Publishing." Its main function is to publish a magazine. It will have four departments: Sales, Finance, Administration and Publishing.

Each department will have a department manager. All department managers will have an access clearance level of "admin" in our intranet. This basically means that they will be able to access almost every application on the intranet. I say "almost" because not every department head will actually have access to all applications. Everybody else in the company will have limited access to the applications.

{mospagebreak title=Intranet File Structure}

All applications that are going to be used on this intranet must adhere to the following rules:

  • They must all have a configuration file that contains application specific data such as the name of the application and database access credentials:

$appname="appname";
$dbsupport =FALSE or TRUE;
//db connection details
$dbtype = ‘mysql';
$dbhost = ‘localhost';
$dbname = ”;
$dbusername = ‘root';
$dbpass = ”;
$dbpath = "$dbtype://$dbuser:$dbpass@$dbhost/$dbname";
$requires_db_access=TRUE;

  • All applications must be object oriented in nature. This is not as much a rule as an optional requirement. An application does not have to be object oriented, but for the sake of consistency, if nothing else, I would suggest that it is written in object oriented code.

The file structure itself is very simple. Each application is going to have only one page which will take input and show output. How exactly a given application will function will be shown when we actually create the applications later on. The overall intranet file structure will look like this:

Below is a screen shot of what the intranet front page looks like:

{mospagebreak title=Design Code/Templates}

As you can see from the screen shot, I’ve not exactly exhausted the budget on the design of the page, but it is done neatly and presents the user with clear choices. This page provides the user with links to all the other applications in the intranet, through the navigation panel on the left.  The neat presentation of the page is caused by the use of CSS. The code for it is below:

/* CSS Document */
body {
   background-color: #FFFFFF;
   margin:0px;
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 24px;
}

a {
   color: #cc0000;
   text-decoration:none;
   font-weight:bold;
}

a:hover {
   color: #990000;
   text-decoration:underline;
}

h1 {
   color: #006699;
   font-size: 14px;
   font-weight: bold;
   margin: 0px 0px 5px 0px;
   border-bottom: 2px solid #006699;
}

h2 {
   color: #006699;
   font-size: 13px;
   font-weight: bold;
   margin: 0px 0px 0px 0px;
}

td {
   font-size: 12px;
   color: #333333;
}

.bar_central {
   background-image:  url("img/bg_central.png");
   height: 28px;
   font-size: 12px;
   color: #FFFFFF;
   padding-bottom: 3px;
   background-repeat: repeat-x;
}

.bar_central a {
   color: #FFFFFF;
   font-size: 12px;
   text-decoration: none;
}

.bar_central a:hover {
   text-decoration: underline;
}

.navhead_text {
   font-size: 12px;
   color: #FFFFFF;
   padding-bottom: 2px;
   padding-left: 10px;
   background-repeat: repeat-x;
}

.navblock {
   border-left: 1px solid #006699;
   border-right: 1px solid #006699;
   border-bottom: 1px solid #CCCCCC;
   background-image: url("img/bg_nav.png");
   background-repeat: repeat-y;
   padding-left: 5px;
   height: 23px;
   color: #006699;
   text-align: left;
}

.navblock a {
   text-decoration: none;
   color: #006699;
}

.navblock a:hover {
   text-decoration: none;
   color: #FE9900;
}

.tooltip {
   color: #006699;
   font-style: italic;
   font-size: 10px;
}

.tooltipblack {
   color: #333333;
   font-style: italic;
   font-size: 10px;
}

.navholder {
   padding-left: 8px;
   padding-top: 20px;
}

.contentholder {
   padding-top: 20px;
}

.bottom {
   border-top: 1px solid #999999;
   padding-top: 10px;
   color: #ccc;
}

.subbox {
   background-color: #F0F0f0;
   border-left: 1px solid #CCCCCC;
   padding-left: 7px;
   padding-right: 7px;
   padding-top: 4px;
   border-right: 1px solid #CCCCCC;
}

#mainarea {
   margin-top: 15px;
}

.dottedline {
   background-image:  url("img/bg_horizdots.gif");
   background-repeat: repeat-x;
   padding: 0px;
   height: 1px;
}

.input100 {
   border: 1px solid #999999;
   font-family: Tahoma, Arial, Verdana;
   font-size: 11px;
   color: #333333;
   background-color: #FFFFFF;
   padding-left: 4px;
   padding-right: 4px;
   width: 100px;
   height: 20px;
}

.input200 {
   border: 1px solid #999999;
   font-family: Tahoma, Arial, Verdana;
   font-size: 11px;
   color: #333333;
   background-color: #FFFFFF;
   padding-left: 4px;
   padding-right: 4px;
   width: 200px;
   height: 20px;
}

.input300 {
   border: 1px solid #999999;
   font-family: Tahoma, Arial, Verdana;
   font-size: 11px;
   color: #333333;
   background-color: #FFFFFF;
   padding-left: 4px;
   padding-right: 4px;
   width: 300px;
   height: 20px;
}

.textarea200 {
   border: 1px solid #999999;
   font-family: Tahoma, Arial, Verdana;
   font-size: 11px;
   color: #333333;
   background-color: #FFFFFF;
   padding: 4px;
   width: 200px;
   height: 125px;
}

.textarea300 {
   border: 1px solid #999999;
   font-family: Tahoma, Arial, Verdana;
   font-size: 11px;
   color: #333333;
   background-color: #FFFFFF;
   padding: 4px;
   width: 300px;
   height: 250px;
}

.tableheader1 {
   background-color: #006699;
   color: #FFFFFF;
   font-family: Tahoma, Arial, Verdana;
   font-weight: bold;
   font-size: 13px;
}

.tableshading1a {
   background-color: #B1D3ED;
}

.tableshading1b {
   background-color: #D0E2F2;
}

.tableheader2 {
   background-color: #CC0000;
   color: #FFFFFF;
   font-family: Tahoma, Arial, Verdana;
   font-weight: bold;
   font-size: 13px;
}

.tableshading2a {
   background-color: #D59299;
}

.tableshading2b {
   background-color: #DBB5BC;
}

.tableheader3 {
   background-color: #555555;
   color: #FFFFFF;
   font-family: Tahoma, Arial, Verdana;
   font-weight: bold;
   font-size: 13px;
}

.tableshading3a {
   background-color: #DDDDDD;
}

.tableshading3b {
   background-color: #EEEEEE;
}

.headertxt{
   font-size:24px;
  
color:#FFFFFF;
  
background-color:#669999;
}

.copyright{
  
font-family:Tahoma, Arial, Verdana;
  
text-align:right;
  
font-size:11px;
}

.smallheader{
  
background-color:#669999;
  
font-weight:bold;
}

.tdr{
  
background-color:#a4c2c2;
}

.logo {
   font:19px times new roman;
   color: #333300;
   letter-spacing:.4em;
   font-weight:bold;
}

/**divs*/

#msgblock{
   background-color:#CCCCCC;
   border: 1px solid #ccc;
  
left: 659px;
   top: 7px;
   height: 342px;
   width:799px;
  
overflow:scroll;
}

This style sheet is responsible for making all the pages in the intranet look smooth and neat. If you want to make a change in a particular part of the site, you just make it here and all the pages linked to it will apply the changes. You can see the advantage in this. Instead of going to each and every page on a site and making fixes, you just do it once and the changes will go throughout the site.

{mospagebreak title=More on Templates}

The next two HTML pages are the templates that are going to be used to display the intranet and application pages respectively. The templates give the applications a uniform, neat and presentable look. They also, like the CSS sheet, make it easy to apply cosmetic changes in one place for all pages to accept those changes. In other words, it makes it very easy to maintain web pages.

Fig1. Intranet template

<!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" />
<!– TemplateBeginEditable name="doctitle" –>
<title>Untitled Document</title>
<!– TemplateEndEditable –>
<!– TemplateBeginEditable name="head" –>
<!– TemplateEndEditable –>
<link href="intranet.css" rel="stylesheet" type="text/css">
<style type="text/css">
<!–
.style1 {color: #FFFFFF}
body {
   background-color: #a4c2c2;
}
–>
</style>
</head>
<body>
 
<table width="100%" border="0" cellspacing="2">
 
  <tr>
 
    <td colspan="2" valign="top" class="logo">DAMARA NAMA PUBLISHING </td>
 
  </tr>
    <tr>
 
    <td width="16%" valign="top" bgcolor="#FFFFFF">&nbsp;</td>
 
    <td width="84%" valign="top" bgcolor="#FFFFFF"><!– TemplateBeginEditable name="welcome" –>welcome<!– TemplateEndEditable –></td>
 
  </tr>
 
  <tr>
 
    <td width="16%" valign="top" bgcolor="#FFFFFF"><!– TemplateBeginEditable name="navigate" –>navigate<!– TemplateEndEditable –></td>
 
    <td valign="top" bgcolor="#FFFFFF"><!– TemplateBeginEditable name="main" –>main<!– TemplateEndEditable –></td>
 
  </tr>
 
  <tr>
 
    <td valign="top">&nbsp;</td>
 
    <td valign="top" class="copyright">copyright&copy;2007</td>
 
  </tr>
 
</table>
</body>
</html>

Fig2. Application template

<!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" />
<!– TemplateBeginEditable name="doctitle" –>
<title>Untitled Document</title>
<!– TemplateEndEditable –>
<!– TemplateBeginEditable name="head" –>
<!– TemplateEndEditable –>
<link href="intranet.css" rel="stylesheet" type="text/css">
<style type="text/css">
<!–
body {
   background-color: #a4c2c2;
}
–>
</style></head>
<body>
 
<table width="100%" border="0" cellspacing="2">
 
  <tr>
 
    <td colspan="2" valign="top" class="logo">DAMARA NAMA PUBLISHING </td>
 
  </tr>  
 
  <tr>
 
    <td width="13%" valign="top" bgcolor="#FFFFFF">&nbsp;</td>
 
    <td width="87%" valign="top" bgcolor="#FFFFFF"><!– TemplateBeginEditable name="welcome" –>welcome<!– TemplateEndEditable –></td>
 
  </tr>
 
  <tr>
 
    <td width="13%" valign="top" bgcolor="#FFFFFF"><!– TemplateBeginEditable name="navigate" –>navigate<!– TemplateEndEditable –></td>
 
    <td valign="top" bgcolor="#FFFFFF"><!– TemplateBeginEditable name="main" –>main<!– TemplateEndEditable –></td>
 
  </tr>
 
  <tr>
 
    <td valign="top">&nbsp;</td>
 
    <td valign="top" class="copyright">copyright&copy;2007</td>
 
  </tr>
 
</table>
</body>
</html>

Since we are discussing the wider intranet components, I thought we could deal with the validation class before moving on to the application framework components. The validation class is mainly used to validate form data. It has five functions:

  • filledin() – This function checks to see if the form variables are filled in.
  • isadmin() – This function checks to see if a user has admin level access.
  • checkemail() – This function checks to see if the email address supplied is valid.
  • savepass() – This function saves a password in hash form.
  • genpass() – This function generates a seven character password.

Below is a fuller outline of the validation class:

<?php
class validate{
   function filledin($form_vars){
    
foreach($form_vars as $key=> $value)
    
{
      
if(empty($key) || ($value == ”))
        
return FALSE;
     
}
    
return TRUE;
  
}

   function isadmin($sesslevel){
    
if($sesslevel == "admin"){
      
return TRUE;
    
}else{
      
return FALSE;
    
}
  
}

   function checkemail($aEmail){
    
if(eregi("^([a-z.])+([a-z])+@([a-z])+(.)([a-z]{3})$",$aEmail))
      
return TRUE;
    
else
      
return FALSE;
  
}//end function

   /*password functions*/
  
function savepass($apass){
 
    $salt = ‘SHIFLETT';
 
    $password_hash = md5($salt . md5($apass . $salt));

     return $password_hash;
  
}

   function genpass(){
 
   $chars = "1234567890abcdefghij345678klmnopqrs1234tuvwxyz1234567890";
 
   $thepass = ”;
 
   for($i=0;$i<7;$i++){
 
     $thepass .= $chars{rand() % 39};
 
   }
 
   return $thepass;
 
  }
}
?>

Conclusion

This article discussed the design of the intranet as well as the applications that it will host. The next article will discuss the components of the application framework.

[gp-comments width="770" linklove="off" ]

chat sex hikayeleri Ensest hikaye