 Hello and welcome. I hope that you've watched the previous videos And we're just going over some semi real-world scenarios with our scripting and we've generated some fake data with some fake numbers and names And we've calculated out some pension returns. So if I say Get monthly it's going to calculate based on the spreadsheet We have that we've created with fake numbers and names People's names their yearly retirement salary and their monthly retirement salary again These are some pretty high numbers now Why would you do this again as I mentioned last one you could have Calculations done like this in a spreadsheet truth is though I get a spreadsheet like this each year and it doesn't do the math for me So it's easier for me to write a script that looks at this and pulls all the information So that I can do that also you can run this on a server and you can generate either server-side output and pure HTML or You can create something like a CSV file or JavaScript file or dump it into a database at which point you can pull with different applications and interfaces and today what we're going to do is we're going to generate some Static HTML based on this information Which is not the way I would do it as a server-side script again I would output properly format stuff as a CSV or JSON which we'll look at But I just want to show you this as an option because if you can code in any language If you can do a print hello world or echo hello world to the screen you can write server-side scripts so Here we're going to generate some HTML again go to gitlab.com forward slash my likes 1,000 search for my project called documents dash tutorials download that and that's what we're working in the folder called yearly salaries and I'm not going to review everything this time around But here are the list of scripts that we have and today we're going to be looking at This one generate HTML. So what I'm going to do is I'm going to say let's go ahead and look at that code real fast I'll say gen gen HTML and Here make us a little smaller Again, this is not the way I would do it, but this is a way that can do it. We're saying that we're creating HTML That's just output for the user then we're going to dump into that file some of our header HTML stuff All the way down to the body they're going to create some rows and that's where we're going to use our CSV file We're going to basically use our previous script But I'll put it so that it goes into some div tags So it's formatted a little bit nicer add that to the salary HTML that we're creating and then add the finishing HTML tags so pretty basic and straightforward I'm not going to go over this line by line because it's almost it's 99% what we did in the last tutorial besides Dumping the stuff into variables and then echoing it out to some div tags Let's go ahead and then at the very last line this code opens up the HTML just to make things easier for you guys But you wouldn't have that last line if you're running this on a server But when someone would run this it would generate that from the CSV so you can update the CSV and as soon as someone visits the page boom it would regenerate it Without you know and statically post it for you. So let's go ahead and run that Gen HTML here and you can see that it created some fairly readable HTML very basic obviously could be a lot nicer but you know That's what it was supposed to do and you can format any way you want again You can use CSV HTML to make this look however you want and you throw it on a server and anyone can you know Click on that link and it would automatically generate this and then all you have to do anytime you get a new CSV file for the next year you replace the old one and Boom this automatically updates. You don't have to make any changes as long as the formatting of the spreadsheet doesn't change so that's one option but another option would be to Take the CSV file and then have some Your your client side pull that information and format it and I made a basic example for you guys here So again, I'll list out these files and we have this JavaScript dot HTML which we can open open dots or sorry I Have an alias of open which alias is open XDG open, but I want to Type this properly so you guys don't get confused We'll go ahead and open that and nothing's going to display because we haven't generated the server-side data Which normally you put in a database in some cases, but this we're just going to generate a basic CSV file so we have a CSV file that has the salaries, but we don't have a CSV file that has the retirement Income that's what this script does. So let's go ahead and cap this out and again. It's basically the same that we did in the last tutorial but here we're echoing out and we're using the pipe character as No, no. Yeah Let's see. I forget what I have it do Let's say Java Or sorry This one's called monthly to CSV. It's going to generate that and now we can cat out JS dot CSV. Yeah, so basically we're gonna have a CSV file Which is not necessarily the best option Json will be nicer But I've shown in previous tutorials how to generate Json from a CSV file But we'll have the name and then we'll have the yearly retirement income and the monthly retirement income And then we can have the client to pull that and this is my preferred way of doing that now that we've generated that I can refresh this page And of course it's not gonna work because it's trying to pull information from a file on your computer and Web browsers try to protect you from not allowing that happen So you actually have to run this on a web server for this to work So let's go ahead and I already have it in a web folder directory. So it's going to be under localhosts know x1000 Documents dash tutorials yearly salaries JavaScript HTML and there we go And I format this a little bit different than I did the static HTML But here each one's in its own little bootstrap card and we have their name their yearly income and their That's not right Something's not right. We did something wrong Let's go ahead and see if we can figure out Why that's happening and these numbers look right. Let's scroll all the way to the bottom We got an undefined because it's grabbing a blink line at the end Let's look at our code and see what we're doing. So Control you so I am here. I am grabbing the CSV file. I'm splitting it by each line I'm saying to loop through that new array that we just created when we split the lines We put into think all people each person's gonna be split by Of the pipe symbol the first field is going to be the name The second field is going to be the yearly income monthly income and then here we're putting that in there Everything looks right Let's go ahead and open this up Network and refresh the page. I did not realize this one. I tested it before the video that Things were not adding up. Oh, oh, it's not supposed to be salaries. I'm grabbing the wrong CSV files. Let's go ahead and fix that. So JavaScript HTML It's not salaries that we're grabbing. I believe it's JS CSV, let's go ahead and refresh that. There we go. Those numbers look more correct So there you go. So again, it's a little different We don't have a server side script generating the data real time We have a script that we ran that dumped it to a CSV file but in real reality you would have something that outputs that just like this and It then the server side the client side dang this again. We probably have Like line that's because there's a new line character at the end of the file So a quick way to fix that would be to go into our JavaScript and we could put in a thing that says We're gonna add a if then statement here and we'll say We'll actually do it down here I'll just add it here. You can put it wherever you feel most appropriate but I'm gonna say if name Is blank I think should work Like the space like that Then print the output. Otherwise it won't let's go ahead and refresh this and that's not right at all So if name equals I'm saying if name is blank print it. I want to say if name is not like print it. There we go And That won't have that undefined at the end again That was just because there's a new line character at the bottom of the CSV file. So it's reading a blank line It's like there's no information here, but that's just another way to do it Obviously, you would format it however you feel looks nice. This is I just did this real quick and created these little cards You colorizing difference different fonts, whatever, you know, that's up to you But I want to show you that as an option So again as far as outputting information to something outside of the shell you want to create GUI information Interface I always like HTML because I like anything. It's plain text plus everybody has a web browser on the machine already the one option again is the static HTML which I Was about to say doesn't use any JavaScript, but it actually does because I I didn't write a JavaScript in it So if we were to look at our Salaries dot HTML file that we generated Let's go ahead and just remove This and this and this that's going to give us errors most likely. Let's go ahead and go back to Actually, we'll just go here and we'll go Salaries HTML. No, that seems to have worked and the errors in the console No, no errors. So My template that I use for making HTML has bootstrap and stuff in it But we didn't use any of that JavaScript So this text so if someone's using a browser that doesn't support JavaScript or they block JavaScript This server side option would be an option, but I think it's very sloppy I much prefer just to pass a CSV file or a JSON file to JavaScript and have the client side generate it It also makes it a lot easier. Let's say I was a user And not that file this file and look at this and I go, oh this information is great But I don't like how it looks I can easily write a plug-in for my browser or even just Look here and go. Okay. Refresh this and go to network. What's it grabbing? Oh, it's grabbing a CSV file I can ignore the rest of this and I can just I can grep this myself if it's running on a server or sorry W get this myself and Forget all the other stuff and for me That's one of the reasons. I love web interfaces that don't try to block it from doing stuff like that it I Might not like what you have and there's lots of websites that are like that I need the information, but I don't like how they format it I can just scrape the stuff myself and if they do it good like this, you don't even need to scrape But this is very easy. I just can copy this URL and I can say W get and Say Output to the shell give it that and there we go. I have the information. The rest doesn't matter to me It to me. That's a great thing. Anyway now. I'm just battling. I thank you for watching Hope I didn't lose you towards the end of this that we did a lot of stuff But people ask for real-world scenarios and real-world scenarios Are tends to be more than just one or two commands You tend to have to do a number of steps to do what you want to accomplish But I hope you saw how this works the concept and you found it useful If you have any questions be sure to comment below and as always I hope that you have a great day