{"id":469,"date":"2021-10-10T21:32:42","date_gmt":"2021-10-10T21:32:42","guid":{"rendered":"https:\/\/okankaradag.com\/?p=469"},"modified":"2021-10-10T21:42:35","modified_gmt":"2021-10-10T21:42:35","slug":"react-typescript-ve-asp-net-core-5-ile-crud-islemleri","status":"publish","type":"post","link":"https:\/\/okankaradag.com\/en\/asp-net-5\/react-typescript-ve-asp-net-core-5-ile-crud-islemleri","title":{"rendered":"CRUD Operations with Reactjs, TypeScript and Asp.Net Core (5.0)"},"content":{"rendered":"<p class=\" translation-block\">Hi, We will make crud operations with <strong>asp.net core 5<\/strong>, <strong>react ve typescript <\/strong>. You can find github url of the project at the bottom of the post.<\/p>\n\n\n\n<p>The post will be in two parts, the first is the backend and the second is the frontend.<\/p>\n\n\n\n<h4>Development Environment<\/h4>\n\n\n\n<ul><li>Windows 11<\/li><li>Visual Studio 2019<\/li><li>.Net 5.0<\/li><li>Node.js (Npm paketleri i\u00e7in)<\/li><\/ul>\n\n\n\n<h4>Project Stages<\/h4>\n\n\n\n<ul><li><a href=\"#proje-baslang\u0131c\" data-type=\"internal\" data-id=\"#proje-baslang\u0131c\">Project Create (DDD architecture)<\/a><\/li><li><a href=\"#ef-core\" data-type=\"internal\" data-id=\"#ef-core\">EntityFramework Core implementation<\/a><\/li><li><a href=\"#add-service-dto\" data-type=\"internal\" data-id=\"#add-service-dto\">Adding service that perform crud opertaions and adding DTO<\/a><\/li><li><a href=\"#api\" data-type=\"internal\" data-id=\"#api\">Api Controller<\/a><\/li><li><a href=\"#api-test\" data-type=\"internal\" data-id=\"#api-test\">Api Test<\/a><\/li><li><a href=\"#react-middleware\" data-type=\"internal\" data-id=\"#react-middleware\">Adding React (CRA) and asp.net core middleware settings<\/a><\/li><li><a href=\"#react-crud\" data-type=\"internal\" data-id=\"#react-crud\">CRUD operation and frontend designing<\/a><\/li><li><a href=\"#exception\" data-type=\"internal\" data-id=\"#exception\">Adding exception pages<\/a><\/li><li><a href=\"#read-delete\" data-type=\"internal\" data-id=\"#read-delete\">Read - Delete<\/a><\/li><li><a href=\"#create-update\" data-type=\"internal\" data-id=\"#create-update\">Create - Update<\/a><\/li><li><a href=\"#github-link\" data-type=\"internal\" data-id=\"#github-link\">Project's Github Url<\/a><\/li><\/ul>\n\n\n\n<h4 id=\"proje-baslang\u0131c\">Project Beginning<\/h4>\n\n\n\n<p>The Project will make personnel adding, list operations, It will be DDD (Domain Driven Design) architecture. Let's create project as Blank Solution.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" width=\"1023\" height=\"680\" src=\"https:\/\/okankaradag.com\/wp-content\/uploads\/2021\/09\/BlankSolutionCreate.png\" alt=\"\" class=\"wp-image-472\" srcset=\"https:\/\/okankaradag.com\/wp-content\/uploads\/2021\/09\/BlankSolutionCreate.png 1023w, https:\/\/okankaradag.com\/wp-content\/uploads\/2021\/09\/BlankSolutionCreate-300x199.png 300w, https:\/\/okankaradag.com\/wp-content\/uploads\/2021\/09\/BlankSolutionCreate-768x510.png 768w, https:\/\/okankaradag.com\/wp-content\/uploads\/2021\/09\/BlankSolutionCreate-16x12.png 16w\" sizes=\"(max-width: 1023px) 100vw, 1023px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" width=\"989\" height=\"647\" src=\"https:\/\/okankaradag.com\/wp-content\/uploads\/2021\/09\/Domain-Layer.png\" alt=\"\" class=\"wp-image-473\" srcset=\"https:\/\/okankaradag.com\/wp-content\/uploads\/2021\/09\/Domain-Layer.png 989w, https:\/\/okankaradag.com\/wp-content\/uploads\/2021\/09\/Domain-Layer-300x196.png 300w, https:\/\/okankaradag.com\/wp-content\/uploads\/2021\/09\/Domain-Layer-768x502.png 768w, https:\/\/okankaradag.com\/wp-content\/uploads\/2021\/09\/Domain-Layer-16x10.png 16w\" sizes=\"(max-width: 989px) 100vw, 989px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" width=\"995\" height=\"669\" src=\"https:\/\/okankaradag.com\/wp-content\/uploads\/2021\/09\/Asp.net-Core-5-Api.png\" alt=\"\" class=\"wp-image-474\" srcset=\"https:\/\/okankaradag.com\/wp-content\/uploads\/2021\/09\/Asp.net-Core-5-Api.png 995w, https:\/\/okankaradag.com\/wp-content\/uploads\/2021\/09\/Asp.net-Core-5-Api-300x202.png 300w, https:\/\/okankaradag.com\/wp-content\/uploads\/2021\/09\/Asp.net-Core-5-Api-768x516.png 768w, https:\/\/okankaradag.com\/wp-content\/uploads\/2021\/09\/Asp.net-Core-5-Api-16x12.png 16w\" sizes=\"(max-width: 995px) 100vw, 995px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" width=\"475\" height=\"347\" src=\"https:\/\/okankaradag.com\/wp-content\/uploads\/2021\/09\/Project-Index.png\" alt=\"\" class=\"wp-image-475\" srcset=\"https:\/\/okankaradag.com\/wp-content\/uploads\/2021\/09\/Project-Index.png 475w, https:\/\/okankaradag.com\/wp-content\/uploads\/2021\/09\/Project-Index-300x219.png 300w, https:\/\/okankaradag.com\/wp-content\/uploads\/2021\/09\/Project-Index-16x12.png 16w\" sizes=\"(max-width: 475px) 100vw, 475px\" \/><\/figure>\n\n\n\n<p id=\"ef-core\"><strong>EntityFrameworkCore Code First<\/strong><\/p>\n\n\n\n<p>Previously We add Domain Layer to Infrastructure, Infrastructure to Web Layer as reference.<\/p>\n\n\n\n<p>We install the following packages for ef core.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" width=\"915\" height=\"347\" src=\"https:\/\/okankaradag.com\/wp-content\/uploads\/2021\/09\/Screenshot_5.png\" alt=\"\" class=\"wp-image-476\" srcset=\"https:\/\/okankaradag.com\/wp-content\/uploads\/2021\/09\/Screenshot_5.png 915w, https:\/\/okankaradag.com\/wp-content\/uploads\/2021\/09\/Screenshot_5-300x114.png 300w, https:\/\/okankaradag.com\/wp-content\/uploads\/2021\/09\/Screenshot_5-768x291.png 768w, https:\/\/okankaradag.com\/wp-content\/uploads\/2021\/09\/Screenshot_5-16x6.png 16w\" sizes=\"(max-width: 915px) 100vw, 915px\" \/><\/figure>\n\n\n\n<p><strong>Microsoft.EntityFrameworkCore.Design<\/strong> we install it to web layer for migration commands.<\/p>\n\n\n\n<p>Let's create entites folder and it within add entities (Employee and EmployeeType).<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" width=\"397\" height=\"117\" src=\"https:\/\/okankaradag.com\/wp-content\/uploads\/2021\/09\/domain-index.png\" alt=\"\" class=\"wp-image-477\" srcset=\"https:\/\/okankaradag.com\/wp-content\/uploads\/2021\/09\/domain-index.png 397w, https:\/\/okankaradag.com\/wp-content\/uploads\/2021\/09\/domain-index-300x88.png 300w, https:\/\/okankaradag.com\/wp-content\/uploads\/2021\/09\/domain-index-16x5.png 16w\" sizes=\"(max-width: 397px) 100vw, 397px\" \/><\/figure>\n\n\n\n<p><strong>Employee.cs<\/strong> :<\/p>\n\n\n\n<div class=\"wp-block-urvanov-syntax-highlighter-code-block\"><pre class=\"theme:github toolbar:2 lang:c# decode:true\">public class Employee\n{\n    public int Id { get; set; }\n    public string FirstName { get; set; }\n    public string LastName { get; set; }\n    public DateTime? BirthDate { get; set; }\n    public int EmployeeTypeId { get; set; }\n    public bool IsDeleted { get; set; }\n    public string Email { get; set; }\n\n    public virtual EmployeeType EmployeeType { get; set; }\n\n    [NotMapped]\n    public int? Age =&gt; BirthDate.HasValue ? (DateTime.Now - BirthDate.Value).Days \/ 365 : (int?)null;\n}<\/pre><\/div>\n\n\n\n<p><strong>EmployeeType.cs<\/strong> :<\/p>\n\n\n\n<div class=\"wp-block-urvanov-syntax-highlighter-code-block\"><pre class=\"theme:github toolbar:2 lang:c# decode:true\">public class EmployeeType\n{\n    public int Id { get; set; }\n    public string Name { get; set; }\n}<\/pre><\/div>\n\n\n\n<p class=\" translation-block\">Let's create <strong>AppDbContext <\/strong> to Infrastructure.<\/p>\n\n\n\n<div class=\"wp-block-urvanov-syntax-highlighter-code-block\"><pre class=\"theme:github toolbar:2 lang:c# decode:true\">public class AppDbContext : DbContext\n{\n    public AppDbContext(DbContextOptions&lt;AppDbContext&gt; options) : base(options)\n    {\n\n    }\n    public DbSet&lt;Employee&gt; Employees { get; set; }\n    public DbSet&lt;EmployeeType&gt; EmployeeTypes { get; set; }\n}<\/pre><\/div>\n\n\n\n<p class=\" translation-block\">Let's write connection string to <strong>appsettings.json<\/strong>.<\/p>\n\n\n\n<div class=\"wp-block-urvanov-syntax-highlighter-code-block\"><pre class=\"theme:github toolbar:2 lang:js decode:true\">\"ConnectionStrings\": {\n    \"DefaultConnection\": \"Server=(localdb)\\\\mssqllocaldb;Database=ReactCore;Trusted_Connection=True;MultipleActiveResultSets=true\"\n  }<\/pre><\/div>\n\n\n\n<p class=\" translation-block\">Let's Dependcy Injection for <strong>AppDbContext<\/strong> in <strong>Startup.cs<\/strong>.<\/p>\n\n\n\n<div class=\"wp-block-urvanov-syntax-highlighter-code-block\"><pre class=\"theme:github toolbar:2 lang:c# decode:true\">services.AddDbContext&lt;AppDbContext&gt;(options =&gt;\n                    options.UseSqlServer(Configuration.GetConnectionString(\"DefaultConnection\")));<\/pre><\/div>\n\n\n\n<p class=\" translation-block\">at now let's open console and select project as Infrastructure then web layer set as start up project. Let's run the following commands.<\/p>\n\n\n\n<div class=\"wp-block-urvanov-syntax-highlighter-code-block\"><pre class=\"theme:github toolbar:2 lang:sh decode:true\">add-migration InitalDb\nupdate-database<\/pre><\/div>\n\n\n\n<p>Bu i\u015flemleri ger\u00e7ekle\u015ftirdikten sonra Infastructure katman\u0131nda a\u015fa\u011f\u0131daki migration klas\u00f6r\u00fc ve sql server local veritaban\u0131m\u0131zda belirtti\u011fimiz database olu\u015facakt\u0131r.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" width=\"387\" height=\"129\" src=\"https:\/\/okankaradag.com\/wp-content\/uploads\/2021\/09\/Infastrucutre-index.png\" alt=\"\" class=\"wp-image-478\" srcset=\"https:\/\/okankaradag.com\/wp-content\/uploads\/2021\/09\/Infastrucutre-index.png 387w, https:\/\/okankaradag.com\/wp-content\/uploads\/2021\/09\/Infastrucutre-index-300x100.png 300w, https:\/\/okankaradag.com\/wp-content\/uploads\/2021\/09\/Infastrucutre-index-16x5.png 16w\" sizes=\"(max-width: 387px) 100vw, 387px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" width=\"350\" height=\"186\" src=\"https:\/\/okankaradag.com\/wp-content\/uploads\/2021\/09\/sql-server-react-core.png\" alt=\"\" class=\"wp-image-479\" srcset=\"https:\/\/okankaradag.com\/wp-content\/uploads\/2021\/09\/sql-server-react-core.png 350w, https:\/\/okankaradag.com\/wp-content\/uploads\/2021\/09\/sql-server-react-core-300x159.png 300w, https:\/\/okankaradag.com\/wp-content\/uploads\/2021\/09\/sql-server-react-core-16x9.png 16w\" sizes=\"(max-width: 350px) 100vw, 350px\" \/><\/figure>\n\n\n\n<p id=\"add-service-dto\"><strong>Servis ve DTO<\/strong><\/p>\n\n\n\n<p>Veritaban\u0131m\u0131z haz\u0131r \u015fimdi Employee ile ilgili database i\u015flemlerimizi yapacak <strong>EmployeeService <\/strong>ve <strong>IEmployeeService <\/strong>servislerini olu\u015ftural\u0131m.<\/p>\n\n\n\n<p>A\u015fa\u011f\u0131daki gibi iki katmana da services klas\u00f6r\u00fc olu\u015fturup i\u00e7erilerine servisleri ekleyelim.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" width=\"431\" height=\"220\" src=\"https:\/\/okankaradag.com\/wp-content\/uploads\/2021\/09\/AddServices.png\" alt=\"\" class=\"wp-image-481\" srcset=\"https:\/\/okankaradag.com\/wp-content\/uploads\/2021\/09\/AddServices.png 431w, https:\/\/okankaradag.com\/wp-content\/uploads\/2021\/09\/AddServices-300x153.png 300w, https:\/\/okankaradag.com\/wp-content\/uploads\/2021\/09\/AddServices-16x8.png 16w\" sizes=\"(max-width: 431px) 100vw, 431px\" \/><\/figure>\n\n\n\n<p><strong>IEmployeeService <\/strong>:<\/p>\n\n\n\n<div class=\"wp-block-urvanov-syntax-highlighter-code-block\"><pre class=\"theme:github toolbar:2 lang:c# decode:true\">public interface IEmployeeService\n{\n    void Add(Employee employee);\n    void Update(Employee employee);\n    void Delete(Employee employee);\n    Employee Get(int id);\n    IEnumerable&lt;Employee&gt; GetAll();\n    IEnumerable&lt;EmployeeType&gt; GetEmployeeTypes();\n}<\/pre><\/div>\n\n\n\n<p><strong>EmployeeService <\/strong> :<\/p>\n\n\n\n<div class=\"wp-block-urvanov-syntax-highlighter-code-block\"><pre class=\"theme:github toolbar:2 lang:c# decode:true\">public class EmployeeService : IEmployeeService\n{\n    private readonly AppDbContext db;\n    public EmployeeService(AppDbContext db)\n    {\n        this.db = db;\n    }\n\n    public void Add(Employee employee)\n    {\n        db.Add(employee);\n        db.SaveChanges();\n    }\n\n    public void Delete(Employee employee)\n    {\n        employee.IsDeleted = true;\n        db.Update(employee);\n        db.SaveChanges();\n    }\n\n    public Employee Get(int id)\n    {\n        return db.Employees.FirstOrDefault(e =&gt; e.Id == id &amp;&amp; !e.IsDeleted);\n    }\n\n    public IEnumerable&lt;Employee&gt; GetAll()\n    {\n        return db.Employees.Where(em =&gt; !em.IsDeleted).AsEnumerable();\n    }\n\n    public void Update(Employee employee)\n    {\n        db.Employees.Update(employee);\n        db.SaveChanges();\n    }\n    public IEnumerable&lt;EmployeeType&gt; GetEmployeeTypes()\n    {\n        return db.EmployeeTypes.ToList();\n    }\n}<\/pre><\/div>\n\n\n\n<p>Startup.cs&#8217;de servisimizi tan\u0131mlayal\u0131m<\/p>\n\n\n\n<div class=\"wp-block-urvanov-syntax-highlighter-code-block\"><pre class=\"theme:github toolbar:2 lang:c# decode:true\">services.AddScoped&lt;IEmployeeService, EmployeeService&gt;();<\/pre><\/div>\n\n\n\n<p>Apiyi yazmadan \u00f6nce veri modelleme i\u015flemlerini yapmal\u0131y\u0131z. \u00d6ncelikle Domain alt\u0131nda DTOs (Data Transfer Object) ad\u0131nda bir klas\u00f6r olu\u015fturup i\u00e7ine <strong>EmployeeIndexDTO <\/strong>ve <strong>EmployeeDTO <\/strong>ad\u0131nda iki tane class ekleyelim.<\/p>\n\n\n\n<p><strong>EmployeeDTO <\/strong>:<\/p>\n\n\n\n<div class=\"wp-block-urvanov-syntax-highlighter-code-block\"><pre class=\"theme:github toolbar:2 lang:c# decode:true\">public class EmployeeDTO\n{\n    [Required]\n    [StringLength(50, MinimumLength = 2)]\n    public string FirstName { get; set; }\n    [Required]\n    [StringLength(50, MinimumLength = 2)]\n    public string LastName { get; set; }\n    [DisplayFormat(DataFormatString =\"{0:yyyy-MM-dd}\",ApplyFormatInEditMode =true)]\n    public DateTime? BirthDate { get; set; }\n    [Required]\n    [EmailAddress]\n    public string Email { get; set; }\n    [Required]\n    public int EmployeeTypeId { get; set; }\n}<\/pre><\/div>\n\n\n\n<p><strong>EmployeeIndexDTO <\/strong>:<\/p>\n\n\n\n<div class=\"wp-block-urvanov-syntax-highlighter-code-block\"><pre class=\"theme:github toolbar:2 lang:c# decode:true\">public class EmployeeIndexDTO\n{\n    public int Id { get; set; }\n    public string FirstName { get; set; }\n    public string LastName { get; set; }\n    public string Email { get; set; }\n    public string EmployeeTypeName { get; set; }\n    public int? Age { get; set; }\n}<\/pre><\/div>\n\n\n\n<p>Mapper i\u015flemleri i\u00e7in web katman\u0131na automapper paketlerini y\u00fckleyelim<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" width=\"905\" height=\"292\" src=\"https:\/\/okankaradag.com\/wp-content\/uploads\/2021\/09\/mapper-nuget.png\" alt=\"\" class=\"wp-image-484\" srcset=\"https:\/\/okankaradag.com\/wp-content\/uploads\/2021\/09\/mapper-nuget.png 905w, https:\/\/okankaradag.com\/wp-content\/uploads\/2021\/09\/mapper-nuget-300x97.png 300w, https:\/\/okankaradag.com\/wp-content\/uploads\/2021\/09\/mapper-nuget-768x248.png 768w, https:\/\/okankaradag.com\/wp-content\/uploads\/2021\/09\/mapper-nuget-16x5.png 16w\" sizes=\"(max-width: 905px) 100vw, 905px\" \/><\/figure>\n\n\n\n<p>Web katman\u0131n k\u00f6k dizinine <strong>MapperProfile.cs<\/strong> ekleyelim ve mapleme i\u015flemlerini yapal\u0131m<\/p>\n\n\n\n<div class=\"wp-block-urvanov-syntax-highlighter-code-block\"><pre class=\"theme:github toolbar:2 lang:c# decode:true\">public class MapperProfile : Profile\n{\n    public MapperProfile()\n    {\n        CreateMap&lt;Employee, EmployeeIndexDTO&gt;()\n            .ForMember(src =&gt; src.EmployeeTypeName, opts =&gt; opts.MapFrom(dest =&gt; dest.EmployeeType.Name));\n        CreateMap&lt;Employee, EmployeeDTO&gt;().ReverseMap();\n    }\n}<\/pre><\/div>\n\n\n\n<p><strong>startup.cs<\/strong> :<\/p>\n\n\n\n<div class=\"wp-block-urvanov-syntax-highlighter-code-block\"><pre class=\"theme:github toolbar:2 lang:c# decode:true\">var mapperConfig = new MapperConfiguration(cfg =&gt; cfg.AddProfile(new MapperProfile()));\nservices.AddAutoMapper(typeof(Startup));\nservices.AddSingleton(mapperConfig);<\/pre><\/div>\n\n\n\n<p id=\"api\"><strong>EmployeeController ad\u0131nda bir api controller a\u00e7al\u0131m<\/strong><\/p>\n\n\n\n<div class=\"wp-block-urvanov-syntax-highlighter-code-block\"><pre class=\"theme:github toolbar:2 lang:c# decode:true\">[Route(\"api\/employee\")]\n[ApiController]\npublic class EmployeeController : ControllerBase\n{\n    private IEmployeeService EmployeeService;\n    private IMapper Mapper;\n    public EmployeeController(IEmployeeService employeeService, IMapper mapper)\n    {\n        EmployeeService = employeeService;\n        Mapper = mapper;\n    }\n    [HttpGet]\n    public IActionResult Get(int? id)\n    {\n        if (id.HasValue)\n        {\n            var employee = EmployeeService.Get(id.Value);\n            if (employee != null)\n            {\n                var dto = Mapper.Map&lt;EmployeeDTO&gt;(employee);\n                return Ok(dto);\n            }\n            else\n            {\n                return NotFound();\n            }\n\n        }\n        var employees = EmployeeService.GetAll();\n        var model = Mapper.Map&lt;IEnumerable&lt;EmployeeIndexDTO&gt;&gt;(employees);\n        return Ok(model);\n    }\n    [HttpPost]\n    public IActionResult Post(EmployeeDTO dto)\n    {\n        if (!ModelState.IsValid)\n        {\n            return Ok(ModelState);\n        }\n        var employee = Mapper.Map&lt;Employee&gt;(dto);\n        EmployeeService.Add(employee);\n        return Ok();\n    }\n    [HttpPut]\n    public IActionResult Update(EmployeeDTO dto, int id)\n    {\n        if (!ModelState.IsValid)\n        {\n            return Ok(ModelState);\n        }\n        var employee = EmployeeService.Get(id);\n        employee = Mapper.Map(dto, employee);\n        EmployeeService.Update(employee);\n        return Ok();\n\n    }\n    [HttpDelete]\n    public IActionResult Delete(int? id)\n    {\n        if (id.HasValue)\n        {\n            var employee = EmployeeService.Get(id.Value);\n            if (employee != null)\n            {\n                EmployeeService.Delete(employee);\n                return Ok();\n            }\n\n        }\n        return NotFound();\n    }\n    [Route(\"\/api\/employeeTypes\")]\n    [HttpGet]\n    public IActionResult GetEmployeeTypes()\n    {\n        var employees = EmployeeService.GetEmployeeTypes();\n        return Ok(employees);\n    }\n}<\/pre><\/div>\n\n\n\n<p>EmployeeType tablosuna sql server \u00fczerinden a\u015fa\u011f\u0131daki gibi eklemeler yapabilirsiniz.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" width=\"398\" height=\"140\" src=\"https:\/\/okankaradag.com\/wp-content\/uploads\/2021\/09\/sql-server-employye-types.png\" alt=\"\" class=\"wp-image-488\" srcset=\"https:\/\/okankaradag.com\/wp-content\/uploads\/2021\/09\/sql-server-employye-types.png 398w, https:\/\/okankaradag.com\/wp-content\/uploads\/2021\/09\/sql-server-employye-types-300x106.png 300w, https:\/\/okankaradag.com\/wp-content\/uploads\/2021\/09\/sql-server-employye-types-16x6.png 16w\" sizes=\"(max-width: 398px) 100vw, 398px\" \/><\/figure>\n\n\n\n<p id=\"api-test\"><strong>Apiyi Test edelim<\/strong><\/p>\n\n\n\n<p>Apiyi test etmek i\u00e7in <strong>postman<\/strong> yada <strong>swagger <\/strong>kullanabilirsiniz ben pop\u00fcler olan postman \u00fczerinden yapaca\u011f\u0131m.<\/p>\n\n\n\n<p><strong>Employee Post Api test:<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" width=\"1024\" height=\"459\" src=\"https:\/\/okankaradag.com\/wp-content\/uploads\/2021\/09\/postman-test-1-1024x459.png\" alt=\"\" class=\"wp-image-490\" srcset=\"https:\/\/okankaradag.com\/wp-content\/uploads\/2021\/09\/postman-test-1-1024x459.png 1024w, https:\/\/okankaradag.com\/wp-content\/uploads\/2021\/09\/postman-test-1-300x134.png 300w, https:\/\/okankaradag.com\/wp-content\/uploads\/2021\/09\/postman-test-1-768x344.png 768w, https:\/\/okankaradag.com\/wp-content\/uploads\/2021\/09\/postman-test-1-18x8.png 18w, https:\/\/okankaradag.com\/wp-content\/uploads\/2021\/09\/postman-test-1.png 1409w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" width=\"1024\" height=\"238\" src=\"https:\/\/okankaradag.com\/wp-content\/uploads\/2021\/09\/postman-test-2-1024x238.png\" alt=\"\" class=\"wp-image-491\" srcset=\"https:\/\/okankaradag.com\/wp-content\/uploads\/2021\/09\/postman-test-2-1024x238.png 1024w, https:\/\/okankaradag.com\/wp-content\/uploads\/2021\/09\/postman-test-2-300x70.png 300w, https:\/\/okankaradag.com\/wp-content\/uploads\/2021\/09\/postman-test-2-768x179.png 768w, https:\/\/okankaradag.com\/wp-content\/uploads\/2021\/09\/postman-test-2-18x4.png 18w, https:\/\/okankaradag.com\/wp-content\/uploads\/2021\/09\/postman-test-2.png 1410w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>\u015eimdi bu api projemizin i\u00e7ine bir react projesi ekleyelim ve crud i\u015flemlerini ekran \u00fczerinden yapal\u0131m.<\/p>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h4 class=\"has-vivid-red-color has-text-color\" id=\"react-middleware\">React &#8211; Frontend<\/h4>\n\n\n\n<p>projemize react eklemek i\u00e7in \u00f6n\u00fcm\u00fczde iki yol var, UI ad\u0131nda 4. bir katman a\u00e7mak  yada Web katman\u0131n i\u00e7ine eklemek. Biz ikinci yoldan devam edece\u011fiz<\/p>\n\n\n\n<p>Create Rreact App uygulamas\u0131n\u0131 web katman\u0131nda client klas\u00f6r\u00fc alt\u0131nda olu\u015fturaca\u011f\u0131z, typescript kullanaca\u011f\u0131z.<\/p>\n\n\n\n<p>A\u015fa\u011f\u0131daki komutu web katman\u0131 i\u00e7inde \u00e7al\u0131\u015ft\u0131r\u0131n\u0131z.<\/p>\n\n\n\n<div class=\"wp-block-urvanov-syntax-highlighter-code-block\"><pre class=\"lang:sh decode:true\">npx create-react-app client --template typescript<\/pre><\/div>\n\n\n\n<p><strong>Create react app<\/strong> ba\u015far\u0131l\u0131 bir \u015fekilde y\u00fcklendi \u015fimdi <strong>middleware<\/strong>da baz\u0131 ayarlar\u0131 yapmadan \u00f6nce <strong>Nuget <\/strong>\u00fczerinden a\u015fa\u011f\u0131daki paketleri y\u00fckleyelim.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" width=\"911\" height=\"311\" src=\"https:\/\/okankaradag.com\/wp-content\/uploads\/2021\/09\/nuget-spa-services.png\" alt=\"\" class=\"wp-image-492\" srcset=\"https:\/\/okankaradag.com\/wp-content\/uploads\/2021\/09\/nuget-spa-services.png 911w, https:\/\/okankaradag.com\/wp-content\/uploads\/2021\/09\/nuget-spa-services-300x102.png 300w, https:\/\/okankaradag.com\/wp-content\/uploads\/2021\/09\/nuget-spa-services-768x262.png 768w, https:\/\/okankaradag.com\/wp-content\/uploads\/2021\/09\/nuget-spa-services-18x6.png 18w\" sizes=\"(max-width: 911px) 100vw, 911px\" \/><\/figure>\n\n\n\n<p><strong>startup.cs:<\/strong><\/p>\n\n\n\n<div class=\"wp-block-urvanov-syntax-highlighter-code-block\"><pre class=\"lang:c# decode:true\">app.UseEndpoints(endpoints =&gt;\n{\n    endpoints.MapControllerRoute(\n        name: \"default\",\n        pattern: \"{controller}\/{action=Index}\/{id?}\");\n});\napp.UseSpa(spa =&gt;\n{\n    spa.Options.SourcePath = Path.Join(env.ContentRootPath, \"client\");\n\n    if (env.IsDevelopment())\n    {\n        spa.UseReactDevelopmentServer(npmScript: \"start\");\n    }\n});<\/pre><\/div>\n\n\n\n<p>Typescript <strong>build edebilmek<\/strong> i\u00e7in<strong> Microsoft.TypeScript.MSBuild <\/strong>paketini nuget \u00fczerinden kural\u0131m. react\u0131 ba\u015far\u0131l\u0131 bir \u015fekilde ekledik <strong>vs code<\/strong> \u00fczerinden a\u00e7t\u0131\u011f\u0131m\u0131zda a\u015fa\u011f\u0131daki \u015fekilde g\u00f6r\u00fcnecektir. (componenets ve pages klas\u00f6rlerini de ekleyelim)<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" width=\"258\" height=\"475\" src=\"https:\/\/okankaradag.com\/wp-content\/uploads\/2021\/09\/cra-index.png\" alt=\"\" class=\"wp-image-493\" srcset=\"https:\/\/okankaradag.com\/wp-content\/uploads\/2021\/09\/cra-index.png 258w, https:\/\/okankaradag.com\/wp-content\/uploads\/2021\/09\/cra-index-163x300.png 163w, https:\/\/okankaradag.com\/wp-content\/uploads\/2021\/09\/cra-index-7x12.png 7w\" sizes=\"(max-width: 258px) 100vw, 258px\" \/><\/figure>\n\n\n\n<p>http ba\u011flant\u0131lar\u0131 i\u00e7in <strong>axios<\/strong>, routing i\u015flemleri i\u00e7in de <strong>react-router<\/strong>&#8216;\u0131 ve tasar\u0131m i\u00e7in de <strong>bootstrap<\/strong>\u0131 kural\u0131m<\/p>\n\n\n\n<div class=\"wp-block-urvanov-syntax-highlighter-code-block\"><pre class=\"lang:sh decode:true\">npm i axios react-router-dom react-bootstrap<\/pre><\/div>\n\n\n\n<div class=\"wp-block-urvanov-syntax-highlighter-code-block\"><pre class=\"lang:sh decode:true\">npm i --save @types\/react-router-dom<\/pre><\/div>\n\n\n\n<blockquote class=\"wp-block-quote\"><p>Bootstap&#8217;\u0131n css dosyas\u0131n\u0131 \u015fu linkten inidirip ve dist klas\u00f6r\u00fc alt\u0131na ekleyelim<\/p><\/blockquote>\n\n\n\n<h4 class=\"has-vivid-red-color has-text-color\" id=\"react-crud\">EmployeeService.ts:<\/h4>\n\n\n\n<p>Bir tablo \u00fczerinde personelleri listeleyece\u011fiz.  Bu tablo \u00fczerinden g\u00fcncelleme, ekleme ve silme i\u015flemleri yapaca\u011f\u0131z.<\/p>\n\n\n\n<p>Bu i\u015flemleri yapabilmek i\u00e7in employeeService ad\u0131nda bir servis olu\u015fturaca\u011f\u0131z. Bu servisi olu\u015fturaca\u011f\u0131m\u0131z Services klas\u00f6r\u00fc alt\u0131na ekleyece\u011fiz.<\/p>\n\n\n\n<div class=\"wp-block-urvanov-syntax-highlighter-code-block\"><pre class=\"lang:js decode:true\">import axios from \"axios\";\nimport history from \"..\/history\";\n\nexport interface EmployeeDTO {\n  firstName: string;\n  lastName: string;\n  birthDate?: string;\n  email: string;\n  employeeTypeId: number | undefined;\n}\nexport interface EmployeeIndexDTO {\n  id: number;\n  firstName: string;\n  lastName: string;\n  age?: number;\n  email: string;\n  employeeTypeName: string;\n}\nexport interface EmployeeType {\n  id: string;\n  name: string;\n}\nconst baseUrl = `\/api\/`;\nconst http = axios.create({\n  baseURL: baseUrl,\n  headers: {\n    \"Content-type\": \"application\/json\",\n  },\n});\n\nconst getAll = () =&gt; {\n  return http.get&lt;EmployeeIndexDTO[]&gt;(\"employee\");\n};\nconst getById = (id: number) =&gt; {\n  return http.get&lt;EmployeeDTO&gt;(`employee?id=${id}`);\n};\nconst create = (model: EmployeeDTO) =&gt; {\n  return http.post&lt;EmployeeDTO&gt;(\"employee\", model);\n};\nconst update = (model: EmployeeDTO, id: number) =&gt; {\n  return http.put&lt;EmployeeDTO&gt;(`employee?id=${id}`, { ...model });\n};\nconst _delete = (id: number) =&gt; {\n  return http.delete(`employee?id=${id}`);\n};\nconst getEmployeeTypes = () =&gt; {\n  return http.get&lt;EmployeeType[]&gt;(\"employeeTypes\");\n};\nhttp.interceptors.response.use(\n  (response) =&gt; {\n    return response;\n  },\n  (error) =&gt; {\n    if (!error.response || typeof error.response.data !== \"object\") {\n      setTimeout(() =&gt; {}, 1000);\n      return Promise.reject(error);\n    }\n    const { status, config, data } = error.response;\n    console.log(status, config, data);\n    if (config.method === \"get\") {\n      if (status === 401) {\n        history.push(\"\/exception\/type=401\");\n      } else if (status === 403) {\n        history.push(\"\/exception\/type=403\");\n      } else if (status === 404) {\n        history.push(\"\/exception\/type=404\");\n      } else if (status === 500) {\n        history.push(\"\/exception\/type=500\");\n      }\n    }\n  }\n);\nexport const employeeService = {\n  getAll,\n  getById,\n  create,\n  update,\n  delete: _delete,\n  getEmployeeTypes,\n};\n<\/pre><\/div>\n\n\n\n<p>\u0130ki tane <strong>EmployeeDTO <\/strong>veri tipimiz var <strong>EmployeeIndexDTO<\/strong> listelemede kullanmak i\u00e7in EmployeeDTO ise g\u00fcncelleme ve ekleme yaparken kullanaca\u011f\u0131m\u0131z tip. axios \u00fczerinden bir http nesnesi olu\u015fturup get, post, put, delete gibi i\u015flemleri bunun \u00fczerinden yapt\u0131k.<br>Servis haz\u0131r, \u015fimdi Pages klas\u00f6r\u00fc alt\u0131nda bir Employee klas\u00f6r\u00fc olu\u015ftural\u0131m buraya index ve createOrEdit ad\u0131nda tsx tipinde sayfalar\u0131m\u0131z ekleyelim.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" width=\"247\" height=\"91\" src=\"https:\/\/okankaradag.com\/wp-content\/uploads\/2021\/10\/employee-page.png\" alt=\"\" class=\"wp-image-508\" srcset=\"https:\/\/okankaradag.com\/wp-content\/uploads\/2021\/10\/employee-page.png 247w, https:\/\/okankaradag.com\/wp-content\/uploads\/2021\/10\/employee-page-18x7.png 18w\" sizes=\"(max-width: 247px) 100vw, 247px\" \/><\/figure>\n\n\n\n<p><strong>react-router ve bootstrap ayarlar\u0131<\/strong><\/p>\n\n\n\n<p>k\u00f6k klas\u00f6r\u00fcm\u00fczdeki index.tsx dosyas\u0131na bootstrap css dosyas\u0131n\u0131 import edelim ve App componentini Router tagleri i\u00e7ine alal\u0131m<\/p>\n\n\n\n<p><strong>index.tsx:<\/strong><\/p>\n\n\n\n<div class=\"wp-block-urvanov-syntax-highlighter-code-block\"><pre class=\"lang:js decode:true\">import React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport \".\/index.css\";\nimport App from \".\/App\";\nimport { Router } from \"react-router-dom\";\nimport \".\/dist\/bootstrap\/bootstrap.min.css\";\nimport history from \".\/history.js\";\nReactDOM.render(\n  &lt;React.StrictMode&gt;\n   &lt;Router history={history}&gt;\n      &lt;App \/&gt;\n    &lt;\/Router&gt;\n  &lt;\/React.StrictMode&gt;,\n  document.getElementById(\"root\")\n);\n<\/pre><\/div>\n\n\n\n<p><strong>history.js<\/strong><\/p>\n\n\n\n<div class=\"wp-block-urvanov-syntax-highlighter-code-block\"><pre class=\"lang:js decode:true\">import { createBrowserHistory } from \"history\";\nexport default createBrowserHistory();\n<\/pre><\/div>\n\n\n\n<p><strong>app.tsx:<\/strong><\/p>\n\n\n\n<div class=\"wp-block-urvanov-syntax-highlighter-code-block\"><pre class=\"lang:js decode:true\">import { Switch, Route } from &quot;react-router-dom&quot;;\nimport Edit from &quot;.\/pages\/Employee\/edit&quot;;\nimport Create from &quot;.\/pages\/Employee\/create&quot;;\nimport Index from &quot;.\/pages\/Employee&quot;;\nimport &quot;.\/App.css&quot;;\n\nfunction App() {\n  return (\n    &lt;div classname=&quot;App&quot;&gt;\n      &lt;switch&gt;\n        &lt;route path=&quot;\/employee\/edit\/:id&quot; component=&quot;{Edit}&quot; \/&gt;\n        &lt;route path=&quot;\/employee\/create&quot; component=&quot;{Create}&quot; \/&gt;\n        &lt;route path=&quot;\/employee\/index&quot; component=&quot;{Index}&quot; \/&gt;\n        &lt;route path=&quot;\/exception\/type=:type&quot; component=&quot;{Exception}&quot; \/&gt;\n      &lt;\/switch&gt;\n    &lt;\/div&gt;\n  );\n}\n\nexport default App;\n<\/pre><\/div>\n\n\n\n<p class=\"has-vivid-red-color has-text-color\" id=\"exception\" style=\"font-size:17px\"><strong>Hata sayfalar\u0131n\u0131n ekleme (404, 500 vs.)<\/strong><\/p>\n\n\n\n<p>Yanl\u0131\u015f bir url sonucunda \u00f6rne\u011fin, Employee Controller&#8217;a 5 idli bir get i\u015flemi yapt\u0131k ve cevap olarak 404 geldi, employeeService bunu yakal\u0131yor ve ilgili hataya g\u00f6re sayfay\u0131 y\u00f6nlendiriyor. Bunun i\u00e7in Exception ad\u0131ndan bir klas\u00f6r olu\u015fturup i\u00e7ine Index.tsx dosyas\u0131 ekleyelim<\/p>\n\n\n\n<p><strong>Exception\/Index.tsx<\/strong><\/p>\n\n\n\n<div class=\"wp-block-urvanov-syntax-highlighter-code-block\"><pre class=\"lang:js decode:true\">import { useParams, useHistory } from &quot;react-router-dom&quot;;\nimport { Button } from &quot;react-bootstrap&quot;;\ninterface RouteParams {\n  type: string;\n}\nconst Exception = () =&gt; {\n  const params = useParams&lt;routeparams&gt;();\n  const history = useHistory();\n\n  return (\n    &lt;&gt;\n      &lt;div&gt;\n        &lt;p&gt;Hata : {params.type}&lt;\/p&gt;\n        &lt;button\n          variant=&quot;primary&quot;\n          onclick=&quot;{()&quot; &gt; history.push(&quot;\/employee\/index&quot;)}\n        &gt;\n          Back to Home\n        &lt;\/button&gt;\n      &lt;\/div&gt;\n    &lt;\/&gt;\n  );\n};\n\nexport default Exception;<\/pre><\/div>\n\n\n\n<blockquote class=\"wp-block-quote\"><p><strong>useParams<\/strong>: query ile gelen de\u011ferleri y\u00f6netmemiz sa\u011flayan bir hook.<\/p><\/blockquote>\n\n\n\n<p class=\"has-vivid-red-color has-text-color\" id=\"read-delete\"><strong>Listeleme-Silme (Employee\/Index.tsx)<\/strong><\/p>\n\n\n\n<div class=\"wp-block-urvanov-syntax-highlighter-code-block\"><pre class=\"lang:js decode:true\">import { useState, useEffect } from \"react\";\nimport {\n  employeeService,\n  EmployeeIndexDTO,\n} from \"..\/..\/services\/EmployeeService\";\nimport { Table, Button } from \"react-bootstrap\";\nimport { useHistory } from \"react-router-dom\";\n\nfunction Index() {\n  const [employees, setEmployees] = useState&lt;EmployeeIndexDTO[]&gt;([]);\n  const history = useHistory();\n  useEffect(() =&gt; {\n    employeeService\n      .getAll()\n      .then((response) =&gt; {\n        setEmployees(response.data);\n      })\n      .catch((e) =&gt; {\n        console.log(e);\n      });\n  }, []);\n  const deleteRow = (id: number) =&gt; {\n    console.log(id);\n    employeeService.delete(id).then((response) =&gt; {\n      if (response.status === 200) {\n        setEmployees(employees.filter((e) =&gt; e.id !== id));\n      }\n    });\n  };\n  return (\n    &lt;div className=\"card col-md-10 text-start\"&gt;\n      &lt;div className=\"card-header\"&gt;\n        &lt;h4&gt;Personeller&lt;\/h4&gt;\n      &lt;\/div&gt;\n      &lt;div className=\"card-body\"&gt;\n        &lt;div className=\"\"&gt;\n          &lt;div className=\"d-flex justify-content-end me-3 mt-3\"&gt;\n            &lt;Button\n              variant=\"danger\"\n              onClick={() =&gt; history.push(\"\/employee\/create\")}\n            &gt;\n              Personel Ekle\n            &lt;\/Button&gt;\n          &lt;\/div&gt;\n          &lt;Table hover responsive&gt;\n            &lt;thead&gt;\n              &lt;tr&gt;\n                &lt;th&gt;Ad Soyad&lt;\/th&gt;\n                &lt;th className=\"d-none d-sm-table-cell\"&gt;Pozisyon&lt;\/th&gt;\n                &lt;th className=\"d-none d-sm-table-cell\"&gt;Ya\u015f&lt;\/th&gt;\n                &lt;th className=\"d-none d-md-table-cell\"&gt;E-posta&lt;\/th&gt;\n                &lt;th&gt;&lt;\/th&gt;\n              &lt;\/tr&gt;\n            &lt;\/thead&gt;\n            &lt;tbody&gt;\n              {employees.map((pt, index) =&gt; {\n                return (\n                  &lt;tr key={index}&gt;\n                    &lt;td&gt;{pt.firstName + pt.lastName}&lt;\/td&gt;\n                    &lt;td className=\"d-none d-sm-table-cell\"&gt;\n                      {pt.employeeTypeName}\n                    &lt;\/td&gt;\n                    &lt;td className=\"d-none d-sm-table-cell\"&gt;{pt.age}&lt;\/td&gt;\n                    &lt;td className=\"d-none d-md-table-cell\"&gt;{pt.email}&lt;\/td&gt;\n                    &lt;td&gt;\n                      &lt;Button\n                        variant=\"primary\"\n                        className=\"mx-1\"\n                        onClick={() =&gt; history.push(\"\/employee\/edit\/\" + pt.id)}\n                      &gt;\n                        G\u00fcncelle\n                      &lt;\/Button&gt;\n                      &lt;Button variant=\"danger\" onClick={() =&gt; deleteRow(pt.id)}&gt;\n                        Sil\n                      &lt;\/Button&gt;\n                    &lt;\/td&gt;\n                  &lt;\/tr&gt;\n                );\n              })}\n            &lt;\/tbody&gt;\n          &lt;\/Table&gt;\n        &lt;\/div&gt;\n      &lt;\/div&gt;\n    &lt;\/div&gt;\n  );\n}\n\nexport default Index;\n<\/pre><\/div>\n\n\n\n<p>Listeleme sayfam\u0131z ilk a\u00e7\u0131l\u0131\u015fta useEffect ile state&#8217;i dolduruyor, deleteRow fonksiyonu da hem clienttan hem serverdan ilgili veriyi kald\u0131r\u0131yor<\/p>\n\n\n\n<p class=\"has-vivid-red-color has-text-color\" id=\"create-update\"><strong>Ekleme-G\u00fcncelleme (createOrEdit.tsx)<\/strong><\/p>\n\n\n\n<p>Create ve Edit sayfalar\u0131nda html elementleri tekrar etti\u011fi i\u00e7in ayn\u0131 sayfada i\u015flemleri yapaca\u011f\u0131z. useParam kullanarak id parametresi olup olmad\u0131\u011f\u0131n\u0131 kontrol edece\u011fiz e\u011fer id var ise servise gidip o idli verimizi al\u0131p ilgili state&#8217;e ataca\u011f\u0131z de\u011fil ise de initial state&#8217;i kullanaca\u011f\u0131z.<\/p>\n\n\n\n<p><strong>State ve Interface tan\u0131mlar\u0131<\/strong><\/p>\n\n\n\n<div class=\"wp-block-urvanov-syntax-highlighter-code-block\"><pre class=\"lang:js decode:true\">  interface RouteParams {\n    id: string;\n  }\n  interface EmployeeValidationState {\n    firstName: boolean;\n    lastName: boolean;\n    birthDate: boolean;\n    email: boolean;\n    employeeTypeId: boolean;\n  }\n  const params = useParams&lt;RouteParams&gt;();\n  const history = useHistory();\n  const [employee, setEmployee] = useState&lt;EmployeeDTO&gt;({\n    firstName: \"\",\n    lastName: \"\",\n    birthDate: new Date().toISOString().substring(0, 10),\n    email: \"\",\n    employeeTypeId: undefined,\n  });\n  const [employeeTypes, setEmployeeTypes] = useState&lt;EmployeeType[]&gt;([]);\n  const [employeeValidation, setEmployeeValidation] =\n    useState&lt;EmployeeValidationState&gt;({\n      firstName: true,\n      lastName: true,\n      birthDate: true,\n      email: true,\n      employeeTypeId: true,\n    });<\/pre><\/div>\n\n\n\n<p><strong>Verilerin y\u00fcklenmesi (Employee ve EmployeeTypes)<\/strong><\/p>\n\n\n\n<div class=\"wp-block-urvanov-syntax-highlighter-code-block\"><pre class=\"lang:js decode:true\">  useEffect(() =&gt; {\n    const idParam = parseInt(params.id);\n    employeeService\n      .getEmployeeTypes()\n      .then((response) =&gt; {\n        setEmployeeTypes(response.data);\n      })\n      .catch((e) =&gt; {\n        console.log(e);\n      });\n    if (idParam) {\n      employeeService\n        .getById(idParam)\n        .then((response) =&gt; {\n          setEmployee(response.data);\n        })\n        .catch((e) =&gt; {\n          console.log(e);\n        });\n    }\n  }, [params.id]);<\/pre><\/div>\n\n\n\n<p><strong>Validation fonksiyonlar\u0131<\/strong><\/p>\n\n\n\n<div class=\"wp-block-urvanov-syntax-highlighter-code-block\"><pre class=\"lang:js decode:true\">  const setValid = () =&gt; {\n    if (\n      employee.firstName === \"\" ||\n      employee.firstName == null ||\n      employee.firstName?.length &lt; 2\n    ) {\n      employeeValidation.firstName = false;\n    } else {\n      employeeValidation.firstName = true;\n    }\n    if (\n      employee.lastName === \"\" ||\n      employee.lastName == null ||\n      employee.lastName?.length &lt; 2\n    ) {\n      employeeValidation.lastName = false;\n    } else {\n      employeeValidation.lastName = true;\n    }\n    if (\n      employee.email === \"\" ||\n      employee.email == null ||\n      !\/\\S+@\\S+\\.\\S+\/.test(employee.email)\n    ) {\n      employeeValidation.email = false;\n    } else {\n      employeeValidation.email = true;\n    }\n    if (\n      employee.employeeTypeId === undefined ||\n      employee.employeeTypeId == null\n    ) {\n      employeeValidation.employeeTypeId = false;\n    } else {\n      employeeValidation.employeeTypeId = true;\n    }\n    setEmployeeValidation({ ...employeeValidation });\n    return employeeValidation;\n  };\n  const isValidForm = (model: EmployeeValidationState) =&gt; {\n    return (\n      model.firstName &amp;&amp; model.lastName &amp;&amp; model.email &amp;&amp; model.employeeTypeId\n    );\n  };<\/pre><\/div>\n\n\n\n<p><strong>formu submit eden fonskiyon:<\/strong><\/p>\n\n\n\n<div class=\"wp-block-urvanov-syntax-highlighter-code-block\"><pre class=\"lang:js decode:true\">  const submitForm = () =&gt; {\n    const idParam = parseInt(params.id);\n    var model = setValid();\n    if (isValidForm(model)) {\n      if (!idParam) {\n        employeeService\n          .create(employee)\n          .then((response) =&gt; {\n            history.push(\"\/employee\/index\");\n          })\n          .catch((error) =&gt; {\n            console.log(error.response);\n          });\n      } else {\n        employeeService\n          .update(employee, idParam)\n          .then((response) =&gt; {\n            history.push(\"\/employee\/index\");\n          })\n          .catch((error) =&gt; {\n            console.log(error);\n          });\n      }\n    }\n  };<\/pre><\/div>\n\n\n\n<p><strong>html<\/strong>:<\/p>\n\n\n\n<div class=\"wp-block-urvanov-syntax-highlighter-code-block\"><pre class=\"lang:js decode:true\"> &lt;div classname=&quot;card col-md-8&quot;&gt;\n      &lt;div classname=&quot;card-header text-start&quot;&gt;Ekleme\/G&uuml;ncelleme&lt;\/div&gt;\n      &lt;div classname=&quot;card-body&quot;&gt;\n        &lt;div classname=&quot;text-start&quot;&gt;\n          &lt;div classname=&quot;col-md-6&quot;&gt;\n            &lt;label classname=&quot;form-label&quot;&gt;Ad*&lt;\/label&gt;\n            &lt;input\n              type=&quot;text&quot;\n              classname=&quot;{`form-control&quot; ${\n employeevalidation.firstname ? &quot;&quot; : &quot;is-invalid&quot;\n }`}\n id=&quot;name&quot;\n              required\n value=&quot;{employee?.firstName}&quot;              onchange=&quot;{(e)&quot; &gt;\n                setEmployee({ ...employee, firstName: e.target.value })\n              }\n            \/&gt;\n            {employeeValidation.firstName ? (\n              &quot;&quot;\n            ) : (\n              &lt;div classname=&quot;invalid-feedback&quot;&gt;\n                En az iki karakter girmelisiniz\n              &lt;\/div&gt;\n            )}\n          &lt;\/div&gt;\n          &lt;div classname=&quot;col-md-6&quot;&gt;\n            &lt;label classname=&quot;form-label&quot;&gt;Soyad*&lt;\/label&gt;\n            &lt;input\n              type=&quot;text&quot;\n              classname=&quot;{`form-control&quot; ${\n employeevalidation.lastname ? &quot;&quot; : &quot;is-invalid&quot;\n }`}\n id=&quot;name&quot;\n              value=&quot;{employee?.lastName}&quot;              onchange=&quot;{(e)&quot; &gt;\n                setEmployee({ ...employee, lastName: e.target.value })\n              }\n            \/&gt;\n            {employeeValidation.lastName ? (\n              &quot;&quot;\n            ) : (\n              &lt;div classname=&quot;invalid-feedback&quot;&gt;\n                En az iki karakter girmelisiniz\n              &lt;\/div&gt;\n            )}\n          &lt;\/div&gt;\n          &lt;div classname=&quot;col-md-6&quot;&gt;\n            &lt;label classname=&quot;form-label&quot;&gt;E-posta*&lt;\/label&gt;\n            &lt;input\n              type=&quot;email&quot;\n              classname=&quot;{`form-control&quot; ${\n employeevalidation.email ? &quot;&quot; : &quot;is-invalid&quot;\n }`}\n placeholder=&quot;user@example.com&quot;\n              id=&quot;email&quot;\n              required\n value=&quot;{employee?.email}&quot;              onchange=&quot;{(e)&quot; &gt;\n                setEmployee({ ...employee, email: e.target.value })\n              }\n            \/&gt;\n            {employeeValidation.email ? (\n              &quot;&quot;\n            ) : (\n              &lt;div classname=&quot;invalid-feedback&quot;&gt;\n                E-posta alan\u0131 bo\u015f ya da do\u011fru bi&ccedil;imde de\u011fil\n              &lt;\/div&gt;\n            )}\n          &lt;\/div&gt;\n          &lt;div classname=&quot;col-6&quot;&gt;\n            &lt;label classname=&quot;form-label&quot;&gt;Do\u011fum Tarihi&lt;\/label&gt;\n            &lt;input\n              type=&quot;date&quot;\n              classname=&quot;form-control&quot;\n              id=&quot;birthDate&quot;\n              value=&quot;{employee.birthDate?.substring(0,&quot; 10) || &quot;&quot;}\n onchange=&quot;{(e)&quot; &gt;\n                setEmployee({\n                  ...employee,\n                  birthDate: Date.parse(e.currentTarget.value)\n                    ? new Date(e.currentTarget.value)\n                        .toISOString()\n                        .substring(0, 10)\n                    : undefined,\n                })\n              }\n            \/&gt;\n          &lt;\/div&gt;\n          &lt;div classname=&quot;col-md-6&quot;&gt;\n            &lt;label classname=&quot;form-label&quot;&gt;Pozisyon*&lt;\/label&gt;\n            &lt;select\n              id=&quot;inputState&quot;\n              classname=&quot;{`form-control&quot; ${\n employeevalidation.employeetypeid ? &quot;&quot; : &quot;is-invalid&quot;\n }`}\n value=&quot;{employee?.employeeTypeId}&quot;              onchange=&quot;{(e)&quot; &gt;\n                setEmployee({\n                  ...employee,\n                  employeeTypeId: parseInt(e.target.value),\n                })\n              }\n            &gt;\n              &lt;option value=&quot;&quot;&gt;Se&ccedil;iniz...&lt;\/option&gt;\n              {employeeTypes.map((et) =&gt; (\n                &lt;option key=&quot;{et.id}&quot; value=&quot;{et.id}&quot;&gt;\n                  {et.name}\n                &lt;\/option&gt;\n              ))}\n            &lt;\/select&gt;\n            {employeeValidation.employeeTypeId ? (\n              &quot;&quot;\n            ) : (\n              &lt;div classname=&quot;invalid-feedback&quot;&gt;\n                L&uuml;tfen pozisyon tipi se&ccedil;iniz\n              &lt;\/div&gt;\n            )}\n          &lt;\/div&gt;\n        &lt;\/div&gt;\n      &lt;\/div&gt;\n      &lt;div classname=&quot;card-footer text-start&quot;&gt;\n        &lt;div classname=&quot;col-12&quot;&gt;\n          &lt;button\n            type=&quot;submit&quot;\n            onclick=&quot;{submitForm}&quot;            classname=&quot;btn btn-primary me-1&quot;\n          &gt;\n            Kaydet\n          &lt;\/button&gt;\n          &lt;a href=&quot;\/en\/employee\/index\/&quot; classname=&quot;btn btn-secondary&quot;&gt;\n            &Ccedil;\u0131k\u0131\u015f\n          &lt;\/a&gt;\n        &lt;\/div&gt;\n      &lt;\/div&gt;\n    &lt;\/div&gt;<\/pre><\/div>\n\n\n\n<p><strong>Gif:<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" width=\"1256\" height=\"703\" src=\"https:\/\/okankaradag.com\/wp-content\/uploads\/2021\/10\/react-crud.gif\" alt=\"projenin son hali\" class=\"wp-image-512\"\/><figcaption>Create, Edit, Index sayfalar\u0131 ve silme i\u015flemi<\/figcaption><\/figure>\n\n\n\n<p id=\"github-link\">Github Linki :  <a href=\"https:\/\/github.com\/okankrdg\/ReactCoreCRUD\" data-type=\"URL\" data-id=\"https:\/\/github.com\/okankrdg\/ReactCoreCRUD\">https:\/\/github.com\/okankrdg\/ReactCoreCRUD<\/a><\/p>\n\n\n\n<p>MVC ile react i\u00e7in: <a href=\"https:\/\/okankaradag.com\/en\/asp-net-5\/asp-net-core-5-0-mvc-projesinde-webpack-ve-react-kullanmak\/\" data-type=\"post\" data-id=\"436\">Asp.Net Core (5.0) MVC + Webpack + React<\/a><\/p>\n\n\n\n<p><strong>\u00d6zet<\/strong>:<\/p>\n\n\n\n<p>\u00d6zet olarak yapt\u0131klar\u0131m\u0131z\u0131n \u00fcst\u00fcnden ge\u00e7elim. Domain Driven Design mimarsiyle bir Asp.Net core 5 web api projesi in\u015fa ettik, veritaban\u0131m\u0131z\u0131 ba\u011flad\u0131k arka k\u0131sm\u0131 bitirdikten sonra react-typescript uygulamas\u0131n\u0131 ekledik (create-react-app), services, pages, exception, dist \u015feklinde uygulamam\u0131z\u0131 par\u00e7alad\u0131k, router, bootstrap ayarlar\u0131n\u0131 yapt\u0131k,service klas\u00f6r\u00fcnde EmployeeService ad\u0131nda bir servis ekledik bu servis, axios vas\u0131tas\u0131yla apiyle ba\u011flant\u0131 kurmam\u0131za yarad\u0131, son olarak da pages alt\u0131nda Employee klas\u00f6r\u00fc ekleyip alt\u0131na index ve createOrEdit sayfalar\u0131n\u0131 ekledik. <\/p>","protected":false},"excerpt":{"rendered":"<p>Asp.net core 5.0, react ve typescript kullanarak CRUD (Ekleme, Okuma, Silme) i\u015flemlerini yapan \u00f6rnek bir proje yapaca\u011f\u0131z.<\/p>","protected":false},"author":1,"featured_media":465,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[65,17,42,75,79],"tags":[66,81,82,77,80],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v19.13 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>React, TypeScript ve Asp.Net Core 5 ile CRUD i\u015flemleri - Okan Karada\u011f<\/title>\n<meta name=\"description\" content=\"Asp.net core 5.0, react ve typescript kullanarak CRUD (Ekleme, Okuma, Silme) i\u015flemlerini yapan \u00f6rnek bir proje yapaca\u011f\u0131z.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/okankaradag.com\/en\/asp-net-5\/react-typescript-ve-asp-net-core-5-ile-crud-islemleri\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"React, TypeScript ve Asp.Net Core 5 ile CRUD i\u015flemleri - Okan Karada\u011f\" \/>\n<meta property=\"og:description\" content=\"Asp.net core 5.0, react ve typescript kullanarak CRUD (Ekleme, Okuma, Silme) i\u015flemlerini yapan \u00f6rnek bir proje yapaca\u011f\u0131z.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/okankaradag.com\/en\/asp-net-5\/react-typescript-ve-asp-net-core-5-ile-crud-islemleri\" \/>\n<meta property=\"og:site_name\" content=\"Okan Karada\u011f\" \/>\n<meta property=\"article:published_time\" content=\"2021-10-10T21:32:42+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-10-10T21:42:35+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/okankaradag.com\/wp-content\/uploads\/2021\/09\/dotnet-core-react-800.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"840\" \/>\n\t<meta property=\"og:image:height\" content=\"441\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Okan Karada\u011f\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Okan Karada\u011f\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"15 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/okankaradag.com\/en\/asp-net-5\/react-typescript-ve-asp-net-core-5-ile-crud-islemleri#article\",\"isPartOf\":{\"@id\":\"https:\/\/okankaradag.com\/en\/asp-net-5\/react-typescript-ve-asp-net-core-5-ile-crud-islemleri\"},\"author\":{\"name\":\"Okan Karada\u011f\",\"@id\":\"https:\/\/okankaradag.com\/#\/schema\/person\/0196919c5e3b6a496101ded872640d52\"},\"headline\":\"React, TypeScript ve Asp.Net Core 5 ile CRUD i\u015flemleri\",\"datePublished\":\"2021-10-10T21:32:42+00:00\",\"dateModified\":\"2021-10-10T21:42:35+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/okankaradag.com\/en\/asp-net-5\/react-typescript-ve-asp-net-core-5-ile-crud-islemleri\"},\"wordCount\":1126,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/okankaradag.com\/#\/schema\/person\/0196919c5e3b6a496101ded872640d52\"},\"keywords\":[\"asp.net 5\",\"crud\",\"javascript\",\"reactjs\",\"typescript\"],\"articleSection\":[\"Asp.Net Core 5.0\",\"C#\",\"EntityFramework Core\",\"React\",\"TypeScript\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/okankaradag.com\/en\/asp-net-5\/react-typescript-ve-asp-net-core-5-ile-crud-islemleri#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/okankaradag.com\/en\/asp-net-5\/react-typescript-ve-asp-net-core-5-ile-crud-islemleri\",\"url\":\"https:\/\/okankaradag.com\/en\/asp-net-5\/react-typescript-ve-asp-net-core-5-ile-crud-islemleri\",\"name\":\"React, TypeScript ve Asp.Net Core 5 ile CRUD i\u015flemleri - Okan Karada\u011f\",\"isPartOf\":{\"@id\":\"https:\/\/okankaradag.com\/#website\"},\"datePublished\":\"2021-10-10T21:32:42+00:00\",\"dateModified\":\"2021-10-10T21:42:35+00:00\",\"description\":\"Asp.net core 5.0, react ve typescript kullanarak CRUD (Ekleme, Okuma, Silme) i\u015flemlerini yapan \u00f6rnek bir proje yapaca\u011f\u0131z.\",\"breadcrumb\":{\"@id\":\"https:\/\/okankaradag.com\/en\/asp-net-5\/react-typescript-ve-asp-net-core-5-ile-crud-islemleri#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/okankaradag.com\/en\/asp-net-5\/react-typescript-ve-asp-net-core-5-ile-crud-islemleri\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/okankaradag.com\/en\/asp-net-5\/react-typescript-ve-asp-net-core-5-ile-crud-islemleri#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/okankaradag.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"React, TypeScript ve Asp.Net Core 5 ile CRUD i\u015flemleri\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/okankaradag.com\/#website\",\"url\":\"https:\/\/okankaradag.com\/\",\"name\":\"Okan Karada\u011f\",\"description\":\"Programlama \u00dczerine\",\"publisher\":{\"@id\":\"https:\/\/okankaradag.com\/#\/schema\/person\/0196919c5e3b6a496101ded872640d52\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/okankaradag.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/okankaradag.com\/#\/schema\/person\/0196919c5e3b6a496101ded872640d52\",\"name\":\"Okan Karada\u011f\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/okankaradag.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/ca08a5537d7e304914c37189abedd2a1?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/ca08a5537d7e304914c37189abedd2a1?s=96&d=mm&r=g\",\"caption\":\"Okan Karada\u011f\"},\"logo\":{\"@id\":\"https:\/\/okankaradag.com\/#\/schema\/person\/image\/\"},\"sameAs\":[\"https:\/\/okankaradag.com\"],\"url\":\"https:\/\/okankaradag.com\/en\/author\/admin\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"React, TypeScript ve Asp.Net Core 5 ile CRUD i\u015flemleri - Okan Karada\u011f","description":"Asp.net core 5.0, react ve typescript kullanarak CRUD (Ekleme, Okuma, Silme) i\u015flemlerini yapan \u00f6rnek bir proje yapaca\u011f\u0131z.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/okankaradag.com\/en\/asp-net-5\/react-typescript-ve-asp-net-core-5-ile-crud-islemleri","og_locale":"en_US","og_type":"article","og_title":"React, TypeScript ve Asp.Net Core 5 ile CRUD i\u015flemleri - Okan Karada\u011f","og_description":"Asp.net core 5.0, react ve typescript kullanarak CRUD (Ekleme, Okuma, Silme) i\u015flemlerini yapan \u00f6rnek bir proje yapaca\u011f\u0131z.","og_url":"https:\/\/okankaradag.com\/en\/asp-net-5\/react-typescript-ve-asp-net-core-5-ile-crud-islemleri","og_site_name":"Okan Karada\u011f","article_published_time":"2021-10-10T21:32:42+00:00","article_modified_time":"2021-10-10T21:42:35+00:00","og_image":[{"width":840,"height":441,"url":"https:\/\/okankaradag.com\/wp-content\/uploads\/2021\/09\/dotnet-core-react-800.jpg","type":"image\/jpeg"}],"author":"Okan Karada\u011f","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Okan Karada\u011f","Est. reading time":"15 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/okankaradag.com\/en\/asp-net-5\/react-typescript-ve-asp-net-core-5-ile-crud-islemleri#article","isPartOf":{"@id":"https:\/\/okankaradag.com\/en\/asp-net-5\/react-typescript-ve-asp-net-core-5-ile-crud-islemleri"},"author":{"name":"Okan Karada\u011f","@id":"https:\/\/okankaradag.com\/#\/schema\/person\/0196919c5e3b6a496101ded872640d52"},"headline":"React, TypeScript ve Asp.Net Core 5 ile CRUD i\u015flemleri","datePublished":"2021-10-10T21:32:42+00:00","dateModified":"2021-10-10T21:42:35+00:00","mainEntityOfPage":{"@id":"https:\/\/okankaradag.com\/en\/asp-net-5\/react-typescript-ve-asp-net-core-5-ile-crud-islemleri"},"wordCount":1126,"commentCount":0,"publisher":{"@id":"https:\/\/okankaradag.com\/#\/schema\/person\/0196919c5e3b6a496101ded872640d52"},"keywords":["asp.net 5","crud","javascript","reactjs","typescript"],"articleSection":["Asp.Net Core 5.0","C#","EntityFramework Core","React","TypeScript"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/okankaradag.com\/en\/asp-net-5\/react-typescript-ve-asp-net-core-5-ile-crud-islemleri#respond"]}]},{"@type":"WebPage","@id":"https:\/\/okankaradag.com\/en\/asp-net-5\/react-typescript-ve-asp-net-core-5-ile-crud-islemleri","url":"https:\/\/okankaradag.com\/en\/asp-net-5\/react-typescript-ve-asp-net-core-5-ile-crud-islemleri","name":"React, TypeScript ve Asp.Net Core 5 ile CRUD i\u015flemleri - Okan Karada\u011f","isPartOf":{"@id":"https:\/\/okankaradag.com\/#website"},"datePublished":"2021-10-10T21:32:42+00:00","dateModified":"2021-10-10T21:42:35+00:00","description":"Asp.net core 5.0, react ve typescript kullanarak CRUD (Ekleme, Okuma, Silme) i\u015flemlerini yapan \u00f6rnek bir proje yapaca\u011f\u0131z.","breadcrumb":{"@id":"https:\/\/okankaradag.com\/en\/asp-net-5\/react-typescript-ve-asp-net-core-5-ile-crud-islemleri#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/okankaradag.com\/en\/asp-net-5\/react-typescript-ve-asp-net-core-5-ile-crud-islemleri"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/okankaradag.com\/en\/asp-net-5\/react-typescript-ve-asp-net-core-5-ile-crud-islemleri#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/okankaradag.com\/"},{"@type":"ListItem","position":2,"name":"React, TypeScript ve Asp.Net Core 5 ile CRUD i\u015flemleri"}]},{"@type":"WebSite","@id":"https:\/\/okankaradag.com\/#website","url":"https:\/\/okankaradag.com\/","name":"Okan Karada\u011f","description":"Programlama \u00dczerine","publisher":{"@id":"https:\/\/okankaradag.com\/#\/schema\/person\/0196919c5e3b6a496101ded872640d52"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/okankaradag.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":["Person","Organization"],"@id":"https:\/\/okankaradag.com\/#\/schema\/person\/0196919c5e3b6a496101ded872640d52","name":"Okan Karada\u011f","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/okankaradag.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/ca08a5537d7e304914c37189abedd2a1?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/ca08a5537d7e304914c37189abedd2a1?s=96&d=mm&r=g","caption":"Okan Karada\u011f"},"logo":{"@id":"https:\/\/okankaradag.com\/#\/schema\/person\/image\/"},"sameAs":["https:\/\/okankaradag.com"],"url":"https:\/\/okankaradag.com\/en\/author\/admin"}]}},"_links":{"self":[{"href":"https:\/\/okankaradag.com\/en\/wp-json\/wp\/v2\/posts\/469"}],"collection":[{"href":"https:\/\/okankaradag.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/okankaradag.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/okankaradag.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/okankaradag.com\/en\/wp-json\/wp\/v2\/comments?post=469"}],"version-history":[{"count":26,"href":"https:\/\/okankaradag.com\/en\/wp-json\/wp\/v2\/posts\/469\/revisions"}],"predecessor-version":[{"id":519,"href":"https:\/\/okankaradag.com\/en\/wp-json\/wp\/v2\/posts\/469\/revisions\/519"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/okankaradag.com\/en\/wp-json\/wp\/v2\/media\/465"}],"wp:attachment":[{"href":"https:\/\/okankaradag.com\/en\/wp-json\/wp\/v2\/media?parent=469"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/okankaradag.com\/en\/wp-json\/wp\/v2\/categories?post=469"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/okankaradag.com\/en\/wp-json\/wp\/v2\/tags?post=469"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}