Gestor de proyectos en PHPrunner vs. DotProject / Web2Project

Es muy habitual requerir una gestión de proyectos (proyectos y tareas) en muchas actividades de un empresa.

La primera impresión puede ser que se requiera para la gestión de los proyectos informáticos, pero no sólo es para eso, sino que también se requiere para el control de Planes (sistemas, estratégicos, etc.) que normalmente tienen Medidas y que esta Medidas tienen Proyectos de ejecución.

También, otros pretenden que sean herramientas que sustituye a herramientas como MS Project. Esto no es así, estas herramientas sirven para coordinar y controlar muchos proyectos, pero no el detalle de los proyectos.

Cuando he utilizado soluciones de este tipo (DotProject  y Web2Project, productos open source desarrollados en PHP y MySQL) siempre se complementaba los detalles de los proyectos con su seguimiento detallado en MS Project.

También, cuando he trabajado en la ejecución y seguimiento de los planes, una parte importante era el seguimiento de los proyectos, pero otras muy importantes eran:

• Inventario de las Medidas/Acciones con todos sus atributos de agrupaciones.
• Informes y cuadros de mando de seguimiento.
• Resumen de seguimiento para la dirección de la empresa.
• Etc.

Con esto quiero señalar que si utilizaba, por ejemplo Web2Project, tenía que integrar sus datos con otro aplicativo que manejase el resto de los datos y todos los informes y cuadros de mandos.

Lo que he pretendido es disponer de una solución de gestión de proyectos que pudiera crecer y adecuarse el resto de los datos que se requieren en los Planes y esto es bastante sencillo utilizando PHPRunner, por lo que se requiere es la funcionalidad básica de la gestión de los proyectos, a saber:

• Las entidades básicas son Compañías, Departamentos, Proyectos y Tareas.
• Las tareas se planifican según calendario laboral (sin fines de semana y festivos) o días naturales.
• En las tareas debe poderse definir jerarquía entre ellas (agrupación de tareas).
• Entre las tareas se pueden definir dependencias y poderse recalcular la fecha de inicio sí la tarea de la que depende se retrasa (camino crítico).

Otro aspecto muy importante es la seguridad, de tal forma que:

• A los proyectos se podrán configurar los acceso según:
  • Público (todos los usuarios podrán acceder)
  • Compañía (sólo podrán acceder los usuarios de la compañía del proyecto).
  • Departamento (sólo podrán acceder los usuarios del departamento del proyecto)
  • Propietario (sólo podrá acceder el propietario del proyecto)
  • Propietario proyecto y propietarios de tareas (Sólo podrán acceder estos usuarios)
• A las tareas se podrán configurar los acceso según:
  • Público (todos los usuarios podrán acceder)
  • Compañía (sólo podrán acceder los usuarios de la compañía del proyecto).
  • Departamento (sólo podrán acceder los usuarios del departamento del proyecto)
  • Propietario (sólo podrá acceder el propietario del proyecto)
  • Propietario proyecto y propietarios de tareas (Sólo podrán acceder estos usuarios)

Esta gestión de seguridad se ha realizado definiendo una lógica diferente a la utilizada normalmente en los desarrollos de PHPrunner y complementaria a estos.

Para el apoyo visual de la información se ha incluido la librería de javascript JSGANTT y FULLCALENDAR

Se han utilizado los plugins (descargables gratuitamente desde este portal):

• Colors.- Para selección y visualización de colores.
• BootstrapDataPicker.- Calendario para días festivos

DEMO: https://fhumanes.com/project

El ejemplo se ha desarrollado en inglés y español y se ha partido del modelo de datos de web2Project, para la definición de los atributos de “projects” y “tasks”.

También hay definición de CSS para disponer de un interfaz de aplicación agradable.

Esta figura muestra la página principal del ejercicio.

Además de arreglar algún mal funcionamiento, la nueva versión se ha actualizado a PHPRunner 10.6, se han corregido algunos errores de funcionamiento y se ha añadido:

• La gestión y visualización de problemas. El desarrollador informa del avance de los trabajos y puede informar de un problema y explicar el mismo, para que este dato llegue a todos los usuarios del proyecto.
• Se ha añadido la gestión de días festivos y se tiene en cuenta en la planificación de las actividades.
• Se ha creado un apartado de Informes en donde se ha hecho estos 2 casos:

Consulta de Tareas:

(1) Pestaña de todas las tareas.
(2) Pestaña de las tareas en que el usuario conectado es el propietario
(3) Pestaña de las tareas en que el usuario conectado está asignado.
(4) Se pueden aplicar diferentes filtros para restringir las tareas que salen en las distintas pestañas
(5) Se pueden buscar las tareas asignadas a un usuario.

