I made a website in C++ with ChatGPT (without knowing C++)

hi there in today's video I will create a website with C plus plus Yes you heard me right now C plus plus isn't really a common language for making a website at least I don't think so but if you take a look at the name of this channel you will realize that we don't conform to Traditions around here so let's do it anyway now the thing is I have never in my life written a line of C plus plus although I guess technically C plus plus could be considered a line of C plus plus anyway luckily I can ask help from my good friend chat GPT so let's do it I want to create a website with C plus plus can you help me it is not typically used to create website directly instead it is often used to create back-end services that power websites well that's what I actually mean if you want to create a website with C plus plus you will likely need to use additional Technologies in addition to C plus for example you could use a web framework such as WT pronounced witty which is a c plus library that allows you to create web applications with C plus okay well what I had in mind was that I could create the HTML dynamically with C plus so let's try to do that can I create a C plus plus application that will output HTML and then pipe that output into a web server's output all right here we have some instructions now now I don't want instructions I want code can you give me an example code in C plus plus that would output some HTML sure here's an example of C plus plus program that generates some HTML okay this looks very fun as you may notice it is not the most elegant way of generating HTML it can become difficult to maintain and read more complex Pages well it's good to know that chat TPT tries to tell you nicely that this is a stupid idea now let's try to make this code actually work so I will copy this code and paste it into a file what is the extension for C plus all right here we have the code now what do I do with this code I guess I have to compile it how do I compile the code all right here we have an explanation so I just use the G plus plus command let me see if I have that on my computer and my neighbors are cutting down the tree I hope you cannot hear that so let's try G plus plus o website app.cpp something happened I didn't get any errors see I have a website now all right let's run this website I guess I just do this huh it works my very first C plus plus program I'm excited now I guess we could do like this a new website.html and then we could just open the website in Firefox yes now we have a website now this is just the HTML for our website this is not really what I want to do but anyway technically this counts as a website made in C plus plus but now let's take this a bit further how could I have a server running at localhost that would go to this executable let's ask Jack GPT thanks I got the code to work my very first C plus plus program how could I direct HTTP traffic to this executable on localhost 8085 let's say great I'm glad you got the code working you will need a web server all right one way to do this would be to use a reverse proxy server such as Apache or nginx I'm not very well versed with nginx but I guess it's always good to learn something new so should I install nginx let's see how long does it take for me to install nginx how can I install engine sorry engine X all right here we have the instructions for all the operating systems so I'm on Linux so I will just use this command and then that's it it's installed what is this it gives me an error because I have Apache installed already but now let's go back to this code here copy this where should I put the nginx configuration that you gave me I guess I should tell it that I'm using Linux okay it is in this folder let's see what we have here all kinds of settings I think I will just replace this HTTP configuration here I'm just guessing I don't know and I realized that this is not actually what I was trying to make because this just passes the port 80 to Port 8085 but how I how do I get the program to run from this part okay I got nginx installed how can I make it so that when you go to localhost 8085 it will run my C plus plus application okay now this looks a little bit better but there's still no nothing that will direct it to the app you will also need to configure your C plus application to listen on Port 885. you can use a library like boost dot ACO to handle okay so let's call this port something else 8080 so now if I go to 8084 it should redirect to 8085 and then my app should listen at 8085 so then it will pass its output to nginx great can you write the code that would make the C plus plus app Listen to Port 8085 sure now it uses this Library do I have to like download and install it somehow or does it come from somewhere this is interesting how can someone write C plus plus what is this what what does all this mean also this example is a blocking one meaning that it will wait until a client connects so it wouldn't be able to handle multiple connections at the same time let's see if this works so now I need to compile it again what was the command name g plus plus fatal error no such directory how do I install booze dot SEO I forgot to tell it I'm on Linux okay that is the code and let's say I'm on Ubuntu and let's install this and then let's try to build it again I got some errors this does not seem promising I got the following error messages when running compiler you're missing the P thread Library so let's copy random code from chat TPT and install it on our machine and try it again I still got some errors because I was too quick to do it so I will need to use this instead but I didn't call it app.cp it's no it's at top CP okay let's call it app so it's going to work directly from chat tpts okay I got another error now I got this error all right now we got some more stuff to install it looks like the same code as before I hope it's something different yeah yeah it's something different great and then we have to add L boost system so let's copy this code and now hopefully it runs come on no is that the same error no it's another one now I get this error hey we got another library to install let's do that all right and then we have to take this command and then compile it and hopefully it works yes we didn't get any errors let's run the application now I guess it's running so now the nginx configuration is here and we are listening on 8084 and the app is listening on 885 probably 8085 is here so now if I run nginx then I should have a website at Port 8084. let's do that so nginx sudo nginx we did something let's go to localhost 8084 invalid HTTP response I think I should verify first that nginx is working so what can I do I got an error when trying to access 8084 on nginx can you give me a simple example code that I could test the nginx server with static HTML before trying to use my C plus plus app all right I think I have this folder already because Apache used it so let's paste the code here and remove this one and then let's go back here and see what happened nothing happens I have to restart the server what was the command s reload and let's try nope I get this error when I try to open localhost 8084. all right let's see if nginx is running inactive dead that doesn't that does not sound good so let's start it with this command it failed the server status is this address already in use let's try a different port and let's restart the server now it's running okay so now if I go to 87 I have the Apache page here and it's Apache because I have Apache installed on the machine and I use the same folder for that so now I have nginx working it took me I don't know 10 minutes so now I will change the code back to the forwarding one so this one and I will use 8087 and then I still have my app here here running and actually I got some clients here already interesting so let's now run the S reload and now let's go back here and I get about invalid response again but I get a connection for my app but I get a invalid HTTP response so should I like send the headers in this as well let's see I got the port forwarding working to my app C plus plus app now but I get the error in my browser do I need to send HTTP response headers in the app or what is the problem yes in order for your browser to recognize the response as a valid HTTP response your C plus application needs to include the appropriate HTTP response header a minimal HTTP response would include these headers great so now it's adding them to my response great so let's copy that part and try to add it in this C plus plus code so let's say here add headers to response and paste this here and no hello world I want that code so response let's say headers and HTML so can I just do this just add it here so I print headers here all right headers to the socket and then I write the HTML to the song and then I need to compile and run this app again now if I go back here I get one little thing here ah this is because I have to send the content length and that's now 13 because hello world is 30. so how do I solve this I have to set the HTML first create HTML response and then send headers and then send HTML and now here the content length I should get it from this variable so I have no idea how to do that how to first of all concatenate strings in C plus plus and then count the length of a string so let's ask chat TPT how do I count the length of a string in C plus plus and how do I concatenate that into another string you can use the length member function to get the length of a standard string object so I have to set this length so I will say here get content length and I will call it content length and this one is HTML and then I want to concatenate so I just use the plus operator so I'll just add here end of quote plus content length and start of quote that should work so if I go back here and I quit this and I compile it again I got an error invalid operands types cons Char cons Char 24 to Binary operator plus what what is this see out concatenated ah to strip I have to cut okay so I have to convert the string so I can say standard string content length string is that can be content length and then I can presumably concatenate the content length string into the headers let's do that and let's run again and I get an error expected comma or semicolon before sdd okay running yes it works now let's run the app and go back here and I should get the whole thing here yes I have successfully built a website with C plus plus that is amazing so it said something about not being able to do multiple requests or something does it what does that mean I'm pretty sure I can go to another Tab and but they're not going to run at the same time so if there's two requests at the exact same time it's not going to run well it's not it's not a problem no problem great so what should we do next we should do something more than a static website thank you I got my C plus plus website working now all right now that we have thanked chat gbd let's do something more let's make a shopping cart on this website so how should I do that I want to create a shopping cart class can I make classes in C plus plus I think so I think that's the whole point of C plus plus I would like to make a shopping cart in C plus plus can I make a shopping cart class yes you can definitely definitely make a shopping cart class in C plus a shopping cart class would typically have the following features container to hold the items method to add an item method to remove that item and retrieve total number right exactly so this is how I create a class in C plus it has private items it has public add item remove item get num items get total cost okay but I have to implement this continue how do I implement the methods in the shopping cart class all right here we have the almost full code for the shopping cart class so where should I put it can I just put it here shopping cart at item but I think I need to create an item an item class can you create the item class as well all right we have just a name and a price okay that's good okay let's copy this one as well so now we have an item and we have a shopping cart where we can add the items so I also want to create an HTML table of the shopping cart can you add a method to the shopping cart class that outputs returns an HTML table of the card contents and here we go you know I really like coding C plus plus it's not that hard so let's copy this one and add it to the shopping cart could you give me a code example that creates a shopping cart object and adds five products to it okay let's see now how this will be used cart add item item apple banana orange mango pineapple great my favorite fruits let's do this so I will copy this and I will add it here in the main and instead of outputting to the standard output the content I will set it into a variable I will say sdd string I really don't like that it's called STD standard string equals cart get card contents as HTML table and then welcome to my C plus plus website and I'll add here H2 cart and I will can I just put it here like um sorry I have to give it a name card table card table save this and then let's run it again if you compile it first and I have some errors lots of Errors card table ah this I cannot do this how should I do it then that's not a good way but maybe it works I think it did work but I have more errors now what does this mean that is a crazy error let's copy all of this to chat TPT oh let's copy this code what is the problem with my code it's difficult to say without more information however one thing I noticed is that you are using the Boost SEO library to handle TCP connections ah you should use the Boost SEO stream buff class to read the incoming request okay that's that will be interesting later well it didn't detect any errors in that but how about if I tell it this this is the error I got when I tried to compile it the error message is indicating that there is no operator equals equals defined for the item class which is used in the standard function that you need to Define what it means something equals something when it's an item very interesting so item Boolean operator equals equals means that if then if the name is the same as the other name and the price is the same as the other price then they are equal that is that is amazing then you need to change the remove item function okay items erase wait a minute items yeah erase okay you should also consider adding a copy Constructor and a move Constructor to the item class right let's try if this works now compile it again yes it worked and run it and let's go to my C plus website and look at that we have a card here that is great now let's add some styling to the card because it looks pretty ugly right here we have a styled card replace the old card the style card and compile it again and go back here now we have a little bit better looking card here so now we should be able to add some products into this card so let's just make a form here where I can put any name any price it will be added into the cart so let's do it like this I will add here above the card add item to cart HTML and I will create it up here create add item form so standard string add item to cart HTML equals form method post how can I connect this post and input type text placeholder name and price and give them some and I will and I will make this a bit shorter and then I need a submit button so this should create a form on top of the card that says name and price and add the card and let's give this a size and I forgot a semicolon here colon and I still have some errors I need to add a semicolon here and now it works let's go here again now we have this beautiful form here and we can add something to the car I can put something here and put the price and add the car but of course nothing happens now so now I have to read the request and then process it how do I do that chat GPD or already told me that I can use the stream buff to read the request could you tell me how I can use stream buff to read the request alright now we have the code here and I at least need to add this include up here and then this looks pretty much the same as before and then I have to do this so This reads the request let's add here read request and then I will have a request stream okay so this is the stream and then it sets a variable request string and then it puts the stream contents into the string okay and now I have the raw request here so let's put here just some debugging request string and is that everything let's try yes first try run it I will refresh it with the post request already so let's see post uh it reads until this but I think there is going to wait a minute there's only post what if I do it two times is it going to get the next line in the request it is not when I read the request of a post request I only get Post in the risk request drink you're only reading the first line of the request the first line of the ACP request also known as the request line contains the request method okay so now it's gonna show me how to read the whole thing okay so this should create the whole request let's see so I guess I just put it here and instead of void this will be string standard string read request and I will return the request string but this looks like exactly what I did so this should just say what is the socket that is the socket request string equals create request socket read request now did I have to change something else let's go back to the code this part is that the same thing as this yes and this one it's the same thing okay I feel like that didn't do anything except what is buffer the string let's try this again I am getting a mirror I do I need semicolon here as well and I need semicolon here and I get mirrors buffer to string it says buffer to string is not defined you probably provided it in the previous example you did not hear it is buffer the stream let's add this and let's compile it and we get an error request string I get this error all right let's try this code so I will put it here so now I don't need this buffer to string anymore so read requests of the socket and reset the variable and we read we set the we set the request buff variable as well which is a stream buff and then we read the socket to the request buff variable and then we get the request buff data into a request string and then we return and then here we read the request and I have to say standard string or equal string instead let's see if this works now it does not work I have forgotten something here I am missing a semicolon again I've been writing python for the past couple of days so I have forgotten about semicolons so now it works now I can run it let's see what happened now it is not stopping at all it's just hanging there so it doesn't know when to stop when I use this function the request just hangs why the read function is block a blocking function which means it will wait until it has read something from the socket before returning but I think the problem is because now we are not waiting for the new line anymore let me try this wait until now it reads until the new life hey now we have the whole thing yes so now we get the whole request well almost for some reason it stops chart here and we only get the headers um what if I said here something test and then I send test you're gonna read that compile this and run it then if I go here and I send test now it's gonna read but it's gonna read more than that that's very interesting so before it only read until t y That's weird so now I get the whole thing what if I don't send tests you're gonna hang then yes so I think there should be two of these so now if I go here actually it gets all of it so now it works so okay I don't know what was wrong with the first version but now just have to have two new lines and then it gets the whole request great now I have the request now I have to parse the name and the price from the request how could I parse the form post data from the hcfe request I already have the HTTP request including headers as a string you can use Library CPP HTTP Library you could also manually parse the request stream you can use the standard string find function to locate the start of the form data Okay so given the following request how could I parse the name and price parameters from the request first you need to extract the body of the request you can do this by splitting the request string on the first empty line well yes that is obvious but how do you do it in C plus plus and now it's writing the whole request in the code right now we get to the part where we split the string okay here we have it let's copy this and let's say here read parameters from request paste this here okay and then parameters name will be the name and Paramus price will be the price this needs to be request string so I'll move this into its own function so I will say standard what is an array put this here so map okay so I have to say standard map get request parameters and I give it a standard string request string and then I do all of this stuff and then I return parameters so now I should have an array of or a map of parameters returned from this then I can say standard map parameters equals get request parameters from request string and then let me just put them here do I say parameters name and parameters price and let's compile it and check the errors ah map without argument list sorry I have to do this do I have to add it here too and here sting it's string where it has thing yes it compiled now let's see if we actually get the parameters we get test and nothing wait a minute test what what we wanted to get but then we got nothing um did I send anything I did empty string why do I get only the name for some reason I get only the name value let me add one more actually what if I add just here body if I add here something is it just not getting me the last one I'll have to go here now hmm now it works so what if I just add an ampersand in the end it's gonna work then arbitrary amounts of parameters great now it works so that's a bit of a hack but I'm not afraid to use a hack at this point so now I can read the request and then get the request parameters from the request so now we have to save the new cart item from the request to some database or something so let's do that so let's remove this debugging from here and then add card item from request so if there is a name how do I check if how do I check in C plus plus if uh if parameter name is set count Method All right so I have to use this one so if parameters count name is greater than zero then we need to add it into the card so I will initialize the shopping cart up here create shopping cart and then if we get the name in the request then we add an item in the cart and its name will be parameters name and its price will be parameters price and I want to check if the price is set but you know it's going to be set so now if I refresh this of course I have to compile this first and fix the errors okay I think the problem we are having here is that price is a string so how do I convert a string into um it's not an integer what is it it's a double into a double all right let's use the first method here sdod string two double makes sense so I have to say here price double price equals string to double price and let's see if this will work yes it worked and now if I go here and I refresh now I get my new with 4234 dollars great but of course if I just go to the website it's not there but if I add it here then it will be added here so now I have to save this in some sort of database so I think what we should do is we should make a function that can make like a serialized version of this card or like a Json or a c plus song of this so let's do that I want to make a method to the shopping cart class that can serialize the contents of the card and save it to a file so that I can save it to a file okay well it created a very simple serialization so it's just going to separate them with a comma and like that their name and the price are separated by a comma and every product is separated by a semicolon that's genius oh or you can use Json I think I'll use Json it's better nice I have to import some stuff that's cool let's do Json to copy this and add it to the shopping cart class serialize do I need to like to put it here because these are all the public okay so this will serialize it great and then this one can save it so let's copy this as well and let's create a void save and then it will get a serialized card can I say this serialize I guess so so we open card.json and we what is four four what does four mean in dump number of spaces for indentation okay so now we can serialize it and then save it so now we have to also be able to read from serialized opt how can I read the card contents from uh Json so just created it for me and it will return it doesn't return anything Json file so read the Json file in your string parse the Json and then add item how does this work where do I put it it's a separate function so I have the class shopping cart here then I have this which is shopping cart read from Json add item can I move this inside the thing public read from Json so we will get the Json file it will read it and if there's an error it will return nothing and I will say this dot add item and then down here I can just say cart dot read from Json and I will give it the carc.json so now instead of adding this sample stuff here I will read it from the file and now I need to include this one at least there was other stuff as well I probably have to install some stuff and probably need to import of stream and what libraries do I need to include for all of this code all right so I need all of these f-stream s stream vector how do I install the n logman okay let's just get this from GitHub okay let's see now I'm including two Json libraries I'm not sure if I need to do that now let's create the Json file or let's ask chatgp to do it can you create a sample Json file for the card okay here we have a Json representation of the card now it also had this total cost here but I don't think it did that in the code maybe it doesn't matter so let's create a file here cart.json and paste this in here and let's double check that it is in the right format yes items and then name and price great so let's try to compile this and I get some errors okay uh sorry I forgot about the type of the function it is going to be shopping cart no it's going to be it's gonna be void because it's only it adds to this current shopping cart line 57 this serialize what does that mean did you mean to use Arrow I don't think so Jason has not been declared in this function I get the error Json has not been declared using Json like this Json root what does this mean ah okay let's see if this Json I put it as capital letter and then here I also have to say this add item I guess so now it's using a different ah okay because this read from Json is using another Json can you change this this function to use the end law man Json library but it was the same it's just okay so I think before it used two different libraries for the Json one for writing and one for reading but now I ask you to use the same library for both so let's see if this compiles now it does not 104 I guess it cannot use the same here to add let's call it this we did it it compiled that is amazing then we run the app and we go back here and we don't send anything we get a list now let's try and change this to something else huh it works so now let's read it from the file so now we just have to save it to the file when we add something to the card so let's do that so if something has been added to the cart then we save the card add item and we say cart dot save and then let's let's recompile and run it and go here and say this is a test 50. add to cart and we cut it here but it's URL encoded now if you go here again bad gateway we got a type error that's a very good server it crashes the whole server when something goes wrong card dot save so let's check the save method so I think the problem is in the serialize now I'm getting the following error here's my code paste it the save function and the serialize function it looks like you are trying to use the pushback function on a Json object but it is only applicable for Json arrays to add a new item to the Json object you should use the square brackets operator to assign a value to the news okay let's copy this you could also use the M please okay let's try this version of the serialize method and let's compile it and let's run it and then we go back here we still have a bad gateway wait a minute I'm not calling it why do I get this error now what did I change let's go back to where it worked all right after a while of debugging I figured out what was wrong when it saved the new item here didn't use the items array so that's why it can't read it again so I have to change it here so when I save it I need to add the items can you change this function so that the items are in an array with the key items okay this is the code I need and then I will Ctrl Z here to go back to the original one and then if I compile this and I run it now if I go here now I have the original and then I say this is a test and 234 add it adds it there and if I go here again it's still there and I can add stuff here and it will add it there great and it updates the Json file so now here we have the other ones now I have to URL decode this how can I URL decode a string in C plus plus [Music] all right that wasn't as easy as I expected until I found the right thing so that GPT told me to use all kinds of different libraries first it asked me to use CC CPP codec and HTTP library and then I said I don't want to build stuff and then it said well you can use the open SSL lip curl to do it and then it's just do it like this and it didn't work and then finally I said can you please just don't use any libraries just do it in C plus plus and then it spits out this beautiful code that will URL decode a stream let's see if this will work paste it here and I will remove my curl from here and then I will compile the app hopefully it works it works and then I will run the app and I will go back here and I will add something to the cart and it will be added and I will put some spaces in there yes now it works now I can add stuff in the cart that is amazing now I have a C plus plus website isn't that great now I'm not sure if there's any practical use for this thing but it was fun to do and fun to learn to make my first C plus program now of course this is saved in the file and if I open this in an incognito window it's still there so any visitor will see the car it's not the card of the current visitor so we should Implement some sessions should we do that let's do that in the next episode if this video gets enough likes so if you want to see me Implement sessions for this website please comment down below and like this video And subscribe and then I will make that video because I've already been coding for two hours and 40 minutes so this is enough so I hope you enjoyed this video and maybe learned something or maybe not so if you like this video please give it a like And subscribe to my channel so you won't miss it when I post another one of these crazy videos again so thanks for watching and I will see you in the next one

Channel: Unconventional Coding

Views: 10,305

Keywords:

Id: z3nSh9VfVnQ

Length: 44min 49sec (2689 seconds)

Published: Sun Jan 15 2023