ASP.NET CORE MVC | Admin Dashboard Page Design & Controller - How to Create an Admin Dashboard #94

hello everybody Welcome to my channel in this video I am going to start design our dashboard Pages uh which is going to be the admin the first one so let's start our application first and see what kind of information we can present demonstrate our users let's log in five password one to start start here we go let's go admin so yeah this is our dashboard and we we have a limited option to show um to show information about our admin user we can give them count of actually how many service we have how many team member we have how many testimon have been done by the uh user we can show we can show all of them we can show all of them uh to our um to our admin in our dashboard all right let's have a look our template is there anything useful here admin where is the index here we go let's weave in browser all right we have these cards we can use these car guys okay sales today Revenue these mods okay I'm going to have a look quickly these cards contrl F sales yeah these these are our cards I'm going to take all of them and have a look quickly How can I I make them much more um useful these are reports recent sales top selling all right I'm going to um I'm going to take them all I guess what if I have all of them no I'm just going to have this eight pieces column yeah I can at our row later but let's take let's take with the section and de and customer card and I'm going to add the rest of them later contrl C now let's go our admin page no not that one sorry bro controllers not controllers area admin with dashboard yep let's delete it and paste okay let's go upside obviously we're going to get some errors yeah because we didn't close our divisions our Dives let's try to organize them let's close all of them step by step yep one two three yep the last one is section right section done control KD and all gone all right so what we have now I'm going to make it should I do yeah call large eight no I'm going to delete it we don't need it I'm going to use all all the line Yep this is row and there are X4 medium 6 X4 medium 6 x Forge and Y X2 it's really interesting I'm going to make all of them same medium six but ex large po po po yeah is 12 no wor let's keep it like this let's have a look the design first and then we can continue to fill the information with it I think yes yes perfect free card is here now so what about using three instead of four it's little bit too much so H how many card am I going to use about homepage not about an homepage I need Services team testimonals category portfolio and user list so I got six different cards so it's going to be enough yeah I'm going to use four and two line it's going to make six different cards let's try to design our cards now um all right let's see how I look now so I am going to bring those informations from different um Services let's go to controller first let's let's go the dashboard controller so I got Services right so I am going to six different Service uh should I'm just thinking loudly I'm going to bring six different service here should I do this or should I create another dashboard service and I can create my services in them yeah I think it's much more useful let's go first all right let's go the service line first and create a new service which is going to be dashboard service because I don't want to implement six different service in One controller I'm going to create another service here and it is much more easy to uh um manage our dashboard methods dashboard service control RG let's make it public and let's create a interface here no class is going to be interface I dashboard service RG public let's go to service now let's Implement our interface all right so what kind of information do we need um we going to bring our repositor here and we're going to get all six services and we need count so we need a number so return value it must be an integer right okay let's go back here let's task integers um get all let's see the what kind of information we need service team I'm going to bring it like this okay get all service Services count Asic so we get we need six of them all right so team decimal category team test monal category it's testimonial but I used old methods in tes mod I'm just keeping the same category Services get all no not get all services get all sorry my bad get all team teams testimonals and here categories portfolios users all right let's save it let's go back to are oops sorry guys yeah okay let's go back our services yeah let's control Dot and Implement interfaces now let's bring our repository I mean unitor for private we don't need i unit of work unit of work let's Implement in uh sorry let's generate constructure so do we need mappers we are returning integer right all right we don't need we actually let me think about it do I need a mapping here I don't think so if it's if if we going to need it we can bring it back bring it whenever we want okay let's try to get our categories now get cator count AIT unit of work. get generic repository so what we need here um category right category dot get all anti the list which one do we need all we need is the numbers how many if if I get this is there any count yeah we have count here no there is no aing just count all right so what the problem here now H this airable this is iable to list async do count no there is no count here so if what if if I do count first and to there is no to list H maybe we can go our we can go our generic repository and oh this is the unit of work those the section let's get our generic repository maybe we can create counting method let's try public async task the return value is integer get all count and the return must be a wait DB set count async what do you think uh guys is it going to be work DB set is yeah our table do count so it's telling us how many data in that table okay let's try this section I am going to copy this section to the abstruct site all right let's save it our Command is now Implement implemented this is dashboard service and I'm am going to get all count yeah must be work now um return category count before starting our project I would like to try this method first let's let's finish let's finish them all and we can try doesn't matter I'm just we just going to copy and paste all of them here and we're going to change the names category count this is portfolio this is service this one is team this one is testal users let's copy all of them all right now portfol portfolio portfolio what's the problem here get gener get all count asyn yeah the problem is asyn yeah hold done okay portfolio now service team testimonal users do we have any user no we don't have any user so I'm going to make it m user we don't have any it's it's not going to work with it okay for the user we're going to use something different let's add private we don't need user manager app user let's add this in our where is the parameters yeah all right let's change it user manager dot let's type count there is no count user get user ID name no get users what about users count yep is it working no let's make it to list let's make it count again so it's it returns in it returns int actually it's it must be work work is the problem with the weight H it's not ASN so it works without async so this is not um I'm going to make it just white not white sry just in all right perfect let's change our service with it oh well we get our users as well control RG let's now go back our dashboard controllers sorry private read only I dashboard service s our controller now we got our controller perfect and now we have our information here we need to put those information in the list and send it to the vi so let's try to do it now okay all right uh um let's bring all of them first for um you um let's start with the same order service team testal service o sorry yeah get all service count Asing now change them all team what was order team tmal category category portfolio and users all right let's make it R with the task what happened yeah sorry my bad all right perfect before send passing these information over our we I would like to try if they are working or not first of all let's start our application oh sorry I would like I should have done with the debug mode wait a little bit [Music] more let's close it let's try to open with debu mode okay let's go to loog for login five password one to St star let's go to dashboard and we are in let's have a look now what's happening oh let's stop save it with solution yeah try to open one more time if we get the same error again I'm going to close application and start over again see it's 23 minutes hopefully we going to finish [Music] soon five password one to start St let's go dashboard we are in now disable H reload no it's working yeah perfect service count is free team free tmal free category free portfolio free all of them is free the user is free all of them free guys free person free free all of them okay no worries at least we know them they are work working let's stop it now and we need to send them to our um weave so what if I assign those information directly to vack let's try vack dot the name is services yeah I'm going to change it oh all of them become Services contrl z z z contrl z you're going to kill me all right let's change it to what happened all right I understand now why all of them is three because we did all of them three okay just change them all get all services get all team get all test maybe you recognize it but I I didn't see that we're going to try one more time and I finished our vbucks get all categories get all portfolios and get all users what's the name of get all users count Bing what's the problem then here get all users count iing let's delete it get all now we don't have any weit in this section that's we got an problem here let's copy paste paste okay now teams testimonals categories portfolios users all right we got our informations and let's go our view section now here area admin here we go so let's add three more card let's close them all control KD yeah all right this is our first card this is drop down item I'm not going to use any drop- down items then I'm going to delete this section this is drop down section I'm going to delete all of them yeah I don't need it so this is cart info cart sales card C uh yeah card title sales today okay the first information is service Services all time yep chart it's using chart and yeah this is this number is comes from our weback DOT services and we going to change the icons but I'm I'm going to change them later all right let's implement the information and clear our card words and we will change the designs step by step later the second one is teams team members all time Yep this is the our weback section teams perfect sorry my bad this one yeah short one is delete the filters ton all time we back DOT test mons yep category portfolio user category portfolio user categories all time categories yep portfolios all time at we do portfolios minimize it let's delete the filters right V Dot users yep user portfolio category all right anything else all right let's see how they look like and then we can change the icons the colors and the other things step by step guys uh and let's disable this breakpoint it's already gone okay where is the test this I'm I'm going to change this email address I'm changing all the time to two 2 to5 password one to start start yep as you can see guys we have all informations here but it's really interesting all of the mystery right let's have a check free service free member free tmal free category free portfolio and free user no no problem it's a coincidence but it's no problem we got everything what we need here yeah okay let's change the icons and let's change this person and increase and we can change for example free services free team members free testimonals like that one okay all right let's get back our project now let's have a look much more deeply so I don't need should I need let me have a look free services has been done H let's change this section um have I look again o sorry free I'm going to just use this muted text so I'm going to cancel that section I'm not going to use section Class M to small increase and I'm going to change it available services and let's go step by step let's delete this pan again the second one is team members available team members and [Music] tests have been d or just is done or testimonal we have yeah so this is categories different categories we have okay go back go move on 8 6 10 150 um portfolios we have the customers [Music] customer um worked with us okay now let's see one more time of course it's not going to work let's we browser there is a third party Library guys if I remember correctly if you load it you can use hot reload whenever you want okay free test mod we have free customer work with us free portfolios we have it's working no problem now let's change the icons for that one let's go to bootstop mate uh sorry bootstop website icons so what kind of Icon do we need uh service members testimon okay let's type service here now let type edit me no nothing here let's manually go down for services just say settings yeah I'm going to use this ge BBG Okay contrl C and let's change this icon where is the [Music] icon yep control V oh keep it now the second one is team member I'm going to use people for here yeah it's done but about testimonals let's go back chat yeah I can use I can use this one or which one is better yeah let's use that one contrl C all right let's continue with the this one is category right let's go back to settings again or is there any category let's have a look category those category I can use this one it it seems kind of category control V the other one is portfolio let's go back put nothing here picture yeah I can use that one I guess at the end of the day portfolio becoming from pictures right so I can use that one but this is customers okay we need to use human figure again but something different with the people because we already use for team members type customers nothing okay person person is there any yeah I'm going to use this one it's a little bit more different where is the icon where is the icon yep here we go don't TR we all right let's save it and try to see one more time in the meantime how many minutes it's 41 minutes it's too much all right it's almost done let's finish this section as well okay Services team remember testal category portfolio and customers perfect it's working anything should we do um by the way you can change the colors if you would like to change the colors guys different color as you can see this is sales car right we can go our CSS file for the admin asset CSS let's find sales card as you can see all card section here let's copy we can change the names by the way contrl v contrl v just say new card and you can change the color and background colors for example example Indigo yeah let's change with the to this color let's save it I'm not going to change them all because we already 45 minutes I'm just going to change one of them so we add a new color right which is new card let's check change fourth one with the new card okay let's save it and let's try to see if it's working with me browser it didn't work let's have a quick look why it's not working let's come back again our CS CSS file anything else card icon new card card icon all right let's have a look quickly new card where's our icon card icon yep everything is all right R new [Music] card anything relevant with the sales card no I I only need the card this is just one okay the color is the name is new card did I save it let's try one more time no we saved it but it's not working all right let's try to use another different colors select this one we browser no it's not working let me look again my index is new card right oh it's info card new card did I do something wrong that look at again custom card H oh sorry my bad I guess there is another connection with the cards for example let's have a card profile card is there really just cart info let's have a look info cart yeah there is info card section here as well um dashboard card icon yeah this is info cart guys it's almost 46 minutes I'm going to I would like to leave it here let's delete new card uh maybe there is another connection between the other classes I'm going to have a look for uh later time when it comes to the user dashboard I will inform you if I figure that uh now I'm going to finish this sess here is 46 minutes the 9 98 of admin dashboard is finished this 2% will be done later guys okay take care yourself uh see you on next lesson bye-bye

Channel: ByteVerse

Views: 1,153

Keywords: ASP.NET Core, MVC, Admin Dashboard Design, Controller Implementations, Programming Tutorial, Web Development, Developer Guide, UI/UX Design, Administrative Tasks, Centralized Hub

Id: cg46bRrHo8E

Length: 46min 41sec (2801 seconds)

Published: Tue Dec 26 2023