ASP.NET - MVC - Core - Responsive Web Design - Lecture 17: BootStrap Integration & Full Tutorial P3

[FurkanGozukara]

ASP.NET - MVC - Core - Responsive Web Design - Lecture 17: BootStrap Integration & Full Tutorial P3

Full tutorial: https://www.youtube.com/watch?v=iIsy8S_UO8k

#SoftwareDevelopment #Software #Engineering #CSharp #Coding #Course

Asp.NET Core V5 - MVC Pattern - Bootstrap V5 - Responsive Web #Programming with C# Full Course Playlist : https://www.youtube.com/playlist?list=PL_pbwdIyffsnAWtgk4ja3HN3xgMKF7BOE

GitHub repository of the course : https://github.com/FurkanGozukara/Responsive-Web-Design-With-ASP.NET-5-and-MVC-Pattern-and-BootStrap-5-2021

Discord channel link of the course : https://discord.gg/6Mrb8MwteQ

How to use Discord : https://youtu.be/AEwPtYiLvsQ

*** In Lecture 17: ***

• What are Popovers and how to initialize them and dismiss them with different ways

• Progress bars, Progress, Labels, height, width, Backgrounds, Multiple bars , Striped bar, Animated stripes

• What is Scrollspy, How it works, Example in navbar, Example with nested nav, Example with list-group, position relative requirement

• Spinners, Border spinner, Colored spinners, Growing spinner, Alignment, Margin, Placement, Floats, Text align and Size of spinners, spinners inside Buttons

• Toasts, Examples, Live demo, Translucent, Stacking, Color schemes, Placement

• Tooltips, Example: Enable tooltips everywhere, Examples, Usage, activation, Markup, Options

• Helpers in Bootstrap 5 : Clearfix, Colored links, ratio, aspect ratios

• Position, Fixed top, Fixed bottom, Sticky top, Responsive sticky top, Visually hidden

• Stretched link, Text truncation

• background colors and Background gradient

• borders border size border width border color

• colors and text colors

• Display in print

• Interactions, Text selection, Pointer events

• Shadows, box shadow

• Sizing,Relative to the parent, Relative to the viewport

• Spacing, margin, padding, gap

• Text, Text alignment, Text wrapping and overflow, Word break, Text transform, Font size, Font weight and italics, Monospace, line height, Reset color, Text decoration

• Vertical alignment

• Display none takes no space in browser flow however visibility invisible takes space but not visible

• How to design a custom authentication and login system with using session set string get string and serialize deserialize object methodoloy

Please subscribe and make comments.

This course requires fundamental knowledge about programming and C#. So please watch our below playlists related to C#.

Our courses playlists are like below:

[1] Introduction to Programming Full Course with C# playlist : https://www.youtube.com/playlist?list=PL_pbwdIyffskoSXySh0MdiayPJsBZ7m2o

[2] Advanced #Programming with C# Full Course Playlist : https://www.youtube.com/playlist?list=PL_pbwdIyffslHaBdS3RUW26RKzSjkl8m4

[3] Object Oriented Programming Full Course with C# playlist : https://www.youtube.com/playlist?list=PL_pbwdIyffsnH3XJb66FDIHh1yHwWC26I

[4] Asp.NET Core V5 - MVC Pattern - Bootstrap V5 - Responsive Web #Programming with C# Full Course Playlist : https://www.youtube.com/playlist?list=PL_pbwdIyffsnAWtgk4ja3HN3xgMKF7BOE

[5] Artificial Intelligence (AI) and Machine Learning (ML) Full Course with C# Examples playlist: https://www.youtube.com/playlist?list=PL_pbwdIyffskVschrADCL6KEnL_nqDtgD

[6] Software Engineering Full Course playlist : https://www.youtube.com/playlist?list=PL_pbwdIyffslgxMVyXhnHiSn_EWTvx1G-

[7] Security of Information Systems Full Course playlist : https://www.youtube.com/playlist?list=PL_pbwdIyffslM_o92NwkaUzD7C6Fekx26

[8] (Turkish) Bilgisayar Becerileri Tam Ders playlist : https://www.youtube.com/playlist?list=PL_pbwdIyffsmyE2e909ea1MXLcMb8MenG

auto subtitle timing : NA

Video Transcription

• 00:00:02 hello dear students welcome to the lecture 17 of responsive web design with

• 00:00:05 lecture 17 of responsive web design with asp.net 5 and then we see pattern and

• 00:00:07 asp.net 5 and then we see pattern and bootstrap 5.

• 00:00:08 bootstrap 5. uh so we were left at popovers of

• 00:00:11 uh so we were left at popovers of a bootstrap uh before doing that let's

• 00:00:15 a bootstrap uh before doing that let's start with cloning our

• 00:00:35 and meanwhile it is getting open as we can

• 00:00:37 can continue reading

• 00:00:45 okay okay so pop overs overlap

• 00:00:54 overview things to know when using the popover plug-in

• 00:00:56 popover plug-in popovers rely on the third party library

• 00:00:59 popovers rely on the third party library popper for positioning

• 00:01:01 popper for positioning you must include popper.minjs before

• 00:01:04 you must include popper.minjs before bootstrap.js

• 00:01:05 bootstrap.js or use

• 00:01:11 bootstrap.bundle.minjs.bootstrap.bundle.js which contains popper in order for

• 00:01:12 which contains popper in order for popovers to work

• 00:01:14 popovers to work this is the bundle that we have already

• 00:01:18 this is the bundle that we have already included in our project therefore it

• 00:01:20 included in our project therefore it will

• 00:01:21 will work it is working actually we have

• 00:01:23 work it is working actually we have already tested that

• 00:01:26 already tested that popovers require the tooltip plug-in as

• 00:01:28 popovers require the tooltip plug-in as a dependency

• 00:01:30 a dependency popovers are opt-in for performance

• 00:01:32 popovers are opt-in for performance reasons so you must initialize them

• 00:01:34 reasons so you must initialize them yourself

• 00:01:36 yourself so these are not automatically

• 00:01:38 so these are not automatically initialized we have to initialize them

• 00:01:40 initialized we have to initialize them ourselves zero length title and content

• 00:01:44 ourselves zero length title and content values will never show a popover

• 00:01:47 values will never show a popover specify container body to avoid

• 00:01:49 specify container body to avoid rendering problems in more complex

• 00:01:51 rendering problems in more complex components

• 00:01:52 components like our input groups button groups etc

• 00:01:56 like our input groups button groups etc triggering popovers on hidden elements

• 00:01:58 triggering popovers on hidden elements will not work

• 00:02:00 will not work popovers four dot disabled or disabled

• 00:02:02 popovers four dot disabled or disabled elements must be triggered on a wrapper

• 00:02:04 elements must be triggered on a wrapper element

• 00:02:06 element when triggered from anchors that wrap

• 00:02:08 when triggered from anchors that wrap across multiple lines

• 00:02:09 across multiple lines popovers will be centered between the

• 00:02:11 popovers will be centered between the anchors overall width

• 00:02:13 anchors overall width use text no wrap on your a greater than

• 00:02:16 use text no wrap on your a greater than s to avoid this behavior

• 00:02:19 s to avoid this behavior popovers must be hidden before their

• 00:02:21 popovers must be hidden before their corresponding elements have been removed

• 00:02:23 corresponding elements have been removed from the dom

• 00:02:24 from the dom so you have to hide them before remove

• 00:02:27 so you have to hide them before remove the element that

• 00:02:29 the element that they are binded

• 00:02:35 okay let's rename our project as usual

• 00:03:47 okay oh we also need to name this with controller extension

• 00:03:55 actually name appending okay and yeah let's add

• 00:04:05 director by the way i have to remove root from lecture

• 00:04:07 root from lecture 16 otherwise it would complete okay

• 00:04:10 16 otherwise it would complete okay everything is ready

• 00:04:11 everything is ready and let's open our index let's save this

• 00:04:16 and let's open our index let's save this close all other tabs

• 00:04:20 close all other tabs okay now we can start our examples so

• 00:04:23 okay now we can start our examples so you see we can

• 00:04:24 you see we can we need to initialize them

• 00:04:29 we need to initialize them like this

• 00:04:32 like this so let's copy this pop over

• 00:04:36 so let's copy this pop over here and

• 00:04:39 here and now i need to initialize it so

• 00:04:42 now i need to initialize it so where is the pop over okay here the

• 00:04:45 where is the pop over okay here the content of popover

• 00:04:46 content of popover database content and

• 00:04:50 database content and i need to initialize it as

• 00:04:58 of course the script therefore i need to visualize it right pop over neighbors

• 00:05:01 visualize it right pop over neighbors example pop over

• 00:05:05 example pop over so it is using class example pop over

• 00:05:07 so it is using class example pop over but

• 00:05:09 but we don't have that yet in our

• 00:05:13 we don't have that yet in our [Music]

• 00:05:24 let's give an id to this or

• 00:05:32 let's add an extra class here pop class

• 00:05:40 like this and i'm going to use that as a selector

• 00:05:49 this is not the way we did it let me check from our picture 16 we had a

• 00:05:53 check from our picture 16 we had a working example here

• 00:06:00 so yeah it was like this this is a better way

• 00:06:01 better way so you see we are using when the

• 00:06:03 so you see we are using when the document load is ready

• 00:06:07 document load is ready we are selecting

• 00:06:10 we are selecting database toggle equal pop over like this

• 00:06:13 database toggle equal pop over like this so we are getting all database toggle

• 00:06:16 so we are getting all database toggle elements which are equal to pop over

• 00:06:20 elements which are equal to pop over with this a jquery selector and then we

• 00:06:23 with this a jquery selector and then we call pop over

• 00:06:25 call pop over command this is the most

• 00:06:30 command this is the most optimal way

• 00:06:35 it will initialize all of the pop workers at once

• 00:06:41 so can we have multiple pop overs at the top at

• 00:06:42 top at any time um

• 00:06:58 that's ready to open okay let's stop it

• 00:07:06 [Music] let's add some

• 00:07:17 okay and one

• 00:08:05 oh i see the error is coming from tooltip because we have no

• 00:08:13 tooltip because we have no uh tooltip right now

• 00:08:31 so let's replace by the way you see there is lecture 15 written here

• 00:08:34 there is lecture 15 written here uh in order to fix that we need to

• 00:08:37 uh in order to fix that we need to change our

• 00:08:38 change our um

• 00:08:41 um under shaded layout cshtml

• 00:08:44 under shaded layout cshtml here i need to change it as lecture 17

• 00:08:53 and okay so it says popover is not a function

• 00:09:00 and did we include anything else here in lecture 16

• 00:09:14 oh i see we had included but these are different things

