0 1 00:00:04,290 --> 00:00:05,123 Hello again. 1 2 00:00:05,123 --> 00:00:06,315 In previous lecture, what we did? 2 3 00:00:06,315 --> 00:00:07,880 Let me run our application first. 3 4 00:00:07,880 --> 00:00:11,504 We created our Search Box and also List Box right. 4 5 00:00:11,504 --> 00:00:14,350 But we forgot to create our image, okay. 5 6 00:00:14,350 --> 00:00:15,750 And in this lecture, we are going to create 6 7 00:00:15,750 --> 00:00:18,010 our image for here. 7 8 00:00:18,010 --> 00:00:20,260 And of course, we need to create a new frame. 8 9 00:00:20,260 --> 00:00:22,240 And also, we are going to create our own tabs, okay. 9 10 00:00:22,240 --> 00:00:24,170 We are going to create two tabs. 10 11 00:00:24,170 --> 00:00:27,200 For tabs also, we need to create two list box. 11 12 00:00:27,200 --> 00:00:29,173 And or for our second tab also, 12 13 00:00:30,281 --> 00:00:33,050 we will create some labels, okay. 13 14 00:00:33,050 --> 00:00:35,680 And after that, we are going to finish our design. 14 15 00:00:35,680 --> 00:00:37,420 And what I need to do here, 15 16 00:00:37,420 --> 00:00:38,920 firstly I will come here, 16 17 00:00:38,920 --> 00:00:41,880 and this is actually let me do something here. 17 18 00:00:41,880 --> 00:00:43,410 This is tool bar. 18 19 00:00:43,410 --> 00:00:47,720 So I will say here, tool bar, okay. 19 20 00:00:47,720 --> 00:00:49,420 It's a separators. 20 21 00:00:49,420 --> 00:00:52,950 And this will make our code readable more, 21 22 00:00:52,950 --> 00:00:53,950 readable okay. 22 23 00:00:53,950 --> 00:00:58,020 And here, under list bar, I will say 23 24 00:01:00,750 --> 00:01:05,620 title and image, okay. 24 25 00:01:05,620 --> 00:01:07,413 And here, what I need to do? 25 26 00:01:10,500 --> 00:01:14,910 I will come here and say, image and title. 26 27 00:01:14,910 --> 00:01:18,950 First I will create the image_bar, okay, Frame, 27 28 00:01:18,950 --> 00:01:20,940 is equal to a Frame. 28 29 00:01:20,940 --> 00:01:24,810 And under Frame, master will be centerRightFrame, 29 30 00:01:24,810 --> 00:01:29,430 and width is equal to 440, 30 31 00:01:29,430 --> 00:01:32,573 height is equal to 350, okay. 31 32 00:01:33,900 --> 00:01:36,063 And let's use Geometry Manager, 32 33 00:01:36,940 --> 00:01:39,263 image_bar.pack. 33 34 00:01:42,260 --> 00:01:46,253 Here I will say fill BOTH, okay. 34 35 00:01:48,290 --> 00:01:49,300 That's fine. 35 36 00:01:49,300 --> 00:01:50,380 And after that, what I need to do, 36 37 00:01:50,380 --> 00:01:52,423 I need to create a title, right. 37 38 00:01:54,478 --> 00:01:56,230 Let's say self.titleright. 38 39 00:01:57,954 --> 00:01:59,450 It is on the right, that' why, 39 40 00:01:59,450 --> 00:02:02,610 I name it title_right, okay, 40 41 00:02:02,610 --> 00:02:04,453 is equal to Label, 41 42 00:02:05,290 --> 00:02:08,456 and here master image_bar, 42 43 00:02:08,456 --> 00:02:11,170 and our text is going to be 43 44 00:02:11,170 --> 00:02:16,170 welcome to our Library, something like that. 44 45 00:02:19,411 --> 00:02:20,920 For Library Management System, 45 46 00:02:20,920 --> 00:02:23,090 also we can say something like that. 46 47 00:02:23,090 --> 00:02:24,037 And here, what I need to do? 47 48 00:02:24,037 --> 00:02:26,610 I need to use font property font 48 49 00:02:27,450 --> 00:02:32,450 is equal to Arial, something big, bold and 16, okay. 49 50 00:02:35,420 --> 00:02:37,748 And after that, here what I will say 50 51 00:02:37,748 --> 00:02:42,748 self dot, self.title_right.grid. 51 52 00:02:46,084 --> 00:02:50,270 I will say simply row is equal to zero, okay. 52 53 00:02:50,270 --> 00:02:52,427 And after that, what I need to do? 53 54 00:02:52,427 --> 00:02:56,093 I need to create here my image right. 54 55 00:02:57,040 --> 00:02:59,930 And here I will say self.img_library, 55 56 00:03:05,975 --> 00:03:08,892 let's say img_library yes, library, 56 57 00:03:10,291 --> 00:03:12,874 is equal to PhotoImage library, 57 58 00:03:15,282 --> 00:03:19,699 and the file is equal to icons and library.png, okay. 58 59 00:03:24,030 --> 00:03:26,080 And after that, what I need to do here, 59 60 00:03:26,080 --> 00:03:28,527 I will say self dot, and I need to, 60 61 00:03:29,457 --> 00:03:31,800 if I want to locate my image, what I can use? 61 62 00:03:31,800 --> 00:03:34,710 So I can use a label right for my image. 62 63 00:03:34,710 --> 00:03:37,623 So I will say self.lblImg okay. 63 64 00:03:41,677 --> 00:03:46,677 LblImg is equal to Label and image_bar, 64 65 00:03:48,820 --> 00:03:51,580 and for image property, I will say 65 66 00:03:51,580 --> 00:03:55,897 image is equal to self.img_library okay. 66 67 00:03:59,920 --> 00:04:01,550 And last thing what I need to say? 67 68 00:04:01,550 --> 00:04:03,663 I need to say self.lblImg.grid, 68 69 00:04:08,630 --> 00:04:10,350 and for grid, I need to say 69 70 00:04:10,350 --> 00:04:12,676 row is equal to one 70 71 00:04:12,676 --> 00:04:16,140 because for row zero, we use for title. 71 72 00:04:16,140 --> 00:04:18,730 That one is with the row one. 72 73 00:04:18,730 --> 00:04:19,930 Let me run our application. 73 74 00:04:19,930 --> 00:04:22,880 It is see now here, for row zero, this text, 74 75 00:04:22,880 --> 00:04:25,110 and for row one, our image, okay. 75 76 00:04:25,110 --> 00:04:27,620 And what is next, what I want to do? 76 77 00:04:27,620 --> 00:04:30,670 I want to create our tabs here, okay. 77 78 00:04:30,670 --> 00:04:32,230 And let's do that. 78 79 00:04:32,230 --> 00:04:33,577 Here, add book. 79 80 00:04:35,390 --> 00:04:37,810 So under add book right tool bar, 80 81 00:04:37,810 --> 00:04:40,570 I will come here and say, Tabs okay. 81 82 00:04:44,805 --> 00:04:45,805 Here's tabs. 82 83 00:04:49,583 --> 00:04:52,083 And after that here I will say 83 84 00:04:53,848 --> 00:04:58,250 self.tabs is equal to, 84 85 00:04:58,250 --> 00:04:59,140 what I need to use? 85 86 00:04:59,140 --> 00:05:01,278 I need to use ttk.Notebook. 86 87 00:05:01,278 --> 00:05:02,990 All right, remember. 87 88 00:05:02,990 --> 00:05:07,100 And after that, here I will say centerLeftFrame right, 88 89 00:05:07,100 --> 00:05:08,900 because they're on the left side, 89 90 00:05:08,900 --> 00:05:10,660 on the left frame. 90 91 00:05:10,660 --> 00:05:14,637 And for width, I will say width is equal to 900, 91 92 00:05:16,930 --> 00:05:21,930 and height is going to be 660, okay. 92 93 00:05:22,400 --> 00:05:23,996 And after that, what I need to do? 93 94 00:05:23,996 --> 00:05:28,273 I need to say here self.tabs.pack, right. 94 95 00:05:29,300 --> 00:05:32,200 And I will not use any parameter for pack. 95 96 00:05:32,200 --> 00:05:33,557 And here, after that what I need to say? 96 97 00:05:33,557 --> 00:05:37,580 I need to create my, I need to create firstly icons 97 98 00:05:37,580 --> 00:05:38,413 for my text. 98 99 00:05:38,413 --> 00:05:40,943 So okay, and here I will say self.tab1_icon 99 100 00:05:45,540 --> 00:05:47,573 is equal to PhotoImage, 100 101 00:05:49,860 --> 00:05:53,980 and the file is equal to icons 101 102 00:05:53,980 --> 00:05:58,980 and books.png, okay. 102 103 00:05:59,890 --> 00:06:04,300 Control + D, and the other one we do tab2, right. 103 104 00:06:05,518 --> 00:06:10,351 And the icon for the image file will be members.png, okay. 104 105 00:06:13,683 --> 00:06:15,505 I will use these icons. 105 106 00:06:15,505 --> 00:06:16,984 And after that here, what I need to say? 106 107 00:06:16,984 --> 00:06:20,817 I need to say self.tab1 is equal to ttk.Frame. 107 108 00:06:24,884 --> 00:06:29,134 All right, I will use Frame for my tabs, self.tabs. 108 109 00:06:31,373 --> 00:06:33,419 And for tab2, Control + D, 109 110 00:06:33,419 --> 00:06:36,669 and I will say here tab2, okay, simply. 110 111 00:06:37,677 --> 00:06:38,968 So what I need to do now? 111 112 00:06:38,968 --> 00:06:42,635 I need to say here self.tabs.add, right. 112 113 00:06:45,449 --> 00:06:48,949 And here, I will say self.tab1, right. 113 114 00:06:52,251 --> 00:06:56,001 And for the text, I will say text is equal to 114 115 00:06:58,035 --> 00:07:00,118 Library Management, okay. 115 116 00:07:03,619 --> 00:07:06,786 Image is equal to self.tab1_icon here. 116 117 00:07:13,414 --> 00:07:15,929 And also compound will be left. 117 118 00:07:15,929 --> 00:07:18,846 So compound is equal to LEFT, okay. 118 119 00:07:21,349 --> 00:07:23,516 And for other one, we can, 119 120 00:07:26,117 --> 00:07:28,206 right here, Control + D. 120 121 00:07:28,206 --> 00:07:30,456 And the tabs.add self.tab2, 121 122 00:07:32,786 --> 00:07:34,703 and this one will be 122 123 00:07:36,153 --> 00:07:38,950 here our text will be statistics, right. 123 124 00:07:38,950 --> 00:07:41,533 So that is tis-tics, right. 124 125 00:07:44,271 --> 00:07:47,688 And tab2_icon and compound is LEFT right. 125 126 00:07:49,990 --> 00:07:51,890 And if I run my application now, 126 127 00:07:51,890 --> 00:07:53,313 let's see our tabs. 127 128 00:07:54,570 --> 00:07:56,290 See our first one is here, 128 129 00:07:56,290 --> 00:07:57,700 and second one is here, 129 130 00:07:57,700 --> 00:07:59,190 and they're working. 130 131 00:07:59,190 --> 00:08:00,600 So what I need to do now, 131 132 00:08:00,600 --> 00:08:05,600 I want to create here a list 2 list books actually, okay. 132 133 00:08:06,616 --> 00:08:08,951 First one is for book names, 133 134 00:08:08,951 --> 00:08:11,996 and other one for details, okay. 134 135 00:08:11,996 --> 00:08:15,913 And for this one, I will create some labels. 135 136 00:08:15,913 --> 00:08:18,080 And here, let's create it. 136 137 00:08:18,985 --> 00:08:22,152 And here, I will say list books, okay. 137 138 00:08:25,457 --> 00:08:27,374 And self.list say books 138 139 00:08:31,626 --> 00:08:34,728 is will be a Listbox, right. 139 140 00:08:34,728 --> 00:08:36,790 And here I will say self dot, 140 141 00:08:36,790 --> 00:08:40,123 the parent this time will be tab1, okay. 141 142 00:08:40,978 --> 00:08:43,424 And after that, here I will say width 142 143 00:08:43,424 --> 00:08:45,674 is equal to 40, and height, 143 144 00:08:50,408 --> 00:08:52,241 height is equal to 30, 144 145 00:08:56,119 --> 00:08:59,202 and border is going to be five, okay. 145 146 00:09:01,450 --> 00:09:03,095 And also I want to use font. 146 147 00:09:03,095 --> 00:09:06,762 Font is going to be times 12 and bold, okay. 147 148 00:09:12,782 --> 00:09:16,410 And this is my list box, it is already ready 148 149 00:09:16,410 --> 00:09:18,117 but what I need to do for this list box, 149 150 00:09:18,117 --> 00:09:20,610 I need to create a scroll bar, right. 150 151 00:09:20,610 --> 00:09:22,610 Self dot scroll bar, sb, 151 152 00:09:23,511 --> 00:09:27,111 is equal to Scrollbar constructor method 152 153 00:09:27,111 --> 00:09:29,361 self.tab1 is parent, right. 153 154 00:09:31,648 --> 00:09:34,815 And orient is equal to VERTICAL, okay. 154 155 00:09:37,478 --> 00:09:39,102 And after that, what I need to say? 155 156 00:09:39,102 --> 00:09:42,519 I need to say self.list_books, all right, 156 157 00:09:45,290 --> 00:09:48,457 dot grid, and row is going to be zero. 157 158 00:09:50,952 --> 00:09:53,202 Column is going to be zero, 158 159 00:09:54,683 --> 00:09:56,766 and I will use pad, padx. 159 160 00:09:58,404 --> 00:10:03,231 Only for one side okay, for left side 10 and zero, okay. 160 161 00:10:03,231 --> 00:10:07,814 And for pady, pady is equal to 10 for both sides, okay. 161 162 00:10:10,364 --> 00:10:13,691 And here I need to use sticky, okay. 162 163 00:10:13,691 --> 00:10:15,441 Sticky is equal to N. 163 164 00:10:19,302 --> 00:10:21,403 And after that, what I need to do now? 164 165 00:10:21,403 --> 00:10:24,236 Here for scroll bar, I need to say 165 166 00:10:27,771 --> 00:10:31,188 self.sb, my scroll bar right, dot config, 166 167 00:10:35,297 --> 00:10:37,307 command is config, 167 168 00:10:37,307 --> 00:10:39,553 and after config here, 168 169 00:10:39,553 --> 00:10:44,553 command is equal to self.list_books.yview, right. 169 170 00:10:50,100 --> 00:10:53,591 And how I can make connection between my widget 170 171 00:10:53,591 --> 00:10:54,424 and also scroll bar, remember it. 171 172 00:10:55,869 --> 00:10:58,753 Self.list_books.config 172 173 00:11:03,737 --> 00:11:08,737 yscrollbarcommand, okay, 173 174 00:11:10,040 --> 00:11:13,710 is equal to self dot my scroll bar, sb.set. 174 175 00:11:14,983 --> 00:11:18,006 Okay remember that but without parentheses. 175 176 00:11:18,006 --> 00:11:19,640 And after that, what I need to do now? 176 177 00:11:19,640 --> 00:11:21,500 Here, I need to say self.sb.grid. 177 178 00:11:24,628 --> 00:11:29,080 For grid, I will use row is equal to zero, 178 179 00:11:29,080 --> 00:11:31,293 column is equal to again zero. 179 180 00:11:31,293 --> 00:11:34,480 But for sticky, I need to say sticky 180 181 00:11:34,480 --> 00:11:39,263 is going to be north plus south plus east. 181 182 00:11:40,970 --> 00:11:44,950 And now, if I run my application, 182 183 00:11:44,950 --> 00:11:45,983 I hope this is fine. 183 184 00:11:47,317 --> 00:11:48,938 Something wrong, 184 185 00:11:48,938 --> 00:11:50,951 yscrollbarcommand. 185 186 00:11:50,951 --> 00:11:53,118 So where is it, some line? 186 187 00:11:54,771 --> 00:11:57,521 So here, yscroll, yscrollcommand. 187 188 00:12:01,592 --> 00:12:03,092 So yscrollcommand. 188 189 00:12:04,480 --> 00:12:07,627 And here, if I run again, boom, 189 190 00:12:07,627 --> 00:12:09,432 it's here, our scroll bar is here, 190 191 00:12:09,432 --> 00:12:13,118 and also our list box is also here. 191 192 00:12:13,118 --> 00:12:13,951 What I need to do? 192 193 00:12:13,951 --> 00:12:16,890 We need to create another list box here, okay. 193 194 00:12:16,890 --> 00:12:17,730 To do that here. 194 195 00:12:19,260 --> 00:12:21,760 List books right, and the other one 195 196 00:12:21,760 --> 00:12:26,280 is going to be the same, list details, okay. 196 197 00:12:26,280 --> 00:12:29,340 List details is going to be self.list_details 197 198 00:12:33,110 --> 00:12:37,000 is equal to, I will use another list box. 198 199 00:12:37,000 --> 00:12:41,530 Of course, Listbox and the self.tab1, okay. 199 200 00:12:44,413 --> 00:12:49,413 Other one is width is equal to 80. 200 201 00:12:51,100 --> 00:12:54,400 Height is going to be same, 30 201 202 00:12:54,400 --> 00:12:57,860 but border is again same, five. 202 203 00:12:57,860 --> 00:13:01,920 And for the font, same. 203 204 00:13:01,920 --> 00:13:03,123 It'll be Times, 204 205 00:13:05,410 --> 00:13:08,540 Times, ah this time, 205 206 00:13:08,540 --> 00:13:11,620 12 and bold, same actually. 206 207 00:13:11,620 --> 00:13:13,460 And after that, what I need to do? 207 208 00:13:13,460 --> 00:13:17,110 Now, I need to use Grid Geometry Manager right. 208 209 00:13:17,110 --> 00:13:19,243 Self.list_details.grid. 209 210 00:13:22,770 --> 00:13:27,533 And here row is zero, and the column is one, 210 211 00:13:29,200 --> 00:13:33,950 and also I want to use padx is equal to 10 211 212 00:13:35,380 --> 00:13:39,490 for left side only, and zero, okay for right side. 212 213 00:13:39,490 --> 00:13:44,490 Pady is going to be pady is equal to 10, 213 214 00:13:46,650 --> 00:13:51,650 and for sticky, I will say sticky is equal to N, okay. 214 215 00:13:52,450 --> 00:13:53,880 That's also fine. 215 216 00:13:53,880 --> 00:13:58,780 If I run my application, boom, everything is here. 216 217 00:13:58,780 --> 00:14:00,057 By the way, we don't need to use scroll bar 217 218 00:14:00,057 --> 00:14:03,740 for this guy because our details is not much, okay. 218 219 00:14:03,740 --> 00:14:06,460 This is for this, we have, it can have 219 220 00:14:06,460 --> 00:14:08,119 maybe thousands books. 220 221 00:14:08,119 --> 00:14:10,837 That's why we need to use here scroll bar for . 221 222 00:14:10,837 --> 00:14:12,960 For this guy, even if we, 222 223 00:14:12,960 --> 00:14:15,410 for example, if we have many details, doesn't matter. 223 224 00:14:15,410 --> 00:14:19,922 This one is enough, okay, this list box. 224 225 00:14:19,922 --> 00:14:21,740 And that' why I'm not going to create 225 226 00:14:21,740 --> 00:14:24,290 another scroll bar for this guy, okay. 226 227 00:14:24,290 --> 00:14:26,100 So what I need to do, and after that, 227 228 00:14:26,100 --> 00:14:28,200 we are going to finish our design here. 228 229 00:14:29,250 --> 00:14:31,340 Remember, from original application, 229 230 00:14:31,340 --> 00:14:33,100 we need to create here how many books we have, 230 231 00:14:33,100 --> 00:14:35,500 how many books taken, and how many members we have, right. 231 232 00:14:35,500 --> 00:14:38,830 Only labels we are going to create for now, okay. 232 233 00:14:38,830 --> 00:14:41,283 And let's go to do that here. 233 234 00:14:43,090 --> 00:14:45,120 And say, this is right away, 234 235 00:14:45,120 --> 00:14:46,673 we can say tabs, tab1. 235 236 00:14:47,650 --> 00:14:49,410 This one is tab1. 236 237 00:14:49,410 --> 00:14:54,223 So it's like tab1, okay. 237 238 00:14:55,220 --> 00:14:58,080 And here, this one is tab1. 238 239 00:14:59,090 --> 00:15:00,840 And that one is going to be 239 240 00:15:04,668 --> 00:15:06,012 tab2, okay. 240 241 00:15:06,012 --> 00:15:10,980 Tab2, and yeah, it is fine now. 241 242 00:15:10,980 --> 00:15:12,160 So what I will say? 242 243 00:15:12,160 --> 00:15:13,830 I will say statistics. 243 244 00:15:16,730 --> 00:15:19,220 Okay, statistics and the first one, 244 245 00:15:19,220 --> 00:15:22,493 I will say self.lbl_book_count, okay, 245 246 00:15:30,120 --> 00:15:34,850 is equal to Label and self dot this time, 246 247 00:15:34,850 --> 00:15:37,260 I will use, of course, tab2, okay. 247 248 00:15:37,260 --> 00:15:39,950 This is, just for tab2. 248 249 00:15:39,950 --> 00:15:42,810 And text is going to be null. 249 250 00:15:42,810 --> 00:15:47,780 Okay, because I will fill it with the values for, 250 251 00:15:47,780 --> 00:15:49,400 from my database, okay. 251 252 00:15:49,400 --> 00:15:50,260 That's why don't forget that. 252 253 00:15:50,260 --> 00:15:53,890 Now, we can leave it, we can leave them empty. 253 254 00:15:53,890 --> 00:15:57,150 And for count , because we don't know 254 255 00:15:57,150 --> 00:15:59,150 how many books we have in our database, 255 256 00:15:59,150 --> 00:16:00,870 that we don't have any value actually. 256 257 00:16:00,870 --> 00:16:02,470 It's totally empty. 257 258 00:16:02,470 --> 00:16:04,660 And the pady is 20. 258 259 00:16:04,660 --> 00:16:09,660 And for the font, I will say this time, 259 260 00:16:10,620 --> 00:16:13,893 Verdana, 14 and bold, okay. 260 261 00:16:16,730 --> 00:16:18,217 And after that, what I need to do? 261 262 00:16:18,217 --> 00:16:21,390 I need to use of course, self.lbl_book_count.grid. 262 263 00:16:27,027 --> 00:16:30,700 For grid, I will say row zero, 263 264 00:16:30,700 --> 00:16:34,460 and lbl, self.lbl_member_count, 264 265 00:16:38,390 --> 00:16:40,439 how many member we have. 265 266 00:16:40,439 --> 00:16:45,439 Count is equal to very similar actually. 266 267 00:16:45,730 --> 00:16:47,193 So let's copy this guy. 267 268 00:16:51,680 --> 00:16:53,180 And here, what we need to say, 268 269 00:16:53,180 --> 00:16:56,290 self.tab, sorry this was tab2 by the way. 269 270 00:16:58,830 --> 00:17:02,220 So this one is again tab2, right. 270 271 00:17:02,220 --> 00:17:06,396 Pad and 20, Verdana and bold. 271 272 00:17:06,396 --> 00:17:09,170 Pady also, member_count. 272 273 00:17:09,170 --> 00:17:10,343 Here, I didn't. 273 274 00:17:11,480 --> 00:17:15,270 Also I think this here pady here. 274 275 00:17:15,270 --> 00:17:20,270 Okay, I will say pady is equal to 20, 275 276 00:17:21,180 --> 00:17:23,033 and copy this guy. 276 277 00:17:23,870 --> 00:17:25,113 Okay, paste it here too. 277 278 00:17:26,890 --> 00:17:28,620 And after that, what I need to do? 278 279 00:17:28,620 --> 00:17:31,648 I need to use Grid Geometry Manager for this guy. 279 280 00:17:31,648 --> 00:17:33,898 Self.lbl_member_count.grid. 280 281 00:17:42,870 --> 00:17:46,200 And the row is equal to one, 281 282 00:17:46,200 --> 00:17:50,510 and sticky is equal to west, okay. 282 283 00:17:51,405 --> 00:17:54,210 And the last one, and after that we are going, 283 284 00:17:54,210 --> 00:17:58,060 we are going to finish our design. 284 285 00:17:58,060 --> 00:17:59,603 And be patient. 285 286 00:18:00,550 --> 00:18:03,660 Self.lbl, I know that sometimes, it's real boring 286 287 00:18:03,660 --> 00:18:05,373 this kind of things but this is, 287 288 00:18:06,440 --> 00:18:07,910 we have to do that, guys. 288 289 00:18:07,910 --> 00:18:08,743 What can I do? 289 290 00:18:08,743 --> 00:18:12,100 We need to create, we have to create our own design. 290 291 00:18:12,100 --> 00:18:16,960 It's not like, if you are a PHP developer, 291 292 00:18:16,960 --> 00:18:18,980 CSS developer, they are different okay. 292 293 00:18:18,980 --> 00:18:21,440 They give you the CSS, all the design, 293 294 00:18:21,440 --> 00:18:24,270 and you only type your PHP codes. 294 295 00:18:24,270 --> 00:18:27,160 But here, for this kind of applications, 295 296 00:18:27,160 --> 00:18:28,123 you don't have this chance, right. 296 297 00:18:28,123 --> 00:18:32,120 We need to type our, we need to create our own design. 297 298 00:18:32,120 --> 00:18:33,870 I'm so sorry about it. 298 299 00:18:33,870 --> 00:18:36,920 So the other one is, as I said, 299 300 00:18:36,920 --> 00:18:40,303 is lbl_taken_count is again is label self 300 301 00:18:44,020 --> 00:18:45,960 and very, very similar. 301 302 00:18:45,960 --> 00:18:48,670 Even not similar, it's same. 302 303 00:18:48,670 --> 00:18:51,323 It is copy this guy and paste it here. 303 304 00:18:52,310 --> 00:18:54,926 And here, pady, why is it like that? 304 305 00:18:54,926 --> 00:18:56,124 Let me check it. 305 306 00:18:56,124 --> 00:18:59,031 So what's wrong here? 306 307 00:18:59,031 --> 00:18:59,864 Here. 307 308 00:19:04,605 --> 00:19:05,438 Pady. 308 309 00:19:07,903 --> 00:19:09,820 Oh, we remove this guy. 309 310 00:19:11,510 --> 00:19:13,510 Here and here, and here. 310 311 00:19:16,440 --> 00:19:19,032 Something wrong, that's why I didn't understand. 311 312 00:19:19,032 --> 00:19:20,920 I need to have it here. 312 313 00:19:20,920 --> 00:19:22,623 Pady is equal to 20, 313 314 00:19:23,520 --> 00:19:24,773 and now comma. 314 315 00:19:27,690 --> 00:19:30,340 So what's wrong here that I didn't understand? 315 316 00:19:30,340 --> 00:19:32,140 Label is fine. 316 317 00:19:32,140 --> 00:19:35,660 Pady is fine, what's wrong about pady? 317 318 00:19:36,710 --> 00:19:38,893 Oh, it says remove argument, pady. 318 319 00:19:41,007 --> 00:19:42,253 And it's fine. 319 320 00:19:43,748 --> 00:19:46,033 Keyword argument repeated. 320 321 00:19:47,790 --> 00:19:50,440 Oh sorry, it's here also we have it. 321 322 00:19:50,440 --> 00:19:51,598 I'm so sorry. 322 323 00:19:51,598 --> 00:19:53,280 already is here 323 324 00:19:53,280 --> 00:19:54,760 Pady we have it. 324 325 00:19:54,760 --> 00:19:56,590 Okay, so it's fine. 325 326 00:19:56,590 --> 00:19:57,687 So what I need to do? 326 327 00:19:57,687 --> 00:20:00,900 I need to use Grid Geometry Manager for the last guy. 327 328 00:20:00,900 --> 00:20:04,840 And after that, I'm going to finish our design. 328 329 00:20:04,840 --> 00:20:06,513 Lbl taken oops. 329 330 00:20:10,828 --> 00:20:12,578 Lbl_taken_count.grid. 330 331 00:20:17,970 --> 00:20:21,260 And row is going to be two, 331 332 00:20:21,260 --> 00:20:26,260 and sticky is this time, again west, okay. 332 333 00:20:29,721 --> 00:20:31,030 Let me run our application, 333 334 00:20:31,030 --> 00:20:34,070 and now, as you see now, it's here. 334 335 00:20:34,070 --> 00:20:36,400 Let me click statistics now. 335 336 00:20:36,400 --> 00:20:37,497 As you see now, it's here. 336 337 00:20:37,497 --> 00:20:38,730 But we don't see anything. 337 338 00:20:38,730 --> 00:20:39,880 Why is it like that? 338 339 00:20:39,880 --> 00:20:42,830 Because remember here that we said, 339 340 00:20:42,830 --> 00:20:46,100 we said text value is null, okay. 340 341 00:20:46,100 --> 00:20:48,943 If I type something like that and run it again, 341 342 00:20:50,850 --> 00:20:53,610 statistics as you see now, our text is here. 342 343 00:20:53,610 --> 00:20:56,010 Even we can keep, it's like that, okay. 343 344 00:20:56,010 --> 00:20:59,332 And for this one, let's say something, 344 345 00:20:59,332 --> 00:21:01,130 something like that is okay. 345 346 00:21:01,130 --> 00:21:03,810 And we finished our design. 346 347 00:21:03,810 --> 00:21:05,450 This is good news. 347 348 00:21:05,450 --> 00:21:06,540 And for now, that's all. 348 349 00:21:06,540 --> 00:21:07,743 See you in the next.