程序员从头看一个项目该如何_如何从头开始在PHP和MySQL中构建项目管理应用程序...

最新推荐文章于 2024-09-21 11:30:16 发布

cumian8165

最新推荐文章于 2024-09-21 11:30:16 发布

阅读量494

点赞数

文章标签：数据库项目管理 python mysql java

原文链接：https://www.freecodecamp.org/news/build-a-simple-project-management-application-from-scratch-in-php-5c0f886d8560/

版权

程序员从头看一个项目该如何

by Richard

理查德(Richard)

如何从头开始在PHP和MySQL中构建项目管理应用程序 (How to build a Project Management Application in PHP & MySQL from scratch)

Trying to find a project management application is a daunting task: you want a system with powerful features and you must get a buy-in from your colleagues. Most of the time, you wind up with a bloated system filled with features you’ll never use.

试图找到一个项目管理应用程序是一项艰巨的任务：您想要一个功能强大的系统，并且必须得到同事的支持。在大多数情况下，您会发现一个a肿的系统充满了您永远不会使用的功能。

The good news is that it turns out it is not that difficult to build one from scratch yourself. After reading this tutorial, you should have a clean, well-designed project management application up and running in less than an hour.

好消息是，事实证明，自己重新创建一个并不难。阅读完本教程后，您应该在一个小时内启动并运行一个设计良好的干净项目管理应用程序。

什么是项目管理应用程序？ (What IS a Project Management Application?)

A project management application is a software system used for project planning, resource allocation, tracking of project components, and change management.

项目管理应用程序是一个软件系统，用于项目计划，资源分配，项目组件跟踪和变更管理。

In this tutorial, we are going to build a simple project management system in PHP which employees and managers can use for collaboration and communication between project stakeholders.

在本教程中，我们将使用PHP构建一个简单的项目管理系统，员工和管理人员可以使用该系统在项目涉众之间进行协作和交流。

什么是项目管理应用程序？ (What is IN a Project Management Application?)

We will be creating a simple and easily customizable PM system to tracks projects, including milestones, tasks, hours, costs, and more. Since every project is unique, this tutorial merely means to build an application foundation; you should be able to easily extend it based on your requirements.

我们将创建一个简单且易于定制的PM系统，以跟踪项目，包括里程碑，任务，工时，成本等。由于每个项目都是唯一的，因此本教程仅意味着建立应用程序基础。您应该能够根据需要轻松扩展它。

In our project management application, employees will be able to:

在我们的项目管理应用程序中，员工将能够：

View their tasks
查看他们的任务
Log in hours worked
登录工作时间

Managers will be able to:

管理人员将能够：

Manage projects
管理专案
Manage milestones
管理里程碑
Manage tasks
管理任务
Manage costs and hours
管理成本和时间
Manage employee resources
管理员工资源

项目管理系统的基础 (The Building Blocks of a Project Management System)

Here are the primary functions of a project management system:

以下是项目管理系统的主要功能：

Project planning: To define a project schedule, a project manager may use the software to map project tasks and visually describe task interactions.
项目计划 ：要定义项目时间表，项目经理可以使用该软件来绘制项目任务并直观地描述任务交互。
Task management: Allows the project manager to create and assign tasks, establish deadlines, and produce status reports.
任务管理 ：允许项目经理创建和分配任务，确定截止日期并生成状态报告。
Resource management: Defines responsibilities — who is supposed to do what.
资源管理 ：定义责任-应该由谁来做。
Budgeting and cost tracking: A good project management application facilitates budget reporting as well as viewing, notifying, and updating costs for stakeholders.
预算和成本跟踪 ：一个好的项目管理应用程序可以帮助预算报告以及查看，通知和更新利益相关者的成本。
Time tracking: The software must have the ability to track time spent on all tasks and maintain records for third-party consultants.
时间跟踪 ：该软件必须具有跟踪所有任务所花费的时间并维护第三方顾问记录的能力。

系统要求 (System Requirements)

PHP 5.3+
PHP 5.3以上
MySQL or MariaDB
MySQL或MariaDB
phpGrid
phpGrid