• 00:09:17 but these are different things yeah this is table jump related

• 00:09:20 yeah this is table jump related stop and

• 00:09:36 yeah we don't have that let's check out layout in the layout we

• 00:09:39 let's check out layout in the layout we have

• 00:09:40 have javascript booster bundle mean so we

• 00:09:43 javascript booster bundle mean so we already have

• 00:09:45 already have bootstrap bundle it also says we need to

• 00:09:49 bootstrap bundle it also says we need to have a tooltip plugin

• 00:09:52 have a tooltip plugin and is this a different thing

• 00:10:37 oh you can't see it here oh i see it here

• 00:10:39 here so they have used

• 00:10:40 so they have used [Music]

• 00:10:43 [Music] document query circuit all this power

• 00:10:45 document query circuit all this power for each function you will swap up over

• 00:10:47 for each function you will swap up over okay

• 00:10:48 okay they have used this for their pop over

• 00:10:53 they have used this for their pop over and you want ready documentaries like

• 00:10:58 and you want ready documentaries like this

• 00:11:04 okay let's test this if it is working or not

• 00:11:14 i see so you see it says that the integrity attribute is not

• 00:11:19 the integrity attribute is not verified that was let's remove that

• 00:11:22 verified that was let's remove that integrity

• 00:11:23 integrity from

• 00:11:35 it is oh it is here let's remove it now it should it shouldn't get local

• 00:11:43 of course i need to refresh okay okay now no errors and now it is working

• 00:11:46 now no errors and now it is working amazing we can have both of them and

• 00:11:51 amazing we can have both of them and what about our previous selectors like

• 00:11:55 what about our previous selectors like this

• 00:11:56 this and yeah still working okay

• 00:12:01 and yeah still working okay so it was related to secret blocking to

• 00:12:03 so it was related to secret blocking to it integrity check

• 00:12:05 it integrity check and once i have removed it it is working

• 00:12:09 and once i have removed it it is working i don't know maybe we have changed

• 00:12:10 i don't know maybe we have changed something so it

• 00:12:12 something so it affected its integrity and you see we

• 00:12:15 affected its integrity and you see we can have multiple pop overs they are not

• 00:12:17 can have multiple pop overs they are not getting close

• 00:12:18 getting close by default when we click somewhere else

• 00:12:21 by default when we click somewhere else uh we need to

• 00:12:22 uh we need to click it again for pop over to get

• 00:12:30 close let's continue with the example here

• 00:12:32 here you see there can be four directions uh

• 00:12:35 you see there can be four directions uh like here

• 00:12:38 like here okay let's close this

• 00:12:41 okay let's close this i can close this

• 00:12:48 okay and dismiss on next click okay so we can also set that

• 00:12:50 we can also set that uh you probably already

• 00:12:53 uh you probably already remembered that in the previous lectures

• 00:13:02 so it must have [Music]

• 00:13:04 [Music] okay database trigger focus i think this

• 00:13:07 okay database trigger focus i think this is the

• 00:13:08 is the keyboard so let's make

• 00:13:11 keyboard so let's make one of them dismissible okay here

• 00:13:15 one of them dismissible okay here uh this misa will

• 00:13:19 uh this misa will uh to make it dismissible i am adding

• 00:13:21 uh to make it dismissible i am adding database trigger

• 00:13:24 database trigger when i refresh okay this is dismissible

• 00:13:26 when i refresh okay this is dismissible you see

• 00:13:27 you see when i click somewhere else it is

• 00:13:29 when i click somewhere else it is getting dismissed and this is not

• 00:13:31 getting dismissed and this is not for this you have to click here all

• 00:13:34 for this you have to click here all right

• 00:13:35 right and disabled elements so disable it

• 00:13:39 and disabled elements so disable it pop over automatically getting

• 00:13:42 pop over automatically getting triggered that's

• 00:13:45 triggered that's when you hover your mouse

• 00:13:49 when you hover your mouse like here and auto let's

• 00:13:52 like here and auto let's dismiss it so it has database trigger

• 00:13:55 dismiss it so it has database trigger hover

• 00:13:56 hover and focus

• 00:14:04 since it is the same lot you see for default we don't provide any

• 00:14:06 you see for default we don't provide any triggers and by default it is being

• 00:14:09 triggers and by default it is being uh click triggers

• 00:14:13 uh click triggers so let's write our notes as usual

• 00:14:17 so let's write our notes as usual in extra 17

• 00:14:26 and also initialize them and

• 00:14:41 all right let's continue to the next okay which is progress

• 00:14:59 correcting documentation and examples for using

• 00:15:01 documentation and examples for using bootstrap custom progress bars featuring

• 00:15:03 bootstrap custom progress bars featuring support for stacked bars

• 00:15:05 support for stacked bars animated backgrounds and text labels

• 00:15:08 animated backgrounds and text labels on this okay so how it looks how

• 00:15:11 on this okay so how it looks how it works progress components are built

• 00:15:15 it works progress components are built with two html elements

• 00:15:17 with two html elements some css to set the width and a few

• 00:15:19 some css to set the width and a few attributes

• 00:15:21 attributes we don't use the html5 progress element

• 00:15:23 we don't use the html5 progress element ensuring you can stack progress bars

• 00:15:26 ensuring you can stack progress bars animate them and place text labels over

• 00:15:28 animate them and place text labels over them

• 00:15:29 them we use the dot progress as a wrapper to

• 00:15:32 we use the dot progress as a wrapper to indicate the max value of the progress

• 00:15:34 indicate the max value of the progress bar

• 00:15:35 bar we use the inner dot progress bar to

• 00:15:37 we use the inner dot progress bar to indicate the progress so far

• 00:15:40 indicate the progress so far the dot progress bar requires an inline

• 00:15:43 the dot progress bar requires an inline style utility class

• 00:15:44 style utility class or custom css to set their width

• 00:15:48 or custom css to set their width the dot progress bar also requires some

• 00:15:50 the dot progress bar also requires some role and aria attributes to make it

• 00:15:52 role and aria attributes to make it accessible

• 00:15:54 accessible put that all together and you have the

• 00:15:56 put that all together and you have the following examples

• 00:15:57 following examples okay let's copy them and test them

• 00:16:02 okay let's copy them and test them so we have div class progress path

• 00:16:05 so we have div class progress path progress as a main wrapper than we have

• 00:16:08 progress as a main wrapper than we have in line

• 00:16:09 in line progress bar role progress bar idea

• 00:16:12 progress bar role progress bar idea value now is 0

• 00:16:13 value now is 0 which means what kind of percentage

• 00:16:16 which means what kind of percentage value it has

• 00:16:18 value it has and

• 00:16:23 uh actually this is really this may be related to

• 00:16:24 related to screen readers or not i'm not sure

• 00:16:29 screen readers or not i'm not sure and it has value marks

• 00:16:32 and it has value marks okay so this is probably

• 00:16:36 okay so this is probably yeah related to the screen readers i

• 00:16:39 yeah related to the screen readers i believe it won't

• 00:16:41 believe it won't have any effect when i remove them

• 00:16:49 okay and of course i will need to have

• 00:17:04 some separation because they are pretty much stacked

• 00:17:07 because they are pretty much stacked and let's also have

• 00:17:11 and let's also have some new line between them

• 00:17:19 some new line between them okay yeah idea uh this area label is

• 00:17:22 okay yeah idea uh this area label is just for screen readers

• 00:17:25 just for screen readers and when you set their width like this

• 00:17:28 and when you set their width like this it means

• 00:17:29 it means how much person is progressing

• 00:17:39 also we can have we can use this uh width as well but

• 00:17:42 we can use this uh width as well but that is

• 00:17:44 that is it doesn't have all it has only 0 25

• 00:17:48 it doesn't have all it has only 0 25 50 75 and 100

• 00:17:52 50 75 and 100 okay so how can we also have

• 00:18:00 a label it is pretty simple like this so let's say our progress is 12 percent

• 00:18:19 is completed how it looks and

• 00:18:23 how it looks and some longer text

• 00:18:32 okay yeah you see you cannot see the rest of

• 00:18:33 rest of it if the text is over

• 00:18:37 it if the text is over dash and what about if you make it like

• 00:18:40 dash and what about if you make it like this

• 00:18:48 yeah so whichever the site you put your text it will be visible there

• 00:18:56 and you can also set head custom head like this so let's set a

• 00:19:00 custom head like this so let's set a custom head

• 00:19:02 custom head inside style for example height

• 00:19:06 inside style for example height 40 pixels

• 00:19:11 40 pixels and where it is

• 00:19:21 okay why this isn't working because i think we need to set the

• 00:19:22 think we need to set the head in here

• 00:19:38 we can also have different uh backgrounds these are the usual

• 00:19:42 backgrounds these are the usual utility classes or bootstrap

• 00:19:52 for example i added here and it changes like that i can also change i think the

• 00:19:55 like that i can also change i think the progress bar

• 00:19:56 progress bar as bg dot

• 00:19:59 as bg dot dangerous yeah

• 00:20:03 dangerous yeah okay and you can also stack

• 00:20:07 okay and you can also stack multiple bars like this

• 00:20:20 okay let's stack multiple bars and you can write different uh

• 00:20:24 and you can write different uh texts inside them like 15 percent

• 00:20:28 texts inside them like 15 percent 30 percent and 20 percent

• 00:20:41 yeah actually this is being 45 percent and this is being 65

• 00:20:44 and this is being 65 when you take it from the zero

• 00:20:48 when you take it from the zero okay and you can also have stripe it

• 00:20:53 okay and you can also have stripe it so we add bar striper to

• 00:20:56 so we add bar striper to our progress bar class

• 00:20:59 our progress bar class here like this

• 00:21:02 here like this and it becomes striped but it is zero so

• 00:21:06 and it becomes striped but it is zero so we need to add some weight to this

• 00:21:21 yeah you see and we can also have animation

• 00:21:36 like uh it is added to the inside progress part so

• 00:21:38 progress part so here however it requires some activation

• 00:21:42 here however it requires some activation probably

• 00:21:50 let's see for animation of course probably we also need

• 00:22:13 so database toggle button id animated progress ic

• 00:22:26 and let's add animation to be able to have animation

• 00:22:36 we need to have an id so the id it takes is

• 00:22:40 so the id it takes is animated progress

• 00:23:51 this may be inside their javascript file which they include here here

• 00:23:54 which they include here here so you see when it's clicked

• 00:23:57 so you see when it's clicked it adds an event listener

• 00:24:02 it adds an event listener which adds progress were animated

• 00:24:06 which adds progress were animated oh it's called toggle

• 00:24:26 i see so on click [Music]

• 00:24:29 [Music] we can have onclick method on click

