پس از انتشار جزوهی SVN در حدود دو سال قبل، ایمیل در این مورد زیاد داشتم. یکی از سؤالات هم این بود که: "چگونه از SVN جهت مدیریت نگارشهای مختلف یک بانک اطلاعاتی اس کیوال سرور در یک تیم استفاده کنیم؟ (منظور مدیریت schema است)" و من هم پاسخ مناسبی برای این مورد نداشتم چون کلاینتهای SVN حداقل با Management studio یکپارچه نمیشود (بر خلاف ابزارهای موجود برای VS.NET مانند VisualSVN ، AnkhSVN و غیره). صد البته میشود از آن همانند اعمال نگارش به یک فایل Text معمولی مانند فایلهای SQL استفاده کرد، اما خوب ...
و خبر خوب اینکه شرکت معظم RedGate چند روز قبل یک کتاب رایگان را در این مورد منتشر کرده است:
سرفصلهای این کتاب
Chapter 1: Writing Readable SQL
Chapter 2: Documenting your Database
Chapter 3: Change Management and Source Control
Chapter 4: Managing Deployments
Chapter 5: Testing Databases
Chapter 6: Reusing T-SQL Code
Chapter 7: Maintaining a Code Library
Chapter 8: Exploring your Database Schema
Chapter 9: Searching DDL and Build Scripts
Chapter 10: Automating CRUD
Chapter 11: SQL Refactoring
دریافت
در اینجا امکان قرار دادن یک مجموعهی کامل از ردیفها و ستونها، داخل یک ستون از پیش موجود نیز وجود دارد. برای اینکار ابتدا یک row جدید را داخل یک ستون موجود ایجاد میکنیم. با اینکار بلافاصله دسترسی به گرید 12 ستونهی بوت استرپ را داخل آن ستون خواهیم داشت؛ به همراه تمام کلاسهایی که تاکنون آنها را بررسی کردیم.
یک مثال: ایجاد ستونهای تو در تو
<head> <style> img { width: 100%; height: 200px; max-height: 200px; } </style> </head> <body> <div class="container" id="services"> <div class="row"> <section class="col-sm-8"> <img src="images/image.png" alt="sample image"> <h4>Exotic Pets</h4> <p>We offer <strong>specialized</strong> care for <em>reptiles, rodents, birds,</em> and other exotic pets.</p> </section> <section class="col-sm-4"> <div class="row no-gutters"> <div class="col-2 col-sm-4"> <img src="images/image.png" class="img-thumbnail" alt="sample image"> <p>Image 1</p> </div> <div class="col-2 col-sm-4"> <img src="images/image.png" class="img-thumbnail" alt="sample image"> <p>Image 2</p> </div> <div class="col-2 col-sm-4"> <img src="images/image.png" class="img-thumbnail" alt="sample image"> <p>Image 3</p> </div> <div class="col-2 col-sm-4"> <img src="images/image.png" class="img-thumbnail" alt="sample image"> <p>Image 4</p> </div> <div class="col-2 col-sm-4"> <img src="images/image.png" class="img-thumbnail" alt="sample image"> <p>Image 5</p> </div> <div class="col-2 col-sm-4"> <img src="images/image.png" class="img-thumbnail" alt="sample image"> <p>Image 6</p> </div> </div> </section> </div> </div> </body>
و با اندازهی صفحهی بزرگتر از sm:
توضیحات:
تعریف گرید تو در تو را در داخل دومین section تعریف شده، در کدهای فوق مشاهده میکنید:
<body> <div class="container" id="services"> <div class="row"> <section class="col-sm-8"> </section> <section class="col-sm-4"> <div class="row no-gutters"> </div> </section> </div> </div> </body>
به صورت پیشفرض در بین ستونها، یک فاصلهی 15px پیشفرض وجود دارد که به آن Gutter نیز گفته میشود. برای عدم نمایش و اعمال آن میتوان از کلاس no-gutters استفاده کرد. به همین جهت در تصویر دوم، ستونهای تعریف شده به هم چسبیدهاند.
سپس هر ستون داخل این ردیف را به صورت زیر تعریف کردهایم:
<div class="col-2 col-sm-4"> <img src="images/image.png" class="img-thumbnail" alt="sample image"> <p>Image 1</p> </div>
امکان تغییر ترتیب نمایش ستونهای گرید بوت استرپ 4
امکان تغییر ترتیب نمایش ستونهای گرید، در بوت استرپ 4 پیش بینی شدهاست و این مورد نیز بر اساس break-pointهای مختلف، قابل تنظیم است که فرمول کلاسهای آنرا در ذیل مشاهده میکنید:
در اینجا ذکر break-point اختیاری است و عدد ord بین یک تا 12 تغییر میکند.
یک مثال: تغییر ترتیب نمایش ستونهای گرید
<head> <style> img { width: 100%; height: 200px; max-height: 200px; } </style> </head> <body> <div class="container" id="services"> <h2>Flex Order</h2> <div class="row"> <section class="col order-2 d-flex flex-column"> <img src="images/image.png" class="order-2" alt="sample image"> <h4>1. Exotic Pets</h4> <p>We offer <strong>specialized</strong> care for <em>reptiles, rodents, birds,</em> and other exotic pets.</p> </section> <section class="col order-1"> <img src="images/image.png" alt="sample image"> <h4>2. Grooming</h4> <p>Our therapeutic <span class="font-weight-bold">grooming</span> treatments help battle fleas, allergic dermatitis, and other challenging skin conditions.</p> </section> <section class="col order-3"> <img src="images/image.png" alt="sample image"> <h4>3. General Health</h4> <p>Wellness and senior exams, ultrasound, x-ray, and dental cleanings are just a few of our general health services.</p> </section> </div> </div> </body>
در این مثال توسط کلاس order، مکان ستونها را تغییر داده و اولین ستون را در مکان دوم، دومی را در مکان اول و سومی را در همان مکان خودش نمایش دادهایم. باید دقت داشت که در حین تعریف کلاس order بهتر است برای تمام ستونها این ترتیب را تعریف کرد تا با نتایج ناخواستهای مواجه نشویم.
همچنین کلاس order را به سایر المانهای صفحه نیز میتوان اعمال کرد. برای مثال در تصویر فوق، در ستون دوم نمایش داده شده، متن در بالا و تصویر در پایین قرار گرفتهاست. اینکار را با تبدیل این ستون به یک flex column با افزودن کلاسهای d-flex flex-column انجام دادهایم. سپس با اعمال کلاس order-2 به تصویر، این تصویر ذیل متن نمایش داده شدهاست.
یکی از کاربردهای تغییر ترتیب نمایش ستونها در دنیای واقعی، افزودن break-point به آنها (مطابق فرمول یاد شده) و سپس نمایش منوها، پیش از محتویات صفحه در اندازههای کوچکتر صفحه است. برای مثال اگر در حالت عادی، منوهای کنار صفحه نمایش داده میشوند و در ستون سوم قرار گرفتهاند، شاید بخواهید در اندازهی نمایش موبایل، ترتیب نمایش این منوها بالاتر از متن صفحه باشد و در ابتدا قرارگیرد و نه در ترتیب سوم.
امکان تغییر تراز ستونهای گرید بوت استرپ 4
چون طراحی گرید بوت استرپ 4 مبتنی بر Flexbox است، کلاسهای قابل توجهی از آن جهت غنی سازی این سیستم طرحبندی قابل استفاده هستند:
- برای تغییر تراز عمودی ستونها، کلاس align-items-ALN را میتوان به «ردیفها» اعمال کرد. در اینجا ALN یکی از مقادیر start ،center و end را میتواند داشته باشد.
- برای تغییر تراز خود ستونها، کلاس align-self-ALN را میتوان به «ستونها» اعمال کرد. در اینجا نیز ALN یکی از مقادیر start ،center و end را میتواند داشته باشد.
- برای تغییر تراز افقی ستونها، کلاس justify-content-ALN را میتوان به «ردیفها» اعمال کرد. البته ذکر عرض ستونها در این حالت الزامی است. در اینجا ALN یکی از مقادیر start ،center ،around ،between و end را میتواند داشته باشد.
مثال: بررسی روش تغییر تراز ستونها
<head> <style> img { width: 100%; height: 100px; max-height: 100px; } </style> </head> <body> <div class="container" id="services"> <div class="row bg-info align-items-center" style="height: 100vh;"> <div class="col"> <div class="row"> <section class="col"> <img src="images/image.png" alt="sample image"> <h4>Exotic Pets</h4> <p>We offer specialized care for reptiles, rodents, birds, and other exotic pets.</p> </section> <section class="col"> <img src="images/image.png" alt="sample image"> <h4>Grooming</h4> <p>Our therapeutic grooming treatments help battle fleas, allergic dermatitis, and other challenging skin conditions.</p> </section> <section class="col"> <img src="images/image.png" alt="sample image"> <h4>General Health</h4> <p>Wellness and senior exams, ultrasound, x-ray, and dental cleanings.</p> </section> </div> </div> </div> <div class="row bg-success" style="height: 100vh;"> <section class="col"> <img src="images/image.png" alt="sample image"> <h4>Exotic Pets</h4> <p>We offer specialized care for reptiles, rodents, birds, and other exotic pets.</p> </section> <section class="col align-self-center"> <img src="images/image.png" alt="sample image"> <h4>Grooming</h4> <p>Our therapeutic grooming treatments help battle fleas, allergic dermatitis, and other challenging skin conditions.</p> </section> <section class="col align-self-end"> <img src="images/image.png" alt="sample image"> <h4>General Health</h4> <p>Wellness and senior exams, ultrasound, x-ray, and dental cleanings.</p> </section> </div> <div class="row bg-warning justify-content-center" style="height: 100vh;"> <section class="col-4"> <img src="images/image.png" alt="sample image"> <h4>Exotic Pets</h4> <p>We offer specialized care for reptiles, rodents, birds, and other exotic pets.</p> </section> <section class="col-4"> <img src="images/image.png" alt="sample image"> <h4>Grooming</h4> <p>Our therapeutic grooming treatments help battle fleas, allergic dermatitis, and other challenging skin conditions.</p> </section> </div> </div><!-- container --> </body>
در اینجا برای هر ردیف یک height: 100vh درنظر گرفته شدهاست تا کل ارتفاع view-port را پر کند و همچنین برای هر ردیف نیز یک رنگ پس زمینه درنظر گرفتهایم تا تغییر ترازها، مشخصتر باشند.
ابتدا داخل container چنین تعریفی را مشاهده میکنید:
<div class="row bg-info align-items-center" style="height: 100vh;"> <div class="col"> <div class="row"> <section class="col">
وجود row و col بعدی که داخل col اصلی تعریف شدهاست، سبب میشوند تا تمام آیتمها در یک سطر و در یک تراز افقی نمایش داده شوند. اگر این row و col دوم را حذف کنیم، هر آیتم نسبت به محتوای آن در میانهی صفحه قرار میگیرد و یکی بالاتر و دیگری پایینتر نمایش داده خواهند شد.
سپس در ردیف بعدی، کلاسهای align-self-center و align-self-end را بر روی ستونها آزمایش کردهایم:
و در آخر تاثیر اعمال justify-content-center را بر روی یک ردیف مشاهده میکنید:
همانطور که مشاهده میکنید، این کلاسهای Flexbox، کار با ستونهای بوت استرپ را بسیار انعطاف پذیر کردهاند.
روشهای دیگری برای تعیین محل قرارگیری ستونهای بوت استرپ 4
علاوه بر روشهایی که تاکنون آنها را بررسی کردیم، کلاسهای دیگری نیز برای تعیین محل قرارگیری ستونهای بوت استرپ تدارک دیده شدهاند:
- کلاسهای تعیین محل ستونها: fixed-top, fixed-bottom, sticky-top
fixed-top: ستون را در بالای صفحه قرار میدهد.
fixed-bottom: ستون و المان را در پایین صفحه قرار میدهد.
sticky-top: ستون و المان را در بالای صفحه قرار میدهد و با اسکرول صفحه به پایین، باز هم این المان در همان بالای صفحه قابل مشاهدهاست.
- کلاسهای نمایشی برای شبیه سازی ویژگیهای CSS:
این کلاسها با d شروع میشوند؛ به همراه یک break-point اختیاری که هدف آنها در اختیار گذاشتن توانمندیهای نمایشی CSS در بوت استرپ است.
برای مثال کلاس d-md-none به این معنا است که پس از رد شدن از اندازهی md، این المان دیگر نمایش داده نخواهد شد.
- کلاسهای container مقدماتی Flex:
این کلاسها که موارد داخل پرانتز آنها اختیاری است، المان را تبدیل به یک المان Flexbox میکنند. حالت نمایشی پیشفرض آنها block است؛ اما اگر نیاز بود میتوان آنها را تبدیل به in-line نیز کرد.
یک مثال: بررسی روشهای متفاوت تعیین محل قرارگیری المانها
اگر کلاس fixed-bottom را به المانی انتساب دهیم:
<div class="container bg-success"> <div class="bg-info fixed-bottom"> <div class="item">Exotic Pets</div> <div class="item">Grooming</div> <div class="item">Health</div> </div>
کلاس fixed-top نیز چنین کاری را انجام میدهد، فقط المان را بجای پایین صفحه، در بالای صفحه به صورت ثابت نمایش خواهد داد.
در اینجا اگر کلاس sticky-top را اعمال کنیم، هرچند شبیه به fixed-top عمل میکند، اما با container تراز است:
تاثیر کلاسهای flex را در قسمت بعدی به تفصیل بررسی خواهیم کرد.
کدهای کامل این قسمت را از اینجا میتوانید دریافت کنید: Bootstrap4_05.zip
بدین منظور فریم ورک ASP.NET Web API کتابخانه ای برای تولید خودکار صفحات راهنما در زمان اجرا (run-time) فراهم کرده است.
ایجاد صفحات راهنمای API
برای شروع ابتدا ابزار ASP.NET and Web Tools 2012.2 Update را نصب کنید. اگر از ویژوال استودیو 2013 استفاده میکنید این ابزار بصورت خودکار نصب شده است. این ابزار صفحات راهنما را به قالب پروژههای ASP.NET Web API اضافه میکند.
یک پروژه جدید از نوع ASP.NET MVC Application بسازید و قالب Web API را برای آن انتخاب کنید. این قالب پروژه کنترلری بنام ValuesController را بصورت خودکار برای شما ایجاد میکند. همچنین صفحات راهنمای API هم برای شما ساخته میشوند. تمام کد مربوط به صفحات راهنما در قسمت Areas قرار دارند.
اگر اپلیکیشن را اجرا کنید خواهید دید که صفحه اصلی لینکی به صفحه راهنمای API دارد. از صفحه اصلی، مسیر تقریبی Help/ خواهد بود.
این لینک شما را به یک صفحه خلاصه (summary) هدایت میکند.
نمای این صفحه در مسیر Areas/HelpPage/Views/Help/Index.cshtml قرار دارد. میتوانید این نما را ویرایش کنید و مثلا قالب، عنوان، استایلها و دیگر موارد را تغییر دهید.
بخش اصلی این صفحه متشکل از جدولی است که APIها را بر اساس کنترلر طبقه بندی میکند. مقادیر این جدول بصورت خودکار و توسط اینترفیس IApiExplorer تولید میشوند. در ادامه مقاله بیشتر درباره این اینترفیس صحبت خواهیم کرد. اگر کنترلر جدیدی به API خود اضافه کنید، این جدول بصورت خودکار در زمان اجرا بروز رسانی خواهد شد.
ستون "API" متد HTTP و آدرس نسبی را لیست میکند. ستون "Documentation" مستندات هر API را نمایش میدهد. مقادیر این ستون در ابتدا تنها placeholder-text است. در ادامه مقاله خواهید دید چگونه میتوان از توضیحات XML برای تولید مستندات استفاده کرد.
هر API لینکی به یک صفحه جزئیات دارد، که در آن اطلاعات بیشتری درباره آن قابل مشاهده است. معمولا مثالی از بدنههای درخواست و پاسخ هم ارائه میشود.
افزودن صفحات راهنما به پروژه ای قدیمی
می توانید با استفاده از NuGet Package Manager صفحات راهنمای خود را به پروژههای قدیمی هم اضافه کنید. این گزینه مخصوصا هنگامی مفید است که با پروژه ای کار میکنید که قالب آن Web API نیست.
از منوی Tools گزینههای Library Package Manager, Package Manager Console را انتخاب کنید. در پنجره Package Manager Console فرمان زیر را وارد کنید.
Install-Package Microsoft.AspNet.WebApi.HelpPage
@Html.ActionLink("API", "Index", "Help", new { area = "" }, null)
همانطور که مشاهده میکنید مسیر نسبی صفحات راهنما "Help/" میباشد. همچنین اطمینان حاصل کنید که ناحیهها (Areas) بدرستی رجیستر میشوند. فایل Global.asax را باز کنید و کد زیر را در صورتی که وجود ندارد اضافه کنید.
protected void Application_Start() { // Add this code, if not present. AreaRegistration.RegisterAllAreas(); // ... }
افزودن مستندات API
بصورت پیش فرض صفحات راهنما از placeholder-text برای مستندات استفاده میکنند. میتوانید برای ساختن مستندات از توضیحات XML استفاده کنید. برای فعال سازی این قابلیت فایل Areas/HelpPage/App_Start/HelpPageConfig.cs را باز کنید و خط زیر را از حالت کامنت درآورید:
config.SetDocumentationProvider(new XmlDocumentationProvider( HttpContext.Current.Server.MapPath("~/App_Data/XmlDocument.xml")));
زیر قسمت Output گزینه XML documentation file را تیک بزنید و در فیلد روبروی آن مقدار "App_Data/XmlDocument.xml" را وارد کنید.
حال کنترلر ValuesController را از مسیر Controllers/ValuesController.cs/ باز کنید و یک سری توضیحات XML به متدهای آن اضافه کنید. بعنوان مثال:
/// <summary> /// Gets some very important data from the server. /// </summary> public IEnumerable<string> Get() { return new string[] { "value1", "value2" }; } /// <summary> /// Looks up some data by ID. /// </summary> /// <param name="id">The ID of the data.</param> public string Get(int id) { return "value"; }
اپلیکیشن را مجددا اجرا کنید و به صفحات راهنما بروید. حالا مستندات API شما باید تولید شده و نمایش داده شوند.
صفحات راهنما مستندات شما را در زمان اجرا از توضیحات XML استخراج میکنند. دقت کنید که هنگام توزیع اپلیکیشن، فایل XML را هم منتشر کنید.
توضیحات تکمیلی
صفحات راهنما توسط کلاس ApiExplorer تولید میشوند، که جزئی از فریم ورک ASP.NET Web API است. به ازای هر API این کلاس یک ApiDescription دارد که توضیحات لازم را در بر میگیرد. در اینجا منظور از "API" ترکیبی از متدهای HTTP و مسیرهای نسبی است. بعنوان مثال لیست زیر تعدادی API را نمایش میدهد:
- GET /api/products
- {GET /api/products/{id
- POST /api/products
اگر اکشنهای کنترلر از متدهای متعددی پشتیبانی کنند، ApiExplorer هر متد را بعنوان یک API مجزا در نظر خواهد گرفت. برای مخفی کردن یک API از ApiExplorer کافی است خاصیت ApiExplorerSettings را به اکشن مورد نظر اضافه کنید و مقدار خاصیت IgnoreApi آن را به true تنظیم نمایید.
[ApiExplorerSettings(IgnoreApi=true)] public HttpResponseMessage Get(int id) { }
همچنین میتوانید این خاصیت را به کنترلرها اضافه کنید تا تمام کنترلر از ApiExplorer مخفی شود.
کلاس ApiExplorer متن مستندات را توسط اینترفیس IDocumentationProvider دریافت میکند. کد مربوطه در مسیر Areas/HelpPage/XmlDocumentation.cs/ قرار دارد. همانطور که گفته شد مقادیر مورد نظر از توضیحات XML استخراج میشوند. نکته جالب آنکه میتوانید با پیاده سازی این اینترفیس مستندات خود را از منبع دیگری استخراج کنید. برای اینکار باید متد الحاقی SetDocumentationProvider را هم فراخوانی کنید، که در HelpPageConfigurationExtensions تعریف شده است.
کلاس ApiExplorer بصورت خودکار اینترفیس IDocumentationProvider را فراخوانی میکند تا مستندات APIها را دریافت کند. سپس مقادیر دریافت شده را در خاصیت Documentation ذخیره میکند. این خاصیت روی آبجکتهای ApiDescription و ApiParameterDescription تعریف شده است.
مطالعه بیشتر
In development world, you may get a requirement from your client, they wants a weekly, quarterly and yearly charts. You always think, how can I make charts with use of angularjs. So today, in this article, we are going to learn
- how to create charts in angularjs using webapi
- higcharts.js
In this example, our requirement is, we have dropdownlist of student names. if user select any student, it will show selected students marks in the form of charts.
مسیر راه ASP.NET Core در دات نت 7
سری مقدماتی ASP.NET Core
Introduction to ASP.NET Core part 15: starting with tag helpers
Introduction to ASP.NET Core part 14: the view start and the layout files
Introduction to ASP.NET Core part 13: the view imports file
Introduction to ASP.NET Core part 12: data annotation of view models
Introduction to ASP.NET Core part 11: inserting a new Book in a form
Introduction to ASP.NET Core part 10: the details page and more on view models
Introduction to ASP.NET Core part 9: MVC continued with routing
Introduction to ASP.NET Core part 8: MVC continued with controller actions and our first view
Introduction to ASP.NET Core part 7: starting with MVC
Introduction to ASP.NET Core part 6: environments and settings
Introduction to ASP.NET Core part 5: static files
Introduction to ASP.NET Core part 4: middleware and the component pipeline
Introduction to ASP.NET Core part 3: the configuration file
Introduction to ASP.NET Core part 2: dependencies and dependency injection
Introduction to ASP.NET Core part 1: anatomy of an empty web project