创建项目管理数据库 (Creating a Project Management Database)

We will start by creating our project management database. The main tables we will use are:

我们将从创建项目管理数据库开始。我们将使用的主要表是：

Clients — customer company data
客户 -客户公司数据
Contacts — client contact data. A client can have one or more contacts.
联系人 -客户联系人数据。客户可以有一个或多个联系人。
Projects — project information
项目 -项目信息
Milestones — project milestone
里程碑 -项目里程碑
Tasks — project tasks
任务 -项目任务
Hours — time spent on each task
小时 -在每个任务上花费的时间
Costs — cost of a task
成本 -任务成本
Users — user data; one can be either an employee or a manager
用户 -用户数据；一个人可以是雇员或经理

Other tables (lookup tables):

其他表( 查找表)：

ms_status
ms_status
proj_status
proj_status
task_status
task_status

完整的数据库架构图 (Complete Database Schema Diagram)

A database schema is the structure that represents the logical view of the entire database: tables, views, and primary and foreign keys. A database schema includes all entities and the relationships between them.

数据库模式是代表整个数据库的逻辑视图的结构：表，视图以及主键和外键。数据库模式包括所有实体及其之间的关系。

Below is the database diagram of our simple project management application. The key symbol in each table represents the table’s primary key while the magnifying glass indicates a foreign key linking it to another table (lookup table) in the database.

下面是我们简单的项目管理应用程序的数据库图。每个表中的键符号表示表的主键，而放大镜则表示将其链接到数据库中另一个表(查找表)的外键。

simple_pm_install.sql (simple_pm_install.sql)

Once you have an understanding of the database’s table structure, obtain the simple_pm_install.sql sql script from this tutorial’s GitHub repo, and then execute the sql script using a MySQL tool such as MySQL Workbench or Sequel Pro. This will create a new database named simple_pm and tables we need in this tutorial.

了解数据库的表结构后，请从本教程的GitHub存储库中获取simple_pm_install.sql sql脚本，然后使用MySQL工具(如MySQL Workbench或Sequel Pro)执行sql脚本。这将创建一个名为simple_pm的新数据库以及本教程中需要的表。

设置phpGrid (Setup phpGrid)

Our simple project management contains many DataGrids. The DataGrid is a spreadsheet-like data table which displays rows and columns representing records and fields from the database table. The DataGrid provides the end-user with the ability to read and write to the database tables on a web page.

我们简单的项目管理包含许多DataGrid。 DataGrid是一个类似于电子表格的数据表，它显示代表数据库表中记录和字段的行和列。 DataGrid为最终用户提供了读取和写入网页上数据库表的功能。

To create the DataGrid, we use a dataGrid tool from phpGrid . The reason why we use a tool instead of building our grids from scratch is that developing a DataGrid in php is usually extremely tedious and prone to errors. The phpGrid DataGrid library will handle all internal database CRUD (Create, Remove, Update, and Delete) operations for us offering faster and better results with minimal coding.

要创建DataGrid，我们使用phpGrid中的dataGrid工具。我们使用工具而不是从头开始构建网格的原因是，在php中开发DataGrid通常非常繁琐且容易出错。 phpGrid DataGrid库将为我们处理所有内部数据库CRUD(创建，删除，更新和删除)操作，以最少的编码提供更快，更好的结果。

To install phpGrid, follow these steps:

要安装phpGrid，请按照以下步骤操作：

Unzip the phpGrid download file.
解压phpGrid下载文件。
Upload the phpGrid folder to the phpGrid folder.
将phpGrid文件夹phpGrid文件夹。
Complete the installation by configuring the conf.php file.
通过配置conf.php文件来完成安装。

Before we begin coding, we must include the following information in `conf.php` the phpGrid configuration file. Here is an example of the database connection settings:

在开始编码之前，我们必须在phpGrid配置文件conf.php中包含以下信息。这是数据库连接设置的示例：

define(‘PHPGRID_DB_HOSTNAME’, ‘localhost’); define(‘PHPGRID_DB_USERNAME’, ‘root’); define(‘PHPGRID_DB_PASSWORD’, ‘’); define(‘PHPGRID_DB_NAME’, ‘custom_pm’); define(‘PHPGRID_DB_TYPE’, ‘mysql’);

