WEB TIN TỨC PHP CĂN BẢN
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 9: PHP trang tin tức - Các chức năng chuyên mục admin (tiếp theo) 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 Bài 22: PHP trang tin tức - Xây dựng header và footer client Bài 23: PHP trang tin tức - Xây dựng layout client Bài 24: PHP trang tin tức - Hiển thị danh sách bài viết mới nhất Bài 25: PHP trang tin tức - Hiển thị danh sách bài viết chuyên mục Bài 26: PHP trang tin tức - Hiển thị nội dung bài viết Bài 27: PHP trang tin tức - Xây dựng chức năng tìm kiếm Bài 28: PHP trang tin tức - Xây dựng các trang con và clear source (End)
CÁC CHỦ ĐỀ
BÀI MỚI NHẤT
Dự án mới của mình là gamehow.net, mời anh em ghé thăm và góp ý ạ.

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

Xin chào tất cả các bạn, 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 bằng PHP. Ở bài trước chúng ta đã hoàn thành xong các chức năng của chuyên mục rồi, hôm nay mình sẽ hướng dẫn các bạn xây dựng các chức năng của hình ảnh. Bây giờ chúng ta bắt đầu thôi!

1. Khái quát

Một trong những phần không thể thiếu của trang tin tức đó là hình ảnh (tiếng anh là images). Một bài viết mà không có hình ảnh minh hoạ thì rất là nhàm chán phải không nào! Cho nên vì thế chúng ta sẽ xây dựng chức năng này cho ứng dụng của mình.

banquyen png
Bài viết này được đăng tại freetuts.net, không được copy dưới mọi hình thức.

Các đặc điểm và chức năng trong phần này là:

  • Upload ảnh
    • Kiểm tra lượng ảnh upload tối đa trong một lần.
    • Kiểm tra kích thước (size) của ảnh khi upload.
    • Kiểm tra đuôi mở rộng của ảnh khi upload.
  • Xoá ảnh 
  • Bảng hiển thị danh sách hình ảnh
  • Không phần quyền tài khoản (vì các tác giả có thể upload hình ảnh cho bài viết của mình)

2. Tạo table hình ảnh và folder lưu trữ

Các bạn tạo table images và chạy lênh SQL sau:

