1
00:00:01,210 --> 00:00:02,310
‫Dosen: Sekarang

2
00:00:02,310 --> 00:00:05,453
‫mari kita pelajari cara menyajikan file statis dengan Express.

3
00:00:06,960 --> 00:00:10,060
‫Sekarang apa yang sebenarnya saya maksud dengan file statis?

4
00:00:10,060 --> 00:00:13,710
‫Nah, itu adalah file yang ada di sistem file kami yang

5
00:00:13,710 --> 00:00:16,810
‫saat ini tidak dapat kami akses menggunakan semua rute.

6
00:00:16,810 --> 00:00:20,160
‫Jadi, misalnya, kami memiliki ikhtisar ini. html di sini

7
00:00:20,160 --> 00:00:21,850
‫di folder publik kami.

8
00:00:21,850 --> 00:00:25,000
‫Tapi sekarang tidak mungkin kita bisa mengaksesnya

9
00:00:25,000 --> 00:00:26,700
‫menggunakan browser, kan?

10
00:00:26,700 --> 00:00:29,630
‫Dan hal yang sama untuk file gambar yang kita

11
00:00:29,630 --> 00:00:32,500
‫miliki di sini, atau file CSS atau Javascript.

12
00:00:32,500 --> 00:00:34,770
‫Jadi izinkan saya menunjukkannya kepada Anda,

13
00:00:34,770 --> 00:00:37,373
‫dan izinkan saya benar-benar menggunakan browser kali ini.

14
00:00:38,470 --> 00:00:41,060
‫Untuk saat ini saya menyalin URL ini di sini

15
00:00:41,060 --> 00:00:42,700
‫hanya untuk menunjukkan kepada Anda

16
00:00:42,700 --> 00:00:45,110
‫bahwa itu akan berhasil, jelas juga di browser.

17
00:00:45,110 --> 00:00:48,210
‫Oke, jadi ini hasil kami yang belum diformat di sini,

18
00:00:48,210 --> 00:00:49,460
‫dari rute yang sama.

19
00:00:49,460 --> 00:00:52,716
‫Tetapi katakanlah kita sebenarnya ingin mengakses file HTML yang

20
00:00:52,716 --> 00:00:54,570
‫baru saja saya bicarakan.

21
00:00:54,570 --> 00:00:56,700
‫Jadi kita bisa, tentu saja,

22
00:00:57,770 --> 00:00:59,943
‫tidak hanya menulis publik dan kemudian,

23
00:01:01,730 --> 00:01:03,670
‫misalnya, ikhtisar. html, kan?

24
00:01:03,670 --> 00:01:06,197
‫Tidak mungkin kita bisa mengakses ini sekarang.

25
00:01:06,197 --> 00:01:09,500
‫Dan itu hanya karena kami tidak menentukan rute apa

26
00:01:09,500 --> 00:01:11,850
‫pun untuk URL ini, bukan?

27
00:01:11,850 --> 00:01:16,333
‫Kami tidak memiliki penangan yang terkait dengan rute ini.

28
00:01:17,450 --> 00:01:19,780
‫Jadi, jika kita benar-benar ingin mengakses

29
00:01:19,780 --> 00:01:21,460
‫sesuatu dari sistem file

30
00:01:21,460 --> 00:01:24,043
‫kita, kita perlu menggunakan middleware Express bawaan.

31
00:01:25,740 --> 00:01:28,120
‫Jadi, izinkan saya menunjukkan kepada Anda bagaimana kita bisa melakukannya.

32
00:01:28,120 --> 00:01:31,603
‫Misalnya, setelah ini.

33
00:01:34,190 --> 00:01:38,110
‫Sekarang di bagian ini kita sebenarnya hanya berbicara tentang API sehingga kita

34
00:01:38,110 --> 00:01:41,140
‫sebenarnya tidak perlu menyajikan file statis seperti gambar

35
00:01:41,140 --> 00:01:44,660
‫atau HTML, jadi apa yang baru saja saya tunjukkan kepada Anda.

36
00:01:44,660 --> 00:01:46,590
‫Tetapi karena bagian ini merupakan

37
00:01:46,590 --> 00:01:48,350
‫pengantar Express secara