Consulta de Usuarios asignados (Recursos);

(1) Se pueden utilizar los filtros para conocer las tareas asignadas a los usuarios.
(2) Se muestran las tareas, según asignación, mostrando el porcentaje de asignación.
(3) se puede hacer clic en el segmento y visualizar todos los datos de la tarea.

 

 

Los usuarios de acceso son los que se muestran en la imagen con sus password.

MUY IMPORTANTE:

No es una aplicación es una base para desarrollar tú aplicación

Ampliación de la gestión de seguridad

He cambiado la gestión de seguridad, haciendo qué:

• Todos los datos de Proyectos y Tareas sean consultables para todos los usuarios que tengan acceso al sistema.
• Sólo podrán modificar Proyectos (1) o Tareas (3), los usuarios que se ajusten a la configuración de acceso que tengan estas informaciones.
• Las Tareas y ficheros (2) heredaran de Proyectos (1) los accesos cuando los estemos tratando.
• De igual forma, los Log (4) y Ficheros (4) heredaran los accesos de Tareas (3) cuando los estemos tratando.
• Para agilizar el interfaz, de ha cambiado la lógica de PHPRunner para que las Altas/Inserciones de Log y Ficheros se hagan de forma directa en “POPUP”.

Codificación de elementos más importantes

Este conjunto de elementos son las características más importante del desarrollo, por ello voy a exponerlas en el artículo.

gantt_project.php

<?php
$keyMaster= $_SESSION['project_id'];

// unset($_SESSION['project_id']); // Not delete

$trunk1="<link rel=\"stylesheet\" type=\"text/css\" href=\"jsgantt/jsgantt.css\" />
<script language=\"javascript\" src=\"jsgantt/jsgantt.js\"></script>
<div style=\"position:relative\" class=\"gantt\" id=\"GanttChartDIV\"></div>
<script>";

