آموزش طراحی سایت-آموزش افزونه اسلایدر در جی کوئری

سلام بر دوستان عزیزم..

امروز با یک مقاله دیگه از سری مقاله های آموزش طراحی سایت همراه شما هستیم. مقاله امروز برای دوستانی کاربردیست که با جی کوئری آشنایی داشته باشند؛ چون قرار همراه با هم یکی از افزونه های (پلاگین های) جی کوئری تحت عنوان SlideBars رو یاد گرفته و بکار بگیریم..

افزونه Slidebars در jQuery برای اجرای سریع و سبک منوها و نوارهای باریک افقی و عمودی در وب سایت مورد استفاده قرار می گیرد. Slidebars 2 دارای ویژگی های هیجان انگیز و پرکاربردی است.

برای استفاده از این افزونه لازم است پیش از هر کاری فایل های css و js مورد نیاز را به پروژه اضافه کنیم :

< link href="css/slidebars.css" rel="stylesheet" >
< script src="js/jquery.js" >< /script >
< script src="js/slidebars.js" >< /script >

 

در بخش body در صفحه Html، صفحه را به دو بخش محتوا اصلی و منو تقسیم می کنیم و محتوا دلخواه را در آنها قرار می دهیم :

< div canvas="container" >
 < h1 >welcome to my website< /h1 >
< p > introduction of slidebars.js< /p >
< p >
< button class="js-open-left-slidebar" >open left< /button >
< button class="js-close-left-slidebar" >CLOSE left< /button >
< button class="js-toggle-left-slidebar" >toggle left< /button >
< /p >
< /div >
< div off-canvas="slidebar-1 left shift" >
< p >menu left< /p >
< /div >

 

جهت و مدل باز و بسته شدن منو، با استفاده از پارامتر off-canvas مشخص می شود. قطعه کد جی کوئری را برای فراخوانی افزونه اسلایدر در جی کوئری، بصورت زیر می نویسیم :