38
00:01:48,350 --> 00:01:52,253
‫umum, saya juga ingin segera menunjukkan konten ini kepada Anda.

39
00:01:53,330 --> 00:01:56,360
‫Jadi, seperti yang saya katakan, yang harus kita

40
00:01:56,360 --> 00:01:59,380
‫lakukan adalah menggunakan middleware bawaan sederhana yang

41
00:01:59,380 --> 00:02:01,090
‫berjalan seperti ini.

42
00:02:01,090 --> 00:02:05,160
‫Express dot static, karena kami ingin menyajikan file statis, jadi ini

43
00:02:05,160 --> 00:02:07,500
‫adalah nama yang jelas untuk itu.

44
00:02:07,500 --> 00:02:10,170
‫Jadi di sini kita melewati direktori dari

45
00:02:10,170 --> 00:02:12,490
‫mana kita ingin menyajikan file statis.

46
00:02:12,490 --> 00:02:15,200
‫Dan dalam hal ini, saya akan menggunakan direktori publik.

47
00:02:15,200 --> 00:02:18,910
‫Jadi folder ini di sini di mana kita memiliki file HTML ini, oke?

48
00:02:18,910 --> 00:02:21,490
‫Dan sebenarnya mari kita

49
00:02:21,490 --> 00:02:26,490
‫gunakan string template di sini sehingga saya dapat melanjutkan dan

50
00:02:26,520 --> 00:02:30,470
‫menggunakan variabel dirname, lalu slash dan public.

51
00:02:30,470 --> 00:02:33,214
‫Simpan dan kembali ke browser.

52
00:02:33,214 --> 00:02:37,130
‫Kemudian kita akan dapat membuka ikhtisar ini. html.

53
00:02:37,130 --> 00:02:40,200
‫Sekarang itu tidak akan berfungsi di URL ini di sini.

54
00:02:40,200 --> 00:02:42,540
‫Sebenarnya harus seperti ini.

55
00:02:42,540 --> 00:02:46,290
‫Jadi tanpa publik, cukup /overview. html.

56
00:02:46,290 --> 00:02:48,650
‫Jadi mari kita lihat, dan itu benar-benar berhasil.

57
00:02:48,650 --> 00:02:49,483
‫Oke.

58
00:02:49,483 --> 00:02:50,430
‫Sekarang, mengapa begitu?

59
00:02:50,430 --> 00:02:53,700
‫Mengapa kita tidak memerlukan folder publik di sini di URL?

60
00:02:53,700 --> 00:02:56,650
‫Yah, hanya karena ketika kita membuka URL yang tidak

61
00:02:56,650 --> 00:02:58,780
‫dapat ditemukan di salah satu

62
00:02:58,780 --> 00:03:02,480
‫rute kita, maka akan terlihat di folder publik yang kita tetapkan.

63
00:03:02,480 --> 00:03:05,620
‫Dan itu mengatur folder itu ke root.

64
00:03:05,620 --> 00:03:08,210
‫Oke, jadi mari kita berpura-pura bahwa root sekarang

65
00:03:08,210 --> 00:03:09,730
‫adalah folder publik kita.

66
00:03:09,730 --> 00:03:12,740
‫Jadi ini di sini, dan kemudian ikhtisarnya ada di sana.

67
00:03:12,740 --> 00:03:15,003
‫Dan itulah mengapa kami telah melakukan akses ke sana.

68
00:03:16,020 --> 00:03:18,530
‫Jadi di sana kita juga punya gambar, misalnya.

69
00:03:18,530 --> 00:03:23,530
‫Katakanlah kita ingin membuka gambar dan kemudian pin ini di sini.

70
00:03:23,640 --> 00:03:25,053
‫Dan kita bisa melakukan itu.

71
00:03:26,980 --> 00:03:27,853
‫Jadi

72
00:03:29,620 --> 00:03:33,200
‫gambar, pin png, dan ini dia.

73
00:03:33,200 --> 00:03:34,490
‫Berikut adalah gambar.

74
00:03:34,490 --> 00:03:38,830
‫Sekarang yang tidak bisa kami lakukan adalah ini, karena ini bukan file.

75
00:03:38,830 --> 00:03:41,060
‫Ini terlihat seperti rute biasa, jadi

