Bài 9: PHP trang tin tức - Các chức năng chuyên mục admin (tiếp theo)

Ngày đăng: 2023-01-10 20:17:01

Bài trước chúng ta đã thiết lập và xây dựng được chức năng thêm chuyên mục rồi. Bài này, chúng ta tiếp tục viết chức năng hiển thị danh sách, sửa và xoá danh mục.

Mục lục:

1. Hiển thị danh sách chuyên mục

2. Chỉnh sửa chuyên mục

3. Xóa chuyên mục.

4. Lời kết

1. Hiển thị danh sách chuyên mục

Các bạn mở file admin/templates/categories.php và copy nội dung này vào bên dưới dòng // Content danh sách chuyên mục :

$sql_get_list_cate = "SELECT * FROM categories ORDER BY id_cate DESC";

// Nếu có chuyên mục

if ($db->num_rows($sql_get_list_cate))

{

echo

'

<br><br>

<div class="table-responsive">

<table class="table table-striped list" id="list_cate">

<tr>

<td><input type="checkbox"></td>

<td><strong>ID</strong></td>

<td><strong>Tên chuyên mục</strong></td>

<td><strong>Loại</strong></td>

<td><strong>Chuyên mục cha</strong></td>

<td><strong>Sort</strong></td>

<td><strong>Tools</strong></td>

</tr>

';

// In danh sách chuyên mục

foreach ($db->fetch_assoc($sql_get_list_cate, 0) as $key => $data_cate)

{

// Hiển thị chuyên mục cha

$sql_get_cate_parent = "SELECT * FROM categories WHERE id_cate = '$data_cate[parent_id]'";

if ($db->num_rows($sql_get_cate_parent))

{

$data_cate_parent = $db->fetch_assoc($sql_get_cate_parent, 1);

if ($data_cate_parent['type'] == '1' && $data_cate['type'] == '3')

{

$label_cate_parent = '<p class="text-danger">Lỗi</p>';

}

else if ($data_cate_parent['type'] == '3' && $data_cate['type'] == '2')

{

$label_cate_parent = '<p class="text-danger">Lỗi</p>';

}

else if ($data_cate_parent['type'] == '3' && $data_cate['type'] == '1')

{

$label_cate_parent = '<p class="text-danger">Lỗi</p>';

}

else if ($data_cate_parent['type'] == $data_cate['type'])

{

$label_cate_parent = '<p class="text-danger">Lỗi</p>';

}

else

{

$label_cate_parent = $data_cate_parent['label'];

}

else

{

$label_cate_parent = '';

}

// Hiển thị loại chuyên mục

if ($data_cate['type'] == 1)

{

$data_cate['type'] = 'Lớn';

}

else if ($data_cate['type'] == 2)

{

$data_cate['type'] = 'Vừa';

}

else if ($data_cate['type'] == 3)

{

$data_cate['type'] = 'Nhỏ';

}

echo

'

<tr>

<td><input type="checkbox" name="id_cate[]" value="' . $data_cate['id_cate'] .'"></td>

<td>' . $data_cate['id_cate'] .'</td>

<td><a href="' . $_DOMAIN . 'categories/edit/' . $data_cate['id_cate'] .'">' . $data_cate['label'] . '</a></td>

<td>' . $data_cate['type'] . '</td>

<td>' . $label_cate_parent . '</td>

<td>' . $data_cate['sort'] . '</td>

<td>

<a href="' . $_DOMAIN . 'categories/edit/' . $data_cate['id_cate'] .'" class="btn btn-primary btn-sm">

<span class="glyphicon glyphicon-edit"></span>

</a>

<a class="btn btn-danger btn-sm del-cate-list" data-id="' . $data_cate['id_cate'] . '">

<span class="glyphicon glyphicon-trash"></span>

</a>

</td>

</tr>

';

}

echo

'

</table>

</div>

';

}

// Nếu không có chuyên mục

else

{

echo '<br><br><div class="alert alert-info">Chưa có chuyên mục nào.</div>';

}

Các bạn load lại trang chúng ta sẽ được kết quả như thế này :

Vì chuyên mục không nhiều nên mình sẽ không phân trang và xây dựng chức năng tìm kiếm trong phần danh sách chuyên mục nhé !

2. Chỉnh sửa chuyên mục

Tiếp theo chúng ta sẽ viết chức năng chỉnh sửa chuyên mục, từ danh sách chuyên mục, các bạn chọn một chuyên mục để đến trang chỉnh sửa nhé !

Xây dựng template

Các bạn mở file admin/templates/categories.php và copy đoạn code này ngay bên dưới dòng // Content chỉnh sửa chuyên mục :

$sql_get_data_cate = "SELECT * FROM categories WHERE id_cate = '$id'";

if ($db->num_rows($sql_get_data_cate))

{

$data_cate = $db->fetch_assoc($sql_get_data_cate, 1);

// Chỉnh sửa loại chuyên mục

$checked_type_1 = '';

$checked_type_2 = '';

$checked_type_3 = '';

if ($data_cate['type'] == 1)

{

$checked_type_1 = 'checked';

$parent_edit_cate .=

'

<div class="form-group parent-edit-cate hidden">

<label>Parent chuyên mục</label>

<select id="parent_edit_cate" class="form-control">

</select>

</div>

';

}

else if ($data_cate['type'] == 2)

{

$checked_type_2 = 'checked';

$parent_edit_cate .=

'

<div class="form-group parent-edit-cate">

<label>Parent chuyên mục</label>

<select id="parent_edit_cate" class="form-control">

';

$sql_get_cate_parent= "SELECT * FROM categories WHERE type = '1'";

if ($db->num_rows($sql_get_cate_parent))

{

// In danh sách các chuyên mục cha loại 1

foreach ($db->fetch_assoc($sql_get_cate_parent, 0) as $key => $data_cate_parent)

{

if ($data_cate['parent_id'] == $data_cate_parent['id_cate'])

{

$parent_edit_cate .= '<option value="' . $data_cate_parent['id_cate'] . '" selected>' . $data_cate_parent['label'] . '</option>';

}

else

{

$parent_edit_cate .= '<option value="' . $data_cate_parent['id_cate'] . '">' . $data_cate_parent['label'] . '</option>';

}

else

{

echo '<option value="0">Hiện chưa có chuyên mục cha nào</option>';

}

$parent_edit_cate .=

'

</select>

</div>

';

}

else if ($data_cate['type'] == 3)

{

$checked_type_3 = 'checked';

$parent_edit_cate .=

'

<div class="form-group parent-edit-cate">

<label>Parent chuyên mục</label>

<select id="parent_edit_cate" class="form-control">

';

$sql_get_cate_parent= "SELECT * FROM categories WHERE type = '2'";

if ($db->num_rows($sql_get_cate_parent))

{

// In danh sách các chuyên mục cha loại 2

foreach ($db->fetch_assoc($sql_get_cate_parent, 0) as $key => $data_cate_parent)

{

if ($data_cate['parent_id'] == $data_cate_parent['id_cate'])

{

$parent_edit_cate .= '<option value="' . $data_cate_parent['id_cate'] . '" selected>' . $data_cate_parent['label'] . '</option>';

}

else

{

$parent_edit_cate .= '<option value="' . $data_cate_parent['id_cate'] . '">' . $data_cate_parent['label'] . '</option>';

}

else

{

echo '<option value="0">Hiện chưa có chuyên mục cha nào</option>';

}

$parent_edit_cate .=

'

</select>

</div>

';

}

echo

' <p class="form-edit-cate">

<form method="POST" id="formEditCate" data-id="' . $data_cate['id_cate'] . '" onsubmit="return false;" class="form-cate">

<div class="form-group">

<label>Tên chuyên mục</label>

<input type="text" class="form-control title" value="' . $data_cate['label'] . '" id="label_edit_cate">

</div>

<div class="form-group">

<label>URL chuyên mục</label>

<input type="text" class="form-control slug" value="' . $data_cate['url'] . '" id="url_edit_cate">

</div>

<div class="form-group">

<label>Loại chuyên mục</label>

<div class="radio">

<label>

<input type="radio" name="type_edit_cate" value="1" class="type-cate-1" ' . $checked_type_1 . '> Lớn

</label>

</div>

<div class="radio">

<label>

<input type="radio" name="type_edit_cate" value="2" class="type-cate-2" ' . $checked_type_2 . '> Vừa

</label>

</div>

<div class="radio">

<label>

<input type="radio" name="type_edit_cate" value="3" class="type-cate-3" ' . $checked_type_3 . '> Nhỏ

</label>

</div>

' . $parent_edit_cate . '

<div class="form-group">

<label>Sort chuyên mục</label>

<input type="text" class="form-control" value="' . $data_cate['sort'] . '" id="sort_edit_cate">

</div>

<div class="form-group">

<button type="submit" class="btn btn-primary">Lưu thay đổi</button>

</div>

<div class="alert alert-danger hidden"></div>

</form>

</p>

';

}

Các bạn tải lại trang chúng ta sẽ được kết quả như thế này :

php trang tin tuc cac chuc nang chuyen muc tiep theo ket qua chinh sua chuyen muc 1 jpg

Viết Ajax gửi dữ liệu

Đầu tiên chúng ta sẽ viết chức năng load chuyên mục cha như ở phần thêm chuyên mục, các bạn mở file admin/js/form.js lên và copy đoạn code sau :

// Tải chuyên mục cha ở chức năng chỉnh sửa chuyên mục

$('#formEditCate input[type="radio"]').on('click', function() {

$id_edit_cate = $('#formEditCate').attr('data-id');

if ($('#formEditCate .type-edit-cate-1:checked').prop("checked") == true)

{

$('.parent-edit-cate').addClass('hidden');

$('.parent-edit-cate select').html('');

}

else if ($('#formEditCate .type-edit-cate-2:checked').prop("checked") == true)

{

$type_edit_cate = $('#formEditCate .type-edit-cate-2').val();

$.ajax({

type : 'POST',

url : $_DOMAIN + 'categories.php',

data : {

action : 'load_edit_parent_cate',

type_edit_cate : $type_edit_cate,

id_edit_cate : $id_edit_cate

}, success : function(data) {

$('.parent-edit-cate').removeClass('hidden');

$('.parent-edit-cate select').html(data);

}, error : function() {

$('.parent-edit-cate').removeClass('hidden');

$('.parent-edit-cate').html('Đã có lỗi xảy ra, hãy thử lại sau.');

}

});

}

else if ($('#formEditCate .type-edit-cate-3:checked').prop("checked") == true)

{

$type_edit_cate = $('#formEditCate .type-edit-cate-3').val();

$.ajax({

type : 'POST',

url : $_DOMAIN + 'categories.php',

data : {

action : 'load_edit_parent_cate',

type_edit_cate : $type_edit_cate,

id_edit_cate : $id_edit_cate

}, success : function(data) {

$('.parent-edit-cate').removeClass('hidden');

$('.parent-edit-cate select').html(data);

}, error : function() {

$('.parent-edit-cate').removeClass('hidden');

$('.parent-edit-cate').html('Đã có lỗi xảy ra, hãy thử lại sau.');

}

});

}

});

Trong phần này có 1 chỗ khác so với load chuyên mục cha kia là chúng ta sẽ gửi thêm id của chuyên mục đang sửa chữa để khi load chuyên mục cha sẽ không hiển thị nó ra.

Tiếp theo các bạn copy đoạn code này vào bên dưới :

// Chỉnh sửa chuyên mục

$('#formEditCate button').on('click', function() {

$this = $('#formEditCate button');

$this.html('Đang tải ...');

// Gán các giá trị trong các biến

$label_edit_cate = $('#formEditCate #label_edit_cate').val();

$url_edit_cate = $('#formEditCate #url_edit_cate').val();

$type_edit_cate = $('#formEditCate input[name="type_edit_cate"]:radio:checked').val();

$parent_edit_cate = $('#formEditCate #parent_edit_cate').val();

$sort_edit_cate = $('#formEditCate #sort_edit_cate').val();

$id_edit_cate = $('#formEditCate').attr('data-id');

// Nếu các giá trị rỗng

if ($label_edit_cate == '' || $url_edit_cate == '' || $type_edit_cate == '' || $sort_edit_cate == '')

{

$('#formEditCate .alert').removeClass('hidden');

$('#formEditCate .alert').html('Vui lòng điền đầy đủ thông tin.');

$this.html('Lưu thay đổi');

}

// Ngược lại

else

{

$.ajax({

url : $_DOMAIN + 'categories.php',

type : 'POST',

data : {

label_edit_cate : $label_edit_cate,

url_edit_cate : $url_edit_cate,

type_edit_cate : $type_edit_cate,

parent_edit_cate : $parent_edit_cate,

sort_edit_cate : $sort_edit_cate,

id_edit_cate : $id_edit_cate,

action : 'edit_cate'

}, success : function(data) {

$('#formEditCate .alert').removeClass('hidden');

$('#formEditCate .alert').html(data);

$this.html('Lưu thay đổi');

}, error : function() {

$('#formEditCate .alert').removeClass('hidden');

$('#formEditCate .alert').html('Không thể chỉnh sửa chuyên mục vào lúc này, hãy thử lại sau.');

$this.html('Lưu thay đổi');

}

});

}

});

Xong ! Giờ chúng ta qua phần PHP nhé :v

Viết PHP xử lý dữ liệu

Đầu tiên các bạn mở file admin/categories.php lên và copy đoạn code này bên dưới dòng // Tải chuyên mục cha trong chức năng chinh sửa chuyên mục :

else if ($action == 'load_edit_parent_cate')

{

// Xử lý giá trị

$type_edit_cate = trim(addslashes(htmlspecialchars($_POST['type_edit_cate'])));

$id_edit_cate = trim(addslashes(htmlspecialchars($_POST['id_edit_cate'])));

// Nếu type đúng dạng số

if (!preg_match('/\D/', $type_edit_cate))

{

$type_edit_parent_cate = $type_edit_cate - 1; // Lấy type parent

$sql_get_cate = "SELECT * FROM categories WHERE type = '$type_edit_parent_cate'";

if ($db->num_rows($sql_get_cate))

{

// In danh sách các chuyên mục cha theo type parent

foreach ($db->fetch_assoc($sql_get_cate, 0) as $key => $data_cate)

{

if ($id_edit_cate != $data_cate['id_cate']) {

echo '<option value="' . $data_cate['id_cate'] . '">' . $data_cate['label'] . '</option>';

}

else

{

echo '<option value="0">Hiện chưa có chuyên mục cha nào' . $type_edit_cate .'</option>';

}

Tiếp theo các bạn copy đoạn code này vào bên dưới dòng // Chỉnh sửa chuyên mục :

else if ($action == 'edit_cate')

{

// Xử lý các giá trị

$label_edit_cate = trim(addslashes(htmlspecialchars($_POST['label_edit_cate'])));

$url_edit_cate = trim(addslashes(htmlspecialchars($_POST['url_edit_cate'])));

$type_edit_cate = trim(addslashes(htmlspecialchars($_POST['type_edit_cate'])));

$parent_edit_cate = trim(addslashes(htmlspecialchars($_POST['parent_edit_cate'])));

$sort_edit_cate = trim(addslashes(htmlspecialchars($_POST['sort_edit_cate'])));

$id_edit_cate = trim(addslashes(htmlspecialchars($_POST['id_edit_cate'])));

// Các biến xử lý thông báo

$show_alert = '<script>$("#formEditCate .alert").removeClass("hidden");</script>';

$hide_alert = '<script>$("#formEditCate .alert").addClass("hidden");</script>';

$success = '<script>$("#formEditCate .alert").attr("class", "alert alert-success");</script>';

// Nếu các giá trị rỗng

if ($label_edit_cate == '' || $url_edit_cate == '' || $type_edit_cate == '' || $sort_edit_cate == '')

{

echo $show_alert.'Vui lòng điền đầy đủ thông tin';

}

// Ngược lại

else

{

// Nếu type chuyên mục không phải số

if (preg_match('/\D/', $type_edit_cate))

{

echo $show_alert.'Đã có lỗi xảy ra, hãy thử lại sau.';

}

// Nếu sort chuyên mục không phải số nguyên dương

else if (preg_match('/\D/', $sort_edit_cate) || $sort_edit_cate < 1)

{

echo $show_alert.'Sort chuyên mục phải là một số nguyên dương.';

}

// Nếu id parent chuyên mục không phải số

else if (preg_match('/\D/', $parent_edit_cate))

{

echo $show_alert.'Đã có lỗi xảy ra, hãy thử lại sau';

}

// Nếu đúng

else

{

// Thực thi chỉnh sửa chuyên mục

$sql_edit_cate = "UPDATE categories SET

label = '$label_edit_cate',

url = '$url_edit_cate',

type = '$type_edit_cate',

parent_id = '$parent_edit_cate',

sort = '$sort_edit_cate'

WHERE id_cate = '$id_edit_cate'

";

$db->query($sql_edit_cate);

echo $show_alert.$success.'Tạo chuyên mục thành công.';

$db->close(); // Giải phóng

new Redirect($_DOMAIN.'categories'); // Trở về trang danh sách chuyên mục

}

// Xoá nhiều chuyên mục cùng lúc

// Xoá 1 chuyên mục

Hai dòng chú thích kia, chúng ta sẽ xây dựng tiếp ở mục bên dưới. Ok bây giờ các bạn chạy lại và chỉnh sửa thử xem nhé !

3. Xoá chuyên mục

Chức năng xoá sẽ chia ra làm 2 loại: xoá nhiều chuyên mục cùng lúc và xoá 1 chuyên mục chỉ định.

Xoá nhiều chuyên mục

Viết Ajax gửi dữ liệu

Đầu tiên các bạn mở file admin/js/form.js lên và copy đoạn code này chèn tiếp vào bên dưới :

// Checkbox all

$('.list input[type="checkbox"]:eq(0)').change(function() {

$('.list input[type="checkbox"]').prop('checked', $(this).prop("checked"));

});

Cái này dùng để check tất cả các checkbox khác khi click vào checkbox đầu tiên trong bảng danh sách. Các bạn chạy lại và thử xem kết quả được như thế này không :

php trang tin tuc cac chuc nang chuyen muc tiep theo ket qua hien thi xoa nhieu chuyen muc jpg

Tiếp theo các bạn copy tiếp nội dung này và paste vào bên dưới :

// Xoá nhiều chuyên mục cùng lúc

$('#del_cate_list').on('click', function() {

$confirm = confirm('Bạn có chắc chắn muốn xoá các chuyên mục đã chọn không?');

if ($confirm == true)

{

$id_cate = [];

$('#list_cate input[type="checkbox"]:checkbox:checked').each(function(i) {

$id_cate[i] = $(this).val();

});

if ($id_cate.length === 0)

{

alert('Vui lòng chọn ít nhất một chuyên mục.');

}

else

{

$.ajax({

url : $_DOMAIN + 'categories.php',

type : 'POST',

data : {

id_cate : $id_cate,

action : 'delete_cate_list'

},

success : function(data) {

location.reload();

}, error : function() {

alert('Đã có lỗi xảy ra, hãy thử lại.');

}

});

}

else

{

return false;

}

});

Viết PHP xử lý dữ liệu

Các bạn mở file admin/categories.php lên và copy đoạn code này bên dưới dòng // Xoá nhiều chuyên mục cùng lúc :

else if ($action == 'delete_cate_list')

{

foreach ($_POST['id_cate'] as $key => $id_cate)

{

$sql_check_id_cate_exist = "SELECT id_cate FROM categories WHERE id_cate = '$id_cate'";

if ($db->num_rows($sql_check_id_cate_exist))

{

$sql_delete_cate = "DELETE FROM categories WHERE id_cate = '$id_cate'";

$db->query($sql_delete_cate);

}

$db->close();

}

Giờ các bạn chạy lại và xoá thử xem nhé !

Xoá chuyên mục chỉ định

Về phần này sẽ có 2 chỗ : ở trong bảng danh sách và ở trong trang chỉnh sửa của từng chuyên mục. Vì thế về Ajax gửi dữ liệu chúng ta sẽ viết riêng nhưng về PHP xử lý thì sẽ viết chung.

Viết Ajax gửi dữ liệu

Đầu tiên chúng ta sẽ viết Ajax cho phần xoá ở bảng danh sách trước, các bạn mở file admin/js/form.js lên và copy đoạn code sau :

// Xoá chuyên mục chỉ định trong bảng danh sách

$('.del-cate-list').on('click', function() {

$confirm = confirm('Bạn có chắc chắn muốn xoá chuyên mục này không?');

if ($confirm == true)

{

$id_cate = $(this).attr('data-id');

$.ajax({

url : $_DOMAIN + 'categories.php',

type : 'POST',

data : {

id_cate : $id_cate,

action : 'delete_cate'

},

success : function() {

location.reload();

}

});

}

else

{

return false;

}

});

Tiếp theo các bạn sao chép tiếp nội dung này và chèn vào bên dưới :

// Xoá chuyên mục chỉ định trong trang chỉnh sửa

$('#del_cate').on('click', function() {

$confirm = confirm('Bạn có chắc chắn muốn xoá chuyên mục này không?');

if ($confirm == true)

{

$id_cate = $(this).attr('data-id');

$.ajax({

url : $_DOMAIN + 'categories.php',

type : 'POST',

data : {

id_cate : $id_cate,

action : 'delete_cate'

},

success : function() {

location.href = $_DOMAIN + 'categories/';

}

});

}

else

{

return false;

}

});

Viết PHP xử lý dữ liệu

Mở file admin/categories.php lên và copy nội dung này vào bên dưới dòng // Xoá 1 chuyên mục :

else if ($action == 'delete_cate')

{

$id_cate = trim(htmlspecialchars(addslashes($_POST['id_cate'])));

$sql_check_id_cate_exist = "SELECT id_cate FROM categories WHERE id_cate = '$id_cate'";

if ($db->num_rows($sql_check_id_cate_exist))

{

$sql_delete_cate = "DELETE FROM categories WHERE id_cate = '$id_cate'";

$db->query($sql_delete_cate);

$db->close();

}

Đây là đoạn code xử lý cho cả hai cách xoá 1 chuyên mục chỉ định. Giờ các bạn chỉ việc chiêm ngưỡng thành quả thôi !

4. Lời kết

Bài này là bài kết thúc của các chức năng tương tác với chuyên mục, trong bài sau, chúng ta sẽ bắt tay qua xây dựng các chức năng về hình ảnh của bài viết. Chúc các bạn thành công, chào các bạn !

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

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

Bài 9: PHP trang tin tức - Các chức năng chuyên mục admin (tiếp theo)

1. Hiển thị danh sách chuyên mục

2. Chỉnh sửa chuyên mục

Xây dựng template

Viết Ajax gửi dữ liệu

Viết PHP xử lý dữ liệu

3. Xoá chuyên mục

Xoá nhiều chuyên mục

Xoá chuyên mục chỉ định

4. Lời kết

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

Bài 1: PHP trang tin tức - Tạo database và cấu trúc folder admin

Bài 2: PHP trang tin tức - Viết thư viện xử lý database admin

Bài 3: PHP trang tin tức - Viết thư viện session và functions admin

Bài 4: PHP trang tin tức - Kết nối database và cấu trúc index admin

Bài 5: PHP trang tin tức - Xây dựng header và footer admin

Bài 6: PHP trang tin tức - Tạo chức năng đăng nhập, đăng xuất admin

Bài 7: PHP trang tin tức - Xây dựng sidebar, content và phân trang admin

Bài 8: PHP trang tin tức - Các chức năng chuyên mục admin

Bài 10: PHP trang tin tức - Các chức năng của hình ảnh admin

Bài 11: PHP trang tin tức - Các chức năng của hình ảnh admin (tiếp theo)

Bài 12: PHP trang tin tức - Các chức năng của bài viết admin

Bài 13: PHP trang tin tức - Các chức năng của bài viết admin (tiếp theo)

Bài 14: PHP trang tin tức - Các chức năng cài đặt admin

Bài 15: PHP trang tin tức - Các chức năng của tài khoản admin

Bài 16: PHP trang tin tức - Các chức năng của tài khoản admin (tiếp theo)

Bài 17: PHP trang tin tức - Các chức năng của profile admin

Bài 18: PHP trang tin tức - Các chức năng của profile admin (tiếp theo)

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

Bài 20: PHP trang tin tức - Cấu trúc folder client

Bài 21: PHP trang tin tức - Kết nối database và rewrite url

Góc games giải trí