06/04/2021, 14:46

Bài 19: PHP trang tin tức - Xây dựng dashboard admin và fix bug - Web tin tức PHP căn bản

Hello, chào mừng các bạn đã quay trở lại với series hướng dẫn xây dựng trang tin tức PHP. Trong bài học trước chúng ta đã cùng xây dựng xong phần chức năng của profile admin. Ngày hôm nay mình sẽ hướng dẫn các bạn build phần dashboard và fix một số bug, đây cũng là bài cuối cùng trong phần admin của ...

Hello, chào mừng các bạn đã quay trở lại với series hướng dẫn xây dựng trang tin tức PHP. Trong bài học trước chúng ta đã cùng xây dựng xong phần chức năng của profile admin. Ngày hôm nay mình sẽ hướng dẫn các bạn build phần dashboard và fix một số bug, đây cũng là bài cuối cùng trong phần admin của series này. Bây giờ chúng ta bắt đầu thôi!

1. Dashboard

Dashboard (bảng điều khiển) là một phần không thể thiếu đối với các trang web như tin tức, bán hàng,... Nó sẽ show cho quản trị viên tất cả các thông tin số cho toàn bộ các mục của website như bài viết, chuyên mục, hình ảnh,... Dashboard có thể giúp các admin có thể nắm các chỉ số của website một cách nhanh chóng và chính xác nhất.

Trong ứng dụng này, dashboard sẽ hiển thị cho các phần sau:

  • Riêng admin
    • Chuyên mục
    • Tài khoản
  • Cả admin và tác giả
    • Bài viết
    • Hình ảnh

Bây giờ chúng ta sẽ đi xây dựng từng phần. Các bạn mở file admin/templates/dashboard.php và copy lần lượt các đoạn code bên dưới:

Dashboard bài viết

<!-- Dashboard bài viết -->
<h3>Bài viết</h3>
<div class="row">
  <?php

  if ($data_user['position'] == '1') {
    // Lấy tổng số bài viết
    $sql_get_count_all_post = "SELECT id_post FROM posts";
    $count_all_post = $db->num_rows($sql_get_count_all_post);

    echo 
    '
      <div class="col-md-4">
        <div class="alert alert-info">
          <h1>' . $count_all_post . '</h1>
          <p>tổng bài viết</p>
        </div>
      </div>
    ';
  } else {
    // Lấy số bài viết của tác giả
    $sql_get_count_post_author = "SELECT id_post FROM posts WHERE author_id = '$data_user[id_acc]'";
    $count_post_author = $db->num_rows($sql_get_count_post_author);

    echo 
    '
      <div class="col-md-4">
        <div class="alert alert-info">
          <h1>' . $count_post_author . '</h1>
          <p>bài viết của bạn</p>
        </div>
      </div>
    ';
  }

  ?>
  
  <div class="col-md-4">
     <div class="alert alert-success">
        <h1>
          <?php

          // Lấy tổng bài viết xuất bản
          // Nếu tài khoản là admin thì lấy toàn bộ bài viết xuất bản
          if ($data_user['position'] == 1) {
            $sql_get_count_post_public = "SELECT id_post FROM posts WHERE status = '1'";
          // Nếu tài khoản là tác giả thì lấy các bài viết xuất bản của tài khoản đó 
          } else {
            $sql_get_count_post_public = "SELECT id_post FROM posts WHERE status = '1' AND author_id = '$data_user[id_acc]'";
          }
          echo $db->num_rows($sql_get_count_post_public);

          ?>
        </h1>
        <p>bài viết xuất bản</p>
     </div>   
  </div>
  <div class="col-md-4">
     <div class="alert alert-warning">
       <h1>
          <?php

          // Lấy tổng bài viết ẩn
          // Nếu tài khoản là admin thì lấy toàn bộ bài viết ẩn
          if ($data_user['position'] == 1) {
            $sql_get_count_post_hide = "SELECT id_post FROM posts WHERE status = '0'";
          // Nếu tài khoản là tác giả thì lấy các bài viết xuất bản của tài khoản đó 
          } else {
            $sql_get_count_post_hide = "SELECT id_post FROM posts WHERE status = '0' AND author_id = '$data_user[id_acc]'";
          }
          echo $db->num_rows($sql_get_count_post_hide);

          ?>
        </h1>
        <p>bài viết ẩn</p>
     </div>   
  </div>
