Figure 13.1 shows all these steps, from creating the new directory to installing the required libraries:
Figure 13.1: Virtual environment and app.py file preparation
Now, we are ready to edit the Python code in the app.py file.
Inside Sublime Text, we can start writing the code for our new login/signup web app, as shown in Figure 13.2:
Figure 13.2: Starting code
The preceding code should be quite familiar. Here’s a breakdown of what we did:
- At the very beginning, on lines 1 and 2, we import the necessary libraries – in this case, streamlit and Pillow.
- After that, on line 5, we create a main() function:
- In the main() function, we write some HTML code in the html_temp variable (line 8) to set a big title in the web app that specifies the background color, the padding, and the text color
- Then, we visualize the HTML code using the st.markdown instruction (line 14)
- Next, we create a list on line 16 that contains the voices of the menu we want to visualize and add a selectbox in the sidebar on the left-hand side of the screen.
- Then, we check the selection (line 19) and if it is Home, we do something: at the moment, we just write some text in the subheader format. Meanwhile, if the selection is Login (line 25), we pass (we will develop the code for this in the Creating the Login menu subsection); the same goes for Signup (line 28).
- Finally, we add an About section (line 32), where we are free to write anything we want.
Please note that in the Home section, just after the header, we can visualize an image thanks to the st.image instruction. This image, named login.png, must be present in the same directory as the app.py file, as shown in the Folder section of the editor in Figure 13.2.
As usual, when we execute the following command, the web application will be executed:
pipenv run streamlit run app.py
The result in the browser is quite simple and clean:
Figure 13.3: The login/signup web app in the browser
On the left, we have the sidebar with the menu, while in the middle, there is the Home section with a beautiful picture.
The skeleton is ready. Now, it’s time to connect our web app to a database so that we can save all username/password data and use it at the proper time.
