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

Ngày đăng: 2023-01-10 15:40:00

    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. Trong bài này, chúng ta cùng nhau xây dựng 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. 

 Mục lục:

           1. Dashboard

           2. Fix một số bug

​​​​​​           3. Lời kết

 

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á

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.. 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 mình sẽ hỗ trợ các bạn. Cảm ơn các bạn đã theo dõi, chúc các bạn thành công!

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

 

 

                                                                                            


Code games & Web Làm web tin tức căn bản bằng PHP

Bài viết trong cùng chuyên mục

Góc games giải trí



Cờ caro


Butterfly


Lật hình (luyện trí nhớ)

Cờ tướng ONLINE

Xếp hình

Ghép hình

15_PUZZLE

Kill ghosts

Banchim

Planet Defense

Tower game

Tower game

Plapy Bird (NH.Đông)

Vượt chướng ngại vật



0379136392

Thông tin liên hệ: Lê Văn Thuyên - ĐT: 0379136392 ; Gmail: lethuyen0379136392@gmail.com

Comment

 +   Lê Văn Thuyên-0379136392:Cảm ơn quý vị và các bạn đã vào Website của Lê Thuyên! Lê thuyên rất mong nhận được sự góp ý của quý vị và các bạn cho sự phát triển của website này. Xin chân thành cảm ơn!

Trả lời

 *   Dũng Trung-090567448:Lê Văn Thuyên0379136392--->Ok.Anh!

Trả lời

 *   Bé Nguyễn-benguyen@gmail,com:Lê Văn Thuyên0379136392--->Good job!

Trả lời

 +   -:

Trả lời

 +   -:

Trả lời

11987