PHPGRID_DB_HOSTNAME — web server IP or host name
PHPGRID_DB_HOSTNAME — Web服务器IP或主机名
PHPGRID_DB_USERNAME — database user name
PHPGRID_DB_USERNAME —数据库用户名
PHPGRID_DB_PASSWORD — database password
PHPGRID_DB_PASSWORD —数据库密码
PHPGRID_DB_NAME — database name
PHPGRID_DB_NAME —数据库名称
PHPGRID_DB_TYPE — type of database
PHPGRID_DB_TYPE —数据库类型
PHPGRID_DB_CHARSET — always ‘utf8’ in MySQL
PHPGRID_DB_CHARSET —在MySQL中始终为'utf8'

页面模板 (Page Template)

Our page will be comprised of a header, menu, body, and footer. Instead of creating the same page elements repeatedly, we will start by creating a reusable page template.

我们的页面将由页眉，菜单，正文和页脚组成 。与其重复创建相同的页面元素，我们首先创建一个可重用的页面模板。

head.php (head.php)

This is a basic HTML5 template header; it includes a link to a custom stylesheet that will be created in a later step.

这是一个基本HTML5模板标头；它包括指向将在以后的步骤中创建的自定义样式表的链接。

Notice the usage of $_GET['currentPage']. Each page will set a value that will highlight the name of the current page on the top menu bar.

注意$_GET['currentPage']的用法。每个页面都会设置一个值，该值将在顶部菜单栏上突出显示当前页面的名称。

Include the following code in style.css for menu styling; it will transform the above unordered list into a menu.

在style.css包含以下代码以进行菜单样式设置；它将上面的无序列表转换为菜单。

Simply includes the closing tags for the elements we opened in the header:

只需包括我们在标题中打开的元素的结束标记：

我们完整的可重复使用页面模板 (Our Complete Reusable Page Template)

The main content will go after the section title.

主要内容将在节标题之后。

项目管理主页 (Project Management Main Pages)

Our project management application for managers has four pages:

我们的经理项目管理应用程序有四个页面：

Clients
客户群
Client Details
客户资料
Projects
专案
Project Details
项目详情

The Clients page displays a list of clients with links to individual client details (Client Details page).

客户端页面显示客户端列表，其中包含指向各个客户端详细信息的链接( 客户端详细信息页面)。

The Projects page displays a list of projects being managed with links to project details (Project Details page).

“ 项目”页面显示了正在管理的项目列表，并带有指向项目详细信息的链接(“ 项目详细信息”页面)。

设计样机 (Design Mockup)

Here is our project management application design mockup for project managers who manage one or more projects and assign tasks to employees.

这是我们的项目管理应用程序设计模型，适用于管理一个或多个项目并将任务分配给员工的项目经理。

客户群 (Clients)

When a manager logs in to the project management system, the first page he sees is the Clients page which contains a complete list of companies.

当经理登录到项目管理系统时，他看到的第一页是“ 客户”页面，其中包含公司的完整列表。

The following code will give us a list of clients.

以下代码将为我们提供客户列表。

The first line creates a phpGrid object by passing the SELECT SQL statement with its primary key id followed by the name of the database table – clients.
第一行通过将SELECT SQL语句与它的主键创建phpGrid对象id -随后的数据库表名clients 。
The second line creates a dynamic URL from the primary key “id”; it uses a function called set_col_dynalink(). This function sets a specific column-to-display HTML hyperlink URL based on dynamic values. If the primary key “id” has the value 100, it will display a URL like this client-details.php?id=100 which drills down the client detail page.
第二行从主键“ id”创建一个动态URL；它使用了一个名为set_col_dynalink()的函数。此函数根据动态值设置特定的列显示HTML超链接URL。如果主键“ id”的值为100，它将显示一个类似于client-details.php?id=100的URL，该URL会向下钻取客户端详细信息页面。
The third line, enable_edit(), makes the DataGrid editable and all CRUD (Create, Read, Update, Delete) operations are now accessible.
第三行enable_edit()使DataGrid可编辑，并且现在可以访问所有CRUD(创建，读取，更新，删除)操作。
The last line calls the display() function to render the DataGrid on the screen.
最后一行调用display()函数以在屏幕上呈现DataGrid。

