0 1 00:00:04,410 --> 00:00:06,670 In the lesson we are going to our main page design 1 2 00:00:06,850 --> 00:00:09,260 And to that what we need to do 2 3 00:00:09,260 --> 00:00:15,910 I already created our project by the way and i named it "My Library" its very easy how we can create a new project? 3 4 00:00:16,120 --> 00:00:20,940 File - New Project you need to name your project and create 4 5 00:00:20,980 --> 00:00:22,390 Also what I want to do. 5 6 00:00:22,630 --> 00:00:27,940 I want to here use icons right to use icons 6 7 00:00:27,940 --> 00:00:33,880 What I will do let you copy my file is copy and paste them here my icons. 7 8 00:00:34,240 --> 00:00:36,700 By the way don't worry I will provide these icons 8 9 00:00:36,720 --> 00:00:37,430 OK. 9 10 00:00:37,500 --> 00:00:39,320 And so what is next. 10 11 00:00:39,340 --> 00:00:41,870 I want to create a Python file here 11 12 00:00:41,880 --> 00:00:45,740 main.py its ok 12 13 00:00:45,820 --> 00:00:48,880 So what I will do now i need to create my theme 13 14 00:00:48,880 --> 00:00:49,200 Right. 14 15 00:00:49,460 --> 00:01:00,640 I will say from tkinter import asterisk OK and after that here from tkinter import ttk 15 16 00:01:00,750 --> 00:01:01,150 Okay. 16 17 00:01:01,780 --> 00:01:10,380 And what I will do I will create a class here and my class name will be Main and i will inherit it from object 17 18 00:01:10,420 --> 00:01:10,890 OK. 18 19 00:01:11,290 --> 00:01:12,480 And here what I will say. 19 20 00:01:12,490 --> 00:01:17,580 def init and after self i need use another parameter and i will say 20 21 00:01:17,710 --> 00:01:19,020 master 21 22 00:01:19,410 --> 00:01:20,130 OK. 22 23 00:01:20,320 --> 00:01:27,150 And after that here i will say self.master = master 23 24 00:01:27,550 --> 00:01:28,710 OK. 24 25 00:01:28,930 --> 00:01:35,640 Now what I I need to do i need to create my main function right here what I will say def main 25 26 00:01:39,270 --> 00:01:43,350 and here I need to say . 26 27 00:01:43,540 --> 00:01:46,300 root is equal to Tk right. 27 28 00:01:47,040 --> 00:01:54,030 And after that here app equals Main() it is a object 28 29 00:01:54,040 --> 00:01:58,350 From my class ok and my class name and i need to pass in 29 30 00:01:58,370 --> 00:01:59,300 here root 30 31 00:01:59,460 --> 00:02:00,150 OK. 31 32 00:02:00,240 --> 00:02:11,020 And after that root.title for the title i will say library management system 32 33 00:02:11,790 --> 00:02:12,650 OK. 33 34 00:02:12,830 --> 00:02:24,540 And also let's define geometry for our application root.geometry for the geometry i will say 1350 by 750 OK. 34 35 00:02:24,620 --> 00:02:28,550 Plus 350 plus 200. 35 36 00:02:28,840 --> 00:02:29,600 OK. 36 37 00:02:29,870 --> 00:02:30,830 And what is next. 37 38 00:02:30,830 --> 00:02:33,210 Now I want to use icon for my window. 38 39 00:02:33,250 --> 00:02:33,910 OK. 39 40 00:02:33,940 --> 00:02:34,450 to do that . 40 41 00:02:34,480 --> 00:02:39,500 What i need to say I will say root dot iconbitmap 41 42 00:02:39,700 --> 00:02:40,420 OK. 42 43 00:02:40,460 --> 00:02:51,960 And after that here my location of my icon "icons/icon.ico" it is here by the way 43 44 00:02:51,960 --> 00:02:56,480 icons icon.ico OK 44 45 00:02:56,740 --> 00:02:57,750 And after that here what i need to say 45 46 00:02:57,750 --> 00:03:06,280 I need to say root.mainloop right.And last thing i need to say 46 47 00:03:06,780 --> 00:03:15,990 If __name__== '__main__' 47 48 00:03:15,990 --> 00:03:19,140 If __name__== '__main__' 48 49 00:03:19,500 --> 00:03:23,890 here i will call my function main that's all 49 50 00:03:23,890 --> 00:03:31,540 Now our window is ready let's run our application first as you see our window is here 50 51 00:03:31,540 --> 00:03:35,730 Here we have an icon our own icon is here 51 52 00:03:35,800 --> 00:03:36,150 OK. 52 53 00:03:36,180 --> 00:03:37,150 It's something yellow. 53 54 00:03:37,390 --> 00:03:38,150 Very small. 54 55 00:03:38,620 --> 00:03:39,000 Anyway. 55 56 00:03:39,040 --> 00:03:42,440 So what do you do now we need to create our frames. 56 57 00:03:42,820 --> 00:03:47,830 But before creating our frames I want to show you something for example for this application. 57 58 00:03:47,830 --> 00:03:50,180 How do we create our frames. 58 59 00:03:50,350 --> 00:03:54,500 We will create a main frame that one will be our main frame 59 60 00:03:54,930 --> 00:03:55,640 OK. 60 61 00:03:55,690 --> 00:03:58,120 And after that here i want to create a top frame 61 62 00:03:58,810 --> 00:03:59,720 OK. 62 63 00:03:59,800 --> 00:04:02,470 This is top frame and something like this. 63 64 00:04:02,920 --> 00:04:13,440 And after that I want to create a center frame this my center frame and here i want to create left center frame 64 65 00:04:13,690 --> 00:04:16,010 Ok inside of center frame by the way 65 66 00:04:16,290 --> 00:04:19,140 And other one will be right center frame. 66 67 00:04:19,560 --> 00:04:32,550 Something like that even here I will create another frame for search bar and also for list bar ok. So master 67 68 00:04:32,910 --> 00:04:36,390 frame will be our main frame and after that here 68 69 00:04:36,450 --> 00:04:43,950 Top frame and center frame and this left center frame will be child of center frame 69 70 00:04:43,950 --> 00:04:48,360 right center frame again will be child of center frame 70 71 00:04:48,480 --> 00:04:53,600 And these guys two guys they will be this frame right center frame child. 71 72 00:04:54,180 --> 00:04:55,270 OK. 72 73 00:04:55,750 --> 00:05:02,160 And I hope you understand how we will organize our frames after that here 73 74 00:05:02,160 --> 00:05:09,320 What I to do here I will come and start to create my frames and here I will say frames 74 75 00:05:10,170 --> 00:05:13,740 And first one is my main frame right. 75 76 00:05:13,740 --> 00:05:18,490 And I will use frame constructor method only i will pass in here self.master 76 77 00:05:18,560 --> 00:05:19,060 ok. 77 78 00:05:19,270 --> 00:05:20,120 OK. 78 79 00:05:20,460 --> 00:05:22,120 Because this is my main frame. 79 80 00:05:22,160 --> 00:05:22,740 OK. 80 81 00:05:22,770 --> 00:05:24,610 And after that here I will say mainframe dot 81 82 00:05:24,610 --> 00:05:30,530 pack i will not pass in anything 82 83 00:05:30,570 --> 00:05:31,320 OK. 83 84 00:05:31,380 --> 00:05:32,840 Because this my main frame. 84 85 00:05:33,150 --> 00:05:40,500 After that I want to create two different frame frames and the first one is top frame and top frame 85 86 00:05:40,510 --> 00:05:51,950 will be is equal to now I will say again frame but as for master what i need to pass in here 86 87 00:05:51,970 --> 00:05:53,010 I will use main frame 87 88 00:05:53,130 --> 00:05:53,810 OK. 88 89 00:05:53,920 --> 00:05:57,170 Because this top frame will be child of my main frame 89 90 00:05:57,610 --> 00:05:58,030 OK. 90 91 00:05:58,480 --> 00:06:05,720 And after that here I want to define width 1350 OK height 91 92 00:06:05,880 --> 00:06:13,040 Let's ay height is equal to 70 and back ground color. 92 93 00:06:13,110 --> 00:06:14,130 for back ground color 93 94 00:06:18,230 --> 00:06:21,330 I want to say f eight f eight f eight. 94 95 00:06:21,450 --> 00:06:22,180 OK. 95 96 00:06:22,200 --> 00:06:28,590 And also let's use pad, padx=20 96 97 00:06:28,920 --> 00:06:33,120 And also I want to use border for my frame. 97 98 00:06:33,120 --> 00:06:33,410 Okay. 98 99 00:06:33,420 --> 00:06:35,060 So I need to say here 99 100 00:06:35,140 --> 00:06:39,940 Relief is equal to sunken. 100 101 00:06:40,170 --> 00:06:40,560 OK. 101 102 00:06:41,340 --> 00:06:43,730 And also I want use borderwidth. 102 103 00:06:43,850 --> 00:06:47,820 width let me take this guy here first 103 104 00:06:48,280 --> 00:06:59,870 borderwidth is equal to 2 is enough i think and after that here what i need to say i need to use a geometry manager topFrame 104 105 00:07:00,320 --> 00:07:02,290 dot lets use pack 105 106 00:07:02,450 --> 00:07:03,230 OK. 106 107 00:07:03,230 --> 00:07:07,430 And for the side it will be top 107 108 00:07:07,580 --> 00:07:10,980 And also I want to use fill=X value 108 109 00:07:11,240 --> 00:07:14,680 Ok if I run my application now 109 110 00:07:16,900 --> 00:07:24,350 For the width must be 2 so its here and if I run it now something wrong let me check 110 111 00:07:24,480 --> 00:07:24,980 So 111 112 00:07:29,030 --> 00:07:31,480 this is.... 112 113 00:07:32,070 --> 00:07:32,730 It's fine. 113 114 00:07:32,750 --> 00:07:33,130 But 114 115 00:07:37,170 --> 00:07:37,850 Something 115 116 00:07:38,060 --> 00:07:46,450 And it's fine mainFrame, width, height, bg 116 117 00:07:46,560 --> 00:07:48,320 It's fine something. 117 118 00:07:48,830 --> 00:07:50,420 There is no problem actually 118 119 00:07:50,670 --> 00:07:54,890 Its main it's also fine run 119 120 00:07:57,160 --> 00:07:58,210 Width 120 121 00:07:58,810 --> 00:07:59,860 Yes here. 121 122 00:08:00,350 --> 00:08:03,520 Width it must be width right 122 123 00:08:07,150 --> 00:08:09,290 Now I think its fine lets run it 123 124 00:08:09,370 --> 00:08:12,150 As you see now our window is here 124 125 00:08:12,190 --> 00:08:13,630 This is our top frame. 125 126 00:08:13,630 --> 00:08:14,010 OK. 126 127 00:08:14,030 --> 00:08:17,380 We'll use this one for our toolbar. 127 128 00:08:17,380 --> 00:08:17,680 OK. 128 129 00:08:17,680 --> 00:08:18,410 And it's color you see it's different 129 130 00:08:18,410 --> 00:08:19,740 You see it's different. 130 131 00:08:19,840 --> 00:08:22,430 And height is 70 131 132 00:08:22,430 --> 00:08:27,600 And now what I do I want to do I want to create this frame the center frame. 132 133 00:08:27,670 --> 00:08:31,170 That one will be my center frame to do that 133 134 00:08:31,180 --> 00:08:40,450 What I need to do here I come and say center frame and after that for center frame, centerFrame 134 135 00:08:42,690 --> 00:08:44,220 Is equal to frame. 135 136 00:08:46,050 --> 00:08:49,450 And here parent will be main frame again right. 136 137 00:08:50,630 --> 00:08:54,900 And width is equal to 1350 137 138 00:08:55,890 --> 00:08:58,740 I want to use another border relief 138 139 00:08:58,800 --> 00:08:59,480 will be 139 140 00:08:59,760 --> 00:09:00,910 This time RIDGE. 140 141 00:09:01,100 --> 00:09:01,620 Okay. 141 142 00:09:02,790 --> 00:09:04,090 And after that. 142 143 00:09:04,110 --> 00:09:05,910 Again back ground 143 144 00:09:05,930 --> 00:09:08,750 Color will be here 144 145 00:09:08,890 --> 00:09:11,490 e0f0f0 145 146 00:09:11,700 --> 00:09:12,100 Okay. 146 147 00:09:12,460 --> 00:09:18,320 And also I want to use height property, height is equal to 680 147 148 00:09:19,110 --> 00:09:22,750 Now if I use geometry manager it will be visible 148 149 00:09:22,860 --> 00:09:30,780 My frame center frame the pack here I will say again side is equal to TOP - OK. 149 150 00:09:32,620 --> 00:09:33,360 Now if I run my application again 150 151 00:09:33,420 --> 00:09:37,920 something wrong again. 151 152 00:09:37,930 --> 00:09:49,560 So this color name e0f0f0 something like that must be actually this one is it was 152 153 00:09:49,620 --> 00:09:56,330 Actually this is not "o" this is "0" right e0f0f0 153 154 00:10:00,250 --> 00:10:10,460 so let's say something like red to see our border first as you see now. 154 155 00:10:10,520 --> 00:10:14,770 Okay its here first frame and also second frame but 155 156 00:10:14,880 --> 00:10:16,800 So why he is like that 156 157 00:10:16,810 --> 00:10:18,710 I did not understand. 157 158 00:10:19,060 --> 00:10:19,750 Sorry. 158 159 00:10:19,750 --> 00:10:20,560 Of course here. 159 160 00:10:20,650 --> 00:10:22,530 I didn't use your hashtag right. 160 161 00:10:22,810 --> 00:10:25,440 So here hashtag and after that here i need to say 161 162 00:10:25,450 --> 00:10:32,810 e0f0f0 now it will be fine,run 162 163 00:10:33,650 --> 00:10:38,820 Yes as you see now it's here is kind of green our color. 163 164 00:10:38,860 --> 00:10:39,910 Back ground color. 164 165 00:10:41,290 --> 00:10:47,840 So what I need to do now I need to create another label right it will be my center left frame 165 166 00:10:47,840 --> 00:10:48,780 inside of this center frame. 166 167 00:10:49,160 --> 00:10:50,560 To do that what I will say here 167 168 00:10:53,600 --> 00:10:54,400 Center 168 169 00:10:57,060 --> 00:10:57,690 left Frame 169 170 00:11:01,310 --> 00:11:13,420 and here I will say center left frame is equal to frame again and parent will be this time center frame right center 170 171 00:11:13,420 --> 00:11:19,840 frame and width is equal to nine hundred and height. 171 172 00:11:20,920 --> 00:11:26,430 Is equal to 700 and background color. 172 173 00:11:26,520 --> 00:11:30,700 Is going to be for center left. 173 174 00:11:30,900 --> 00:11:33,240 I will say hashtag after that 174 175 00:11:33,500 --> 00:11:39,830 f0f0f0 OK and also let's use for this guy. 175 176 00:11:40,840 --> 00:11:41,500 Borderwidth. 176 177 00:11:41,590 --> 00:11:42,050 OK. 177 178 00:11:43,530 --> 00:11:45,480 And also I will use border 178 179 00:11:45,840 --> 00:11:47,240 Borderwidth 179 180 00:11:49,090 --> 00:11:56,770 Is equal to two and relief is equal to sunken by the way you can use sunken. 180 181 00:11:56,770 --> 00:11:57,340 Like that. 181 182 00:11:57,340 --> 00:12:01,770 Also if you use quotes some lower case. 182 183 00:12:01,770 --> 00:12:10,060 OK so this is also acceptable for capital letters you don't need to use here quotes 183 184 00:12:10,610 --> 00:12:17,420 And after that here what I need to do to I need to use centerLeftFrame.pack for the pack 184 185 00:12:17,430 --> 00:12:24,890 What I will do? I will use side is is equal to left okay because it will be left frame If I run my application 185 186 00:12:24,890 --> 00:12:25,480 again. 186 187 00:12:27,040 --> 00:12:28,400 As you see now it's here. 187 188 00:12:28,650 --> 00:12:36,080 But when I create the other one I will push this frame to left side Ok and here what I need to do. 188 189 00:12:37,690 --> 00:12:47,140 Back ground color is actually same I think and I will use that one because I did not like it much 189 190 00:12:49,220 --> 00:12:50,620 This one is better I think. 190 191 00:12:51,070 --> 00:12:53,950 OK and what I need to do now 191 192 00:12:53,970 --> 00:13:03,010 We need to come here and say center right frame Ok 192 193 00:13:07,340 --> 00:13:10,280 CenterRight 193 194 00:13:13,090 --> 00:13:19,460 Frame is equal to frame and parent will be center frame 194 195 00:13:23,700 --> 00:13:27,070 Width 450 height 195 196 00:13:31,150 --> 00:13:36,990 height is equal to for the center right 700 again 196 197 00:13:37,110 --> 00:13:44,130 OK and back ground color is equal to Sorry 197 198 00:13:44,270 --> 00:13:47,820 And here I'll use that one. 198 199 00:13:47,890 --> 00:13:50,760 Same one OK. and here 199 200 00:13:51,090 --> 00:13:55,530 after that what I need to do 200 201 00:13:55,530 --> 00:14:02,920 I will also use borderwidth and also border and so lets here 201 202 00:14:03,050 --> 00:14:13,620 Let's copy these guys will be same OK and paste it here and now what I need to do I need to use geometry manager 202 203 00:14:13,830 --> 00:14:14,340 centerRightFrame dot pack 203 204 00:14:14,350 --> 00:14:18,760 I will say here again. 204 205 00:14:18,950 --> 00:14:23,030 Now I don't need to use left because already this one is on the left 205 206 00:14:23,060 --> 00:14:24,440 So I will not use left 206 207 00:14:25,070 --> 00:14:28,610 If I run it as you see now boom its here 207 208 00:14:28,610 --> 00:14:31,330 This is the left one and this is the right one. 208 209 00:14:31,800 --> 00:14:34,570 And so what I need to do actually for now. 209 210 00:14:34,580 --> 00:14:37,140 That's all because it's already 210 211 00:14:37,310 --> 00:14:39,800 I think it's more than 10 minutes now our lesson 211 212 00:14:40,280 --> 00:14:47,930 And in previous in next lesson we are going to continue for our design because we did not 212 213 00:14:48,680 --> 00:14:49,860 finish it yet. 213 214 00:14:49,920 --> 00:14:51,710 For now that's all see you in the next