1 00:00:00,690 --> 00:00:02,970 Hello and welcome to this lecture. 2 00:00:02,970 --> 00:00:07,170 This is a path for or build your first web app. 3 00:00:07,170 --> 00:00:20,450 In this lecture we are going to write C sharp code that will determine the behavior of the page. 4 00:00:20,550 --> 00:00:21,500 All right. 5 00:00:21,510 --> 00:00:24,660 Back to visual studio. 6 00:00:24,660 --> 00:00:27,960 We are going to double click on that. 7 00:00:28,140 --> 00:00:35,820 Click Me Please button which is just double click on that and what that will do. 8 00:00:35,840 --> 00:00:41,760 Notice it has generated some C sharp code. 9 00:00:42,150 --> 00:00:50,920 It has also launched the new tab called Identity dot A S P X dot c Yes. 10 00:00:51,480 --> 00:00:51,830 All right. 11 00:00:51,830 --> 00:00:55,690 So notice we've got some C sharp code here. 12 00:00:55,770 --> 00:01:08,360 And notice on line 19 we've got a cursor flashing and just above it we are caught curly braces. 13 00:01:08,510 --> 00:01:16,200 You got the curly the opening curly braces and this close in curly braces and above it above the curly 14 00:01:16,200 --> 00:01:17,100 braces. 15 00:01:17,100 --> 00:01:23,920 We've got a block of code called O K button on the score. 16 00:01:23,940 --> 00:01:25,580 Click this. 17 00:01:25,610 --> 00:01:31,400 This is a this code here OK button on the clock on score click. 18 00:01:31,470 --> 00:01:40,760 So what ever could we write in here will determine the behavior of this button. 19 00:01:40,760 --> 00:01:43,190 So I'm gonna write a bunch of code. 20 00:01:43,230 --> 00:01:48,800 I want you to write exactly the way I've written it. 21 00:01:48,870 --> 00:01:52,920 Don't worry too much about understanding it at the moment. 22 00:01:52,920 --> 00:01:56,870 Just try and follow along as much as possible. 23 00:01:56,880 --> 00:01:57,450 All right. 24 00:01:57,480 --> 00:02:07,930 So the first thing we're going to do going to type in the word string K note is this is called Intel 25 00:02:07,920 --> 00:02:08,350 I think. 26 00:02:08,350 --> 00:02:14,410 So it determines that you're trying to write something and gives the and gives you some clues as to 27 00:02:14,410 --> 00:02:16,480 what it is you're trying to write. 28 00:02:16,480 --> 00:02:23,230 So I'm trying to write strengths I just double click on the word string there to be string space 29 00:02:25,870 --> 00:02:28,240 first name. 30 00:02:28,690 --> 00:02:30,490 Notice I'm using Campbell case 31 00:02:37,080 --> 00:02:40,130 please note the string here should be a lot. 32 00:02:40,140 --> 00:02:42,820 The s should be a lower case. 33 00:02:42,890 --> 00:02:48,380 OK we tells you that the string basically it's a text. 34 00:02:48,390 --> 00:02:52,500 If you're trying to write a collection of text it's known as a string. 35 00:02:52,500 --> 00:03:00,570 Okay so you can see the tooltip says that represents text as a series of Unicode characters. 36 00:03:00,570 --> 00:03:10,470 So this is a string and I'm gonna give it first name and I'm going to apply an operator and give it 37 00:03:10,470 --> 00:03:13,360 to equals to sign on I wonder. 38 00:03:13,360 --> 00:03:14,630 Two equals two. 39 00:03:14,670 --> 00:03:18,710 First name first 40 00:03:23,450 --> 00:03:24,110 name 41 00:03:27,150 --> 00:03:30,420 dot text. 42 00:03:31,050 --> 00:03:39,210 So this will this here this first name here will be referenced in the text box the first name text box 43 00:03:39,370 --> 00:03:41,480 and it is a text sensor. 44 00:03:41,490 --> 00:03:46,830 Put it first name dot text. 45 00:03:47,000 --> 00:03:48,190 Okay. 46 00:03:48,930 --> 00:03:55,650 Whenever you go squiggly lines underneath that means visual studio is not happy about something. 47 00:03:55,650 --> 00:04:04,230 So at the end of each line of code you need to put a semicolon to show that you have completed that 48 00:04:04,230 --> 00:04:13,440 line of code when if you see squiggly red squiggly lines it means that visual studio is not happy about 49 00:04:13,440 --> 00:04:14,010 something. 50 00:04:14,010 --> 00:04:16,260 I think I know what the problem is. 51 00:04:16,260 --> 00:04:25,590 Notice the string here when we did when we designed this list but when we designed the text box we the 52 00:04:25,590 --> 00:04:32,310 text was called first name the actual name all source code first name so it looks like there may be 53 00:04:32,310 --> 00:04:33,720 some conflict here. 54 00:04:33,750 --> 00:04:40,660 So what we're going to do we gonna go back to the designer and re modify the name of the text box. 55 00:04:40,650 --> 00:04:47,760 So go back to the design and click on view and go designer and click on the first name text box. 56 00:04:47,930 --> 00:04:50,890 You're gonna go right down to the properties. 57 00:04:50,910 --> 00:04:57,600 I've already done that I've added the name added box to it to modify that I'm gonna do the same here 58 00:04:58,230 --> 00:05:09,880 with the last name com right here and just gonna add box so there is no conflict all right. 59 00:05:09,910 --> 00:05:15,060 So if I now go back to my code by double click on this here. 60 00:05:15,150 --> 00:05:22,700 You notice if I had a box here then the red squiggly lines should disappear. 61 00:05:22,720 --> 00:05:28,630 If I do the same here with the last name. 62 00:05:28,630 --> 00:05:35,260 Notice the red squiggly lines has disappeared so it didn't like the fact that my string was called first 63 00:05:35,260 --> 00:05:38,990 name and the value was also called first name. 64 00:05:39,030 --> 00:05:42,620 All right so I've made that you notice the red lines have disappeared. 65 00:05:42,790 --> 00:05:49,210 When you've got the yellow strip here I just know that is a guide to let you know that you have not 66 00:05:49,420 --> 00:05:58,630 saved your code okay let's continue with the code so I'm gonna go for another line here. 67 00:05:58,650 --> 00:06:02,460 Just press and tell your keyboard a couple of times. 68 00:06:02,460 --> 00:06:08,080 So on line 22 I'm gonna add on another string here. 69 00:06:08,100 --> 00:06:09,760 Notice the intel says this. 70 00:06:09,790 --> 00:06:14,650 So this little menu here is called Intel is ranked Intel is sense. 71 00:06:14,940 --> 00:06:16,920 So I'm gonna add another string. 72 00:06:16,980 --> 00:06:20,210 And this time it will be the result string. 73 00:06:20,220 --> 00:06:21,900 So be all type result 74 00:06:24,510 --> 00:06:30,890 the name of this string will be called result and the value we be equals to. 75 00:06:32,760 --> 00:06:33,950 Hello. 76 00:06:36,330 --> 00:06:38,490 All right. 77 00:06:38,740 --> 00:06:44,880 And then I'm gonna add another text and to add I'm gonna use a plus operator 78 00:06:47,940 --> 00:06:51,370 first name note is Intel I senses giving me a clue again. 79 00:06:51,510 --> 00:06:55,940 It noticed I have already use some of these is asking me if I want to use them McCain. 80 00:06:55,950 --> 00:06:57,250 Click on yes. 81 00:06:57,370 --> 00:06:59,320 So I'm gonna do Hello. 82 00:06:59,370 --> 00:07:01,080 Plus first name 83 00:07:04,230 --> 00:07:05,630 space. 84 00:07:06,090 --> 00:07:06,840 Plus 85 00:07:11,190 --> 00:07:14,330 double quotes can give a big space. 86 00:07:14,340 --> 00:07:19,980 This really is to create a space between the first name and the last name. 87 00:07:20,130 --> 00:07:21,240 All right. 88 00:07:21,330 --> 00:07:22,150 Will go higher. 89 00:07:22,180 --> 00:07:27,210 The game to add the last name to a space and their last name. 90 00:07:27,210 --> 00:07:30,050 Notice the intelligence again has come in handy. 91 00:07:30,120 --> 00:07:35,730 Tell science is so useful it makes you write your code much faster. 92 00:07:35,730 --> 00:07:37,260 Notice the rest quickly line. 93 00:07:37,290 --> 00:07:39,340 It's telling me that hey what's going on. 94 00:07:39,360 --> 00:07:40,440 You haven't finished. 95 00:07:40,710 --> 00:07:43,040 So I need to put a semicolon there. 96 00:07:43,050 --> 00:07:45,000 Notice this has now disappeared. 97 00:07:45,000 --> 00:07:47,550 So what should happen in the text box. 98 00:07:47,550 --> 00:07:55,620 If you input your name your first name a last name and click on the button it should say hello. 99 00:07:55,620 --> 00:07:58,020 Your first name and your last name. 100 00:07:58,020 --> 00:07:59,150 Your name is Joe Blog. 101 00:07:59,160 --> 00:08:02,330 It should say hello Joe Bloggs. 102 00:08:02,340 --> 00:08:03,770 That's what that is. 103 00:08:03,810 --> 00:08:07,460 So we've got our code here. 104 00:08:07,500 --> 00:08:20,610 Set up the final thing we need to do is to is to actually call the result the actual box the result 105 00:08:20,610 --> 00:08:21,330 box. 106 00:08:21,330 --> 00:08:27,990 So we need to define the result box so type result. 107 00:08:28,490 --> 00:08:29,060 The result. 108 00:08:29,070 --> 00:08:30,090 Label sorry. 109 00:08:30,090 --> 00:08:32,600 Notice we created a results label. 110 00:08:32,850 --> 00:08:34,050 So this would be the result. 111 00:08:34,050 --> 00:08:46,550 Label dot text will click on the text that's what we want and we're going to give it a value and the 112 00:08:46,550 --> 00:08:50,720 value will equals to the string here. 113 00:08:50,780 --> 00:08:53,900 Code result the string we've created on line 22. 114 00:08:54,880 --> 00:08:57,950 Okay. 115 00:08:58,430 --> 00:09:02,180 She will lower case. 116 00:09:02,840 --> 00:09:05,330 All right. 117 00:09:05,330 --> 00:09:12,710 So that notice there are no red squiggly lines which is a good sign that everything is okay with your 118 00:09:12,710 --> 00:09:14,860 code where you get as quick a line. 119 00:09:14,900 --> 00:09:16,560 You should be worried. 120 00:09:16,580 --> 00:09:22,220 Notice this yellow strip here is kind of my warning you that hey you have not saved your code so let's 121 00:09:22,220 --> 00:09:25,150 save our code by clicking on this. 122 00:09:25,180 --> 00:09:27,550 Is this this scared. 123 00:09:27,560 --> 00:09:28,280 Just click on it. 124 00:09:28,280 --> 00:09:34,520 It says Save or and that should turn green which means we have now saved our code. 125 00:09:34,520 --> 00:09:37,650 Another way you can save your code you can do file. 126 00:09:38,090 --> 00:09:39,110 I can do save all. 127 00:09:39,110 --> 00:09:43,830 So it's the same option as what we've just done now that we've got our code save. 128 00:09:43,910 --> 00:09:49,340 We can test how our web page application or the web app we've created. 129 00:09:49,370 --> 00:09:50,260 We can test it. 130 00:09:50,870 --> 00:09:55,070 So by clicking on this button here that says Google Chrome. 131 00:09:55,280 --> 00:09:59,780 If this is suing Google Chrome because Google Chrome is my default web browser. 132 00:09:59,870 --> 00:10:06,860 So if your default web browser Internet Explorer it will show Internet Explorer or whatever your default 133 00:10:07,130 --> 00:10:08,490 web browser is. 134 00:10:08,510 --> 00:10:17,940 So if I click on this it should run the code so click it to display it will launch hopefully soon. 135 00:10:20,060 --> 00:10:20,630 Excellent. 136 00:10:20,630 --> 00:10:23,240 So this is the web app we have created. 137 00:10:23,240 --> 00:10:25,640 So once you click on that this is what comes up. 138 00:10:25,670 --> 00:10:36,890 So let's type a name is a file type name in the file type name is Eric and and typing Williams 139 00:10:40,280 --> 00:10:41,120 and click. 140 00:10:41,120 --> 00:10:43,220 This tells me. 141 00:10:43,220 --> 00:10:43,940 Hello. 142 00:10:44,030 --> 00:10:47,350 Rick Williams. 143 00:10:47,570 --> 00:10:48,020 All right. 144 00:10:48,020 --> 00:10:54,010 So if you notice there is no space between the halo and the Rick and the first name. 145 00:10:54,200 --> 00:10:58,620 But there is a space between the first name and the last name. 146 00:10:58,640 --> 00:11:02,360 Let's try and fix that Sophia open back our code here. 147 00:11:02,480 --> 00:11:03,800 So this is the code here. 148 00:11:03,800 --> 00:11:09,500 So if you notice this here creates a space between the first name and the last name. 149 00:11:09,500 --> 00:11:14,180 So where's gotten this second quotes here. 150 00:11:14,180 --> 00:11:18,150 We're just going to create some space there. 151 00:11:18,500 --> 00:11:22,610 You can actually make changes while your code is running. 152 00:11:22,610 --> 00:11:24,390 So that's why you got that message. 153 00:11:24,400 --> 00:11:31,130 You need to terminate your code before the you can make changes to the. 154 00:11:32,240 --> 00:11:37,620 So to terminate your code from running you just click on this top button here that says stop debugging. 155 00:11:37,700 --> 00:11:41,580 So you have to stop it before you can make any changes to your code. 156 00:11:41,810 --> 00:11:42,950 So that has stop now. 157 00:11:42,950 --> 00:11:47,810 So on to where it's got the halo there on line 22 I just create a bit of a space. 158 00:11:47,810 --> 00:11:52,670 Notice the yellow strips come up showing that I have not saved an item. 159 00:11:52,670 --> 00:12:01,820 So I click on Save and I will run the app in games by clicking on this Google Chrome thing. 160 00:12:04,340 --> 00:12:05,510 So you can see the difference. 161 00:12:05,510 --> 00:12:07,670 Now I put my first name last name. 162 00:12:07,670 --> 00:12:13,520 You can see this that there's now a space between the halo and the first name and then the last name. 163 00:12:13,840 --> 00:12:14,280 Okay. 164 00:12:14,300 --> 00:12:18,900 So we achieved that by just creating this space in there. 165 00:12:18,980 --> 00:12:22,930 So that is set when your code is running. 166 00:12:23,210 --> 00:12:29,680 You get some diagnostics to zero that also runs which gives you an idea of the memory. 167 00:12:29,680 --> 00:12:33,040 Your application is using. 168 00:12:33,230 --> 00:12:34,100 All right. 169 00:12:34,100 --> 00:12:35,780 So what I'm going to do. 170 00:12:35,810 --> 00:12:41,690 I'm just going to terminate the code stop it by clicking or stop the program and that will stop it from 171 00:12:41,690 --> 00:12:42,620 running. 172 00:12:42,650 --> 00:12:43,100 All right. 173 00:12:43,100 --> 00:12:47,840 So we have successfully created our first web app. 174 00:12:47,870 --> 00:12:48,730 Well done. 175 00:12:48,800 --> 00:12:54,130 If you've got any issues or if you had any errors along the way please feel free to let me know. 176 00:12:54,150 --> 00:12:55,060 I apologize. 177 00:12:55,060 --> 00:12:59,330 This lecture is taking twice as long as I expected. 178 00:12:59,330 --> 00:13:00,350 Thanks for watching. 179 00:13:00,350 --> 00:13:00,980 Bye for now.