Now that the UI is all set up, it's time to go onto the next step
where we actually can start saving some of this data that the user is entering.
So that there's a couple of things I want to show you before we get started.
Firstly, notice how when we run our code at the moment,
it just launches our app.
But wouldn't it be nice if the cursor was already within the first textbox? That
means the user can start typing straight away when they launched the password
manager. To do that, you can of course dig through the docs,
but the easiest way is to get hold of that website entry and then call a method
on it called a focus.
And this will focus the cursor into that particular entry.
And you can see that right there.
Now the next thing that would be nice is when you're signing up for lots of
websites, at least in my case,
I often use just one email to sign up.
So wouldn't it be nice if when we launch our password manager that this email
field is already pre-populated with our most commonly used email?
Well,
we can do that by simply adding a starting value to that email entry.
And the way that we do that is through a method called insert.
Now insert it takes two parameters. And in fact,
you can actually scroll down to the insert method and you can see it describes
in detail that it takes an index
and also the string that you want to insert. The way that the index works is it's
basically where the cursor is.
If you wanted to insert it at the very beginning of that email entry,
then you could just put in zero.
That basically inserts this piece of text at the first zeroth character.
Alternatively, there's another useful index which is called end.
And this end comes from tkinter constants and its just a constant
that's gonna represent the very last character that's inside that entry.
For example, if inside your entry
you already had some text and you want to insert it after your text here,
then you would use the index as end.
But if you want to insert it at the very beginning,
then you would use the index as zero. Now in our case,
it shouldn't actually matter because our email entry will start out being
completely empty.
So I'm going to choose to insert this piece of text at the very beginning
and the text that I'm going to insert is just a example dummy email.
This is not my real email, but in your case,
if you were creating your own password manager,
then you could put down your own email so that every time you run the app,
it already starts out being pre-populated when that email that you've got.
So now the rest of the challenge is pretty much going to be up to you. Inside
this save password section,
what I want you to do is to be able to take the inputs that are put into the
website entry, the email entry and the password entry,
and when the user clicks on this add button,
I want you to somehow figure out how to save that data into a file called data
.txt.
This data.txt is going to take the website that the user entered,
the email that they entered and the password that they entered
and it's going to put it in here with a space in between and a pipe symbol that
you can find on your keyboard. Or in fact, you can format this however you like
because at the end of the day,
you're going to be the one looking at this file to find your emails and
passwords. So format it in a way that's comfortable for you.
But essentially, what we want to do is to transport things that the user types
into here,
the website that this password is for, their email and their password and the
moment that they press this add button to trigger some sort of function that
saves this information into a data.txt file.
And that format is the information like this.
And every time the user adds another entry,
it's going to be added on a new line and it's going to be appended to the end of
the previous entry.
So I know that it's been a little while since we last dealt with writing to
file. So I'll link to the documentation that's relevant to this challenge.
One is how to write to file using Python and you can see the demo code
which you can run and you can try out,
and then you're going to format that to work for your particular case. Now,
the other thing is the tkinter entry widget.
So there is the insert method that's going to be pretty useful.
But the other thing that you want to happen is once you press the add button,
you want all of this information other than the email to be cleared out.
So you're probably also going to have to take a look at the delete function.
And at the very top,
you can see it even shows you how to delete something entirely from an entry.
Using these two pieces of documentation.
I want you to be able to take this information,
put it into a data.txt file
and afterward, wipe clear this website entry and the password entry.
So that's all there is to it. There's going to be quite a bit of code writing.
So you have a think about it and go ahead and complete this challenge.
I'll wait for you and we'll go through the solution afterward together.
So the first thing I need to happen is when the user presses on the add button,
I need to trigger a function. So in this add_button,
I'm also going to add a command and I'm going to call my function save.
So I'm going to put that function inside the section save password.
Now this save function is going to write to a file
which is called data.txt,
or in fact, you can call it anything you want. Inside the save function
we want to be able to write to a particular file.
So we need to open the file and then we need to write to it.
And we can use the option a, to append to the end of the file.
Or write, which overrides any existing content or read,
which just reads the actual file. Now in our case,
every time we add a new password, we wanna add it to the previous passwords.
So we're going to need this append.
So let's go ahead and open a file
which we're going to call data.txt and we're going to open it using the
append mode. Now,
remember that when you're opening a file using the append mode or the write mode,
and that file doesn't exist, it's simply going to create it.
We are gonna open this and you can either save it to a file name,
so you could do it like this data_file = open,
or you might have remembered that previously we spoke about the with keyword.
So we can say with open this particular data file as our data file.
And what this allows us to do is it will close this file automatically without
us having to later write file.close.
So it's a much better way of working with files.
But if you didn't remember the with keyword,
don't worry. Using the open will still work. Now,
once we've opened our data.txt in append mode,
the next step is to actually add the pieces of data. Now,
how do we get hold of data from our entries? Well,
that's where the entry documentation comes in handy.
And you can see even at the very top,
it tells you that to fetch the current entry text, use the get method,
so the entry.get.
We can get hold of our website by getting hold of the website entry and then
calling .get.
And then we can do the same for email and password.
Once we've gotten all of these pieces of text,
then we're going to be writing it into our file.
So our data_file.write
and what we're going to write is a string
which I'm going to format using an f-string.
And I'm first going to put in the website and then space and pipe symbol,
space and then it's going to be the email
and finally, it's going to be the password. Let's check this out,
let's run it and see if it works
1: right?
0: Say we're signing up for Amazon, I'm going to use my normal username
and I'm going to create a password which is super insecure,
which you should never use.
But now I'm going to click on add. And after I've clicked it,
even though nothing has happened so far,
if we take a look inside our project folder,
you can see we've now magically created this data.txt file. And you can see
it's formatted our website, email, and password, all into that file.
So that's pretty much a success. Now,
the other thing I mentioned is that it would be nice to get some sort of
indication that it worked right? And for our application to be prepped and ready
for the next piece of data to be entered.
So we wanted to delete whatever text there's inside the website entry and the
password entry. If you take a look again at the documentation,
you can see that you can delete whatever is inside the entry by calling delete
and telling it to delete from a particular index to another index.
Now, there's more detailed if you actually scroll down to the actual method and
it tells you that it takes two parameters; first and last. First is the start of
the range and last is the end of the range.
And it tells you that if you omit it, it's only going to remove one character.
So that's not what we want.
We want it to remove all of the characters in a particular entry.
So let's start out with our website entry, call delete on it,
and we're going to start from index zero and go all the way to the end. In the
same way that we used our index
when we inserted our email to the email entry,
we moved the cursor to the very start, the zeroth character in that entry.
In this case, we're deleting from the zeroth character to
the end of the entry.
And then we can do the same for our password entry,
1: right?
0: And now if we run this code,
you can see that once I type something in and let's just generate another bad
password Qwerty. And by the way,
if I've called out any of your passwords, just for my sake, um,
and definitely for your own security, go ahead and change it.
These are really bad passwords. But either way,
I'm going to click add and you can see the moment that I've clicked that my
website and my password entries have now cleared out and it's now ready to take
the next entry. And back in my data.txt, I've now got
another entry.
But notice this, it's been added to the end of the previous entry,
but its on the same line. That's a little bit confusing.
Now you might remember this special character which is \n,
and that allows us to enter things onto a new line.
Let's delete everything that we've got in here so far and let's hit save so that
we can start from scratch.
Now let's run our program with that new line inserted.
And if I go ahead and add the website and let me think of another bad password,
um, password is a really terrible password. Now,
if I click add,
you'll notice that those fields disappear and that the password gets added into
here. Now, if I try and add another value in here,
so let's say-- then you can see that the next value got added in on the next line,
which is a lot better in terms of formatting.
These are just small things that make things look tidy and neat.
But the big part was remembering how to save things into a file and using the
documentation to get hold of the values inside our entries and putting it into
our data file.
One of the things you might have realized is that it's a terrible user
experience when the user enters a piece of data,
say a website and a password and they click add. Things sort of disappear,
but they don't really have a confirmation that this, in fact, did work.
So in the next lesson,
we're going to look at how we can create some popups so that we can show the
user what the result was of their action.
We can tell them if it was successful or if it was not, ask them to confirm
whether if they're happy with that data entry. So for all of that and more,
I'll see you in the next lesson.