if ($_SESSION['language'] == "Spanish") {
$trunk1 .= "
var g = new JSGantt.GanttChart(document.getElementById('GanttChartDIV'), 'week');
if (g.getDivId() != null) {
  g.setCaptionType('Complete');  // Set to Show Caption (None,Caption,Resource,Duration,Complete)
  g.setQuarterColWidth(36);
  g.setShowDur(0); // Show/Hide Duration (0/1)
  g.setShowComp(0); // Show/Hide % Compl. (0/1)
  g.setDateInputFormat('yyyy-mm-dd');  // Set format of input dates ('mm/dd/yyyy', 'dd/mm/yyyy', 'yyyy-mm-dd')
  g.setDateTaskTableDisplayFormat('dd/mm/yyyy'); // Set format to display dates ('mm/dd/yyyy', 'dd/mm/yyyy', 'yyyy-mm-dd')
  g.setDateTaskDisplayFormat('day dd month yyyy'); // Shown in tool tip box
  g.setDayMajorDateDisplayFormat('mon yyyy - Week ww') // Set format to display dates in the \"Major\" header of the \"Day\" view
  g.setWeekMinorDateDisplayFormat('dd mon') // Set format to display dates in the \"Minor\" header of the \"Week\" view
  g.setShowTaskInfoLink(1); // Show link in tool tip (0/1)
  g.setShowEndWeekDate(0); // Show/Hide the date for the last day of the week in header for daily view (1/0)
  g.setUseSingleCell(10000); // Set the threshold at which we will only use one cell per table row (0 disables).  Helps with rendering performance for large charts.
  g.setFormatArr('Day', 'Week', 'Month', 'Quarter'); // Even with setUseSingleCell using Hour format on such a large chart can cause issues in some browsers

// Language
  g.addLang('es',{
'january': 'Enero',
'february': 'Febrero',
'march': 'Marzo',
'april': 'Abril',
'maylong': 'Mayo',
'june': 'Junio',
'july': 'Julio',
'august': 'Agosto',
'september': 'Septiembre',
'october':'Octubre',
'november':'Noviembre',
'december':'Diciembre',
'jan':'Ene',
'feb':'Feb',
'mar':'Mar',
'apr':'Abr',
'may':'May',
'jun':'Jun',
'jul':'Jul',
'aug':'Ago',
'sep':'Sep',
'oct':'Oct',
'nov':'Nov',
'dec':'Dic',

'sunday':'Domingo',
'monday':'Lunes',
'tuesday':'Martes',
'wednesday':'Miércoles',
'thursday':'Jueves',
'friday':'Viernes',
'saturday':'Sábado',
'sun':'	Dom',
'mon':'	Lun',
'tue':'	Mar',
'wed':'	Mie',
'thu':'	Jue',
'fri':'	Vie',
'sat':'	Sab',
'resource':'Recurso',
'duration':'Duración',
'comp':'% Compl.',
'completion':'Terminado',
'startdate':'Inicio',
'enddate':'Fin',
'moreinfo':'+información',
'notes':'Notas',

'format':'Formato',
'hour':'Hora',
'day':'Dia',
'week':'Semana',
'month':'Mes',
'quarter':'Trimestre',
'hours':'Horas',
'days':'Días',
'weeks':'Semanas',
'months':'Meses',
'quarters':'Trimestres',
'hr':'Hr',
'dy':'D',
'wk':'Sem',
'mth':'Mes',
'qtr':'Trim',
'hrs':'Hrs',
'dys':'Dias',
'wks':'Sems',
'mths':'Meses',
'qtrs':'Trims'});

  g.setLang('es');
  // Parameters(pID, pName,pStart,pEnd,pStyle,pLink (unused), pMile, pRes, pComp, pGroup, pParent, pOpen, pDepend, pCaption, pNotes, pGantt)
";
} else {
$trunk1 .= "
var g = new JSGantt.GanttChart(document.getElementById('GanttChartDIV'), 'week');
if (g.getDivId() != null) {
  g.setCaptionType('Complete');  // Set to Show Caption (None,Caption,Resource,Duration,Complete)
  g.setQuarterColWidth(36);
  g.setShowDur(0); // Show/Hide Duration (0/1)
  g.setShowComp(0); // Show/Hide % Compl. (0/1)
  g.setDateInputFormat('yyyy-mm-dd');  // Set format of input dates ('mm/dd/yyyy', 'dd/mm/yyyy', 'yyyy-mm-dd')
  g.setDateTaskTableDisplayFormat('mm.dd.yyyy'); // Set format to display dates ('mm/dd/yyyy', 'dd/mm/yyyy', 'yyyy-mm-dd')

  // g.setDateTaskDisplayFormat('day dd month yyyy'); // Shown in tool tip box
  // g.setDayMajorDateDisplayFormat('yyyy mon- Week ww') // Set format to display dates in the \"Major\" header of the \"Day\" view
  // g.setWeekMinorDateDisplayFormat('mon dd') // Set format to display dates in the \"Minor\" header of the \"Week\" view
  g.setShowTaskInfoLink(1); // Show link in tool tip (0/1)
  g.setShowEndWeekDate(0); // Show/Hide the date for the last day of the week in header for daily view (1/0)
  g.setUseSingleCell(10000); // Set the threshold at which we will only use one cell per table row (0 disables).  Helps with rendering performance for large charts.
  g.setFormatArr('Day', 'Week', 'Month', 'Quarter'); // Even with setUseSingleCell using Hour format on such a large chart can cause issues in some browsers
  // Parameters(pID, pName,pStart,pEnd,pStyle,pLink (unused), pMile, pRes, pComp, pGroup, pParent, pOpen, pDepend, pCaption, pNotes, pGantt)
";
    }
;

$trunk2='';
// Read Task the Project
$sql="SELECT
t.`task_id`,
t.`name`,
DATE_FORMAT(t.`start_date`,'%Y-%m-%d') `start_date`,
DATE_FORMAT(t.`end_date`,'%Y-%m-%d') `end_date`,
t.`dynamic`,
t.`related_url`,
t.`milestone`,
t.`percent_complete`,
ifnull(t.`parent`,0) parent,
ifnull(t.`dependent`,0) dependent,
t.`description`,
ifnull(u.login,'') creator
FROM tasks t
inner join users u on (t.creator=u.user_id)
WHERE t.`projects_project_id` = $keyMaster
ORDER BY t.`order`";
$resql = DB::Query($sql);

 while ($row = $resql->fetchAssoc()) {
    $task_id = $row['task_id'];
    $task_name = addslashes($row['name']);
    $task_start_date = $row['start_date'];
    $task_end_date = $row['end_date'];
    $task_color = 'gtaskblue';
    if ($row['dynamic'] == 1){
        $task_color = 'ggroupblack';
        }
    $task_link = $row['related_url'];
    $task_mile = $row['milestone'];
    $task_resource = $row['creator'];
    $task_completion= $row['percent_complete'];
    $task_group = $row['dynamic'];
    $task_parent = $row['parent'];
    $task_open = '0';
    $task_depend = $row['dependent'];
    $task_caption = '';
    $task_description = $row['description'];
    $task_note = addslashes(
            str_replace(hex2bin('0a'),'',
            str_replace(hex2bin('0d'),'',
            str_replace(PHP_EOL,'<br />',$task_description)
            )
            )
            );

    $trunk2.="g.AddTaskItem(new JSGantt.TaskItem(
    ";
    $trunk2.="$task_id,'$task_name','$task_start_date','$task_end_date','$task_color','$task_link',$task_mile,'$task_resource',$task_completion,$task_group,$task_parent,$task_open,'$task_depend','$task_caption','$task_note',g));
    ";
    }
$trunk3="
    g.Draw();	
    g.DrawDependencies();


  }
  else
  {
    alert(\"not defined\");
  }

</script>";
$value=$trunk1.$trunk2.$trunk3;
echo $value;

?>

timeline.php

<?php

if ($_SESSION['language'] == 'Spanish' ) {
  $language = 'es';
  $firstDay = 1;
  $Tusers = 'Usuarios';
} else {
  $language = 'en';
  $firstDay = 0;
  $Tusers = 'Users';
}

$users =

$now = substr(now(),0,10);

$str1 = <<<EOD
 <style>
    html, body {
      margin: 0;
      padding: 0;
      font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
      font-size: 12px; 
    }
    #calendar {
      max-width: 1000px;
      max-height: 400px;
      margin: 40px auto;
    }
  </style>


<link href='fullcalendar/packages/core/main.css' rel='stylesheet' />
<link href='fullcalendar/packages-premium/timeline/main.css' rel='stylesheet' />
<link href='fullcalendar/packages-premium/resource-timeline/main.css' rel='stylesheet' />
<script src='fullcalendar/packages/core/main.js'></script>
<script src='fullcalendar/packages/interaction/main.js'></script>
<script src='fullcalendar/packages-premium/timeline/main.js'></script>
<script src='fullcalendar/packages-premium/resource-common/main.js'></script>
<script src='fullcalendar/packages-premium/resource-timeline/main.js'></script>

<script src='fullcalendar/packages/core/locales-all.js'></script>
<script src='fullcalendar/tooltip/tooltip.min.js'></script>

<script>
  var initialLocaleCode = '$language';
  var firstDay = '$firstDay'; 
  
  document.addEventListener('DOMContentLoaded', function() {
    var calendarEl = document.getElementById('calendar');

    var calendar = new FullCalendar.Calendar(calendarEl, {
      plugins: [ 'interaction', 'resourceTimeline' ],
      now: '$now',
      
      // timeZone: 'UTC+1', // the default 'local' (unnecessary to specify)
      locale: initialLocaleCode,
      businessHours: {
      // days of week. an array of zero-based day of week integers (0=Sunday)
      daysOfWeek: [ 1, 2, 3, 4, 5 ], // Monday - Thursday
      startTime: '08:00', // a start time (08am in this example)
      endTime: '18:00', // an end time (6pm in this example)
        },
      
      editable: false,
      aspectRatio: 1.8,
      scrollTime: '00:00',
      header: {
        left: 'today prev,next',
        center: 'title',
        right: 'resourceTimelineMonth,resourceTimelineYear'
      },
      defaultView: 'resourceTimelineMonth',
      navLinks: true,
      resourceAreaWidth: '25%',
      resourceLabelText: '$Tusers',
      //
      eventClick: function(info) {
        var Ev_id = info.event.id;
        var title = info.event.title;
        var url = "v_resource_view.php?editid1="+Ev_id;
        var header = '<h2 data-itemtype="view_header" data-itemid="view_header" data-pageid="10">'+'Resource: '+ title+'</h2>' ;
        window.popup = Runner.displayPopup({
                    url: url,
                    width: 1000,
                    height: 600,
                    header: header
       }); 
      },
      //
      resourceLabelText: '$Tusers',
      resources: { // you can also specify a plain string like 'json/resources.json'
        url: 'timeline_ajax_resource.php'},

      events: { // you can also specify a plain string like 'json/events-for-resources.json'
        url: 'timeline_ajax_event.php'},
    });

    calendar.render();
  });

</script>
  <div id='calendar'></div>

EOD;

echo $str1;

?>

timeline_ajax_resource.php

<?php
require_once("include/dbcommon.php"); // DataBase PHPRunner

// Require our Event class and datetime utilities
require 'fullcalendar/php/utils.php';



$sql = "
SELECT u.user_id, u.login, u.username , concat(c.name,'+', ifnull(d.name,'')) name, ((u.companies_company_id*10000) + ifnull(u.departments_dept_id,0)) id_companie
FROM users u
left join companies c on (u.companies_company_id = c.company_id)
left join departments d On (d.dept_id = u.departments_dept_id)
order by c.name, d.name,u.login
";


$resql = DB::Query($sql); 
// Accumulate an output array of event data arrays.
// $output_arrays = array();
$str = '[';

$group = '';
while ($data = $resql->fetchAssoc()){
 
    If ($group <> $data['name']) {
        if ($group <> '' ) {
            $str = substr($str,0,strlen($str)-1); // erase last ","
            $str .= '  ] },';
        }
        $str .= '{ "id": "'.$data['id_companie'].'", "title": "'.$data['name'].'", "children": [';
        $group = $data['name'];
        
    } 
    $str .= '{ "id": "'.$data['user_id'].'", "title": "'.$data['username'].'", "eventColor": "'.'#1D52B2'.'" },';
    
}
$str = substr($str,0,strlen($str)-1); // erase last ","
$str .= '  ] } ]';

echo $str;
// Send JSON to the client.
// $str = json_encode($output_arrays);
// echo json_encode($output_arrays);

?>

timeline_ajax_event.php

<?php
require_once("include/dbcommon.php"); // DataBase PHPRunner

// Require our Event class and datetime utilities
require 'fullcalendar/php/utils.php';

// Short-circuit if the client did not give us a date range.
if (!isset($_GET['start']) || !isset($_GET['end'])) {
  die("Please provide a date range.");
}

// Parse the start/end parameters.
// These are assumed to be ISO8601 strings with no time nor timeZone, like "2013-12-29".
// Since no timeZone will be present, they will parsed as UTC.
$range_start = parseDateTime($_GET['start']);
$range_end = parseDateTime($_GET['end']);

// Parse the timeZone parameter if it is present.

$time_zone ='UTC';
if (isset($_GET['timeZone'])) {
//   $time_zone = new DateTimeZone($_GET['timeZone']);
}


$start = substr($_GET['start'],0,10).' 00:00:00'; 
$end   = substr($_GET['end']  ,0,10).' 00:00:00';
$now   = date('Y-m-d H:i:s', strtotime(now(). ' +2 hour')); // now() + 1
if ( $start < $now ) { //  Minimum date of the moment
//		$start = $now;
    }
$language = $_SESSION['language'];

$strSQL = $_SESSION['timeline_sql'];
$strWhereClause = $_SESSION['timeline_where'];

$where = ' AND ';
if ($strWhereClause == '') {
    $where = ' WHERE ';
}

$sql = $strSQL . $where. " t1.end_date >= '$start' and t1.start_date <= '$end' ";

custom_error(4,"SQL de Eventos Timeline : ".$sql); // To debug  

$resql = DB::Query($sql); 
// Accumulate an output array of event data arrays.
$output_arrays = array();

while ($data = $resql->fetchAssoc()){  
$e_start = substr($data['start_date'],0,10); 
$e_end   = substr($data['end_date'],0,10).' 00:00:00';
$output_arrays[] = array(
    'id'=>$data['user_task_id'],
    'title'=>$data['perc_assignment'].' %'.' - '.$data['login'],
    'resourceId'=>$data['t3_users_user_id'],
    'start'=>$e_start,
    'end'=>date('Y-m-d', strtotime($e_end. ' +1 day')),
    'description'=>$data['username']);
    }

// Send JSON to the client.
// $str = json_encode($output_arrays);
echo json_encode($output_arrays);

?>

Actualización del 31/01/2023

En esta actualización, además de utilizar la versión 9.7 y así poder utilizar PHP 8.1, incorpora:

• La nueva versión del plugin BootstrapDataPicker.- Calendario con días festivos
• La jerarquía de los Proyectos. Un proyecto puede tener proyectos “hijos” y esto es porque los proyectos se puede subdividir en subproyectos para respetar la dependencia de Compañía y/o Departamentos. En una empresa grande o mediana, es muy habitual que en los proyectos se encarguen actividades a otros Departamentos y dichas actividades dependan de un responsable de proyecto diferente, pero que a su vez reporte al Director del Proyecto “principal”.
• El modelo de datos no ha cambiado con estos cambios.

El aspecto del Gantt ha cambiado al incorporar  los subproyectos.

Para cualquier duda o lo que necesitéis, contactar conmigo a través del email [email protected]

Os facilito los fuentes, de las 2 últimas versiones,  para que lo podáis instalar y modificar en vuestros Windows.