CREATE TABLE `images` (
  `id_img` int(11) NOT NULL,
  `url` text COLLATE utf8_unicode_ci NOT NULL,
  `type` varchar(5) COLLATE utf8_unicode_ci NOT NULL,
  `size` int(11) NOT NULL,
  `date_uploaded` datetime NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;
ALTER TABLE `images`
  ADD PRIMARY KEY (`id_img`);
ALTER TABLE `images`
  MODIFY `id_img` int(11) NOT NULL AUTO_INCREMENT;
Chúng ta sẽ được table như sau:

php trang tin tuc cac chuc nang hinh anh table images jpg

Trong đó:

  • url: là đường dẫn của hình ảnh, bao gồm domain (Ví dụ: http://domain.com/upload/image.jpg)
  • type: là đuôi mở rộng của ảnh (Ví dụ: jpg, png, jpeg, gif, ...)
  • size: là kích thước của ảnh, đơn vị là byte

Để tạo folder chứa các hình ảnh, các bạn tạo cho mình folder upload cùng cấp với folder admin. Mình không để folder này trong folder admin vì khi người dùng xem url ảnh thì sẽ thấy đường dẫn /admin/upload/ nên rất là nguy hiểm.

3. Phân trang hình ảnh

Trong phần hình ảnh này, chúng ta sẽ phân ra 2 trang:

  • Trang hiển thị danh sách hình ảnh (http://domain.com/admin/photos/)
  • Trang upload hình ảnh (http://domain.com/admin/photos/add)

Các bạn mở file admin/templates/photos.php lên và dán nội dung sau:

<?php
 
// Nếu đăng nhập
if ($user)
{
  
    echo '<h3>Hình ảnh</h3>';
    // Lấy tham số ac
    if (isset($_GET['ac']))
    {
        $ac = trim(addslashes(htmlspecialchars($_GET['ac'])));
    }
    else
    {
        $ac = '';
    }
 
 
    // Nếu có tham số ac
    if ($ac != '') 
    {
        // Trang upload hình ảnh
        if ($ac == 'add')
        {
            // Dãy nút của upload hình ảnh
            echo
            '
                <a href="' . $_DOMAIN . 'photos" class="btn btn-default">
                    <span class="glyphicon glyphicon-arrow-left"></span> Trở về
                </a> 
            ';
 
            // Content upload hình ảnh

        } 
        
    }
    // Ngược lại không có tham số ac
    // Trang danh sách hình ảnh
    else
    {
        // Dãy nút của danh sách hình ảnh
        echo
        '
            <a href="' . $_DOMAIN . 'photos/add" class="btn btn-default">
                <span class="glyphicon glyphicon-plus"></span> Thêm
            </a> 
            <a href="' . $_DOMAIN . 'photos" class="btn btn-default">
                <span class="glyphicon glyphicon-repeat"></span> Reload
            </a> 
            <a class="btn btn-danger" id="del_img_list">
                <span class="glyphicon glyphicon-trash"></span> Xoá
            </a> 
        ';
 
        // Content danh sách hình ảnh
    }
}
// Ngược lại chưa đăng nhập
else
{
    new Redirect($_DOMAIN); // Trở về trang index
}
 
?>

4. Upload hình ảnh

Các bạn vào đường dẫn http://domain.com/admin/photos/add để bắt đầu làm nhé!

Xây dựng template

Các bạn mở file admin/templates/photos.php lên và dán đoạn code này vào bên dưới dòng // Content upload hình ảnh:

echo 
'
    <p class="form-up-img">
        <div class="alert alert-info">Mỗi lần upload tối đa 20 file ảnh. Mỗi file có dung lượng không vượt quá 5MB và có đuôi định dạng là .jpg, .png.gif., </div>
        <form action="' . $_DOMAIN . 'photos.php"method="POST" id="formUpImg" enctype="multipart/form-data" onsubmit="return false;">
            <div class="form-group">
                <label>Chọn hình ảnh</label>
                <input type="file" class="form-control" accept="image/*" name="img_up[]" multiple="true" id="img_up" onchange="preUpImg();">
            </div>
            <div class="form-group box-pre-img hidden">
                <p><strong>Ảnh xem trước</strong></p>
            </div>
            <div class="form-group hidden box-progress-bar">
                <div class="progress">
                    <div class="progress-bar" role="progressbar"></div>
                </div>
            </div>
            <div class="form-group">
                <button type="submit" class="btn btn-primary">Upload</button>
                <button class="btn btn-default" type="reset">Chọn lại</button>
            </div>
            <div class="alert alert-danger hidden"></div>
        </form>
    </p>
';
Sau đó các bạn chạy lại trang thì sẽ được kết quả như sau:

php trang tin tuc cac chuc nang hinh anh ket qua upload hinh anh jpgViết Ajax gửi dữ liệu

Mở file admin/js/form.js lên và copy các đoạn code sau:

Đầu tiên là chức năng xem ảnh trước khi upload:

// Xem ảnh trước
function preUpImg() {
	img_up = $('#img_up').val();
	count_img_up = $('#img_up').get(0).files.length;
	$('#formUpImg .box-pre-img').html('<p><strong>Ảnh xem trước</strong></p>');
	$('#formUpImg .box-pre-img').removeClass('hidden');

	// Nếu đã chọn ảnh
	if (img_up != '')
	{
		$('#formUpImg .box-pre-img').html('<p><strong>Ảnh xem trước</strong></p>');
		$('#formUpImg .box-pre-img').removeClass('hidden');
		for (i = 0; i <= count_img_up - 1; i++)
		{
			$('#formUpImg .box-pre-img').append('<img src="' + URL.createObjectURL(event.target.files[i]) + '" style="border: 1px solid #ddd; width: 50px; height: 50px; margin-right: 5px; margin-bottom: 5px;"/>');
		}
	} 
	// Ngược lại chưa chọn ảnh
	else
	{
		$('#formUpImg .box-pre-img').html('');
		$('#formUpImg .box-pre-img').addClass('hidden');
	}
}
Trong đó: Hàm ObURL.createjectURL() là một hàm API của brower, dùng để tạo các URL file. Các bạn có thể tham khảo thêm tại đây.

Tiếp theo là nút reset form upload ảnh:

// Nút reset form  hình ảnh
$('#formUpImg button[type=reset]').on('click', function() {
	$('#formUpImg .box-pre-img').html('');
	$('#formUpImg .box-pre-img').addClass('hidden');
});
Cuối cùng là code quan trọng nhất, upload hình ảnh:

// Upload hình ảnh
$('#formUpImg').submit(function(e) {
	img_up = $('#img_up').val();
	count_img_up = $('#img_up').get(0).files.length;
	error_size_img = 0;
	error_type_img = 0;
	$('#formUpImg button[type=submit]').html('Đang tải ...');

	// Nếu có chọn ảnh
	if (img_up) {
		e.preventDefault();
        
        // Kiểm tra dung lượng ảnh
		for (i = 0; i <= count_img_up - 1; i++)
		{
			size_img_up = $('#img_up')[0].files[i].size;
			if (size_img_up > 5242880) { // 5242880 byte = 5MB 
				error_size_img += 1; // Lỗi
			} else {
				error_size_img += 0; // Không lỗi
			}
		}

		// Kiểm tra định dạng ảnh
		for (i = 0; i <= count_img_up - 1; i++)
		{
			type_img_up = $('#img_up')[0].files[i].type;
			if (type_img_up == 'image/jpeg' || type_img_up == 'image/png' || type_img_up == 'image/gif') {
				error_type_img += 0;
			} else {
				error_type_img += 1;
			}
		}

		// Nếu lỗi về size ảnh
        if (error_size_img >= 1) {
        	$('#formUpImg button[type=submit]').html('Upload');
        	$('#formUpImg .alert').removeClass('hidden');
        	$('#formUpImg .alert').html('Một trong các tệp đã chọn có dung lượng lớn hơn mức cho phép.');
        // Nếu số lượng ảnh vượt quá 20 file
        } else if (count_img_up > 20) {
        	$('#formUpImg button[type=submit]').html('Upload');
        	$('#formUpImg .alert').removeClass('hidden');
        	$('#formUpImg .alert').html('Số file upload cho mỗi lần vượt quá mức cho phép.');
        } else if (error_type_img >= 1) {
        	$('#formUpImg button[type=submit]').html('Upload');
        	$('#formUpImg .alert').removeClass('hidden');
        	$('#formUpImg .alert').html('Một trong những file ảnh không đúng định dạng cho phép.');
        } else {
        	$(this).ajaxSubmit({ 
                beforeSubmit: function() {
                    target:   '#formUpImg .alert', 
                    $("#formUpImg .box-progress-bar").removeClass('hidden');
                    $("#formUpImg .progress-bar").width('0%');
                },
                uploadProgress: function (event, position, total, percentComplete){ 
                    $("#formUpImg .progress-bar").animate({width: percentComplete + '%'});
                    $("#formUpImg .progress-bar").html(percentComplete + '%');
                },
                success: function (data) {     
                	$('#formUpImg button[type=submit]').html('Upload');
                    $('#formUpImg .alert').attr('class', 'alert alert-success'); 
                    $('#formUpImg .alert').html(data);
                },
                error: function() {
                	$('#formUpImg button[type=submit]').html('Upload');
                    $('#formUpImg .alert').removeClass('hidden');  
                    $('#formUpImg .alert').html('Không thể upload hình ảnh vào lúc này, hãy thử lại sau.');
                },
                resetForm: true 
            }); 
            return false;
        }
    // Ngược lại không chọn ảnh
	} else {
		$('#formUpImg button[type=submit]').html('Upload');
		$('#formUpImg .alert').removeClass('hidden');
		$('#formUpImg .alert').html('Vui lòng chọn tệp hình ảnh.');
	}
});
Mình đã chú thích kĩ bên trong rồi nên sẽ không giải thính thêm nữa.

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

Các bạn tạo cho mình file admin/photos.php và chèn nội dung này vào:

<?php

// Kết nối database và thông tin chung
require_once 'core/init.php';

// Nếu đăng nhập
if ($user) 
{
	// Nếu có file upload
	if (isset($_FILES['img_up'])) 
	{
		foreach($_FILES['img_up']['name'] as $name => $value)
		{
			$dir = "../upload/"; 
		    $name_img = stripslashes($_FILES['img_up']['name'][$name]);
		    $source_img = $_FILES['img_up']['tmp_name'][$name];

		    // Lấy ngày, tháng, năm hiện tại
		    $day_current = substr($date_current, 8, 2);
			$month_current = substr($date_current, 5, 2);
			$year_current = substr($date_current, 0, 4);

			// Tạo folder năm hiện tại
		    if (!is_dir($dir.$year_current))
		    {
    			mkdir($dir.$year_current.'/');
			} 

			// Tạo folder tháng hiện tại
			if (!is_dir($dir.$year_current.'/'.$month_current))
    		{
    			mkdir($dir.$year_current.'/'.$month_current.'/');
    		}	

    		// Tạo folder ngày hiện tại
    		if (!is_dir($dir.$year_current.'/'.$month_current.'/'.$day_current))
	    	{
	    		mkdir($dir.$year_current.'/'.$month_current.'/'.$day_current.'/');
	    	}

		    $path_img = $dir.$year_current.'/'.$month_current.'/'.$day_current.'/'.$name_img; // Đường dẫn thư mục chứa file
		    move_uploaded_file($source_img, $path_img); // Upload file
		   	$type_img = array_pop(split("\.", $name_img)); // Loại file
		   	$url_img = substr($path_img, 3); // Đường dẫn file
		   	$size_img = $_FILES['img_up']['size'][$name]; // Dung lượng file

		   	// Thêm dữ liệu vào table
		   	$sql_up_file = "INSERT INTO images VALUES (
				'',
				'$url_img',
				'$type_img',
				'$size_img',
				'$date_current'
		   	)";
		   	$db->query($sql_up_file);
		}
		echo 'Upload thành công.';
		$db->close();
		new Redirect($_DOMAIN.'photos');
	}
    // Nếu tồn tại POST action
}
// Ngược lại chưa đăng nhập
else
{
    new Redirect($_DOMAIN); // Trở về trang index
}
 
?>
Có rất nhiều cách để tạo folder lưu trữ từng file ảnh, nhưng mình dùng các phổ biến hiện nay là sẽ lưu các file ảnh theo từng folder ngày/tháng/năm để dễ dàng tìm kiếm và quản lý.

Ok! Bây giờ các bạn chạy thử để xem thành quả nào!

Trong folder:

php trang tin tuc cac chuc nang hinh anh luu tru hinh anh upload trong folder jpg

Trong table:

php trang tin tuc cac chuc nang hinh anh luu tru hinh anh upload trong table 2 jpg

5. Lời kết

Qua bài này chúng đã nắm được khái quát và chức năng hình ảnh, tạo table, phân trang và xây dựng chức năng upload hình ảnh. Ở bài sau, chúng ta sẽ tiếp tục hoàn thành các chức năng của phần này nhé! Nếu có thắc mắc gì các bạn cứ comment bên dưới hoặc đăng bài trên group kèm theo link bài viết để được hỗ trợ nhanh nhất nhé! Cảm ơn các bạn, chúc các bạn thành công!

 

Cùng chuyên mục:

Hàm key_exists() trong PHP

Hàm key_exists() trong PHP

Cách sử dụng key_exists() trong PHP

Hàm mysqli_fetch_row() trong PHP

Hàm mysqli_fetch_row() trong PHP

Cách sử dụng mysqli_fetch_row() trong PHP

Hàm end() trong PHP

Hàm end() trong PHP

Cách sử dụng end() trong PHP

Hàm mysqli_field_count() trong PHP

Hàm mysqli_field_count() trong PHP

Cách sử dụng mysqli_field_count() trong PHP

Hàm count() trong PHP

Hàm count() trong PHP

Cách sử dụng count() trong PHP

Hàm mysqli_field_seek() trong PHP

Hàm mysqli_field_seek() trong PHP

Cách sử dụng mysqli_field_seek() trong PHP

Hàm compact() trong PHP

Hàm compact() trong PHP

Cách sử dụng compact() trong PHP

Hàm mysqli_field_tell() trong PHP

Hàm mysqli_field_tell() trong PHP

Cách sử dụng mysqli_field_tell() trong PHP

Hàm array_values() trong PHP

Hàm array_values() trong PHP

Cách sử dụng array_values() trong PHP

Hàm mysqli_free_result() trong PHP

Hàm mysqli_free_result() trong PHP

Cách sử dụng mysqli_free_result() trong PHP

Hàm array_unshift() trong PHP

Hàm array_unshift() trong PHP

Cách sử dụng array_unshift() trong PHP

Hàm mysqli_get_charset() trong PHP

Hàm mysqli_get_charset() trong PHP

Cách sử dụng mysqli_get_charset() trong PHP

Hàm array_shift() trong PHP

Hàm array_shift() trong PHP

Cách sử dụng array_shift() trong PHP

Hàm mysqli_get_client_stats() trong PHP

Hàm mysqli_get_client_stats() trong PHP

Cách sử dụng mysqli_get_client_stats() trong PHP

Hàm array_unique() trong PHP

Hàm array_unique() trong PHP

Cách sử dụng array_unique() trong PHP

Hàm mysqli_get_client_version() trong PHP

Hàm mysqli_get_client_version() trong PHP

Cách sử dụng mysqli_get_client_version() trong PHP

Hàm array_uintesect() trong PHP

Hàm array_uintesect() trong PHP

Cách sử dụng array_uintesect() trong PHP

Hàm mysqli_get_connection_stats() trong PHP

Hàm mysqli_get_connection_stats() trong PHP

Cách sử dụng mysqli_get_connection_stats() trong PHP

Hàm array_sum() trong PHP

Hàm array_sum() trong PHP

Cách sử dụng array_sum() trong PHP

Hàm mysqli_get_host_info() trong PHP

Hàm mysqli_get_host_info() trong PHP

Cách sử dụng mysqli_get_host_info() trong PHP

Top