• 00:24:44 [Music] progress

• 00:24:47 progress animate they are here the inside thing

• 00:24:52 animate they are here the inside thing i mean this is

• 00:25:01 so on click we can execute a javascript method

• 00:25:04 a javascript method animate bash

• 00:25:11 okay and for animate part let's write a

• 00:25:14 animate part let's write a method here function

• 00:25:29 jquery it will select this class

• 00:25:33 it will select this class and it will call toggle method

• 00:25:45 okay oh by default it is animating i see so when you add this

• 00:25:48 so when you add this it is automatically animating if i

• 00:25:51 it is automatically animating if i remove this

• 00:25:52 remove this [Music]

• 00:25:54 [Music] and

• 00:25:56 and yeah it stops animation

• 00:25:59 yeah it stops animation so to be able to have it animating

• 00:26:09 id equal to animate i need to add this class so what i'm

• 00:26:11 i need to add this class so what i'm going to do is

• 00:26:14 going to do is pick this as animate and

• 00:26:18 pick this as animate and add a class okay you see there is add

• 00:26:21 add a class okay you see there is add class

• 00:26:23 class like this okay okay

• 00:26:26 like this okay okay and

• 00:26:31 so it will start animation however it won't remove it to be able to remove

• 00:26:33 won't remove it to be able to remove it what we need to do is

• 00:26:38 it what we need to do is this okay if

• 00:26:53 press class this then we need to remove glass

• 00:27:12 and then we need to return okay to to be able to return of course we need

• 00:27:14 to be able to return of course we need to encapsulate it like this

• 00:27:18 to encapsulate it like this and if it doesn't have classic it will

• 00:27:21 and if it doesn't have classic it will continue to execute

• 00:27:25 continue to execute you see now i can animate it or remove

• 00:27:27 you see now i can animate it or remove it

• 00:27:33 okay and okay that's it

• 00:27:41 okay so progress bars progress um

• 00:28:23 animated stripes okay that's it let's continue to scroll spy

• 00:28:30 okay spy automatically update bootstrap

• 00:28:33 spy automatically update bootstrap navigation or list group components

• 00:28:35 navigation or list group components based on scroll position to indicate

• 00:28:37 based on scroll position to indicate which link is currently active in the

• 00:28:39 which link is currently active in the viewport

• 00:28:40 viewport yeah i have seen examples of this

• 00:28:43 yeah i have seen examples of this actually

• 00:28:49 i don't have any memorized website right now to show what i have seen

• 00:28:50 now to show what i have seen example of this how it works

• 00:28:54 example of this how it works scroll spy has a few requirements to

• 00:28:56 scroll spy has a few requirements to function properly

• 00:28:59 function properly it must be used on a bootstrap nav

• 00:29:01 it must be used on a bootstrap nav component or list group

• 00:29:04 component or list group scroll spy requires position relative on

• 00:29:06 scroll spy requires position relative on the element you're spying on

• 00:29:08 the element you're spying on usually the body anchors a are required

• 00:29:11 usually the body anchors a are required and must point to an element with that

• 00:29:13 and must point to an element with that id

• 00:29:15 id when successfully implemented your nav

• 00:29:17 when successfully implemented your nav or list group will update accordingly

• 00:29:19 or list group will update accordingly moving the dot active class from one

• 00:29:21 moving the dot active class from one item to the next based on their

• 00:29:23 item to the next based on their associated targets

• 00:29:26 associated targets containers and keyboard access

• 00:29:29 containers and keyboard access if you're making a scrollable container

• 00:29:31 if you're making a scrollable container other than the body

• 00:29:33 other than the body be sure to have a height set and

• 00:29:34 be sure to have a height set and overflow eye scroll

• 00:29:36 overflow eye scroll applied to it alongside a tab index

• 00:29:38 applied to it alongside a tab index equals zero to ensure keyboard access

• 00:29:41 equals zero to ensure keyboard access okay so there's an example let's test

• 00:29:44 okay so there's an example let's test that example

• 00:30:03 you see when i click it it goes to the dead position with adding this

• 00:30:07 dead position with adding this hashtag to the end of to url

• 00:30:11 hashtag to the end of to url but where it was close by here

• 00:30:20 okay h4 id second heading i see so when we add this it is

• 00:30:24 i see so when we add this it is just adding this to the end of the

• 00:30:28 just adding this to the end of the url and

• 00:30:36 url and okay we can't see it so let's add it to

• 00:30:38 okay we can't see it so let's add it to the bottom of the page

• 00:30:57 let's add multiple of them to uh of course these cause some problems

• 00:31:04 course these cause some problems um [Music]

• 00:31:08 [Music] okay um

• 00:31:33 okay we need to remove extra one here but now this is what i what i didn't

• 00:31:37 but now this is what i what i didn't mean

• 00:31:38 mean when we changed this scroll it was

• 00:31:41 when we changed this scroll it was highlighting somewhere around here

• 00:31:43 highlighting somewhere around here let's continue with the example

• 00:31:47 let's continue with the example okay

• 00:31:55 i see so this is working but you see

• 00:31:59 but you see our example is not this is probably due

• 00:32:02 our example is not this is probably due to

• 00:32:09 [Music] we don't have

• 00:32:15 we don't have such area

• 00:32:24 which is called this add a b plus equal to containers and let's set

• 00:32:28 containers and let's set height

• 00:32:38 okay max height equal to 100 pixel and then it should become scrollable

• 00:32:40 and then it should become scrollable auto scroll

• 00:33:54 definitely this example is incompleted given here let's check from source code

• 00:34:35 yeah okay this is the correct example so [Music]

• 00:35:01 okay so it has h to example div class be the example now for example

• 00:35:05 div class be the example now for example now when our light bg.ph3

• 00:35:13 was still looks like we are missing something here

• 00:35:23 okay i think we need to set our number fixed

• 00:35:42 now we were setting our number fixed here

• 00:35:53 from the okay this is 0.4 let's open 0.5

• 00:35:59 0.4 let's open 0.5 fix it so for

• 00:36:02 fix it so for fix it we add

• 00:36:22 ah we have to fix it uh top to the null bar

• 00:36:24 bar which is here's okay

• 00:36:28 which is here's okay and then we refresh

• 00:36:40 inside yeah not working so why we can't make

• 00:36:44 yeah not working so why we can't make the example

• 00:37:13 okay uh let me check this from source codes

• 00:37:22 of this number is top of it or here

• 00:37:34 so you see it has database targets now our example

• 00:37:35 our example so let's just copy this

• 00:37:43 and paste it to our example here

• 00:37:50 okay so there are some key issues uh first the number is just above

• 00:37:53 first the number is just above uh the div which has database by scroll

• 00:37:59 uh the div which has database by scroll database target number example two which

• 00:38:02 database target number example two which is written here

• 00:38:04 is written here as an id and database offset 0

• 00:38:08 as an id and database offset 0 and classic close by example and this is

• 00:38:11 and classic close by example and this is the custom plus probably they have and

• 00:38:12 the custom plus probably they have and top index 0

• 00:38:15 top index 0 so now when i refresh it will

• 00:38:18 so now when i refresh it will work i'm pretty sure but so it is

• 00:38:21 work i'm pretty sure but so it is related to this i think this is related

• 00:38:23 related to this i think this is related to its

• 00:38:24 to its style 8

• 00:38:28 style 8 let's make it 300 pixels

• 00:38:32 let's make it 300 pixels refresh okay i think

• 00:38:35 refresh okay i think i also need to add

• 00:38:46 sucral overflow i auto let's refresh

• 00:38:50 auto let's refresh okay and okay there's still something

• 00:38:54 okay and okay there's still something wrong

• 00:39:02 um but maybe still wrong

• 00:39:12 okay we have idea of our number and

• 00:39:22 we have database for scroll target as example 2

• 00:39:41 okay so why not working

• 00:39:50 okay it is going to the first heading second heading and

• 00:39:52 second heading and 15 or something you see

• 00:39:56 15 or something you see however they are not highlighted

• 00:40:06 i think it is because they are wrapped inside another class not the body itself

• 00:40:18 so the key issue is related to probably it's across by example let's see this

• 00:40:20 it's across by example let's see this class

• 00:40:22 class okay it has position relative height

• 00:40:25 okay it has position relative height and marginal here so we need to set

• 00:40:28 and marginal here so we need to set position relative

• 00:40:31 position relative [Music]

• 00:40:45 let's refresh okay now it has appeared all right that's it you see when you

• 00:40:48 all right that's it you see when you work with the examples

• 00:40:49 work with the examples provided here sometimes you need to

• 00:41:05 okay there is nothing oh you see it also told us to add

• 00:41:09 it also told us to add body position relative otherwise it

• 00:41:11 body position relative otherwise it won't work

• 00:41:12 won't work but we have discovered is already

• 00:41:14 but we have discovered is already ourselves

• 00:41:21 and okay that's it if you want to use it you

• 00:41:23 okay that's it if you want to use it you can look more

• 00:41:48 example with nested now this is just saying nothing different

• 00:41:57 by the way when you click two it's not working very well

• 00:41:59 working very well yeah wait even the example doesn't work

• 00:42:09 and this group is just you using this group nothing

• 00:42:13 is just you using this group nothing [Music]

• 00:42:14 [Music] different

• 00:42:30 requirement okay and the sippiness

• 00:42:41 spinners indicate the loading state of a component or page with bootstrap

• 00:42:43 component or page with bootstrap spinners

• 00:42:43 spinners built entirely with html css and no

• 00:42:47 built entirely with html css and no javascript

• 00:42:48 javascript okay we had i have shown example of

• 00:42:51 okay we had i have shown example of loading

• 00:42:52 loading spinners or image

• 00:42:55 spinners or image in the previous lectures but we had used

• 00:42:59 in the previous lectures but we had used a

• 00:43:00 a an image for that task probably it is

• 00:43:03 an image for that task probably it is still here let me see

• 00:43:05 here let me see [Music]

• 00:43:13 okay here fidget spinner and instead of that in which now we are

• 00:43:15 instead of that in which now we are going to use

• 00:43:16 going to use uh the spinner of a

• 00:43:21 uh the spinner of a bootstrap it's a built-in spinach that

• 00:43:23 bootstrap it's a built-in spinach that you can just

• 00:43:25 you can just call that as a class here

• 00:43:28 call that as a class here visually hidden loading

• 00:43:36 and you see loading text is visually hidden

• 00:43:37 hidden it just it is just for

• 00:43:49 let's say screen readers to read you see the visually hidden has

• 00:43:52 you see the visually hidden has i think display

• 00:43:58 visibility hidden of let's see which class is that