76
00:03:41,060 --> 00:03:44,960
‫Express benar-benar mencoba menemukan penangan rute untuk rute ini, yang

77
00:03:44,960 --> 00:03:47,070
‫tidak dapat dilakukan karena Anda

78
00:03:47,070 --> 00:03:49,100
‫tidak mendefinisikan apa pun.

79
00:03:49,100 --> 00:03:49,933
‫Baiklah?

80
00:03:49,933 --> 00:03:52,440
‫Jadi sebenarnya ini hanya berfungsi untuk file statis.

81
00:03:52,440 --> 00:03:56,330
‫Dalam hal ini, sekali lagi, tidak akan masuk ke rute baru,

82
00:03:56,330 --> 00:03:58,790
‫tetapi hanya menyajikan file yang kami tentukan

83
00:03:58,790 --> 00:04:00,280
‫dari folder publik,

84
00:04:00,280 --> 00:04:04,043
‫atau di folder yang kami tentukan di sini di middleware ini.

85
00:04:05,420 --> 00:04:09,480
‫Sekarang lihat konsol di sini dan lihat semua permintaan yang

86
00:04:09,480 --> 00:04:12,660
‫sebenarnya dilakukan ketika kami membuka halaman itu.

87
00:04:12,660 --> 00:04:15,690
‫Sekarang mari kita selesaikan ini di sini supaya kita melihat semua permintaan

88
00:04:15,690 --> 00:04:18,090
‫yang sebenarnya baru saja datang dari halaman ikhtisar itu.

89
00:04:19,090 --> 00:04:23,870
‫Jadi mari kita menulis lagi ikhtisar. html di sini.

90
00:04:23,870 --> 00:04:25,696
‫Dan gambar-gambar ini di

91
00:04:25,696 --> 00:04:28,810
‫sini rusak dan itu karena html ini tidak

92
00:04:28,810 --> 00:04:30,720
‫seharusnya disajikan seperti ini, oke?

93
00:04:30,720 --> 00:04:32,320
‫Saya hanya menggunakannya sekarang di

94
00:04:32,320 --> 00:04:34,223
‫sini sehingga kami mendapatkan umpan balik visual.

95
00:04:35,271 --> 00:04:38,423
‫Saya tidak tertarik sama sekali dengan konten di sini.

96
00:04:39,980 --> 00:04:42,800
‫Sekarang lihat saja semua permintaan yang

97
00:04:42,800 --> 00:04:44,950
‫dilakukan untuk semua aset.

98
00:04:44,950 --> 00:04:46,580
‫Jadi seperti yang saya

99
00:04:46,580 --> 00:04:49,600
‫katakan di awal, untuk setiap bagian yang merupakan bagian

100
00:04:49,600 --> 00:04:52,360
‫dari situs web, server kami sebenarnya mendapat permintaan terpisah.

101
00:04:52,360 --> 00:04:55,070
‫Dan Anda lihat di sini bahwa kebanyakan dari mereka mendapatkan 404 ini.

102
00:04:55,070 --> 00:04:59,260
‫Jadi itulah mengapa tautan kemudian rusak di halaman web, karena

103
00:04:59,260 --> 00:05:02,270
‫Express tidak dapat menemukannya di folder ini.

104
00:05:02,270 --> 00:05:04,090
‫Tapi sekali lagi, bukan itu intinya di sini.

105
00:05:04,090 --> 00:05:05,650
‫Apa yang ingin saya

106
00:05:05,650 --> 00:05:07,496
‫tunjukkan kepada Anda adalah bagaimana kami

107
00:05:07,496 --> 00:05:10,806
‫dapat menyajikan file statis dari folder dan bukan dari rute.

108
00:05:10,806 --> 00:05:11,950
‫Baiklah.

109
00:05:11,950 --> 00:05:15,840
‫Dan itu mengakhiri pengenalan dasar Express.

110
00:05:15,840 --> 00:05:17,300
‫Dalam dua video berikutnya

111
00:05:17,300 --> 00:05:19,266
‫kita akan berbicara tentang sesuatu yang disebut

112
00:05:19,266 --> 00:05:22,573
‫variabel lingkungan dan kita juga akan mengatur ESlint dalam kode VS lisan.