مهندس مهدی حسامی :: آموزش php (وبلاگ یک پی اچ پی کار)

۱۴۲ مطلب توسط «مهندس مهدی حسامی» ثبت شده است

نمایش خودکار پاپ آپ بعد از بارگذاری صفحه با استفاده از جی کوئری بوت استراپ

در این پست یک مطلب کاربردی رو خدمتتون آموزش میدم که خیلی از شما در پروژه هاتون بهش نیاز پیدا می کنید.

وقتی شما از فریمورک بوت استراپ استفاده می کنید ، می تونید از امکانات جاوا اسکریپتی این فرمیورک که با کتابخونه جی کوئری هم نوشته شده بهره بگیرید که یکی از این امکاناتش مدال باکس ها هستند ، یعنی همون عناصری که بصورت پاپ آپ نمایش داده میشن که خود بوت استراپ برای نمایش دادن مدال باکس ها یک دکمه ای رو قرار داده که با فشردن آن ، پنجره باز میشه ولی ممکنه که ما برای نمایش یک تصویر تبلیغاتی بخواهیم همین که لود صفحه کامل شد این باکس بصورت پاپ آپ اجرا بشه که برای اینکار از کد زیر درون تگ script استفاده کنید

اسکریپت کار :

<script>
    $(document).ready(function () {
        $('#myModal').modal('show');

    });
</script>

ادامه مطلب...

۱۷ شهریور ۹۵ ، ۱۴:۵۱ ۰ نظر

مهندس مهدی حسامی

آزمون آنلاین مهارت برنامه نویسی و طراحی وب

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

از جمله :

آزمون آنلاین HTML

آزمون آنلاین CSS

آزمون آنلاین JavaScript

آزمون آنلاین Bootstrap

آزمون آنلاین jQuery

آزمون آنلاین PHP

آزمون آنلاین SQL

آزمون آنلاین XML

W3Schools Quizzes

۱۶ شهریور ۹۵ ، ۱۹:۱۶ ۰ نظر

مهندس مهدی حسامی

ثابت کردن منوی بالا موقع اسکرول صفحه

برای ثابت نگه داشتن منو یا هر عنصری در زمان اسکرول صفحه می توانیم از رویداد اسکرول صفحه استفاده کنیم

یکی از رویدادهای قابل کنترل توسط جاوا اسکریپت و جی کوئری همین رویداد اسکرول هست ، یعنی زمانی که کاربر صفحه رو به بالا یا پائین اسکرول میکنه که در این لحظه رویداد scroll وارد عمل میشه و هر دستوری که ما درون فانکشن این رویداد بنویسیم اجرا خواهد شد.

ادامه مطلب...

۱۵ شهریور ۹۵ ، ۱۹:۳۳ ۰ نظر

مهندس مهدی حسامی

مهاجرت از HTML4 به HTML5

در این پست میخوام نحوه مهاجرت از html4 به html5 رو بدون از بین رفتن محتوا یا ساختار قبلیخدمتتون آموزش بدم

شاید فکر کنید که کار سختی در پیش دارید ولی اصلا این چنین نیست و شما خیلی راحت میتونید با تکنولوژی روز طراحی وب همگام شوید و به توصیه های کنسرسیوم جهانی وب عمل کنید پس این مطلب رو یاد بگیرید و در چند گام تمام فایل های اچ تی ام ال قبلی تون رو به html5 تبدیل کنید.

ادامه مطلب...

۱۵ شهریور ۹۵ ، ۱۵:۵۸ ۰ نظر

مهندس مهدی حسامی

چرا از جی کوئری استفاده کنیم؟

جی کوئری یک کتابخونه از جاوا اسکریپت هست و شاید بگید کتابخونه چیه، نگران نباشید همه چیزو خیلی ساده توضیح میدم

