1
00:00:00,510 --> 00:00:04,590
Hey guys, welcome to day 54 of 100 days of Code.

2
00:00:05,010 --> 00:00:10,010
And today we're going to be moving on to a new topic and that is going to be web

3
00:00:10,200 --> 00:00:11,033
development.

4
00:00:11,220 --> 00:00:13,920
And we're going to be working on this for the next few days as well.

5
00:00:14,520 --> 00:00:16,320
Now there's quite a lot to cover today.

6
00:00:16,350 --> 00:00:20,670
We're going to be talking about the command line, Python decorators,

7
00:00:20,970 --> 00:00:23,730
as well as web development using Flask,

8
00:00:23,850 --> 00:00:28,170
one of the most popular frameworks for creating websites using Python.

9
00:00:29,460 --> 00:00:32,490
Now, before we get started though, you might be thinking, well,

10
00:00:32,549 --> 00:00:34,020
I already know how to make websites.

11
00:00:34,110 --> 00:00:38,250
I learned about HTML and CSS on days 41 through to 44.

12
00:00:38,250 --> 00:00:40,590
So I really know how to make websites.

13
00:00:40,860 --> 00:00:44,520
So what exactly is it that you're teaching me now? Well,

14
00:00:44,550 --> 00:00:45,720
if you think of a website,

15
00:00:45,930 --> 00:00:49,950
a simple website just contains HTML and CSS.

16
00:00:50,310 --> 00:00:53,310
Now that is also what we call the front-end.

17
00:00:53,610 --> 00:00:58,380
This is the beautiful mermaid that the user gets to see. Now for the website to

18
00:00:58,380 --> 00:01:02,760
actually have some functionality, for example, if you're building a web app

19
00:01:02,790 --> 00:01:05,489
instead of just a simple display website,

20
00:01:05,910 --> 00:01:08,070
then it's also got to have a backend.

21
00:01:08,550 --> 00:01:12,300
And the backend is the part that we're going to be learning how to build right

22
00:01:12,300 --> 00:01:13,133
now.

23
00:01:13,620 --> 00:01:17,760
So if the front end is just the part that displays information to the user,

24
00:01:18,060 --> 00:01:21,210
the backend is the part that does a lot of the business logic,

25
00:01:21,240 --> 00:01:22,560
a lot of the calculations,

26
00:01:22,890 --> 00:01:26,670
and a lot of the things that we've been doing with Python. Now,

27
00:01:26,670 --> 00:01:29,370
when people talk about full stack web development

28
00:01:29,430 --> 00:01:31,230
which is a term that you would've heard of

29
00:01:31,260 --> 00:01:35,700
if you were searching for web development jobs. Now full stack basically just

30
00:01:35,700 --> 00:01:37,830
means frontend and backend.

31
00:01:37,890 --> 00:01:42,540
So somebody who can deal with both frontend and backend technologies. Now,

32
00:01:42,540 --> 00:01:46,890
usually there's quite a few languages that are used for the front and the back

33
00:01:46,890 --> 00:01:49,620
end. So the front it's usually HTML,

34
00:01:49,620 --> 00:01:53,460
CSS and JavaScript. HTML gives the website structure,

35
00:01:53,490 --> 00:01:58,410
CSS gives it style and JavaScript allows it to have some sort of interactivity.

36
00:01:59,070 --> 00:02:02,880
Now the backend can also be created by a bunch of different languages,

37
00:02:03,240 --> 00:02:08,190
and here is more of a choice. Um, you could choose between JavaScript, Java,

38
00:02:08,220 --> 00:02:09,479
Python, Ruby,

39
00:02:09,660 --> 00:02:13,110
there's whole bunch of different languages. To make it even more

40
00:02:13,110 --> 00:02:15,930
complicated, in addition to languages,

41
00:02:16,140 --> 00:02:19,560
there's also different frameworks that you could use for the front and back end.

42
00:02:19,980 --> 00:02:21,930
So some popular frameworks you might have heard of

43
00:02:21,930 --> 00:02:26,930
are things like Angular and Rreact from the front end and Node and Flask or Django

44
00:02:27,240 --> 00:02:28,073
for the backend.