• 00:44:04 so visual hidden means that um [Music]

• 00:44:06 [Music] yeah its position is absolute and margin

• 00:44:10 yeah its position is absolute and margin -1 which means it is not inside the

• 00:44:13 -1 which means it is not inside the screen it is at the

• 00:44:15 screen it is at the top left of the screen with -1

• 00:44:21 top left of the screen with -1 margin if i change margin of this like

• 00:44:25 margin if i change margin of this like 11 okay

• 00:44:29 11 okay um i also need to change its

• 00:44:33 um i also need to change its width and height

• 00:44:37 width and height position absolute and now it works

• 00:44:39 position absolute and now it works you've seen loading

• 00:44:40 you've seen loading it is even spinning as well

• 00:44:43 it is even spinning as well all right and there's growing spinach so

• 00:44:48 all right and there's growing spinach so different classes

• 00:44:49 different classes you can use all of them alignments

• 00:44:53 you can use all of them alignments like this which has a margin of 5

• 00:44:58 like this which has a margin of 5 placements i wonder if they have size

• 00:45:01 placements i wonder if they have size yeah

• 00:45:01 yeah they also have size you can even set

• 00:45:05 they also have size you can even set custom sizes that is great so let's

• 00:45:21 okay width equal to 50 pixels and head equal to 50 pixels

• 00:45:33 okay you see the first one has 50 pixels with an 8 and you can even

• 00:45:37 with an 8 and you can even show simply inside the button

• 00:45:45 so it's it is this can be also used when you post back

• 00:45:46 you post back and disable button for from clicking

• 00:45:50 and disable button for from clicking so it will show loading button like this

• 00:45:53 so it will show loading button like this uh you see it is not clickable to make it

• 00:45:56 you see it is not clickable to make it non-click not clickable we add disabled

• 00:45:59 non-click not clickable we add disabled role here

• 00:46:02 role here and okay that's it

• 00:46:08 so how you activate spinner is totally related to you when you post page to the

• 00:46:11 related to you when you post page to the server

• 00:46:13 server you need to add necessary clusters to

• 00:46:15 you need to add necessary clusters to those elements

• 00:46:17 those elements and remove them from those classes when

• 00:46:19 and remove them from those classes when the

• 00:46:20 the prospect is completed we have made

• 00:46:24 prospect is completed we have made example of that actually

• 00:46:26 example of that actually the previous lectures you can look for

• 00:46:28 the previous lectures you can look for them

• 00:46:43 however for my developed games i use

• 00:46:46 developed games i use a web pa spinach i mean an image spinach

• 00:46:51 a web pa spinach i mean an image spinach because it looks i think cooler

• 00:46:57 because it looks i think cooler okay so growing spinach

• 00:47:06 and alignment placement whatever you want you can

• 00:47:09 placement whatever you want you can always mix

• 00:47:11 always mix losses of bootstrap to obtain

• 00:47:20 different results you can also float text line

• 00:47:30 like here you see it take center that's it there's nothing different here that's

• 00:47:32 it there's nothing different here that's nothing

• 00:47:33 nothing special here

• 00:48:05 okay so toasts push notifications to your

• 00:48:09 toasts push notifications to your visitors with a toast

• 00:48:10 visitors with a toast a lightweight and easily customizable

• 00:48:12 a lightweight and easily customizable alert message

• 00:48:18 toasts are lightweight notifications designed to mimic the push notifications

• 00:48:20 designed to mimic the push notifications that have been popularized by mobile and

• 00:48:22 that have been popularized by mobile and desktop operating systems

• 00:48:24 desktop operating systems they're built with flexbox so they're

• 00:48:26 they're built with flexbox so they're easy to align and position

• 00:48:29 easy to align and position overview things to know when using the

• 00:48:32 overview things to know when using the toast plugin

• 00:48:34 toast plugin toasts are opt-in for performance

• 00:48:36 toasts are opt-in for performance reasons so you must initialize them

• 00:48:38 reasons so you must initialize them yourself

• 00:48:40 yourself toasts will automatically hide if you do

• 00:48:42 toasts will automatically hide if you do not specify autohide

• 00:48:44 not specify autohide false it's also an automatic

• 00:48:53 okay so there are some examples let's start

• 00:48:54 start basic to encourage extensible and

• 00:48:57 basic to encourage extensible and predictable toasts

• 00:48:58 predictable toasts we recommend a header and body toast

• 00:49:01 we recommend a header and body toast headers use display

• 00:49:03 headers use display flex allowing easy alignment of content

• 00:49:05 flex allowing easy alignment of content thanks to our margin and flexbox

• 00:49:07 thanks to our margin and flexbox utilities

• 00:49:09 utilities toasts are as flexible as you need and

• 00:49:11 toasts are as flexible as you need and have very little required markup

• 00:49:14 have very little required markup at a minimum we require a single element

• 00:49:16 at a minimum we require a single element to contain your toasted content

• 00:49:18 to contain your toasted content and strongly encourage a dismiss button

• 00:49:21 and strongly encourage a dismiss button well this looks pretty cool and easy

• 00:49:30 okay something like this and here it is not visible by default so

• 00:49:33 and here it is not visible by default so we need a trigger

• 00:49:45 um okay like this i think i will do it with

• 00:49:48 okay like this i think i will do it with the trigger like this

• 00:49:55 okay so position fixed it says i will [Music]

• 00:49:56 [Music] use

• 00:49:58 use [Music]

• 00:50:16 so what happens if we don't put this it probably still won't work

• 00:50:22 okay to make it work we need to initialize it how to initialize it

• 00:50:24 initialize it how to initialize it let's see

• 00:50:37 okay like this so let's add this code to our

• 00:50:41 let's add this code to our script towards this slice called

• 00:50:43 script towards this slice called document correct host

• 00:50:50 okay uh yeah it should do work i think so let's have page

• 00:51:04 i think i will use this oh i see because we have added it to the

• 00:51:07 oh i see because we have added it to the correct place

• 00:51:08 correct place so let's just use the jquery

• 00:51:12 so let's just use the jquery it will select all toast

• 00:51:21 class elements like this and it will call

• 00:51:26 and it will call um toast yeah

• 00:51:31 um toast yeah i'm on the physical vlog

• 00:51:48 yeah um so toast is not supported

• 00:52:05 no um let's use the

• 00:52:19 maybe it is because we didn't add a position to it

• 00:52:21 position to it so

• 00:52:46 okay okay i still can't see it

• 00:53:52 i think we need to trigger it with a bottom click

• 00:53:56 bottom click so it will be like this toast button on

• 00:53:59 so it will be like this toast button on click

• 00:53:59 click so i see so it returns source list and

• 00:54:04 so i see so it returns source list and from toast each toast show

• 00:54:13 so do we have a button with id id is this so we need to give this id to

• 00:54:18 id is this so we need to give this id to this so this is basically assigning an

• 00:54:22 this so this is basically assigning an event

• 00:54:24 event to this button

• 00:54:31 so when we click it yeah now we can see the toast

• 00:54:32 the toast appearing so does it have auto height

• 00:54:38 appearing so does it have auto height yeah okay it is working

• 00:54:42 yeah okay it is working and so this is a

• 00:54:45 and so this is a height class

• 00:54:52 it has a height button it has a close button

• 00:55:07 sourced i think it hides all the toasts

• 00:55:16 so let's try multiple toasts it was some it was somewhere around here

• 00:55:25 okay toast containers yeah let's try this

• 00:55:33 like this so those containers can contain multiple toasts

• 00:55:35 contain multiple toasts for steadily toast ideally assertive

• 00:55:37 for steadily toast ideally assertive ariata material

• 00:55:39 ariata material database yes gloss

• 00:55:43 database yes gloss meteor cloth it will close the toast

• 00:55:48 meteor cloth it will close the toast i think it closes the party post

• 00:55:52 i think it closes the party post so let's test

• 00:55:56 so let's test yeah they have appeared here

• 00:55:59 yeah they have appeared here by the way they are taking space here it

• 00:56:01 by the way they are taking space here it is

• 00:56:03 is i think it shouldn't be like that

• 00:56:32 oh we can even have middle centers [Music]

• 00:56:59 so it is like this yeah talks i have 15 to have that let's add it here

• 00:57:03 to have that let's add it here we'll toast containers let's refresh

• 00:57:07 we'll toast containers let's refresh oh no we can't even click it

• 00:57:13 oh no we can't even click it let's see the source code

• 00:57:32 maybe we need to put these inside this machine

• 00:57:41 this machine um yes and he is

• 00:59:05 oh i see but this is very based by the way

• 00:59:07 way when i added a bias now it is gone

• 00:59:11 when i added a bias now it is gone to wash

• 00:59:18 wow i see you see after i have added this brt uh

• 00:59:21 after i have added this brt uh depos position relative now it has

• 00:59:24 depos position relative now it has zero height and therefore not taking any

• 00:59:28 zero height and therefore not taking any space and when i click it i can see it

• 00:59:30 space and when i click it i can see it like here

• 00:59:33 like here and if i want to set them

• 00:59:36 and if i want to set them [Music]

• 00:59:40 [Music] center

• 00:59:59 so defects justify content centered and i item center with 100 percent

• 01:00:03 i item center with 100 percent this will be the class of the

• 01:00:14 deep area leave and from here or not okay let's make the container id

• 01:00:17 or not okay let's make the container id like this i'm in the class

• 01:00:20 like this i'm in the class so let's try this way

• 01:00:24 so let's try this way okay still take now they're taking space

• 01:00:27 okay still take now they're taking space again

• 01:00:28 again so we need to keep

• 01:00:56 okay they are centered but they are taking space

• 01:01:23 container position should be relative and

• 01:01:24 and [Music]

• 01:01:27 [Music] okay so the container will be relative

• 01:01:30 okay so the container will be relative which is here

• 01:01:32 which is here and this will help position absolute

• 01:01:36 and this will help position absolute like this so it won't take space

• 01:01:43 and when we click it okay now we can see it however

• 01:01:52 um let's see that's the uh use

• 01:02:07 okay how it makes position

• 01:03:09 i wonder if there is a class for z index for boost up

• 01:03:30 now so we need to add that ourselves okay so it won't get behind

• 01:03:35 okay so it won't get behind yeah uh but the way it

• 01:03:39 yeah uh but the way it is being displayed is not what i want

• 01:03:45 is being displayed is not what i want you see this is the toast position

• 01:03:48 you see this is the toast position relative uh i want to set it

• 01:03:52 relative uh i want to set it center of the page so

• 01:03:58 center of the page so let's see if wrong here i think it was

• 01:04:00 let's see if wrong here i think it was this

• 01:04:01 this somewhere around here

