Firebase Web App Tutorial 06 - Create Mainpage & Firebase Logout - Firebase Web CRUD

hello guys welcome to Corinne cafe my name is Mohammad Ali and as you remember we have completed our sign-in I mean using the fire of s now in this tutorial we complete I mean you will allow you to register using the fire bath authentication but before doing the signup process one thing which we need to do is to create a home page and add a logout button there so that the user can first logout from the app and then he will allow user to sign up okay so yeah I mean come here I mean what do you do for and checked and one thing which I need to mention here is that here you can see we have add this that is if the user is logged in that is if the user is authenticated then we are sending the user to the home page and on the home page here we say that is if the user is not ready for that right here these exclamation marks which means not if not user fee is not authenticated I mean if he is not locked in then we are going to send the user to the sign-in dot HTML page now what we gonna do is that's on our home page let's design our dispatch quickly so just for the time saving let's just compare these I mean this hat from here copy it and just come here to the home and replace this with the word this hat okay and change the soup now what we gonna do is instead of calling this home we are going to give this name let's name this as men okay main page dot HTML then page dot HTML okay let's do it man okay this is our main page and also we can send the user to sign in and on the sign-in make sure to change this okay we'll use our main page so we can say man page make sure to do these changes okay because home page is our other edge which we will create and there's our main page after the new user is login you'll send the user will use the app so anyways now what gonna we do next is so just like you guys see a toolbar in Android application we are going to the navbar okay and on that name body you will have a drop-down which will have options and inside that we will add our logo button and then we will have some nav buttons which is home my blogs and all these stuffs so I mean here we move this h1 tag and there's our body erect a class class H minus 100 and then you can say nav class navbar you know for - expand - LG - start background with the dot for it and text will be white so we said Tess white then we plus equals to container - food you will let's add a class to it which will be our now our nav bar - there now let's add our first item plate which will be basically you can say a logo to our app so how we can do this you can just write Li which means list item and then within say class you want to make this active I mean so that it can blow all the hell back on the screen active then we have to add our first anchor you can say what first laid eyes on will be block app then this will be basically be title you can say and we can say class now for the brand and if you want you can add some styling to it is the color white smoke semicolon here and then let's add our text decoration - style : baby then make sure to put a semicolon here at the end now inside the roughs you can pass the link I mean click on this then where you basically want to send the user so you can send the user to the home page which you will create later but now let's replace a red hash which means do nothing now let's add our another item so just copy this one test and then bastard here voice so the second one will be home and the third one will be my blog that is gonna user click on it we will display to the user it's his own blogs so now make sure to change this friend to link also for this one and just I mean we are displaying it not like this I mean let Sarah spend so that it can little bit looks beautiful you can say so yeah here we can give it class to it but I mean there is no you dope it we just need to add some color to it so let's have style color color will be white and then here we can say oh and also let's go past this and replace here with this one changes to my blogs now after this you will let's add our drop-down bar at the right side of the page like let's say this our web page of it in here I hope you have watched the introductory video for this 5s web series I hope you have seen it ok so yeah just remember that in your mind and let's first let's close this because most of time I forgot to write the ending div ok so div and let's class so the class will be as I told you drop down and now burn - right and then in here we can add a button let's give I do to it but since we do not need this button to perform any operation we just want that when the click and basically let me tell you this is our options button on which a user will basically kick let me direct it quickly on which a user will click and a drop-down list will appear in which you will have local button you can add more buttons like whatever you want so I mean there is no need to give ID to it so just add a class for styling beauty and beauty and a slight drop down - toggle vu - dark text - white now just to make cleaner I let's move this to the next line and then we let's set a type to it so type is usual button that puffle broke down I a fish yes papa has Papa true and expanded to true we do not want you to expand it so let's change it to false so options and now we have to add our button to inside I mean option we should be layer logo button so to add this after this button you can either do and then class drop down drop down menu they are in ash leveled by you okay here we will need basically ID okay so what we gonna do I mean we have to add ID to over this button so let's give it ID so we can say option - IV okay and just copy this option ID and it must be label by option ID and yeah now let's add inside this cube we can finally add our logout so we can say log out then here you can say class equals to drop down - item and let's give ID to it because meaning it click on it so beauty and logout and in December you can add further I mean in the drop-down list if you want but we just found this logo button from the drop-down so we just add this logout so yeah lets yourself this and we can see the result there basically what we got on the screen so it is running now and the name is basically your main page so main page dot HTML and basically we are locked out okay so let me login again so let's click on it and here you can see we are on the main page but the design looks a little bit I mean this is not cool we have cleared and also this options drop-down list is not working if you click on it so anyways let's I mean I have we have to check something and also we need to add depth basically which we will use for our home and home and my blogs okay we create some views or some pages for both of these in if you will display it so for that what we wanna do is after this div but let me check one thing I mean before doing this you have to make our design aligned okay we cannot move ahead I mean it will not be a good idea so here you can see we have class active blogger and I forgot to remove this remove this class active from the home also from here and let's serve this and check it so yeah I mean let's read this one class now we can add another div inside here Oh - ji call - Algeria 0b - second now another minus 12 plus equals to Santana and that's you I do to it because by this I mean when we will be displaying and we will set the use the home and my blogs go to our this main page so anyways I mean there's something which is related to the I mean in the next video basically we will display our post using this and you guys just let it I mean we have to make our design aligned okay so here let's do it now one thing which I need to mention here is first of all as you know that these material icons and style.css gives not blocks to this page so remove these two okay because we are purely using the bootstrap and jQuery which we are getting online I mean from the other side so there so let's switch cause it will mix the classic classes then okay let's save it and here you can see it is okay now so now what I'm going to do is just this one link which is for including the bootstrap okay whenever we use bootstrap then we use these bootstrap dortmund or Jess and bootstrap got men dot she says this what CSS is for the bootstrap I mean overall and this one is for the jQuery okay so I for to mention all of these three links also make sure to copy paste this link okay who stabbed that MnDOT yes in this one copy it and come here to the sign in page and tested alongside with these two other links which we added earlier okay so that our goose trap thing is completed MnDOT yes jQuery and then we have booster brought MnDOT CSS so yeah that's it no also on the signup page let's just paste it here also quickly okay which is min dot CSS this one is for jQuery and this one is jam in dot J's so that's it now you can serve it and then we have this one okay I'm really sorry for this I mean this is Nev - link okay not never remove this bar from it Nev - pink now let's save it and refresh the page so here you can see I mean this is so cool blogger for my blogs now it is totally aligned and it is working really nice so yeah that is so cool now let's just decode for the log out so make sure to check their ID it is beauty and logout okay so go to the index gorgeous and for the time saving I am going to copy this copy this bastard here and remove the whole board from inside this remove this okay and make sure to change the ID with our beauty n - logout you can log out now let's write the code for the sign out so it is so simple I mean are you gonna just to write 5 s dot dot sign out that's it oh yeah everything is okay now let's save all and let me tell you I mean before testing yeah now make sure that you test the app on any authentic browser like Google Chrome Opera or the Firefox okay do not test the app on any third class browser because that browsers have no support for the html5 or strip okay and it will not work I mean so make sure to use authentic browser like pair of Firefox or Google Chrome okay so I'm going to test my app on a pair a browser okay so yeah I mean let's write me the localhost at 0 0 and what I'm going to do is I'm going to sign in dot html' now I will show you that how basically it works so you can see if you are logged in sorry we have on the login page let me write the email password let's click on login and here you can see we are on the main page now what I am going to do is I'm going to right here sign in ok from the search bar if I click I mean right sign in dot html' and press enter here you can see automatically send us to the home page ok here we can see you if we write it sign in dot html' because we are now already logged in so we will click on this logout button only then we will be logout from here so I'm going to click on logout and here you can see now I am on the sign-in page if I click here on I mean if I write here I mean if I want to go to the main page ok dot HTML and press ENTER then here you can see it not allow us to go to the main page so it just like I mean it is basically the authentic way so it is just like working just like you guys see in Facebook or other social networking apps in which basically we it basically do the user authentication so firebase is really cool I mean it forwards a very unique authentication so that the user can have access to your data and nobody else can access their data okay only the user who has their account that is the password and email only then he only that use of these evil basically to go to the main page and update vlogs or of their post so I mean that is so cool that is so nice so yeah that's it for this video and in the next video tutorial you will be working on our sign up page take care of yourself and bye for now

Channel: Muhammad Ali's Coding Cafe

Views: 8,298

Keywords: firebase signout, firebase sign out, firebase logout function, firebase logout, dropdown list in bootstrap, web scraper drop down list, firebase web tutorial, firebase web app tutorial, firebase web, firebase web crud, firebase web app, firebase web tutorial for beginners, firebase web hosting, firebase admin panel, firebase admin panel android, firebase admin sdk nodejs, firebase admin sdk, firebase admin, firebase admin node js example, firebase admin dashboard

Id: mBh3HZaC_qo

Length: 23min 2sec (1382 seconds)

Published: Mon Jul 22 2019