1
00:00:00,350 --> 00:00:03,100
이 블로그의 마지막 비디오에 오신 것을 환영합니다.

2
00:00:03,310 --> 00:00:04,400
그래서 우리는 변화해야합니다.

3
00:00:04,400 --> 00:00:05,050
우리가 만들거야.

4
00:00:05,100 --> 00:00:20,030
첫 번째는 제가 언급 한 Express sanitiser를 구현하는 것입니다.이 문제는 HDMI Olafur가 실제로 사용자를 렌더링하는 데 스크립트 해킹 대신 유해한 자바 스크립트를 입력 할 가능성이있는 문제를 해결하는 데 도움이됩니다.

5
00:00:20,130 --> 00:00:30,980
우리는 위 코드를 실행하지 않으므로 우리가 위생 조치를 사용하여 기본적으로 그 입력을 받아들이면 모든 스크립트를 제거하고 단지 노후 한 동료를 제공합니다.

6
00:00:31,290 --> 00:00:33,660
그리고 나서 인덱스 페이지의 스타일을 지정하기를 원합니다.

7
00:00:33,690 --> 00:00:41,730
조금 거칠게 보입니다. 마지막으로 할 일은 좀 더 유용하게 사용할 수 있도록 편안한 Rhodes 테이블을 조금만 업데이트하는 것입니다.

8
00:00:41,760 --> 00:00:44,000
그래서 소독제부터 시작합시다.

9
00:00:44,400 --> 00:00:51,350
그래서 Express dash sanitiser 대시 (dash dash)라는 패키지를 설치하려고합니다.

10
00:00:51,390 --> 00:00:53,430
구하다.

11
00:00:54,930 --> 00:00:55,660
승인.

12
00:00:55,710 --> 00:01:12,080
이제는 우리의 응용 프로그램에서 그렇게했습니다. 그렇습니다. 그렇기 때문에 익스프레스 sanitiser와 똑같은 익스프레스 Desch sanitiser를 요구할 것입니다.

13
00:01:12,330 --> 00:01:23,690
그리고 우리는 애플 리케이션 익스프레스 sanitiser를 사용하여 우리의 애플 리케이션을 말해야 만 유일한 요구 사항이 모든 파서 후 간다.

14
00:01:23,730 --> 00:01:25,110
여기에 정의하십시오.

15
00:01:25,270 --> 00:01:25,960
승인.

16
00:01:26,410 --> 00:01:27,730
그리고 그게 다야.

17
00:01:27,750 --> 00:01:34,410
이제는 그것을 사용하여 새 블로그를 만들 때 대신 시작하기를 원합니다.

18
00:01:34,410 --> 00:01:36,180
따라서 실제로 업데이트를 만듭니다.

19
00:01:36,180 --> 00:01:39,900
두 곳에서 데이터를 가져 와서 데이터베이스에 저장하고 있습니다.

20
00:01:39,900 --> 00:02:03,770
두 번 모두 당신이 입력을 sanitize하고 대신 우리가 살생하고자 원하는 것을 생성하고 싶습니다 몸의 요청이 몸의 요청을 기억하고 있습니다. 우리의 경우에는 양식에서 왔고 그 다음 블로그는이 줄로 인해 여기에 있습니다.

21
00:02:04,240 --> 00:02:09,020
블로그 제목 블로그 이미지와 마침내 블로그 시체를 찾으십시오.

22
00:02:09,270 --> 00:02:11,020
그리고 이것이 우리가 염려하는 것입니다.

23
00:02:11,280 --> 00:02:13,500
그래서 우리는 블로그 도트 시체를해야합니다.

24
00:02:13,590 --> 00:02:18,470
그래서 여기 긴 긴 이름의 일종이지만 블로그 몸체를 요청합니다.

25
00:02:18,720 --> 00:02:27,630
그리고 우리는 위생 처리를 요청하는 것과 동등한 것으로 바꾸어서이 모든 것을 위생 처리 할 것입니다.

26
00:02:29,100 --> 00:02:38,670
그래서 우리는 현재 그것을 위생적으로하는 것과 똑같은 것을 취한 다음 전체 요청을 바디 덤프 기록 된 본문과 동일하게 변경합니다.