دوستان ما برای طراحی یک اپلیکیشن تحت وب نیاز به یادگیری زبانهای html , css , php داریم (البته میتونیم بجای php از زبانهای دیگه هم استفده کنیم) حالا اگه بخواهیم یکسری عناصر و رویدادها رو در سمت کلاینت یعنی توسط مرورگر کاربر کنترل و مدیریت کنیم و نیازی نباشه که پردازش توسط کامپیوتر سرور انجام بشه (مثلا وقتی کاربر روی یک دکمه در صفحه کلیک کرد یک پیاغام بلافاصله بهش نشون بدیم)در اینصورت علاوه بر سه زبان بالا باید یک زبان دیگه هم یاد بگیریم و اون کسی نیست جز زبان جاوا اسکریپت ، این زبان برنامه نویسی توسط مرورگرها تفسیر میشن بنابراین کدهایی که با زبان جاوا اسکرپیت نوشته میشن نیازی به پردازش در سمت سرور ندارند و مرورگر خودش کدها رو اجرا میکنه (مرورگرها قادرند زبانهای HTML و CSS و JAVASCRIPT رو پردازش کنند)
حالا که فهمیدیم جاوا اسکریپت چی هست و چرا استفاده میشه ، ممکنه بپرسید پس Jquery چیه ؟! نگران نباشید ، ادامه مطلب رو مطالعه بفرمائید

ادامه مطلب...

۱۵ شهریور ۹۵ ، ۱۳:۵۴ ۱ نظر

مهندس مهدی حسامی

نمایش تصویر لودینگ زمان ارسال فرم و قفل عناصر صفحه با جی کوئری

یکی از رویدادهایی که در صفحات وب اتفاق می افتد ، رویداد submit هست که در زمان ارسال فرم اتفاق می افتد و از لحظه فشرده شدن دکمه سابمیت فرم آغاز و تا اتمام ارسال کامل فرم به سمت سرور ادامه دارد ، لذا ما می توانیم یک تصویر لودینگ در صفحه قرار بدیم که خاصیت display آن برابر none باشه و در زمان ارسال فرم که رویداد submit اتفاق می افته display این تصویر رو در طول سابمت شدن فرم با استفاده از جاوا اسکریپت و جی کوئری نمایش دهیم:

که اگر برای مختصر نویسی از سینتکس جی کوئری استفاده کنید باید کتابخونه جی کوئری رو نیز دانلود و به صفحه تون لینک کنید که دقیقا به شکل زیر خواهد بود :

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Submit And Loading</title>
    <script src="js/jquery.min.js"></script>
    <style>
        .screen
        {
            display: none;
            width: 100%;
            height: 100%;
            position: fixed;
            top: 0;
            right: 0;
            z-index: 10;
            background:rgba(0,0,0,0.4);
        }
        .screen img
        {
            position: absolute;
            top: 50%;
            right: 49%;
            z-index: 100;
        }
    </style>
</head>
<body>
<div class="screen"><img src="images/loading.gif"></div>

<form action="" id="Form">

    <input type="submit" value="Submit">
</form>

<script>
    $(document).ready(function () {

        $("#Form").submit(function(){

            $(".screen").css('display','block');

        });

    });
</script>
</body>
</html>

جهت دانلود آخرین نسخه کتابخونه جی کوئری به سایت جی کوئری مراجعه کنید و پس از دانلود که یک فایل با پسوند js هست رو با تگ <script> در قسمت head صفحه مثل نمونه کد بالا به سند تون لینک کنید.

من در اینجا هر دو فایل رو (تصویر لودینگ و فایل جی کوئری) قرار میدم ولی سعی کنید جی کوئری رو از سایت اصلیش دانلود کنید

دریافت
حجم: 40.3 کیلوبایت
توضیحات: فایل جی کوئری و تصویر لودینگ

۱۴ شهریور ۹۵ ، ۱۶:۵۷ ۰ نظر

مهندس مهدی حسامی

رمزگذاری url برای چیست؟

همونطور که میدونید URL نام دیگر آدرس وب هست ، دقیقا مثل آدرس محل سکونت هر یک از ما در دنیای واقعی

پس هر وبسایتی یک آدرس اینترنتی داره که با عبارت URL شناخته میشه و هر URL هم شامل چند قسمت میشه که من فقط اشاره میکنم ، چون توی وبسایت های مختلف ، آموزش های زیادی در این خصوص وجود داره و نیازی به دوباره گویی نیست:

مثال : یک URL نمونه از وبلاگ من رو در نظر بگیرید

http://www.phpkar.blog.ir/posts/index.php

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

- نوع سرویس اینترنتی : که معمولا یکی از پروتکل های http یا https یا ftp و یا file هست

- پیشوند : که بصورت پیشفرض در پروتکل http بصورت www نوشته می شود

- دامنه سایت : عبارت جایگزین شماره آی پی سرور هست مثل phpkar.blog.ir

