ساخت دفترچه یاداشت

ساخت دفترچه یاداشت

ما در این آموزش به شما نحوه ساخت یک دفترچه یاداشت در صفحه وب را میدهیم.

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

برای شروع ما کار را با ایجاد یک سند HTML اغاز می کنیم.من در زیر فقط قسمت مهم کد رو نوشتم ولی شما میتونید کد کامل رو در بخش index.php ببینید

index.php

<div id="pad">
    <h2>Note</h2>
    <textarea id="note"><?php echo $note_content ?></textarea>
</div>

آن تمام چیزی است که ما برای یک دفترچه یاداشت نیاز داریم البته ما برای قالب دفترچه یاداشت از کد های CSS نیز استفاده خواهیم کرد.البته من کتابخانهjQuery  و فایل script.js رو نیز قبل از بستن تگ body وارد کردم ولی در کد بالا نشون ندادم.چیز مهم در این بخش کد echo زبان PHP  است که در داخل textarea نوشتیم.این دستور آخرین نوشته کاربران را پرینت می کند.

کد php این اموزش بسیار آسان است.کاری که انجام میدهد این است که هنگام بارگذاری صفحه محتویات دفترچه رو میخواند و هنگامی  که ajax از کتابخانه jQuery درخواست کند میتوان داخل آن نوشت.این باعث میشود که محتویات داخل دفترچه بازنویسی شود(حذف شود)

index.php

$note_name = 'note.txt';
$uniqueNotePerIP = true;

if($uniqueNotePerIP){

    // Use the user's IP as the name of the note.
    // This is useful when you have many people
    // using the app simultaneously.

    if(isset($_SERVER['HTTP_X_FORWARDED_FOR'])){
        $note_name = 'notes/'.md5($_SERVER['HTTP_X_FORWARDED_FOR']).'.txt';
    }
    else{
        $note_name = 'notes/'.md5($_SERVER['REMOTE_ADDR']).'.txt';
    }
}

if(isset($_SERVER['HTTP_X_REQUESTED_WITH'])){
    // This is an AJAX request

    if(isset($_POST['note'])){
        // Write the file to disk
        file_put_contents($note_name, $_POST['note']);
        echo '{"saved":1}';
    }

    exit;
}

$note_content = '';

if( file_exists($note_name) ){
    $note_content = htmlspecialchars( file_get_contents($note_name) );
}

به متغییر $uniqueNotePerIP  توجه کنید،ما از این در پیش نمایش استفاده کردیم تا هر کاربری نوشته منحصر به فردی بنویسد.این تنظیمات باعث میشود تا نوشته هر کاربری با نام IPادرسش ذخیره شود.شما میتونید ان را به  false  تغییر دهید اگر میخواهید تا هر کاربری یک نوشته  جدا داشته باشد اما به این توجه داشته باشید اگر ۲ نفر به طور همزمان روی یک نوشته تغییراتی اعمال کند اخرین کاربری که تغییرات را اعمال کرده جایگزین متن قبلی میشود.

illustration

کدjQuery

کار jQuery در این اپیلیکیشن منتظر ماندن برای تغییر در textarea است تا آنها را با درخواست ارسال ajax به index.php بفرستد تا متن به صورت فایل تبدیل کند.روش معمول اتصال یک کنترل کننده به رخداد KeyPress است،اما اگر کاربر متنی را  در textarea ،past کند این رخداد اجرا نمی شود. برای درست اجرا کردن ار رخدادinput استفاده کنید.

assets/js/script.js

$(function(){

    var note = $('#note');

    var saveTimer,
        lineHeight = parseInt(note.css('line-height')),
        minHeight = parseInt(note.css('min-height')),
        lastHeight = minHeight,
        newHeight = 0,
        newLines = 0;

    var countLinesRegex = new RegExp('\n','g');

    // The input event is triggered on key press-es,
    // cut/paste and even on undo/redo.

    note.on('input',function(e){

        // Clearing the timeout prevents
        // saving on every key press
        clearTimeout(saveTimer);
        saveTimer = setTimeout(ajaxSaveNote, 2000);

        // Count the number of new lines
        newLines = note.val().match(countLinesRegex);

        if(!newLines){
            newLines = [];
        }

        // Increase the height of the note (if needed)
        newHeight = Math.max((newLines.length + 1)*lineHeight, minHeight);

        // This will increase/decrease the height only once per change
        if(newHeight != lastHeight){
            note.height(newHeight);
            lastHeight = newHeight;
        }
    }).trigger('input');	// This line will resize the note on page load

    function ajaxSaveNote(){

        // Trigger an AJAX POST request to save the note
        $.post('index.php', { 'note' : note.val() });
    }

});

ودر آخر کد های CSS را برای زیبایی قالب دفترچه یاداشت وارد می کنیم.

assets/css/styles.css

#pad{
    position:relative;
    width: 374px;
    margin: 180px auto 40px;
}

#note{
    font: normal 15px 'Courgette', cursive;
    line-height: 17px;
    color:#444;
    background: url('../img/mid.png') repeat-y;
    display: block;
    border: none;
    width: 329px;
    min-height: 170px;
    overflow: hidden;
    resize: none;
    outline: 0px;
    padding: 0 10px 0 35px;
}

#pad h2{
    background: url('../img/header.png') no-repeat;
    overflow: hidden;
    text-indent: -9999px;
    height: 69px;
    position: relative;
}

#pad:after{
    position:absolute;
    content:'';
    background:url('../img/footer.png') no-repeat;
    width:100%;
    height:40px;
}
+1
0


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

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

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

۲ دیدگاه ها

  1. یه همچین دفترچه یادداشتی برای ویندوز فرم می خواستم.آیا سراغ دارین؟

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

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

*


× پنج = 45

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>