27
00:02:38,700 --> 00:02:42,230
그러니 당신이 정직한 블로그를 만들도록 분명히하겠습니다.

28
00:02:42,770 --> 00:02:51,510
그 시신을 전후에 요청하십시오.

29
00:02:51,510 --> 00:02:53,080
그냥 그렇게.

30
00:02:53,520 --> 00:02:59,330
그리고 좀 더보기 쉽게하기 위해 뭔가를 추가하겠습니다.

31
00:02:59,340 --> 00:03:00,100
큰.

32
00:03:00,570 --> 00:03:01,080
승인.

33
00:03:01,140 --> 00:03:02,360
그럼 이제 한번 해보 자고.

34
00:03:02,400 --> 00:03:08,140
서버를 새로 시작하십시오.

35
00:03:08,250 --> 00:03:10,600
우리는 새로운 지위를 만들어야 할 것입니다.

36
00:03:11,340 --> 00:03:24,790
데모 무작위 이미지라고 불리는 것을 만들자. 우리가 사용하거나 입력하기를 원하는 좋은 HMO를 추가 한 다음 다시 경고가 될만한 나쁜 것을 추가합시다.

37
00:03:26,680 --> 00:03:28,630
우리는 거기에 갈.

38
00:03:28,680 --> 00:03:35,330
그래서 이것이 작동한다면 우리는 이전과 이후 둘 다 이것을 가지고 있음을 알 수 있습니다.

39
00:03:35,730 --> 00:03:37,920
무슨 일이 일어나는지 살펴 보겠습니다.

40
00:03:37,950 --> 00:03:38,620
완전한.

41
00:03:38,640 --> 00:03:41,610
첫 번째 시체가 이것과 동일하다는 것을 알 수 있습니다.

42
00:03:41,610 --> 00:03:45,320
또는 두 번째로 스크립트 태그를 넣었습니다.

43
00:03:45,390 --> 00:03:47,360
몸에는 H-1 만 있습니다.

44
00:03:47,820 --> 00:03:49,830
그래서 우리가 무언가를 위생적으로 처리해야합니다.

45
00:03:50,040 --> 00:03:56,690
그리고 우리가 지금 보여 주면 우리는 그들이 우리가 믿는 새로운 지위에 간다.

46
00:03:56,690 --> 00:03:59,700
여기에 우리가 살펴 봅니다.

47
00:03:59,730 --> 00:04:03,350
문제를 직접 표시하고 있지만 스크립트 태그가 전혀 없습니다.

48
00:04:03,540 --> 00:04:04,950
그래서 그것은 잘 작동합니다.

49
00:04:04,950 --> 00:04:14,380
그들이하고 싶은 마지막 일은 동일한 코드를 실행하지만 업데이트 대신 수행하는 것입니다.

50
00:04:15,180 --> 00:04:21,040
우리는 블로그에서 요청을 업데이트하기 전에 바로 거기에 있습니다.

51
00:04:21,390 --> 00:04:23,110
그럼 똑같은 짓을 했어.

52
00:04:23,400 --> 00:04:24,630
마이너 번호

53
00:04:24,750 --> 00:04:34,170
이것은 우리가 아직 이야기하지 않은 미들웨어로 잘 알려진 사례를위한 좋은 유스 케이스이지만 두 가지 다른 경로에서 두 번 반복되는 것입니다.

54
00:04:34,170 --> 00:04:40,410
우리가 할 수있는 일은이 두 가지 경로 이전에이 코드를 실행할 미들웨어를 작성하는 것입니다.하지만 미들웨어를 다루겠습니다.

55
00:04:40,440 --> 00:04:45,270
EXPRESS의 끝을 향한이 과정의 뒷부분에서 이제 어떻게해야할까요?

56
00:04:45,720 --> 00:04:47,270
그리고 그것은 잘 작동합니다.

57
00:04:47,520 --> 00:04:52,840
그러면 다음에 만드는 사람을 업데이트 할 때도 두 가지 방법으로 위생 처리됩니다.