$ (document).ready(function(){
var controller = new slidebars();
controller.init();

 

بعد از ایجاد یک نمونه جدید از شی، برای رویداد کلیک روی دکمه منو، متد باز کردن منو را اجرا می کنیم :

$ ('.js-open-left-slidebar').on('click',function (event) {
event.stopPropagation();
controller.open('slidebar-1');
})

 

با کلیک روی دکمه دارای کلاس مشخص، متد بستن منو را فراخوانی می کنیم :

$('.js-close-left-slidebar').on('click',function (event) {
event.stopPropagation();
controller.close('slidebar-1');
})

 

متد toggle، دو متد close و open را با یکدیگر اجرا می کند :

$('.js-toggle-left-slidebar').on('click',function (event) {
event.stopPropagation();
controller.toggle('slidebar-1');
})
//events

 

رویدادها

رویدادها برای ایجاد نمونه جدید، اعمال css روی منو که شامل shift و overlay ،push و reveal است، استفاده می شود و مدل رفتاری منو در زمان باز و بسته شدن را نشان می دهد. رویداد باز و بسته شدن منو نیز از جمله رویدادهای این افزونه است.

$ ( controller.events ).on( 'init', function () {
console.log( 'Init event' );
} );
$ (controller.events).on('css',function () {
console.log('css')
})
$ (controller.events).on('exit',function () {
console.log('exit')
})
$ (controller.events).on('opening',function (event,id) {
console.log('opening'+id);
})
$ (controller.events).on('opened',function (event,id) {
console.log('opened'+id);
})
$ (controller.events).on('closing',function (event,id) {
console.log('closing'+id);
})
$ (controller.events).on('closed',function (event,id) {
console.log('closed'+id);
})   

 

با آموزش های دیگر در زمینه آموزش طراحی سایت همراه ما باشید..

آموزش طراحی سایت-آموزش متد ریاضی در جاوا اسکریپت

امروز با یک مقاله جدید از سری مقاله های آموزش طراحی سایت همراه شما هستیم. در مقاله امروز قرار با متدهای ریاضی در جاوا اسکریپت آشنا شده و همراه با هم این متدها رو پیاده سازی کنیم..

شی math به شما این امکان را می دهد که روی اعداد عملیات ریاضی انجام دهید. شی math امکان انجام عملیات محاسباتی و ریاضی را برای برنامه نویس فراهم می کند. شی بیان شده دربردانده ی مجموعه متد ها و توابع ریاضی می باشد. یکی از کاربردهای معمول شی math در زبان جاوا اسکریپت ایجاد یک عدد تصادفی است.

نمونه 1 :

    function myFunction() {
        document.getElementById("demo").innerHTML = Math.random();
    }

شی Math خود دارای سازنده (constructor) نیست. لازم نیست هیچ متدی ابتدا یک شی math ایجاد کند.

 

توابع ()Math.min و ()Math.max

متدهای ()Math.min و ()Math.max را می توان برای بدست آوردن مقدار بیشینه (بزرگترین عددی که به عنوان پارامتر ارسال شده) و کمینه (کوچکترین عددی که به عنوان پارامتر ارسال شده) از میان مجموعه ای از آرگومان ها بکار برد.

نمونه 2 :

 function myFunction() {
document.getElementById("demo") =
 Math.min(0, 150, -2230, 20, -8, -200);
 }

نمونه 3 :

function myFunction() {
   document.getElementById("demo") =
Math.max(0, 150, 30, 20, -8, -200);
}

 

تابع ()Math.random

یک عدد تصادفی بین 0 و 1 را به عنوان خروجی (output) برمی گرداند.

نمونه 4 :

Math.random();              // returns a random number‎

تابع ()math.random همیشه عددی کوچکتر از 1 بر می گرداند.

 

تابع ()Math.round

یک عدد را به نزدیکترین عدد صحیح (integer) گرد می کند(به عنوان مثال عدد x را گرد کرده و به نزدیکترین عدد صحیح به آن تبدیل می کند).

نمونه 5 :

 

function myFunction() {
    document.getElementById("demo") = Math.round(4.4);
    document.getElementById("demo1") = Math.round(4.7);

}

 

تابع ()Math.ceil

در آموزش طراحی سایت می آموزید که این متد یک عدد را به بالا گرد کرده و نزدیکترین عدد صحیح (integer) به آن را برمی گرداند.

نمونه 6 :

function myFunction() {
  document.getElementById("demo") = Math.round(4.4);
}

توابع ()Math.floor و ()Math.random را می توان به طور همزمان برای برگرداندن یک عدد تصادفی بین 0 و 10 مورد استفاده قرار داد.

 

تابع ()Math.floor

یک عدد را به پایین گرده کرده و نزدیکترین عدد صحیح به آن را برمی گرداند.

نمونه 7 :

function myFunction() {
document.getElementById("demo") = Math.floor(4.7);
}

توابع ()Math.floor و ()Math.random را می توان به طور همزمان برای برگرداندن یک عدد تصادفی بین 0 و 10 مورد استفاده قرار داد.

function myFunction() {
    document.getElementById("demo") =
    Math.floor(Math.random() * 11);
}

 

ثابت های ریاضی

جاوا اسکریپت در کل 8 ثابت ریاضی دارد که با استفاده شی math می توان به آن ها دسترسی پیدا کرد.

function myFunction() {
    document.getElementById("demo") =
    Math.E + "
" +
    Math.PI + "
" +
    Math.SQRT2 + "
" +
    Math.SQRT1_2 + "
" +
    Math.LN2 + "
" +
    Math.LN10 + "
" +
    Math.LOG2E + "
" +
    Math.LOG10E + "
"
}

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

1. abs(x) =

قدر مطلق عدد x را برمی گرداند.

2. acos(x) =

آرک کوسینوس عدد x را بر حسب رادیان برمی گرداند.

3. asin(x) =

آرک سینوس عدد x را بر حسب رادیان برمی گرداند.

4. atan(x) =

آرک تانژانت عدد x را به صورت مقدار عددی بین رادیان های clip_image002 - و clip_image002[1] برمی گرداند.

5. atan2(y,x) =

آرک تانژانت خارج قسمت آرگومان های عدد x را برمی گرداند یا به عبارت ساده تر این متد آرک تانژانت عدد x را بر می گرداند.

6. ceil(x) =

عدد x رو به بالا گرد کرده و نزدیک ترین عدد صحیح (integer) به آن را بر می گرداند.

7. cos(x) =

کسینوس x را بر حسب رادیان برمی گرداند.

8. exp(x) =

مقدار عدد Ex را برمی گرداند.

9. floor(x) =

مقدار x را رو به پایین گرد کرده و نزدیک ترین عدد صحیح به آن را بر می گرداند.

10. log(x) =

لگاریتم طبیعی x را بر مبنای عدد e بر می گرداند.

11. max(x,y,z,...,n) =

بزرگترین عدد که به عنوان آرگومان ارسال شده را برمی گرداند.

12. min(x,y,z,...,n) =

کوچکترین عدد که به عنوان پارامتر پاس داده شده را بر می گرداند.

13. pow(x,y) =

مقدار x را به توان y رسانده و حاصل آن را برمی گرداند.

14. ()random =

یک عدد تصادفی بین 0 و 1 را به عنوان خروجی برمی گرداند.

15. round(x) =

مقدار x را به نزدیک ترین عدد صحیح به آن گرد می کند.

16. sin(x) =

مقدار سینوس x را بر حسب رادیان برمی گرداند.

17. sqrt(x) =

جذر یا ریشه ی دوم عدد x را برمی گرداند.

18. tan(x) =

تانژانت یک زاویه را برمی گرداند / مقدار تانژانت x را بازمی گرداند.

 

در روزهای آتی با مقاله دیگه ای از آموزش جاوا اسکریپت با شما خواهم بود.

آموزش ASP.NET Core-آموزش ساخت پروژه در ASP.NET Core

​تصمیم گرفتم آموزش ASP.NET COre امروز رو با ساخت پروژه در ASP.NET Core MVC شروع کنیم.

امروز میخوایم راجع به ساخت پروژه در ASP.NET Core MVC و اضافه کردن کنترلر به پروژه با همدیگه صحبت کنیم.

پیش از هر چیزی باید ویژوال استودیو رو بر روی سیستم خودتون نصب کنید و برای نصب ویژوال با ورژن های بالاتر از 2017 باید دو گزینه زیر رو انتخاب کنید :

• ASP.NET and web development (under Web & Cloud)
• .NET Core cross-platform development (under Other Toolsets)

پس از آن باید یک برنامه تحت وب ایجاد کنید که برای اینکار باید مسیر زیر را طی کنید :

​

 

برای ساخت پروژه در ASP.NET Core MVC، بعد از باز شدن کامل پنجره New Project در پنل سمت چپ گزینه Net Core را انتخاب می کنیم، در پنل وسط تب (ASP.NET Core Web Application (.NET Core انتخاب می کنیم و نام پروژه را MvcMovie می گذاریم. بعد از باز شدن پنچره New ASP.NET Core Web Application (.NET Core) - MvcMovie گزینه Web Application را انتخاب کنید بگونه ای که حالت پیش فرض No Authentication باشد.

 

​

 

ویژوال استودیو از یک قالب پیش فرض برای پروژه های MVC استفاده می کند. شما با وارد کردن یک نام پروژه و انتخاب چند گزینه یک برنامه کاری واقعی دارید. با استفاده از کلید F5 یا Ctrl+F5 می توانید پروژه ساخته شده را اجرا کنید.

F5 = Debug Mode     &     Ctrl+F5 = Non-Debug Mode

 

​

 

با استفاده از کلید Ctrl+F5 می توانید بدون دیباگ کردن، پروژه را اجرا کرده و با تغییر در کد ها، بدون نیاز به اجرا میتوانید با رفرش کردن مروگر تغییرات را ببینید.

 

​

 

قالب پیش فرض به شما لینک های Home,Contact,About را می دهد. (Model-View-Controller (MVC الگوی معماری این برنامه را به سه قسمت اصلی تقسیم می کند :

1. Model
2. View
3. Controller

فریم ورک MVC در آموزش ASP.NET Core MVC

فریمورک MVC که مخفف Model-View-Controllerاست، یک قالب معماری است که برنامه را از نظر منطقی به سه کامپوننت اصلی مدل (Model)، ویو (View) و کنترلر (Controler) تقسیم می کند. هر یک از این کامپوننت ها برای مدیریت جنبه خاصی از توسعه یک برنامه ساخته می شود. MVC منطق تجاری و لایه نمایش را از یکدیگر جدا می کند. این معماری برای رابط های کاربری گرافیکی قابل اجرا در دسکتاپ استفاده می شد، اما امروزه هم برای طراحی برنامه های تحت وب و هم برنامه های موبایل استفاده می شود.

تاریخچه MVC

معماری MVC برای اولین بار در سال 1979 مورد بحث قرار گرفت. پس از آن معماری MVC در سال 1987 در زبان برنامه نویسی Smalltalkظهور کرد و در سال 1988 بعنوان یک مفهوم عمومی پذیرفته شد. در مدت اخیر نیز قالب MVC در برنامه های مدرن تحت وب بصورت گسترده مورد استفاده قرار گرفته است.

ویژگی های MVC

• فریمورکی با قابلیت تست، نصب و توسعه پذیری بالاست.
• امکان کنترل کامل HTMLرا علاوه بر URLها برای شما فراهم می کند.
• قدرت نفوذ در مشخصه های موجود ارائه شده توسط ASP.NET ، JSP ، Django و ... را داراست.
• تفکیک منطق برنامه بصورت آشکار : مدل (Model) ، ویو (View) و کنترلر (Controler). تفکیک وظایف برنامه مانند : منطق تجاری، منطق UIو منطق ورودی.
• آدرس دهی به URLبرای URLهای سازگار با سئو.
• قابلیت پشتیبانی برای (Test Driven Development (TDD

معماری MVCدر ASP.NET

​

 

سه کامپوننت مهم MVC به شرح زیر هستند :

مدل (Model) : مدل تمامی داده ها و منطق مربوط به آنها را شامل می شود.

ویو (View) : اطلاعات را به کاربر نمایش می دهد یا تعامل کاربر با سیستم را مدیریت می کند.

کنترلر (Controller) : رابط کاربری میان کامپوننت های View و Model است.

 

ویو (View) :

ویو بخشی از یک برنامه است که مسئولیت نمایش اطلاعات را بعهده دارد. ویوها بوسیله داده های جمع آوری شده از داده های مدل ایجاد می شوند. یک ویو برای دریافت اطلاعات به مدل درخواست می دهد. ویو همینطور داده های مربوط به چت ها، دیاگرام ها و جدول را نیز نشان می دهد. برای مثال، هر ویو تمامی کامپوننت های UI همچون Text Box، Drop Down و ... را شامل می شود.

 

کنترلر (Controller) :

کنترلر بخشی از یک برنامه است که تعامل کاربر با برنامه را مدیریت می کند. کنترلر، ورودی های کیبورد و موس را تفسیر کرده، و به مدل و ویو اطلاع رسانی می کند تا تغییرات را بصورت مناسب اعمال کند. کنترلر دستورات را به مدل می فرستد تا وضعیت خود را بروزرسانی کند (برای مثال ذخیره یک مستند خاص). کنترلر همینطور دستورات را به ویو مربوطه ارسال می کند تا نمایش ویو را تغییر دهد (برای مثال جابجایی یک مستند خاص).

 

مدل (Model) :

داده ها و منطق مربوط به آنها در کامپوننت مدل ذخیره می شود. این کامپوننت، داده هایی که در میان کامپوننت های کنترلر یا هر منطق تجاری دیگری انتقال داده می شوند را نمایش می دهد. برای مثال، یک آبجکت کنترلر اطلاعات کاربر را از پایگاه داده بازیابی و آن را دستکاری کرده و دوباره به پایگاه داده می فرستد یا آن را برای انتقال داده های یکسان بکار می گیرد.

کامپوننت مدل به درخواست های فرستاده شده از ویو (View) و همینطور دستورات کنترلر (Controller) پاسخ می دهد تا خود را بروزرسانی کند. این بخش همینطور پایین ترین سطح از قالب است که مسئول حفظ و نگهداری داده هاست.

 

مثالی جالب از MVC :

حال بیایید به مصداقی از قالب MVC که در زندگی روزمره با آن مواجه هستیم، بپردازیم :

تصور کنید برای صرف غذا به رستوران رفته اید. در این شرایط، شما به آشپزخانه رستوران نمی روید تا غذا مورد نظر خود را آماده کنید، بلکه منتظر آمدن گارسون می مانید تا غذا خود را سفارش دهید.

• گارسون به نزد شما می آید و شما سفارش خود را ثبت می کنید. گارسون شما را نمی شناسد، تنها جزئیات سفارش غذا شما را ثبت می کند.
• سپس، گارسون به آشپزخانه می رود؛ اما گارسون غذا را برای شما آماده نمی کند.
• پس از اینکه گارسون سفارش شما را بهمراه شماره میز به آشپز تحویل داد، آشپز غذا را برای شما آماده می کند.
• آشپز از مواد اولیه برای طبخ غذا شما استفاده می کند. تصور کنید شما یک ساندویچ سبزیجات سفارش داده اید، پس آشپز مواد مورد نیاز برای غذا شما را از یخچال تهیه می کند.
• سرانجام آشپز غذا را به گارسون تحویل می دهد و این وظیفه گارسون است که غذا را به بیرون از آشپزخانه منتقل کند.
• حال گارسون می داند که شما چه غذایی را سفارش داده اید و این غذا چطور سرو می شود.

 

کامپوننت های MVC در این مثال به شرح زیر هستند :

View = You

Controller = Waiter

Model = Cook

Data = Refrigerator

فریمورک های معمول MVC در وب

برخی فریمورک های معمول در MVC عبارتند از :

• Ruby on Rails
• Django
• CakePHP
• Yii
• CherryPy
• Spring MVC
• Catalyst
• Rails
• Zend Framework
• CodeIgniter
• Laravel
• Fuel PHP
• Symphony

مزایا فریم ورک MVCدر Asp.NET Core

• حفظ و نگهداری کدها و همینطور توسع و رشد آنها آسان است.
• کامپوننت مدل در MVCرا می توان بصورت مجزا از کاربر تست کرد.
• پشتیبانی آن برای نمونه کلاینت های جدید آسانتر است.
• توسعه کامپوننت های مختلف می تواند بصورت موازی انجام شود.
• فریمورک MVC با تقسیم برنامه به سه واحد – Model, View, Controller – به شما کمک می کند که پیچیدگی برنامه را کاهش دهید.
• این فریمورک تنها از یک قالب Front Controller که درخواست های یک برنامه تحت وب را در یک کنترلر مجزا پردازش می کند استفاده می کند.
• بهترین پشتیبانی را برای Test-Driven Development ارائه می دهد.
• برای برنامه های تحت وبی که توسط تیم های بزرگی از طراحان و توسعه دهندگان وب پشتیبانی می شوند، عملکرد خوبی را از خود نشان می دهند.
• تفکیک مسئولیت ها در این فریمورک بخوبی انجام می شود.
• با فرایند بهینه سازی موتور جستجوگر (سئو) سازگار است.
• تمامی کلاس ها و آبجکت ها مستقل از یکدیگر هستند و می توانند بصورت مجزا تست شوند.
• فریمورک MVC دسته بندی منطقی فعالیت های مرتبط بهم در یک کنترلر را امکانپذیر می سازد.

در یک برنامه MVC نمایش(VIew) ها فقط اطلاعات را نمایش می دهند اما کنترلر(controller ) در تعامل با کاربر می باشد و به ورودی های کاربر واکنش مناسب می دهد. در پنجره Solution Explorer بر روی فولدر Controller راست کلیک کرده و AddNew Item را انتخاب می کنیم.

 

​

 

در پنل سمت چپ گزینه Web را انتخاب کرده و در پنل وسط گزینه MVC Controller Class را انتخاب می کنیم و نامش را HelloWorldController می گذاریم.

 

​

 

می توانید کدهای زیر را کپی کنید :

using Microsoft.AspNetCore.Mvc;
using System.Text.Encodings.Web;
namespace MvcMovie.Controllers
{
public class HelloWorldController : Controller
{
// 
// GET: /HelloWorld/
public string Index()
{
return "This is my default action...";
}
// 
// GET: /HelloWorld/Welcome/ 
public string Welcome()
{
return "This is the Welcome action method...";
}
}
}

 

 

هر متد (public) در کنترلر (controller ) را می توان به عنوان (HTTP endpoint)خواند. در مثال بالا هر دو متد یک رشته(string) بر می گردانند.HTTP endpoint یک URL قابل جستجو در برنامه وب است مانند: http://localhost:1234/HelloWorld و از پروتکل HTTP استفاده می کند.هر دو متد ما با استفاده از HTTP GET فراخوانی شده اند. برنامه را با استفاده از Ctrl+F5 (non-debug mode) اجرا می کنیم و در آخر مسیر URL کلمه HelloWorld را اضافه می کنیم. متد Index یک رشته(string) بر می گرداند.

 

​

 

معماری MVC کنترلر را بسته به نوع ورودی URL فراخوانی میکند(به همراه اکشن مورد نظر ). حالت پیش فرض URL routing logic که توسط MVC استفاده می شود یک فرمت به شکل زیر است :

/[Controller]/[ActionName]/[Parameters]

فرمت Routing شما درون فایل Startup.cs قرار دارد و پیش فرض به شکل زیر است.

app.UseMvc(routes =>
{
routes.MapRoute(
name: "default",
template: "{controller=Home}/{action=Index}/{id?}");
});

 

اولین بخش URL، کلاس کنترل را برای اجرا تعیین می کند. بنابراین localhost:xxxx/HelloWorld نقشه رسیدن به کلاس HelloWorldController می باشد. دومین بخش URL، تعیین اکشن(action ) در کلاس کنترل می باشد. بنابراین localhost:xxxx/HelloWorld/Index باعث می شود اکشن Index از کلاس HelloWorldController اجرا شود. حال درمرورگر آدرسhttp://localhost:xxxx/HelloWorld/Welcome وارد می کنیم.متد Welcome اجرا می شود و رشته "This is the Welcome action method..." بر می گرداند. برای این URL کنترلر(HelloWorld) و اکشن (Welcome) می باشد.

 

​

 

با تغییر کد می توانیم به صورت پارامتر از URL به کنترلر دیتا بفرستیم. برای مثال /HelloWorld/Welcome?name=Rick&numtimes=4. اکشن Welcome را به صورت زیر تغییر می دهیم.

// GET: /HelloWorld/Welcome/ 
// Requires using System.Text.Encodings.Web;
public string Welcome(string name, int numTimes = 1)
{
return HtmlEncoder.Default.Encode($"Hello {name}, NumTimes is: {numTimes}");
}

 

توجه داشته باشید که برای نشان دادن این ویژگی سی شارپ به طور اختیاری به پارامتر numTimes مقدار پیش فرض دادیم. از کد HtmlEncoder.Default.Encode استفاده می کنیم برای محافظت برنامه از ورودی های مخرب (یعنی جاوااسکریپت) برنامه را اجرا کرده و به آدرس زیر می رویم:

http://localhost:xxxx/HelloWorld/Welcome?name=Rick&numtimes=4

به جای XXXX پورت سیستم خود را وارد کنید. می توانید از پارامتر های دیگه ای هم به صورت دلخواه استفاده کنید. بخش MVC Model Binding به صورت خودکار پارامتر های نام گذاری شده از query string در URL به پارامتر های اکشن خود انتقال می دهد.

 

​

 

در عکس بالا بخش [Parameters] URL هنوز استفاده نشده.( name) و (numTimes) پارامترها منقل می شوند به query string. علامت سوال (؟) در آدرس بالا یک جدا کننده می باشد و query string آن را دنبال می کند. & کاراکتر های query string را جدا می کند. اکشن Welcome را به صورت زیر تغییر می دهیم.

public string Welcome(string name, int ID = 1)
{
return HtmlEncoder.Default.Encode($"Hello {name}, ID: {ID}");
}

برنامه را اجرا کرده و به آدرس زیر می رویم:

http://localhost:xxx/HelloWorld/Welcome/3?name=Rick

 

​

 

این بار از بخش سوم [Parameters] URL تحت عنوان ID استفاده می کنیم. اکشن (Welcome) شامل یک پارامتر ID است که الگو URL را در MapRoute دنبال می کند. اگر به دنبال ID علامت سوال (؟) بزاریم به این معنی می شود که پارماتر ID اختیاری است.

app.UseMvc(routes =>
{
routes.MapRoute(
name: "default",
template: "{controller=Home}/{action=Index}/{id?}");
});

 

در این مثال کنترلر در واقع بخشی از "VC" از "MVC" انجام داده است یعنی نمایش (view ) و کنترلر(controller ). کنترلر به طور مستقیم HTML بر می گرداند.به طور کلی شما نمی خواهید که کنترلر HTML بر گرداند زیرا برا نوشتن کد و نگهداری بسیار دشوار می شود. در عوض، شما معمولا از فایل قالب (template) جداگانه Razor برای کمک به تولید HTML استفاده می کنید.

 

در آموزش بعدی از مجموعه آموزش های ASP.NET Core این کار را انجام می دهید.

​

آموزش Jquery-مثال عملی

سلام عزیزان ... با آموزش JQuery از دوره آموزش طراحی سایت همراه باشید

آموزش مثال Hello, world در Jquery

در مبحث قبلی با نحوه ی اضافه کردن jQuery به صفحه ی وب برای بهره وری از امکانات فوق العاده زیاد آن آشنا شدید. پیش از شروع به استفاده از کتابخانه ی jQuery بایستی با مفاهیم پایه ای آن آشنایی پیدا کنید و نظر خود را به مثال ساده ی زیر جلب نمایید:

نمونه یک

 

Hello, world!

 

 

$("#divTest1").text("Hello, world!");

 

همان طور که مشاهده می کنید، یک تگ با شناسه ی "divTest1" داریم. از علامت $ که به مثابه ی یک میانبر برای دسترسی به المان های HTML ایفای نقش می کند، استفاده می کنیم. بنابراین با استفاده از این علامت تمامی المان های HTML با شناسه ی "divTest1" را انتخاب کرده و مقدار "Hello, world!" را در آن قرار می دهیم (text آن را با رشته ی "Hello, world!" تنظیم می کنیم).
حتی چاپ کردن همین متن ساده در جاوا اسکریپت به کدنویسی بسیار بیشتر نیاز داشت:

نمونه دو

 

Hello, world!

 

 

document.getElementById("divTest2") = "Hello, world!";

 

اگر المان HTML فقط یک class داشت و از ID نیز برخوردار نبود، این کد به مراتب طولانی تر می شد.
به طور معمول، باید صبر کنید تا صفحه ی وب وارد مرحله یا وضعیت READY شود و سپس اقدام به دستکاری محتویات آن نمایید. مثال های ساده ی بالا (و همچنین تعدادی از عملیات پیچیده ی دیگر) در بیشتر مرورگرها، پیش از آماده شدن صفحه نیز قابل اجرا هستند. اما این امر در مورد تمامی عملیات با jQuery (پیش از بارگذاری کامل صفحه و آماده شدن آن) امکان پذیر نیست. خوشبختانه، jQuery اجرای این عملیات را نیز بسیار آسان ساخته است.

 

 

آموزش طراحی سایت-آموزش متد های اعداد جاوااسکریپت

​

سلام بر دوستان عزیزم..

امروز با بخش دیگری از دوره آموزش طراحی سایت تحت عنوان آموزش متد های اعداد در جاوااسکریپت همراه شما هستیم..

آموزش طراحی سایت : متدهای سراسری (global methods)

توابع سراسری (global functions) را می توان برای تمامی نوع داده های (data type) جاوااسکریپت بکار برد. جدول های زیر پرکاربرد ترین متدهایی که حین کار با اعداد در زبان جاوا اسکریپت کارایی دارند را با ذکر کاربرد آن فهرست می کند.

 

​

متد های مربوط به number، متدهایی هستند که می توان برای اعداد از آن ها استفاده کرد.

 

​

متد toString()

این متد یک عدد یا متغیر عددی را به عنوان رشته ی متنی بر می گرداند. متدهای مربوط به شی number را می توان برای انواع عدد بکار گرفت اعم از لفظ ها (literals)، متغیرهای عددی (variable)، عبارت های عددی (expression).

مثال یک :

    var x = 123;
    document.getElementById("demo").innerHTML =
        x.toString() + "< br>" +
       (123).toString() + "< br>" +
       (100 + 23).toS

 

متد toExponential()

رشته ی با اعداد گرد شده برمی گرداند که با قرارداد نمایی (exponential notation) نوشته شده باشد. این تابع در حقیقت یک متغیر عددی را به قرارداد نمایی (exponential notation) تبدیل می کند. یک پارامتر ورودی تعداد کاراکترهای بعد از ممیز اعشار را تعیین می کند.

مثال دو :

var x = 9.656;
document.getElementById("demo") =
x.toExponential() + "< br>" +
x.toExponential(2) + "< br>" +
 x.toExponential(4) + "< br>" +
x.toExponential(6);

پارامتر اختیاری است. در صورت مشخص نکردن پارامتر، جاوا اسکریپت عدد را گرد نمی کند.

 

متد toFixed()

رشته عددی با تعداد اعشار مشخص شده برمی گرداند.

مثال سه :

var x = 9.656;
document.getElementById("demo") =
x.toFixed(0) + "< br>" +
x.toFixed(2) + "< br>" +
x.toFixed(4) + "< br>" +
x.toFixed(6);

 

متد toPrecision()

یک رشته ی عددی با طول مشخص (تعداد کاراکتر معین) برمی گرداند.

مثال چهار :

var x = 9.656;
document.getElementById("demo").innerHTML =
x.toPrecision() + "<br>" +
x.toPrecision(2) + "<br>" +
x.toPrecision(4) + "<br>" +
x.toPrecision(6);

 

آموزش طراحی سایت : تبدیل متغیر به عدد

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

The Number() method
The parseInt() method
The parseFloat() method

توابع بالا متدهای مختص شی number نیستند (number methods)، بلکه متدهای سراسری یا global زبان جاوا اسکریپت محسوب می شوند.

 

متد Number()

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

مثال پنج :

document.getElementById("demo") =
Number(true) + "< br>" +
Number(false) + "< br>" +
Number(new Date()) + "< br>" +
Number("  10") + "< br>" +
Number("10  ") + "< br>" +
Number("10 6");   

 

متد parseInt()

تابع parseInt() یک رشته را تجزیه (parse) کرده و یک عدد صحیح برمی گرداند. استفاده از فاصله امکان پذیر می باشد. توجه داشته باشید که تنها عدد اول برگردانده می شود.

مثال شش :

document.getElementById("demo") =
parseInt("10") + "< br>" +
parseInt("10.33") + "< br>" +
parseInt("10 6") + "< br>" +
parseInt("10 years") + "< br>" +
parseInt("years 10"); 

چنانچه امکان تبدیل عدد مورد نظر وجود نداشته باشد، در جواب (NaN (not a number برگردانده می شود.

 

متد parseFloat()

تابع parseFloat() یک رشته را تجزیه (parse) کرده و در جواب یک عدد برمی گرداند. استفاده از فاصله مجاز می باشد. تنها اولین عدد برگردانده می شود.

مثال هفت :

document.getElementById("demo") =
parseFloat("10") + "< br>" +
parseFloat("10.33") + "< br>" +
parseFloat("10 6") + "< br>" +
parseFloat("10 years") + "< br>" +
parseFloat("years 10");

در صورت عدم امکان تبدیل عدد، (NaN (not a number برگردانده می شود.

 

متد valueOf()

یک متغیر عددی را به صورت های مختلف عدد (لفظ / literal، متغیر، عبارت عددی) برمی گرداند.

مثال هشت :

var x = 123;
document.getElementById("demo") =
x.valueOf() + "< br>" +
(123).valueOf() + "< br>" +
(100 + 23).valueOf();

در جاوا اسکریپت، یک عدد می تواند یک مقدار اولیه (typeof = number) یا یک شی (typeof = object) باشد. متد ValueOf() داخل زبان جاوا اسکریپت به منظور تبدیل اشیا یا آیجکت number به مقادیر اولیه بکار گرفته می شود، هیچ لزومی ندارد از آن در کد خود استفاده کنید.

 

با آموزش های دیگر از آموزش جاوا اسکریپت در آموزش طراحی سایت با ما همراه باشید....

​

آموزش طراحی سایت-رنگ و گرادینت در CSS3

​

  

سلام دوستان...

با آموزش CSS3 از دوره آموزش طراحی سایت همراه ما باشید

 

آموزش رنگها در CSS3

در CSS از اسم رنگ دلخواه, مقدار شانزده شانزدهی (hexadecimal) و RGB (red blue green) پشتیبانی می کند . اما در CSS3 خواص و امکانات نوینی ارائه گردیده که به شرح زیر می باشد :

• رنگ های RGBA (red, blue, green و alpha)

• رنگ های HSL (hue-saturation-lightness / اشباع-روشنایی یا سبکی رنگ)

• رنگ های HSLA (اشباع-روشنایی یا سبکی رنگی با کانال آلفا)

• درجه ی شفافیت و کدری Opacity

 

رنگ های RGBA شامل (red, blue, green و alpha)

 

رنگ های RGBA در واقع همان red, blue, green هستند که در CSS3 با افزوده شدن کانال آلفا (Alpha channel) به آن توسعه داده شده و قابلیت بیشتری پیدا کرده است . این قابلیت جدید به شما امکان می دهد درجه یا میزان کدری و شفافیت (opacity) را تعیین کنید . مقدار رنگ های RGBA باrgba(red, green, blue, alpha) تعریف و مقداردهی می شوند . پارامتر alpha عددی است بین 0.0 (کاملاً شفاف) و 1.0 (کاملاً کدر) .

​

 

مثال زیر رنگ های RGBA متفاوتی تعریف می کند :

p1 {background-color: rgba(255, 0, 0, 0.3);} /* red with opacity */

#p2 {background-color: rgba(0, 255, 0, 0.3);} /* green with opacity */

#p3 {background-color: rgba(0, 0, 255, 0.3);} /* blue with opacity */

 

آموزش طراحی سایت : رنگ های HSL

اچ HSL مخفف یا سرنام Hue, Saturation و Lightness می باشد .

یک مقدار HSLبا hsl(hue, saturation, lightness) مقدار دهی و مشخص می شود .

مقدار HUE یک درجه روی گردونه ی رنگ آمیزی / color wheel (از 0 تا 360) می باشد :

• 0 (یا 360) کاملاً قرمز است

• 120 سبز محسوب می شود

• 240 آبی محسوب می شود/li>

 

مفهوم Saturation یک مقدار درصدی است : %100 یعنی آن رنگ در قوی ترین و پررنگ ترین حالت آن

مفهوم Lightness نیز یک درصد است : %0 تیره و %100 سفید است .

​

 

مثال زیر رنگ های مختلف HSL را مقداردهی می کند :

#p1 {background-color: hsl(120, 100%, 50%);} /* green */

#p2 {background-color: hsl(120, 100%, 75%);} /* light green */

#p3 {background-color: hsl(120, 100%, 25%);} /* dark green */

#p4 {background-color: hsl(120, 60%, 70%);} /* pastel green */

 

رنگ های HSLA (اشباع-روشنایی یا سبکی رنگی با کانال آلفا)

مقادیر HSLA در حقیقت همان مقادیر رنگ های HSL هستند که کانال الفا به آن ها افزوده شده است که درجه ی کدری و روشنایی (opacity) رنگ را تنظیم می کند . مقدار رنگ های HSLA با hsla(hue, saturation, lightness, alpha) مشخص می شود, پارامتر آلفا میزان کدری و شفافیت رنگ را تنظیم می کند . پارامتر الفا عددی است بین 0.0 (کاملاً شفاف) و 1.0 (کاملاً کدر و تیره) .

​

 

نمونه ی زیر رنگ های HSLA متفاوتی را تعریف و مقداردهی می کند :

#p1 {background-color: hsla(120, 100%, 50%, 0.3);} /* green with opacity */

#p2 {background-color: hsla(120, 100%, 75%, 0.3);} /* light green with opacity */

#p3 {background-color: hsla(120, 100%, 25%, 0.3);} /* dark green with opacity */

#p4 {background-color: hsla(120, 60%, 70%, 0.3);} /* pastel green with opacity */

 

مفهوم Opacity (درجه ی تیرگی و شفافیت)

خاصیت Opacity درجه ی تیرگی و شفافیت را ویژه ی یک مقدار RGB مشخص, مقداردهی می کند . مقدار خاصیت opacity باید عدد یا مقداری بین 0.0 (کاملاً شفاف) و 1.0 (کاملاً کدر) باشد .

​

 

همان طور که مشاهده می کنید نوشته ی درون رنگ نیز همراه خود رنگ کدر شده است . مثال زیر مقادیر RGB مختلفی را با opacity نشان می دهد :

#p1 {background-color:rgb(255,0,0);opacity:0.6;} /* red with opacity */

#p2 {background-color:rgb(0,255,0);opacity:0.6;} /* green with opacity */

#p3 {background-color:rgb(0,0,255);opacity:0.6;} /* blue with opacity */

 

آموزش گرادینت در css

در CSS از اسم رنگ دلخواه, مقدار شانزده شانزدهی (hexadecimal) و RGB (red blue green) پشتیبانی می کند .

اما در CSS3 خواص و امکانات نوینی ارائه گردیده که به شرح زیر می باشد :

• رنگ های RGBA (red, blue, green و alpha)

• رنگ های HSL (hue-saturation-lightness / اشباع-روشنایی یا سبکی رنگ)

• رنگ های HSLA (اشباع-روشنایی یا سبکی رنگی با کانال آلفا)

• درجه ی شفافیت و کدری Opacity

رنگ های RGBA (red, blue, green و alpha)

رنگ های RGBA در واقع همان red, blue, green هستند که در CSS3 با افزوده شدن کانال آلفا (Alpha channel) به آن توسعه داده شده و قابلیت بیشتری پیدا کرده است . این قابلیت جدید به شما امکان می دهد درجه یا میزان کدری و شفافیت (opacity) را تعیین کنید . مقدار رنگ های RGBA باrgba(red, green, blue, alpha) تعریف و مقداردهی می شوند . پارامتر alpha عددی است بین 0.0 (کاملاً شفاف) و 1.0 (کاملاً کدر) .

​

 

مثال زیر رنگ های RGBA متفاوتی تعریف می کند :

#p1 {background-color: rgba(255, 0, 0, 0.3);} /* red with opacity */

#p2 {background-color: rgba(0, 255, 0, 0.3);} /* green with opacity */

#p3 {background-color: rgba(0, 0, 255, 0.3);} /* blue with opacity */

 

رنگ های HSL

رنگ HSL مخفف یا سرنام Hue, Saturation و Lightness می باشد . یک مقدار HSLبا hsl(hue, saturation, lightness) مقدار دهی و مشخص می شود .

مقدار HUE یک درجه روی گردونه ی رنگ آمیزی / color wheel (از 0 تا 360) می باشد :

• 0 (یا 360) کاملاً قرمز است

• 120 سبز محسوب می شود

• 240 آبی محسوب می شود/li>

مفهوم Saturation یک مقدار درصدی است : %100 یعنی آن رنگ در قوی ترین و پررنگ ترین حالت آن

مفهوم Lightness نیز یک درصد است : %0 تیره و %100 سفید است .

​

 

مثال زیر رنگ های مختلف HSL را مقداردهی می کند :

#p1 {background-color: hsl(120, 100%, 50%);} /* green */

#p2 {background-color: hsl(120, 100%, 75%);} /* light green */

#p3 {background-color: hsl(120, 100%, 25%);} /* dark green */

#p4 {background-color: hsl(120, 60%, 70%);} /* pastel green */

 

رنگ های HSLA (اشباع-روشنایی یا سبکی رنگی با کانال آلفا)

مقادیر HSLA در حقیقت همان مقادیر رنگ های HSL هستند که کانال الفا به آن ها افزوده شده است که درجه ی کدری و روشنایی (opacity) رنگ را تنظیم می کند . مقدار رنگ های HSLA با hsla(hue, saturation, lightness, alpha) مشخص می شود, پارامتر آلفا میزان کدری و شفافیت رنگ را تنظیم می کند . پارامتر الفا عددی است بین 0.0 (کاملاً شفاف) و 1.0 (کاملاً کدر و تیره) .

​

 

نمونه ی زیر رنگ های HSLA متفاوتی را تعریف و مقداردهی می کند :

#p1 {background-color: hsla(120, 100%, 50%, 0.3);} /* green with opacity */

#p2 {background-color: hsla(120, 100%, 75%, 0.3);} /* light green with opacity */

#p3 {background-color: hsla(120, 100%, 25%, 0.3);} /* dark green with opacity */

#p4 {background-color: hsla(120, 60%, 70%, 0.3);} /* pastel green with opacity */

 

درجه ی تیرگی و شفافیت Opacity

خاصیت Opacity درجه ی تیرگی و شفافیت را ویژه ی یک مقدار RGB مشخص, مقداردهی می کند . مقدار خاصیت opacity باید عدد یا مقداری بین 0.0 (کاملاً شفاف) و 1.0 (کاملاً کدر) باشد .

​

 

همان طور که مشاهده می کنید نوشته ی درون رنگ نیز همراه خود رنگ کدر شده است . مثال زیر مقادیر RGB مختلفی را با opacity نشان می دهد :

#p1 {background-color:rgb(255,0,0);opacity:0.6;} /* red with opacity */

#p2 {background-color:rgb(0,255,0);opacity:0.6;} /* green with opacity */

#p3 {background-color:rgb(0,0,255);opacity:0.6;} /* blue with opacity */

آموزش طراحی سایت ادامه دارد

​

دوره آموزش ASP.NET Core

اهداف دوره MVC Core :

1. در این دوره MVC Core، معماری Core، چگونگی کارکرد MVC Core، بررسی کامل یک Request Life Style و همچنین آموزش انواع MiddleWare، چرخه حیات Middle Ware و انواع آنها بویژه Middle Ware های جدیدی که برای ایمن سازی وبسایت ها از آنها استفاده می شود، آموزش داده می شوند. این بخش از جمله مهم ترین بخش های آموزشی بوده که 2 یا 3 جلسه بطول می انجامد.
2. در این دوره آموزش MVC Core، یک معماری لایه ای قدرتمند (کمی سبک تر از Onion Architecture) بصورت کامل و حرفه ای آموزش داده می شود.
3. در دوره آموزش ASP.Net Core، کلیه اصول طراحی پنج گانه Solid در قالب یک پروژه پیاده سازی می شود.
4. در آموزش MVC Core، کلیه مراحل ساخت بانک اطلاعاتی به روش Code First، Entity Framework و Fluent API آموزش داده می شوند.
5. در دوره MVC Core، کوئری نویسی حرفه ای برای Entity Framework، برای بازیابی انواع مختلفJoin ، SubQuery Table Drive، SubQuery Scollar و همچنین SubQuery نوع سوم، Dynamic Query (جستجو پویا) و گروه بندی داده ها آموزش داده می شود.
6. در دوره ASP.Net Core، تمامی مباحث MVC Core از جمله Model-View-Controller و ارتباط آنها با یکدیگر، بصورت گام به گام آموزش داده می شوند. دانشجویان پس از گذراندن مرحله بالا به توانایی علمی کافی در ساخت پروژه MVC Core می رسند.
7. در این دوره از آموزش پروژه محور ASP.Net Core، کلیه مراحل استفاده از بوت استرپ جهت ساخت پنل مدیریت ریسپانسیو آموزش داده می شود.
8. دانشجویان در دوره MVC Core قادر خواهند بود که بصورت صد در صد کاربردی، پروژه های خود را Full-Ajax کنند؛ بعبارت دیگر در ابتدا آموزش جامعی از یکی از library های فرانت اند و جاوا اسکریپت داده می شود و در بخش بعدی، پس از آموزش Ajax، از ترکیب Ajax با کتابخانه های کمکی مثل بوت استرپ، فرم هایی کاملن مشابه برنامه های تحت ویندوز (پاسخگو به ایونت های کیبورد در جستجو، قابلیت استفاده از Modal جهت افزودن و حذف، استفاده از Sweet Alert جهت نمایش پیغام ها و هشدارها و ...) استفاده می شود.
9. در دوره آموزش پروژه محور MVC Core می آموزید که مراحل ایمن سازی یک وبسایت جهت جلوگیری از هر نوع ورود غیرمجاز بصورت کاربردی و حرفه ای به چه شکل است. در این مرحله، تمامی مباحث identity شامل مدیریت کاربران، مدیریت نقش ها، مدیریت دسترسی نقش ها به بخش های سایت و همچنین استفاده از Claim ها آموزش داده می شود.
10. در این بخش از دوره آموزش MVC Core، تمامی مراحل ساخت یک فروشگاه الکترونیک، از صفر تا صد، بصورت پروژه محور آموزش داده می شود.

در دوره آموزش MVC Core می آموزید که برخلاف فیلم های آموزشی یا انتظار بسیاری از دانشجویان، معماری MVC فقط بعنوان یک پوسته برای پروژه های تحت وب استفاده می شود و تمامی بخش های پروژه در قالب یک معماری برگرفته شده از Onion Architecture ساخته می شود که فرآیند مدلسازی در بخشی جدا، فرآیند ذخیره و بازیابی در بخشی جدا و همچنین هماهنگی تمامی بخش های پروژه برای پیاده سازی قوانین تجاری (Business Rules) در بخش جداگانه ای قرار می گیرند. علاوه بر این، با توجه به قوانین پنج گانه SOLID برای هر یک از بخش های فوق، یک لایه انتزاعی (Abstraction) بصورت جداگانه طراحی می گردد. این دوره آموزشی از دو بخش تشکیل شده که در ابتدا این بخش ها تلاش می شود به شرح مختصری از فریمورک .NET و معماری MVC بپردازیم، سپس عناوین مورد نظر برای تدریس را ارائه دهیم.

سرفصل دوره MVC Core
بخش اول از دوره  MVC Core

آموزش برخی ویژگی های زبان سی شارپ

• آموزش Generic Method ها و کاربرد آن در ASP.Net Core
• آموزش Delegateها و کاربرد آن در ASP.Net Core
• آموزش Anonymous Functionها و کاربرد آن در ASP.Net Core
• آموزش Actionها و Funcها و کاربردهای آنها در ASP.Net Core
• آموزش Lambda Expressionها و کاربرد آن در ASP.Net Core
• آموزش Extension Methodها در C# و کاربرد آن ها در C# Core
• استفاده از var در C# Core و کاربردهای آن ها
• آموزش مفهوم Asynchronous Programming در ASP.Net Core
• کاربرد await و async در Multi Thread
• Thread چیست و کاربرد آن در ASP.Net Core
• آموزش MultiThread
• چه هنگام از Multi Thread استفاده کنیم
• در چه مواقعی استفاده از Multi Thread به ما کمکی نمی کند
• کپسوله سازی مفهوم Threating در await و async
• بررسی State اجرایی یک پردازش async در C# Core
• آموزش Dependency Injection (DI)
• آموزش Inversion of Control (IoC)
• آموزش پروتکل های ATP
• آموزش Builder Pattern
• آموزش Marker Builder

آموزش معماری ASP.Net Core و تشریح Request Life Cycle در ASP.Net Core

• آموزش Model و مفهوم آن در ASP.Net Core
• آموزش View و مفهوم آن در ASP.Net Core
• آموزش Controller و مفهوم آن در ASP.Net Core
• ساخت اولین پروژه کوچک برای درک مفهوم ASP.Net Core

آموزش Entity Framework Code First و کاربردهای آن در برنامه نویسی ASP.Net Core

• آموزش مفهوم ORM در برنامه نویسی
• ساخت Data Base براساس Class Diagram
• بررسی رابطه Composition بین کلاس های موجود در یک Diagram ساده
• نگاشت Composition با Data Base رابطه ای با استفاده از Code First
• آموزش Fluent API و کاربرد Fluent API در Entity Framework Core
• آموزش ساخت Relation یک به چند با استفاده از Fluent API
• آموزش Unique Constraint با استفاده از Fluent API در ASP.Net Core
• آموزش Default Value با استفاده از Fluent API در ASP.Net Core
• آموزش تخصیص دقیق نوع داده ای (Data Type) با استفاده از Fluent API در ASP.Net Core
• آموزش ساخت رابطه چند به چند(Many to Many) با استفاده از Fluent API در ASP.Net Core
• بررسی مفهوم Migration در ASP.Net Core
• آموزش Versioning در ASP.Net Core Migration

آموزش ذخیره و بازیابی داده ها در ASP.Net Core

• آموزش Insert و Update و Delete نمونه رکوردها با استفاده از ASP.Net Core
• آموزش بازیابی مجموعه ای از Recordها در ASP.Net Core
• بازیابی از چندین جدول با استفاده از Joinها در ASP.Net Core
• مفهوم Scalar Subquery در SQL Server و شبیه سازی آن در ASP.Net Core
• مفهوم Table Drived Sub Query و شبیه سازی آن در ASP.Net Core
• بازیابی Recordها براساس شناسه اصلی(Primary Key)
• محدودسازی Recordها با استفاده از Take
• مفهوم صفحه بندی Recordها در ASP.Net Core
• آموزش مفهوم Dynamic Query در ASP.Net Core
• آموزش مفهوم Search Model در ASP.Net Core

پروژه عملی بخش اول از دوره MVC Core :
ساخت Class Diagram برای ساخت سایت خبری بصورت گام به گام بهمراه بانک اطلاعات بهینه سازی شده بر اساس Fluent API در ASP.NET Core

بخش دوم از دوره  MVC Core

آشنایی با مفهوم View Model در دوره MVC Core

• آموزش مفهوم View Model و کاربردهای آن در ASP.Net Core
• آموزش Attribute Validationها و مفهوم شی گرایی آن
• آموزش Required Attributeها در ASP.Net Core Model View
• آموزش String Lengthها در ASP.Net Core Model View
• آموزش Rangeها در ASP.Net Core Model View
• آموزش Compareها در ASP.Net Core Model View
• آموزش Urlها در ASP.Net Core Model View
• آموزش Regular Expressionها در ASP.Net Core Model View
• آموزش بررسی صحت داده ای View Model با استفاده از ویژگی Model State
• آموزش مفهوم Unobtrusive Validation در ASP.Net Core و ارائه چند مثال کاربردی
• بررسی کتابخانه اعتبارسنجی Unobtrusive مورد نیاز بر ASP.Net Core

آموزش انواع خروجی های توابع Action در ASP.Net Core

• آموزش ViewCore Result و کاربردهای آن در ASP.Net
• آموزش Partial View Result و کاربردهای آن در ASP.Net Core
• آموزش Redirect Result و کاربردهای آن در ASP.Net Core
• آموزش JSon Result و کاربردهای آن در ASP.Net Core
• آموزش JavaScript Result و کاربردهای آن در ASP.Net Core
• آموزش File Result و کاربردهای آن در ASP.Net Core
• آموزش Empty Result و کاربردهای آن در ASP.Net Core

آموزش نحوه ارسال اطلاعات از Actionها به Viewها

• آموزش View Bag در ASP.Net Core
• آموزش TempData در ASP.Net Core
• آموزش View Data در ASP.Net Core
• آموزش تخصیص یک Model کامل به یک View یا Partial View
• آموزش Bind به عنوان یک View با یک Model

آموزش انواع Scope Variableها در ASP.Net Core

• آموزش مفهوم Session در ASP.Net Core و کاربرد آن و اشتراک گذاری داده ها در فضای کاری یک کاربر
• احتیاط های لازم برای کار کردن با Sessionها در ASP.Net Core
• قرار دادن Objectهای پیچیده درون Session
• آموزش Json Serialize برای نگه داری اشیا پیچیده در Session
• آموزش Reserialize کردن اشیا پیچیده در درون Session
• آموزش Applicationها در ASP.Net Core و کاربرردهای آن

آموزش Routing در ASP.Net Core

• آموزش مفهوم Middle Wareها در ASP.Net Core
• آموزش تنظیمات Middle Wareهای Routing در ASP.Net Core
• آموزش تجزیه و تحلیل Routeها و متغیرهای آنها
• آموزش مفهوم Routing Attribute در ASP.Net Core
• آموزش استفاده از چندین Routing Attribute برای یک Action در ASP.Net Core

آموزش Security و Login با استفاده از ASP Identity

• معرفی ASP.Net Core Identity و امکانات آن
• آموزش نصب و پیکربندی ASP.Net Core Identity
• ساخت صفحات Login ، Logout و Registry برای ASP.Net Core
• آموزش Authorize Attribute در ASP.Net Core
• پیاده سازی Login و Logout در ASP.Net Core

آموزش Cookie در ASP.Net Core

• آموزش مفهوم Cookie در ASP.Net Core
• آموزش خواندن داده ها در Cookie در ASP.Net Core
• آموزش نوشتن داده ها در Cookie در ASP.Net Core
• آموزش حذف Cookieها در ASP.Net Core
• آموزش کامل optionهای Cookie شامل Secure ، HTTP Only، Expires، Path و Domain 

آموزش Razor و قواعد استفاده از آن

• آموزش Syntax مربوط به Razor در ASP.Net Core
• آموزش Razorهای Implicit در ASP.Net Core
• آموزش Razorهای Explicit در ASP.Net Core
• آموزش Expression Encoding در Razor و ماهیت کاربردهای آن
• آموزش Razor Code Blocks در ASP.Net Core
• استفاده از حلقه های تکرار درRazor
• استفاده از حلقه های تکراردر Code Variableها در حالات مختلف CsHTML

آموزش Tag Helperها در ASP.Net Core

• Tag Helper چیست و چه کاربردی دارد؟
• آموزش Form Tag Helper و کاربردهای آن در ASP.Net Core
• آموزش Action های Post و GET و تفاوت های آنها در ASP.Net Core
• آموزش Input Tag Helper در ASP.Net Core
• آموزش Text Area Tag Helper در ASP.Net Core
• آموزش Validation Message در ASP.Net Core
• آموزش Validation Summary Tag Helper در ASP.Net Core
• آموزش Bind کردن در ASP.Net Core
• آموزش Multi Selector در ASP.Net Core

آموزش کامل View در ASP.Net Core

• آموزش Layout در ASP.Net Core و ارائه مثال کاربردی
• آموزش Partial View در ASP.Net Core و ارائه مثال کاربردی
• آموزش View Component در ASP.Net Core و ارائه مثال کاربردی

پروژه عملی بخش دوم از دوره MVC Core  :

ساخت سایت خبری

برخی موارد دیگر که در کنار ساخت سایت خبری می آموزید :

آموزش معماری لایه ای

• آموزش علل استفاده از معماری لایه ای در ASP.Net Core
• آموزش ساخت لایه Domain Model با استفاده از EF Core
• آموزش ساخت لایه Data Access با استفاده از EF Core
• آموزش برقراری ارتباط با لایه ها و ساخت DTO هر لایه
• طراحی Class Diagram مربوط به سایت خبری
• ساختن لایه Domain Model براساس Class Diagram
• ساختن Data Base براساس Domain Model
• تکمیل Repository هریک از Classهای رده بندی خود خبر
• طراحی بخش نظرات کاربران(Data Access + Domain Model)
• چگونه از کامنت گذاری کاربران Login نکرده جلوگیری کنیم
• طرحی از بخش UI مربوط به رده بندی اخبار
• طراحی بخش UI مرتبط با بخش مدیریت اخبار
• ساخت صفحه جستجوی Domain مربوط به وب سایت
• آموزش Page بندی در صفحات
• چگون از ورود افراد Login نکرده به صفحات مدیریتی جلوگیری کنیم
• آپلود کردن تصویر همراه با خبر به وب سایت
• چگونه کلیه راه های نفوذ از طریق آپلود تصویر را بگیریم
• چگونه در وب سایت هنگام Login کاربران Catch بگذاریم
• ساخت بخش مدیریتی نظرات کاربران
• ساخت صفحه مدیریت نظرات کاربران به Ajax کامل
• استفاده از Logout حرفه ای برای سایت خبری
• چگونه Menu داینامیک برای رده بندی اخبار بسازیم
• آموزش امکانات و استاتداردهای لازم جهت SEO سازی صفحات خبری
• ساخت صفحه درج نظرات
• جلوگیری از درج نظرات کاربران Login نکرده
• آموزش تنظیمات Config جهت Upload کردن سایت
• آموزش Script گیری Data Base جهت Upload کردن سایت
• آموزش Upload کردن نهایی وب سایت بر روی هاست

آموزش Jquery

• Jquery چیست؟
• نحوه استفاده از Layout Pages Jquery
• آموزش مفهوم DOM و Eventهای Jquery DOM
• آموزش انواع Jquery Selector جهت هماهنگی با ASP.Net Core
• آموزش نحوه استفاده از Eventها در JQuery
• آموزش Effectهای درونی JQuery جهت ASP.Net Core

آموزش Ajax

• Ajax چیست و کاربرد آن در ASP.Net Core
• معرفی شی xml HTTP Request و پردازش های async
• آموزش فراخوانی Requestهای get و جانمایی آنها توسط JQuery در ASP.Net Core
• آموزش فراخوانی Requestهای Post و دریافت نتایج آنها توسط ASP.Net Core
• آموزش JSon در ASP.Net Core و کاربرد آن
• آموزش Serialize کردن و Deserilize کردن داده توسط ASP.Net Core و Jquery
• آموزش Cascade Drop Down همراه با Sub Form توسط Ajax
• آموزش استفاده از Auto Completeها و کاربرد آنها در پروژه های وب

 آموزش Roting در MVC Core

• آموزش Routing Template در MVC Core
• آموزش مسیریابی متعارف(Conventional Routing)
• نحوه تنظیم Route های مختلف
• آموزش Attribute Routing در MVC Core
• آموزش URL Generation در MVCCore

 

آموزش ASP.NET Core - چرا ASP.NET Core

سلام بر دوستان عزیز و همراه...

امروز با یک مبحث دیگه در زمینه آموزش ASP.NET Core همراه شما هستم، بدون شک دوستانی که در زمینه توسعه اپلیکیشن های تحت وب با استفاده از سی شارپ و فریمورک های NET. فعال هستند، با مفهوم NET. و NET Core. آشنایی دارند، اما بهتر برای دوستانی که آشنایی محدودی با این فریم ورک دارند توضیح مختصری ارائه بدیم.

فریمورک NET. از جمله محصولات مایکروسافت بود که سال ها توسط برنامه نویسان فعال در حوزه تولید اپلیکیشن مورد استفاده قرار می گرفت اما بدلیل برخی محدودیت هایی که برای برنامه نویسان ایجاد می کرد، محبوبیت خود را بویژه در میان Startup ها از دست داد، تا اینکه مایکروسافت با معرفی فریم ورک NET Core. انقلابی جدید ایجاد کرد. فریم ورک NET Core. بصورت محسوسی سبک بود و وجود مزایا دیگری همچون متن باز بودن (Open Source)، چند سکویی بودن (Cross Platform)، ساده، قدرتمند، رایگان و ماژولار بودن باعث شد که این محصول جدید مایکروسافت به سرعت مورد استقبال قرار بگیرد و دوباره مایکروسافت در فضا رقابتی توسعه اپلیکیشن های تحت وب خوش بدرخشد.

علاوه بر این، آموزش ASP.NET Core به شما نشان می دهد که فریم ورک NET Core. تمامی ویژگی های Core که برای راه اندازی یک برنامه NET Core. نیاز است رو شامل میشه. اگر ویژگی دیگری در Core نیاز باشه می توان آن را بوسیله NuGet Packages تامین کرد که در صورت نیاز می تونیم آنها رو به برنامه خود اضافه کنیم. پس برنامه NET Core. می تونه باعث بهبود عملکرد، کاهش حافظه مورد نیاز و آسان شدن حفظ و نگهداری برنامه ساخته شده هم بشه.

خوب اگر از من بپرسید که جواب من به سوال "چرا NET Core." چیه، جواب شما رو با استفاده از دو پاراگراف زیر میدم (این دو پاراگراف برگرفته از مقاله ای هستش که بر اساس مطالب سایت های مختلف آماده کردم) :

استفاده از فریم ورک NET. محدودیت هایی ایجاد می کند که از جمله آنها می توان به موارد زیر اشاره کرد : این فریمورک تنها بر روی پلتفرم ویندوز قابل استفاده است. برای ویندوزهای مختلف، همچون دسکتاپ، استور، تلفن و برنامه های تحت وب باید نمونه های متفاوتی از NET API. را بکار گرفت. علاوه بر این، ساختار فریم ورک NET. بگونه ای است که اگر تغییری در آن ایجاد شود، تمامی برنامه هایی که به آن وابستگی دارند، تحت تاثیر قرار می گیرند.

امروزه، ساخت برنامه ای که بر روی سیستم های مختلف کار کند، برنامه نویسی یک سایت و طراحی آن برای ویندوزهای دسکتاپ و وب، و ساخت برنامه های موبایل، از جمله درخواست های معمول مشتریان است. بنابراین، استفاده از یک فریمورک خاص که سیستم های مختلف را پشتیبانی کند، ضروری است. بهمین دلیل، مایکروسافت NET Core. را معرفی و ارائه کرد. هدف اصلی از معرفی NET Core. این بود که فریم ورک NET. تبدیل به فریمورکی متن باز و کراس پلتفرم (چند سکویی) شود تا قابلیت استفاده بر روی دستگاه های مختلف را داشته باشد.

حالا وقتش رسیده که ویژگی های NET Core. و ضرورت آموزش ASP.NET Core برای دوستان فعال در این حوزه رو بصورت مفصل با همدیگه بررسی و مطالعه کنیم :

1. متن باز بودن فریم ورک NET Core. :

از آنجا که NET Core. فریمورکی متن باز است، بر روی سایت GitHub در دسترس است.

2. ویژگی کراس پلتفرم در فریم ورک NET Core. :

فریم ورک NET Core. را می توان بر روی سیستم های عامل ویندوز، مک و لینوکس اجرا کرد. در هر سیستم عامل، زمان مورد نیاز برای اجرا کد یکسان و خروجی گرفتن از آن متفاوت است.

3. سازگاری با معماری های مختلف در فریم ورک NET Core. :

فریم ورک NET Core. را می توان در معماری های ساختاری مختلف همچون X64، X86 و ARM استفاده کرد و رفتار مشابهی را از آن دریافت کرد.

4. دامنه وسیعی از برنامه ها در MVC Core :

برنامه های بسیاری را می توان بر اساس پلتفرم NET Core. ساخته و راه اندازی کرد. از جمله این برنامه ها می توان به مواردی همچون برنامه های موبایل، برنامه های دسکتاپ، برنامه های تحت وب، برنامه های یادگیری ماشین، مایکرو سرویس ها، بازی و .... اشاره کرد.

5. امکان پشتیبانی از چند زبان در فریمورک NET Core. :

برای توسعه برنامه در Asp.NET Core می توانید از زبان های برنامه نویسی C#، F# و ویژوال بیسیک استفاده کنید. علاوه بر این، می توانید از IDE دلخواه خود، همچون Visual Studio 2017/2019، Visual Studio Code، Sublime Text، Vim و .... استفاده کنید.

6. معماری ماژولار در MVC Core :

فریم ورک NET Core. با استفاده از NuGet Packages از معماری ماژولار پشتیبانی می کند. پکیج های متفاوتی وجود دارد که کاربر آنها را متناسب با نیاز خود به پروژه اضافه می کند. نکته قابل توجه این است که حتی کتابخانه NET Core. نیز بعنوان یک NuGet Package ارائه می شود و این مسئله باعث کاهش فضا اشغال شده از حافظه، بهبود عملکرد و نگهداری آسان پروژه می شود.

7. پیاده سازی CLI در MVC Core :

فریم ورک NET. ابزارهای Command-Line Interface را برای توسعه و یکپارچه سازی برنامه بصورت پیوسته، بکار می گیرد.

8. سازگاری در فریم ورک NET Core. :

با استفاده از بکارگیری .NET Standard Specification با فریمورک NET. و Mono APIs نیز سازگاری دارد.

9. انعطاف پذیری در فریم ورک NET Core. :

برنامه NET Core. می تواند در سطح کاربر یا سیستم یا با کانتینرهای Docker گسترش داده شود.

 

از اونجایی که دوست ندارم این مطلب رو بصورت ناقص با شما به اشتراک بگذارم، پیکربندی فریم ورک NET Core. رو با استفاده از یک شکل با هم بررسی می کنیم :

 

 

 

 

 

 

 

 

 

 

 

خوب دوستان، امروز سعی کردم بصورت خیلی ساده و مختصر، امکان آشنایی با فریم ورک NET Core. رو برای شما فراهم کنم، حتمن با ما همراه باشید چون در پست بعدی میخوام راجع به معماری MVC در فریم ورک NET Core. با همدیگه صحبت کنیم ....

آموزش پایگاه داده پایتون

سلام دوستان...

 

با آموزش پایتون همراه ما باشید :

 

پایتون Python و دسترسی به دیتابیس MySQL

پایتون جهت دسترسی به دیتابیس از توابع کتابخانه ای DB-API استفاده کرده و interface هایی که برای اتصال به پایگاه داده و مدیریت داده های اپلیکیشن بایستی پیاده سازی شود، بر اساس همین استاندارد می باشد. در واقع بیشتر رابط های (interface) اتصال به دیتابیس از این استاندارد پیروی می کنند.

توسعه دهنده می تواند بر اساس نیاز اپلیکیشن خود، دیتابیس مناسب را انتخاب کند. توابع کتابخانه ای اتصال و استفاده از دیتابیس زبان پایتون (API) از database server های زیر پشتیبانی می کند:

• GadFly
• mSQL
• MySQL
• PostgreSQL
• Microsoft SQL Server
• Informix
• Interbase
• Oracle
• Sybase

برای مشاهده لیست interface های اتصال به دیتابیس می توانید به این لینک مراجعه کنید: http://wiki.python.org/moin/DatabaseInterfaces. لازم به ذکر است که برای اتصال به هر دیتابیس مجزا و جهت دسترسی یا مدیریت داده های اپلیکیشن می بایست یک ماژول DB API جداگانه دانلود و نصب نمایید. به طور مثال، چنانچه توسعه دهنده می بایست علاوه بر MySQL به دیتابیس Oracle دسترسی پیدا کند، بدیهی است که باید ماژول های مجزا هریک را جداگانه از اینترنت بارگیری کرده و نصب نماید (ماژول های دیتابیس MySQL و Oracle).

ماژول DB API یک حداقل استاندارد برای مدیریت دیتابیس با استفاده از ساختار و دستور نحوی زبان برنامه نویسی پایتون در اختیار توسعه دهنده قرار می دهد. استفاده از این مجموعه توابع کتابخانه ای یا API مراحل زیر را شامل می شود:

• وارد کردن ماژول این مجموعه توابع کتابخانه ای با استفاده از دستور import
• برقراری اتصال به دیتابیس
• صدور و فراخوانی دستورات و توابع (Store procedure) مورد نیاز SQL
• بستن و قطع اتصال به دیتابیس

در آموزش حاضر تمامی این مباحث را با دیتابیس رابطه ای MySQL مدیریت می کنیم. به همین جهت ماژول MySQLdb را بارگیری نموده و نصب می کنیم.

 

آموزش پایتون : ماژول MySQLdb

ماژول MySQLdb یک رابط یا interface برای اتصال به سرویس دهنده دیتابیس MySQL (MySQL Database server) با زبان برنامه نویسی پایتون است که توسعه دهنده می بایست برای دسترسی و مدیریت داده های اپلیکیشن آن را پیاده سازی کند. این اینترفیس ویرایش 2.0 Database API پایتون را پیاده سازی کرده و بر پایه ی MySQL C API ساخته شده است.

 

نصب MySQLdb

جهت استفاده از توابع MySQLdb لازم است ماژول آن را بر روی دستگاه خود نصب نمایید. کافی است دستورات زیر را در اسکریپت پایتون لحاظ کرده و آن ها را اجرا نمایید:

#!/usr/bin/python

import MySQLdb

کد فوق یک پیغام خطا مبنی بر اینکه ماژول MySQLdb نصب نشده است تولید می کند:

Traceback (most recent call last):

File "test.py", line 3, in <module>

import MySQLdb

ImportError: No module named MySQLdb

</module>

به منظور نصب ماژول MySQLdb، کافی است دستورات زیر را تایپ نمایید:

For Ubuntu, use the following command -

$ sudo apt-get install python-pip python-dev libmysqlclient-dev

For Fedora, use the following command -

$ sudo dnf install python python-devel mysql-devel redhat-rpm-config gcc

For Python command prompt, use the following command -

pip install MySQL-python

نکته:

لازم است جهت نصب ماژول فوق، root privilege (مجوز در سطح دسترسی به فایل های ریشه) داشته باشید.

 

پیاده سازی اتصال به دیتابیس (Database connection) در آموزش پایتون

پیش از اتصال به دیتابیس MySQL، لازم است اقدامات زیر را کامل انجام داده باشید:

• یک دیتابیس به نام TESTDB ایجاد نموده اید.
• یک جدول به نام EMPLOYEE در دیتابیس مزبور تعریف کرده اید.
• جدول مورد نظر فیلدهایی به نام FIRST_NAME، LAST_NAME، AGE، SEX و INCOME را دربرمی گیرد.
• جهت دسترسی به دیتابیس User ID (شناسه ی کاربری) را بر روی "testuser" و گذرواژه را بر روی "test123" تنظیم کرده اید.
• ماژول MySQLdb به طور کامل بر روی دستگاه مورد نظر نصب شده است.
• با مفاهیم پایه و ابتدایی دیتابیس MySQL آشنایی کافی داشته باشید.

 

ماژول

ذیل مثالی را مشاهده می کنید که در آن توسعه دهنده با زبان پایتون به دیتابیس رابطه ای MySQL به نام "TESTDB" متصل می شود.

#!/usr/bin/python

import MySQLdb

# Open database connection

db = MySQLdb.connect("localhost","testuser","test123","TESTDB" )

# prepare a cursor object using cursor() method

cursor = db.cursor()

# execute SQL query using execute() method.

cursor.execute("SELECT VERSION()")

# Fetch a single row using fetchone() method.

data = cursor.fetchone()

print "Database version : %s " % data

# disconnect from server

db.close()

خروجی اسکریپت فوق در دستگاه مبتنی بر Linux به صورت زیر می باشد.

Database version : 5.0.45

زمانی که اتصال به دیتابیس یا منبع داده ای مورد نظر با موفقیت انجام می شود، یک آبجکت Connection در خروجی بازگردانی شده و متعاقبا داخل آبجکت db جهت استفاده در آینده ذخیره می گردد. در غیر این صورت مقدار db برابر None قرار داده خواهد شد. آبجکت db سپس جهت اعلان و آماده سازی آبجکت cursor استفاده می شود. حال به منظور اجرای دستورهای درخواست داده و پرس و جو از دیتابیس، متد execute() بر روی آبجکت cursor فراخوانی می شود. در پایان، پیش از خروج از دیتابیس، اتصال به دیتابیس قطع شده و منابع مورد استفاده آزاد می شوند.

 

ایجاد جدول دیتابیس در آموزش پایتون

پس از اینکه اتصال به دیتابیس برقرار شد، توسعه دهنده می تواند اقدام به ساخت جدول و درج سطر در جداول دیتابیس نماید. برای این منظور لازم است متد execute را بر روی آبجکت cursor صدا بزند.

مثال

در زیر یک جدول به نام EMPLOYEE ایجاد می کنیم:

#!/usr/bin/python

import MySQLdb

# Open database connection

db = MySQLdb.connect("localhost","testuser","test123","TESTDB" )

# prepare a cursor object using cursor() method

cursor = db.cursor()

# Drop table if it already exist using execute() method.

cursor.execute("DROP TABLE IF EXISTS EMPLOYEE")

# Create table as per requirement

sql = """CREATE TABLE EMPLOYEE (

FIRST_NAME CHAR(20) NOT NULL,

LAST_NAME CHAR(20),

AGE INT,

SEX CHAR(1),

INCOME FLOAT )"""

cursor.execute(sql)

# disconnect from server

db.close()

 

عملیات INSERT

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

مثال

مثال زیر دستور INSERT زبان SQL را برای ایجاد رکورد جدید در جدول EMPLOYEE اجرا می کند:

#!/usr/bin/python

import MySQLdb

# Open database connection

db = MySQLdb.connect("localhost","testuser","test123","TESTDB" )

# prepare a cursor object using cursor() method

cursor = db.cursor()

# Prepare SQL query to INSERT a record into the database.

sql = """INSERT INTO EMPLOYEE(FIRST_NAME,

LAST_NAME, AGE, SEX, INCOME)

VALUES ('Mac', 'Mohan', 20, 'M', 2000)"""

try:

# Execute the SQL command

cursor.execute(sql)

# Commit your changes in the database

db.commit()

except:

# Rollback in case there is any error

db.rollback()

# disconnect from server

db.close()

مثال فوق را می توان جهت تولید Query های SQL به صورت dynamic (در زمان اجرا) به صورت زیر نوشت:

#!/usr/bin/python

import MySQLdb

# Open database connection

db = MySQLdb.connect("localhost","testuser","test123","TESTDB" )

# prepare a cursor object using cursor() method

cursor = db.cursor()

# Prepare SQL query to INSERT a record into the database.

sql = "INSERT INTO EMPLOYEE(FIRST_NAME, \

LAST_NAME, AGE, SEX, INCOME) \

VALUES ('%s', '%s', '%d', '%c', '%d' )" % \

('Mac', 'Mohan', 20, 'M', 2000)

try:

# Execute the SQL command

cursor.execute(sql)

# Commit your changes in the database

db.commit()

except:

# Rollback in case there is any error

db.rollback()

# disconnect from server

db.close()

مثال

تکه کد زیر روش دیگری از درج داده در سطر است که در آن شما می توانید پارامترها را به صورت مستقیم به متد execute ارسال کنید:

..................................

user_id = "test123"

password = "password"

con.execute('insert into Login values("%s", "%s")' % \

(user_id, password))

..................................

 

عملیات خواندن داده ها (READ)

عملیات READ منحصرا اطلاعات مفیدی را از دیتابیس واکشی می کند.

پس از برقرار اتصال به دیتابیس، می توان از آن جهت درخواست داده های مورد نظر Query گرفت. دو متد fetchone() و fetchall() نیز برای همین منظور تعبیه شده اند.

متد fetchone(): این متد همان طور که از اسم آن پیدا است، تنها یک رکورد یا سطر را در خروجی برمی گرداند. در واقع متد حاضر سطر بعدی از میان مجموعه سطرهای داده (result set خروجی کوئری) را بازگردانی می نماید. زمانی که توسعه دهنده با استفاده از cursor از دیتابیس کوئری می گیرد، خروجی یک آبجکت result set (مجموعه سطرهای داده) می باشد.

متد fetchall(): متد جاری قادر است همزمان چندین مقدار را ازدیتابیس واکشی کند. این متد تمامی سطرهای موجود در مجموعه سطرهای داده یا آبجکت result set را بازیابی می کند. اگر برخی از سطرها قبلا از دیتابیس استخراج شده باشد، در آن صورت باقی سطرها از آبجکت result set واکشی می شود.

متد rowcount: این المان یک attribute فقط خواندنی (read-only) است و تعدد سطرهایی که تحت تاثیر متد execute() قرار گرفتند را بازمی گرداند.

مثال

رویه procedure زیر تمامی سطرهای موجود در دیتابیس را از جدول EMPLOYEE که مقدار فیلد income آن بیشتر از 1000 می باشد را به عنوان خروجی کوئری بازمی گرداند:

#!/usr/bin/python

import MySQLdb

# Open database connection

db = MySQLdb.connect("localhost","testuser","test123","TESTDB" )

# prepare a cursor object using cursor() method

cursor = db.cursor()

# Prepare SQL query to INSERT a record into the database.

sql = "SELECT * FROM EMPLOYEE \

WHERE INCOME > '%d'" % (1000)

try:

# Execute the SQL command

cursor.execute(sql)

# Fetch all the rows in a list of lists.

results = cursor.fetchall()

for row in results:

fname = row[0]

lname = row[1]

age = row[2]

sex = row[3]

income = row[4]

# Now print fetched result

print "fname=%s,lname=%s,age=%d,sex=%s,income=%d" % \

(fname, lname, age, sex, income )

except:

print "Error: unable to fecth data"

# disconnect from server

db.close()

خروجی زیر را برمی گرداند:

fname=Mac, lname=Mohan, age=20, sex=M, income=2000

 

عملیات UPDATE و بروز رسانی داده ها

زمانی که عملیات UPDATE بر روی دیتابیس اجرا می شود، یک یا چندین سطر موجود در این دیتابیس با داده های جدید بروز رسانی می شوند.

رویه procedure و قطعه کدی که در زیر مشاهده می کنید، تمامی رکوردهایی که مقدار فیلد SEX آن ها 'M' می باشد را بروز رسانی می کند.در مثال جاری، مقدار فیلد AGE تمامی مردها را به میزان یک سال افزایش می دهیم.

مثال

#!/usr/bin/python

import MySQLdb

# Open database connection

db = MySQLdb.connect("localhost","testuser","test123","TESTDB" )

# prepare a cursor object using cursor() method

cursor = db.cursor()

# Prepare SQL query to UPDATE required records

sql = "UPDATE EMPLOYEE SET AGE = AGE + 1

WHERE SEX = '%c'" % ('M')

try:

# Execute the SQL command

cursor.execute(sql)

# Commit your changes in the database

db.commit()

except:

# Rollback in case there is any error

db.rollback()

# disconnect from server

db.close()

 

عملیات DELETE و حذف رکورد از دیتابیس

عملیات DELETE زمانی استفاده می شود که لازم باشد یک یا چند رکورد از دیتابیس مورد نظر پاک شوند. کد حاضر تمامی رکوردهای جدول EMPLOYEE که مقدار فیلد AGE آن ها بیش از 20 می باشد را حذف می نماید:

مثال

#!/usr/bin/python

import MySQLdb

# Open database connection

db = MySQLdb.connect("localhost","testuser","test123","TESTDB" )

# prepare a cursor object using cursor() method

cursor = db.cursor()

# Prepare SQL query to DELETE required records

sql = "DELETE FROM EMPLOYEE WHERE AGE > '%d'" % (20)

try:

# Execute the SQL command

cursor.execute(sql)

# Commit your changes in the database

db.commit()

except:

# Rollback in case there is any error

db.rollback()

# disconnect from server

db.close()

 

اجرای تراکنش بر روی دیتابیس (Transactions)

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

تراکنش دارای چهار ویژگی معروف می باشد:

(اصل یا همه یا هیچ) Atomicity : تراکنش یا کاملا و به صورت یک پکیج اجرا می شود یا هیچ اتفاقی نمی افتد.

(اصل یکپارچگی و پایداری) Consistency: یک تراکنش باید پایگاه داده را از وضعیت پایدار و مشخص به وضعیت سالم، مشخص و پایدار دیگری انتقال دهد.

(اصل انزوا) Isolation: اطمینان حاصل می کند که تراکنش هایی که به طور همزمان اجرا می شوند، بر روی یکدیگر و سلامت دیتابیس اثری نمی گذارد، گویا هر یک در انزوا و به طور جداگانه اجرا می شوند.

(اصل پایایی و ماندگاری) Durability : زمانی که یک تراکنش به صورت نهایی ثبت و به اجرا رسید (commit)، اثرشان ماندگار و پایا خواهد بود، حتی اگر سیستم دچار خرابی ناگهانی شود.

مثال

از قبل حتما با نحوه ی پیاده سازی تراکنش آشنایی دارید. در زیر مثالی مشابه را می بینید:

# Prepare SQL query to DELETE required records

sql = "DELETE FROM EMPLOYEE WHERE AGE > '%d'" % (20)

try:

# Execute the SQL command

cursor.execute(sql)

# Commit your changes in the database

db.commit()

except:

# Rollback in case there is any error

db.rollback()

عملیات Commit و ثبت نهایی

کمیت Commit عملیاتی است که به دیتابیس اعلان می کند که باید تمامی تغییرات خود را به صورت نهایی ثبت کرده و پس از انجام آن دیگر امکان بازگشت به وضعیت قبلی وجود ندارد.

در زیر تکه کد ساده ای را مشاهده می کنید که متد commit() را بر روی آبجکت db صدا می زند.

db.commit()

 

عملیات ROLLBACK و بازگشت به وضعیت قبلی

اگر از تغییرات ثبت شده رضایت کامل ندارید، می توانید دیتابیس را به وضعیت قبل از انجام تراکنش بازگردانید. برای این منظور کافی است متد rollback() را بر روی آبجکت db فراخوانی نمایید.

db.rollback()

 

قطع اتصال به دیتابیس (متد close())

جهت بستن اتصال به دیتابیس کافی است متد close() را به صورت زیر فراخوانی نمایید:

db.close()

اگر اتصال به دیتابیس با فراخوانی متد close() بسته شود، در آن صورت تمامی تراکنش های انجام نشده به صورت نهایی، توسط DB به وضعیت قبلی بازگردانی می شوند.

 

مدیریت خطاها

خطاها بر اثر عوامل مختلفی رخ می دهند. برخی از خطاها بر اثر خطا گرامری و اشکال در سینتکس دستور SQL اجرا شده، رخ می دهند. برخی دیگر بر اثر عدم موفقیت در اتصال (connection failure) و برخی هم به دلیل فراخوانی متد fetch بر روی دستوری که قبلا یا کاملا انجام شده و یا لغو گردیده، اتفاق می افتند.

با DB API تعدادی خطا اعلان می کند که باید در هر ماژولی تعریف شده باشد. این خطاها (exceptions) در جدول زیر لیست شده اند:

 

اسکریپت های پایتون اپلیکیشن شما می بایست تمامی این خطاها را مدیریت کند. اما لازم است قبل از بکار بردن هر کدام از این exception ها اطمینان حاصل نمایید که MySQLdb امکان پشتیبانی از آن ها را دارد.

آموزش پایتون ادامه دارد.

آموزش طراحی سایت-روش Flex در Bootstrap 4

​

  

سلام با آموزش Bootstrap 4 از دوره آموزش طراحی سایت در خدمت شما هستیم

 

آموزش کاربرد روش Flex در Bootstrap 4

بوت استرپ 4، از کلاس های Flex برای کنترل چیدمان (layout) اجزای صفحه استفاده می کند.

 

آموزش FlexBox با بوت استرپ 4:

بزرگترین تفاوت بین Bootstrap 3 و Bootstrap 4 این است که بوت استرپ 4 از FlexBox به جای شناورسازی (floats) جهت مدیریت و چیدمان قرارگیری عناصر صفحه، استفاده می کند.

ماژول قالب بندی Flexible Box، روش ساده تری جهت ایجاد قالب ریسپانسیو و واکنش گرا، بدون استفاده از خاصیت های شناوری (float) و موقعیت (Position)، در اختیارمان قرار داده است. اگر با ماژول Flex آشنا نیستید، به بخش آموزش FlexBox در سایت تحلیل داده بروید.

نکته :

ماژول FlexBox در نسخه های IE9 و قبلتر پشتیبانی نمی شود.

اگر نیاز دارید تا از پشتیبانی مرورگرهای IE9 و IE8 بهره گیرید، از Bootstrap 3 استفاده نمایید. بوت استرپ ورژن 3، پایدارترین نسخه بوت استرپ تا سال 2019 بوده و همچنان توسط تیم تولید کننده جهت رفع باگ های احتمالی و پشتیبانی و آموزش، مورد حمایت است اما ویژگی های جدید بوت استرپ 4، به آن اضافه نشده است!

برای ایجاد یک عنصر دربرگیرنده (Container) ماژول FlexBox و قرار دادن عناصر فرزند مورد نظر در آن، از کلاس d-flex، استفاده نمایید.

مثال: در کد مثال عملی زیر، یک عنصر FlexBox ایجاد کرده ایم که 3 عنصر دیگر درون آن قرار گرفته است.

 

 

 

آموزش طراحی سایت : مثال 1

 

 

 

 

Bootstrap Example

 

 

 

 

 

 

 

 

 

 

 

 

Flex

 

 

To create a flexbox container and transform direct children into flex items, use the d-flex class:

 

 

 

 

Flex item 1

 

 

Flex item 2

 

 

Flex item 3

 

 

 

 

 

 

 

 

خروجی :

 

Flex

To create a flexbox container and transform direct children into flex items, use the d-flex class:

​

 

برای ایجاد یک عنصر درون خطی inline flexbox، از کلاس d-inline-flex به صورت زیر استفاده کنید :

 

مثال 2

 

 

 

 

 

Bootstrap Example

 

 

 

 

 

 

 

 

 

 

 

 

Inline Flex

 

 

To create an inline flexbox container, use the d-inline-flex class:

 

 

 

 

Flex item 1

 

 

Flex item 2

 

 

Flex item 3

 

 

 

 

 

 

 

 

خروجی :

 

Inline Flex

To create an inline flexbox container, use the d-inline-flex class:

​

 

 

آموزش طراحی سایت : آموزش چینش افقی Horizontal Direction در FlexBox:

از کلاس flex-row برای نمایش افقی (Horizontal) عناصر به صورت کنار هم استفاده نمایید (این حالت، روش پیش فرض نمایش flexBox است).

نکته :

برای نمایش عناصر از راست به چپ (برعکس حالت پیش فرض)، از کلاس flex-row-reverse استفاده نمایید.

مثال: در کد مثال عملی زیر، گروه اول عناصر را به صورت پیش فرض و از چپ به راست نمایش داده و گروه دوم را به صورت برعکس (از راست به چپ) قرار داده ایم :

 

مثال 3

 

 

 

 

Bootstrap Example

 

 

 

 

 

 

 

 

 

 

 

 

Horizontal Direction

 

 

Use .flex-row to make the flex items appear side by side (default):

 

 

 

 

Flex item 1

 

 

Flex item 2

 

 

Flex item 3

 

 

 

 

Use .flex-row-reverse to right-align the direction:

 

 

 

 

Flex item 1

 

 

Flex item 2

 

 

Flex item 3

 

 

 

 

 

 

 

 

خروجی :

 

Horizontal Direction

Use .flex-row to make the flex items appear side by side (default):

​

 

Use .flex-row-reverse to right-align the direction:

​

 

 

آموزش چینش عمودی عناصر Vertical Direction در FlexBox:

از کلاس flex-column برای نمایش عناصر به صورت عمودی (بر روی هم) استفاده کنید. همچنین کلاس flex-column-reverse، عناصر را به صورت عمودی، ولی با ترتیب برعکس از پایین به بالا، نشان می دهد. همانند کد مثال عملی زیر :

 

مثال 4

 

 

 

 

Bootstrap Example

 

 

 

 

 

 

 

 

 

 

 

 

Vertical Direction

 

 

Use .flex-column to display the flex items vertically (on top of each other):

 

 

 

 

Flex item 1

 

 

Flex item 2

 

 

Flex item 3

 

 

 

 

Use .flex-column-reverse to reverse the vertical direction:

 

 

 

 

Flex item 1

 

 

Flex item 2

 

 

Flex item 3

 

 

 

 

 

 

 

 

خروجی :

 

Vertical Direction

Use .flex-column to display the flex items vertically (on top of each other):

​

 

Use .flex-column-reverse to reverse the vertical direction:

​

 

 

آموزش طراحی سایت : آموزش ترازبندی خطی (Justify) عناصر در FlexBox:

از کلاس های justify-content-* برای تنظیم ترتیب قرارگیری افقی (Justify) عناصر FlexBox استفاده می شود که در آن * می تواند یکی از مقادیر زیر را داشته باشد :

• مقدار start : حالت پیش فرض. در این حالت عناصر از سمت چپ به راست مرتب می شوند.

• مقدار end : در این حالت، عناصر در سمت راست عنصر دربرگیرنده تراز می شوند.

• مقدار Center: در این حالت عناصر در وسط عنصر دربرگیرنده قرار می گیرند.

• مقدار between: در این حالت، عنصر اول و آخر به لبه های عنصر مادر چسبیده و سایر عناصر در بین آن ها با فاصله تراز می شوند.

• مقدار around: در این حالت، عناصر به همراه فضای خالی به صورت مساوی درون عنصر مادر قرار می گیرند.

تمامی موارد فوق را در کد مثال عملی زیر نشان داده ایم :

 

مثال 5

 

 

 

 

Bootstrap Example

 

 

 

 

 

 

 

 

 

 

 

 

Justify content

 

 

Use the .justify-content-* classes to change the alignment of flex items. Choose from start (default), end, center, between or around:

 

 

 

 

Flex item 1

 

 

Flex item 2

 

 

Flex item 3

 

 

 

 

 

 

Flex item 1

 

 

Flex item 2

 

 

Flex item 3

 

 

 

 

 

 

Flex item 1

 

 

Flex item 2

 

 

Flex item 3

 

 

 

 

 

 

Flex item 1

 

 

Flex item 2

 

 

Flex item 3

 

 

 

 

 

 

Flex item 1

 

 

Flex item 2

 

 

Flex item 3

 

 

 

 

 

 

 

 

خروجی :

 

Justify content

Use the .justify-content-* classes to change the alignment of flex items. Choose from start (default), end, center, between or around:

​

 

​

 

​

 

 

آموزش طراحی سایت ادامه دارد.

​