You can find out more demos below using those functions:

您可以使用这些功能在下面找到更多演示：

Display Dynamic URL | phpGridFrom example above, we learn that phpGrid can display simple, static URL using set_col_link() method. However, it is…phpgrid.com CRUD PHP Datagrid (Editable Datagrid) * | phpGridThe PHP datagrid is not editable by default. You can enable edit by simply calling enable_edit(). Whala!phpgrid.com

显示动态网址| phpGrid 从上面的示例中，我们了解到phpGrid可以使用set_col_link()方法显示简单的静态URL。 但是，它是… phpgrid.com CRUD PHP Datagrid(可编辑Datagrid) phpGrid 默认情况下，PHP数据网格不可编辑。 您只需调用enable_edit()即可启用编辑。 鲸鱼！ phpgrid.com

客户资料 (Client Details)

From the Clients page, the client name has a hyperlink that redirects to the Client Details page for that client when clicked.

在“ 客户端”页面上，客户端名称具有一个超链接，单击该链接时，该超链接将重定向到该客户端的“客户端详细信息”页面。

From the Client Details page, we need to obtain the Client ID that is passed as the URL parameter.

从“ 客户端详细信息”页面，我们需要获取作为URL参数传递的客户端ID。

In our application, the Client ID should always be an integer. Thus, we use the PHP intval() function to ensure the Client ID is returned as an integer.

在我们的应用程序中，客户端ID应该始终为整数。因此，我们使用PHP intval()函数来确保将客户端ID作为整数返回。

The following code displays projects associated with the current $clientId using the filter function set_query_filter(). In addition, we make the DataGrid editable with the enable_edit() function; phpGrid will take care of any CRUD operations for us.

以下代码使用过滤器函数set_query_filter()显示与当前$clientId关联的项目。另外，我们使用enable_edit()函数使DataGrid可编辑； phpGrid将为我们处理任何CRUD操作。

Client Details > Projects

客户详细信息>项目

As you may notice, we again use the same function, set_col_dynalink(), to create hyperlinks to the Project Details table using the Project ID. We will get into the project-details.php page next.

您可能会注意到，我们再次使用相同的函数set_col_dynalink() ，以使用Project ID创建指向Project Details表的超链接。接下来，我们将进入project-details.php页面。

<h4>Projects</h4>

Client Details > Contacts

客户详细信息>接触

Under the Projects DataGrid, a list of contacts associated with the $clientid is displayed using the same functions set_query_filter() and enable_edit().

在Projects DataGrid下，使用相同的函数set_query_filter()和enable_edit()显示与$clientid关联的联系人列表。

联络人 (Contacts)

专案 (Projects)

Now, let’s build the Projects page.

现在，让我们构建“ 项目”页面。

The Projects page displays a list of managed projects. It is very similar to the Clients page except that the database table is “Projects,” and the hyperlinks have the URL project-details.php instead of client-details.php.

“ 项目”页面显示托管项目的列表。它与“ 客户端”页面非常相似，除了数据库表是“ Projects”，并且超链接具有URL project-details.php而不是client-details.php 。

项目详情 (Project Details)

From the Projects page, each project name has a hyperlink which redirects to each individual Project Details page when clicked.

在“ 项目”页面上，每个项目名称都有一个超链接，单击该超级链接可以重定向到每个“ 项目详细信息”页面。

And from the Project Details page, we retrieve the Project ID for the URL parameter.

然后从“ 项目详细信息”页面中，检索URL参数的“项目ID”。

Look familiar? Because it is! It should because both Projects and Project Details pretty much follow the same coding pattern used in the Clients and Client Details pages; there are not really that many surprises.

看起来熟悉？因为它是！这应该是因为“ 项目”和“ 项目详细信息”几乎都遵循“ 客户”和“ 客户详细信息”页面中使用的相同编码模式。真的没有那么多惊喜。

