todo-guide.md

Lab 4. Socciss To Do Application

Sau bài lab thứ 4 này chúng sẽ học được gì?

1. Cách xây dưng một ứng dụng theo mô hình MVC.
2. Cách sử dụng javascript để xử lý HTML DOM.
3. Cách lưu trữ dữ liệu trực tiếp trên trình duyệt.
4. Các để thêm một event listener để bắt sự kiện nhấn phím của người dùng.

Sản phẩm của bài lab sau khi hoàn thành có hình thù như bên dưới:

Ok trên đây là tất cả nội dung của bài lab. Bắt tay vào thực hiện nào!!! Let's go!!!

1. Ý tưởng thực hiện

• Xây dựng ứng dụng To Do để quản lý các công việc hằng ngày của mình
• Thêm sự kiện lắng nghe người dùng click vào mỗi các nhiệm vụ. Để chuyển trạng thái của nhiệm vụ. Doing -> Done và ngược lại.
• Thêm sự kiện lắng nghe người dùng click vào nút đóng ở cuối mỗi nhiệm vụ để xóa nhiệm vụ đó.
• Thêm một event listener để lắng nghe sự kiện Ctrl + B của người dùng để hiển thị thông tin các nhiệm vụ chưa hoàn thành
• Cuối cùng là lưu tất cả các nhiệm vụ nằm trong danh sách To Do hiện có vào trình duyệt Ok trên đây là tất cả ý tưởng để thực hiện.

2. Thực hành thôi nào.

Chúng ta sẽ xây dựng dựa trên mô hình MVC nên trước hết chúng ta sẽ xây phần view cho ứng dụng trước.

2.1 Mã lệnh cho phần view

• Mã lệnh HTML

<div id="container">
  <div class="header">
    <h1>Task management</h1>
  </div>
  <form class="create-todo">
    <h3>Create To Do</h3>
    <div class="form-group">
      <label for="name">Name: </label>
      <input type="tẽt" name="name" id="name">
    </div>
    <div class="form-group">
      <label for="time-start">Time start: </label>
      <input type="time" name="time-start" id="time-start">
    </div>
    <div class="form-group">
      <label for="time-end">Time end: </label>
      <input type="time" name="name" id="time-end">
    </div>
    <div class="form-group">
      <button class="btn_create" type="button" onclick="submitNewTaskForm()">
        Create
      </button>
      <button class="btn_reset" type="reset">Resett</button>
    </div>
  </form>

  <div class="list-todo">
    <h3>list To Do</h3>
    <table class="tb-list-todo" id="tb-list-todo">
      <tr class="header-list-todo">
        <th>Name</th>
        <th>Time start</th>
        <th>Time end</th>
        <th>Status</th>
        <th>Action</th>
      </tr>
      <!-- Data add to here. -->
    </table>
  </div>
</div>

Chúng ta sẽ thêm thuộc tính id vào những những phần tử HTML mà chúng ta cần truy xuất để lấy và đổ dữ liệu vào bằng mã lệnh javascript.

• Mã lệnh CSS

body {
  background-color: #f7f7f7;
}

#container {
  max-width: 960px;
  margin: 0px auto;
}

h1 {
  text-align: center;
}

h3 {
  text-align: center;
  font-size: 30px;
}

.create-todo {
  background-color: white;
  border: 1px solid;
  border-radius: 5px;
  width: 400px;
  float: left;
}

.list-todo {
  border-radius: 5px;
  background-color: white;
  border: 1px solid;
  width: 400px;
  float: right;
}

.form-group {
  margin: 10px;
}

button {
  width: 80px;
  height: 30px;
  margin-right: 30px;
  border-radius: 5px;
}

button:hover {
  cursor: pointer;
}

.btn_create {
  background-color: #297ab5;
}

label {
  display: inline-block;
  width: 100px;
}

table {
  width: 100%;
  border-collapse: collapse;
}

td:hover {
  cursor: pointer;
}

.header-list-todo {
  width: 100%;
  text-align: center;
  margin: 10px;
}

.data-list-todo {
  width: 100%;
  text-align: center;
  margin: 10px;
}

.doing {
  background-color: #bcc6d6;
}

.done {
  background-color: #28ed9b;
}

span:hover {
  cursor: pointer;
}

3. Phần Model

Phần này chúng ta có 2 phần chính là sử dụng đối tượng localStorage để lưu và lấy dữ liệu từ trình duyệt. Chúng ta sẽ sử dụng trình duyệt làm database để lưu các task của mình. và sử dụng đối tượng localStorage để truy xuất data:

function saveTask(task) {
  tasks.push(task);
  localStorage.setItem('tasks', JSON.stringify(tasks));
}

Như trên chúng ta đã chuyển dữ liệu của chúng ta từ dạng string sang dạng json trước khi lưu vào database để mục đích là sau khi lấy dữ liệu ra chúng ta có thể dễ dàng sử dụng dữ liệu đó nhờ tính năng của chuỗi json.(chỗ này em k rõ lắm :D).

function getTasks() {
  try {
    return JSON.parse(localStorage.getItem('tasks')) || [];
  } catch(err) {
    return [];
  }
}

4. Phần Controller

Phần này chúng ta sẽ có 3 phần chính:

• Lắng nghe sự kiện ctrl + b của người dùng để hiển thị danh sách task chưa hoàn thành

function bindingHotKeyEvent() {
  document.addEventListener('keydown', function(e) {
    var evt = e ? e : window.event;

    // Ctrl + B
    if(evt.ctrlKey && String.fromCharCode(evt.keyCode) === 'B') {
      showDoingListTaskPopup();
    }
  });
}

Như trên thì chúng ta sẽ thêm sự kiện keydown cho đối tượng document. (Chỗ này chưa biết gỉai thích thêm gì.)

• Thêm một task mới

Chúng ta sẽ thêm một task mới và lưu nó vào trình duyệt sau khi lưu thì sẽ hiển thị nó ra view.

function submitNewTaskForm() {
  var task = getNewTaskFormData();

  try {
    // Validate data.
    validateTask(task);
    // Put task to database.
    saveTask(task);
    // Render to view table.
    addTaskToTable(task);
    // Reset view form.
    resetNewTaskForm();
  } catch(err) {
    window.alert(err.message);
  }
}

Chúng ta sẽ lấy thông tin từ formdata thông qua function getNewTaskFormData() bằng việc sử dụng đối tượng document để lấy gía trị của các phần tử HTML thông quá thuộc tính id.

Sau đó chúng ta sẽ kiểm tra xem dữ liệu form có hợp lệ hay không bằng việc gọi hàm validate() để đảm bảo chúng ta không lưu dữ liệu rác vào database(trình duyệt).

Nếu kiểm tra thất bại thì hàm validate sẽ ném ra lỗi và hàm submitNewTaskForm sẽ bắt lỗi này và hiển thị lỗi này ra.

Nếu thành công thì chúng ta sẽ gọi hàm saveTask để lưu nó vào database(trình duyệt).

Cuối cùng chúng ta sẽ thêm nó vào bảng danh sách todo để hiển thị ra view và reset lại form data.