Hey Folks !
This will be in continuation to my last blog which was on getting started with mobile app development using python and kivy language, In that we particularly made the front-end for the login page. So let’s move ahead with the Button execution and database in this section.
We know that for the login page it is essential to have the users information in the database stored or if the user is new to the application they have to Sign Up and store their user credentials. For that we will be first making our Sign Up button on the “LoginScreen” active and also make the GUI for the Sign Up Screen.
To make the SignUp button active the function will be the user click should redirect to the other screen i.e. SignUp Screen. The other Screen will be made with new sets of Widgets like we had for the LoginScreen. To make the other page visible we will make a function call on the Button SignUp we created in the “LoginScreen”.
Previously we had the following code in our “graphics.kv” file for the user interface.
Let’s start by adding the attribute “on_press” in the SigUp button child widget located inside the “LoginScreen” rule/widget and also write the logic for the button in the python file. The “on_press” is used to call the function or parameter assigned to it when the user press the button on the interface. We call the function “root.sign_up” in this attribute.
Button:
text: "Sign Up"
on_press: root.sign_up()
In kivy language when we use “root” that actually refers to the rules or the parent widget defined inside the “< >” brackets. Kivy language works in a level or we can say stage ways of the widget. Like in our example the “RootWidget” is the first level and then comes the screens which are inc-operated inside it eg: “LoginScreen”. The child widgets which are inside the LoginScreen then make the third Layer.
Here we have called the parent widget LoginScreen using root and called the method “sign_up()” of LoginScreen. Now we don’t have sign_up as a predefined method in LoginSCreen, but remember we made a class of all the rules in our python file so we define the method “sign_up” using self parameter in the class “LoginScreen” in the python file (“main.py”). This all sums up to when we press the Button “SignUp” it calls the method “sign_up” in the python file.
from kivy.app import App
from kivy.uix.button import Button
from kivy.lang import Builder
from kivy.uix.screenmanager import ScreenManager, Screen
Builder.load_file("graphics.kv")
class LoginScreen(Screen):
def sign_up(self):
pass
class RootWidget(ScreenManager):
pass
class MainApp(App):
def build(self):
return RootWidget()
if __name__ == '__main__':
app = MainApp()
app.run()
Now let’s hop on to designing our page in the “graphics.kv” file which we want to be switched to when we click the button “Sign_Up” just as we created the LoginScreen. Here we will have one GridLayout and have child widget which will be visible to the user inside it. The last widget that is the Button “Submit” ,its function will be as soon as the user enters the id and password and click Submit it should store the credentials in our database and later during login, the database will be checked for if the user exists and has entered the correct information. For the storing of information we can use the json file.
<SignUpScreen>:
GridLayout:
cols: 1
padding : [80,10,80,10]
Label:
text: "Sign Up"
TextInput:
hint_text: "Username"
TextInput:
hint_text: "Password"
Button:
text: "Submit"
We have created the page SignUp Screen, we have to include it under the RootWidget rule and give it a name so that we can return this screen when user clicks the “SignUp” button from the Login Page. The name of the Screen will be used in our python file to provide the logic.
<RootWidget>:
LoginScreen:
name: "Login_Screen"
SignUpScreen:
name: "SignUp_Screen"
Also, as we have created “SignUpScreen” as a new rule in our “graphics.kv” file remember to add this class in our python file inheriting it from the Screen like we did for other two rules.
class SignUpScreen(Screen):
pass
Now we have our SignUp page ready to be linked to the SignUp button. To control the ScreenManager as we have to switch the screen, in kivy we use “manager.current” and assign it to the name we just gave to our screen in the kivy file. We already created the sign_up method in the LoginScreen class next we will be just putting the link to the SignUp under that method with the instance as screen name using self.manager.current. Here manager is the attribute of the Parent “Screen” and current is the attribute of manager. Let’s add that in our main.py file.
class LoginScreen(Screen):
def sign_up(self):
self.manager.current = "SignUp_Screen"
Now when we run the main.py file we will be getting the login screen and when we click on the “SignUp” button the screen goes to the SignUp page we just created.
I will just one more attribute for the design purpose so as of now the space between the widgets is not there, so will just add that to make the page a little more appealing to the user.
<SignUpScreen>:
GridLayout:
cols: 1
padding : [80,10,80,10]
spacing : 80,80
Label:
text: "Sign Up"
TextInput:
hint_text: "Username"
TextInput:
hint_text: "Password"
Button:
text: "Submit"
Now we get the output for the SignUp button as :
This is how we make a button executable. Let’s now store the user data using the SignUp screen in the json file.
First step would be to make or “Submit” button in the SignUpScreen working just as we did for the “Sign Up” button. Lets add the attribute on_press for the button in the kivy file(graphics.kv).
Button:
text: "Sign Up"
on_press: root.sign_up()
Also define the method “submit_user” in the “SignUpScreen” class we created in the python file(main.py).
class SignUpScreen(Screen):
def submit_user(self):
pass
Now the functionality of this button will be to store the user credentials i.e. the username and the password so we have to pass those parameters in the Submit button. To pass those parameters the textbox username and password have to be given a name with the attribute “id” and then use it to store the values entered in them by the user.
TextInput:
id: username
hint_text: "Username"
TextInput:
id: Password
hint_text: "Password"
Now we add these ids as parameters in the “Submit” Button and also give them the “text” property to get the converted text format for the user input in the fields. In “root.ids”, as we discussed earlier root refers to the rule that is here is the “SignUp screen” and ids here is the property of the SignUpScreen object which actually inherits it from the “Screen”.
Button:
text: "Submit"
on_press: root.submit_user(root.ids.username.text,root.ids.password.text)
Same way the parameters are to be passed in the function “submit_user” created in the logic created python file though they don’t link to the parameter names we gave here it will be just mapping the parameters inside the function in sequential manner.
SignUpScreen(Screen):
def submit_user(self, username1, Password1):
pass
For database we will be needing a “.json” file to store the user credentials. Lets make a “credentials.json” to act as our database. Next we write the logic in the function “submit_user” we just passed parameters in. To make our python code work on the .json file we will use with open. Before this we have to add the json library in our python code by using “import json”. Then use the load method from json to upload the file in credentials basically just updating the previous data.
class SignUpScreen(Screen):
def submit_user(self, username1, Password1):
with open("credentails.json") as database:
credentials = json.load(database)
Next we have to make this “credentials” as a dictionary to store the user data. Now what is dictionary? I have covered how to work with dictionary in one previous blog you can have a quick look there. Dictionaries allow us to bind almost limitless amount of real – world data more accurately. It allows you to connect pieces of related information. Also how to create a dictionary in python –
So we create a credentials dictionary format first in our credentials.json file.
{"user123": {"username": "username1", "password": "pass1" }}
This reads as for the user “user123” the data stored is as in the field username the user entered “user123” and in the password textbox goes the user password as “pass1”. This is one entry which we made manually so that the later entered entries follow the same structure. Here we have made a looped dictionary as –
We will also give the same logic in our python file.
class SignUpScreen(Screen):
def submit_user(self, username1, Password1):
with open("credentials.json") as database:
credentials = json.load(database)
credentials[username1] = {'username' : username1 ,'password' : Password1}
This is how we are linking our 3 files the textboxes from the kivy file and data entered in them getting stored in json file.
class SignUpScreen(Screen):
def submit_user(self, username1, Password1):
with open(“credentials.json”) as database:
credentials = json.load(database)
class SignUpScreen(Screen):
def submit_user(self, username1, Password1):
with open("credentials.json") as database:
credentials = json.load(database)
credentials[username1] = {'username' : username1 ,'password' : Password1}
with open("credentials.json", 'w') as database:
json.dump(credentials, database)
Now we open our credentials.json file with write mode using “w” so that we can rewrite the whole file as soon as the new entry is made. so we open and use the dump method from json and pass the parameters as whenever a new user enters the data what it does is every time rewrite the whole credential.json file just adding the new values in our previous data stored so it keeps on updating the dictionary and then rewrite the whole. So we get a list of user credentials.
With this we are done with all the coding part now let’s test our code.
Let me first drop what we have in our 3 files so far.
<LoginScreen>:
GridLayout:
cols: 1
padding : [80,10,80,10]
GridLayout:
cols: 1
padding : [10,50,10,50]
Label:
text: "User Login"
TextInput:
hint_text: "Username"
TextInput:
hint_text: "Password"
Button:
text: "Login"
GridLayout:
cols: 2
padding : [10,230,10,10]
Button:
text: "Forgot Password"
Button:
text: "Sign Up"
on_press: root.sign_up()
<SignUpScreen>:
GridLayout:
cols: 1
padding : [80,10,80,40]
spacing : 80,80
Label:
text: "Sign Up"
TextInput:
id: username
hint_text: "Username"
TextInput:
id: password
hint_text: "Password"
Button:
text: "Submit"
on_press: root.submit_user(root.ids.username.text, root.ids.password.text)
<RootWidget>:
LoginScreen:
name: "Login_Screen"
SignUpScreen:
name: "SignUp_Screen"
Ok let’s run the main.py file. We get the Login page click on the sign up button enter the credentials and click submit. Ok now we don’t see anything happening, go to the credential.json and refresh it there we have our new entry made. voila!
In this section we covered how to work with buttons and database. Next we will be doing the Login Page functionality.
Happy coding š