 Okay, back in the home folder and now I'm going to move into a folder I have set up. I already have Apache installed. So this video is for a friend of mine who asks in regards to how to make a basic interface for running commands on a server using, you know, through a GUI web interface. And I've done this a lot in tutorials, but I figured I'd show a few simple ways to do it. These aren't the only ways to do it, obviously, but I'm going to show you how to run certain scripts using Apache and just a basic Apache if you were to install a lamp. So a Linux Apache. We're not actually using any of the MySQL stuff but PHP. So basically I'm running Linux machine. I'm gonna have Apache and PHP. So just install those from the repositories and and you're good to go. So the way doing this though, you're going to be limited on some of the things you can do. You can run scripts very easily. I'm just gonna call you system commands using PHP, but you can call scripts that way as well. But you're limited to what permissions because you're using the web user permissions because on your machine you're going to have different users that you may not be like actual users but like groups and then and what you have is you have your www-data, which is what your web server is running on when you start up your Apache. So it's very limited on what it could do. So if you want to do things beyond that, like if you want to like play sounds on the computer or access certain things, Apache by default won't be able to do that. You'd have to change permissions on that and so I'm not even going to get into that. I'm going to show you the basics on just a default Apache install and then the cars will look at busybox as another example which is very simple to do as well. But just remember when you're running with elevator permissions whatever they are, even just a regular user, you want to be careful about who has access to the interface obviously. Okay so again here we are. Let me go ahead and open up my web browser and I'm going to go to my local host and we're actually looking. So here's my web browser and it's looking at this same directory here. So if I was to create a file, I'll just create a file here. I'll call it ls.php and now I have an empty file. If I refresh my web browser over here, you're going to see that I have that file. If I click on it, nothing happens because there's nothing in that file. So if I go into that file ls.php and I just have to start off by creating my php tags. So this is just saying you know everything inside these tags is php code. So you have to know php but we're looking at running other scripts. So my friend's looking at wanting to run Node.js scripts but I'm also going to show you. I'm going to show you to start off just running a basic system command. So I'm going to say system and then parentheses here. You got to end the line with a semicolon and then quotations. I'm going to say ls which should list out the files in this directory which currently there's only one. Right away now if I click on this file, it's going to list the files in this directory and actually I'll just create a bunch of empty files. 1, 2, 3, I'll call this one .txt. If I run it again, you'll see those will now show up. Now I didn't give it any formatting if we look at the source code for our web page here. So I hit control you. You'll see that each thing's on a new line but a HTML which is what this thinks this is doesn't see those new lines you need to have you know a line break which we'll get to in a moment. But just wanted to show you that with a simple in PHP tags system and then whatever command you want to run it will list those there. It will run that command and the output of whatever that is. And if I run that twice I can say system and then I can run it again or I can just say should be able to say well let me do this again with permissions dash a if I refresh this now there you go. So the you name dash a gives you some information about your system, the kernel you're running basically. So it's going to list those files and that's going to give me the output of the next command which is saying that I'm Linux, a Reml install, it's a Debian install using Reml and my system's called Reml my host name, processor I'm running that it's based on Debian kernel blah blah blah architecture all that stuff. Okay so we have that and just show you that's the same as if I ran that command here. Okay now let's create a bash script real quick so I'll just say vim and I'll just call this go.sh of course we start off with our shebang line and I'll just say echo this is a test and I can say echo another test. Now I can do that now if I go back to my directory here and I refresh so it can see all these files that we've created we have the empty files here we have the go.sh now if I click on that it's not going to run it's just going to show me what's in that file because it's just seeing it as a plain text file and it's put in there even if I make it executable like I'm going to have to it's still even if I refresh this it's not going to run the script it's going to show me the script but if I go if I create a file called go.php and in here I can create my PHP tags and I can say system and here I can say . slash go .sh I can save that again that does nothing to the go.sh I can run go.sh here and it outputs that but here it's just going to show me what's in that file but if I go back out and refresh you can see that I have this go.php which is executable since I have PHP enabled on my web server and I click that and you can see it prints those two lines but again it's printed on one line because no line breaks if we look at the source code you can see that it's two lines if I want them to display on multiple lines I'm going here or actually going to my shell script and if I just add in br which is just some basic HTML for line breaks and refresh this now they're on new lines there and if I look at the source code you can see the line break in there so that's something to think about now what about node.js so real quick let's create a let's call it app.js and in here I can just say you know put in some basic JavaScript console log hello world now if I try to . slash that and do app.js it's not going to work it's going to only permission I need to make it executable okay and that's still not going to work if I do .app.js because what's I didn't give it a shebang and this is something I stress a lot when you write a script that you're gonna be writing in your shell give it a shebang line some people are very bad about this because I could run this by typing in node and then app.js so I'm saying use node and run this script that works as you can see but if I want to . slash the file or if I want to copy this script to one of my paths so where I can run globally you don't want to type node whatever every single time so if we go back into our script here I can say I can add a shebang line which for node.js bin not bin bash sorry I want us usr environment no what am I doing bin environment node so what this is saying is that when I go to run this what's happening is my shell is going to look is there a shebang line if there isn't it's going to try to run it as whatever shell we're in whether it's bash or Z shell but if there is a shebang line which is the first line in your code with the pound exclamation mark it's going to look at what program you're telling us to run here is saying you know look at this path and this is the environment what environment are we running node okay so it's telling it this is a to use node so now I can still do node app.js if I spell node right and that would work fine but I don't have to I can say app.js like this . slash because it's in this current directory and or on and actually if I was to copy this app.js to user local bin I can put it in here if I want oh sorry I'll copy it there so now I can say app.js anywhere so I can go into let me open up another little here I can just go into like my temp directory here app.js and I can run it because I put it in a system path so that's a little bonus part of the tutorial there for you putting stuff in it but I am going to remove that because I don't want that in there pseudo remove user local bin app.js okay so my point is make sure you use a shebang line got a little off course there but now again if I go back to my directory here refresh you can see app.js now it's not gonna run it's gonna show me the file because as far as the web browser is concerned this is a plain text file so what I do I create myself a PHP file app.php it doesn't have to be the same name it doesn't matter you know as long as it's .php so and for this you don't need a shebang line because the because Apache is gonna be looking at the extension of .php but I can say system put in here now if it was still my system path I could just do app.js but since it's in the current directory we're gonna do dot slash saying look in the current directory now refresh over here and click app.js or app.thp and it ran that code it ran the the JavaScript code on the server side not on the client side again if we look at the source code of this it's just the output and you can write stuff in any programming language on the server side and access it this way you can do it I'm pretty sure even visual basic you can write shell commands but you can do c c++ c sharp pearl python bash you know no JS it doesn't matter if you can output text to a shell you can use that programming language as a server-side script this way again with limited permissions in this particular instance now my buddy he wanted like a GUI interface to to access this and obviously that's not what we're doing but what we can do here is very simply I'll just make a I'll just call this button .php or this is we're using PHP code you can call this PHP or .html because I'm not gonna actually be putting a PHP code into this file just HTML but real quick just to keep it very simple I'm just gonna say button and I'm gonna say click me and then I'm gonna say button and then I'm also gonna put anchor tags here that's what those are called right href equals and the reference that we're gonna get the link we're gonna link to it will be our app.jr app.php file so this again we have three files already this is why if I'm actually writing it depends on what I'm doing whether I use Apache or something even smaller and simpler like like busybox which I will get to in a moment but if I go back here now and I refresh this you can see I have my button .php when I go here hey I got a simple button that says click me when I click me click it it it brings me to PHP code which runs my JavaScript code on on the server side all it's coming up in the web browser is the output of that script that being said let's make that a little little nicer looking and add some client-side JavaScript so that we don't have to refresh the page or actually just gonna grab the output from the server side so I'm gonna say I'm gonna go back to my button here and I'm just going to delete all that and I'm just gonna use a template I have created let's see can I do this there we go that's a little bit better now since it's kind of a wide code okay and I don't need to go into this is just I'm loading jQuery and bootstrap here I'm gonna be using jQuery code and bootstrap for the buttons here very very simple though so if I come back in here I'm going to say again button button else it click me and if we go back and refresh this you can see it looks like this actually let me do this a little different I'm going to go BT use some of my shortcuts here I'm gonna create there we go this is what a button looks like in bootstrap I can write the code here again you don't need to worry about this code this is just aesthetics and it's kind of off topic but now if I refresh this see we have nice looking blue button that I've set to expand across the entire screen I can add buffers around it or I can just cheat here and put a few line breaks there we go so it's not right at the top of the screen I guess I can put the line breaks up here there we go so I just moved down from top of the screen a little bit that button doesn't do anything yet though so now I'm gonna work on the client side so this is something that's gonna run in the web browser of the user not on the server so up here under document ready again we're getting into stuff outside the scope of the main focus of this tutorial but let's go ahead and do it anyway I'm going to say dollar sign dot get and in here I'm gonna give a URL I'm just going to say app dot PHP comment I'm gonna get a function and the output I'm gonna call data okay so what this is doing this is saying inside our script tags here document look at the document wait till it's ready then run this function was this function do right now it's going to do an HTTP request basically it's going to be just like I'm going to this right here but it's gonna do it in the background and grab the output of whatever that is and put it into a variable called data so now down here I'm just gonna put in a very basic little I don't know I'll just call I'll just put a diff tag how about that oh and I don't yeah I'm gonna change some of that in a moment sorry let's give it an ID of output and up here we're gonna say when we grab that information we're gonna say output so it says find the output the pound symbol here means something with the ID of output and we're just going to we can either replace I'll just say HTML and we'll put in whatever data we get which in this case would be hello world now if I refresh the page now I saved that right okay unless it types something wrong F12 to bring up our console here I'm missing this right here okay now if I refresh this there you go we have a button here that doesn't do anything currently and we have hello world which actually grabbed from our at the output of our app PHP which is running our app.js but let's change this so now we're gonna say here our button let's give our button an ID we could just tell it when a button is clicked but we want a specific button because we might have more than one button we'll just call this JS button so up here we're gonna say pound js button dot click to click or click I think it's click function and then what function we're going to run we're actually going to put this stuff inside this function really I would normally write a separate function for this but now if I've done everything properly when I click this button it says hello world there which is not just printing hello world it's actually grabbing the output of whatever command we're running so for example if I go back in here and I go app.js I can change this to say hello world I can say line break this is a test line break actually let's do another little code here line and I'll say line break hey hey hey how about that okay so now we've changed our JavaScript code I don't even have to refresh the page on here if I click this button it runs that script again and puts the output there replaces it you can also append it if you want to see the ongoing output so I hope that last part didn't get too complicated for you it's basically rather than just having a plain HTML button which is kind of ugly that redirects you to the code and runs it we're actually going to have a little bit something nicer looking with bootstrap and use some jquery which I understand you don't have to use bootstrap or jquery you could just use some CSS and JavaScript Ajax but I like using jquery and I like bootstrap and I have my simple template made up so overlook all that because that's just taking a step further let's look at a another option for this and that is running a different web server something small like busy box which you will find on almost everything routers phones but also desktop computers so if I say busy box HTTP D and I'm going to say dash FVP 7777 what I'm saying here is okay we're gonna use busy box we're gonna start busy boxes HTTP service it's sir it's name in there dash F means force it means don't throw it in the background for right now at least while we're testing and via for verbose so it should show us what's happening every time something's clicked on the web server and P is just telling it to use port 7777 because I know if you don't give it a port it's gonna use port 80 by default which I already have Apache running on I just know 7777 is not being used on my computer and it's going to use the current directory if I don't tell to use anything else so I click that now if I come down here and go local host or type in my IP address 7 colon 7777 it's gonna tell me file not found because there is no file for it to display because we didn't give it a file name or and there's not an index file so I can come back up here I hit control C to kill that what I want to do though by default busy box will allow you to create a CGI bin and you can do this with Apache to but busy boxes very small and lightweight and if you're actually trying to make an application rather than just a webface busy box is a good way to go but again remember the whole permissions thing we're going to create a directory called CGI dash bin and if I move into that directory and let me let me quickly just copy my go.sh file to here so now I should in theory be able to go to CGI dash bin forward slash go.sh and it will run that script oh I have to start my server up again and I'll refresh this and it's telling me file not found oh okay I messed up I'm in the CGI bin still I should move out of that because it's looking for a CGI bin within your home directory of your web server your root directory directory anyway gonna run that hope I'm not getting too complicated for you try to try to keep this simple and it ran our script it ran our script but I didn't get anything output to my browser but it did run that script what it's doing is it's running that script but when you're running it like this you need to have the script output a line saying that this is a HTML file or a plain text file or however you want the output to be displayed so it's running but we're not seeing the output so I'm actually going to for now I'm just going to run it like this without the F and without the V so it's running in the background now so my web browser still my web server still running I'm going to open up that script and I'm actually going to delete all this and I'm just going to say what am I was my there we go my CGI script so I'm gonna forget about this forget about all this blah blah blah blah okay so basically you just need to start your script off with this text right here it's just telling the web browser that the content content of this page is text plain or HTML if you want to be HTML and there's other options as well and what you're doing but for most of what you're gonna be doing it's gonna be one of those two and I'm gonna say hello hello again world now if I save that I can refresh my web browser down here and there you go it says it right there and I actually have two new lines here I don't think I need both those new lines let's see refresh there we go okay so what now so now I can go back and I'm gonna move my what did I call it button dot PHP I'm gonna move my button dot PHP to button dot HTML cuz busybox I haven't incorporated PHP into it although you can run PHP through it using the CGI bin folder let's go to button dot HTML here so here's click this button nothing happens because it's looking for files it's trying to run a PHP file but we don't have PHP installed blah blah blah let's edit that code real quick button dot HTML and we're gonna change this so before using it the other way we had our user interface here in a PHP or HTML file that calls a PHP file that is just doing a system call so we actually have three files we don't need that anymore because we're using our CGI so I'm gonna go CGI bin and I'm just gonna call that file directly so I should be able to refresh this page click this button and there we go hello again world so now I can make multiple scripts let's do Vim CGI bin we'll call this go to dot sh I did HS it doesn't matter because it's not looking at file extensions it should just be looking at the shebang line again so let me again just run my little template here the templates looking at grabbing variables are sent to it we're not worried about that right now so I'm going to say echo hey and I can run the command like you name dash a and echo test now I should be able to go into my button directory now that I have this set up the button HTML and what I'm gonna do is I'm just going to copy this and go button JS to but really this is I don't want to call it anymore because I'm not calling JS anymore I'll call this button to and this could be cleaner because I have I'm calling I'm gonna be rewriting code you should never have to duplicate code but just for simplicity here I'm going to copy all this why so here I'm gonna say for button to run that file oops and put the output there so now if I refresh this page I have two buttons the first one will run go.sh and put the output to our little div tag here button to we'll run go to.hs and oh did I not make my script I have to make sure you make it executable and we'll test this we'll say CGI bin go to.sh so it runs good there we don't have our line breaks in there but let's go ahead I don't have to even refresh my interface here boom it puts it all right there but again if we want those line breaks we will vim this and I can say br there and I can put br there and there so now button one runs one script button two runs another script button one button two button one button two button one button two I can also go into this button two script and add echo dollar sign random all capital and that should give us a random number there at the end and again I don't have to refresh my page down here because I changed the server side it's gonna just call that script from the server again boom right I did do that right echo random should give us a random number and I did put that into the script here and if I run that script it's got to be something oh you know let's change this to bash now let's run that script bingo I had it running through a different shell than bash so now I can click this and I'm not getting any output let's see our console log doesn't give us any errors there and network not really sure why I'm not getting any output there network all this preview response it's not giving me the output but the maybe it has to do that's really weird try to think of why that makes a difference shouldn't I've used bash scripts before I have bash installed yeah obviously it's trying to use the shell that's built into busybox but should be able to access bash as well anyway not a huge deal that's gonna bother me anyway let's go in here and let's add something else let's just say try and think of I mean you put any commands in here you want and again this is running as a user that you start busybox as which in this case is my user which means it has access to all my files so make sure you're securing things you want to limit user input as much as possible as far as allowing it to run script it gets very very tricky if you if you're allowing the user to insert text you really really want to strip and sanitize that which I'm not gonna get into because there's different ways to do that depending on what language you're using PHP has some functions built in but you can do things with other scripts but it's like if you're just doing button presses you're pretty much you know that that's that's fairly secure but if you're having any type of text input you want to be very limiting on to what the user can input and and don't just limit it on the client side you want to limit it on the server side because anything on the client side can be modified by the client obviously anywhere but one but two but anyway and of course I can also move in move my let's say copy app.js to our CGI bin and let's just do our button here I'm just gonna change the second button to instead of running our go to file and have it run our app.js file so now now I do have to refresh this page because I changed made changes to the page I go to that it's not gonna work and why is that well then CGI let's go into our go.sh file and I'm going to copy this and then open up our app this I should be able to just paste that okay because you need to have this as your first line of text so I'm gonna want to change this to console.log but give it that same text same what type of content is so if you're doing a CGI script you have to have that at the beginning and again you can have it as text or as HTML so now that saved now I can click this button I should get the output there we go the Node.js is considerably slower watch watch how click this boom it's right away and I click this it takes a second and same same as in the console here CGI bin go.sh boom prints out right away but if I do that it's like it's got a load up node where you know your shell loads up pretty fast it's already running stuff so different different things think about there and there's just some options now you could also if you're really gonna go Node.js you can use Node.js as your web server or as a socket server if you need you know constant real-time streaming of data I don't use Node.js enough to know to really get into that I've played around with socket stuff so you can but you can use have your script be the server and the code that the server runs if you are up for that but it's definitely not as simple as just running busybox and adding your script so CGI bin anyway I feel like I over complicated this a bit but those are your two main options using Apache with the default setup so all you have to do is install Apache and PHP and you're good to go just you know use PHP system call you're good to go and with if you start busybox install busybox start busybox HTTPD in this current folder and any script that you make executable and put in your CGI bin of the root directory of your web server can now be called by the scripts again don't let my button.html code here scare you this is you know it's not very much it's very basic jQuery JavaScript code and and Twitter bootstrap but again let me just do Vim.button2.html and in here I can just do you know button again click me button and then put an anchor tag is a simple way to do this and we can say CGI dash bin forward slash app.js so again now if I come here and I go to that file on my web server right there and again that's the entire code for your user interface and click that and it runs that just now you notice we have HTML tags in here and not being recognized that's because we set it as plain text by Vim CGI bin app.js I change this instead of plain I say HTML and I refresh this now it's displaying it as HTML so that's the difference if you have HTML tags in there you want to say that it's HTML if it's going to be plain text set it as plain text but again so right here I can just click this click me and that's is that that's as simple as it gets so I mean a lot of the other stuff I showed you was just to make it look a little bit nicer but again it's this one line and putting your script in a CGI bin and adding that one line of content type so that's it that's all you if you have a script already you add this output as your first line put it in CGI bin make sure it's executable and your web browser can now run it again running as the user you've started your web server as so yeah that's it showed you it's very simple made a little more complicated in the middle there just to show you how you can make it look nice but then I get reviewed again at the end on how simple it can be so that's it let's see