سایت های معروفی مثل trello سرویسی ارائه می دهند که با آن می توان پروژه ها و تسک هایی که برای افراد تیم تعریف می شود را ثبت و مدیریت کرد.
در این آموزش php ما قصد داریم بخش بسیار کوچکی از آن که برای استفاده شخصی در پروژه های تحت وب به کار میرود را پیاده سازی کنیم.
پس با آموزش ساخت لیست todo با php همراه باشید.
یک اپلیکیشن ساده لیست todo ایجاد می کنیم و تسک هایی که داخل یک فرم HTML ارسال می شود را دریافت و داخل دیتابیس MySQL ذخیره می کند.
همچنین این تسک ها از دیتابیس فراخوانی و داخل یک صفحه وب به همراه یک دکمه حذف برای هر کدام قابل نمایش است که با کلیک روی دکمه، از دیتابیس پاک می شود.
ساخت جداول دیتابیس
بطور معمول، با ورود به phpmyadmin دیتابیس خود را ایجاد می کنیم و نام آن را todo قرار می دهیم. سپس یک جدول tasks
برای ذخیره تسک ها می سازیم.
برای این جدول دو فیلد می سازیم :
id
– int(10)task
– varchar(255)
حالا دو فایل ایجاد می کنیم:
index.php
style.css
هر دو را در یک ادیتور متن ساده مثل notepad باز می کنیم و برای فایل index.php
کدهای زیر را قرار می دهیم.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<!DOCTYPE html> <html> <head> <title>ToDo List Application PHP and MySQL</title> </head> <body> <div class="heading"> <h2 style="font-style: 'Hervetica';">ToDo List Application PHP and MySQL database</h2> </div> <form method="post" action="index.php" class="input_form"> <input type="text" name="task" class="task_input"> <button type="submit" name="submit" id="add_btn" class="add_btn">Add Task</button> </form> </body> </html> |
این کدها همان ساختار HTML و فرم برای ثبت تسک جدید است.
اگر این فایل را در مرورگر باز کنید چنین چیزی خواهید دید:
حالا برای زیباتر کردن فرم، زیر تگ <title>
این خط که برای افزودن فایل css هست اضافه می کنیم:
1 |
<link rel="stylesheet" type="text/css" href="style.css"> |
فایل style.css
را که قبلا ساختیم را باز کرده و این کدها را قرار میدیم:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 |
.heading{ width: 50%; margin: 30px auto; text-align: center; color: #6B8E23; background: #FFF8DC; border: 2px solid #6B8E23; border-radius: 20px; } form { width: 50%; margin: 30px auto; border-radius: 5px; padding: 10px; background: #FFF8DC; border: 1px solid #6B8E23; } form p { color: red; margin: 0px; } .task_input { width: 75%; height: 15px; padding: 10px; border: 2px solid #6B8E23; } .add_btn { height: 39px; background: #FFF8DC; color: #6B8E23; border: 2px solid #6B8E23; border-radius: 5px; padding: 5px 20px; } table { width: 50%; margin: 30px auto; border-collapse: collapse; } tr { border-bottom: 1px solid #cbcbcb; } th { font-size: 19px; color: #6B8E23; } th, td{ border: none; height: 30px; padding: 2px; } tr:hover { background: #E9E9E9; } .task { text-align: left; } .delete{ text-align: center; } .delete a{ color: white; background: #a52a2a; padding: 1px 6px; border-radius: 3px; text-decoration: none; } |
اگر کار را درست انجام داده باشید و ذخیره و صفحه را رفرش کنید چنین چیزی می بینید:
اتصال به دیتابیس MySQL با PHP
حالا باید کد php برای اتصال به دیتابیس را بنویسیم.
در بالای کدهای فایل index.php
در اولین خط قبل از <html>
این کد را اضافه کنید:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<?php // initialize errors variable $errors = ""; // connect to database $db = mysqli_connect("localhost", "root", "", "todo"); // insert a quote if submit button is clicked if (isset($_POST['submit'])) { if (empty($_POST['task'])) { $errors = "You must fill in the task"; }else{ $task = $_POST['task']; $sql = "INSERT INTO tasks (task) VALUES ('$task')"; mysqli_query($db, $sql); header('location: index.php'); } } // ... |
اگر این عملیات را داخل لوکال هاست انجام می دهید نیاز به تغییر چیزی در کد نیست در غیر اینصورت حتما اطلاعات ورود به دیتابیس را در خط ۶ تغییر بدید.
اگر کاربر روی دکمه سابمیت بزند، تسک موردنظر داخل دیتابیس ذخیره می شود.
به هر حال اگر فیلد تسک خالی باشد متغیر $errors
که حاوی متن خطای ما هست ست می شود ولی مقدار آن نمایش داده نمی شود.
پس باید خطا را به کاربر نمایش بدیم.
برای اینکار کد زیر را دقیقا زیر تگ <form>
قرار می دهیم:
1 2 3 |
<?php if (isset($errors)) { ?> <p><?php echo $errors; ?></p> <?php } ?> |
اگر کاربر سعی در ارسال یک مقدار خالی کرد این خطا نمایش داده می شود:
نمایش تسک های ذخیره شده
تا الان ساخت لیست todo با php انجام شده ولی چیزی را نمایش ندادیم.
بنابراین نیاز است که اطلاعات را از دیتابیس فراخوانی و در صفحه نمایش بدیم.
فایل index.php
را باز کرده و کد زیر را دقیقا قبل از تگ </form>
قرار بدید:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
//... // </form> <table> <thead> <tr> <th>N</th> <th>Tasks</th> <th style="width: 60px;">Action</th> </tr> </thead> <tbody> <?php // select all tasks if page is visited or refreshed $tasks = mysqli_query($db, "SELECT * FROM tasks"); $i = 1; while ($row = mysqli_fetch_array($tasks)) { ?> <tr> <td> <?php echo $i; ?> </td> <td class="task"> <?php echo $row['task']; ?> </td> <td class="delete"> <a href="index.php?del_task=<?php echo $row['id'] ?>">x</a> </td> </tr> <?php $i++; } ?> </tbody> </table> |
اگر یک تسک را داخل فرم وارد کنید و دکمه سابمیت “Add Task” را بزنید، خروجی این خواهد بود:
خب حالا برای آخرین مرحله آموزش ساخت لیست todo با php دکمه حذف را کدنویسی کنیم.
در بالای صفحه، بعد از بلاک if که تسک را داخل دیتابیس ذخیره می کند، این کد را اضافه کنید:
1 2 3 4 5 6 7 8 9 |
// delete task if (isset($_GET['del_task'])) { $id = $_GET['del_task']; mysqli_query($db, "DELETE FROM tasks WHERE id=".$id); header('location: index.php'); } ?> |
همین بود، تمام شد. حالا اگر دکمه “x” را بزنید، سطر موردنظر از دیتابیس حذف می شود.
جمع بندی آموزش ساخت لیست todo با php
امیدوارم از آموزش ساخت لیست todo با php نهایت استفاده را برده باشید.
برای تمرین یک قابلیتی که توصیه می کنم به این کد اضافه کنید این است که امکان ویرایش را هم قرار بدید تا کاربر بتواند متن تسک را تغییر دهد.
برای اینکار کافی است که از دستور Update در mysql استفاده کنید: عملیات CRUD در MySQL
هر سوالی داشتید، از قسمت نظرات ارسال کنید. سریعا، پاسخگوی سوالات شما هستیم.
سلام و درود فراوان . من در دیتابیس mysql به یک مشکلی خوردم توی آموزش هی سایت تون گشتم ولی نتونستم مورد مشابهی ازش پیدا کنم لطفا اگر ممکنه راهنمایی بفرمایید .
یک فیلد id در دیتابیس دارم که اگر بخوام مقدار اونو بیشتر از عدد ۲۱۴۷۴۸۳۶۴۷ تعیین کنم بهم ارور میده .
این دیتابیس برای ربات تلگرام بوده و اون فیلد id هم آیدی عددی کاربران رو ذخیره میکرده . منتهی بخاطر افزایش کاربران تلگرام که باعث شده مقادیر ای دی های عددی شون بالا بره حالا این مشکل در ربت ایجاد شده و ای دی عددی های جدید رو ذخیره نمیکنه . اگر راهکاری هست ممنون میشم از شما .
سلام. داخل دیتابیس اون ستون از از جدول رو که ایدی کاربر رو ذخیره میکنه از int به varchar با طول مثلا ۵۰ تغییر بدید مشکل رفع میشه
خیلییی ممنونم . شما واقعا عالی هستین .
سلام
نمونه این todo list که اینجا نوشتید رو توی سایت بصورت آنلاین دارید برای نمونه ؟!
سلام. خیر همین کدها رو روی لوکال اجرا کنید نمونه ساخته میشه
سلام استاد، کاش مطلبی در مورد شی گرایی در php میذاشتین
با تشکر