58
00:04:52,860 --> 00:04:55,300
EJ에 초점을 맞추거나 색인을 만들어 봅시다.

59
00:04:55,320 --> 00:04:56,050
예.

60
00:04:56,060 --> 00:04:57,800
그래서 약간의 작업이 필요합니다.

61
00:04:57,850 --> 00:04:59,380
지금이 모양 같아요.

62
00:04:59,760 --> 00:05:03,160
몇 가지 삭제를 시작하겠습니다.

63
00:05:03,600 --> 00:05:08,400
그리고 그것은 우리가 sanitiser를 추가하기 전에 내가 만든 게시물 중 하나였습니다.

64
00:05:08,440 --> 00:05:18,120
나는 이미지를 가지고 있지 않은 것들을 삭제하기 때문에 실제로 이미지를 볼 수있는 스타일을 쉽게 완성 할 수있다.

65
00:05:18,570 --> 00:05:25,370
이제 우리가하고 싶은 것은 시작하기에 집중하는 것입니다. 이미 사용했던 많은 코드를 사용하려고합니다.

66
00:05:25,600 --> 00:05:42,800
그래서 우리의 인덱스 대신에 좋은 헤더를 가지고 있지만 div의 내부에 모든 것을 넣을 것입니다. 그리고이 div는 UI 중심 텍스트 컨테이너와 동등한 클래스를 갖게 될 것입니다.

67
00:05:43,060 --> 00:05:45,730
그리고 내부는 우리 부서를 가질 것입니다.

68
00:05:46,060 --> 00:05:52,690
그리고 이것은 기본적으로 우리가 양식과 쇼 페이지에 대해 쓴 마지막 작은 라인에서부터 재활용됩니다.

69
00:05:52,720 --> 00:05:58,890
따라서 클래스는 거대한 머리글과 같고 인덱스 페이지 세트를 넣을 것입니다.

70
00:05:58,930 --> 00:06:03,990
그냥 블로그를 위해 휴식을 가자.

71
00:06:04,390 --> 00:06:05,710
그냥 그렇게.

72
00:06:05,830 --> 00:06:09,700
그리고 우리가 잘했을 때 나는 다른 div를 추가했습니다.

73
00:06:09,700 --> 00:06:23,770
이것은 하나의 상자에 작은 선을 제공하고 그 내부는 루핑을 통해 전달되는이 UI 상단 첨부 세그먼트를 제공하는 세그먼트가 포함됩니다.

74
00:06:24,010 --> 00:06:43,940
그리고 우리는 클래스 UI로 나누어 진 div를 가진 루프인데, 각 아이템에 대해 우리는 아이템을 나누었고 아이템 사이에는 자동 디바이더를 넣습니다.

75
00:06:44,170 --> 00:06:49,120
그래서 우리는이 코드를 여기에 복사 할 것입니다.

76
00:06:49,120 --> 00:06:53,700
우리가하는 일은 약간의 변화가 필요합니다.

77
00:06:53,710 --> 00:06:58,470
첫 번째는 부채에 불과하지만 우리는이 내부를 인쇄하려고하지 않습니다.

78
00:06:58,510 --> 00:07:21,620
우리는 item과 같은 div 클래스를 만들고 나서, 먼저 이미지가있는 아이템 안에 이미지가있는 div 대신에 이미지가 갈 것이고 우리는 거기에 넣을 것입니다. 이미지의 크기 때문에 우리는 거대한 이미지가 더 이상 전체 화면을 차지하지 못하게합니다.

79
00:07:21,990 --> 00:07:29,780
OK 이미지가 내부에 이미지를 넣었습니까? 그런 다음 내용과 동일한 다른 div 클래스가 필요합니다.

80
00:07:30,220 --> 00:07:32,470
그리고 이것은 내가 몇 가지 것을 넣을 곳입니다.

81
00:07:32,470 --> 00:07:53,430
첫 번째 것은 제목이고 실제로 제목이있는 H-2를 만드는 것이 아니라 앵커 태그를 만들거나 앵커 태그가 Hetter와 같은 클래스를 갖지만 표시 페이지와 동일한 참조를 갖게되며 위험도가있는 사본 당신은 이미 당신이 가진 것과 같습니다.