45
00:02:29,430 --> 00:02:34,290
So these frameworks are basically tools that really come with a lot of code

46
00:02:34,350 --> 00:02:38,700
prebuilt for a lot of the common functionalities that you find when building

47
00:02:38,700 --> 00:02:39,900
the front and back end.

48
00:02:40,290 --> 00:02:44,610
So that way, we don't always have to reinvent the wheel and we can simply just

49
00:02:44,700 --> 00:02:49,200
use the wheel and build a bicycle or build a car or built a scooter and whatever

50
00:02:49,200 --> 00:02:52,170
it is that we want. Now,

51
00:02:52,170 --> 00:02:54,270
when we're considering Python backend,

52
00:02:54,330 --> 00:02:58,350
there's a whole myriad of different frameworks that you could choose from.

53
00:02:58,650 --> 00:03:02,410
For example, Flask, Django, Bottle, Cherry pie, pyramid,

54
00:03:02,770 --> 00:03:07,120
and a whole bunch more. But the most popular ones, if you look at job search

55
00:03:07,150 --> 00:03:07,720
anyways,

56
00:03:07,720 --> 00:03:12,720
is Flask and Django where Flask is better suited to beginners and also small

57
00:03:14,800 --> 00:03:19,800
projects and Django suited much more to larger commercial projects. In order to

58
00:03:20,830 --> 00:03:25,030
build out a website which has a front end and a backend,

59
00:03:25,330 --> 00:03:28,330
we have to kind of understand what exactly is the backend.

60
00:03:29,380 --> 00:03:32,800
There's three components that you really need to understand when it comes to the

61
00:03:32,800 --> 00:03:35,770
backend. And that is the client,

62
00:03:36,220 --> 00:03:38,440
the server and the database.

63
00:03:39,100 --> 00:03:43,390
These three components together will determine how your backend will work.

64
00:03:44,020 --> 00:03:45,280
Now, firstly, the client,

65
00:03:45,280 --> 00:03:49,630
you can sort of imagine just as a user going onto a browser,

66
00:03:49,930 --> 00:03:53,110
this is the client's side. This is the part that faces the user.

67
00:03:53,890 --> 00:03:55,570
And then there's the server.

68
00:03:55,930 --> 00:04:00,040
So you can think of the server as basically just a powerful computer

69
00:04:00,310 --> 00:04:03,430
that's hooked up to the internet and it's on 24/7

70
00:04:03,790 --> 00:04:07,780
always ready to receive requests over the internet. Finally,

71
00:04:07,780 --> 00:04:08,950
you've got the database

72
00:04:09,100 --> 00:04:12,670
which is kind of like a souped up spreadsheet where you are storing all the

73
00:04:12,670 --> 00:04:15,130
information related to your website.

74
00:04:15,730 --> 00:04:19,300
So let's say the client wanted to go to google.com. Well,

75
00:04:19,300 --> 00:04:22,480
when they type that into the URL bar and they hit enter,

76
00:04:22,750 --> 00:04:26,080
that gets sent to the server as a request,

77
00:04:26,620 --> 00:04:30,490
and this goes across the internet to this other computer.

78
00:04:30,940 --> 00:04:35,940
And this server has to respond. And it responds by sending over the HTML, CSS and

79
00:04:38,410 --> 00:04:42,220
JavaScript files that it has for that particular website.

80
00:04:42,640 --> 00:04:45,340
And once that gets sent back to the browser,

81
00:04:45,430 --> 00:04:50,380
then that can be rendered by the browser as the actual webpage. Now,

82
00:04:50,410 --> 00:04:54,430
if you're a website that has a lot of use of data or different types of data

83
00:04:54,430 --> 00:04:59,140
that could be requested by a user, then usually you'll have a database.

84
00:04:59,470 --> 00:05:02,020
So when the client requests, for example,

85
00:05:02,020 --> 00:05:05,320
to see all the tickets they have on Eventbrite, well,

86
00:05:05,320 --> 00:05:09,100
the page that they're viewing, that is the front end. That is the client side.

87
00:05:09,550 --> 00:05:12,610
But in order to render all the tickets they have,

88
00:05:12,910 --> 00:05:17,890
the client makes the request to the server and the server fetches the data from

