ĐẠI HỌC BÁCH KHOA HÀ NỘI

TRƯỜNG ĐIỆN – ĐIỆN TỬ

BÁO CÁO PROJECT 1

Giáo viên hướng dẫn : Phùng Thị Kiều Hà

Sinh viên : Nguyễn Đức Thịnh
MSVS: 20203595

HÀ NỘI, Tháng 07/2

 Mục Lục
Tóm tắt đồ án.............................................................................................................................................2
I. Đặt vấn đề:...........................................................................................................................................4
2. Mô phỏng bài toán...........................................................................................................................4
II. Thuật toán giải quyết...........................................................................................................................5
1.Thuật toán.............................................................................................................................................5
2.Sơ đồ tính toán:....................................................................................................................................5
III. Giải quyết bài toán bằng ngôn ngữ lập trình....................................................................................6
1.HTML..................................................................................................................................................6
2. Javascript.............................................................................................................................................6
3. CSS......................................................................................................................................................9
IV. Kết quả..........................................................................................................................................10
1.Giao diện bắt đầu................................................................................................................................10
2.Sau khi nhập số lượng công việc và thời gian hoàn thành,điều kiện giữa các công việc.....................11
3.Kết quả tính toán................................................................................................................................12
V. Tổng kết.............................................................................................................................................13
1.Đánh giá về trang web........................................................................................................................13
2.Những vấn đề chưa giải quyết được...................................................................................................13

1
 Tóm tắt đồ án
Đối với sinh viên hiện nay,việc phân chia công việc trong học tập cũng như trong cuộc
sống hằng ngày sao cho hiệu quả và tốn ít thời gian nhất là một điều tối quan trọng và cần
thiết.Cũng như trong doanh nghiệp việc phân chia quản lý dự án,chuỗi các công việc để
sao cho hoàn thành dự án đúng kì hạn và tối ưu nhất là việc rất cần thiết,việc sắp xếp và
tính toán thời gian hoàn thành dự án bằng tay đôi khi xảy ra sai xót và nhầm lẫn.Vậy giải
pháp để đưa ra một công cụ giúp mọi người có thể tính toán và quản lý thời gian làm việc
một cách hiệu quả là gì.Dựa vào sự giúp đỡ và bảo ban tận tình trong suốt kì học của anh
Trần Văn Phú và giáo viên hướng dẫn cô Phùng Thị kiều Hà em đã vận dụng được kiến
thức để giải quyết được vấn đề trên.
Sau khoảng thời gian thực hiện, trang web có thể hoạt động.Trang web giúp cho người
dùng có thể quản lý thời gian và thực hiện công việc sao cho đúng tiến độ và hiệu quả
nhất.Tuy còn thô sơ nhưng trang web cơ bản giúp người dùng hình dung được cụ thể thời
gian để hoàn thành dự án của mình cũng như những công việc nào quan trọng.

2
3
 I. Đặt vấn đề:
1. Bài toán đặt ra: Giả sử nhóm tiếp thị muốn xuất bản một bài đăng blog
tương tác mới. Trong tình huống này,họ phải thực hiện một chuỗi các công
việc để có được bài đăng cuối cùng: Tạo phác thảo, viết nháp, chỉnh sửa và
tạo văn bản cuối cùng, thiết kế hình ảnh vài viết, thiết kế hình ảnh vài viết,
thêm hoạt ảnh vào hình ảnh, đăng bài.Để thực hiện các công việc một cách
hiệu quả và thời gian hoàn thành chuỗi công việc là ngắn nhất thì phải làm
thế nào.

2. Mô phỏng bài toán

Đầu vào:

Bảng 1:đầu vào

Task ID Task Duration

A Tạo phác thảo 3

B Viết nháp 4
C Chỉnh sửa và tạo văn bản 3
cuối cùng
D Thiết kế hình ảnh vài 2
viết
E Thêm hoạt ảnh vào hình 4
ảnh
F Đăng bài 1

Đầu ra :
• Thời gian hoàn thành dự án: ?
• Các hoạt động nằm trên đường đi quan trọng nhất (Critical Path): ?

*Điều kiện ràng buộc :