The Project Details page is made of the following grids, all filtered by the $projectId obtained from the URL parameter.

“ 项目详细信息”页面由以下网格组成，所有这些网格均由从URL参数获得的$projectId进行过滤。

Milestones
大事记
Tasks
任务
Hours
小时
Costs
费用

大事记 (Milestones)

A milestone marks a major event in a project timeline. Here, we can easily display all the milestones of a project by filtering the value $projectId. Project managers have the necessary access rights to modify the milestones.

里程碑标志着项目时间表中的重大事件。在这里，我们可以通过过滤值$projectId轻松显示项目的所有里程碑。项目经理具有修改里程碑的必要访问权限。

Likewise, we can easily filter and display a list of tasks for the current project.

同样，我们可以轻松过滤并显示当前项目的任务列表。

I think you are probably getting the hang of it now. Here’s the code for the two remaining datagrids.

我认为您现在可能已经掌握了它。这是剩下的两个数据网格的代码。

员工页面 (Employees Page)

We can now move on to the final part of the tutorial, the Employees page. Employees can login to view active project tasks assigned to them, track task hours, and costs. Their responsibility is simple: to monitor the tasks and log hours worked on any specific project task.

现在，我们可以转到教程的最后部分，即“ 雇员”页面。员工可以登录以查看分配给他们的活动项目任务，跟踪任务时间和成本。他们的责任很简单：监视任务并记录在任何特定项目任务上的工作时间。

设计样机 (Design Mockup)

The Employees page has only one menu item: Tasks.

员工页面只有一个菜单项：任务。

我的活动任务 (My Active Tasks)

The first part of the page shows a list of active tasks assigned to the current employee. Each task will have the hours reported by the current employee; this is a perfect situation in which to use a phpGrid subgrid.

页面的第一部分显示了分配给当前员工的活动任务列表。每个任务将有当前员工报告的时间；这是使用phpGrid子网格的理想情况。

We also need to use set_query_filter() to display only active tasks that have Status value "2", and only for the current employee.

我们还需要使用set_query_filter()仅显示状态值为“ 2”的活动任务，并且仅显示当前雇员。

For demo purposes, we hard-coded the Employee ID to 2. In a real-world application, the Employee ID value should be stored and retrieved using PHP SESSION.

出于演示目的，我们将Employee ID硬编码为2。在实际应用中，应使用PHP SESSION存储和检索Employee ID值。

We then create the active Tasks DataGrid for the current employee. Notice the filter function.

然后，我们为当前员工创建活动的Tasks DataGrid。注意过滤器功能。

Once we’ve defined the grid for the active tasks, we create a DataGrid to log the hours reported by the current employee.

为活动任务定义网格后，我们将创建一个DataGrid来记录当前员工报告的工时。

Lastly, set_subgrid() causes the Hours DataGrid to become a subgrid of the Tasks DataGrid. The linking field in the Hours subgrid is ‘TaskID’, which is the second parameter, and in the main grid Tasks, it is “id,” the third parameter.

最后， set_subgrid()使Hours DataGrid成为Tasks DataGrid的子网格。 Hours子网格中的链接字段是“ TaskID”，这是第二个参数，在主网格Tasks中 ，它的链接字段是“ id”，这是第三个参数。

我的小时历史 (My Hours History)

Lastly, we would like to display a read-only DataGrid using data from the Hours table for the current employee for reviewing purposes.

最后，我们希望使用小时表中的数据为当前员工显示一个只读的DataGrid，以供查看。

Notice we used a function called set_jq_gridName(). You can find more documentation here. This function sets a unique object name for the DataGrid. By default, phpGrid uses the database table name as its internal object name. Since we already created a DataGrid from the Hours table in the last part, we must set a unique name for our second Hours DataGrid.

注意，我们使用了一个名为set_jq_gridName()的函数。您可以在此处找到更多文档。此函数为DataGrid设置唯一的对象名称。默认情况下，phpGrid使用数据库表名称作为其内部对象名称。由于我们已经在上半部分的小时表中创建了一个数据网格，因此我们必须为第二个小时数据网格设置一个唯一的名称。