89
00:05:17,890 --> 00:05:21,310
the database. Once it gets the data back from the database,

90
00:05:21,550 --> 00:05:25,450
it puts the data into the HTML, CSS and JavaScript files,

91
00:05:25,780 --> 00:05:30,780
and it sends the whole bundle back to the browser to be viewed by the user.

92
00:05:31,930 --> 00:05:36,160
If this whole process seems a little bit convoluted and complex, don't worry.

93
00:05:36,400 --> 00:05:40,270
We're going to be diving deep into creating our server, creating our database,

94
00:05:40,570 --> 00:05:44,170
and we're going to be creating all of these parts from scratch step-by-step

95
00:05:44,200 --> 00:05:47,620
ourselves. So at the end of the web-dev section,

96
00:05:47,860 --> 00:05:50,080
you'll find that if you come back to this video,

97
00:05:50,170 --> 00:05:52,120
everything's going to make a lot more sense.

98
00:05:53,140 --> 00:05:57,100
Now in order for you to have a good overview of what the whole system looks

99
00:05:57,110 --> 00:06:00,530
like, I'd like to use the analogy of a restaurant.

100
00:06:01,250 --> 00:06:05,480
So imagine if you have a restaurant and you've got the front of house

101
00:06:05,480 --> 00:06:06,830
which is where the tables are,

102
00:06:06,880 --> 00:06:09,100
when the customer sit. And then

103
00:06:09,130 --> 00:06:10,240
you've got the kitchen

104
00:06:10,270 --> 00:06:13,690
which is where the chefs work and where you're creating all the dishes.

105
00:06:14,050 --> 00:06:15,790
And finally, you've also got the larder

106
00:06:15,790 --> 00:06:20,080
which is where you store all the ingredients in the fridge or on the shelves.

107
00:06:20,770 --> 00:06:23,590
Now this front of house part

108
00:06:23,710 --> 00:06:28,300
which is where the user seats in is the client site. Now in the middle,

109
00:06:28,300 --> 00:06:32,770
we've got the kitchen, which is the server. And finally we've got the larder

110
00:06:32,800 --> 00:06:35,590
which is basically the database of ingredients.

111
00:06:36,130 --> 00:06:41,050
Now the client side is completely separate from the rest. So as a user,

112
00:06:41,050 --> 00:06:42,310
when I go onto a website,

113
00:06:42,580 --> 00:06:46,900
I'm not interacting with the server or the database directly. Instead,

114
00:06:46,900 --> 00:06:50,740
I'm interacting with my browser, which is on the client side. Now,

115
00:06:50,770 --> 00:06:55,270
when you go to a website and you request to see some piece of information,

116
00:06:55,300 --> 00:06:58,600
for example, you log in to Spotify and you want to view your playlists,

117
00:06:58,990 --> 00:07:01,020
what actually happens is, you know,

118
00:07:01,020 --> 00:07:04,420
you don't have the chef sort of cooking up the dish in front of you on the

119
00:07:04,420 --> 00:07:05,860
client side. No,

120
00:07:05,920 --> 00:07:10,920
instead what happens is that the server fetches the relevant ingredients from

121
00:07:12,160 --> 00:07:16,330
the database, so the data that's related to your Spotify playlist,

122
00:07:16,720 --> 00:07:21,100
and then it takes that data and it renders it into a HTML,

123
00:07:21,130 --> 00:07:23,020
CSS and JavaScript files.

124
00:07:23,440 --> 00:07:26,410
And then once that endproduct is created,

125
00:07:26,680 --> 00:07:30,910
it ships it out to the browser on the client side, which you

126
00:07:30,940 --> 00:07:33,040
as the user, can now view.

127
00:07:33,700 --> 00:07:38,700
So this is basically an overview of how our frontend and our backend interact in

128
00:07:39,790 --> 00:07:43,810
order to create a website experience for people. And in the coming lessons,

129
00:07:43,810 --> 00:07:47,710
we're going to be building out each of these parts and you gonna see in greater

130
00:07:47,710 --> 00:07:51,850
detail how they work together. So head over to the next lesson

131
00:07:52,000 --> 00:07:54,940
and we'll get started building our very first website.