82
00:07:53,440 --> 00:08:04,470
그래서 더 많은 링크를 읽으십시오. 그래서 우리가 이것을하는 이유는 각 블로그에 대한 헤더를 클릭하면 표시 페이지로 이동하거나 더 많은 것을 클릭 할 수 있습니다.

83
00:08:04,880 --> 00:08:07,410
작은 구문 오류가 있는지 확인합시다.

84
00:08:07,450 --> 00:08:11,450
우리는 Atra flops에 대한 우리의 마감 견적을 여기에서 놓치고 있습니다.

85
00:08:12,670 --> 00:08:13,630
승인.

86
00:08:13,960 --> 00:08:18,520
Atra는 쇼 페이지이고 그 다음 괄호 안에 블로그 제목이 있습니다.

87
00:08:18,520 --> 00:08:19,860
그것은 다소 혼란 스럽다.

88
00:08:19,930 --> 00:08:35,530
그 다음에는이 특정 항목에 대한 정보를 넣기위한 장소 인 Metta와 같은 클래스의 div를 추가합니다. 여기서는이 특정 항목에 대해 우리가 이미 가지고있는 날짜의 범위가됩니다.

89
00:08:36,040 --> 00:08:51,890
그러나 나는이 날짜를 형식화 할 것입니다. 그래서 우리는 이미 쇼 페이지에서 본 날짜 문자열에 블로그 점을 작성한 다음 그곳에서 라이브를 닫습니다. 그리고 나서 우리는 description과 같은 div 클래스를 갖게 될 것입니다.

90
00:08:52,210 --> 00:08:55,280
이것이 바로 우리가이 콘텐츠를 넣을 곳입니다.

91
00:08:55,690 --> 00:08:58,230
블로그의 실제 본문입니다.

92
00:08:58,600 --> 00:09:08,160
그리고 등호를하기보다는 다시 대시로 바꾸거나 다시 변경하지는 않겠습니다.하지만 이제는 살인화된 내용의 실제 시대를 알 수 있도록 대시로 바꿀 것입니다.

93
00:09:08,380 --> 00:09:24,430
마지막으로 div에 클래식을 추가하고 그 대신에 더 많은 것을 읽기 위해 버튼을 놓을 것이고 앵커 태그를 만들 것이며 우리가 이미 가지고있는 태그를 복사하여 조금만 바꿀 것입니다.

94
00:09:24,430 --> 00:09:30,710
따라서 더 이상 고전적인 헤더가 필요하지 않지만 대신 큰 버튼이 필요합니다.

95
00:09:30,970 --> 00:09:35,280
그래서 저는 기초가 떠있었습니다.

96
00:09:35,470 --> 00:09:38,410
다시 바이올렛 색을 선택하십시오.

97
00:09:39,370 --> 00:09:42,190
그리고 우리는 이것을 조금 할 수 있습니다.

98
00:09:42,190 --> 00:09:44,630
봐야 할 것이 많습니다.

99
00:09:44,950 --> 00:09:48,090
그럼 이것을 조금만 더 해봅시다.

100
00:09:48,160 --> 00:10:07,360
그래서 여기에 개봉 후에 우리가 더 읽어야 할 앵커 태그를 설정하고 아이콘에 더 많은 것을 읽은 후에 작은 화살이 될 셰브론 아이콘을 추가 할 것입니다.

101
00:10:07,380 --> 00:10:09,040
OK 마라톤 거기.

102
00:10:09,070 --> 00:10:10,680
우리가 추가 한 것들.

103
00:10:10,750 --> 00:10:20,470
이 문제를 처음부터 해결하고 싶지 않다면 모든 것이 OK인지 확인하고 솔루션 코드를 살펴보십시오.

104
00:10:20,710 --> 00:10:25,360
구문 오류가없는 것을 어떻게 보는지 보겠습니다.

105
00:10:27,310 --> 00:10:30,570
그것은 우리가 찾고있는 것만 넘어갑니다.

