مارکت

بررسی جامع و کامل نمونه اسکریپت CRUD در AngularJS و PHP

در دنیای برنامه‌نویسی وب، عملیات CRUD که مخفف Create، Read، Update، و Delete است، نقش حیاتی و اساسی در مدیریت داده‌ها و ارتباط بین کلاینت و سرور ایفا می‌کند. این عملیات، پایه و اساس هر برنامه‌ای است که نیازمند ذخیره‌سازی، بازیابی، و ویرایش داده‌های کاربر یا سیستم است. در این مقاله، قصد داریم به تفصیل و با جزئیات، نمونه‌ای از اسکریپت‌های عملیاتی CRUD را در محیط‌های AngularJS و PHP بررسی کنیم و نحوه طراحی و پیاده‌سازی آن‌ها را شرح دهیم، به گونه‌ای که هر توسعه‌دهنده‌ای بتواند این مفاهیم را به راحتی در پروژه‌های خود به کار ببرد.

۱. مقدمه‌ای بر عملیات CRUD

عملیات CRUD، چهار عملیات اصلی است که در اکثر برنامه‌های تحت وب مورد استفاده قرار می‌گیرد. این عملیات، نقش حیاتی در مدیریت داده‌ها دارند و به توسعه‌دهندگان اجازه می‌دهند تا بتوانند به سادگی و با کمترین خطا، داده‌ها را در پایگاه داده‌ها وارد، مشاهده، ویرایش، یا حذف کنند. برای مثال، در یک سیستم مدیریت کاربران، عملیات Create برای افزودن کاربر جدید، Read برای مشاهده اطلاعات کاربر، Update برای تغییر اطلاعات، و Delete برای حذف کاربر است.

۲. بخش سمت سرور: PHP و پایگاه داده

در بخش سرور، PHP نقش مهمی در پردازش درخواست‌های CRUD دارد. ابتدا باید یک پایگاه داده رابطه‌ای، مانند MySQL، طراحی کنیم که شامل جداول مورد نیاز باشد. فرض کنیم جدولی به نام `users` داریم که فیلدهای آن شامل `id`, `name`, `email`, و `phone` است.
برای هر عملیات CRUD، یک اسکریپت PHP جداگانه نوشته می‌شود یا در قالب یک فایل با کنترلرها و روترهای مناسب، درخواست‌ها مدیریت می‌شود. مثلا:
- Create: اسکریپت PHP که داده‌های جدید کاربر را دریافت و در پایگاه داده درج می‌کند.
- Read: اسکریپتی که لیستی از کاربران را بازیابی و برمی‌گرداند.
- Update: اسکریپتی که اطلاعات کاربر خاص را بر اساس `id` بروزرسانی می‌کند.
- Delete: اسکریپتی که بر اساس `id`، کاربر مورد نظر را حذف می‌کند.
این عملیات معمولاً به صورت درخواست‌های AJAX به سمت سرور ارسال می‌شوند، و پاسخ‌ها در قالب JSON برگردانده می‌شوند تا در سمت کلاینت قابل پردازش باشند.

۳. بخش سمت کلاینت: AngularJS

در سمت کلاینت، AngularJS نقش رابط کاربری و مدیریت درخواست‌ها را بر عهده دارد. در این فریم‌ورک، می‌توان با استفاده از سرویس‌های `$http`، درخواست‌های AJAX را به سرور ارسال کرد و نتایج را دریافت و نمایش داد.
یک نمونه ساده از عملیات CRUD در AngularJS شامل موارد زیر است:
- خواندن داده‌ها (Read): در هنگام بارگذاری صفحه، یک درخواست GET به سرور ارسال می‌شود و داده‌های کاربران را دریافت و در قالب جدول نمایش می‌دهد.
- نوشتن داده‌ها (Create): فرم ثبت کاربر ساخته می‌شود، و پس از تکمیل، با کلیک بر روی دکمه ثبت، داده‌ها به سرور ارسال می‌شوند.
- بروزرسانی (Update): کاربر می‌تواند با کلیک بر روی دکمه ویرایش، اطلاعات را تغییر دهد. پس از اصلاح، درخواست PUT یا POST به سرور ارسال می‌شود.
- حذف (Delete): با کلیک بر روی دکمه حذف، درخواست DELETE یا POST به سرور ارسال می‌شود و کاربر حذف می‌گردد.
در نمونه‌های عملی، این عملیات نیازمند مدیریت دقیق وضعیت و خطاها هستند، بنابراین در کنار درخواست‌های AJAX، از قالب‌های مناسب و کنترل‌های خطا استفاده می‌شود.

۴. پیاده‌سازی نمونه اسکریپت

در ادامه، نمونه‌های کد برای هر عملیات آورده شده است:

۱. PHP: عملیات خواندن (Read)

php  