• Nhiệm vụ B,A thực hiện ngay không trì hoãn
• Nhiệm vụ C thực hiện sau A và B
• Nhiệm vụ D thực hiện sau C
• Nhiệm vụ E thực hiện sau C
• Nhiệm vụ F thực hiện sau D và E

4
 II. Thuật toán giải quyết
1.Thuật toán
• Critical Path Method (CPM) là một kỹ thuật quản lý dự án được sử dụng để lập kế
hoạch và quản lý các hoạt động trong một dự án. Nó giúp định lượng các hoạt
động cần thiết để hoàn thành dự án, đưa ra thời gian hoàn thành dự án và xác định
những hoạt động quan trọng nhất trong quá trình hoàn thành dự án đó
• Thời gian bắt đầu sớm nhất (ES) của một hoạt động = Thời gian kết thúc sớm nhất
(EF) của hoạt động trước đó + 1
• Thời gian kết thúc sớm nhất (EF) của một hoạt động = Thời gian bắt đầu sớm nhất
(ES) cộng với thời gian thực hiện của hoạt động đó - 1
• Thời gian bắt đầu muộn nhất (LS) của một hoạt động =LF –TG+1
• Thời gian kết thúc muộn nhất (LF) của hoạt động = max(EF)
• Đường đi quan trọng nhất (Critical Path) là chuỗi các hoạt động liên tiếp nhau trên
đồ thị mạng, có tổng thời gian hoàn thành là lớn nhất trong các đường đi có thể
trong dự án
• Thời gian tự do=LS-ES=LF-EF
8 4 11

2.Sơ đồ tính toán: E

8 11
1 3 3
A
2 4

5 3 7 12 1 12
C F
Start Finish
5 7 12 12

8 2 9
1 4 4
D
B
10 11
1 4

Hình 1:Sơ đồ thuật toán

5
 Mô tả:

