.NET Blazor | Blazor Server Food Recipe Web App. using SQLite database and Syncfusion components.

Hello friends of netcode Hub channel thank you so  much for taking time to watch videos and lessons   from this channel you know this channel is  one of the channels that facilitate on that   maths project.net lessons which on prices  of Blazer and also married applications   so we keep doing the videos and  lessons whilst you're so keep watching   so I really appreciate your effort and the  time that you spend watching videos from this   so I would encourage you to do more watch more  as this channel produces more lessons as well   we are on the air of mini projects we have done  one minute project already and when you check the   playlist We have.net Marie mini projects  we have.net Blazer mini project as well   yeah so with these two Blazer projects and on  the dot net marry project what we are doing   here is as soon as you are done creating an  application for Blazer we do the same thing   for a mobile app it could be Android it could  be iOS it could be a desktop app that you can   install so we are doing the two-way mobile NSO web  application now when I'm done with this project   I'm gonna create a new mobile app version for this  application that you're going to talk about today   so when you check the playlist we have them  over there any kind of watch over there as well   and also let me say this I  thank one guy as it must say   um he supported me yeah very well thank you so  much for doing that and if you want to support   net good app Channel as well to check the link and  buy me a coffee you can do that if you want to and   um I'll appreciate that as a kind yes sir of  yours okay so let's see now let's go through   what we're gonna do today I believe you've read  the title of this mini project already but let   me still go through again it is you are here to  go through how to create a recipes application   first of all recipes what I understand here it  is a size application whereby steps for food a   step for preparation of a dish or a food is kept  and you can just go in there and read the steps   you see some images and you can just pass on the  images and also you do the same thing by reading   or following the steps so we want to create a  sample application we're going to handle a recipe   that is a name where it originates from and maybe  the steps or the procedures and yeah and I think   something like that okay so what about this video  what are the skills that you're going to get at   the end of watching this video when you're gonna  know how to use sync Fusion component especially   the complex one that is a data grid because that  is what you're going to use to add to modify or to   manage our recipes our procedures and our Origins  so that's what we're going to do so here we're   going to create a recipe you're going to have a  text box or a section whereby you can enter the   recipe name the description and also the steps  we can have picture of pictures if you want to   okay and we can also rank them as well and we're  going to add the time that they need or it needs   to prepare or to follow that recipe to come out  with what you see and also maybe we could have   added some pictures with each step if you want to  do that when you have the basic you can do that   as well and at the end of the day we are going  to store them somewhere and specifically we are   talking about sqlite and there is a mini projects  so I would like to include the sqlite and that is   the database management software that actually  adds a file to your application so you don't   need to use an external SQL Server to handle your  database you put everything in the application so   as soon as you publish it we have the complete one  a database also inclusive so that's what you're   going to do okay so simple recipes application F4  um web it's a web app and when I'm done with this   you can also create a mobile app or a desktop  app version for this so do check the playlist   I'll leave the link in the description so you  can also grab it over there aside from this   I will leave documentation to this infusion at the  time grade another component that you're going to   be using I'll leave that documentation at the  description so you can click on it to just read   more and not other features that you're going to  implement here so we're going to implement about   five percent out of the feature that we have  for this specific component so you can just   go in there and check the rest yourself okay and  actually they're going to help you a lot in using   the component as well all right also when I'm done  I'm going to leave the source code description so   check from the GitHub the description contains  a GitHub link you click on it you can just go   in there and then clone it from the GitHub and  you can also modify so if you want to see that   say the description or the mini projects that  I have been doing I always leave the link under   the description so check over there and you can  see the GitHub link you can just go in there and   clone this um pray that we have here and you can  also as maybe you can just go through or review   as well okay so it's okay let's let's start so  let's go through this first of all when you open   the first page that's the front page here you can  see you have this the buy recipes and now here   because we have home we have the following recipes  over here and aside from that we can click on any   of these now if I click on this recipe because  I have the image displayed on top over here I   add a description for this recipe the country of  origin the white originates from the currents Rank   and the number one and these are the procedures or  the steps that involves in doing that you see from   here supposed to be step one step two three four  five right so you can also do that so these are   the various stuff because there's a many projects  very simple now this is for the recipe and I want   to go to this manage recipes here you're gonna  use the data grid and you're gonna select the   recipe origin so with that region you see from  here they are all together now so if I choose an   origin here if you see if I want Ireland I'm going  to have a look at only a recipe from Ireland okay   and these are the three recipes over here now  if I click on juice Scotland I have only one if   I choose any other Arizona England is two Arizona  maybe nil no record for Arizona Italy and I could   check the how the flow it is it doesn't keep long  there's no refresh like a reload a page reload it   is just happening between these data and grid okay  you can also search so you can also search for   the whole recipe as well so maybe if I want to  get this maybe I'm Irish I pass in the Irish   and as soon as I hit on enter I'm gonna have the  one that comes in with this Irish you see how I   have this over here okay now aside from that I  can also go to manage procedures so as I have   this at the recipe by the origin I can also go  to the manage procedures and you see these are   the procedures here so if I want to add I click on  this ad I have um ad procedure okay so this is a   step I can pass in the title right here I'm going  to choose the origin here so this origin is the   okay so here's supposed to be selected recipe  nowadays the recipe supposed to be that is what   you see here the recipe time that you want to  write for you can set the duration over here   and you can just go in there for time that you  want to it's going to last for aside from that   you can just choose a procedure number and you  can just pass in description and I can click on   ADD procedure to get it added okay aside from  that you can also edit this so if fast you can   select this and I click on edit and I could  see I can now go in there and edit as well   and I kind of showed the later as well so if I  want to do this I can select this and I click   on I usually I want to do this if I click on  cancel okay so cancel means it is deleted so   we just look into that when we start um going  through also you see now it is in here already   now if I want to delete this I can just click  on if you want to do this so since I click on   yes you see it is off as soon as I refresh this  install it is off okay and now the next thing that   we're going to talk about here that's the manage  Origins so you could have added country images   over here now that's a country name okay these  are the category IDs and now this can also add   the same thing you can add continue with the image  and you can perform edit and also delete as well   as you can see that it means it seems we are  performing the crowd operations using the data   grid and at the end of the day we are going to  display them in view like this so if if it is   Administration site maybe a client can see this  and that interesting can now add or manage the   recipes and the procedures and origin as well  so you see this is just a simple mini project   but it actually has some features in it that  can help you to know how to use this component   of simulation and other ways of um using or  using other components and also something well   in this Blazer web application so let's start to  start by creating a new web that's going to be   a Blazer server okay so you start by creating a  new blazer server project so let's get into that   so I have a business to do over here now this  is the one that we just gone through so I'm   going to close all of this and I'm going  to create a new uh project I'm going to   name this as demo okay so this is a demo Blazer  recipe or Blazer server recipe so let's start so new projects let me stop this first foreign application now the name is going to  be demo maybe Blazer server recipe   okay so the mobile is a recipe and that's going  to be the mini project folder I'm gonna click   on nest and at the framework that we are  using here it is the 7.0 so we choose that foreign creating this project the next  thing that we can do here is we   have to install our packages and that  is what we're going to be using so as   I said earlier on we are going to  be using the same fishing drop down   um great pop-ups navigations input and calendar  aside from that you also have to install design   that's for EF Core Design we want to install the  dependency Jackson that's for auto mapper and as   you want to install the database management  system and that is there sqlite so we have   to install these packages and I have them here so  these are the packages that we have to install so   pause the video and I'll try to install them one  after the other but for me I'm going to copy all   this you know that I've installed this on the  another projector already so I have it so I'm   going to copy this I'll go to solicitness  Power then I'll just offload this project   so unload this project then why have the project  settings I'm going to put it over here okay so I'll type in here as item group then I'll paste all of this so all right so I can see we have  this project references and   they are added so let's close  this this has to be close okay   so as I said I can now save this then I'll go back  to its nest power and reload with the dependencies   start from that right click on dependencies  and now you can see managing you get packages Okay so here I can see that you're gonna have all  the packages that we just copied if you see they   are all installed over here so you can also do  the same just install them one after the other   and there are even updates so let's see  you can update this the one that we can   we can update them over here okay so let me  let's let's do that to have an updated one so as they are done let's build a project  and see if everything is working as expected foreign plate that we have so let's run this okay so you see that you have it and it is  actually working as expected these are the default   um tabs which were created and added  so we've done nothing here okay and you   can see we have a localhost and our  Port here at a seven thousand maybe   um yours will be different but that is a port over  here okay so when you go to the source code here   I'm not going to go through the solution Explorer  here because I want this I presume you know   so I assume you know the basics of this so I'm  not going to go through this let's start let's   go straight to the mini project today now once you  are done with the next step we can do here is we   have to add the name spaces that you're going  to be using okay so I'm going to just copy it   from here and now what you're going to do here is  we go to our import.reza file and I'll add them   here so these are the same Fusion name spaces or  that's the uses uh so you see that we have to add   them so we are using Blazer drop down Great Pop-Up  navigations input notifications and calendar and I   want to show you system.io for an image selection  okay so we're gonna use this let's save that let's also go to the solution Explorer that's  going to be the program.cs file and then let's   configure the use of this Blazer server name  space so let's have the service over here   and it is better services that add same Fusion  Blazer so you have to also add this normally you   have to also get the license so um can we are not  using lenses for now so as soon as we decide to   use any of the components you're going to have  a pop-up that we should register so maybe when   you get to that you can just go in the register  and grab the lenses key so I have a video on that   how to claim Freelancers or Community lenses  and I'll leave the description so you can also   check on it if you're not having the community  license you can just click on it too go in there   and register okay so now it seems we are done  with that configuration here the next thing   we're going to do here is we're going to install  our you know when we check this we installed our   SQL Server that's the sqlite yeah with the  anti-frame recorder design so these are the   database uh tools that we're going to be using so  you can see from the properties you can see we've   installed a design that you have called automatic  so the SQL lights okay so that's a database that   we are going to be using so we'll have to go  in there and create our connection string you   can do that in the app settings.json so here  let's specify our connection string on top here so maybe I would like to use um paste this  and that's the connection strings so we have a   default connection that's a connection name and  now the data source or the database file that   you're going to create as an sqlite DB the name is  recipe DB so I'm going to name it as demo recipe   DB all right so now we are done with this the  next thing that we can do after creating this   connection string is we have to go in there  and create our model so what's the model that   you're going to create we're going to create a  model whereby we can assign or we can use that   model to create the database okay so we have  to create the first folder and we're going to   name that folder as models they're going to  create another folders entities inside the   models folder and then we go ahead and add our  models in there so let's go to solution right   click on the project let's add a folder here and  this is moodles so you have to stop debugging so models then inside this models let's create  another one which will animate as entities now inside this entity we are going to create   a property or that is a model here so first of  all let's create a model called category so let's   go to right click on this and and now let's click  on ADD class and here you're gonna say category you could have or we can also name it as  origin or country any name that you want   okay a woman leave this as category  so in here I can decide to add this and let me add one and that is the integer here so this is going to be the ID so you want to  have the category name or that's going to be   the country name you want to have the country  image okay and now here you can see that we   are creating a relationship here that's a list  of this recipe so we haven't created this yet   so let's copy this and now let's go to the save  entity now right click and unless add a new class   and rename this as recipe and now in this recipe we are going to  add few things a few properties here so these are the properties that you want you  want to add the ID recipe name description you   want to have a rank and we are specify the time  only so you want to get a time that we're going   to use you want to have maybe a general image  you want to have update time that's the date   the recipe created and here you can see that  you're also creating another relationship here   that is a list of steps actually we have this  relationship over here category and I can see   we have the category and I perform or specify  the category ID so here we've come compared   with the category it is one too many okay so here  it means one recipe it's gonna have oh that's the   one category here it's going to have a list of  recipe okay so one origin so if you choose maybe   um Scotland or Ireland Ireland is a category and  it's going to have a list of recipes because you   have a lot of recipes in that country okay so  that it is one to many so one category many list   of recipes and that is why we specify this over  here as one two many okay and now when we check   here we also specify another steps as procedure  and that is a process so you see we are having   the list so it means one recipe you want to have a  list of procedures so one too many one too many so   you see we are having this relationship in inside  the models you want to combine the models together   you know we want to perform database redundancy by  just normalizing the database you want to exclude   using component or using properties in two  or three models no so we like to create   simple tables then we link them together okay  and that's why we call database normalization   so let's normalize them grouping them then we  have a relationship that links them together   okay so now let's go in there and create the  next one and that is a step so let's copy this   and let's create it so one recipe here I'm gonna  have a lot of steps so these are the properties   of the attribute I want to talk about the recipe  aside from that where are the steps let's go in   there and create the steps right click on  entities and then a class and you're going   to name it as step so in this class what are the  things that you're going to be using what I think   that we need in steps now we just made the ID we  also need maybe a step number procedure number   and we need a title description time needed for  this particular step and now you see we have the   recipe ID so here it is one too many okay so one  step it's related to one recipe so that's why you   see we have to run one over here and we specify  this recipe ID so you see we have to proceed the   number title description timely dead and the two  um these guys and that is a recipe and we have the   recipe ID so this is actually the relationship  so this I'm going to provide the value for this   you're going to provide the value for only the ID  because you want to make refer the recipe here as   a foreign key in this okay so we have our models  created but what we are done with this you know we   have to create our connection application at that  connection class and I normally call it as appdb   contest application or database can I send or  contest file so let's go to this data folder and   I'm going to add a class and this class I'm going  to name this as appdb contest so app DB contest now this app DB contest class what are the things  that we can uh we would like to have in this   we're going to specify a database here  okay so let's see what you're going to   do first of all we have to create a  Constructor and this Constructor the   application has to inherit from  a DB contest class so DB contest and it's coming from the EF club we installed  in that we create a Constructor you're passing   the same class right here and it is inheriting  from the base option that is the DB contest here   in here we have to specify our databases and  our tables as well so if we perform database   migration we want to use this models here to  create table separate table so use this model   create a table name as recipes use this model  create a table as this and that's you now the   table columns is it's we attend the EF call to  use the property that we specified over here   so when you go to step you're going to have  table corner of ID procedure number title and   so forth to the recipe ID okay and so that's  what we are doing here we can now save this   after doing this the next thing that we're going  to do here is we're going to perform database   is it migration we have to register it fresh so  let's go to um so listen as power we go to the   program.cs file and in here that is where  we are going to register our application   so inside this program.cs file we are going to add  this that's a builder Services dot add edit must   come before the build so put it on top here and we  are saying that builder.services.idbit contest you   specify database can I send they pass in this  options and we are using an sqlite we get this   conversation stream from this configuration file  that's the app setting.json and that is it over   here this this one we get this connection name  and now we are saying that in case there's any   issue at all through this exception okay now  we have done so you can go ahead and perform   a database migration but first of all let's  build this project and see if everything is   working as expected then we can go ahead  and perform database migration foreign Ty framework core to create database table to  create a tablet itself and create the tables   and also create columns inside the table for  us without manually doing it so in some way to   create a table yourself Lantern yeah maybe um SQL  Server management studio and try to create table   yourself create the columns and all these tabs  you decide to skip that by using this database   migration okay the powerful package that we  can actually use now to do that go to tools   and I go to nuget package manager and a package  manager console so here we are going to install   the create I'm going to perform the database  migration remember that I will install one   package known as antifremacore.design and that is  the reason why uh the reinstall that purposely for   this so let's clear this and Dot net so if you  want to see testif.net is installed if not then   you have to install the EF core the design so as  you can see it is installed over here and so.net   EF migrations and add some I know my name  this as first so you have core migrations   add first and this first is the name here  it is changeable Dynamics so you can change   it to any name that you want let's specify  the output open a folder called Data create   another folder called as migrations and  do your stuff in it but you're going to   have an error here because it is say that no  project selected so let's see LS and I can   see we have this so let's copy this project  name and now let's change the directory to   that project so CD and unless paste it now if  I type in here let's see we have we are inside   the projects now we can go ahead and perform  a migration like this so it's going to build   this and now let's keep an eye here you can see  that it's going to create migration inside this   data folder so let's see now it is building this  and it's going to create a folder here for that all right so you see that it just popped up and  migration so if I click on this you see we have   the database I'm connecting class created over  here now once you're done with this we have to   update the migration of the database so that  the model that have been identified over here   um can be created so you can see we are creating  the tab base table name of categories we are   adding the following columns we're creating the  name as recipe that are the following columns   creating a procedure at the following columns  and I will see this at the constraints okay so   you see we have the primary key and we have  foreign key okay and you see each table has   the same primary key and foreign key because we  created a relationship between the tables and   that is this one so you can see and now we can  also drop the table we can drop this procedures   table recipe and also category stable by  using the down okay or the migration job   table and we can do that all right so um let's  see let's update so I'm going to say dot net   DF core database then update passing the name  that you use for the migration name as first   and I'll click on enter now I'm just going to  run this CF Core and it's going to run this   um migration file and get us the migration  or get the database and it's related   component that we need for  this so let's wait for that   yeah so you see now it is done you can see that  we have a database created and it's over here in   order to view this database you can't open it  here we need another software that is going to   be the DB browser so let's try to launch the  DB browser so DB browser and it is over here so let's see the DB browser let me just move it  from Face Screen to okay so you can see this is   a DB browser if you're not having this go to the  internet and I'm typing DB browser for sqlite you   can download this now if I click on open let's  navigate to the local index and the folder core   project and I have my 10 mini project and because  it is a project folder open it and let's open this   because we have a demo recipe DB so these are  database click on because you want to check here   the extension is over here that's sqlite and  now this will click on open and you have the   table database open so you can see we have  these are the table that have been created   categories procedures and a recipe so if I click  on any and now click on browse data you can see   that they are now empty database and we see they  are empty so many we have our table and database   tables created successfully okay so now we have  this you can just go ahead and now save everything   here and then close all tabs the lesson that  we're gonna do here is we have to create our   services now what are these Services these are  the files or the method or the properties that   we need to create so we can have connection to a  database make a query and also inside data and do   all stuffs as well so here a service comprise  of an interface and implementation class so   we're going to create an interface which contains  the method names now the implementation class is   also going to contain the method definition  so what the method is going to do as soon   as you call it so we're going to call the method  through the interface and the interface is going   to call it implementation from the class that  you're going to create after creating these two   classes we have to perform dependency injection  we have to enjoy this class together you have to   create a link between the definition class that's  implementation class and also eight interface so   as soon as you call the interface it knows we're  supposed to go there for the implementation okay   so let's create a folder for that I'm going to  do that inside the data folder and I will let's   create a folder called um services so maybe we  can add Services here now aside from that let's   create an interface over here and the interface  is going to be I uh let's say it's an i recipe   service so let's create add we can create choose  class but I'm going to use that class I'm going   to use this interface and I'm going to say that  this is I stand for interface so I recipe service and this recipe service we are going to  also create a class that's going to be   the implementation class for it so the same  place let's add a class and now instead of   say hi recipe there is no more an interface  so we say recipe service so you can see we   have our two classes or two models created okay  so let's save them and now in here we are going   to create a method inside the interface I'm going  to create a method definition inside our services   at the end of the day we're going to join these  two models together inside the program.cs file so before we forget forget let's go to program.cs  file now let's create a dependency injection   because I normally forget this so I'm going  to place this you can see we are using both   other services that are scope and I'm using this I  recipe service and I will call this recipe service   so we are creating relationship between this  implementation class and also 8 Master interface   all right now let's go to the service here and  this has to inherit from the recipe interface okay   we can also create a Constructor for this and when  you go to this recipe service what are the methods   that you're going to use here in our project so  let's first have our first method in here foreign for our category or our origin okay  so recipe category recipe origin we   gonna use this so you can see we want to  retain an integer we're going to return   um this model category we want to  install this list you want to install   um I don't want to get the list here you want to  also get the integer here these are the names so   we're going to perform update and add to one  interface we're going to get category by ID   to one interface you want to get less of category  model through this interface and also we want to   delete this category by using through what this  interface but if you take care we see that you   have this object here this models here now these  models are not yet created so why did I use this   model you know we have our entities over here  want to check our models folder you can see we   have a folder called entities now this entities  are what we use in database so so we don't want   to touch any of this model in a normal sense we  have to add this required attribute on top maybe   you can specify the attribute the properties  over here we're using this different attribute   okay now we don't understand it because this  is basically for database so you rather want to   create another model and that's going to handle  that so anytime that you want to do something   inside database the model that you're going to  create is going to handle that model as a dto   you want to handle that model into this original  model here wherever this origin model get your   database and I get things from the database so  this model that you create as an entities here   can just go into database and also come out on  the database now when they come out we create   our models over here and these are the details  which are going to handle the data from these   models and that's a category recipe and our steps  and on display to the user so the contributor that   I'm going to create over here is going to be  like a middleman I'm going to handle between   the user and also the database or the this entity  models okay so once before we continue with that   interface here I want us to create this models  over here so we can understand what we about to   do so in here you can just copy this category  model from this and now let's go to the models   now the entities we go to this model here and I  right click and now let's add a class now in this   class you're going to name it as category model  and now inside this category model what are three   things that we are going to get we want you're  going to be using the same models as created   um for our entities but this time we're going to  perform some attribute on top now what are these   attributes these are the required attributes so it  means that before user tries to send you want to   have this required this this data or this property  must have data okay so let's also make this as now so this data or this property must have  data before we you can send the data to   the original one that's the entity um model  or entity category model all right now once   you're done with this let's also do the same  for the other one so recipe we can just go and   then also create a class for this recipe so  let's do that from here models then let's add   a new class and that is going to be a recipe  model now this recipe model we want to also   um have the same thing but this time around you  want to have this attribute on top and you can   see we want to modify the names as well so this  required the name that you want to use instead   of this recipe name want to space it as recipe  name and now you want to specifically specify   the data type as time you want to display this  as image inside this general image okay and   that is what we are also doing over here you see  we're adding the record attribute on any diary   you want okay now let's also do the same thing  the last one that's going to be the step models   now this step model we're gonna also create  over here so let's add also a class and now   this is going to be a step model so with this  step model what are the properties that you   also want to use here so we can also decide  to use maybe ID the same thing and also add   properties here okay so we can also add this  required properties let's do that so this required and we can just go ahead copy  this and now we can put it   on top of the properties that we have stated okay so they're supposed to be in here all right and now you can also specify since  this is time only we can also go in there to   this recipe model and now you can just grab  this property over here and now we come to   the step model and we can just specify it  on top over here okay and also the display   procedure number we can also do that as  well so let's see we can just copy this   and I will go to this step model and now  on here top here we can just pass in and   I will say this says procedure number  or step number so procedure number okay now you can now go ahead and now save  this and also this is time needed so let's   also make a copy of this and you can  also add this so since you have this   record already let's move this required  and now let's specify this at time needed or we can make it as duration two all right so we have our models created so these  are view models that I'm going to be using for I'm   getting data as I did you that's a data transfer  object from the database entities and and between   our clients or the users as well okay so we can  now go ahead and create our interfaces so we have   the category one now let's also get our recipe  one so this for the recipe we go back to this   interface and now here control period I think it's  going to add the models on top as a name space   header then let's add this recipe so we are making  a copy of this and I'm changing the models in here   okay so that's what we are doing now the  next thing that we are doing here it's okay   it is the same thing now let's also do the  last one and it's going to be the procedure   so the steps so let's grab this and I'm here  to paste it here so these are the steps we   can add we can also get by ID gets there by  recipe ID get all steps and now delete step   async all right so these are the interfaces  that you want now when we go to the service   the implementation class control period then we  are going to implement all the interfaces here   so we see we have implemented all the interfaces  but you know with this we're going to do them one   after the other so I'm going to just start from  the first one and that is going to be the category   okay so category implementation class so that's  what we're going to use but first of all we have   to create a Constructor here and inject our app  DB contest class that we created so let's do that   so you can do that but you can type in ctor to  get the class created or the Constructor created   or you can also um type it in yourself so let's  see from here you can just type in either [Music]   you can just right click here so let's say control  period And I can just go to generate Constructor   it's over over here or you can type in CT or and  can also generate Constructor from this angle   so for me you know I have the construction  already so I have it over here now we generate   this Constructor and I can see we are injecting  this appdb contest and we also injecting imapa   interface and this is from the auto automapa okay  so you want to map our models you know we have to   separate um group of models here we have our  entities and we have our models if I talk about   models I'm talking about this contribute model  recipe model and Laser step model now as you can   see this also the entity models so these are  database model and these are the user models   now from a database model we have the same thing  as the user model so we want to convert you want   to hand data from database model into user  model and vice versa okay do the same thing   to the contribute model to the entities model  so in such case we have to create an instance   of this other time when you have data or content  inside this entity model and you want to convert   it into this a user model unless you create an  object out of the user model and then populate   it that is why automobile is here to solve that  problem so instead of conversion we are going to   use the auto mapper to convert all the models to  one another or yeah so to convey this empty models   or the database models into user models and I  also convert user models into the database models   all right so that's why we inject it and remember  that we have installed already and that's the Auto   map Paddle dependency injection if you remember  we went to the packages and I've installed that   over there as well maybe if you don't know  if you're for forgotten let's see so when   you go to Project settings because it's over here  that is what I'm talking about automapa this one   yeah okay so now we have this initialize the  next thing to do is let's first create a category   service now in the category service we want to  first talk about the first one and that is an add   or update so I'm gonna paste this here and it is  for category service the first one is other update   we first check if the model is now then I want to  return the status code of bad request and that's   going to be I believe it's 401 or so yeah so you  want to return this bad request and now here in   case it is not now then you can see we want to  convert because here we are going to add or update   and here the database are going to accept category  not category model so we have to convert from this   category model into this category okay that's  a database object and we're going to do it over   here so we're going to map the data from this user  model into this database model and I will check   if the ID is not equal to zero then it means you  want to update okay then when we first check if   it is found if yes if it is not written not found  but in case it is there then you want to check if   the category name and the image it is not equal  it means data has been added or modified if not   then you want to return this status quo that's  not implemented and in case it is they are not   the same then we want to update it so we see we  are updating it over here and now we save changes   and we return the the status code of okay so okay  here it is 200 it means the data has been updated   and in case it is new one that is when the id80  we want to now check if the name already exists   then return the user that it has been added  so you're going to you're going to return a   status code of not acceptable it means couldn't  save it and as I've in case it is um now then we   want to add it and I'm going to save it and I'll  return the status code of created and that is 201   so as soon as we see two zero one it makes a  new data has been added as soon as it you see   um 200 it means data have been updated  okay and here we have to use the EF core   so let's use that all right so aside from this  let's go to the next one and that is a delete and now for the delete let's  have a look at this so I can just   minimize this and the next step let me give  you a VAR space The Next Step here that is   for delete you can see we are returning an  integer as well and now you see we want to   check you want to get oh you want to check  if the ID is find the database if it is not   found return not found right in case it is  found then you can see from here that we are   uh removing it from the database right then  receive changes and return the status code   of ok that is access 200. all right so that's  for the the delete because it is very simple   now the next one is we want to get a list  of categories so this list to get a list   we can use that so you see from here that  we are getting the whole list if it is now   I want to attend now you don't return anything you  want to return now here and if it is not then we   are mapping it because you know the database come  in with category and that's a database model we   want to transfer this into your convert this  into user model that's a category model so we   have to use the automobile to convert it here you  see we are selecting from this mapper and we map   this category model so the results that is coming  in here we want to map a separate that's how we   use it select so select individual object from  this list okay and now populate them over here   now return as a country oh no country category  model list and return recommendation to list and   I return all right so that's the get category  the next one I'm going to talk about here it   is get category by ID so with get configured by ID  this what you want to do we want to just grab this so you can see from here that it is returning  just a single category and now in here   so we check from database and  now from here that's the next one   so get category by Ida sync we do the same thing  and I can see we are mapping it to this category   we map this model that's the user model  from this database model and return okay   so that's going to be for our category  service now we can just minimize this   and now let's go in there and Implement our  data service as well and that's going to be   the recipe service so you know I did the same  thing over here so this I'm gonna do let's see   if I can just grab this from this category service  and that's gonna be the recipe service from this   and we're doing the same things as you can  see just that from here instead of using the   recipe or using the category model we are using  the recipe over here so return this bad request   when it is now we map it and we check if your  ID is greater than zero it means you want to   update so we do this to update it and now the  lesson receive and return okay that is 200 and   in case it is new one with 10 200 201 that is  created so add it and now save okay and that is   this one the best thing to do here is we're also  going for the same thing as delete so let's delete   recipe so to delay that we are going to also use  the same thing here um we check from database if   it is not written if you have it remove it and  I'll save and return 200 as the status code okay   now let's get a list of recipes from the database  that the user has added so to get the list we also   using this list model and I return the list if  it is now if not select them from the model and   convert it to user model and I return it as well  okay now let's see get a recipe by ID async so you   want to get a specific recipe as soon as you  pass in the ID of that and as you can see the   acceptance ID and now it is returning as a recipe  model so you first get from database in case it is   not to return now in case it is found we map it  from this recipe database base model and to this   user model okay then return all right now the last  one is we want to get recipe by category ID so you   pass in this category and now you want to grab all  the data related to that so passing this country   ID and get all recipe related to that country okay  that's what it means and that is what we are doing   so you can see we are returning a list of this  recipe model we're passing this category ID as a   um this country ID and from here you see  we are selecting where this category ID   is equal to this category ID coming in  here and then here we are including this   category table okay and I return to list and  here we map it and I return uh return it so   um automapa has made it very simple for us  if not we have to create a separate model to   convert them into this user model okay now let's  see so now we are done with this series for this   um recipe let's minimize them and let's work on  the last one that's going to be the step model   on the step service so with a step service we are  also doing exactly same thing as we've done for   the two previous models or services so here too  we are checking you want to add or update step   async we do the same thing from here as you can  see so reading it yourself you map it we check   it over here then if it is update if it is less  than save it and retain the various status code   as you can see from here okay and 200. all right  now if you want to also if you want to know the   status code what it means and what the value for  each code maybe I'll leave a link to a page where   you can have a look at all this code over here  so you can know where to return which one you   want to return When a process and operation fails  or succeeds okay now this is for the update now   let's go for the delete as you've done earlier so  for the lesson 2 we are going to be using the same   fan the space here it is too big let me make it  small okay so delete we did the same thing check   from database and I remove it and now save next  thing is you want to get the whole list of this   so getting or grabbing whole list you want to use  that so I'll get the whole list here return now if   it is not found if not then map and return to the  list the next thing is we want to get step by ID and now in here we get started by ID passing  the ID step and I get from the procedures table   and yeah check if it is now written now if it is  not then mapped to this step model and I return   and now we have the last method that is known  as guest by recipe ID so you want to pass in   the recipe ID and then get all the steps so if  it is the first method maybe look at this this   one that we have created what are the steps we use  that we grab the steps from the database using the   recipe ID okay so you can display all the steps so  these are the services that we need to also create   so that minimize them so we are done with our  interface and our service so as you can see   from here we have three groups of services that  have been created as steps recipe and so we have   a category once you have an controller initialized  and our rbb contest and the mapper interface also   initialized and injected here let's save this  now once you're done you can see from here that   we created this mapper interface but we did  not register we did not create any profile   so let's go in there and register this map first  before you create our profile we can do that in   the program.cs file so let's go to that place  and we are going to map it over there foreign .cs file and now before this Builder let's put  beneath here and let's and put it on top here   first then let's map it so we're going to add  automapa then type off program then dot assembly   so that's what you are doing aside from that let's  go in there and create a folder and I name it as   profile and now this folder that is what we are  going to create our mapper profile in okay so here   let's go to the data right click on the  folder and I'll add a new folder known as   profiles now these profiles we are going to  add a class and on this class is going to be   your auto mapper profile so right click on this  profiles and now add a new class the name is   automapa profile and now with this automapa  profile we want to now perform this simple things here so first of all it has to inherit from  profile and this profile it is from this automapa   so it is from this automapa here now  inside this we are going to map so   we create a contractor here as soon as this  page is called or this class is called start   using this now you can see we are mapping it  from this category model so as you can see   from here it is from custom model and this is  not from cat so here I want to change it from   from database to user okay so to user  and now here it is from user to database so if the database want to get some to the user  it has to map it from this database object into   user object and if it is from user to database  it has to mark from user object into database   object okay so it can be used in database and  here so it can be used in the user model as   well so that is the thing that we need to do  here for our profile to be created all right   so that is it really I'm done with this one over  here and the next thing that we're gonna do here   is you're going to create our own Razer component  and I'll try to add this now you know um creating   a design sucks it takes time to do that so once  I have this you know I'm going to just copy the   source code or the code right here from the Blazer  and I'll paste it but I want to check the Ripple   um you can just get everything over here and we  will also go through okay you don't have time   to Tamp it one after the other if not you're not  going to finish soon you want us to complete this   as soon as possible so let's see that first  now as we are done with this our database is   actually working everything is also implemented  and it is working perfectly although we haven't   run it but it is working I can assure you  okay so let's close everything from here so now let's go to the shared projects another  shared folder all the components that's a Razer   component that we're going to be using here are  going to be used more than once it's going to be   used for either add and also update to update  as well okay so it's going to be a purpose   component for addition and also for updating the  content so let's go to the set like I said this is   the default one that we have for right click on  this and I'm going to add a new Razer component   so the name is going to be the category component  so all this country component we want to   create this so we can enable us to add  maybe the user category data comprising of   the image also the original the name okay  so maybe you can specify the route here   since you're going to be using it for both  purpose for update and delete for updates now   for updates and also for adding the new content  so the first route here is not accepting any   parameter so that's for ADD and a second one here  it is to update where it is accepting an ID as   integer we also have to inject our navigation  manager and also our service interface that we   created and that is what we are injection over  here also the next thing to do here is you're   going to use an SF dialog now this SF dialog is  going to allow us to have a pop-up so we can add   category so redo that there's a dialogue that we  are adding so it is a sync recent dollar as soon   as you see SF it may sync fusion and that is also  you see we are specified the dialog template and   that is the message component that we also  create a company known as message component   and that is all going to be used display message  so in there we are using a message component as   um as a component from same Fusion okay so that's  what we're going to use display message to the   user as soon as uh operation is performed we used  an edit format scan series and edit from that we   are using and we have just data like this annotate  that's the data notation by data that's right and   because you have the vibration summary as well  we're using the text box we added validation   message right here and we are specifying the  band value that's the most important thing   here there's a country name and I need a reason  an SF uploader so we are uploading the data and   we want to upload images so just one so you can  see from here the alarm multiple it is just one   first and these are the specific extension that  we want to get okay and actually we have this   button here so we check if the height is greater  than two zero it means you want to update if not   then display this if not then display this add  procedure so update and add it's only displayed   respective to the content or the value for this  ID we have this cancel button so this is just   a UI that we just we have created okay so down  here let's go in there and now add the code so let's say so I'm going to just grab this from  here and let's paste it and go through it   so yeah want to check that's what we are doing  the first thing is we create a parameter for the   ID and that's going to be used on top here so  that is the top here let me minimize it because   see we have the ID here and that is what we are  creating to handle that's a parameter that's going   to come in also we have visibility message and  navigation these are all uh string and the first   one is Boolean expression so it's invisible if yes  then make it visible and now this referring to the   SF message that we created there is a message  component so when you're done with this you're   going to create that components you're going to  see you're going to understand that so you have   to provide values for this right reverse values  for message and Navigator too so as soon as it   is it is this message component get its content  here it can just perform the tanks that I need to   do okay aside from dark city we are creating this  category model and now this category model here   we create an object out of this we create a  title over here now this is a method that I   recall when the button here is clicked and you  know it is calling this method create category   so that method I recall record the service that  you have created now we are going to perform a   switch to the results if it is 200 you know it  is updated if it's 201 you know created if it is   400 you know offer the Quant if it is 40 for  Nami it is not found so meaning this if it's   406 it's not implemented and it is already added  and if it's 501 that is node could change and you   know all these are coming from the service so  you see from the service we added the various   and that is it so if you don't know what each code  means here I'm going to put in the description so   check in the description I'm going to put a link  over there click on it and you're going to have a   look at it with the various HTTP status codes that  we have and how to implement them as well okay now   aside from that we are clicking on this when the  button is canceled so you can see from here that   you have a cancel button from this dialect box and  that's the cancel button so when this click what   do you want to do you want to just return back  to the home of this categories and now that's   the when the file change you know from here that  we are using this SF uploader and the value chain   is going to call this event and now this event  you want to convert the image into base64 string   and now here this method is going to convert the  image as you can see from here we have um we're   going to look through the files that's coming  in and we're going to set the format over here   so we are checking if it is PNG then we set the  format as well if it is jpg we sell them if it   is a JPEG we also set it aside from that we create  a file right here and I will request image faster   so we format it using the size that I really  want over here and you will do that aside from   that we're going to convert it into the basic  default string and restore the the string here   so anytime that you click on the file upload to  upload file this method is going to execute it's   going to convert it and assign the string into  the value or there's a values for this object and   that's going to be the category um image object  okay all right so now we have this but I know that   we just created or we created a string value  called as title and that's going to handle by   this page title so when the page initials for the  first time you want to set this as what add recipe   origin okay and when parameter changes it means  I'm going to update it because if the ID 8 is   greater than zero then we want to say that update  but in case it is not then add recipe origin all   right so this is going to switch between the  update and also add recipe and now you can see   from here when the parameter changes you want to  get category by ID you're passing the ID and I can   see the same object that we have created over here  so it is going to handle that and as soon as we   have this band value you know this band value is  a two-way so it's a two-way you're going to bind   from the database and also bind to database as  well so we have that and we display it over here   so we can actually click on the button to do that  all right aside from that we have this update and   then this um update and add which is going to be  switched based on the value of the the value for   this ID all right so that's what we are doing over  here very simple one as well okay so um let's save   that and now this is going to work so let's go to  the next one we have to also create another one   and um that's going to be the the message  component okay so we're going to create a   component eraser component and we're going  to name this as message component so let's   go to the same set folder add a new eraser  component another set component as a message   component now this message component we want  to just display a message so we are using an SF   message since we see message and now that's  what we are doing we navigate here we enjoy   this navigation manager and as you can  see we are using an SF message and I will   check or reset the severity as what information  and as you can see we are passing the visibility   over here and the message here so it means that  when you call this component you have to pass   invisibility and a message and I can see we  also have the visibility right here we have   the message you can see we have this navigated  or navigate to so we check if parameter of this   change you want to check if visibility is false  okay then do nothing banking disability is set to   true then delay for 2000 milliseconds and that's  the two seconds aside from that said we selected   to force and now set navigation to and here we  are talking if navigation is not equal to empty   equal to now then navigate to the value that is  coming in from this navigate third or navigate you   um value or the variable here navigate you and  I'll reset this is true to false reload okay to   false reload it so that's what you to him we  want to automatically close the navigation as   soon as it appears after two seconds it has to  close so that's why we are using this is going   to based on the statement of bit going to based on  the visibility state if only it is true so if we   actually check our category component here you  could say that here at the end anytime that we   call this we provide the value for this so this  is a message reset visibility through and we said   navigated or navigate to this method so when it  comes here what's the visibility here it is true   it means display okay display this then so aside  from that set the visibility for us then navigate   to this component all right so that's what we are  doing over here and as for that this SF message   it is now soft now okay so aside from this what  we have to create also is we're going to create   a procedure or not let's first work it on our  recipe component first so with the recipe let's   also do the same thing by adding a new component  I'm going to name this as recipe component so let's clear all this and our this recipe  component we also need to specify you know   it's going to add and also is going to  update so we can specify the route here   add an update so we're going to receive  an ID I'm going to add with no ID here we   also have to then inject our navigation  manager and this time around we need our   IGS runtime too so you place them here and  now this our model so in here we are still   going to use the same SF dialog box now this  SF dialog we are still going to inject our so let's play this like this okay so this recipe service control  period and uh let's add the service in here   so what we like here we can just cut one  of these and I will go to the import so   um solution Explorer and let's go to find  them right here okay let's go to the Imports   here and I import it to once so we can use it  all the time so let's put it here let's say   that so when you go to this category we can  remove this or you can even add this there   Imports and I replace this as well okay all right  so it is now so now let's see for this recipe   component now we're injecting this racp service  and so with this recipe component two it is the   same thing that we did for this category component  the same thing over here you can see we are using   let's say up this is a drop down list and yeah  using um SF numeric test box and SF test box as   well so you can see we have an edit form we have  the message component on top over here which need   the same parameters we discussed earlier on now  also um let me check here you see we have the test   box over here and it is accepting there is a model  dot recipe name and there you can see we have the   drop down list so this drop down list we have  to populate the category or the origin and then   display them over here but you know for the drop  down list the user can update and also can add so   when it is adding we check if the model is greater  than zero initially when the user is adding the ID   is zero as soon as the ID changes it means that  it doesn't want to update if there is I want to   update then you want to grab the current I the  current isolated job download value and display   so as you can see from here we want to display it  inside the placeholder so we set the value here   and that is what we are saying so if the ID is  greater than zero it means you want to update if   so then this recipe model dot category dot country  name that's a relationship here it has the data   and we can display it over here but in case it  is the ID is less than zero or less than equal to   zero then it means that you don't want to add then  display this to the user so this is going to be   shown one at a time both ones should at the same  time one at a time based on the update and respect   update and add respectively all right so as you  can see from here we have this numeric test box   and I want to add a number over here so select  rank is optional and that is a rank over here   and you can see that we have description we set  this multi-line as true so you can have it as a   test area we also have this time picker and we  set this time only and this is the time that I   needed so the step is one it means and this is the  format you want to grab only um the age that's the   hour and then the minutes making Capital HTM means  you want to have this 24 format 24 hours format   okay if you make it small it means 12 hour format  you can use you can do that you can set this edit   and assignable mask through and Etc all right  so the next thing is you see we have the same   uploads we want to upload an image the max file  side star 3000 there's more than thousand right   it is one million and it is the main file as um  ten thousand over here and aside from that when   uh event changes it's going to handle that I know  we are converting it to basically four string down   here and that's what we're going to talk about  next we have the following uh buttons over here   update and now add procedure we did the same thing  to the category or the origin so that's the same   thing that we're doing here now let's check uh  let's have a look with the method that it needs to   um code anytime the event is click or the form  is being submitted now in such case down here we   can just paste this here now the first thing  that we do here is as you can see from this   we first initialize it we said this parameter and  I will create an SF grade and this is going to be   the category model so let's first so I believe  this method is not here actually because you're   not using Excel grid here so we can clear this off  and now we can see we specify the visibility the   medicine let's navigate to a tune you know we've  done this in the category model so the same thing   that we are also doing here aside from that you  create a model object from this recipe model and   I can see we have a list of category model as  well because you know we have to populate the   category model so we can use them here for user  to select the recipe type and aside from that we   create a title here and the title is going to  be switched between and add or update okay so   um when the page initializes you want to populate  or call this category and get the category list   set a title to add food recipe and now if this  safe recipe is clicked that is a button over here   you can see we have an edit form and this the  save recipe if this button is clicked that   the submit button is clicked we want to now  check if the category ID it is greater than   zero no it is less than zero it means  we want to check okay you want to say   we want to set this um choose recipe  origin okay meaning that the user hasn't   um choose any category so if you can see that is  greater than um less than zero it means that by   in case it is not then we want to check this too  we want to check if the time here it is a time   or without the main value you want to study  is that please select water duration but in   case all of these have been solved then we want  to call this service passing this model this is   going to return an integer result so we're going  to stretch as we did earlier on we use this race   case to display the message over here and now when  this file change occurs we want to grab you know   this is also the same image change that we did we  converting this image to string and that's what we   are doing over here okay so with this this method  is accepting um image size of one megabyte so it   can accept an image size of one megabyte and  I convert it into basically for a string okay   that is for the far image change the message  here is you know let's get bites you can just   is not you dead now okay now the lesson that we  are doing here I could see so let's get bite here   it is from this method as you can see get back  to passing this efforts so that's why we need to   recommend this so the image that you get  we are using this method to convert it   into basically four string all right so  aside from that what we are doing here is   recheck that is when the file change so this method you know this was when I  was testing so I think we can remove this   because we've done that already here so  we can clear this off and now here it is   a drop down list so with the drop down  we are saying on value change so when   you check this drop down let me minimize  this and that okay and also this and that okay now when we check when image is selected  it is calling a method known as here that's the   unchanged we've done that but if we check this  SF drop down list it is calling a value or event   called on value change when this is clicked so  you want to as soon as there is a choose any of   the drop down value you want to grab the ID that's  why you specify the value that you want as an ID   here the test is what's going to be displayed to  the user and under ID is what you're going to get   you know from this recheck this category you  see we have the category ID and category name   you want to use the ID here you want to store  the name here so this is an ID that you want to   grab and when you check here when the value change  we can get it value using this so you can see we   are signing this model dot category ID tune this  argument.value so This acts here coming in from   this category model we can have access to eight  value here and this value here is a string but you   want to convert it into integer so you can store  it over here so that's why we're using this n dot   pass okay and then when the button is canceled  like canceled return to this home page for this   recipes and now here when the parameter changes  that is when we want to update then we check if   ID is greater than zero then first of all get the  content or get the recipe by ID passing this ID   and now set the title to update food recipe and I  return in case the ID it is equal to or less than   zero then add food recipe because you want to  add this um food recipe and I will check that   so this parameter set here is going to depend on  this parameter value and this parameter value is   going to also depend on the one that you pass on  top here on top here okay so when this changes   this also going to change and as soon as this  changes it means parameter set and now this event   can now fire all right so that's for our recipe  components now the last component left that we   have to create it is the procedure component so  to create that procedure component we have to go to the same set um folder and then create  a new component there so I'll go to this set   and let's say do you have any error here so okay all right so let's let's do that when we are never  going to build this so set right click on set and   I'll go to add the new Razer component now with  this result component let's emit as procedure   component now with this procedure component what  are the things that you want to do here in the   procedure component now first of all we have  to inject our header and also our navigation   because you know all of these they are therefore  updating also for delete Now update and add   um procedures so we specify that and as you  know we have the knowledge about this already   so from this component let me just grab  this from this um SF dialog now in here   let's paste this so the same thing the same thing  as we did in the message or that recipe component   within the same thing over here okay so we have  this message component over here and we are   passing in this message and this visibility  and let's navigate you as you know already   also no why why this let's let's close this  and now let's open it again to get rid of   the arrows there okay so you see we have an edit  form and they have on Valley submitters handle   operation and there is an object over here step  object so when you come down here we massage the   step object here specified also we're gonna have  this drop down and I'm also checking the same   thing if the height is greater than zero then you  want to either display the other one by showing   the name that it has selected already or if it  is not then it means you want to add display a   new one and now display a place where I select  An Origin okay or select a category all right   so that's what you want to do over here now aside  from that so it is supposed to be select recipe   all right you save that and now we are  binding title one here we are binding   um this selection of a drop down we have duration  over here as you can see the format and that's the   time needed and so we have the procedure number as  an SF test box so we can now pass in the procedure   now so you're supposed to be numeric text box  that is it and the passing procedure number   right there and actually we have description  we set this multi-line to true now all this we   are accumulating them from the model so when you  check this model you can see we have this category   recipe so when you go through this step we have  this and these are the property that we are   creating we want to get the procedure number the  title the description time needed and on the ID   so you check this type the data type and now use  the component or the view it's a component that's   going to fit to it you know this is strength  so it's going to be the SF test box this is   um integer so it's going to be a numeric test  box okay and now this you know when you talk   about description there is going to be a test area  so with the same test box you have to specify a   multi-lunge through you have a wide area to type  and that is what we are doing for this procedure   over here now let's go and talk about when the  button is clicked so if a button is clicked   what you want to do we can also populate it as  we did in the previous two components and now   in here we can paste this so in order the switch  case as we've done earlier on is the same switch   case that I am using over here and as you can see  from here we create a parameter we're going to   accept the input coming in aside from that we have  our visibility message and also our navigates you   these are strange variables that we have created  aside from Taxi we have this a populated object   like a recipe object and you see we have the steps  object another step model recipe here is going to   populate the recipe that we have so user can now  choose a type of recipe that the person wants to   add and it's a respective um steps or procedures  when this method is clicked you want to handle   this the response switch and display any of this  based on the results value here that's an integer   okay and here when it's canceled do this okay  when the page initializes you want to load   recipes because you want to populate it over here  so load it from this and this method is what you   have the definition over here so load recipes  the method is around here so set the recipes   object to the here this is a list of objects so  set to the results from this service code okay   and now yeah when the parameter changes we  check if the ID is less than or equal to   zero it means you want to add procedure but if  ID is greater than zero it must want to update   so load this so we want to load this method  because maybe this page won't initialize but maybe   laser want to do something so we for sure we want  to load this call this method to load it again   and you want to get this object from the current  step that has been selected and now you want to   um to call this an update that step okay so that's  what we are doing over here now once we are done   so we see this is also the drop down list when  value changes you want to grab the recipe ID and   we are setting to this ID as well so you could  see that here too getting the same conversion   here into an integer all right so that is it  for this um component that we've created you   see we've created three components you could have  created almost six because you want to do one for   ADD and one for update but I know we do three  and we want to perform two operations with one   component okay so we are using it very well now  we have this we have to click um create um view   or that's the whole view to manage this component  now let's see so I'm going to save all this   and now let's close all these close all tabs  and now here when we go to installation Explorer   inside this you can minimize the set inside this  pages that is where we are going to create our   main components to render that or to display  the information to the user okay but before   we do that I want us to update this let's go  in there and update the nav manager so we can   um display something over here now I made some few  changes to this nav um link here so you can see we   have when you go to the set we have this nav over  here let's see we have the set and because we have   this this is a nav menu now this is enough meat  that we have here so we have this three but I made   some change today so we can add or we can have a  button to click so we see I added uh manage recipe   manage proceeding and also manage Origins and I  just added their reference respectively as you can   see from here okay and also to change the dark you  see here it's a dark um and I edited that you see   yeah using the primary so instead of that we can  also change it to BG primary as well once you have   the number back we can also add a BG primary that  is the background of primary and attitude to it   okay now we have this set I believe we can also  go to the main layout and let's also check if we   can also make some slight changes over there so  with the main layout let's see if we can set this let's say this to BG primary and also want to  wait as a boat so we go to this solution Explorer   main layout here and now on here let's have this  OBG primary okay background as primary test as   light and we want to build the test that we see  over there so I believe the settings of these   are done you can save this now let's go to  the pages folder and now in here the page   folder we are going to create our Theory component  respectively for each of the models that we have   um created so let's let's have a look with the  first one and that's going to be the manage   category so let's create a complaint known  as manage category so add a new component   I rename this as manage category dot razor   so with this what we are going to do here  is also a very simple we have to inject our   runtime also our route so we specify our  route as categories we inject our service   and navigation manager I know so JavaScript  object and aside from that we want to now use   this sfd target so we use an sfd Target over  here you see from here using an sfd Target and   now we set the source to this category models and  I can see we are adding this toolbar so you want   to add you want to edit you want to update you  want to delete you want to cancel and we want   to set okay you make a reference based as a grid  and as you can see from the great event when you   want to edit you want to call this event if you  want to add or delete you want to call this event   the value here is for this category model and I  will specify the various columns so there's an ID   and definitely it's going to be the primary key of  this so if you want to edit you don't want to edit   this primary key and we want to set this image  so we want to decide to use an image tag here   to display an image and so you can see from here  that it is the same great column but this summary   we are performing a template we are customizing  this column to display an image as RAM and the   last one is a country name and we display the  country name over here okay so with this we can   just go ahead and and get the the code for this  and now for the image maybe I like to have this   style here to get the image a surrounded  Sim because if you have the Border radius as   um 50 is a little bit of CSS and I want to check  the documentation I believe this is found over   there so I'll leave that documentation and a  description so you can just check on that and   you're gonna have a lot about the target it's  actually broad so you can have a lot over there   all right so you see from here that you make a  reference to this SF grid over here and now we   are populating the list of this category model  and we instantiate it over here aside from now   when the page is called we call this we publicity  when you call the service and I return this output   so in here we've done this already so we can click  get rid of this now when a two bar item is clicked   if the other the operation is what the action  is ADD you want to navigate to this category   if it is delete you want to use this I usually I  want to do this if the confirm you want to call   this service and I'll pass in this raw data.id now  delete it and I also get the current data and I   refresh the grid but in case it is edit Handler  then navigate to this category and then pass in   the ID that's why I buy that company is going to  accept the parameters ID over there all right so   that's all three are doing very simple one now  for this all red lines we can just go in there   let's close this and now let's go to  solution and let's reopen it again pages   and now from manage category and you see that  errors they are gone all right so aside from   this let's have a look at the next one manage  recipe so with this manage recipe let's also   create a component for that in the same  Pages folder solution and now pages right   click now let's add a new result component  and now this is recipe many recipe dot Razer and now in here with this we also have to inject  the same thing as with that so let's grab this   and on top here we are going to inject them here  recipe passing the route and at the same thing   as we did in the category aside from that  we also have to use this SF data great to   populate what we have once you perform add and  delete them Etc so with this if we check here   that we are checking first if this current  selection value is now so where from this   um current selection value let's have a look  at the the code so we can understand what   this is trying to to mean so in here let him  come down and uh let me just paste this here   okay so we are creating a selection value ID at  zero another selection value as string so what   we are doing here is as soon as I select you want  to maintain the state of the user so if I choose   maybe um Scotland or Ireland recipe and I navigate  to another page and come back I want to maintain   the same airline there I don't want to refresh the  page because you know when the page initialize it   it has to call the new categories over here load  these categories you don't you want to maintain   the current one so that's what we are using this  current state um to do that okay so we are saying   that this is the strength value and we are saying  if it is now if it is not now then display the   current state to this drop down list but in case  it is now then display this maybe this um we can   just remove this from there because you don't want  to add it now and now when value changes you want   to call a method over here aside from that we are  using an SF grid we pass in the horizontal line   over here to separate it and now we are using  an asset data SF grid we pass data source as   recipes and now you see we did the same as we  did earlier on we have the tools over here and   we have the same grid event and we have um allow  adding allow edit 10 deleting Etc and as you can   see from here we also customizing the page for an  image so you pass in template and we do that here   and we populate we pass in the column names so  recipe name rank time needed you pass the header   test the alignment the type over here and then  the weight and we do the same thing to reverse   as well so if we come down here we see we have  this reference made now this is there to make a   refresh to this grid when we add or when we delete  we create a list of categories a list of recipes   and I will create you can see from this they are  all starting because the value did not change   um dynamically unless you sell it yourself and I  have to check here when the page loads we want to   call this method to load this this categories over  here and that's the method over here so we check   if the current selection ID is greater than zero  it means these are chose um a selection a value a   drop down value so you want to maintain that and  passing that that ID to get the data in case it   is now then get the whole data at refresh it and  get the whole data also and now set this current   sizing value to empty and here we also want to  get a categories data so we get a category data   from here and then display inside this SF drop  down list okay so from year two that is when   the user select a drop down maybe I want to go  for um Scotland recipe um Ireland recipe Germany   recipe it's not actually like that this method is  going to handle that because you know from when   we check here the drop down is having a method  known as on value change so one value changes   that's what we are doing we want to check convert  this into integer and now we want to pass it to   this method so get recipe by category ID okay we  get this recipe here and now we want to display   and set these guys here and we want to set the ID  to the current one the ID over here so that's not   the person navigate to another page and come back  the ID is still written and that selection that   the person made in there can also maintain and  get the data from the database first and display   it in the SF data grade 2. okay the same thing  applies to when the action begin Handler event   is clicked so if it is hard you want to navigate  and if it is delayed you want to also do the same   thing over here and if it is added you want to  also return to recipe passing the ID and I make   sure you refresh the page as well okay so I can  see that from this it is the same thing that we   have been doing all over the page the three pages  so well that is with this so this can you can just   make a copy of this to other three pages and I'll  make a change to that okay so when you understand   the first one this you're going to understand  the rest as well all right now let's see the   last company that I left you for us to create  here it is how to manage their procedures or   that is the steps okay so let's also create that  solution Explorer now the same Pages let's add   one and that's going to be Razer components and  we're gonna say manage for cds.razer so you can   see that when we check here we have only seven  components that you're using for show me this   mini project from we have six over here three here  for our pages and you see we have um three here   that's the four for the set project over here  I'm going to add the last one that's going to   display the whole results here into a screen for  us and that's going to be the read recipe and I'm   going the last one all right so from this you can  just get rid of the the templates one that we have   and for this manage recipe we have to also  inject our the header as you know already   we have to inject this and aside from that  we need to also use the same SF drop down   um unless that's a SF data grid so here we paste  it here that's what we are doing you see we have   the same toolbar we specify the column that we  want and now from here we want to grab the step   model because you want to hear you're making  a reference this I'll try using this foreign   key you see we have um great foreign key okay  column maybe I'll take some time and go through   it but aside from that is an alternative  way to grab the content from another model   you know we are talking about procedures I want to  add the the recipe ID here okay you want to add a   recipe naming some of the recipe ID so to do that  we have to call a method known as get name and I'm   passing this recipe ID so we can return a recipe  name instead of the ID so maybe if it is from if   it is a the potato chips or Etc that's going to  be the recipe ID and that's going to be the recipe   name the ID is maybe one before he's supposed to  be one but I don't want to display one they want   to display the name of the recipe here so that's  how you can see we have this method as get name   we have our time and description also specified  here now inside this we can specify our method   yeah so down here let's have our method specified  and now what we are doing here we see we populate   the list over here from this step model um and  you can see we have this SF grid it is there to   refresh we have this list and the list of recipe  and also the steps model now we call this method   as low direct procedures or low step and this is a  method so we are going to load the two steps here   that's the step and also the recipe okay because  you want to populate the recipient now put them   into a drop down let's wherever is I can select it  and I'll add it related my steps or the procedures   and now when two buyers click you know we're doing  the same thing from this and as you can see from   here you see that from here Great Dot refresh  we are refreshing the content here all the time   and now the next thing is when it is edit  Handler is Click go to this passing the ID   now when it gets to the same page it's going  to record a service and I get the current data   from the service and I'll display to the  user now the method that we have here is   get recipe I'm named by ID get recipe Name by  ID and it is accepting a recipe model and here   it is written a recipe name so this method we can  use I created one over here too and assuming this   is very simple now this um get receipt by name it  is it is yes okay it's also written that list but   I believe this gets name here address simple so  we return a list of this so we're passing the ID   come in here and now we check if it corresponds  with what we have in the recipe ID if we have   returned the name okay and return to that song so  with this I believe we can just clear this because   we're not using this anywhere in our page so it is  there empty so you can just get rid of this yeah   all right so um that is what we have here now the  last one that we need to do here is after this   doing all this you want to display the current  data as a home page okay so to do that we have to   create one last component and that's going to be  we go to this um set now I said there's a we have   to create a folder known as maybe raid recipe  or something like that yeah so read the recipe   now before this read recipe let's create a home  page okay so we can display you can just direct   all users as soon as you want to access the  site let's put them there so you can do that   in the pages now right click and add a new  result component and I'm going to name this as home so home dot razor now in this home  dot Razer you want to just have a simple   um code here to display so we enjoyed the service  over here record the service and I we are looking   to the service and I'm creating a card out of it  so creating a small box displaying the image on   it and also displaying this as maybe a thumbs up  um set and our Circle button so these are icons   that you want to display as you could remember  beneath the the each of the components or each   of the image you see you have these three guys  over there that's what you are doing so this is   going to be the home page it's not the user tries  to access this page it comes to this page and now   it is open because you could see that from here  you are saying that navigate to this page and   I'm passing the ID so if I want to navigate to  this page and read more about this can I do it   yes so it means we have to create this component  here and now let's go in there and create that   component and that component we have to put that  in the set or we can put it anywhere that we want   okay so let's say this is read recipe and less go  to solution and now we go to the set let's add one   result component and now here we  are going to say that this is read   recipe now with this read recipe what are  you gonna do here we are going to specify   um this is just a UI that we are going to design  okay to display the list for us so you can see   we call the method and now this method here  this content page it is accepting an ID as   a parameter and when you load this page that's  for the route and I can see from here we have   this print description the image on top over here  with display description country of origin if you   spray the image here the rank procedures and now  from the procedures you see we are looping through   the procedure list from here and anticipate one  after the other and I will have this buttons we have them down here okay now let's see so from  this card you can just have to keep it you can   decide to just get rid of them we actually don't  need it here and the next thing to do here is   you see we have a parameter here we pass in the  ID and that's the parameter that we are getting   from the route here now when the page loads and  when the parameter changes and if the height is   greater than zero if it is less than equal to zero  they want to return but in case it is not then   um do this populate this get a service from  digital base okay and get the ID and I'll set   this away and display it so when I display  this recipe model you're gonna have all the   relations over there because when we check the  service for this recipe model let's check that   this is a method known as get recipe by IB  async let's quickly check from the service and now on inside this recipe get received by  IB async if I click on this you can see it is   including for CDs it is including category so  these are the relationships that they need and   we include them over here so as soon as you  get that list each list has all the data that   it needs to get from the category honor so from  this and procedures so you can use that one to   display all right so I believe this what we need  to do for our mini project now to do the last   one here's let's build the previous first and see  if everything is in other then we can now run it foreign Brothers project now let's see to make sure it  is it is working as we want so now everything   is set let's go in there and let's run  this application and see what we have now that's right so our app is not ready as  you can see from here and you know we can   now go in there and change our title so  we can do that and let's see what we can   do from that end so we're going to go to our  page in here and let's see from this folder and now let's go to the nav menu and I see we  have this demo the name over here so what I'm   going to do here is I want to make a change a  slide change this and in that maybe I can add   some icons in there to get us the link that we  want or something like that okay so let's say   um I'm going to copy this I have one  over here and I'm I'm using icons here   so let me grab this and now from here I can  just come to the next line create a space okay and now with this I'll paste this here and now let's remove the let's remove this so okay now let's save this and  let's see if it's going to hatch reload is working   so I believe it's going to refresh this for us so  let's try to refresh this and see you're going to   have that icon um yeah so you see we have this B  icon this B as you can see these are icons that   I use and there's an info um info icon that gives  you the eye and you can see we have this boot icon   that gives you the B okay and you have this test  over here all right so now we have this let's go   and then add category free so let's make change  and origin so if I click on this uh manage origin   it has to okay so what we have about this and  I believe I found a problem we did not add the   references all right so let's see quickly let's  go to our code and I may be in there we can check   our host file okay and that was found it can  be found in the pages so we go to maybe pages let's see and now so listen Pages host file so we  have to earn our JavaScript and also the   CSS as well for this Sim Fusion so I have  them here and let's first add the first one   and that is the team okay so aside from  doing this we can also add the the script so maybe I have a bootstrap here that I can  add maybe I can add a bootstrap down here   and also we have to add there there's class  as a JavaScript for this same Fusion as well   let's see did we install the  teams so let me check this project properties okay so we did not  install team so it means we have to   install bootstrap team to this project  okay so this can work so let's try to install that so let's right click on  dependencies and before that let's stop debugging so dependencies and now let's  go to manage Niger packages   and another round stop you can install  Sim fusion.teams so same Fusion so we want to have the teams okay so  that is this one let's just go through so let's see that Blazer dot teams I believe that's the  right one okay so let's install this so apply okay so it is solved now I believe  this will work now let's run this again okay so it is now loading all right so if I click on manage origin  let's see what we're gonna have here so you   see we have this over here it is saying that  this is just a um you have to get license it   is not it's a try version okay so I can  click on ADD then you know from this ad   I must have this pop-up over here so I can add  a country name so let's say this is an Ireland   okay then yeah I can decide to choose an image  for this so maybe there's an Ireland and I can   decide to go for image for this let's see from  this download I have an images here so let's   choose one here for Ireland let's say there's  an image for that and you know it is updated so   I click on ADD procedure and you can see we have  successful created so that is the the message that   we created and you see it is over here so let's  maintain that you can add more you can also edit   this if I choose this and I click on edit you can  see I can now edit it also and I click on it you   can see we had a test here change to update and  then the title here is also change you update I   can click on just cancel and but let's go back  I don't want to do that okay now let's go to the   recipe so we have to add this recipe I know from  here that I believe that this won't allow us to   unless you okay so one click on this ad you can  you see we can now add a new recipe so with this   recipe maybe let's see recipe one okay and let's  choose an origin because we have one created so   Ireland another rank here initially let's say  there's a first one and this is description   and here you can select the duration over  here so if it is 25 minutes for doing the   whole stuff here you can also choose an  image and with the image let's see from   I have an image here so let's use any of this  and that is an image over here so click on ADD   um this is so you're supposed to be procedural add  recipe instead so you see we have it over here and   a duration and the recipe description now the next  one is ADD procedure so you can see from here to   let's refresh this so I can click on this add  and I can see our title so this is procedure one okay another recipe so you can see the recipe one  that we created as reflected here and at the time   for this specific procedure let's say it is 10  minutes for the first one the the procedure number   is one the description is maybe put something  something somewhere and that's all all right so   click on ADD procedure and you could see procedure  created okay so you see we have it right here now   um when I go to home you can see we have the  image over here the title of the procedure as the   procedure the title of the the recipe we have the  image and we see how these are icons so you can   just implement this by using the contest menu as  soon as I click on this I can just decide to pop   up something like using the dialog box or maybe  something like that to the display where you want   to do let's not click on this you see it navigates  you this readme so that's a read recipe and pass   in the parameters one and I receive a receive it  over here we get it from the database we grab the   description you grab the country of origin we  have the recipe rank this is a procedure so it   contains only one that is step one then we have  this over here okay so we said this very simple   one that we we did a very simple so as you know  I'm not going to waste time to just add all this   from the first the intro video I shown you how to  do that and I added one already so I should embed   the same thing that you have now so when you are  here you can just take time and try to add a lot   of recipes and their images and their steps up  to this that is it for this video I believe you   guys enjoyed it I also enjoyed with you doing  as well I don't want to use twice for this you   have two minutes left so that is it thank you  so much so if you haven't subscribed please   then do subscribe to this channel because  it makes a difference with this and also   um thank you for watching this video as well and  watching the whole video from this let's go to   channel you can also support me and you can  also buy me coffee check the description the   link is over there and I'll be grateful for your  kind gesture alright so thank you thank you for   yourself and don't worry I'm going to do um that's  a mobile app version for this so check also.net   my playlist over there as you check for the Blazer  playlist or the mini project for this check if the   the mini Project Playlist over there for net marry  and also going to see this recipe app that you can   install mobile phone over there so you have a web  app you have a mobile app or desktop app it's not   beautiful yes all right so take care of yourself  and I'm gonna catch you up in the next video

Channel: Netcode-Hub

Views: 974

Keywords: asp.net core, controller, service, web api, EFCore 7, migration, client-side, jwt, token, assign-role, bearer token, api endpoint, Http Request, Secure API Controller, Authentication, blazor server, blazor web assembly, Blazor Book Management System using SQL Server & Syncfusion Components., blazor, Blazor, .net blazor, book management system, projects, blazor projects, web assembly, blazor server projects, .Net Blazor, mini projects, food recipe app, web application, .net maui

Id: VBBrIjNQXYs

Length: 119min 1sec (7141 seconds)

Published: Fri Sep 08 2023