106
00:10:30,580 --> 00:10:37,570
그래서 우리는이 글의 처음 100 자 또는이 글자만큼 많은 글자를 자릅니다.

107
00:10:37,570 --> 00:10:43,560
이 경우 매우 짧은 링크를 클릭하면 더 많은 링크를 볼 수 있습니다.

108
00:10:43,690 --> 00:10:47,760
돌아가 편집 할 수 있습니다.

109
00:10:47,760 --> 00:10:49,170
우리는 여기에 그녀의 이미지를 가지고있다.

110
00:10:49,210 --> 00:10:57,910
분할 된 선들 뒤에 우리는 우리의 헤터 (Hetter)가 있습니다. 우리는이 모든 부분을 돌아 다니며 우리는 거의 끝났습니다.

111
00:10:58,210 --> 00:11:04,060
그래서 우리는 당신이이 수업들을 모두 알 필요가 없다고 느끼지는 않는다고 다시 생각하지 마십시오.

112
00:11:04,060 --> 00:11:04,940
나는 그냥 그렇게했다.

113
00:11:05,140 --> 00:11:06,090
너는 그들에게 너를 주었다.

114
00:11:06,130 --> 00:11:07,380
빠른 화재 스타일.

115
00:11:07,510 --> 00:11:10,660
요점은 당신이 모든 것을 배우기 때문이 아닙니다.

116
00:11:11,080 --> 00:11:14,670
그러나 당신이 더 많은 것을 배우고 시맨틱 dashi에가는 이유는 무엇입니까?

117
00:11:14,690 --> 00:11:17,200
훌륭한 자습서와 리소스가 많이 있습니다.

118
00:11:17,260 --> 00:11:21,270
부트 스트랩만큼 널리 사용되지는 않지만 확실히 성장하고 있습니다.

119
00:11:21,400 --> 00:11:24,770
나는 많은 학생들이 스스로 찾아 낼 수 있음을 알았다.

120
00:11:24,880 --> 00:11:37,430
과거에는 내가 가장 많이 가르쳤던 두 가지 가장 최근의 수업에서 블루칩 이후에 학생들에게 소개 할 것이지만 학생들은 정말 빨리 나를 사랑하지 않고 그것과 사랑에 빠졌고 부트 스트랩을 통해 그것을 사용하게되었습니다.

121
00:11:37,630 --> 00:11:40,800
대부분의 학생이 있지만 전적으로 당신에게 달려 있습니다.

122
00:11:40,880 --> 00:11:45,300
나는 그들 모두를 즐겼고 부트 스트랩은 현재 확실히 인기가있다.

123
00:11:45,340 --> 00:11:50,780
좋습니다. 제가 언급 한 마지막 것은 리팩터링 테이블입니다. 우리 테이블은 단지 작은 것입니다.

124
00:11:50,920 --> 00:11:57,140
그리고 내가하고 싶은 것은 이들 각각에 해당하는 몽구스 방법의 마지막 칼럼을 추가하는 것입니다.

125
00:11:57,400 --> 00:12:03,510
그래서 이드가 찾은 업데이트를 찾아서 아이디 찾기에서 제거를 찾는다.

126
00:12:03,860 --> 00:12:06,100
테이블이 어떻게 작동하는지 간단히 살펴 보겠습니다.

127
00:12:06,110 --> 00:12:24,540
그래서 여기에 우리가 다른 시간에 추가 할 필요가있는 양을 나이 든 차트가 있습니다. 우리는 그것을 mongoose 메서드라고 부르며 미리보기로 요리 미리보기를 열고 여기를 아래쪽으로 옮깁니다.

128
00:12:24,750 --> 00:12:27,150
우리 테이블이나 새로운 일이 있습니다.

129
00:12:27,460 --> 00:12:36,450
그리고 색인을 위해 몽구스 방법으로 TV에 개를 추가 할 것입니다.

130
00:12:36,880 --> 00:12:38,230
됐어.

131
00:12:38,230 --> 00:12:43,400
다음으로 우리는 실제로 몽크 방법이 전혀없는 새로운 것을 가지고 있습니다.