• 01:04:22 manual center here let's try this so we will keep position

• 01:04:26 so we will keep position reality

• 01:04:45 so this way okay it is working but if it is it is taking space or not so let's

• 01:04:48 is it is taking space or not so let's find it out

• 01:04:49 find it out no it is not taking any space zero uh

• 01:04:52 no it is not taking any space zero uh and zero so

• 01:04:53 and zero so this is what we were looking for and now

• 01:04:56 this is what we were looking for and now it is being displayed here i can also

• 01:04:58 it is being displayed here i can also set it

• 01:04:59 set it top right like tab 0

• 01:05:03 top right like tab 0 starts and 0

• 01:05:07 starts and 0 i think it should work

• 01:05:15 okay one of them is visible and the other one is not so

• 01:05:18 other one is not so um top turn and

• 01:05:21 um top turn and 10 it's totally up to you

• 01:05:26 10 it's totally up to you oh now i can pretty so there's something

• 01:06:05 when we right it like that it is not working as expected

• 01:06:15 the other one is at the top so when we remove this

• 01:06:24 now this is taking space which isn't even

• 01:06:25 even working okay so the position is totally

• 01:06:29 working okay so the position is totally up

• 01:06:30 up to you and

• 01:06:34 to you and if you make it like this

• 01:06:46 i think instead of and i need to use start

• 01:08:02 let's see where it is okay so it is taking space right now

• 01:08:04 taking space right now therefore it is not as we want and the

• 01:08:07 therefore it is not as we want and the closed volumes

• 01:08:08 closed volumes is not working

• 01:08:21 so you need to work with the positioning

• 01:08:25 the positioning because by default they are taking space

• 01:08:28 because by default they are taking space in your

• 01:08:31 in your website

• 01:08:37 therefore you have to be careful with that

• 01:08:48 oh now it is working here so position relative to the very top then

• 01:08:52 position relative to the very top then inside container position absolute top

• 01:08:54 inside container position absolute top zero and zero p three

• 01:08:56 zero and zero p three padding three so this looks like the

• 01:08:59 padding three so this looks like the best

• 01:09:00 best option if you ask me okay

• 01:09:04 option if you ask me okay and yeah that's it about toasts

• 01:09:08 and yeah that's it about toasts so we can also set auto hide false and

• 01:09:12 so we can also set auto hide false and yeah that's it

• 01:09:45 means it blends with their backgrounds i think

• 01:09:47 think so you need to

• 01:09:55 yeah it blocks it down and

• 01:10:02 stacking okay custom content color schemes you

• 01:10:05 okay custom content color schemes you can also have

• 01:10:13 placement is a little bit problematic but we made it work at the

• 01:10:16 but we made it work at the and yeah

• 01:10:19 and yeah okay so the there is tooltips as a last

• 01:10:23 okay so the there is tooltips as a last component

• 01:10:32 tooltips documentation and examples for adding custom bootstrap tooltips with

• 01:10:34 adding custom bootstrap tooltips with css and javascript using css3 for

• 01:10:37 css and javascript using css3 for animations and data bs attributes for

• 01:10:39 animations and data bs attributes for local title storage

• 01:10:46 overview things to know when using the tooltip plugin

• 01:10:48 tooltip plugin tooltips rely on the third-party library

• 01:10:51 tooltips rely on the third-party library popper for positioning

• 01:10:53 popper for positioning you must include

• 01:10:57 popper.minjsbeforebootstrap.js or use

• 01:11:03 bootstrap.bundle.minjs.bootstrap.bundle.js which contains popper in order for

• 01:11:04 which contains popper in order for tooltips to work

• 01:11:07 tooltips to work tooltips are opt-in for performance

• 01:11:08 tooltips are opt-in for performance reasons so you must initialize them

• 01:11:10 reasons so you must initialize them yourself

• 01:11:12 yourself tooltips with zero length titles are

• 01:11:14 tooltips with zero length titles are never displayed

• 01:11:16 never displayed specify container body to avoid

• 01:11:19 specify container body to avoid rendering problems in more complex

• 01:11:20 rendering problems in more complex components

• 01:11:21 components like our input groups button groups etc

• 01:11:25 like our input groups button groups etc triggering tool tips on hidden elements

• 01:11:27 triggering tool tips on hidden elements will not work

• 01:11:29 will not work tooltips four dot disabled or disabled

• 01:11:31 tooltips four dot disabled or disabled elements must be triggered on a wrapper

• 01:11:33 elements must be triggered on a wrapper element

• 01:11:35 element when triggered from hyperlinks that span

• 01:11:37 when triggered from hyperlinks that span multiple lines

• 01:11:38 multiple lines tooltips will be centered okay it is

• 01:11:40 tooltips will be centered okay it is pretty much same

• 01:11:41 pretty much same as poppers

• 01:11:45 as poppers so we also need to initialize them

• 01:11:48 so we also need to initialize them so let's try

• 01:11:55 and where do we initialize it we initialize it with

• 01:12:03 data we are salty parting it was like that

• 01:12:15 okay you see it appears and it doesn't appear until i click it back

• 01:12:17 it doesn't appear until i click it back alright

• 01:12:18 alright okay okay

• 01:12:28 yeah working there are also options for tooltips

• 01:12:35 um i think can we keep timing and other things

• 01:12:45 yeah options so there are some options as animation building through

• 01:12:48 as animation building through containers delay you see that you can

• 01:12:50 containers delay you see that you can have a delay

• 01:12:52 have a delay uh like

• 01:12:55 uh like this so how do we provide delay to our

• 01:12:59 this so how do we provide delay to our tooltip

• 01:13:12 let's see if there's more examples somebody out here

• 01:13:26 okay database animation i see database delete problem so let's add

• 01:13:29 delete problem so let's add and delete the first one data bs delay

• 01:13:33 and delete the first one data bs delay equal to 1000 here

• 01:13:41 when i refresh okay it pretty much comes immediately and this comes yeah so this

• 01:13:45 immediately and this comes yeah so this is the way it works

• 01:13:46 is the way it works that is html so we can upload

• 01:13:49 that is html so we can upload html as well into tooltip what does that

• 01:13:52 html as well into tooltip what does that mean let me show

• 01:14:00 database html equal to true

• 01:14:03 equal to true and in the title let's add an

• 01:14:07 and in the title let's add an hr like this

• 01:14:10 hr like this html let's see how it looks

• 01:14:15 html let's see how it looks you see now this is working with hr

• 01:14:19 you see now this is working with hr and there is placement

• 01:14:22 and there is placement we can make a placement top right left

• 01:14:26 we can make a placement top right left it is by default auto uh selector

• 01:14:30 it is by default auto uh selector template so you see you can have a

• 01:14:33 template so you see you can have a template as well

• 01:14:39 the template is like this but you can change it

• 01:14:41 change it trigger hover focus you see you can also

• 01:14:45 trigger hover focus you see you can also change trigger as well like click i

• 01:14:48 change trigger as well like click i think manual pull back and

• 01:14:52 manual pull back and boundary custom class sanitize

• 01:15:00 so it is about sanitization of html alone lists

• 01:15:01 alone lists sanitize offset we can also set offset

• 01:15:05 sanitize offset we can also set offset like

• 01:15:11 2020 for example interviews offset equal to

• 01:15:16 interviews offset equal to 2020

• 01:15:25 you see there is some offset right now i can see it

• 01:15:27 can see it and okay so are there anything relating

• 01:15:31 and okay so are there anything relating to this miss no since it is too deep it

• 01:15:33 to this miss no since it is too deep it is automatically getting dismissed

• 01:15:36 is automatically getting dismissed if you want to remove this mix i think

• 01:15:39 if you want to remove this mix i think you need to have

• 01:16:06 is okay paul strap not

• 01:16:10 okay paul strap not auto hide tooltip i wonder if this is

• 01:16:25 oh i see when i initialize it there is trigger hover

• 01:16:53 i see with data delay we can set multiple

• 01:17:31 i see so we need to change uh trigger to hover instead of have over

• 01:17:34 trigger to hover instead of have over focus

• 01:17:40 and you can also bind events like this height

• 01:17:42 height but there is no option to disable auto

• 01:17:44 but there is no option to disable auto hide i think

• 01:18:27 options are up to you okay

• 01:18:40 12 tips um tooltips errors

• 01:18:54 okay usage creation

• 01:19:16 okay i think that is enough so enough helpers

• 01:19:27 clear fix quickly and easily clear floated content within a container by

• 01:19:29 floated content within a container by adding a clear fix utility

• 01:19:37 okay so the following example show how the clear fix can be used without the

• 01:19:39 the clear fix can be used without the clay fixed

• 01:19:40 clay fixed wrapping blue they would not spawn

• 01:19:42 wrapping blue they would not spawn around buttons which

• 01:19:43 around buttons which would cause broken layout so let's

• 01:19:47 would cause broken layout so let's test it the first one with a clear fix

• 01:19:52 test it the first one with a clear fix and second one without clear fix

• 01:20:00 okay you see the first one is floated left prototype

• 01:20:02 left prototype but the other one is um

• 01:20:05 but the other one is um completely different than the rest

• 01:20:14 okay and this is about clear with colored links

• 01:20:16 colored links yeah that's something we already know

• 01:20:32 okay um let me fix color things

• 01:20:46 right here aspect practical let's test it

• 01:21:01 okay of course we can see them right now so we need to add some

• 01:21:03 so we need to add some i think borders

• 01:21:31 they are taking full space i don't know why

• 01:21:47 let's add a background to its [Music]

• 01:21:56 eg dangerous okay i see so based on

• 01:21:59 okay i see so based on the screen size

• 01:22:07 you see it is just double of the uh securing resolution so its width

• 01:22:11 uh securing resolution so its width is 1519

• 01:22:15 is 1519 and its height is just uh

• 01:22:19 and its height is just uh half of it so we can have custom

• 01:22:22 half of it so we can have custom ratio like

• 01:22:36 15 percent okay so you see it said it's right you according to

• 01:22:38 it said it's right you according to screen size

• 01:22:40 screen size uh so it is like this yeah

• 01:22:43 uh so it is like this yeah so this is about right here

• 01:23:00 all right and position fix it up fix it button stick it up

• 01:23:03 fix it up fix it button stick it up you already have all them

• 01:23:26 and then there is a responses ticket top for example let me show stick it up to

• 01:23:28 for example let me show stick it up to you

• 01:23:40 remain dash like this when you get down below its current position so you

• 01:23:42 down below its current position so you see it's currently positioned here when

• 01:23:44 see it's currently positioned here when i get down you see it's still here

• 01:23:49 get down you see it's still here we already have example of that in the

• 01:23:51 we already have example of that in the previous lecture so what is

