پلاگین فهرست کارهای روزانه

پلاگین فهرست کارهای روزانه

در این آموزش ما قصد داریم به شما نحوه ساخت یک پلاگین  فهرست کارهای روزانه با استفاده از Ajax رو بدهیم.

برای مشاهده لینک وارد شود

ما بر خلاف گذشته کار خود را با نوشتن کدهای PHP شروع  میکنیم. ما کار را با نوشتن ویژگی oop زبان PHP شروع میکنیم.قابلیت هایی که در این آموزش برای کاربر نهایی قرار میدهیم عبارتند از :ایجاد-ویرایش – حذف و مرتب سازی اقلام موجود در لیست کارها.

جزئیات را زیر توضیح می دهیم.

todo.class.php – Part 1

 
/* Defining the ToDo class */

class ToDo{

    /* An array that stores the todo item data: */

    private $data;

    /* The constructor */
    public function __construct($par){
        if(is_array($par))
            $this->data = $par;
    }

    /*
        This is an in-build "magic" method that is automatically called
        by PHP when we output the ToDo objects with echo.
    */

    public function __toString(){

        // The string we return is outputted by the echo statement

        return '
            
  • '.$this->data['text'].'
  • '; }

    The constructor آرایه را به عنوان پارامتر دریافت می کند و در متغییر data$ داخل کلاس ذخیره می کند.این آرایه  یک ردیف از پایگاه داده ()mysql_fetch_assoc استکه شامل شناسه و متن لیست کارها است.بعد از این متد  ()toString__ قرار دارد.هر چیزی که از این متد بازگردانده شود در داخل یک تگ <li> قرار میگیرد. در کنار هر کار ما به دو عملکرد دسترسی داریم.

    i23

    todo.class.php – Part 2

       /*
            The edit method takes the ToDo item id and the new text
            of the ToDo. Updates the database.
        */
    
        public static function edit($id, $text){
    
            $text = self::esc($text);
            if(!$text) throw new Exception("Wrong update text!");
    
            mysql_query("	UPDATE tz_todo
                            SET text='".$text."'
                            WHERE id=".$id
                        );
    
            if(mysql_affected_rows($GLOBALS['link'])!=1)
                throw new Exception("Couldn't update item!");
        }
    
        /*
            The delete method. Takes the id of the ToDo item
            and deletes it from the database.
        */
    
        public static function delete($id){
    
            mysql_query("DELETE FROM tz_todo WHERE id=".$id);
    
            if(mysql_affected_rows($GLOBALS['link'])!=1)
                throw new Exception("Couldn't delete item!");
        }
    
        /*
            The rearrange method is called when the ordering of
            the todos is changed. Takes an array parameter, which
            contains the ids of the todos in the new order.
        */
    
        public static function rearrange($key_value){
    
            $updateVals = array();
            foreach($key_value as $k=>$v)
            {
                $strVals[] = 'WHEN '.(int)$v.' THEN '.((int)$k+1).PHP_EOL;
            }
    
            if(!$strVals) throw new Exception("No data!");
    
            // We are using the CASE SQL operator to update the ToDo positions en masse:
    
            mysql_query("	UPDATE tz_todo SET position = CASE id
                            ".join($strVals)."
                            ELSE position
                            END");
    
            if(mysql_error($GLOBALS['link']))
                throw new Exception("Error updating positions!");
    }

    هنگام تعریف کلاس ما چند متد ثابت تعریف کرده ایم،آنها متد های خاصی هستند که میتوانید به آنها بدون ایجاد متد های کلاس به آنها دسترسی داشته باشید.برای مثال شما میتونید متد edit را به صورت زیر فراخوانی کنید.
    (ToDo::edit($par1,$par2
    توجه کنید که ما چطور با خطاها هنگام مواجه شدن برخورد می کنیم.هنگامی که یک خطا رخ دهد اسکریپت تا زمانی که مشکل حل شودمتوقف میشود.همچنین ما برای به روز رسانی پایگاه داده از اپراتور CASE واقع در MySQL استفاده خواهیم کرد.

    todo.class.php – Part 3

      
     /*
            The createNew method takes only the text of the todo as a parameter,
            writes to the database and outputs the new todo back to
            the AJAX front-end.
        */
    
        public static function createNew($text){
    
            $text = self::esc($text);
            if(!$text) throw new Exception("Wrong input data!");
    
            $posResult = mysql_query("SELECT MAX(position)+1 FROM tz_todo");
    
            if(mysql_num_rows($posResult))
                list($position) = mysql_fetch_array($posResult);
    
            if(!$position) $position = 1;
    
            mysql_query("INSERT INTO tz_todo SET text='".$text."', position = ".$position);
    
            if(mysql_affected_rows($GLOBALS['link'])!=1)
                throw new Exception("Error inserting TODO!");
    
            // Creating a new ToDo and outputting it directly:
    
            echo (new ToDo(array(
                'id'	=> mysql_insert_id($GLOBALS['link']),
                'text'	=> $text
            )));
    
            exit;
        }
    
        /*
            A helper method to sanitize a string:
        */
    
        public static function esc($str){
    
            if(ini_get('magic_quotes_gpc'))
                $str = stripslashes($str);
    
            return mysql_real_escape_string(strip_tags($str));
        }
    
    } // closing the class definition

    <p”>دسترسی به متد های همان کلاس از طریق متد ::self به راحتی قابل دسترس است.ما از متد ()esc برای پاک کردن داده های وارد شده توسط کاربر استفاده می کنیم.همچنین به متد ()createNew توجه کنید.پس از اجرای کوئریINSERT در دیتابیس ما با استفاده از شناسه منحصر به فرد دریافتی از  ()mysql_insert_id اقدام به ایجادیک آبجکت جدید برای لیست می کنیم.

    حالا به نحوه استفاده کلاس توجه کنید.

    demo.php – Part 1

     // Select all the todos, ordered by position:
    $query = mysql_query("SELECT * FROM `tz_todo` ORDER BY `position` ASC");
    
    $todos = array();
    
    // Filling the $todos array with new ToDo objects:
    
    while($row = mysql_fetch_assoc($query)){
        $todos[] = new ToDo($row);
    }

    پس از وارد کردن todo.class.php در demo.php ما آیتم های todo را انتخاب می کنیم و با استفاده از نتیجه MySQL یک حلقه تکرار ،ارایه  todosرا پر می کنیم.

    demo.php – Part 2

     // Looping and outputting the $todos array. The __toString() method
    // is used internally to convert the objects to strings:
    
    foreach($todos as $item){
        echo $item;
    }

    ما برای اینکه کار دستکاری کدهای Ajax راحتر شود آنها همانطور که در زیر مشهده می کنید در داخل یک فایل قرار می دهیم

    ajax.php

     $id = (int)$_GET['id'];
    
    try{
    
        switch($_GET['action'])
        {
            case 'delete':
                ToDo::delete($id);
                break;
    
            case 'rearrange':
                ToDo::rearrange($_GET['positions']);
                break;
    
            case 'edit':
                ToDo::edit($id,$_GET['text']);
                break;
    
            case 'new':
                ToDo::createNew($_GET['text']);
                break;
        }
    
    }
    catch(Exception $e){
    //	echo $e->getMessage();
        die("0");
    }
    
    echo "1";

    با استفاده از دستور swich ما تصمیم میگیریم که کدام یک از متدهای استاتیک اجرا شوند.

    MySQL

    جدول  tz_todo شناسه ،موقعیت ، متن و تاریخ ایجاد مربوط به هر یک از کارهای لیست را نگه میدارد.

    i23

    XHTML

    بیشتر نشانه گذاری ها توسط PHP انجام شده است.ما ابتدا  jQuery وjQuery UI و استایل ها را به صفحه اضافه میکنیم.

     												

    بعد از آن ما به سراغ کدهای مربوط به ریست کردن صفحه میرویم.

    demo.php

     
    
    Add a ToDo
    Are you sure you want to delete this TODO item?
     
     

    CSS

    اکنون به سراغ کدهای CSS میرویم.

     
    /* The todo items are grouped into an UL unordered list */
    
    ul.todoList{
        margin:0 auto;
        width:500px;
        position:relative;
    }
    
    ul.todoList li{
        background-color:#F9F9F9;
        border:1px solid #EEEEEE;
        list-style:none;
        margin:6px;
        padding:6px 9px;
        position:relative;
        cursor:n-resize;
    
        /* CSS3 text shadow and rounded corners: */
    
        text-shadow:1px 1px 0 white;
    
        -moz-border-radius:6px;
        -webkit-border-radius:6px;
        border-radius:6px;
    }
    
    ul.todoList li:hover{
        border-color:#9be0f9;
    
        /* CSS3 glow effect: */
        -moz-box-shadow:0 0 5px #A6E5FD;
        -webkit-box-shadow:0 0 5px #A6E5FD;
        box-shadow:0 0 5px #A6E5FD;
    }
    
    /* The edit textbox */
    
    .todo input{
        border:1px solid #CCCCCC;
        color:#666666;
        font-family:Arial,Helvetica,sans-serif;
        font-size:0.725em;
        padding:3px 4px;
        width:300px;
    }
    
    /* The Save and Cancel edit links: */
    
    .editTodo{
        display:inline;
        font-size:0.6em;
        padding-left:9px;
    }
    
    .editTodo a{
        font-weight:bold;
    }
    
    a.discardChanges{
        color:#C00 !important;
    }
    
    a.saveChanges{
        color:#4DB209 !important;
    }

    کد های بالا به دلیل سادگی نیازی به توضیح ندارند.

    jQuery

    به سراغ کد های جاوااسکریپت میرویم.

    script.js – Part 1

     
    $(document).ready(function(){
        /* The following code is executed once the DOM is loaded */
    
        $(".todoList").sortable({
            axis		: 'y',				// Only vertical movements allowed
            containment	: 'window',			// Constrained by the window
            update		: function(){		// The function is called after the todos are rearranged
    
                // The toArray method returns an array with the ids of the todos
                var arr = $(".todoList").sortable('toArray');
    
                // Striping the todo- prefix of the ids:
    
                arr = $.map(arr,function(val,key){
                    return val.replace('todo-','');
                });
    
                // Saving with AJAX
                $.get('ajax.php',{action:'rearrange',positions:arr});
            }
        });
    
        // A global variable, holding a jQuery object
        // containing the current todo item:
    
        var currentTODO;
    
        // Configuring the delete confirmation dialog
        $("#dialog-confirm").dialog({
            resizable: false,
            height:130,
            modal: true,
            autoOpen:false,
            buttons: {
                'Delete item': function() {
    
                    $.get("ajax.php",{"action":"delete","id":currentTODO.data('id')},function(msg){
                        currentTODO.fadeOut('fast');
                    })
    
                    $(this).dialog('close');
                },
                Cancel: function() {
                    $(this).dialog('close');
                }
            }
        });

    برای نمایش پیغام ما نیاز به تگ پایه داریم تا تبدیل به پیغام شوند.محتوای تگ متنی را در محل نمایش پیغام نشان خواهد داد.

    script.js – Part 2

     
    // When a double click occurs, just simulate a click on the edit button:
        $('.todo').live('dblclick',function(){
            $(this).find('a.edit').click();
        });
    
        // If any link in the todo is clicked, assign
        // the todo item to the currentTODO variable for later use.
    
        $('.todo a').live('click',function(e){
    
            currentTODO = $(this).closest('.todo');
            currentTODO.data('id',currentTODO.attr('id').replace('todo-',''));
    
            e.preventDefault();
        });
    
        // Listening for a click on a delete button:
    
        $('.todo a.delete').live('click',function(){
            $("#dialog-confirm").dialog('open');
        });
    
        // Listening for a click on a edit button
    
        $('.todo a.edit').live('click',function(){
    
            var container = currentTODO.find('.text');
    
            if(!currentTODO.data('origText'))
            {
                // Saving the current value of the ToDo so we can
                // restore it later if the user discards the changes:
    
                currentTODO.data('origText',container.text());
            }
            else
            {
                // This will block the edit button if the edit box is already open:
                return false;
            }
    
            $('').val(container.text()).appendTo(container.empty());
    
            // Appending the save and cancel links:
            container.append(
                '
    '+ 'Save or Cancel'+ '
    ' ); }); // The cancel edit link: $('.todo a.discardChanges').live('click',function(){ currentTODO.find('.text') .text(currentTODO.data('origText')) .end() .removeData('origText'); }); // The save changes link: $('.todo a.saveChanges').live('click',function(){ var text = currentTODO.find("input[type=text]").val(); $.get("ajax.php",{'action':'edit','id':currentTODO.data('id'),'text':text}); currentTODO.removeData('origText') .find(".text") .text(text); }); // The Add New ToDo button: var timestamp; $('#addButton').click(function(e){ // Only one todo per 5 seconds is allowed: if(Date.now() - timestamp<5000) return false; $.get("ajax.php",{'action':'new','text':'New Todo Item. Doubleclick to Edit.'},function(msg){ // Appending the new todo and fading it into view: $(msg).hide().appendTo('.todoList').fadeIn(); }); // Updating the timestamp: timestamp = Date.now(); e.preventDefault(); }); }); // Closing $(document).ready()

    در کدهای  بالا نیز به تعریف ایونتهایی از قبیل save و cancel و... می پردازیم.

    پایان

    +5
    -1


    هرگونه انتشار مطالب اختصاصي و محصولات اين سايت بجز با درج لينک مستقيم شرعا حرام بوده و پيگرد قانوني دارد.
    طبق ماده 12 فصل سوم قانون جرائم رايانه هرگونه کپي برداري ممنوع بوده و پيگرد قانوني دارد. براي اطلاعات بيشتر کليک کنيد.

    درباره‌ی مدیر سایت

    در اردیبهشت سالی از سال های خدا بدنیا آمدم.درس خواندم و مهندس شدم.ازآنجایی که علاقه شدیدی به برنامه نویسی و ترجمه وآموزش داشتم در راستای اهدافم این وبسایت رو راه اندازی کردم تا دین خود را به جامعه برنامه نویسی ادا کرده باشم.

    دیدگاه خود را بنویسید

    آدرس پست الکترونیک شما منتشر نخواهد شد.خانه های ضروری نشانه گذاری شده اند. *

    *


    6 + سه =