hey guys in this video we are going to build a multi-page web application from scratch this web application is entirely written in Python using this TR package with that package you can create web applications like this one without writing a single line of HTML CSS or JavaScript but before diving into coding of this solution let me give you a quick tour around this website okay so on the lending page we'll have a contact button when you click it the contact form will open up in a new window and this contact form is fully functional that means if someone clicks this button down here we will use a no cool tool in the back end to trigger an automation flow and in that automation flow we could then for example store the message in a Google Sheets document or forward the message via email and on the left side we will have our logo and the navigation menu with the different sections you can also hide or unhide this navigation menu and for demo purposes I've also included a sees dashboard and a chatbot application however in this video we won't talk much about the actual code to create these projects because I already have dedicated videos on my channel for that what we will do however is to deploy the whole application to the cloud so if you follow along with the video you will have your own web application Live on the internet for free the only requirement is that you have some basic understanding of python and of course that you give this video a like and with that said let's dive in let's get started with installing streamlet to create our web application you can do that using pip if you've already got it installed make sure you're using the latest version you can do that by including the upgrade flag in your pip command next I'm going to install penas and requests I'm going to use penas to create the SE dasboard in our app lator and for the contact form we use the request package so if you haven't installed those packages yet you can do that by running pip install pendas and requests all right with that in place let me launch vs code in an empty directory in here I'll create a new python file called streamlet app. py okay and just to see if everything is working let's create a very simple website for that I'll import streamlet as St and afterwards I just display the title on the website okay so now to start our application I'll go back to my terminal make sure you're in the same directory as your python file in my case I Sav the project on my desktop so here I'll type Stream Run and then the name of the Python file after hitting enter streamnet will open your default browser all right and here's our very simple website now in my case the Dark theme is automatically applied as I'm also using it on windows so in your case you might see a white website and that's totally fine as we are going to change the style of the appat on anyways okay so now that we know that the website is working let's take care of the navigation for that I'll create a new folder and call it views by the way the naming here is not important in previous versions of stream you had to name this folder pages to create a multi page application however with the newer version you've got much more flexibility which I'll show you in just a bit for now let me create a couple of python files in this directory so I'll have a about me file a chatboard and a sales dashboard Now to turn our simple website into a multi page one we'll Define all the different routes in our main file so let me quickly type out the complete page setup and then I will explain it okay so here I've created three pages the first one is our about page and here you've got a couple of arguments for example where this page is located in my case this page is in the views folder and is called about mepy next up I can also specify the title which will be visible later in the navigation menu and if you want you can also include an icon now the icon can be an emoji or you can pick one from the materials library from Google for that you just need to include the name material and then the name of the icon if you want to use an emoji and you're on a Windows machine you can pick an emoji by pressing the period and the Windows key on your keyboard okay and lastly I've also defined that the about page should be the default one that means when we load our website that will be the first page we see okay and now basically I've done the same for the other two pages one page for the SS dashboard and the other one for the chatboard in my case these are two projects I want to showcase on the page so that is why I've CAU the variables project one and project two all right with that in place we can now build the navigation menu and this is pretty straightforward as before let me quickly type it out and then I'll explain it so to create the navigation you can use the streamlet navigation feature and then include all the pages in a python list and then the last step is to Simply run our application with the pages and the navigation now just to see if everything's working I'll just include a simple title in each of our pages so in the about me page I'll put a title called about me and I'll do this for the other two pages so for the chatboard and for the sales dashboard now with that in place let me navigate back to our website and refresh it okay and here you have it we've now got our navigation menu with the different pages when I navigate to the pages we can see that the title is changing and that you can also hide or unhide the navigation menu now if you've been using stream before you know that creating a MTI page application was also already possible however now you can structure your navigation in our app we only have three pages yet at my previous job I also created an application with more than 20 pages and then the navigation menu becomes quite messy but now with the new release of streamlet you can also include sections in your navigation for that you can simply use a python dictionary the key here will be the section name and then as before you can pass in the list of pages okay and when I now navigate back to our website and reload it this is how it looks like we now have our section names to keep the whole navigation a bit more tidy now another cool thing is that everything you include in the main entry file here will be displayed automatically on all the other Pages too to show you that let me insert a logo that should be visible on all our Pages for that I'll create a new folder called Assets in here I'll paste two images one is the actual logo and the other one is just a dummy profile picture which we will use in a bit so as I said everything we include in our main page will be shared across all the other pages so in my case I'll include a logo for that you just need to pass in the path through the image and for the sidebar I'll also include the following text now after saving the file let's see how this looks okay so now we have a logo in the upper left corner and our text in the navigation and this will be now displayed on all the other Pages too so when I navigate to the chatbot page and hide the navigation our logo is still visible great and with that let's now take care of the about me page so here's what the final page should look like I want to have two columns on the left left I've got the profile image and on the right a text with a contact button and below that I'll just have some more text with bullet points okay and with that said let's go back to my text editor and code out the about me page so I'll remove the title and instead I'll create two columns and you will notice that you can also optionally specify the gap between the columns and also in the new streamlet version you can finally vertically align the columns too that can be either top bottom or in my case Center the content so in the First Column I'll insert the profile image and in the second column I'll have a title and some text by the way as I don't need the anchor link in the title I have set it to false all right so with that in place let's check out how this looks on our site okay so far so good we now have our image and some text next to it now below the text I also want to display the contact button and for that I'll use an if statement that means if that button is clicked then I want to exit with the following code now in my case I would like to have a popup window and in this popup window I want to have the contact form so to do that I'll call a function that chose that contact form and up here I will now Define this function for now let's keep it very simple as I'm going to change this form anyways in just a bit all right and to turn the code inside the function into a popup window you can decorate it as a dialogue and also give it a title okay and with with that let me save the file and see how it looks so now after refreshing the page we can see the button and when I press it a dialog window pops up now that we know that this is also working let me just add a couple of more text to this page for that I'll simply copy and paste some code here I've just included a sub pader and some text with bullet points and to add some pading I've also included an empty line so after saving the file and navigating back to the website this now looks a bit more like about me page and now that we have that let's work on the contact form because for now as you know we just have a simple text input field to change that we could of course include the code for the contact form also in our about me page but for a better structure I'm actually going to separated and therefore I'll create a new folder and call it forms in this folder I'm going to create a new python file and name it contact. py so now we can use this file to create our contact form and to do so we'll use the form element in which we can now include all our Fields like a text input field for the name and email and a text area input for the actual message lastly we'll have a submit button and if that button is pressed a message should be sent however for now I'll just show a success message as we will implement the logic for handling the messages a bit later okay and just like before I'll turn this form into a function because by doing so we can also import it in our about me page page so here on top I can now import that function from the forms folder and the contact file now that we have access to that function I'll simply replace our text input field here all right and with that in place Let's test things out so when I now press the submit button we'll see our form and after filling out the form and submitting it we'll see our success message great so this seems to be working now we just need to implement the actual logic of what should happen with the message once someone the form and I'm being honest here with you but I think the fastest and easiest solution here is to Simply use a no code tool to process the message because in that way you can quickly set up a whole automation flow like forwarding the message to an email account or saving it to a database now to trigger that automation flow we can use web hooks in simple terms web hooks are just informing your no cool tool every time there has been a new submission and we'll set those things up in just a moment for now I'll simply just leave the web hook variable empty here because before sending any data to a web hook let's just do some basic checks like validating the email address that has been inputed now my validation here is very simple I'm just using a reex formula on the CH GPT gave me to check if it's a valid email pattern and since we using a regular expression here I'll also need to input that python modular and for triggering the web hook we'll also need to UT the request package which we installed at the beginning of the the video okay and with that in place we can actually also do some other checks for that let me just simply copy and paste some code here for example if we didn't input a web hook then I want to show an error message and likewise I'll also check if the user inputed a name an email check if the email pattern looks correct and if the user also inputed a message and only if all those checks are passed I'll res send the data via the web hook and for that I'm just creating a dictionary and then sending that data in adjacent form to the web hook and as we are sending data you want to use a post request afterwards we can check the status code from the response we are getting and see if the data was successfully sent or not all right now as the last step we just need to get the weboc URL and for that I'm using a tool called poly connect I'm not sponsored by poly by the way but I'm using this automation tool heavily for my own business and also have an affiliate Link in the description however you can use any other no code tool like zp or make.
com they all offer web hook it really doesn't matter however what I like about poly is that they have a free plan and also that they have a lifetime deal which I'm personally also using but anyways let me quickly show you how to set things up once you logged in you can create a new workflow and give it a name afterwards you want to define a trigger and in here you want to search for web hook after selecting it and choosing the trigger event you will get your vboc URL and now you just need to copy this URL to your clipboard then back in vs code you want to paste that URL up here and that's all this to it now when I go back to the website we can test it out first let me try to submit an empty form if I do so we will see our error message down here also if I try to input an enveloped email format I'll also get an error but if I input everything correctly and press the submit button we'll see and that the message has been successfully sent and we can also check that now back in public connect if we wait a bit we will see the submitted data from our form and as I said the possibilities are now endless here if you want to keep it simple you could just connect your Gmail account with poly and forward the submitted data as an email or another quick solution would be to store the data in a Google cheats document for that you just select Google cheats and choose that you want to add a new wow lastly you just need to connect public connect with your Google cheats account and then you're all set but for now I leave it here if you want me to do a full tutorial on public connect or show even some of my own automation workflows then let me know in the comments below for now I'll just go back to vs code and finish up the web application as we actually have two more pages left the chatboard and also the sales dashboard however I've plugged in those pages for you as a demo to see what you could do with stream l so therefore I'll just copy and paste some code in here which I wrote for some other tutorials first off we have a chatbot application if you're interested in how it works then check out the following video on my channel okay and for the sales dashboard I don't have an exact tutorial on the code I wrote here but I created a very similar dashboard in another video which you can also check out here okay and with that said let's switch back to our application okay so after we refreshing the site we can now see our interactive sales dashboard so when you change your selection here like the analysis type or the city the chart is updated accordingly and for our chatport we have a very simple chat gbt clone and as I said if you're interested in the code then check out the links in the description okay now for the final touches of our application I'll adjust the overall appearence however streamlet is a bit Limited in the native customization options but there still a couple of things you can trick for that just create a new folder called streamlit inside here create a config DOL file and as we are already here you can also create a secrets. TL file we will come back to that Secrets file in just a second but first let me paste in the following code into our config file so those are now your styling options so you can change for example the background color or the front color and typically there's also a hamburger icon on the right side of every streamlet application if you want to hide that you can also set the tool bar more to minimal now when you try to refresh your site you will notice that nothing has changed because to apply the new theme you need to restart your application so back in my terminal I'm pressing contrl and C to stop the current session and then I'll restart the application and now as you can see the new theme has been applied okay and with that in place let's now also take care of the secrets file in here you can write all the values that you want to hide from your source code in my case the only value which I don't want to expose is the webook URL because I want to avoid that the people are misusing this URL therefore I'll Define a variable name here and then copy the vboc URL to my clipboard and in the contact form instead of inputting the vboc URL directly in here I'm going to fetch it from the secrets file with that in place let me switch back to the secrets file and paste it right here all right now whenever you create a Secrets file I suggest adding it also to your GI ignore file so that you don't accidentally push it to GitHub for that let me create a dok ignore file and input here on the path to the secrets. tomal file additionally I'm also going to exclude any py cach data like the one in our forms folder lastly before we are going to deploy this code it is also recommended to include a requirements file this is just a normal text file and which you list down all the third party dependencies you use use in your project in my case I use penas request and of course streamlit all right and with that all in place we can now finally deploy our application so that everybody on the internet can access it and I actually already have tutorials on my channel to show you how to deploy streamed applications to Heroku or Renda yet to keep things simple here let's deploy our application to the stream Community Cloud for that we first need to upload our code to GitHub in my case I just use the vs code integration for that first I'll initialize a new repository then I'll commit it with a message and after my commit I'm going to publish it as a public repository on GitHub now that we have the code on GitHub now weate to the stream Cloud under stream.