• 01:23:53 previous lecture so what is visually hidden

• 01:24:00 visually hidden use these helpers to visually hide

• 01:24:01 visually hide elements but keep them accessible to

• 01:24:03 elements but keep them accessible to assistive technologies

• 01:24:06 assistive technologies visually hide an element while still

• 01:24:08 visually hide an element while still allowing it to be exposed to assistive

• 01:24:10 allowing it to be exposed to assistive technologies

• 01:24:11 technologies such as screen readers with dot visually

• 01:24:13 such as screen readers with dot visually hidden

• 01:24:14 hidden use dot visually hidden focusable to

• 01:24:16 use dot visually hidden focusable to visually hide an element by default

• 01:24:18 visually hide an element by default but to display it when it's focused eg

• 01:24:20 but to display it when it's focused eg by a keyboard only user

• 01:24:23 by a keyboard only user dot visually hidden focusable can also

• 01:24:25 dot visually hidden focusable can also be applied to a container

• 01:24:27 be applied to a container thanks to focus within the container

• 01:24:29 thanks to focus within the container will be displayed when any child

• 01:24:31 will be displayed when any child element of the container receives focus

• 01:24:34 element of the container receives focus okay so it is like this

• 01:24:58 and stretch it link so you see entire card is now as a

• 01:25:02 so you see entire card is now as a single link

• 01:25:04 single link let's see

• 01:25:13 okay do style cards and you see i can click everywhere this is so hard to achieve in

• 01:25:17 everywhere this is so hard to achieve in regular html believe me but i have spent

• 01:25:20 regular html believe me but i have spent so much time to make some of my links

• 01:25:22 so much time to make some of my links like this

• 01:25:23 like this but with a stretched link

• 01:25:27 but with a stretched link class here it takes the entire

• 01:25:31 class here it takes the entire uh it makes the entire div

• 01:25:35 uh it makes the entire div as a stretched link it's awesome believe

• 01:25:38 as a stretched link it's awesome believe me

• 01:25:41 me so this is probably javascript you see

• 01:25:43 so this is probably javascript you see when i click it it's clicking here

• 01:25:54 when i click it it's clicking here okay multiple links and tap stocks are

• 01:25:56 okay multiple links and tap stocks are not recommended of course

• 01:25:58 not recommended of course wow this is so so much uh

• 01:26:02 wow this is so so much uh i have some future believe me if you are

• 01:26:03 i have some future believe me if you are working with html you will know that

• 01:26:08 working with html you will know that and okay carter stretch it link some

• 01:26:10 and okay carter stretch it link some quick example take some

• 01:26:11 quick example take some stitching leaving not working because

• 01:26:13 stitching leaving not working because position relative is added to the link

• 01:26:17 position relative is added to the link okay so this is about such a thing

• 01:26:28 and text rank translation it will only show some

• 01:26:31 it will only show some part of some

• 01:26:37 part of the text so it will truncate text after two column i think

• 01:26:49 yeah um yeah this this may be useful but i

• 01:26:51 yeah this this may be useful but i wouldn't suggest to use

• 01:26:53 wouldn't suggest to use the text from application

• 01:26:58 the text from application and then there is utilities api

• 01:27:08 okay so this is not our topic right now you can look that if you want background

• 01:27:11 you can look that if you want background background color we already know that

• 01:27:14 background color we already know that you can also background gradient which

• 01:27:16 you can also background gradient which is great yeah

• 01:27:17 is great yeah normally i i suggest you to use big

• 01:27:20 normally i i suggest you to use big current

• 01:27:21 current uh gradient

• 01:27:25 uh gradient so how do we use it so let's

• 01:27:28 so how do we use it so let's see because gradient is in most cases

• 01:27:31 see because gradient is in most cases looks better

• 01:27:39 when i add ps gradient to the class i think it becomes a gradient here

• 01:27:41 class i think it becomes a gradient here it is not a single

• 01:27:42 it is not a single color anymore let's add a gradient to

• 01:27:45 color anymore let's add a gradient to every one of them

• 01:28:00 oh this is so cool ah yeah they are all gradients right now

• 01:28:03 ah yeah they are all gradients right now it looks

• 01:28:03 it looks much better

• 01:28:13 okay um background colors variant and

• 01:28:16 variant and yeah there's nothing

• 01:28:19 yeah there's nothing more important here borders

• 01:28:23 more important here borders so you can have different border

• 01:28:27 so you can have different border selecting additive

• 01:28:28 selecting additive subtractive

• 01:28:37 border color border bits for the size orders folders you already know them

• 01:28:40 orders folders you already know them for the size more than weights

• 01:28:43 for the size more than weights for this color as such

• 01:28:48 for this color as such okay colors the colors are like this

• 01:28:51 okay colors the colors are like this you see different text colors

• 01:28:55 you see different text colors and yeah that's it

• 01:29:11 display oh display is about what kind of

• 01:29:15 oh display is about what kind of um display

• 01:29:20 um display you are expecting i mean in line block

• 01:29:23 you are expecting i mean in line block inline blog they're all differently

• 01:29:25 inline blog they're all differently rendered in the browser uh

• 01:29:29 rendered in the browser uh so this is all about this way you want

• 01:29:31 so this is all about this way you want it to be like a table or table cell

• 01:29:33 it to be like a table or table cell table row flex in nine flex

• 01:29:37 table row flex in nine flex so these are just the

• 01:29:38 so these are just the [Music]

• 01:29:40 [Music] display values they are taking d dot non

• 01:29:43 display values they are taking d dot non block inline block uh

• 01:29:47 block inline block uh you see table sprint cell this way in

• 01:29:49 you see table sprint cell this way in print you can also set display in print

• 01:29:51 print you can also set display in print as well

• 01:29:53 as well so when user tries to print it will be

• 01:29:55 so when user tries to print it will be how it will be displayed

• 01:29:58 how it will be displayed the notation is display and value

• 01:30:01 the notation is display and value so let's make an example

• 01:30:05 so let's make an example by default these are display block

• 01:30:09 by default these are display block therefore they take entire row

• 01:30:12 therefore they take entire row you see the inline developed replacing

• 01:30:16 you see the inline developed replacing 90 grit

• 01:30:17 90 grit like that

• 01:30:21 like that anyway if you want to learn more about

• 01:30:23 anyway if you want to learn more about display

• 01:30:24 display uh display differences

• 01:30:31 okay maybe there's an example let's see i think we need to type as css display

• 01:30:36 i think we need to type as css display differences

• 01:30:46 okay okay so you see this is inline this is inline

• 01:30:49 you see this is inline this is inline block

• 01:30:50 block this is block taking entire row

• 01:30:54 this is block taking entire row um this is flexbox

• 01:30:57 um this is flexbox this is another thing pulled over

• 01:31:03 this is another thing pulled over grits and this is a hard example to

• 01:31:07 grits and this is a hard example to understand maybe there's another thing

• 01:31:16 okay inline block and you can look for that

• 01:31:19 inline block and you can look for that if you want

• 01:31:20 if you want i will just move there is flex

• 01:31:23 i will just move there is flex um this is the new feature of browsers

• 01:31:27 um this is the new feature of browsers but this is awesome feature by the way

• 01:31:32 but this is awesome feature by the way and you can also use flexbox

• 01:31:45 you may need to read more about flex if you want to learn

• 01:31:47 you want to learn i will just pass it for now uh

• 01:31:50 i will just pass it for now uh float is just float

• 01:32:13 let's test it okay anyway there is nothing you need

• 01:32:15 okay anyway there is nothing you need lord take position

• 01:32:17 lord take position according to the other elements there is

• 01:32:21 according to the other elements there is interactions let's see if there is

• 01:32:23 interactions let's see if there is anything interesting

• 01:32:25 anything interesting wow nice so select all select auto

• 01:32:28 wow nice so select all select auto like this when i double click it select

• 01:32:35 and let's select on i hit select none by the way

• 01:32:37 the way so the interactions

• 01:32:50 pointer event so this is this cannot be clicked

• 01:32:51 clicked so it is pa none this can be default

• 01:32:54 so it is pa none this can be default behavior

• 01:32:57 behavior [Music]

• 01:33:04 okay this is not a really important thing

• 01:33:05 thing but it's just awesome and it's

• 01:33:14 overflow overflow is just about this you see there is a scroll bar

• 01:33:16 see there is a scroll bar you can set overflow hidden if all flow

• 01:33:18 you can set overflow hidden if all flow hidden it won't be visible

• 01:33:20 hidden it won't be visible if overflow visible it will overflow as

• 01:33:23 if overflow visible it will overflow as name suggests and if you set overflow

• 01:33:25 name suggests and if you set overflow auto it will overflow

• 01:33:27 auto it will overflow from both sizes

• 01:33:36 instead of style overflow you just use overflow class

• 01:33:37 overflow class that's all about it

• 01:33:41 that's all about it and then there is position so position

• 01:33:44 and then there is position so position static relative absolute fixed and

• 01:33:50 steady what is pollution study i i don't

• 01:33:53 what is pollution study i i don't know it is the same

• 01:33:56 know it is the same as absolute

• 01:34:03 anyway so you can have position relative like this it is displayed at the top

• 01:34:07 like this it is displayed at the top i mean the position right it's it's part

• 01:34:10 i mean the position right it's it's part element and position

• 01:34:12 element and position top is you'll see displaying here okay

• 01:34:18 top is you'll see displaying here okay and [Music]

• 01:34:22 [Music] we can have other examples as well this

• 01:34:24 we can have other examples as well this is a good example actually let's put it

• 01:34:31 so you see for this to work the parent element

• 01:34:33 element may need to have a position absolute

• 01:34:35 may need to have a position absolute relative

• 01:34:36 relative i think that's

• 01:34:43 i'm tested so i will remove position relative for

• 01:34:45 relative for modern copy pasting

• 01:35:00 yeah so these are the first ones and these are the second ones

• 01:35:03 and these are the second ones i can see them so we need to add them

• 01:35:06 i can see them so we need to add them into

• 01:35:07 into inside the containers

• 01:35:15 but when you remove hard position relative

• 01:35:15 relative it gets broken

• 01:35:25 yeah so i need to so they must have

• 01:35:28 to so they must have position relative as a parent

• 01:35:56 and you see position after top zero starts

• 01:35:58 you see position after top zero starts to the translation middle button

• 01:36:01 to the translation middle button on the prime around the pin wow it looks

• 01:36:03 on the prime around the pin wow it looks cool

• 01:36:05 cool style bits rm hrm

• 01:36:09 style bits rm hrm so this is actually a division here

• 01:36:24 so it's the position right here and you see between one and two there is

