Collaborate on Bootstrap Invoice Template for Inventory with Ease Using airSlate SignNow

Bootstrap invoice template for Inventory

hello friends welcome back now let's continue our work with new orders so we have not created any page for new yours and you have already finished our products brands and categories so I'm going to start work for new orders so let's create a page first in our public HTML folder new file include a new page and save it as new underscore order dot PHP ok save and let's take the code from dashboard copy and paste in your new order they move the PHP and container ok let's remove it now saved it and the link of this page are put in dashboard so here we are and its new orders so let's put a new disco or dot php' save and refresh now press new orders and you can see we are in the order page with home and love adoption and nothing and let's visit get bootstrap calm to make our work fast get it started components card I'm looking for this kind of card right let's take this or copy it from here okay in our new orders first let give container raise the font size tip dot container and within container I'm going to take a rope inside row I'm going to take a column so dip thought call - empty - 10th so it is wide column and inside that I'm going to paste card so here I will write new orders and remove the card body elements so here we have card body save it and put in an h4 refresh now we have new orders but it is not in center so here this is the column size and parent of everything so here I'm going to put a class and makes height one auto save and refresh the page now it is in center inside a deep card a card body I am going to put a form form and form with row so div dot okay let's take the class group all my fun group bomb group and inside form group I'm going to take a row inside row let's take a label with class pulse to call icon SMI one three and right here order date fine now take another div with class it will be call icon s mi16 and provide input type will be 'text and class will be form - control to apply boost of style and form - control to make it small and okay we only placeholder and then we can give it here value equals two so our date from ehp will be a dynamic date date and your date and month save this okay let's see the output you can see we have odd date but we can read it edit it modify it on whatever you want we can write it here so it should not happen and here it is very right it is in the left side so I will even give it an alignment so here to write and here I can say read-only fresh now it is not editable fine let's copy this palm group copy and paste your right name your customer name with a strict symbol I will be touched we don't need read only because I will provide customer name and I don't need our value I need a place holder this will equals to enter customer name and html5 validation required save save this refresh I can see we have customer name and with customer enter customer name now we need another card inside card so this is our card body ends here and this off form they've taught card right and I'm going to directly take a card body div dot card - body with the header h3 and name it make order list C so we have make order list so you can notice we don't have a shadow on to make it more beautiful I'm going to give a shadow so in our group card body so this is our card okay we can give it a card style box - shadow and 0 0 and then 25 Excel and 0 light gray and let's copy this paste here in this card but this time it is 15 first so you can see we have shadow and it is looking like our invoice form now we need a table right within the card so let's do our work more fast let me pause the video so here we have given make order list and after that I am going to create a table so see this is the table right this is table starts here and ends here rest of the thing is same I just have clear I have taken my created table so I have to an alignment Center and I have given table head then table row with the table header hash number and can see we have table head item name total quantity and then we have quantity and then we have prize and then finally we have total amount then we have to table body ybody attribute name and let us remove this comment or it is so this table row right you can see it more clearly clearly if I do this you so this or table body which ends here and we have one tear oh this is a dummy text not original we in the text we have columns and I have given a number one with ID within bold tag B tag and I have given an ID number then I have another TD within this TD I have a select attribute within this select I have an option attribute and here I have given an example data that's a washing machine and in this select it requires a name attribute so I have given a name attributes key name that's nothing but product name and you can see I have given our square bracket means it is an air array not a normal input it's an array and we have given class form control form control is small it's actually not product name is PID so product ID instead of name and and then we have another TD then PD and then we have name input q dy quantity type text form control and let's take this copy it once again for the end taste here name it t QT Y means total quantity we are going from database then we can analyze how much quantity we have then ing to the quantity we can decide how much we can sell then quantity then price Thanks these are these are all dummy data right just to show you and I have given a read-only at the add price so now let's see the output of this refresh so this is the output we have table hash item number total quantity quantity price total and then input is dummy data 1 total quantity quantity and prices already read only this should also be read-only so read-only naught is also read-only and finally and then we need not finally we need a button so here table ends and after the table this is the card here card ends right table ends mostest this is card body right so this is card body end and in in between the end of table and card body and I'm going to write our Center tag and here I will put your button with class equals 2 ETA n VT n i1 danger that's nothing but 2 sorry it should be success su TT double 6s and write it here ad with a style of with the blue ID th width and 150 pixel okay that's okay and give it ID write ID equals to ad so it's ID equals to ad copy this button code paste here and change the ID to remove name also remove ID add and remove Center refresh so you can see we have add and remove button and I'm going to give change the color instead of success right here danger it will be all red color and once again fine but you can see we don't have a space between table and this these two buttons so in center right here style equals tool tapping oh I think 10 pixel is good so we'll give it refreshed now it's fine it's looking well and we don't have required ah okay we have given required in the name and I also want to give a required in other fields such as select required quad and other inputs which is total quantity we don't need quantity there also require them so quantity and rest of the thing will be from database let's save it and so our card ends here right our inner card ends here order list of card ends now after this card I'm going to take few inputs so I will do nothing just to do another copy paste so just copy this so let's take a pulse once again now let's move down towards the end of form so here our form ends and just here paste the other inputs right this is a long list and here order less in shell then I have given a para tag to create a little space just nothing you can also use B or tag then form group row same thing then label and I have given label sub total with alignment right and you can remove this call palm label it is not necessary now if you want you can remove this call form label it is not necessary or you can also take it copy and paste we have not given here right so if you want you can give her so now let's focus on our other inputs so we have given form group row and then okay yeah right so it is just a alignment with right and subtotal ID is also subtotal and class is same name is ID and name is both are same sub total type 'text then another form group with class row and this time it is ght it is a kind of tax which is 18% and ID is GST name is also GST let me smaller the size it is visible I hope it is visible after GST we have our live another label called discount with name discount and ID is also discount then we have label name total and for name net total and that name is also a total and ID is also net total then we have paid do payment method we have paid name is paid ID instead do name is do ID is also do payment method so it is a select attribute and for option I have given but none of the cash is going to use none of them and card drop check is just this for just to show you it is something and then we have at the end with Center DAC input' type submit' ID order form and with another ID print invoice so you can notice the important thing is that I have given D none this is a class bootstrap class which makes things invisible or height height from the page so using beam and class we can hide the value print invoice then order so let's let me in smaller the size then you can see it more better in one screen it is not fitting I hope you can understand whatever I'm telling you so just pause the screen and copy all of the code it's just a 1 if you were if you can write one in both then you can rest of the thing will be staying just change the name and ID now save it and let's see the output now you can see we have subtotal then GST then discount the net total then paid then do and then cash so we have not given I think required here so it is also Nik required input HTML validation required you required required and we have an it it's done our form is ready now we will see in the next video how we can add another products list we can make our list how we can create a list and if not required how we can remove the items so thanks for watching and don't forget to Like and subscribe that's the important thing and give me your advice your comments your feedback in the comments section then I will will to know what you are trying to say and what is your need and how much you are liking this video