Job Portal Magic: Crafting a Blazor Web App with SQLite & Syncfusion Components! 🌐💼

hi there thank you so much for watching today's  video I'll do my best to make this video simple   and clear this is net code help Channel I  am Frederick your lesson facilitator please   subscribe to the channel if you haven't done that  and also click on the notification icon to receive   update as soon as a new video or a new lesson  drops you can also like this video to support   this channel grow we have more information for  you on the description thanks to all those who   bought me coffee today I'll facilitate on creating  a simple job portal web application using Blazer   server and also um SQL light Database The Source  Code of this project will be available on GitHub   so please check the video description for the  link now when you talk about job portal it is   um a web application whereby people can just  go in there and now search for job but you know   this job portal looks like a multivendor system  whereby you have an administrator and companies   can log into or sign up and register an account  over there and they can also post job so let's   have a look I have a demo of this project and  that is what you're going to look up to to do   same so let's first go through what I have for you  to get the basic understanding um when job Port is concern so that is this one now see a simple job  portal application and it was made by Blazer um   server now you see from here that we have our  header on top here we have our search button   and you have here we have authentication system  so with authentication system user can log in   to post by a normal user here has to read the  jobs available here but if you want to create   account it means that you have a job that you  want to post but it is not available yet until   you register so can see here from here we have  our job categor and we have this home we have um   the categories over here all right aside from  that when it come here see we have a featured   jobs so these jobs are featured and as soon as  I click on this feature jobs it opens for me to   read what they required for me also we see from  here that I have all these jobs available now as   soon as I click on any of these job you can see  we have the company name the job type that they   want the job function the job location maybe the  company image over here and the description if   it is a new one see we have a new icon indicated  here and you can see so made available yesterday   we have the company information business here  and this a featured job so you can see since   it is featured you you see we have this logo  here indicator as a featured job you can also   make a set you see we have the pagination you  can also go through it and also get the jobs   the next job as well so that is what we are  going to have a look today now see we have   this pation beautifully than bit as well and  now when you check here as soon as I click on   this I can now I guess it opens this um search  box as soon as I typ in any so let's see I'm   going to type in the housekeeper so as soon  as I type in this housekeeper let's see what happen and I'm going to click on this icon  so this is a button now as soon as I click   on this housekeeper let's see you see we have  this housekeeper we have the information about   it and everything over here now as soon as  I click on let's say this female electrical   engineer too let's do that and see so let's see  if I type in this let me just grab this one from here and I'll paste in click on set and you can  see we have that information or that job available   here also you can see we have some L here you can  see yesterday so here there's no any one supposed   to be yesterday all right now aside from this  let's try to we see that here it is hello guest   it means that you are not indicated we are not  a vendor we are just a user that you want to get   get available jobs and go away now um if I click  on login I'll have the chance to log in so let's   see but before that I can click on register first  so if I click on register first it has to open us   the registration page whereby I can register  now the registration page you see we have to   upload company certificate for authentication  and you have to also upload the company logo   so let's fill it with sample data here and see  so let's use something like so this is um net code link company so LTD now the phone  number can passing the phone number and now um let's say the  email here is going to be the net mail.com now you have to create your  password so let's use 1 2 3 4 5 okay   so 1 2 3 4 5 now see as soon as you type you  have validation mechanism that make sure that   you're on the right path now company name  so there is a this is a owner so let me use okay so that's a company owner  there's a company name company address all right now I have this campaign location all right so I have this all right now let's say let's upload the  company certificate so soon as I click on   this you see I have a PDF and it is only  accept PDF that why I can see this PDF now   click on open and you can see I have it  selected here now let's choose a company   logo as well and I can see let's choose  this as a campaign logo so click on that so the next thing that we're going to do here is  let's click on this upload so click on upload and   it's going to upload this so upload successfully  let's also click on an upload for this image now   as soon as we are done we going to click  on create account and now this account is   created okay so let's see so maybe if account is  created you can just navigate to login or any any   other maybe if you want um email ification you  can direct the person to a page whereby you're   going to confirm the email okay and now let's  see so as soon as solation is done let's go to   log in and try to log in here and see now to  confirm this we have a database open so this   database op if I click on registration you can see  have fi H and you see have the net Gmail and see   this is a password the password has been hased  and as you can see with the password sort and   um with a bite so as you can see from you have  the password created here we have the company   name the the company address location and you you  see we have the company logo so this is the logo   here now this logo what is going to do here is  we create a random number then we append it to   the name of the logo the image and also we do  the same thing to the certificate so maybe here   you see that a PDF so maybe from here that the  company or the administrator can come in there   and now view this information and I'll confirm  before the person can register or log in and   try to post okay that one could be an advanced  one if you want to actually make it as a real   application for people maybe here you have to  open the application open the document and now   verify before you allow the person to access we  did not add that mechanism yet but this is just   a simple project now um when you are done with  registration where can you find these files so   when you click on this application you can see you  have a folder called file so if I right click and   I go to Open folder in file explorer you have the  campany certificate you have the campaign logo so   if I click on company certificate you will see the  file that has been uploaded is over here so I can   now open this file and now view if everything  is all right you can see that a file here you   can see it has been open now if I go to the image  I can also open the image here so files and you   can see campaign logos and you can see this  is the email that the person uploaded so you   see have a different name over here all right  now when the person logs in here so let's try   to log in so that is the net at mail and the  password is 1 2 3 4 5 so click on login now   watch here so sorry not have accounts let's see  net at gmail let's see the actual name that we use all right so that's a net at mail so let's  take off the G from it all right so login now   see here so as soon as I click on login it's  going to Tate me and I can say I have this   hello net at gmail now as soon as I'm done with  the registration and the login you can see I have   this post job and now log out as soon as I click  on log out let's see what happen you can see I'm   out again and now the post ad or post job is off  so now let's log in again and let's see so next   login all right so you can see I have been logged  in and I have post job so we have these available   jobs here now the reason why it is I have cleared  the image from this so that's why we not having   the images here um let's see from what we're  going to do here is we're going to add a job so post job now let's see so now we are  loging so let's have a job title so the   job title that I'm going to provide here  is going to be something like accountant   and administrator so let's say have  the job title and um this is the company so this a job function the company  name has been stated already so job function   is going to be an accountant and and  uh auditing and finance so this a job   function now let's have a job description  so what the person actually is going to do   so job description and we have select job  type so can see you have a full time part   time so this is a full time and our job  location so let's specify where the job is and now the minimum and the maximum amount of  salary so if you don't specify it's going to be   confid credential but for now let's specify some  values in here so 1,200 then let's say this is um   4,500 so that is a range of salary that a person  can take all right so as we are done let's click   on post job so we we see job posted and now we see  we can now navigate to the homepage and now let's   see so our company name is let's search for our  company name so you can see here our job is not   featured so all these job are not featured let's  go to database and I click on jobs so this is the   first accountant administrator so this our job  that we posted so you can see from here that we   have all the next information here so this is a  company email and now is it featured so let's set   this to one so actually this is going to be for  the administrator side okay so now let's set this   to one and now let's write CH this refresh it and  now let's refresh the application it's going to be   added over here you see it has added and as soon  as I click on this you see we have we looking for   the dynamic accountant and Etc if I click on  read more you can see we have the accountant   administrator over here this the first one and  this are one so see net code link company this   is net code help okay now there is the company  we have the location we have a full time okay   and this is the amount that a person going to  take all right now we have the job function we   have the company image and then the description  and the company um details here posted today and   you have this feature added up to so this what we  are going to do for this video we have a button   over here as um subscribe to our newsletter all  right so there is the whole um uh um video or   this is a whole project you see the mini project  that we are doing you can actually add a lot of   features to this but I want to um stick to this  all right so we we're going to start with this by   creating a new project for Blazer server install  our packages and now create our services create   our razor pages and I'll try to cut a service  inside the Raz pages and that's all so let's get started all right so launch your visual  studio and click on the file new project   and now the name of this project I'm going  to name it as demo Blazer server job portter so we're going to choose blizzard  server application then demo BL   server or let me just make it bler server well and bl server job portter so that's going  to be the GitHub name so bler server um job   portter and that's a ation so I click on next  and I'm using net frame of of 7.0 now I click   on create so authentication type here we can  decide to go in for any of these but let's   click on N because we're going to create  a custom authentication so let's get it created now while this project is created the  next step to do here is we are going to install   some packages that's what we're going to be  using we need to install EF call that is the   Entity framework call we need to install EF qu or  design also SQL light and we need to install sing   components such as input buttons navigations  and themes so let's get those installed first   of all um right click on this so you can just  click on dependencies and I click on um manage   n get packages and I'll install them one after  the other but I'm going to do this I'm going to   click on this project and I'm going to unload  this project now I have the links over here   the project references so I'm going to copy them  and I'll just have to put in something like item group then I'll paste in this so install the  following um packages pause the video and do   that all right so once I'm done with this  what I'm going to do here is I'll just save this so after saving this click on solution exp  now right click on this and I click on reload   project with dependencies so when I'm done I click  on dependencies and I go to man get packages now   all these packages are going to be installed  in there so you can see you have the install   section you can click on the browse tab to copy  the name and I'll pay them here to install so you   can see that I have them installed um over here  and as you can see they installed when I check   the solution Explorer and dependencies packages  you see they also installed in here all right   so once I'm done with this let's build the project  and see if everything is working as expected we do that all right so you can see that it is  successfully uh built and let's see so the   next thing that we're going to here is let's  create all the models that you're going to be   using in this project okay so let's do that by go  to this the project then the data folder that is   there already we have to right click and I'll add  a folder called modos so let's do that add a new   folder and I'll name it as modos let's add a new  class and now this class going to be registration so this is a registration class and I'm this class we want to have these properties so when to have ID name  phone number so let's let's remove this so we don't want to make it nullable you  want to make sure that uh it's not empty so   let's set it string. empty and we  do the same thing to this string. Mt so let's do to to all so string. Mt okay so that's that's what we have name up to  this company certificate name and our company logo   the reason why you see these are images this is  a PDF document and that is a logo here now logo   here is an is an image what we're going to do  here is you want to store the name of the logo   and the name of the file here into a database  and I keep the file itself in the the project   okay so you can grab the name from the database  and I'll search it into or inside the folder that   have been dedicated for those files all right so  we have this now this is what we need but we need   to create a registration model why do you have to  create that you know for registration we want to   add um confirm password and you know this is  going to be used as an entity for a database   we don't want a field called confirm password in  a database or table column so we have to create   another one another model for this to use it  as the model for the Reg rtion okay so this   is going to be registration model and now the  registration model is going to have the same   thing as this but just that with this let's  see what okay so let's we have these as the   component validations okay so here control period  let's include the component of data annotation so   these are the attribute that you want to apply  for as validation so see we have an ID and now   the difference between the other one and this is  you can see we have this attribute on top and now   the next thing is we doing here is we see we have  the confirm password um property added so here if   you check this it is confirm so compare this with  this original password so this original password   so compare with that and see if they are the same  so we not going to install this now when you get   to the service we're going to to handle everything  that this model has into the registration um this   model so it can store into the database okay  so we have this model now the next model that I   want to do here is let's create this model as get  job so this all going to be used to display the job so you know I took a snapshot of the  previous project so let's see now this is   what you want to do so you can see from here  that we have there is the get job so see we   have the job the job title um the company  and all this stuff so this is the m that   we going to create to handle all this okay so  let's see and that is a modu so campaign logo   and certificate and Etc so we are combining I  think registration model we taking part of the   registration model and now adding some models  or some properties up to this all right so we   have this and we have this job mode Now what is  theob job mode going to do now the next model is   the job mode and here this going to handle the  job type is it part time or it's a full time so   you're going to create this model but you're not  going to actually stall this into database okay   it's going to be handled within the application  so we do this and we pass in the job ID and job   name we do this so we can populate it and add it  to this or assign the data source of a s fusion   um drop down list to this so us can select so  you have an ID and we have the name okay now   after doing this let's have our login so you  know when is Tri login we need some model to   handle that and we need only username or email  address and password so let's do that for the login and you need just the email address and then  the password okay now if the user tries to log   in and I post um a job what are the models that  require to to be added or to get data to database   so let's have that model as post job so with the  post job model let's have something like this we   have the ID we have the job title the job function  the job description minimum salary and also the   maximum salary we have the job mode and then this  job mode going to be selected from the drop down   that we have just created we have the job location  is it active is it featured so all these are   going to be done by the administration now for the  active automatically as soon as you post job it is active but for the feature it it needs  Administration access to able to make   it as featured Al we have the company email  so this company email is linken as a foreign   key from the company registration database to  registration table up to this okay we could   have used a company or um registration s user ID  you can also use the email so ID and email they   are the same because you can each is a unique um  field in the database you can use any of them to   make a query to get a specific data that you want  you know in a database we don't want the user to   have two we don't want a database to carry two um  same email so if I use this email for registration   nobody can use that for registration therefore  it becomes an idea specified one for me a unique   one so we can also use that as a foreign K too  and you have the date added as this all right   so let's also have the row as user row so this is  what is going to do or you want to use to create   a row for any user so the default one is what  we are doing here is maybe in case the person   registers and so user row and this a modo and  and the name here and the name of the email start   with admin they want to make it as admin that is  the first registration but any com in with admin   again won't be accepted because the admin has  been assigned as an admin role don't worry when   we get to the service you're going to understand  this but for now you have the user row and user   ID okay user row and user ID okay so let's save  this now these are the model that we need for our   whole application now the next to do here is let's  create our contest class so let's name it as abdb   contest but before that we're going to create  a folder known as configuration in the data so   let's add a new folder to this as configuration  now with this configuration let's create a class   and this class going to be as ADD DB contest or  application database contest class so let's do that and now in this you want to have few um  things here now once we create um con out of   this and I can see this has to inherit from  this appdb contest so so this I'm going to do   I'm going to remove this and remove this control  period all right so control D we do it well so   you can see we have this app DB contest as a  class and is inheriting from this DB contest   class okay so and aside from that you see we have  the Conor created and it's inheriting from this   base option that is a DB contest and we want to  have these three tables registration table you   see it is using this registration model it is not  using the registration model um class it is using   the registration this is the original one we have  the post data post job as jobs and we have this   user as so we need three tables here all right so  we have this you can save this one and the next   to do here is let's specify our updb contest so  let's create our connection string we do that in   the up setting. Json file and within that we can  do something like this so let's go there solution   is the up setting JM file and on top here you  have connection string and the default connection   is um demo job Port DB so I'm going to name it  as demo that is a database name so once you're   done let's build this project and I run database  migration to create the tables that we have in the   database itself so solution Explorer I click  on the project and I build this project first all right so you can see that it suceeded now  click on tools you're not having this package   manager console then click on tools and now  come to n get package manager and I click on   the console that is it so click on it from  this area but since I have it here I'm going   to click on this and it's going to be l so  see initializing power shell host let's wait   for the ination to be done then we move on all  right so what we have this what I'm going to   do here is CLS means clear screen so we can  clear the screen from this now let's see so   LS relist all the project now you want to enter  the project inside so CD then let's paste what   we have so LS we see we are inside now let's  use net since we buil it already net EF then   migrations okay now let's click on ADD so let's  give it a name as first this is the name you can   change to anyone that you want so Das o me the  output so open the folder called data and then   create another folder called migrations and do  all your stuffs in it so click on okay and now   this project is going to be built and it's  going to be run with the EF so let's wait   for this when is done then we update the  database to create the tables really for us all right so you can see that that is saying  unable to create an object type of the class that   we created all right so the reason why we have  this error is we haven't registered the connection   so we have to register that go to program.cs file  and in here let's register the connection so you   can see we use this register for the connection  and that is what we are using here okay so this is   what we're using for the connection so we get the  connection string name from the default connection   from this appdb contest and that is this one  and um in case it is not found then we throw   this error all right so you see we using an SQL  light so if you're using SQL Server then you have   to change this to SQL server and that's all okay  so after um doing this I believe it's going to   work now we need to build this application again  for for to make it fast let's build this solisten again all right so B suceeded now let's  see if we can build the whole application   itself so do this project all right  done so see let's let's clear screen   and now let's net EF migration  add so now let's do it again and see all right so you can see it is done succeeded  so let's update the database so net EF database   update and what is the name that you use put it  there first now let's wait for the update to be   done so it's going to run this CF call and as soon  as this is done see it has created a file when you   check on the solution Explorer you see there's a  folder called migrations inside this data folder   open it and we see we have this first name here  so we see there is a table that we specify so   you can see job table we have registration table  and we have um user Ro table so three table that   we specify so you can see we have a primary key  for each for the ID and you can see we have you   can also drop the table by us using this syntax to  drop passing the table name and you can drop the   table itself and go all right so let's see um now  see all it is done now so when check a database   it is it is it is there so there is the old one  now let's click on open database and I'm going   to navigate to this to the project folder mini  project and see you have this BL server job Port   you see this is a project folder so you see have  this demo job portal created let's click open as   soon as we do that you see we have the job created  we have registration and zos but see they are   empty there's no data in here all right so we've  successfully achieved the migration and database   table and the data itself um created all right  so once you have this the next thing that we're   going to do here is we have to create a service to  render the data from database to the user okay so   to do that we're going to create a service folder  inside the the data folder you got you want to   organize our work into one F folder that is why we  are doing this so the data folder right click on   that and now let's add a new class not a new class  supposed to be a folder itself so add new folder   and I'll name it at services so from this Services  let's create an interphase and implementation   class so maybe you asking um this if you're the  first watching this what is an interface and what   is the implementation class the interface contains  only the method name okay now the implementation   class contains the method definitions what the  method are going to do all right so they have   to to get the like twins as soon as you call the  method name the definition must follow so on doing   that you have to inject them together you have  to link them together let's do that so Services   right click on this add an interface I'm going  to select class and I'll choose this interface   the name of this interface is going to be the I  client service because going to handle all client   service and now within that you want to have this  method names here so you want to have um going to   return a flank that's a Boolean it's going to  return message okay and now this is a register   user a so register the user and you can see it  is coming with a registration model and here it   is login here is post job and that is a log out so  if I click on log out un handle that and now this   is also get all jobs and this get all jobs we are  passing a string filter so this filter could be   now and in case the filter is now it is accepting  or getting all list and now submit in case the   filter specifi then get all list which is linked  to this filter all right so control period let's include okay so I think that is wrong let's  check get job and see that model so get job   get job model us we have post job and all  right so all right we have to create a get   job we did not add a get job model so let's  create that class okay so with that one let's   add it to the model so we it has to not here  let's delete this and I to inside this model   so we have PST job and now get job right so  get job is going to be used as soon as the   user tries to get job or search for a job  okay or display a list of job as you can   see from here it a displaying job so here it  is get job the US want to post a job that is   when we use the post job model all right so  let's let's get that job so here it is get job and now with this get job job this is  what we want to have you want to have ID   title function description mean salary Max salary  job mode location if it is active or featured you   want to get that company email as well and  this is for the company information okay so   and so date added all right so we have this set  let's save that now when it come to get job you   say it has been added successfully all right so  let's click on let's create implementation class   so we do the same thing so the services folder  and now within the services folder we're going   to create a class and the name of this class  going to be client service it is no more I all   right no more I the I stand for the interface  so this is just a client service and now then   client service first of all let's create and  inject this authentication State provider so   we create a class that's for the Constructor and  inject an authentication State provider and also   inject our appdb contest all right this is what  you're going to be using for the authentication   to authenticate the user and also we need this um  FDB contest to get access to database tables and   the database itself so after we have initialized  this over here the next to do here is let's post   job so in case I click on post job what do I  want to do I want to um save the data that is   coming into the database so I I am returning  a flag and also a message now it is coming in   with this a payload Asos job and now with this  post job we we first check if the company or   the person who is posting the user which who has  registered email it is found in that database and   now the title of that data is also found over  there it means that the file or the the job   has been posted already okay this what we are  doing the user has an email so we are making a   check so we have to check that both are true  is user email is there and is the user email   has a job title known as the coming in if yes  then this um say return already posted but in   case the user maybe user one posted secretary  okay and if the one the same the same user one   tries to post secretary again it's not allow  the person to post it but in case us two post   secretary is going to work because in such case  the first condition here is going to be false so   here we have to include EF and now what we  are doing making it possible here is using   this the Amper sign to here making it what as  end so it means this and this must be it must   be true before this execute if not return this to  the user okay so we are saying that if the if the   data here which is making a SE from database here  is found the return user created or the title of   the uh job posted already if not then save it to  database and I return job posted that is to post job now let's work on to register  user so in case I want to register   user what are the steps what can I do to register user so it's very simple one as well and this what  we are doing so this is a method register user and   so here we're going to start the user in here now  you can see we are creating a user row okay you   know remember that the user row here contains the  username the user the user name and the row ID so   here we create an instance of it as user row then  we check if admin already exist so we are checking   so we are saying that if the model coming in here  email start with admin okay this what this is my   use case okay maybe you can do that that contain  admin or ends with admin you can do any so if you   start with admin then you want to check if admin  already exist so we are looking to the user rows   and now check where R name do lower equal to this  admin so we check if the user row it is not now it   means if admin already found then we turn for and  say sorry admin already exists please change the   email address but in case it is not found and  admin from the databases now then set the rule   name as admin so here we are setting rle name  as admin now it has left with the user ID and   you know it is a new data coming in so it doesn't  have ID here how do we get the ID let's see so we   check if user already created so is user email  is it found in database if it is found Al the   user has been assigned as an admin and we're going  to return this you're going to continue with the   work it's going to break it so going to say the  email already exist so admin can register itself   himself twice email already exist so here I want  to make sure that the email is unique in all but   in case this is false user is now here then the  row is which has been assigned then we're going   to Hash the pass because we can't start the user  password just like that else anybody who trying   to log into a database may see the password and  can log in on behalf of the person we don't want   to do that even our we don't want to do know the  password of the person security is tight here so   what we're going to do here is we going to Hash  the password how do we hash the password we are   creating a method known as hash password then pass  in mod. password that is coming in if everything   works successfully then registered entities equal  to so we're going to save it to database and this   registration database here as you know in the  appdb context consists of of the registration   itself not the registration model that we created  okay so you have to convert it from registration   model into this registration maybe you can do  that by using this Auto mapper that is when we   have enough data to do it but you see we have only  one here so there's no need for us to install that   package that's why I did not include that okay  so in here what are we doing you could see that   we are setting up the name email populating the  new names that the data that you want to store   to database we are doing that okay and you can  see from here that we did not add the ID because   when saving new data into database ID it is not  recognized the ID is defaultly it is zero okay   so you don't need the ID and also we see from here  that we are setting this font to string the reason   I did that was when you check the the registration  maybe a user can decide to enter start with zero   if I use n the Z going to be ripped off most  of times okay so I decid to use this string   but when using this registration model I have to  use integer so I can pass in validation attribut   you see I have this at phone number and I use in  here so when it gets to this it has to convert   to string so it can be used here that's why we  conting to string now for us to get the user ID   after adding it to the database we can then have  ID because ID is going be generated we can do that   by adding this entity then we store this over here  so after saving it the ID or the data which has   been saved can be found inside this registered  entity so here we are saying that if string is   not now if this user is not now then assign this  zero to user the reason is if the username doesn't   start with admin it's going to skip this when it  skip that the user R it is now okay so if is now   here then assign admin assign user sorry meaning  that the person is not an admin he has a number   like user gmail.com um netcode gmail.com all these  emails do not have admin startat therefore then   assign user to each then we assign so user row do  user ID is equal to so you see since we have the   user registered currently stored here we can now  fish out the ID and store and save it to the rule   and I save it and I return account created okay  now where from this hash password let's quickly   create the hash password and it is just about 10  lines of code to encrypt the password now this is   a method so I can use to encrypt the password  so the hash password you can see this a static   method and now we are requesting this password  Here we create a bite of sort of 16 bytes then   we create a random numbers okay so this random  number that we create we are going to use going   to enry the password with the sord using this  RFC 2898 um Drive byte okay to to encrypt it   now see we passing the original password Here we  going to encrypt it by the sort the system B that   you have added the number of iteration time that  you want to run to get as a password sort and the   password hash it is a thousand times and now the  state or theor type that we using here is an sh1   when we are done with that we can receive this RFC  password okay then we can get a bite and with that   we can get the bite of it of 20 by so we have 16  by here and at this making 20 by so let's see so   we are saying that bite is equal to password hash  new B of 36 okay 36 by so and now B we going to   copy the Sal now the S start from the zero up to  16 from this password has that has been created   okay and now the next one is the password itself  so from 16 up to 20 all right so we have to copy   the 16 and I have the the 20 left so we starting  from the the 16 over here and you're copying 20   and aside from that you want to return to B four  string from this password hash all right then we   have a password hash created that is what you saw  in the database all right so this is going to be   stored to a database and going to be stored also  to the user row with the user ID and the row ID or   the row name we can also encrypt the row name as  well okay maybe you don't want the user to see the   kind of Ro that the user possesses you can encryp  even the admin of the the user you can encrypt it   but for now let's maintain let's encrypt only the  password all right so once we done with this we   have have to also log in now in case I want to log  in you know the person has to provide username and   password right so if pass usern name and password  you know that we have encrypted a password from   the database so we have to compare those password  it me that the password that the one coming in   from the user we have to also encrypt it get a  password encrypted from database and then compare   if they the same then say yes so this what we are  doing we are checking if the user is found with   the email if is not found then we can say that you  have you don't have an account with us so please   create or cly what do register aside from that  you can see that in case the user is found there   then let's compare the password and see if the  password is what we have so you see from here that   we call this verify user password we passing this  a user coming in password that's the raw password   and now the encrypted password from database so  we have the ra password and encrypted so you're   going to encrypt this password and I compare the  encrypted one and this encrypted one and see if   they match all right if they match return true  so here is return a buo so we are saying if it   is true then you want to get a row of that person  because as soon as the person registers we have   the r assigned there's no way that the r could be  now the r can be now that's why I'm not checking   for now okay so we going to get the r from that  user coming in this get us I want to check by the   ID the is table has an ID so you to check it over  there and I get the r all right so when we have   the user R we have the user email and you have  the user R so what can we do again we can go ahead   and I put it at the custom authentication State  provider and set it to the user session that's   the local storage okay save it over there so we  create a new user session I believe we created a   user session here when I check our model okay we  did not create us session we're going to create it   now and the US comprise of the usern name and our  user R so we assign the user email user to this   email and we assign the row to the RO name here  so the RO name is either admin or user we assign   the one that the user has to this then you want to  return through all right and in case everything in   case it couldn't return invalid password in case  the password is not the same then return this here   making a check so in case it is false return  this so where from this verifi password so so   this is a method to do that it is like decrypting  the password so it is a vice versa turning this   upside down so turning this encrypted password  that's a hash password upside down to decrypt   it so it is the same thing that we are doing  verify password and now we create you can see   from this B the string create a bite out of it we  we we create a s out of 16 then we want to copy   the sort from it remain the 21 we Comm using the  RSC algorithm and now we check if any of the bite   here if any of the key from that system is equal  to the password that have been created from the   user encrypted then return through in case it is  not the return forse so that's what we are doing   to decrypt the password and I return it over here  all right so once you have this we have to create   a custom authentication State provider and also  create a user session all right but before that   let's have our log out method so in case the user  clicks on log out and tries to log out we're going   to happen so you want to set this update andate  method to now you're going to create a method   from this inside this cast authentication State  provider and now this method is going to update   the user session whereby session also installed  inside the local storage so in case we pass it now   then it means user has been logged out then want  to delete the account from the user from the local   storage okay when we get to this custom State  provider you're going to understand this better so once you done with that let's click on get  all job in case I want to get all job what am   I going to do or what can I do now this get all  job here you know when it is coming in with a   filter it has a filter the filter could be now H  could be um assigned so this filter here in case   I I make a set then this V becomes a a value a  variable with a value we create a list of all   jobs here and now here that's why we making  a SE here so we say that if this F it is now   then convert all data from the jobs move it as  a list and I return so look through it create an   instant of this get job and I assign them here  and I return but in case this filter contains   a value then make sure sech through only the  title which have or which contain this filter   name okay now here we are saying it's active  you don't want to include the um deactivated   one maybe and a job could be deactivated maybe  in case your job is to the user has to pay to   renew and the user refused to pay that add must  be off it shouldn't be shown on the screen so in   such case that one could be activated to be off  could be deactivated so you want to select only   the activated on then for and return or as a list  know this job is a list of get job and that's what   this return type here it is so the payload here it  is a filter string all right so that's the get our   job now once you have this let's go in there and  create a custom authentic State provider for this   the authentication State okay so we can do that  by creating a folder known as authentication so   solution Explorer now let's do that so we don't  want to do that inside this data folder let's   create create a folder here to the project  and I name this as authentication now within   the authentication you want to create a class  known as user session in it so let's create a model so user session and session remember that  s we need only the username and now the row so   username user row they are all strings that's  all we need aside from that we need to create   a class and that class supposed to known as the  custom authentication State provider so it means   you're going to use this provider this class  instead of the default authentication State   provider okay so anytime or anywhere that we  need this authentication State provider it   means we need the custom one we're going to use  the custom one in place of the authentication   State provider that is all we're going to do  here so we create like created an instance of   it let's click on ADD and on class now this  class going to name it as custom authentic   authentication State provider yeah that is it I  got it correct so let's add that and know this   class has to inherit from this authentication  State provider based class now aside from that   we have to implement an interface interface  here because this an abstract class or it   has an interface to be implemented now let's  implement it by first what we're going to do   here is we're going to create a Constructor and  now inject our protected local storage in so we   we injected protected local storage and now can  see we create our our claim principal equal to   new claim identity okay so here it is anonymous  so soon as you call this it means that the user   is not registered and now we create a Constructor  and now we inject our um protected local storage   as a SE storage here and initialize it in here so  now there's a method known as this can just click   on control period and and you can implement the  interface from this drop down you see Implement   Abra class you can just click on this and you  see this Abra class that we need so let's clear   this and now we this is what we're going to do  from this abstract class let's use a TR catch   block to handle that in case there's error we  know what it is coming out from so here what we   are doing here is we create a varable known  as a user session storage from result so we   are getting the data from the user session storage  all right this must be an async because it has to wait so after getting the data from the user  session storage or the local stage you know   that this session storage comprised of the user  name and and the r ID so in case we in case it   is Success then return the value okay the value  a is a data itself now that is the name okay and   it's like a key value pair a diary key value  pair so this is a key and that is a value so   in case it is it is it is Success then return  this value in case it is not then return now   so in case it is now it means that the user is  not registered because you don't have any data   stored into the client SE storage okay so in  case it is not then return as Anonymous it the   user is not logged in but in case the user is  Success it means the user is still there then so here what I decided here was you could  have sent in case we get any data from the   user storage then send it to the API or send to  database and I encrypt the password I'll check   if the is on indicated if the user does actually  have an account there but in such case I did not   add that here what we're doing here is if the data  the user session St is found there it me the user   is now registered as a user session then grab the  username and now assign the name as a claim type   of name for the username and assign the row as  the the row that is stored over here so if it is   an admin it's going to be admin if it is um user  going to be user but here what I didn't do here   is in case the person tries to edit this user  session storage edit the the user as admin here   is going to be assigned as an admin in such case  the person can see everything the ad is supposed   to see so what we're going to do here is maybe  later on we can just modify there you can even   modify it yourself you can just call the service  here and now passing this session storage and now   check if that username has that related role in  case it has it then keep on but in case it doesn't   then remove it and I tell the user to log in or  get the user actually R and assign it now after   doing that then we return this claim principle  because that is what we are creating over here   as a um claim principle to handle the type the  name and the row okay in case there there's an   error here it means something wents wrong then  return not authorized okay there's one method   that we need to create and that is known as the  update authentication State provider so in case   the user tries to log out what do I want to do  so in case you log out we want to check you say   we have to call this method this method has to  come in with the user assessing storage now it's   going to work in two ways first of all it's to be  assigned to the the session storage or it's going   to delete it from the session storage and it's  going to assign when the user logs in and it's   going to delay from the user logs out so what we  doing here is we create an object an instant of   this then if the S is coming here it is now see  remove it and now set this claim principle to an   any M but in case the user session here stored  here it is not now coming in here it means after   logging in they want to assign it to storage so  you want to save it to the session storage there   is a name and now there's a object Here and Now  create a principal here from this username and   I'll password as a claim principal okay good and  now if everything is done after doing this even   after log out or after logging in we have to  notify State change so we have to reload the   application so we do that by returning this  notified authentication State change so it's   going to notify this authentication here that  something happen so refresh yourself and I get   the current or updated data all right so  that's all authentication State going to   happen now when you go back to the client service  I believe all those errors are going to be solved   so control period click on this and I include  authentication State folder that we created all   right so everything is served over here now let's  save this the next thing that you're going to do   here is we have to register this into the program.  Cs file so we have to register the sessions St   you have also register this authentication State  Provider by creating a dependency injection okay   between the authentication State provider the  original one and on the fake one that we have created please if you like this video give me  a thumbs up to this video and if you haven't   subscribed please do that okay so let's let's  move on we go to the solution then program.   CS file and inside this program. CS file we  have to first register this um protected um   session storage okay so we can put it make  sure you put it before this app built okay   so put it beit here and now the next one is we  are going to create a dependency injection to   the fake um authentication State provider and  the original one so there's the original one   and there is a fake one so it may call this in  place of this anytime that you call this onate   provider please pleas provide this custom that we  created all right so this is now done let's save this all right so the next thing  that we going to do after doing this is we're going to create our registration page  first okay so let's first go in there and create   this component as registration component so  let's go to solution and now let's click on   pages so I click on this and I'll add a  new razor component and now the name is   going to be registration component so with  the registration component let me just grab   all this you know designing UI sucks so what  I'm going to do here is I have the code it's   available at the giab so please check the giab  but go I I'll just go through okay where you   know what this page is going to do so I'll just  space this here now from the start this what we   are doing is very simple thing that we are doing  over here so we see this is a route and now we   are injecting this GS R time and the service  that we created and notification manager so   for the design this is just a card with just  a background color this just for design that   you saw so let me open the picture here and you  can see we have this design border around okay   so you can decide to CH this to any one that you  want and now you can see here we using a gradient   so we have two colors that's the gradient that we  are using here all right so from the registration   we this a create an account we have a card over  here this is a card body create an account and   you can see we have this edit form we have this  data annotations and validation summary here and   in case I click on this handle this and this is  a object that we're going to use to to handle all   the process in here here now we see from here  that we have this is a company full name so   passing the name we using this SF test box okay  so this test box before we do this let's add the   name spaces so let's add the using statement  in let's import them so we can import them from this so I'm going to do something  like this one from this import so and   now let's add this users okay so we don't  have any problem so we adding this using   and now instead of this you're going  to copy this name and I replace this a   project name and now once you are done  we have to also register the same fing   component so we can do that by going  to the registration or the program. Cs file and here we can add this so simp  Blazer let's include that okay so let's   return to the import I believe we must also change this okay now when you go to registration  component you can see all of these are   going to be soloft have S test box we going to  use the numeric text box for the phone number   the text box also for the um the email address  okay and as you can see from here we these are   the binding so we are binding this the email  and then the type here is an email there is   a password and the type here is password there  is a confirmed password and then here can see we   buy to the confirm password all right now these  are the simping component that we are using here   now so see we are dividing this into row as you  can see we have a row Here and Now now we have   column md6 and there's also md6 we dividing the  whole page into two this for company information   so company name company address company location  and that's why we are buying them to company name   address and our location and now these are the  the same buttons and the testt box that we use   for same fion repeting them here as well now  you see from here that here we are uploading   company certificate okay so this certificate we  going to say that it's must be in a PDF format   so PDF format all right so here what you're  doing here is no one can just register just   like that before you register you must have uh  business certificate you must be um a leged right   so you you have to be an authenticated or um  authenticated or original company that you have   certificate business registration certificate  to have access to post job so to do that you   have to submit your certificate to us to verify  so we see we are accepting only PDF file here   and now if I if you click on this this is the  method to handle that and I here to upload your   company logo as well so you're accepting PNG  either in upper lower case jpg and also gpeg   so and create button is been here when it come  down here that is the method to handle so the   first thing is here we are creating this this is  the visibility set to Hidden now where from this   visibility this is a parameter and let's see if  there's any parameter receiving this all right so   here we are not using this this visibility is  supposed to be used inside the app bar so you   have a model created from registration model and  if if this button is clicked you say we want to   save it to a folder called Fast and there's a file  there's a foldo known as company certificate okay so you want to create the F name and create a  random um new um G ID so new G ID and now with   this G ID what you're doing here is you want  to add thisor to8 and I P the file name and   that's going to be the file name to save there's  a there's a path and here we are copying the file   to the folder all right so you have to create it  so when we go to ww folder you have to create a   folder called fast so ww over here right click  on this and I create a folder called Fast and   that is what you're going to handle all our data  our images and our PDF registration or business   registration we have to also create another folder  known as company's certificate so right click on   this then add in that folder and name this as  company certificate okay so if I upload F it's   going to lie there and I'll wait now to get the  name you can see we are getting the name which is   the the the GU ID and the file name we saw it over  as campany certificate name so we can EAS it to   store into the database and I want check here this  is for the logo we do the same thing over here and   I st to the logo so yes you have to um create  a folder called campign logos from this files   folder so this is a file we click on this let's  create another folder and that's for the logo so   we St them here and now if button is Click We call  we check if this company certificate name there   now me user hasn't uploaded anything yet display  this else display this that's for the registration   and now we can even call this okay so we can call  this before this navigation comes in we can call   this Here and Now display the message coming in so  this is the message and we can alert the message   here so by cing this you can p in the message here  all right and after registration you can set this   registration model to empty so registration model  and that's the registration model here so equal to new so when you do that we're going to clear all  the content that we have currently and I set this   to now and when you have the navigate you so  this is for the registration so naate to log   instead so after doing this you can just navigate  to log okay now once you've done with this we are   going to check here so this is for the an after  render this we don't this here because we are   not using this so let me clear this okay so here  it is we want to check when the page initializes   you want to check if the US is already already  registered and Tres to register again then if you   loging and try to register and want to access  this registration page it won't allow you so   we are saying that the user is authenticated  then navigate to this homepage so 100 times   you try or thousand time you try to access this  registration page as a registered member no you   directed to the hom page that's what this method  is doing so this method going to copy this to the   login page as well okay as soon as you log in  you're authenticated you can't log in again no   we not allowed all right so we now have this  so this is for registration and um let's close   them okay this is the method and I we have that  all right so this is now set now let's check the   login so the login is also very simple we have  to create a component known as login so let's   do that from the solution Explorer and from  this pages I click and now add component as login so with this login page what we are doing  here is we also creating a page whereby user can   provide username and password as well so that  is all this is doing and you you see this the   page is login and we need log in an account you  need the user email and the password and we need   the button which is type is submit okay we inject  the following r on top and now we have a username   and now the the email and the password so when  you see here to we making a check as I explained   earlier on making a check to see toir user  soon as they try to access a login page whilst   they authenticated if I click on login then call  this service if it successful the flag is going   to return a bullion so if it is true then return  this to the homepage but in case it is false then   I let the message that is coming in and I return  to the same login page okay now if everything is   set you want to create a app bar you know that  from here we can have the app bar and that is   an app bar there is a bar on top okay you have  the bar on top and when you check you can see   we have we also had the for inet and you have to  have this want the side bars here so to create   the the ab bar let's tackle the app bar first we  can create this app bar into the share folder or   any so let's go to the pages the same pages right  click and I'll add a new razor component and this   going to be the app bar component so from this  app bar component we want to have access to this   so there's an up bar the bar on top and we using  this SF up from the syn fusion okay and we have   this one for the net code up and this the spacer  to space it and shift this we have an input type   here for sets and now we bind the key here to  the set key okay and now the visibility here we   assign the key here varable to handle that we  have a button and this button has uh un click   event here okay now we also have the username as  hello welcome so you can see we have the hello   cast contest. user identity. name so hello then  add the name that is if it is author authorized   that when you're authenticated display the handle  post job if you want to post job you can do that   if you want to log out you can do that but if  you're not authenticated then you want to display   hello guest and now display this login and now  registered that is found in this not authorized   section okay now from this you have this CSS for  to handle the BN to make it around you can see   that the the feature that you have here you see  this is a round one with this that is what this   CSS is doing okay now this a set key okay so this  T key is What going to be used to search for the   filter now if it is now we are talking over here  that this search bar here it is hidden defaultly   when you click the bar is hidden to click on the  icon make this bar to visible so you can see it's   visible if you click on it again then make a set  navigate to this set page and I'm passing this   parameter the parameter here is a search key  so the search key here is going to be passed   as a parameter to this search page and as soon as  he gets to this search page it's going to um get   from the database and display Accord to the user  if I click on register navigate registration page   if I click on login navigate login page if I click  on log out then call this service and I navigate   to the homepage if I click on handle post they  navigate to this so here let's remove the async   so navigate you the post job so I can access all  this okay so I can access all this the the post   job here and I the log out when I am registered  when I am authenticated I can access this login   and register when I am not authenticated when  I'm just a guest or normal user all right so   we have this appar created now you have to also  create the fter so from this fter let's create a   fter component and add the fter so we do that from  here solution the same pages right click and I'll   add um razor components as fter component and now  within that fter component and here I'm not doing   anything here what I'm doing I'm just adding  just a bootstrap class bootstrap design here   so sign up for a news letter email and subscribe  button over here that is for the fter now we need   to also create the SE component so from the set  component let's create another razor component to   handle the set component so pages right click add  and our razor component the name here it is search   component now from this search component we are  going to have this so this is what we are doing   first of all you know we are acting a parameter  here so here this page is accepting a parameter   of filter as a string okay so with the string this  what we are doing we are including this you are   calling this client service we including this IGS  run time and now we including this the navigation   manager as well let me save this close this and  I see if that error is going to be solved so set   component yeah they are solved now so we see that  from here we making a loop out of this so get all   jobs making a loop and now we create a card we  display the title the company name we we using a badge this badge here it is for the bootstrap  so we use a bat here display the Campa location   the job title or the job mode either full time  or that's going to be the part time we haven't   set the full time the part time yet that's going  to happen when you click on post job okay now we   are checking if you convert this um salary to  decimal you convert it to decimal or to integer   and I'll check if they equal to zero it means  user did not specify the salary range then if   so display confidential but in case the values  are greater than zero both Max and our mean then   display the range in the same badge display um  function of the job then the job location so if   job location is not specified then display the  company location it means that the job location   is inside the same company location but could be  that the company could have could request an an   and and a worker for the the the Annex in such  case the job location has to be defined over   there in case they refuse to Define it means it is  the same company so use the same company location   here this a now Collis operator it means if it is  not now then or if it is now assign this value to   it and now you see from here we display the logo  the image here so we have to passing the source   as files Camp logos and I'm passing the current  iterated value right here Camp logo description as   well and now that is a the new so we add one month  to the date that it has here if it is greater than   today's date okay so if today may be third plus  one going to be next mon thir and next mon greater   than today it's going to be new until this date  reaches so as soon today's date is greater than   the the date here it means that new um flag the  new badge is over it's not new again it is old   and now here you see that here we are displaying  the we create over here to display the number of   days lasted so how many years how many months  how many weeks how many days even yesterday or   it's today and this is the method that we using so  we take for the years we get the whole we use the   time span to calculate for that we subtract the  start date from the end the start date is what   you have from database now the end date is today  so you subtract the start date from this end date   and get a number of days the number of days into  years conver them into month into weeks con them   into days and display them as well all right then  the next thing here it display the company address   company email and now here if it is featured  okay if it is featured that is ADR sign if Adra   has made it as featured um at then display this  logo or this D has featured this just a design   and now when you check this we have this feature  container that is this this fature container I   designed over here so we set transform we want  to rotate it this is the background color okay   so you can even remove the background color this  is the top and on the right position is absolute   we set the top and on the right here all right  now the next here you see we have the filter   specifi as the parameter coming in WEP the list  of job as get all job list now here on parameter   set as soon as the parameter changes that's the  filter changes you know this the route here it's   is like search that this parameter so filter so if  this default is now if it changes then this event   going to fire so this as this event fire check  if it is now then navigate to the homepage but   in case it is not now then get all jobs passing  the filter clear this job the current data and I   um look through the results coming in and I assign  it to the list that we have here aside from that   set filter to empty all right so anytime that you  call this filter this filter is going to be empty   you passing data it make a search after that  it returns empty as well all right so the next   thing that we're going to do after creating this  as we have this style here so supposed to clear one all right now once you have this the next  component that we need to do here is to create   our post add component and the index component  then we are done all right so we're going to   finish soon don't worry now let's do that  by creating this post ad component so post add so click on solution Explorer now pages  right click and now razor component and now   post add so this could be a component as well  now in this post add component what I going to   do there let's grab this and now the route here  it is post ad that is a route as what post add   over here and now here this we are specifying an  attribute of authorized as roles as admin so it   means admins and users can access this post ad  so if you not authorized you can have access to   this page okay then here we need the drop down so  this is a post ad we include our client service   here and the JavaScript run time as well now this  is a design as you know we've done earlier on and   now there is an edit form so edit form we need  a job timee we need job function description job   mode job mode is on the drop down so you can see  we using an SF drop down list here then we need   to populate this source as a data source as for  this job types we're going to do them down here   and now here let me just go through this for you  to see we have the value the bind value and these   are the bind values for each for job title job  function and the job description now we set this   multi line to through so this could be as a test  box area or test area also we specify this test   box here as the job location okay now aside  from that we can we create a different column   we specify the salary range this can be left for  confidentiality okay so minimum the maximum they   are numeric text box so you can decide to pass  a number decide to do remove it you can to also   pass in the format so let's say the format could  be the dollar symbol also so here let's see can   pass in format all right so you see have format  and can pass in C2 as the the dollar sign so format and this could be C2 all right and we see  from here that let's see do you have the input   um type here we do not have the type specified so  there's no type specified yeah there's no type so   when you make the format it's going to work you  understand what we need okay so and we have the   button as post job now when it come down here  we have the same authenticated State provider   uh stated or specified here now here we are  populating the job type you see we are creating   a list of job mode this job mode is a mode that  we created earlier on from this this is a get U   job mode that is this one it has only the ID and  the name so we specify the ID and the name path   time and the full time when the page loads you see  we're doing that in this live cycle method that's   initialize when the page initializes we populate  this assigned to this job types and on this job   type going to Loop it through this ex drop down  once you have the drop down list to select as soon   as you make any selection this event get fired on  value change and on un value change we have this   on value change we specify the job mode to this  value remember the value here it is what the value   here is the name when you check the job mode here  you have the name over here so it means you want   to get the name itself not the ID all right so as  soon as it is done then call this service if here   we are saying that if the US not authenticated  okay it is not authenticated then do the service   call this return it and now post job we see if  it is true then display this message as posted   if it is false do that and now clear the content  of the current um mod that we have this going to   work only when the US is authenticated if it is  not you click on the post ad nothing will happen   so we have done with that the last one you have  to do here is the index so the index here is going   to handle all the the views handle everything  as soon the person lock lock the application   or um open the application you have to do that so  let go to this index here period let me paste all this now with what we have here if you check  here is the same thing as we did in the set okay   the SE has to display everything and the index  display everything so you can see from here that   we inject our client service and now we inject our  JavaScript this a design now this is for all job   so you see from here we create a list of data then  we going to use the skape value and the T value   we're going to use an XF pager to handle that okay  so we have to look through this list and I display   them over here as you can see from the sech  component that the same thing that we are doing   so I won go through again because I have the same  thing over there and now the same thing repeated   here okay so when you have that and now this is  the feature job as you can see from the sech we   have the same thing this F here and this also the  same um CSS now what we need to do here it is this   this is an self pager and now this just for for  the navigation it's a s fation pag so you specify   the page size as two so any time you click on the  next display two page numer count is four so from   1 2 3 4 display that now the total item count has  to get the total list of the all job that we have   here do count and now if item is Click when 1 2 3  4 is clicked what you want to do so what this what   you want to do here create an inance of this page  skip value here and I take value is two so take   two at any time the click is made then when the  click is made this going to give us the current   page and the page size or the previous one so the  skip value and the take values over here which   going to calculate and get current the next data  from the all job list and that's all going to be   used to assign over here to look through from this  list data all right so anytime a click is made two   data is going to be popped up because yeah specify  that the number of data that you need to take here   it is two you can increase it to 10 12 14 any  number that you want okay and now here this is   get all job so as as the page loads you know is an  initialized async get all job Lo through the job   and I add it to this all jobs list display them  over here all right so we are done with everything   what I'm going to do here is let's build this  project again and I run it and see if everything   is working as expected but hey don't forget  I always forget this let's go to the host and   I'll try to include the S CSS andso the um script  file over there so host and now let's include them here yes okay so we have this set and I that's all  yeah so let's save this I'm going to clear   everything from here close all tabs solution  right click build solution or build the project all right so you can see that  it successfully built now let's run   this application and see so let me see  if the browser chosen is uh Microsoft   Edge on use that so let's click on this to  run this application and see what we have now okay so it is saying that they cannot  provide a value type for service there's   no registered service for this I service yet  we did not create di dependency injection so   let's do that uh we go to the projects again  and let's check solution Explorer let's first   check the index and see what it requir  so there's a client service and need to   be injected so we can do that from the program  section and as we injected the authentication   State provider we must also do same so we do  that from this program and now before this   app build iow to put that on first here then  you see so control period let's include the references no let's see so I CL service I think what is wrong  here let's check it out so we have page let's try to add it ourself and   see so [Music] using and here  it is Blazer server do data. services so that is where this is  found right but let's see what it's saying let's check it over here so let's quickly check from the data services the interface now let's SE for the client service okay so here this has to  inherit from this I client service   okay let's save this and now let's restart  the application rebuild it and I restart and see so it is building about here and  now let's wait if it makes successful so it is loading on our Port of 7006 all right so we have this all right so we did  not create our featured component and our sidebar   and also the main layout we did not tackle that  all right remember now let's do that so we have   our featured component let's do that to handle  the featured one you know when you check the IM   you see you have this and you have the sidebar  so let's handle those so let's stop this and now   let's go to solution and the same Pages where  click let's add the featured component now from   this featured component we want to grab all list  so we can see from here that we are calling the   same service here and the same design you can  see from here we using SF codon and here we get   all jobs and from this all jobs we are getting all  jobs as you can see we get all jobs here now with   this all job that we get we are making a search  although we can specify this feature inside the   service and call in order not to call all the  job here okay but since I have um not enough   few data or small data here that is why I'm using  this method approach so you can see that we are   looking through all jobs where featured is through  so this is going to get us only jobs which have   featured ENT specified or set to through use an  accordion and I'm creating a Content template and   I'm passing the description and I add the job  title so see you see the job title here is a   reference BTN link I click on it it has navigate  to the search component you know this search   component require a filter so passing the title  here since pass the title here it's going to make   a search from the on parameter set asnc get a data  and display it on the screen for us all right so   we have this now the next thing that we're going  to do here is we have this and we need to create   this nav menu right so the nav menu is what we  have there already but I'm going to modify this   to see what you want okay so you know from this  nav menu solution you can see have go to to the   set we have this nav menu over here now this nav  menu I'm going to add I did not you can see I am   just making a duplicate of this I could have added  this to database and I look through and I get them   but here I I'm not creating any data specifically  to any of this I just decided to brought them for   you to see that you can also add um um categories  to it okay so you can also add them by doing this   and you see you do the same thing design over  on top here and we have the same n men can see   from the default one and you can see the same  thing applies to the default one so nothing   different nothing much it is just that you making  duplicate and I'm getting them here and it seems   I just remove one top header and I maintain this  all right so now the last thing to do is let's go   to the main layout and now the main layout we're  going to make a sech over there not a sech we're   going to make a change in there so main layout  solution all right and now here there's our main   layout so instead of this I'm going to replace  it with this one okay so the page title is job   title I can even add net Cod job title and now  you see we using this abar component we using   this feature job component and we using this fot  component here you see we are calling a row here   and now you you see we using this column XL to  md3 so 3 + 9 making 12 right so 3 + making 12   here and now when it is this here we making also  um three here so if a column Medium you're going   to have this three this n and this three okay  if it is column large you're going to have two   8 making 10 and two right so making 12 all right  so here could be this is six and here could be   six TR any how you want it to be you can do  like that all right so that's what we have   and now let's include this let's include all the  pages and the F here it is the md12 so that is a   whole page that we have here so let's save this  and now let's run this application and I believe   for now there won't be any any issue again  we have an error let's check out the ER and see so yeah it is inherited twice save this and do it again I believe everything going to work so  I could I could say that we almost at the end   of the the video and if you know this video is  very helpful to you please give me a thumbs up   as well if you haven't subscribed you can do  that and when that when you give me a thumbs   up when you also subscribe it actually help  this channel a lot cuz very important your   like and your subscription is very important  all right so you can see we also have invite   operation authorization requires a cascading  parameter of a task yeah it seems like today   I'm forgetting some things up let's see we have  to so do that unless it tell me for me to and   it remembers me let's go to the app. Razer and  at the app. Riser we need to suround the route   there with the cascading authentication State  provider yeah I I forgot this so let's see when   go back to this app. Razer so everything here  you can see there is an router and I'm going   to clear this and suround it with the cascading  authenication State provider you can see that   have over here and we have that over here as  well you have an authorized not authorized it   means you're not authorized and if authorized  if it is authorizing rece please wait whilst   you authenticated or you're authenticating any  any any any right so so you can even add please   wait you can even add three dot one two three yeah  you can add this side please with whil you being   authenticated and now if it is authorized you're  not authorized see it tells you that you're not   authorized I believe this be the last problem  for us to solve right now let's let's let's see so here you know we have the the out on top  but since we are not having a license key you see   we not having can't see this what I'm going to do  here is I have a l key so I'm going to just add   it okay so if you don't have it can just I have  I'll leave a link to the description check it how   to claim a free commun license key for SN fion and  just watch that video and I get your own Community   license for free and I include that so when you  have the license key you have to put it under the   the the program.cs file so when you check that  video you know you understand how to do that let   me add my own LC key for you to know all right  so you can see from here that that uh Lis issue   is gone so as soon as I click on this let's see  you can see I have this drop down over here and   I can just um type in anything that I want as  well okay I have this log have the registration   this is for the guest and you can see login I  click on log I have to get the login page right   that's the login page register have to get the  registration page as well and I have to provide   other the stops as well so let's quickly test  with one and see so here I'm going to say this is test all right so company there's the number   email let's use this email  password so here let's use the admin okay so let's use admin password  1 2 3 4 5 same thing 1 2 3 4 5 then   company email as fed company address  Ghana location GH now here can again   let's upload certificate so let's  upload this and now let's click on upload let's upload the let's  say this an logo so let's upload this uploaded let's create an account so click on  create an account and see account created so as   soon as I click on okay you can see it navigate  as to the login and I can now log in as an admin so you see as soon as i l as admin we  see I have this button manage client right so   here I haven't implemented this one but maybe  you can actually do it now can see I have post   job so now let's post one job and see so  job title is job title let's say [Music] function let's use a sample one maybe the  same account and administrator that's for   job title job function account and financing  for job type function and maybe if from job description we can use job description here and the job type is you have a drop down so  fulltime job location you can choose or specify   job location that you want then amount here you  not specifying any amount so if I click on post   job you can see job posted and you can see so  let's go to the homepage and can see the job has   been posted see that an account and administrator  feature job is empty and let's see you see that   is new because it's posted today we have only one  out of one item now let's go to database and now   let's click on jobs we have one job and now for  feature let's send this feature to one that is true now WR changes and now refresh this  and what your happens to this feature job   this account administrator going to be over  here as as I click on it you can see I have   the the description over here and I have read  more so if you click on read more it opens up   to you to the page and where you can actually  view everything you see it is coming to the   search and I passing the route right here and  now you can see everything as well if you click   on homepage it navigates to your homepage and you  have the default one specified and you have this   featured icon or featured design attached to your  job that is it for this video thank you so much   for watching this video and if you like what I'm  doing please subscribe to the channel as well and   give me a thumbs up too and I believe I'm going  to catch up next time thank you and take care

Channel: Netcode-Hub

Views: 1,156

Keywords: .NET, Blazor, Web, App, SQLite, Syncfusion, Components, Job, Portal, Magic, Crafting, Development, C#, Tutorial, Guide, Step by Step, How to, Learn, Setup, Create, Build, Deploy, Publish, Host, Backend, Frontend, Client, Server, Application, WebAssembly, Core-Hosted, Razor, Component, Communication, Data, State, Management, Storage, Sharing, Transfer, Passing, Sending, Receiving, Handling, Manipulating, Updating, Changing, Modifying, Altering, Transforming, Converting, Processing, Accessing, Retrieving, Displaying, Rendering, Showing, Hiding

Id: CuwKAOnJHi4

Length: 104min 13sec (6253 seconds)

Published: Thu Oct 05 2023