Create a Bootstrap 5 Invoice Template for Purchasing that Simplifies Your Transactions

Bootstrap 5 invoice template for Purchasing

[Music] hello everyone welcome to abc tutorial and this is raza with you today i will show you uh point of sale part number 21 and in this part actually i will show you invoice how you can make inverse so before making invoice we have to confirm few of our uh entry page like uh product category and batch this kind of information already we developed these pages in our previous videos so you can see our previous videos then you can step by step create the product page edit and everything so actually crude operations already done and authorization logging things already done so now today i will show you the best and the most exciting part what actually the uh what will what actually will i will show you uh how you can manage your stock and how you can sell a product or how you can enter a product into the invoice so uh before starting please keep subscribe my channel so i'm just moving to the visual studio project so already you can download this project from my website which is abc tutorial.com and you can download this code as well as from my website and i i have a few article assuming all article in my website so you can see step by step so uh for invoice things so first uh for invoice i will just open my chrome browser so research in voice template bootstrap just start using this keyword and lot of website will be shown here and i will open one by one and i will choose which template i mean invoice template i will select for my project so this is one template see this is invoicing one product another product another product so price as you understand already that this this is the actual this is actually the uh standard template of the voice right so i will uh i will see others template so you will never take this template and this is another template so so as you know this is actually the project i mean the template what we are using in our current program project in point of sale this is actually written in bootstrap four so that means bootstrap forming uh we can actually we can we can take the bootstrap for uh templates as well right so see version four bootstrap startup version four [Music] so here also this is bootstrap for inverse template so i can just copy this ctrl a select and i will make a page so you you know already that if you see my previous video how we are making our pages exactly this will be first authorization filter um attribute [Music] authorization filter public action result invoice [Music] return so if we make add [Music] so um i just close this already view created so i will just copy this and i will first i will run the project [Music] if i login so i already to oh added two menu by editing so this is actually i i named it as a management and it's already i named it as a order so if i go in layout see here i named it order order there is two page i will create invoice and manage order so for invoice homing home controller invoice method i already write this so this is our link so if i click here it should redirect me to home invoice okay so i can access this invoice because i have access for my root so already i given this data inside the database if i don't have this role what happened i will show you now see this is our role permission right [Music] see here for admin it's already exist if i delete this first i will copy then i will delete see if i try to access this page you are not authorized that means actually this page is not accessible for me so that's why i should give a access for myself i mean for admin now i can access if i click on invoice then see invoice is coming so now the template what we selected i will copy now now i will just paste all the uh i mean the template what i copied from website i will just paste here and if i reload the page [Music] see this is our invoice what we see in the code open so this is actually the template what we will use so so this is actually in middle of the page so i will try to just move it to right side okay so for moving it right side i will take another d take a class load float right so under float right i will sorry i will paste all the codes simply reload see its right side okay so i will now in our case what will be this will be our [Music] this will be our i mean i mean the our company information okay so i will just remove this from and i will put here my um company logo so i have already maybe added my company logo here okay i will just write my company name here okay so it's enough so to 2 is the i also i will just delete it and inst here is the name so this is actually the name so actually the name we will put from here right customer name who uh who buy the product or anything from us okay so actually i will write the name here so it should have a input box here so i will place the input box here [Music] [Applause] type this text this folder is customer name okay so i will just if i reload the page see this is the input box and i will put the name and this is actually address and this is email phone number so in our database so i need to check how many information i request for our case otherwise [Music] for a sales detail it's actually product detail so [Music] in in sale i will have customer name phone number and address so these three information i require customer name address phone number okay so instead of this i will put another here called text area [Music] and instead of this and put phone number on okay and it will be normal so if i reload the page see the input box is placed here properly but see here it looks very odd because it has a border so i will try to make it borderless so i will write css so if i provide [Music] this borders [Music] it is [Music] disappeared here so i will also use this class to all the text area and text box okay text or number if you see customer name enters differently i can write i can write let me i can write the number so this is actually the customer information and this will be manually our company information so like this is our telecom original company information now come to the order list okay so here actually i i will select item one by one okay so here i will select one item mobile here i select another laptop and if i select laptop then this laptop's category or description will be shown here and unit cost will be automatically shown here from where from see here the product information sorry product stock because product is a generic things so samsung is 71 but for number one product so if i see the product number one this is samsung is 71 so see samsung a71 first base is purchased by the price 1000 usd but second which samsung is 71 purchase price is 44 usd so i mean i will sell it by 55 so this price i mean this 45 or 1000 when i will select [Music] product samsung one 71 and if any batch is active these batches product price will be shown here automatically just i will change the quantity then quantity will be multiplied multiplied by unit cost and total will be shown here so now uh if i just put a test data then you can understand what happened what will be happen actually here so i will just select [Music] i'm just writing manual things now but later i will show you for your better understanding just setting the templates and this showing you so this is samsung this is okay and like this is this is i will show you i will shown here instead of description i will show category [Music] and like here it will show as mobile okay category mean product product category one product work on category one mean it is maybe mobile mobile okay so i will show product category here the product price and quantity and this price actually this price will be automatically shown from database just this quantity i will provide manually from my our keyboard so i will put here a input box like this [Music] number input box so i'll put it [Music] if i just reload the page see if i select samsung here 51 then category will be first it will be blank if i select samsung is a 71 sorry just [Music] okay first it will be select okay so if i select a 7051 mobile will be select and price will be shown here and just i will put quantity three and three will be multiplied by this amount and total will be shown here automatically so that means only two things i will change here one item another quantity and like this all will be dynamic and uh if i want to add lot of product then i can add lot of products so in next video i will show you how we can dynamically uh add this product and how we can dynamically entry this in i mean make this invoice part so thank you very much for watching this video keep subscribe and keep watching [Music]