<?php  

// connect.php - اتصال به پایگاه داده  

$conn = new mysqli('localhost', 'username', 'password', 'database');

if ($conn->connect_error) {

    die("Connection failed: " . $conn->connect_error);

}
// read.php - بازیابی داده‌ها  

$result = $conn->query("SELECT * FROM users");

$users = [];
while($row = $result->fetch_assoc()) {

    $users[] = $row;

}
echo json_encode($users);

$conn->close();

?>

۲. AngularJS: درخواست خواندن

javascript  

app.controller('MainController', function($scope, $http) {

    $http.get('read.php').then(function(response) {

        $scope.users = response.data;

    });

});

۳. PHP: عملیات نوشتن (Create)

php  

<?php  

// create.php  

$data = json_decode(file_get_contents('php://input'), true);

$name = $data['name'];

$email = $data['email'];

$phone = $data['phone'];
$conn = new mysqli('localhost', 'username', 'password', 'database');

if ($conn->connect_error) {

    die("Connection failed");

}
$stmt = $conn->prepare("INSERT INTO users (name, email, phone) VALUES (?, ?, ?)");

$stmt->bind_param("sss", $name, $email, $phone);

$stmt->execute();
echo json_encode(['status' => 'success']);

$conn->close();

?>

۴. AngularJS: ارسال داده برای ایجاد کاربر

javascript  

$scope.addUser = function() {

    $http.post('create.php', $scope.newUser).then(function(response) {

        if (response.data.status === 'success') {

            // بروزرسانی لیست کاربران  

            $scope.users.push($scope.newUser);

            $scope.newUser = {}; // ریست فرم  

        }

    });

};

۵. PHP: عملیات بروزرسانی (Update)

php  

<?php  

// update.php  

$data = json_decode(file_get_contents('php://input'), true);

$id = $data['id'];

$name = $data['name'];

$email = $data['email'];

$phone = $data['phone'];
$conn = new mysqli('localhost', 'username', 'password', 'database');

if ($conn->connect_error) {

    die("Connection failed");

}
$stmt = $conn->prepare("UPDATE users SET name=?, email=?, phone=? WHERE id=?");

$stmt->bind_param("sssi", $name, $email, $phone, $id);

$stmt->execute();
echo json_encode(['status' => 'success']);

$conn->close();

?>

۶. AngularJS: بروزرسانی داده‌ها

javascript  

$scope.updateUser = function(user) {

    $http.put('update.php', user).then(function(response) {

        if (response.data.status === 'success') {

            alert('کاربر بروزرسانی شد');

        }

    });

};

۷. PHP: حذف کاربر (Delete)

php  

<?php  

// delete.php  

$data = json_decode(file_get_contents('php://input'), true);

$id = $data['id'];
$conn = new mysqli('localhost', 'username', 'password', 'database');

if ($conn->connect_error) {

    die("Connection failed");

}
$stmt = $conn->prepare("DELETE FROM users WHERE id=?");

$stmt->bind_param("i", $id);

$stmt->execute();
echo json_encode(['status' => 'success']);

$conn->close();

?>

۸. AngularJS: درخواست حذف

javascript  

$scope.deleteUser = function(userId) {

    $http.post('delete.php', {id: userId}).then(function(response) {

        if (response.data.status === 'success') {

            $scope.users = $scope.users.filter(function(user) {

                return user.id !== userId;

            });

        }

    });

};

۵. نتیجه‌گیری و نکات مهم

در این مقاله، با جزئیات و قدم به قدم، نمونه عملیاتی CRUD در محیط‌های AngularJS و PHP را بررسی کردیم. مهم است بدانید که در پیاده‌سازی این عملیات، باید موارد امنیتی، مانند استفاده از prepared statements، اعتبارسنجی داده‌ها، و جلوگیری از حملات XSS و CSRF را جدی بگیرید. همچنین، بهتر است از ساختارهای مدرن‌تر مانند فریم‌ورک‌های Angular جدید، و زبان‌های سمت سرور دیگر مانند Node.js یا فریم‌ورک‌های PHP مدرن‌تر بهره ببرید؛ اما نمونه‌های ارائه شده، پایه‌ای مناسب برای درک عمیق و شروع کار هستند.
در نهایت، هر پروژه نیازمند طراحی دقیق و پیروی از بهترین روش‌های توسعه است؛ بنابراین، در کنار کدنویسی، مستندسازی و رعایت استانداردهای کدنویسی، نقش مهمی در موفقیت پروژه‌های CRUD ایفا می‌کنند. به کارگیری این نمونه‌ها و نکات، می‌تواند نقطه شروع خوبی برای توسعه برنامه‌های قوی و امن باشد، و در مسیر تبدیل شدن به یک توسعه‌دهنده حرفه‌ای، قدم‌های مهمی بردارید.