Bảng 2: Mô tả
Thời gian bắt đầu sớm Thời gian hoàn thành hoạt động Thời gian kết thúc sớm nhất
nhất(ES) (T (EF)
Công việc
Thời gian bắt đầu muộn nhất Thời gian kết thúc muộn
(LS) nhất(LF)

III. Giải quyết bài toán bằng ngôn ngữ lập trình

1.HTML

-HTML là viết tắt của cụm từ Hypertext Markup Language (tạm dịch là Ngôn ngữ
đánh dấu siêu văn bản). HTML được sử dụng để tạo và cấu trúc các thành phần
trong trang web hoặc ứng dụng, phân chia các đoạn văn, heading, titles,
blockquotes… và HTML không phải là ngôn ngữ lập trình.

<p>Nhap vao so luong cong viec: <input id="input" type="text"></p>

<table id="mytable">
<tr>
<th>Hoạt động</th>
<th>Thời gian hoàn thành</th>
<th>Công việc trước</th>
</tr>
</table>
<br>
<button onclick="getCellValues()">Calculation</button>
<div id="res"></div>
<div id="completed"></div>

Hình 2: Tạo giao diện và nút tính toán

2. Javascript
6
 -JavaScript là một ngôn ngữ lập trình phía máy khách (client-side scripting
language) được sử dụng phổ biến trong việc phát triển ứng dụng web. Nó cho
phép bạn thực hiện các tác vụ tương tác trên trình duyệt web của người dùng, như
thay đổi nội dung của trang, xử lý biểu mẫu, tạo hiệu ứng động và giao tiếp với
máy chủ web.

JavaScript được phát triển ban đầu để làm cho các trang web trở nên động đà và
tương tác hơn. Ngày nay, nó đã trở thành một ngôn ngữ lập trình mạnh mẽ và đa
dụng, được sử dụng không chỉ trong ứng dụng web, mà còn trong việc phát triển
ứng dụng di động, máy tính cá nhân, trò chơi và nhiều hệ thống khác.

Ngôn ngữ JavaScript có cú pháp dễ học và cung cấp các tính năng mạnh mẽ như
đối tượng, hàm và sự kiện. Nó cung cấp các thư viện và khung công việc phong
phú như React, Angular, và Vue.js để giúp phát triển ứng dụng web phức tạp.

JavaScript chạy trực tiếp trên trình duyệt web của người dùng mà không cần cài
đặt bất kỳ phần mềm hay trình biên dịch nào khác. Điều này giúp JavaScript trở
thành một công cụ phát triển mạnh mẽ và tiện dụng cho việc tạo ra các trang web
tương tác và ứng dụng web đa nền tảng.

Áp dụng trong bài toán

<script>
const lengthTask = 0;
const table = document.getElementById('mytable');
// Get the input field
var input = document.getElementById("input");
// mảng các task
const arrayTask = [];
const mapTask = {};
// Cấu trúc dữ liệu map lưu thời gian kết thúc nhỏ nhất
const mapMinTask = {};
const mapBefore = {};
// Execute a function when the user presses a key on the keyboard
input.addEventListener("keypress", function (event) {
// If the user presses the "Enter" key on the keyboard
if (event.key === "Enter") {
// Cancel the default action, if needed
event.preventDefault();
for (let i = 0; i < parseInt(event.target.value); i++) {
var text1 = document.createElement('input');
7
 var text2 = document.createElement('input');
var text3 = document.createElement('input');
var row = table.insertRow(1);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
cell1.appendChild(text1);
cell2.appendChild(text2);
cell3.appendChild(text3);
}
// Trigger the button element with a click
// document.getElementById("myBtn").click();
}
});

const getCellValues = () => {

for (var r = 0, n = table.rows.length; r < n; r++) {
// Bỏ qua phần header của table
if (r === 0) continue;
// Định nghĩa tên, thời gian hoàn thành và task trước đó
let task = {
taskName: table.rows[r].cells[0].firstChild.value,
duration: parseInt(table.rows[r].cells[1].firstChild.value),
taskBefore: table.rows[r].cells[2].firstChild.value !== '' ?
table.rows[r].cells[2].firstChild.value.split(", ") : []
};
arrayTask.push(task);
}
calculation();
};

const calculation = () => {

// Tính thời gian bắt đầu nhỏ nhất, thời gian kết thúc nhỏ nhất
for (const [index, item] of arrayTask.entries()) {
let max = 0;
item.taskBefore.map(i => {
mapBefore[i] = true;
if (mapMinTask[i] > max) {
max = mapMinTask[i];
}
});
item.startMin = index === 0 ? 1 : max + 1;
item.endMin = item.startMin + item.duration - 1;

8
 mapMinTask[item.taskName] = item.endMin;
mapTask[item.taskName] = item;
}
// Tinh nguoc
for (let i = arrayTask.length - 1; i >= 0; i--) {
if (mapBefore[arrayTask[i].taskName] === undefined) {
arrayTask[i].endMax = arrayTask[arrayTask.length - 1].endMin;
arrayTask[i].startMax = arrayTask[i].endMax - arrayTask[i].duration + 1;
}
arrayTask[i].taskBefore.map(item => {
if (mapTask[item].endMax === undefined || mapTask[item].endMax >
arrayTask[i].startMin) {
mapTask[item].endMax = arrayTask[i].startMax - 1;
mapTask[item].startMax = mapTask[item].endMax -
mapTask[item].duration + 1;
}
});
}
console.log(mapTask);
let res = "Các công việc nằm trên đường dẫn quan trọng: ";
let added = false;
let completedTask = 0;
for (const property in mapTask) {
if((mapTask[property].endMax - mapTask[property].endMin === 0) ||
(mapTask[property].startMax - mapTask[property].startMin === 0)) {
res += mapTask[property].taskName + ", ";
added = true;
}
if (completedTask < mapTask[property].endMin) {
completedTask = mapTask[property].endMin;
}
}
if (added) res = res.slice(0, res.length - 2);
document.getElementById("res").innerHTML = res;
document.getElementById("completed").innerHTML = `Thời gian hoàn thành dự
án: ${completedTask}`;
};
</script>
Hình 3: Dùng JavaScript để giải quyết thuật toán

3. CSS
Tạo giao diện trang web

9
<style>
#mytable {
font-family: Arial, Helvetica, sans-serif;
border-collapse: collapse;
width: 100%;
}

#mytable td,
#mytable th {
border: 1px solid #ddd;
padding: 8px;
text-align: center;
}

#mytable tr:nth-child(even) {
background-color: #f2f2f2;
}

#mytable th {
padding-top: 12px;
padding-bottom: 12px;
background-color: #04AA6D;
color: white;
}
</style>
Hình 4:Tạo giao diện cho trang web