132
00:12:43,450 --> 00:12:50,890
따라서 파일을 공백으로 두지 않고 그냥 폼을 렌더링하는 파일에 넣을 것입니다.

133
00:12:51,130 --> 00:12:59,330
다음으로 우리는 생성과 생성을 통해 dog dot create를 할 것입니다.

134
00:13:01,150 --> 00:13:12,040
그리고 정말 멋진 기능 중 하나는이 라이프 미리보기를 MIDI 편집 기능으로 사용하면 여기에서 선택하면 꽤 멋지다는 것을 알 수 있습니다.

135
00:13:12,190 --> 00:13:15,920
따라서 관리자를 열어서 생방송을 보지 않아도됩니다.

136
00:13:16,120 --> 00:13:21,900
그리고 사물을 변경하면 페이지를 저장하거나 새로 고치지 않고도 실시간으로 업데이트됩니다.

137
00:13:22,420 --> 00:13:22,820
승인.

138
00:13:22,930 --> 00:13:31,900
그러면 ID로 찾은 강아지를 보여주는 쇼가 있습니다.

139
00:13:32,260 --> 00:13:35,400
개는 ID로 벌금을 부과합니다.

140
00:13:35,710 --> 00:13:49,880
우리는 우리가 편집중인 개를 찾아야합니다. 그것은 양식을위한 것입니다. 그리고 나서 ID로 트림되고 긴 하나를 업데이트하는 개가 업데이트됩니다.

141
00:13:50,360 --> 00:14:00,830
그리고 그는 또한 다소 긴 강아지가 이드에 의해 찾아 내고 모든 것을 제거합니다.

142
00:14:01,300 --> 00:14:02,300
한 번 보자.

143
00:14:02,620 --> 00:14:04,250
여기 테이블이 있습니다.

144
00:14:04,380 --> 00:14:23,150
내가 우연히 업데이트를 표시하도록되어있는 CD 중 하나를 여기 실수로 삭제 한 것처럼 보입니다. 그러면 업데이트가 개가 딱딱한 간지개 개를 업데이트 한 다음 어딘가로 리디렉션해야합니다.

145
00:14:24,150 --> 00:14:24,860
괜찮아.

146
00:14:25,150 --> 00:14:26,430
이제 정상으로 돌아 가야합니다.

147
00:14:26,480 --> 00:14:28,220
여기 테이블이 있습니다.

148
00:14:28,210 --> 00:14:31,740
그래서 몽구스 방법이 전혀없는 유일한 사람입니다.

149
00:14:31,960 --> 00:14:37,390
새로운 것은 데이터베이스를 찾지 못하기 때문에 새로운 것이 될 것입니다.

150
00:14:37,570 --> 00:14:40,090
그것은 단지 우리를 형식으로 만듭니다.

151
00:14:40,210 --> 00:14:40,570
큰.

152
00:14:40,570 --> 00:14:44,580
잘하면이 테이블을 참조 할 수있는 미래에 당신을 위해 유용합니다.

153
00:14:44,870 --> 00:14:50,290
나는 우리가 많이 사용할 많은 중요한 정보를 확실히 다루고있다.

154
00:14:50,290 --> 00:14:50,860
괜찮아.

155
00:14:50,980 --> 00:14:56,280
이제 우리는 이것을 끝내고 더 복잡한 애플 리케이션을 좀 더 재미있는 것들로 넘어 가게됩니다.

156
00:14:56,360 --> 00:14:59,980
나는 약간의 미국이 덮여있는 것을 알아 차렸다.

157
00:15:00,040 --> 00:15:01,710
항상 힘든 일입니다.

158
00:15:01,710 --> 00:15:03,870
흥미로운 이유는 단지 많은 정보 때문입니다.

159
00:15:03,880 --> 00:15:12,380
하지만 그 신뢰성이 읽기 업데이트를 생성하고 엔티티를 삭제할 수 있도록하는 것이 중요합니다.

160
00:15:12,380 --> 00:15:12,810
괜찮아.

161
00:15:12,900 --> 00:15:13,920
내년에 보자.