PHP Full Course For Beginners | PHP Full Course | PHP Tutorial | Intellipaat

[Music] hello everyone welcome to this brand new extensive session on php and mysql by intellipark today with this session we are going to touch upon almost all the intricacies of web development majorly focusing on php and mysql php is the open source programming language that is especially best suited to web development and can be embedded into html also it's widely employed across the industry for server based scripting whereas mysql is the database framework that is much faster than other databases in terms of performance and ease of access but before we begin with a deep dive into these technologies i would suggest you guys to subscribe to the intellipath youtube channel to come across more such technical updates first of all we shall look into the agenda for this session we will begin this session with an introduction to php then we'll move on to mysql later we'll talk about html and css here we will also discuss about how you can embed php snippets into html next we will discover js and jquery and finally we will create a hands-on implementation using all the frameworks mentioned above hey guys so i'll start with the basics and then we will work our way towards progress uh so in this workshop we'll be learning about html5 css3 javascript a few libraries like jquery and then php mysql then cake php okay and cake php would be a framework on php and it has a lot of things that we can do with the php manually so you can think about it like you there's a wizard who will give you um things that you want if you give them the right command so we'll start our journey with the html5 uh but before we begin a small round of introduction to know let me just pull out my presentations that i have prepared for you so guys my name is vijay shukumar i would be the trainer for the remainder of this workshop um and this entire workshop is going to be a hands-on um series so we where we discuss about a topic theoretically for few minutes so that we conceptually understand what is the outcome and then we practically do it there would be examples set up for almost every topic there are few conceptual topics ah wherever you know we have a conceptual topics i have some slides and then we discuss about that in the topic see what's more important here in this workshop is everybody's ability to understand and cope up with the technology that we are we are going through so moving forward guys uh i'm sure you should be comfortable with who your instructor is and what is his background and things like that um my name is vijay shukumara from bangalore i've been a trainer since about 16 17 years working extensively on front end and full stack technologies i started my career as a web developer in a it company i worked there for about four and a half years and then i moved to another company where i did some consultation for about two years plus and then i decided to be a trainer on my own so put together i have about 20 years plus experience on the i.t and i worked on many of these technologies personally for various projects so i'll be carrying those expertise as well to share with you as a teaching or you know examples that i'm offering so it can benefit you okay guys so um this is a a workshop wherein you know we will be working on the web technology so we will learn a lot of things about web how things would work and towards the end you should feel confident that you know you can now create a web application that is out there so in the process i have you know created a flow that can be easy for anyone to follow along and achieve their goal with using php as a framework and uh sorry php has a platform and cake php as a framework to create web applications we will not be covering every nook and corner of every technology that is not going to be practical um so we will just focus on things that might be relevant for our learning process correct so it's like this you know if you go into a store you may find so many things but you'll only buy whatever is required correct and as and when you need more things you come to the store and then you buy more right now but here we are not a store just because you know cake php exists there are over 100 different features let's say as an example and in this workshop we'll only cover let's say like six or seven sometimes about eight or nine but as and when there is a need for you it's uh it becomes important that you know you also get yourself comfortable with the documentation and read and learn okay because most of the things that you know we would be learning here are also about to change so if i teach you let's say cake php version 4 um it may happen that you know cake php 5 will be replacing shortly and you guys are busy working on a project or you took some break in between or you had a different technology in in hand and then you have been working when you come back on to cake php again you will be astonished okay there is version 5 and there are a lot of new things that have surfaced so it may happen like that so it's always a good idea that now you go back to the documentation and refer and read and understand and then implement it okay so there are some prerequisites um you know from the software perspective from the knowledge perspective um so i would suggest you know you all download and install okay so you guys can stay focused and learn a few things that you would need from the configuration from the hardware perspective you'd need visual studio code okay that's something that i would use as an ide to edit all my files now we can get little fancy there is another tool called webstorm that we can use i would be using visual studio code i recommend you download this um if you all are using windows machine this is the option if you are using mac then on the right side you can click on this see by far most of the technologies that we are learning in this workshop are quite um platform agnostic you don't need to use any specific command until and unless you know we get into installing um php and start working with it there i will bridge you okay whenever there is a need and in order to continue with this workshop we will be creating two different workspaces one workspace where we don't have um php where we spend some time the first few workshops will not be inclined towards php these are topics like html and css and javascript but sooner we will have to get into php then we will use a different workspace altogether so as of now i recommend you know you go create a folder on c drive cool so what we'll do is create a folder called php dev okay i'm creating a folder called php dev on my c drive so i suggest you create a folder which is familiar to you in my case i have created this folder php div on the c drive why on the c drive is because i i want my configuration files to be on the c drive okay you can keep it on d drive no problem and if you have a constraint a challenge put it on d drive no problem it's not going to affect our learning in any ways moving forward when we have the configurations we need to make sure that the application is installed on the c drive where the operating system can access those files for this first few exercises it really doesn't matter and i would you know always recommend that now keep your files at a place where your os can access them so that is why i prefer c drive if you have a challenge if you have a constraint don't install put it on d drive okay so you are done so we copy this path we copy this path and we open visual studio code and in the visual studio code go to the file menu from the file menu choose open folder and in the open folder navigate to this path and then select that folder so your visual studio code will restart with that selected path all right so now here this would be the folders folder structure for our workshop i mean those who are installing it on d sometimes you may get some errors of configuration then you know we'll have to discuss about that separately but if you are following along with the the way that i am showing you will exactly get the errors that i am getting and then i will show you how you can solve them and that gets resolved we would need some tools so that you know we can work in this workshop so i recommend some extensions that you should install how do i install extensions on the left side you click on this last icon extension click on it and then you will be able to search through the extensions that are already installed on your machine or things that are recommended i would suggest you install these extensions and i already have them so i don't i don't have to install the first one that i recommend you install is a material icon material icon theme this is an optional installation frankly i would be using it and if you find no no vijay's icons are looking nice how do i get something similar on my machine then you need to install this it's not going to make any significant difference on your development cycle however just by looking at the file name you will know what files are these okay so this is one of the extensions that i recommend i am putting this on a notepad okay so material icon theme this is the first one that you should be installing the second one that i would be using extensively is mithril emit okay so this methyl emit plugin you know gives us um super powers when we start working with html and css and to some extent some javascript as well i am using mithril emit uh i'll share this you know list on the chat as well but just pay attention and then i am also using this extension called open in browser by a developer called teacher or tech r because there are two open in browsers um if you look for open space in space browser there are two extensions so you may ask vijay which one and then i'm also using this php intellisense now this is really cool and it helps us to work with php um quite easily and effectively so i'm using this and there's few more i'm using this prettier it's a formatter tool it'll make sure your code is organized nicely okay and it'll look nicer to read as well i think yeah these are the only ones now don't bother about php server we would not be using this in this workshop but apart from that these are some of the extensions that i suggest you should install let's now go to the next step so now after all the installation is done now couple of obvious questions is why do we really need all of them so each one of them has a specific requirement specific usage the material icon theme will apply an icon to every file that will be creating for example if i create an html5 file it will apply html icon onto that if i create a css file it will apply a css icon on that and later on we will also be learning about php right so it will make sure you know it is a the icons look like php just by looking at you know if this is a php file or html5 or a javascript file that you can work i mean if it's a json file you'll have a different icon things like that and then the smith will emit will make your html and css editing lot faster open in browser allows you to open this application in a browser really quick see i'm not associated with any of these tools okay so you are completely free to install it or not install it because i have installed it and you will feel that you know vijay is little faster when he is typing all the code so you will be left out so i am asking you to install the result and when we start working with php for the first few examples we would not need any intellisense once we understand about php once we understand about the syntax and the nature of php it helps if you already have something that can complete the code for us now you don't have to actually type because the way you will be processing your ideas and you start thinking in php would be lot faster than your hands completing the code so these inclines will help you complete this code lot faster and this prettier formatter will allow your files to be formatted nicely so when you look at it the code will start making sense to you okay so and prettier formatter is available for html5 css javascript and things like that but not for php i guess because i have not seen php now usually i don't use this idea i'd be using something called as integers id called webstorm for php editing so nevertheless you know since this is open source and free um i'm suggesting you let's use this okay you don't have to make any payment but webstorm is a paid tool you need to make payment i guess you know per annum it's about 14 or something like that okay so now coming back to the context um first we'll start our journey in html okay so we'll go create a new file i mean there are many ways to do that you can click on this icon you can go to the file menu and choose a new um file and then or you can also press the shortcut ctrl n to do something like that so we'll go click on this icon as of now and then it will ask you what is the name of the file that you want to create and in order to maintain the sequence of this topics i'll call this as step one hello world dot html notice that the extension.html is important if you don't add this extension the tools that we have installed may not be able to recognize this file and do the autocompletion so since many of you guys are totally beginning fresh i would spend some time on most of these trivial coding practices that will help you scale up really fast now first step is let's say now you created an html file what is the content what what do you have in html file so usually you'll have an html tag correct you have an html tag and inside that tag you have the head and the body tag these are the two tags that you'll have so if you want to technically understand you know the the hierarchy here html contains head and the body head happens to be the first child of the html tag and body happens to be the second child of the html tag but is this our own good enough so we have the html tag and inside that html tag we have the head and the body head is where all the processing information for the body tag will be stored i mean we we can specify how our body tag should appear or how it should be styled how can i access it and all of that will be in the header type and the body tag is what the user actually sees and interacts with ok so all invisible elements are put here all visible elements are put here in other words the script tags the css declaration for the content will be declared in the head tag basically the processing information will be stored in the head tag and we can add some configuration instructions inside this head tag as how this document should be treated and things like that okay so now typing this every exercise would become a pain so we installed emit correct and with that emit we can specify html colon 5 and this will give us the abbreviation for this code and if you notice we have all the standards maintained the doctype declaration is added now why is this line required because which are you told that you know html tag should be the root yes of course but see before this html tag can be understood by the browser there are many ways to interpret this html tag in fact we have come a long way since the very first inception of html happened okay so html also has lot of versions the one that we are working is html 5.01 now but then there is version 1 version 2 version 3 and html also got influenced by other technologies like xml in between and there has been flavors of xhtml version 1 and version 2 and things like that so you are instructing the browser that how i want you to treat this application how i want you to treat this page rather this page will now be treated as html5 so the dot type declaration simply tells html so or else the html declaration should actually be like this this is uh then we have come a long way um maybe i'll show you this one so you see this doctype here maybe you know for your benefit i'll paste it but trust me you don't have to learn all of these because initially we started with html version one and later on know there has been some changes and html4.01 which was officially announced as a standard so people can use i mean what happened to version one two three maybe they all lived a very short life but these versions were predominantly available for a long time and later on html got converted to xhtml and we have few flavors we'll talk about them but the summary is this instead of you know you're writing this lengthy long code i mean trust me this was an interview question many people would be asked this very first line in the interview what is this what is the use of dark type declaration what are the different types of dark type declaration and that's a pain i mean it's so much that you have to remember it may be it is small but trust me when you have to know about this in different flavors it becomes really a pain but that was shortened html5 dot type is just dot type html and again you know the dark type declaration here can also be lower case uppercase browser is smart enough earlier you know those days people used dialup connections and browsers were very slow now browsers are fast they can interpret things really fast so we'll go with the modern approach html5 and the very first line here the html tag has a lang attribute set to english why is this a requirement because see there are a lot of screen readers who would come to your application people who are visually challenged people who are trying to interpret the content of this page they all will come and try to understand your document and they have to be told that you know the language that i'm using in this page is english so we are specifying lying as en here so the screen reader which comes to this page will immediately switch to an english language and start reading the content so that the the person who is using that application can hear the content okay people who are visually challenged use a software called jaws and that can read english latin spanish russian japanese chinese arabic and things like that so which language should they be using to read the content so you are telling in the very beginning that you should be using english okay and then every keystroke see i'm using an english use standard keyboard many people out there would be using a chinese keyboard an arabic keyboard to add on to the complexity they may they have they have it created different keyboards for different countries in their language preferences and each key stroke generate an ascii value that way if i prepare a page and send it to you and if you are if you suppose are using an arabic keyboard the ascii values will be completely different and your page the the page that is displayed on your screen will be completely different because i have used english keyboard a um alphabet a on my key would be completely different on your device as well so in order to bring that uniformity in order to bring that synergy between different keyboard users we'll have to specify what kind of key strokes will be generated when i press a key using this utf-8 this is an encoding standard ah we'll actually learn about this even in php so i'll leave it there but for now you should understand that some basic configurations are all set and each browser like whether you know it is a microsoft windows browser or a mac site browsers they have some constraints and in order to bridge or manage them we have some lines we'll talk about this in css as well but for now just understand that there are some templates that are already generated for us and it's quite nice to know that these all are available we can start using them and here in the body tag i will write an h1 tag and notice you know here i had to just type h1 and press tab on the keyboard and it will auto complete the code and if you want to know which i want to write h h1 tag and i want to put this message this is also a load and then i press tab and it will generate the content along with the tag this is happening because we had installed this tool called uh methyl emit okay so that generates the html code for us so now that now i'm done with this i want to display this in the browser how do i display this i want to look at the output that's being generated out of this file so what you can do is step number one go to this folder where your workspace was generated now don't do this just watch i will show you a shortcut because we installed a tool for it so this file is which is generated here you can either double click this in my case you know it is configured that firefox will open this file why because firefox is the default browser on my machine optionally you can also right click and open with notice you know there is this command open with and you can use a browser that matches your flavor i can use firefox chrome older explorer and a new microsoft edge and things like that so if i prefer to work with google chrome which i do in you know for the rest of this workshop let's just use google chrome so if press on this you'll get google chrome opening this file if you notice it is on the c drive php dash there step one dash hello world dot html easy now instead of doing this i told you that there is a shortcut you can now right click this document and choose open in default browser or other browser now these two menu options are available because we installed this extension open in browser this one okay so this will allow this menu or else it won't be available with visual studio code so if i now click on other browser and from the drop down select chrome if you have installed chrome okay don't expect if you don't have chrome if you click on it it'll magically open in chrome no it won't chrome should be installed on your machine and then you can select chrome so notice you know this also opened the same file see this also open the same file so guys you know keep keep engaging in this workshop because many times you know i wouldn't know if you are even following so sometimes i i would keep my pace uh like this um maybe slightly slower not to a faster side okay so this worked right and now we will go on some of the on this some of the concepts of html5 so i told you some of them would be theoretical some of them would be practical whenever there is a conceptual explanation i will use my slides so html5 has introduced some new things into our world um [Music] i think you know i just skipped some of these slides i'll just bring from the starting so what is html5 it is a standard of writing html content so that your web browsers and mobile devices which are having web browsers can interpret these elements and render them appropriately the question is why do you really need it because html has evolved over a period of time i mean fortunately you guys have entered into this domain when most of the things have settled down and there is some concrete route forward but i started working with html around 2000 and there is not much of clarity as to um what technology will be will be using i mean many people were working on frame sets and frame sets don't work in browsers if you don't understand any of these terms that's totally fine i'm just trying to tell you that yes there has been lot of changes and lot of improvements that has happened over a period of time and we are working on this technology at a point where it is quite mature so html was actually controlled by an organization called w3c worldwide consortium for a long time and as of now it is it is doing its job but there is one more organization which has got into the standardization of this technology which is called the what wig organization the purpose of what we organization is to collate inputs from users like even you and me can suggest what are the features that we are expecting in the next version of html and what we will work on it provide that to the w3c consortium make sure that it is standardized and it is implemented in all the browsers so that you can look at your technology rendered in the browser okay so what week stands for web hypertext application technology working group the company actually was started as a rebel company which was an offshoot of a debate that people had um some uh some years back around 2009 i guess you know many people started wondering whether is this html that we are working is it going to be used you know in future as well so the debate went to a extent where they wanted to trash html and replace everything with xhtml 2.0 and browser manufacturers sitting in that workshop did not like the way it's been projected so they came out and they started their own technology and they said okay we will not follow what w3c is saying we will follow our own technology and they launched html5 nine months from there the developers the in that consortium were mainly uh from apple from firefox and from opera so if you think about major browsers we which are the major browsers that come to your head safari for apple users mozilla that is firefox opera if you are using on a mobile device and tablets predominantly it is opera and then we have chrome so all of these people joined in one side and who's left out i.e correct frankly nobody cared about ie because so the rest of the browsers manufacturers went one side and they started working on this technology called html5 which is what we would be using now and later on you know ie had no option but to join the gang and now as of now ie is also hand in hand with html5 so every browser is moving in one direction fortunately so i think you know i gave you the data as 2009 it is 2000 around 2005 which is when you know the xstml 2.0 was actually announced okay so html5 has some new advantages um as of now they all are old now because between 2005 and 2021 there has been like 15 16 years right so this technology has standardized over a period of time but they had a lot of advantages which i will reveal one by one not many developers even till they know about these that's the point okay so i've summarized that in few points that could be easy for you to follow along so you have the support for broken markups now if you if you have you know done any html programming you know if you start an li tag you need to end the li time right but there is no need like that in html5 it will work so what do i mean by that is if i go back to this page and i will use a ul tag under the ul tag i will have an li tag and i do not have to actually close this tag i will say list item 1 and list item 2 three and four and expect this to work like this is look this looks crazy why will this work well let's go give this a try in our browser select from see it works and just to prove that there is no yes li means list item so if i right click there are no problems as well li means list item ideally you should be closing these tags but just the opening tags are supported because you are comfortably inside a ul tag which is a grouping element for the li tax so you have ul tax and you also have something called as oil tax what is oil ul stands for unordered list oil stands for ordered list so if i come back and you should see that i have got the ordered list this time and the order is one two three four so you can also specify what is the order uh not type that you would want to have um the type can be see we have one but this which is the default which means you say the order type will be one two three four which is the default you saw that you can also say no no which i want to you know use abcd so the order would now be in abcd uh you can say no no which i want to display roman numbers so you see there are so many options okay so i can say i that means to say it's a roman number so if i now run this example it will be in roman numbers so you can you know meet your match here and frankly this is not the end of the list you you can actually do they you know use even custom list list items actually ah when we speak about css i'll show you how you can customize these also the way you want so this is for order list and again you know for an unordered list also you have some different types that we can use ah the type here would be by default notice you know here [Music] it would be it is actually showing all the syntax that we have here which is wrong well not tab index type the type will have a value of around dot and things like that see as of now the type or the icon that you see here this one is called a dot or a disk if i am not mistaken ok we can check this in the documentation i do not use this often its not disk yes you're right but is there type disk that is in a disk is default we also have other alternates right so at any point guys when you are in doubt ok when you are in doubt i recommend that you go to this website called developer.mozilla.org okay and i can look for um an ordered list okay there is something called as list style and something that we can assign here this one this is the official documentation okay and you guys you can actually see what are the different attributes that you can so go set so notice this type has circled disc and square the disk was the default uh the fourth bullet also supports something called as triangle you know for the type let's go check that out i've never used all that okay the type is triangle oops did it not copy triangle copy just to make sure that you know the words match let's now go to the browser and see if this is what i get where is my browser i think i've lost it let us now open another browser google chrome the triangle is not recognized by this browser but i think you know this was another element that was added where is my not here guys yeah here here ah okay so we can use a circle if you want to a square if you want to i have seen all of these working but triangle was something exciting so i thought i'll try but we can actually use css to modify these as well the way we really want so now you see it is actually become a square is very subtle um have you tried that okay could be i have not tried let me go try if it works in yeah some of them may have a browser compatibility issue yeah no triangle does not work in firefox as well okay i don't know okay so maybe you guys can try and explore did i make any typo mistake no so let us go check in firefox and i'm using the latest version of firefox and it doesn't seem to work nevertheless okay so it's not important just understand that there are different types of types that you can go use for list items and ordered lists and unordered list and things like that so you can use okay and they have a working example right there in front of you i don't think you know they have an example for triangle there because maybe you know they were also not sure about it so they it's not it's not displayed in here okay so so what we have learnt is that there is something called as list that we can go create and that can be of two types ordered list and unordered list now what is more important here is you have opened the tag but you never bothered to close it and that's supported in html5 it never used to be supported in html 4.01 or xhtml xstml though it was never supported because xhtml is what xml version of html because it was xml you had to close the tags and now even badly nested tags would work see ideally you know in the slide you can see b is a b stands for bold so anything that you put inside will become bold and i stands for italics anything that you put inside that i tag will become italics so if you think about it like that i start a b tag i put some content i start an i tag and i put some content now ideally i had to end the i tag and then the b tag correct because you need to properly nest them even if you improperly nest them this will also work in the browser okay so this is also supported so just to prove that what i will do is i will use the exact example that i have displayed here on on the slide there's a b tag i will say this is bold and i'll use another tag called i and inside this i will say italics and now i'll say outsider and now what i'll do see this is correctly nesting so in this case bold will be bold italics text will be in italics and outsider will still be in bold okay if i go back to the browser you can experience that see it's working correct bold is in bold outside is also involved italics is inside italics now if i come back here and wrongly nest this i would close the bold tag before and i would close the i tag later so this is wrongly nesting isn't it i mean you can easily find out no no vijay this will not work but in html5 this would work just a quick info guys intellipaat has a php and mysql certification training program where you can learn all the important concepts from industry experts and gain real world exposure to these technologies here this word is bold because bold this this word idyllics will be in both bold and italics and this will be just in italics so the way it would work is between this and this stack things will be bold and between this and this tag it will be italics and this will be both bold and italics you got it and that would work in html tag so sometimes if you don't pay attention to all such trivial things you may have an undesired outcome so pay attention to all these subtle changes that has happened you know in html okay nice let's go to the next thing in me you know you may have so there are some new tags if you change the tag this will will these plugins change them accordingly no there is one tag that we can use so there's one more plugin that we can use if you change the starting tag it'll change the corresponding ending tag okay so maybe later on i'll show you how you can install it okay but you can that there is there are plugins for that so if you basically select the first one uh it will select the last one as well but see it is not in this case ah but there are you know techniques that we can use to do that if i were you i would select this and press ctrl d control d would select the next occurrence and then i can change ul and that will change in both of them okay but don't bother we will i will show you a tool later on that you can use how do i get suggestions for type or any attributes okay see these are built into the visual studio code you will be able to get them say automatically so if i don't have it if i press ctrl space i do get the drop down correct and see here when i press control space i did not get any option and it's then referring or suggesting me everything that i have in the content so sometimes you know it is not um all that great sometimes it is okay so the idea here is you should know which one to accept and which one not to accept i mean just because you know this browser this id suggested can i start with b tag and bold tag and you know all of this no it would be such a waste of time right so you should know which one is accepted i mean if you know about it then the you know this code hints they all will make sense if not you know life will become a mess i mean you're like what can i type this what will happen and then you go back to the browser and check you know what is happening nothing is happening here so you come back oh no cars it is nothing is happening and then you know you can say oh let's say i do head there and then see nothing because the default type is a disk oopsie the default type is what a disk the disk that's the default i mean whether you use it or you don't use it the default would be disk you have other options like you know square and round and things like that so that you can use ah but you should know what are you know legitimately a load so you can you can identify them okay so now moving forward so there are some new tags that has been introduced like canvas we'll talk about canvas we'll also do some practical exercises around them there is a this audio tag is video tag all of these are new tags but since you know these are new tags if the browser does not recognize you can put some content in between the tag like for example i have put the word fallback in the content you know in as a content in between the canvas tag the the content fall back will then be displayed instead of the canvas tag okay so that's a fallback option that most of the browsers support so if you expect a new tag that was introduced and if the tag is not recognized the content inside the tag will definitely be recognized so that that way you can tell the user that oh yeah this tag is not seen on your browser you should probably update you can give him some default message we'll be using canvas moving forward and then there is this widespread practices developers you know have been using all of them since a long time so if there is an orphan tag now what is an orphan tag a tag that cannot take any other elements inside in between them those are called orphan tags and inside this orphan tags if there is an orphan tag you do not have to close it just declaring the tag is good enough and when we learn php we can generate these attacks via php and then you know it becomes very effective to understand your output if you know what these stacks will do or how will it be performing outside okay i'll share these slides and there are many other utilities um html5 has actually added into the browser um in fact you know there are there are different set of people or groups of developers who are contributing to this this is an open source community in fact you can also join and start contributing in any which way that you can okay because there um there's a lot of scope to work on all of these technologies and a lot of people have started contributing to creating this platform making this platform better so you have something called as semantically declaring your application which could be easy for the machine to interpret and not only for machine even for developers like us to find out you know what is the structure of this application which tag is more appropriate in this case you can also make an application faster even when it is not connected to the internet by the usage of the offline api um local storage index db there would be something called as [Music] application cache internals which is now removed for some security reasons but we still can sniff and find out if the user is online or offline but earlier we we had the ability to give some alternate content let us say now the user is disconnected i can give him a different page altogether so that those features are down for some maintenance when they come back we can probably explore them but as of now we can just find out if the device is online or offline and when the device is offline we can ask the user to read the data locally which is stored in something called as local storage and local storage has few more flavors you have session storage local storage and web storage and things like that we will get to the details in the next classes you also have the ability to store a database in on the user's machine but now there is a challenge with this firefox safari is supporting indexeddb um but it is also supporting something called as web sql but other browsers have lot of conflicts with that opera is saying we'll only support indexeddb ie doesn't want to support any of them but new version supports both index db and web sql so it the road is little rough there is browsers are still contemplating on which technology would be more appropriate so as and when things become more mature we will be able to use the database that will be available on the browser see even as of now index db is available but the support across different browsers are limited okay so we can safely rely on local storage because that is available on most of the browsers which is what we will focus in this workshop but if you say no no which i want to learn index db as well i will give you the documentation but i told you that you know it is not supported on all the browsers yet so if you build an application which is relying on indexeddb don't expect it to work on all the browsers because not all the browsers have implemented it see you should understand that you know these browsers are manufactured by different team of developers who are working on different core technologies so not all the technologies support all the features correct so there would be some rough patches in between and you also can access the device and its abilities like you know geo location where the user at this point in time the orientation api the accelerometer i mean how the device is oriented is it tilted to the right is it tilted to the left and is it tilted to the top and bottom you also have a pedometers installed in some of these devices where we can also find out track the user when he is moving and things like that you also have something called as get user media which allows you to access the camera and the microphone again on this get user media is available only in few browsers like chrome supports it that is why i was recommending that you know you all let us all use chrome to a larger extent because that supports most of the features that we will be discussing in this workshop then you also have better communication where websockets um i can't be okay okay so you have you know some better server connectivity with these apis we'll be communicating with the websockets in this workshop so let's see how it goes i can show you how you create web sockets and communicate because many applications are now nowadays relying on these technologies you also have a plug-in free environment where people can listen to audio video play video without even having a plug-in on their machine earlier you know there was a demand to have a plugin but nowadays you don't and you can create some [Music] content which creates a good impact on the user by using this technologies like svg stands for scalable vector graphics um canvas webgl and some css 3d and things like that unfortunately we will not be able to spend much time on these um because that is not something that we are here to learn correct but there is a very interesting to know i'll show you some resources that you can start using but you know each one of them has its own domain say you know for example svg can be used for ah creating dashboard applications like you would want to interpret huge data okay you cannot simply prepare tables to display so that's where you know svg and canvas comes into play and web gl takes advantage of the graphics acceleration that the user may have like graphic card they will be able to take advantage of it i mean the program will be able to take advantage of it and deliver really rich content i'll show you some applications that have been built and moving forward you should also be capable of doing that and we can improve the performance of an application by splitting your main javascript thread into multi threads you should all know the javascript runs in a single thread now how do we create sudo threads in them that's how the web workers comes into play and the new version of the http that we have that is you know uh the way to communicate from a browser to a server has also been enhanced uh there is this http version 2 and xml http version 2 xml http version 2 is a client-side resource that the browser is capable of making a request using ajax we will be learning that in this workshop ok so that gives you a big performance boost when you start using these technologies frankly there are lots that has been added and we would have so much time to just cover few of them i would usually cover html5 in a 24 hours workshop that takes it about three complete days right so there is a lot to learn but we will be focusing only on few things why because those are relevant for us for our line of work not everything is important um for our um course now so we will spend some time on uh headers and semantics and maybe you know we'll also spend some time on um in input types i'll show you an example of canvas so that you know we understand it and then we will move on to geo locations uh form validations and some local storage okay the rest of the topics are frankly not relevant for our line of work okay but if you say no no vijay i looked at you know this let's say [Music] drag and drop looks very interesting to me or you know this 3d canvas looks very interesting to me can you share an example i will do it but we will not be covering in this workshop i told you why because that's not the purpose of this workshop so the ones that i've marked in red are things that would require some javascript knowledge so that is why you know i will sequence them so that when we graduate and learn javascript we will be able to come back to these topics which is a part of this workshop as well so we will have javascript incorporated in this workshop okay so to begin with we'll understand headers semantics um not media attacks maybe maybe i'll interrupt media tags as well but we're we are not going to play audio and video in this workshop anyways okay so but if you find no knowledge i want to learn that i'll show you then we'll spend a lot of time on these input types which is also called as form api okay so i i guess today we should be able to complete most of these if we have some leftovers we'll continue them so new header tags i i guess you know i will cover this in the slides itself that we will you know spend time on some more relevant topics so let's head our course up code is pretty easy to follow along so so i told you earlier we had used we had to use html for semantics the tags the doctype declaration would be a pretty lengthy long one and we had three different types strict translational frame set maybe somebody someone may ask you in an interview that is all but practically these are absolute now nobody would even be using them but for you to understand when i say strict it simply means that i am strictly following whatever w3c has told okay so whatever w3c has laid out as standards i am following it in my application if that is so i would use a strict doctype if i am somewhat following it and sometimes you know i am not following what w3c says say for example b and i that we used in the previous exercise b is for bold and i is for italics actually these are styling components right they were actually supposed to be written in a different file called css and that would be applied onto your application so the recommendation from the w3c consortium is any styling tags will have to be written in css not in html so those rules if you are breaking them if you are using b tag and i tag in your document that means to say you are violating some of these rules correct so then you have to specify in the doctype that you know use transitional if not the browser should start showing errors okay and later on we had the ability to have a web page inside another web page using something called as frame sex so if you don't tell the browser that you know this application has many html pages in one it would just render the outermost frame the frames that are inside would be simply ignored because the browser made a request and the server sent one html file so browser rendered it the server then sent another html file the browser knows what doesn't know what to do with it so it would ignore it okay so in order to tell the browser that hey this web page is made out of several html pages so wait i'm supposed to send you more so that you can start rendering so you have to tell the browser that doctype would be frame set in the bottom you can see the dot type is html and this is for a four dot html4 that is 4.01 also and the dot type would be of given to us by the w3c w3c is that worldwide consortium thing and the dark type declaration is html 4.01 and transitional english language and if you want to read more about it you go to this website w3 dot org forward slash tr that is transitional and html4 power slash lose dot ddt loose simply means to say it is transition is loosely typed language i mean loosely typed loosely following whatever the implementation is you also had strict and frame set ddts so you saw this there's a lot of things that people used to do now that is replaced with something called as this don't you feel that you know this is so easy at least now i can you know relax i don't have to remember all of that okay so moving forward we will have to simply use this dot type so that's the new header next we discussed about this but i thought i will take you to the nitty gritties of it and we also had this namespace declaration that is now removed you just have to use html but to give you um give your application a better feel it's a good idea that we specify language we spoke about this as well because it can help the screen readers to start reading or interpreting this page in english and we can also specify what kind of ascii values or now what is the character code that we have used to generate this in this application using meta character set but that tag was also quite a lengthy long one http equivalent would be content type content equals text forward slash html so basically you are telling what kind of content it is when we create some server interaction we will again have to do this because from the server side we can send html files we can send text files we can send json files we can send xml files we can send whole lot of things right so we'll have to educate browser as to how things should be treated so we will have to specify this on the server side as of now the html page does not have to carry this information we simply will have to confirm what kind of unicode is being used in our page so you see the ones that are in black is what we should be using moving forward and in order to add scripts javascripts in your document and add styles in your document the old way was script type equals text for slash javascript this is the mime type that we have to tell the browser but since there is only one language should not should that not be understood by the browser there's only one that we can send they there can't be many earlier there were many uh languages that where that were used on the client side now you also have the ability to uh render v vb code on the browser c plus plus i will for a brief amount of time so that is all removed now you only can use javascript on the client side so you don't have to even specify that you are writing javascript similarly css could also be written in javascript earlier so there was a conflict will i should i be using css in javascript or should i be using a file by name css so now that conflict is also resolved we will still be using just css on the client side okay if you are working with external css file then you will have to specify what is the relationship because a document can take more than one css file i'll show you that when we move on to the dot type so this relationship can be stylesheet or can be alternate stylesheet as well as of now we have to use that but we'll have to specify you know where the external css file is so that we can provide it to the browser so these are some header tags so let's go to the next step so now we'll switch gears and learn about new semantics so what is semantics see earlier we used to use this stack called div basically div is a division element you can create a division of content using this div tags the purpose of this tag is to group similar kind of tags let's say now there are about three paragraphs i want to group them how you group them you wrap them into a div tag so if you keep wrapping your content in div tags it would create a mess of many many div tags and you would not even know for what these div tags are used so i think we'll go create a problem and then you will understand the solution and you will appreciate the solution i'll now go create a new file which i recommend you all do this is going to be called as step 2 semantics.html and we'll use our html colon 5 snippet so let's say here in this application we'll go create some header some footer ah and i mean that is heading and then footer content and then we will create some two or three paragraphs um to display on the page okay and i'm using divs to do all of them so this div will be to create some headings so i'll use an h1 tag welcome to my application so this is the heading okay and let us say i also want to do some navigation in my document i'll use a ul tag and insert the ul i'll use some allies and this li tag would be nested in a anchor tag a anchor tag will have an href that is a location where it should take the user when the user clicks on this button i'll have about five of them i'll give each one of them a number this one this is two this is three this four and this is five so this is for navigation and then the main part of the application comes into play so i'm using a div tag and inside the div tag i want to wrap some content now how do i put some content i'll use a div tag i'll put some content lorem ipsum is there some placeholder dummy text i would want to have about three of them four of them who cares i remember three four is fine and then finally i have a footer uh footer will also have a div tag and inside the div tag i would put some ampersand copy and say copyrights copyrights reserved by my application a is for an anchor tag basically it will create a link from this page to an external file okay so now if i run this page in the browser this is how my application looks not all that elegant but yeah somewhere we can start right so for all you who are waiting i will give this file this this page i doubt you know if it would be accommodated by the now it does not take it it does not take it so what i'll do guys is i'll put it on to a page that you can access this website called pastebin and give me a minute i'll create a login i'll paste this entire page this will expire in about an hour okay so please copy it before the expiry time so all you need to do is click um copy paste that i link in the browser and when the application shows you like this click on the raw and you'll be able to copy the content now there now you have copy pasted this code don't you agree then there are a lot of div david tags i mean if this is a simple application fine if it's a large application like you know you see very simple sorry very simple application if this had a lot of other content it would become very difficult for us to know what is this div tag doing correct and what is the purpose of this div tag what is the purpose of this div tag okay it becomes very difficult right so in order to um maybe you know this can also be like you know this maybe i have a few more content maybe i'll just wrap it into two and then i want to group all of them into one div tag i'm i'm not actually making this hard to um create just that you know i'm trying to demonstrate a very simple application and how would this really mean so now looking at these divs these divs what div tag or which one is it closing see at least no this is easy you can easily interpret okay this div is closing this one before but what is this closing what is this closing so it becomes very difficult right because this document that we have created is not semantic it does not tell you what is the purpose of this yes so we need to understand what these each one of these denoted what is the purpose of this as a developer that's where you know the new semantics come into play so html5 has introduced some new semantics these are new names for a div tag what is it it's a name for a div tag that's it so it doesn't do anything apart from that instead of using div tag you can use these now that is all it will also group but the question is when do i use each one of them there is a specific requirement for each one of them see nobody will hold you by uh by the these rules if you don't follow them okay if you miss one of them it's okay but if you are if you want to create a application which is semantically structured it is a requirement that you follow all of these rules so what we have here is header now what do you think header will do it will come on top of the page sometimes it can also come on top of some content correct that is where the heading comes so the easiest way to think about all of this is to relate this to a newspaper i am sure all of you have seen a newspaper right yeah so you will have a heading now what will the heading say some very important content that you would want to display and then you have a footer where will the footer come somewhere in the bottom header and footer is something that you can easily understand now if you have many headings you can group them in one h group there would be scenarios like this like for example a company name is heading company will also have some tag lines which is also a heading so you have a requirement to group them how do you group them you group them under something called as an h group tag easy is that simple header is on the top of the document or top of the content footer is in the bottom of the document h group is to group all the heading tags there is this stack called nav whenever there is a navigation that is happening from one page to another page you can use the nav tag to navigate from one document to another document easy and simple and now you have something called as a main tag the main tag responsibility is to group the main content of your application i'll show you this pictorially that becomes easy for you to understand now what is the main tag something that excludes the navigation and the header and the footer that's the main content then you have several sections so in the newspaper you have several sections right the sports section the finance section the entertainment section and each section will have lot of articles written in it correct under the sports section you will have lot of articles under the economy section there will be lot of articles under political section there will be lot of articles correct so now you understand what is section and what is an article section is a group of articles put together is that easy to get okay so now we are clear with header h group nav main section and article now you also have something called as a aside anything that is not directly related with your with the content that we are discussing can be put aside so that you can give a reference i mean if you open the wikipedia page you will see that there is a lot of references that are actually been given if i go to wikipedia not only wikipedia i'm using wikipedia as a reference but you could also use let us say no i'm looking for some see if you click on this you do have this main content okay but you also have some references sometimes you know it may come in the bottom ah see these are all references correct these are references that we have nodes and references sometimes these come in the right side or the left side as well somewhere in the right side or the left side as well see on the left side we also have some navigation which are not directly connected with the content that we are talking about okay anything that may not be directly connected to your document but that is like an also information read more information they come in the aside tag usually these aside will be either on the right side or on the left side or somewhere in the bottom as well a side would be something on the left side or the right side i mean that's that's the general convention that many people have but you can also put it in the bottom nobody will come and question why are you putting it aside that's because this is an asset i have put it in in the bottom because i don't want this to clutter the main flow of the content so that's an assay tag okay on the right side you see something called as figure and figure caption and time and mark okay now what is a figure tag you know that there are images that we can use right image can be created using an img tag we basically create an img tag and then you have a image in front of you and if you have a requirement to group these images together i want to group all of these images in under one section let's say these are related information this is a ah before the trip in the trip and coming back from the trip a sequence right so you have let's say now we all are planning to go for a trip before the trip in the trip and after the trip so there is a sequence or maybe in the trip also you know you you went to some place let's say you know we all went to jammu and you know we had a friend right who's from jammu here let's say smriti she took us to her you know state and city and she started showing us various places so we make a sequence of them and then we want to group them together how do we group them how do we group these images together there were no grouping tags for images that is why there was a requirement they created a tag called figure and when you have a figure tag you can also group them under a caption and add a caption to it so you group them under a figure tag and you apply a figure caption to it is that clear so you have figure and figure caption tag and now in order to denote time in your application you want to display time somewhere see by default if you are displaying time the screen reader would read it as 3 colon 0 9 p.m correct or no if it was to read the time now it would read it as 11 colon 5 56 am that would not sound like a time correct instead if you mark it or wrap it inside a time it will then read it out as a time it'll read it as time now is 11 47 am okay so you see there is a difference for the screen reader for people like you and me it may not make any any difference but screen readers will definitely get the benefit of using the time tag and whenever you have to denote time it's a good idea just to wrap it inside a time tag so that it becomes relevant for everybody and whenever you have a requirement to highlight some tag highlight something in your application you use the mark tag so it's like you know taking a marker then mark some content ok so i'll show you how you can use all of these tags in one example the example that we are doing now so in fact you know in my slides you do have um explanation for each one of them header will be on the top of the page or the content if required edge group will be used in group to group h1 to s6 tags nav tags will be used to group all the navigation which is navigating outside the application and section tag will be to declare a group of contents article tag is to group contents and then we have the aside tag uh i think i have a you know pictorial representation of this i'll probably show you this it's better i'll just make some small changes okay href is uh just denoting the link nav tag is used to actually do the uh or group all those stacks that has href in it okay i'll explain it becomes easy give me a minute so i was asked what is the difference between nav tag and href see href is an attribute of an anchor tag you go back here see there is an anchor tag correct anchor tag is an attribute what is an attribute it is a property of a tag correct is that clear so you write it inside the tag that's an attribute just a quick info guides intellipath has a php and mysql certification training program where you can learn all the important concepts from industry experts and gain real-world exposure to these technologies that is hdr and you group such tags together under one nav tag yes nav tag indicates that there are many links inside this page which can take you to different pages so now coming to this application that i have already shared we get we know let us all do this together so you understand things yeah so we have a header tag a nav tag a main tag header tag section tag article and everything so if you notice the main tag groups the main content of your page it does not include a site tag header tag nav tag and footer tag it is not bothered about it okay so this is the structure that we'll have to follow and apply so if you i have actually created things this example keeping in mind that sooner or later we will be using something like this so i'm adding one more tag here welcome to my application and the best for to learn html5.01 okay so we have um h1 tag and let us say this is an h5 tag just for the sake of it okay h5 h1 to h6 are different levels of headings that we can have in the document so go back this how it should look welcome to my application and so on and so forth now i want to group them together and we'll actually do that now okay so this what will this tag be guys now that you have learnt about these which tag will this be header correct because we have two headings here and then we are trying to group it you wouldn't be wrong when you do say that but more specifically this is going to be a header correct so i will now replace this with a header tag and just because we have a requirement now i will group this into an etch group tag so that you know we actually use all the things that we have learned okay inside the header we have an edge group tag is this more sensible now now looking at this we know that there are no div tags but the output would still look the same there's no change whatsoever we did not make any change correct so h group is used to group heading tags header is on the top of the document you see now coming down what tag will this be guys footer excellent so this is going to be a footer tag so inside i have another div tag i think you know that's okay we'll just leave it as it is this one so you can nest divs inside footers no problem i mean usually in i'll show you some of the web pages that i've done and then i'll show you footers can also have headings inside okay so if this was one of the recent websites that i created uh using a wordpress engine wordpress is also built on php so scroll way down here you see this is the footer this entire thing is a footer and footers also have headings inside them there's a heading here correct the heading here some links and buttons and things like that so you can you can add as many as you really want and now this is um a navigation that we are trying to navigate from this page to another page um what tag would this be guys so this would be a nav tag so you are the idea here is you all are understanding what is the purpose of each one of them that's that's the main key ingredient here and then now this um this small art you know tag here which is describing something what can this be section should be a group of uh articles correct article would be the right tag so we'll replace this with article tag now which all will be article all of these divs this this this this and this will be articles these articles can be grouped under what tag section tag correct yes you're right so i'll group this into a section tag so this is one section let us say this is a sports section and we have another section here ok so i will repeat the same process these are articles and this is a section tag so several sections can also be grouped in fact but in the presentation you can see sections can be grouped under what the main tag so in one document there can only be one main tag that groups the main part of your application i mean if you come to this page and you are able to see this if i take this off your page has nothing to display nothing meaning to display correct someone comes to your web page so that they can read the main content of the application so we'll replace this with the main tag easy so this is how you will go apply semantics in your application so let's jump to the next topic now we'll skip this not required skip this as well okay then we will on to form inputs now earlier we used to when we had a requirement to ask user to submit some information the only field that we would use is a text input i mean i don't know how many of you have worked with the web application development if you had we could you know gather um [Music] information of the user using text input so the user can enter some text correct but what if the user had to specify his favorite color to us i mean not a favorite color like you know i would he would want to share and tell us that this is the color that he would want to use on his application correct so and if he is allowed to type some color he may make a mistake as well right instead of red he may say reader that would be any relevant information for us into the black he may say block i mean maybe you know while typing he made a mistake okay so that would be an inappropriate data for us how do we protect that was one requirement so validation that is you know you validate the input before the user can um type so you have some new inputs that are available here not only just color i am talking about let us say the user will have to select a range of values so now you have some new inputs i recommend that you know you start using them if you have to build some application moving forward so we can search we can use the search color range time date time date and week and month and number email telephone number url so these are some inputs you see there are tons of them right now tons of them lots of them right okay so you have at least about 10 12 of them easily there and then you also have some outputs these are inputs and these are some outputs so if you just put some space around them these are outputs inputs where the user provides an input outputs is where we as developer give display some data onto the user's machine so these are inputs these are outputs okay let us now see how each one of them can be created so what i will do is i will create a template to add these different types of inputs i will share it with you and then i will add each one of them and not only that i will also show as a developer how you can extract the values of these okay we'll we'll do that now let's go create another example here this is going to be called as step 3 input api dot html api stands for application programming interface html colon 5 and i will now go use that and inside the table i'll use some the head the head stands for table header and then we'll also have table body we'll talk about that moving forward we have table head and table body and i will also share some documents with you that i suggest you know you go through them in the weekdays whenever you have time and make yourself clear about html okay because i see many of you are completely new and you may want to know um what these stacks really mean okay so i'll explain it to you with i mean i'll give you some documents that i suggest you go through them and you come prepared i'll use an hr tag hr is for horizontal uh table row and inside the table row i'll use a t h tag the first one will say the type or the name input name this is the first one and the inside this t body will use the tr tag tr is for again table row and this time we'll have a td tag td is for table data and we'll put some empty placeholder as of now so that it is balanced okay so ampersand n b s p semicolon this is non-breaking space so now if i go back and run this in the browser in chrome you should get to see this i mean i can probably put text here that way you'll actually see text here i will not only want to type that you know name but i want to show you how it is rendered how it is rendered by the browser so here i will show you how you can use a text input type text i'll go to this table and add a border because without this border we won't be able to distinguish how it is working correct let's say 0.1 all would be the same i don't think you know it would make such a big difference though no i can only i think the minimum is just one you can't use this is a property called padding i'll give about 10. i don't know if this would work i think it's called table padding nevertheless i think you know border would be good enough just you know note this down and we'll keep using this this one more that i want to add the value that is entered value entered and we'll need one td tag for that as well and this td tag will have a span tag what is the span tag now like the way div tags can be used to group elements like you know you want to group paragraphs into one you can create you know group articles into one day sections into one div you can use span to group inline elements now what is an inline element see this text that i have written here is an inline element the value entered here is an inline element out of them i want to just select this entered okay how do i do that let us say now we have this text called value is let us say this is a placeholder i want to select only this text placeholder and then you know change its appearance i want to select only this how do i do that that is where you know you use a span tag to select it is that clear but as of now we don't know what to do with that so maybe you know if um if i were to show you i'll use a style block we'll be doing this all of this shortly so if there is a span tag i want you to select it and apply a background color of yellow let us say sun run this example and it should apply so i'm selecting only this this text that is why i know this span is used okay for now i'm i don't need that but it was just for you to understand don't bother we'll be doing a lot of things with this span with the div in the css workshop as well just to get you started here i have a span tag okay and it is saying placeholder so i'll give you this file this file i typically i mean frankly don't like the border that's being applied so let's get rid of that but you know how it looks right so they have input text and then how it is rendered by the browser value entered but since you know we are battling between anywhere between 700 to 7000 types of resolutions i think in about 2000 i'm not okay these are different resolutions that we are battling with each android phone or each iphone has a different resolution altogether and the tablets are available desktops are available with different resolutions now people are talking about retina displays and plasma displays and 4k resolution so all of these devices will have problems rendering these tables so it is a good idea to avoid tables i will show you tables are meant see it's not that you should not use tables but you should not use tables to do things that are not meant for the table to be used many people including me when i was working in companies i was trained to be working with tables to create web applications that's now a thing in the past okay so moving forward you should not i mean see many people become very comfortable when there is a structure for the document okay and i don't find you know nothing wrong in it but as i told you tables do have performance issues tables do have accessibility issues moving forward when you develop an application somewhere you know you will have to the rubber should meet the road right so somewhere in your application should be validated and standardized and that's where you know it will be removed and i don't know of any company which would simply approve of um you know a non-standard application being deployed on their server because clients are watching them right what are they trying to deliver so i don't recommend you use tables for layouts if somebody has told you that no you should be using maybe they have a reason for it there are some cms the content management systems that organize things in tables for for us and then it gives but nowadays many of them also have moved out of tables and they would be using divs instead see why not use a div divs are a lot faster in time in times of the rendering comparison it would take almost less than one third of the speed that is required by a table compared to a div tag so if you think about the renting speed if a table takes 10 seconds the day will take about three seconds there or less than that so it's not faster is what my opinion is okay but i think you know see as a developer i recommend you guys to have one one idea whenever someone says something don't simply accept it just because someone is saying go validate it okay do some research then you will realize okay so i am getting another question what is the use of td tag td is for table data so whenever you know inside the table you want to display data you would use a td tag so that's like you know the smallest cell that we are using inside the table so you see this text here is rendered inside a td tag this input is also rendered in a td tag and these things do get changed okay so some i told you right when i was in a company people trained me to work with tables and that's changed that got evolved because there were some problems associated with it so if there is a requirement for you to create email templates using tables please go ahead and do it maybe they have a valid reason for that okay but just have an open mind when you are learning all of them and then try to implement it whichever is more appropriate for you and i am not an advocate for the good practices because i have walked a lot of paths where good practices are not well paid and sometimes you know they all have deviations and they all improve or they'll all they'll all change over a period of time so first get the approach of whatever makes the board sale and then look at the standards and then try and apply them okay so let's now go to the next step now what we'll do is we'll apply some different okay here um in this example we'll go create these many inputs i'll show you how you can oops see i will show you how you can create a input type search and so we'll all do that together okay you guys should copy this this tr tag paste it again change this to search the input type will be changed to search and maybe here i will say search and maybe i'll type text so that becomes more appropriate if i go back and refresh the text value is placeholder search values placeholder now both look the same right they both look the same what is the difference between these so you can write some text no doubt you can write some text but hey what there is a x mark here which tells you that you know you can click on this to get rid of the text that doesn't come with text it comes with search because you can change the search term as you want you see there is a difference now right they are not the same just because you know you said the input type is search it'll then become search now let us clone this i will now add color so we have search color range time time date date time week month and number see some of these are not standardized um i think i've removed it it was called daytime local i think i've removed it but again you know not all the browsers have standard support for this something that you need to keep in mind so let us go create all of these color range time date date time week month number okay here this would be color and this type here would be color and the color value is here let's clone this color we have range and the type input would be range the range value is here this range value see there is a new input type now i can select color i can select a range these are new and then we can use time date time and date back here we have time time so this allows the user to select a time see i can select the time now is 12 um 28 12 28 pm select it over yeah and you also have date and date time together so you you may want to select the date and date time i think i'll complete all of them this would be date and time date time so you see the date time doesn't work but you have something called as daytime local that is recognized by some of the browsers see date time locally supported date time is not it's something that you need to keep in mind daytime local because see what do you mean by date time it is the local date time right the user is selecting his date and time so earlier we had the ability to read the date time on the server side so that is now deprecated so you have that is being now replaced with date time local then we have week month and number so that should be easy for us to complete week month number week month number okay so now we have email tell and url as well so let's go create that also email tel is for telephone number copy paste it and url there you go so you have all of them on the screen and if you notice you know number has a new stepper email does not have anything it can take any content url can also take any content they don't change much you agree they don't differ much but there is a significant difference between all of them now in the slide in telephone yes not necessary as of now it it can take anything and i'll show you why okay so this is what we have okay but now if you display it on our device mobile device that is see this is the standard us you know the standard keyboard for a text input if the input is text but if the input is email notice you know the space bar accommodates an update and a dot there correct have you ever tried that you know when you are typing email on your mobile phone your space bar also has at the rate and dot it happens even on an android phone and an iphone both and if you are using url again the you you know the keyboard layout will change the space bar will accommodate forward slash and dot com to help the user type the url really quick and when the user uses number then the keyboard will only show him the number and when the user sees telephone number there the keyboard will only accept hilly phone numbers let's see we as developers who are using a keyboard don't expect that keyboard to change that will not right so only the soft keyboards software keyboards have the ability to change and accommodate the user inputs so this is an advantage that you get but develop you know users who are interacting with their application again are free to type whatever they want but if you have forced it to enter a number then the number keypad is automatically enabled but the user can click on this abc button and then switch back to entering some text he can do that and when the user is interacting with the input type telephone he can enter a telephone number along with some um special characters like you know pound and hash and plus plus and plus whatever so they can use all of these special characters in the phone number so now as a developer we have created this application the user has got this now the user will let us say change some value let us say we will type some value hello there i want to as a developer i want to read this value how do i read this is the question how do i read it and probably put that here so if i have to put it here i know i have to read it as well isn't it so let us go ahead and write some logic now okay this is where you know we get into some basic javascript easy i will write a javascript here so you in use a script block and write javascript there okay we will go write a function that can be called i'll call this as get value this get value we'll talk about this in greater detail when we get into javascript as of now you just copy the snippet at least you know get the get a hands-on on how javascript can be written so i will be taking two parameters here this is a function the code block which has a name yet value i am expecting two parameters to be passed inside the first parameter would be um let us say i will call this as input and the second one will be called as an output ah output so we have an input and then we have an output so what do i want to do with these two is i will use this input to look for an element that is giving me the value and i'll use this output to assign the value from the input you get it so here i will go and say document dot get element by id output dot inner html equals input um [Music] document um maybe i'll say input dot value okay see it's okay if you don't understand this as of now because moving forward we will be spending some time and then it becomes crystal clear for now we will have to somehow make the board sale right so what i am trying to do here is i will take the value from the output and i will assign it to the input so in this workshop guys i have i am creating all of them all of these examples from my memory and there is no script that i'm following so there would be some hiccups at times something which is not foreseen so try and bear with me so now coming back to this example let's just check you know if this is working so on this um [Music] input i will listen to an event called on change and when on change happens i'll call this getvalue function now this getvalue when i am calling is supposed to get two parameters the first parameter i would say is this the second parameter would be the id of the span tag so the span tag will have an id attribute id is like a unique identification for this stack it should be unique across the document so if you use one id here you can't use the same id again i mean if you use it doesn't mean that your browser will get angry on you no as a developer it is not a good practice to use the same id multiple main in multiple places because id is meant to be unique i mean if you have many ids in your document then your document will simply start ignoring the remaining ids as long as it has got the first matched element so that will work against you so watch so this i'll call this as text ip ip is for input so this value is something that i will pass here like this this name i have passed here so this becomes the output the this is where i'm i'm trying to display correct and the input is this we'll understand the keyword this in a greater detail moving forward okay so if i now refresh and if i type something hello there and i come out of this see the text is not transferred here from here to here so what am i trying to do here is i will read the value from this input and i'll assign it as an inner html for the output so you may ask for what is inner html don't worry we will have topics that will be covered at a later point in time where we get it so as of now um it's just important that now we get to see an output so i'm sharing that snippet but later on i'll show you how exactly all of these would work cool let's go to the next step guys so we can the way we have i have written this function it can accommodate any value in fact you know i can now take the same program i suggest you can do that we'll have to just assign an id to the span tag which will be you know starting with this search and end with ip okay so this would be color ip so on and so forth so let us go ahead and do that here the span will get an id search ip search ip so i got search an ip there and on this input we'll go use that on change event and we'll say get value and we'll pass the keyword this and then in quotes i'll pass search ip so if i now go back refresh if i type something in the search if football football is here if i go back cricket cricket would be displayed here you see so you can now try with all of these like for example go to the span tag and assign an id as color ip and i go to this input and type on change get value and pass the keyword this and in quotes i pass color ip that would also display the color down so if i click on this and select some color ok select the color you can also use this color picker to pick any color from the document so if i come out of it it gives me the hex value of the color okay frankly i can use this to do something so i can i can now work with all of them cricket i'm not a big fan of cricket i hate it now that is using it as an example hello there and it okay so here i can select this range and then i can get the value here so in order to do that go to the span and i'll use an id and say range ip and i frankly you know i can copy this it looks like you know i will be doing this for a lot of them so this would be a range ip so go back refresh so when i am changing see i am able to get and what we understand of this range is the minimum is 0 and the maximum is 100 and we can set any value in between easy similarly we'll go ahead and add this on all of these inputs input on change this would be time ip and this would have an id called time ip this is a date ip this will have an id as date time ip it should have been daytime dash local but in javascript you can't use the minus symbol because this would this would be treated as minus okay so i'm escaping that i'm just using date time here and this is uh sorry daytime ip i forgot that daytime ip and that should work so this and this should match isn't it so now let's go ahead and this would be a week oops month ip i had made a mistake just realized that you know there was a mistake in that date okay check check check it becomes quite monotonous right type all of them uh i think we have one or two more we can complete that that way you will have a full working example save go back and relaunch everything should work now so if you select a date and time that would be applied you can select that would be applied and you not only select the date but you can also select the time that would be applied and we can select a week it tells you the week of the year that's taken we can select the month that's taken we can also change the number uh there is a problem month and number the conflict let's say month and number yeah so this should be month and this should be number ip correct copy paste problem so month number that is fixed i don't think anything else has that problem let's go back check refresh um i can select the week i can select the month working i can select the number that's working and add an email i'm putting my email address that should accept telephone number some number this is not not my number i've said 987654321 okay that works you can put the url http colon slash slash um www.google.com [Music] that should work okay so you you saw how you can use these inputs and you saw how you can extract the values moving forward we'll have lot of business doing this because most of the php would be related with forms we'll be using users inputs and validate them inside okay moving forward i would want to make this look like a decent web page now how do i make it so as of now this looks like this doesn't look like a page it doesn't look like a website web page right how do i make it look like a web page so there is a library called bootstrap that we can use a getbootstrap.com is a website i'll i'll walk you through this we are not going to do this just make a note i'm just trying to tell you that there are flavors available so you don't even have to write your own css just a quick info guides intellipath has a php and mysql certification training program where you can learn all the important concepts from industry experts and gain real-world exposure to these technologies you can use this css sheet that is already provided to you by best of the best companies twitter is created by um instagram people or facebook rather and in fact it was created by twitter group and people started realizing that i mean people in twitter started realizing that yeah bootstrap is going to help many other developers and they open source it so we can use this it's available you can simply attach to your application notice there is a css library here you can attach this to your document and your document immediately starts becoming the you know better see i'll just copy this and i paste it here you don't have to do this because we are not going to do this either i am just showing you see if i now refresh your document immediately changes right and you can then start attaching you know all the different features that bootstrap does offer you don't uh you don't need an in-depth workshop on this um it is like this um you know you you learn a small part of it and then you know you get comfortable with it and then you extend your learning and so on and so forth so if you want to create a navigation that is you know if you want to create a navigation in out of this it's as easy as working with bootstrap here so there is a nav or nav tabs that you can click and if you notice you know they are generating from the uli anchor tags from the uli and anchor tags that we have here we do have uli and anchor tax so that is all that is required so if you add this class nav i am just doing this if you want you can also do this but we will have an exclusive class on this as well so we can attach this class here so you are basically adding a class attribute with a value nav attached to it you see and for this li tags we need to add this tag nav item copy this and where all we have this ally tag here here here here and here so you paste this you can also paste okay i already have it on my clipboard i can paste it wherever i want so and by just this you know you should get your application look like this see pretty easy isn't it guys so this is how it is actually looking if you you know want to add more styles you can actually look for you know other style behaviors so not only adding nav but if you say justify um content you will be able to make this in the center see this is now in the center if you want that to look like a bubbles you can there is one more style that we can add on to it like this nav nav pills so this will make it look like nav pills i mean you can stack all these classes onto your element that's what i'm trying to say see it's pretty easy now you can also say which i want to add on to a very specific element not on to all of them of course we can see as of now we have made all of them active that was a mistake not all of them are active right at any given point of time not all the links should be active so if i now go back now or not all of them are active you can actually click on in each one of them and it is trying to navigate as of now we have not created these links but when we create these links you will actually see them changing from one to another exactly like this now this is one of those you know css in you know frameworks that we have we have others as well so you can also use something called as foundation it is by a company called zerb this library is used by facebook okay so if you can click on download foundation of course you know this downloads is a zip file we still can click on getting started there used to be a css file for download for link so you the idea here is you know you can also um use this library i'll show you how you can use this as well it's pretty easy okay so they have removed there's some case studies uh there are some resources so you can probably you know click on one of these applications that has been developed using foundation okay so you have you definitely have a lot of help and if you want to create uh you know some something from start which uh which already has some amount of content for you in place you can click on this this will create a news magazine theme then the css is already loaded for you okay so you can use them maybe you know in the next couple of classes i'll show you how you can use one or two of these and then you can you can start learning but what am i trying to say here is there are many libraries that are out there that can help us it's not that no you have to write everything from scratch like the way we did okay but however it's it's it always space if you know what exactly these libraries are doing implicitly so i'll go ahead and delete them okay i'll go ahead and delete them see because this workshop is all about creating everything from scratch that way you will know exactly why this line exists however once you understand how these libraries are functioning you can go ahead and start using them you don't have to write everything but why would you need to know all of the syntax because it's it's usually that you don't want to use somebody else's library as it is and if you have to make some customizations you know exactly where to make you know such changes so you come down here and let's say i would want to make it look like maybe something like this okay but not the narrow part it would it is possible it we can do it but just that you know it will take more time so we'll just stick to some basics so as of now this is looking like this this is the same document that you also should have correct so now i'll go ahead and write some styles from the scratch now i want to you know make a selection on to this header i want to select this header how do i select this header header is the name of the tag correct so i can directly use that header like this and using these curly brace curly brace i am assigning a style property to this in fact this is called a style declaration block a declaration block so why because there can be many declarations in it so you are you know assigning many properties and values to them so this is a declaration block so this is a selector this header is a selector this is a declaration block inside the declaration block you specify the property that you would want to select let us say i want to assign a background color background color is a property now what is the value that you would want to assign let us say i want to assign some teal color so if i run this example the header will be in that color not a favorite color of mine but nevertheless you know if just to illustrate okay you can choose different colors if you are working with visual studio code you get to see even colors here it's quite a useful feature so i can select you know dark slate grey onto this header so it's working but the text here has become black so we would want to change that so i'll say the color property now background color is for the background color is usually for the text so i'll select some floral white color for the text there you go and i want to apply some basic padding to this don't bother about this i will again come back to you and explain padding exclusively but padding is easy it's just that you know you have some extra space around this element so you basically add some padding to this element see you've got some padding there and if you don't like the font we can change the font i'll simply say the font family would be trebuchet ms save run this example see it's looking nice i mean at least compared to what we had before this is better and i would usually want the same font and you know everything for the footer as well for the footer element here that is the footer element so i've selected footer this is footer so you've got the header and footer since you know i'm applying the same font and same style and same declaration should i repeat myself as a question you don't have to you can simply comma separate add another tag right there so this style declaration that we have will be assigned to both header and footer easy it looks the same so i've applied some basic style declaration block which contains several declarations and each declaration is made out of a property and a value and i have applied it on to this element here and i can apply the style for nav we will do that in the css workshop for now it's okay i'll just leave this part aside and i would want to take this section and i want each section to have a different color so how do i do that i can take this section i want to apply background color i will apply a background color but definitely not a slate gray color i want something more maybe subtle dark scion i don't know if this would make sense let's go try that out okay not my favorite colors just that you know i'm picking some color okay and so i will also want to add padding onto that send 10 pixel there is a padding and we would also want you know these sections to be apart from each other i don't want them to be touching each other and usually you would want to add a header for the section i mean if you go back to the documentation whenever you're working with a section a section would usually have a heading right or else how will you distinguish it see i was talking about the newspaper analogy how will you know that this is a finance section it will have a heading right how do you know that this is a sports section it should also have a heading so usually you will have a heading inside every section so headers will come let us say this is about our company so this is about our company here and maybe you know this is about past and this is present so if i go back so i do get headings i want them to be separated i don't want them to be touching each other so what i can do is go give some margin as well so go to this section i'll go give a margin what is margin margin is space outside and where all do i want to margin i want to have a margin on the top and i wanted to have have margin on the bottom not on to the left and the right so i can say margin top is about um 5 pixel 10 pixel maybe and i want margin on the bottom as 10 pixel so if i go back see on the top it has 10 pixel margin on the bottom it has 10 pixel magic and you may say okay vijay but this one in the bottom should also have 10 pixel in the top and 10 pixel in the bottom sure enough it has 10 pixel in the top and 10 pixel in the bottom but both of these are asking for 10 10 pixel so that would have made it 20 pixel but in css there is a rule called vertical margin collapse which means if vertically the same margin is applied they will collapse so they will still use the highest margin so that will make sure that you have 10 pixels only because both of them are asking for 10 pixel 10 pixels so it would be 10 pixel so that would make your application look like this and i would want to apply some um different uh color for these articles so we'll do that here article uh i'll have a background color maybe dark gray and the font family is arial and the padding inside would be about 10 pixels each and a margin on the top okay all of them will have a top margin of about 10 pixels save and run this example and it should start looking like this okay maybe i'll make it a silver light gray okay so now you got this example to work they are looking nice isn't it but let's see what is the problem that is associated with this now i'll go to this main and i'll also apply small border around this so that let that not be left alone apply border oops water border two pixel solid um gray so let's go check so there is a border and we apply some i don't think you know the border is not looking all that nice anyways so i'll make this a background color some way to represent this guy that is all okay i'll apply some padding in the top or maybe you know padding all around for about five pixel so you see there is a padding now you may say no no there is more padding up i'll tell you why because see there is a heading here right so the heading is asking for some extra space that is all um and again uh here i might have but we can work around with that not a problem you're coming back to the context we have we we get to see the you know the main tag as well that is all the point is and make it even more lighter it will be very subtle but you can see it that is all it okay so now if i try and run this application if i run this application using chrome this is what the users get to see but if i try and run this application onto a client who is using an older version of ie older version of ie see this already seems to have a problem see the main tag is not getting rendered here you see that the main tag is not getting rendered i mean if i put some content here you'll know the main content so i type and if i render see this main content now is showing but if i have if i remove this if i remove this you will see um sorry am i showing okay let me just put this back then okay i was showing you in a wrong window so let's only stick to ie so if i refresh see the main content is shown here you see this this is not how it is displayed here isn't it this is not how it's displayed here which means to say every browser has its own ability to to understand these components not all of them understand it same now that becomes a problem because you are trying as a developer to make things uniform and browsers are trying to break them and they are not trying to break them but they break on browsers so how do we address this is the question i mean this is bad this is okay but if i take you guys one step back then if i show you the developer tools that is developer tools and from the developer tools if i change the version to let's say ie 9 or i8 perhaps so none of the styles are working and it looks pretty pale isn't it i mean this is not how you wanted your application to be isn't it this is how you want your application it is not how you wanted your application to be right so what we can do here when what is happening in ie is because see when ie 9 was around ie 8 was around these stacks never existed correct these were newly created header and h group and you know nav and main tag section header and footer all of these are new tags i did not know that these stacks would come in future so how do we support but many people will still be using i8 let's say you know anybody is using anybody who's using windows xp would be using i8 or e9 so they'll have a problem so how do we address this uh this issue so what we can do here okay html5 tags or not no it is not that it is not supported on ie uh it's just that you know html5 which was introduced in 2004 2005 they these stacks were created but i you know was created much much before so they did not know that these stacks would be coming at a later point in time correct that makes sense so now you will have to educate the browser that yeah these are tags i want you to render how do we do that okay so i'll show you how you can write a small snippet to get this this job done and in fact there are libraries that are written in my slide you will realize that there are some two slides that i skipped there is one library called html5shave in fact you know they should have actually called it as shim shim some mistake by one of the developer he called it shiv instead of shim so shimming is a way of creating fallbacks for your content okay so you can also use html5 boilerplate or a library called modernizer and again and get this job to work however let's say i want to know what is written in this library that's exactly what we are trying to do here we we are trying to recreate whatever that library would do for us so what the library is doing is it is telling the browser that these tags do exist header footer section article and main to exist now how do i tell the browser that these tags exist we can go create a script block a javascript block and we will go create those tags i'll say document dot create element a method called create element and you will create an element called header easy so with this command alone header component is created and the browser should know that there is a component called header see headers came but see this is not how the headers would have actually come isn't it i mean they are they are being displayed that is all the styles are now being displayed and things like that so we need to make one more fix here this is this style property see whenever you create an element like this if you want to create an element by your name you can do that you can simply say document dot create element vijay you can create legally this will be an element that is now available for you after this line you can actually come here and create a tag by name vijay that will work this will work so if i go back to the browser see this hello vijay is working but how should this be displayed is something that we have not declared so when whenever you are creating a tag by default you are creating something called as an inline tag just keep this word in line we will discuss about that moving forward inline tag and when we get to that point i will explain it to you once again just in case you forget okay so i have not only created this tag inline so this is an inline element but i would want to declare this inline element and change its behavior to a block level limit how do i do that i'll do that here if there is a header i want it to be displayed as a block level element so with this a combination of the style and script we are declaring this tag and we are declaring this to be a block level tag i mean can we do this in the style in the script block yes we can we can actually do that we can you know pass that to an element and then assign as of now i'm showing you the most easier way so if i go back and if i relaunch this would work the header is now fixed so whenever you know you create a custom tag it by default is always an inline element because inline is the default okay and now i not only want to create a header i want to create a footer tag i want to create a section tag i want to create an article tag i want to create a main tag what else do i have header footers okay then there is this nav tag as well so i've created these mini tags headers footer section article main and nav i think that is all that we have used in this work you know in this exercise okay but we did not do any styling on that i guess yeah we did not that's okay so now we want to declare all of them as block level element like the way we know we did a grouping selector here we can create a grouping selector of all of them header put a section article and so with this fix all of these elements will be a block level element okay so now if i go back to the browser and replace and refresh this as you know the css everything looks applied as we expected to work in the new version as well so this is a new version new version and this is the old version okay you can go in further down version 7 which is like you know absolute now um nobody would have windows 5 windows 6 and things like that but still our application will work so you should know what is wrong and how you can go fix it now to help you there are some libraries that are written by developers and that can be used now you may ask one important question which i know that no these syntaxes are helping older browsers correct aren't they helping older browsers like ie9 and below but now the question is why should i have this in chrome as well even chrome will have that same script block correct because we have written in the page it should be available everywhere it is available on chrome it is available on firefox it's available on i it's available everywhere now how do i conditionally make this available only for ie not for any other browser isn't it so you have something called as a conditional comment that we can use this is something that is created by microsoft because they know that people would want to you know fix such errors can use them and this is a very handy comment basically if you want to create some styles specifically for ie you can use this this is only for ie okay not for firefox and not for chrome so here i come and then i add this dot you know this style ah what do you read from here is that if less than ie9 okay if less than ie9 this script block will be executed that's what it is trying to say i don't want this script lock here i will push this script lock inside instead now you all say no no we say this is a comment yes this is a comment for the rest of the browsers and we can also cut this cut this i use a style block so is this now justified yeah so what i did earlier was a inline ending tag so now this is style and this script both of them are in a conditional command if i go to other browsers and refresh and if i just inspect this is a comment here is a comment it did not uncomment itself correct this is a comment but if i go to ie which i think i have closed let us go back to ie and load this document and precept12 and we are seeing i8 see if i go to ie 11 and in the dom explorer you will see that in the head tag this is a comment correct can you all see that this is a comment here i'll just expand this little more so you see this is a comment why because i'm using ie 11 but if i switch to i8 this comment will be uncommented and then you will have a script lock and you'll have style block and everything you see this there is no comment in here so this is a conditional comment that we have written a rest of the browsers will not even be bothered about it it only makes sense to i okay whatever makes ie happy isn't it okay so you you understand how to deal with headers and how to create a polyfill for the headers so this idea of creating a fallback is called polyfills okay or work around whatever you would want to call but you know how to fix those errors that's the bottom line so then about inputs again you know you may have a problem that you know inputs do not work with older browsers unfortunately there is not too much of work around for that however if you want to say no no vijay i want to learn all the workarounds where will i learn you go to this website called can i use dot com make a note of this can i use dot com and here let us say i'm looking for form [Music] attributes let us say range input type okay so this is what we should be looking for input type so if you see the range is an input type you agree this one wherever this one the range input type range this one this is supported on these many browsers any whichever you know is in green you have the support for it whichever is in red you don't have the support for it so you do have some resources that you can use um a range range library with older ie support so you can click on it and there is a library that you can use okay so that is why you know i will leave these to you because it is not um relevant for us to [Music] fix each one of them because for each one of them there is a different library for each one of them let us say i want to have color how do i display color there is a different library for it it there's no one solution for all the problems so if i look for color input type color again you know there are several resources okay microsoft is not no polyfill there it is so you click on this and then you have a polyfill the color polyfill so you should know how to use it so you can use it as input type color but you provide this library you add this library and it will make you work so for every feature that we are going to learn in future you will have a solution because see a problem that you are facing now is something that others had faced earlier right and they would have fixed it if someone had you know a real requirement they would fix it and they will make it available for others to use and you can also do that i'll show you how you can collaborate with others and then provide some solutions as well it's a good idea isn't it i mean many people are always waiting to you know create a helping library so that they can share see like the way you know we created this here it was not too much of a work actually to think about it but it's a utility it can be useful for many people right now especially you know when you are when you had to use other features as well remember you know we had another feature called time and things like that and then we had something called as mark and other new text mark was a tag you remember if i use mark and then i run this in the browser in other browser in chrome see this is now marked highlighted but this would not work in ie correct so how would we fix this again we had to go back here and create a tag by name mark now mark is an inline element you don't have to specify this as a block level element you'll have to however look for the mark tag and make sure it has a background color of yellow and the color property would be black why black because i want the text to be black i want the background to be yellow that is what you know this guy does isn't it so this will fix in older browser as well so you can come up with all such fixes and call it a library see this took us about 5 10 minutes let us say if i did not have a knowledge of how to work with this i still would have you know started looking into the documentation and found out what these headers are basically becoming say i told you that you know this is this is an inline element how long will it take for me to realize that anything that you create with the create element will become an inline element you'll have to look it into the documentation right and we know that whenever we are working with this h header this is acting like a block level element so we need to fix it so it would have taken me like one or two hours and then i can put this as a library so others can benefit from it and that is how people have created this website can i use dot com anybody can contribute to it if you have a solution you can actually contribute to it okay so now moving forward let us look into the other features of html5 as i told you we would not be covering all of these because they are not relevant they are not required for um our example our line of work it is not required but whenever you know you have time it's just you know you start digging into each one of these apis these technologies would change and because even for recent trainings i have delivered all of these so i know how it would work now coming back to the next topic that we have in hand out of this so we worked with uh headers semantics input types so for us to work with media tags frankly you need access to some media okay um maybe you know we will use this at the point where we are really bored with the current topic that we can play some sounds and songs and video files that is what is the purpose of the media tag i'll take you to the next one which is um working with the form validation working with the local storage and maybe you know in this workshop we'll also address web workers websockets we need some server side integration or let us see you know how far we can go today ah without you know pushing too much so we should be able to comfortably cover few of these if not we'll you know switch gears and we'll probably learn something about a canvas as well okay that's a cool topic to know and then we'll also cover some geolocation okay so maybe we will first start with geolocation then we go to form validation and then i will show you the local storage and if you still have time i will take you to web workers or maybe we come to canvas okay so let's begin guys so this was step three [Music] so what i'm planning is i will go create some folders call this is day one day two day three day four i'll push all of them in the day one folder now i'll go create another folder day two and here i will create another example step for geolocation dot html okay so we have our application ready so what is geolocation what is the advantage of it and when do i use it so i have some slides for that so let me help you walk through that just a quick info guides intellipath has a php and mysql certification training program where you can learn all the important concepts from industry experts and gain real world exposure to these technologies there it is so geolocation is a html5 browser api the browser api means to say this is a feature that is enabled because of the browser browsers support it okay not the html tag html tag can leverage but somebody will have to give us the resource isn't it browsers do that and geolocation can be obtained in different devices in different ways for example if you are sitting on a computer which will have a network cable attached to it then we will be able to derive it from the ip address okay that ip address tells you from where you belong okay you can also do this via php but you can do this with html as well if the user is using a wi-fi spot that you know if you are using a laptop with some wi-fi we'll be able to derive the wi-fi sports location i mean are you in an airport are you in a mall are you at your home so we'll be able to derive that so this is like you know a street level accuracy can be obtained with an ip address an area level accuracy can be obtained then we can tell you that now used um in this area of bangalore is in that area of chennai is in this area of pondicherry is this area of you know jammu and things like that but we will not be able to specifically tell where exactly with the ip address but with wi-fi spot we can specify and tell okay this is in the block level building level accuracy can be obtained with the gps however if you are using the same application on a mobile phone the mobile phone has something called as gps so with gps we will be able to accurately identify even to some feats like you know 10 feet 15 feet 100 feet and things like that so geolocation helps us to locate the user's position um again you know there are few other technologies that will go hand in hand with your location geolocation will tell you the longitude and the latitude but when you have the longitude and latitude how will you locate on the map okay you need some mapping api right so google used to provide mapping api free for some time from the last couple of years they have stopped sharing map api i mean it will cost you money that is what i am trying to say but if you have you know access to developers account in google which i do have but uh again you know i have exhausted all my free trials um so if i now start using they'll start charging my car it's not worth it okay so it's just that you know it'll show the location of the user okay i'll show you how you can derive longitude and latitude i'm working on using another mapping api called open layers which is an open source mapping api or yahoo also has mapping api that we can use but i am i've still not created any example but maybe you know by next week i will show you an example and you can also work on it it's pretty easy though all you need to do is provide latitude and longitude to those maps and it will give you the location so now the question is how do i derive or what is the api that is available to derive these longitude and latitude so navigator refers to the browser so this browser chrome is referred as what navigator if a user is using firefox that would be the navigator if the user is using ie that would be the navigator so the navigator very this property refers to the browser that the user is using okay so now navigator will have a property called geolocation if it is available we can call these three methods get position get current position watch position and clear watch now the difference between these is that you know this get current position will make one short request it will just make one one time request it will not keep making a request every now and then okay but on the other hand watch position will keep making a request every few seconds the time the duration or the interval can be set by us the but the watch position will keep making a request once every few seconds once every few minutes to find out you know where the user is where the user is i mean this is what we would be using if you are using a mobile application to access your location because if you keep moving your location will also keep changing isn't it you've seen that on your mobile phone but now that you know you are sitting on a you know in your home and maybe you know if you are having a desktop not a laptop it becomes pretty difficult right i mean you will have to move around with your desktop and see if the location changes that's not fair so if you are using a laptop or a mobile phone to access this application you will actually see this change okay i'll show you how you can do that but um if you are working on a desktop it's a good idea that we use the get current position the methods so the properties are same for both of them get current position is a one shot request watch position is a multiple request and then you also have something called as clear watch now once you once you started watching you also would want to stop watching right so how do you stop watching for the change in the url uh change in the location you call the clear watch and set the watch position to it and then it will stop watching okay so let's see how it can be done and this get current position again guys will give you a success function or a failure function in fact get current position method will take three parameters the first parameter is a function which will be called when there is a success that is when the geolocation is obtained that's a success function if the geolocation is not obtained that is an error function that is a failure function then we have a configuration object that takes several parameters from us enable high accuracy is by default set to true if you don't want to use enable accuracy only then you say enable high accuracy false i don't know under what circumstance you would want to do something like that but enable higher accuracy default value is true which means to say it will fetch the accurate results then we can also set timeout here this is where you know that interval will be set if uh sorry no not this one the maximum image will be setting the interval the timeout means to say i will wait for this long if i don't get any response i would call the error okay so timeout basically tells how long should i wait for the response to come back if i don't get a response in five seconds like the way i have displayed on the screen i would be throwing an error and the third parameter the maximum age tells how long should the user use or how long should the device use the current location as the active location which which in other words with what frequency should i make a new request to find out where the user is okay so this maximum age provides the interval with which i will have to make a new request so i have shown six seconds which means you say after six seconds i will make another request and find out if the user has moved from his location okay so there is a lot that actually goes in between as well so the maximum age is a quite a dynamic property it is not going to be six all the time let's assume the user is in the same place so the browser will realize that okay his position did not change and the maximum age property will be automatically keep increasing okay so the browser basically does something like that okay so let's see how we can leverage or use this this is an example for geolocation so i'll put some logs here i'm using a ul tag with some allies in it and let us say we would want to have about four of them so notice you know this is an emit code ul um angle bracket li multiplied by 4 which means i want to have a ul and inside the ul i want to have an li and i want to have four of them that's what it you get okay so this is the snippet make a note of that so leave this snippet here so with this i get this and inside this li tag i want to display the longitude the latitude the altitude and accuracy in fact you know from this position object you can find all of that out now the question is where do i get this position object see when you get the success function right you get a success object when you get the failure you get a failure object so the success function will be passed that success object failure function will be past the failure object the failure object will have some failed information success function will have the success information and a part of the success information is that you get something called as calls so from the position you can derive something called as chords chords stands for coordinates and from the coordinates you can find out the latitude the longitude the accuracy the altitude and the speed and the heading and all of these details out of these you can see that these are marked in red they are marked in red because they are not available on the browser as of this date but what we can expect is we can understand when that request was made so we get a timestamp and what is the latitude what is the longitude and what is accuracy of that longitude latitude this accuracy will return the value in meters so from the location that i am about to discover how long do you think i am okay it gives you in meters if you are in a situation where you have lan on you know to your desktop uh this will be sometimes even in kilometers but the duration the the distance is in meters you'll have to you know divide it by thousands so that you can calculate the kilometers from that however i'll show you my location okay uh so altitude is something that you won't be able to get so what we will do is i will use this to be a timestamp so i'll put the timestamp above so i want to know when this request was actually made okay and i'll go create some span tags here each one of them will have a span tag where i will be able to put some content and the span tags can have an id i'll go give an id each one of them say for example this would be ts ts for um i'll call this as long for longitude lat for latitude um accuracy acc is for accuracy so we've got all of these configured easy so now i have to start writing the script block inside the script block the very first thing that i will do is i will wait for the browser to tell me if there is a navigator's geolocation available so i'll use a condition to check if the navigator has this property called geolocation if the answer is yes we know geolocation is available if not we'll have the else command running okay and as usual i'll have to wait for the application of the browser to basically load itself and only then run this command so i will write this command window dot on load that is when the document is loaded i will have this function being called and inside this function i will do a check i'll do a verification okay just pay attention ok it's important that you understand so maybe you know here i will write one h1 tag which will have an id called log this log is what i will address here document dot get element by id log and the inner text equals available here i will say is not available let's go check this in the browser if this part is working since your location is available i'm working on um firefox if i'm on chrome it tells it is available if i run this same example on let's say ie it's available because i'm working on the new version so if i go back to i8 say it is not available now it is available now it is not available so unfortunately geolocation is one feature if it is not available it is not available but however there is a library called geojs which you can use to fix on older versions of ie as well but again geolocation does not support very old versions of ie it has some limitation it can only go so much back so is this clear so far that we have sniffed and found out that the j location is available correct now if it is available then we have to do something if it is not available we will have to put a message that no please download a new version of your browser and then we will be able to serve you this application so if the geolocation is available we will now use the navigator dot geolocation dot see you see these methods clear watch get current position and watch person i am using get current position this get current position will take three parameters the success callback function the error callback position and a callback function and you have the configuration object see here see success callback error callback and an option so we discussed about all three correct in this slide very con this one success function error function and a configuration object and since you know we are working with get current position i want to go with all the defaults so as a default enable high accuracy is set to true timeout is not set which means to say it will keep waiting forever and i guess the maximum age is set to about 4 seconds if you are working with watch position if you are working with the get current portion the maximum edge is not set which means to say it will not even make the second request you see so now let us go back to the application i am using get current position i will have to go give two functions one is called a success function this will be a function so we will go write a function and we will write an error function you can call this anything you really want if this was a success function you will get the position object if it is an error function you will get the error object so this success function will be referred here and the error function will be referred here so success function is called or the error function is called depending on what would happen so in this scenario success function will definitely be called because the browser supports the navigator navigator.geolocation but however an error function can also be called even when the geolocation is available on the browser when let us say the application is now displayed on to the user and user denies to share his location see at any point of time the user is the king right i mean he will say no i don't want to share my location with this application then an error is fired if there is some network issue the geolocation will not be able to deliver a appropriate location then an error function is fired so there are scenarios where the error function will be fired in many cases so however we are bothered about the success function as of now we'll deal with error in our next some time so from this position object we will be able to derive what all from the position object will be able to get the coordinates from the coordinates we get the longitude the latitude the accuracy and the timestamp the timestamp comes on the position object directly timestamp okay so we can take these properties and assign a value to each one of them so i'm looking if there is a span that has an idts i want to apply this timestamp to that okay so let's do that so i'll say document maybe you know i can use multi-cursor feature again and i can say document dot get element by id and dot inner text equals pause dot time stamp and things like that so now here we'll have to write the ids in in codes so the first one is ts the inner text of that would become the timestamp the second one would be lon for longitude this is lat for latitude acc for accuracy this is all done let us now go run this application in the browser and see if this would work see it is asking me do you want to share your location i will say yes hello if i allow only then i get the success if i block i get the error right hello and i got my accuracy and the time stamp is basically an epoch based timestamp which means you say from the time that the computer was created on this planet so they are running these many seconds so how do we derive a time out of that how do we derive a meaningful message out of that we can say new data object and for the constructor of the data object this is a javascript data object so you pass this epoch based timestamp and then tell you the current time so i made a request at 11 33 47 seconds and if we run this you know periodically see notice it changed now 47 seconds 11 34 seconds okay this is the longitude and this is the latitude if you use this longitude latitude you can actually land on my home okay this is my location so the accuracy is about 20 meters i mean this way you don't necessarily land on my home you may land on my neighbor's home my neighbor behind my neighbor in the front you don't know right so about 20 meters accuracy is what we have okay um we can so add mts accuracy plus meters hello so 20 meters let's go to the next step so here we can also catch the errors usually you will say console.log and you use the error object the error object has a code and a message so you can probably log both of them so error object has code and the error message you can use both so now they know we have logged it so if i go back refresh and press f12 and show you the console logs that are being generated see as of now if i block this i'm getting the error code as one and it says user defer denied geolocation you see this the error code is one the error code is one maybe i will put this as code like this and this error message will be here the error code is this an error message is this so go back relaunch i have a block it the error code is one the error message is user denied your location okay so i have many web pages open so i'm getting a another error violation only request your location information is in response to a tata user gesture so i will say hello i will get the response if i deny i'll get the error code and user denied so there are other possibilities as well okay so you may get other errors as well they have made a list of all the error messages the error code 1 is permission denied error code 2 is position unavailable now what is position unavailable it can be for various reasons when the network is down the gps is unavailable or something went wrong okay on the server side that is on the client side so that can be an unexplainable situation in all of that we will get error code 2 and position unavailable if the network is so slow and it is taking too long for the user to share this location we will still wait for some time and we will report this time out era now we can actually specify this time out here so when we are passing this success function that is get current position we can specify the timeout uh timeout would i mean all of this would be a configuration object the enable high accuracy you can set it to true if you want to default is true anyways the time out would be let us say i will only wait for about four seconds if i don't get any response i will immediately time out and i can also say um maximum age that is i will use this response as an active response for at least 10 seconds after that i will make another request so this will not work as of now because we are using get current version but we are if you are using watch position instead so i will change this example to watch position as well so i will suppress this comment this out use watch position then all of this will make sense okay so let us now save and run this example run run run this example in chrome um so i'll say hello since you know the request actually has gone from a browser and i am actually connected to a lan it may not make a request again after about 10 seconds again you know this feature depends on browser to browser if the same thing is being used on firefox then the results may be completely different okay so you see after about 10 seconds it is asking me again another question correct i believe you know 10 seconds is little too long but nevertheless so say hello after 10 seconds you will actually see the browser will refresh okay see here in this case it is asking me another question do you want to allow i will say hello so here in the browser i am getting an error the error code is position acquisition timed out probably no it passed 10 seconds and it did not get any change in the position so it tells you that there is a error okay so each browser has its own way of dealing with things so something that we should keep in mind and see this is a problem that we'll always have to tackle not all the browser deals with these apis the same way there will be some changes okay so these are some errors and success methods that you should know i told you that there is another library called geojs you can look for it i think you know this location is changed because the code.google.com is actually suspended so how do i use so you have this website called geojs.io that you can use i think you know let us remove this because this is what you should be using moving forward geojs dot io if you go there you'll get javascript file that you can use to support older browser this one and it has a working example also that you can use to get your program to work and their api also has some country-wise documentation some [Music] wi-fi level location so it is as of now telling that now this is my ip address and i'm using airtel i'm from india i'm from bangalore i'm from karnataka and this is my longitude this my latitude it is this guy did not even ask me my permission right which is bad but is able to do that so you can use geojs dot io and get this example to work as well there should be some examples of working with map api as well so you have jio ptr and country and ip and things like that i'm just looking you know if i get any snippet for with the google map i can show you that there will be okay but nevertheless later i'll show you um how you can use the google map not google map but at least open layers and things like that okay you know that there is an alternate available okay keep that in mind let us go to the next step so that's about geolocation the next one that we will have offline api is deprecated so we are not going to use it even if i show you it will not it will not work for you um because this app case internals was deprecated some years back so we will go to the next api that we would be using in this workshop which is doing some basic validation where is my slide here so we spoke about geolocation now we'll speak about form validation as we still have about an hour plus right another r plus five minutes or so we should be able to easily cover form validation and local storage easily if we still have time i will show you canvas now this form validation is quite different from the javascript way of validation validating i'll show you javascript validation also i'll also show you how you can do the validation via php so you will have many ways to implement this validation as of now i am showing you how you can leverage on the html5 validation api so let me [Music] change this to form validation so we we can you know create a validation for a text input for a number for a telephone number for email um many such things i'll keeping this example really simple and maybe you know we'll use some very basic validation let us say on i want to check the validation for the name for the age and for the email i guess okay so i'll show you how you can do that and with that you can expand this example to whatever that may be your requirement so let's do that so i'll go create one table and in this table we'll have some the t body t body will have a tr tag and tr will have username this would be a form input instead of a table guys i'll show you a good practice not use this table we'll use a div tag so inside a div tag will have a label the label specifies for what now say this would be a user name and inside this div will also have an input the type is text and here the for and the id should match always remember this now you may ask your visa why is that a requirement okay watch so if i run this example in the browser in chrome see for if i if the user comes and clicks on this username the user comes and clicks on this username i want the corresponding input to be highlighted like this okay if i click here this should be highlighted how do i map this label to this input sometimes you know they may be one beside another sometimes they may be little far as well correct so in such situation for accessibility the for and the id should match they should have the same name okay this is they should have the same string so if that is done now if i click on this you will see this will get highlighted automatically watch correct so that's the purpose of the for the for and the id should match the name is something that is useful for us as developers when we start working with php because when the user submits this form name is used as the name for the field and the value that the user will enter will be the value for the field we get both of them on the server side if the user is making a get request we get it as a get variable if the user is making a post request we get it as a post variable but the name of the form is important okay so i will go give this user name anything which is quite descriptive that can help you understand that this is a username property okay so let us go create another div this will be for user let's say h this will be user h this would be user h and we'll have the user phone number in this example all three are same that's okay see as long as this and this match this really doesn't you know matter much so now we need to have a form to submit we need to have a button to submit so i'll go create a button [Music] maybe i will create a div there won't be any label this is for aesthetics that is all okay [Music] button login or you know sign up something like that and we'll wrap all of them into a form so that the validations can start working so form can either have a get or a post method but the default is get anyways an action i will specify that this will submit onto the same page and i am done i will ask each one of these div to have a class called form input or form item anything okay and we can wrap all of this into a div this will help us do some styling and now they know we have got this example this how it should look of course you know we will have to improve this a lot because this is not looking all that great so we'll go to this form and apply some basic style so if there is a class called form [Music] um maybe i'm changing this guys don't keep this form make it box or something like that so i'll say dot box give it a width of about 400 pixels a background color so we can see slate gray save run this okay this is about 400 pixel i think this is comfortable right for the entire form so i'll maybe make it about 300 or so yeah this is also comfortable everything can be accommodated i will add some padding of about 10 pixels each i have 10 pixel padding and inside this box if there is a inside this box if there is a label i want the label to be displayed as a inline block element now you may ask okay what is this inline block now you don't told about inline and you told about block there is something called as inline block as well so there are three four types of elements in fact there are about twelve primarily there are about three so we will only discuss about those three so inside this box if there is a label i'll give these labels a width of 100 pixel but because i gave a width of 100 pixel doesn't mean that they will take it there's no difference why because these labels are inline elements they will only take the width that are required by the children who is the child here the user age is a child so it is only taking that width so i can go assign the display type as inline block so that would be an inline block limit see now all of them are aligned properly and we'll also say the text align is right side that way they all are aligned to the right side see this looks nicer as a form at least okay and now i want this button that is inside this you know class box be having a margin on the right side of about 100 pixel so we will do that as well so inside the box if there is a button i want that to have a width of 100 pixel maybe 150 pixel but i want that to [Music] have a left margin just a quick info guides intellipath has a php and mysql certification training program where you can learn all the important concepts from industry experts and gain real world exposure to these technologies of about 100 pixels correct save and run this example see we forgot about the margin of adding that this guy had so we need to ensure that this moves by 110 pixel you will understand that in the css workshop don't bother much um okay um [Music] pairing pairing padding i'll make it five it's not pixel perfect even here now maybe increase it yeah i'll explain you know why i came with this number there is a relation at least we can figure out later for now i want to give some spacing between these labels so i will say the padding sorry the margin in the bottom will be about five pixels for all of them okay so there is some spacing around this how it looks as of now and i would want this box not to have a background color background color looks pretty bad right i'll apply a border to it one pixel solid gray and ask this to have a margin of auto some of these are some new properties that you're learning don't worry we will learn them in future the reason why i have started using it much before we can even talk about it is because the more number of times you see it the more familiar you become with it see margin auto is simply assigning this margin auto calculating this left and right margins automatically so whatever is available so if the viewport size increases or decreases okay it will always maintain its size position so let's see now this is applied and for now i want you know to i will paste this style as well in case if you have missed out some properties you can pick it from here so you have everything guys you have the form tag that is required and you have the style that is required you have both so both so now the question is how do i apply validation so if i try and submit this form it seems to submit on the browser you can see the username property user age user phone got submitted with some blank values so if i now go add bruce 21 uh there are two ah mistake so let's guys you will have to change this this is user phone but in the label it says as user h i just realized that so if i change change and the phone click on sign up see that information is sent to the server using php will be able to cache this and use all of them moving forward we'll do that so for now when the user clicks on this button the user clicks on this button we would want to do some validation if the fields are empty the fields are empty if i click on it this submitting this form so how do i apply a validation and stop that so we can go to these inputs each one of them and add a new attribute called required so if i say required which means to say all of these are fields that are required without addressing these you cannot submit the form without addressing that you cannot submit the form if i now try and click on submit you will say please fill out this field you see the basic validations are now started to if work click on this it says please fill out this field so i fill this field bruce click on this i get please fill this out field i'll say 21. so now it says please fill out this field i'll now give a number now if i click on sign up it submits makes sense right so the basic validations are done okay see while we are working in the validation there are few more things that we should keep in mind i'll theoretically run over some some of these ideas and then i'll show you practically on the example there you go the validation api nothing much here but you should know that the validation in html5 can be triggered with any of these properties you can specify required which is what we did you can also use min and max and step and pattern i'll show you all of these so you know how to work with this so coming back to this context see as of now we have used required but for this user age we can say what is the minimum expected value the minimum is let us say 18 and what is the maximum let us say is about 80 so if i now go back fresh maybe delete all of them so you know everything is working fine i'll enter bruce i'll say 12.5 which is not an accepted value correct and the phone number i'll put as it is click on sign up it took it should not have actually taken we do not use min and max is 80 and we did that required okay let's try this now working working i'll make it 11 12 and try sign up so it says okay it is accepting that is wrong right that is probably because let us check what is the type the type is text it should be a number sorry isn't it i mean it should be a number guys you will also have to make a change this type would be tell here telephone number so now this should all work bruce and now if i say 12.5 sign up it says the value must be greater than or equal to 18. so you're getting to see the validation i'll make it a hundred point five it says the value must be less than or equal to eighty see you're getting this validations fact here we can use the minimum the maximum we can also specify the step size i'll say step is one which means to say the minimum is what 18. we can't now say 18.5 because the step size is 1 so please fill out this field and say bruce and get inside see it says please entered a valid value the two nearest values are 18 and 19. so the step size is should be incremented by one so if i click on up arrow key it will be 19. so that will be accepted value all these are accepted values see it can't go beyond 80 the browser itself is restricting the user but the user still have the keyboard right he can type whatever he wants that's when the validation will kick in easy so i'll make this about 75 just to make it qualified and that should work now i'm asking the users to enter the phone number click on submit it'll submit all the details so you you know from the slide you have seen required minimum maximum unstep now i'll show you pattern how we can use a pattern and the telephone number is a good example for a pattern because see the telephone number can take some characters and some numbers it can also take some um plus and star and things like that okay so we can use you know the pattern on the phone the pattern let us say i am expecting a landline number in india a typical landline will be like you know we'll have three std code and we will have some dash and then followed by um seven or eight digits number seven i guess you know seven digits or eight digit numbers maybe i'll make it eight digit numbers so this is what is expected so this is the pattern that we are expecting so this is not a pattern that we wrote actually okay so what happens is that you know when you you're creating um this you can specify that you know i'm expecting um some digits so how do i write digits so in patterns you know you can probably start with this i want to write from a to z so this pattern allows the user to enter any character between a and z only one character between a and z anything other than that would become invalid let us run this see i want to fill this up i'll fill some default data 21 and i click on this it says fill out this field i will type a number okay and then if i try and click on it it says please match the requested format what is the format we are expecting an alphabet to be passed if i pass many alphabets then that is again wrong why because we are using this pattern any character between a to z is expected not beyond that if i can't if i type this that would be invalid but if i type a that is valid it will take it working when you say okay vijay what what if the user types an uppercase i mean you can use this example in many different flavors if the if i type an uppercase a here and type 21 whatever so this is also invalid why is it invalid because i said lowercase a to z you can also say uppercase a to z that way it can either take lowercase a to z or uppercase a to z you can also say a number between 0 and 9. so now any of these can go easy so if i now save and run this example say bruce 21 now what are the characters a to z lowercase a to the upper case zero to one zero to nine but if i use exclamation and try and sign up see this is not a request you know pattern that is matching so if i say one that is okay but if i say one two three this is not okay because it's not with the pattern that we have passed so if i say no no vijay i want to specify that in between these they can enter any characters up to 7 times so 7 is a minimum requirement 3 is not 4 is not 5 is not 6 is not 8 is not 7 is what is accepted so if i now go back and relaunch this program say username is bros value is 21. and we a combination of lowercase uppercase and seven under numbers up to 7 characters is what we can give so say a b c 1 2 3 4 this is accepted but if i say 5 it is not accepted if i say 4 click on it it will be accepted why because we gave a combination of lowercase uppercase characters with numbers we gave about 7 digits is that easy so you can create your own patterns but now how do i map this to a phone number so i will keep this here for you to refer when i upload this example you will get it okay we can come here and say i want to you know say digits so there is a shortcut digit curly brace curly brace 3 will mean that it can take about 3 digits it is as good as this as good as this but we can use the d but however you know when we say d the regular expression will think that the user is expecting this exact number of characters or this exact characters are allowed so i'll save and go back and relaunch see if i now try bruce 21 if i say d curly brace curly brace 3 in it this is valid if i say 4 it is not valid if i say 3 oh again this is not valid so maybe i will make it as 1 2 3 is not valid so because you know this needs to be evaluated as of now the browser is quite confused as to what to do with this so we will have to escape this that way you are telling that i am expecting a three digit number can be anything a three digit number is what expected so if i go back try and click on it say bruce 21 i'll say 3 to 1 which is valid if i say 4 again not valid this is valid okay so you got it three digit but what was the expectation to add three digit and then followed by a dash and add another eight digits so i'll say d curly brace curly brace eight digits so the sequence here is three digits followed by a dash and eight digits that's a load so go back relaunch submit select bruce age 21 click please fill out this field so one two three four dash 87654321 is valid why is it not taking i think we have made a mistake somewhere the three digits followed by dash and eight digits easy so this validation is okay so the validation is working and all of that is good but how does the user know that he'll have to you know put the format i mean put that format three digits then the ash and then eight digits how will the user know because it's not trying to tell him it says please fill out this please please fill out this field if i type something it says you know this is not matching according to the requested format but what is the requested format how do we know so here in this input we also have an attribute called title usually the purpose of the title is not to do this but the inputs can use this title to create the validation message so i'll say hello from vijay here and if i come back relaunch and if i try and say bruce here and 21 and if i click on this it says please fill out this field if i type one and then try something see it says please match the requested format and it's reading that string hello from vijay correct so anything that you add on to the title will be added to the validation message that's interesting right so here in this example if our request is to if a requirement is to accept this pattern we will provide that as a hint 4 5 6 7 8 save go back and relaunch that should work say bruce 21 so if i now type something it tells you that please match the requested format and it gives you the format okay we can additionally say three numbers digits dash and eight digits something like that so that would help the user know what he has to fill and then he will fill the information digits dash for eight digits now i can fill 2 3 dash 1 2 3 4 5 6 7 8 9 and 10 whatever so you know the answer now right so if i press this this will accept if not it will not accept so you can go give a hint to the user as per the need placeholder is much before the user starts interacting with the application we can use something called as a placeholder and say i am expecting the format like this one two three dash one two three four five six seven eight like this so that way when the application loads i know this is the format that i want but the problem with this placeholder is this the moment the user clicks inside and type something the placeholder is gone so you can use placeholder no doubts until the user starts interacting with that form he will be able to see the placeholder content that's another way of suggesting him to go to this website modernizer it it's a feature detection library i'll show you how you can use that when we learn about css and some javascript okay so this is also in our curriculum i will come back to this again but you have many ways to accomplish um you know something and this is a complete list of all the different polyfills that are out there okay look for something say for example geolocation see we spoke about geojs that was one but you have few other options as well okay yeah we will probably use a few of them not all of them okay so these are a list of you know all the new attributes um autofill is available placeholder is available required is available autocomplete is available and pattern is available these are some new attributes on the input tags this is another example that we are trying to create this one is called step six it's called validations more again you know we will borrow some of the code that we had already done here because this looks useful just that you know we will not use all the elements we can just that no it'll be longer exercise let's make it a short one so what i'll do is i will use the name and age okay if you want to use it on the in you know the phone as well you can but as of now i'll just remove it so we've got the minimum maximum step and things like that these can be used for validation you know about that correct so now if i run this in the browser this will throw the validation messages that are defaultly configured please fill out this field i'll fill this out field bruce please fill out this field i will say eleven say it says value must be greater than or equal to eighteen so that's not something that we would want to do this is value must be greater than or equal to eighteen again you know that's something that you would want to change so what we can do is this we can make the validation messages itself customized so that our validations can be more meaningful now the question is how do i set some validation messages on these inputs on this input this input can be accessed i'll have to go give a name so since now we are applying a validation on the fly i will remove this for now i will also ask the user to type some text itself even if the user types text will still be able to use validation because now we are taking control of things okay watch so i'll now come here and use a script block and inside the script block i will use the id uh and now say um wait until the window is loaded we'll talk about this in javascript again i will pass in a function and that is i will talk about why am i using window on load and what is the purpose and the secret behind that okay the rest is easy so i want to select this element and i want to change the validation message that are appearing on that see it says please fill out this field see this is a generic message that is coming from the browser can we not change it the answer is yes of course we can change it i'll show you how you can change it on the user age you can change it on the username now you come here and select select this element i'll go create a variable tell input equals document.getelementbyid what is the id uh correct uh so we have captured that element the tell input is available in this variable correct now i can go to this variable and set a validation message tellinput.set custom validity and say hello there so when the application loads we will add this validation message now we start important the watch so now that now we have refreshed and i click on this it says please fill out this field i will fill this value bruce and i click on it it says hello there you see that so our custom message are displayed how do you do that you set the custom validity so now if i say 21 if i click on it it still says hello there because we never told when this validation message is to be removed we have just applied it which is not fair correct we will only apply this validation message based on some conditions so you can apply a default validation message like this please enter your age i'll say please enter your age this looks very humble asking for it okay so if you are creating a business application you may not want to be so humble and then say please and then beg for the age enter your age is fine so you can also be little assertive depending on the application i mean if you are talking about a marketing survey form then you will definitely have to say please do that please do this right so it says please enter your age easy so now we can furthermore customize these validation messages like this i will check if the tell input oops if the tell input dot value [Music] is less than 18 then we'll change our validation message else if and else we need to add all of them so copy this and paste it here else if it is greater than 80 then we do something else we do something see here we have set this validation message here we'll say you are too young to join us here we'll say you are too old to join us here when we are okay with that form the validation message we will simply remove this validation message and pass empty strings to it so this is where you know you are saying everything is okay okay and ideally you do not want to add or set this validation message until the user starts interacting with the form okay so you may want to check if maybe you want to set it on the dot add event listener you are listening for the input event that is when the input happens only then you call this function then you assign this okay when there is an input that is when we actually get all of this to work so we basically put this also inside i will indent all of them or at least format this so you can see it's nicely organized now that was the advantage of the prettier tool that we installed so if i refresh bruce it says please fill out this field see the input event has not yet happened i will now put the input now try see it says you're doing to join us okay it says you're too young to join us i'll make it 100. it says you're too old to join us and now if i make it 21 the error is gone it will submit the form so you can use the set custom validity to set a validation in fact you know i would go one step up only when there is an input we would want to set this custom validations but apart from that you know we can we can directly assign this instead of you know please enter this or you know we can change the default validation message itself like this please fill out this field and say bruce see it says please enter your age so this is a validation message that's already assigned so now if i say 2 1 1 says you're too old to join us if i say 11 it says you're too young to join us eight you are too young to join us if i say 20 it's okay it'll accept the form okay i have moved the first set term set custom validity outside so be watchful for that so guys we'll wind up the session here yeah thank you just a quick info guys intellipath has a php and mysql certification training program where you can learn all the important concepts from industry experts and gain real-world exposure to these technologies you

Channel: Intellipaat

Views: 191,118

Keywords: php, php tutorial, learn php, php for beginners, php tutorial for beginners, php course, php programming, php tutorial for beginners full, php tutorials, php full course, php mysql, what is php, php programming tutorial, язык php, php login, php 8, what is php programming, php crash course, php tutorial for absolute beginners, what is php used for, php project, php in 6 hours, aprender php, php tutorial in hindi, php mvc, php opp

Id: q-pn_B5pFi0

Length: 226min 55sec (13615 seconds)

Published: Sat Jul 23 2022