</div>
Phần này chúng ta sẽ hiển thị các thông số:

  • Tổng bài viết
    • Admin: hiển thị tất cả bài viết của website
    • Tác giả: hiển thị các bài viết của tác giả đó
  • Tổng bài viết xuất bản  
    • Admin: hiển thị tất cả bài viết xuất bản của website
    • Tác giả: hiển thị các bài viết xuất bản của tác giả đó
  • Tổng bài viết ẩn
    • Admin: hiển thị tất cả bài viết ẩn của website
    • Tác giả: hiển thị các bài viết ẩn của tác giả đó

Sau khi tải lại các bạn sẽ được kết quả như sau:

php trang tin tuc xay dung dashboard va fix bug ket qua dahsboard bai viet jpg

Dashboard hình ảnh

<!-- Dashboard hình ảnh -->
<h3>Hình ảnh</h3>
<div class="row">
  <?php

  if ($data_user['position'] == '1') {
    // Lấy tổng số hình ảnh
    $sql_get_count_img = "SELECT id_img FROM images";
    $label = 'tổng hình ảnh';
  } else {
    // Lấy số hình ảnh của tác giả
    $sql_get_count_img = "SELECT id_img FROM images WHERE uploader_id = '$data_user[id_acc]'";
    $label = 'hình ảnh';
  }

  $count_img = $db->num_rows($sql_get_count_img);

  echo 
  '
    <div class="col-md-4">
      <div class="alert alert-info">
        <h1>' . $count_img . '</h1>
        <p>' . $label . '</p>
      </div>
    </div>
  ';

  ?>
  
  <?php

  if ($data_user['position'] == '1') {
    // Lấy tổng dung lượng ảnh
    $sql_get_size_img = "SELECT size FROM images";
    $label = 'tổng dung lượng ảnh';
  } else {
    // Lấy số dung lượng ảnh của tác giả
    $sql_get_size_img = "SELECT size FROM images WHERE uploader_id = '$data_user[id_acc]'";
    $label = 'dung lượng ảnh';
  }

  // Tính dung lượng hình ảnh
  if ($db->num_rows($sql_get_size_img)) {
    $count_size_img = 0;
    foreach ($db->fetch_assoc($sql_get_size_img, 0) as $data_img) {
      $count_size_img = $count_size_img + $data_img['size'];
    }
  } else {
    $count_size_img = 0 . ' B';
  }

  // Gán đơn vị cho dung lượng
  if ($count_size_img < 1024) {
    $count_size_img = $count_size_img . ' B';
  } else if ($count_size_img < 1048576) {
    $count_size_img = round($count_size_img / 1024) . ' KB';
  } else if ($count_size_img < 1073741824) {
    $count_size_img = round($count_size_img / 1024 / 1024) . ' MB';
  } else if ($count_size_img < 1099511627776) {
    $count_size_img = round($count_size_img / 1024 / 1024 / 1024) . ' GB';
  }

  echo 
  '
    <div class="col-md-4">
      <div class="alert alert-success">
        <h1>' . $count_size_img . '</h1>
        <p>' . $label . '</p>
      </div>
    </div>
  ';

  ?>

  <?php

  if ($data_user['position'] == '1') {
    // Lấy tổng số hình ảnh
    $sql_get_count_img = "SELECT url FROM images";
    $label = 'tổng hình ảnh lỗi';
  } else {
    // Lấy số bài viết của tác giả
    $sql_get_count_img = "SELECT url FROM images WHERE uploader_id = '$data_user[id_acc]'";
    $label = 'hình ảnh lỗi';
  }

  // Kiểm tra danh sách hình ảnh
  if ($db->num_rows($sql_get_count_img)) {
    $count_img_error = 0;
    foreach ($db->fetch_assoc($sql_get_count_img, 0) as $data_img) {
      if (!file_exists('../' . $data_img['url'])) {
        $count_img_error++;
      }
    }
  }

  echo 
  '
    <div class="col-md-4">
      <div class="alert alert-danger">
        <h1>' . $count_img_error . '</h1>
        <p>' . $label . '</p>
      </div>
    </div>
  ';

  ?>