- شماره پورت هاست : که بصورت پیشفرض در پروتکل http برابر با 80 هست و می توان در مرورگر تایپ نکرد

- مسیر یا دایرکتوری : نام دایرکتوری یا پوشه که در صورت خالی گذاشتن به ریشه هاست اشاره میکنه

- نام فایل یا سند : نام سند یا فایلی که در نهایت باید از وبسرور دریافت شود

نکته ای که اینجا هست اینه که URLها فقط می تونن بصورت ASCII character از طریق اینترنت به سمت سرور ارسال بشن و اگر در آدرس یک سایت کاراکترهایی غیر از ASCII character وجود داشته باشه ، باید در زمان ارسال درخواست دریافت اون سایت توسط مرورگر این کاراکترها به این استاندارد تبدیل بشن که این عمل تبدیل رو خود مرورگر انجام میده و شما قرار نیست کاری انجام بدید و هدف از یادگیری این مطلب این هست که بدونید چرا بعضی موقع ها توی URL ها عبارتهای اجق وجق میبینید.

البته بعضی موقع ها هم نیاز پیدا می کنیم که از رشته های URL ارسال شده توسط مرورگر ، در سمت سرور یکسری عبارتهای کدشده توسط مرورگر رو تبدیل به حالت اولش کنیم که میتونیم خیلی راحت بوسیله یکسری توابع در php اینکار رو انجام بدیم ولی فعلا در این پست میخواهیم بگیم که در زمان ارسال چنین کاراکترهایی چه مکانیزم هایی اتفاق می افته

مثلا مرورگر بجای کاراکترهای غیر اسکی علامت % رو قرار میده و بجای هر فاصله یک علامت + قرار میده که برخی مرورگرها بجای + از عبارت 20% نیز استفاده میکنند که میتونید با جستجوی عبارت " کاراکترهای اسکی " در گوگل یا سایر موتورهای جستجو به این لیست دسترسی پیدا کنید.

امیدوارم براتون مفید بوده باشه

۱۴ شهریور ۹۵ ، ۱۵:۵۳ ۰ نظر

مهندس مهدی حسامی

چه چیزهای جدیدی به html5 اضافه شده است

در این پست میخوام برخی از ویژگی های جدید که در html5 وجود داره رو خدمتتون آموزش بدم ، پس با من همراه باشید

اولین چیزی که در html 5 بهینه شده ، سینتکس آسان و ساده شده تعریف نوع سند (DOCTYPE) هست که در اولین خط هر صفحه html قرار میگیره:

<!DOCTYPE html>

همچنین سینتکس تعریف Encoding صفحه هم خیلی ساده تر شده ، بصورت زیر :

<meta charset="UTF-8">

که یک نمونه اولیه سند HTML5 بصورت زیر نوشته میشه :

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title of the document</title>
</head>

<body>

</body>

</html>

ادامه مطلب...

۱۴ شهریور ۹۵ ، ۱۲:۵۸ ۰ نظر

مهندس مهدی حسامی

قبلی

۱ ۲ ۳ ۴ ۵ . . . ۹ ۱۰ ۱۱ ۱۲ ۱۳ ۱۴ ۱۵ . . . ۱۶ ۱۷ ۱۸

بعدی

آموزش php (وبلاگ یک پی اچ پی کار)

آموزش زبان برنامه نویسی php , html , css , تجربیات یک برنامه نویس

۱۴۲ مطلب توسط «مهندس مهدی حسامی» ثبت شده است

نمایش خودکار پاپ آپ بعد از بارگذاری صفحه با استفاده از جی کوئری بوت استراپ

آزمون آنلاین مهارت برنامه نویسی و طراحی وب

ثابت کردن منوی بالا موقع اسکرول صفحه

مهاجرت از HTML4 به HTML5

چرا از جی کوئری استفاده کنیم؟

نمایش تصویر لودینگ زمان ارسال فرم و قفل عناصر صفحه با جی کوئری

رمزگذاری url برای چیست؟

چه چیزهای جدیدی به html5 اضافه شده است

php

win

آموزش های عمومی و نکته های طراحی سایت

جاوا اسکریپت

کار در منزل

بوت استراپ

استارت آپ

مطالب علمی و پژوهشی

سئو

مقالات طراحی وب

لاراول