• 01:36:25 see between one and two there is actually a div

• 01:36:27 actually a div so this is the bottom this is the button

• 01:36:29 so this is the bottom this is the button and between them

• 01:36:38 oh i see so this is the button and this is another one where does that

• 01:36:42 and this is another one where does that come oh this is progress bar i see

• 01:36:49 so this progress bar is what is being displayed here

• 01:36:57 and since we use position absolute top here they are getting

• 01:36:59 here they are getting all they are getting these positions

• 01:37:03 all they are getting these positions oh cool okay

• 01:37:11 there is shadows right here box shadow

• 01:37:30 and sizing you relate to the department you should hate auto

• 01:37:34 you should hate auto okay let's add this

• 01:38:25 oh it's taking a lot of space anyway let's continue with spacing

• 01:38:30 anyway let's continue with spacing so spacing is all about merging and

• 01:38:32 so spacing is all about merging and padding

• 01:38:33 padding uh they their notation is like this

• 01:38:38 uh they their notation is like this negative merging up

• 01:38:41 negative merging up so you can also gap like this

• 01:38:50 yeah you already know that i think

• 01:39:00 margin link yeah okay

• 01:39:06 there is text text alignment we already know text alignment you see you can

• 01:39:08 know text alignment you see you can center right align left align

• 01:39:11 center right align left align text wrapping words page

• 01:39:16 text wrapping words page so you can also have a wordplay like

• 01:39:18 so you can also have a wordplay like this

• 01:39:19 this uh for wordpress we add text break here

• 01:39:22 uh for wordpress we add text break here otherwise it won't get broken

• 01:39:24 otherwise it won't get broken into the multiple lines let's test it

• 01:39:27 into the multiple lines let's test it out

• 01:39:28 out so text wrapping versus text break

• 01:39:38 okay so the text break breaks into the next line but text wrapping

• 01:39:40 next line but text wrapping is expanding our you see maximum width

• 01:39:50 that is text transform font size oh font size

• 01:39:50 size like this fs1 fs4 point wait for

• 01:40:07 okay fw front page fct italics or fct is fond style probably yeah

• 01:40:11 fond style probably yeah yeah phone style is fct

• 01:40:14 yeah phone style is fct so let's note this

• 01:40:22 text uh text alignment

• 01:40:37 world page text transform

• 01:40:51 by the italics and you can have line height well it

• 01:40:54 and you can have line height well it even supports line height

• 01:40:56 even supports line height like in work this is cool

• 01:41:05 i think how does it do that probably padding for that mushroom

• 01:41:09 probably padding for that mushroom let's refresh you see line heading

• 01:41:13 let's refresh you see line heading it is really cool you can have mono

• 01:41:16 it is really cool you can have mono space so each character is taking

• 01:41:19 space so each character is taking same uh

• 01:41:42 won't be diatonics okay we have right everything that

• 01:41:44 everything that presses colors

• 01:41:51 so when you use reset color it is using the parent text which is for example in

• 01:41:53 the parent text which is for example in text method

• 01:41:55 text method text calculation okay that's it that's

• 01:41:58 text calculation okay that's it that's all

• 01:42:12 [Music] as needed vertical align is hard

• 01:42:16 as needed vertical align is hard believe me to achieve when you are not

• 01:42:19 believe me to achieve when you are not using table

• 01:42:21 using table or here they have user table as well

• 01:42:29 or here they have user table as well okay

• 01:42:48 okay so there is this difference bit field

• 01:42:49 field between visibility and display

• 01:42:56 between visibility and display one of them takes space the other one is

• 01:42:57 one of them takes space the other one is not class visible invisible

• 01:43:06 and display none and yeah so let's see the difference

• 01:43:16 okay so and let me show so when it is visible it takes space

• 01:43:18 so when it is visible it takes space when it is invisible it is taking space

• 01:43:20 when it is invisible it is taking space when it is displayed on it is not taking

• 01:43:22 when it is displayed on it is not taking space okay

• 01:43:25 space okay display none takes no space

• 01:43:28 display none takes no space in browser flow

• 01:43:32 in browser flow average visibility

• 01:43:36 average visibility invisible takes space but

• 01:43:39 invisible takes space but not visible so this is the difference

• 01:43:53 and then there is extent okay that's not our topic right now

• 01:44:04 so for icons i think we need to add external

• 01:44:06 external thing

• 01:44:11 yeah both drop icons we have already added that as

• 01:44:12 added that as in previous lectures okay that's

• 01:44:15 in previous lectures okay that's all about bootstrap five

• 01:44:19 all about bootstrap five now i can show an example of

• 01:44:23 now i can show an example of custom login okay

• 01:44:32 okay uh how you design your login and other things

• 01:44:33 other things is totally up to you

• 01:44:36 is totally up to you but let's add a new here as login

• 01:44:48 but let's add a new here as login in this login what we are going to do is

• 01:44:50 in this login what we are going to do is we are going to send

• 01:44:52 we are going to send a database to the server

• 01:44:56 a database to the server and then log in the user that's it

• 01:45:02 and then log in the user that's it so let's open

• 01:45:05 so let's open our

• 01:45:13 sql server management studio by the way in my own project i

• 01:45:18 by the way in my own project i keep the login information in the

• 01:45:20 keep the login information in the session data

• 01:45:22 session data so if user is logged in

• 01:45:26 so if user is logged in i put it inside the session

• 01:45:30 i put it inside the session and if not i check session whether

• 01:45:33 and if not i check session whether user login or not it is totally up to

• 01:45:36 user login or not it is totally up to you how you

• 01:45:42 design your session we have shown you can even keep

• 01:45:55 like this session set card you can set string

• 01:45:59 you can set string as well

• 01:46:12 as well okay in our mvc database

• 01:46:16 okay in our mvc database we have users and in users

• 01:46:21 we have users and in users we have

• 01:46:30 okay first thing we are birthday and whatever we want

• 01:46:32 whatever we want so um

• 01:46:33 so um [Music]

• 01:46:52 logi so this will be

• 01:46:55 be wrote

• 01:47:17 what we are going to do is we are going to set

• 01:47:22 to set [Music]

• 01:47:29 yeah this is the way we are going to set we are going to set if user entered

• 01:47:31 we are going to set if user entered correct

• 01:47:32 correct pass force and username

• 01:47:35 pass force and username we already have made examples of forms

• 01:47:41 we already have made examples of forms for example

• 01:47:41 for example [Music]

• 01:47:45 [Music] from lecture 13 yeah let's use this post

• 01:47:56 [Music] here so we can set a speed route

• 01:47:59 here so we can set a speed route for post let's set a route in our

• 01:48:02 for post let's set a route in our controller

• 01:48:04 controller okay here

• 01:48:07 okay here so for this we are going to set a name

• 01:48:15 as equal to login rot you can give any name you want

• 01:48:18 rot you can give any name you want so it will be posted here and

• 01:48:22 so it will be posted here and we also i i need to change

• 01:48:27 we also i i need to change actually here

• 01:48:33 we also need to have a model to verify post information so

• 01:48:37 post information so let's have

• 01:48:40 let's have a model here i am going to have login

• 01:48:44 a model here i am going to have login model

• 01:48:58 so inside here we are going to have two property raw

• 01:49:00 property raw prop sr

• 01:49:03 prop sr username current large system doesn't

• 01:49:07 username current large system doesn't have password so i will

• 01:49:09 have password so i will use a user first name and email

• 01:49:12 use a user first name and email for verification to lock a user

• 01:49:16 for verification to lock a user so as our first name

• 01:49:20 so as our first name and then you are going to have

• 01:49:23 and then you are going to have by the way i explain a very detailed

• 01:49:26 by the way i explain a very detailed login system in my

• 01:49:28 login system in my other lectures for example in advanced

• 01:49:31 other lectures for example in advanced programming lecture in object oriented

• 01:49:33 programming lecture in object oriented programming lecture

• 01:49:34 programming lecture so if you want to learn how to make a

• 01:49:37 so if you want to learn how to make a login system

• 01:49:38 login system you should watch them it is basically

• 01:49:40 you should watch them it is basically same because uh

• 01:49:44 same because uh our mvc project also uses c-sharp and my

• 01:49:47 our mvc project also uses c-sharp and my lectures also use c-sharp

• 01:49:51 lectures also use c-sharp so if you watch my

• 01:49:56 so if you watch my let me show introduction programming

• 01:50:00 let me show introduction programming or advanced programming here

• 01:50:03 or advanced programming here you will learn about how to make a

• 01:50:06 you will learn about how to make a proper login system with

• 01:50:09 proper login system with salted keywords salted and hashed

• 01:50:11 salted keywords salted and hashed keywords

• 01:50:12 keywords to have maximum security how to record

• 01:50:16 to have maximum security how to record them in database

• 01:50:17 them in database how to uh

• 01:50:24 let's say save username password give them id login users

• 01:50:28 give them id login users and such everything related login

• 01:50:30 and such everything related login operations

• 01:50:31 operations background code is explained in

• 01:50:34 background code is explained in introduction to programming and

• 01:50:35 introduction to programming and advanced programming if you already know

• 01:50:37 advanced programming if you already know c-sharp which you should already have

• 01:50:40 c-sharp which you should already have you can watch my advanced programming

• 01:50:42 you can watch my advanced programming course

• 01:50:44 course videos and then you will learn

• 01:50:46 videos and then you will learn everything

• 01:50:47 everything related to proper login system okay so

• 01:50:50 related to proper login system okay so i am just showing a quick example on

• 01:50:53 i am just showing a quick example on this uh

• 01:50:54 this uh lecture right now since it was requested

• 01:50:57 lecture right now since it was requested uh so email

• 01:51:04 and let's add that as a model here model uh it will be from

• 01:51:08 a model here model uh it will be from nature9 model start

• 01:51:10 nature9 model start login okay so asp4 will be

• 01:51:14 login okay so asp4 will be for let's see autocomplete

• 01:51:23 okay uh as our first name and this will be by the way card

• 01:51:27 and this will be by the way card so we can also display

• 01:51:32 so we can also display our display it was like

• 01:51:36 our display it was like let me find

• 01:51:56 by the way uh in our previous lectures we have truly

• 01:51:58 we have truly seen everything related to this so i'm

• 01:52:01 seen everything related to this so i'm not going to

• 01:52:01 not going to waste time with them

• 01:52:14 okay and in our is our login index

• 01:52:19 our is our login index here um please under please enter your

• 01:52:22 here um please under please enter your first name

• 01:52:33 okay and then we are going to have same for okay

• 01:52:37 same for okay let's go to complete email

• 01:52:51 some database solid model okay that's it and in our

• 01:52:55 and in our lecture cell controller we are going to

