<script src="assets/js/core/app-menu.js"></script> <script src="assets/js/core/app.js"></script>
فقط مساله ای که برای من اتفاق افتاد این بود که زمانی که دکمه مربوط به بازسازی کپچا رو میزدم تصویر از کش خونده میشد و تصویر جدید نمایش داده نمیشد که برای حل این موضوع کافیست کد ایجکس برای آپدیت کپچا توسط دکمه refresh را به صورت زیر بنویسید:
jQuery('#refresh').on({ 'click': function () { var random = new Date(); jQuery.ajax({ url: '@Url.Action("CaptchaImage","Captcha")', type: "GET", data: null, success: function (result) { jQuery("#imgcpatcha").attr("src", "/Captcha/CaptchaImage?" + random + result); } }); } });
بارگذاری یک یوزرکنترل با استفاده از جیکوئری
بله. یک trim را هم میتوانید اضافه کنید بعلاوه نکته حذف فاصله خالی بین تگها که در کاهش حجم نهایی مؤثر است.
@ناشناس
میشد این آرگومانهای مورد نظر رو به شکل یک رشته یک سطری هم در آورد (فرقی نمیکرد). اما با استفاده از این تابع شما میتونید یک شیء جاوا اسکریپتی را تبدیل به json کنید که از این لحاظ خوب یک قدم پیشرفت است و در خطایابی کدها کمک بزرگی است (رشته قابل خطایابی نیست).
این تصویر را پیشتر در مطلب «ارتقاء به ASP.NET Core 1.0 - قسمت 6 - سرویسها و تزریق وابستگیها» مشاهده کردهاید. در اینجا لیست سرویسهایی را مشاهده میکنید که به صورت پیش فرض، ثبت شدهاند و فعال هستند و ILogger و ILoggerFactory نیز جزئی از آنها هستند. بنابراین نیازی به فعال سازی آنها نیست؛ اما برای استفادهی از آنها نیاز به انجام یک سری تنظیمات است.
پیاده سازی ثبت وقایع در ASP.NET Core
اولین قدم کار با فریم ورک ثبت وقایع ASP.NET Core، معرفی ILoggerFactory به متد Configure کلاس آغازین برنامه است:
public void Configure(ILoggerFactory loggerFactory, IApplicationBuilder app, IHostingEnvironment env) { loggerFactory.AddConsole(Configuration.GetSection("Logging")); loggerFactory.AddDebug();
سطر اول متد، تنظیمات ثبت وقایع را از خاصیت Logging فایل appsettings.json برنامه میخواند (در مورد خاصیت Configuration، در مطلب «ارتقاء به ASP.NET Core 1.0 - قسمت 7 - کار با فایلهای config» بیشتر بحث شد) و لاگ کردن ویژهی در کنسول NET Core. را فعال میکند:
{ "Logging": { "IncludeScopes": false, "LogLevel": { "Default": "Debug", "System": "Information", "Microsoft": "Information" } } }
و سطر دوم سبب نمایش اطلاعات لاگ شده در کنسول دیباگ ویژوال استودیو میشود.
متد AddDebug برای شناسایی، نیاز به افزودن وابستگیهای ذیل در فایل project.json برنامه را دارد:
{ "dependencies": { //same as before "Microsoft.Extensions.Logging": "1.0.0", "Microsoft.Extensions.Logging.Console": "1.0.0", "Microsoft.Extensions.Logging.Debug": "1.0.0" } }
در اینجا میتوانید ریز وقایعی را که توسط ASP.NET Core لاگ شدهاست، مشاهده کنید. برای مثال چه درخواستی صورت گرفتهاست و چقدر اجرای آن زمانبردهاست.
این فعال سازی مرتبط است به متد AddDebug که اضافه شد. اگر میخواهید خروجی AddConsole را هم مشاهده کنید، از طریق خط فرمان، به پوشهی اصلی پروژه وارد شده و سپس دستور dotnet run را اجرا کنید:
دستور dotnet run سبب راه اندازی وب سرور برنامه بر روی پورت 5000 شدهاست که در تصویر نیز مشخص است.
بنابراین اینبار برای دسترسی به برنامه باید مسیر http://localhost:5000 را در مرورگر خود طی کنید. در اینجا نیز میتوان حالتهای مختلف اطلاعات لاگ شده را مشاهده کرد و تمام اینها مرتبط هستند به ذکر متد AddConsole .
کار با سرویس ثبت وقایع ASP.NET Core از طریق تزریق وابستگیها
برای کار با سرویس ثبت وقایع توکار ASP.NET Core در قسمتهای مختلف برنامه، میتوان از ترزیق وابستگی ILogger آن استفاده کرد:
[Route("[controller]")] public class AboutController : Controller { private readonly ILogger<AboutController> _logger; public AboutController(ILogger<AboutController> logger) { _logger = logger; } [Route("")] public ActionResult Hello() { _logger.LogInformation("Running Hello"); return Content("Hello from DNT!"); }
سپس با توجه به اینکه این سرویس جزو سرویسهای از پیش ثبت شدهی ASP.NET Core است، امکانات آن بدون نیاز به تنظیمات بیشتری در دسترس است. برای مثال از متد LogInformation آن در اکشن متد Hello استفاده شدهاست و خروجی عبارت لاگ شدهی آنرا در اینجا میتوانید مشاهده کنید:
سطوح مختلف ثبت وقایع
اینترفیس ILogger به همراه متدهای مختلفی است؛ مانند LogError، LogDebug و غیره. معانی آنها به شرح زیر هستند:
Debug (1): ثبت واقعهای است با بیشترین حد جزئیات ممکن که عموما شامل اطلاعات حساسی نیز میباشد. بنابراین نباید در حالت ارائهی نهایی برنامه فعال شود.
(2) Verbose: ثبت وقایعی مفصل، جهت بررسی مشکلات در حین توسعهی برنامه. تنها باید حاوی اطلاعاتی برای دیباگ برنامه باشند.
(3) Information: عموما برای ردیابی قسمتهای مختلف برنامه مورد استفاده قرار میگیرند.
(4) Warning: جهت ثبت واقعهای نامطلوب در سیستم بکار میرود و سبب قطع اجرای برنامه نمیشود.
(5) Errors: مشکلات برنامه را که سبب قطع سرویس دهی آن شدهاند را ثبت میکند. هدف آن ثبت مشکلات واحد جاری است و نه کل برنامه.
Critical (6): هدف آن ثبت مشکلات بحرانی کل سیستم است که سبب از کار افتادن آن شدهاند.
برای مثال در حین تنظیم متد AddDebug که سبب نمایش اطلاعات لاگ شده در کنسول دیباگ ویژوال استودیو میشود، میتوان حداقل سطح ثبت وقایع را نیز ذکر کرد:
loggerFactory.AddDebug(minLevel: LogLevel.Information);
البته ترتیب واقعی این سطوح را در enum مرتبط با آنها بهتر میتوان مشاهده کرد:
public enum LogLevel { Trace, Debug, Information, Warning, Error, Critical, None, }
یک نکته: زمانیکه متد AddDebug را بدون پارامتر فراخوانی میکنید، حداقل سطح ثبت وقایع آن به Information تنظیم شدهاست. یعنی در این لاگ، خبری از اطلاعات Debug نخواهد بود (چون سطح دیباگ پایینتر است از Information). بنابراین اگر میخواهید این اطلاعات را هم مشاهده کنید باید پارامتر minLevel آنرا به LogLevel.Debug تنظیم نمائید.
امکان استفادهی از پروایدرهای ثبت وقایع ثالث
تا اینجا، دو نمونه از پروایدرهای توکار ثبت وقایع ASP.NET Core را بررسی کردیم. اگر نیاز به ثبت این اطلاعات با فرمتهای مختلف و یا در بانک اطلاعاتی وجود دارد، میتوان به تامین کنندههای ثالثی که قابلیت کار با ILoggerFactory را دارند نیز مراجعه کرد. برای مثال:
- elmah.io - provider for the elmah.io service
- Loggr - provider for the Loggr service
- NLog - provider for the NLog library
- Serilog - provider for the Serilog library
- چرا به کامنت گذاری یا مستند نویسی نیاز داریم؟
- چگونه کامنت بنویسیم؟
- انواع کامنتها چیست؟
- چه کامنتهایی اشتباه هستند؟
همانطور که بیان کردیم، کامنت گذاری یکی از مهمترین کارهایی است که یک برنامه نویس انجام میدهد. به خصوص زمانیکه به صورت تیمی کار میکنید، این امر مهمتر از قبل خود را نشان میدهد. بسیاری از برنامه نویسان که بیشتر دلیل آن تنبلی است، از این کار سرباز میزنند و ممکن است آن را اتلاف وقت بدانند. ولی با کامنت گذاری فهم و درک کد، در آینده بالاتر میرود. در مقالهی تخصصی «هنر کامنت نویسی» نوشتهی «برنهارد اسپویدا» بهانههای جالبی از برنامه نویسان را برای سرباز زدن از اینکار، ذکر شده است؛ به عنوان نمونه:
من کدم را به خوبی متوجه میشوم.کد خوب، خودش گویای همه چیز هست.وقتی برای کامنت نویسی وجود ندارد. باید چسبید به کد.
- شاید امروز معنای یک کد را متوجه شوید، ولی آیا در آینده، مثلا یک سال بعد هم چنین خواهد بود؟
- آیا میتوانید هر سیستمی را که طراحی میکنید، به خاطر بسپارید که فعالیتهایش را به چه نحوی انجام میدهد؟
- اگر در یک کار تیمی باشید، شاید شما متوجه کدتان میشوید، ولی آیا تضمینی وجود دارد که دیگران هم متوجه روش شما شوند؟
- آیا کدی که شما بر روی آن فکر کردهاید و در ذهن خود روش انجام آن را ترسیم کردهاید، میتواند برای برنامه نویسی که کد شما را میبیند هم رخ دهد؟
- اگر شما به صورت تیمی کاری را انجام دهید و یکی از برنامه نویسهای شما از تیم جدا شود، چگونه میتوانید کار او را دنبال کنید؟
- اگر برای برنامه نویسی اتفاق یا حادثهای پیش بیاید که دسترسی شما به او ممکن نباشد چه؟
Documentary Comments: این مستند سازی در سطح یک سند مثل فایل یا به خصوص یک پروژه رخ میدهد که شامل اطلاعات و تاریخچهی آن سند است که این اطلاعات به شرح زیر هستند:
File Name | نام سند |
File Number/Version Number | شماره نسخه آن سند |
Creation Date | تاریخ ایجاد آن |
Last Modification Date | تاریخ آخرین تغییر سند |
Author's Name | سازندهی سند |
Copyright Notice | اطلاعاتی در مورد کپی رایت سند |
Purpose Of Program | هدف کاری برنامه. یک خلاصه از آن چه برنامه انجام میدهد. |
Change History | لیستی از تغییرات مهمی که در جریان ایجاد آن رخ داده است. |
Dependencies | وابستگیهای سند. بیشتر در سطح پروژه معنا پیدا میکند؛ مانند نمونهی آن برای سایت جاری که به صورت عمومی منتشر شده است. |
Special Hardware Requirements | سخت افزار مورد نیاز برای اجرای برنامه. حتی قسمتی میتواند شامل نیازمندیهای نرم افزاری هم باشد. |
PCMBOAT5.PAS************************************************************* ** File: PCMBOAT5.PAS Author: B. Spuida Date: 1.5.1999 Revision: 1.1 PCM-DAS08 and -16S/12 are supported. Sorting routine inserted. Set-files are read in and card as well as amplification factor are parsed. 1.1.1 Standard deviation is calculated. 1.1.2 Median is output. Modal value is output. 1.1.4 Sign in Set-file is evaluated. Individual values are no longer output. (For tests with raw data use PCMRAW.EXE) To do: outliers routine to be revised. Statistics routines need reworking. Existing Datafile is backed up. Purpose: Used for measurement of profiles using the Water-SP-probes using the amplifier andthe PCM-DAS08-card, values are acquired with n = 3000. Measurements are taken in 1 second intervals. The values are sorted using Quicksort and are stacked "raw" as well as after dismissing the highest and lowest 200 values as 'outliers'. Requirements: The Card must have an A/D-converter. Amplifier and probes must be connected. Analog Signal must be present. CB.CFG must be in the directory specified by the env-Variable "CBDIREC" or in present directory.
در بالا، خصوصیت کپی رایت حذف شده است. دلیل این امر این است که این برنامه برای استفاده در سطح داخلی یک شرکت استفاده میشود.
Functional Comments: کامنت نویسی در سطح کاربردی به این معنی نیست که شما اتفاقاتی را که در یک متد یا کلاس یا هر بخشی روی میدهد، خط به خط توضیح دهید؛ بلکه چرخهی کاری آن شی را هم توضیح بدهید کفایت میکند. این مورد میتواند شامل این موارد باشد:
- توضیحی در مورد باگهای این قسمت
- یادداشت گذاری برای دیگر افراد تیم
- احتمالاتی که برای بهبود ویژگیها و کارایی کد وجود دارد.
Explanatory Comment: کامنت گذاری توصیفی در سطح کدنویسی رخ میدهد و شامل توضیح در مورد کارکرد یک شیء و توضیح کدهای شیء مربوطه میگردد. برای قرار دادن کامنت الزامی نیست که کدها را خط به خط توضیح دهید یا اینکه خطوط ساده را هم تشریح کنید؛ بلکه کامنت شما همینقدر که بتواند نحوهی کارکرد هر چند خط کد مرتبط به هم را هم توضیح دهد، کافی است. این توضیحها بیشتر شامل موارد زیر میشوند:
- کدهای آغازین
- کدهای خروجی
- توضیح کوتاه از آنچه که این شیء ، متد یا ... انجام میدهد.
- حلقههای طولانی یا پیچیده
- کدهای منطقی عجیب و پیچیده
- Regular Expression
کدهای آغازین شروع خوبی برای تمرین خواهند بود. به عنوان نمونه اینکه توضیحی در مورد ورودی و خروجی یک متد بدهید که آرگومانهای ورودی چه چیزهایی هستند و چه کاربری داردند و در آغاز برنامه، برنامه چگونه آماده سازی و اجرا میشود. مقادیر پیش فرض چه چیزهایی هستند و پروژه چگونه تنظیم و مقداردهی میشود.
کدهای خروجی هم به همین منوال است. خروجیهای نرمال و غیرنرمال آن چیست؟ کدهای خطایی که ممکن است برگرداند و ... که باید به درستی توضیح داده شوند.
توضیح اشیاء و متدها و ... شامل مواردی چون: هدف از ایجاد آن، آرگومان هایی که به آن پاس میشوند و خروجی که میدهد و اینکه قالب یا فرمت آنها چگونه است و چه محدودیتهایی در مقادیر قابل انتظار وجود دارند. ذکر محدودیتها، مورد بسیاری مهمی است و دلیل بسیاری از باگها، عدم توجه یا اطلاع نداشتن از وجود این محدودیت هاست. مثلا محدودهی خاصی برای آرگومانهای ورودی وجود دارد؟ چه اتفاقی میافتد اگر به یک بافر 128 کاراکتری، 1024 کاراکتر را ارسال کنیم؟
کدهای منطقی عجیب، یکی از حیاتیترین بخشهای کامنت گذاری برای نگه داری یک برنامه در آینده است. به عنوان نمونه استفاده از عبارات با قاعده، اغلب اوقات باعث سردرگمی کاربران شده است. پس توضیح دادن در مورد این نوع کدها، توصیه زیادی میشود. اگر عبارات با قاعده شما طولانی هستند، سعی کنید از هم جدایشان کنید یا خطوط آن را بشکنید و هر خط آن را توضیح دهید.
هر زبانی از یک سیستم خاص برای کامنت گذاری استفاده میکند. به عنوان مثال پرل از سیستم (POD (Plain Old Documentation استفاده میکند یا برای Java سیستم JavaDoc یا برای PHP از سیستم PHPDoc (+ ) که پیاده سازی از JavaDoc میباشد استفاده میکنند. این سیستم برای سی شارپ استفاده از قالب XML است. کد زیر نمونهای از استفاده از این سیستم است:
// XMLsample.cs // compile with: /doc:XMLsample.xml using System; /// <summary> /// Class level summary documentation goes here.</summary> /// <remarks> /// Longer comments can be associated with a type or member /// through the remarks tag</remarks> public class SomeClass { /// <summary> /// Store for the name property</summary> private string myName = null; /// <summary> /// The class constructor. </summary> public SomeClass() { // TODO: Add Constructor Logic here } /// <summary> /// Name property </summary> /// <value> /// A value tag is used to describe the property value</value> public string Name { get { if (myName == null) { throw new Exception("Name is null"); } return myName; } } /// <summary> /// Description for SomeMethod.</summary> /// <param name="s"> Parameter description for s goes here</param> /// <seealso cref="String"> /// You can use the cref attribute on any tag to reference a type or member /// and the compiler will check that the reference exists. </seealso> public void SomeMethod(string s) { } }
دستورات سیستم کامنت گذاری سی شارپ
در سایت جاری، دو مقاله زیر اطلاعاتی در رابطه با نحوهی کامنت گذاری ارئه دادهاند.
- در مقاله «زیباتر کد بنویسیم» چند مورد آن به این موضوع اختصاص دارد.
- مقاله «وادار کردن خود به کامنت نوشتن» گزینهی کامنت گذاری اجباری در ویژوال استودیو را معرفی میکند.
EF Code First #3
- ضمنا این روش کار نیست برای انتقال اطلاعات. اگر از sql server 2008 استفاده میکنید، امکان تهیه خروجی به صورت اسکریپت را دارد. یکی از نکاتی که در این اسکریپت لحاظ میشود، دو دستور IDENTITY_INSERT زیر است که با SQL CE هم کار میکند:
SET IDENTITY_INSERT [table1] ON; GO INSERT INTO [table1] ([Id],...) VALUES (1,...); GO SET IDENTITY_INSERT [table1] OFF; GO
ایجاد مدلها و موجودیتهای برنامهی Minimal Blog
در مثال این سری، هر نویسنده میتواند بلاگ خاص خودش را داشته باشد و در هر بلاگ، تعدادی مقاله منتشر کند. هر مقاله هم میتواند تعدادی تگ یا گروه مرتبط را داشته باشد.
ساختار ابتدایی موجودیت نویسندگان مطالب بلاگ
این موجودیتها در پوشهی جدیدی به نام Model پروژهی MinimalBlog.Domain اضافه خواهند شد:
namespace MinimalBlog.Domain.Model; public class Author { public int Id { get; set; } public string FirstName { get; set; } = default!; public string LastName { get; set; } = default!; public string FullName => FirstName + " " + LastName; public DateTime DateOfBirth { get; set; } public string? Bio { get; set; } }
ساختار ابتدایی موجودیت مقالات بلاگ
namespace MinimalBlog.Domain.Model; public class Article { public Article() { Categories = new List<Category>(); } public int Id { get; set; } public string Title { get; set; } = default!; public string? Subtitle { get; set; } public string Body { get; set; } = default!; public int AuthorId { get; set; } public Author Author { get; set; } = default!; public DateTime DateCreated { get; set; } public DateTime LastUpdated { get; set; } public int NumberOfLikes { get; set; } public int NumberOfShares { get; set; } public ICollection<Category> Categories { get; set; } }
ساختار ابتدایی بلاگهای اختصاصی قابل تعریف
namespace MinimalBlog.Domain.Model; public class Blog { public Blog() { Contributors = new List<Author>(); } public int Id { get; set; } public string Name { get; set; } = default!; public string Description { get; set; } = default!; public DateTime CreatedDate { get; set; } public int AuthorId { get; set; } public Author Owner { get; set; } = default!; public ICollection<Author> Contributors { get; } }
ساختار ابتدایی گروههای مقالات بلاگ
namespace MinimalBlog.Domain.Model; public class Category { public Category() { Articles = new List<Article>(); } public int Id { get; set; } public string Name { get; set; } = default!; public string Description { get; set; } = default!; public ICollection<Article> Articles { get; set; } }
معرفی موجودیتهای تعریف شده به لایهی Dal
لایهی Dal جایی است که DbContext برنامه تعریف میشود و موجودیتها فوق توسط DbSetها در معرض دید EF-Core قرار میگیرند. به همین جهت ابتدا فایل MinimalBlog.Dal.csproj را به صورت زیر تغییر میدهیم:
<Project Sdk="Microsoft.NET.Sdk"> <PropertyGroup> <TargetFramework>net6.0</TargetFramework> <ImplicitUsings>enable</ImplicitUsings> <Nullable>enable</Nullable> </PropertyGroup> <ItemGroup> <ProjectReference Include="..\MinimalBlog.Domain\MinimalBlog.Domain.csproj" /> </ItemGroup> <ItemGroup> <PackageReference Include="Microsoft.EntityFrameworkCore" Version="6.0.2" /> <PackageReference Include="Microsoft.EntityFrameworkCore.SqlServer" Version="6.0.2" /> <PackageReference Include="Microsoft.EntityFrameworkCore.Tools" Version="6.0.2"> <PrivateAssets>all</PrivateAssets> <IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets> </PackageReference> </ItemGroup> </Project>
به علاوه تعاریفی مانند ImplicitUsings و Nullable را هم مشاهده میکنید که با توجه به استفادهی از فایل Directory.Build.props غیرضروری و تکراری هستند؛ چون این فایل مخصوص به همراه این تعاریف سراسری نیز هست.
سپس به پروژهی Dal، کلاس جدید MinimalBlogDbContext را به صورت زیر اضافه میکنیم تا مدلهای برنامه را در معرض دید EF-Core قرار دهد:
using Microsoft.EntityFrameworkCore; using MinimalBlog.Domain.Model; namespace MinimalBlog.Dal; public class MinimalBlogDbContext : DbContext { public MinimalBlogDbContext(DbContextOptions options) : base(options) { } public DbSet<Article> Articles { get; set; } = default!; public DbSet<Category> Categories { get; set; } = default!; public DbSet<Author> Authors { get; set; } = default!; public DbSet<Blog> Blogs { get; set; } = default!; }
ایجاد و اجرای Migrations
پس از تعریف MinimalBlogDbContext، اکنون نوبت به ایجاد کلاسهای Migrations و اجرای آنها جهت ایجاد بانک اطلاعاتی متناظر با مدلهای برنامه است. برای این منظور در ابتدا به پروژهی Api مراجعه کرده و فایل appsettings.json را به صورت زیر تکمیل میکنیم:
{ "Logging": { "LogLevel": { "Default": "Information", "Microsoft.AspNetCore": "Warning" } }, "AllowedHosts": "*", "ConnectionStrings": { "Default": "Data Source=(localdb)\\MSSQLLocalDB;Initial Catalog=MinimalBlog;Integrated Security=True;Connect Timeout=30;Encrypt=False;TrustServerCertificate=False;ApplicationIntent=ReadWrite;MultiSubnetFailover=False" } }
<Project Sdk="Microsoft.NET.Sdk.Web"> <PropertyGroup> <TargetFramework>net6.0</TargetFramework> <Nullable>enable</Nullable> <ImplicitUsings>enable</ImplicitUsings> </PropertyGroup> <ItemGroup> <PackageReference Include="Swashbuckle.AspNetCore" Version="6.2.3" /> <PackageReference Include="Microsoft.EntityFrameworkCore" Version="6.0.2" /> <PackageReference Include="Microsoft.EntityFrameworkCore.SqlServer" Version="6.0.2" /> <PackageReference Include="Microsoft.EntityFrameworkCore.Tools" Version="6.0.2"> <PrivateAssets>all</PrivateAssets> <IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets> </PackageReference> </ItemGroup> <ItemGroup> <ProjectReference Include="..\MinimalBlog.Domain\MinimalBlog.Domain.csproj" /> <ProjectReference Include="..\MinimalBlog.Dal\MinimalBlog.Dal.csproj" /> </ItemGroup> </Project>
using Microsoft.EntityFrameworkCore; using MinimalBlog.Dal; var builder = WebApplication.CreateBuilder(args); builder.Services.AddEndpointsApiExplorer(); builder.Services.AddSwaggerGen(); var connectionString = builder.Configuration.GetConnectionString("Default"); builder.Services.AddDbContext<MinimalBlogDbContext>(opt => opt.UseSqlServer(connectionString));
پس از این تنظیمات به پوشهی MinimalBlog.Dal وارد شده و فایل _01-add_migrations.cmd را اجرا میکنیم (این فایل به همراه پیوست قسمت اول، ارائه شدهاست). محتوای این فایل به صورت زیر است:
For /f "tokens=2-4 delims=/ " %%a in ('date /t') do (set mydate=%%c_%%a_%%b) For /f "tokens=1-2 delims=/:" %%a in ("%TIME: =0%") do (set mytime=%%a%%b) dotnet tool update --global dotnet-ef --version 6.0.2 dotnet build dotnet ef migrations --startup-project ../MinimalBlog.Api/ add V%mydate%_%mytime% --context MinimalBlogDbContext pause
البته چون کدهای تولید شدهی به صورت خودکار الزاما با Roslyn analyzers برنامه سازگاری ندارند، آنها را توسط فایل مخصوص editorconfig. قرار گرفتهی در پوشهی MinimalBlog.Dal\Migrations، از لیست آنالیزهای برنامه خارج میکنیم. محتوای این فایل ویژه به صورت زیر است:
[*.cs] generated_code = true
پس از ایجاد کلاسهای Migration، اکنون نوبت به اجرای آنها بر روی بانک اطلاعاتی است که در رشتهی اتصالی مشخص کردیم. برای اینکار فایل MinimalBlog.Dal\_02-update_db.cmd را اجرا میکنیم که چنین محتویاتی دارد:
dotnet tool update --global dotnet-ef --version 6.0.2 dotnet build dotnet ef --startup-project ../MinimalBlog.Api/ database update --context MinimalBlogDbContext pause
کامپوننت jumbotron
از Jumbotron برای نمایش متنی مشخص در بالای یک صفحه، استفاده میشود. دو روش استفادهی از آن در بوت استرپ 4 وجود دارند:
- داخل container:
<div class="container"> <header class="jumbotron mt-4"> <div class="display-2 mb-4">Our Mission</div> <p class="lead">Wisdom Pet Medicine strives to blend the best in traditional and alternative medicine in the diagnosis and treatment of companion animals including dogs, cats, birds, reptiles, rodents, and fish. We apply the wisdom garnered in the centuries old tradition of veterinary medicine, to find the safest treatments and cures.</p> </header>
در اینجا با اعمال کلاس jumbotron، متن header، داخل یک قاب با گوشههای گرد قرار میگیرد و مشخصتر نمایش داده خواهد شد. همچنین با mt-4، فاصلهای را بین آن و بالای صفحه ایجاد کردهایم.
- خارج از container:
<header class="jumbotron jumbotron-fluid"> <div class="container"> <div class="display-2 mb-4">Our Mission</div> <p class="lead">Wisdom Pet Medicine strives to blend the best in traditional and alternative medicine in the diagnosis and treatment of companion animals including dogs, cats, birds, reptiles, rodents, and fish. We apply the wisdom garnered in the centuries old tradition of veterinary medicine, to find the safest treatments and cures.</p> </div> </header>
اگر میخواهیم این قاب، تمام عرض صفحه را پر کند و همچمنین لبههای گرد آن نیز حذف شوند، میتوان از کلاس jumbotron-fluid استفاده کرد و آنرا خارج از container قرار داد. سپس برای اینکه متن داخل آن با container زیر آن تراز شود، میتوان یک container را در اینجا داخل jumbotron تعریف کرد.
کنترل ظاهر جداول، در بوت استرپ 4
بوت استرپ 4 به همراه تعدادی کلاس ویژه است که برای بهبود ظاهر المان استاندارد جدول، ارائه شدهاند. آنها را در طی مثالهایی بررسی خواهیم کرد.
برای رسیدن به چنین تصویری، تغییرات زیر را بر روی یک جدول استاندارد HTML اعمال کردهایم:
<table class="table table-striped table-hover table-bordered table-responsive"> <thead class="thead-light">
- کلاس table-striped سبب میشود تا ردیفها، یک در میان با رنگی متمایز نمایش داده شوند.
- با افزودن table-hover، رنگ ردیفهای جدول با عبور اشارهگر ماوس از روی آنها تغییر میکند.
- کلاس table-bordered کار نمایش قاب جدول را انجام میدهد.
- کلاس table-responsive سبب میشود تا در اندازههای کوچک صفحه، یک اسکرول بار افقی برای نمایش آیتمهای جدول ظاهر شود و یا میتوان از کلاس table-sm نیز استفاده کرد تا padding تعریف شدهی در جدول، کاهش یابند. این کلاس، قابلیت پذیرش break-pointها را نیز دارد؛ مانند table-responsive-md.
- کلاسهای thead-light و یا thead-dark که بر روی تگ thead قرار میگیرند، رنگ پس زمینهی هدر جدول را مشخص میکنند.
- برای تغییر رنگ پس زمینه و متن یک ردیف میتوان از کلاسهای bg-color و text-color استفاده کرد:
<tr class="bg-danger text-light">
<td class="table-success">$100.00 </td>
کامپوننت جدید card در بوت استرپ 4
پنلهای بوت استرپ 3 حذف و بجای آن کامپوننت جدیدی به نام card در نگارش 4 آن ارائه شدهاست که با افزودن کلاس آن به یک div، بلافاصله قابی با گوشههای گرد به آن اضافه میشود.
<section class="card mb-5" id="drwinthrop"> <div class="card-body"> <img class="card-img img-fluid" src="images/testimonial-mcphersons.jpg" alt="Doctor Winthrop Photo"> <h2 class="card-title">Dr. Stanley Winthrop</h2> <h5 class="card-subtitle">Behaviorist</h5> <p class="card-text">Dr. Winthrop is the guardian of Missy, a three-year old Llaso mix, who he adopted at the shelter. Dr. Winthrop is passionate about spay and neuter and pet adoption, and works tireless hours outside the clinic, performing free spay and neuter surgeries for the shelter.</p> <a class="card-link" href="#">About Me</a> <a class="card-link" href="#">My Pets</a> <a class="card-link" href="#">Client Slideshow</a> </div> </section>
- سپس یک card میتواند دارای تصویری واکنشگرا باشد که عرض card را پوشش میدهد. این تصویر با کلاس card-img مشخص میشود.
در اینجا امکان تعریف card-img-top و card-img-bottom نیز وجود دارند. این موارد تصویر card را در بالا و یا پایین آن، بدون padding، نمایش میدهند. اگر میخواهید متنی را بر روی این تصویر نمایش دهید، از کلاس card-img-overlay استفاده کنید. در این حالتها باید تصویر را خارج از card-body قرار دهید.
- عنوان و زیرعنوان یک card، توسط کلاسهای card-title و card-subtitle تعیین میشوند.
- متن داخل آنرا با کلاس card-text مشخص میکنیم.
- لینکهای ذیل آن نیز توسط کلاس card-link در طی یک ردیف نمایش داده میشوند.
امکان تعیین رنگ پس زمینه، حاشیه و متن یک card نیز وجود دارند:
<section class="card mb-5 bg-primary text-light border-warning" id="drchase">
و فرمول کلی رنگهای آن نیز به صورت زیر میباشد:
میتوان برای یک card، هدر و فوتر نیز تعریف کرد:
<section class="card mb-5" id="drsanders"> <div class="card-header"> <h2 class="card-title">Dr. Kenneth Sanders</h2> <h5 class="card-subtitle">Nutritionist</h5> </div> <div class="card-body"> <img class="card-img img-fluid" src="images/testimonial-mcphersons.jpg" alt="Doctor Sanders Photo"> <p class="card-text">Leroy walked into Dr. Sanders front door when she was moving into a new house. After searching for weeks for Leroy's guardians, she decided to make Leroy a part of her pet family, and now has three cats.</p> </div> <div class="card-footer"> <a class="card-link" href="#">About Me</a> <a class="card-link" href="#">My Pets</a> <a class="card-link" href="#">Client Slideshow</a> </div> </section>
برای تعریف یک list-group در داخل یک card، به صورت زیر عمل میکنیم:
<section class="card mb-5" id="drwong"> <div class="card-body"> <img class="card-img img-fluid" src="images/testimonial-mcphersons.jpg" alt="Doctor Wong Photo"> <h2 class="card-title">Dr. Olivia Wong</h2> <h5 class="card-subtitle">Preventive Care</h5> <p class="card-text">Dr. Wong is a cancer survivor who was fortunate enough to get to spend time with a therapy dog during her recovery. She became passionate about therapy animals, and has started her own foundation to train and provide education to patients in recovery. Now she gets her own dose of daily therapy from her husky, Lilla.</p> </div> <div class="list-group list-group-flush"> <a class="list-group-item" href="#">About Me</a> <a class="list-group-item" href="#">My Pets</a> <a class="list-group-item" href="#"> Client Slideshow </a> </div> </section>
تعیین نحوهی چیدمان cards در بوت استرپ 4
اگر چندین card در یک صفحه تعریف شدهاند، برای تعیین نحوهی قرارگیری آنها در کنار یکدیگر میتوان یا از سیستم طرحبندی متداول بوت استرپ استفاده کرده و یا امکان تعریف گروهی از آنها نیز وجود دارد. برای اینکار کافی است یک div با کلاس card-group را تعریف و سپس تمام cards را داخل آن قرار دهیم:
<div class="container"> <div class="card-group">
اگر از کلاس card-columns استفاده کنیم، تمام cards را به صورت خودکار در ستونها و ردیفها، قرار میدهد که بعضی از آنها بلندتر و بعضی دیگر کوتاهتر هستند (نوعی نمایش کاشیکاری شدهاست):
ولی در کل اگر نیاز به کنترل بیشتری دارید، از همان روش متداول تعریف ردیفها و ستونهای سیستم طرحبندی بوت استرپ استفاده کنید.
المان media در بوت استرپ 4
برای نمایش متداول متن و تصویر که قرار است تصویر، در یک ستون و متن، در ستونی دیگر باشد، بوت استرپ 4 به همراه کلاس media است که بر اساس Flexbox بازنویسی شدهاست.
<body> <div class="container"> <section class="media mb-5" id="drwinthrop"> <img class="d-flex align-self-center img-fluid rounded mr-3" style="width:30%" src="images/testimonial-mcphersons.jpg" alt="Doctor Winthrop Photo"> <div class="media-body"> <h2>Dr. Stanley Winthrop</h2> <h5>Behaviorist</h5> <p>Dr. Winthrop is the guardian of Missy, a three-year old Llaso mix, who he adopted at the shelter. Dr. Winthrop is passionate about spay and neuter and pet adoption, and works tireless hours outside the clinic, performing free spay and neuter surgeries for the shelter.</p> </section> </div> </body>
ابتدا توسط کلاس media یک container را تعریف میکنیم. سپس تصویر، یک ستون و media-body ستون دیگر را تشکیل میدهد.
با استفاده از d-flex، المان تصویر را به یک Flexbox container تبدیل کرده و با استفاده از کلاس align-self-center، آنرا در میانهی ستون قرار میدهیم. همچنین در اینجا توسط mr-3، فاصلهی آنرا با متن ستون کناری تنظیم کردهایم.
کدهای کامل این قسمت را از اینجا میتوانید دریافت کنید: Bootstrap4_09.zip
کارهای سورس باز قابل توجهی از برنامه نویسهای ایرانی یافت نمیشوند؛ عموما کارهای ارائه شده در حد یک سری مثال یا کتابخانههای کوچک است و در همین حد. یا گاهی هم انگشت شمار پروژههایی کامل. مثل یک وب سایت یا یک برنامه نصفه نیمه دبیرخانه و امثال آن. اینها هم خوب است از دیدگاه به اشتراک گذاری اطلاعات، ایدهها و هم ... یک مزیت دیگر را هم دارد و آن این است که بتوان کیفیت عمومی کد نویسی را حدس زد.
اگر کیفیت کدها رو بررسی کنید به یک نتیجهی کلی خواهید رسید: "عموم برنامه نویسهای ایرانی (حداقل اینهایی که چند عدد کار سورس باز به اشتراک گذاشتهاند) با مفهومی به نام Refactoring هیچگونه آشنایی ندارند". مثلا یک برنامهی WinForm تهیه کردهاند و کل سورس برنامه همان چند عدد فرم برنامه است و هر فرم بالای 3000 سطر کد دارد. دوستان عزیز! به این میگویند «فاجعهای به نام کدنویسی!» صاحب اول و آخر این نوع کدها خودتان هستید! شاید به همین جهت باشد که عمدهی پروژههای سورس باز پس از اینکه برنامه نویس اصلی از توسعهی آن دست میکشد، «میمیرند». چون کسی جرات نمیکند به این کدها دست بزند. مشخص نیست الان این قسمت را که تغییر دادم، کجای برنامه به هم ریخت. تستی ندارند. ساختاری را نمیتوان از آنها دریافت. منطق قسمتهای مختلف برنامه از هم جدا نشده است. برنامه یک فرم است با چند هزار سطر کد در یک فایل! کار شما شبیه به کد اسمبلی چند هزار سطری حاصل از decompile یک برنامه که نباید باشد!
به همین جهت قصد دارم یک سری «ساده» Refactoring را در این سایت ارائه دهم. روی سادگی هم تاکید کردم، چون اگر عموم برنامه نویسها با همین موارد به ظاهر ساده آشنایی داشتند، کیفیت کد نویسی بهتری را میشد در نتایج عمومی شده، شاهد بود.
این مورد در راستای نظر سنجی انجام شده هم هست؛ درخواست مقالات خالص سی شارپ در صدر آمار فعلی قرار دارد.
Refactoring چیست؟
Refactoring به معنای بهبود پیوسته کیفیت کدهای نوشته شده در طی زمان است؛ بدون ایجاد تغییری در عملکرد اصلی برنامه. به این ترتیب به کدهایی دست خواهیم یافت که قابلیت آزمون پذیری بهتری داشته، در مقابل تغییرات مقاوم و شکننده نیستند و همچنین امکان به اشتراک گذاری قسمتهایی از آنها در پروژههای دیگر نیز میسر میشود.
قسمت اول - مجموعهها را کپسوله کنید
برای مثال کلاسهای ساده زیر را در نظر بگیرید:
namespace Refactoring.Day1.EncapsulateCollection
{
public class OrderItem
{
public int Id { set; get; }
public string Name { set; get; }
public int Amount { set; get; }
}
}
using System.Collections.Generic;
namespace Refactoring.Day1.EncapsulateCollection
{
public class Orders
{
public List<OrderItem> OrderItems { set; get; }
}
}
نکته اول: هر کلاس باید در داخل یک فایل جدا قرار گیرد. «لطفا» یک فایل درست نکنید با 50 کلاس داخل آن. البته اگر باز هم یک فایل باشد که بتوان 50 کلاس را داخل آن مشاهده کرد که چقدر هم عالی! نه اینکه یک فایل باشد تا بعدا 50 کلاس را با Refactoring از داخل آن بیرون کشید!
قطعه کد فوق، یکی از روشهای مرسوم کد نویسی است. مجموعهای به صورت یک List عمومی در اختیار مصرف کننده قرار گرفته است. حال اجازه دهید تا با استفاده از برنامه FxCop برنامه فوق را آنالیز کنیم. یکی از خطاهایی را که نمایش خواهد داد عبارت زیر است:
Error, Certainty 95, for Do Not Expose Generic Lists
بله. لیستهای جنریک را نباید به همین شکل در اختیار مصرف کننده قرار داد؛ چون به این صورت هر کاری را میتوانند با آن انجام دهند، مثلا کل آن را تعویض کنند، بدون اینکه کلاس تعریف کننده آن از این تغییرات مطلع شود.
پیشنهاد FxCop این است که بجای List از Collection یا IList و موارد مشابه استفاده شود. اگر اینکار را انجام دهیم اینبار به خطای زیر خواهیم رسید:
Warning, Certainty 75, for Collection Properties Should Be ReadOnly
FxCop پیشنهاد میدهد که مجموعه تعریف شده باید فقط خواندنی باشد.
چکار باید کرد؟
بجای استفاده از List جهت ارائه مجموعهها، از IEnumerable استفاده کنید و اینبار متدهای Add و Remove اشیاء به آنرا به صورت دستی تعریف نمائید تا بتوان از تغییرات انجام شده بر روی مجموعه ارائه شده، در کلاس اصلی آن مطلع شد و امکان تعویض کلی آنرا از مصرف کننده گرفت. برای مثال:
using System.Linq;
using System.Collections.Generic;
namespace Refactoring.Day1.EncapsulateCollection
{
public class Orders
{
private int _orderTotal;
private List<OrderItem> _orderItems;
public IEnumerable<OrderItem> OrderItems
{
get { return _orderItems; }
}
public void AddOrderItem(OrderItem orderItem)
{
_orderTotal += orderItem.Amount;
_orderItems.Add(orderItem);
}
public void RemoveOrderItem(OrderItem orderItem)
{
var order = _orderItems.Find(o => o == orderItem);
if (order == null) return;
_orderTotal -= orderItem.Amount;
_orderItems.Remove(orderItem);
}
}
}
اکنون اگر برنامه را مجددا با fxCop آنالیز کنیم، دو خطای ذکر شده دیگر وجود نخواهند داشت. اگر این تغییرات صورت نمیگرفت، امکان داشتن فیلد _orderTotal غیر معتبری در کلاس Orders به شدت بالا میرفت. زیرا مصرف کننده مجموعه OrderItems میتوانست به سادگی آیتمی را به آن اضافه یا از آن حذف کند، بدون اینکه کلاس Orders از آن مطلع شود یا اینکه بتواند عکس العمل خاصی را بروز دهد.