</div>
Phần hình ảnh này sẽ hiển thị các thông số:

  • Tổng hình ảnh
    • Admin: hiển thị tất cả hình ảnh của website
    • Tác giả: hiển thị các hình ảnh của tác giả đó
  • Tổng dung lượng ảnh 
    • Admin: hiển thị dung lượng tất cả ảnh của website
    • Tác giả: hiển thị dung lượng các ảnh của tác giả đó
  • Tổng ảnh lỗi
    • Admin: hiển thị tất cả ảnh lỗi của website
    • Tác giả: hiển thị các ảnh lỗi của tác giả đó

Kết quả sẽ được như bên dưới:

php trang tin tuc xay dung dashboard va fix bug ket qua dahsboard hinh anh jpg

Dashboard chuyên mục

<?php

if ($data_user['position'] == '1') {

?>

<!-- Dashboard chuyên mục -->
<h3>Chuyên mục</h3>
<div class="row">
  <?php

  // Lấy tổng chuyên mục
  $sql_get_count_cate = "SELECT id_cate FROM categories";   
  $count_cate = $db->num_rows($sql_get_count_cate);

  echo 
  '
    <div class="col-md-3">
      <div class="alert alert-info">
        <h1>' . $count_cate . '</h1>
        <p>tổng chuyên mục</p>
      </div>
    </div>
  ';

  ?>

  <?php

  // Lấy số chuyên mục lớn
  $sql_get_count_cate_1 = "SELECT id_cate FROM categories WHERE type = '1'";   
  $count_cate_1 = $db->num_rows($sql_get_count_cate_1);

  echo 
  '
    <div class="col-md-3">
      <div class="alert alert-success">
        <h1>' . $count_cate_1 . '</h1>
        <p>chuyên mục lớn</p>
      </div>
    </div>
  ';

  ?>

  <?php

  // Lấy số chuyên mục vừa
  $sql_get_count_cate_2 = "SELECT id_cate FROM categories WHERE type = '2'";   
  $count_cate_2 = $db->num_rows($sql_get_count_cate_2);

  echo 
  '
    <div class="col-md-3">
      <div class="alert alert-warning">
        <h1>' . $count_cate_2 . '</h1>
        <p>chuyên mục vừa</p>
      </div>
    </div>
  ';

  ?>

  <?php

  // Lấy số chuyên mục nhỏ
  $sql_get_count_cate_3 = "SELECT id_cate FROM categories WHERE type = '3'";   
  $count_cate_3 = $db->num_rows($sql_get_count_cate_3);

  echo 
  '
    <div class="col-md-3">
      <div class="alert alert-danger">
        <h1>' . $count_cate_3 . '</h1>
        <p>chuyên mục nhỏ</p>
      </div>
    </div>
  ';

  ?>
</div>

<!-- Dashboard tài khoản -->

<?php

}

?>
Trong phần này sẽ hiển thị cho chúng ta 4 thông số:

  • Tổng chuyên mục
  • Số chuyên mục lớn
  • Số chuyên mục vừa
  • Số chuyên mục nhỏ

Đây là kết quả của phần này:

php trang tin tuc xay dung dashboard va fix bug ket qua dahsboard chuyen muc jpg

Dashboard tài khoản

Riêng phần này, các bạn copy đoạn code bên dưới dòng <!-- Dashboard tài khoản -->:

