using System; using System.Collections.Generic; using System.Linq; using System.Security.Claims; using System.Text.Json; namespace BlazorWasm.Client.Utils { public class JwtInfo { public IEnumerable<Claim> Claims { set; get; } public DateTime? ExpirationDateUtc { set; get; } public bool IsExpired { set; get; } public IEnumerable<string> Roles { set; get; } } /// <summary> /// From the Steve Sanderson’s Mission Control project: /// https://github.com/SteveSandersonMS/presentation-2019-06-NDCOslo/blob/master/demos/MissionControl/MissionControl.Client/Util/ServiceExtensions.cs /// </summary> public static class JwtParser { public static JwtInfo ParseClaimsFromJwt(string jwt) { var claims = new List<Claim>(); var payload = jwt.Split('.')[1]; var jsonBytes = getBase64WithoutPadding(payload); foreach (var keyValue in JsonSerializer.Deserialize<Dictionary<string, object>>(jsonBytes)) { if (keyValue.Value is JsonElement element && element.ValueKind == JsonValueKind.Array) { foreach (var itemValue in element.EnumerateArray()) { claims.Add(new Claim(keyValue.Key, itemValue.ToString())); } } else { claims.Add(new Claim(keyValue.Key, keyValue.Value.ToString())); } } var roles = getRoles(claims); var expirationDateUtc = getDateUtc(claims, "exp"); var isExpired = getIsExpired(expirationDateUtc); return new JwtInfo { Claims = claims, Roles = roles, ExpirationDateUtc = expirationDateUtc, IsExpired = isExpired }; } private static IList<string> getRoles(IList<Claim> claims) => claims.Where(c => c.Type == ClaimTypes.Role).Select(c => c.Value).ToList(); private static byte[] getBase64WithoutPadding(string base64) { switch (base64.Length % 4) { case 2: base64 += "=="; break; case 3: base64 += "="; break; } return Convert.FromBase64String(base64); } private static bool getIsExpired(DateTime? expirationDateUtc) => !expirationDateUtc.HasValue || !(expirationDateUtc.Value > DateTime.UtcNow); private static DateTime? getDateUtc(IList<Claim> claims, string type) { var exp = claims.SingleOrDefault(claim => claim.Type == type); if (exp == null) { return null; } var expValue = getTimeValue(exp.Value); if (expValue == null) { return null; } var dateTimeEpoch = new DateTime(1970, 1, 1, 0, 0, 0, 0, DateTimeKind.Utc); return dateTimeEpoch.AddSeconds(expValue.Value); } private static long? getTimeValue(string claimValue) { if (long.TryParse(claimValue, out long resultLong)) return resultLong; if (float.TryParse(claimValue, out float resultFloat)) return (long)resultFloat; if (double.TryParse(claimValue, out double resultDouble)) return (long)resultDouble; return null; } } }
رسم نمودار توسط Kendo Chart
Install-Package iTextSharp
شروع کار با iTextSharp
معمولا برای کار با iText یک سری روال تکراری از قبیل انتخاب نام فایل نهایی، تعریف فونت، سایز کاغذ، حاشیه بندی و ... را باید طی کنید که کدهای آن را در ذیل مشاهده میکنید:
var fileStream = new FileStream("card.pdf", FileMode.Create, FileAccess.Write, FileShare.None); var docFont = GetFont(); var pageSize = PageSize.A6.Rotate(); // سایز کارت را اینجا باید مشخص کرد var doc = new Document(pageSize); doc.SetMargins(18f, 18f, 15f, 2f); var pdfWriter = PdfWriter.GetInstance(doc, fileStream); doc.Open();
برای درج عکس به صورت شفاف در پس زمینه کارت باید از کد زیر استفاده کرد:
// درج لوگوی مسابقات به صورت شفاف در پس زمینه var canvas = pdfWriter.DirectContentUnder; var logoImg = Image.GetInstance(competitionImagePath); logoImg.SetAbsolutePosition(0, 0); logoImg.ScaleAbsolute(pageSize); var graphicsState = new PdfGState { FillOpacity = 0.2F }; canvas.SetGState(graphicsState); canvas.AddImage(logoImg);
چیدمان و طرح بندی بندی عناصر در iTextSharp
برای طراحی کارت یا کلا کار طراحی، باید با نحوهی قرار دادن و طرح بندی عناصر مثل تصاویر و نوشتهها و ابزارهای مورد نیاز برای این کار، آشنا شوید. خوشبختانه در iText برای این کار ابزارهای خوبی وجود دارد.
حتما با تگ Table در HTML آشنایی دارید. در سالهای دور، حتی کل صفحهی وب را به وسیلهی Table ساختار دهی میکردند. در iTextSharp نیز کلاسی به نام PdfPTable در دسترس است که میتوان از آن به عنوان قالبی برای قرار دادن عناصر، در صفحه استفاده کرد. این Table همانند هر جدولی دارای یک سری سطر و ستون است که میتوانیم عناصر مورد نظرمان مثل تصویر و نوشته و... را در آن قرار دهیم.
// جدولی که برای چیدمان عناصر ارم دانشگاه و عنوان و عکس شخص استفاده میشود var topTable = new PdfPTable(3) { WidthPercentage = 100, RunDirection = PdfWriter.RUN_DIRECTION_RTL, ExtendLastRow = false, }; var universityLogoImage = Image.GetInstance(universityLogoPath); universityLogoImage.ScaleAbsolute(70, 100); topTable.AddCell(new PdfPCell(universityLogoImage) { HorizontalAlignment = Element.ALIGN_LEFT, Border = 0 }); topTable.AddCell(new PdfPCell(new Phrase("کارت مسابقات دانشگاه آزاد اسلامی", docFont)) { RunDirection = PdfWriter.RUN_DIRECTION_RTL, HorizontalAlignment = Element.ALIGN_CENTER, Border = 0, }); var userImage = Image.GetInstance(userModel.ImagePath); userImage.Border = Rectangle.TOP_BORDER | Rectangle.RIGHT_BORDER | Rectangle.BOTTOM_BORDER | Rectangle.LEFT_BORDER; userImage.BorderWidth = 1f; userImage.BorderColor = new BaseColor(204, 204, 204); // gray color userImage.ScaleAbsolute(70, 100); topTable.AddCell(new PdfPCell(userImage) { HorizontalAlignment = 2, Border = 0 }); int[] topTableColumnsWidth = { 10, 25, 10 }; topTable.SetWidths(topTableColumnsWidth); doc.Add(topTable);
public class UserModel { public string FirstName { get; set; } public string LastName { get; set; } public string StudentNumber { get; set; } public string NationalCode { get; set; } public string UniversityName { get; set; } public string ImagePath { get; set; } }
using System; using System.IO; using iTextSharp.text; using iTextSharp.text.pdf; using Font = iTextSharp.text.Font; using Image = iTextSharp.text.Image; using Rectangle = iTextSharp.text.Rectangle; namespace ITextSharpCardSample { public class CardReport { public static void Generate(UserModel userModel, string competitionImagePath, string universityLogoPath) { var fileStream = new FileStream("card.pdf", FileMode.Create, FileAccess.Write, FileShare.None); var docFont = GetFont(); var pageSize = PageSize.A6.Rotate(); // سایز کارت را اینجا باید مشخص کرد var doc = new Document(pageSize); doc.SetMargins(18f, 18f, 15f, 2f); var pdfWriter = PdfWriter.GetInstance(doc, fileStream); doc.Open(); // درج لوگوی مسابقات به صورت شفاف در پس زمینه var canvas = pdfWriter.DirectContentUnder; var logoImg = Image.GetInstance(competitionImagePath); logoImg.SetAbsolutePosition(0, 0); logoImg.ScaleAbsolute(pageSize); var graphicsState = new PdfGState { FillOpacity = 0.2F }; canvas.SetGState(graphicsState); canvas.AddImage(logoImg); // جدولی که برای چیدمان عناصر ارم دانشگاه و عنوان و عکس شخص استفاده میشود var topTable = new PdfPTable(3) { WidthPercentage = 100, RunDirection = PdfWriter.RUN_DIRECTION_RTL, ExtendLastRow = false, }; var universityLogoImage = Image.GetInstance(universityLogoPath); universityLogoImage.ScaleAbsolute(70, 100); topTable.AddCell(new PdfPCell(universityLogoImage) { HorizontalAlignment = Element.ALIGN_LEFT, Border = 0 }); topTable.AddCell(new PdfPCell(new Phrase("کارت مسابقات دانشگاه آزاد اسلامی", docFont)) { RunDirection = PdfWriter.RUN_DIRECTION_RTL, HorizontalAlignment = Element.ALIGN_CENTER, Border = 0, }); var userImage = Image.GetInstance(userModel.ImagePath); userImage.Border = Rectangle.TOP_BORDER | Rectangle.RIGHT_BORDER | Rectangle.BOTTOM_BORDER | Rectangle.LEFT_BORDER; userImage.BorderWidth = 1f; userImage.BorderColor = new BaseColor(204, 204, 204); // gray color userImage.ScaleAbsolute(70, 100); topTable.AddCell(new PdfPCell(userImage) { HorizontalAlignment = 2, Border = 0 }); int[] topTableColumnsWidth = { 10, 25, 10 }; topTable.SetWidths(topTableColumnsWidth); doc.Add(topTable); // جدول مشخصات شرکت کننده مثل نام و نام خانوادگی var infoTable = new PdfPTable(4) { WidthPercentage = 100, RunDirection = PdfWriter.RUN_DIRECTION_RTL, ExtendLastRow = false, SpacingBefore = 15, }; infoTable.AddCell(new PdfPCell(new Phrase("نام:", docFont)) { RunDirection = PdfWriter.RUN_DIRECTION_RTL, HorizontalAlignment = Element.ALIGN_LEFT, Border = 0, PaddingBottom = 15 }); infoTable.AddCell(new PdfPCell(new Phrase(userModel.FirstName, docFont)) { RunDirection = PdfWriter.RUN_DIRECTION_RTL, HorizontalAlignment = Element.ALIGN_LEFT, Border = 0 }); infoTable.AddCell(new PdfPCell(new Phrase("نام خانوادگی:", docFont)) { RunDirection = PdfWriter.RUN_DIRECTION_RTL, HorizontalAlignment = Element.ALIGN_LEFT, Border = 0 }); infoTable.AddCell(new PdfPCell(new Phrase(userModel.LastName, docFont)) { RunDirection = PdfWriter.RUN_DIRECTION_RTL, HorizontalAlignment = Element.ALIGN_LEFT, Border = 0 }); infoTable.AddCell(new PdfPCell(new Phrase("شماره\nدانشجویی:", docFont)) { RunDirection = PdfWriter.RUN_DIRECTION_RTL, HorizontalAlignment = Element.ALIGN_LEFT, Border = 0, PaddingBottom = 15 }); infoTable.AddCell(new PdfPCell(new Phrase(userModel.StudentNumber, docFont)) { RunDirection = PdfWriter.RUN_DIRECTION_RTL, HorizontalAlignment = Element.ALIGN_LEFT, Border = 0 }); infoTable.AddCell(new PdfPCell(new Phrase("کد ملی:", docFont)) { RunDirection = PdfWriter.RUN_DIRECTION_RTL, HorizontalAlignment = Element.ALIGN_LEFT, Border = 0 }); infoTable.AddCell(new PdfPCell(new Phrase(userModel.NationalCode, docFont)) { RunDirection = PdfWriter.RUN_DIRECTION_RTL, HorizontalAlignment = Element.ALIGN_LEFT, Border = 0 }); infoTable.AddCell(new PdfPCell(new Phrase("واحد دانشگاهی:", docFont)) { RunDirection = PdfWriter.RUN_DIRECTION_RTL, HorizontalAlignment = Element.ALIGN_LEFT, Border = 0 }); infoTable.AddCell(new PdfPCell(new Phrase(userModel.UniversityName, docFont)) { RunDirection = PdfWriter.RUN_DIRECTION_RTL, HorizontalAlignment = Element.ALIGN_LEFT, Border = 0 }); // دو سلول بعدی صرفا جهت تکمیل شدن یک ردیف است تا عملکرد صحیح خود را داشته باشد infoTable.AddCell(new PdfPCell(new Phrase("", docFont)) { RunDirection = PdfWriter.RUN_DIRECTION_RTL, HorizontalAlignment = Element.ALIGN_LEFT, Border = 0 }); infoTable.AddCell(new PdfPCell(new Phrase("", docFont)) { RunDirection = PdfWriter.RUN_DIRECTION_RTL, HorizontalAlignment = Element.ALIGN_LEFT, Border = 0 }); int[] infoTableColumnsWidth = { 20, 15, 20, 15 }; infoTable.SetWidths(infoTableColumnsWidth); doc.Add(infoTable); doc.Close(); } private static Font GetFont() { const string fontName = "Iranian Sans"; if (FontFactory.IsRegistered(fontName)) return FontFactory.GetFont(fontName, BaseFont.IDENTITY_H, BaseFont.EMBEDDED); var fontPath = "Fonts/irsans.ttf"; // مسیر فونت FontFactory.Register(fontPath); return FontFactory.GetFont(fontName, BaseFont.IDENTITY_H, BaseFont.EMBEDDED); } } }
class Program { static void Main(string[] args) { var userModel = new UserModel { FirstName = "علی", LastName = "احمدی", NationalCode = "1234567890", StudentNumber = "23242342", UniversityName = "آزاد", ImagePath = "Images/avatar.jpg" }; CardReport.Generate(userModel, "Images/competition_logo.jpg", "Images/university_logo.png"); System.Diagnostics.Process.Start("card.pdf"); } }
//using System; //using System.Data; //using Microsoft.Office.Interop.Excel; class FastExportingMethod { //System.Data.DataTable dt= دیتاتیبل که حاوی اطلاعات میباشد //outputPath= مسیر ذخیره شدن public static string ExportToExcel(System.Data.DataTable dt, string outputPath) { try { // ساخت یک شی اکسل ApplicationClass excelApp = new ApplicationClass(); // ساخت یک WorkBook جدید Workbook excelWorkbook = excelApp.Workbooks.Add(Type.Missing); int sheetIndex = 0; // ساخت آرایه به طول تعداد سطرهای دیتاتیبل+1 و تعداد ستونهای دیتاتیبل object[,] rawData = new object[dt.Rows.Count + 1, dt.Columns.Count]; // کپی نام ستونهای دیتاتیبل به عنوان هدر برای فایل اکسل در اولین سطر از آرایه for (int col = 0; col < dt.Columns.Count; col++) { rawData[0, col] = dt.Columns[col].ColumnName; } // کپی اطلاعات دیتاتیبل به داخل آرایه for (int col = 0; col < dt.Columns.Count; col++) { for (int row = 0; row < dt.Rows.Count; row++) { rawData[row + 1, col] = dt.Rows[row].ItemArray[col].ToString(); } } // محاسبه نام ستونهای اکسل string finalColLetter = string.Empty; string colCharset = "ABCDEFGHIJKLMNOPQRSTUVWXYZ"; int colCharsetLen = colCharset.Length; if (dt.Columns.Count > colCharsetLen) { finalColLetter = colCharset.Substring((dt.Columns.Count - 1) / colCharsetLen - 1, 1); } finalColLetter += colCharset.Substring((dt.Columns.Count - 1) % colCharsetLen, 1); // ساخت یک Sheet Worksheet excelSheet = (Worksheet)excelWorkbook.Sheets.Add( excelWorkbook.Sheets.get_Item(++sheetIndex), Type.Missing, 1, XlSheetType.xlWorksheet); //تنظیم نام شیت به نام دلخواه excelSheet.Name = "List"; //تنظیم خاصیت راست به چپ برای نمایش اطلاعات excelSheet.DisplayRightToLeft = true; // تعیین محدوده سطرها و ستونها string excelRange = string.Format("A1:{0}{1}",finalColLetter, dt.Rows.Count + 1); //انتقال اطلاعات از آرایه به شیت مورد نظر excelSheet.get_Range(excelRange, Type.Missing).Value2 = rawData; // ضخیم کردن اولین سطر برای عنوان ستونها ((Range)excelSheet.Rows[1, Type.Missing]).Font.Bold = true; // تنظیم عرض ستونها به اندازه محتوای ستونها for (int col = 0; col < dt.Columns.Count; col++) { ((Range)excelSheet.Columns[col + 1]).EntireColumn.AutoFit(); } //ذخیره و بستن Workbook excelWorkbook.SaveAs(outputPath, XlFileFormat.xlWorkbookNormal, Type.Missing, Type.Missing, Type.Missing, Type.Missing, XlSaveAsAccessMode.xlExclusive, Type.Missing, Type.Missing, Type.Missing, Type.Missing, Type.Missing); excelWorkbook.Close(true, Type.Missing, Type.Missing); excelWorkbook = null; excelApp.Quit(); excelApp = null; // Collect the unreferenced objects GC.Collect(); GC.WaitForPendingFinalizers(); return "اطلاعات شما در مسیر انتخاب شده ذخیره گردید"; } catch (Exception ex) { //بدست آوردن کد خطا برای مدیریت خطاها int code = System.Runtime.InteropServices.Marshal.GetExceptionCode(); return ex.Message + code; } } }
تهیه سرویس اطلاعات پویای برنامه
سرویس Web API ارائه شدهی توسط ASP.NET Core در این برنامه، لیست کاربران را به همراه یادداشتهای آنها به سمت کلاینت باز میگرداند و ساختار موجودیتهای آنها به صورت زیر است:
موجودیت کاربر که یک رابطهی one-to-many را با UserNotes دارد:
using System; using System.Collections.Generic; namespace MaterialAspNetCoreBackend.DomainClasses { public class User { public User() { UserNotes = new HashSet<UserNote>(); } public int Id { set; get; } public DateTimeOffset BirthDate { set; get; } public string Name { set; get; } public string Avatar { set; get; } public string Bio { set; get; } public ICollection<UserNote> UserNotes { set; get; } } }
using System; namespace MaterialAspNetCoreBackend.DomainClasses { public class UserNote { public int Id { set; get; } public DateTimeOffset Date { set; get; } public string Title { set; get; } public User User { set; get; } public int UserId { set; get; } } }
public interface IUsersService { Task<List<User>> GetAllUsersIncludeNotesAsync(); Task<User> GetUserIncludeNotesAsync(int id); }
namespace MaterialAspNetCoreBackend.WebApp.Controllers { [Route("api/[controller]")] public class UsersController : Controller { private readonly IUsersService _usersService; public UsersController(IUsersService usersService) { _usersService = usersService ?? throw new ArgumentNullException(nameof(usersService)); } [HttpGet] public async Task<IActionResult> Get() { return Ok(await _usersService.GetAllUsersIncludeNotesAsync()); } [HttpGet("{id:int}")] public async Task<IActionResult> Get(int id) { return Ok(await _usersService.GetUserIncludeNotesAsync(id)); } } }
در این حالت اگر برنامه را اجرا کنیم، در مسیر زیر
https://localhost:5001/api/users
و آدرس https://localhost:5001/api/users/1 صرفا مشخصات اولین کاربر را بازگشت میدهد.
تنظیم محل تولید خروجی Angular CLI
ساختار پوشه بندی پروژهی جاری به صورت زیر است:
همانطور که ملاحظه میکنید، کلاینت Angular در یک پوشهاست و برنامهی سمت سرور ASP.NET Core در پوشهای دیگر. برای اینکه خروجی نهایی Angular CLI را به پوشهی wwwroot پروژهی وب کپی کنیم، فایل angular.json کلاینت Angular را به صورت زیر ویرایش میکنیم:
"build": { "builder": "@angular-devkit/build-angular:browser", "options": { "outputPath": "../MaterialAspNetCoreBackend/MaterialAspNetCoreBackend.WebApp/wwwroot",
ng build --no-delete-output-path --watch
dotnet watch run
بنابراین دو صفحهی کنسول مجزا را باز کنید. در اولی ng build (را با پارامترهای یاد شده در پوشهی MaterialAngularClient) و در دومی dotnet watch run را در پوشهی MaterialAspNetCoreBackend.WebApp اجرا نمائید.
هر دو دستور در حالت watch اجرا میشوند. مزیت مهم آن این است که اگر تغییر کوچکی را در هر کدام از پروژهها ایجاد کردید، صرفا همان قسمت کامپایل میشود و در نهایت سرعت کامپایل نهایی برنامه به شدت افزایش خواهد یافت.
تعریف معادلهای کلاسهای موجودیتهای سمت سرور، در برنامهی Angular
در ادامه پیش از تکمیل سرویس دریافت اطلاعات از سرور، نیاز است معادلهای کلاسهای موجودیتهای سمت سرور خود را به صورت اینترفیسهایی تایپاسکریپتی تعریف کنیم:
ng g i contact-manager/models/user ng g i contact-manager/models/user-note
محتویات فایل contact-manager\models\user-note.ts :
export interface UserNote { id: number; title: string; date: Date; userId: number; }
import { UserNote } from "./user-note"; export interface User { id: number; birthDate: Date; name: string; avatar: string; bio: string; userNotes: UserNote[]; }
ایجاد سرویس Angular دریافت اطلاعات از سرور
ساختار ابتدایی سرویس دریافت اطلاعات از سرور را توسط دستور زیر ایجاد میکنیم:
ng g s contact-manager/services/user --no-spec
import { Injectable } from "@angular/core"; @Injectable({ providedIn: "root" }) export class UserService { constructor() { } }
کدهای تکمیل شدهی UserService را در ذیل مشاهده میکنید:
import { HttpClient, HttpErrorResponse } from "@angular/common/http"; import { Injectable } from "@angular/core"; import { Observable, throwError } from "rxjs"; import { catchError, map } from "rxjs/operators"; import { User } from "../models/user"; @Injectable({ providedIn: "root" }) export class UserService { constructor(private http: HttpClient) { } getAllUsersIncludeNotes(): Observable<User[]> { return this.http .get<User[]>("/api/users").pipe( map(response => response || []), catchError((error: HttpErrorResponse) => throwError(error)) ); } getUserIncludeNotes(id: number): Observable<User> { return this.http .get<User>(`/api/users/${id}`).pipe( map(response => response || {} as User), catchError((error: HttpErrorResponse) => throwError(error)) ); } }
- متد getAllUsersIncludeNotes، لیست تمام کاربران را به همراه یادداشتهای آنها از سرور واکشی میکند.
- متد getUserIncludeNotes صرفا اطلاعات یک کاربر را به همراه یادداشتهای او از سرور دریافت میکند.
بارگذاری و معرفی فایل svg نمایش avatars کاربران به Angular Material
بستهی Angular Material و کامپوننت mat-icon آن به همراه یک MatIconRegistry نیز هست که قصد داریم از آن برای نمایش avatars کاربران استفاده کنیم.
در قسمت اول، نحوهی «افزودن آیکنهای متریال به برنامه» را بررسی کردیم که در آنجا آیکنهای مرتبط، از فایلهای قلم، دریافت و نمایش داده میشوند. این کامپوننت، علاوه بر قلم آیکنها، از فایلهای svg حاوی آیکنها نیز پشتیبانی میکند که یک نمونه از این فایلها در مسیر wwwroot\assets\avatars.svg فایل پیوستی انتهای مطلب کپی شدهاست (چون برنامهی وب ASP.NET Core، هاست برنامه است، این فایل را در آنجا کپی کردیم).
ساختار این فایل svg نیز به صورت زیر است:
<?xml version="1.0" encoding="utf-8"?> <svg width="512" height="512" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <svg viewBox="0 0 128 128" height="100%" width="100%" pointer-events="none" display="block" id="user1" >
ابتدا به فایل contact-manager-app.component.ts مراجعه و سپس این کامپوننت آغازین ماژول مدیریت تماسها را با صورت زیر تکمیل میکنیم:
import { Component } from "@angular/core"; import { MatIconRegistry } from "@angular/material"; import { DomSanitizer } from "@angular/platform-browser"; @Component() export class ContactManagerAppComponent { constructor(iconRegistry: MatIconRegistry, sanitizer: DomSanitizer) { iconRegistry.addSvgIconSet(sanitizer.bypassSecurityTrustResourceUrl("assets/avatars.svg")); } }
در اینجا در صورتیکه فایل svg شما دارای یک تک آیکن است، روش ثبت آن به صورت زیر است:
iconRegistry.addSvgIcon( "unicorn", this.domSanitizer.bypassSecurityTrustResourceUrl("assets/unicorn_icon.svg") );
<mat-icon svgIcon="unicorn"></mat-icon>
یک نکته: پوشهی node_modules\material-design-icons به همراه تعداد قابل ملاحظهای فایل svg نیز هست.
نمایش لیست کاربران در sidenav
در ادامه به فایل sidenav\sidenav.component.ts مراجعه کرده و سرویس فوق را به آن جهت دریافت لیست کاربران، تزریق میکنیم:
import { User } from "../../models/user"; import { UserService } from "../../services/user.service"; @Component() export class SidenavComponent implements OnInit { users: User[] = []; constructor(private userService: UserService) { } ngOnInit() { this.userService.getAllUsersIncludeNotes() .subscribe(data => this.users = data); } }
اکنون میخواهیم از این اطلاعات جهت نمایش پویای آنها در sidenav استفاده کنیم. در قسمت قبل، جای آنها را در منوی سمت چپ صفحه به صورت زیر با اطلاعات ایستا مشخص کردیم:
<mat-list> <mat-list-item>Item 1</mat-list-item> <mat-list-item>Item 2</mat-list-item> <mat-list-item>Item 3</mat-list-item> </mat-list>
<mat-nav-list> <mat-list-item *ngFor="let user of users"> <a matLine href="#"> <mat-icon svgIcon="{{user.avatar}}"></mat-icon> {{ user.name }} </a> </mat-list-item> </mat-nav-list>
که در اینجا علاوه بر لیست کاربران که از سرویس Users دریافت شده، آیکن avatar آنها که از فایل assets/avatars.svg بارگذاری شده نیز قابل مشاهده است.
اتصال کاربران به صفحهی نمایش جزئیات آنها
در mat-nav-list فوق، فعلا هر کاربر به آدرس # لینک شدهاست. در ادامه میخواهیم با کمک سیستم مسیریابی، با کلیک بر روی نام هر کاربر، در سمت راست صفحه جزئیات او نیز نمایش داده شود:
<mat-nav-list> <mat-list-item *ngFor="let user of users"> <a matLine [routerLink]="['/contactmanager', user.id]"> <mat-icon svgIcon="{{user.avatar}}"></mat-icon> {{ user.name }} </a> </mat-list-item> </mat-nav-list>
const routes: Routes = [ { path: "", component: ContactManagerAppComponent, children: [ { path: ":id", component: MainContentComponent }, { path: "", component: MainContentComponent } ] }, { path: "**", redirectTo: "" } ];
این مشکل دو علت دارد:
الف) چون ContactManagerModule را به صورت lazy load تعریف کردهایم، دیگر نباید در لیست imports فایل AppModule ظاهر شود. بنابراین فایل app.module.ts را گشوده و سپس تعریف ContactManagerModule را هم از قسمت imports بالای صفحه و هم از قسمت imports ماژول حذف کنید؛ چون نیازی به آن نیست.
ب) برای مدیریت خواندن id کاربر، فایل main-content\main-content.component.ts را گشوده و به صورت زیر تکمیل میکنیم:
import { Component, OnInit } from "@angular/core"; import { ActivatedRoute } from "@angular/router"; import { User } from "../../models/user"; import { UserService } from "../../services/user.service"; @Component({ selector: "app-main-content", templateUrl: "./main-content.component.html", styleUrls: ["./main-content.component.css"] }) export class MainContentComponent implements OnInit { user: User; constructor(private route: ActivatedRoute, private userService: UserService) { } ngOnInit() { this.route.params.subscribe(params => { this.user = null; const id = params["id"]; if (!id) { return; } this.userService.getUserIncludeNotes(id) .subscribe(data => this.user = data); }); } }
اکنون میتوان از اطلاعات این user دریافتی، در قالب این کامپوننت و یا همان فایل main-content.component.html استفاده کرد:
<div *ngIf="!user"> <mat-spinner></mat-spinner> </div> <div *ngIf="user"> <mat-card> <mat-card-header> <mat-icon mat-card-avatar svgIcon="{{user.avatar}}"></mat-icon> <mat-card-title> <h2>{{ user.name }}</h2> </mat-card-title> <mat-card-subtitle> Birthday {{ user.birthDate | date:'d LLLL' }} </mat-card-subtitle> </mat-card-header> <mat-card-content> <mat-tab-group> <mat-tab label="Bio"> <p> {{user.bio}} </p> </mat-tab> <!-- <mat-tab label="Notes"></mat-tab> --> </mat-tab-group> </mat-card-content> </mat-card> </div>
همچنین mat-card را هم بر اساس مثال مستندات آن، ابتدا کپی و سپس سفارشی سازی کردهایم (اگر دقت کنید، هر کامپوننت آن سه برگهی overview، سپس API و در آخر Example را به همراه دارد). این روشی است که همواره میتوان با کامپوننتهای این مجموعه انجام داد. ابتدا مثالی را در مستندات آن پیدا میکنیم که مناسب کار ما باشد. سپس سورس آنرا از همانجا کپی و در برنامه قرار میدهیم و در آخر آنرا بر اساس اطلاعات خود سفارشی سازی میکنیم.
نمایش جزئیات اولین کاربر در حین بارگذاری اولیهی برنامه
تا اینجای کار اگر برنامه را از ابتدا بارگذاری کنیم، mat-spinner قسمت نمایش جزئیات تماسها ظاهر میشود و همانطور باقی میماند، با اینکه هنوز موردی انتخاب نشدهاست. برای رفع آن به کامپوننت sidnav مراجعه کرده و در لحظهی بارگذاری اطلاعات، اولین مورد را به صورت دستی نمایش میدهیم:
import { Router } from "@angular/router"; @Component() export class SidenavComponent implements OnInit, OnDestroy { users: User[] = []; constructor(private userService: UserService, private router: Router) { } ngOnInit() { this.userService.getAllUsersIncludeNotes() .subscribe(data => { this.users = data; if (data && data.length > 0 && !this.router.navigated) { this.router.navigate(["/contactmanager", data[0].id]); } }); } }
البته روش دیگر مدیریت این حالت، حذف کدهای فوق و تبدیل کدهای کامپوننت main-content به صورت زیر است:
let id = params['id']; if (!id) id = 1;
بستن خودکار sidenav در حالت نمایش موبایل
اگر اندازهی صفحهی نمایشی را کوچکتر کنیم، قسمت sidenav در حالت over نمایان خواهد شد. در این حالت اگر آیتمهای آنرا انتخاب کنیم، هرچند آنها نمایش داده میشوند، اما زیر این sidenav مخفی باقی خواهند ماند:
بنابراین در جهت بهبود کاربری این قسمت بهتر است با کلیک کاربر بر روی sidenav و گزینههای آن، این قسمت بسته شده و ناحیهی زیر آن نمایش داده شود.
در کدهای قالب sidenav، یک template reference variable برای آن به نام sidenav درنظر گرفته شدهاست:
<mat-sidenav #sidenav
import { MatSidenav } from "@angular/material"; @Component() export class SidenavComponent implements OnInit, OnDestroy { @ViewChild(MatSidenav) sidenav: MatSidenav;
ngOnInit() { this.router.events.subscribe(() => { if (this.isScreenSmall) { this.sidenav.close(); } }); }
کدهای کامل این قسمت را از اینجا میتوانید دریافت کنید: MaterialAngularClient-03.zip
برای اجرای آن:
الف) ابتدا به پوشهی src\MaterialAngularClient وارد شده و فایلهای restore.bat و ng-build-dev.bat را اجرا کنید.
ب) سپس به پوشهی src\MaterialAspNetCoreBackend\MaterialAspNetCoreBackend.WebApp وارد شده و فایلهای restore.bat و dotnet_run.bat را اجرا کنید.
اکنون برنامه در آدرس https://localhost:5001 قابل دسترسی است.
در ادامه بررسی تصویر امنیتی سایت مواردی که باید پیاده سازی شود برای مورد اول میتوان کلاس زیر را در نظر گرفت که متدهایی برای تولید اعداد بصورت تصادفی در بین بازه معرفی شده را بازگشت میدهد:
// RandomGenerator.cs using System; using System.Security.Cryptography; namespace PersianCaptchaHandler { public class RandomGenerator { private static readonly byte[] Randb = new byte[4]; private static readonly RNGCryptoServiceProvider Rand = new RNGCryptoServiceProvider(); public static int Next() { Rand.GetBytes(Randb); var value = BitConverter.ToInt32(Randb, 0); if (value < 0) value = -value; return value; } public static int Next(int max) { Rand.GetBytes(Randb); var value = BitConverter.ToInt32(Randb, 0); value = value%(max + 1); if (value < 0) value = -value; return value; } public static int Next(int min, int max) { var value = Next(max - min) + min; return value; } } }
// NumberToString.cs namespace PersianCaptchaHandler { public class NumberToString { #region Fields private static readonly string[] Yakan = new[] { "صفر", "یک", "دو", "سه", "چهار", "پنج", "شش", "هفت", "هشت", "نه" }; private static readonly string[] Dahgan = new[] { "", "", "بیست", "سی", "چهل", "پنجاه", "شصت", "هفتاد", "هشتاد", "نود" }; private static readonly string[] Dahyek = new [] { "ده", "یازده", "دوازده", "سیزده", "چهارده", "پانزده", "شانزده", "هفده", "هجده", "نوزده" }; private static readonly string[] Sadgan = new [] { "", "یکصد", "دوصد", "سیصد", "چهارصد", "پانصد", "ششصد", "هفتصد", "هشتصد", "نهصد" }; private static readonly string[] Basex = new [] { "", "هزار", "میلیون", "میلیارد", "تریلیون" }; #endregion private static string Getnum3(int num3) { var s = ""; var d12 = num3 % 100; var d3 = num3 / 100; if (d3 != 0) s = Sadgan[d3] + " و "; if ((d12 >= 10) && (d12 <= 19)) { s = s + Dahyek[d12 - 10]; } else { var d2 = d12 / 10; if (d2 != 0) s = s + Dahgan[d2] + " و "; var d1 = d12 % 10; if (d1 != 0) s = s + Yakan[d1] + " و "; s = s.Substring(0, s.Length - 3); } return s; } public static string ConvertIntNumberToFarsiAlphabatic(string snum) { var stotal = ""; if (snum == "0") return Yakan[0]; snum = snum.PadLeft(((snum.Length - 1) / 3 + 1) * 3, '0'); var l = snum.Length / 3 - 1; for (var i = 0; i <= l; i++) { var b = int.Parse(snum.Substring(i * 3, 3)); if (b != 0) stotal = stotal + Getnum3(b) + " " + Basex[l - i] + " و "; } stotal = stotal.Substring(0, stotal.Length - 3); return stotal; } } }
using System; using System.IO; using System.Security.Cryptography; using System.Text; namespace PersianCaptchaHandler { public class Encryptor { #region constraints private static string Password { get { return "Mehdi"; } } private static string Salt { get { return "Payervand"; } } #endregion public static string Encrypt(string clearText) { // Turn text to bytes var clearBytes = Encoding.Unicode.GetBytes(clearText); var pdb = new PasswordDeriveBytes(Password, Encoding.Unicode.GetBytes(Salt)); var ms = new MemoryStream(); var alg = Rijndael.Create(); alg.Key = pdb.GetBytes(32); alg.IV = pdb.GetBytes(16); var cs = new CryptoStream(ms, alg.CreateEncryptor(), CryptoStreamMode.Write); cs.Write(clearBytes, 0, clearBytes.Length); cs.Close(); var encryptedData = ms.ToArray(); return Convert.ToBase64String(encryptedData); } public static string Decrypt(string cipherText) { // Convert text to byte var cipherBytes = Convert.FromBase64String(cipherText); var pdb = new PasswordDeriveBytes(Password, Encoding.Unicode.GetBytes(Salt)); var ms = new MemoryStream(); var alg = Rijndael.Create(); alg.Key = pdb.GetBytes(32); alg.IV = pdb.GetBytes(16); var cs = new CryptoStream(ms, alg.CreateDecryptor(), CryptoStreamMode.Write); cs.Write(cipherBytes, 0, cipherBytes.Length); cs.Close(); var decryptedData = ms.ToArray(); return Encoding.Unicode.GetString(decryptedData); } } }
و نیز برای اعتبار سنجی عدد دریافتی از کاربر میتوان از عبارت با قاعده زیر استفاده کرد:
// Utils.cs using System.Text.RegularExpressions; namespace PersianCaptchaHandler { public class Utils { private static readonly Regex NumberMatch = new Regex(@"^([0-9]*|\d*\.\d{1}?\d*)$", RegexOptions.Compiled); public static bool IsNumber(string number2Match) { return NumberMatch.IsMatch(number2Match); } } }
<add verb="GET" path="/captcha/" type="PersianCaptchaHandler.CaptchaHandler, PersianCaptchaHandler, Version=1.0.0.0, Culture=neutral" />
<!-- ASPX --> <dl> <dt>تصویر امنیتی</dt> <dd> <asp:Image ID="imgCaptchaText" runat="server" AlternateText="CaptchaImage" /> <asp:HiddenField ID="hfCaptchaText" runat="server" /> <asp:ImageButton ID="btnRefreshCaptcha" runat="server" ImageUrl="/img/refresh.png" OnClick="btnRefreshCaptcha_Click" /> <br /> <asp:TextBox ID="txtCaptcha" runat="server" AutoCompleteType="Disabled"></asp:TextBox> </dd> <dd> <asp:Button ID="btnSubmit" runat="server" Text="ثبت" OnClick="btnSubmit_Click" /> </dd> </dl> <asp:Label ID="lblMessage" runat="server"></asp:Label>
protected void Page_Load(object sender, EventArgs e) { if (!Page.IsPostBack) SetCaptcha(); } private void SetCaptcha() { lblMessage.Text = txtCaptcha.Text = string.Empty; var newNumber = RandomGenerator.Next(100, 999) ; var farsiAlphabatic = NumberToString.ConvertIntNumberToFarsiAlphabatic(newNumber.ToString()); hfCaptchaText.Value = HttpUtility .UrlEncode( Encryptor.Encrypt( farsiAlphabatic ) ); txtCaptcha.Text = string.Empty; imgCaptchaText.ImageUrl = "/captcha/?text=" + hfCaptchaText.Value; }
private string GetCaptcha() { var farsiAlphabatic = NumberToString.ConvertIntNumberToFarsiAlphabatic(txtCaptcha.Text); var encryptedString = HttpUtility .UrlEncode( Encryptor.Encrypt( farsiAlphabatic ) ); return encryptedString; } private bool ValidateUserInputForLogin() { if (!Utils.IsNumber(txtCaptcha.Text)) { lblMessage.Text = "تصویر امنیتی را بطور صحیح وارد نکرده اید"; return false; } var strGetCaptcha = GetCaptcha(); var strDecodedVAlue = hfCaptchaText.Value; if (strDecodedVAlue != strGetCaptcha) { lblMessage.Text = "کلمه امنیتی اشتباه است"; SetCaptcha(); return false; } return true; } protected void btnSubmit_Click(object sender, EventArgs e) { if (!ValidateUserInputForLogin()) return; lblMessage.Text = "کلمه امنیتی درست است"; } protected void btnRefreshCaptcha_Click(object sender, ImageClickEventArgs e) { SetCaptcha(); }
@using (Ajax.BeginForm("Upload", "Attachment", FormMethod.Post, new AjaxOptions { HttpMethod = "POST", }, new { encType = "multipart/form-data", id = "attach-form" })) { @Html.AntiForgeryToken() @Html.TextBoxFor(m => m.FirstName }) <input type="file" name="Files" data-buttonText="انتخاب تصویر"> <button type="submit">ارسال</button> }
var formData = new FormData(); $('form').submit(function() { var action = $(this).attr('action'); var formData = new FormData($(this).get(0)); $.ajax({ type: "POST", dataType: "json", url: action, data: formData, processData: false, contentType: false, success: function(data) { //... } success: function(data) { //... } }); return false; });
public class MyModel
{
public string FirstName{ get; set; }
public IEnumerable<HttpPostedFileBase> Files { get; set; }
}
[AjaxOnly] [HttpPost] [ValidateAntiForgeryToken] public ActionResult Upload(MyModel model) { if (!ModelState.IsValid) return //.... if(model.Files != null) foreach (var file in model.Files) if (file != null && file.ContentLength > 0) { // .... } }
تنظیمات JSON در ASP.NET Web API
myUserApi.Id = UserId; return new JsonNetResult { Data = myUserApi, ContentType = "application/json" };
{ "$id": "1", "Settings": { "$id": "2", "ReferenceLoopHandling": 0, "MissingMemberHandling": 0, "ObjectCreationHandling": 0, "NullValueHandling": 0, "DefaultValueHandling": 0, "Converters": [], "PreserveReferencesHandling": 0, "TypeNameHandling": 0, "MetadataPropertyHandling": 0, "TypeNameAssemblyFormat": 0, "ConstructorHandling": 0, "ContractResolver": null, "ReferenceResolver": null, "TraceWriter": null, "Binder": null, "Error": null, "Context": { "$id": "3", "m_additionalContext": null, "m_state": 0 }, "DateFormatString": "yyyy'-'MM'-'dd'T'HH':'mm':'ss.FFFFFFFK", "MaxDepth": null, "Formatting": 0, "DateFormatHandling": 0, "DateTimeZoneHandling": 3, "DateParseHandling": 1, "FloatFormatHandling": 0, "FloatParseHandling": 0, "StringEscapeHandling": 0, "Culture": "(Default)", "CheckAdditionalContent": false }, "ContentEncoding": null, "ContentType": "application/json", "Data": "{\"Id\":2}", "JsonRequestBehavior": 1, "MaxJsonLength": null, "RecursionLimit": null }
افزودن اسمبلیهای مورد نیاز به مجموع Referencesها
کد استفاده شده جهت طراحی گزارش
using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Linq; using System.Text; using FastReport; using System.Windows.Forms; namespace WindowsFormsApplication1 { public partial class Form1 : Form { public Form1() { InitializeComponent(); } private void button1_Click(object sender, EventArgs e) { string[] List = System.IO.File.ReadAllLines("List.TXT"); var Query = from list in List let items = list.Split(',') select new { Id = Convert.ToInt32(items[0]), FName = items[1], LName = items[2] }; using (Report report = new Report()) { report.RegisterData(Query.ToList(), "myQuery"); report.Design(); } } } }
نمایش گزارش ذخیره شده در List.frx با استفاده از کد زیر
report.Load("List.frx"); report.Show();
خروجی گزارش ساخته شده
سورس برنامه نمونه
شاخهها ( نودها ) میتوانند فونتهای مختلف داشته باشند.برای تنظیم فونت باید از تابع ()setFont استفاده شود.البته که باید فونت انتخابی بر روی سیستم کاربر موجود باشد در غیر این صورت مرورگر یک فونت دلخواه و پیش فرض خود را جایگزین فونت شما خواهد نمود. در صورت بروز هر گونه خطا در فونت ، متن داخل گرهها کوتاه خواهد شد.
با توجه به محدودیت IE در پیاده سازی excanvas ، در کل کاراکترها متن نود کوتاه میشود. ( اگر کاراکترهای نود ، کاملا پرشونده fit نشوند ، بخشی از کل متن کاراکترهای نود نوشته یا رسم خواهد شد )
پارامترهای تابع ()setFont :
-
نام فونت . حالت فونت ضخیم bold یا مورب italic قابل استفاده است.
- اندازه فونت در واحد پیکسل
- رنگ فونت ( اختیاری )
- چیدمان عمودی ( 1 و c یا center برای وسط چین . ( اختیاری )
var o = new orgChart(); o.setColor('#99CC99', '#CCFFCC'); o.setFont('arial', 18); o.addNode(0, '', '', 'Arial 18', 1); o.setColor('#CCCC66', '#FFFF99'); o.setFont('arial', 10, '#000000'); o.addNode(11, 0, 'u', 'text will be split if it does not fit. ThisIsAVeryLongWordAndItWillBeClipped. Too many lines will be clipped too.'); o.setFont('arial', 10, '#000000', 0); o.addNode(12, 0, 'u', 'aligned at top'); o.setFont('arial', 10, '#000000', 1); o.addNode(13, 0, 'u', 'centered'); o.setColor('#CC4950', '#FF7C80'); o.setFont('times', 16, '#FF0F00'); o.addNode(21, 0, 'l', 'Times 16 red'); o.setFont('times', 16, '#000000'); o.addNode(22, 0, 'l', 'Times 16'); o.setFont('times', 48, '#000000'); o.addNode(23, 0, 'l', 'Times 48 does not fit at all'); o.setColor('#CC9966', '#FFCC99'); o.setFont('jokerman', 12, '#000000'); o.addNode(31, 0, 'r', 'Jokerman (if available)'); o.setFont('bold times', 16, '#000000'); o.addNode(32, 0, 'r', 'bold Times 16'); o.setFont('italic times', 16, '#000000'); o.addNode(33, 0, 'r', 'italic Times 16'); o.setFont('bold italic times', 16, '#000000'); o.addNode(34, 0, 'r', 'bold italic Times 16'); o.setColor('#B5D9EA', '#CFE8EF'); o.setFont('arial', 28, '#000000'); o.addNode(50, '', '', 'Arial 28'); o.setFont('arial', 29); o.addNode(51, 50, 'u', 'Arial 29'); o.setFont('arial', 30); o.addNode(52, 51, 'u', 'Arial 30'); o.setFont('arial', 31); o.addNode(53, 52, 'u', 'Arial 31'); o.setFont('arial', 32); o.addNode(54, 53, 'u', 'Arial 32'); o.drawChart('c_fonts');
اندازه و مکان :
شما میتوانید اندازه نودها و فضا و offset بین نودها را نیز تنظیم نمائید.این تنظیم بصورت عمومی تاثیر گذار است و تمامی نودها از این تنظیم تبعیت خواهند نمود:
پارامترهای تابع ()setSize:
- عرض نودها در واحد پیکسل.
- ارتفاع نودها در واحد پیکسل.
- فاصله عرضی بین نودهای پدر u-nodes. ( اختیاری ).
- فاصله طولی بین نودها ( اختیاری ).
- offset عرضی ( فاصله ) از نود چپ و نود راست ( اختیاری ).
var o = new orgChart(); o.setSize(36, 12, 4, 25, 180); o.setColor('#99CC99', '#CCFFCC'); o.setFont('arial', 18); o.addNode(0, '', '', 'Root node'); o.setFont('arial', 12); o.setColor('#CCCC66', '#FFFF99'); o.addNode(11, 0, 'u', 'u-node 1'); o.addNode(12, 0, 'u', 'u-node 2'); o.addNode(13, 0, 'u', 'u-node 3'); o.setColor('#CC4950', '#FF7C80'); o.addNode(21, 0, 'l', 'l-node 1'); o.addNode(22, 0, 'l', 'l-node 2'); o.addNode(23, 0, 'l', 'l-node 3'); o.setColor('#CC9966', '#FFCC99'); o.addNode(31, 0, 'r', 'r-node 1'); o.drawChart('c_size');
شما میتوانید به نودها در پارامتر ششم تابع ()addNode آدرس پیوند خود را اضافه نمائید.
در صورت ایجاد پیوند کامل ( مانند : http://www.yourdomain.com ) پیوند در برگه ( tab ) یا یک پنجره جدید ( بسته به تنظیمات مرورگر سمت کاربر ) باز خواهد شد.
اگر نشانگر ماوس ، روی این نوع از نودها قرار بگیرد تغییر شکل به مانند دست ( اشاره گر ) میدهد.
نکته : در این نمونه کد ، هر نود در یک چارت سازمانی جدید دوباره رسم شده اند.در چارت سازمانی قدیمی ، نودها از بین نمیروند و همه مسیرهای باقی مانده فعال خواهند ماند.بنابراین اگر reDraw در این نمونه استفاده شود ، چند پیوند در یک نود باز خواهد شد .
اگر بخواهید فقط یک لینک به نودی اختصاص دهید ، یک نود پیوندی بدون پیوند به آن اضافه کنید ( مانند نودها سبز مثال نمونه ).
var o = new orgChart(); o.setColor('#99CC99', '#CCFFCC'); o.setFont('arial', 18); o.addNode( 0, '', '', 'Searching', 1); o.addNode(50, '', '', 'Social', 1); o.addNode(90, '', '', 'Misc.', 1); o.setColor('#CCCC66', '#FFFF99'); o.setFont('arial', 12); o.addNode(11, 50, 'u', 'Facebook', 0, 'http://facebook.com'); o.addNode(13, 90, 'u', 'Youtube', 0, 'http://youtube.com'); o.addNode(14, 13, 'l', 'Youtube Music', 0, 'http://youtube.com/music'); o.addNode(15, 13, 'l', 'Youtube Entertainment', 0, 'http://youtube.com/entertainment'); o.setColor('#CC4950', '#FF7C80'); o.addNode(21, 0, 'l', 'Google', 0, 'http://google.com'); o.addNode(22, 0, 'l', 'Bing', 0, 'http://bing.com'); o.addNode('r2', '', '', 'Top of this Page', 0, '#'); o.addNode('', 'r2', 'u', 'Back to the introduction', 0, '/orgchart'); o.drawChart('c_links');
در قسمت چهارم و آخر این مطلب ، نمونههای بیشتری از ایجاد چارت سازمانی تحت وب ، درج تصویر در نودها و نمایش نمودار بعنوان یک تصویر ارائه خواهد شد.