IV. Kết quả

1.Giao diện bắt đầu

10
 Hình 5: Giao diện khởi động

2.Sau khi nhập số lượng công việc và thời gian hoàn thành,điều kiện giữa các công việc

Hình 6: Màn hình nhập liệu

11
 3.Kết quả tính toán
-Ấn F12 để hiện kết quả
-Start min : thời gian bắt đầu sớm nhất
-Start max : thời gian bắt đầu muộn nhất
-End min : thời gian kết thúc sớm nhất
-End max : thời gian kết thúc muộn nhất
-Duration : thời gian hoàn thành hoạt động

Hình 7: Kết quả tính toán

12
 Hình 8: Thời gian hoàn thành dự án và đường dẫn quan trọng

V. Tổng kết
Trong quá trình làm đồ án,đã giúp bản thân em học tập cũng như rèn luyện được
thêm nhiều kỹ năng về lập trình cũng như tư duy để giải quyết một bài toán thực
tế,từ đó có thêm kinh nghiệm phục vụ cho nhiều project cũng như công việc sau
này.
1.Đánh giá về trang web
-Trang web còn nhiều bất cập chưa được tối ưu và chưa đem đến sự trải nghiệm
tốt nhất.
-Cơ bản cho người dùng biết được thời gian hoàn thành dự án và giúp người dùng
quản lý thời gian làm việc.

2.Những vấn đề chưa giải quyết được

-Vẽ được sơ đồ chuỗi các công việc cần thực hiện để cho người dùng có cái nhìn
tổng quan về dự án của mình.
13
-ES: thời gian bắt đầu sớm nhất
-LS : thời gian bắt đầu muộn nhất
-ES: thời gian kết thúc sớm nhất
-LF : thời gian kết thúc muộn nhất
-Duration : thời gian hoàn thành hoạt động

Tính xuôi:

-Các hoạt động nào thực hiện đầu tiên có thời gian bắt đầu sớm nhất(ES) +1

-Thời gian kết thúc sớm nhất của các hoạt động(EF)=thời gian bắt đầu sớm nhất của hoạt động đó+TG-1

VD: EFa(thời gian kết thúc sớm nhất của hoạt động a)=ESa+TGa=1

-Thời gian bắt đầu sớm nhất của một hoạt động(ES)=thời gian kết thúc hoạt động trước đó mà
nó phụ thuộc(EF)+1.(nếu công việc hiện tại trước đó chỉ phụ thuộc một công việc)
-Nếu công việc hiện tại có 2 hay nhiều công việc mà nó phụ thuộc trước đó thì thời gian bắt đầu
của hoạt động hiện tại=thời gian kết thúc của 1 trong nhiều công việc phụ thuộc trước đó là lớn
nhất+1
VD:Công việc C phụ thuộc vào 2 công việc trước đó là A và B giả sử EFa>EFb thì ESc= EFa+1

Tính ngược:
-Công việc cuối cùng phải thực hiện có thời gian kết thúc muộn nhất(LF)=thời gian kết thúc sớm
nhất của công việc đó(EF)
-Thời gian bắt đầu muộn nhất(LS)của mỗi công việc=thời gian kết thúc muộn nhất của công việc
đó(LF) -TG+1
VD: LFk(thời gian kết thúc muộn nhất của hoạt động k)=Esk-TGk+1

14
-Thời gian kết thúc muộn nhất của công việc trước đó(LF)=thời gian bắt đầu sớm nhất của công
việc sau(ES)-1 (nếu công việc sau chỉ phụ thuộc duy nhất vào công việc trước đó)
-Thời gian kết thúc muộn nhất của công việc trước đó(LF) nếu sau đó có 2 hay nhiều công việc
sẽ phụ thuộc=thời gian bắt đầu muộn nhất(LS) của 2 hay nhiều công việc là nhỏ nhất -1
VD:Công việc E và F phụ thuộc vào công việc C và LSe>LSf thì LFc=LSf-1
-Thời gian kết thúc muộn nhất của 2 hay nhiều công việc mà sau đó chỉ có 1 công việc phụ
thuộc=thời gian bắt đầu muộn nhất của công việc sau 2 hay nhiều công việc đó-1
VD:Công việc K phụ thuộc vào C và D thì LFc=LFd=LSk-1

15