<h3>Tài khoản</h3>
<div class="row">
  <?php

  // Lấy tổng tài khoản
  $sql_get_count_acc = "SELECT id_acc FROM accounts WHERE position = '0'";   
  $count_acc = $db->num_rows($sql_get_count_acc);

  echo 
  '
    <div class="col-md-4">
      <div class="alert alert-info">
        <h1>' . $count_acc . '</h1>
        <p>tổng tài khoản</p>
      </div>
    </div>
  ';

  ?>

  <?php

  // Lấy số tài khoản hoạt động
  $sql_get_count_acc_active = "SELECT id_acc FROM accounts WHERE status = '0' AND position = '0'";   
  $count_acc_active = $db->num_rows($sql_get_count_acc_active);

  echo 
  '
    <div class="col-md-4">
      <div class="alert alert-success">
        <h1>' . $count_acc_active . '</h1>
        <p>tài khoản hoạt động</p>
      </div>
    </div>
  ';

  ?>

  <?php

  // Lấy số tài khoản bị khoá
  $sql_get_count_acc_locked = "SELECT id_acc FROM accounts WHERE status = '1' AND position = '0'";   
  $count_acc_locked = $db->num_rows($sql_get_count_acc_locked);

  echo 
  '
    <div class="col-md-4">
      <div class="alert alert-warning">
        <h1>' . $count_acc_locked . '</h1>
        <p>tài khoản bị khoá</p>
      </div>
    </div>
  ';

  ?>
</div>

Dashboard tài khoản sẽ hiển thị 3 thông số:

  • Tổng tài khoản
  • Số tài khoản hoạt động
  • Số tài khoản bị khoá

Hình bên dưới là kết quả của dashboard tài khoản:

php trang tin tuc xay dung dashboard va fix bug ket qua dahsboard tai khoan jpg

2. Fix một số bug

Sau khi kiểm tra lại thì mình phát hiện có 2 bug:

Bug khi upload xong lại trở về trang chủ

Để fix bug này các bạn chỉ cần việc mở file admin/photos.php lên, tìm kiếm dòng // Nếu tồn tại POST action (mặc định trong source code là dòng 61). Sau đó các bạn nhìn xuống dòng dưới, thay vì điều kiện if thì các bạn sửa lại thành điều kiện else if. Rồi, giờ các bạn reload lại và test lại nhé!

Bug hiển thị lỗi trong console

Thử nhấn f12->Console, các bạn sẽ thấy nó show ra một thông báo lỗi như hình bên dưới:

php trang tin tuc xay dung dashboard va fix bug hien thi loi tren console jpgNhưng khi các bạn vào chỉnh sửa một bài viết nào đó, thì cái thông báo lỗi này biến mất:

php trang tin tuc xay dung dashboard va fix bug truong hop khong hien thi loi tren console jpgĐến đây chắc các bạn cũng dần hiểu được nguyên nhân và có thể đã tìm ra cách fix bug này rồi phải không nào :v

Đầu tiên các bạn mở file admin/includes/footer.php lên, sau đó xoá đoạn code script config CKEditor:

<script>
	config = {};
	config.entities_latin = false;
	config.language = "vi";
	CKEDITOR.replace("body_edit_post", config);
</script>
Trong điều kiện $tab == 'post' (mặc định source code là dòng 39), các bạn thêm đoạn code này chèn tiếp bên dưới dòng echo '<script>$(".sidebar ul a:eq(3)").addClass("active");</script>';:

if ($ac == 'edit') {
	if ($id) {
		$sql_check_id_post_exist = "SELECT id_post FROM posts WHERE id_post = '$id'";
		if ($db->num_rows($sql_check_id_post_exist)) {
			echo 
			'
				<script>
					config = {};
					config.entities_latin = false;
					config.language = "vi";
					CKEDITOR.replace("body_edit_post", config);
				</script>		
			';
		}
	}
}
Bây giờ các bạn test lại để xem kết quả như mong đợi chưa :v

3. Lời kết

Cuối cùng cũng kết thúc phần admin của series trang tin tức PHP. Mình hi vọng sau khi đi được nửa chặng đường của series này, các bạn đã nắm vững kiến thức để có thể tự tạo cho mình một ứng dụng CMS cơ bản. Qua bài sau, chúng ta sẽ bắt đầu xây dựng phần client cho ứng dụng. Nếu có thắc mắc gì các bạn cứ comment bên dưới hoặc đăng trên group kèm theo link bài viết để được hỗ trợ nhanh nhất. Cảm ơn các bạn đã theo dõi, chúc các bạn thành công!

Tạ Quốc Bảo

23 chủ đề

7270 bài viết

Cùng chủ đề
0