• 01:52:57 lecture cell controller we are going to get

• 01:53:00 get the model start login i

• 01:53:04 the model start login i login

• 01:53:11 and i can verify it if i want but for now i won't so here we need to

• 01:53:14 but for now i won't so here we need to use

• 01:53:14 use our database

• 01:53:21 so let's check database example in our lectures copy paste

• 01:53:50 can we see context and we have tbr users and i need to use

• 01:53:54 and i need to use wash here dot okay here that

• 01:53:59 wash here dot okay here that email equal to login dot

• 01:54:09 sr email and and here that first name equal to

• 01:54:14 here that first name equal to my login.first name

• 01:54:31 strength and hint this is oh we have a problem with here

• 01:54:35 we have a problem with here oh this is my mistake okay let me fix

• 01:54:40 oh this is my mistake okay let me fix okay um and let's have first or default

• 01:54:45 okay um and let's have first or default so the default value of

• 01:54:54 i think default is sources empty otherwise first elements of default t

• 01:54:56 otherwise first elements of default t source if source is empty

• 01:54:58 source if source is empty so the default will be node probably i

• 01:55:02 so the default will be node probably i think

• 01:55:21 environment passwords i mean email it first name and email combination

• 01:55:24 first name and email combination and of course you can display much

• 01:55:26 and of course you can display much better

• 01:55:28 better things otherwise

• 01:55:31 things otherwise it is not nude finally we are using

• 01:55:35 it is not nude finally we are using info

• 01:55:42 we can have a custom class or we can just

• 01:55:43 just voltage inside a user session

• 01:55:47 voltage inside a user session such as an example was somewhere around

• 01:55:50 such as an example was somewhere around here

• 01:55:58 you see as you write code you will memorize it but under memorizing

• 01:56:02 memorize it but under memorizing um there is this serialize and we must

• 01:56:04 um there is this serialize and we must have a center serialize

• 01:56:07 have a center serialize you can just copy paste your older code

• 01:56:11 you can just copy paste your older code okay and user login

• 01:56:17 and to be able to use it i need to add a reference of course

• 01:56:26 and as a user login i am going to use serialization what is it is

• 01:56:30 serialization what is it is here i will use json converse serialize

• 01:56:33 here i will use json converse serialize and i will just use so this is tbr users

• 01:56:37 and i will just use so this is tbr users type

• 01:56:38 type this uh i need some okay

• 01:56:43 this uh i need some okay and i will set session and then

• 01:56:46 and i will set session and then um it is going to return here

• 01:56:51 um it is going to return here so you see um

• 01:56:57 if i want to check whether user is logged in or

• 01:56:58 logged in or not i need to do it like this

• 01:57:01 not i need to do it like this [Music]

• 01:57:02 [Music] if

• 01:57:20 okay we can check if user has user login or not

• 01:57:25 or not and then

• 01:57:30 let's see [Music]

• 01:57:39 we can deserialize it and tell that user is logged in

• 01:57:41 is logged in so in my model i'm going to add some

• 01:57:44 so in my model i'm going to add some extra attribute display

• 01:57:52 here let's add prop sync

• 01:58:00 okay is users notebooks unless this have a tbr

• 01:58:04 this have a tbr tbr users

• 01:58:11 users okay values so by default i will set it as a node

• 01:58:15 so by default i will set it as a node actually it could be by default no since

• 01:58:16 actually it could be by default no since it's an object type

• 01:58:19 it's an object type and if user is logged in

• 01:58:22 and if user is logged in i will deserialize it

• 01:58:26 i will deserialize it like here

• 01:58:37 okay of course to be able to have that i need to

• 01:58:38 need to log in okay um users

• 01:58:41 log in okay um users login of course to be able to use login

• 01:58:46 login of course to be able to use login i need that using

• 01:59:02 and user login.tv actual user values fill the e code so

• 01:59:06 actual user values fill the e code so json convert this object login

• 01:59:10 json convert this object login and session

• 01:59:16 and session gets string

• 01:59:20 gets string so we get string it get the key like

• 01:59:23 so we get string it get the key like this

• 01:59:25 this and then i would return okay here

• 01:59:29 and then i would return okay here login and

• 01:59:37 since our name is logincshtml as an object yes yeah

• 01:59:40 as an object yes yeah [Music]

• 01:59:42 [Music] oh by the way this is returning the

• 01:59:45 oh by the way this is returning the default index not the login index

• 01:59:54 so let's break it here these are nice objects so

• 01:59:55 objects so where is the problem here

• 02:00:06 oh login.tv or each of these will be table users type

• 02:00:07 table users type i like this okay

• 02:00:11 i like this okay so in our index

• 02:00:14 so in our index actually let's uh return

• 02:00:23 um what i'm going to do is let's reverse back

• 02:00:31 like this return weave and i will have another index as index 2

• 02:00:33 and i will have another index as index 2 and this will have a

• 02:00:35 and this will have a custom rod as

• 02:00:51 and this will login okay so let's revolve this

• 02:00:52 revolve this road and simply

• 02:00:56 road and simply we will return login view yeah

• 02:00:59 we will return login view yeah okay and if user is logged in we will

• 02:01:02 okay and if user is logged in we will display it

• 02:01:03 display it as like this okay

• 02:01:07 as like this okay so if

• 02:01:15 a model that tbl actually if model is not equal to node

• 02:01:18 actually if model is not equal to node but of course it wouldn't work user was

• 02:01:21 but of course it wouldn't work user was equal not equal to

• 02:01:22 equal not equal to node let's say uh

• 02:01:26 node let's say uh logos in users okay to type it of course

• 02:01:30 logos in users okay to type it of course we need to have it

• 02:01:31 we need to have it something like this okay logged in user

• 02:01:35 something like this okay logged in user id it will

• 02:01:35 id it will be that model that

• 02:01:39 be that model that okay user values that

• 02:01:42 okay user values that okay user id

• 02:01:45 okay user id and logged in users

• 02:01:50 and logged in users first name okay

• 02:02:14 and then you can also show this email whatever you want you see it is all up

• 02:02:16 whatever you want you see it is all up to your imagination how

• 02:02:17 to your imagination how you design is of your design login users

• 02:02:29 i'm just simply telling you the idea when you log out you just destroy that

• 02:02:31 when you log out you just destroy that session value and

• 02:02:32 session value and tada it is logged out

• 02:02:46 else okay i think let's make it like this

• 02:02:50 okay i think let's make it like this uh no user is no but in yet

• 02:02:59 and let's also add a form to log out

• 02:03:03 a form to log out okay so for log out

• 02:03:07 okay so for log out it will be simply pretty simple actually

• 02:03:15 by the way uh we will return [Music]

• 02:03:24 we login actually we need to redirect login not return via login so how we

• 02:03:26 login not return via login so how we were redirecting

• 02:03:42 so that our logged in data can be okay redirect action yeah let's do that

• 02:03:55 redirect action index 2 okay and let's also have a logout

• 02:04:06 as oak out look at you road

• 02:04:10 look at you road go out by the way this doesn't need any

• 02:04:15 go out by the way this doesn't need any model so it will simply

• 02:04:19 model so it will simply sessions and how do we remove

• 02:04:25 sessions and how do we remove remove yeah that's it

• 02:04:30 remove yeah that's it user login

• 02:04:36 and redirect action yeah index 2

• 02:04:40 yeah index 2 and in our index page

• 02:04:43 and in our index page our login page i mean yes

• 02:04:47 our login page i mean yes we just need to type okay logout

• 02:04:53 we just need to type okay logout users okay let's test it

• 02:05:44 okay no user is logged in first name let's type something as

• 02:05:46 let's type something as as incorrect okay involved first name

• 02:05:48 as incorrect okay involved first name and email combination

• 02:05:50 and email combination let's type something valid as first name

• 02:05:52 let's type something valid as first name totals

• 02:05:54 totals email is this

• 02:06:00 okay login user id first name talos university and that's

• 02:06:02 university and that's a refresh page we are still logged in

• 02:06:05 a refresh page we are still logged in because we are keeping that data in

• 02:06:08 because we are keeping that data in uh session on the session is destroyed

• 02:06:10 uh session on the session is destroyed it will be there

• 02:06:11 it will be there let's log out users and log out tada

• 02:06:15 let's log out users and log out tada it's a custom authentication system

• 02:06:18 it's a custom authentication system how you design is totally up to you you

• 02:06:20 how you design is totally up to you you can improve it you can do whatever you

• 02:06:22 can improve it you can do whatever you want

• 02:06:22 want and end of the course

• 02:06:27 and end of the course actually this course should spawn into

• 02:06:30 actually this course should spawn into two semesters as i

• 02:06:32 two semesters as i mention it because that can we can we

• 02:06:35 mention it because that can we can we could show

• 02:06:36 could show much more thing but as i said you if you

• 02:06:39 much more thing but as i said you if you watch my introduction to the

• 02:06:41 watch my introduction to the programming and advanced programming and

• 02:06:43 programming and advanced programming and object-oriented programming

• 02:06:45 object-oriented programming course videos here advanced programming

• 02:06:52 introduction to programming and object-oriented programming if you watch

• 02:06:54 object-oriented programming if you watch all these students series

• 02:06:57 all these students series to the lecture one of internet you will

• 02:07:00 to the lecture one of internet you will have much better

• 02:07:01 have much better idea of how to code your

• 02:07:04 idea of how to code your website at the server side and you

• 02:07:07 website at the server side and you already

• 02:07:07 already learned the basics actually fundamentals

• 02:07:10 learned the basics actually fundamentals and even advanced topics of

• 02:07:12 and even advanced topics of nbc design without net course

• 02:07:16 nbc design without net course okay uh how to design a custom

• 02:07:25 authentication and login system with using

• 02:07:29 system with using session set string

• 02:07:34 session set string get string and

• 02:07:37 get string and sterilize these very nice

• 02:07:41 sterilize these very nice object methodology all right

• 02:07:45 object methodology all right so lecture 17 is

• 02:07:49 so lecture 17 is ready let's upload our source code i

• 02:07:52 ready let's upload our source code i have i hope you have enjoyed my

• 02:07:56 have i hope you have enjoyed my uh lectures you can always contact

• 02:07:59 uh lectures you can always contact me through our discord channel

• 02:08:02 me through our discord channel uh no matter what time you are watching

• 02:08:06 uh no matter what time you are watching this hopefully i will be there

• 02:08:07 this hopefully i will be there and answer you

• 02:08:31 right it is adding all changes

• 02:08:48 all right end of lecture 17 end of the course hopefully see you

• 02:08:50 course hopefully see you another time okay

• 02:08:54 another time okay see you later